/* ========================================
   Marian Prod - Page Contact
   Feuille de style contact
   ======================================== */


/* ========================================
   Reset et base
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  min-height: 100vh;
  position: relative;
}

/* ========================================
   Section About (Qui suis-je ?)
   ======================================== */
.about-section {
  max-width: 1000px;
  margin: 0 auto;
  padding: 147px var(--spacing-md) var(--spacing-2xl);
}

.about-container {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-md);
  align-items: start;
}

.about-photo {
  position: relative;
  height: 550px;
  aspect-ratio: 2/3;
  border: 3px solid var(--color-card-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-content {
  position: relative;
  min-width: 400px;
  width: 559px;
  height: 502px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: -5px;
}

.about-title {
  font-family: var(--font-family);
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -1.44px;
  line-height: 1;
}

.about-title .title-accent {
  font-weight: 800;
  color: var(--color-accent);
}

.about-description {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.4px;
  color: rgba(250, 248, 234, 0.6);
}

/* ========================================
   Section Contact
   ======================================== */
.contact-section {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.contact-title {
  font-family: var(--font-family);
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -1.44px;
  line-height: 1;
}

.title-accent {
  font-weight: 800;
  color: var(--color-accent);
}

/* ========================================
   Formulaire
   ======================================== */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.form-row {
  display: flex;
  gap: var(--spacing-md);
}

.form-row .form-group {
  flex: 1;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

.form-group label {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.72px;
  color: var(--color-text-primary);
}

.form-input {
  background-color: var(--color-bg-dark);
  border: 3px solid var(--color-card-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  font-family: var(--font-family);
  font-size: 16px;
  color: var(--color-text-primary);
  transition: border-color 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.form-input::placeholder {
  color: rgba(250, 248, 234, 0.5);
}

.form-textarea {
  height: 141px;
  resize: vertical;
}

/* ========================================
   Bouton Submit
   ======================================== */
.submit-btn {
  background-color: var(--color-accent);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: 12px 20px;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.48px;
  color: var(--color-bg);
  cursor: pointer;
  width: 100px;
  transition: all 0.5s ease;
  margin-top: var(--spacing-sm);
}

.submit-btn:hover {
  background-color: var(--color-bg);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.submit-btn:active {
  transform: translateY(0);
}

/* Container pour le bouton et le message */
.form-actions {
  display: flex;
  align-items: center;
  gap: 20px; /* Espace entre le bouton et le texte */
  margin-top: var(--spacing-sm);
}

/* Style du message de retour */
.form-response {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  transition: opacity 0.3s ease;
}

.form-response.success {
  color: #a8e6cf; /* Vert doux accordé à votre thème */
}

.form-response.error {
  color: #ff8b94; /* Rouge doux */
}

/* Animation de chargement sur le bouton (optionnel) */
.submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}



/* ========================================
   Responsive
   ======================================== */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .contact-title {
    font-size: 36px;
  }
  
  .form-group label {
    font-size: 20px;
  }
  
  .nav-menu {
    gap: var(--spacing-md);
  }
  
  .logo-container {
    width: 250px;
  }

  .about-container {
    flex-direction: column; /* Place la photo au-dessus du texte */
    align-items: center; /* Centre les éléments */
  }

  .about-photo {
    width: 100%;
    max-width: 335px; /* Garde la largeur maximale d'origine */
    height: auto; /* Permet à la hauteur de s'adapter */
    aspect-ratio: 335 / 502; /* Conserve les proportions d'origine de la photo */
  }

  .about-content {
    min-width: 0; /* Annule le min-width: 400px du mode PC */
    width: 100%; /* Prend toute la largeur disponible */
    height: auto; /* Annule la hauteur fixe de 502px pour laisser la place au texte */
  }

  .about-title {
    font-size: 36px; /* Optionnel : réduit un peu la taille du titre sur mobile */
  }
}