/*
 * COLIXO — Prototype visuel local V2
 * Couche strictement présentative, limitée aux pages qui portent
 * la classe body.client-visual-v2. Aucun comportement métier.
 */

body.client-visual-v2 {
  --v2-navy: #111d2d;
  --v2-navy-soft: #1a2a3f;
  --v2-ink: #182334;
  --v2-muted: #667085;
  --v2-ivory: #f6f2e9;
  --v2-card: #fffdfa;
  --v2-line: #e4ddd1;
  --v2-orange: #ed7024;
  --v2-orange-dark: #c95616;
  --v2-orange-soft: #fff0e5;
  --v2-green: #2f7d5d;
  --hub-sidebar-w: 16.25rem;
  color: var(--v2-ink);
  background: var(--v2-ivory);
}

body.client-visual-v2 .portal-layout,
body.client-visual-v2 .portal-stage,
body.client-visual-v2 .portal-main {
  background: var(--v2-ivory) !important;
}

/* Navigation sombre, lisible et plus professionnelle. */
body.client-visual-v2 .sidebar {
  background: var(--v2-navy) !important;
  border-right: 0 !important;
  box-shadow: 12px 0 36px rgb(17 29 45 / 12%);
}

body.client-visual-v2 .sidebar__brand {
  border-bottom-color: rgb(255 255 255 / 10%) !important;
}

body.client-visual-v2 .sidebar__brand-name,
body.client-visual-v2 .sidebar__user-name,
body.client-visual-v2 .sidebar__company,
body.client-visual-v2 .nav-item,
body.client-visual-v2 .hub-brand-signature__link {
  color: #f8fafc !important;
}

body.client-visual-v2 .sidebar__brand-x,
body.client-visual-v2 .sidebar__brand-tag {
  color: var(--v2-orange) !important;
}

body.client-visual-v2 .logo__tagline,
body.client-visual-v2 .sidebar__section-label,
body.client-visual-v2 .sidebar__user-label {
  color: #aeb9c8 !important;
}

body.client-visual-v2 .nav-item {
  border-radius: .7rem;
  opacity: .9;
}

body.client-visual-v2 .nav-item:hover {
  color: #fff !important;
  background: rgb(255 255 255 / 8%) !important;
  opacity: 1;
}

body.client-visual-v2 .nav-item--active {
  color: #fff !important;
  background: linear-gradient(90deg, rgb(237 112 36 / 25%), rgb(237 112 36 / 8%)) !important;
  box-shadow: inset 3px 0 0 var(--v2-orange);
  opacity: 1;
}

body.client-visual-v2 .nav-item__icon {
  color: var(--v2-orange) !important;
}

body.client-visual-v2 .sidebar__avatar {
  color: #fff !important;
  background: var(--v2-orange) !important;
}

body.client-visual-v2 .sidebar__footer {
  border-top-color: rgb(255 255 255 / 10%) !important;
}

body.client-visual-v2 .portal-chrome {
  min-height: 4.25rem;
  background: rgb(255 253 250 / 94%) !important;
  border-bottom: 1px solid var(--v2-line) !important;
  box-shadow: 0 4px 20px rgb(17 29 45 / 5%);
  backdrop-filter: blur(12px);
}

body.client-visual-v2 .portal-chrome__cta,
body.client-visual-v2 .hub-btn--primary {
  color: #fff !important;
  background: var(--v2-orange) !important;
  border-color: var(--v2-orange) !important;
  box-shadow: 0 7px 18px rgb(237 112 36 / 20%);
}

body.client-visual-v2 .portal-chrome__cta:hover,
body.client-visual-v2 .hub-btn--primary:hover {
  background: var(--v2-orange-dark) !important;
}

/* Accueil : composition claire, cartes colis et accents orange mesurés. */
body.client-visual-v2.client-hub-home .portal-main .page-content {
  padding: 1.65rem clamp(1rem, 2.5vw, 2.25rem) 2.5rem;
}

body.client-visual-v2.client-hub-home .v1t-shell {
  gap: 1.15rem;
}

