/* L'orbe d'Elio, le composant du design system, en CSS pur.

   Copiée telle quelle de l'App Mobile (src/styles/main.css) : c'est la MÊME
   orbe que dans les apps, avec les mêmes animations, pas une imitation. Quatre
   modes par `data-mode` : veille, reflexion, ecoute, parole (et deconnecte,
   qui ne sert pas sur le site). Chaque instance porte sa taille dans
   `--orbe-px`.

   La maquette web se sert de `reflexion` pour la grande orbe de l'accueil et
   de `veille` pour les petites du wordmark. */

.orbe {
  position: relative;
  width: var(--orbe-px);
  height: var(--orbe-px);
  display: inline-block;
  flex: none;
}
.orbe-bloom {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--orbe-bloom) 0%, transparent 68%);
  filter: blur(calc(var(--orbe-px) / 10));
  display: none;
}
.orbe[data-mode="ecoute"] .orbe-bloom { display: block; animation: orbe-bloom 2.4s var(--ease-douce) infinite; }
.orbe[data-mode="parole"] .orbe-bloom { display: block; animation: orbe-bloom 1.3s var(--ease-douce) infinite; }

.orbe-arc { position: absolute; border-radius: 50%; display: none; }
.orbe-arc--vif {
  inset: -9%;
  background: conic-gradient(from 0deg, transparent 0deg 265deg, var(--orbe-arc-vif) 325deg, transparent 360deg);
  -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - max(3px, calc(var(--orbe-px) / 40))), #000 calc(100% - max(3px, calc(var(--orbe-px) / 40)) + 1px));
  mask-image: radial-gradient(farthest-side, transparent calc(100% - max(3px, calc(var(--orbe-px) / 40))), #000 calc(100% - max(3px, calc(var(--orbe-px) / 40)) + 1px));
}
.orbe-arc--doux {
  inset: -16%;
  opacity: .45;
  background: conic-gradient(from 180deg, transparent 0deg 300deg, var(--orbe-arc-doux) 340deg, transparent 360deg);
  -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - max(2.5px, calc(var(--orbe-px) / 55))), #000 calc(100% - max(2.5px, calc(var(--orbe-px) / 55)) + 1px));
  mask-image: radial-gradient(farthest-side, transparent calc(100% - max(2.5px, calc(var(--orbe-px) / 55))), #000 calc(100% - max(2.5px, calc(var(--orbe-px) / 55)) + 1px));
}
.orbe[data-mode="ecoute"] .orbe-arc--vif { display: block; animation: orbe-rotation 2.6s linear infinite; }
.orbe[data-mode="ecoute"] .orbe-arc--doux { display: block; animation: orbe-rotation 4.4s linear infinite reverse; }

/* Écoute : deux anneaux qui se propagent depuis la sphère. Ils remplacent les
   trois ondes de la scène Home - c'est l'orbe elle-même qui porte désormais son
   écoute, et non le décor autour (design system v3). */
.orbe-anneau {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: max(1px, calc(var(--orbe-px) / 90)) solid rgba(227, 34, 34, .5);
  pointer-events: none;
  display: none;
}
.orbe[data-mode="ecoute"] .orbe-anneau { display: block; animation: orbe-ecoute 2.4s var(--ease-sortie) infinite; }
.orbe[data-mode="ecoute"] .orbe-anneau--2 { animation-delay: 1.2s; }

/* Parole : un souffle qui pulse au rythme irrégulier de la voix. Sans lui,
   l'ondulation de la sphère seule se lisait comme une respiration, pas comme
   quelqu'un qui parle. */
.orbe-souffle {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 34, 34, .4) 0%, transparent 64%);
  filter: blur(calc(var(--orbe-px) / 8));
  mix-blend-mode: screen;
  pointer-events: none;
  display: none;
}
.orbe[data-mode="parole"] .orbe-souffle { display: block; animation: orbe-parole-halo 1.5s var(--ease-douce) infinite; }

.orbe-sphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 62%, var(--orbe-sphere-centre) 0%, var(--orbe-sphere-bord) 78%);
  box-shadow: 0 0 calc(var(--orbe-px) * .35) calc(var(--orbe-px) * .03) rgba(150, 18, 18, .45);
  animation: orbe-veille 5s var(--ease-douce) infinite;
}
.orbe[data-mode="ecoute"] .orbe-sphere,
.orbe[data-mode="reflexion"] .orbe-sphere,
.orbe[data-mode="parole"] .orbe-sphere {
  box-shadow: 0 0 calc(var(--orbe-px) * .5) calc(var(--orbe-px) * .06) rgba(200, 25, 25, .55);
}
.orbe[data-mode="ecoute"] .orbe-sphere { animation: orbe-attention 1.6s var(--ease-douce) infinite; }
.orbe[data-mode="parole"] .orbe-sphere { animation: orbe-parole 3.2s var(--ease-douce) infinite; }

.orbe-rot { position: absolute; inset: 0; animation: orbe-rotation 42s linear infinite; }
/* « reflexion » : le micro s'est tu, Elio travaille encore. Absent de la
   maquette - compose avec les mêmes fondations : la sphère respire comme en
   écoute, mais SANS les arcs qui tournent, parce que ce sont eux qui disent
   « je t'écoute » (DECISIONS 143, porté du Desktop). */
.orbe[data-mode="reflexion"] .orbe-sphere {
  animation: orbe-veille 3.2s var(--ease-douce) infinite;
}
.orbe[data-mode="reflexion"] .orbe-rot { animation-duration: 22s; }
.orbe[data-mode="ecoute"] .orbe-rot { animation-duration: 16s; }
.orbe[data-mode="parole"] .orbe-rot { animation-duration: 7s; }

