/* ==========================================================
   SPS MADAGH — STYLE KIOSQUE
   ========================================================== */

:root {
  --blue: #1f6fb2;
  --blue-light: #4fa8e0;
  --sky: #bfe3f5;
  --green: #5aa85c;
  --ink: #132435;
  --ink-soft: #4a5b68;
  --bg: #f5f9fc;
  --surface: #ffffff;
  --surface-2: #eef5fa;
  --border: #dfeaf1;
  --accent: var(--blue);
  --shadow-sm: 0 2px 10px rgba(19, 36, 53, 0.06);
  --shadow-md: 0 10px 30px rgba(19, 36, 53, 0.09);
  --shadow-lg: 0 24px 60px rgba(19, 36, 53, 0.14);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
}

html[lang="ar"] {
  --font-display: "Tajawal", "Segoe UI", system-ui, sans-serif;
  --font-body: "Tajawal", "Segoe UI", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  min-height: 100vh;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  margin: 0;
  color: var(--ink);
}

.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* ---------- Background decoration ---------- */

.bg-decor {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  animation: float 22s ease-in-out infinite;
}

.blob.b1 {
  width: 46vw;
  height: 46vw;
  background: radial-gradient(circle at 30% 30%, var(--blue-light), transparent 70%);
  top: -14vw;
  left: -10vw;
  animation-duration: 26s;
}

.blob.b2 {
  width: 38vw;
  height: 38vw;
  background: radial-gradient(circle at 60% 40%, var(--green), transparent 70%);
  bottom: -16vw;
  right: -8vw;
  animation-duration: 30s;
  animation-delay: -8s;
}

.blob.b3 {
  width: 26vw;
  height: 26vw;
  background: radial-gradient(circle at 50% 50%, var(--sky), transparent 70%);
  top: 40%;
  left: 60%;
  animation-duration: 20s;
  animation-delay: -4s;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(3vw, 2vw) scale(1.06); }
  66% { transform: translate(-2vw, 3vw) scale(0.96); }
}

/* ---------- Layout shell ---------- */

.topbar,
.specialty-nav,
main.slides,
.progress-bar,
.ticker {
  position: relative;
  z-index: 2;
}

body {
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(20px, 3vw, 44px) 10px;
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 14px;
  background: #0c1b28;
  padding: 5px;
  box-shadow: var(--shadow-sm);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.brand-name {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
}

.brand-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.65rem;
  letter-spacing: 0.3px;
  background: linear-gradient(100deg, var(--blue) 10%, var(--green) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-motto {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-left: 10px;
  border-left: 2px solid var(--border);
}

.brand-loc {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-weight: 500;
}

.brand-loc .icon {
  width: 13px;
  height: 13px;
  color: var(--blue);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.live-clock {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  min-width: 92px;
  text-align: center;
}

.live-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}

.live-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e0454f;
  box-shadow: 0 0 0 0 rgba(224, 69, 79, 0.5);
  animation: pulse-dot 1.8s ease-out infinite;
}

@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(224, 69, 79, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(224, 69, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 69, 79, 0); }
}

.paused-badge {
  display: none;
  align-items: center;
  gap: 8px;
  background: #fff4e0;
  border: 1px solid #f3c97a;
  color: #8a5a00;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

body.is-paused .paused-badge {
  display: flex;
}

body.is-paused .live-badge {
  display: none;
}

/* ---------- Rappel des raccourcis clavier (installation du stand) ---------- */

.kbd-hints {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 14px);
  z-index: 50;
  display: flex;
  gap: 22px;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(19, 36, 53, 0.86);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.kbd-hints.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.kbd-hints kbd {
  display: inline-block;
  margin-right: 7px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.32);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
}

/* ---------- Specialty nav ---------- */

.specialty-nav {
  display: flex;
  gap: 8px;
  padding: 4px clamp(20px, 3vw, 44px) 14px;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.specialty-nav::-webkit-scrollbar {
  display: none;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.35s ease;
}

.nav-item .icon-wrap {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--item-color, var(--blue));
  transition: all 0.35s ease;
}

