/* Pages besoin (Sport.dc.html, IPTV-Samsung-TV.dc.html … 14 maquettes) — préfixe .iptv-bsn
   Gabarits : body.iptv-bsn--usage (héros photo) / body.iptv-bsn--guide (héros 2 colonnes). */

/* Les styles globaux de WordPress « :root :where(.is-layout-flow) > * { margin-block-start: 24px; margin-block-end: 0 } »,
   imprimés APRÈS cette feuille, ajoutaient 24 px entre toutes les sections et écrasaient la marge de « En pratique »
   (même correctif que compatibilite.css / faq.css / applications.css, spécificité (0,3,0)). */
.iptv-bsn-page .wp-block-post-content.is-layout-flow > * { margin-block: 0; }
.iptv-bsn-page .wp-block-post-content.is-layout-flow > .iptv-bsn-pratique { margin-top: clamp(64px,8vw,104px); }

/* ---------- Héros commun ---------- */
.iptv-bsn-hero { position: relative; overflow: hidden; color: #fff; }
.iptv-bsn-hero__txt { display: flex; flex-direction: column; min-width: 0; }
.iptv-bsn-hero__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--violet-nuit); }
.iptv-bsn-h1 { font-family: var(--f-titre); font-size: clamp(40px,5.4vw,76px); font-weight: 800; line-height: .96; letter-spacing: -0.05em; margin: 0; color: #fff; text-wrap: balance; overflow-wrap: break-word; }
.iptv-bsn-grad { background: linear-gradient(95deg,#FF2E88 10%,#5B2EFF 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.iptv-bsn-hero__lead { margin: 0; }
.iptv-bsn-hero__ctas { display: flex; flex-wrap: wrap; }
.iptv-bsn-fil { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--sur-nuit-2); }
.iptv-bsn-fil a { color: var(--sur-nuit-2); }
.iptv-bsn-fil a:hover { color: #fff; }
.iptv-bsn-fil [aria-current] { color: #fff; }

.iptv-bsn-btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-titre); font-weight: 800; white-space: nowrap; text-decoration: none; box-sizing: border-box; }
.iptv-bsn-btn--light { color: var(--nuit); background: #fff; box-shadow: var(--sh-anneau); }
.iptv-bsn-btn--light:hover, .iptv-bsn-btn--light:focus-visible { background: var(--lavande); color: var(--nuit); }
.iptv-bsn-btn--ghost { color: #fff; border: 1px solid rgba(255,255,255,0.32); }
.iptv-bsn-btn--ghost:hover, .iptv-bsn-btn--ghost:focus-visible { background: rgba(255,255,255,0.10); color: #fff; }

/* Gabarit usage : photo plein cadre + voile */
.iptv-bsn-hero--usage { background: #0A0C11; min-height: 560px; display: flex; align-items: center; }
.iptv-bsn-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.iptv-bsn-hero__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,12,17,0.95) 0%, rgba(10,12,17,0.84) 46%, rgba(10,12,17,0.3) 100%); }
.iptv-bsn-hero--usage .iptv-bsn-hero__in { position: relative; padding-block: clamp(64px,8vw,112px) clamp(56px,7vw,96px); }
.iptv-bsn-hero--usage .iptv-bsn-fil { margin-bottom: 28px; }
.iptv-bsn-hero--usage .iptv-bsn-hero__txt { max-width: 680px; gap: 22px; }
.iptv-bsn-hero--usage .iptv-bsn-hero__eyebrow { letter-spacing: .22em; }
.iptv-bsn-hero--usage .iptv-bsn-hero__lead { font-size: 19px; line-height: 1.65; color: #dde2ee; max-width: 560px; }
.iptv-bsn-hero--usage .iptv-bsn-hero__ctas { gap: 14px; margin-top: 6px; }
.iptv-bsn-hero--usage .iptv-bsn-btn { font-size: 16px; border-radius: 14px; }
.iptv-bsn-hero--usage .iptv-bsn-btn--light { padding: 17px 30px; }
.iptv-bsn-hero--usage .iptv-bsn-btn--ghost { padding: 16px 28px; }

/* Gabarit guide : dégradé nuit, texte + image encadrée */
.iptv-bsn-hero--guide { background: var(--nuit-profonde); }
.iptv-bsn-hero__grid { position: relative; padding-block: clamp(40px,6vw,80px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,420px),1fr)); gap: clamp(32px,5vw,56px); align-items: center; }
.iptv-bsn-hero--guide .iptv-bsn-hero__txt { gap: 20px; }
.iptv-bsn-hero--guide .iptv-bsn-hero__lead { font-size: clamp(17px,1.6vw,19px); line-height: 1.6; color: var(--sur-nuit); max-width: 520px; }
.iptv-bsn-hero--guide .iptv-bsn-hero__ctas { gap: 12px; }
.iptv-bsn-hero--guide .iptv-bsn-btn { font-size: 17px; border-radius: 16px; }
.iptv-bsn-hero--guide .iptv-bsn-btn--light { padding: 18px 28px; }
.iptv-bsn-hero--guide .iptv-bsn-btn--ghost { padding: 17px 26px; border-color: rgba(255,255,255,0.3); }
.iptv-bsn-hero__frame { background: #0a0c12; border-radius: 24px; padding: 10px; box-shadow: 0 40px 90px rgba(0,0,0,0.35); min-width: 0; }
.iptv-bsn-hero__img { display: block; width: 100%; height: auto; border-radius: 16px; }

/* ---------- En bref ---------- */
.iptv-bsn-bref-wrap { padding-top: clamp(48px,6vw,80px); }
.iptv-bsn-bref { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 18px; align-items: start; background: #fff; border: 1px solid var(--bord); border-left: 4px solid var(--violet); border-radius: 22px; padding: clamp(22px,3vw,30px); }
.iptv-bsn-bref__k { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--violet); padding-top: 4px; white-space: nowrap; }
.iptv-bsn-bref p { margin: 0; font-size: clamp(17px,1.6vw,19px); line-height: 1.65; color: var(--encre); }

/* ---------- Titres de section ---------- */
.iptv-bsn-head { display: flex; flex-direction: column; gap: 14px; max-width: 620px; margin-bottom: 40px; }
.iptv-bsn-h2 { font-family: var(--f-titre); font-size: clamp(28px,3.6vw,46px); font-weight: 800; line-height: 1.04; letter-spacing: -0.04em; margin: 0; text-wrap: balance; }

/* ---------- Ce que vous trouverez (usage) ---------- */
.iptv-bsn-inclus { padding-top: clamp(64px,8vw,104px); }
.iptv-bsn-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,248px),1fr)); gap: 18px; }
.iptv-bsn-card { background: #fff; border: 1px solid var(--bord); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 10px; transition: transform .25s var(--ease), box-shadow .25s ease, border-color .25s ease; }
.iptv-bsn-card:hover { transform: translateY(-5px); border-color: var(--violet-nuit); box-shadow: 0 24px 56px rgba(13,18,48,0.09); }
.iptv-bsn-card h3 { font-family: var(--f-titre); font-size: 20px; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.iptv-bsn-card p { font-size: 15px; line-height: 1.65; color: var(--encre-3); margin: 0; }

/* ---------- Outil ---------- */
.iptv-bsn-outil { scroll-margin-top: 100px; }

/* ---------- En pratique (usage) ---------- */
.iptv-bsn-pratique { margin-top: clamp(64px,8vw,104px); }
.iptv-bsn-pratique__box { background: #fff; border: 1px solid var(--bord); border-radius: 32px; padding: clamp(28px,4vw,56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,320px),1fr)); gap: clamp(28px,4vw,56px); align-items: center; }
.iptv-bsn-pratique__txt { display: flex; flex-direction: column; gap: 14px; }
.iptv-bsn-pratique__txt p { font-size: 17px; line-height: 1.65; color: var(--encre-3); margin: 0; }
.iptv-bsn-checks { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 14px; background: var(--craie); border: 1px solid var(--bord); border-radius: 24px; padding: 30px; }
.iptv-bsn-checks li { display: flex; gap: 12px; font-size: 16px; line-height: 1.6; color: var(--encre-2); }
.iptv-bsn-checks svg { flex-shrink: 0; margin-top: 3px; }

/* ---------- Le guide complet (guide) ---------- */
.iptv-bsn-narrow { max-width: calc(880px + 2 * var(--gutter)); }
.iptv-bsn-guide { padding-top: clamp(56px,7vw,96px); display: flex; flex-direction: column; }
.iptv-bsn-guide__k { margin-bottom: 8px; }
.iptv-bsn-guide__item { display: flex; flex-direction: column; gap: 12px; padding: 28px 0; border-top: 1px solid var(--bord); }
.iptv-bsn-guide__h { font-family: var(--f-titre); font-size: clamp(24px,2.6vw,32px); font-weight: 800; line-height: 1.12; letter-spacing: -0.03em; margin: 0; }
.iptv-bsn-guide__h span { color: var(--violet); }
.iptv-bsn-guide__body { font-size: 17px; line-height: 1.7; color: var(--encre-3); }
.iptv-bsn-guide__body > * { margin: 0 0 14px; }
.iptv-bsn-guide__body > :last-child { margin-bottom: 0; }
.iptv-bsn-brief { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px dashed #d8cdb8; border-radius: 16px; padding: 16px 18px; }
.iptv-bsn-brief__k { flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a5a14; background: #fff3dc; border-radius: 999px; padding: 5px 10px; }
.iptv-bsn-brief__t { font-size: 15px; line-height: 1.6; color: var(--encre-3); min-width: 0; }

/* ---------- FAQ (groupe .iptv-bsn-faq du contenu) ---------- */
.iptv-bsn-faq { width: 100%; margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.iptv-bsn--usage .iptv-bsn-faq { max-width: var(--container-outer); padding-top: clamp(64px,8vw,104px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,320px),1fr)); gap: clamp(32px,5vw,64px); align-items: start; }
.iptv-bsn--guide .iptv-bsn-faq { max-width: calc(880px + 2 * var(--gutter)); padding-top: clamp(56px,7vw,96px); }
.iptv-bsn-faq > * { margin-block: 0; }
.iptv-bsn-faq__head { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.iptv-bsn-faq__all { font-weight: 700; margin-top: 4px; color: var(--encre); }
.iptv-bsn-faq__all:hover { color: var(--violet); }
.iptv-bsn-faq__h2 { font-family: var(--f-titre); font-size: clamp(30px,3.8vw,48px); font-weight: 800; line-height: 1.02; letter-spacing: -0.04em; margin: 0 0 24px; text-wrap: balance; }
/* Le H2 est enfant direct du groupe .is-layout-flow : la marge basse doit battre « :root :where(.is-layout-flow) > * { margin-block-end: 0 } ». */
.iptv-bsn-faq.is-layout-flow > .iptv-bsn-faq__h2 { margin: 0 0 24px; }
.iptv-bsn-faq .iptv-faq details[open] summary::after { content: "−"; transform: none; }
.iptv-bsn-faq .iptv-faq details > :not(summary) { margin: 0; }

/* ---------- À lire aussi ---------- */
.iptv-bsn-lire { padding-block: clamp(56px,7vw,88px); }
.iptv-bsn--guide .iptv-bsn-lire { padding-block: clamp(56px,7vw,96px); }
.iptv-bsn-lire__h { font-family: var(--f-titre); font-size: clamp(24px,2.6vw,32px); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 18px; }
.iptv-bsn-lire__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,260px),1fr)); gap: 14px; }
.iptv-bsn-lire__a { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid var(--bord); border-radius: 18px; padding: 20px 22px; font-family: var(--f-titre); font-size: 17px; font-weight: 800; color: var(--encre); text-decoration: none; }
.iptv-bsn-lire__a:hover { border-color: var(--violet); color: var(--encre); }
.iptv-bsn-lire__a span { color: var(--violet); flex-shrink: 0; }

/* ---------- « Prêt à commencer ? » (usage) ---------- */
.iptv-bsn-start { padding: 0 var(--gutter) clamp(64px,8vw,104px); }
.iptv-bsn-start__box { position: relative; overflow: hidden; max-width: calc(var(--container) + 2 * clamp(24px,5vw,72px)); margin: 0 auto; box-sizing: border-box; background: var(--nuit); border-radius: 36px; padding: clamp(56px,8vw,96px) clamp(24px,5vw,72px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.iptv-bsn-start__h { font-family: var(--f-titre); font-size: clamp(32px,4.4vw,58px); font-weight: 800; line-height: 1; letter-spacing: -0.05em; margin: 0; color: #fff; }
.iptv-bsn-start__box p { font-size: 18px; line-height: 1.6; color: var(--sur-nuit); margin: 0; max-width: 520px; }
/* Titre « Prêt à commencer ? » rendu en <p> (étude 5.0) : même rendu que l'ancien H2. */
.iptv-bsn-start__box .iptv-bsn-start__h { font-size: clamp(32px,4.4vw,58px); line-height: 1; color: #fff; max-width: none; }
.iptv-bsn-start__btn { font-size: 17px; border-radius: 16px; padding: 18px 36px; }
.iptv-bsn-start__trust { max-width: calc(var(--container) + 2 * clamp(24px,5vw,72px)); margin: 10px auto 0; gap: 6px 14px; font-size: 13px; color: var(--attenue); }

/* ---------- Responsive ---------- */
@media (max-width: 519px) {
	.iptv-bsn-hero__ctas .iptv-bsn-btn { white-space: normal; text-align: center; }
	.iptv-bsn-brief { flex-wrap: wrap; }
	.iptv-bsn-checks { padding: 22px; }
	.iptv-bsn-start__btn { white-space: normal; text-align: center; padding: 18px 28px; }
}