/* Site public — sections construites sur les tokens du design system (voir styles.css) */

body.ps-body { margin: 0; font-family: var(--font-sans); }

.ps-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(11, 10, 8, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(201, 162, 74, .18);
  padding: 16px var(--site-gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.ps-logo { display: inline-flex; align-items: center; text-decoration: none; }
.ps-logo-img { height: 34px; width: auto; display: block; }
.ps-logo em { color: var(--accent-gold); font-style: normal; }
.ps-nav { display: flex; gap: 28px; font-size: var(--text-body-sm); flex-wrap: wrap; }
.ps-nav a { color: var(--text-on-dark-secondary); text-decoration: none; }
.ps-nav a:hover, .ps-nav a.active { color: var(--accent-gold); }

/* Menu déroulant du header (sous-menus par thème) */
.ps-nav-item { position: relative; }
.ps-nav-item > .ps-nav-trigger {
  background: none; border: none; font: inherit; cursor: pointer;
  color: var(--text-on-dark-secondary); display: flex; align-items: center; gap: 4px; padding: 0;
}
.ps-nav-item > .ps-nav-trigger::after { content: "▾"; font-size: var(--text-nano); opacity: .7; }
.ps-nav-item:hover > .ps-nav-trigger, .ps-nav-item:focus-within > .ps-nav-trigger { color: var(--accent-gold); }
.ps-nav-dropdown {
  position: absolute; top: calc(100% + 14px); left: 0; z-index: 30;
  background: rgba(20, 18, 14, .86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(201, 162, 74, .18); border-radius: var(--radius-md);
  padding: 14px; min-width: 240px; box-shadow: 0 12px 32px rgba(0,0,0,.35);
  display: grid; grid-template-columns: 1fr; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.ps-nav-dropdown.ps-nav-dropdown--wide { grid-template-columns: 1fr 1fr; min-width: 420px; }
.ps-nav-item:hover .ps-nav-dropdown, .ps-nav-item:focus-within .ps-nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.ps-nav-dropdown a { display: block; padding: 7px 10px; border-radius: 6px; font-size: var(--text-2xs); color: var(--text-on-dark-secondary); text-decoration: none; white-space: nowrap; }
.ps-nav-dropdown a:hover { background: var(--cz-black-70); color: var(--accent-gold); }
.ps-nav-code { font-size: .78em; font-weight: 700; color: var(--cz-cobalt-100); letter-spacing: .02em; margin-left: 2px; }
.ps-nav-col { display: grid; gap: 2px; align-content: start; }
.ps-nav-col-title { font-size: var(--text-nano); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-on-dark-muted); padding: 7px 10px 4px; }
.ps-header-actions { display: flex; gap: 14px; align-items: center; }
.ps-header-actions a.tel { color: var(--text-on-dark-secondary); font-size: var(--text-body-sm); text-decoration: none; }
.ps-header-actions a.entreprises { color: var(--accent-gold); font-size: var(--text-body-sm); font-weight: 600; text-decoration: none; padding-right: 14px; border-right: 1px solid var(--border-dark); }
.ps-header-actions a.entreprises:hover { color: var(--accent-gold-hover); }

/* Bandeau réduit — page dédiée sans le grand menu (ex. formulaire de réservation) :
   juste le logo, un titre discret et le téléphone, pour que le client accède au
   formulaire tout de suite. */
.ps-header-minimal-title {
  flex: 1; text-align: center;
  color: var(--accent-gold); font-size: var(--text-2xs); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
}
@media (max-width: 600px) {
  .ps-header-minimal .ps-header-actions { width: auto; padding-top: 0; }
  .ps-header-minimal-title { order: 3; flex: 1 0 100%; text-align: center; margin-top: 4px; }
}

/* Bouton hamburger — masqué par défaut, affiché seulement sous 600px */
.ps-nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 32px; height: 32px; padding: 0; flex-direction: column; justify-content: center; gap: 5px;
}
.ps-nav-toggle span { display: block; width: 100%; height: 2px; background: var(--text-on-dark-primary); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.ps-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ps-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ps-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 600px) {
  .ps-header { padding: 14px var(--site-gutter); }
  .ps-nav-toggle { display: flex; }

  .ps-nav {
    display: none; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    background: var(--surface-dark-1); border-bottom: 1px solid var(--border-dark);
    padding: 8px 20px 16px; max-height: calc(100vh - 60px); overflow-y: auto;
  }
  .ps-nav.is-open { display: flex; }

  .ps-nav > a { padding: 12px 0; border-top: 1px solid var(--border-dark); }

  .ps-nav-item { width: 100%; }
  .ps-nav-item > .ps-nav-trigger { width: 100%; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--border-dark); }
  .ps-nav-item.is-open > .ps-nav-trigger::after { transform: rotate(180deg); }

  .ps-nav-dropdown, .ps-nav-dropdown.ps-nav-dropdown--wide {
    position: static; opacity: 1; visibility: visible; transform: none; transition: none;
    display: none; grid-template-columns: 1fr; min-width: 0; box-shadow: none;
    background: none; border: none; padding: 0 0 8px 12px;
  }
  .ps-nav-item.is-open .ps-nav-dropdown { display: grid; }
  .ps-nav-dropdown a { padding: 9px 0; }

  .ps-header-actions { width: 100%; justify-content: space-between; padding-top: 12px; }
}

.ps-hero { background: linear-gradient(180deg, var(--surface-dark-1) 0%, var(--surface-dark-2) 100%); color: var(--text-on-dark-primary); padding: 72px 32px 88px; }
.ps-hero-inner { max-width: 1200px; margin: 0 auto; display: flex; gap: 56px; align-items: flex-start; flex-wrap: wrap; }
.ps-hero-col { flex: 1 1 460px; }
.ps-eyebrow-dark { color: var(--accent-gold); font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; font-weight: 600; margin-bottom: 18px; }
.ps-hero-title { font-weight: 800; font-size: var(--text-display-hero); line-height: 1.08; letter-spacing: var(--tracking-tight); margin: 0 0 22px; }
/* H1 exclu du passage au bleu (validé par Hubert le 31/07 : "garder le H1 à or,
   le reste en bleu/terre cuite") — seul endroit du site qui référence encore
   l'or directement plutôt que le token --accent-gold (désormais bleu). */
.ps-hero-title em { font-family: var(--font-display-serif); font-style: italic; font-weight: 600; color: var(--cz-gold-100); }
.ps-hero-lead { font-size: var(--text-body-lg); line-height: var(--leading-relaxed); color: var(--text-on-dark-secondary); max-width: 480px; margin-bottom: 32px; }
.ps-hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ps-hero-stats { display: flex; gap: 28px; margin-top: 40px; flex-wrap: wrap; }
.ps-hero-stats span { font-size: var(--text-2xs); color: var(--text-on-dark-muted); }
.ps-hero-media {
  flex: 1 1 380px; min-height: 320px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--cz-black-70), var(--cz-black-90));
  border: 1px solid var(--border-dark); display: flex; align-items: center; justify-content: center;
  color: var(--text-on-dark-muted); font-size: var(--text-2xs); text-align: center; padding: 24px;
}
.ps-hero-media--photo { padding: 0; overflow: hidden; }
.ps-hero-media--photo img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }

