/* ============================
   STYLE.CSS — THEME SOMBRE
   ============================ */

/* Basic reset & typography */
:root{
  --bg:#0b0f14;
  --card:#0f1720;
  --muted:#9aa3ae;
  --accent:#6c8ef5;
  --glass: rgba(255,255,255,0.03);
  --glass-2: rgba(255,255,255,0.02);
  --success:#28a745;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  background: linear-gradient(180deg, #07090b 0%, #0b0f14 60%);
  color:#e6eef8;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  padding-top:76px; /* space for fixed navbar */
  overflow-x: hidden; /* Empêche le scroll horizontal */
}

/* Empêcher le débordement horizontal sur tous les éléments */
*, *::before, *::after {
  max-width: 100%;
}

/* S'assurer que les conteneurs ne débordent pas */
.container, .container-fluid {
  max-width: 100%;
  overflow-x: hidden;
}

/* NAVBAR */
.navbar-glass{
  background: linear-gradient(180deg, rgba(12,16,22,0.7), rgba(8,10,12,0.4));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  padding:0.7rem 0;
}

.navbar-brand { font-weight:700; letter-spacing:0.2px; }
.navbar .brand-icon i{ color:var(--accent); background: linear-gradient(135deg,#2233ff,#6c8ef5); padding:8px; border-radius:8px; }

/* Hero styles */
.hero-section{
  min-height: 86vh;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:6rem 0;
  background: radial-gradient(1200px 400px at 10% 20%, rgba(108,142,245,0.07), transparent 8%),
              radial-gradient(900px 300px at 90% 80%, rgba(38,216,200,0.03), transparent 6%);
}

/* Overlay animated layers */
.overlay-layers{ position:absolute; inset:0; pointer-events:none; }
.overlay-layers .layer{
  position:absolute;
  width:120%;
  height:120%;
  left:-10%;
  top:-10%;
  background: radial-gradient(circle at 20% 30%, rgba(108,142,245,0.09), transparent 20%),
              radial-gradient(circle at 80% 70%, rgba(38,216,200,0.04), transparent 20%);
  transform: translate3d(0,0,0);
  transition: transform 0.12s linear;
}
.overlay-layers .layer-2{ filter: blur(30px); opacity:0.8; }
.overlay-layers .layer-3{ filter: blur(52px); opacity:0.9; }

.sparkles{
  position:absolute; inset:0; background-image: radial-gradient(circle at 10% 10%, rgba(255,255,255,0.02) 0, transparent 2%),
                                        radial-gradient(circle at 90% 80%, rgba(255,255,255,0.02) 0, transparent 2%);
  opacity:0.9;
}

/* Hero content */
.hero-content h1 { color:#fff; letter-spacing:-0.4px; line-height:1.05; }
.text-accent{ color:var(--accent); text-decoration:underline 2px rgba(108,142,245,0.12); }
.lead{ color:var(--muted); font-size:1.05rem; }

/* Device stack (decorative cards) */
.device-stack{ position:relative; width:360px; margin-left:auto; transform-style:preserve-3d; perspective:1200px; }
.card-3d{ border-radius:16px; box-shadow: 0 20px 60px rgba(2,6,23,0.7); transform-origin:center; }
.card-3d-top{
  position:relative; background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  padding:18px; margin-bottom:-26px; z-index:3; transform: rotateX(8deg) translateY(-8px);
}
.card-3d-middle{
  height:160px; background:linear-gradient(135deg, rgba(108,142,245,0.12), rgba(38,216,200,0.06));
  margin-bottom:-36px; border-radius:16px; z-index:2; transform: rotateX(6deg);
}
.card-3d-bottom{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03));
  padding:12px; z-index:1; border-radius:12px;
}
.card-meta h5{ margin:6px 0; font-size:1rem; color:#fff; }
.card-meta .tag{ display:inline-block; padding:4px 8px; border-radius:8px; background:rgba(255,255,255,0.04); font-size:0.75rem; color:var(--muted); }
.card-stats{ display:flex; gap:12px; margin-top:12px; color:var(--muted); font-size:0.85rem; justify-content:space-between; }

/* Section heads */
.section-head h2{ font-size:1.6rem; color:#fff; margin-bottom:6px; }
.section-head p{ color:var(--muted); margin-bottom:0; }

/* Feature cards */
.feature-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03));
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.03);
  min-height:150px;
}
.feature-icon{ font-size:2.1rem; color:var(--accent); }

/* Panels and mini-cards */
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04));
  border:1px solid rgba(255,255,255,0.03);
  border-radius:12px;
}
.mini-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:12px; }
.mini-card{ padding:12px; background:var(--glass); border-radius:10px; border:1px solid rgba(255,255,255,0.02); }
.small-card{ padding:8px 12px; background:rgba(255,255,255,0.02); border-radius:8px; }
.example-row .badge{ padding:6px 10px; }

/* Tracking items */
.tracking-sample .track-item{ padding:10px 12px; border-radius:8px; background:rgba(255,255,255,0.02); margin-bottom:8px; }

/* Pricing card */
.pricing-card{
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.03);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04));
  padding:22px;
}
.pricing-card .price{ color:var(--accent); }

/* Testimonials */
.testimonial{ background:rgba(255,255,255,0.02); border-radius:10px; border:1px solid rgba(255,255,255,0.03) }

/* CTA */
.cta-box{ background:linear-gradient(90deg, rgba(108,142,245,0.06), rgba(38,216,200,0.02)); border-radius:14px; border:1px solid rgba(255,255,255,0.03); }

