/* =========================================================
   Recette 360 — Main stylesheet
   ========================================================= */

/* =========================================================
   Police de repli aux métriques ajustées — contre le CLS
   =========================================================
   Poppins est chargée de façon non bloquante : le texte s'affiche d'abord
   dans une police système, puis bascule. Sans ajustement, les deux n'ont ni
   la même hauteur d'x ni les mêmes montantes : la bascule déplace tout le
   texte, et ce déplacement compte dans le CLS.

   CALIBRAGE SUR LA LARGEUR, PAS SUR LA HAUTEUR D'X — leçon apprise.
   Une première version ajustait size-adjust sur la hauteur d'x (105,68 % pour
   Arial). Le texte de repli avait la bonne TAILLE apparente… mais pas la bonne
   LARGEUR : Poppins est une police large, et un Arial calé sur sa hauteur d'x
   reste ~6 % plus étroit par ligne. Or c'est la largeur qui décide des retours
   à la ligne : un titre tenait en 2 lignes en repli, en demandait 3 une fois
   Poppins arrivée — et tout ce qui suit (l'image de la recette en premier)
   sautait d'une ligne entière à chaque fichier de graisse chargé. C'était le
   décalage que PageSpeed imputait aux polices.

   Les valeurs ci-dessous suivent la méthode standard (celle de next/font et de
   fontaine) : size-adjust = largeur moyenne d'avance de Poppins / celle du
   repli, ascent/descent/line-gap = métriques de Poppins (1050/350/100 pour
   1000 UPM) divisées par ce facteur. Le texte de repli paraît un peu plus
   grand qu'avant pendant le bref instant de bascule — mais il occupe les
   MÊMES lignes, et c'est cela que mesure le CLS.

   UNE SEULE FAMILLE pour toutes les plateformes : contrairement aux hauteurs
   d'x, les largeurs moyennes d'Arial et de Roboto sont quasi identiques — le
   même size-adjust vaut pour les deux. Le navigateur prend la première police
   locale qui résout : Arial sur ordinateur, Roboto sur Android. */
@font-face {
	font-family: 'Poppins Fallback';
	src: local('Arial'), local('Roboto'), local('Helvetica'), local('Liberation Sans'), local('Noto Sans');
	size-adjust: 112.16%;
	ascent-override: 93.62%;
	descent-override: 31.21%;
	line-gap-override: 8.92%;
	font-display: swap;
}

:root {
	--orange: #e94f2e;
	--orange-dark: #cf4023;
	/* Orange ACCESSIBLE — 5,04:1 sur blanc, contre 3,73:1 pour --orange.
	   L'orange de marque reste utilisé tel quel sur les grands éléments (héro,
	   gros boutons) : au-delà de 18,66 px en gras, WCAG n'exige que 3:1, et
	   --orange y satisfait. Mais dès qu'il porte du PETIT texte — lien dans un
	   paragraphe, pastille de catégorie, libellé de 11 px — il faut cette
	   variante, sans quoi le texte est illisible pour une partie des lecteurs.
	   Même teinte, simplement assombrie : la marque ne bouge pas. */
	--orange-acc: #c93d1a;
	--teal: #1c6e6e;
	--teal-dark: #145252;
	--gold: #c6a15b;
	--green: #4caf7d;
	--green-dark: #3d9268;
	--ink: #2b2b2b;
	/* #7a7a7a ne donnait que 4,29:1 sur blanc — sous le seuil WCAG AA de 4,5:1
	   pour du texte normal. #6b6b6b tient sur tous les fonds clairs du thème :
	   blanc 5,33:1, pastille #f4f2ee 4,77:1, encart membre #fdf6f3 4,99:1. */
	--muted: #6b6b6b;
	--line: #ececec;
	/* Séparateur LISIBLE. --line (#ececec) est une couleur de FILET, calibrée
	   pour disparaître : sur le fond #f2f2f2 de la page elle ne donne que
	   1,08:1 — les chevrons du fil d'Ariane étaient purement et simplement
	   invisibles. Ce gris tient sur les deux fonds du thème (blanc 2,85:1,
	   page #f2f2f2 2,53:1), ce qui suffit pour un signe décoratif que rien
	   n'oblige à lire, sans pour autant rivaliser avec le texte des maillons. */
	--sep: #a3a3a3;
	--bg: #f2f2f2;
	--card: #ffffff;
	--star: #f5b301;
	--radius: 14px;
	--radius-sm: 10px;
	--shadow: 0 8px 24px rgba(0, 0, 0, .07);
	--shadow-sm: 0 3px 10px rgba(0, 0, 0, .06);
	/* Ordre voulu : Poppins, puis le repli AJUSTÉ (une seule famille, toutes
	   plateformes), et seulement ensuite la chaîne système brute — qui ne doit
	   servir que si aucun repli ajusté n'existe. */
	--font: 'Poppins', 'Poppins Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font);
	color: var(--ink);
	background: var(--bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--orange); }

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px; overflow: hidden;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; background: #fff; padding: 10px 16px; z-index: 1000; border-radius: 6px; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 26px; border: 0; border-radius: 30px;
	font-family: var(--font); font-weight: 600; font-size: 15px;
	cursor: pointer; transition: transform .15s ease, background .2s ease;
}
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-dark); color: #fff; transform: translateY(-2px); }
.btn--ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn--ghost:hover { border-color: var(--orange); color: var(--orange); }

/* ---------- Header ---------- */
.site-header {
	background: #fff;
	position: sticky; top: 0; z-index: 100;
}
.site-header__inner {
	display: flex; align-items: center; gap: 28px;
	min-height: 84px;
}

/* Logo badge with the rounded "cutout" that dips below the header */
.site-branding {
	align-self: stretch;
	display: flex; align-items: center; justify-content: center;
	background: #fff;
	padding: 8px 40px 26px;
	margin-bottom: -42px;              /* dépasse de 42px sous le header */
	position: relative; z-index: 3;
	/* Arc de cercle PARFAIT (rayon constant 130px, pas d'ellipse) :
	   le cercle est ancré au bas du badge ; sa partie haute est
	   invisible car le header blanc est derrière. Creux limité à 42px. */
	clip-path: circle(130px at 50% calc(100% - 130px));
}
.site-branding .custom-logo,
.site-branding .custom-logo-link img { max-height: 62px; width: auto; }
.custom-logo-link { display: inline-flex; }

.main-navigation { display: flex; align-items: center; }
.nav-menu {
	list-style: none; display: flex; align-items: center; gap: 26px;
	margin: 0; padding: 0;
}
.nav-menu a {
	color: var(--ink); font-weight: 600; font-size: 14px;
	letter-spacing: .04em; text-transform: uppercase; padding: 6px 0;
	position: relative;
}
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a { color: var(--orange); }
.nav-menu a:hover { color: var(--orange); }
.nav-menu a::after {
	content: ""; position: absolute; left: 0; bottom: -6px;
	width: 0; height: 3px; background: var(--orange); border-radius: 3px;
	transition: width .2s ease;
}
.nav-menu a:hover::after,
.nav-menu .current-menu-item > a::after,
.nav-menu .current_page_item > a::after { width: 100%; }
.nav-menu__sep { border-left: 1px solid var(--line); padding-left: 26px; }