body.client-visual-v2.client-hub-home .v1t-toprow__title-text {
  color: var(--v2-navy) !important;
  font-size: clamp(1.65rem, 2.8vw, 2.25rem);
  letter-spacing: -.035em;
}

body.client-visual-v2.client-hub-home .v1t-toprow__subtitle {
  color: var(--v2-muted) !important;
}

body.client-visual-v2.client-hub-home .hub-quick-track__input {
  color: var(--v2-ink) !important;
  background: #fff !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: .75rem !important;
}

body.client-visual-v2.client-hub-home .hub-quick-track__input:focus {
  border-color: var(--v2-orange) !important;
  box-shadow: 0 0 0 3px rgb(237 112 36 / 13%) !important;
}

body.client-visual-v2.client-hub-home .v1t-alert,
body.client-visual-v2.client-hub-home .v1t-hero,
body.client-visual-v2.client-hub-home .v1t-kpi,
body.client-visual-v2.client-hub-home .v1t-recent,
body.client-visual-v2.client-hub-home .v1t-actions {
  background: var(--v2-card) !important;
  border: 1px solid var(--v2-line) !important;
  box-shadow: 0 10px 30px rgb(17 29 45 / 6%) !important;
}

body.client-visual-v2.client-hub-home .v1t-alert {
  border-left: 4px solid var(--v2-orange) !important;
}

body.client-visual-v2.client-hub-home .v1t-alert__title,
body.client-visual-v2.client-hub-home .hub-card__title {
  color: var(--v2-navy) !important;
}

body.client-visual-v2.client-hub-home .v1t-hero {
  position: relative;
  overflow: hidden;
}

body.client-visual-v2.client-hub-home .v1t-hero::after {
  content: "";
  position: absolute;
  width: 9rem;
  height: 9rem;
  right: -3rem;
  bottom: -4rem;
  border: 1.5rem solid rgb(237 112 36 / 9%);
  border-radius: 1.25rem;
  transform: rotate(18deg);
  pointer-events: none;
}

body.client-visual-v2.client-hub-home .v1t-kpi {
  border-top: 3px solid var(--v2-orange) !important;
}

body.client-visual-v2.client-hub-home .v1t-kpi__value {
  color: var(--v2-navy) !important;
}

body.client-visual-v2.client-hub-home .v1t-recent__head-row {
  color: #7b8492 !important;
  background: #f8f6f1 !important;
}

body.client-visual-v2.client-hub-home .v1t-recent__row:hover,
body.client-visual-v2.client-hub-home .v1t-actions__link:hover {
  background: var(--v2-orange-soft) !important;
}

body.client-visual-v2.client-hub-home .hub-link,
body.client-visual-v2.client-hub-home .v1t-actions__link {
  color: var(--v2-orange-dark) !important;
}

/* Nouvelle expédition : formulaire plus court et plus lisible. */
body.client-visual-v2 .client-order-new .page-content {
  width: 100%;
  max-width: 96rem;
  margin: 0 auto;
  padding: 1.35rem clamp(1rem, 2.2vw, 2rem) 2.5rem !important;
}

body.client-visual-v2 .swiss-page-header {
  margin-bottom: 1.1rem;
}

body.client-visual-v2 .swiss-page-header__eyebrow {
  color: var(--v2-orange-dark) !important;
}

body.client-visual-v2 .swiss-page-header__title {
  color: var(--v2-navy) !important;
  font-size: clamp(1.7rem, 2.7vw, 2.35rem);
  letter-spacing: -.035em;
}

body.client-visual-v2 .swiss-page-header__subtitle {
  color: var(--v2-muted) !important;
}

body.client-visual-v2 .client-order-new__layout.order-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(16.5rem, 20rem) !important;
  align-items: start;
  gap: 1.1rem !important;
}

body.client-visual-v2 .client-order-new__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  padding: 1rem !important;
  padding-bottom: 1rem !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.client-visual-v2 .client-order-new__section {
  min-width: 0;
  margin: 0 !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: .9rem !important;
  background: var(--v2-card) !important;
  box-shadow: 0 7px 22px rgb(17 29 45 / 5%) !important;
}

