.category-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #0a0a0a;
}

/* Assombrissement du bas du hero (lisibilite du texte) + fondu vers la section
   suivante. Uniquement sur la page Photo, dont l'image de garde peut etre tres
   claire. Le gradient part de transparent (haut) vers le noir de fond (bas). */
/* Overlay d'ombrage en bas de TOUS les heros CMS (Films, Podcasts, Motion,
   Workshop, Photo) : assombrit le bas pour la lisibilite du titre/sous-titre
   et cree un fondu vers le fond sombre de la section suivante. */
body.cms-front-route .category-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0) 45%,
    rgba(10, 10, 10, 0.55) 75%,
    #0a0a0a 100%
  );
}

/* Le contenu (titre, sous-titre) doit passer AU-DESSUS de l'overlay. */
body.cms-front-route .category-hero__content {
  z-index: 2;
}

.category-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-hero__content {
  position: absolute;
  display: flex;
  align-items: end;
  justify-content: space-between;
  bottom: 5%;
  padding-inline: 10%;
  width: 100%;
  box-sizing: border-box;
}

.category-hero__title {
  margin: 0;
  color: var(--color-secondary);
  font-size: var(--font-size-display);
  font-family: var(--font-accent);
  font-weight: 400;
}

.category-hero__title-line {
  display: block;
  overflow: hidden;
}

.category-hero__title-letter {
  line-height: 1.2;
  display: inline-block;
}

.category-hero__title-letter--space {
  width: 0.28em;
}

.category-hero__title.js-stagger-title .category-hero__title-letter {
  opacity: 1;
  transform: translateY(0);
  will-change: transform, opacity;
}

.category-hero__title.js-stagger-title.is-prepared
  .category-hero__title-letter {
  opacity: 0;
  transform: translateY(0.6em);
}

.category-hero__title.js-stagger-title.is-animated
  .category-hero__title-letter {
  opacity: 1;
  transform: translateY(0);
  transition:
    transform 460ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 320ms ease;
  transition-delay: calc(var(--stagger-index, 0) * 55ms);
}

.category-hero__subtitle {
  margin: 0;
  color: var(--color-secondary);
  font-size: var(--font-size-lg);
  font-weight: 400;
}

/* B4 : le sous-titre hero est un <h1> ; Salient impose Playfair a tous les
   h1 via `body h1` (salient-dynamic-styles.css, specificite 0-0-2). On force
   DM Sans avec une specificite superieure (0-2-0), sans !important.
   Le TITRE hero (.category-hero__title) est un <h2> en Gloock : non touche. */
.cms-front-route .category-hero__subtitle {
  font-family: var(--font-primary);
}

.category-hero__arrow {
  display: block;
  animation: category-hero-arrow-pulse-y 2.5s ease-in-out infinite;
  transform-origin: center;
  cursor: pointer;
}

.category-hero__arrow path,
.category-hero__arrow polyline {
  animation-fill-mode: both;
}

.category-hero__arrow:hover path {
  animation: category-hero-arrow-erase-reveal-bar 900ms linear;
}

.category-hero__arrow:hover polyline {
  animation: category-hero-arrow-erase-reveal-chevron 900ms linear;
}

@keyframes category-hero-arrow-pulse-y {
  0%,
  50%,
  100% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(14px);
  }
}

@keyframes category-hero-arrow-erase-reveal-bar {
  0% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }

  28% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
  }

  74% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes category-hero-arrow-erase-reveal-chevron {
  0% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }

  28% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }

  56% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
  }

  72% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

.category-catalog {
  padding: clamp(32px, 6vw, 84px) 0 96px;
  /* Fond transparent : on laisse apparaitre le sombre pose par dark-theme.css,
     comme sur la page d'accueil (le bloc etait sur une bande claire avant). */
  background: transparent;
}

.category-catalog__bloc_text {
  max-width: var(--max-width-container);
  margin: 3rem auto;
  /* Padding vertical du bloc (ex-padding des paragraphes) porte ici une seule
     fois, quel que soit le nombre de paragraphes. */
  padding: clamp(2.5rem, 6vw, 6rem) clamp(16px, 4vw, 56px);
  display: flex;
  flex-direction: column;
}

