/* =============================================
   STUDIOS — page partenaires développeurs / studios
   ---------------------------------------------
   Page unique en anglais (/for-studios.html). Aucun formulaire
   n'existait sur le site avant celle-ci : tous les styles de champ
   sont définis ici plutôt que dans style.css, pour ne pas alourdir
   la feuille chargée par les 1200 pages de jeux.

   La page dit peu de choses volontairement. C'est donc la mise en
   forme qui doit porter : parcours numéroté, cartes qui réagissent
   au survol, badges, et un bouton de contact dans CHAQUE bloc plutôt
   qu'un seul en bas de page.
   ============================================= */

/* ── Rupture visuelle avec le reste du site ──
   Le portail joueur est jaune vif. Cette page est sombre : c'est le
   signal le plus immédiat qu'on a quitté l'espace joueur pour
   l'espace pro. L'accent citron reste, pour qu'on soit toujours
   chez LemonArcade. */
body.studios-page {
  background: #101100 !important;
  color: rgba(255,255,255,0.8);
}

/* style.css peint un dégradé jaune plein écran en body::before (z-index -1)
   PAR-DESSUS le fond du body. Changer `background` sur body ne suffit donc
   pas : il faut repeindre ce calque, sinon le haut de page reste jaune et
   le titre blanc devient illisible. On garde le même principe (dégradé
   ancré sur le viewport) en version sombre, avec une lueur citron en haut. */
body.studios-page::before {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(215,242,5,0.13) 0%, rgba(215,242,5,0) 52%),
    linear-gradient(180deg, #16170a 0%, #101100 45%, #080900 100%) !important;
}

/* Nappe de particules, derrière tout le contenu */
#studioParticles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

body.studios-page .site-header,
body.studios-page .studios-wrap,
body.studios-page .site-footer {
  position: relative;
  z-index: 1;
}

/* Le bouton retour du header est sombre translucide : conçu pour se
   détacher du jaune, il devient invisible sur fond sombre. On lui donne
   un cerclage citron. */
body.studios-page .hdr-btn-back {
  background: rgba(215,242,5,0.12);
  border-color: rgba(215,242,5,0.40);
  color: var(--primary);
}

body.studios-page .hdr-btn-back:hover {
  background: var(--primary);
  color: #101100;
}

/* Footer translucide : les particules continuent derrière, la page
   ne se termine pas sur un bloc opaque qui casse l'effet. */
body.studios-page .site-footer {
  background: rgba(28,29,2,0.72);
  border-top: 1px solid rgba(215,242,5,0.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.studios-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* ── Hero ──────────────────────────────────── */
.studios-hero {
  margin-bottom: 40px;
  text-align: center;
  padding: 28px 0 12px;
}

.studios-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary);
  background: rgba(215,242,5,0.1);
  border: 1px solid rgba(215,242,5,0.28);
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 22px;
}

.studios-hero h1 {
  font-size: 46px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

/* Surlignage au feutre sur un mot du titre */
.studios-hero h1 mark {
  background: var(--primary);
  color: #101100;
  padding: 0 12px;
  border-radius: 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.studios-hero .lead {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,0.68);
  margin: 0 auto;
  max-width: 520px;
}

/* ── Sections ──────────────────────────────── */
.studios-section {
  position: relative;
  background: #1c1d02;
  border: 1px solid rgba(215,242,5,0.13);
  border-radius: 18px;
  padding: 42px 40px;
  margin-bottom: 22px;
  color: rgba(255,255,255,0.8);
  font-size: 16px;
  line-height: 1.7;
  overflow: hidden;
}

/* Halo discret en haut du bloc, pour qu'il ne soit pas un simple rectangle */
.studios-section::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(215,242,5,0.10) 0%, transparent 70%);
  pointer-events: none;
}

.studios-section h2 {
  position: relative;
  font-size: 27px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.studios-section > p { margin: 0 0 4px; max-width: 620px; }
.studios-section a { color: var(--primary); }

.section-kicker {
  display: block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary);
  margin-bottom: 10px;
}

/* ── Parcours numéroté (bloc « publier ») ──── */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 34px 0 6px;
}

.step {
  position: relative;
  text-align: center;
  padding: 0 10px;
}

/* Trait de liaison entre les pastilles */
.step::after {
  content: '';
  position: absolute;
  top: 27px;
  left: calc(50% + 36px);
  right: calc(-50% + 36px);
  height: 2px;
  background: linear-gradient(90deg, rgba(215,242,5,0.55), rgba(215,242,5,0.12));
}

.step:last-child::after { display: none; }

.step-num {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #252601;
  border: 2px solid var(--primary);
  color: var(--primary);
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition), box-shadow var(--transition);
}

.step:hover .step-num {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(215,242,5,0.25);
}

.step h3 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 5px;
}

.step p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.55);
  margin: 0;
}

