/* Page "Catégorie de pratique" (Pratiques dynamiques / Pratiques douces) — rangée 1 : hero */

/* Titre + fil d'ariane du thème déjà repris dans [categorie_hero] : on masque le bandeau natif
   (même technique que sur la page discipline, cf. single-cours-yoga.css) */
body.tax-categorie_pratique .page-title.content-left.disabled-bg.page-title-responsive-enabled {
  display: none !important;
}

.yp-categorie-hero {
  margin: 0 0 40px;
}

/* Placeholders gris de la grille mobile v2 : n'existent que sur mobile (voir
   override dans le bloc @media tout en fin de fichier - doit rester APRES
   celui-ci pour gagner la cascade a specificite egale, cf. les autres notes
   "grille mobile v2" dans ce fichier). */
.yp-categorie-mobile-placeholder,
.yp-categorie-mobile-banner-btn,
.yp-categorie-mobile-media-row,
.yp-categorie-mobile-fiche-row {
  display: none;
}

.yp-categorie-hero__layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  border-radius: 28px;
  overflow: hidden;
  min-height: 460px;
}

.yp-categorie-hero__left {
  background: #e6e8e1;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}

.yp-categorie-hero__title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 3vw, 3.2rem);
  line-height: 1.1;
  color: var(--yp-cat-color, #663050);
  margin: 0 0 16px;
}

.yp-categorie-hero .yp-categorie-hero__breadcrumbs-list,
.yp-categorie-hero .yp-categorie-hero__breadcrumbs-list li {
  list-style: none;
  padding-inline-start: 0;
}

.yp-categorie-hero__breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  text-align: left;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b6f63;
}

.yp-categorie-hero__breadcrumbs-list li + li::before {
  content: '/';
  margin-right: 6px;
  color: #a9ad9f;
}

.yp-categorie-hero__breadcrumbs-list a {
  color: inherit;
  text-decoration: none;
}

.yp-categorie-hero__breadcrumbs-list a:hover {
  text-decoration: underline;
}

.yp-categorie-hero__texte {
  font-size: 1rem;
  line-height: 1.6;
  color: #4c4f45;
  max-width: none;
  width: 100%;
  margin: 0;
}

.yp-categorie-hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 0 28px;
  gap: 24px;
}

