/* === globals.css (projet Next.js) === */

/* <!--====== Bootstrap css ======--> */

/* <!--====== Slick Slider ======--> */

/* <!--====== Nice Select ======--> */

/* <!--====== Magnific Popup ======--> */

/* <!--====== Font Awesome ======--> */

/* <!--====== Flaticon ======--> */

/* <!--====== Main Css ======--> */


html {
  scroll-behavior: smooth;
}
.thumb-gallery .slick-slide {
  padding: 0 6px;
}
.thumb-gallery {
  margin-left: 0 !important;
}
.thumb-gallery .slick-slide .single-image {
  margin: 0 !important;
}

.testimonial-slider-one ul.slick-dots,
.product-carousel ul.slick-dots {
  display: flex !important;
}
.testimonial-slider-three .thumb-wrapper .slick-current .single-thumb {
  opacity: 1;
}
.testimonial-slider-three .thumb-wrapper .slick-current .single-thumb img {
  width: 100px;
  height: 100px;
}
.testimonial-slider-three .slick-initialized .slick-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: unset !important;
}

.hero-slider-one .slick-arrow {
  opacity: 1;
  border: none;
  background-color: var(--color-white);
  color: var(--color-primary);

  /*  */
  position: absolute;
  right: 14%;
  top: 45%;
  width: 50px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 22;
}
.hero-slider-one .next-arrow {
  margin-top: 60px;
}
.hero-slider .slick-arrow,
.testimonial-slider-two .slick-arrow {
  width: 50px;
  height: 50px;
  /* background-color: transparent; */
  border-radius: 50%;
  /* border: 2px solid rgba(255, 255, 255, 0.2); */
  /* color: var(--color-white); */
  /* opacity: 0.6; */
  transition: 0.3s;
}

