/*
Theme Name: Contes à Croquer
Theme URI: https://www.contesacroquer.net/
Description: Thème enfant de GeneratePress pour Contes à croquer. Grille magazine « bleu nuit & sable » : en-tête à pastilles, carte à la une pleine image, cartes catégories.
Author: Contes à croquer
Version: 1.10.0
Template: generatepress
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: contes-a-croquer
*/

/* ==========================================================================
   1. Police (auto-hébergée, aucune requête vers Google)
   ========================================================================== */

@font-face {
	font-family: "Manrope";
	src: url("fonts/manrope-var.woff2") format("woff2-variations"),
	     url("fonts/manrope-var.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   2. Palette
   ========================================================================== */

:root {
	--cac-sable: #f5f0e6;
	--cac-sable-fonce: #e9e1d1;
	--cac-sable-bord: #ded3bd;
	--cac-nuit: #14294a;
	--cac-nuit-clair: #1f3d68;
	--cac-encre: #1b2733;
	--cac-gris: #6f7a85;
	--cac-blanc: #ffffff;
	--cac-rayon: 18px;
	--cac-rayon-s: 12px;
	--cac-gouttiere: 22px;
}

/* ==========================================================================
   3. Base
   ========================================================================== */

body {
	background-color: var(--cac-sable);
	color: var(--cac-encre);
	font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title {
	font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--cac-nuit);
}

a {
	color: var(--cac-nuit-clair);
}

a:hover,
a:focus {
	color: var(--cac-nuit);
}

:focus-visible {
	outline: 3px solid var(--cac-nuit-clair);
	outline-offset: 2px;
}

/* ==========================================================================
   4. En-tête : logo à gauche, menu en pastilles à droite, aligné sur le contenu
   ========================================================================== */

.site-header {
	background-color: var(--cac-sable);
	position: sticky;
	top: 0;
	z-index: 200;
}

body.admin-bar .site-header {
	top: 32px;
}

/* L'en-tête s'aligne sur la largeur du contenu : même conteneur, mêmes
   marges intérieures, pour que le logo tombe pile sur le bord gauche de la
   grande carte et la loupe sur le bord droit. */
.site-header .inside-header {
	max-width: 1240px;
	padding: 22px 96px;
}

.site-branding .site-title,
.site-branding .site-title a {
	font-size: clamp(26px, 2.4vw, 34px);
	font-weight: 800;
	letter-spacing: -0.035em;
	color: var(--cac-nuit);
	line-height: 1.1;
}

.site-branding .site-title a:hover {
	color: var(--cac-nuit-clair);
}

.site-description {
	color: var(--cac-gris);
	font-size: 14px;
}

/* Barre de navigation intégrée à l'en-tête */
.main-navigation,
.main-navigation.sticky-enabled,
.site-header .main-navigation {
	background-color: transparent;
}

.main-navigation .main-nav > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.main-navigation .main-nav > ul > li > a {
	background-color: var(--cac-sable-fonce);
	border-radius: 999px;
	padding: 11px 20px;
	line-height: 1;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cac-nuit);
	transition: background-color 0.18s ease, color 0.18s ease;
}

.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a,
.main-navigation .main-nav > ul > li.current-menu-parent > a {
	background-color: var(--cac-nuit);
	color: var(--cac-blanc);
}

/* Icône de recherche du menu */
.main-navigation .main-nav > ul > li.search-item > a {
	background-color: transparent;
	padding: 11px 6px;
	font-size: 16px;
}

.main-navigation .main-nav > ul > li.search-item > a:hover {
	background-color: transparent;
	color: var(--cac-nuit-clair);
}

.navigation-search input[type="search"] {
	background-color: var(--cac-blanc);
	color: var(--cac-encre);
	border-radius: 999px;
}

/* Sous-menus */
.main-navigation ul ul {
	background-color: var(--cac-blanc);
	border-radius: var(--cac-rayon-s);
	box-shadow: 0 18px 40px rgba(20, 41, 74, 0.16);
	overflow: hidden;
	padding: 6px;
}

.main-navigation ul ul li a {
	border-radius: 8px;
	color: var(--cac-encre);
	font-size: 14px;
	font-weight: 600;
}

.main-navigation ul ul li a:hover {
	background-color: var(--cac-sable);
	color: var(--cac-nuit);
}

/* Menu mobile */
.main-navigation .menu-toggle {
	color: var(--cac-nuit);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ==========================================================================
   5. Zone de contenu
   ========================================================================== */

.site-content {
	padding: 34px 96px 46px;
	gap: 34px; /* espace entre le contenu et la colonne latérale */
}

.separate-containers .site-main,
.one-container .site-main {
	margin: 0;
}

/* En-tête des pages catégories : GeneratePress y pose un bloc blanc, on l'efface */
.separate-containers .page-header,
.one-container .page-header,
.page-header {
	background-color: transparent;
	border: 0;
	padding: 0;
	margin: 0 0 26px;
	box-shadow: none;
}

.page-header .page-title {
	font-size: clamp(30px, 3.6vw, 46px);
	margin: 0 0 6px;
}

.page-header .taxonomy-description,
.page-header .archive-description {
	color: var(--cac-gris);
	font-size: 16px;
	max-width: 62ch;
}

/* ==========================================================================
   6. La grille magazine (accueil + archives)
   ==========================================================================
   Une grande carte à la une (4 colonnes sur 2 rangées), deux cartes à sa
   droite, puis trois cartes par rangée en dessous.
   -------------------------------------------------------------------------- */

.blog .site-main,
.archive .site-main,
.search-results .site-main {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-auto-rows: auto;
	gap: var(--cac-gouttiere);
	align-items: stretch;
}

/* Les éléments qui ne sont pas des cartes occupent toute la largeur */
.blog .site-main > *:not(article),
.archive .site-main > *:not(article),
.search-results .site-main > *:not(article) {
	grid-column: 1 / -1;
	grid-row: auto;
}

.blog .site-main > article,
.archive .site-main > article,
.search-results .site-main > article {
	grid-column: span 2;
	height: 174px;
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--cac-rayon);
	overflow: hidden;
	background-color: var(--cac-nuit);
	box-shadow: 0 10px 26px rgba(20, 41, 74, 0.10);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.blog .site-main > article:hover,
.archive .site-main > article:hover,
.search-results .site-main > article:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 38px rgba(20, 41, 74, 0.20);
}

.blog .site-main > article:nth-of-type(1),
.archive .site-main > article:nth-of-type(1),
.search-results .site-main > article:nth-of-type(1) {
	grid-column: span 4;
	grid-row: span 2;
	height: 370px; /* 174 + 22 de gouttière + 174 */
}

/* Structure interne de la carte */
.blog .site-main > article > .inside-article,
.archive .site-main > article > .inside-article,
.search-results .site-main > article > .inside-article {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 22px;
	background: none;
	box-shadow: none;
}

/* L'image devient le fond de la carte */
.blog .site-main > article .post-image,
.archive .site-main > article .post-image,
.search-results .site-main > article .post-image {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	z-index: 0;
}

.blog .site-main > article .post-image a,
.archive .site-main > article .post-image a,
.search-results .site-main > article .post-image a {
	display: block;
	height: 100%;
}

.blog .site-main > article .post-image img,
.archive .site-main > article .post-image img,
.search-results .site-main > article .post-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.4s ease;
}

