/* 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 var(--cz-gold-line);
  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; }
/* « Mon logo » d'un collègue : format libre, tenu dans la même hauteur que le logo d'Hubert, un peu plus haut pour rester lisible. */
.ps-logo-img--installation { height: auto; max-height: 48px; max-width: 200px; object-fit: contain; }
/* Installation sans logo (LOGO_MARQUE=false) : le nom commercial, même hauteur que le logo. */
.ps-logo-texte { font-family: var(--font-display-serif); font-weight: 600; font-size: var(--text-title-lg); line-height: 34px; color: var(--cz-gold-100); }
.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 var(--cz-gold-line); 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); }

/* Rangee de badges posee sous un bloc de contenu (fiches circuit, portage).
   Elle empruntait .ps-header-actions, la classe du MENU du site : sous 900 px
   celle-ci passe en width:100% + justify-content:space-between, ce qui ecartait
   les badges d'un bord a l'autre de l'ecran sur telephone. Classe a elle
   (13/09/2026) : meme rendu sur ordinateur, plus de fuite du menu. */
.ps-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }

/* 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 {
  margin: 0; font-family: inherit; line-height: inherit;
  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; }
}

/* Sélecteur de langue (07/10/2026) — réutilise le menu déroulant du header.
   Code de langue en petites capitales, séparé par un filet ; aucun drapeau. */
.ps-lang { padding-left: 14px; border-left: 1px solid var(--border-dark); }
.ps-lang > .ps-lang-trigger { font-size: var(--text-2xs); font-weight: 600; letter-spacing: .14em; }
.ps-lang-dropdown { left: auto; right: 0; min-width: 168px; padding: 8px; }
.ps-lang-dropdown a { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.ps-lang-dropdown a.active { color: var(--accent-gold); }
.ps-lang-code { font-size: var(--text-nano); letter-spacing: .12em; color: var(--text-on-dark-muted); }
.ps-lang-dropdown a.active .ps-lang-code { color: inherit; }

@media (max-width: 600px) {
  /* Le sélecteur reste dans la barre (pas dans le menu replié) : on garde
     un menu flottant, ouvert au toucher (js/site.js). */
  .ps-lang { width: auto; }
  .ps-lang > .ps-lang-trigger { width: auto; padding: 0; border-top: none; }
  .ps-lang .ps-lang-dropdown {
    position: absolute; top: calc(100% + 12px); right: 0; min-width: 168px;
    background: var(--surface-dark-1); border: 1px solid var(--cz-gold-line);
    border-radius: var(--radius-md); padding: 8px; box-shadow: 0 12px 32px rgba(0,0,0,.35);
  }
  .ps-lang .ps-lang-dropdown a { padding: 9px 10px; }
}

.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 {
  /* overflow:hidden retiré (02/10/2026) : il rognait les listes déroulantes de
     la barre d'estimation (heures de la Mise à disposition : seulement 1 à 4
     visibles sur téléphone, suggestions d'adresse) dès qu'elles dépassaient
     le bas du hero — même bug que .b-hero corrigé le 06/08. Photo et dégradé
     sont dimensionnés par inset:0, rien ne dépend de ce clip. */
  position: relative; 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); }
/* Point de focalisation des photos d'en-tête. Le recadrage automatique vise le
   centre : sur un téléphone (écran en hauteur) il coupe les côtés et peut
   retirer le sujet (locomotive, flèche d'église, voyageurs...). Une ligne par
   photo, repérée par son nom de fichier — aucune page à modifier. Seul l'axe
   horizontal compte : sur ordinateur la photo remplit la largeur. Une nouvelle
   photo d'en-tête dont le sujet n'est pas au centre s'ajoute ici (04/10/2026).
   Hors liste : obernai et mise-à-disposition (réglés dans leur page), mariages (miroir). */
