/* IPTV Premium — page « Abonnement IPTV multi-écrans » (/abonnement-iptv-multi-ecrans/). Préfixe « mce ».
 * Chargée par les shortcodes [iptv_mce_*] (inc/pages/multi-ecrans.php).
 * Réutilise les composants existants : héros de page, .iptv-offre (cartes de prix), .iptv-offer-band, .iptv-faq--lines. */

/* ---------- Héros ---------- */
.iptv-mce-hero .iptv-page-hero__in { max-width: 760px; }
.iptv-mce-hero .iptv-page-lead strong { color: var(--encre); font-weight: 700; }
.iptv-mce-hero__cta { --gap: 12px; margin-top: 6px; }
.iptv-mce-hero__trust { margin-top: 2px; }

/* ---------- En-têtes de section ---------- */
.iptv-mce-head { max-width: 700px; margin-bottom: 36px; }
.iptv-mce-head p:not(.iptv-eyebrow) { margin: 0; }
.iptv-mce-sec p a, .iptv-mce-prix__notes a, .iptv-mce-faq details a, .iptv-mce-faq .iptv-lead a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 1. Écran simultané ---------- */
.iptv-mce-explain__grid { --min: 380px; --gap: clamp(32px,5vw,64px); align-items: center; }
.iptv-mce-explain__grid > * { min-width: 0; }
.iptv-mce-points { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; counter-reset: mce; }
.iptv-mce-points li { counter-increment: mce; position: relative; min-height: 36px; padding-left: 52px; margin: 0; font-size: 16px; line-height: 1.65; color: var(--encre-3); }
.iptv-mce-points li::before {
	content: counter(mce); position: absolute; left: 0; top: 0; width: 36px; height: 36px; box-sizing: border-box;
	border-radius: 12px; background: var(--lavande); border: 1px solid var(--bord-lavande);
	font: 800 15px/34px var(--f-titre); color: var(--violet); text-align: center;
}
.iptv-mce-points strong { color: var(--encre); }

/* Illustration « installé / en lecture » */
.iptv-mce-demo { margin: 0; min-width: 0; background: var(--nuit-profonde); color: #fff; border-radius: var(--r-card); padding: clamp(22px,3vw,30px); box-shadow: var(--sh-avant); display: flex; flex-direction: column; gap: 16px; }
.iptv-mce-demo__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; }
.iptv-mce-demo__k { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--violet-nuit); }
.iptv-mce-demo__count { font-size: 13px; color: var(--sur-nuit); }
.iptv-mce-demo__count strong { font-family: var(--f-titre); font-size: 24px; font-weight: 800; letter-spacing: -0.03em; color: #fff; }
.iptv-mce-demo__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.iptv-mce-demo__item { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 8px 12px; margin: 0; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); }
.iptv-mce-demo__item.is-off { background: transparent; border-style: dashed; border-color: rgba(255,255,255,0.24); }
.iptv-mce-demo__ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#5B2EFF,#FF2E88); color: #fff; }
.is-off .iptv-mce-demo__ico { background: rgba(255,255,255,0.08); color: var(--sur-nuit-2); }
.iptv-mce-demo__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.iptv-mce-demo__txt strong { font: 800 15px/1.25 var(--f-titre); color: #fff; }
.iptv-mce-demo__txt span { font-size: 13px; line-height: 1.4; color: var(--sur-nuit-2); }
.iptv-mce-demo__st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; border-radius: 999px; padding: 5px 10px; }
.is-on .iptv-mce-demo__st { color: var(--succes-texte); background: var(--succes-fond); }
.is-on .iptv-mce-demo__st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--succes); }
.is-off .iptv-mce-demo__st { color: var(--sur-nuit-2); border: 1px solid rgba(255,255,255,0.24); }
.iptv-mce-demo figcaption { font-size: 14px; line-height: 1.6; color: var(--sur-nuit); }
.iptv-mce-demo figcaption strong { color: #fff; font-weight: 700; }

/* ---------- 2. Prix 2 et 3 écrans (cartes .iptv-offre) ---------- */
.iptv-mce-prix__grid { --min: 286px; --gap: 20px; padding-top: 14px; align-items: stretch; }
.iptv-mce-offre p { margin: 0; }
.iptv-mce-offre .iptv-offre__name { margin: 0; font-size: 21px; line-height: 1.2; letter-spacing: -0.015em; color: var(--encre); }
.iptv-mce-offre.iptv-offre--nuit .iptv-offre__name { color: #fff; }
.iptv-mce-offre .iptv-offre__feats { list-style: none; margin: 0; padding: 0; }
.iptv-mce-offre .iptv-offre__feats li { display: flex; gap: 11px; margin: 0; }
.iptv-mce-offre .iptv-offre__trial { line-height: 1.45; }
.iptv-mce-prix__notes { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; max-width: 880px; }
.iptv-mce-prix__notes p { position: relative; margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.65; color: var(--encre-3); }
.iptv-mce-prix__notes p::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }

/* ---------- 3. Au-delà de la limite ---------- */
.iptv-mce-tips { --min: 220px; --gap: 16px; }
.iptv-mce-tip { min-width: 0; background: #fff; border: 1px solid var(--bord-2); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--sh-carte); }
.iptv-mce-tip h3 { margin: 0; font-size: 18px; line-height: 1.25; letter-spacing: -0.02em; }
.iptv-mce-tip p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--encre-3); }

