/*
Theme Name: Quai Fougère
Template: generatepress
Version: 1.0.0
Description: Habillage sur mesure pour Chez Mathilde en Suisse
Author: Chez Mathilde en Suisse
Text Domain: quai-fougere
*/

/* ---------------------------------------------------------------------------
   Jetons de couleur (forest-canopy) et jetons structurels.
   Tout ce que GeneratePress expose comme option reste dans generate_settings ;
   ce fichier ne couvre que les manques documentés du thème parent.
   --------------------------------------------------------------------------- */
:root {
	--qf-primaire: #006D77;
	--qf-seconde: #83C5BE;
	--qf-accent: #2D9F93;
	--qf-sable: #F5EDE3;
	--qf-fond-doux: #EDF6F9;
	--qf-fond: #FFFFFF;
	--qf-encre: #001219;
	--qf-encre-douce: #4A5568;
	--qf-filet: #D1E7E4;
	--qf-arrondi: 16px;
	--qf-ombre: none;
	--qf-respir: 4rem;
	--qf-bloc: 1.5rem;
	--qf-marge: 2rem;
}

/* Piles de repli propres au site — voir §17b. */
body,
.entry-content {
	font-family: 'Libre Baskerville', Charter, serif;
	color: var(--qf-encre);
}

h1, h2, h3, h4, h5, h6,
.main-navigation a,
.site-title {
	font-family: 'Poppins', 'Trebuchet MS', sans-serif;
}

h1, h2, h3 { letter-spacing: -0.01em; }

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

/* ---------------------------------------------------------------------------
   sig-E — pas de colonne latérale, conteneurs séparés, navigation au-dessus
   de l'en-tête. Les boîtes séparées sont la signature visuelle : on leur donne
   un filet discret et le rayon arrondi du brief, sans 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(--qf-fond);
	border: 1px solid var(--qf-filet);
	border-radius: var(--qf-arrondi);
	box-shadow: var(--qf-ombre);
}

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

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

/* Navigation au-dessus de l'en-tête : on l'ancre avec un fond doux. */
.main-navigation {
	background-color: var(--qf-fond-doux);
	border-bottom: 1px solid var(--qf-filet);
}

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

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

.site-header { background-color: var(--qf-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 — composition blog-2 sans hero : intro, « Le journal », rubriques,
   bloc auteure. Aucune règle horizontale, aucun bloc d'espacement (§18c/§19a).
   --------------------------------------------------------------------------- */
.qf-chapeau {
	max-width: 46rem;
	margin: 0 auto var(--qf-respir);
	text-align: center;
	color: var(--qf-encre-douce);
	font-size: 1.04rem;
	line-height: 1.75;
}

.qf-titre-section {
	font-size: 1.45rem;
	margin: 0 0 var(--qf-bloc);
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--qf-seconde);
}

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

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

.qf-journal article img {
	width: 100%;
	height: 182px;
	object-fit: cover;
	display: block;
}

.qf-journal-corps { padding: 1.1rem 1.2rem 1.3rem; }

.qf-surtitre {
	display: inline-block;
	font-family: 'Poppins', 'Trebuchet MS', sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--qf-primaire);
	margin-bottom: 0.45rem;
}

.qf-journal h3 {
	font-size: 1.1rem;
	line-height: 1.35;
	margin: 0 0 0.55rem;
}

.qf-journal h3 a { text-decoration: none; }

.qf-journal p {
	font-size: 0.93rem;
	color: var(--qf-encre-douce);
	margin: 0 0 0.7rem;
	line-height: 1.6;
}

.qf-lien-suite {
	font-family: 'Poppins', 'Trebuchet MS', sans-serif;
	font-size: 0.86rem;
	font-weight: 700;
	text-decoration: none;
}

/* Bande des rubriques */
.qf-rubriques {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--qf-marge);
	margin-bottom: var(--qf-respir);
}

.qf-rubrique {
	display: block;
	padding: 1.4rem 1.5rem;
	background-color: var(--qf-fond-doux);
	border: 1px solid var(--qf-filet);
	border-radius: var(--qf-arrondi);
	text-decoration: none;
	color: var(--qf-encre);
}

.qf-rubrique:hover { background-color: var(--qf-sable); }

.qf-rubrique h3 {
	font-size: 1.05rem;
	margin: 0 0 0.45rem;
	color: var(--qf-primaire);
}

.qf-rubrique p {
	font-size: 0.9rem;
	color: var(--qf-encre-douce);
	margin: 0 0 0.6rem;
	line-height: 1.6;
}

.qf-compte {
	font-family: 'Poppins', 'Trebuchet MS', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--qf-encre-douce);
}

/* Bloc auteure en bas d'accueil */
.qf-mot-auteure {
	display: flex;
	gap: var(--qf-marge);
	align-items: flex-start;
	padding: 1.6rem 1.7rem;
	background-color: var(--qf-sable);
	border-radius: var(--qf-arrondi);
}

