/* ============================================================
   DÉPANNE-MOI11 — V80 FUTURISTE / NÉON PREMIUM
   Couche VISUELLE uniquement.
   - Aucun menu supprimé.
   - Aucun lien fonctionnel modifié.
   - PC + mobile.
   - Animations réduites automatiquement si l'appareil le demande.
   ============================================================ */

@property --dm11-v80-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root{
  --dm11-v80-cyan:#43e7ff;
  --dm11-v80-blue:#218dff;
  --dm11-v80-violet:#786cff;
  --dm11-v80-ice:#dff8ff;
  --dm11-v80-deep:#020a18;
  --dm11-v80-panel:rgba(7,30,61,.78);
  --dm11-v80-line:rgba(73,215,255,.24);
}

html{scroll-behavior:smooth}
body{
  --dm11-v80-angle:0deg;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{
  background:rgba(36,194,255,.30);
  color:#fff;
}

/* ------------------------------------------------------------
   Scroll progress — ajouté par JS, visuel uniquement
   ------------------------------------------------------------ */
.dm11-v80-progress{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:3px;
  z-index:2147480000;
  pointer-events:none;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,#27dfff,#1f8cff 48%,#8172ff 78%,#4af4ff);
  box-shadow:0 0 12px rgba(52,216,255,.9),0 0 24px rgba(41,132,255,.45);
  will-change:transform;
}

/* ------------------------------------------------------------
   Boutons néon animés — uniquement les CTA marqués par JS
   ------------------------------------------------------------ */
.dm11-v80-neon{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  color:#fff!important;
  border:1px solid transparent!important;
  background:
    linear-gradient(145deg,#073c76,#0755a5) padding-box,
    conic-gradient(
      from var(--dm11-v80-angle),
      rgba(67,231,255,.18),
      #43e7ff 18%,
      #218dff 42%,
      #786cff 62%,
      #43e7ff 82%,
      rgba(67,231,255,.18)
    ) border-box!important;
  box-shadow:
    0 8px 24px rgba(0,91,190,.25),
    0 0 18px rgba(46,207,255,.20),
    inset 0 1px rgba(255,255,255,.12)!important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease!important;
  animation:
    dm11-v80-neon-turn 7s linear infinite,
    dm11-v80-neon-breathe 3.4s ease-in-out infinite!important;
}

.dm11-v80-neon[data-dm11-v80-tone="phone"]{
  background:
    linear-gradient(145deg,#0d633a,#087341) padding-box,
    conic-gradient(
      from var(--dm11-v80-angle),
      rgba(97,255,178,.16),
      #63ffc1 22%,
      #28e6a0 44%,
      #41dfff 68%,
      #63ffc1 88%,
      rgba(97,255,178,.16)
    ) border-box!important;
  box-shadow:
    0 8px 24px rgba(8,119,70,.24),
    0 0 18px rgba(68,238,171,.18),
    inset 0 1px rgba(255,255,255,.12)!important;
}

.dm11-v80-neon::after{
  content:"";
  position:absolute;
  inset:-80% -25%;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.20) 49%,transparent 60%);
  transform:translateX(-70%) rotate(4deg);
  animation:dm11-v80-shine 6.5s ease-in-out infinite;
}

@media (hover:hover) and (pointer:fine){
  .dm11-v80-neon:hover{
    transform:translateY(-2px) scale(1.01)!important;
    filter:brightness(1.08);
    box-shadow:
      0 13px 30px rgba(0,93,200,.30),
      0 0 28px rgba(56,218,255,.34),
      inset 0 1px rgba(255,255,255,.16)!important;
  }
}

/* ------------------------------------------------------------
   Cartes : relief "glass tech" sans changer leur contenu
   ------------------------------------------------------------ */
.dm11-v80-card{
  position:relative!important;
  border-color:rgba(72,206,255,.22)!important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.14),
    inset 0 1px rgba(255,255,255,.035)!important;
  transition:
    transform .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    filter .24s ease!important;
}

.dm11-v80-card::before{
  content:"";
  position:absolute;
  left:9%;
  right:9%;
  top:-1px;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(92,226,255,.72),transparent);
  opacity:.70;
}

@media (hover:hover) and (pointer:fine){
  .dm11-v80-card:hover{
    transform:translateY(-3px)!important;
    border-color:rgba(75,220,255,.42)!important;
    box-shadow:
      0 18px 44px rgba(0,0,0,.20),
      0 0 26px rgba(30,167,255,.10),
      inset 0 1px rgba(255,255,255,.06)!important;
  }
}

/* ------------------------------------------------------------
   Titres et icônes : lumière douce, pas "gaming"
   ------------------------------------------------------------ */
body.home-page .hero h1,
.svc-hero h1,
.tp-hero h1,
.faq-hero h1,
.booking-hero h1,
.packhero h1,
.page-hero h1,
main h1{
  text-shadow:0 4px 26px rgba(0,111,255,.16)!important;
}

.service-icon,
.detail-service-icon,
.quick-icon,
.svc-card-icon,
.tp-card-icon,
.faq-highlight-icon{
  filter:drop-shadow(0 0 11px rgba(56,210,255,.25));
}

