/* Page Halte du Richelieu : styles propres à la page, tous sous .hr (style.css du site reste inchangé) */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

.hr {
  --navy: #183b68;
  --navy-deep: #0f2747;
  --gold: #f8a916;
  --light: #edf0f7;
  --line: #c9ccd2;
  --muted: #55627a;
  color: var(--navy-deep);
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
}
.hr *, .hr *::before, .hr *::after { box-sizing: border-box; }
.hr p { margin: 0; }
.hr figure { margin: 0; }
.hr img { display: block; max-width: 100%; height: auto; }
.hr-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Boutons (même forme que les boutons des fiches de l'accueil) */
.hr-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.hr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 10px 22px; border-radius: 0.5rem;
  font-weight: 600; font-size: 16px; text-decoration: none;
  background: var(--navy); color: #fff; border: 1px solid var(--navy);
  transition: background-color .2s, color .2s, border-color .2s;
}
.hr-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
.hr-btn.alt { background: transparent; color: var(--navy); }
.hr-btn.alt:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.hr-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* En-tête de page : texte à gauche, photo coupée net à droite */
.hr-hero { display: grid; grid-template-columns: minmax(0, 1fr); background: #fff; }
.hr-hero-txt { padding: 40px 24px 36px; }
.hr-kicker { font-weight: 600; font-size: 15px; color: var(--muted); margin-bottom: 12px !important; }
.hr h1 {
  font-family: 'Bebas Neue', sans-serif; font-weight: 400;
  font-size: clamp(52px, 7vw, 92px); line-height: .95; letter-spacing: 1px;
  color: var(--navy); margin: 0 0 20px;
}
.hr-lead { font-size: 19px; max-width: 32em; }
.hr-hero .hr-btns { margin-top: 28px; }
.hr-hero-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Sections : titres repris du site (Bebas Neue marine, filet or) */
.hr-sec { padding: 0 0 64px; }
.hr-sec.grey { background: var(--light); }
.hr-sec > h2 { margin-bottom: 40px; }
.hr-intro { text-align: center; color: var(--muted); margin: 0 auto 28px !important; }

/* Locaux disponibles */
.hr-spaces { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.hr-space { background: #fff; padding: 32px; border-top: 4px solid var(--navy); }
.hr-space.now { border-top-color: var(--gold); }
.hr-tag { font-weight: 700; font-size: 15px; color: var(--muted); }
.hr-size {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(44px, 5.5vw, 64px);
  line-height: 1; color: var(--navy); margin: 12px 0 10px !important;
}
.hr-use { font-weight: 600; font-size: 18px; }
.hr-note { color: var(--muted); margin-top: 8px !important; }

/* Enseignes déjà ouvertes : grille à filets fins */
.hr-tenants {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.hr-tenants li {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 96px; padding: 16px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: 'Bebas Neue', sans-serif; font-size: 28px; line-height: 1.1; color: var(--navy);
}
.hr-tenants li.you { background: var(--navy); }
.hr-tenants li.you a { color: #fff; text-decoration: none; font-size: 24px; }
.hr-tenants li.you:hover { background: var(--gold); }
.hr-tenants li.you:hover a { color: var(--navy-deep); }

/* Emplacement */
.hr-loc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.hr-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.hr-list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.hr-maps { margin-top: 24px !important; }
.hr figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }

/* Photos */
.hr-gal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.hr-gal img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hr-gal figure:first-child img { object-position: 50% 15%; }

/* Contact */
.hr-contact { background: var(--navy); color: #fff; padding: 8px 0 64px; }
.hr .hr-contact h2 { color: #fff; }
.hr-person { text-align: center; margin: 36px 0 28px; }
.hr-name { font-family: 'Bebas Neue', sans-serif; font-size: 44px; line-height: 1; margin-bottom: 8px !important; }
.hr-contact .hr-btns { justify-content: center; }
.hr-btn.gold { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
.hr-btn.gold:hover { background: #fff; border-color: #fff; }
.hr-btn.line { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
.hr-btn.line:hover { background: #fff; border-color: #fff; color: var(--navy-deep); }

@media (min-width: 700px) {
  .hr-tenants { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hr-spaces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-gal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .hr-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 540px; }
  .hr-hero-txt { padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; }
  .hr-hero-img img { height: 100%; aspect-ratio: auto; }
  .hr-loc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
@media (prefers-reduced-motion: reduce) { .hr-btn { transition: none; } }