/* ==========================================================================
   Germe — ajouts. Le CSS de l'auteur n'est pas modifie : tout est prefixe
   gc- (Germe custom) et charge apres le sien.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Curseur : un anneau vert qui suit la souris + un point net
   -------------------------------------------------------------------------- */
.gc-ring,
.gc-dot {
  position: fixed; left: 0; top: 0; z-index: 90;
  pointer-events: none; border-radius: 999px; will-change: transform;
}
.gc-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(204, 255, 0, .5);
  background: radial-gradient(circle, rgba(204, 255, 0, .11), transparent 70%);
  transition: width .35s cubic-bezier(.16, 1, .3, 1), height .35s cubic-bezier(.16, 1, .3, 1),
              margin .35s cubic-bezier(.16, 1, .3, 1), border-color .35s ease,
              background .35s ease, opacity .3s ease;
}
.gc-dot {
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  background: #ccff00; box-shadow: 0 0 12px rgba(204, 255, 0, .85);
}
.gc-ring.gc-hot {
  width: 66px; height: 66px; margin: -33px 0 0 -33px;
  border-color: rgba(204, 255, 0, .85);
  background: radial-gradient(circle, rgba(204, 255, 0, .18), transparent 70%);
}
.gc-ring.gc-down { width: 22px; height: 22px; margin: -11px 0 0 -11px; border-color: rgba(204, 255, 0, .9); }
.gc-ring.gc-out { opacity: 0; }
.gc-dot.gc-out { opacity: 0; }
@media (pointer: coarse), (hover: none) { .gc-ring, .gc-dot { display: none; } }

/* --------------------------------------------------------------------------
   1b. Barre de progression : tete lumineuse, mouvement lisse en rAF
   -------------------------------------------------------------------------- */
.gc-prog-head {
  position: absolute; right: -1px; top: 50%; width: 46px; height: 8px;
  transform: translateY(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(204, 255, 0, .55), transparent 78%);
  opacity: .9;
}

/* --------------------------------------------------------------------------
   2b. Carte demo : un seul panneau visible, transition douce
   -------------------------------------------------------------------------- */
