/* ============================================================
   STYLE-CONTACT.CSS — Styles propres à la page contact
   ============================================================ */

/* ── 1. EN-TÊTE (TITRE SUR UNE LIGNE) ─────────────────────── */

.page-entete {
  padding       : 10rem 3rem 4rem;
  border-bottom : 1px solid var(--bordure);

  /* Animation d'apparition sur l'en-tête complet */
  opacity   : 0;
  animation : fadeIn 1s ease-out forwards;
}

.page-surtitre {
  font-size      : 0.65rem;
  font-weight    : 600;
  letter-spacing : 0.25em;
  text-transform : uppercase;
  color          : var(--or);

  display       : flex;
  align-items   : center;
  gap           : 1rem;
  margin-bottom : 1.5rem;
}

.page-surtitre::before {
  content    : '';
  width      : 2.5rem;
  height     : 1px;
  background : var(--or);
  display    : block;
  flex-shrink: 0;
}

.page-titre {
  font-family : var(--police-serif);
  font-size   : clamp(2.5rem, 4.5vw, 4.5rem); 
  font-weight : 300;
  line-height : 1.2;
  color       : var(--texte);
  white-space : nowrap; 
}

.page-titre em {
  font-style : italic;
  color      : var(--or);
}


/* ── 2. LAYOUT — Centré en FLEXBOX ──────────────────────── */

.contact-contenu {
  display        : flex;
  flex-direction : column;     
  align-items    : center;     
  justify-content: center;
  padding        : 6rem 3rem; 
  width          : 100%;
}

.contact-form {
  display        : flex;
  flex-direction : column;
  gap            : 3.5rem;    
  width          : 100%;       
  max-width      : 750px;     

  /* Animation Glissée (fadeUp) avec un léger retard pour attendre le titre */
  opacity   : 0;
  animation : fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}


/* ── 4. FORMULAIRE (AGRANDI ET OPTIMISÉ) ─────────────────── */

.form-rangee {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 3rem; 
}

.form-groupe {
  display        : flex;
  flex-direction : column;
  gap            : 0.5rem;
}

.form-groupe label {
  font-size      : 0.75rem;   
  font-weight    : 600;
  letter-spacing : 0.25em;    
  text-transform : uppercase;
  color          : var(--texte-attenue);
}

.form-groupe input,
.form-groupe textarea {
  background    : transparent;
  border        : none;
  border-bottom : 1px solid var(--bordure);
  color       : var(--texte);
  font-family : var(--police-serif);
  font-size   : 1.2rem;       
  font-weight : 300;
  padding     : 1rem 0;       

outline       : none; 
  transition    : border-color 0.3s ease;
  appearance    : none; 
  border-radius : 0;
}

.form-groupe input::placeholder,
.form-groupe textarea::placeholder {
  color      : rgba(138, 130, 120, 0.3);
  font-style : italic;
  font-size  : 1.1rem;
  transition : opacity 0.25s ease;
}

.form-groupe input:focus::placeholder,
.form-groupe textarea:focus::placeholder {
  opacity: 0;
}

.form-groupe input:focus,
.form-groupe textarea:focus {
  border-color : var(--or);
}

.form-groupe textarea {
  resize      : vertical;
  min-height  : 10rem;       
  line-height : 1.6;
}

.form-soumettre {
  margin-top : 1.5rem;
  align-self : flex-start; 

  background  : transparent;
  border      : 1px solid var(--or-sombre);
  color       : var(--or);

  font-family    : var(--police-sans);
  font-size      : 0.8rem;    
  font-weight    : 600;
  letter-spacing : 0.25em;
  text-transform : uppercase;

  padding : 1.1rem 3rem;      
  cursor  : pointer;

  display    : inline-flex;
  align-items: center;
  justify-content: center;
  gap        : 1.2rem;

  transition : background 0.3s, color 0.3s, border-color 0.3s, gap 0.3s, transform 0.2s;
}

.form-soumettre:hover {
  background : var(--or);
  border-color: var(--or);
  color      : var(--bg-principal);
  gap        : 1.8rem;
}

.form-soumettre:active {
  transform: scale(0.98);
}

.form-confirmation {
  display     : none;
  font-family : var(--police-serif);
  font-style  : italic;
  color       : var(--or);
  font-size   : 0.95rem;
  margin-top  : 0.5rem;
}


/* ── 5. RESPONSIVE ─────────────────────────────────────────── */

@media (max-width: 900px) {
  .page-entete {
    padding : 8rem 1.5rem 3rem;
  }

  .contact-contenu {
    padding        : 4rem 1.5rem;
  }

  .form-rangee {
    grid-template-columns : 1fr;
    gap                   : 2.5rem;
  }
}


/* ── 6. KEYFRAMES (ANIMATIONS) ────────────────────────────── */

/* Fondu simple */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Fondu + Glissement du bas vers le haut */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}