/* ============================================================================
   PASA MUSIK — COUCHE « PREMIUM »
   ----------------------------------------------------------------------------
   Chargée APRÈS pasa-refonte.css, cette feuille ne réécrit rien : elle hausse
   le niveau de finition du site existant.

   Parti pris typographique
     « Comfortaa » reste la seule police du site. Changer la typographie d'une
     marque n'est pas une finition, c'est une refonte d'identité — et le cahier
     des charges demande explicitement de respecter l'identité existante.
     L'élévation passe donc par l'échelle, l'interlettrage, la mesure, le
     contraste et le rythme, pas par une police de plus à télécharger.

   Sommaire
     00. Jetons complémentaires
     01. Finition typographique générale
     02. En-tête et navigation
     03. Rythme et respiration des sections
     04. Boutons et appels à l'action
     05. Section « en vedette » — présentation éditoriale
     06. Actualités
     07. Partenaires
     08. Bannières de page
     09. Pages d'artistes (biographie, lecteur Spotify)
     10. Infolettre et formulaires
     11. Pied de page
     12. Micro-interactions
     13. Responsive
     14. prefers-reduced-motion
   ========================================================================== */

/* ===========================================================================
   00. JETONS COMPLÉMENTAIRES
   =========================================================================== */
:root {
  --pm-ink-deep:  #06161d;                       /* bandes sombres */
  --pm-brand-bar: linear-gradient(90deg, #F3AF20 0%, #EF4424 34%, #8B4A7D 68%, #1C6FB8 100%);
  --pm-s9:        140px;
  --pm-ease-out:  cubic-bezier(.16, 1, .3, 1);
  --pm-measure:   66ch;
}

/* ===========================================================================
   01. FINITION TYPOGRAPHIQUE GÉNÉRALE
   =========================================================================== */

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

/* Les grands titres se resserrent, comme en presse : plus ils sont gros,
   plus l'interlettrage doit être négatif pour rester dense et élégant. */
h1, .elementor-widget-heading h1.elementor-heading-title {
  letter-spacing: -.028em;
  line-height: 1.07;
}
h2, .elementor-widget-heading h2.elementor-heading-title {
  letter-spacing: -.022em;
  line-height: 1.13;
}
h3, .elementor-widget-heading h3.elementor-heading-title {
  letter-spacing: -.015em;
  line-height: 1.2;
}
h1, h2, h3, h4 { text-wrap: balance; }

/* Paragraphes : une mesure confortable et des fins de lignes propres. */
.elementor-widget-text-editor p,
.entry-content p {
  text-wrap: pretty;
}
.elementor-widget-text-editor:not([class*="elementor-widget__width"]) > .elementor-widget-container {
  max-width: var(--pm-measure);
}

/* Les chiffres s'alignent toujours (dates, prix, numérotation). */
time, .price, .woocommerce-Price-amount, .pm-rcard__num {
  font-variant-numeric: tabular-nums;
}

/* Liens de contenu : soulignement fin qui s'épaissit, jamais de saut. */
.elementor-widget-text-editor a:not(.elementor-button),
.entry-content a:not(.elementor-button):not(.pm-btn) {
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, var(--pm-primary) 42%, transparent);
  transition: text-decoration-color .25s var(--pm-ease-out), color .25s var(--pm-ease-out);
}
.elementor-widget-text-editor a:not(.elementor-button):hover,
.entry-content a:not(.elementor-button):not(.pm-btn):hover {
  text-decoration-color: var(--pm-primary);
}

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

/* Un en-tête un peu plus aéré : la marque a besoin d'air autour d'elle. */
.elementor-location-header > .elementor-section > .elementor-container {
  padding-block: 4px;
}

/* Le logo est l'ancre de la page : taille minimale garantie, jamais tassé. */
.elementor-location-header .elementor-widget-image img {
  min-width: 108px;
  transition: transform .4s var(--pm-ease-out), opacity .3s ease;
  transform-origin: left center;
}
.elementor-location-header .elementor-widget-image a:hover img { opacity: .82; }

/* En défilement, l'en-tête se densifie légèrement : le contenu reprend la
   place, la marque reste parfaitement lisible. */
body.pm-scrolled .elementor-location-header .elementor-widget-image img {
  transform: scale(.9);
}
body.pm-scrolled .elementor-location-header > .elementor-section > .elementor-container {
  padding-block: 0;
}