body.client-visual-v2 .client-order-new__section#transport-section,
body.client-visual-v2 .client-order-new__section#options-section,
body.client-visual-v2 .client-order-new__section#bagage-section,
body.client-visual-v2 .client-order-new__section#transport-terms-section,
body.client-visual-v2 .client-order-new__form-actions {
  grid-column: 1 / -1;
}

body.client-visual-v2 .client-order-new__section .form-section__title {
  min-height: 2.9rem;
  padding: .68rem .85rem !important;
  color: var(--v2-navy) !important;
  background: #faf8f3 !important;
  border-bottom: 1px solid var(--v2-line) !important;
  font-size: .75rem !important;
  letter-spacing: .045em !important;
}

body.client-visual-v2 .client-order-new .form-section__step {
  color: #fff !important;
  background: var(--v2-orange) !important;
  border-color: var(--v2-orange) !important;
}

body.client-visual-v2 .client-order-new__section .form-section__body {
  padding: .85rem !important;
  background: var(--v2-card) !important;
  border-left: 0 !important;
}

body.client-visual-v2 .client-order-new .form-grid {
  gap: .65rem .75rem;
}

body.client-visual-v2 .client-order-new .field {
  gap: .28rem;
}

body.client-visual-v2 .client-order-new .field__label,
body.client-visual-v2 .client-order-new fieldset legend.field__label {
  color: #344054 !important;
  font-size: .72rem !important;
  letter-spacing: .025em !important;
  text-transform: none !important;
}

body.client-visual-v2 .client-order-new .field__input,
body.client-visual-v2 .client-order-new .field__select,
body.client-visual-v2 .client-order-new .field__textarea,
body.client-visual-v2 .client-order-new select,
body.client-visual-v2 .client-order-new textarea {
  min-height: 2.55rem;
  padding: .52rem .68rem;
  color: var(--v2-ink) !important;
  background: #fff !important;
  border-color: #d6d9df !important;
  border-radius: .62rem !important;
  font-size: .88rem;
}

body.client-visual-v2 .client-order-new .field__input:focus,
body.client-visual-v2 .client-order-new .field__select:focus,
body.client-visual-v2 .client-order-new .field__textarea:focus,
body.client-visual-v2 .client-order-new select:focus,
body.client-visual-v2 .client-order-new textarea:focus {
  border-color: var(--v2-orange) !important;
  box-shadow: 0 0 0 3px rgb(237 112 36 / 13%) !important;
}

body.client-visual-v2 .client-order-new .field__hint {
  color: var(--v2-muted) !important;
  font-size: .72rem;
}

body.client-visual-v2 .client-order-new .radio-option,
body.client-visual-v2 .client-order-new .option-check,
body.client-visual-v2 .client-order-new #pickup-favorite-tools,
body.client-visual-v2 .client-order-new #delivery-favorite-tools,
body.client-visual-v2 .client-order-new .delivery-preferences-card,
body.client-visual-v2 .client-order-new .client-order-new__reception-contact,
body.client-visual-v2 .client-order-new__cgt-acceptance,
body.client-visual-v2 .client-order-new__supplement {
  color: var(--v2-ink) !important;
  background: #faf8f3 !important;
  border-color: var(--v2-line) !important;
}

body.client-visual-v2 .client-order-new .radio-option:has(input:checked),
body.client-visual-v2 .client-order-new .option-check:has(input:checked) {
  background: var(--v2-orange-soft) !important;
  border-color: var(--v2-orange) !important;
}

body.client-visual-v2 .client-order-new__summary {
  position: sticky;
  top: 5.35rem;
  padding: 1rem !important;
  color: var(--v2-ink) !important;
  background: var(--v2-navy) !important;
  border: 0 !important;
  box-shadow: 0 14px 34px rgb(17 29 45 / 18%) !important;
}

