/* ============================================================================
   PASA MUSIK — COUCHE DE REFONTE VISUELLE
   ----------------------------------------------------------------------------
   Cette feuille de style est chargée EN DERNIER : elle affine le site existant
   sans le réécrire. Aucune police n'est modifiée — « Comfortaa » reste la
   typographie unique du site, héritée partout.

   Sommaire
     00. Jetons de design (couleurs, rythme, ombres)
     01. Réglages de base & accessibilité
     02. Rythme typographique (tailles, interlignages, hiérarchie)
     03. Photographies — cadrage et visibilité des visages
     04. Boutons & liens
     05. En-tête et navigation
     06. Rythme vertical des sections
     07. Hero — bande défilante des artistes + icônes Spotify
     08. Section « Des artistes. Des univers. Des histoires. »
     09. Grille des artistes (page Artistes)
     10. Actualités — bande défilante éditoriale
     11. Partenaires — bande défilante
     12. Infolettre
     13. Boutique / produits
     14. Pied de page
     15. Apparitions au défilement (micro-interactions)
     16. Responsive — tablette & mobile
     17. prefers-reduced-motion
   ========================================================================== */

/* ===========================================================================
   00. JETONS DE DESIGN
   =========================================================================== */
:root {
  /* Identité chromatique existante, inchangée */
  --pm-primary:        #047391;
  --pm-primary-dark:   #03596f;
  --pm-primary-soft:   #e8f2f5;
  --pm-secondary:      #EF4424;
  --pm-secondary-dark: #d23717;
  --pm-accent:         #F3AF20;

  --pm-ink:            #0b2530;
  --pm-ink-2:          #3f5560;
  --pm-ink-3:          #6b7f88;
  --pm-line:           #e3ebee;
  --pm-line-soft:      #eef3f5;
  --pm-surface:        #ffffff;
  --pm-surface-2:      #f6fafb;

  /* Rythme vertical : une seule échelle pour tout le site */
  --pm-s1: 8px;
  --pm-s2: 16px;
  --pm-s3: 24px;
  --pm-s4: 32px;
  --pm-s5: 48px;
  --pm-s6: 64px;
  --pm-s7: 88px;
  --pm-s8: 112px;

  --pm-gutter: 24px;
  --pm-max:    1240px;

  --pm-radius:    14px;
  --pm-radius-sm: 10px;

  --pm-shadow-1: 0 2px 8px rgba(4, 37, 48, .05);
  --pm-shadow-2: 0 10px 30px rgba(4, 37, 48, .08);
  --pm-shadow-3: 0 20px 50px rgba(4, 37, 48, .14);

  --pm-ease: cubic-bezier(.22, .61, .36, 1);
  --pm-t:    .32s var(--pm-ease);
}

/* ===========================================================================
   01. RÉGLAGES DE BASE & ACCESSIBILITÉ
   =========================================================================== */

/* Aucun débordement horizontal involontaire, sur aucun format.
   Le débordement n'est coupé que sur <html> : le poser aussi sur <body>
   empêcherait l'en-tête collant de fonctionner. */
html { max-width: 100%; overflow-x: hidden; }
/* `clip` coupe le débordement SANS créer de conteneur de défilement :
   contrairement à `hidden`, il laisse fonctionner l'en-tête collant. */
body { max-width: 100%; overflow-x: clip !important; }

/* Défilement fluide pour les ancres, sous la barre fixe. */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }

/* Les images ne débordent ni ne se déforment jamais. */
img, svg, video { max-width: 100%; height: auto; }

/* Indicateur de focus visible et homogène — navigation au clavier. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--pm-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sélection de texte aux couleurs de la marque. */
::selection { background: var(--pm-primary); color: #fff; }

/* Barres de défilement discrètes pour les bandes horizontales. */
.pm-scroller {
  scrollbar-width: thin;
  scrollbar-color: var(--pm-line) transparent;
}
.pm-scroller::-webkit-scrollbar        { height: 6px; }
.pm-scroller::-webkit-scrollbar-track  { background: transparent; }
.pm-scroller::-webkit-scrollbar-thumb  { background: var(--pm-line); border-radius: 99px; }
.pm-scroller:hover::-webkit-scrollbar-thumb { background: #cfdce1; }

/* Conteneur éditorial commun. */
.pm-wrap {
  width: 100%;
  max-width: var(--pm-max);
  margin-inline: auto;
  padding-inline: var(--pm-gutter);
  box-sizing: border-box;
}

/* ===========================================================================
   02. RYTHME TYPOGRAPHIQUE
   ---------------------------------------------------------------------------
   La famille typographique n'est JAMAIS redéfinie ici : seuls les tailles,
   graisses relatives, interlignages, approches et marges sont harmonisés.
   =========================================================================== */

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.entry-title {
  line-height: 1.18;
  letter-spacing: -.012em;
  text-wrap: balance;
}
h1, .elementor-widget-heading h1.elementor-heading-title { line-height: 1.1; }
h4, h5, h6 { line-height: 1.3; letter-spacing: -.004em; }

p { text-wrap: pretty; }

/* Largeur de lecture confortable pour les paragraphes éditoriaux. */
.pm-measure { max-width: 68ch; }

/* ===========================================================================
   03. PHOTOGRAPHIES — CADRAGE ET VISIBILITÉ DES VISAGES
   ---------------------------------------------------------------------------
   Règle de fond : une photographie n'est jamais étirée. Elle est recadrée
   (object-fit / background-size: cover) autour d'un point de focalisation
   placé sur le visage, appliqué par pasa-refonte.js via --pm-focal.
   =========================================================================== */

/* Point de focalisation par défaut : tiers supérieur. */
[data-pm-focal] { --pm-focal: 50% 32%; }

img[data-pm-focal] {
  object-fit: cover;
  object-position: var(--pm-focal);
}

[data-pm-focal].elementor-cta__bg,
[data-pm-focal].pm-bg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--pm-focal);
}

/* Aucune image du site ne doit se déformer, même sans point de focalisation. */
.elementor-cta__bg,
.jet-engine-listing-overlay-wrap .elementor-cta__bg {
  background-size: cover;
  background-repeat: no-repeat;
}

/* Rendu de qualité au redimensionnement. */
.pm-hero-card.pm-hero-card .elementor-cta__bg,
.pm-featured__media img,
.pm-actu__media img,
.jet-listing-grid .elementor-cta__bg {
  image-rendering: auto;
}

/* ===========================================================================
   04. BOUTONS & LIENS
   =========================================================================== */

.elementor-button,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.ast-button,
.pm-btn {
  border-radius: 999px !important;
  font-weight: 600;
  letter-spacing: .015em;
  transition: transform var(--pm-t), box-shadow var(--pm-t),
              background-color var(--pm-t), color var(--pm-t), border-color var(--pm-t);
  will-change: transform;
}

.elementor-button:hover,
.wp-element-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.ast-button:hover,
.pm-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--pm-shadow-2);
}

.elementor-button:active,
.wp-element-button:active,
.pm-btn:active { transform: translateY(0); box-shadow: var(--pm-shadow-1); }

/* Bouton générique de la refonte. */
.pm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border: 1px solid transparent;
  background: var(--pm-primary);
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.pm-btn:hover  { background: var(--pm-primary-dark); color: #fff; }
.pm-btn svg    { width: 16px; height: 16px; transition: transform var(--pm-t); }
.pm-btn:hover svg { transform: translateX(4px); }

.pm-btn--ghost {
  background: transparent;
  color: var(--pm-ink);
  border-color: var(--pm-line);
}
.pm-btn--ghost:hover { background: var(--pm-surface-2); color: var(--pm-primary); border-color: var(--pm-primary); }

/* Lien textuel avec soulignement animé. */
.pm-link {
  position: relative;
  color: var(--pm-primary);
  text-decoration: none;
  font-weight: 600;
}
.pm-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--pm-t);
}
.pm-link:hover::after { transform: scaleX(1); }

/* ===========================================================================
   05. EN-TÊTE ET NAVIGATION
   =========================================================================== */

