/* ENDURIA — Hero v3 : centré vertical (façon BellTalk) + animation de flux pleine largeur. */

.hero {
  position: relative;
  padding-top: clamp(7rem, 16vh, 10rem);
  padding-bottom: clamp(2rem, 5vh, 4rem);
  overflow: hidden;
}

/* Glows violets latéraux (dark only) — deux ronds radiaux à moitié hors écran
   à gauche et à droite. Apportent du peps sans encombrer le centre.
   CSS pur, statiques, zéro impact scroll. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 60vw;
  max-width: 720px;
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(124, 79, 201, 0.22) 0%,
    rgba(124, 79, 201, 0.10) 30%,
    rgba(124, 79, 201, 0.03) 55%,
    transparent 75%);
  pointer-events: none;
  z-index: 0;
  filter: blur(20px);
}
.hero::before { left: -30vw; }   /* moitié hors écran à gauche */
.hero::after  { right: -30vw; }  /* moitié hors écran à droite */

/* Light : pas de glow violet (rend sale sur fond clair). */
[data-theme="light"] .hero::before,
[data-theme="light"] .hero::after { display: none; }

@media (max-width: 768px) {
  /* Mobile : moins d'espace, on rétrécit les glows pour pas qu'ils prennent le dessus. */
  .hero::before,
  .hero::after { width: 80vw; max-width: 480px; }
}

/* ---- Logo Enduria GÉANT tramé en points (filigrane hero, CLAUDE_SESSION_LOGO_FOND) ----
   Remplace le pattern diagonal (lignes) qui était porté par .bg-pattern.
   Technique : SVG <pattern> de cercles tilés + <mask> avec les paths du logo.
   Couleur héritée de --paper (clair en dark, foncé en light → s'adapte automatiquement).
   Le mask CSS radial fade les bords pour effet halftone organique (plus dense au centre). */
