/* ============================================
   Animated Background - Tech/Data/AI Theme
   ============================================ */

/* Main body background with animated gradient */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: linear-gradient(-45deg, #0a0e27, #1a1a3e, #0f2c4d, #162d4a);
  background-size: 600% 600%;
  animation: gradientShift 20s ease infinite;
  position: relative;
  min-height: 100vh;
  color: #fff;
  display: flex;
  flex-direction: column;
  /* Le fond est sombre en permanence (dégradé ci-dessus, indépendant du thème
     clair/sombre de Bootstrap), donc on fixe ce token à une couleur claire
     suffisamment contrastée : par défaut Bootstrap le résout en gris foncé
     (pensé pour un fond clair), illisible sur ce fond bleu nuit. Corrige
     .text-muted, .form-text et tout composant Bootstrap qui en dépend. */
  --bs-secondary-color: rgba(255, 255, 255, 0.65);
}

/* Footer ancré en bas de la fenêtre sur les pages courtes, plutôt que collé
   sous le contenu avec un grand vide en dessous. flex-grow ne sert à rien si
   le parent direct n'est pas lui-même display:flex - selon les pages, <main>
   est soit un enfant direct de body, soit imbriqué dans .col-lg-8, donc les
   deux doivent être des conteneurs flex en cascade. !important nécessaire
   car .col-lg-8 (grille Bootstrap) définit son propre flex:0 0 auto qui
   gagnerait sinon la cascade face à un simple sélecteur de classe/élément. */
/* Le sélecteur "body > div.col-lg-*" cible uniquement l'enveloppe de page
   (enfant direct de body) - .col-lg-8 et .col-lg-10 sont aussi réutilisées
   pour des grilles internes au contenu de certaines pages, qu'il ne faut
   surtout pas transformer en conteneurs flex. */
body > div[class*="col-lg-"] {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 0 auto !important;
  /* Son propre padding bas (.p-4.py-md-5) laissait un espace visible entre
     le footer (poussé en bas via flex) et le vrai bord de la fenêtre - le
     footer a déjà son padding interne (footer.py-5), pas besoin d'en rajouter. */
  padding-bottom: 0 !important;
}
main {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto !important;
}
a#footer + div.container {
  margin-top: auto;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 100% 0%;
  }
  75% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Animated background elements with multiple layers */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(13, 110, 253, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(102, 51, 153, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(0, 200, 200, 0.1) 0%, transparent 50%);
  animation: float 25s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 120%;
  height: 120%;
  background: 
    linear-gradient(45deg, transparent 30%, rgba(13, 110, 253, 0.05) 50%, transparent 70%),
    linear-gradient(-45deg, transparent 30%, rgba(102, 51, 153, 0.05) 50%, transparent 70%);
  background-size: 200% 200%, 200% 200%;
  animation: gridShift 40s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  25% {
    transform: translate(-50px, -50px) scale(1.15) rotate(90deg);
  }
  50% {
    transform: translate(30px, -60px) scale(0.9) rotate(180deg);
  }
  75% {
    transform: translate(-40px, 40px) scale(1.1) rotate(270deg);
  }
}

@keyframes gridShift {
  0% {
    background-position: 0% 0%, 0% 0%;
  }
  50% {
    background-position: 100% 100%, -100% -100%;
  }
  100% {
    background-position: 200% 200%, -200% -200%;
  }
}

/* Advanced animated orbs with multiple glows */
.orb {
  position: fixed;
  border-radius: 50%;
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
}

.orb::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: inherit;
  filter: blur(80px);
  animation: pulse 4s ease-in-out infinite;
}

.orb-1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #0066ff, #00ccff, transparent);
  top: 5%;
  left: -5%;
  animation: orbit1 30s linear infinite;
  filter: blur(50px);
  box-shadow: 0 0 100px rgba(0, 102, 255, 0.3), 0 0 200px rgba(0, 204, 255, 0.2);
}

.orb-2 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, #9d00ff, #ff00ff, transparent);
  top: 50%;
  right: -8%;
  animation: orbit2 35s linear infinite;
  filter: blur(50px);
  box-shadow: 0 0 100px rgba(157, 0, 255, 0.3), 0 0 200px rgba(255, 0, 255, 0.2);
}

.orb-3 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, #00d9a3, #00ffc0, transparent);
  bottom: -10%;
  left: 10%;
  animation: orbit3 40s linear infinite;
  filter: blur(50px);
  box-shadow: 0 0 150px rgba(0, 217, 163, 0.2), 0 0 300px rgba(0, 255, 192, 0.1);
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1.2;
  }
}

