.pe-badge--done .pe-done-ico{
  display: block;
}
/* =========================================
   Sticky footer (ONLY on VOD pages)
   Prevents the white gap below the footer on short pages.
   Scope: body.pe-vod-shell
   ========================================= */

body.pe-vod-shell .page-wrapper,
body.pe-vod-shell .main-wrapper{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.pe-vod-shell .main-container{
  flex: 1 0 auto;
}

/* Footer must be the last flex item */
body.pe-vod-shell footer,
body.pe-vod-shell #footer,
body.pe-vod-shell .footer,
body.pe-vod-shell .footer-container{
  margin-top: auto;
}
/* Challenge placeholder (when no term thumbnail is set) */
.pe-ch-ph{
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(0,0,0,.04), rgba(0,0,0,.08));
}



/* =========================================
   Subscriptions UI — premium block (no nested card)
   ========================================= */

.pe-subscriptions{
  margin: 0;
}

/* Hide legacy MemberPress table when enhanced */
.pe-is-hidden{
  display: none !important;
}

.pe-sub-block{
  /* IMPORTANT: no background/border/shadow here (container already is a card) */
  padding: 0;
  margin: 0;
}

.pe-sub-block__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
}

/* REPLACED: .pe-sub-block__title */
.pe-sub-block__title{
  font-size: 0.875rem; /* align with account dashboard */
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: #1a2b3a; /* Bleu de Prusse */
}

.pe-sub-badge{
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(16,185,129,.35);
  background: rgba(16,185,129,.10);
  color: rgba(6,95,70,.85);
  font-weight: 600;
  font-size: 14px;
}

.pe-sub-badge.is-active{
  border-color: rgba(16,185,129,.35);
  background: rgba(16,185,129,.10);
  color: rgba(6,95,70,.85);
}

.pe-sub-block__body{
  display: grid;
  gap: 14px;
}

.pe-sub-line{
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 22px;
  align-items: baseline;
}

/* REPLACED: .pe-sub-k */
.pe-sub-k{
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(17,24,39,.52); /* keep label color */
}

/* REPLACED: .pe-sub-v */
.pe-sub-v{
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #1a2b3a; /* Bleu de Prusse for values/dates */
}

/* REPLACED: .pe-sub-price */
.pe-sub-price{
  font-weight: 500;
  color: #1a2b3a; /* keep same as values */
  opacity: .7;
}

.pe-sub-details{
  margin-top: 6px;
  font-size: 0.875rem;
  font-style: italic;
  color: rgba(17,24,39,.52);
}

.pe-sub-block__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

/* REPLACED: .pe-sub-btn */
.pe-sub-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 999px;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 0.875rem; /* 14px */
  letter-spacing: 0;
  line-height: 1;
  text-transform: none !important;
  border: 1px solid rgba(17,24,39,.14);
  box-shadow: none !important;
}

/* REPLACED: .pe-sub-btn--primary */
.pe-sub-btn--primary{
  background: #1a2b3a; /* Bleu de Prusse */
  border-color: rgba(17,24,39,.14);
  color: #fff !important;
}


/* Ghost/secondary (for Cancel) */
.pe-sub-btn--ghost{
  background: transparent;
  color: rgba(17,24,39,.80);
  border-color: rgba(17,24,39,.14);
}

.pe-sub-btn--ghost:hover{
  background: rgba(0,0,0,.03);
}

/* REPLACED: @media (max-width: 980px) for subs block */
@media (max-width: 980px){
  .pe-sub-block__title{ font-size: 0.875rem; }
  .pe-sub-k{ font-size: 0.875rem; }
  .pe-sub-v{ font-size: 0.875rem; }
  .pe-sub-line{
    grid-template-columns: 1fr;
    gap: 6px;
  }
}



.pe-account{
  max-width: 1180px;
  margin: 64px auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.pe-account-sidebar{
  position: sticky;
  top: 32px;
  border-radius: 22px;
  padding: 22px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
}

.pe-menu{
  display: grid;
  gap: 6px;
}

.pe-menu a{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 11px 12px;
  border-radius: 14px;

  color: rgba(17,24,39,.86);
  text-decoration: none;

  background: transparent;
  border: 1px solid transparent;
  transition: .18s ease;
}

.pe-menu a:hover{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.06);
  transform: none;
}

/* si tu mets .is-active sur le lien courant */
.pe-menu a.is-active{
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.08);
}

/* icônes Iconify dans le menu */
.pe-menu .iconify{
  width: 18px;
  height: 18px;
  opacity: .7;
  flex: 0 0 auto;
}

/* “danger zone” */
.pe-menu a.pe-menu__danger{
  color: #b45309;
}
.pe-menu a.pe-menu__danger:hover{
  background: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.28);
}

