/* =====================================================
   SARED – PAGE NOS REALISATIONS
   Dark • Premium • Conversion Focused
===================================================== */

:root{
  --bg-dark:#050816;
  --bg-card:rgba(255,255,255,0.04);
  --border-soft:rgba(255,255,255,0.08);
  --text-main:#FFFFFF;
  --text-muted:#9CA3AF;
  --primary:#7C5CFF;
  --primary-2:#5A3DFF;

  --premium-1:#00C6FF;
  --premium-2:#0072FF;
}

/* If your global CSS already defines body background/colors, you can remove these safely */
body{
  background: var(--bg-dark);
  color: var(--text-main);
}

a{ color: inherit; }
.container{
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

/* =========================
   HERO
========================= */

.real-hero{
  padding:160px 0 120px;
  text-align:center;
  background:
    radial-gradient(circle at 20% 30%, rgba(124,92,255,0.15), transparent 55%),
    radial-gradient(circle at 80% 10%, rgba(91,33,182,0.10), transparent 60%),
    var(--bg-dark);
}

.hero-inner{
  max-width: 980px;
  margin: 0 auto;
}

.hero-eyebrow{
  display:inline-block;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(255,255,255,0.55);
  margin-bottom:18px;
}

.real-hero h1{
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight:900;
  letter-spacing:-0.02em;
  margin: 0 0 18px;
  line-height: 1.08;
}

.gradient-accent{
  background:linear-gradient(135deg,#fff,#A78BFA);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-lead{
  max-width: 780px;
  margin: 0 auto 46px;
  color: rgba(255,255,255,0.72);
  font-size: 18px;
  line-height: 1.7;
}

/* =========================
   HERO SPLIT CTA (MODERN)
========================= */

.hero-split-cta{
  /* Utilise un grid responsive : chaque panneau prend au moins 280 px et s’adapte */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 44px;
  align-items: stretch;
  justify-items: center;
  margin: 0 auto;
  width: min(980px, 100%);
}

.cta-panel{
  width: 100%;
  max-width: 440px;
  padding: 28px 26px;
  border-radius: 26px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(16px);
  transition: .35s cubic-bezier(.16,1,.3,1);
  position: relative;
  overflow: hidden;
  /*
    Assure une hauteur homogène entre les panneaux en utilisant Flexbox.
    Les panneaux se développent en hauteur de manière uniforme et les
    éléments internes sont répartis afin de maintenir un alignement vertical
    cohérent (titre, bouton, micro‑texte/pill).
  */
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  /*
    Fixe une hauteur minimale pour uniformiser la taille des panneaux et
    éviter les décalages si le contenu varie légèrement. Cette valeur
    peut être ajustée selon la longueur du texte. Un minimum de 380 px
    garantit que les panneaux "Essentiel", "Performance" et "Sur mesure"
    restent alignés, y compris lorsque l’une des cartes contient un
    élément supplémentaire comme un badge.
  */
  /*
    Augmente la hauteur minimale des panneaux afin de garantir
    un alignement impeccable entre les offres Essentiel, Sur‑mesure et
    Performance. Une hauteur plus élevée évite que des textes ou
    badges supplémentaires ne provoquent un décalage vertical sur
    certains écrans. Si vous ajoutez du contenu aux cartes, ajustez
    cette valeur en conséquence.
  */
  min-height: 420px;
}

.cta-panel:hover{
  transform: translateY(-6px);
  border-color: rgba(124,92,255,0.28);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}

.cta-panel--premium{
  border-color: rgba(0,114,255,0.22);
}

.cta-panel--premium:hover{
  border-color: rgba(0,198,255,0.35);
}

/* Les séparateurs verticaux sont masqués sur la version responsive car les panneaux sont désormais alignés sans espaces fixes */
.cta-divider{
  display: none;
}

.cta-label{
  display:inline-block;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 16px;
}

.cta-topline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: 6px;
}

.badge-popular{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: #0b0e1f;
  background: linear-gradient(135deg,#FFB800,#FF8C00);
  box-shadow: 0 10px 26px rgba(255,140,0,0.35);
  white-space: nowrap;
}

/* =========================
   BUTTONS
========================= */

.btn-artisan,
.btn-premium{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 18px 40px;
  border-radius: 20px;
  font-weight: 900;
  font-size: 17px;
  text-decoration: none;
  color: #fff;
  transition: .35s cubic-bezier(.16,1,.3,1);
  position: relative;
  overflow: hidden;
  width: min(360px, 100%);
}

.btn-artisan{
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 24px 60px rgba(124,92,255,0.45);
}

.btn-artisan::after{
  content:"";
  position:absolute;
  inset:-55%;
  background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 62%);
  opacity: 0;
  transition: .6s;
}

.btn-artisan:hover{
  transform: translateY(-6px);
  box-shadow: 0 36px 90px rgba(124,92,255,0.62);
}

.btn-artisan:hover::after{ opacity: .7; }

.btn-premium{
  background: linear-gradient(135deg, var(--premium-1), var(--premium-2));
  box-shadow: 0 24px 60px rgba(0,114,255,0.42);
}

.btn-premium::after{
  content:"";
  position:absolute;
  inset:-55%;
  background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 62%);
  opacity: 0;
  transition: .6s;
}

.btn-premium:hover{
  transform: translateY(-6px);
  box-shadow: 0 36px 90px rgba(0,114,255,0.62);
}

.btn-premium:hover::after{ opacity: .7; }

.btn-artisan--small,
.btn-premium--small{
  padding: 16px 30px;
  border-radius: 18px;
  font-size: 16px;
  width: auto;
}

