/**
 * home.css
 * Styles spécifiques à la page d'accueil Words Horizon
 */

/* ============================================
   VARIABLES
   ============================================ */
:root {
  --wh-primary: #0d6efd;
  --wh-grad-a: #0d6efd;
  --wh-grad-b: #6f42c1;
  --wh-grad-c: #e83e8c;
  --wh-card-border: rgba(13, 110, 253, .25);
  --wh-card-bg: linear-gradient(135deg, rgba(13, 110, 253, .05), rgba(111, 66, 193, .05));
  --wh-radius-lg: 1rem;
  --hug: -3rem;
  --lift: -8rem;
}

/* ============================================
   SECTION BACKGROUND
   ============================================ */
.home-section {
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(13, 110, 253, .06), transparent 55%),
    radial-gradient(1200px 500px at 110% 10%, rgba(111, 66, 193, .06), transparent 55%);
  position: relative;
}

/* ============================================
   HOME SECTIONS LAYOUT
   ============================================ */
.home-sections {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
  margin: 1.5rem 0 0;
}

.col-side {
  margin: var(--lift) var(--hug) 0 var(--hug);
}

/* ============================================
   BUBBLES
   ============================================ */
.bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 280px;
  height: 120px;
  border-radius: 999px;
  border: 3px solid var(--wh-primary);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: 0 10px 24px rgba(13, 110, 253, .12);
  transition: transform .2s ease, box-shadow .2s ease;
}

.bubble:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(13, 110, 253, .2);
}

.bubble-label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: linear-gradient(to right, var(--wh-grad-a), var(--wh-grad-b));
  color: #fff;
  padding: .35rem .9rem;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}

/* ============================================
   MINI BUBBLE
   ============================================ */
.mini-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: .4rem .9rem;
  border-radius: 999px;
  background: #0d6efd;
  color: #fff;
  border: 3px solid #0d6efd;
  box-shadow: 0 6px 16px rgba(13, 110, 253, .25);
  font-weight: 600;
  white-space: nowrap;
}

.mini-bubble:hover {
  background: #0b5ed7;
  border-color: #0b5ed7;
  color: #fff;
}

/* ============================================
   TUTORIAL & COMING SOON BUTTONS
   ============================================ */
.tutorial-btn,
.coming-soon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  border: 2px solid var(--wh-primary);
  background: transparent;
  color: var(--wh-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: .85rem;
  box-shadow: 0 6px 16px rgba(13, 110, 253, .15);
  transition: all .2s ease;
  white-space: nowrap;
  position: relative;
}

.tutorial-btn:hover {
  background: var(--wh-primary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(13, 110, 253, .25);
}

.coming-soon-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(13, 110, 253, .2);
}

.chevron-icon {
  width: .95em;
  height: .95em;
  stroke: var(--wh-primary);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}

.coming-soon-btn.active .chevron-icon {
  transform: rotate(180deg);
}

/* ============================================
   DROPDOWN PANEL
   ============================================ */
.dropdown-panel {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  margin-bottom: .5rem;
  background: #fff;
  border: 1px solid var(--wh-card-border);
  border-radius: var(--wh-radius-lg);
  box-shadow: 0 10px 26px rgba(13, 110, 253, .18);
  padding: 1rem;
  width: 320px;
  opacity: 0;
  transition: all .3s ease;
  pointer-events: none;
  z-index: 1000;
}

.dropdown-panel.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.dropdown-panel h4 {
  font-weight: 700;
  background: linear-gradient(90deg, var(--wh-grad-a), var(--wh-grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: .75rem;
  font-size: 1rem;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 0;
  color: #666;
  font-size: .85rem;
}

.feature-item::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d6efd, #6f42c1);
  flex-shrink: 0;
}

/* ============================================
   CENTER COLUMN
   ============================================ */
.center-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  transform: translateY(1rem);
}

.below-row {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  margin-top: 0;
  transform: translateY(-0.8rem);
}

/* ============================================
   LOGO STACK
   ============================================ */
.logo-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-img {
  max-width: 520px;
  width: 100%;
  height: auto;
}

/* ============================================
   WH CARDS
   ============================================ */
.wh-card {
  background: var(--wh-card-bg);
  border: 1px solid var(--wh-card-border);
  border-radius: var(--wh-radius-lg);
  box-shadow: 0 10px 26px rgba(13, 110, 253, .12);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.wh-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(13, 110, 253, .18);
  border-color: rgba(13, 110, 253, .45);
}

.wh-card .card-title {
  font-weight: 700;
  background: linear-gradient(90deg, var(--wh-grad-a), var(--wh-grad-b), var(--wh-grad-c));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: .35rem;
}

/* ============================================
   WH MISSION
   ============================================ */
.wh-mission {
  border-radius: var(--wh-radius-lg);
  border: 1px solid var(--wh-card-border);
  background: linear-gradient(160deg, rgba(13, 110, 253, .07), rgba(111, 66, 193, .07));
  box-shadow: 0 10px 26px rgba(13, 110, 253, .12);
}

/* ============================================
   RESPONSIVE - TABLETTES (768px à 991px)
   ============================================ */
@media (max-width: 991px) and (min-width: 768px) {
  .col-side {
    margin: var(--lift) calc(var(--hug) / 2) 0 calc(var(--hug) / 2);
  }
  
  .bubble {
    width: 240px;
    height: 110px;
  }
  
  .logo-img {
    max-width: 450px;
  }
  
  .below-row {
    gap: 1.8rem;
  }
  
  .dropdown-panel {
    width: 280px;
  }
}

/* ============================================
   RESPONSIVE - MOBILE (< 768px)
   ============================================ */
@media (max-width: 767px) {
  .home-sections {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 2rem 0 0;
    max-width: 100%;
  }

  .col-side {
    margin: 0 !important;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    order: unset;
  }

  .logo-img {
    max-width: 90%;
    margin: 0 auto;
  }

  .bubble {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    height: 100px;
    font-size: .9rem;
  }

  .below-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
    transform: none;
    width: 100%;
  }

  .below-row .bubble {
    max-width: 340px;
    width: 100%;
  }

  .center-column {
    transform: none;
    order: 2;
  }

  .tutorial-btn,
  .coming-soon-btn {
    font-size: .8rem;
    padding: .4rem .8rem;
  }

  .dropdown-panel {
    width: 90vw;
    max-width: 300px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
  }

  .mini-bubble {
    font-size: .85rem;
    padding: .35rem .8rem;
  }

  /* Réorganisation de l'ordre sur mobile */
  .col-side:first-child {
    order: 1;
  }
  
  .logo-stack {
    order: 2;
  }
  
  .col-side:last-child {
    order: 3;
  }
}

/* ============================================
   RESPONSIVE - TRÈS PETITS ÉCRANS (< 480px)
   ============================================ */
@media (max-width: 480px) {
  .bubble {
    height: 90px;
    font-size: .85rem;
  }

  .bubble-label {
    padding: .3rem .7rem;
    font-size: .85rem;
  }

  .logo-img {
    max-width: 95%;
  }

  .tutorial-btn,
  .coming-soon-btn {
    font-size: .75rem;
    padding: .35rem .7rem;
  }

  .mini-bubble {
    font-size: .8rem;
    padding: .3rem .7rem;
  }

  .dropdown-panel {
    width: 95vw;
    max-width: 280px;
    padding: .8rem;
  }

  .dropdown-panel h4 {
    font-size: .9rem;
  }
  
  .feature-item {
    font-size: .8rem;
  }

  .wh-mission {
    padding: 1.5rem !important;
  }

  .wh-mission h3 {
    font-size: 1.3rem;
  }
}