/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: support@themesbrand.com
File: Custom Css File
*/

#help-fab{
  position: fixed;
  right: 20px;
  bottom: 24px;
  width: 48px; height: 48px;
  line-height: 1;
  font-weight: 700;
  font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.15);
  z-index: 1040;
}
/* --- Modal tuto : look Reno3R --- */
.tuto-modal .modal-content{
  border: 0;
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(16,24,40,.18);
  overflow: hidden;
}
.tuto-modal .modal-header{
  background: linear-gradient(135deg, var(--bs-primary), #6f7ef7);
  color: #fff;
  padding: 16px 20px;
}
.tuto-modal .modal-title{
  font-weight: 700;
  letter-spacing: .2px;
}
.tuto-modal .btn-close{
  filter: invert(1) grayscale(100%); /* close blanche */
  opacity: .85;
}
.tuto-modal .modal-body{
  padding: 22px 22px 8px;
  color: #364152;
  font-size: .975rem;
}
.tuto-modal .modal-body strong{ color:#222; }
.tuto-modal .modal-footer{
  padding: 14px 20px 20px;
  background: linear-gradient(180deg, rgba(0,0,0,.02), transparent);
}

/* Bouton flottant d’aide */
#help-fab{
  position: fixed; right: 18px; bottom: 18px; z-index: 1062;
  width: 44px; height: 44px; line-height: 42px; font-weight: 700;
  box-shadow: 0 10px 28px rgba(16,24,40,.16);
}

/* --- Coachmark (flèche + anneau) --- */
.coach-ring{
  position: fixed; z-index: 1062; pointer-events: none;
  border: 2px solid var(--bs-primary);
  border-radius: 10px;
  box-shadow:
    0 0 0 6px rgba(13,110,253,.12),  /* halo couleur */
    0 0 0 9999px rgba(17,24,39,.45); /* assombrir le reste */
  transition: all .18s ease;
}
.coach-bubble{
  position: fixed; z-index: 1063; pointer-events: none;
  background:#fff; color:#111827;
  border-radius: 12px; padding: 10px 12px;
  box-shadow: 0 16px 40px rgba(16,24,40,.18);
  font-size: .925rem; max-width: 340px;
}
.coach-bubble::after{
  content:""; position:absolute; width:0; height:0;
  border:10px solid transparent; /* flèche */
}
/* variantes de flèche (selon placement) */
.coach-bubble[data-pos="right"]::after{ 
  left:-20px; top:18px; border-right-color:#fff;
}
.coach-bubble[data-pos="left"]::after{
  right:-20px; top:18px; border-left-color:#fff;
}
.coach-bubble[data-pos="top"]::after{
  left:20px; bottom:-20px; border-top-color:#fff;
}
.coach-bubble[data-pos="bottom"]::after{
  left:20px; top:-20px; border-bottom-color:#fff;
}