/*
 * Plato – Articles du magazine
 * Reprise de la maquette « Plato - Articles » (design system Plato, accents
 * brume). Polices Fredoka et Fira Sans : déjà chargées par le site.
 *
 * Préfixe .plato-articles / .plato-articles-page, sélecteurs à deux classes :
 * Divi stylise h1-h3, p, a, button et input.
 */

.plato-articles,
.plato-articles-page {
	--pa-encre: #2A2536;
	--pa-gris: #4E495C;
	--pa-gris-doux: #6F6A7C;
	--pa-pale: #8A8496;
	--pa-fond: #FBF7F1;
	--pa-bord: #EFE9E1;
	--pa-bord-champ: #D8D3DD;
	--pa-puce: #F3EEE6;
	--pa-framboise: #E6317F;
	--pa-framboise-fonce: #C31F68;
	--pa-framboise-pale: #F9C6DD;
	--pa-brume: #6E51A3;
	--pa-brume-fonce: #523C7A;
	--pa-brume-moyen: #A78BDB;
	--pa-brume-pale: #E4D8F5;
	--pa-brume-voile: #F5F1FB;
	--pa-brume-200: #D0BEEC;
	--pa-brume-900: #372851;
	--pa-soleil-voile: #FEF6E7;
	--pa-soleil-clair: #FCE2B8;
	--pa-soleil-fonce: #86530A;
	--pa-lagon-pale: #BEE7E8;
	--pa-titre: 'Fredoka', sans-serif;
	--pa-texte: 'Fira Sans', sans-serif;
	--pa-collant-haut: 0px;
	--pa-colonne-min: 320px;

	font-family: var(--pa-texte);
	color: var(--pa-encre);
	-webkit-font-smoothing: antialiased;
}

.plato-articles *,
.plato-articles-page * {
	box-sizing: border-box;
}

@keyframes paApparait { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes paFondu { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------- Page --- */

/* Toute la largeur de l'écran, quelle que soit la rangée Divi (supposée
   centrée : page sans barre latérale) ; contenu centré sur 1 240 px. */
.plato-articles-page {
	position: relative;
	width: auto;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow-x: clip;
}

body:has(.plato-articles-page) { overflow-x: clip; }

.plato-articles-page.pa-page--fond { background: var(--pa-fond); }

.plato-articles-page .pa-page__contenu {
	box-sizing: border-box;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 40px) 96px;
}

.plato-articles,
.plato-articles .pa-grille,
.plato-articles .pa-filtres,
.plato-articles-page .pa-entete {
	min-width: 0;
	max-width: 100%;
}

.plato-articles-page .pa-entete {
	position: relative;
	padding: clamp(32px, 6vw, 56px) 0 36px;
}

.plato-articles-page .pa-entete__texte { position: relative; z-index: 1; max-width: 640px; }

.plato-articles-page .pa-entete__titre {
	font-family: var(--pa-titre);
	font-weight: 600;
	font-size: clamp(40px, 6vw, 68px);
	line-height: 1;
	letter-spacing: -.01em;
	color: var(--pa-encre);
	margin: 0 0 18px;
	padding: 0;
}

.plato-articles-page .pa-entete__intro {
	font-size: 17px;
	line-height: 1.55;
	color: var(--pa-gris);
	margin: 0;
	padding: 0;
	text-wrap: pretty;
}

.plato-articles-page .pa-abonnement {
	margin-top: 72px;
	background: var(--pa-brume-900);
	color: #fff;
	border-radius: 32px;
	padding: clamp(28px, 5vw, 48px);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 24px;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.plato-articles-page .pa-abonnement__tache {
	position: absolute;
	right: -50px;
	bottom: -70px;
	width: 240px;
	height: 240px;
	background: var(--pa-brume-fonce);
	border-radius: 42% 58% 63% 37% / 48% 42% 58% 52%;
	pointer-events: none;
}

.plato-articles-page .pa-abonnement__texte { position: relative; flex: 1 1 320px; }
.plato-articles-page .pa-abonnement .pa-bouton {
	position: relative;
	background: var(--pa-brume-200);
	color: var(--pa-brume-900);
	box-shadow: none;
}

/* Brume 200 sur brume 900 : 7,5:1 ; texte brume 100 sur brume 900 : 11:1. */
.plato-articles-page .pa-abonnement .pa-bouton:hover { background: var(--pa-brume-pale); color: var(--pa-brume-900); }

.plato-articles-page .pa-abonnement__titre {
	font-family: var(--pa-titre);
	font-weight: 600;
	font-size: clamp(28px, 3.6vw, 38px);
	line-height: 1.1;
	color: #fff;
	margin: 0 0 10px;
	padding: 0;
}

.plato-articles-page .pa-abonnement__intro {
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--pa-brume-pale);
	max-width: 520px;
	text-wrap: pretty;
}

/* ------------------------------------------------------------- Boutons --- */

.plato-articles .pa-bouton,
.plato-articles-page .pa-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--pa-texte);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	color: #fff;
	background: var(--pa-framboise);
	border: none;
	border-radius: 999px;
	padding: 12px 20px;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}

