/* ValiseLibre — couche de fidélité au prototype validé. Chargée en dernier. */
:root {
  --pf-basalte: #152B28;
  --pf-lagon: #19B7A5;
  --pf-action: #0A766E;
  --pf-ylang: #F3C94B;
  --pf-sable: #F7F4EC;
  --pf-paper: #FFFEFB;
  --pf-muted: #526661;
  --pf-line: #CDD6D1;
  --pf-subtle: #ECE9E0;
  --pf-danger: #B42318;
  --pf-radius-control: 12px;
  --pf-radius-card: 20px;
  --pf-radius-feature: 28px;
  --pf-shadow: 0 1px 2px rgba(21, 43, 40, .06), 0 12px 32px rgba(21, 43, 40, .08);
}

html { background: var(--pf-sable); }
html body {
  margin: 0;
  background: var(--pf-sable);
  color: var(--pf-basalte);
  font-family: "Manrope Variable", Manrope, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
body .app-shell { background: var(--pf-sable); }
body .skip-link {
  position: fixed;
  top: -70px;
  left: 12px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--pf-paper);
  color: var(--pf-basalte);
}
body .skip-link:focus { top: 12px; }
body .demo-strip {
  min-height: 28px;
  padding: 6px 16px;
  background: var(--pf-basalte);
  color: #fff;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .02em;
}
body button,
body input,
body select,
body textarea { font: inherit; }
body button { min-height: 44px; }
body :focus-visible { outline: 3px solid var(--pf-ylang) !important; outline-offset: 3px; }
body .container { width: min(1180px, calc(100% - 40px)); max-width: 1180px; margin-inline: auto; }
body .page { background: var(--pf-sable); }
body h1,
body h2,
body h3,
body p { margin-top: 0; }

/* Bandeau et navigation */
body > .app-shell > #launch-status {
  display: block !important;
  width: 100%;
  min-height: 28px;
  margin: 0 !important;
  padding: 6px 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--pf-basalte) !important;
  color: #fff !important;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .02em;
  box-shadow: none !important;
}
body > .app-shell > #launch-status.backend-offline { background: #6F1D17 !important; }
body .site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 76px;
  border-bottom: 1px solid rgba(21, 43, 40, .12);
  background: rgba(247, 244, 236, .94) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px);
}
body .header-inner { min-height: 76px; height: 76px; gap: 28px; }
body .brand { min-width: 172px; padding: 0; background: transparent !important; }
body .brand-lockup { width: 172px; height: auto; }
body .main-nav { gap: 4px; margin-left: auto; }
body .nav-btn,
body .nav-link-anchor {
  min-height: 44px;
  padding: 10px 13px;
  border: 0;
  border-radius: 12px;
  color: var(--pf-basalte);
  background: transparent;
  font-weight: 700;
  text-decoration: none;
}
body .nav-btn:hover,
body .nav-btn.active,
body .nav-link-anchor:hover { background: var(--pf-paper) !important; color: var(--pf-basalte) !important; }
body .auth-actions { margin-left: 8px; }
body .auth-actions [data-app-action="open-signup"] { display: none; }
body .auth-actions [data-app-action="open-auth"] {
  border: 1px solid var(--pf-basalte);
  background: transparent;
  color: var(--pf-basalte);
}

/* Boutons et champs */
body .button {
  min-height: 46px;
  border-radius: var(--pf-radius-control);
  padding: 11px 18px;
  font-weight: 800;
  box-shadow: none;
}
body .button-primary { border-color: var(--pf-action); background: var(--pf-action); color: #fff; }
body .button-secondary { border-color: var(--pf-basalte); background: transparent; color: var(--pf-basalte); }
body .button-ghost { border-color: transparent; background: var(--pf-subtle); color: var(--pf-basalte); }
body .field label,
body .field > label { color: var(--pf-basalte); font-size: 13px; font-weight: 700; }
body .field input,
body .field select,
body .field textarea,
body input,
body select,
body textarea {
  border-color: var(--pf-line);
  border-radius: var(--pf-radius-control);
  background: #fff;
  color: var(--pf-basalte);
  box-shadow: none;
}
body .hint { color: var(--pf-muted); }

/* Accueil — composition exacte du prototype */
body #page-home .hero-section {
  padding: 0;
  background: var(--pf-sable) !important;
  background-image: none !important;
}
body #page-home .boarding-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .72fr);
  gap: 72px;
  align-items: center;
  padding-block: 76px 64px;
}
body #page-home .boarding-hero-copy { max-width: none; }
body #page-home .boarding-eyebrow,
body .market-head .eyebrow,
body .publication-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  color: var(--pf-action);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
body .status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pf-lagon);
  box-shadow: 0 0 0 5px rgba(25, 183, 165, .13);
}
/* Référence explicitement demandée : le prototype actuel, avec la même Manrope
   auto-hébergée. Sa graisse de titre mesurée dans Chrome est 700. */
body #page-home h1 {
  max-width: 780px;
  margin-bottom: 28px;
  color: var(--pf-basalte);
  font-size: clamp(47px, 6.4vw, 82px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.065em;
}
body #page-home h1 em { color: var(--pf-action); font-style: normal; }
body #page-home .lead {
  max-width: 700px;
  margin-bottom: 0;
  color: var(--pf-muted);
  font-size: 19px;
  line-height: 1.6;
}
body #page-home .boarding-role-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 32px;
}
body #page-home .boarding-role-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 13px;
  align-items: center;
  min-height: 88px;
  padding: 16px;
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-card);
  background: var(--pf-paper);
  color: var(--pf-basalte);
  text-align: left;
  box-shadow: 0 1px 0 rgba(21, 43, 40, .03);
}
body #page-home .boarding-role-card.primary { border-color: var(--pf-action); background: var(--pf-action); color: #fff; }
body #page-home .boarding-role-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: rgba(25, 183, 165, .14);
  color: var(--pf-action);
}
body #page-home .boarding-role-card.primary .boarding-role-icon { background: rgba(255, 255, 255, .15); color: #fff; }
body #page-home .boarding-role-card small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .78; }
body #page-home .boarding-role-card strong { margin-top: 2px; font-size: 15px; }
body #page-home .boarding-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0 0;
  color: var(--pf-muted);
  font-size: 13px;
}
body #page-home .boarding-proof span { color: var(--pf-action); font-weight: 800; }
body #page-home .boarding-pass {
  position: relative;
  overflow: hidden;
  padding: 26px;
  border: 1px solid rgba(21, 43, 40, .16);
  border-radius: var(--pf-radius-feature);
  background: var(--pf-paper);
  color: var(--pf-basalte);
  box-shadow: var(--pf-shadow);
  transform: rotate(1.2deg);
}
body #page-home .boarding-pass-ring {
  position: absolute;
  top: -52px;
  right: -42px;
  width: 150px;
  height: 150px;
  border: 22px solid rgba(25, 183, 165, .12);
  border-radius: 50%;
  background: transparent;
}
body #page-home .boarding-pass-head small { color: var(--pf-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
body #page-home .boarding-pass-head strong { margin-top: 2px; font-size: 24px; }
body #page-home .boarding-capacity { border: 0; background: var(--pf-ylang); color: var(--pf-basalte); font-weight: 800; }
body #page-home .boarding-route { margin: 32px 0 24px; }
body #page-home .boarding-route b { font-size: 23px; }
body #page-home .boarding-route span { color: var(--pf-muted); font-size: 12px; }
body #page-home .boarding-track { height: 2px; background: var(--pf-line); }
body #page-home .boarding-traveler { padding: 15px 0; border-block: 1px dashed var(--pf-line); }
body #page-home .boarding-avatar { width: 42px; height: 42px; background: var(--pf-subtle); color: var(--pf-basalte); }
body #page-home .boarding-traveler small { color: var(--pf-muted); font-size: 12px; }
body #page-home .boarding-details { margin: 18px 0; }
body #page-home .boarding-details div { padding: 8px 0; }
body #page-home .boarding-details dt { color: var(--pf-muted); font-size: 12px; }
body #page-home .boarding-details dd { font-size: 13px; font-weight: 700; }
body #page-home .boarding-pass > .button { width: 100%; background: var(--pf-basalte); border-color: var(--pf-basalte); }
body #page-home .boarding-pass > p { margin: 10px 0 0; color: var(--pf-muted); font-size: 11px; text-align: center; }

body #page-home .principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-block: 34px 70px;
  border-top: 1px solid var(--pf-line);
}
body #page-home .principles article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 10px 28px;
  border-right: 1px solid var(--pf-line);
}
body #page-home .principles article:first-child { padding-left: 0; }
body #page-home .principles article:last-child { border-right: 0; }
body #page-home .principles article > span { color: var(--pf-action); font-size: 12px; font-weight: 800; }
body #page-home .principles strong { display: block; }
body #page-home .principles p { margin: 5px 0 0; color: var(--pf-muted); font-size: 13px; }
body #page-home .trust-context {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 54px;
  align-items: center;
  margin-bottom: 30px;
  padding: 38px 42px;
  border-radius: var(--pf-radius-feature);
  background: var(--pf-basalte);
  color: #fff;
}
body #page-home .trust-context .eyebrow { margin-bottom: 15px; color: var(--pf-ylang); }
body #page-home .trust-context h2 {
  max-width: 520px;
  margin-bottom: 12px;
  color: #fff;
  font-size: 38px;
  line-height: 1.04;
  letter-spacing: -.055em;
}
body #page-home .trust-context-copy > p:not(.eyebrow) { max-width: 560px; color: rgba(255, 255, 255, .72); }
body #page-home .trust-context .button { display: inline-flex; margin-top: 8px; border-color: rgba(255, 255, 255, .65); color: #fff; text-decoration: none; }
body #page-home .trust-context-grid { display: grid; gap: 10px; }
body #page-home .trust-context-grid article {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 13px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .08);
}
body #page-home .trust-context-grid article > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pf-lagon);
  color: var(--pf-basalte);
  font-weight: 800;
}
body #page-home .trust-context-grid .trust-context-limit > span { background: var(--pf-ylang); }
body #page-home .trust-context-grid p { margin: 3px 0 0; color: rgba(255, 255, 255, .7); font-size: 12px; }
body #page-home .home-secondary { margin-bottom: 76px; }
body #page-home .home-secondary > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 16px;
  border: 1px solid var(--pf-line);
  border-radius: 14px;
  background: transparent;
  color: var(--pf-basalte);
  cursor: pointer;
  list-style: none;
}
body #page-home .home-secondary > summary::-webkit-details-marker { display: none; }
body #page-home .home-secondary > summary::after { content: "+"; margin-left: auto; color: var(--pf-action); font-size: 22px; }
body #page-home .home-secondary[open] > summary::after { content: "−"; }
body #page-home .home-secondary > summary span { font-weight: 800; }
body #page-home .home-secondary > summary small { color: var(--pf-muted); }
body #page-home .home-secondary > .container,
body #page-home .home-secondary .section > .container { width: 100%; }
body #page-home .home-secondary .wave-sep { display: none; }

