/* =========================================================================
   NeptunePlage — fiche recette v2
   Charge uniquement sur les articles utilisant template-recette-v2.php.

   Les couleurs sont definies ici, PAS accrochees aux couleurs globales du
   Customizer GeneratePress : un reglage modifie la-bas ne doit pas casser
   la fiche recette sans que personne ne fasse le lien.
   ========================================================================= */

.np-fiche {
	/* Couleurs REELLES du site, lues dans les couleurs globales de GeneratePress
	   le 03/08 : bleu-fonce #1D3F53, bleu-medium #276681, jaune (ocre) #DAA53F,
	   brique #CB5937, sable #b78455, base #f0f5fa, texte #43474C.
	   On les recopie ici plutot que d'y faire reference : un reglage modifie dans
	   le Customizer ne doit pas casser la fiche recette a notre insu. */
	--np-navy:      #1D3F53;
	--np-navy-doux: #276681;
	--np-orange:    #e8924a;
	--np-ocre:      #DAA53F;
	--np-ocre-pale: #FAF3E6;
	--np-sable:     #b78455;
	--np-rouge:     #CB5937;
	--np-pale:      #f0f5fa;
	--np-pale2:     #f7f9fc;
	--np-creme:     #fdf6ea;
	--np-bord:      #e0e8f0;
	--np-encre:     #43474C;
	--np-gris:      #6b7787;
	--np-rayon:     10px;

	color: var(--np-encre);
	font-size: 17px;
	line-height: 1.65;

	/* GeneratePress ne contraint pas la largeur sur ce modele : on la pose nous-memes
	   plutot que de dependre d'un reglage du Customizer qui pourrait changer. */
	max-width: 1120px;
	margin-inline: auto;
	padding-inline: 24px;
}

.np-fiche *, .np-fiche *::before, .np-fiche *::after { box-sizing: border-box; }

.np-ico { width: 22px; height: 22px; flex: 0 0 auto; }

/* ---------- 1 + 2 · titre, actions, signature ---------- */

/* Les boutons s'affichent AU-DESSUS du titre, alignes a droite ; le titre passe
   en dessous, centre, sur toute la largeur — il respire au lieu d'etre comprime.
   L'inversion se fait en CSS (order) et non dans le balisage : le <h1> reste le
   premier element du code, ce qui compte pour l'accessibilite et le SEO. */
.np-entete__haut { display: flex; flex-direction: column; }

.np-actions {
	order: -1;
	align-self: flex-end;
	display: flex;
	gap: 10px;
	margin-bottom: 48px;
}

.np-titre {
	margin: 0;
	text-align: center;
	color: var(--np-navy);
	font-size: clamp(28px, 3.4vw, 42px);
	line-height: 1.18;
	font-weight: 700;
}

.np-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;
	border-radius: 8px;
	border: 1px solid transparent;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.np-btn .np-ico { width: 18px; height: 18px; }

