/* layout.css — Mise en page en colonnes (vue détail, formulaires) et compléments */

/* ===== VUE DÉTAIL : deux colonnes sur grand écran, pile ordonnée sur mobile =====
   Ordre mobile (style="order:N") : Caractéristiques, Mon avis, Description, Localisation,
   Conditions, Liens utiles, Topo & photos, Sorties — le même que le formulaire. */
.detail-layout { display: flex; flex-direction: column; }
.detail-col, .detail-duo { display: contents; }
@media (min-width: 1000px) {
  .detail-layout {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
  }
  .detail-col { display: flex; flex-direction: column; min-width: 0; }
  .detail-block { order: 0 !important; }
  /* Caractéristiques | Mon avis, repliés l'un sous l'autre si la colonne est trop étroite */
  .detail-duo { display: flex; flex-wrap: wrap; align-items: stretch; }
  .detail-duo > .detail-block { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
  .detail-duo > .detail-block > .info-card { flex: 1 1 auto; }
}

/* Bloc regroupant plusieurs cartes (Localisation, Conditions, Topo & photos) */
.detail-group > .info-card {
  margin: 0; padding: 0; border: 0; box-shadow: none; background: none; border-radius: 0;
}
.detail-group > .info-card + .info-card,
.detail-group > .detail-description + .info-card,
.detail-group > .info-card + .photo-strip,
.detail-group > .topo-display-list + .photo-strip {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border);
}
.detail-group > .info-card > h3 {
  font-size: .7rem; letter-spacing: .04em; color: var(--color-light); margin-bottom: 8px;
}
.detail-group > .map-card > h3 { display: none; }
.detail-group > .photo-strip { padding: 0; }
.detail-hero + .initiateur-warning-detail { margin-top: 12px; }
.detail-description { font-size: .85rem; color: var(--color-muted); line-height: 1.5; overflow-wrap: anywhere; }
.detail-group > .topo-display-list { margin: 0; }

/* ===== FORMULAIRES : même disposition que la vue détail ===== */
.form-layout { display: flex; flex-direction: column; }
.form-col { display: contents; }
@media (min-width: 1000px) {
  .form-layout--2 {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    column-gap: 12px; align-items: start;
  }
  .form-layout--2 > .form-section { grid-column: 1 / -1; }
  .form-layout--2 .form-col { display: flex; flex-direction: column; min-width: 0; }
}
.map-approx-note { font-size: .74rem; color: var(--color-muted); margin: 6px 0 8px; }