.ps-hero-photo[src$="/images/business/accueil-delegation.webp"] { object-position: 38% 50%; }
.ps-hero-photo[src$="/images/hero/heiligenstein.webp"] { object-position: 68% 50%; }
.ps-hero-photo[src$="/images/hero/blienschwiller.webp"] { object-position: 46% 50%; }
.ps-hero-photo[src$="/images/hero/champ-du-feu.webp"] { object-position: 37% 50%; }
.ps-hero-photo[src$="/images/hero/colmar-transfert.webp"] { object-position: 55% 50%; }
.ps-hero-photo[src$="/images/hero/dambach.webp"] { object-position: 10% 50%; }
.ps-hero-photo[src$="/images/hero/eguisheim.webp"] { object-position: 60% 50%; }
.ps-hero-photo[src$="/images/hero/haut-koenigsbourg.webp"] { object-position: 45% 50%; }
.ps-hero-photo[src$="/images/hero/kaysersberg-transfert.webp"] { object-position: 40% 50%; }
.ps-hero-photo[src$="/images/hero/molsheim.webp"] { object-position: 70% 50%; }
.ps-hero-photo[src$="/images/hero/mont-sainte-odile-drone.webp"] { object-position: 35% 50%; }
.ps-hero-photo[src$="/images/hero/munster.webp"] { object-position: 35% 50%; }
.ps-hero-photo[src$="/images/hero/obernai-noel.webp"] { object-position: 60% 50%; }
.ps-hero-photo[src$="/images/hero/riquewihr-ruelle.webp"] { object-position: 70% 50%; }
.ps-hero-photo[src$="/images/hero/roppenheim.webp"] { object-position: 78% 50%; }
.ps-hero-photo[src$="/images/hero/selestat.webp"] { object-position: 70% 50%; }
.ps-hero-photo[src$="/images/hero/strasbourg-ponts-couverts.webp"] { object-position: 62% 50%; }
.ps-hero-photo[src$="/images/lieux/aeroport-baden-baden.webp"] { object-position: 70% 50%; }
.ps-hero-photo[src$="/images/lieux/aeroport-strasbourg.webp"] { object-position: 75% 50%; }
.ps-hero-photo[src$="/images/lieux/aeroport-stuttgart.webp"] { object-position: 60% 50%; }
.ps-hero-photo[src$="/images/lieux/aeroport-zurich.webp"] { object-position: 65% 50%; }
.ps-hero-photo[src$="/images/lieux/chauffeur-struthof.webp"] { object-position: 3% 50%; }
.ps-hero-photo[src$="/images/lieux/transfert-aeroports-gares.webp"] { object-position: 84% 50%; }
.ps-hero-photo[src$="/images/lieux/transfert-bale-mulhouse-aeroport.webp"] { object-position: 45% 50%; }
.ps-hero-photo[src$="/images/lieux/transfert-frankfurt.webp"] { object-position: 35% 50%; }
.ps-hero-photo[src$="/images/lieux/transport-bagages.webp"] { object-position: 55% 50%; }
.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; } }

/* ---- Variante centrée (13/09/2026) : une colonne unique au milieu, tout
   aligné au centre. Utilisée par la page 404, où la même mise en page était
   posée en six style="..." dispersés sur six éléments. Un seul modificateur
   sur la <section> porte la variante entière : réutilisable tel quel pour
   toute page d'état (page vide, message de confirmation) sans rien recopier. ---- */
