/* ==========================================================================
   NETORIA — Couche "premium" : animations au scroll, micro-interactions,
   et styles de l'assistant (chatbot). Chargée sur toutes les pages.
   Progressive enhancement : sans JS, tout reste visible et fonctionnel.
   ========================================================================== */

/* --- Révélation des sections au scroll ---------------------------------- */
html.na-anim body > div > section {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
html.na-anim body > div > section.na-vis { opacity: 1; transform: none; }

/* Filet de sécurité : si le JS ne s'exécute pas, tout redevient visible */
html.na-fallback body > div > section { opacity: 1 !important; transform: none !important; }

/* Accessibilité : respecte "réduire les animations" du système */
@media (prefers-reduced-motion: reduce) {
  html.na-anim body > div > section { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --- Micro-interactions sur les boutons --------------------------------- */
.h-navy, .h-gold, .h-gold-soft, .h-outline {
  transition: background .2s, color .2s, transform .2s, box-shadow .2s !important;
}
.h-navy:hover, .h-gold:hover, .h-gold-soft:hover, .h-outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(34,75,130,0.18);
}

/* Laisse la place à l'assistant : remonte le bouton WhatsApp flottant */
a[aria-label="Discuter sur WhatsApp"] { bottom: 96px !important; }

/* --- Assistant NETORIA (chatbot) ---------------------------------------- */
#na-chat-launcher {
  position: fixed; bottom: 24px; right: 24px; z-index: 210;
  width: 58px; height: 58px; border-radius: 50%;
  background: #224B82; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(34,75,130,0.4);
  transition: transform .2s, background .2s;
}
#na-chat-launcher:hover { background: #1A3A65; transform: translateY(-2px); }
#na-chat-launcher svg { width: 27px; height: 27px; fill: #fff; }
#na-chat-launcher .na-badge {
  position: absolute; top: -2px; right: -2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #C6A15B; border: 2px solid #fff;
}

#na-chat-panel {
  position: fixed; bottom: 92px; right: 24px; z-index: 210;
  width: min(360px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 130px));
  background: #fff; border-radius: 16px;
  box-shadow: 0 18px 50px rgba(26,26,46,0.28);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  font-family: 'Lato', sans-serif;
}
#na-chat-panel.na-open { opacity: 1; transform: none; pointer-events: auto; }

.na-chat-head { background: #224B82; color: #fff; padding: 15px 18px; display: flex; align-items: center; gap: 11px; }
.na-chat-head .na-dot { width: 9px; height: 9px; border-radius: 50%; background: #5fdd9d; box-shadow: 0 0 0 3px rgba(95,221,157,.25); flex: 0 0 auto; }
.na-chat-head h4 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; margin: 0; line-height: 1.2; }
.na-chat-head p { font-size: 12px; opacity: .85; margin: 2px 0 0; }
.na-chat-close { margin-left: auto; background: none; border: none; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; opacity: .85; padding: 0 2px; }
.na-chat-close:hover { opacity: 1; }

.na-chat-body { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; background: #F7F5F0; flex: 1; }
.na-msg { max-width: 86%; padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
.na-msg.bot { background: #fff; color: #3f4257; border: 1px solid #ece4d4; align-self: flex-start; border-bottom-left-radius: 4px; }
.na-msg.user { background: #224B82; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.na-msg strong { color: inherit; font-weight: 700; }

.na-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid #ece4d4; background: #fff; }
.na-quick button { font-family: 'Poppins', sans-serif; font-size: 12.5px; color: #224B82; background: #fff; border: 1.5px solid #cdd8e6; border-radius: 20px; padding: 8px 13px; cursor: pointer; transition: background .15s, border-color .15s; }
.na-quick button:hover { background: #eef3f9; border-color: #224B82; }

.na-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.na-cta a { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; padding: 9px 14px; border-radius: 8px; }
.na-cta a.p { background: #224B82; color: #fff; }
.na-cta a.s { background: #25D366; color: #fff; }
.na-cta a.o { border: 1.5px solid #224B82; color: #224B82; }

/* --- Étiquettes des boutons flottants (différencier assistant / WhatsApp) --- */
#na-chat-launcher::after,
a[aria-label="Discuter sur WhatsApp"]::after {
  position: absolute; top: 50%; right: calc(100% + 12px);
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 500;
  padding: 7px 12px; border-radius: 20px;
  background: #fff; color: #1A1A2E;
  box-shadow: 0 4px 14px rgba(26,26,46,0.16);
  pointer-events: none;
}
#na-chat-launcher::after { content: "Assistant en ligne"; color: #224B82; }
a[aria-label="Discuter sur WhatsApp"]::after { content: "WhatsApp"; color: #1c8f43; }
/* Masque l'étiquette de l'assistant quand le panneau est ouvert */
#na-chat-launcher.na-hide-label::after { opacity: 0; visibility: hidden; }

/* Sur petits écrans, on garde les étiquettes discrètes */
@media (max-width: 480px) {
  #na-chat-launcher::after,
  a[aria-label="Discuter sur WhatsApp"]::after { font-size: 11.5px; padding: 6px 10px; }
}