/* PhysioDoc UI — formes et comportements structurels.
 * La typographie, les espacements et la mise en page restent gérés dans Webflow.
 */

.pd-chain {
  --pd-chain-height: 64px;
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  height: var(--pd-chain-height);
  overflow: visible;
  isolation: isolate;
}
/* Masque unique généré par le JavaScript */
.pd-chain__surface {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-color: rgba(143, 143, 143, 0.2);
  -webkit-backdrop-filter: blur(8.5px);
  backdrop-filter: blur(8.5px);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  filter: drop-shadow(
    0 4px 8.5px rgba(0, 0, 0, 0.1)
  );
  pointer-events: none;
}
/* Items */
.pd-chain__item,
.pd-chain__item:hover,
.pd-chain__item.is-current {
}
/* Suppression des anciens raccords */
.pd-chain__item::before,
.pd-chain__item::after {
  content: none !important;
}
/* Navigation principale */
.pd-chain.is-nav .pd-chain__item {
  padding-inline: 30px;
}
/* Recherche */
.pd-chain.is-tools .pd-chain__item.is-search {
  width: var(--pd-chain-height);
  min-width: var(--pd-chain-height);
  padding: 0;
}
/* Panier */
.pd-chain.is-tools .pd-chain__item.is-cart {
  padding-right: 22px;
  padding-left: 28px;
}
/* Icônes */
.pd-chain.is-tools .is-search svg {
  width: 18px;
  height: 18px;
}
.pd-chain.is-tools .is-cart .icon {
  width: 17px;
  height: 17px;
  flex: none;
}

.pd-hero-card {
  position: relative;
  isolation: isolate;
  overflow: visible;
}
.pd-hero-card__surface {
  position: absolute !important;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  pointer-events: none;
}

.section-hero {
  position: relative;
  overflow: hidden;
}
.pd-section-edge.is-hero {
  --pd-edge-height: 80px;
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: -1px;
  left: 0;
  height: var(--pd-edge-height);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  pointer-events: none;
}