/* En-tête collant : la navigation reste accessible sur toute la page.
   `position: sticky` ne réserve pas d'espace supplémentaire et ne casse
   donc aucune mise en page existante. */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--pm-t), border-color var(--pm-t), background-color var(--pm-t);
}
body.pm-scrolled .elementor-location-header {
  background: rgba(255, 255, 255, .96);
  border-bottom-color: var(--pm-line);
  box-shadow: 0 1px 20px rgba(4, 37, 48, .06);
}

/* Éléments de menu : respiration et indicateur de survol net. */
.elementor-nav-menu--main .elementor-item {
  position: relative;
  letter-spacing: .01em;
  transition: color var(--pm-t);
}
.elementor-nav-menu--main .elementor-item::after {
  content: '';
  position: absolute;
  left: 50%; right: 50%; bottom: 2px;
  height: 2px;
  background: var(--pm-secondary);
  border-radius: 2px;
  transition: left var(--pm-t), right var(--pm-t);
}
.elementor-nav-menu--main .elementor-item:hover::after,
.elementor-nav-menu--main .elementor-item.elementor-item-active::after {
  left: 12px; right: 12px;
}
/* On neutralise le soulignement natif d'Elementor pour éviter le doublon. */
.elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
.elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after { background: transparent; }
.elementor-nav-menu--main .elementor-item::after { background: var(--pm-secondary); }

/* Icônes sociales de l'en-tête : plus discrètes, animation douce. */
.elementor-location-header .elementor-social-icon {
  transition: transform var(--pm-t), opacity var(--pm-t);
  opacity: .72;
}
.elementor-location-header .elementor-social-icon:hover { transform: translateY(-2px); opacity: 1; }

/* Menu déroulant mobile : plus lisible, plus aéré. */
.elementor-nav-menu--dropdown {
  box-shadow: var(--pm-shadow-3);
  border-radius: 0 0 var(--pm-radius) var(--pm-radius);
  overflow: hidden;
}
.elementor-nav-menu--dropdown .elementor-item {
  padding: 16px 22px !important;
  font-size: 16px;
}
/* Les séparateurs en pointillés du thème sont remplacés par un filet net. */
.elementor-nav-menu--dropdown li.menu-item {
  border-bottom: 1px solid var(--pm-line-soft) !important;
}
.elementor-nav-menu--dropdown li.menu-item:last-child { border-bottom: 0 !important; }
.elementor-nav-menu--dropdown .elementor-item:hover,
.elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
  background: var(--pm-surface-2);
}

/* Bouton burger : surface tactile suffisante (≥44px). */
.elementor-menu-toggle {
  min-width: 46px;
  min-height: 46px;
  border-radius: 12px !important;
  transition: background-color var(--pm-t);
}
.elementor-menu-toggle:hover { background: var(--pm-surface-2); }

/* ===========================================================================
   06. RYTHME VERTICAL DES SECTIONS
   ---------------------------------------------------------------------------
   Les sections de la refonte partagent une même échelle d'espacement afin
   d'éliminer les écarts incohérents entre les blocs.
   =========================================================================== */

.pm-section        { padding-block: var(--pm-s7); }
.pm-section--tight { padding-block: var(--pm-s6); }
.pm-section--alt   { background: var(--pm-surface-2); }
.pm-section--line  { border-top: 1px solid var(--pm-line); }

/* En-tête de section réutilisable. */
.pm-head { margin-bottom: var(--pm-s5); }
.pm-head__accent {
  display: block;
  width: 56px; height: 4px;
  border-radius: 2px;
  margin-bottom: var(--pm-s3);
  background: linear-gradient(90deg, var(--pm-primary), var(--pm-secondary));
}
.pm-head__eyebrow {
  display: block;
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pm-primary);
}
.pm-head__title {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  color: var(--pm-ink);
}
.pm-head__lead {
  margin: var(--pm-s2) 0 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--pm-ink-2);
}
.pm-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pm-s4);
  flex-wrap: wrap;
}

/* Flèches de navigation des bandes horizontales. */
.pm-nav { display: flex; gap: 10px; flex: 0 0 auto; }

/* Le thème et Elementor stylent agressivement <button> : on repart de zéro. */
button.pm-nav__btn,
.pm-nav .pm-nav__btn {
  -webkit-appearance: none;
          appearance: none;
  width: 46px;
  height: 46px;
  min-width: 46px;
  padding: 0;
  margin: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--pm-line);
  border-radius: 50% !important;
  background: #fff;
  background-image: none;
  box-shadow: none;
  color: var(--pm-ink);
  font: inherit;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  transition: var(--pm-t);
  transition-property: background-color, color, border-color, transform, opacity;
}
button.pm-nav__btn:hover:not(:disabled),
.pm-nav .pm-nav__btn:hover:not(:disabled) {
  background: var(--pm-primary);
  border-color: var(--pm-primary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: none;
}
button.pm-nav__btn:disabled,
.pm-nav .pm-nav__btn:disabled { opacity: .28; cursor: default; background: #fff; color: var(--pm-ink); }
button.pm-nav__btn svg,
.pm-nav .pm-nav__btn svg { width: 18px; height: 18px; display: block; }

/* ===========================================================================
   07. HERO — BANDE DÉFILANTE DES ARTISTES
   ---------------------------------------------------------------------------
   Cartes agrandies (4:3), défilement plus fluide, visages recadrés,
   dégradé de lisibilité et icône Spotify en superposition.
   =========================================================================== */

.pm-hero.pm-hero { min-height: 0; background: var(--pm-surface); }

.pm-hero__marquee.pm-hero__marquee {
  padding: 0 0 var(--pm-s2);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.pm-hero__track.pm-hero__track {
  gap: 14px;
  animation-duration: 110s;
}
/* La bande se met en pause au survol ET au focus clavier. */
.pm-hero__marquee:hover .pm-hero__track,
.pm-hero__marquee:focus-within .pm-hero__track { animation-play-state: paused; }

/* --- Carte artiste --- */
.pm-hero-card.pm-hero-card {
  width: 440px;
  height: 330px;
  border-radius: var(--pm-radius);
  overflow: hidden;
  box-shadow: var(--pm-shadow-1);
  transition: box-shadow .45s var(--pm-ease), transform .45s var(--pm-ease);
}
.pm-hero-card.pm-hero-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pm-shadow-3);
}
.pm-hero-card.pm-hero-card .elementor-cta__bg { transition: transform .9s var(--pm-ease); }
.pm-hero-card.pm-hero-card:hover .elementor-cta__bg { transform: scale(1.06); }

/* Dégradé bas : le nom reste lisible, le visage reste dégagé. */
.pm-hero-card.pm-hero-card .elementor-cta__bg-overlay {
  background: linear-gradient(to top,
              rgba(4, 37, 48, .80) 0%,
              rgba(4, 37, 48, .42) 28%,
              rgba(4, 37, 48, .06) 56%,
              rgba(4, 37, 48, 0) 100%) !important;
  transition: opacity .45s var(--pm-ease);
}
.pm-hero-card.pm-hero-card:hover .elementor-cta__bg-overlay { opacity: .92; }

/* Le nom descend en bas de carte : il ne masque plus le visage. */
.pm-hero-card.pm-hero-card .elementor-cta__content {
  align-items: flex-end !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding: 22px 24px 20px !important;
}
.pm-hero-card.pm-hero-card .elementor-cta__title {
  /* Le nom est un libellé de carte (div), plus un titre de niveau 3 :
     il garde exactement la même apparence. */
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
  transform: none !important;
  transition: transform .3s var(--pm-ease);
}
.pm-hero-card.pm-hero-card:hover .elementor-cta__title { transform: translateY(-2px) !important; }

/* --- Icône Spotify en superposition --- */
.pm-spotify {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* Fond sombre franc : l'icône reste identifiable au-dessus de n'importe
     quelle photographie, sans alourdir la carte. */
  background: rgba(8, 20, 25, .72);
  backdrop-filter: blur(10px) saturate(60%);
  -webkit-backdrop-filter: blur(10px) saturate(60%);
  border: 1px solid rgba(255, 255, 255, .26);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  color: #fff;
  text-decoration: none;
  opacity: 1;
  transition: var(--pm-t);
  transition-property: background-color, transform, box-shadow, border-color, opacity;
}
.pm-spotify svg { width: 22px; height: 22px; display: block; }
.pm-spotify:hover,
.pm-spotify:focus-visible {
  background: #1DB954;
  border-color: #1DB954;
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 8px 22px rgba(29, 185, 84, .45);
  opacity: 1;
}
.pm-spotify:active { transform: scale(1.02); }

/* Sur carte claire (grille d'artistes), même traitement. */
.pm-spotify--sm { width: 40px; height: 40px; right: 14px; bottom: 14px; }
.pm-spotify--sm svg { width: 20px; height: 20px; }

/* Quand une icône Spotify est présente, on réserve sa place : le nom de
   l'artiste ne passe jamais dessous, même s'il est long. */
.pm-hero-card:has(.pm-spotify) .elementor-cta__content { padding-right: 78px !important; }
.elementor-cta:has(.pm-spotify) .elementor-cta__content { padding-right: 70px !important; }

/* --- Texte d'introduction du hero --- */
.pm-hero__intro { padding: var(--pm-s7) var(--pm-gutter) var(--pm-s6); }
.pm-hero__intro-inner.pm-hero__intro-inner { max-width: 760px; }

/* Titre principal de la page d'accueil (h1) : la page n'en avait aucun,
   ce qui pénalisait fortement le référencement et la lecture d'écran. */
.pm-hero__eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pm-primary);
}
.pm-hero__h1 {
  margin: 0 0 var(--pm-s3);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--pm-ink);
}
.pm-hero__lead.pm-hero__lead {
  font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.5;
  letter-spacing: -.008em;
  margin-bottom: var(--pm-s3);
  color: var(--pm-ink);
}
.pm-hero__body.pm-hero__body {
  font-size: 16px;
  line-height: 1.85;
  color: var(--pm-ink-2);
  margin-bottom: var(--pm-s2);
}
.pm-hero__body.pm-hero__body.pm-hero__closing { color: var(--pm-ink-3); }

