/* Effet néon sur tout le groupe de recherche au hover */
.search-group:hover {
  box-shadow: 0 0 24px #863434, 0 0 48px #86343488 !important;
  background: #232733;
}

/* Ensure hamburger is hidden on desktop for about.html (in case other styles override) */
@media (min-width: 1769px) {
  .menu-btn,
  .hamburger {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
body {
  background: linear-gradient(90deg,rgba(36,40,42,1) 0%, rgba(44,41,46,1) 50%, rgba(75,43,50,1) 100%); 
}
.about-team-card:nth-child(2) {
  position: relative;
  top: 90px;
}
/* === OUR TEAM SECTION === */
.about-team-section {
  margin: 64px 0 48px 0;
}
.about-team-title {
  text-align: center;
  color: #fff;
  font-size: 3em;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-weight: 800;
  margin-bottom: 18px;
}
.about-team-desc {
  text-align: center;
  color: #e0e0e0;
  font-size: 1.75em;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  margin-bottom: 38px;
}
.about-team-row {
  display: flex;
  gap: 38px;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 48px;
}
.about-team-card {
  border-radius: 6px;
  padding: 18px 18px 12px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 28vw;
  max-width: 60vw;
}
.about-team-img {
  width: 25vw;
  height: 40vw;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 18px;
  background: #23232a;
  border: 1px solid #e0e0e0;
}
.about-team-img-deux {
  width: 320px;
  height: 420px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 8px;
  margin-top: 20px;
  background: #23232a;
  border: 1px solid #e0e0e0;
}
.about-team-name {
  color: #fff;
  font-size: 1.35em;
  font-weight: 800;
  margin-bottom: 4px;
  text-align: center;
}
.about-team-role {
  color: #e0e0e0;
  font-size: 1em;
  font-weight: 400;
  text-align: center;
}
/* === OUR VALUES SECTION === */
.about-values-section {
  margin: 150px 0 48px 15vw;
}
.about-values-title {
  text-align: center;
  color: #fff;
  font-size: 2.6em;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-weight: 800;
  margin-bottom: 28px;
  margin-right: 15vw;
}
.about-values-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 100vw;
  margin: 0 auto;
}
.about-value-item {
  display: flex;
  align-items: center;
  gap: 18px;
}
.about-value-icon {
  width: 8vw;
  height: 38px;
  object-fit: contain;
}
.about-value-label {
  color: #fff;
  font-size: 1.75em;
  font-weight: 800;
  min-width: 140px;
}
.about-value-desc {
  color: #e0e0e0;
  font-size: 1.58em;
  font-weight: 400;
}
@media (max-width: 1500px) {
  .about-team-row {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }
  .about-team-card {
    max-width: 100%;
    min-width: 0;
  }
}
.about-row:last-child .about-img {
  transform: scaleX(-1);
}
/* === ABOUT US PAGE === */
.about-main {
  max-width: 90vw;
  margin: 0 auto;
  padding: 48px 0 60px 0;
}
  /* Ajout effets néon universels */
  /* Neon Button Effect */
  .btn, button {
    box-shadow: 0 0 8px #863434, 0 0 24px #86343444;
    transition: box-shadow 0.3s, background 0.2s;
  }
  .btn:hover, button:hover {
    box-shadow: 0 0 24px #863434, 0 0 48px #86343488;
    background: #863434;
    color: #fff;
  }

  /* Neon Card Hover Effect */
  .game-card.card-animate {
    box-shadow: 0 0 24px #863434, 0 0 48px #86343488;
    border-color: #863434;
    transform: scale(1.04) translateY(-8px);
  }

  /* Barre de recherche effet néon au survol */
  .search-bar {
    box-shadow: none !important;
  }
  .search-bar:hover, .search-bar:focus {
    box-shadow: none !important;
  }

  /* Bouton de recherche effet néon au survol */
  .search-btn {
    box-shadow: none !important;
    transition: background 0.2s, box-shadow 0.3s;
  }
  .search-btn:hover {
    box-shadow: none !important;
    background: #232733;
  }

/* Desktop: nudge search text slightly to the right (global, not inside media query) */
.search-group .search-bar, .search-group .available-search-bar {
    padding-left: 25px !important;
}

/* Mobile-specific: add subtle rounded border for clarity */
@media (max-width: 1468px) {
    .search-group .search-bar,
    .search-group .available-search-bar {

        border-radius: 12px !important;
        background-clip: padding-box !important;
    }
}
.about-title {
  text-align: center;
  color: #fff;
  font-size: 2.8em;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
  margin-bottom: 24px;
}
.about-desc {
  text-align: center;
  color: #fff;
  font-size: 1.7em;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  margin-bottom: 40px;
  line-height: 1.6;
}
.about-section {
  width: 100%;
}
.about-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 64px;
}
.about-img-col {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-img {
  max-width: 35vw;
  width: 100%;
  height: 35vw;
  border-radius: 18px;
  background: none;
}
.about-text-col {
  flex: 1 1 0;
  color: #fff;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.about-subtitle {
  font-size: 1.9em;
  font-weight: 800;
  margin-bottom: 0px;
  color: #fff;
}
.about-text {
  font-size: 2.78em;
  font-weight: 400;
  color: #e0e0e0;
  margin-bottom: 0;
  line-height: 2.2;
}
@media (max-width: 1500px) {
  .about-row {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 48px;
  }
  .about-img {
    max-width: 220px;
  }
}

/* Mobile-specific: make the Mission row side-by-side (image left, text right)
   while keeping the Vision row stacked vertically. This overrides the
   broader 900px rule only for very small screens. */
@media (max-width: 1480px) {
  /* Ensure default stacking remains for most rows */
  .about-row { flex-direction: column; gap: 12px; }

  /* Mission (first row) displayed as row: image left, text right */
  .about-mission-vision .about-row:first-of-type {
    flex-direction: row !important;
    gap: 12px !important;
    align-items: center !important;
    margin-bottom: 16px !important;
  }
  .about-mission-vision .about-row:first-of-type .about-img-col {
    flex: 0 0 44% !important;
    display: flex !important;
    justify-content: center !important;
  }
  .about-mission-vision .about-row:first-of-type .about-text-col {
    flex: 1 1 56% !important;
    text-align: left !important;
    padding-left: 8px !important;
  }
  .about-mission-vision .about-row:first-of-type .about-img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
  }

  /* Keep the second row (Vision) stacked vertically on mobile */
  /* Vision (second row) displayed as row: text left, image right */
  .about-mission-vision .about-row:nth-of-type(2) {
    flex-direction: row !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
  }
  .about-mission-vision .about-row:nth-of-type(2) .about-text-col {
    order: 0 !important;
    flex: 1 1 56% !important;
    text-align: left !important;
    padding-right: 8px !important;
  }
  .about-mission-vision .about-row:nth-of-type(2) .about-img-col {
    order: 1 !important;
    flex: 0 0 44% !important;
    display: flex !important;
    justify-content: center !important;
  }
  .about-mission-vision .about-row:nth-of-type(2) .about-img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
  }

  /* Make the main About paragraph more compact on small screens */
  .about-desc {
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
    padding: 0 12px !important;
  }

  /* Our Values: two-column layout per item on mobile (icon+label left, desc right) */
  .about-values-list {
    max-width: 92% !important;
    margin: 0 auto 8px auto !important;
    padding: 0 !important;
  }
  .about-value-item {
    display: grid !important;
    grid-template-columns: 88px 1fr !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 8px 6px !important;
    border-radius: 6px;
  }
  .about-value-icon {
    width: 32px !important;
    height: 32px !important;
    grid-column: 1 / 2 !important;
    align-self: center !important;
  }
  .about-value-label {
    grid-column: 1 / 2 !important;
    display: inline-block !important;
    margin-left: 8px !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    align-self: center !important;
  }
  .about-value-desc {
    grid-column: 2 / 3 !important;
    color: #e0e0e0 !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
  }

  /* Our Team: horizontal scroller with emphasized center card (mobile) */
  .about-team-row {
    flex-direction: row !important;
    gap: 18px !important;
    align-items: flex-end !important;
    justify-content: center !important;
    overflow-x: auto !important;
    padding: 12px 12px 94px 12px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .about-team-card {
    min-width: 4vw !important;
    max-width: 44vw !important;
    padding: 10px !important;
    border-radius: 12px !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }
  .about-team-img {
    width: 20vw !important;
    height: 35vw !important;
    border-radius: 12px !important;
    border: 3px solid rgba(255,255,255,0.95) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.45) !important;
    object-fit: cover !important;
    background: #23232a !important;
  }
  /* Emphasize center card */
  .about-team-card:nth-child(2) {
    transform: translateY(-18px) !important;
    z-index: 5 !important;
  }
  .about-team-card:nth-child(2) .about-team-img {
    width: 20vw !important;
    height: 35vw !important;
    border-width: 3px !important;
  }
  .about-team-name { font-size: 1.05rem !important; }
  .about-team-role { font-size: 0.85rem !important; }
  /* Compact Our Team description on phones */
  .about-team-desc {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    padding: 0 12px !important;
  }
}

