/*
Theme Name: Clea-5
Theme URI: https://www.cleacuisine.fr
Author: Ludovic Delhomme
Description: Thème de Cléa cuisine : léger, responsive et écoconçu (sans framework, sans JavaScript de chargement, sans police téléchargée).
Version: 5.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: clea
Domain Path: /translation
*/

/* Polices : aucun fichier à télécharger. Les titres reprennent Comic Sans MS, la police que les visiteurs voient sur l'ancien
   site (la police d'origine, chargée en http, y était bloquée) ; le texte courant utilise la police du système. */

/**************
VARIABLES
**************/
:root{
	/* couleurs de l'identité graphique */
	--brun:#5b442b;
	--sauge:#6C8D84;        /* titres (grande taille) : contraste 3,4:1 */
	--sauge-texte:#4f6f66;  /* texte courant et fonds sombres : contraste 5:1 */
	--menthe:#8fc1b3;       /* filets et décors, jamais du texte */
	--fond:#f3f6f6;
	--blanc:#fff;
	--gris:#666;

	--bordure:2px dotted var(--menthe);
	--rayon:4px;
	--largeur:71.25rem;  /* largeur utile du site (1140px) */
	--largeur-texte:60rem; /* largeur des articles, pages, commentaires (960px) ; 48rem = 768px, plus étroit */

	/* polices */
	--police-titre:'Comic Sans MS','Comic Sans','Chalkboard SE',var(--police-texte);
	--police-texte:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

	/* espacements */
	--s1:.5rem;
	--s2:1rem;
	--s3:1.5rem;
	--s4:clamp(2rem,5vw,3.5rem);

	/* tailles fluides (mobile -> bureau) */
	--t-page:clamp(1.6rem,1.1rem + 2.4vw,2.6rem);
	--t-h2:clamp(1.4rem,1.1rem + 1.4vw,2rem);
	--t-h3:clamp(1.1rem,1rem + .6vw,1.4rem);
	--t-grand:clamp(1.9rem,1.2rem + 3vw,3rem);
}

/**************
BASE (reset léger, remplace le normalize de Bootstrap)
**************/
*,
*::before,
*::after{
	box-sizing:border-box;
}
html{
	font-size:100%;
	-webkit-text-size-adjust:100%;
	text-size-adjust:100%;
	scroll-behavior:smooth;
	scroll-padding-top:4.5rem; /* la barre de menu collante ne masque pas l'élément qui prend le focus */
}
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto;}
}
html,body{
	height:100%;
}
body{
	margin:0;
	font-family:var(--police-texte);
	font-size:1rem;
	line-height:1.6;
	color:#333;
	background:var(--blanc);
}
h1,h2,h3,h4,h5,h6{
	margin:1.25em 0 .5em;
}
p,ul,ol,dl,pre,figure{
	margin:0 0 var(--s2);
}
ul ul,
ol ol,
ul ol,
ol ul{
	margin-bottom:0;
}
figure{
	margin-inline:0;
}
hr{
	margin:var(--s3) 0;
	border:0;
	border-top:1px solid #ddd;
}
b,
strong{
	font-weight:700;
}
sub,
sup{
	line-height:0;
}
button,
input,
select,
textarea{
	margin:0;
	font:inherit;
}
iframe{
	border:0;
}
img{
	max-width:100%;
	height:auto;
	border:0;
	vertical-align:middle;
}
a,
a:hover{
	color:var(--brun);
}
/* les liens sont soulignés : la couleur seule ne suffit pas à les distinguer du texte (critère WCAG 1.4.1) */
a{
	text-decoration:underline;
	text-underline-offset:.15em;
}
/* éléments de navigation, boutons et vignettes : pas de soulignement */
.site-nav a,
#footer-nav a,
a.button,
.content a.button,
.card__title a,
.card__thumb,
.une h3 a,
.une__img,
.aussi-wrapper,
.site-title a,
.backtotop,
.skip-link,
.paging a,
#livres a{
	text-decoration:none;
}
.card__title a:hover,
.card__title a:focus-visible,
.une h3 a:hover,
.une h3 a:focus-visible,
.aussi-wrapper:hover h3,
.aussi-wrapper:focus-visible h3{
	text-decoration:underline;
}
/* légendes SoundCloud collées dans les articles : liens en gris très clair (#ccc, contraste 1,6:1) */
.content a[style*="#cccccc"],
.content a[style*="#ccc;"]{
	color:var(--gris) !important;
	text-decoration:underline !important;
}
#main:focus{
	outline:none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
	outline:3px solid var(--brun);
	outline-offset:2px;
}
blockquote{
	margin:0 0 var(--s3);
	padding:var(--s1) var(--s2);
	font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);
	border-left:5px solid var(--menthe);
}
#main{
	margin-top:var(--s4);
}
#content{
	margin-bottom:var(--s4);
}
.content{
	display:flow-root; /* contient les images flottantes */
	line-height:1.7;
	text-align:left;
	overflow-wrap:break-word;
}
/* texte justifié seulement quand la ligne est assez longue pour éviter les « rivières » */
@media (min-width:768px){
	.content{
		text-align:justify;
		hyphens:auto;
	}
}
/* largeur de lecture confortable pour le texte des articles et des pages */
.single-header,
.content{
	max-width:var(--largeur-texte);
	margin-inline:auto;
}

