/* ==========================================================================
   OPTERIA : premier écran de l'accueil au plus près de gleap.ai (13/10/2026, demande Axel)
   Plein écran : le ciel, la tête de Bobby en étoiles au centre, deux grands mots fins de part et d'autre, la souris en bas.
   L'accroche (« Votre premier salarié IA autonome. ») arrive au défilement, sur le même ciel (le canvas couvre tout le premier écran).
   Sombre en mode jour comme en mode nuit. Aucun flou ni fondu sur les mots : ils sont là dès le début, nets, et se brouillent lettre à lettre (hero-etoiles.js).
   Remplace le bloc « Premier écran de l'accueil » de da-gleap.css ; l'ancien est gardé dans outils/ancien-hero-etoiles.html.
   ========================================================================== */
.hero--gleap { position: relative; display: block; min-height: 0; padding: 0; background: #191919; color: #fff; overflow: hidden; isolation: isolate; }
.hero--gleap .hg-etoiles { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; pointer-events: none; }
.hg-ouverture { --hg-s: min(42vw, 590px, 61vh, 560px); --hg-s: min(42vw, 590px, 61svh, 560px); --hg-haut: 40px;
  position: relative; display: grid; place-items: center; height: 100vh; height: 100svh; min-height: 520px; max-height: 1040px; padding: var(--hg-haut) 5vw 0; }
.hg-ancre { width: var(--hg-s); height: var(--hg-s); display: grid; place-items: center; }
.hg-ancre img { width: 46%; height: auto; opacity: .9; }
html.js .hg-ancre img { visibility: hidden; }   /* image de secours si le dessin en étoiles n'est pas possible */
.hg-mot { position: absolute; top: calc(50% + var(--hg-haut) / 2); transform: translateY(-50%);
  font-size: clamp(34px, 4.05vw, 74px); font-weight: 400; letter-spacing: -.045em; line-height: 1; color: #fff; white-space: pre; pointer-events: none; }
html.js .hg-mot { opacity: 1; filter: none; animation: none; }   /* l'ancien héros faisait sortir les mots d'un flou : plus maintenant */
.hg-mot--g { right: calc(50% + var(--hg-s) * .335 + 1.2em); text-align: right; }
.hg-mot--d { left: calc(50% + var(--hg-s) * .335 + 1.2em); text-align: left; }
.hg-souris { position: absolute; left: 50%; bottom: 26px; width: 22px; height: 34px; margin-left: -11px; border: 1.5px solid rgba(255,255,255,.45); border-radius: 12px; opacity: .8; transition: opacity .2s; }
.hg-souris:hover, .hg-souris:focus-visible { opacity: 1; }
.hg-souris span { position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: rgba(255,255,255,.7); animation: hg-roulette 1.8s ease-in-out infinite; }
@keyframes hg-roulette { 0% { opacity: 0; transform: translateY(-2px); } 30% { opacity: 1; } 70% { opacity: 1; transform: translateY(8px); } 100% { opacity: 0; transform: translateY(10px); } }

/* l'accroche, juste après, sur le même ciel */
.hg-texte { position: relative; text-align: center; padding-top: 24px; padding-bottom: 96px; scroll-margin-top: 72px; }
.hg-texte .meta { color: rgba(255,255,255,.7); margin-bottom: 18px; }
.hg-texte .hero__titre { color: #fff; max-width: 980px; margin: 0 auto; }
.hg-texte .p { max-width: 680px; margin: 22px auto 0; font-size: clamp(17px, 1.4vw, 20px); color: rgba(255,255,255,.7); text-wrap: balance; }
.hg-texte .actions { justify-content: center; margin-top: 30px; }

@media (prefers-reduced-motion: reduce) { .hg-souris span { animation: none; } }

/* tablette : la tête un peu plus petite, les mots tiennent encore sur les côtés */
@media (max-width: 960px) {
  .hg-ouverture { --hg-s: min(40vw, 54svh, 420px); min-height: 460px; }
  .hg-mot { font-size: clamp(26px, 3.9vw, 40px); }
  .hg-texte { padding-bottom: 64px; }
}
/* téléphone : comme gleap.ai, le premier écran se resserre (tête de 270 px, l'accroche visible dès l'arrivée) ; nos mots, plus longs que les leurs, passent au-dessus et au-dessous de la tête */
@media (max-width: 640px) {
  .hg-ouverture { --hg-s: min(70vw, 270px); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0;
    height: auto; min-height: 0; max-height: none; padding: 92px 16px 20px; }
  .hg-mot { position: static; transform: none; font-size: clamp(30px, 8.6vw, 36px); letter-spacing: -.04em; text-align: center; }
  .hg-souris { display: none; }
  .hg-texte { padding-top: 12px; padding-bottom: 56px; }
  .hg-texte .actions .btn { flex: 1 1 100%; justify-content: center; }
}