/* Marché — colonne de filtres et résultats horizontaux */
body #page-trips .market-section { padding: 0; background: var(--pf-sable); }
body #page-trips .market-head {
  margin: 0;
  /* !important : compliance.css pose `#page-trips .market-head.market-hero-bubble`
     (54/32), plus spécifique que ce sélecteur — vérifié dans le navigateur le 21 août. */
  padding: 58px 0 34px !important;
  border: 0;
  border-bottom: 1px solid var(--pf-line);
  border-radius: 0;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
body #page-trips .market-live-status,
body #page-trips .market-corridor,
body #page-trips .market-hero-footer { display: none !important; }
body #page-trips .market-hero-topline { margin: 0; }
body #page-trips .market-hero-copy { display: flex; align-items: end; justify-content: space-between; gap: 28px; }
body #page-trips .market-hero-copy h2 {
  margin-bottom: 12px;
  color: var(--pf-basalte);
  font-size: clamp(34px, 4.5vw, 58px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.055em;
}
body #page-trips .market-hero-copy .lead { margin: 0; color: var(--pf-muted); font-size: 16px; }
body #page-trips .market-hero-grid { display: block; margin-top: 24px; }
body #page-trips .market-role-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(100%, 520px);
  gap: 5px;
  padding: 5px;
  border-radius: 16px;
  background: var(--pf-subtle);
}
body #page-trips .market-role-card {
  display: grid;
  grid-template-columns: 1fr auto;
  min-height: 58px;
  padding: 9px 12px;
  border: 0 !important;
  border-radius: 12px;
  background: transparent !important;
  color: var(--pf-basalte) !important;
  box-shadow: none !important;
}
body #page-trips .market-role-card.is-current { background: var(--pf-paper) !important; box-shadow: 0 2px 8px rgba(21, 43, 40, .08) !important; }
body #page-trips .market-role-icon,
body #page-trips .market-role-arrow,
body #page-trips .market-role-copy > span { display: none; }
body #page-trips .market-role-copy small,
body #page-trips .market-role-copy strong { display: block; }
body #page-trips .market-role-copy small { color: var(--pf-muted); font-size: 10px; text-transform: uppercase; }
body #page-trips .market-role-copy strong { font-size: 13px; }
body #page-trips .market-role-count { align-self: center; font-size: 10px; }
/* !important : compliance.css pose `#market-capacities.market-panel.on` (36/0/0), plus
   spécifique — la liste de résultats finissait sinon collée au pied de page. */
body #page-trips .market-panel { padding: 36px 0 74px !important; }
body #page-trips #market-capacities.on,
body #page-trips #market-requests.on {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  column-gap: 42px;
  align-items: start;
}
body #page-trips #market-capacities > .search-panel,
body #page-trips #market-requests > .request-filter-panel { grid-column: 1; grid-row: 1 / span 6; }
body #page-trips .search-panel,
body #page-trips .request-filter-panel {
  /* !important : compliance.css impose déjà 22px/24px en !important sur ces deux classes. */
  padding: 20px !important;
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-card) !important;
  background: var(--pf-paper) !important;
  box-shadow: 0 1px 0 rgba(21, 43, 40, .03) !important;
}
body #page-trips .search-panel-title { margin-bottom: 18px; }
body #page-trips .search-panel-icon { display: none; }
body #page-trips .search-panel-title strong { font-size: 15px; }
body #page-trips .search-panel-title small { color: var(--pf-muted); font-size: 11px; }
body #page-trips .search-fields,
body #page-trips .request-filter-panel .form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
body #page-trips .search-fields .field,
body #page-trips .request-filter-panel .field { width: 100%; }
body #page-trips .range-card { padding: 0; border: 0; background: transparent; }
body #page-trips .search-help { margin-top: 16px; padding: 12px 0 0; border-top: 1px solid var(--pf-subtle); background: transparent; }
body #page-trips .search-help strong,
body #page-trips .search-help span { font-size: 11px; }
body #page-trips .geo-status,
body #page-trips .map-status { font-size: 10px; }
body #page-trips .market-subhead,
body #page-trips #trips-list,
body #page-trips #requests-list,
body #page-trips .schedule-traveler-nudge-slot,
body #page-trips .trip-schedule { grid-column: 2; }
/* !important : compliance.css pose `.market-subhead{margin:27px 2px 14px!important}`. */
body #page-trips .market-subhead { grid-row: 1; margin: 0 0 18px !important; }
body #page-trips .market-subhead h3 { margin: 2px 0 0; font-size: 22px; }
body #page-trips .market-subhead .hint { margin-top: 4px; font-size: 12px; }
body #page-trips #trips-list,
body #page-trips #requests-list { grid-row: 2; display: grid; grid-template-columns: 1fr; gap: 20px !important; }
body #page-trips .trip-card,
body #page-trips .request-card {
  margin: 0;
  padding: 24px;
  min-height: 0;
  border: 1px solid var(--pf-line) !important;
  border-radius: var(--pf-radius-card) !important;
  background: var(--pf-paper);
  box-shadow: none !important;
}
body #page-trips .trip-card:hover,
body #page-trips .request-card:hover { border-color: var(--pf-action) !important; transform: none; box-shadow: none !important; }
body #page-trips .vl-travel-card,
body #page-trips .vl-request-card { grid-template-columns: 96px minmax(0, 1fr); column-gap: 22px; padding: 24px; }
body #page-trips .vl-ticket-stub { width: 96px; height: 96px; border-radius: var(--pf-radius-compact); background: var(--pf-subtle); }
body #page-trips .vl-ticket-date strong { font-size: 34px; }
body #page-trips .vl-ticket-date span { font-size: 12px; }
body #page-trips .listing-preview-line { align-items: center; }
body #page-trips .listing-preview-title { font-size: 18px; }
body #page-trips .listing-preview-price,
body #page-trips .vl-travel-card .listing-preview-price,
body #page-trips .vl-request-card .listing-preview-price { color: var(--pf-basalte); font-size: 26px; border-radius: var(--pf-radius-control) !important; }
body #page-trips .vl-travel-card .vl-route-tag,
body #page-trips .vl-request-card .vl-route-tag,
body #page-trips .request-route { font-size: 21px; }
body #page-trips .chip,
body #page-trips .vl-travel-card .chip,
body #page-trips .vl-request-card .chip { border: 0; background: var(--pf-sable); color: var(--pf-basalte); box-shadow: none; font-size: 13px; font-weight: 700; padding: 6px 12px; }
body #page-trips .route-coverage,
body #page-trips .vl-travel-card > .route-coverage,
body #page-trips .vl-request-card > .route-coverage { border-color: var(--pf-subtle); background: transparent; font-size: 13px; }
body #page-trips .vl-travel-card > .listing-preview-footer > div,
body #page-trips .vl-request-card > .listing-preview-footer > div { font-size: 13px; }
body #page-trips .corridor-direction,
body #page-trips .corridor-direction.outbound,
body #page-trips .corridor-direction.inbound {
  background: var(--pf-sable) !important;
  border-color: transparent !important;
  color: var(--pf-basalte) !important;
}
body #page-trips .corridor-direction .icon-inline { display: none; }

/* Marché — vue horaire (lot 11) : tripScheduleRowHTML réutilise désormais boardingDateHTML,
   routeTagHTML et .chip (comme tripCardHTML) au lieu de texte brut ; ces règles ne font que
   les redimensionner pour la ligne compacte, la logique de composant reste partagée. */
body #page-trips .schedule-row-date .vl-ticket-date strong { font-size: 26px; }
body #page-trips .schedule-row-date .vl-ticket-date span { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
body #page-trips .schedule-row-route .vl-route-tag { font-size: 15px; }
body #page-trips .schedule-row-capacity .chip { font-size: 11px; padding: 5px 10px; }
body #page-trips .schedule-row-price { font-size: 15px; font-weight: 800; color: var(--pf-basalte); }

