/*
Theme Name: Braise Vergée
Template: generatepress
Version: 1.0.0
Description: Habillage enfant GeneratePress pour « Béatrice s'interroge ».
*/

@import url("./assets/fonts/fonts.css");

/* ===========================================================================
   Jetons du brief §10 — palette ember-glow, rayon rounded, ombre dramatic,
   espacement spacious, largeur compact.
   La couleur de lien est un dérivé assombri de la primaire : #C17747 ne tient
   que 3,5:1 sur blanc, insuffisant pour du texte courant (AA = 4,5).
   =========================================================================== */
:root {
	--bv-primaire:    #C17747;
	--bv-secondaire:  #D4A574;
	--bv-accent:      #F39C12;
	--bv-chaud:       #E8D5C4;
	--bv-surface:     #FDF8F4;
	--bv-fond:        #FFFFFF;
	--bv-encre:       #2C1810;
	--bv-encre-douce: #5D5D5D;
	--bv-bordure:     #F5E0CC;
	--bv-lien:        #9A5C35; /* 5,31:1 sur blanc — 5,03:1 sur la surface */
	--bv-lien-survol: #8A5509; /* 6,21:1 sur blanc */
	--bv-sombre:      #2A1711; /* pied single-line-dark */
	--bv-rayon:       16px;    /* border_radius = rounded */
	--bv-ombre:       0 8px 30px rgba(0, 0, 0, 0.12); /* shadow_style = dramatic */
	--bv-section:     6rem;    /* spacing_system = spacious */
	--bv-bloc:        2rem;
}

/* ---------------------------------------------------------------------------
   Typographie — duo warm-editorial : Lora au texte, Raleway aux titres.
   Les familles sont déjà posées par les options GP ; ici on ne règle que
   les détails que GP n'expose pas.
   ------------------------------------------------------------------------- */
