/* =============================================
   HERO - Section principale avec photo, doodles, stats
   ============================================= */

#home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 100px;
  position: relative;
  overflow: hidden;
}

/* Badge "Hello!" */
.hello-badge {
  background: #fff;
  border: 2px solid var(--dark);
  border-radius: 40px;
  padding: 6px 22px;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
  animation: fadeDown .6s ease both;
}

.hello-badge::after {
  content: '';
  position: absolute;
  top: -18px;
  right: -10px;
  width: 28px;
  height: 28px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 30 Q20 5 30 30' stroke='%23F97316' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M28 26 L30 30 L26 29' stroke='%23F97316' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / cover;
}

/* Titre principal */
.hero-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(52px, 8vw, 96px);
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: 10px;
  animation: fadeDown .7s .1s ease both;
}

.hero-title span {
  color: var(--orange);
}

/* Positionnement sous le nom */
.hero-role {
  position: relative;
  z-index: 3;
  margin-top: 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  color: #4b4f5c;
  animation: fadeDown .7s .2s ease both;
}
.hero-role i { font-style: normal; color: var(--orange); margin: 0 .5em; }

/* Visuel central (photo + cercle) */
.hero-visual {
  position: relative;
  width: 680px;
  height: 620px;
  margin-top: -32px;
  z-index: 2;
  cursor: none;
}

.hero-circle {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 560px;
  height: 560px;
  background: var(--orange);
  border-radius: 50%;
}

.hero-photo {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 580px;
  object-fit: cover;
  object-position: top;
  z-index: 1;
  filter: drop-shadow(0 10px 30px rgba(139, 21, 56, 0.3));
}

/* Boutons CTA flottants */
.hero-btns {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 10;
}

/* Citation gauche */
.hero-quote {
  position: absolute;
  left: 5vw;
  top: 50%;
  transform: translateY(-50%);
  max-width: 200px;
  animation: fadeRight .7s .3s ease both;
}

.hero-quote .quote-icon {
  font-size: 28px;
  color: var(--dark);
  opacity: .3;
  margin-bottom: 6px;
}

.hero-quote p {
  font-size: 13px;
  color: var(--gray);
  line-height: 1.5;
}

/* Stats droite */
.hero-stats {
  position: absolute;
  right: 5vw;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  animation: fadeLeft .7s .3s ease both;
}

.stars {
  color: var(--orange);
  font-size: 20px;
}

.hero-stats .big {
  font-family: 'Syne', sans-serif;
  font-size: 44px;
  font-weight: 800;
}

.hero-stats .small {
  color: var(--gray);
  font-size: 13px;
}

/* ── Doodles ── */
.doodles-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity .4s ease;
}

.hero-visual:hover .doodles-layer {
  opacity: 1;
}

.doodle {
  position: absolute;
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .4s ease;
  opacity: 0;
  transform: scale(0) rotate(-20deg);
}

.hero-visual:hover .doodle {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  animation: wiggle 2s ease-in-out infinite;
}

.hero-visual:hover .doodle:nth-child(even) {
  animation-direction: reverse;
}

/* Positions individuelles des doodles */
.doodle:nth-child(1)  { top: 2%;  left: 48%; transition-delay: .05s; }
.doodle:nth-child(2)  { top: 10%; left: 70%; transition-delay: .08s; }
.doodle:nth-child(3)  { top: 22%; left: 80%; transition-delay: .11s; }
.doodle:nth-child(4)  { top: 40%; left: 85%; transition-delay: .14s; }
.doodle:nth-child(5)  { top: 58%; left: 82%; transition-delay: .17s; }
.doodle:nth-child(6)  { top: 15%; left: 10%; transition-delay: .06s; }
.doodle:nth-child(7)  { top: 30%; left: 2%;  transition-delay: .09s; }
.doodle:nth-child(8)  { top: 50%; left: 5%;  transition-delay: .12s; }
.doodle:nth-child(9)  { top: 68%; left: 10%; transition-delay: .15s; }
.doodle:nth-child(10) { top: 5%;  left: 25%; transition-delay: .07s; }
.doodle:nth-child(11) { top: 72%; left: 65%; transition-delay: .18s; }

/* ── Responsive ── */

/* Tablette (769–1024px) */
@media (max-width: 1024px) {
  .hero-visual {
    width: 520px;
    height: 500px;
  }
  .hero-circle {
    width: 420px;
    height: 420px;
  }
  .hero-photo {
    height: 460px;
  }
}

/* Mobile large (≤768px) */
@media (max-width: 768px) {
  .hero-role { font-size: 11.5px; letter-spacing: .16em; line-height: 1.7; padding: 0 24px; }
  #home {
    min-height: auto;
    padding-top: 80px;
    padding-bottom: 0;
    justify-content: flex-start;
  }

  .hero-title {
    font-size: clamp(34px, 9vw, 56px);
    margin-top: 16px;
    padding: 0 16px;
  }

  .hero-visual {
    width: 100%;
    max-width: 380px;
    height: 380px;
    margin-top: -20px;
  }

  .hero-circle {
    width: 300px;
    height: 300px;
  }

  .hero-photo {
    height: 360px;
  }
}

/* Mobile petit (≤480px) */
@media (max-width: 480px) {
  #home {
    min-height: auto;
    padding-top: 70px;
    padding-bottom: 0;
  }

  .hero-title {
    font-size: clamp(28px, 8vw, 40px);
    margin-top: 12px;
  }

  .hero-visual {
    max-width: 300px;
    height: 310px;
  }

  .hero-circle {
    width: 250px;
    height: 250px;
  }

  .hero-photo {
    height: 295px;
  }
}