body.client-visual-v2 .client-order-new__summary .card__title,
body.client-visual-v2 .client-order-new__summary .summary-line,
body.client-visual-v2 .client-order-new__summary .summary-line strong,
body.client-visual-v2 .client-order-new__summary .summary-total,
body.client-visual-v2 .client-order-new__summary .summary-total strong {
  color: #fff !important;
}

body.client-visual-v2 .client-order-new__summary .summary-line__detail {
  color: #bac4d1 !important;
}

body.client-visual-v2 .client-order-new__summary .card__title {
  border-bottom-color: rgb(255 255 255 / 14%) !important;
}

body.client-visual-v2 .client-order-new__form-actions {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: .75rem !important;
  min-height: 0 !important;
  padding: .2rem 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.client-visual-v2 .client-order-new__form-actions .btn {
  width: 100% !important;
  min-height: 2.85rem !important;
  justify-content: center;
  border-radius: .72rem !important;
}

body.client-visual-v2 .client-order-new__form-actions .btn--primary {
  color: #fff !important;
  background: var(--v2-orange) !important;
  border-color: var(--v2-orange) !important;
}

body.client-visual-v2 .client-order-new__form-actions .btn--ghost {
  color: var(--v2-navy) !important;
  background: #fff !important;
  border-color: var(--v2-line) !important;
}

@media (max-width: 1320px) {
  body.client-visual-v2 .client-order-new__form {
    grid-template-columns: 1fr;
  }

  body.client-visual-v2 .client-order-new__section,
  body.client-visual-v2 .client-order-new__form-actions {
    grid-column: 1;
  }
}

@media (max-width: 980px) {
  body.client-visual-v2 .client-order-new__layout.order-layout {
    grid-template-columns: 1fr !important;
  }

  body.client-visual-v2 .client-order-new__summary {
    position: static;
    order: -1;
  }
}

@media (max-width: 640px) {
  body.client-visual-v2 .client-order-new__form {
    padding: 0 !important;
  }

  body.client-visual-v2 .client-order-new__form-actions {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   V3 — composition fidèle à la maquette validée.
   Cette couche ne remplace aucun champ métier : elle élargit
   et réorganise uniquement la présentation du formulaire.
   ========================================================= */

body.client-visual-v3 .client-order-new .page-content {
  max-width: none !important;
  padding: 1.25rem clamp(1rem, 2vw, 2.25rem) 2.5rem !important;
}

body.client-visual-v3 .swiss-page-header {
  margin: 0 0 1rem !important;
  padding: .15rem 0 .35rem !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.client-visual-v3 .swiss-page-header__eyebrow {
  display: none;
}

body.client-visual-v3 .swiss-page-header__title {
  margin: 0 !important;
  font-size: clamp(2rem, 3vw, 2.65rem) !important;
  line-height: 1.08 !important;
}

body.client-visual-v3 .swiss-page-header__subtitle {
  margin-top: .25rem !important;
  font-size: 1rem !important;
}

body.client-visual-v3 .client-order-new__layout.order-layout {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

body.client-visual-v3 .client-order-new__form {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-flow: row dense;
  gap: 1rem !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

body.client-visual-v3 .client-order-new__section {
  align-self: start;
  overflow: visible !important;
  border-radius: 1rem !important;
  box-shadow: 0 8px 25px rgb(17 29 45 / 6%) !important;
}

body.client-visual-v3 #transport-section {
  grid-column: 1 / -1 !important;
  grid-row: 1;
}

body.client-visual-v3 #pickup-section {
  grid-column: 1 / 7 !important;
  grid-row: 2;
}

body.client-visual-v3 #delivery-section {
  grid-column: 7 / -1 !important;
  grid-row: 2 / span 3;
}

body.client-visual-v3 #parcel-section {
  grid-column: 1 / 7 !important;
  grid-row: 3;
}

body.client-visual-v3 #declared-value-section {
  grid-column: 1 / 7 !important;
  grid-row: 4;
}

body.client-visual-v3 #options-section,
body.client-visual-v3 #bagage-section,
body.client-visual-v3 #transport-terms-section,
body.client-visual-v3 .client-order-new__summary,
body.client-visual-v3 .client-order-new__form-actions {
  grid-column: 1 / -1 !important;
}

body.client-visual-v3 .client-order-new__section .form-section__title {
  min-height: 3.25rem;
  padding: .78rem 1rem !important;
  font-size: .82rem !important;
}

body.client-visual-v3 .client-order-new__section .form-section__body {
  padding: 1rem !important;
}

body.client-visual-v3 .client-order-new .form-grid--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Sélecteur de service sous forme de trois cartes professionnelles. */
body.client-visual-v3 .client-service-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}

