/*
 * magazine-pages.css : composants communs aux pages du magazine qui ont un bandeau (page des articles et rubriques, recettes, vidéos ; maquettes 10, 12 et 13) :
 * bandeau (fil d'Ariane, surtitre, grand titre, texte), filtres, bas de page (bloc de la lettre puis bilan offert). Chargée sur ces pages seulement.
 * Mobile d'abord (390 px), puis paliers à 640, 960 et 1280 px. La couleur vient d'une classe « soin-… » posée sur la page.
 */

/* ---------- Bandeau : fil d'Ariane, surtitre, grand titre, texte, puces de rubriques ---------- */
.magazine-bandeau{position:relative;overflow:hidden;background:var(--creme)}
.magazine-bandeau__contenu{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding-block:16px 28px}
.magazine-bandeau .feuillage{width:190px;height:190px;right:-84px;top:-50px}
.magazine-bandeau__texte{position:relative;display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;margin-top:8px}
@media (min-width:640px){.magazine-bandeau__texte{margin-top:16px}}
.magazine-bandeau .surtitre{line-height:normal}
.magazine-bandeau__trait{display:none;width:44px;height:2px;margin-top:16px;border-radius:1px;background:var(--vert-lisere)}
.magazine-bandeau .grand-titre{margin-top:12px;font-size:34px;line-height:40px}
.magazine-bandeau__intro{max-width:640px;margin-top:12px;font-size:16px;line-height:26px;color:var(--texte-courant)}
.magazine-bandeau__cure{margin-top:14px}
.magazine-bandeau .rubriques-puces,.magazine-bandeau .filtres{align-self:stretch;margin-top:16px}
@media (min-width:640px){
	.magazine-bandeau__trait{display:block}
	.magazine-bandeau .grand-titre{font-size:44px;line-height:52px}
	.magazine-bandeau__intro{font-size:17px;line-height:29px}
}
@media (min-width:960px){
	.magazine-bandeau__contenu{padding-block:24px 56px}
	.magazine-bandeau__texte{margin-top:30px}
	.magazine-bandeau .grand-titre{margin-top:16px}
	.magazine-bandeau__intro{margin-top:16px}
	.magazine-bandeau .rubriques-puces{max-width:900px;margin-top:22px}
	.magazine-bandeau .filtres{margin-top:22px}
}
@media (min-width:1280px){
	.magazine-bandeau .feuillage{width:380px;height:380px;right:-40px}
	.magazine-bandeau .grand-titre{font-size:52px;line-height:60px}
}

/* ---------- Filtres (recettes, vidéos) : une ligne qui se parcourt sur mobile, des lignes à partir de 640 px ---------- */
.filtres__liste{display:flex;gap:8px;margin-block:-2px;padding-block:2px;overflow-x:auto;scrollbar-width:none}
.filtres__liste::-webkit-scrollbar{display:none}
.filtres__liste>li{flex:none}
.filtre{position:relative;display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:1px solid var(--filet);border-radius:21px;background:var(--blanc);font-size:14px;font-weight:500;line-height:normal;white-space:nowrap;color:var(--encre)}
.filtre::after{content:"";position:absolute;inset:-2px 0}
.filtre:hover{border-color:var(--soin-lisere);color:var(--encre)}
.filtre--actif,.filtre--actif:hover{padding:0 18px;border-width:0;border-color:var(--soin-bandeau);background:var(--soin-bandeau);font-size:15px;font-weight:600;color:var(--blanc)}
.filtre__coche{flex:none}
.filtre__pastille{flex:none;width:9px;height:9px;border-radius:50%;background:var(--soin-lisere)}
.filtres--recettes .filtre{height:44px;border-radius:22px}
.filtres--recettes .filtre--tout,.filtres--recettes .filtre--phase{padding:0 18px;border:1.5px solid var(--filet-puce);font-size:15px}
.filtres--recettes .filtre--actif,.filtres--recettes .filtre--actif:hover{border-width:0;border-color:var(--soin-bandeau)}
.filtres__separateur{flex:none;width:1px;margin-inline:8px;background:var(--beige-filet)}
@media (min-width:640px){.filtres__liste{flex-wrap:wrap;margin-block:0;padding-block:0;overflow:visible}}

/* ---------- Bas de page du magazine (recettes, vidéos) : bloc de la lettre puis bilan offert ---------- */
.magazine-fin__contenu{display:flex;flex-direction:column;gap:14px;padding-block:28px}
@media (min-width:960px){.magazine-fin__contenu{gap:24px;padding-block:64px}}
/* Comme les maquettes : la hauteur de ces puces s'ajoute à leur bordure (rubrique 42 + 2, type de plat 44 + 2) */
.filtre--rubrique{height:44px}
.filtres--recettes .filtre--type{height:46px;font-weight:400}