/* Titre facon page d'accueil (module Nectar "Split Line Heading") :
   grand, italique, taille fluide 6vw bornee 38->100px, line-height serre.
   Valeurs reprises des reglages WPBakery de l'accueil. */
.category-catalog__title {
  margin: 0;
  padding-bottom: calc(100vw * 0.06);
  /* Playfair Display comme sur l'accueil (cf. dark-theme.css qui l'impose
     aussi sur les pages categorie) : on aligne pour eviter deux polices
     contradictoires sur le meme element. */
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(38px, 6vw, 100px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.1;
  color: var(--color-text-invert, #fff);
}

.category-catalog__title-end {
  font-style: normal;
}

/* Texte facon accueil : 6vw borne 19->30px, line-height 1.5, centre.
   Plus large que l'ancien 60% (illisible), on ouvre a une mesure de lecture. */
.category-catalog__description {
  max-width: min(90%, 60ch);
  /* Espacement ENTRE paragraphes uniquement : le padding vertical du bloc est
     porte par .category-catalog__bloc_text (voir ci-dessus), pas par chaque
     <p>, sinon plusieurs paragraphes creent de gros trous. */
  margin: 0 auto 1.2em;
  padding: 0;
  color: var(--color-text-invert-muted, rgba(255, 255, 255, 0.78));
  font-size: clamp(19px, 6vw, 30px);
  line-height: 1.5;
}

.category-catalog__description:last-child {
  margin-bottom: 0;
}

/* Variante liste a puces du bloc de texte.
   S'utilise sur un <ul> qui porte AUSSI .category-catalog__description :
   la taille, la largeur et la couleur du texte sont ainsi heritees, et le
   theme sombre (dark-theme.css) s'applique sans regle supplementaire.
   Puce dessinee en ::before plutot que list-style : couleur et alignement
   maitrises, et aucun conflit possible avec les styles de liste de Salient. */
.category-catalog__list {
  list-style: none;
  padding: 0;
  margin: 18px auto 0;
  /* La liste ne doit PAS heriter de la taille "diapo" (jusqu'a 30px) du
     bloc description : on la ramene a une taille de lecture normale. */
  font-size: clamp(15px, 1.6vw, 18px);
  max-width: 62ch;
  /* La liste se lit de gauche a droite : on annule le centrage du bloc
     parent sur le texte, tout en gardant le bloc centre dans la page. */
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Amorce en gras. La couleur est definie par theme (cf. dark-theme.css). */
.category-catalog__list strong {
  font-weight: 600;
}

.category-catalog__root {
  display: flex;
  flex-direction: column;
}

.category-catalog__empty {
  margin: 0;
  padding: 0 clamp(16px, 4vw, 56px);
  font-size: var(--font-size-md);
  color: var(--color-text-light);
}

.category-band {
  position: relative;
  overflow: hidden;
  padding: 0 clamp(16px, 4vw, 56px);
}

.category-band__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.category-band__title {
  margin: 0;
  font-family: var(--font-accent);
  font-size: var(--font-size-xl);
  font-weight: 400;
}

.category-band__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.category-nav {
  display: inline-flex;
  gap: 10px;
}

.category-nav__button {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #111;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    transform 180ms ease,
    background 180ms ease,
    opacity 180ms ease,
    border-color 180ms ease;
}

.category-nav__button:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #fff;
  border-color: rgba(0, 0, 0, 0.28);
}

.category-nav__button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.category-carousel {
  /* Laisse le scroll vertical au navigateur, capte l'horizontal pour le geste JS. */
  touch-action: pan-y;
  overflow: hidden;
  position: relative;
}

.category-carousel__track {
  display: flex;
  gap: 12px;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  align-items: flex-start;
}

.category-carousel__item {
  flex: 0 0 var(--category-card-width, clamp(120px, 9vw, 180px));
  width: var(--category-card-width, clamp(120px, 9vw, 180px));
  transition:
    flex-basis 1100ms cubic-bezier(0.22, 1, 0.36, 1),
    width 1100ms cubic-bezier(0.22, 1, 0.36, 1),
    max-width 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}

.category-carousel__item.is-active {
  /* Vignette active : 1.5x une vignette normale (etait 2.5x, trop imposant).
     La hauteur suit via aspect-ratio 2/3. */
  flex-basis: calc(var(--category-card-width, clamp(120px, 9vw, 180px)) * 1.5);
  width: calc(var(--category-card-width, clamp(120px, 9vw, 180px)) * 1.5);
}

.category-entry {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.category-entry__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Focus du carrousel et des vignettes : l'agrandissement de la vignette active
   (.is-active) signale deja le focus. On retire l'outline natif du navigateur
   qui dessinait deux bandes blanches de part et d'autre de la vignette. */
.category-carousel:focus,
.category-carousel:focus-visible,
.category-entry__link:focus,
.category-entry__link:focus-visible {
  outline: none;
}

.category-entry__media {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  /* Hauteur FIGEE en permanence (= largeur de repos x 3/2 = ratio 2:3 au repos).
     Seule la largeur varie au survol : portrait -> paysage sans changer de
     hauteur, ouverture comme fermeture (pas d'aspect-ratio qui glitchait). */
  --media-h: calc(var(--category-card-width, clamp(120px, 9vw, 180px)) * 3 / 2);
  height: var(--media-h);
  margin-bottom: 10px;
  background: #111;
  transition:
    filter 1100ms ease,
    box-shadow 1100ms ease;
}

.category-entry__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.category-entry__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.26) 100%
  );
  opacity: 0;
  transition: opacity 1100ms ease;
}