.blog .site-main > article:hover .post-image img,
.archive .site-main > article:hover .post-image img,
.search-results .site-main > article:hover .post-image img {
	transform: scale(1.04);
}

/* Voile dégradé pour la lisibilité du titre */
.blog .site-main > article > .inside-article::before,
.archive .site-main > article > .inside-article::before,
.search-results .site-main > article > .inside-article::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top,
		rgba(9, 18, 32, 0.90) 0%,
		rgba(9, 18, 32, 0.72) 26%,
		rgba(9, 18, 32, 0.24) 58%,
		rgba(9, 18, 32, 0.02) 85%);
	pointer-events: none;
}

/* Ordre : badge catégorie, puis titre, puis signature */
.blog .site-main > article .entry-header,
.archive .site-main > article .entry-header,
.search-results .site-main > article .entry-header {
	position: relative;
	z-index: 2;
	order: 2;
	margin: 0;
}

.blog .site-main > article > .inside-article > footer.entry-meta,
.archive .site-main > article > .inside-article > footer.entry-meta,
.search-results .site-main > article > .inside-article > footer.entry-meta {
	position: relative;
	z-index: 2;
	order: 1;
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	font-size: 0;
	line-height: 0;
}

/* Badge catégorie */
.blog .site-main > article .cat-links,
.archive .site-main > article .cat-links,
.search-results .site-main > article .cat-links {
	display: inline-block;
}