/* ------------------------------------------------------------
   Formulaires : focus futuriste et lisible
   ------------------------------------------------------------ */
body input:not([type="checkbox"]):not([type="radio"]):focus,
body textarea:focus,
body select:focus{
  outline:none!important;
  border-color:rgba(62,213,255,.82)!important;
  box-shadow:
    0 0 0 3px rgba(35,174,255,.12),
    0 0 20px rgba(41,184,255,.12)!important;
}

/* ------------------------------------------------------------
   Menu PC : structure inchangée, finition V80
   ------------------------------------------------------------ */
@media (min-width:821px){
  .dm11-v48-desktop-header{
    background:
      linear-gradient(180deg,rgba(1,10,26,.98),rgba(2,14,34,.97))!important;
    border-bottom-color:rgba(69,221,255,.27)!important;
    box-shadow:
      0 10px 35px rgba(0,0,0,.20),
      0 1px 0 rgba(90,223,255,.06)!important;
    backdrop-filter:blur(15px)!important;
  }

  .dm11-v48-brand img{
    filter:
      drop-shadow(0 10px 18px rgba(0,0,0,.30))
      drop-shadow(0 0 12px rgba(58,210,255,.11))!important;
    animation:dm11-v80-logo-breathe 5.4s ease-in-out infinite;
  }

  .dm11-v48-menu-link{
    overflow:hidden!important;
  }

  .dm11-v48-menu-link::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(110deg,transparent 25%,rgba(97,225,255,.09) 50%,transparent 75%);
    transform:translateX(-110%);
    transition:transform .45s ease;
  }

  .dm11-v48-menu-link:hover::before,
  .dm11-v48-menu-link.active::before{
    transform:translateX(110%);
  }

  .dm11-v48-menu-link.active{
    border-color:rgba(78,222,255,.76)!important;
    box-shadow:
      0 0 0 1px rgba(48,182,255,.07),
      0 0 24px rgba(0,196,255,.24),
      inset 0 0 14px rgba(0,208,255,.08)!important;
    animation:dm11-v80-menu-pulse 3.2s ease-in-out infinite;
  }
}

/* ------------------------------------------------------------
   Accueil : finition hero + barre "tech locale"
   ------------------------------------------------------------ */
body.home-page .hero{
  isolation:isolate;
}

body.home-page .hero-copy{
  filter:drop-shadow(0 12px 34px rgba(0,0,0,.10));
}

body.home-page .hero-badges span{
  border-color:rgba(82,219,255,.23)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.04);
}

.dm11-v80-signalbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:13px;
  max-width:760px;
}

.dm11-v80-signalbar span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:30px;
  padding:5px 10px;
  border:1px solid rgba(68,213,255,.20);
  border-radius:999px;
  background:rgba(3,25,55,.58);
  color:#d9f5ff;
  font-size:10px;
  font-weight:850;
  letter-spacing:.02em;
  backdrop-filter:blur(9px);
  box-shadow:inset 0 1px rgba(255,255,255,.04);
}

.dm11-v80-signalbar .dm11-v80-live-dot{
  width:7px;
  height:7px;
  padding:0;
  min-height:0;
  border:0;
  border-radius:50%;
  background:#5effac;
  box-shadow:0 0 11px rgba(94,255,172,.8);
  animation:dm11-v80-dot 2.2s ease-in-out infinite;
}

/* ------------------------------------------------------------
   Pages internes : petites finitions cohérentes
   ------------------------------------------------------------ */
.svc-hero-panel,
.tp-hour-card,
.faq-price-card,
.booking-hero-card,
.rdv-launch-panel,
.anti-spam-box,
.cta,
.packpromo{
  border-color:rgba(76,211,255,.24)!important;
  box-shadow:
    0 18px 45px rgba(0,0,0,.16),
    0 0 30px rgba(31,155,255,.05)!important;
}

.pro-footer,
footer.footer{
  border-top-color:rgba(71,208,255,.18)!important;
}

/* ------------------------------------------------------------
   Mobile : ON GARDE LE MENU. On améliore seulement son habillage.
   ------------------------------------------------------------ */