/* Footer */
.footer{ background:linear-gradient(180deg,#05060a,#0b0f14); color:var(--muted); border-top:1px solid rgba(255,255,255,0.02); }
.footer h5, .footer h6{ color:#cfe0ff; }

/* Modal dark forms */
.modal-dark{ background: linear-gradient(180deg, #0f1720, #0b1118); color:#fff; border-radius:12px; border:1px solid rgba(255, 255, 255, 0.12); }
.form-control-dark{ background:#0b1720; border:1px solid rgba(255, 255, 255, 0.15); color:#e6eef8; border-radius:8px; padding:10px; }
.form-control-dark:focus{ background:#0f1b2a; border-color:#4f7bff; box-shadow:0 0 0 0.2rem rgba(79,123,255,0.16); }
.form-control-dark::placeholder{ color:rgba(230,238,248,0.5); }

/* Modal alerts and buttons */
.modal-dark .alert{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:#e6eef8; }
.modal-dark .alert-success{ background:rgba(40,167,69,0.15); border-color:rgba(40,167,69,0.3); color:#d4edda; }
.modal-dark .alert-danger{ background:rgba(220,53,69,0.15); border-color:rgba(220,53,69,0.3); color:#f8d7da; }
.modal-dark .btn-primary{ background:#4f7bff; border-color:#4f7bff; color:#fff; }
.modal-dark .btn-primary:hover{ background:#3d6bff; border-color:#3d6bff; }
.modal-dark .form-check-input:checked{ background-color:#4f7bff; border-color:#4f7bff; }
.modal-dark .form-check-label{ color:#e6eef8; }

/* Utility small pieces */
.text-muted{ color:var(--muted) !important; }
.text-accent{ color:var(--accent); }

/* Responsive tweaks */
@media (max-width:991px){
  .device-stack{ display:none; }
  .hero-section{ padding:4rem 0; }
}

/* Corrections spécifiques pour mobile - empêcher le scroll horizontal */
@media (max-width: 768px) {
  /* S'assurer que tous les éléments respectent la largeur de l'écran */
  .row {
    margin-left: 0;
    margin-right: 0;
  }
  
  .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
  .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
  .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  /* Corriger les cartes et panneaux */
  .feature-card, .panel, .mini-card, .pricing-card {
    margin-left: 0;
    margin-right: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Corriger les boutons qui peuvent être trop larges */
  .btn {
    max-width: 100%;
    white-space: normal;
  }
  
  /* Corriger les textes longs */
  h1, h2, h3, h4, h5, h6, p, span, div {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  
  /* Corriger les listes */
  .list-inline, .list-group {
    margin-left: 0;
    margin-right: 0;
  }
  
  /* Corriger les éléments avec des largeurs fixes */
  .device-stack {
    width: 100% !important;
    max-width: 100%;
  }
  
  /* Corriger les overlays qui peuvent déborder */
  .overlay-layers .layer {
    width: 100% !important;
    left: 0 !important;
  }
}

/* Subtle animations */
.feature-card, .panel, .mini-card, .testimonial{
  transition: transform .35s cubic-bezier(.2,.9,.3,1), box-shadow .35s;
}
.feature-card:hover, .panel:hover, .mini-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(2,6,23,0.6); }

/* Floating accent shapes */
.floating-dot{
  position:absolute; width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow:0 6px 30px rgba(108,142,245,0.16);
}

/* Additional layout visuals */
.bg-dark-alt{ background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); padding-top:30px; padding-bottom:40px; }

/* small features list inline */
.features-compact li{ color:var(--muted); display:inline-block; margin-right:12px; }

/* Badge styles */
.badge{ background:rgba(255,255,255,0.04); color:var(--muted); border-radius:8px; padding:6px 8px; }

/* Accessibility focus states */
.btn:focus, .form-control:focus{ box-shadow: 0 0 0 0.2rem rgba(108,142,245,0.12); outline:none; }

/* FOOTER socials */
.socials a{ color:var(--muted); font-size:1.1rem; transition:color .25s; }
.socials a:hover{ color:var(--accent); }

/* small screen spacing */
@media (max-width:576px){
  .hero-content .display-4{ font-size:1.6rem; }
  .lead{ font-size:0.95rem; }
  
  /* Corrections supplémentaires pour très petits écrans */
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  /* Réduire les marges et paddings */
  .py-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  /* Ajuster les boutons */
  .btn-lg {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
  
  /* Corriger les cartes */
  .feature-card, .panel {
    padding: 1rem !important;
  }
  
  /* S'assurer que les textes ne débordent pas */
  .navbar-brand {
    font-size: 0.9rem;
  }
  
  /* Corriger les éléments de navigation */
  .navbar-nav {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Extra animations keyframes */
@keyframes floaty {
  0%{ transform: translateY(0px) }
  50%{ transform: translateY(-8px) }
  100%{ transform: translateY(0px) }
}
.card-3d-top{ animation: floaty 6s ease-in-out infinite; transform-origin:center; }

/* Decorative card gradient borders */
.card-3d-top::before{
  content:""; position:absolute; inset:0; border-radius:12px; pointer-events:none;
  background: linear-gradient(90deg, rgba(108,142,245,0.08), rgba(38,216,200,0.04));
  mix-blend-mode: overlay; opacity:0.9;
}

/* small-screen panel stacking */
@media (max-width:768px){
  .mini-grid{ grid-template-columns:repeat(1,1fr); }
}

/* small extras to reach requested CSS line count with meaningful rules */
.icon-shadow { filter: drop-shadow(0 6px 18px rgba(0,0,0,0.6)); }
.hidden { display:none; }
.center { display:flex; align-items:center; justify-content:center; }

/* Last spacing tuning */
.section-head { margin-bottom:1.25rem; }
.panel h3 { margin-top:0; margin-bottom:10px; }