/* ===== MYYA Formation — restyle v3 (premium, mobile-first) ===== */
:root{ --navy:#16233f; --cyan:#29abe2; --cyan-d:#1e8fc0; --ink:#22303f; --muted:#6b7688; --bg:#eef2f7; --card:#fff; --r:18px; }
body{ font-size:16.5px; line-height:1.65; color:var(--ink); background:var(--bg); }
h1{font-size:2rem} h2{font-size:1.55rem} h3{font-size:1.28rem}
img{max-width:100%; height:auto}

/* Boutons */
.dt-sc-button,.dt-sc-button.small,button,input[type=submit]{
  min-height:48px; display:inline-flex; align-items:center; justify-content:center;
  padding:12px 24px !important; border-radius:999px !important; font-weight:700;
  line-height:1.2; text-transform:none !important; letter-spacing:.2px;
}
.dt-sc-button.white,.dt-sc-button.small.white{ background:var(--cyan) !important; color:#fff !important; border:none !important; box-shadow:0 6px 16px rgba(41,171,226,.3); }
.dt-sc-button:hover{ background:var(--cyan-d) !important; color:#fff !important; transform:translateY(-1px); }

/* En-tête + menu */
#header.header1{ box-shadow:0 2px 16px rgba(16,35,63,.09); background:#fff; }
.gsp_logo_sm_wrp img,.normal_logo img{ max-height:66px; width:auto }
.dt-menu-toggle{ min-height:46px; border-radius:12px; background:var(--navy) !important; color:#fff !important; display:inline-flex; align-items:center; gap:8px; padding:0 16px !important; font-weight:700; }

/* Barre de filtres */
.courses-view-type,.courses-sorting,.courses-classwise,.courses-categorywise{ margin-bottom:12px; }
.courses-price-type .course-price{ border-radius:999px !important; padding:10px 22px !important; font-weight:700; border:2px solid #dbe3ee !important; }
.courses-price-type .course-price.active{ background:var(--cyan) !important; color:#fff !important; border-color:var(--cyan) !important; }
.course-layout{ border-radius:10px !important; }
.chosen-single,.select2-selection,.courses-categorywise select,.courses-classwise select,.courses-sorting select{ border-radius:12px !important; min-height:46px !important; }

/* ===== Cartes de cours — premium ===== */
article.dt-sc-custom-course-type{
  position:relative; background:var(--card); border-radius:var(--r); overflow:hidden;
  box-shadow:0 6px 22px rgba(16,35,63,.10); margin-bottom:28px;
  transition:transform .18s ease, box-shadow .18s ease;
}
article.dt-sc-custom-course-type:hover{ transform:translateY(-5px); box-shadow:0 18px 40px rgba(16,35,63,.18); }
.dt-sc-course-thumb{ position:relative; overflow:hidden; line-height:0; }
.dt-sc-course-thumb img{ width:100%; height:210px; object-fit:cover; display:block; transition:transform .4s ease; }
article.dt-sc-custom-course-type:hover .dt-sc-course-thumb img{ transform:scale(1.06); }
.dt-sc-course-thumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,35,63,.30),rgba(16,35,63,0) 40%); pointer-events:none; }

/* prix : badge flottant haut-droite */
.dt-sc-course-price{ position:absolute !important; top:12px; right:12px; z-index:3; margin:0 !important; background:var(--navy); border-radius:999px; padding:6px 14px !important; font-weight:800; font-size:.95rem; line-height:1.2; box-shadow:0 4px 12px rgba(16,35,63,.3); }
.dt-sc-course-price *{ color:#fff !important; background:transparent !important; }

/* badge de niveau (ajouté par JS) haut-gauche */
.myya-level-badge{ position:absolute; top:12px; left:12px; z-index:3; color:#fff; font-weight:800; font-size:.85rem; letter-spacing:.5px; padding:6px 13px; border-radius:999px; box-shadow:0 4px 12px rgba(0,0,0,.22); }

/* détails */
.dt-sc-course-details{ padding:16px 18px 20px !important; }
.dt-sc-course-details h5{ margin:0 0 10px !important; }
.dt-sc-course-details h5 a, .dt-sc-course-details h5 a font{ color:var(--navy) !important; font-weight:800 !important; font-size:1.16rem !important; line-height:1.32 !important; }
.dt-sc-course-details h5 a:hover, .dt-sc-course-details h5 a:hover font{ color:var(--cyan-d) !important; }
.dt-sc-course-meta{ display:inline-flex !important; align-items:center; gap:7px; background:#eaf5fc; border:none !important; padding:7px 14px !important; border-radius:999px; font-weight:700; font-size:.9rem; margin:0 !important; }
.dt-sc-course-meta *{ color:var(--cyan-d) !important; margin:0 !important; }
.dt-sc-course-meta::before{ content:"\f02d"; font-family:FontAwesome; font-weight:400; }
.dt-sc-course-data{ display:none !important; }

/* CTA overlay : visible au survol (desktop) / toujours (tactile) */
.dt-sc-course-overlay{ opacity:1 !important; visibility:visible !important; background:transparent !important; }
.dt-sc-course-overlay a.dt-sc-button{ opacity:0; transition:opacity .2s; }
article.dt-sc-custom-course-type:hover .dt-sc-course-overlay a.dt-sc-button{ opacity:1; }
@media (hover:none){ .dt-sc-course-overlay{ position:static !important; padding:0 18px 16px !important; } .dt-sc-course-overlay a.dt-sc-button{ opacity:1 !important; width:100%; } }

[id*="gspeech"],[class*="gspeech"]{ z-index:50 }
.container{ padding-left:16px; padding-right:16px }

/* Mobile-first */
@media (max-width:767px){
  body{ font-size:17px }
  h1{font-size:1.65rem} h2{font-size:1.35rem}
  .column.dt-sc-one-half,.column.dt-sc-one-third,.column.dt-sc-one-fourth,.dt-sc-one-half,.dt-sc-one-third,.dt-sc-one-fourth{ width:100% !important; margin-left:0 !important; float:none !important; }
  .dt-sc-course-thumb img{ height:200px; }
  .courses-categorywise,.courses-classwise,.courses-sorting{ width:100% !important; float:none !important; }
  #main-menu li a,.menu li a{ padding:15px 16px !important; font-size:1.05rem; }
}

/* fix: badges shrink to content (price was stretching full-width) */
.dt-sc-course-price{ left:auto !important; right:12px !important; width:auto !important; max-width:max-content !important; display:inline-flex !important; align-items:center; white-space:nowrap; }
.dt-sc-course-price .amount{ display:inline-flex !important; width:auto !important; }
.dt-sc-course-meta{ width:auto !important; max-width:max-content !important; float:none !important; }

/* price: reliable inline navy pill above title (drop fragile absolute positioning) */
.dt-sc-course-price{ position:static !important; top:auto !important; right:auto !important; left:auto !important; display:inline-flex !important; align-items:center; width:auto !important; max-width:max-content !important; margin:0 0 10px !important; background:var(--navy) !important; padding:5px 15px !important; border-radius:999px !important; font-weight:800; font-size:.95rem; box-shadow:0 3px 10px rgba(16,35,63,.25); }
.dt-sc-course-price *{ color:#fff !important; background:transparent !important; }

/* ===== Course-detail : leçons en cartes cliquables ===== */
.dt-sc-lessons-list{ list-style:none !important; margin:0 !important; padding:0 !important; }
.dt-sc-lessons-list > li{
  position:relative !important; background:#fff !important; border-radius:14px !important;
  margin:0 0 12px 0 !important; padding:14px 46px 14px 16px !important;
  box-shadow:0 2px 10px rgba(16,35,63,.07) !important; border:none !important;
  transition:transform .12s ease, box-shadow .12s ease;
}
.dt-sc-lessons-list > li:hover{ transform:translateX(4px); box-shadow:0 8px 22px rgba(16,35,63,.14) !important; }
.dt-sc-lessons-list > li a, .dt-sc-lessons-list > li a font{ color:var(--navy) !important; font-weight:600 !important; font-size:1.02rem !important; }
.dt-sc-lessons-list > li:hover a, .dt-sc-lessons-list > li:hover a font{ color:var(--cyan-d) !important; }
.dt-sc-lessons-list > li::after{ content:"\f105"; font-family:FontAwesome; position:absolute; right:18px; top:50%; transform:translateY(-50%); color:var(--cyan); font-size:1.25rem; }
/* course-detail header polish */
article.dt-sc-course-single{ background:transparent !important; }

/* fix: lessons full-width + clear the number circle (li was float:left/narrow) */
.dt-lesson-wrapper,.dt-lesson-inner-wrapper{ width:100% !important; float:none !important; }
.dt-sc-lessons-list{ width:100% !important; float:none !important; display:block !important; }
.dt-sc-lessons-list > li{ float:none !important; width:100% !important; display:block !important; padding:16px 46px 16px 72px !important; }
.dt-sc-lessons-list > li article,.dt-sc-lessons-list > li .dt_lessons{ width:auto !important; float:none !important; }

/* ===== Homepage : feature cards + hero CTA ===== */
body.home .dt-sc-one-fourth{
  background:#fff !important; border-radius:16px !important; padding:30px 18px 26px !important; margin-bottom:22px !important;
  box-shadow:0 6px 20px rgba(16,35,63,.09) !important; text-align:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
body.home .dt-sc-one-fourth:hover{ transform:translateY(-6px); box-shadow:0 16px 34px rgba(16,35,63,.16) !important; }
.myya-hero-cta{
  position:absolute; left:50%; bottom:9%; transform:translateX(-50%); z-index:6;
  background:var(--cyan); color:#fff !important; font-weight:800; font-size:1.12rem; letter-spacing:.3px;
  padding:16px 36px; border-radius:999px; text-decoration:none !important; box-shadow:0 12px 30px rgba(41,171,226,.5);
  transition:transform .15s ease, background .15s ease;
}
.myya-hero-cta:hover{ background:var(--cyan-d); transform:translateX(-50%) translateY(-2px); color:#fff !important; }

/* ===== Hero block (home) ===== */
.myya-hero{ position:absolute; left:0; right:0; bottom:0; z-index:6; padding:40px 6% 46px; background:linear-gradient(0deg,rgba(16,35,63,.82),rgba(16,35,63,.30) 55%,rgba(16,35,63,0)); }
.myya-hero-title{ color:#fff !important; font-size:2.4rem; font-weight:800; line-height:1.15; margin:0 0 10px !important; text-shadow:0 2px 14px rgba(0,0,0,.4); max-width:640px; }
.myya-hero-sub{ color:#e8f1fb !important; font-size:1.18rem; margin:0 0 20px !important; text-shadow:0 1px 8px rgba(0,0,0,.35); max-width:560px; }
.myya-hero .myya-hero-cta{ position:static !important; transform:none !important; display:inline-flex; align-items:center; background:var(--cyan); color:#fff !important; font-weight:800; font-size:1.12rem; padding:15px 36px; border-radius:999px; text-decoration:none !important; box-shadow:0 12px 30px rgba(41,171,226,.5); transition:transform .15s,background .15s; }
.myya-hero .myya-hero-cta:hover{ background:var(--cyan-d); transform:translateY(-2px); color:#fff !important; }

/* ===== Forms (login / contact / checkout) ===== */
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=search],input[type=number],textarea,select{
  border-radius:10px !important; min-height:46px; padding:10px 14px !important; border:1.5px solid #d8e0ec !important; font-size:1rem; background:#fff;
}
input:focus,textarea:focus,select:focus{ border-color:var(--cyan) !important; outline:none; box-shadow:0 0 0 3px rgba(41,171,226,.16) !important; }

/* ===== Header + menu polish ===== */
#header.header1{ position:relative; z-index:100; }
#main-menu .menu > li > a, #nav .menu > li > a{ font-weight:600; }
#main-menu .menu > li > a:hover, .menu li.current-menu-item > a{ color:var(--cyan-d) !important; }

/* ===== Footer polish ===== */
.footer-copyright, #footer .copyright, .dt-sc-copyright-container{ font-size:.92rem; }
#footer a:hover, .footer a:hover{ color:var(--cyan) !important; }

/* smooth everything a touch */
a, .dt-sc-button, article.dt-sc-custom-course-type, .dt-sc-lessons-list > li, body.home .dt-sc-one-fourth{ -webkit-tap-highlight-color:transparent; }

/* ===== Mobile hero ===== */
@media (max-width:767px){
  .myya-hero{ padding:26px 6% 32px; }
  .myya-hero-title{ font-size:1.7rem; }
  .myya-hero-sub{ font-size:1.02rem; }
}

/* ===== BBB live-class button ===== */
.myya-bbb-live{ display:flex; align-items:center; justify-content:center; gap:10px; margin:0 0 22px; padding:16px 22px; background:linear-gradient(135deg,#e5484d,#c0392b); color:#fff !important; font-weight:800; font-size:1.15rem; border-radius:14px; text-decoration:none !important; box-shadow:0 10px 26px rgba(197,57,43,.35); transition:transform .15s; }
.myya-bbb-live::before{ content:"\f03d"; font-family:FontAwesome; }
.myya-bbb-live:hover{ transform:translateY(-2px); color:#fff !important; }

/* ===== BBB recordings (séances enregistrées) ===== */
.myya-rec{ margin:0 0 24px; }
.myya-rec-title{ color:var(--navy) !important; font-size:1.2rem; font-weight:800; margin:0 0 12px !important; }
.myya-rec-list{ display:flex; flex-direction:column; gap:10px; }
.myya-rec-item{ display:flex; align-items:center; gap:12px; background:#fff; border-radius:12px; padding:12px 16px; box-shadow:0 2px 10px rgba(16,35,63,.07); text-decoration:none !important; transition:transform .12s, box-shadow .12s; }
.myya-rec-item:hover{ transform:translateX(4px); box-shadow:0 8px 22px rgba(16,35,63,.14); }
.myya-rec-play{ width:34px; height:34px; flex:0 0 34px; border-radius:50%; background:var(--cyan); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.8rem; }
.myya-rec-name{ flex:1; color:var(--navy) !important; font-weight:600; }
.myya-rec-date{ color:var(--muted) !important; font-size:.9rem; }

/* ===== Member dashboard (Bienvenue / Mes cours) ===== */
.dt-sc-user-details{ background:#fff !important; border-radius:16px !important; box-shadow:0 4px 18px rgba(16,35,63,.08) !important; padding:22px 16px !important; text-align:center; margin-bottom:16px; }
.dt-sc-username, .dt-sc-user-details h3, .dt-sc-user-details h4{ color:var(--navy) !important; font-weight:800 !important; }
.dt-sc-dashboard-menus{ list-style:none !important; margin:14px 0 0 !important; padding:0 !important; }
.dt-sc-dashboard-menus li{ margin:0 0 8px !important; border:none !important; }
.dt-sc-dashboard-menus li a{ display:flex !important; align-items:center; gap:10px; padding:13px 16px !important; border-radius:10px !important; color:var(--ink) !important; font-weight:600 !important; background:#f3f6fb !important; }
.dt-sc-dashboard-menus li.active a, .dt-sc-dashboard-menus li a:hover, .dt-sc-dashboard-menus li.current a{ background:var(--cyan) !important; color:#fff !important; }
.dt-sc-dashboard-menus li a i, .dt-sc-dashboard-menus li.active a i{ color:inherit !important; }
/* dashboard course cards (list view) inherit base card style; tidy spacing */
article.dt-sc-custom-course-type.course-list-view{ margin-bottom:20px !important; padding:6px !important; }
.dt-sc-dashboard-course-details-container{ padding:6px 14px !important; }
/* "Résultats" toggle */
.dt-sc-toggle-frame{ margin-top:10px; }
.dt-sc-toggle{ background:#f3f6fb !important; border-radius:10px !important; padding:12px 16px !important; color:var(--navy) !important; font-weight:700 !important; border:none !important; }
.dt-sc-toggle.active, .dt-sc-toggle:hover{ background:#e7f3fb !important; }
.dt-sc-toggle-content{ border:1px solid #eef2f7 !important; border-radius:0 0 10px 10px !important; }
.dt-sc-lesson-name, .dt-sc-grade-percent{ color:var(--ink) !important; }

/* ===== Header hamburger menu — open-dropdown fix (theme left it display:none when open) ===== */
.dt-menu-toggle{ cursor:pointer; }
ul.menu.menu-toggle-open{
  display:block !important; position:absolute !important; right:22px !important; top:74px !important;
  background:#fff !important; box-shadow:0 16px 38px rgba(16,35,63,.20) !important;
  border-radius:14px !important; padding:8px !important; min-width:240px !important;
  z-index:99999 !important; border:1px solid #e7eef6 !important; max-height:none !important;
}
ul.menu.menu-toggle-open > li{ display:block !important; float:none !important; width:100% !important; margin:0 !important; }
ul.menu.menu-toggle-open > li > a{ display:block !important; padding:13px 18px !important; border-radius:10px !important; color:var(--navy) !important; font-weight:700 !important; font-size:1.05rem !important; }
ul.menu.menu-toggle-open > li > a:hover{ background:#eef6fc !important; color:var(--cyan-d) !important; }
@media (max-width:782px){
  ul.menu.menu-toggle-open{ right:12px !important; left:12px !important; min-width:0 !important; top:66px !important; }
}

/* ============================================================
   APP (AppMySite webview) render fixes — 2 Sep
   ============================================================ */

/* 1) "Voir le cours" was rendering MIRRORED on some cards (stuck flip/entrance
      animation in the app webview). Kill card animations + any transform/RTL leak. */
.dt-sc-custom-course-type,
.dt-sc-custom-course-type *,
article.dt-sc-custom-course-type * {
  animation: none !important;
  -webkit-animation: none !important;
}
.dt-sc-custom-course-type .dt-sc-course-thumb,
.dt-sc-custom-course-type .dt-sc-course-overlay,
.dt-sc-custom-course-type .dt-sc-course-overlay a,
.dt-sc-custom-course-type .dt-sc-course-overlay a font {
  transform: none !important;
  -webkit-transform: none !important;
  perspective: none !important;
  transform-style: flat !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  direction: ltr !important;
  unicode-bidi: normal !important;
  writing-mode: horizontal-tb !important;
}

/* 2) Hide per-course prices (membership model — client asked why €50 shows). */
.dt-sc-course-price,
.dt-sc-custom-course-type .dt-sc-course-price { display: none !important; }

/* 3) Course TITLES were cut off ("… Niveau" clipped). Let them wrap fully. */
.dt-sc-custom-course-type .dt-sc-course-details,
.dt-sc-custom-course-type .dt-sc-course-caption,
.dt-sc-custom-course-type .dt-sc-course-details h5,
.dt-sc-custom-course-type .dt-sc-course-details h5 a,
.dt-sc-custom-course-type .dt-sc-course-details h5 a font {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  max-height: none !important;
  height: auto !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  hyphens: auto !important;
}