/* ---- Variante plein écran (test 26/07) : grande photo en fond, comme le
   hero vidéo du site Business — même logique de dégradé pour garder le
   texte lisible, juste une image fixe au lieu d'une vidéo. ---- */
.ps-hero--photo {
  position: relative; overflow: hidden; min-height: 650px; display: flex; align-items: center; background: var(--surface-dark-1);
  /* La photo (position:absolute, ligne suivante) ignore déjà le padding de section —
     le mettre à 0 ici évite de le cumuler avec le padding-left de .ps-hero-inner
     juste en dessous (sinon le texte se retrouvait décalé par rapport au header). */
  padding-left: 0; padding-right: 0;
}
.ps-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ps-hero-photo--mirror { transform: scaleX(-1); }
.ps-hero--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(11,10,8,.82) 0%, rgba(11,10,8,.5) 50%, rgba(11,10,8,.18) 100%);
}
.ps-hero--photo .ps-hero-inner {
  position: relative; z-index: 2;
  margin: 0; max-width: none; padding-left: var(--site-gutter);
}
.ps-hero--photo .ps-hero-col { flex: 0 1 620px; }
@media (max-width: 760px) { .ps-hero--photo { min-height: 480px; } }

/* ---- Formulaire de réservation par espace (/r/{slug}) : carte sombre
   semi-transparente posée sur une photo paysage plein cadre — présentation
   demandée par Hubert le 03/08/2026 (reprend l'esprit très apprécié des
   réceptionnistes sur l'ancien formulaire en production), avec les
   composants de formulaire existants (.field/.input/.select/.textarea)
   simplement re-thémés en sombre plutôt que dupliqués. ---- */
.espace-hero { min-height: auto; align-items: flex-start; padding: 48px var(--site-gutter) 64px; }
.espace-card {
  position: relative; z-index: 2; margin: 0 auto; width: 100%; max-width: 980px;
  background: rgba(20, 18, 14, .8); border: 1px solid rgba(201, 162, 74, .25);
  border-radius: var(--radius-lg); padding: 36px 40px; color: var(--text-on-dark-primary);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.espace-card-header {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 28px; border-bottom: 1px solid rgba(201, 162, 74, .22);
}
.espace-card-title { font-family: var(--font-display-serif); font-size: var(--text-title-lg); font-weight: 600; margin: 0; color: var(--text-on-dark-primary); }
.espace-card-eyebrow { color: var(--accent-gold); font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; font-weight: 600; }

.espace-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.espace-form-col > .field-hint:first-child { margin-top: -8px; }
.espace-section-title {
  color: var(--accent-gold); font-size: var(--text-2xs); font-weight: 700;
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  margin: 0 0 20px; padding-bottom: 8px; border-bottom: 1px solid rgba(201, 162, 74, .18);
}
.espace-subtitle {
  color: var(--text-on-dark-muted); font-size: var(--text-2xs); font-weight: 700;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; margin: 0 0 14px;
}
.espace-form-actions { margin-top: 32px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.espace-card input[type="date"]::-webkit-calendar-picker-indicator,
.espace-card input[type="time"]::-webkit-calendar-picker-indicator,
.espace-card input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}
.btn-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent-gold); font-size: var(--text-2xs);
}
.btn-link:hover { color: var(--accent-gold-press); }
.bonus-popover-wrap { position: relative; display: inline-block; }
.bonus-popover {
  position: absolute; bottom: calc(100% + 10px); left: 0; width: 240px; z-index: 30;
  background: rgba(20, 18, 14, .97); border: 1px solid rgba(201, 162, 74, .3);
  border-radius: var(--radius-lg); padding: 18px; box-shadow: 0 16px 36px -8px rgba(0, 0, 0, .5);
}
.bonus-popover .field-hint { margin: 8px 0 12px; }
@media (max-width: 760px) { .bonus-popover { left: auto; right: 0; width: 220px; } }
@media (max-width: 760px) { .espace-form-grid { grid-template-columns: 1fr; gap: 8px; } .espace-card { padding: 28px 22px; } }