/**************
TITRES
**************/
h2,h3,
.page-title,
.single-title{
	font-family:var(--police-titre);
	font-weight:400;
	line-height:1.25;
}
h2{
	font-size:var(--t-h2);
	color:var(--brun);
}
h3{
	font-size:var(--t-h3);
	color:var(--sauge-texte);
}
.page-title,
.single-title{
	font-size:var(--t-page);
	color:var(--sauge);
}

/**************
OUTILS
**************/
.wrap{
	width:min(100% - 2 * var(--s2),var(--largeur));
	margin-inline:auto;
}
.screen-reader-text{
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
	clip-path:inset(50%);
	white-space:nowrap;
}
.skip-link{
	position:absolute;
	left:var(--s1);
	top:-4rem;
	z-index:1100;
	padding:var(--s1) var(--s2);
	background:var(--blanc);
	color:var(--brun);
	font-weight:700;
}
.skip-link:focus{
	top:var(--s1);
}
.icon{
	width:1em;
	height:1em;
	vertical-align:-.125em;
	flex:none;
}

/**************
EN-TÊTE
**************/
#clea-title{
	text-align:center;
	padding-top:var(--s2);
}
.site-title{
	margin:0;
	font-size:1rem;
}
.site-title img{
	display:block;
	margin:0 auto;
}
#site-description{
	/* le logo a du vide en bas : le slogan remonte dessus (comme sur l'ancien thème), proportionnellement à sa taille */
	margin:clamp(-1.9rem,-3.4vw,-.5rem) 0 0;
	color:var(--brun);
	font-family:var(--police-titre);
	font-size:clamp(1.05rem,.9rem + .9vw,1.5rem);
	line-height:1.2;
}
.page-header,
.cat-header{
	border-bottom:var(--bordure);
	padding:0;
	margin:var(--s3) 0;
	height:auto;
}

/**************
MENU
**************/
.site-nav{
	background:var(--brun);
	color:var(--blanc);
}
.site-nav a{
	color:var(--blanc);
	text-decoration:none;
}
.site-nav__inner{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:var(--s1) var(--s2);
}
.nav-panel{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:var(--s1) var(--s2);
	flex:1 1 100%;
}
.nav-toggle{
	display:none;
	align-items:center;
	gap:var(--s1);
	margin:var(--s1) 0;
	padding:var(--s1) var(--s2);
	background:transparent;
	color:var(--blanc);
	border:1px solid rgba(255,255,255,.6);
	border-radius:var(--rayon);
	font:inherit;
	cursor:pointer;
}
.nav-toggle .icon{
	font-size:1.4rem;
}
/* sans JavaScript, le menu reste déplié ; avec JavaScript il se replie sur petit écran */
.js .nav-toggle{
	display:inline-flex;
}
.js .nav-panel{
	display:none;
}
.js .nav-panel.is-open{
	display:flex;
}