/* Publication */
body #page-offer > .section,
body #page-send > .section { padding: 0; background: var(--pf-sable); }
body .publication-shell { padding-block: 54px 84px; }
body .publication-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--pf-line);
}
body .publication-head h2 {
  margin-bottom: 12px;
  color: var(--pf-basalte);
  font-size: clamp(34px, 4.5vw, 58px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.055em;
}
body .publication-head .lead { max-width: 700px; margin: 0; color: var(--pf-muted); font-size: 16px; }
body .publication-role-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-width: 420px;
  padding: 5px;
  border: 0;
  border-radius: 16px;
  background: var(--pf-subtle);
}
body .publication-role-switch button {
  min-height: 54px;
  padding: 10px 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--pf-basalte);
  text-align: left;
}
body .publication-role-switch button.active,
body .publication-role-switch button[aria-current="page"] { background: var(--pf-paper); box-shadow: 0 2px 8px rgba(21, 43, 40, .08); }
body .publication-role-switch small,
body .publication-role-switch strong { display: block; }
body .publication-role-switch small { color: var(--pf-muted); font-size: 10px; text-transform: uppercase; }
body .publication-role-switch strong { font-size: 13px; }
body .publication-stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 28px 0;
  padding: 0;
  border: 0;
  background: transparent;
  position: relative;
}
body .publication-stepper::before {
  content: "";
  position: absolute;
  top: 17px;
  right: 6%;
  left: 6%;
  height: 2px;
  background: var(--pf-line);
}
body .publication-stepper a {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 50px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pf-muted);
  font-size: 11px;
  text-decoration: none;
  position: relative;
}
body .publication-stepper a span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--pf-line);
  border-radius: 50%;
  background: var(--pf-sable);
  color: var(--pf-basalte);
  font-weight: 800;
}
body .publication-stepper a:first-child { color: var(--pf-basalte); }
body .publication-stepper a:first-child span { border-color: var(--pf-action); background: var(--pf-action); color: #fff; }
body .publication-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start; }
body .publication-form-card,
body .publication-summary {
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-feature);
  background: var(--pf-paper);
  box-shadow: none;
}
body .publication-form-card { padding: 28px; }
body .publication-summary { padding: 24px; position: sticky; top: 108px; }
body .publication-step { padding: 0 0 28px; border: 0; border-bottom: 1px solid var(--pf-line); border-radius: 0; background: transparent; }
body .publication-step + .publication-step { padding-top: 28px; }
body .publication-step legend { width: 100%; margin-bottom: 22px; padding: 0 0 20px; border-bottom: 1px solid var(--pf-line); }
body .publication-step legend span,
body .summary-kicker { color: var(--pf-action); font-size: 12px; font-weight: 800; letter-spacing: .09em; }
body .publication-step legend strong { margin: 4px 0 0; font-size: 23px; }
body .publication-step legend small { color: var(--pf-muted); font-size: 11px; }
body .publication-step-fields { gap: 18px; }
body .publication-limit,
body .platform-role-box { border: 0; border-left: 4px solid var(--pf-ylang); border-radius: 0 12px 12px 0; background: #FFF7D7; color: var(--pf-basalte); }
body .publication-summary-icon { background: #E8F6F2; color: var(--pf-action); }
body .publication-summary h3 { font-size: 24px; }
body .publication-summary dl div { border-color: var(--pf-subtle); }
body .summary-progress { background: var(--pf-subtle); }
body .summary-progress span { background: var(--pf-action); }
body .policy-grid,
body #page-offer .publication-shell > .panel { border-color: var(--pf-line); background: transparent; box-shadow: none; }

/* Espace personnel */
body .space-section { padding: 0; background: var(--pf-sable); }
body .space-container { padding-block: 54px 84px; }
/* L'en-tête de « Mon espace » est plat dans le prototype (.space-head : un simple filet
   sous le titre), pas une carte. compliance.css le re-transforme en carte arrondie via
   `#page-deals .space-hero-bubble` (sélecteur à identifiant, plus spécifique) — d'où les
   !important ci-dessous, constaté le 21 août 2026 en comparant aux exports. */
body .space-hero-bubble {
  display: flex;
  justify-content: space-between;
  gap: 36px;
  align-items: end;
  padding: 0 0 28px !important;
  margin-bottom: 28px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--pf-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Formes flottantes décoratives : proscrites par A_LIRE_AVANT_INTEGRATION.md §3. Elles
   étaient déjà neutralisées sur le marché (compliance.css) mais pas ici. */
body .space-hero-bubble::before,
body .space-hero-bubble::after { display: none !important; }
body .space-hero-icon { display: none; }
body .space-hero-main h2 { font-size: clamp(34px, 4.5vw, 58px); font-weight: 800; line-height: 1.04; letter-spacing: -.055em; }
body .space-hero-main p { color: var(--pf-muted); }
body .space-hero-metrics article { border: 1px solid var(--pf-line); background: var(--pf-paper); box-shadow: none; }
body .space-layout { grid-template-columns: 190px minmax(0, 1fr) 270px; gap: 20px; margin-top: 28px; }
body .space-tabs { position: sticky; top: 100px; gap: 4px; padding: 0; border: 0; background: transparent; box-shadow: none; }
body .space-tab { border: 0; border-radius: 11px; background: transparent; }
body .space-tab.on { background: var(--pf-basalte); color: #fff; }
/* Navigation latérale du prototype (.space-nav) : libellé seul + pastille de compte
   Ylang. Ni icône ni ligne de description, qui densifiaient la colonne. */
body .space-tab .space-tab-icon,
body .space-tab small { display: none !important; }
body .space-tab { grid-template-columns: minmax(0, 1fr) auto !important; padding: 11px 12px !important; font-weight: 700; }
body .space-tab > b {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--pf-ylang);
  color: var(--pf-basalte);
  font-size: 10px;
  font-weight: 800;
}
body .space-content,
body .space-context-card { border-color: var(--pf-line); background: var(--pf-paper); box-shadow: none; }
/* La carte d'aide est volontairement sombre dans le prototype (.help-card : fond Basalte,
   texte Sable, lien Ylang) et compliance.css la pose ainsi. La règle générique ci-dessus,
   plus spécifique qu'elle, lui imposait un fond Papier en laissant son texte Sable —
   texte crème sur blanc, donc illisible. Constaté à l'écran le 21 août 2026 sur
   « Mon espace », invisible dans une comparaison de valeurs CSS isolées. */
body .space-context-card.space-help-card {
  border-color: transparent;
  background: var(--pf-basalte);
  color: var(--pf-sable);
}
body .space-context-card.space-help-card h3 { color: var(--pf-sable); }
body .space-context-card.space-help-card p { color: rgba(247, 244, 236, .72); }
body .space-context-rail { width: auto; }

/* Page Comment ça marche */
body.trust-page { background: var(--pf-sable); }
body.trust-page .site-header { display: flex; align-items: center; padding: 0 max(24px, calc((100vw - 1180px) / 2)); }
body.trust-page .trust-brand { display: flex; align-items: center; min-height: 44px; }
body.trust-page .trust-brand img { width: 172px; height: auto; }
body.trust-page .trust-header-nav { display: flex; gap: 4px; margin-left: auto; }
body.trust-page .trust-header-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border-radius: 12px; color: var(--pf-basalte); font-weight: 700; text-decoration: none; }
body.trust-page .trust-header-nav a:hover,
body.trust-page .trust-header-nav a[aria-current="page"] { background: var(--pf-paper); }
body.trust-page .trust-hero { display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: center; padding-block: 66px; }
body.trust-page .trust-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px; color: var(--pf-action); font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
body.trust-page .trust-eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--pf-lagon); box-shadow: 0 0 0 5px rgba(25, 183, 165, .13); }
body.trust-page .trust-hero h1 { margin-bottom: 12px; font-size: clamp(34px, 4.5vw, 58px); font-weight: 800; line-height: 1.04; letter-spacing: -.055em; }
body.trust-page .trust-hero-copy > p:last-child { max-width: 650px; margin: 0; color: var(--pf-muted); font-size: 17px; }
body.trust-page .trust-manifest { padding: 25px; border: 1px solid var(--pf-line); border-radius: var(--pf-radius-feature); background: var(--pf-paper); box-shadow: var(--pf-shadow); }
body.trust-page .trust-manifest ul { display: grid; gap: 12px; margin: 17px 0 0; padding: 0; list-style: none; }
body.trust-page .trust-manifest li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center; font-size: 13px; font-weight: 700; }
body.trust-page .trust-manifest li span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #E8F6F2; color: var(--pf-action); font-weight: 800; }
body.trust-page .trust-content { display: grid; grid-template-columns: 1fr 350px; gap: 30px; padding-block: 24px 70px; border-top: 1px solid var(--pf-line); }
body.trust-page .trust-section-intro h2 { margin: 5px 0; font-size: 27px; }
body.trust-page .trust-section-intro p { color: var(--pf-muted); }
body.trust-page .trust-steps article { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 25px 0; border-bottom: 1px solid var(--pf-line); }
body.trust-page .trust-steps article > span { color: var(--pf-action); font-size: 12px; font-weight: 800; }
body.trust-page .trust-steps article h3 { margin-bottom: 6px; }
body.trust-page .trust-steps article p { margin-bottom: 9px; color: var(--pf-muted); font-size: 13px; }
body.trust-page .trust-steps article b { font-size: 11px; }
body.trust-page .trust-limits { position: sticky; top: 100px; height: max-content; padding: 24px; border: 1px solid var(--pf-line); border-radius: var(--pf-radius-feature); background: var(--pf-paper); }
body.trust-page .trust-limits h2 { margin: 5px 0 18px; font-size: 25px; letter-spacing: -.025em; }
body.trust-page .limit-block { padding: 15px 0; border-bottom: 1px solid var(--pf-subtle); }
body.trust-page .limit-block p { margin: 4px 0 0; color: var(--pf-muted); font-size: 12px; }
body.trust-page .trust-limits .button { width: 100%; margin-top: 20px; background: var(--pf-basalte); color: #fff; text-decoration: none; }
body.trust-page .trust-foot { display: flex; flex-wrap: wrap; gap: 12px 18px; padding-block: 0 70px; color: var(--pf-muted); font-size: 13px; }
body.trust-page .trust-foot a { color: var(--pf-action); font-weight: 700; }
body .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
body.trust-page .trust-status-details { margin-bottom: 30px; }
body.trust-page .trust-status-details > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 16px;
  border: 1px solid var(--pf-line);
  border-radius: 14px;
  color: var(--pf-basalte);
  cursor: pointer;
  list-style: none;
}
body.trust-page .trust-status-details > summary::-webkit-details-marker { display: none; }
body.trust-page .trust-status-details > summary::after { content: "+"; margin-left: auto; color: var(--pf-action); font-size: 22px; }
body.trust-page .trust-status-details[open] > summary::after { content: "−"; }
body.trust-page .trust-status-details > summary span { font-weight: 800; }
body.trust-page .trust-status-details > summary small { color: var(--pf-muted); }
body.trust-page .trust-status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-top: 14px; }
body.trust-page .trust-status-grid section { padding: 18px; border: 1px solid var(--pf-line); border-radius: var(--pf-radius-card); background: var(--pf-paper); }
body.trust-page .trust-status-grid h2 { margin-bottom: 7px; font-size: 17px; letter-spacing: -.025em; }
body.trust-page .trust-status-grid p { margin: 0; color: var(--pf-muted); font-size: 12px; }

@media (max-width: 1050px) {
  body .main-nav { display: none; }
  body .mobile-menu-btn { display: grid; }
  body #page-trips #market-capacities.on,
  body #page-trips #market-requests.on { grid-template-columns: 260px minmax(0, 1fr); gap: 28px; }
  body .space-layout { grid-template-columns: 190px minmax(0, 1fr); }
  body .space-context-rail { grid-column: 2; }
}