.blog .site-main > article .cat-links a,
.archive .site-main > article .cat-links a,
.search-results .site-main > article .cat-links a {
	display: inline-block;
	background-color: var(--cac-nuit);
	color: var(--cac-blanc);
	border-radius: 999px;
	padding: 7px 15px;
	margin-right: 6px;
	font-size: 11px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
}

.blog .site-main > article .cat-links a:hover,
.archive .site-main > article .cat-links a:hover,
.search-results .site-main > article .cat-links a:hover {
	background-color: var(--cac-blanc);
	color: var(--cac-nuit);
}

/* Titre en blanc sur l'image */
.blog .site-main > article .entry-title,
.archive .site-main > article .entry-title,
.search-results .site-main > article .entry-title {
	font-size: clamp(18px, 1.4vw, 23px);
	line-height: 1.22;
	margin: 0;
	color: var(--cac-blanc);
	text-shadow: 0 2px 14px rgba(9, 18, 32, 0.45);
}

.blog .site-main > article .entry-title a,
.archive .site-main > article .entry-title a,
.search-results .site-main > article .entry-title a {
	color: var(--cac-blanc);
	text-decoration: none;
}

.blog .site-main > article .entry-title a:hover,
.archive .site-main > article .entry-title a:hover,
.search-results .site-main > article .entry-title a:hover {
	color: var(--cac-sable-fonce);
}

.blog .site-main > article:nth-of-type(1) .entry-title,
.archive .site-main > article:nth-of-type(1) .entry-title,
.search-results .site-main > article:nth-of-type(1) .entry-title {
	font-size: clamp(28px, 3.1vw, 44px);
	line-height: 1.1;
}

.blog .site-main > article:nth-of-type(1) > .inside-article,
.archive .site-main > article:nth-of-type(1) > .inside-article,
.search-results .site-main > article:nth-of-type(1) > .inside-article {
	padding: 34px;
}

/* Signature : uniquement sur la carte à la une */
.blog .site-main > article .entry-header .entry-meta,
.archive .site-main > article .entry-header .entry-meta,
.search-results .site-main > article .entry-header .entry-meta {
	display: none;
}

.blog .site-main > article:nth-of-type(1) .entry-header .entry-meta,
.archive .site-main > article:nth-of-type(1) .entry-header .entry-meta,
.search-results .site-main > article:nth-of-type(1) .entry-header .entry-meta {
	display: block;
	margin-top: 14px;
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.86);
}

.blog .site-main > article .entry-header .entry-meta a,
.archive .site-main > article .entry-header .entry-meta a,
.search-results .site-main > article .entry-header .entry-meta a {
	color: rgba(255, 255, 255, 0.86);
	text-decoration: none;
}

/* Éléments masqués sur les cartes */
.blog .site-main > article .entry-summary,
.archive .site-main > article .entry-summary,
.search-results .site-main > article .entry-summary,
.blog .site-main > article .read-more-container,
.archive .site-main > article .read-more-container,
.search-results .site-main > article .read-more-container,
.blog .site-main > article .tags-links,
.archive .site-main > article .tags-links,
.search-results .site-main > article .tags-links,
.blog .site-main > article .comments-link,
.archive .site-main > article .comments-link,
.search-results .site-main > article .comments-link {
	display: none;
}

