/* ============================================================
   GENESE - entree de l ecosysteme
   index.html      : sequence animee puis ecran de selection
   ecosysteme.html : presentation detaillee des services
   ============================================================ */

:root {
  --or: #d4b235;
  --or-doux: #faf5e3;
  --or-fonce: #8a7118;
  --vert: #35d461;
  --bleu: #3557d4;

  --ink: #101312;
  --ink-doux: #525855;
  --ink-pale: #8b908c;
  --bg: #ffffff;
  --bg-alt: #f7f6f2;
  --ligne: #e9e7e0;

  --radius: 20px;
  --display: "Montserrat", sans-serif;
  --texte: "Inter", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--texte);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
button { font: inherit; cursor: pointer; border: none; background: none; }

.container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ============================================================
   1. SEQUENCE D ENTREE
   ============================================================ */

#chargeur {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.scene { position: relative; display: flex; align-items: center; justify-content: center; }

.reseau {
  width: min(460px, 86vw);
  height: auto;
  display: block;
  transform-origin: 50% 50%;
}

.route { fill: none; stroke-linecap: round; }

/* la chaussee se dessine */
.chaussee {
  stroke: var(--ink);
  stroke-width: 7;
  opacity: 0.08;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: tracer 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.chaussee-or { animation-delay: 0.15s; }
.chaussee-vert { animation-delay: 0.4s; }
.chaussee-bleu { animation-delay: 0.65s; }
@keyframes tracer { to { stroke-dashoffset: 0; } }

/* axe colore en pointilles qui defilent */
.axe {
  stroke-width: 2.5;
  stroke-dasharray: 0.022 0.028;
  opacity: 0;
  animation: axe-in 0.4s ease forwards, defiler 1.1s linear infinite;
}
.axe-or { stroke: var(--or); animation-delay: 0.8s, 0.8s; }
.axe-vert { stroke: var(--vert); animation-delay: 1.05s, 1.05s; }
.axe-bleu { stroke: var(--bleu); animation-delay: 1.3s, 1.3s; }
@keyframes axe-in { to { opacity: 1; } }
@keyframes defiler { to { stroke-dashoffset: -0.1; } }

/* les points qui circulent */
.vehicule { opacity: 0; }
.veh-or { fill: var(--or); animation: veh-in 0.3s ease 0.9s forwards; }
.veh-vert { fill: var(--vert); animation: veh-in 0.3s ease 1.15s forwards; }
.veh-bleu { fill: var(--bleu); animation: veh-in 0.3s ease 1.4s forwards; }
@keyframes veh-in { to { opacity: 1; } }

/* fin de sequence : le reseau se replie, les points convergent au centre */
.fin .reseau {
  transform: scale(0.12);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.65, -0.1, 0.3, 1), opacity 0.4s ease 0.2s;
}

.fusion {
  position: absolute;
  top: 50%; left: 50%;
  width: 26px; height: 26px;
  margin: -13px;
  border-radius: 50%;
  background: var(--or);
  transform: scale(0);
}
.fin .fusion { animation: fusionner 0.75s cubic-bezier(0.2, 1.4, 0.4, 1) 0.35s forwards; }
@keyframes fusionner {
  0% { transform: scale(0); opacity: 1; }
  40% { transform: scale(1.5); opacity: 1; }
  70% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.2); opacity: 0; }
}

/* le chargeur s efface une fois les bulles en place */
.fin #chargeur { animation: effacer 0.4s ease 1s forwards; }
@keyframes effacer { to { opacity: 0; visibility: hidden; } }

/* ============================================================
   2. ECRAN DE SELECTION
   ============================================================ */

.page-entree {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.selection {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 46px);
  padding: clamp(40px, 7vw, 70px) 24px clamp(30px, 5vw, 50px);
  text-align: center;
}

.selection-tete { opacity: 0; transform: translateY(14px); }
.montre .selection-tete { animation: monter 0.7s var(--ease) 1.15s forwards; }

.sur-titre {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or-fonce);
  background: var(--or-doux);
  border: 1px solid #eadfb5;
  padding: 7px 16px;
  border-radius: 100px;
  margin-bottom: 18px;
}

.selection-tete h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.7rem, 4.4vw, 2.9rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.pt-or { color: var(--or); }

/* ---- les trois services ---- */

.choix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.4vw, 26px);
  width: 100%;
  max-width: 940px;
}

