/* ============================================================
   SYSTEME.IO — CSS UNIFIÉ (FR + EN)
   Remplace style.css ET style2.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;600&family=Poppins:wght@600;700;800&family=Roboto:wght@400;500&display=swap');

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
  --blue:        #089df6;
  --blue-dark:   #0070c0;
  --navy:        #142d63;
  --cta-bg:      #00a0ff;
  --cta-glow:    rgba(0,160,255,0.55);
  --section-bg:  #cfe0f2;
  --text-body:   #142d63;
  --max-w:       1120px;
  --radius-btn:  50px;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body { overflow-x: hidden; font-family: 'Mulish', sans-serif; color: var(--text-body); }
a { text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* ============================================================
   HERO — BASE (desktop ~1024px+)
   ============================================================ */

.frTypX {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  background-image: url("https://d1yei2z3i6k35z.cloudfront.net/9426/5dbdb87f25364_etoile.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-color: #0a1628;
}
.frTypX::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 60%, rgba(8,18,50,.0) 0%, rgba(8,18,40,.45) 60%, rgba(6,14,32,.85) 100%),
    linear-gradient(180deg, rgba(6,14,32,.55) 0%, rgba(6,14,32,.2) 40%, rgba(6,14,32,.55) 100%);
  z-index: 0;
}

/* Conteneur centré */
.bcXUvN {
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  padding: 0 48px;
  background: transparent;
  position: relative;
  z-index: 1;
}

/* Grid 2 colonnes : 52% texte | 48% image */
.HLCDr {
  display: grid;
  grid-template-columns: 52% 48%;
  align-items: center;
  gap: 40px;
  padding: 80px 0;
  min-height: 100vh;
}

/* Colonne texte */
.gWUMiC {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0 0 0 20px;
}

/* Titres */
.fRVbOt { margin: 0; max-width: 600px; }
.gtcWZc { padding: 0 0 20px; background: transparent; }

.gtcWZc h1 {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 48px);
  line-height: 1.3;
  color: #fff;
  text-align: left;
}

.title  { font-family: 'Poppins', sans-serif; font-weight: 800; }

/* title1 : blanc, hérite du h1 */
.title1 {
  display: inline;
  color: #fff;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
}

/* title2 "Systeme.io" : bleu, même taille que title1 */
.title2 {
  display: inline;
  color: var(--blue);
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: .3px;
  border-bottom: 3px dotted var(--blue);
  padding-bottom: 2px;
}

/* Variante EN — légèrement réduit pour tenir dans la colonne */
.titleuk { font-size: 0.92em; }

/* title2 dans titleuk : inline, même taille */
.titleuk .title2 { display: inline; font-size: inherit; }