/* ==========================================================================
   7. Pagination
   ========================================================================== */

.paging-navigation,
.post-navigation {
	margin-top: 8px;
}

.paging-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.paging-navigation .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border-radius: 999px;
	background-color: var(--cac-sable-fonce);
	color: var(--cac-nuit);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}

.paging-navigation .page-numbers:hover,
.paging-navigation .page-numbers.current {
	background-color: var(--cac-nuit);
	color: var(--cac-blanc);
}

/* ==========================================================================
   8. Colonne latérale et pied de page
   ========================================================================== */

.widget-area .widget {
	background-color: var(--cac-blanc);
	border-radius: var(--cac-rayon);
	padding: 24px;
	margin-bottom: 20px;
	box-shadow: 0 8px 22px rgba(20, 41, 74, 0.07);
}

.widget-area .widget-title {
	font-size: 17px;
	margin-bottom: 12px;
}

.widget-area .widget ul li {
	padding: 7px 0;
	border-bottom: 1px solid var(--cac-sable-fonce);
}

.widget-area .widget ul li:last-child {
	border-bottom: 0;
}

.widget-area .widget a {
	text-decoration: none;
	font-weight: 600;
}

.site-footer,
.site-info {
	background-color: var(--cac-nuit);
	color: rgba(255, 255, 255, 0.82);
}

.site-footer a,
.site-info a {
	color: var(--cac-blanc);
}

.footer-widgets {
	background-color: var(--cac-sable-fonce);
}

/* ==========================================================================
   9. Boutons et formulaire de recherche
   ========================================================================== */