.qf-mot-auteure img {
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: cover;
}

.qf-mot-auteure h2 {
	font-size: 1.15rem;
	margin: 0 0 0.5rem;
}

.qf-mot-auteure p {
	margin: 0 0 0.7rem;
	font-size: 0.96rem;
	line-height: 1.7;
	color: var(--qf-encre-douce);
}

@media (max-width: 600px) {
	.qf-mot-auteure { flex-direction: column; }
}

/* ---------------------------------------------------------------------------
   Signature et fiche auteure sur les articles
   --------------------------------------------------------------------------- */
.qf-signature {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0.6rem 0 1.1rem;
	font-size: 0.88rem;
	color: var(--qf-encre-douce);
}

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

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

.qf-fiche-auteure {
	display: flex;
	gap: 1.2rem;
	align-items: flex-start;
	margin-top: var(--qf-marge);
	padding: 1.3rem 1.4rem;
	background-color: var(--qf-fond-doux);
	border: 1px solid var(--qf-filet);
	border-radius: var(--qf-arrondi);
}

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

.qf-fiche-nom {
	display: block;
	font-family: 'Poppins', 'Trebuchet MS', sans-serif;
	font-weight: 700;
	font-size: 1.02rem;
}

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

.qf-fiche-role {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--qf-encre-douce);
	margin-bottom: 0.5rem;
}

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

@media (max-width: 600px) {
	.qf-fiche-auteure { flex-direction: column; }
}

/* Avatar centré au-dessus de la bio — about-centered-above (§6). */
.avatar-centered img {
	border-radius: var(--qf-arrondi);
	object-fit: cover;
}

.avatar-centered { margin-left: auto; margin-right: auto; }

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

.site-footer .footer-widgets .widget-title {
	font-family: 'Poppins', 'Trebuchet MS', sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--qf-primaire);
	margin-bottom: 0.8rem;
}

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

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

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

.site-footer .footer-widgets li { margin-bottom: 0.4rem; font-size: 0.93rem; }

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

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

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

/* ---------------------------------------------------------------------------
   Formulaires et champ de recherche (§8)
   --------------------------------------------------------------------------- */
.search-field,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
.ff-el-form-control {
	background-color: var(--qf-fond-doux);
	border: 1px solid var(--qf-filet);
	border-radius: var(--qf-arrondi);
	padding: 0.65rem 0.9rem;
	font-family: 'Libre Baskerville', Charter, serif;
	color: var(--qf-encre);
}

.search-field:focus,
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
.ff-el-form-control:focus {
	border-color: var(--qf-accent);
	background-color: var(--qf-fond);
	outline: none;
}

button,
.button,
input[type="submit"],
.ff-btn-submit {
	border-radius: var(--qf-arrondi);
	font-family: 'Poppins', 'Trebuchet MS', sans-serif;
	font-weight: 700;
}

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

.entry-content h2 {
	font-size: 1.5rem;
	margin-top: 2.4rem;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--qf-filet);
}

.entry-content h3 { font-size: 1.18rem; margin-top: 1.9rem; }

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

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

.entry-content table th {
	background-color: var(--qf-fond-doux);
	font-family: 'Poppins', 'Trebuchet MS', sans-serif;
	font-size: 0.86rem;
	text-align: left;
}

.entry-content table th,
.entry-content table td {
	border: 1px solid var(--qf-filet);
	padding: 0.6rem 0.75rem;
}

.entry-content blockquote {
	border-left: 4px solid var(--qf-seconde);
	background-color: var(--qf-sable);
	border-radius: 0 var(--qf-arrondi) var(--qf-arrondi) 0;
	margin: 1.6rem 0;
	padding: 1rem 1.3rem;
	font-style: italic;
	color: var(--qf-encre-douce);
}

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

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

.taxonomy-description {
	margin-top: 0.6rem;
	color: var(--qf-encre-douce);
	font-size: 0.97rem;
	line-height: 1.7;
}

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

/* Sur un article, l'image en avant est plafonnée : à pleine largeur de
   conteneur, une photo 1200x675 occupe tout le premier écran et renvoie le
   titre sous la ligne de flottaison. */
.single-post .featured-image img,
.single-post .post-image img {
	max-height: 380px;
	width: 100%;
	object-fit: cover;
}

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

/* Retour en haut — scroll_to_top = yes */
.generate-back-to-top {
	background-color: var(--qf-primaire);
	border-radius: var(--qf-arrondi);
	color: #FFFFFF;
}

.generate-back-to-top:hover,
.generate-back-to-top:focus {
	background-color: var(--qf-accent);
	color: #FFFFFF;
}

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

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

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

.qf-404 .qf-404-liens li { margin-bottom: 0.4rem; }