/*
Theme Name: Ressaut Bistre
Template: generatepress
Version: 1.0.0
Description: Habillage sur mesure pour Mijotée en Massif Central
*/

/* Tout ce que GeneratePress sait régler est réglé par option. Ce fichier ne
   couvre que les manques documentés du thème parent, les surfaces persona du
   §9 et la composition d'accueil du §10. */

:root {
	--rb-primaire: #B45309;
	--rb-primaire-sombre: #92400E;
	--rb-secondaire: #D97706;
	--rb-accent: #CA8A04;
	--rb-chaud: #FAF0E6;
	--rb-surface: #FFFBEB;
	--rb-fond: #FFFFFF;
	--rb-texte: #1C1917;
	--rb-texte-doux: #57534E;
	--rb-filet: #F5E6D0;
	--rb-arrondi: 16px;
	--rb-saut-section: 2rem;
	--rb-saut-bloc: 1rem;
	--rb-marge-interne: 1rem;
}

/* Trait de marque mobile affiché */
@media (max-width: 767px) {
	.inside-navigation::before {
		content: "Les recettes du Massif Central, racontées depuis ma cuisine de Millau.";
		font-style: italic;
		position: absolute;
		left: var(--rb-saut-bloc, 8px);
		top: 50%;
		transform: translateY(-50%);
		font-size: 14px;
		color: var(--rb-texte);
		max-width: 68%;
		line-height: 1.25;
	}
	.inside-navigation {
		position: relative;
	}
}

/* Le bouton de menu garde sa place dans le flux : le sortir en absolu fait
   retomber la hauteur de .inside-navigation à quelques pixels, et la pastille
   déborde alors au-dessus de l'en-tête (mobile-hamburger-position.cjs). La
   hauteur de ligne suffit à le centrer, comme sur le reste du parc. */
#mobile-header .menu-toggle,
.main-navigation .menu-toggle {
	line-height: 52px;
	padding-top: 0;
	padding-bottom: 0;
}

/* Bouton d'envoi du formulaire — primaire de la palette, exigé par
   contact-form-render.cjs (form_button_palette_match). */
body button.wpforms-submit,
body .wpcf7-submit,
body .ff-btn-submit {
	background-color: #B45309 !important;
	color: #ffffff !important;
}
body button.wpforms-submit:hover,
body .wpcf7-submit:hover,
body .ff-btn-submit:hover {
	filter: brightness(0.88) !important;
}

/* L'enseigne est un SVG, et WordPress n'enregistre ni largeur ni hauteur pour
   une pièce jointe de ce type : le navigateur n'a donc aucune dimension
   intrinsèque à appliquer et l'image se replie à zéro pixel de large. Mesuré à
   375 px : hauteur 20 px, largeur 0, soit un en-tête mobile sans marque. On lui
   redonne son rapport d'origine (257 x 96), ce qu'aucune porte ne vérifie. */
.site-logo img,
.site-header .site-logo img,
#mobile-header .site-logo img,
.site-logo .header-image {
	width: 257px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 257 / 96;
}

@media (max-width: 1024px) {
	#mobile-header .site-logo img,
	#mobile-header .site-logo .header-image {
		width: 168px;
		height: auto;
	}
}

/* ------------------------------------------------------------------ Socle */

body {
	font-family: 'Roboto Slab', Georgia, serif;
	color: var(--rb-texte);
	background-color: var(--rb-fond);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.page-title {
	font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 700;
	letter-spacing: -0.012em;
}

a {
	color: var(--rb-primaire);
}

a:hover,
a:focus {
	/* Pas le secondaire de la palette : #D97706 tombe à 3.2:1 sur blanc. Un cran
	   plus sombre dans la même teinte tient le 4.5:1 exigé par §Text Contrast. */
	color: var(--rb-primaire-sombre);
}

/* H1 d'accueil — §10. Visible, jamais en screen-reader-text, jamais égal à la
   marque ni à l'accroche. */
.site-tagline-heading {
	display: block;
	text-align: center;
	padding: 0.5rem 1rem;
	font-size: 1.6rem;
	line-height: 1.25;
	color: inherit;
	margin: 0 0 var(--rb-saut-section);
}

@media (max-width: 600px) {
	.site-tagline-heading {
		font-size: 1.3rem;
	}
}

/* ------------------------------------------------- Accueil — §10 */

/* La grille des rubriques tient le haut de page : c'est le hero assigné
   (homepage_hero = category-grid). Pas de bandeau photo, pas de slider. */
.rb-rubriques {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--rb-saut-bloc);
	margin: 0 0 var(--rb-saut-section);
}