/* Zone CTA */
.hVBmCR {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 56px;
}
/* Wrapper bouton + "Déjà inscrit" */
.cta-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* Bouton CTA */
.iaZoqu {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 1.2vw, 17px);
  color: #fff;
  background: linear-gradient(180deg, #1ab3ff 0%, #0090e8 50%, #007acc 100%);
  padding: 20px 30px;
  border-radius: 14px;
  box-shadow: 0 0 18px 6px rgba(0,160,255,0.55), 0 0 40px 8px rgba(0,160,255,0.25);
  border: none;
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
  align-self: flex-start;
  transition: transform .2s, box-shadow .2s;
}
.iaZoqu:hover {
  transform: translateY(-2px) scale(1.02);
  background: linear-gradient(180deg, #33bbff 0%, #009ff5 50%, #0088dd 100%);
  box-shadow: 0 0 24px 10px rgba(0,160,255,0.7), 0 0 56px 12px rgba(0,160,255,0.35);
}
.iaZoqu:active { transform: scale(0.97); }

/* "Déjà inscrit ? Connectez-vous ici" */
.registered {
  display: block;
  color: rgba(255,255,255,.65);
  font-size: 13px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-style: italic;
  text-align: center;
  text-underline-offset: 3px;
}
.registered a {
  color: rgba(255,255,255,.85);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Trust signal */
.hero-trust {
  font-size: 11px;
  color: rgba(255,255,255,.5);
  font-family: 'Roboto', sans-serif;
}

/* Colonne image */
.bedLfm {
  display: flex;
  align-items: center;
  justify-content: center;
}
.jrqEqH { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; }
.elgGRx { display: flex; align-items: center; justify-content: center; margin: 0; }
.hDhVne {
  width: 100%;
  max-width: 560px;
  filter: drop-shadow(0 16px 36px rgba(0,0,0,.5));
  border-radius: 14px;
}

/* Animations entrée */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gWUMiC { animation: fadeUp .6s ease both; }
.bedLfm { animation: fadeUp .8s .1s ease both; }

/* ============================================================
   SECTION FEATURE
   ============================================================ */
.jUKCxf {
  display: flex;
  padding: 48px 40px;
  background-color: var(--section-bg);
}
.jrRLbE { width: 100%; max-width: var(--max-w); margin: 0 auto; background: transparent; }
.jPxHhE { display: flex; flex-direction: column; padding: 0; margin: 0; }
.bxHKKL { display: flex; flex-direction: column; width: 100%; }
.hiJvwt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 32px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
}
.jRGwxf { display: flex; flex-direction: column; width: 100%; }
.chIaGv { display: flex; align-items: center; justify-content: center; }
.jnRKrg { display: block; width: 100%; }
.kWxcFg { display: block; width: 100%; object-fit: contain; box-shadow: 0 4px 14px rgba(0,0,0,.14); border-radius: 8px; }
.jGjny  { display: flex; flex-direction: column; width: 100%; }
.flUGJb { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.lnFNwJ { margin: 0; }
.voGSg  { font-size: clamp(18px, 2vw, 26px); font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--navy); line-height: 1.3; }
.dJCQTw { margin: 0; }
.kSamRr { font-size: 17px; color: var(--navy); font-family: 'Roboto', sans-serif; line-height: 1.65; }

/* ============================================================
   ARTICLE
   ============================================================ */
section { margin-bottom: 0 !important; }
.mobile { display: none; }

p {
  color: var(--text-body);
  font-family: 'Mulish', sans-serif;
  font-size: 18px;
  line-height: 1.7;
  padding-left: 200px;
  padding-right: 200px;
  margin: 0;
}
.subtitle {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.3;
  padding: 28px 200px 14px;
}
.bouton2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 200px 32px;
}
.bouton2 .iaZoqu {
  align-self: center;
  white-space: normal;
  text-align: center;
}

/* ============================================================
   FOOTER
   ============================================================ */