.category-entry__content {
  padding-inline: 2px;
  min-height: clamp(92px, 8vw, 132px);
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  transition:
    opacity 1100ms ease,
    transform 1100ms ease,
    visibility 0s linear 1100ms;
}

.category-carousel__item.is-active .category-entry__media::after {
  opacity: 1;
}

.category-carousel__item.is-active .category-entry__content {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition:
    opacity 1100ms ease,
    transform 1100ms ease,
    visibility 0s linear 0s;
}

.category-entry__title {
  margin: 0 0 4px;
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: 1.15;
  color: #111;
}

.category-entry__excerpt {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.7);
}

.category-band + .category-band {
  padding-top: 8px;
}

@media (max-width: 1024px) {
  .category-hero__content {
    padding-inline: 6%;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--spacing-lg);
  }
}

@media (min-width: 1200px) {
  .category-carousel {
    --category-card-width: calc((100vw - 140px - (5 * 12px)) / 7);
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .category-carousel {
    /* 1 active (2.5) + 3 inactives + 0.5 teaser = 6 slots, 4 gaps */
    --category-card-width: calc((100vw - 80px - (4 * 12px)) / 6);
  }

  .category-band__head {
    align-items: start;
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .category-hero {
    height: 88vh;
  }

  .category-hero__content {
    bottom: 7%;
    padding-inline: 6%;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--spacing-lg);
  }

  .category-catalog {
    padding-bottom: 72px;
  }

  /* 60% herite de .category-catalog__description devient illisible en etroit. */
  .category-catalog__list {
    max-width: 100%;
  }

  .category-catalog__list > li {
    padding-left: 1.3em;
  }

  .category-band {
    padding-inline: 16px;
  }

  .category-band__meta {
    width: 100%;
    justify-content: space-between;
  }

  .category-nav__button {
    width: 42px;
    height: 42px;
  }

  .category-carousel {
    --category-card-width: 54vw; /* etait 76vw : vignette trop grande sur mobile */
  }

  .category-carousel__item {
    max-width: none;
  }

  .category-carousel__item.is-active {
    flex-basis: var(--category-card-width, 54vw);
    width: var(--category-card-width, 54vw);
  }

  .category-entry__media {
    height: var(--media-h);
  }
}

@media (pointer: coarse) {
  .category-nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .category-carousel__track,
  .category-nav__button,
  .category-entry__media::after,
  .category-entry__media,
  .category-entry__content,
  .category-carousel__item {
    transition: none !important;
  }
}

/* CTA CONTACT */
.category-cta { padding: clamp(3rem,8vw,6rem) 2rem !important; text-align: center !important; }
.category-cta__inner { max-width: 640px; margin: 0 auto; }
.category-cta__title { font-family: var(--font-accent,Georgia,serif); font-size: clamp(1.6rem,3.5vw,2.6rem); font-style: italic; line-height: 1.2; color: #111; margin: 0 0 1rem; }
.category-cta__text { font-size: clamp(1rem,1.6vw,1.15rem); line-height: 1.6; color: #555; margin: 0 0 2rem; }
/* Couleurs (background/color) NON forcees ici : elles sont definies par le
   theme (dark-theme.css impose fond blanc + texte noir sur les pages
   categorie). On ne garde que la forme du bouton, sans !important de couleur
   qui empechait la surcharge par le theme. */
.category-cta__btn { display: inline-block; padding: 16px 42px; text-decoration: none; border-radius: 999px; font-size: 0.95rem; font-weight: 600; background: #111; color: #fff; }
.category-cta__btn:hover { transform: translateY(-2px); opacity: 0.9; }

/* Brique 2 : le hero accepte désormais img / iframe (Vimeo, YouTube) en plus
   de <video>. La classe .category-hero__video leur donne déjà position/taille/
   object-fit ; on neutralise juste bordure et interactions (fond décoratif). */
.category-hero__video {
  border: 0;
}

iframe.category-hero__video {
  pointer-events: none;
}

/* Brique 5 : ancrage /{parent}/#{sub}. Le header Salient est fixe -> on décale
   la cible pour que le titre de section ne passe pas dessous. S'applique à la
   version server-side (.category-section) ET à la version hydratée (.category-band). */
.category-section,
.category-band {
  scroll-margin-top: 110px;
}/* ============================================================
   COMPOSANT « ENCADRÉ COULEUR + MÉDIA » (E2)
   Réutilisable : Films, Podcasts, Photos, Workshops.
   ------------------------------------------------------------
   Reprend la forme de la page d'accueil : texte à gauche sur
   fond colore, media carre a droite. Trois choses sont
   parametrables par page, via des variables posees en inline
   sur .category-feature :
     --feature-bg    : couleur de fond (rouge par defaut)
     --feature-text  : couleur du texte
   Le media (image OU video) se met dans .category-feature__media.
   ============================================================ */

.category-feature {
  /* Parametres par defaut (surchargeables en inline sur l'element). */
  --feature-bg: #a01e1e;
  --feature-text: #ffffff;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 2rem);
  max-width: var(--max-width-content, 1200px);
  margin: clamp(2rem, 5vw, 4rem) auto;
  padding-inline: var(--gutter-page, clamp(16px, 3vw, 48px));
  align-items: stretch;
}

/* Colonne texte, sur fond colore. */
.category-feature__panel {
  background: var(--feature-bg);
  color: var(--feature-text);
  border-radius: clamp(12px, 1.5vw, 20px);
  padding: clamp(1.5rem, 3.5vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.category-feature__title {
  font-family: var(--font-primary, "DM Sans", sans-serif);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  line-height: 1.1;
  margin: 0 0 clamp(1rem, 2vw, 1.6rem);
  color: inherit;
}

.category-feature__text {
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  line-height: 1.65;
  margin: 0 0 1rem;
  color: inherit;
  opacity: 0.92;
}

.category-feature__text:last-child {
  margin-bottom: 0;
}

.category-feature__text strong {
  font-weight: 700;
  opacity: 1;
}

/* Liste et sous-titre a l'interieur de l'encadre (fusion podcasts). */
.category-feature__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.category-feature__list li {
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  line-height: 1.5;
  opacity: .92;
  padding-left: 1.1em;
  position: relative;
}

.category-feature__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: .35em;
  height: .35em;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
}

.category-feature__list strong { font-weight: 700; opacity: 1; }

.category-feature__subtitle {
  font-family: var(--font-primary, "DM Sans", sans-serif);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  margin: 0 0 .8rem;
  color: inherit;
}

/* Colonne media : carree, remplit sa cellule. */
.category-feature__media {
  position: relative;
  border-radius: clamp(12px, 1.5vw, 20px);
  overflow: hidden;
  background: #111;
  aspect-ratio: 1 / 1;
}

.category-feature__media img,
.category-feature__media video,
.category-feature__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}

/* ------------------------------------------------------------
   Responsive : une seule colonne, media au-dessus du texte.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .category-feature {
    grid-template-columns: 1fr;
  }

  /* Media en premier sur mobile (visuel d'accroche), texte ensuite. */
  .category-feature__media {
    order: -1;
  }
}