/* ===================================
   G7 Design — Custom Styles
   =================================== */

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

/* Selection color */
::selection {
  background: rgba(91, 140, 184, 0.3);
  color: #fff;
}

/* ===================================
   SVG Background Shapes
   =================================== */
.svg-shape {
  position: absolute;
  opacity: 0.6;
  will-change: transform;
}

.shape-1 {
  width: 300px;
  height: 300px;
  top: 10%;
  right: -50px;
  animation: float-1 25s ease-in-out infinite;
}

.shape-2 {
  width: 200px;
  height: 200px;
  top: 40%;
  left: -30px;
  animation: float-2 30s ease-in-out infinite;
}

.shape-3 {
  width: 250px;
  height: 250px;
  bottom: 20%;
  right: 10%;
  animation: float-3 20s ease-in-out infinite;
}

.shape-4 {
  width: 180px;
  height: 180px;
  top: 60%;
  left: 15%;
  animation: float-4 28s ease-in-out infinite;
}

.shape-5 {
  width: 400px;
  height: 400px;
  top: 80%;
  right: -100px;
  animation: float-5 35s ease-in-out infinite;
}

@keyframes float-1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-20px, 30px) rotate(5deg); }
  50% { transform: translate(10px, -20px) rotate(-3deg); }
  75% { transform: translate(30px, 15px) rotate(7deg); }
}

@keyframes float-2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(25px, -15px) rotate(-4deg); }
  66% { transform: translate(-15px, 25px) rotate(6deg); }
}

@keyframes float-3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-30px, -20px) rotate(8deg); }
}

@keyframes float-4 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(15px, 20px) rotate(-5deg); }
  75% { transform: translate(-20px, -10px) rotate(4deg); }
}

@keyframes float-5 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(20px, -30px) rotate(3deg); }
  66% { transform: translate(-25px, 15px) rotate(-5deg); }
}

/* ===================================
   Scroll Reveal Animation
   =================================== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================
   Scroll Indicator
   =================================== */
.scroll-indicator {
  animation: scroll-bounce 2s ease-in-out infinite;
}

.scroll-dot {
  animation: scroll-dot-move 2s ease-in-out infinite;
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

@keyframes scroll-dot-move {
  0% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0.3; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ===================================
   Section Divider
   =================================== */
.section-divider {
  max-width: 200px;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(91, 140, 184, 0.2), transparent);
}

/* ===================================
   Pain Cards hover effect
   =================================== */
.pain-card {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.pain-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* ===================================
   Pillar Cards
   =================================== */
.pillar-card {
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(91, 140, 184, 0.08);
}

/* ===================================
   Credibility Cards
   =================================== */
.credibility-card {
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.credibility-card:hover {
  transform: translateY(-2px);
  border-color: rgba(91, 140, 184, 0.2);
}

/* ===================================
   Timeline
   =================================== */
.timeline-dot {
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.timeline-step.revealed .timeline-dot {
  border-color: rgba(91, 140, 184, 0.5);
  box-shadow: 0 0 20px rgba(91, 140, 184, 0.1);
}

/* ===================================
   Slider
   =================================== */
.slider-container {
  cursor: grab;
}

.slider-container:active {
  cursor: grabbing;
}

.slider-dot {
  transition: background-color 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}

.slider-dot:hover {
  transform: scale(1.3);
}

/* ===================================
   Captcha Canvas
   =================================== */
#captcha-canvas {
  background: linear-gradient(135deg, #1a1d26, #1e222b);
  border: 1px solid rgba(47, 53, 68, 0.4);
  image-rendering: auto;
}

/* ===================================
   Form inputs
   =================================== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0px 1000px #1e222b inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* ===================================
   Submit button enabled state
   =================================== */
#submit-btn.enabled {
  background: #5b8cb8;
  color: #fff;
  cursor: pointer;
}

#submit-btn.enabled:hover {
  background: #3d6d99;
  box-shadow: 0 4px 20px rgba(91, 140, 184, 0.2);
  transform: translateY(-1px);
}

/* ===================================
   Mentions légales toggle
   =================================== */
#mentions-legales {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===================================
   Sticky CTA visible state
   =================================== */
#sticky-cta.visible {
  transform: translateY(0);
}

/* ===================================
   Responsive adjustments
   =================================== */
@media (max-width: 640px) {
  .shape-1,
  .shape-2,
  .shape-3,
  .shape-4,
  .shape-5 {
    opacity: 0.3;
  }

  .shape-1 { width: 150px; height: 150px; }
  .shape-2 { width: 100px; height: 100px; }
  .shape-3 { width: 120px; height: 120px; }
  .shape-4 { width: 90px; height: 90px; }
  .shape-5 { width: 200px; height: 200px; }
}

/* ===================================
   Smooth anchor links (offset for sticky)
   =================================== */
@media (max-width: 640px) {
  #contact {
    scroll-margin-bottom: 70px;
  }
}

/* Print styles */
@media print {
  .svg-shape,
  #sticky-cta,
  #captcha-area,
  .scroll-indicator {
    display: none !important;
  }
}