/* ==========================================================================
   PetroSync — Surcharge de thème (Count Master / Coming Soon)
   Palette officielle issue du logo :
     --ps-navy   : #1B2D45
     --ps-green  : #00C600
     --ps-green-dark : #00A000
   ========================================================================== */

:root {
  --ps-navy: #1B2D45;
  --ps-navy-deep: #121f30;
  --ps-green: #00C600;
  --ps-green-dark: #00A000;
}

/* ---- Correctif de scroll ----
   Le template d'origine utilise display:table + height:100vh sur .s-home,
   ce qui ne contraint pas réellement la hauteur quand le contenu dépasse :
   le tableau s'étire pour englober son contenu, scrollHeight == clientHeight,
   et overflow-y:auto n'a alors plus rien à faire défiler. Résultat : la page
   ne scrolle plus dès que le contenu (texte + formulaire) dépasse l'écran.
   On force ici un vrai contexte de scroll sur la fenêtre. */
html,
body {
  overflow: visible !important;
  height: auto !important;
  min-height: 100%;
}

.s-home {
  display: block !important;
  height: auto !important;
  min-height: 100vh;
  overflow-y: visible !important;
}

.home-content {
  display: block !important;
  height: auto !important;
  /* Espace sous la navbar (logo fixe en haut).
     1rem = 10px ici. Valeur réduite pour coller le contenu à la navbar. */
  padding-top: 2rem;
}

/* ---- Fonds noirs du template -> navy PetroSync ---- */

body {
  background: var(--ps-navy);
}

.s-home {
  background-color: var(--ps-navy) !important;
}

.s-home--particles {
  background: var(--ps-navy) !important;
  background: radial-gradient(circle, var(--ps-navy) 0%, var(--ps-navy-deep) 100%) !important;
}

.s-home--particles::before {
  background: var(--ps-navy-deep);
}

.s-home--static::before {
  background: linear-gradient(to right, var(--ps-navy-deep) 0%, var(--ps-navy-deep) 20%, transparent 100%);
}

.s-home .overlay {
  background-color: var(--ps-navy-deep);
}

.s-home .gradient-overlay {
  background: linear-gradient(to right, var(--ps-navy-deep) 0%, var(--ps-navy-deep) 20%, transparent 100%);
}

#preloader {
  background: var(--ps-navy-deep) !important;
}

/* Logo du header */
.home-logo img {
  height: 40px;
  width: auto;
}

/* Compteur + ligne déco déjà passés en vert via main.css (#00C600) */

/* ==========================================================================
   Formulaire de contact — Nom, Prénom, Email
   Remplace le simple champ email Mailchimp
   ========================================================================== */

.ps-contact-form {
  width: 100%;
  max-width: 460px;
}

.ps-contact-form .ps-row {
  display: flex;
  gap: 14px;
}

.ps-contact-form .ps-row input[type="text"] {
  flex: 1 1 0;
  min-width: 0;
}

.ps-contact-form input[type="text"],
.ps-contact-form input[type="email"] {
  width: 100%;
  height: 5.4rem;
  font-size: 1.5rem;
  line-height: 3rem;
  padding: 1.2rem 1.6rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  margin-bottom: 1.4rem;
  border-radius: 3px;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.ps-contact-form input[type="text"]::placeholder,
.ps-contact-form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.ps-contact-form input[type="text"]:focus,
.ps-contact-form input[type="email"]:focus {
  border-color: var(--ps-green);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.ps-contact-form .ps-submit-btn {
  display: block;
  width: 100%;
  /* Neutralise le margin asymétrique hérite du template */
  margin: 0 !important;
  border: 1px solid var(--ps-green);
  background: var(--ps-green);
  color: #fff;
  font-family: "metropolis-bold", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 1.3rem;
  line-height: 1;
  padding: 1.6rem 2rem;
  border-radius: 3px;
  cursor: pointer;
  text-align: center !important;
  vertical-align: middle;
  box-sizing: border-box;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.ps-contact-form .ps-submit-btn:hover {
  background: var(--ps-green-dark);
  border-color: var(--ps-green-dark);
}

.ps-form-msg {
  font-family: "metropolis-regular", sans-serif;
  font-size: 1.3rem;
  margin-top: -0.4rem;
  margin-bottom: 1.4rem;
  min-height: 18px;
}

.ps-form-msg.success { color: var(--ps-green); }
.ps-form-msg.error { color: #ff6b6b; }

@media (max-width: 768px) {
  .ps-contact-form .ps-row {
    flex-direction: column;
    gap: 0;
  }
}

/* ---- Panneau info latéral : le bouton garde son style discret d'origine,
   seules les barres du hamburger (.info-menu-icon) passent au vert via main.css ---- */
.info-toggle::after {
  width: 132px;
  font-size: 11px;
}

/* ==========================================================================
   PetroSync — Correctifs d'espacement & de centrage (patch v2)
   ========================================================================== */

/* Réduction du padding-top de home-content__main sur tous les breakpoints.
   La valeur 4rem (= 40px) du main.css suffit ; on la confirme ici avec !important
   pour écraser les éventuelles surcharges issues de plugins. */
.home-content__main {
  padding-top: 4rem !important;
}

/* Sur petits écrans le template remettait des padding-top lourds */
@media only screen and (max-width: 1000px) {
  .home-content__main {
    padding-top: 3rem !important;
  }
}

@media only screen and (max-width: 600px) {
  .home-content__main {
    padding-top: 2rem !important;
  }
}

/* home-content padding-bottom réduit (était 6rem = 60px, trop généreux) */
.home-content {
  padding-bottom: 3rem !important;
}

/* Bouton : centrage total du texte, suppression de tout margin qui décale */
.ps-contact-form .ps-submit-btn,
button.ps-submit-btn {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 1.6rem 2rem !important;
  text-align: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

/* Message de feedback API */
.ps-form-msg.info {
  color: rgba(255, 255, 255, 0.55);
}

/* home-logo : taille adaptée au logo PetroSync (ratio non carré) */
.home-logo img {
  width: auto !important;
  height: 50px !important;
}