/* Re-thème sombre des composants de formulaire partagés, seulement à
   l'intérieur de la carte espace — jamais touché ailleurs (site/admin
   restent sur leur palette claire habituelle). */
.espace-card .field-label { color: var(--text-on-dark-muted); text-transform: uppercase; font-size: var(--text-caption); letter-spacing: .04em; }
/* Bleu dédié (pas un token du design system) : --status-info-fg est calibré
   pour fond clair (admin), illisible sur le fond sombre .espace-card. */
.espace-card .field-label-accent { color: #6ea8f0; }
.espace-card .field-hint { color: var(--text-on-dark-muted); }
.espace-card .field-hint a { color: var(--accent-gold); }
.espace-card .input, .espace-card .select, .espace-card .textarea {
  background: rgba(10, 10, 9, .5); border-color: rgba(201, 169, 106, .3); color: var(--text-on-dark-primary);
}
.espace-card .input::placeholder, .espace-card .textarea::placeholder { color: var(--text-on-dark-muted); opacity: .7; }
.espace-card select.select option { color: var(--text-on-light-primary); }
.espace-card .input:focus, .espace-card .select:focus, .espace-card .textarea:focus {
  border-color: var(--accent-gold); box-shadow: 0 0 0 3px rgba(201, 162, 74, .18);
}
.espace-card .checkbox-inline, .espace-card .checkbox, .espace-card .radio { color: var(--text-on-dark-secondary); }
/* Le dropdown d'autocomplétion garde son fond clair habituel (admin.css) —
   sans ce correctif il hérite du texte clair de .espace-card et devient
   illisible sur son propre fond blanc. */
.espace-card .client-dropdown { color: var(--text-on-light-primary); }
.espace-card .alert-danger { background: rgba(220, 80, 80, .14); border-color: rgba(220, 80, 80, .4); color: #f3b4b4; }

/* ---- Signature visual: hand-drawn route across Alsace (hero) ---- */
.ps-route-visual {
  flex: 1 1 380px; min-height: 380px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--cz-black-70), var(--cz-black-90));
  border: 1px solid var(--border-dark); position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: var(--space-8);
}
.ps-route-visual svg { width: 100%; height: 100%; max-width: 300px; }
.route-line {
  fill: none; stroke: var(--accent-gold); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 900; stroke-dashoffset: 900;
  animation: route-draw 2.4s var(--ease-standard) 0.2s forwards;
}
.route-point circle { fill: var(--cz-black-100); stroke: var(--accent-gold); stroke-width: 1.5; }
.route-point text { fill: var(--text-on-dark-muted); font-family: var(--font-sans); font-size: var(--text-nano); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.route-point { opacity: 0; animation: route-point-in var(--duration-slow) var(--ease-standard) forwards; }
.route-point:nth-of-type(1) { animation-delay: .4s; }
.route-point:nth-of-type(2) { animation-delay: 1s; }
.route-point:nth-of-type(3) { animation-delay: 1.6s; }
.route-point:nth-of-type(4) { animation-delay: 2.2s; }
.route-dot {
  fill: var(--accent-gold); opacity: 0;
  offset-path: path("M54,36 C132,64 18,150 96,182 C176,214 40,286 108,336");
  animation: route-dot-run 5s var(--ease-standard) 2.6s infinite, route-dot-fade 0.3s linear 2.6s forwards;
}
@keyframes route-draw { to { stroke-dashoffset: 0; } }
@keyframes route-point-in { to { opacity: 1; } }
@keyframes route-dot-run { to { offset-distance: 100%; } }
@keyframes route-dot-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .route-line { animation: none; stroke-dashoffset: 0; }
  .route-point { animation: none; opacity: 1; }
  .route-dot { animation: none; opacity: 0; }
}

/* ---- Service icons (replace emoji) ---- */
.ps-icon { width: 26px; height: 26px; margin-bottom: 12px; stroke: var(--accent-gold-press); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ps-bg-dark .ps-icon { stroke: var(--accent-gold); }
.card-hover { position: relative; }
.card-hover::before {
  content: ""; position: absolute; top: 0; left: var(--space-6); right: var(--space-6); height: 2px;
  background: var(--accent-gold); transform: scaleX(0); transform-origin: left;
  transition: transform var(--duration-base) var(--ease-standard);
}
.card-hover:hover::before { transform: scaleX(1); }

/* ---- Reveal on scroll ---- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > * { transition-delay: calc(var(--reveal-i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger.is-visible > * { transition: none; opacity: 1; transform: none; }
}

/* ---- Differentiators: asymmetric layout (no fake numbering) ---- */
.ps-showcase { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-16); align-items: center; }
.ps-showcase-quote { font-family: var(--font-display-serif); font-style: italic; font-weight: 600; font-size: var(--text-display-md); line-height: var(--leading-snug); color: var(--text-on-light-primary); }
.ps-showcase-quote em { color: var(--accent-gold-press); }
.ps-showcase-meta { margin-top: var(--space-5); font-size: var(--text-2xs); color: var(--text-on-light-muted); }
.ps-reasons { display: flex; flex-direction: column; }
.ps-reason { display: flex; gap: var(--space-5); padding: var(--space-5) 0; border-top: 1px solid var(--border-light); }
.ps-reason:first-child { border-top: none; }
.ps-reason-icon { flex: 0 0 auto; width: 22px; height: 22px; stroke: var(--accent-gold-press); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 3px; }
@media (max-width: 900px) { .ps-showcase { grid-template-columns: 1fr; gap: var(--space-8); } }

