/* ============================================================
   MUSHTARIK — SECTION PACKS DE LANCEMENT
   Restylée au design clair du site : réutilise .plan.pack, .phead-like,
   .pack__list (logos auto via packs-enhance). Onglets catalogue + Solo/Duo/Trio.
   ============================================================ */

.mkl{ position:relative; }
.mkl-inner{ max-width:1280px; margin:0 auto; }

/* Bandeau "lancement" léger et cohérent (pas de fond sombre) */
.mkl-eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin:0 auto 14px;
  font-family:Sora,sans-serif; font-weight:700; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand); background:color-mix(in srgb,var(--brand),transparent 90%);
  border:1px solid color-mix(in srgb,var(--brand),transparent 78%);
  padding:6px 14px; border-radius:999px;
}
/* Le titre/sous-titre réutilisent .section__title / .section__lead du site
   (mêmes tailles). On n'ajoute ici que le dégradé sur le mot en <em>. */
.mkl-title em{ font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.mkl-sub{ margin-left:auto; margin-right:auto; }

/* ---------- Onglets catalogue ---------- */
.mkl-cats{ display:flex; justify-content:center; gap:6px; margin:clamp(18px,2.4vw,26px) auto clamp(16px,2vw,22px); }
.mkl-cat{
  appearance:none; border:0; background:transparent; cursor:pointer; font-family:inherit;
  padding:10px 20px 13px; position:relative; display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--muted); transition:color .25s var(--ease);
}
.mkl-cat strong{ font-family:Sora,sans-serif; font-size:1rem; font-weight:700; }
.mkl-cat span{ font-size:.72rem; font-weight:500; opacity:.85; }
.mkl-cat::after{ content:""; position:absolute; left:14px; right:14px; bottom:0; height:2.5px; border-radius:3px; background:var(--grad); transform:scaleX(0); transition:transform .35s var(--ease); }
.mkl-cat[aria-selected="true"]{ color:var(--text-strong); }
.mkl-cat[aria-selected="true"]::after{ transform:scaleX(1); }
.mkl-cat:hover{ color:var(--text); }
.mkl-cat:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:8px; }

/* ---------- Switch Solo / Duo / Trio ---------- */
.mkl-switch-wrap{ display:flex; justify-content:center; margin-bottom:clamp(24px,3vw,34px); }
.mkl-switch{ position:relative; display:inline-flex; padding:5px; background:var(--surface); border:1px solid var(--border); border-radius:999px; box-shadow:var(--hi); }
.mkl-thumb{ position:absolute; top:5px; left:5px; height:calc(100% - 10px); border-radius:999px; background:var(--grad); z-index:0; box-shadow:0 8px 20px -8px color-mix(in srgb,var(--brand),transparent 30%); transition:transform .4s var(--ease),width .4s var(--ease); }
.mkl-opt{ position:relative; z-index:1; appearance:none; border:0; background:transparent; cursor:pointer; font-family:Sora,sans-serif; font-size:.9rem; font-weight:700; color:var(--text-soft); padding:10px 22px; border-radius:999px; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; transition:color .3s var(--ease); }
.mkl-opt[aria-selected="true"]{ color:#fff; }
.mkl-opt:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }
.mkl-dots{ display:inline-flex; gap:3px; }
.mkl-dots b{ width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.45; transition:opacity .3s var(--ease); }
.mkl-opt[aria-selected="true"] .mkl-dots b{ opacity:1; }

/* ---------- Slider wrapper + flèches (mobile) ---------- */
.mkl-sliderwrap{ position:relative; }
.mkl-nav{ display:none; }
@media (max-width:600px){
  .mkl-nav{
    display:grid; place-items:center; position:absolute; top:46%; transform:translateY(-50%);
    width:42px; height:42px; border-radius:50%; z-index:6; cursor:pointer;
    background:var(--surface); border:1px solid var(--border); color:var(--brand);
    box-shadow:0 10px 24px -8px rgba(20,20,50,.28);
    transition:opacity .3s var(--ease);
  }
  .mkl-nav svg{ width:20px; height:20px; }
  .mkl-nav--prev{ left:2px; animation:mkl-hintL 1.5s ease-in-out infinite; }
  .mkl-nav--next{ right:2px; animation:mkl-hintR 1.5s ease-in-out infinite; }
  .mkl-nav.is-hidden{ opacity:0; pointer-events:none; }
}
@keyframes mkl-hintL{ 0%,100%{ transform:translateY(-50%) translateX(0); } 50%{ transform:translateY(-50%) translateX(-5px); } }
@keyframes mkl-hintR{ 0%,100%{ transform:translateY(-50%) translateX(0); } 50%{ transform:translateY(-50%) translateX(5px); } }

