/* ======================================
   Fichier : accueil.css
   Projet  : Webarmony - Page Accueil
   ====================================== */

/* ---------- Page Wrapper ---------- */
.page-accueil {
  background: linear-gradient(180deg, #ffffff 0%, #fff8f3 44%, #fff1e7 100%);
  min-height: 100vh;
  overflow-x: hidden;
  /* Prevent horizontal overflow from large images */
  width: 100%;
  position: relative;
}

/* ---------- Hero : section & conteneur ---------- */

/* Section : fond + centrage */
.hero-section-a {
  width: 100%;
  /* Background removed here, moved to .page-accueil */
  background: transparent;
  display: flex;
  justify-content: center;
  padding: clamp(44px, 7vw, 96px) 0 clamp(58px, 8vw, 112px);
  overflow: visible;
  /* Allow image to overflow */
  position: relative;
}

/* Conteneur : grille 2 colonnes desktop, 1 colonne mobile */
.hero-container-a {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  width: min(1200px, 92vw);
  /* Removed the glassmorphism box for a cleaner look like the inspiration */
  padding: clamp(16px, 3vw, 30px);
  position: relative;
}

/* Colonne gauche (texte) */
.hero-left-a {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Left align */
  z-index: 10;
  /* Ensure text stays on top of image */
  position: relative;
  /* Blur effect for accessibility */
  background: rgba(255, 255, 255, 0.44);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: clamp(24px, 3vw, 34px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: var(--shadow-soft);
  max-width: 680px;
}

/* Pill Tag */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.5);
  /* More transparent */
  color: var(--color-primary);
  padding: 8px 16px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.pill-icon {
  font-size: 1.1rem;
}

.hero-left-a h1 {
  font-size: clamp(28px, 3vw, 42px);
  /* Larger title */
  line-height: 1.22;
  margin: 0 0 16px 0;
  color: var(--color-dark);
  font-weight: 800;
  /* Bold */
  max-width: 20ch;
}

.hero-left-a p {
  font-size: clamp(15px, 1.7vw, 17px);
  margin: 0 0 24px 0;
  color: var(--color-text-soft);
  /* Darker for better contrast */
  line-height: 1.7;
  max-width: 62ch;
  font-weight: 500;
}

.hero-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Colonne droite (Image) */
.hero-right-a {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  position: relative;
  overflow: visible;
  min-height: clamp(340px, 42vw, 520px);
  /* For absolute positioning of image if needed */
}

.hero-right-a::before {
  display: none;
}

.hero-right-a::after {
  display: none;
}

.hero-image {
  width: 176%;
  /* Even larger */
  max-width: 1240px;
  height: auto;
  /* Optional: Add a subtle float animation or shadow if desired */
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.09));
  margin-left: -22%;
  /* Pull image more to the left */
  transform: translate3d(0, 8%, 0);
  pointer-events: none;
  /* Let clicks pass through to text if needed */
  opacity: 0.86;
  position: relative;
  z-index: 1;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-container-a {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 30px 16px 12px;
    /* Ensure container has height for absolute child */
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.hero-left-a {
    align-items: center;
    /* Center align on mobile */
    width: 100%;
    z-index: 10;
    /* Text on top */
  }

  .hero-left-a p {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-right-a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Image behind */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    min-height: 100%;
    /* Allow image to flow out */
    margin-bottom: 0;
  }

  .hero-image {
    width: 142%;
    /* Large image on mobile */
    max-width: none;
    height: auto;
    margin-left: 0;
    margin-right: 0;
    transform: translateY(4%);
    opacity: 0.24;
    /* More transparent to blend better */
  }

  .hero-left-a {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-soft);
    border-radius: 24px;
    padding: 22px 16px;
  }
}

@media (max-width: 480px) {
  .hero-left-a h1 {
    font-size: 28px;
  }
}

/* ---------- Autres sections de la page ---------- */

