/*
 * magazine.css : mise en page propre à la page des articles et aux rubriques (maquette 10) : puces de rubriques,
 * article à la une et derniers articles, « À lire aussi », bloc des recettes, bloc de la lettre. Chargée sur ces pages seulement.
 * Les composants (bandeau, carte d'article, étiquette de rubrique, bloc de la lettre, pagination) sont dans composants-magazine.css.
 * Mobile d'abord (390 px), puis paliers à 640, 960 et 1280 px.
 */

/* ---------- Puces de rubriques : une ligne qui se parcourt sur mobile, des lignes à partir de 960 px ---------- */
.rubriques-puces__liste{display:flex;gap:8px;margin-block:-2px;padding-block:2px;overflow-x:auto;scrollbar-width:none}
.rubriques-puces__liste::-webkit-scrollbar{display:none}
.rubriques-puces__puce{position:relative;display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:1px solid var(--filet);border-radius:20px;background:var(--blanc);font-size:14px;font-weight:500;line-height:normal;white-space:nowrap;color:var(--encre)}
.rubriques-puces__puce::after{content:"";position:absolute;inset:-2px 0}
.rubriques-puces__puce:hover{border-color:var(--soin-lisere);color:var(--encre)}
.rubriques-puces__puce[aria-current="page"]{border-color:var(--soin-lisere);box-shadow:inset 0 0 0 1px var(--soin-lisere)}
.rubriques-puces__pastille{flex:none;width:9px;height:9px;border-radius:50%;background:var(--soin-lisere)}
@media (min-width:640px){.rubriques-puces__liste{flex-wrap:wrap;margin-block:0;padding-block:0;overflow:visible}}

/* ---------- À la une et derniers articles ---------- */
.magazine-haut__grille{display:flex;flex-direction:column;padding-bottom:0}
.magazine-une{padding-bottom:28px}
.magazine-derniers{margin-inline:calc(var(--marge) * -1);padding:28px var(--marge) 18px;background:var(--blanc)}
.magazine-derniers .titre-section,.magazine-aussi .titre-section{--c-titre:var(--vert-titre);--c-filet:var(--beige-filet)}
.magazine-derniers .titre-section__titre,.magazine-aussi .titre-section__titre{font-size:26px;line-height:33px}
.magazine-derniers .titre-section__titre{font-weight:600}
.magazine-derniers__liste{margin-top:6px}
.magazine-haut:last-child .magazine-derniers{padding-bottom:28px}
@media (min-width:960px){
	.magazine-haut:last-child .magazine-derniers{padding-bottom:0}
	.magazine-haut__grille{display:grid;grid-template-columns:1.25fr 1fr;align-items:start;gap:40px;padding-bottom:64px}
	.magazine-une{padding-bottom:0}
	.magazine-derniers{margin-inline:0;padding:0;background:none}
	/* Titre de la colonne : petites capitales soulignées d'un trait de couleur, à la place du titre de section du mobile */
	.magazine-derniers .titre-section{display:block;padding-bottom:12px;border-bottom:2px solid var(--vert-lisere)}
	.magazine-derniers .titre-section__trait,.magazine-derniers .titre-section__filet{display:none}
	.magazine-derniers .titre-section__titre{font-family:var(--police-texte);font-weight:500;font-size:12px;line-height:18px;letter-spacing:.2em;text-transform:uppercase;color:var(--vert-titre)}
	.magazine-derniers__liste{margin-top:0}
}
@media (min-width:1280px){.magazine-derniers .titre-section__titre{font-size:12px;letter-spacing:.26em}}

/* ---------- À lire aussi : trois cartes (rangées sur mobile) ---------- */
.magazine-aussi{padding-block:28px}
.magazine-aussi__liste{margin-top:6px}
.magazine-aussi__tous{margin-top:16px;border-color:var(--vert);color:var(--vert-fonce)}
.magazine-aussi .titre-section__lien{display:none}
.magazine-derniers+.magazine-aussi,.magazine-haut+.magazine-aussi{padding-top:0}
@media (min-width:640px){
	.magazine-aussi__liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}
}
@media (min-width:960px){
	.magazine-aussi .titre-section__titre{font-size:36px;line-height:44px}
	.magazine-aussi{padding-block:68px}
	.magazine-aussi__liste{grid-template-columns:repeat(3,minmax(0,1fr))}
	.magazine-aussi .titre-section__lien{display:block;font-size:15px}
	.magazine-aussi__tous{display:none}
	.magazine-haut+.magazine-aussi{padding-top:68px}
}
/* Pages suivantes de la liste : huit cartes, quatre par ligne sur grand écran */
@media (min-width:1280px){.magazine-aussi__liste--suite{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- Bloc des recettes ---------- */
.bloc-recettes{background:var(--recettes-fond)}
.bloc-recettes__contenu{display:flex;flex-direction:column;gap:16px;padding-block:30px}
.bloc-recettes__surtitre{font-size:12px;color:var(--soin-texte)}
.bloc-recettes__description{margin-top:-6px;font-size:15px;line-height:25px;color:var(--texte-courant)}
.bloc-recettes__titre{font-family:var(--police-titre);font-weight:700;font-size:24px;line-height:31px;color:var(--soin-texte)}
.bloc-recettes__phases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bloc-recettes__phase{display:flex;align-items:center;gap:14px;height:100%;padding:14px;border-radius:14px;background:var(--blanc);color:var(--encre)}
.bloc-recettes__phase:hover{color:var(--encre)}
.bloc-recettes__numero{display:flex;flex:none;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--soin-lisere);font-family:var(--police-titre);font-weight:700;font-size:20px;line-height:normal;color:var(--blanc)}
.bloc-recettes__nom{font-family:var(--police-titre);font-weight:700;font-size:18px;line-height:normal}
.bloc-recettes__toutes{display:flex;align-items:center;justify-content:center;height:100%;min-height:44px;padding:14px;border:1.5px solid var(--soin-texte);border-radius:14px;font-size:15px;font-weight:600;line-height:normal;text-align:center;color:var(--soin-texte)}
.bloc-recettes__toutes:hover{background:var(--blanc);color:var(--soin-texte)}
@media (min-width:960px){
	.bloc-recettes__contenu{display:grid;grid-template-columns:clamp(260px,28vw,360px) minmax(0,1fr);align-items:center;gap:56px;padding-block:56px}
	.bloc-recettes__titre{margin-top:10px;font-size:32px;line-height:40px}
	.bloc-recettes__description{margin-top:10px}
	.bloc-recettes__phases{gap:14px}
	.bloc-recettes__phase{padding:18px 20px}
	.bloc-recettes__toutes{padding:18px 20px}
}
/* Quatre phases sur une ligne seulement quand la place suffit (le nom ne dépasse plus de sa carte à 960 px) */
@media (min-width:1280px){.bloc-recettes__phases{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- Bloc de la lettre : fond de page ---------- */
.magazine-lettre{padding-block:28px}
@media (min-width:960px){.magazine-lettre{padding-block:64px}}

/* ---------- Rubrique sans article ---------- */
.magazine-vide{padding-block:36px}
.magazine-vide__texte{font-size:17px;line-height:29px;color:var(--texte-courant)}
.magazine-vide .lien-fort{display:inline-block;margin-top:14px}