/* ===========================================================================
   08. SECTION « DES ARTISTES. DES UNIVERS. DES HISTOIRES. »
   =========================================================================== */

.pm-featured.pm-featured { padding-block: var(--pm-s7) !important; }
.pm-featured__grid.pm-featured__grid { gap: var(--pm-s3) !important; }

.pm-featured__card.pm-featured__card {
  display: block;
  text-decoration: none;
  position: relative;
}
.pm-featured__media.pm-featured__media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--pm-radius);
  background: var(--pm-surface-2);
  box-shadow: var(--pm-shadow-1);
  transition: box-shadow .45s var(--pm-ease), transform .45s var(--pm-ease);
}
.pm-featured__card.pm-featured__card:hover .pm-featured__media.pm-featured__media {
  transform: translateY(-5px);
  box-shadow: var(--pm-shadow-3);
}
.pm-featured__media.pm-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pm-focal, 50% 28%);
  transition: transform .8s var(--pm-ease);
}
.pm-featured__card.pm-featured__card:hover .pm-featured__media.pm-featured__media img { transform: scale(1.05); }

/* Voile bas discret pour asseoir la carte, sans masquer le visage. */
.pm-featured__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(to top, rgba(4, 37, 48, .35), transparent);
  opacity: 0;
  transition: opacity .45s var(--pm-ease);
  pointer-events: none;
}
.pm-featured__card.pm-featured__card:hover .pm-featured__media.pm-featured__media::after { opacity: 1; }

.pm-featured__name.pm-featured__name {
  display: block;
  margin-top: var(--pm-s2);
  font-size: 16px;
  font-weight: 700;
  color: var(--pm-ink);
  transition: color var(--pm-t);
}
.pm-featured__card.pm-featured__card:hover .pm-featured__name.pm-featured__name { color: var(--pm-primary); }

/* ===========================================================================
   09. GRILLE DES ARTISTES (page /artiste/)
   =========================================================================== */

.jet-listing-grid__item .elementor-cta {
  border-radius: var(--pm-radius);
  overflow: hidden;
  box-shadow: var(--pm-shadow-1);
  transition: box-shadow .45s var(--pm-ease), transform .45s var(--pm-ease);
}
.jet-engine-listing-overlay-wrap:hover .elementor-cta {
  transform: translateY(-4px);
  box-shadow: var(--pm-shadow-3);
}
.jet-listing-grid__item .elementor-cta__bg-overlay {
  background: linear-gradient(to top,
              rgba(4, 37, 48, .78) 0%,
              rgba(4, 37, 48, .38) 30%,
              rgba(4, 37, 48, .04) 60%,
              rgba(4, 37, 48, 0) 100%) !important;
}
.jet-listing-grid__item .elementor-cta__content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  text-align: left !important;
  padding: 20px 22px !important;
}
/* Le nom de l'artiste n'apparaissait qu'au survol : invisible au toucher,
   impossible d'identifier un artiste sans passer la souris. Il est désormais
   toujours affiché, comme sur la bande d'accueil. */
.jet-listing-grid__item .elementor-cta__title,
.jet-listing-grid__item .elementor-cta__content-item {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  margin: 0 !important;
  max-height: none !important;
  text-align: left !important;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
  transition: transform .3s var(--pm-ease) !important;
}
.jet-engine-listing-overlay-wrap:hover .elementor-cta__title {
  transform: translateY(-2px) !important;
}

/* Filtres de catégories : pastilles homogènes. */
.jet-filter .jet-checkboxes-list__label,
.jet-smart-filters-radio .jet-radio-list__label,
.jet-filters-group a,
.elementor-widget-jet-smart-filters-checkboxes-list label {
  border-radius: 999px !important;
  transition: var(--pm-t);
  transition-property: background-color, color, border-color, transform;
}

/* ===========================================================================
   10. ACTUALITÉS — BANDE DÉFILANTE ÉDITORIALE
   =========================================================================== */

.pm-actus { background: var(--pm-surface-2); border-block: 1px solid var(--pm-line); }

.pm-actus__viewport {
  position: relative;
  margin-inline: calc(var(--pm-gutter) * -1);
  padding-inline: var(--pm-gutter);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.pm-actus__track {
  display: flex;
  gap: var(--pm-s3);
  padding-block: 6px var(--pm-s2);
  width: max-content;
}

.pm-actu {
  flex: 0 0 auto;
  width: 348px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--pm-shadow-1);
  transition: transform .4s var(--pm-ease), box-shadow .4s var(--pm-ease), border-color .4s var(--pm-ease);
}
.pm-actu:hover {
  transform: translateY(-5px);
  border-color: #d4e2e7;
  box-shadow: var(--pm-shadow-3);
}

.pm-actu__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--pm-primary-soft);
}
.pm-actu__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pm-focal, 50% 32%);
  transition: transform .8s var(--pm-ease);
}
.pm-actu:hover .pm-actu__media img { transform: scale(1.05); }

/* Bannières très larges / logos : affichés en entier, jamais déformés. */
.pm-actu__media--contain {
  background: #fff;
  border-bottom: 1px solid var(--pm-line-soft);
}
.pm-actu__media--contain img {
  object-fit: contain;
  object-position: 50% 50%;
  padding: 14px 18px;
  box-sizing: border-box;
}
.pm-actu:hover .pm-actu__media--contain img { transform: scale(1.02); }

.pm-actu__tag {
  position: absolute;
  top: 14px; left: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pm-primary);
}

.pm-actu__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}
.pm-actu__date {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--pm-ink-3);
}
.pm-actu__title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--pm-ink);
  transition: color var(--pm-t);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pm-actu:hover .pm-actu__title { color: var(--pm-primary); }
.pm-actu__excerpt {
  margin: 0 0 var(--pm-s3);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--pm-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pm-actu__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pm-secondary);
}
.pm-actu__more svg { width: 15px; height: 15px; transition: transform var(--pm-t); }
.pm-actu:hover .pm-actu__more svg { transform: translateX(5px); }

/* État vide — élégant, jamais de fausse publication pour remplir. */
.pm-actus__empty {
  padding: var(--pm-s6) var(--pm-s4);
  text-align: center;
  border: 1px dashed var(--pm-line);
  border-radius: var(--pm-radius);
  background: #fff;
  color: var(--pm-ink-3);
}
.pm-actus__empty strong {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
  color: var(--pm-ink);
}
.pm-actus__empty span { font-size: 15px; }

