/*
 * global.css — Nolan Music
 * ============================================================
 * ARCHITECTURE DU FICHIER
 * ============================================================
 *
 * 1. Tokens CSS (couleurs, typo, espacements)  -> voir aussi tokens.css
 * 2. Resets et bases
 * 3. Utilitaires globaux (nm-cond, nm-eq, scroll)
 * 4. Neutralisations editeur WordPress
 * 5. Animations au scroll
 * 6. Correctifs par page (page-id-*)
 *    - 6a. Page Evenements prives   (ID 11)
 *    - 6b. Page Evenements entreprise (ID 12)
 *    - 6c. Page Etablissements de nuit (ID 13)
 *    - 6d. Page Location           (ID 14)
 * 7. Logo image (header & footer)
 * 8. Bouton retour en haut
 *
 * CONVENTIONS
 * -----------
 * - Breakpoints : mobile <= 768px | small-desktop 769px–1380px
 * - Prefix BEM  : .nm-[bloc]__[element]--[modifier]
 * - Tokens      : var(--nm-*) — source de verite dans :root de ce fichier
 * - !important  : reserve aux surcharges WordPress et correctifs page-id-*
 * ============================================================
 */

/*
 * Nolan Music - global.css
 * CSS global du thème enfant : tokens de design, resets, utilitaires transverses.
 * Chargé sur le front ET dans l'éditeur Gutenberg via add_editor_style().
 *
 * Ce fichier ne contient PAS de styles spécifiques à un bloc.
 * Chaque bloc porte son propre fichier CSS dans le plugin nolan-music-blocks.
 *
 * Sommaire
 * 1. Imports polices locales (via @font-face déclarées dans theme.json)
 * 2. Tokens CSS custom properties (miroir des tokens design system)
 * 3. Resets & base
 * 4. Utilitaires transverses (.nm-cond, .nm-car, .nm-eq, .nm-eq-hero)
 * 5. Neutralisations éditeur
 */

/* ==========================================================================
   2. Tokens CSS custom properties
   Mirroir exact des fichiers _ds/tokens/*.css de la maquette.
   Source vérité unique : changer ici propage partout.
   ========================================================================== */
:root {
  /* Couleurs - palette de base */
  --nm-encre:        #14130F;
  --nm-noir-profond: #0B0A08;
  --nm-ivoire:       #F5F1E7;
  --nm-sable:        #E3DCCB;
  --nm-gris-pierre:  #8A8578;
  --nm-bronze:       #8C6A4A;
  --nm-bronze-clair: #C9A876;
  --nm-bordeaux:     #4E2430;

  /* Couleurs - texte sur fond clair */
  --nm-text-primary:   var(--nm-encre);
  --nm-text-secondary: #2A2A24;
  --nm-text-muted:     #4A4A42;
  --nm-text-faint:     var(--nm-gris-pierre);

  /* Couleurs - texte sur fond sombre */
  --nm-text-primary-dark:   var(--nm-ivoire);
  --nm-text-secondary-dark: rgba(245, 241, 231, 0.8);
  --nm-text-muted-dark:     rgba(245, 241, 231, 0.7);
  --nm-text-faint-dark:     rgba(245, 241, 231, 0.45);

  /* Surfaces */
  --nm-surface-page:       var(--nm-ivoire);
  --nm-surface-page-alt:   #EFE9DA;
  --nm-surface-night:      var(--nm-encre);
  --nm-surface-night-deep: var(--nm-noir-profond);
  --nm-surface-corporate:  var(--nm-bordeaux);

  /* Accents */
  --nm-accent:         var(--nm-bronze);
  --nm-accent-tint:    var(--nm-bronze-clair);
  --nm-accent-on-dark: var(--nm-bronze-clair);

  /* Bordures */
  --nm-border-light:         var(--nm-sable);
  --nm-border-on-light:      rgba(20, 19, 15, 0.25);
  --nm-border-on-dark:       rgba(245, 241, 231, 0.25);
  --nm-border-on-dark-faint: rgba(245, 241, 231, 0.15);

  /* Espacement */
  --nm-space-1:  4px;
  --nm-space-2:  8px;
  --nm-space-3:  12px;
  --nm-space-4:  16px;
  --nm-space-5:  20px;
  --nm-space-6:  24px;
  --nm-space-7:  32px;
  --nm-space-8:  40px;
  --nm-space-9:  56px;
  --nm-space-10: 80px;
  --nm-space-11: 90px;
  --nm-space-12: 120px;

  --nm-page-margin-x:    var(--nm-space-11);
  --nm-section-padding-y: var(--nm-space-12);
  --nm-content-max-width: 1200px;
  --nm-layout-max-width:  1320px;

  /* Rayon de bordure */
  --nm-radius-none:     0px;
  --nm-radius-card:     2px;
  --nm-radius-circle:   50%;

  /* Mouvement */
  --nm-ease:              cubic-bezier(0.4, 0, 0.2, 1);
  --nm-duration-fast:     120ms;
  --nm-duration-standard: 200ms;

  /* Typographie */
  --nm-font-display: "Bricolage Grotesque", sans-serif;
  --nm-font-body:    "Instrument Sans", sans-serif;

  --nm-eyebrow-tracking: 0.1em;
  --nm-label-tracking:   0.08em;
}