/* Reduce paragraph size for the 'Our Mission' paragraph only */
.about-mission-vision .about-row:first-of-type .about-text {
  font-size: 1.7em; /* smaller than the global 1.78em */
  line-height: 1.6;
}

/* Mobile override: make mission paragraph compact on small phones */
@media (max-width: 1480px) {
  .about-mission-vision .about-row:first-of-type .about-text {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
  }
}

/* Reduce paragraph size for the 'Our Vision' paragraph (second row) */
.about-mission-vision .about-row:nth-of-type(2) .about-text {
  font-size: 1.7em; /* slightly smaller than mission */
  line-height: 1.55;
}

/* Mobile override: compact vision paragraph on small phones */
@media (max-width: 1480px) {
  .about-mission-vision .about-row:nth-of-type(2) .about-text {
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
  }
}

/* Mobile layout for Our Values: icon and label inline on the left, description on the right */
@media (max-width: 1480px) {
  .about-values-list {
    width: 100% !important;
    max-width: 100% !important;
    /* reduce horizontal padding so icons sit closer to the left edge */
    padding: 0 0px !important;
    box-sizing: border-box !important;
  }
  .about-value-item {
    display: grid !important;
    /* icon | label (fixed small column) | description */
    /* slightly reduce the icon/label columns so icons move nearer the page edge */
    grid-template-columns: 2px 100px 1fr !important; /* keep label narrow so desc sits closer */
    gap: 0px 8px !important; /* horizontal gap */
    align-items: start !important;
    padding: 6px 0 !important; /* reduced padding */
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  }
  .about-value-icon {
    grid-column: 1 / 2 !important;
    width: 32px !important;
    margin-left: -10vw !important;
    height: 32px !important;
    object-fit: contain !important;
    display: block !important;
    align-self: center !important;
  }
  .about-value-label {
    grid-column: 2 / 3 !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 !important;
    align-self: start !important;
    white-space: normal !important; /* allow wrap if needed */
    padding-right: 6px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .about-value-desc {
    grid-column: 2 / 4 !important;
    color: #e0e0e0 !important;
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    text-align: left !important;
  }
}