.nav-item .icon-wrap .icon {
  width: 14px;
  height: 14px;
}

.nav-item.active {
  background: var(--item-color, var(--blue));
  border-color: var(--item-color, var(--blue));
  color: #fff;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.nav-item.active .icon-wrap {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.nav-item.intro-item .icon-wrap {
  color: var(--blue);
}

/* ---------- Slides ---------- */

main.slides {
  flex: 1;
  position: relative;
  overflow: hidden;
  padding: 0 clamp(20px, 3vw, 44px);
}

.slide {
  position: absolute;
  inset: 0;
  padding: 6px 0 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px) scale(0.99);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.6s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  z-index: 1;
}

/* ----- Intro slide ----- */

.intro-slide {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 22px;
}

.intro-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--blue);
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: var(--shadow-sm);
  animation: fadeUp 0.7s ease both;
}

.intro-badge .icon {
  color: var(--green);
  animation: spin-slow 6s linear infinite;
}

.intro-slide h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  font-weight: 800;
  max-width: 18ch;
  line-height: 1.22;
  background: linear-gradient(100deg, var(--blue) 10%, var(--green) 60%, var(--blue-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fadeUp 0.8s ease 0.05s both;
}

.intro-slide .intro-sub {
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  line-height: 1.6;
  animation: fadeUp 0.8s ease 0.15s both;
}

.intro-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 6px;
  animation: fadeUp 0.8s ease 0.25s both;
}

.intro-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 22px;
  min-width: 130px;
  box-shadow: var(--shadow-sm);
}

.intro-stat .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.8rem;
  color: var(--blue);
  display: block;
}

.intro-stat .lbl {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 600;
}

.intro-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 900px;
  margin-top: 4px;
  animation: fadeUp 0.9s ease 0.35s both;
}

.intro-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--chip-color, var(--blue));
  background: color-mix(in srgb, var(--chip-color, var(--blue)) 10%, white);
  border: 1px solid color-mix(in srgb, var(--chip-color, var(--blue)) 25%, white);
}

.intro-chip .icon {
  width: 15px;
  height: 15px;
}

/* ----- Specialty slide ----- */

.specialty-slide .slide-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  min-height: 0;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.slide-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.icon-badge {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 65%, black));
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
}

.icon-badge .icon {
  width: 30px;
  height: 30px;
}

.eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}

.slide-header h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 800;
}

.slide-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 24px;
  align-items: start;
}

.stats-col,
.pros-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Sans ça, une colonne de la grille de la diapo peut s'élargir pour
     loger le mot le plus long de son contenu (ex. un chiffre qui grandit
     pendant l'animation du compteur), ce qui rétrécit l'autre colonne et
     fait parfois passer un texte à la ligne suivante (ex. le diplôme
     "Praticien(ne) en Médecine Traditionnelle Chinoise", le plus long du
     site) : la carte change alors de hauteur et toute la diapo "saute". */
  min-width: 0;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  flex-shrink: 0;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 18px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease;
}

.stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent);
}

.stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 2.3vw, 1.95rem);
  color: var(--accent);
  display: block;
  line-height: 1.15;
  white-space: nowrap;
}

.stat-label {
  display: block;
  margin-top: 10px;
  font-size: 0.84rem;
  color: var(--ink-soft);
  font-weight: 500;
  line-height: 1.4;
}

.reco-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  box-shadow: var(--shadow-sm);
}

.reco-card h3,
.pros-col > h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--ink);
}

.reco-card h3 .icon {
  color: var(--accent);
  width: 21px;
  height: 21px;
}

.reco-card ul li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  font-size: 1rem;
  line-height: 1.45;
  border-top: 1px dashed var(--border);
}

.reco-card ul li:first-child {
  border-top: none;
  padding-top: 2px;
}

.reco-card ul li:last-child {
  padding-bottom: 2px;
}

.reco-card ul li .icon {
  color: var(--green);
  width: 19px;
  height: 19px;
  margin-top: 2px;
  flex-shrink: 0;
}