.ps-hero--centre .ps-hero-inner { justify-content: center; text-align: center; }
.ps-hero--centre .ps-hero-col { flex: 1 1 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
.ps-hero--centre .ps-eyebrow-dark { justify-content: center; }
.ps-hero--centre .ps-hero-lead { margin-left: auto; margin-right: auto; }
.ps-hero--centre .ps-hero-actions { justify-content: center; }

/* ---- 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 var(--cz-gold-line);
}
.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 var(--cz-gold-line);
}
.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; }
/* Colonnes etroites des pages "formulaire" (reservation en ligne, suivi de
   reservation). Remplacent des style="max-width:..." poses directement dans
   le HTML (02/09/2026) : la charte du projet interdit le style inline, un
   ajustement ecrit a la main devenant vite une incoherence entre deux pages. */
.ps-section-inner--form { max-width: 720px; }
.ps-section-inner--suivi { max-width: 640px; }
/* Suite du meme chantier (13/09/2026), pour les quatre pages de configurateur.
   --configurateur : le formulaire a etapes, plus large que --form car il aligne
   plusieurs champs sur une ligne. --message : la page de confirmation, ou tout
   est centre (titre, texte, bouton de retour) ; meme largeur que --suivi mais
   un role different, d'ou une classe a part plutot qu'un alias. */
.ps-section-inner--configurateur { max-width: 960px; }
.ps-section-inner--message { max-width: 640px; text-align: center; }
/* Une carte posee dans un bloc centre garde son contenu aligne a gauche :
   un recapitulatif en liste ne se lit pas centre. */
.card--aligne-gauche { text-align: left; }
/* Note collee sous un champ de formulaire (se combine a .ps-small .ps-text-muted). */
.ps-note-champ { margin-top: 4px; }
/* Libelle d'etape dans les recapitulatifs construits en JS : occupe la place
   restante de sa ligne, la duree ou le prix restant cales a droite. */
.ps-etape-libelle { flex: 1; }
/* Respiration a l'interieur d'une section, en DEUX crans seulement (13/09/2026).
   --- .ps-bloc : un sous-ensemble complet (une grille, un groupe titre + texte)
       detache de ce qui precede.
   --- .ps-suite : un paragraphe ou une carte qui prolonge le bloc juste au-dessus.
   Ces deux classes remplacent les margin-top ecrits a la main sur /vtc-colmar et
   /chauffeur-colmar-petite-venise. Un paragraphe y portait 1.5rem la ou ses
   jumeaux portaient 1rem, pour exactement le meme role : ramene au meme cran. */
.ps-bloc { margin-top: 2rem; }
.ps-suite { margin-top: 1rem; }
.ps-note-italique { font-style: italic; }
/* Pile de cartes des pages legales (CGV, mentions, mediateur) : l'espacement
   appartient a la PILE, pas a chaque carte. Avant le 13/09/2026, chaque carte
   portait son propre style="margin-top:24px" — dix-neuf fois — et une carte
   ajoutee sans le recopier se serait collee a la precedente sans que rien ne
   le signale. La premiere carte n'en prend pas : elle suit deja le titre. */
.ps-cartes > .card:not(:first-child) { margin-top: 24px; }
/* Image d'un document justificatif (attestation, certificat) posee dans une carte. */
.ps-image-document { max-width: 100%; height: auto; border-radius: 8px; }
.ps-hero--court { padding-bottom: 56px; }
.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); }
/* Sous-titre qui suit un paragraphe : remplace les style="margin-top:32px" en dur
   des pages de lieux (regle du 19/07 : zero style inline hors admin). */
.ps-h3-espace { margin-top: 32px; }
.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); }
/* Chapeau d'une categorie de l'annuaire des destinations : colonne courte,
   plus lisible qu'une ligne courant sur toute la largeur de la section.
   Remplace cinq style="max-width:640px" identiques (13/09/2026). */
.ps-content-text--etroit { max-width: 640px; }
/* Une seule facon de centrer un texte sur tout le site. Remplace le
   modificateur .ps-section-text--centre du 13/09 : deux facons de faire la
   meme chose, c'est deja une divergence de trop. */
.ps-centre { text-align: center; }
/* Bandeau d'arguments pose au-dessus du contenu principal d'une page. */
.ps-arguments { margin-bottom: 40px; }
/* Grille dont les deux colonnes se calent sur leur milieu plutot que sur le haut
   (texte a gauche, carte d'appel a l'action a droite). */
.ps-grid--centre { align-items: center; }
/* Grille d'items courts (une ligne chacun) : resserree par rapport a une
   grille de cartes. Remplace trois gap ecrits a la main sur /vtc-entreprises,
   qui valaient 1rem, 0.75rem et 0.75rem pour le meme usage. */