.site-nav .menu,
.site-nav .sub-menu{
	list-style:none;
	margin:0;
	padding:0;
}
.site-nav .menu{
	display:flex;
	flex-direction:column;
	flex:1 1 100%;
}
.site-nav .menu a,
.menu-parent{
	display:block;
	padding:.75rem var(--s2);
}
/* entrée à sous-menu : un bouton, pas un lien */
.menu-parent{
	display:flex;
	align-items:center;
	gap:.5rem;
	width:100%;
	background:transparent;
	border:0;
	color:inherit;
	font:inherit;
	text-align:left;
	cursor:pointer;
}
.site-nav .menu a:hover,
.site-nav .menu a:focus-visible,
.site-nav .menu-parent:hover,
.site-nav .menu-parent:focus-visible,
.site-nav .is-open > .menu-parent,
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a,
.site-nav .current-menu-ancestor > .menu-parent,
.site-nav .current_page_item > a{
	background:var(--sauge-texte);
}
.site-nav a:focus-visible,
.menu-parent:focus-visible{
	outline-color:var(--blanc);
	outline-offset:-3px;
}
.menu-parent::after{
	content:"";
	display:inline-block;
	width:.4em;
	height:.4em;
	margin:0 0 .2em auto;
	border:solid currentColor;
	border-width:0 2px 2px 0;
	transform:rotate(45deg);
	transition:transform .15s;
}
.is-open > .menu-parent::after{
	transform:translateY(.15em) rotate(-135deg);
}
/* petit écran : sous-menu décalé ; sans JavaScript il reste déplié, avec JavaScript il se replie */
.site-nav .sub-menu a{
	padding:.5rem var(--s2) .5rem calc(var(--s2) * 2.5);
	font-size:.95rem;
	line-height:1.3;
}

.site-nav .menu li{
	position:relative;
}
@media (max-width:1099.98px){
	.js .site-nav .sub-menu{
		display:none;
	}
	.js .site-nav .is-open > .sub-menu{
		display:block;
	}
}

.search-form{
	display:flex;
	flex:1 1 100%;
}
.search-form input{
	flex:1;
	min-width:0;
	height:2.25rem;
	padding:0 var(--s1);
	border:0;
	border-radius:var(--rayon) 0 0 var(--rayon);
	font:inherit;
	font-size:.95rem;
	background:var(--blanc);
	color:#333;
}
.search-form button{
	width:2.5rem;
	border:0;
	border-radius:0 var(--rayon) var(--rayon) 0;
	background:var(--sauge-texte);
	color:var(--blanc);
	cursor:pointer;
}
.search-form button:hover{
	background:var(--sauge);
}
.search-form--page{
	flex:0 1 28rem;
	max-width:28rem;
	margin-top:var(--s2);
}
.search-form--page input{
	border:1px solid var(--sauge-texte);
	border-right:0;
	height:2.75rem;
}
.search-form--page button{
	width:3rem;
}