.pros-col > h3 .icon {
  color: var(--accent);
  width: 21px;
  height: 21px;
}

.pros-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 420px;
  /* "hidden" plutôt que "auto" : un écran de stand n'est pas manipulé au
     clavier/souris, et une barre de scroll proche du seuil de hauteur
     max déclenchait une boucle de reflow (la barre apparaît, réduit la
     largeur, le texte se réajuste, la hauteur change, la barre
     disparaît, etc.) qui faisait visiblement "rebondir" les cartes. */
  overflow: hidden;
  padding-right: 2px;
}

.pro-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  transition: transform 0.4s ease;
}

.pro-photo {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  object-fit: cover;
  flex-shrink: 0;
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 60%, black));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  box-shadow: var(--shadow-sm);
}

.pro-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pro-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pro-diploma {
  font-size: 0.86rem;
  color: var(--ink-soft);
  font-weight: 500;
}

.pro-tag {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, white);
  padding: 5px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* ---------- Progress bar ---------- */

.progress-bar {
  height: 4px;
  background: var(--border);
  flex-shrink: 0;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transition: width linear;
}

/* ---------- Ticker footer ---------- */

.ticker {
  flex-shrink: 0;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  padding: 9px 0;
}

.ticker-track {
  display: inline-flex;
  gap: 60px;
  animation: scroll-left 32s linear infinite;
}

.ticker-track span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #dcecf5;
}

.ticker-track .icon {
  color: var(--green);
  width: 14px;
  height: 14px;
}

@keyframes scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Animations ---------- */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.slide.active .stat-card,
.slide.active .pro-card {
  animation: fadeUp 0.55s ease both;
}

.slide.active .stat-card:nth-child(1) { animation-delay: 0.05s; }
.slide.active .stat-card:nth-child(2) { animation-delay: 0.12s; }
.slide.active .stat-card:nth-child(3) { animation-delay: 0.19s; }

.slide.active .pro-card:nth-child(1) { animation-delay: 0.15s; }
.slide.active .pro-card:nth-child(2) { animation-delay: 0.22s; }
.slide.active .pro-card:nth-child(3) { animation-delay: 0.29s; }
.slide.active .pro-card:nth-child(4) { animation-delay: 0.36s; }

.slide.active .reco-card {
  animation: fadeUp 0.6s ease 0.1s both;
}

/* ---------- Indicateur de langue ---------- */

.lang-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lang-pill {
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.lang-pill.active {
  color: #fff;
  background: linear-gradient(120deg, var(--blue), var(--green));
  border-color: transparent;
  transform: scale(1.08);
}

/* ---------- Langue arabe (RTL) ----------
   dir="rtl" est posé sur <html> par app.js quand la langue active est
   l'arabe. Flexbox/Grid se retournent automatiquement (icônes, colonnes
   de la grille de spécialité, ordre des cartes) ; seules les propriétés
   physiques codées en dur ci-dessous ont besoin d'un miroir explicite. */

[dir="rtl"] .brand-motto {
  padding-left: 0;
  padding-right: 10px;
  border-left: none;
  border-right: 2px solid var(--border);
}

[dir="rtl"] .stat-card::before {
  inset: 0 0 0 auto;
}

[dir="rtl"] .pro-tag {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .kbd-hints kbd {
  margin-right: 0;
  margin-left: 7px;
}

[dir="rtl"] .nav-item {
  padding: 9px 10px 9px 16px;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  body {
    overflow: auto;
  }

  main.slides {
    overflow: visible;
  }

  .slide {
    position: relative;
    inset: auto;
    transform: none;
    display: none;
  }

  .slide.active {
    display: flex;
  }

  .slide-grid {
    grid-template-columns: 1fr;
  }

  .stat-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .pros-list {
    overflow: visible;
  }

  .reco-card {
    overflow: visible;
  }
}

@media (max-width: 640px) {
  .topbar {
    flex-wrap: wrap;
    gap: 10px;
  }

  .stat-row {
    grid-template-columns: 1fr 1fr;
  }

  .intro-stats {
    gap: 10px;
  }
}