/* ============================================================
   L’INTRO — partagee par l’application ET le site.
   Chargee apres app.css (application) ou site.css (site).
   ------------------------------------------------------------
   LA CHOREGRAPHIE (environ 5,5 s, pilotee par vues/intro.js) :
     1. chaque logiciel APPARAIT au centre, l’un apres l’autre,
        et part prendre sa place sur un anneau QUI TOURNE ;
     2. l’anneau accelere et se resserre : les logiciels
        S’ASSEMBLENT en spirale sur l’emplacement du logo ;
     3. ECLAT : le logo nait de l’assemblage, le nom se devoile ;
     4. les noms des logiciels tombent en cascade, les annonces
        en gris « bientot ».
   Les positions de l’etape 1-2 sont calculees image par image en
   JavaScript ; les etapes 3-4 sont des animations CSS declenchees
   par les classes .phase-logo et .phase-noms.
   ============================================================ */
.intro {
  position: fixed; inset: 0; z-index: 90;
  background: var(--fond);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 26px;
  overflow: hidden;
}
.intro.parti {
  opacity: 0; pointer-events: none;
  transform: scale(1.08); filter: blur(8px);
  transition: opacity 560ms ease, transform 700ms var(--doux), filter 560ms ease;
}
.intro::before {
  /* la lueur des couleurs, qui monte avec l’assemblage */
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 780px; height: 420px; transform: translate(-50%, -50%);
  background: var(--quatre); filter: blur(140px); opacity: .05;
  transition: opacity 900ms ease;
}
.intro.phase-logo::before { opacity: .2; }

/* un ciel de points qui derive : la profondeur */
.intro-ciel {
  position: absolute; inset: -20%;
  background-image:
    radial-gradient(var(--bord-fort) 1px, transparent 1.4px),
    radial-gradient(var(--bord) 1px, transparent 1.4px);
  background-size: 46px 46px, 73px 73px;
  background-position: 0 0, 20px 31px;
  opacity: .5;
  animation: ciel 14s linear infinite;
  pointer-events: none;
}
@keyframes ciel { to { transform: translate(46px, -73px); } }

/* ---------------------------------------------- l’orbite */
.intro-orbite { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 2; }
.intro-anneau {
  position: absolute; left: 0; top: 0;
  border: 1.5px dashed var(--bord-fort); border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
}
.orb {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  will-change: transform, opacity;
  opacity: 0;
}
.orb .badge {
  display: block; border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 30px -6px var(--c), 0 0 26px -4px var(--c);
}
.orb span {
  font-size: 11px; font-weight: 700; white-space: nowrap;
  color: var(--c); text-shadow: 0 2px 8px var(--fond);
}
.orb.bientot .badge { filter: grayscale(1) brightness(.8); opacity: .75; box-shadow: 0 0 0 1.5px var(--bord-fort); }
.orb.bientot span { color: var(--texte-3); }
/* la trainee : une copie floue qui suit avec retard */
.orb::before {
  content: ''; position: absolute; left: 50%; top: 23px; width: 40px; height: 40px;
  margin: -20px 0 0 -20px; border-radius: 50%;
  background: var(--c); filter: blur(18px); opacity: .35; z-index: -1;
}
.orb.bientot::before { opacity: 0; }

/* ---------------------------------------------- l’eclat */
.intro-eclat, .intro-eclat::after {
  position: absolute; left: 0; top: 0; width: 90px; height: 90px; margin: -45px 0 0 -45px;
  border-radius: 50%; pointer-events: none; z-index: 1;
  border: 2px solid var(--texte);
  box-shadow: 0 0 24px rgba(255, 255, 255, .35), inset 0 0 18px rgba(255, 255, 255, .2);
  opacity: 0;
}
.intro-eclat::after { content: ''; left: 50%; top: 50%; border-color: var(--excel); box-shadow: 0 0 24px var(--excel); }
.phase-logo .intro-eclat { animation: eclat 900ms var(--doux) forwards; }
.phase-logo .intro-eclat::after { animation: eclat 1100ms var(--doux) 120ms forwards; }
@keyframes eclat {
  0%   { opacity: 1; transform: scale(.3); }
  100% { opacity: 0; transform: scale(5.5); }
}
.intro-flash {
  position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 3;
}
.phase-logo .intro-flash { animation: flash 420ms ease-out; }
@keyframes flash { 0% { opacity: .22; } 100% { opacity: 0; } }