.np-btn--plein  { background: var(--np-navy); color: #fff; }
.np-btn--orange { border-color: var(--np-orange); color: var(--np-orange); }
.np-btn--gris   { border-color: var(--np-bord); color: var(--np-gris); }

@media (hover: hover) {
	.np-btn--plein:hover  { background: var(--np-navy-doux); }
	.np-btn--orange:hover { background: var(--np-orange); color: #fff; }
	.np-btn--gris:hover   { border-color: var(--np-gris); color: var(--np-encre); }
}
.np-btn:focus-visible { outline: 2px solid var(--np-orange); outline-offset: 2px; }

.np-signature {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
	color: var(--np-gris);
	font-size: 15px;
}
.np-signature__avatar { width: 26px; height: 26px; border-radius: 50%; }
.np-signature__nom { font-weight: 600; color: var(--np-encre); }
.np-signature__sep { color: var(--np-bord); }

/* ---------- 3 · image a la une ---------- */

.np-visuel { margin: 22px 0 0; }
.np-visuel__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	border-radius: var(--np-rayon);
}

/* ---------- 4 · en un coup d'oeil ---------- */

.np-apercu {
	margin: 24px 0 0;
	padding: 20px 24px 22px;
	background: var(--np-pale);
	border-radius: var(--np-rayon);
}
.np-apercu__titre {
	margin: 0 0 16px;
	color: var(--np-navy);
	font-size: 19px;
	font-weight: 700;
}
.np-apercu__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 4px 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.np-apercu__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 4px 18px;
}
/* Liseré séparateur : un trait fin, plus court que la ligne, pour aérer. */
.np-apercu__item::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	transform: translateY(-50%);
	width: 1px; height: 30px;
	background: #cfdae6;
}
.np-apercu__item:first-child { padding-left: 0; }
.np-apercu__item:first-child::before { display: none; }
.np-apercu__ico { color: var(--np-navy); }
.np-apercu__texte { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.np-apercu__label  { font-size: 12.5px; color: var(--np-gris); }
.np-apercu__valeur { font-size: 15px; font-weight: 600; color: var(--np-encre); }

/* ---------- 5 · sommaire ---------- */

.np-sommaire {
	margin: 16px 0 25px;
	background: var(--np-pale2);
	border: 1px solid var(--np-bord);
	border-radius: var(--np-rayon);
}
.np-sommaire__tete {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 15px 20px;
	color: var(--np-navy);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}
.np-sommaire__tete::-webkit-details-marker { display: none; }
.np-sommaire__ico { color: var(--np-navy); }
.np-sommaire__chevron { margin-left: auto; transition: transform .2s ease; }
.np-sommaire[open] .np-sommaire__chevron { transform: rotate(180deg); }
.np-sommaire__liste { margin: 0; padding: 0 20px 18px 44px; }
.np-sommaire__liste li { margin: 6px 0; }
.np-sommaire__liste a { color: var(--np-navy-doux); text-decoration: none; }
.np-sommaire__liste a:hover { text-decoration: underline; }

/* ---------- corps editorial ---------- */

.np-corps { margin-top: 30px; }
.np-corps > h2 {
	margin: 34px 0 16px;
	color: var(--np-navy);
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.25;
}
.np-corps > p { margin: 0 0 16px; }

/* Encart « Pourquoi cette recette… » — style de bloc pose sur un core/group.
   ATTENTION : WordPress peut inserer un .wp-block-group__inner-container entre le
   groupe et ses enfants. Tout ce qui cible « l'interieur » doit donc viser le
   conteneur interne s'il existe, sinon le groupe lui-meme. */
.np-corps .is-style-np-encart {
	position: relative;
	margin: 26px 0;
	padding: 22px 26px 24px;
	background: var(--np-creme);
	border-radius: var(--np-rayon);
	overflow: hidden;
}
.np-corps .is-style-np-encart .wp-block-group__inner-container {
	max-width: none;
	padding: 0;
	margin: 0;
}
.np-corps .is-style-np-encart :is(h2, h3, h4) {
	margin-top: 0;
	color: var(--np-navy);
	font-size: 20px;
	font-weight: 700;
}
.np-corps .is-style-np-encart :is(h2, h3, h4)::after {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	margin-top: 9px;
	background: var(--np-orange);
	border-radius: 2px;
}
.np-corps .is-style-np-encart p { margin: 0 0 6px; line-height: 1.5; }
.np-corps .is-style-np-encart p:last-child { margin-bottom: 0; }

/* ---------- 8 · ingredients et materiel ---------- */

.np-colonnes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin: 22px 0;
}

.np-carte {
	background: var(--np-pale2);
	border: 1px solid var(--np-bord);
	border-radius: var(--np-rayon);
	padding: 18px 22px 22px;
}
.np-carte__tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: nowrap;
	margin-bottom: 14px;
}
.np-carte__titre {
	margin: 0;
	min-width: 0;          /* autorise le titre a se comprimer plutot qu'a pousser */
	color: var(--np-navy);
	font-size: 17px;
	font-weight: 700;
}
/* chiffres a largeur fixe : « 10 » et « 11 » occupent exactement la meme place */
[data-np-portions-libelle] { font-variant-numeric: tabular-nums; }

.np-compteur {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;        /* le compteur ne se comprime jamais */
	padding: 4px 10px 4px 4px;
	background: #fff;
	border: 1px solid var(--np-bord);
	border-radius: 999px;
	font-size: 14px;
	white-space: nowrap;
}
.np-compteur__btn {
	width: 30px;
	min-width: 30px;
	height: 30px;
	flex: 0 0 30px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--np-bord);
	border-radius: 50%;
	background: #fff;
	color: var(--np-navy);
	font-size: 17px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	aspect-ratio: 1 / 1;
}
.np-compteur__btn:hover { background: var(--np-pale); }
.np-compteur__btn:focus-visible { outline: 2px solid var(--np-orange); outline-offset: 1px; }
.np-compteur__valeur { min-width: 22px; text-align: center; font-weight: 700; color: var(--np-navy); }
.np-compteur__unite { color: var(--np-gris); }

.np-liste-ing, .np-liste-mat { margin: 0; padding: 0 0 0 18px; }
.np-liste-ing li, .np-liste-mat li { margin: 0; padding: 7px 0; }
.np-liste-ing li + li, .np-liste-mat li + li { border-top: 1px solid var(--np-bord); }

