/* ============================================================
   page-contact.css
   ============================================================ */

/* Grille 2 colonnes : formulaire | coordonnees */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 58rem) {
  .contact-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--sp-7);
  }
}

/* Formulaire */
.form { display: flex; flex-direction: column; gap: var(--sp-4); }
.form .row { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 34rem) { .form .row { grid-template-columns: 1fr 1fr; } }

.field-group { display: flex; flex-direction: column; gap: 0.4rem; }
.field-group label { font-family: var(--font-head); font-weight: 600; font-size: var(--step--1); }
.field-group .req { color: #8a6e00; } /* 4.9:1 sur blanc (RGAA 3.2) */
.field-group input,
.field-group select,
.field-group textarea {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--field-border);
  padding: 0.8em 0.9em;
  border-radius: var(--radius);
  width: 100%;
}
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus { border-color: var(--ink); outline: 2px solid var(--yellow); outline-offset: 1px; }
.field-group textarea { min-height: 8rem; resize: vertical; }

.check { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--step--1); color: var(--ink-soft); }
.check input { margin-top: 0.25rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: #8a7d00; }
.form-note { font-size: var(--step--1); color: var(--ink-soft); }

/* Coordonnees */
.coords { display: flex; flex-direction: column; gap: var(--sp-4); }
.coord-block { border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.coord-block h3 {
  font-family: var(--font-head);
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--olive);
}
.coord-block p, .coord-block a { font-size: var(--step-1); color: var(--ink); text-decoration: none; }
.coord-block a:hover { text-decoration: underline; }

/* Cartes-sites (deux adresses) */
.site-card {
  border: 1px solid var(--line);
  border-left: 0.3rem solid var(--yellow);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.site-card__tag { align-self: flex-start; }
.site-card h3 { font-size: var(--step-1); }
.site-card p { font-size: var(--step-0); color: var(--ink); }
.site-card__line { color: var(--ink-soft) !important; font-size: var(--step--1) !important; }

/* Bloc référent handicap (Qualiopi indicateur 26) */
.referent-handicap {
  border: 1px solid var(--line);
  border-left: 0.3rem solid var(--olive, var(--yellow));
  background: var(--paper-2);
  padding: var(--sp-4);
  border-radius: 0.4rem;
}
.referent-handicap h3 {
  font-family: var(--font-head);
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}
.referent-handicap p { font-size: var(--step-0); color: var(--ink); margin: 0.4rem 0 0; }
.referent-handicap a { white-space: nowrap; }

/* Cartes OpenStreetMap : empilées sur mobile, côte à côte sur grand écran */
.maps-2 { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 52rem) { .maps-2 { grid-template-columns: repeat(3, 1fr); } }
/* min-width:0 : indispensable, sinon l'iframe garde sa largeur intrinsèque et déborde */
.map-figure { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.map-figure__cap {
  display: flex;
  flex-direction: column;   /* étiquette au-dessus de la rue → hauteur de légende constante, cartes alignées */
  align-items: flex-start;
  gap: 0.4rem;
  min-height: 3.4rem;       /* réserve 2 lignes pour que toutes les légendes aient la même hauteur */
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--ink);
}
.maps-2 .map { aspect-ratio: 16/10; }

/* Carte (iframe OpenStreetMap, ou placeholder) */
.map {
  position: relative;
  aspect-ratio: 21/9;
  min-height: 16rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background-color: var(--paper-3);
  background-image: repeating-linear-gradient(135deg, #e4e1d2 0 0.12rem, transparent 0.12rem 0.7rem);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__todo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: #8a8676;
  font-family: var(--font-head);
  padding: 1rem;
}
.map__todo .pin {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 0.22rem solid #b3af9a;
}
.map__todo .t { font-weight: 600; font-size: var(--step--1); color: var(--ink-soft); }
.map__todo .s { font-size: var(--step--1); }

/* ============================================================
   Leaflet — cartes auto-hébergées au style CERPE
   ============================================================ */
/* Quand Leaflet prend la main, on annule le centrage flex du placeholder */
/* isolation: piège les z-index internes de Leaflet → la carte reste sous le header (sticky) en scrollant */
.map.leaflet-container { display: block; background: var(--paper-3); isolation: isolate; }

/* Marqueur charte : pin jaune cerclé d'encre (pointe = le lieu) */
.cerpe-marker { background: none; border: 0; }
.cerpe-marker__pin {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 auto;
  background: var(--yellow);
  border: 0.18rem solid var(--ink);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, .35);
}

/* Contrôles de zoom aux couleurs du site (encre, coins droits) */
.leaflet-bar { border: 0; border-radius: 0; box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, .25); }
.leaflet-bar a,
.leaflet-bar a:first-child,
.leaflet-bar a:last-child {
  background: var(--ink); color: #fff; border-radius: 0;
  border-bottom: 1px solid #4a4838; font-weight: 700;
}
.leaflet-bar a:hover { background: var(--olive); color: #fff; }

/* Attribution discrète (obligatoire OSM, mais minimale) */
.leaflet-control-attribution { font-size: 0.68rem; background: rgba(255, 255, 255, .85); }