/* ==========================================================================
   3. Resets & base
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--nm-surface-page);
  font-family: var(--nm-font-body);
  color: var(--nm-encre);
  font-size: 16px;
  line-height: 1.75;
}

/* Reset des marges paragraphes par défaut du parent */
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--nm-font-display); }

::selection {
  background: var(--nm-bronze);
  color: var(--nm-ivoire);
}

/* ==========================================================================
   4. Utilitaires transverses
   Miroir des classes .nm-* de la maquette, adaptées WordPress.
   ========================================================================== */

/* Condensed display : chiffres, accroche, label uppercase */
.nm-cond {
  font-family: var(--nm-font-display);
  text-transform: uppercase;
  letter-spacing: -0.015em;
}

/* Carousel sans scrollbar */
.nm-car {
  scrollbar-width: none;
}
.nm-car::-webkit-scrollbar {
  display: none;
}

/* Equalizer animé (boutons et liens) */
@keyframes nmBar {
  0%, 100% { transform: scaleY(0.32); }
  50%       { transform: scaleY(1); }
}

.nm-eq {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 13px;
  position: relative;
  top: -1px;
}
.nm-eq .nm-bar {
  width: 2px;
  height: 100%;
  background: currentColor;
  transform-origin: center;
  transform: scaleY(0.42);
  animation: nmBar 700ms ease-in-out infinite;
  animation-play-state: paused;
}
.nm-eq .nm-bar:nth-child(1) { animation-duration: 640ms; animation-delay: -160ms; }
.nm-eq .nm-bar:nth-child(2) { animation-duration: 460ms; animation-delay: -300ms; }
.nm-eq .nm-bar:nth-child(3) { animation-duration: 800ms; animation-delay:  -60ms; }
.nm-eq .nm-bar:nth-child(4) { animation-duration: 540ms; animation-delay: -420ms; }
.nm-eq .nm-bar:nth-child(5) { animation-duration: 700ms; animation-delay: -230ms; }

button:hover .nm-eq .nm-bar,
a:hover .nm-eq .nm-bar,
.nm-card:hover .nm-eq .nm-bar {
  animation-play-state: running;
}

/* Equalizer hero (grand, bronze, en bas du hero) */
.nm-eq-hero {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  height: clamp(48px, 7vw, 80px);
}
.nm-eq-hero .nm-barh {
  width: clamp(3px, 0.5vw, 5px);
  height: 100%;
  background: var(--nm-bronze);
  transform-origin: bottom;
  transform: scaleY(0.4);
  animation: nmBar 760ms ease-in-out infinite;
}
.nm-eq-hero .nm-barh:nth-child(1) { animation-duration: 640ms; animation-delay: -160ms; }
.nm-eq-hero .nm-barh:nth-child(2) { animation-duration: 460ms; animation-delay: -300ms; }
.nm-eq-hero .nm-barh:nth-child(3) { animation-duration: 820ms; animation-delay:  -60ms; }
.nm-eq-hero .nm-barh:nth-child(4) { animation-duration: 540ms; animation-delay: -420ms; }
.nm-eq-hero .nm-barh:nth-child(5) { animation-duration: 700ms; animation-delay: -230ms; }
.nm-eq-hero .nm-barh:nth-child(6) { animation-duration: 600ms; animation-delay: -120ms; }
.nm-eq-hero .nm-barh:nth-child(7) { animation-duration: 500ms; animation-delay: -380ms; }
.nm-eq-hero .nm-barh:nth-child(8) { animation-duration: 880ms; animation-delay:  -90ms; }
.nm-eq-hero .nm-barh:nth-child(9) { animation-duration: 560ms; animation-delay: -260ms; }

/* ==========================================================================
   5. Neutralisations éditeur
   Toute règle sensible au contexte (sticky, vh, opacité initiale à 0)
   est neutralisée dans le wrapper de l'éditeur.
   ========================================================================== */