@media (max-width: 900px) {
  body .container { width: min(100% - 32px, 700px); }
  body .site-header,
  body .header-inner { height: 66px; min-height: 66px; }
  body .brand-lockup { width: 156px; }
  body .auth-actions { margin-left: auto; }
  body #page-home .boarding-hero { grid-template-columns: 1fr; gap: 32px; padding-block: 44px 56px; }
  body #page-home h1 { font-size: clamp(44px, 13vw, 64px); }
  body #page-home .lead { font-size: 17px; }
  body #page-home .boarding-pass { transform: none; margin-top: 6px; }
  body #page-home .principles { grid-template-columns: 1fr; padding-bottom: 56px; }
  body #page-home .principles article { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--pf-line); }
  body #page-home .principles article:last-child { border-bottom: 0; }
  body #page-home .trust-context { grid-template-columns: 1fr; gap: 26px; padding: 30px; }
  body #page-home .trust-context h2 { font-size: 34px; }
  body #page-trips .market-head { padding-top: 38px; }
  body #page-trips .market-publish-need { display: none; }
  body #page-trips #market-capacities.on,
  body #page-trips #market-requests.on { grid-template-columns: 1fr; padding-bottom: 110px; }
  body #page-trips #market-capacities > .search-panel,
  body #page-trips #market-requests > .request-filter-panel,
  body #page-trips .market-subhead,
  body #page-trips #trips-list,
  body #page-trips #requests-list,
  body #page-trips .schedule-traveler-nudge-slot,
  body #page-trips .trip-schedule { grid-column: 1; grid-row: auto; }
  body #page-trips .search-fields { grid-template-columns: 1fr 1fr; }
  body .publication-shell,
  body .space-container { padding-top: 38px; padding-bottom: 120px; }
  body .publication-head { display: grid; align-items: start; }
  body .publication-role-switch { width: 100%; min-width: 0; }
  body .publication-layout { grid-template-columns: 1fr; }
  body .publication-summary { position: static; }
  body .space-hero-bubble { align-items: start; }
  body .space-layout { grid-template-columns: 1fr; }
  body .space-tabs { position: static; display: flex; overflow-x: auto; }
  body .space-context-rail { grid-column: 1; grid-template-columns: 1fr 1fr; }
  body.trust-page .site-header { padding-inline: 18px; }
  body.trust-page .trust-header-nav { display: none; }
  body.trust-page .trust-hero { grid-template-columns: 1fr; gap: 25px; padding-block: 46px; }
  body.trust-page .trust-content { grid-template-columns: 1fr; }
  body.trust-page .trust-status-grid { grid-template-columns: 1fr; }
  body.trust-page .trust-limits { position: static; grid-row: 1; }
}

@media (max-width: 520px) {
  body > .app-shell > #launch-status { min-height: 26px; padding: 5px 10px !important; font-size: 10px; }
  body .container { width: calc(100% - 32px); }
  body .auth-actions { display: none; }
  body #page-home h1 { font-size: 45px; }
  body #page-home .boarding-role-actions { grid-template-columns: 1fr; }
  body #page-home .boarding-role-card { min-height: 82px; }
  body #page-home .boarding-pass { padding: 20px; }
  body #page-home .boarding-details div { display: grid; gap: 2px; }
  body #page-home .boarding-details dd { text-align: left; }
  body #page-home .trust-context { padding: 24px 20px; }
  body #page-home .home-secondary > summary { align-items: start; flex-direction: column; padding-right: 42px; position: relative; }
  body #page-home .home-secondary > summary::after { position: absolute; right: 16px; top: 10px; }
  body #page-trips .market-hero-copy { display: block; }
  body #page-trips .market-role-choices { grid-template-columns: 1fr; }
  body #page-trips .search-fields { grid-template-columns: 1fr; }
  body .publication-role-switch { grid-template-columns: 1fr; }
  body .publication-stepper strong { display: none; }
  body .publication-form-card,
  body .publication-summary { padding: 20px; }
  body .publication-step-fields { grid-template-columns: 1fr; }
  body .space-hero-bubble { display: grid; }
  body .space-hero-side { width: 100%; }
  body .space-context-rail { grid-template-columns: 1fr; }
  body.trust-page .trust-brand img { width: 156px; }
  body.trust-page .trust-hero h1 { font-size: 40px; }
  body.trust-page .trust-content { padding-bottom: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}
/* Navigation et titres de page : mesures du prototype à largeur identique. */
@media (min-width: 901px) {
  body .nav-btn,
  body .nav-link-anchor,
  body .auth-actions [data-app-action="open-auth"],
  body.trust-page .trust-header-nav a {
    font-size: 16px;
    font-weight: 750;
  }

  /* Le prototype est ici la référence explicite de l'exploitant, et non une
     approximation à partir du guide : 58 px maximum et graisse 700. */
  body #page-trips .market-hero-copy h2,
  body .publication-head h2,
  body.trust-page .trust-hero h1 {
    font-size: clamp(40px, 4.5vw, 58px);
    font-weight: 700;
  }
}

body #page-home .boarding-eyebrow,
body .market-head .eyebrow,
body .publication-head .eyebrow,
body .space-hero-main .eyebrow {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body .market-head .eyebrow::before,
body .publication-head .eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: var(--pf-lagon);
  box-shadow: 0 0 0 5px rgba(25, 183, 165, .13);
}


/* Écarts mesurés le 21 août 2026 en servant le prototype en local (127.0.0.1:4173) et en
   comparant propriété par propriété avec la recette, à 1920 px — la résolution réelle de
   l'exploitante. Chaque valeur ci-dessous vient de STYLE_GUIDE_INTEGRATION.md, prioritaire
   sur le prototype en cas d'écart (A_LIRE_AVANT_INTEGRATION.md §2) ; là où le guide est
   muet (respirations de page), c'est la valeur du prototype. Motif commun : la couche de
   calibration précédente avait resserré les libellés et supprimé des marges basses, d'où
   des pages plus tassées que la référence. */

/* Prototype .field et .filters label : 13 px / 760 / 1,55.
   Manrope Variable couvre CONTINÛMENT 200–800 : 750 et 760 sont de vraies graisses. */
/* !important : compliance.css pose `#market-capacities .field label` (12 px), plus
   spécifique que ces sélecteurs — vérifié règle par règle dans le navigateur. */
body .field label,
body .field > label,
body .search-fields label,
body .search-panel label,
body .request-filter-panel label {
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 1.55;
}

/* Dans le prototype, seul le lead d'accueil est en 19 px. Les sous-titres
   de recherche et publication héritent du corps 16 px / 1,55. */
body #page-trips .market-hero-copy .lead,
body .publication-head .lead,
body.trust-page .trust-hero .lead {
  font-size: 16px;
  line-height: 1.55;
}

/* Guide, carte d'annonce : padding 18 à 20 px. Mesuré 16 px en vertical sur les lignes de
   résultat de la vue horaire. */
body #page-trips .schedule-row { padding: 19px; }

/* Décorations résiduelles vues à l'écran le 21 août 2026 sur « Mon espace » (capture de la
   page connectée) : pastilles rondes derrière les compteurs et dégradé + ombre portée sur
   la carte de score. A_LIRE_AVANT_INTEGRATION.md §3 proscrit dégradés décoratifs, grosses
   ombres et formes flottantes gratuites ; le prototype n'en a aucune. */
body .mini-kpis article::after { display: none !important; }
body .mini-kpis article {
  border: 1px solid var(--pf-line) !important;
  border-radius: var(--pf-radius-card) !important;
  background: var(--pf-paper) !important;
  box-shadow: none !important;
}
body .profile-score-card {
  border-radius: var(--pf-radius-card) !important;
  background: var(--pf-basalte) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* « Votre annonce » : le liseré était en indigo #6366f1 (et un dégradé indigo en fond),
   deux valeurs absentes de la palette — le guide ne prévoit que Basalte, Lagon, Ylang,
   Sable et Papier, et proscrit les dégradés décoratifs. Ylang est déjà l'accent « ceci
   vous concerne » ailleurs (pastilles de compte, étape courante). Décidé avec Andrea le
   21 août 2026. Le Lagon reste réservé à une recommandation réelle (guide, §cartes). */
body .own-listing {
  outline: 2px solid var(--pf-ylang) !important;
  outline-offset: -2px;
  background-image: none !important;
  background-color: color-mix(in srgb, var(--pf-ylang) 7%, var(--pf-paper)) !important;
}
body [data-theme="dark"] .trip-card.own-listing,
[data-theme="dark"] body .trip-card.own-listing {
  border-color: var(--pf-ylang) !important;
  box-shadow: none !important;
}

/* Cartes d'attention de « Mon espace » — reprises de .attention-card du prototype
   (design-audit/proposal/prototype/styles.css) : les deux actions les plus urgentes
   passent devant les compteurs, la première en Ylang. Recomposition demandée par
   INTEGRATION_BRIEF.md §2.7 (« autour des tâches et non des sources techniques ») et
   validée par Andrea le 21 août 2026. */
body .attention-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 28px 0 0;
}
body .attention-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-card);
  background: var(--pf-paper);
}
body .attention-card--ylang { border-color: #D3A915; background: #FFFBEA; }
body .attention-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--pf-subtle);
  color: var(--pf-basalte);
  font-weight: 800;
}
body .attention-card--ylang .attention-icon { background: var(--pf-ylang); }
body .attention-card small {
  display: block;
  color: var(--pf-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body .attention-card h3 { margin: 3px 0; font-size: 17px; letter-spacing: -.02em; }
body .attention-card p { margin: 0; color: var(--pf-muted); font-size: 12px; line-height: 1.5; }
body .attention-card .link-button {
  min-height: 44px;
  margin-top: 6px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--pf-action);
  font-weight: 800;
  cursor: pointer;
}
@media (max-width: 900px) {
  body .attention-grid { grid-template-columns: 1fr; }
}

/* Authentification — comparée écran contre écran avec le prototype (auth-shell) le
   4 septembre 2026, prototype servi en local à côté du site.
   1. Les champs de la fenêtre de connexion n'avaient AUCUNE marge intérieure : le
      `*{padding:0}` d'index.html s'appliquait et rien ne la rétablissait pour cette
      modale, contrairement aux formulaires de publication. Le texte saisi touchait la
      bordure. La règle vaut pour tous les champs texte, sans toucher aux cases à cocher,
      boutons radio ni curseurs, qui n'ont pas de marge intérieure.
   2. Rayon de modale à 28 px et ombre douce : STYLE_GUIDE_INTEGRATION.md §Modales impose
      28 px, et l'ombre mesurée (alpha .28) était bien plus lourde que le langage du
      prototype (.06). */
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
body select,
body textarea { padding: 11px 13px; }

body #production-auth-bg .modal,
body #production-checkout-bg .modal,
body #production-review-bg .modal,
body #production-report-bg .modal {
  border-radius: var(--pf-radius-feature);
  box-shadow: var(--pf-shadow);
}