.ps-grid--serre { gap: 16px; }
/* Phrase d'accroche juste au-dessus du bouton d'un bloc d'appel a l'action. */
.ps-cta-accroche { margin-bottom: 8px; font-weight: 600; }
.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); }
/* Liste cochee posee au milieu d'une section centree (sections CTA) : la
   liste se centre en bloc, mais son texte reste aligne a gauche, sinon les
   coches ne sont plus les unes sous les autres. Ecrit a la main sur
   /portage-bagages-route-des-vins avant le 13/09/2026. */
.ps-list-centree { display: inline-block; text-align: left; margin: 20px 0; }

/* Conteneur scrollable : un tableau a 2 colonnes de texte peut depasser la
   largeur d'un telephone et faire deborder toute la page (audit du
   29/08/2026 — meme correctif que .table-wrap cote admin). */
.ps-table-wrap { overflow-x: auto; }
.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); }
/* 13/09/2026 : la marge haute vit ICI et nulle part ailleurs. Elle etait
   contredite en style inline sur douze blocs, avec QUATRE valeurs pour le
   meme composant (20 par defaut, 24, 1.5rem, 2rem, 32px) — un bloc d'appel
   a l'action ne se posait donc pas a la meme hauteur d'une page a l'autre.
   24px est la valeur la plus repandue des douze, retenue pour tous. */
.ps-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* ---- 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; }
/* Deux roles de texte dans une carte, ecrits a la main dix-neuf fois sur
   /mise-a-disposition avec des tailles hors echelle (13, 14 et 15 px) :
   --- .card-phrase : le propos de la carte, en texte principal.
   --- .card-note   : la precision qui suit, plus petite et plus discrete.
   Les deux prennent desormais une taille du systeme, pas un chiffre choisi
   a la main. Completent .card-text (corps courant) et .card-meta (etiquette). */
.card-phrase { font-size: var(--text-body-md); color: var(--text-on-light-primary); margin: 8px 0; }
.card-note { font-size: var(--text-2xs); color: var(--text-on-light-secondary); line-height: var(--leading-normal); margin-top: 8px; }
/* Grande icone en tete de carte (emoji ou SVG), au-dessus du titre. */
.card-icone { display: block; font-size: 26px; margin-bottom: 12px; }
/* Un bouton pose juste apres le sous-titre d'une carte a besoin de respirer :
   la regle vit ici plutot que sur chaque carte concernee (/contact, 13/09/2026). */
.card-subtitle + .btn { margin-top: 12px; }
/* Carte mise en avant dans une grille : un liseré a la couleur d'accent du
   site, rien d'autre. Nommee --accent et non --or : le token --accent-gold est
   passe au bleu cobalt le 31/07, un nom de couleur en dur aurait menti. */
.card--accent { border-color: var(--accent-gold); }
/* 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,
.card-dark .card-phrase, .card-dark .card-note { 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; }
/* Prefixe "a partir de" : le prix reste l'element lisible, la mention passe
   au second plan comme la note "tout compris" a cote. */
.circuit-price-value .circuit-price-from { font-weight: 400; opacity: .75; }
.circuit-price-item.is-tbd .circuit-price-value { opacity: .6; }

/* Case de tarif cliquable (page marches de Noel, 28/09/2026) : chaque vehicule
   mene au formulaire avec ce vehicule deja choisi. Le prix grossit et passe
   en dore, une ligne d'appel dit ce que fait le clic ; au survol la bordure
   s'allume, la case se souleve et la fleche avance. */
.circuit-price-link {
  display: flex; flex-direction: column; gap: 4px; flex: 1 1 240px; max-width: 400px;
  padding: var(--space-3) var(--space-5); text-decoration: none; color: inherit;
  background: rgba(250, 246, 236, .04);
  transition: border-color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.circuit-price-link .circuit-price-value { font-size: var(--text-title-md); color: var(--accent-gold); }
.circuit-price-cta { margin-top: 6px; font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-gold); }
.circuit-price-cta::after { content: " →"; display: inline-block; transition: transform var(--duration-base) var(--ease-standard); }
.circuit-price-link:hover { border-color: var(--accent-gold); background: rgba(250, 246, 236, .08); transform: translateY(-2px); color: inherit; }
.circuit-price-link:hover .circuit-price-cta::after { transform: translateX(4px); }