/* La grille d'origine reste dans la page (et visible si le JavaScript est
   désactivé) ; une fois la bande construite, elle est simplement masquée. */
.pm-actus-source--hidden { display: none !important; }

.pm-actus__actions {
  margin-top: var(--pm-s4);
  display: flex;
  justify-content: flex-start;
}

/* Ancre de navigation décalée sous l'en-tête fixe. */
.pm-anchor { display: block; position: relative; top: -110px; height: 0; }

/* ===========================================================================
   11. PARTENAIRES — BANDE DÉFILANTE
   =========================================================================== */

.pm-partners {
  padding-block: var(--pm-s6);
  background: #fff;
  border-top: 1px solid var(--pm-line);
}
.pm-partners__head {
  text-align: center;
  margin-bottom: var(--pm-s5);
}
.pm-partners__title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pm-ink-3);
}
.pm-partners__rule {
  width: 40px; height: 3px;
  margin: 14px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--pm-primary), var(--pm-secondary));
}

.pm-partners__marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.pm-partners__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: clamp(48px, 7vw, 96px);
  animation: pm-partners-scroll 42s linear infinite;
  will-change: transform;
}
@keyframes pm-partners-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.pm-partners__marquee:hover .pm-partners__track,
.pm-partners__marquee:focus-within .pm-partners__track { animation-play-state: paused; }

.pm-partner {
  --pm-logo-h: 96px;
  --pm-logo-w: 230px;
  --pm-logo-scale: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Hauteur de rangée commune : les logos sont alignés sur une même ligne
     optique, sans jamais être déformés. */
  height: var(--pm-logo-h);
  text-decoration: none;
  transition: transform var(--pm-t), opacity var(--pm-t);
}
.pm-partner img {
  /* width/height auto + contraintes max : le navigateur conserve toujours
     les proportions d'origine du logo. Aucune déformation possible. */
  width: auto;
  height: auto;
  max-height: calc(var(--pm-logo-h) * var(--pm-logo-scale));
  max-width: var(--pm-logo-w);
  display: block;
  filter: grayscale(100%);
  opacity: .7;
  transition: filter var(--pm-t), opacity var(--pm-t);
}
.pm-partner:hover img,
.pm-partner:focus-visible img { filter: grayscale(0%); opacity: 1; }
.pm-partner:hover { transform: scale(1.05); }

/* La version d'origine du widget est remplacée par la bande. */
.pm-partners-source { display: none !important; }

/* ===========================================================================
   12. INFOLETTRE
   =========================================================================== */

.pm-news.pm-news { padding-block: var(--pm-s7); background: var(--pm-surface-2); }
.pm-news__inner.pm-news__inner { max-width: var(--pm-max); gap: var(--pm-s6); }
.pm-news__title.pm-news__title { font-size: clamp(26px, 3vw, 36px); letter-spacing: -.015em; }
.pm-news__panel.pm-news__panel {
  border-radius: var(--pm-radius);
  box-shadow: var(--pm-shadow-2);
  border-color: var(--pm-line);
}
.pm-news__input.pm-news__input {
  border-radius: var(--pm-radius-sm) !important;
  transition: border-color var(--pm-t), box-shadow var(--pm-t);
}
.pm-news__input:focus {
  border-color: var(--pm-primary) !important;
  box-shadow: 0 0 0 3px rgba(4, 115, 145, .14);
  outline: none;
}
.pm-news__submit.pm-news__submit {
  border-radius: 999px !important;
  transition: transform var(--pm-t), box-shadow var(--pm-t), background-color var(--pm-t);
}
.pm-news__submit.pm-news__submit:hover { transform: translateY(-2px); box-shadow: var(--pm-shadow-2); }

/* ===========================================================================
   12 bis. PAGE D'ACCUEIL — RYTHME DES SECTIONS EXISTANTES
   ---------------------------------------------------------------------------
   Corrections ciblées sur les sections Elementor de l'accueil : largeur de
   lecture, marges cohérentes, aucune suppression de contenu.
   =========================================================================== */

/* Bloc de présentation : la ligne faisait toute la largeur de l'écran,
   ce qui rendait la lecture pénible. On la ramène à une mesure éditoriale. */
.elementor-element-6c32370 { padding-block: var(--pm-s7) !important; }
.elementor-element-6c32370 .elementor-widget-text-editor {
  max-width: 78ch;
  margin-inline: auto;
}
.elementor-element-6c32370 .elementor-widget-text-editor p {
  line-height: 1.85;
  margin-bottom: var(--pm-s2);
}
.elementor-element-6c32370 .elementor-widget-button { margin-top: var(--pm-s3); }

/* Bandeau des trois univers (Shauit / Mehdi Cayenne / Sanou Lasso).
   Les trois visuels débordaient de leur colonne et se chevauchaient, avec un
   décalage vertical au centre. On rétablit une grille nette et alignée. */
.elementor-element-853e627 { padding-block: var(--pm-s6) !important; }

.elementor-element-853e627 > .elementor-container {
  align-items: flex-start !important;
}
/* Marges héritées de l'ancien chevauchement (150px en haut) : supprimées. */
.elementor-element-853e627 .elementor-inner-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.elementor-element-853e627 .elementor-inner-column {
  margin: 0 !important;
  height: auto !important;
}
.elementor-element-853e627 .elementor-inner-column > .elementor-widget-wrap {
  padding: 0 10px !important;
}
.elementor-element-853e627 .elementor-widget-image,
.elementor-element-853e627 .elementor-widget-image .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  inset: auto !important;
  position: static !important;
}
.elementor-element-853e627 .elementor-widget-image img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  transform: none;
  border-radius: var(--pm-radius);
  box-shadow: var(--pm-shadow-1);
  transition: transform .5s var(--pm-ease), box-shadow .5s var(--pm-ease);
}
.elementor-element-853e627 a:hover img {
  transform: translateY(-5px);
  box-shadow: var(--pm-shadow-3);
}

/* Section boutique de l'accueil. */
.elementor-element-77004c5 { padding-block: var(--pm-s7) !important; }

/* ===========================================================================
   12 ter. ARTICLES — CONFORT DE LECTURE
   ---------------------------------------------------------------------------
   Les paragraphes des articles s'étiraient sur près de 95 signes par ligne.
   On les ramène à une mesure éditoriale, sans toucher aux médias pleine
   largeur ni à la typographie.
   =========================================================================== */

/* Titres et paragraphes partagent la MÊME colonne de lecture : leurs bords
   gauches sont alignés, ce qui n'était pas le cas auparavant. */
body.single-post .elementor-widget-text-editor > .elementor-widget-container,
body.single-post .elementor-widget-theme-post-content > .elementor-widget-container,
body.single-post .elementor-widget-heading > .elementor-widget-container {
  max-width: 72ch;
  margin-inline: auto;
}
body.single-post .elementor-widget-text-editor p,
body.single-post .elementor-widget-theme-post-content p {
  line-height: 1.85;
  margin-bottom: 1.15em;
}

/* Les titres intermédiaires d'article retrouvent de l'air. */
body.single-post h2, body.single-post h3 {
  margin-top: 1.6em;
  margin-bottom: .5em;
}

/* ===========================================================================
   13. BOUTIQUE / PRODUITS
   =========================================================================== */

.jet-woo-builder .jet-woo-product-thumbnail,
.woocommerce ul.products li.product a img {
  border-radius: var(--pm-radius-sm);
  overflow: hidden;
  transition: transform .6s var(--pm-ease);
}
.jet-woo-builder .jet-woo-products__item:hover .jet-woo-product-thumbnail img,
.woocommerce ul.products li.product:hover a img { transform: scale(1.03); }

/* ===========================================================================
   14. PIED DE PAGE
   =========================================================================== */

.elementor-location-footer a { transition: color var(--pm-t), opacity var(--pm-t); }
.elementor-location-footer a:hover { opacity: .78; }

/* ===========================================================================
   15. APPARITIONS AU DÉFILEMENT
   ---------------------------------------------------------------------------
   Très léger : une seule transformation composite (opacity + translate),
   déclenchée une fois, puis la classe est retirée de l'observation.
   =========================================================================== */

