/* ---------- le bloc de contact : formulaire large, coordonnées à côté ---------- */
.contact .wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(30px,4.6vw,64px);align-items:start}

/* ---------- coordonnées : une liste de faits, pas des icônes décoratives ---------- */
.coord{display:grid;gap:0;border:1px solid var(--deep-line)}
.coord a{text-decoration:none}
.coord .item{display:flex;flex-direction:column;gap:5px;
  padding:18px 22px;border-bottom:1px solid var(--deep-line)}
.coord .item:last-child{border-bottom:0}
.coord .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(234,240,236,.44)}
.coord .v{font-size:17px;font-weight:600;letter-spacing:-.015em}
.coord .v.tel{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:19px}
.coord .item a.v:hover{color:var(--accent-2)}
.coord .p{font-size:13.5px;color:var(--deep-mut)}

/* le rappel WhatsApp, en bas du panneau */
.coord .item--wa{background:rgba(62,206,164,.07)}

/* ---------- ce qui se passe après : trois temps, pas quatre ---------- */
.steps--3{grid-template-columns:repeat(3,1fr)}

/* ---------- pas encore prêt : le guide, en bande claire ---------- */
.pasrpret .two{align-items:center}
.pasrpret .cover{background:var(--deep);border-color:var(--deep-line)}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .steps--3{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .contact .wrap{grid-template-columns:minmax(0,1fr)}
  /* les coordonnées passent AVANT le formulaire : sur téléphone,
     on appelle plus volontiers qu'on ne remplit */
  .contact .col-form{order:2}
  .contact .col-coord{order:1}
  .steps--3{grid-template-columns:minmax(0,1fr)}
  .steps--3 .c::after{display:none}
}
@media (max-width:560px){
  .coord .item{padding:15px 18px}
}