.plato-articles .pa-bouton:hover,
.plato-articles-page .pa-bouton:hover { background: var(--pa-framboise-fonce); color: #fff; }
.plato-articles .pa-bouton:active,
.plato-articles-page .pa-bouton:active { transform: translateY(1px); }

.plato-articles-page .pa-bouton--grand {
	font-size: 16px;
	padding: 15px 26px;
	box-shadow: 0 12px 30px rgba(230, 49, 127, .28);
}

.plato-articles .pa-bouton--contour {
	background: #fff;
	color: var(--pa-encre);
	border: 1.5px solid var(--pa-bord-champ);
}

.plato-articles .pa-bouton--contour:hover {
	background: #FDF0F6;
	color: var(--pa-framboise);
	border-color: var(--pa-framboise);
}

.plato-articles .pa-lien-bouton {
	font-family: var(--pa-texte);
	font-weight: 600;
	font-size: 14px;
	color: var(--pa-framboise);
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px 0;
}

.plato-articles .pa-lien-bouton:hover { color: var(--pa-framboise-fonce); }

.plato-articles button:focus-visible,
.plato-articles a:focus-visible,
.plato-articles-page a:focus-visible {
	outline: 3px solid var(--pa-framboise-pale);
	outline-offset: 2px;
}

.plato-articles [hidden] { display: none !important; }

/* ------------------------------------------------------------- Filtres --- */

.plato-articles .pa-filtres {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: 14px 0 16px;
	border-bottom: 1.5px solid var(--pa-bord);
}

@media (min-width: 1100px) {
	.plato-articles .pa-filtres--recherche { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

.plato-articles .pa-filtres--collant {
	position: sticky;
	top: var(--pa-collant-haut);
	z-index: 5;
	background: var(--pa-fond);
}

.plato-articles .pa-filtres__menus {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	gap: 12px;
	min-width: 0;
}

/* Téléphone : barre non collante (cinq champs empilés couvriraient l'écran). */
@media (max-width: 640px) {
	.plato-articles .pa-filtres { gap: 10px; }
	.plato-articles .pa-filtres--collant { position: static; }
	.plato-articles .pa-filtres .pa-filtres__menus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.plato-articles .pa-filtres .pa-menu .pa-menu__bouton { padding: 0 14px 0 16px; gap: 6px; }
}

.plato-articles .pa-recherche {
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1.5px solid var(--pa-bord-champ);
	border-radius: 999px;
	padding: 0 18px;
	height: 46px;
	margin: 0;
	color: var(--pa-pale);
	transition: border-color .2s ease;
}

.plato-articles .pa-recherche:focus-within { border-color: var(--pa-framboise); }
.plato-articles .pa-recherche svg { flex: none; }

.plato-articles .pa-recherche .pa-recherche__champ {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: none;
	outline: none;
	background: transparent;
	box-shadow: none;
	padding: 0;
	margin: 0;
	font-family: var(--pa-texte);
	font-size: 15px;
	color: var(--pa-encre);
	-webkit-appearance: none;
	appearance: none;
}

.plato-articles .pa-recherche__champ::placeholder { color: #B4AEB9; opacity: 1; }
.plato-articles .pa-recherche__champ::-webkit-search-cancel-button { display: none; }

.plato-articles .pa-recherche .pa-recherche__effacer {
	flex: none;
	border: none;
	background: var(--pa-puce);
	width: 24px;
	height: 24px;
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
	color: var(--pa-gris);
	font-size: 14px;
	line-height: 1;
}

.plato-articles .pa-menu { position: relative; min-width: 0; }

.plato-articles .pa-menu .pa-menu__bouton {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	background: #fff;
	border: 1.5px solid var(--pa-bord-champ);
	border-radius: 999px;
	padding: 0 16px 0 18px;
	height: 46px;
	margin: 0;
	cursor: pointer;
	font-family: var(--pa-texte);
	color: var(--pa-encre);
	transition: border-color .2s ease;
}

.plato-articles .pa-menu.est-ouvert .pa-menu__bouton,
.plato-articles .pa-menu.est-actif .pa-menu__bouton { border-color: var(--pa-framboise); }

.plato-articles .pa-menu__etiquette { font-size: 13.5px; color: var(--pa-pale); white-space: nowrap; }

.plato-articles .pa-menu__valeur {
	font-weight: 600;
	font-size: 14.5px;
	color: var(--pa-encre);
	white-space: nowrap;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
}

.plato-articles .pa-menu__fleche {
	font-size: 9px;
	color: var(--pa-gris);
	display: inline-block;
	transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

.plato-articles .pa-menu.est-ouvert .pa-menu__fleche { transform: rotate(180deg); }

.plato-articles .pa-menu__liste {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: auto;
	z-index: 20;
	width: max(100%, 240px);
	max-width: calc(100vw - 32px);
	background: #fff;
	border: 1.5px solid var(--pa-bord);
	border-radius: 22px;
	box-shadow: 0 18px 44px rgba(42, 37, 54, .14);
	padding: 8px;
	opacity: 0;
	transform: translateY(-6px);
	visibility: hidden;
	transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1), visibility .2s;
}

.plato-articles .pa-menu.est-a-droite .pa-menu__liste { left: auto; right: 0; }

.plato-articles .pa-menu.est-ouvert .pa-menu__liste {
	opacity: 1;
	transform: none;
	visibility: visible;
}

.plato-articles .pa-menu__options {
	max-height: min(340px, 55vh);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.plato-articles .pa-menu .pa-option {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	margin: 0;
	border: none;
	border-radius: 14px;
	background: transparent;
	cursor: pointer;
	font-family: var(--pa-texte);
	text-align: left;
	color: var(--pa-encre);
	transition: background .15s ease;
}

.plato-articles .pa-menu .pa-option:hover,
.plato-articles .pa-menu .pa-option:focus-visible { background: var(--pa-fond); outline: none; }

.plato-articles .pa-option__marque {
	position: relative;
	width: 20px;
	height: 20px;
	flex: none;
	border: 1.5px solid var(--pa-bord-champ);
	background: #fff;
	transition: background .15s ease, border-color .15s ease;
}

.plato-articles .pa-option--case .pa-option__marque { border-radius: 6px; }
.plato-articles .pa-option--rond .pa-option__marque { border-radius: 50%; }
.plato-articles .pa-option[aria-selected="true"] .pa-option__marque { border-color: var(--pa-framboise); }
.plato-articles .pa-option--case[aria-selected="true"] .pa-option__marque { background: var(--pa-framboise); }

.plato-articles .pa-option--case .pa-option__marque::after {
	content: '✔';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 12px;
	line-height: 1;
	opacity: 0;
}

.plato-articles .pa-option--case[aria-selected="true"] .pa-option__marque::after { opacity: 1; }

.plato-articles .pa-option--rond .pa-option__marque::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: var(--pa-framboise);
	transform: scale(0);
	transition: transform .18s cubic-bezier(.2, .8, .2, 1);
}

.plato-articles .pa-option--rond[aria-selected="true"] .pa-option__marque::after { transform: scale(1); }

.plato-articles .pa-option__libelle {
	flex: 1;
	font-family: var(--pa-titre);
	font-weight: 600;
	font-size: 15px;
	color: var(--pa-encre);
}

.plato-articles .pa-option__compte { font-size: 12.5px; color: var(--pa-pale); }

.plato-articles .pa-menu__pied {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	border-top: 1px solid var(--pa-bord);
	margin-top: 6px;
	padding: 8px 6px 2px;
}

.plato-articles .pa-menu .pa-menu__effacer {
	font-family: var(--pa-texte);
	font-weight: 600;
	font-size: 13.5px;
	color: var(--pa-gris-doux);
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
}

.plato-articles .pa-menu .pa-menu__effacer:hover { color: var(--pa-framboise-fonce); }

.plato-articles .pa-menu .pa-menu__valider {
	font-family: var(--pa-texte);
	font-weight: 600;
	font-size: 13.5px;
	color: #fff;
	background: var(--pa-framboise);
	border: none;
	border-radius: 999px;
	cursor: pointer;
	padding: 7px 16px;
	transition: background .18s ease;
}

.plato-articles .pa-menu .pa-menu__valider:hover { background: var(--pa-framboise-fonce); }

/* ----------------------------------------------------------- Résultats --- */

.plato-articles .pa-resultats {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 22px 0 8px;
	font-size: 14.5px;
	color: var(--pa-gris);
}

.plato-articles .pa-resultats__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-left: auto;
}

.plato-articles .pa-vues {
	display: inline-flex;
	padding: 3px;
	background: #fff;
	border: 1.5px solid var(--pa-bord-champ);
	border-radius: 999px;
}

.plato-articles .pa-vues .pa-vues__bouton {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--pa-texte);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	color: var(--pa-gris);
	background: transparent;
	border: none;
	border-radius: 999px;
	padding: 7px 13px;
	margin: 0;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.plato-articles .pa-vues .pa-vues__bouton:hover { color: var(--pa-framboise-fonce); }
.plato-articles .pa-vues .pa-vues__bouton[aria-pressed="true"] { background: var(--pa-encre); color: #fff; }

@media (max-width: 480px) {
	.plato-articles .pa-vues__bouton span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.plato-articles .pa-vues .pa-vues__bouton { padding: 7px 10px; }
}

.plato-articles .pa-resultats strong {
	font-family: var(--pa-titre);
	font-weight: 600;
	font-size: 17px;
	color: var(--pa-encre);
}

/* --------------------------------------------------- Groupes (numéros) --- */

.plato-articles .pa-groupes {
	display: flex;
	flex-direction: column;
	gap: 56px;
	padding-top: 18px;
}

.plato-articles .pa-groupe { animation: paFondu .35s ease both; }

.plato-articles .pa-groupe__entete {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	padding-bottom: 20px;
	border-bottom: 1.5px solid var(--pa-bord);
}

/* L'image du produit est déjà un mockup (magazine en volume, détouré) :
   affichée telle quelle, sans cadre ni fond. */
.plato-articles .pa-groupe__couverture {
	width: 116px;
	flex: none;
	margin: -10px 0;
}

.plato-articles .pa-groupe__couverture img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	margin: 0;
}

@media (max-width: 640px) {
	.plato-articles .pa-groupe__couverture { width: 84px; margin: -6px 0; }
}

.plato-articles .pa-groupe__texte { flex: 1 1 220px; min-width: 0; }

/* Numéros repliables : tout l'en-tête est cliquable. */
.plato-articles .pa-groupe--repliable .pa-groupe__entete { cursor: pointer; }

.plato-articles .pa-groupe .pa-groupe__bascule {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font: inherit;
	line-height: inherit;
	color: inherit;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	text-align: left;
	cursor: pointer;
	transition: color .3s ease;
}

.plato-articles .pa-groupe--repliable .pa-groupe__entete:hover .pa-groupe__bascule { color: var(--pa-brume-fonce); }

/* Chevron : SVG centré par flex (aucun décalage à la main). Brume clair quand
   le numéro est replié, brume plein quand il est déplié ; la rotation finit
   par un léger rebond. */
.plato-articles .pa-groupe__chevron {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--pa-brume-voile);
	border: 1.5px solid var(--pa-brume-pale);
	color: var(--pa-brume);
	transition: background .45s ease, border-color .45s ease, color .45s ease, transform .7s cubic-bezier(.34, 1.4, .64, 1);
}

.plato-articles .pa-groupe__chevron svg { display: block; margin-top: 1px; }

.plato-articles .pa-groupe--repliable .pa-groupe__entete:hover .pa-groupe__chevron {
	background: var(--pa-brume-pale);
	border-color: var(--pa-brume-200);
}

.plato-articles .pa-groupe:not(.est-replie) .pa-groupe__chevron,
.plato-articles .pa-groupe--repliable:not(.est-replie) .pa-groupe__entete:hover .pa-groupe__chevron {
	background: var(--pa-brume);
	border-color: var(--pa-brume);
	color: #fff;
	transform: rotate(180deg);
}

.plato-articles .pa-groupe .pa-groupe__bascule:focus-visible {
	outline: 3px solid var(--pa-framboise-pale);
	outline-offset: 4px;
	border-radius: 8px;
}

/* Ouverture / fermeture : la hauteur se déroule (grille 0fr → 1fr) sur une
   courbe douce, le contenu glisse et apparaît en fondu un peu après, les
   cartes arrivent en cascade (script). Fermeture un peu plus rapide.
   L'intérieur n'a pas de padding vertical (il empêcherait la hauteur de
   tomber à zéro) : les espaces haut et bas sont des pseudo-éléments, rognés
   avec le reste. Le débord latéral laisse respirer les ombres des cartes.
   Replié, le contenu devient invisible une fois fermé : plus de focus clavier. */
.plato-articles {
	--pa-repli-duree: .75s;
	--pa-repli-courbe: cubic-bezier(.45, .05, .25, 1);
}

.plato-articles .pa-groupe__contenu {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows var(--pa-repli-duree) var(--pa-repli-courbe);
}

.plato-articles .pa-groupe__interieur {
	min-height: 0;
	overflow: hidden;
	padding: 0 16px;
	margin: 0 -16px;
	opacity: 1;
	transform: none;
	visibility: visible;
	transition:
		opacity .6s ease .15s,
		transform var(--pa-repli-duree) var(--pa-repli-courbe),
		visibility 0s;
}

.plato-articles .pa-groupe__interieur::before,
.plato-articles .pa-groupe__interieur::after {
	content: '';
	display: block;
	height: 24px;
}

.plato-articles .pa-groupe.est-replie .pa-groupe__contenu {
	grid-template-rows: 0fr;
	transition-duration: .6s;
}

.plato-articles .pa-groupe.est-replie .pa-groupe__interieur {
	opacity: 0;
	transform: translateY(-16px);
	visibility: hidden;
	transition:
		opacity .35s ease,
		transform .6s var(--pa-repli-courbe),
		visibility 0s .6s;
}

.plato-articles .pa-groupe__couverture { transition: width var(--pa-repli-duree) var(--pa-repli-courbe), margin var(--pa-repli-duree) var(--pa-repli-courbe); }
.plato-articles .pa-groupe.est-replie .pa-groupe__couverture { width: 76px; }

/* Téléphone : un numéro replié tient sur une ligne (le bouton d'achat
   revient quand on le déplie). */
@media (max-width: 640px) {
	.plato-articles .pa-groupe.est-replie .pa-groupe__couverture { width: 52px; margin: -4px 0; }
	.plato-articles .pa-groupe.est-replie .pa-groupe__entete .pa-bouton { display: none; }
	.plato-articles .pa-groupe .pa-groupe__bascule { gap: 10px; }
	.plato-articles .pa-groupe__chevron { width: 32px; height: 32px; }
}

/* Numéros repliés plus serrés ; un numéro déplié garde de l'air après lui. */
.plato-articles .pa-groupes:has(.pa-groupe--repliable) { gap: 26px; }
.plato-articles .pa-groupe--repliable + .pa-groupe { transition: margin-top var(--pa-repli-duree) var(--pa-repli-courbe); }
.plato-articles .pa-groupe--repliable:not(.est-replie) + .pa-groupe { margin-top: 10px; }

.plato-articles .pa-groupe__tri {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 22px;
}

.plato-articles .pa-groupe__tri-libelle {
	font-size: 13px;
	color: var(--pa-pale);
	margin-right: 4px;
}

.plato-articles .pa-groupe .pa-groupe__tri-bouton {
	font-family: var(--pa-texte);
	font-weight: 600;
	font-size: 13px;
	line-height: 1.2;
	color: var(--pa-gris);
	background: #fff;
	border: 1.5px solid var(--pa-bord-champ);
	border-radius: 999px;
	padding: 6px 13px;
	margin: 0;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.plato-articles .pa-groupe .pa-groupe__tri-bouton:hover { border-color: var(--pa-framboise); color: var(--pa-framboise-fonce); }

.plato-articles .pa-groupe .pa-groupe__tri-bouton[aria-pressed="true"] {
	background: var(--pa-encre);
	border-color: var(--pa-encre);
	color: #fff;
}

.plato-articles .pa-groupe .pa-groupe__compte {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--pa-brume);
	margin: 0 0 4px;
	padding: 0;
}

.plato-articles .pa-groupe .pa-groupe__titre {
	font-family: var(--pa-titre);
	font-weight: 600;
	font-size: clamp(26px, 3.4vw, 34px);
	line-height: 1.05;
	color: var(--pa-encre);
	margin: 0;
	padding: 0;
}

.plato-articles:not(.pa--groupes) > .pa-grille { margin-top: 18px; }

/* -------------------------------------------------------------- Grille --- */

.plato-articles .pa-grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--pa-colonne-min)), 1fr));
	gap: 24px;
}