.general-title-a {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.title-img-a {
  width: 100%;
  max-width: 300px;
}

.title-text-a {
  max-width: 600px;
  text-align: center;
  font-size: 40px;
  color: var(--color-dark);
}

.title-a {
  font-size: 50px;
  line-height: 1.2;
  margin: 0;
  color: var(--color-dark);
}

/* ---------- Zone A (Texte + Lottie) ---------- */
.zone-a {
  display: flex;
  /* Flexbox for side-by-side */
  flex-direction: row;
  /* Default to row */
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 60px 40px;
  margin-bottom: 20px;
  width: min(1200px, 92vw);
  /* Constrain width */
  margin: 0 auto;
  margin-bottom: 20px;
  /* Center the container */

  /* Blur effect */
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

/* Responsive for Zone A */
@media (max-width: 900px) {
  .zone-a {
    flex-direction: column-reverse;
    /* Stack on mobile, text on bottom or top depending on preference. User asked for text left, lottie right on desk. Usually lottie top on mobile is better, but let's stick to standard stacking. */
    text-align: center;
  }
}

.zone-text-a {
  flex: 1;
  min-width: 300px;
  max-width: 600px;
  color: var(--color-dark);
  line-height: 1.5;
  text-align: center;
  /* centre le texte */
  max-width: 600px;
  /* limite la largeur pour éviter les lignes trop longues */
}

.text-a {
  font-size: 1.2rem;
  color: var(--color-dark);
  line-height: 1.6;
}

.zone-a dotlottie-wc {
  flex: 1;
  max-width: 400px;
}

.text-img-a {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Title Alone */
.title-alone-a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
}

.titleAlone-a {
  font-size: 36px;
  line-height: 1.2;
  color: var(--color-dark);
}

/* Card Grid */
.carte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
  max-width: 1000px;
  margin: 50px auto;
  justify-content: center;
  justify-items: center;
}

/* ---------- Why Choose Us (Redesign) ---------- */
.why-choose-us-a {
  padding: 120px 20px 80px;
  /* More top padding for phone overlap */
  display: flex;
  justify-content: center;
  background: transparent;
  position: relative;
  overflow: hidden;
  /* Clip blur effects and negative margins */
}

/* Colorful Blur Effects */
.why-choose-us-a::before {
  content: '';
  position: absolute;
  top: 10%;
  left: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(222, 115, 67, 0.28) 0%, rgba(222, 115, 67, 0) 70%);
  filter: blur(80px);
  z-index: -1;
  opacity: 0.6;
}

.why-choose-us-a::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(89, 46, 27, 0.14) 0%, rgba(89, 46, 27, 0) 70%);
  filter: blur(80px);
  z-index: -1;
  opacity: 0.5;
}

.features-card {
  background: rgba(255, 255, 255, 0.7);
  /* More transparent for glassmorphism */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 30px;
  padding: 0 40px 60px;
  /* Top padding 0 because phone is there */
  width: 100%;
  max-width: 1200px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  text-align: center;
  position: relative;
  overflow: visible;
  /* Allow phone to stick out */
  margin-top: 60px;
  /* Space for phone */
}

/* Phone Image */
.phone-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: -100px;
  /* Pull phone up more */
  margin-bottom: 30px;
  position: relative;
  z-index: 2;
}

.presentation-phone {
  width: 70%;
  /* Reduced from 80% */
  max-width: 500px;
  /* Reduced from 600px */
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.2));
  transform: translateY(0);
  transition: transform 0.3s ease;
}

.presentation-phone:hover {
  transform: translateY(-5px);
}

/* Header */
.features-header {
  margin-bottom: 60px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}

.why-title-a {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 16px;
  line-height: 1.2;
}

.why-subtitle-a {
  font-size: 1.1rem;
  color: var(--color-text-soft);
  line-height: 1.6;
}

/* Grid Layout */
.advantages-a {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Desktop: 4 cols */
  gap: 40px;
  margin-bottom: 50px;
}

/* Feature Item */
.advantage-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
  transition: transform 0.3s ease;
}

.advantage-item:hover {
  transform: translateY(-5px);
}

.icon-wrapper {
  width: 100px;
  /* Increased from 70px */
  height: 100px;
  /* Increased from 70px */
  background: transparent;
  /* Removed white background */
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 24px;
  box-shadow: none;
  /* Removed shadow */
  color: var(--color-primary);
  overflow: visible;
  /* Allow lottie to overflow if needed, or keep hidden */
}

.icon-wrapper dotlottie-wc {
  width: 100%;
  height: 100%;
}

.advantage-item h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 12px;
}

.advantage-item p {
  font-size: 0.95rem;
  color: var(--color-text-soft);
  line-height: 1.5;
}

/* Footer Button */
.features-footer {
  margin-top: 20px;
}

/* Responsive */
@media (max-width: 1024px) {
  .advantages-a {
    grid-template-columns: repeat(2, 1fr);
    /* Tablet: 2 cols */
    gap: 30px;
  }
}

@media (max-width: 600px) {
  .why-choose-us-a {
    padding-top: 100px;
    /* Adjust padding for mobile */
  }

  .features-card {
    padding: 0 20px 40px;
    margin-top: 40px;
  }

  .phone-wrapper {
    margin-top: -60px;
    /* Adjust overlap on mobile */
    margin-bottom: 20px;
  }

  .presentation-phone {
    width: 90%;
    /* Wider on mobile relative to container */
    max-width: 350px;
    /* But capped smaller */
  }

  .advantages-a {
    grid-template-columns: 1fr;
    /* Mobile: 1 col */
    gap: 40px;
  }

  .why-title-a {
    font-size: 24px;
  }
}

/* Animation scroll */
.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}

.scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Icons Wave Section ---------- */
.icons-wave-section {
  position: relative;
  width: 100%;
  height: 120px;
  /* Reduced height */
  background: transparent;
  /* Transparent to show global gradient */
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-bottom: 100px;
}