@keyframes orbit1 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  25% {
    transform: translate(100px, -100px) rotate(90deg) scale(1.1);
  }
  50% {
    transform: translate(50px, -150px) rotate(180deg) scale(0.95);
  }
  75% {
    transform: translate(-50px, -50px) rotate(270deg) scale(1.05);
  }
  100% {
    transform: translate(0, 0) rotate(360deg) scale(1);
  }
}

@keyframes orbit2 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  25% {
    transform: translate(-120px, 80px) rotate(90deg) scale(1.1);
  }
  50% {
    transform: translate(-100px, 150px) rotate(180deg) scale(0.9);
  }
  75% {
    transform: translate(-30px, 100px) rotate(270deg) scale(1.05);
  }
  100% {
    transform: translate(0, 0) rotate(360deg) scale(1);
  }
}

@keyframes orbit3 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  25% {
    transform: translate(100px, 100px) rotate(90deg) scale(1.15);
  }
  50% {
    transform: translate(150px, 80px) rotate(180deg) scale(0.85);
  }
  75% {
    transform: translate(80px, -50px) rotate(270deg) scale(1.1);
  }
  100% {
    transform: translate(0, 0) rotate(360deg) scale(1);
  }
}

/* Floating particles */
.particle {
  position: fixed;
  pointer-events: none;
  z-index: 2;
}

/* Neon glitch effect layers */
.neon-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 255, 255, 0.03) 0%,
    transparent 30%,
    rgba(255, 0, 255, 0.02) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
  animation: scanlines 8s linear infinite;
}

@keyframes scanlines {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100px;
  }
}

/* Ensure content appears above background */
.col-lg-8 {
  position: relative;
  z-index: 10;
  padding-top: 80px;
}

/* Navbar - sticky at top */
.navbar {
  background: linear-gradient(180deg, rgba(10, 14, 39, 0.98) 0%, rgba(26, 26, 62, 0.95) 100%) !important;
  backdrop-filter: blur(15px);
  border-bottom: 2px solid rgba(0, 204, 255, 0.2);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0, 102, 255, 0.15);
}

.navbar-brand {
  color: #00ccff !important;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(0, 204, 255, 0.5);
}

.navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.8) !important;
  transition: all 0.3s ease;
  position: relative;
}

.navbar-nav .nav-link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #00ccff, transparent);
  transition: width 0.3s ease;
}

.navbar-nav .nav-link:hover {
  color: #00ccff !important;
  text-shadow: 0 0 8px rgba(0, 204, 255, 0.6);
}

.navbar-nav .nav-link:hover::before {
  width: 100%;
}

