/* ==========================================================================
   Page « Cours » Tutor LMS — Le Hameau de l'Étoile
   Tout est préfixé .hm-cours : aucun impact sur le reste du site.
   Les polices et le header/footer viennent du thème.
   ========================================================================== */

.hm-cours {
  --hm-fond: #F6F3EC;
  --hm-vert: #1E4029;
  --hm-prune: #9C2A6B;
  --hm-prune-fonce: #7E2156;
  --hm-or: #E9C46A;
  --hm-texte: #2B3A2E;
  --hm-gris: #7C8B7D;
  --hm-echo: #4B3FE4;
  --hm-echo-2: #C97B69;
  --hm-x: clamp(20px, 4vw, 54px);
  background: var(--hm-fond);
  color: var(--hm-texte);
  overflow-x: hidden;
}
.hm-cours *, .hm-cours *::before, .hm-cours *::after { box-sizing: border-box; }
.hm-cours a { text-decoration: none; box-shadow: none; }
.hm-cours a.hm-btn, .hm-cours button.hm-arrow { text-decoration: none; }
.hm-cours a.hm-btn--prune, .hm-cours a.hm-btn--prune:hover, .hm-cours a.hm-btn--prune:focus { color: #fff; }
.hm-cours a.hm-btn--blanc, .hm-cours a.hm-btn--blanc:hover { color: var(--hm-vert); }
.hm-cours h1, .hm-cours h2, .hm-cours h3 { margin: 0; }
.hm-dot { opacity: .55; }

/* Kadence : on neutralise le cadre « boxed » du contenu autour de la page Cours */
.post-type-archive-courses .content-bg,
.post-type-archive-courses .entry-content-wrap,
.post-type-archive-courses .content-area .site-main > .content-bg,
.tax-course-category .content-bg, .tax-course-tag .content-bg,
.post-type-archive-courses article.entry, .post-type-archive-courses .entry.content-bg {
  background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important;
}
.post-type-archive-courses .content-container, .post-type-archive-courses .site-main { padding-top: 0; }
/* La page Cours de Tutor est une page WordPress : on cible tout cadre Kadence qui contient notre page */
.content-bg:has(.hm-cours), .entry:has(.hm-cours), .entry-content-wrap:has(.hm-cours), article:has(> .hm-cours), .content-wrap:has(.hm-cours) {
  background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important;
}
.content-container:has(.hm-cours) { padding-top: 0; padding-bottom: 0; }

/* ---------- Pastilles & boutons ---------- */
.hm-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.hm-pill--or   { background: var(--hm-or); color: var(--hm-vert); }
.hm-pill--echo { background: rgba(75,63,228,.12); color: var(--hm-echo); }
.hm-pill--prune { background: rgba(156,42,107,.1); color: var(--hm-prune); }

.hm-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; border-radius: 999px; border: 0; cursor: pointer;
  font-weight: 700; font-size: 1rem; line-height: 1; transition: .25s;
}
.hm-btn--prune { background: var(--hm-prune); color: #fff; box-shadow: 0 16px 34px -16px var(--hm-prune); }
.hm-btn--prune:hover { background: var(--hm-prune-fonce); color: #fff; }
.hm-btn--blanc { background: rgba(255,255,255,.9); color: var(--hm-vert); backdrop-filter: blur(8px); }
.hm-btn--blanc:hover { background: #fff; color: var(--hm-vert); }

/* ---------- 1. Hero (carrousel) ---------- */
.hm-hero { position: relative; height: 560px; overflow: hidden; background: #2E5A3B; }
.hm-hero__slide {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .9s ease;
  background: linear-gradient(120deg, #6E9B79, #2E5A3B 55%, #14301F) center / cover no-repeat;
}
.hm-hero__slide.is-active { opacity: 1; pointer-events: auto; }
.hm-hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, var(--hm-fond) 1%, rgba(246,243,236,0) 32%),
    linear-gradient(90deg, rgba(22,46,30,.84) 0%, rgba(22,46,30,.55) 42%, rgba(22,46,30,.05) 78%);
}
.hm-hero__inner { position: absolute; left: var(--hm-x); bottom: 118px; max-width: 680px; padding-right: var(--hm-x); }
.hm-hero .hm-pill { margin-bottom: 4px; }
.hm-hero__title {
  margin-top: 22px; font-size: clamp(2rem, 3.2vw, 2.9rem); font-weight: 800;
  line-height: 1.22; letter-spacing: 0; color: #fff; text-wrap: balance;
  text-shadow: 0 2px 18px rgba(22,46,30,.4);
}
.hm-hero__meta {
  margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 14px;
  font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.9);
}
.hm-hero__meta > .hm-dot:first-child { display: none; }
.hm-hero__resume { margin: 16px 0 0; max-width: 52ch; font-size: 1.02rem; line-height: 1.55; color: rgba(255,255,255,.9); }
.hm-hero__actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.hm-hero__dots { position: absolute; left: var(--hm-x); bottom: 72px; z-index: 5; display: flex; align-items: center; gap: 9px; }
.hm-hero__dot { border: 0; cursor: pointer; padding: 0; height: 8px; width: 8px; border-radius: 999px; background: rgba(255,255,255,.5); transition: .3s; }
.hm-hero__dot.is-active { width: 30px; background: var(--hm-or); }

/* ---------- 2. Filtre Thème ---------- */
.hm-filtres { position: relative; z-index: 2; margin-top: -34px; padding: 0 var(--hm-x); }
.hm-filtres__form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px;
  background: #fff; border: 1px solid rgba(156,42,107,.1); border-radius: 22px;
  padding: 16px clamp(18px, 2.4vw, 26px); box-shadow: 0 22px 48px -32px rgba(156,42,107,.4);
}
.hm-filtre { display: flex; flex-direction: column; gap: 6px; flex: 1 1 150px; min-width: 0; }
.hm-filtre__label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hm-gris); }
.hm-select { position: relative; display: block; }
.hm-select select {
  appearance: none; -webkit-appearance: none; width: 100%;
  font: inherit; font-size: .92rem; font-weight: 600; color: var(--hm-texte);
  background: #FBFAF5; border: 1px solid rgba(156,42,107,.15); border-radius: 12px;
  padding: 11px 34px 11px 13px; cursor: pointer; text-overflow: ellipsis;
}
.hm-select select:focus { outline: 2px solid rgba(156,42,107,.25); outline-offset: 1px; }
.hm-select .hm-chev { position: absolute; right: 16px; top: 50%; margin-top: -7px; pointer-events: none; color: var(--hm-prune); }

