/* --- (tes styles EXACTS, inchangés) --- */

/* Conteneur texte + image */
.card-body {
  display: flex;
  align-items: stretch;
  gap: 20px;
  height: 100%;
  flex-wrap: nowrap;
  column-count: 1 !important; 
  column-gap: 0 !important;
}

/* Zone texte à droite */
.card-body div {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding-left: 20px;
  padding-right: 10px;
  scrollbar-gutter: stable;
}

/* Texte à droite */
.card-body p {
  margin: 0;          
  display: block;
  width: 100%;
  flex: 0 0 auto;     
}

/* Tablette */
@media (min-width: 768px) and (max-width: 1024px) {
  .card-body img {
    max-width: 45%;
    height: 100%;
    object-fit: contain;
  }
}

/* --- Mode desktop --- */
@media (min-width: 768px) {
  .card {
    width: 95%;
    height: 75vh;
    max-width: 1400px;
    box-sizing: border-box;
    padding: 2rem;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    background-image: linear-gradient(rgba(58,157,35,.65), rgba(0,0,0,.65)), url("images/zozo.webp");
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    text-shadow: 6px 6px 4px rgba(0,0,0,.9);
  }

  .card-body img {
    flex: 0 0 auto;
    max-width: 40%;
    height: 100%;
    object-fit: contain;
    display: block;
    margin: 0;
    position: sticky;
    top: 0;
  }

  .card-body div {
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .card-body div::-webkit-scrollbar { display: none; }
}

/* --- Mode mobile --- */
@media (max-width: 767px) {
  .card {
    width: 95%;
    height: 75vh;
    max-width: 1400px;
    box-sizing: border-box;
    padding: 2rem;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background-image: linear-gradient(rgba(58,157,35,.65), rgba(0,0,0,.65)), url("images/zozo.webp");
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    text-shadow: 6px 6px 4px rgba(0,0,0,.9);

    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .card::-webkit-scrollbar { display: none; }

  .card-body {
    flex-direction: column;
    align-items: center;
  }

  .card-body img {
    max-width: 100%;
    height: auto;
    margin: 0 auto 20px auto;
    position: static;
  }

  .card-body div {
    overflow-y: visible;
    padding-left: 0;
  }
}

/* --- Styles du formulaire (mobile-first) --- */
form {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* espace entre les champs */
}

form input[type="text"],
form input[type="email"],
form select,
form textarea {
  width: 100%;                 /* pleine largeur en mobile */
  padding: 12px;
  font-size: clamp(14px, 1.2vw, 18px);
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  background: #fff;
  color: #000;
}

form textarea {
  min-height: 150px;
  resize: vertical;
}

form button {
  padding: 12px 20px;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  background: #3a9d23;
  color: #fff;
  cursor: pointer;
  align-self: flex-start; /* le bouton colle à gauche */
}

form button:hover {
  background: #2e7b1c;
}

/* --- Tablette --- */
@media (min-width: 768px) and (max-width: 1024px) {
  form input[type="text"],
  form input[type="email"],
  form select,
  form textarea {
    max-width: 600px; /* champs un peu plus larges */
  }
}

/* --- Desktop --- */
@media (min-width: 1025px) {
  form {
    align-items: flex-start; /* formulaire aligné à gauche */
  }

  form input[type="text"],
  form input[type="email"],
  form select,
  form textarea {
    max-width: 500px; /* largeur fixe raisonnable */
  }

  form textarea {
    min-height: 200px; /* un peu plus de hauteur sur grand écran */
  }
}

/* INTRODUCTION DE CASSIA */
/* Layout du formulaire de contact */
.contact-layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.form-section {
    flex: 1;
    min-width: 0; /* Permet la compression si nécessaire */
}

.image-section {
    flex: 0 0 auto; /* Largeur fixe de 300px */
    display: none; /* Caché par défaut sur petits écrans */
}

.contact-image {
    width: 20vw; /* Largeur variable basée sur la largeur de l'écran */
    height: auto;
    object-fit: contain;
}

/* Affichage de l'image uniquement sur les grands écrans */
@media (min-width: 1024px) {
    .image-section {
        display: block;
    }
}

/* Sur écrans moyens et petits, retour à un layout vertical */
@media (max-width: 1023px) {
    .contact-layout {
        flex-direction: column;
    }
    
    .image-section {
        display: none;
    }
}

/* Ajustements pour très grands écrans */
@media (min-width: 1200px) {
    .image-section {
        flex: 0 0 400px; /* Image plus grande sur très grands écrans */
    }
}