/* Page Contact - pensée pour quelqu'un qui n'a pas le temps.
   Le téléphone d'abord, le formulaire réduit à l'essentiel. */

.contact__grille{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.75rem,4.5vw,4rem);
  align-items:start;
}

/* ---------- Les trois voies ---------- */

.contact__voies .section__titre{margin-bottom:clamp(1rem,2.4vh,1.6rem)}
.voie{
  display:block;
  padding:clamp(1rem,2.4vh,1.5rem) clamp(1.1rem,2.4vw,1.6rem);
  border:1px solid var(--hairline);
  border-radius:12px;
  background:var(--blanc);
  margin-bottom:.75rem;
  transition:border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);
}
a.voie:hover{border-color:var(--brun);transform:translateY(-2px);box-shadow:0 2px 18px rgba(80,58,40,.08)}
.voie__oeil{display:block;margin-bottom:.45rem;color:var(--brun-fonce)}
.voie__valeur{
  display:block;
  font-size:clamp(1.35rem,1.1rem + 1.1vw,2rem);
  font-weight:300;
  line-height:1.2;
  color:var(--encre);
}
.voie__valeur--petite{font-size:clamp(1rem,.92rem + .45vw,1.25rem)}
.voie__note{display:block;margin-top:.5rem;color:var(--encre-doux);font-size:.94rem;line-height:1.6}
.voie--tel{background:var(--beige-clair);border-color:rgba(162,126,93,.32)}
.voie--info{background:transparent;border-style:dashed}

/* ---------- Formulaire ---------- */

.form{
  background:var(--blanc);
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:clamp(1.4rem,3.2vw,2.4rem);
}
.form__intro{margin:0 0 clamp(1rem,2.4vh,1.5rem);color:var(--encre-doux);font-size:.96rem}
.champ{display:block;margin-bottom:clamp(.85rem,2vh,1.15rem)}
/* « display:block » sur une classe l'emporte sur la règle par défaut du
   navigateur pour [hidden] : sans cette ligne, la ligne « Lequel ? »
   restait visible alors qu'« Autre » n'était pas coché. */
.champ[hidden]{display:none}
.champ span{display:block;margin-bottom:.4rem;color:var(--brun-fonce)}
.champ input,.champ textarea{
  width:100%;
  font-family:var(--serif);
  font-size:1.02rem;
  color:var(--encre);
  background:var(--creme);
  border:1px solid var(--hairline);
  border-radius:6px;
  padding:.72rem .9rem;
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.champ textarea{resize:vertical;min-height:4.5rem;line-height:1.55}
.champ input:focus,.champ textarea:focus{outline:none;border-color:var(--brun);background:var(--blanc)}
.champ input::placeholder,.champ textarea::placeholder{color:rgba(87,77,67,.45)}

/* Plusieurs besoins peuvent se cumuler : ce sont des cases à cocher.
   La grille à colonnes égales leur donne la même largeur, deux rangées
   régulières plutôt que des pastilles de tailles disparates. */
.pastilles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.5rem;
  margin-bottom:clamp(.9rem,2.2vh,1.25rem);
}
.pastilles > span{grid-column:1/-1;margin-bottom:.15rem;color:var(--brun-fonce)}
.pastilles__aide{
  font-style:normal;letter-spacing:0;text-transform:none;
  color:var(--sourd,var(--encre-doux));opacity:.75;margin-left:.5rem;
}
.pastille input{position:absolute;opacity:0;pointer-events:none}
.pastille em{
  display:flex;align-items:center;justify-content:center;
  height:100%;min-height:2.6rem;
  font-style:normal;cursor:pointer;text-align:center;
  padding:.42rem .75rem;
  border:1px solid var(--hairline);border-radius:999px;
  color:var(--encre-doux);line-height:1.2;
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.pastille em:hover{border-color:var(--brun)}
.pastille input:checked + em{background:var(--brun-fonce);border-color:var(--brun-fonce);color:var(--blanc)}
.pastille input:focus-visible + em{outline:2px solid var(--brun);outline-offset:2px}
@media (max-width:480px){
  .pastilles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* La ligne qui s'ouvre quand « Autre » est coché : elle se déplie au lieu
   d'apparaître d'un coup, pour que le formulaire ne sursaute pas. */
.champ--autre:not([hidden]){animation:deplier .35s var(--ease)}
@keyframes deplier{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.champ--autre:not([hidden]){animation:none}}

.form button{
  width:100%;
  font-family:var(--serif);
  cursor:pointer;
  padding:.85rem 1.4rem;
  background:var(--brun-fonce);color:var(--blanc);
  border:1px solid var(--brun-fonce);border-radius:999px;
  transition:background .45s var(--ease),color .45s var(--ease);
}
.form button:hover{background:transparent;color:var(--brun-fonce)}
.form__note{margin:.9rem 0 0;text-align:center;color:var(--encre-doux);font-size:.88rem}

/* Anti-spam invisible pour le visiteur */
.abeille{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.merci{
  background:var(--beige-clair);
  border:1px solid var(--beige);
  border-radius:14px;
  padding:clamp(1.4rem,3.2vw,2.4rem);
  text-align:center;
  margin-bottom:1rem;
}
.merci h2{margin:0 0 .5rem;font-weight:300;font-size:clamp(1.25rem,1.05rem + .8vw,1.7rem)}
.merci p{margin:0;color:var(--encre-doux)}

/* ---------- Ce qui se passe ensuite ---------- */

.etapes{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(1rem,2.5vw,2rem);
}
.etape{
  padding:clamp(1.1rem,2.6vh,1.6rem) clamp(1.1rem,2.4vw,1.6rem);
  border-top:1px solid var(--brun);
  background:linear-gradient(180deg, rgba(232,200,168,.14), rgba(232,200,168,0) 60%);
}
.etape__num{display:block;margin-bottom:.6rem;color:var(--brun-fonce)}
.etape h3{margin:0 0 .5rem;font-weight:300;font-size:clamp(1.1rem,.98rem + .5vw,1.35rem)}
.etape p{margin:0;color:var(--encre-doux);font-size:.96rem;line-height:1.65}

@media (max-width:860px){
  .contact__grille{grid-template-columns:1fr;gap:1.75rem}
}