@media (min-width:1100px){
	/* barre horizontale, fixée en haut de l'écran */
	.site-nav{
		position:sticky;
		top:0;
		z-index:100;
	}
	.site-nav__inner{
		position:relative;
	}
	.admin-bar .site-nav{
		top:32px;
	}
	.js .nav-toggle{
		display:none;
	}
	.js .nav-panel,
	.nav-panel{
		display:flex;
		flex-wrap:nowrap;
		flex:1;
	}
	.site-nav .menu{
		flex-direction:row;
		flex:0 1 auto;
	}
	.site-nav .menu li{
		position:relative;
	}
	.site-nav .menu > li > a,
	.site-nav .menu > li > .menu-parent{
		padding:.9rem .8rem;
		white-space:nowrap;
	}
	.site-nav .sub-menu{
		display:none;
		position:absolute;
		top:100%;
		left:0;
		/* assez large pour que la plupart des libellés tiennent sur une ligne */
		width:max-content;
		min-width:16rem;
		max-width:min(28rem,calc(100vw - 2rem));
		max-height:70vh;
		overflow-y:auto;
		padding:.25rem 0;
		background:var(--blanc);
		box-shadow:0 6px 12px rgba(0,0,0,.2);
		z-index:110;
	}
	/* long sous-menu : panneau sur toute la largeur de la barre, en colonnes, sans défilement */
	.site-nav .menu li.has-long-submenu{
		position:static;
	}
	.site-nav .sub-menu--cols-2,
	.site-nav .sub-menu--cols-3{
		left:0;
		right:0;
		width:auto;
		max-width:none;
		max-height:none;
		overflow:visible;
		padding:var(--s2) var(--s3);
		column-gap:var(--s4);
		column-rule:var(--bordure); /* filet pointillé entre les colonnes, comme les cadres du site */
	}
	.site-nav .sub-menu--cols-2{
		column-count:2;
	}
	.site-nav .sub-menu--cols-3{
		column-count:3;
	}
	.site-nav .sub-menu--cols-2 li,
	.site-nav .sub-menu--cols-3 li{
		break-inside:avoid;
	}
	/* avec JavaScript, l'ouverture est pilotée par la classe .is-open (survol, clic, clavier) */
	.site-nav .is-open > .sub-menu{
		display:block;
	}
	/* sans JavaScript : ouverture au survol et au clavier */
	html:not(.js) .site-nav .menu li:hover > .sub-menu,
	html:not(.js) .site-nav .menu li:focus-within > .sub-menu{
		display:block;
	}
	.site-nav .sub-menu a{
		padding:.4rem var(--s2);
		color:var(--brun);
		font-size:1rem;
		line-height:1.3;
	}
	/* page courante : fond vert sombre, donc texte blanc */
	.site-nav .sub-menu .current-menu-item > a,
	.site-nav .sub-menu .current_page_item > a{
		color:var(--blanc);
	}
	.site-nav .sub-menu a:hover,
	.site-nav .sub-menu a:focus-visible{
		background:var(--fond);
		color:var(--brun);
	}
	.search-form{
		flex:0 1 15rem;
		margin-left:auto;
	}
}

/**************
ACCUEIL
**************/
.home #main{
	margin-top:0;
}
/* titre de section précédé du radis */
.partie-titre{
	display:flex;
	align-items:center;
	gap:var(--s2);
	margin-top:var(--s4);
}
.partie-titre h2{
	color:var(--brun);
	font-size:var(--t-grand);
	margin:0;
}
.partie-titre .img-title{
	height:clamp(44px,10vw,110px);
	width:auto;
	flex:none;
}

/* « à la Une » */
.une{
	display:block;
	margin-top:var(--s2);
	padding:var(--s3);
	background:var(--fond);
	border:var(--bordure);
}
.une h3{
	margin:0;
	font-size:clamp(1.4rem,1rem + 1.8vw,2rem);
}
.une h3 a{
	color:var(--sauge-texte);
	text-decoration:none;
}
.une h3 a:hover,
.une h3 a:focus-visible{
	text-decoration:underline;
}
.une-meta{
	margin:0;
	padding:var(--s1) 0 var(--s2);
	color:var(--sauge-texte);
}
.une-meta .date-une{
	margin-left:var(--s1);
	white-space:nowrap;
}
.une__body{
	display:grid;
	gap:var(--s2);
}
.une__img img{
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:3/2;
	object-fit:cover;
}
.une__text p{
	margin:0 0 var(--s2);
	font-size:1.1rem;
}
.une__actions{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap:var(--s1) var(--s2);
}
@media (min-width:768px){
	.une__body{
		grid-template-columns:5fr 7fr;
		gap:var(--s3);
	}
}

