/*
 * Pro/Active — Lot E (location de matériel)
 * Styles propres au lot, chargés en plus de static/css/proactive.css.
 *
 * Ne redéfinit aucune variable ni aucune classe pa-* existante : ce fichier
 * n'ajoute que ce que la charte commune ne couvre pas encore (grille
 * catalogue, stepper 2 étapes, échelle de badges "espace client" — cf.
 * CHARTE-VOLT §2 "Deux systèmes de badges de statut").
 *
 * Intégration (lot I) : les écrans publics (catalogue, fiche) étendent
 * `templates/vitrine/base_vitrine.html`, les écrans connectés (louer,
 * contrat, confirmation, mes locations, détail) étendent
 * `templates/espace/base_espace.html` — ce fichier ne fournit donc plus de
 * nav propre (l'ancienne `.loc-nav` de secours a été retirée avec
 * `templates/location/_base.html`).
 */

/* Conteneur générique pleine largeur (repris de la charte, non encapsulé) */
.loc-conteneur {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.loc-page {
  padding-bottom: 80px;
}

.loc-hero {
  padding: 56px 0 30px;
}

.loc-hero__surtitre {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pa-accent);
  font-weight: 800;
  margin-bottom: 16px;
}

/* Grille du catalogue.
   NOTE : ne pas reprendre ici le pattern .pa-table (background sur le
   conteneur + gap, qui laisse voir des hairlines à travers l'espacement) —
   avec `auto-fill`, le nombre de pistes de colonnes dépend de la largeur
   disponible, pas du nombre d'articles : s'il reste une piste vide sur la
   dernière ligne, le fond du conteneur y transparaît et dessine une fausse
   carte vide. Chaque carte porte donc sa propre bordure. */
.loc-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.loc-carte {
  background: var(--pa-fond);
  border: 2px solid var(--pa-bordure-douce);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.loc-carte__photo {
  width: 100%;
  height: 170px;
  object-fit: cover;
  background: var(--pa-carte-alt);
}

.loc-carte__tarifs {
  display: grid;
  gap: 6px;
  font-size: 14px;
  color: var(--pa-texte-2);
}

.loc-carte__ligne-tarif {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.loc-carte__caution {
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--pa-bordure-douce);
  font-size: 13px;
  color: var(--pa-sourdine);
}

/* Fiche matériel */
.loc-fiche {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: start;
  margin-top: 30px;
}

@media (max-width: 900px) {
  .loc-fiche {
    grid-template-columns: 1fr;
  }
}

.loc-fiche__photo {
  width: 100%;
  height: 320px;
  object-fit: cover;
  background: var(--pa-carte-alt);
}

/* Stepper 2 étapes (formule/dates → contrat) */
.loc-etapes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 480px;
  margin: 28px 0;
}

.loc-etape {
  padding-top: 12px;
  border-top: 3px solid var(--pa-bordure-douce);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--pa-sourdine);
}

.loc-etape.is-active,
.loc-etape.is-faite {
  border-top-color: var(--pa-accent);
  color: var(--pa-blanc);
}

/* Contrat de location */
.loc-contrat {
  background: var(--pa-fond);
  border: 2px solid var(--pa-bordure-douce);
  padding: 26px 28px;
  max-height: 480px;
  overflow-y: auto;
  margin-bottom: 24px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--pa-texte-2);
}

.loc-contrat h3 {
  font-family: var(--pa-police-titre);
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--pa-blanc);
  text-transform: uppercase;
  margin: 22px 0 8px;
}

.loc-contrat h3:first-child {
  margin-top: 0;
}

.loc-contrat mark {
  background: rgba(255, 108, 2, 0.22);
  color: var(--pa-blanc);
  padding: 0 3px;
}

/* Récapitulatif (sidebar sticky, réutilise .pa-carte--panneau visuellement) */
.loc-recap {
  display: grid;
  gap: 10px;
  font-size: 14.5px;
  margin-top: 16px;
}

.loc-recap__ligne {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--pa-bordure-douce);
}

.loc-recap__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 108, 2, 0.3);
}

.loc-recap__total strong {
  font-family: var(--pa-police-titre);
  font-size: 24px;
  color: var(--pa-accent);
}

/* Échelle de badges "espace client" (orange plein = à retenir, cf. CHARTE-VOLT
   §2) — volontairement distincte des modificateurs .pa-badge--* existants,
   qui portent l'échelle admin. */
.loc-badge {
  display: inline-block;
  padding: 5px 10px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  white-space: nowrap;
}

.loc-badge--ok {
  background: var(--pa-accent);
  color: var(--pa-fond);
}

.loc-badge--attente {
  background: var(--pa-accent-tint-badge);
  color: var(--pa-erreur-texte);
}

.loc-badge--neutre {
  background: var(--pa-neutre-bg);
  color: var(--pa-neutre-texte);
}

.loc-badge--annule {
  background: var(--pa-danger-bg);
  color: var(--pa-danger-texte);
}

/* Listes "Mes locations" — colonnes spécifiques sur la base de .pa-table */
.loc-table {
  grid-template-columns: 1.6fr 1fr 1fr 0.8fr 0.8fr;
}

@media (max-width: 900px) {
  .loc-table {
    grid-template-columns: 1fr;
  }
}

.loc-groupe-titre {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pa-accent);
  font-weight: 800;
  margin: 34px 0 14px;
}

.loc-groupe-titre:first-child {
  margin-top: 0;
}

.loc-vide {
  color: var(--pa-sourdine);
  font-size: 14.5px;
  padding: 18px 0;
}

/* Fil d'Ariane discret utilisé sur la fiche matériel publique et les
   écrans connectés (louer / contrat / confirmation / mes locations), en
   complément de la nav réelle fournie par la coque de zone. */
.loc-fil {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pa-sourdine);
  font-weight: 800;
  margin-bottom: 14px;
}

.loc-fil a {
  color: var(--pa-sourdine);
}

.loc-fil a:hover {
  color: var(--pa-accent);
}