/* ==========================================================================
   PAGE CONTACT – contact.css
   01. Reset & Bases
   02. Typographies globales
   03. Header (spécifique page contact si besoin)
   04. Bande supérieure (breadcrumb + recherche)
   05. Grille principale (form + infos)
   06. Formulaire de contact
   07. Infos de contact (colonne droite)
   08. Boutons
   09. Divers / notes
   ========================================================================== */


/* ==========================================================================
   01) RESET & BASES
   ========================================================================== */

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #57637c; /* couleur texte par défaut sur la page contact */
  margin: 0;
}


/* ==========================================================================
   02) TYPOGRAPHIES GLOBALES
   ========================================================================== */

/* Tous les titres */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: #1F2937; /* base foncée */
}

/* Couleur spécifique souhaitée pour les H2 */
h2 {
  color: #1D71B8; /* bleu charte pour les H2 */
}

/* Éléments forts */
strong { color: #1F2937; }


/* ==========================================================================
   03) HEADER (spécifique si besoin)
   ========================================================================== */

/* Sur la page contact, tu as mis le header non-fixe.
   Si tu repasses en fixe + transparent, ajuste ici. */
.pp-header {
  position: relative; /* suit le scroll (pas fixed ici) */
}


/* ==========================================================================
   04) BANDE SUPÉRIEURE (fil d’Ariane + recherche)
   ========================================================================== */

.contact-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 20px;
  width: 100%;
  margin: 0 auto;
  background-color: #FAFAFA;
}

/* Fil d’Ariane */
.breadcrumb {
  color: #6B7280;
  font-size: 0.95rem;
}
.breadcrumb a { color: #6B7280; text-decoration: none; }
.breadcrumb span { margin: 0 6px; }

/* Recherche (à droite) */
.contact-search {
  flex: 1 0 auto;          /* largeur flexible comme tu l'as souhaité */
  display: flex;
  justify-content: flex-end; /* collé à droite */
  margin-left: auto;         /* pousse à droite */
}
.contact-search input {
  display: block;
  width: 100%;
  max-width: 580px;          /* largeur cible */
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


/* ==========================================================================
   05) GRILLE PRINCIPALE (form + infos)
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 colonnes */
  gap: 28px;
  max-width: 1200px;
  padding: 10px 20px 60px;
  margin: 0 auto;
}

/* Cartes (container visuel des 2 colonnes) */
.card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 8px;     /* coins carrés (selon ta maquette) */
  margin-top: 20px;
  padding: 20px;
}

/* Titres des cartes – on retire la couleur pour laisser les h2 hériter du bleu */
.contact-form-card h2,
.contact-info-card h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  /* color: #1F2937;  <-- supprimé pour ne pas écraser le h2 global */
  margin: 0 0 16px;
}


/* ==========================================================================
   06) FORMULAIRE DE CONTACT
   ========================================================================== */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #111827; /* texte plus lisible dans la carte blanche */
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 400;      /* labels non gras */
  font-size: 0.95rem;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;      /* coins carrés (selon ta maquette) */
  font-size: 0.95rem;
  font-family: inherit;
}

.contact-form textarea { resize: vertical; }

/* Ligne "Prénom / Nom" en 2 colonnes */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Actions du formulaire */
.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}


/* ==========================================================================
   07) INFOS DE CONTACT (colonne droite)
   ========================================================================== */

.contact-infos {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 14px;
}

.contact-infos li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
}

/* Pictos ronds en couleur */
.ci-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  background: #E5F2FF;  /* bleu clair */
  color: #3B82F6;       /* bleu icon */
  border-radius: 50%;
}

.contact-urgent h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  margin: 12px 0 6px;
  color: #1F2937;
}
.contact-urgent p { margin: 4px 0; }


/* ==========================================================================
   08) BOUTONS
   ========================================================================== */

.btn-gradient {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #2aaaff, #554dff);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;  /* cohérent avec les champs */
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  cursor: pointer;
}
.btn-gradient:hover { opacity: .95; }

.btn-ghost {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #D1D5DB;
  color: #111827;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}


/* ==========================================================================
   09) DIVERS / NOTES
   ========================================================================== */

/* ==========================================================================
   09) RESPONSIVE – Ajouts mobile-first pour contact.css
   ========================================================================== */

/* 🔹 Ultra-petits téléphones (<= 360px) */
@media (max-width: 359.98px){
  body { font-size: 14px; }
  .contact-top{ gap: 12px; padding: 16px 14px; }
  .breadcrumb{ font-size: .9rem; }
  .contact-search input{ padding: 9px 10px; }
  .contact-grid{ padding: 8px 14px 44px; gap: 18px; }
  .card{ padding: 16px; border-radius: 8px; }
  .form-actions{ flex-direction: column; align-items: stretch; }
  .btn-gradient, .btn-ghost{ width: 100%; text-align: center; }
}

/* 🔹 Petits téléphones (<= 480px) */
@media (max-width: 480px){
  /* Bande supérieure : on passe en colonne, la recherche sous le breadcrumb */
  .contact-top{
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .contact-search{ width: 100%; justify-content: stretch; margin-left: 0; }
  .contact-search input{ max-width: 100%; }

  /* Grille principale : 1 colonne */
  .contact-grid{
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 10px 16px 50px;
  }

  /* Ligne prénom/nom : 1 colonne */
  .form-row{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Boutons : pile verticalement */
  .form-actions{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .btn-gradient,
  .btn-ghost{
    width: 100%;
    text-align: center;
  }

  /* Lisibilité générale dans les cartes */
  .contact-form label{ font-size: .95rem; }
  .contact-form input,
  .contact-form textarea,
  .contact-form select{ font-size: .95rem; }
}

/* 🔹 Téléphones “moyens” (>= 390px) */
@media (min-width: 390px){
  .contact-top{ padding-left: 20px; padding-right: 20px; }
}

/* 🔹 À partir de 640px (sm) */
@media (min-width: 640px){
  .contact-top{ padding: 20px 24px; gap: 20px; }
  .contact-grid{ padding: 10px 24px 60px; gap: 24px; }
}

/* 🔹 Tablettes (>= 768px) */
@media (min-width: 768px){
  /* On rétablit 2 colonnes pour la grille */
  .contact-grid{
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  /* Sur tablette, la bande haute peut repasser en ligne si tu veux */
  .contact-top{
    flex-direction: row;
    align-items: center;
  }
}

/* 🔹 Petits laptops (>= 1024px) */
@media (min-width: 1024px){
  .contact-grid{
    max-width: 1200px;
    margin: 0 auto;
  }
  .contact-search input{ max-width: 520px; }
}

/* 🔹 ≥ 1280px */
@media (min-width: 1280px){
  .contact-search input{ max-width: 580px; }
}

/* 🔹 Écrans à faible hauteur (ex: landscape mobile, petits laptops) */
@media (max-height: 700px){
  .contact-grid{ padding-bottom: 40px; }
  .card{ margin-top: 16px; }
}

/* 🔹 Landscape sur téléphones */
@media (orientation: landscape) and (max-height: 480px){
  .contact-top{ padding-top: 12px; padding-bottom: 12px; }
  .contact-grid{ padding-bottom: 36px; }
}

/* 🔹 Safe areas (iPhone notch, etc.) */
@supports (padding: max(0px)){
  .contact-top{
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* 🔹 Accessibilité : réduire les animations si demandé */
@media (prefers-reduced-motion: reduce){
  * { scroll-behavior: auto; }
}