.pd-media.is-notch-tl,
.pd-media.is-notch-tr,
.pd-media.is-action-br {
  position: relative;
  overflow: hidden;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.pd-media.is-notch-tl > img,
.pd-media.is-notch-tr > img,
.pd-media.is-action-br > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Structure image + bouton */
.pd-session-media {
  /*
   Tu continues de gérer le ratio et les dimensions
   dans Webflow.
  */
  --pd-action-gap: 4px;
  position: relative;
  overflow: visible;
}
.pd-session-media .pd-media.is-action-br {
  width: 100%;
  height: 100%;
}
.pd-session-media__button {
  position: absolute;
  z-index: 2;
  /*
   Position proche de l’exemple Figma.
   Les dimensions restent gérées dans Webflow.
  */
  right: -2px;
  bottom: -2px;
}

/* =========================================================
   SECTION AVEC FORME HAUTE + FORME BASSE
   ========================================================= */
.pd-shaped-section {
  position: relative;
  isolation: isolate;
  overflow: visible;
  /*
   La couleur de fond reste gérée dans Webflow.
   Ces arrondis reconstruisent les côtés du SVG original.
  */
  border-top-right-radius: 60px;
  border-bottom-right-radius: 60px;
  border-bottom-left-radius: 60px;
  /*
   Optionnel : ombre présente dans le SVG Figma.
   Tu peux supprimer cette ligne si tu gères l’ombre ailleurs.
  */
  filter: drop-shadow(0 4px 8.5px rgba(0, 0, 0, 0.1));
}
/* Formes communes */
.pd-section-edge {
  position: absolute;
  z-index: -1;
  left: 0;
  width: 100%;
  background-color: inherit;
  pointer-events: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
/* Forme supérieure */
.pd-section-edge.is-step-top {
  top: 1px;
  height: 118.716px;
  transform: translateY(-100%);
}
/* Forme inférieure */
.pd-section-edge.is-tray-bottom {
  bottom: 1px;
  height: 53.87px;
  transform: translateY(100%);
}

/* =========================================================
   CARTE ORGANIQUE AVEC BOUTON GAUCHE OU DROITE
   ========================================================= */
.pd-organic-card {
  /*
   Espace entre le bouton et la forme.
   Le SVG original est proche de 16 px.
  */
  --pd-organic-button-gap: 16px;
  /*
   Apparence du fond issue du SVG Figma.
   Tu peux modifier ces valeurs.
  */
  --pd-organic-bg: rgba(255, 255, 255, 0.06);
  --pd-organic-stroke: rgba(0, 0, 0, 0.22);
  --pd-organic-blur: 6.6px;
  position: relative;
  isolation: isolate;
  overflow: visible;
}
  .pd-organic-card__surface {
  z-index: 1;
}
  /* SVG d’ombre généré par le JavaScript */
.pd-organic-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  /*
   Espace nécessaire pour que le flou
   ne soit pas coupé.
  */
  inset: -12px;
  background-image:
    var(--pd-organic-shadow-image, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
/* Fond généré par le JavaScript */
.pd-organic-card__surface {
  position: absolute;
  z-index: 0;
  inset: 0;
  -webkit-backdrop-filter:
    blur(var(--pd-organic-blur));
  backdrop-filter:
    blur(var(--pd-organic-blur));
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
/* Contenu au-dessus du fond */
.pd-organic-card__content {
  position: relative;
  z-index: 2;
}
/* Bouton */
.pd-organic-card__button {
  position: absolute;
  z-index: 3;
  top: 0;
}
/* Variante gauche */
.pd-organic-card.is-action-left
.pd-organic-card__button {
  left: 0;
}
/* Variante droite */
.pd-organic-card.is-action-right
.pd-organic-card__button {
  right: 0;
}
/* =========================================================
   VARIANTE EXACTE — BOUTON EN BAS À DROITE
   Basée sur le SVG Figma 415 × 322
   ========================================================= */
.pd-organic-card.is-action-right.is-action-bottom {
  --pd-organic-button-gap: 26px;
  --pd-organic-outer-radius: 32px;
  --pd-organic-outer-join: 27px;
  --pd-organic-inner-join: 33px;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto !important;
  flex-grow: 0;
  flex-shrink: 0;
  isolation: isolate;
  overflow: visible;
}
/* =========================================================
   CONTOUR EXACT
   ========================================================= */
.pd-organic-card.is-action-right.is-action-bottom::before {
  content: "";
  position: absolute;
  z-index: 0;
  /*
   * Espace nécessaire au flou.
   */
  inset: -12px;
  background-image:
    var(--pd-organic-shadow-image, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: none;
  pointer-events: none;
}
/* =========================================================
   SURFACE ET OMBRE
   ========================================================= */
.pd-organic-card.is-action-right.is-action-bottom
.pd-organic-card__surface {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  /*
   * L’ombre suit directement le masque exact.
   */
  filter:
    drop-shadow(
      0 4px 8.5px rgba(0, 0, 0, 0.10)
    ) !important;
  pointer-events: none;
}
/* =========================================================
   CONTENU
   ========================================================= */
.pd-organic-card.is-action-right.is-action-bottom
.pd-organic-card__content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  min-height: 0;
}
/* =========================================================
   BOUTON
   ========================================================= */
.pd-organic-card.is-action-right.is-action-bottom
.pd-organic-card__button {
  position: absolute;
  z-index: 2;
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
}
/* Colonne centrale */
.col-pf-pack:has(
  .pd-organic-card.is-action-right.is-action-bottom
) {
  height: auto;
  min-height: 0;
}
.pd-organic-card.is-action-right.is-action-bottom
.pd-organic-card__surface {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: none !important;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* =========================================================
   FAQ — COMPATIBLE AVEC LE DROPDOWN NATIF WEBFLOW
   ========================================================= */
/* Le fond doit être porté uniquement par la surface SVG */
.pd-faq__trigger,
.pd-faq__trigger:hover,
.pd-faq__trigger.w--open {
  position: relative;
  isolation: isolate;
  overflow: visible;
}
/* Surface SVG générée par le script des boutons */
.pd-faq__trigger .pd-button__surface {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}
/* Question et icône au-dessus de la surface */
.pd-faq__trigger > :not(.pd-button__surface) {
  position: relative;
  z-index: 1;
}
/* Animation de l’icône */
.pd-faq__icon {
  transform-origin: center;
  transition:
    transform 0.4s cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}
.pd-faq__trigger.w--open .pd-faq__icon {
  transform: rotate(90deg);
}
/* Réponse fermée */
.pd-faq__answer.w-dropdown-list {
  position: relative;
  inset: auto;
  width: 100%;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition:
    grid-template-rows 0.45s cubic-bezier(
      0.22,
      1,
      0.36,
      1
    ),
    opacity 0.3s ease,
    visibility 0s linear 0.45s;
}
/* Élément indispensable à l’animation */
.pd-faq__answer-inner {
  min-height: 0;
  overflow: hidden;
}
/* Réponse ouverte par Webflow */
.pd-faq__answer.w-dropdown-list.w--open {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows 0.45s cubic-bezier(
      0.22,
      1,
      0.36,
      1
    ),
    opacity 0.3s ease,
    visibility 0s;
}
  /* ÉTAT FERMÉ */
.pd-faq__trigger {
  color: #111111 !important;
}
.pd-faq__trigger .pd-button__surface {
  background-color: #d9d9d9 !important;
  transition:
    background-color 0.35s ease;
}
/* ÉTAT OUVERT */
.pd-faq__trigger.w--open {
  color: #ffffff !important;
}
.pd-faq__trigger.w--open .pd-button__surface {
  background-color: #ba4b20 !important;
}
/* L’icône reprend automatiquement la couleur du texte */
.pd-faq__icon,
.pd-faq__icon svg {
  color: inherit;
}
.pd-faq__icon svg path {
  fill: currentColor;
}

/* =========================================================
   FILTRE DE CATÉGORIES — FORME DYNAMIQUE
   ========================================================= */
.pd-category-filter {
  /* Dimensions et couleurs modifiables */
  --pd-filter-height: 64px;
  --pd-filter-bg:
    rgba(255, 255, 255, 0.96);
  --pd-filter-text:
    #676767;
  --pd-filter-active:
    #ba4b20;
  --pd-filter-hover:
    #222222;
  --pd-filter-blur:
    8.5px;
  --pd-filter-shadow:
    drop-shadow(
      0 4px 2px rgba(0, 0, 0, 0.15)
    );
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  min-height: var(--pd-filter-height);
  overflow: visible;
}
/* Fond unique généré par le JavaScript */
.pd-category-filter__surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color:
    var(--pd-filter-bg);
  -webkit-backdrop-filter:
    blur(var(--pd-filter-blur));
  backdrop-filter:
    blur(var(--pd-filter-blur));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  pointer-events: none;
}
/* Éléments placés au-dessus du fond */
.pd-category-filter__item {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-height: var(--pd-filter-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--pd-filter-text);
  background: transparent !important;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  transition:
    color 0.25s ease;
}
/* Survol */
.pd-category-filter__item:hover {
  color: var(--pd-filter-hover);
}
/* Catégorie sélectionnée */
.pd-category-filter__item.is-active,
.pd-category-filter__item.is-active:hover,
.pd-category-filter__item[aria-pressed="true"] {
  color: var(--pd-filter-active);
}
/* Accessibilité clavier */
.pd-category-filter__item:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -8px;
}
  /* Calque qui porte l’ombre */
.pd-category-filter__shape {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: visible;
  filter:
    var(--pd-filter-shadow);
  pointer-events: none;
}
.pd-category-filter__item:first-child {
  padding-left:20px !important;
}
.pd-category-filter__item:last-child {
  padding-right:20px !important;
}

/* =========================================================
   LISTE « POUR QUI ? » — SLIDER VERTICAL
   Les dimensions des cartes restent gérées dans Webflow.
   ========================================================= */

.pd-qui-slider {
  --pd-qui-fade: 28px;
  position: relative;
  overflow: hidden;
  transition: height 0.35s ease;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--pd-qui-fade),
    #000 calc(100% - var(--pd-qui-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--pd-qui-fade),
    #000 calc(100% - var(--pd-qui-fade)),
    transparent 100%
  );
}

.pd-qui-slider__track {
  display: flex;
  flex-direction: column;
  width: 100%;
  will-change: transform;
}

.pd-qui-slider__item {
  flex: 0 0 auto;
}

.pd-qui-slider.is-static {
  height: auto !important;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

.pd-qui-slider__controls.is-disabled .nav-slider,
.pd-qui-slider__controls.is-disabled .pd-qui-slider__arrow {
  display: none !important;
}

.pd-qui-slider__arrow {
  cursor: pointer;
  user-select: none;
}

.pd-qui-slider__arrow:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .pd-qui-slider {
    scroll-behavior: auto;
  }
}

/* =========================================================
   AVIS — TROIS EMPLACEMENTS ET NAVIGATION
   La mise en page reste gérée par les classes Webflow.
   ========================================================= */

.pd-reviews__nav {
  appearance: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.pd-reviews.is-static .pd-reviews__nav {
  display: flex !important;
  opacity: 0.35;
  cursor: not-allowed;
  transition: opacity 0.25s ease;
}

.pd-reviews:not(.is-static) .pd-reviews__nav {
  opacity: 1;
  cursor: pointer;
}

.pd-reviews__slot {
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  will-change: opacity, transform;
}

.pd-reviews.is-changing .pd-reviews__slot {
  opacity: 0;
  transform: translateY(6px);
}

.pd-reviews__nav:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .pd-reviews__slot {
    transition: none;
  }
}

/* =========================================================
   CATALOGUE DES FORMATIONS
   La grille et les cartes conservent les classes Webflow.
   ========================================================= */

.pd-formations-catalogue [hidden] {
  display: none !important;
}

.pd-formations-catalogue .pd-session-media {
  position: relative;
}

.pd-formation-card__status {
  position: absolute;
  z-index: 4;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 999px;
  color: #fff;
  background: #ba4b20;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}

.pd-formation-card.is-complete .pd-media__image {
  filter: saturate(0.55);
}

.pd-formations-catalogue__more {
  display: flex;
  justify-content: center;
  width: 100%;
}

.pd-formations-catalogue__empty {
  width: 100%;
}

.pd-formation-card.pd-is-revealing {
  animation: pd-formation-card-reveal 0.46s
    cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--pd-reveal-delay, 0ms);
  will-change: opacity, transform;
}

@keyframes pd-formation-card-reveal {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pd-formation-card.pd-is-revealing {
    animation: none;
  }
}

/* =========================================================
   ÉQUIPE — ÉTAT DES FLÈCHES COLLABORATEURS
   ========================================================= */

.pd-team-slider__arrow {
  appearance: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.pd-team-slider__layout.is-static .pd-team-slider__arrow,
.pd-team-slider__arrow[aria-disabled="true"] {
  opacity: 0.3;
  cursor: default;
}

.pd-team-slider__arrow:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}