/* ============================================= */
/* === STYLES RESPONSIVES POUR WEMAIK      === */
/* ============================================= */

/* --- 1. Tablettes et petits écrans (jusqu'à 1300px) --- */
@media (max-width: 1300px) {
  /* --- CORRECTIONS DE DÉBORDEMENT TABLETTE --- */
  body {
    background-color: rgba(40, 46, 61, 1);
    overflow-x: hidden;
  }
  .homehome {
    overflow: visible; 
    height: auto; /* Annule la hauteur fixe */
  }
  .home-frame78 {
    position: static; /* Fait entrer le contenu dans le flux */
  }
  /* --- FIN DES CORRECTIONS --- */

  /* Ajustement des paddings généraux */
  .home-top {
    padding: 180px 60px 80px;
  }

  .home-frame19,
  .home-frame181,
  .home-frame21,
  .home-frame22,
  .home-frame38,
  .home-frame182,
  .home-frame47,
  .home-frame56 {
    padding-left: 60px;
    padding-right: 60px;
  }

  /* Section "Why" */
  .home-frame23 {
    width: auto;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    padding: 60px 40px;
  }

  /* Section "Platform" */
  .home-frame02 {
    flex-direction: column;
    padding: 80px 60px;
  }
  .home-rectangle7 {
    width: 100%;
    height: auto;
    max-width: 700px;
  }
  .home-frame113 {
    width: 100%;
    max-width: 500px;
  }

  /* Grilles de cartes (Avantages, Sécurité, etc.) */
  .home-frame171,
  .home-frame172,
  .home-frame174,
  .home-frame292 {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  /* Cartes individuelles (2 par ligne) */
  .home-frame131, .home-frame141, .home-frame151, .home-frame161,
  .home-frame132, .home-frame142, .home-frame152, .home-frame162, .home-frame173,
  .home-frame133, .home-frame143, .home-frame153, .home-frame134, .home-frame144, .home-frame154 {
    width: calc(50% - 15px);
    height: auto;
    min-height: 300px;
  }

  /* Section "Create Applications" */
  .home-frame20 {
    padding: 60px 40px;
    flex-direction: column;
  }
  .home-rectangle8 {
    width: 100%;
    height: auto;
    max-width: 600px;
  }

  /* --- CORRECTION CARROUSEL TABLETTE --- */
  .carousel {
    width: 100%;
    padding: 0;
  }
  .home-frame38 {
    padding: 80px 30px;
  }

  /* Section "About" (Fondateurs) */
  .home-frame47 {
    padding: 80px 60px;
  }
  .home-frame44,
  .home-frame45 {
    flex-direction: column;
    padding: 0;
    width: 100%;
    max-width: 500px;
  }
  .home-rectangle111,
  .home-rectangle112 {
    width: 100%;
    height: auto;
    border-radius: 20px 20px 0 0;
  }
  .home-frame411,
  .home-frame412 {
    padding: 30px;
    width: 100%;
  }
  .home-text322,
  .home-text329 {
    width: 100%;
  }

  /* Section "Redefines" (CTA bas) */
  .home-frame56 {
    flex-direction: column;
  }
  .home-frame53,
  .home-frame55 {
    display: none;
  }
  .home-frame50 {
    width: 100%;
    max-width: 630px;
  }
  .home-text338, .home-text297, .home-text259 {
    width: 100%;
  }

  /* Section "Contact" */
  .home-frame74 {
    flex-direction: column;
  }
  .home-frame115 {
    padding: 80px 60px;
    width: 100%;
    box-sizing: border-box;
  }
  .home-frame73 {
    padding: 80px 60px;
    width: 100%;
    box-sizing: border-box;
  }
  .home-union1 {
    display: none;
  }
}

/* --- 2. Mobiles (jusqu'à 767px) --- */
@media (max-width: 767px) {
/* --- Styles Header Mobile --- */
  .home-frame1 {
    /* Gardez vos styles existants pour gap, padding, etc. */
    gap: 8px; 
    padding: 0 8px; 
    justify-content: space-between; /* Espace entre logo et hamburger */
    align-items: center; 
  }
  
  /* Cacher les liens et bouton Contact du desktop */
  .desktop-nav-link {
    display: none !important; 
  }

  /* Afficher le bouton hamburger */
  .hamburger-button.mobile-nav-button {
    display: block; 
  }
  
  .nav-link {
    display: none;
  }
  .nav-link.active {
    display: none;
  }
  .nav-link.contact-btn {
    display: flex;
    padding: 6px 12px;
    font-size: 13px;
  }
  .brand-logo {
    height: 30px;
  }

  /* --- Typographie --- */
  h1, .H1 { font-size: 40px !important; line-height: 48px !important; }
  h2, .H2 { font-size: 32px !important; line-height: 40px !important; }
  h3, .H3 { font-size: 20px !important; line-height: 28px !important; }
  h4, .H4 { font-size: 18px !important; line-height: 24px !important; }

/* REMPLACEZ PAR CECI : */
  .home-top {
    padding: 140px 16px 60px; 
    /* --- Amélioration Visuelle Mobile --- */
    position: relative; /* Nécessaire pour le pseudo-élément ::before */
    z-index: 1; /* S'assurer que le contenu est au-dessus de l'overlay */
    background-position: center 20%; /* Centre H, positionne un peu plus bas que le top */
    background-repeat: no-repeat; 
    /* background-size: cover; est hérité et probablement correct */
  }

  /* AJOUTEZ CECI JUSTE APRÈS LA RÈGLE .home-top : */
  /* Voile sombre pour améliorer le contraste */
  .home-top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(16, 23, 40, 0.5); /* Couleur de fond sombre avec 50% d'opacité */
    z-index: -1; /* Place le voile derrière le contenu mais au-dessus de l'image */
  }
  .home-frame19,
  .home-frame181,
  .home-frame21,
  .home-frame22,
  .home-frame38,
  .home-frame182,
  .home-frame47,
  .home-frame56 {
    padding: 60px 24px;
  }

  /* Section "Hero" */
  .home-frame7, .home-frame3, .home-text100, .home-text101, .home-text102 {
    width: 100%;
  }
  .home-frame68 {
    flex-direction: column;
    align-items: stretch;
  }
  .home-frame42, .home-frame57 {
    justify-content: center;
  }

  /* Section "Why" */
  .home-frame23 {
    padding: 40px 24px;
    gap: 30px;
    width: 100%;
  }
  .home-frame9, .home-text111 {
    width: 100%;
  }
  .home-frame96 {
    width: 100%;
  }
  .home-rectangle3 {
    width: 100%;
    height: auto;
  }

  /* Section "Platform" */
  .home-frame02 {
    padding: 60px 24px;
  }
  .home-frame113, .home-text247, .home-text248 {
    width: 100%;
  }

  /* Grilles de cartes (toutes sections) -> 1 par ligne */
  .home-frame171,
  .home-frame172,
  .home-frame174,
  .home-frame292 {
    flex-direction: column;
    gap: 20px;
  }
  .home-frame131, .home-frame141, .home-frame151, .home-frame161,
  .home-frame132, .home-frame142, .home-frame152, .home-frame162, .home-frame173,
  .home-frame133, .home-frame143, .home-frame153, .home-frame134, .home-frame144, .home-frame154 {
    width: 100%;
    min-height: auto;
    padding: 40px 30px;
  }

  /* Section "Create Applications" */
  .home-frame20 {
    padding: 40px 24px;
  }
  .home-frame114, .home-text268, .home-text269 {
    width: 100%;
  }

  /* Textes centrés pleine largeur */
  .home-text259, .home-text297, .home-text308, .home-text321 {
    width: 100%;
  }

  /* Logos des fondateurs */
  .home-frame401, .home-frame402 {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  /* --- CORRECTION CARROUSEL MOBILE (1 ÉLÉMENT) --- */
  .home-frame38 {
    padding: 60px 0;
  }
  .carousel-nav {
    display: none;
  }
  .carousel {
    width: 300px;
    padding: 0;
  }
  .carousel-track {
    /* Ajoute 10% de padding de chaque côté */
    padding-left: 10%;  
    padding-right: 10%; 
    box-sizing: border-box;
  }
  /* Styles pour les cartes du carrousel */
  .carousel-track > .home-frame26,
  .carousel-track > .home-frame291,
  .carousel-track > .home-frame30,
  .carousel-track > .home-frame31,
  .carousel-track > .home-frame32,
  .carousel-track > .home-frame33,
  .carousel-track > .home-frame34,
  .carousel-track > .home-frame35,
  .carousel-track > .home-frame36 {
    /* La carte prend 80% de la largeur (100% - 10% gauche - 10% droite) */
    flex-basis: 80%;
    min-width: 80%; /* Force la largeur */
    scroll-snap-align: center; /* Centre la carte */
  }

  /* Section "Redefines" (CTA bas) */
  .home-frame50 {
    padding: 0;
  }
  .home-frame49 {
    padding: 40px 24px;
  }
  .home-text339 {
    width: 100%;
  }
  .home-frame610 {
    flex-direction: column;
    align-items: stretch;
  }
  .home-frame43, .home-frame510 {
    justify-content: center;
  }

  /* Section "Contact" */
  .home-frame115, .home-frame73 {
    padding: 60px 24px;
  }
  .home-text346, .home-text347 {
    width: 100%;
  }
  .home-frame58, .home-frame59, .home-frame60, .home-frame61, 
  .home-frame62, .home-frame63, .home-frame64, .home-frame653,
  .home-frame71 {
    width: 100%;
  }
  .form-submit-button {
    width: 100%;
  }
  
  /* --- Footer --- */
  .home-footer {
    flex-direction: column;
    gap: 15px;
    padding: 30px 24px;
  }
  .home-line5 {
    transform: rotate(90deg);
  }
}

/* --- 3. Très petits mobiles (jusqu'à 359px) --- */
@media (max-width: 380px) {
  .real-contact-form{
    min-width:auto;
  }
}