/* ============================================================
   INFO-V4.CSS — skin futuriste pour les pages info
   credit-impot.html / fondateur.html / comment-ca-marche.html
   contact.html / airbnb.html
   Scopé body.v4. Couches sur le style existant.
   ============================================================ */

body.v4 { background: #fafbf8; }

/* ============================================================
   HEROES des pages info (multiples classes)
   ============================================================ */
body.v4 .ci-hero,
body.v4 .founder-hero,
body.v4 .howto-hero,
body.v4 .contact-hero,
body.v4 .airbnb-hero,
body.v4 .info-hero,
body.v4 .page-hero {
  background: #0B1E3D !important;
  position: relative;
  overflow: hidden;
  padding: 68px 0 56px !important;
}
body.v4 .ci-hero::before,
body.v4 .founder-hero::before,
body.v4 .howto-hero::before,
body.v4 .contact-hero::before,
body.v4 .airbnb-hero::before,
body.v4 .info-hero::before,
body.v4 .page-hero::before {
  background: linear-gradient(circle, rgba(212,255,58,.14) 0%, transparent 70%) !important;
}

/* Barre néon haute */
body.v4 .ci-hero,
body.v4 .founder-hero,
body.v4 .howto-hero,
body.v4 .contact-hero,
body.v4 .airbnb-hero,
body.v4 .info-hero,
body.v4 .page-hero {
  border-top: 2px solid rgba(212,255,58,.6);
}

/* Tag "label" en haut des heroes */
body.v4 .ci-tag,
body.v4 .founder-tag,
body.v4 .howto-tag,
body.v4 .contact-tag,
body.v4 .airbnb-tag,
body.v4 .info-tag,
body.v4 .hero-tag {
  background: rgba(212,255,58,.12) !important;
  border: 1px solid rgba(212,255,58,.5) !important;
  color: #D4FF3A !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: .22em !important;
}

/* Titres hero */
body.v4 .ci-hero h1,
body.v4 .founder-hero h1,
body.v4 .howto-hero h1,
body.v4 .contact-hero h1,
body.v4 .airbnb-hero h1,
body.v4 .info-hero h1,
body.v4 .page-hero h1 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: #fff !important;
}
body.v4 .ci-hero h1 em,
body.v4 .founder-hero h1 em,
body.v4 .howto-hero h1 em,
body.v4 .contact-hero h1 em,
body.v4 .airbnb-hero h1 em,
body.v4 .info-hero h1 em,
body.v4 .page-hero h1 em {
  color: #D4FF3A !important;
  font-style: normal !important;
}

body.v4 .ci-hero-sub,
body.v4 .founder-hero-sub,
body.v4 .howto-hero-sub,
body.v4 .contact-hero-sub,
body.v4 .airbnb-hero-sub,
body.v4 .info-hero-sub,
body.v4 .page-hero-sub,
body.v4 .hero-sub {
  color: rgba(255,255,255,.7) !important;
  font-family: 'Inter', sans-serif;
}

/* ============================================================
   Sections contenu
   ============================================================ */
body.v4 .ci-section h2,
body.v4 .founder-section h2,
body.v4 .howto-section h2,
body.v4 .contact-section h2,
body.v4 .airbnb-section h2,
body.v4 .info-section h2 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  color: #0B1E3D !important;
  position: relative;
  padding-left: 14px;
}
body.v4 .ci-section h2::before,
body.v4 .founder-section h2::before,
body.v4 .howto-section h2::before,
body.v4 .contact-section h2::before,
body.v4 .airbnb-section h2::before,
body.v4 .info-section h2::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 4px; height: 70%;
  background: #D4FF3A;
  transform: translateY(-50%);
}

