/*
 * 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 (cartes photo
 * du matériel, pastilles de prix, étapes en photos, stepper 2 étapes, échelle
 * de badges "espace client" — cf. CHARTE-VOLT §2 "Deux systèmes de badges de
 * statut"). Refonte V3 du 19/10/2026 : voir le bloc « V3 » plus bas.
 *
 * 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`).
 */

/* ==========================================================================
   V3 (19/10/2026) — catalogue, fiche, étapes, formulaire de début.
   Pensé téléphone d'abord (390 px) : on empile, aucune carte coupée, des cibles
   tactiles d'au moins 44 px. Aucun border-radius (charte). Les apparitions
   (data-anim) ne masquent rien sans JS, cf. static/js/animations.js.
   ========================================================================== */

/* Bandeau de /location-materiel/ : sur téléphone, `.vt-hero` (vitrine.css) prend 78 % de la
   hauteur d'écran, soit un écran entier pour un titre. Ici le bandeau reste court : la première
   grande carte photo se devine dès l'arrivée, le bouton est déjà là. */
@media (max-width: 900px) {
  .vt-hero.loc-hero {
    min-height: 340px;
  }

  .vt-hero.loc-hero .vt-hero__contenu {
    padding-block: 44px 40px;
  }
}

.vt-hero.loc-hero .vt-hero__actions {
  margin-top: 22px;
}

.loc-livraison {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.loc-entete {
  padding-block: 40px 24px;
}

.loc-entete .pa-titre {
  margin-top: 10px;
  font-size: clamp(34px, 6vw, 64px);
}

.loc-catalogue {
  padding-bottom: 56px;
}

.loc-pile {
  display: grid;
  gap: 28px;
}

.loc-mention {
  margin-top: 18px;
}

/* --- Grande carte photo d'un matériel -------------------------------------- */

.loc-mat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--pa-panneau);
  border: 1px solid var(--pa-bordure-douce);
}

.loc-mat__media,
.loc-fiche__media,
.loc-louer__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--pa-carte-alt);
}

.loc-mat__lien-photo {
  position: absolute;
  inset: 0;
  display: block;
}

.loc-visuel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Matériel sans visuel propre (_visuel.html) : un cadre sobre à son nom, jamais une photo d'autre chose. */
.loc-visuel--vide {
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(135deg, var(--pa-carte-alt), var(--pa-panneau));
  border-bottom: 3px solid var(--pa-accent);
}

.loc-visuel__nom {
  font-family: var(--pa-police-titre);
  font-size: clamp(24px, 5vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  color: var(--pa-texte);
  overflow-wrap: anywhere;
}

.loc-etiquette {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 6px 12px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  background: rgba(1, 26, 47, 0.82);
  color: var(--pa-texte-2);
}

.loc-mat__bientot {
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px 14px;
}

.loc-mat__corps {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 22px 20px 24px;
  min-width: 0;
}

.loc-mat__titre {
  margin: 0;
  font-family: var(--pa-police-titre);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1;
  font-size: clamp(30px, 6vw, 44px);
  color: var(--pa-blanc);
}

.loc-mat__titre a {
  color: inherit;
}

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

.loc-mat__desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--pa-texte-2);
}

.loc-mat__action {
  margin-top: 4px;
}

/* --- Prix par durée, en pastilles ------------------------------------------ */

.loc-pastilles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.loc-pastille {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 60px;
  padding: 10px 14px;
  background: var(--pa-carte-alt);
  border: 1px solid var(--pa-bordure-douce);
}

.loc-pastille__duree,
.loc-choix__duree {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--pa-texte-3);
}

.loc-pastille__prix,
.loc-choix__prix {
  font-family: var(--pa-police-titre);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  color: var(--pa-blanc);
  overflow-wrap: anywhere;
}

/* --- Caution : un bloc à part, toujours au même endroit -------------------- */

.loc-caution {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 14px;
  padding: 10px 16px 12px;
  background: rgba(255, 108, 2, 0.18);
  border-left: 4px solid var(--pa-accent);
}

.loc-caution__label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--pa-accent);
}

.loc-caution__montant {
  font-family: var(--pa-police-titre);
  font-weight: 400;
  font-size: 22px;
  color: var(--pa-blanc);
}

.loc-caution__note {
  flex-basis: 100%;
  font-size: 14px;
  color: var(--pa-texte-2);
}

/* --- Comment ça marche : 3 étapes en photos -------------------------------- */

.loc-etapes-photo {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.loc-etape-photo {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  background: var(--pa-panneau);
  border: 1px solid var(--pa-bordure-douce);
}

.loc-etape-photo__media {
  position: relative;
  min-height: 128px;
  overflow: hidden;
  background: var(--pa-carte-alt);
}

.loc-etape-photo__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loc-etape-photo__num {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pa-accent);
  color: var(--pa-fond);
  font-family: var(--pa-police-titre);
  font-size: 24px;
  line-height: 1;
}

.loc-etape-photo__texte {
  align-self: center;
  padding: 16px 18px;
  min-width: 0;
}

.loc-etape-photo__titre {
  margin: 0 0 6px;
  font-family: var(--pa-police-titre);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: 20px;
  color: var(--pa-blanc);
}

.loc-etape-photo__texte p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--pa-texte-2);
}

/* --- Fiche matériel -------------------------------------------------------- */

.loc-fiche-page {
  padding-block: 28px 64px;
}