.plato-articles.pa--colonnes .pa-grille { grid-template-columns: repeat(var(--pa-colonnes), minmax(0, 1fr)); }

/* Maçonnerie (posée par le script) : rangées de 2 px, chaque carte en couvre
   autant que sa hauteur + l'écart. Les cartes gardent leur hauteur propre et
   l'écart vertical reste celui des colonnes. Sans script : grille classique. */
.plato-articles .pa-grille.pa-grille--maconnerie {
	grid-auto-rows: 2px;
	row-gap: 0 !important; /* l'écart est compté dans les rangées ; les gap des media queries ne doivent pas s'y ajouter */
	align-items: start;
}

@media (max-width: 1024px) {
	.plato-articles.pa--colonnes .pa-grille { grid-template-columns: repeat(min(var(--pa-colonnes), 2), minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.plato-articles .pa-grille,
	.plato-articles.pa--colonnes .pa-grille { grid-template-columns: minmax(0, 1fr); }

	.plato-articles.pa--mobile-2 .pa-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.plato-articles.pa--mobile-2 .pa-carte { border-radius: 20px; }
	.plato-articles.pa--mobile-2 .pa-carte__corps { padding: 18px 14px 16px; gap: 12px; }
	.plato-articles.pa--mobile-2 .pa-carte__titre { font-size: 17px; }
	.plato-articles.pa--mobile-2 .pa-carte__bloc,
	.plato-articles.pa--mobile-2 .pa-carte__avatars { display: none; }
	.plato-articles.pa--mobile-2 .pa-carte__visuel .pa-carte__note { width: 48px; height: 48px; bottom: -22px; right: 10px; }
	.plato-articles.pa--mobile-2.pa--cartes .pa-carte--image.pa-carte--note .pa-carte__tete { padding-right: 40px; }
	.plato-articles.pa--mobile-2 .pa-carte__tete > .pa-carte__note { width: 40px; height: 40px; }
	.plato-articles.pa--mobile-2 .pa-carte__page { right: 10px; width: 50px; height: 54px; }
	.plato-articles.pa--mobile-2 .pa-carte__ruban { padding-top: 9px; }
	.plato-articles.pa--mobile-2 .pa-carte__page-p { font-size: 9px; }
	.plato-articles.pa--mobile-2 .pa-carte__page-n { font-size: 13px; }
	.plato-articles.pa--mobile-2 .pa-carte__sous-titre { font-size: 13px; }

	.plato-articles .pa-groupe__entete .pa-bouton { width: 100%; }
}

/* --------------------------------------------------------------- Carte --- */

.plato-articles .pa-carte {
	position: relative;
	background: #fff;
	border: 1.5px solid var(--pa-bord);
	border-radius: 26px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	transition: border-color .2s ease, box-shadow .25s ease;
}

.plato-articles .pa-carte.pa-anime {
	animation: paApparait .6s cubic-bezier(.22, 1, .36, 1) both;
	animation-delay: var(--pa-delai, 0s);
}

.plato-articles .pa-carte:hover {
	border-color: var(--pa-brume-pale);
	box-shadow: 0 14px 34px rgba(42, 37, 54, .10);
}

.plato-articles .pa-carte__visuel {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--pa-puce);
}

/* Pas d'overflow sur le visuel : le meeple en déborde sur le corps ; c'est
   la carte qui arrondit les coins de l'image. */
.plato-articles .pa-carte .pa-carte__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	margin: 0;
}