/* « Et aussi » : grille de vignettes */
.aussi{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:var(--s3) var(--s2);
	margin-top:var(--s2);
	margin-bottom:var(--s4);
}
@media (min-width:768px){
	.aussi{
		grid-template-columns:repeat(4,1fr);
	}
}
.aussi-wrapper{
	display:block;
	color:var(--sauge-texte);
	text-decoration:none;
}
.aussi img{
	display:block;
	width:100%;
	aspect-ratio:280/187;
	object-fit:cover;
	border-radius:var(--rayon);
}
.aussi h3{
	margin:var(--s1) 0 0;
	font-size:1.05rem;
	text-align:center;
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.aussi-wrapper:hover h3,
.aussi-wrapper:focus-visible h3{
	text-decoration:underline;
}

/**************
ARTICLE
**************/
.single-title{
	margin-top:0;
}
.meta{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	gap:var(--s1) var(--s3);
	color:var(--sauge-texte);
	background:var(--fond);
	border:var(--bordure);
	margin:var(--s2) 0;
	padding:var(--s1) var(--s2);
}
.meta a{
	color:var(--brun);
}
.meta .button{
	margin:2px 0;
}
.meta__actions{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:var(--s1);
}
.meta .category,
.meta .tags{
	margin:2px 0;
}

/**************
FOOTER
**************/
#footer-nav{
	background:var(--sauge-texte);
}
#footer-nav .menu{
	display:flex;
	flex-wrap:wrap;
	list-style:none;
	margin:0;
	padding:0;
}
#footer-nav a{
	display:block;
	padding:var(--s2);
	color:var(--blanc);
}
#credit{
	padding:var(--s2);
	font-size:.9rem;
	text-align:center;
}
.backtotop{
	position:fixed;
	right:var(--s2);
	bottom:var(--s2);
	display:flex;
	align-items:center;
	justify-content:center;
	width:44px;
	height:44px;
	background:var(--gris);
	color:var(--blanc);
	border-radius:var(--rayon);
	font-size:1.4rem;
	opacity:.85;
	z-index:1000;
}
.backtotop:hover,
.backtotop:focus{
	color:var(--blanc);
	opacity:1;
}

/**************
WIDGET « MES LIVRES » (pied de page)
**************/
.livres-band{
	background:var(--fond);
	border-top:var(--bordure);
	padding:var(--s3) 0 var(--s4);
}
/* titre centré, encadré de deux filets pointillés */
#livres .widget-title{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:var(--s2);
	margin:0 0 var(--s3);
	text-align:center;
}
#livres .widget-title::before,
#livres .widget-title::after{
	content:"";
	flex:1;
	max-width:12rem;
	border-top:var(--bordure);
}
/* le HTML du widget garde d'anciennes classes de grille (col-xs-4 col-sm-2) : on centre les couvertures nous-mêmes */
#livres .textwidget{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:var(--s3) var(--s3);
}
#livres .textwidget > div{
	flex:none;
	margin:0;
	padding:0;
}
/* toutes les couvertures ont la même hauteur, quelle que soit leur taille d'origine */
#livres img{
	display:block;
	height:clamp(7rem,5rem + 6vw,9rem);
	width:auto;
	max-width:100%;
	object-fit:contain;
	border-radius:var(--rayon);
	box-shadow:0 2px 6px rgba(0,0,0,.25);
	transition:transform .2s,box-shadow .2s;
}
#livres a:hover img,
#livres a:focus-visible img{
	transform:translateY(-4px);
	box-shadow:0 8px 14px rgba(0,0,0,.3);
}
@media (prefers-reduced-motion:reduce){
	#livres img{
		transition:none;
	}
	#livres a:hover img,
	#livres a:focus-visible img{
		transform:none;
	}
}