.editor-styles-wrapper {
  background: var(--nm-surface-page);
  font-family: var(--nm-font-body);
  color: var(--nm-encre);
}

/* Le header est sticky en front, il ne doit pas figer dans l'éditeur */
.editor-styles-wrapper .nm-header {
  position: static;
  backdrop-filter: none;
}

/* Les animations d'égalizer sont stoppées dans l'éditeur (jamais d'animation play auto) */
.editor-styles-wrapper .nm-bar,
.editor-styles-wrapper .nm-barh {
  animation-play-state: paused;
}

/* Neutralise le flow-root de WordPress qui interfere avec les clip-path et z-index */
.wp-block-post-content {
  display: block;
}



/* ==========================================================================
   Animations au scroll
   ========================================================================== */

.nm-diff,
.nm-prest,
.nm-split,
.nm-faq,
.nm-contact {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1000ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 1000ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nm-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Neutralise dans l'editeur */
.editor-styles-wrapper .nm-diff,
.editor-styles-wrapper .nm-prest,
.editor-styles-wrapper .nm-locband,
.editor-styles-wrapper .nm-split,
.editor-styles-wrapper .nm-faq,
.editor-styles-wrapper .nm-contact {
  opacity: 1;
  transform: none;
}


.nm-locband.nm-visible,
.nm-packs.nm-visible {
  opacity: 1;
}

.editor-styles-wrapper .nm-locband,
.editor-styles-wrapper .nm-packs {
  opacity: 1;
}


/* Animation identique sur le contenu interne de nm-locband et nm-packs
   pour ne pas perturber les clip-path et chevrons */
.nm-locband__inner,
.nm-packs__inner,
.nm-packs__stage {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1000ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 1000ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nm-locband.nm-visible .nm-locband__inner,
.nm-packs.nm-visible .nm-packs__inner,
.nm-packs.nm-visible .nm-packs__stage {
  opacity: 1;
  transform: translateY(0);
}

.editor-styles-wrapper .nm-locband__inner,
.editor-styles-wrapper .nm-packs__inner,
.editor-styles-wrapper .nm-packs__stage {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   Mobile : harmonise la largeur de tous les textes
   ========================================================================== */
@media (max-width: 768px) {
  .nm-diff__title, .nm-diff__eyebrow,
  .nm-prest__title, .nm-prest__eyebrow,
  .nm-locband__title, .nm-locband__eyebrow, .nm-locband__body,
  .nm-packs__title, .nm-packs__eyebrow, .nm-packs__intro,
  .nm-split__title, .nm-split__eyebrow, .nm-split__body,
  .nm-faq__title, .nm-faq__eyebrow,
  .nm-contact__title, .nm-contact__intro,
  .nm-hero__display, .nm-hero__eyebrow, .nm-hero__body {
    max-width: 100%;
    width: 100%;
  }
}


/* ==========================================================================
   Bouton retour en haut
   ========================================================================== */
.nm-scroll-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 44px;
  height: 44px;
  background: var(--nm-encre);
  border: 1px solid var(--nm-bronze);
  color: var(--nm-ivoire);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition:
    opacity 300ms var(--nm-ease),
    transform 300ms var(--nm-ease);
  z-index: 999;
}

.nm-scroll-top--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nm-scroll-top:hover {
  background: var(--nm-bronze);
  border-color: var(--nm-bronze);
}

@media (max-width: 768px) {
  .nm-scroll-top {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
  }
}


/* Neutralise le padding global WordPress qui cause le debordement horizontal */
@media (max-width: 768px) {
  .wp-site-blocks,
  .has-global-padding,
  .entry-content.wp-block-post-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden;
  }
}




/* Ecart hero -> parallax uniquement sur la page Evenements prives (ID 11) */
body.page-id-11 .nm-split {
  margin-top: clamp(48px, 7vw, 96px) !important;
  margin-block-start: clamp(48px, 7vw, 96px) !important;
}


/* Supprime le trait bronze du parallax uniquement sur la page Evenements prives */
body.page-id-11 .nm-split {
  border-top: none !important;
}






/* Dots deplaces hors de nm-timeline par JS */


/* Page Evenements prives : couvre le fond ivoire entre nm-timeline et nm-locband */
.page-id-11 .nm-locband {
  margin-top: calc(-7vw - 60px) !important;
  margin-block-start: calc(-7vw - 60px) !important;
  z-index: 3;
}


/* Bloc Et pour les autres soirees : chevron haut ET bas, espace avant footer */
.page-id-11 .nm-locband {
  margin-bottom: clamp(48px, 8vw, 110px);
  clip-path: polygon(0 5vw, 62% 0, 100% 4vw, 100% calc(100% - 5vw), 50% 100%, 0 calc(100% - 5vw));
}


/* Titre blanc sur page Evenements prives */
.page-id-11 .nm-locband__title {
  color: #FFFFFF;
}


/* Reduit espace sous le bouton Me contacter sur page Evenements prives */
.page-id-11 .nm-locband__inner {
  padding-bottom: clamp(80px, 10vw, 120px);
}





/* Mobile page Evenements prives : nm-locband en hauteur auto */
@media (max-width: 768px) {
  .page-id-11 .nm-locband {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .page-id-11 .nm-locband__inner {
    position: relative !important;
    inset: auto !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  .page-id-11 .nm-locband__col-title,
  .page-id-11 .nm-locband__col-body {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .page-id-11 .nm-locband__img {
    position: absolute;
  }
}


/* Ecart hero -> parallax page Evenements entreprise */
body.page-id-12 .nm-split {
  margin-top: clamp(48px, 7vw, 96px) !important;
  margin-block-start: clamp(48px, 7vw, 96px) !important;
  border-top: none !important;
}


/* Titre bloc differences sur une ligne page entreprise */
.page-id-12 .nm-diff__title {
  white-space: nowrap;
  font-size: clamp(28px, 3.5vw, 52px);
}


/* Page Evenements entreprise : memes corrections que page prive sur nm-locband */
.page-id-12 .nm-locband {
  margin-top: calc(-7vw - 60px) !important;
  margin-block-start: calc(-7vw - 60px) !important;
  z-index: 3;
  margin-bottom: clamp(48px, 8vw, 110px);
  clip-path: polygon(0 5vw, 62% 0, 100% 4vw, 100% calc(100% - 5vw), 50% 100%, 0 calc(100% - 5vw));
  min-height: clamp(400px, 45vw, 560px);
}

.page-id-12 .nm-locband__title {
  color: #FFFFFF;
}

.page-id-12 .nm-locband__inner {
  padding-bottom: clamp(80px, 10vw, 120px);
}





/* Page Entreprise : augmente le padding-bottom du timeline
   pour que nm-locband remonte sans cacher les vignettes */
.page-id-12 .nm-timeline {
  padding-bottom: calc(clamp(30px, 3.5vw, 48px) + 7vw + 60px);
}


/* Mobile page Entreprise : titre differences sur deux lignes centre */
@media (max-width: 768px) {
  .page-id-12 .nm-diff__title {
    white-space: normal;
    text-align: center;
  }
}


/* Mobile page Entreprise : reduit ecart sous-titre -> 01 */
@media (max-width: 768px) {
  .page-id-12 .nm-diff__eyebrow {
    margin-bottom: clamp(24px, 4vw, 36px);
  }
}


/* Mobile page Privee : reduit ecart sous-titre -> 01 (bloc A vos cotes) */
@media (max-width: 768px) {
  .page-id-11 .nm-diff__eyebrow {
    margin-bottom: clamp(24px, 4vw, 36px);
  }
}

/* Mobile accueil : reduit ecart sous-titre -> 01 (bloc Ce qui fait la difference) */
@media (max-width: 768px) {
  .page-id-10 .nm-diff__eyebrow {
    margin-bottom: clamp(24px, 4vw, 36px);
  }
}


.page-id-13 .nm-locband {
  margin-top: calc(-7vw - 60px) !important;
  margin-block-start: calc(-7vw - 60px) !important;
  z-index: 3;
  margin-bottom: clamp(48px, 8vw, 110px);
  clip-path: polygon(0 5vw, 62% 0, 100% 4vw, 100% calc(100% - 5vw), 50% 100%, 0 calc(100% - 5vw));
}

.page-id-13 .nm-locband__title { color: #FFFFFF; }
.page-id-13 .nm-locband__inner { padding-bottom: clamp(80px, 10vw, 120px); }

.page-id-13 .nm-timeline {
  padding-bottom: calc(clamp(30px, 3.5vw, 48px) + 7vw + 60px);
  margin-bottom: clamp(48px, 8vw, 110px);
  z-index: 3;
}

@media (max-width: 768px) {
  .page-id-13 .nm-locband {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .page-id-13 .nm-locband__inner {
    position: relative !important;
    inset: auto !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  .page-id-13 .nm-locband__col-title,
  .page-id-13 .nm-locband__col-body {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* Page Etablissements de nuit (ID 13) */
body.page-id-13 .nm-split {
  margin-top: clamp(48px, 7vw, 96px) !important;
  margin-block-start: clamp(48px, 7vw, 96px) !important;
  border-top: none !important;
}

.page-id-13 .nm-locband {
  margin-top: calc(-7vw - 60px) !important;
  margin-block-start: calc(-7vw - 60px) !important;
  z-index: 3;
  margin-bottom: clamp(48px, 8vw, 110px);
  clip-path: polygon(0 5vw, 62% 0, 100% 4vw, 100% calc(100% - 5vw), 50% 100%, 0 calc(100% - 5vw));
}

.page-id-13 .nm-locband__title { color: #FFFFFF; }

.page-id-13 .nm-locband__inner { padding-bottom: clamp(80px, 10vw, 120px); }

.page-id-13 .nm-timeline {
  padding-bottom: calc(clamp(30px, 3.5vw, 48px) + 7vw + 60px);
  margin-bottom: clamp(48px, 8vw, 110px);
  z-index: 3;
}

@media (max-width: 768px) {
  .page-id-13 .nm-locband {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .page-id-13 .nm-locband__inner {
    position: relative !important;
    inset: auto !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  .page-id-13 .nm-locband__col-title,
  .page-id-13 .nm-locband__col-body {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* Page Entreprise : augmente la hauteur et centre le contenu du bloc locband */
.page-id-12 .nm-locband__inner {
  padding-top: clamp(100px, 14vw, 180px) !important;
  padding-bottom: clamp(100px, 14vw, 180px) !important;
}


/* Page Location (ID 14) */
.page-id-14 .nm-locband {
  margin-top: -7vw !important;
  margin-block-start: -7vw !important;
  z-index: 3;
  margin-bottom: clamp(48px, 8vw, 110px);
  clip-path: polygon(0 5vw, 62% 0, 100% 4vw, 100% calc(100% - 5vw), 50% 100%, 0 calc(100% - 5vw));
}
.page-id-14 .nm-locband__title { color: #FFFFFF; }
.page-id-14 .nm-locband__inner { padding-bottom: clamp(80px, 10vw, 120px); }

@media (max-width: 768px) {
  .page-id-14 .nm-locband {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .page-id-14 .nm-locband__inner {
    position: relative !important;
    inset: auto !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  .page-id-14 .nm-locband__col-title,
  .page-id-14 .nm-locband__col-body {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* Page Location : ecart entre hero et bloc packs */
.page-id-14 .nm-rental-packs {
  margin-top: clamp(48px, 7vw, 96px) !important;
  margin-block-start: clamp(48px, 7vw, 96px) !important;
}


/* Supprime le trait entre nm-rental-units et nm-differences-grid page Location */
.page-id-14 .nm-diff {
  border-top: none !important;
}


/* Reduit espace entre nm-rental-units et nm-diff page Location */
.page-id-14 .nm-diff {
  padding-top: 0 !important;
}

/* Logo image header & footer */
.nm-header__logo-img {
  display: block;
  width: 60px;
  height: 60px;
  object-fit: contain;
  vertical-align: bottom;
  margin-top: -16px;
  margin-bottom: -16px;
}
.nm-footer__logo-img {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-top: -40px;
  margin-bottom: -16px;
}


.page-id-14 .nm-rental-units::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 7vw;
  pointer-events: none;
  z-index: 10;
  /* SVG inline comme data URI - chevron identique au bas de nm-rental-packs */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 9' preserveAspectRatio='none'%3E%3Cpolyline points='0,6 62,2 100,7' fill='none' stroke='%23C9A876' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
}


.page-id-14 .nm-rental-units::before {
  content: "";
  position: absolute;
  top: -7vw;
  left: 0;
  width: 100%;
  height: 7vw;
  pointer-events: none;
  z-index: 10;
  background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 7%27 preserveAspectRatio=%27none%27%3E%3Cpolyline points=%270,4 62,0 100,2%27 fill=%27none%27 stroke=%27%23C9A876%27 stroke-width=%272%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
}


/* Page Location : barre bronze-clair sur le chevron bas de nm-rental-packs */
.page-id-14 .nm-rental-units {
  position: relative;
}
.page-id-14 .nm-rental-units::before {
  content: "";
  position: absolute;
  top: -7vw;
  left: 0;
  width: 100%;
  height: 7vw;
  pointer-events: none;
  z-index: 10;
  background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 7%27 preserveAspectRatio=%27none%27%3E%3Cpolyline points=%270,4 62,0 100,5%27 fill=%27none%27 stroke=%27%23C9A876%27 stroke-width=%272%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
}

/* Supprime l'outline au clic souris, conserve la visibilite au focus clavier */
:focus:not(:focus-visible) {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--nm-bronze);
  outline-offset: 2px;
}