.loc-fiche {
  display: grid;
  gap: 18px;
}

/* Sur téléphone la photo de la fiche est plus basse (16/9) : le bouton « Louer » doit rester dans
   le premier écran, sans défiler. */
.loc-fiche__media {
  aspect-ratio: 16 / 9;
}

.loc-fiche__panneau {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

.loc-fiche__titre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-size: clamp(32px, 6vw, 56px);
}

.loc-fiche__action {
  margin-top: 2px;
}

/* --- Étape 1 de la location : formule + début ------------------------------ */

.loc-louer {
  display: grid;
  gap: 14px;
  max-width: 1000px;
}

/* Téléphone : un bandeau photo pleine largeur, bas (QA 19/10 : l'image 16:9 plafonnée à 150 px ne
   prenait que les 3/4 de la largeur et le bouton tombait sous l'écran). */
.loc-louer__media {
  aspect-ratio: auto;
  height: 112px;
}

.loc-louer__formulaire {
  min-width: 0;
}

.loc-choix {
  border: 0;
  margin: 16px 0 0;
  padding: 0;
  min-width: 0;
}

.loc-choix__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.loc-choix__option {
  position: relative;
  display: block;
  cursor: pointer;
}

.loc-choix__option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.loc-choix__corps {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 64px;
  padding: 12px 14px;
  background: var(--pa-fond);
  border: 2px solid var(--pa-bordure);
}

.loc-choix__option:hover .loc-choix__corps {
  border-color: var(--pa-accent);
}

.loc-choix__option input:checked + .loc-choix__corps {
  border-color: var(--pa-accent);
  background: var(--pa-accent-tint);
}

.loc-choix__option input:focus-visible + .loc-choix__corps {
  outline: 2px solid var(--pa-accent);
  outline-offset: 2px;
}

.loc-champ-date {
  margin-top: 16px;
}

.loc-retour {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--pa-texte-2);
}

.loc-retour strong {
  color: var(--pa-blanc);
}

.loc-louer__action {
  margin-top: 24px;
}

/* Créneaux libres : deviennent des boutons quand le script tourne (location.js). */
.loc-creneaux li.loc-creneau-actif {
  cursor: pointer;
  min-height: 44px;
  padding-block: 10px;
}

.loc-creneaux li.loc-creneau-actif:hover,
.loc-creneaux li.loc-creneau-actif:focus-visible {
  color: var(--pa-accent);
}

/* --- Grand écran ----------------------------------------------------------- */

@media (min-width: 560px) {
  .loc-pastilles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .loc-choix__liste {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Téléphone et tablette (QA 19/10) : la carte 4:3 repoussait le premier « Louer » du catalogue sous
   l'écran (y 835 à 390 px), et le bouton de la fiche à la limite basse sur tablette. Photo plus basse. */
@media (max-width: 899px) {
  .loc-mat__media {
    aspect-ratio: 16 / 9;
  }

  .loc-entete {
    padding-block: 24px 18px;
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  .loc-fiche__media {
    aspect-ratio: 2 / 1;
  }
}

@media (min-width: 900px) {
  .loc-pile {
    gap: 36px;
  }

  .loc-mat {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }

  .loc-mat__media {
    aspect-ratio: auto;
    min-height: 440px;
  }

  .loc-mat:nth-child(even) .loc-mat__media {
    order: 2;
  }

  .loc-mat__corps {
    align-content: center;
    padding: 40px 44px;
  }

  .loc-pastilles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loc-pastille__prix {
    font-size: 26px;
  }

  .loc-etapes-photo {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .loc-etape-photo {
    grid-template-columns: minmax(0, 1fr);
  }

  .loc-etape-photo__media {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  .loc-etape-photo__texte {
    padding: 22px 24px 26px;
  }

  .loc-etape-photo__titre {
    font-size: 24px;
  }

  .loc-fiche {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }

  .loc-fiche__media {
    aspect-ratio: 4 / 3;
  }

  .loc-louer {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 40px;
    align-items: start;
  }

  .loc-louer__media {
    aspect-ratio: 4 / 3;
    height: auto;
  }

  .loc-choix__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Zoom lent au survol des photos (jamais de reflet qui balaie) — pas de
   mouvement si le visiteur l'a demandé. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .loc-visuel,
  .loc-etape-photo__media img {
    transition: transform 0.7s ease;
  }

  .loc-mat:hover .loc-visuel,
  .loc-etape-photo:hover .loc-etape-photo__media img {
    transform: scale(1.05);
  }
}

/* Stepper 2 étapes (formule/dates → contrat) */
.loc-etapes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 480px;
  margin: 18px 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);
}

/* Contrat (templates/location/contrat.html, hors de ce lot) : sa grille en style en ligne
   « 0.68fr 0.32fr » et sa rangée de boutons débordaient à 390 px (scrollWidth 569, QA 19/10).
   Repli en une colonne sur téléphone, sans toucher au gabarit ; à reprendre dans le gabarit
   par son propriétaire (classes au lieu du style en ligne), puis supprimer ce bloc. */
@media (max-width: 760px) {
  div:has(> div > .loc-contrat) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  form div:has(> .pa-btn-secondaire + button.pa-btn) {
    flex-wrap: wrap;
  }

  form div:has(> .pa-btn-secondaire + button.pa-btn) > button.pa-btn {
    width: 100% !important;
  }
}