.hero__bg-logo {
  position: absolute;
  /* Remonté à 44% (vs 50%) — ressort plus haut dans le hero, mieux ancré derrière le H1 */
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Le logo occupe une large portion du hero, sans déborder bizarrement.
     Bornage par la plus petite dimension dispo (vh OU vw) pour éviter qu'il dépasse à
     l'horizontale sur écran étroit ou à la verticale sur écran tassé. */
  width: min(85vh, 92vw, 920px);
  aspect-ratio: 83 / 76;
  height: auto;
  z-index: 0;
  pointer-events: none;
  color: var(--paper);
  /* Base layer : champ de dots aléatoires (JS hero-dots-field.js) au repos.
     Opacité montée 0.06 → 0.09 pour que le filigrane se sente sans balayage. */
  opacity: 0.09;
  shape-rendering: geometricPrecision;
  /* Fade radial : les dots au centre sont à 100%, ceux au bord disparaissent.
     Évite un cadre dur du pattern et concentre l'œil au milieu. */
  -webkit-mask-image: radial-gradient(ellipse at center,
    #000 22%, rgba(0,0,0,0.65) 55%, transparent 88%);
  mask-image: radial-gradient(ellipse at center,
    #000 22%, rgba(0,0,0,0.65) 55%, transparent 88%);
}
/* Light : dots foncés sur fond clair → bumpée 0.07 → 0.12 pour que le filigrane au
   repos soit clairement perceptible (request Théo, même logique que le bump du scan light). */
[data-theme="light"] .hero__bg-logo { opacity: 0.12; }
@media (max-width: 640px) {
  /* Sur mobile le logo prend toute la largeur dispo, recentré au-dessus du H1.
     On le rapproche du haut pour qu'il reste derrière le titre, pas derrière le hub. */
  .hero__bg-logo { width: 95vw; top: 26%; }
}

/* Sur Safari/WebKit : on cache les 2 SVG du filigrane logo (base + scan). Combiné au
   skip de hero-dots-field.js (qui ne génère plus les 9000 circles sur Safari), ça donne
   un hero Safari SANS filigrane logo — fond sombre simple (bg-primary + light-beam +
   glows) + contenu. Chrome/Blink/Gecko : aucun changement, le pattern SVG animé tourne
   normalement (les 9000 circles sont rendus + la vague de scan balaie). */
html.is-safari .hero__bg-logo { display: none; }

/* Tâche D — VAGUE DE BALAYAGE restaurée (CSS pur).
   Le 2nd SVG (.hero__bg-logo--scan) hérite des règles de .hero__bg-logo (positionnement,
   couleur, etc.) et y ajoute une opacité plus haute + un mask-image linear-gradient
   diagonal animé via @keyframes mask-position. Effet : une slice lumineuse traverse
   le logo en diagonale toutes les 9s, révélant les dots cachés en passant. */
.hero__bg-logo--scan {
  opacity: 0.28;
  -webkit-mask-image: linear-gradient(105deg, transparent 38%, #000 50%, transparent 62%);
          mask-image: linear-gradient(105deg, transparent 38%, #000 50%, transparent 62%);
  -webkit-mask-size: 260% 100%;
          mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 130% 0;
          mask-position: 130% 0;
  animation: hero-scan 9s linear infinite;
}
/* Light : dots foncés sur fond clair → la vague de scan était trop discrète à 0.10.
   Bumpée à 0.38 pour que le balayage soit clairement visible (request explicit Théo). */
[data-theme="light"] .hero__bg-logo--scan { opacity: 0.38; }
@keyframes hero-scan {
  0%   { -webkit-mask-position: 130% 0; mask-position: 130% 0; }
  100% { -webkit-mask-position: -130% 0; mask-position: -130% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg-logo--scan { animation: none; opacity: 0; }
}

.hero__inner {
  width: var(--container);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.hero__content {
  /* Bumpé 780 → 880 (CORRECTIONS_H1 §1) : c'est ce conteneur qui bornait réellement la
     largeur du H1, pas .hero__title. À 780px, "Transformez votre entreprise pour" wrappait
     forcément à 2 lignes (~760px en Geist SemiBold) → H1 sur 4 lignes au lieu de 2.
     +100px ici permet à chaque bloc de tenir sur 1 ligne en desktop, sans déborder.
     Impact zéro sur les autres enfants (sub: max-width 44ch ≈ 470px; CTAs: 2×290 + gap = 590px). */
  max-width: min(880px, 92vw);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Badge centré au-dessus du H1 (façon BellTalk) */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-body); /* DA : aligne sur Inter (retour Theo : police hors DA) */
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fog);
  margin-bottom: clamp(1.4rem, 3vh, 2rem);
}
.hero__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.hero__title {
  font-size: var(--t-hero); /* DA Nina : gabarit hero dramatique */
  line-height: 1.02;
  letter-spacing: -0.04em;
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
  /* H1 FIXE — dégradé vertical haut → bas, plus marqué pour donner du relief.
     Dark : paper (blanc cassé) → gris légèrement teinté violet (#9e98b8) en bas.
     Light : paper (noir) → gris foncé plus visible (#4a4a52) en bas (cf override dessous).
     FALLBACK `color: var(--paper)` AVANT le clip pour éviter l'invisibilité. */
  color: var(--paper);
  background-image: linear-gradient(180deg, var(--paper) 0%, #9e98b8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="light"] .hero__title {
  background-image: linear-gradient(180deg, var(--paper) 0%, #4a4a52 100%);
}
/* Accent "l'IA" : plus d'override couleur — le span hérite naturellement du gradient
   du H1 (ou de .hero__title .word après le split JS), comme les autres mots. */

/* DÉCISION FINALE H1 (Théo — round 6+) : le H1 n'est PLUS splitté par mot en JS.
   Le split + dégradé par mot ramenait systématiquement le ghosting Chrome sur
   background-clip: text. Le H1 reste un seul élément clippé (règle .hero__title
   ci-dessus), animé en bloc par heroIntro() → zéro ghosting possible.
   Aucune règle .hero__title .word nécessaire — plus de .word créés sur le H1. */

/* Seul le sous-titre est splitté en mots (pas de bg-clip:text sur .hero__sub, safe). */
.hero__sub .word {
  display: inline-block;
}
/* État initial GSAP-managed : le JS pose opacity:0 sur chaque .word juste après le split.
   On NE cache PAS le H1/sub via CSS .js → si le JS plante (split, GSAP, etc.), le texte
   reste visible au repos plutôt que de disparaître définitivement.
   (Petit risque de flash sur preloader très rapide : acceptable vs risque de texte
   invisible définitivement). */

/* (Anciennes classes typewriter .hero__title-base / .hero__title-usp / .rotator-*
   supprimées : H1 est désormais fixe — cf. BRIEF_HERO_H1_FIXE §1.) */

.hero__sub {
  margin-top: clamp(1.2rem, 2.5vh, 1.8rem);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--fog);
  max-width: 60ch;
}
/* .hero__sub : état initial désormais géré en JS (gsap.set juste avant l'anim) plutôt
   qu'en CSS, pour la même raison que .hero__title — si JS plante, sub reste visible. */

.hero__actions {
  margin-top: clamp(1.8rem, 3.5vh, 2.4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
/* CTA du hero : largeurs LIBRES selon contenu (BRIEF_FINITIONS_HERO §4).
   Plus de min-width : le secondaire devient naturellement moins large que le primaire,
   ce qui est voulu. Hauteurs égales via le padding vertical aligné dans components.css. */
@media (max-width: 640px) {
  .hero__actions .btn { width: 100%; }
}
.js .hero__actions { opacity: 0; transform: translateY(16px); }

.hero__proof {
  margin-top: clamp(1.2rem, 2.5vh, 1.6rem);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--fog);
}
.js .hero__proof { opacity: 0; transform: translateY(16px); }
.hero__stars { color: var(--accent); letter-spacing: 0.1em; }

/* ---- Visuel large : animation de flux (Hero v3 §6) ---- */
.hero__flow {
  position: relative;
  z-index: 0; /* sous le contenu */
  width: 100%;
  margin-top: clamp(4rem, 10vh, 8rem);
  /* Fondu du haut : rien ne peut apparaître dans la zone du contenu/boutons */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 100%);
}
.flow {
  position: relative;
  width: var(--container);
  max-width: 100%;
  margin-inline: auto;
  height: clamp(280px, 44vh, 440px);
  will-change: transform;
}
/* SVG des trajectoires (courbes générées en JS) */
.flow__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.flow__base { fill: none; stroke: var(--line-2); stroke-width: 1; opacity: 0.5; }
.flow__trace { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0.8; }

/* Nœud central = cercle */
.flow__node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1px solid var(--line-2);
  background: radial-gradient(circle at 50% 35%, var(--ink-3), var(--ink-2));
  text-align: center;
  will-change: transform;
}
.flow__node::before { /* halo diffus */
  content: "";
  position: absolute;
  inset: -55px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--halo), transparent 70%);
}
.flow__core {
  position: relative;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #b89bff, var(--accent));
  box-shadow: 0 0 16px var(--accent), 0 0 4px #fff inset;
}
.flow__core::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0.5;
  animation: core-pulse 3.6s var(--ease-out) infinite;
}
@keyframes core-pulse {
  0% { transform: scale(0.7); opacity: 0.55; }
  70%, 100% { transform: scale(2.1); opacity: 0; }
}
.flow__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--paper);
}