.wrapper {
  display: flex;
  justify-content: center;
  background: #e3e3e3;
  padding: 14px 16px;
}
.footer ul { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; list-style: none; }
.footer li { padding: 6px 0; color: #333; font-size: 14px; }
.footer a  { color: #333; text-decoration: underline; }

/* ============================================================
   DESKTOP LARGE ≥ 1280px
   ============================================================ */
@media (min-width: 1280px) {
  .bcXUvN { padding: 0 56px; }
  .HLCDr  { grid-template-columns: 52% 48%; gap: 48px; }
  .gWUMiC { padding: 0 0 0 24px; }
  .gtcWZc h1 { font-size: 46px; }
  .hDhVne { max-width: 620px; }
  .iaZoqu { font-size: 16px; padding: 16px 32px; }
}

/* ============================================================
   DESKTOP XL ≥ 1600px
   ============================================================ */
@media (min-width: 1600px) {
  :root { --max-w: 1400px; }
  .gtcWZc h1 { font-size: 54px; }
  .hDhVne { max-width: 700px; }
  .iaZoqu { font-size: 17px; padding: 17px 36px; }
}

/* ============================================================
   TABLETTE 821px – 1023px  (2 colonnes proportionnelles)
   ============================================================ */
@media (min-width: 821px) and (max-width: 1023px) {
  .frTypX { background-attachment: scroll; }
  .bcXUvN { padding: 0 32px; }
  .HLCDr  { grid-template-columns: 55% 45%; padding: 48px 0; }
  .gWUMiC { padding: 0 24px 0 40px; }
  .gtcWZc h1 { font-size: 26px; }
  .iaZoqu { font-size: 14px; padding: 13px 24px; }
  p        { padding-left: 48px; padding-right: 48px; font-size: 17px; }
  .subtitle{ padding-left: 48px; padding-right: 48px; }
  .bouton2 { padding-left: 48px; padding-right: 48px; }
}

/* ============================================================
   TABLETTE PETITE 683px – 820px  (1 colonne centrée, image cachée)
   ============================================================ */
@media (min-width: 683px) and (max-width: 820px) {
  .frTypX { background-attachment: scroll; }
  .bcXUvN { padding: 0 40px; }
  .HLCDr  {
    grid-template-columns: 1fr;
    padding: 80px 0;
    justify-items: center;
  }
  .gWUMiC { align-items: center; padding: 0; }
  .bedLfm { display: none; }
  .gtcWZc h1 { font-size: 34px; text-align: center; }
  .hVBmCR   { align-items: center; }
  .cta-wrap { align-items: center; }
  .iaZoqu   { font-size: 16px; padding: 15px 30px; }
  .registered { text-align: center; }
  .hero-trust { text-align: center; }
  p        { padding-left: 32px; padding-right: 32px; font-size: 17px; }
  .subtitle{ padding-left: 32px; padding-right: 32px; }
  .bouton2 { padding-left: 32px; padding-right: 32px; }
  .mobile  { display: block; }
  .jUKCxf  { padding: 32px 20px; }
  .hiJvwt  { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
}

/* ============================================================
   MOBILE ≤ 682px
   ============================================================ */
@media (max-width: 682px) {
  .frTypX {
    background-attachment: scroll;
    min-height: 100svh;
  }
  .frTypX::before {
    background: linear-gradient(180deg, rgba(6,14,32,.88) 0%, rgba(6,14,32,.75) 100%);
  }
  .bcXUvN { padding: 0 24px; }

  /* 1 colonne, contenu centré */
  .HLCDr {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100svh;
    padding: 48px 0;
    gap: 0;
  }

  /* Image sous le CTA */
  .bedLfm {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 52px;
  }
  .hDhVne { max-width: 320px; width: 88vw; margin: 0 auto; }

  .gWUMiC {
    width: 100%;
    align-items: center;
    padding: 0;
  }

  /* Titre */
  .gtcWZc { padding: 0; }
  .gtcWZc h1 {
    font-size: clamp(24px, 6.5vw, 32px);
    text-align: center;
    line-height: 1.62;
  }
  .title2 { white-space: normal; }

  /* CTA */
  .hVBmCR { align-items: center; margin-top: 56px; gap: 0; }
  .cta-wrap { align-items: center; gap: 16px; width: 100%; }
  .iaZoqu {
    font-size: 14px;
    padding: 22px 28px;
    white-space: nowrap;
    text-align: center;
    line-height: 1.3;
    width: auto;
    align-self: center;
  }
  .registered { text-align: center; font-size: 12px; }

  .mobile { display: block; }

  /* Sections */
  .jUKCxf { padding: 24px 12px; }
  .hiJvwt { grid-template-columns: 1fr; padding: 18px 14px; gap: 14px; }

  /* Article */
  p         { padding-left: 16px; padding-right: 16px; font-size: 16px; }
  .subtitle { padding-left: 16px; padding-right: 16px; font-size: clamp(19px, 5.5vw, 26px); padding-top: 20px; padding-bottom: 10px; }
  .bouton2  { padding: 16px 16px 24px; }

  /* Footer */
  .footer ul { flex-direction: column; align-items: center; gap: 2px; }
}