.service {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: clamp(26px, 3vw, 38px) clamp(16px, 2vw, 26px) clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  background: var(--bg);
  transition: transform 0.35s var(--ease), border-color 0.3s, box-shadow 0.35s;
}

.service:hover {
  transform: translateY(-6px);
  border-color: var(--teinte);
  box-shadow: 0 20px 48px rgba(16, 19, 18, 0.1);
}

.service:focus-visible { outline: 2px solid var(--teinte); outline-offset: 3px; }

/* la bulle : c est elle qui vient du centre de l ecran */
.bulle {
  --dx: 0px;
  --dy: 0px;
  width: clamp(38px, 5vw, 52px);
  height: clamp(38px, 5vw, 52px);
  border-radius: 50%;
  background: var(--teinte);
  margin-bottom: 18px;
  flex: none;
  /* au repos la bulle est au centre de l ecran, invisible : elle rejoint sa
     colonne quand la classe .montre arrive sur le corps de page */
  transform: translate(var(--dx), var(--dy)) scale(0);
  transition: transform 0.62s cubic-bezier(0.2, 1.4, 0.35, 1);
}
.montre .bulle { transform: translate(0, 0) scale(1); }
.montre .service:hover .bulle { transform: translate(0, 0) scale(1.12); }

/* si la sequence est passee (retour sur la page, mouvement reduit),
   les bulles sont simplement la, sans trajet */
.sans-sequence .bulle { transition: transform 0.3s var(--ease); }
.sans-sequence .selection-tete,
.sans-sequence .nom,
.sans-sequence .role,
.sans-sequence .pitch,
.sans-sequence .entrer,
.sans-sequence .lien-ecosysteme { animation-delay: 0s !important; animation-duration: 0.4s !important; }

/* le texte monte derriere un masque, une fois les bulles posees */
.nom, .role, .pitch, .entrer { opacity: 0; transform: translateY(12px); }
.montre .nom { animation: monter 0.55s var(--ease) 0.72s forwards; }
.montre .role { animation: monter 0.55s var(--ease) 0.8s forwards; }
.montre .pitch { animation: monter 0.55s var(--ease) 0.88s forwards; }
.montre .entrer { animation: monter 0.55s var(--ease) 0.96s forwards; }

.choix .service:nth-child(1) .bulle { transition-delay: 0.1s; }
.choix .service:nth-child(2) .bulle { transition-delay: 0.2s; }
.choix .service:nth-child(3) .bulle { transition-delay: 0.3s; }

@keyframes monter { to { opacity: 1; transform: none; } }

.nom {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  letter-spacing: -0.035em;
  line-height: 1.1;
}
.nom i { font-style: normal; color: var(--teinte); }

.role {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-pale);
  margin-top: 2px;
}

.pitch {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-doux);
  margin-top: 14px;
  max-width: 26ch;
}

.entrer {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--teinte);
}
.entrer svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.service:hover .entrer svg { transform: translateX(5px); }

.lien-ecosysteme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-pale);
  padding: 10px 4px;
  opacity: 0;
  transition: color 0.25s;
}
.montre .lien-ecosysteme { animation: monter 0.6s var(--ease) 1.3s forwards; }
.lien-ecosysteme:hover { color: var(--ink); }
.lien-ecosysteme svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.lien-ecosysteme:hover svg { transform: translateX(4px); }

/* ---- voile de transition vers le service choisi ---- */

.voile {
  position: fixed;
  top: 0; left: 0;
  width: 100px; height: 100px;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  z-index: 2000;
  pointer-events: none;
  transform: scale(0);
  will-change: transform;
}
.voile.part { transition: transform 0.62s cubic-bezier(0.65, 0, 0.35, 1); }

/* ============================================================
   3. PAGE ECOSYSTEME
   ============================================================ */

.page-ecosysteme { display: flex; flex-direction: column; }

.page-ecosysteme header { border-bottom: 1px solid var(--ligne); }
.page-ecosysteme header .container {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
}
.logo span { color: var(--or); }

.retour {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink-doux);
  transition: color 0.2s;
}
.retour:hover { color: var(--ink); }
.retour svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.retour:hover svg { transform: translateX(-3px); }

.hero { padding: 84px 0 56px; }
.hero h1 {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 720px;
  margin-bottom: 20px;
}
.hero h1 .accent { color: var(--or); }
.hero p { color: var(--ink-doux); font-size: 1.08rem; max-width: 540px; }