.plato-articles .pa-carte__rubrique {
	display: inline-block;
	font-family: var(--pa-titre);
	font-weight: 600;
	font-size: 12.5px;
	line-height: 1.2;
	background: var(--pa-brume);
	color: #fff;
	padding: 5px 12px;
	border-radius: 999px;
}

.plato-articles .pa-carte__visuel .pa-carte__rubrique { position: absolute; top: 14px; left: 14px; }

.plato-articles .pa-carte .pa-carte__note {
	flex: none;
	width: 56px;
	height: 56px;
	max-width: none;
	margin: 0;
	object-fit: contain;
	filter: drop-shadow(0 2px 3px rgba(42, 37, 54, .12));
}

/* Avec photo : le meeple chevauche le bas de la photo, comme la maquette. */
.plato-articles .pa-carte__visuel .pa-carte__note {
	position: absolute;
	right: 16px;
	bottom: -28px;
	width: 64px;
	height: 64px;
	z-index: 1;
}

/* Marque-page : la page de l'article dans le magazine, accrochée en haut à
   droite de la carte (sur la photo s'il y en a une). Taille fixe, que
   l'article tienne sur une page ou plusieurs. Relief : ruban dégradé comme
   un tissu bombé, coutures, ombre portée (sur le conteneur : clip-path
   rognerait celle du ruban). */