/* Contact form styling with enhanced visibility */
.contact-form-section {
    background: rgba(15, 25, 50, 0.85);
    backdrop-filter: blur(20px);
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 
      0 8px 32px rgba(0, 102, 255, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
    margin-top: 2rem;
    border: 1px solid rgba(0, 204, 255, 0.3);
    position: relative;
    z-index: 20;
}
          
.contact-form-section .form-label {
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
          
.contact-form-section .form-control {
    border: 2px solid rgba(0, 204, 255, 0.3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.contact-form-section .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
          
.contact-form-section .form-control:focus {
    border-color: #00ccff;
    box-shadow: 0 0 0 3px rgba(0, 204, 255, 0.2), inset 0 0 10px rgba(0, 204, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.08);
}
          
.contact-form-section textarea.form-control {
    resize: vertical;
    min-height: 120px;
}
          
/* intl-tel-input styling */
.iti {
    width: 100%;
}
          
.iti__input {
    border: 2px solid rgba(0, 204, 255, 0.3) !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
    width: 100% !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

.iti__input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}
          
.iti__input:focus {
    border-color: #00ccff !important;
    box-shadow: 0 0 0 3px rgba(0, 204, 255, 0.2), inset 0 0 10px rgba(0, 204, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}
          
.iti__country-list {
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 102, 255, 0.3);
    background: rgba(15, 25, 50, 0.95) !important;
    backdrop-filter: blur(10px);
}

.iti__country {
    color: #ffffff !important;
    background: transparent !important;
}

.iti__country:hover {
    background: rgba(0, 204, 255, 0.2) !important;
}

.iti__flag-container {
    background-color: rgba(0, 204, 255, 0.1);
    border-radius: 6px 0 0 6px;
}
          
.btn-submit-contact {
    background: linear-gradient(135deg, #0066ff 0%, #00ccff 100%);
    border: 2px solid rgba(0, 204, 255, 0.5);
    padding: 0.9rem 2rem;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 8px;
    transition: all 0.4s ease;
    width: 100%;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 20px rgba(0, 102, 255, 0.3);
}
          
.btn-submit-contact:hover {
    transform: translateY(-3px);
    box-shadow: 
      0 0 30px rgba(0, 204, 255, 0.6),
      0 0 60px rgba(0, 102, 255, 0.3),
      inset 0 0 20px rgba(0, 204, 255, 0.2);
    border-color: #00ccff;
    background: linear-gradient(135deg, #00ccff 0%, #0099ff 100%);
}

.btn-submit-contact:active {
    transform: translateY(-1px);
}
          
.required-asterisk {
    color: #ff6b9d;
    font-weight: bold;
}
          
.form-group-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #00ccff;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 3px solid rgba(0, 204, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(0, 204, 255, 0.3);
}

/* Main content styling */
main {
  position: relative;
  z-index: 10;
}

main h1 {
  color: #00ccff;
  text-shadow: 
    0 0 10px rgba(0, 204, 255, 0.4),
    0 0 20px rgba(0, 102, 255, 0.2);
  font-weight: 800;
  margin-bottom: 1rem;
  font-size: 3rem;
  letter-spacing: 1px;
}

main .lead {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.2rem;
  font-weight: 300;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  line-height: 1.8;
}

/* Footer - full width isolated */
footer {
  position: relative;
  z-index: 30;
  background: linear-gradient(180deg, rgba(10, 14, 39, 0.95) 0%, rgba(5, 5, 25, 0.98) 100%);
  backdrop-filter: blur(15px);
  border-top: 2px solid rgba(0, 204, 255, 0.3);
  box-shadow: 0 -8px 32px rgba(0, 102, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  margin-left: -100vw;
  margin-right: -100vw;
  padding-left: 100vw;
  padding-right: 100vw;
  margin-top: 4rem;
}

footer h5 {
  color: #00ccff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(0, 204, 255, 0.3);
}

footer .nav-link {
  color: rgba(255, 255, 255, 0.7) !important;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  width: fit-content;
}

footer .nav-link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #00ccff, transparent);
  transition: width 0.3s ease;
}

footer .nav-link:hover {
  color: #00ccff !important;
  text-shadow: 0 0 8px rgba(0, 204, 255, 0.4);
}

footer .nav-link:hover::before {
  width: 100%;
}

footer p {
  color: rgba(255, 255, 255, 0.6);
}

footer .link-body-emphasis {
  color: rgba(255, 255, 255, 0.7) !important;
  transition: all 0.3s ease;
}

footer .link-body-emphasis:hover {
  color: #00ccff !important;
  filter: drop-shadow(0 0 8px rgba(0, 204, 255, 0.5));
}

/* Alert messages styling */
.alert {
  position: relative;
  z-index: 15;
  border: 2px solid;
  backdrop-filter: blur(15px);
  border-radius: 8px;
}

.alert-success {
  background: rgba(25, 135, 84, 0.2);
  border-color: #00d9a3;
  color: #ffffff;
  box-shadow: 0 0 20px rgba(0, 217, 163, 0.2);
}

.alert-danger {
  background: rgba(220, 53, 69, 0.2);
  border-color: #ff6b9d;
  color: #ffffff;
  box-shadow: 0 0 20px rgba(255, 107, 157, 0.2);
}

/* Theme toggle button */
.bd-mode-toggle {
  position: relative;
  z-index: 50;
}

.btn-bd-primary {
  background: rgba(0, 204, 255, 0.2) !important;
  border: 2px solid rgba(0, 204, 255, 0.4) !important;
  color: #00ccff !important;
  backdrop-filter: blur(10px);
}

.btn-bd-primary:hover {
  background: rgba(0, 204, 255, 0.3) !important;
  box-shadow: 0 0 15px rgba(0, 204, 255, 0.4);
}

/* Responsive adjustments for mobile devices */
@media (max-width: 768px) {
  html, body {
    animation: none !important;
    background-size: 100% 100%;
  }

  body::before,
  body::after {
    animation: none !important;
  }

  .neon-layer {
    animation: none !important;
  }

  .orb-1, .orb-2, .orb-3 {
    display: none !important;
  }

  .contact-form-section {
    padding: 1.5rem;
  }

  .form-group-title {
    font-size: 1.2rem;
  }

  main h1 {
    font-size: 2rem;
  }

  .col-lg-8 {
    padding-top: 100px;
  }
}

/* Disable animations for mobile landscape orientation */
@media (max-width: 768px) and (orientation: landscape) {
  html, body {
    animation: none !important;
    background-size: 100% 100%;
  }

  body::before,
  body::after {
    animation: none !important;
  }

  .neon-layer {
    animation: none !important;
  }

  .orb-1, .orb-2, .orb-3 {
    display: none !important;
  }
}

/* Fallback for very small viewports (additional safety) */
@media (max-height: 500px) {
  html, body {
    animation: none !important;
    background-size: 100% 100%;
  }

  body::before,
  body::after {
    animation: none !important;
  }

  .neon-layer {
    animation: none !important;
  }

  .orb-1, .orb-2, .orb-3 {
    display: none !important;
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* ============================================
   Social Media Links - Enhanced Click State
   ============================================ */
/* Improve contrast for social media icons when clicked/focused */
footer .link-body-emphasis:active,
footer .link-body-emphasis:focus {
  color: #0a58ca !important; /* Darker blue for better contrast */
  opacity: 0.8;
}

footer .link-body-emphasis:hover {
  color: #0d6efd; /* Bootstrap primary blue on hover */
  opacity: 0.9;
}

/* ============================================
   Badge Nouveau - Réutilisable
   ============================================ */
.badge-nouveau {
  background: linear-gradient(135deg, #00d4aa 0%, #00b4d8 100%);
  box-shadow: 0 4px 15px rgba(0, 180, 216, 0.4);
  color: white;
  font-weight: bold;
  height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 1.25rem;
  font-size: 0.875rem;
  border-radius: 50rem;
}

/* Couleur de fond propre au badge "Populaire", distincte du badge "Nouveau".
   Hauteur/padding/police restent hérités de .badge-nouveau : les icônes
   ajoutées de part et d'autre du mot compensent déjà la largeur pour
   retrouver une dimension quasi identique au badge "Nouveau". */
.badge-populaire {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  box-shadow: 0 4px 15px rgba(245, 124, 0, 0.4);
}

/* Couleur de fond propre au badge "Prochainement", distincte des badges
   "Nouveau" et "Populaire". Hauteur/padding/police restent hérités de
   .badge-nouveau : les icônes ajoutées de part et d'autre du mot
   compensent déjà la largeur pour retrouver une dimension quasi
   identique aux autres badges. */
.badge-prochainement {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* ============================================
   Responsive Design
   ============================================
   website_design.css n'avait aucun media query : en dessous du seuil lg
   (992px), les enveloppes de page ".col-lg-N mx-auto" (utilisées comme
   conteneur principal sur toutes les pages "website/*") n'ont plus aucune
   règle de largeur Bootstrap active, et se retrouvent dimensionnées par le
   contenu au lieu d'être contraintes à la largeur de l'écran - un titre ou
   texte suffisamment long les élargit alors au-delà du viewport, et le
   dépassement est ensuite masqué silencieusement par overflow-x:hidden sur
   html/body (texte tronqué sans barre de défilement visible). */
@media (max-width: 991.98px) {
  .col-lg-10.mx-auto,
  .col-lg-8.mx-auto,
  .col-lg-6.mx-auto {
    width: 100%;
    max-width: 100%;
  }

  /* En-tête icône + titre des cartes de service (icône 3.5rem + <h2> en ligne,
     "d-flex" sans wrap par défaut) : sur un écran étroit, l'icône et un titre
     un peu long ne tiennent plus sur une seule ligne et débordent de la carte
     (barre de défilement horizontale locale, contenu partiellement invisible).
     On autorise le retour à la ligne pour que le titre passe sous l'icône. */
  .card-body .d-flex.align-items-center.mb-4 {
    flex-wrap: wrap;
  }
}

/* La navbar utilise "navbar-expand-md" (repli du menu burger sous 768px, pas
   992px comme ci-dessus) : en dessous de ce seuil, ".navbar-nav" passe en
   colonne (flex-direction:column) et hérite du comportement par défaut
   align-items:stretch, qui étire chaque ".nav-link" sur toute la largeur du
   menu. Or le soulignement au survol/tap (.nav-link::before, width:100%) est
   dimensionné par rapport à cette largeur de ".nav-link" - il s'étire donc
   lui aussi sur toute la largeur au lieu de rester sous le mot, comme c'est
   le cas sur desktop où chaque item ne prend que la largeur de son texte. */
@media (max-width: 767.98px) {
  .navbar-nav {
    align-items: flex-start;
  }
}