.yp-categorie-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.yp-categorie-hero__stat-badge {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yp-categorie-hero__stat-icon {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  display: inline-block;
}

.yp-categorie-hero__stat-icon--pin {
  color: var(--yp-cat-color, #663050);
}

.yp-categorie-hero__stat-icon--disciplines {
  background-color: var(--yp-cat-color, #663050);
  -webkit-mask-image: url("https://yogaetpresence.com/wp-content/uploads/2026/04/planning.svg");
  mask-image: url("https://yogaetpresence.com/wp-content/uploads/2026/04/planning.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.yp-categorie-hero__stat-number {
  position: relative;
  z-index: 1;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--yp-cat-color, #663050);
  line-height: 1;
}

.yp-categorie-hero__stat-label {
  font-size: 0.85rem;
  color: var(--yp-cat-color, #663050);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3;
}

.yp-categorie-hero__right {
  position: relative;
  background: #ffffff;
  min-height: 320px;
}

.yp-categorie-slider {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
}

.yp-categorie-slider__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.yp-categorie-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.yp-categorie-slider__slide.is-active {
  opacity: 1;
}

.yp-categorie-slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.yp-categorie-slider__dots {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}

.yp-categorie-slider__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.55);
  padding: 0;
  cursor: pointer;
}

.yp-categorie-slider__dot.is-active {
  background: #ffffff;
}

/* Carrousel horizontal : une discipline a la fois (carte | prochain cours | pile de cours) */

.yp-categorie-carousel-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px;
  margin: 60px 0;
  padding: 48px 0;
  /* Essai : flou au chargement, leve des que la section entre dans le
     viewport (ou est deja la cible d'un ancrage au chargement) - voir
     IntersectionObserver dans initCategorieDisciplinesCarousel(). */
  filter: blur(14px);
  transition: filter 0.6s ease;
}

.yp-categorie-carousel-wrap.is-revealed {
  filter: blur(0);
}

.yp-categorie-carousel-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background-color: #eae7e2;
}

.yp-categorie-carousel {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  width: 100%;
  /* 16px de base en bas : laisse respirer le debord normal des ombres des
     3 colonnes (~9px), sinon ce overflow:hidden les coupe a plat. Le JS
     augmente encore ce padding-bottom quand une tuile video/infographie
     s'agrandit. */
  padding: 64px 0 16px;
  transition: padding-bottom 0.4s ease;
}

.yp-categorie-carousel__track {
  display: flex;
  width: 100%;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  /* Indique au navigateur de preparer une couche compositee des le depart
     plutot qu'au premier changement de transform (evite un a-coup au tout
     debut du swipe sur les appareils moins puissants). */
  will-change: transform;
}

.yp-categorie-carousel__track.is-dragging {
  transition: none;
}

.yp-categorie-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.yp-categorie-row {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  align-items: stretch;
  /* 72px : laisse la place au debord du "carambolage" (translateX + leger
     rotate sur les colonnes, cf. plus bas) sans que le carrousel (overflow:
     hidden, necessaire au slide) ne les coupe. */
  padding: 0 72px;
}

/* Hauteur témoin = colonne du milieu (prochain cours, 552px fixé par prochain-cours.css) */
.yp-categorie-row__col {
  height: 552px;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: -6px 6px 5px -2px rgba(0, 0, 0, 0.21);
  transform: translateX(0) rotate(0deg);
  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Effet "carambolage" a la sortie (bascule) : la carte 1 part vite (delai court,
   transition courte), la 2 suit un peu moins vite, la 3 encore moins vite
   (delai + duree croissants) - comme un choc en chaine, avec le rebond de
   l'easing herite de la regle de base ci-dessus. */
.yp-categorie-carousel__track.is-sliding-left .yp-categorie-row__col:nth-child(1),
.yp-categorie-carousel__track.is-sliding-right .yp-categorie-row__col:nth-child(1) {
  transition-delay: 0s;
  transition-duration: 0.26s;
}

.yp-categorie-carousel__track.is-sliding-left .yp-categorie-row__col:nth-child(2),
.yp-categorie-carousel__track.is-sliding-right .yp-categorie-row__col:nth-child(2) {
  transition-delay: 0.14s;
  transition-duration: 0.5s;
}

.yp-categorie-carousel__track.is-sliding-left .yp-categorie-row__col:nth-child(3),
.yp-categorie-carousel__track.is-sliding-right .yp-categorie-row__col:nth-child(3) {
  transition-delay: 0.28s;
  transition-duration: 0.78s;
}

/* Redressement (retour a la verticale, quand la classe is-sliding-* est retiree) :
   chute brute et rapide, sans rebond - comme une pierre qui tombe et cogne le
   sol au lieu de la sortie souple/rebondissante ci-dessus. Meme ordre 1-2-3
   (stagger reduit) mais acceleration nette (easeIn) et duree bien plus courte. */
.yp-categorie-carousel__track:not(.is-sliding-left):not(.is-sliding-right) .yp-categorie-row__col:nth-child(1) {
  transition: transform 0.16s cubic-bezier(0.55, 0.06, 0.68, 0.19) 0s;
}

.yp-categorie-carousel__track:not(.is-sliding-left):not(.is-sliding-right) .yp-categorie-row__col:nth-child(2) {
  transition: transform 0.2s cubic-bezier(0.55, 0.06, 0.68, 0.19) 0.04s;
}

.yp-categorie-carousel__track:not(.is-sliding-left):not(.is-sliding-right) .yp-categorie-row__col:nth-child(3) {
  transition: transform 0.24s cubic-bezier(0.55, 0.06, 0.68, 0.19) 0.08s;
}

/* Rebond horizontal (l'easing bounce du parent depasse legerement la cible avant
   de se stabiliser) : amplitude croissante de la 1ere a la 3eme carte, pour
   accentuer la sensation de choc qui se propage. Rotation volontairement
   faible : sur une colonne aussi haute (552px) qu'etroite, chaque degre de
   rotation deborde beaucoup plus horizontalement qu'un translateX equivalent
   (le coin swingue de hauteur/2 * sin(angle) - un simple 12deg debordait deja
   de ~57px, largement au-dela de la marge disponible). */
.yp-categorie-carousel__track.is-sliding-left .yp-categorie-row__col:nth-child(1) {
  transform: translateX(-14px) rotate(-1deg);
}

.yp-categorie-carousel__track.is-sliding-left .yp-categorie-row__col:nth-child(2) {
  transform: translateX(-26px) rotate(-2deg);
}

.yp-categorie-carousel__track.is-sliding-left .yp-categorie-row__col:nth-child(3) {
  transform: translateX(-40px) rotate(-3deg);
}

.yp-categorie-carousel__track.is-sliding-right .yp-categorie-row__col:nth-child(1) {
  transform: translateX(14px) rotate(1deg);
}

.yp-categorie-carousel__track.is-sliding-right .yp-categorie-row__col:nth-child(2) {
  transform: translateX(26px) rotate(2deg);
}

.yp-categorie-carousel__track.is-sliding-right .yp-categorie-row__col:nth-child(3) {
  transform: translateX(40px) rotate(3deg);
}

.yp-categorie-row__col--pile {
  overflow: hidden;
  background: #ffffff;
}

/* Le bouton "Voir les cours suivants" est concu pour une colonne pleine
   largeur (chevauchement via margin-top negatif + min-width fixe) : dans
   cette colonne plus etroite et plus courte (limit=3), ca le desalignait
   du pied de la pile. On le recale proprement ici, colle au pied de la
   colonne via flexbox (le contenu, avec seulement 3 cours, ne remplit pas
   toujours les 552px : le vide se retrouve au-dessus du bouton, pas en
   dessous). */
.yp-categorie-row__col--pile #yp-pile-cours-dynamic {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.yp-categorie-row__col--pile #yp-pile-cours-dynamic .btn-cours-suivants {
  margin: auto 0 0;
  min-width: 0;
  width: 100%;
  max-width: none;
  border-radius: 0;
}

.yp-categorie-row__col--prochain,
.yp-categorie-row__col--prochain .yp-prochain-cours-dynamic {
  height: 100%;
}

@media (max-width: 900px) {
  /* Safari iOS gonfle automatiquement la taille du texte au-dela de ce que
     dit le CSS ("text auto-sizing") - invisible sur un simulateur desktop,
     mais casse le calage precis des tuiles (video/infographie) et meme la
     taille des dots (dont le nom de discipline, cache via text-indent,
     pousse quand meme la taille de son conteneur) sur un vrai iPhone. On le
     desactive pour toute cette section. */
  body.tax-categorie_pratique {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Scroll de page verrouille : seuls le header/burger du theme restent
     "actifs", le carrousel occupe le reste sans scroll (voir
     [[feedback-scroll-swipe-conflict]]). --yp-header-height est mesuree et
     posee par le JS (hauteur reelle de tout ce qui est au-dessus du
     carrousel), pas une valeur fixe devinee. overscroll-behavior:none evite
     le rebond iOS meme si overflow:hidden. */
  body.tax-categorie_pratique {
    overflow: hidden;
    overscroll-behavior: none;
    height: 100dvh;
  }

  /* Header auto-masquant : passe en position fixed (flotte au-dessus du
     carrousel plutot que de le pousser) pour pouvoir se cacher/reapparaitre
     sans decaler le reste. .yp-header-hidden est ajoutee/retiree par le JS
     (masque au chargement, reapparait sur un tire-vers-le-bas, se recache
     apres 2s d'inactivite - voir initCategorieDisciplinesCarousel()). */
  body.tax-categorie_pratique .masthead {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    transition: transform 0.35s ease;
  }

  body.tax-categorie_pratique .masthead.yp-header-hidden {
    transform: translateY(-100%);
  }

  .yp-categorie-carousel-wrap {
    gap: 10px;
    margin: 0;
    padding: 0;
    /* Le carrousel remonte tout en haut (plus de padding-top reservant la
       place du header) : le header est fixed/flottant par-dessus (voir
       ci-dessus) et se cache la plupart du temps, ca ne vaut pas le coup de
       laisser un vide permanent pour un chevauchement bref et occasionnel
       (au chargement, ou tire-vers-le-bas). */
    height: 100dvh;
    box-sizing: border-box;
    /* Full-bleed : le conteneur de contenu du theme a une marge laterale
       (visible sur toutes les captures - confirme par l'utilisateur "ces
       marges sont sur tout le site"), qui grignotait la place du titre de
       la fiche et masquait le bord des cartes voisines pendant le swipe.
       On sort le carrousel de ce conteneur pour qu'il occupe toute la
       largeur de l'ecran, quelle que soit la marge/le padding herite du
       theme sur cette page. */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* Nouvelle grille mobile (v2, en construction step by step) : carte plein
     ecran (100dvh) par discipline, calquee sur la maquette (cadre reference
     1080x1920, gouttiere 20px). 5 rangees proportionnelles aux hauteurs de
     la maquette - les valeurs brutes (617/114/482/411/176) sont utilisees
     directement comme ratios "fr", pas besoin de les simplifier :
     1. 617 - en-tete (titre + 4 lignes d'infos) - FAIT.
     2. 114 - bandeau "Decouvrez la discipline" - a venir.
     3. 482 - video + infographie cote a cote - a venir.
     4. 411 (270 fiche prochain cours + 141 bouton voir tous les cours,
        empiles dans une meme carte sur la maquette) - a venir.
     5. 176 - points de navigation (dots) - a venir.
     Tant que les rangees 2 a 5 ne sont pas remplies, elles restent vides
     (juste la bonne hauteur reservee) - pas de contenu place dedans encore. */
  /* Les dots (rangee 5, 26px - de simples petits points, pas besoin des
     176px prevus a l'origine pour les pastilles textuelles desktop) vivent
     maintenant EN DEHORS de cette grille (voir .yp-categorie-nav plus bas) :
     ce sont des points de navigation partages par toutes les disciplines
     (ils ne doivent pas slider avec chaque carte), donc ils restent au
     niveau du wrap plutot que d'etre un enfant de grille par-slide. La
     ligne ne reserve donc plus que les 4 premiers tiers, et sa hauteur
     totale est reduite d'autant (26px de dots + 20px de gap avec le wrap)
     pour que l'ensemble tienne dans 100dvh. */
  .yp-categorie-row {
    grid-template-columns: 1fr;
    /* minmax(0, Nfr) plutot que juste "Nfr" : sans le minmax, une rangee dont
       le contenu est plus haut que sa part proportionnelle grandit quand
       meme (fr ne force pas un plafond, seulement un partage de l'espace
       restant) - ca cassait les proportions (l'en-tete debordait de son
       1/3). minmax(0, ...) force chaque rangee a vraiment respecter sa part.
       Rangee 2 (video+infographie) en "auto" plutot qu'un fr fixe : leur
       hauteur est deja imposee par leur propre aspect-ratio (551/482), donc
       plus courte que la part fixe qu'on pourrait leur donner - un fr fixe
       laissait un vide sous les tuiles avant la rangee suivante. "auto" cale
       la rangee exactement sur cette hauteur reelle et redonne l'espace
       libere aux rangees fr (rangee 3, fiche prochain cours, en beneficie
       directement).
       3 rangees au lieu de 4 : le bouton "Decouvrez cette discipline" est
       maintenant integre en bas de l'en-tete (voir yp_render_categorie_
       discipline_card()) au lieu d'occuper sa propre rangee.
       Rangee 1 (en-tete) REVENUE en fr proportionnel (640fr, teste "auto"
       entre-temps mais ca casse les proportions d'un iPhone a l'autre - cf.
       [[feedback ecran iPhone 17 Pro vs 16]] : sur un ecran plus haut, la
       rangee fiche (auparavant 1fr = tout le reste) grandissait toute seule
       et laissait un grand vide sous sa carte, pendant que l'en-tete restait
       colle en haut. Priorite demandee par l'utilisateur : garder les MEMES
       proportions de tuiles sur tous les ecrans, et absorber la difference
       de hauteur en padding interne (le contenu de l'en-tete est centre,
       voir .yp-categorie-card__front plus bas) plutot qu'en vide entre les
       tuiles. Rangee 3 (fiche) gardee en fr (502fr) pour la meme raison -
       plus de 1fr qui aspire tout l'espace restant. */
    grid-template-rows: minmax(0, 640fr) auto minmax(0, 502fr);
    gap: 10px;
    /* Plus de --yp-header-height a retrancher : le carrousel remonte tout en
       haut du wrap maintenant (voir .yp-categorie-carousel-wrap plus haut).
       Le -16px compense le padding-bottom de .yp-categorie-carousel (garde
       pour le debord video/infographie), sinon le total debordait de 16px
       au-dela de la hauteur du wrap. Le -10px (au lieu de 20px) suit le gap
       reduit de .yp-categorie-carousel-wrap ci-dessus - garder ces deux
       valeurs synchronisees. Le -23px (etait 26px) suit la hauteur reduite
       de .yp-categorie-nav (dots) plus bas - les 3px liberes sont
       transferes ici en padding-top (voir plus bas), le total reste
       equilibre a 100dvh. */
    height: calc(100dvh - 23px - 10px - 16px);
    /* 5px de gouttiere gauche/droite - sur la rangee (par slide), pas sur
       .yp-categorie-carousel-wrap : ca garde le slide lui-meme plein-largeur
       (pas de marge qui masquerait le bord des cartes voisines pendant le
       swipe, cf. le fix precedent), seul le contenu a l'interieur respire un
       peu. box-sizing:border-box (regle desktop plus haut) evite que ce
       padding ne fasse deborder la largeur/hauteur. 14px (etait 8px) au-
       dessus de l'en-tete (rangee 1) : le haut du carrousel restait masque.
       Pris sur le budget propre de la rangee (height: calc() plus haut
       inchangee, pas touche aux dots cette fois - contrairement au 8px
       precedent) : l'espace en plus est simplement retranche du contenu
       (en-tete/fiche, en fr proportionnel), pas ajoute au total. */
    padding: 14px 5px 0;
  }

  .yp-categorie-row__col {
    height: 100%;
    max-height: none;
  }

  .yp-categorie-row__col--carte {
    grid-row: 1;
  }

  .yp-categorie-row__col--prochain {
    grid-row: 4;
  }

  .yp-categorie-row__col--pile {
    grid-row: 4;
  }

  .yp-categorie-card__stage,
  .yp-categorie-card,
  .yp-categorie-card__front {
    height: 100%;
    max-height: none;
  }

  /* En-tete (1er tiers) : titre + 4 lignes d'infos + bouton. La rangee est
     de nouveau en fr proportionnel (voir grid-template-rows plus haut), donc
     sa hauteur reelle varie legerement d'un iPhone a l'autre - center le
     groupe (bloc titre/infos + bouton, gap:5px entre les deux) plutot que de
     le coller en haut : l'ecart eventuel se repartit alors en padding
     symetrique au-dessus et en dessous, invisible/discret, au lieu de
     laisser un vide net d'un seul cote. */
  .yp-categorie-card__front {
    justify-content: center;
    gap: 5px;
  }

  .yp-categorie-card__cta,
  .yp-categorie-card__pictos {
    display: none;
  }

  /* Amplitude/rotation reduites par rapport au desktop : la marge dispo est
     plus courte sur mobile. */
  .yp-categorie-carousel__track.is-sliding-left .yp-categorie-row__col:nth-child(1) {
    transform: translateX(-6px) rotate(-1deg);
  }

  .yp-categorie-carousel__track.is-sliding-left .yp-categorie-row__col:nth-child(2) {
    transform: translateX(-11px) rotate(-1deg);
  }

  .yp-categorie-carousel__track.is-sliding-left .yp-categorie-row__col:nth-child(3) {
    transform: translateX(-16px) rotate(-1deg);
  }

  .yp-categorie-carousel__track.is-sliding-right .yp-categorie-row__col:nth-child(1) {
    transform: translateX(6px) rotate(1deg);
  }

  .yp-categorie-carousel__track.is-sliding-right .yp-categorie-row__col:nth-child(2) {
    transform: translateX(11px) rotate(1deg);
  }

  .yp-categorie-carousel__track.is-sliding-right .yp-categorie-row__col:nth-child(3) {
    transform: translateX(16px) rotate(1deg);
  }
}

/* Indice au-dessus de la nav : texte manuscrit + main qui balaie de gauche
   a droite pour inviter a explorer. */
.yp-categorie-nav-hint {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.yp-categorie-nav-hint.is-dismissed {
  opacity: 0;
}

.yp-categorie-nav-hint__text {
  margin: 0;
  font-family: "bimbo-pro", "Bimbo Pro", cursive, sans-serif;
  font-size: 28px;
  line-height: 1.1;
  color: #b4734a;
  white-space: nowrap;
}

.yp-categorie-nav-hint__hand {
  width: 34px;
  height: 34px;
  animation: yp-hint-hand-swipe 1.8s ease-in-out infinite;
}

@keyframes yp-hint-hand-swipe {
  0%,
  100% {
    transform: translateX(-30px);
  }
  50% {
    transform: translateX(30px);
  }
}

@media (max-width: 900px) {
  .yp-categorie-nav-hint__text {
    font-size: 22px;
  }
}

/* Barre de navigation : ancrée 35px sous les cartes, plus flottante */

.yp-categorie-nav {
  position: relative;
  display: flex;
  align-items: stretch;
  padding: 4px;
  border-radius: 999px;
  background: #eae7e2;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  z-index: 2;
  /* Fait passer l'index de l'indice legerement par-dessus la barre, au lieu
     de s'arreter juste au-dessus (annule le gap de 35px du wrapper + un peu
     plus pour un vrai chevauchement). */
  margin-top: -45px;
}

.yp-categorie-nav__indicator {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--dot-color, #663050);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), width 0.35s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease;
  pointer-events: none;
  z-index: 1;
}

.yp-categorie-nav__indicator.is-ready {
  opacity: 1;
}

.yp-categorie-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 4px 24px;
  color: rgba(58, 50, 45, 0.65);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  z-index: 2;
  transition: color 0.3s ease;
}

.yp-categorie-nav__item:hover {
  color: #3a322d;
}

.yp-categorie-nav__item.is-active {
  color: #ffffff;
  font-weight: 700;
}

@media (max-width: 900px) {
  .yp-categorie-nav {
    max-width: 96vw;
    overflow-x: auto;
  }

  .yp-categorie-nav__item {
    padding: 12px 16px;
    font-size: 0.8rem;
  }
}

/* Colonne 1 : mini-carte discipline */

/* Les coins arrondis / l'ombre / le decoupage vivent sur les faces qui
   tournent (.front / .media, plus bas) et non sur ce conteneur : sinon la
   carte tourne "a l'interieur" d'un cadre fige et ses coins se font couper
   par lui. overflow:visible ici pour laisser respirer l'ombre + la rotation.
   perspective vit sur l'etage intermediaire (stage) pour ne jamais combiner
   overflow:hidden + perspective/preserve-3d sur un meme element, ce qui
   casse le rendu 3D (rognage, backface-visibility) dans plusieurs
   navigateurs (Safari notamment). */
.yp-categorie-row__col--carte {
  overflow: visible;
  box-shadow: none;
}

.yp-categorie-card__stage {
  width: 100%;
  /* Hauteur fixe en px (pas %) partout dans cette chaine : un pourcentage
     ne se resout pas de façon fiable a travers un ancetre transform-style:
     preserve-3d, la carte se retrouvait sizee sur son contenu (bien plus
     que 552px) au lieu de sa hauteur reelle. 8px de moins que la colonne
     (552px) pour laisser la place au debord de l'ombre (.front/.media). */
  height: 544px;
  perspective: 1600px;
}

/* Retournement 3D : la carte entiere pivote ; front/media sont ses 2 faces */
.yp-categorie-card {
  box-sizing: border-box;
  position: relative;
  height: 544px;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1);
}

.yp-categorie-card.is-showing-media {
  transform: rotateY(180deg);
}

.yp-categorie-card__front {
  /* box-sizing: border-box, sinon "height: 544px" ne compte pas le padding
     (40px + 32px vertical) : la boite rendue faisait 544+72 = 616px reel,
     d'ou la colonne trop haute malgre le height fixe. */
  box-sizing: border-box;
  position: relative;
  height: 544px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px 32px;
  background: #eae7e2;
  border-radius: 24px;
  overflow: hidden;
  /* Debord volontairement leger (contrairement au -6px/6px/5px des 2 autres
     colonnes) pour limiter l'ecart de hauteur visuel : cette ombre est sur
     un descendant, pas sur la colonne elle-meme, donc rien ne la rogne. */
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.yp-categorie-card.is-showing-media .yp-categorie-card__front {
  pointer-events: none;
}

/* Tuile vidéo / infographie : face arriere de la carte. Hauteur explicite
   (pas "inset:0") : ça permet au JS de l'agrandir vers le bas une fois le
   flip termine, pour que le viewport video colle a ses vraies proportions
   au lieu d'etre borne a la hauteur de la carte (barres noires). */
.yp-categorie-card__media {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 544px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #000;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: height 0.4s ease;
}

.yp-categorie-card.is-showing-media .yp-categorie-card__media {
  pointer-events: auto;
}

/* Ombrage anime pendant la rotation (comme une carte physique qui capte
   moins la lumiere de face) : entierement contenu dans chaque face, donc
   jamais rogne par le viewport, contrairement a un box-shadow qui deborde. */
.yp-categorie-card__front::before,
.yp-categorie-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: radial-gradient(circle at 30% 20%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  opacity: 0;
  pointer-events: none;
}

.yp-categorie-card.is-flipping .yp-categorie-card__front::before,
.yp-categorie-card.is-flipping .yp-categorie-card__media::before {
  animation: yp-card-shade 0.65s ease;
}

@keyframes yp-card-shade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.yp-categorie-card__media-panel {
  display: none;
  flex: 1;
  min-height: 0;
}

.yp-categorie-card__media-panel.is-active {
  display: flex;
}

/* Cadre video : c'est .yp-categorie-card__media (le parent) qui grandit
   au bon moment ; ce cadre suit simplement sa taille. */
.yp-categorie-card__video-frame {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yp-categorie-card__media-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.yp-categorie-card__media-panel--infographie {
  overflow-y: auto;
  background: var(--yp-cat-card-color, #5f334f);
}

.yp-categorie-card__media-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  cursor: pointer;
}

/* Memes styles que sur la page discipline (police, tailles, espacements) :
   seuls des ajustements structurels pour s'inserer dans la tuile, puisque
   celle-ci grandit maintenant a la hauteur naturelle du contenu. */
.yp-categorie-card__media-panel--infographie .yp-infographie {
  width: 100%;
  height: auto;
  /* min-height:0 (pas 100%) : sinon la mesure de la hauteur naturelle du
     contenu (scrollHeight, en JS) reste calee sur la taille actuelle de la
     tuile au lieu de refleter le vrai besoin, empechant l'agrandissement. */
  min-height: 0;
  border-radius: 0;
  box-sizing: border-box;
}

.yp-categorie-card__media-panel--infographie .yp-infographie.yp-animated {
  height: auto;
}

.yp-categorie-card__media-panel--infographie .yp-infographie-title {
  font-size: 40px;
}

.yp-categorie-card__titre {
  margin: 0 0 28px;
  font-family: "bimbo-pro", "Bimbo", cursive, sans-serif;
  font-size: 68px;
  text-align: center;
  font-weight: 400;
  line-height: 0.95;
  color: var(--yp-cat-card-color, #663050);
  transform: rotate(-6deg);
  /* Réserve toujours la hauteur d'un titre sur 2 lignes, même pour un titre d'un seul mot,
     pour que les cartes restent alignées quel que soit le nombre de mots. */
  min-height: calc(68px * 0.95 * 2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.yp-categorie-card .yp-categorie-card__infos,
.yp-categorie-card .yp-categorie-card__infos li {
  list-style: none;
}

.yp-categorie-card__infos {
  margin: 0 0 28px;
  padding: 0;
  text-align: center;
  color: var(--yp-cat-card-color, #663050);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.9;
}

.yp-categorie-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 32px;
  padding: 14px 28px;
  background: #3c564824;
  border-radius: 8px;
  color: var(--yp-cat-card-color, #663050);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
}

.yp-categorie-card__cta-arrow {
  display: inline-flex;
  flex-shrink: 0;
}

.yp-categorie-card__cta:hover {
  background: var(--yp-cat-card-color, #663050);
  color: #ffffff;
}

.yp-categorie-card__pictos {
  display: flex;
  gap: 28px;
}

.yp-categorie-card__picto-wrap {
  position: relative;
}

/* Indice qui pointe sur le bouton video : cache par defaut, apparait apres
   la 1ere interaction avec la nav (voir revealPictoHint en JS), disparait
   des le premier clic sur un bouton de la carte (voir openPanel en JS). */
.yp-categorie-card__picto-hint {
  position: absolute;
  /* Decale moins loin qu'avant (right:30px au lieu de calc(100% + 6px)) :
     a cette taille, la placer entierement a gauche du bouton la ferait
     sortir du cadre de la carte (overflow:hidden) et couper. */
  right: 30px;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Main video : en haut a droite du bouton. */
.yp-categorie-card__picto-hint[data-yp-card-picto-hint="video"] {
  top: -10px;
  transform: rotate(-120deg);
}

/* Main infographie : meme main qu'au-dessus, mais en bas a droite, reflechie
   sur l'axe horizontal (scaleY, pour pointer vers le haut au lieu du bas) ET
   sur l'axe vertical (scaleX, sinon elle penche vers le bouton video au lieu
   de pointer sur son propre bouton). */
.yp-categorie-card__picto-hint[data-yp-card-picto-hint="infographie"] {
  bottom: 11px;
  right: -55px;
  transform: scaleX(-1) scaleY(-1) rotate(-120deg);
}

.yp-categorie-card__picto-hint[data-yp-card-picto-hint="infographie"] img {
  width: 58px;
  height: 58px;
}

.yp-categorie-card__picto-hint.is-visible {
  opacity: 1;
}

.yp-categorie-card__picto-hint[data-yp-card-picto-hint="video"].is-visible {
  animation: yp-hint-hand-tap 1.4s ease-in-out infinite;
}

.yp-categorie-card__picto-hint[data-yp-card-picto-hint="infographie"].is-visible {
  animation: yp-hint-hand-tap-mirror 1.4s ease-in-out infinite;
}

.yp-categorie-card__picto-hint.is-dismissed {
  opacity: 0;
}

.yp-categorie-card__picto-hint img {
  display: block;
  width: 70px;
  height: 70px;
}

@keyframes yp-hint-hand-tap {
  0%,
  100% {
    transform: rotate(-120deg) translateY(0);
  }
  50% {
    transform: rotate(-120deg) translateY(-6px);
  }
}

@keyframes yp-hint-hand-tap-mirror {
  0%,
  100% {
    transform: scaleX(-1) scaleY(-1) rotate(-120deg) translateY(0);
  }
  50% {
    transform: scaleX(-1) scaleY(-1) rotate(-120deg) translateY(-6px);
  }
}

.yp-categorie-card__picto {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  margin: 0;
  font-family: inherit;
  text-decoration: none;
  color: #4c4f45;
  font-size: 0.8rem;
  line-height: 1.2;
  text-align: center;
  text-transform: lowercase;
  cursor: pointer;
  perspective: 300px;
}

/* Accroche au chargement : les 2 icones font un flip chacune a leur tour. */
.yp-categorie-card__picto-icon {
  animation: yp-picto-flip 0.6s ease;
}

[data-yp-card-action="video"] .yp-categorie-card__picto-icon {
  animation-delay: 0.3s;
}

[data-yp-card-action="infographie"] .yp-categorie-card__picto-icon {
  animation-delay: 1.1s;
}

@keyframes yp-picto-flip {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

.yp-categorie-card__picto-blob {
  position: absolute;
  top: -6px;
  width: 46px;
  height: 42px;
  background: var(--yp-cat-card-color, var(--yp-cat-color, #663050));
  opacity: 0.18;
  border-radius: 48% 52% 45% 55% / 55% 43% 57% 45%;
  transform: rotate(-11deg);
}

/* Réutilisé comme fond des badges des stats du hero (remplace l'ancien cercle plein) */
.yp-categorie-hero__stat-badge .yp-categorie-card__picto-blob {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.yp-categorie-hero__stat--disciplines .yp-categorie-hero__stat-badge .yp-categorie-card__picto-blob {
  transform: rotate(8deg);
  border-radius: 56% 44% 52% 48% / 45% 56% 44% 55%;
}

.yp-categorie-hero__stat--cours-semaine .yp-categorie-hero__stat-badge .yp-categorie-card__picto-blob {
  transform: rotate(-6deg);
  border-radius: 51% 49% 42% 58% / 60% 43% 57% 40%;
}

.yp-categorie-card__picto:nth-child(2) .yp-categorie-card__picto-blob {
  transform: rotate(8deg);
  border-radius: 56% 44% 52% 48% / 45% 56% 44% 55%;
}

.yp-categorie-card__picto:nth-child(3) .yp-categorie-card__picto-blob {
  transform: rotate(-6deg);
  border-radius: 51% 49% 42% 58% / 60% 43% 57% 40%;
}

.yp-categorie-card__picto-icon {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  background-color: var(--yp-cat-card-color, #663050);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.yp-categorie-card__picto-label {
  position: relative;
  z-index: 1;
  color: var(--yp-cat-card-color, #663050);
}

.yp-categorie-card__picto-icon--video {
  -webkit-mask-image: url("https://yogaetpresence.com/wp-content/uploads/2026/04/video.svg");
  mask-image: url("https://yogaetpresence.com/wp-content/uploads/2026/04/video.svg");
}

.yp-categorie-card__picto-icon--info {
  -webkit-mask-image: url("https://yogaetpresence.com/wp-content/uploads/2026/04/info.svg");
  mask-image: url("https://yogaetpresence.com/wp-content/uploads/2026/04/info.svg");
}

@media (max-width: 900px) {
  .yp-categorie-hero__layout {
    grid-template-columns: 1fr;
  }

  .yp-categorie-hero__left {
    padding: 36px 24px;
  }

  .yp-categorie-hero__right {
    min-height: 260px;
  }

  .yp-categorie-hero__stats {
    gap: 24px;
  }
}

/* Titre au-dessus du planning hebdo, en bas de la page categorie */
.yp-categorie-planning__title {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  line-height: 1.2;
  text-align: center;
  color: #3a322d;
  margin: 60px 0 24px;
}

/* Grille mobile v2 (etape 1, voir bloc @media plus haut ~ligne 396) : ces
   overrides doivent etre EN DERNIER dans le fichier. Plusieurs regles
   desktop non-conditionnelles pour les memes proprietes (hauteur fixe des
   cartes ~ligne 617-641, display des CTA/pictos ~ligne 830-859) sont
   declarees APRES le bloc mobile d'origine : a specificite egale, la regle
   la plus tardive dans le fichier gagne, peu importe qu'elle soit dans une
   media query ou non - ces overrides etaient donc silencieusement ecrases.
   On les rejoue ici, apres tout le reste, pour qu'ils gagnent pour de bon. */
@media (max-width: 900px) {
  .yp-categorie-card__stage,
  .yp-categorie-card,
  .yp-categorie-card__front {
    height: 100%;
    max-height: none;
  }

  .yp-categorie-card__cta,
  .yp-categorie-card__pictos {
    display: none;
  }

  /* Pas encore traites pour ce nouveau format mobile (video/infographie/
     plannig+bouton "voir les cours suivants") : masques en attendant les
     prochaines etapes. */
  .yp-categorie-row__col--prochain,
  .yp-categorie-row__col--pile {
    display: none;
  }

  /* Systeme d'indices (texte "Comment choisir son Yoga" + mains) : concu
     pour le carrousel desktop, pas encore adapte a ce nouveau format mobile
     plein ecran - masque pour l'instant. La barre de nav (.yp-categorie-nav),
     elle, est reutilisee pour la rangee 5 (dots) - voir plus bas. */
  .yp-categorie-nav-hint {
    display: none;
  }

  /* Rangee 5 (dots) : reutilise .yp-categorie-nav (deja gere par le JS
     existant - click, indicateur actif) mais restyle en simples points au
     lieu des pastilles textuelles du desktop. Vit hors de la grille de
     .yp-categorie-row (voir plus haut) car partage entre toutes les
     disciplines, ne doit pas slider avec chaque carte. */
  .yp-categorie-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* -3px (etait 26px) : transferes a .yp-categorie-row (padding-top,
       en-tete) pour l'eloigner un peu du haut - garder ce -3px synchronise
       avec le +3px du padding-top et la formule de height plus haut, sinon
       le total deborde de 100dvh. */
    height: 23px;
    margin-top: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    max-width: none;
    overflow: hidden;
  }

  /* L'indicateur anime (pastille qui glisse derriere l'item actif) est
     concu pour une pastille texte large - pas adapte a un simple point.
     Remplace par un fond de couleur direct sur .is-active (voir plus bas). */
  .yp-categorie-nav__indicator {
    display: none;
  }

  .yp-categorie-nav__item {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    background: #d8d3cc;
    overflow: hidden;
    /* Le texte (nom de la discipline) reste dans le DOM pour l'accessibilite
       mais est pousse hors du cercle visuellement - pas de nouveau markup
       necessaire. font-size:0 (pas juste text-indent) : un bloc mobile plus
       ancien (ligne ~679) lui donnait encore font-size:0.8rem, et un texte
       en white-space:nowrap est justement le cas le plus gonfle par le
       "text auto-sizing" de Safari iOS - meme invisible, il poussait la
       taille de son conteneur. A 0, plus rien a gonfler. */
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    white-space: nowrap;
  }

  .yp-categorie-nav__item.is-active {
    background: var(--dot-color, #663050);
    width: 14px;
    height: 14px;
  }

  /* Placeholders gris (v2, grille mobile en construction) : symbolisent les
     emplacements des rangees 2 a 5 le temps qu'elles soient remplies avec le
     vrai contenu (bandeau / video-infographie / fiche+bouton / dots). A
     retirer au fur et a mesure que chaque etape est traitee.
     height/width 100% + box-sizing explicites : ne pas compter sur le
     stretch implicite de la grille (observe comme peu fiable ici en
     pratique, cause des blocs qui ne remplissaient pas leur rangee). */
  .yp-categorie-mobile-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    background: #cccccc;
    border-radius: 10px;
    color: #555555;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding: 8px;
  }

  /* Plus une rangee dediee de la grille : integre en bas de l'en-tete
     (enfant de .yp-categorie-card__front, flex-column) pour liberer sa
     rangee au profit de la fiche prochain cours en dessous. width:100% requis
     ici (le parent flex a align-items:center, qui sinon ne stretch pas ses
     enfants a la largeur du contenu). */
  .yp-categorie-mobile-banner-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    /* Plus de margin-top ici : l'ecart de 5px avec l'en-tete vient
       maintenant du gap:5px sur le parent (.yp-categorie-card__front). */
    box-sizing: border-box;
    padding: 8px 24px;
    /* Coins arrondis sur les 4 angles - le bouton est une "tuile"
       independante avec un petit espace au-dessus (gap du parent). */
    border-radius: 10px;
    /* Teinte plus legere que l'en-tete (10% au lieu de 30%) : texte dans la
       couleur de la discipline (variable posee sur .yp-categorie-card, voir
       yp_render_categorie_discipline_card()). */
    background: color-mix(in srgb, var(--yp-cat-card-color, #663050) 15%, white);
    color: var(--yp-cat-card-color, #663050);
    font-family: "Quicksand", sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
  }

  .yp-categorie-mobile-banner-btn__arrow {
    display: inline-flex;
    flex-shrink: 0;
  }

  /* Rangee 2 : video en boucle (champ ACF video_intro - version courte, meme
     que .yp-video-intro sur les pages discipline mobiles) a gauche,
     infographie (placeholder, etape suivante) a droite. Les enfants sans
     video (fallback) et infographie gardent la classe generique
     .yp-categorie-mobile-placeholder (stylee plus haut). */
  .yp-categorie-mobile-media-row {
    grid-row: 2;
    display: grid;
    /* minmax(0, 1fr) plutot que juste "1fr" : sinon le contenu de
       l'infographie (titre, texte) peut forcer sa colonne au-dela de sa
       part egale, ce qui casse l'aspect-ratio identique des deux boutons
       (meme cause que le minmax() deja utilise sur les rangees). */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    /* Filet de securite supplementaire : que le debordement vienne de la
       video, de l'infographie ou d'ailleurs, il ne doit jamais deborder
       dans la rangee suivante (fiche prochain cours). */
    overflow: hidden;
  }

  /* Format impose (~551/482, cf. maquette) : impose sur le wrap (pas
     directement sur la video) pour que la legende, positionnee en absolu
     par rapport a lui, reste bien collee au bord bas reel du cadre plutot
     qu'a une hauteur 100% qui pourrait deborder de ce format. width:100%
     (rempli sa colonne) + aspect-ratio calcule la hauteur - object-fit:cover
     sur la video (deja en place) recadre le contenu source sans deformer. */
  .yp-categorie-mobile-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 551 / 482;
    /* La legende (position:absolute) peut deborder du cadre si le texte est
       plus long que prevu sur une colonne etroite (vu sur iPhone reel : la
       legende se met sur plusieurs lignes et debordait dans la rangee
       suivante). Clip au cadre plutot que de laisser deborder. */
    overflow: hidden;
    box-shadow: none;
  }

  .yp-categorie-mobile-video {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    object-fit: cover;
    border-radius: 10px;
    background: #000000;
  }

  /* Legende "Decouvrez [discipline] avec [prof]" en surimpression, meme
     esprit que .yp-video-caption sur les pages discipline mobiles. */
  .yp-categorie-mobile-video-caption {
    position: absolute;
    left: 4px;
    right: 4px;
    top: 50%;
    padding: 6px 10px;
    border-radius: 10px;
    color: #ffffff;
    font-family: "bimbo-pro", "Bimbo Pro", cursive, sans-serif;
    font-size: 28px;
    line-height: 1.2;
    text-align: center;
    transform: translateY(-50%) rotate(-7deg);
    /* Tentative de fix "clignotement" au changement de slide : ce texte
       (transform propre + police custom) semble se re-composer un peu
       apres l'arrivee du fond video quand le parent (le track) anime en
       meme temps - couche compositee dediee, pour eviter que Safari iOS ne
       la recalcule tardivement pendant l'animation du parent. */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* Popup video/infographie (tap sur la tuile) : meme "drawer" (tiroir qui
     glisse depuis le bas, pas d'overlay noir) que sur les vraies pages
     discipline mobiles (.yp-video-drawer, theme the7-child/js/single-cours-
     yoga.js) - repris ici a l'identique plutot que le plein-ecran/overlay
     noir essaye au premier jet, qui ne plaisait pas. Regles de positionne
     ment/animation partagees entre video et infographie (meme mecanique de
     tiroir, seul le contenu change). Deplacees en JS vers document.body a
     l'ouverture (voir PHP - necessaire car un ancetre, le track du
     carrousel, a un transform anime qui casserait un position:fixed reste
     imbrique dedans). */
  .yp-categorie-mobile-video-popup,
  .yp-categorie-mobile-infographie-popup {
    position: fixed;
    top: 10px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10002;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    background: transparent;
    opacity: 0;
    transform: translateY(calc(100% + 3px));
    transition: transform 620ms cubic-bezier(0.2, 0.85, 0.22, 1), opacity 420ms ease;
  }

  .yp-categorie-mobile-video-popup[hidden],
  .yp-categorie-mobile-infographie-popup[hidden] {
    display: none;
  }

  .yp-categorie-mobile-video-popup.is-open,
  .yp-categorie-mobile-infographie-popup.is-open {
    opacity: 1;
    transform: translateY(3px);
  }

  .yp-categorie-mobile-video-popup__video {
    width: 100%;
    height: min(100dvh, 100vh);
    max-height: min(100dvh, 100vh);
    display: block;
    background: #000000;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.16);
    object-fit: cover;
    object-position: center top;
  }

  .yp-categorie-mobile-video-popup__close {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    right: 8px;
    z-index: 3;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: none;
    font-size: 20px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
  }

  /* Contenu du tiroir infographie : panneau colore (couleur de la
     discipline) rempli des 8 criteres complets, scrollable si ca depasse
     la hauteur disponible (plutot que de rogner). */
  .yp-categorie-mobile-infographie-popup__content {
    width: 100%;
    max-height: min(100dvh, 100vh);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 32px 54px max(32px, env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.16);
    color: #ffffff;
  }

  .yp-categorie-mobile-infographie-popup__surtitle {
    margin: 0 0 4px;
    font-family: "Quicksand", sans-serif;
    font-size: 18px;
    font-weight: 300;
    text-align: center;
  }

  .yp-categorie-mobile-infographie-popup__titre {
    margin: 0 0 28px;
    font-family: "Playfair Display", serif;
    font-style: italic;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.15;
    text-align: center;
    color: #ffffff;
  }

  .yp-categorie-mobile-infographie-popup__item {
    margin-bottom: 18px;
  }

  .yp-categorie-mobile-infographie-popup__item-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  .yp-categorie-mobile-infographie-popup__bar {
    width: 100%;
    height: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
  }

  .yp-categorie-mobile-infographie-popup__bar-fill {
    display: block;
    /* 0 par defaut - animee vers sa valeur (data-target) en JS une fois le
       tiroir ouvert, pas avant (voir animateMobileInfographieBars()). */
    width: 0;
    height: 100%;
    border-radius: 10px;
    background: #ffffff;
  }

  /* Bouton infographie : meme format que la video (aspect-ratio, colonne de
     droite de la rangee 3). Fond = couleur de la discipline (inline via
     PHP), 3 barres schematiques (juste illustratives, voir echange avec
     l'utilisateur - pas besoin que les valeurs soient exactes). */
  .yp-categorie-mobile-infographie {
    width: 100%;
    aspect-ratio: 551 / 482;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 19px 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: none;
  }

  /* Surtitre/titre rapproches : plutot qu'un gap uniforme + margin-bottom
     negatif sur le surtitre (fragile), chaque enfant porte son propre
     margin-bottom positif - le dernier (titre) garde l'ecart d'origine
     avant les barres, seul l'ecart surtitre-titre est reduit. */
  .yp-categorie-mobile-infographie__surtitle {
    margin: 0 0 0px;
    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #ffffff;
    text-align: center;
  }

  .yp-categorie-mobile-infographie__titre {
    margin: 0 0 7px;
    font-family: "Playfair Display", serif;
    font-style: italic;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.15;
    color: #ffffff;
    text-align: center;
  }

  .yp-categorie-mobile-infographie__bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .yp-categorie-mobile-infographie__bar {
    width: 100%;
    height: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
  }

  .yp-categorie-mobile-infographie__bar-fill {
    display: block;
    height: 100%;
    border-radius: 10px;
    background: #ffffff;
  }

  /* Rangee 4 : reutilise [pile_cours_mobile] tel quel - meme composant que
     sur les pages discipline mobiles (prochain cours + bouton "Voir les
     cours suivants" qui ouvre sa propre popup avec tous les cours de la
     discipline, deja inclus dans son rendu).
     Pas de height:100%/flex/overflow:hidden ici : .pile-cours (dans
     pile-cours-mobile.css) gere deja sa propre hauteur via son
     padding-bottom (72px, reserve pour le bouton en position:absolute;
     bottom:0). La forcer a une hauteur differente via flex-stretch faisait
     chevaucher le bouton et la fiche au lieu de les empiler - on laisse le
     composant s'auto-dimensionner (~155px), la rangee (minmax(0, 502fr))
     s'ajuste autour. */
  .yp-categorie-mobile-fiche-row {
    /* display:none par defaut (haut du fichier, non conditionnel) - oublie
       de le re-overrider ici en simplifiant cette regle plus tot, d'ou le
       "rien ne s'affiche" : aucune propriete de boite ne compte quand
       l'element est display:none, quoi qu'on mette par ailleurs. */
    display: block;
    grid-row: 3;
    width: 100%;
    box-sizing: border-box;
    /* Centrage vertical dans sa rangee (fr proportionnel - sa hauteur reelle
       depasse parfois celle de la carte ~155px) : NI align-self:center NI
       margin:auto (les deux essayes, les deux ont cause un saut de
       quelques px du bouton "Voir les cours suivants" pendant l'animation
       de changement de slide sur certains iPhone - visiblement Safari
       recalcule ce centrage "en direct" pendant que le parent anime son
       transform, quel que soit le mecanisme CSS utilise). Le centrage est
       maintenant calcule une seule fois en JS (voir centerFicheRows() dans
       categorie-pratique.js) et applique en padding-top fixe, donc plus
       rien a recalculer pendant l'animation. padding-top:0 ici = valeur de
       secours si le JS n'a pas encore tourne. */
    padding-top: 0;
  }

  /* Neutralise completement le style desktop de la face avant (background
     #eae7e2, box-shadow, border-radius 24px, padding 40/24/32) : seuls
     padding-left/right etaient overrides avant, le reste restait actif en
     silence et s'affichait derriere/autour des deux nouveaux blocs (en-tete
     + bouton), créant un empilement visuel confus. .yp-categorie-card__front
     ne doit plus etre qu'un conteneur flex neutre - toute l'apparence
     visible vient desormais de .yp-categorie-mobile-header-content et
     .yp-categorie-mobile-banner-btn. */
  .yp-categorie-card__front {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }

  /* Fond blanc + coins hauts arrondis limites a titre+infos - pas au bouton
     "Decouvrez cette discipline" juste en dessous, qui a sa propre couleur
     (voir .yp-categorie-mobile-banner-btn). Avant, le fond etait pose sur
     .yp-categorie-card__front (le conteneur entier, bouton inclus), ce qui
     melangeait les deux dans la meme regle. */
  .yp-categorie-mobile-header-content {
    /* width:100% indispensable : le parent (.yp-categorie-card__front) est
       en align-items:center (regle desktop de base), donc ses enfants ne
       s'etirent pas sur toute la largeur par defaut - meme bug deja
       rencontre sur .yp-categorie-mobile-banner-btn. Sans ca, le bloc ne
       fait que la largeur de son texte au lieu de toute la carte. */
    width: 100%;
    /* Teinte a 30% de la couleur de la discipline (var posee sur
       .yp-categorie-card) plutot qu'un beige fixe - color-mix supporte par
       Safari iOS depuis la 16.4, largement couvert sur les appareils vises
       ici. */
    background: color-mix(in srgb, var(--yp-cat-card-color, #663050) 25%, white);
    box-shadow: none;
    box-sizing: border-box;
    padding: 8px 0;
    /* 4 coins arrondis : boite independante du bouton juste en dessous
       (petit espace entre les deux, voir margin-top sur le bouton), pas
       collee a lui. */
    border-radius: 10px;
  }

  /* Retire le padding-top desktop (64px) de la carrousel : sur ce nouveau
     format mobile plein ecran, la ligne fait deja 100dvh - ce padding en
     plus ne faisait que pousser le total au-dela du viewport. Le
     padding-bottom (16px) reste (utilise par le JS pour le debord video/
     infographie quand une tuile s'agrandit). */
  .yp-categorie-carousel {
    padding: 0px 0 16px;
  }

  /* En-tete : le titre desktop (68px, min-height reserve pour 2 lignes) +
     les 4 lignes d'infos (16px, line-height 1.9) sont trop hauts pour tenir
     dans la part reelle du 1er tiers sur un ecran mobile - on reduit taille
     et interlignage pour que ca rentre sans forcer la rangee a deborder
     (voir minmax() plus haut, qui sinon aurait plutot fait rogner le
     contenu que grandir la rangee). */
  .yp-categorie-card__titre {
    margin: 0 0 12px;
    font-size: 40px;
    line-height: 1;
    min-height: calc(40px * 1 * 2);
  }

  .yp-categorie-card__infos {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
  }

  /* Marge entre chaque slide (discipline) : visible pendant le swipe, entre
     la carte qui sort et celle qui entre. Le JS lit ce gap dynamiquement
     (getSlideStepGapPx()) pour corriger le calcul du translateX en
     consequence - toucher cette valeur ici suffit, pas besoin de la
     dupliquer cote JS. */
  .yp-categorie-carousel__track {
    gap: 20px;
  }

  /* Plein contenu (mobile) : plus de popup - page pensee comme landing page
     pour du trafic Meta (l'objectif est de "chopper le contact", pas de
     montrer la page complete du site) - le hero, le planning hebdo et le
     footer sont masques (voir plus bas), il ne reste que le header/burger
     du theme (inchange) et ce carrousel en contenu principal. */

  /* Retire les animations de carte pensees pour le desktop : le carrousel
     mobile est maintenant une popup immersive independante, ces effets
     n'ont plus leur place ici (voir aussi le JS : startIntroDemo() est
     desactivee entierement sur mobile). */

  /* Effet "carambolage" (tilt/rebond des 3 colonnes pendant le swipe). */
  .yp-categorie-carousel__track.is-sliding-left .yp-categorie-row__col:nth-child(1),
  .yp-categorie-carousel__track.is-sliding-left .yp-categorie-row__col:nth-child(2),
  .yp-categorie-carousel__track.is-sliding-left .yp-categorie-row__col:nth-child(3),
  .yp-categorie-carousel__track.is-sliding-right .yp-categorie-row__col:nth-child(1),
  .yp-categorie-carousel__track.is-sliding-right .yp-categorie-row__col:nth-child(2),
  .yp-categorie-carousel__track.is-sliding-right .yp-categorie-row__col:nth-child(3) {
    transform: none;
  }

  /* Flou au chargement (leve progressivement quand la section devient
     centrale) : n'a plus de sens sur cette page pensee comme landing page
     plein contenu - toujours nette des le chargement. */
  .yp-categorie-carousel-wrap {
    filter: none;
  }

  /* Landing page trafic Meta : objectif = chopper le contact, pas montrer
     la page complete du site. On masque tout sauf le header/burger du
     theme (inchange) et ce carrousel, qui devient le contenu principal. */
  .yp-categorie-hero,
  .yp-categorie-planning__title,
  #planning-hebdo,
  #yp-planning-hebdo-dynamic {
    display: none;
  }

  body.tax-categorie_pratique #footer {
    display: none;
  }

  /* Fiche prochain cours (rangee 4) : retire le mecanisme swipe-pour-
     reveler de [pile_cours_mobile] - deux gestes de swipe imbriques
     (celui-ci + celui du carrousel disciplines) est le genre de conflit
     scroll/swipe deja identifie comme risque (voir memoire). "Reservez ce
     cours d'essai !" est rendu tout de suite visible, empile normalement
     sous la fiche plutot que cache derriere le geste ; "Decouvrir cette
     discipline" est masque (redondant avec le reste du carrousel). */
  .yp-categorie-mobile-fiche-row .swipe-front-inner {
    transform: none !important;
  }

  .yp-categorie-mobile-fiche-row .swipe-actions {
    position: static;
    inset: auto;
    justify-content: center;
    padding: 10px 0 0;
    pointer-events: auto;
    background: none;
  }

  .yp-categorie-mobile-fiche-row .yp-btn-decouvrir {
    display: none;
  }

  .yp-categorie-mobile-fiche-row .yp-btn-essai {
    visibility: visible !important;
    pointer-events: auto !important;
    width: 100%;
    background: var(--bg-cours, #274b63);
    border-radius: 10px;
    padding: 12px 6px;
  }

  /* "Reservez le prochain cours d'essai" : bandeau-titre genere par
     pile-cours-mobile.css sur #yp-pile-cours-mobile::before, pense pour les
     pages discipline mobiles (ou il fait office de titre de section). Ici
     il est redondant avec "Decouvrez cette discipline" deja affiche plus
     haut - masque, scope a notre contexte carrousel uniquement (le fichier
     partage n'est pas touche, les vraies pages discipline le gardent). */
  .yp-categorie-mobile-fiche-row .yp-pile-mobile-wrapper #yp-pile-cours-mobile::before {
    display: none;
  }

  /* Fond blanc de la carte prochain cours, scope a notre contexte comme la
     regle ::before ci-dessus (le fichier partage n'est pas touche, l'ID
     #yp-pile-cours-mobile dans notre selecteur egalise la specificite de sa
     regle de base). */
  .yp-categorie-mobile-fiche-row #yp-pile-cours-mobile .pile-cours {
    background: #ffffff;
    box-shadow: none;
    border-radius: 10px;
  }

  /* Fin liseret gris : depuis qu'on a retire le box-shadow de .pile-cours
     ci-dessus, la carte n'avait plus de delimitation visible sur le fond
     blanc de la page. Scope a notre contexte, meme technique que les regles
     precedentes (fichier partage pas touche). Un seul .pile-jour (pas deux
     regles dupliquees avec des margins differentes qui se pistolent) : la
     marge la plus resserree (1px 0 0) est gardee. */
  /* Bouton "Reservez votre 1er cours gratuit" (texte deja scope via
     l'attribut cta_text du shortcode) - meme technique de scoping pour son
     style : selecteur plus specifique que la regle de base de
     pile-cours-mobile.css (fichier partage, pas touche). */
  .yp-categorie-mobile-fiche-row .yp-pile-mobile-wrapper #yp-pile-cours-mobile .pile-cours > .btn-cours-suivants {
    position: absolute;
    left: 50%;
    bottom: 0;
    top: auto;
    transform: translateX(-50%);
    height: 73px;
    font-size: 21px;
    font-family: 'bimbo-pro';
    font-weight: 500;
    cursor: pointer;
    text-transform: none;
  }

  .yp-categorie-mobile-fiche-row #yp-pile-cours-mobile {
    /* 1px (etait 0.5px) : les valeurs en sous-pixel se rasterisent
       differemment pendant qu'un ancetre anime son transform (swipe) que
       once immobile - flickering observe sur ce type de valeur, meme cause
       que .pile-jour plus bas. */
    border: 1px #dfdfdf solid;
    /* Sans ca, la bordure dessine un rectangle carre autour de la carte
       arrondie (.pile-cours, border-radius:10px) en dessous - les coins de
       la bordure ne suivaient pas la forme et semblaient absents/coupes. */
    border-radius: 10px;
  }

  .yp-categorie-mobile-fiche-row #yp-pile-cours-mobile .pile-jour {
    margin: 1px 0 0;
    /* 1px (etait 0.3px) : clignotement pendant le swipe, corrige en passant
       a une valeur pleine (voir #yp-pile-cours-mobile juste au-dessus). */
    border-bottom: 1px #dfdfdf solid;
  }

  /* Fond de page blanc (etait #eae7e2, meme couleur que nos tuiles - elles
     devenaient invisibles, fondues dans le fond). Scope au mobile : cette
     pseudo-element (.yp-categorie-carousel-wrap::before, tout en haut du
     fichier) sert aussi de fond plein-largeur pour le desktop, pas touche
     ici. */
  .yp-categorie-carousel-wrap::before {
    background-color: #ffffff;
  }

}