.np-ing { display: flex; align-items: baseline; gap: 14px; }
.np-ing__label { flex: 1 1 auto; min-width: 0; }
.np-ing__qte {
	flex: 0 0 auto;
	color: var(--np-gris);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --- Passerelle vers la box affiliation -----------------------------------
   La liste de materiel reste sobre et editoriale. Le lien renvoie vers la
   section depliable detaillee, qui elle porte les liens partenaires.          */

.np-materiel__vers-detail {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 9px 14px;
	background: #fff;
	border: 1px solid var(--np-orange);
	border-radius: 8px;
	color: var(--np-orange);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.np-materiel__vers-detail::after {
	content: "";
	width: 7px; height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
}
@media (hover: hover) {
	.np-materiel__vers-detail:hover { background: var(--np-orange); color: #fff; }
}

/* --- La box materiel detaillee (affiliation) ------------------------------ */

.np-corps details.is-style-np-affiliation {
	background: #fffaf3;
	border-color: #f2ddc4;
}
.np-corps details.is-style-np-affiliation > summary { color: #a8621f; }
.np-corps details.is-style-np-affiliation ul { margin: 12px 0 0; padding-left: 20px; }
.np-corps details.is-style-np-affiliation li { padding: 5px 0; }
.np-corps details.is-style-np-affiliation li + li { border-top: 1px solid #f2ddc4; }
/* mention obligatoire, ajoutee automatiquement — jamais oubliee */
.np-corps details.is-style-np-affiliation > :last-child::after {
	content: "Certains liens de cette section sont des liens partenaires : si vous achetez via l'un d'eux, je touche une petite commission, sans surcoût pour vous.";
	display: block;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px dashed #e6cba6;
	color: var(--np-gris);
	font-size: 13px;
	font-style: italic;
	line-height: 1.5;
}

/* ---------- 9 · etapes ---------- */

.np-etapes { margin: 22px 0; }
.np-liste-etapes { margin: 0; padding: 0; list-style: none; counter-reset: np-etape; }

/* Ordre du balisage : numero, case a cocher, texte, duree.
   La colonne souple est donc la TROISIEME — sinon le texte est repousse a droite. */
.np-etape {
	display: grid;
	grid-template-columns: 26px 20px 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 11px 0;
}
.np-etape + .np-etape { border-top: 1px solid var(--np-bord); }

.np-etape__num {
	width: 26px; height: 26px;
	display: grid; place-items: center;
	background: var(--np-navy);
	color: #fff;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
}
.np-etape__texte { cursor: pointer; }
.np-etape__case { width: 19px; height: 19px; accent-color: var(--np-navy); cursor: pointer; }
.np-etape__case:checked + .np-etape__texte { color: var(--np-gris); text-decoration: line-through; }

.np-etape__duree {
	padding: 4px 12px;
	background: var(--np-pale);
	border-radius: 999px;
	color: var(--np-navy-doux);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

/* ---------- 10 · sections depliables (core/details) ---------- */

.np-corps details {
	margin: 0;
	background: var(--np-pale2);
	border: 1px solid var(--np-bord);
	border-radius: var(--np-rayon);
	padding: 14px 20px;
}
.np-corps details + details { margin-top: 10px; }
/* la cible d'une ancre ne doit pas se coller au bord haut de l'ecran */
.np-corps details[id] { scroll-margin-top: 110px; }
/* signalement bref quand on arrive dessus depuis le bouton */
.np-corps details.np-vise { animation: np-vise 1.6s ease 1; }
@keyframes np-vise {
	0%, 100% { box-shadow: 0 0 0 0 rgba(218, 165, 63, 0); }
	25%      { box-shadow: 0 0 0 5px rgba(218, 165, 63, .45); }
}
/* Grille a 3 colonnes : pastille · (titre + resume) · chevron.
   La grille evite les acrobaties de flex quand le resume est absent. */
.np-corps details > summary {
	display: grid;
	grid-template-columns: auto 1fr 14px;
	align-items: center;
	column-gap: 14px;
	color: var(--np-navy);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}
.np-corps details > summary::-webkit-details-marker { display: none; }

.np-corps .np-details__titre  { grid-column: 2; font-size: 16.5px; line-height: 1.35; }
.np-corps .np-details__resume {
	grid-column: 2;
	margin-top: 2px;
	color: var(--np-gris);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
}
/* la pastille et le chevron s'etirent sur les deux lignes */
.np-corps details > summary::before { grid-column: 1; grid-row: 1 / -1; }
.np-corps details > summary::after {
	content: "";
	grid-column: 3;
	grid-row: 1 / -1;
	justify-self: end;
	width: 9px; height: 9px;
	border-right: 2px solid var(--np-gris);
	border-bottom: 2px solid var(--np-gris);
	transform: rotate(45deg) translateY(-2px);
	transition: transform .2s ease;
}
.np-corps details[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.np-corps details > :not(summary) { margin: 10px 0 4px; }

/* variante allergenes */
.np-corps details.is-style-np-alerte { background: #fdf3f2; border-color: #f0d5d2; }
.np-corps details.is-style-np-alerte > summary { color: var(--np-rouge); }

/* --- Pictogrammes des sections depliables ---------------------------------
   Une pastille ronde a gauche du titre. L'icone est un masque : elle prend
   la couleur du texte, donc elle devient rouge toute seule sur l'alerte.
   Une classe par icone, posee sur le bloc — Studio peut donc la generer.        */

.np-corps details > summary::before {
	content: "";
	flex: 0 0 auto;
	width: 34px; height: 34px;
	margin-right: 4px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--np-bord);
	background-image: var(--np-picto, none);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	align-self: center;
}
.np-corps details.is-style-np-alerte > summary::before {
	background-color: #fff;
	border-color: #f0d5d2;
}
/* Pas de classe de picto (cas de la FAQ) : pas de pastille vide. */
.np-corps details:not([class*="np-picto-"]) > summary { grid-template-columns: 1fr 14px; }
.np-corps details:not([class*="np-picto-"]) > summary::before { display: none; }
.np-corps details:not([class*="np-picto-"]) > summary::after { grid-column: 2; }
.np-corps details:not([class*="np-picto-"]) > summary > *,
.np-corps details:not([class*="np-picto-"]) > summary { grid-column: auto; }
.np-corps .is-style-np-faq details > summary { font-size: 15px; font-weight: 500; }

/* fouet — le materiel */
.np-picto-fouet   { --np-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2321364f' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M15 3c3 2 4 5 3 8l-4 9-3-1 3-9c1-3 .5-5 1-7z'/%3E%3Cpath d='M11 5c-3 2-4 5-3 8'/%3E%3Cpath d='M18 6c-3 1-4 4-3 7'/%3E%3C/svg%3E"); }
/* fleches croisees — remplacer un ingredient */
.np-picto-echange { --np-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2321364f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13l-3-3M20 16H7l3 3'/%3E%3C/svg%3E"); }
/* flocon — conservation */
.np-picto-froid   { --np-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2321364f' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 3v18M4 7.5l16 9M20 7.5l-16 9'/%3E%3Cpath d='M9.5 5 12 7.5 14.5 5M9.5 19 12 16.5 14.5 19'/%3E%3C/svg%3E"); }
/* triangle — les rates */
.np-picto-alerte  { --np-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2321364f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.8 19.5h18.4z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E"); }
/* allergenes — en rouge */
.np-picto-allerg  { --np-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0453b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5M12 16h.01'/%3E%3C/svg%3E"); }
/* tasse — accords */
.np-picto-accord  { --np-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2321364f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h12v5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z'/%3E%3Cpath d='M16 9.5h2a2.5 2.5 0 0 1 0 5h-2'/%3E%3Cpath d='M6 4.5s0 1 .8 1.8M10 4.5s0 1 .8 1.8M14 4.5s0 1 .8 1.8'/%3E%3C/svg%3E"); }
/* livre — histoire */
.np-picto-histoire{ --np-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2321364f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z'/%3E%3Cpath d='M4 18.5A2.5 2.5 0 0 1 6.5 16H20'/%3E%3C/svg%3E"); }
/* panier — la box affiliation */
.np-picto-panier  { --np-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2321364f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16l-1.5 10.2a2 2 0 0 1-2 1.8H7.5a2 2 0 0 1-2-1.8z'/%3E%3Cpath d='M8.5 10V6.5a3.5 3.5 0 0 1 7 0V10'/%3E%3C/svg%3E"); }

/* ---------- 11 · FAQ en deux colonnes ---------- */

.np-corps .is-style-np-faq {
	margin: 22px 0;
	padding: 20px 22px 24px;
	background: var(--np-pale2);
	border: 1px solid var(--np-bord);
	border-radius: var(--np-rayon);
}
/* La grille se pose sur le conteneur qui porte REELLEMENT les enfants :
   le conteneur interne de WordPress s'il existe, sinon le groupe lui-meme. */
.np-corps .is-style-np-faq .wp-block-group__inner-container,
.np-corps .is-style-np-faq:not(:has(.wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: 10px 16px;
	max-width: none;
	padding: 0;
}
.np-corps .is-style-np-faq :is(h2, h3) {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 6px;
	color: var(--np-navy);
	font-size: 22px;
}
/* pastille « ? » devant le titre de la FAQ */
.np-corps .is-style-np-faq :is(h2, h3)::before {
	content: "";
	flex: 0 0 auto;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: #fff center / 20px 20px no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2321364f' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.6 9.4a2.5 2.5 0 1 1 3.3 2.4c-.6.3-.9.8-.9 1.4v.5'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
	border: 1px solid var(--np-bord);
}
.np-corps .is-style-np-faq details { background: #fff; }
.np-corps .is-style-np-faq details + details { margin-top: 0; }

/* ---------- 12 · l'autrice ---------- */

.np-autrice {
	display: grid;
	grid-template-columns: 128px 1fr auto;
	align-items: center;
	gap: 30px;
	margin: 40px 0 60px;
	padding: 35px 32px 40px;
	background: var(--np-ocre-pale);
	border: 1px solid #eadfc8;
	border-radius: var(--np-rayon);
}
.np-autrice__photo { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; }
.np-autrice__nom { margin: 0 0 6px; color: var(--np-navy); font-size: 21px; font-weight: 700; }
.np-autrice__bio { margin: 0; color: var(--np-gris); font-size: 15px; }
.np-autrice__liens {
	margin: 0;
	padding: 0 0 0 30px;
	border-left: 1px solid #e6d8bd;
	list-style: none;
}
.np-autrice__liens li + li { margin-top: 9px; }
.np-autrice__liens a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--np-navy-doux);
	font-size: 14.5px;
	text-decoration: none;
}
.np-autrice__liens a:hover { text-decoration: underline; }
.np-autrice__liens .np-ico { width: 18px; height: 18px; }

/* =========================================================================
   Listes à coches — dans les étapes et dans les sections dépliables
   Une coche à la couleur de la charte (ocre) plutôt qu'une puce : elle se lit
   comme une action à accomplir, pas comme une énumération.
   ========================================================================= */

.np-corps ul.np-check,
.np-etape__texte ul {
	margin: 10px 0 4px;
	padding: 0;
	list-style: none;
}
.np-corps ul.np-check > li,
.np-etape__texte ul > li {
	position: relative;
	margin: 0;
	padding: 5px 0 5px 30px;
	list-style: none;
}
.np-corps ul.np-check > li::before,
.np-etape__texte ul > li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.62em;
	width: 15px; height: 15px;
	background: center / contain no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DAA53F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.8 9.2 18 20 6.4'/%3E%3C/svg%3E");
}
.np-etape__texte ul { margin-top: 8px; }
.np-etape__texte ul > li { padding-top: 4px; padding-bottom: 4px; }

@media (max-width: 600px) {
	.np-corps ul.np-check > li,
	.np-etape__texte ul > li { padding-left: 27px; }
}

/* =========================================================================
   Minuteur d'étape — le badge de durée devient un bouton
   ========================================================================= */

.np-etape__duree {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 13px;
	background: var(--np-pale);
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--np-navy-doux);
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	white-space: nowrap;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.np-etape__duree-ico {
	width: 14px; height: 14px;
	flex: 0 0 auto;
	background: center / contain no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23276681' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='13.5' r='8'/%3E%3Cpath d='M12 9.5v4l2.5 2M9 2h6'/%3E%3C/svg%3E");
}
@media (hover: hover) {
	.np-etape__duree:hover { background: #e2ecf5; border-color: #cfdae6; }
}
.np-etape__duree:focus-visible { outline: 2px solid var(--np-orange); outline-offset: 2px; }

/* minuteur en marche */
.np-etape__duree.est-actif {
	background: var(--np-navy);
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.np-etape__duree.est-actif .np-etape__duree-ico {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='13.5' r='8'/%3E%3Cpath d='M12 9.5v4l2.5 2M9 2h6'/%3E%3C/svg%3E");
	animation: np-tic 1s steps(2) infinite;
}
@keyframes np-tic { 50% { opacity: .35; } }

/* minuteur terminé */
.np-etape__duree.est-fini {
	background: var(--np-ocre);
	color: #fff;
	animation: np-sonne .6s ease 3;
}
@keyframes np-sonne { 50% { transform: scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
	.np-etape__duree.est-actif .np-etape__duree-ico,
	.np-etape__duree.est-fini { animation: none; }
}

/* =========================================================================
   Mode cuisine — uniquement des masquages et des agrandissements.
   Aucun deplacement d'element : sinon c'est un second gabarit a maintenir.
   ========================================================================= */

.np-mode-cuisine .site-header,
.np-mode-cuisine .site-footer,
.np-mode-cuisine #generate-slideout-menu,
.np-mode-cuisine .np-visuel,
.np-mode-cuisine .np-apercu,
.np-mode-cuisine .np-sommaire,
.np-mode-cuisine .np-corps > p,
.np-mode-cuisine .np-corps .is-style-np-encart,
.np-mode-cuisine .np-corps > details,
.np-mode-cuisine .np-corps .is-style-np-faq,
.np-mode-cuisine .np-partage,
.np-mode-cuisine .np-autrice { display: none !important; }

.np-mode-cuisine .np-fiche { max-width: 900px; font-size: 19px; }
.np-mode-cuisine .np-titre { font-size: 26px; }
.np-mode-cuisine .np-etape { padding: 16px 0; font-size: 19px; }
.np-mode-cuisine .np-etape__case { width: 26px; height: 26px; }
.np-mode-cuisine .np-etape__num { width: 32px; height: 32px; font-size: 15px; }
.np-mode-cuisine .np-liste-ing li { padding: 10px 0; font-size: 18px; }
.np-mode-cuisine .np-btn[data-np-action="cuisine"] { background: var(--np-ocre); }
.np-mode-cuisine .np-btn[data-np-action="cuisine"] span:last-child::after { content: " (quitter)"; }

/* =========================================================================
   Liste de courses — boîte de dialogue native
   ========================================================================= */

.np-courses {
	width: min(520px, 92vw);
	padding: 0;
	border: 0;
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(29, 63, 83, .22);
	color: var(--np-encre);
}
.np-courses::backdrop { background: rgba(29, 63, 83, .45); }

.np-courses__tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px 16px;
	border-bottom: 1px solid var(--np-bord);
}
.np-courses__titre { margin: 0; color: var(--np-navy); font-size: 20px; font-weight: 700; }
.np-courses__fermer {
	width: 46px; height: 46px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--np-bord);
	border-radius: 50%;
	background: #fff;
	color: var(--np-navy);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	transition: background .18s ease;
}
.np-courses__fermer:hover { background: var(--np-pale); }

.np-courses__liste { margin: 0; padding: 12px 24px; list-style: none; max-height: 52vh; overflow-y: auto; }
.np-courses__liste li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 2px 0;
}
.np-courses__liste li + li { border-top: 1px solid var(--np-bord); }
.np-courses__liste label {
	flex: 1 1 auto;
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 9px 0;
	min-width: 0;
	cursor: pointer;
}
.np-courses__liste label span { flex: 1 1 auto; }
.np-courses__liste label em { flex: 0 0 auto; color: var(--np-gris); font-style: normal; font-variant-numeric: tabular-nums; }
.np-courses__liste input {
	flex: 0 0 auto;
	width: 21px; height: 21px;
	accent-color: var(--np-navy);
	cursor: pointer;
}
.np-courses__liste input:checked + label span { color: var(--np-gris); text-decoration: line-through; }

.np-courses__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 16px 24px 22px;
	border-top: 1px solid var(--np-bord);
}

/* impression de la seule liste de courses */
.np-impression-liste body > *:not(.np-courses) { display: none !important; }
.np-impression-liste .np-courses { position: static; box-shadow: none; }
.np-impression-liste .np-courses__actions,
.np-impression-liste .np-courses__fermer { display: none !important; }


/* =========================================================================
   « Cet article vous a plu ? » — 3 recettes de la même catégorie
   ========================================================================= */

.np-similaires { margin: 10px 0 60px; }
.np-similaires__titre {
	margin: 0 0 26px;
	color: var(--np-encre);
	font-size: clamp(22px, 2.3vw, 30px);
	font-weight: 700;
	line-height: 1.25;
}
.np-similaires__coeur { color: #e0424a; margin-left: 6px; }

.np-similaires__liste {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* min-width:0 : un element de grille refuse par defaut d'etre plus etroit que
   son contenu — l'image (768 px intrinseques) elargissait la colonne et faisait
   deborder la page a 390 px (scrollWidth mesure a 808 px le 04/08). */
.np-similaires__liste li { min-width: 0; }

.np-carte-art__lien { display: block; overflow: hidden; border-radius: 6px; }
.np-carte-art__img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform .4s ease;
}
@media (hover: hover) {
	.np-carte-art__lien:hover .np-carte-art__img { transform: scale(1.04); }
}

.np-carte-art__date { margin: 14px 0 6px; color: var(--np-gris); font-size: 14.5px; }
.np-carte-art__titre { margin: 0 0 10px; font-size: 20px; line-height: 1.3; font-weight: 700; }
.np-carte-art__titre a { color: var(--np-ocre); text-decoration: none; }
.np-carte-art__titre a:hover { text-decoration: underline; }
.np-carte-art__extrait { margin: 0 0 12px; font-size: 15.5px; line-height: 1.6; }
.np-carte-art__suite {
	display: inline-block;
	color: var(--np-ocre);
	font-size: 15px;
	text-decoration: none;
}
.np-carte-art__suite:hover { text-decoration: underline; }

@media (max-width: 900px) {
	.np-similaires__liste { grid-template-columns: repeat(2, 1fr); gap: 26px; }
	.np-similaires__liste li:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 50%; }
}
@media (max-width: 600px) {
	.np-similaires__liste { grid-template-columns: 1fr; gap: 30px; }
	.np-similaires__liste li:last-child:nth-child(odd) { max-width: none; }
	.np-similaires { margin-bottom: 40px; }
}
@media print { .np-similaires { display: none !important; } }

/* =========================================================================
   Saisonnalité — 12 pastilles de mois dans « En un coup d'œil »
   ========================================================================= */

.np-saison {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid #cfdae6;
}
.np-saison__label { color: var(--np-gris); font-size: 13px; font-weight: 600; }
.np-saison__mois {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.np-saison__mois li {
	padding: 3px 8px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--np-bord);
	color: var(--np-gris);
	font-size: 12px;
	line-height: 1.4;
}
.np-saison__mois li.est-saison {
	background: var(--np-ocre);
	border-color: var(--np-ocre);
	color: #fff;
	font-weight: 600;
}

/* =========================================================================
   Progression des étapes — témoin fixe en haut d'écran
   ========================================================================= */

.np-progression {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 4px;
	z-index: 2147483000;
	background: transparent;
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s ease;
}
.np-progression.est-visible { opacity: 1; }
.np-progression i {
	display: block;
	width: 0;
	height: 100%;
	background: var(--np-ocre);
	transition: width .25s ease;
}

.np-etapes__avancement {
	flex: 0 0 auto;
	color: var(--np-gris);
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* =========================================================================
   Partage — épingler, WhatsApp, e-mail, copier
   ========================================================================= */

.np-partage {
	margin: 30px 0;
	padding: 24px 26px 26px;
	background: var(--np-pale2);
	border: 1px solid var(--np-bord);
	border-radius: var(--np-rayon);
	text-align: center;
}
.np-partage__titre {
	margin: 0 0 16px;
	color: var(--np-navy);
	font-size: 20px;
	font-weight: 700;
}
.np-partage__liste {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.np-partage__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 16px;
	background: #fff;
	border: 1px solid var(--np-bord);
	border-radius: 8px;
	color: var(--np-navy);
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.np-partage__btn .np-ico { width: 18px; height: 18px; }
@media (hover: hover) {
	.np-partage__btn:hover { background: var(--np-navy); border-color: var(--np-navy); color: #fff; }
}
.np-partage__btn:focus-visible { outline: 2px solid var(--np-orange); outline-offset: 2px; }

/* =========================================================================
   Épingler — l'infographie Pinterest 2:3
   ========================================================================= */

.np-epingler {
	margin: 30px 0;
	padding: 24px 26px 28px;
	background: var(--np-creme);
	border: 1px solid #eadfc8;
	border-radius: var(--np-rayon);
	text-align: center;
}
.np-epingler__titre {
	margin: 0 0 18px;
	color: var(--np-navy);
	font-size: 20px;
	font-weight: 700;
}
.np-epingler__figure { margin: 0 0 18px; }
.np-epingler__img {
	display: block;
	width: min(400px, 100%);
	height: auto;
	margin-inline: auto;
	border-radius: var(--np-rayon);
	box-shadow: 0 10px 30px rgba(29, 63, 83, .18);
}
.np-epingler__btn { text-decoration: none; }

@media print { .np-epingler { display: none !important; } }
.np-mode-cuisine .np-epingler { display: none !important; }

/* =========================================================================
   Opt-in livret — couverture + formulaire (mu-plugin 18-np-optin.php)
   ========================================================================= */

.np-optin {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 28px;
	align-items: center;
	margin: 30px 0 40px;
	padding: 28px 32px;
	background: var(--np-pale);
	border: 1px solid var(--np-bord);
	border-radius: var(--np-rayon);
}
.np-optin__figure { margin: 0; }
.np-optin__figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 10px 26px rgba(29, 63, 83, .22);
	transform: rotate(-2deg);
}
.np-optin__titre { margin: 0 0 8px; color: var(--np-navy); font-size: 22px; line-height: 1.3; }
.np-optin__accroche { margin: 0 0 16px; }
.np-optin__confirmation {
	margin: 0;
	padding: 14px 18px;
	background: #fff;
	border-left: 4px solid var(--np-ocre);
	border-radius: 6px;
	font-weight: 600;
}
.np-optin__piege { position: absolute; left: -9999px; top: -9999px; }
.np-optin__champs { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.np-optin__champ { flex: 1 1 180px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; color: var(--np-navy); }
.np-optin__champ em { color: var(--np-rouge); }
.np-optin__champ input {
	min-height: 46px;
	padding: 8px 14px;
	border: 1px solid var(--np-bord);
	border-radius: 8px;
	background: #fff;
	font: inherit;
	color: var(--np-encre);
}
.np-optin__champ input:focus-visible { outline: 2px solid var(--np-orange); outline-offset: 1px; }
.np-optin__consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-bottom: 14px;
	font-size: 14px;
	line-height: 1.5;
	cursor: pointer;
}
.np-optin__consent input { width: 19px; height: 19px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--np-navy); }
.np-optin__btn { border: 0; }
.np-optin__rgpd { margin: 12px 0 0; color: var(--np-gris); font-size: 12.5px; line-height: 1.5; }
.np-optin__rgpd a { color: var(--np-navy-doux); }

@media (max-width: 600px) {
	.np-optin { grid-template-columns: 1fr; padding: 20px 18px; text-align: center; }
	.np-optin__figure img { width: min(200px, 70%); margin-inline: auto; }
	.np-optin__consent { text-align: left; }
	.np-optin__btn { width: 100%; justify-content: center; }
}
@media print { .np-optin { display: none !important; } }
.np-mode-cuisine .np-optin { display: none !important; }

/* =========================================================================
   Dock mobile — raccourcis fixes en bas d'écran, mobile uniquement
   ========================================================================= */

.np-dock { display: none; }

@media (max-width: 600px) {
	.np-dock {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 2147482000;
		display: flex;
		gap: 10px;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, .96);
		border-top: 1px solid var(--np-bord);
		box-shadow: 0 -6px 18px rgba(29, 63, 83, .12);
	}
	.np-dock__btn {
		flex: 1 1 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 48px;
		padding: 10px 12px;
		background: #fff;
		border: 1px solid var(--np-bord);
		border-radius: 8px;
		color: var(--np-navy);
		font-size: 13px;
		font-weight: 600;
		font-family: inherit;
		letter-spacing: .02em;
		text-transform: uppercase;
		cursor: pointer;
	}
	.np-dock__btn--plein { background: var(--np-navy); border-color: var(--np-navy); color: #fff; }
	.np-dock__btn .np-ico { width: 18px; height: 18px; }
	.np-dock__btn:focus-visible { outline: 2px solid var(--np-orange); outline-offset: 2px; }

	/* la fiche laisse la place du dock pour que rien ne soit masqué en bas de page */
	.np-fiche:has(.np-dock) { padding-bottom: 84px; }

	/* en mode cuisine le raccourci « La recette » n'a plus d'objet : on ne garde
	   que la sortie du mode, alignée sur toute la largeur */
	.np-mode-cuisine .np-dock__btn[data-np-action="recette"] { display: none; }
	.np-mode-cuisine .np-dock__btn[data-np-action="cuisine"] { background: var(--np-ocre); border-color: var(--np-ocre); color: #fff; }
	.np-mode-cuisine .np-dock__btn[data-np-action="cuisine"] span:last-child::after { content: " (quitter)"; }
}

/* =========================================================================
   Tablette — 820 px
   ========================================================================= */
@media (max-width: 900px) {
	.np-apercu__liste { grid-template-columns: repeat(3, 1fr); }
	.np-apercu__item:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
	.np-colonnes { grid-template-columns: 1fr; }
	.np-autrice { grid-template-columns: 96px 1fr; }
	.np-autrice__photo { width: 96px; height: 96px; }
	.np-autrice__liens { grid-column: 1 / -1; }
	/* la grille vit sur le conteneur interne : c'est lui qu'il faut repasser en 1 colonne */
	.np-corps .is-style-np-faq .wp-block-group__inner-container,
	.np-corps .is-style-np-faq:not(:has(.wp-block-group__inner-container)) {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   Mobile — 390 px
   Corps ≥ 16 px, cibles tactiles ≥ 48 px.
   ========================================================================= */
@media (max-width: 600px) {
	.np-fiche { font-size: 16px; }
	.np-titre { font-size: 28px; }

	.np-actions { width: 100%; flex-direction: column; }
	.np-btn { width: 100%; justify-content: center; min-height: 48px; font-size: 14px; }

	.np-visuel__img { aspect-ratio: 4 / 3; }

	.np-apercu { padding: 16px 16px 18px; }
	.np-apercu__liste { grid-template-columns: repeat(2, 1fr); gap: 12px 0; }
	.np-apercu__item { padding: 0 12px; }
	.np-apercu__item:nth-child(odd) { border-left: 0; padding-left: 0; }
	.np-apercu__item:nth-child(3n + 1) { border-left: 1px solid var(--np-bord); padding-left: 12px; }
	.np-apercu__item:nth-child(odd) { border-left: 0; padding-left: 0; }

	.np-carte { padding: 16px; }
	.np-carte__tete { flex-direction: column; align-items: flex-start; }
	.np-compteur { padding: 6px 12px 6px 6px; }
	.np-compteur__btn { width: 34px; height: 34px; font-size: 17px; }

	.np-etape { grid-template-columns: 26px 1fr; gap: 10px; row-gap: 6px; }
	.np-etape__case { grid-column: 2; justify-self: start; order: 3; width: 22px; height: 22px; }
	.np-etape__duree { grid-column: 2; justify-self: start; order: 2; }

	.np-autrice { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.np-autrice__liens a { font-size: 15px; }
}

/* =========================================================================
   Impression
   Les <details> fermes ne s'impriment pas : le script les ouvre avant
   l'impression et restaure leur etat apres.
   ========================================================================= */
@media print {
	.np-actions, .np-sommaire, .np-autrice__liens,
	.np-partage, .np-dock, .np-progression, .np-etapes__avancement { display: none !important; }
	.np-fiche { font-size: 12pt; }
	.np-apercu, .np-carte, .np-corps details { background: #fff !important; border: 1px solid #ccc; }
	.np-etape, .np-liste-ing li { break-inside: avoid; }
	.np-visuel__img { max-height: 8cm; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}