.pm-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .65s var(--pm-ease), transform .65s var(--pm-ease);
  will-change: opacity, transform;
}
.pm-reveal.pm-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}
.pm-reveal-d1 { transition-delay: .07s; }
.pm-reveal-d2 { transition-delay: .14s; }
.pm-reveal-d3 { transition-delay: .21s; }
.pm-reveal-d4 { transition-delay: .28s; }

/* Si le JavaScript ne s'exécute pas, rien n'est jamais masqué. */
html:not(.pm-js) .pm-reveal { opacity: 1; transform: none; }

/* ===========================================================================
   16. RESPONSIVE — TABLETTE & MOBILE
   =========================================================================== */

@media (max-width: 1200px) {
  .pm-hero-card.pm-hero-card.pm-hero-card { width: 400px; height: 300px; }
}

@media (max-width: 1024px) {
  :root { --pm-s7: 72px; --pm-s8: 88px; --pm-gutter: 22px; }

  .pm-hero-card.pm-hero-card.pm-hero-card { width: 340px; height: 255px; border-radius: 12px; }
  .pm-hero-card.pm-hero-card .elementor-cta__title { font-size: 19px; }
  .pm-hero-card.pm-hero-card .elementor-cta__content { padding: 18px 20px 16px !important; }
  .pm-spotify { width: 42px; height: 42px; right: 14px; bottom: 14px; }

  .pm-hero__intro.pm-hero__intro { padding: var(--pm-s6) var(--pm-gutter) var(--pm-s5); }

  .pm-news__inner.pm-news__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pm-s4);
  }

  .pm-actu { width: 320px; }
  .pm-partner { --pm-logo-h: 80px; --pm-logo-w: 190px; }
}

@media (max-width: 767px) {
  :root {
    --pm-s6: 48px;
    --pm-s7: 56px;
    --pm-s8: 64px;
    --pm-gutter: 20px;
  }

  /* --- Hero --- */
  .pm-hero-card.pm-hero-card { width: 268px; height: 201px; }
  .pm-hero-card.pm-hero-card .elementor-cta__content { padding: 14px 16px 13px !important; }
  .pm-hero-card.pm-hero-card .elementor-cta__title { font-size: 16px; }
  .pm-hero__track.pm-hero__track { gap: 10px; animation-duration: 75s; }

  /* Icône Spotify : cible tactile confortable, toujours au-dessus du nom. */
  .pm-spotify {
    width: 42px; height: 42px;
    right: 10px; bottom: 10px;
    background: rgba(8, 20, 25, .78);
  }
  .pm-spotify svg { width: 20px; height: 20px; }

  .pm-hero__lead.pm-hero__lead { font-size: 18px; line-height: 1.52; }
  .pm-hero__body.pm-hero__body { font-size: 15px; line-height: 1.78; }

  /* --- En-têtes de section --- */
  .pm-head { margin-bottom: var(--pm-s4); }
  .pm-head__row { align-items: flex-start; gap: var(--pm-s3); }
  .pm-head__title { font-size: 26px; }
  .pm-head__lead { font-size: 15px; }

  /* Les flèches laissent place au geste tactile. */
  .pm-nav { display: none; }

  /* --- Actualités --- */
  .pm-actu { width: min(84vw, 320px); }
  .pm-actu__body { padding: 20px 20px 22px; }
  .pm-actu__title { font-size: 17px; }

  /* --- Partenaires --- */
  .pm-partners { padding-block: var(--pm-s5); }
  .pm-partners__head { margin-bottom: var(--pm-s4); }
  .pm-partners__track { gap: 44px; animation-duration: 30s; }
  .pm-partner { --pm-logo-h: 66px; --pm-logo-w: 160px; }
  .pm-partner img { opacity: .82; }

  /* --- Section artistes en vedette --- */
  .pm-featured__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  .pm-featured__name.pm-featured__name { font-size: 14px; }

  /* --- Boutons --- */
  .pm-btn { padding: 13px 24px; font-size: 13.5px; }

  /* Aucun texte coupé. */
  .pm-head__title, .pm-actu__title, .pm-hero__lead { overflow-wrap: break-word; }
}

@media (max-width: 420px) {
  .pm-featured__grid.pm-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .pm-hero-card.pm-hero-card.pm-hero-card { width: 232px; height: 174px; }
  .pm-hero-card.pm-hero-card .elementor-cta__title { font-size: 15px; }
}

/* ===========================================================================
   17. prefers-reduced-motion
   ---------------------------------------------------------------------------
   Respect strict : plus aucun mouvement automatique ni transformation.
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .pm-hero__track.pm-hero__track,
  .pm-partners__track { animation: none !important; transform: none !important; }

  /* Les bandes ne défilent plus toutes seules : elles restent parcourables
     à la main, horizontalement. */
  .pm-hero__marquee.pm-hero__marquee,
  .pm-partners__marquee.pm-partners__marquee {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .pm-reveal { opacity: 1 !important; transform: none !important; }

  .pm-hero-card.pm-hero-card:hover,
  .pm-actu:hover,
  .pm-partner:hover,
  .elementor-button:hover,
  .pm-btn:hover { transform: none !important; }
}

/* ===========================================================================
   ===========================================================================
   PARTIE 2 — SECOND PASSAGE DE FINITION
   ---------------------------------------------------------------------------
   Nettoyage plus poussé de l'ensemble du site : en-têtes de page, grilles,
   filtres, boutique, formulaires, pied de page et micro-typographie.
   Toujours sans toucher à la typographie (Comfortaa) ni à l'identité
   chromatique.

     18. En-têtes de page (bannières de section)
     19. Grilles de listing — largeur et gouttières
     20. Filtres et tris
     21. Boutique — cartes produit
     22. Barre infolettre
     23. Pied de page
     24. Formulaires
     25. Blocs de contenu externe bloqué (cookies)
     26. Micro-typographie et détails
     27. Responsive de la partie 2
   ===========================================================================
   =========================================================================== */

/* ===========================================================================
   18. EN-TÊTES DE PAGE
   ---------------------------------------------------------------------------
   Avant : une bande illustrée de 150 px, titre minuscule collé dans l'angle,
   contraste faible. Après : un en-tête ample, le titre lisible sur un voile
   dégradé, aligné sur la grille du site.
   =========================================================================== */

.pm-pagehead.pm-pagehead {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 240px;
  padding: var(--pm-s6) 0 var(--pm-s5) !important;
  overflow: hidden;
  background-color: var(--pm-primary-dark);
  isolation: isolate;
}

/* Voile dégradé : l'illustration reste perceptible, le titre devient net. */
.pm-pagehead.pm-pagehead::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(2, 40, 51, .88) 0%, rgba(2, 40, 51, .52) 55%, rgba(2, 40, 51, .34) 100%);
}

/* L'image de fond animée est figée et légèrement désaturée. */
.pm-pagehead .elementor-motion-effects-container,
.pm-pagehead .elementor-motion-effects-layer {
  transform: none !important;
  filter: saturate(.85) contrast(1.02);
}

.pm-pagehead > .e-con-inner,
.pm-pagehead > .elementor-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--pm-max) !important;
  margin-inline: auto;
  padding-inline: var(--pm-gutter);
  box-sizing: border-box;
}