body {
	font-feature-settings: "kern" 1, "liga" 1;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.widget-title {
	letter-spacing: -0.01em;
}

.entry-content p {
	line-height: 1.75;
}

.entry-content h2 {
	margin-top: 2.4em;
	padding-bottom: 0.35rem;
	border-bottom: 2px solid var(--bv-bordure);
}

.entry-content h3 {
	margin-top: 1.9em;
}

.entry-content blockquote {
	border-left: 4px solid var(--bv-primaire);
	background: var(--bv-surface);
	border-radius: 0 var(--bv-rayon) var(--bv-rayon) 0;
	padding: 1.1rem 1.4rem;
	font-style: italic;
}

.entry-content a {
	color: var(--bv-lien);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.entry-content a:hover,
.entry-content a:focus {
	color: var(--bv-lien-survol);
}

/* ---------------------------------------------------------------------------
   Logo — le jeton §10 est wordmark_svg. WordPress n'enregistre aucune
   dimension pour une pièce jointe SVG : wp_get_attachment_image() n'émet ni
   width ni height, et le « height:auto; max-width:100% » de GeneratePress
   laisse alors le navigateur sans taille intrinsèque dans l'en-tête flex —
   le logo tombe à 0 px de large sur mobile. Les dimensions ci-dessous sont
   celles du viewBox réel (9990 × 1174, rapport 8,509).
   ------------------------------------------------------------------------- */
.site-logo img,
.site-header .site-logo img,
#mobile-header .site-logo img {
	width: 268px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 9990 / 1174;
}

/* ---------------------------------------------------------------------------
   En-tête et navigation (sig-B : navigation sous l'en-tête).
   ------------------------------------------------------------------------- */
.site-header {
	border-bottom: 1px solid var(--bv-bordure);
}

.main-navigation {
	border-bottom: 1px solid var(--bv-bordure);
}

.main-navigation .main-nav ul li a {
	letter-spacing: 0.04em;
	text-transform: none;
}

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

/* ---------------------------------------------------------------------------
   Accroche mobile — Trame éditoriale visible en mobile (dictionnaire
   APPENDIX-A, entrée 51). Le texte est la tagline du brief §1, mot pour mot ;
   la coupe par ellipse ne touche que l'affichage, jamais la chaîne.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.inside-navigation {
		position: relative;
	}

	.inside-navigation::before {
		content: "Des questions ordinaires sur la santé, posées par quelqu'un qui n'a pas les réponses toutes faites.";
		position: absolute;
		left: 128px;
		top: 50%;
		transform: translateY(-50%);
		max-width: 30%;
		font-family: Lora, Georgia, serif;
		font-style: italic;
		font-size: 9.5px;
		line-height: 1.1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: var(--bv-encre-douce);
		pointer-events: none;
	}
}

/* ---------------------------------------------------------------------------
   Barre mobile GP Menu Plus — #mobile-header hérite de
   navigation_background_color et prend sa hauteur de la hauteur d'un item de
   menu. Fond clair forcé pour que l'encre du logo reste lisible, et hauteur
   minimale pour que le logo ne soit pas rogné.
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	#mobile-header,
	#mobile-header .inside-navigation {
		background-color: var(--bv-fond);
		border-bottom: 1px solid var(--bv-bordure);
	}

	#mobile-header .inside-navigation,
	#mobile-header .menu-toggle {
		min-height: 58px;
		display: flex;
		align-items: center;
	}

	#mobile-header .menu-toggle,
	#mobile-header .menu-toggle:hover,
	#mobile-header .menu-toggle:focus {
		background-color: transparent;
		color: var(--bv-encre);
	}

	#mobile-header .site-logo img {
		width: 112px;
		height: auto;
	}
}

/* ---------------------------------------------------------------------------
   Accueil — hero « author-intro » (jeton §10 homepage_hero).
   ------------------------------------------------------------------------- */
.bv-hero-plume {
	display: grid;
	grid-template-columns: 168px 1fr;
	gap: var(--bv-bloc);
	align-items: center;
	background: var(--bv-surface);
	border: 1px solid var(--bv-bordure);
	border-radius: var(--bv-rayon);
	box-shadow: var(--bv-ombre);
	padding: 2.2rem;
	margin-bottom: var(--bv-section);
}

.bv-hero-plume__portrait {
	width: 168px;
	height: 168px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.bv-hero-plume__titre {
	font-size: clamp(1.6rem, 3.4vw, 2.25rem);
	line-height: 1.2;
	margin: 0 0 0.35rem;
	color: var(--bv-encre);
}

.bv-hero-plume__nom {
	margin: 0 0 0.7rem;
	font-family: Raleway, "Helvetica Neue", Arial, sans-serif;
	font-size: 0.86rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bv-lien);
}

.bv-hero-plume__texte {
	margin: 0 0 1.2rem;
	color: var(--bv-encre);
	font-size: 1.02rem;
	line-height: 1.7;
}

.bv-hero-plume__actions {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	align-items: center;
}

/* a.bv-bouton, not .bv-bouton: GP Premium prints its dynamic colour CSS after
   generate-child-css, and its bare `a { color: … }` rule then wins on equal
   specificity — which painted the label the same brown as the button. */
a.bv-bouton {
	display: inline-block;
	background: var(--bv-lien);
	color: #FFFFFF;
	border-radius: var(--bv-rayon);
	padding: 0.65rem 1.3rem;
	font-family: Raleway, "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	text-decoration: none;
}

a.bv-bouton:visited {
	color: #FFFFFF;
}

a.bv-bouton:hover,
a.bv-bouton:focus {
	background: var(--bv-lien-survol);
	color: #FFFFFF;
}

.bv-lien-sobre {
	color: var(--bv-lien);
	font-family: Raleway, "Helvetica Neue", Arial, sans-serif;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Accueil — « Les nouveautés » (jeton §10 section_heading) et rubriques.
   ------------------------------------------------------------------------- */
.bv-recents,
.bv-sujets {
	margin-bottom: var(--bv-section);
}

.bv-recents__chapeau,
.bv-sujets__chapeau {
	font-size: 1.45rem;
	margin: 0 0 1.4rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--bv-primaire);
	display: inline-block;
}

.bv-cartes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bv-bloc);
}

.bv-carte {
	display: flex;
	flex-direction: column;
	background: var(--bv-fond);
	border: 1px solid var(--bv-bordure);
	border-radius: var(--bv-rayon);
	box-shadow: var(--bv-ombre);
	overflow: hidden;
}