.gc-panel { display: none; }
.gc-panel.gc-on { display: flex; flex-direction: column; animation: gc-panel-in .5s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes gc-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.gc-right { animation: gc-panel-in .55s cubic-bezier(.16, 1, .3, 1) both; }
.gc-tab-bg { transition: opacity .35s ease; }
.gc-tabs [role="tab"] { transition: color .3s ease; }

/* --------------------------------------------------------------------------
   3a. Modale d'apercu des sites generes
   -------------------------------------------------------------------------- */
.gc-modal {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; padding: 18px;
}
.gc-modal.gc-on { display: flex; }
.gc-modal-scrim {
  position: absolute; inset: 0; background: rgba(3, 5, 4, .82);
  backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px);
  animation: gc-fade .35s ease both;
}
@keyframes gc-fade { from { opacity: 0; } to { opacity: 1; } }
.gc-modal-card {
  position: relative; width: min(1080px, 100%); max-height: 94vh; overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .11); border-radius: 26px;
  background: #080c08; box-shadow: 0 60px 140px -40px #000;
  animation: gc-pop .5s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes gc-pop {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.gc-modal-bar {
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .02); padding: 11px 14px;
}
.gc-modal-bar .gc-dots { display: flex; gap: 6px; }
.gc-modal-bar .gc-dots i { width: 10px; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .13); }
.gc-modal-bar .gc-dots i:first-child { background: rgba(255, 255, 255, .22); }
.gc-url {
  margin-left: 8px; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: #8c9682;
}
.gc-modal-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.gc-icobtn {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12); color: #eef2e6; background: transparent;
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.gc-icobtn:hover { border-color: rgba(204, 255, 0, .45); background: rgba(204, 255, 0, .08); color: #ccff00; }
.gc-stage {
  position: relative; flex: 1; min-height: 0; overflow: auto;
  background: #0a0f0a; padding: 14px;
}
.gc-stage-inner {
  position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08);
}
.gc-stage-inner > .gc-mock { position: absolute; inset: 0; }
.gc-modal-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, .08); padding: 14px 18px;
}
.gc-modal-foot .gc-meta { min-width: 0; }
.gc-modal-foot .gc-name { font-size: 14.5px; font-weight: 600; }
.gc-modal-foot .gc-cat { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #8c9682; }
.gc-modal-foot .gc-price { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: #d6ad63; }
.gc-cta {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 999px;
  background: #ccff00; color: #0a0c05; padding: 11px 20px;
  font-size: 13px; font-weight: 600; transition: box-shadow .3s ease, background .3s ease;
}
.gc-cta:hover { background: #d9ff63; box-shadow: 0 16px 40px -16px rgba(204, 255, 0, .8); }
.gc-badge-demo {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12); padding: 5px 10px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: #8c9682;
}
body.gc-lock { overflow: hidden; }

/* --------------------------------------------------------------------------
   3b. Animations au scroll : etat de depart, pose par JS
   -------------------------------------------------------------------------- */
.gc-rv { opacity: 0; will-change: transform, opacity, filter; }
.gc-clip { clip-path: inset(0 0 105% 0); }
.gc-line { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.gc-rule { transform: scaleX(0); transform-origin: left; }
.gc-bar { transform: scaleX(0); transform-origin: left; }
.gc-strike { transform: scaleX(0); transform-origin: left; display: block; }
html[data-motion="still"] .gc-rv,
html[data-motion="still"] .gc-clip,
html[data-motion="still"] .gc-rule,
html[data-motion="still"] .gc-bar,
html[data-motion="still"] .gc-strike { opacity: 1; clip-path: none; transform: none; stroke-dashoffset: 0; }

/* --------------------------------------------------------------------------
   4b. Intro : BUSINESS en grand, puis il vient se poser dans la phrase
   -------------------------------------------------------------------------- */
.gc-intro {
  position: fixed; inset: 0; z-index: 95; display: none;
  align-items: center; justify-content: center; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(204, 255, 0, .07), transparent 62%), #050706;
}
.gc-intro.gc-on { display: flex; }
.gc-intro span {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(3.4rem, 15vw, 13rem); line-height: 1;
  letter-spacing: .02em; color: #efd69b; white-space: nowrap;
  text-shadow: 0 0 90px rgba(214, 173, 99, .35);
  transform-origin: 50% 50%;
}
html.gc-boot .gc-boot-hide { opacity: 0 !important; }
/* Les mots du titre attendent leur tour. La boite du h1 reste en place : c'est
   ce qui permet au mot BUSINESS de venir s'y poser au pixel pres. Pas de
   !important ici : le mot doit pouvoir repasser a 1 par style en ligne au
   moment ou l'overlay se pose sur lui. */
html.gc-boot h1 .gc-mot { opacity: 0; }

/* --------------------------------------------------------------------------
   4a. Accents business
   -------------------------------------------------------------------------- */
.gc-money {
  font-family: var(--font-display); color: #efd69b;
  text-shadow: 0 0 38px rgba(214, 173, 99, .2);
}
.gc-chip-money {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  border: 1px solid rgba(214, 173, 99, .32); background: rgba(214, 173, 99, .08);
  padding: 5px 10px; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: #efd69b;
}

/* --------------------------------------------------------------------------
   Banniere de consentement
   -------------------------------------------------------------------------- */
.gc-consent {
  position: fixed; left: 18px; right: 18px; bottom: 18px; z-index: 88;
  display: none; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 0 auto; max-width: 940px;
  border: 1px solid rgba(255, 255, 255, .11); border-radius: 20px;
  background: rgba(8, 12, 8, .93); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: 14px 16px; box-shadow: 0 40px 90px -40px #000;
  animation: gc-rise .6s cubic-bezier(.16, 1, .3, 1) both;
}
.gc-consent.gc-on { display: flex; }
@keyframes gc-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.gc-consent p { flex: 1 1 320px; min-width: 0; font-size: 12.5px; line-height: 1.6; color: #b9c2ac; }
.gc-consent a { color: #ccff00; text-decoration: underline; text-underline-offset: 3px; }
.gc-consent .gc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gc-btn-ghost {
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14);
  padding: 9px 16px; font-size: 12.5px; font-weight: 600; color: #eef2e6;
  transition: border-color .25s ease, background .25s ease;
}
.gc-btn-ghost:hover { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .05); }
.gc-btn-lime {
  border-radius: 999px; background: #ccff00; color: #0a0c05;
  padding: 9px 16px; font-size: 12.5px; font-weight: 600;
}
.gc-btn-lime:hover { background: #d9ff63; }

/* --------------------------------------------------------------------------
   Reglage des animations, dans le pied de page
   -------------------------------------------------------------------------- */
.gc-motion { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gc-motion label { display: inline-flex; align-items: center; gap: 6px; color: #8c9682; }
.gc-motion select,
.gc-motion button {
  font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
  border-radius: 999px; padding: 3px 9px; background: transparent;
  border: 1px solid rgba(255, 255, 255, .14); color: #b9c2ac;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.gc-motion select:hover,
.gc-motion button:hover { border-color: rgba(204, 255, 0, .45); color: #ccff00; }
.gc-motion button { border-color: rgba(204, 255, 0, .35); color: #ccff00; }
.gc-motion option { background: #0a0f0a; color: #eef2e6; text-transform: none; letter-spacing: normal; }
.gc-consent p b { color: #eef2e6; }

/* --------------------------------------------------------------------------
   Petits ajustements
   -------------------------------------------------------------------------- */
.gc-plant-wrap { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.gc-flow { position: relative; }
.gc-flow::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  border: 1px solid rgba(204, 255, 0, .35); pointer-events: none;
  animation: gc-flow-ring 2.6s ease-out infinite;
}
@keyframes gc-flow-ring {
  0% { opacity: .7; transform: scale(.98); }
  70%, 100% { opacity: 0; transform: scale(1.06); }
}
@media (max-width: 640px) {
  .gc-consent { left: 12px; right: 12px; bottom: 12px; padding: 12px; }
  .gc-modal { padding: 8px; }
  .gc-modal-card { border-radius: 18px; }
  .gc-price { margin-left: 0; }
}