/* ---------------------------------------------- le logo et le nom */
.intro-scene { position: relative; display: flex; align-items: center; gap: 18px; z-index: 2; }
.intro-logo { display: block; opacity: 0; }
.intro-logo svg { display: block; border-radius: 22px; }
.phase-logo .intro-logo { animation: logo-nait 760ms var(--ressort) forwards; }
@keyframes logo-nait {
  0%   { opacity: 0; transform: scale(.2) rotate(-120deg); filter: brightness(3); }
  60%  { opacity: 1; filter: brightness(1.4); }
  100% { opacity: 1; transform: none; filter: none; }
}
.intro-mot {
  font-size: 34px; font-weight: 800; letter-spacing: -.02em;
  white-space: nowrap; opacity: 0;
}
.intro-mot em { font-style: normal; color: var(--texte-3); }
.phase-logo .intro-mot { animation: devoile 680ms var(--doux) 380ms both; }
@keyframes devoile {
  0%   { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateX(-22px); }
  100% { clip-path: inset(0 0 0 0);   opacity: 1; transform: none; }
}
@media (max-width: 380px) { .intro-mot { font-size: 28px; } }

/* ---------------------------------------------- les noms en cascade */
.intro-sous {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
  max-width: 560px; padding: 0 20px;
}
.puce-intro {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--c);
  border: 1px solid var(--c); border-radius: 99px; padding: 5px 13px 5px 6px;
  background: color-mix(in srgb, var(--c) 9%, transparent);
  opacity: 0;
}
.phase-noms .puce-intro {
  animation: puce-entre 620ms var(--ressort) both;
  animation-delay: calc(var(--k) * 85ms);
}
.puce-intro .badge { flex: none; border-radius: 6px; }
/* Les logiciels annonces : gris, pointilles, sans couleur. */
.puce-intro.bientot { --c: var(--texte-3); border-style: dashed; background: none; }
.puce-intro.bientot .badge { filter: grayscale(1) brightness(.75); opacity: .7; }
.puce-intro em {
  font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texte-3);
  border: 1px solid var(--bord-fort); border-radius: 99px; padding: 2px 6px; margin-left: 2px;
}
@keyframes puce-entre {
  0%   { opacity: 0; transform: translateY(-26px) scale(.7) rotate(-6deg); filter: blur(4px); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes monte { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

/* ---------------------------------------------- « Bientôt », a part */
.intro-bientot { position: relative; z-index: 2; display: grid; gap: 12px; justify-items: center; margin-top: -6px; }
.intro-bientot-mot {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 800; letter-spacing: .32em; text-transform: uppercase;
  color: var(--texte-3); opacity: 0;
}
.intro-bientot-mot i { display: block; width: 46px; height: 1px; background: var(--bord-fort); transform: scaleX(0); }
.intro-bientot-mot i:first-child { transform-origin: right; }
.intro-bientot-mot i:last-child { transform-origin: left; }
.intro-bientot-mot span {
  background: linear-gradient(90deg, var(--texte-3) 0%, var(--texte) 50%, var(--texte-3) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.phase-bientot .intro-bientot-mot { animation: bientot-sort 640ms var(--ressort) both; }
.phase-bientot .intro-bientot-mot span { animation: lueur-mot 1.6s ease-in-out 400ms infinite; }
.phase-bientot .intro-bientot-mot i { animation: trait-ouvre 600ms var(--doux) 200ms both; }
@keyframes bientot-sort {
  0% { opacity: 0; transform: scale(1.8); letter-spacing: .9em; filter: blur(6px); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes lueur-mot { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes trait-ouvre { to { transform: scaleX(1); } }
.phase-bientot .intro-sous-avenir .puce-intro {
  animation: avenir-entre 700ms var(--ressort) both;
  animation-delay: calc(500ms + var(--k) * 160ms);
}
@keyframes avenir-entre {
  0%   { opacity: 0; transform: translateY(22px) scale(.6); filter: blur(6px) grayscale(1); }
  60%  { opacity: 1; filter: blur(0) grayscale(1); }
  100% { opacity: 1; transform: none; filter: grayscale(1); }
}

.intro-pied {
  position: relative; z-index: 2; text-align: center; padding: 0 24px;
  font-size: 14px; color: var(--texte-3); opacity: 0;
}
.phase-bientot .intro-pied { animation: monte 520ms ease-out both; animation-delay: calc(700ms + var(--n) * 120ms); }
.intro:not(:has(.intro-bientot)).phase-noms .intro-pied { animation: monte 520ms ease-out both; }

/* Le trait du bas se remplit pendant toute l intro : on voit ou on en est. */
.intro-trait {
  position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 34px);
  width: 120px; height: 3px; margin-left: -60px; border-radius: 3px;
  background: var(--bord); overflow: hidden; z-index: 2;
}
.intro-trait i {
  display: block; height: 100%; width: 100%; background: var(--quatre);
  transform-origin: left; transform: scaleX(0);
  animation: remplit linear forwards;
  animation-duration: var(--duree, 5.6s);
}
@keyframes remplit { to { transform: scaleX(1); } }
.intro-halo {
  position: absolute; left: 50%; top: 50%; width: 560px; height: 560px;
  margin: -280px 0 0 -280px; border-radius: 50%;
  background: conic-gradient(from 0deg, #1FBF7400, #1FBF7433, #2E8BE033, #F2762F33, #E8B41233, #CC292733, #1FBF7400);
  filter: blur(60px); opacity: 0;
  animation: halo-tourne 9s linear infinite;
  transition: opacity 1s ease;
  pointer-events: none;
}
.phase-logo .intro-halo { opacity: 1; }
@keyframes halo-tourne { to { transform: rotate(360deg); } }
.intro-passer {
  position: absolute; right: 18px; z-index: 4;
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  background: none; border: 1px solid var(--bord); color: var(--texte-3);
  font: 600 12px/1 'Poppins', sans-serif;
  padding: 8px 14px; border-radius: 99px; cursor: pointer;
}

/* ============================================================
   LA BULLE DU DEFI — elle s'ouvre, puis se range dans son icone
   ============================================================ */
.annonce-defi {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px;
  background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: ad-fond 300ms ease both; transition: background 500ms ease, backdrop-filter 500ms ease;
}
.annonce-defi.range { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; }
.ad-carte {
  width: min(320px, 100%); padding: 22px 20px 14px; text-align: center; border-radius: 24px;
  background: var(--surface-2); border: 2px solid var(--or);
  box-shadow: var(--ombre-3), 0 0 60px -14px var(--or);
  animation: ad-sort 620ms var(--ressort) both;
}
@keyframes ad-sort { from { opacity: 0; transform: translateY(60px) scale(.5) rotate(6deg); } }
.ad-icone { font-size: 54px; line-height: 1; animation: ad-icone 1.6s var(--ressort) 300ms both; }
@keyframes ad-icone {
  0% { transform: scale(0) rotate(-180deg); }
  40% { transform: scale(1.2) rotate(12deg); }
  60% { transform: scale(.95) rotate(-6deg); }
  100% { transform: none; }
}
.ad-sur { display: inline-block; margin: 10px 0 4px; padding: 3px 10px; border-radius: 99px; background: var(--or); color: #1A1403; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; animation: ad-entre 400ms var(--doux) 350ms backwards; }
.ad-titre { font-size: 22px; font-weight: 800; margin-bottom: 6px; animation: ad-entre 420ms var(--doux) 420ms backwards; }
.ad-carte p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--texte-2); animation: ad-entre 420ms var(--doux) 480ms backwards; }
.ad-carte p b { color: var(--or); }
.ad-cles { display: flex; justify-content: center; gap: 4px; font-size: 24px; margin-bottom: 14px; }
.ad-cles span { animation: ad-cle 600ms var(--ressort) backwards; }
.ad-cles span:nth-child(1) { animation-delay: 550ms; }
.ad-cles span:nth-child(2) { animation-delay: 640ms; }
.ad-cles span:nth-child(3) { animation-delay: 730ms; }
.ad-cles span:nth-child(4) { animation-delay: 820ms; }
.ad-cles span:nth-child(5) { animation-delay: 910ms; }
.ad-go { background: var(--or); color: #1A1403; box-shadow: 0 5px 0 0 #8A6206; animation: ad-entre 460ms var(--ressort) 600ms backwards; }
.ad-plus-tard { margin-top: 8px; background: none; border: 0; color: var(--texte-3); font-size: 13px; font-weight: 700; cursor: pointer; padding: 8px; }
/* l'icone recoit la bulle */
.defi-bouton.recoit, .nav-defi.recoit { animation: recoit 700ms var(--ressort); }
@keyframes recoit {
  0% { transform: scale(1); }
  30% { transform: scale(1.45) rotate(-10deg); box-shadow: 0 0 0 8px color-mix(in srgb, var(--or) 40%, transparent), 0 0 30px var(--or); }
  60% { transform: scale(.9) rotate(6deg); }
  100% { transform: none; }
}
@keyframes ad-fond { from { opacity: 0; } }
@keyframes ad-entre { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes ad-cle { from { opacity: 0; transform: translateY(40px) rotate(-200deg) scale(.3); } }