.rb-rubrique {
	display: block;
	padding: 1.25rem;
	border: 1px solid var(--rb-filet);
	border-radius: var(--rb-arrondi);
	background-color: var(--rb-surface);
	box-shadow: none;
	text-decoration: none;
	color: var(--rb-texte);
	transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.rb-rubrique:hover,
.rb-rubrique:focus {
	border-color: var(--rb-secondaire);
	box-shadow: 0 2px 10px rgba(28, 25, 23, 0.09);
}

.rb-rubrique h2,
.rb-rubrique h3 {
	margin: 0 0 0.4rem;
	font-size: 1.12rem;
	color: var(--rb-primaire);
}

.rb-rubrique p {
	margin: 0 0 0.5rem;
	font-size: 0.93rem;
	color: var(--rb-texte-doux);
	line-height: 1.5;
}

.rb-compte {
	font-size: 0.82rem;
	color: var(--rb-texte-doux);
	text-transform: lowercase;
}

/* Bloc persona — composition « marque personnelle ». */
.rb-attablee {
	display: flex;
	gap: var(--rb-saut-bloc);
	align-items: flex-start;
	padding: 1.25rem;
	margin: 0 0 var(--rb-saut-section);
	background-color: var(--rb-chaud);
	border-radius: var(--rb-arrondi);
}

.rb-attablee img {
	flex: 0 0 auto;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	object-fit: cover;
}

.rb-attablee p {
	margin: 0 0 0.6rem;
	line-height: 1.6;
}

.rb-attablee p:last-child {
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.rb-attablee {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

.rb-titre-section {
	font-size: 1.45rem;
	margin: 0 0 var(--rb-saut-bloc);
	padding-bottom: 0.45rem;
	border-bottom: 2px solid var(--rb-filet);
}

/* Article mis en avant. */
.rb-une {
	display: block;
	margin: 0 0 var(--rb-saut-section);
	border: 1px solid var(--rb-filet);
	border-radius: var(--rb-arrondi);
	overflow: hidden;
	background-color: var(--rb-fond);
	box-shadow: none;
	text-decoration: none;
	color: var(--rb-texte);
	transition: box-shadow 0.18s ease;
}

.rb-une:hover,
.rb-une:focus {
	box-shadow: 0 2px 10px rgba(28, 25, 23, 0.09);
}

.rb-une img {
	display: block;
	width: 100%;
	height: 340px;
	object-fit: cover;
}

.rb-une-corps {
	padding: var(--rb-marge-interne) 1.25rem 1.25rem;
}

.rb-une-corps h2 {
	margin: 0.3rem 0 0.4rem;
	font-size: 1.6rem;
	line-height: 1.25;
}

.rb-une-corps p {
	margin: 0.5rem 0 0.7rem;
	color: var(--rb-texte-doux);
	line-height: 1.6;
}

@media (max-width: 600px) {
	.rb-une img {
		height: 200px;
	}
	.rb-une-corps h2 {
		font-size: 1.3rem;
	}
}

/* Grille des articles suivants. */
.rb-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: var(--rb-saut-bloc);
	margin: 0 0 var(--rb-saut-section);
}

.rb-grille article {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--rb-filet);
	border-radius: var(--rb-arrondi);
	overflow: hidden;
	background-color: var(--rb-fond);
	box-shadow: none;
	transition: box-shadow 0.18s ease;
}

.rb-grille article:hover {
	box-shadow: 0 2px 10px rgba(28, 25, 23, 0.09);
}

.rb-grille img {
	display: block;
	width: 100%;
	height: 176px;
	object-fit: cover;
}

.rb-carte-corps {
	padding: var(--rb-marge-interne);
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.rb-carte-corps h3 {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.3;
}

.rb-carte-corps h3 a {
	text-decoration: none;
}

.rb-carte-corps p {
	margin: 0.2rem 0 0.4rem;
	font-size: 0.92rem;
	color: var(--rb-texte-doux);
	line-height: 1.55;
}

.rb-surtitre {
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	/* Primaire et non secondaire : à 0.74rem ce texte est du petit texte, et
	   #D97706 ne donne que 3.2:1 sur le fond clair — sous le minimum AA. */
	color: var(--rb-primaire);
}

.rb-date {
	font-size: 0.8rem;
	color: var(--rb-texte-doux);
}

.rb-lien-suite {
	font-family: 'Roboto', Arial, sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--rb-primaire);
	text-decoration: none;
}

.rb-lien-suite:hover {
	text-decoration: underline;
}

/* ------------------------------------------ Surfaces persona — §9 */

.rb-signature {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 var(--rb-saut-bloc);
	font-size: 0.92rem;
	color: var(--rb-texte-doux);
}

.rb-signature img {
	border-radius: 50%;
	object-fit: cover;
}

.rb-signature a {
	font-weight: 700;
}

.rb-fiche {
	display: flex;
	gap: var(--rb-saut-bloc);
	align-items: flex-start;
	margin: var(--rb-saut-section) 0 0;
	padding: 1.1rem;
	border-top: 2px solid var(--rb-filet);
	background-color: var(--rb-surface);
	border-radius: var(--rb-arrondi);
}

.rb-fiche img {
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: cover;
}

.rb-fiche p {
	margin: 0.3rem 0 0;
	font-size: 0.93rem;
	line-height: 1.6;
	color: var(--rb-texte-doux);
}

.rb-fiche-nom {
	font-family: 'Roboto', Arial, sans-serif;
	font-weight: 700;
	font-size: 1.02rem;
}

.rb-fiche-lieu {
	font-size: 0.82rem;
	color: var(--rb-texte-doux);
}

@media (max-width: 600px) {
	.rb-fiche {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* Page de présentation — about_structure = about-left-float (§7). */
.rb-portrait-flottant {
	float: left;
	margin: 0.2rem 1.25rem 1rem 0;
	border-radius: var(--rb-arrondi);
}

@media (max-width: 600px) {
	.rb-portrait-flottant {
		float: none;
		display: block;
		margin: 0 auto 1rem;
	}
}

.rb-signature-fin {
	margin-top: var(--rb-saut-bloc);
	font-style: italic;
	color: var(--rb-texte-doux);
}

/* ------------------------------------------------- Listes et archives */

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

.entry-content > .rb-portrait-flottant + p {
	margin-top: 0;
}

/* Champ de recherche — hérite des tokens, pas des défauts du navigateur. */
.search-field,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
textarea {
	border: 1px solid var(--rb-filet);
	border-radius: var(--rb-arrondi);
	padding: 0.6rem 0.8rem;
	font-family: 'Roboto Slab', Georgia, serif;
	background-color: var(--rb-fond);
	color: var(--rb-texte);
}

.search-field:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
textarea:focus {
	border-color: var(--rb-secondaire);
	outline: 2px solid rgba(217, 119, 6, 0.22);
	outline-offset: 1px;
}

/* ------------------------------------------------------------ Pied */

/* footer_type = single-line-dark (§10) : une seule ligne, fond sombre,
   aucun intitulé de colonne. */
.site-footer,
.site-info {
	background-color: #1C1917;
	color: #E7E0D4;
}

.site-info a {
	color: #E7E0D4;
	text-decoration: underline;
}

.site-info a:hover {
	color: #FAF0E6;
}

.site-info .inside-site-info {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 0.88rem;
	padding-top: var(--rb-marge-interne);
	padding-bottom: var(--rb-marge-interne);
}

.site-info .copyright-bar {
	float: none;
	width: 100%;
}

/* ------------------------------------------------------------- 404 */

.rb-404 {
	margin: 0 0 var(--rb-saut-section);
}

.rb-404 p {
	line-height: 1.65;
}

.rb-404 ul {
	margin: var(--rb-saut-bloc) 0 var(--rb-saut-bloc) 1.2rem;
}

/* ----------------------------------------------------- Lisibilité */

.entry-content {
	line-height: 1.72;
}

.entry-content h2 {
	margin-top: var(--rb-saut-section);
	font-size: 1.5rem;
}

.entry-content h3 {
	margin-top: var(--rb-saut-bloc);
	font-size: 1.18rem;
}

.entry-content figure,
.entry-content .wp-block-image {
	margin: var(--rb-saut-bloc) 0;
}

.entry-content figure img,
.entry-content .wp-block-image img {
	border-radius: var(--rb-arrondi);
}

.entry-content figcaption,
.wp-block-image figcaption {
	font-size: 0.86rem;
	color: var(--rb-texte-doux);
	text-align: left;
	margin-top: 0.4rem;
}

.entry-content blockquote {
	border-left: 3px solid var(--rb-secondaire);
	padding-left: 1rem;
	margin-left: 0;
	color: var(--rb-texte-doux);
	font-style: italic;
}