/* 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; }
/* Lien pose au fil du texte d'une carte (maillage interne : la page marches de
   Noel pointe vers les pages communes depuis le corps du texte). Souligne au
   repos, parce qu'un lien noye dans un paragraphe doit se voir sans survol ; au
   survol la couleur fonce, le soulignement ne bouge pas. */
.card-text a { color: var(--accent-gold-press); text-decoration: underline; text-underline-offset: 2px; }
.card-text a:hover { color: var(--text-on-light-primary); }

/* Rangee de liens en pied de carte : donne une cible franche a cliquer la ou
   un lien noye dans le paragraphe se remarque peu. Elle est le dernier enfant
   de .card-body, donc la regle .card-body > :last-child { margin-top: auto }
   la colle en bas — les rangees restent alignees d'une carte a l'autre quelle
   que soit la longueur du texte. La fleche vient du CSS : la repeter dans dix
   libelles fois trois langues serait trente occasions de l'oublier. */
.card-links { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 12px; border-top: 1px solid var(--border-light); }
.card-links .card-link::after { content: " →"; }

/* Carte entierement cliquable (a.card impossible ici : la carte contient deja
   des liens, et un lien dans un lien est interdit en HTML). Le lien pose sur le
   titre etend sa zone a toute la carte via ::after ; les autres liens de la
   carte passent au-dessus et restent cliquables chacun vers leur page. */
.card-clickable { position: relative; }
.card-stretch-link { color: inherit; text-decoration: none; }
.card-stretch-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-clickable .card-text a,
.card-clickable .card-links { position: relative; z-index: 2; }
.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; }
/* L'espacement est porte par le CONTENEUR (gap), plus par une marge basse
   sur chaque lien : .ps-footer-col-links etait utilise dans le HTML mais
   n'existait dans aucune feuille de style (audit du 29/08/2026), et la
   marge par element laissait un blanc en trop sous le dernier lien de
   chaque colonne. */
.ps-footer-col-links { display: flex; flex-direction: column; gap: 10px; }
.ps-footer-col div.item { font-size: var(--text-2xs); 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; }
.footer-signature { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); margin-top: var(--space-4); font-size: var(--text-2xs); opacity: .8; }
.footer-signature img { width: 66px; height: 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; } }

/* ---------------------------------- Options de réservation (22/09/2026) ----------------------------------
   Demande d'Hubert : le client doit pouvoir demander un siège enfant, une
   boisson ou signaler un animal AU MOMENT de réserver — jusque-là il n'avait
   que la note libre, et Hubert devait annoncer le supplément après coup.
   Explicitement : « pas des cases à cocher avec un design pas soigné ».

   D'où la carte cliquable : le <label> tout entier EST le contrôle, la vraie
   case reste dans le DOM (masquée) pour le clavier et les lecteurs d'écran.
   La sélection se lit à trois signes qui vont ensemble — liseré d'accent,
   fond teinté, pastille cochée — plutôt qu'au seul petit carré, invisible
   sur un téléphone en plein soleil. */