.ps-section { padding: 72px 32px; }
.ps-section-inner { max-width: 1200px; margin: 0 auto; }
.ps-bg-light-1 { background: var(--surface-light-1); }
.ps-bg-light-3 { background: var(--surface-light-3); }
.ps-bg-dark { background: var(--surface-dark-1); color: var(--text-on-dark-primary); }
.ps-eyebrow-light { color: var(--accent-gold-press); font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; font-weight: 600; margin-bottom: 12px; }
.ps-h2 { font-weight: 800; font-size: var(--text-display-md); margin: 0 0 36px; color: var(--cz-cobalt-100); }
.ps-h2 em { font-family: var(--font-display-serif); font-style: italic; font-weight: 600; color: var(--cz-copper-100); }
.ps-bg-dark .ps-h2 { color: var(--cz-cobalt-120); }
.ps-bg-dark .ps-h2 em { color: var(--cz-copper-120); }

.ps-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ps-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ps-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { .ps-grid-3, .ps-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ps-grid-2, .ps-grid-3, .ps-grid-4 { grid-template-columns: 1fr; } .ps-hero-title { font-size: 38px; } }

.ps-h3 { font-weight: 700; font-size: var(--text-title); margin: 0 0 12px; color: var(--text-on-light-primary); }
.ps-h4 { font-weight: 600; font-size: var(--text-body-lg); margin: 0 0 8px; color: var(--text-on-light-primary); }
.ps-bg-dark .ps-h3, .ps-bg-dark .ps-h4 { color: var(--text-on-dark-primary); }

.ps-content-text, .ps-section-text { font-size: var(--text-body-sm); line-height: var(--leading-relaxed); color: var(--text-on-light-secondary); margin-bottom: 16px; }
.ps-bg-dark .ps-content-text, .ps-bg-dark .ps-section-text { color: var(--text-on-dark-secondary); }
.ps-text-muted { color: var(--text-on-light-muted); font-size: var(--text-2xs); }
.ps-small { font-size: var(--text-2xs); }
.ps-section-footnote { font-size: var(--text-caption); color: var(--text-on-light-muted); margin-top: 12px; }
.ps-bg-dark .ps-section-footnote { color: var(--text-on-dark-muted); }

.ps-list { list-style: none; padding: 0; margin: 0 0 16px; }
.ps-list li { padding: 6px 0; font-size: var(--text-body-sm); color: var(--text-on-light-secondary); }
.ps-list-check { list-style: none; padding: 0; margin: 0 0 16px; }
.ps-list-check li { padding: 6px 0 6px 26px; position: relative; font-size: var(--text-body-sm); color: var(--text-on-light-secondary); }
.ps-list-check li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-gold-press); font-weight: 700; }
.ps-bg-dark .ps-list-check li::before { color: var(--accent-gold); }

.ps-table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: var(--text-body-sm); }
.ps-table th, .ps-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border-light); }
.ps-table th { color: var(--text-on-light-muted); font-weight: 600; text-transform: uppercase; font-size: var(--text-caption); letter-spacing: var(--tracking-wide); }

.ps-alert, .ps-alert-info { background: var(--surface-light-3); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 16px 20px; font-size: var(--text-body-sm); color: var(--text-on-light-secondary); margin-bottom: 20px; }
.ps-bg-white { background: var(--surface-light-2); }
.ps-bg-light-2 { background: var(--surface-light-2); }
.ps-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* ---- Barre d'estimation dans le hero (départ + destination, préremplie selon
   la page mais toujours modifiable) : verre dépoli discret sur la photo, réutilisée
   sur toutes les pages via partials/estimate-widget.blade.php — même moteur que
   le simulateur Business (EstimationController). --- */
.ps-estimatebar {
  margin-top: 28px; max-width: 640px;
  background: rgba(8, 7, 6, .4); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(245, 241, 232, .28); border-radius: 14px;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0; padding: 6px;
}
.ps-estimatebar .f { flex: 1; min-width: 160px; padding: 11px 16px; position: relative; }
.ps-estimatebar .f + .f { border-left: 1px solid rgba(245, 241, 232, .22); }
.ps-estimatebar .f.f-narrow { flex: 0 0 190px; min-width: 178px; }
.ps-estimatebar .f input {
  border: none; background: none; font: inherit; font-size: var(--text-body-sm);
  color: var(--text-on-dark-primary); width: 100%; outline: none; color-scheme: dark;
}
/* Repère visible au clavier (Tab) — l'outline était supprimé sans jamais être
   remplacé, un champ actif n'avait alors plus aucun signe visuel. */
.ps-estimatebar .f input:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: -2px;
}
/* Même correctif que côté Business : sur fond translucide (40%), le texte
   muet se noyait dans la photo derrière — éclairci pour rester lisible
   quelle que soit la photo. Signalé par Hubert le 28/07/2026. */