/* Filet de marque sous l'en-tête une fois la page défilée. */
.elementor-location-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--pm-brand-bar);
  opacity: 0;
  transform: scaleX(.3);
  transform-origin: left center;
  transition: opacity .5s var(--pm-ease-out), transform .7s var(--pm-ease-out);
  pointer-events: none;
}
body.pm-scrolled .elementor-location-header::after { opacity: .85; transform: none; }

/* Menu principal : capitales fines, très tenues — le registre d'une agence. */
.elementor-nav-menu--main .elementor-item {
  font-size: 12.5px !important;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
  padding-inline: 13px !important;
}
.elementor-nav-menu--main .elementor-item.elementor-item-active { color: var(--pm-ink); }
.elementor-nav-menu--main .elementor-item::after { bottom: 0; height: 2px; }

/* Le sélecteur de langue se distingue du reste du menu. */
.elementor-nav-menu--main .wpml-ls-menu-item > .elementor-item {
  opacity: .72;
  font-weight: 600;
}
.elementor-nav-menu--main .wpml-ls-menu-item > .elementor-item:hover { opacity: 1; }

/* Tiroir mobile : plus généreux, plus lisible. */
.elementor-nav-menu--dropdown .elementor-item {
  font-size: 15px !important;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ===========================================================================
   03. RYTHME ET RESPIRATION DES SECTIONS
   =========================================================================== */

/* Les grandes sections de la page d'accueil respirent davantage : c'est le
   blanc tournant, plus que la décoration, qui fait la qualité perçue. */
@media (min-width: 1025px) {
  .pm-section        { padding-block: var(--pm-s8); }
  .pm-featured.pm-featured { padding-block: var(--pm-s8) !important; }
  .pm-hero__intro    { padding-block: var(--pm-s8) var(--pm-s7); }
}

/* Alternance de fonds très légère pour marquer les respirations. */
.pm-featured { background: var(--pm-surface); }

/* En-têtes de section : un accent plus fin et plus distingué. */
.pm-head__accent,
.pm-featured__accent,
.pm-hero__intro-accent,
.pm-news__accent {
  height: 3px !important;
  width: 46px !important;
  border-radius: 3px;
  background: var(--pm-brand-bar) !important;
}

.pm-head__eyebrow,
.pm-hero__eyebrow {
  font-size: 11.5px !important;
  letter-spacing: .22em !important;
  color: var(--pm-ink-3) !important;
}

.pm-head__title,
.pm-featured__heading h2,
.pm-hero__h1 { letter-spacing: -.028em; }

.pm-head__lead,
.pm-featured__lead { max-width: 56ch; color: var(--pm-ink-2); }

/* ===========================================================================
   04. BOUTONS ET APPELS À L'ACTION
   =========================================================================== */

.pm-btn,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button {
  letter-spacing: .1em;
  font-weight: 700;
  transition: transform .32s var(--pm-ease-out),
              box-shadow .32s var(--pm-ease-out),
              background-color .3s ease,
              color .3s ease,
              border-color .3s ease;
}
.pm-btn:hover,
.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(4, 37, 48, .16);
}
.pm-btn:active,
.elementor-button:active { transform: translateY(0); }

/* La flèche des boutons avance au survol. */
.pm-btn svg,
.elementor-button .elementor-button-icon {
  transition: transform .32s var(--pm-ease-out);
}
.pm-btn:hover svg,
.elementor-button:hover .elementor-button-icon { transform: translateX(4px); }

/* ===========================================================================
   05. SECTION « EN VEDETTE » — PRÉSENTATION ÉDITORIALE
   =========================================================================== */

.pm-featured__media.pm-featured__media {
  aspect-ratio: 4 / 5;
  border-radius: 16px;
}

/* Un filet de marque apparaît sous la photographie au survol : rappel discret
   de la signature chromatique du logo. */
.pm-featured__card .pm-featured__media::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  height: 3px;
  background: var(--pm-brand-bar);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s var(--pm-ease-out);
}
.pm-featured__card:hover .pm-featured__media::before { transform: none; }