/* zone contenu */
.pe-account-content{
  border-radius: 22px;
  padding: 34px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

/* vire le menu natif MemberPress + puces */
.pe-account-content .mepr-nav,
.pe-account-content .mepr-nav ul{
  display: none !important;
}

.pe-account-content ul{
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

/* titres/sections */
.pe-account-content h1,
.pe-account-content h2,
.pe-account-content h3{
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

/* formulaire */
.pe-account-content .mepr-account-form label{
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 8px;
  display: inline-block;
}

.pe-account-content .mepr-account-form input[type="text"],
.pe-account-content .mepr-account-form input[type="email"],
.pe-account-content .mepr-account-form input[type="password"],
.pe-account-content .mepr-account-form select,
.pe-account-content .mepr-account-form textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.14);
  background: #fff;
  padding: 14px 14px;
  font-size: 15px;
  outline: none;
  transition: .2s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.pe-account-content .mepr-account-form input:focus,
.pe-account-content .mepr-account-form select:focus,
.pe-account-content .mepr-account-form textarea:focus{
  border-color: rgba(17,24,39,.28);
  box-shadow: 0 0 0 6px rgba(17,24,39,.06);
}

/* ---------- Buttons (Account) — UNIFIED ---------- */

/* Primary buttons: MemberPress submits + actions */
.page-id-6629 .pe-account-content :where(
  .mepr-account-form input[type="submit"],
  .mepr-account-form button,
  .mepr-submit,
  input.mepr-submit,
  button.mepr-submit,
  .mepr-account-row-action a,
  a.mepr-account-update,
  a.mepr-account-row-action,
  a.mepr-account-row-action-link,
  .pe-sub-btn.pe-sub-btn--primary, .mepr-submit.cursor-init, .mepr-submit.mepr-share-button.cursor-init,
){
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;

  border-radius: 999px !important;
  padding: 12px 14px !important;

  border: 1px solid rgba(17,24,39,.14) !important;
  background: #1a2b3a !important; /* Bleu de Prusse */
  color: #fff !important;

  font-weight: 600 !important;
  font-size: 0.875rem !important; /* 14px */
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-transform: none !important;

  text-decoration: none !important;
  cursor: pointer;

  box-shadow: none !important;
  transition: none  !important;
}

/* Secondary / cancel buttons (ghost) */
.page-id-6629 .pe-account-content :where(
  a.mepr-cancel,
  a.mepr-account-cancel,
  .mepr-cancel a,
  a.mepr-account-row-action-cancel,
  .pe-sub-btn.pe-sub-btn--ghost,.mepr-open-cancel-confirm.mepr-account-row-action.mepr-account-cancel.pe-sub-btn.pe-sub-btn--ghost.cursor-init
){
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  padding: 12px 14px !important;

  border: 1px solid rgba(17,24,39,.14) !important;
  background: transparent !important;
  color: rgba(17,24,39,.80) !important;

  font-weight: 600;
  font-size: 0.875rem; /* 14px */
  letter-spacing: 0;
  line-height: 1;
  text-transform: none !important;

  text-decoration: none !important;
  cursor: pointer;

  box-shadow: none !important;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.page-id-6629 .pe-account-content :where(
  a.mepr-cancel,
  a.mepr-account-cancel,
  .mepr-cancel a,
  a.mepr-account-row-action-cancel,
  .pe-sub-btn.pe-sub-btn--ghost
):hover{
  background: rgba(0,0,0,.03);
  box-shadow: none !important;
}

/* Focus ring (accessible, consistent) */
.page-id-6629 .pe-account-content :where(
  .mepr-account-form input[type="submit"],
  .mepr-account-form button,
  .mepr-submit,
  input.mepr-submit,
  button.mepr-submit,
  .mepr-account-row-action a,
  a.mepr-account-update,
  a.mepr-account-row-action,
  a.mepr-account-row-action-link,
  a.mepr-cancel,
  a.mepr-account-cancel,
  .mepr-cancel a,
  a.mepr-account-row-action-cancel,
  .pe-sub-btn
):focus{
  outline: 2px solid rgba(26,43,58,.28);
  outline-offset: 2px;
  box-shadow: none !important;
}

/* responsive */
@media (max-width: 980px){
  .pe-account{
    grid-template-columns: 1fr;
  }
  .pe-account-sidebar{
    position: relative;
    top: auto;
  }
}

#mepr-account-nav ul{
    display: none !important;
}

/* =========================================
   Pilates Excellence — Account (MemberPress)
   UNDERLINE inputs + softer errors + mobile tabs
   ========================================= */

/* ---------- Inputs UNDERLINE (pas de rectangle) ---------- */
.pe-account-content .mepr-account-form input[type="text"],
.pe-account-content .mepr-account-form input[type="email"],
.pe-account-content .mepr-account-form input[type="password"],
.pe-account-content .mepr-account-form input[type="tel"],
.pe-account-content .mepr-account-form input[type="number"],
.pe-account-content .mepr-account-form select,
.pe-account-content .mepr-account-form textarea{
  width: 100%;
  border: none !important;
  border-bottom: 1px solid rgba(17,24,39,.18) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 12px 0 !important;         /* pas de padding latéral */
  font-size: 13px !important;          /* plus petit */
  line-height: 1.45;
  box-shadow: none !important;
  outline: none;
}

/* Placeholder plus discret */
.pe-account-content .mepr-account-form ::placeholder{
  color: rgba(17,24,39,.42);
}

/* Focus : underline plus présent */
.pe-account-content .mepr-account-form input:focus,
.pe-account-content .mepr-account-form select:focus,
.pe-account-content .mepr-account-form textarea:focus{
  border-bottom-color: rgba(17,24,39,.55) !important;
  box-shadow: none !important;
}

/* Select : évite le rendu "box" selon navigateurs */
.pe-account-content .mepr-account-form select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 26px !important;
  background-image: linear-gradient(45deg, transparent 50%, rgba(17,24,39,.6) 50%),
                    linear-gradient(135deg, rgba(17,24,39,.6) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Textarea underline (et un peu de respiration) */
.pe-account-content .mepr-account-form textarea{
  resize: vertical;
  min-height: 90px;
}

/* Labels plus premium */
.pe-account-content .mepr-account-form label{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(17,24,39,.72);
  margin: 0 0 6px;
  display: inline-block;
}

/* Évite les gros espacements “formulaire old school” */
.pe-account-content .mepr-account-form .mp-form-row,
.pe-account-content .mepr-account-form .mepr-form-row,
.pe-account-content .mepr-account-form p{
  margin: 0 0 18px;
}

/* ---------- Erreurs : orange doux (pas rouge agressif) ---------- */
.pe-account-content .mepr-error,
.pe-account-content .mepr-form-has-errors,
.pe-account-content .mepr-form-error,
.pe-account-content .mepr-account-form .mepr-error{
  color: #b45309 !important; /* amber */
}

.pe-account-content .mepr-account-form .mepr-error{
  background: rgba(245,158,11,.10) !important;
  border: 1px solid rgba(245,158,11,.28) !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  margin: 10px 0 18px !important;
}

/* Champs en erreur : underline orange, pas de fond rouge */
.pe-account-content .mepr-account-form .mepr-error input,
.pe-account-content .mepr-account-form .mepr-error select,
.pe-account-content .mepr-account-form .mepr-error textarea{
  border-bottom-color: rgba(245,158,11,.85) !important;
}

/* Si MemberPress met une classe "invalid" / "error" sur l'input */
.pe-account-content .mepr-account-form input[aria-invalid="true"],
.pe-account-content .mepr-account-form .invalid,
.pe-account-content .mepr-account-form .error{
  border-bottom-color: rgba(245,158,11,.85) !important;
  box-shadow: none !important;
}

/* ---------- Bouton : ajuste pour matcher l’underline style ---------- */
/* Buttons are unified above (do not override here). */

/* =========================================
   Mobile : menu en "tabs slider" horizontal
   ========================================= */

@media (max-width: 980px){

  /* sidebar devient barre d’onglets en haut */
  .pe-account{
    display: block;
  }

  .pe-account-sidebar{
    position: relative;
    top: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    margin: 0 0 14px;
  }

  .pe-menu{
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 4px 12px;
    scroll-snap-type: x mandatory;
  }

  .pe-menu::-webkit-scrollbar{
    height: 0;
  }

  .pe-menu a{
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(11,13,16,.06);
    border: 1px solid rgba(11,13,16,.10);
    color: rgba(11,13,16,.78);
    white-space: nowrap;
    transform: none;
  }

  .pe-menu a:hover{
    background: rgba(11,13,16,.09);
  }
}

/* Optionnel : contenu un peu plus compact sur mobile */
@media (max-width: 560px){
  .pe-account-content{
    padding: 22px;
    border-radius: 18px;
  }
  .pe-account-content .mepr-account-form input,
  .pe-account-content .mepr-account-form select,
  .pe-account-content .mepr-account-form textarea{
    font-size: 12.5px !important;
  }
}

/* =========================================
   MOBILE FIX — Uncode container + tabs cut
   ========================================= */

@media (max-width: 980px){

  /* 1) On casse le "container" Uncode autour de la page account */
  .pe-account{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 16px !important;          /* petite marge utile */
  }

  /* Si Uncode applique un overflow caché sur un parent, ça coupe le slider */
  .pe-account,
  .pe-account-sidebar{
    overflow: visible !important;
  }

  /* 2) Sidebar -> vraie barre d’onglets full width */
  .pe-account-sidebar{
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .pe-menu{
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;

    padding: 10px 2px 12px !important;
    margin: 0 !important;

    scroll-snap-type: x mandatory;
  }

  .pe-menu::-webkit-scrollbar{
    display: none;
  }

  .pe-menu a{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    scroll-snap-align: start;

    padding: 9px 12px !important;
    border-radius: 999px !important;
    font-size: 13px !important;

    /* évite l’effet “pill énorme + contour trop visible” */
    background: rgba(11,13,16,.06) !important;
    border: 1px solid rgba(11,13,16,.10) !important;
  }

  /* 3) Le contenu ne doit pas être dans un "grand rectangle" centré */
  .pe-account-content{
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 18px 16px !important;

    border-radius: 16px !important;

    /* option : moins “carte flottante” si tu veux gagner de l’espace */
    box-shadow: 0 8px 20px rgba(0,0,0,.05) !important;
  }

  /* 4) Réduire encore les espaces verticaux du formulaire sur mobile */
  .pe-account-content .mepr-account-form .mp-form-row,
  .pe-account-content .mepr-account-form .mepr-form-row,
  .pe-account-content .mepr-account-form p{
    margin: 0 0 14px !important;
  }

  .pe-account-content .mepr-account-form label{
    font-size: 11.5px !important;
    margin: 0 0 6px !important;
  }

  .pe-account-content .mepr-account-form input[type="text"],
  .pe-account-content .mepr-account-form input[type="email"],
  .pe-account-content .mepr-account-form input[type="password"],
  .pe-account-content .mepr-account-form select,
  .pe-account-content .mepr-account-form textarea{
    font-size: 12.5px !important;
    padding: 10px 0 !important;
  }
}

/* ============================
   FIX MOBILE — tabs cut + no big white card
   ============================ */

@media (max-width: 980px){

  /* 1) Empêcher Uncode de couper le slider (wrappers fréquents) */
  body.page-id-0 .pe-account, /* fallback si tu n'as pas l'ID */
  .page .pe-account,
  .page .pe-account-sidebar,
  .page .pe-menu,
  .page .pe-account-content,
  .page .main-container,
  .page .post-content,
  .page .uncode-wrapper,
  .page .uncont,
  .page #main,
  .page #content{
    overflow: visible !important;
  }

  /* 2) Sidebar -> barre d’onglets vraiment scrollable */
  .pe-account-sidebar{
    padding: 0 !important;
    margin: 0 0 12px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .pe-menu{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;

    /* IMPORTANT : laisse de l’espace au départ pour éviter le “cut” */
    padding: 10px 16px 12px !important;
    margin: 0 -16px 0 !important; /* étire la zone scrollable jusqu’aux bords */
    scroll-snap-type: x mandatory;
  }

  .pe-menu::-webkit-scrollbar{ display:none; }

  .pe-menu a{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    scroll-snap-align: start;

    padding: 9px 12px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    background: rgba(11,13,16,.06) !important;
    border: 1px solid rgba(11,13,16,.10) !important;
  }

  /* 3) Supprimer le “gros rectangle blanc” sur mobile */
  .pe-account-content{
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    /* on garde juste un padding utile */
    padding: 0 16px 24px !important;
    margin: 0 !important;
  }

  /* Si tu veux quand même une carte, mais plus compacte :
     remplace background transparent + shadow none par:
     background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:16px;
  */

  /* 4) Form : resserrer un peu */
  .pe-account-content .mepr-account-form .mp-form-row,
  .pe-account-content .mepr-account-form .mepr-form-row,
  .pe-account-content .mepr-account-form p{
    margin: 0 0 14px !important;
  }
}
/* =========================================
   UNCODE: remove left/right gutters on Account (row-parent)
   Page ID: 6629
   ========================================= */

@media (max-width: 980px){

  /* Uncode wrapper that creates the white gutter */
  .page-id-6629 .main-container .row-container,
  .page-id-6629 .main-container .row-container .row-parent{
    max-width: 100% !important;
    width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* If Uncode applies padding on inner columns as well */
  .page-id-6629 .main-container .row-container .row-parent > .row-inner,
  .page-id-6629 .main-container .row-container .row-parent > .row-inner > .row{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Our content keeps a clean, consistent gutter */
  .page-id-6629 .pe-account{
    padding: 0 16px !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  /* Tabs: stretch scroll area to the edges */
  .page-id-6629 .pe-menu{
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* =========================================
   UNCODE cleanup — Account page only (ID 6629)
   ========================================= */

/* Supprimer le padding-top global imposé par Uncode */
.page-id-6629 .main-container .row-container.double-top-padding,
.page-id-6629 .main-container .row-container .double-top-padding{
  padding-top: 0 !important;
}

/* Sécurité : si Uncode le met aussi sur row-parent */
.page-id-6629 .main-container .row-container.double-top-padding .row-parent,
.page-id-6629 .main-container .row-container.double-top-padding .row-inner,
.page-id-6629 .main-container .row-container .double-top-padding .row-inner{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.video-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.meta-group {
  font-size: 13px;
}

.meta-label {
  font-weight: 600;
  margin-right: 6px;
}

.meta-pill {
  display: inline-block;
  margin-right: 6px;
}

.meta-pill {
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.06);
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
}


.pe-video-player iframe,
.pe-video-player video {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  display: block;
  border-radius: 14px;
}

.pe-video-player {
  overflow: hidden;
}

.pe-back-to-vod{
  display:inline-block;
  margin-top: 18px;
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.25);
  padding-bottom: 2px;
}
.pe-back-to-vod:hover{
  border-bottom-color: rgba(0,0,0,0.6);
}

.pe-vod-filters{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin: 10px 0 26px;
}

.pe-vod-filter__label{
  font-weight:600;
  margin-bottom:10px;
}

.pe-vod-filter__pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.pe-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
  text-decoration:none;
  font-size:13px;
}

.pe-pill.is-active{
  background: rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.12);
}

.pe-pill--small{
  padding:4px 10px;
  font-size:12px;
}

/* =========================================================
   UNDERLINE (premium) — moteur unique
   Utilisé pour:
   - Réinitialiser les filtres (.pe-reset / .pe-link-reset / .pe-btn--reset)
   - Liens inline type “Quelle sera la prochaine ?” (.pe-cta-link)
   Comportement: le trait se "wipe" au hover puis se redessine au leave.
   Notes UX:
   - largeur du trait = largeur du texte (pas de “ligne trop longue”)
   - offset du trait proportionnel à la taille du texte (en em)
   ========================================================= */

/* Base (reset / liens simples) */
.pe-reset,
.pe-link-reset,
.pe-btn--reset,
.pe-cta-link{
  position: relative;
  display: inline-block;          /* ✅ underline = largeur exacte du texte */
  width: fit-content;             /* ✅ évite tout stretch involontaire */
  padding: 0;                     /* on gère l’offset via padding-bottom */
  padding-bottom: .18em;          /* ✅ offset proportionnel (remplace px) */
  text-decoration: none !important;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.15;
}

/* La CTA a une flèche -> inline-flex uniquement pour celle-ci */
.pe-cta-link{
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

/* Trait */
.pe-reset::after,
.pe-link-reset::after,
.pe-btn--reset::after,
.pe-cta-link::after{
  content: "";
  position: absolute;
  left: 0;
  width: 100%;                    /* ✅ suit le texte */
  bottom: .06em;                  /* ✅ offset proportionnel */
  height: 1px;
  background: currentColor;
  opacity: .9;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform .24s cubic-bezier(.4,0,.2,1);
}

@media (hover:hover){
  .pe-reset:hover::after,
  .pe-link-reset:hover::after,
  .pe-btn--reset:hover::after,
  .pe-cta-link:hover::after{
    transform: scaleX(0);
    transform-origin: right;
  }
}

/* Opacité hover (même feeling qu’avant) */
.pe-reset,
.pe-link-reset,
.pe-btn--reset{
  opacity: .65;
  font-size: 13px;
}
.pe-reset:hover,
.pe-link-reset:hover,
.pe-btn--reset:hover{
  opacity: .9;
}

.pe-vod-empty{
  padding:18px 0;
  opacity:.75;
}

/* Layout */
.pe-vod-app{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 26px;
  align-items:start;
}

.pe-vod-topbar{
  grid-column: 1 / -1;
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 12px 0 4px;
}

.pe-btn{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  cursor:pointer;
}

.pe-btn--reset{
  background: none;
  border: 0;
  padding: 0;
  font-size: 13px;
  opacity: .65;
  cursor: pointer;
  text-decoration: none !important; /* ✅ évite le 2e underline natif */
}

.pe-vod-active{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-left:auto;
}

.pe-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
  font-size:13px;
}
.pe-pill--small{ padding:4px 10px; font-size:12px; }
.pe-pill--active{ background: rgba(0,0,0,.06); }

.pe-vod-sidebar{
  position: sticky;
  top: 110px; /* adapte selon ton header */
}

.pe-vod-filters{
  display:flex;
  flex-direction:column;
  gap: 18px;
}

.pe-filter-title{
  font-weight: 600;
  margin-bottom: 10px;
}

.pe-filter-options{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.pe-filter-chip{
  border: 1px solid rgba(0,0,0,.02);
  background: rgba(0,0,0,.03);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  cursor:pointer;
}
.pe-filter-chip.is-active{
  background: rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.08);
}

.pe-vod-main{ min-width: 0; }

.pe-vod-loader{
  margin-top: 14px;
  opacity: .65;
  font-size: 13px;
}

/* Grid premium (remplace cards + pastilles) */
.pe-video-grid{
  display:grid;
  grid-template-columns: repeat(1, minmax(0,1fr));
  gap: 18px 18px;
  width: 100%;
  justify-items: stretch;
  align-content: start;
}

/* Uncode sometimes centers direct children; force our challenge/cards grid to behave like the other pages */
.pe-page-wrap .pe-vod-grid,
.pe-page-wrap .pe-video-grid{
  width: 100% !important;
}

@media (min-width: 1024px){
  .pe-video-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 26px 26px;
  }
}

@media (min-width: 1800px){
  .pe-video-grid{
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
}

/* Item (V2 cards) */
.pe-video-item{
  min-width: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;

  /* peu de padding, pas “enfermé” */
  padding: 12px 12px 14px;

  box-shadow: 0 10px 26px rgba(0,0,0,.05);
  transition: transform 180ms ease, box-shadow 180ms ease;

  /* apparition: gérée par classes JS (.is-enter). Par défaut, la carte doit être visible */
  opacity: 1;
  transform: none;
  animation: none;
  width: 100%;
  text-align: left;
}

@media (hover:hover) and (pointer:fine){
  .pe-video-item:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0,0,0,.08);
  }
}

@keyframes peCardIn{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}

.pe-video-thumb{
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,.04);
  text-decoration: none;
}

/* ratio stable 16:9 */
.pe-video-thumb:before{
  content:"";
  display:block;
  padding-top:56.25%;
}

.pe-video-thumb > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1);
  transition: transform 420ms ease; /* zoom plus lent & subtil */
}

@media (hover:hover) and (pointer:fine){
  .pe-video-item:hover .pe-video-thumb > img{
    transform: scale(1.025);
  }
}

.pe-video-thumb::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.14);
  opacity: 0;
  transition: opacity 220ms ease;
  z-index: 2;
  pointer-events: none;
}

