/*
 * Une mise en forme MINIMALE, et c'est deliberé.
 *
 * Ces widgets s'inserent dans le theme du loueur — ici Luxride, ailleurs autre
 * chose. Y imposer des couleurs, une typographie ou des arrondis produirait un
 * bloc qui detonne, et le premier geste de l'integrateur serait de les
 * defaire.
 *
 * On ne pose donc que la STRUCTURE : la grille, les espacements, ce qui est
 * cache. Les couleurs viennent de `currentColor` et des variables du theme
 * quand il en offre.
 */

.aisyspro-parc {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Le nombre de colonnes demande dans Elementor l'emporte au-dessus de 720 px.
   En dessous, la grille automatique reprend la main : trois colonnes sur un
   telephone donnent des vignettes illisibles. */
@media (min-width: 720px) {
  .aisyspro-parc[data-colonnes="1"] { grid-template-columns: 1fr; }
  .aisyspro-parc[data-colonnes="2"] { grid-template-columns: repeat(2, 1fr); }
  .aisyspro-parc[data-colonnes="3"] { grid-template-columns: repeat(3, 1fr); }
  .aisyspro-parc[data-colonnes="4"] { grid-template-columns: repeat(4, 1fr); }
}

.aisyspro-vehicule__image img {
  display: block;
  width: 100%;
  height: auto;
}

.aisyspro-vehicule__traits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
  opacity: 0.8;
}

.aisyspro-recherche__formulaire {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
}

.aisyspro-champ {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.aisyspro-champ input,
.aisyspro-champ select {
  width: 100%;
}

.aisyspro-etat:empty {
  display: none;
}

.aisyspro-resultats {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin-top: 1.5rem;
}

.aisyspro-offre {
  border: 1px solid currentColor;
  padding: 1rem;
}

/* Le choix se voit par un trait plus epais et non par une couleur : un theme
   sombre, un theme clair et un daltonien doivent tous distinguer la carte
   retenue. */
.aisyspro-offre.is-choisi {
  border-width: 3px;
}

.aisyspro-demande {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 1.5rem;
}

.aisyspro-demande h3 {
  grid-column: 1 / -1;
  margin: 0;
}

.aisyspro-avertissement {
  border-left: 3px solid currentColor;
  padding: 0.75rem 1rem;
  opacity: 0.85;
}

/* ── Le suivi d'une demande ──────────────────────────────────────────────── */

.aisyspro-suivi__liste {
  display: grid;
  gap: 0.25rem 1.5rem;
  grid-template-columns: max-content 1fr;
  margin: 0 0 1rem;
}

.aisyspro-suivi__liste dt {
  opacity: 0.7;
}

.aisyspro-suivi__liste dd {
  margin: 0;
  font-weight: 600;
}

/* L'echeance se distingue par un trait et par du gras, jamais par la seule
   couleur : c'est la seule information de la page qui demande d'agir
   maintenant, et elle doit se voir sur un theme sombre comme sur un theme
   clair, daltonien compris. */
.aisyspro-suivi__echeance {
  border-left: 3px solid currentColor;
  font-weight: 600;
  margin: 1rem 0 0;
  padding: 0.5rem 0.75rem;
}

.aisyspro-suivi__note {
  font-size: 0.875em;
  margin: 0.5rem 0 0;
  opacity: 0.75;
}

/* La liste passe a une colonne sous 480 px : deux colonnes y donnent des
   intitules coupes au milieu d'un mot. */
@media (max-width: 480px) {
  .aisyspro-suivi__liste {
    grid-template-columns: 1fr;
  }

  .aisyspro-suivi__liste dd {
    margin-bottom: 0.5rem;
  }
}