.plato-articles .pa-carte__page {
	position: absolute;
	top: 0;
	right: 18px;
	z-index: 2;
	width: 58px;
	height: 64px;
	filter: drop-shadow(0 1px 1px rgba(122, 18, 64, .35)) drop-shadow(0 5px 6px rgba(42, 37, 54, .16));
	pointer-events: none;
}

.plato-articles .pa-carte__ruban {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	width: 100%;
	height: 100%;
	padding-top: 11px;
	background: linear-gradient(90deg, #A3195A 0%, #C31F68 18%, #DA2C77 50%, #C31F68 82%, #A3195A 100%);
	color: #fff;
	font-family: var(--pa-titre);
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-shadow: 0 1px 0 rgba(86, 12, 45, .35);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}

.plato-articles .pa-carte__ruban::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 9px;
	left: 4px;
	right: 4px;
	border-left: 1px dashed rgba(255, 255, 255, .38);
	border-right: 1px dashed rgba(255, 255, 255, .38);
}

.plato-articles .pa-carte__page-p {
	font-size: 10px;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .9;
}

/* Même taille de numéro pour « 42 » et « 42–45 » : c'est le ruban qui est
   assez large pour la plage, pas le chiffre qui rétrécit. */
.plato-articles .pa-carte__page-n { font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }

/* Rubrique et meeple existent deux fois : sur la photo (vue cartes, carte
   avec photo) et dans le corps (vue lignes, ou carte sans photo). Dans le
   corps, le meeple est à gauche du titre, loin du marque-page. */
.plato-articles .pa-carte__haut { display: flex; min-height: 26px; }
.plato-articles .pa-carte--page .pa-carte__haut,
.plato-articles .pa-carte--page .pa-carte__corps > .pa-carte__tete:first-child { padding-right: 72px; }

.plato-articles.pa--cartes .pa-carte--image .pa-carte__haut,
.plato-articles.pa--cartes .pa-carte--image .pa-carte__tete > .pa-carte__note,
.plato-articles.pa--lignes .pa-carte__rubrique--photo,
.plato-articles.pa--lignes .pa-carte__note--photo { display: none; }

.plato-articles .pa-carte__corps {
	padding: 26px 26px 24px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	flex: 1;
}

/* Le meeple de la photo déborde sur le corps : un peu plus d'air en haut. */
.plato-articles.pa--cartes .pa-carte--image.pa-carte--note .pa-carte__corps { padding-top: 32px; }

.plato-articles .pa-carte__tete {
	display: flex;
	align-items: center;
	gap: 14px;
}

.plato-articles .pa-carte__titres { flex: 1; min-width: 0; }