@media (hover:hover) and (pointer:fine){
  .pe-video-item:hover .pe-video-thumb::after{
    opacity: 1;
  }
}

/* Play overlay bottom-left (desktop only) */
.pe-play{
  position:absolute;
  left: 14px;
  bottom: 14px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.pe-play-ico{
  width: 0;
  height: 0;
  border-left: 12px solid rgba(255,255,255,.95);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left: 2px;
}

@media (hover:hover) and (pointer:fine){
  .pe-video-item:hover .pe-play{
    opacity: 1;
    transform: translateY(0);
  }
}

@media (hover:none){
  .pe-play{ display:none; }
}

.pe-meta{
  display:inline-flex;
  align-items:center;
  gap: 7px;
  white-space: nowrap;
}

.pe-meta-txt{
  font-size: 11px !important;
  color: rgba(17,24,39,.55) !important;
}

.pe-ico{
  width: 14px;
  height: 14px;
  display:inline-block;
  background-size: 14px 14px;
  background-repeat:no-repeat;
  background-position:center;

  /* V2: icônes plus légères */
  opacity: .55;
  filter: grayscale(1) saturate(0);
}

.pe-filter-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  margin-bottom:10px;
}

.pe-filter-title .pe-ico{
  width:18px;
  height:18px;
  opacity:.85;
  flex: 0 0 auto;
}