.orbe-nuage {
  position: absolute;
  width: 78%;
  height: 78%;
  border-radius: 50%;
  filter: blur(calc(var(--orbe-px) / 9));
  mix-blend-mode: screen;
}
.orbe-nuage--1 { left: -8%; top: -4%; background: radial-gradient(circle, var(--orbe-nuage-1) 0%, transparent 62%); animation: orbe-nuage-a 13s var(--ease-douce) infinite; }
.orbe-nuage--2 { left: 26%; top: 18%; background: radial-gradient(circle, var(--orbe-nuage-2) 0%, transparent 62%); animation: orbe-nuage-b 16s var(--ease-douce) infinite; }
.orbe-nuage--3 { left: 8%; top: 32%; background: radial-gradient(circle, var(--orbe-nuage-3) 0%, transparent 62%); animation: orbe-nuage-c 20s var(--ease-douce) infinite; }
.orbe-nuage--4 { left: 30%; top: -10%; background: radial-gradient(circle, var(--orbe-nuage-4) 0%, transparent 62%); animation: orbe-nuage-a 13s var(--ease-douce) infinite; }
.orbe[data-mode="ecoute"] .orbe-nuage--1, .orbe[data-mode="ecoute"] .orbe-nuage--4 { animation-duration: 6s; }
.orbe[data-mode="ecoute"] .orbe-nuage--2 { animation-duration: 7.5s; }
.orbe[data-mode="ecoute"] .orbe-nuage--3 { animation-duration: 9.5s; }
.orbe[data-mode="parole"] .orbe-nuage--1, .orbe[data-mode="parole"] .orbe-nuage--4 { animation-duration: 2.6s; }
.orbe[data-mode="parole"] .orbe-nuage--2 { animation-duration: 3.3s; }
.orbe[data-mode="parole"] .orbe-nuage--3 { animation-duration: 4.1s; }

.orbe-reflet {
  position: absolute;
  width: 46%;
  height: 34%;
  left: 22%;
  top: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--orbe-reflet) 0%, transparent 70%);
  filter: blur(calc(var(--orbe-px) / 12));
}

/* État déconnecté - l'orbe s'endort, jamais de plantage muet. */
.orbe[data-mode="deconnecte"] { filter: grayscale(.85) brightness(.6); }
.orbe[data-mode="deconnecte"] .orbe-sphere { animation: none; box-shadow: 0 0 calc(var(--orbe-px) * .2) 0 rgba(60, 60, 60, .4); }
.orbe[data-mode="deconnecte"] .orbe-rot,
.orbe[data-mode="deconnecte"] .orbe-nuage { animation-play-state: paused; }

/* Le halo de la scène : réservé aux grandes orbes, il déborderait sur une vignette. */
.orbe-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--orbe-px) * 1.4);
  height: calc(var(--orbe-px) * 1.4);
  margin-left: calc(var(--orbe-px) * -0.7);
  margin-top: calc(var(--orbe-px) * -0.7);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(200, 56, 26, .24),
    rgba(186, 50, 22, .18) 30%,
    rgba(150, 36, 16, .11) 52%,
    rgba(96, 22, 10, .05) 74%,
    rgba(19, 19, 19, 0) 100%);
  animation: elio-halo 7s var(--ease-douce) infinite;
}

/* ---------- Les animations ---------- */
@keyframes orbe-veille{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.05);opacity:1}}
@keyframes orbe-ecoute{0%{transform:scale(.94);opacity:.6}70%{opacity:.22}100%{transform:scale(1.5);opacity:0}}
@keyframes orbe-parole{0%,100%{border-radius:50% 48% 52% 50%/49% 51% 49% 51%;transform:scale(1)}12%{border-radius:56% 44% 47% 53%/50% 55% 45% 50%;transform:scale(1.07)}26%{border-radius:46% 54% 52% 48%/54% 46% 54% 46%;transform:scale(.985)}42%{border-radius:53% 47% 45% 55%/47% 53% 47% 53%;transform:scale(1.09)}57%{border-radius:48% 52% 55% 45%/53% 45% 55% 47%;transform:scale(1.015)}72%{border-radius:54% 46% 48% 52%/46% 54% 46% 54%;transform:scale(1.06)}86%{border-radius:49% 51% 52% 48%/52% 48% 52% 48%;transform:scale(.99)}}
@keyframes orbe-parole-halo{0%,100%{opacity:.28;transform:scale(.98)}14%{opacity:.7;transform:scale(1.1)}30%{opacity:.4;transform:scale(1.02)}48%{opacity:.8;transform:scale(1.14)}63%{opacity:.45;transform:scale(1.04)}80%{opacity:.65;transform:scale(1.09)}}
@keyframes orbe-attention{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes orbe-nuage-a{0%,100%{transform:translate(-16%,-12%) scale(1)}33%{transform:translate(15%,9%) scale(1.3)}66%{transform:translate(-7%,17%) scale(.85)}}
@keyframes orbe-nuage-b{0%,100%{transform:translate(17%,11%) scale(1.15)}40%{transform:translate(-15%,-15%) scale(.8)}70%{transform:translate(8%,-6%) scale(1.25)}}
@keyframes orbe-nuage-c{0%,100%{transform:translate(-2%,19%) scale(.9)}50%{transform:translate(5%,-16%) scale(1.35)}}
@keyframes orbe-rotation{to{transform:rotate(360deg)}}
@keyframes orbe-bloom{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.75;transform:scale(1.14)}}
@keyframes orbe-derive{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(4%,-3%) scale(1.06)}66%{transform:translate(-3%,4%) scale(.97)}}
@keyframes elio-halo{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.08);opacity:1}}
@keyframes elio-onde{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.65);opacity:0}}