/* ====================================================================
 * Composant « Formules » — COMPLÉMENT de pages.css (2026-07-27)
 *
 * Les cartes elles-mêmes (`.li-pricing .li-plan`, prix, listes, pastilles de
 * rôle, boutons) vivent dans assets/css/pages.css : c'est le composant, et
 * /tarifs/ comme la vitrine du compte l'utilisent tel quel. Ce fichier
 * n'ajoute QUE ce que /tarifs/ n'a pas :
 *   1. le cartouche repliable du compte (`.li-plans`) ;
 *   2. la variante dense `.li-pricing--compact` (mêmes cartes, à l'échelle
 *      d'un encart de page de compte) ;
 *   3. les états de palier (formule actuelle, déjà inclus) et l'encoche
 *      Fondateur, qui n'existent que pour un visiteur connecté.
 * Aucune règle de carte n'est redéclarée ici : pas de doublon à maintenir.
 * ==================================================================== */

/* --- 1. Cartouche du compte ---------------------------------------- */
.li-plans {
	--rasp: #EE3D6F;
	--gold: #D0861E;
	margin: 14px 0 4px;
	padding: 22px 20px 20px;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 10px 30px rgba(23, 16, 28, .06);
	border: 1px solid rgba(238, 61, 111, .08);
	position: relative;
	overflow: hidden;
}
.li-plans::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 5px;
	background: linear-gradient(180deg, var(--rasp), var(--gold));
}
.li-plans__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 4px; }
.li-plans__title { font-size: 1.18rem; font-weight: 800; color: #241826; letter-spacing: -.01em; }
.li-plans__sub { color: #6b5f6f; font-size: .92rem; margin: 0 0 10px; }
/* Bloc repliable : marqueur natif masqué, chevron maison. */
summary.li-plans__head { cursor: pointer; list-style: none; user-select: none; outline: none; }
summary.li-plans__head::-webkit-details-marker { display: none; }
.li-plans__curtag { font-size: .86rem; color: #6b5f6f; font-weight: 600; }
.li-plans__curtag b { color: var(--rasp); }
.li-plans__toggle {
	margin-left: auto; align-self: center; flex: none;
	width: 26px; height: 26px; border-radius: 50%;
	background: #f4eef3; position: relative;
	transition: transform .2s ease;
}
/* Le chevron est un carré dont on ne garde que deux bords, tourné à 45° : son
   encre ne remplit que l angle bas-droit. Une fois tourné, sa pointe descend a
   4,95px sous le centre de la boite et ses deux extremites remontent au centre :
   la boite d encre est donc centree 2,5px TROP BAS (7px de cote, 2px de bord).
   Centrer la boite (top:50%) ne centre pas le chevron — on remonte l encre.
   La compensation tourne avec le bouton en état ouvert (rotation portée par le
   parent), donc elle reste juste dans les deux sens. */
.li-plans__toggle::after {
	content: "";
	position: absolute; left: 50%; top: 50%;
	margin-top: -2.5px;
	width: 7px; height: 7px;
	border: solid var(--rasp); border-width: 0 2px 2px 0;
	transform: translate(-50%, -50%) rotate(45deg);
}
details.li-plans[open] .li-plans__toggle { transform: rotate(180deg); }
summary.li-plans__head:focus-visible .li-plans__toggle { box-shadow: 0 0 0 3px rgba(238, 61, 111, .3); }
details.li-plans:not([open]) .li-plans__head { margin-bottom: 0; }
.li-plans__foot { margin: 14px 2px 0; font-size: .82rem; color: #8a7d8b; }
.li-plans__foot a { color: var(--rasp); font-weight: 700; text-decoration: none; }
.li-plans__foot a:hover { text-decoration: underline; }

/* --- 2. Variante dense --------------------------------------------- */
/* Mêmes cartes que /tarifs/, à l'échelle d'un encart. Trois pièges, tous
 * rencontrés en vrai :
 *
 * a) LE NOMBRE DE COLONNES DÉPEND DU CARTOUCHE, PAS DE LA FENÊTRE. La vitrine
 *    s'affiche dans des colonnes de largeurs très différentes : pleine largeur
 *    sur /compte/listings/, ~830px sur « Mon abonnement ». Une media query
 *    (largeur de fenêtre) donnait trois colonnes de 270px dans le second cas.
 *    D'où une CONTAINER QUERY : trois colonnes seulement si le cartouche fait
 *    au moins 1000px, sinon une seule — et une carte en pleine largeur est
 *    alors exactement la carte de /tarifs/. Repli en media query pour les
 *    navigateurs sans container queries (Safari < 16).
 *
 * b) LES MESURES DENSES NE VALENT QU'EN MULTICOLONNE. En une colonne, la carte
 *    a la place : elle garde la typographie de /tarifs/ (pages.css).
 *
 * c) SPÉCIFICITÉ. Les feuilles de page reprennent la main à égalité : « Mon
 *    abonnement » (inc/stripe.php) habille TOUS ses h3 d'un filet vertical et
 *    d'un trait de séparation en `.li-abo h3` (0,1,1). Les règles du composant
 *    sont donc préfixées `.li-plans .li-pricing .li-plan` (0,3,1).
 */
/* Le conteneur de requête est un CALQUE INTERNE, jamais `.li-plans` lui-même :
   `container-type: inline-size` retire l'élément du calcul de largeur
   intrinsèque de son parent — posé sur le cartouche, il s'effondre dès que le
   parent dimensionne ses enfants par leur contenu (flex/grid auto). Sur un
   div de flux interne, le risque n'existe pas. */
.li-plans__body { container-type: inline-size; }
.li-plans .li-pricing--compact {
	margin: 0;
	max-width: none;
	gap: 14px;
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
}
.li-plans .li-pricing--compact .li-plan { min-width: 0; }
.li-plans .li-pricing__legend { margin: 0 0 14px; line-height: 1.9; }

/* Le titre de carte est un titre de carte : ni filet vertical, ni trait de
   séparation, ni marges de section — d'où qu'ils viennent. */
.li-plans .li-pricing .li-plan h3 {
	display: block;
	text-align: center;
	margin: 0 0 2px;
	padding-top: 0;
	border-top: 0;
	font-size: 1.22rem;
	line-height: 1.25;
}
/* Correction de composant (vaut pour /tarifs/ comme pour le compte) : le
   bouton d'une carte est en `width:100%` avec des paddings horizontaux ; sans
   `box-sizing:border-box`, il dépasse la carte de la valeur de ses paddings.
   Le plafond `max-width:320px` masquait le défaut tant que la carte était
   large — il réapparaissait sous ~400px de carte, et dès qu'on lève le
   plafond en multicolonne. */
.li-pricing .li-plan .li-btn, .li-pricing .li-plan__state { box-sizing: border-box; }

.li-plans .li-pricing .li-plan h3::before,
.li-plans .li-pricing .li-plan h3::after { content: none; display: none; }

/* --- Multicolonne : mêmes cartes, mesures resserrées ---------------- */
@container (min-width: 1000px) {
	.li-plans .li-pricing--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.li-plans .li-pricing--compact .li-plan:last-child:nth-child(odd) { grid-column: auto; max-width: none; margin-inline: 0; }
	.li-plans .li-pricing--compact .li-plan { padding: 22px 16px 18px; border-radius: 14px; }
	/* Pas de zoom sur la carte Premium dans un encart : la place manque et le
	   décalage casse l'alignement des trois cartes. */
	.li-plans .li-pricing--compact .li-plan--featured,
	.li-plans .li-pricing--compact .li-plan--featured:hover { transform: none; }
	.li-plans .li-pricing--compact .li-plan:hover { transform: translateY(-3px); }
	.li-plans .li-pricing--compact .li-plan__ico { width: 40px; height: 40px; border-radius: 12px; font-size: 1rem; margin: 0 auto 8px; }
	.li-plans .li-pricing--compact .li-plan h3 { font-size: 1.05rem; }
	.li-plans .li-pricing--compact .li-plan__price { font-size: 2.1rem; line-height: 1.1; margin-top: 2px; }
	.li-plans .li-pricing--compact .li-plan__price span { font-size: .8rem; }
	.li-plans .li-pricing--compact .li-plan__permonth { font-size: .78rem; margin-top: 2px; }
	.li-plans .li-pricing--compact .li-plan ul { margin: 14px 0; max-width: none; gap: 0; }
	/* La puce est un couple : un disque (`li::before`) et une coche (`li::after`)
	   positionnés en `em` par pages.css — donc solidaires DÈS QU'ON NE TOUCHE QU'À
	   LA TAILLE DE TEXTE. Retoucher ici le `padding`, le `line-height` ou les
	   `top` des pseudo-éléments décalait la coche dans son disque : la géométrie
	   d'origine est laissée intacte, on ne change que `font-size`. */
	.li-plans .li-pricing--compact .li-plan li { font-size: .84rem; }
	.li-plans .li-pricing--compact .li-plan li.li-plan__sub { font-size: .7rem; padding: .9em 0 .3em; }
	.li-plans .li-pricing--compact .li-role { font-size: .62rem; }
	.li-plans .li-pricing--compact .li-plan .li-btn {
		width: 100%;
		max-width: none;
		margin-top: auto;
		margin-inline: 0;
		padding: 11px 14px;
		font-size: .92rem;
		white-space: normal;
	}
	.li-plans .li-pricing--compact .li-plan__tag { font-size: .66rem; padding: 4px 11px; }
}
/* Repli sans container queries : on se rabat sur la largeur de fenêtre. */
@supports not (container-type: inline-size) {
	@media (min-width: 1400px) {
		.li-plans .li-pricing--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
		.li-plans .li-pricing--compact .li-plan { padding: 22px 16px 18px; }
		.li-plans .li-pricing--compact .li-plan__price { font-size: 2.1rem; }
		.li-plans .li-pricing--compact .li-plan li { font-size: .84rem; }
		.li-plans .li-pricing--compact .li-plan ul { max-width: none; }
		.li-plans .li-pricing--compact .li-plan .li-btn { max-width: none; }
	}
}

/* --- Puces (coche dans son disque) : correction de composant --------
 * La coche était un carré à deux bords tourné à 42°, superposé au disque. Ce
 * montage ne peut pas rester centré à deux tailles de texte : le navigateur
 * ARRONDIT l'épaisseur du trait au pixel entier, donc la géométrie de l'encre
 * ne suit pas la taille de police. Mesuré : la coche tombait 1px bas/droite
 * sur /tarifs/ (0,95rem) et 2,3px dans la vitrine du compte (0,84rem).
 *
 * La coche devient un SVG posé en fond du disque, centré par
 * `background-position`. Son encre est centrée dans son viewBox, donc elle est
 * centrée dans le disque — par construction, à toutes les tailles, sans
 * réglage magique. Le dégradé reste piloté par une variable pour que la carte
 * Premium garde ses puces dorées.
 */
.li-pricing .li-plan li::before {
	--li-bullet: linear-gradient(135deg, var(--rasp, #EE3D6F), var(--gold, #D0861E));
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.25l4.5 4.5L19 7.25'/%3E%3C/svg%3E") center / 58% auto no-repeat,
		var(--li-bullet);
}
.li-pricing .li-plan--featured li::before {
	--li-bullet: linear-gradient(135deg, var(--gold, #D0861E), var(--gold-deep, #A86A12));
}
.li-pricing .li-plan li::after { content: none; }

/* --- 3. États de palier (visiteur connecté) ------------------------- */
/* « Votre formule » signale un ÉTAT, pas une promotion : pilule claire à
   filet framboise, volontairement plus discrète que « Le plus populaire ». */
.li-pricing .li-plan__tag--now {
	background: #fff;
	color: #C91E52;
	box-shadow: 0 0 0 4px var(--li-card, #fff), inset 0 0 0 1.5px #EE3D6F, 0 3px 10px rgba(201, 30, 82, .16);
}
/* Sur la carte Premium, l'encoche hérite du bandeau doré de la carte
   (`.li-pricing .li-plan--featured .li-plan__tag`, pages.css) : la pilule
   claire n'y existe pas. Texte BLANC demandé — donc or assombri pour rester
   lisible (blanc sur l'or de marque = 2,95:1, ici 4,99:1 au point le plus
   clair, seuil AA = 4,5:1). */
.li-pricing .li-plan--featured .li-plan__tag--now {
	background: linear-gradient(135deg, #9C630F, #7E5210);
	color: #fff;
	box-shadow: 0 0 0 4px var(--li-card, #fff), 0 4px 12px rgba(208, 134, 30, .30);
}

/* Fondateur : texte BLANC, comme les autres encoches — mais sur un or PLUS
   FONCÉ. Sur l'or de marque #D0861E, du blanc ne donne que 2,95:1 (seuil AA :
   4,5:1) et l'encoche fait 11px de capitales ; sur #96600F il monte à 5,3:1.
   L'encoche reste dorée — c'est la couleur de l'opé Fondateur — et lisible. */
.li-pricing .li-plan__tag--founder,
.li-pricing .li-plan--featured .li-plan__tag--founder {
	background: linear-gradient(135deg, #9C630F, #7E5210);
	color: #fff;
	box-shadow: 0 0 0 4px var(--li-card, #fff), 0 4px 12px rgba(208, 134, 30, .34);
}
.li-pricing .li-plan--current {
	border-color: transparent;
	background: linear-gradient(var(--li-card, #fff), var(--li-card, #fff)) padding-box,
		linear-gradient(135deg, #EE3D6F, #D0861E) border-box;
	border: 2px solid transparent;
}
.li-pricing .li-plan--founder {
	border-color: transparent;
	background: linear-gradient(var(--li-card, #fff), var(--li-card, #fff)) padding-box,
		linear-gradient(135deg, #D0861E, #c98a1e) border-box;
	border: 2px solid transparent;
	box-shadow: 0 16px 34px rgba(208, 134, 30, .20);
}
.li-pricing .li-plan__was { color: #b7abb5; font-size: .6em; margin-right: .15em; }
/* Un état n'est pas un bouton : même gabarit, mais plat et non cliquable. */
.li-pricing .li-plan__state {
	display: block;
	margin-top: auto;
	text-align: center;
	font-size: .86rem;
	font-weight: 700;
	color: #8a7d8b;
	background: rgba(36, 24, 38, .05);
	border-radius: 11px;
	padding: 12px 14px;
	max-width: 320px;
	margin-inline: auto;
	width: 100%;
	box-sizing: border-box;
}
.li-plans .li-pricing--compact .li-plan__state { max-width: none; }
.li-pricing .li-plan__state--now {
	background: linear-gradient(135deg, rgba(238, 61, 111, .14), rgba(208, 134, 30, .16));
	color: #C91E52;
}
.li-pricing .li-plan__founder-note {
	display: block;
	text-align: center;
	font-size: .72rem;
	color: #8a5a12;
	margin-top: 7px;
	line-height: 1.35;
}
.li-pricing .li-plan__founder-note b {
	color: #B23A6B;
	background: #fff4d6;
	padding: .03em .4em;
	border-radius: 5px;
	letter-spacing: .5px;
	white-space: nowrap;
}