/* Filet d'accent au-dessus du titre. */
.pm-pagehead__title::before {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  margin-bottom: 18px;
  background: linear-gradient(90deg, #fff, var(--pm-accent));
}

.pm-pagehead .pm-pagehead__title {
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(32px, 4.4vw, 52px) !important;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-shadow: 0 2px 24px rgba(0, 24, 32, .45);
}

/* ===========================================================================
   19. GRILLES DE LISTING — LARGEUR ET GOUTTIÈRES
   ---------------------------------------------------------------------------
   Les grilles d'artistes et de produits s'étalaient d'un bord à l'autre de
   l'écran, avec 10 px entre les cartes. Elles rejoignent la grille du site.
   =========================================================================== */

.jet-listing-grid__items {
  max-width: var(--pm-max);
  margin-inline: auto !important;
  padding-inline: calc(var(--pm-gutter) - 12px);
  box-sizing: border-box;
}
.jet-listing-grid__item { padding: 12px !important; }

/* La section qui porte la grille retrouve un rythme vertical régulier. */
.elementor-widget-jet-listing-grid { padding-block: 0; }

/* ===========================================================================
   20. FILTRES ET TRIS
   =========================================================================== */

/* -- Pastilles de catégories (page Artistes) -- */
.jet-filter-items,
.jet-checkboxes-list,
.jet-radio-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.jet-filter-items a,
.jet-checkboxes-list__label,
.jet-radio-list__label,
.jet-filters-group a {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px !important;
  border: 1px solid var(--pm-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--pm-ink-2) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--pm-t);
  transition-property: background-color, color, border-color, transform, box-shadow;
}
.jet-filter-items a:hover,
.jet-checkboxes-list__label:hover,
.jet-radio-list__label:hover,
.jet-filters-group a:hover {
  border-color: var(--pm-primary) !important;
  color: var(--pm-primary) !important;
  transform: translateY(-1px);
  box-shadow: var(--pm-shadow-1);
}
.jet-filter-items a.active,
.jet-filters-group a.active,
.jet-filter-items .active a {
  background: var(--pm-primary) !important;
  border-color: var(--pm-primary) !important;
  color: #fff !important;
}

/* -- Listes déroulantes (Boutique : type de produit, tri) -- */
.jet-select__control,
.jet-sorting-select,
.woocommerce-ordering select,
select.jet-select__control {
  -webkit-appearance: none;
          appearance: none;
  padding: 12px 42px 12px 18px !important;
  border: 1px solid var(--pm-line) !important;
  border-radius: 999px !important;
  background-color: #fff !important;
  color: var(--pm-ink) !important;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  /* Chevron dessiné en CSS : aucune ressource externe. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--pm-ink-2) 50%),
    linear-gradient(135deg, var(--pm-ink-2) 50%, transparent 50%);
  background-position: right 20px center, right 14px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  transition: border-color var(--pm-t), box-shadow var(--pm-t);
}
.jet-select__control:hover,
.jet-sorting-select:hover { border-color: #cfdce1 !important; }
.jet-select__control:focus,
.jet-sorting-select:focus {
  border-color: var(--pm-primary) !important;
  box-shadow: 0 0 0 3px rgba(4, 115, 145, .14);
  outline: none;
}

/* La barre de filtres devient un vrai bandeau aligné sur la grille. */
.elementor-widget-jet-smart-filters-select,
.elementor-widget-jet-smart-filters-sorting { margin-bottom: 0; }

/* ===========================================================================
   21. BOUTIQUE — CARTES PRODUIT
   ---------------------------------------------------------------------------
   Les produits flottaient sans cadre, prix et titres sans hiérarchie.
   Ils deviennent des cartes nettes, de hauteur égale.
   =========================================================================== */

.jet-listing-grid__item .elementor-element-23a91b2 {
  height: 100%;
  background: #fff;
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius);
  overflow: hidden;
  transition: transform .4s var(--pm-ease), box-shadow .4s var(--pm-ease), border-color .4s var(--pm-ease);
}
.jet-listing-grid__item:hover .elementor-element-23a91b2 {
  transform: translateY(-5px);
  border-color: #d4e2e7;
  box-shadow: var(--pm-shadow-3);
}

/* Visuel : toujours carré, jamais déformé, sur fond neutre. */
.jet-listing-grid__item .elementor-element-23a91b2 .elementor-widget-image img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 50%;
  background: var(--pm-surface-2);
  transition: transform .7s var(--pm-ease);
}
.jet-listing-grid__item:hover .elementor-element-23a91b2 .elementor-widget-image img {
  transform: scale(1.04);
}

/* Titre du produit. */
.jet-listing-grid__item .elementor-element-23a91b2 .elementor-heading-title {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--pm-ink);
  transition: color var(--pm-t);
}
.jet-listing-grid__item:hover .elementor-element-23a91b2 .elementor-heading-title {
  color: var(--pm-primary);
}

/* Prix (sa position dans la carte est fixée à la section 29). */
.jet-listing-grid__item .elementor-element-23a91b2 .elementor-widget-jet-listing-dynamic-field {
  font-weight: 700;
  color: var(--pm-primary);
  letter-spacing: .01em;
}

/* ===========================================================================
   22. BARRE INFOLETTRE (pied de page)
   =========================================================================== */

.elementor-element-b0b9c95 {
  padding-block: var(--pm-s6) !important;
  background: linear-gradient(135deg, var(--pm-primary) 0%, var(--pm-primary-dark) 100%) !important;
}
.elementor-element-b0b9c95 .elementor-container {
  align-items: center;
  gap: var(--pm-s4);
}
.elementor-element-b0b9c95 h2,
.elementor-element-b0b9c95 .elementor-heading-title,
.elementor-element-b0b9c95 .elementor-widget-text-editor {
  color: #fff;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.elementor-element-b0b9c95 input[type="text"],
.elementor-element-b0b9c95 input[type="email"] {
  border: 1px solid rgba(255, 255, 255, .34) !important;
  border-radius: var(--pm-radius-sm) !important;
  background: rgba(255, 255, 255, .1) !important;
  color: #fff !important;
  padding: 13px 16px !important;
  transition: border-color var(--pm-t), background-color var(--pm-t), box-shadow var(--pm-t);
}
.elementor-element-b0b9c95 input::placeholder { color: rgba(255, 255, 255, .72); }
.elementor-element-b0b9c95 input:focus {
  border-color: #fff !important;
  background: rgba(255, 255, 255, .18) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .18);
  outline: none;
}
.elementor-element-b0b9c95 button,
.elementor-element-b0b9c95 .elementor-button {
  border-radius: 999px !important;
  padding: 13px 30px !important;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ===========================================================================
   23. PIED DE PAGE
   =========================================================================== */

.elementor-element-0d604b2 { padding-block: var(--pm-s7) var(--pm-s6) !important; }

.elementor-location-footer .elementor-widget-heading .elementor-heading-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pm-ink-3);
}

.elementor-location-footer .elementor-icon-list-items { gap: 2px; }
.elementor-location-footer .elementor-icon-list-item { margin-bottom: 0 !important; }
.elementor-location-footer .elementor-icon-list-item > a {
  display: inline-block;
  padding: 7px 0;
  color: var(--pm-ink-2);
  font-size: 15px;
  text-decoration: none;
  transition: color var(--pm-t), transform var(--pm-t);
}
.elementor-location-footer .elementor-icon-list-item > a:hover {
  color: var(--pm-primary);
  transform: translateX(3px);
  opacity: 1;
}

.elementor-location-footer .elementor-widget-text-editor {
  font-size: 15px;
  line-height: 1.8;
  color: var(--pm-ink-2);
  max-width: 46ch;
}

/* Mentions légales : séparées par un filet, discrètes. */
.elementor-element-23aad954 {
  padding-block: var(--pm-s3) !important;
  border-top: 1px solid var(--pm-line);
  font-size: 13px;
  color: var(--pm-ink-3);
}
.elementor-element-23aad954 a {
  color: var(--pm-ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--pm-line);
}
.elementor-element-23aad954 a:hover {
  color: var(--pm-primary);
  text-decoration-color: currentColor;
}

/* ===========================================================================
   24. FORMULAIRES
   =========================================================================== */

.elementor-field-group input[type="text"],
.elementor-field-group input[type="email"],
.elementor-field-group input[type="tel"],
.elementor-field-group select,
.elementor-field-group textarea {
  border: 1px solid var(--pm-line) !important;
  border-radius: var(--pm-radius-sm) !important;
  padding: 13px 15px !important;
  font: inherit;
  font-size: 15px;
  color: var(--pm-ink);
  background: #fff;
  transition: border-color var(--pm-t), box-shadow var(--pm-t);
}
.elementor-field-group input:focus,
.elementor-field-group select:focus,
.elementor-field-group textarea:focus {
  border-color: var(--pm-primary) !important;
  box-shadow: 0 0 0 3px rgba(4, 115, 145, .14);
  outline: none;
}
.elementor-field-group textarea { min-height: 150px; line-height: 1.6; }

.elementor-field-group > label,
.elementor-field-label {
  margin-bottom: 7px !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--pm-ink-2);
}

