/* Page Panier (Panier.dc.html) — préfixe iptv-pan */
/* Héros */
.iptv-pan-hero { position: relative; z-index: 1; overflow-x: clip; background: linear-gradient(180deg,#f3f2ef 0%,#FFFFFF 100%); border-bottom: 1px solid var(--filet-2); }
.iptv-pan-hero__in { max-width: var(--container-outer); margin: 0 auto; box-sizing: border-box; padding: 28px var(--gutter) 56px; }
.iptv-pan-hero .iptv-fil { margin-bottom: 30px; }
.iptv-pan-hero__txt { max-width: 700px; display: flex; flex-direction: column; gap: 16px; }
.iptv-pan-hero__txt .iptv-page-h1 { margin: 0; }
.iptv-pan-hero__lede { font-size: 18px; line-height: 1.65; color: var(--encre-3); margin: 0; max-width: 560px; }
/* Zone principale */
.iptv-pan { position: relative; z-index: 1; padding-block: clamp(45px,5.5vw,72px) clamp(64px,8vw,104px); }
.iptv-pan__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,320px),1fr)); gap: 36px; align-items: start; }
.iptv-pan__col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* Boutons */
.iptv-pan-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; font-family: var(--f-titre); font-size: 16px; font-weight: 800; line-height: 1.2; text-align: center; border-radius: 14px; padding: 17px 28px; text-decoration: none; transition: all .18s ease; }
.iptv-pan-btn svg { flex-shrink: 0; }
.iptv-pan-btn--nuit { color: #fff; background: var(--nuit); box-shadow: 0 14px 34px rgba(13,18,48,0.28); }
.iptv-pan-btn--nuit:hover, .iptv-pan-btn--nuit:focus-visible { background: var(--nuit-hover); color: #fff; transform: translateY(-2px); }
.iptv-pan-btn--line { color: var(--violet); border: 1px solid var(--bord-fort); padding: 17px 26px; }
.iptv-pan-btn--line:hover, .iptv-pan-btn--line:focus-visible { background: #f3f2ef; color: var(--violet-hover); }
.iptv-pan-btn--ring { font-size: 17px; padding: 18px 28px; color: var(--nuit); background: #fff; box-shadow: var(--sh-anneau); }
.iptv-pan-btn--ring:hover, .iptv-pan-btn--ring:focus-visible { background: var(--lavande); color: var(--nuit); }
/* État vide */
.iptv-pan-empty { background: #fff; border: 1px solid var(--bord-2); border-radius: var(--r-card); padding: clamp(34px,5vw,56px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; box-shadow: 0 18px 50px rgba(13,18,48,0.05); }
.iptv-pan-empty__ico { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: #f3f2ef; border: 1px solid var(--bord-2); box-sizing: border-box; }
.iptv-pan-empty__t { font-family: var(--f-titre); font-size: clamp(22px,2.6vw,30px); font-weight: 800; letter-spacing: -0.04em; margin: 0; }
.iptv-pan-empty__p { font-size: 17px; line-height: 1.68; color: var(--encre-3); margin: 0; max-width: 460px; }
.iptv-pan-empty__acts { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.iptv-pan-empty__trial { font-size: 15px; font-weight: 600; color: var(--encre-3); margin-top: 4px; }
.iptv-pan-empty__trial:hover { color: var(--violet); }
/* Cartes */
.iptv-pan-card { background: #fff; border: 1px solid var(--bord-2); border-radius: var(--r-card); padding: 30px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.iptv-pan-card--item { gap: 24px; box-shadow: 0 18px 50px rgba(13,18,48,0.05); }
.iptv-pan-card[aria-busy="true"] .iptv-pan-edit { opacity: .7; }
.iptv-pan-card__t { font-family: var(--f-titre); font-size: 18px; font-weight: 800; letter-spacing: normal; margin: 0; }
.iptv-pan-sep { height: 1px; background: var(--filet-2); }
/* Ligne de formule */
.iptv-pan-item { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.iptv-pan-item__init { width: 74px; height: 74px; border-radius: 18px; background: linear-gradient(140deg,#5B2EFF,#4a21e0); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--f-titre); font-size: 24px; font-weight: 800; color: var(--violet-nuit); }
.iptv-pan-item__txt { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 6px; }
.iptv-pan-item__name { font-family: var(--f-titre); font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: normal; margin: 0; }
.iptv-pan-item__var { font-size: 15px; line-height: 1.6; color: var(--attenue); }
.iptv-pan-item__acts { display: flex; align-items: center; gap: 14px; margin-top: 2px; flex-wrap: wrap; }
.iptv-pan-item__change { font-size: 14px; font-weight: 600; color: var(--violet); }
.iptv-pan-item__change:hover { color: var(--violet-hover); }
.iptv-pan-item__rm { font-size: 14px; font-weight: 600; color: var(--attenue); text-decoration: underline; text-underline-offset: 3px; }
.iptv-pan-item__rm:hover { color: #8a2b12; }
.iptv-pan-item__price { font-family: var(--f-titre); font-size: 26px; font-weight: 800; white-space: nowrap; }
/* Modifier votre choix */
.iptv-pan-edit { display: flex; flex-direction: column; gap: 14px; margin: 0; transition: opacity .18s ease; }
.iptv-pan-edit__k { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--attenue); }
.iptv-pan-edit__grp { display: flex; flex-direction: column; gap: 10px; }
.iptv-pan-edit__l { font-size: 13px; font-weight: 600; color: var(--encre-3); }
.iptv-pan-seg { display: flex; flex-wrap: wrap; gap: 4px; background: #f3f2ef; border: 1px solid var(--bord-2); border-radius: 14px; padding: 5px; }
.iptv-pan-seg[hidden], .iptv-pan-pill[hidden], .iptv-pan-chip[hidden] { display: none; }
.iptv-pan-pill { font-family: var(--f-texte); font-size: 14px; font-weight: 700; line-height: 1.2; border: none; border-radius: 10px; padding: 12px 18px; min-height: 44px; cursor: pointer; white-space: nowrap; background: transparent; color: var(--encre-3); transition: all .18s ease; }
.iptv-pan-pill:hover { color: var(--encre); }
.iptv-pan-pill[aria-pressed="true"] { background: #fff; color: var(--encre); box-shadow: 0 2px 8px rgba(13,18,48,0.10); }
.iptv-pan-chip { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--encre); background: #f3f2ef; border: 1px solid var(--bord-2); border-radius: 14px; padding: 12px 18px; min-height: 44px; box-sizing: border-box; white-space: nowrap; }
.iptv-pan-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--magenta); flex-shrink: 0; }
.iptv-pan-err { margin: 0; font-size: 14px; line-height: 1.55; color: #8f2621; }
.iptv-pan-notices { margin: 0 0 20px; padding: 14px 18px; border: 1px solid #f0c9c4; border-radius: 14px; background: #fdf3f1; display: grid; gap: 6px; }
.iptv-pan-note { background: #f3f2ef; border: 1px dashed var(--bord-fort); border-radius: 16px; padding: 18px; font-size: 15px; line-height: 1.6; color: var(--encre-3); }
/* Option installation */
.iptv-pan-card--add form { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.iptv-pan-opt { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; }
.iptv-pan-opt input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--violet); cursor: pointer; flex-shrink: 0; }
.iptv-pan-opt__txt { display: flex; flex-direction: column; gap: 4px; }
.iptv-pan-opt__t { font-size: 16px; font-weight: 700; color: var(--encre); }
.iptv-pan-opt__d { font-size: 14px; line-height: 1.6; color: var(--attenue); }
.iptv-pan-opt__save { align-self: flex-start; font: 700 14px var(--f-texte); color: var(--violet); background: #fff; border: 1px solid var(--bord-fort); border-radius: 10px; padding: 10px 16px; min-height: 44px; cursor: pointer; }
/* Récapitulatif */
.iptv-pan-sum { position: sticky; top: 104px; background: #fff; border: 1px solid var(--bord-2); border-radius: var(--r-card); padding: 30px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 18px 50px rgba(13,18,48,0.06); min-width: 0; }
.iptv-pan-sum__t { font-family: var(--f-titre); font-size: 19px; font-weight: 800; letter-spacing: normal; margin: 0; }
.iptv-pan-sum__lines { display: flex; flex-direction: column; gap: 12px; }
.iptv-pan-sum__line { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; color: var(--encre-3); }
.iptv-pan-sum__line strong { font-weight: 600; color: var(--encre); white-space: nowrap; }
.iptv-pan-sum__line strong.is-ok { color: var(--succes-texte); }
.iptv-pan-sum__dash { color: var(--attenue); }
.iptv-pan-sum__total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.iptv-pan-sum__total span { font-family: var(--f-titre); font-size: 17px; font-weight: 800; }
.iptv-pan-sum__total strong { font-family: var(--f-titre); font-size: 32px; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; }
.iptv-pan-sum__monthly { font-size: 13px; color: var(--attenue); margin-top: -8px; }
.iptv-pan-sum__cta { font-size: 17px; padding: 18px 28px; }
.iptv-pan-sum__cta:hover { transform: translateY(-1px); }
.iptv-pan-sum__cta[hidden], .iptv-pan-sum__ask[hidden] { display: none; }
.iptv-pan-sum__cta[aria-disabled="true"] { opacity: .6; cursor: progress; transform: none; }
.iptv-pan-sum__ask { display: flex; flex-direction: column; gap: 12px; }
.iptv-pan-sum__note { background: #f3f2ef; border: 1px dashed var(--bord-fort); border-radius: 14px; padding: 16px; font-size: 14px; line-height: 1.6; color: var(--encre-3); }
.iptv-pan-sum__trust { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--attenue); margin-top: 10px; }
.iptv-pan-sum__pay { display: flex; align-items: center; gap: 9px; font-size: 13px; line-height: 1.55; color: var(--attenue); }
.iptv-pan-sum__pay svg { flex-shrink: 0; }
.iptv-pan-sum__more { display: inline-flex; align-items: center; gap: 8px; align-self: center; font-size: 14px; font-weight: 600; color: var(--encre-3); }
.iptv-pan-sum__more:hover { color: var(--violet); }
.iptv-pan-sum__more svg { flex-shrink: 0; }
/* Bande « 4 coches » */
.iptv-pan-checks { position: relative; z-index: 1; background: linear-gradient(180deg,#f7f5f0 0%,#f1eee7 100%); }
.iptv-pan-checks__in { padding-block: 52px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,230px),1fr)); gap: 26px; }
.iptv-pan-checks__in > div { display: flex; gap: 12px; font-size: 15px; line-height: 1.6; color: var(--encre-2); }
.iptv-pan-checks__in svg { flex-shrink: 0; margin-top: 4px; }
@media (max-width: 519px) {
.iptv-pan-card, .iptv-pan-sum { padding: 22px; }
.iptv-pan-item { gap: 16px; }
.iptv-pan-item__init { width: 60px; height: 60px; border-radius: 16px; font-size: 21px; }
.iptv-pan-item__txt { min-width: 0; flex-basis: calc(100% - 76px); }
.iptv-pan-pill { padding: 12px 14px; }
.iptv-pan-empty__acts, .iptv-pan-empty__acts .iptv-pan-btn { width: 100%; }
}
@media (max-width: 767px) {
.iptv-pan-sum { position: static; }
}