/* Onglets « Connexion / Créer un compte » : soulignés comme dans le prototype
   (.auth-tabs), au lieu de pastilles pleines. */
body #production-auth-bg .auth-tabs {
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--pf-line);
  border-radius: 0;
  background: transparent;
}
body #production-auth-bg [data-app-action="auth-tab"] {
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent !important;
  color: var(--pf-basalte) !important;
  font-weight: 800;
}
body #production-auth-bg [data-app-action="auth-tab"].on,
body #production-auth-bg [data-app-action="auth-tab"][aria-selected="true"] {
  border-bottom-color: var(--pf-action);
  color: var(--pf-action) !important;
}

/* Filets de cartes — relevé exhaustif du 6 septembre 2026 dans
   design-audit/proposal/prototype/styles.css : le prototype n'utilise QU'UNE seule couleur
   de filet, `--line` (#CDD6D1), sur toutes ses cartes (.role-card, .filters, .trip-card,
   .form-card, .form-summary, .attention-card, .activity-card, .profile-card,
   .trust-manifest, .trust-limits, .state-card). compliance.css en avait accumulé sept
   variantes de gris bleutés (#DCE7E9, #DFE8EA, #E0E9EB, #E4ECEE, #DCE8EA, #E2E8F0,
   #E1EAEC), plus froides et plus claires : d'où des cartes qui ne se ressemblent pas d'un
   écran à l'autre. Seule exception conservée : les encarts d'information teintés, alignés
   sur le #BFD9D3 de .decision-proof. */
body .contract-single,
body .checkout-summary .detail-stack,
body .contract-parties > div,
body .support-ticket-card,
body .ticket-meta-chip,
body .ticket-opening-message,
body .support-message,
body .ticket-reply,
body .market-tabs,
body .search-panel,
body .request-filter-panel,
body .trip-card.compact,
body .request-card,
body .space-tabs,
body .mini-kpis article,
body .account-profile-card,
body .payment-status-card,
body .account-grid > .panel,
body .payment-panel,
body .mobile-drawer-head,
body .my-review-card { border-color: var(--pf-line) !important; }

body .support-guidance-card,
body .activity-overview,
body .search-help { border-color: #BFD9D3 !important; }

/* Géométrie des cartes de l'espace connecté — relevé du 6 septembre 2026 dans
   design-audit/proposal/prototype/styles.css. Le prototype n'emploie que deux rayons :
   `--radius-card` (20px) pour les cartes de liste, `--radius-feature` (28px) pour les
   cartes de contenu. Ses deux cartes latérales sont distinctes et le site les avait
   fondues dans une seule valeur (18px de retrait, 18px de rayon) :
     .profile-card / .activity-card  →  padding 22px, rayon 28px
     .help-card                      →  padding 18px, rayon 20px, gap 12px
   Le raccourci du site rendait donc la carte de contenu trop serrée et trop anguleuse,
   et la carte d'aide trop anguleuse elle aussi. compliance.css pose ces valeurs sans
   `!important` mais avec une sélectivité égale : on repasse derrière avec `!important`
   pour que l'ordre de chargement ne soit pas le seul arbitre. */
body .space-context-card {
  padding: 22px !important;
  border-radius: var(--pf-radius-feature) !important;
}

body .space-context-card.space-help-card {
  padding: 18px !important;
  border-radius: var(--pf-radius-card) !important;
  gap: 12px !important;
}

/* Graisse des pastilles d'état — arbitrage d'Andrea du 6 septembre 2026 : le prototype fait
   foi contre STYLE_GUIDE_INTEGRATION.md sur ce point précis.
   Le prototype demande une graisse de 850 sur `.status`, mais sa police est déclarée sur un
   axe `wght` de 200 à 800 : le navigateur la ramène à 800. C'est donc 800 qui est réellement
   rendu, et c'est 800 qu'on applique. La valeur intermédiaire, elle, reste interdite dans le
   CSS actif par tests/prototype-fidelity.test.js — à juste titre, puisqu'elle n'existe pas
   dans la fonte.
   Le guide dit 700 pour « prix et statuts » (§3) ; l'écart est assumé, pas subi. Les boutons
   étaient déjà passés à 800 plus haut dans ce fichier, les pastilles suivent.
   `.chip.mine` porte deux classes : sans `!important`, la règle de compliance.css l'emporte
   sur un sélecteur `body .chip`. */
body .chip,
body .chip.mine,
body .status,
body .account-badge { font-weight: 800 !important; }

/* Deux écarts relevés en mesurant la recette après déploiement, le 6 septembre 2026.
   1. Les pastilles numérotées de l'accueil restaient en 700 alors que le prototype met ses
      numéros d'étape au maximum de l'axe — leurs jumelles de « Comment ça marche »
      (.trust-steps article > span) étaient déjà passées à 800. Le guide range d'ailleurs
      les chiffres clés en 800 (§3).
   2. Le détail du calcul de prix s'affichait en 400, contre une graisse de 750 sur les
      valeurs de récapitulatif du prototype (.summary-card dd) — le total, lui, était déjà
      correct. 700 est la valeur autorisée la plus proche, et c'est aussi ce que le guide
      prescrit pour les prix. Le total garde ses 800 : la hiérarchie reste lisible. */
body .step-num { font-weight: 800 !important; }
body .calc div:not(.tot) { font-weight: 700; }

/* Sous 520 px, le prototype ramène toutes ses cartes de contenu à 20 px de retrait
   (.form-card, .form-summary, .auth-card, .timeline-card et .summary-card passent de 26-28
   à 20 dans son bloc @media (max-width:520px)). Le site gardait 26 px sur la carte de prix
   et 22 px sur les cartes d'étape : sur un conteneur de 343 px, cela mange près d'un sixième
   de la largeur utile. Mesuré sur la recette le 6 septembre 2026. */
@media (max-width: 520px) {
  body .price-card,
  body .step-card,
  body .space-context-card { padding: 20px !important; }

  body .space-context-card.space-help-card { padding: 18px !important; }
}
/* Mesures croisées du 6 septembre 2026 : prototype local et recette, même Chrome,
   même fonte, 1440×1000 / 390×844. Ces règles neutralisent les héritages restant
   d'index.html/compliance.css. Aucun champ, contrôle, état ou gestionnaire supprimé. */
body .button:not(.button-small),
body #page-home .boarding-pass > .button,
body .schedule-row-action .button { font-size: 16px; line-height: 1.55; }
body .site-header .header-inner { height: 100%; min-height: 0; }
body .main-nav .nav-btn { color: var(--pf-basalte); }
body #page-home .trust-context .eyebrow {
  display: inline-flex; padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; font-size: 12px;
  font-weight: 800; line-height: 1.55; letter-spacing: .09em;
}
body #page-home .home-secondary { padding: 0; border: 0; background: transparent; box-shadow: none; }

body .nav-btn,
body .nav-link-anchor {
  padding: 11px 14px;
  font-weight: 750;
  color: var(--pf-basalte);
  box-shadow: none !important;
}
body #page-home .trust-context h2,
body #page-trips .market-hero-copy h2,
body .publication-head h2,
body .space-hero-main h2,
body.trust-page .trust-hero h1 { font-weight: 700; }

body > .app-shell > #launch-status {
  padding: 7px 16px !important;
  line-height: 1.55;
}
body #page-home .lead { margin: 0 0 19px; }
body #page-home .boarding-proof { margin-bottom: 13px; }
body #page-home .boarding-role-card > b { font-size: 16px; }
body #page-home .boarding-pass { width: 100%; }
body #page-home .boarding-pass::after { display: none; }
/* Le décor est un pseudo-élément content-box dans le prototype. */
body #page-home .boarding-pass-ring { box-sizing: content-box; }
body #page-home .boarding-route b { line-height: 1.55; }
body #page-home .boarding-details dd { font-weight: 750; }

/* Logo : le symbole livré à sa vraie taille, et le nom dans la Manrope chargée
   par la page. Un SVG externe avec du texte ne peut pas hériter de sa police. */
body .brand.prototype-brand,
body.trust-page .trust-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--pf-basalte);
  text-decoration: none;
  flex-shrink: 0;
}
body .prototype-brand .brand-symbol,
body.trust-page .trust-brand .brand-symbol { width: 42px; height: 42px; }
body .prototype-brand .brand-name,
body.trust-page .trust-brand .brand-name { white-space: nowrap; }

/* Champs compacts du prototype, sans toucher aux cases/radios/fichiers ni
   aux couleurs fonctionnelles d'erreur et de validation. */
body .publication-step-fields input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
body .publication-step-fields select,
body .publication-step-fields textarea,
body .search-fields input:not([type="range"]),
body .search-fields select,
body .request-filter-panel select {
  min-height: 48px;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.55;
  background: #fff;
}
body #page-trips .search-panel input:not([type="range"]),
body #page-trips .search-panel select { border-radius: 11px !important; padding: 10px 12px; min-height: 46px; }
body .publication-head h2 { margin-top: 0; max-width: none; }
body .publication-step-fields .field { gap: 7px; }
body .publication-summary h3 { margin-bottom: 3px; font-weight: 700; letter-spacing: -.025em; }
body .publication-summary .summary-kicker { font-size: 10px; }
body .publication-summary .hint { font-size: 12px; }
body .publication-summary dl { margin: 20px 0; }
body .publication-summary dl div { padding: 8px 0; }
body .publication-summary dt { font-size: 11px; }
body .publication-summary dd { font-size: 12px; font-weight: 800; }
body .publication-form-card .platform-role-box { box-shadow: none; }

/* La recherche possède plus de filtres que la maquette : mêmes retraits, pas
   les énormes espaces hérités entre les champs. Les deux rôles restent visibles. */
