/*
Theme Name: AtelierCuisineSanté
Theme URI: https://www.atelierdutartare.fr/
Description: Thème enfant de GeneratePress pour AtelierCuisineSanté, magazine cuisine, santé et bien-être. Mise en page d'accueil par rubriques, cartes horizontales, polices auto-hébergées, aucune requête vers un service tiers.
Author: AtelierCuisineSanté
Template: generatepress
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: atelier-cuisine-sante
*/

/* =========================================================================
   1. Variables de marque
   ========================================================================= */

:root {
	--acs-fond:         #FBFAF7; /* fond de page, blanc cassé chaud */
	--acs-carte:        #FFFFFF; /* fond des cartes */
	--acs-encre:        #17251F; /* titres */
	--acs-texte:        #4C5551; /* texte courant */
	--acs-discret:      #7C837F; /* métadonnées, légendes */
	--acs-accent:       #2E6A4E; /* liens et boutons UNIQUEMENT */
	--acs-accent-fonce: #22513B; /* survol */
	--acs-voile:        #EAF1EC; /* fond des pastilles au survol */
	--acs-trait:        #E7E4DC; /* filets et bordures */

	/* Une teinte par rubrique, volontairement sourde : elle ne sert qu'au
	   liseré de la pastille, jamais à un aplat plein. */
	--acs-sante:     #2E6A4E;
	--acs-bien-etre: #B5713F;
	--acs-cuisine:   #A6483F;
	--acs-cbd:       #4A6E8F;

	--acs-largeur:       1120px;
	--acs-largeur-texte: 46rem;
	--acs-rayon:         10px;
	--acs-gouttiere:     2rem;
	--acs-section:       4.5rem;

	--acs-titre: 'Source Serif 4', Cambria, 'Times New Roman', Times, serif;
	--acs-corps: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================================================
   2. Base
   ========================================================================= */

body {
	background-color: var(--acs-fond);
	color: var(--acs-texte);
	font-family: var(--acs-corps);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

/* GeneratePress pose .grid-container { max-width: 1200px } en CSS inline
   rattaché au handle « generate-style ». Cette feuille est chargée après :
   à spécificité égale, elle l'emporte. */
.grid-container {
	max-width: var(--acs-largeur);
}

img {
	height: auto;
	max-width: 100%;
}

/* =========================================================================
   3. Titres
   ========================================================================= */

h1, h2, h3, h4,
.entry-title {
	color: var(--acs-encre);
	font-family: var(--acs-titre);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

h1 { font-size: 2.4rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.3rem; }

/* =========================================================================
   4. Liens
   ========================================================================= */

.entry-content a,
.acs-lien {
	color: var(--acs-accent);
	text-underline-offset: 3px;
}

.entry-content a:hover,
.acs-lien:hover {
	color: var(--acs-accent-fonce);
}

/* =========================================================================
   5. En-tête du site
   ========================================================================= */

.site-header {
	background-color: var(--acs-carte);
	border-bottom: 1px solid var(--acs-trait);
	padding: 1.4rem 0;
}

.site-header .site-title,
.site-header .site-title a {
	color: var(--acs-encre);
	font-family: var(--acs-titre);
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.site-header .site-description {
	color: var(--acs-discret);
	font-size: 0.9rem;
	margin-top: 0.15rem;
}

/* =========================================================================
   6. Navigation principale
   ========================================================================= */

.main-navigation {
	background-color: var(--acs-carte);
	border-bottom: 1px solid var(--acs-trait);
}

.main-navigation .main-nav ul li a {
	color: var(--acs-texte);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	padding-left: 1.1rem;
	padding-right: 1.1rem;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
	background-color: transparent;
	box-shadow: inset 0 -2px 0 var(--acs-accent);
	color: var(--acs-encre);
}

/* =========================================================================
   7. Accueil — introduction
   ========================================================================= */

.acs-intro {
	border-bottom: 1px solid var(--acs-trait);
	margin-bottom: var(--acs-section);
	padding: 2.5rem 0 2.75rem;
}

.acs-intro h1 {
	margin: 0 0 0.75rem;
	max-width: 20ch;
}

.acs-intro p {
	color: var(--acs-texte);
	font-size: 1.08rem;
	margin: 0;
	max-width: 62ch;
}

/* =========================================================================
   8. Accueil — grilles et cartes
   ========================================================================= */

.acs-section {
	margin-bottom: var(--acs-section);
}

/* En-tête de rubrique : titre à gauche, lien « tout voir » à droite. */
.acs-section-tete {
	align-items: baseline;
	border-bottom: 1px solid var(--acs-trait);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	justify-content: space-between;
	margin-bottom: 1.75rem;
	padding-bottom: 0.75rem;
}

.acs-section-tete h2 {
	font-size: 1.4rem;
	margin: 0;
}

.acs-tout-voir {
	color: var(--acs-accent);
	font-family: var(--acs-corps);
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.acs-tout-voir:hover {
	color: var(--acs-accent-fonce);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Grille à deux colonnes. Chaque carte vise un rapport largeur/hauteur
   d'environ 1,9 : à 1120px de conteneur et 2rem de gouttière, une carte fait
   544px de large pour ~286px de haut. */
.acs-grille {
	display: grid;
	gap: var(--acs-gouttiere);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Carte horizontale : vignette à gauche, texte à droite. */
.acs-carte {
	background-color: var(--acs-carte);
	border: 1px solid var(--acs-trait);
	border-radius: var(--acs-rayon);
	display: grid;
	grid-template-columns: 38% 1fr;
	min-height: 172px;
	overflow: hidden;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.acs-carte:hover {
	border-color: #B9C9BF;
	transform: translateY(-2px);
}

/* Un article sans image à la une : la carte n'a plus qu'une colonne, et le
   texte occupe toute la largeur au lieu de laisser un trou gris. */
.acs-carte--sans-visuel {
	grid-template-columns: 1fr;
}

.acs-carte-visuel {
	background-color: var(--acs-voile);
	display: block;
	height: 100%;
	overflow: hidden;
}

.acs-carte-visuel img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.acs-carte-corps {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-height: 0;
	overflow: hidden;
	padding: 1.4rem 1.5rem;
}

/* Les titres du fonds vont de cinq à vingt mots. Sans borne, un titre long
   pousse la date hors de la carte : « La réanimation cardio-pulmonaire… »
   tenait sur quatre lignes et débordait de 16px. */
.acs-carte-titre,
.acs-carte-extrait {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.acs-carte-titre {
	font-family: var(--acs-titre);
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

.acs-carte--principale .acs-carte-titre {
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.acs-carte-titre a {
	color: var(--acs-encre);
	text-decoration: none;
}

.acs-carte-titre a:hover {
	color: var(--acs-accent-fonce);
}

.acs-carte-extrait {
	color: var(--acs-texte);
	font-size: 0.92rem;
	line-height: 1.55;
	margin: 0;
}

.acs-carte-date {
	color: var(--acs-discret);
	font-size: 0.8rem;
	margin-top: auto;
}

/* Pastille de rubrique : liseré teinté, jamais d'aplat plein. */
.acs-pastille {
	align-self: flex-start;
	background-color: var(--acs-carte);
	border: 1px solid currentColor;
	border-radius: 999px;
	color: var(--acs-accent);
	font-family: var(--acs-corps);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1;
	padding: 0.34rem 0.7rem;
	text-decoration: none;
	text-transform: uppercase;
}

.acs-pastille:hover {
	background-color: var(--acs-voile);
}

.acs-pastille--sante     { color: var(--acs-sante); }
.acs-pastille--bien-etre { color: var(--acs-bien-etre); }
.acs-pastille--cuisine   { color: var(--acs-cuisine); }
.acs-pastille--cbd       { color: var(--acs-cbd); }

/* =========================================================================
   9. Accueil — bloc « à la une »
   ========================================================================= */

.acs-une {
	display: grid;
	gap: var(--acs-gouttiere);
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	margin-bottom: var(--acs-section);
}

.acs-une-secondaires {
	display: grid;
	gap: var(--acs-gouttiere);
	grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* La carte principale reprend la carte horizontale mais empile son visuel :
   image large en haut, texte dessous. */
.acs-carte--principale {
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr;
}

.acs-carte--principale .acs-carte-visuel {
	aspect-ratio: 2 / 1;
	height: auto;
}

.acs-carte--principale .acs-carte-corps {
	padding: 1.6rem 1.75rem 1.75rem;
}

.acs-carte--principale .acs-carte-titre {
	font-size: 1.6rem;
}

.acs-carte--principale .acs-carte-extrait {
	font-size: 1rem;
}

/* Les deux colonnes du bloc « à la une » s'alignent en hauteur : sans borne,
   c'est la plus haute qui impose sa taille aux autres et le bloc part à plus
   de 700px. On fixe donc la hauteur de la rangée, l'image de la carte
   principale absorbe le reste de la place. */
@media (min-width: 1025px) {
	/* La hauteur seule ne suffit pas : sans grid-template-rows, la rangée
	   implicite se dimensionne sur son contenu et déborde du conteneur. */
	.acs-une {
		grid-template-rows: minmax(0, 1fr);
		height: 440px;
	}

	.acs-une .acs-carte {
		height: 100%;
		min-height: 0;
	}

	.acs-carte--principale {
		grid-template-rows: minmax(0, 1fr) auto;
	}

	.acs-carte--principale .acs-carte-visuel {
		aspect-ratio: auto;
		height: 100%;
	}
}

/* Dans les deux cartes secondaires, l'extrait ne tient pas sans pousser la
   date hors de la carte : titre, rubrique et date suffisent. */
.acs-une-secondaires .acs-carte-extrait {
	display: none;
}

/* =========================================================================
   10. Accueil — encart de présentation
   ========================================================================= */

.acs-presentation {
	background-color: var(--acs-carte);
	border: 1px solid var(--acs-trait);
	border-radius: var(--acs-rayon);
	margin-bottom: var(--acs-section);
	padding: 2.25rem 2.5rem;
}

.acs-presentation h2 {
	font-size: 1.3rem;
	margin: 0 0 0.6rem;
}

.acs-presentation p {
	margin: 0 0 0.6rem;
	max-width: 68ch;
}

.acs-presentation p:last-child {
	margin-bottom: 0;
}

/* =========================================================================
   11. Archives et article
   ========================================================================= */

.entry-content {
	max-width: var(--acs-largeur-texte);
}

.entry-content > .alignwide,
.entry-content > .alignfull {
	max-width: none;
}

.entry-header .entry-title {
	font-size: 2.2rem;
}

.entry-meta {
	color: var(--acs-discret);
	font-size: 0.86rem;
}

/* =========================================================================
   12. Pied de page
   ========================================================================= */

.site-footer {
	background-color: var(--acs-carte);
	border-top: 1px solid var(--acs-trait);
	color: var(--acs-discret);
	font-size: 0.88rem;
}

.site-footer a {
	color: var(--acs-texte);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--acs-accent-fonce);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =========================================================================
   13. Largeurs intermédiaires et mobile
   -------------------------------------------------------------------------
   generate_mobile_menu_breakpoint est sans effet en GeneratePress 3.6.1 : la
   requête média du bouton de menu reste figée à 768px. Les paliers ci-dessous
   traitent donc eux-mêmes les largeurs intermédiaires.
   ========================================================================= */

@media (max-width: 1024px) {
	.acs-une {
		grid-template-columns: 1fr;
	}

	.acs-une-secondaires {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
	}
}

@media (max-width: 768px) {
	:root {
		--acs-gouttiere: 1.25rem;
		--acs-section: 3rem;
	}

	h1 { font-size: 1.9rem; }

	.acs-intro {
		padding: 1.75rem 0 2rem;
	}

	.acs-grille,
	.acs-une-secondaires {
		grid-template-columns: 1fr;
	}

	.acs-carte {
		grid-template-columns: 34% 1fr;
		min-height: 132px;
	}

	.acs-carte-corps {
		gap: 0.4rem;
		padding: 1rem 1.1rem;
	}

	.acs-carte-titre {
		font-size: 1rem;
	}

	/* Sur un écran étroit, l'extrait vole la place du titre. */
	.acs-carte:not(.acs-carte--principale) .acs-carte-extrait {
		display: none;
	}

	.acs-carte--principale .acs-carte-titre {
		font-size: 1.3rem;
	}

	.acs-presentation {
		padding: 1.5rem 1.4rem;
	}
}

@media (max-width: 420px) {
	.acs-carte {
		grid-template-columns: 1fr;
	}

	.acs-carte-visuel {
		aspect-ratio: 2 / 1;
		height: auto;
	}
}

/* Respect du réglage système de réduction des animations. */
@media (prefers-reduced-motion: reduce) {
	.acs-carte {
		transition: none;
	}

	.acs-carte:hover {
		transform: none;
	}
}