/* =====================================================
   hero-impact.css — Hero d'accueil plus impactant
   Reprend le langage des widgets : pastilles crème
   #fde8c8, texte #c0582a, Inconsolata, inclinaison,
   ombre portée et rebond cubic-bezier(0.34,1.56,0.64,1).
   Chargé après hero-a11y.css
   ===================================================== */

.hero--editorial { padding-bottom: 120px; }
.hero--editorial .hero-inner { position: relative; z-index: 1; }
.hero--editorial .hero-inner { gap: 90px; }
.hero--editorial .hero-content { max-width: 560px; }

/* ── Grand astérisque décoratif (écho à la carte "Identité visuelle") ── */
.hero-deco-star {
  position: absolute;
  top: 50%;
  right: -6vw;
  z-index: 0;
  font-size: clamp(18rem, 34vw, 30rem);
  line-height: 1;
  color: rgba(253, 232, 200, 0.07);
  transform: translateY(-55%);
  animation: hero-star-spin 60s linear infinite;
  pointer-events: none;
}
@keyframes hero-star-spin {
  to { transform: translateY(-55%) rotate(360deg); }
}

/* ── Nom XXL ──────────────────────────────────────────── */
.hero--editorial .hero-name { gap: 20px; margin-bottom: 26px; }
.hero--editorial .hero-name-main {
  font-size: clamp(2.9rem, 6vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-shadow: 0 12px 34px rgba(0, 0, 0, .14);
}
.hero--editorial .hero-name-role {
  font-family: "Inconsolata", monospace;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Survol d'une lettre : on coupe le flottement continu, sinon il écrase l'effet */
.hero-name .letter:hover { animation: none; }

/* ── Intro avec surlignage façon marqueur ─────────────── */
.hero--editorial .hero-intro {
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 40px;
}
.hero-highlight {
  font-weight: 600;
  padding: 0 4px;
  background: linear-gradient(transparent 58%, rgba(253, 232, 200, .3) 58%);
  border-radius: 3px;
}

/* ── Widgets : composition "stickers" ─────────────────── */
.hero-services-card {
  position: relative;
  z-index: 1;
  gap: 26px;
  /* Largeur fixe : une capsule qui s'élargit au survol ne décale plus le reste */
  width: 360px;
}
.hero-services-card li { animation: hero-float 5s ease-in-out infinite; }
.hero-services-card li:nth-child(1) { margin-right: 0;    animation-delay: 0s; }
.hero-services-card li:nth-child(2) { margin-right: 44px; animation-delay: -1.2s; }
.hero-services-card li:nth-child(3) { margin-right: 10px; animation-delay: -2.4s; }
.hero-services-card li:nth-child(4) { margin-right: 60px; animation-delay: -3.6s; }

/* Hauteur fixe au survol : plus de décalage des capsules voisines */
.hero-services-card li a,
.hero-services-card li:nth-child(n) a {
  flex-direction: row;
  height: 50px;
  padding: 0 22px 0 22px;
  font-size: 1.08rem;
  transition: transform .3s cubic-bezier(0.34,1.56,0.64,1), box-shadow .3s ease,
              gap .3s ease, background .25s ease;
}
.hero-services-card li a:hover { height: 50px; background: #fff5e6; }
.hero-services-card li a::before { height: 38px; }
.hero-services-card li a:hover::before { width: 38px; }

/* Flèche : signale que la capsule est un lien */
.hero-services-card li a::after {
  content: "→";
  margin-left: 12px;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  color: #e07a3a;
  transition: transform .3s cubic-bezier(0.34,1.56,0.64,1);
}
.hero-services-card li a:hover::after,
.hero-services-card li a:focus-visible::after { transform: translateX(5px); }

/* Icônes identiques aux cartes services, animées au survol */
.hero-services-card li a i {
  font-size: 0.95rem;
  margin: 0 10px 0 0;
  color: #e07a3a;
  animation-play-state: paused;
}
.hero-services-card li a:hover i,
.hero-services-card li a:focus-visible i { animation-play-state: running; }

@keyframes hero-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}

/* Sticker rond : note Google, à côté des boutons */
.hero--editorial .hero-actions { align-items: center; }
.hero-sticker-rating {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 84px;
  height: 84px;
  margin-left: 6px;
  border-radius: 50%;
  background: #111;
  color: #fde8c8;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
  transform: rotate(8deg);
  transition: transform .3s cubic-bezier(0.34,1.56,0.64,1), box-shadow .3s ease;
}
.hero-sticker-rating:hover {
  transform: rotate(0deg) scale(1.08);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .24);
}
.hero-sticker-score {
  font-family: "DM Sans", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
}
.hero-sticker-stars { color: #e07a3a; font-size: 0.68rem; letter-spacing: 1.5px; }
.hero-sticker-label { font-family: "Inconsolata", monospace; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: .85; }

/* ── Entrée en "pop" après le loader ──────────────────── */
.hero--anim .hero-actions,
.hero--anim .hero-services-card li { opacity: 0; }

.hero--anim.is-ready .hero-actions {
  animation: hero-rise .8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero--anim.is-ready .hero-actions { animation-delay: .5s; }

.hero--anim.is-ready .hero-services-card li {
  animation: hero-pop .7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             hero-float 5s ease-in-out 1.6s infinite;
}
.hero--anim.is-ready .hero-services-card li:nth-child(1) { animation-delay: .5s, 1.6s; }
.hero--anim.is-ready .hero-services-card li:nth-child(2) { animation-delay: .62s, 2.1s; }
.hero--anim.is-ready .hero-services-card li:nth-child(3) { animation-delay: .74s, 2.6s; }
.hero--anim.is-ready .hero-services-card li:nth-child(4) { animation-delay: .86s, 3.1s; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-pop {
  from { opacity: 0; transform: scale(.6) translateY(30px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Bandeau défilant (même style que les pastilles) ──── */
.hero-marquee {
  position: absolute;
  left: -2%;
  bottom: 26px;
  z-index: 1;
  width: 104%;
  overflow: hidden;
  background: #fde8c8;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
  transform: rotate(-1.5deg);
  pointer-events: none;
}
.hero-marquee-track {
  display: flex;
  width: max-content;
  animation: hero-marquee 32s linear infinite;
}
.hero-marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding: 11px 13px;
  font-family: "Inconsolata", monospace;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #a84d22;
  white-space: nowrap;
}
.hero-marquee-track span::after { content: "✦"; color: #e07a3a; }
@keyframes hero-marquee {
  to { transform: translateX(-50%); }
}

.hero--editorial .hero-scroll-invite { bottom: 96px; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-deco-star { right: -30vw; top: 30%; }
  .hero--editorial .hero-content { max-width: 100%; }

  /* Capsules en version compacte sous les boutons (masquées par main.css) */
  .hero.hero--editorial { height: auto; min-height: 100vh; min-height: 100svh; }
  .hero--editorial .hero-inner { gap: 30px; }
  .hero-services-card {
    display: flex !important;
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    gap: 10px 8px; width: auto; max-width: 420px;
  }
  .hero-services-card li:nth-child(n) { margin: 0; }
  .hero-services-card li a,
  .hero-services-card li:nth-child(n) a {
    height: 40px; padding: 0 16px; font-size: 0.92rem;
  }
  .hero-services-card li a i { font-size: 0.8rem; margin-right: 7px; }
  .hero-services-card li a::before,
  .hero-services-card li a::after { display: none; }
  .hero-services-card li a:hover { height: 40px; }
}
@media (max-width: 768px) {
  .hero.hero--editorial { padding-bottom: 130px; }
  .hero--editorial .hero-name-main { font-size: clamp(2.6rem, 12vw, 3.8rem); }
  .hero-marquee { bottom: 20px; }
  .hero-marquee-track span { font-size: 1rem; padding: 10px; gap: 20px; }
  .hero--editorial .hero-scroll-invite { bottom: 80px; }
}

/* ── Mouvement réduit ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-deco-star,
  .hero-marquee-track,
  .hero-services-card li,
  .hero--anim.is-ready .hero-services-card li { animation: none !important; }
    .hero--anim .hero-actions,
  .hero--anim .hero-services-card li { opacity: 1 !important; animation: none !important; }}