body #page-trips .market-head .eyebrow { margin-bottom: 0; }
body #page-trips .market-hero-topline { margin-bottom: 6.2px; }
body #page-trips .market-hero-grid { margin-top: 20px; }
body #page-trips .market-role-count { grid-column: 2; grid-row: 1; margin: 0; }
body #page-trips .market-role-card { grid-template-rows: auto; row-gap: 0; }
body #page-trips .market-role-copy { grid-column: 1; grid-row: 1; }
body #page-trips .search-panel { min-width: 0; align-content: start; }
body #page-trips .search-fields { gap: 16px !important; align-content: start; }
body #page-trips .search-fields > .field,
body #page-trips .search-fields > .range-card { margin: 0; min-width: 0; }
body #page-trips .search-fields .search-field-fixed { grid-template-rows: auto 46px auto; }
body #page-trips .search-fields .field:not(.hidden) { display: grid; gap: 7px; align-content: start; }
body #page-trips .search-help { border: 0 !important; border-top: 1px solid var(--pf-subtle) !important; border-radius: 0 !important; }

/* Cartes standard : date 68 px, trajet 16 px, prix 22 px, tags de contenu 11/400.
   Les statuts d'action restent en 800 ; une capacité n'est pas un statut. */
body #page-trips .vl-travel-card,
body #page-trips .vl-request-card { grid-template-columns: 74px minmax(0, 1fr); column-gap: 18px; padding: 19px; }
body #page-trips .vl-ticket-stub { width: 68px; height: 68px; margin: 0; align-self: center; border-radius: 16px; }
body #page-trips .vl-ticket-date strong { font-size: 26px; margin: 0; line-height: 1; }
body #page-trips .vl-ticket-date span { font-size: 10px; }
body #page-trips .vl-travel-card > .listing-preview-line { padding-top: 0; }
body #page-trips .vl-travel-card > .request-meta { margin: 4px 0; padding-right: 0; }
body #page-trips .vl-travel-card .vl-route-tag,
body #page-trips .vl-request-card .vl-route-tag,
body #page-trips .schedule-row-route .vl-route-tag { font-size: 16px; font-weight: 700; line-height: 1.55; letter-spacing: normal; gap: 12px; }
body #page-trips .vl-travel-card .listing-preview-price,
body #page-trips .vl-request-card .listing-preview-price,
body #page-trips .schedule-row-price { font-size: 22px; font-weight: 700; color: var(--pf-basalte); }
body #page-trips .vl-travel-card .chip:not(.mine):not(.match),
body #page-trips .vl-request-card .chip:not(.mine):not(.match),
body #page-trips .schedule-row-capacity .chip { font-size: 11px; font-weight: 400 !important; padding: 5px 9px; }

/* La vue horaire utilise les mêmes six informations, distribuées comme la
   carte de la référence (date / trajet et détails / prix et action). */
body #page-trips .schedule-row {
  grid-template-columns: 74px minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  gap: 4px 18px;
  min-height: 144px;
  padding: 19px;
}
body #page-trips .schedule-row-date { grid-column: 1; grid-row: 1 / 4; }
body #page-trips .schedule-row-route { grid-column: 2; grid-row: 1; min-width: 0; }
body #page-trips .schedule-row-arrival { grid-column: 2; grid-row: 2; font-size: 12px; color: var(--pf-muted); }
body #page-trips .schedule-row-capacity { grid-column: 2; grid-row: 3; }
body #page-trips .schedule-row-price { grid-column: 3; grid-row: 1; text-align: right; }
body #page-trips .schedule-row-action { grid-column: 3; grid-row: 2 / 4; align-self: end; }
body #page-trips .schedule-row-action .button { padding: 0 4px; min-height: 44px; }
body #page-trips .schedule-rows { gap: 12px; }
body .attention-card h3 { font-size: 18.72px; line-height: 1.55; letter-spacing: -.025em; }

/* Comment ça marche : le <ol> d'accessibilité après le lead invalidait
   :last-child. Le paragraphe restait donc noir en 16 px au lieu de gris en 17. */
body.trust-page .trust-hero-copy > p:not(.trust-eyebrow) {
  max-width: 650px; margin: 0 0 17px; color: var(--pf-muted); font-size: 17px; line-height: 1.55;
}
body.trust-page .trust-manifest li { font-weight: 760; }
body.trust-page .trust-section-intro h2,
body.trust-page .trust-steps h3 { font-weight: 700; letter-spacing: -.025em; }
body.trust-page .trust-limits .button {
  display: flex; justify-content: center; align-items: center; text-align: center;
  box-sizing: border-box; width: 100%; border: 1px solid transparent;
}
@media (max-width: 900px) {
  body .prototype-brand .brand-symbol,
  body.trust-page .trust-brand .brand-symbol { width: 38px; height: 38px; }
  body #page-home .boarding-hero { padding-bottom: 110px; }
  body #page-home .boarding-hero-copy { display: contents; }
  body #page-home .boarding-hero-copy > :not(.positioning-order) { grid-column: 1; }
  body #page-home .boarding-pass { grid-row: 6; }
  body #page-home .lead { margin-bottom: 17px; }
  body #page-home .boarding-role-actions { grid-template-columns: 1fr; }
  body #page-trips .market-head { padding-top: 38px !important; }
  body #page-trips #market-capacities.on,
  body #page-trips #market-requests.on { grid-template-columns: minmax(0, 1fr); padding-bottom: 110px !important; }
  body #page-trips .search-panel { grid-template-columns: minmax(0, 1fr); width: 100%; }
  body #page-trips .schedule-row { grid-template-columns: 60px minmax(0, 1fr); }
  body #page-trips .schedule-row-date { width: 56px; min-width: 56px; height: 56px; grid-row: 1 / 4; }
  body #page-trips .schedule-row-price { grid-column: 2; grid-row: 4; text-align: left; }
  body #page-trips .schedule-row-action { grid-column: 2; grid-row: 5; }
}
@media (max-width: 520px) {
  body .prototype-brand .brand-name,
  body.trust-page .trust-brand .brand-name { font-size: 17px; }
  body #page-trips .schedule-row { padding: 15px; column-gap: 12px; }
  body #page-trips .schedule-row-route .vl-route-tag { font-size: 14px; }
  body #page-trips .vl-travel-card,
  body #page-trips .vl-request-card { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; padding: 15px; }
  body #page-trips .vl-ticket-stub { width: 56px; height: 56px; }
}

/* Détails communs — cartes d'embarquement et fenêtres, 7 septembre 2026.
   Une seule palette pour les objets et les trajets ; les statuts restent explicites. */
body .main-nav .nav-btn[data-action="open-publish-choice"],
body .publication-head h2 { color: var(--pf-basalte) !important; }
body .main-nav .nav-btn[data-action="open-publish-choice"]:hover { color: var(--pf-action) !important; }

body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
body select, body textarea, body option {
  font-family: "Manrope Variable", Manrope, sans-serif !important;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.55;
  color: var(--pf-basalte);
}
body select, body .modal input:not([type="checkbox"]):not([type="radio"]), body .modal textarea {
  background-color: #fff;
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-control);
  min-height: 48px;
}
body #page-trips .schedule-row,
body #page-trips .vl-travel-card,
body #page-trips .vl-request-card {
  background: var(--pf-paper) !important;
  border: 1px solid var(--pf-line) !important;
  border-radius: var(--pf-radius-card) !important;
  box-shadow: none !important;
}
body #page-trips .schedule-row:hover { border-color: var(--pf-action) !important; }
body #page-trips .vl-ticket-stub,
body #page-trips .vl-ticket-stub.request,
body #page-trips .schedule-row-date {
  background: var(--pf-subtle) !important;
  color: var(--pf-basalte);
  border: 0;
  border-right: 1px dashed var(--pf-line);
}
body #page-trips .schedule-row-date { position: relative; overflow: visible; }
body #page-trips .schedule-row-date::before,
body #page-trips .schedule-row-date::after {
  content: ""; position: absolute; right: -8px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--pf-sable); border: 1px solid var(--pf-line);
}
body #page-trips .schedule-row-date::before { top: -8px; }
body #page-trips .schedule-row-date::after { bottom: -8px; }
body #page-trips .vl-request-card > .listing-preview-line { padding-top: 0; }
body #page-trips .listing-preview-footer {
  border-top: 1px dashed var(--pf-line); margin-top: 12px; padding-top: 14px; gap: 16px;
}
body #publish-choice-bg .modal,
body #listing-detail-bg .modal,
body #profile-modal-bg .modal {
  background: var(--pf-paper) !important;
  color: var(--pf-basalte);
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-feature);
  box-shadow: var(--pf-shadow);
  padding: 28px;
}
body #publish-choice-bg .modal-title-row,
body #listing-detail-bg .modal-title-row { padding-bottom: 18px; border-bottom: 1px solid var(--pf-line); }
body #publish-choice-bg h3, body #listing-detail-bg h3 { color: var(--pf-basalte); font-weight: 700; letter-spacing: -.035em; }
body .publish-choice-card {
  background: var(--pf-paper); border: 1px solid var(--pf-line); border-radius: 20px;
  padding: 22px; gap: 12px; color: var(--pf-basalte); box-shadow: none;
}
body .publish-choice-card:hover { border-color: var(--pf-action); box-shadow: none; transform: none; }
body .publish-choice-card .choice-icon { background: var(--pf-subtle); color: var(--pf-action); }
body .publish-choice-card strong { font-size: 17px; font-weight: 700; }
body #listing-detail-bg .detail-stack { background: transparent; color: var(--pf-basalte); }
body #listing-detail-bg .detail-row { border-color: var(--pf-line); font-size: 13px; line-height: 1.55; }
body #listing-detail-bg .detail-row > span { color: var(--pf-muted); }
body #listing-detail-bg .detail-row > strong { font-weight: 700; }

/* Le consentement reste inchangé. Une fenêtre ouverte doit passer devant le
   bandeau (50000), qui redevient accessible dès sa fermeture. */
