:root{
      --bg:#0b1220; /* nuit profonde */
      --fg:#e6f2ff; /* texte clair */
      --muted:#b8c7e6;
      --glass:rgba(255,255,255,.08);
      --card:rgba(255,255,255,.10);
      --stroke:rgba(255,255,255,.18);
      --grad-1:linear-gradient(135deg,#7c3aed 0%,#2563eb 40%,#06b6d4 100%);
      --grad-2:linear-gradient(135deg,#f97316 0%,#ef4444 45%,#ec4899 100%);
      --grad-3:linear-gradient(135deg,#22c55e 0%,#06b6d4 60%,#6366f1 100%);
      --accent:#22d3ee;
      --accent-2:#f472b6;
    }
    html,body{background:var(--bg);color:var(--fg);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;}
    h1,h2,h3{font-family:Poppins,Inter,sans-serif;letter-spacing:.2px}
    a{color:var(--accent)}
    .topbar{position:sticky;top:0;z-index:50;background:rgba(11,18,32,.7);backdrop-filter:saturate(120%) blur(10px);border-bottom:1px solid var(--stroke)}
    .container{max-width:1100px;margin:0 auto;padding:0 16px}
    .nav{display:flex;align-items:center;justify-content:space-between;height:64px}
    .brand{display:flex;gap:10px;align-items:center;font-weight:700}
    nav a{margin-left:14px;text-decoration:none;color:var(--fg);opacity:.9}
    .btn{display:inline-block;padding:12px 16px;border-radius:14px;background:var(--grad-1);color:#fff;text-decoration:none;font-weight:700;box-shadow:0 8px 20px rgba(32,189,255,.2)}
    .btn.ghost{background:transparent;border:1px solid var(--stroke)}
    .btn.small{padding:8px 12px;border-radius:10px}

    /* HERO coloré */
    .hero{position:relative;overflow:hidden}
    .hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center;min-height:68vh;padding:48px 0}
    .hero h1{font-size:48px;line-height:1.05;margin:0}
    .hero p{color:var(--muted);margin:12px 0 18px}
    .badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
    .badge{padding:8px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--stroke)}
    .hero-card{position:relative;border-radius:20px;padding:20px;background:var(--card);border:1px solid var(--stroke)}
    .hero-card .pane-img {
  width: 100%;
  height: 260px;       /* même hauteur que ton ancien carré orange */
  object-fit: cover;   /* rogne l'image si besoin */
  border-radius: 14px; /* coins arrondis */
  border: 1px solid var(--stroke);
  display: block;
}

    .glow, .glow2{position:absolute;inset:auto;pointer-events:none;filter:blur(60px);opacity:.5}
    .glow{top:-80px;left:-80px;width:280px;height:280px;background:#22d3ee}
    .glow2{bottom:-60px;right:-60px;width:320px;height:320px;background:#a78bfa}

    /* Sections */
    .section{padding:56px 0}
    .alt{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.00));}

    /* Features */
    .features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
    .card{background:var(--card);border:1px solid var(--stroke);border-radius:18px;padding:18px}
    .card h3{margin:0 0 6px}
    .card p{color:var(--muted)}
	
	nav a {
  color: #ffffff !important;
  opacity: 1 !important;
}


    /* Plans flashy */
    .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
    .plan{position:relative;overflow:hidden;border-radius:22px;padding:20px;border:1px solid var(--stroke);background:var(--card)}
    .plan .ribbon{position:absolute;top:12px;right:-40px;transform:rotate(35deg);background:var(--grad-2);color:#fff;padding:6px 60px;font-weight:700;box-shadow:0 10px 24px rgba(0,0,0,.25)}
    .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
    .price{font-size:34px;font-weight:800}
    .per{opacity:.8;font-size:14px;margin-left:6px}
    .tag{font-size:12px;padding:6px 10px;border-radius:999px;background:var(--grad-3);color:#08101f;font-weight:800}
    .list{margin:12px 0 16px;padding:0}
    .list li{list-style:none;display:flex;gap:10px;align-items:flex-start;margin:6px 0}
    .list li:before{content:"✦";color:var(--accent)}
    .cta{display:block;text-align:center;margin-top:6px}

    /* Options / FAQ */
    .grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
    .faq details{background:var(--card);border:1px solid var(--stroke);border-radius:14px;padding:14px 16px}
    .faq summary{cursor:pointer;font-weight:700}

    /* Footer */
    .footer{border-top:1px solid var(--stroke)}

    /* Responsive */
    @media (max-width:900px){
      .hero .wrap{grid-template-columns:1fr}
      .hero-card .pane{height:200px}
    }
	
	.hero {
  background: #141a2a !important;
}

.footer {
  background-color: #141a2a; /* cohérent avec le hero */
}
.plans {
  display: flex;
  justify-content: center; /* centre les cartes */
  gap: 24px;               /* espace entre elles */
}

.plans .plan {
  flex: 0 1 320px;   /* largeur fixe max 320px */
}
#plans h2,
#plans p {
  text-align: center;
}
.plans .plan {
  display: flex;
  flex-direction: column;   /* vertical */
  justify-content: space-between;
}

.plans .plan .cta {
  margin-top: auto;   /* pousse le bouton en bas */
}

/* OFFRES: tu as déjà .plans/.plan etc.
   Ajoute juste ça si tu veux une meilleure version mobile */
@media (max-width:900px){
  .plans{
    flex-direction: column;
    align-items: center;
  }
  .plans .plan{
    width: 100%;
    max-width: 420px;
  }
}
/* ESPACE ENTRE LES DÉTAILS DES OFFRES */
.plans .list {
  margin: 16px 0 20px;
}

.plans .list li {
  margin: 12px 0;      /* espace vertical entre chaque point */
  line-height: 1.5;   /* lecture plus clean */
}
/* PRIX EN VERT POMME */
.plans .price {
  color: #34d399;          /* vert pomme */
  text-shadow: 0 0 12px rgba(124,255,107,.25);
}
.plans .list li strong {
  font-weight: 900;
  color: var(--accent);        /* bleu/vert de ta charte */
  text-transform: uppercase;  /* impact visuel */
  letter-spacing: .4px;
}
/* =========================
   PATCH MOBILE ANTI-DEBORDEMENT (OFFRES + HEADER)
   Colle tout en bas du CSS
========================= */
@media (max-width: 700px){

  /* 0) Base: box sizing partout */
  *, *::before, *::after{
    box-sizing: border-box !important;
  }

  /* 1) Empêche le scroll horizontal (mieux que hidden sur iOS) */
  html, body{
    width:100% !important;
    max-width:100% !important;
    overflow-x: clip !important;   /* iOS/Safari moderne */
  }

  /* 2) Tout ce qui peut déborder : clamp */
  img, svg, video, canvas{
    max-width:100% !important;
    height:auto !important;
  }

  /* 3) Container: évite que padding + width fasse dépasser */
  .container{
    width:100% !important;
    max-width:100% !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }

  /* 4) Header: wrap propre + pas de liens qui poussent */
  .topbar{
    width:100% !important;
    max-width:100% !important;
    left:0 !important;
  }

  .nav{
    height:auto !important;
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    padding:10px 0 !important;
  }

  nav{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    margin-left:auto !important;
    max-width:100% !important;
  }

  nav a{
    margin-left:0 !important;
    white-space:nowrap !important;
    max-width:100% !important;
  }

  /* 5) OFFRES: neutralise ton flex desktop sur mobile */
  .plans{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    justify-content:stretch !important;
  }

  .plans .plan{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }

  /* 6) Si un enfant force une largeur (souvent le coupable) */
  .plans .plan *{
    max-width:100% !important;
    min-width:0 !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }
}