@media (max-width:820px){
  /* Aucun display:none, aucune modification du nombre d'items. */
  .dm17-mobile-nav{
    background:
      linear-gradient(180deg,rgba(5,39,77,.97),rgba(2,18,39,.98))!important;
    border-color:rgba(82,220,255,.37)!important;
    box-shadow:
      0 16px 45px rgba(0,0,0,.42),
      0 0 24px rgba(28,166,255,.09),
      inset 0 1px rgba(255,255,255,.04)!important;
    backdrop-filter:blur(16px)!important;
  }

  .dm17-mobile-nav a.active{
    color:#fff!important;
    background:linear-gradient(180deg,rgba(28,123,210,.28),rgba(14,72,135,.22))!important;
    box-shadow:
      inset 0 0 0 1px rgba(73,214,255,.14),
      0 0 13px rgba(38,178,255,.08)!important;
  }

  .dm17-mobile-nav a.active i{
    color:#69ecff!important;
    filter:drop-shadow(0 0 8px rgba(72,223,255,.52))!important;
  }

  .dm17-mobile-nav .nav-rdv-icon{
    border-color:rgba(255,255,255,.20)!important;
    background:linear-gradient(145deg,#168aff,#21cfff)!important;
    box-shadow:
      0 8px 23px rgba(0,112,255,.38),
      0 0 0 1px rgba(81,228,255,.22),
      0 0 23px rgba(33,202,255,.18)!important;
    animation:dm11-v80-mobile-rdv 3.4s ease-in-out infinite;
  }

  .v12-bottom-sheet{
    background:linear-gradient(180deg,rgba(7,39,76,.99),rgba(2,17,37,.99))!important;
    border-color:rgba(75,216,255,.32)!important;
    box-shadow:0 -18px 55px rgba(0,0,0,.42)!important;
    backdrop-filter:blur(18px)!important;
  }

  .v12-sheet-grid a{
    border-color:rgba(78,214,255,.15)!important;
    box-shadow:inset 0 1px rgba(255,255,255,.03);
  }

  body.home-page .hero-actions{
    gap:9px!important;
  }

  .dm11-v80-neon{
    animation:
      dm11-v80-neon-turn 9s linear infinite,
      dm11-v80-neon-breathe-mobile 4.2s ease-in-out infinite!important;
  }

  .dm11-v80-card{
    /* Sur mobile, aucune translation : stabilité du tactile. */
    transform:none!important;
  }

  .dm11-v80-signalbar{
    gap:6px;
    margin-top:10px;
  }

  .dm11-v80-signalbar span{
    min-height:27px;
    padding:4px 8px;
    font-size:9px;
  }
}

/* Ancien menu mobile éventuel : s'il est encore utilisé sur une page,
   on l'améliore visuellement sans toucher à son affichage. */
@media (max-width:820px){
  .mobile-bottom{
    border-top-color:rgba(71,218,255,.42)!important;
    background:rgba(2,15,34,.97)!important;
    box-shadow:0 -14px 34px rgba(0,0,0,.28)!important;
    backdrop-filter:blur(15px)!important;
  }
  .mobile-bottom a.active{
    color:#64edff!important;
    text-shadow:0 0 10px rgba(71,222,255,.32);
  }
}

/* ------------------------------------------------------------
   Reveal progressif : uniquement si JS active le mode motion
   ------------------------------------------------------------ */
body.dm11-v80-motion .dm11-v80-reveal{
  opacity:.01;
  transform:translateY(14px);
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.2,.75,.2,1);
}

body.dm11-v80-motion .dm11-v80-reveal.dm11-v80-visible{
  opacity:1;
  transform:none;
}

/* ------------------------------------------------------------
   Accessibilité / focus
   ------------------------------------------------------------ */
body a:focus-visible,
body button:focus-visible{
  outline:2px solid rgba(75,225,255,.92)!important;
  outline-offset:3px!important;
}

/* ------------------------------------------------------------
   Animations
   ------------------------------------------------------------ */
@keyframes dm11-v80-neon-turn{
  to{--dm11-v80-angle:360deg}
}
@keyframes dm11-v80-neon-breathe{
  0%,100%{box-shadow:0 8px 24px rgba(0,91,190,.22),0 0 13px rgba(46,207,255,.16),inset 0 1px rgba(255,255,255,.12)}
  50%{box-shadow:0 10px 27px rgba(0,91,190,.28),0 0 27px rgba(46,207,255,.29),inset 0 1px rgba(255,255,255,.16)}
}
@keyframes dm11-v80-neon-breathe-mobile{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.06)}
}
@keyframes dm11-v80-shine{
  0%,63%{transform:translateX(-78%) rotate(4deg);opacity:0}
  72%{opacity:.62}
  90%,100%{transform:translateX(78%) rotate(4deg);opacity:0}
}
@keyframes dm11-v80-logo-breathe{
  0%,100%{filter:drop-shadow(0 10px 18px rgba(0,0,0,.30)) drop-shadow(0 0 10px rgba(58,210,255,.08))}
  50%{filter:drop-shadow(0 10px 18px rgba(0,0,0,.30)) drop-shadow(0 0 18px rgba(58,210,255,.16))}
}
@keyframes dm11-v80-menu-pulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.08)}
}
@keyframes dm11-v80-mobile-rdv{
  0%,100%{filter:brightness(1);transform:scale(1)}
  50%{filter:brightness(1.08);transform:scale(1.025)}
}
@keyframes dm11-v80-dot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(.82)}
}

/* ------------------------------------------------------------
   Appareils modestes / utilisateurs préférant moins d'animations
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .dm11-v80-neon,
  .dm11-v80-neon::after,
  .dm11-v48-brand img,
  .dm11-v48-menu-link.active,
  .dm17-mobile-nav .nav-rdv-icon,
  .dm11-v80-signalbar .dm11-v80-live-dot{
    animation:none!important;
  }
  body.dm11-v80-motion .dm11-v80-reveal,
  body.dm11-v80-motion .dm11-v80-reveal.dm11-v80-visible{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}

@media (max-width:420px){
  .dm11-v80-signalbar span:nth-child(n+4){display:none}
}