.pe-vod-empty{ padding:18px 0; opacity:.75; }

/* Responsive */
@media (max-width: 1024px){
  .pe-vod-app{ grid-template-columns: 280px 1fr; }
}

@media (max-width: 900px){
  .pe-vod-app{ grid-template-columns: 1fr; }
  .pe-vod-sidebar{ display:none; }
  .pe-btn--filters{ display:inline-flex; }
  .pe-vod-topbar{ position: sticky; top: 0; background: transparent; padding: 10px 0; z-index: 20; }
  .pe-vod-active{ margin-left: 0; }
}

@media (min-width: 901px){
  .pe-btn--filters{ display:none; }
}

/* Drawer */
.pe-vod-drawer{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display:none;
}

.pe-vod-drawer.is-open{ display:block; }

.pe-vod-drawer__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
}

/* Sécurité : le drawer ne doit jamais apparaître sur desktop */
@media (min-width: 901px){
  .pe-vod-drawer{ display:none !important; }
}

.pe-vod-drawer__panel{
  position:absolute;
  inset: 0 0 0 auto;
  width: min(92vw, 420px);
  height: 100%;
  background: #fff;
  display:flex;
  flex-direction:column;
}

.pe-vod-drawer__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.pe-vod-drawer__title{ font-weight: 600; }

.pe-vod-drawer__body{
  padding: 14px;
  overflow:auto;
}

.pe-vod-drawer__footer{
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(0,0,0,.06);
  display:flex;
  gap:10px;
}

.pe-btn--apply{
  background: rgba(0,0,0,.08);
}

html.pe-vod-lock, html.pe-vod-lock body{
  overflow:hidden;
}

/* Durée — uniquement DANS les vignettes */
.pe-video-thumb .pe-video-duration,
.single-video .pe-related__thumb .pe-video-duration{
  position: absolute;
  right: var(--pe-card-inset);
  bottom: var(--pe-card-inset);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Sur la page single, on utilise un inset fixe adapté */
.single-video .pe-related__thumb .pe-video-duration{
  right: 10px;
  bottom: 10px;
}

/* Challenge count pill uses the same class as duration */
.pe-ch-item .pe-video-duration{
  letter-spacing: .01em;
}

/* Badge "Nouveau" — uniquement DANS les vignettes (évite qu'il flotte dans le layout) */
.pe-video-thumb .pe-badge,
.single-video .pe-related__thumb .pe-badge{
  position: absolute;
  top: var(--pe-card-inset);
  left: var(--pe-card-inset);
  z-index: 3;
  padding: 6px 8px !important;
  font-size: 10px !important;
  line-height: 1;
  border-radius: 999px;
  letter-spacing: .01em;
  user-select: none;
  pointer-events: none;
}

/* Sur la page single, on utilise un inset fixe adapté */
.single-video .pe-related__thumb .pe-badge{
  top: 10px;
  left: 10px;
}

.pe-badge--glass{
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

/* Si ta vignette est claire, tu peux forcer une légère ombre texte */
.pe-badge--glass{
  text-shadow: 0 1px 10px rgba(0,0,0,.25);
}

/* Desktop: on n'affiche pas les filtres actifs en topbar (redondant avec sidebar) */
@media (min-width: 901px){
  .pe-vod-active{ display:none !important; }
  .pe-vod-topbar{ justify-content:flex-end; } /* ou ce que tu veux */
  .pe-vod-topbar .pe-btn--reset{ display:none !important; } /* optionnel, voir point 2 */
}
.pe-vod-sidebar-head{
  display:flex;
  justify-content:flex-end;
  margin: 0 0 10px;
}


/* =========================================
   Inline CTA link (e.g. "Quelle sera la prochaine ?")
   - looks clearly clickable (underline)
   - arrow like dashboard cards
   - underline redraws on hover (L→R)
   ========================================= */

.pe-cta-link{
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}
/* Arrow must be the SAME SVG as dashboard; PHP prints it.
   We only style it here (no pseudo-element to avoid double arrows). */
.pe-cta-link .pe-vod-dash__arrow,
.pe-cta-link .pe-cta-arrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .45;
  transform: translateX(0);
  transition: opacity .18s ease, transform .18s ease;
  line-height: 0;
}

@media (hover:hover){
  .pe-cta-link:hover .pe-vod-dash__arrow,
  .pe-cta-link:hover .pe-cta-arrow{
    opacity: .75;
    transform: translateX(2px);
  }
}

/* =========================================================
   RESET (SIDEBAR UNIQUEMENT) — piloté par .has-filters
   ========================================================= */
.pe-vod-sidebar .pe-link-reset--sidebar{
  display: none !important;
}

.pe-vod-app.has-filters .pe-vod-sidebar .pe-link-reset--sidebar{
  display: inline-flex !important;
}

/* =========================================
   MOBILE — Topbar reset visible only if has-filters
   ========================================= */

/* Sur mobile, on cache le reset par défaut */
@media (max-width: 900px){
  .pe-vod-topbar .pe-btn--reset{
    display: none !important;
  }

  /* On l’affiche uniquement si filtres actifs */
  .pe-vod-app.has-filters .pe-vod-topbar .pe-btn--reset{
    display: inline-flex !important;
    align-items: center;
  }
}

/* =========================================
   MOBILE — Icon for "Filtrer" button
   ========================================= */

@media (max-width: 900px){
  .pe-btn--filters{
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .pe-btn--filters::before{
    content: "";
    width: 18px;
    height: 18px;
    display: inline-block;
    opacity: .75;

    /* Apple-like "filter/sliders" icon */
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 7h10a2 2 0 1 0 0-2H4a2 2 0 0 0 0 2Zm0 6h16a2 2 0 1 0 0-2H4a2 2 0 0 0 0 2Zm0 6h10a2 2 0 1 0 0-2H4a2 2 0 0 0 0 2Z'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 7h10a2 2 0 1 0 0-2H4a2 2 0 0 0 0 2Zm0 6h16a2 2 0 1 0 0-2H4a2 2 0 0 0 0 2Zm0 6h10a2 2 0 1 0 0-2H4a2 2 0 0 0 0 2Z'/%3E%3C/svg%3E") no-repeat center / contain;
  }
}

/* =========================
   V1.2 — Dashboard header
   ========================= */

.pe-vod-dash{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 18px 18px;
  margin: 0 0 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.04);
}


/* =========================
   V1.2 — Dashboard header (typography + spacing)
   ========================= */

.pe-vod-dash__hello,
.pe-related__title,
.pe-page-title{
  font-size: 28px !important;
  font-weight: 650;
  letter-spacing: -0.01em;
  font-family: "Montserrat" !important;
  margin: 0 0 8px 0 !important;
}

.pe-vod-dash__name{ font-weight: 750; }

.pe-vod-dash__sub,
.pe-page-sub{
  font-size: 20px !important;
  opacity: .72;
  margin: 0 0 20px 0 !important; /* ✅ espace sous la phrase */
}

/* Si un template met la phrase dans un <p> sans classe, on harmonise */
.pe-vod-dash__sub p,
.pe-page-sub p{
  margin: 0 !important;
}

.pe-vod-dash__cards{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 12px;
  align-items: stretch;
}

.pe-vod-dash__card{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.02);
  padding: 12px 14px;
}

