/* =====================================================================
   Composant : bouton téléphone — même géométrie que « Demander un devis »
   Fichier : assets/css/phone.css — chargé par app/views/header.php
   Porte sur : .btn-tel (corps de page : héros, sections, formulaire, colonne
   latérale, bandeau final — produit par tel_block()), .nav-phone (en-tête),
   .cta-pair (les deux boutons côte à côte), .mobile-bar (barre fixe mobile),
   .footer-phone (pied de page), .m-phone (menu mobile plein écran).

   RÈGLE : le bouton téléphone et le bouton devis partagent la MÊME classe de
   base .btn (hauteur, rayon 999px, bordure 2px, espacement 14px 24px ou
   16px 30px en .btn-lg, icône 17px, gap 9px) et la même graisse (700) ;
   seule la couleur diffère. Aucun contour supplémentaire, aucune animation
   d'icône : les deux boutons sont géométriquement identiques et alignés.
   Additif : aucune règle globale du site n'est redéfinie.
   ===================================================================== */

/* Corps de page : bleu sur fond clair (texte et icône blancs, liseré bleu foncé) */
.btn-tel{background:var(--blue,#0B63CE);color:#fff;border:2px solid #0a56b3;font-weight:700;letter-spacing:.01em;text-shadow:none;box-shadow:0 14px 30px -12px rgba(11,99,206,.55),0 2px 0 rgba(0,0,0,.06)}
.btn-tel .ic{color:#fff}
.btn-tel:hover,.btn-tel:focus-visible{background:var(--blue-700,#0a56b3);border-color:#083f85;color:#fff;box-shadow:0 18px 34px -12px rgba(11,99,206,.65)}
.btn-tel:focus-visible{outline:3px solid #0B63CE;outline-offset:3px}
.btn-tel:hover .ic{transform:translateX(3px)}

/* Sur fond bleu nuit (héros des pages produits / guides / devis, bandeau final) : blanc, texte et icône bleus,
   même halo clair que le bouton devis au même endroit (cta.css) — jamais de bleu sur bleu */
.page-hero .btn-tel,.on-blue .btn-tel,.cta-in .btn-tel,.showcase .btn-tel,.footer .btn-tel{background:#fff;color:var(--blue-700,#0a56b3);border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.16),0 18px 36px -12px rgba(0,0,0,.55)}
.page-hero .btn-tel .ic,.on-blue .btn-tel .ic,.cta-in .btn-tel .ic,.showcase .btn-tel .ic,.footer .btn-tel .ic{color:var(--blue-700,#0a56b3)}
.page-hero .btn-tel:hover,.on-blue .btn-tel:hover,.cta-in .btn-tel:hover,.showcase .btn-tel:hover,.footer .btn-tel:hover{background:#eef4ff;color:var(--blue-700,#0a56b3);border-color:#eef4ff}

/* Les deux boutons côte à côte, sur la même ligne, centres alignés */
.cta-pair{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px}
.cta-inline .cta-pair{justify-content:flex-start}
.cta-actions .cta-pair{justify-content:flex-start}
/* Bandeau final : colonne des boutons un peu plus large pour que les deux tiennent sur une ligne (ordinateur) */
@media (min-width:1024px){.cta-in{grid-template-columns:1fr 1fr}}
/* Fin de page : même largeur minimale que le bouton devis (cta.css) */
.cta-end .btn-tel{min-width:min(100%,320px)}
/* Colonne latérale : les deux boutons en pleine largeur, l'un au-dessus de l'autre (comme .side-cta) */
.sidebar .btn-tel{width:100%;margin-bottom:12px}
/* Bloc d'introduction du formulaire */
.form-intro .btn-tel{margin-top:8px}

/* En-tête : même géométrie que le bouton devis compact (.nav-quote.btn-cta, cta.css) :
   même espacement, même bordure 2px, même icône 17px, même graisse — pas d'anneau, pas d'animation */
.nav-phone{padding:10px 16px;border:2px solid #0a56b3;font-size:.88rem;line-height:1;font-weight:700;letter-spacing:.01em;gap:9px;box-shadow:0 14px 30px -12px rgba(11,99,206,.55),0 2px 0 rgba(0,0,0,.06)}
.nav-quote.btn-cta{gap:9px;line-height:1}
.nav-phone .ic{width:17px;height:17px}
.nav-phone:hover{background:var(--blue-700,#0a56b3);border-color:#083f85}

/* Pied de page (fond bleu nuit) : le numéro devient une pastille JAUNE, texte foncé */
.footer .footer-phone{display:inline-flex;align-items:center;gap:10px;background:var(--yellow,#FFC61A);color:#1f1700!important;padding:12px 20px;border-radius:999px;font-size:1.1rem!important;box-shadow:0 14px 30px -12px rgba(0,0,0,.5);transition:transform .25s,background .25s;margin:4px 0 8px}
.footer .footer-phone .ic{color:#1f1700}
.footer .footer-phone:hover{background:#ffd23f;color:#1f1700!important;transform:translateY(-2px)}

/* Menu mobile plein écran (fond bleu nuit) : bouton d'appel jaune, pleine largeur */
.mobile-nav .m-phone{margin-top:14px;width:100%;justify-content:center}

/* Barre fixe basse (mobile). En-tête sur petit écran : la pastille passe en icône seule
   (le numéro complet est dans la barre fixe basse) — sinon la pastille + le menu débordent à 375 px. */
@media (max-width:640px){
  .nav-phone{padding:10px 12px}
  .nav-phone span{display:none}
  .mobile-bar .mobile-call{position:relative;box-shadow:inset 0 2px 0 rgba(255,255,255,.25)}
  .mobile-bar .mobile-quote{font-size:.74rem;letter-spacing:0;gap:6px;padding:0 6px;text-align:center;line-height:1.15}
  /* Le bandeau cookies (z-index 120) se place au-dessus de la barre fixe (62 px) au lieu de la recouvrir */
  .mobile-bar ~ .cookie-bar{bottom:62px}
  /* Les deux boutons empilés, même largeur */
  .cta-pair{flex-direction:column;align-items:stretch}
  .cta-pair .btn-cta,.cta-pair .btn-tel,.cta-inline .btn-tel,.cta-end .btn-tel{width:100%;justify-content:center}
  .hero-actions .btn-cta,.hero-actions .btn-tel{width:100%;justify-content:center}
}