/* ==========================================================================
   enhance.css — couche visuelle additionnelle (v2026-10)
   Ne modifie aucune structure : tout est additif et peut être retiré en
   supprimant enhance.css + enhance.js (+ lenis / split-type).
   Sommaire :
   1. Bouton WhatsApp
   2. Pointillés animés ("marching ants") + magnétisme
   3. Constellation du hero
   4. Ruban de progression + rubans de titres
   5. Micro-interactions
   6. Apparitions au scroll / texte révélé
   7. Lenis (scroll fluide)
   ========================================================================== */

:root {
  --nr-orange: #fc8a23;
  --nr-whatsapp: #25D366;
}

/* ====================================== 1. Bouton WhatsApp ====================================== */
.whatsapp-toggle {
  position: fixed;
  right: 30px;
  bottom: 148px; /* musique = 84px, flèche = 20px, pas de 64px */
  z-index: 200;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--main-text);
  background-color: var(--section-background);
  color: var(--nr-orange);
  text-decoration: none;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, translate .25s ease-out;
  -webkit-tap-highlight-color: transparent;
}

.whatsapp-toggle svg {
  width: 24px;
  height: 24px;
  display: block;
}

.whatsapp-toggle:focus-visible {
  outline: 3px solid rgba(252, 138, 35, .45);
  outline-offset: 3px;
}

.whatsapp-toggle:active {
  background-color: var(--nr-whatsapp);
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .whatsapp-toggle:hover {
    background-color: var(--nr-whatsapp);
    color: #fff;
  }
}

/* ====================================== 2. Pointillés animés + magnétisme ====================================== */
/* Même langage que .services-box (déjà animé sur le site), étendu aux autres
   éléments à bordure pointillée. */
@keyframes nrAnts {
  100% { background-position: 10px 0, -10px 100%, 0 -10px, 100% 10px; }
}

@media (hover: hover) and (pointer: fine) {
  .whatsapp-toggle:hover,
  .music-toggle:hover,
  button.bottom-top-button:hover,
  .yer-exp-box:hover,
  .testimonial-box:hover,
  .contact-sec-box:hover {
    --nr-ant: var(--main-text);
    border-color: transparent;
    border-radius: 0;
    background-image:
      linear-gradient(90deg, transparent 50%, var(--nr-ant) 0),
      linear-gradient(90deg, transparent 50%, var(--nr-ant) 0),
      linear-gradient(0deg, transparent 50%, var(--nr-ant) 0),
      linear-gradient(0deg, transparent 50%, var(--nr-ant) 0);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 10px 2px, 10px 2px, 2px 10px, 2px 10px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    background-origin: border-box;
    background-clip: border-box;
    animation: nrAnts .35s linear infinite;
  }

  .whatsapp-toggle:hover,
  .music-toggle:hover:not(.is-playing) {
    --nr-ant: #fff;
  }

  button.bottom-top-button:hover {
    --nr-ant: var(--nr-orange);
  }
}

/* Magnétisme : enhance.js pilote --nr-mx / --nr-my */
.nr-magnetic {
  translate: var(--nr-mx, 0px) var(--nr-my, 0px);
}

.music-toggle.nr-magnetic {
  transition: background-color .3s ease, border-color .3s ease, border-radius .3s ease, translate .25s ease-out;
}

button.bottom-top-button.nr-magnetic {
  transition: background-color .2s ease-out, border-color .2s ease-out, translate .25s ease-out;
}

/* ====================================== 3. Constellation du hero ====================================== */
.section-one {
  position: relative;
  overflow: hidden;
}

.section-one > .row {
  position: relative;
  z-index: 1;
}