button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wp-block-button__link {
	background-color: var(--cac-nuit);
	color: var(--cac-blanc);
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

button:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover {
	background-color: var(--cac-nuit-clair);
	color: var(--cac-blanc);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea {
	background-color: var(--cac-blanc);
	border: 1px solid var(--cac-sable-bord);
	border-radius: var(--cac-rayon-s);
	color: var(--cac-encre);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus {
	border-color: var(--cac-nuit-clair);
}

/* ==========================================================================
   10. Article seul : on reprend juste les couleurs et la police
   ========================================================================== */

.single .entry-title,
.page .entry-title {
	font-size: clamp(28px, 3.2vw, 44px);
	line-height: 1.15;
}

.single .inside-article,
.page .inside-article,
.single .comments-area,
.page .comments-area {
	background-color: var(--cac-blanc);
	border-radius: var(--cac-rayon);
}

.single .entry-content,
.page .entry-content {
	font-size: 17px;
	line-height: 1.75;
}

.single .entry-content a,
.page .entry-content a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   11. Adaptations écran
   ========================================================================== */

@media (max-width: 1024px) {
	.site-content {
		padding-left: 40px;
		padding-right: 40px;
	}

	.site-header .inside-header {
		padding-left: 40px;
		padding-right: 40px;
	}

	.blog .site-main,
	.archive .site-main,
	.search-results .site-main {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: auto;
	}

	.blog .site-main > article:nth-of-type(1),
	.archive .site-main > article:nth-of-type(1),
	.search-results .site-main > article:nth-of-type(1) {
		grid-column: span 4;
		grid-row: span 1;
		height: 250px;
	}

	.blog .site-main > article,
	.archive .site-main > article,
	.search-results .site-main > article {
		grid-column: span 2;
		height: 205px;
	}
}

@media (max-width: 768px) {
	.site-header {
		position: static;
	}

	.site-content {
		padding-left: 18px;
		padding-right: 18px;
	}

	.site-header .inside-header {
		padding-left: 18px;
		padding-right: 18px;
	}

	.main-navigation .main-nav > ul {
		display: block;
	}

	.main-navigation .main-nav > ul > li > a {
		background-color: transparent;
		border-radius: 0;
		text-align: left;
	}

	.blog .site-main,
	.archive .site-main,
	.search-results .site-main {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto;
		gap: 16px;
	}

	.blog .site-main > article,
	.archive .site-main > article,
	.blog .site-main > article:nth-of-type(1),
	.archive .site-main > article:nth-of-type(1),
	.search-results .site-main > article,
	.search-results .site-main > article:nth-of-type(1) {
		grid-column: 1 / -1;
		grid-row: span 1;
		height: 200px;
	}

	.blog .site-main > article:nth-of-type(1) > .inside-article,
	.archive .site-main > article:nth-of-type(1) > .inside-article,
	.search-results .site-main > article:nth-of-type(1) > .inside-article {
		padding: 22px;
	}

	.blog .site-main > article:nth-of-type(1) .entry-title,
	.archive .site-main > article:nth-of-type(1) .entry-title,
	.search-results .site-main > article:nth-of-type(1) .entry-title {
		font-size: 25px;
	}

	.blog .site-main > article .entry-title,
	.archive .site-main > article .entry-title,
	.search-results .site-main > article .entry-title {
		font-size: 21px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.blog .site-main > article,
	.archive .site-main > article,
	.blog .site-main > article .post-image img,
	.archive .site-main > article .post-image img {
		transition: none;
	}

	.blog .site-main > article:hover,
	.archive .site-main > article:hover {
		transform: none;
	}

	.blog .site-main > article:hover .post-image img,
	.archive .site-main > article:hover .post-image img {
		transform: none;
	}
}

/* ==========================================================================
   12. Bloc « Explorer par thème » et section « Derniers articles » (accueil)
   ========================================================================== */

.cac-themes {
	background-color: var(--cac-sable-fonce);
	border-radius: 24px;
	padding: 40px 30px 44px;
	margin: 12px 0 0;
}

.cac-themes__titre {
	text-align: center;
	font-size: clamp(26px, 2.6vw, 34px);
	margin: 0 0 26px;
}

.cac-themes__grille {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.cac-carte {
	flex: 1 1 0;
	min-width: 166px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	background-color: var(--cac-blanc);
	border-radius: 16px;
	padding: 18px 16px 16px;
	text-decoration: none;
	color: var(--cac-encre);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.cac-carte:hover,
.cac-carte:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(20, 41, 74, 0.16);
}

.cac-carte__ico {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background-color: var(--cac-sable-fonce);
	display: grid;
	place-items: center;
	color: var(--cac-nuit);
}

.cac-carte__ico svg {
	width: 20px;
	height: 20px;
	display: block;
}

.cac-carte__nom {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--cac-nuit);
}

.cac-carte__desc {
	flex: 1 1 auto;
	font-size: 13px;
	line-height: 1.45;
	color: var(--cac-gris);
}

.cac-carte__compte {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 2px;
	padding-top: 10px;
	border-top: 1px solid var(--cac-sable-fonce);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cac-nuit);
	font-variant-numeric: tabular-nums;
}

.cac-carte__fleche {
	font-size: 15px;
	transition: transform 0.18s ease;
}

.cac-carte:hover .cac-carte__fleche {
	transform: translateX(4px);
}

.cac-derniers {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: clamp(24px, 2.2vw, 32px);
	margin: 16px 0 0;
}

.cac-derniers::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	border-radius: 5px;
	background-color: var(--cac-nuit);
}

/* --------------------------------------------------------------------------
   Cartes sous le héros : fond blanc, image en haut, titre dessous
   -------------------------------------------------------------------------- */

.blog .site-main > article:nth-of-type(n+4) {
	height: auto;
	background-color: var(--cac-blanc);
	box-shadow: 0 8px 22px rgba(20, 41, 74, 0.08);
}

.blog .site-main > article:nth-of-type(n+4) > .inside-article {
	justify-content: flex-start;
	padding: 0 0 20px;
}

.blog .site-main > article:nth-of-type(n+4) > .inside-article::before {
	display: none;
}

.blog .site-main > article:nth-of-type(n+4) .post-image {
	position: static;
	order: 1;
	margin: 0 0 15px;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.blog .site-main > article:nth-of-type(n+4) .post-image img {
	height: 100%;
}

.blog .site-main > article:nth-of-type(n+4) > .inside-article > footer.entry-meta {
	order: 2;
	padding: 0 20px;
	margin: 0 0 10px;
}

.blog .site-main > article:nth-of-type(n+4) .entry-header {
	order: 3;
	padding: 0 20px;
}

.blog .site-main > article:nth-of-type(n+4) .cat-links a {
	background-color: var(--cac-sable-fonce);
	color: var(--cac-nuit);
}

.blog .site-main > article:nth-of-type(n+4) .cat-links a:hover {
	background-color: var(--cac-nuit);
	color: var(--cac-blanc);
}

.blog .site-main > article:nth-of-type(n+4) .entry-title {
	font-size: clamp(17px, 1.35vw, 21px);
	color: var(--cac-nuit);
	text-shadow: none;
}

.blog .site-main > article:nth-of-type(n+4) .entry-title a {
	color: var(--cac-nuit);
}

.blog .site-main > article:nth-of-type(n+4) .entry-title a:hover {
	color: var(--cac-nuit-clair);
}

@media (max-width: 1024px) {
	.cac-carte {
		min-width: 200px;
	}
}

@media (max-width: 768px) {
	.cac-themes {
		padding: 28px 18px 30px;
		border-radius: 18px;
	}

	.cac-themes__grille {
		gap: 12px;
	}

	.cac-carte {
		min-width: 138px;
		padding: 15px 14px 14px;
	}

	.cac-carte__desc {
		font-size: 12.5px;
	}
}

/* ==========================================================================
   13. Pagination et pied de page
   ========================================================================== */

/* GeneratePress pose un bloc blanc pleine largeur autour de la pagination */
.separate-containers .paging-navigation,
.one-container .paging-navigation,
.paging-navigation {
	background-color: transparent;
	padding: 0;
	margin: 12px 0 0;
	box-shadow: none;
	border: 0;
}

.paging-navigation .nav-links {
	justify-content: center;
}

/* L'accueil se termine sur les derniers articles, pas sur une rangée de
   numéros. Les liens restent dans le HTML pour que les moteurs continuent
   d'atteindre les pages suivantes ; la pagination réapparaît dès la page 2
   et sur toutes les archives. */
.blog:not(.paged) .site-main > .paging-navigation {
	display: none;
}

/* --- Pied de page ---------------------------------------------------- */

.cac-pied {
	padding: 54px 96px 44px;
	background-color: var(--cac-nuit);
	color: rgba(255, 255, 255, 0.78);
}

.cac-pied__grille {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.35fr 1fr 0.85fr 1.5fr;
	gap: 40px;
	align-items: start;
}

.cac-pied__titre {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--cac-blanc);
}

.cac-pied__phrase {
	margin: 0;
	max-width: 44ch;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.7);
}

.cac-pied__chapeau {
	margin: 0 0 15px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cac-blanc);
}

.cac-pied__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cac-pied__liste li {
	margin: 0;
}

.cac-pied__liste a {
	font-size: 15px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}

.cac-pied__liste a:hover,
.cac-pied__liste a:focus {
	color: var(--cac-blanc);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-info {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 14px;
}

.site-info .copyright-bar {
	color: rgba(255, 255, 255, 0.7);
}

.cac-pied__liste--articles {
	gap: 13px;
}

.cac-pied__liste--articles a {
	display: block;
	font-size: 14px;
	line-height: 1.45;
	font-weight: 400;
}

@media (max-width: 1024px) {
	.cac-pied {
		padding: 44px 40px 36px;
	}

	.cac-pied__grille {
		grid-template-columns: 1fr 1fr;
		gap: 30px 36px;
	}
}

@media (max-width: 768px) {
	.cac-pied {
		padding: 36px 18px 30px;
	}

	.cac-pied__grille {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.cac-pied__liste--articles a {
		font-size: 14.5px;
	}
}