/* ==========================================================================
   VARIABLES (facultatif : change les couleurs ici)
   ========================================================================== */
:root{
  --dcb-primary     : #0d4b9c;   /* bleu du bouton */
  --dcb-primary-dim : #093879;   /* bleu foncé au survol */
  --dcb-text        : #ffffff;   /* texte & icône blancs */
  --dcb-overlay     : rgba(0,0,0,.45);  /* voile foncé derrière la pop-up */
}

/* ==========================================================================
   BOUTON FLOTTANT
   ========================================================================== */
#dual-call-btn{
  position:fixed;
  right:20px;                /* marge écran */
  bottom:20px;
  width:60px;                /* diamètre du cercle */
  height:60px;
  border-radius:50%;
  background:var(--dcb-primary);
  color:var(--dcb-text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:9999;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  transition:background .2s ease, transform .15s ease;
}

/* léger zoom au survol (desktop) / au tap (mobile) */
#dual-call-btn:hover,
#dual-call-btn:active{
  background:var(--dcb-primary-dim);
  transform:scale(1.05);
}

/* icône SVG (ou Font Awesome) à l’intérieur du bouton */
#dual-call-btn svg,
#dual-call-btn i{
  width:34px;
  height:34px;
  font-size:34px;      /* utile si tu utilises Font Awesome */
  fill:var(--dcb-text);
  color:var(--dcb-text);
  pointer-events:none; /* laisse le clic se faire sur le bouton parent */
}

/* ==========================================================================
   OVERLAY & POP-UP
   ========================================================================== */
#dual-call-popup{
  position:fixed;
  inset:0;                           /* couvre tout l’écran */
  background:var(--dcb-overlay);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000;
  transition:opacity .25s ease;
}

/* cachée par défaut */
#dual-call-popup.hidden{
  opacity:0;
  pointer-events:none;
}

/* fenêtre intérieure */
.dual-call-popup-inner{
  background:#ffffff;
  padding:28px 38px 32px;
  border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.25);
  max-width:90vw;
  width:480px;
  text-align:center;
  animation:dcb-pop .25s ease-out;
}

/* petite animation d’apparition */
@keyframes dcb-pop{
  0%   {transform:scale(.85); opacity:0;}
  100% {transform:scale(1);   opacity:1;}
}

/* liens téléphone */
.call-option{
  display:block;
  margin:14px 0;
  padding:12px 0;
  font-size:18px;
  font-weight:600;
  text-decoration:none;
  color:var(--dcb-primary);
  border:2px solid var(--dcb-primary);
  border-radius:6px;
  transition:background .2s ease, color .2s ease;
}

.call-option:hover,
.call-option:focus{
  background:var(--dcb-primary);
  color:var(--dcb-text);
}

/* ==========================================================================
   RESPONSIVE (optionnel : replacer le bouton à gauche si chevauche clavier/iOS)
   ========================================================================== */
/* @media (max-width:480px){
  #dual-call-btn{ right:16px; bottom:16px; width:70px; height:70px; }
} */