/* Chevrons dessinés en CSS (aucun SVG) */
.hm-chev { display: inline-block; width: 9px; height: 9px; border-right: 2.4px solid currentColor; border-bottom: 2.4px solid currentColor; }
.hm-chev--g { transform: rotate(135deg); margin-left: 4px; }
.hm-chev--d { transform: rotate(-45deg); margin-right: 4px; }
.hm-chev--b { transform: rotate(45deg); }
.hm-filtres__reset {
  flex: none; align-self: flex-end; padding: 11px 15px; border-radius: 999px;
  background: #E9EEE4; color: var(--hm-prune); font-size: .84rem; font-weight: 700;
}
.hm-filtres__reset:hover { background: #DFE7DA; color: var(--hm-prune-fonce); }

/* ---------- Sections ---------- */
.hm-sections { padding: 36px var(--hm-x) 56px; display: flex; flex-direction: column; gap: 44px; }

.hm-bloc { position: relative; }
.hm-bloc--vert, .hm-bloc--blanc, .hm-bloc--creme {
  overflow: hidden; border-radius: 26px; padding: clamp(22px, 2.6vw, 32px);
}
.hm-bloc--vert { background: var(--hm-vert); color: #fff; box-shadow: 0 26px 56px -34px rgba(30,64,41,.85); }
.hm-bloc--vert::before {
  content: ""; position: absolute; top: -90px; right: -70px; width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(233,196,106,.28), rgba(233,196,106,0) 70%); pointer-events: none;
}
.hm-bloc--creme .hm-bloc__title { margin-top: 0; }
.hm-bloc--creme { padding: clamp(22px, 2.6vw, 32px); background: #FBFAF6; border: 1px solid rgba(30,64,41,.08); box-shadow: 0 22px 48px -32px rgba(30,64,41,.28); }
.hm-bloc--blanc { background: #fff; border: 1px solid rgba(156,42,107,.1); box-shadow: 0 22px 48px -32px rgba(156,42,107,.3); }

.hm-bloc__head {
  position: relative; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 26px;
}
.hm-bloc__head > div:first-child { flex: 1 1 520px; min-width: 0; }
.hm-bloc__head--simple { margin-bottom: 14px; }
.hm-bloc__title { margin-top: 18px; font-size: clamp(1.4rem, 2.1vw, 1.85rem); font-weight: 800; letter-spacing: 0; line-height: 1.2; color: var(--hm-vert); }
.hm-bloc--vert .hm-bloc__title { color: #fff; }
.hm-bloc--rail .hm-bloc__title { margin-top: 0; font-size: 1.3rem; font-weight: 700; }
.hm-bloc__title--echo { color: var(--hm-echo); }
.hm-bloc__title--echo span { color: var(--hm-echo-2); }
.hm-bloc__sub { margin: 8px 0 0; line-height: 1.5; font-size: .95rem; font-weight: 500; color: var(--hm-gris); max-width: none; }
.hm-bloc--vert .hm-bloc__sub { color: rgba(246,243,236,.72); }
.hm-bloc--rail .hm-bloc__sub { margin-top: 3px; font-size: .84rem; }

.hm-bloc__nav { display: flex; align-items: center; gap: 8px; flex: none; }
.hm-bloc__all { font-size: .9rem; font-weight: 700; color: var(--hm-prune); }
.hm-bloc__all:hover { color: var(--hm-prune-fonce); }
.hm-bloc--vert .hm-bloc__all { color: var(--hm-or); }
.hm-bloc--vert .hm-bloc__all:hover { color: #F0D79A; }
.hm-bloc__all--echo { color: var(--hm-echo); }

.hm-arrow {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(156,42,107,.15); background: #fff; border-radius: 50%; cursor: pointer;
  color: var(--hm-prune); transition: .2s; padding: 0;
}
.hm-arrow:hover { background: #E9EEE4; }
.hm-bloc--vert .hm-arrow { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: #fff; }
.hm-bloc--vert .hm-arrow:hover { background: rgba(255,255,255,.18); }
.hm-arrow--echo { border-color: rgba(75,63,228,.15); color: var(--hm-echo); }
.hm-arrow--echo:hover { background: rgba(75,63,228,.08); }

/* ---------- Rails ---------- */
.hm-rail {
  position: relative; display: flex; gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 6px 2px 10px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.hm-rail::-webkit-scrollbar { display: none; }
.hm-rail--large { gap: 20px; }

/* ---------- Cartes ---------- */
.hm-carte { position: relative; flex: none; width: 336px; scroll-snap-align: start; transition: transform .22s; display: block; }
.hm-carte:hover { transform: translateY(-5px); }
.hm-carte--masterclass { width: 380px; }
.hm-carte--echo { width: 280px; }

.hm-carte__cover {
  position: relative; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10;
  background: linear-gradient(140deg, #A8C4A0, #5A7F62) center / cover no-repeat;
  box-shadow: 0 14px 30px -20px rgba(28,54,36,.5);
}
.hm-carte--programme .hm-carte__cover { aspect-ratio: 16 / 10; }
.hm-carte--masterclass .hm-carte__cover { border-radius: 18px; box-shadow: 0 18px 38px -22px rgba(8,20,12,.9); }
.hm-carte--echo .hm-carte__cover { background-image: linear-gradient(140deg, #DCCFA8, #9C8A5A); }

.hm-tag {
  position: absolute; top: 11px; left: 11px; padding: 5px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.hm-tag--or   { background: var(--hm-or); color: var(--hm-vert); letter-spacing: .06em; }
.hm-tag--doux { background: rgba(255,248,248,.94); color: var(--hm-prune); backdrop-filter: blur(6px); }
.hm-tag--echo { background: rgba(255,248,248,.94); color: var(--hm-echo); backdrop-filter: blur(6px); }

.hm-duree {
  position: absolute; bottom: 11px; right: 11px; padding: 4px 9px; border-radius: 999px;
  background: rgba(24,44,30,.86); backdrop-filter: blur(6px);
  font-size: 10.5px; font-weight: 600; color: #fff;
}
.hm-acces {
  position: absolute; top: 9px; right: 9px; padding: 4px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border: 2px solid #fff; box-shadow: 0 6px 16px -8px rgba(22,46,30,.55);
}
.hm-acces--gratuit { background: var(--hm-fond); color: var(--hm-prune); }
.hm-acces--payant  { background: var(--hm-prune); color: var(--hm-fond); }
.hm-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(22,46,30,.35); }
.hm-progress span { display: block; height: 100%; background: var(--hm-prune); }
.hm-yt {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px; background: rgba(24,44,30,.18); opacity: .95; transition: .2s;
}
.hm-yt::before {
  content: ""; position: absolute; width: 56px; height: 40px; border-radius: 12px;
  background: #E62117; box-shadow: 0 8px 18px -8px rgba(0,0,0,.5); z-index: -1;
}
.hm-yt { z-index: 0; }
.hm-carte--echo:hover .hm-yt { opacity: 1; background: rgba(24,44,30,.3); }

.hm-carte__body { padding: 14px 3px 0; }
.hm-carte__title { font-size: 1rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--hm-texte); }
.hm-carte__title a { color: inherit; }
.hm-carte--masterclass .hm-carte__title { font-size: 1.2rem; font-weight: 800; line-height: 1.25; color: #fff; }
.hm-carte--masterclass .hm-carte__body { padding-top: 12px; }
.hm-carte__meta {
  margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px;
  font-size: .82rem; font-weight: 500; color: var(--hm-gris);
}
.hm-carte--masterclass .hm-carte__meta { margin-top: 7px; font-size: .92rem; font-weight: 600; color: rgba(246,243,236,.7); }
.hm-carte--masterclass .hm-note { color: var(--hm-or); }
.hm-prix s { opacity: .55; margin-right: 4px; }
.hm-carte--masterclass .hm-prix { color: #fff; }
.hm-bloc--creme .hm-carte__cover { box-shadow: 0 16px 34px -20px rgba(30,64,41,.45); }
.hm-bloc--creme .hm-carte { width: 340px; }

/* Ligne titre + bouton liste de souhaits */
.hm-carte__ligne { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hm-carte__ligne .hm-carte__title { flex: 1 1 auto; min-width: 0; }
.hm-wish {
  flex: none; width: 32px; height: 32px; border-radius: 50%; margin-top: -2px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--hm-prune); border: 1px solid rgba(156,42,107,.18);
  box-shadow: 0 6px 14px -10px rgba(22,46,30,.5); transition: .2s; font-size: 15px; line-height: 1;
  text-decoration: none;
}
.hm-wish:hover { background: var(--hm-prune); color: #fff; }
.hm-wish.is-on { background: var(--hm-prune); color: #fff; border-color: var(--hm-prune); }
.hm-wish i { display: block; }
.hm-carte--masterclass .hm-wish { background: rgba(255,255,255,.1); color: var(--hm-or); border-color: rgba(255,255,255,.3); }
.hm-carte--masterclass .hm-wish:hover, .hm-carte--masterclass .hm-wish.is-on { background: var(--hm-or); color: var(--hm-vert); border-color: var(--hm-or); }

/* ---------- Aucun résultat ---------- */
.hm-vide {
  text-align: center; padding: 56px 24px; border: 1px dashed rgba(156,42,107,.15);
  border-radius: 24px; background: #fff;
}
.hm-vide__title { font-size: 1.06rem; font-weight: 700; }
.hm-vide p { margin: 6px auto 16px; font-size: .9rem; color: var(--hm-gris); max-width: 42ch; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .hm-hero { height: 520px; }
  .hm-hero__inner { bottom: 100px; }
  .hm-hero__dots { bottom: 64px; }
  .hm-carte { width: 260px; }
  .hm-carte--masterclass { width: 300px; }
  .hm-carte--echo { width: 240px; }
  .hm-bloc__nav .hm-arrow { display: none; }
  .hm-acces { font-size: 9px; padding: 3px 7px; }
  .hm-filtre { flex: 1 1 100%; }
}