/* ==========================================================================
   Page Contact — recopié depuis _floot-export/pages/contact.module.css.

   Les CSS Modules sont cloisonnés automatiquement par le bundler d'origine ;
   un fichier CSS classique ne l'est pas et ces 30 règles utilisent des noms
   très génériques (.container, .header, .title, .grid, .form...) déjà
   utilisés par ailleurs sur le site. Chaque sélecteur de règle est donc
   préfixé par ".page--contact " (le <main class="page page--contact"> posé
   par inc/header.php pour cette page uniquement) afin de rester sans effet
   sur les autres pages. Valeurs recopiées à l'identique, seul le préfixe de
   portée change. Les @media sont conservés, leurs règles internes préfixées
   comme les autres. Aucun @keyframes dans ce fichier.
   ========================================================================== */

.page--contact .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-12) var(--spacing-8);
  min-height: 80vh;
}

.page--contact .header {
  margin-bottom: var(--spacing-12);
  text-align: center;
}

.page--contact .title {
  font-family: var(--font-family-heading);
  font-size: clamp(3rem, 5vw, 5rem);
  margin: 0 0 var(--spacing-4) 0;
  color: var(--foreground);
  text-transform: uppercase;
}

.page--contact .subtitle {
  font-size: 1.25rem;
  color: var(--muted-foreground);
  max-width: 600px;
  margin: 0 auto;
}

.page--contact .grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--spacing-8);
}

/* Form Section */
.page--contact .formSection {
  width: 100%;
  /* Un élément de grille garde par défaut min-width:auto (= la taille min-
     content de son contenu). Sous 900px, .grid repasse en une seule colonne,
     mais ce plancher implicite continue d'imposer la largeur intrinsèque de
     .formCard (champs de formulaire) et fait déborder le document à 320px.
     min-width:0 autorise l'élément à se réduire jusqu'à la largeur du
     viewport. */
  min-width: 0;
}

.page--contact .formCard {
  background-color: var(--card);
  border: 1px solid var(--border);
  padding: var(--spacing-8);
  box-shadow: var(--shadow);
}

.page--contact .cardTitle {
  font-family: var(--font-family-heading);
  font-size: 2rem;
  margin: 0 0 var(--spacing-6) 0;
  color: var(--foreground);
  text-transform: uppercase;
  border-bottom: 2px solid var(--secondary);
  display: inline-block;
  padding-bottom: var(--spacing-2);
}

.page--contact .form {
  display: flex;
  flex-direction: column;
}

.page--contact .row {
  display: flex;
  gap: var(--spacing-4);
}

.page--contact .flex1 {
  flex: 1;
}

.page--contact .submitBtn {
  margin-top: var(--spacing-4);
  align-self: flex-start;
}

/* Info Section */
.page--contact .infoSection {
  width: 100%;
  min-width: 0; /* même correctif de blowout de grille que .formSection */
}

.page--contact .infoCard {
  background-color: var(--primary);
  color: var(--primary-foreground);
  padding: var(--spacing-8);
  height: 100%;
  /* Brutalist touch */
  position: relative;
}

.page--contact .infoCard::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 1px solid var(--voile-clair-leger);
  pointer-events: none;
}

.page--contact .infoCard .cardTitle {
  color: var(--primary-foreground);
  border-color: var(--secondary);
}

.page--contact .infoItem {
  display: flex;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
  align-items: flex-start;
}

.page--contact .infoItem > div {
  /* Élément flex : min-width:auto par défaut refuse de se réduire sous la
     largeur intrinsèque de son contenu (ex. l'email non sécable
     "kcechirolles@gmail.com"), débordant l'écran à 320px. */
  min-width: 0;
}