.testimonial-slider-two .slick-arrow {
  position: absolute;
  bottom: -100px;
  left: 0;
  text-align: center;
  display: block;
  margin: 0 auto;
  right: 0;
}
.testimonial-slider-two .prev-arrow {
  right: 65px;
}
.testimonial-slider-two .slick-slide {
  padding: 0 10px;
}
.testimonial-slider-two .next-arrow {
  left: 65px;
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.hero-slider-two .slick-arrow {
  position: absolute;
  z-index: 22;
  left: 8%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: transparent;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  opacity: 0.6;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.hero-slider-two .next-arrow {
  left: auto;
  right: 8%;
}

/* === Bandeau Urgences H24 === */
@keyframes scrollText{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* === WhatsApp Chat (styled-jsx) === */

        /* Overlay */
        .whatsapp-overlay {
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.35);
          z-index: 9998;
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.3s ease;
        }
        .whatsapp-overlay.active {
          opacity: 1;
          pointer-events: all;
        }

        /* Panel */
        .whatsapp-chat-panel {
          position: fixed;
          top: 0;
          right: -420px;
          width: 380px;
          max-width: 100vw;
          height: 100vh;
          background: #f0f2f5;
          z-index: 9999;
          display: flex;
          flex-direction: column;
          box-shadow: -4px 0 30px rgba(0, 0, 0, 0.18);
          transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
          font-family: "Segoe UI", sans-serif;
        }
        .whatsapp-chat-panel.open {
          right: 0;
        }

        /* Header */
        .whatsapp-header {
          background: #075e54;
          padding: 16px 18px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #fff;
        }
        .whatsapp-header-info {
          display: flex;
          align-items: center;
          gap: 12px;
        }
        .whatsapp-avatar {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          background: #25d366;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 22px;
          color: #fff;
          flex-shrink: 0;
        }
        .whatsapp-header h4 {
          margin: 0;
          font-size: 15px;
          font-weight: 600;
          color: #fff;
        }
        .online-status {
          font-size: 12px;
          color: #b2dfdb;
          display: flex;
          align-items: center;
          gap: 5px;
        }
        .online-status .dot {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #25d366;
          display: inline-block;
        }
        .whatsapp-close {
          background: none;
          border: none;
          color: rgba(255, 255, 255, 0.8);
          font-size: 20px;
          cursor: pointer;
          padding: 4px;
          line-height: 1;
          transition: color 0.2s;
        }
        .whatsapp-close:hover {
          color: #fff;
        }

        /* Body */
        .whatsapp-body {
          flex: 1;
          overflow-y: auto;
          padding: 20px 16px;
          display: flex;
          flex-direction: column;
          gap: 12px;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Crect width='400' height='400' fill='%23e5ddd5'/%3E%3C/svg%3E");
          background-size: cover;
        }

        /* Chat bubbles */
        .chat-bubble {
          max-width: 85%;
          display: flex;
          flex-direction: column;
        }
        .chat-bubble.incoming {
          align-self: flex-start;
        }
        .chat-bubble.outgoing {
          align-self: flex-end;
        }
        .bubble-content {
          padding: 10px 14px;
          border-radius: 8px;
          box-shadow: 0 1px 2px rgba(0,0,0,0.12);
        }
        .incoming .bubble-content {
          background: #fff;
          border-top-left-radius: 0;
        }
        .outgoing .bubble-content {
          background: #dcf8c6;
          border-top-right-radius: 0;
        }
        .bubble-content p {
          margin: 0 0 4px;
          font-size: 14px;
          color: #303030;
          line-height: 1.5;
        }
        .bubble-content p:last-child {
          margin-bottom: 0;
        }
        .bubble-time {
          font-size: 11px;
          color: #999;
          margin-top: 3px;
          align-self: flex-end;
        }
        .incoming .bubble-time {
          align-self: flex-start;
        }

        /* Topics */
        .chat-topics {
          display: flex;
          flex-direction: column;
          gap: 8px;
          align-self: flex-start;
          width: 100%;
        }
        .topic-btn {
          background: #fff;
          border: 1.5px solid #25d366;
          color: #075e54;
          padding: 9px 16px;
          border-radius: 20px;
          font-size: 13px;
          font-weight: 500;
          cursor: pointer;
          text-align: left;
          transition: all 0.2s ease;
          box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        }
        .topic-btn:hover {
          background: #e8f5e9;
        }
        .topic-btn.selected {
          background: #25d366;
          color: #fff;
          border-color: #25d366;
        }

        /* Footer */
        .whatsapp-footer {
          padding: 12px 14px;
          background: #f0f2f5;
          display: flex;
          align-items: center;
          gap: 10px;
          border-top: 1px solid #ddd;
        }
        .whatsapp-footer input {
          flex: 1;
          border: none;
          border-radius: 24px;
          padding: 10px 18px;
          font-size: 14px;
          background: #fff;
          outline: none;
          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
          color: #303030;
        }
        .whatsapp-footer input::placeholder {
          color: #aaa;
        }
        .send-btn {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          border: none;
          background: #ccc;
          color: #fff;
          font-size: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: background 0.2s ease, transform 0.15s ease;
          flex-shrink: 0;
        }
        .send-btn.active {
          background: #25d366;
        }
        .send-btn.active:hover {
          background: #1da851;
          transform: scale(1.05);
        }
        .send-btn:disabled {
          cursor: default;
        }

        @media (max-width: 480px) {
          .whatsapp-chat-panel {
            width: 100vw;
          }
        }
      
/* === Sélecteur de médecin (styled-jsx) === */

        .doctor-select {
          position: relative;
          width: 100%;
          user-select: none;
        }

        .doctor-select__trigger {
          display: flex;
          align-items: center;
          justify-content: space-between;
          background: #fff;
          border: 1px solid #e0e0e0;
          border-radius: 4px;
          padding: 12px 16px;
          cursor: pointer;
          font-size: 14px;
          color: #666;
          transition: border-color 0.2s;
          min-height: 50px;
        }
        .doctor-select.open .doctor-select__trigger {
          border-color: var(--color-primary, #1890ff);
          box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
        }
        .doctor-select__trigger .placeholder {
          color: #999;
        }
        .doctor-select__trigger .has-value {
          color: #333;
        }
        .selected-name {
          display: flex;
          flex-direction: column;
          gap: 2px;
        }
        .selected-name small {
          font-size: 11px;
          color: #888;
          font-style: italic;
        }
        .arrow {
          font-size: 12px;
          color: #999;
          transition: transform 0.25s ease;
          flex-shrink: 0;
        }
        .arrow.rotated {
          transform: rotate(180deg);
        }

        /* Dropdown */
        .doctor-select__dropdown {
          position: absolute;
          top: calc(100% + 4px);
          left: 0;
          right: 0;
          background: #fff;
          border: 1px solid #e0e0e0;
          border-radius: 6px;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
          z-index: 999;
          overflow: hidden;
          animation: dropDown 0.18s ease;
        }
        @keyframes dropDown {
          from { opacity: 0; transform: translateY(-6px); }
          to   { opacity: 1; transform: translateY(0); }
        }

        /* Search */
        .doctor-select__search {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 10px 14px;
          border-bottom: 1px solid #f0f0f0;
          background: #fafafa;
        }
        .doctor-select__search i {
          color: #aaa;
          font-size: 13px;
          flex-shrink: 0;
        }
        .doctor-select__search input {
          flex: 1;
          border: none;
          outline: none;
          font-size: 13px;
          background: transparent;
          color: #333;
        }
        .doctor-select__search input::placeholder {
          color: #bbb;
        }

        /* List */
        .doctor-select__list {
          list-style: none;
          margin: 0;
          padding: 4px 0;
          max-height: 220px; /* ~5 items */
          overflow-y: auto;
          scrollbar-width: thin;
          scrollbar-color: #ddd transparent;
        }
        .doctor-select__list::-webkit-scrollbar {
          width: 4px;
        }
        .doctor-select__list::-webkit-scrollbar-thumb {
          background: #ddd;
          border-radius: 4px;
        }

        .doctor-select__option {
          display: flex;
          flex-direction: column;
          padding: 10px 16px;
          cursor: pointer;
          transition: background 0.15s;
          gap: 2px;
        }
        .doctor-select__option:hover {
          background: #f5f5f5;
        }
        .doctor-select__option.active {
          background: #e8f4ff;
        }
        .option-name {
          font-size: 13px;
          font-weight: 500;
          color: #333;
        }
        .option-spec {
          font-size: 11px;
          color: #888;
          font-style: italic;
        }

        .doctor-select__empty {
          padding: 14px 16px;
          text-align: center;
          color: #aaa;
          font-size: 13px;
        }