/* ============================================================
   phare-state.css — Bouton Phare : état ALLUMÉ / ÉTEINT clair partout
   Ajout 05/07/2026. 100% ADDITIF & réversible : ne change aucune
   structure, seulement l'apparence d'ÉTAT (couleur / halo / badge).
   Chargé EN DERNIER (après phare-light.css) → gagne en jour comme en nuit.

   ON  = turquoise / vert lumineux + halo (visible des voyageurs)
   OFF = gris / bleu nuit, sans halo (invisible)
   Classes : .phare-state-on/off · .phare-badge-on/off · .mobile-nav-phare-on/off
   ============================================================ */

:root{
  --phare-on-1:#12d3a7;  --phare-on-2:#0bb0d6;   /* turquoise → cyan lumineux */
  --phare-on-glow:rgba(18,211,167,.55);
  --phare-off-1:#2a3648; --phare-off-2:#1a2436;  /* gris / bleu nuit */
  --phare-off-ink:#c3cede;
}

/* ============================================================
   1) BADGE ON / OFF (réutilisable partout)
   ============================================================ */
.phare-badge{
  display:inline-block; font:800 10px/1 'Inter',system-ui,sans-serif;
  letter-spacing:.06em; padding:3px 6px; border-radius:999px; vertical-align:middle;
}
.phare-badge-on{  background:#04121a; color:#12d3a7; }
.phare-badge-off{ background:rgba(255,255,255,.14); color:var(--phare-off-ink); }

/* ============================================================
   2) BOUTON DU HEADER (.pub-phare) — ordinateur
   ============================================================ */
.pub-phare{ position:relative; }
/* ÉTEINT : gris / bleu nuit, aucun halo */
.pub-phare.phare-state-off{
  background:linear-gradient(135deg,var(--phare-off-1),var(--phare-off-2)) !important;
  border:1px solid rgba(120,140,165,.35) !important;
  color:var(--phare-off-ink) !important;
  box-shadow:none !important;
}
.pub-phare.phare-state-off .phare-label{ color:var(--phare-off-ink) !important; }
/* ALLUMÉ : turquoise/vert + halo (texte foncé pour un contraste fort) */
.pub-phare.phare-state-on{
  background:linear-gradient(135deg,var(--phare-on-1),var(--phare-on-2)) !important;
  border:1px solid rgba(18,211,167,.6) !important;
  color:#04121a !important;
  box-shadow:0 0 20px var(--phare-on-glow) !important;
}
.pub-phare.phare-state-on .phare-label{ color:#04121a !important; font-weight:700; }
.pub-phare.phare-state-on svg{ color:#04121a !important; }

/* ============================================================
   3) BARRE MOBILE — bouton central « Phare »
   ============================================================ */
.bottom-nav .bn-cta .bn-plus{ position:relative; transition:background .25s, box-shadow .25s; }
.bottom-nav .bn-cta .phare-badge{
  position:absolute; top:-6px; right:-8px; z-index:2; padding:2px 5px;
  box-shadow:0 1px 4px rgba(0,0,0,.45);
}
/* ALLUMÉ */
.bottom-nav .bn-cta.mobile-nav-phare-on{ color:#12d3a7 !important; }
.bottom-nav .bn-cta.mobile-nav-phare-on .bn-plus{
  background:linear-gradient(135deg,var(--phare-on-1),var(--phare-on-2)) !important;
  box-shadow:0 0 0 3px rgba(18,211,167,.16), 0 4px 18px var(--phare-on-glow) !important;
  animation:phare-pulse 2.4s ease-in-out infinite;
}
.bottom-nav .bn-cta.mobile-nav-phare-on .bn-plus svg{ color:#04121a !important; }
/* ÉTEINT */
.bottom-nav .bn-cta.mobile-nav-phare-off{ color:#9fb0c6 !important; }
.bottom-nav .bn-cta.mobile-nav-phare-off .bn-plus{
  background:linear-gradient(135deg,var(--phare-off-1),var(--phare-off-2)) !important;
  box-shadow:0 3px 12px rgba(0,0,0,.45) !important;
  animation:none;
}
.bottom-nav .bn-cta.mobile-nav-phare-off .bn-plus svg{ color:#aeb9cb !important; }

@keyframes phare-pulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(18,211,167,.16), 0 4px 18px var(--phare-on-glow); }
  50%    { box-shadow:0 0 0 6px rgba(18,211,167,.08), 0 6px 26px var(--phare-on-glow); }
}

/* ============================================================
   4) Petits écrans (360 / 390 / 430) : garde le texte lisible et compact
   ============================================================ */
@media (max-width:430px){
  .bottom-nav .bn-cta .phare-label{ font-weight:700; }
}
@media (max-width:360px){
  .bottom-nav .bn-cta .phare-badge{ top:-5px; right:-6px; padding:2px 4px; font-size:8px; }
}

/* Accessibilité : pas d'animation si l'utilisateur préfère moins de mouvement */
@media (prefers-reduced-motion:reduce){
  .bottom-nav .bn-cta.mobile-nav-phare-on .bn-plus{ animation:none; }
}