/* Anneaux radar concentriques (très lents) */
.flow__radar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 132px;
  height: 132px;
  margin: -66px 0 0 -66px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  z-index: 2;
  animation: radar 5.5s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes radar {
  0% { transform: scale(0.85); opacity: 0; }
  18% { opacity: 0.35; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Pulse d'absorption au centre */
.flow__ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 132px; height: 132px;
  margin: -66px 0 0 -66px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  z-index: 3;
  pointer-events: none;
}

/* Étiquettes de tâches (centrées sur le point via xPercent/yPercent en JS) */
.chip {
  position: absolute;
  left: 0; top: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  font-size: 0.82rem;
  white-space: nowrap;
  will-change: transform, opacity;
}
/* fonds opaques : la trace passe DERRIÈRE l'étiquette (pas au travers) */
.chip--in { background: var(--ink-2); border-color: var(--line-2); color: var(--faint); box-shadow: 0 0 0 4px var(--ink); }
.chip--out { background: var(--ink-2); border-color: rgba(124, 79, 201, 0.45); color: var(--accent); box-shadow: 0 0 0 4px var(--ink); }
.chip .chk {
  display: grid; place-items: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 0.6rem;
}

@media (max-width: 760px) {
  .flow { height: 320px; }
  .flow__node { width: 110px; height: 110px; }
  .chip { font-size: 0.72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .flow__radar { animation: none; }
}

/* DA Nina — Hero épuré : le H1 sans béquilles, vide avant, sous-titre discret */
.hero__badge, .hero__proof { display: none; }
.hero__sub { margin-top: clamp(2rem, 4vh, 3rem); color: var(--faint); max-width: 44ch; }
#hero { padding-top: clamp(9rem, 20vh, 14rem); }
@media (max-width: 640px) { .hero .btn-rainbow { display: none; } }

/* ============================================================================
   .btn-rainbow — CTA hero secondaire (V11 — box-shadow drop derrière au hover)
   ============================================================================
   Changements V10 → V11 :
     - ::before glow (dégradé blurré) COMPLÈTEMENT SUPPRIMÉ. Il compositait mal
       sur Safari : le filter: blur() créait une couche qui remontait devant le
       bouton au lieu de rester derrière, malgré z-index -1.
     - Remplacé par une simple box-shadow violet #a78bfa activée UNIQUEMENT au
       hover. Une box-shadow est par définition peinte HORS de l'élément (spec
       CSS) → aucun risque qu'elle passe devant le contenu. Comportement drop-
       shadow standard, prévisible sur tous les browsers.
     - Repos : aucun glow, aucune ombre extérieure (juste le reflet inset).
     - Hover : la drop-shadow apparaît en fondu via la transition box-shadow
       0.3s ease-out → apparition douce, comportement de vrai drop-shadow.

   Le liseré du bas (dégradé miroir signature avec peak violet #a78bfa,
   shimmer 3s) reste inchangé — c'est ce qui identifie visuellement le bouton. */

.btn-rainbow {
  /* 3 couleurs signature : rosé, VIOLET saturé (peak), bleu-lavande. */
  --enduria-c1: #d1acdf;   /* rosé */
  --enduria-violet: #a78bfa;   /* violet saturé (peak visible) */
  --enduria-c2: #c5d0ff;   /* bleu-lavande */

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.55em 0.95em;
  border: none;
  border-radius: 9px;

  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-shadow: 1px 2px 5px rgba(29, 21, 40, 0.5);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  background-color: #0b0c0e;
  background-image:
    /* Layer 1 : dégradé miroir signature avec VIOLET saturé aux peaks (25% + 75%).
       Miroir → 2 bouts rosés identiques → raccord de boucle invisible.
       Le violet #a78bfa arrive maintenant en pic entre le rosé et le bleu-
       lavande, ce qui rend le mouvement du shimmer bien plus lisible. */
    linear-gradient(
      90deg,
      var(--enduria-c1) 0%,
      var(--enduria-violet) 25%,
      var(--enduria-c2) 50%,
      var(--enduria-violet) 75%,
      var(--enduria-c1) 100%
    ),
    /* Layer 2 : fond sombre uni plein cadre. */
    linear-gradient(#0b0c0e, #0b0c0e);
  background-size: 200% 2px, 100% 100%;
  background-position: 0% 100%, 0 0;
  background-repeat: repeat-x, no-repeat;

  box-shadow: inset 0px 3px 6px rgba(255, 255, 255, 0.1);

  animation: btn-rainbow-shimmer 3s linear infinite;
  transition:
    box-shadow 0.3s ease-out,
    transform 0.25s var(--ease-reflect);
}

/* HOVER : ajout d'une drop-shadow violette DERRIÈRE le bouton via box-shadow
   (technique standard = shadow toujours peinte hors du contenu, jamais devant).
   Fini le ::before + blur qui pouvait mal se stacker sur Safari. Le fond sombre
   du bouton et le liseré ne bougent pas — seule l'ombre extérieure apparaît. */
.btn-rainbow:hover {
  box-shadow:
    inset 0px 3px 8px rgba(255, 255, 255, 0.15),
    0 8px 24px -6px rgba(167, 139, 250, 0.30);
}

/* Shimmer bouton (2 layers → 2 positions dans le keyframe). */
@keyframes btn-rainbow-shimmer {
  0%   { background-position: 0% 100%, 0 0; }
  100% { background-position: 200% 100%, 0 0; }
}

/* Reduced-motion : coupe shimmer + transitions partout. */
@media (prefers-reduced-motion: reduce) {
  .btn-rainbow {
    animation: none !important;
    transition: none !important;
  }
}