.icons-wave-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.icon-bubble {
  position: absolute;
  top: 50%;
  left: -100px;
  width: 50px;
  /* Reduced size */
  height: 50px;
  /* Reduced size */
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(222, 115, 67, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  z-index: 100;
  /* Increased z-index */
  will-change: transform;
}

.icon-bubble svg {
  width: 24px;
  /* Reduced icon size */
  height: 24px;
  /* Reduced icon size */
  stroke-width: 2px;
}

/* Card Component */
.card {
  max-width: 960px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  background-color: var(--color-light);
}

.card__image {
  width: 100%;
  max-height: 300px;
  border-radius: 8px;
  object-fit: cover;
  margin-bottom: 18px;
}

.card__content {
  text-align: center;
}

.card__date {
  display: block;
  font-size: .875rem;
  color: var(--color-dark);
  margin-bottom: 6px;
}

.card__title {
  font-size: 2rem;
  color: var(--color-primary);
  font-weight: bold;
  margin-bottom: 12px;
}

/* ---------- Responsive ---------- */

/* Tablette & mobile */
@media (max-width: 900px) {
  .hero-container-a {
    grid-template-columns: 1fr;
    /* empile gauche/droite */
    text-align: center;
    /* iOS/Safari : alléger le blur pour perfs */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.35);
  }

  .hero-left-a .cssbuttons-io-b {
    margin-inline: auto;
  }

  /* Lottie fluide */
  .hero-right-a dotlottie-wc {
    width: clamp(220px, 68vw, 420px);
    max-height: 42vh;
    /* limite en hauteur pour éviter de manger l’écran */
  }

  .zone-a {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* Smartphone petit */
@media (max-width: 480px) {
  .hero-right-a dotlottie-wc {
    width: clamp(200px, 78vw, 340px);
    max-height: 40vh;
  }
}

/* Très petit écran */
@media (max-width: 380px) {
  .hero-container-a {
    padding: 16px;
  }

  .hero-left-a .cssbuttons-io-b {
    max-width: 300px;
  }
}

/* Cartes (autres sections) : layout horizontal à partir de 576px */
@media (min-width: 576px) {
  .card {
    flex-direction: row;
    align-items: center;
    padding: 32px;
  }

  .card__image {
    width: 45%;
    max-height: none;
    min-height: 400px;
    margin-bottom: 0;
  }

  .card__content {
    width: 55%;
    padding-left: 40px;
    text-align: left;
  }
}

html[data-theme="dark"] .page-accueil {
  background: linear-gradient(180deg, #0f0e0d 0%, #171311 44%, #1d1714 100%);
}

html[data-theme="dark"] .hero-left-a {
  background: rgba(20, 17, 16, 0.84);
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .hero-pill,
html[data-theme="dark"] .icon-bubble {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .icon-bubble {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .features-card {
  background: rgba(22, 18, 17, 0.84);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .card {
  background-color: rgba(22, 18, 17, 0.88);
}

.home-market-section {
  padding-top: 14px;
}

.home-market-shell {
  width: min(1200px, 92vw);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(222, 115, 67, 0.16), rgba(255, 255, 255, 0.9) 46%),
    rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(222, 115, 67, 0.18);
  box-shadow: var(--shadow-soft);
}

.home-market-heading {
  max-width: 760px;
  margin-bottom: 28px;
}

.home-market-heading h2 {
  margin-bottom: 10px;
}

.home-market-heading p {
  margin-bottom: 0;
}

.home-market-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.home-market-card {
  padding: 22px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05);
}

.home-market-card h3 {
  font-size: 1.05rem;
  margin-bottom: 10px;
  color: var(--color-dark);
}

.home-market-card p {
  margin-bottom: 0;
}

.home-faq-section {
  padding-top: 10px;
}

.home-faq-shell {
  width: min(1200px, 92vw);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(222, 115, 67, 0.16), rgba(255, 255, 255, 0.9) 48%),
    rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(222, 115, 67, 0.18);
  box-shadow: var(--shadow-soft);
}

.home-faq-heading {
  max-width: 720px;
  margin-bottom: 28px;
}

.home-faq-heading h2 {
  margin-bottom: 10px;
  color: var(--color-dark);
}

.home-faq-heading p {
  margin-bottom: 0;
}

.home-faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.home-faq-item {
  padding: 22px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05);
}

.home-faq-item h3 {
  font-size: 1.08rem;
  margin-bottom: 10px;
  color: var(--color-dark);
}

.home-faq-item p {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .home-market-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-faq-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .home-market-grid {
    grid-template-columns: 1fr;
  }
}

html[data-theme="dark"] .home-faq-shell {
  background:
    linear-gradient(135deg, rgba(222, 115, 67, 0.16), rgba(20, 17, 16, 0.92) 48%),
    rgba(20, 17, 16, 0.9);
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .home-faq-item {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .home-market-shell {
  background:
    linear-gradient(135deg, rgba(222, 115, 67, 0.16), rgba(20, 17, 16, 0.92) 46%),
    rgba(20, 17, 16, 0.9);
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .home-market-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
}