.header-search { margin-left: auto; }
.search-form { display: flex; align-items: center; position: relative; }
.search-field {
	border: 1px solid var(--line); border-radius: 26px;
	padding: 11px 48px 11px 18px; font-family: var(--font); font-size: 14px;
	width: 240px; background: #fafafa; outline: none;
}
.search-field:focus { border-color: var(--orange); background: #fff; }
/* Même correction que .newsletter-submit (contraste du blanc sur l'orange) :
   PageSpeed ne l'a pas signalé parce que la recherche est masquée sous 900 px
   et qu'un élément non affiché échappe à l'audit — le défaut existe pourtant
   à l'identique sur ordinateur. */
.search-submit {
	position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
	width: 38px; height: 38px; border: 0; border-radius: 50%;
	background: var(--orange-acc); color: #fff; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.search-submit:hover { background: var(--orange-dark); }

.menu-toggle { display: none; }
.search-toggle { display: none; }

/* ---------- Front layout : populaires à gauche, catégories + collection à droite ---------- */
.front-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 44px;
	padding-top: 10px; padding-bottom: 60px;
	align-items: start;
}

/* ---------- Hero (full-bleed photo + gradient overlay, flush under header) ---------- */
.hero {
	position: relative;
	display: flex; align-items: center;
	background: #2f3033; color: #fff;
	overflow: hidden; min-height: 470px;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Intensité pilotée par le Personnaliseur (--hero-overlay, 0 à .85).
   Avec la valeur par défaut .55, le dégradé reproduit exactement l'original. */
.hero { --hero-overlay: .55; }
.hero__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg,
		rgba(38, 39, 41, .97) 0%,
		rgba(38, 39, 41, .92) 30%,
		rgba(38, 39, 41, .45) 55%,
		rgba(38, 39, 41, 0) 78%);
	background: linear-gradient(90deg,
		rgba(38, 39, 41, calc(var(--hero-overlay) + .42)) 0%,
		rgba(38, 39, 41, calc(var(--hero-overlay) + .37)) 30%,
		rgba(38, 39, 41, calc(var(--hero-overlay) * .82)) 55%,
		rgba(38, 39, 41, 0) 78%);
}
.hero__content {
	position: relative; z-index: 2;
	display: flex; flex-direction: column; justify-content: center;
	max-width: min(640px, 100%);
	padding: 70px 44px;
	/* aligne le texte du héro sur la largeur du conteneur (max 1240px) */
	padding-left: max(24px, calc((100vw - 1240px) / 2 + 24px));
}
.hero__eyebrow { color: var(--gold); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px; }
.hero__title { font-size: 46px; font-weight: 800; line-height: 1.08; margin: 0 0 18px; text-transform: uppercase; }
.hero__text { color: #cfcfcf; font-size: 15px; margin: 0 0 22px; max-width: 44ch; }
.hero__meta { display: flex; align-items: center; gap: 0; margin-bottom: 26px; flex-wrap: wrap; color: #d8d8d8; font-size: 13px; }
.hero__meta .stars { margin-right: 18px; }
.hero__meta-item {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 0 18px; border-left: 1px solid rgba(255, 255, 255, .28);
}
.hero__btn { align-self: flex-start; text-transform: uppercase; letter-spacing: .05em; font-size: 14px; }
.hero__media-placeholder {
	width: 100%; height: 100%;
	background: linear-gradient(135deg, #3a3b3e, #52483f);
}

/* ---------- Sections ---------- */
.section { margin-top: 46px; }
/* flex-wrap : un titre long et un lien « Tout voir » (en white-space:nowrap)
   se comprimaient l'un l'autre sur écran étroit au lieu de passer à la ligne. */
.section__head, .sidebar-block__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.section__title {
	font-size: 20px; font-weight: 700; margin: 0 0 20px;
	position: relative; color: var(--ink);
	text-transform: uppercase; letter-spacing: .03em;
}
.section__head .section__title { margin: 0; }
.section__title::after {
	content: ""; display: block; width: 46px; height: 4px;
	background: var(--orange); border-radius: 4px; margin-top: 8px;
}
.section__tag, .sidebar-block__tag {
	font-size: 13px; color: var(--muted); font-weight: 500;
	display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}

/* ---------- Recipe grid & cards ---------- */
.recipe-grid { display: grid; gap: 22px; }
.recipe-grid--3 { grid-template-columns: repeat(3, 1fr); }
.recipe-grid--4 { grid-template-columns: repeat(4, 1fr); }
.recipe-grid--sidebar { grid-template-columns: 1fr; gap: 16px; }

.recipe-card {
	background: var(--card); border-radius: var(--radius);
	overflow: hidden; box-shadow: var(--shadow-sm);
	transition: transform .18s ease, box-shadow .18s ease;
	display: flex; flex-direction: column;
}
.recipe-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.recipe-card__thumb { display: block; aspect-ratio: 4 / 3; background: #e9e9e9; overflow: hidden; }
.recipe-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.recipe-card__placeholder {
	width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
	color: #bdbdbd; background: repeating-linear-gradient(45deg, #efefef, #efefef 12px, #e8e8e8 12px, #e8e8e8 24px);
}
.recipe-card__placeholder--demo { background: transparent; font-size: 44px; color: rgba(255,255,255,.9); }
.recipe-card--demo .recipe-card__thumb { display: flex; align-items: center; justify-content: center; }
.recipe-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.recipe-card__title { font-size: 16px; font-weight: 600; margin: 0; line-height: 1.3; }
.recipe-card__title a { color: var(--ink); }
.recipe-card__title a:hover { color: var(--orange); }
.recipe-card__meta { font-size: 12px; color: var(--muted); margin: 0; }
.recipe-card__footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 8px; }
/* Note moyenne sur la carte (visible seulement si la recette est notée) :
   elle pousse les actions à droite. */
.recipe-card__rating {
	margin-right: auto; display: inline-flex; align-items: center; gap: 3px;
	font-size: 13.5px; font-weight: 700; color: var(--ink);
	background: #fff7e6; border: 1px solid #f3e2b8; border-radius: 20px;
	padding: 3px 10px; line-height: 1.4;
}
.recipe-card__rating-star { color: var(--star); font-size: 14px; }
.recipe-card__rating-count { font-weight: 500; color: var(--muted); font-size: 12px; }
.recipe-card__actions { display: flex; gap: 6px; }

/* sidebar cards are horizontal */
.recipe-grid--sidebar .recipe-card { flex-direction: row; align-items: stretch; }
.recipe-grid--sidebar .recipe-card__thumb { width: 96px; flex: 0 0 96px; aspect-ratio: 1; }
.recipe-grid--sidebar .recipe-card__body { flex: 1; padding: 10px 12px; justify-content: center; }
.recipe-grid--sidebar .recipe-card__title { font-size: 14px; }

/* 44x44 : cible tactile confortable, partout et pas seulement sur écran
   tactile. À 32 px, deux boutons voisins (favori + partage) échouaient à
   l'audit « taille et espacement des zones cibles » — l'espacement se mesure
   depuis le bord de la cible, agrandir la cible écarte donc aussi les
   voisines. Les icônes gardent leur taille : c'est la zone qui grandit. */
.icon-btn {
	width: 44px; height: 44px; border: 1px solid var(--line);
	background: #fff; border-radius: 8px; color: var(--muted);
	cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
	transition: all .15s ease;
}
.icon-btn:hover { color: var(--orange); border-color: var(--orange); }

/* ---------- Stars ---------- */
.stars { display: inline-flex; gap: 1px; font-size: 15px; line-height: 1; }
.star--full { color: var(--star); }
.star--empty { color: #dcdcdc; }
.star--half { position: relative; color: #dcdcdc; }
.star--half::before { content: "★"; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: var(--star); }

/* ---------- Category grid ---------- */
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.category-card {
	background: #fff; border-radius: var(--radius); padding: 22px 14px;
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	box-shadow: var(--shadow-sm); color: var(--ink);
	transition: transform .16s ease, box-shadow .16s ease;
}
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: var(--orange); }
.category-card__icon { color: var(--gold); }
.category-card:nth-child(3n+2) .category-card__icon { color: var(--orange); }
.category-card:nth-child(3n) .category-card__icon { color: var(--teal); }
.category-card__label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; text-align: center; line-height: 1.3; }
.category-card__count { font-size: 11.5px; color: var(--muted); font-weight: 500; margin-top: -6px; }

/* ---------- Collection banner ---------- */
.collection-banner {
	display: block; border-radius: var(--radius); overflow: hidden;
	min-height: 190px; position: relative; box-shadow: var(--shadow-sm);
	background: linear-gradient(135deg, #c9722f, #8a3d1e);
	transition: transform .18s ease, box-shadow .18s ease;
}
/* Sans lien renseigné, le bandeau reste informatif : pas d'effet cliquable. */
.collection-banner:not(.collection-banner--static):hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.collection-banner__media { position: absolute; inset: 0; }
.collection-banner__media img { width: 100%; height: 100%; object-fit: cover; }
.collection-banner__overlay {
	position: absolute; inset: 0; padding: 30px 34px;
	display: flex; flex-direction: column; justify-content: flex-end;
	background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.6));
	color: #fff;
}
/* Éléments en ligne dans le balisage (le bandeau peut être un <a>) :
   il faut les repasser en bloc. */
.collection-banner__title { display: block; font-size: 26px; font-weight: 800; margin: 0 0 6px; text-transform: uppercase; line-height: 1.15; }
.collection-banner__text { display: block; margin: 0; font-size: 14px; color: #f0f0f0; }

/* ---------- Sidebar ---------- */
/* .front-aside est la classe réellement posée par front-page.php ;
   .front-sidebar est conservée pour d'éventuels gabarits personnalisés.
   Pas de `position: sticky` ici : la colonne (catégories + collection +
   widgets) dépasse souvent la hauteur de l'écran, auquel cas l'adhérence ne
   produit rien de bon. */
.front-aside,
.front-sidebar { display: flex; flex-direction: column; gap: 28px; }
.sidebar-block { background: #fff; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
.sidebar-block__title { font-size: 16px; font-weight: 700; margin: 0; }
.sidebar-block__head { margin-bottom: 16px; }
.sidebar-block .recipe-card { box-shadow: none; border: 1px solid var(--line); }

/* ---------- Footer ---------- */
.site-footer { background: #e9e9e9; margin-top: 40px; }
.site-footer__inner {
	display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 40px;
	padding-top: 46px; padding-bottom: 40px;
}
.footer-heading { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 16px; color: var(--ink); }
.footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-menu a { color: var(--ink); font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.footer-menu a:hover { color: var(--orange); }

.social-links { display: flex; gap: 12px; }
.social-link {
	width: 40px; height: 40px; border-radius: 50%;
	background: #fff; color: var(--teal);
	display: inline-flex; align-items: center; justify-content: center;
	transition: all .16s ease;
}
.social-link:hover { background: var(--orange); color: #fff; transform: translateY(-2px); }

.newsletter-form { display: flex; position: relative; max-width: 320px; }
.newsletter-input {
	flex: 1; border: 1px solid #d5d5d5; border-radius: 26px;
	padding: 12px 52px 12px 18px; font-family: var(--font); font-size: 14px; outline: none;
}
.newsletter-input:focus { border-color: var(--orange); }
/* Fond --orange-acc et non --orange : le bouton porte un NOM accessible
   (aria-label « S'inscrire », footer.php), les outils d'audit le traitent donc
   comme un élément textuel et lui appliquent le seuil de 4,5:1. Blanc sur
   #e94f2e ne donne que 3,73:1 — c'est le second échec de contraste relevé par
   PageSpeed. La variante assombrie de la même teinte monte à 5,04:1 : la
   marque ne bouge pas, le contraste passe. */
.newsletter-submit {
	position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
	width: 40px; height: 40px; border: 0; border-radius: 50%;
	background: var(--orange-acc); color: #fff; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.newsletter-submit:hover { background: var(--orange-dark); }

.site-footer__bottom { background: #dedede; padding: 16px 0; }
/* Fond #dedede : meme --muted a #6b6b6b n'y donne que 3,96:1. Couleur
   dediee, 5,13:1 — plutot que d'eclaircir un fond qui structure le pied. */
.site-footer__bottom p { margin: 0; text-align: center; font-size: 13px; color: #5a5a5a; }

/* ---------- Generic pages ---------- */
.page-wrap { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 34px; padding: 34px 24px 60px; }
.page-wrap--full { display: block; }
.page-title { font-size: 30px; font-weight: 800; margin: 0 0 24px; }
.archive-header { margin: 30px 0 24px; }
.archive-header .page-title { margin-bottom: 10px; }

/* ---------- Fil d'Ariane ---------- */
/* Deux rendus possibles pour un seul habillage : le fil de Rank Math
   (`.breadcrumb--plugin`, balisage imposé par le plugin) et le repli natif
   (`ol.breadcrumb__list`). Les règles ci-dessous ciblent donc le conteneur,
   jamais la structure interne — sauf pour la liste, qui est la nôtre. */
.breadcrumb {
	/* Marge haute calée sur le DÉBORDEMENT DU LOGO : le badge de l'en-tête
	   descend 42 px sous la barre (voir .site-branding), et les 34 px de
	   `.page-wrap` ne suffisaient pas à en sortir — « Accueil » se retrouvait
	   collé au creux du logo. 20 px de plus placent le fil 12 px sous la
	   pointe du badge. La règle tombe à 900 px, où le badge ne déborde plus. */
	margin: 20px 0 14px;
	font-size: 13.5px;
	color: var(--muted);
	/* Le fil est un repère, pas un titre : il ne doit pas concurrencer le h1
	   qui le suit — d'où la taille réduite et la couleur sourde. */
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover,
.breadcrumb a:focus-visible { color: var(--orange-acc); text-decoration: underline; }

/* Rank Math enveloppe son fil dans un <p> : sans cette remise à zéro, ses
   marges par défaut (1em au-dessus ET au-dessous) doublent l'espacement et
   décalent le fil par rapport au repli natif. */
.breadcrumb--plugin p { margin: 0; }
.breadcrumb--plugin .separator { color: var(--sep); }
.breadcrumb--plugin .last { color: var(--ink); font-weight: 500; }

.breadcrumb__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 8px;
}
.breadcrumb__item { display: flex; align-items: center; gap: 8px; }
/* Séparateur en pseudo-élément : aucun nœud de texte parasite dans la liste,
   donc rien de superflu à lire pour un lecteur d'écran. */
.breadcrumb__item + .breadcrumb__item::before {
	content: "\203A";
	color: var(--sep);
	font-size: 15px;
	line-height: 1;
}
.breadcrumb__item--current { color: var(--ink); font-weight: 500; min-width: 0; }
/* Un titre de recette peut être long : sur une seule ligne il pousserait le
   fil hors de l'écran. On le tronque plutôt que de laisser déborder. */
.breadcrumb__item--current > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

/* Le fil ouvre désormais la page : le bloc qui suit n'a plus à réserver la
   respiration du haut, sinon elle est comptée deux fois.
   Combinateur `~` et non `+` : le repli natif glisse son <script> JSON-LD
   entre le fil et le contenu, ce qui suffirait à faire échouer `+`. */
.breadcrumb ~ .single-recipe { padding-top: 0; }
.breadcrumb ~ .archive-header { margin-top: 0; }

/* Sous 900 px le badge du logo ne déborde plus (clip-path retiré, marge
   négative annulée) : le fil n'a plus rien à contourner. */
@media (max-width: 900px) {
	.breadcrumb { margin-top: 6px; }
}

@media (max-width: 640px) {
	.breadcrumb { font-size: 12.5px; }
	/* Rank Math rend un simple <p> : avec un titre de recette long, il se
	   replie sur deux lignes et pousse la recette vers le bas. On le ramène
	   sur une seule ligne, tronquée — le titre complet est de toute façon en
	   h1 juste en dessous. */
	.breadcrumb--plugin p {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	/* Sur mobile, le fil tient sur une ligne qui défile plutôt que de se
	   replier sur trois : il reste un repère discret, pas un bloc. */
	.breadcrumb__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.breadcrumb__list::-webkit-scrollbar { display: none; }
	.breadcrumb__item { white-space: nowrap; }
}

/* Description de catégorie : c'est souvent le seul texte éditorial d'une page
   de silo, elle mérite mieux qu'un paragraphe nu. */
.archive-description {
	max-width: 780px; color: var(--muted); font-size: 15px; line-height: 1.7;
	margin: 0 0 12px;
}
.archive-description p { margin: 0 0 10px; }
.archive-description p:last-child { margin-bottom: 0; }
.archive-count { margin: 0; font-size: 13.5px; color: var(--muted); font-weight: 500; }
.notice { background: #fff; border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); color: var(--muted); }

.single-recipe { padding-top: 34px; padding-bottom: 60px; max-width: 860px; }
.single-recipe__cat { color: var(--orange-acc); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; margin: 0 0 8px; }
.single-recipe__title { font-size: 36px; font-weight: 800; margin: 0 0 16px; }
.single-recipe__meta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; color: var(--muted); font-size: 14px; margin-bottom: 26px; }
.single-recipe__meta .meta-item { display: inline-flex; align-items: center; gap: 6px; }
/* Réservation d'espace AVANT l'arrivée de l'image (CLS).
   `recette360_hero` est recadrée en 900x650, soit exactement 18/13 : la boîte
   prend sa place définitive dès le premier rendu, que l'image arrive tout de
   suite, tardivement, ou jamais.
   Sans ce ratio, la réservation reposait UNIQUEMENT sur les attributs
   width/height du <img> — or un différé d'image (Perfmatters et consorts)
   remplace `src` par un placeholder, ce qui les rend inopérants : l'image
   n'occupe alors qu'une ligne de rien, puis pousse tout le contenu vers le
   bas en se chargeant. C'est le décalage relevé par PageSpeed. */
.single-recipe__media {
	aspect-ratio: 18 / 13;
	background: #e9e9e9;
	border-radius: var(--radius); overflow: hidden; margin-bottom: 28px; box-shadow: var(--shadow);
}
.single-recipe__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Bandeau d'informations, posé sur la photo ----------
   Note, temps et difficulté quittent la ligne d'attribution pour le bas du
   visuel : c'est là que se porte le regard, et c'est là qu'elles décident.
   Aucun impact CLS — le bandeau est en position absolue dans un conteneur
   dont la hauteur est déjà réservée par l'aspect-ratio de l'image. */
.single-recipe__visual { position: relative; margin-bottom: 28px; }
.single-recipe__visual .single-recipe__media { margin-bottom: 0; }

/* Voile sombre en bas du visuel. Les pastilles sont opaques, donc lisibles
   sans lui, mais elles flotteraient sur la photo sans y être rattachées — et
   sur une image claire (les desserts le sont presque toujours) leur bord
   blanc se confondrait avec le fond. */
.single-recipe__visual::after {
	content: "";
	position: absolute; inset: auto 0 0 0; height: 45%;
	background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
	border-radius: 0 0 var(--radius) var(--radius);
	pointer-events: none;
}

.recipe-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.single-recipe__visual .recipe-facts {
	position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2;
}

.recipe-fact {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 8px 14px; border-radius: 999px;
	background: rgba(255, 255, 255, .95);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--ink); font-size: 13.5px; font-weight: 500; line-height: 1;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.recipe-fact svg { color: var(--teal); flex-shrink: 0; width: 16px; height: 16px; }
.recipe-fact--rating .stars { font-size: 14px; letter-spacing: .5px; }
.recipe-fact__value { font-weight: 700; }
.recipe-fact__count { color: var(--muted); font-weight: 400; }
/* Le filet sépare l'action de la donnée : « Noter » est un bouton déguisé,
   pas la suite de la phrase « 5,0/5 2 votes ». */
.recipe-fact__cta {
	color: var(--orange-acc); font-weight: 600;
	padding-left: 9px; border-left: 1px solid var(--line);
}
.recipe-fact__cta:hover { color: var(--orange-dark); }

/* Recette sans image mise en avant : mêmes pastilles, posées sur le fond de
   page — d'où l'ombre douce du thème plutôt que celle, appuyée, qu'exige un
   fond photographique. */
.recipe-facts--bare { margin: 0 0 28px; }
.recipe-facts--bare .recipe-fact { box-shadow: var(--shadow-sm); background: #fff; }

/* Sous 640 px le bandeau descend SOUS la photo au lieu de s'y poser : sur une
   image de ~330 px de large, trois pastilles se replient sur deux rangées et
   recouvrent la moitié du plat — exactement au moment où c'est lui qui doit
   convaincre. Les informations restent au même endroit dans la lecture, elles
   changent simplement de fond. */
@media (max-width: 640px) {
	.single-recipe__visual::after { display: none; }
	.single-recipe__visual .recipe-facts { position: static; margin-top: 12px; }
	.single-recipe__visual .recipe-fact { background: #fff; box-shadow: var(--shadow-sm); }
	.recipe-fact { font-size: 12.5px; padding: 7px 12px; }
}
.single-recipe__content { font-size: 16px; }
.single-recipe__content img { border-radius: var(--radius-sm); }
.single-recipe__footer { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
/* flex-wrap indispensable : sans lui, les trois boutons débordent
   horizontalement dès qu'un écran descend sous ~420 px. */
.single-recipe__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.post-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.post-card__body { padding: 16px; }
.post-card__title { font-size: 18px; margin: 0 0 8px; }

.pagination { margin-top: 34px; }
.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination a, .pagination .current {
	display: inline-flex; padding: 9px 15px; border-radius: 8px;
	background: #fff; box-shadow: var(--shadow-sm); font-weight: 600; color: var(--ink);
}
.pagination .current { background: var(--orange); color: #fff; }

/* ---------- Article (single) — design poussé ---------- */
.cat-pill {
	display: inline-block; background: var(--orange-acc); color: #fff;
	font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
	padding: 6px 16px; border-radius: 20px; margin-bottom: 14px;
}
.cat-pill:hover { background: var(--orange-dark); color: #fff; }

.single-recipe { margin: 0 auto; }
.single-recipe__header { text-align: left; }

/* Typographie riche du contenu */
.entry-content { font-size: 17px; line-height: 1.75; }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 {
	font-size: 26px; font-weight: 700; margin-top: 1.8em;
	padding-left: 16px; border-left: 5px solid var(--orange); border-radius: 2px;
}
.entry-content h3 { font-size: 21px; font-weight: 600; margin-top: 1.5em; color: var(--teal); }
.entry-content ul { padding-left: 6px; list-style: none; }
.entry-content ul li { position: relative; padding-left: 26px; margin-bottom: 8px; }
.entry-content ul li::before {
	content: ""; position: absolute; left: 0; top: .5em;
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--orange);
}
.entry-content ol { padding-left: 20px; counter-reset: steps; list-style: none; }
.entry-content ol li {
	position: relative; padding-left: 44px; margin-bottom: 14px; counter-increment: steps;
}
.entry-content ol li::before {
	content: counter(steps); position: absolute; left: 0; top: 0;
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--teal); color: #fff;
	font-weight: 700; font-size: 14px;
	display: flex; align-items: center; justify-content: center;
}
.entry-content blockquote {
	background: #fff; border-left: 5px solid var(--gold);
	padding: 18px 22px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-style: italic; color: #555; box-shadow: var(--shadow-sm);
	margin-left: 0; margin-right: 0;
}
.entry-content img { border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.entry-content a { text-decoration: underline; text-underline-offset: 3px; }
.entry-content table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.entry-content th { background: var(--teal); color: #fff; padding: 10px 14px; text-align: left; }
.entry-content td { padding: 10px 14px; border-top: 1px solid var(--line); }

/* Recettes similaires */
.related { max-width: 860px; margin: 44px auto 0; }

/* Les photos téléversées ne sont pas forcément carrées : recadrage propre. */
img.avatar { object-fit: cover; }

/* Dimensions EXPLICITES sur les avatars, et pas seulement les attributs
   width/height du <img>.
   `get_avatar()` produit bien width="30" height="30", mais la règle globale
   `img { height: auto }` (ligne 60) fait dépendre la hauteur rendue de la
   taille INTRINSÈQUE du fichier. Dès qu'un différé d'image remplace `src` par
   un placeholder, cette taille vaut ~1 px : l'avatar n'occupe rien, puis saute
   à sa taille réelle une fois chargé — d'où le « élément d'image de taille
   inconnue » de PageSpeed et le décalage qui l'accompagne.
   Fixer la taille en CSS rend le rendu indépendant de ce que fait, ou ne fait
   pas, un plugin de chargement différé.
   flex-shrink sur la signature : c'est un conteneur inline-flex (ligne 401),
   sans quoi l'avatar se laisse comprimer sur les écrans étroits. */
.byline-avatar { width: 30px; height: 30px; flex-shrink: 0; }
.author-box__avatar { width: 96px; height: 96px; }
.comment-list .avatar { width: 44px; height: 44px; }

/* Signature « Publié par » dans l'en-tête de la recette */
.meta-item--author .byline-avatar { border-radius: 50%; }
.meta-item--author a { color: var(--teal); font-weight: 600; }
.meta-item--author a:hover { color: var(--orange); }

/* Bloc auteur sous la recette */
.author-box {
	display: flex; gap: 20px; align-items: flex-start;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	padding: 24px; margin-top: 30px;
}
.author-box__avatar { border-radius: 50%; flex-shrink: 0; }
.author-box__label {
	display: block; font-size: 12px; color: var(--muted);
	text-transform: uppercase; letter-spacing: .06em;
}
.author-box__name { margin: 2px 0 8px; font-size: 20px; font-weight: 700; }
.author-box__name a { color: var(--ink); }
.author-box__name a:hover { color: var(--orange); }
.author-box__bio { margin: 0 0 10px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.author-box__more { font-size: 14px; font-weight: 600; color: var(--orange-acc); }

@media (max-width: 520px) {
	.author-box { flex-direction: column; align-items: center; text-align: center; }
}

/* Navigation précédent / suivant.
   Double sélecteur : `.post-nav` (classe du thème) ET `.post-navigation`
   (classe WordPress par défaut, toujours présente) — le bloc reste stylé
   même si la classe personnalisée n'est pas transmise. */
.post-nav,
.post-navigation { max-width: 860px; margin: 36px auto 0; }
.post-nav .nav-links,
.post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.post-nav .nav-links a,
.post-navigation .nav-links a {
	display: block; height: 100%; background: var(--card); border-radius: var(--radius);
	padding: 16px 20px; box-shadow: var(--shadow-sm);
	border-left: 3px solid var(--orange);
	transition: transform .15s ease, box-shadow .15s ease;
}
.post-nav .nav-links a:hover,
.post-navigation .nav-links a:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.post-nav .nav-next,
.post-navigation .nav-next { text-align: right; }
.post-nav .nav-next a,
.post-navigation .nav-next a { border-left: 0; border-right: 3px solid var(--orange); }
/* Un seul lien (première / dernière recette) : la carte suivante occupe la 2e colonne. */
.post-nav .nav-next:only-child,
.post-navigation .nav-next:only-child { grid-column: 2; }
.post-nav__label { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.post-nav__title { display: block; font-weight: 600; color: var(--ink); font-size: 15px; line-height: 1.4; }
.post-nav .nav-links a:hover .post-nav__title,
.post-navigation .nav-links a:hover .post-nav__title { color: var(--orange); }
/* Repli : navigation rendue sans les spans du thème (titre nu dans le lien). */
.post-navigation .nav-links a { color: var(--ink); font-weight: 600; font-size: 15px; }

/* Commentaires */
.single-recipe__comments { max-width: 860px; margin: 44px auto 0; }
.comments-area { background: #fff; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); }
.comments-title { font-size: 20px; margin: 0 0 20px; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list .comment { padding: 16px 0; border-bottom: 1px solid var(--line); }
.comment-list .avatar { border-radius: 50%; }
.comment-reply-link { font-size: 13px; font-weight: 600; color: var(--orange-acc); }
.comment-form input[type="text"], .comment-form input[type="email"],
.comment-form input[type="url"], .comment-form textarea {
	width: 100%; border: 1px solid var(--line); border-radius: 10px;
	padding: 12px 14px; font-family: var(--font); font-size: 15px;
}
.comment-form input[type="submit"], .comment-form .submit {
	background: var(--orange); color: #fff; border: 0; border-radius: 26px;
	padding: 12px 28px; font-weight: 600; font-family: var(--font); cursor: pointer;
}
.comment-form input[type="submit"]:hover { background: var(--orange-dark); }

/* Message affiché à la place du formulaire quand un compte est requis. */
.comment-login-required {
	margin: 0; padding: 18px 22px;
	background: #fdf6f3; border: 1px solid #f2ddd4; border-radius: var(--radius-sm);
	font-size: 14.5px; line-height: 1.65; color: var(--muted);
}
.comment-login-required a { font-weight: 700; }

/* Rappel de la règle au-dessus de la zone de saisie. */
.comment-notes { font-size: 13px; color: var(--muted); margin: 0 0 14px; }

/* ---------- Header favorites link ---------- */
.header-fav {
	position: relative; width: 42px; height: 42px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--teal); background: #fafafa; border: 1px solid var(--line);
	flex: 0 0 auto; transition: all .16s ease;
}
.header-fav:hover { color: var(--orange); border-color: var(--orange); }
.header-fav__count {
	position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
	padding: 0 5px; border-radius: 9px; background: var(--orange); color: #fff;
	font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* ---------- Favorite active state ---------- */
.icon-btn.is-active { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn--ghost.js-fav.is-active { background: var(--orange); border-color: var(--orange); color: #fff; }

/* ---------- Share popover ---------- */
.recipe-card__actions, .single-recipe__actions { position: relative; }
.share-popover {
	position: absolute; z-index: 60; bottom: calc(100% + 8px); right: 0;
	background: #fff; border: 1px solid var(--line); border-radius: 12px;
	box-shadow: var(--shadow); padding: 6px; min-width: 180px;
	display: flex; flex-direction: column; gap: 2px;
	animation: pop-in .14s ease;
}
@keyframes pop-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.share-popover__item {
	display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px;
	color: var(--ink); font-weight: 500;
}
.share-popover__item:hover { background: #f4f4f4; color: var(--orange); }
.single-recipe__actions .share-popover { bottom: auto; top: calc(100% + 8px); left: 0; right: auto; }

/* ---------- Favorites page ---------- */
.favorites-app { margin-top: 10px; }
.favorites-loading { color: var(--muted); padding: 30px 0; }
.favorites-empty {
	background: #fff; border-radius: var(--radius); padding: 46px 30px;
	text-align: center; box-shadow: var(--shadow-sm);
}
.favorites-empty p { color: var(--muted); margin: 0 0 20px; font-size: 16px; }

/* ---------- Performance & UX ---------- */

/* Scroll fluide natif (remplace le JS → moins d'écouteurs, meilleur INP).
   scroll-padding compense le header sticky pour les ancres. */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }

/* `content-visibility` était déclaré ICI *et* plus bas, sur deux listes de
   sélecteurs différentes — deux règles concurrentes pour un même mécanisme,
   dont la seconde gagnait sur le pied de page seulement. Tout est désormais
   regroupé en un seul endroit (voir « Rendu différé » en fin de feuille) :
   une réserve de hauteur ne peut pas être maintenue juste si sa définition
   est éparpillée. */

/* Focus clavier visible partout (accessibilité) */
:focus-visible {
	outline: 3px solid var(--orange);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Retour visuel au clic */
.btn:active, .icon-btn:active, .category-card:active { transform: scale(.97); }

/* Cibles tactiles sur écrans tactiles.
   `.icon-btn` n'y figure plus : la règle fixait 40 px, ce qui RÉTRÉCIRAIT
   désormais les boutons passés à 44 px — l'inverse de son intention. */
@media (pointer: coarse) {
	.nav-menu a { padding-top: 4px; padding-bottom: 4px; }
}

/* Bouton retour en haut */
.back-top {
	position: fixed; right: 18px; bottom: 18px; z-index: 90;
	width: 46px; height: 46px; border: 0; border-radius: 50%;
	background: var(--orange); color: #fff;
	display: flex; align-items: center; justify-content: center;
	box-shadow: var(--shadow); cursor: pointer;
	opacity: 0; transform: translateY(12px); pointer-events: none;
	transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.back-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.back-top:hover { background: var(--orange-dark); }

/* Respect de la préférence « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
	.front-layout { grid-template-columns: 1fr; }
	.recipe-grid--4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
	/* Ligne 1 : logo à gauche — favoris + hamburger à droite.
	   Ligne 2 : recherche pleine largeur.
	   Le menu s'ouvre en panneau sous le header. */
	.site-header__inner {
		flex-wrap: wrap; row-gap: 12px; column-gap: 10px;
		min-height: auto; padding-top: 12px; padding-bottom: 12px;
	}
	.site-branding {
		order: 1; align-self: center; margin-bottom: 0;
		padding: 0; box-shadow: none; background: transparent;
		clip-path: none;
	}
	.site-branding .custom-logo,
	.site-branding .custom-logo-link img { max-height: 48px; }

	.header-fav { order: 2; margin-left: auto; }

	/* Loupe : ouvre la recherche en panneau */
	.search-toggle {
		order: 3;
		display: inline-flex; width: 44px; height: 42px;
		background: #fff; border: 1px solid var(--line); border-radius: 10px;
		align-items: center; justify-content: center; cursor: pointer;
		color: var(--ink);
	}
	.search-toggle[aria-expanded="true"] { color: var(--orange); border-color: var(--orange); }

	.main-navigation { order: 4; position: static; }
	.menu-toggle {
		display: inline-flex; width: 44px; height: 42px;
		background: #fff; border: 1px solid var(--line); border-radius: 10px;
		align-items: center; justify-content: center; cursor: pointer;
	}
	.menu-toggle__bar, .menu-toggle__bar::before, .menu-toggle__bar::after {
		content: ""; display: block; width: 20px; height: 2px; background: var(--ink); position: relative;
	}
	.menu-toggle__bar::before { position: absolute; top: -6px; }
	.menu-toggle__bar::after { position: absolute; top: 6px; }

	/* Recherche masquée par défaut, ouverte en panneau sous le header */
	.header-search {
		display: none;
		position: absolute; top: 100%; left: 0; right: 0;
		background: #fff; padding: 12px 20px 16px;
		border-top: 1px solid var(--line);
		box-shadow: 0 18px 28px -12px rgba(0, 0, 0, .18);
		margin-left: 0;
	}
	.header-search.is-open { display: block; }
	.search-field { width: 100%; }

	/* Menu déroulant plein écran sous le header */
	.nav-menu {
		display: none; flex-direction: column; align-items: stretch; gap: 0;
		position: absolute; top: 100%; left: 0; right: 0;
		background: #fff; padding: 6px 20px 14px;
		box-shadow: 0 18px 28px -12px rgba(0, 0, 0, .18);
		border-top: 1px solid var(--line);
	}
	.nav-menu.is-open { display: flex; }
	.nav-menu li { width: 100%; padding: 11px 0; border-bottom: 1px solid var(--line); }
	.nav-menu li:last-child { border-bottom: 0; }
	.nav-menu__sep { border-left: 0; padding-left: 0; }
	.nav-menu a::after { display: none; }
}

/* Barre d'admin WordPress : décale le header sticky */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .site-header { top: 46px; }
}

@media (max-width: 780px) {
	.hero { min-height: 380px; }
	.hero__media::after {
		background: linear-gradient(180deg, rgba(38, 39, 41, .55) 0%, rgba(38, 39, 41, .88) 100%);
	}
	.hero__content { padding-top: 46px; padding-bottom: 46px; }
	.hero__title { font-size: 30px; }
	.recipe-grid--3, .recipe-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.category-grid { grid-template-columns: repeat(3, 1fr); }
	.site-footer__inner { grid-template-columns: 1fr; gap: 28px; }
	.page-wrap { grid-template-columns: 1fr; }
	.post-nav .nav-links,
	.post-navigation .nav-links { grid-template-columns: 1fr; }
	.post-nav .nav-next,
	.post-navigation .nav-next { text-align: left; }
	.post-nav .nav-next a,
	.post-navigation .nav-next a { border-right: 0; border-left: 3px solid var(--orange); }
	.post-nav .nav-next:only-child,
	.post-navigation .nav-next:only-child { grid-column: auto; }
}

@media (max-width: 520px) {
	.container { padding: 0 16px; }
	.recipe-grid--3, .recipe-grid--4 { grid-template-columns: 1fr; }
	.category-grid { grid-template-columns: repeat(2, 1fr); }
	.hero__content { padding: 30px 22px; }
	.hero__title { font-size: 26px; }
}

/* ---------- Print ---------- */
@media print {
	.site-header, .site-footer, .no-print, .single-recipe__actions,
	.share-popover, .header-fav, .comments-area, .icon-btn, .back-top,
	.post-navigation, .rating-box, .next-recipe { display: none !important; }
	body { background: #fff; color: #000; }
	.single-recipe { max-width: 100%; padding: 0; }
	.single-recipe__title { font-size: 26pt; }
	/* Le ratio réservé à l'écran n'a plus lieu d'être sur papier : l'image y est
	   déjà chargée, et on veut qu'elle se contente de sa hauteur réelle. */
	.single-recipe__media { box-shadow: none; max-height: 320px; aspect-ratio: auto; background: none; }
	.single-recipe__media img { max-height: 320px; width: auto; height: auto; margin: 0 auto; }
	/* Le bandeau repasse sous la photo : imprimé par-dessus, il masquerait le
	   plat, et le voile sombre consommerait de l'encre pour rien. */
	.single-recipe__visual::after { display: none; }
	.single-recipe__visual .recipe-facts { position: static; margin-top: 10px; }
	.recipe-fact { background: none; box-shadow: none; border: 1px solid #ccc; }
	/* Le bloc de vote (.rating-box) est masqué plus haut : le lien qui y mène
	   n'aurait plus de cible. */
	.recipe-fact__cta { display: none; }
	.single-recipe__content { font-size: 12pt; }
	a { color: #000; text-decoration: none; }
	.stars .star--empty { color: #ccc; }
	.single-recipe::after {
		content: "www.recette360.com"; display: block; margin-top: 20px;
		padding-top: 10px; border-top: 1px solid #ccc; font-size: 10pt; color: #666;
	}
}

/* ---------- Recherche : suggestions instantanées + filtres (moteur schéma Recipe) ---------- */
.search-form--suggest { position: relative; }

.search-suggest {
	position: absolute; top: calc(100% + 8px); left: 0; right: 0;
	background: var(--card); border-radius: var(--radius-sm);
	box-shadow: var(--shadow); z-index: 80; overflow: hidden;
	border: 1px solid var(--line);
}
.search-suggest__item {
	display: flex; gap: 10px; align-items: center;
	padding: 8px 12px; color: var(--ink); text-decoration: none;
}
.search-suggest__item:hover,
.search-suggest a.is-active { background: var(--bg); color: var(--ink); }
.search-suggest__item img,
.search-suggest__ph {
	width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none;
	display: flex; align-items: center; justify-content: center; background: var(--bg);
}
.search-suggest__body { display: flex; flex-direction: column; min-width: 0; }
.search-suggest__title {
	font-weight: 600; font-size: 13.5px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-suggest__meta { font-size: 12px; color: var(--muted); }
.search-suggest__all {
	display: block; padding: 10px 12px; text-align: center;
	font-weight: 600; font-size: 13px; color: var(--orange-acc);
	border-top: 1px solid var(--line);
}
.search-suggest__all:hover { color: var(--orange-dark); background: var(--bg); }
.search-suggest__empty { padding: 12px; margin: 0; font-size: 13px; color: var(--muted); }

.search-filters {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
	margin: 18px 0 26px; padding: 14px;
	background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.search-filters select,
.search-filters input[type="search"],
.search-filters input[type="text"] {
	padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
	font-family: var(--font); font-size: 13.5px; background: #fafafa; outline: none;
	max-width: 100%;
}
.search-filters select:focus,
.search-filters input:focus { border-color: var(--orange); background: #fff; }
.search-filters__q { flex: 1 1 180px; }
.search-filters__sans { flex: 0 1 170px; }

.search-result-count { color: var(--muted); font-size: 14px; margin: -8px 0 18px; }

@media (max-width: 640px) {
	.search-filters select,
	.search-filters input[type="search"],
	.search-filters input[type="text"],
	.search-filters .btn { width: 100%; flex: 1 1 100%; }
}

/* ---------- Maillage interne : lien contextuel + fiche « À découvrir ensuite » ---------- */
.r360-inline-link {
	color: var(--orange-acc); font-weight: 600;
	text-decoration: underline; text-decoration-color: rgba(233, 79, 46, .35);
	text-underline-offset: 3px;
}
.r360-inline-link:hover { color: var(--orange-dark); text-decoration-color: currentColor; }

.next-recipe { margin: 28px 0; }
.next-recipe__link {
	display: flex; align-items: center; gap: 16px;
	background: var(--card); border: 1px solid var(--line);
	border-left: 4px solid var(--orange);
	border-radius: var(--radius); box-shadow: var(--shadow-sm);
	padding: 14px 18px 14px 14px; color: var(--ink);
	transition: box-shadow .18s ease, transform .18s ease;
}
.next-recipe__link:hover { color: var(--ink); box-shadow: var(--shadow); transform: translateY(-2px); }
.next-recipe__thumb img,
.next-recipe__ph {
	width: 84px; height: 84px; border-radius: var(--radius-sm); object-fit: cover; flex: none;
	display: flex; align-items: center; justify-content: center;
	background: var(--bg); font-size: 30px;
}
.next-recipe__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.next-recipe__label {
	font-size: 11px; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--orange-acc);
}
.next-recipe__title { font-weight: 700; font-size: 16px; line-height: 1.35; }
.next-recipe__link:hover .next-recipe__title { color: var(--orange-dark); }
.next-recipe__meta {
	font-size: 13px; color: var(--muted);
	display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.next-recipe__meta svg { vertical-align: -3px; }
.next-recipe__arrow { font-size: 22px; color: var(--orange); flex: none; }

@media (max-width: 480px) {
	.next-recipe__thumb img, .next-recipe__ph { width: 64px; height: 64px; }
	.next-recipe__arrow { display: none; }
}

/* ---------- Newsletter : formulaire, honeypot, messages, pages de retour ---------- */
.nl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
/* Le pied de page a un fond CLAIR (.site-footer : #e9e9e9). Ces trois règles
   étaient écrites pour un fond sombre — blanc à 75 %, vert et saumon pâles —
   et le texte y était donc illisible. Couleurs reprises sur la palette du
   thème, lisibles sur clair. Les contextes sombres (bandeau teal de l'accueil,
   encart de lecture) gardent leurs propres surcharges plus bas. */
/* Couleur DÉDIÉE, et non --muted. Le gris sourd du thème (#6b6b6b) a été
   calibré sur blanc (5,33:1) et sur les fonds pâles des encarts ; sur le
   #e9e9e9 du pied il ne donne que 4,39:1, sous le seuil AA de 4,5:1 — c'est
   l'échec relevé par PageSpeed sur ce paragraphe précis. #5a5a5a y monte à
   5,68:1. C'est la couleur qu'utilise déjà .site-footer__bottom p, pour la
   même raison et sur un fond encore plus foncé : le pied de page a besoin
   d'un gris à lui, plus sombre que celui du corps du site. */
.newsletter-tagline { font-size: 13px; color: #5a5a5a; margin: 0 0 10px; }
.newsletter-msg {
	margin: 10px 0 0; font-size: 13px; font-weight: 600;
	color: var(--green-dark); line-height: 1.5;
}
.newsletter-msg.is-error { color: var(--orange-dark); }

.nl-result {
	background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm);
	text-align: center; padding: 56px 28px; margin: 30px auto; max-width: 560px;
}
.nl-result__emoji { font-size: 52px; line-height: 1; margin-bottom: 14px; }
.nl-result__title { margin: 0 0 10px; font-size: 26px; }
.nl-result__text { color: var(--muted); margin: 0 0 22px; }

/* ---------- Notation des recettes (bloc « Notez cette recette ») ---------- */
.rating-box {
	background: var(--card); border: 1px solid var(--line);
	border-radius: var(--radius); box-shadow: var(--shadow-sm);
	text-align: center; padding: 24px 20px; margin: 28px 0;
}
.rating-box__title { margin: 0 0 12px; font-size: 17px; }
.rating-box__stars { display: flex; justify-content: center; gap: 6px; }
.rating-box__star {
	background: none; border: 0; padding: 2px; cursor: pointer;
	font-size: 34px; line-height: 1; color: #d8d3ca;
	transition: transform .12s ease, color .12s ease;
}
.rating-box__star.is-hover,
.rating-box__star.is-active { color: var(--star); }
.rating-box__star:hover { transform: scale(1.18); }
.rating-box__star:disabled { cursor: default; }
.rating-box__star:disabled:hover { transform: none; }
.rating-box.is-voted .rating-box__star { opacity: .95; }
.rating-box__score { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); }
.rating-box__thanks { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--green-dark); }
.rating-box__thanks--error { color: var(--orange-dark); }
/* ---------- Note moyenne intégrée à la barre de méta (si notée) ----------
   Même langage visuel que les autres méta (« Publié par… », date) :
   aucun encadré, la note se fond dans la ligne. */
.meta-item--rating { display: inline-flex; align-items: center; gap: 7px; }
.meta-item--rating .stars { font-size: 15px; line-height: 1; letter-spacing: 1px; }
.meta-rating__value { color: var(--ink); font-weight: 700; }
.meta-rating__count { color: var(--muted); }
.meta-rating__cta { color: var(--orange-acc); font-weight: 600; }
.meta-rating__cta:hover { color: var(--orange-dark); }

/* =========================================================
   Page d'accueil — sections et raffinements
   ========================================================= */

/* ---------- Rythme vertical ----------
   La première section d'une colonne ne doit pas décoller du héro. */
.front-main > .section:first-child,
.front-aside > .section:first-child { margin-top: 34px; }
.section + .section { margin-top: 54px; }

/* Lien « Tout voir » aligné sur le titre de section. */
.section__more {
	font-size: 13px; font-weight: 600; color: var(--teal);
	white-space: nowrap; display: inline-flex; align-items: center; gap: 4px;
	transition: color .15s ease, gap .15s ease;
}
.section__more:hover { color: var(--orange); gap: 8px; }

/* ---------- Cartes : finitions ----------
   Léger zoom du visuel au survol : l'effet vient de l'image, la carte ne
   bouge plus que de quelques pixels — plus discret que l'ancien saut seul. */
.recipe-card__thumb img { transition: transform .35s ease; }
.recipe-card:hover .recipe-card__thumb img { transform: scale(1.045); }

/* Titres sur deux lignes maximum : les cartes d'une même rangée gardent des
   hauteurs comparables sans hauteur fixe. */
.recipe-card__title {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
/* La catégorie devient une pastille discrète plutôt qu'un texte nu. */
.recipe-card__meta {
	align-self: flex-start;
	background: #f4f2ee; border-radius: 20px; padding: 2px 10px;
	font-weight: 500; letter-spacing: .02em;
}
/* Le pied de carte est poussé en bas : alignement des actions sur la rangée. */
.recipe-card__body { flex: 1; }
.recipe-card__footer { margin-top: auto; padding-top: 10px; }

/* ---------- Accessibilité : focus visible ----------
   Absent jusqu'ici — la navigation au clavier ne montrait rien sur les
   cartes, les tuiles et les boutons ronds. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--teal);
	outline-offset: 2px;
	border-radius: 4px;
}
.hero a:focus-visible { outline-color: #fff; }

/* ---------- Widgets ----------
   Les deux zones (barre latérale, pied de page) étaient enregistrées mais
   n'avaient aucun style : tout widget ajouté s'affichait brut. */
.sidebar-widgets { display: flex; flex-direction: column; gap: 24px; margin-top: 34px; }
.widget {
	background: var(--card); border-radius: var(--radius);
	padding: 20px 22px; box-shadow: var(--shadow-sm);
}
.widget-title {
	font-size: 15px; font-weight: 700; margin: 0 0 14px;
	text-transform: uppercase; letter-spacing: .04em; color: var(--ink);
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.widget li:last-child { border-bottom: 0; padding-bottom: 0; }
.widget li a { color: var(--ink); }
.widget li a:hover { color: var(--orange); }
.widget select, .widget input[type="search"], .widget input[type="text"] {
	width: 100%; padding: 10px 12px; border: 1px solid var(--line);
	border-radius: var(--radius-sm); font-family: var(--font); font-size: 14px;
}

/* Dans le pied de page, les widgets se fondent dans le fond (clair) : pas de
   carte blanche ni d'ombre, mais des séparateurs et un texte contrastés. */
.site-footer .widget { background: transparent; box-shadow: none; padding: 0; }
.site-footer .widget-title { color: var(--ink); }
.site-footer .widget li { border-bottom-color: rgba(0, 0, 0, .1); }
.site-footer .widget li a { color: var(--ink); }
.site-footer .widget li a:hover { color: var(--orange); }

/* ---------- Bandes pleine largeur (sélection par catégorie) ---------- */
.home-band { padding: 52px 0; }
.home-band--alt { background: #ebe8e3; }
.home-band .section__head { margin-bottom: 22px; }
.home-band .section__title { margin: 0; }

/* ---------- Bandeau newsletter ---------- */
.nl-band {
	background: linear-gradient(135deg, var(--teal), var(--teal-dark));
	color: #fff; padding: 54px 0;
}
.nl-band__inner {
	display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 40px; align-items: center;
}
.nl-band__title {
	font-size: 28px; font-weight: 800; margin: 0 0 10px;
	line-height: 1.2; text-transform: uppercase; letter-spacing: .02em;
}
.nl-band__text { margin: 0; color: rgba(255, 255, 255, .88); font-size: 15px; max-width: 52ch; }
.nl-band .newsletter-form { max-width: 460px; }
.nl-band .newsletter-msg { color: #fff; font-weight: 600; margin-top: 10px; }

/* ---------- Responsive de la page d'accueil ---------- */
@media (max-width: 1080px) {
	.nl-band__inner { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 900px) {
	.home-band { padding: 40px 0; }
	.nl-band { padding: 40px 0; }
	.nl-band__title { font-size: 23px; }
	.section + .section { margin-top: 40px; }
}

/* =========================================================
   Page de contact
   ========================================================= */

.contact-intro { max-width: 760px; margin-bottom: 30px; }

.contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: 32px; align-items: start;
	padding-bottom: 60px;
}

/* ---------- Carte formulaire ---------- */
.contact-form-card {
	background: var(--card); border-radius: var(--radius);
	padding: 32px; box-shadow: var(--shadow-sm);
}
.contact-form__title { font-size: 21px; font-weight: 800; margin: 0 0 6px; }
.contact-form__hint { margin: 0 0 22px; font-size: 13px; color: var(--muted); }

.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-field { margin-bottom: 18px; display: flex; flex-direction: column; }
.contact-field label {
	font-size: 13.5px; font-weight: 600; margin-bottom: 6px; color: var(--ink);
}
.contact-field label span[aria-hidden] { color: var(--orange); }

.contact-field input[type="text"],
.contact-field input[type="email"],
.contact-field input[type="password"],
.contact-field textarea {
	width: 100%; font-family: var(--font); font-size: 15px; color: var(--ink);
	border: 1px solid #d9d9d9; border-radius: var(--radius-sm);
	padding: 12px 14px; background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-field textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.contact-field input:focus,
.contact-field textarea:focus {
	outline: none; border-color: var(--teal);
	box-shadow: 0 0 0 3px rgba(28, 110, 110, .13);
}

/* Champ en erreur : la couleur ne porte pas seule l'information —
   un message texte est toujours ajouté à côté. */
.contact-field [aria-invalid="true"] { border-color: #d63638; background: #fffafa; }
.contact-error { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: #d63638; }

.contact-field--consent { margin-top: 4px; }
.contact-consent {
	display: flex; align-items: flex-start; gap: 10px;
	font-size: 13px; font-weight: 400 !important; color: var(--muted); line-height: 1.5;
	cursor: pointer;
}
.contact-consent input { margin-top: 3px; flex: 0 0 auto; }

.contact-submit { margin-top: 6px; }
.contact-submit:disabled { opacity: .6; cursor: default; transform: none; }

/* ---------- Message de retour ---------- */
.contact-feedback {
	margin: 0 0 20px; padding: 14px 18px; border-radius: var(--radius-sm);
	font-size: 14px; font-weight: 600; line-height: 1.5;
	background: #e9f6ef; color: #1a7a3c; border: 1px solid #c6e8d5;
}
.contact-feedback.is-error { background: #fdeceb; color: #a4231f; border-color: #f3c9c6; }

/* ---------- Bloc coordonnées ----------
   Fond teal : il détache l'information du formulaire blanc, et les pastilles
   sociales (blanches sur fond coloré) y sont enfin lisibles. */
.contact-info {
	background: linear-gradient(160deg, var(--teal), var(--teal-dark));
	color: #fff; border-radius: var(--radius);
	padding: 32px 28px; box-shadow: var(--shadow-sm);
	position: sticky; top: 100px;
}
.contact-info__title {
	font-size: 18px; font-weight: 800; margin: 0 0 10px;
	text-transform: uppercase; letter-spacing: .03em;
}
.contact-info__intro { margin: 0 0 22px; font-size: 14px; color: rgba(255, 255, 255, .85); line-height: 1.6; }

.contact-info__list { list-style: none; margin: 0 0 26px; padding: 0; }
.contact-info__item {
	display: flex; gap: 14px; align-items: flex-start;
	padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.contact-info__item:last-child { border-bottom: 0; }
.contact-info__icon {
	flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
	background: rgba(255, 255, 255, .14); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
}
.contact-info__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-info__label {
	font-size: 11.5px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .08em; color: var(--gold);
}
.contact-info__value { font-size: 14.5px; color: #fff; word-break: break-word; }
a.contact-info__value:hover { color: var(--gold); }

.contact-info__social { display: flex; flex-direction: column; gap: 10px; }

/* Focus visible sur fond coloré : le contour teal par défaut y disparaîtrait. */
.contact-info a:focus-visible { outline-color: #fff; }

@media (max-width: 900px) {
	.contact-layout { grid-template-columns: 1fr; gap: 24px; }
	.contact-info { position: static; }
	.contact-form-card { padding: 24px 20px; }
}
@media (max-width: 560px) {
	.contact-row { grid-template-columns: 1fr; gap: 0; }
}

/* =========================================================
   Espace membre
   ========================================================= */

/* Indication discrète sous un champ (« 8 caractères minimum »). */
.contact-hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.btn--danger { background: #b3261e; color: #fff; }
.btn--danger:hover { background: #8f1d17; color: #fff; transform: translateY(-2px); }

/* ---------- Lien compte dans l'en-tête ---------- */
.header-account {
	display: inline-flex; align-items: center; gap: 7px;
	color: var(--ink); font-size: 13.5px; font-weight: 600;
	padding: 8px 14px; border-radius: 22px;
	border: 1px solid var(--line); background: #fff;
	transition: border-color .15s ease, color .15s ease;
	white-space: nowrap;
}
.header-account:hover { color: var(--orange); border-color: var(--orange); }

/* ---------- Cartes connexion / inscription ---------- */
.account-page { padding-bottom: 60px; }

.auth-card {
	background: var(--card); border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 38px 34px;
	max-width: 520px; margin: 40px auto;
}
.auth-card__title { font-size: 24px; font-weight: 800; margin: 0 0 8px; }
.auth-card__text { margin: 0 0 24px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.auth-card__alt { margin: 18px 0 0; font-size: 14px; color: var(--muted); text-align: center; }
.auth-card__alt--strong { padding-top: 16px; border-top: 1px solid var(--line); margin-top: 22px; }
.auth-card .contact-form { display: block; max-width: none; }
.auth-card .btn { width: 100%; justify-content: center; }

/* ---------- Tableau de bord ---------- */
.account-layout {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	gap: 30px; align-items: start;
}

.account-nav {
	display: flex; flex-direction: column;
	background: var(--card); border-radius: var(--radius);
	box-shadow: var(--shadow-sm); overflow: hidden;
	position: sticky; top: 100px;
}
.account-nav__item {
	padding: 14px 18px; font-size: 14.5px; font-weight: 600;
	color: var(--ink); border-bottom: 1px solid var(--line);
	border-left: 3px solid transparent;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.account-nav__item:last-child { border-bottom: 0; }
.account-nav__item:hover { background: #faf8f5; color: var(--orange); }
.account-nav__item.is-active {
	border-left-color: var(--orange); color: var(--orange); background: #fdf6f3;
}
.account-nav__item--out { color: var(--muted); font-weight: 500; }

.account-content {
	background: var(--card); border-radius: var(--radius);
	box-shadow: var(--shadow-sm); padding: 30px 32px;
}
.account-content__title { font-size: 20px; font-weight: 800; margin: 0 0 18px; }
.account-subtitle {
	font-size: 15px; font-weight: 700; margin: 30px 0 6px;
	padding-top: 22px; border-top: 1px solid var(--line);
}
.account-intro { margin: 0 0 24px; color: var(--muted); line-height: 1.6; }
.account-content .contact-form { display: block; max-width: none; }

/* ---------- Tuiles du tableau de bord ---------- */
.account-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.account-tile {
	display: flex; flex-direction: column; gap: 6px;
	padding: 20px; border-radius: var(--radius-sm);
	border: 1px solid var(--line); background: #fdfcfa; color: var(--ink);
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.account-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--orange); color: var(--ink); }
.account-tile__title { font-weight: 700; font-size: 15px; }
.account-tile__text { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ---------- Zone de suppression ----------
   Volontairement mise à l'écart et signalée : une action irréversible ne doit
   pas ressembler au reste du formulaire. */
.account-danger {
	margin-top: 36px; padding: 22px 24px;
	border: 1px solid #f0c9c6; border-radius: var(--radius-sm); background: #fdf7f7;
}
.account-danger .account-subtitle { margin-top: 0; padding-top: 0; border-top: 0; color: #a4231f; }
.account-danger .btn { width: auto; }

@media (max-width: 860px) {
	.account-layout { grid-template-columns: 1fr; gap: 20px; }
	.account-nav { position: static; flex-direction: row; flex-wrap: wrap; }
	.account-nav__item {
		border-bottom: 0; border-left: 0; border-bottom: 3px solid transparent; flex: 1 1 auto; text-align: center;
	}
	.account-nav__item.is-active { border-left-color: transparent; border-bottom-color: var(--orange); }
	.account-content { padding: 24px 20px; }
	.auth-card { padding: 28px 22px; margin: 24px auto; }
}
@media (max-width: 720px) {
	/* L'en-tête est déjà chargé sur petit écran : on garde l'icône seule. */
	.header-account__label { display: none; }
	.header-account { padding: 8px 10px; }
}

/* ---------- Favoris : collections ---------- */
.collection-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.collection-chip {
	padding: 6px 14px; border-radius: 20px;
	border: 1px solid var(--line); background: #fff;
	font-size: 13px; font-weight: 600; color: var(--ink);
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.collection-chip:hover { border-color: var(--orange); color: var(--orange); }
.collection-chip.is-active { background: var(--orange-acc); border-color: var(--orange-acc); color: #fff; }

.account-collections { margin-top: 34px; }
.collection-list { list-style: none; margin: 14px 0 18px; padding: 0; }
.collection-list li {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.collection-list li:last-child { border-bottom: 0; }
.collection-list__del { color: #a4231f; font-size: 13px; font-weight: 600; }
.collection-list__del:hover { color: #7d1a15; }

.collection-form { display: flex; gap: 10px; flex-wrap: wrap; }
.collection-form input[type="text"] {
	flex: 1; min-width: 200px;
	border: 1px solid #d9d9d9; border-radius: var(--radius-sm);
	padding: 11px 14px; font-family: var(--font); font-size: 14.5px;
}
.collection-form input[type="text"]:focus {
	outline: none; border-color: var(--teal);
	box-shadow: 0 0 0 3px rgba(28, 110, 110, .13);
}

/* ---------- Fonctions membres sous une recette ----------
   Bloc distinct de la barre d'actions : deux listes déroulantes ne tiennent
   pas dans une rangée de boutons sans la déformer. */
.recipe-member {
	background: #fdfcfa; border: 1px solid var(--line);
	border-radius: var(--radius); padding: 22px 24px; margin-top: 26px;
}
.recipe-member__title {
	font-size: 14px; font-weight: 700; margin: 0 0 16px;
	text-transform: uppercase; letter-spacing: .05em; color: var(--teal);
}
.recipe-member__items { display: flex; flex-wrap: wrap; gap: 22px 34px; }
.recipe-member__item { display: flex; flex-direction: column; gap: 8px; }
.recipe-member__label {
	font-size: 11.5px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .06em; color: var(--muted);
}
.recipe-member .menu-recipe-form,
.recipe-member .shopping-recipe-form { margin: 0; }

.recipe-member-cta {
	margin-top: 26px; padding: 16px 20px;
	background: #fdf6f3; border: 1px solid #f2ddd4; border-radius: var(--radius-sm);
	font-size: 14px; color: var(--muted); line-height: 1.6;
}
.recipe-member-cta a { font-weight: 700; }

@media (max-width: 560px) {
	.recipe-member__items { gap: 20px; }
	.recipe-member__item { width: 100%; }
	.recipe-member .menu-recipe-form { width: 100%; }
	.recipe-member .menu-recipe-form select { flex: 1; min-width: 130px; }
}

/* ---------- Boutons d'action d'une recette sur petit écran ----------
   Le remplissage de 26 px et le corps 15 px sont dimensionnés pour le bureau.
   Sur mobile on les resserre pour que les trois boutons tiennent sur deux
   lignes au lieu de trois, sans jamais descendre sous la cible tactile de
   44 px de haut. */
@media (max-width: 560px) {
	.single-recipe__actions { gap: 10px; }
	.single-recipe__actions .btn {
		padding: 12px 16px; font-size: 14px; gap: 6px;
	}
}

/* Très petits écrans : deux boutons par ligne, largeurs égales — plus lisible
   qu'un alignement à gauche laissant un vide irrégulier. */
@media (max-width: 400px) {
	.single-recipe__actions .btn {
		flex: 1 1 calc(50% - 5px);
		justify-content: center;
	}
}

/* ---------- Note personnelle sous une recette ---------- */
.recipe-note { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.recipe-note__form { margin-top: 8px; }
.recipe-note textarea {
	width: 100%; min-height: 84px; resize: vertical;
	border: 1px solid #d9d9d9; border-radius: var(--radius-sm);
	padding: 12px 14px; font-family: var(--font); font-size: 14.5px;
	line-height: 1.6; background: #fff; color: var(--ink);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.recipe-note textarea:focus {
	outline: none; border-color: var(--teal);
	box-shadow: 0 0 0 3px rgba(28, 110, 110, .13);
}
.recipe-note__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.recipe-note__actions .contact-hint { margin: 0; }

/* ---------- Onglet « Mes notes » ---------- */
.note-list { list-style: none; margin: 0; padding: 0; }
.note-item {
	padding: 18px 0; border-bottom: 1px solid var(--line);
}
.note-item:last-child { border-bottom: 0; }
.note-item__title { display: block; font-weight: 700; font-size: 15.5px; color: var(--ink); }
.note-item__title:hover { color: var(--orange); }
.note-item__text {
	margin: 8px 0 6px; font-size: 14.5px; line-height: 1.6; color: var(--muted);
	white-space: pre-wrap;
}
.note-item__edit { font-size: 13px; font-weight: 600; }

/* ---------- Abonnement newsletter dans le profil ---------- */
.account-nl-form { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.account-nl-form .btn { width: auto; }
.account-nl-form .contact-hint { margin: 0; flex: 1; min-width: 220px; }

/* ---------- Liste de courses ---------- */
.shopping-add { margin-bottom: 26px; }

.shopping-group { margin-bottom: 26px; }
.shopping-group__title {
	font-size: 13px; font-weight: 700; margin: 0 0 10px;
	text-transform: uppercase; letter-spacing: .05em; color: var(--teal);
}
.shopping-group__title a { color: inherit; }
.shopping-group__title a:hover { color: var(--orange); }

.shopping-items { list-style: none; margin: 0; padding: 0; }
.shopping-item {
	display: flex; align-items: center; gap: 12px;
	padding: 11px 4px; border-bottom: 1px solid var(--line);
	transition: opacity .2s ease;
}
.shopping-item:last-child { border-bottom: 0; }
.shopping-item.is-removing { opacity: .4; }

.shopping-item__label {
	display: flex; align-items: center; gap: 12px;
	flex: 1; cursor: pointer; font-size: 15px; line-height: 1.45;
}
.shopping-item__label input { width: 19px; height: 19px; flex: 0 0 auto; accent-color: var(--green); cursor: pointer; }

/* Ligne cochée : barrée ET estompée — le barré seul passe inaperçu sur un
   écran de téléphone tenu à bout de bras dans un magasin. */
.shopping-item.is-checked .shopping-item__label span {
	text-decoration: line-through; color: var(--muted);
}

.shopping-item__del {
	border: 0; background: none; cursor: pointer;
	font-size: 22px; line-height: 1; color: #c9c9c9; padding: 0 6px;
	transition: color .15s ease;
}
.shopping-item__del:hover { color: #a4231f; }

.shopping-actions {
	display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
	margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line);
}
.shopping-actions form { margin: 0; }

.shopping-recipe-form { display: inline-block; margin: 0; }

/* À l'impression, la liste doit tenir seule sur la page. */
@media print {
	.shopping-item__del, .shopping-add { display: none; }
	.shopping-item { break-inside: avoid; }
}

/* ---------- Planificateur de menus ---------- */
.menu-weeknav {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap; margin-bottom: 20px;
}
.menu-weeknav__label { font-weight: 700; font-size: 15px; }
.menu-weeknav .btn { padding: 9px 16px; font-size: 13.5px; }

.menu-grid {
	display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px;
}
.menu-day {
	background: #fdfcfa; border: 1px solid var(--line);
	border-radius: var(--radius-sm); padding: 12px 10px; min-height: 130px;
}
.menu-day.is-today { border-color: var(--orange); background: #fdf6f3; }
.menu-day__title {
	font-size: 12px; font-weight: 700; margin: 0 0 10px;
	text-transform: uppercase; letter-spacing: .04em; color: var(--teal);
}
.menu-day.is-today .menu-day__title { color: var(--orange); }

/* Quatre créneaux par jour au lieu de deux : l'espacement est resserré pour
   que la journée reste lisible d'un coup d'œil dans une colonne étroite. */
.menu-slot { margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px dashed #e6e2db; }
.menu-slot:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.menu-slot__label {
	display: block; font-size: 10.5px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
	margin-bottom: 3px;
}
.menu-slot__empty { color: #cfcfcf; font-size: 13px; }
.menu-slot__list { list-style: none; margin: 0; padding: 0; }
.menu-slot__list li {
	display: flex; align-items: flex-start; gap: 4px;
	font-size: 12.5px; line-height: 1.35; margin-bottom: 5px;
}
.menu-slot__list a { color: var(--ink); }
.menu-slot__list a:hover { color: var(--orange); }
.menu-slot__del { color: #c9c9c9; font-size: 15px; line-height: 1; flex: 0 0 auto; }
.menu-slot__del:hover { color: #a4231f; }

.menu-add-form, .menu-recipe-form {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 0;
}
.menu-add-form select, .menu-recipe-form select {
	border: 1px solid #d9d9d9; border-radius: var(--radius-sm);
	padding: 10px 12px; font-family: var(--font); font-size: 14px;
	background: #fff; max-width: 100%;
}
.menu-add-form select:focus, .menu-recipe-form select:focus {
	outline: none; border-color: var(--teal);
	box-shadow: 0 0 0 3px rgba(28, 110, 110, .13);
}
.menu-add-form select[name="post_id"] { flex: 1; min-width: 200px; }

/* Sept colonnes sont illisibles sous 1100 px : la semaine passe en liste. */
@media (max-width: 1100px) {
	.menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.menu-grid { grid-template-columns: 1fr; }
	.menu-day { min-height: 0; }
	.menu-weeknav { justify-content: center; }
	.menu-add-form select, .menu-recipe-form select { width: 100%; }
}

/* Invitation à créer un compte, sur la page favoris anonyme. */
.favorites-cta {
	margin-top: 28px; padding: 16px 20px;
	background: #fdf6f3; border: 1px solid #f2ddd4; border-radius: var(--radius-sm);
	font-size: 14px; color: var(--muted); line-height: 1.6;
}
.favorites-cta a { font-weight: 700; }

/* =========================================================
   Encart newsletter de lecture (articles)
   ========================================================= */

.nl-slidein {
	position: fixed;
	right: 20px; bottom: 20px;
	z-index: 95;
	width: min(370px, calc(100vw - 32px));
	background: var(--card);
	border-radius: 20px;
	padding: 30px 24px 22px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .22);

	/* État masqué : hors de l'arbre d'accessibilité tant qu'il n'est pas
	   déclenché (visibility, pas seulement opacity). */
	visibility: hidden;
	opacity: 0;
	transform: translateY(calc(100% + 28px));
	transition: transform .45s cubic-bezier(.22, .8, .3, 1), opacity .3s ease, visibility .45s;
}
.nl-slidein.is-visible { visibility: visible; opacity: 1; transform: none; }

/* Liseré coloré : rappelle la palette sans alourdir la carte. */
.nl-slidein::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
	background: linear-gradient(90deg, var(--orange), var(--gold));
	border-radius: 20px 20px 0 0;
}

.nl-slidein__badge {
	position: absolute; top: -22px; left: 24px;
	width: 52px; height: 52px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 26px; line-height: 1;
	background: linear-gradient(135deg, var(--teal), var(--teal-dark));
	box-shadow: 0 6px 16px rgba(28, 110, 110, .35);
}

.nl-slidein__close {
	position: absolute; top: 12px; right: 12px;
	width: 30px; height: 30px; border: 0; border-radius: 50%;
	background: #f2efea; color: var(--muted);
	cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
	transition: background .15s ease, color .15s ease;
}
.nl-slidein__close:hover { background: #e6e1d9; color: var(--ink); }

.nl-slidein__body { padding-top: 10px; }
.nl-slidein__title {
	font-size: 18px; font-weight: 800; margin: 0 0 6px;
	line-height: 1.25; color: var(--ink); padding-right: 24px;
}
.nl-slidein__text { margin: 0 0 16px; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.nl-slidein .newsletter-form { max-width: none; }

/* Le message de retour est vert clair par défaut (pensé pour le pied de page
   sombre) : sur fond blanc il serait illisible. */
.nl-slidein .newsletter-msg { color: var(--green-dark); }
.nl-slidein .newsletter-msg.is-error { color: var(--orange-dark); }

/* Cohabitation avec le bouton « retour en haut », lui aussi fixé en bas à
   droite et déclenché par le même défilement : il passe à gauche. */
.nl-slidein.is-visible ~ .back-top { right: auto; left: 18px; }

@media (max-width: 560px) {
	/* Feuille ancrée au bas de l'écran : plus lisible qu'une carte flottante
	   sur petit écran, et le pouce atteint le champ sans effort. */
	.nl-slidein {
		right: 0; left: 0; bottom: 0;
		width: 100%;
		border-radius: 20px 20px 0 0;
		padding: 28px 20px 20px;
	}
	.nl-slidein::before { border-radius: 20px 20px 0 0; }
	.nl-slidein__badge { width: 46px; height: 46px; font-size: 23px; top: -20px; left: 20px; }
	/* La feuille occupe toute la largeur : le bouton n'a nulle part où aller. */
	.nl-slidein.is-visible ~ .back-top { opacity: 0; pointer-events: none; }
}

/* Sans animation : apparition franche, sans glissement. */
@media (prefers-reduced-motion: reduce) {
	.nl-slidein { transform: none; }
}

/* ---------- Rendu différé (content-visibility) ----------
   La règle précédente couvrait .related, .comments-area, .author-box,
   .post-navigation, .home-band, .nl-band et .recipe-member avec une réserve
   UNIQUE de 420 px. C'était l'origine d'un CLS mesuré à 0,863 sur mobile, et
   le raisonnement mérite d'être écrit une bonne fois :

   un bloc en `content-visibility: auto` occupe sa réserve tant qu'il n'est pas
   rendu, puis prend sa hauteur RÉELLE quand il approche du viewport. L'écart
   entre les deux déplace tout ce qui le suit dans le document. Or 420 px ne
   pouvait être juste nulle part :
     - .related, sur un écran de 412 px, passe la grille à UNE colonne
       (.recipe-grid--3, plus bas dans les media queries) : trois cartes de
       ~380 px, soit ~1 250 px réels. Le bloc s'allongeait de +830 px et
       poussait la suite de la page vers le bas — sur un viewport de 823 px,
       ce seul saut vaut un CLS de ~0,86 à lui tout seul ;
     - .author-box et .post-navigation font l'inverse : ~180 et ~200 px réels
       contre 420 réservés, donc un saut VERS LE HAUT à chaque fois.
   Les décalages se cumulent au défilement, ce que Lighthouse provoque en fin
   de mesure. Le commentaire d'origine affirmait « aucun CLS » en s'appuyant
   sur le mot-clé `auto` : il ne mémorise la hauteur réelle qu'APRÈS un premier
   rendu, il ne protège donc jamais la première visite — celle que mesure PSI.

   Règle retenue : `content-visibility` ne reste que sur le DERNIER bloc du
   document. Le pied de page n'a rien en dessous de lui ; sa réserve peut être
   fausse sans déplacer quoi que ce soit, au pire l'ascenseur bouge un peu.
   Partout ailleurs, le gain de rendu (quelques millisecondes) ne vaut pas le
   risque de décalage : ces sections sont rendues normalement.

   Toute réintroduction ailleurs exige une hauteur MESURÉE, par point de
   rupture — pas une estimation commune. */
.site-footer {
	content-visibility: auto;
	contain-intrinsic-size: auto 320px;
}
/* Sous 1080 px le pied passe sur une seule colonne (.site-footer__inner) :
   les trois colonnes s'empilent et la hauteur double largement. */
@media (max-width: 1080px) {
	.site-footer { contain-intrinsic-size: auto 700px; }
}

/* Isolation de rendu des cartes : le layout d'une carte ne force jamais
   celui des voisines (grilles longues plus fluides au scroll). */
.recipe-card { contain: content; }

/* ---------- Emplacements publicitaires (hauteur réservée = zéro CLS) ---------- */
.ad-slot {
	position: relative;
	/* align-items : STRETCH, jamais center. Sur l'axe transversal d'une colonne
	   flex, `center` dimensionne l'enfant sur son contenu — or un <ins
	   class="adsbygoogle"> est VIDE tant que la régie n'a pas répondu : il
	   prenait donc 0 px de large, et AdSense refuse de servir une annonce sans
	   largeur (« No slot size for availableWidth=0 »). Le centrage visuel est
	   assuré par text-align: center ci-dessous. */
	display: flex; flex-direction: column; align-items: stretch; justify-content: center;
	min-height: var(--ad-min-d, 280px);
	margin: 26px auto;
	/* Plus de fond de remplissage : il ne se justifiait que pendant l'attente
	   du montage différé, qui n'existe plus — l'annonce est là dès le premier
	   rendu. Un slot invendu reste donc un simple espace, comme il l'était
	   auparavant une fois monté. */
	border-radius: var(--radius-sm);
	text-align: center;
	contain: layout;
}
.ad-slot__label {
	position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
	font-size: 10px; font-weight: 600; letter-spacing: .12em;
	text-transform: uppercase; color: #767068;
	pointer-events: none;
}
.ad-slot--top { margin-top: 0; }
.ad-slot--grid { grid-column: 1 / -1; width: 100%; margin: 0; }
.ad-slot--mgid { max-width: 100%; }

@media (max-width: 780px) {
	.ad-slot { min-height: var(--ad-min-m, 280px); }
}

/* ---------- Sommaire des articles (zéro JS) ----------
   Le repli/dépli est assuré par <details>/<summary>, natif et accessible au
   clavier. Le défilement doux et le décalage sous l'en-tête collant viennent
   de `scroll-behavior` / `scroll-padding-top` déclarés plus haut : rien à
   ajouter ici, et rien à charger. */
.toc { margin: 26px 0 30px; }
.toc__box {
	background: var(--card);
	border: 1px solid var(--line);
	border-left: 3px solid var(--teal);
	border-radius: var(--radius-sm);
	padding: 14px 20px;
	box-shadow: var(--shadow-sm);
}
.toc__summary {
	display: flex; align-items: center; gap: 9px;
	cursor: pointer;
	font-weight: 700; font-size: 15px; color: var(--teal);
	list-style: none; /* Firefox */
}
.toc__summary::-webkit-details-marker { display: none; } /* Safari */
.toc__summary::before {
	content: ''; flex: 0 0 auto;
	width: 7px; height: 7px; margin-bottom: 3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.toc__box[open] .toc__summary::before { transform: rotate(-135deg); margin-bottom: -3px; }
.toc__summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 3px; }

.toc__list { margin: 13px 0 3px; padding-left: 21px; }
.toc__list ol { padding-left: 19px; margin: 5px 0; }
.toc__list li { margin: 6px 0; font-size: 14.5px; line-height: 1.45; }
.toc__link { color: var(--ink); text-decoration: none; }
.toc__link:hover, .toc__link:focus-visible { color: var(--orange); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	.toc__summary::before { transition: none; }
}

/* ---------- Alertes alimentaires (profil membre) ----------
   L'allergène est un avertissement franc (rouge), le régime une simple
   remarque : les deux niveaux ne doivent pas se confondre — banaliser le
   rouge, c'est affaiblir l'alerte qui compte. */
.food-alert {
	margin: 0 0 22px;
	padding: 14px 18px;
	background: #fdf3f2;
	border: 1px solid #f3d2cd;
	border-left: 4px solid #c0392b;
	border-radius: var(--radius-sm);
	font-size: 14.5px;
	line-height: 1.55;
}
.food-alert__row { margin: 0 0 6px; }
.food-alert__row--allergen strong { color: #a03024; }
.food-alert__row--diet { color: var(--ink); }
.food-alert__hint {
	margin: 8px 0 0;
	font-size: 12.5px;
	color: var(--muted);
}

/* Grilles de cases à cocher du profil */
.diet-form { margin-bottom: 28px; }
.diet-fieldset {
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 12px 16px 14px;
	margin: 0 0 16px;
}
.diet-fieldset legend {
	font-weight: 600; font-size: 14px;
	padding: 0 8px;
}
.diet-checks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 8px 14px;
}
.diet-check {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 14px; cursor: pointer;
}
.diet-check input { margin: 0; accent-color: var(--teal); }

/* ---------- Photo de profil (membre) ---------- */
.avatar-form { margin-bottom: 28px; }
.avatar-form__row { display: flex; gap: 18px; align-items: flex-start; }
.avatar-form__preview {
	width: 96px; height: 96px; flex-shrink: 0;
	border-radius: 50%; object-fit: cover;
	border: 1px solid var(--line); background: #f4f2ee;
}
.avatar-form__fields { flex: 1; min-width: 0; }
.avatar-form__fields input[type="file"] { font-size: 14px; max-width: 100%; }
.avatar-form__actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; }
@media (max-width: 520px) {
	.avatar-form__row { flex-direction: column; align-items: center; text-align: center; }
	.avatar-form__actions { justify-content: center; }
}

/* ---------- Connexion / inscription : Google + avantages ---------- */
.auth-benefits {
	list-style: none; margin: 0 0 20px; padding: 14px 18px;
	background: #faf8f5; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.auth-benefits li { position: relative; padding-left: 24px; margin: 6px 0; font-size: 14px; line-height: 1.5; }
.auth-benefits li::before {
	content: '✓'; position: absolute; left: 0;
	color: var(--green-dark); font-weight: 700;
}

.auth-google { margin: 4px 0 18px; }
.btn--google {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	width: 100%;
	background: #fff; color: var(--ink);
	border: 1px solid #d5d5d5;
}
.btn--google:hover { background: #fff; color: var(--teal-dark); border-color: var(--teal); }
.auth-google__terms { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.auth-google__terms a { color: var(--teal); text-decoration: underline; }

.auth-sep {
	display: flex; align-items: center; gap: 12px;
	margin: 16px 0 2px;
	color: var(--muted); font-size: 12px;
	text-transform: uppercase; letter-spacing: .06em;
}
.auth-sep::before, .auth-sep::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ---------- Pages piliers : bloc « Nos meilleures recettes » ---------- */
.pillar-recipes { margin-top: 40px; }
.pillar-recipes .recipe-grid { margin-top: 4px; }