/* ============================================================
   HERO — Connect Web v3
   Utilise uniquement les noms rétro-compatibles --color-*
   garantis dans toutes les versions de variables.css
   ============================================================ */

/* --- Section ---------------------------------------------- */
.hero {
  position:   relative;
  min-height: calc(100vh - 64px);
  background: var(--color-bg);
  overflow:   hidden;
  transition: background var(--transition-slow);
}

@media (max-width: 639px) {
  .hero { min-height: calc(100vh - 56px); }
}

/* --- Gradient glow ---------------------------------------- */
.hero__glow {
  position:       absolute;
  top:            -10%;
  left:           50%;
  transform:      translateX(-50%);
  width:          900px;
  height:         500px;
  background:     radial-gradient(
    ellipse 80% 60% at 50% 0%,
    var(--color-accent-subtle) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index:        0;
}

/* --- Container -------------------------------------------- */
.hero__container {
  position:     relative;
  z-index:      1;
  width:        100%;
  max-width:    var(--container-xl);
  margin-left:  auto;
  margin-right: auto;
  padding:      32px 24px 40px;
}

@media (min-width: 640px)  { .hero__container { padding-top: 48px;  padding-bottom: 72px; } }
@media (min-width: 768px)  { .hero__container { padding: 64px 24px 96px; } }
@media (min-width: 1024px) { .hero__container { padding: 96px 64px; } }
@media (min-width: 1280px) { .hero__container { padding: 96px 80px; } }

/* --- Wrapper ---------------------------------------------- */
.hero__wrapper {
  display:    block;
  text-align: center;
  width:      100%;
}

/* --- Body ------------------------------------------------- */
.hero__body {
  display:      block;
  width:        100%;
  max-width:    672px;
  margin-left:  auto;
  margin-right: auto;
  padding-top:  48px;
}

@media (min-width: 640px)  { .hero__body { padding-top: 60px; } }
@media (min-width: 768px)  { .hero__body { padding-top: 72px; } }
@media (min-width: 1024px) { .hero__body { max-width: 800px; } }

/* --- Title group ------------------------------------------ */
.hero__title-group { display: block; }

/* --- H1 --------------------------------------------------- */
.hero__title {
  font-size:      2.25rem;
  font-weight:    700;
  line-height:    1.1;
  letter-spacing: -0.025em;
  color:          var(--color-text);
  margin:         0 0 12px;
  transition:     color var(--transition-slow);
}

@media (min-width: 640px)  { .hero__title { font-size: 3rem;   line-height: 1.0; } }
@media (min-width: 1024px) { .hero__title { font-size: 4.5rem; } }

/* Chaque ligne = bloc */
.hero__title-line {
  display: block !important;
}

/* Ligne 2 : couleur accent */
.hero__title-line--accent {
  color: var(--color-accent) !important;
}

/* Le <br> PHP est un fallback — inutile quand display:block actif */
.hero__title br { display: none; }

/* --- Subtitle --------------------------------------------- */
.hero__subtitle {
  font-size:   0.875rem;
  font-weight: 400;
  line-height: 1.65;
  color:       var(--color-text-secondary);
  margin:      12px auto 0;
  max-width:   560px;
  transition:  color var(--transition-slow);
}

@media (min-width: 640px)  { .hero__subtitle { font-size: 1rem;    } }
@media (min-width: 1024px) { .hero__subtitle { font-size: 1.125rem; } }

.hero__br          { display: none; }
@media (min-width: 768px) { .hero__br { display: block; } }

/* --- Actions ---------------------------------------------- */
.hero__actions {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  flex-wrap:       wrap;
  margin-top:      28px;
}

@media (min-width: 640px) { .hero__actions { margin-top: 32px; } }

/* --- CTA base --------------------------------------------- */
.hero__cta {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  height:          38px;
  padding:         0 16px;
  font-size:       1rem;
  font-weight:     500;
  line-height:     1;
  border-radius:   6px;
  text-decoration: none;
  white-space:     nowrap;
  cursor:          pointer;
  transition:
    background   var(--transition-fast),
    color        var(--transition-fast),
    border-color var(--transition-fast),
    opacity      var(--transition-fast);
  outline: none;
}

.hero__cta:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (min-width: 768px) { .hero__cta { font-size: 0.875rem; } }

/* --- CTA Primary ------------------------------------------ */
.hero__cta--primary {
  background: var(--color-accent);
  color:      #ffffff;
  border:     1px solid rgba(94, 106, 210, 0.75);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.hero__cta--primary:hover  { opacity: 0.82; color: #ffffff; }
.hero__cta--primary:active { opacity: 0.70; }

/* --- CTA Secondary ---------------------------------------- */
.hero__cta--secondary {
  background:  var(--color-card);
  color:       var(--color-text);
  border:      1px solid var(--color-border);
}

.hero__cta--secondary:hover {
  background:   var(--color-card-hover);
  border-color: var(--color-border);
  color:        var(--color-text);
}

[data-theme="white"] .hero__cta--secondary,
[data-theme="light"] .hero__cta--secondary {
  background:   #ffffff;
  border-color: rgba(15, 23, 42, 0.20);
}

[data-theme="white"] .hero__cta--secondary:hover,
[data-theme="light"] .hero__cta--secondary:hover {
  background: rgba(15, 23, 42, 0.04);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
.hero__title-group,
.hero__actions {
  opacity:   0;
  transform: translateY(18px);
}

.hero.animate .hero__title-group { animation: heroFadeUp 0.55s ease-out 0.05s both; }
.hero.animate .hero__actions     { animation: heroFadeUp 0.55s ease-out 0.20s both; }

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

@media (prefers-reduced-motion: reduce) {
  .hero__title-group,
  .hero__actions {
    opacity:   1 !important;
    transform: none !important;
    animation: none !important;
  }
}