.pm-featured__name.pm-featured__name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  font-size: 17px;
  letter-spacing: -.012em;
}
.pm-featured__name.pm-featured__name::after {
  content: "→";
  margin-left: auto;
  font-size: 15px;
  color: var(--pm-primary);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .35s var(--pm-ease-out), transform .35s var(--pm-ease-out);
}
.pm-featured__card:hover .pm-featured__name.pm-featured__name::after {
  opacity: 1;
  transform: none;
}

/* ===========================================================================
   06. ACTUALITÉS
   =========================================================================== */

.pm-actu {
  border-radius: 16px;
  transition: transform .45s var(--pm-ease-out), box-shadow .45s var(--pm-ease-out);
}
.pm-actu:hover { transform: translateY(-4px); }

.pm-actu__title {
  letter-spacing: -.015em;
  text-wrap: balance;
}

/* ===========================================================================
   07. PARTENAIRES
   =========================================================================== */

/* Les logos partenaires s'unifient en niveaux de gris et reprennent leurs
   couleurs au survol : la bande cesse d'être un patchwork. */
.pm-partner img {
  filter: grayscale(1) contrast(.92);
  opacity: .62;
  transition: filter .45s var(--pm-ease-out), opacity .45s var(--pm-ease-out),
              transform .45s var(--pm-ease-out);
}
.pm-partner:hover img,
.pm-partner:focus-visible img {
  filter: none;
  opacity: 1;
  transform: scale(1.03);
}

/* ===========================================================================
   08. BANNIÈRES DE PAGE
   =========================================================================== */

.pm-pagehead { position: relative; }
.pm-pagehead h1,
.pm-pagehead .elementor-heading-title {
  letter-spacing: -.03em;
  text-shadow: 0 2px 28px rgba(0, 0, 0, .35);
}
/* Liseré de marque en pied de bannière : la même signature partout. */
.pm-pagehead::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--pm-brand-bar);
  z-index: 3;
}

/* ===========================================================================
   09. PAGES D'ARTISTES
   =========================================================================== */

/* Les lecteurs Spotify déjà présents sur les fiches d'artistes sont cadrés
   proprement : jamais de débordement horizontal, un coin arrondi cohérent. */
iframe[src*="open.spotify.com"] {
  display: block;
  width: 100% !important;
  max-width: 100%;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(4, 37, 48, .10);
}

/* Les vidéos intégrées suivent la même règle. */
iframe[src*="youtube"],
iframe[src*="vimeo"] {
  max-width: 100%;
  border-radius: 14px;
}

/* Portrait d'artiste en tête de fiche : visage dégagé, cadre net. */
.single-artiste .elementor-widget-image img,
.single-artiste .elementor-widget-theme-post-featured-image img {
  border-radius: 16px;
  object-position: var(--pm-focal, 50% 28%);
}

/* ===========================================================================
   10. INFOLETTRE ET FORMULAIRES
   =========================================================================== */

input[type="text"], input[type="email"], input[type="search"],
input[type="tel"], input[type="url"], textarea, select,
.elementor-field-textual {
  border-radius: 10px !important;
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus,
.elementor-field-textual:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pm-primary) 14%, transparent);
}

/* ===========================================================================
   11. PIED DE PAGE
   =========================================================================== */

.elementor-location-footer {
  position: relative;
  background: var(--pm-surface-2);
}
/* Filet de marque en tête de pied de page : la page se referme sur la même
   signature chromatique qu'elle a ouverte. */
.elementor-location-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--pm-brand-bar);
  z-index: 2;
}

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

.elementor-location-footer .elementor-nav-menu .elementor-item {
  font-size: 14.5px !important;
  padding-block: 7px !important;
  color: var(--pm-ink-2);
  transition: color .25s ease, transform .3s var(--pm-ease-out);
}
.elementor-location-footer .elementor-nav-menu .elementor-item:hover {
  color: var(--pm-primary);
  transform: translateX(3px);
}

.elementor-location-footer .elementor-social-icon {
  transition: transform .3s var(--pm-ease-out), opacity .25s ease;
  opacity: .78;
}
.elementor-location-footer .elementor-social-icon:hover {
  transform: translateY(-3px);
  opacity: 1;
}

/* ===========================================================================
   12. MICRO-INTERACTIONS
   =========================================================================== */

/* Apparitions au défilement : courbe unique pour tout le site. */
.pm-reveal {
  transition-timing-function: var(--pm-ease-out) !important;
  transition-duration: .85s !important;
}