.pe-vod-dash__label{
  font-size: 12px;
  opacity: .7;
  margin-bottom: 6px;
}

.pe-vod-dash__value{
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.pe-vod-dash__card--actions{
  display:flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  background: transparent;
}

.pe-vod-dash__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration:none;
  font-size: 13px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
  color: inherit;
}

.pe-vod-dash__btn--ghost{
  background: transparent;
}

@media (max-width: 900px){
  .pe-vod-dash__cards{
    grid-template-columns: 1fr 1fr;
  }
  .pe-vod-dash__card--actions{
    grid-column: 1 / -1;
  }
}
/* =========================
   V1.2 — Skeleton loader
   ========================= */

.pe-skel-grid{
  display:grid;
  grid-template-columns: repeat(1, minmax(0,1fr));
  gap: 18px;
}

@media (min-width: 1024px){
  .pe-skel-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 26px;
  }
}

.pe-skel-card{
  border-radius: 16px;
}

.pe-skel-thumb{
  border-radius: 16px;
  aspect-ratio: 16 / 9;
  background: rgba(0,0,0,.06);
  overflow:hidden;
}

.pe-skel-line{
  height: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  margin-top: 10px;
}

.pe-skel-line.sm{ width: 55%; }
.pe-skel-line.md{ width: 78%; }

@keyframes peShimmer {
  0% { transform: translateX(-60%); }
  100% { transform: translateX(60%); }
}

.pe-skel-thumb::after,
.pe-skel-line::after{
  content:"";
  display:block;
  height:100%;
  width: 120%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform: translateX(-60%);
  animation: peShimmer 1.1s ease-in-out infinite;
}

/* Dashboard wrapper (desktop = card) */
.pe-vod-dash{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.06);
}

/* Mobile: on "sort" le wrapper (plus de card), mais on garde les mini-cards */
@media (max-width: 900px){
  .pe-vod-dash{
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
    margin: 0 0 18px;
  }
}

/* =========================
   V1.2 — Dashboard cards (refined)
   ========================= */

.pe-vod-dash__card{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .18s ease, transform .18s ease;
}

@media (hover:hover){
  .pe-vod-dash__card:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
  }
}

/* Head: icon + label */
.pe-vod-dash__head{
  display: flex;
  align-items: center;
  gap: 8px;
}

.pe-vod-dash__icon{
  display: inline-flex;
  opacity: .85;
}

/* Bottom row: value + arrow */
.pe-vod-dash__bottom{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 12px;
}

.pe-vod-dash__value{
  font-size: 24px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ➜ Flèche (pas chevron) */
.pe-vod-dash__arrow{
  display: inline-flex;
  opacity: .45;
  transform: translateX(0);
  transition: opacity .18s ease, transform .18s ease;
}

@media (hover:hover){
  .pe-vod-dash__card:hover .pe-vod-dash__arrow{
    opacity: .75;
    transform: translateX(2px);
  }
}

/* Grille stable avec ou sans "Reprendre" */
.pe-vod-dash__cards{
  grid-auto-flow: dense;
}

/* =========================
   V1.2 — Save toggle (under thumb, right) — FIX UI
   ========================= */

.pe-video-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  margin: 10px 0 4px; /* ✅ réduit l’espace sous la vignette */
}

.pe-video-title{
  margin: 0 !important;          /* ✅ évite double margin */
  font-size: 16px !important;
  line-height: 1.15;
  font-weight: 600;
  flex: 1 1 auto;
}

.pe-video-title a{
  color: inherit;
  text-decoration:none;
}

/* Bouton bookmark plus petit */
.pe-save-btn{
  position: relative;
  flex: 0 0 auto;
  width: 30px;      /* ✅ plus petit */
  height: 30px;     /* ✅ plus petit */
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
  align-self: flex-start !important;
  margin: 0 !important;
}

.pe-save-btn:active{ transform: scale(.98); }

@media (hover:hover) and (pointer:fine){
  .pe-save-btn:hover{
    background: rgba(0,0,0,.05);
    border-color: rgba(0,0,0,.14);
  }
}

/* Icon */
.pe-save-ico{ display:block; }
.pe-save-fill{
  opacity: 0;
  transition: opacity 160ms ease;
}

/* Saved state */
.pe-save-btn.is-saved{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.14);
}
.pe-save-btn.is-saved .pe-save-fill{ opacity: .95; }

/* Wave subtile */
@keyframes peWave {
  0%   { transform: translate(-50%,-50%) scale(.55); opacity: .18; }
  100% { transform: translate(-50%,-50%) scale(1.55); opacity: 0; }
}

.pe-save-btn.is-animating::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 30px;   /* ✅ wave match bouton */
  height: 30px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%,-50%) scale(.55);
  animation: peWave 420ms ease-out 1;
  pointer-events:none;
  opacity: 0;
}

/* FIX: zéro espace entre titre et meta (même si un ancien .pe-video-title traîne) */
.pe-video-item .pe-video-head .pe-video-title{
  margin: 0 !important;
}
.pe-video-item .pe-video-meta{
  margin-top: 0 !important;
}

/* =========================================
   FIX FINAL — aucun gap entre titre & meta
   ========================================= */

.pe-video-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 2px; /* espace maîtrisé sous la vignette */
}

/* le titre ne doit créer aucun espace vertical */
.pe-video-title{
  margin: 0 !important;
  line-height: 1.15;
}

.pe-video-meta{
  margin-top: 6px !important;
}

/* le bouton ne doit jamais influencer la hauteur de ligne */
.pe-save-btn{
  align-self: flex-start;
}

/* FIX DEFINITIF — gap titre / meta */
.pe-video-item .pe-video-head{
  margin: 10px 0 0 !important;
  padding: 0 !important;
}

.pe-video-item h3.pe-video-title{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.15 !important;
  min-height: 0 !important;
}

.pe-video-item .pe-video-meta{
  margin: 4px 0 0 !important;
  padding: 0 !important;
}

/* Le bouton ne doit jamais “étirer” la zone */
.pe-video-item .pe-save-btn{
  align-self: flex-start;
}

.pe-video-title,
.pe-video-title__link{
  font-family: "Castoro", serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
}

.pe-video-meta{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  column-gap: 14px !important;
  row-gap: 6px !important;
  margin-top: 4px !important;

  /* V2: meta plus léger (gris clair) */
  color: rgba(17,24,39,.55) !important;
}

/* Chaque bloc meta = “item” */
.pe-video-meta .pe-meta{
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

.pe-video-meta .pe-meta{
  color: rgba(17,24,39,.55) !important;
}

/* Fallback si “gap” saute à cause d’un override/theme */
.pe-video-meta .pe-meta:not(:last-child){
  margin-right: 4px !important;
}

@keyframes pePop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes peRipple {
  0%   { transform: translate(-50%,-50%) scale(.55); opacity: .22; }
  100% { transform: translate(-50%,-50%) scale(1.9); opacity: 0; }
}

/* Pop du svg */
.pe-save-btn.is-animating .pe-save-ico{
  animation: pePop 320ms ease-out 1;
}

/* Ripple plus “waouh” */
.pe-save-btn.is-animating::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%,-50%) scale(.55);
  opacity: 0;
  animation: peRipple 520ms ease-out 1;
  pointer-events:none;
}

.pe-video-meta .pe-ico{
  display: inline-flex !important;
  flex: 0 0 auto !important;
}

.rc-anchor-content, .rc-anchor-error-message{
    visibility: hidden !important;
    display: none !important;
}