/**************
NAVIGATION
**************/
.nav-single .button{
	text-align:left;
}
.nav-single .nav-next{
	margin-left:auto;
}
.nav-single{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	gap:var(--s1);
	margin:var(--s3) auto;
	max-width:var(--largeur-texte);
}
/**************
PAGES PERSONNALISÉES (classes utilisées dans le contenu)
**************/
.img-cat{
	padding:20px 0;
}
.custom-page ul{
	list-style-type:none;
	padding:0;
}
.custom-page h2{
	margin:0 0 20px;
}
.custom-page .page-title{
	margin:10px 0 20px;
}
.custom-page li{
	font-size:1.25rem;
}
.custom-page li:before{
	content:"\203A";
}
.custom-page li a{
	padding-left:10px;
}

/**************
IMAGES ET MÉDIAS DU CONTENU
**************/
.content iframe,
.content audio,
.content video,
.content embed{
	max-width:100%;
}
.content figure{
	margin:0 0 var(--s2);
}
/* photos verticales : elles ne dépassent pas la hauteur de l'écran */
.content img{
	max-height:85vh;
	width:auto;
	max-width:100%;
}
.alignleft{
	float:left;
	margin-right:1.6em !important;
}
.alignright{
	float:right;
	margin-left:1.6em !important;
}
.aligncenter{
	clear:both;
	display:block;
	margin-left:auto;
	margin-right:auto;
}

/**************
RECHERCHE
**************/
#validation{
	text-align:center;
	padding-top:10px;
	margin-bottom:20px;
}
#separator{
	text-align:center;
}
.quicksearchcuis{
	margin-bottom:20px;
}

/**************
BOUTONS
**************/
.button{
	display:inline-flex;
	align-items:center;
	gap:.4em;
	padding:.5rem var(--s2);
	background:var(--blanc);
	color:var(--brun);
	border:1px solid #ccc;
	border-radius:var(--rayon);
	font:inherit;
	font-size:.95rem;
	line-height:1.3;
	text-decoration:none;
	cursor:pointer;
}
.button:hover,
.button:focus-visible{
	background:var(--fond);
	border-color:var(--sauge-texte);
	color:var(--brun);
	text-decoration:none;
}