/* ---------- Grille ---------- */
.mkl-grid{ display:grid; gap:18px; grid-template-columns:repeat(4,1fr); align-items:stretch; margin:0 auto; transition:opacity .2s ease; }
.mkl-grid.is-swapping{ opacity:0; }
.mkl-grid[data-count="3"]{ grid-template-columns:repeat(3,1fr); max-width:900px; }
.mkl-grid[data-count="2"]{ grid-template-columns:repeat(2,1fr); max-width:620px; }

/* La carte réutilise .plan.pack du site. */
.mkl-grid .plan.pack{ padding:30px 26px 26px; }
/* Nom + sous-titre du pack sur une seule ligne chacun */
.mkl-grid .plan__name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mkl-grid .pack__tag{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mkl-grid .plan.pack.is-hero{ border-color:color-mix(in srgb,var(--pk),transparent 45%); box-shadow:0 20px 44px -26px color-mix(in srgb,var(--pk),transparent 30%), var(--hi); }

/* Badge "recommandé" */
.mkl-badge{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--grad); color:#fff; font-family:Sora,sans-serif; font-size:.66rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; padding:5px 13px; border-radius:999px; box-shadow:0 10px 22px -10px color-mix(in srgb,var(--brand),transparent 25%); white-space:nowrap; }

/* ---------- Boîte prix (style .phead__box du site) ---------- */
.mkl-pricebox{
  width:100%; margin:12px 0 4px; padding:15px 14px; border-radius:18px; text-align:center;
  background:radial-gradient(130% 130% at 50% -10%,color-mix(in srgb,var(--pk),transparent 85%),color-mix(in srgb,var(--pk),transparent 96%));
  border:1px solid color-mix(in srgb,var(--pk),transparent 82%);
}
.mkl-now{ display:flex; align-items:baseline; justify-content:center; gap:7px; }
.mkl-price{ font-family:Sora,sans-serif; font-weight:800; font-size:2.7rem; line-height:1; letter-spacing:-.03em; color:var(--text-strong); font-variant-numeric:tabular-nums; }
.mkl-per{ font-family:Sora,sans-serif; font-weight:700; font-size:.9rem; color:var(--muted); }
.mkl-eco{ display:block; min-height:1.1em; margin-top:8px; font-size:.78rem; font-weight:600; color:var(--text-soft); }
.mkl-eco b{ color:#16a34a; font-weight:800; }
.mkl-price,.mkl-eco{ transition:opacity .18s ease, transform .18s ease; }
.plan.pack.is-updating .mkl-price,.plan.pack.is-updating .mkl-eco{ opacity:0; transform:translateY(-4px); }

/* Raccourcis formules alternatives */
.mkl-alts{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin:12px 0 4px; }
.mkl-alt{ appearance:none; cursor:pointer; font-family:inherit; background:color-mix(in srgb,var(--brand),transparent 95%); border:1px solid var(--border); border-radius:10px; padding:6px 10px; font-size:.74rem; font-weight:500; color:var(--text-soft); transition:all .22s var(--ease); }
.mkl-alt:hover{ border-color:color-mix(in srgb,var(--brand),transparent 60%); color:var(--text); }
.mkl-alt b{ font-weight:800; color:var(--text-strong); }
.mkl-alt:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* Bouton d'action : on garde .bpack__buy--pk (couleur du pack) mais PAS .bpack__buy
   (qui déclenche un handler global attendant data-bpack) → le lien fonctionne. */
.mkl-cta{ padding-top:13px; padding-bottom:13px; }

/* Options (email perso / garantie) */
.mkl-addons{ display:flex; flex-direction:column; gap:7px; margin:4px 0 16px; padding-top:14px; border-top:1px dashed var(--border); }
.mkl-addon{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--text-soft); line-height:1.3; }
.mkl-addon .mkl-ai{ width:16px; height:16px; flex:none; color:var(--pk,var(--brand)); }
.mkl-addon b{ font-weight:800; color:var(--text-strong); }
.mkl-addon .mkl-optn{ font-style:normal; color:var(--muted); font-size:.76rem; }

/* ---------- Animations (scopées .mkl-anim, ajoutées par JS) ---------- */
.mkl-anim [data-mkl-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.mkl-anim [data-mkl-reveal].is-in{ opacity:1; transform:none; }
.mkl-anim .plan.pack{ opacity:0; transform:translateY(18px); transition:opacity .5s var(--ease), transform .5s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.mkl-anim .plan.pack.is-in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .mkl-grid,.mkl-grid[data-count="3"]{ grid-template-columns:repeat(2,1fr); max-width:640px; }
}
@media (max-width:600px){
  /* Titre un peu plus grand, sous-titre limité à 2 lignes */
  .mkl .mkl-title{ font-size:2rem; }
  .mkl .mkl-sub{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  /* Packs en slider horizontal (glissement) sur téléphone.
     padding-top suffisant pour que le badge 'Recommandé' (top:-11px) reste visible. */
  .mkl-grid,.mkl-grid[data-count="3"],.mkl-grid[data-count="2"]{
    display:flex; grid-template-columns:none; max-width:none;
    overflow-x:auto; scroll-snap-type:x mandatory; gap:14px;
    padding:22px 16px 14px; margin-inline:-16px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .mkl-grid::-webkit-scrollbar{ display:none; }
  .mkl-grid .plan.pack{ flex:0 0 78%; scroll-snap-align:center; }
  .mkl-cats{ gap:0; }
  .mkl-cat{ flex:1; padding:10px 6px 12px; }
  .mkl-switch{ width:100%; }
  .mkl-opt{ flex:1; justify-content:center; padding:11px 6px; }
}
@media (prefers-reduced-motion:reduce){
  .mkl-anim [data-mkl-reveal],.mkl-anim .plan.pack{ opacity:1 !important; transform:none !important; transition:none !important; }
  .mkl-nav{ animation:none !important; }
}

/* =========================================================
   PACK RECOMMANDÉ : même style que la page IPTV (.iptvplan--best)
   + effet "petit vers grand" (la carte recommandée est plus grande)
   ========================================================= */
.mkl-grid .plan.pack.is-hero{
  border:2px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad) border-box;
  box-shadow:var(--shadow-lg);
  transform:scale(1.04);
  transform-origin:bottom center;
  z-index:2;
  overflow:hidden;
}
.mkl-grid .plan.pack.is-hero:hover{ transform:scale(1.04) translateY(-6px); }
@media (max-width:860px){
  .mkl-grid .plan.pack.is-hero{ transform:none; }
  .mkl-grid .plan.pack.is-hero:hover{ transform:translateY(-6px); }
}

/* Haut de carte teinté (dégradé léger), comme .iptvplan__top--tint */
.mkl-grid .plan.pack.is-hero::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:0; left:0; right:0; height:158px;
  border-radius:calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--brand) 13%, transparent),
    color-mix(in srgb, #e0529c 9%, transparent));
}
.mkl-grid .plan.pack.is-hero > *{ position:relative; z-index:1; }

/* Prix + bouton d'achat en dégradé (accents charte, comme IPTV) */
.mkl-grid .plan.pack.is-hero .mkl-price{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.mkl-grid .plan.pack.is-hero .mkl-cta.bpack__buy--pk{
  background:var(--grad) !important;
  box-shadow:0 14px 30px -12px color-mix(in srgb, var(--brand), transparent 25%), var(--hi) !important;
}

/* Ruban « Recommandé » avec étoile, façon IPTV */
.mkl-grid .plan.pack.is-hero .mkl-badge{ display:inline-flex; align-items:center; gap:5px; }
.mkl-grid .plan.pack.is-hero .mkl-badge .ic{ width:.85rem; height:.85rem; }

/* Descriptions sur 2 lignes réservées (alignement interne) */
.mkl-grid .pack__tag{ min-height:2.7em; line-height:1.35; }

/* =========================================================
   ESCALIER "petit vers grand" (comme IPTV : align-items:end + bouton en bas)
   ========================================================= */
@media (min-width:861px){ .mkl-grid{ align-items:end; } }
.mkl-grid .mkl-cta{ margin-top:auto; }
.mkl-grid .pack__tag{ min-height:0; }
.mkl-grid .plan.pack.is-hero{ transform:scale(1.03); }
@media (max-width:860px){ .mkl-grid .plan.pack.is-hero{ transform:none; } }

/* 7) Sous-titre de la section packs sur une seule ligne (grands écrans) */
@media (min-width:1000px){
  .mkl-head .mkl-sub{ white-space:nowrap; max-width:none; }
}

/* =========================================================
   PACKS : max 4 produits + bouton "Afficher" + HAUTEUR ÉGALE
   (exactement comme les packs Entreprises de l'accueil)
   ========================================================= */
/* On abandonne l'escalier : toutes les cartes à la même hauteur */
@media (min-width:861px){ .mkl-grid{ align-items:stretch; } }
/* Bloc bas (garanties + bouton d'achat) épinglé en bas -> hauteurs alignées */
.mkl-grid .mkl-cta{ margin-top:0; }
.mkl-grid .pack__trust{ margin-top:auto; }
.mkl-grid .bpack__more{ margin-top:12px; }

/* =========================================================
   Réduction des espaces vides autour du titre/sous-titre + en bas
   ========================================================= */
#launch{ padding-top:clamp(14px,1.8vw,24px); padding-bottom:clamp(14px,1.8vw,26px); }
#launch .section__head.mkl-head{ margin-bottom:clamp(8px,1.2vw,14px); }
#launch .mkl-title{ margin-bottom:6px; }
#launch .mkl-cats{ margin-top:clamp(6px,1vw,12px); }

/* =========================================================
   Alignement parfait des 4 cartes : le pack recommandé n'est plus AGRANDI
   (il reste distinct par bordure dégradée + haut teinté + ruban + ombre)
   -> titre / sous-titre / prix / produits alignés sur les 4 packs
   ========================================================= */
.mkl-grid .plan.pack.is-hero{ transform:none !important; }
.mkl-grid .plan.pack.is-hero:hover{ transform:translateY(-6px) !important; }

/* =========================================================
   FIX alignement : le ruban « Recommandé » doit rester HORS FLUX (absolu)
   -> son contenu s'aligne avec les autres cartes
   ========================================================= */
.mkl-grid .plan.pack.is-hero{ overflow:visible !important; }
.mkl-grid .plan.pack.is-hero .mkl-badge{ position:absolute !important; z-index:3; }

/* =========================================================
   AMÉLIORATIONS PACKS (v22)
   ========================================================= */

/* 3) Sous-titre de la section packs centré au milieu de la page */
#launch .section__head.mkl-head{ max-width:none; }
#launch .mkl-sub{ text-align:center; margin-left:auto; margin-right:auto; }

/* 4) Coupon jaune masqué sur la page lancement uniquement */
body[data-page="offre-lancement"] .cpn-tag{ display:none !important; }

/* 5) Pack recommandé : dégradé de la charte doux sur TOUTE la carte (pas forte couleur) */
.mkl-grid .plan.pack.is-hero::before{
  bottom:0 !important; height:auto !important;
  border-radius:calc(var(--radius-lg) - 2px) !important;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--brand) 11%, transparent),
    color-mix(in srgb, #e0529c 6%, transparent) 50%,
    color-mix(in srgb, #f97316 6%, transparent)) !important;
}

/* 6) Hauteur des packs réduite (moins d'espaces vides) */
.mkl-grid .plan.pack{ padding:22px 22px 18px !important; }
.mkl-pricebox{ margin:10px 0 4px; padding:11px 14px; }
.mkl-price{ font-size:2.3rem; }
.mkl-grid .pack__incl{ margin:12px 0 6px !important; }
.mkl-grid .pack__trust{ margin-top:14px; padding-top:11px; }

/* =========================================================
   AMÉLIORATIONS PACKS (v23)
   ========================================================= */

/* Ligne d'économie : « 2 accès » en dégradé de la charte + « Vous économisez … », sur une ligne */
.mkl-seats{
  font-weight:800;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.mkl-eco{ white-space:nowrap; font-size:.75rem; }

/* Hauteur réduite EN GÉNÉRAL (tous les packs, pas seulement les courts) */
.mkl-grid .plan.pack{ padding:20px 20px 16px !important; }
.mkl-pricebox{ margin:8px 0 2px; padding:9px 12px; }
.mkl-price{ font-size:2.05rem; }
.mkl-grid .pack__incl{ margin:9px 0 4px !important; }
.mkl-grid .pack__list li{ padding:1px 0; font-size:.87rem; }
.mkl-grid .pack__trust{ margin-top:auto; padding-top:9px; }
.mkl-grid .bpack__more{ margin-top:8px; padding:7px; }