/* =========================================
   V2 — Studio VOD cards (ONLY)
   ⚠️ Le fond global est géré dans Uncode, donc on ne touche pas au background de page.
   Objectif:
   - VRAIE carte: vignette coins arrondis en haut, coins droits en bas (jonction)
   - Texte + meta DANS la carte (partie basse), coins arrondis en bas
   - Shadow premium + léger lift au hover
   - Zoom image très subtil + plus lent
   - Meta + icônes en gris clair + spacing propre
   ========================================= */

/* Variables (faciles à ajuster) */
:root{
  --pe-card-bg: #f7f6f2;
  --pe-card-radius: 18px;
  --pe-card-border: rgba(0,0,0,.04);

  --pe-card-inset: 16px;

  --pe-card-shadow: 0 8px 30px -8px hsl(30 10% 15% / .12);
  --pe-card-shadow-hover: 0 16px 34px rgba(0,0,0,.11);

  --pe-meta-color: rgba(17,24,39,.55);
}

/* Grille: on garde le premium (gutter plus large sur très grands écrans) */
.pe-video-grid{
  gap: 22px 22px !important;
}
@media (min-width: 1024px){
  .pe-video-grid{ gap: 28px 28px !important; }
}
@media (min-width: 1600px){
  .pe-video-grid{ gap: 34px 34px !important; }
}

/* LA CARTE (wrapper global) */
.pe-video-item{
  background: var(--pe-card-bg) !important;
  border: 1px solid var(--pe-card-border) !important;
  border-radius: var(--pe-card-radius) !important;
  overflow: hidden !important; /* ✅ coins arrondis sur la vignette + body */
  box-shadow: var(--pe-card-shadow) !important;
  padding: 0 !important;       /* ✅ pas de padding qui “enferme” la vignette */

  /* ✅ layout stable: mêmes hauteurs de cartes dans la grille */
  display: flex !important;
  flex-direction: column !important;

  transition: transform 220ms ease, box-shadow 220ms ease !important;
}

.pe-video-item:hover{
  transform: translateY(-4px) !important;
}

@media (hover:hover) and (pointer:fine){
  .pe-video-item:hover{
    transform: translateY(-4px) !important;
    box-shadow: var(--pe-card-shadow-hover) !important;
  }
}

/* Vignette: coins arrondis seulement EN HAUT */
.pe-video-thumb{
  border-radius: var(--pe-card-radius) var(--pe-card-radius) 0 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;  /* shadow portée par la carte, pas par la vignette */
  background: rgba(0,0,0,.04) !important;

  flex: 0 0 auto !important;
}

/* Sécurité: l'image respecte bien le radius de la vignette */
.pe-video-thumb > img{
  border-radius: inherit !important;
}

/* Ratio 16:9 (déjà existant) — on garde */
.pe-video-thumb:before{ padding-top: 56.25% !important; }

/* Zoom image: plus lent + très subtil */
.pe-video-thumb > img{
  transition: transform 700ms ease !important;
}
@media (hover:hover) and (pointer:fine){
  .pe-video-item:hover .pe-video-thumb > img{
    transform: scale(1.04) !important;
  }
}

/* Bloc infos sous vignette: fait partie de la carte
   IMPORTANT: on enlève le margin-top pour que la jonction soit “coins droits”.
*/
.pe-video-info{
  margin-top: 0 !important;
  padding: 16px var(--pe-card-inset) 22px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 0 var(--pe-card-radius) var(--pe-card-radius) !important;
  box-shadow: none !important;

  /* ✅ permet d'aligner proprement le contenu dans la carte */
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Head (titre + save) : propre et compact */
.pe-video-head{
  margin: 0 0 8px !important;
  padding: 0 !important;
  gap: 10px !important;
}

/* Titre: Castoro 500 */
.pe-video-title,
.pe-video-title__link{
  font-family: "Castoro", serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

.pe-video-item h3.pe-video-title{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.15 !important;
  font-size: 1.125rem !important;
}

/* Meta: gris clair + espace entre items + icône ↔ texte */
.pe-video-meta{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  column-gap: 18px !important;
  row-gap: 6px !important;

  /* retire l'indent UL par défaut */
  list-style: none !important;
  margin: 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;

  color: var(--pe-meta-color) !important;
}

/* Sécurité si le markup est en <ul><li> */
.pe-video-meta > li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pe-video-meta .pe-meta{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;          /* ✅ plus d’icônes collées au texte */
  white-space: nowrap !important;
  color: var(--pe-meta-color) !important;
}

.pe-meta-txt{
  font-size: 0.75rem !important;
  color: var(--pe-meta-color) !important;
}

/* Fallback: si un parent (theme/row) est sombre, on force un fond neutre autour de la grille */
.pe-vod-app,
.pe-vod-main,
.pe-video-grid{
  background: transparent !important;
}

/* Si un wrapper Uncode applique un fond sombre, on neutralise uniquement autour de l'app VOD */
.pe-vod-app{
  isolation: isolate;
}

/* Icônes: plus light (gris clair) */
.pe-video-meta .pe-ico{
  opacity: .55 !important;
  filter: grayscale(1) saturate(0) !important;
}

/* Bouton sauvegarder: rien dans la vignette, align top du head */
.pe-save-btn{
  align-self: flex-start !important;
}

/* Animation d’entrée subtile (si JS l’utilise) */
.pe-video-item.is-enter{
  opacity: 0;
  transform: translateY(6px);
}
.pe-video-item.is-enter.is-entered{
  opacity: 1;
  transform: translateY(0);
  transition: opacity 260ms ease, transform 260ms ease;
}
.single-video .main-container,
.single-video #main,
.single-video .post-content{
  background: transparent;
}

/* Wrapper (you can add class pe-video-single in Uncode row if you want;
   we also target common containers on single-video) */
.single-video .pe-video-single,
.single-video .pe-video-single-wrap,
.single-video .pe-video-single-layout{
  max-width: 1180px;
  margin: 44px auto;
  padding: 0 24px;
}

/* Grid: player/content left, sidebar right */
.single-video .pe-video-single-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
}

@media (max-width: 980px){
  .single-video .pe-video-single,
  .single-video .pe-video-single-wrap,
  .single-video .pe-video-single-layout{
    margin: 28px auto;
    padding: 0 16px;
  }
  .single-video .pe-video-single-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Player card */
.single-video .pe-video-player{
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,.04);
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.05);
}

.single-video .pe-video-player iframe,
.single-video .pe-video-player video{
  border-radius: 16px;
}

/* Under-player content */
.single-video .pe-video-single-main{
  min-width: 0;
}

.single-video .pe-video-single-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 10px;
}

.single-video .pe-tag,
.single-video .meta-pill,
.single-video .pe-pill--small{
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.03);
}

.single-video .pe-video-single-title{
  margin: 0 0 8px;
  font-family: "Castoro", serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 34px;
  line-height: 1.05;
}

@media (max-width: 980px){
  .single-video .pe-video-single-title{
    font-size: 28px;
  }
}

.single-video .pe-video-single-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 14px;
  color: rgba(17,24,39,.55);
  font-size: 13px;
}

.single-video .pe-video-single-meta .pe-meta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: rgba(17,24,39,.72);
}

.pe-single-meta .pe-ico{
  opacity: 1;
  filter: grayscale(1) saturate(0);
}

.single-video .pe-video-single-desc{
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
  color: rgba(17,24,39,.78);
  font-size: 14px;
  line-height: 1.55;
}

/* Sidebar */
.single-video .pe-video-single-side{
  position: sticky;
  top: 110px;
}

@media (max-width: 980px){
  .single-video .pe-video-single-side{
    position: relative;
    top: auto;
  }
}

/* =========================================================
   SINGLE VIDEO — Related list (FIX)
   Cible le HTML réel généré par le shortcode:
   .pe-related__row / .pe-related__thumb / .pe-related__body / .pe-save-btn--related
   ========================================================= */

.single-video .pe-related{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.05);
}

.single-video .pe-related__title{
  margin: 0 0 14px;
}

/* ton PHP ajoute un wrapper panel -> on le neutralise */
.single-video .pe-related__panel{
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.single-video .pe-related__list{
  display: grid;
  gap: 14px;
}

/* ✅ LA LIGNE (grid) */
.single-video .pe-related__row{
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr) 44px;
  gap: 14px;
  align-items: center;

  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  min-width: 0;
}

/* Thumb 16:9 */
.single-video .pe-related__thumb{
  width: 196px;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.06);
  position: relative;
  display: block;
}