canvas.nr-constellation {
  position: absolute !important; /* neutralise la règle globale canvas{position:fixed} */
  inset: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

canvas.nr-constellation.is-ready {
  opacity: 1;
}

/* ====================================== 4. Rubans ====================================== */
/* 4a. Ruban de progression latéral (desktop, dans la marge gauche) */
.nr-ribbon-side {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 100vh;
  z-index: 150;
  pointer-events: none;
  overflow: visible;
}

.nr-ribbon-side .nr-track {
  fill: none;
  stroke: var(--main-text);
  stroke-opacity: .12;
  stroke-width: 3;
  stroke-linecap: round;
}

.nr-ribbon-side .nr-fill {
  fill: none;
  stroke: var(--main-text);
  stroke-width: 3;
  stroke-linecap: round;
}

.nr-ribbon-side .nr-drop {
  fill: var(--nr-orange);
  filter: drop-shadow(0 0 6px rgba(252, 138, 35, .7));
}

/* 4b. Barre de progression (mobile / tablette, quand il n'y a pas de marge) */
.nr-ribbon-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 600;
  pointer-events: none;
  background: var(--nr-orange);
  transform-origin: 0 50%;
  transform: scaleX(0);
  border-radius: 0 3px 3px 0;
}

/* 4c. Ruban sous les titres de section : le trait du logo qui se dessine */
.nr-title-ribbon {
  display: block;
  width: 96px;
  height: 18px;
  margin-top: 8px;
  overflow: visible;
}

.nr-title-ribbon path {
  fill: none;
  stroke: var(--main-text);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nr-title-ribbon circle {
  fill: var(--nr-orange);
}

@media (max-width: 991px) {
  .nr-title-ribbon {
    margin-left: auto;
    margin-right: auto;
  }
}

/* 4d. Logo : le ruban se redessine au survol */
@keyframes nrLogoDraw {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@media (hover: hover) and (pointer: fine) {
  header a:hover > .logo {
    animation: nrLogoDraw .7s cubic-bezier(.65, 0, .35, 1) both;
  }
}

/* ====================================== 5. Micro-interactions ====================================== */
/* Halo orange qui suit le curseur dans les blocs de section */
.nr-spot {
  background-image: radial-gradient(520px circle at var(--nr-sx, -999px) var(--nr-sy, -999px), rgba(252, 138, 35, .075), transparent 62%);
  background-repeat: no-repeat;
}

.aryaBtn img,
.side-menu-ul li a img,
.gallery-item-sub img {
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .3s ease;
}

.phone-num,
.call-num {
  background-image: linear-gradient(var(--nr-orange), var(--nr-orange));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size .35s ease, color .3s ease;
}

.phone-num {
  display: inline-block;
}

@media (hover: hover) and (pointer: fine) {
  .aryaBtn:hover img {
    transform: translate(3px, -2px) rotate(-8deg);
  }

  .side-menu-ul li a:hover img {
    transform: translateX(-4px) scale(1.12);
  }

  .side-menu-ul li a:not(.active):hover {
    color: var(--main-text);
  }

  .phone-num:hover,
  .call-num:hover {
    background-size: 100% 2px;
    color: var(--nr-orange);
  }

  .gallery-item-sub {
    overflow: hidden;
    border-radius: 20px;
  }

  .gallery-item-sub:hover img {
    transform: scale(1.045);
  }
}

/* ====================================== 6. Apparitions / texte révélé ====================================== */
.nr-reveal {
  opacity: 0;
  transform: translateY(36px);
  will-change: opacity, transform;
}

.nr-words .word {
  opacity: var(--nr-o, 1);
  transition: opacity .25s linear;
}

/* ====================================== 7. Lenis ====================================== */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* ====================================== Accessibilité ====================================== */
@media (prefers-reduced-motion: reduce) {
  .whatsapp-toggle,
  .nr-magnetic,
  .aryaBtn img,
  .side-menu-ul li a img,
  .gallery-item-sub img {
    transition: none !important;
    animation: none !important;
    translate: none !important;
  }

  .nr-reveal {
    opacity: 1;
    transform: none;
  }

  .nr-ribbon-side,
  .nr-ribbon-top {
    display: none;
  }
}