/* Cases à cocher et consentement : alignement propre. */
.elementor-field-type-acceptance .elementor-field-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--pm-ink-2);
}
.elementor-field-type-acceptance input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--pm-primary);
  flex: 0 0 auto;
}

/* ===========================================================================
   25. CONTENU EXTERNE BLOQUÉ (cookies)
   ---------------------------------------------------------------------------
   Le bloc d'avertissement avait l'air d'un message d'erreur : il devient
   une note posée et cohérente avec le reste du site.
   =========================================================================== */

.elementor-element-5b8c963 { padding-block: var(--pm-s5) !important; }
.elementor-element-5b8c963 .elementor-widget-container {
  max-width: 640px;
  margin-inline: auto;
}

/* ===========================================================================
   26. MICRO-TYPOGRAPHIE ET DÉTAILS
   ---------------------------------------------------------------------------
   Toujours la même police : on travaille uniquement l'approche, les filets,
   les listes et les états.
   =========================================================================== */

/* Les libellés en capitales ont besoin d'air entre les lettres. */
.elementor-button,
.pm-btn,
.jet-woo-builder .button {
  text-rendering: optimizeLegibility;
}

/* Filets horizontaux discrets. */
hr, .elementor-divider-separator {
  border: 0;
  border-top: 1px solid var(--pm-line);
  opacity: 1;
}

/* Listes de contenu éditorial. */
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol { padding-left: 1.2em; margin-bottom: 1.1em; }
.elementor-widget-text-editor li { margin-bottom: .45em; line-height: 1.75; }

/* Citations. */
blockquote {
  margin: var(--pm-s4) 0;
  padding: 4px 0 4px var(--pm-s3);
  border-left: 3px solid var(--pm-primary);
  color: var(--pm-ink);
  font-style: normal;
}

/* Liens dans le corps de texte : lisibles, soulignement maîtrisé. */
.elementor-widget-text-editor a:not(.elementor-button),
.elementor-widget-theme-post-content a:not(.elementor-button) {
  color: var(--pm-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--pm-t), text-decoration-color var(--pm-t);
}
.elementor-widget-text-editor a:not(.elementor-button):hover,
.elementor-widget-theme-post-content a:not(.elementor-button):hover {
  color: var(--pm-secondary);
}

/* Icônes sociales du pied de page : même langage que l'en-tête. */
.elementor-location-footer .elementor-social-icon {
  transition: transform var(--pm-t), opacity var(--pm-t);
  opacity: .75;
}
.elementor-location-footer .elementor-social-icon:hover { transform: translateY(-2px); opacity: 1; }

/* Panier : pastille de quantité plus nette. */
.elementor-button-icon-qty {
  font-weight: 700;
  letter-spacing: 0;
}

/* Images de contenu : coins adoucis, cohérents avec les cartes. */
.elementor-widget-theme-post-content img,
body.single-post .elementor-widget-image img {
  border-radius: var(--pm-radius-sm);
}

/* ===========================================================================
   27. RESPONSIVE DE LA PARTIE 2
   =========================================================================== */

@media (max-width: 1024px) {
  .pm-pagehead.pm-pagehead { min-height: 200px; padding: var(--pm-s5) 0 var(--pm-s4) !important; }
  .elementor-element-0d604b2 { padding-block: var(--pm-s6) var(--pm-s5) !important; }
}

@media (max-width: 767px) {
  .pm-pagehead.pm-pagehead { min-height: 158px; padding: var(--pm-s4) 0 var(--pm-s3) !important; }
  .pm-pagehead .pm-pagehead__title { font-size: 28px !important; }
  .pm-pagehead__title::before { width: 44px; height: 3px; margin-bottom: 14px; }

  .jet-listing-grid__items { padding-inline: calc(var(--pm-gutter) - 8px); }
  .jet-listing-grid__item { padding: 8px !important; }

  .jet-filter-items,
  .jet-checkboxes-list,
  .jet-radio-list { gap: 8px; }
  .jet-filter-items a,
  .jet-checkboxes-list__label,
  .jet-radio-list__label { padding: 9px 16px !important; font-size: 13px; }

  .elementor-element-b0b9c95 { padding-block: var(--pm-s5) !important; }
  .elementor-element-0d604b2 { padding-block: var(--pm-s5) var(--pm-s4) !important; }
  .elementor-element-23aad954 { font-size: 12.5px; text-align: center; }

  .elementor-location-footer .elementor-widget-text-editor { max-width: none; }
}

/* ===========================================================================
   28. CORRECTIFS CIBLÉS SUR D'ANCIENNES RÈGLES
   ---------------------------------------------------------------------------
   Le thème conservait des règles « !important » héritées de versions
   précédentes. On les neutralise une à une, en nommant chaque cas.
   =========================================================================== */

/* Le nom des artistes était figé à 12 px par une ancienne règle
   (.elementor-element-01e1747 .hover-artiste-img h3), ce qui le rendait
   presque illisible sur des cartes de 460 px de large. */
.jet-listing-grid__item .jet-engine-listing-overlay-wrap .hover-artiste-img .elementor-cta .elementor-cta__content h3.elementor-cta__title,
.jet-listing-grid__item .jet-engine-listing-overlay-wrap .elementor-cta .elementor-cta__content h3.elementor-cta__title,
.jet-listing-grid__item .elementor-cta__title.elementor-cta__title {
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em !important;
}

@media (max-width: 1024px) {
  .jet-listing-grid__item .jet-engine-listing-overlay-wrap .hover-artiste-img .elementor-cta__content h3.elementor-cta__title,
.jet-listing-grid__item .jet-engine-listing-overlay-wrap .elementor-cta .elementor-cta__content h3.elementor-cta__title,
  .jet-listing-grid__item h3.elementor-cta__title,
  .jet-listing-grid__item .elementor-cta__title.elementor-cta__title {
    font-size: 19px !important;
  }
}
@media (max-width: 767px) {
  .jet-listing-grid__item .jet-engine-listing-overlay-wrap .hover-artiste-img .elementor-cta__content h3.elementor-cta__title,
.jet-listing-grid__item .jet-engine-listing-overlay-wrap .elementor-cta .elementor-cta__content h3.elementor-cta__title,
  .jet-listing-grid__item h3.elementor-cta__title,
  .jet-listing-grid__item .elementor-cta__title.elementor-cta__title {
    font-size: 18px !important;
  }
}

/* ===========================================================================
   29. BOUTIQUE — ORDRE ET HIÉRARCHIE DE LA CARTE PRODUIT
   ---------------------------------------------------------------------------
   Le gabarit d'origine affichait le PRIX en premier, aligné à droite au-dessus
   du visuel, puis l'image, puis le titre. On rétablit l'ordre attendu
   (visuel → titre → prix) et des cartes de hauteur égale.
   =========================================================================== */

.jet-listing-grid__item .elementor-element-23a91b2 .elementor-container,
.jet-listing-grid__item .elementor-element-23a91b2 .elementor-column,
.jet-listing-grid__item .elementor-element-23a91b2 .elementor-widget-wrap { height: 100%; }

.jet-listing-grid__item .elementor-element-23a91b2 .elementor-widget-wrap {
  display: flex !important;
  flex-direction: column;
  align-content: stretch;
  padding: 0 !important;
}

/* Les gabarits de liste portent des identifiants différents selon la page :
   on raisonne donc sur le TYPE de widget, jamais sur son identifiant. */