.bv-carte__media {
	display: block;
	line-height: 0;
}

.bv-carte__vignette {
	width: 100%;
	height: 182px;
	object-fit: cover;
	display: block;
}

.bv-carte__corps {
	padding: 1.1rem 1.2rem 1.3rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.bv-carte__rubrique {
	font-family: Raleway, "Helvetica Neue", Arial, sans-serif;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bv-lien);
	text-decoration: none;
}

.bv-carte__titre {
	font-size: 1.08rem;
	line-height: 1.3;
	margin: 0;
}

.bv-carte__titre a {
	color: var(--bv-encre);
	text-decoration: none;
}

.bv-carte__titre a:hover,
.bv-carte__titre a:focus {
	color: var(--bv-lien);
}

.bv-carte__meta {
	font-size: 0.8rem;
	color: var(--bv-encre-douce);
}

.bv-carte__extrait {
	margin: 0;
	font-size: 0.93rem;
	color: var(--bv-encre);
	line-height: 1.6;
}

.bv-carte__lien,
.bv-suite a {
	font-family: Raleway, "Helvetica Neue", Arial, sans-serif;
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--bv-lien);
	text-decoration: none;
}

.bv-carte__lien:hover,
.bv-carte__lien:focus,
.bv-suite a:hover,
.bv-suite a:focus {
	color: var(--bv-lien-survol);
	text-decoration: underline;
}

.bv-sujets__rangee {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bv-bloc);
}

.bv-sujet {
	background: var(--bv-surface);
	border: 1px solid var(--bv-bordure);
	border-radius: var(--bv-rayon);
	padding: 1.2rem 1.3rem;
}

.bv-sujet__titre {
	font-size: 1.02rem;
	margin: 0 0 0.5rem;
}

.bv-sujet__titre a {
	color: var(--bv-encre);
	text-decoration: none;
}

.bv-sujet__titre a:hover,
.bv-sujet__titre a:focus {
	color: var(--bv-lien);
}

.bv-sujet__resume {
	margin: 0 0 0.5rem;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--bv-encre);
}

.bv-sujet__compte {
	margin: 0;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bv-encre-douce);
}

/* ---------------------------------------------------------------------------
   Colonne latérale gauche — sig-B rend sidebar-2, jamais sidebar-1.
   ------------------------------------------------------------------------- */
.inside-left-sidebar .widget {
	background: var(--bv-surface);
	border: 1px solid var(--bv-bordure);
	border-radius: var(--bv-rayon);
	padding: 1.1rem 1.2rem;
	margin-bottom: 1.6rem;
}

.inside-left-sidebar .widget-title {
	font-size: 0.86rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 0.8rem;
	color: var(--bv-encre);
}

.inside-left-sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.inside-left-sidebar li {
	padding: 0.32rem 0;
	border-bottom: 1px solid var(--bv-bordure);
	font-size: 0.93rem;
}

.inside-left-sidebar li:last-child {
	border-bottom: 0;
}

.inside-left-sidebar a {
	color: var(--bv-lien);
	text-decoration: none;
}

.inside-left-sidebar a:hover,
.inside-left-sidebar a:focus {
	color: var(--bv-lien-survol);
	text-decoration: underline;
}

.bv-bio__portrait {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	margin: 0 0 0.6rem;
}

.bv-bio__texte {
	margin: 0 0 0.5rem;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--bv-encre);
}

.bv-bio__lien {
	margin: 0;
	font-size: 0.86rem;
}

/* ---------------------------------------------------------------------------
   Carte de l'autrice en fin de billet (§9).
   ------------------------------------------------------------------------- */
.bv-plume {
	display: flex;
	gap: 1.1rem;
	align-items: flex-start;
	margin-top: 2.6rem;
	padding: 1.3rem 1.4rem;
	background: var(--bv-surface);
	border: 1px solid var(--bv-bordure);
	border-radius: var(--bv-rayon);
}

.bv-plume__portrait {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.bv-plume__nom {
	margin: 0 0 0.3rem;
	font-family: Raleway, "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
}

.bv-plume__nom a {
	color: var(--bv-lien);
	text-decoration: none;
}

.bv-plume__mot {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--bv-encre);
}