/* ---------- 4. Quelle formule pour votre foyer ---------- */
.iptv-mce-foyers { --min: 250px; --gap: 16px; }
.iptv-mce-foyer { min-width: 0; background: #fff; border: 1px solid var(--bord-2); border-radius: 22px; padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--sh-carte); }
.iptv-mce-foyer__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.iptv-mce-foyer__devs { display: flex; gap: 6px; }
.iptv-mce-foyer__dev { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--lavande); color: var(--violet); }
.iptv-mce-foyer__n { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--attenue); }
.iptv-mce-foyer__t { margin: 0; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; }
.iptv-mce-foyer p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--encre-3); }
.iptv-mce-foyer__reco { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--filet-2); display: flex; flex-direction: column; gap: 4px; }
.iptv-mce-foyer__k { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); }
.iptv-mce-foyer__o { font: 800 16px/1.3 var(--f-titre); color: var(--encre); }
.iptv-mce-foyer__m { font-size: 13px; color: var(--attenue); }
.iptv-mce-foyer__go { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 800 14px var(--f-titre); color: var(--violet); transition: gap .18s ease; }
.iptv-mce-foyer__go:hover { gap: 10px; color: var(--violet-hover); }
.iptv-mce-rule { margin-top: 24px; display: flex; align-items: flex-start; gap: 14px; background: #f3f2ef; border: 1px solid var(--bord-fort); border-radius: 20px; padding: 22px 26px; }
.iptv-mce-rule::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--violet); margin-top: 10px; flex-shrink: 0; }
.iptv-mce-rule p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--encre-2); }

/* ---------- 5. Questions ---------- */
.iptv-mce-faq .iptv-lead { font-size: 16px; }

/* ---------- Bande finale ---------- */
.iptv-mce-band { padding-bottom: clamp(56px,7vw,88px); }

/* ---------- Petits écrans ---------- */
@media (max-width: 519px) {
	.iptv-mce-hero__cta .iptv-btn { width: 100%; white-space: normal; }
	.iptv-mce-demo__item { grid-template-columns: 40px minmax(0,1fr); }
	.iptv-mce-demo__st { grid-column: 2; justify-self: start; }
	.iptv-mce-tip, .iptv-mce-foyer { padding: 22px 20px; }
	.iptv-mce-rule { padding: 20px; }
	.iptv-mce-points li { padding-left: 48px; }
}

@media (prefers-reduced-motion: reduce) {
	.iptv-mce-foyer__go:hover { gap: 6px; }
}