body #production-auth-bg { z-index: 60000 !important; }
body #production-auth-bg .modal { z-index: 60001 !important; }
@media (max-width: 700px) {
  body .publish-choice-grid { grid-template-columns: minmax(0, 1fr); }
  body #publish-choice-bg .modal,
  body #listing-detail-bg .modal,
  body #profile-modal-bg .modal { padding: 22px 18px; }
  body #listing-detail-bg .listing-detail-grid { grid-template-columns: minmax(0, 1fr); }
  body #page-trips .listing-preview-footer { flex-wrap: wrap; }
}

body .listing-poster { display: flex; align-items: center; gap: 10px; color: var(--pf-basalte); }
body .listing-avatar {
  flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center;
  position: relative; overflow: hidden; border-radius: 50%;
  background: var(--pf-subtle); color: var(--pf-basalte); font-size: 13px; font-weight: 800;
}
body .listing-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body .listing-poster > span:last-child { display: grid; gap: 1px; min-width: 0; }
body .listing-poster small { color: var(--pf-muted); font-size: 11px; font-weight: 400; }
body .listing-poster .profile-link { font-family: inherit; font-size: 13px; font-weight: 700; color: var(--pf-basalte); text-align: left; }
body #page-trips .schedule-row-poster { grid-column: 2 / -1; grid-row: 4; padding-top: 12px; margin-top: 8px; border-top: 1px dashed var(--pf-line); }
body #listing-detail-content > .listing-poster { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px dashed var(--pf-line); }
@media (max-width: 900px) { body #page-trips .schedule-row-poster { grid-column: 1 / -1; grid-row: 6; } }

/* Même densité et mêmes actions dans les deux familles de cartes. */
body #page-trips .vl-travel-card,
body #page-trips .vl-request-card { min-height: 0; align-content: start; row-gap: 8px; }
body #page-trips .vl-ticket-stub { align-self: start; margin-top: 4px; }
body #page-trips .vl-travel-card > .request-meta,
body #page-trips .vl-request-card > .request-meta { margin: 0 !important; }
body #page-trips .vl-travel-card > .route-coverage { margin: 0; padding: 8px 0; gap: 4px; }
body #page-trips .vl-travel-card > .listing-preview-footer,
body #page-trips .vl-request-card > .listing-preview-footer {
  border-top: 1px dashed var(--pf-line) !important;
  margin-top: 8px; padding: 14px 0 0 !important;
}
body #page-trips .vl-request-badge { background: var(--pf-sable) !important; color: var(--pf-basalte) !important; }
body #page-trips [data-action="open-request-detail"],
body #page-trips [data-action="open-trip-detail"] {
  color: var(--pf-action); background: transparent; border-color: transparent;
  box-shadow: none; font-family: inherit; font-weight: 800;
}
body #page-trips [data-action="share-listing"] { display: inline-flex !important; }

body #listing-detail-bg, body #publish-choice-bg { background: rgba(21, 43, 40, .52); }
body .listing-trip-ticket {
  display: flex; align-items: center; gap: 20px; align-self: start;
  padding: 24px; border: 1px dashed var(--pf-line); border-radius: 20px;
  background: var(--pf-sable); color: var(--pf-basalte); min-width: 0;
}
body .listing-trip-ticket > .vl-ticket-date { flex: 0 0 52px; }
body .listing-trip-ticket small { font-size: 10px; font-weight: 800; color: var(--pf-action); }
body .listing-trip-ticket .vl-route-tag { font-size: 16px; flex-wrap: wrap; }
body .listing-trip-ticket p { margin: 8px 0 0; font-size: 12px; color: var(--pf-muted); }
body #listing-detail-bg .listing-photo { background: var(--pf-sable); color: var(--pf-basalte); border-color: var(--pf-line); }
body #listing-detail-bg .listing-photo .svg-icon { color: var(--pf-action); }

body #listing-detail-bg .detail-row {
  display: grid; grid-template-columns: minmax(100px, .7fr) minmax(0, 1.3fr);
  gap: 16px; align-items: start;
}
body #listing-detail-bg .detail-row > strong { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  body #listing-detail-bg .detail-row { grid-template-columns: 100px minmax(0, 1fr); gap: 12px; }
}

/* Référence exacte : liaison fine et un point d'arrivée, sans flèche ni perforations. */
body .vl-route-link { display: block; position: relative; flex: 1 1 72px; min-width: 28px; max-width: 120px; width: 72px; height: 1px !important; background: var(--pf-line) !important; border: 0 !important; font-size: 0; color: transparent; }
body .vl-route-link::before { display: none !important; }
body .vl-route-link::after { content: ""; display: block; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; background: var(--pf-lagon); border: 0; border-radius: 50%; transform: none; }
body #page-trips .vl-ticket-stub::before,
body #page-trips .vl-ticket-stub::after,
body #page-trips .schedule-row-date::before,
body #page-trips .schedule-row-date::after { display: none !important; content: none !important; }
body #page-trips .vl-ticket-stub, body #page-trips .schedule-row-date { border: 0; }

/* Une case et son libellé constituent une seule ligne, même dans un groupe. */
body .check { display: flex !important; align-items: flex-start; gap: 8px; }
body .check > input[type="checkbox"], body .check > input[type="radio"] {
  flex: 0 0 16px; width: 16px; height: 16px; min-height: 0;
  margin: 3px 0 0 !important; position: static; transform: none; align-self: flex-start;
}
body .check > label { flex: 1 1 auto; margin: 0 !important; min-width: 0; line-height: 1.55; }
body #tf-accepted { display: flex; flex-wrap: wrap; gap: 14px 20px; }
body #tf-accepted .check { max-width: 100%; }