.ps-estimatebar .f input::placeholder { color: rgba(245, 241, 232, .78); }
/* Widget Mise à disposition (05/08) : même bandeau, mais un <select> heures
   au lieu d'un 3e champ adresse — reprend exactement le style du input pour
   rester visuellement identique. */
/* Dropdown "heures" custom (06/08/2026) : remplace le <select> natif, dont le
   menu déroulant système ignorait notre thème sombre selon navigateur/OS
   (options illisibles, fond blanc). Même liste stylée que l'autocomplétion
   d'adresse (.ps-autocomplete-list), entièrement sous notre contrôle. */
.ps-estimatebar .f-narrow .js-mad-heures-toggle {
  border: none; background: none; font: inherit; font-size: var(--text-body-sm);
  color: var(--text-on-dark-primary); width: 100%; outline: none; cursor: pointer;
  text-align: left; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ps-estimatebar .f-narrow .js-mad-heures-toggle::after {
  content: ""; width: 8px; height: 8px; flex: none;
  border-right: 2px solid rgba(245, 241, 232, .7); border-bottom: 2px solid rgba(245, 241, 232, .7);
  transform: rotate(45deg) translateY(-2px);
}
.ps-estimatebar .f-narrow .js-mad-heures-toggle:focus-visible {
  outline: 2px solid var(--accent-gold); outline-offset: 2px;
}
.ps-estimate-price { margin-top: 10px; font-size: var(--text-body-sm); color: var(--text-on-dark-primary); }
.ps-estimate-price strong { color: var(--accent-gold); }
.ps-estimatebar button {
  background: var(--accent-gold); color: var(--text-on-accent-cobalt, var(--cz-black-100, #1c1812)); border: none; border-radius: 10px;
  padding: 13px 24px; font-weight: 700; font-family: var(--font-sans); font-size: var(--text-body-sm);
  white-space: nowrap; cursor: pointer; margin-left: auto;
}
.ps-estimatebar button:disabled { opacity: .7; cursor: wait; }
.ps-estimate-error { margin-top: 10px; font-size: var(--text-2xs); color: var(--cz-cream-80, #dcd2bd); }
.ps-estimate-error a { color: var(--accent-gold); }
.ps-autocomplete-wrap { position: relative; }
.ps-autocomplete-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 10;
  background: var(--surface-dark-2); border: 1px solid var(--border-dark); border-radius: 10px;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .5); overflow: hidden;
}
.ps-autocomplete-item { padding: 10px 16px; font-size: var(--text-body-sm); color: var(--text-on-dark-primary); cursor: pointer; }
.ps-autocomplete-item:hover { background: var(--accent-gold-tint); color: var(--accent-gold); }
@media (max-width: 600px) {
  .ps-estimatebar { flex-direction: column; align-items: stretch; }
  .ps-estimatebar .f + .f { border-left: none; border-top: 1px solid rgba(245, 241, 232, .22); }
  /* En colonne, flex-basis s'applique à la hauteur (pas la largeur) : sans ce
     reset, le champ date héritait des 190px pensés pour la largeur en ligne
     et devenait démesurément haut. Signalé par Hubert le 30/07/2026. */
  .ps-estimatebar .f.f-narrow { flex-basis: auto; min-width: 0; }
  .ps-estimatebar button { width: 100%; margin-left: 0; }
}

/* ---- Effet de survol "slide" des boutons : protocole repris du site VTC
   SOMBRE (bible design, §2.2/2.3) — un fond qui glisse de gauche à droite
   au survol plutôt qu'un simple fondu de couleur. isolation:isolate est
   obligatoire (sans ça le ::before reste invisible sur un <button>). Scopé
   au site public (.ps-body) uniquement, ne touche pas l'admin ni Business. --- */
.ps-body .btn { position: relative; overflow: hidden; isolation: isolate; }
.ps-body .btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}
.ps-body .btn:hover::before { transform: scaleX(1); }
.ps-body .btn-primary {
  transition-property: box-shadow, transform;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><circle cx='14' cy='14' r='4' fill='%23c17a4f'/><circle cx='4' cy='24' r='2' fill='%23c17a4f' opacity='.5'/><circle cx='10' cy='20' r='2' fill='%23c17a4f' opacity='.7'/></svg>") 14 14, pointer;
}
.ps-body .btn-primary::before { background: var(--accent-gold-hover); }
.ps-body .btn-primary:hover:not(:disabled) { background: var(--accent-gold); }
.ps-body .btn-secondary { transition-property: box-shadow, transform; }
.ps-body .btn-secondary::before { background: var(--accent-gold-tint); }
.ps-body .btn-secondary:hover:not(:disabled) { border-color: var(--accent-gold); color: var(--accent-gold-press); }

/* ---- Bouton WhatsApp : protocole repris du site VTC SOMBRE (bible design,
   §2.4) — transparent au repos, le vert #25D366 n'apparaît qu'au survol sur
   le texte/l'icône, jamais en fond plein. Remplace le fond vert plein hérité
   de base.css (pensé pour l'admin) sur le site public uniquement. --- */
.btn-whatsapp {
  background: transparent; color: var(--text-on-dark-primary);
  border: 1px solid var(--border-dark); box-shadow: none;
}
.btn-whatsapp:hover:not(:disabled) {
  background: var(--cz-whatsapp); border-color: var(--cz-whatsapp);
  color: var(--cz-black-100, #1c1812);
  box-shadow: 0 4px 16px -4px rgba(37, 211, 102, .45); transform: translateY(-1px);
}
.btn-whatsapp svg { flex-shrink: 0; }
.btn-whatsapp:hover:not(:disabled) svg { fill: var(--cz-black-100, #1c1812) !important; }
/* Sur fond clair, le texte crème deviendrait invisible : bascule automatique
   en fond noir plutôt que le style inline manuel exigé par l'ancien protocole. */
.ps-bg-light-1 .btn-whatsapp, .ps-bg-light-2 .btn-whatsapp,
.ps-bg-light-3 .btn-whatsapp, .ps-bg-white .btn-whatsapp {
  background: var(--cz-black-100, #1c1812); border-color: transparent;
}

/* ---- Info strip : 3 faits pratiques regroupés dans UNE bande, séparés par un
   simple trait — au lieu de 3 cartes élevées qui se battent pour l'attention. --- */
.ps-info-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-light-2);
}
.ps-info-strip-item { padding: 28px 30px; border-left: 1px solid var(--border-light); }
.ps-info-strip-item:first-child { border-left: none; }
@media (max-width: 900px) {
  .ps-info-strip { grid-template-columns: 1fr; }
  .ps-info-strip-item { border-left: none; border-top: 1px solid var(--border-light); }
  .ps-info-strip-item:first-child { border-top: none; }
}

/* ---- Étapes numérotées : une vraie séquence (1→2→3→4), pas des cartes
   interchangeables. Ligne de connexion discrète derrière les puces sur desktop. --- */
.ps-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; }
.ps-steps::before {
  content: ""; position: absolute; top: 19px; left: calc(12.5% + 20px); right: calc(12.5% + 20px);
  height: 1px; background: var(--border-light); z-index: 0;
}
.ps-step { position: relative; z-index: 1; }
.ps-step-num {
  width: 38px; height: 38px; border-radius: 50%; background: var(--accent-gold);
  color: var(--text-on-accent-cobalt, var(--cz-black-100, #1c1812)); font-weight: 700; font-size: var(--text-body-md);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
@media (max-width: 900px) { .ps-steps { grid-template-columns: 1fr 1fr; } .ps-steps::before { display: none; } }
@media (max-width: 600px) { .ps-steps { grid-template-columns: 1fr; } }

/* ---- FAQ : question/réponse en liste, pas en cartes — plus lisible et ça
   n'a jamais besoin d'être de la même hauteur qu'une voisine. --- */
.ps-faq { display: flex; flex-direction: column; }
.ps-faq-item { padding: 20px 0; border-top: 1px solid var(--border-light); }
.ps-faq-item:first-child { border-top: none; }
.ps-faq-q { font-weight: 700; font-size: var(--text-body-md); color: var(--text-on-light-primary); margin-bottom: 8px; }
.ps-faq-a { margin: 0; font-size: var(--text-body-sm); color: var(--text-on-light-secondary); line-height: var(--leading-relaxed); }

/* ---- Recap "ce qui est inclus" : 2 colonnes de coches, pas une carte-liste
   perdue au milieu de cartes de tailles différentes. --- */
.ps-includes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
@media (max-width: 600px) { .ps-includes { grid-template-columns: 1fr; } }

.btn-outline, .btn-outline-primary { background: transparent; border: 1px solid var(--accent-gold-press); color: var(--accent-gold-press); }
.btn-outline:hover, .btn-outline-primary:hover { background: var(--accent-gold-tint); box-shadow: var(--shadow-gold-lift); transform: translateY(-1px); }
.btn-outline-light { background: transparent; border: 1px solid var(--border-dark); color: var(--text-on-dark-primary); }
.btn-outline-light:hover { border-color: var(--accent-gold); color: var(--accent-gold); box-shadow: 0 4px 16px -4px rgba(201, 162, 74, 0.3); transform: translateY(-1px); }

.card-body, .card-text { font-size: var(--text-body-sm); color: var(--text-on-light-secondary); line-height: var(--leading-normal); }
.card-meta { font-size: var(--text-caption); color: var(--text-on-light-muted); margin-top: 8px; text-transform: uppercase; letter-spacing: .03em; }
/* Ligne meta + badge signature (seul badge encore posé sur une carte sombre,
   volontairement rare) sur une même ligne plutôt qu'empilés. */
.card-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.card-meta-row .card-meta { margin-top: 0; }
/* Carte sombre : rythme régulier entre meta / titre / texte / liste / note —
   remplace les marges au coup par coup qui collaient les paragraphes en un
   seul bloc (repéré par Hubert le 15/08 : "des gros pâtés"). */
.card-dark .card-body { gap: 14px; }
.card-dark .card-body > * { margin-top: 0; margin-bottom: 0; }
.card-dark .ps-cta-actions { margin-top: 4px !important; }

/* Carte circuit avec photo en tête — la carte .card-dark garde son padding
   normal, la photo vit dans un cadre englobant qui porte le rayon/l'overflow
   pour ne rien casser sur les autres pages utilisant .card-dark seul
   (Hubert, 15/08 : les cartes 100% texte étaient le plus gros défaut). */
.circuit-card { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 2rem; }
.circuit-card .card-dark { border-radius: 0; margin-bottom: 0; }
.circuit-card-photo { display: block; width: 100%; height: 320px; object-fit: cover; }
/* Carte sombre : le texte doit rester clair. La règle générique .card-text
   ci-dessus (pensée pour une carte claire) passait après dans la feuille de
   style et regagnait à chaque fois — texte foncé sur fond foncé, illisible
   (repéré par Hubert le 27/07 sur Europa-Park). */
.card-dark .card-body, .card-dark .card-text, .card-dark .card-meta { color: var(--text-on-dark-secondary); }
.card-dark .card-title { color: var(--text-on-dark-primary); }
/* Même souci que ci-dessus, trouvé le 27/07 sur Circuits Découverte : listes à
   puces, badges et bouton "Demander un devis" à l'intérieur d'une carte sombre
   gardaient leurs couleurs pensées pour un fond clair (.badge-*, .btn-ghost),
   quasi invisibles une fois posés sur fond foncé. Les badges gardent leur
   teinte propre (or/bleu/orange) mais éclaircie pour rester lisibles. */
.card-dark li { color: var(--text-on-dark-secondary); }
.card-dark .btn-ghost { color: var(--text-on-dark-primary); border-color: rgba(250, 246, 236, .35); }
.card-dark .btn-ghost:hover:not(:disabled) { background: rgba(250, 246, 236, .12); color: var(--text-on-dark-primary); }
.card-dark .badge-gold { background: rgba(201, 162, 74, .28); color: #f0dba0; }
.card-dark .badge-info { background: rgba(74, 124, 158, .28); color: #bcd4e6; }
.card-dark .badge-warning { background: rgba(201, 138, 53, .28); color: #f3cf94; }

/* Bloc prix par circuit (Berline / Van) — repris de l'ancienne page WordPress
   "tout compris" (16/08). Van reste "sur devis" tant qu'Hubert n'a pas donné
   ses vrais chiffres (voir TarifService::vehiculeConfigure). */
.circuit-price { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-2) 0; }
.circuit-price-item { border: 1px solid rgba(250, 246, 236, .18); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); }
.circuit-price-label { display: block; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .03em; color: var(--text-on-dark-secondary); }
.circuit-price-value { font-size: var(--text-body-sm); font-weight: 700; color: var(--text-on-dark-primary); }
.circuit-price-value .circuit-price-note { font-weight: 400; opacity: .75; }
.circuit-price-item.is-tbd .circuit-price-value { opacity: .6; }

/* Programme détaillé, toujours visible (accordéon <details> retiré le 16/08 —
   Hubert : gain de place minime pour 3-4 lignes, forçait un clic inutile). */
.circuit-program { margin: var(--space-3) 0; }
.circuit-program-title { font-size: var(--text-caption); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-on-dark-secondary); margin-bottom: var(--space-2); }
.circuit-program-steps { list-style: none; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); border: 1px solid rgba(250, 246, 236, .22); border-radius: var(--radius-md); padding: var(--space-3); }
.circuit-program-steps li { display: flex; gap: var(--space-3); align-items: baseline; }
/* Fond plein (pas un fond teinté), texte clair sur le cobalt plutôt que
   --text-on-accent-cobalt (encre foncée) — préférence Hubert du 16/08 sur
   ces petites pastilles, à ne pas confondre avec les boutons/.card-badge qui
   gardent l'encre foncée validée le 15/08. */
.step-duration { flex: 0 0 auto; font-size: var(--text-2xs); font-weight: 700; color: var(--text-on-dark-primary); background: var(--accent-gold); border-radius: var(--radius-sm); padding: 3px 10px; white-space: nowrap; }

/* Badges "ce qui est inclus" — pastilles discrètes, pas de nouvelle couleur
   inventée (charte design du 19/07 : réutiliser les tokens existants). */
.circuit-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
.circuit-badge { font-size: var(--text-2xs); color: var(--text-on-dark-secondary); background: rgba(250, 246, 236, .08); border: 1px solid rgba(250, 246, 236, .16); border-radius: var(--radius-pill); padding: 4px 12px; }

/* Cartes de même hauteur dans une même rangée, quel que soit le texte : le
   badge/CTA en pied de carte reste toujours ancré en bas. a.card (carte-lien)
   doit être réaffirmé explicitement : sa règle de base.css (display:block,
   spécificité élément+classe) gagnerait sinon sur .card seul. */
.card, a.card { display: flex; flex-direction: column; height: 100%; }
.card-body { display: flex; flex-direction: column; flex: 1; }
.card-body > :last-child { margin-top: auto; }
.card-link { font-size: var(--text-2xs); font-weight: 600; color: var(--accent-gold-press); text-decoration: underline; }
.card-list { list-style: none; padding: 0; margin: 10px 0 0; }
.card-list li { padding: 4px 0 4px 20px; position: relative; font-size: var(--text-2xs); color: var(--text-on-light-secondary); }
.card-list li::before { content: "—"; position: absolute; left: 0; color: var(--accent-gold-press); }
.card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.card { position: relative; }
.card-highlight { border-color: var(--accent-gold); box-shadow: var(--shadow-gold-glow); }
/* Couleur repassée en clair sur cobalt le 16/08 — Hubert a vu le rendu clair
   sur bleu des pastilles de circuit-program/step-duration et l'a préféré au
   texte foncé du 15/08. .card-badge étant partagé sur 22 pages (transferts,
   circuits...), le changement s'applique partout. */
.card-badge { display: inline-block; background: var(--accent-gold); color: var(--text-on-dark-primary); font-size: var(--text-2xs); font-weight: 700; padding: 5px 14px; border-radius: var(--radius-pill); margin-bottom: 10px; }

.ps-diff-num { font-family: var(--font-display-serif); font-style: italic; font-size: var(--text-display-md); color: var(--accent-gold); margin-bottom: 10px; }
.ps-diff-title { font-weight: 600; font-size: var(--text-body-lg); margin-bottom: 8px; color: var(--text-on-light-primary); }
.ps-diff-body { font-size: var(--text-body-sm); color: var(--text-on-light-secondary); line-height: var(--leading-normal); }

.ps-cta { text-align: center; }
/* :not(.card-text) — un <p class="card-text"> peut vivre dans une carte claire
   .card-highlight à l'intérieur d'une section .ps-cta sombre (ex. cartes
   exemples de transfert) ; sans l'exclusion, ce texte de carte hérite de la
   couleur claire pensée pour le fond sombre et devient illisible sur fond
   blanc (repéré par Hubert le 16/08, section "Dernier jour en Alsace"). */
.ps-cta p:not(.card-text) { color: var(--text-on-dark-secondary); margin: 12px 0 28px; font-size: var(--text-body-md); }

/* ---- Quick nav pills (jump links, e.g. directory pages) ---- */
.ps-quicknav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.ps-quicknav a {
  font-size: var(--text-2xs); font-weight: 600; color: var(--text-on-dark-primary);
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-dark);
  border-radius: var(--radius-pill); padding: 9px 18px; text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.ps-quicknav a:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.ps-quicknav .n { opacity: 0.6; font-weight: 400; margin-left: 4px; }

/* ---- Directory grid (compact link tiles with a one-line description) ---- */
.directory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px; }
@media (max-width: 900px) { .directory-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .directory-grid { grid-template-columns: 1fr; } }
.directory-tile {
  display: block; background: var(--surface-light-2); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 16px 18px; text-decoration: none; color: inherit;
  transition: border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.directory-tile:hover { border-color: var(--accent-gold); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.directory-tile-title { font-size: var(--text-body-sm); font-weight: 600; color: var(--text-on-light-primary); margin-bottom: 4px; }
.directory-tile-desc { font-size: var(--text-2xs); line-height: 1.5; color: var(--text-on-light-secondary); }
.directory-section-anchor { scroll-margin-top: 96px; }

/* ---- Category header with icon ---- */
.directory-cat-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.directory-cat-header .ps-icon { margin-bottom: 0; width: 24px; height: 24px; }
.directory-cat-header .ps-eyebrow-light { margin-bottom: 0; }

/* ---- Featured destinations (photo cards) ---- */
.directory-featured { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 22px 0 26px; }
@media (max-width: 640px) { .directory-featured { grid-template-columns: 1fr; } }
.directory-featured-card {
  position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-light); background: var(--surface-light-2); text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.directory-featured-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.directory-featured-photo { position: relative; height: 190px; overflow: hidden; }
.directory-featured-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-standard); }
.directory-featured-card:hover .directory-featured-photo img { transform: scale(1.05); }
.directory-featured-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(15, 13, 10, .78) 100%); }
.directory-featured-title {
  position: absolute; left: 18px; bottom: 14px; right: 18px; color: #f4ecd8;
  font-family: var(--font-display-serif); font-size: var(--text-title-md); font-weight: 600; z-index: 1;
}
.directory-featured-desc { padding: 14px 18px 18px; font-size: var(--text-2xs); line-height: 1.5; color: var(--text-on-light-secondary); }

/* ---- Compact pill list (remaining links in a category) ---- */
.directory-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.directory-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-2xs); font-weight: 500;
  color: var(--text-on-light-primary); background: var(--surface-light-2); border: 1px solid var(--border-light);
  border-radius: var(--radius-pill); padding: 8px 16px; text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
}
.directory-pill svg { width: 11px; height: 11px; stroke: var(--accent-gold-press); flex-shrink: 0; }
.directory-pill:hover { border-color: var(--accent-gold); color: var(--accent-gold-press); background: var(--accent-gold-tint); }