.plato-articles.pa--cartes .pa-carte--image.pa-carte--note .pa-carte__tete { padding-right: 64px; }

.plato-articles .pa-carte .pa-carte__sous-titre {
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--pa-gris-doux);
	margin: 6px 0 0;
	padding: 0;
	text-wrap: pretty;
}

.plato-articles .pa-carte .pa-carte__titre {
	font-family: var(--pa-titre);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.15;
	color: var(--pa-encre);
	margin: 0;
	padding: 0;
	text-wrap: pretty;
}

.plato-articles .pa-carte__bloc {
	background: var(--pa-soleil-voile);
	border-radius: 16px;
	padding: 16px 18px;
}

/* Articles de fond : toute la carte en brume, le chapô en blanc dessus. Les
   chroniques restent blanches, « En un mot » en soleil. */
.plato-articles .pa-carte--fond {
	background: var(--pa-brume-voile);
	border-color: var(--pa-brume-pale);
}

.plato-articles .pa-carte--fond:hover { border-color: var(--pa-brume-200); }
.plato-articles .pa-carte--fond .pa-carte__bloc { background: #fff; }
.plato-articles .pa-carte--fond .pa-carte__avatar { border-color: var(--pa-brume-voile); }
.plato-articles .pa-carte--fond .pa-carte__visuel { background: var(--pa-brume-pale); }

.plato-articles .pa-carte .pa-carte__bloc-titre {
	font-family: var(--pa-titre);
	font-weight: 600;
	font-size: 12.5px;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--pa-brume);
	margin: 0 0 8px;
	padding: 0;
}

.plato-articles .pa-carte.pa-carte--chronique .pa-carte__bloc-titre { color: var(--pa-soleil-fonce); }

.plato-articles .pa-carte .pa-carte__texte {
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--pa-encre);
	text-wrap: pretty;
}

.plato-articles .pa-carte__pied {
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--pa-bord);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.plato-articles .pa-carte--fond .pa-carte__pied { border-top-color: var(--pa-brume-pale); }

.plato-articles .pa-carte__auteurs {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1 1 180px;
}

.plato-articles .pa-carte__avatars { display: flex; flex: none; padding-left: 8px; }

.plato-articles .pa-carte__avatar {
	width: 40px;
	height: 40px;
	margin-left: -8px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--pa-brume-pale);
	border: 2px solid #fff;
	box-shadow: 0 0 0 1.5px var(--pa-brume-pale);
	color: var(--pa-brume-fonce);
	font-family: var(--pa-titre);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.plato-articles .pa-carte__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.plato-articles .pa-carte__signature { min-width: 0; }

.plato-articles .pa-carte .pa-carte__par {
	font-size: 12px;
	line-height: 1.3;
	color: var(--pa-pale);
	margin: 0;
	padding: 0;
}

.plato-articles .pa-carte .pa-carte__noms {
	margin: 0;
	padding: 0;
	font-size: 14.5px;
	line-height: 1.35;
	color: var(--pa-pale);
}

.plato-articles .pa-carte .pa-carte__nom {
	font-family: var(--pa-texte);
	font-weight: 600;
	font-size: 14.5px;
	line-height: inherit;
	color: var(--pa-encre);
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	text-align: left;
}

.plato-articles .pa-carte button.pa-carte__nom { cursor: pointer; transition: color .18s ease; }
.plato-articles .pa-carte button.pa-carte__nom:hover { color: var(--pa-framboise-fonce); }
.plato-articles .pa-carte__sep { white-space: pre; }