.page--contact .iconWrapper {
  background-color: var(--voile-clair-leger);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.page--contact .infoItem h3 {
  font-family: var(--font-family-heading);
  font-size: 1.25rem;
  margin: 0 0 var(--spacing-1) 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.page--contact .infoItem p {
  margin: 0;
  opacity: 0.8;
  line-height: 1.5;
  /* L'email (un seul "mot" sans espace) ne peut pas passer à la ligne comme
     du texte normal ; sans ce réglage il dépasse la carte au lieu de
     s'enrouler sur plusieurs lignes une fois la colonne réduite (voir
     min-width:0 ci-dessus sur .infoItem > div). */
  overflow-wrap: anywhere;
}

/* Le lien mailto de la carte Informations mesurait 21px de haut, sous les 24px
   minimums (audit du 6 août 2026, P3). inline-block plutôt que block : la
   cible s'agrandit verticalement sans s'étirer sur toute la largeur de la
   carte — même arbitrage que pour les liens du pied de page dans layout.css.
   Le padding vertical ne décale rien d'autre : le line-height:1.5 du <p>
   parent absorbe les 4px ajoutés. */
.page--contact .infoItem a {
  display: inline-block;
  padding: 0.125rem 0;
}

.page--contact .separator {
  height: 1px;
  background-color: var(--voile-clair-moyen);
  margin: var(--spacing-6) 0;
}

/* Responsive */
@media (max-width: 900px) {
  .page--contact .grid {
    grid-template-columns: 1fr;
  }

  .page--contact .infoCard {
    min-height: auto;
  }
}

/* Map Section */
.page--contact .mapSection {
  margin-top: var(--spacing-12);
}

.page--contact .mapTitle {
  font-family: var(--font-family-heading);
  font-size: 2rem;
  margin: 0 0 var(--spacing-8) 0;
  color: var(--foreground);
  text-transform: uppercase;
  border-bottom: 2px solid var(--secondary);
  display: inline-block;
  padding-bottom: var(--spacing-2);
}

.page--contact .mapContainer {
  width: 100%;
  background-color: var(--card);
  border: 4px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.page--contact .iframe {
  display: block;
  width: 100%;
}

@media (max-width: 600px) {
  .page--contact .row {
    flex-direction: column;
    gap: 0;
  }

  .page--contact .formCard, .page--contact .infoCard {
    padding: var(--spacing-6);
  }

  .page--contact .mapContainer iframe {
    height: 300px !important;
  }
}

/* ==========================================================================
   Ajouts hors périmètre de contact.module.css (30 règles ci-dessus,
   recopiées à l'identique). Rien ci-dessous ne vient du module d'origine :

   1) La carte Google Maps intégrée par contact.tsx est volontairement
      remplacée par un lien (voir pages/contact.php et le rapport de tâche)
      — .mapFallback habille ce lien à l'intérieur de .mapContainer, qui n'a
      lui-même aucun padding dans la source (il enveloppait une iframe
      pleine largeur).

   2) contact.tsx rend <AccessInfo /> (components/AccessInfo.tsx), un
      composant partagé avec son propre fichier CSS module
      (components/AccessInfo.module.css) non listé dans les sources à
      recopier mais nécessaire pour reproduire fidèlement « OÙ NOUS
      TROUVER ». Ses règles sont reprises ci-dessous avec les mêmes valeurs,
      renommées (accessCard/accessItem/accessIcon/accessDivider au lieu de
      container/accessCard/iconWrapper/divider) pour ne pas entrer en
      collision avec .iconWrapper déjà défini plus haut pour .infoCard.

   3) .champ/.champ__erreur (libellé + message d'erreur de chaque ligne du
      formulaire), .alerte/.alerte--succes/.alerte--erreur (bandeau de
      statut après soumission) et .piege (honeypot anti-robot) habillent le
      traitement serveur réel de pages/contact.php + lib/contact.php —
      formulaire factice dans contact.tsx (un simple console.log, aucune
      validation, aucun anti-robot), donc sans équivalent dans
      contact.module.css. Ces quatre classes vivaient jusqu'ici, non
      préfixées, dans l'ancien assets/css/style.css (retiré, voir le rapport
      de tâche) : reprises ici à l'identique, scopées .page--contact comme
      le reste de ce fichier. (Un stub .fieldError, jamais réclamé par
      pages/contact.php, occupait cet emplacement par erreur — remplacé.)
   ========================================================================== */

.page--contact .mapFallback {
  padding: var(--spacing-8);
  text-align: center;
}

.page--contact .accessCard {
  background-color: var(--card);
  border: 1px solid var(--border);
  padding: var(--spacing-6) var(--spacing-8);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-8);
}

.page--contact .accessItem {
  display: flex;
  gap: var(--spacing-4);
  align-items: flex-start;
}

.page--contact .accessIcon {
  background-color: var(--primary);
  color: var(--primary-foreground);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.page--contact .accessItem h3 {
  font-family: var(--font-family-heading);
  font-size: 1.125rem;
  margin: 0 0 var(--spacing-1) 0;
  color: var(--foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.page--contact .accessItem p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.95rem;
  line-height: 1.5;
}

.page--contact .accessDivider {
  height: 1px;
  background-color: var(--border);
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .page--contact .accessCard {
    grid-template-columns: 1fr;
  }

  .page--contact .accessDivider {
    grid-column: auto;
  }
}

.page--contact .champ { display: grid; gap: var(--spacing-2); margin: 0; }
.page--contact .champ label {
  font-family: var(--font-family-monospace);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.page--contact .champ input, .page--contact .champ textarea {
  font-family: var(--font-family-base);
  font-size: 1rem;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--card);
  color: var(--foreground);
  border: 2px solid var(--border);
}
.page--contact .champ textarea { resize: vertical; }
.page--contact .champ input[aria-invalid], .page--contact .champ textarea[aria-invalid] { border-color: var(--error); }
.page--contact .champ__erreur { color: var(--error); font-size: 0.875rem; }

/* Honeypot anti-robot : masqué visuellement (position hors écran plutôt que
   display:none/visibility:hidden, ignoré par certains robots) mais toujours
   dans le flux du DOM — un humain ne le voit ni ne le remplit jamais. */
.page--contact .piege { position: absolute; left: -9999px; }

.page--contact .alerte { border: 2px solid var(--border); padding: var(--spacing-4) var(--spacing-5); margin-bottom: var(--spacing-6); }
.page--contact .alerte--succes { background: var(--success); color: var(--success-foreground); }
.page--contact .alerte--erreur { background: var(--error); color: var(--error-foreground); }
.page--contact .alerte--erreur a { color: inherit; }

/* Les icônes (inc/icones.php) portent la classe partagée .icone, pensée
   pour un usage en ligne avec du texte (voir assets/css/base.css). Ici
   elles sont posées dans des boîtes 48x48 (.iconWrapper / .accessIcon) à la
   manière des <MapPin size={24} /> etc. de la source : taille fixée à
   24x24, comme dans contact.tsx. */
.page--contact .iconWrapper .icone,
.page--contact .accessIcon .icone {
  width: 24px;
  height: 24px;
}