/* Cartes info (multiples noms) */
body.v4 .info-card,
body.v4 .ci-card,
body.v4 .founder-card,
body.v4 .step-card,
body.v4 .howto-card,
body.v4 .contact-card,
body.v4 .airbnb-card {
  background: #fff !important;
  border: 1px solid rgba(11,30,61,.12) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  padding: 24px !important;
  position: relative;
  transition: border-color .15s, transform .15s;
}
body.v4 .info-card::before,
body.v4 .ci-card::before,
body.v4 .founder-card::before,
body.v4 .step-card::before,
body.v4 .howto-card::before,
body.v4 .contact-card::before,
body.v4 .airbnb-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 24px; height: 2px;
  background: #0B1E3D;
}
body.v4 .info-card:hover,
body.v4 .ci-card:hover,
body.v4 .founder-card:hover,
body.v4 .step-card:hover,
body.v4 .howto-card:hover,
body.v4 .contact-card:hover,
body.v4 .airbnb-card:hover {
  border-color: #0B1E3D !important;
  transform: translateY(-2px);
}

/* Step numbers (comment-ca-marche) */
body.v4 .step-number,
body.v4 .step-num {
  background: #0B1E3D !important;
  color: #D4FF3A !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
}

/* CTAs dans heroes info */
body.v4 .ci-hero .btn-primary,
body.v4 .founder-hero .btn-primary,
body.v4 .howto-hero .btn-primary,
body.v4 .contact-hero .btn-primary,
body.v4 .airbnb-hero .btn-primary,
body.v4 .info-hero .btn-primary,
body.v4 .page-hero .btn-primary {
  background: #D4FF3A !important;
  color: #0B1E3D !important;
  border: 1px solid #D4FF3A !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px !important;
  padding: 14px 20px !important;
  transition: background .15s, transform .15s;
}
body.v4 .ci-hero .btn-primary:hover,
body.v4 .founder-hero .btn-primary:hover,
body.v4 .howto-hero .btn-primary:hover,
body.v4 .contact-hero .btn-primary:hover,
body.v4 .airbnb-hero .btn-primary:hover,
body.v4 .info-hero .btn-primary:hover,
body.v4 .page-hero .btn-primary:hover {
  background: #b8e02d !important;
  transform: translateY(-1px);
}

body.v4 .ci-hero .btn-outline,
body.v4 .founder-hero .btn-outline,
body.v4 .howto-hero .btn-outline,
body.v4 .contact-hero .btn-outline,
body.v4 .airbnb-hero .btn-outline,
body.v4 .info-hero .btn-outline,
body.v4 .page-hero .btn-outline {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 14px 20px !important;
}
body.v4 .ci-hero .btn-outline:hover,
body.v4 .founder-hero .btn-outline:hover,
body.v4 .howto-hero .btn-outline:hover,
body.v4 .contact-hero .btn-outline:hover,
body.v4 .airbnb-hero .btn-outline:hover,
body.v4 .info-hero .btn-outline:hover,
body.v4 .page-hero .btn-outline:hover {
  border-color: #D4FF3A !important;
  color: #D4FF3A !important;
}

/* Contact form inputs */
body.v4 .contact-section input,
body.v4 .contact-section textarea,
body.v4 .contact-section select,
body.v4 .contact-card input,
body.v4 .contact-card textarea,
body.v4 .contact-card select {
  border-radius: 0 !important;
  border: 1px solid rgba(11,30,61,.18) !important;
  background: #fafbf8 !important;
  font-family: 'Inter', sans-serif !important;
  padding: 12px 14px !important;
}
body.v4 .contact-section input:focus,
body.v4 .contact-section textarea:focus,
body.v4 .contact-section select:focus,
body.v4 .contact-card input:focus,
body.v4 .contact-card textarea:focus,
body.v4 .contact-card select:focus {
  border-color: #0B1E3D !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(212,255,58,.3) !important;
  outline: none !important;
}

/* Mobile */
@media (max-width: 640px) {
  body.v4 .ci-hero,
  body.v4 .founder-hero,
  body.v4 .howto-hero,
  body.v4 .contact-hero,
  body.v4 .airbnb-hero,
  body.v4 .info-hero,
  body.v4 .page-hero { padding: 44px 0 36px !important; }
}