body.client-visual-v3 .client-service-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.2rem 3.4rem minmax(0, 1fr);
  align-items: center;
  gap: .8rem;
  min-height: 5rem;
  padding: .8rem 1rem;
  color: var(--v2-ink);
  text-align: left;
  background: #fff;
  border: 1px solid #d9dce2;
  border-radius: .82rem;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
}

body.client-visual-v3 .client-service-card:hover,
body.client-visual-v3 .client-service-card:focus-visible {
  border-color: var(--v2-orange);
  box-shadow: 0 0 0 3px rgb(237 112 36 / 12%);
  outline: 0;
  transform: translateY(-1px);
}

body.client-visual-v3 .client-service-card.is-selected {
  background: linear-gradient(135deg, #fff7f0, #fffdf9);
  border-color: var(--v2-orange);
  box-shadow: 0 0 0 1px rgb(237 112 36 / 15%);
}

body.client-visual-v3 .client-service-card__selector {
  width: 1.05rem;
  height: 1.05rem;
  border: 1.5px solid #a5adba;
  border-radius: 50%;
  box-shadow: inset 0 0 0 .24rem #fff;
}

body.client-visual-v3 .client-service-card.is-selected .client-service-card__selector {
  background: var(--v2-orange);
  border-color: var(--v2-orange);
}

body.client-visual-v3 .client-service-card__parcel {
  position: relative;
  width: 2.9rem;
  height: 2.25rem;
  border-radius: .22rem;
  background: linear-gradient(145deg, #f4ca95, #c98342);
  box-shadow: inset -.45rem -.35rem 0 rgb(132 76 31 / 12%), 0 .35rem .75rem rgb(86 47 19 / 14%);
}

body.client-visual-v3 .client-service-card__parcel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: .52rem;
  height: 100%;
  background: rgb(255 242 212 / 62%);
  transform: translateX(-50%);
}

body.client-visual-v3 .client-service-card__parcel--priority {
  background: linear-gradient(145deg, #efbd83, #b86f32);
}

body.client-visual-v3 .client-service-card__parcel--express::after {
  content: "";
  position: absolute;
  right: calc(100% + .25rem);
  top: .45rem;
  width: 1rem;
  height: .18rem;
  background: var(--v2-orange);
  box-shadow: -.35rem .48rem 0 var(--v2-orange), .15rem .96rem 0 var(--v2-orange);
}

body.client-visual-v3 .client-service-card__copy {
  display: grid;
  gap: .12rem;
  min-width: 0;
}

body.client-visual-v3 .client-service-card__copy strong {
  color: var(--v2-navy);
  font-size: 1rem;
  line-height: 1.15;
}

body.client-visual-v3 .client-service-card__copy small {
  color: var(--v2-muted);
  font-size: .78rem;
}

body.client-visual-v3 .client-service-native-field {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* Cartes colis : plus visuelles sans changer les radios créées par le JS métier. */
body.client-visual-v3 .order-parcel-card {
  padding: .85rem !important;
  background: #fffdfa !important;
  border-color: var(--v2-line) !important;
}

body.client-visual-v4 .parcel-format-picker {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--v2-ink) !important;
  background: transparent !important;
  border: 0 !important;
  min-width: 0;
}

body.client-visual-v4 .parcel-format-picker > legend {
  display: block !important;
  width: 100%;
  margin: 0 0 .65rem !important;
  padding: 0 !important;
  color: var(--v2-ink) !important;
  font-size: .82rem !important;
  font-weight: 750 !important;
  line-height: 1.3;
}

body.client-visual-v4 .parcel-format-picker > .parcel-format-cards {
  clear: both;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

body.client-visual-v3 .parcel-format-card {
  min-height: 7rem;
  padding: 2.85rem .55rem .7rem;
  border-color: #d9dce2;
  border-radius: .8rem;
}

body.client-visual-v3 .parcel-format-card::before {
  content: "";
  position: absolute;
  top: .7rem;
  left: 50%;
  width: 2.35rem;
  height: 1.7rem;
  border-radius: .18rem;
  background: linear-gradient(145deg, #f4ca95, #bd7737);
  box-shadow: inset -.32rem -.28rem 0 rgb(132 76 31 / 12%), 0 .22rem .5rem rgb(86 47 19 / 12%);
  transform: translateX(-50%);
}

body.client-visual-v3 .parcel-format-card::after {
  content: "";
  position: absolute;
  top: .7rem;
  left: 50%;
  width: .42rem;
  height: 1.7rem;
  background: rgb(255 242 212 / 62%);
  transform: translateX(-50%);
}

body.client-visual-v3 .parcel-format-card:hover,
body.client-visual-v3 .parcel-format-card:focus-within,
body.client-visual-v3 .parcel-format-card.is-selected {
  border-color: var(--v2-orange) !important;
  background: var(--v2-orange-soft) !important;
  box-shadow: 0 0 0 2px rgb(237 112 36 / 14%) !important;
}

body.client-visual-v3 .parcel-format-card strong {
  color: var(--v2-navy);
}

/* Résumé horizontal, proche de la barre d'estimation de la maquette. */
body.client-visual-v3 .client-order-new__summary {
  position: static !important;
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
  align-items: start;
  gap: .75rem 1.25rem;
  padding: 1rem 1.1rem !important;
  color: var(--v2-ink) !important;
  background: #fff !important;
  border: 1px solid var(--v2-line) !important;
  border-left: 4px solid var(--v2-orange) !important;
  border-radius: .9rem !important;
  box-shadow: 0 8px 24px rgb(17 29 45 / 6%) !important;
}

body.client-visual-v3 .client-order-new__summary .card__title {
  grid-row: 1 / span 2;
  margin: 0 !important;
  padding: .15rem 0 !important;
  color: var(--v2-navy) !important;
  border: 0 !important;
  font-size: 1rem !important;
}

body.client-visual-v3 .client-order-new__summary .summary-line,
body.client-visual-v3 .client-order-new__summary .summary-line strong,
body.client-visual-v3 .client-order-new__summary .summary-total,
body.client-visual-v3 .client-order-new__summary .summary-total strong {
  color: var(--v2-ink) !important;
}

body.client-visual-v3 .client-order-new__summary .summary-line__detail {
  color: var(--v2-muted) !important;
}

body.client-visual-v3 .client-order-new__summary #summary-content {
  min-width: 0;
}

body.client-visual-v3 .client-order-new__form-actions {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.client-visual-v3 .client-order-new__form-actions .btn--ghost {
  order: -1;
}

body.client-visual-v3 .client-order-new__form-actions .btn {
  min-height: 3.15rem !important;
  font-size: .96rem;
  font-weight: 750;
}

body.client-visual-v3 .client-order-new__form-actions .btn--primary {
  background: linear-gradient(90deg, #f06f21, #ff5a0a) !important;
  box-shadow: 0 8px 20px rgb(237 112 36 / 20%);
}

@media (max-width: 1180px) {
  body.client-visual-v3 .client-order-new__form {
    grid-template-columns: 1fr !important;
  }

  body.client-visual-v3 #transport-section,
  body.client-visual-v3 #pickup-section,
  body.client-visual-v3 #delivery-section,
  body.client-visual-v3 #parcel-section,
  body.client-visual-v3 #declared-value-section,
  body.client-visual-v3 #options-section,
  body.client-visual-v3 #bagage-section,
  body.client-visual-v3 #transport-terms-section,
  body.client-visual-v3 .client-order-new__summary,
  body.client-visual-v3 .client-order-new__form-actions {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

@media (max-width: 760px) {
  body.client-visual-v3 .client-service-cards {
    grid-template-columns: 1fr;
  }

  body.client-visual-v3 .client-order-new .form-grid--2col,
  body.client-visual-v3 .client-order-new__summary,
  body.client-visual-v3 .client-order-new__form-actions {
    grid-template-columns: 1fr !important;
  }

  body.client-visual-v3 .client-order-new__summary .card__title {
    grid-row: auto;
  }
}

/* =========================================================
   V4 — navigation affinée et en-tête conforme à la maquette.
   Aucun champ ni comportement métier n'est remplacé.
   ========================================================= */

body.client-visual-v4 {
  --hub-sidebar-w: 12.75rem;
}

body.client-visual-v4 .sidebar {
  box-shadow: 8px 0 24px rgb(17 29 45 / 10%) !important;
}

body.client-visual-v4 .sidebar__brand {
  padding-inline: 1rem !important;
}

body.client-visual-v4 .sidebar__nav,
body.client-visual-v4 .sidebar__footer {
  padding-inline: .85rem !important;
}

body.client-visual-v4 .nav-item {
  gap: .65rem !important;
  padding-inline: .7rem !important;
  font-size: .82rem !important;
}

body.client-visual-v4 .portal-chrome {
  display: flex !important;
  min-height: 4.35rem !important;
  padding: .7rem clamp(1rem, 2vw, 2.25rem) !important;
  gap: 1rem;
}

body.client-visual-v4 .portal-chrome__search {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  width: min(32rem, 48vw);
  min-width: 0;
  min-height: 2.75rem;
  padding: 0 .9rem;
  color: #737b88;
  background: #faf9f6;
  border: 1px solid #dedbd4;
  border-radius: .75rem;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

body.client-visual-v4 .portal-chrome__search:hover,
body.client-visual-v4 .portal-chrome__search:focus-visible {
  color: var(--v2-ink);
  background: #fff;
  border-color: var(--v2-orange);
  box-shadow: 0 0 0 3px rgb(237 112 36 / 12%);
  outline: 0;
}

body.client-visual-v4 .portal-chrome__search svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

body.client-visual-v4 .portal-chrome__actions {
  margin-left: auto;
  gap: .8rem !important;
}

body.client-visual-v4 .portal-chrome__separator {
  width: 1px;
  height: 2rem;
  background: var(--v2-line);
}

body.client-visual-v4 .portal-chrome__profile {
  display: inline-grid;
  grid-template-columns: auto minmax(0, auto) auto;
  align-items: center;
  gap: .65rem;
  min-height: 2.9rem;
  padding: .2rem .25rem .2rem .35rem;
  color: var(--v2-ink);
  border-radius: .75rem;
  text-decoration: none;
}

body.client-visual-v4 .portal-chrome__profile:hover,
body.client-visual-v4 .portal-chrome__profile:focus-visible {
  background: var(--v2-orange-soft);
  outline: 0;
}

body.client-visual-v4 .portal-chrome__avatar {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  color: #394250;
  background: #eceae6;
  border-radius: 50%;
  font-size: .78rem;
  font-weight: 800;
}

body.client-visual-v4 .portal-chrome__profile-copy {
  display: grid;
  min-width: 7rem;
  line-height: 1.15;
}

body.client-visual-v4 .portal-chrome__profile-copy strong {
  max-width: 13rem;
  overflow: hidden;
  font-size: .82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.client-visual-v4 .portal-chrome__profile-copy small {
  margin-top: .18rem;
  color: var(--v2-muted);
  font-size: .7rem;
}

body.client-visual-v4 .portal-chrome__chevron {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Le consentement reste obligatoire, mais n'occupe plus une grande bande. */
body.client-visual-v4 #night-delivery-consent-field {
  display: grid !important;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
  gap: .65rem 1rem;
  margin-top: .75rem !important;
  padding: .75rem .9rem !important;
  background: #fffaf5 !important;
  border: 1px solid #eadbcd !important;
  border-radius: .75rem !important;
}

body.client-visual-v4 #night-delivery-consent-field legend.field__label {
  display: contents;
}

body.client-visual-v4 #night-delivery-consent-field .option-row {
  display: flex;
  gap: .5rem;
  margin: 0;
}

body.client-visual-v4 #night-delivery-consent-field .option-check {
  min-width: 4.5rem;
  margin: 0 !important;
  padding: .55rem .7rem !important;
}

body.client-visual-v4 #night-delivery-consent-field .field__hint {
  margin: 0 !important;
  color: var(--v2-muted) !important;
  text-align: right;
}

body.client-visual-v4 .night-delivery-toggle {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--v2-ink);
  cursor: pointer;
  font-size: .86rem;
  font-weight: 650;
}

body.client-visual-v4 .night-delivery-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

body.client-visual-v4 .night-delivery-toggle__control {
  position: relative;
  flex: 0 0 auto;
  width: 2.65rem;
  height: 1.45rem;
  background: #cfd4dc;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgb(17 29 45 / 10%);
  transition: background .18s ease, box-shadow .18s ease;
}

body.client-visual-v4 .night-delivery-toggle__control::after {
  content: "";
  position: absolute;
  top: .2rem;
  left: .2rem;
  width: 1.05rem;
  height: 1.05rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgb(17 29 45 / 22%);
  transition: transform .18s ease;
}

body.client-visual-v4 .night-delivery-toggle input:checked + .night-delivery-toggle__control {
  background: var(--v2-orange);
  box-shadow: inset 0 0 0 1px var(--v2-orange-dark);
}

body.client-visual-v4 .night-delivery-toggle input:checked + .night-delivery-toggle__control::after {
  transform: translateX(1.2rem);
}

body.client-visual-v4 .night-delivery-toggle input:focus-visible + .night-delivery-toggle__control {
  outline: 3px solid rgb(237 112 36 / 22%);
  outline-offset: 2px;
}

@media (max-width: 980px) {
  body.client-visual-v3 .client-service-cards {
    grid-template-columns: 1fr;
  }

  body.client-visual-v4 .portal-chrome__profile-copy,
  body.client-visual-v4 .portal-chrome__chevron,
  body.client-visual-v4 .portal-chrome__separator {
    display: none;
  }

  body.client-visual-v4 #night-delivery-consent-field {
    grid-template-columns: 1fr auto;
  }

  body.client-visual-v4 #night-delivery-consent-field .field__hint {
    grid-column: 1 / -1;
    text-align: left;
  }
}

@media (max-width: 760px) {
  body.client-visual-v4 {
    --hub-sidebar-w: 16.25rem;
  }

  body.client-visual-v4 .portal-chrome__search {
    width: auto;
    flex: 1;
  }

  body.client-visual-v4 .portal-chrome__search span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.client-visual-v4 #night-delivery-consent-field {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
  }
}

/* Address suggestions remain in flow so mobile fields and controls stay accessible. */
body.client-visual-v4 .address-suggestions {
  min-width: 0;
  max-width: 100%;
  border: 1px solid #d9dce2;
  border-radius: .5rem;
  background: #fff;
  color: var(--v2-ink);
  font-size: .85rem;
  overflow-wrap: anywhere;
}
body.client-visual-v4 .address-suggestions [role="option"],
body.client-visual-v4 .address-suggestions__empty {
  padding: .65rem .75rem;
}
body.client-visual-v4 .address-suggestions [role="option"] {
  cursor: pointer;
}
body.client-visual-v4 .address-suggestions [aria-selected="true"],
body.client-visual-v4 .address-suggestions [role="option"]:hover {
  background: #fff7f0;
}


body.client-visual-v4 .address-validation-guidance {
  min-width: 0;
  max-width: 100%;
  padding: .75rem;
  border: 1px solid #dc9a45;
  border-radius: .5rem;
  background: #fff7ed;
  overflow-wrap: anywhere;
}
body.client-visual-v4 .address-validation-guidance button {
  max-width: 100%;
  white-space: normal;
}
body.client-visual-v4 .address-guidance-invalid {
  border-color: #b45309 !important;
}