/**************
LISTES D'ARTICLES (catégories, tags, archives, recherche)
**************/
.cards{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));
	gap:var(--s3);
	margin-block:var(--s3);
}
.card{
	display:flex;
	flex-direction:column;
	background:var(--fond);
	border:var(--bordure);
}
.card__thumb{
	display:block;
	aspect-ratio:280/187;
	overflow:hidden;
	margin:var(--s1) var(--s1) 0;
}
.card__img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}
.card__body{
	display:flex;
	flex-direction:column;
	flex:1;
	gap:var(--s1);
	padding:var(--s2);
}
.card__title{
	margin:0;
	font-size:var(--t-h3);
	color:var(--sauge-texte);
}
.card__title a{
	color:inherit;
	text-decoration:none;
}
.card__title a:hover,
.card__title a:focus-visible{
	text-decoration:underline;
}
.card__meta{
	margin:0;
	font-size:.9rem;
	color:var(--sauge-texte);
}
.card__excerpt{
	flex:1;
	font-size:.95rem;
}
.card__excerpt p{
	margin:0;
	display:-webkit-box;
	-webkit-line-clamp:4;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.card .button{
	align-self:flex-end;
}
.excerpt-read-more{
	color:var(--brun);
}
.no-results{
	margin-block:var(--s4);
}

/* article sans image exploitable : motif du thème, aucune requête */
.thumb-placeholder{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	min-height:100%;
	background:linear-gradient(135deg,#e3efec,#cfe3dd);
	color:var(--menthe);
	font-size:3rem;
}
.aussi .thumb-placeholder{
	aspect-ratio:280/187;
	border-radius:var(--rayon);
}
.une__img .thumb-placeholder{
	aspect-ratio:3/2;
}

/* pagination */
.paging{
	margin:var(--s4) 0;
}
.paging .page-numbers{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:var(--s1);
	list-style:none;
	margin:0;
	padding:0;
	font-family:var(--police-titre);
	font-size:1.25rem;
}
.paging li > *{
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:2.5rem;
	height:2.5rem;
	padding:0 var(--s1);
	color:var(--brun);
	text-decoration:none;
	border-bottom:3px solid transparent;
}
.paging a:hover,
.paging a:focus-visible{
	border-bottom-color:var(--brun);
}
.paging .current{
	border-bottom-color:var(--sauge-texte);
	color:var(--sauge-texte);
}

/**************
FORMULAIRES
**************/
:where(input[type="text"],input[type="email"],input[type="url"],input[type="search"],textarea,select){
	width:100%;
	padding:.55rem .75rem;
	font:inherit;
	color:#333;
	background:var(--blanc);
	border:1px solid #8a8a8a;
	border-radius:var(--rayon);
}
:where(label){
	display:inline-block;
	margin-bottom:.25rem;
	font-weight:600;
}
.field,
.comment-form p{
	margin:0 0 var(--s2);
}
.field .error{
	display:block;
	margin-top:.25rem;
	color:#a12622;
}
.field--check label,
.comment-form-cookies-consent label{
	font-weight:400;
}
.comment-form-cookies-consent{
	display:flex;
	align-items:baseline;
	gap:var(--s1);
}
.notice{
	margin:var(--s2) 0;
	padding:var(--s2);
	border:1px solid;
	border-radius:var(--rayon);
}
.notice--success{
	background:#eaf5ec;
	border-color:#3d7a4b;
	color:#1f4d2c;
}
.notice--error{
	background:#fbeceb;
	border-color:#a12622;
	color:#7a1a17;
}
.contact-form{
	margin-top:var(--s3);
}

/**************
RECHERCHE DE RECETTES
**************/
.recipe-search{
	display:grid;
	gap:0 var(--s3);
	margin-top:var(--s3);
}
.recipe-search .field--wide,
.recipe-search__actions{
	grid-column:1 / -1;
}
.recipe-search__actions{
	display:flex;
	flex-wrap:wrap;
	gap:var(--s1);
	margin:var(--s1) 0 0;
}
@media (min-width:640px){
	.recipe-search{
		grid-template-columns:repeat(2,1fr);
	}
}
.recipe-results{
	margin-top:var(--s4);
}

/**************
COMMENTAIRES
**************/
.commentaires,
.respond-form{
	max-width:var(--largeur-texte);
	margin-inline:auto;
}
.commentaires{
	margin-top:var(--s3);
	padding:var(--s2);
	background:var(--fond);
	border-radius:var(--rayon);
}
.comments-title,
.comment-reply-title{
	margin:0 0 var(--s2);
	font-size:var(--t-h2);
}
.commentlist,
.children{
	list-style:none;
	margin:0;
	padding:0;
}
.commentlist{
	color:var(--sauge-texte);
}
.comment{
	margin:var(--s1) 0 0;
	padding:var(--s1) var(--s2);
	background:var(--blanc);
	border-radius:var(--rayon);
}
.comment-meta{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:0 var(--s1);
}
.comment-meta .fn{
	font-weight:700;
	color:var(--brun);
}
.comment-date{
	font-size:.9rem;
}
.comment-content{
	color:#333;
}
/* réponses : décalage modéré pour ne pas écraser le texte sur mobile */
.children{
	padding-left:clamp(.5rem,3vw,2rem);
}
.children .comment{
	background:var(--fond);
}
.avatar{
	border-radius:50%;
}
.reply{
	text-align:right;
}
.respond-form{
	margin-top:var(--s3);
	padding:var(--s2);
	background:var(--fond);
	color:var(--sauge-texte);
}
.comment-notes{
	margin-top:0;
}

/**************
IMPRESSION
**************/
@media print{
	.site-nav,
	.backtotop,
	.skip-link,
	.meta__actions,
	.nav-single,
	#footer,
	.commentaires,
	.respond-form{
		display:none !important;
	}
	body{
		font-size:12pt;
		color:#000;
	}
	.content{
		max-width:none;
		text-align:left;
	}
	a{
		color:#000;
		text-decoration:none;
	}
}