@import url("/client/_assets/client-v6-finalization-20260902.css?v=20260903-2");

/* ===== SOURCE CONSOLIDÉE: private/site/assets/client-preview-clarity-and-leads-v1.css ===== */
/* Pizza Baladzo — correctifs preview client : accueil mobile, clarté Jour et demandes professionnelles. */

body[data-client-theme="day"] {
  --pb-day-page: #fff9ff;
  --pb-day-surface: rgba(255, 255, 255, .96);
  --pb-day-surface-soft: rgba(251, 241, 255, .94);
  --pb-day-surface-strong: rgba(245, 225, 255, .96);
  --pb-day-border: rgba(132, 56, 196, .25);
  --pb-day-title: #57117f;
  --pb-day-text: #2b1736;
  --pb-day-muted: #55405f;
  --pb-day-shadow: 0 16px 34px rgba(83, 32, 126, .12);
  background: linear-gradient(180deg, #d8f6ff 0%, #fff8fd 42%, #f8eaff 100%) !important;
  color: var(--pb-day-text) !important;
}

body[data-client-theme="day"] .app,
body[data-client-theme="day"] .mockup {
  background:
    radial-gradient(circle at 82% 7%, rgba(255, 230, 115, .62), transparent 13rem),
    linear-gradient(180deg, #d4f5ff 0%, #fff9fd 44%, #f6e8ff 100%) !important;
  color: var(--pb-day-text) !important;
}

body[data-client-theme="day"] :where(
  .site-nav-overlay,
  .quick-actions-overlay,
  .theme-mode-switch,
  .client-page-content,
  .client-editorial-block,
  .client-card,
  .client-photo-card,
  .contact-panel,
  .contact-detail,
  .event-detail,
  .location-detail,
  .cart-live-panel,
  .cart-section,
  .vote-detail,
  .vote-card,
  .votes-overview,
  .votes-overview-card,
  .loyalty-detail,
  .loyalty-card,
  .modal,
  .toast,
  .notice,
  .line,
  .choice,
  .field,
  .client-bastien-panel,
  .client-bastien-output,
  .client-bastien-transcript
) {
  background: var(--pb-day-surface) !important;
  color: var(--pb-day-text) !important;
  border-color: var(--pb-day-border) !important;
  box-shadow: var(--pb-day-shadow) !important;
  text-shadow: none !important;
}

body[data-client-theme="day"] :where(
  .client-card,
  .client-editorial-block,
  .contact-panel,
  .cart-section,
  .vote-card,
  .loyalty-card,
  .notice,
  .line,
  .choice,
  .field
) {
  background: linear-gradient(180deg, var(--pb-day-surface), var(--pb-day-surface-soft)) !important;
}

body[data-client-theme="day"] :where(
  h1, h2, h3, h4, h5, h6,
  strong, b, label,
  .price,
  .client-card strong,
  .client-editorial-block strong,
  .contact-panel strong,
  .line strong
) {
  color: var(--pb-day-title) !important;
  text-shadow: none !important;
}

body[data-client-theme="day"] :where(
  p, small, li,
  .client-card small,
  .client-editorial-block p,
  .contact-panel small,
  .line small,
  .notice
) {
  color: var(--pb-day-muted) !important;
  text-shadow: none !important;
}

body[data-client-theme="day"] :where(
  .nav-button,
  .quick-actions-overlay button,
  .theme-mode-switch button,
  .home-action-stack button,
  .home-vote-strip button,
  .client-card-actions button,
  .client-inline-button,
  .vote-button,
  .vote-back,
  .slot-options button,
  .pay-options button,
  .secondary,
  .install-home-button
) {
  background: linear-gradient(135deg, rgba(255,255,255,.99), rgba(239,219,255,.92)) !important;
  color: #2e143d !important;
  border-color: rgba(130,55,201,.34) !important;
  box-shadow: 0 9px 20px rgba(91,35,141,.12) !important;
  text-shadow: none !important;
}

body[data-client-theme="day"] :where(
  .nav-button.active,
  .theme-mode-switch button.active,
  .home-action-stack button:first-child,
  .primary,
  .client-card-actions button:not(.secondary),
  .vote-button.active
) {
  background: linear-gradient(135deg, #a81fe3, #f45fc8) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.45) !important;
}

body[data-client-theme="day"] :where(input, textarea, select, .client-bastien-panel textarea) {
  background: #fff !important;
  color: var(--pb-day-text) !important;
  border-color: rgba(130,55,201,.28) !important;
}

body[data-client-theme="day"] :where(
  .client-card img,
  .vote-card img,
  .votes-overview-card img,
  .client-photo-card img,
  .product-detail-pizza img,
  .product-detail-dessert img
) {
  filter: brightness(1.13) saturate(1.08) contrast(.97) !important;
  background: linear-gradient(135deg, rgba(233,211,255,.78), rgba(255,231,248,.74)) !important;
}

/* Le visuel d'accueil contient son propre texte : en mobile il doit être affiché en entier, jamais recadré. */
@media (max-width: 900px) {
  .mockup[data-page="accueil"] {
    --mobile-remorque-top: clamp(260px, 66.75vw, 602px) !important;
    padding-top: calc(var(--mobile-remorque-top) + 8px) !important;
  }

  .mockup[data-page="accueil"] > img:not(.page-logo-overlay) {
    width: 100% !important;
    height: var(--mobile-remorque-top) !important;
    min-height: var(--mobile-remorque-top) !important;
    max-height: var(--mobile-remorque-top) !important;
    object-fit: contain !important;
    object-position: center top !important;
    background: #f9ecff !important;
  }

  body[data-client-theme="day"] .mockup[data-page="accueil"] > img:not(.page-logo-overlay) {
    filter: brightness(1.13) saturate(1.08) contrast(.97) !important;
    object-position: center top !important;
  }

  body[data-client-theme="night"] .mockup[data-page="accueil"] > img:not(.page-logo-overlay) {
    filter: brightness(1.02) saturate(1.04) contrast(1.02) !important;
    object-position: center top !important;
  }

  .mockup[data-page="accueil"]::after {
    height: var(--mobile-remorque-top) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,.02) 72%, rgba(246,231,255,.38)) !important;
    mix-blend-mode: normal !important;
  }

  body[data-client-theme="night"] .mockup[data-page="accueil"]::after {
    background: linear-gradient(180deg, rgba(5,2,8,.02), rgba(5,2,8,.08) 72%, rgba(5,2,8,.54)) !important;
  }

  body[data-client-theme="day"] .mockup:not([data-page="accueil"]) > img:not(.page-logo-overlay) {
    opacity: .44 !important;
    filter: brightness(1.54) saturate(1.06) contrast(.82) !important;
  }

  body[data-client-theme="day"] .site-nav-overlay,
  body[data-client-theme="day"] .quick-actions-overlay {
    background: rgba(255, 252, 255, .96) !important;
    color: var(--pb-day-text) !important;
    backdrop-filter: blur(8px) saturate(1.15) !important;
  }
}

/* Encart professionnel — visible dans le vrai site client. */
.pb-pro-intake-card {
  position: relative;
  z-index: 12;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin: 18px 12px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(165, 67, 220, .32);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 226, 118, .42), transparent 10rem),
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(245,225,255,.92));
  color: #2a1637;
  box-shadow: 0 18px 42px rgba(87, 34, 131, .14);
}

.pb-pro-intake-card h2 { margin: 0 0 7px; color: #5f168e !important; }
.pb-pro-intake-card p { margin: 0; color: #51405d !important; line-height: 1.55; }
.pb-pro-intake-card .pb-pro-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.pb-pro-intake-card .pb-pro-tags span {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(135,56,199,.22);
  color: #5b1b7e;
  font-weight: 800;
  font-size: .78rem;
}

.pb-pro-open {
  min-height: 46px;
  border: 0;
  border-radius: 14px;
  padding: 11px 16px;
  background: linear-gradient(135deg, #a81fe3, #f45fc8);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(162, 43, 207, .22);
}

.pb-pro-floating {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 75;
  max-width: min(310px, calc(100vw - 92px));
  border: 1px solid rgba(255,255,255,.46);
  border-radius: 999px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #6d28d9, #db2777);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 14px 32px rgba(58, 20, 89, .28);
}

.pb-pro-dialog {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: none;
  place-items: center;
  padding: 14px;
  background: rgba(24, 10, 34, .64);
  backdrop-filter: blur(8px);
}
.pb-pro-dialog.open { display: grid; }
.pb-pro-dialog-card {
  width: min(760px, 100%);
  max-height: min(92dvh, 820px);
  overflow: auto;
  border: 1px solid rgba(160, 70, 220, .3);
  border-radius: 24px;
  padding: clamp(18px, 3vw, 28px);
  background: linear-gradient(180deg, #fff, #f8eaff);
  color: #2a1637;
  box-shadow: 0 28px 80px rgba(33, 10, 48, .34);
}
.pb-pro-dialog-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.pb-pro-dialog-head h2 { margin: 0; color: #5f168e !important; }
.pb-pro-close { border: 0; border-radius: 999px; width: 42px; height: 42px; background: #f1e6fa; color: #5f168e; font-weight: 900; }
.pb-pro-safety { margin: 12px 0 18px; padding: 11px 13px; border-radius: 13px; background: #fff8df; color: #684d00; border: 1px solid #f2d77e; }
.pb-pro-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pb-pro-field { display: grid; gap: 5px; }
.pb-pro-field.full { grid-column: 1 / -1; }
.pb-pro-field label { color: #4b2a5a !important; font-weight: 850; }
.pb-pro-field input,
.pb-pro-field select,
.pb-pro-field textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(130,55,201,.28);
  border-radius: 12px;
  padding: 10px 11px;
  background: #fff;
  color: #2a1637;
}
.pb-pro-field textarea { min-height: 120px; resize: vertical; }
.pb-pro-consent { display: flex; gap: 9px; align-items: flex-start; grid-column: 1 / -1; color: #51405d; }
.pb-pro-consent input { width: 20px; height: 20px; flex: 0 0 auto; }
.pb-pro-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; grid-column: 1 / -1; }
.pb-pro-submit { min-height: 46px; border: 0; border-radius: 13px; padding: 11px 16px; background: linear-gradient(135deg, #6d28d9, #db2777); color: #fff; font-weight: 900; }
.pb-pro-submit:disabled { opacity: .55; cursor: wait; }
.pb-pro-result { min-height: 24px; font-weight: 800; color: #147a55; }
.pb-pro-result.error { color: #b42318; }

@media (max-width: 720px) {
  .pb-pro-intake-card { grid-template-columns: 1fr; }
  .pb-pro-open { width: 100%; }
  .pb-pro-form { grid-template-columns: 1fr; }
  .pb-pro-field.full, .pb-pro-consent, .pb-pro-actions { grid-column: auto; }
  .pb-pro-floating { left: 10px; bottom: 10px; font-size: .78rem; }
}

/* ===== SOURCE CONSOLIDÉE: private/site/assets/client-mobile-day-desktop-parity-v2.css ===== */
/* Pizza Baladzo — parité de luminosité ordinateur/téléphone en mode Jour.
   Cette couche ne touche jamais au mode Nuit. */

@media (max-width: 900px) {
  body[data-client-theme="day"] {
    color-scheme: light;
    --pb-mobile-day-page: #fffaff;
    --pb-mobile-day-surface: rgba(255, 255, 255, .985);
    --pb-mobile-day-soft: rgba(250, 240, 255, .975);
    --pb-mobile-day-border: rgba(122, 50, 184, .22);
    --pb-mobile-day-title: #551275;
    --pb-mobile-day-text: #291534;
    --pb-mobile-day-muted: #594462;
    background: #fffaff !important;
    color: var(--pb-mobile-day-text) !important;
  }

  body[data-client-theme="day"] .app,
  body[data-client-theme="day"] .mockup {
    background:
      radial-gradient(circle at 88% 3%, rgba(255, 232, 128, .55), transparent 12rem),
      linear-gradient(180deg, #dff8ff 0%, #fffaff 40%, #f9edff 100%) !important;
    color: var(--pb-mobile-day-text) !important;
  }

  body[data-client-theme="day"] .mockup {
    box-shadow: 0 12px 38px rgba(83, 32, 126, .11) !important;
  }

  /* Le visuel d’accueil reste complet. Les autres visuels deviennent un décor
     lumineux, comme sur ordinateur, au lieu d’assombrir les contenus. */
  body[data-client-theme="day"] .mockup[data-page="accueil"] > img:not(.page-logo-overlay) {
    object-fit: contain !important;
    object-position: center top !important;
    opacity: 1 !important;
    filter: brightness(1.16) saturate(1.06) contrast(.95) !important;
    background: #fff6ff !important;
  }

  body[data-client-theme="day"] .mockup:not([data-page="accueil"]) > img:not(.page-logo-overlay) {
    object-fit: cover !important;
    object-position: center top !important;
    opacity: .28 !important;
    filter: brightness(1.5) saturate(.94) contrast(.82) !important;
  }

  body[data-client-theme="day"] .mockup::after {
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, .03) 0%,
      rgba(255, 255, 255, .18) 48%,
      rgba(255, 250, 255, .86) 100%
    ) !important;
  }

  body[data-client-theme="day"] .mockup:not([data-page="accueil"])::before {
    opacity: 1 !important;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, .34),
      rgba(255, 255, 255, .72)
    ) !important;
  }

  body[data-client-theme="day"] :where(
    .site-nav-overlay,
    .quick-actions-overlay,
    .theme-mode-switch,
    .client-page-content,
    .client-editorial-block,
    .client-card,
    .client-card-body,
    .client-photo-card,
    .contact-panel,
    .contact-detail,
    .event-detail,
    .location-detail,
    .cart-live-panel,
    .cart-section,
    .vote-detail,
    .vote-card,
    .votes-overview,
    .votes-overview-card,
    .loyalty-detail,
    .loyalty-card,
    .client-bastien-panel,
    .client-bastien-output,
    .client-bastien-transcript,
    .client-help-center,
    .client-help-item,
    .client-tutorial-card,
    .modal,
    .modal-inner,
    .toast,
    .notice,
    .line,
    .choice,
    .field,
    .slot-options,
    .pay-options,
    .pb-pro-intake-card,
    .pb-pro-dialog-card
  ) {
    background: linear-gradient(180deg, var(--pb-mobile-day-surface), var(--pb-mobile-day-soft)) !important;
    color: var(--pb-mobile-day-text) !important;
    border-color: var(--pb-mobile-day-border) !important;
    box-shadow: 0 12px 28px rgba(83, 32, 126, .10) !important;
    text-shadow: none !important;
  }

  body[data-client-theme="day"] .site-nav-overlay,
  body[data-client-theme="day"] .quick-actions-overlay,
  body[data-client-theme="day"] .theme-mode-switch {
    backdrop-filter: blur(10px) saturate(1.08) !important;
  }

  body[data-client-theme="day"] :where(
    h1, h2, h3, h4, h5, h6,
    strong, b, label,
    .price,
    .client-card strong,
    .client-editorial-block strong,
    .contact-panel strong,
    .line strong,
    .client-help-item,
    .client-tutorial-card strong
  ) {
    color: var(--pb-mobile-day-title) !important;
    text-shadow: none !important;
  }

  body[data-client-theme="day"] :where(
    p, small, li,
    .client-card small,
    .client-editorial-block p,
    .contact-panel small,
    .line small,
    .notice,
    .client-tutorial-card p,
    .client-help-item small,
    .client-bastien-output,
    .client-bastien-transcript
  ) {
    color: var(--pb-mobile-day-muted) !important;
    text-shadow: none !important;
  }

  body[data-client-theme="day"] :where(
    .nav-button,
    .quick-actions-overlay button,
    .theme-mode-switch button,
    .home-action-stack button,
    .home-vote-strip button,
    .client-card-actions button,
    .client-inline-button,
    .vote-button,
    .vote-back,
    .slot-options button,
    .pay-options button,
    .secondary,
    .install-home-button,
    .client-tutorial-button,
    .client-tutorial-card .actions button,
    .client-help-item,
    .pb-pro-open,
    .pb-pro-close
  ) {
    border: 2px solid #ffb8e2 !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 46%, rgba(45, 8, 78, .22) 100%),
      linear-gradient(100deg, #7d28e5, #e8528d) !important;
    color: #fff !important;
    box-shadow:
      inset 0 0 0 1px #fff,
      inset 0 3px 4px rgba(255, 255, 255, .24),
      0 5px 0 rgba(49, 13, 84, .9),
      0 11px 22px rgba(17, 4, 25, .3) !important;
    text-shadow: 0 1px 1px rgba(25, 4, 40, .56) !important;
  }

  body[data-client-theme="day"] :where(
    .nav-button.active,
    .theme-mode-switch button.active,
    .home-action-stack button:first-child,
    .primary,
    .client-card-actions button:not(.secondary),
    .vote-button.active,
    .pb-pro-submit
  ) {
    border-color: #ed9ff0 !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 48%, rgba(20, 3, 34, .24) 100%),
      linear-gradient(100deg, #36185c, #ba4fdc) !important;
    color: #fff !important;
    box-shadow:
      inset 0 0 0 1px #fff,
      0 5px 0 rgba(31, 7, 53, .94),
      0 0 19px rgba(237, 159, 240, .5) !important;
  }

  body[data-client-theme="day"] :where(input, textarea, select) {
    background: #fff !important;
    color: var(--pb-mobile-day-text) !important;
    border-color: rgba(130, 55, 201, .25) !important;
    box-shadow: none !important;
  }

  body[data-client-theme="day"] :where(
    .client-card img,
    .vote-card img,
    .votes-overview-card img,
    .client-photo-card img,
    .product-detail-pizza img,
    .product-detail-dessert img
  ) {
    filter: brightness(1.15) saturate(1.04) contrast(.96) !important;
    background: linear-gradient(135deg, rgba(236, 219, 255, .82), rgba(255, 235, 249, .80)) !important;
  }

  body[data-client-theme="day"] .modal-backdrop,
  body[data-client-theme="day"] .pb-pro-dialog {
    background: rgba(48, 24, 63, .36) !important;
    backdrop-filter: blur(6px) !important;
  }

  body[data-client-theme="day"] .client-tutorial-spot {
    box-shadow: 0 0 0 9999px rgba(255, 255, 255, .48), 0 0 24px rgba(161, 52, 214, .56) !important;
  }

  body[data-client-theme="day"] .client-mobile-top-logo {
    background-color: #fff !important;
    box-shadow: 0 0 14px rgba(174, 64, 223, .24), 0 6px 18px rgba(83, 32, 126, .10) !important;
  }
}

/* ===== SOURCE CONSOLIDÉE: private/site/assets/client-mobile-home-compact-v3.css ===== */
/* Pizza Baladzo — accueil mobile sans surcouche, sans flou et avec accès compacts. */

/* Les anciens grands encarts sont remplacés par deux petits boutons. */
.pb-pro-intake-card,
.mockup[data-page="accueil"] .home-quality-teaser,
.mockup[data-page="accueil"] [data-allergen-card],
.mockup[data-page="accueil"] .allergen-card,
.mockup[data-page="accueil"] .allergens-card,
.mockup[data-page="accueil"] .home-allergen-card,
.mockup[data-page="accueil"] .home-allergens-card,
.mockup[data-page="accueil"] .allergen-notice,
.mockup[data-page="accueil"] .allergens-notice {
  display: none !important;
}

#pb-professional-intake-root .pb-client-compact-actions {
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 96;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: calc(100vw - 108px);
  pointer-events: none;
}

#pb-professional-intake-root .pb-client-compact-actions button {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(255, 255, 255, .58) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(93, 33, 143, .96), rgba(205, 50, 145, .96)) !important;
  color: #fff !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  white-space: nowrap;
  box-shadow: 0 7px 18px rgba(40, 12, 58, .25) !important;
  text-shadow: none !important;
  pointer-events: auto;
}

#pb-professional-intake-root .pb-client-compact-actions button:focus-visible {
  outline: 3px solid #fde68a;
  outline-offset: 2px;
}

.pb-allergen-dialog {
  position: fixed;
  inset: 0;
  z-index: 146;
  display: none;
  place-items: center;
  padding: 14px;
  background: rgba(24, 10, 34, .78);
}

.pb-allergen-dialog.open {
  display: grid;
}

.pb-allergen-dialog-card {
  width: min(680px, 100%);
  max-height: min(92dvh, 780px);
  overflow: auto;
  border: 1px solid rgba(160, 70, 220, .3);
  border-radius: 22px;
  padding: clamp(18px, 4vw, 28px);
  background: linear-gradient(180deg, #fff, #f8eaff);
  color: #2a1637;
  box-shadow: 0 28px 80px rgba(33, 10, 48, .42);
}

.pb-allergen-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.pb-allergen-dialog-head h2 {
  margin: 0;
  color: #5f168e !important;
}

.pb-allergen-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: #efe3f7;
  color: #5f168e;
  font-weight: 900;
}

.pb-allergen-summary {
  margin: 10px 0 0;
  color: #51405d !important;
  line-height: 1.5;
}

.pb-allergen-grid {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.pb-allergen-grid article {
  padding: 13px 14px;
  border: 1px solid rgba(130, 55, 201, .2);
  border-radius: 14px;
  background: rgba(255, 255, 255, .88);
}

.pb-allergen-grid h3 {
  margin: 0 0 5px;
  color: #57117f !important;
  font-size: 1rem;
}

.pb-allergen-grid p {
  margin: 0;
  color: #51405d !important;
  line-height: 1.5;
}

.pb-allergen-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 17px;
}

.pb-allergen-actions button {
  min-height: 42px;
  border: 1px solid rgba(130, 55, 201, .28);
  border-radius: 12px;
  padding: 9px 13px;
  background: #fff;
  color: #4b1f66;
  font-weight: 900;
}

.pb-allergen-actions .primary {
  border: 0;
  background: linear-gradient(135deg, #8f24cf, #e147ad);
  color: #fff;
}

@media (min-width: 901px) {
  /* Réserve la zone du bouton Bastien afin que l'accès professionnel ne capte jamais son clic. */
  #pb-professional-intake-root .pb-client-compact-actions {
    right: calc(14px + min(250px, calc(100vw - 28px)) + 10px);
    max-width: calc(100vw - 302px);
  }
}

@media (max-width: 900px) {
  /* Le logo déjà présent dans le visuel d’origine reste seul. */
  .mockup[data-page="accueil"] > img.page-logo-overlay,
  .mockup[data-page="accueil"] .page-logo-overlay,
  .mockup[data-page="accueil"] .mobile-home-logo,
  .mockup[data-page="accueil"] .client-mobile-top-logo {
    display: none !important;
  }

  /* Suppression du double calque et de tout effet de flou sur l’accueil. */
  .mockup[data-page="accueil"]::before,
  .mockup[data-page="accueil"]::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    background: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .mockup[data-page="accueil"] > img:not(.page-logo-overlay) {
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    transform: none !important;
  }

  .mockup[data-page="accueil"] *,
  .mockup[data-page="accueil"] .site-nav-overlay,
  .mockup[data-page="accueil"] .quick-actions-overlay,
  .mockup[data-page="accueil"] .theme-mode-switch {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #pb-professional-intake-root .pb-client-compact-actions {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    max-width: calc(100vw - 88px);
    gap: 5px;
  }

  #pb-professional-intake-root .pb-client-compact-actions button {
    min-height: 32px !important;
    padding: 5px 9px !important;
    font-size: .68rem !important;
  }

  .pb-allergen-dialog-card {
    border-radius: 18px;
    padding: 17px;
  }

  .pb-allergen-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* ===== SOURCE CONSOLIDÉE: private/site/assets/client-experience-polish-v5.css ===== */
/* Pizza Baladzo — finition client mobile : pied de page compact, boutons sans chevauchement et conversation Bastien. */

.site-legal-footer.pb-legal-mini {
  display: block !important;
  width: min(100% - 20px, 980px) !important;
  margin: 14px auto max(86px, env(safe-area-inset-bottom)) !important;
  padding: 5px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-align: center !important;
}

.site-legal-footer.pb-legal-mini small {
  display: block !important;
  color: inherit !important;
  font-size: clamp(.56rem, 1.8vw, .68rem) !important;
  line-height: 1.45 !important;
  font-weight: 650 !important;
  opacity: .82;
}

.site-legal-footer.pb-legal-mini a,
.site-legal-footer.pb-legal-mini button {
  display: inline !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  text-transform: none !important;
  font: inherit !important;
}

.client-bastien-conversation-history {
  display: grid;
  gap: 7px;
  max-height: min(28vh, 220px);
  margin-top: 8px;
  overflow: auto;
}

.client-bastien-turn {
  max-width: 92%;
  padding: 8px 10px;
  border-radius: 13px;
  font-size: .72rem;
  line-height: 1.4;
  white-space: pre-line;
}

.client-bastien-turn.user {
  justify-self: end;
  border: 1px solid rgba(236, 72, 153, .35);
  background: rgba(236, 72, 153, .17);
  color: #fff;
}

.client-bastien-turn.assistant {
  justify-self: start;
  border: 1px solid rgba(167, 139, 250, .36);
  background: rgba(109, 40, 217, .22);
  color: #f7edff;
}

@media (max-width: 900px) {
  /* Les trois accès restent violets et occupent trois niveaux distincts. */
  .client-bastien-button,
  body[data-client-theme="day"] .client-bastien-button,
  body[data-client-theme="night"] .client-bastien-button {
    border: 1px solid rgba(255, 255, 255, .62) !important;
    background: linear-gradient(135deg, #6d28d9, #a82bd4 54%, #db2777) !important;
    color: #fff !important;
    box-shadow: 0 9px 23px rgba(51, 15, 76, .34) !important;
    filter: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .client-bastien-button::after {
    color: #fff !important;
    text-shadow: none !important;
  }

  .client-tutorial-button,
  .mockup[data-page="accueil"] .client-tutorial-button,
  .mockup:not([data-page="accueil"]) .client-tutorial-button,
  body[data-client-theme="day"] .client-tutorial-button,
  body[data-client-theme="night"] .client-tutorial-button {
    position: fixed !important;
    inset: auto max(8px, env(safe-area-inset-right)) max(52px, calc(env(safe-area-inset-bottom) + 52px)) auto !important;
    z-index: 118 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: min(190px, calc(100vw - 16px)) !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px 11px !important;
    border: 1px solid rgba(255, 255, 255, .58) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #6d28d9, #b728cf 55%, #db2777) !important;
    color: #fff !important;
    font-size: .7rem !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    text-shadow: none !important;
    text-transform: none !important;
    box-shadow: 0 8px 20px rgba(51, 15, 76, .28) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #pb-professional-intake-root .pb-client-compact-actions {
    position: fixed !important;
    inset: auto max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) auto !important;
    z-index: 117 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    pointer-events: none;
  }

  #pb-professional-intake-root .pb-client-compact-actions button,
  body[data-client-theme="day"] #pb-professional-intake-root .pb-client-compact-actions button,
  body[data-client-theme="night"] #pb-professional-intake-root .pb-client-compact-actions button {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    border: 1px solid rgba(255, 255, 255, .58) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #6d28d9, #b728cf 55%, #db2777) !important;
    color: #fff !important;
    font-size: .68rem !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    text-shadow: none !important;
    text-transform: none !important;
    box-shadow: 0 8px 20px rgba(51, 15, 76, .28) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: auto;
  }

  .client-bastien-widget,
  .mockup[data-page="accueil"] .client-bastien-widget,
  .mockup:not([data-page="accueil"]) .client-bastien-widget {
    position: fixed !important;
    inset: auto max(8px, env(safe-area-inset-right)) max(96px, calc(env(safe-area-inset-bottom) + 96px)) auto !important;
    z-index: 116 !important;
    width: min(370px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    margin: 0 !important;
  }

  .client-bastien-panel,
  .mockup[data-page="accueil"] .client-bastien-panel,
  .mockup:not([data-page="accueil"]) .client-bastien-panel {
    position: fixed !important;
    inset: auto max(8px, env(safe-area-inset-right)) max(148px, calc(env(safe-area-inset-bottom) + 148px)) auto !important;
    width: min(370px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: min(61dvh, 570px) !important;
    border-radius: 18px !important;
  }

  .client-bastien-panel .actions .client-bastien-micro,
  .client-bastien-panel .actions button.primary {
    background: linear-gradient(135deg, #6d28d9, #a82bd4 54%, #db2777) !important;
    color: #fff !important;
  }

  .install-home-button[data-pb-installed="true"] {
    display: none !important;
  }

  .site-legal-footer.pb-legal-mini {
    margin-bottom: max(92px, calc(env(safe-area-inset-bottom) + 92px)) !important;
  }
}

@media (max-width: 370px) {
  #pb-professional-intake-root .pb-client-compact-actions {
    gap: 4px !important;
  }

  #pb-professional-intake-root .pb-client-compact-actions button {
    min-height: 31px !important;
    padding: 5px 7px !important;
    font-size: .61rem !important;
  }

  .client-tutorial-button,
  .mockup[data-page="accueil"] .client-tutorial-button,
  .mockup:not([data-page="accueil"]) .client-tutorial-button {
    bottom: max(47px, calc(env(safe-area-inset-bottom) + 47px)) !important;
    min-height: 31px !important;
    padding: 5px 8px !important;
    font-size: .63rem !important;
  }

  .client-bastien-widget {
    bottom: max(88px, calc(env(safe-area-inset-bottom) + 88px)) !important;
  }

  .client-bastien-panel {
    bottom: max(140px, calc(env(safe-area-inset-bottom) + 140px)) !important;
  }
}

/* CL-02 / CL-03 — contrat verrouillé du 29 juillet 2026.
   Couleurs mesurées dans la planche v9, sans toucher au choix typographique CL-01. */
:root {
  --pb-button-rest-left: #7d28e5;
  --pb-button-rest-right: #e8528d;
  --pb-button-active-left: #36185c;
  --pb-button-active-right: #ba4fdc;
  --pb-button-frame: #ffb8e2;
  --pb-button-active-frame: #ed9ff0;
  --pb-button-inner-frame: #fff;
  --pb-button-text: #fff;
}

.sr-only {
  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;
}

.client-skip-link {
  position: fixed;
  z-index: 300;
  top: 10px;
  left: 10px;
  transform: translateY(-180%);
  padding: 10px 15px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: #36185c;
  color: #fff;
  font-weight: 900;
  text-decoration: none;
}

.client-skip-link:focus {
  transform: translateY(0);
}

.mockup {
  overflow-x: clip;
}

.page-logo-home-link {
  position: absolute;
  z-index: 22;
  top: 2.4%;
  left: 3.1%;
  display: block;
  width: clamp(72px, 11.8%, 184px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent;
}

.page-logo-home-link .page-logo-overlay,
.mockup .page-logo-home-link .page-logo-overlay,
.mockup[data-page="accueil"] .page-logo-home-link .page-logo-overlay {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  aspect-ratio: 1 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  pointer-events: none !important;
}

.page-logo-home-link:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
  box-shadow: 0 0 0 7px var(--pb-button-active-frame);
}

.site-nav-overlay {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: clamp(6px, .8vw, 13px) !important;
  overflow: visible !important;
}

.quick-actions-overlay {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.site-nav-overlay .nav-button,
.quick-actions-overlay > a {
  min-width: 0 !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: normal !important;
}

:where(
  .site-nav-overlay .nav-button,
  .quick-actions-overlay > a,
  .theme-mode-switch button,
  .home-action-stack button,
  .home-vote-strip button,
  .client-card-actions button,
  .client-inline-button,
  .vote-button,
  .vote-back,
  .slot-options button,
  .pay-options button,
  .account-tabs button,
  .modal button,
  button.primary,
  button.secondary,
  .client-bastien-panel .actions button,
  .client-tutorial-button,
  .client-route-back,
  .install-home-button,
  .pb-pro-open,
  .pb-pro-submit,
  #pb-professional-intake-root .pb-client-compact-actions button
) {
  border: 2px solid var(--pb-button-frame) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 46%, rgba(45, 8, 78, .22) 100%),
    linear-gradient(100deg, var(--pb-button-rest-left), var(--pb-button-rest-right)) !important;
  color: var(--pb-button-text) !important;
  box-shadow:
    inset 0 0 0 1px var(--pb-button-inner-frame),
    inset 0 3px 4px rgba(255, 255, 255, .24),
    0 5px 0 rgba(49, 13, 84, .9),
    0 11px 22px rgba(17, 4, 25, .3) !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 1px rgba(25, 4, 40, .56) !important;
  transform: translateZ(0) scale(1) !important;
  transform-origin: center !important;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease !important;
  -webkit-tap-highlight-color: transparent;
}

:where(
  .site-nav-overlay .nav-button,
  .quick-actions-overlay > a,
  .theme-mode-switch button,
  .home-action-stack button,
  .home-vote-strip button,
  .client-card-actions button,
  .client-inline-button,
  .vote-button,
  .vote-back,
  .slot-options button,
  .pay-options button,
  .account-tabs button,
  .modal button,
  button.primary,
  button.secondary,
  .client-bastien-panel .actions button,
  .client-tutorial-button,
  .client-route-back,
  .install-home-button,
  .pb-pro-open,
  .pb-pro-submit,
  #pb-professional-intake-root .pb-client-compact-actions button
):hover {
  filter: brightness(1.08) saturate(1.06) !important;
}

:where(
  .site-nav-overlay .nav-button,
  .quick-actions-overlay > a,
  .theme-mode-switch button,
  .home-action-stack button,
  .home-vote-strip button,
  .client-card-actions button,
  .client-inline-button,
  .vote-button,
  .vote-back,
  .slot-options button,
  .pay-options button,
  .account-tabs button,
  .modal button,
  button.primary,
  button.secondary,
  .client-bastien-panel .actions button,
  .client-tutorial-button,
  .client-route-back,
  .install-home-button,
  .pb-pro-open,
  .pb-pro-submit,
  #pb-professional-intake-root .pb-client-compact-actions button
):active {
  transform: translateY(-2px) scale(1.045) !important;
  box-shadow:
    inset 0 0 0 1px var(--pb-button-inner-frame),
    inset 0 4px 6px rgba(255, 255, 255, .3),
    0 7px 0 rgba(49, 13, 84, .88),
    0 16px 28px rgba(17, 4, 25, .34) !important;
}

:where(
  .site-nav-overlay .nav-button,
  .quick-actions-overlay > a,
  .theme-mode-switch button,
  .home-action-stack button,
  .home-vote-strip button,
  .client-card-actions button,
  .client-inline-button,
  .vote-button,
  .vote-back,
  .slot-options button,
  .pay-options button,
  .account-tabs button,
  .modal button,
  button.primary,
  button.secondary,
  .client-bastien-panel .actions button,
  .client-tutorial-button,
  .client-route-back,
  .install-home-button,
  .pb-pro-open,
  .pb-pro-submit,
  #pb-professional-intake-root .pb-client-compact-actions button
):focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 3px !important;
  box-shadow:
    0 0 0 6px var(--pb-button-active-frame),
    inset 0 0 0 1px var(--pb-button-inner-frame),
    0 5px 0 rgba(49, 13, 84, .9) !important;
}

:where(
  .site-nav-overlay .nav-button.active,
  .quick-actions-overlay > a.active,
  .theme-mode-switch button.active,
  .vote-button.active,
  .account-tabs button.active,
  .slot-options button.active,
  .pay-options button.active
) {
  border-color: var(--pb-button-active-frame) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 48%, rgba(20, 3, 34, .24) 100%),
    linear-gradient(100deg, var(--pb-button-active-left), var(--pb-button-active-right)) !important;
  color: #fff !important;
  box-shadow:
    inset 0 0 0 1px var(--pb-button-inner-frame),
    0 5px 0 rgba(31, 7, 53, .94),
    0 0 19px rgba(237, 159, 240, .5) !important;
}

.theme-mode-switch {
  overflow: visible !important;
}

.theme-current-status {
  position: absolute;
  top: calc(100% + 4px);
  right: 4px;
  min-width: max-content;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(15, 4, 22, .78);
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  line-height: 1.2;
  pointer-events: none;
}

body[data-client-theme="day"] .theme-current-status {
  background: rgba(255, 255, 255, .9);
  color: #36185c;
}

.client-route-back {
  position: absolute;
  z-index: 24;
  top: 10.2%;
  left: 3.2%;
  min-height: 40px;
  padding: 7px 14px !important;
  font-size: .78rem !important;
}

.account-page-content {
  min-height: min(720px, 72vh);
}

.account-page-body {
  display: grid;
  gap: 14px;
}

.client-footer-routes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  margin-bottom: 4px;
}

.site-legal-footer.pb-legal-mini .client-footer-routes a {
  font-weight: 800 !important;
}

/* La promesse reste visible et emploie uniquement le texte factuel fourni par V21. */
.mockup[data-page="accueil"] .home-quality-teaser {
  display: grid !important;
}

/* Aurore multicolore de la référence Nuit v9, sans nouvelle image ni filtre sur le logo. */
body[data-client-theme="night"] .mockup[data-page="accueil"]::before {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 0 auto 0 !important;
  display: block !important;
  width: 100% !important;
  height: 48% !important;
  opacity: .82 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at 14% 8%, rgba(32, 255, 151, .78), transparent 27%),
    radial-gradient(ellipse at 37% 4%, rgba(86, 255, 104, .62), transparent 31%),
    radial-gradient(ellipse at 56% 6%, rgba(255, 229, 69, .52), transparent 28%),
    radial-gradient(ellipse at 72% 4%, rgba(255, 82, 171, .68), transparent 31%),
    radial-gradient(ellipse at 91% 7%, rgba(122, 76, 255, .8), transparent 29%),
    linear-gradient(180deg, rgba(1, 8, 20, .4), transparent 72%) !important;
  mix-blend-mode: screen !important;
  filter: blur(10px) saturate(1.2) !important;
  transform: translateY(-7%) scale(1.06) !important;
}

@media (max-width: 1024px) {
  .site-nav-overlay {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .mockup {
    padding-bottom: max(118px, calc(env(safe-area-inset-bottom) + 118px)) !important;
  }

  .page-logo-home-link {
    top: 1.2%;
    left: 3.2%;
    width: clamp(48px, 13vw, 86px);
  }

  .client-route-back {
    position: relative !important;
    inset: auto !important;
    width: max-content !important;
    margin: 8px 10px 0 !important;
  }

  .mockup[data-page="accueil"] .home-quality-teaser {
    position: relative !important;
    inset: auto !important;
    width: calc(100% - 20px) !important;
    margin: 12px 10px 10px !important;
    padding: 14px 15px !important;
    border: 1px solid rgba(255, 184, 226, .52) !important;
    border-radius: 18px !important;
    background: rgba(12, 4, 18, .72) !important;
    color: #fff !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .2) !important;
    text-align: left !important;
  }

  body[data-client-theme="day"] .mockup[data-page="accueil"] .home-quality-teaser {
    background: rgba(255, 255, 255, .9) !important;
    color: #2b1736 !important;
  }

  .mockup[data-page="accueil"] .home-quality-teaser strong,
  .mockup[data-page="accueil"] .home-quality-teaser small {
    display: block !important;
    color: inherit !important;
    text-shadow: none !important;
  }
}

@media (max-width: 600px) {
  .site-nav-overlay {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .site-nav-overlay .nav-button,
  .quick-actions-overlay > a {
    min-height: 44px !important;
    padding: 7px 9px !important;
    font-size: clamp(.68rem, 3.1vw, .82rem) !important;
  }

  .theme-current-status {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  :where(
    .site-nav-overlay .nav-button,
    .quick-actions-overlay > a,
    .theme-mode-switch button,
    .home-action-stack button,
    .home-vote-strip button,
    .client-card-actions button,
    .client-inline-button,
    .vote-button,
    .vote-back,
    .slot-options button,
    .pay-options button,
    .account-tabs button,
    .modal button,
    button.primary,
    button.secondary,
    .client-bastien-panel .actions button,
    .client-tutorial-button,
    .client-route-back,
    .install-home-button,
    .pb-pro-open,
    .pb-pro-submit,
    #pb-professional-intake-root .pb-client-compact-actions button
  ) {
    transition: none !important;
    transform: none !important;
  }
}

/* Dernière couche gagnante : la palette v9 reste identique en Jour et en Nuit. */
body[data-client-theme] :where(
  .site-nav-overlay .nav-button,
  .quick-actions-overlay > a,
  .theme-mode-switch button,
  .home-action-stack button,
  .home-vote-strip button,
  .client-bottom-dock button
) {
  border: 2px solid var(--pb-button-frame) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 46%, rgba(45, 8, 78, .22) 100%),
    linear-gradient(100deg, var(--pb-button-rest-left), var(--pb-button-rest-right)) !important;
  color: var(--pb-button-text) !important;
  box-shadow:
    inset 0 0 0 1px var(--pb-button-inner-frame),
    inset 0 3px 4px rgba(255, 255, 255, .24),
    0 5px 0 rgba(49, 13, 84, .9),
    0 11px 22px rgba(17, 4, 25, .3) !important;
  text-shadow: 0 1px 1px rgba(25, 4, 40, .56) !important;
}

/*
 * Les anciennes couches Jour utilisent des sélecteurs plus spécifiques.
 * L'ancrage sur #app garantit que la palette mesurée dans la référence v9
 * reste réellement gagnante dans les deux thèmes, sans toucher aux surfaces.
 */
body[data-client-theme] #app .mockup :where(
  .site-nav-overlay .nav-button,
  .quick-actions-overlay > a,
  .theme-mode-switch button,
  .home-action-stack button,
  .home-vote-strip button,
  .client-bottom-dock button
) {
  border: 2px solid var(--pb-button-frame) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 46%, rgba(45, 8, 78, .22) 100%),
    linear-gradient(100deg, var(--pb-button-rest-left), var(--pb-button-rest-right)) !important;
  color: var(--pb-button-text) !important;
  box-shadow:
    inset 0 0 0 1px var(--pb-button-inner-frame),
    inset 0 3px 4px rgba(255, 255, 255, .24),
    0 5px 0 rgba(49, 13, 84, .9),
    0 11px 22px rgba(17, 4, 25, .3) !important;
  text-shadow: 0 1px 1px rgba(25, 4, 40, .56) !important;
}

body[data-client-theme] :where(
  .site-nav-overlay .nav-button.active,
  .quick-actions-overlay > a.active,
  .theme-mode-switch button.active
) {
  border-color: var(--pb-button-active-frame) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 48%, rgba(20, 3, 34, .24) 100%),
    linear-gradient(100deg, var(--pb-button-active-left), var(--pb-button-active-right)) !important;
  color: #fff !important;
  box-shadow:
    inset 0 0 0 1px var(--pb-button-inner-frame),
    0 5px 0 rgba(31, 7, 53, .94),
    0 0 19px rgba(237, 159, 240, .5) !important;
}

body[data-client-theme] #app .mockup :where(
  .site-nav-overlay .nav-button.active,
  .quick-actions-overlay > a.active,
  .theme-mode-switch button.active
) {
  border-color: var(--pb-button-active-frame) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 48%, rgba(20, 3, 34, .24) 100%),
    linear-gradient(100deg, var(--pb-button-active-left), var(--pb-button-active-right)) !important;
  color: #fff !important;
  box-shadow:
    inset 0 0 0 1px var(--pb-button-inner-frame),
    0 5px 0 rgba(31, 7, 53, .94),
    0 0 19px rgba(237, 159, 240, .5) !important;
}

body[data-client-theme] :where(
  .site-nav-overlay .nav-button,
  .quick-actions-overlay > a,
  .theme-mode-switch button,
  .home-action-stack button,
  .home-vote-strip button,
  .client-bottom-dock button
):focus-visible {
  outline-color: #fff !important;
  outline-style: solid !important;
  outline-width: 3px !important;
  outline-offset: 3px !important;
  box-shadow:
    0 0 0 6px var(--pb-button-active-frame),
    inset 0 0 0 1px var(--pb-button-inner-frame),
    0 5px 0 rgba(49, 13, 84, .9) !important;
}

body[data-client-theme="day"] :where(
  .site-nav-overlay,
  .quick-actions-overlay,
  .theme-mode-switch
) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.toast {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: transform .22s ease, opacity .16s ease, visibility 0s linear .22s !important;
}

.toast.show {
  opacity: 1 !important;
  visibility: visible !important;
  transition-delay: 0s !important;
}

#pb-professional-intake-root .pb-client-compact-actions {
  display: none !important;
}

.client-bottom-dock {
  position: relative;
  z-index: 25;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  width: min(100% - 24px, 980px);
  margin: 14px auto 8px;
}

.client-bottom-dock .client-tutorial-button,
.mockup[data-page="accueil"] .client-bottom-dock .client-tutorial-button,
.mockup:not([data-page="accueil"]) .client-bottom-dock .client-tutorial-button {
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 8px 15px !important;
  font-size: .75rem !important;
}

.client-bottom-dock .client-tutorial-button::after {
  content: none !important;
}

.client-night-aurora {
  display: none;
}

body[data-client-theme="night"] .mockup[data-page="accueil"] .client-night-aurora {
  position: absolute;
  z-index: 2;
  inset: -7% -4% auto -4%;
  display: block;
  height: 47%;
  overflow: hidden;
  pointer-events: none;
  opacity: .86;
  background:
    radial-gradient(ellipse 58% 105% at 10% -4%, rgba(25, 255, 151, .94) 0%, rgba(72, 255, 116, .56) 28%, transparent 68%),
    radial-gradient(ellipse 55% 95% at 43% -8%, rgba(191, 255, 75, .78) 0%, rgba(255, 220, 67, .38) 34%, transparent 72%),
    radial-gradient(ellipse 58% 105% at 72% -2%, rgba(255, 72, 181, .84) 0%, rgba(196, 63, 255, .46) 36%, transparent 73%),
    radial-gradient(ellipse 48% 95% at 101% 2%, rgba(105, 80, 255, .9) 0%, rgba(70, 146, 255, .43) 35%, transparent 74%);
  clip-path: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .98) 43%, rgba(0, 0, 0, .58) 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .98) 43%, rgba(0, 0, 0, .58) 70%, transparent 100%);
  mix-blend-mode: screen;
  filter: blur(19px) saturate(1.28);
  transform: scaleX(1.06) rotate(-1.2deg);
  transform-origin: 50% 0;
}

@media (min-width: 1025px) {
  .site-nav-overlay {
    left: 23% !important;
    right: 18% !important;
  }

  .quick-actions-overlay {
    left: auto !important;
    right: 2% !important;
    width: 15% !important;
  }
}

@media (max-width: 1024px) {
  .client-bottom-dock {
    justify-content: center;
    margin-bottom: max(10px, env(safe-area-inset-bottom));
  }
}

/*
 * CL-ACCUEIL-V9 — couche canonique réellement gagnante.
 * Elle arrive après les feuilles professional-requests et mobile afin que
 * l'accueil reste identique aux six maquettes verrouillées sans neutraliser
 * les fonctions, routes, dialogues ni protections de la Preview.
 */
body:has(#app .mockup[data-client-fidelity="v9"]) > .pb-simulation-banner {
  display: none !important;
}

body:has(#app .mockup[data-client-fidelity="v9"]) {
  min-height: 100dvh !important;
  overflow: hidden !important;
}

body[data-client-theme] #app:has(.mockup[data-client-fidelity="v9"]) {
  width: 100vw !important;
  min-height: 100dvh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  background: #050208 !important;
}

body[data-client-theme] #app .mockup[data-client-fidelity="v9"] {
  position: relative !important;
  width: 100vw !important;
  max-width: none !important;
  min-height: 100dvh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #050208 !important;
  box-shadow: none !important;
  isolation: isolate;
}

body[data-client-theme] #app .mockup[data-client-fidelity="v9"] > img:first-child {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center top !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

body[data-client-theme] #app .mockup[data-client-fidelity="v9"]::before,
body[data-client-theme] #app .mockup[data-client-fidelity="v9"]::after,
body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .client-night-aurora,
body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .client-mobile-top-logo,
body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-vote-strip,
body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .site-legal-footer,
body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .install-home-button,
body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .prelaunch-banner,
body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .theme-current-status,
body:has(#app .mockup[data-client-fidelity="v9"]) #pb-professional-intake-root .pb-client-compact-actions {
  display: none !important;
}

body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .page-logo-home-link {
  position: absolute !important;
  z-index: 31 !important;
  top: 2.3% !important;
  left: 2.75% !important;
  display: block !important;
  width: clamp(96px, 10%, 142px) !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  background: transparent !important;
  overflow: hidden !important;
  clip-path: circle(50% at 50% 50%) !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .34)) !important;
}

body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .page-logo-home-link .page-logo-overlay {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  aspect-ratio: 1 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: scale(1.115) !important;
  transform-origin: center !important;
  opacity: 1 !important;
  filter: none !important;
}

body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser {
  position: absolute !important;
  z-index: 24 !important;
  left: 5.1% !important;
  right: auto !important;
  top: 50.4% !important;
  bottom: auto !important;
  display: block !important;
  width: 29.5% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-align: left !important;
}

body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser strong,
body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser small,
body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser small span {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", Arial, sans-serif !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser strong {
  font-size: 21px !important;
  font-weight: 900 !important;
  line-height: 23px !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .82) !important;
}

body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .client-fidelity-mobile-break {
  display: none !important;
}

body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser small {
  margin-top: 12px !important;
  font-size: clamp(14px, 1.28vw, 19px) !important;
  font-weight: 760 !important;
  line-height: 1.7 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .88) !important;
}

body[data-client-theme="day"] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser strong,
body[data-client-theme="day"] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser small,
body[data-client-theme="day"] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser small span {
  color: #191049 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .92),
    0 2px 3px rgba(255, 255, 255, .78) !important;
}

body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-action-stack {
  position: absolute !important;
  z-index: 25 !important;
  left: 4.1% !important;
  right: auto !important;
  top: 70.3% !important;
  bottom: auto !important;
  display: grid !important;
  grid-template-columns: 1.34fr 1fr !important;
  gap: 10px !important;
  width: 27.7% !important;
  height: 54px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-action-stack button,
body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-action-stack button:first-child,
body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-action-stack button:not(:first-child) {
  display: inline-flex !important;
  grid-column: auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 54px !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 8px 13px !important;
  font-size: clamp(12px, 1.1vw, 16px) !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .site-nav-overlay {
  position: absolute !important;
  z-index: 30 !important;
  left: 27.6% !important;
  right: 22.7% !important;
  top: 6.15% !important;
  bottom: auto !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: clamp(7px, .75vw, 12px) !important;
  width: auto !important;
  min-height: 42px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .site-nav-overlay .nav-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 5px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(10px, 1.04vw, 16px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .86) !important;
}

body[data-client-theme="day"] #app .mockup[data-client-fidelity="v9"] .site-nav-overlay .nav-button {
  color: #07060b !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .68) !important;
}

body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .site-nav-overlay .nav-button.active {
  color: #d23cff !important;
  box-shadow: inset 0 -3px 0 #d23cff !important;
}

body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .quick-actions-overlay {
  position: absolute !important;
  z-index: 32 !important;
  left: auto !important;
  right: 3% !important;
  top: 6.2% !important;
  bottom: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 16.2% !important;
  min-height: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .quick-actions-overlay > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  font-size: clamp(10px, .78vw, 12px) !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .pb-client-icon {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  stroke: currentColor !important;
}

body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .theme-mode-switch {
  position: absolute !important;
  z-index: 33 !important;
  left: auto !important;
  right: 3% !important;
  top: 14.4% !important;
  bottom: auto !important;
  display: flex !important;
  align-items: stretch !important;
  width: 15.3% !important;
  min-height: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .theme-mode-switch button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 46px !important;
  height: 46px !important;
  margin: 0 0 0 -2px !important;
  padding: 4px 7px !important;
  font-size: clamp(11px, .9vw, 14px) !important;
  line-height: 1 !important;
}

body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .theme-mode-switch button:first-child {
  margin-left: 0 !important;
}

body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .client-bottom-dock {
  position: absolute !important;
  z-index: 34 !important;
  left: auto !important;
  right: .8% !important;
  top: auto !important;
  bottom: 2.2% !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  width: 28% !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .client-bottom-dock .client-tutorial-button {
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 7px 14px !important;
  font-size: clamp(10px, .82vw, 13px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (min-width: 1025px) {
  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .client-bottom-dock .client-tutorial-button {
    flex: 1 1 0 !important;
    width: 0 !important;
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] > img:first-child {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  body[data-client-theme="day"] #app .mockup[data-client-fidelity="v9"] > img:first-child {
    content: url("/client/assets/accueil-fond-client-jour-tablette-v9.png") !important;
    transform: matrix(.966, 0, 0, .966, 22, -19) !important;
    transform-origin: left top !important;
  }

  body[data-client-theme="night"] #app .mockup[data-client-fidelity="v9"] > img:first-child {
    content: url("/client/assets/accueil-fond-client-nuit-phone-v9.png") !important;
    transform: translate(51px, 56px) scale(1.19) !important;
    transform-origin: center !important;
  }

  body[data-client-theme="day"] #app .mockup[data-client-fidelity="v9"] {
    background:
      url("/client/assets/accueil-fond-client-jour-tablette-v9.png")
      center / 100% 100% no-repeat !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .page-logo-home-link {
    top: 1.8% !important;
    left: 2.8% !important;
    width: 13% !important;
    max-width: 102px !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .theme-mode-switch {
    top: 2.3% !important;
    right: 2.8% !important;
    width: 31.8% !important;
    height: 50px !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .theme-mode-switch button {
    min-height: 50px !important;
    height: 50px !important;
    font-size: clamp(13px, 2.05vw, 17px) !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser {
    left: 3.2% !important;
    top: 47.1% !important;
    width: 72% !important;
  }

  body[data-client-theme="night"] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser {
    top: 32.8% !important;
    width: 35% !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser strong {
    font-size: clamp(25px, 3.45vw, 30px) !important;
    line-height: 1.07 !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser small {
    margin-top: 11px !important;
    font-size: clamp(15px, 2.35vw, 19px) !important;
    font-weight: 800 !important;
    line-height: 1.27 !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser small span + span {
    margin-top: 2px !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-action-stack {
    left: 3.1% !important;
    right: 3.1% !important;
    top: 64.2% !important;
    width: auto !important;
    height: 50px !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 22px !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-action-stack button,
  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-action-stack button:first-child,
  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-action-stack button:not(:first-child) {
    min-height: 50px !important;
    height: 50px !important;
    font-size: clamp(13px, 2.15vw, 18px) !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .site-nav-overlay {
    left: 3.1% !important;
    right: 3.1% !important;
    top: 70.5% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 50px) !important;
    gap: 10px 18px !important;
    min-height: 110px !important;
    height: 110px !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .site-nav-overlay .nav-button,
  body[data-client-theme="day"] #app .mockup[data-client-fidelity="v9"] .site-nav-overlay .nav-button {
    min-height: 50px !important;
    height: 50px !important;
    padding: 7px 10px !important;
    border: 2px solid var(--pb-button-frame) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 46%, rgba(45, 8, 78, .22) 100%),
      linear-gradient(100deg, var(--pb-button-rest-left), var(--pb-button-rest-right)) !important;
    color: #fff !important;
    box-shadow:
      inset 0 0 0 1px var(--pb-button-inner-frame),
      inset 0 3px 4px rgba(255, 255, 255, .24),
      0 5px 0 rgba(49, 13, 84, .9),
      0 11px 22px rgba(17, 4, 25, .3) !important;
    font-size: clamp(12px, 1.85vw, 15px) !important;
    text-shadow: 0 1px 1px rgba(25, 4, 40, .56) !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .site-nav-overlay .nav-button.active {
    border-color: var(--pb-button-active-frame) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 48%, rgba(20, 3, 34, .24) 100%),
      linear-gradient(100deg, var(--pb-button-active-left), var(--pb-button-active-right)) !important;
    box-shadow:
      inset 0 0 0 1px var(--pb-button-inner-frame),
      0 5px 0 rgba(31, 7, 53, .94),
      0 0 19px rgba(237, 159, 240, .5) !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .quick-actions-overlay {
    left: 3.1% !important;
    right: 3.1% !important;
    top: 83.5% !important;
    width: auto !important;
    height: 50px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .quick-actions-overlay > a {
    min-height: 50px !important;
    height: 50px !important;
    font-size: clamp(12px, 1.85vw, 15px) !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .quick-actions-overlay .pb-client-icon {
    display: none !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .client-bottom-dock {
    left: auto !important;
    right: 2% !important;
    bottom: 2.45% !important;
    width: 55% !important;
    height: 46px !important;
    gap: 14px !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .client-bottom-dock .client-tutorial-button {
    flex: 1 1 0 !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 7px 12px !important;
    font-size: clamp(11px, 1.7vw, 14px) !important;
  }
}

@media (max-width: 600px) {
  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] > img:first-child {
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    object-fit: fill !important;
    object-position: center top !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 0 70%, rgba(0, 0, 0, .92) 78%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, #000 0 70%, rgba(0, 0, 0, .92) 78%, transparent 100%) !important;
  }

  body[data-client-theme="day"] #app .mockup[data-client-fidelity="v9"] > img:first-child {
    content: url("/client/assets/accueil-fond-client-jour-phone-v9.png") !important;
    top: -57px !important;
    height: 92.5% !important;
    transform: none !important;
  }

  body[data-client-theme="night"] #app .mockup[data-client-fidelity="v9"] > img:first-child {
    content: url("/client/assets/accueil-fond-client-nuit-phone-v9.png") !important;
    top: -60px !important;
    height: 85.8% !important;
    transform: none !important;
  }

  body[data-client-theme="day"] #app .mockup[data-client-fidelity="v9"] {
    background:
      url("/client/assets/accueil-fond-client-jour-phone-v9.png")
      center / 100% 100% no-repeat !important;
  }

  body[data-client-theme="night"] #app .mockup[data-client-fidelity="v9"] {
    background:
      url("/client/assets/accueil-fond-client-nuit-phone-v9.png")
      center / 100% 100% no-repeat !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .page-logo-home-link {
    top: 1.55% !important;
    left: 4.1% !important;
    width: 14.1% !important;
    max-width: 56px !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .theme-mode-switch {
    top: 1.95% !important;
    right: 3.2% !important;
    width: 55.1% !important;
    min-height: 40px !important;
    height: 40px !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .theme-mode-switch button {
    min-height: 40px !important;
    height: 40px !important;
    padding: 3px 5px !important;
    font-size: 12px !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser,
  body[data-client-theme="night"] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser {
    left: 4.7% !important;
    right: 3.3% !important;
    top: 41.15% !important;
    width: auto !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser strong {
    max-width: 92% !important;
    font-size: clamp(21px, 5.95vw, 24px) !important;
    line-height: 1.08 !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .client-fidelity-mobile-break {
    display: inline !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser small {
    margin-top: 7px !important;
    font-size: clamp(12px, 3.42vw, 14px) !important;
    font-weight: 800 !important;
    line-height: 1.32 !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser small span + span {
    margin-top: 0 !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-action-stack {
    left: 3.9% !important;
    right: 3.9% !important;
    top: 55.75% !important;
    width: auto !important;
    height: 39px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-action-stack button,
  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-action-stack button:first-child,
  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-action-stack button:not(:first-child) {
    min-height: 39px !important;
    height: 39px !important;
    padding: 5px 7px !important;
    font-size: clamp(9px, 2.8vw, 11px) !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .site-nav-overlay {
    left: 3.6% !important;
    right: 3.6% !important;
    top: 61.85% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, 39px) !important;
    gap: 9px 12px !important;
    width: auto !important;
    min-height: 135px !important;
    height: 135px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .site-nav-overlay .nav-button,
  body[data-client-theme="day"] #app .mockup[data-client-fidelity="v9"] .site-nav-overlay .nav-button {
    min-height: 39px !important;
    height: 39px !important;
    padding: 5px 7px !important;
    border: 2px solid var(--pb-button-frame) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 46%, rgba(45, 8, 78, .22) 100%),
      linear-gradient(100deg, var(--pb-button-rest-left), var(--pb-button-rest-right)) !important;
    color: #fff !important;
    box-shadow:
      inset 0 0 0 1px var(--pb-button-inner-frame),
      inset 0 3px 4px rgba(255, 255, 255, .24),
      0 4px 0 rgba(49, 13, 84, .9),
      0 8px 16px rgba(17, 4, 25, .28) !important;
    font-size: clamp(9px, 2.65vw, 11px) !important;
    text-shadow: 0 1px 1px rgba(25, 4, 40, .56) !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .site-nav-overlay .nav-button.active {
    border-color: var(--pb-button-active-frame) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 48%, rgba(20, 3, 34, .24) 100%),
      linear-gradient(100deg, var(--pb-button-active-left), var(--pb-button-active-right)) !important;
    box-shadow:
      inset 0 0 0 1px var(--pb-button-inner-frame),
      0 4px 0 rgba(31, 7, 53, .94),
      0 0 16px rgba(237, 159, 240, .45) !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .quick-actions-overlay {
    left: 3.6% !important;
    right: 3.6% !important;
    top: 78.95% !important;
    width: auto !important;
    height: 39px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .quick-actions-overlay > a {
    min-height: 39px !important;
    height: 39px !important;
    padding: 5px 7px !important;
    font-size: clamp(9px, 2.65vw, 11px) !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .quick-actions-overlay .pb-client-icon {
    display: none !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .client-bottom-dock {
    left: 11.5% !important;
    right: 3.9% !important;
    bottom: 1.55% !important;
    width: auto !important;
    height: 38px !important;
    gap: 12px !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .client-bottom-dock .client-tutorial-button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 5px 7px !important;
    font-size: clamp(9px, 2.5vw, 11px) !important;
  }
}

/*
 * CL-ACCUEIL-DESKTOP-SAND-V10 — ajustement validé par Sébastien le 01/08/2026.
 * Ordinateur uniquement : décor complet 3:2, remorque entière, quatre actions
 * alignées dans le sable et Retour centré sous le logo. Les vues <= 1024 px
 * ainsi que tous les autres écrans Client conservent leur composition V9.
 */
@media (min-width: 1025px) {
  body:has(#app .mockup[data-client-fidelity="v9"]) {
    min-height: 66.6667vw !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #050208 !important;
  }

  body[data-client-theme] #app:has(.mockup[data-client-fidelity="v9"]) {
    min-height: 66.6667vw !important;
    height: 66.6667vw !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] {
    min-height: 66.6667vw !important;
    height: 66.6667vw !important;
    max-height: none !important;
    aspect-ratio: 3 / 2 !important;
    overflow: hidden !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] > img:first-child {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center top !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .page-logo-home-link {
    top: 1.35% !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .client-route-back-home {
    top: calc(1.35% + clamp(96px, 10vw, 142px) + 12px) !important;
    left: 2.75% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: clamp(96px, 10vw, 142px) !important;
    min-height: 42px !important;
    padding: 7px 12px !important;
    font-size: clamp(11px, .82vw, 13px) !important;
    text-transform: uppercase !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .site-nav-overlay {
    top: 5.2% !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .quick-actions-overlay {
    top: 4% !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .theme-mode-switch {
    top: 9.1% !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser {
    left: 6.25% !important;
    top: 33.1% !important;
    width: 35.5% !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body[data-client-theme="day"] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser strong,
  body[data-client-theme="day"] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser small,
  body[data-client-theme="day"] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser small span {
    color: #170b35 !important;
    -webkit-text-stroke: .25px rgba(5, 1, 12, .82) !important;
    text-shadow:
      1px 0 0 rgba(255, 255, 255, .72),
      0 1px 0 rgba(255, 255, 255, .72),
      -1px 0 0 rgba(10, 2, 22, .58),
      0 -1px 0 rgba(10, 2, 22, .58) !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser strong {
    font-size: clamp(25px, 1.82vw, 30px) !important;
    line-height: 1.08 !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-quality-teaser small {
    margin-top: 14px !important;
    font-size: clamp(16px, 1.2vw, 20px) !important;
    font-weight: 800 !important;
    line-height: 1.55 !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-action-stack {
    left: 14.7% !important;
    right: auto !important;
    top: auto !important;
    bottom: 6.7% !important;
    width: 29.8% !important;
    height: 54px !important;
    grid-template-columns: 1.25fr 1fr !important;
    gap: 24px !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .client-bottom-dock {
    left: 46.8% !important;
    right: auto !important;
    top: auto !important;
    bottom: 6.7% !important;
    width: 36.4% !important;
    height: 54px !important;
    gap: 24px !important;
  }

  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .home-action-stack button,
  body[data-client-theme] #app .mockup[data-client-fidelity="v9"] .client-bottom-dock .client-tutorial-button {
    min-height: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    font-size: clamp(11px, .9vw, 14px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .mockup:not([data-page="accueil"]) .client-route-back {
    top: calc(2.4% + clamp(72px, 11.8vw, 184px) + 12px) !important;
  }

  .mockup[data-page="apropos"] > .client-route-back {
    top: calc(clamp(14px, 2.4vw, 30px) + clamp(72px, 7.2vw, 108px) + 12px) !important;
  }
}

/* ===== SOURCE CONSOLIDÉE: private/site/assets/client-home-canonical-six-v1.css ===== */
/* Pizza Baladzo — accueil Client canonique, six vues 2026-08-24. */

html:has(#app .mockup[data-page="accueil"][data-client-fidelity="v10"]),
body:has(#app .mockup[data-page="accueil"][data-client-fidelity="v10"]){
  width:100%;
  min-height:100%;
  overflow:hidden !important;
  background:#050208;
}

/* Les liens légaux conservent leur rendu discret tout en offrant une cible tactile WCAG. */
#app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-legal{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:2px 10px;
}

#app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-legal a{
  display:inline-flex;
  min-width:44px;
  min-height:44px;
  align-items:center;
  justify-content:center;
}

body:has(#app .mockup[data-page="accueil"][data-client-fidelity="v10"]) .pb-cookie-settings{
  display:none !important;
}

#app .mockup[data-page="accueil"][data-client-fidelity="v10"]{
  position:relative !important;
  width:100vw !important;
  min-width:0 !important;
  max-width:none !important;
  height:100vh !important;
  height:100dvh !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  isolation:isolate;
  font-family:var(--pb-lot01-font-interface,"Source Sans 3",Arial,sans-serif) !important;
}

#app .mockup[data-page="accueil"][data-client-fidelity="v10"] > img:first-child{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  display:block !important;
  width:100% !important;
  height:100vh !important;
  height:100dvh !important;
  min-height:0 !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center !important;
  content:normal !important;
  opacity:1 !important;
  filter:none !important;
  pointer-events:none !important;
}

#app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .client-night-aurora,
#app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .client-mobile-top-logo,
#app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .client-route-back,
#app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .hotspot,
#app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .client-tutorial-overlay,
#app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .client-bastien-widget:not(.open){
  display:none !important;
}

#app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .site-legal-footer:not(.client-home-footer){
  display:none !important;
}

#app .mockup[data-page="accueil"][data-client-fidelity="v10"] :is(
  .client-quick-action,
  .install-home-button,
  .site-nav-overlay .client-home-professional,
  .client-bottom-dock .client-tutorial-button
){
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 12px !important;
  overflow:hidden !important;
  border:8px 24px solid transparent !important;
  border-radius:999px !important;
  background-color:transparent !important;
  background-image:none !important;
  border-image-source:url('/client/assets/client-button-master-v3.png') !important;
  border-image-slice:360 520 fill !important;
  border-image-width:8px 24px !important;
  border-image-outset:0 !important;
  border-image-repeat:stretch !important;
  box-shadow:none !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-family:var(--pb-lot01-font-compact,"Barlow Condensed",Arial,sans-serif) !important;
  font-weight:600 !important;
  line-height:1 !important;
  letter-spacing:.01em !important;
  text-align:center !important;
  text-shadow:0 1px 2px rgba(28,0,35,.9) !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

#app .mockup[data-page="accueil"][data-client-fidelity="v10"] :is(
  .client-quick-action,
  .install-home-button,
  .site-nav-overlay .nav-button,
  .client-bottom-dock .client-tutorial-button,
  .client-home-footer a
):focus-visible{
  outline:3px solid #fff !important;
  outline-offset:2px !important;
  box-shadow:0 0 0 5px rgba(204,35,219,.78) !important;
}

#app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay svg,
#app .mockup[data-page="accueil"][data-client-fidelity="v10"] .install-home-button > img,
#app .mockup[data-page="accueil"][data-client-fidelity="v10"] .install-home-button small{
  display:none !important;
}

#app .mockup[data-page="accueil"][data-client-fidelity="v10"] .install-home-button > span{
  display:block !important;
  margin:0 !important;
  color:inherit !important;
  font:inherit !important;
  letter-spacing:inherit !important;
  text-transform:inherit !important;
}

body[data-client-theme-mode] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]
  .theme-mode-switch.pb-master-selector-ready{
  position:absolute !important;
  z-index:12 !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:0 !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:999px !important;
  background-color:transparent !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:100% 100% !important;
  box-shadow:0 4px 10px rgba(18,0,28,.25) !important;
  backdrop-filter:none !important;
}

body[data-client-theme-mode="auto"] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]
  .theme-mode-switch.pb-master-selector-ready{
  background-image:url('/client/_assets/client-theme-selector-auto-reference-v1.png') !important;
}

body[data-client-theme-mode="day"] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]
  .theme-mode-switch.pb-master-selector-ready{
  background-image:url('/client/_assets/client-theme-selector-day-reference-v1.png') !important;
}

body[data-client-theme-mode="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]
  .theme-mode-switch.pb-master-selector-ready{
  background-image:url('/client/_assets/client-theme-selector-night-reference-v1.png') !important;
}

body[data-client-theme-mode] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]
  .theme-mode-switch.pb-master-selector-ready > button,
body[data-client-theme-mode] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]
  .theme-mode-switch.pb-master-selector-ready > button.active{
  width:auto !important;
  min-width:0 !important;
  height:100% !important;
  min-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  font-size:0 !important;
  transform:none !important;
}

body[data-client-theme-mode] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]
  .theme-mode-switch.pb-master-selector-ready > button:focus-visible{
  outline:3px solid #fff !important;
  outline-offset:-4px !important;
  box-shadow:inset 0 0 0 2px rgba(79,8,104,.82) !important;
}

#app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser{
  position:absolute !important;
  z-index:6 !important;
  display:block !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  text-align:left !important;
}

#app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser strong{
  display:block !important;
  margin:0 !important;
  color:#25132c !important;
  -webkit-text-fill-color:#25132c !important;
  font-family:var(--pb-lot01-font-display,"Kaushan Script",cursive) !important;
  font-style:normal !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  text-shadow:1px 1px 0 rgba(237,89,166,.72) !important;
}

body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser strong{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:0 2px 3px rgba(13,0,20,.92) !important;
}

#app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser small{
  display:block !important;
  margin:0 !important;
  color:#181019 !important;
  -webkit-text-fill-color:#181019 !important;
  font-family:var(--pb-lot01-font-interface,"Source Sans 3",Arial,sans-serif) !important;
  font-style:normal !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  text-shadow:none !important;
}

body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser small{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:0 1px 2px rgba(9,0,15,.95) !important;
}

#app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser small > .client-home-wide-break{
  display:inline !important;
}

#app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser small > .client-home-phone-break{
  display:none !important;
}

#app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer{
  position:absolute !important;
  z-index:9 !important;
  display:block !important;
  width:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  color:#1d1420 !important;
  font-family:var(--pb-lot01-font-interface,"Source Sans 3",Arial,sans-serif) !important;
  font-weight:600 !important;
  line-height:1.25 !important;
  text-shadow:none !important;
}

body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer{
  color:#fff !important;
  text-shadow:0 1px 2px rgba(9,0,15,.9) !important;
}

#app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer :is(p,nav){
  margin:0 !important;
  padding:0 !important;
}

#app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer nav{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:0 !important;
}

#app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer a{
  display:inline !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
  font:inherit !important;
  text-decoration:none !important;
  text-transform:none !important;
}

#app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer a + a::before{
  content:" • ";
  white-space:pre;
}

#app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-bottom-dock{
  position:absolute !important;
  inset:0 !important;
  z-index:10 !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  pointer-events:none !important;
}

#app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-bottom-dock > button{
  position:absolute !important;
  pointer-events:auto !important;
}

@media(min-width:1025px){
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .page-logo-home-link{
    position:absolute !important;
    z-index:11 !important;
    left:42px !important;
    top:20px !important;
    display:block !important;
    width:116px !important;
    height:116px !important;
    margin:0 !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .page-logo-home-link > img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    border-radius:50% !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .site-nav-overlay{
    position:absolute !important;
    z-index:10 !important;
    left:208px !important;
    top:34px !important;
    display:flex !important;
    width:657px !important;
    height:48px !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:none !important;
    box-shadow:none !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    height:38px !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 11px !important;
    border:0 !important;
    border-radius:0 !important;
    background:none !important;
    box-shadow:none !important;
    color:#211226 !important;
    -webkit-text-fill-color:#211226 !important;
    font-family:var(--pb-lot01-font-compact,"Barlow Condensed",Arial,sans-serif) !important;
    font-size:14px !important;
    font-weight:600 !important;
    letter-spacing:.015em !important;
    line-height:1 !important;
    text-decoration:none !important;
    text-shadow:none !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
  }

  body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    text-shadow:0 1px 2px rgba(5,0,10,.92) !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button.active::after{
    content:"";
    position:absolute;
    left:10px;
    right:10px;
    bottom:1px;
    height:4px;
    border-radius:4px;
    background:#f022d9;
    box-shadow:0 0 8px rgba(240,34,217,.65);
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .client-home-professional{
    display:none !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay{
    position:absolute !important;
    z-index:12 !important;
    left:1319px !important;
    top:22px !important;
    display:grid !important;
    grid-template-columns:111.5px 111.5px !important;
    gap:9px !important;
    width:232px !important;
    height:40px !important;
    margin:0 !important;
    padding:0 !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay .client-quick-action{
    width:111.5px !important;
    height:40px !important;
    font-size:13px !important;
  }

  body[data-client-theme-mode] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]
    .theme-mode-switch.pb-master-selector-ready{
    left:1161px !important;
    top:71px !important;
    width:390px !important;
    height:49px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .install-home-button{
    position:absolute !important;
    z-index:12 !important;
    left:1402px !important;
    top:130px !important;
    width:149px !important;
    height:36px !important;
    font-size:13px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser{
    left:58px !important;
    top:316px !important;
    width:415px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser strong{
    font-size:46px !important;
    line-height:1.08 !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser small{
    width:405px !important;
    margin-top:10px !important;
    font-size:17px !important;
    line-height:1.45 !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-bottom-dock .client-professional-bottom{
    left:44px !important;
    bottom:27px !important;
    width:222px !important;
    height:45px !important;
    font-size:14px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-bottom-dock > .client-tutorial-button:not(.client-professional-bottom){
    right:42px !important;
    bottom:27px !important;
    width:140px !important;
    height:43px !important;
    font-size:14px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer{
    left:284px !important;
    bottom:33px !important;
    display:grid !important;
    grid-template-columns:max-content max-content !important;
    gap:136px !important;
    font-size:13px !important;
  }
}

@media(max-width:1024px){
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .site-nav-overlay{
    position:absolute !important;
    z-index:10 !important;
    display:grid !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:none !important;
    box-shadow:none !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button{
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 7px !important;
    border:8px 18px solid transparent !important;
    border-radius:999px !important;
    background-color:transparent !important;
    background-image:none !important;
    border-image-source:url('/client/assets/client-button-master-v3.png') !important;
    border-image-slice:360 520 fill !important;
    border-image-width:8px 18px !important;
    border-image-outset:0 !important;
    border-image-repeat:stretch !important;
    box-shadow:none !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    font-family:var(--pb-lot01-font-compact,"Barlow Condensed",Arial,sans-serif) !important;
    font-weight:600 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
    text-align:center !important;
    text-decoration:none !important;
    text-shadow:0 1px 2px rgba(28,0,35,.9) !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button:nth-child(1){display:none !important}
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button:nth-child(3){grid-area:menu}
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button:nth-child(6){grid-area:trouver}
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button:nth-child(4){grid-area:evenements}
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button:nth-child(5){grid-area:contact}
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button:nth-child(2){grid-area:apropos}
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .client-home-professional{grid-area:pro}

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-bottom-dock .client-professional-bottom{
    display:none !important;
  }
}

@media(min-width:601px) and (max-width:1024px){
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .page-logo-home-link{
    position:absolute !important;
    z-index:11 !important;
    left:24px !important;
    top:19px !important;
    display:block !important;
    width:108px !important;
    height:108px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .page-logo-home-link > img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    border-radius:50% !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay{
    position:absolute !important;
    z-index:12 !important;
    left:589px !important;
    top:16px !important;
    display:grid !important;
    grid-template-columns:108.5px 108.5px !important;
    gap:8px !important;
    width:225px !important;
    height:38px !important;
    margin:0 !important;
    padding:0 !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay .client-quick-action{
    width:108.5px !important;
    height:38px !important;
    font-size:13px !important;
  }

  body[data-client-theme-mode] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]
    .theme-mode-switch.pb-master-selector-ready{
    left:454px !important;
    top:61px !important;
    width:360px !important;
    height:46px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .install-home-button{
    position:absolute !important;
    z-index:12 !important;
    left:670px !important;
    top:114px !important;
    width:144px !important;
    height:36px !important;
    font-size:13px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser{
    left:33px !important;
    top:181px !important;
    width:460px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser strong{
    font-size:50px !important;
    line-height:1.08 !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser small{
    width:430px !important;
    margin-top:8px !important;
    font-size:18px !important;
    line-height:1.35 !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .site-nav-overlay{
    left:32px !important;
    right:47px !important;
    bottom:100px !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-template-rows:40px 40px !important;
    grid-template-areas:"menu trouver evenements" "contact apropos pro" !important;
    gap:14px 16px !important;
    height:94px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button{
    font-size:14px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-bottom-dock > .client-tutorial-button:not(.client-professional-bottom){
    right:32px !important;
    bottom:31px !important;
    width:162px !important;
    height:41px !important;
    font-size:14px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer{
    left:32px !important;
    bottom:31px !important;
    font-size:14px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer nav{
    margin-top:8px !important;
  }
}

@media(max-width:600px){
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser small > .client-home-wide-break{
    display:none !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser small > .client-home-phone-break{
    display:inline !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .page-logo-home-link{
    position:absolute !important;
    z-index:11 !important;
    left:14px !important;
    top:11px !important;
    display:block !important;
    width:66px !important;
    height:66px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .page-logo-home-link > img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    border-radius:50% !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay{
    position:absolute !important;
    z-index:12 !important;
    left:246px !important;
    top:9px !important;
    display:grid !important;
    grid-template-columns:65px 65px !important;
    gap:4px !important;
    width:134px !important;
    height:26px !important;
    margin:0 !important;
    padding:0 !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay .client-quick-action{
    width:65px !important;
    height:26px !important;
    padding:0 4px !important;
    font-size:9px !important;
  }

  body[data-client-theme-mode] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]
    .theme-mode-switch.pb-master-selector-ready{
    left:196px !important;
    top:40px !important;
    width:184px !important;
    height:31px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .install-home-button{
    position:absolute !important;
    z-index:12 !important;
    left:291px !important;
    top:76px !important;
    width:89px !important;
    height:23px !important;
    padding:0 4px !important;
    font-size:9px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser{
    left:18px !important;
    top:113px !important;
    width:220px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser strong{
    font-size:30px !important;
    line-height:1.05 !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser small{
    width:220px !important;
    margin-top:8px !important;
    font-size:12px !important;
    line-height:1.28 !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .site-nav-overlay{
    left:14px !important;
    right:14px !important;
    bottom:106px !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:29px 29px 29px !important;
    grid-template-areas:"menu trouver" "evenements contact" "apropos pro" !important;
    gap:8px !important;
    height:103px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button{
    padding:0 4px !important;
    font-size:10px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-bottom-dock > .client-tutorial-button:not(.client-professional-bottom){
    right:12px !important;
    bottom:22px !important;
    width:104px !important;
    height:34px !important;
    padding:0 4px !important;
    font-size:10px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer{
    left:14px !important;
    bottom:20px !important;
    width:205px !important;
    font-size:9px !important;
    line-height:1.45 !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer nav{
    width:110px !important;
    margin-top:5px !important;
    row-gap:2px !important;
  }
}

/* Stabilisation finale : la scène canonique contient déjà le ciel et la remorque.
   Les anciens calques filtrés provoquaient un grand rectangle noir selon le GPU. */
body:has(#app .mockup[data-page="accueil"][data-client-fidelity="v10"]) #app::before,
#app .mockup[data-page="accueil"][data-client-fidelity="v10"]::before,
#app .mockup[data-page="accueil"][data-client-fidelity="v10"]::after{
  content:none !important;
  display:none !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}

#app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser h1{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  color:#25132c !important;
  font-family:var(--pb-lot01-font-display,"Kaushan Script",cursive) !important;
  font-size:inherit !important;
  font-weight:400 !important;
  line-height:inherit !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  text-shadow:0 2px 1px rgba(255,255,255,.74),0 5px 9px rgba(255,255,255,.72),0 2px 3px rgba(37,19,44,.24) !important;
}

body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser h1{
  color:#fff !important;
  text-shadow:0 3px 14px rgba(0,0,0,.9),0 2px 3px rgba(0,0,0,.88) !important;
}

body[data-client-theme-mode] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]
  .theme-mode-switch.pb-master-selector-ready{
  min-height:44px !important;
  background-size:contain !important;
}

#app .mockup[data-page="accueil"][data-client-fidelity="v10"] :is(
  .client-quick-action,
  .install-home-button,
  .site-nav-overlay .nav-button,
  .site-nav-overlay .client-home-professional,
  .client-bottom-dock .client-tutorial-button
){
  min-height:44px !important;
}

@media (orientation:landscape){
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .page-logo-home-link{
    left:2.625vw !important;
    top:2.22vh !important;
    width:min(7.25vw,116px) !important;
    height:min(12.9vh,116px) !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay{
    left:auto !important;
    right:3.06vw !important;
    top:2.44vh !important;
    width:min(14.5vw,232px) !important;
    height:44px !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay .client-quick-action{
    width:100% !important;
    height:44px !important;
  }
  body[data-client-theme-mode] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]
    .theme-mode-switch.pb-master-selector-ready{
    left:auto !important;
    right:3.06vw !important;
    top:7.88vh !important;
    width:min(24.4vw,390px) !important;
    height:49px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .install-home-button{
    left:auto !important;
    right:3.06vw !important;
    top:14.44vh !important;
    width:min(9.32vw,149px) !important;
    height:44px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser{
    left:3.62vw !important;
    top:35.1vh !important;
    width:min(26vw,415px) !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser h1{
    font-size:min(2.88vw,46px) !important;
    line-height:1.08 !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-bottom-dock .client-professional-bottom{
    left:2.75vw !important;
    bottom:3vh !important;
    height:45px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-bottom-dock > .client-tutorial-button:not(.client-professional-bottom){
    right:2.62vw !important;
    bottom:3vh !important;
    height:44px !important;
  }
}

@media (orientation:portrait) and (min-aspect-ratio:14/25){
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .page-logo-home-link{
    left:2.9vw !important;
    top:1.7vh !important;
    width:13vw !important;
    height:auto !important;
    aspect-ratio:1 !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay{
    left:auto !important;
    right:2.4vw !important;
    top:1.45vh !important;
    width:27vw !important;
    height:44px !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay .client-quick-action{
    width:100% !important;
    height:44px !important;
  }
  body[data-client-theme-mode] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]
    .theme-mode-switch.pb-master-selector-ready{
    left:auto !important;
    right:2.4vw !important;
    top:5.48vh !important;
    width:43.2vw !important;
    height:46px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .install-home-button{
    left:auto !important;
    right:2.4vw !important;
    top:10.25vh !important;
    width:17.3vw !important;
    height:44px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser{
    left:3.95vw !important;
    top:16.3vh !important;
    width:55vw !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser h1{
    font-size:6vw !important;
    line-height:1.08 !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .site-nav-overlay{
    left:3.8vw !important;
    right:5.6vw !important;
    bottom:9vh !important;
    grid-template-rows:repeat(2,minmax(44px,3.6vh)) !important;
    height:auto !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer{
    left:3.8vw !important;
    bottom:2.8vh !important;
  }
}

@media (orientation:portrait) and (max-aspect-ratio:14/25){
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .page-logo-home-link{
    left:3.6vw !important;
    top:.65vh !important;
    width:17vw !important;
    height:auto !important;
    aspect-ratio:1 !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay{
    left:auto !important;
    right:2.6vw !important;
    top:.55vh !important;
    width:34.4vw !important;
    height:44px !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay .client-quick-action{
    width:100% !important;
    height:44px !important;
    font-size:clamp(9px,2.25vw,14px) !important;
  }
  body[data-client-theme-mode] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]
    .theme-mode-switch.pb-master-selector-ready{
    left:auto !important;
    right:2.6vw !important;
    top:3.9vh !important;
    width:47.2vw !important;
    height:44px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .install-home-button{
    left:auto !important;
    right:2.6vw !important;
    top:7.45vh !important;
    width:23vw !important;
    height:44px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser{
    left:4.6vw !important;
    top:13.4vh !important;
    width:56.4vw !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser h1{
    font-size:7.7vw !important;
    line-height:1.05 !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser small{
    width:100% !important;
    font-size:clamp(12px,3.08vw,22px) !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .site-nav-overlay{
    left:3.6vw !important;
    right:3.6vw !important;
    bottom:12.55vh !important;
    grid-template-rows:repeat(3,44px) !important;
    height:auto !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer{
    left:3.6vw !important;
    bottom:1.2vh !important;
    width:54vw !important;
    font-size:clamp(9px,2.3vw,14px) !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-bottom-dock > .client-tutorial-button:not(.client-professional-bottom){
    right:3vw !important;
    bottom:1.3vh !important;
    width:27vw !important;
    height:44px !important;
  }
}

/* Correctif responsive final : restitue l'ordre vertical des références canoniques
   sans transformer les compositions de contrôle en fonds aplatis. */
#app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-action-title{
  display:none !important;
}

@media (min-width:601px) and (max-width:1024px) and (orientation:portrait){
  html:has(#app .mockup[data-page="accueil"][data-client-fidelity="v10"]),
  body:has(#app .mockup[data-page="accueil"][data-client-fidelity="v10"]){
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"]{
    width:100% !important;
    height:auto !important;
    min-height:100dvh !important;
    overflow:hidden !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > img:first-child{
    width:100% !important;
    height:100% !important;
    min-height:100dvh !important;
    object-fit:cover !important;
    object-position:center top !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .page-logo-home-link{
    left:24px !important;
    top:15px !important;
    width:100px !important;
    height:100px !important;
  }

  body[data-client-theme-mode] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]
    .theme-mode-switch.pb-master-selector-ready{
    left:auto !important;
    right:36px !important;
    top:24px !important;
    width:278px !important;
    height:44px !important;
    min-height:44px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay{
    left:auto !important;
    right:36px !important;
    top:74px !important;
    width:198px !important;
    height:44px !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay .client-quick-action{
    width:100% !important;
    height:44px !important;
    font-size:13px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .install-home-button{
    left:auto !important;
    right:70px !important;
    top:124px !important;
    width:130px !important;
    height:44px !important;
    font-size:13px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser{
    left:28px !important;
    top:42.4dvh !important;
    width:min(58vw,450px) !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser h1{
    font-size:40px !important;
    line-height:1.08 !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser small{
    width:100% !important;
    margin-top:9px !important;
    font-size:18px !important;
    line-height:1.35 !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .site-nav-overlay{
    left:58px !important;
    right:58px !important;
    top:auto !important;
    bottom:23.8dvh !important;
    width:auto !important;
    height:auto !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-template-rows:repeat(2,44px) !important;
    grid-template-areas:"apropos menu evenements" "contact trouver pro" !important;
    gap:12px 16px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button{
    min-height:44px !important;
    font-size:14px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer{
    left:28px !important;
    right:auto !important;
    top:auto !important;
    bottom:6.3dvh !important;
    width:470px !important;
    font-size:14px !important;
    line-height:1.35 !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer nav{
    justify-content:flex-start !important;
    margin-top:4px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-bottom-dock > .client-tutorial-button:not(.client-professional-bottom){
    right:56px !important;
    bottom:5.7dvh !important;
    width:132px !important;
    height:44px !important;
    font-size:14px !important;
  }
}

@media (max-width:600px) and (orientation:portrait){
  html:has(#app .mockup[data-page="accueil"][data-client-fidelity="v10"]),
  body:has(#app .mockup[data-page="accueil"][data-client-fidelity="v10"]){
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    background:#ead8bd !important;
  }

  body[data-client-theme="night"]:has(#app .mockup[data-page="accueil"][data-client-fidelity="v10"]){
    background:#0d0d17 !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"]{
    width:100% !important;
    height:auto !important;
    min-height:max(1688px,200dvh) !important;
    overflow:hidden !important;
    background:#ead8bd !important;
  }

  body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]{
    background:#0d0d17 !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > img:first-child{
    inset:0 0 auto !important;
    width:100% !important;
    height:620px !important;
    min-height:620px !important;
    object-fit:cover !important;
    object-position:center top !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .page-logo-home-link{
    left:22px !important;
    top:14px !important;
    width:70px !important;
    height:70px !important;
  }

  body[data-client-theme-mode] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]
    .theme-mode-switch.pb-master-selector-ready{
    left:auto !important;
    right:16px !important;
    top:22px !important;
    width:155px !important;
    height:36px !important;
    min-height:36px !important;
    overflow:visible !important;
  }

  body[data-client-theme-mode] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]
    .theme-mode-switch.pb-master-selector-ready > button{
    height:44px !important;
    min-height:44px !important;
    transform:translateY(-4px) !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay{
    left:auto !important;
    right:24px !important;
    top:67px !important;
    width:142px !important;
    height:44px !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay .client-quick-action{
    width:100% !important;
    height:44px !important;
    font-size:10px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .install-home-button{
    left:auto !important;
    right:56px !important;
    top:117px !important;
    width:112px !important;
    height:44px !important;
    font-size:10px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser{
    left:24px !important;
    top:650px !important;
    width:calc(100vw - 48px) !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser h1{
    font-size:40px !important;
    line-height:1.08 !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser small{
    width:100% !important;
    margin-top:12px !important;
    font-size:18px !important;
    line-height:1.45 !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser small > :is(.client-home-wide-break,.client-home-phone-break){
    display:none !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .site-nav-overlay{
    left:24px !important;
    right:auto !important;
    top:1030px !important;
    bottom:auto !important;
    width:calc(100vw - 48px) !important;
    height:auto !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto repeat(6,44px) !important;
    grid-template-areas:"title" "menu" "trouver" "evenements" "contact" "apropos" "pro" !important;
    justify-items:start !important;
    gap:10px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-action-title{
    grid-area:title !important;
    display:block !important;
    margin:0 0 2px !important;
    color:#171018 !important;
    font-family:var(--pb-lot01-font-compact,"Barlow Condensed",Arial,sans-serif) !important;
    font-size:22px !important;
    font-weight:600 !important;
    line-height:1 !important;
    text-transform:uppercase !important;
  }

  body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-action-title{
    color:#fff !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button{
    justify-self:start !important;
    min-height:44px !important;
    padding:0 14px !important;
    font-size:13px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button:nth-child(3){width:194px !important}
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button:nth-child(6){width:258px !important}
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button:nth-child(4){width:218px !important}
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button:nth-child(5){width:185px !important}
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button:nth-child(2){width:198px !important}
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .client-home-professional{width:288px !important}

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer{
    left:24px !important;
    right:auto !important;
    top:1508px !important;
    bottom:auto !important;
    width:calc(100vw - 48px) !important;
    font-size:16px !important;
    line-height:1.35 !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer .client-home-social{
    margin:0 !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer nav{
    width:100% !important;
    margin-top:4px !important;
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
    gap:0 7px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer nav a{
    min-width:0 !important;
    min-height:44px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer nav a:first-child{
    display:none !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer nav a:nth-child(2)::before{
    content:none !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-bottom-dock > .client-tutorial-button:not(.client-professional-bottom){
    right:24px !important;
    top:1570px !important;
    bottom:auto !important;
    width:130px !important;
    height:44px !important;
    font-size:13px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .client-bastien-widget.open{
    position:fixed !important;
    left:auto !important;
    right:14px !important;
    top:auto !important;
    bottom:132px !important;
    z-index:72 !important;
    display:grid !important;
    width:min(360px,calc(100vw - 28px)) !important;
    max-width:calc(100vw - 28px) !important;
    pointer-events:none !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .client-bastien-widget.open .client-bastien-panel{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:100% !important;
    max-height:min(68dvh,620px) !important;
    overflow:auto !important;
    pointer-events:auto !important;
  }
}

/*
 * Téléphone canonique : la référence 780 × 1688 correspond à un viewport
 * CSS 390 × 844 à DPR 2. Le décor reste un actif séparé et tous les contrôles
 * demeurent des éléments HTML interactifs.
 */
@media (max-width:600px) and (orientation:portrait){
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"]{
    height:844px !important;
    min-height:844px !important;
    background-color:#ead8bd !important;
    background-image:none !important;
  }

  body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]{
    background-color:#0d0d17 !important;
    background-image:none !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > img:first-child{
    inset:0 !important;
    width:100% !important;
    height:844px !important;
    min-height:844px !important;
    object-fit:cover !important;
    object-position:center top !important;
    transform:translateY(-180px) !important;
  }

  body[data-client-theme-mode] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]
    .theme-mode-switch.pb-master-selector-ready{
    top:22px !important;
    height:28px !important;
    min-height:28px !important;
  }

  body[data-client-theme-mode] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]
    .theme-mode-switch.pb-master-selector-ready > button{
    height:34px !important;
    min-height:34px !important;
    transform:translateY(-3px) !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay{
    top:54px !important;
    height:31px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay .client-quick-action{
    height:31px !important;
    min-height:31px !important;
    font-size:9px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .install-home-button{
    top:88px !important;
    height:29px !important;
    min-height:29px !important;
    font-size:9px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser{
    left:24px !important;
    top:342px !important;
    width:300px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser h1{
    font-size:32px !important;
    line-height:1.04 !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser small{
    width:286px !important;
    margin-top:8px !important;
    font-size:15px !important;
    line-height:1.48 !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .site-nav-overlay{
    left:24px !important;
    top:568px !important;
    width:300px !important;
    grid-template-rows:18px repeat(6,28px) !important;
    gap:2px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-action-title{
    margin:0 !important;
    font-size:16px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button{
    min-height:28px !important;
    height:28px !important;
    padding:0 8px !important;
    font-size:9px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button:nth-child(3){width:97px !important}
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button:nth-child(6){width:129px !important}
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button:nth-child(4){width:109px !important}
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button:nth-child(5){width:93px !important}
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button:nth-child(2){width:99px !important}
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .client-home-professional{width:144px !important}

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer{
    left:24px !important;
    top:803px !important;
    width:260px !important;
    font-size:8px !important;
    line-height:1.32 !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer nav{
    margin-top:2px !important;
    gap:0 4px !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer nav a{
    min-height:0 !important;
  }

  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-bottom-dock > .client-tutorial-button:not(.client-professional-bottom){
    right:15px !important;
    top:805px !important;
    width:82px !important;
    height:28px !important;
    min-height:28px !important;
    font-size:8px !important;
  }
}

/* ===== SOURCE CONSOLIDÉE: private/site/assets/client-lot01-typography-c-v1.css ===== */
/*
 * Pizza Baladzo — Lot 01, planches 01 et 02.
 *
 * Feuille additive et réversible : elle doit être chargée après
 * client-experience-polish-v5.css. Elle ne modifie que l'accueil V9 et le menu.
 * Les contenus prudents déjà présents dans le DOM restent la source éditoriale.
 */

@font-face {
  font-family: "Kaushan Script";
  src: url("/client/assets/fonts/typography-c/kaushan-script-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/client/assets/fonts/typography-c/source-sans-3-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/client/assets/fonts/typography-c/source-sans-3-latin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/client/assets/fonts/typography-c/source-sans-3-latin-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("/client/assets/fonts/typography-c/barlow-condensed-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("/client/assets/fonts/typography-c/barlow-condensed-latin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --font-display: "Kaushan Script", cursive;
  --font-interface: "Source Sans 3", sans-serif;
  --font-compact: "Barlow Condensed", sans-serif;
  --pb-lot01-font-display: var(--font-display);
  --pb-lot01-font-interface: var(--font-interface);
  --pb-lot01-font-compact: var(--font-compact);
  --pb-lot01-ink: #2f1b35;
  --pb-lot01-muted: #745c78;
  --pb-lot01-magenta: #ec3d96;
  --pb-lot01-violet: #8a21dd;
  --pb-lot01-violet-dark: #3b0d63;
  --pb-lot01-pill-frame: #ffd3f3;
  --pb-lot01-pill-inner: rgba(255, 255, 255, .78);
}

.pb-typography-c-display {
  font-family: var(--pb-lot01-font-display) !important;
  font-weight: 400 !important;
}

.pb-typography-c-interface,
body[data-client-theme] #app .mockup[data-page="accueil"],
body[data-client-theme] #app .mockup[data-page="menu"] {
  font-family: var(--pb-lot01-font-interface) !important;
}

.pb-typography-c-compact,
body[data-client-theme] #app .mockup[data-page="menu"] .price {
  font-family: var(--pb-lot01-font-compact) !important;
}

/* Pilule 3D canonique, limitée aux deux planches de ce lot. */
:where(
  body[data-client-theme] #app .mockup[data-page="accueil"] .quick-actions-overlay > a,
  body[data-client-theme] #app .mockup[data-page="accueil"] .theme-mode-switch button,
  body[data-client-theme] #app .mockup[data-page="accueil"] .install-home-button,
  body[data-client-theme] #app .mockup[data-page="accueil"] .home-action-stack button,
  body[data-client-theme] #app .mockup[data-page="accueil"] .client-bottom-dock button,
  body[data-client-theme] #app .mockup[data-page="menu"] .quick-actions-overlay > a,
  body[data-client-theme] #app .mockup[data-page="menu"] .theme-mode-switch button,
  body[data-client-theme] #app .mockup[data-page="menu"] .client-card-actions button,
  body[data-client-theme] #app .mockup[data-page="menu"] .lot01-menu-votes-cta,
  body[data-client-theme] #app .mockup[data-page="menu"] .client-bottom-dock button,
  body[data-client-theme] #app .mockup[data-page="menu"] .client-footer-routes a
) {
  border: 2px solid var(--pb-lot01-pill-frame) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 43%, rgba(56, 4, 83, .24) 100%),
    linear-gradient(100deg, #9b20ed 0%, #dc27b1 50%, #f3458f 100%) !important;
  color: #fff !important;
  box-shadow:
    inset 0 0 0 1px var(--pb-lot01-pill-inner),
    inset 0 3px 4px rgba(255, 255, 255, .24),
    0 5px 0 rgba(58, 10, 91, .96),
    0 9px 16px rgba(23, 4, 32, .28) !important;
  font-family: var(--pb-lot01-font-compact) !important;
  font-weight: 600 !important;
  letter-spacing: .015em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-shadow: 0 1px 1px rgba(32, 3, 42, .7) !important;
}

:where(
  body[data-client-theme] #app .mockup[data-page="accueil"] .quick-actions-overlay > a,
  body[data-client-theme] #app .mockup[data-page="accueil"] .theme-mode-switch button,
  body[data-client-theme] #app .mockup[data-page="accueil"] .install-home-button,
  body[data-client-theme] #app .mockup[data-page="accueil"] .home-action-stack button,
  body[data-client-theme] #app .mockup[data-page="accueil"] .client-bottom-dock button,
  body[data-client-theme] #app .mockup[data-page="menu"] .quick-actions-overlay > a,
  body[data-client-theme] #app .mockup[data-page="menu"] .theme-mode-switch button,
  body[data-client-theme] #app .mockup[data-page="menu"] .client-card-actions button,
  body[data-client-theme] #app .mockup[data-page="menu"] .lot01-menu-votes-cta,
  body[data-client-theme] #app .mockup[data-page="menu"] .client-bottom-dock button,
  body[data-client-theme] #app .mockup[data-page="menu"] .client-footer-routes a
):focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 3px !important;
  box-shadow:
    0 0 0 6px #d84ff1,
    inset 0 0 0 1px var(--pb-lot01-pill-inner),
    0 5px 0 rgba(58, 10, 91, .96) !important;
}

/* -------------------------------------------------------------------------- */
/* Planche 01 — Accueil et installation.                                      */
/* -------------------------------------------------------------------------- */

body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser strong {
  font-family: var(--pb-lot01-font-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body[data-client-theme="day"] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser :where(strong, small, span) {
  color: #28112f !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .68) !important;
}

body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser :where(strong, small, span) {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .88) !important;
}

body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] :where(
  .site-nav-overlay .nav-button,
  .quick-actions-overlay > a,
  .theme-mode-switch button,
  .install-home-button,
  .home-action-stack button,
  .client-bottom-dock button
) {
  font-family: var(--pb-lot01-font-compact) !important;
  font-weight: 600 !important;
}

body[data-client-theme][data-pb-mode="preview"] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .install-home-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 4px 18px !important;
  border: 2px solid var(--pb-lot01-pill-frame) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 43%, rgba(56, 4, 83, .24) 100%),
    linear-gradient(100deg, #9b20ed 0%, #dc27b1 50%, #f3458f 100%) !important;
  color: #fff !important;
  box-shadow:
    inset 0 0 0 1px var(--pb-lot01-pill-inner),
    inset 0 3px 4px rgba(255, 255, 255, .24),
    0 5px 0 rgba(58, 10, 91, .96),
    0 9px 16px rgba(23, 4, 32, .28) !important;
}

body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .install-home-button img,
body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .install-home-button small {
  display: none !important;
}

body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .install-home-button span {
  font: 600 12px/1 var(--pb-lot01-font-compact) !important;
  text-align: center !important;
}

body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-action-stack button,
body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button,
body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-bottom-dock button {
  position: relative !important;
  overflow: visible !important;
}

body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-action-stack button::after,
body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button::after,
body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-professional-bottom::after {
  color: #28112f;
  font-family: var(--pb-lot01-font-interface);
  font-weight: 600;
  letter-spacing: 0;
  text-align: left;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .62);
  text-transform: none;
  white-space: nowrap;
}

body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] :where(
  .home-action-stack button::after,
  .site-nav-overlay .nav-button::after,
  .client-professional-bottom::after
) {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .88);
}

body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-action-stack button:first-child::after {
  content: "S, L ou XL, à ta façon";
}

body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-action-stack button:nth-child(2)::after {
  content: "Pizzas, desserts et boissons";
}

body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button:nth-child(2)::after {
  content: "Notre histoire et nos engagements";
}

body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button:nth-child(3)::after {
  content: "Toutes nos pizzas";
}

body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button:nth-child(4)::after {
  content: "Privé, entreprises et marchés";
}

body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button:nth-child(5)::after {
  content: "Une question ? Écris-nous";
}

body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button:nth-child(6)::after {
  content: "Emplacements et horaires";
}

body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-professional-bottom::after {
  content: "Rejoins l’aventure Baladzo";
}

/* Ordinateur : composition panoramique, navigation textuelle et actions basses. */
@media (min-width: 1025px) {
  body:has(#app .mockup[data-page="accueil"][data-client-fidelity="v9"]),
  body[data-client-theme] #app:has(.mockup[data-page="accueil"][data-client-fidelity="v9"]),
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] {
    width: 100% !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] {
    aspect-ratio: auto !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] > img:first-child {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .page-logo-home-link {
    top: 2.1% !important;
    left: 2.7% !important;
    width: clamp(105px, 10%, 146px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay {
    top: 7.1% !important;
    left: 27.2% !important;
    right: 23.3% !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: clamp(8px, 1vw, 18px) !important;
    min-height: 36px !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button {
    min-height: 34px !important;
    height: 34px !important;
    padding: 4px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #17101c !important;
    box-shadow: none !important;
    font-size: clamp(12px, 1vw, 16px) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .62) !important;
  }

  body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .88) !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button.active {
    color: #d827bf !important;
    box-shadow: inset 0 -3px 0 #d827bf !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button::after {
    content: none !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .quick-actions-overlay {
    top: 2.3% !important;
    right: 2.7% !important;
    width: 14.2% !important;
    height: 30px !important;
    gap: 12px !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .quick-actions-overlay > a {
    min-height: 28px !important;
    height: 28px !important;
    padding: 4px 10px !important;
    font-size: clamp(10px, .8vw, 12px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .quick-actions-overlay .pb-client-icon {
    display: none !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .theme-mode-switch {
    top: 7.3% !important;
    right: 1.5% !important;
    width: 21.7% !important;
    height: 38px !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .theme-mode-switch button {
    min-height: 38px !important;
    height: 38px !important;
    padding: 4px 12px !important;
    font-size: clamp(11px, .9vw, 14px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .theme-mode-switch button.active {
    font-size: clamp(17px, 1.45vw, 22px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .install-home-button {
    left: auto !important;
    top: 13.8% !important;
    right: 2.7% !important;
    width: 10.1% !important;
    max-width: 146px !important;
    min-height: 28px !important;
    height: 28px !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser {
    top: 50.6% !important;
    left: 5.7% !important;
    width: 31% !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser strong {
    font-size: clamp(27px, 2.15vw, 35px) !important;
    line-height: 1.08 !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser small {
    margin-top: 8px !important;
    font-family: var(--pb-lot01-font-interface) !important;
    font-size: clamp(14px, 1.18vw, 18px) !important;
    font-weight: 700 !important;
    line-height: 1.65 !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-action-stack {
    top: 70.5% !important;
    bottom: auto !important;
    left: 5.7% !important;
    width: 27.7% !important;
    height: 46px !important;
    grid-template-columns: 1.3fr 1fr !important;
    gap: 14px !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-action-stack button {
    min-height: 44px !important;
    height: 44px !important;
    padding: 7px 12px !important;
    font-size: clamp(11px, .95vw, 14px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-action-stack button::after {
    position: absolute;
    top: calc(100% + 7px);
    left: 50%;
    width: max-content;
    max-width: 180px;
    transform: translateX(-50%);
    font-size: clamp(10px, .78vw, 12px);
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-bottom-dock {
    right: 1.5% !important;
    left: auto !important;
    bottom: 2.1% !important;
    width: 31.7% !important;
    height: 34px !important;
    gap: 14px !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-bottom-dock .client-tutorial-button {
    min-height: 32px !important;
    height: 32px !important;
    padding: 5px 14px !important;
    font-size: clamp(9px, .72vw, 11px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-professional-bottom {
    flex: 0 0 43% !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-professional-bottom::after {
    position: absolute;
    top: 50%;
    left: calc(100% + 14px);
    transform: translateY(-50%);
    font-size: clamp(9px, .72vw, 11px);
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-bottom-dock .client-tutorial-button:last-child {
    flex: 0 0 27% !important;
    margin-left: auto !important;
    font-size: 0 !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-bottom-dock .client-tutorial-button:last-child::after {
    content: "BASTIEN IA";
    font-size: clamp(9px, .72vw, 11px);
  }
}

/* Tablette et téléphone : actions guidées en colonne, avec descriptions. */
@media (max-width: 1024px) {
  body:has(#app .mockup[data-page="accueil"][data-client-fidelity="v9"]),
  body[data-client-theme] #app:has(.mockup[data-page="accueil"][data-client-fidelity="v9"]),
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] {
    width: 100% !important;
    min-height: max(100dvh, 133.333vw) !important;
    height: max(100dvh, 133.333vw) !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] > img:first-child {
    inset: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    transform: none !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .page-logo-home-link {
    top: 1.5% !important;
    left: 2.7% !important;
    width: clamp(58px, 13%, 98px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .theme-mode-switch {
    top: 1.8% !important;
    right: 3.1% !important;
    width: 49% !important;
    height: 42px !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .theme-mode-switch button {
    min-height: 42px !important;
    height: 42px !important;
    font-size: clamp(12px, 2vw, 16px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .theme-mode-switch button.active {
    font-size: clamp(17px, 3vw, 23px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .quick-actions-overlay {
    top: 7.3% !important;
    right: 5.2% !important;
    left: auto !important;
    width: 36% !important;
    height: 31px !important;
    gap: 14px !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .quick-actions-overlay > a {
    min-height: 29px !important;
    height: 29px !important;
    padding: 4px 9px !important;
    font-size: clamp(10px, 1.8vw, 13px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .quick-actions-overlay .pb-client-icon {
    display: none !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .install-home-button {
    left: auto !important;
    top: 11.2% !important;
    right: 5.2% !important;
    width: 20% !important;
    max-width: none !important;
    min-height: 29px !important;
    height: 29px !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser,
  body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser {
    top: 46.1% !important;
    left: 3.2% !important;
    right: 3.2% !important;
    width: auto !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser strong {
    font-size: clamp(27px, 4.15vw, 34px) !important;
    line-height: 1.08 !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-fidelity-mobile-break {
    display: none !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser small {
    margin-top: 7px !important;
    font-family: var(--pb-lot01-font-interface) !important;
    font-size: clamp(14px, 2.15vw, 18px) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-action-stack::before {
    content: "CHOISIS TON ACTION";
    position: absolute;
    left: 0;
    bottom: calc(100% + 7px);
    color: #2d1236;
    font: 700 clamp(13px, 2vw, 16px)/1 var(--pb-lot01-font-interface);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .72);
  }

  body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-action-stack::before {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-action-stack {
    top: 61.4% !important;
    left: 4% !important;
    right: 4% !important;
    bottom: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: auto !important;
    height: auto !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-action-stack button {
    width: 34% !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 5px 11px !important;
    font-size: clamp(11px, 1.8vw, 14px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-action-stack button::after,
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button::after,
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-professional-bottom::after {
    position: absolute;
    top: 50%;
    left: calc(100% + 24px);
    width: max-content;
    max-width: 58vw;
    transform: translateY(-50%);
    font-size: clamp(11px, 1.75vw, 14px);
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay {
    top: 70.2% !important;
    left: 4% !important;
    right: 4% !important;
    bottom: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button {
    width: 34% !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 5px 11px !important;
    border: 2px solid var(--pb-lot01-pill-frame) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 43%, rgba(56, 4, 83, .24) 100%),
      linear-gradient(100deg, #9b20ed 0%, #dc27b1 50%, #f3458f 100%) !important;
    color: #fff !important;
    box-shadow:
      inset 0 0 0 1px var(--pb-lot01-pill-inner),
      0 4px 0 rgba(58, 10, 91, .96),
      0 8px 14px rgba(23, 4, 32, .24) !important;
    font-size: clamp(11px, 1.8vw, 14px) !important;
    text-shadow: 0 1px 1px rgba(32, 3, 42, .7) !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button:nth-child(1) {
    display: none !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button:nth-child(2) { order: 5; }
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button:nth-child(3) { order: 1; }
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button:nth-child(4) { order: 3; }
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button:nth-child(5) { order: 4; }
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button:nth-child(6) { order: 2; }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-bottom-dock {
    top: 94.2% !important;
    bottom: auto !important;
    left: 4% !important;
    right: 4% !important;
    width: auto !important;
    height: 34px !important;
    display: block !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-bottom-dock .client-tutorial-button {
    min-height: 34px !important;
    height: 34px !important;
    padding: 5px 11px !important;
    font-size: clamp(11px, 1.8vw, 14px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-professional-bottom {
    position: absolute !important;
    left: 0 !important;
    width: 34% !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-bottom-dock .client-tutorial-button:last-child {
    position: absolute !important;
    right: 0 !important;
    width: 20% !important;
    font-size: 0 !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-bottom-dock .client-tutorial-button:last-child::after {
    content: "BASTIEN IA";
    font-size: clamp(11px, 1.8vw, 14px);
  }
}

@media (max-width: 600px) {
  body:has(#app .mockup[data-page="accueil"][data-client-fidelity="v9"]),
  body[data-client-theme] #app:has(.mockup[data-page="accueil"][data-client-fidelity="v9"]),
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] {
    min-height: max(100dvh, 216vw) !important;
    height: max(100dvh, 216vw) !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .page-logo-home-link {
    top: 1.5% !important;
    left: 3.7% !important;
    width: 14.5% !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .theme-mode-switch {
    top: 1.8% !important;
    right: 3.7% !important;
    width: 52% !important;
    height: 34px !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .theme-mode-switch button {
    min-height: 34px !important;
    height: 34px !important;
    font-size: 11px !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .theme-mode-switch button.active {
    font-size: 16px !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .quick-actions-overlay {
    top: 6% !important;
    right: 5.3% !important;
    width: 38% !important;
    height: 25px !important;
    gap: 9px !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .quick-actions-overlay > a,
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .install-home-button {
    min-height: 24px !important;
    height: 24px !important;
    font-size: 9px !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .install-home-button {
    left: auto !important;
    top: 9.4% !important;
    right: 5.3% !important;
    width: 22% !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .install-home-button span {
    font-size: 9px !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser,
  body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser {
    top: 47.8% !important;
    left: 4.5% !important;
    right: 3.5% !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser strong {
    max-width: 82% !important;
    font-size: clamp(24px, 6.1vw, 30px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-fidelity-mobile-break {
    display: inline !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser small {
    font-size: clamp(11px, 3vw, 14px) !important;
    line-height: 1.22 !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-action-stack {
    top: 64.1% !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-action-stack button,
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button,
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-bottom-dock .client-tutorial-button {
    min-height: 28px !important;
    height: 28px !important;
    padding: 4px 8px !important;
    font-size: clamp(9px, 2.6vw, 11px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-action-stack button,
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button,
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-professional-bottom {
    width: 42% !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-action-stack button::after,
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button::after,
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-professional-bottom::after {
    left: calc(100% + 13px);
    max-width: 48vw;
    font-size: clamp(9px, 2.45vw, 11px);
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay {
    top: 70.2% !important;
    gap: 8px !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-bottom-dock {
    top: 95.3% !important;
    height: 28px !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-bottom-dock .client-tutorial-button:last-child {
    width: 25% !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-bottom-dock .client-tutorial-button:last-child::after {
    font-size: 9px;
  }
}

/* -------------------------------------------------------------------------- */
/* Planche 02 — Menu avec photos.                                              */
/* -------------------------------------------------------------------------- */

body[data-client-theme] #app .mockup[data-page="menu"] {
  min-height: max(100dvh, 65.22vw) !important;
  height: auto !important;
  overflow: hidden !important;
  background: #fffaf6 !important;
}

body[data-client-theme="day"] #app .mockup[data-page="menu"] {
  color-scheme: light;
}

body[data-client-theme="night"] #app .mockup[data-page="menu"] {
  color-scheme: dark;
  background: #09040e !important;
}

body[data-client-theme] #app .mockup[data-page="menu"] > img:first-child {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: .16 !important;
  filter: saturate(.9) brightness(1.1) !important;
}

body[data-client-theme="night"] #app .mockup[data-page="menu"] > img:first-child {
  opacity: .24 !important;
  filter: saturate(1.05) brightness(.5) !important;
}

body[data-client-theme] #app .mockup[data-page="menu"] .client-route-back {
  display: none !important;
}

body[data-client-theme] #app .mockup[data-page="menu"] .client-page-content {
  top: 12.7% !important;
  left: 2.4% !important;
  right: 2.4% !important;
  bottom: auto !important;
  min-height: 83.8% !important;
  padding: clamp(18px, 1.8vw, 28px) !important;
  border: 1px solid #dfb2df !important;
  border-radius: 36px !important;
  background: rgba(255, 252, 248, .95) !important;
  color: var(--pb-lot01-ink) !important;
  box-shadow: 0 16px 44px rgba(78, 37, 73, .1) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body[data-client-theme="night"] #app .mockup[data-page="menu"] .client-page-content {
  border-color: rgba(223, 92, 218, .58) !important;
  background: rgba(12, 6, 17, .96) !important;
  color: #fff !important;
  box-shadow: 0 20px 54px rgba(0, 0, 0, .34) !important;
}

body[data-client-theme] #app .mockup[data-page="menu"] .client-page-content::before {
  content: "TU CHOISIS. TU VOTES. ON CUISINE.";
  display: block;
  margin: 0 0 1px;
  color: #d83f91;
  font: 700 clamp(11px, .92vw, 14px)/1.1 var(--pb-lot01-font-interface);
  letter-spacing: .02em;
}

body[data-client-theme] #app .mockup[data-page="menu"] .client-page-content h1 {
  margin: 0 !important;
  min-height: clamp(48px, 5vw, 68px);
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

body[data-client-theme] #app .mockup[data-page="menu"] .client-page-content h1::after {
  content: "Notre menu";
  display: block;
  color: #311536;
  font: 400 clamp(42px, 5vw, 70px)/.94 var(--pb-lot01-font-display);
  text-transform: none;
}

body[data-client-theme="night"] #app .mockup[data-page="menu"] .client-page-content h1::after {
  color: #fff;
}

body[data-client-theme] #app .mockup[data-page="menu"] .client-page-content > p {
  max-width: 72% !important;
  margin: 0 0 clamp(16px, 1.8vw, 24px) !important;
  color: transparent !important;
  font-size: 0 !important;
  text-shadow: none !important;
}

body[data-client-theme] #app .mockup[data-page="menu"] .client-page-content > p::after {
  content: "Chaque catégorie et chaque produit sont associés à leur propre photo sur tout le site.";
  display: block;
  color: var(--pb-lot01-muted);
  font: 400 clamp(13px, 1.05vw, 16px)/1.35 var(--pb-lot01-font-interface);
}

body[data-client-theme="night"] #app .mockup[data-page="menu"] .client-page-content > p::after {
  color: #e8dce8;
}

/* Les trois blocs éditoriaux existants restent dans le DOM, mais la planche
 * Menu les réserve aux pages détaillées afin de garder les six cartes lisibles. */
body[data-client-theme] #app .mockup[data-page="menu"] .client-page-content > .client-editorial-block {
  display: none !important;
}

body[data-client-theme] #app .mockup[data-page="menu"] .client-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.15vw, 18px) !important;
  counter-reset: pb-lot01-menu-card;
}

body[data-client-theme] #app .mockup[data-page="menu"] .client-card {
  position: relative !important;
  display: grid !important;
  grid-template-areas:
    "heading"
    "image"
    "copy"
    "action" !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  min-width: 0 !important;
  min-height: clamp(244px, 27.5vh, 286px) !important;
  padding: 12px !important;
  overflow: hidden !important;
  border: 2px solid #df78e9 !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .95) !important;
  color: var(--pb-lot01-ink) !important;
  box-shadow: none !important;
  counter-increment: pb-lot01-menu-card;
}

body[data-client-theme="night"] #app .mockup[data-page="menu"] .client-card {
  border-color: rgba(229, 88, 220, .7) !important;
  background: rgba(19, 9, 26, .96) !important;
  color: #fff !important;
}

body[data-client-theme] #app .mockup[data-page="menu"] .client-card::after {
  content: counter(pb-lot01-menu-card, decimal-leading-zero);
  position: absolute;
  z-index: 3;
  top: 9px;
  right: 12px;
  color: rgba(126, 47, 171, .28);
  font: 600 clamp(24px, 2.1vw, 34px)/1 var(--pb-lot01-font-compact);
  pointer-events: none;
}

body[data-client-theme="night"] #app .mockup[data-page="menu"] .client-card::after {
  color: rgba(226, 109, 222, .46);
}

body[data-client-theme] #app .mockup[data-page="menu"] .client-card-body {
  display: contents !important;
}

body[data-client-theme] #app .mockup[data-page="menu"] .client-card strong {
  grid-area: heading;
  z-index: 2;
  display: block !important;
  min-height: 42px;
  margin: 0 42px 7px 0 !important;
  padding: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-transform: none !important;
}

body[data-client-theme] #app .mockup[data-page="menu"] .client-card strong::before {
  display: block;
  color: var(--pb-lot01-ink);
  font: 700 clamp(15px, 1.35vw, 20px)/1.05 var(--pb-lot01-font-interface);
}

body[data-client-theme="night"] #app .mockup[data-page="menu"] .client-card strong::before {
  color: #fff;
}

body[data-client-theme] #app .mockup[data-page="menu"] .client-card strong::after {
  display: block;
  margin-top: 3px;
  color: #624e66;
  font: 600 clamp(9px, .72vw, 11px)/1 var(--pb-lot01-font-interface);
}

body[data-client-theme="night"] #app .mockup[data-page="menu"] .client-card strong::after {
  color: #d9c9dc;
}

body[data-client-theme] #app .mockup[data-page="menu"] .category-card-classiques strong::before { content: "Les valeurs sûres qui croustillent*"; }
body[data-client-theme] #app .mockup[data-page="menu"] .category-card-classiques strong::after { content: "* Pizzas classiques"; }
body[data-client-theme] #app .mockup[data-page="menu"] .category-card-personnalisables strong::before { content: "C’est toi le chef*"; }
body[data-client-theme] #app .mockup[data-page="menu"] .category-card-personnalisables strong::after { content: "* Pizzas personnalisables"; }
body[data-client-theme] #app .mockup[data-page="menu"] .category-card-desserts strong::before { content: "Les douceurs sucrées*"; }
body[data-client-theme] #app .mockup[data-page="menu"] .category-card-desserts strong::after { content: "* Desserts"; }
body[data-client-theme] #app .mockup[data-page="menu"] .category-card-boissons strong::before { content: "De quoi faire glouglou*"; }
body[data-client-theme] #app .mockup[data-page="menu"] .category-card-boissons strong::after { content: "* Boissons"; }
body[data-client-theme] #app .mockup[data-page="menu"] .category-card-formules strong::before { content: "Ta faim, notre mission*"; }
body[data-client-theme] #app .mockup[data-page="menu"] .category-card-formules strong::after { content: "* Formules"; }
body[data-client-theme] #app .mockup[data-page="menu"] .category-card-votes strong::before { content: "Les papilles au pouvoir*"; }
body[data-client-theme] #app .mockup[data-page="menu"] .category-card-votes strong::after { content: "* Votes de la semaine"; }

body[data-client-theme] #app .mockup[data-page="menu"] .category-image-button {
  grid-area: image;
  align-self: stretch;
  display: block !important;
  width: calc(100% - 32px) !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 2 / 1 !important;
  margin: 0 auto 8px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 2px solid #5e176f !important;
  border-radius: 8px !important;
  background: #100516 !important;
  box-shadow: none !important;
}

body[data-client-theme] #app .mockup[data-page="menu"] .category-image-button img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: #100516 !important;
  box-shadow: none !important;
}

body[data-client-theme] #app .mockup[data-page="menu"] .client-card small {
  grid-area: copy;
  display: -webkit-box !important;
  min-height: 2.6em;
  margin: 0 0 7px !important;
  overflow: hidden;
  color: #3d2b42 !important;
  font: 600 clamp(10px, .8vw, 12px)/1.28 var(--pb-lot01-font-interface) !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-client-theme="night"] #app .mockup[data-page="menu"] .client-card small {
  color: #eee5ef !important;
}

body[data-client-theme] #app .mockup[data-page="menu"] .client-card-actions {
  grid-area: action;
  align-self: end;
  justify-self: end;
  display: flex !important;
  margin: 0 !important;
}

body[data-client-theme] #app .mockup[data-page="menu"] .client-card-actions button {
  min-width: clamp(126px, 10.5vw, 164px) !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 5px 15px !important;
  font-size: clamp(10px, .75vw, 12px) !important;
  white-space: nowrap !important;
}

body[data-client-theme] #app .mockup[data-page="menu"] .client-page-content::after {
  content: "Sur chaque fiche :   Disponible   ·   Épuisé   ·   Information indisponible";
  display: block;
  margin: 12px auto 0;
  color: #654e6a;
  font: 600 clamp(10px, .8vw, 12px)/1.2 var(--pb-lot01-font-interface);
  text-align: center;
}

body[data-client-theme="night"] #app .mockup[data-page="menu"] .client-page-content::after {
  color: #ddd0df;
}

body[data-client-theme] #app .mockup[data-page="menu"] .client-bottom-dock {
  right: 1.8% !important;
  bottom: 1.8% !important;
  width: 12% !important;
  height: 34px !important;
}

body[data-client-theme] #app .mockup[data-page="menu"] .client-bottom-dock .client-professional-bottom {
  display: none !important;
}

body[data-client-theme] #app .mockup[data-page="menu"] .client-bottom-dock .client-tutorial-button:last-child {
  width: 100% !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 5px 12px !important;
  font-size: 0 !important;
}

body[data-client-theme] #app .mockup[data-page="menu"] .client-bottom-dock .client-tutorial-button:last-child::after {
  content: "BASTIEN IA";
  font-size: clamp(9px, .72vw, 11px);
}

@media (min-width: 1025px) {
  body[data-client-theme] #app .mockup[data-page="menu"] .page-logo-home-link {
    top: 1.6% !important;
    left: 2.2% !important;
    width: clamp(72px, 7%, 104px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .site-nav-overlay {
    top: 3.8% !important;
    left: 12.5% !important;
    right: 36.5% !important;
    min-height: 40px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .site-nav-overlay .nav-button {
    min-height: 34px !important;
    height: 34px !important;
    padding: 4px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #30203a !important;
    box-shadow: none !important;
    font-family: var(--pb-lot01-font-interface) !important;
    font-size: clamp(11px, .95vw, 14px) !important;
    font-weight: 700 !important;
    text-shadow: none !important;
  }

  body[data-client-theme="night"] #app .mockup[data-page="menu"] .site-nav-overlay .nav-button {
    color: #fff !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .site-nav-overlay .nav-button.active {
    color: #ce38ca !important;
    box-shadow: inset 0 -3px 0 #ce38ca !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .quick-actions-overlay {
    top: 2.1% !important;
    right: 1.8% !important;
    width: 14% !important;
    height: 32px !important;
    gap: 12px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .quick-actions-overlay > a {
    min-height: 30px !important;
    height: 30px !important;
    padding: 4px 9px !important;
    font-size: clamp(9px, .72vw, 11px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .quick-actions-overlay .pb-client-icon {
    display: none !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .theme-mode-switch {
    top: 7.4% !important;
    right: 3.2% !important;
    width: 18.2% !important;
    height: 34px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .theme-mode-switch button {
    min-height: 34px !important;
    height: 34px !important;
    padding: 4px 9px !important;
    font-size: clamp(10px, .78vw, 12px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .theme-mode-switch button.active {
    font-size: clamp(15px, 1.22vw, 19px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .site-legal-footer {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  body[data-client-theme] #app .mockup[data-page="menu"] {
    min-height: max(100dvh, 133.333vw) !important;
    padding-bottom: 112px !important;
    overflow: visible !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .page-logo-home-link {
    top: 1% !important;
    left: 2.7% !important;
    width: clamp(66px, 12%, 92px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .quick-actions-overlay {
    top: .8% !important;
    right: 4.5% !important;
    left: auto !important;
    width: 25% !important;
    height: 28px !important;
    gap: 10px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .quick-actions-overlay > a {
    min-height: 26px !important;
    height: 26px !important;
    padding: 3px 8px !important;
    font-size: 10px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .quick-actions-overlay .pb-client-icon {
    display: none !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .theme-mode-switch {
    top: 4.8% !important;
    right: 3.3% !important;
    width: 43% !important;
    height: 38px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .theme-mode-switch button {
    min-height: 38px !important;
    height: 38px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .theme-mode-switch button.active {
    font-size: 17px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .site-nav-overlay {
    display: none !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-page-content {
    top: 10.2% !important;
    left: 2.8% !important;
    right: 2.8% !important;
    min-height: 78% !important;
    padding: 14px 16px 16px !important;
    border-radius: 28px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-page-content h1 {
    min-height: 46px;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-page-content h1::after {
    font-size: clamp(42px, 7.5vw, 58px);
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-page-content > p {
    max-width: 76% !important;
    margin-bottom: 10px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-card {
    min-height: clamp(185px, 21.5vw, 220px) !important;
    padding: 9px !important;
    border-radius: 18px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-card strong {
    min-height: 34px;
    margin-right: 32px !important;
    margin-bottom: 4px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-card strong::before {
    font-size: clamp(12px, 2vw, 16px);
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-card strong::after {
    font-size: clamp(8px, 1.25vw, 10px);
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-card::after {
    top: 7px;
    right: 9px;
    font-size: clamp(21px, 3.6vw, 28px);
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .category-image-button {
    width: calc(100% - 34px) !important;
    margin-bottom: 5px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-card small {
    min-height: 2.4em;
    margin-bottom: 5px !important;
    font-size: clamp(9px, 1.45vw, 11px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-card-actions button {
    min-width: clamp(104px, 16vw, 132px) !important;
    min-height: 29px !important;
    height: 29px !important;
    padding: 4px 10px !important;
    font-size: clamp(8px, 1.3vw, 10px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-page-content::after {
    margin-top: 8px;
    font-size: clamp(8px, 1.25vw, 10px);
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-bottom-dock {
    position: absolute !important;
    right: 2.8% !important;
    bottom: 9.2% !important;
    width: 20% !important;
    height: 30px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .site-legal-footer {
    position: absolute !important;
    z-index: 20 !important;
    left: 2.8% !important;
    right: 2.8% !important;
    bottom: 1.2% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-footer-routes {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
    font-size: 0 !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-footer-routes a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 5px 8px !important;
    font-size: clamp(9px, 1.35vw, 11px) !important;
    text-align: center !important;
    text-transform: uppercase !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-footer-routes a:nth-of-type(4),
  body[data-client-theme] #app .mockup[data-page="menu"] .client-footer-routes a:nth-of-type(8),
  body[data-client-theme] #app .mockup[data-page="menu"] .client-footer-routes a:nth-of-type(9),
  body[data-client-theme] #app .mockup[data-page="menu"] .site-legal-footer > small {
    display: none !important;
  }
}

@media (max-width: 600px) {
  body[data-client-theme] #app .mockup[data-page="menu"] {
    min-height: max(100dvh, 216vw) !important;
    padding-bottom: 104px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .page-logo-home-link {
    top: .9% !important;
    left: 3.8% !important;
    width: 15% !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .quick-actions-overlay {
    top: .8% !important;
    right: 4.4% !important;
    width: 28% !important;
    gap: 7px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .quick-actions-overlay > a {
    min-height: 22px !important;
    height: 22px !important;
    padding: 3px 6px !important;
    font-size: 8px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .theme-mode-switch {
    top: 4.5% !important;
    right: 3.6% !important;
    width: 50% !important;
    height: 31px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .theme-mode-switch button {
    min-height: 31px !important;
    height: 31px !important;
    padding: 3px 5px !important;
    font-size: 9px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .theme-mode-switch button.active {
    font-size: 14px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-page-content {
    top: 8.7% !important;
    left: 2.8% !important;
    right: 2.8% !important;
    min-height: 80.5% !important;
    padding: 12px 10px 14px !important;
    border-radius: 22px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-page-content::before {
    font-size: clamp(8px, 2.1vw, 10px);
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-page-content h1 {
    min-height: 38px;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-page-content h1::after {
    font-size: clamp(36px, 10.5vw, 48px);
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-page-content > p {
    max-width: 100% !important;
    margin-bottom: 8px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-page-content > p::after {
    font-size: clamp(9px, 2.45vw, 11px);
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-grid {
    gap: 8px 7px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-card {
    min-height: clamp(172px, 41vw, 205px) !important;
    padding: 7px !important;
    border-radius: 15px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-card strong {
    min-height: 31px;
    margin-right: 24px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-card strong::before {
    font-size: clamp(10px, 2.9vw, 13px);
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-card strong::after {
    font-size: clamp(7px, 1.8vw, 9px);
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-card::after {
    top: 6px;
    right: 7px;
    font-size: clamp(18px, 5.1vw, 24px);
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .category-image-button {
    width: calc(100% - 24px) !important;
    border-width: 1px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-card small {
    min-height: 2.25em;
    font-size: clamp(7.5px, 2vw, 9px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-card-actions button {
    min-width: 86px !important;
    min-height: 25px !important;
    height: 25px !important;
    padding: 3px 7px !important;
    font-size: clamp(7px, 1.85vw, 8.5px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-page-content::after {
    font-size: clamp(7px, 1.8vw, 9px);
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-bottom-dock {
    right: 3.3% !important;
    bottom: 10.2% !important;
    width: 26% !important;
    height: 27px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-bottom-dock .client-tutorial-button:last-child {
    min-height: 27px !important;
    height: 27px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-bottom-dock .client-tutorial-button:last-child::after {
    font-size: 8px;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .site-legal-footer {
    bottom: 1.1% !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-footer-routes {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px 8px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-footer-routes a {
    min-height: 27px !important;
    padding: 4px 6px !important;
    font-size: clamp(8px, 2.1vw, 9px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-client-theme] #app .mockup[data-page="accueil"] *,
  body[data-client-theme] #app .mockup[data-page="menu"] * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ========================================================================== */
/* Planches 03–07 — finitions fidèles après comparaison avec les 60 vues     */
/* ========================================================================== */

body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] {
  padding-top: 208px !important;
  scrollbar-width: none !important;
}

body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"]::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

body[data-client-theme]:has(.modal-backdrop[data-product-sheet="lot01"]) #app .mockup > img:first-child {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: .12 !important;
}

body[data-client-theme]:has(.modal-backdrop[data-product-sheet="lot01"]) #app .mockup .page-logo-home-link {
  top: 12px !important;
  left: 24px !important;
  width: 92px !important;
}

body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-heading {
  min-height: 110px !important;
}

body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-layout {
  grid-template-columns: minmax(0, 1.04fr) minmax(420px, 1fr) !important;
  gap: 32px !important;
  align-items: start !important;
}

body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] :is(.lot01-product-media, .lot01-product-media img) {
  height: 503px !important;
  min-height: 503px !important;
}

body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-facts {
  min-height: 503px !important;
}

body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-actions button {
  border: 1px solid rgba(255, 255, 255, .72) !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(105deg, #7916dc 0%, #c719e5 48%, #f13b91 100%) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -4px 0 rgba(58, 8, 86, .48), 0 6px 8px rgba(47, 13, 62, .28) !important;
  -webkit-text-fill-color: #fff !important;
}

body[data-client-theme] #app .mockup[data-page="menu"] .lot01-menu-votes-cta {
  position: absolute !important;
  z-index: 6 !important;
  top: 28px !important;
  right: 28px !important;
  min-width: 190px !important;
  min-height: 38px !important;
  padding: 7px 18px !important;
  border: 1px solid rgba(255, 255, 255, .7) !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(110deg, #741bda 0%, #c623e2 47%, #f34398 100%) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .48), inset 0 -5px 0 rgba(61, 10, 89, .45), 0 7px 10px rgba(47, 13, 65, .26) !important;
  font: 600 13px/1 var(--pb-lot01-font-compact) !important;
  text-transform: uppercase !important;
}

body[data-client-theme] #app .mockup[data-page="menu"] .client-bottom-dock {
  position: absolute !important;
}

body[data-client-theme] #app .mockup[data-page="personnalisables"] {
  min-height: max(100dvh, 970px) !important;
}

body[data-client-theme] #app .mockup[data-page="personnalisables"] .page-logo-home-link {
  top: 12px !important;
  left: 24px !important;
  width: 92px !important;
}

body[data-client-theme] #app .mockup[data-page="personnalisables"] > .client-route-back {
  display: none !important;
}

body[data-client-theme] #app .mockup[data-page="personnalisables"] :is(
  .lot01-return-menu,
  .lot01-composition-steps li,
  .lot01-segmented-control button,
  .client-base-choice,
  .lot01-ingredient-card button,
  .lot01-open-ingredients,
  .lot01-menu-button,
  .lot01-validate-composition,
  .lot01-carousel-arrow,
  .lot01-composition-mobile-nav button
) {
  border: 1px solid rgba(255, 255, 255, .72) !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(105deg, #7916dc 0%, #c719e5 48%, #f13b91 100%) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -4px 0 rgba(58, 8, 86, .48), 0 6px 8px rgba(47, 13, 62, .28) !important;
  -webkit-text-fill-color: #fff !important;
}

body[data-client-theme] #app .mockup[data-page="personnalisables"] :is(
  .lot01-segmented-control button.active,
  .client-base-choice.active,
  .lot01-ingredient-card button.active
) {
  filter: saturate(1.1) brightness(1.06) !important;
  outline: 3px solid rgba(232, 60, 163, .2) !important;
  outline-offset: 2px !important;
}

body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-page {
  top: 14.6% !important;
  left: 1.7% !important;
  right: 1.7% !important;
  padding: 14px 22px 20px !important;
}

body[data-client-theme] .lot01-composition-heading {
  grid-template-columns: 132px minmax(0, 1fr) !important;
  gap: 16px !important;
}

body[data-client-theme] .lot01-return-menu {
  width: 126px !important;
  min-height: 34px !important;
  margin-top: 2px !important;
  font-size: 12px !important;
}

body[data-client-theme] .lot01-composition-heading h1 {
  font-size: clamp(42px, 4vw, 58px) !important;
}

body[data-client-theme] .lot01-global-quantity-alert {
  margin: 8px 0 12px !important;
  padding: 9px 14px !important;
  border-radius: 14px !important;
  font-size: 16px !important;
}

body[data-client-theme] .lot01-composition-steps {
  gap: 10px !important;
  max-width: 720px !important;
  margin-bottom: 14px !important;
}

body[data-client-theme] .lot01-composition-steps li {
  min-height: 34px !important;
  padding: 5px 12px !important;
  font-size: 15px !important;
}

body[data-client-theme] .lot01-composition-layout {
  grid-template-columns: minmax(0, 1fr) 342px !important;
  gap: 18px !important;
}

body[data-client-theme] .lot01-composition-section {
  margin-bottom: 13px !important;
}

body[data-client-theme] .lot01-composition-section h2 {
  margin-bottom: 7px !important;
  font-size: 19px !important;
}

body[data-client-theme] .lot01-base-grid {
  gap: 10px !important;
}

body[data-client-theme] .lot01-base-card {
  grid-template-columns: 92px minmax(0, 1fr) !important;
  gap: 8px !important;
  min-height: 70px !important;
  padding: 5px !important;
  border-radius: 12px !important;
}

body[data-client-theme] .lot01-base-card > img {
  width: 92px !important;
  height: 62px !important;
  border-radius: 9px !important;
}

body[data-client-theme] .lot01-base-card-copy {
  gap: 2px !important;
}

body[data-client-theme] .lot01-base-card-copy strong {
  font-size: 16px !important;
}

body[data-client-theme] .lot01-base-card-copy small {
  font-size: 9px !important;
}

body[data-client-theme] .lot01-base-card .client-base-choice {
  min-height: 25px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
}

body[data-client-theme] .lot01-global-quantity {
  grid-template-columns: minmax(0, 1fr) 180px !important;
  padding: 9px 14px !important;
  border-radius: 14px !important;
}

body[data-client-theme] .lot01-global-quantity .lot01-segmented-control button {
  min-height: 28px !important;
  padding: 3px 8px !important;
}

body[data-client-theme] .lot01-ingredient-intro {
  grid-template-columns: 230px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 8px !important;
  border-radius: 14px !important;
}

body[data-client-theme] .lot01-ingredient-collage {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100% !important;
  height: 76px !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: #140819 !important;
}

body[data-client-theme] .lot01-ingredient-collage img {
  width: 100% !important;
  height: 76px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

body[data-client-theme] .lot01-open-ingredients {
  width: min(360px, 100%) !important;
  min-height: 30px !important;
  margin: 5px auto 0 !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
}

body[data-client-theme] .lot01-carousel-help {
  margin: 0 !important;
  padding: 3px 12px 5px !important;
  color: #35203c !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

body[data-client-theme] .lot01-carousel-frame {
  position: relative !important;
  padding: 0 34px !important;
  border: 2px solid rgba(188, 72, 185, .42) !important;
  border-radius: 18px !important;
  background: rgba(252, 247, 255, .86) !important;
}

body[data-client-theme] .lot01-ingredient-carousel {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: calc((100% - 30px) / 4) !important;
  grid-template-columns: none !important;
  gap: 10px !important;
  max-height: none !important;
  padding: 8px 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
}

body[data-client-theme] .lot01-ingredient-carousel::-webkit-scrollbar {
  display: none !important;
}

body[data-client-theme] .lot01-ingredient-card {
  grid-template-columns: 76px minmax(0, 1fr) !important;
  min-width: 0 !important;
  min-height: 132px !important;
  scroll-snap-align: start !important;
}

body[data-client-theme] .lot01-ingredient-card > img {
  width: 76px !important;
  height: 116px !important;
}

body[data-client-theme] .lot01-carousel-arrow {
  position: absolute !important;
  z-index: 4 !important;
  top: 50% !important;
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  transform: translateY(-50%) !important;
  border-radius: 999px !important;
  font-size: 26px !important;
  line-height: 1 !important;
}

body[data-client-theme] .lot01-carousel-arrow.previous { left: 2px !important; }
body[data-client-theme] .lot01-carousel-arrow.next { right: 2px !important; }

body[data-client-theme] .lot01-composition-summary {
  gap: 10px !important;
  padding: 16px !important;
  border-radius: 24px !important;
}

body[data-client-theme] .lot01-composition-summary > h2 {
  font-size: 30px !important;
}

body[data-client-theme] .lot01-composition-summary dl > div {
  padding: 7px 0 !important;
}

body[data-client-theme] .lot01-total-preview {
  padding: 12px !important;
}

body[data-client-theme] .lot01-menu-choice {
  padding: 11px !important;
}

body[data-client-theme="night"] :is(.lot01-cross-contamination, .lot01-allergen-consent) {
  border-color: #a66d26 !important;
  color: #f7deb2 !important;
  background: #402813 !important;
}

body[data-client-theme="night"] :is(.lot01-cross-contamination strong, .lot01-allergen-consent > span, .lot01-allergen-consent strong, .lot01-allergen-consent small) {
  color: #ffe5b2 !important;
}

body[data-client-theme] .lot01-carousel-footnote {
  margin: 6px 0 0 !important;
  color: #8a768f !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

body[data-client-theme] .lot01-composition-mobile-nav {
  display: none !important;
}

body[data-client-theme] #app .mockup[data-page="personnalisables"] .client-bottom-dock {
  position: absolute !important;
  z-index: 40 !important;
  right: 1.7% !important;
  bottom: 1.2% !important;
  width: 150px !important;
}

body[data-client-theme] #app .mockup[data-page="personnalisables"] .client-bottom-dock .client-professional-bottom {
  display: none !important;
}

body[data-client-theme] #app .mockup[data-page="personnalisables"] .client-bottom-dock .client-tutorial-button:last-child {
  width: 100% !important;
  min-height: 32px !important;
  font-size: 0 !important;
}

body[data-client-theme] #app .mockup[data-page="personnalisables"] .client-bottom-dock .client-tutorial-button:last-child::after {
  content: "BASTIEN IA" !important;
  display: inline !important;
  color: #fff !important;
  font-size: 12px !important;
}

body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-bottom-dock .client-tutorial-button:last-child::after,
body[data-client-theme] #app .mockup[data-page="menu"] .client-bottom-dock .client-tutorial-button:last-child::after {
  content: none !important;
}

body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-bottom-dock .client-tutorial-button:last-child,
body[data-client-theme] #app .mockup[data-page="menu"] .client-bottom-dock .client-tutorial-button:last-child,
body[data-client-theme] #app .mockup[data-page="personnalisables"] .client-bottom-dock .client-tutorial-button:last-child {
  color: #fff !important;
  font-size: 12px !important;
  -webkit-text-fill-color: #fff !important;
  text-indent: 0 !important;
}

body[data-client-theme] #app .mockup[data-page="personnalisables"] .client-bottom-dock .client-tutorial-button:last-child::after {
  content: none !important;
}

@media (max-width: 1050px) {
  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] {
    padding-top: 206px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-layout {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] :is(.lot01-product-media, .lot01-product-media img) {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1.24 / 1 !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-facts {
    min-height: 0 !important;
  }

  body[data-client-theme]:has(.modal-backdrop[data-product-sheet="lot01"]) #app .mockup .site-nav-overlay {
    display: none !important;
  }

  body[data-client-theme]:has(.modal-backdrop[data-product-sheet="lot01"]) #app .mockup .page-logo-home-link {
    top: 8px !important;
    left: 18px !important;
    width: 76px !important;
  }

  body[data-client-theme]:has(.modal-backdrop[data-product-sheet="lot01"]) #app .mockup .quick-actions-overlay {
    top: 8px !important;
    right: 18px !important;
  }

  body[data-client-theme]:has(.modal-backdrop[data-product-sheet="lot01"]) #app .mockup .theme-mode-switch {
    top: 54px !important;
    right: 18px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] {
    min-height: max(100dvh, 1450px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] > img:first-child {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: .12 !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .page-logo-home-link {
    top: 8px !important;
    left: 18px !important;
    width: 76px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .quick-actions-overlay {
    top: 8px !important;
    right: 18px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .theme-mode-switch {
    top: 54px !important;
    right: 18px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .site-nav-overlay {
    display: none !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-page {
    position: relative !important;
    inset: auto !important;
    width: calc(100% - 28px) !important;
    margin: 132px 14px 86px !important;
    padding: 14px !important;
  }

  body[data-client-theme] .lot01-composition-heading {
    grid-template-columns: 118px minmax(0, 1fr) !important;
  }

  body[data-client-theme] .lot01-composition-layout {
    grid-template-columns: 1fr !important;
  }

  body[data-client-theme] .lot01-composition-summary {
    position: static !important;
  }

  body[data-client-theme] .lot01-composition-summary dl {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body[data-client-theme] .lot01-composition-summary dl > div {
    padding: 12px 8px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: rgba(249, 244, 255, .8) !important;
    text-align: center !important;
  }

  body[data-client-theme] .lot01-composition-summary dl > div:nth-child(4) {
    display: none !important;
  }

  body[data-client-theme] .lot01-total-preview {
    display: none !important;
  }

  body[data-client-theme] .lot01-ingredient-carousel {
    grid-auto-columns: calc((100% - 20px) / 3) !important;
  }

  body[data-client-theme] .lot01-composition-mobile-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: min(500px, 90%) !important;
    margin: 26px auto 0 !important;
  }

  body[data-client-theme] .lot01-composition-mobile-nav button {
    min-height: 38px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] {
    min-height: max(100dvh, 1360px) !important;
    height: auto !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] > img:first-child {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: .12 !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .page-logo-home-link {
    top: 8px !important;
    left: 18px !important;
    width: 76px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .quick-actions-overlay {
    top: 8px !important;
    right: 18px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .theme-mode-switch {
    top: 54px !important;
    right: 18px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-page-content {
    position: relative !important;
    inset: auto !important;
    width: calc(100% - 28px) !important;
    min-height: 0 !important;
    margin: 122px 14px 108px !important;
  }
}

@media (max-width: 600px) {
  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] {
    padding: 202px 8px 78px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .modal {
    width: calc(100vw - 16px) !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sheet {
    padding: 12px !important;
  }

  body[data-client-theme]:has(.modal-backdrop[data-product-sheet="lot01"]) #app .mockup .page-logo-home-link {
    top: 6px !important;
    left: 12px !important;
    width: 64px !important;
  }

  body[data-client-theme]:has(.modal-backdrop[data-product-sheet="lot01"]) #app .mockup .quick-actions-overlay {
    top: 6px !important;
    right: 12px !important;
    width: 136px !important;
  }

  body[data-client-theme]:has(.modal-backdrop[data-product-sheet="lot01"]) #app .mockup .theme-mode-switch {
    top: 42px !important;
    right: 12px !important;
    width: 250px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] {
    min-height: max(100dvh, 1500px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .page-logo-home-link {
    top: 6px !important;
    left: 12px !important;
    width: 64px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .quick-actions-overlay {
    top: 6px !important;
    right: 12px !important;
    width: 136px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .theme-mode-switch {
    top: 42px !important;
    right: 12px !important;
    width: 250px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-page {
    width: calc(100% - 16px) !important;
    margin: 104px 8px 92px !important;
    padding: 10px !important;
  }

  body[data-client-theme] .lot01-composition-heading {
    grid-template-columns: 102px minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  body[data-client-theme] .lot01-return-menu {
    width: 96px !important;
    font-size: 10px !important;
  }

  body[data-client-theme] .lot01-composition-heading h1 {
    font-size: clamp(34px, 9.5vw, 46px) !important;
  }

  body[data-client-theme] .lot01-composition-heading > div > p:last-child {
    font-size: 11px !important;
  }

  body[data-client-theme] .lot01-global-quantity-alert {
    font-size: 12px !important;
  }

  body[data-client-theme] .lot01-composition-steps {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 7px !important;
    overflow: visible !important;
  }

  body[data-client-theme] .lot01-composition-steps li {
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 3px 4px !important;
    font-size: 0 !important;
  }

  body[data-client-theme] .lot01-composition-steps li:nth-child(1)::after { content: "1 BASE"; }
  body[data-client-theme] .lot01-composition-steps li:nth-child(2)::after { content: "2 QTÉ"; }
  body[data-client-theme] .lot01-composition-steps li:nth-child(3)::after { content: "3 INGR."; }
  body[data-client-theme] .lot01-composition-steps li:nth-child(4)::after { content: "4 MENU"; }
  body[data-client-theme] .lot01-composition-steps li:nth-child(5)::after { content: "5 OK"; }

  body[data-client-theme] .lot01-composition-steps li::after {
    font-size: 12px !important;
  }

  body[data-client-theme] .lot01-composition-section h2 {
    font-size: 16px !important;
  }

  body[data-client-theme] .lot01-base-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body[data-client-theme] .lot01-base-card {
    grid-template-columns: 80px minmax(0, 1fr) !important;
  }

  body[data-client-theme] .lot01-base-card > img {
    width: 80px !important;
  }

  body[data-client-theme] .lot01-base-card-copy strong {
    font-size: 13px !important;
  }

  body[data-client-theme] .lot01-base-card-copy small {
    font-size: 8px !important;
  }

  body[data-client-theme] .lot01-global-quantity {
    grid-template-columns: minmax(0, 1fr) 142px !important;
    gap: 8px !important;
  }

  body[data-client-theme] .lot01-ingredient-intro {
    grid-template-columns: 130px minmax(0, 1fr) !important;
  }

  body[data-client-theme] .lot01-ingredient-collage,
  body[data-client-theme] .lot01-ingredient-collage img {
    height: 68px !important;
  }

  body[data-client-theme] .lot01-ingredient-intro strong {
    font-size: 12px !important;
  }

  body[data-client-theme] .lot01-ingredient-intro small {
    font-size: 9px !important;
  }

  body[data-client-theme] .lot01-open-ingredients {
    min-height: 28px !important;
    font-size: 10px !important;
  }

  body[data-client-theme] .lot01-carousel-frame {
    padding: 0 38px !important;
  }

  body[data-client-theme] .lot01-ingredient-carousel {
    grid-auto-columns: 100% !important;
  }

  body[data-client-theme] .lot01-ingredient-card {
    grid-template-columns: 150px minmax(0, 1fr) !important;
    min-height: 196px !important;
  }

  body[data-client-theme] .lot01-ingredient-card > img {
    width: 150px !important;
    height: 180px !important;
  }

  body[data-client-theme] .lot01-composition-summary {
    padding: 12px !important;
  }

  body[data-client-theme] .lot01-composition-summary > h2 {
    font-size: 24px !important;
  }

  body[data-client-theme] .lot01-composition-summary dd {
    font-size: 12px !important;
  }

  body[data-client-theme] .lot01-composition-mobile-nav {
    width: 86% !important;
    gap: 12px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .client-bottom-dock {
    width: 130px !important;
    bottom: 4.8% !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] {
    min-height: max(100dvh, 1080px) !important;
    padding-bottom: 0 !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .page-logo-home-link {
    top: 6px !important;
    left: 12px !important;
    width: 64px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .quick-actions-overlay {
    top: 6px !important;
    right: 12px !important;
    width: 136px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .theme-mode-switch {
    top: 42px !important;
    right: 12px !important;
    width: 250px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-page-content {
    width: calc(100% - 16px) !important;
    margin: 88px 8px 112px !important;
  }
}

/* Lot 01 - fiche produit téléphone : conserver l'en-tête net et la densité
   des vues de référence, sans altérer les composants partagés. */
@media (max-width: 600px) {
  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] {
    align-items: flex-start !important;
    padding: 87px 12px 20px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent 87px,
      rgba(255, 253, 248, .98) 87px,
      rgba(255, 253, 248, .98) 100%
    ) !important;
  }

  body[data-client-theme="night"] .modal-backdrop[data-product-sheet="lot01"] {
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent 87px,
      rgba(18, 9, 29, .99) 87px,
      rgba(18, 9, 29, .99) 100%
    ) !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .modal {
    width: calc(100vw - 24px) !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 22px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sheet {
    min-height: 0 !important;
    padding: 10px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-heading {
    min-height: 80px !important;
    margin-bottom: 18px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-heading h1 {
    font-size: clamp(42px, 10vw, 48px) !important;
    line-height: 1 !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-layout {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] :is(.lot01-product-media, .lot01-product-media img) {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1.25 / 1 !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-facts {
    min-height: 626px !important;
    gap: 14px !important;
    padding: 14px 12px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-facts-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-facts h2 {
    font-size: 34px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-facts-head p:not(.lot01-eyebrow) {
    font-size: 14px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-price {
    min-width: 124px !important;
    min-height: 44px !important;
    padding: 6px 14px !important;
    font-size: 26px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-actions button {
    min-height: 42px !important;
  }
}

@media (min-width: 601px) and (max-width: 1050px) {
  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] {
    align-items: flex-start !important;
    padding: 101px 21px 28px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent 101px,
      rgba(255, 253, 248, .18) 101px,
      rgba(255, 253, 248, .18) 100%
    ) !important;
  }

  body[data-client-theme="night"] .modal-backdrop[data-product-sheet="lot01"] {
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent 101px,
      rgba(12, 5, 20, .38) 101px,
      rgba(12, 5, 20, .38) 100%
    ) !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .modal {
    width: calc(100vw - 42px) !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sheet {
    padding: 10px 18px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-layout {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] :is(.lot01-product-media, .lot01-product-media img) {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1.46 / 1 !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-facts {
    min-height: 439px !important;
  }
}

@media (min-width: 1051px) {
  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] {
    align-items: flex-start !important;
    padding: 114px 34px 28px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent 114px,
      rgba(255, 253, 248, .18) 114px,
      rgba(255, 253, 248, .18) 100%
    ) !important;
  }

  body[data-client-theme="night"] .modal-backdrop[data-product-sheet="lot01"] {
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent 114px,
      rgba(12, 5, 20, .38) 114px,
      rgba(12, 5, 20, .38) 100%
    ) !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .modal {
    width: calc(100vw - 68px) !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sheet {
    background: linear-gradient(to bottom, #f4ecff 0, #f4ecff 210px, #fffdf8 210px, #fffdf8 100%) !important;
  }

  body[data-client-theme="night"] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sheet {
    background: linear-gradient(to bottom, #2a1238 0, #2a1238 210px, #120918 210px, #120918 100%) !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-facts {
    height: 503px !important;
    min-height: 503px !important;
    max-height: 503px !important;
    gap: 14px !important;
    padding: 18px 16px 14px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-facts h2 {
    font-size: 42px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-facts-head p:not(.lot01-eyebrow) {
    font-size: 14px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sections {
    gap: 8px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sections section {
    padding: 7px 12px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sections h3 {
    font-size: 16px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sections p {
    font-size: 13px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-actions {
    gap: 8px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-actions button {
    height: 42px !important;
    min-height: 42px !important;
    padding: 7px 14px !important;
  }
}

body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-legal {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 24px !important;
  margin-top: 10px !important;
  gap: 6px 14px !important;
  color: #76687b !important;
  font: 400 10px/1.2 var(--pb-lot01-font-interface) !important;
}

body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sheet {
  position: relative !important;
}

body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-bastien,
body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-route-nav a {
  border: 2px solid rgba(255, 255, 255, .76) !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(105deg, #7916dc 0%, #c719e5 48%, #f13b91 100%) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -4px 0 rgba(58, 8, 86, .48), 0 6px 8px rgba(47, 13, 62, .28) !important;
  font: 700 12px/1 var(--pb-lot01-font-compact) !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  -webkit-text-fill-color: #fff !important;
}

body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-bastien {
  position: absolute !important;
  z-index: 3 !important;
  right: -8px !important;
  bottom: -10px !important;
  width: 150px !important;
  min-height: 34px !important;
  padding: 6px 14px !important;
}

body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-route-nav {
  display: none !important;
}

body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] :is(.lot01-product-bastien, .lot01-product-route-nav a):focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px #d84ff1, inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -4px 0 rgba(58, 8, 86, .48), 0 6px 8px rgba(47, 13, 62, .28) !important;
}

body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-legal a {
  color: inherit !important;
  text-decoration: none !important;
}

body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-legal a:hover,
body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-legal a:focus-visible {
  text-decoration: underline !important;
}

body[data-client-theme="night"] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-legal {
  color: #d9cadf !important;
}

@media (min-width: 1051px) {
  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sheet {
    position: relative !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-legal {
    position: absolute !important;
    right: 24px !important;
    bottom: 10px !important;
    left: 24px !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 1050px) {
  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .modal {
    margin-bottom: 102px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-route-nav {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: 0 !important;
    left: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-route-nav a {
    display: grid !important;
    place-items: center !important;
    min-height: 36px !important;
    padding: 5px 8px !important;
  }
}

@media (max-width: 600px) {
  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .modal {
    margin-bottom: 128px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-route-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-route-nav a {
    min-height: 34px !important;
    font-size: 11px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-bastien {
    width: 135px !important;
    min-height: 32px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-legal {
    justify-content: flex-start !important;
    padding-right: 126px !important;
  }
}

/*
 * Garde finale CL-ACCUEIL-DESKTOP-SAND-V10.
 * Placée après les styles Lot 01 pour préserver l'accueil ordinateur validé.
 */
@media (min-width: 1025px) {
  body:has(#app .mockup[data-page="accueil"][data-client-fidelity="v9"]) {
    min-height: 66.6667vw !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #050208 !important;
  }

  body[data-client-theme] #app:has(.mockup[data-page="accueil"][data-client-fidelity="v9"]) {
    min-height: 66.6667vw !important;
    height: 66.6667vw !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] {
    min-height: 66.6667vw !important;
    height: 66.6667vw !important;
    max-height: none !important;
    aspect-ratio: 3 / 2 !important;
    overflow: hidden !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] > img:first-child {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center top !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .page-logo-home-link {
    top: 1.35% !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-route-back-home {
    top: calc(1.35% + clamp(96px, 10vw, 142px) + 12px) !important;
    left: 2.75% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: clamp(96px, 10vw, 142px) !important;
    min-height: 42px !important;
    padding: 7px 12px !important;
    font-size: clamp(11px, .82vw, 13px) !important;
    text-transform: uppercase !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay {
    top: 5.2% !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .quick-actions-overlay {
    top: 4% !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .theme-mode-switch {
    top: 9.1% !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser {
    left: 6.25% !important;
    top: 33.1% !important;
    width: 35.5% !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body[data-client-theme="day"] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser strong,
  body[data-client-theme="day"] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser small,
  body[data-client-theme="day"] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser small span {
    color: #170b35 !important;
    -webkit-text-stroke: .25px rgba(5, 1, 12, .82) !important;
    text-shadow:
      1px 0 0 rgba(255, 255, 255, .72),
      0 1px 0 rgba(255, 255, 255, .72),
      -1px 0 0 rgba(10, 2, 22, .58),
      0 -1px 0 rgba(10, 2, 22, .58) !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser strong {
    font-size: clamp(25px, 1.82vw, 30px) !important;
    line-height: 1.08 !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser small {
    margin-top: 14px !important;
    font-size: clamp(16px, 1.2vw, 20px) !important;
    font-weight: 800 !important;
    line-height: 1.55 !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-action-stack {
    left: 14.7% !important;
    right: auto !important;
    top: auto !important;
    bottom: 6.7% !important;
    width: 29.8% !important;
    height: 54px !important;
    grid-template-columns: 1.25fr 1fr !important;
    gap: 24px !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-bottom-dock {
    left: 46.8% !important;
    right: auto !important;
    top: auto !important;
    bottom: 6.7% !important;
    width: 36.4% !important;
    height: 54px !important;
    gap: 24px !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-action-stack button,
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-bottom-dock .client-tutorial-button {
    min-height: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    font-size: clamp(11px, .9vw, 14px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

/* Lot 01 — fiches 03/04/05 : les affiches canoniques restent visibles en
   entier. Les formulations prudentes et les pilules 3D ne changent pas. */
body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-media img {
  object-fit: contain !important;
  object-position: center !important;
}

body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sheet[data-pb-product-id="coca"] .lot01-product-media,
body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sheet[data-pb-product-id="coca"] .lot01-product-media img {
  aspect-ratio: 1122 / 1402 !important;
}

body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sheet[data-pb-product-id="coca"] .lot01-product-media img,
body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sheet[data-pb-product-id="tiramisu"] .lot01-product-media img {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
}

body[data-client-theme="night"] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-price {
  color: #fff !important;
  background: #562566 !important;
}

@media (max-width: 1050px) {
  body[data-client-theme="day"] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sheet {
    background: linear-gradient(
      to bottom,
      #f4ecff 0,
      #f4ecff 210px,
      #fffdf8 210px,
      #fffdf8 100%
    ) !important;
  }

  body[data-client-theme="night"] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sheet {
    background: linear-gradient(
      to bottom,
      #2a1238 0,
      #2a1238 210px,
      #120918 210px,
      #120918 100%
    ) !important;
  }
}

@media (min-width: 1051px) {
  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sheet[data-pb-product-id="coca"] .lot01-product-heading {
    min-height: 84px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sheet[data-pb-product-id="coca"] .lot01-product-layout {
    grid-template-columns: 490px minmax(0, 1fr) !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sheet[data-pb-product-id="coca"] .lot01-product-media {
    width: 490px !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1122 / 1402 !important;
    justify-self: center !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sheet[data-pb-product-id="coca"] .lot01-product-facts {
    height: 592px !important;
    min-height: 592px !important;
    max-height: 592px !important;
    margin-top: 15px !important;
  }
}

@media (min-width: 601px) and (max-width: 1050px) {
  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sheet[data-pb-product-id="coca"] .lot01-product-media {
    width: 370px !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1122 / 1402 !important;
    margin-inline: auto !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sheet[data-pb-product-id="coca"] .lot01-product-media {
    background: #74393f !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-facts {
    height: 439px !important;
    min-height: 439px !important;
    max-height: 439px !important;
    gap: 10px !important;
    padding: 14px 16px 12px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sections {
    gap: 8px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sections section {
    padding: 7px 12px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sections h3 {
    font-size: 16px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sections p {
    font-size: 13px !important;
  }
}

@media (max-width: 600px) {
  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-sheet[data-pb-product-id="coca"] .lot01-product-media {
    width: 296px !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1122 / 1402 !important;
    margin-inline: auto !important;
  }
}

/* Fiches produit 03/04/05 : fermeture interne accessible, placee sous le
   logo sans rendre le Retour de la page de fond interactif. */
body[data-client-theme]:has(.modal-backdrop.open[data-product-sheet="lot01"]) #app {
  pointer-events: none !important;
}

body[data-client-theme] .modal-backdrop.open[data-product-sheet="lot01"] .modal-head {
  position: fixed !important;
  z-index: 2 !important;
  top: 108px !important;
  left: 24px !important;
  display: block !important;
  width: 92px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  pointer-events: none !important;
}

body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .modal-head > h2 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .modal-head > .lot01-product-return {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 92px !important;
  min-width: 92px !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 2px 8px !important;
  border: 1px solid rgba(255, 255, 255, .76) !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(105deg, #7916dc 0%, #c719e5 48%, #f13b91 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .55),
    inset 0 -3px 0 rgba(58, 8, 86, .48),
    0 4px 7px rgba(47, 13, 62, .3) !important;
  font-family: var(--pb-lot01-font-compact, var(--font-compact, "Barlow Condensed", Arial, sans-serif)) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
  -webkit-text-fill-color: #fff !important;
}

body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .modal-head > .lot01-product-return:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 3px !important;
  box-shadow:
    0 0 0 6px #d84ff1,
    inset 0 2px 0 rgba(255, 255, 255, .55),
    inset 0 -3px 0 rgba(58, 8, 86, .48),
    0 4px 7px rgba(47, 13, 62, .3) !important;
}

@media (max-width: 1050px) {
  body[data-client-theme] .modal-backdrop.open[data-product-sheet="lot01"] .modal-head {
    top: 88px !important;
    left: 18px !important;
    width: 76px !important;
    height: 28px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .modal-head > .lot01-product-return {
    width: 76px !important;
    min-width: 76px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 3px 7px !important;
    font-size: 9px !important;
  }
}

@media (max-width: 600px) {
  body[data-client-theme] .modal-backdrop.open[data-product-sheet="lot01"] .modal-head {
    top: 74px !important;
    left: 12px !important;
    width: 64px !important;
    height: 24px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .modal-head > .lot01-product-return {
    width: 64px !important;
    min-width: 64px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 2px 5px !important;
    font-size: 8.5px !important;
  }
}

/* Les preuves locales en grille doivent saisir un état stable, sans phase
   intermédiaire de transition entre deux tuiles. Cet attribut n'existe jamais
   dans l'usage normal ni sur la Preview. */
html[data-pb-lot01-capture-grid] *,
html[data-pb-lot01-capture-grid] *::before,
html[data-pb-lot01-capture-grid] *::after {
  animation: none !important;
  scroll-behavior: auto !important;
  transition: none !important;
}

/* ===== SOURCE CONSOLIDÉE: private/site/assets/client-lot01-checkout-v1.css ===== */
/* Lot Client 01 — écrans 08 à 10. Couche locale, sans effet externe. */

.mockup[data-client-lot01-board="08"],
.mockup[data-client-lot01-board="09"],
.mockup[data-client-lot01-board="10"] {
  --lot01-ink: #2d1735;
  --lot01-muted: #79657d;
  --lot01-pink: #eb4d9c;
  --lot01-violet: #7b20d2;
  --lot01-line: #d77ccc;
  --lot01-panel: rgba(255, 253, 250, .97);
  --lot01-soft: #fbf2ff;
  --lot01-warning: #fff0cc;
  --lot01-success: #e9f8ef;
  width: 100% !important;
  max-width: none !important;
  min-height: 100dvh !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  color: var(--lot01-ink) !important;
  background: #fffdf8 !important;
  font-family: var(--font-interface, "Source Sans 3", sans-serif) !important;
}

/* En-tête commun des dix planches canoniques. La bannière de session globale
   reste visible afin de prouver que le parcours est isolé et qu'aucune action
   réelle n'est autorisée. Les écrans panier/paiement conservent en plus leurs
   avertissements TEST explicites dans le contenu. */
html:has(body #app .mockup[data-client-lot01-board]) {
  scrollbar-width: none;
}

html:has(body #app .mockup[data-client-lot01-board])::-webkit-scrollbar {
  width: 0;
  height: 0;
}

@media (min-width: 901px) {
  body[data-client-theme] #app .mockup[data-client-lot01-board]:not([data-page="accueil"]) .page-logo-home-link {
    top: 8px !important;
    left: 24px !important;
    width: 92px !important;
    height: 92px !important;
  }

  body[data-client-theme] #app .mockup[data-client-lot01-board]:not([data-page="accueil"]) .site-nav-overlay {
    top: 22px !important;
    right: 292px !important;
    left: 146px !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    width: auto !important;
    height: 42px !important;
    min-height: 42px !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  body[data-client-theme] #app .mockup[data-client-lot01-board]:not([data-page="accueil"]) .site-nav-overlay > a {
    width: auto !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 6px 12px !important;
    border: 2px solid rgba(255, 211, 243, .95) !important;
    border-radius: 999px !important;
    color: #fff !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 43%, rgba(56, 4, 83, .24) 100%),
      linear-gradient(100deg, #8b1fe4 0%, #ca26c4 52%, #ef438f 100%) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .7),
      inset 0 3px 4px rgba(255, 255, 255, .24),
      0 4px 0 rgba(58, 10, 91, .92),
      0 8px 14px rgba(23, 4, 32, .24) !important;
    font-size: clamp(10px, .82vw, 13px) !important;
    line-height: 1 !important;
  }

  body[data-client-theme] #app .mockup[data-client-lot01-board]:not([data-page="accueil"]) .quick-actions-overlay {
    top: 14px !important;
    right: 24px !important;
    width: 208px !important;
    height: 42px !important;
  }

  body[data-client-theme] #app .mockup[data-client-lot01-board]:not([data-page="accueil"]) .theme-mode-switch {
    top: 68px !important;
    right: 24px !important;
    width: 252px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  body[data-client-theme]:has(.modal-backdrop[data-product-sheet="lot01"]) #app .mockup .site-legal-footer {
    display: none !important;
  }
}

@media (min-width: 561px) {
  .lot01-pickup-stage .lot01-checkout-main > .lot01-panel {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .lot01-payment-stage .lot01-checkout-main {
    gap: 10px !important;
  }

  .lot01-payment-stage .lot01-checkout-main > .lot01-panel:not(.lot01-payment-recap),
  .lot01-payment-stage .lot01-recheck-box {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .lot01-payment-stage .lot01-recheck-box {
    min-height: 92px !important;
  }

  body[data-client-theme] #app .lot01-checkout-shell select {
    min-height: 42px !important;
    padding: 5px 18px !important;
    border: 2px solid rgba(255, 255, 255, .76) !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: linear-gradient(105deg, #7916dc 0%, #c719e5 48%, #f13b91 100%) !important;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -4px 0 rgba(58, 8, 86, .48), 0 7px 8px rgba(47, 13, 62, .28) !important;
    font: 700 14px/1 var(--font-compact, "Barlow Condensed", sans-serif) !important;
    text-align: center !important;
    text-align-last: center !important;
    text-transform: uppercase !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-text-fill-color: #fff !important;
  }

  body[data-client-theme] #app .lot01-checkout-shell select option {
    color: #2d1735 !important;
    background: #fffdf8 !important;
    -webkit-text-fill-color: #2d1735 !important;
  }
}

body[data-client-theme="night"] .lot01-allergen-box label {
  color: #fff3d7 !important;
}

@media (max-width: 900px) {
  body[data-client-theme] #app .mockup[data-client-lot01-board]:not([data-page="accueil"]) {
    min-height: 100dvh !important;
    padding: 87px 0 0 !important;
    background: #f8f1e9 !important;
  }

  body[data-client-theme] #app .mockup[data-client-lot01-board]:not([data-page="accueil"])::before,
  body[data-client-theme] #app .mockup[data-client-lot01-board]:not([data-page="accueil"])::after {
    display: none !important;
    content: none !important;
  }

  body[data-client-theme="night"] #app .mockup[data-client-lot01-board]:not([data-page="accueil"]) {
    background: #170b22 !important;
  }

  body[data-client-theme] #app .mockup[data-client-lot01-board]:not([data-page="accueil"]) > img:first-child,
  body[data-client-theme] #app .mockup[data-client-lot01-board]:not([data-page="accueil"]) .client-mobile-top-logo {
    display: none !important;
  }

  body[data-client-theme] #app .mockup[data-client-lot01-board]:not([data-page="accueil"]) .page-logo-home-link {
    position: absolute !important;
    z-index: 34 !important;
    top: 6px !important;
    left: 12px !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
  }

  body[data-client-theme] #app .mockup[data-client-lot01-board]:not([data-page="accueil"]) .quick-actions-overlay {
    position: absolute !important;
    z-index: 35 !important;
    top: 2px !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 144px !important;
    height: 30px !important;
    margin: 0 !important;
    gap: 4px !important;
  }

  body[data-client-theme] #app .mockup[data-client-lot01-board]:not([data-page="accueil"]) .quick-actions-overlay > a {
    min-width: 0 !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 3px 6px !important;
    font-size: 9px !important;
  }

  body[data-client-theme] #app .mockup[data-client-lot01-board]:not([data-page="accueil"]) .theme-mode-switch {
    position: absolute !important;
    z-index: 35 !important;
    top: 42px !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    width: 252px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
  }

  body[data-client-theme] #app .mockup[data-client-lot01-board]:not([data-page="accueil"]) .theme-mode-switch button {
    min-height: 30px !important;
    height: 30px !important;
    padding: 2px 8px !important;
    font-size: 10px !important;
  }

  body[data-client-theme] #app .mockup[data-client-lot01-board]:not([data-page="accueil"]) .theme-mode-switch button.active {
    font-size: 16px !important;
  }

  body[data-client-theme] #app .mockup[data-client-lot01-board]:not([data-page="accueil"]) > .client-page-content {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: calc(100% - 20px) !important;
    max-width: none !important;
    margin: 0 10px !important;
  }
}

body[data-client-theme="night"] .mockup[data-client-lot01-board="08"],
body[data-client-theme="night"] .mockup[data-client-lot01-board="09"],
body[data-client-theme="night"] .mockup[data-client-lot01-board="10"] {
  --lot01-ink: #fbf6ff;
  --lot01-muted: #d2bfdc;
  --lot01-line: #a55ad2;
  --lot01-panel: rgba(24, 13, 32, .98);
  --lot01-soft: #261333;
  --lot01-warning: #4b351e;
  --lot01-success: #183629;
  background: #120918 !important;
}

.mockup[data-client-lot01-board="08"] > img:first-child,
.mockup[data-client-lot01-board="09"] > img:first-child,
.mockup[data-client-lot01-board="10"] > img:first-child {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  opacity: .055 !important;
  pointer-events: none !important;
}

body[data-client-theme] #app .mockup[data-client-lot01-board="08"] > img:first-child,
body[data-client-theme] #app .mockup[data-client-lot01-board="09"] > img:first-child,
body[data-client-theme] #app .mockup[data-client-lot01-board="10"] > img:first-child {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: .055 !important;
}

.mockup[data-client-lot01-board="08"] .page-logo-home-link,
.mockup[data-client-lot01-board="09"] .page-logo-home-link,
.mockup[data-client-lot01-board="10"] .page-logo-home-link {
  top: 12px !important;
  left: 24px !important;
  width: 92px !important;
}

body[data-client-theme] #app .mockup[data-client-lot01-board="08"] .page-logo-home-link,
body[data-client-theme] #app .mockup[data-client-lot01-board="09"] .page-logo-home-link,
body[data-client-theme] #app .mockup[data-client-lot01-board="10"] .page-logo-home-link {
  top: 12px !important;
  left: 24px !important;
  width: 92px !important;
}

.mockup[data-client-lot01-board="08"] .prelaunch-banner,
.mockup[data-client-lot01-board="09"] .prelaunch-banner,
.mockup[data-client-lot01-board="10"] .prelaunch-banner,
.mockup[data-client-lot01-board="08"] .client-route-back,
.mockup[data-client-lot01-board="09"] .client-route-back,
.mockup[data-client-lot01-board="10"] .client-route-back,
.mockup[data-client-lot01-board="08"] .site-legal-footer,
.mockup[data-client-lot01-board="09"] .site-legal-footer,
.mockup[data-client-lot01-board="10"] .site-legal-footer {
  display: none !important;
}

.lot01-checkout-shell {
  position: relative;
  z-index: 10;
  width: calc(100% - 48px);
  min-height: calc(100dvh - 128px);
  margin: 108px auto 18px;
  padding: 20px 28px 60px;
  border: 1.5px solid color-mix(in srgb, var(--lot01-line) 72%, transparent);
  border-radius: 24px;
  background: var(--lot01-panel);
  box-shadow: 0 16px 40px rgba(60, 22, 76, .08);
}

.lot01-checkout-heading p {
  margin: 0 0 2px;
  color: var(--lot01-pink);
  font: 700 13px/1.2 var(--font-interface, "Source Sans 3", sans-serif);
  letter-spacing: .035em;
  text-transform: uppercase;
}

.lot01-checkout-heading h1 {
  margin: 0;
  color: var(--lot01-ink);
  font: 400 clamp(42px, 4vw, 64px)/1.08 var(--font-display, "Kaushan Script", cursive);
}

.lot01-checkout-heading > strong {
  display: block;
  margin-top: 4px;
  color: var(--lot01-muted);
  font-size: 14px;
  text-transform: uppercase;
}

.lot01-checkout-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
}

.pb-lot01-pill,
.lot01-checkout-shell select {
  min-height: 42px;
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(100deg, #7e11dc 0%, #cc21de 48%, #f42b7d 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.65),
    inset 0 -2px 0 rgba(60,0,88,.55),
    0 7px 0 #371141,
    0 11px 17px rgba(43, 14, 51, .28);
  font: 700 14px/1 var(--font-compact, "Barlow Condensed", sans-serif);
  letter-spacing: .01em;
  text-align: center;
  text-transform: uppercase;
}

.pb-lot01-pill:hover,
.pb-lot01-pill:focus-visible,
.pb-lot01-pill.active {
  filter: saturate(1.12) brightness(1.05);
  outline: 3px solid rgba(235, 77, 156, .22);
  outline-offset: 3px;
}

/* Une seule capsule d'etape est visuellement active par ecran. Le moteur
   marque encore les deux sous-etapes Retrait/Compte et Verification/Paiement. */
.lot01-checkout-steps .pb-lot01-pill.active {
  background: linear-gradient(100deg, #711878 0%, #a52a87 52%, #d33b75 100%);
  filter: saturate(1.08) brightness(.94);
}

.mockup[data-client-lot01-board="09"] .lot01-checkout-steps .pb-lot01-pill:nth-child(3),
.mockup[data-client-lot01-board="10"] .lot01-checkout-steps .pb-lot01-pill:nth-child(4) {
  background: linear-gradient(100deg, #7e11dc 0%, #cc21de 48%, #f42b7d 100%);
  filter: none;
  outline: 0;
}

.pb-lot01-pill:disabled {
  color: rgba(255,255,255,.72);
  background: linear-gradient(100deg, #5d1c76, #8c2d65);
  filter: grayscale(.34);
  cursor: not-allowed;
  box-shadow: inset 0 1px rgba(255,255,255,.25), 0 5px 0 #271329;
}

.lot01-checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 370px);
  gap: 18px;
}

.lot01-checkout-main {
  display: grid;
  align-content: start;
  gap: 16px;
}

.lot01-panel,
.lot01-summary,
.lot01-allergen-box,
.lot01-recheck-box {
  border: 2px solid color-mix(in srgb, var(--lot01-line) 82%, transparent);
  border-radius: 18px;
  background: var(--lot01-panel);
  padding: 18px;
}

.lot01-panel h2,
.lot01-summary h2,
.lot01-allergen-box > strong,
.lot01-recheck-box > strong {
  margin: 0 0 8px;
  color: var(--lot01-ink);
  font: 700 24px/1.15 var(--font-interface, "Source Sans 3", sans-serif);
}

.lot01-panel p,
.lot01-summary p,
.lot01-allergen-box p,
.lot01-recheck-box p,
.lot01-cart-product p {
  margin: 5px 0;
  color: var(--lot01-muted);
  font-size: 14px;
}

.lot01-cart-product {
  display: grid;
  grid-template-columns: 210px minmax(0,1fr);
  gap: 18px;
  align-items: start;
}

.lot01-cart-product > img {
  width: 100%;
  aspect-ratio: 16 / 7.5;
  object-fit: cover;
  border: 2px solid var(--lot01-violet);
  border-radius: 14px;
}

.lot01-cart-product h2 {
  margin: 0 0 8px;
  font-size: 22px;
}

.lot01-confirm {
  color: var(--lot01-pink) !important;
  text-transform: uppercase;
}

.lot01-action-row,
.lot01-segmented,
.lot01-identity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}

.lot01-segmented,
.lot01-identity-grid {
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.lot01-identity-choice {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1.5px solid color-mix(in srgb, var(--lot01-line) 48%, transparent);
  border-radius: 14px;
  background: var(--lot01-panel);
  text-align: center;
}

.lot01-identity-choice p {
  min-height: 2.6em;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 600;
}

.lot01-account-access {
  margin-top: auto;
  min-height: 36px;
}

.lot01-formula-panel {
  background: var(--lot01-soft);
}

.lot01-formula-choice {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 10px 18px;
  align-items: center;
  margin-top: 14px;
}

@media (min-width: 901px) {
  .lot01-checkout-grid {
    grid-template-columns: minmax(0, 1fr) 400px;
  }

  .lot01-checkout-heading h1 {
    font-size: 50px;
    line-height: 1;
  }

  .lot01-payment-stage .lot01-test-warning {
    min-height: 48px;
    margin-top: 14px !important;
    padding: 12px 20px;
  }

  .lot01-payment-stage .lot01-outcomes button {
    min-height: 30px;
  }
}

.lot01-formula-choice img {
  grid-row: 1 / span 3;
  width: 100%;
  border: 2px solid var(--lot01-violet);
  border-radius: 14px;
}

.lot01-formula-choice p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  text-transform: uppercase;
}

.lot01-formula-choice .pb-lot01-pill {
  width: 100%;
}

.lot01-allergen-box {
  min-height: 160px;
  border-color: #d59b32;
  background: var(--lot01-warning);
  color: #70480f;
}

.lot01-allergen-box label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 48px;
  font-weight: 700;
}

.lot01-allergen-box input {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  accent-color: #a23be6;
}

.lot01-summary {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--lot01-soft);
}

.lot01-summary dl {
  display: grid;
  flex: 1;
  margin: 0;
}

.lot01-summary dl div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--lot01-line) 38%, transparent);
}

.lot01-summary dt {
  color: var(--lot01-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.lot01-summary dd {
  margin: 0;
  color: var(--lot01-ink);
  font-weight: 700;
  text-align: right;
}

.lot01-no-fee,
.lot01-recheck-box {
  border: 1.5px solid #4eb87c;
  border-radius: 14px;
  background: var(--lot01-success);
  color: #226d44 !important;
  padding: 18px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

.lot01-primary-action {
  width: 100%;
  min-height: 56px;
  margin-top: 16px;
  font-size: 22px;
}

.lot01-wide-pill {
  width: 100%;
  min-height: 48px;
  margin: 12px 0 2px;
  font-size: 20px;
}

.lot01-panel label {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  color: var(--lot01-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.lot01-checkout-shell select {
  width: 100%;
  padding: 0 20px;
  appearance: none;
}

.lot01-two-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

.lot01-recheck-box {
  min-height: 120px;
  text-align: left;
}

.lot01-test-warning {
  margin-top: 20px !important;
  border: 1px solid #d59b32;
  border-radius: 12px;
  background: var(--lot01-warning);
  color: #70480f !important;
  padding: 20px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

.lot01-outcomes > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}

.lot01-outcomes button {
  min-height: 42px;
  border: 1.5px solid color-mix(in srgb, var(--lot01-line) 45%, transparent);
  border-radius: 10px;
  color: var(--lot01-muted);
  background: var(--lot01-soft);
  font-weight: 700;
  text-transform: uppercase;
}

.lot01-outcomes button.active {
  border-color: #4eb87c;
  color: #226d44;
  background: var(--lot01-success);
}

.lot01-payment-recap-card {
  display: grid;
  grid-template-columns: 155px minmax(0,1fr);
  gap: 16px;
  align-items: start;
}

.lot01-payment-recap-card img {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  border: 2px solid var(--lot01-violet);
  border-radius: 12px;
}

.lot01-payment-recap-card strong {
  display: block;
  margin-bottom: 6px;
  color: var(--lot01-ink);
  font-size: 18px;
}

.lot01-payment-recap-card p {
  margin: 3px 0;
  color: var(--lot01-muted);
  font-size: 13px;
}

.lot01-final-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  text-transform: uppercase;
}

.lot01-final-total strong {
  font: 600 30px/1 var(--font-compact, "Barlow Condensed", sans-serif);
}

.lot01-mobile-nav {
  display: none;
}

.lot01-checkout-legal {
  position: absolute;
  right: 220px;
  bottom: 18px;
  left: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
  color: var(--lot01-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

.lot01-checkout-legal a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.mockup[data-client-lot01-board="08"] .client-bottom-dock,
.mockup[data-client-lot01-board="09"] .client-bottom-dock,
.mockup[data-client-lot01-board="10"] .client-bottom-dock {
  position: absolute !important;
  right: 24px !important;
  bottom: 8px !important;
  left: auto !important;
  z-index: 30 !important;
  display: block !important;
  width: 170px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.mockup[data-client-lot01-board="08"] .client-bottom-dock .client-professional-bottom,
.mockup[data-client-lot01-board="09"] .client-bottom-dock .client-professional-bottom,
.mockup[data-client-lot01-board="10"] .client-bottom-dock .client-professional-bottom {
  display: none !important;
}

.mockup[data-client-lot01-board="08"] .client-bottom-dock .client-tutorial-button:last-child,
.mockup[data-client-lot01-board="09"] .client-bottom-dock .client-tutorial-button:last-child,
.mockup[data-client-lot01-board="10"] .client-bottom-dock .client-tutorial-button:last-child {
  position: static !important;
  display: block !important;
  width: 170px !important;
  min-width: 170px !important;
  max-width: 170px !important;
  min-height: 36px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  font-family: var(--font-compact, "Barlow Condensed", sans-serif) !important;
  color: #fff !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
}

.mockup[data-client-lot01-board="08"] .client-bottom-dock .client-tutorial-button:last-child::after,
.mockup[data-client-lot01-board="09"] .client-bottom-dock .client-tutorial-button:last-child::after,
.mockup[data-client-lot01-board="10"] .client-bottom-dock .client-tutorial-button:last-child::after {
  content: none !important;
}

@media (max-width: 900px) {
  .mockup[data-client-lot01-board="08"] .site-nav-overlay,
  .mockup[data-client-lot01-board="09"] .site-nav-overlay,
  .mockup[data-client-lot01-board="10"] .site-nav-overlay {
    display: none !important;
  }

  .lot01-checkout-shell {
    width: calc(100% - 20px);
    min-height: calc(100dvh - 126px);
    margin-top: 72px;
    padding: 18px 16px 94px;
    border-radius: 20px;
  }

  .mockup[data-client-lot01-board="08"] .page-logo-home-link,
  .mockup[data-client-lot01-board="09"] .page-logo-home-link,
  .mockup[data-client-lot01-board="10"] .page-logo-home-link {
    top: 8px !important;
    left: 18px !important;
    width: 76px !important;
  }

  body[data-client-theme] #app .mockup[data-client-lot01-board="08"] .page-logo-home-link,
  body[data-client-theme] #app .mockup[data-client-lot01-board="09"] .page-logo-home-link,
  body[data-client-theme] #app .mockup[data-client-lot01-board="10"] .page-logo-home-link {
    top: 8px !important;
    left: 18px !important;
    width: 76px !important;
  }

  body[data-client-theme] #app .mockup[data-client-lot01-board="08"] .quick-actions-overlay,
  body[data-client-theme] #app .mockup[data-client-lot01-board="09"] .quick-actions-overlay,
  body[data-client-theme] #app .mockup[data-client-lot01-board="10"] .quick-actions-overlay {
    top: 8px !important;
    right: 18px !important;
  }

  body[data-client-theme] #app .mockup[data-client-lot01-board="08"] .theme-mode-switch,
  body[data-client-theme] #app .mockup[data-client-lot01-board="09"] .theme-mode-switch,
  body[data-client-theme] #app .mockup[data-client-lot01-board="10"] .theme-mode-switch {
    top: 54px !important;
    right: 18px !important;
  }

  .lot01-checkout-heading h1 {
    font-size: clamp(38px, 7vw, 54px);
  }

  .lot01-checkout-grid {
    grid-template-columns: 1fr;
  }

  .lot01-checkout-steps {
    gap: 6px;
  }

  .lot01-checkout-steps .pb-lot01-pill {
    min-width: 0;
    min-height: 48px;
    padding: 5px;
    font-size: 11px;
    white-space: normal;
  }

  .lot01-checkout-steps .pb-lot01-pill span {
    display: block;
  }

  .lot01-summary {
    min-height: 420px;
  }

  .lot01-cart-stage .lot01-cart-product {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .lot01-mobile-nav {
    position: absolute;
    right: 0;
    bottom: 10px;
    left: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
    padding: 0 14px;
  }

  .mockup[data-client-lot01-board="08"] .client-bottom-dock,
  .mockup[data-client-lot01-board="09"] .client-bottom-dock,
  .mockup[data-client-lot01-board="10"] .client-bottom-dock {
    right: 18px !important;
    bottom: 72px !important;
  }

  .lot01-checkout-legal {
    right: 200px;
    bottom: 80px;
    left: 16px;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-size: 9px;
    text-align: left;
  }
}

@media (max-width: 560px) {
  .lot01-checkout-shell {
    width: calc(100% - 16px);
    min-height: calc(100dvh - 126px);
    margin-top: 14px;
    padding: 16px 18px 145px;
  }

  .mockup[data-client-lot01-board="08"] .page-logo-home-link,
  .mockup[data-client-lot01-board="09"] .page-logo-home-link,
  .mockup[data-client-lot01-board="10"] .page-logo-home-link {
    top: 6px !important;
    left: 12px !important;
    width: 64px !important;
  }

  body[data-client-theme] #app .mockup[data-client-lot01-board="08"] .page-logo-home-link,
  body[data-client-theme] #app .mockup[data-client-lot01-board="09"] .page-logo-home-link,
  body[data-client-theme] #app .mockup[data-client-lot01-board="10"] .page-logo-home-link {
    top: 6px !important;
    left: 12px !important;
    width: 64px !important;
  }

  body[data-client-theme] #app .mockup[data-client-lot01-board="08"] .quick-actions-overlay,
  body[data-client-theme] #app .mockup[data-client-lot01-board="09"] .quick-actions-overlay,
  body[data-client-theme] #app .mockup[data-client-lot01-board="10"] .quick-actions-overlay {
    top: 2px !important;
    right: 12px !important;
    width: 144px !important;
  }

  body[data-client-theme] #app .mockup[data-client-lot01-board="08"] .theme-mode-switch,
  body[data-client-theme] #app .mockup[data-client-lot01-board="09"] .theme-mode-switch,
  body[data-client-theme] #app .mockup[data-client-lot01-board="10"] .theme-mode-switch {
    top: 42px !important;
    right: 12px !important;
    width: 252px !important;
  }

  .lot01-checkout-heading p {
    font-size: 11px;
  }

  .lot01-checkout-heading h1 {
    font-size: 35px;
  }

  .lot01-checkout-heading > strong {
    margin: 12px 0;
    font-size: 12px;
  }

  .lot01-checkout-grid,
  .lot01-checkout-main {
    gap: 12px;
  }

  .lot01-panel,
  .lot01-summary,
  .lot01-allergen-box,
  .lot01-recheck-box {
    padding: 14px;
    border-radius: 16px;
  }

  .lot01-cart-stage .lot01-cart-product {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .lot01-payment-recap-card {
    grid-template-columns: 140px minmax(0,1fr);
    gap: 12px;
  }

  .lot01-cart-product > img {
    aspect-ratio: 2.1 / 1;
  }

  .lot01-cart-product h2,
  .lot01-panel h2,
  .lot01-summary h2 {
    font-size: 20px;
  }

  .lot01-cart-stage .lot01-action-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .lot01-cart-stage .lot01-action-row .pb-lot01-pill {
    min-width: 0;
    min-height: 32px;
    height: 32px;
    padding-inline: 5px;
    font-size: 11px;
  }

  .lot01-formula-choice {
    grid-template-columns: 1fr;
  }

  .lot01-formula-choice img {
    grid-row: auto;
    max-height: 205px;
    aspect-ratio: 2.1 / 1;
    object-fit: cover;
  }

  .lot01-two-fields {
    grid-template-columns: 1fr;
  }

  .lot01-segmented,
  .lot01-identity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .lot01-pickup-stage .lot01-identity-grid .pb-lot01-pill,
  .lot01-payment-stage .lot01-segmented .pb-lot01-pill {
    min-width: 0;
    padding: 7px 5px;
    font-size: 11px;
    line-height: 1.05;
    white-space: normal;
  }

  .lot01-outcomes > div {
    grid-template-columns: repeat(4, minmax(0,1fr));
  }

  .lot01-outcomes button {
    min-width: 0;
    padding: 4px;
    font-size: 9px;
  }

  .lot01-allergen-box {
    min-height: 190px;
  }

  .lot01-cart-stage .lot01-allergen-box,
  .lot01-payment-stage .lot01-allergen-box {
    min-height: 316px;
  }

  .lot01-payment-stage .lot01-allergen-box {
    min-height: 320px;
  }

  .lot01-allergen-box label {
    margin-top: 52px;
    font-size: 13px;
  }

  .lot01-cart-stage .lot01-allergen-box label,
  .lot01-payment-stage .lot01-allergen-box label {
    margin-top: 110px;
  }

  .lot01-primary-action {
    min-height: 54px;
    font-size: 19px;
  }

  .lot01-checkout-steps .pb-lot01-pill {
    font-size: 0;
    white-space: nowrap;
  }

  .lot01-checkout-steps .pb-lot01-pill span,
  .lot01-checkout-steps .pb-lot01-pill::after {
    display: inline;
    font-size: 9px;
  }

  .lot01-checkout-steps .pb-lot01-pill::after {
    content: "";
    margin-left: 3px;
  }

  .lot01-checkout-steps .pb-lot01-pill:nth-child(1)::after { content: "Panier"; }
  .lot01-checkout-steps .pb-lot01-pill:nth-child(2)::after { content: "Retrait"; }
  .lot01-checkout-steps .pb-lot01-pill:nth-child(3)::after { content: "Compte"; }
  .lot01-checkout-steps .pb-lot01-pill:nth-child(4)::after { content: "Verif."; }
  .lot01-checkout-steps .pb-lot01-pill:nth-child(5)::after { content: "Test"; }

  .lot01-checkout-legal {
    right: 12px;
    bottom: 106px;
    left: 12px;
    justify-content: center;
    gap: 4px 12px;
    font-size: 8px;
    text-align: center;
  }

  .mockup[data-client-lot01-board="08"] .client-bottom-dock,
  .mockup[data-client-lot01-board="09"] .client-bottom-dock,
  .mockup[data-client-lot01-board="10"] .client-bottom-dock {
    right: 12px !important;
    bottom: 60px !important;
  }
}

/* Planche 02 - densité et pied de page de la vue téléphone canonique. */
@media (max-width: 600px) {
  body[data-client-theme] #app .mockup[data-page="menu"] .client-page-content {
    width: calc(100% - 20px) !important;
    height: 850px !important;
    min-height: 850px !important;
    margin: 0 10px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-grid {
    gap: 7px !important;
    margin-top: 19px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-card {
    min-height: 216px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .category-image-button {
    width: 100% !important;
    aspect-ratio: 2 / 1 !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-card-actions {
    justify-self: start !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .lot01-menu-votes-cta {
    top: auto !important;
    right: auto !important;
    bottom: 7px !important;
    left: 50% !important;
    width: 222px !important;
    min-width: 222px !important;
    min-height: 30px !important;
    height: 30px !important;
    transform: translateX(-50%) !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-bottom-dock {
    right: 13px !important;
    bottom: 139px !important;
    width: 120px !important;
    height: 30px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .site-legal-footer {
    right: 10px !important;
    bottom: 8px !important;
    left: 10px !important;
    width: auto !important;
    height: auto !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .site-legal-footer > :not(.client-footer-routes) {
    display: none !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-footer-routes {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: 0 !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] .client-footer-routes a {
    grid-column: auto !important;
    flex: 0 0 calc((100% - 8px) / 2) !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 4px 8px !important;
    border: 2px solid var(--pb-lot01-pill-frame) !important;
    border-radius: 999px !important;
    color: #fff !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 43%, rgba(56, 4, 83, .24) 100%),
      linear-gradient(100deg, #9b20ed 0%, #dc27b1 50%, #f3458f 100%) !important;
    box-shadow:
      inset 0 0 0 1px var(--pb-lot01-pill-inner),
      inset 0 3px 4px rgba(255, 255, 255, .24),
      0 5px 0 rgba(58, 10, 91, .96),
      0 9px 16px rgba(23, 4, 32, .28) !important;
    font-family: var(--pb-lot01-font-compact) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
  }
}

/* Ajustement final téléphone des planches 08 à 10 : même densité verticale
   que les vues canoniques, sans masquer d'information ni réduire les cibles. */
@media (max-width: 560px) {
  .lot01-checkout-heading > strong {
    margin: 6px 0 !important;
  }

  .mockup[data-client-lot01-board="09"] .lot01-checkout-heading h1 {
    max-width: 295px !important;
  }

  .lot01-checkout-steps {
    gap: 6px !important;
    margin-bottom: 10px !important;
  }

  .lot01-checkout-steps .pb-lot01-pill {
    min-height: 38px !important;
    height: 38px !important;
  }

  .lot01-cart-stage .lot01-panel:first-child,
  .lot01-cart-stage .lot01-formula-panel {
    padding: 14px !important;
  }

  .lot01-cart-product {
    gap: 8px !important;
  }

  .lot01-cart-product h2 {
    margin: 0 0 5px !important;
  }

  .lot01-cart-product p {
    margin: 2px 0 !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  .lot01-cart-product .lot01-action-row {
    margin-top: 8px !important;
  }

  .lot01-formula-panel > h2 {
    margin-bottom: 4px !important;
  }

  .lot01-formula-panel > p {
    margin: 2px 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .lot01-formula-panel > .lot01-segmented,
  .lot01-formula-choice {
    margin-top: 10px !important;
  }

  .lot01-formula-choice {
    gap: 8px !important;
  }

  .lot01-formula-choice p {
    display: none !important;
  }

  .lot01-allergen-box > strong {
    font-size: 16px !important;
    line-height: 1.1 !important;
  }

  .lot01-allergen-box > p {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .lot01-cart-stage .lot01-allergen-box,
  .lot01-payment-stage .lot01-allergen-box {
    min-height: 196px !important;
  }

  .lot01-cart-stage .lot01-allergen-box label,
  .lot01-payment-stage .lot01-allergen-box label {
    margin-top: 48px !important;
  }

  .lot01-summary {
    min-height: 302px !important;
  }

  .lot01-summary dl div {
    padding: 8px 0 !important;
  }

  .lot01-no-fee {
    padding: 12px !important;
  }

  .lot01-summary .lot01-primary-action {
    margin-top: 12px !important;
  }

  body[data-client-theme] #app .lot01-checkout-shell select {
    min-height: 46px !important;
    padding: 6px 18px !important;
    border: 2px solid rgba(255, 255, 255, .76) !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: linear-gradient(105deg, #7916dc 0%, #c719e5 48%, #f13b91 100%) !important;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -4px 0 rgba(58, 8, 86, .48), 0 7px 8px rgba(47, 13, 62, .28) !important;
    font: 700 14px/1 var(--font-compact, "Barlow Condensed", sans-serif) !important;
    text-align: center !important;
    text-align-last: center !important;
    text-transform: uppercase !important;
    -webkit-text-fill-color: #fff !important;
  }

  body[data-client-theme] #app .lot01-checkout-shell select option {
    color: #2d1735 !important;
    background: #fffdf8 !important;
    -webkit-text-fill-color: #2d1735 !important;
  }
}

/* Planches 08 a 10 — tablette canonique 750 x 1360. La coque commence juste
   sous l'en-tete compact, puis conserve l'ordre vertical des maquettes sans
   transformer la tablette en une longue vue de telephone. */
@media (min-width: 561px) and (max-width: 900px) {
  .lot01-checkout-shell {
    width: calc(100% - 24px) !important;
    min-height: calc(100dvh - 126px) !important;
    margin-top: 9px !important;
    padding: 18px 28px 72px !important;
  }

  .lot01-checkout-heading h1 {
    font-size: 36px !important;
    line-height: 1.02 !important;
  }

  .lot01-checkout-heading p {
    font-size: 11px !important;
  }

  .lot01-checkout-heading > strong {
    margin-top: 3px !important;
    font-size: 12px !important;
  }

  .lot01-checkout-steps {
    margin-bottom: 12px !important;
  }

  .lot01-checkout-steps .pb-lot01-pill span {
    display: inline !important;
  }

  .lot01-checkout-main {
    gap: 12px !important;
  }

  .lot01-panel,
  .lot01-summary,
  .lot01-allergen-box,
  .lot01-recheck-box {
    padding: 12px !important;
  }

  .lot01-panel h2,
  .lot01-summary h2,
  .lot01-allergen-box > strong,
  .lot01-recheck-box > strong {
    margin-bottom: 6px !important;
    font-size: 20px !important;
  }

  .lot01-panel p,
  .lot01-summary p,
  .lot01-allergen-box p,
  .lot01-recheck-box p,
  .lot01-cart-product p {
    margin: 3px 0 !important;
    font-size: 12px !important;
    line-height: 1.24 !important;
  }

  .lot01-cart-stage .lot01-cart-product {
    grid-template-columns: 180px minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .lot01-formula-choice {
    grid-template-columns: 180px minmax(0, 1fr) !important;
    gap: 8px 16px !important;
    margin-top: 10px !important;
  }

  .lot01-cart-product p,
  .lot01-formula-panel > p,
  .lot01-formula-choice p {
    margin: 3px 0 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  .lot01-cart-product .lot01-action-row {
    margin-top: 9px !important;
  }

  .lot01-allergen-box {
    min-height: 154px !important;
  }

  .lot01-allergen-box > strong {
    font-size: 17px !important;
    line-height: 1.1 !important;
  }

  .lot01-allergen-box > p {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .lot01-allergen-box label {
    margin-top: 34px !important;
    font-size: 12px !important;
  }

  .lot01-summary {
    min-height: 0 !important;
  }

  .lot01-summary dl div {
    padding: 6px 0 !important;
  }

  .lot01-summary dt {
    font-size: 10px !important;
  }

  .lot01-summary dd {
    font-size: 13px !important;
  }

  .lot01-no-fee {
    padding: 12px !important;
  }

  .lot01-summary .lot01-primary-action {
    min-height: 50px !important;
    margin-top: 12px !important;
    font-size: 18px !important;
  }

  .lot01-pickup-stage .lot01-panel:first-child {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .lot01-pickup-stage .lot01-wide-pill {
    min-height: 44px !important;
    margin-top: 10px !important;
    font-size: 17px !important;
  }

  .lot01-pickup-stage .lot01-panel label {
    margin-top: 12px !important;
  }

  .lot01-identity-choice {
    gap: 7px !important;
    padding: 8px !important;
  }

  .lot01-identity-choice p {
    min-height: 2.35em !important;
    font-size: 10px !important;
  }

  .lot01-payment-stage .lot01-recheck-box {
    min-height: 100px !important;
  }

  .lot01-payment-stage .lot01-test-warning {
    margin-top: 12px !important;
    padding: 12px !important;
  }

  .lot01-payment-stage .lot01-outcomes button {
    min-height: 36px !important;
    font-size: 11px !important;
  }

  .lot01-mobile-nav {
    bottom: 8px !important;
  }

  .lot01-checkout-legal {
    bottom: 64px !important;
  }

  .mockup[data-client-lot01-board="08"] .client-bottom-dock,
  .mockup[data-client-lot01-board="09"] .client-bottom-dock,
  .mockup[data-client-lot01-board="10"] .client-bottom-dock {
    bottom: 58px !important;
  }
}

/* Planches 08 a 10 — ordinateur canonique 1380 x 970. Les contenus restent
   complets, mais la densite reprend celle des planches plutot que celle des
   formulaires historiques plus hauts. */
@media (min-width: 901px) {
  .lot01-checkout-heading h1 {
    font-size: 46px !important;
  }

  .lot01-checkout-steps {
    margin-bottom: 10px !important;
  }

  .lot01-checkout-main {
    gap: 12px !important;
  }

  .lot01-panel,
  .lot01-summary,
  .lot01-allergen-box,
  .lot01-recheck-box {
    padding: 14px !important;
  }

  .lot01-cart-product h2 {
    margin-bottom: 5px !important;
    font-size: 20px !important;
  }

  .lot01-cart-product p,
  .lot01-formula-panel > p,
  .lot01-formula-choice p {
    margin: 2px 0 !important;
    font-size: 13px !important;
    line-height: 1.18 !important;
  }

  .lot01-cart-product .lot01-action-row {
    margin-top: 8px !important;
  }

  .lot01-action-row .pb-lot01-pill,
  .lot01-identity-choice .pb-lot01-pill {
    min-height: 36px !important;
  }

  .lot01-formula-choice {
    gap: 7px 18px !important;
    margin-top: 8px !important;
  }

  .lot01-allergen-box {
    min-height: 150px !important;
  }

  .lot01-allergen-box > strong {
    font-size: 17px !important;
    line-height: 1.1 !important;
  }

  .lot01-allergen-box > p {
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  .lot01-allergen-box label {
    margin-top: 30px !important;
  }

  .lot01-summary dl div {
    padding: 12px 0 !important;
  }

  .lot01-no-fee {
    padding: 14px !important;
  }

  .lot01-summary .lot01-primary-action {
    min-height: 50px !important;
    margin-top: 12px !important;
  }

  .lot01-pickup-stage .lot01-wide-pill {
    min-height: 44px !important;
    margin-top: 10px !important;
  }

  .lot01-pickup-stage .lot01-panel label {
    margin-top: 10px !important;
  }

  .lot01-identity-choice {
    gap: 6px !important;
    padding: 8px !important;
  }

  .lot01-identity-choice p {
    min-height: 2.25em !important;
  }

  .lot01-payment-stage .lot01-recheck-box {
    min-height: 100px !important;
  }

  .lot01-payment-stage .lot01-test-warning {
    margin-top: 12px !important;
    padding: 12px 16px !important;
  }

  .lot01-payment-stage .lot01-outcomes button {
    min-height: 32px !important;
  }
}

/*
 * Autorite utilisateur posterieure aux planches 08 a 10 : le Retour reste
 * visible sous le logo sur chaque format. Cette garde finale gagne sur le
 * masquage historique plus haut, sans activer la navigation mobile dupliquee.
 */
body[data-client-theme] #app .mockup:is(
  [data-client-lot01-board="08"],
  [data-client-lot01-board="09"],
  [data-client-lot01-board="10"]
) > .client-route-back {
  position: absolute !important;
  z-index: 38 !important;
  display: inline-flex !important;
  inset: auto !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* Les messages de securite conservent un contraste AA en mode Nuit. */
body[data-client-theme="night"] #app .lot01-checkout-shell .lot01-no-fee,
body[data-client-theme="night"] #app .lot01-checkout-shell .lot01-recheck-box,
body[data-client-theme="night"] #app .lot01-checkout-shell .lot01-outcomes button.active {
  color: #fbf6ff !important;
  -webkit-text-fill-color: #fbf6ff !important;
}

body[data-client-theme="night"] #app .lot01-checkout-shell .lot01-test-warning {
  color: #fff3d7 !important;
  -webkit-text-fill-color: #fff3d7 !important;
}

@media (min-width: 901px) {
  body[data-client-theme] #app .mockup:is(
    [data-client-lot01-board="08"],
    [data-client-lot01-board="09"],
    [data-client-lot01-board="10"]
  ) > .client-route-back {
    top: 104px !important;
    left: 24px !important;
    width: 92px !important;
    min-height: 24px !important;
    height: 24px !important;
    padding: 2px 8px !important;
    font-size: 9px !important;
  }
}

@media (min-width: 561px) and (max-width: 900px) {
  body[data-client-theme] #app .mockup:is(
    [data-client-lot01-board="08"],
    [data-client-lot01-board="09"],
    [data-client-lot01-board="10"]
  ) > .client-route-back {
    top: 74px !important;
    left: 12px !important;
    width: 64px !important;
    min-height: 24px !important;
    height: 24px !important;
    padding: 2px 6px !important;
    font-size: 8.5px !important;
  }

  /* Bastien reste au-dessus des deux routes basses, sans les recouvrir. */
  .mockup[data-client-lot01-board="08"] .client-bottom-dock,
  .mockup[data-client-lot01-board="09"] .client-bottom-dock,
  .mockup[data-client-lot01-board="10"] .client-bottom-dock {
    position: fixed !important;
    bottom: 96px !important;
  }

  .mockup[data-client-lot01-board="08"] .lot01-checkout-legal,
  .mockup[data-client-lot01-board="09"] .lot01-checkout-legal,
  .mockup[data-client-lot01-board="10"] .lot01-checkout-legal {
    position: fixed !important;
    bottom: 64px !important;
  }

  .mockup[data-client-lot01-board="08"] .lot01-mobile-nav,
  .mockup[data-client-lot01-board="09"] .lot01-mobile-nav,
  .mockup[data-client-lot01-board="10"] .lot01-mobile-nav {
    position: fixed !important;
    bottom: 8px !important;
  }
}

@media (max-width: 560px) {
  body[data-client-theme] #app .mockup:is(
    [data-client-lot01-board="08"],
    [data-client-lot01-board="09"],
    [data-client-lot01-board="10"]
  ) > .client-route-back {
    top: 74px !important;
    left: 12px !important;
    width: 64px !important;
    min-height: 24px !important;
    height: 24px !important;
    padding: 2px 5px !important;
    font-size: 8px !important;
  }

  .mockup[data-client-lot01-board="08"] .client-bottom-dock,
  .mockup[data-client-lot01-board="09"] .client-bottom-dock,
  .mockup[data-client-lot01-board="10"] .client-bottom-dock {
    bottom: 72px !important;
  }
}

/* ===== SOURCE CONSOLIDÉE: private/site/assets/client-lot01-home-menu-fixes-v1.css ===== */
/*
 * Pizza Baladzo — Lot Client 01 — correctifs P0 Accueil / Menu.
 *
 * Cette feuille est volontairement additive et strictement limitée aux deux
 * pages concernées. Elle doit être chargée après les feuilles Lot 01 existantes.
 * L'accueil ordinateur V10 (remorque entière et actions dans le sable) n'est
 * jamais ciblé ici.
 */

/* Le lien Menu actif reste blanc sur la pilule 3D appliquée par le Lot 01. */
body[data-client-theme] #app .mockup[data-page="menu"] .site-nav-overlay > .nav-button.active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 1px 1px rgba(25, 4, 40, .72) !important;
}

/* Retour Menu : autorité utilisateur « sous le logo, partout ». */
body[data-client-theme] #app .mockup[data-page="menu"] > .client-route-back {
  position: absolute !important;
  /* Les dialogues restent l'autorité interactive : le Retour de fond ne doit
     jamais passer au-dessus de leur calque z-index 60. */
  z-index: 38 !important;
  display: inline-flex !important;
  inset: auto !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

@media (min-width: 1025px) {
  body[data-client-theme] #app .mockup[data-page="menu"] > .client-route-back {
    top: 105px !important;
    left: 24px !important;
    width: 92px !important;
    min-height: 24px !important;
    height: 24px !important;
    padding: 2px 8px !important;
    font-size: 9px !important;
  }

  /* La bannière de sécurité reste visible, mais les six cartes tiennent dans
     le viewport ordinateur canonique sans passer sous le dock Bastien. */
  body[data-client-theme] #app .mockup[data-page="menu"] > .client-page-content .client-grid {
    grid-auto-rows: 250px !important;
    gap: 14px 16px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] > .client-page-content .client-card {
    grid-template-rows: 38px 132px 30px 30px !important;
    min-height: 250px !important;
    height: 250px !important;
    padding: 8px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] > .client-page-content .category-image-button {
    align-self: center !important;
    justify-self: center !important;
    width: 82% !important;
    height: 132px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] > .client-page-content .category-image-button img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: contain !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] > .client-page-content .category-card-classiques small {
    overflow: hidden !important;
    font-size: 11px !important;
    line-height: 1.22 !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] > .client-page-content .client-card-actions button {
    min-height: 30px !important;
    height: 30px !important;
    padding: 4px 12px !important;
    font-size: 9px !important;
  }
}

@media (max-width: 1024px) {
  /* ----------------------------------------------------------------------- */
  /* Accueil tablette / téléphone : commandes toujours entièrement visibles. */
  /* ----------------------------------------------------------------------- */

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] > .client-route-back-home {
    position: absolute !important;
    z-index: 38 !important;
    display: inline-flex !important;
    inset: auto !important;
    top: calc(1.5% + clamp(58px, 13vw, 98px) + 8px) !important;
    left: 2.7% !important;
    align-items: center !important;
    justify-content: center !important;
    width: clamp(58px, 13vw, 98px) !important;
    min-height: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    font-size: clamp(9px, 1.65vw, 12px) !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] > .install-home-button {
    position: absolute !important;
    z-index: 38 !important;
    inset: auto !important;
    top: 11.2% !important;
    right: 5.2% !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
  }

  /* Les libelles d'aide restent lisibles sur le sable sombre des vues Nuit,
     aussi bien sur tablette que sur telephone. */
  body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-action-stack button::after,
  body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button::after,
  body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-professional-bottom::after {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px #000, 0 0 4px #000 !important;
  }

  /* Le Menu mobile/tablette utilise sa navigation basse, jamais au-dessus des cartes. */
  body[data-client-theme] #app .mockup[data-page="menu"] {
    position: relative !important;
    min-height: max(100dvh, 133.333vw) !important;
    height: max(100dvh, 133.333vw) !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] > .client-route-back {
    top: 74px !important;
    left: 12px !important;
    width: 64px !important;
    min-height: 24px !important;
    height: 24px !important;
    padding: 2px 6px !important;
    font-size: 8.5px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] > .site-nav-overlay {
    display: none !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] > .client-page-content {
    position: absolute !important;
    inset: auto 2.8% auto 2.8% !important;
    top: 100px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 78% !important;
    margin: 0 !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] > .site-legal-footer {
    position: absolute !important;
    z-index: 30 !important;
    right: 2.8% !important;
    bottom: 12px !important;
    left: 2.8% !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /*
   * Le gabarit compact conserve des separateurs texte entre les liens. En
   * grille, ces noeuds anonymes occupaient une cellule et rejetaient chaque
   * pilule sur une nouvelle ligne, jusque par-dessus les cartes. Un flex sans
   * espacement horizontal garde ces separateurs a largeur nulle.
   */
  body[data-client-theme] #app .mockup[data-page="menu"] > .site-legal-footer > .client-footer-routes {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px 0 !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] > .site-legal-footer > .client-footer-routes > a {
    display: inline-flex !important;
    flex: 0 0 33.333333% !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    width: 33.333333% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    border: 2px solid var(--pb-lot01-pill-frame) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 43%, rgba(56, 4, 83, .24) 100%),
      linear-gradient(100deg, #9b20ed 0%, #dc27b1 50%, #f3458f 100%) !important;
    color: #fff !important;
    box-shadow:
      inset 0 0 0 1px var(--pb-lot01-pill-inner),
      inset 0 3px 4px rgba(255, 255, 255, .24),
      0 5px 0 rgba(58, 10, 91, .96),
      0 9px 16px rgba(23, 4, 32, .28) !important;
    font-family: var(--pb-lot01-font-compact) !important;
    font-size: clamp(9px, 1.35vw, 11px) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: 0 1px 1px rgba(32, 3, 42, .7) !important;
    text-transform: uppercase !important;
  }

  /* Le pied Menu reprend uniquement les six routes de la maquette Lot 01. */
  body[data-client-theme] #app .mockup[data-page="menu"] > .site-legal-footer > :not(.client-footer-routes),
  body[data-client-theme] #app .mockup[data-page="menu"] > .site-legal-footer > .client-footer-routes > a:nth-of-type(4),
  body[data-client-theme] #app .mockup[data-page="menu"] > .site-legal-footer > .client-footer-routes > a:nth-of-type(8),
  body[data-client-theme] #app .mockup[data-page="menu"] > .site-legal-footer > .client-footer-routes > a:nth-of-type(9) {
    display: none !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] > .client-bottom-dock {
    position: absolute !important;
    right: 2.8% !important;
    bottom: 12% !important;
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  /*
   * Densite tablette de la planche Menu : les images restent centrees a leur
   * largeur canonique et l'action partage la derniere ligne avec le resume.
   * Les trois rangees tiennent ainsi avant Bastien et le pied de navigation.
   */
  body[data-client-theme] #app .mockup[data-page="menu"] > .client-page-content .client-grid {
    grid-auto-rows: 200px !important;
    margin-top: 18px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] > .client-page-content .client-card {
    min-height: 200px !important;
    height: 200px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] > .client-page-content .category-image-button {
    justify-self: center !important;
    width: min(66%, 210px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] > .client-page-content .client-card > small,
  body[data-client-theme] #app .mockup[data-page="menu"] > .client-page-content .client-card-body > small {
    width: 58% !important;
    max-width: 58% !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] > .client-page-content .client-card-actions {
    position: absolute !important;
    z-index: 4 !important;
    right: 9px !important;
    bottom: 9px !important;
  }

  /* La vue Nuit tablette reprend le cadrage canonique de la remorque entière. */
  body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] > img:first-child {
    content: url("/client/assets/accueil-fond-client-nuit-phone-v9.png") !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: translate(51px, 56px) scale(1.19) !important;
    transform-origin: center !important;
  }
}

@media (max-width: 600px) {
  /* Accueil téléphone : restauration du cadrage V9 puis remontée des blocs. */
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] > img:first-child {
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    object-fit: fill !important;
    object-position: center top !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 0 70%, rgba(0, 0, 0, .92) 78%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, #000 0 70%, rgba(0, 0, 0, .92) 78%, transparent 100%) !important;
    transform: none !important;
  }

  body[data-client-theme="day"] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] > img:first-child {
    content: url("/client/assets/accueil-fond-client-jour-phone-v9.png") !important;
    top: -57px !important;
    height: 92.5% !important;
  }

  body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] > img:first-child {
    content: url("/client/assets/accueil-fond-client-nuit-phone-v9.png") !important;
    top: -60px !important;
    height: 85.8% !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] > .client-route-back-home {
    top: calc(1.5% + min(14.5vw, 56px) + 7px) !important;
    left: 3.7% !important;
    width: min(14.5vw, 56px) !important;
    min-height: 26px !important;
    height: 26px !important;
    padding: 3px 5px !important;
    font-size: 8px !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] > .install-home-button {
    top: 9.4% !important;
    right: 5.3% !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser,
  body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser {
    top: 41.15% !important;
  }

  /* L'accroche doit toujours se replier dans sa colonne, y compris pendant le
     chargement de la typographie canonique. Elle ne passe jamais sous Bastien. */
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser small span {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-action-stack {
    top: 55.75% !important;
  }

  body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-action-stack button::after,
  body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button::after,
  body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-professional-bottom::after {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px #000, 0 0 4px #000 !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay {
    top: 64.1% !important;
  }

  /* Menu téléphone : hauteur stable et navigation 2 × 3 sous le panneau. */
  body[data-client-theme] #app .mockup[data-page="menu"] {
    min-height: max(100dvh, 1080px) !important;
    height: max(100dvh, 1080px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] > .client-page-content {
    inset: 100px 10px auto 10px !important;
    width: auto !important;
    height: 837px !important;
    min-height: 837px !important;
    margin: 0 !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] > .client-bottom-dock {
    right: 13px !important;
    bottom: 150px !important;
    width: 120px !important;
    height: 30px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] > .site-legal-footer {
    right: 10px !important;
    bottom: 12px !important;
    left: 10px !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] > .site-legal-footer > .client-footer-routes {
    gap: 8px 0 !important;
  }

  body[data-client-theme] #app .mockup[data-page="menu"] > .site-legal-footer > .client-footer-routes > a {
    flex-basis: 50% !important;
    width: 50% !important;
    min-height: 34px !important;
    height: 34px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-client-theme] #app .mockup[data-page="accueil"] *,
  body[data-client-theme] #app .mockup[data-page="menu"] * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ========================================================================== */
/* Recontrole visuel Lot 01 : corrections ciblees des planches 02 a 07.       */
/* Ces gardes sont additives et ne changent ni les donnees ni les parcours.   */
/* ========================================================================== */

/* Menu tablette : la description reste entiere sans agrandir la carte. */
@media (min-width: 601px) and (max-width: 1024px) {
  body[data-client-theme] #app .mockup[data-page="menu"] > .client-page-content .category-card-classiques small {
    display: -webkit-box !important;
    min-height: 3.45em !important;
    max-height: 3.45em !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
  }
}

/* Fiches produit tablette : Bastien suit les trois routes, sans recouvrir le
   retour de categorie ni le pied legal. */
@media (min-width: 601px) and (max-width: 1050px) {
  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .modal {
    margin-bottom: 118px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-facts {
    height: auto !important;
    min-height: 439px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-bastien {
    top: auto !important;
    right: 18px !important;
    bottom: 10px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-legal {
    min-height: 34px !important;
    margin-top: 14px !important;
    padding-right: 168px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-route-nav {
    top: calc(100% + 14px) !important;
  }
}

/* Accueil ordinateur : l'autorite utilisateur la plus recente impose des
   pilules allongees egalement dans la navigation haute. */
@media (min-width: 1025px) {
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay {
    left: 13.8% !important;
    right: 22.5% !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button {
    min-width: 0 !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 5px 10px !important;
    border: 2px solid var(--pb-lot01-pill-frame) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 43%, rgba(56, 4, 83, .24) 100%),
      linear-gradient(100deg, #9b20ed 0%, #dc27b1 50%, #f3458f 100%) !important;
    color: #fff !important;
    box-shadow:
      inset 0 0 0 1px var(--pb-lot01-pill-inner),
      inset 0 3px 4px rgba(255, 255, 255, .24),
      0 5px 0 rgba(58, 10, 91, .96),
      0 9px 16px rgba(23, 4, 32, .28) !important;
    font-size: clamp(9px, .78vw, 12px) !important;
    line-height: 1 !important;
    text-shadow: 0 1px 1px rgba(32, 3, 42, .72) !important;
    -webkit-text-fill-color: #fff !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button.active {
    color: #fff !important;
    box-shadow:
      inset 0 0 0 2px rgba(255, 255, 255, .72),
      inset 0 3px 4px rgba(255, 255, 255, .3),
      0 5px 0 rgba(58, 10, 91, .96),
      0 9px 16px rgba(23, 4, 32, .28) !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser strong {
    font-size: clamp(29px, 2.15vw, 35px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser small {
    font-size: clamp(17px, 1.32vw, 21px) !important;
    line-height: 1.48 !important;
  }
}

/* Accueil telephone/tablette : les deux phrases editoriales se replient avant
   le bord de la photo et restent lisibles sans voile ni flou. */
@media (max-width: 1024px) {
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser small,
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser small span {
    display: block !important;
    max-width: 92% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser strong {
    font-size: clamp(32px, 4.7vw, 38px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser small {
    max-width: 72% !important;
    font-size: clamp(16px, 2.4vw, 19px) !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 600px) {
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser small {
    font-size: clamp(14px, 3.35vw, 17px) !important;
    line-height: 1.22 !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser small span {
    max-width: 86% !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
}

/* Composition libre : densite V3. Les contenus restent fonctionnels et les
   formulations prudentes remplacent seulement les valeurs factuelles non
   confirmees des anciennes images de reference. */
body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-base-card,
body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-card {
  overflow: hidden !important;
}

body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-main {
  min-width: 0 !important;
}

body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-base-card > img,
body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-card > img {
  object-fit: cover !important;
  object-position: center !important;
}

body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-base-card[data-pb-base-id="sauce-tomate"] > img {
  object-position: 62% center !important;
  transform: scale(1.16) !important;
}

body[data-client-theme] #app .mockup[data-page="personnalisables"] :is(
  .lot01-ingredient-card[data-pb-ingredient-id="jambon"],
  .lot01-ingredient-card[data-pb-ingredient-id="champignons"],
  .lot01-ingredient-card[data-pb-ingredient-id="mozzarella"],
  .lot01-ingredient-card[data-pb-ingredient-id="chevre"]
) > img {
  transform: scale(1.15) !important;
}

@media (min-width: 1051px) {
  body[data-client-theme] #app .mockup[data-page="personnalisables"] > .prelaunch-banner {
    top: 11.7% !important;
    left: 37% !important;
    width: min(600px, 42%) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-page {
    top: 10.5% !important;
    bottom: 2% !important;
    min-height: 0 !important;
    padding: 10px 18px 14px !important;
    overflow: hidden !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-heading {
    grid-template-columns: 120px minmax(0, 1fr) !important;
    gap: 14px !important;
    min-height: 78px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-main {
    padding-top: 58px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-return-menu {
    width: 116px !important;
    min-height: 30px !important;
    font-size: 10px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-heading h1 {
    font-size: clamp(38px, 3.35vw, 48px) !important;
    line-height: .92 !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-heading > div > p:last-child {
    font-size: 12px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-global-quantity-alert {
    margin-top: 2px !important;
    margin-bottom: 7px !important;
    padding: 6px 10px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-steps {
    gap: 8px !important;
    max-width: 700px !important;
    margin-bottom: 8px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-steps li {
    min-height: 30px !important;
    padding: 3px 8px !important;
    font-size: 12px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 342px !important;
    gap: 18px !important;
    align-items: stretch !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-section {
    margin-bottom: 7px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-section h2 {
    margin-bottom: 5px !important;
    font-size: 16px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-section > p {
    margin-bottom: 5px !important;
    font-size: 11px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-base-card {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    min-height: 60px !important;
    padding: 4px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-base-card > img {
    width: 76px !important;
    height: 52px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-base-card-copy {
    gap: 1px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-base-card-copy strong {
    font-size: 13px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-base-card-copy small {
    font-size: 8px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-base-card .client-base-choice {
    min-height: 24px !important;
    padding: 2px 7px !important;
    font-size: 9px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-global-quantity {
    grid-template-columns: minmax(0, 1fr) 160px !important;
    padding: 6px 10px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-global-quantity .lot01-segmented-control button {
    min-height: 24px !important;
    padding: 2px 6px !important;
    font-size: 9px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-intro {
    grid-template-columns: 210px minmax(0, 1fr) !important;
    gap: 9px !important;
    margin-bottom: 5px !important;
    padding: 5px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-collage,
  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-collage img {
    height: 60px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-intro :is(strong, small) {
    font-size: 9px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-open-ingredients {
    min-height: 24px !important;
    padding: 2px 8px !important;
    font-size: 9px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-carousel-help {
    padding: 2px 8px !important;
    font-size: 9px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-carousel-frame {
    padding: 0 28px !important;
    border-radius: 14px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-carousel {
    grid-auto-columns: calc((100% - 24px) / 4) !important;
    gap: 8px !important;
    padding: 6px 0 !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-card {
    grid-template-columns: 68px minmax(0, 1fr) !important;
    min-height: 112px !important;
    padding: 5px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-card > img {
    width: 68px !important;
    height: 100px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-card-copy {
    gap: 2px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-card-copy strong {
    font-size: 11px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-card-copy small {
    font-size: 7px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-card button {
    min-height: 24px !important;
    padding: 2px 6px !important;
    font-size: 9px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-summary {
    position: static !important;
    width: auto !important;
    min-height: 0 !important;
    gap: 5px !important;
    padding: 10px !important;
    overflow: hidden !important;
    border-radius: 22px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-summary > h2 {
    font-size: 24px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-summary dl > div {
    padding: 5px 0 !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-summary :is(dt, .lot01-eyebrow, .lot01-validation-hint, .lot01-consent-reset-note) {
    font-size: 9px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-summary dd {
    margin-top: 2px !important;
    font-size: 12px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-total-preview,
  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-menu-choice,
  body[data-client-theme] #app .mockup[data-page="personnalisables"] :is(.lot01-cross-contamination, .lot01-allergen-consent) {
    padding: 8px !important;
    border-radius: 12px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-total-preview strong {
    font-size: 17px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-menu-choice h3 {
    font-size: 14px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-menu-choice .lot01-segmented-control {
    margin: 6px 0 8px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-menu-choice button,
  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-validate-composition {
    min-height: 32px !important;
    font-size: 11px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] :is(.lot01-cross-contamination p, .lot01-allergen-consent strong, .lot01-allergen-consent small) {
    font-size: 9px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-allergen-consent {
    grid-template-columns: 26px minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-allergen-consent input {
    width: 24px !important;
    height: 24px !important;
  }
}

@media (max-width: 1050px) {
  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-page {
    padding: 10px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-heading {
    min-height: 76px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-global-quantity-alert {
    margin: 4px 0 7px !important;
    padding: 7px 10px !important;
    font-size: 12px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-steps {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    overflow: hidden !important;
    scrollbar-width: none !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-steps li {
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 3px 5px !important;
    font-size: 11px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-section {
    margin-bottom: 8px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-section h2 {
    margin-bottom: 5px !important;
    font-size: 15px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-section > p {
    margin-bottom: 5px !important;
    font-size: 11px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-base-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-base-card {
    grid-template-columns: 70px minmax(0, 1fr) !important;
    min-height: 62px !important;
    padding: 4px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-base-card > img {
    width: 70px !important;
    height: 54px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-base-card-copy {
    gap: 1px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-base-card-copy strong {
    font-size: 12px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-base-card-copy small {
    font-size: 7px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-base-card .client-base-choice {
    min-height: 24px !important;
    padding: 2px 5px !important;
    font-size: 8px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-global-quantity {
    grid-template-columns: minmax(0, 1fr) 150px !important;
    gap: 8px !important;
    padding: 6px 9px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-global-quantity .lot01-segmented-control button {
    min-height: 24px !important;
    padding: 2px 5px !important;
    font-size: 9px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-intro {
    grid-template-columns: 190px minmax(0, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 5px !important;
    padding: 6px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-collage,
  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-collage img {
    height: 60px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-intro :is(strong, small) {
    font-size: 9px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-open-ingredients {
    min-height: 24px !important;
    padding: 2px 7px !important;
    font-size: 9px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-carousel-help {
    padding: 2px 7px !important;
    font-size: 8px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-card {
    min-height: 116px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-card > img {
    height: 104px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-summary {
    gap: 7px !important;
    padding: 10px !important;
    border-radius: 18px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-summary > h2 {
    font-size: 22px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-summary dl {
    gap: 6px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-summary dl > div {
    padding: 7px 5px !important;
    border-radius: 10px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-summary :is(dt, .lot01-eyebrow, .lot01-validation-hint, .lot01-consent-reset-note) {
    font-size: 8px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-summary dd {
    margin-top: 2px !important;
    font-size: 11px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-menu-choice,
  body[data-client-theme] #app .mockup[data-page="personnalisables"] :is(.lot01-cross-contamination, .lot01-allergen-consent) {
    padding: 8px !important;
    border-radius: 11px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-menu-choice h3 {
    font-size: 13px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-menu-choice .lot01-segmented-control {
    margin: 5px 0 7px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-menu-choice button,
  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-validate-composition {
    min-height: 30px !important;
    font-size: 10px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] :is(.lot01-cross-contamination p, .lot01-allergen-consent strong, .lot01-allergen-consent small) {
    font-size: 8px !important;
  }

  body[data-client-theme="night"] #app .mockup[data-page="personnalisables"] .lot01-composition-summary dl > div {
    color: #fff3ff !important;
    background: #31163f !important;
  }

  body[data-client-theme="night"] #app .mockup[data-page="personnalisables"] .lot01-composition-summary :is(dt, dd) {
    color: #fff3ff !important;
  }
}

@media (min-width: 601px) and (max-width: 1050px) {
  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-page {
    margin: 94px 14px 92px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-heading {
    grid-template-columns: 110px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-return-menu {
    width: 106px !important;
    min-height: 28px !important;
    font-size: 9px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-heading h1 {
    font-size: clamp(34px, 5.5vw, 42px) !important;
    line-height: .94 !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-heading > div > p:last-child {
    font-size: 10px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-carousel {
    grid-auto-columns: calc((100% - 16px) / 3) !important;
    gap: 8px !important;
    padding: 5px 0 !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-card {
    grid-template-columns: 68px minmax(0, 1fr) !important;
    padding: 5px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-card > img {
    width: 68px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-mobile-nav {
    gap: 10px !important;
    margin-top: 12px !important;
  }
}

@media (max-width: 600px) {
  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-page {
    margin: 76px 8px 78px !important;
    padding: 8px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-heading {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 7px !important;
    min-height: 72px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-return-menu {
    width: 78px !important;
    min-height: 27px !important;
    font-size: 8px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-heading h1 {
    font-size: clamp(29px, 7.2vw, 36px) !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-heading > div > p:last-child {
    margin-top: 2px !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-global-quantity-alert {
    padding: 6px 8px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-steps {
    gap: 5px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-steps li {
    min-height: 27px !important;
    padding: 2px 3px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-steps li::after {
    font-size: 9px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-section h2 {
    font-size: 13px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-section h2 small {
    margin-left: 5px !important;
    font-size: 7px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-base-card {
    grid-template-columns: 62px minmax(0, 1fr) !important;
    min-height: 56px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-base-card > img {
    width: 62px !important;
    height: 48px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-base-card-copy strong {
    font-size: 10px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-global-quantity {
    grid-template-columns: minmax(0, 1fr) 120px !important;
    padding: 5px 7px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-global-quantity :is(h2, p) {
    margin: 0 !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-global-quantity p {
    font-size: 8px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-intro {
    grid-template-columns: 126px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 5px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-collage,
  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-collage img {
    height: 54px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-intro :is(strong, small) {
    font-size: 7px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-open-ingredients {
    min-height: 21px !important;
    font-size: 7px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-carousel-frame {
    padding: 0 30px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-card {
    grid-template-columns: 132px minmax(0, 1fr) !important;
    min-height: 164px !important;
    padding: 6px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-card > img {
    width: 132px !important;
    height: 152px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-card-copy strong {
    font-size: 12px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-card-copy small {
    font-size: 7px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-ingredient-card button {
    min-height: 28px !important;
    font-size: 9px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-summary {
    gap: 6px !important;
    padding: 8px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-summary > h2 {
    font-size: 20px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-summary dl {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-summary dl > div {
    padding: 6px 3px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-menu-choice,
  body[data-client-theme] #app .mockup[data-page="personnalisables"] :is(.lot01-cross-contamination, .lot01-allergen-consent) {
    padding: 7px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-menu-choice h3 {
    font-size: 12px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-menu-choice :is(p, small),
  body[data-client-theme] #app .mockup[data-page="personnalisables"] :is(.lot01-cross-contamination p, .lot01-allergen-consent strong, .lot01-allergen-consent small) {
    font-size: 7px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-allergen-consent {
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-allergen-consent input {
    width: 22px !important;
    height: 22px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-mobile-nav {
    gap: 8px !important;
    margin-top: 8px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-mobile-nav button {
    min-height: 32px !important;
    font-size: 9px !important;
  }
}

/* ========================================================================== */
/* CONTROLE INDEPENDANT V8 : CORRECTIONS CIBLEES                               */
/* ========================================================================== */

/* La fiche tablette conserve le retour sous le logo, dans l'interstice libre,
   sans recouvrir l'intitule de la fiche. Le cartouche factuel et le prix
   restent sur la meme ligne afin de retrouver la densite de la maquette. */
@media (min-width: 601px) and (max-width: 1050px) {
  body[data-client-theme="day"] .modal-backdrop[data-product-sheet="lot01"] {
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent 101px,
      rgba(255, 253, 248, .98) 101px,
      rgba(255, 253, 248, .98) 100%
    ) !important;
  }

  body[data-client-theme="night"] .modal-backdrop[data-product-sheet="lot01"] {
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent 101px,
      rgba(12, 5, 20, .99) 101px,
      rgba(12, 5, 20, .99) 100%
    ) !important;
  }

  body[data-client-theme] .modal-backdrop.open[data-product-sheet="lot01"] .modal-head {
    top: 72px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-heading {
    margin-bottom: 0 !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-facts {
    height: 439px !important;
    min-height: 439px !important;
    max-height: 439px !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    overflow: visible !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-facts-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-price {
    align-self: center !important;
    justify-self: end !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-route-nav {
    top: calc(100% + 8px) !important;
    gap: 6px !important;
  }

  body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-route-nav a {
    min-height: 34px !important;
    padding: 4px 7px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-page {
    padding-bottom: 6px !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-mobile-nav {
    margin-top: 4px !important;
  }
}

/* Le resume garde les allergenes cumules dans les petits formats. Cette
   information de securite ne doit pas disparaitre pour gagner de la place. */
@media (max-width: 1050px) {
  body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-summary dl > div:nth-child(4) {
    display: block !important;
    grid-column: 1 / -1 !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] > .site-legal-footer .client-footer-routes {
    box-sizing: border-box !important;
    padding-right: 158px !important;
  }
}

@media (max-width: 600px) {
  body[data-client-theme] #app .mockup[data-page="personnalisables"] > .site-legal-footer .client-footer-routes {
    padding-right: 138px !important;
  }
}

/* Contraste Nuit : le carrousel, ses instructions et les actions bloquees
   restent lisibles sans changer la palette violet/rose validee. */
body[data-client-theme="night"] #app .mockup[data-page="personnalisables"] .lot01-carousel-help,
body[data-client-theme="night"] #app .mockup[data-page="personnalisables"] .lot01-carousel-footnote {
  color: #f8e8ff !important;
}

body[data-client-theme="night"] #app .mockup[data-page="personnalisables"] .lot01-carousel-frame {
  border-color: rgba(238, 83, 203, .72) !important;
  background: #2b1237 !important;
}

body[data-client-theme="night"] #app .mockup[data-page="personnalisables"] :is(button:disabled, button[aria-disabled="true"]) {
  opacity: .88 !important;
  color: #f5e9f8 !important;
  background: linear-gradient(180deg, #735678, #513757) !important;
  -webkit-text-fill-color: #f5e9f8 !important;
}

body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-action-stack small {
  color: #f7e9ff !important;
  text-shadow: 0 1px 2px rgba(15, 3, 23, .9) !important;
}

/* CONTROLE INDEPENDANT V9 : les phrases de l'accueil téléphone restent dans
   la photo, même lorsque la police compacte est rendue légèrement plus large. */
@media (max-width: 600px) {
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser small,
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser small span {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
}

/* Les fiches ordinateur couvrent entièrement le contenu situé derrière la
   modale. Le statut de thème partiellement masqué est retiré pendant la fiche :
   les trois boutons conservent leur état actif et leur nom accessible. */
@media (min-width: 1051px) {
  body[data-client-theme="day"] .modal-backdrop[data-product-sheet="lot01"] {
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent 112px,
      #fffdf8 112px,
      #fffdf8 100%
    ) !important;
  }

  body[data-client-theme="night"] .modal-backdrop[data-product-sheet="lot01"] {
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent 112px,
      #0c0514 112px,
      #0c0514 100%
    ) !important;
  }

  body.modal-open[data-client-theme] #app .theme-current-status {
    display: none !important;
  }
}

/* Composition : Bastien reste disponible dans le viewport ordinateur/tablette.
   Sur telephone le dock reprend le flux, apres le pied de page, afin de ne
   jamais masquer ses liens. Aucun autre composant ni espacement n'est change. */
@media (min-width: 601px) {
  body[data-client-theme] #app .mockup[data-page="personnalisables"] > .client-bottom-dock {
    position: fixed !important;
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
    width: clamp(130px, 10.8vw, 150px) !important;
    margin: 0 !important;
    z-index: 68 !important;
  }
}

@media (min-width: 601px) and (max-width: 1050px) {
  body[data-client-theme] #app .mockup[data-page="personnalisables"] > .client-bottom-dock {
    bottom: max(72px, calc(env(safe-area-inset-bottom) + 18px)) !important;
  }
}

@media (max-width: 600px) {
  body[data-client-theme] #app .mockup[data-page="personnalisables"] > .client-bottom-dock {
    position: relative !important;
    inset: auto !important;
    justify-content: center !important;
    width: min(220px, calc(100% - 32px)) !important;
    margin: 12px auto max(16px, env(safe-area-inset-bottom)) !important;
    z-index: 25 !important;
  }

  body[data-client-theme] #app .mockup[data-page="personnalisables"] > .site-legal-footer .client-footer-routes {
    padding-right: 0 !important;
  }
}

/* ACCUEIL CLIENT — CORRECTIONS CIBLÉES 2026-08-18
   Cette dernière couche restaure uniquement les écarts mesurés face aux
   références V10 ordinateur et V9 téléphone. Elle ne modifie ni le décor,
   ni la composition tablette, ni le cycle de visite temporaire. */
@media (min-width: 1025px) {
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] > .install-home-button {
    position: absolute !important;
    inset: auto !important;
    top: calc(9.1% + 50px) !important;
    right: 1.5% !important;
    left: auto !important;
    width: 10.1% !important;
    max-width: 146px !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    transform: none !important;
    justify-content: center !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .quick-actions-overlay .pb-client-icon {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    stroke: currentColor !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-quality-teaser {
    width: 31% !important;
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  /* Sur tablette, Installer reste à douze pixels sous Compte/Panier. */
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] > .install-home-button {
    top: calc(7.3% + 54px) !important;
  }
}

@media (max-width: 400px) {
  /* Douze pixels séparent la rangée Compte/Panier du bouton Installer aux
     largeurs compactes de référence (390 px et 360 px). */
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] > .install-home-button {
    top: calc(6% + 54px) !important;
  }

  /* Le titre d'action commence après la dernière ligne éditoriale. Les blocs
     suivants gardent leur rythme vertical et restent au-dessus du dock. */
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-action-stack {
    top: 58.8% !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay {
    top: 68.05% !important;
  }

  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .home-action-stack button::after,
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .site-nav-overlay .nav-button::after,
  body[data-client-theme] #app .mockup[data-page="accueil"][data-client-fidelity="v9"] .client-professional-bottom::after {
    font-size: clamp(11px, 3vw, 13px) !important;
    line-height: 1.15 !important;
  }
}

/*
 * ACCUEIL CLIENT — CORRECTION VISUELLE 2026-08-20
 * Le décor photographique canonique n'est pas disponible dans ce lot.
 * Cette couche ne le remplace pas : elle corrige uniquement les composants
 * DOM indépendants du fond, à partir des références réellement vérifiées.
 */
body[data-client-theme] #app
  .mockup[data-page="accueil"][data-client-fidelity="v9"]
  .theme-mode-switch {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 999px !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: 0 5px 12px rgba(18, 0, 28, .28) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-client-theme-mode="auto"] #app
  .mockup[data-page="accueil"][data-client-fidelity="v9"]
  .theme-mode-switch {
  background-image: url("/client/_assets/client-theme-selector-auto-reference-v1.png") !important;
}

body[data-client-theme-mode="day"] #app
  .mockup[data-page="accueil"][data-client-fidelity="v9"]
  .theme-mode-switch {
  background-image: url("/client/_assets/client-theme-selector-day-reference-v1.png") !important;
}

body[data-client-theme-mode="night"] #app
  .mockup[data-page="accueil"][data-client-fidelity="v9"]
  .theme-mode-switch {
  background-image: url("/client/_assets/client-theme-selector-night-reference-v1.png") !important;
}

body[data-client-theme] #app
  .mockup[data-page="accueil"][data-client-fidelity="v9"]
  .theme-mode-switch > button,
body[data-client-theme] #app
  .mockup[data-page="accueil"][data-client-fidelity="v9"]
  .theme-mode-switch > button.active {
  flex: 1 1 33.333% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  transform: none !important;
}

body[data-client-theme] #app
  .mockup[data-page="accueil"][data-client-fidelity="v9"]
  .theme-mode-switch > button:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: -4px !important;
  box-shadow: inset 0 0 0 2px rgba(79, 8, 104, .82) !important;
}

body[data-client-theme] #app
  .mockup[data-page="accueil"][data-client-fidelity="v9"]
  .theme-mode-switch > .theme-current-status {
  position: absolute !important;
  display: block !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

body[data-client-theme] #app
  .mockup[data-page="accueil"][data-client-fidelity="v9"]
  .home-action-stack button::after,
body[data-client-theme] #app
  .mockup[data-page="accueil"][data-client-fidelity="v9"]
  .site-nav-overlay .nav-button::after,
body[data-client-theme] #app
  .mockup[data-page="accueil"][data-client-fidelity="v9"]
  .client-professional-bottom::after {
  content: none !important;
  display: none !important;
}

@media (min-width: 1025px) {
  body:has(#app .mockup[data-page="accueil"][data-client-fidelity="v9"]) {
    min-height: 100dvh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  body[data-client-theme] #app:has(.mockup[data-page="accueil"][data-client-fidelity="v9"]),
  body[data-client-theme] #app
    .mockup[data-page="accueil"][data-client-fidelity="v9"] {
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
  }

  body[data-client-theme] #app
    .mockup[data-page="accueil"][data-client-fidelity="v9"] > img:first-child {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  body[data-client-theme] #app
    .mockup[data-page="accueil"][data-client-fidelity="v9"]
    .site-nav-overlay {
    left: 27.6% !important;
    right: 22.7% !important;
    top: 5.2% !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: clamp(7px, .75vw, 12px) !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-client-theme] #app
    .mockup[data-page="accueil"][data-client-fidelity="v9"]
    .site-nav-overlay .nav-button,
  body[data-client-theme="day"] #app
    .mockup[data-page="accueil"][data-client-fidelity="v9"]
    .site-nav-overlay .nav-button {
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 5px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #07060b !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
    font-size: clamp(10px, 1.04vw, 16px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .68) !important;
    transform: none !important;
    filter: none !important;
  }

  body[data-client-theme="night"] #app
    .mockup[data-page="accueil"][data-client-fidelity="v9"]
    .site-nav-overlay .nav-button {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .86) !important;
  }

  body[data-client-theme] #app
    .mockup[data-page="accueil"][data-client-fidelity="v9"]
    .site-nav-overlay .nav-button.active {
    color: #d23cff !important;
    -webkit-text-fill-color: currentColor !important;
    background: transparent !important;
    box-shadow: inset 0 -3px 0 #d23cff !important;
  }

  body[data-client-theme] #app
    .mockup[data-page="accueil"][data-client-fidelity="v9"]
    .theme-mode-switch {
    top: 9.1% !important;
    right: 1.5% !important;
    width: 21.7% !important;
    min-height: 40px !important;
    height: 40px !important;
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  body:has(#app .mockup[data-page="accueil"][data-client-fidelity="v9"]) > .pb-cookie-settings {
    left: auto !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: calc(env(safe-area-inset-bottom) + 66px) !important;
  }

  body[data-client-theme] #app
    .mockup[data-page="accueil"][data-client-fidelity="v9"]
    .theme-mode-switch {
    min-height: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 600px) {
  body:has(#app .mockup[data-page="accueil"][data-client-fidelity="v9"]) > .pb-cookie-settings {
    left: auto !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: calc(env(safe-area-inset-bottom) + 63px) !important;
  }

  body[data-client-theme] #app
    .mockup[data-page="accueil"][data-client-fidelity="v9"]
    .theme-mode-switch {
    min-height: 40px !important;
    height: 40px !important;
  }
}

@media (forced-colors: active) {
  body[data-client-theme] #app
    .mockup[data-page="accueil"][data-client-fidelity="v9"]
    .theme-mode-switch {
    border: 2px solid ButtonText !important;
    background: Canvas !important;
    box-shadow: none !important;
  }

  body[data-client-theme] #app
    .mockup[data-page="accueil"][data-client-fidelity="v9"]
    .theme-mode-switch > button,
  body[data-client-theme] #app
    .mockup[data-page="accueil"][data-client-fidelity="v9"]
    .theme-mode-switch > button.active {
    color: ButtonText !important;
    -webkit-text-fill-color: ButtonText !important;
    font-size: 14px !important;
  }

  body[data-client-theme] #app
    .mockup[data-page="accueil"][data-client-fidelity="v9"]
    .theme-mode-switch > button.active {
    color: HighlightText !important;
    -webkit-text-fill-color: HighlightText !important;
    background: Highlight !important;
  }
}

/* ===== SOURCE CONSOLIDÉE: private/site/assets/client-personnalisables-reference-v1.css ===== */
/*
 * Pizza Baladzo — rapprochement visuel de la planche 07.
 *
 * Cette feuille est volontairement additive, chargée après final-shell et
 * strictement bornée à la route Pizzas personnalisables. Elle ne change ni
 * l'état métier (aucune base présélectionnée), ni les contrôles, ni les assets.
 */

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]{
  --pb-personnalisables-font:var(--pb-lot01-font-interface,var(--font-interface,"Source Sans 3",Arial,sans-serif));
  --pb-personnalisables-ink:#2d1735;
  --pb-personnalisables-muted:#765f7b;
  --pb-personnalisables-border:rgba(198,71,188,.52);
  --pb-personnalisables-panel:#fffaf6;
  overflow-x:clip !important;
  font-family:var(--pb-personnalisables-font) !important;
}

/* Maquettes validées du Composeur — libellés responsifs et aides strictement utiles. */
html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-title-compact{
  display:none !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot02-assignment-alert[data-state="assigned"],
html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-base-carousel-help{
  display:none !important;
}

@media(max-width:600px){
  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-title-wide{
    display:none !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-title-compact{
    display:inline !important;
  }
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"] *,
html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"] *::before,
html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"] *::after{
  box-sizing:border-box;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(
    .lot01-composition-page,
    .lot01-composition-layout,
    .lot01-composition-main,
    .custom-builder-controls,
    .lot01-composition-section,
    .lot01-composition-summary,
    .lot02-dough-grid,
    .lot02-dough-card,
    .lot02-dough-copy,
    .lot01-base-carousel-frame,
    .lot01-base-grid,
    .lot01-base-card,
    .lot01-base-card-copy,
    .lot01-ingredient-carousel,
    .lot01-ingredient-card,
    .lot01-ingredient-card-copy
  ){
  min-width:0 !important;
  max-width:100%;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-page{
  width:min(calc(100% - 32px),1450px) !important;
  margin-inline:auto !important;
  padding:18px 20px 22px !important;
  border-radius:28px !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-heading{
  display:grid !important;
  grid-template-columns:124px minmax(0,1fr) !important;
  gap:16px !important;
  align-items:start !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-heading > div{
  grid-column:2 !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-heading .lot01-eyebrow{
  margin:0 0 3px !important;
  color:#d448a3 !important;
  font-family:var(--pb-personnalisables-font) !important;
  font-size:clamp(12px,1vw,15px) !important;
  font-weight:700 !important;
  letter-spacing:.025em !important;
  line-height:1.2 !important;
  text-transform:uppercase !important;
  -webkit-text-fill-color:currentColor !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-heading h1{
  margin:0 !important;
  color:var(--pb-personnalisables-ink) !important;
  font-family:var(--pb-personnalisables-font) !important;
  font-size:clamp(46px,4.7vw,68px) !important;
  font-style:normal !important;
  font-weight:700 !important;
  letter-spacing:-.035em !important;
  line-height:.98 !important;
  text-transform:none !important;
  text-shadow:none !important;
  -webkit-text-fill-color:currentColor !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-heading > div > small{
  margin-top:2px !important;
  color:var(--pb-personnalisables-muted) !important;
  font-family:var(--pb-personnalisables-font) !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  -webkit-text-fill-color:currentColor !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-heading > div > p:last-child{
  max-width:980px;
  margin:5px 0 0 !important;
  color:var(--pb-personnalisables-muted) !important;
  font-family:var(--pb-personnalisables-font) !important;
  font-size:clamp(13px,1.15vw,16px) !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  -webkit-text-fill-color:currentColor !important;
}

html body[data-client-theme="night"] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-heading h1{
  color:#fff7ff !important;
}

html body[data-client-theme="night"] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(
    .lot01-composition-heading > div > small,
    .lot01-composition-heading > div > p:last-child
  ){
  color:#dccbe1 !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-global-quantity-alert{
  margin:10px 0 12px !important;
  padding:10px 16px !important;
  border:2px solid var(--pb-personnalisables-border) !important;
  border-radius:16px !important;
  font-size:clamp(14px,1.2vw,17px) !important;
  line-height:1.3 !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-steps{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:8px !important;
  width:100% !important;
  max-width:none !important;
  margin:0 0 14px !important;
  padding:0 !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-steps li{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:0 !important;
  min-height:48px !important;
  padding:7px 8px !important;
  border:1px solid rgba(166,116,178,.5) !important;
  border-radius:12px !important;
  color:#5e4b63 !important;
  background:#fffafe !important;
  box-shadow:none !important;
  font-family:var(--pb-personnalisables-font) !important;
  font-size:clamp(11px,1.05vw,15px) !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  text-align:center !important;
  text-transform:none !important;
  -webkit-text-fill-color:currentColor !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-steps li.is-current{
  border-color:#c345b4 !important;
  color:#fff !important;
  background:#b43bc4 !important;
  box-shadow:none !important;
  -webkit-text-fill-color:#fff !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-steps li.is-complete{
  border-color:#c56aba !important;
  color:#582b62 !important;
  background:#f4e7f5 !important;
  -webkit-text-fill-color:currentColor !important;
}

html body[data-client-theme="night"] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-steps li{
  border-color:rgba(223,123,226,.46) !important;
  color:#f5e8f8 !important;
  background:#2a1733 !important;
  -webkit-text-fill-color:currentColor !important;
}

html body[data-client-theme="night"] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-steps li.is-current{
  border-color:#ef6fc8 !important;
  color:#fff !important;
  background:#9630b1 !important;
  -webkit-text-fill-color:#fff !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-layout{
  grid-template-columns:minmax(0,1fr) minmax(310px,26%) !important;
  gap:18px !important;
  align-items:start !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-section{
  margin-bottom:14px !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-section h2{
  margin:0 0 8px !important;
  font-family:var(--pb-personnalisables-font) !important;
  font-size:clamp(18px,1.55vw,24px) !important;
  font-weight:700 !important;
  line-height:1.12 !important;
  letter-spacing:-.012em !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-section h2 small{
  display:inline !important;
  margin-left:10px !important;
  font-size:clamp(9px,.75vw,11px) !important;
  line-height:1.2 !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot02-assignment-alert{
  margin:0 0 9px !important;
  padding:8px 12px !important;
  border-radius:13px !important;
  font-size:12px !important;
  line-height:1.3 !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot02-dough-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot02-dough-card{
  display:grid !important;
  grid-template-columns:minmax(78px,31%) minmax(0,1fr) !important;
  gap:9px !important;
  align-items:stretch !important;
  min-height:104px !important;
  padding:7px !important;
  overflow:hidden !important;
  border-radius:15px !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot02-dough-card > img{
  width:100% !important;
  height:100% !important;
  min-height:88px !important;
  max-height:112px !important;
  aspect-ratio:1 !important;
  border-radius:11px !important;
  object-fit:cover !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot02-dough-copy{
  display:grid !important;
  align-content:center !important;
  gap:3px !important;
  overflow-wrap:anywhere !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot02-dough-status{
  font-size:clamp(8px,.72vw,10px) !important;
  line-height:1.1 !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot02-dough-copy strong{
  font-size:clamp(14px,1.15vw,18px) !important;
  line-height:1.08 !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot02-dough-copy small{
  font-size:clamp(9px,.72vw,11px) !important;
  line-height:1.18 !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-base-card{
  min-height:112px !important;
  padding:7px !important;
  border-radius:15px !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-base-card > img{
  align-self:start !important;
  aspect-ratio:1 !important;
  object-fit:cover !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-ingredient-intro{
  min-height:92px !important;
  padding:8px !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-ingredient-card{
  min-height:128px !important;
  overflow:hidden !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-summary{
  position:sticky !important;
  top:14px !important;
  gap:10px !important;
  padding:16px !important;
  border-radius:24px !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-summary > h2{
  margin:0 !important;
  font-family:var(--pb-personnalisables-font) !important;
  font-size:clamp(28px,2.25vw,36px) !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:-.02em !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-summary dl{
  display:grid !important;
  gap:0 !important;
  margin:0 !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-summary dl > div{
  min-width:0 !important;
  padding:7px 0 !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-summary :is(dt,dd,p,small,li){
  overflow-wrap:anywhere !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-summary dt{
  font-size:10px !important;
  line-height:1.15 !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-composition-summary dd{
  font-size:14px !important;
  line-height:1.2 !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(
    .lot01-total-preview,
    .lot01-menu-choice,
    .lot01-cross-contamination,
    .lot01-allergen-consent
  ){
  padding:11px !important;
  border-radius:15px !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .lot01-menu-choice h3{
  margin:0 0 4px !important;
  font-size:17px !important;
  line-height:1.15 !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .site-legal-footer{
  display:none !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .client-bottom-dock{
  position:absolute !important;
  z-index:44 !important;
  right:24px !important;
  bottom:30px !important;
  left:auto !important;
  width:clamp(170px,18vw,260px) !important;
  height:44px !important;
  margin:0 !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .client-bottom-dock .client-tutorial-button:last-child{
  width:100% !important;
  min-height:44px !important;
  height:44px !important;
  margin:0 !important;
  font-size:0 !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  .client-bottom-dock .client-tutorial-button:last-child::after{
  content:"BASTIEN POUR VOUS AIDER" !important;
  display:inline !important;
  color:#fff !important;
  font-size:clamp(10px,.9vw,13px) !important;
  line-height:1 !important;
}

@media(min-width:901px){
  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    > .site-nav-overlay{
    top:12px !important;
    right:430px !important;
    left:142px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:auto !important;
    height:58px !important;
    min-height:58px !important;
    gap:clamp(12px,2.1vw,34px) !important;
    padding:0 !important;
    overflow:visible !important;
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    > .site-nav-overlay > .nav-button{
    flex:0 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    height:46px !important;
    min-height:46px !important;
    padding:0 3px !important;
    border:0 !important;
    border-bottom:4px solid transparent !important;
    border-radius:0 !important;
    color:#302038 !important;
    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    filter:none !important;
    transform:none !important;
    font-family:var(--pb-personnalisables-font) !important;
    font-size:clamp(11px,1.08vw,16px) !important;
    font-weight:700 !important;
    letter-spacing:.01em !important;
    line-height:42px !important;
    text-shadow:none !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
    -webkit-text-fill-color:currentColor !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    > .site-nav-overlay > .nav-button:is(.active,[aria-current="page"]){
    border-bottom-color:#cf49d1 !important;
    color:#b13cc7 !important;
    background:transparent !important;
    box-shadow:none !important;
    -webkit-text-fill-color:currentColor !important;
  }

  html body[data-client-theme="night"] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    > .site-nav-overlay > .nav-button{
    color:#f9effd !important;
    -webkit-text-fill-color:currentColor !important;
  }

  html body[data-client-theme="night"] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    > .site-nav-overlay > .nav-button:is(.active,[aria-current="page"]){
    border-bottom-color:#ed6cd0 !important;
    color:#f39bdf !important;
    -webkit-text-fill-color:currentColor !important;
  }
}

@media(max-width:1050px){
  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-page{
    width:calc(100% - 20px) !important;
    padding:14px 16px 18px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-layout{
    grid-template-columns:minmax(0,1fr) !important;
    gap:16px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-card{
    grid-template-columns:minmax(68px,30%) minmax(0,1fr) !important;
    min-height:98px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary{
    position:static !important;
    width:100% !important;
    margin:0 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary dl{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary dl > div{
    display:block !important;
    padding:10px 8px !important;
    border:1px solid rgba(181,123,193,.28) !important;
    border-radius:12px !important;
    text-align:center !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary dl > div:last-child{
    grid-column:1 / -1 !important;
    text-align:left !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .client-bottom-dock{
    right:18px !important;
    bottom:82px !important;
    width:min(250px,48vw) !important;
  }
}

@media(max-width:600px){
  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-page{
    width:calc(100% - 14px) !important;
    margin-right:7px !important;
    margin-left:7px !important;
    padding:10px 9px 14px !important;
    border-radius:18px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-main{
    padding-top:46px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-heading{
    grid-template-columns:88px minmax(0,1fr) !important;
    gap:7px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-heading > div{
    grid-column:2 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-heading .lot01-eyebrow{
    font-size:9px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-heading h1{
    font-size:clamp(30px,9.3vw,38px) !important;
    letter-spacing:-.04em !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-heading > div > small{
    font-size:9px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-heading > div > p:last-child{
    font-size:10px !important;
    line-height:1.25 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-global-quantity-alert{
    padding:8px 10px !important;
    font-size:11px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-steps{
    gap:4px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-steps li{
    min-height:52px !important;
    padding:6px 2px !important;
    border-radius:9px !important;
    font-size:clamp(8px,2.3vw,10px) !important;
    overflow-wrap:anywhere !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-section h2{
    font-size:17px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-section h2 small{
    display:block !important;
    margin:3px 0 0 !important;
    font-size:8px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-assignment-alert{
    padding:7px 9px !important;
    font-size:10px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:5px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-card{
    grid-template-columns:minmax(40px,39%) minmax(0,1fr) !important;
    gap:4px !important;
    min-height:78px !important;
    padding:4px !important;
    border-radius:10px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-card > img{
    min-height:68px !important;
    max-height:82px !important;
    border-radius:7px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-copy{
    gap:2px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-status{
    font-size:6.5px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-copy strong{
    font-size:10px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-copy small{
    font-size:7px !important;
    line-height:1.1 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-copy small:first-of-type{
    display:none !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-card{
    grid-template-columns:72px minmax(0,1fr) !important;
    min-height:104px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-card > img{
    width:72px !important;
    height:72px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-ingredient-card{
    grid-template-columns:minmax(112px,42%) minmax(0,1fr) !important;
    min-height:164px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-ingredient-card > img{
    width:100% !important;
    height:148px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary{
    padding:12px 10px !important;
    border-radius:17px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary > h2{
    font-size:24px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary dl{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:5px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary dl > div{
    padding:7px 4px !important;
    border-radius:9px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary dt{
    font-size:7px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary dd{
    font-size:9px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(
      .lot01-total-preview,
      .lot01-menu-choice,
      .lot01-cross-contamination,
      .lot01-allergen-consent
    ){
    padding:9px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-mobile-nav{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px !important;
    padding:10px 0 0 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-mobile-nav button{
    min-width:0 !important;
    min-height:44px !important;
    padding:4px 3px !important;
    font-size:9px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .client-bottom-dock{
    right:10px !important;
    bottom:66px !important;
    width:min(220px,58vw) !important;
  }
}

@media(max-width:360px){
  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-heading{
    grid-template-columns:80px minmax(0,1fr) !important;
    gap:5px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-heading h1{
    font-size:29px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-card{
    grid-template-columns:38px minmax(0,1fr) !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-copy small{
    font-size:6.5px !important;
  }
}

/* Fermeture ordinateur — densité de la planche 07 canonique.
 * Le reflow tablette/téléphone reste celui des règles précédentes. */
@media(min-width:1051px){
  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]{
    min-height:0 !important;
    padding-top:110px !important;
    padding-bottom:0 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    > .install-home-button.pb-install-route{
    inset:64px 312px auto auto !important;
    min-height:40px !important;
    height:40px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    > .client-route-back{
    top:124px !important;
    left:3.1% !important;
    min-width:92px !important;
    min-height:38px !important;
    height:38px !important;
    padding:0 14px !important;
    font-size:11px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-page{
    inset:auto !important;
    width:calc(100% - 16px) !important;
    margin:0 8px 12px !important;
    padding:14px 16px 18px !important;
    border-radius:24px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-layout{
    grid-template-columns:minmax(0,1fr) minmax(360px,25%) !important;
    gap:14px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-main{
    padding-top:0 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-heading{
    grid-template-columns:124px minmax(0,1fr) !important;
    gap:14px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-heading .lot01-eyebrow{
    margin-bottom:2px !important;
    font-size:11px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-heading h1{
    font-size:48px !important;
    line-height:.95 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-heading > div > small{
    margin-top:1px !important;
    font-size:10px !important;
    line-height:1.15 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-heading > div > p:last-child{
    max-width:none !important;
    margin-top:3px !important;
    font-size:13px !important;
    line-height:1.2 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-global-quantity-alert{
    margin:6px 0 8px !important;
    padding:7px 14px !important;
    border-radius:13px !important;
    font-size:15px !important;
    line-height:1.2 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-steps{
    gap:7px !important;
    margin-bottom:9px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-steps li{
    min-height:44px !important;
    height:44px !important;
    padding:5px 7px !important;
    font-size:13px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-section{
    margin-bottom:9px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-section h2{
    margin-bottom:5px !important;
    font-size:20px !important;
    line-height:1.08 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-section h2 small{
    margin-left:8px !important;
    font-size:8px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-assignment-alert{
    margin-bottom:6px !important;
    padding:6px 10px !important;
    border-radius:11px !important;
    font-size:10px !important;
    line-height:1.2 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-grid{
    gap:8px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-card{
    grid-template-columns:72px minmax(0,1fr) !important;
    gap:7px !important;
    min-height:86px !important;
    height:86px !important;
    padding:6px !important;
    border-radius:12px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-card > img{
    width:72px !important;
    height:72px !important;
    min-height:72px !important;
    border-radius:9px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-copy{
    gap:2px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-status{
    font-size:8px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-copy strong{
    font-size:14px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-copy small{
    font-size:8px !important;
    line-height:1.1 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-base-filter{
    min-height:40px !important;
    height:40px !important;
    margin-bottom:8px !important;
    padding:2px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-base-filter button{
    min-height:36px !important;
    height:36px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    :is(.lot01-base-carousel-help,.lot01-carousel-help){
    margin-bottom:5px !important;
    font-size:9px !important;
    line-height:1.15 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-carousel-frame{
    grid-template-columns:40px minmax(0,1fr) 40px !important;
    gap:6px !important;
    height:134px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-grid{
    grid-auto-columns:calc((100% - 24px) / 4) !important;
    gap:8px !important;
    height:134px !important;
    padding:0 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-card{
    grid-template-columns:72px minmax(0,1fr) !important;
    gap:7px !important;
    min-height:124px !important;
    height:124px !important;
    padding:6px !important;
    border-radius:12px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-card > img{
    width:72px !important;
    height:72px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-card-copy{
    gap:2px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-card-copy strong{
    font-size:12px !important;
    line-height:1.05 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-card-copy small{
    font-size:7px !important;
    line-height:1.1 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-card-copy button{
    min-height:24px !important;
    height:24px !important;
    padding:3px 7px !important;
    font-size:8px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-global-quantity{
    min-height:56px !important;
    padding:5px 10px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-ingredient-intro{
    min-height:78px !important;
    height:78px !important;
    padding:6px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-ingredient-collage{
    height:64px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-ingredient-carousel{
    height:126px !important;
    padding:4px 0 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-ingredient-card{
    min-height:118px !important;
    height:118px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary{
    top:8px !important;
    gap:6px !important;
    padding:13px !important;
    border-radius:20px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary > h2{
    font-size:30px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary dl > div{
    padding:4px 0 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary dt{
    font-size:8px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary dd{
    font-size:12px !important;
    line-height:1.12 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(
      .lot01-total-preview,
      .lot01-menu-choice,
      .lot01-cross-contamination,
      .lot01-allergen-consent
    ){
    padding:8px !important;
    border-radius:13px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-total-preview{
    gap:2px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-total-preview :is(strong,span){
    line-height:1.12 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-menu-choice h3{
    margin-bottom:3px !important;
    font-size:15px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-menu-choice > p{
    margin:2px 0 !important;
    font-size:10px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-menu-choice .lot01-segmented-control{
    height:38px !important;
    margin:4px 0 6px !important;
    padding:3px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-menu-choice > small{
    display:block !important;
    font-size:9px !important;
    line-height:1.2 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-cross-contamination :is(strong,p),
  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-allergen-consent :is(strong,small){
    line-height:1.15 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-consent-reset-note,
  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-validation-hint{
    font-size:9px !important;
    line-height:1.15 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .client-bottom-dock{
    right:18px !important;
    bottom:14px !important;
  }

  html body:has(#app .mockup[data-page="personnalisables"][data-client-lot01-board="07"]){
    position:relative !important;
  }

  html body:has(#app .mockup[data-page="personnalisables"][data-client-lot01-board="07"])
    .pb-cookie-settings{
    position:absolute !important;
    inset:72px auto auto 170px !important;
    min-height:32px !important;
    height:32px !important;
    margin:0 !important;
    padding:5px 10px !important;
    font-size:10px !important;
  }

  html body[data-client-theme="day"]:has(#app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]){
    background:#fffaf2 !important;
  }

  html body[data-client-theme="night"]:has(#app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]){
    background:#100a13 !important;
  }
}

/* ===== SOURCE CONSOLIDÉE: private/site/assets/client-transverse-audit-v1.css ===== */
/*
 * Couche transverse Client issue de la cascade réellement servie avant consolidation.
 * Le sélecteur texte concurrent a été volontairement omis : le composant maître
 * Auto / Jour / Nuit reste l'unique autorité visuelle du sélecteur.
 */

/* ========================================================================== */
/* CORRECTIONS CLIENT TRANSVERSALES — AUDIT 2026-08-26                       */
/* Thème, pages de service, QR invité, Bastien et accessibilité responsive.   */
/* ========================================================================== */

body[data-client-theme="day"]{
  --pb-ux-surface:rgba(255,255,255,.96);
  --pb-ux-soft:rgba(250,241,255,.94);
  --pb-ux-text:#2b1736;
  --pb-ux-muted:#62516a;
  --pb-ux-title:#68158f;
  --pb-ux-border:rgba(126,48,177,.28);
  --pb-ux-field:#fff;
  --pb-ux-shadow:0 18px 44px rgba(67,24,101,.14);
  --pb-ux-focus:#8b1ac2;
}

body[data-client-theme="night"]{
  --pb-ux-surface:rgba(22,11,29,.96);
  --pb-ux-soft:rgba(39,17,50,.95);
  --pb-ux-text:#fff7ff;
  --pb-ux-muted:#dfd1e5;
  --pb-ux-title:#f1b8ff;
  --pb-ux-border:rgba(224,112,255,.38);
  --pb-ux-field:rgba(8,4,12,.84);
  --pb-ux-shadow:0 18px 46px rgba(0,0,0,.42);
  --pb-ux-focus:#ffd45b;
}

/* Les pages de service grandissent avec leur contenu, footer compris. */
#app .mockup:is(
  [data-page="evenements"],
  [data-page="contact"],
  [data-page="trouver"],
  [data-page="confidentialite"],
  [data-page="conditions"]
){
  min-height:100dvh !important;
  height:auto !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  overflow:visible !important;
  padding-bottom:28px !important;
}

#app .mockup:is(
  [data-page="evenements"],
  [data-page="contact"],
  [data-page="trouver"],
  [data-page="confidentialite"],
  [data-page="conditions"]
) > :is(.event-detail,.contact-detail,.location-detail,.client-legal-page){
  position:relative !important;
  inset:auto !important;
  z-index:6 !important;
  width:min(1180px,calc(100% - 48px)) !important;
  max-width:1180px !important;
  max-height:none !important;
  margin:clamp(148px,14vw,178px) auto 32px !important;
  padding:clamp(20px,2.4vw,34px) !important;
  overflow:visible !important;
  border:1px solid var(--pb-ux-border) !important;
  border-radius:22px !important;
  background:var(--pb-ux-surface) !important;
  color:var(--pb-ux-text) !important;
  box-shadow:var(--pb-ux-shadow) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
  box-sizing:border-box !important;
}

#app .mockup:is(
  [data-page="evenements"],
  [data-page="contact"],
  [data-page="trouver"],
  [data-page="confidentialite"],
  [data-page="conditions"]
) > .site-legal-footer{
  position:relative !important;
  inset:auto !important;
  z-index:6 !important;
  width:min(1180px,calc(100% - 48px)) !important;
  max-width:1180px !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
}

/* Les titres internes conservent une hauteur naturelle et ne se superposent pas. */
#app .mockup:not([data-page="accueil"]) :is(
  .client-page-content,
  .event-detail,
  .contact-detail,
  .location-detail
) :is(h1,h2,h3){
  position:relative !important;
  inset:auto !important;
  max-width:100% !important;
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
  color:var(--pb-ux-title,var(--violet-2)) !important;
  line-height:1.08 !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  text-wrap:balance;
}

#app .mockup:is(
  [data-page="evenements"],
  [data-page="contact"],
  [data-page="trouver"],
  [data-page="confidentialite"],
  [data-page="conditions"]
) :is(.event-detail,.contact-detail,.location-detail,.client-legal-page) > h1,
#app .mockup[data-page="evenements"] .client-section-heading > h1,
#app .mockup[data-page="contact"] .contact-detail > div:first-child > h1{
  margin:0 0 12px !important;
  font-size:clamp(34px,4.4vw,62px) !important;
  letter-spacing:.015em !important;
  text-transform:uppercase !important;
}

#app .mockup:is(
  [data-page="evenements"],
  [data-page="contact"],
  [data-page="trouver"],
  [data-page="confidentialite"],
  [data-page="conditions"]
) :is(.event-detail,.contact-detail,.location-detail,.client-legal-page) p{
  color:var(--pb-ux-muted) !important;
  line-height:1.55 !important;
  overflow-wrap:anywhere !important;
}

/* Cartes Événements, Contact, Localisation et pages légales. */
#app .mockup:is(
  [data-page="evenements"],
  [data-page="contact"],
  [data-page="trouver"],
  [data-page="confidentialite"],
  [data-page="conditions"]
) :is(
  .event-entry-card,
  .contact-panel,
  .location-editorial-card,
  .client-legal-card,
  .client-editorial-block,
  .client-photo-card,
  .notice,
  .line
){
  min-width:0 !important;
  border:1px solid var(--pb-ux-border) !important;
  border-radius:16px !important;
  background:linear-gradient(180deg,var(--pb-ux-surface),var(--pb-ux-soft)) !important;
  color:var(--pb-ux-text) !important;
  box-shadow:0 10px 26px rgba(37,10,52,.1) !important;
  box-sizing:border-box !important;
}

#app .mockup[data-page="evenements"] .event-category-actions{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
  margin:22px 0 !important;
}

#app .mockup[data-page="evenements"] .event-category-actions > button{
  width:100% !important;
  min-width:0 !important;
  min-height:46px !important;
  margin:0 !important;
  white-space:normal !important;
}

#app .mockup[data-page="evenements"] .event-entry-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:16px !important;
}

#app .mockup[data-page="evenements"] .event-entry-card{
  display:grid !important;
  grid-template-rows:auto 1fr !important;
  padding:0 !important;
  overflow:hidden !important;
}

#app .mockup[data-page="evenements"] .event-entry-card > img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  aspect-ratio:16/9 !important;
  object-fit:cover !important;
  object-position:center !important;
}

#app .mockup[data-page="evenements"] .event-entry-card > div{
  padding:18px !important;
}

#app .mockup[data-page="evenements"] .event-entry-card h2{
  margin:0 0 8px !important;
  font-size:clamp(20px,2vw,28px) !important;
}

#app .mockup[data-page="evenements"] .event-grid,
#app .mockup[data-page="trouver"] .location-grid{
  display:grid !important;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) !important;
  align-items:start !important;
  gap:18px !important;
  margin-top:18px !important;
}

#app .mockup[data-page="contact"] .contact-detail{
  display:grid !important;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr) !important;
  align-items:start !important;
  gap:24px !important;
}

#app .mockup[data-page="trouver"] .location-editorial-card,
#app .mockup:is([data-page="confidentialite"],[data-page="conditions"]) .client-legal-card,
#app .mockup:is([data-page="evenements"],[data-page="contact"],[data-page="trouver"])
  :is(.contact-panel,.location-editorial-card){
  padding:clamp(16px,2vw,24px) !important;
}

#app .mockup:is([data-page="confidentialite"],[data-page="conditions"]) .client-legal-page{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:16px !important;
}

#app .mockup:is([data-page="confidentialite"],[data-page="conditions"])
  .client-legal-page > :is(.client-about-eyebrow,h1){
  grid-column:1 / -1 !important;
}

#app .mockup:is([data-page="confidentialite"],[data-page="conditions"]) .client-legal-card h2{
  margin:0 0 10px !important;
  font-size:clamp(20px,2vw,27px) !important;
}

/* Formulaires : colonnes bornées et contrôles toujours contenus. */
#app .mockup:is([data-page="evenements"],[data-page="contact"])
  :is(form,.grid,.field),
#app .mockup[data-page="trouver"] :is(.location-grid,.list,.line){
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

#app .mockup:is([data-page="evenements"],[data-page="contact"]) .grid.two{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
}

#app .mockup:is([data-page="evenements"],[data-page="contact"]) .field{
  display:grid !important;
  gap:7px !important;
  color:var(--pb-ux-muted) !important;
  font-size:14px !important;
  font-weight:750 !important;
  line-height:1.3 !important;
}

#app .mockup:is([data-page="evenements"],[data-page="contact"])
  .field :is(input,select,textarea){
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  min-height:44px !important;
  margin:0 !important;
  padding:11px 12px !important;
  border:1px solid var(--pb-ux-border) !important;
  border-radius:11px !important;
  background:var(--pb-ux-field) !important;
  color:var(--pb-ux-text) !important;
  font:inherit !important;
  box-sizing:border-box !important;
}

#app .mockup:is([data-page="evenements"],[data-page="contact"]) .field textarea{
  min-height:104px !important;
  resize:vertical !important;
}

#app .mockup:is([data-page="evenements"],[data-page="contact"],[data-page="trouver"])
  .actions{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:10px !important;
  max-width:100% !important;
}

#app .mockup[data-page="trouver"] .line{
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:12px !important;
  padding:13px !important;
}

/* Route QR invité : dialogue autonome, local et volontairement minimal. */
body:has(.modal-backdrop.open[data-kind="guestOrder"]){
  overflow:hidden !important;
}

body .modal-backdrop.open[data-kind="guestOrder"]{
  align-items:center !important;
  justify-content:center !important;
  padding:clamp(12px,3vw,28px) !important;
  overflow:auto !important;
  background:rgba(8,4,12,.9) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}

body .modal-backdrop.open[data-kind="guestOrder"] > .modal{
  width:min(620px,100%) !important;
  max-width:620px !important;
  max-height:calc(100dvh - 24px) !important;
  margin:auto !important;
  overflow:auto !important;
  border:1px solid var(--pb-ux-border) !important;
  border-radius:20px !important;
  background:var(--pb-ux-surface) !important;
  background-image:none !important;
  color:var(--pb-ux-text) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.48) !important;
}

body .modal-backdrop.open[data-kind="guestOrder"] .modal-inner{
  padding:clamp(16px,3vw,26px) !important;
}

body .modal-backdrop.open[data-kind="guestOrder"] :is(.modal-head,.notice){
  margin-top:0 !important;
  margin-bottom:12px !important;
}

body .modal-backdrop.open[data-kind="guestOrder"] #modalBody{
  display:grid !important;
  gap:12px !important;
  min-width:0 !important;
}

body .modal-backdrop.open[data-kind="guestOrder"] .grid.two{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}

body .modal-backdrop.open[data-kind="guestOrder"]
  .field :is(input,select,textarea){
  min-width:0 !important;
  max-width:100% !important;
  min-height:44px !important;
  box-sizing:border-box !important;
}

/* Bastien compact : le bouton d'aide reste distinct, le panneau ne couvre pas la page. */
html body[data-client-theme] #app .mockup > .client-bastien-widget{
  position:fixed !important;
  inset:auto 12px 68px auto !important;
  z-index:72 !important;
  width:auto !important;
  max-width:calc(100vw - 24px) !important;
  margin:0 !important;
  display:grid !important;
  justify-items:end !important;
  gap:6px !important;
  pointer-events:none !important;
}

html body[data-client-theme] #app .mockup > .client-bastien-widget.open{
  width:min(332px,calc(100vw - 24px)) !important;
}

html body[data-client-theme] #app
  .mockup > .client-bastien-widget.open .client-bastien-panel{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  max-width:100% !important;
  max-height:min(64dvh,540px) !important;
  margin:0 !important;
  padding:12px !important;
  overflow:auto !important;
  border:1px solid var(--pb-ux-border) !important;
  border-radius:18px !important;
  background:var(--pb-ux-surface) !important;
  color:var(--pb-ux-text) !important;
  box-shadow:0 18px 48px rgba(0,0,0,.38) !important;
  box-sizing:border-box !important;
  pointer-events:auto !important;
}

html body[data-client-theme] #app .client-bastien-head{
  grid-template-columns:42px minmax(0,1fr) 38px !important;
  gap:8px !important;
  padding-bottom:8px !important;
}

html body[data-client-theme] #app .client-bastien-avatar{
  width:42px !important;
  height:42px !important;
  object-fit:cover !important;
}

html body[data-client-theme] #app .client-bastien-close{
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
  min-height:38px !important;
  padding:0 !important;
}

html body[data-client-theme] #app .client-bastien-close-label{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
}

html body[data-client-theme] #app .client-bastien-mode-choice,
html body[data-client-theme] #app .client-bastien-actions{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  margin:8px 0 !important;
}

html body[data-client-theme] #app .client-bastien-mode-choice button,
html body[data-client-theme] #app .client-bastien-actions > button{
  min-width:0 !important;
  min-height:40px !important;
  margin:0 !important;
  padding:8px !important;
  border-radius:11px !important;
  font-size:11px !important;
  line-height:1.2 !important;
  white-space:normal !important;
}

html body[data-client-theme] #app #clientBastienPrompt{
  width:100% !important;
  min-width:0 !important;
  min-height:72px !important;
  max-height:150px !important;
  margin:8px 0 0 !important;
  padding:10px !important;
  border-radius:11px !important;
  box-sizing:border-box !important;
  resize:vertical !important;
}

html body[data-client-theme] #app :is(.client-bastien-transcript,.client-bastien-output){
  max-height:112px !important;
  margin-top:8px !important;
  padding:9px !important;
  overflow:auto !important;
  border-radius:11px !important;
  font-size:12px !important;
  line-height:1.4 !important;
}

/* Focus clavier visible dans le shell, les pages et les dialogues. */
html body #app :where(a[href],button,input,select,textarea,[tabindex]):not([tabindex="-1"]):focus-visible,
html body .modal-backdrop :where(a[href],button,input,select,textarea,[tabindex]):not([tabindex="-1"]):focus-visible{
  outline:3px solid var(--pb-ux-focus,#ffd45b) !important;
  outline-offset:3px !important;
  box-shadow:0 0 0 5px rgba(255,255,255,.82) !important;
}

@media (max-width:900px){
  html body[data-client-theme-mode] #app
    .mockup[data-pb-component="client-page"]
    > .theme-mode-switch.pb-master-selector-ready{
    width:188px !important;
    height:40px !important;
    min-height:40px !important;
  }

  html body[data-client-theme-mode] #app
    .mockup:is(
      [data-page="evenements"],
      [data-page="contact"],
      [data-page="trouver"],
      [data-page="confidentialite"],
      [data-page="conditions"]
    ) > .theme-mode-switch.pb-master-selector-ready{
    position:relative !important;
    inset:auto !important;
    margin:0 0 12px auto !important;
  }

  #app .mockup:is(
    [data-page="evenements"],
    [data-page="contact"],
    [data-page="trouver"],
    [data-page="confidentialite"],
    [data-page="conditions"]
  ) > :is(.event-detail,.contact-detail,.location-detail,.client-legal-page){
    width:100% !important;
    max-width:100% !important;
    margin:0 auto 20px !important;
    padding:clamp(16px,4vw,22px) !important;
  }

  #app .mockup:is(
    [data-page="evenements"],
    [data-page="contact"],
    [data-page="trouver"],
    [data-page="confidentialite"],
    [data-page="conditions"]
  ) > .site-legal-footer{
    width:100% !important;
    max-width:100% !important;
  }

  #app .mockup[data-page="evenements"] :is(.event-grid,.event-entry-grid),
  #app .mockup[data-page="contact"] .contact-detail,
  #app .mockup[data-page="trouver"] .location-grid,
  #app .mockup:is([data-page="confidentialite"],[data-page="conditions"])
    .client-legal-page{
    grid-template-columns:1fr !important;
  }

  #app .mockup:is([data-page="confidentialite"],[data-page="conditions"])
    .client-legal-page > :is(.client-about-eyebrow,h1){
    grid-column:auto !important;
  }

  #app .mockup[data-page="evenements"] .event-category-actions{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:600px){
  html body[data-client-theme],
  html body[data-client-theme] #app,
  html body[data-client-theme] #app .mockup{
    max-width:100% !important;
    overflow-x:clip !important;
  }

  html body[data-client-theme-mode] #app
    .mockup[data-pb-component="client-page"]
    > .theme-mode-switch.pb-master-selector-ready{
    width:180px !important;
    max-width:calc(100% - 24px) !important;
    height:42px !important;
    min-height:42px !important;
  }

  html body[data-client-theme-mode] #app
    .mockup[data-pb-component="client-page"]
    > .theme-mode-switch.pb-master-selector-ready > button,
  html body[data-client-theme-mode] #app
    .mockup[data-pb-component="client-page"]
    > .theme-mode-switch.pb-master-selector-ready > button.active{
    height:34px !important;
    min-height:34px !important;
    padding:0 5px !important;
    font-size:11px !important;
  }

  #app .mockup:is(
    [data-page="evenements"],
    [data-page="contact"],
    [data-page="trouver"],
    [data-page="confidentialite"],
    [data-page="conditions"]
  ){
    width:100% !important;
    max-width:100% !important;
    padding-right:12px !important;
    padding-left:12px !important;
    box-sizing:border-box !important;
  }

  #app .mockup:is(
    [data-page="evenements"],
    [data-page="contact"],
    [data-page="trouver"],
    [data-page="confidentialite"],
    [data-page="conditions"]
  ) :is(.event-detail,.contact-detail,.location-detail,.client-legal-page,.contact-panel,.event-entry-card,.location-editorial-card,.client-legal-card,form,.grid,.field){
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  #app .mockup:is(
    [data-page="evenements"],
    [data-page="contact"],
    [data-page="trouver"],
    [data-page="confidentialite"],
    [data-page="conditions"]
  ) :is(.event-detail,.contact-detail,.location-detail,.client-legal-page) h1,
  #app .mockup[data-page="evenements"] .client-section-heading > h1{
    font-size:clamp(28px,9vw,38px) !important;
    line-height:1.05 !important;
  }

  #app .mockup[data-page="evenements"] .event-category-actions,
  #app .mockup:is([data-page="evenements"],[data-page="contact"]) .grid.two,
  body .modal-backdrop.open[data-kind="guestOrder"] .grid.two{
    grid-template-columns:1fr !important;
  }

  #app .mockup:is([data-page="evenements"],[data-page="contact"],[data-page="trouver"])
    .actions > :is(button,a),
  body .modal-backdrop.open[data-kind="guestOrder"] .actions > button{
    flex:1 1 100% !important;
    width:100% !important;
    min-width:0 !important;
    white-space:normal !important;
  }

  #app .mockup[data-page="trouver"] .line{
    grid-template-columns:1fr !important;
  }

  body .modal-backdrop.open[data-kind="guestOrder"]{
    align-items:flex-start !important;
    padding:8px !important;
  }

  body .modal-backdrop.open[data-kind="guestOrder"] > .modal{
    max-height:calc(100dvh - 16px) !important;
    border-radius:16px !important;
  }

  html body[data-client-theme] #app .mockup > .client-bastien-widget{
    inset:auto 8px 62px auto !important;
    max-width:calc(100vw - 16px) !important;
  }

  html body[data-client-theme] #app .mockup > .client-bastien-widget.open{
    width:calc(100vw - 16px) !important;
  }

  html body[data-client-theme] #app
    .mockup > .client-bastien-widget.open .client-bastien-panel{
    max-height:min(66dvh,520px) !important;
    padding:10px !important;
    border-radius:15px !important;
  }

  html body[data-client-theme] #app .client-bastien-mode-choice,
  html body[data-client-theme] #app .client-bastien-actions{
    grid-template-columns:1fr !important;
  }
}

@media (forced-colors:active){
  html body[data-client-theme-mode] #app
    .mockup[data-pb-component="client-page"]
    > .theme-mode-switch.pb-master-selector-ready{
    border:2px solid ButtonText !important;
    background:Canvas !important;
    box-shadow:none !important;
  }

  html body[data-client-theme-mode] #app
    .mockup[data-pb-component="client-page"]
    > .theme-mode-switch.pb-master-selector-ready > button{
    color:ButtonText !important;
    -webkit-text-fill-color:ButtonText !important;
  }

  html body[data-client-theme-mode] #app
    .mockup[data-pb-component="client-page"]
    > .theme-mode-switch.pb-master-selector-ready > button.active{
    background:Highlight !important;
    color:HighlightText !important;
    -webkit-text-fill-color:HighlightText !important;
  }
}

/* Le panneau d’aide ne doit jamais masquer les actions du panier. */
html body[data-client-entry="panier"] #app .mockup > .client-bastien-widget.open {
  position: relative !important;
  inset: auto !important;
  width: min(720px, calc(100% - 32px)) !important;
  max-width: calc(100% - 32px) !important;
  margin: 24px auto 92px !important;
  justify-items: stretch !important;
  pointer-events: auto !important;
}

html body[data-client-entry="panier"] #app .mockup > .client-bastien-widget.open .client-bastien-panel {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: min(58dvh, 520px) !important;
}

@media (max-width: 560px) {
  html body[data-client-entry="panier"] #app .mockup > .client-bastien-widget.open {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    margin: 18px 8px 88px !important;
  }
}

/* À propos — fermeture visuelle contre la maquette Client validée.
   Ces règles restent bornées à la route et gagnent sur les correctifs
   transversaux ajoutés plus haut dans la feuille consolidée. */
html body[data-client-theme-mode] #app
  .mockup[data-page="apropos"] > .theme-mode-switch.pb-master-selector-ready{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:999px !important;
  background-color:transparent !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:100% 100% !important;
  box-shadow:0 5px 12px rgba(18,0,28,.28) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

html body[data-client-theme-mode="auto"] #app
  .mockup[data-page="apropos"] > .theme-mode-switch.pb-master-selector-ready{
  background-image:url('/client/_assets/client-theme-selector-auto-reference-v1.png') !important;
}

html body[data-client-theme-mode="day"] #app
  .mockup[data-page="apropos"] > .theme-mode-switch.pb-master-selector-ready{
  background-image:url('/client/_assets/client-theme-selector-day-reference-v1.png') !important;
}

html body[data-client-theme-mode="night"] #app
  .mockup[data-page="apropos"] > .theme-mode-switch.pb-master-selector-ready{
  background-image:url('/client/_assets/client-theme-selector-night-reference-v1.png') !important;
}

html body[data-client-theme-mode] #app
  .mockup[data-page="apropos"] > .theme-mode-switch.pb-master-selector-ready > button,
html body[data-client-theme-mode] #app
  .mockup[data-page="apropos"] > .theme-mode-switch.pb-master-selector-ready > button.active{
  width:auto !important;
  min-width:0 !important;
  height:100% !important;
  min-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  font-size:0 !important;
  text-shadow:none !important;
  transform:none !important;
}

@media(min-width:1051px){
  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-intro{
    grid-template-columns:minmax(340px,30fr) minmax(0,70fr) !important;
    gap:36px !important;
    padding-right:32px !important;
    padding-left:32px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-intro-copy{
    padding-top:4px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-intro-text{
    font-size:19px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-pill{
    min-width:300px !important;
    font-size:17px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-footer-social{
    position:absolute !important;
    inset:auto auto 12px 180px !important;
    margin:0 !important;
    font-size:10px !important;
    font-weight:700 !important;
  }
}

@media(max-width:520px){
  html body[data-client-theme] #app .mockup[data-page="apropos"]{
    --mobile-remorque-top:228px !important;
  }

  html body[data-client-theme-mode] #app
    .mockup[data-page="apropos"] > .theme-mode-switch.pb-master-selector-ready{
    position:absolute !important;
    inset:16px 10px auto auto !important;
    width:170px !important;
    min-width:170px !important;
    max-width:170px !important;
    height:36px !important;
    min-height:36px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] > .quick-actions-overlay{
    position:absolute !important;
    inset:56px 10px auto auto !important;
    width:146px !important;
    height:40px !important;
    gap:6px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"]
    > .quick-actions-overlay > .client-quick-action{
    min-height:40px !important;
    height:40px !important;
    padding:0 8px !important;
    font-size:10px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"]
    > .install-home-button.pb-install-route{
    position:absolute !important;
    inset:100px 46px auto auto !important;
    width:104px !important;
    max-width:104px !important;
    min-height:40px !important;
    height:40px !important;
    font-size:10px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] > .client-route-back{
    inset:104px auto auto 12px !important;
    min-height:40px !important;
    height:40px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-section-shell,
  html body[data-client-theme] #app .mockup[data-page="apropos"] :is(
    .client-about-experience-card,
    .client-about-project,
    .client-about-promise-card
  ){
    min-height:0 !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"]
    .client-about-card-copy p,
  html body[data-client-theme] #app .mockup[data-page="apropos"]
    .client-about-project-copy p,
  html body[data-client-theme] #app .mockup[data-page="apropos"]
    .client-about-promise-card p{
    margin-bottom:10px !important;
    line-height:1.42 !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .site-legal-footer{
    position:relative !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:26px 20px 82px !important;
    overflow:visible !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-footer-routes{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:min(100%,270px) !important;
    margin:0 auto 18px !important;
    gap:7px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"]
    .client-footer-routes > a:nth-of-type(4),
  html body[data-client-theme] #app .mockup[data-page="apropos"]
    .client-footer-routes > a:nth-of-type(8),
  html body[data-client-theme] #app .mockup[data-page="apropos"]
    .client-footer-routes > a:nth-of-type(9){
    display:none !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-footer-routes > a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-width:0 !important;
    min-height:44px !important;
    height:44px !important;
    padding:6px 16px !important;
    border:8px 24px solid transparent !important;
    border-radius:999px !important;
    border-image-source:url('/client/assets/client-button-master-v3.png') !important;
    border-image-slice:360 520 fill !important;
    border-image-width:8px 24px !important;
    border-image-outset:0 !important;
    border-image-repeat:stretch !important;
    background-color:transparent !important;
    background-image:none !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    box-shadow:none !important;
    font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif !important;
    font-size:12px !important;
    font-weight:900 !important;
    letter-spacing:.02em !important;
    line-height:1 !important;
    text-align:center !important;
    text-decoration:none !important;
    text-shadow:0 1px 2px rgba(28,0,35,.9) !important;
    text-transform:uppercase !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-footer-social{
    margin:12px 0 5px !important;
    font-size:11px !important;
    font-weight:700 !important;
    text-align:left !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .site-legal-footer small{
    margin-top:8px !important;
    font-size:10px !important;
  }
}

/* Le réglage du consentement reste disponible dans le pied de page réel ;
   le doublon flottant ne doit pas recouvrir les compositions de référence. */
html body[data-client-theme] .pb-cookie-settings{
  display:none !important;
}

/* Composeur — calage ordinateur sur la planche canonique 01 du 22 août.
   Les règles tablette et téléphone restent pilotées par leurs breakpoints. */
@media(min-width:1051px){
  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]{
    padding-top:104px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-page{
    width:calc(100% - 50px) !important;
    margin:0 25px 12px !important;
    padding:14px 20px 18px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-layout{
    grid-template-columns:minmax(0,1fr) 341px !important;
    gap:19px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-heading h1{
    font-size:36px !important;
    line-height:.96 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-heading .lot01-eyebrow{
    font-size:10px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-heading > div > small{
    font-size:8px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-heading > div > p:last-child{
    font-size:11px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-steps li{
    min-height:40px !important;
    height:40px !important;
    font-size:12px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-section h2{
    font-size:18px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-assignment-alert{
    display:none !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-assignment-alert[data-state="blocked"]{
    display:block !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-card{
    grid-template-columns:58px minmax(0,1fr) !important;
    min-height:72px !important;
    height:72px !important;
    padding:5px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-card > img{
    width:58px !important;
    height:58px !important;
    min-height:58px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-section:nth-of-type(2){
    position:relative !important;
    margin-bottom:30px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-base-filter{
    position:absolute !important;
    top:-4px !important;
    right:0 !important;
    width:364px !important;
    min-height:28px !important;
    height:28px !important;
    margin:0 !important;
    padding:2px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-base-filter button{
    min-height:24px !important;
    height:24px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-carousel-help{
    display:none !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-carousel-frame,
  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-grid{
    height:100px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-card{
    min-height:96px !important;
    height:96px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-card > img{
    width:56px !important;
    height:56px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-global-quantity{
    min-height:52px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary{
    top:4px !important;
    gap:5px !important;
    padding:13px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary > h2{
    font-size:26px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary dl > div{
    padding:2px 0 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary dt{
    font-size:7px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary dd{
    font-size:11px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(
      .lot01-total-preview,
      .lot01-menu-choice,
      .lot01-cross-contamination,
      .lot01-allergen-consent
    ){
    padding:6px !important;
  }
}

@media(min-width:521px) and (max-width:1050px){
  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]{
    padding-top:112px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    > .install-home-button.pb-install-route{
    display:none !important;
  }
}

@media(max-width:520px){
  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]{
    padding-top:88px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    > .install-home-button.pb-install-route{
    display:none !important;
  }
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  > .quick-actions-overlay .client-quick-action > [data-pb-client-icon]{
  display:none !important;
}

/* À propos — largeur et respiration de l'introduction canonique ordinateur. */
@media(min-width:1051px){
  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-intro{
    grid-template-columns:447px minmax(0,1fr) !important;
    gap:56px !important;
    padding-right:52px !important;
    padding-left:52px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-portrait{
    margin-top:15px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-portrait img{
    height:524px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] > .page-logo-home-link{
    width:116px !important;
    max-width:116px !important;
  }
}

@media(max-width:520px){
  html body[data-client-theme] #app .mockup[data-page="apropos"]{
    --mobile-remorque-top:250px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-portrait img{
    height:430px !important;
    aspect-ratio:auto !important;
    object-fit:cover !important;
    object-position:50% 17% !important;
  }
}

/* ===== SOURCE CONSOLIDÉE: private/site/assets/client-final-shell-v1.css ===== */
/* Pizza Baladzo — cascade Client finale À propos / Personnalisables. */

#app .mockup{
  --pb-final-focus:#f7c948;
  --pb-final-muted-day:#65576a;
  --pb-final-muted-night:#eadff0;
}

/* Le PNG maître habille uniquement de vrais contrôles interactifs. */
#app .mockup :is(
  .pb-action-pill,
  .client-route-back,
  .client-quick-action,
  .install-home-button,
  .client-tutorial-button,
  .client-about-pill,
  .client-base-choice,
  .lot01-open-ingredients,
  .lot01-ingredient-card button,
  .lot01-carousel-arrow,
  .lot01-menu-action,
  .lot01-validate-composition,
  .client-professional-footer,
  .lot01-composition-mobile-nav button
){
  box-sizing:border-box !important;
  border:8px 24px solid transparent !important;
  border-image-source:url('/client/assets/client-button-master-v3.png') !important;
  border-image-slice:360 520 fill !important;
  border-image-width:8px 24px !important;
  border-image-outset:0 !important;
  border-image-repeat:stretch !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:0 1px 2px rgba(28,0,35,.9) !important;
}

#app .mockup :is(
  .pb-action-pill,
  .client-route-back,
  .client-quick-action,
  .install-home-button,
  .client-tutorial-button,
  .client-about-pill,
  .client-base-choice,
  .lot01-open-ingredients,
  .lot01-ingredient-card button,
  .lot01-carousel-arrow,
  .lot01-menu-action,
  .lot01-validate-composition,
  .client-professional-footer,
  .lot01-composition-mobile-nav button
):is(:hover,.active,[aria-pressed="true"]){
  filter:brightness(1.08) saturate(1.05);
}

#app .mockup :is(
  .pb-action-pill,
  .client-route-back,
  .client-quick-action,
  .install-home-button,
  .client-tutorial-button,
  .client-about-pill,
  .client-base-choice,
  .lot01-open-ingredients,
  .lot01-ingredient-card button,
  .lot01-carousel-arrow,
  .lot01-menu-action,
  .lot01-validate-composition,
  .client-professional-footer,
  .lot01-composition-mobile-nav button
):focus-visible{
  outline:4px solid var(--pb-final-focus) !important;
  outline-offset:3px !important;
}

#app .mockup :is(
  .pb-action-pill,
  .client-base-choice,
  .lot01-ingredient-card button,
  .lot01-menu-action,
  .lot01-validate-composition
):disabled{
  cursor:not-allowed !important;
  filter:grayscale(1) opacity(.58) !important;
}

html body[data-client-theme] #app
  .mockup:is([data-page="apropos"],[data-page="personnalisables"])
  > .page-logo-home-link img{
  border-radius:50% !important;
  background-color:transparent !important;
}

/* Le sélecteur utilise les trois découpes transparentes vérifiées. */
body[data-client-theme-mode] #app .mockup:is([data-page="apropos"],[data-page="personnalisables"])
  .theme-mode-switch.pb-master-selector-ready{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:0 !important;
  width:276px !important;
  min-width:276px !important;
  max-width:276px !important;
  height:47px !important;
  min-height:47px !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:999px !important;
  background-color:transparent !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:100% 100% !important;
  box-shadow:0 5px 12px rgba(18,0,28,.28) !important;
  backdrop-filter:none !important;
}

body[data-client-theme-mode="auto"] #app .mockup:is([data-page="apropos"],[data-page="personnalisables"])
  .theme-mode-switch.pb-master-selector-ready{
  background-image:url('/client/_assets/client-theme-selector-auto-reference-v1.png') !important;
}

body[data-client-theme-mode="day"] #app .mockup:is([data-page="apropos"],[data-page="personnalisables"])
  .theme-mode-switch.pb-master-selector-ready{
  background-image:url('/client/_assets/client-theme-selector-day-reference-v1.png') !important;
}

body[data-client-theme-mode="night"] #app .mockup:is([data-page="apropos"],[data-page="personnalisables"])
  .theme-mode-switch.pb-master-selector-ready{
  background-image:url('/client/_assets/client-theme-selector-night-reference-v1.png') !important;
}

body[data-client-theme-mode] #app .mockup:is([data-page="apropos"],[data-page="personnalisables"])
  .theme-mode-switch.pb-master-selector-ready > button,
body[data-client-theme-mode] #app .mockup:is([data-page="apropos"],[data-page="personnalisables"])
  .theme-mode-switch.pb-master-selector-ready > button.active{
  min-width:0 !important;
  width:auto !important;
  height:100% !important;
  min-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  font-size:0 !important;
  transform:none !important;
}

body[data-client-theme-mode] #app .mockup:is([data-page="apropos"],[data-page="personnalisables"])
  .theme-mode-switch.pb-master-selector-ready > button:focus-visible{
  outline:3px solid #fff !important;
  outline-offset:-4px !important;
  box-shadow:inset 0 0 0 2px rgba(79,8,104,.82) !important;
}

/* Rails : 44 px / piste / 44 px, sans étirement vertical des flèches. */
#app .mockup[data-page="personnalisables"] :is(.lot01-base-carousel-frame,.lot01-carousel-frame){
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) 44px !important;
  grid-template-rows:auto !important;
  column-gap:8px !important;
  align-items:center !important;
  min-width:0 !important;
}

#app .mockup[data-page="personnalisables"] :is(.lot01-base-grid,.lot01-ingredient-carousel){
  grid-column:2 !important;
  grid-row:1 !important;
  min-width:0 !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  overscroll-behavior-inline:contain !important;
  scroll-behavior:smooth !important;
  scroll-snap-type:x mandatory !important;
  touch-action:pan-x !important;
  -webkit-overflow-scrolling:touch;
}

#app .mockup[data-page="personnalisables"] .lot01-carousel-arrow{
  position:static !important;
  inset:auto !important;
  align-self:center !important;
  justify-self:center !important;
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  height:44px !important;
  min-height:44px !important;
  max-height:44px !important;
  padding:0 !important;
  border-radius:50% !important;
  cursor:pointer !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  z-index:2 !important;
}

#app .mockup[data-page="personnalisables"] .lot01-carousel-arrow.previous{
  grid-column:1 !important;
  grid-row:1 !important;
}

#app .mockup[data-page="personnalisables"] .lot01-carousel-arrow.next{
  grid-column:3 !important;
  grid-row:1 !important;
}

#app .mockup[data-page="personnalisables"] .lot01-carousel-arrow svg{
  width:20px !important;
  height:20px !important;
  stroke:currentColor !important;
  stroke-width:3 !important;
  pointer-events:none !important;
}

/* Étapes et sélecteurs continus restent plats : jamais de PNG bouton. */
#app .mockup[data-page="personnalisables"] .lot01-composition-steps li{
  background-image:none !important;
  box-shadow:none !important;
}

#app .mockup[data-page="personnalisables"] :is(.lot01-segmented-control,.lot02-base-filter){
  overflow:hidden !important;
  border-radius:999px !important;
}

#app .mockup[data-page="personnalisables"] :is(.lot01-segmented-control,.lot02-base-filter) > button,
#app .mockup[data-page="personnalisables"] :is(.lot01-segmented-control,.lot02-base-filter) > button.active{
  background-image:none !important;
}

#app .mockup[data-page="personnalisables"] .lot01-menu-action{
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:44px !important;
  padding:7px 14px !important;
  border-radius:999px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  text-align:center !important;
  text-transform:uppercase !important;
}

/* Sur ordinateur, Retour reste dans le bandeau sous le logo. Le calcul repose
   sur la largeur du viewport et des bornes en pixels, jamais sur la hauteur de
   la longue page À propos. */
@media(min-width:1025px){
  html body[data-client-theme] #app .mockup[data-page="apropos"] > .client-route-back{
    position:absolute !important;
    top:calc(clamp(14px,2.4vw,30px) + clamp(72px,7.2vw,108px) + 12px) !important;
    left:clamp(14px,2.4vw,36px) !important;
    width:max-content !important;
    margin:0 !important;
    z-index:47 !important;
  }
}

html body[data-client-theme="day"] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]{
  background-color:#fffaf4 !important;
}

html body[data-client-theme="night"] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]{
  background-color:#170b22 !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"] > img:first-child{
  display:none !important;
}

/* Footer À propos : vraie grille, trois colonnes jusqu'au format tablette. */
#app .mockup[data-page="apropos"] .client-footer-routes{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  width:100% !important;
  gap:10px 16px !important;
}

@media(min-width:901px){
  #app .mockup[data-page="personnalisables"] > .client-route-back{
    display:inline-flex !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
}

@media(max-width:900px){
  #app .mockup[data-page="apropos"]{
    --mobile-remorque-top:210px !important;
    padding:var(--mobile-remorque-top) 12px 28px !important;
  }

  #app .mockup:is([data-page="apropos"],[data-page="personnalisables"]) > .site-nav-overlay{
    display:none !important;
  }

  body[data-client-theme-mode] #app .mockup[data-page="apropos"]
    .theme-mode-switch.pb-master-selector-ready{
    width:244px !important;
    min-width:244px !important;
    max-width:244px !important;
    height:42px !important;
    min-height:42px !important;
  }

  #app .mockup[data-page="personnalisables"] > .client-route-back{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  #app .mockup[data-page="personnalisables"] .lot01-composition-mobile-nav{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  #app .mockup[data-page="personnalisables"] .lot01-composition-mobile-nav button{
    min-width:0 !important;
    min-height:44px !important;
    padding:6px 4px !important;
    font-size:11px !important;
  }

  #app .mockup[data-page="personnalisables"] .lot01-composition-steps{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:0 !important;
    overflow:visible !important;
    padding:0 !important;
  }

  #app .mockup[data-page="personnalisables"] .lot01-composition-steps li{
    flex:none !important;
    min-width:0 !important;
    width:auto !important;
    min-height:58px !important;
    padding:7px 3px !important;
    overflow-wrap:anywhere !important;
    font-size:clamp(8px,1.55vw,11px) !important;
    line-height:1.12 !important;
    text-align:center !important;
  }

  #app .mockup[data-page="personnalisables"] .lot01-composition-steps li::before,
  #app .mockup[data-page="personnalisables"] .lot01-composition-steps li::after{
    content:none !important;
    display:none !important;
  }

  #app .mockup[data-page="apropos"] .client-footer-routes{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  #app .mockup[data-page="apropos"] .client-footer-routes a{
    min-width:0 !important;
    padding:7px 5px !important;
    overflow-wrap:anywhere !important;
    font-size:12px !important;
  }
}

@media(max-width:520px){
  #app .mockup[data-page="apropos"]{
    --mobile-remorque-top:250px !important;
    padding:var(--mobile-remorque-top) 12px 28px !important;
  }

  body[data-client-theme-mode] #app .mockup[data-page="apropos"]
    .theme-mode-switch.pb-master-selector-ready{
    width:212px !important;
    min-width:212px !important;
    max-width:212px !important;
    height:36px !important;
    min-height:36px !important;
  }

  #app .mockup[data-page="personnalisables"] :is(.lot01-base-carousel-frame,.lot01-carousel-frame){
    grid-template-columns:44px minmax(0,1fr) 44px !important;
    column-gap:4px !important;
  }

  #app .mockup[data-page="personnalisables"] .lot01-base-grid{
    grid-auto-columns:calc((100% - 8px) / 2) !important;
    gap:8px !important;
    padding:3px !important;
  }

  #app .mockup[data-page="personnalisables"] .lot01-base-card{
    min-width:0 !important;
    gap:6px !important;
    padding:6px !important;
    border-radius:12px !important;
  }

  #app .mockup[data-page="personnalisables"] .lot01-base-card > img{
    width:100% !important;
    height:72px !important;
    object-fit:cover !important;
  }

  #app .mockup[data-page="personnalisables"] .lot01-base-card-copy :is(strong,small){
    min-width:0 !important;
    overflow-wrap:anywhere !important;
  }

  #app .mockup[data-page="personnalisables"] .lot01-base-card-copy strong{
    font-size:13px !important;
  }

  #app .mockup[data-page="personnalisables"] .lot01-base-card-copy small{
    font-size:9px !important;
    line-height:1.15 !important;
  }

  #app .mockup[data-page="personnalisables"] .lot01-base-card .client-base-choice{
    min-height:40px !important;
    padding:5px 3px !important;
    font-size:10px !important;
  }

  #app .mockup[data-page="personnalisables"] .lot01-composition-mobile-nav{
    gap:4px !important;
    padding:8px 4px !important;
  }

  #app .mockup[data-page="personnalisables"] .lot01-composition-mobile-nav button{
    font-size:9px !important;
  }

  #app .mockup[data-page="apropos"] .client-footer-routes{
    grid-template-columns:1fr !important;
  }
}

/* Composeur — densité responsive mesurée sur les compositions validées.
   Ce verrou ne change ni police, ni libellé, ni état métier. */
@media(max-width:1050px){
  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-section{
    margin-bottom:8px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-steps{
    margin-bottom:8px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-grid{
    scrollbar-width:none !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-grid::-webkit-scrollbar{
    display:none !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .custom-builder-controls > .lot01-composition-section:nth-of-type(4) > p{
    display:none !important;
  }
}

/* Le triple identifiant ne change pas la portee : il eleve seulement la
   specificite au-dessus des anciennes regles de composition marquees !important. */
@media(max-width:1050px){
  html body[data-client-theme] #app#app#app .mockup :is(
    button,
    a.nav-button,
    a.client-quick-action,
    a.client-route-back,
    a.client-about-pill,
    a.client-base-choice,
    a.pb-action-pill,
    [role="button"]
  ){
    box-sizing:border-box !important;
    min-height:44px !important;
    min-width:44px !important;
  }

  html body[data-client-theme] #app#app#app .mockup :is(
    a.client-quick-action,
    a.client-route-back,
    a.client-about-pill,
    a.client-base-choice,
    a.pb-action-pill:not(.nav-button)
  ){
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}

@media(min-width:521px) and (max-width:1050px){
  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-page{
    margin-bottom:7px !important;
    padding-bottom:12px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-steps li{
    min-height:38px !important;
    height:38px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-card{
    min-height:88px !important;
    height:88px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-card > img{
    min-height:76px !important;
    height:76px !important;
    max-height:76px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-base-filter{
    min-height:28px !important;
    height:28px !important;
    margin-bottom:6px !important;
    padding:2px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-base-filter > button{
    min-height:24px !important;
    height:24px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-carousel-frame{
    min-height:132px !important;
    height:132px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-grid{
    height:112px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-card{
    min-height:104px !important;
    height:104px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-ingredient-intro{
    min-height:86px !important;
    height:86px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-carousel-frame{
    min-height:136px !important;
    height:136px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-ingredient-carousel{
    height:132px !important;
    padding:3px 0 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-ingredient-card{
    min-height:126px !important;
    height:126px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-ingredient-card button{
    min-height:32px !important;
    height:32px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary{
    gap:4px !important;
    padding:10px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary dl{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-menu-choice{
    display:grid !important;
    gap:2px !important;
    padding:6px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-menu-choice > :is(h3,p,small){
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-menu-choice .lot01-segmented-control{
    min-height:32px !important;
    height:32px !important;
    margin:2px 0 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    :is(
      .lot01-menu-choice .lot01-segmented-control > button,
      .lot01-menu-action,
      .lot01-validate-composition
    ){
    min-height:32px !important;
    height:32px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-allergen-consent{
    padding:6px !important;
  }
}

@media(max-width:520px){
  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]{
    padding-top:80px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-page{
    margin-bottom:12px !important;
    padding-bottom:8px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-steps li{
    min-height:32px !important;
    height:32px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-card{
    min-height:112px !important;
    height:112px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-card > img{
    min-height:102px !important;
    height:102px !important;
    max-height:102px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .custom-builder-controls > .lot01-composition-section:nth-of-type(2) h2 small,
  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .custom-builder-controls > .lot01-composition-section:nth-of-type(4) h2 small{
    display:inline !important;
    margin-left:5px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-base-filter{
    min-height:28px !important;
    height:28px !important;
    margin-bottom:6px !important;
    padding:2px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-base-filter > button{
    min-height:24px !important;
    height:24px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-carousel-frame{
    min-height:240px !important;
    height:240px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-grid{
    height:216px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-card{
    min-height:104px !important;
    height:104px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-card > img{
    min-height:92px !important;
    height:92px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-ingredient-intro{
    min-height:88px !important;
    height:88px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-carousel-frame{
    min-height:170px !important;
    height:170px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-ingredient-carousel{
    height:166px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-ingredient-card{
    min-height:158px !important;
    height:158px !important;
  }
}

/* Cibles tactiles et focus : le visuel reste celui des contrôles maîtres, mais
   les routes livrées exposent au moins 44 px sur tablette et téléphone. */
@media(max-width:1050px){
  html body[data-client-theme] #app .mockup:is([data-page="apropos"],[data-page="personnalisables"])
    > .theme-mode-switch.pb-master-selector-ready,
  html body[data-client-theme] #app .mockup:is([data-page="apropos"],[data-page="personnalisables"])
    > .theme-mode-switch.pb-master-selector-ready > button,
  html body[data-client-theme] #app .mockup:is([data-page="apropos"],[data-page="personnalisables"])
    > .install-home-button.pb-install-route,
  html body[data-client-theme] #app .mockup[data-page="personnalisables"] :is(
    .client-base-choice,
    .lot01-open-ingredients,
    .lot01-ingredient-card > button,
    .lot01-menu-action,
    .lot01-validate-composition,
    .client-tutorial-button,
    .site-legal-footer button
  ),
  html body[data-client-theme] #app .mockup[data-page="personnalisables"]
    :is(.lot01-segmented-control,.lot02-base-filter) > button,
  html body[data-client-theme] #app .mockup:is([data-page="apropos"],[data-page="personnalisables"])
    .client-footer-routes a,
  html body[data-client-theme] .pb-cookie-settings{
    box-sizing:border-box !important;
    min-height:44px !important;
    height:44px !important;
  }
}

/* À propos — composition ordinateur validée (1600 × 3200).
   La coque historique héritait des grandes arches de l'accueil et d'espacements
   conçus pour une page de plus de 4 700 px. Cette fermeture ne concerne que la
   route À propos au-dessus de 1050 px : elle conserve les vrais liens, boutons,
   thèmes et contenus, tout en retrouvant les proportions de la maquette. */
@media(min-width:1051px){
  html body[data-client-theme] #app .mockup[data-page="apropos"]{
    width:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:188px 0 0 !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] > img:first-child{
    width:100% !important;
    height:188px !important;
    object-position:center 22% !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] > .page-logo-home-link{
    inset:18px auto auto 26px !important;
    width:125px !important;
    height:125px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] > .site-nav-overlay{
    position:absolute !important;
    inset:22px 350px auto 170px !important;
    z-index:46 !important;
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    grid-template-rows:44px !important;
    align-items:stretch !important;
    width:auto !important;
    height:44px !important;
    min-height:44px !important;
    margin:0 !important;
    padding:0 !important;
    gap:8px !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"]
    > .site-nav-overlay > .nav-button{
    width:auto !important;
    min-width:0 !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 6px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    color:#18131b !important;
    -webkit-text-fill-color:#18131b !important;
    filter:none !important;
    font:900 12px/1.05 "Barlow Condensed","Arial Narrow",Arial,sans-serif !important;
    letter-spacing:.2px !important;
    text-shadow:none !important;
    text-transform:uppercase !important;
    transform:none !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"]
    > .site-nav-overlay > .nav-button.active{
    border-bottom:4px solid #e31cab !important;
    color:#6d168f !important;
    -webkit-text-fill-color:#6d168f !important;
  }

  html body[data-client-theme="night"] #app .mockup[data-page="apropos"]
    > .site-nav-overlay > .nav-button{
    color:#fff5ff !important;
    -webkit-text-fill-color:#fff5ff !important;
    text-shadow:0 1px 2px rgba(0,0,0,.72) !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] > .quick-actions-overlay{
    inset:18px 24px auto auto !important;
    width:230px !important;
    height:38px !important;
    gap:10px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"]
    > .quick-actions-overlay > .client-quick-action{
    min-height:36px !important;
    height:36px !important;
    padding:0 14px !important;
    font-size:12px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"]
    > .theme-mode-switch.pb-master-selector-ready{
    inset:70px 24px auto auto !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"]
    > .install-home-button.pb-install-route{
    inset:128px 24px auto auto !important;
    min-height:36px !important;
    height:36px !important;
    font-size:12px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] > .client-route-back{
    top:142px !important;
    left:26px !important;
    min-height:34px !important;
    height:34px !important;
    padding:0 13px !important;
    font-size:11px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-page{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-section-shell{
    margin-right:2.2% !important;
    margin-left:2.2% !important;
    border-radius:30px !important;
    box-shadow:7px 8px 0 var(--about-shadow) !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-section-shell::before{
    height:7px !important;
    border-radius:30px 30px 0 0 !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-intro{
    min-height:650px !important;
    margin-top:10px !important;
    padding:54px 20px 28px !important;
    grid-template-columns:minmax(260px,20fr) minmax(0,80fr) !important;
    gap:28px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-portrait img{
    height:500px !important;
    border-width:6px !important;
    border-radius:30px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-portrait figcaption{
    left:12px !important;
    right:12px !important;
    bottom:14px !important;
    min-height:42px !important;
    padding:7px 10px !important;
    font-size:12px !important;
    letter-spacing:.7px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-eyebrow{
    font-size:20px !important;
    letter-spacing:4px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-heading{
    margin:10px 0 8px !important;
    font-size:56px !important;
    line-height:1.08 !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-rule{
    width:118px !important;
    height:5px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-intro-copy h2{
    margin:20px 0 22px !important;
    font-size:25px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-intro-text{
    font-size:18px !important;
    line-height:1.45 !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-intro-text p{
    margin-bottom:14px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-badges{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:10px !important;
    margin-top:14px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-badge{
    min-height:48px !important;
    padding:8px 10px !important;
    font-size:10px !important;
    line-height:1.2 !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-story-section{
    margin-top:42px !important;
    padding:34px 3.8% !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-story-card{
    min-height:710px !important;
    padding:38px 36px !important;
    border-radius:32px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-story-text{
    max-width:1200px !important;
    font-size:24px !important;
    line-height:1.5 !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-story-text p{
    margin-bottom:18px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-section-pad{
    padding-right:2.8% !important;
    padding-left:2.8% !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-experiences{
    padding-top:44px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-section-title{
    font-size:36px !important;
    line-height:1.1 !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-title-rule{
    width:130px !important;
    height:5px !important;
    margin:14px auto 36px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-experience-grid{
    gap:26px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-experience-card{
    min-height:353px !important;
    padding:26px !important;
    border-radius:28px !important;
    box-shadow:6px 7px 0 var(--about-shadow) !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-card-heading{
    gap:16px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-number{
    flex-basis:46px !important;
    height:46px !important;
    font-size:16px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-experience-card h3{
    font-size:22px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-card-copy{
    margin-top:18px !important;
    font-size:16px !important;
    line-height:1.45 !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-card-copy p{
    margin-bottom:14px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-quote{
    margin:32px 1.5% 0 !important;
    min-height:125px !important;
    padding:28px 32px !important;
    border-left-width:12px !important;
    border-radius:28px !important;
    font-size:22px !important;
    line-height:1.35 !important;
    box-shadow:6px 7px 0 var(--about-shadow) !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-project{
    min-height:286px !important;
    margin-top:44px !important;
    padding:30px 32px !important;
    grid-template-columns:minmax(0,66fr) minmax(300px,34fr) !important;
    gap:32px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-project-copy h2{
    margin-bottom:18px !important;
    font-size:29px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-project-copy p{
    margin-bottom:10px !important;
    font-size:16px !important;
    line-height:1.4 !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-training{
    min-height:220px !important;
    padding:30px 20px 12px !important;
    border-radius:24px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-training span{
    font-size:13px !important;
    letter-spacing:1.6px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-training strong{
    margin-top:20px !important;
    font-size:24px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-training b{
    margin-top:16px !important;
    font-size:14px !important;
    line-height:1.3 !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-future-space{
    min-height:48px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-promises{
    padding-top:56px !important;
    padding-bottom:30px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-promise-lead{
    margin:-4px 0 30px !important;
    font-size:16px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"]
    .client-about-promises .client-about-title-rule{
    margin-bottom:30px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-promise-grid{
    gap:40px !important;
    padding:0 3.2% !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-promise-card{
    min-height:150px !important;
    padding:20px 30px !important;
    border-radius:24px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-promise-card h3{
    margin-bottom:12px !important;
    font-size:22px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-promise-card p{
    font-size:16px !important;
    line-height:1.4 !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-cta-row{
    margin-top:36px !important;
    gap:38px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-pill{
    min-width:230px !important;
    min-height:56px !important;
    height:56px !important;
    padding:0 22px !important;
    font-size:16px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .site-legal-footer{
    position:relative !important;
    width:100% !important;
    min-height:88px !important;
    height:88px !important;
    margin:0 !important;
    padding:12px 240px 10px !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:0 !important;
    background-position:center bottom !important;
    background-size:cover !important;
    color:#241627 !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .site-legal-footer{
    background-image:none !important;
  }

  html body[data-client-theme="night"] #app .mockup[data-page="apropos"] .site-legal-footer{
    color:#f7eaff !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-footer-routes{
    display:none !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .site-legal-footer small{
    display:block !important;
    margin:0 auto !important;
    font-size:10px !important;
    line-height:1.35 !important;
    text-align:center !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-bottom-dock{
    position:absolute !important;
    inset:auto 0 10px 0 !important;
    z-index:18 !important;
    width:100% !important;
    min-height:44px !important;
    height:44px !important;
    padding:0 28px !important;
    justify-content:space-between !important;
    pointer-events:none !important;
  }

  html body[data-client-theme]:has(.mockup[data-page="apropos"]){
    position:relative !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"]
    .client-bottom-dock .client-tutorial-button{
    min-height:36px !important;
    height:36px !important;
    padding:0 16px !important;
    font-size:11px !important;
    pointer-events:auto !important;
  }

  html body:has(.mockup[data-page="apropos"]) .pb-cookie-settings{
    position:absolute !important;
    inset:auto auto 10px 12px !important;
    min-height:32px !important;
    height:32px !important;
    margin:0 !important;
    padding:5px 10px !important;
    font-size:10px !important;
  }
}

/* La tablette large (901–1050 px) conserve la navigation réelle sans reprendre
   les arches de l'accueil, qui chevauchaient auparavant le début du portrait. */
@media(min-width:901px) and (max-width:1050px){
  html body[data-client-theme] #app .mockup[data-page="apropos"] > .site-nav-overlay{
    position:absolute !important;
    inset:18px 320px auto 110px !important;
    z-index:46 !important;
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    grid-template-rows:44px !important;
    align-items:stretch !important;
    width:auto !important;
    height:44px !important;
    min-height:44px !important;
    margin:0 !important;
    padding:0 !important;
    gap:4px !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"]
    > .site-nav-overlay > .nav-button{
    width:auto !important;
    min-width:0 !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 3px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    color:#18131b !important;
    -webkit-text-fill-color:#18131b !important;
    filter:none !important;
    font:900 9px/1.05 "Barlow Condensed","Arial Narrow",Arial,sans-serif !important;
    letter-spacing:0 !important;
    text-shadow:none !important;
    text-transform:uppercase !important;
    transform:none !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"]
    > .site-nav-overlay > .nav-button.active{
    border-bottom:3px solid #e31cab !important;
    color:#6d168f !important;
    -webkit-text-fill-color:#6d168f !important;
  }

  html body[data-client-theme="night"] #app .mockup[data-page="apropos"]
    > .site-nav-overlay > .nav-button{
    color:#fff5ff !important;
    -webkit-text-fill-color:#fff5ff !important;
    text-shadow:0 1px 2px rgba(0,0,0,.72) !important;
  }
}

/* Contrastes de fermeture : la carte de pâte attribuée possède une règle Jour
   plus spécifique que le thème Nuit dans la feuille historique. Cette règle
   finale rétablit une surface sombre et des textes lisibles. */
html body[data-client-theme="night"] #app
  .mockup[data-page="personnalisables"] .lot02-dough-card.is-assigned{
  color:#f8edff !important;
  background:rgba(44,19,57,.98) !important;
  border-color:#ed54c5 !important;
}

html body[data-client-theme="night"] #app
  .mockup[data-page="personnalisables"] .lot02-dough-card.is-assigned
  :is(.lot02-dough-copy strong,.lot02-dough-copy small){
  color:#fff3ff !important;
}

html body[data-client-theme="day"] #app
  .mockup[data-page="personnalisables"] .lot01-composition-steps li{
  color:#3d2844 !important;
}

html body[data-client-theme="night"] #app
  .mockup[data-page="personnalisables"] .lot01-composition-steps li{
  color:#f6eaff !important;
}

html body[data-client-theme] #app .mockup:is([data-page="apropos"],[data-page="personnalisables"])
  :is(button,a[href],input,select,textarea):focus-visible,
html body[data-client-theme] .pb-cookie-settings:focus-visible{
  outline:3px solid #1769ff !important;
  outline-offset:3px !important;
}

html body[data-client-theme="night"] #app .mockup:is([data-page="apropos"],[data-page="personnalisables"])
  :is(button,a[href],input,select,textarea):focus-visible,
html body[data-client-theme="night"] .pb-cookie-settings:focus-visible{
  outline-color:#63e6ff !important;
}

/* De 521 à 1050 px, les anciennes deux colonnes explicites entraient en conflit
   avec le carrousel à colonnes implicites : les deux premières cartes pouvaient
   se contracter à zéro. Le rail expose ici deux cartes égales, sur une ligne. */
@media(min-width:521px) and (max-width:1050px){
  html body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-base-grid{
    grid-template-columns:none !important;
    grid-template-rows:minmax(0,auto) !important;
    grid-auto-flow:column !important;
    grid-auto-columns:calc((100% - 10px) / 2) !important;
    column-gap:10px !important;
    row-gap:0 !important;
  }

  html body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-base-card{
    min-width:0 !important;
  }
}

body[data-client-theme="night"] #app .mockup[data-page="personnalisables"] :is(
  .lot01-composition-heading > div > small,
  .lot01-composition-section > p,
  .lot01-global-quantity p,
  .lot01-base-carousel-help,
  .lot01-carousel-help,
  .lot01-total-preview small,
  .lot01-total-preview span,
  .lot01-menu-choice p,
  .lot01-consent-reset-note,
  .lot01-validation-hint
){
  color:var(--pb-final-muted-night) !important;
}

/* Fermeture de spécificité : cette feuille doit gagner sur typography-c et checkout. */
html body[data-client-theme] #app .mockup :is(
  .pb-action-pill,
  .client-route-back,
  .client-quick-action,
  .install-home-button,
  .client-tutorial-button,
  .client-about-pill,
  .client-base-choice,
  .lot01-open-ingredients,
  .lot01-ingredient-card button,
  .lot01-carousel-arrow,
  .lot01-menu-action,
  .lot01-validate-composition,
  .client-professional-footer,
  .lot01-composition-mobile-nav button
){
  box-sizing:border-box !important;
  border:8px 24px solid transparent !important;
  border-image-source:url('/client/assets/client-button-master-v3.png') !important;
  border-image-slice:360 520 fill !important;
  border-image-width:8px 24px !important;
  border-image-outset:0 !important;
  border-image-repeat:stretch !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:0 1px 2px rgba(28,0,35,.9) !important;
}

html body[data-client-theme] #app .mockup :is(
  .pb-action-pill,
  .client-route-back,
  .client-quick-action,
  .install-home-button,
  .client-tutorial-button,
  .client-about-pill,
  .client-base-choice,
  .lot01-open-ingredients,
  .lot01-ingredient-card button,
  .lot01-carousel-arrow,
  .lot01-menu-action,
  .lot01-validate-composition,
  .client-professional-footer,
  .lot01-composition-mobile-nav button
):focus-visible{
  outline:4px solid var(--pb-final-focus) !important;
  outline-offset:3px !important;
}

html body[data-client-theme] #app .mockup[data-page="personnalisables"]
  :is(.lot01-base-carousel-frame,.lot01-carousel-frame){
  grid-template-columns:44px minmax(0,1fr) 44px !important;
  padding:0 !important;
  align-items:center !important;
}

html body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-steps li{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  transform:none !important;
}

html body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-steps li.is-complete{
  background:rgba(195,85,188,.08) !important;
}

html body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-steps li.is-current{
  background:rgba(211,68,172,.16) !important;
  box-shadow:inset 0 -4px 0 #c92fa0 !important;
}

html body[data-client-theme="night"] #app .mockup[data-page="personnalisables"] .lot01-composition-steps li.is-current{
  background:rgba(232,73,189,.22) !important;
}

html body[data-client-theme] #app .mockup[data-page="personnalisables"]
  :is(.lot01-segmented-control,.lot02-base-filter) > button{
  border:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  transform:none !important;
}

html body[data-client-theme] #app .mockup[data-page="personnalisables"]
  :is(.lot01-segmented-control,.lot02-base-filter) > button:is(.active,[aria-pressed="true"]){
  background:rgba(255,255,255,.25) !important;
  background-image:none !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.48),0 0 0 2px rgba(255,255,255,.38),0 4px 8px rgba(49,8,70,.24) !important;
}

/* Le bouton Retour est hors du <header>. Sur les grands formats, le texte occupe
   donc explicitement la seconde colonne ; sur téléphone il reprend toute la ligne. */
@media(min-width:601px){
  html body[data-client-theme] #app .mockup[data-page="personnalisables"]
    .lot01-composition-heading > div{
    grid-column:2 !important;
  }
}

@media(max-width:600px){
  html body[data-client-theme] #app .mockup[data-page="personnalisables"]
    .lot01-composition-heading{
    grid-template-columns:minmax(0,1fr) !important;
    gap:0 !important;
    min-height:0 !important;
  }

  html body[data-client-theme] #app .mockup[data-page="personnalisables"]
    .lot01-composition-heading > div{
    grid-column:1 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-main{
    padding-top:52px !important;
  }
}

/* Dernier verrou de cascade pour les tailles tactiles réelles. */
@media(max-width:1050px){
  html body[data-client-theme] #app .mockup:is([data-page="apropos"],[data-page="personnalisables"])
    > .theme-mode-switch.pb-master-selector-ready,
  html body[data-client-theme] #app .mockup:is([data-page="apropos"],[data-page="personnalisables"])
    > .theme-mode-switch.pb-master-selector-ready > button,
  html body[data-client-theme] #app .mockup:is([data-page="apropos"],[data-page="personnalisables"])
    > .install-home-button.pb-install-route,
  html body[data-client-theme] #app .mockup[data-page="personnalisables"] :is(
    .client-base-choice,
    .lot01-open-ingredients,
    .lot01-ingredient-card button,
    .lot01-menu-action,
    .lot01-validate-composition,
    .client-tutorial-button,
    .site-legal-footer button
  ),
  html body[data-client-theme] #app .mockup[data-page="personnalisables"]
    :is(.lot01-segmented-control,.lot02-base-filter) > button,
  html body[data-client-theme] #app .mockup:is([data-page="apropos"],[data-page="personnalisables"])
    .client-footer-routes a,
  html body[data-client-theme] .pb-cookie-settings{
    box-sizing:border-box !important;
    min-height:44px !important;
    height:44px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="personnalisables"]
    .lot01-segmented-control[aria-label="Quantité de tous les ingrédients"]{
    width:132px !important;
    min-width:132px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="personnalisables"]
    .lot01-segmented-control[aria-label="Quantité de tous les ingrédients"] > button{
    min-width:44px !important;
  }
}
/* Pied de page À propos — structure des compositions validées. */
html body[data-client-theme] #app
  .mockup[data-page="apropos"] .client-about-story-watermark{
  background:transparent !important;
  object-fit:contain !important;
}

html body[data-client-theme] #app
  .mockup[data-page="apropos"] .client-about-footer .client-about-legal{
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
  margin:0 !important;
  color:inherit !important;
  white-space:nowrap !important;
}

html body[data-client-theme] #app
  .mockup[data-page="apropos"] .client-about-footer .client-about-legal a{
  display:inline !important;
  min-width:0 !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  color:inherit !important;
  box-shadow:none !important;
  font:inherit !important;
  text-decoration:none !important;
  text-transform:none !important;
}

html body[data-client-theme] #app
  .mockup[data-page="apropos"] .client-about-footer .client-about-legal a + a::before{
  content:' • ';
}

@media(min-width:1051px){
  html body[data-client-theme] #app
    .mockup[data-page="apropos"] .client-about-footer .client-about-legal{
    position:absolute !important;
    inset:auto auto 12px 397px !important;
    font-size:10px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
  }
}

@media(max-width:520px){
  html body[data-client-theme] #app
    .mockup[data-page="apropos"] .client-about-footer{
    width:calc(100% + 24px) !important;
    margin-left:-12px !important;
    padding:26px 20px 200px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="apropos"] .client-about-footer .client-footer-routes{
    flex:0 0 226px !important;
    width:226px !important;
    margin:0 0 18px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="apropos"] .client-about-footer .client-about-legal{
    margin-top:28px !important;
    font-size:13px !important;
    font-weight:700 !important;
    line-height:1.3 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="apropos"] .client-footer-routes > a:nth-of-type(4){
    display:flex !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="apropos"] .client-professional-bottom{
    display:none !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="apropos"] .client-bottom-dock{
    inset:auto -12px 10px -12px !important;
    width:auto !important;
    min-height:44px !important;
    height:44px !important;
    padding:0 20px !important;
    align-items:center !important;
    flex-direction:row !important;
    justify-content:flex-end !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="apropos"] .client-bottom-dock .client-tutorial-button:last-child{
    flex:0 0 104px !important;
    width:104px !important;
    min-width:104px !important;
    min-height:44px !important;
    height:44px !important;
    margin:0 !important;
  }
}


/* À propos — report source des réglages visuels réellement chargés. */
@media(min-width:1051px){
  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-intro{
    grid-template-columns:447px minmax(0,1fr) !important;
    gap:56px !important;
    padding-right:52px !important;
    padding-left:52px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-portrait{
    margin-top:15px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-portrait img{
    height:524px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] > .page-logo-home-link{
    width:116px !important;
    max-width:116px !important;
  }
}

@media(max-width:520px){
  html body[data-client-theme] #app .mockup[data-page="apropos"]{
    --mobile-remorque-top:250px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] .client-about-portrait img{
    height:430px !important;
    aspect-ratio:auto !important;
    object-fit:cover !important;
    object-position:50% 17% !important;
  }
}

/* À propos ordinateur — géométrie mesurée sur la composition validée 1600 × 3200. */
@media(min-width:1051px){
  html body[data-client-theme] #app
    .mockup[data-page="apropos"] .client-about-section-shell{
    margin-right:3.4% !important;
    margin-left:3.4% !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="apropos"] .client-about-intro{
    grid-template-columns:453px minmax(0,1fr) !important;
    gap:55px !important;
    padding-right:30px !important;
    padding-left:30px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="apropos"] .client-about-story-section{
    padding:34px 5.8% !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="apropos"] .client-about-section-pad{
    padding-right:4.5% !important;
    padding-left:4.5% !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="apropos"] .client-about-experience-grid{
    gap:42px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="apropos"] .client-about-quote{
    margin-right:2.5% !important;
    margin-left:2.5% !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="apropos"] .client-about-project{
    padding-right:48px !important;
    padding-left:48px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="apropos"] .client-about-promise-grid{
    max-width:1302px !important;
    margin-right:auto !important;
    margin-left:auto !important;
    padding-right:0 !important;
    padding-left:0 !important;
    gap:68px !important;
  }
}

@media(min-width:901px){
  html body[data-client-theme] #app .mockup[data-page="personnalisables"] > .client-route-back{
    display:inline-flex !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
}

@media(max-width:900px){
  html body[data-client-theme] #app .mockup[data-page="apropos"]
    > .theme-mode-switch.pb-master-selector-ready{
    position:absolute !important;
    inset:18px 12px auto auto !important;
    margin:0 !important;
    z-index:47 !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"]
    > .quick-actions-overlay{
    position:absolute !important;
    inset:76px 12px auto auto !important;
    width:max-content !important;
    max-width:calc(100% - 24px) !important;
    margin:0 !important;
    z-index:47 !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"]
    > .install-home-button.pb-install-route{
    position:absolute !important;
    inset:128px 12px auto auto !important;
    width:max-content !important;
    max-width:180px !important;
    margin:0 !important;
    z-index:47 !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] > .client-route-back{
    position:absolute !important;
    inset:128px auto auto 12px !important;
    width:max-content !important;
    margin:0 !important;
    z-index:47 !important;
  }

  html body[data-client-theme] #app .mockup[data-page="personnalisables"] > .client-route-back{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}

@media(max-width:520px){
  html body[data-client-theme] #app .mockup[data-page="apropos"]
    > .quick-actions-overlay{
    inset:70px 12px auto auto !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"]
    > .install-home-button.pb-install-route{
    inset:118px 12px auto auto !important;
  }

  html body[data-client-theme] #app .mockup[data-page="apropos"] > .client-route-back{
    inset:118px auto auto 12px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-base-grid{
    grid-template-columns:none !important;
    grid-template-rows:repeat(2,minmax(0,auto)) !important;
    grid-auto-flow:column !important;
    grid-auto-columns:100% !important;
    row-gap:8px !important;
    column-gap:8px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-base-card{
    grid-template-columns:82px minmax(0,1fr) !important;
    min-width:0 !important;
  }

  html body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-base-card > img{
    width:82px !important;
    height:100% !important;
    min-height:96px !important;
  }
}

/* Personnalisables conserve l'en-tête clair/sombre validé : logo à gauche,
   sélecteur puis Compte/Panier à droite. Le décor remorque reste propre à À propos. */
@media(max-width:1050px){
  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]{
    min-height:100dvh !important;
    padding:160px 0 0 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    > .site-nav-overlay{
    display:none !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-page{
    width:calc(100% - 20px) !important;
    margin:0 10px 92px !important;
  }

  html body[data-client-theme="day"] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]{
    background:#fffaf4 !important;
  }

  html body[data-client-theme="night"] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]{
    background:#170b22 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"] > img:first-child{
    display:none !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    > .theme-mode-switch.pb-master-selector-ready{
    position:absolute !important;
    inset:8px 12px auto auto !important;
    z-index:47 !important;
    width:220px !important;
    min-width:220px !important;
    max-width:220px !important;
    height:42px !important;
    min-height:42px !important;
    margin:0 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    > .theme-mode-switch.pb-master-selector-ready > button{
    height:100% !important;
    min-height:100% !important;
    padding:0 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    > .quick-actions-overlay{
    position:absolute !important;
    inset:56px 12px auto auto !important;
    z-index:47 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:180px !important;
    max-width:calc(100% - 24px) !important;
    height:44px !important;
    margin:0 !important;
    gap:6px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    > .quick-actions-overlay > .client-quick-action{
    min-width:0 !important;
    min-height:44px !important;
    height:44px !important;
    padding:4px 8px !important;
    font-size:10px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    > .install-home-button.pb-install-route{
    position:absolute !important;
    inset:106px 12px auto auto !important;
    z-index:47 !important;
    display:flex !important;
    width:max-content !important;
    max-width:180px !important;
    min-height:42px !important;
    margin:0 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    > .client-route-back{
    position:absolute !important;
    inset:170px auto auto 20px !important;
    z-index:48 !important;
    display:inline-flex !important;
    visibility:visible !important;
    width:130px !important;
    min-height:44px !important;
    margin:0 !important;
    pointer-events:auto !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-mobile-nav{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-mobile-nav button{
    min-width:0 !important;
    min-height:44px !important;
  }
}

@media(min-width:601px) and (max-width:1050px){
  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-heading{
    grid-template-columns:140px minmax(0,1fr) !important;
    gap:10px !important;
  }
}

@media(max-width:520px){
  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]{
    padding-top:150px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    > .theme-mode-switch.pb-master-selector-ready{
    width:180px !important;
    min-width:180px !important;
    max-width:180px !important;
    height:36px !important;
    min-height:36px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    > .quick-actions-overlay{
    inset:50px 12px auto auto !important;
    width:150px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    > .install-home-button.pb-install-route{
    inset:100px 12px auto auto !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    > .client-route-back{
    inset:160px auto auto 18px !important;
    width:112px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-main{
    padding-top:52px !important;
  }
}

/* Verrou final : aucune règle responsive antérieure ne réduit les cibles tactiles. */
@media(max-width:1050px){
  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    > .theme-mode-switch.pb-master-selector-ready{
    min-height:44px !important;
    height:44px !important;
  }
}

@media(max-width:1050px){
  html body[data-client-theme] #app .mockup:is([data-page="apropos"],[data-page="personnalisables"])
    > .theme-mode-switch.pb-master-selector-ready,
  html body[data-client-theme] #app .mockup:is([data-page="apropos"],[data-page="personnalisables"])
    > .theme-mode-switch.pb-master-selector-ready > button,
  html body[data-client-theme] #app .mockup:is([data-page="apropos"],[data-page="personnalisables"])
    > .install-home-button.pb-install-route,
  html body[data-client-theme] #app .mockup[data-page="personnalisables"] :is(
    .client-base-choice,
    .lot01-open-ingredients,
    .lot01-ingredient-card button,
    .lot01-menu-action,
    .lot01-validate-composition,
    .client-tutorial-button,
    .site-legal-footer button
  ),
  html body[data-client-theme] #app .mockup[data-page="personnalisables"]
    :is(.lot01-segmented-control,.lot02-base-filter) > button,
  html body[data-client-theme] #app .mockup:is([data-page="apropos"],[data-page="personnalisables"])
    .client-footer-routes a,
  html body[data-client-theme] .pb-cookie-settings{
    box-sizing:border-box !important;
    min-height:44px !important;
    height:44px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="personnalisables"]
    .lot01-segmented-control[aria-label="Quantité de tous les ingrédients"]{
    width:132px !important;
    min-width:132px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="personnalisables"]
    .lot01-segmented-control[aria-label="Quantité de tous les ingrédients"] > button{
    min-width:44px !important;
  }
}
/* Composeur — palette et géométrie des six compositions validées. */
html body[data-client-theme="day"] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]{
  background-color:#fbf5ed !important;
  background-image:none !important;
  color:#2d1735 !important;
}

html body[data-client-theme="night"] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]{
  background-color:#0a060d !important;
  background-image:none !important;
  color:#fff9ff !important;
}

html body[data-client-theme="day"] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-composition-page{
  background:#fffcf7 !important;
}

html body[data-client-theme="night"] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-composition-page{
  background:#120a17 !important;
}

html body[data-client-theme="day"] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(
    .lot02-dough-card,
    .lot01-base-card,
    .lot01-global-quantity,
    .lot01-ingredient-intro,
    .lot01-ingredient-card
  ){
  background:#fff !important;
}

html body[data-client-theme="night"] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(
    .lot02-dough-card,
    .lot01-base-card,
    .lot01-global-quantity,
    .lot01-ingredient-intro,
    .lot01-ingredient-card
  ){
  background:#1f1226 !important;
}

html body[data-client-theme="day"] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(
    .lot01-composition-steps li:not(.is-current),
    .lot02-base-filter,
    .lot01-menu-choice,
    .lot01-total-preview,
    .lot01-cross-contamination,
    .lot01-allergen-consent
  ){
  background:#fbf6ff !important;
}

html body[data-client-theme="night"] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(
    .lot01-composition-steps li:not(.is-current),
    .lot02-base-filter,
    .lot01-menu-choice,
    .lot01-total-preview,
    .lot01-cross-contamination,
    .lot01-allergen-consent
  ){
  background:#2a1732 !important;
}

html body[data-client-theme="day"] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-composition-summary{
  background:#fffafe !important;
}

html body[data-client-theme="night"] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-composition-summary{
  background:#180d1e !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(
    .lot01-carousel-footnote,
    .lot01-base-carousel-help
  ){
  display:none !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot02-allergen-origins-details{
  margin:0 !important;
  padding:5px 0 !important;
  font-size:10px !important;
  line-height:1.25 !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot02-allergen-origins-details > summary{
  cursor:pointer;
  font-weight:800;
}

@media(min-width:1051px){
  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]{
    padding-top:107px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-composition-page{
    width:calc(100% - 48px) !important;
    margin-right:24px !important;
    margin-left:24px !important;
  }
}

@media(max-width:1050px){
  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot02-dough-subtitle-desktop{
    display:none !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-card[data-pb-base-id="base-tomato-classic"]{order:0 !important;}

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-card[data-pb-base-id="base-cream-soft"]{order:1 !important;}

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-card[data-pb-base-id="base-tomato-roasted"]{order:2 !important;}

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-card[data-pb-base-id="base-cream-garlic"]{order:3 !important;}

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-card[data-pb-base-id="base-tomato-spicy"]{order:4 !important;}

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-card[data-pb-base-id="base-cream-mustard"]{order:5 !important;}
}

@media(min-width:521px) and (max-width:1050px){
  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]{
    padding-top:94px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary dl > .lot01-summary-allergens{
    display:none !important;
  }
}

@media(max-width:520px){
  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-main{
    padding-top:0 !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-steps li{
    min-height:34px !important;
  }

  html body[data-client-theme] #app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary dl > :is(.lot01-summary-ingredients,.lot01-summary-allergens){
    display:none !important;
  }
}

/* Fermeture de cascade — Composeur responsive, lot validé 07. */
@media(max-width:1050px){
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-composition-section{margin-bottom:8px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-composition-steps{margin-bottom:8px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-base-grid{scrollbar-width:none !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-base-grid::-webkit-scrollbar{display:none !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .custom-builder-controls > .lot01-composition-section:nth-of-type(4) > p{display:none !important;}
}

@media(min-width:521px) and (max-width:1050px){
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-composition-page{margin-bottom:7px !important;padding-bottom:12px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-composition-steps li{min-height:38px !important;height:38px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot02-dough-card{min-height:88px !important;height:88px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot02-dough-card > img{min-height:76px !important;height:76px !important;max-height:76px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot02-base-filter{min-height:44px !important;height:44px !important;margin-bottom:6px !important;padding:0 !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot02-base-filter > button{min-height:44px !important;height:44px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-base-carousel-frame{min-height:132px !important;height:132px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-base-grid{height:112px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-base-card{min-height:104px !important;height:104px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-ingredient-intro{min-height:86px !important;height:86px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-carousel-frame{min-height:136px !important;height:136px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-ingredient-carousel{height:132px !important;padding:3px 0 !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-ingredient-card{min-height:138px !important;height:auto !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-ingredient-card button{min-height:44px !important;height:44px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-composition-summary{gap:4px !important;padding:10px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-composition-summary dl{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-menu-choice{display:grid !important;gap:2px !important;padding:6px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-menu-choice > :is(h3,p,small){margin-top:0 !important;margin-bottom:0 !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-menu-choice .lot01-segmented-control{min-height:44px !important;height:44px !important;margin:2px 0 !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.lot01-menu-choice .lot01-segmented-control > button,.lot01-menu-action,.lot01-validate-composition){min-height:44px !important;height:44px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-allergen-consent{padding:6px !important;}
}

@media(max-width:520px){
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"]{padding-top:150px !important;}
  html body[data-client-theme] #app#app#app .mockup[data-page="personnalisables"] > .client-route-back{
    inset:100px auto auto 18px !important;
  }
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-composition-page{margin-bottom:12px !important;padding-bottom:8px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-composition-steps li{min-height:32px !important;height:32px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot02-dough-card{min-height:112px !important;height:112px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot02-dough-card > img{min-height:102px !important;height:102px !important;max-height:102px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .custom-builder-controls > .lot01-composition-section:nth-of-type(2) h2 small,
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .custom-builder-controls > .lot01-composition-section:nth-of-type(4) h2 small{display:inline !important;margin-left:5px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot02-base-filter{min-height:44px !important;height:44px !important;margin-bottom:6px !important;padding:0 !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot02-base-filter > button{min-height:44px !important;height:44px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-base-carousel-frame{min-height:240px !important;height:240px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-base-grid{height:216px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-base-card{min-height:104px !important;height:104px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-base-card > img{min-height:92px !important;height:92px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-ingredient-intro{min-height:88px !important;height:88px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-carousel-frame{min-height:170px !important;height:170px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-ingredient-carousel{height:166px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-ingredient-card{min-height:170px !important;height:auto !important;}
}

/* Ajustement final sans troncature des cartes aux deux formats étroits. */
@media(min-width:521px) and (max-width:1050px){
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-composition-summary dl > .lot01-summary-ingredients{grid-column:auto !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-composition-page{margin-bottom:1px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-composition-section{margin-bottom:6px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-base-card{padding:4px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-base-card .client-base-choice{min-height:44px !important;height:44px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-ingredient-intro{min-height:92px !important;height:92px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-ingredient-card{grid-template-columns:52px minmax(0,1fr) !important;gap:2px !important;padding:6px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-ingredient-card-copy{gap:0 !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-ingredient-card > img{width:52px !important;}
}

@media(max-width:520px){
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-composition-page{margin-bottom:8px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-base-card .client-base-choice{min-height:44px !important;height:44px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-base-card{padding:4px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-carousel-frame{min-height:174px !important;height:174px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-ingredient-carousel{height:170px !important;}
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-ingredient-card{min-height:174px !important;height:auto !important;}
}

/* Verrou final d'accessibilite : aucune regle de maquette precedente ne peut
   reduire une cible tactile Client sous 44 px aux largeurs tactiles. */
@media(max-width:1050px){
  html body[data-client-theme] #app .mockup :is(
    button,
    a.nav-button,
    a.client-quick-action,
    a.client-route-back,
    a.client-about-pill,
    a.client-base-choice,
    a.pb-action-pill,
    [role="button"]
  ){
    box-sizing:border-box !important;
    min-height:44px !important;
  }

  html body[data-client-theme] #app .mockup :is(
    a.client-quick-action,
    a.client-route-back,
    a.client-about-pill,
    a.client-base-choice,
    a.pb-action-pill:not(.nav-button)
  ){
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}

/* Contrat visuel verrouillé du 28 août 2026.
   Chaque véritable bouton reprend la capsule Auto / Jour / Nuit. Le maître PNG
   reste intact : un 9-slice isotrope conserve les deux calottes semi-circulaires
   à 22 px pour une cible de 44 px, quelle que soit la longueur du libellé. */
html body[data-client-theme] #app#app#app :is(.pb-action-pill,.pb-action-icon),
html body #pb-professional-intake-root#pb-professional-intake-root :is(.pb-action-pill,.pb-action-icon),
html body #modalBackdrop#modalBackdrop#modalBackdrop :is(.pb-action-pill,.pb-action-icon),
html body #pb-cookie-banner#pb-cookie-banner :is(.pb-action-pill,.pb-action-icon),
html body .pb-cookie-settings{
  box-sizing:border-box !important;
  min-inline-size:48px !important;
  min-block-size:44px !important;
  block-size:44px !important;
  max-block-size:44px !important;
  padding:8px 20px !important;
  border:1px solid transparent !important;
  border-image-source:url('/client/assets/client-button-master-v3.png') !important;
  border-image-slice:433 400 453 400 fill !important;
  border-image-width:55.384px 51.163px 57.953px 51.163px !important;
  border-image-outset:33.384px 29.163px 35.953px 29.163px !important;
  border-image-repeat:stretch !important;
  border-radius:999px !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  line-height:1.05 !important;
  overflow:visible !important;
  text-align:center !important;
  text-shadow:0 1px 2px rgba(28,0,35,.9) !important;
}

html body[data-client-theme] #app#app#app .pb-action-icon,
html body #pb-professional-intake-root#pb-professional-intake-root .pb-action-icon,
html body #modalBackdrop#modalBackdrop#modalBackdrop .pb-action-icon,
html body #pb-cookie-banner#pb-cookie-banner .pb-action-icon{
  inline-size:44px !important;
  min-inline-size:44px !important;
  block-size:44px !important;
  padding:0 !important;
}

html body[data-client-theme] #app#app#app :is(.pb-action-pill,.pb-action-icon):is(:hover,:active,[aria-pressed="true"]),
html body #pb-professional-intake-root#pb-professional-intake-root :is(.pb-action-pill,.pb-action-icon):is(:hover,:active,[aria-pressed="true"]),
html body #modalBackdrop#modalBackdrop#modalBackdrop :is(.pb-action-pill,.pb-action-icon):is(:hover,:active,[aria-pressed="true"]),
html body #pb-cookie-banner#pb-cookie-banner :is(.pb-action-pill,.pb-action-icon):is(:hover,:active,[aria-pressed="true"]),
html body .pb-cookie-settings:is(:hover,:active,[aria-pressed="true"]){
  filter:brightness(1.08) saturate(1.05) !important;
}

html body[data-client-theme] #app#app#app :is(.pb-action-pill,.pb-action-icon):focus-visible,
html body #pb-professional-intake-root#pb-professional-intake-root :is(.pb-action-pill,.pb-action-icon):focus-visible,
html body #modalBackdrop#modalBackdrop#modalBackdrop :is(.pb-action-pill,.pb-action-icon):focus-visible,
html body #pb-cookie-banner#pb-cookie-banner :is(.pb-action-pill,.pb-action-icon):focus-visible,
html body .pb-cookie-settings:focus-visible{
  outline:4px solid var(--pb-final-focus,#f7c948) !important;
  outline-offset:3px !important;
}

html body[data-client-theme] #app#app#app :is(.pb-action-pill,.pb-action-icon):disabled,
html body[data-client-theme] #app#app#app :is(.pb-action-pill,.pb-action-icon)[aria-disabled="true"],
html body #pb-professional-intake-root#pb-professional-intake-root :is(.pb-action-pill,.pb-action-icon):disabled,
html body #pb-professional-intake-root#pb-professional-intake-root :is(.pb-action-pill,.pb-action-icon)[aria-disabled="true"],
html body #modalBackdrop#modalBackdrop#modalBackdrop :is(.pb-action-pill,.pb-action-icon):disabled,
html body #modalBackdrop#modalBackdrop#modalBackdrop :is(.pb-action-pill,.pb-action-icon)[aria-disabled="true"],
html body #pb-cookie-banner#pb-cookie-banner :is(.pb-action-pill,.pb-action-icon):disabled,
html body #pb-cookie-banner#pb-cookie-banner :is(.pb-action-pill,.pb-action-icon)[aria-disabled="true"],
html body .pb-cookie-settings:disabled,
html body .pb-cookie-settings[aria-disabled="true"]{
  cursor:not-allowed !important;
  color:rgba(255,255,255,.72) !important;
  -webkit-text-fill-color:rgba(255,255,255,.72) !important;
}

html body[data-client-theme] #app#app#app :is(.pb-action-pill,.pb-action-icon):is(:disabled,[aria-disabled="true"]),
html body #pb-professional-intake-root#pb-professional-intake-root :is(.pb-action-pill,.pb-action-icon):is(:disabled,[aria-disabled="true"]),
html body #modalBackdrop#modalBackdrop#modalBackdrop :is(.pb-action-pill,.pb-action-icon):is(:disabled,[aria-disabled="true"]),
html body #pb-cookie-banner#pb-cookie-banner :is(.pb-action-pill,.pb-action-icon):is(:disabled,[aria-disabled="true"]),
html body .pb-cookie-settings:is(:disabled,[aria-disabled="true"]){
  filter:grayscale(1) opacity(.58) !important;
}

/* L'ancienne barre rose de navigation v10 ne fait pas partie de la capsule. */
html body[data-client-theme] #app#app#app .mockup .site-nav-overlay .nav-button::after{
  content:none !important;
  display:none !important;
}

/* Liens juridiques : exception explicite au composant bouton. */
html body .pb-action-text-link{
  min-inline-size:0 !important;
  min-block-size:0 !important;
  padding:0 !important;
  border:0 !important;
  border-image:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
  text-decoration:underline !important;
  text-underline-offset:3px !important;
}

/* Rails segmentés génériques : un seul rail continu et une seule lentille active.
   Le sélecteur Auto/Jour/Nuit est volontairement exclu : ses trois PNG d'état
   verrouillés restent l'implémentation exacte et prioritaire. */
html body[data-client-theme] #app#app#app :is(.lot02-base-filter,.lot01-segmented-control,.lot01-segmented,[role="tablist"],[role="radiogroup"]){
  box-sizing:border-box !important;
  block-size:44px !important;
  min-block-size:44px !important;
  max-block-size:44px !important;
  padding:0 !important;
  border:0 !important;
  border-image:none !important;
  border-radius:999px !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  overflow:visible !important;
  position:relative !important;
  z-index:0 !important;
  isolation:isolate !important;
}

html body[data-client-theme] #app#app#app :is(.lot02-base-filter,.lot01-segmented-control,.lot01-segmented,[role="tablist"],[role="radiogroup"])::before{
  content:"" !important;
  box-sizing:border-box !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  border:1px solid transparent !important;
  border-image-source:url('/client/assets/client-button-master-v3.png') !important;
  border-image-slice:433 400 453 400 fill !important;
  border-image-width:55.384px 51.163px 57.953px 51.163px !important;
  border-image-outset:33.384px 29.163px 35.953px 29.163px !important;
  border-image-repeat:stretch !important;
  border-radius:999px !important;
  background:transparent !important;
  box-shadow:none !important;
}

html body[data-client-theme] #app#app#app :is(.lot02-base-filter,.lot01-segmented-control,.lot01-segmented,[role="tablist"],[role="radiogroup"]) > button.pb-segment-control{
  box-sizing:border-box !important;
  min-inline-size:48px !important;
  min-block-size:44px !important;
  min-height:44px !important;
  height:44px !important;
  max-height:44px !important;
  margin:0 !important;
  padding:4px 10px !important;
  border:0 !important;
  border-image:none !important;
  border-radius:999px !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-weight:900 !important;
  line-height:1 !important;
  text-align:center !important;
  text-shadow:0 1px 2px rgba(28,0,35,.9) !important;
  position:relative !important;
  z-index:0 !important;
  isolation:isolate !important;
  transform:none !important;
}

html body[data-client-theme] #app#app#app :is(.lot02-base-filter,.lot01-segmented-control,.lot01-segmented,[role="tablist"],[role="radiogroup"])
  > button.pb-segment-control::before{
  content:"" !important;
  position:absolute !important;
  inset:2px 1px !important;
  border:1px solid transparent !important;
  border-image-source:url('/client/assets/client-button-master-v3.png') !important;
  border-image-slice:433 400 453 400 fill !important;
  border-image-width:50.349px 46.512px 52.674px 46.512px !important;
  border-image-outset:30.349px 26.512px 32.674px 26.512px !important;
  border-image-repeat:stretch !important;
  border-radius:999px !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  opacity:0 !important;
  pointer-events:none !important;
  z-index:-1 !important;
}

html body[data-client-theme] #app#app#app :is(.lot02-base-filter,.lot01-segmented-control,.lot01-segmented,[role="tablist"],[role="radiogroup"])
  > button.pb-segment-control:is([aria-pressed="true"],[aria-selected="true"])::before{
  opacity:1 !important;
  filter:brightness(1.12) saturate(1.05) !important;
}

html body[data-client-theme] #app#app#app :is(.lot02-base-filter,.lot01-segmented-control,.lot01-segmented,[role="tablist"],[role="radiogroup"])
  > button.pb-segment-control:focus-visible{
  outline:3px solid var(--pb-final-focus,#f7c948) !important;
  outline-offset:-3px !important;
}

html body[data-client-theme] #app#app#app .lot01-segmented-control[aria-label="Quantité de tous les ingrédients"]{
  inline-size:148px !important;
  min-inline-size:148px !important;
}

/* Auto / Jour / Nuit : les trois découpes 801 × 104 sont affichées entières,
   au ratio natif, sur toutes les routes Client. Les boutons transparents restent
   des cibles de 44 px sans épaissir ni déformer le sélecteur visible. */
body[data-client-theme-mode] #app#app#app .mockup .theme-mode-switch.pb-master-selector-ready{
  display:block !important;
  aspect-ratio:801 / 104 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding:0 !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background-color:transparent !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:100% 100% !important;
  box-shadow:none !important;
}

body[data-client-theme-mode="auto"] #app#app#app .mockup .theme-mode-switch.pb-master-selector-ready{
  background-image:url('/client/_assets/client-theme-selector-auto-reference-v1.png') !important;
}

body[data-client-theme-mode="day"] #app#app#app .mockup .theme-mode-switch.pb-master-selector-ready{
  background-image:url('/client/_assets/client-theme-selector-day-reference-v1.png') !important;
}

body[data-client-theme-mode="night"] #app#app#app .mockup .theme-mode-switch.pb-master-selector-ready{
  background-image:url('/client/_assets/client-theme-selector-night-reference-v1.png') !important;
}

body[data-client-theme-mode] #app#app#app .mockup .theme-mode-switch.pb-master-selector-ready > .pb-segment-control{
  position:absolute !important;
  top:50% !important;
  width:33.333333% !important;
  min-width:0 !important;
  height:44px !important;
  min-height:44px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-image:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  font-size:0 !important;
  transform:translateY(-50%) !important;
}

body[data-client-theme-mode] #app#app#app .mockup .theme-mode-switch.pb-master-selector-ready > .pb-segment-control:nth-child(1){left:0 !important;}
body[data-client-theme-mode] #app#app#app .mockup .theme-mode-switch.pb-master-selector-ready > .pb-segment-control:nth-child(2){left:33.333333% !important;}
body[data-client-theme-mode] #app#app#app .mockup .theme-mode-switch.pb-master-selector-ready > .pb-segment-control:nth-child(3){left:66.666667% !important;}

body[data-client-theme-mode] #app#app#app .mockup .theme-mode-switch.pb-master-selector-ready > .pb-segment-control:focus-visible{
  outline:3px solid #fff !important;
  outline-offset:-4px !important;
  box-shadow:inset 0 0 0 2px rgba(79,8,104,.82) !important;
}

/* La planche Composeur possède d'anciens verrous de hauteur très spécifiques.
   Cette fermeture conserve la cible tactile de 44 px portée par le rail, tout
   tout en gardant une cible tactile réelle de 44 px et une lentille visuelle
   intérieure de 40 px. */
html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  :is(.lot02-base-filter,.lot01-segmented-control,.lot01-segmented){
  padding:0 !important;
}

html body[data-client-theme] #app
  .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
  :is(.lot02-base-filter,.lot01-segmented-control,.lot01-segmented) > button.pb-segment-control{
  min-block-size:44px !important;
  min-height:44px !important;
  height:44px !important;
  max-height:44px !important;
}

/* Fermeture universelle des libellés : une capsule reste une seule ligne de
   44 px, y compris dans le panier, les modales Compte et l'aide Installer. */
html body[data-client-theme] #app#app#app :is(.pb-action-pill,.pb-action-icon),
html body #pb-professional-intake-root#pb-professional-intake-root :is(.pb-action-pill,.pb-action-icon),
html body #modalBackdrop#modalBackdrop#modalBackdrop :is(.pb-action-pill,.pb-action-icon),
html body #pb-cookie-banner#pb-cookie-banner :is(.pb-action-pill,.pb-action-icon){
  white-space:nowrap !important;
}

html body[data-client-theme] #app#app#app .slot-options > .pb-action-pill{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  padding-inline:12px !important;
  gap:4px !important;
  font-size:12px !important;
}

html body[data-client-theme] #app#app#app :is(.pay-options,.account-tabs) > .pb-action-pill,
html body #modalBackdrop#modalBackdrop#modalBackdrop :is(.pay-options,.account-tabs) > .pb-action-pill{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  text-align:center !important;
}

html body[data-client-theme] #app#app#app :is(.pay-options,.account-tabs) > .pb-action-pill > small,
html body #modalBackdrop#modalBackdrop#modalBackdrop :is(.pay-options,.account-tabs) > .pb-action-pill > small{
  position:absolute !important;
  inline-size:1px !important;
  block-size:1px !important;
  margin:-1px !important;
  padding:0 !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Les actions Contact / Allergènes restent des capsules dans les pieds de
   page ; seules les véritables mentions juridiques conservent le lien texte. */
html body[data-client-theme] #app#app#app
  :is(.site-legal-footer,.client-home-footer,.client-about-legal,.lot01-product-legal)
  :is(a,button).pb-action-pill,
html body[data-client-theme] #modalBackdrop#modalBackdrop#modalBackdrop
  .lot01-product-legal :is(a,button).pb-action-pill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-inline-size:48px !important;
  min-block-size:44px !important;
  block-size:44px !important;
  margin:4px !important;
  padding:8px 20px !important;
  text-decoration:none !important;
}

html body[data-client-theme] #app#app#app
  :is(.site-legal-footer,.client-home-footer,.client-about-legal,.lot01-product-legal)
  :is(a,button).pb-action-pill::before,
html body[data-client-theme] #modalBackdrop#modalBackdrop#modalBackdrop
  .lot01-product-legal :is(a,button).pb-action-pill::before{
  content:none !important;
  display:none !important;
}

/* Épaisseur unique du Site Client : 44 px comme Auto / Jour / Nuit. La
   largeur de chaque capsule suit uniquement la longueur de son libellé. */
html body[data-client-theme] #app#app#app .pb-action-pill,
html body #pb-professional-intake-root#pb-professional-intake-root .pb-action-pill,
html body #modalBackdrop#modalBackdrop#modalBackdrop .pb-action-pill,
html body #pb-cookie-banner#pb-cookie-banner .pb-action-pill,
html body .pb-cookie-settings{
  inline-size:fit-content !important;
  width:fit-content !important;
  max-inline-size:100% !important;
  min-block-size:44px !important;
  block-size:44px !important;
  max-block-size:44px !important;
  justify-self:center !important;
}

/* Le détourage sombre provenait du rectangle opaque des trois découpes.
   Le masque arrondi et le léger surdimensionnement vertical ne modifient ni
   les textes ni les couleurs : ils retirent uniquement le bord extérieur. */
body[data-client-theme-mode] #app#app#app .mockup .theme-mode-switch.pb-master-selector-ready{
  inline-size:min(339px,calc(100vw - 32px)) !important;
  width:min(339px,calc(100vw - 32px)) !important;
  min-inline-size:0 !important;
  max-inline-size:339px !important;
  block-size:44px !important;
  height:44px !important;
  min-block-size:44px !important;
  max-block-size:44px !important;
  aspect-ratio:auto !important;
  overflow:hidden !important;
  border-radius:999px !important;
  background-position:center !important;
  background-size:100% 112% !important;
  box-shadow:none !important;
  filter:none !important;
}

/* Accueil : trois niveaux distincts, avec 12 px de respiration verticale. */
@media(min-width:901px){
  html body[data-client-theme] #app#app#app .mockup[data-page="accueil"] .quick-actions-overlay{
    top:22px !important;
    right:3.2% !important;
  }

  html body[data-client-theme] #app#app#app .mockup[data-page="accueil"] .theme-mode-switch{
    top:78px !important;
    right:3.2% !important;
    left:auto !important;
    transform:none !important;
  }

  html body[data-client-theme] #app#app#app .mockup[data-page="accueil"] .install-home-button{
    top:134px !important;
    right:3.2% !important;
    left:auto !important;
  }
}

@media(max-width:900px){
  html body[data-client-theme] #app#app#app .mockup[data-page="accueil"] .theme-mode-switch{
    position:absolute !important;
    top:14px !important;
    right:auto !important;
    left:50% !important;
    transform:translateX(-50%) !important;
  }

  html body[data-client-theme] #app#app#app .mockup[data-page="accueil"] .quick-actions-overlay{
    position:absolute !important;
    top:70px !important;
    right:24px !important;
    left:auto !important;
  }

  html body[data-client-theme] #app#app#app .mockup[data-page="accueil"] .install-home-button{
    position:absolute !important;
    top:126px !important;
    right:24px !important;
    left:auto !important;
  }
}

/* Aucun panneau flouté ou coloré derrière les réseaux sociaux et les
   informations légales, quel que soit le thème ou la page. */
html body[data-client-theme] #app#app#app .site-legal-footer,
html body[data-client-theme] #app#app#app :is(.client-home-social,.client-footer-social,.client-home-legal,.client-about-legal,.lot01-product-legal),
html body[data-client-theme] #modalBackdrop#modalBackdrop#modalBackdrop .lot01-product-legal{
  border:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:none !important;
}

/* Correction visuelle du 28 août 2026 : la cible interactive reste à 44 px
   pour le clavier et le tactile, mais la peau visible ne mesure plus que
   32 px. Cette fermeture s'applique à toutes les capsules du Site Client. */
html body[data-client-theme] #app#app#app :is(.pb-action-pill,.pb-action-icon),
html body #pb-professional-intake-root#pb-professional-intake-root :is(.pb-action-pill,.pb-action-icon),
html body #modalBackdrop#modalBackdrop#modalBackdrop :is(.pb-action-pill,.pb-action-icon),
html body #pb-cookie-banner#pb-cookie-banner :is(.pb-action-pill,.pb-action-icon),
html body .pb-cookie-settings{
  isolation:isolate !important;
  contain:layout !important;
  padding-block:6px !important;
  padding-inline:14px !important;
  border:0 !important;
  border-image:none !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Bastien était le seul contrôle maître encore positionné en static par une
   ancienne couche. Hors Accueil, il reste dans le flux avec des coordonnées
   neutralisées. Sur l'Accueil, il reprend son ancrage absolu validé en bas à
   droite. Installer et l'action professionnelle gardent leur propre géométrie. */
html body[data-client-theme] #app#app#app
  .mockup:not([data-page="accueil"]) .client-bottom-dock
  > button.client-tutorial-button.pb-action-pill:not(.client-professional-bottom){
  position:relative !important;
  inset:auto !important;
}

html body[data-client-theme] #app#app#app
  .mockup[data-page="accueil"] .client-bottom-dock
  > button.client-tutorial-button.pb-action-pill:not(.client-professional-bottom){
  position:absolute !important;
}

html body #pb-cookie-banner#pb-cookie-banner button.pb-action-pill{
  position:relative !important;
  inset:auto !important;
}

html body[data-client-theme] #app#app#app
  .mockup[data-page="apropos"] button.client-about-pill.pb-action-pill{
  position:relative !important;
  inset:auto !important;
}

@media(max-width:900px){
  html body[data-client-theme] #app#app#app
    .mockup[data-page="apropos"] .client-bottom-dock
    > button.client-professional-bottom.pb-action-pill{
    position:relative !important;
    inset:auto !important;
  }
}

html body[data-client-theme] #app#app#app :is(.pb-action-pill,.pb-action-icon)::before,
html body #pb-professional-intake-root#pb-professional-intake-root :is(.pb-action-pill,.pb-action-icon)::before,
html body #modalBackdrop#modalBackdrop#modalBackdrop :is(.pb-action-pill,.pb-action-icon)::before,
html body #pb-cookie-banner#pb-cookie-banner :is(.pb-action-pill,.pb-action-icon)::before,
html body .pb-cookie-settings::before{
  content:"" !important;
  display:block !important;
  box-sizing:border-box !important;
  position:absolute !important;
  inset:auto 0 auto 0 !important;
  top:50% !important;
  block-size:32px !important;
  height:32px !important;
  transform:translateY(-50%) !important;
  z-index:-1 !important;
  pointer-events:none !important;
  border:1px solid transparent !important;
  border-image-source:url('/client/assets/client-button-master-v3.png') !important;
  border-image-slice:433 400 453 400 fill !important;
  border-image-width:40.279px 37.209px 42.148px 37.209px !important;
  border-image-outset:24.279px 21.209px 26.148px 21.209px !important;
  border-image-repeat:stretch !important;
  border-radius:999px !important;
  background:transparent !important;
  box-shadow:none !important;
}

html body[data-client-theme] #app#app#app .pb-action-icon,
html body #pb-professional-intake-root#pb-professional-intake-root .pb-action-icon,
html body #modalBackdrop#modalBackdrop#modalBackdrop .pb-action-icon,
html body #pb-cookie-banner#pb-cookie-banner .pb-action-icon{
  padding:0 !important;
}

html body[data-client-theme] #app#app#app .pb-action-icon::before,
html body #pb-professional-intake-root#pb-professional-intake-root .pb-action-icon::before,
html body #modalBackdrop#modalBackdrop#modalBackdrop .pb-action-icon::before,
html body #pb-cookie-banner#pb-cookie-banner .pb-action-icon::before{
  inset:auto !important;
  top:50% !important;
  left:50% !important;
  inline-size:32px !important;
  width:32px !important;
  block-size:32px !important;
  height:32px !important;
  transform:translate(-50%,-50%) !important;
}

html body[data-client-theme] #app#app#app :is(.pb-action-pill,.pb-action-icon) :is(.pb-client-icon,[data-pb-client-icon],svg),
html body #pb-professional-intake-root#pb-professional-intake-root :is(.pb-action-pill,.pb-action-icon) :is(.pb-client-icon,[data-pb-client-icon],svg),
html body #modalBackdrop#modalBackdrop#modalBackdrop :is(.pb-action-pill,.pb-action-icon) :is(.pb-client-icon,[data-pb-client-icon],svg){
  inline-size:16px !important;
  block-size:16px !important;
  max-inline-size:16px !important;
  max-block-size:16px !important;
}

/* Les rares boutons input ne peuvent pas porter de pseudo-élément : leur
   boîte visible est donc directement ramenée à la même épaisseur de 32 px. */
html body[data-client-theme] #app#app#app input.pb-action-pill,
html body #pb-professional-intake-root#pb-professional-intake-root input.pb-action-pill,
html body #modalBackdrop#modalBackdrop#modalBackdrop input.pb-action-pill{
  min-block-size:32px !important;
  block-size:32px !important;
  max-block-size:32px !important;
  padding:4px 14px !important;
  border:1px solid transparent !important;
  border-image-source:url('/client/assets/client-button-master-v3.png') !important;
  border-image-slice:433 400 453 400 fill !important;
  border-image-width:40.279px 37.209px 42.148px 37.209px !important;
  border-image-outset:24.279px 21.209px 26.148px 21.209px !important;
  border-image-repeat:stretch !important;
}

/* Les rails segmentés conservent leur cible tactile de 44 px, avec un rail
   rose visible de 32 px et une lentille active plus fine. */
html body[data-client-theme] #app#app#app
  :is(.lot02-base-filter,.lot01-segmented-control,.lot01-segmented,[role="tablist"],[role="radiogroup"])::before{
  inset:6px 0 !important;
  border-image-width:40.279px 37.209px 42.148px 37.209px !important;
  border-image-outset:24.279px 21.209px 26.148px 21.209px !important;
}

html body[data-client-theme] #app#app#app
  :is(.lot02-base-filter,.lot01-segmented-control,.lot01-segmented,[role="tablist"],[role="radiogroup"])
  > button.pb-segment-control::before{
  inset:7px 1px !important;
  border-image-width:37.762px 34.884px 39.506px 34.884px !important;
  border-image-outset:22.762px 19.884px 24.506px 19.884px !important;
}

/* Auto / Jour / Nuit suit la même règle : 44 px cliquables, 32 px visibles.
   Le PNG reste la seule source de couleur, de courbure et de relief. */
body[data-client-theme-mode] #app#app#app .mockup .theme-mode-switch.pb-master-selector-ready{
  isolation:isolate !important;
  overflow:visible !important;
  background-image:none !important;
  background-size:0 0 !important;
}

body[data-client-theme-mode] #app#app#app .mockup .theme-mode-switch.pb-master-selector-ready::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:6px 0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  border-radius:999px !important;
  background-color:transparent !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:100% 112% !important;
  box-shadow:none !important;
}

body[data-client-theme-mode="auto"] #app#app#app .mockup .theme-mode-switch.pb-master-selector-ready::before{
  background-image:url('/client/_assets/client-theme-selector-auto-reference-v1.png') !important;
}

body[data-client-theme-mode="day"] #app#app#app .mockup .theme-mode-switch.pb-master-selector-ready::before{
  background-image:url('/client/_assets/client-theme-selector-day-reference-v1.png') !important;
}

body[data-client-theme-mode="night"] #app#app#app .mockup .theme-mode-switch.pb-master-selector-ready::before{
  background-image:url('/client/_assets/client-theme-selector-night-reference-v1.png') !important;
}

body[data-client-theme-mode] #app#app#app .mockup .theme-mode-switch.pb-master-selector-ready > .pb-segment-control{
  z-index:1 !important;
}

/* Navigation principale : les six entrées forment désormais un groupe court,
   réellement centré, sans grandes pistes 1fr entre les capsules. */
@media(min-width:901px){
  html body[data-client-theme] #app#app#app
    .mockup:not([data-page="personnalisables"]) > .site-nav-overlay{
    left:50% !important;
    right:auto !important;
    width:max-content !important;
    max-width:calc(100vw - 380px) !important;
    display:grid !important;
    grid-template-columns:repeat(6,max-content) !important;
    justify-content:center !important;
    align-items:center !important;
    gap:4px !important;
    transform:translateX(-50%) !important;
  }

  html body[data-client-theme] #app#app#app
    .mockup:not([data-page="personnalisables"]) > .site-nav-overlay > .nav-button.pb-action-pill{
    min-inline-size:0 !important;
    padding-inline:10px !important;
    justify-self:center !important;
  }
}

@media(min-width:901px) and (max-width:1050px){
  html body[data-client-theme] #app#app#app
    .mockup:not([data-page="personnalisables"]) > .site-nav-overlay{
    max-width:calc(100vw - 330px) !important;
    gap:2px !important;
  }

  html body[data-client-theme] #app#app#app
    .mockup:not([data-page="personnalisables"]) > .site-nav-overlay > .nav-button.pb-action-pill{
    padding-inline:7px !important;
    font-size:clamp(9px,1.05vw,11px) !important;
  }
}

/* Fermeture responsive transversale du 28 août 2026.
   `contain:layout` ci-dessus donne à chaque contrôle son propre contenant de
   positionnement sans remplacer les coordonnées des rares boutons absolus ou
   fixes. La peau 3D ne peut donc plus s'étirer jusqu'au panneau, au carrousel
   ou à la page entière. */
html body[data-client-theme] #app#app#app :is(.site-nav-overlay,.quick-actions-overlay,.client-bottom-dock),
html body #modalBackdrop#modalBackdrop#modalBackdrop :is(.quick-actions-overlay,.client-bottom-dock){
  border:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:none !important;
}

/* Le Menu doit grandir avec ses cartes. Les anciennes hauteurs de planche et
   les positions absolues du footer provoquaient un recouvrement réel sur les
   téléphones et les tablettes. */
@media(max-width:900px){
  html body[data-client-theme] #app#app#app .mockup[data-page="menu"]{
    min-block-size:100dvh !important;
    block-size:auto !important;
    height:auto !important;
    max-block-size:none !important;
    max-height:none !important;
    overflow:visible !important;
    padding-bottom:28px !important;
  }

  html body[data-client-theme] #app#app#app
    .mockup[data-page="menu"] > .client-page-content{
    position:relative !important;
    inset:auto !important;
    min-block-size:0 !important;
    block-size:auto !important;
    height:auto !important;
    max-block-size:none !important;
    max-height:none !important;
    padding-bottom:82px !important;
    overflow:visible !important;
  }

  html body[data-client-theme] #app#app#app
    .mockup[data-page="menu"] > .client-page-content > .client-grid{
    position:relative !important;
    inset:auto !important;
    min-block-size:0 !important;
    block-size:auto !important;
    height:auto !important;
    max-block-size:none !important;
    max-height:none !important;
    overflow:visible !important;
  }

  html body[data-client-theme] #app#app#app
    .mockup[data-page="menu"] > .client-page-content > .lot01-menu-votes-cta{
    bottom:18px !important;
  }

  html body[data-client-theme] #app#app#app
    .mockup[data-page="menu"] > .site-legal-footer{
    position:relative !important;
    inset:auto !important;
    inline-size:calc(100% - 20px) !important;
    width:calc(100% - 20px) !important;
    min-block-size:0 !important;
    block-size:auto !important;
    height:auto !important;
    max-block-size:none !important;
    max-height:none !important;
    margin:12px 10px 0 !important;
    overflow:visible !important;
  }

  html body[data-client-theme] #app#app#app
    .mockup[data-page="menu"] > .client-bottom-dock{
    position:relative !important;
    inset:auto !important;
    inline-size:fit-content !important;
    width:fit-content !important;
    min-block-size:44px !important;
    block-size:44px !important;
    height:44px !important;
    margin:12px 12px 0 auto !important;
  }
}

/* Les fiches produit tablette restent dans leur dialogue : contenu, prix,
   allergènes et navigation occupent désormais leur hauteur réelle. */
@media(min-width:521px) and (max-width:1050px){
  html body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-facts{
    min-block-size:0 !important;
    block-size:auto !important;
    height:auto !important;
    max-block-size:none !important;
    max-height:none !important;
    overflow:visible !important;
  }

  html body[data-client-theme] .modal-backdrop[data-product-sheet="lot01"] .lot01-product-route-nav{
    position:static !important;
    inset:auto !important;
    margin-top:10px !important;
  }
}

/* Le composeur garde ses rails horizontaux mais aucune information de
   sécurité ni carte ne dépend plus d'une hauteur rigide aux formats tactiles. */
@media(max-width:1050px){
  html body[data-client-theme] #app#app#app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-composition-summary dl > :is(.lot01-summary-ingredients,.lot01-summary-allergens){
    display:grid !important;
    grid-column:1 / -1 !important;
  }

  html body[data-client-theme] #app#app#app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .custom-builder-controls > .lot01-composition-section:nth-of-type(4) > p{
    display:block !important;
  }

  html body[data-client-theme] #app#app#app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    :is(.lot01-composition-steps li,.lot02-dough-card,.lot01-base-carousel-frame,
        .lot01-base-grid,.lot01-base-card,.lot01-ingredient-intro,
        .lot01-carousel-frame,.lot01-ingredient-carousel,.lot01-ingredient-card){
    max-block-size:none !important;
    max-height:none !important;
  }

  html body[data-client-theme] #app#app#app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    :is(.lot01-composition-steps li,.lot02-dough-card,.lot01-base-carousel-frame,
        .lot01-base-grid,.lot01-base-card,.lot01-ingredient-intro,
        .lot01-carousel-frame,.lot01-ingredient-carousel,.lot01-ingredient-card){
    block-size:auto !important;
    height:auto !important;
  }

  html body[data-client-theme] #app#app#app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    :is(.lot01-base-grid,.lot01-ingredient-carousel){
    overflow-x:auto !important;
    overflow-y:visible !important;
    scrollbar-width:thin !important;
  }

  html body[data-client-theme] #app#app#app
    .mockup[data-page="personnalisables"][data-client-lot01-board="07"]
    .lot01-base-grid::-webkit-scrollbar{
    display:block !important;
    block-size:6px !important;
  }
}

/* Les libellés restent sur une seule ligne tant qu'ils tiennent. Sur les
   écrans très étroits, les actions longues peuvent se replier sans augmenter
   la peau visible : la cible tactile demeure de 44 px. */
@media(max-width:360px){
  html body[data-client-theme] #app#app#app
    :is(.slot-options,.pay-options,.account-tabs,.client-choice-row,.event-category-actions,.actions)
    > .pb-action-pill{
    min-inline-size:0 !important;
    max-inline-size:calc(100vw - 24px) !important;
    padding-inline:10px !important;
    font-size:clamp(9px,3vw,11px) !important;
  }
}

/* Ancrages explicites des hôtes statiques les plus visibles. Ils complètent
   la containment globale et documentent le contrat vérifié dans les captures. */
html body[data-client-theme] #app#app#app
  .mockup > .site-nav-overlay > .nav-button.pb-action-pill,
html body[data-client-theme] #app#app#app
  .mockup > .quick-actions-overlay > .client-quick-action.pb-action-pill,
html body[data-client-theme] #app#app#app
  .mockup .client-footer-routes > a.pb-action-pill,
html body[data-client-theme] #app#app#app
  .mockup .site-legal-footer > button.pb-action-pill{
  position:relative !important;
  inset:auto !important;
  inline-size:fit-content !important;
  width:fit-content !important;
  min-inline-size:44px !important;
  min-block-size:44px !important;
  block-size:44px !important;
  max-block-size:44px !important;
  flex:0 0 auto !important;
  justify-self:center !important;
}

html body[data-client-theme] #app#app#app
  .mockup .client-footer-routes > a.pb-action-pill::before,
html body[data-client-theme] #app#app#app
  .mockup .site-legal-footer > button.pb-action-pill::before{
  content:"" !important;
  display:block !important;
}

/* Menu téléphone / tablette : le logo, Compte/Panier, le sélecteur de thème,
   Retour et le titre occupent quatre lignes distinctes. La fermeture en flux
   précédente avait laissé le bloc Compte/Panier dans la mise en page normale,
   ce qui le repoussait à gauche et faisait remonter le contenu sous l'en-tête. */
@media(max-width:900px){
  html body[data-client-theme] #app#app#app
    .mockup[data-page="menu"] > .quick-actions-overlay{
    position:absolute !important;
    inset:6px 12px auto auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;
    inline-size:max-content !important;
    width:max-content !important;
    min-block-size:44px !important;
    block-size:44px !important;
    height:44px !important;
    margin:0 !important;
  }

  html body[data-client-theme] #app#app#app
    .mockup[data-page="menu"] > .quick-actions-overlay > .client-quick-action.pb-action-pill{
    flex:0 0 auto !important;
    inline-size:fit-content !important;
    width:fit-content !important;
  }

  html body[data-client-theme] #app#app#app
    .mockup[data-page="menu"] > .theme-mode-switch{
    position:absolute !important;
    inset:56px 12px auto auto !important;
    inline-size:min(339px,calc(100% - 24px)) !important;
    width:min(339px,calc(100% - 24px)) !important;
    min-block-size:44px !important;
    block-size:44px !important;
    height:44px !important;
    transform:none !important;
  }

  html body[data-client-theme] #app#app#app
    .mockup[data-page="menu"] > .client-route-back.pb-action-pill{
    position:absolute !important;
    inset:106px auto auto 12px !important;
    inline-size:fit-content !important;
    width:fit-content !important;
  }

  html body[data-client-theme] #app#app#app .mockup[data-page="menu"]{
    padding-top:154px !important;
  }

  html body[data-client-theme] #app#app#app
    .mockup[data-page="menu"] > .client-page-content{
    inline-size:calc(100% - 20px) !important;
    width:calc(100% - 20px) !important;
    margin:0 10px !important;
  }
}

/* Les navigateurs tablette réservent jusqu'à 15 px à la barre de défilement
   verticale. Placée après la fermeture Menu, cette règle garde les capsules
   entièrement dans la zone visible, sans les masquer sous cette barre. */
@media(min-width:601px) and (max-width:900px){
  html body[data-client-theme] #app#app#app
    .mockup[data-page="menu"] > .quick-actions-overlay{
    right:27px !important;
  }

  html body[data-client-theme] #app#app#app
    .mockup[data-page="menu"] > .theme-mode-switch{
    right:27px !important;
  }

  html body[data-client-theme] #app#app#app
    .mockup[data-page="menu"] > .client-bottom-dock{
    margin-right:27px !important;
  }

  html body[data-client-theme] #app#app#app
    .mockup[data-page="apropos"] > .install-home-button.pb-install-route{
    right:27px !important;
    left:auto !important;
  }

  html body[data-client-theme] #app#app#app
    .mockup[data-page="personnalisables"] > .install-home-button.pb-install-route{
    position:relative !important;
    inset:auto !important;
    margin-right:27px !important;
    margin-left:auto !important;
  }
}

/* Accueil tactile Jour : la composition validée place l'accroche blanche sur
   la remorque et le sable. Le contour sombre assure la même lisibilité que
   dans la référence, sans ajouter de panneau ni de voile. */
@media(max-width:900px){
  body[data-client-theme="day"] #app#app#app
    .mockup[data-page="accueil"][data-client-fidelity="v10"]
    .home-quality-teaser :is(h1,small,small span){
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    text-shadow:0 2px 3px rgba(0,0,0,.92),0 0 8px rgba(0,0,0,.48) !important;
  }
}
/* ===== CORRECTIONS CLIENT 20260828 : shell unifié, services et personnalisables ===== */
html:not(.modal-open){
  overflow-y:scroll !important;
  overflow-x:hidden !important;
}
html body[data-client-theme]:not(.modal-open){
  overflow-y:visible !important;
  overflow-x:hidden !important;
}

html body[data-client-theme] #app#app#app .mockup > .page-logo-home-link{
  position:absolute !important;
  inset:12px auto auto 18px !important;
  inline-size:96px !important;
  block-size:96px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  z-index:48 !important;
}
html body[data-client-theme] #app#app#app .mockup > .page-logo-home-link > .page-logo-overlay{
  position:static !important;
  display:block !important;
  inline-size:100% !important;
  block-size:100% !important;
  object-fit:contain !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.35)) !important;
}
html body[data-client-theme] #app#app#app .mockup > .client-mobile-top-logo{
  display:none !important;
}

html body[data-client-theme] #app#app#app .mockup:not([data-page="accueil"]){
  min-block-size:max(100vh,1024px) !important;
  padding-top:176px !important;
  overflow:visible !important;
}
html body[data-client-theme] #app#app#app .mockup:not([data-page="accueil"]) > .client-scene-image{
  position:absolute !important;
  inset:0 !important;
  inline-size:100% !important;
  block-size:100% !important;
  object-fit:cover !important;
  object-position:center top !important;
}

html body[data-client-theme] #app#app#app .mockup > .theme-mode-switch{
  position:absolute !important;
  inset:12px auto auto 50% !important;
  transform:translateX(-50%) !important;
  inline-size:min(380px,calc(100% - 260px)) !important;
  block-size:44px !important;
  z-index:52 !important;
}
html body[data-client-theme] #app#app#app .mockup > .quick-actions-overlay{
  position:absolute !important;
  inset:62px auto auto 50% !important;
  transform:translateX(-50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  inline-size:max-content !important;
  block-size:44px !important;
  z-index:52 !important;
}
html body[data-client-theme] #app#app#app .mockup > .quick-actions-overlay > .client-quick-action{
  min-inline-size:118px !important;
  block-size:44px !important;
  justify-content:center !important;
  text-align:center !important;
  font-size:13px !important;
}
html body[data-client-theme] #app#app#app .mockup > .install-home-button{
  position:absolute !important;
  inset:62px calc(50% - 290px) auto auto !important;
  transform:none !important;
  inline-size:132px !important;
  block-size:44px !important;
  z-index:52 !important;
}
html body[data-client-theme] #app#app#app .mockup > .site-nav-overlay{
  position:absolute !important;
  inset:112px auto auto 50% !important;
  transform:translateX(-50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  inline-size:min(930px,calc(100% - 150px)) !important;
  block-size:44px !important;
  margin:0 !important;
  z-index:51 !important;
}
html body[data-client-theme] #app#app#app .mockup > .site-nav-overlay > .nav-button{
  flex:0 1 auto !important;
  min-inline-size:104px !important;
  block-size:44px !important;
  padding-inline:14px !important;
  white-space:nowrap !important;
  text-align:center !important;
}
html body[data-client-theme] #app#app#app .mockup > .site-nav-overlay > .nav-button:nth-child(6){
  min-inline-size:154px !important;
}
html body[data-client-theme] #app#app#app .mockup > .client-route-back{
  display:none !important;
}

html body[data-client-theme] #app#app#app .client-bottom-dock{
  position:fixed !important;
  inset:auto 18px 18px auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  inline-size:max-content !important;
  margin:0 !important;
  z-index:90 !important;
}
html body[data-client-theme] #app#app#app .mockup:not([data-page="accueil"]) .client-professional-bottom{
  display:none !important;
}

html body[data-client-theme] #app#app#app .site-legal-footer.client-service-footer{
  position:relative !important;
  inset:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:8px 18px !important;
  inline-size:calc(100% - 28px) !important;
  margin:28px 14px 84px !important;
  padding:10px 8px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
html body[data-client-theme] #app#app#app .client-footer-meta{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:8px 18px !important;
}
html body[data-client-theme] #app#app#app .client-footer-meta :is(a,button){
  display:inline !important;
  position:static !important;
  inline-size:auto !important;
  min-inline-size:0 !important;
  block-size:auto !important;
  min-block-size:44px !important;
  padding:12px 2px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:inherit !important;
  text-decoration:underline !important;
  font:inherit !important;
}

html body[data-client-theme] #app#app#app .mockup[data-page="menu"] .client-grid{
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) !important;
  gap:18px !important;
}
html body[data-client-theme] #app#app#app .mockup[data-page="menu"] .client-card{
  cursor:pointer !important;
  overflow:hidden !important;
}
html body[data-client-theme] #app#app#app .mockup[data-page="menu"] .category-image-button{
  border:0 !important;
  border-radius:18px 18px 0 0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
html body[data-client-theme] #app#app#app .mockup[data-page="menu"] .category-image-button > img{
  inline-size:100% !important;
  aspect-ratio:16/10 !important;
  object-fit:cover !important;
  border:0 !important;
  border-radius:0 !important;
}
html body[data-client-theme] #app#app#app .mockup[data-page="menu"] .category-card-hint{
  display:inline-flex !important;
  align-items:center !important;
  min-block-size:44px !important;
  margin-top:8px !important;
  color:inherit !important;
  font-weight:800 !important;
  text-decoration:underline !important;
}
html body[data-client-theme] #app#app#app .votes-overview-card .vote-button{
  inline-size:100% !important;
  max-inline-size:100% !important;
  min-block-size:44px !important;
  block-size:auto !important;
  padding:9px 14px !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  line-height:1.15 !important;
  font-size:clamp(10px,1.5vw,13px) !important;
}
html body[data-client-theme] #app#app#app .client-demo-label{
  display:inline-flex !important;
  align-items:center !important;
  min-block-size:34px !important;
  padding:6px 12px !important;
  border:1px solid rgba(244,22,188,.55) !important;
  border-radius:14px !important;
  background:rgba(20,5,30,.78) !important;
  color:#fff !important;
  font-weight:900 !important;
  letter-spacing:.06em !important;
}

html body[data-client-theme] #app#app#app .pb-custom-media{
  position:relative !important;
  inline-size:100% !important;
  overflow:hidden !important;
  border-radius:18px 18px 0 0 !important;
}
html body[data-client-theme] #app#app#app .pb-custom-media > img{
  display:block !important;
  inline-size:100% !important;
  block-size:auto !important;
  aspect-ratio:1 !important;
  object-fit:cover !important;
}
html body[data-client-theme] #app#app#app .pb-custom-info-button{
  position:absolute !important;
  inset:auto 10px 10px auto !important;
  display:grid !important;
  place-items:center !important;
  inline-size:44px !important;
  block-size:44px !important;
  min-inline-size:44px !important;
  min-block-size:44px !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.78) !important;
  border-radius:50% !important;
  background:linear-gradient(145deg,#a609dc,#f4169f) !important;
  color:#fff !important;
  box-shadow:0 5px 14px rgba(15,0,25,.5),inset 0 2px 2px rgba(255,255,255,.5) !important;
  font:900 18px/1 Arial,sans-serif !important;
  z-index:3 !important;
}
html body[data-client-theme] #app#app#app .pb-custom-info-panel dl{
  display:grid !important;
  gap:10px !important;
}
html body[data-client-theme] #app#app#app .pb-custom-info-panel dl > div{
  padding:12px !important;
  border:1px solid rgba(193,39,255,.35) !important;
  border-radius:14px !important;
}
html body[data-client-theme] #app#app#app .pb-custom-info-panel dt{
  font-weight:900 !important;
}
html body[data-client-theme] #app#app#app .pb-custom-info-panel dd{
  margin:4px 0 0 !important;
}
html body[data-client-theme] #app#app#app .lot02-dough-card.is-assigned,
html body[data-client-theme] #app#app#app .lot01-base-card.active,
html body[data-client-theme] #app#app#app .lot01-ingredient-card.active,
html body[data-client-theme] #app#app#app .lot02-menu-card.is-selected{
  outline:0 !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
html body[data-client-theme] #app#app#app .lot01-global-quantity .lot01-segmented-control,
html body[data-client-theme] #app#app#app .lot01-menu-choice-first .lot01-segmented-control{
  outline:0 !important;
  border:0 !important;
  box-shadow:none !important;
}
html body[data-client-theme] #app#app#app .lot01-ingredient-carousel{
  max-block-size:none !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
}
html body[data-client-theme] #app#app#app .lot01-composition-page,
html body[data-client-theme] #app#app#app .lot01-composition-layout,
html body[data-client-theme] #app#app#app .lot01-composition-main,
html body[data-client-theme] #app#app#app .custom-builder-controls{
  overflow:visible !important;
}
html body[data-client-theme] #app#app#app .lot01-composition-mobile-nav,
html body[data-client-theme] #app#app#app .lot01-ingredient-intro{
  display:none !important;
}

html body[data-client-theme] #app#app#app :is(.event-detail,.contact-detail,.location-detail){
  position:relative !important;
  inset:auto !important;
  inline-size:min(1180px,calc(100% - 28px)) !important;
  margin:0 auto 30px !important;
  padding:16px !important;
  overflow:visible !important;
}
html body[data-client-theme] #app#app#app .client-hero-heading{
  position:relative !important;
  z-index:2 !important;
  max-inline-size:760px !important;
  margin:0 auto 14px !important;
  padding:12px 18px !important;
  border:0 !important;
  background:linear-gradient(90deg,rgba(20,5,30,.72),rgba(20,5,30,.26),transparent) !important;
  backdrop-filter:none !important;
  color:#fff !important;
}
html body[data-client-theme] #app#app#app .client-hero-heading :is(h1,p){
  color:#fff !important;
  text-shadow:0 2px 8px rgba(0,0,0,.82) !important;
}
html body[data-client-theme] #app#app#app .event-single-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr) !important;
  gap:18px !important;
  align-items:start !important;
}
html body[data-client-theme] #app#app#app .event-main-photo{
  margin:0 !important;
  overflow:hidden !important;
  border-radius:22px !important;
  box-shadow:0 18px 40px rgba(10,0,22,.38) !important;
}
html body[data-client-theme] #app#app#app .event-main-photo img{
  display:block !important;
  inline-size:100% !important;
  aspect-ratio:16/10 !important;
  object-fit:cover !important;
}
html body[data-client-theme] #app#app#app .event-main-photo figcaption{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:1px !important;
  background:#160421 !important;
}
html body[data-client-theme] #app#app#app .event-main-photo figcaption span{
  padding:12px !important;
  color:#fff !important;
  text-align:center !important;
  font-weight:900 !important;
}
html body[data-client-theme] #app#app#app .event-warm-cta,
html body[data-client-theme] #app#app#app .event-request-panel{
  padding:20px !important;
  border:1px solid rgba(244,22,188,.45) !important;
  border-radius:22px !important;
  background:rgba(29,7,38,.84) !important;
  color:#fff !important;
  box-shadow:0 14px 34px rgba(15,0,25,.32) !important;
}
html body[data-client-theme] #app#app#app .location-simulated-map{
  position:relative !important;
  margin:0 !important;
  overflow:hidden !important;
  border-radius:22px !important;
  box-shadow:0 14px 34px rgba(15,0,25,.32) !important;
}
html body[data-client-theme] #app#app#app .location-simulated-map img{
  display:block !important;
  inline-size:100% !important;
  block-size:100% !important;
  min-block-size:320px !important;
  object-fit:cover !important;
}
html body[data-client-theme] #app#app#app .location-simulated-map figcaption{
  position:absolute !important;
  inset:auto 12px 12px 12px !important;
  padding:10px !important;
  border-radius:12px !important;
  background:rgba(17,3,25,.86) !important;
  color:#fff !important;
  text-align:center !important;
  font-weight:900 !important;
}
html body[data-client-theme] #app#app#app .location-grid{
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) !important;
}

@media(max-width:900px){
  html body[data-client-theme] #app#app#app .mockup:not([data-page="accueil"]){
    min-block-size:100vh !important;
    padding-top:232px !important;
  }
  html body[data-client-theme] #app#app#app .mockup > .page-logo-home-link{
    inset:8px auto auto 8px !important;
    inline-size:66px !important;
    block-size:66px !important;
  }
  html body[data-client-theme] #app#app#app .mockup > .theme-mode-switch{
    inset:8px 10px auto 82px !important;
    transform:none !important;
    inline-size:auto !important;
    width:auto !important;
    block-size:44px !important;
  }
  html body[data-client-theme] #app#app#app .mockup > .quick-actions-overlay{
    inset:60px auto auto 50% !important;
    transform:translateX(-50%) !important;
    inline-size:max-content !important;
  }
  html body[data-client-theme] #app#app#app .mockup > .quick-actions-overlay > .client-quick-action{
    min-inline-size:94px !important;
  }
  html body[data-client-theme] #app#app#app .mockup > .install-home-button{
    inset:60px 10px auto auto !important;
    inline-size:112px !important;
  }
  html body[data-client-theme] #app#app#app .mockup > .site-nav-overlay{
    inset:112px 10px auto 10px !important;
    transform:none !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
    inline-size:auto !important;
    block-size:auto !important;
  }
  html body[data-client-theme] #app#app#app .mockup > .site-nav-overlay > .nav-button,
  html body[data-client-theme] #app#app#app .mockup > .site-nav-overlay > .nav-button:nth-child(6){
    min-inline-size:0 !important;
    inline-size:100% !important;
    padding-inline:6px !important;
    font-size:clamp(9px,2.8vw,12px) !important;
  }
  html body[data-client-theme] #app#app#app :is(.event-single-grid,.location-grid){
    grid-template-columns:1fr !important;
  }
  html body[data-client-theme] #app#app#app :is(.event-detail,.contact-detail,.location-detail){
    inline-size:calc(100% - 16px) !important;
    padding:8px !important;
  }
  html body[data-client-theme] #app#app#app .client-bottom-dock{
    inset:auto 10px 10px auto !important;
  }
}

@media(max-width:520px){
  html body[data-client-theme] #app#app#app .mockup:not([data-page="accueil"]){
    padding-top:238px !important;
  }
  html body[data-client-theme] #app#app#app .mockup > .quick-actions-overlay{
    left:10px !important;
    right:126px !important;
    transform:none !important;
    justify-content:flex-start !important;
    inline-size:auto !important;
  }
  html body[data-client-theme] #app#app#app .mockup > .quick-actions-overlay > .client-quick-action{
    min-inline-size:0 !important;
    flex:1 1 0 !important;
    padding-inline:7px !important;
    font-size:10px !important;
  }
  html body[data-client-theme] #app#app#app .client-footer-meta{
    gap:0 12px !important;
  }

  html body[data-client-theme] #app#app#app
    .mockup[data-page="personnalisables"] .lot02-dough-card .lot01-dough-action{
    min-inline-size:0 !important;
    max-inline-size:100% !important;
    inline-size:100% !important;
    padding-inline:3px !important;
    overflow:hidden !important;
    font-size:12px !important;
    letter-spacing:-.02em !important;
    white-space:nowrap !important;
  }
}

html body[data-client-theme] #app#app#app
  .mockup[data-page="personnalisables"] .lot01-title-compact{
  display:none !important;
}

@media(max-width:600px){
  html body[data-client-theme] #app#app#app
    .mockup[data-page="personnalisables"] .lot01-title-wide{
    display:none !important;
  }
  html body[data-client-theme] #app#app#app
    .mockup[data-page="personnalisables"] .lot01-title-compact{
    display:inline !important;
  }
}

/* ===== CONTRAT CANONIQUE CLIENT 20260828 : shell unique et Menu sans ancien habillage ===== */
html body[data-client-theme] #pb-client-professional-root .pb-client-compact-actions[hidden]{
  display:none !important;
}

html body[data-client-theme] #app#app#app#app#app .mockup{
  position:relative !important;
  isolation:isolate !important;
  inline-size:100% !important;
  max-inline-size:none !important;
  min-block-size:100vh !important;
  margin:0 !important;
  overflow-x:clip !important;
  overflow-y:visible !important;
  background:transparent !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup:not([data-page="accueil"]){
  padding-block:176px 112px !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup:not([data-page="accueil"]) > :is(
  .client-page-content,
  .event-detail,
  .contact-detail,
  .location-detail,
  .custom-panel,
  .cart-panel,
  .votes-overview,
  .loyalty-page,
  .account-page
){
  position:relative !important;
  inset:auto !important;
  inline-size:min(1180px,calc(100% - 32px)) !important;
  block-size:auto !important;
  min-block-size:0 !important;
  max-block-size:none !important;
  margin:0 auto !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > .client-scene-image{
  content:normal !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-2 !important;
  inline-size:100vw !important;
  block-size:100vh !important;
  object-fit:cover !important;
  object-position:center top !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > .client-night-aurora{
  display:none !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > :not(.client-scene-image,.client-night-aurora){
  z-index:1;
}

html body[data-client-theme] #app#app#app#app#app .mockup > .page-logo-home-link{
  position:absolute !important;
  inset:12px auto auto 18px !important;
  inline-size:96px !important;
  block-size:96px !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > .theme-mode-switch{
  position:absolute !important;
  inset:12px auto auto 50vw !important;
  transform:translateX(-50%) !important;
  inline-size:min(339px,calc(100vw - 260px)) !important;
  block-size:44px !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay{
  position:absolute !important;
  inset:62px auto auto 50vw !important;
  transform:translateX(-50%) !important;
  display:grid !important;
  grid-template-columns:126px 116px 106px !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  inline-size:max-content !important;
  block-size:44px !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay > :is(.client-quick-action,.install-home-button){
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  inline-size:100% !important;
  min-inline-size:0 !important;
  block-size:44px !important;
  margin:0 !important;
  padding-inline:10px !important;
  justify-self:stretch !important;
  align-self:center !important;
  font-size:13px !important;
  white-space:nowrap !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay > .install-home-button span{
  display:inline !important;
  margin:0 !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay > .install-home-button :is(img,small){
  display:none !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > .site-nav-overlay{
  position:absolute !important;
  inset:112px auto auto 50vw !important;
  transform:translateX(-50%) !important;
  display:grid !important;
  grid-template-columns:90px 96px 78px 112px 86px 152px !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  inline-size:max-content !important;
  max-inline-size:calc(100vw - 150px) !important;
  block-size:44px !important;
  min-block-size:44px !important;
  max-block-size:44px !important;
  height:44px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > .site-nav-overlay > .nav-button{
  display:flex !important;
  position:relative !important;
  inset:auto !important;
  grid-area:auto !important;
  justify-self:stretch !important;
  inline-size:100% !important;
  min-inline-size:0 !important;
  block-size:44px !important;
  min-block-size:44px !important;
  max-block-size:44px !important;
  height:44px !important;
  padding-inline:11px !important;
  font-size:clamp(10px,1.05vw,13px) !important;
  white-space:nowrap !important;
  transform:none !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > .client-route-back{
  display:none !important;
}

html body[data-client-theme] #app#app#app#app#app .mockup > .client-bottom-dock{
  position:absolute !important;
  inset:auto 18px 20px auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  inline-size:max-content !important;
  margin:0 !important;
  z-index:90 !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > .client-bottom-dock > .client-tutorial-button{
  position:relative !important;
  inset:auto !important;
  transform:none !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup:not([data-page="accueil"]) .client-professional-bottom{
  display:none !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"] .client-professional-bottom{
  display:inline-flex !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"] > .client-service-footer{
  position:absolute !important;
  inset:auto 18px 72px 18px !important;
  inline-size:auto !important;
  margin:0 !important;
  padding:0 250px 0 0 !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup:not([data-page="accueil"]) > .client-service-footer{
  position:relative !important;
  inset:auto !important;
  inline-size:calc(100% - 28px) !important;
  min-block-size:64px !important;
  margin:28px 14px 0 !important;
  padding:10px 172px 10px 8px !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > .client-service-footer{
  display:grid !important;
  align-items:center !important;
  justify-items:center !important;
  gap:6px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > .client-service-footer .client-footer-social{
  margin:0 !important;
  color:#fff !important;
  text-align:center !important;
  text-shadow:0 1px 3px rgba(0,0,0,.92) !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > .client-service-footer .client-footer-meta{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:2px 0 !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > .client-service-footer .client-footer-meta > :is(a,button){
  display:inline-flex !important;
  align-items:center !important;
  position:relative !important;
  inline-size:auto !important;
  min-inline-size:0 !important;
  min-block-size:44px !important;
  block-size:44px !important;
  margin:0 !important;
  padding:10px 9px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
  font:inherit !important;
  text-decoration:underline !important;
  text-underline-offset:3px !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > .client-service-footer .client-footer-meta > :is(a,button):not(:last-child)::after{
  content:"·" !important;
  position:absolute !important;
  right:-2px !important;
  color:currentColor !important;
  text-decoration:none !important;
}

html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .client-grid{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;
  grid-auto-rows:auto !important;
  grid-template-rows:auto !important;
  align-items:stretch !important;
  gap:18px !important;
}
@media(min-width:1180px){
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .client-grid{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  }
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] > .client-page-content{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .client-card{
  display:flex !important;
  flex-direction:column !important;
  cursor:default !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:18px !important;
  background:rgba(18,4,28,.78) !important;
  box-shadow:0 14px 30px rgba(17,3,25,.24) !important;
  block-size:auto !important;
  height:auto !important;
  min-block-size:0 !important;
  max-block-size:none !important;
}
body[data-client-theme="day"] #app#app#app#app#app .mockup[data-page="menu"] .client-card{
  background:rgba(255,255,255,.9) !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .category-image-button{
  display:block !important;
  flex:0 0 auto !important;
  inline-size:100% !important;
  aspect-ratio:16/10 !important;
  block-size:auto !important;
  height:auto !important;
  min-block-size:0 !important;
  max-block-size:none !important;
  border:0 !important;
  border-radius:18px 18px 0 0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .category-image-button > img{
  display:block !important;
  inline-size:100% !important;
  block-size:100% !important;
  min-block-size:0 !important;
  max-block-size:none !important;
  height:100% !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  border:0 !important;
  border-radius:0 !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .client-card-body{
  display:flex !important;
  flex:1 1 auto !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:8px !important;
  padding:14px !important;
  text-align:center !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .client-card-actions{
  display:flex !important;
  justify-content:center !important;
  margin-top:auto !important;
  padding-top:4px !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .category-card-cta{
  max-inline-size:100% !important;
  white-space:normal !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .category-card-hint,
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] > .client-page-content > .lot01-menu-votes-cta{
  display:none !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] > .client-page-content::after{
  content:none !important;
  display:none !important;
}

@media(max-width:900px){
  html body[data-client-theme] #app#app#app#app#app .mockup:not([data-page="accueil"]){
    padding-block:216px 112px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .page-logo-home-link{
    inset:8px auto auto 8px !important;
    inline-size:66px !important;
    block-size:66px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .theme-mode-switch{
    inset:8px 10px auto 82px !important;
    transform:none !important;
    inline-size:auto !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay{
    inset:70px 10px auto 10px !important;
    transform:none !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important;
    gap:6px !important;
    inline-size:auto !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay > :is(.client-quick-action,.install-home-button){
    padding-inline:7px !important;
    font-size:11px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .site-nav-overlay{
    inset:120px 8px auto 8px !important;
    transform:none !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
    inline-size:auto !important;
    max-inline-size:none !important;
    block-size:94px !important;
    min-block-size:94px !important;
    max-block-size:94px !important;
    height:94px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .site-nav-overlay > .nav-button{
    inline-size:100% !important;
    padding-inline:5px !important;
    font-size:clamp(8.5px,2.75vw,12px) !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"] > .client-service-footer{
    inset:auto 10px 70px 10px !important;
    padding-right:0 !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup:not([data-page="accueil"]) > .client-service-footer{
    padding-right:8px !important;
    margin-bottom:0 !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup:not([data-page="accueil"]) > .client-bottom-dock{
    inset:auto 10px 12px auto !important;
  }
}

@media(min-width:521px) and (max-width:900px){
  html body[data-client-theme] #app#app#app#app#app .mockup > .theme-mode-switch{
    inset:8px auto auto 50vw !important;
    transform:translateX(-50%) !important;
    inline-size:339px !important;
    max-inline-size:none !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay{
    inset:70px auto auto 50vw !important;
    transform:translateX(-50%) !important;
    inline-size:min(420px,calc(100vw - 20px)) !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .site-nav-overlay{
    inset:120px auto auto 50vw !important;
    transform:translateX(-50%) !important;
    inline-size:min(720px,calc(100vw - 16px)) !important;
  }
}

@media(max-width:520px){
  html body[data-client-theme] #app#app#app#app#app .mockup:not([data-page="accueil"]){
    padding-block-start:274px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .page-logo-home-link{
    inline-size:58px !important;
    block-size:58px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .theme-mode-switch{
    left:72px !important;
    right:8px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay{
    left:8px !important;
    right:8px !important;
    gap:4px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay > :is(.client-quick-action,.install-home-button){
    padding-inline:3px !important;
    font-size:10px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .site-nav-overlay{
    left:6px !important;
    right:6px !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:4px !important;
    block-size:140px !important;
    min-block-size:140px !important;
    max-block-size:140px !important;
    height:140px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .site-nav-overlay > .nav-button{
    font-size:clamp(8px,2.55vw,10px) !important;
    letter-spacing:-.02em !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"] > .client-service-footer{
    bottom:76px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"] > .client-service-footer .client-footer-meta > :is(a,button){
    padding-inline:5px !important;
    font-size:10px !important;
  }
}

/* ===== CORRECTION TRANSVERSE 20260828-50 : géométrie du shell invariant par route =====
   Le défilement reste natif, mais sa gouttière ne doit jamais déplacer de 15 px
   les contrôles canoniques entre deux pages. Les anciennes marges propres aux
   pages Événements / Contact / Où nous trouver sont également neutralisées. */
html:not(.modal-open){
  scrollbar-width:none !important;
}
html:not(.modal-open)::-webkit-scrollbar{
  display:none !important;
  inline-size:0 !important;
  block-size:0 !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > :is(
  .page-logo-home-link,
  .theme-mode-switch,
  .quick-actions-overlay,
  .site-nav-overlay
){
  margin:0 !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > :is(
  .theme-mode-switch,
  .quick-actions-overlay,
  .site-nav-overlay
){
  min-inline-size:0 !important;
  max-inline-size:none !important;
  max-width:none !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > .site-nav-overlay{
  grid-template-rows:44px !important;
  grid-auto-rows:44px !important;
}
@media(max-width:900px){
  html body[data-client-theme] #app#app#app#app#app .mockup > .site-nav-overlay{
    grid-template-rows:repeat(2,44px) !important;
  }
}
@media(max-width:520px){
  html body[data-client-theme] #app#app#app#app#app .mockup > .site-nav-overlay{
    grid-template-rows:repeat(3,44px) !important;
  }
}

/* Le fond canonique Accueil reste la couche immuable sur chaque route. */
html body[data-client-theme] #app#app#app#app#app .mockup{
  background-color:transparent !important;
  background-image:none !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > .client-scene-image{
  content:normal !important;
  display:block !important;
  position:fixed !important;
  inset:0 !important;
  inline-size:100vw !important;
  width:100vw !important;
  block-size:100vh !important;
  height:100vh !important;
  min-block-size:100vh !important;
  min-height:100vh !important;
  max-block-size:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center top !important;
  transform:none !important;
  opacity:1 !important;
  filter:none !important;
  pointer-events:none !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup::before,
html body[data-client-theme] #app#app#app#app#app .mockup::after{
  content:none !important;
  display:none !important;
  background:none !important;
}

/* ===== CORRECTION TRANSVERSE 20260829-01 : route QR invitée dans la coque Client ===== */
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="qr-invite"]{
  box-sizing:border-box !important;
  min-block-size:100dvh !important;
  padding:180px 16px 120px !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="qr-invite"] > .client-qr-route{
  position:relative !important;
  z-index:12 !important;
  display:grid !important;
  place-items:center !important;
  inline-size:min(720px,100%) !important;
  min-block-size:420px !important;
  margin:0 auto !important;
  padding:20px 0 !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="qr-invite"] .client-qr-card{
  box-sizing:border-box !important;
  inline-size:100% !important;
  margin:0 !important;
  padding:clamp(22px,4vw,42px) !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.42) !important;
  border-radius:24px !important;
  background:linear-gradient(145deg,rgba(26,7,40,.95),rgba(58,12,73,.9)) !important;
  box-shadow:0 22px 52px rgba(9,2,15,.42),inset 0 1px 0 rgba(255,255,255,.18) !important;
  color:#fff !important;
  text-align:left !important;
  backdrop-filter:blur(14px) saturate(1.08) !important;
}
body[data-client-theme="day"] #app#app#app#app#app .mockup[data-page="qr-invite"] .client-qr-card{
  border-color:rgba(109,40,217,.26) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(250,241,255,.94)) !important;
  box-shadow:0 22px 52px rgba(61,18,91,.22),inset 0 1px 0 #fff !important;
  color:#2b1036 !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="qr-invite"] .client-qr-status{
  display:grid !important;
  gap:10px !important;
  margin:0 !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="qr-invite"] .client-qr-status > :is(h1,p){
  margin:0 !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="qr-invite"] .client-qr-status h1{
  font-size:clamp(1.65rem,4vw,2.45rem) !important;
  line-height:1.08 !important;
  letter-spacing:-.025em !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="qr-invite"] .client-qr-eyebrow{
  color:#f1a8ff !important;
  font-size:.78rem !important;
  font-weight:900 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}
body[data-client-theme="day"] #app#app#app#app#app .mockup[data-page="qr-invite"] .client-qr-eyebrow{
  color:#7a1fa2 !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="qr-invite"] .client-qr-identity{
  display:grid !important;
  gap:20px !important;
  margin-top:24px !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="qr-invite"] .client-qr-identity .grid.two{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="qr-invite"] .client-qr-identity .field{
  display:grid !important;
  gap:7px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:inherit !important;
  font-weight:800 !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="qr-invite"] .client-qr-identity input{
  box-sizing:border-box !important;
  inline-size:100% !important;
  min-block-size:48px !important;
  margin:0 !important;
  padding:11px 13px !important;
  border:1px solid rgba(255,255,255,.4) !important;
  border-radius:13px !important;
  background:rgba(255,255,255,.1) !important;
  color:#fff !important;
  font:inherit !important;
}
body[data-client-theme="day"] #app#app#app#app#app .mockup[data-page="qr-invite"] .client-qr-identity input{
  border-color:rgba(84,31,115,.25) !important;
  background:#fff !important;
  color:#211027 !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="qr-invite"] .client-qr-identity input:focus-visible{
  outline:3px solid #f7a8ff !important;
  outline-offset:2px !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="qr-invite"] .actions{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:10px !important;
  margin-top:20px !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="qr-invite"] .client-qr-spinner{
  inline-size:34px !important;
  block-size:34px !important;
  border:4px solid rgba(255,255,255,.3) !important;
  border-top-color:#f642b7 !important;
  border-radius:50% !important;
  animation:clientQrSpin .8s linear infinite !important;
}
@keyframes clientQrSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="qr-invite"] .client-qr-spinner{
    animation:none !important;
  }
}
@media(max-width:900px){
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="qr-invite"]{
    padding:226px 12px 112px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="qr-invite"] > .client-qr-route{
    min-block-size:360px !important;
    padding-block:14px !important;
  }
}
@media(max-width:520px){
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="qr-invite"]{
    padding:274px 8px 118px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="qr-invite"] .client-qr-card{
    padding:22px 16px !important;
    border-radius:20px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="qr-invite"] .client-qr-identity .grid.two{
    grid-template-columns:minmax(0,1fr) !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="qr-invite"] .actions > :is(button,a){
    flex:1 1 100% !important;
    inline-size:100% !important;
  }
}

/* ===== OVERRIDE FINAL SHELL 20260829 : six Accueils canoniques =====
   Références mesurées : ordinateur 1600 x 900, tablette 834 x 1112,
   téléphone 390 x 844. Le bureau conserve la navigation texte horizontale ;
   tablette et téléphone reprennent les six gélules au bas de la composition.
   Les boîtes tactiles restent à 44 px, avec une peau 3D visible de 32 px. */

html body[data-client-theme] #app#app#app#app#app .mockup > :is(
  .page-logo-home-link,
  .theme-mode-switch,
  .quick-actions-overlay,
  .site-nav-overlay,
  .client-service-footer,
  .client-bottom-dock
){
  box-sizing:border-box !important;
}

html body[data-client-theme] #app#app#app#app#app .mockup > .page-logo-home-link{
  z-index:84 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  box-shadow:none !important;
}

html body[data-client-theme] #app#app#app#app#app .mockup > .page-logo-home-link > .page-logo-overlay{
  display:block !important;
  inline-size:100% !important;
  block-size:100% !important;
  object-fit:contain !important;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  box-shadow:none !important;
}

html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay{
  z-index:86 !important;
  overflow:visible !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay [data-pb-client-icon]{
  display:none !important;
}

html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay > :is(.client-quick-action,.install-home-button){
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  min-inline-size:0 !important;
  min-block-size:44px !important;
  block-size:44px !important;
  max-block-size:44px !important;
  margin:0 !important;
  padding:6px 14px !important;
  overflow:visible !important;
  justify-content:center !important;
  text-align:center !important;
  white-space:nowrap !important;
}

html body[data-client-theme] #app#app#app#app#app .mockup > .client-route-back{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

html body[data-client-theme] #app#app#app#app#app .mockup > .client-bottom-dock{
  pointer-events:none !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

html body[data-client-theme] #app#app#app#app#app .mockup > .client-bottom-dock > .client-tutorial-button{
  pointer-events:auto !important;
  min-block-size:44px !important;
  block-size:44px !important;
  max-block-size:44px !important;
  margin:0 !important;
  overflow:visible !important;
  white-space:nowrap !important;
}

html body[data-client-theme] #app#app#app#app#app .mockup:not([data-page="accueil"])
  .client-professional-bottom{
  display:none !important;
}

html body[data-client-theme] #app#app#app#app#app .mockup > .client-service-footer{
  z-index:82 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

html body[data-client-theme] #app#app#app#app#app .mockup > .client-service-footer :is(.client-footer-social,.client-footer-meta){
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

html body[data-client-theme="day"] #app#app#app#app#app .mockup > .client-service-footer{
  color:#160d19 !important;
  text-shadow:0 1px 2px rgba(255,255,255,.72) !important;
}

html body[data-client-theme="night"] #app#app#app#app#app .mockup > .client-service-footer{
  color:#fff !important;
  text-shadow:0 1px 3px rgba(0,0,0,.94) !important;
}

/* Ordinateur : logo à gauche, navigation texte légère, commandes à droite. */
@media(min-width:1180px){
  html body[data-client-theme] #app#app#app#app#app .mockup > .page-logo-home-link{
    inset:18px auto auto 42px !important;
    inline-size:clamp(102px,7.5vw,120px) !important;
    block-size:clamp(102px,7.5vw,120px) !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .site-nav-overlay{
    position:absolute !important;
    inset:20px auto auto clamp(178px,13.5vw,216px) !important;
    transform:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:clamp(22px,2.4vw,38px) !important;
    inline-size:min(650px,calc(100vw - 720px)) !important;
    min-inline-size:0 !important;
    max-inline-size:650px !important;
    block-size:44px !important;
    min-block-size:44px !important;
    max-block-size:44px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .site-nav-overlay > .nav-button{
    display:inline-flex !important;
    flex:0 0 auto !important;
    align-items:center !important;
    justify-content:center !important;
    inline-size:auto !important;
    min-inline-size:0 !important;
    block-size:44px !important;
    min-block-size:44px !important;
    max-block-size:44px !important;
    margin:0 !important;
    padding:0 3px !important;
    overflow:visible !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    font-size:clamp(10px,.82vw,13px) !important;
    font-weight:900 !important;
    letter-spacing:.01em !important;
    line-height:1 !important;
    text-decoration:none !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .site-nav-overlay > .nav-button.pb-action-pill::before{
    content:none !important;
    display:none !important;
  }

  html body[data-client-theme="day"] #app#app#app#app#app .mockup > .site-nav-overlay > .nav-button{
    color:#120b17 !important;
    -webkit-text-fill-color:#120b17 !important;
    text-shadow:0 1px 2px rgba(255,255,255,.62) !important;
  }

  html body[data-client-theme="night"] #app#app#app#app#app .mockup > .site-nav-overlay > .nav-button{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    text-shadow:0 1px 3px rgba(0,0,0,.92) !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .site-nav-overlay > .nav-button.active{
    box-shadow:inset 0 -3px 0 #f229c5 !important;
  }

  body[data-client-theme-mode] #app#app#app#app#app .mockup > .theme-mode-switch.pb-master-selector-ready{
    position:absolute !important;
    inset:62px 3% auto auto !important;
    transform:none !important;
    inline-size:396px !important;
    width:396px !important;
    min-inline-size:0 !important;
    max-inline-size:396px !important;
    block-size:44px !important;
    height:44px !important;
    margin:0 !important;
    z-index:87 !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay{
    position:absolute !important;
    inset:14px 3% auto auto !important;
    transform:none !important;
    display:grid !important;
    grid-template-columns:108px 118px !important;
    grid-template-rows:44px 44px !important;
    align-items:center !important;
    justify-content:end !important;
    column-gap:10px !important;
    row-gap:61px !important;
    inline-size:236px !important;
    block-size:auto !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay > .client-quick-action:nth-child(1){
    grid-column:1 !important;
    grid-row:1 !important;
    inline-size:108px !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay > .client-quick-action:nth-child(2){
    grid-column:2 !important;
    grid-row:1 !important;
    inline-size:118px !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay > .install-home-button{
    grid-column:1 / 3 !important;
    grid-row:2 !important;
    justify-self:end !important;
    inline-size:150px !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .client-bottom-dock{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    inline-size:auto !important;
    block-size:auto !important;
    margin:0 !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"]
    > .client-bottom-dock > .client-professional-bottom{
    display:inline-flex !important;
    position:absolute !important;
    inset:auto auto 10px 44px !important;
    inline-size:220px !important;
    justify-content:center !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup
    > .client-bottom-dock > .client-tutorial-button:last-child{
    position:absolute !important;
    inset:auto 42px 10px auto !important;
    inline-size:140px !important;
    justify-content:center !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"] > .client-service-footer{
    position:absolute !important;
    inset:auto 230px 10px 276px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:clamp(36px,6vw,120px) !important;
    inline-size:auto !important;
    min-block-size:44px !important;
    margin:0 !important;
    padding:0 !important;
    font-size:13px !important;
    white-space:nowrap !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup:not([data-page="accueil"]) > .client-service-footer{
    position:relative !important;
    inset:auto !important;
    inline-size:calc(100% - 32px) !important;
    margin:28px 16px 0 !important;
    padding:0 172px 0 8px !important;
  }
}

/* Tablette et téléphone : contrôles de tête à droite, navigation 3D en bas. */
@media(max-width:1179px){
  html body[data-client-theme] #app#app#app#app#app .mockup{
    min-block-size:100dvh !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup:not([data-page="accueil"]){
    padding-block-end:270px !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .page-logo-home-link{
    position:absolute !important;
    inset:18px auto auto 24px !important;
    inline-size:108px !important;
    block-size:108px !important;
  }

  body[data-client-theme-mode] #app#app#app#app#app .mockup > .theme-mode-switch.pb-master-selector-ready{
    position:absolute !important;
    inset:58px 20px auto auto !important;
    transform:none !important;
    inline-size:364px !important;
    width:364px !important;
    min-inline-size:0 !important;
    max-inline-size:calc(100vw - 168px) !important;
    block-size:44px !important;
    height:44px !important;
    margin:0 !important;
    z-index:87 !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay{
    position:absolute !important;
    inset:10px 20px auto auto !important;
    transform:none !important;
    display:grid !important;
    grid-template-columns:106px 110px !important;
    grid-template-rows:44px 44px !important;
    align-items:center !important;
    justify-content:end !important;
    column-gap:10px !important;
    row-gap:50px !important;
    inline-size:226px !important;
    block-size:auto !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay > .client-quick-action:nth-child(1){
    grid-column:1 !important;
    grid-row:1 !important;
    inline-size:106px !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay > .client-quick-action:nth-child(2){
    grid-column:2 !important;
    grid-row:1 !important;
    inline-size:110px !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay > .install-home-button{
    grid-column:1 / 3 !important;
    grid-row:2 !important;
    justify-self:end !important;
    inline-size:145px !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .site-nav-overlay{
    position:absolute !important;
    inset:auto 32px 98px 32px !important;
    transform:none !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-template-rows:repeat(2,44px) !important;
    grid-auto-rows:44px !important;
    align-items:center !important;
    justify-content:stretch !important;
    gap:10px 16px !important;
    inline-size:auto !important;
    min-inline-size:0 !important;
    max-inline-size:none !important;
    block-size:98px !important;
    min-block-size:98px !important;
    max-block-size:98px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    z-index:83 !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .site-nav-overlay > .nav-button{
    display:flex !important;
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    align-items:center !important;
    justify-content:center !important;
    inline-size:100% !important;
    min-inline-size:0 !important;
    block-size:44px !important;
    min-block-size:44px !important;
    max-block-size:44px !important;
    margin:0 !important;
    padding:6px 12px !important;
    overflow:visible !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    font-size:12px !important;
    font-weight:900 !important;
    letter-spacing:0 !important;
    line-height:1 !important;
    text-align:center !important;
    text-shadow:0 1px 2px rgba(28,0,35,.9) !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .site-nav-overlay > .nav-button.pb-action-pill::before{
    content:"" !important;
    display:block !important;
  }

  /* Sur l'Accueil tactile, Accueil est implicite : les cinq destinations et
     l'action professionnelle reproduisent l'ordre exact de la maquette. */
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"]
    > .site-nav-overlay > .nav-button:nth-child(1){display:none !important;}
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"]
    > .site-nav-overlay > .nav-button:nth-child(3){grid-column:1 !important;grid-row:1 !important;}
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"]
    > .site-nav-overlay > .nav-button:nth-child(6){grid-column:2 !important;grid-row:1 !important;}
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"]
    > .site-nav-overlay > .nav-button:nth-child(4){grid-column:3 !important;grid-row:1 !important;}
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"]
    > .site-nav-overlay > .nav-button:nth-child(5){grid-column:1 !important;grid-row:2 !important;}
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"]
    > .site-nav-overlay > .nav-button:nth-child(2){grid-column:2 !important;grid-row:2 !important;}

  html body[data-client-theme] #app#app#app#app#app .mockup > .client-bottom-dock{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    inline-size:auto !important;
    block-size:auto !important;
    margin:0 !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"]
    > .client-bottom-dock > .client-professional-bottom{
    display:inline-flex !important;
    position:absolute !important;
    inset:auto 32px 98px auto !important;
    inline-size:calc(33.333333% - 32px) !important;
    min-inline-size:0 !important;
    justify-content:center !important;
    font-size:12px !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup
    > .client-bottom-dock > .client-tutorial-button:last-child{
    position:absolute !important;
    inset:auto 32px 18px auto !important;
    inline-size:160px !important;
    justify-content:center !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .client-service-footer{
    position:absolute !important;
    inset:auto 218px 18px 32px !important;
    display:grid !important;
    justify-items:start !important;
    align-content:end !important;
    gap:4px !important;
    inline-size:auto !important;
    min-block-size:44px !important;
    margin:0 !important;
    padding:0 !important;
    font-size:12px !important;
    line-height:1.35 !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .client-service-footer .client-footer-meta{
    justify-content:flex-start !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .client-service-footer .client-footer-meta > :is(a,button){
    min-block-size:22px !important;
    block-size:22px !important;
    padding:2px 6px !important;
    font-size:inherit !important;
  }
}

@media(max-width:520px){
  html body[data-client-theme] #app#app#app#app#app .mockup:not([data-page="accueil"]){
    padding-block-end:300px !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .page-logo-home-link{
    inset:10px auto auto 14px !important;
    inline-size:70px !important;
    block-size:70px !important;
  }

  body[data-client-theme-mode] #app#app#app#app#app .mockup > .theme-mode-switch.pb-master-selector-ready{
    inset:39px 10px auto auto !important;
    inline-size:186px !important;
    width:186px !important;
    max-inline-size:186px !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay{
    inset:3px 10px auto auto !important;
    grid-template-columns:64px 64px !important;
    grid-template-rows:44px 44px !important;
    column-gap:6px !important;
    row-gap:27px !important;
    inline-size:134px !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay > .client-quick-action:nth-child(1),
  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay > .client-quick-action:nth-child(2){
    inline-size:64px !important;
    padding-inline:5px !important;
    font-size:9px !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay > .install-home-button{
    inline-size:90px !important;
    padding-inline:7px !important;
    font-size:9px !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .site-nav-overlay{
    inset:auto 15px 98px 15px !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:repeat(3,44px) !important;
    grid-auto-rows:44px !important;
    gap:0 10px !important;
    block-size:132px !important;
    min-block-size:132px !important;
    max-block-size:132px !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .site-nav-overlay > .nav-button{
    padding-inline:7px !important;
    font-size:9px !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"]
    > .site-nav-overlay > .nav-button:nth-child(3){grid-column:1 !important;grid-row:1 !important;}
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"]
    > .site-nav-overlay > .nav-button:nth-child(6){grid-column:2 !important;grid-row:1 !important;}
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"]
    > .site-nav-overlay > .nav-button:nth-child(4){grid-column:1 !important;grid-row:2 !important;}
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"]
    > .site-nav-overlay > .nav-button:nth-child(5){grid-column:2 !important;grid-row:2 !important;}
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"]
    > .site-nav-overlay > .nav-button:nth-child(2){grid-column:1 !important;grid-row:3 !important;}

  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"]
    > .client-bottom-dock > .client-professional-bottom{
    inset:auto 15px 146px auto !important;
    inline-size:calc(50% - 20px) !important;
    font-size:9px !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup
    > .client-bottom-dock > .client-tutorial-button:last-child{
    inset:auto 15px 18px auto !important;
    inline-size:105px !important;
    font-size:9px !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .client-service-footer{
    inset:auto 130px 16px 15px !important;
    gap:2px !important;
    font-size:9px !important;
    line-height:1.35 !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .client-service-footer .client-footer-meta{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:0 !important;
  }

  html body[data-client-theme] #app#app#app#app#app .mockup > .client-service-footer .client-footer-meta > :is(a,button){
    min-block-size:18px !important;
    block-size:18px !important;
    padding:1px 4px !important;
    font-size:9px !important;
  }
}

/* ===== P0 COMPOSEUR FORMULES API 20260829 ===== */
html body[data-client-theme] #app .mockup[data-page="personnalisables"] :is(
  .lot01-composition-page,
  .lot01-composition-layout,
  .lot01-composition-main,
  .custom-builder-controls,
  .lot01-composition-section,
  .custom-formula-picker,
  .custom-formula-components
){
  block-size:auto !important;
  min-block-size:0 !important;
  max-block-size:none !important;
  overflow:visible !important;
}

html body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-steps{
  display:grid !important;
  grid-template-columns:repeat(9,minmax(0,1fr)) !important;
  gap:6px !important;
  inline-size:100% !important;
  margin:0 0 16px !important;
  padding:0 !important;
  overflow:visible !important;
}

html body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-steps li{
  min-inline-size:0 !important;
  min-block-size:44px !important;
  block-size:auto !important;
  padding:6px 8px !important;
  line-height:1.15 !important;
  text-align:center !important;
}

html body[data-client-theme] #app .mockup[data-page="personnalisables"] :is(
  .custom-formula-picker,
  .custom-formula-components
) .client-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) !important;
  align-items:stretch !important;
  gap:16px !important;
}

html body[data-client-theme] #app .mockup[data-page="personnalisables"] :is(
  .custom-formula-picker,
  .custom-formula-components
) .client-card,
html body[data-client-theme] #app .mockup[data-page="personnalisables"] .custom-formula-picker .lot02-menu-card{
  display:grid !important;
  grid-template-rows:auto 1fr !important;
  min-inline-size:0 !important;
  block-size:auto !important;
  min-block-size:0 !important;
  max-block-size:none !important;
  overflow:hidden !important;
}

html body[data-client-theme] #app .mockup[data-page="personnalisables"] :is(
  .custom-formula-picker,
  .custom-formula-components
) :is(.client-card,.lot02-menu-card) > img{
  inline-size:100% !important;
  block-size:auto !important;
  aspect-ratio:1 / 1 !important;
  object-fit:cover !important;
}

html body[data-client-theme] #app .mockup[data-page="personnalisables"] .custom-formula-quantity{
  display:grid !important;
  grid-template-columns:44px minmax(42px,auto) 44px !important;
  align-items:center !important;
  justify-content:start !important;
  gap:8px !important;
  margin-block-start:10px !important;
}

html body[data-client-theme] #app .mockup[data-page="personnalisables"] .custom-formula-quantity button{
  display:inline-grid !important;
  place-items:center !important;
  inline-size:44px !important;
  min-inline-size:44px !important;
  block-size:44px !important;
  min-block-size:44px !important;
  padding:0 !important;
  border-radius:999px !important;
  font-size:22px !important;
  line-height:1 !important;
}

html body[data-client-theme] #app .mockup[data-page="personnalisables"] .custom-formula-quantity output{
  min-inline-size:42px !important;
  text-align:center !important;
  font-weight:900 !important;
  font-variant-numeric:tabular-nums !important;
}

@media (max-width:1179px){
  html body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-steps{
    display:flex !important;
    gap:8px !important;
    overflow-x:auto !important;
    overscroll-behavior-inline:contain !important;
    scroll-snap-type:x proximity !important;
    padding-block-end:8px !important;
  }

  html body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-steps li{
    flex:0 0 124px !important;
    scroll-snap-align:start !important;
  }
}

@media (max-width:767px){
  html body[data-client-theme] #app .mockup[data-page="personnalisables"] :is(
    .custom-formula-picker,
    .custom-formula-components
  ) .client-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }

  html body[data-client-theme] #app .mockup[data-page="personnalisables"] .custom-formula-quantity{
    justify-content:center !important;
  }
}

html body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-section.is-locked{
  opacity:.46 !important;
  filter:saturate(.55) !important;
  cursor:not-allowed !important;
}

html body[data-client-theme] #app .mockup[data-page="personnalisables"] .lot01-composition-steps li.is-skipped{
  opacity:.62 !important;
  filter:saturate(.45) !important;
}
/* ===== MENU CANONIQUE 20260829 : texte DOM, grille 3x2 et cartes lisibles ===== */
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] > .client-page-content::before,
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] > .client-page-content > h1::after,
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] > .client-page-content > p:not(.client-menu-eyebrow)::after,
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .client-card strong::before,
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .client-card strong::after{
  content:none !important;
  display:none !important;
}

html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] > .client-page-content > .client-menu-eyebrow{
  display:block !important;
  max-inline-size:none !important;
  margin:0 0 4px !important;
  color:#d83f91 !important;
  -webkit-text-fill-color:#d83f91 !important;
  font:700 clamp(11px,.92vw,14px)/1.1 var(--pb-lot01-font-interface) !important;
  letter-spacing:.02em !important;
  text-shadow:none !important;
}

html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] > .client-page-content > h1{
  display:block !important;
  min-block-size:0 !important;
  margin:0 !important;
  color:#311536 !important;
  -webkit-text-fill-color:#311536 !important;
  font:400 clamp(42px,5vw,70px)/.94 var(--pb-lot01-font-display) !important;
  text-transform:none !important;
  text-shadow:none !important;
}

html body[data-client-theme="night"] #app#app#app#app#app .mockup[data-page="menu"] > .client-page-content > h1{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] > .client-page-content > p:not(.client-menu-eyebrow){
  display:block !important;
  max-inline-size:72% !important;
  margin:4px 0 clamp(16px,1.8vw,24px) !important;
  color:var(--pb-lot01-muted) !important;
  -webkit-text-fill-color:var(--pb-lot01-muted) !important;
  font:400 clamp(13px,1.05vw,16px)/1.35 var(--pb-lot01-font-interface) !important;
  text-shadow:none !important;
}

html body[data-client-theme="night"] #app#app#app#app#app .mockup[data-page="menu"] > .client-page-content > p:not(.client-menu-eyebrow){
  color:#e8dce8 !important;
  -webkit-text-fill-color:#e8dce8 !important;
}

html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .client-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:clamp(12px,1.15vw,18px) !important;
}

html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .client-card{
  overflow:hidden !important;
  border:2px solid #df78e9 !important;
  border-radius:22px !important;
  box-shadow:none !important;
}

html body[data-client-theme="day"] #app#app#app#app#app .mockup[data-page="menu"] .client-card{
  background:rgba(255,255,255,.95) !important;
  color:#311536 !important;
}

html body[data-client-theme="night"] #app#app#app#app#app .mockup[data-page="menu"] .client-card{
  background:rgba(19,9,26,.96) !important;
  color:#fff !important;
}

html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .client-card strong{
  display:block !important;
  min-block-size:42px !important;
  margin:0 !important;
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
  font:700 clamp(15px,1.35vw,20px)/1.05 var(--pb-lot01-font-interface) !important;
  text-transform:none !important;
}

html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .client-card strong > span{
  display:block !important;
}

html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .client-card strong > .category-card-subtitle{
  margin-block-start:3px !important;
  color:#624e66 !important;
  -webkit-text-fill-color:#624e66 !important;
  font:600 clamp(9px,.72vw,11px)/1 var(--pb-lot01-font-interface) !important;
}

html body[data-client-theme="night"] #app#app#app#app#app .mockup[data-page="menu"] .client-card strong > .category-card-subtitle{
  color:#d9c9dc !important;
  -webkit-text-fill-color:#d9c9dc !important;
}

@media(max-width:1179px){
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .client-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:520px){
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] > .client-page-content > p:not(.client-menu-eyebrow){
    max-inline-size:100% !important;
  }
}

/* ===== AFFINAGE VISUEL ROUTES INTERNES 20260829 ===== */
html body[data-client-theme="day"] #app#app#app#app#app .mockup[data-page="menu"] > .client-page-content{
  padding:clamp(14px,1.6vw,22px) !important;
  border:1px solid rgba(222,52,169,.22) !important;
  border-radius:26px !important;
  background:rgba(255,255,255,.84) !important;
  box-shadow:0 16px 34px rgba(45,14,54,.12) !important;
}
html body[data-client-theme="night"] #app#app#app#app#app .mockup[data-page="menu"] > .client-page-content{
  padding:clamp(14px,1.6vw,22px) !important;
  border:1px solid rgba(239,57,196,.42) !important;
  border-radius:26px !important;
  background:rgba(17,6,24,.86) !important;
  box-shadow:0 18px 38px rgba(0,0,0,.32) !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] > .client-page-content > h1{
  font-size:clamp(38px,4.25vw,58px) !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .client-card{
  padding:5px !important;
  border-width:2px !important;
  border-radius:19px !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .category-image-button{
  aspect-ratio:16 / 10 !important;
  border-radius:14px 14px 0 0 !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .category-image-button > img{
  object-position:center top !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .client-card-body{
  flex:0 1 auto !important;
  gap:5px !important;
  padding:9px 10px 10px !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .client-card strong{
  min-block-size:34px !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .client-card-body > span:not(.availability):not(.category-card-hint){
  font-size:clamp(10px,.82vw,13px) !important;
  line-height:1.25 !important;
}
html body[data-client-theme] #app#app#app :is(.event-detail,.contact-detail,.location-detail){
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
html body[data-client-theme] #app#app#app :is(.event-detail,.contact-detail,.location-detail) > .client-hero-heading{
  border-radius:18px !important;
  background:linear-gradient(90deg,rgba(20,5,30,.72),rgba(20,5,30,.34),rgba(20,5,30,.08)) !important;
}
html body[data-client-theme="day"] #app#app#app :is(.contact-detail,.location-detail) > :is(.contact-panel,.location-grid .contact-panel),
html body[data-client-theme="day"] #app#app#app .contact-detail > .contact-panel{
  border:1px solid rgba(102,34,116,.25) !important;
  border-radius:22px !important;
  background:rgba(255,255,255,.9) !important;
  box-shadow:0 14px 34px rgba(34,8,44,.18) !important;
}
html body[data-client-theme="night"] #app#app#app :is(.contact-detail,.location-detail) > :is(.contact-panel,.location-grid .contact-panel),
html body[data-client-theme="night"] #app#app#app .contact-detail > .contact-panel{
  border:1px solid rgba(239,57,196,.42) !important;
  border-radius:22px !important;
  background:rgba(20,7,28,.92) !important;
  box-shadow:0 16px 36px rgba(0,0,0,.34) !important;
}
html body[data-client-theme] #app#app#app .event-warm-cta :is(h2,p){
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:0 2px 8px rgba(0,0,0,.72) !important;
}
html body[data-client-theme] #app#app#app .event-warm-cta h2{
  font-size:clamp(20px,2vw,30px) !important;
  line-height:1.08 !important;
}
html body[data-client-theme] #app#app#app .event-warm-cta p{
  font-size:clamp(14px,1.12vw,17px) !important;
  line-height:1.4 !important;
}
@media(max-width:900px){
  html body[data-client-theme] #app#app#app :is(.event-detail,.contact-detail,.location-detail) > .client-hero-heading{
    margin-inline:0 !important;
  }
  html body[data-client-theme] #app#app#app .mockup[data-page="menu"] .category-image-button{
    aspect-ratio:16 / 8.4 !important;
  }
}
@media(max-width:520px){
  html body[data-client-theme] #app#app#app .mockup[data-page="menu"] > .client-page-content{
    padding:10px !important;
    border-radius:18px !important;
  }
  html body[data-client-theme] #app#app#app .mockup[data-page="menu"] .client-grid{
    gap:8px !important;
  }
  html body[data-client-theme] #app#app#app .mockup[data-page="menu"] .client-card{
    padding:3px !important;
    border-radius:14px !important;
  }
  html body[data-client-theme] #app#app#app .mockup[data-page="menu"] .category-image-button{
    aspect-ratio:4 / 3 !important;
    border-radius:10px 10px 0 0 !important;
  }
  html body[data-client-theme] #app#app#app .mockup[data-page="menu"] .client-card-body{
    gap:4px !important;
    padding:7px 6px 8px !important;
  }
  html body[data-client-theme] #app#app#app .mockup[data-page="menu"] .client-card strong{
    min-block-size:42px !important;
    font-size:clamp(12px,3.6vw,15px) !important;
  }
}

/* ===== CORRECTIONS RESPONSIVE ET COLLISIONS 20260829 ===== */
@media(max-width:1024px){
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .client-card small{
    display:block !important;
    inline-size:100% !important;
    max-inline-size:100% !important;
    min-block-size:0 !important;
    margin:0 !important;
    overflow:visible !important;
    font-size:clamp(10px,1.35vw,13px) !important;
    line-height:1.28 !important;
    -webkit-line-clamp:unset !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .client-card-actions{
    position:static !important;
    inset:auto !important;
    align-self:stretch !important;
    justify-self:auto !important;
    justify-content:center !important;
    inline-size:100% !important;
    margin-block-start:auto !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .category-card-cta{
    max-inline-size:100% !important;
    font-size:clamp(9px,1.2vw,12px) !important;
    white-space:normal !important;
  }
}
html body[data-client-theme="night"] #app#app#app#app#app .mockup[data-page="menu"] .client-card{
  background:rgba(19,9,26,.82) !important;
}
@media(min-width:601px) and (max-width:1179px){
  html body[data-client-theme] #app .mockup > .client-bastien-widget.open{
    inset:auto 12px 214px auto !important;
  }
  html body[data-client-theme] #app .mockup > .client-bastien-widget.open .client-bastien-panel{
    max-block-size:calc(100dvh - 236px) !important;
  }
}
@media(max-width:520px){
  html body[data-client-theme] #app#app#app#app#app .mockup:not([data-page="accueil"]){
    padding-block-end:352px !important;
  }
  body[data-client-theme-mode] #app#app#app#app#app .mockup > .theme-mode-switch.pb-master-selector-ready{
    inset:47px 10px auto auto !important;
    block-size:44px !important;
    min-block-size:44px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay{
    inset:5px 10px auto auto !important;
    grid-template-rows:44px 44px !important;
    row-gap:58px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay > .client-quick-action:nth-child(1),
  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay > .client-quick-action:nth-child(2),
  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay > .install-home-button{
    block-size:44px !important;
    min-block-size:44px !important;
    max-block-size:44px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .site-nav-overlay{
    inset:auto 15px 146px 15px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup:not([data-page="accueil"]) > .client-service-footer{
    position:absolute !important;
    inset:auto 130px 8px 15px !important;
    inline-size:auto !important;
    min-block-size:132px !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    align-content:end !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .client-service-footer .client-footer-meta{
    align-items:end !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .client-service-footer .client-footer-meta > :is(a,button){
    display:inline-flex !important;
    align-items:center !important;
    min-block-size:44px !important;
    block-size:44px !important;
    padding:8px 4px !important;
  }
  html body[data-client-theme] #app .mockup > .client-bastien-widget.open{
    inset:auto 8px 286px auto !important;
  }
  html body[data-client-theme] #app .mockup > .client-bastien-widget.open .client-bastien-panel{
    max-block-size:calc(100dvh - 306px) !important;
  }
}

/* ===== DONNÉES FICTIVES VISIBLES 20260829 ===== */
html body[data-client-theme] #app .client-demo-review,
html body[data-client-theme] #app .client-demo-vote-count{
  display:grid !important;
  gap:3px !important;
  inline-size:100% !important;
  max-inline-size:100% !important;
  margin:6px 0 !important;
  padding:8px 10px !important;
  overflow:visible !important;
  border:1px solid rgba(216,63,145,.38) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.72) !important;
  color:#3b173e !important;
  -webkit-line-clamp:unset !important;
  line-height:1.3 !important;
}
html body[data-client-theme="night"] #app :is(.client-demo-review,.client-demo-vote-count){
  background:rgba(31,9,40,.86) !important;
  color:#fff !important;
}
html body[data-client-theme] #app :is(.client-demo-review,.client-demo-vote-count) > :is(strong,span){
  display:block !important;
  color:inherit !important;
}
html body[data-client-theme] #app .client-demo-vote-count > span{
  font-size:.78em !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
}
html body[data-client-theme] #app .client-demo-vote-trends{
  display:grid !important;
  gap:8px !important;
  margin-block:18px !important;
  padding:16px !important;
  border:1px solid rgba(216,63,145,.35) !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.76) !important;
}
html body[data-client-theme="night"] #app .client-demo-vote-trends{
  background:rgba(24,7,32,.88) !important;
  color:#fff !important;
}
html body[data-client-theme] #app .client-demo-vote-trends :is(h2,p){
  margin:0 !important;
}

/* ===== CONFIGURATEUR — CONTRÔLES VISIBLES ET CLIQUABLES 20260829 ===== */
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-composition-heading{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  align-items:start !important;
  overflow:visible !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-composition-heading > *{
  grid-column:1 !important;
  min-inline-size:0 !important;
  max-inline-size:100% !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-composition-steps{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:8px !important;
  inline-size:100% !important;
  block-size:auto !important;
  min-block-size:0 !important;
  max-block-size:none !important;
  margin:0 0 16px !important;
  padding:0 !important;
  overflow:visible !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-composition-steps li{
  min-inline-size:0 !important;
  min-block-size:44px !important;
  block-size:auto !important;
  padding:7px 8px !important;
  overflow:visible !important;
  line-height:1.15 !important;
  text-align:center !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.lot01-composition-page,.lot01-composition-layout,.lot01-composition-main,.custom-builder-controls,.lot01-composition-section,.client-order-journey,.client-order-journey-summary,.lot01-composition-summary){
  block-size:auto !important;
  min-block-size:0 !important;
  max-block-size:none !important;
  overflow:visible !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.lot02-dough-grid,.lot01-base-carousel-frame,.lot01-base-grid,.lot01-carousel-frame,.lot01-ingredient-carousel){
  block-size:auto !important;
  min-block-size:0 !important;
  max-block-size:none !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.lot02-dough-card,.lot01-base-card,.lot01-ingredient-card){
  position:relative !important;
  inset:auto !important;
  align-self:stretch !important;
  min-inline-size:0 !important;
  block-size:auto !important;
  min-block-size:0 !important;
  max-block-size:none !important;
  padding:10px !important;
  gap:10px !important;
  overflow:visible !important;
  isolation:isolate !important;
  scroll-snap-align:start !important;
  scroll-margin-inline:8px !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.lot02-dough-card,.lot01-base-card,.lot01-ingredient-card) .pb-custom-media{
  position:relative !important;
  inline-size:100% !important;
  min-inline-size:0 !important;
  block-size:auto !important;
  min-block-size:0 !important;
  max-block-size:none !important;
  aspect-ratio:1 / 1 !important;
  overflow:hidden !important;
  border-radius:16px !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.lot02-dough-card,.lot01-base-card,.lot01-ingredient-card) .pb-custom-media > img{
  display:block !important;
  inline-size:100% !important;
  block-size:100% !important;
  min-block-size:0 !important;
  max-block-size:none !important;
  object-fit:cover !important;
  object-position:var(--pb-focal-point,50% 50%) !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.lot02-dough-copy,.lot01-base-card-copy,.lot01-ingredient-card-copy){
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  min-inline-size:0 !important;
  min-block-size:0 !important;
  gap:5px !important;
  overflow:visible !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.lot02-dough-copy,.lot01-base-card-copy,.lot01-ingredient-card-copy) :is(strong,small,span){
  display:block !important;
  inline-size:100% !important;
  max-inline-size:100% !important;
  block-size:auto !important;
  min-block-size:0 !important;
  max-block-size:none !important;
  overflow:visible !important;
  white-space:normal !important;
  text-overflow:clip !important;
  -webkit-line-clamp:unset !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.lot01-dough-action,.client-base-choice,.lot01-ingredient-card-copy > button,.lot01-step-actions > button){
  position:static !important;
  inset:auto !important;
  align-self:stretch !important;
  inline-size:100% !important;
  min-inline-size:44px !important;
  max-inline-size:100% !important;
  block-size:44px !important;
  min-block-size:44px !important;
  max-block-size:44px !important;
  margin-block-start:auto !important;
  padding:7px 12px !important;
  overflow:visible !important;
  font-size:clamp(11px,.82vw,13px) !important;
  line-height:1.1 !important;
  white-space:normal !important;
  text-overflow:clip !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.lot01-base-grid,.lot01-ingredient-carousel,.lot02-dough-grid){
  box-sizing:border-box !important;
  gap:12px !important;
  padding:8px !important;
  scroll-padding-inline:8px !important;
  overscroll-behavior-inline:contain !important;
  scrollbar-gutter:stable both-edges !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.lot01-base-grid,.lot01-ingredient-carousel){
  display:grid !important;
  grid-template-columns:none !important;
  grid-template-rows:minmax(0,auto) !important;
  grid-auto-flow:column !important;
  grid-auto-columns:calc((100% - 36px) / 4) !important;
  align-items:stretch !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.lot01-base-carousel-frame,.lot01-carousel-frame){
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) 44px !important;
  grid-template-rows:minmax(0,auto) !important;
  align-items:center !important;
  gap:8px !important;
  inline-size:100% !important;
  overflow:visible !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.lot01-base-carousel-frame,.lot01-carousel-frame) > .previous{
  grid-column:1 !important;
  grid-row:1 !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.lot01-base-carousel-frame,.lot01-carousel-frame) > :is(.lot01-base-grid,.lot01-ingredient-carousel){
  grid-column:2 !important;
  grid-row:1 !important;
  min-inline-size:0 !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.lot01-base-carousel-frame,.lot01-carousel-frame) > .next{
  grid-column:3 !important;
  grid-row:1 !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-carousel-arrow{
  position:static !important;
  inset:auto !important;
  inline-size:44px !important;
  min-inline-size:44px !important;
  max-inline-size:44px !important;
  block-size:44px !important;
  min-block-size:44px !important;
  max-block-size:44px !important;
  margin:0 !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.lot01-segmented-control > button.active,.client-base-choice.active,.lot01-ingredient-card button.active,.lot01-dough-action.active){
  outline:0 !important;
  outline-offset:0 !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(button,input,select,a[href]):focus-visible{
  outline:3px solid #ffd84d !important;
  outline-offset:3px !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-step-actions{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) !important;
  align-items:center !important;
  gap:10px !important;
  inline-size:100% !important;
  margin-block-start:12px !important;
  overflow:visible !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-global-quantity{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(180px,auto) !important;
  gap:12px !important;
  align-items:center !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-global-quantity > .lot01-step-actions{
  grid-column:1 / -1 !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.client-journey-offer-selector,.client-product-offer-selector){
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:0 !important;
  inline-size:min(100%,560px) !important;
  min-block-size:44px !important;
  overflow:visible !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .client-journey-classic-options{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:8px !important;
  inline-size:100% !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .client-journey-classic-options > button{
  inline-size:100% !important;
  min-block-size:44px !important;
  block-size:auto !important;
  padding:8px 12px !important;
  white-space:normal !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .client-order-journey-summary dl > div{
  grid-template-columns:minmax(100px,.3fr) minmax(0,1fr) !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .client-order-journey-summary dd{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:6px 10px !important;
  align-items:center !important;
  min-inline-size:0 !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .client-order-journey-summary dd > :is(strong,span){
  grid-column:1 !important;
  min-inline-size:0 !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .client-order-journey-summary dd > button{
  grid-column:2 !important;
  grid-row:1 / span 3 !important;
  min-inline-size:96px !important;
  min-block-size:44px !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] > .client-bastien-widget{
  position:relative !important;
  inset:auto !important;
  z-index:30 !important;
  inline-size:min(360px,calc(100% - 24px)) !important;
  max-inline-size:calc(100% - 24px) !important;
  margin:24px 12px 180px auto !important;
  pointer-events:none !important;
}
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] > .client-bastien-widget :is(button,input,textarea,.client-bastien-panel){
  pointer-events:auto !important;
}

@media(max-width:1050px){
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot02-dough-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    overflow:visible !important;
  }
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.lot01-base-grid,.lot01-ingredient-carousel){
    grid-auto-columns:calc((100% - 12px) / 2) !important;
  }
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.lot02-dough-card,.lot01-base-card,.lot01-ingredient-card){
    display:grid !important;
    grid-template-columns:108px minmax(0,1fr) !important;
    grid-template-rows:auto !important;
  }
}

@media(max-width:600px){
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-composition-steps{
    display:flex !important;
    gap:8px !important;
    padding:4px 4px 10px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-padding-inline:4px !important;
    scroll-snap-type:x proximity !important;
  }
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-composition-steps li{
    flex:0 0 118px !important;
    scroll-snap-align:start !important;
  }
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot02-dough-grid{
    display:grid !important;
    grid-template-columns:none !important;
    grid-template-rows:minmax(0,auto) !important;
    grid-auto-flow:column !important;
    grid-auto-columns:calc(100% - 8px) !important;
    align-items:stretch !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important;
  }
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.lot01-base-grid,.lot01-ingredient-carousel){
    grid-auto-columns:calc(100% - 8px) !important;
  }
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.lot02-dough-card,.lot01-base-card,.lot01-ingredient-card){
    grid-template-columns:96px minmax(0,1fr) !important;
    padding:9px !important;
    gap:9px !important;
  }
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.lot01-base-carousel-frame,.lot01-carousel-frame){
    grid-template-columns:44px minmax(0,1fr) 44px !important;
    grid-template-rows:minmax(0,auto) 44px !important;
    align-items:center !important;
  }
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.lot01-base-carousel-frame,.lot01-carousel-frame) > :is(.lot01-base-grid,.lot01-ingredient-carousel){
    grid-column:1 / -1 !important;
    grid-row:1 !important;
  }
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.lot01-base-carousel-frame,.lot01-carousel-frame) > .previous{
    grid-column:1 !important;
    grid-row:2 !important;
    justify-self:start !important;
  }
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] :is(.lot01-base-carousel-frame,.lot01-carousel-frame) > .next{
    grid-column:3 !important;
    grid-row:2 !important;
    justify-self:end !important;
  }
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-step-actions{
    grid-template-columns:minmax(0,1fr) !important;
  }
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-global-quantity{
    grid-template-columns:minmax(0,1fr) !important;
  }
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .lot01-global-quantity > .lot01-step-actions{
    grid-column:1 !important;
  }
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .client-order-journey-summary dl > div{
    grid-template-columns:minmax(0,1fr) !important;
  }
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .client-order-journey-summary dd{
    grid-template-columns:minmax(0,1fr) !important;
  }
  html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .client-order-journey-summary dd > button{
    grid-column:1 !important;
    grid-row:auto !important;
    inline-size:100% !important;
  }
}
/* Parcours commande unifié — offre/formule avant toute pizza. */
.mockup[data-page="personnalisables"] .client-order-journey .client-order-journey-aside{
  position:sticky;
  top:110px;
  align-self:start;
}
.mockup[data-page="personnalisables"] .client-order-journey-summary dl{
  display:grid;
  gap:10px;
  margin:0 0 18px;
}
.mockup[data-page="personnalisables"] .client-order-journey-summary dl > div{
  display:grid;
  grid-template-columns:minmax(130px,.35fr) minmax(0,1fr);
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid rgba(188,72,185,.24);
}
.mockup[data-page="personnalisables"] .client-order-journey-summary dd{margin:0}
.mockup[data-page="personnalisables"] .client-order-journey-summary dd button{
  min-height:34px;
  margin-left:10px;
  padding:5px 13px;
}
@media (max-width:767px){
  .mockup[data-page="personnalisables"] .client-order-journey .client-order-journey-aside{
    position:static;
    order:-1;
    width:100%;
  }
  .mockup[data-page="personnalisables"] .client-order-journey-summary dl > div{
    grid-template-columns:1fr;
  }
}

/* Les libellés de formule restent entièrement contenus dans la gélule tactile. */
html body[data-client-theme] #app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .client-journey-formula-grid .lot02-menu-copy > button{
  box-sizing:border-box !important;
  inline-size:100% !important;
  min-inline-size:0 !important;
  max-inline-size:100% !important;
  block-size:44px !important;
  min-block-size:44px !important;
  padding-inline:14px !important;
  overflow:visible !important;
  white-space:nowrap !important;
}

@media (max-width:359px){
  html body[data-client-theme] #app#app#app .mockup[data-page="personnalisables"][data-client-lot01-board="07"] .client-journey-formula-grid .lot02-menu-copy > button{
    padding-inline:10px !important;
  }
}
/* ===== CLOTURE SITE CLIENT 2026-09-01 — ordre, commandes et reflow ===== */
html body[data-client-theme] #app#app#app#app#app .mockup > .theme-mode-switch.pb-master-selector-ready{
  position:absolute !important;
  inset:12px 3% auto auto !important;
  transform:none !important;
  inline-size:396px !important;
  max-inline-size:calc(100vw - 180px) !important;
  block-size:44px !important;
  margin:0 !important;
  z-index:87 !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay{
  position:absolute !important;
  inset:64px 3% auto auto !important;
  transform:none !important;
  display:grid !important;
  grid-template-columns:108px 118px !important;
  grid-auto-rows:44px !important;
  align-items:center !important;
  justify-content:end !important;
  gap:8px 10px !important;
  inline-size:236px !important;
  block-size:auto !important;
  overflow:visible !important;
  z-index:86 !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay > .client-quick-action{
  position:relative !important;
  inset:auto !important;
  inline-size:100% !important;
  min-block-size:44px !important;
  margin:0 !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay > .client-quick-action:nth-child(1){
  grid-column:1 !important;
  grid-row:1 !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay > .client-quick-action:nth-child(2){
  grid-column:2 !important;
  grid-row:1 !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay > .install-home-button{
  position:relative !important;
  inset:auto !important;
  grid-column:1 / 3 !important;
  grid-row:2 !important;
  justify-self:end !important;
  inline-size:150px !important;
  min-block-size:44px !important;
  margin:0 !important;
}
@media(min-width:1180px){
  html body[data-client-theme] #app#app#app#app#app .mockup > .site-nav-overlay{
    inset:64px auto auto clamp(160px,12vw,205px) !important;
    inline-size:min(720px,calc(100vw - 610px)) !important;
    max-inline-size:720px !important;
    gap:8px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .site-nav-overlay > .nav-button{
    flex:1 1 0 !important;
    inline-size:auto !important;
    min-inline-size:0 !important;
    padding-inline:8px !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    text-shadow:0 1px 2px rgba(28,0,35,.9) !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .site-nav-overlay > .nav-button.pb-action-pill::before{
    content:"" !important;
    display:block !important;
  }
}
html body[data-client-theme] #app .client-product-offer-actions,
html body[data-client-theme] #app .lot01-card-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:10px 12px !important;
}
html body[data-client-theme] #app .client-product-offer-actions > button,
html body[data-client-theme] #app .lot01-card-actions > button{
  flex:1 1 132px !important;
  min-inline-size:118px !important;
  min-block-size:44px !important;
  margin:0 !important;
}
html body[data-client-theme] #app .cart-row{
  grid-template-columns:88px minmax(0,1fr) auto auto !important;
  align-items:center !important;
}
html body[data-client-theme] #app .cart-product-thumb{
  inline-size:80px !important;
  block-size:80px !important;
  border-radius:18px !important;
  object-fit:cover !important;
  box-shadow:0 8px 20px rgba(52,0,74,.28) !important;
}
html body[data-client-theme] #app .client-product-reviews-page{
  inline-size:min(100% - 32px,1040px) !important;
  margin-inline:auto !important;
  padding-block-end:40px !important;
}
html body[data-client-theme] #app .client-product-reviews-hero{
  display:grid !important;
  grid-template-columns:minmax(220px,38%) minmax(0,1fr) !important;
  gap:clamp(20px,4vw,52px) !important;
  align-items:center !important;
  margin-block:18px 28px !important;
}
html body[data-client-theme] #app .client-product-reviews-hero img{
  inline-size:100% !important;
  aspect-ratio:4 / 3 !important;
  border-radius:28px !important;
  object-fit:cover !important;
}
html body[data-client-theme] #app .client-product-review-list{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:16px !important;
}
html body[data-client-theme] #app .client-product-review-card{
  min-block-size:150px !important;
  padding:20px !important;
  border:1px solid rgba(211,55,219,.35) !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.86) !important;
  box-shadow:0 12px 28px rgba(71,15,88,.12) !important;
}
html body[data-client-theme="night"] #app .client-product-review-card{
  background:rgba(22,7,31,.9) !important;
}
html body[data-client-theme] #app .client-product-review-card header{
  display:flex !important;
  justify-content:space-between !important;
  gap:12px !important;
}
html body[data-client-theme] #app .client-field-error{
  display:block;
  margin-block-start:5px;
  color:#a60b37;
  font-size:.88rem;
  font-weight:800;
}
html body[data-client-theme="night"] #app .client-field-error{color:#ff9abc}
html body[data-client-theme] #app .client-demo-slot-list{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
  margin-block:16px !important;
}
html body[data-client-theme] #app .client-demo-slot{
  min-block-size:88px !important;
  padding:12px !important;
  text-align:left !important;
}
html body[data-client-theme] #app .client-demo-slot > :is(strong,span,small){display:block}
html body[data-client-theme] #app .client-interactive-demo-map{
  min-inline-size:0 !important;
  margin:0 !important;
}
html body[data-client-theme] #app .client-demo-map-toolbar{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin-block-end:10px !important;
}
html body[data-client-theme] #app .client-demo-map-toolbar button{
  inline-size:44px !important;
  min-inline-size:44px !important;
  block-size:44px !important;
  min-block-size:44px !important;
}
html body[data-client-theme] #app .client-demo-map-viewport{
  position:relative !important;
  min-block-size:390px !important;
  overflow:hidden !important;
  border:2px solid rgba(207,39,230,.58) !important;
  border-radius:26px !important;
  touch-action:none !important;
  cursor:grab !important;
}
html body[data-client-theme] #app .client-demo-map-layer{
  position:absolute !important;
  inset:0 !important;
  transform-origin:center !important;
  transition:transform .14s ease !important;
}
html body[data-client-theme] #app .client-demo-map-layer > img{
  inline-size:100% !important;
  block-size:100% !important;
  object-fit:cover !important;
}
html body[data-client-theme] #app .client-demo-map-marker{
  position:absolute !important;
  inset:var(--marker-y) auto auto var(--marker-x) !important;
  transform:translate(-50%,-50%) !important;
  min-inline-size:44px !important;
  min-block-size:44px !important;
  z-index:2 !important;
}
html body[data-client-theme] #app .client-payment-test-fields{align-items:end !important}
html body[data-client-theme] #app .client-payment-test-warning{border:2px solid #d71463 !important}
html body[data-client-theme] #app .client-service-footer .client-footer-meta > a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-block-size:44px !important;
  block-size:44px !important;
  padding:6px 10px !important;
}
@media(max-width:1179px){
  html body[data-client-theme] #app#app#app#app#app .mockup > .theme-mode-switch.pb-master-selector-ready{
    inset:10px 20px auto auto !important;
    inline-size:364px !important;
    max-inline-size:calc(100vw - 168px) !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay{
    inset:62px 20px auto auto !important;
    grid-template-columns:106px 110px !important;
    gap:8px 10px !important;
    inline-size:226px !important;
  }
}
@media(max-width:767px){
  html body[data-client-theme] #app .cart-row{
    grid-template-columns:72px minmax(0,1fr) !important;
  }
  html body[data-client-theme] #app .cart-product-thumb{
    inline-size:68px !important;
    block-size:68px !important;
  }
  html body[data-client-theme] #app .client-product-reviews-hero{
    grid-template-columns:1fr !important;
  }
  html body[data-client-theme] #app .client-product-review-list,
  html body[data-client-theme] #app .client-demo-slot-list{
    grid-template-columns:1fr !important;
  }
  html body[data-client-theme] #app .client-demo-map-viewport{min-block-size:310px !important}
}
@media(max-width:520px){
  html body[data-client-theme] #app#app#app#app#app .mockup > .theme-mode-switch.pb-master-selector-ready{
    inset:8px 10px auto auto !important;
    inline-size:calc(100vw - 106px) !important;
    max-inline-size:276px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay{
    inset:60px 10px auto auto !important;
    grid-template-columns:78px 82px !important;
    gap:8px 8px !important;
    inline-size:168px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay > .client-quick-action{
    padding-inline:5px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay > .install-home-button{
    inline-size:104px !important;
    padding-inline:7px !important;
  }
  html body[data-client-theme] #app .client-service-footer .client-footer-meta{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:4px !important;
  }
  html body[data-client-theme] #app .client-service-footer .client-footer-meta > a{
    min-inline-size:0 !important;
    padding-inline:3px !important;
    font-size:9px !important;
  }
}

/* Clôture 2026-09-01 — offres indépendantes, largeur dictée par le libellé. */
html body[data-client-theme] #app#app#app#app#app .client-product-offer-actions{
  justify-content:flex-start !important;
}
html body[data-client-theme] #app#app#app#app#app .client-product-offer-actions > button{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:max-content !important;
}
@media(max-width:1179px){
  html body[data-client-theme] #app#app#app#app#app .mockup > .quick-actions-overlay{
    grid-template-rows:44px !important;
    grid-auto-rows:44px !important;
  }
}

/* Tablette Accueil : sépare la navigation des réseaux et mentions en pied. */
@media(min-width:521px) and (max-width:1179px){
  html body[data-client-theme] #app#app#app#app#app
    .mockup[data-page="accueil"] > .site-nav-overlay,
  html body[data-client-theme] #app#app#app#app#app
    .mockup[data-page="accueil"] > .client-bottom-dock > .client-professional-bottom{
    bottom:122px !important;
  }
}

/* Fiche produit : le pied juridique de la page reste derrière le dialogue et
   ne doit jamais former un second jeu de liens, notamment aux formats tactiles.
   Le dialogue conserve seul Confidentialité / RGPD / Conditions. */
html body[data-client-theme]:has(
  #modalBackdrop.open[data-kind="product"][data-product-sheet="lot01"]
) #app#app#app#app#app .site-legal-footer.client-service-footer{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* ===== SOURCE CONSOLIDÉE: private/site/assets/client-final-correction-20260902.css ===== */
/* Pizza Baladzo — compléments fonctionnels Site Client, 2 septembre 2026. */

/* Le menu conserve ses médias et ses boutons officiels, sans cadres parasites.
   La surface générale reste indispensable pour que les textes ne soient jamais
   posés directement sur la remorque ou le décor. */
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .client-card{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
html body[data-client-theme="day"] #app#app#app#app#app .mockup[data-page="menu"] > .client-page-content{
  border:1px solid rgba(150,44,204,.32) !important;
  background:rgba(255,251,255,.96) !important;
  box-shadow:0 24px 70px rgba(69,22,91,.18),0 0 28px rgba(197,48,255,.10) !important;
}
html body[data-client-theme="night"] #app#app#app#app#app .mockup[data-page="menu"] > .client-page-content{
  border:1px solid rgba(237,91,255,.62) !important;
  background:rgba(16,7,24,.92) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.52),0 0 28px rgba(197,48,255,.16) !important;
}
/* Accueil final 2026-09-02 — restaure les compositions téléphone/tablette
   validées, tout en conservant l’ordre fonctionnel récent du header. */
@media (min-width:601px) and (max-width:1024px) and (orientation:portrait){
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser{
    left:33px !important;
    top:181px !important;
    width:460px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser h1{
    font-size:50px !important;
    line-height:1.08 !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser small{
    width:430px !important;
    margin-top:8px !important;
    font-size:18px !important;
    line-height:1.35 !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .site-nav-overlay{
    left:32px !important;
    right:47px !important;
    top:auto !important;
    bottom:100px !important;
    width:auto !important;
    height:94px !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-template-rows:40px 40px !important;
    grid-template-areas:"menu trouver evenements" "contact apropos pro" !important;
    gap:14px 16px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button{
    height:40px !important;
    min-height:40px !important;
    font-size:14px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer{
    left:32px !important;
    right:auto !important;
    top:auto !important;
    bottom:31px !important;
    width:470px !important;
    font-size:14px !important;
    line-height:1.35 !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-bottom-dock > .client-tutorial-button:not(.client-professional-bottom){
    right:32px !important;
    top:auto !important;
    bottom:31px !important;
    width:162px !important;
    height:41px !important;
    min-height:41px !important;
    font-size:14px !important;
  }
}

@media (max-width:600px) and (orientation:portrait){
  body[data-client-theme-mode] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]
    .theme-mode-switch.pb-master-selector-ready{
    left:auto !important;
    right:10px !important;
    top:9px !important;
    width:184px !important;
    height:31px !important;
    min-height:31px !important;
    overflow:hidden !important;
  }
  body[data-client-theme-mode] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]
    .theme-mode-switch.pb-master-selector-ready > button{
    height:31px !important;
    min-height:31px !important;
    transform:none !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay{
    left:auto !important;
    right:10px !important;
    top:44px !important;
    width:134px !important;
    height:31px !important;
    grid-template-columns:65px 65px !important;
    gap:4px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay .client-quick-action{
    width:65px !important;
    height:31px !important;
    min-height:31px !important;
    padding:0 4px !important;
    font-size:9px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .install-home-button{
    left:auto !important;
    right:10px !important;
    top:79px !important;
    width:89px !important;
    height:31px !important;
    min-height:31px !important;
    padding:0 4px !important;
    font-size:9px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser{
    left:18px !important;
    top:113px !important;
    width:220px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser h1{
    font-size:30px !important;
    line-height:1.05 !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser small{
    width:220px !important;
    margin-top:8px !important;
    font-size:12px !important;
    line-height:1.28 !important;
  }
  body[data-client-theme="day"] #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser :is(h1,small){
    color:#181019 !important;
    -webkit-text-fill-color:#181019 !important;
  }
  body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser :is(h1,small){
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .site-nav-overlay{
    left:14px !important;
    right:14px !important;
    top:auto !important;
    bottom:106px !important;
    width:auto !important;
    height:105px !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:repeat(3,31px) !important;
    grid-template-areas:"menu trouver" "evenements contact" "apropos pro" !important;
    gap:6px 8px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button{
    width:100% !important;
    height:31px !important;
    min-height:31px !important;
    padding:0 4px !important;
    font-size:10px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer{
    left:14px !important;
    right:auto !important;
    top:auto !important;
    bottom:18px !important;
    width:230px !important;
    min-height:31px !important;
    font-size:9px !important;
    line-height:1.45 !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer nav{
    width:230px !important;
    margin:0 !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
    gap:0 4px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer nav a{
    display:inline-flex !important;
    min-width:0 !important;
    min-height:31px !important;
    align-items:center !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-bottom-dock > .client-tutorial-button:not(.client-professional-bottom){
    right:12px !important;
    top:auto !important;
    bottom:18px !important;
    width:104px !important;
    height:31px !important;
    min-height:31px !important;
    font-size:10px !important;
  }
}

html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .client-card{
  padding:0 !important;
  overflow:visible !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .category-image-button{
  border:0 !important;
  box-shadow:none !important;
}

html body[data-client-theme] #app :is(
  .client-pages-overview,
  .client-vote-results,
  .client-demo-loyalty,
  .client-post-order-review,
  .client-order-delay,
  .client-order-refusal,
  .client-pickup-proof,
  .client-test-scenario-controls
){
  box-sizing:border-box;
  min-inline-size:0;
}

html body[data-client-theme] #app .client-pages-group{
  margin-block:clamp(22px,3vw,38px);
}
html body[data-client-theme] #app .client-page-link-card .client-card-body{
  min-block-size:150px;
  justify-content:space-between;
}
html body[data-client-theme] #app .client-catalog-state{
  min-block-size:220px;
  display:grid;
  align-content:center;
  justify-items:start;
  gap:10px;
  padding:clamp(20px,4vw,44px);
  border:1px solid rgba(207,39,230,.3);
  border-radius:24px;
  background:rgba(255,255,255,.72);
}
html body[data-client-theme="night"] #app .client-catalog-state{
  background:rgba(22,7,31,.82);
}

html body[data-client-theme] #app .client-vote-results-grid,
html body[data-client-theme] #app .event-path-grid,
html body[data-client-theme] #app .client-loyalty-rewards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,24px);
}
html body[data-client-theme] #app :is(.client-vote-result-card,.event-path-card,.client-loyalty-rewards > article){
  min-inline-size:0;
  padding:clamp(16px,2vw,24px);
  border:1px solid rgba(207,39,230,.35);
  border-radius:24px;
  background:rgba(255,255,255,.88);
  box-shadow:0 12px 28px rgba(71,15,88,.12);
}
html body[data-client-theme="night"] #app :is(.client-vote-result-card,.event-path-card,.client-loyalty-rewards > article){
  background:rgba(22,7,31,.9);
}
html body[data-client-theme] #app .client-vote-result-card ol{
  display:grid;
  gap:10px;
  margin:0;
  padding-inline-start:1.5rem;
}
html body[data-client-theme] #app .client-vote-result-card li span,
html body[data-client-theme] #app .client-loyalty-rewards > article > span{
  display:block;
  margin-block-start:4px;
}
html body[data-client-theme] #app .event-path-card{
  display:flex;
  flex-direction:column;
  gap:12px;
}
html body[data-client-theme] #app .event-path-card .event-main-photo{
  margin:0;
}
html body[data-client-theme] #app .event-path-card .event-main-photo img{
  inline-size:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  border-radius:18px;
}
html body[data-client-theme] #app .event-path-card > button{
  align-self:flex-start;
  margin-block-start:auto;
}

html body[data-client-theme] #app .client-loyalty-balance{
  display:flex;
  align-items:baseline;
  gap:10px;
}
html body[data-client-theme] #app .client-loyalty-balance strong{
  font-size:clamp(34px,5vw,58px);
}
html body[data-client-theme] #app .client-loyalty-progress{
  display:block;
  inline-size:100%;
  block-size:14px;
  margin-block:12px;
  overflow:hidden;
  border:1px solid rgba(207,39,230,.42);
  border-radius:999px;
  background:rgba(76,28,90,.16);
}
html body[data-client-theme] #app .client-loyalty-progress > span{
  display:block;
  inline-size:var(--client-loyalty-progress,0%);
  block-size:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#8d19df,#ef178f);
}

html body[data-client-theme] #app :is(.client-post-order-review,.client-order-delay,.client-order-refusal,.client-pickup-proof,.client-test-scenario-controls){
  margin-block:18px;
  padding:clamp(16px,2vw,24px);
  border:1px solid rgba(207,39,230,.42);
  border-radius:22px;
  background:rgba(255,255,255,.9);
}
html body[data-client-theme="night"] #app :is(.client-post-order-review,.client-order-delay,.client-order-refusal,.client-pickup-proof,.client-test-scenario-controls){
  background:rgba(22,7,31,.94);
}
html body[data-client-theme] #app .client-order-delay{
  border-color:#d88313;
}
html body[data-client-theme] #app .client-order-refusal{
  border-color:#bd184d;
}
html body[data-client-theme] #app .client-order-decision{
  margin-block:14px;
}
html body[data-client-theme] #app .client-pickup-proof-grid{
  display:grid;
  grid-template-columns:minmax(196px,auto) minmax(0,1fr);
  gap:clamp(16px,3vw,30px);
  align-items:center;
}
html body[data-client-theme] #app .client-pickup-qr{
  display:grid;
  place-items:center;
  inline-size:212px;
  min-block-size:212px;
  padding:8px;
  border:1px solid rgba(207,39,230,.42);
  border-radius:18px;
  background:#fff;
  transition:inline-size .2s ease,min-block-size .2s ease;
}
html body[data-client-theme] #app .client-pickup-qr :is(canvas,img){
  display:block;
  max-inline-size:100%;
  block-size:auto;
}
html body[data-client-theme] #app .client-pickup-proof.is-enlarged .client-pickup-qr{
  inline-size:min(340px,100%);
  min-block-size:340px;
}
html body[data-client-theme] #app .client-pickup-proof dl{
  display:grid;
  gap:12px;
  margin:0;
}
html body[data-client-theme] #app .client-pickup-proof dl > div{
  display:grid;
  gap:3px;
}
html body[data-client-theme] #app .client-test-scenario-controls > summary{
  min-block-size:44px;
  cursor:pointer;
  font-weight:800;
}
html body[data-client-theme] #app :is(.client-account-secondary-actions,.client-profile-section){
  margin-block:18px;
  padding:clamp(14px,2vw,22px);
  border:1px solid rgba(207,39,230,.3);
  border-radius:20px;
}
html body[data-client-theme] #app .client-profile-section > h3{
  margin-block-start:0;
}
html body[data-client-theme] #app .client-profile-check-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

@media(max-width:767px){
  html body[data-client-theme] #app .client-vote-results-grid,
  html body[data-client-theme] #app .event-path-grid,
  html body[data-client-theme] #app .client-loyalty-rewards,
  html body[data-client-theme] #app .client-profile-check-grid,
  html body[data-client-theme] #app .client-pickup-proof-grid{
    grid-template-columns:1fr;
  }
  html body[data-client-theme] #app .client-pickup-qr{
    justify-self:center;
  }
  html body[data-client-theme] #app .client-pickup-proof.is-enlarged .client-pickup-qr{
    min-block-size:min(340px,calc(100vw - 88px));
  }
}

@media(prefers-reduced-motion:reduce){
  html body[data-client-theme] #app .client-pickup-qr{
    transition:none;
  }
}


/* Fermeture responsive ciblée : votes et localisation (§6 P1.18-19, P2.31). */
html body[data-client-theme] #app .client-visually-hidden{
  position:absolute !important;
  inline-size:1px !important;
  block-size:1px !important;
  margin:-1px !important;
  padding:0 !important;
  overflow:hidden !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
}
html body[data-client-theme] #app .ingredient-vote-option .ingredient-vote-meta{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  align-items:start !important;
  justify-content:stretch !important;
  gap:3px !important;
  min-inline-size:0 !important;
}
html body[data-client-theme] #app .ingredient-vote-option .ingredient-vote-meta > small,
html body[data-client-theme] #app .ingredient-vote-option > span > strong{
  min-inline-size:0 !important;
  overflow-wrap:anywhere !important;
}
html body[data-client-theme] #app .ingredient-vote-option > span:not(.ingredient-vote-meta){
  flex-wrap:wrap !important;
  min-inline-size:0 !important;
}
html body[data-client-theme] #app .ingredient-vote-option em{
  white-space:normal !important;
}
html body[data-client-theme] #app#app#app#app .location-simulated-map > figcaption{
  position:static !important;
  inset:auto !important;
  margin:10px 0 0 !important;
}
html body[data-client-theme] #app .client-demo-map-viewport{
  touch-action:pan-y pinch-zoom !important;
}
html body[data-client-theme] #app .client-demo-map-viewport[data-pan-enabled="true"]{
  touch-action:none !important;
}
html body[data-client-theme] #app .client-demo-map-marker > small{
  position:absolute !important;
  inline-size:1px !important;
  block-size:1px !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
}
html body[data-client-theme] #app .client-demo-map-marker:is(.active,:hover,:focus-visible) > small{
  inset:calc(100% + 4px) auto auto 50% !important;
  inline-size:max-content !important;
  max-inline-size:min(112px,62vw) !important;
  block-size:auto !important;
  margin:0 !important;
  padding:4px 7px !important;
  overflow:visible !important;
  clip-path:none !important;
  transform:translateX(-50%) !important;
  border-radius:8px !important;
  background:rgba(24,4,33,.92) !important;
  color:#fff !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  text-align:center !important;
  z-index:3 !important;
}
html body[data-client-theme] #app .client-demo-slot > :is(strong,span,small),
html body[data-client-theme] #app [data-demo-map-status]{
  min-inline-size:0 !important;
  overflow-wrap:anywhere !important;
}

@media(prefers-reduced-motion:reduce){
  html body[data-client-theme] #app .client-demo-map-layer{
    transition:none !important;
  }
  html body[data-client-theme] #app :is(.lot01-base-grid,.lot01-ingredient-carousel){
    scroll-behavior:auto !important;
  }
}


/* États de commande distincts et responsives (§6 P1.24-25). */
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]){
  --client-order-state-surface:rgba(255,255,255,.95);
  --client-order-state-soft:rgba(250,241,255,.96);
  --client-order-state-text:#2b1736;
}
html body[data-client-theme="night"] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]){
  --client-order-state-surface:rgba(22,7,31,.96);
  --client-order-state-soft:rgba(45,14,58,.94);
  --client-order-state-text:#fff;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) :is(
  .client-order-state,
  .client-order-state__layout,
  .client-order-state__panel,
  .client-order-state__recap,
  .client-order-state__line,
  .client-order-delay,
  .client-order-refusal,
  .client-pickup-proof,
  .client-test-scenario-controls
){
  box-sizing:border-box;
  min-inline-size:0;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state{
  display:grid;
  gap:18px;
  color:var(--client-order-state-text);
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__hero{
  padding:clamp(18px,3vw,28px);
  border-radius:24px;
  background:linear-gradient(135deg,#711ab3,#df177f);
  color:#fff;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__hero :is(h3,p){
  margin-block:0 8px;
  color:inherit;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__layout{
  display:grid;
  grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);
  gap:18px;
  align-items:stretch;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__media{
  min-inline-size:0;
  margin:0;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__media img{
  display:block;
  inline-size:100%;
  block-size:100%;
  min-block-size:240px;
  aspect-ratio:16 / 10;
  object-fit:cover;
  border-radius:22px;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__panel,
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__recap{
  padding:clamp(16px,2.4vw,24px);
  border:1px solid rgba(207,39,230,.35);
  border-radius:22px;
  background:var(--client-order-state-surface);
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__title-row,
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__line-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  min-inline-size:0;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__badge{
  flex:0 0 auto;
  padding:5px 9px;
  border-radius:999px;
  background:#7418b0;
  color:#fff;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.06em;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state--ready .client-order-state__badge,
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state--collected .client-order-state__badge{
  background:#187a43;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) :is(.client-order-state--refused,.client-order-state--cancelled,.client-order-state--error) .client-order-state__badge{
  background:#a51243;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  margin:18px 0;
  padding:0;
  list-style:none;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__steps > li{
  min-inline-size:0;
  padding:8px 5px;
  border-radius:10px;
  background:rgba(113,26,179,.1);
  overflow-wrap:anywhere;
  text-align:center;
  font-size:.82rem;
  font-weight:800;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__steps > .is-complete{
  background:rgba(24,122,67,.18);
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__steps > .is-current{
  outline:2px solid #df177f;
  outline-offset:1px;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__message{
  min-inline-size:0;
  overflow-wrap:anywhere;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__lines{
  display:grid;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__line{
  display:grid;
  grid-template-columns:104px minmax(0,1fr);
  gap:14px;
  padding:12px;
  border-radius:16px;
  background:var(--client-order-state-soft);
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__line > img{
  display:block;
  inline-size:104px;
  block-size:104px;
  object-fit:cover;
  border-radius:14px;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) :is(
  .client-order-state__line-heading > strong,
  .client-order-state__line > div,
  .tracking-composition,
  .tracking-composition > div
){
  min-inline-size:0;
  overflow-wrap:anywhere;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .tracking-item-status{
  display:block;
  margin-block:5px;
  font-weight:900;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__totals{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-block:18px 0;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__totals > div{
  min-inline-size:0;
  padding:10px;
  border-radius:12px;
  background:var(--client-order-state-soft);
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__totals :is(dt,dd){
  margin:0;
  overflow-wrap:anywhere;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__history{
  padding:14px 16px;
  border:1px solid rgba(207,39,230,.28);
  border-radius:16px;
  background:var(--client-order-state-surface);
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__history > summary{
  min-block-size:44px;
  cursor:pointer;
  font-weight:900;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) :is(
  .client-order-delay,
  .client-order-refusal,
  .client-pickup-proof,
  .client-test-scenario-controls
){
  margin-block:0;
  padding:clamp(16px,2vw,24px);
  border:1px solid rgba(207,39,230,.42);
  border-radius:22px;
  background:var(--client-order-state-surface);
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-delay{border-color:#d88313}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-refusal{border-color:#bd184d}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-pickup-proof-grid{
  display:grid;
  grid-template-columns:minmax(196px,auto) minmax(0,1fr);
  gap:clamp(16px,3vw,30px);
  align-items:center;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-pickup-qr{
  display:grid;
  place-items:center;
  inline-size:212px;
  min-block-size:212px;
  padding:8px;
  border:1px solid rgba(207,39,230,.42);
  border-radius:18px;
  background:#fff;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-pickup-qr :is(canvas,img){
  display:block;
  max-inline-size:100%;
  block-size:auto;
}
html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-pickup-proof.is-enlarged .client-pickup-qr{
  inline-size:min(340px,100%);
  min-block-size:340px;
}

@media(max-width:980px){
  html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__layout{
    grid-template-columns:minmax(0,1fr);
  }
  html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__media img{
    block-size:auto;
    min-block-size:0;
  }
}

@media(max-width:767px){
  html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) :is(
    .client-order-state__steps,
    .client-order-state__totals
  ){
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__actions,
  html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-pickup-proof-grid{
    grid-template-columns:minmax(0,1fr);
  }
  html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__line{
    grid-template-columns:84px minmax(0,1fr);
  }
  html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-order-state__line > img{
    inline-size:84px;
    block-size:84px;
  }
  html body[data-client-theme] #modalBackdrop:is([data-kind="tracking"],[data-kind="confirmation"]) .client-pickup-qr{
    justify-self:center;
  }
}

/* Accueil final 2026-09-02 — règle terminale de cascade pour les compositions
   téléphone/tablette validées et l’ordre fonctionnel récent du header. */
@media (min-width:601px) and (max-width:1024px) and (orientation:portrait){
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser{
    left:33px !important;
    top:181px !important;
    width:460px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser h1{
    font-size:50px !important;
    line-height:1.08 !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser small{
    width:430px !important;
    margin-top:8px !important;
    font-size:18px !important;
    line-height:1.35 !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .site-nav-overlay{
    left:32px !important;
    right:47px !important;
    top:auto !important;
    bottom:100px !important;
    width:auto !important;
    height:94px !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-template-rows:40px 40px !important;
    grid-template-areas:"menu trouver evenements" "contact apropos pro" !important;
    gap:14px 16px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button{
    height:40px !important;
    min-height:40px !important;
    font-size:14px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer{
    left:32px !important;
    right:auto !important;
    top:auto !important;
    bottom:31px !important;
    width:470px !important;
    font-size:14px !important;
    line-height:1.35 !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-bottom-dock > .client-tutorial-button:not(.client-professional-bottom){
    right:32px !important;
    top:auto !important;
    bottom:31px !important;
    width:162px !important;
    height:41px !important;
    min-height:41px !important;
    font-size:14px !important;
  }
}

@media (max-width:600px) and (orientation:portrait){
  body[data-client-theme-mode] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]
    .theme-mode-switch.pb-master-selector-ready{
    left:auto !important;
    right:10px !important;
    top:9px !important;
    width:184px !important;
    height:31px !important;
    min-height:31px !important;
    overflow:hidden !important;
  }
  body[data-client-theme-mode] #app .mockup[data-page="accueil"][data-client-fidelity="v10"]
    .theme-mode-switch.pb-master-selector-ready > button{
    height:31px !important;
    min-height:31px !important;
    transform:none !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay{
    left:auto !important;
    right:10px !important;
    top:44px !important;
    width:134px !important;
    height:31px !important;
    grid-template-columns:65px 65px !important;
    gap:4px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay .client-quick-action{
    width:65px !important;
    height:31px !important;
    min-height:31px !important;
    padding:0 4px !important;
    font-size:9px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .install-home-button{
    left:auto !important;
    right:10px !important;
    top:79px !important;
    width:89px !important;
    height:31px !important;
    min-height:31px !important;
    padding:0 4px !important;
    font-size:9px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser{
    left:18px !important;
    top:113px !important;
    width:220px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser h1{
    font-size:30px !important;
    line-height:1.05 !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser small{
    width:220px !important;
    margin-top:8px !important;
    font-size:12px !important;
    line-height:1.28 !important;
  }
  body[data-client-theme="day"] #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser :is(h1,small){
    color:#181019 !important;
    -webkit-text-fill-color:#181019 !important;
  }
  body[data-client-theme="night"] #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .home-quality-teaser :is(h1,small){
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .site-nav-overlay{
    left:14px !important;
    right:14px !important;
    top:auto !important;
    bottom:106px !important;
    width:auto !important;
    height:105px !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:repeat(3,31px) !important;
    grid-template-areas:"menu trouver" "evenements contact" "apropos pro" !important;
    gap:6px 8px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button{
    width:100% !important;
    height:31px !important;
    min-height:31px !important;
    padding:0 4px !important;
    font-size:10px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer{
    left:14px !important;
    right:auto !important;
    top:auto !important;
    bottom:18px !important;
    width:230px !important;
    min-height:31px !important;
    font-size:9px !important;
    line-height:1.45 !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer nav{
    width:230px !important;
    margin:0 !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
    gap:0 4px !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-home-footer nav a{
    display:inline-flex !important;
    min-width:0 !important;
    min-height:31px !important;
    align-items:center !important;
  }
  #app .mockup[data-page="accueil"][data-client-fidelity="v10"] .client-bottom-dock > .client-tutorial-button:not(.client-professional-bottom){
    right:12px !important;
    top:auto !important;
    bottom:18px !important;
    width:104px !important;
    height:31px !important;
    min-height:31px !important;
    font-size:10px !important;
  }
}

/* Priorité terminale : la géométrie validée de l’Accueil doit rester
   supérieure aux anciens verrous transversaux #app répétés. */
@media (min-width:601px) and (max-width:1024px) and (orientation:portrait){
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .site-nav-overlay{
    left:32px !important;
    right:47px !important;
    top:auto !important;
    bottom:100px !important;
    width:auto !important;
    height:94px !important;
    min-height:94px !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-template-rows:40px 40px !important;
    grid-template-areas:"menu trouver evenements" "contact apropos pro" !important;
    gap:14px 16px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button{
    height:40px !important;
    min-height:40px !important;
    font-size:14px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .client-home-footer{
    left:32px !important;
    right:auto !important;
    top:auto !important;
    bottom:31px !important;
    width:470px !important;
    font-size:14px !important;
    line-height:1.35 !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .client-bottom-dock > .client-tutorial-button:not(.client-professional-bottom){
    right:32px !important;
    top:auto !important;
    bottom:31px !important;
    width:162px !important;
    height:41px !important;
    min-height:41px !important;
    font-size:14px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .client-bottom-dock > .client-professional-bottom{
    left:auto !important;
    right:47px !important;
    top:auto !important;
    bottom:100px !important;
    width:calc((100vw - 111px)/3) !important;
    height:40px !important;
    min-height:40px !important;
    font-size:14px !important;
  }
}

/* V7 P0 - decor Accueil universel et surfaces de lecture protectrices. */
html body[data-client-theme]{
  --pb-v7-page-surface:rgba(255,251,255,.88);
  --pb-v7-card-surface:rgba(255,251,255,.84);
  --pb-v7-modal-surface:rgba(255,251,255,.94);
  --pb-v7-warning-surface:rgba(255,240,204,.88);
  --pb-v7-success-surface:rgba(233,248,239,.88);
  --pb-v7-surface-copy:#2b1727;
  --pb-v7-warning-copy:#4a2b00;
  --pb-v7-success-copy:#173b29;
  --pb-v7-menu-eyebrow-copy:#9a1f64;
  --pb-v7-muted-copy:#674b6c;
  --pb-v7-day-accent-copy:#82186f;
  --pb-v7-surface-border:rgba(91,36,66,.34);
  --pb-v7-surface-shadow:0 18px 44px rgba(35,12,30,.18);
}
html body[data-client-theme="night"],
html body[data-client-theme="auto"][data-client-effective-theme="night"],
html body[data-client-theme="auto"][data-client-resolved-theme="night"]{
  --pb-v7-page-surface:rgba(16,7,24,.90);
  --pb-v7-card-surface:rgba(24,12,34,.86);
  --pb-v7-modal-surface:rgba(12,5,18,.94);
  --pb-v7-warning-surface:rgba(75,53,30,.88);
  --pb-v7-success-surface:rgba(24,54,41,.88);
  --pb-v7-surface-copy:#fff8fc;
  --pb-v7-warning-copy:#fff4d6;
  --pb-v7-success-copy:#f3fff8;
  --pb-v7-menu-eyebrow-copy:#ff86c5;
  --pb-v7-surface-border:rgba(255,232,246,.36);
  --pb-v7-surface-shadow:0 18px 48px rgba(0,0,0,.38);
}
html body[data-client-theme] #app#app#app#app#app .mockup:not([data-page="accueil"]) :is(
  .client-page-content,
  .votes-overview,
  .vote-detail,
  .contact-panel,
  .event-detail,
  .location-detail,
  .cart-live-panel,
  .loyalty-detail,
  .account-detail,
  .client-order-tracking-page,
  .lot01-checkout-shell
){
  background:var(--pb-v7-page-surface) !important;
  color:var(--pb-v7-surface-copy) !important;
  border-color:var(--pb-v7-surface-border) !important;
  box-shadow:var(--pb-v7-surface-shadow) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.08) !important;
  backdrop-filter:blur(18px) saturate(1.08) !important;
  background-clip:padding-box !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup :is(
  .client-card,
  .client-editorial-block,
  .client-photo-card,
  .contact-detail,
  .cart-section,
  .vote-card,
  .votes-overview-card,
  .loyalty-card,
  .notice,
  .line,
  .choice,
  .field,
  .client-bastien-panel,
  .client-bastien-output,
  .client-bastien-transcript,
  .lot01-composition-section,
  .lot01-panel,
  .lot01-summary,
  .event-path-card,
  .client-vote-result-card
){
  background:var(--pb-v7-card-surface) !important;
  border-color:var(--pb-v7-surface-border) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.06) !important;
  backdrop-filter:blur(14px) saturate(1.06) !important;
  background-clip:padding-box !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup .lot01-allergen-box{
  background:var(--pb-v7-warning-surface) !important;
  color:var(--pb-v7-warning-copy) !important;
  border-color:var(--pb-v7-surface-border) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.06) !important;
  backdrop-filter:blur(14px) saturate(1.06) !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup .lot01-no-fee{
  background:var(--pb-v7-success-surface) !important;
  color:var(--pb-v7-success-copy) !important;
  border-color:var(--pb-v7-surface-border) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.06) !important;
  backdrop-filter:blur(14px) saturate(1.06) !important;
}
html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="panier"] .lot01-checkout-shell{
  background:var(--pb-v7-page-surface) !important;
  color:var(--pb-v7-surface-copy) !important;
  border-color:var(--pb-v7-surface-border) !important;
  box-shadow:var(--pb-v7-surface-shadow) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.08) !important;
  backdrop-filter:blur(18px) saturate(1.08) !important;
}
html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="panier"] :is(.lot01-panel,.lot01-summary){
  background:var(--pb-v7-card-surface) !important;
  color:var(--pb-v7-surface-copy) !important;
  border-color:var(--pb-v7-surface-border) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.06) !important;
  backdrop-filter:blur(14px) saturate(1.06) !important;
}
html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="panier"] .lot01-allergen-box{
  background:var(--pb-v7-warning-surface) !important;
  color:var(--pb-v7-warning-copy) !important;
}
html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="panier"] .lot01-allergen-box :is(h2,h3,p,strong,span,label){
  color:var(--pb-v7-warning-copy) !important;
}
html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="panier"] .lot01-no-fee,
html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="panier"] .lot01-no-fee :is(p,strong,span){
  background:var(--pb-v7-success-surface) !important;
  color:var(--pb-v7-success-copy) !important;
}
html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="menu"] .client-menu-eyebrow{
  color:var(--pb-v7-menu-eyebrow-copy) !important;
}
html body[data-client-theme="day"] #app#app#app#app#app#app#app#app .mockup[data-page="menu"] > .client-page-content > p:not(.client-menu-eyebrow){
  color:var(--pb-v7-muted-copy) !important;
}
html body[data-client-theme="day"] #app#app#app#app#app#app#app#app .mockup :is(
  .client-pages-overview,
  .account-page-content,
  .votes-overview,
  .client-vote-results,
  .client-legal-page
) > h1 > span{
  color:var(--pb-v7-day-accent-copy) !important;
}
html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="evenements"] .event-main-photo figcaption{
  color:#fff8fc !important;
}
html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="trouver"] .status-pill{
  background:rgba(43,23,54,.92) !important;
  color:#fff !important;
}
html body[data-client-theme] #app#app#app#app#app :is(.modal,.toast,[role="dialog"]){
  background:var(--pb-v7-modal-surface) !important;
  color:var(--pb-v7-surface-copy) !important;
  border-color:var(--pb-v7-surface-border) !important;
  box-shadow:var(--pb-v7-surface-shadow) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.08) !important;
  backdrop-filter:blur(20px) saturate(1.08) !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="menu"] .client-card{
  background:var(--pb-v7-card-surface) !important;
  border:0 !important;
  box-shadow:none !important;
}
html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"] :is(
  .home-quality-teaser,
  .home-hero-copy,
  .client-home-intro
){
  background:var(--pb-v7-page-surface) !important;
  color:var(--pb-v7-surface-copy) !important;
  border-color:var(--pb-v7-surface-border) !important;
  box-shadow:var(--pb-v7-surface-shadow) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.08) !important;
  backdrop-filter:blur(18px) saturate(1.08) !important;
}

@media (max-width:600px) and (orientation:portrait){
  html body[data-client-theme][data-client-theme-mode] #app#app#app#app#app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .theme-mode-switch.pb-master-selector-ready{
    left:auto !important;
    right:10px !important;
    top:9px !important;
    width:184px !important;
    height:31px !important;
    min-height:31px !important;
  }
  html body[data-client-theme][data-client-theme-mode] #app#app#app#app#app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .theme-mode-switch.pb-master-selector-ready > button{
    height:31px !important;
    min-height:31px !important;
    transform:none !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .quick-actions-overlay{
    left:auto !important;
    right:10px !important;
    top:44px !important;
    width:134px !important;
    height:66px !important;
    min-height:66px !important;
    grid-template-columns:65px 65px !important;
    grid-template-rows:31px 31px !important;
    gap:4px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay .client-quick-action{
    width:65px !important;
    height:31px !important;
    min-height:31px !important;
    padding:0 4px !important;
    font-size:9px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"][data-client-fidelity="v10"] .quick-actions-overlay > .install-home-button{
    position:static !important;
    grid-column:1 / -1 !important;
    justify-self:end !important;
    width:89px !important;
    height:31px !important;
    min-height:31px !important;
    margin:0 !important;
    padding:0 4px !important;
    transform:none !important;
    font-size:9px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .site-nav-overlay{
    left:14px !important;
    right:14px !important;
    top:auto !important;
    bottom:106px !important;
    width:auto !important;
    height:105px !important;
    min-height:105px !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:repeat(3,31px) !important;
    grid-template-areas:"menu trouver" "evenements contact" "apropos pro" !important;
    gap:6px 8px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"][data-client-fidelity="v10"] .site-nav-overlay .nav-button{
    width:100% !important;
    height:31px !important;
    min-height:31px !important;
    padding:0 4px !important;
    font-size:10px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .client-home-footer{
    left:14px !important;
    right:auto !important;
    top:auto !important;
    bottom:18px !important;
    width:230px !important;
    min-height:31px !important;
    font-size:9px !important;
    line-height:1.45 !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .client-home-footer nav{
    width:230px !important;
    margin:0 !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
    gap:0 4px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .client-home-footer nav a{
    min-width:0 !important;
    min-height:31px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .client-bottom-dock > .client-tutorial-button:not(.client-professional-bottom){
    right:12px !important;
    top:auto !important;
    bottom:18px !important;
    width:104px !important;
    height:31px !important;
    min-height:31px !important;
    font-size:10px !important;
  }
  html body[data-client-theme] #app#app#app#app#app .mockup[data-page="accueil"][data-client-fidelity="v10"] > .client-bottom-dock > .client-professional-bottom{
    left:auto !important;
    right:14px !important;
    top:auto !important;
    bottom:106px !important;
    width:calc((100vw - 36px)/2) !important;
    height:31px !important;
    min-height:31px !important;
    font-size:10px !important;
  }
}

/* 2026-10-14: continuous Client capsule paint; validated geometry untouched. */
html body[data-client-theme] #app#app#app#app#app :is(.pb-action-pill,.pb-action-icon)::before,
html body #pb-professional-intake-root#pb-professional-intake-root#pb-professional-intake-root#pb-professional-intake-root#pb-professional-intake-root :is(.pb-action-pill,.pb-action-icon)::before,
html body #modalBackdrop#modalBackdrop#modalBackdrop#modalBackdrop#modalBackdrop :is(.pb-action-pill,.pb-action-icon)::before,
html body #pb-cookie-banner#pb-cookie-banner#pb-cookie-banner#pb-cookie-banner#pb-cookie-banner :is(.pb-action-pill,.pb-action-icon)::before,
html body .pb-cookie-settings.pb-cookie-settings::before,
html body[data-client-theme] #app#app#app#app#app :is(.lot02-base-filter,.lot01-segmented-control,.lot01-segmented,[role="tablist"],[role="radiogroup"])::before,
html body[data-client-theme] #app#app#app#app#app :is(.lot02-base-filter,.lot01-segmented-control,.lot01-segmented,[role="tablist"],[role="radiogroup"]) > button.pb-segment-control::before,
html body[data-client-theme] #app#app#app#app#app input.pb-action-pill,
html body #pb-professional-intake-root#pb-professional-intake-root#pb-professional-intake-root#pb-professional-intake-root#pb-professional-intake-root input.pb-action-pill,
html body #modalBackdrop#modalBackdrop#modalBackdrop#modalBackdrop#modalBackdrop input.pb-action-pill{
  border-image:none !important;
  border-color:rgba(255,225,255,.9) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.12) 22%,rgba(255,255,255,0) 48%),linear-gradient(100deg,#9200e6,#cb00cc 50%,#f71991) !important;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.75),inset 0 -4px 5px rgba(75,0,95,.5),0 3px 5px rgba(45,0,60,.25) !important;
}

/* 2026-10-14: formula labels fit inside their approved capsules only. */
html body[data-client-theme] #app#app#app#app#app#app .mockup[data-page="personnalisables"] .client-journey-formula-grid .lot02-menu-copy > button[data-pb-control-id^="offer:formula:"]{
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  text-align:center !important;
  line-height:1.2 !important;
  block-size:auto !important;
  height:auto !important;
  min-block-size:38px !important;
  padding-block:4px !important;
}
@media (max-width:639px){
  html body[data-client-theme] #app#app#app#app#app#app .mockup[data-page="personnalisables"] .client-journey-formula-grid .lot02-menu-copy > button[data-pb-control-id^="offer:formula:"]{
    min-block-size:31px !important;
  }
}

/* 2026-10-14: scoped spacing and label containment for audited Client controls. */
html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="panier"] .lot01-checkout-legal{
  position:static !important;
  inset:auto !important;
  inline-size:auto !important;
  width:auto !important;
  margin-block:20px 0 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px 20px !important;
}
html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="panier"] .client-cart-line-controls > button:not([aria-label]),
html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="evenements"] .event-path-card > button,
html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="personnalisables"] .client-journey-formula-grid .lot02-menu-copy > button[data-pb-control-id^="offer:formula:"]{
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  text-align:center !important;
  line-height:1.2 !important;
  block-size:auto !important;
  height:auto !important;
  max-block-size:none !important;
  max-height:none !important;
  padding-block:8px !important;
}
html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="personnalisables"] .lot01-segmented-control[aria-label^="Type de la pizza "]{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  block-size:auto !important;
  height:auto !important;
  max-block-size:none !important;
  max-height:none !important;
}
html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="personnalisables"] button[data-pb-control-id^="journey:pizza-type:"]{
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  text-align:center !important;
  line-height:1.2 !important;
  block-size:auto !important;
  height:auto !important;
  max-block-size:none !important;
  max-height:none !important;
  padding-block:8px !important;
}
@media (max-width:1050px){
  html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup:is([data-page="confidentialite"],[data-page="conditions"]) .client-legal-page a.pb-action-pill{
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    text-align:center !important;
    line-height:1.2 !important;
    block-size:auto !important;
    height:auto !important;
    max-block-size:none !important;
    max-height:none !important;
    padding-block:8px !important;
  }
}

/* 2026-10-14: black text on the white final allergen-review rows only. */
html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="panier"] .lot01-allergen-box .client-allergen-review-list > details{
  background-color:#fff !important;
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
  text-shadow:none !important;
}
html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="panier"] .lot01-allergen-box .client-allergen-review-list > details :is(summary,p,span,strong,em,li,a),
html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="panier"] .lot01-allergen-box .client-allergen-review-list > details > summary::marker{
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
  text-shadow:none !important;
}

/* 2026-10-14: guest identity choices and all three payment choices stay reachable. */
html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="panier"]
  .lot01-payment-stage .lot01-segmented[aria-label="Moyen de paiement"]{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-auto-rows:44px !important;
  block-size:auto !important;
  height:auto !important;
  max-block-size:none !important;
  max-height:none !important;
}
@media(max-width:600px){
  html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="panier"]
    .lot01-pickup-stage .lot01-identity-grid:has([data-client-guest-benefits]){
    grid-template-columns:minmax(0,1fr) !important;
  }
  html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="panier"]
    .lot01-payment-stage .lot01-segmented[aria-label="Moyen de paiement"]{
    grid-template-columns:minmax(0,1fr) !important;
  }
  html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="panier"]
    .lot01-payment-stage .lot01-segmented[aria-label="Moyen de paiement"]::before{
    content:none !important;
  }
  html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="panier"]
    .lot01-payment-stage .lot01-segmented[aria-label="Moyen de paiement"] > button.pb-segment-control::before{
    opacity:1 !important;
  }
}

/* 2026-10-14: payment panels may shrink to a 320px viewport. */
html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="panier"]
  .lot01-payment-stage :is(.lot01-checkout-main,.lot01-panel,.lot01-payment-recap-card,.lot01-payment-recap-card > div,.lot01-test-warning,.lot01-recheck-box){
  min-inline-size:0 !important;
  min-width:0 !important;
  max-inline-size:100% !important;
  max-width:100% !important;
  overflow-wrap:anywhere !important;
}

/* 2026-10-14: user-approved original glossy capsule, without an added white frame.
   Paint the complete existing artwork continuously; never use nine-slice borders. */
html body[data-client-theme] #app#app#app#app#app#app#app#app :is(.pb-action-pill,.pb-action-icon)::before,
html body #pb-professional-intake-root#pb-professional-intake-root#pb-professional-intake-root#pb-professional-intake-root#pb-professional-intake-root :is(.pb-action-pill,.pb-action-icon)::before,
html body #modalBackdrop#modalBackdrop#modalBackdrop#modalBackdrop#modalBackdrop :is(.pb-action-pill,.pb-action-icon)::before,
html body #pb-cookie-banner#pb-cookie-banner#pb-cookie-banner#pb-cookie-banner#pb-cookie-banner :is(.pb-action-pill,.pb-action-icon)::before,
html body .pb-cookie-settings.pb-cookie-settings.pb-cookie-settings::before,
html body[data-client-theme] #app#app#app#app#app#app#app#app :is(.lot02-base-filter,.lot01-segmented-control,.lot01-segmented,[role="tablist"],[role="radiogroup"])::before,
html body[data-client-theme] #app#app#app#app#app#app#app#app :is(.lot02-base-filter,.lot01-segmented-control,.lot01-segmented,[role="tablist"],[role="radiogroup"]) > button.pb-segment-control::before,
html body[data-client-theme] #app#app#app#app#app#app#app#app input.pb-action-pill,
html body #pb-professional-intake-root#pb-professional-intake-root#pb-professional-intake-root#pb-professional-intake-root#pb-professional-intake-root input.pb-action-pill,
html body #modalBackdrop#modalBackdrop#modalBackdrop#modalBackdrop#modalBackdrop input.pb-action-pill,
html body[data-client-theme] #app#app#app#app#app#app#app#app#app#app#app#app#app .client-home-primary-actions > .pb-action-pill,
html body[data-client-theme] #app#app#app#app#app#app#app#app#app#app#app#app#app .client-demo-slot.pb-action-pill,
html body[data-client-theme] #app#app#app#app#app#app#app#app .mockup[data-page="compte"] .account-page-body :is(.account-tabs,.actions) > button.pb-action-pill{
  border-image:none !important;
  border-color:transparent !important;
  background:transparent url('/client/assets/client-button-master-v3.png') 50% 48.3% / 134.8% 260% no-repeat !important;
  box-shadow:none !important;
}