.option-cards {
  display: grid; gap: 12px;
  /* auto-fit plutôt qu'un nombre de colonnes figé, et cartes CENTRÉES : en
     retirant la boisson (22/09/2026) il n'en restait que deux, collées à
     gauche avec un vide à droite là où la troisième se trouvait. Le centrage
     tient quel que soit leur nombre, sans largeur écrite à la main. Le
     plafond à 200px évite des cartes étirées et vides quand il n'y en a
     qu'une ou deux. */
  grid-template-columns: repeat(auto-fit, minmax(140px, 200px));
  justify-content: center;
  /* Toutes les cartes à la MÊME hauteur, quelle que soit la longueur du
     libellé : sans ça, « Animal de compagnie » passe sur deux lignes en
     colonne étroite et sa carte dépasse ses voisines de 6px (constaté à
     375px le 22/09/2026). Porté par la grille, jamais par une hauteur
     écrite à la main sur chaque carte. */
  grid-auto-rows: 1fr;
}
.option-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 12px 16px; cursor: pointer; text-align: center;
  color: var(--text-on-light-primary);
}
/* Calque de fond : c'est LUI qui porte le fond, le liseré et l'ombre, pour
   être atteint depuis la case par le sélecteur FRÈRE (~). Styler la carte
   elle-même demanderait un :has() — qui marche, mais dont on n'a pas besoin
   ici : le frère suffit et se lit aussi bien.
   ⚠️ Ne PAS conclure d'une lecture de getComputedStyle en navigateur piloté
   que ces couleurs ne s'appliquent pas : quand la fenêtre n'est pas affichée,
   les transitions ci-dessous sont gelées et la valeur lue reste celle de
   départ (une demi-heure perdue là-dessus le 22/09/2026). Pour vérifier une
   couleur transitionnée, neutraliser d'abord la transition. */