/* 1. le visuel, à fleur de carte */
.jet-listing-grid__item .elementor-element-23a91b2 .elementor-widget-image {
  order: 1;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* 2. le titre — selon le gabarit, c'est un widget « titre » posé directement
      dans la carte, ou une section interne qui le contient. Les deux cas sont
      traités. */
.jet-listing-grid__item .elementor-element-23a91b2 > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-heading,
.jet-listing-grid__item .elementor-element-23a91b2 > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-inner-section {
  order: 2;
  width: 100% !important;
  margin: 0 !important;
  padding: 18px 20px 0 !important;
}
/* La section interne ne rajoute pas ses propres marges. */
.jet-listing-grid__item .elementor-element-23a91b2 .elementor-inner-section .elementor-widget-wrap {
  padding: 0 !important;
}
.jet-listing-grid__item .elementor-element-23a91b2 .elementor-inner-section .elementor-widget-heading {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
/* 3. le prix, poussé en bas de carte */
.jet-listing-grid__item .elementor-element-23a91b2 .elementor-widget-jet-listing-dynamic-field {
  order: 3;
  width: 100% !important;
  margin: auto 0 0 !important;
  padding: 10px 20px 20px !important;
}

/* Le prix redevient un repère lisible, aligné à gauche avec le titre.
   Le gabarit le poussait à droite via justify-content: flex-end. */
.jet-listing-grid__item .elementor-element-23a91b2 .jet-listing-dynamic-field {
  justify-content: flex-start !important;
}
.jet-listing-grid__item .elementor-element-23a91b2 .jet-listing-dynamic-field__content,
.jet-listing-grid__item .elementor-element-23a91b2 .jet-listing-dynamic-field__inline-wrap {
  text-align: left !important;
  font-size: 16px;
  font-weight: 700;
  color: var(--pm-primary);
  letter-spacing: .01em;
}

/* Titre sur deux lignes au maximum : toutes les cartes s’alignent. */
.jet-listing-grid__item .elementor-element-23a91b2 .elementor-heading-title {
  min-height: 2.8em;
  text-align: left !important;
}

/* ===========================================================================
   30. BARRE DE FILTRES DE LA BOUTIQUE
   =========================================================================== */

.elementor-widget-jet-smart-filters-select .jet-filter,
.elementor-widget-jet-smart-filters-sorting .jet-filter { margin-bottom: 0; }

.jet-filter-label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pm-ink-3);
}

/* ===========================================================================
   31. BARRE INFOLETTRE — ALIGNEMENT DU FORMULAIRE
   ---------------------------------------------------------------------------
   Les trois champs occupaient une ligne et le bouton une seconde, désaxé.
   Ils forment désormais une seule ligne cohérente.
   =========================================================================== */

.elementor-element-b0b9c95 .elementor-form-fields-wrapper {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 0 !important;
}
.elementor-element-b0b9c95 .elementor-field-group {
  flex: 1 1 110px;
  min-width: 0;            /* sans cela, un champ flex refuse de rétrécir */
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.elementor-element-b0b9c95 .elementor-field-group input { width: 100%; min-width: 0; }
.elementor-element-b0b9c95 .elementor-field-group.elementor-field-type-submit {
  flex: 0 0 auto;
  width: auto !important;
}
.elementor-element-b0b9c95 .elementor-field-group.elementor-field-type-submit button {
  white-space: nowrap;
}

/* ===========================================================================
   32. PIED DE PAGE — TITRES DE COLONNE
   ---------------------------------------------------------------------------
   22 px avec 3 px d'interlettrage : les intitulés pesaient plus lourd que le
   contenu qu'ils annoncent. On les ramène à leur rôle de repère.
   =========================================================================== */

.elementor-location-footer .elementor-widget-heading .elementor-heading-title,
.elementor-location-footer .elementor-widget-heading h1.elementor-heading-title,
.elementor-location-footer .elementor-widget-heading h2.elementor-heading-title,
.elementor-location-footer .elementor-widget-heading h3.elementor-heading-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  line-height: 1.4 !important;
  color: var(--pm-primary) !important;
  margin-bottom: 6px;
}

/* Mentions légales : plus discrètes encore, et pas en capitales forcées. */
.elementor-element-23aad954 .elementor-heading-title {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  color: var(--pm-ink-3) !important;
}

@media (max-width: 767px) {
  .elementor-element-b0b9c95 .elementor-field-group { flex: 1 1 100%; }
  .elementor-element-b0b9c95 .elementor-field-group.elementor-field-type-submit { width: 100% !important; }
  .elementor-element-b0b9c95 .elementor-field-group.elementor-field-type-submit button { width: 100%; }
}

/* ===========================================================================
   33. FILTRES — SUPPRESSION DU DOUBLE CADRE
   ---------------------------------------------------------------------------
   Chaque filtre était composé d'un cadre carré bleu (.jet-radio-list__button)
   contenant une étiquette : deux bordures imbriquées. On neutralise le cadre
   extérieur et on ne garde que la pastille.
   =========================================================================== */

.jet-radio-list__row,
.jet-checkboxes-list__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 0 !important;
  margin: 0;
}

.jet-radio-list__item,
.jet-checkboxes-list__item {
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
}

.jet-radio-list__button,
.jet-checkboxes-list__button {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 999px !important;
}

/* La pastille elle-même. */
.jet-radio-list__label,
.jet-checkboxes-list__label {
  display: inline-flex !important;
  align-items: center;
  padding: 10px 20px !important;
  border: 1px solid var(--pm-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--pm-ink-2) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: var(--pm-t);
  transition-property: background-color, color, border-color, transform, box-shadow;
}
.jet-radio-list__item:hover .jet-radio-list__label,
.jet-checkboxes-list__item:hover .jet-checkboxes-list__label {
  border-color: var(--pm-primary) !important;
  color: var(--pm-primary) !important;
  transform: translateY(-1px);
  box-shadow: var(--pm-shadow-1);
}

/* État sélectionné : pastille pleine. */
.jet-radio-list__item:has(input:checked) .jet-radio-list__label,
.jet-checkboxes-list__item:has(input:checked) .jet-checkboxes-list__label,
.jet-radio-list__input:checked ~ .jet-radio-list__label {
  background: var(--pm-primary) !important;
  border-color: var(--pm-primary) !important;
  color: #fff !important;
}

/* La case radio native n'a plus d'utilité visuelle. */
.jet-radio-list__input,
.jet-checkboxes-list__input { position: absolute; opacity: 0; pointer-events: none; }

/* Accessibilité : le focus clavier reste parfaitement visible. */
.jet-radio-list__input:focus-visible ~ .jet-radio-list__label,
.jet-checkboxes-list__input:focus-visible ~ .jet-checkboxes-list__label {
  outline: 2px solid var(--pm-primary);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .jet-radio-list__row,
  .jet-checkboxes-list__row { gap: 8px; }
  .jet-radio-list__label,
  .jet-checkboxes-list__label { padding: 9px 16px !important; font-size: 13px; }
}

/* ===========================================================================
   34. NOM D'ARTISTE — SUPPRESSION DU BANDEAU DE FOND
   ---------------------------------------------------------------------------
   Le gabarit posait un fond bleu plein derrière le nom. Invisible tant que le
   nom n'apparaissait qu'au survol, il formait un bandeau opaque maintenant
   que le nom est toujours affiché. Le dégradé de la carte suffit à la
   lisibilité.
   =========================================================================== */

.jet-listing-grid__item .elementor-cta__title,
.jet-listing-grid__item .elementor-cta__content-item,
.pm-hero-card .elementor-cta__title {
  background-color: transparent !important;
  background-image: none !important;
}

/* ===========================================================================
   35. TITRE DE PAGE SANS BANNIÈRE
   ---------------------------------------------------------------------------
   Quelques pages (Que PASA… Musik, À propos) n'ont pas de bande illustrée :
   leur titre se retrouvait nu, collé en haut à gauche. Elles reçoivent le
   même geste d'ouverture que les autres — filet d'accent puis titre — sans
   teinter la section, qui enveloppe parfois l'ensemble de la page.
   =========================================================================== */

.pm-pagetitle {
  padding-top: var(--pm-s6) !important;
  padding-bottom: var(--pm-s4) !important;
}
.pm-pagetitle .pm-pagetitle__title {
  margin: 0 !important;
  font-size: clamp(30px, 4vw, 46px) !important;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--pm-ink);
}
.pm-pagetitle .pm-pagetitle__title::before {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  margin-bottom: 18px;
  background: linear-gradient(90deg, var(--pm-primary), var(--pm-secondary));
}

@media (max-width: 767px) {
  .pm-pagetitle {
    padding-top: var(--pm-s5) !important;
    padding-bottom: var(--pm-s3) !important;
  }
  .pm-pagetitle .pm-pagetitle__title { font-size: 28px !important; }
  .pm-pagetitle .pm-pagetitle__title::before { width: 44px; height: 3px; margin-bottom: 14px; }
}