.cta-micro{
  margin: 16px auto 0;
  max-width: 360px;
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  line-height: 1.65;
}

.premium-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 18px;
  background: rgba(0,198,255,0.15);
  border: 1px solid rgba(0,198,255,0.25);
  color: rgba(255,255,255,0.88);
}

/* =========================
   TRUST LINE
========================= */

.hero-trust{
  margin-top: 52px;
  display:flex;
  justify-content:center;
  gap:26px;
  flex-wrap:wrap;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.hero-trust span{
  position:relative;
  padding-left: 10px;
}

.hero-trust span::before{
  content:"•";
  position:absolute;
  left:0;
  color: var(--primary);
}

/* =========================
   FILTER
========================= */

.real-grid-section{
  padding: 90px 0 110px;
}

.real-filter{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin: 0 0 42px;
}

.filter-btn{
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color:#fff;
  font-weight: 700;
  cursor:pointer;
  transition:.25s;
}

.filter-btn:hover{
  border-color: rgba(124,92,255,0.45);
  transform: translateY(-1px);
}

.filter-btn.active{
  background: linear-gradient(135deg,var(--primary),var(--primary-2));
  border-color: transparent;
}

/* =========================
   GRID
========================= */

.real-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 34px;
}

/* =========================
   CARDS
========================= */

.real-card{
  background: var(--bg-card);
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
  transition: .35s cubic-bezier(.16,1,.3,1);
  display:flex;
  flex-direction:column;
  min-height: 100%;
}

.real-card:hover{
  transform: translateY(-10px);
  border-color: rgba(124,92,255,0.32);
  box-shadow: 0 30px 80px rgba(0,0,0,0.60), 0 0 40px rgba(124,92,255,0.12);
}

.real-card.premium:hover{
  border-color: rgba(0,198,255,0.35);
  box-shadow: 0 30px 80px rgba(0,0,0,0.60), 0 0 42px rgba(0,114,255,0.18);
}

.real-media img{
  width:100%;
  height:240px;
  object-fit:cover;
  transition: transform .6s ease;
  display:block;
}

.real-card:hover .real-media img{
  transform: scale(1.05);
}

.real-body{
  padding: 26px 26px 28px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 14px;
}

.tag.premium{ color: rgba(167,139,250,1); }

.real-body h3{
  font-size: 20px;
  line-height: 1.25;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.real-body p{
  color: rgba(255,255,255,0.68);
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 18px;
  flex:1;
}

.real-link{
  font-weight: 900;
  color: var(--primary);
  text-decoration: none;
  transition: .25s;
  width: fit-content;
}

.real-card.premium .real-link{ color: rgba(0,198,255,1); }

.real-link:hover{
  color:#fff;
  transform: translateX(2px);
}

/* =========================
   CTA FINAL
========================= */

.real-cta{
  padding: 120px 0 140px;
  background:
    radial-gradient(circle at 30% 20%, rgba(124,92,255,0.12), transparent 55%),
    radial-gradient(circle at 70% 20%, rgba(0,198,255,0.10), transparent 55%),
    var(--bg-dark);
  text-align:center;
}

.real-cta-inner{
  max-width: 920px;
  margin: 0 auto;
}

.real-cta h2{
  font-size: 34px;
  font-weight: 900;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

.real-cta-lead{
  color: rgba(255,255,255,0.70);
  font-size: 16px;
  line-height: 1.7;
  max-width: 780px;
  margin: 0 auto 26px;
}

.real-cta-actions{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 980px){
  .hero-split-cta{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .cta-divider{ display:none; }
  .cta-panel{ max-width: 560px; }
}

@media (max-width: 768px){
  .real-hero{ padding: 120px 0 80px; }
  .hero-lead{ font-size: 16px; margin-bottom: 34px; }
  .real-grid-section{ padding: 70px 0 90px; }
  .real-cta{ padding: 90px 0 110px; }
}

/* ================= PREMIUM MOBILE HERO FIX ================= */

@media (max-width: 768px) {

.hero {
    padding: 60px 20px 80px;
    text-align: center;
}

.hero h1 {
    font-size: 34px;
    line-height: 1.2;
}

.hero p {
    font-size: 16px;
    line-height: 1.6;
    margin-top: 20px;
}

.hero .cta {
    display: block;
    width: 100%;
    margin: 30px auto 0;
    text-align: center;
}

}

/* ================= PREMIUM CTA ================= */

.cta {
    background: linear-gradient(135deg, #7c3aed, #9333ea);
    padding: 14px 28px;
    border-radius: 40px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(124,58,237,0.4);
    transition: 0.3s ease;
}

.cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(124,58,237,0.6);
}

/* ================= BURGER PREMIUM ================= */

.burger span {
    background: linear-gradient(90deg, #9f7aea, #7c3aed);
    height: 3px;
    width: 28px;
}

.burger {
    padding: 8px;
}

/* ================= HERO ANIMATION ================= */

.hero h1,
.hero p,
.hero .cta {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s ease forwards;
}

.hero p { animation-delay: 0.2s; }
.hero .cta { animation-delay: 0.4s; }

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* ================= FINAL BURGER FIX ================= */

.burger {
    display: none;
    position: relative;
    z-index: 9999;
    background: none;
    border: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.burger span {
    width: 28px;
    height: 3px;
    background: white;
    border-radius: 3px;
}

@media (max-width: 992px) {

    nav ul {
        display: none !important;
    }

    .burger {
        display: flex !important;
    }

}

/* ================= OFFERS RESPONSIVE FIX ================= */

.offers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

@media (max-width: 992px) {
    .offers-grid {
        grid-template-columns: 1fr !important;
    }

    .offers-grid > * {
        width: 100% !important;
    }
}