.trio-points { display: inline-flex; gap: 7px; margin-left: 10px; }
.trio-points i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.trio-points i:nth-child(1) { background: var(--or); }
.trio-points i:nth-child(2) { background: var(--vert); }
.trio-points i:nth-child(3) { background: var(--bleu); }

.ecosysteme { padding: 40px 0 96px; flex: 1; }
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}

.tuile {
  border-radius: var(--radius);
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  min-height: 250px;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
a.tuile:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(16, 19, 18, 0.1); }

.wordmark {
  font-family: var(--display);
  font-weight: 900;
  font-size: 2.1rem;
  letter-spacing: -0.03em;
  line-height: 1;
}
.wordmark .point { color: var(--or); }
.wordmark .point-vert { color: var(--vert); }
.wordmark .point-bleu { color: var(--bleu); }

.by {
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 12px;
  opacity: 0.55;
}

.tuile .description { margin-top: auto; padding-top: 28px; font-size: 0.93rem; color: var(--ink-doux); }
.tuile .action { margin-top: 18px; font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }
.tuile .action .fleche { color: var(--or); transition: transform 0.2s; }
a.tuile:hover .action .fleche { transform: translateX(5px); }
.tuile-wyvo .action .fleche { color: var(--vert); }
.tuile-glide .action .fleche { color: var(--bleu); }

.tuile-genese {
  grid-column: 1 / -1;
  background:
    radial-gradient(ellipse 600px 400px at 85% 10%, rgba(212, 178, 53, 0.25), transparent 60%),
    radial-gradient(ellipse 500px 350px at 5% 100%, rgba(212, 178, 53, 0.1), transparent 60%),
    #0d0f0c;
  color: #fff;
  min-height: 300px;
}
.tuile-genese .wordmark { font-size: 3rem; }
.tuile-genese .description { color: rgba(255, 255, 255, 0.65); max-width: 480px; }
.tuile-genese .action { color: var(--or); }
.tuile-genese .badge-principal {
  position: absolute;
  top: 34px; right: 34px;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--or);
  color: #2a2205;
  padding: 6px 14px;
  border-radius: 100px;
}

.tuile-service { background: var(--bg-alt); border: 1px solid var(--ligne); }
.tuile-wyvo:hover { border-color: var(--vert); }
.tuile-glide:hover { border-color: var(--bleu); }

.tuile-avenir { border: 1.5px dashed var(--ligne); background: var(--bg); justify-content: center; }
.tuile-avenir .plus {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--or-doux);
  color: var(--or-fonce);
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.tuile-avenir h3 { font-family: var(--display); font-weight: 800; font-size: 1.25rem; margin-bottom: 6px; }
.tuile-avenir p { font-size: 0.9rem; color: var(--ink-doux); }

.page-ecosysteme footer { background: #0d0f0c; color: rgba(255, 255, 255, 0.55); padding: 30px 0; }
.page-ecosysteme footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
footer p, footer a { font-size: 0.85rem; }
footer a:hover { color: var(--or); }
.footer-liens { display: flex; gap: 22px; }

/* ============================================================
   4. RESPONSIVE
   ============================================================ */

@media (max-width: 820px) {
  .choix { grid-template-columns: 1fr; max-width: 420px; gap: 12px; }
  .service {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    text-align: left;
    gap: 0 16px;
    padding: 20px 22px;
  }
  .bulle { margin-bottom: 0; width: 34px; height: 34px; }
  .nom { font-size: 1.3rem; }
  .role { width: 100%; margin-left: 50px; margin-top: 0; }
  .pitch { display: none; }
  .entrer { margin-left: auto; margin-top: 0; font-size: 0; gap: 0; }
  .entrer svg { width: 18px; height: 18px; }
  .selection { justify-content: flex-start; padding-top: clamp(60px, 14vh, 120px); }
}

@media (max-width: 640px) {
  .hero { padding: 56px 0 36px; }
  .tuile-genese .wordmark { font-size: 2.3rem; }
  .tuile { min-height: 210px; padding: 30px 26px; }
  .tuile-genese .badge-principal { top: 26px; right: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  #chargeur { display: none; }
  .bulle { transform: scale(1); transition: none; }
  .selection-tete, .nom, .role, .pitch, .entrer, .lien-ecosysteme {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .voile { display: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}