.plato-articles .pa-carte .pa-carte__lien {
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	color: var(--pa-framboise);
	text-decoration: none;
	white-space: nowrap;
}

.plato-articles .pa-carte a.pa-carte__lien:hover { color: var(--pa-framboise-fonce); }
.plato-articles .pa-carte .pa-carte__lien--texte { color: var(--pa-gris-doux); }

/* ---------------------------------------------------------- État vide --- */

.plato-articles .pa-vide {
	animation: paFondu .3s ease both;
	text-align: center;
	padding: 64px 24px;
	margin-top: 18px;
	background: #fff;
	border: 1.5px solid var(--pa-bord);
	border-radius: 26px;
	position: relative;
	overflow: hidden;
}

.plato-articles .pa-vide__tache {
	position: absolute;
	top: 30px;
	left: 50%;
	width: 160px;
	height: 160px;
	margin-left: -80px;
	background: var(--pa-brume-pale);
	border-radius: 42% 58% 63% 37% / 48% 42% 58% 52%;
}

.plato-articles .pa-vide .pa-vide__image {
	position: relative;
	display: block;
	width: 84px;
	height: 84px;
	object-fit: contain;
	margin: 0 auto 18px;
}

.plato-articles .pa-vide .pa-vide__titre {
	position: relative;
	font-family: var(--pa-titre);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.3;
	color: var(--pa-encre);
	margin: 0 0 8px;
	padding: 0;
}

.plato-articles .pa-vide .pa-vide__texte {
	position: relative;
	margin: 0 0 20px;
	padding: 0;
	color: var(--pa-gris);
	font-size: 15px;
	line-height: 1.5;
}

.plato-articles .pa-vide .pa-bouton { position: relative; }

/* ------------------------------------------------- Plus / Voir tout --- */

.plato-articles .pa-plus,
.plato-articles .pa-tout {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

.plato-articles .pa-plus:has(> [hidden]) { display: none; }
.plato-articles .pa-infini { height: 1px; }
.plato-articles .pa-plus + .pa-tout { margin-top: 16px; }

/* ----------------------------------------------------------- Vue lignes --- */

/* Une ligne par article : photo à gauche (s'il y en a une), rubrique, titre
   et texte au centre, signature et lien à droite. La grille passe à une
   colonne, ce qui coupe aussi la maçonnerie. */
.plato-articles.pa--lignes .pa-grille {
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 16px !important;
}

.plato-articles.pa--lignes .pa-carte {
	flex-direction: row;
	border-radius: 22px;
}

.plato-articles.pa--lignes .pa-carte__visuel {
	flex: 0 0 230px;
	aspect-ratio: auto;
	min-height: 160px;
}

.plato-articles.pa--lignes .pa-carte__corps {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(190px, auto);
	grid-template-areas:
		"haut haut"
		"tete pied"
		"bloc pied";
	align-content: start;
	column-gap: 32px;
	row-gap: 14px;
	padding: 24px 26px 24px 28px;
}

.plato-articles.pa--lignes .pa-carte__haut { grid-area: haut; }
.plato-articles.pa--lignes .pa-carte__tete { grid-area: tete; }
.plato-articles.pa--lignes .pa-carte__bloc { grid-area: bloc; }

.plato-articles.pa--lignes .pa-carte__pied {
	grid-area: pied;
	align-self: stretch;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 12px;
	margin: 0;
	padding: 0 0 0 28px;
	border-top: none;
	border-left: 1px solid var(--pa-bord);
}

.plato-articles.pa--lignes .pa-carte--fond .pa-carte__pied { border-left-color: var(--pa-brume-pale); }
.plato-articles.pa--lignes .pa-carte__auteurs { flex: none; }
.plato-articles.pa--lignes .pa-carte .pa-carte__titre { font-size: 24px; }

@media (max-width: 760px) {
	.plato-articles.pa--lignes .pa-carte { flex-direction: column; }
	.plato-articles.pa--lignes .pa-carte__visuel { flex-basis: auto; aspect-ratio: 16 / 7; min-height: 0; }
	.plato-articles.pa--lignes .pa-carte__corps {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "haut" "tete" "bloc" "pied";
		padding: 22px 20px 20px;
	}
	.plato-articles.pa--lignes .pa-carte__pied {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 16px 0 0;
		border-left: none;
		border-top: 1px solid var(--pa-bord);
	}
	.plato-articles.pa--lignes .pa-carte--fond .pa-carte__pied { border-top-color: var(--pa-brume-pale); }
	.plato-articles.pa--lignes .pa-carte .pa-carte__titre { font-size: 21px; }
	.plato-articles.pa--lignes .pa-carte__tete > .pa-carte__note { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
	.plato-articles * {
		transition: none !important;
		animation: none !important;
	}
}