/* Navigation : les libellés ne sont jamais tronqués, les actions restent disponibles. */
body .header-inner { gap: 14px; }
body .main-nav .nav-btn { flex-shrink: 0; white-space: nowrap; overflow: visible; text-overflow: clip; }
body .main-nav { flex-shrink: 0; }
body .main-nav .nav-btn[data-view="deals"] { position: relative; padding-right: 23px; }
body #deal-count { display: none; }
body .main-nav .nav-alert { right: 7px; top: 8px; min-width: 8px; width: 8px; height: 8px; padding: 0; border-radius: 50%; background: #B42318; font-size: 0; }
@media (min-width: 901px) {
  body .site-header { height: auto; min-height: 76px; }
  body .header-inner { height: auto; min-height: 76px; flex-wrap: wrap; padding-block: 12px; }
  body .auth-actions { margin-left: auto; flex-shrink: 0; flex-wrap: wrap; }
}

/* La conversation suit immédiatement les actions, avant les codes, sur téléphone. */
@media (max-width: 900px) {
  body .deal-card > .deal-main { order: 1; }
  body .deal-card > .msg-drawer { order: 2; grid-column: 1 / -1; }
  body .deal-card > .deal-stub { order: 3; }
}

/* Soumission ciblée : titre et parcours propres, pas de faux choix de publication. */
body #page-send.targeted-submission .publication-role-switch,
body #page-send.targeted-submission .publication-stepper { display: none; }
body #page-send.targeted-submission .publication-layout { margin-top: 24px; }
body #page-send.targeted-submission .targeted-route-field { display: none !important; }
body #page-send.targeted-submission .publication-step-fields { grid-auto-flow: row; }
body #page-send.targeted-submission .publication-step legend small { display: none; }

/* Thème sombre : mêmes rôles de couleurs sur toutes les pages, pas seulement le menu. */
html[data-theme="dark"] {
  --pf-basalte: #E5F0EB; --pf-sable: #101917; --pf-paper: #182823;
  --pf-subtle: #243B34; --pf-muted: #B4C8C0; --pf-line: #496359;
  --pf-action: #61D7C4; --pf-danger: #FFB4AB;
  --vl-muted: var(--pf-muted); --vl-text-secondary: var(--pf-muted);
  --vl-action: var(--pf-action); --vl-paper: var(--pf-paper);
  --vl-line: var(--pf-line); --vl-subtle: var(--pf-subtle);
  color-scheme: dark; background: var(--pf-sable);
}
html[data-theme="dark"] body,
html[data-theme="dark"] body .app-shell,
html[data-theme="dark"] body main,
html[data-theme="dark"] body .section,
html[data-theme="dark"] body .space-content,
html[data-theme="dark"] body .space-tab-panel { background-color: var(--pf-sable) !important; color: var(--pf-basalte); }
html[data-theme="dark"] body .site-header,
html[data-theme="dark"] body .mobile-bottom-nav,
html[data-theme="dark"] body .mobile-drawer,
html[data-theme="dark"] body .modal,
html[data-theme="dark"] body .panel,
html[data-theme="dark"] body .publication-form-card,
html[data-theme="dark"] body .publication-summary,
html[data-theme="dark"] body .space-hero-metrics article,
html[data-theme="dark"] body .deal-card,
html[data-theme="dark"] body .deal-main,
html[data-theme="dark"] body .deal-stub,
html[data-theme="dark"] body .attention-card { background: var(--pf-paper) !important; color: var(--pf-basalte) !important; border-color: var(--pf-line) !important; }
html[data-theme="dark"] body .nav-btn,
html[data-theme="dark"] body .brand-name,
html[data-theme="dark"] body .deal-obj,
html[data-theme="dark"] body .space-tab,
html[data-theme="dark"] body .modal h3,
html[data-theme="dark"] body .deal-card strong,
html[data-theme="dark"] body .deal-card b { color: var(--pf-basalte) !important; }
html[data-theme="dark"] body .hint,
html[data-theme="dark"] body .sub,
html[data-theme="dark"] body .deal-card small { color: var(--pf-muted) !important; }
html[data-theme="dark"] body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html[data-theme="dark"] body select,
html[data-theme="dark"] body textarea,
html[data-theme="dark"] body option { background: var(--pf-sable) !important; color: var(--pf-basalte) !important; border-color: var(--pf-line) !important; }
html[data-theme="dark"] body .button-primary,
html[data-theme="dark"] body .space-tab.on { background: var(--pf-action) !important; color: #152B28 !important; border-color: var(--pf-action) !important; }
html[data-theme="dark"] body .button-secondary,
html[data-theme="dark"] body .button-ghost,
html[data-theme="dark"] body .targeted-flow-note,
html[data-theme="dark"] body .tracking-box,
html[data-theme="dark"] body .msg-drawer,
html[data-theme="dark"] body .empty { background: var(--pf-subtle) !important; color: var(--pf-basalte) !important; border-color: var(--pf-line) !important; }
html[data-theme="dark"] body .platform-role-box,
html[data-theme="dark"] body .publication-limit { background: #38331C !important; color: #F4E8B3 !important; }
html[data-theme="dark"] body .site-footer { background: #152B28 !important; color: #E5F0EB !important; }
html[data-theme="dark"] body .site-footer a,
html[data-theme="dark"] body .site-footer p { color: #B4C8C0 !important; }
html[data-theme="dark"] body #launch-status { background: #152B28 !important; color: #E5F0EB !important; }
.object-draft-tools {
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid var(--pf-line);
  border-radius: 12px;
  background: var(--pf-subtle);
  color: var(--pf-basalte);
}
.object-draft-tools p { margin: 0 0 8px; font-size: 13px; }
.object-draft-tools .form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.object-draft-tools button { white-space: normal; }
html[data-theme="dark"] body #page-home .boarding-role-card.primary,
html[data-theme="dark"] body #page-home .boarding-role-card.primary small,
html[data-theme="dark"] body #page-home .boarding-role-card.primary .boarding-role-icon { color: #152B28 !important; }
html[data-theme="dark"] body .trust-context,
html[data-theme="dark"] body .trust-context-grid article { background: var(--pf-paper) !important; color: var(--pf-basalte) !important; border-color: var(--pf-line) !important; }
html[data-theme="dark"] body .trust-context h2,
html[data-theme="dark"] body .trust-context strong { color: var(--pf-basalte) !important; }
html[data-theme="dark"] body .trust-context p { color: var(--pf-muted) !important; }
html[data-theme="dark"] body .space-context-card.space-help-card h3,
html[data-theme="dark"] body .role-banner strong { color: var(--pf-basalte) !important; }
html[data-theme="dark"] body .activity-pill strong,
html[data-theme="dark"] body .eyebrow { color: var(--pf-action) !important; }
html[data-theme="dark"] body .todo-clear p,
html[data-theme="dark"] body .space-context-card p { color: var(--pf-muted) !important; }
body .deal-card .route-path { height: 1px; border: 0; background: var(--pf-line); position: relative; }
body .deal-card .route-path svg { display: none; }
body .deal-card .route-path::after { content: ''; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--pf-lagon); }
/* Mobile: results first, controls reachable, review before publishing. */
.mobile-filter-fold { display: contents; }
.mobile-filter-fold > summary, .mobile-filter-shortcut, .mobile-space-picker { display: none; }
body input[type="file"] { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 48px; padding: 0; font: inherit; font-size: 13px; color: var(--pf-basalte); background: var(--pf-paper); border: 1px solid var(--pf-line); border-radius: 12px; }
body input[type="file"]::file-selector-button { min-height: 46px; margin: 0 12px 0 0; padding: 10px 14px; border: 0; border-right: 1px solid var(--pf-line); background: var(--pf-subtle); color: var(--pf-basalte); font: inherit; font-weight: 700; cursor: pointer; }
html[data-theme="dark"] body .account-badge, html[data-theme="dark"] body .profile-editor-label, html[data-theme="dark"] body .check label { color: var(--pf-basalte); }
html[data-theme="dark"] body .account-badge { background: var(--pf-subtle); border-color: var(--pf-line); }
html[data-theme="dark"] body .publication-summary-icon, html[data-theme="dark"] body .summary-unit { background: var(--pf-subtle); color: var(--pf-action); }
html[data-theme="dark"] body input::placeholder, html[data-theme="dark"] body textarea::placeholder { color: var(--pf-muted); opacity: 1; }
@media (max-width: 900px) {
  body #page-trips .market-section { padding-top: 20px; }
  body #page-trips .market-head { padding-block: 0 16px; margin-bottom: 12px; gap: 12px; }
  body #page-trips .market-head h2 { font-size: 30px; line-height: 1.1; margin: 0; }
  body #page-trips .market-head .eyebrow, body #page-trips .market-head .lead { display: none; }
  body #page-trips .market-hero-grid { margin-top: 12px; }
  body #page-trips .market-role-card { min-height: 54px; padding: 10px; }
  body #page-trips .mobile-filter-fold { display: block; grid-column: 1 / -1; scroll-margin-top: 90px; margin-bottom: 12px; }
  body #page-trips .mobile-filter-fold:not([open]) > .panel { display: none !important; }
  body #page-trips .mobile-filter-fold > summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; min-height: 46px; border: 1px solid var(--pf-line); border-radius: 12px; background: var(--pf-paper); color: var(--pf-basalte); font-weight: 750; cursor: pointer; }
  body #page-trips .mobile-filter-fold > summary::after { content: "+"; }
  body #page-trips .mobile-filter-fold[open] > summary::after { content: "−"; }
  body #page-trips .mobile-filter-fold > .panel { margin-top: 8px; }
  body #page-trips .market-subhead { margin: 0 0 10px; }
  body #page-trips .market-subhead .hint, body #page-trips .results-kicker { display: none; }
  body #page-trips .mobile-filter-shortcut { display: inline-flex; position: fixed; left: 16px; bottom: 88px; z-index: 120; min-height: 44px; box-shadow: var(--pf-shadow); }
  body .publication-step-final .publication-summary { grid-column: 1 / -1; width: 100%; margin: 12px 0; padding: 18px !important; border-radius: 16px; }
  body .publication-step-final .publication-summary-icon, body .publication-step-final .summary-progress { display: none; }
  body .publication-step-final .publication-summary h3 { font-size: 20px; margin-top: 8px; }
  body #page-deals .space-tabs { display: none !important; }
  body .mobile-space-picker { display: grid; gap: 6px; font-size: 13px; font-weight: 750; grid-column: 1 / -1; color: var(--pf-basalte); }
  body .mobile-space-picker select { min-height: 48px; width: 100%; }
}
@media (max-width: 900px) {
  body #page-trips .market-head { padding-top: 0 !important; padding-bottom: 12px !important; }
  body #page-trips .market-role-choices { grid-template-columns: 1fr 1fr !important; }
  body #page-trips #market-capacities.on, body #page-trips #market-requests.on { gap: 12px; }
  body #page-trips .mobile-filter-fold { border: 0; padding: 0; background: transparent; margin: 0; }
  body #page-trips .market-subhead h3 { font-size: 20px; margin: 0; }
  body #page-trips .trip-schedule { margin-top: 0; }
  body > .mobile-filter-shortcut { display: inline-flex; position: fixed; left: 16px; bottom: 88px; z-index: 120; min-height: 44px; box-shadow: var(--pf-shadow); }
}
body > .mobile-filter-shortcut[hidden] { display: none !important; }
@media (min-width: 901px) {
  body #page-trips .mobile-filter-fold > .panel { grid-column: 1; grid-row: 1 / span 6; }
}
@media (max-width: 900px) {
  body #page-trips .market-panel { padding-top: 12px !important; }
}
body .space-context-card.space-help-card .button { background: var(--pf-subtle) !important; color: var(--pf-basalte) !important; border-color: var(--pf-line) !important; }
body .profile-optional-heading p, body .account-section-title p, body .profile-photo-controls .file-status { color: var(--pf-muted) !important; }
body .account-profile-card input:not([type="checkbox"]), body .payment-panel input:not([type="checkbox"]):not([type="file"]) { border: 1px solid var(--pf-line); border-radius: 12px; background: var(--pf-paper); color: var(--pf-basalte); padding: 10px 12px; min-height: 46px; }
@media (max-width: 900px) {
  body #page-deals .space-container { padding-top: 20px; }
  body #page-deals .space-hero-bubble { padding: 0 0 16px !important; gap: 14px !important; }
  body #page-deals .space-hero-main h2 { font-size: 28px !important; }
  body #page-deals .space-hero-main p { margin-bottom: 0; }
  body #page-deals .space-hero-side { display: grid; gap: 12px; }
  body #page-deals .space-hero-metrics { margin: 0; gap: 8px; }
  body #page-deals .space-hero-metrics article { padding: 10px !important; min-height: 0; }
  body #page-deals .space-hero-actions { margin: 0; }
}
@media (max-width: 900px) {
  body #page-trips .market-role-card { grid-template-columns: minmax(0, 1fr) !important; min-width: 0; width: auto; }
  body #page-trips .market-role-copy { min-width: 0; }
  body #page-trips .market-role-copy strong { display: block; white-space: normal; line-height: 1.35; }
}

/* Ordre des couches — boutons flottants contre fenêtres.
   Signalé en test mobile le 9 septembre 2026 : « le bouton poser une question est caché par
   le bouton filtres et tri », et « le bouton créer un compte est caché ».

   Mesuré sur test.valiselibre.fr en 375 px : les deux symptômes ont une seule cause. Les
   fenêtres (.modal-bg, style intégré à index.html) sont en z-index 100, alors que le bouton
   SAV est en 175 et le raccourci de filtres en 120. Les deux boutons fixes flottaient donc
   AU-DESSUS de toute fenêtre ouverte — l'un en bas à droite, l'autre en bas à gauche, soit
   précisément là où se trouvent les actions de validation.

   Une fois les boutons flottants réglés, une TROISIÈME couche restait au-dessus : le bandeau
   cookies (#production-cookie-banner, z-index 50000), dont le bouton « Personnaliser »
   recouvrait « Poser une question ». Ce bandeau avait déjà causé le même défaut sur la
   connexion, corrigé au cas par cas en montant la seule fenêtre d'authentification à 60000.
   On généralise ici : TOUTES les fenêtres passent à ce niveau, au lieu de refaire la même
   correction fenêtre par fenêtre à chaque fois qu'un défaut est signalé.

   On ne descend pas les boutons flottants : leur hauteur les place au-dessus de la barre de
   navigation mobile, ce qui reste souhaitable hors fenêtre. On les masque pendant une
   fenêtre, pour les navigateurs qui comprennent :has() — un bouton flottant n'a de toute
   façon aucun sens à ce moment-là, puisqu'il désigne une action de la page qui est derrière. */
body .modal-bg,
body .drawer-bg,
body .mobile-drawer-bg { z-index: 60000; }

body:has(.modal-bg.open) .sav-widget-btn,
body:has(.modal-bg.open) .mobile-filter-shortcut,
body:has(.mobile-drawer-bg.open) .sav-widget-btn,
body:has(.mobile-drawer-bg.open) .mobile-filter-shortcut { display: none !important; }