/* ── Cartes d'offre (bloc « promouvoir ») ──── */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin: 30px 0 6px;
}

.offer-card {
  position: relative;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  padding: 24px 22px 22px;
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.offer-card:hover {
  transform: translateY(-4px);
  border-color: rgba(215,242,5,0.45);
  background: rgba(255,255,255,0.07);
}

.offer-card .icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(215,242,5,0.13);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  margin-bottom: 15px;
}

.offer-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 7px;
}

.offer-card p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  margin: 0;
}

/* Pastille d'angle : « #1 on TikTok », « Low price » */
.offer-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--primary);
  color: #252601;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ── Bouton de contact présent dans chaque bloc ── */
.block-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  background: var(--primary);
  color: #252601 !important;
  font-weight: 800;
  font-size: 15px;
  padding: 13px 28px;
  border-radius: 50px;
  text-decoration: none !important;
  transition: transform var(--transition), box-shadow var(--transition);
}

.block-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.block-cta svg { flex-shrink: 0; }

/* ── Formulaire ────────────────────────────── */
.studios-form-card {
  position: relative;
  background: #1c1d02;
  border: 1px solid rgba(215,242,5,0.13);
  border-radius: 18px;
  padding: 42px 40px;
  scroll-margin-top: 80px;
  overflow: hidden;
}

.studios-form-card::before {
  content: '';
  position: absolute;
  top: -140px;
  left: -100px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(215,242,5,0.10) 0%, transparent 70%);
  pointer-events: none;
}

.studios-form-card h2 {
  position: relative;
  font-size: 27px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
}

.studios-form-card .form-intro {
  position: relative;
  color: rgba(255,255,255,0.6);
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 28px;
}

.studios-form-card form { position: relative; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-field { margin-bottom: 18px; }

.form-field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  margin-bottom: 6px;
}

.form-field .optional {
  font-weight: 400;
  color: rgba(255,255,255,0.4);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="url"],
.form-field textarea,
.form-field select {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: 11px 13px;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  transition: border-color var(--transition), background var(--transition);
}

.form-field textarea { min-height: 130px; resize: vertical; }

.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(255,255,255,0.3); }

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(255,255,255,0.09);
}

.form-field input:invalid:not(:placeholder-shown) {
  border-color: #f87171;
}

/* Cases à cocher « ce qui vous intéresse » */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 11px 13px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.checkbox-item:hover { background: rgba(255,255,255,0.07); }
.checkbox-item:has(input:checked) {
  border-color: var(--primary);
  background: rgba(215,242,5,0.1);
}

.checkbox-item input { margin: 2px 0 0; accent-color: var(--primary); flex-shrink: 0; }

.checkbox-item span {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  line-height: 1.4;
}

/* Piège à robots : invisible pour l'humain, rempli par les scripts.
   Volontairement sans display:none, certains bots ignorent ces champs. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Widget Turnstile */
.turnstile-wrap { margin: 22px 0 18px; min-height: 65px; }

.form-submit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--primary);
  color: #252601;
  font-family: inherit;
  font-weight: 800;
  font-size: 16px;
  padding: 14px 34px;
  border: 0;
  border-radius: 50px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}

.form-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.35);
}

.form-submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.form-note {
  font-size: 13px;
  color: rgba(255,255,255,0.42);
  margin-top: 14px;
  line-height: 1.6;
}

.form-note a { color: rgba(255,255,255,0.6); }

/* Retours de soumission */
.form-status {
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
  display: none;
}

.form-status.is-visible { display: block; }

.form-status.is-error {
  background: rgba(248,113,113,0.12);
  border: 1px solid rgba(248,113,113,0.4);
  color: #fca5a5;
}

.form-status.is-success {
  background: rgba(215,242,5,0.12);
  border: 1px solid rgba(215,242,5,0.45);
  color: var(--primary);
}

/* Écran de confirmation qui remplace le formulaire */
.form-sent {
  display: none;
  text-align: center;
  padding: 26px 10px;
  position: relative;
}

.form-sent.is-visible { display: block; }
.form-sent .check { font-size: 42px; line-height: 1; margin-bottom: 14px; }

.form-sent h2 { font-size: 24px; color: var(--primary); margin: 0 0 10px; }

.form-sent p {
  color: rgba(255,255,255,0.65);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 460px;
}

@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .step::after { display: none; }
  .step { display: grid; grid-template-columns: 54px 1fr; gap: 16px; text-align: left; align-items: center; padding: 0; }
  .step-num { margin: 0; }
}

@media (max-width: 700px) {
  .studios-hero h1 { font-size: 32px; }
  .studios-hero .lead { font-size: 16px; }
  .studios-section,
  .studios-form-card { padding: 28px 20px; border-radius: 14px; }
  .studios-section h2,
  .studios-form-card h2 { font-size: 22px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .block-cta { width: 100%; justify-content: center; }
}