.option-card-fond {
  position: absolute; inset: 0; z-index: 0; border-radius: var(--radius-md);
  border: 1px solid var(--border-light); background: var(--surface-light-2);
  transition: border-color var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
/* Le contenu passe au-dessus du calque, sinon il serait recouvert. */
.option-card > *:not(.option-card-fond) { position: relative; z-index: 1; }
.option-card:hover .option-card-fond { border-color: var(--accent-gold); box-shadow: var(--shadow-sm); }
.option-card-input:checked ~ .option-card-fond { border-color: var(--accent-gold); background: var(--accent-gold-tint); }
/* Le focus clavier se voit sur la carte, pas sur la case masquée. */
.option-card-input:focus-visible ~ .option-card-fond { border-color: var(--accent-gold); box-shadow: 0 0 0 3px var(--accent-gold-tint); }
/* La case elle-même reste focusable et lisible par les technologies
   d'assistance : opacity/position, jamais display:none — un champ en
   display:none sort de l'ordre de tabulation et devient inatteignable au
   clavier. */
.option-card-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.option-card-icon { display: block; line-height: 0; color: var(--text-on-light-muted); }
.option-card-icon svg {
  width: 30px; height: 30px; fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.option-card-nom { font-size: var(--text-body-sm); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.option-card-prix { font-size: var(--text-caption); color: var(--text-on-light-muted); }
/* Pastille de sélection, absente tant que rien n'est choisi — un badge
   toujours présent qui changerait seulement de couleur ne renseignerait que
   la moitié des cas. */
.option-card-coche {
  position: absolute; top: 8px; right: 8px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--accent-gold); color: #fff;
  display: none; align-items: center; justify-content: center;
}
.option-card-coche svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.option-card-input:checked ~ .option-card-coche { display: flex; }
.option-card-input:checked ~ .option-card-icon,
.option-card-input:checked ~ .option-card-prix { color: var(--accent-gold-press); }

.option-precision { margin-top: 12px; }
.option-total { margin-top: 14px; font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--accent-gold-press); }

/* Trois cartes tiennent sur une ligne dès 480px de colonne utile : elles ne
   passent en pile qu'en dessous, là où le texte commencerait à se couper. */
@media (max-width: 520px) {
  .option-cards { grid-template-columns: 1fr; }
  .option-card { flex-direction: row; justify-content: flex-start; text-align: left; padding: 14px 16px; gap: 12px; }
  .option-card-prix { margin-left: auto; padding-right: 22px; flex-shrink: 0; white-space: nowrap; }
}

/* Avis clients (accueil) — cartes de même hauteur via la grille, signature
   toujours en bas de carte quelle que soit la longueur de l'avis. */
.ps-avis { margin: 0; display: flex; }
.ps-avis .card-body { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ps-avis-etoiles { color: var(--accent-gold); letter-spacing: 2px; font-size: var(--text-body-lg); }
.ps-avis-texte { margin: 0; flex: 1; }
.ps-avis-nom { font-weight: 600; color: var(--text-on-light-primary); }

/* ---- Bandeau saisonnier « marchés de Noël » (13/10/2026) — partials/bandeau-noel.
   Une bande sombre d'une seule pièce, entièrement cliquable, entre le visuel et
   les services : photo d'Obernai fondue à gauche, titre serif, tracé des villes
   façon ligne de car, prix du moteur à droite. Or direct (--cz-gold-*), comme le
   H1 : c'est la couleur de Noël du site, le token --accent-gold étant devenu bleu. ---- */
.ps-noel { background: var(--surface-dark-2); color: var(--text-on-dark-primary); border-block: 1px solid var(--cz-gold-20); }
.ps-noel-lien { display: grid; grid-template-columns: minmax(180px, 26%) minmax(0, 1fr) auto; color: inherit; text-decoration: none; }
.ps-noel-lien:hover, .ps-noel-lien:focus { text-decoration: none; }
.ps-noel-lien:focus-visible { outline: 2px solid var(--cz-gold-100); outline-offset: -2px; }
.ps-noel-photo { width: 100%; height: 100%; min-height: 168px; object-fit: cover; object-position: 50% 60%; display: block;
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent); mask-image: linear-gradient(90deg, #000 45%, transparent);
  transition: filter .4s ease; filter: saturate(.9) brightness(.85); }
.ps-noel-lien:hover .ps-noel-photo { filter: saturate(1) brightness(1); }
.ps-noel-texte { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 28px 32px; min-width: 0; }
.ps-noel-eyebrow { color: var(--cz-gold-100); font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; font-weight: 600; }
.ps-noel-titre { font-family: var(--font-display-serif); font-weight: 600; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; margin: 0; text-wrap: balance; }
.ps-noel-titre em { font-style: italic; color: var(--cz-gold-120); }

/* Tracé : 4 arrêts de même largeur (flex: 1), la ligne court du centre du
   premier au centre du dernier — donc de 12,5 % à 12,5 % des bords. */
.ps-noel-route { list-style: none; margin: 4px 0 0; padding: 0; display: flex; max-width: 480px; position: relative; }
.ps-noel-route::before { content: ""; position: absolute; top: 5px; left: 12.5%; right: 12.5%; border-top: 1px dashed var(--cz-gold-80); }
.ps-noel-route li { flex: 1; position: relative; padding-top: 20px; text-align: center; font-size: var(--text-2xs); letter-spacing: .03em; color: var(--text-on-dark-secondary); white-space: nowrap; }
.ps-noel-route li::before { content: ""; position: absolute; top: 0; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--surface-dark-2); border: 1.5px solid var(--cz-gold-100); box-sizing: border-box; }
.ps-noel-route li:first-child::before, .ps-noel-route li:last-child::before { background: var(--cz-gold-100); }

.ps-noel-prix { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; padding: 28px clamp(24px, 4vw, 48px); border-left: 1px solid var(--cz-gold-20); text-align: right; }
.ps-noel-prix-de { font-size: var(--text-2xs); color: var(--text-on-dark-muted); }
.ps-noel-prix-valeur { font-family: var(--font-display-serif); font-weight: 600; font-size: clamp(32px, 3.4vw, 42px); line-height: 1; color: var(--cz-gold-120); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-noel-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-on-dark-primary); }
.ps-noel-cta svg { width: 16px; height: 16px; fill: none; stroke: var(--cz-gold-100); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.ps-noel-lien:hover .ps-noel-cta svg { transform: translateX(4px); }

@media (max-width: 760px) {
  .ps-noel-lien { grid-template-columns: 1fr; }
  .ps-noel-photo { height: 132px; min-height: 0; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent); }
  .ps-noel-texte { padding: 4px 20px 18px; }
  .ps-noel-route { max-width: none; }
  .ps-noel-route li { font-size: 12px; letter-spacing: 0; }
  .ps-noel-prix { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; column-gap: 10px; border-left: 0; border-top: 1px solid var(--cz-gold-20); padding: 16px 20px 20px; text-align: left; }
  .ps-noel-cta { margin: 0 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .ps-noel-photo, .ps-noel-cta svg { transition: none; } }