/* ==========================================================================
   Contact
   ========================================================================== */

.contact {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--filet-sombre);
}

/* --------------------------------------------------------------------------
   Colonne formulaire — panneau blanc
   -------------------------------------------------------------------------- */

.contact__demande {
  flex: 1.25;
  min-width: 280px;
  box-sizing: border-box;
  padding: clamp(40px, 4.4vw, 64px) clamp(28px, 3.4vw, 52px);
  background: var(--blanc);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact__intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact__titre {
  font: 400 clamp(30px, 3.2vw, 44px)/1.06 var(--titre);
  color: var(--texte-clair-1);
  text-wrap: pretty;
}

.contact__lead {
  font: 500 15px/1.8 var(--courant);
  color: var(--texte-clair-2);
  max-width: 52ch;
}

/* Cette page resserre les gouttières du formulaire. */
.formulaire--contact { gap: 24px; }
.formulaire--contact .formulaire__rang { gap: 24px; }
.formulaire--contact .champ { min-width: 160px; }
.formulaire--contact .champ__saisie { border-bottom-color: var(--filet-clair); }

/* Le <select> hérite du même filet que les autres champs. */
select.champ__saisie {
  appearance: none;
  cursor: pointer;
}

/* L'envoi ne prend pas toute la largeur du panneau. */
.formulaire--contact .bouton { align-self: flex-start; }

/* --------------------------------------------------------------------------
   Colonne coordonnées
   -------------------------------------------------------------------------- */

.contact__infos {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
}

.contact__photo {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.contact__bloc {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* La carte a besoin de respirer : collée au bloc « zone d'intervention »,
   les deux se lisaient comme un seul pavé. */
.contact__bloc .coord:last-child {
  margin-top: 16px;
}

.coord {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.coord__titre {
  font: 600 10px/1 var(--courant);
  letter-spacing: .16em;
  color: var(--or-profond);
}

.coord__tel {
  font: 500 24px/1.2 var(--courant);
  color: var(--laiton);
}
.coord__tel a { color: inherit; }

.coord__valeur {
  font: 500 14px/1.7 var(--courant);
  color: var(--texte-sombre-1);
}
.coord__valeur a { color: inherit; }
.coord__valeur a:hover { color: var(--laiton); }

.coord__note {
  font: 500 12.5px/1.6 var(--courant);
  color: var(--texte-sombre-3);
}

/* --------------------------------------------------------------------------
   Carte de la zone d'intervention

   La colonne est étroite : les libellés sont dimensionnés plus grand qu'ailleurs
   dans les unités du viewBox, faute de quoi ils deviennent illisibles une fois
   la carte réduite.
   -------------------------------------------------------------------------- */

.carte {
  width: 100%;
  height: auto;
  display: block;
}

/* Hiérarchie de couleur : l'atelier et les distances gardent l'or, tout le
   reste passe en gris. Auparavant les six villes, les points et les cercles
   étaient dorés eux aussi — l'œil ne savait plus où se poser. */
/* Les points de la carte : teinte sourde pour les communes, or vif pour
   l'atelier, qui doit se détacher seul. */
.carte__point            { fill: #8f887a; }
.carte__point--atelier   { fill: #cf9020; }

.carte__ville   { font: 500 17px var(--courant); fill: var(--texte-sombre-2); }
.carte__km      { font: 500 14px var(--courant); fill: var(--or-profond); }
.carte__atelier { font: 600 18px var(--courant); fill: var(--or-profond); }
.carte__mention { font: 500 14px var(--courant); fill: var(--texte-sombre-3); }

/* Pied de page propre à cette page : sans filet supérieur. */
.pied-interne--contact {
  padding: 26px var(--cadre);
  border-top: none;
  gap: 20px;
}

/* Colonne formulaire sur fond blanc. */
.contact__demande .bouton { --fond: var(--blanc); }

/* Le liseré lumineux encadre le formulaire : il lui faut de la marge. */
.formulaire--contact { padding: clamp(22px, 2.4vw, 32px); }

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 680px) {
  .contact__titre { font-size: 24px; line-height: 1.14; }
  .contact__bloc .coord:last-child { margin-top: 24px; }
  .contact__demande { padding: 32px 22px; }
  .contact__bloc { padding: 28px 22px; }

  /* La carte prend toute la largeur de l'écran : les marges négatives
     annulent le rembourrage latéral du bloc, sans jamais le dépasser — la
     largeur est calculée, pas devinée en vw, qui inclurait la barre de
     défilement et provoquerait un débord horizontal. */
  .carte {
    margin-inline: -22px;
    width: calc(100% + 44px);
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   Restitution de la version ordinateur — voir la note de base.css.

   Le nouveau nuancier de la carte et son immobilité ont été demandés pour le
   mobile : sur ordinateur, elle reprend ses couleurs d'origine et entre avec
   le reste du bloc.
   -------------------------------------------------------------------------- */

@media (min-width: 681px) {
  .carte__point          { fill: #cf9020; }
  .carte__point--atelier { fill: var(--laiton); }
  .carte__ville          { fill: var(--texte-sombre-1); }
}