/* Toutes les photographies de contenu s'animent de la même façon. */
.pm-featured__media img,
.pm-actu__media img,
.jet-listing-grid .elementor-cta__bg {
  transition: transform .85s var(--pm-ease-out) !important;
}

/* Barre de défilement de la page, discrète et à la couleur de la marque. */
@supports (scrollbar-color: auto) {
  html { scrollbar-color: #c7d6db transparent; scrollbar-width: thin; }
}

/* ===========================================================================
   13. RESPONSIVE
   =========================================================================== */

@media (max-width: 1024px) {
  .elementor-nav-menu--main .elementor-item { font-size: 12px !important; padding-inline: 10px !important; }
}

@media (max-width: 768px) {
  /* Sur petit écran, les grands titres restent tenus mais respirent. */
  h1, .elementor-widget-heading h1.elementor-heading-title { letter-spacing: -.022em; }
  h2, .elementor-widget-heading h2.elementor-heading-title { letter-spacing: -.018em; }
  .pm-head__eyebrow, .pm-hero__eyebrow { letter-spacing: .18em !important; }
  .elementor-location-header .elementor-widget-image img { min-width: 92px; }
}

/* Aucun lecteur, aucune image intégrée ne crée de débordement horizontal. */
@media (max-width: 680px) {
  iframe, embed, object, video { max-width: 100% !important; }
}

/* ===========================================================================
   14. MOUVEMENT RÉDUIT
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .pm-btn:hover,
  .elementor-button:hover,
  .pm-actu:hover,
  .elementor-location-footer .elementor-nav-menu .elementor-item:hover,
  .elementor-location-footer .elementor-social-icon:hover,
  .pm-partner:hover img { transform: none !important; }

  .elementor-location-header::after,
  .pm-featured__card .pm-featured__media::before { transition: none; }

  .elementor-location-header .elementor-widget-image img,
  .pm-featured__media img,
  .pm-actu__media img,
  .jet-listing-grid .elementor-cta__bg { transition: none !important; }
}

/* ===========================================================================
   15. CORRECTIF — ICÔNE SPOTIFY DES CARTES
   ---------------------------------------------------------------------------
   Le tracé officiel Spotify est dessiné en `currentColor`. Le thème impose à
   tout lien la couleur orange de la marque : l'icône apparaissait donc en
   orange sur fond sombre, illisible et hors charte Spotify. On rétablit le
   blanc, et le vert officiel au survol.
   =========================================================================== */

a.pm-spotify,
a.pm-spotify:visited { color: #fff !important; }
a.pm-spotify:hover,
a.pm-spotify:focus-visible {
  color: #fff !important;
  background: #1DB954 !important;
  border-color: #1DB954 !important;
}
a.pm-spotify svg { fill: currentColor; }

/* ===========================================================================
   16. SÉLECTEUR DE LANGUE — FR | EN
   ---------------------------------------------------------------------------
   Le français est la langue par défaut du site : c'est lui qui s'affiche en
   premier, et le sélecteur le montre. La langue courante est posée en clair,
   l'autre est le lien. Rien n'est deviné à partir de l'adresse : le script
   lit la classe que WPML pose lui-même sur l'élément de menu.
   =========================================================================== */

.elementor-nav-menu .pm-lang,
.elementor-nav-menu--dropdown .pm-lang {
  display: flex;
  align-items: center;
  gap: 7px;
}

.elementor-nav-menu .pm-lang .pm-lang__cur,
.elementor-nav-menu--dropdown .pm-lang .pm-lang__cur {
  font-family: "Comfortaa", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .075em;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--pm-primary, #047391);
  color: #fff;
}

/* Le lien vers l'autre langue : discret, mais jamais effacé. */
.elementor-nav-menu .pm-lang > a.pm-lang__to,
.elementor-nav-menu--dropdown .pm-lang > a.pm-lang__to {
  font-family: "Comfortaa", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .075em;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(11, 37, 48, .18);
  color: var(--pm-ink, #0b2530);
  opacity: .72;
  transition: opacity .3s ease, border-color .3s ease,
              background-color .3s ease, color .3s ease;
}
.elementor-nav-menu .pm-lang > a.pm-lang__to:hover,
.elementor-nav-menu .pm-lang > a.pm-lang__to:focus-visible,
.elementor-nav-menu--dropdown .pm-lang > a.pm-lang__to:hover,
.elementor-nav-menu--dropdown .pm-lang > a.pm-lang__to:focus-visible {
  opacity: 1;
  border-color: var(--pm-ink, #0b2530);
  background: var(--pm-ink, #0b2530);
  color: #fff;
}

/* Le soulignement de survol du menu n'a pas lieu d'être sur des pastilles. */
.elementor-nav-menu .pm-lang > a.pm-lang__to::after { display: none !important; }

/* Dans le menu déroulant du téléphone, le sélecteur reste au même endroit que
   les autres entrées : aligné à gauche, à la même hauteur de frappe. */
.elementor-nav-menu--dropdown .pm-lang {
  padding: 10px 20px;
}

/* ===========================================================================
   17. LA PAGE OÙ L'ON SE TROUVE
   ---------------------------------------------------------------------------
   Une navigation professionnelle répond toujours à « où suis-je ? ». WordPress
   pose déjà la classe ; il ne manquait que le signe.
   =========================================================================== */

.elementor-nav-menu li.current-menu-item > a,
.elementor-nav-menu li.current_page_item > a,
.elementor-nav-menu li.current-menu-ancestor > a,
.elementor-nav-menu li.current-menu-parent > a {
  color: var(--pm-ink, #0b2530) !important;
  font-weight: 700;
}

.elementor-nav-menu li.current-menu-item > a::after,
.elementor-nav-menu li.current_page_item > a::after,
.elementor-nav-menu li.current-menu-ancestor > a::after,
.elementor-nav-menu li.current-menu-parent > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--pm-primary, #047391), var(--pm-secondary, #EF4424));
  transform: none !important;
  opacity: 1 !important;
}
.elementor-nav-menu li.current-menu-item > a,
.elementor-nav-menu li.current_page_item > a { position: relative; }

/* ===========================================================================
   18. LE MANIFESTE DE LA PAGE D'ACCUEIL
   ---------------------------------------------------------------------------
   Cinq lignes centrées en corps 16 : c'est de la mise en page de gabarit. Le
   même texte, posé en pleine page, avec une première phrase traitée comme un
   chapeau de magazine, devient une déclaration d'agence. Aucun mot n'est
   modifié ; seule la façon de le présenter change.
   =========================================================================== */

body.home .elementor-location-main .elementor-widget-text-editor,
body.home main .elementor-widget-text-editor {
  text-align: left;
}

body.home .elementor-location-main .elementor-widget-text-editor > .elementor-widget-container,
body.home main .elementor-widget-text-editor > .elementor-widget-container {
  max-width: 62ch;
  margin-inline: auto;
  padding-block: clamp(10px, 2vw, 26px);
  position: relative;
}

/* Le filet de marque, en ouverture du propos. */
body.home .elementor-location-main .elementor-widget-text-editor > .elementor-widget-container::before,
body.home main .elementor-widget-text-editor > .elementor-widget-container::before {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin-bottom: clamp(20px, 2.4vw, 30px);
  border-radius: 2px;
  background: var(--pm-brand-bar, linear-gradient(90deg, #F3AF20, #EF4424, #8B4A7D, #1C6FB8));
}

body.home .elementor-location-main .elementor-widget-text-editor p,
body.home main .elementor-widget-text-editor p {
  margin: 0 0 1.15em;
  font-size: clamp(16px, 1.22vw, 18px);
  line-height: 1.82;
  letter-spacing: .002em;
  color: #39525c;
}

/* Le chapeau : la première phrase porte la promesse de l'agence. */
body.home .elementor-location-main .elementor-widget-text-editor p:first-of-type,
body.home main .elementor-widget-text-editor p:first-of-type {
  font-size: clamp(19px, 1.72vw, 25px);
  line-height: 1.56;
  letter-spacing: -.008em;
  color: var(--pm-ink, #0b2530);
  margin-bottom: 1.1em;
}
body.home .elementor-location-main .elementor-widget-text-editor p:first-of-type span,
body.home main .elementor-widget-text-editor p:first-of-type span {
  font-weight: 500 !important;   /* l'export fige un 400 dans le style en ligne */
}

body.home .elementor-location-main .elementor-widget-text-editor p:last-child,
body.home main .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* ===========================================================================
   19. LA SECTION INFOLETTRE DE LA PAGE D'ACCUEIL
   ---------------------------------------------------------------------------
   Elle accueille désormais le VRAI formulaire HighLevel, dans son propre
   cadre : il lui faut la place d'un formulaire, pas celle d'un champ unique.
   Les sélecteurs sont triplés parce que la feuille d'origine de cette section
   est écrite dans la page, donc appliquée après celle-ci.
   =========================================================================== */

.pm-news .pm-news__inner.pm-news__inner {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(32px, 5vw, 76px);
}

.pm-news .pm-news__panel.pm-news__panel {
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: 18px;
  box-shadow: 0 26px 70px rgba(11, 37, 48, .11);
}

.pm-news .pm-news__title.pm-news__title {
  font-size: clamp(27px, 3vw, 40px);
  line-height: 1.16;
  letter-spacing: -.016em;
}

.pm-news .pm-news__lead.pm-news__lead {
  font-size: clamp(15px, 1.1vw, 16.5px);
  line-height: 1.78;
  max-width: 44ch;
}

@media (max-width: 1024px) {
  .pm-news .pm-news__inner.pm-news__inner { grid-template-columns: 1fr; }
}

/* ===========================================================================
   20. PIED DE PAGE
   ---------------------------------------------------------------------------
   La bande d'invitation ouvre désormais le pied de page : ce qui suit doit
   être calme, aéré et lisible, et non une suite de blocs serrés.
   =========================================================================== */

.elementor-location-footer {
  font-family: "Comfortaa", sans-serif;
}

.elementor-location-footer .elementor-widget-text-editor p,
.elementor-location-footer .elementor-widget-text-editor {
  font-size: 14px;
  line-height: 1.85;
  letter-spacing: .004em;
}

.elementor-location-footer .elementor-nav-menu a,
.elementor-location-footer .elementor-widget-nav-menu a {
  font-size: 13px;
  letter-spacing: .035em;
  line-height: 2.25;
  transition: color .3s ease, opacity .3s ease;
}

.elementor-location-footer h1,
.elementor-location-footer h2,
.elementor-location-footer h3,
.elementor-location-footer h4,
.elementor-location-footer .elementor-heading-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
}

/* La ligne de mentions, posée sur un filet discret. */
.elementor-location-footer > section:last-of-type {
  border-top: 1px solid rgba(11, 37, 48, .10);
}

/* ===========================================================================
   21. RYTHME VERTICAL
   ---------------------------------------------------------------------------
   Une page premium se reconnaît d'abord à son souffle. Les sections de la page
   d'accueil respirent du même pas, et ce pas suit la largeur de l'écran.
   =========================================================================== */

body.home .elementor-location-main > .elementor > .elementor-section:not(.pm-roster):not(.pm-news) {
  padding-top: clamp(44px, 5.4vw, 92px);
  padding-bottom: clamp(44px, 5.4vw, 92px);
}

/* Deux blocs de texte qui se suivent ne doivent pas cumuler leurs marges. */
body.home .elementor-location-main .elementor-widget:last-child { margin-bottom: 0; }

/* ===========================================================================
   22. MOUVEMENT — PRÉCISION PLUTÔT QUE QUANTITÉ
   ---------------------------------------------------------------------------
   Les apparitions au défilement existaient déjà ; on en affine seulement la
   courbe et la distance, pour qu'elles se remarquent sans se voir.
   =========================================================================== */

.pm-reveal {
  transition-duration: .9s !important;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1) !important;
}

/* Les liens de contenu : le soulignement se dessine, il n'apparaît pas. */
.elementor-location-main .elementor-widget-text-editor a:not(.elementor-button) {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  text-decoration: none;
  transition: background-size .45s cubic-bezier(.16, 1, .3, 1);
}
.elementor-location-main .elementor-widget-text-editor a:not(.elementor-button):hover,
.elementor-location-main .elementor-widget-text-editor a:not(.elementor-button):focus-visible {
  background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
  .pm-reveal { transition: none !important; }
  .elementor-nav-menu .pm-lang > a.pm-lang__to,
  .elementor-location-footer .elementor-nav-menu a,
  .elementor-location-main .elementor-widget-text-editor a:not(.elementor-button) {
    transition: none !important;
  }
  .elementor-location-main .elementor-widget-text-editor a:not(.elementor-button) {
    background-size: 100% 1px;
  }
}