.single-video .pe-related__img,
.single-video .pe-related__thumb img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Texte */
.single-video .pe-related__body{
  min-width: 0;
}

.single-video .pe-related__name{
  display: block;
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.15;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Meta: items inline, wrap BETWEEN metas (no ellipsis, no 2-line meta) */
.single-video .pe-related__meta{
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 6px;
  column-gap: 14px;
  align-items: center;

  /* keep it readable + consistent */
  color: rgba(17,24,39,.55);
  font-size: 13px;
}

/* Each meta stays on ONE line. If it doesn't fit with others, it wraps to next line. */
.single-video .pe-related__meta .pe-meta{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  flex: 0 1 auto;   /* ✅ natural width, can wrap as a whole item */
  min-width: 0;
  white-space: nowrap; /* ✅ never split a meta on 2 lines */
}

/* No ellipsis, no clipping */
.single-video .pe-related__meta .pe-meta-txt{
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

/* Ensure icons never shrink weirdly */
.single-video .pe-related__meta .pe-ico{
  flex: 0 0 auto;
}

/* séparateur: on le masque (il casse le wrap en 2 colonnes) */
.single-video .pe-related__meta .pe-meta-dot{
  display: none !important;
}

/* bouton save (3e colonne) */
.single-video .pe-save-btn--related{
  justify-self: end;
  align-self: center;

  width: 40px;
  height: 40px;
  border-radius: 999px;
}

/* Badges DANS la vignette */
.single-video .pe-related__thumb .pe-badge{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  padding: 6px 8px !important;
  font-size: 10px !important;
  line-height: 1;
  border-radius: 999px;
  pointer-events: none;
}

.single-video .pe-related__thumb .pe-video-duration{
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;

  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Responsive */
@media (max-width: 980px){
  .single-video .pe-related__row{
    grid-template-columns: 176px minmax(0, 1fr) 44px;
  }
  .single-video .pe-related__thumb{ width: 176px; }
}

@media (max-width: 560px){
  .single-video .pe-related__row{
    grid-template-columns: 152px minmax(0, 1fr) 40px;
    gap: 12px;
  }
  .single-video .pe-related__thumb{ width: 152px; }
  .single-video .pe-save-btn--related{
    width: 36px;
    height: 36px;
  }
}

/* SINGLE — meta alignées, sans pills */
.pe-single-meta{
  display: grid;
  gap: 12px;
  margin: 22px 0 6px;
}

.pe-single-meta__row{
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 14px;
}

.pe-single-meta__label{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: rgba(17,24,39,.85);
}

.pe-single-meta__value{
  display: flex;
  align-items: top;
  color: rgba(17,24,39,.78);
}

.pe-single-meta__text{
  line-height: 1.2;
  /* pas de pills, pas d'ellipsis */
  white-space: normal;
}

@media (max-width: 640px){
  .pe-single-meta__row{
    grid-template-columns: 120px 1fr;
  }
}

/* SINGLE — actions (buttons under player) */

/* Theme vars (single actions only) */
:root{
  --pe-sage: rgb(68, 112, 89);
  --pe-ink: #141414;
  --pe-border: rgba(20,20,20,.18);
}

/* Layout: desktop = 50/50, mobile = stacked */
.pe-single-actions{
  display:flex;
  gap:12px;
  flex-wrap: nowrap;
  align-items: stretch;
  margin: 18px 0 10px;
}

.pe-single-actions .pe-action-btn{
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  justify-content: center;
  padding: 12px 14px;
}

@media (max-width: 640px){
  .pe-single-actions{
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
  }
  .pe-single-actions .pe-action-btn{
    width: 100%;
  }
}

/* Base buttons */
.pe-action-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius: 999px;
  border: 1px solid var(--pe-border);
  background: transparent;
  color: var(--pe-ink);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
}

.pe-action-btn:active{ transform: translateY(1px); }

@media (hover:hover){
  .pe-action-btn:hover{ box-shadow: 0 6px 22px rgba(0,0,0,.06); }
}

.pe-action-ico{
  position: relative;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pe-action-txt{
  display:inline-block;
  white-space: nowrap;
}

/* ===========================
   DONE button (sauge)
   - bordure sauge au repos
   - rempli sauge quand done
   - check -> arm
   - burst (traits) + texte L→R
   =========================== */

.pe-action-btn--done{
  border-color: color-mix(in srgb, var(--pe-sage) 55%, transparent);
  color: var(--pe-sage);
}

.pe-action-btn--done.is-done{
  background: var(--pe-sage);
  border-color: var(--pe-sage);
  color: #fff;
  opacity: .94;
}

/* Superpose les 2 icônes dans le même “slot” */
.pe-action-btn--done .pe-ico-check,
.pe-action-btn--done .pe-ico-arm{
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transform-origin: 50% 50%;
}

.pe-action-btn--done .pe-ico-check{
  opacity: 1;
  transform: scale(1);
  transition: transform .22s ease, opacity .18s ease;
}

.pe-action-btn--done .pe-ico-arm{
  opacity: 0;
  transform: scale(.65);
  transition: transform .26s cubic-bezier(.2,1.2,.2,1), opacity .18s ease;
}

.pe-action-btn--done.is-done .pe-ico-check{
  opacity: 0;
  transform: scale(.55);
}

.pe-action-btn--done.is-done .pe-ico-arm{
  opacity: 1;
  transform: scale(1.05);
}

/* Burst “traits” (pas points) — déclenché via .is-animating */
.pe-action-btn--done .pe-action-ico::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius: 999px;
  opacity: 0;
  transform: scale(.6);
  pointer-events:none;

  /* Rays via conic-gradient */
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(255,255,255,.95) 0 8deg,
      rgba(255,255,255,0) 8deg 22deg
    );

  /* “troue” le centre pour garder uniquement des petits traits */
  -webkit-mask: radial-gradient(circle, transparent 0 58%, #000 60%);
          mask: radial-gradient(circle, transparent 0 58%, #000 60%);
}

.pe-action-btn--done.is-animating .pe-action-ico::before{
  animation: peBurst .38s ease-out both;
}

@keyframes peBurst{
  0%   { opacity: 0; transform: scale(.55) rotate(-8deg); }
  35%  { opacity: .95; transform: scale(1.05) rotate(6deg); }
  100% { opacity: 0; transform: scale(1.22) rotate(14deg); }
}

/* Petit pop du bouton (subtil) */
.pe-action-btn--done.is-animating{
  animation: peBtnPop .22s ease-out both;
}

@keyframes peBtnPop{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}

/* Texte: fade + slide L→R (premium) */
.pe-action-btn.is-animating .pe-action-txt{
  animation: peSlideText2 .26s ease both;
}

@keyframes peSlideText2{
  from{ opacity:0; transform: translateX(-10px); filter: blur(1px); }
  to  { opacity:1; transform: translateX(0);   filter: blur(0); }
}

/* ===========================
   SAVE button
   - rempli quand saved
   =========================== */

.pe-action-btn--save{
  border-color: var(--pe-border);
  color: var(--pe-ink);
}

.pe-action-btn--save.is-saved{
  background: var(--pe-ink);
  border-color: var(--pe-ink);
  color: #fff;
  opacity: .94;
}

/* Fill bookmark when saved */
.pe-action-btn--save.is-saved .pe-save-fill{ opacity: 1; }
.pe-action-btn--save.is-saved .pe-save-stroke{ opacity: .95; }

/* SINGLE — Related: un-card on mobile (breathing) */
@media (max-width: 640px){
  .single-video .pe-related{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  .single-video .pe-related__title{
    margin: 18px 0 12px !important;
  }
}

/* SINGLE — Mobile player edge-to-edge */
@media (max-width: 640px){

  /* on enlève le padding du layout sur mobile */
  .single-video .pe-video-single,
  .single-video .pe-video-single-wrap,
  .single-video .pe-video-single-layout{
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  /* si ton grid est utilisé, on supprime les gaps/paddings */
  .single-video .pe-video-single-grid{
    gap: 0 !important;
  }

  /* le player prend toute la largeur */
  .single-video .pe-video-player{
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .single-video .pe-video-player iframe,
  .single-video .pe-video-player video{
    border-radius: 0 !important;
  }

  /* si un parent ajoute encore un padding 16px (classique), on force l’edge-to-edge */
  .single-video .pe-video-player{
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}

/* =========================
   Dashboard V2 (inspi)
   ========================= */

.pe-vod2{
  margin: 28px 0 18px;
}

.pe-vod2-head{
  margin-bottom: 18px;
}

.pe-vod2-title{
  font-size: 42px;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.02em;
}

.pe-vod2-sub{
  margin: 10px 0 0;
  font-size: 18px;
  opacity: .75;
}

.pe-vod2-stats{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.pe-vod2-stat{
  display: block;
  text-decoration: none;
  border: 1px solid rgba(26,43,58,.10);
  border-radius: 16px;
  padding: 18px 18px 16px;
  background: rgba(255,255,255,.0);
  transition: transform .15s ease, border-color .15s ease;
}

.pe-vod2-stat:hover{
  transform: translateY(-1px);
  border-color: rgba(36,68,90,.22);
}

.pe-vod2-stat__ico{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(36,68,90,.12);
  color: #24445a;
  margin-bottom: 14px;
}

.pe-vod2-stat__val{
  font-size: 28px;
  line-height: 1;
  font-weight: 600;
  margin-bottom: 6px;
  color: #1a2b3a;
}

.pe-vod2-stat__lab{
  font-size: 14px;
  opacity: .75;
  color: #1a2b3a;
}

/* Actions preview */
.pe-vod2-actions{
  margin: 22px 0 18px;
}

.pe-vod2-actions-grid{
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
}

.pe-vod2-card{
  border: 1px solid rgba(26,43,58,.10);
  border-radius: 18px;
  padding: 18px;
  background: rgba(255,255,255,.0);
}

.pe-vod2-card--challenge{
  background: rgba(36,68,90,.10);
  border-color: rgba(36,68,90,.14);
}

.pe-vod2-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 10px;
}

.pe-vod2-card__kicker{
  font-size: 14px;
  opacity: .8;
  color: #1a2b3a;
}

.pe-vod2-card__pill{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(26,43,58,.10);
}

.pe-vod2-card__title{
  font-size: 28px;
  line-height: 1.12;
  margin: 6px 0 14px;
  color: #1a2b3a;
  letter-spacing: -0.02em;
}

.pe-vod2-card__title-sm{
  font-size: 18px;
  margin: 0 0 12px;
  color: #1a2b3a;
}

.pe-vod2-progress{
  margin: 10px 0 14px;
}

.pe-vod2-progress__label{
  font-size: 14px;
  opacity: .8;
  margin-bottom: 8px;
}

.pe-vod2-progress__bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(26,43,58,.10);
  overflow: hidden;
}

.pe-vod2-progress__bar > span{
  display:block;
  height: 100%;
  background: #24445a;
  opacity: .35;
}

.pe-vod2-progress__pct{
  margin-top: 8px;
  font-size: 14px;
  opacity: .8;
}

.pe-vod2-next__label{
  font-size: 14px;
  opacity: .8;
  margin-bottom: 8px;
}

.pe-vod2-next__row{
  display:flex;
  gap: 14px;
  align-items:center;
  justify-content:space-between;
}

.pe-vod2-next__name{
  font-size: 16px;
  color: #1a2b3a;
}

.pe-vod2-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(26,43,58,.14);
  background: rgba(255,255,255,.60);
  text-decoration:none;
  color: #1a2b3a;
  font-weight: 600;
}

.pe-vod2-qa{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 14px;
  text-decoration:none;
  color: #1a2b3a;
  border: 1px solid rgba(26,43,58,.10);
  background: rgba(255,255,255,.35);
  margin-top: 10px;
}

.pe-vod2-qa__ico{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(36,68,90,.12);
  color: #24445a;
}

.pe-vod2-qa__ttl{
  font-size: 15px;
  font-weight: 600;
  display:block;
}

.pe-vod2-qa__sub{
  font-size: 13px;
  opacity: .75;
  display:block;
  margin-top: 2px;
}

.pe-vod2-qa.is-disabled,
.pe-vod2-mini.is-disabled,
.pe-vod2-continue__all.is-disabled{
  opacity: .55;
  pointer-events:none;
}

.pe-vod2-continue{
  margin-top: 16px;
}

.pe-vod2-continue__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 10px;
}

.pe-vod2-continue__title{
  font-size: 18px;
  color: #1a2b3a;
}

.pe-vod2-continue__all{
  text-decoration:none;
  color: #1a2b3a;
  opacity: .75;
}

.pe-vod2-continue__list{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.pe-vod2-mini{
  border: 1px solid rgba(26,43,58,.10);
  border-radius: 16px;
  padding: 14px;
  display:flex;
  gap: 14px;
  align-items:center;
  background: rgba(255,255,255,.0);
}

.pe-vod2-mini__thumb{
  width: 96px;
  height: 56px;
  border-radius: 12px;
  background: rgba(36,68,90,.12);
}

.pe-vod2-mini__ttl{
  font-size: 15px;
  font-weight: 600;
  color: #1a2b3a;
}

.pe-vod2-mini__sub{
  font-size: 13px;
  opacity: .75;
  margin-top: 4px;
}

/* Responsive */
@media (max-width: 1024px){
  .pe-vod2-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe-vod2-actions-grid{ grid-template-columns: 1fr; }
  .pe-vod2-continue__list{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .pe-vod2-title{ font-size: 34px; }
}

.pe-badge--challenge{
  position:absolute;
  top:12px;
  left:12px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  background: rgba(26,43,58,.92);
  color:#fff;
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
}

/* =========================================
   HARD FORCE — Challenges grid must match VOD grid
   (Uncode sometimes overrides display/grid)
   ========================================= */
.pe-page-wrap .pe-vod-grid,
.pe-page-wrap .pe-video-grid{
  width: 100% !important;
  display: grid !important;
  justify-items: stretch !important;
  align-content: start !important;
}

@media (min-width: 1024px){
  .pe-page-wrap .pe-video-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 26px 26px !important;
  }
}

/* =========================================
   Dashboard stats — normalize icon size/color
   ========================================= */

.pe-vod2-stat__ico{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  color: rgb(26, 43, 58) !important;
  opacity: 1 !important;
}

.pe-vod2-stat__ico .iconify{
  width: 22px !important;
  height: 22px !important;
  display:block;
  color: rgb(26, 43, 58) !important;
  opacity: 1 !important;
}

.pe-vod2-stat__ico svg{
  width: 22px !important;
  height: 22px !important;
  display:block;
  color: rgb(26, 43, 58) !important;
  opacity: 1 !important;
}
.pe-menu .iconify{
  width: 18px;
  height: 18px;
  opacity: .7;
  flex: 0 0 auto;
}

/* =========================================
   Account — Subscriptions premium UI
   ========================================= */

/* Hide the original MemberPress table once enhanced */
.pe-is-hidden{ display:none !important; }

/* Wrapper should NOT look like another card */
.pe-subscriptions{
  display: grid;
  gap: 16px;
  margin-top: 6px;
}

/* Single premium block (NO nested card) */
.pe-sub-block{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.pe-sub-block__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.pe-sub-block__title{
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: rgba(17,24,39,.92);
}

.pe-sub-block__body{
  display:grid;
  gap: 10px;
}

/* =========================================
   BADGE "COMPLÉTÉE" (GRID) — rond vert sauge + check
   - même vert que le badge "Séance complétée" (single)
   - même taille visuelle que Nouveau / Challenge
   - position: top-right
   ========================================= */

/* ✅ Mets ici EXACTEMENT les mêmes couleurs que le badge single "Séance complétée" */
:root{
  --pe-sage-bg: #d7e6dc;      /* <- remplace si besoin */
  --pe-sage-border: #bcd3c6;  /* <- remplace si besoin */
  --pe-sage-fg: #2f6b4f;      /* <- remplace si besoin */
}

/* Le badge rond */
.pe-video-thumb .pe-badge--done{
  position: absolute;
  top: 16px;
  right: 16px;
  left: auto !important;

  width: 22px;     /* ✅ même “hauteur” que Nouveau/Challenge */
  height: 22px;    /* ✅ */
  border-radius: 999px;

  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--pe-sage-fg) !important;
  color: var(--pe-sage-fg) !important;

  box-shadow: none !important; /* ✅ zéro shadow */
}

/* Check icon */
.pe-video-thumb .pe-badge--done svg{
  width: 12px;
  height: 12px;
  display: block;
}
.pe-video-thumb .pe-badge--done svg path{
  stroke: var(--pe-sage-border);
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}