.ps-footer { background: var(--surface-dark-1); color: var(--text-on-dark-secondary); padding: 56px 32px 32px; text-align: center; }
.ps-footer-brand { display: flex; flex-direction: column; align-items: center; margin-bottom: 44px; }
.ps-footer-brand-badge { width: 88px; height: 88px; margin-bottom: 14px; }
.ps-footer-brand-tagline { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--accent-gold); margin: 0; }
.ps-footer-inner {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 32px;
  max-width: 1200px; margin: 0 auto 40px; align-items: start; text-align: left;
}
.ps-footer-col-title { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--accent-gold); margin-bottom: 14px; font-weight: 600; }
.ps-footer-col div.item { font-size: var(--text-2xs); margin-bottom: 10px; break-inside: avoid; }
.ps-footer-col div.item a { color: var(--text-on-dark-secondary); }
.ps-footer-col div.item a:hover { color: var(--accent-gold); text-decoration: none; }
.ps-footer-col div.item.item--muted { color: var(--text-on-dark-muted); }
.ps-footer-bottom { border-top: 1px solid var(--border-dark); padding-top: 20px; text-align: center; font-size: var(--text-caption); color: var(--text-on-dark-muted); max-width: 1200px; margin: 0 auto; }
@media (max-width: 900px) { .ps-footer-inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ps-footer-inner { grid-template-columns: 1fr; } }