/* ---------------------------------------------------------------------------
   Page « Ma démarche » — structure about-left-float (jeton §10).
   ------------------------------------------------------------------------- */
.bv-portrait-demarche {
	float: left;
	width: 190px;
	margin: 0.3rem 1.6rem 1rem 0;
	border-radius: var(--bv-rayon);
	box-shadow: var(--bv-ombre);
}

@media (max-width: 600px) {
	.bv-portrait-demarche {
		float: none;
		display: block;
		margin: 0 auto 1.2rem;
	}
}

/* ---------------------------------------------------------------------------
   Pied « single-line-dark » — une ligne sombre, sans intitulé (§10).
   ------------------------------------------------------------------------- */
.bv-pied {
	background: var(--bv-sombre);
	color: var(--bv-bordure);
	padding: 1.5rem 1rem;
}

.bv-pied__ligne {
	max-width: 976px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem 1.6rem;
	align-items: center;
	justify-content: space-between;
	font-size: 0.86rem;
}

.bv-pied__liens {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.3rem;
	margin: 0;
	padding: 0;
}

.bv-pied__liens a {
	color: var(--bv-secondaire);
	text-decoration: none;
}

.bv-pied__liens a:hover,
.bv-pied__liens a:focus {
	color: #FFFFFF;
	text-decoration: underline;
}

.bv-pied__droits {
	color: var(--bv-bordure);
}

/* GP's own footer bar carries the same copyright; the single-line-dark token
   wants exactly one row, so the native bar is folded away. */
.site-info {
	display: none;
}

/* ---------------------------------------------------------------------------
   Archives, pagination, recherche.
   ------------------------------------------------------------------------- */
.page-header,
.page-header-content {
	margin-bottom: 1.6rem;
}

.page-title {
	font-size: 1.6rem;
	margin: 0;
}

.archive-description {
	color: var(--bv-encre);
	line-height: 1.7;
}

.paging-navigation .nav-links a,
.paging-navigation .nav-links span.current {
	border-radius: var(--bv-rayon);
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--bv-bordure);
}

.paging-navigation .nav-links span.current {
	background: var(--bv-lien);
	color: #FFFFFF;
	border-color: var(--bv-lien);
}

.search-form input[type="search"],
.wp-block-search__input {
	border: 1px solid var(--bv-bordure);
	border-radius: var(--bv-rayon);
	padding: 0.5rem 0.7rem;
	background: var(--bv-fond);
}

/* ---------------------------------------------------------------------------
   404 — gabarit du thème enfant (404.php).
   ------------------------------------------------------------------------- */
.bv-404 {
	padding: 1rem 0 2rem;
}

.bv-404__corps {
	font-size: 1.02rem;
	line-height: 1.7;
	max-width: 46rem;
}

.bv-404__pistes {
	margin: 1.4rem 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem 1.2rem;
}

.bv-404__pistes a {
	color: var(--bv-lien);
}

/* ---------------------------------------------------------------------------
   Bouton d'envoi du formulaire — règle de palette obligatoire (APPENDIX-A),
   contrôlée par contact-form-render.cjs (form_button_palette_match).
   ------------------------------------------------------------------------- */
body button.wpforms-submit,
body .wpcf7-submit,
body .ff-btn-submit {
	background-color: #C17747 !important;
	color: #ffffff !important;
}

body button.wpforms-submit:hover,
body .wpcf7-submit:hover,
body .ff-btn-submit:hover {
	filter: brightness(0.88) !important;
}

.fluentform .ff-el-form-control {
	border: 1px solid var(--bv-bordure);
	border-radius: var(--bv-rayon);
}

/* ---------------------------------------------------------------------------
   Repli responsive.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.bv-cartes {
		grid-template-columns: minmax(0, 1fr);
	}

	.bv-sujets__rangee {
		grid-template-columns: minmax(0, 1fr);
	}

	.bv-hero-plume {
		grid-template-columns: minmax(0, 1fr);
		text-align: left;
		padding: 1.6rem;
	}

	.bv-hero-plume__portrait {
		width: 132px;
		height: 132px;
	}

	:root {
		--bv-section: 3.2rem;
	}
}