/* =========================================================================
   YorkHost — composants partagés de l'espace client (refonte 2027)
   Chargé après yh-tokens.css (header.shared.tpl). Reprend les composants des
   maquettes (yh.css) avec des classes préfixées yh- pour ne pas toucher à
   Bootstrap. Toutes les couleurs passent par les jetons : le mode sombre est
   automatique.
   Règles de la direction : fond blanc, traits 1 px, Rubik 500, cartes 20 px,
   aucun flou, aucune ombre lumineuse, aucun dégradé, une seule action
   primaire violette par écran, liens « › », badges avec libellé, chiffres
   tabulaires.
   Doc : tools/ui-2027.md
   ========================================================================= */

/* ---------- Base ---------- */
.yh-num, .yh-kpi b, .yh-table td.yh-right { font-variant-numeric: tabular-nums; }
.yh-muted { color: var(--yh-muted) !important; }
.yh-right { text-align: right; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--yh-focus, var(--yh-accent));
  outline-offset: 2px;
}

/* ---------- Typo ---------- */
.yh-eyebrow { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--yh-muted); margin: 0; font-weight: 400; }
.yh-h1 { font-size: 32px; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; margin: 6px 0 0; color: var(--yh-text); }
.yh-h2 { font-size: 20px; font-weight: 500; letter-spacing: -.015em; line-height: 1.25; margin: 0; color: var(--yh-text); }
.yh-h3 { font-size: 16px; font-weight: 500; line-height: 1.3; margin: 0; color: var(--yh-text); }
.yh-lead { font-size: 15px; color: var(--yh-muted); margin: 6px 0 0; }
.yh-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.yh-page-head .yh-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) { .yh-h1 { font-size: 26px; } }

/* ---------- Cartes ---------- */
.yh-card { background: var(--yh-card); border: 1px solid var(--yh-line); border-radius: var(--yh-r-lg); padding: 22px; color: var(--yh-text); }
.yh-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.yh-card-tint, .yh-tint { background: var(--yh-tint); border-color: transparent; }
.yh-card-flush { padding: 0; overflow: hidden; }
/* Structure en-tête / corps (ancienne bibliothèque yh_ui.tpl) */
.yh-card:has(> .yh-card-head), .yh-card:has(> .yh-card-body) { padding: 0; overflow: hidden; }
.yh-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--yh-line); }
.yh-card-title { margin: 0; font-size: 16px; font-weight: 500; color: var(--yh-text); display: flex; align-items: center; gap: 8px; }
.yh-card-title .material-icons, .yh-card-title svg { font-size: 18px; width: 18px; height: 18px; color: var(--yh-accent); }
.yh-card-body { padding: 22px; }

/* ---------- Boutons ---------- */
.yh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; line-height: 1.3; border-radius: var(--yh-r-sm);
  font-family: var(--font-sans); font-size: 14.5px; font-weight: 500;
  border: 1px solid var(--yh-line); background: var(--yh-card); color: var(--yh-text);
  cursor: pointer; white-space: nowrap; text-decoration: none !important;
  box-shadow: none; transition: background-color var(--yh-dur-fast) var(--yh-ease), border-color var(--yh-dur-fast) var(--yh-ease), color var(--yh-dur-fast) var(--yh-ease);
}
.yh-btn:hover { background: var(--yh-chip); color: var(--yh-text); }
.yh-btn .material-icons { font-size: 18px; margin: 0 !important; }
.yh-btn svg { width: 18px; height: 18px; flex: none; }
.yh-btn-primary { background: var(--yh-primary); border-color: var(--yh-primary); color: var(--yh-on-primary) !important; }
.yh-btn-primary:hover, .yh-btn-primary:focus { background: var(--yh-primary-hover); border-color: var(--yh-primary-hover); color: var(--yh-on-primary) !important; }
.yh-btn-ghost, .yh-btn-soft { background: var(--yh-card); border-color: var(--yh-line); color: var(--yh-text); }
.yh-btn-ghost:hover, .yh-btn-soft:hover { background: var(--yh-chip); border-color: var(--yh-line); color: var(--yh-text); }
.yh-btn-danger, .yh-btn-danger-soft { background: var(--yh-card); border-color: var(--yh-line); color: var(--yh-bad); }
.yh-btn-danger:hover, .yh-btn-danger-soft:hover { background: var(--yh-bad-bg); border-color: var(--yh-bad-bg); color: var(--yh-bad); }
.yh-btn-danger-solid { background: var(--yh-bad); border-color: var(--yh-bad); color: var(--yh-on-bad) !important; }
.yh-btn-danger-solid:hover { filter: brightness(.94); }
.yh-btn-sm { padding: 7px 12px; font-size: 13.5px; border-radius: 9px; }
.yh-btn-block { display: flex; width: 100%; }
.yh-btn[disabled], .yh-btn.disabled, .yh-btn[aria-disabled="true"] {
  background: var(--yh-chip) !important; color: var(--yh-muted) !important; border-color: var(--yh-line) !important;
  cursor: not-allowed; pointer-events: none;
}

/* Lien d'action « Voir le détail › » */
a.yh-more, button.yh-more { font-weight: 500; color: var(--yh-accent); white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
a.yh-more::after, button.yh-more::after { content: "\00a0\203A"; }
a.yh-more:hover, button.yh-more:hover { text-decoration: underline; text-underline-offset: 4px; color: var(--yh-accent); }

/* ---------- Badges d'état : un seul vocabulaire (pastille + libellé) ---------- */
.yh-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px;
  border-radius: 999px; font-size: 12.5px; font-weight: 500; line-height: 1; white-space: nowrap;
  background: var(--yh-chip); color: var(--yh-muted);
}
.yh-badge::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: currentColor; flex: none; }
.yh-badge-ok, .yh-badge.ok, .yh-badge-green { background: var(--yh-ok-bg) !important; color: var(--yh-ok) !important; }
.yh-badge-warn, .yh-badge.warn, .yh-badge-orange { background: var(--yh-warn-bg) !important; color: var(--yh-warn) !important; }
.yh-badge-bad, .yh-badge.bad, .yh-badge-red { background: var(--yh-bad-bg) !important; color: var(--yh-bad) !important; }
.yh-badge-info, .yh-badge.info, .yh-badge-blue, .yh-badge-purple { background: var(--yh-info-bg) !important; color: var(--yh-accent) !important; }
.yh-badge-neutral, .yh-badge-gray { background: var(--yh-chip) !important; color: var(--yh-muted) !important; }

/* Statuts HostBill (badge-{$status} / label-{$status}) : même vocabulaire.
   Services : Active = en ligne, Pending = installation, Suspended = suspendu,
   Terminated/Cancelled = arrêté. Factures : Paid = payée, Unpaid = à régler,
   Overdue/Collections = en retard. Tickets : Open = info, réponse client = à traiter. */
.badge-Active, .badge.badge-Active, .label-Active, .label.label-Active,
.badge.badge-Paid, .label.label-Paid, .badge.badge-Accepted, .label.label-Accepted,
.badge.badge-Receiptpaid, .label.label-Receiptpaid, .badge.badge-Answered, .label.label-Answered,
.badge.badge-success.badge-styled { background-color: var(--yh-ok-bg) !important; color: var(--yh-ok) !important; }
.badge-Pending, .badge.badge-Pending, .label-Pending, .label.label-Pending,
.badge.badge-Sent, .label.label-Sent, .badge.badge-In-Progress, .label.label-In-Progress,
.badge.badge-Open, .label.label-Open, .badge.badge-Opened, .label.label-Opened,
.badge.badge-primary.badge-styled { background-color: var(--yh-info-bg) !important; color: var(--yh-accent) !important; }
.badge-Unpaid, .badge.badge-Unpaid, .label-Unpaid, .label.label-Unpaid,
.badge.badge-Receiptunpaid, .label.label-Receiptunpaid,
.badge-Client-Reply, .badge.badge-Client-Reply, .badge.badge-Customer-Reply, .label-Client-Reply,
.badge.badge-warning { background-color: var(--yh-warn-bg) !important; color: var(--yh-warn) !important; }
.badge-Suspended, .badge.badge-Suspended, .label-Suspended, .label.label-Suspended,
.badge.badge-Overdue, .label.label-Overdue, .badge.badge-Collections, .label.label-Collections,
.badge.badge-Chargeback, .label.label-Chargeback, .badge.badge-Fraud, .label.label-Fraud,
.badge.badge-Expired, .label.label-Expired, .badge.badge-Declined,
.badge.badge-danger.badge-styled { background-color: var(--yh-bad-bg) !important; color: var(--yh-bad) !important; }
.badge-Canceled, .badge.badge-Canceled, .badge.badge-Cancelled, .label.label-Cancelled,
.badge-Terminated, .badge.badge-Terminated, .label-Terminated, .label.label-Terminated,
.badge.badge-Draft, .badge.badge-Dead, .badge.badge-Close, .badge.badge-Closed, .label.label-Closed,
.badge.badge-Creditnote, .badge.badge-Receiptcanceled, .badge.badge-Refunded, .badge.badge-On-Hold,
.badge.badge-secondary.badge-styled { background-color: var(--yh-chip) !important; color: var(--yh-muted) !important; }

/* Pastille d'information neutre */
.yh-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 8px; background: var(--yh-chip); color: var(--yh-text); font-size: 13px; }

/* ---------- Tableaux ---------- */
.yh-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.yh-table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--yh-text); background: transparent; }
.yh-table th {
  font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
  color: var(--yh-muted); text-align: left; padding: 0 14px 10px; background: transparent; border: 0; white-space: nowrap;
}
.yh-table td { padding: 14px; border-top: 1px solid var(--yh-line); vertical-align: middle; }
.yh-table tbody tr:hover td { background: var(--yh-bg2); }
.yh-table .yh-right, .yh-table th.yh-right, .yh-table td.yh-right { text-align: right; }
.yh-table .yh-sub { display: block; color: var(--yh-muted); font-size: 13px; }

/* ---------- Chiffres clés et jauges ---------- */
.yh-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.yh-kpi { background: var(--yh-card); border: 1px solid var(--yh-line); border-radius: var(--yh-r-md); padding: 16px 18px; min-width: 0; }
.yh-kpi b, .yh-kpi .yh-kpi-v { display: block; font-size: 26px; font-weight: 500; letter-spacing: -.02em; margin-top: 6px; color: var(--yh-text); }
@media (max-width: 1080px) { .yh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .yh-kpis { grid-template-columns: 1fr; } }
.yh-bar { height: 6px; border-radius: 99px; background: var(--yh-chip); overflow: hidden; margin-top: 10px; }
.yh-bar > i { display: block; height: 100%; border-radius: 99px; background: var(--yh-primary); transform-origin: left; }
.yh-bar.is-warn > i { background: var(--yh-warn); }
.yh-bar.is-bad > i { background: var(--yh-bad); }

/* ---------- Onglets et segments ---------- */
.yh-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--yh-line); overflow-x: auto; scrollbar-width: none; list-style: none; margin: 0; padding: 0; }
.yh-tabs::-webkit-scrollbar { display: none; }
.yh-tab, .yh-tabs > .nav-item > .nav-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; color: var(--yh-muted);
  font-weight: 500; font-size: 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: none; white-space: nowrap; text-decoration: none !important;
}
.yh-tab:hover, .yh-tabs > .nav-item > .nav-link:hover { color: var(--yh-text); }
.yh-tab.is-on, .yh-tab.active, .yh-tab[aria-selected="true"],
.yh-tabs > .nav-item > .nav-link.active { color: var(--yh-text); border-bottom-color: var(--yh-primary); }
.yh-seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--yh-chip); }
.yh-seg > * {
  padding: 7px 14px; border-radius: 9px; font-weight: 500; font-size: 13.5px; color: var(--yh-muted);
  border: 1px solid transparent; background: none; cursor: pointer; text-decoration: none !important; line-height: 1.3;
}
.yh-seg > *:hover { color: var(--yh-text); }
.yh-seg > .is-on, .yh-seg > .on, .yh-seg > .active, .yh-seg > [aria-pressed="true"], .yh-seg > [aria-selected="true"] {
  background: var(--yh-card); color: var(--yh-text); border-color: var(--yh-line);
}

/* ---------- Formulaires ---------- */
.yh-label, .yh-form-label { font-size: 13px; color: var(--yh-muted); display: block; margin-bottom: 6px; font-weight: 400; }
.yh-input, select.yh-input, textarea.yh-input {
  min-height: 42px; width: 100%; border: 1px solid var(--yh-line); border-radius: var(--yh-r-sm);
  background: var(--yh-card); padding: 0 12px; font: 14px var(--font-sans); color: var(--yh-text);
  box-shadow: none; transition: border-color var(--yh-dur-fast) var(--yh-ease);
}
textarea.yh-input { padding: 10px 12px; line-height: 1.5; }
.yh-input:hover { border-color: var(--yh-line-strong); }
.yh-input:focus { border-color: var(--yh-accent); outline: 2px solid var(--yh-accent); outline-offset: -1px; box-shadow: none; }
.yh-input.is-valid { border-color: var(--yh-ok); }
.yh-input.is-invalid { border-color: var(--yh-bad); }

/* ---------- Bandeau (erreur, information) ---------- */
.yh-alert { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--yh-line); border-radius: 14px; background: var(--yh-bg2); color: var(--yh-text); }
.yh-alert > .yh-alert-body { flex: 1; min-width: 0; }
.yh-alert p { margin: 8px 0 0; color: var(--yh-muted); }

/* ---------- État vide ---------- */
.yh-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 40px 20px; text-align: center; }
.yh-empty-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--yh-tint); color: var(--yh-accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.yh-empty-icon .material-icons { font-size: 26px; }
.yh-empty-icon svg { width: 26px; height: 26px; }
.yh-empty-title { margin: 0; font-weight: 500; font-size: 16px; color: var(--yh-text); }
.yh-empty-desc { margin: 0; color: var(--yh-muted); font-size: 14px; max-width: 360px; line-height: 1.5; }
.yh-empty .yh-btn { margin-top: 12px; }

/* ---------- Squelettes de chargement ---------- */
.yh-skeleton, .yh-sk { display: block; background: var(--yh-line); border-radius: 6px; animation: yh-sk-fade 2.4s ease-in-out infinite; }
.yh-sk-line { height: 12px; margin: 8px 0; }
.yh-sk-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--yh-line); }
.yh-sk-row:first-child { border-top: 0; }
@keyframes yh-sk-fade { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
/* Conteneur AJAX en cours (yh-motion.js) : contenu atténué + squelette posé par-dessus */
[data-yh-async] { position: relative; }
[data-yh-async].is-loading > :not(.yh-sk-overlay) { opacity: .35; transition: opacity .2s; pointer-events: none; }
.yh-sk-overlay { position: absolute; inset: 0; padding: 16px; display: flex; flex-direction: column; gap: 4px; background: transparent; z-index: 2; }

/* ---------- Notifications (toasts) ---------- */
.yh-toasts { position: fixed; top: 24px; right: 24px; z-index: 100000; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.yh-toast {
  display: flex; align-items: center; gap: 12px; width: 100%; max-width: 440px;
  padding: 10px 12px 10px 14px; background: var(--yh-card); color: var(--yh-text);
  border: 1px solid var(--yh-line); border-radius: 14px; pointer-events: auto;
}
.yh-toast b { font-weight: 500; }
.yh-toast .yh-toast-tx { flex: 1; min-width: 0; }
.yh-toast .yh-toast-x { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--yh-muted); cursor: pointer; }
.yh-toast .yh-toast-x:hover { background: var(--yh-chip); }
.yh-toast.is-ok .yh-toast-ic { color: var(--yh-ok); }
.yh-toast.is-bad .yh-toast-ic { color: var(--yh-bad); }
@media (max-width: 480px) { .yh-toasts { left: 12px; right: 12px; top: 12px; } .yh-toast { max-width: none; } }

/* Pastille « en direct » */
.yh-live { display: inline-block; width: 8px; height: 8px; border-radius: 99px; background: var(--yh-ok); animation: yh-beat 2.4s var(--yh-ease) infinite; }
@keyframes yh-beat { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- Bootstrap harmonisé (clair et sombre) ----------
   Seulement la forme : rayons, traits, ombres. Les couleurs de Bootstrap en
   sombre sont dans yh-dark.css. */
.btn { border-radius: var(--yh-r-sm); box-shadow: none !important; }
.btn-sm { border-radius: 9px; }
.btn-primary { background-color: var(--yh-primary); border-color: var(--yh-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--yh-primary-hover); border-color: var(--yh-primary-hover); }
.card { border-color: var(--yh-line); border-radius: var(--yh-r-lg); box-shadow: none !important; }
.card > .card-header:first-child { border-radius: calc(var(--yh-r-lg) - 1px) calc(var(--yh-r-lg) - 1px) 0 0; }
.card > .card-footer:last-child { border-radius: 0 0 calc(var(--yh-r-lg) - 1px) calc(var(--yh-r-lg) - 1px); }
.modal-content { border-radius: var(--yh-r-lg); border: 1px solid var(--yh-line); box-shadow: none !important; }
.modal-backdrop.show { opacity: .48; }
.dropdown-menu { border-color: var(--yh-line); border-radius: 12px; box-shadow: none !important; }
.form-control, .custom-select { border-radius: var(--yh-r-sm); }
.badge { border-radius: 999px; font-weight: 500; }
.table td, .table th { border-color: var(--yh-line); }

/* ---------- Mouvement (yh-motion.js) ----------
   La classe d'attente n'est posée que si le script tourne (html.yh-motion) :
   sans JS, rien n'est masqué. */
html.yh-motion .yh-reveal { opacity: 0; transform: translateY(8px); }
html.yh-motion .yh-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .55s var(--yh-ease), transform .55s var(--yh-ease);
  transition-delay: var(--yh-delay, 0ms);
}
html.yh-motion body { transition: opacity .18s ease; }
html.yh-motion.yh-leaving body { opacity: .6; }
.yh-bar.is-in > i, .yh-reveal.is-in .yh-bar > i { animation: yh-fill .9s var(--yh-ease) .2s both; }
@keyframes yh-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  html.yh-motion .yh-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .yh-skeleton, .yh-sk, .yh-live, .yh-bar > i { animation: none !important; }
  html.yh-motion body { transition: none !important; }
}

/* ---------- Fil d'Ariane (components/breadcrumbs.tpl) ---------- */
.yh-breadcrumb { background: transparent; padding: 0; margin: 0 0 16px; font-size: 14px; border: 0; border-radius: 0; }
.yh-breadcrumb .breadcrumb-item { color: var(--yh-muted); }
.yh-breadcrumb .breadcrumb-item a { color: var(--yh-accent); font-weight: 500; text-decoration: none; }
.yh-breadcrumb .breadcrumb-item a:hover { text-decoration: underline; text-underline-offset: 4px; }
.yh-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "\203A"; color: var(--yh-faint); padding: 0 8px; float: none; }
.yh-breadcrumb .breadcrumb-item.active { color: var(--yh-muted); }

/* ---------- Pied de page (footer.tpl) ---------- */
.footer-content { background: var(--yh-bg); }
.yh-footer { background: var(--yh-bg) !important; border-top: 1px solid var(--yh-line); padding: 18px 0; margin-top: 32px; box-shadow: none; }
.yh-footer .yh-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-size: 13px; color: var(--yh-muted); }
.yh-footer .yh-footer-copy { color: var(--yh-muted); }
.yh-footer .yh-footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; }
.yh-footer .yh-footer-links .nav-link { padding: 0; font-size: 13px; color: var(--yh-muted) !important; text-decoration: none; }
.yh-footer .yh-footer-links .nav-link:hover { color: var(--yh-text) !important; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 640px) { .yh-footer .yh-footer-inner { flex-direction: column; align-items: flex-start; } }

/* ---------- Arrivée de page (remplace l'ancien écran de chargement) ----------
   html.yh-js est posé par le script bloquant du header : sans JS, aucun fondu,
   rien de masqué. L'animation se termine seule (pas de dépendance au JS). */
html.yh-js body { animation: yh-page-in .28s var(--yh-ease) both; }
@keyframes yh-page-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.yh-js body { animation: none; } }

/* ---------- SweetAlert 2 de HostBill (repli des .confirm_js non interceptés) ---------- */
.swal-overlay { background-color: var(--yh-veil) !important; }
.swal-modal { background: var(--yh-card) !important; border: 1px solid var(--yh-line); border-radius: var(--yh-r-lg) !important; box-shadow: none !important; font-family: var(--font-sans); }
.swal-title { color: var(--yh-text) !important; font-weight: 500 !important; font-size: 18px !important; }
.swal-text { color: var(--yh-muted) !important; font-size: 14px !important; text-align: center; }
.swal-footer { text-align: right; }
.swal-button { height: 42px; padding: 0 18px !important; border-radius: var(--yh-r-sm) !important; font: 500 14.5px var(--font-sans) !important; box-shadow: none !important; }
.swal-button--confirm { background: var(--yh-primary) !important; color: var(--yh-on-primary) !important; }
.swal-button--confirm:not([disabled]):hover { background: var(--yh-primary-hover) !important; }
.swal-button--cancel { background: var(--yh-card) !important; color: var(--yh-text) !important; border: 1px solid var(--yh-line) !important; }
.swal-button--cancel:not([disabled]):hover { background: var(--yh-chip) !important; }
.swal-icon--warning { border-color: var(--yh-warn) !important; }
.swal-icon--warning__body, .swal-icon--warning__dot { background-color: var(--yh-warn) !important; }

/* ---------- Effets du thème compilé neutralisés (app.min.css) ----------
   Barre du haut et toasts floutés, logo en dégradé avec halo, ombres
   lumineuses de la barre latérale, pastilles et boutons en dégradé. Les
   écrans redéfinissent leurs propres fonds ; ici on retire les effets. */
.navbar, .toast { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.navbar { box-shadow: none !important; }
.navbar .navbar-left, .navbar-modern .navbar-left { box-shadow: none !important; }
.navbar .navbar-left::after { display: none !important; }
.navbar .navbar-left .navbar-brand span, .navbar-modern .brand-text, .sidebar .sidebar-brand span {
  background: none !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important;
}
.sidebar::before { display: none !important; }
.sidebar .nav-item > .nav-link::after { display: none !important; }
.navbar-modern .nav-link-icon .nav-badge, .navbar .navbar-body .navbar-menu .nav-link .badge, .sidebar .nav-item > .nav-link .badge { background-image: none !important; }
.navbar-modern .nav-link-user .user-avatar, .navbar-modern .dropdown-user .dropdown-user-header .dropdown-user-avatar { background-image: none !important; }
.navbar-modern .dropdown-user .dropdown-user-header, .navbar-modern .dropdown-cart .dropdown-cart-header,
.navbar-modern .dropdown-notifications .dropdown-notifications-header, .notifications-drop .notifications-drop-title {
  background: var(--yh-card) !important; color: var(--yh-text) !important; border-bottom: 1px solid var(--yh-line);
}
.navbar-modern .navbar-btn.navbar-btn-order, .navbar-modern .btn-order, .navbar-modern .nav-link-login,
.navbar-modern .dropdown-cart .dropdown-cart-footer .btn-cart-action, .navbar-modern .dropdown-order-items .order-mega-menu .order-mega-cta .btn-browse,
.navbar .navbar-left .navbar-order .btn-success, .navbar .navbar-body .navbar-order .btn-success {
  background-image: none !important; box-shadow: none !important;
}
.navbar-modern .dropdown-order-items .order-mega-menu .order-mega-cta { background: var(--yh-tint) !important; color: var(--yh-text) !important; }
.bg-gradient-primary { background: var(--yh-primary) !important; }
.bg-gradient-secondary, .bg-gradient-light, .bg-gradient-default { background: var(--yh-chip) !important; }
.bg-gradient-success { background: var(--yh-ok) !important; }
.bg-gradient-info { background: var(--yh-accent) !important; }
.bg-gradient-warning { background: var(--yh-warn) !important; }
.bg-gradient-danger { background: var(--yh-bad) !important; }
.bg-gradient-dark { background: var(--yh-text) !important; }
.tooltip, .popover, .close { text-shadow: none !important; }

/* =========================================================================
   Coquille 2027, phase 2 : barre du haut, barre latérale, barre d'onglets
   mobile (maquettes Main.dc.html et Mobile.dc.html).
   body.yh-shell27 est posé par header.shared.tpl pour un client connecté,
   hors mode intégré (yh_embed). Le balisage vit dans
   menus/menu.top.logged.tpl et menus/menu.left.custom.tpl.
   ========================================================================= */
body.yh-shell27 { --yh-side-w: 248px; --yh-top-h: 64px; --yh-tabbar-h: 68px; background: var(--yh-bg) !important; }

/* ---------- Barre du haut (≥ 992 px) : logo | recherche … icônes, Commander, avatar ---------- */
.navbar.navbar-modern.yh-top27 {
  height: var(--yh-top-h) !important; min-height: var(--yh-top-h) !important; max-height: var(--yh-top-h) !important;
  padding: 0 !important; display: flex !important; align-items: stretch !important; flex-wrap: nowrap !important;
  background: var(--yh-bg) !important; border: 0 !important; box-shadow: none !important; z-index: 1030;
}
.yh-top27 .navbar-left {
  width: var(--yh-side-w) !important; min-width: var(--yh-side-w) !important; flex: 0 0 var(--yh-side-w) !important;
  display: flex !important; align-items: center !important; padding: 0 10px 0 0 !important; margin: 0 !important;
  background: var(--yh-bg) !important; border: 0 !important; border-right: 1px solid var(--yh-line) !important; box-shadow: none !important;
}
.yh-top27 .navbar-left::after { display: none !important; }
.yh-top27 .navbar-brand { display: flex !important; align-items: center !important; gap: 10px !important; padding: 0 0 0 24px !important; margin: 0 !important; min-width: 0; text-decoration: none !important; }
.yh-top27 .navbar-brand img { height: 28px !important; width: auto; border-radius: 8px; flex: none; }
.yh-top27 .navbar-brand .brand-text { color: var(--yh-text) !important; font: 600 15px/1 var(--font-sans) !important; letter-spacing: .04em !important; }
.yh-top27 .navbar-left-controls { margin-left: auto !important; display: flex !important; align-items: center !important; gap: 4px; padding: 0 !important; }
.yh-top27 .navbar-btn-menu {
  width: 32px; height: 32px; padding: 0 !important; border: 0 !important; border-radius: 8px !important;
  display: inline-flex; align-items: center; justify-content: center; background: transparent !important; color: var(--yh-muted) !important;
}
.yh-top27 .navbar-btn-menu:hover { background: var(--yh-chip) !important; color: var(--yh-text) !important; }
.yh-top27 .navbar-btn-menu svg { width: 18px; height: 18px; }
.yh-top27 .navbar-body {
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; height: 100% !important;
  flex: 1 1 auto !important; min-width: 0; align-items: center !important; gap: 14px !important;
  padding: 0 32px !important; margin: 0 !important; background: var(--yh-bg) !important; border-bottom: 1px solid var(--yh-line);
}
.yh-top27 .navbar-menu { margin-left: auto !important; }
.yh-top27 .navbar-nav { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; list-style: none; }
.yh-top27 .navbar-nav > .nav-item { margin: 0 !important; padding: 0 !important; display: flex; align-items: center; }

/* Recherche : champ 40 px, loupe, indice Ctrl K (moteur : .navbar-search de main.min.js) */
.yh-top27 .yh-search { align-self: center !important; position: relative; flex: 1 1 420px; width: 100%; max-width: 420px !important; min-width: 200px; margin: 0 !important; padding: 0 !important; display: block !important; }
.yh-search-field {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px;
  border: 1px solid var(--yh-line); border-radius: var(--yh-r-sm); background: var(--yh-bg); color: var(--yh-muted);
  transition: border-color var(--yh-dur-fast) var(--yh-ease);
}
.yh-search-field:hover { border-color: var(--yh-line-strong); }
.yh-search-field:focus-within { border-color: var(--yh-accent); outline: 2px solid var(--yh-accent); outline-offset: -1px; }
.yh-search-field > svg { width: 16px; height: 16px; flex: none; }
.yh-search .search-input, .yh-search .yh-search-input {
  flex: 1 1 auto; min-width: 0; height: 38px !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important;
  font: 400 13.5px var(--font-sans) !important; color: var(--yh-text) !important;
}
.yh-search .search-input::placeholder, .yh-search .yh-search-input::placeholder { color: var(--yh-muted) !important; opacity: 1; }
.yh-search-kbd {
  margin-left: auto; flex: none; padding: 1px 6px; border: 1px solid var(--yh-line); border-radius: 6px;
  background: var(--yh-card); color: var(--yh-muted); font: 400 12px/1.5 var(--font-sans); box-shadow: none; white-space: nowrap;
}
.yh-search-field:focus-within .yh-search-kbd { visibility: hidden; }
.yh-search .navbar-search-loader { flex: none; }
.yh-search .navbar-search-loader:not(.active) { display: none !important; }
.navbar .yh-search .navbar-search-results, #yh-sidebar .yh-search .navbar-search-results {
  position: absolute; top: calc(100% + 6px) !important; left: 0 !important; right: auto !important; margin: 0 !important;
  width: max(100%, 420px); min-width: 0 !important; max-width: calc(100vw - 32px); max-height: min(70vh, 560px); overflow-y: auto;
  padding: 6px 0 !important; background: var(--yh-card) !important; border: 1px solid var(--yh-line) !important;
  border-radius: 14px !important; box-shadow: none !important; z-index: 1040;
}
#yh-sidebar .yh-search .navbar-search-results { width: 100%; }
.yh-search .navbar-search-results .category .name { color: var(--yh-muted) !important; font-weight: 400 !important; font-size: 11.5px !important; letter-spacing: .07em !important; }
.yh-search .navbar-search-results .category .results { border-bottom-color: var(--yh-line) !important; }
.yh-search .navbar-search-results .result { color: var(--yh-text) !important; border-radius: 8px !important; }
.yh-search .navbar-search-results .result:hover, .yh-search .navbar-search-results .result.active { background: var(--yh-bg2) !important; }

/* Boutons-icônes 40 px (thème, notifications, panier, Discord) */
.yh-icon-btn, .yh-top27 .yh-notif-btn {
  position: relative; width: 40px !important; height: 40px !important; min-width: 40px; padding: 0 !important; margin: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border: 1px solid var(--yh-line) !important; border-radius: var(--yh-r-sm) !important;
  background: var(--yh-card) !important; color: var(--yh-text) !important; text-decoration: none !important; cursor: pointer;
  box-shadow: none !important; transition: background-color var(--yh-dur-fast) var(--yh-ease) !important;
}
.yh-icon-btn:hover, .yh-icon-btn[aria-expanded="true"], .yh-top27 .yh-notif-btn:hover, .yh-top27 .yh-notif-btn[aria-expanded="true"] { background: var(--yh-chip) !important; color: var(--yh-text) !important; }
.yh-icon-btn svg, .yh-top27 .yh-notif-btn svg, .yh-top27 .yh-theme-toggle .yh-theme-ic { width: 18px !important; height: 18px !important; }
.yh-icon-btn svg:not([fill="currentColor"]) { stroke-width: 1.6; }
.yh-icon-btn .yh-count, .yh-top27 .yh-notif-btn .yh-notif-count {
  position: absolute !important; top: -5px !important; right: -5px !important; min-width: 18px !important; height: 18px !important;
  padding: 0 5px !important; border-radius: 999px !important; background: var(--yh-bad) !important; color: var(--yh-on-bad) !important;
  font: 500 10.5px/1 var(--font-sans) !important; display: flex !important; align-items: center !important; justify-content: center !important;
  border: 2px solid var(--yh-bg) !important;
}
.yh-top27 .yh-order-btn { height: 34px; padding: 0 12px !important; }

/* Avatar à initiales : ouvre le menu du compte */
.yh-avatar {
  width: 36px; height: 36px; flex: none; border-radius: 999px; background: var(--yh-tint); color: var(--yh-accent);
  display: inline-flex; align-items: center; justify-content: center; font: 500 13px/1 var(--font-sans); letter-spacing: .02em;
}
.yh-avatar-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  margin: 0 -4px 0 0; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; text-decoration: none !important;
}
.yh-avatar-btn:hover .yh-avatar, .yh-avatar-btn[aria-expanded="true"] .yh-avatar { outline: 3px solid var(--yh-chip); }
.yh-avatar-dot { position: absolute; top: 5px; right: 5px; width: 10px; height: 10px; border-radius: 99px; background: var(--yh-bad); border: 2px solid var(--yh-bg); }

/* Menu du compte (crédit, langue, code support, profil, déconnexion…) */
.navbar.navbar-modern .dropdown-menu.yh-usermenu { width: 300px; min-width: 300px !important; max-width: calc(100vw - 24px); padding: 6px !important; margin-top: 8px !important; border-radius: 14px !important; }
.yh-usermenu .dropdown-user-header { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 10px 12px !important; background: transparent !important; border: 0 !important; }
.yh-usermenu .yh-avatar { width: 40px; height: 40px; font-size: 14px; }
.yh-usermenu .dropdown-user-info { display: flex; flex-direction: column; min-width: 0; }
.yh-usermenu .dropdown-user-name { font-size: 14px; font-weight: 500; color: var(--yh-text); }
.yh-usermenu .dropdown-user-email { font-size: 12.5px; color: var(--yh-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yh-usermenu .dropdown-user-logged-as { font-size: 12px; color: var(--yh-muted); }
.yh-usermenu-credit {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 4px 6px; padding: 10px 12px;
  border-radius: var(--yh-r-sm); background: var(--yh-bg2); color: var(--yh-muted) !important; font-size: 13px; text-decoration: none !important;
}
a.yh-usermenu-credit:hover { background: var(--yh-chip); }
.yh-usermenu-credit b { font-weight: 500; color: var(--yh-text); font-size: 14px; font-variant-numeric: tabular-nums; }
.yh-usermenu-credit.is-due b { color: var(--yh-bad); }
.yh-usermenu-label { display: block; padding: 8px 10px 4px; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--yh-muted); }
.yh-usermenu-row { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 4px 4px; }
.navbar.navbar-modern .yh-usermenu-row .dropdown-item { flex: 1 1 0; width: auto; justify-content: center; min-height: 36px; border: 1px solid var(--yh-line); }
.navbar.navbar-modern .yh-usermenu-row .dropdown-item.is-on, .navbar.navbar-modern .yh-usermenu-row .dropdown-item.active { background: var(--yh-tint) !important; color: var(--yh-accent) !important; border-color: transparent; }
.yh-usermenu .yh-usermenu-n { margin-left: auto; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--yh-bad-bg); color: var(--yh-bad); font-variant-numeric: tabular-nums; }
.yh-usermenu .dropdown-item svg { width: 17px; height: 17px; flex: none; color: var(--yh-muted); }

/* ---------- Barre latérale : géométrie ---------- */
body.yh-shell27 .sidebar { width: var(--yh-side-w) !important; top: var(--yh-top-h) !important; bottom: 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important; }
body.yh-shell27 .sidebar-overlay { background: var(--yh-veil) !important; opacity: 1 !important; }
@media (min-width: 994px) {
  body.yh-shell27:not(.sidenav-toggled) .body-content, body.yh-shell27:not(.sidenav-toggled) .footer-content { margin-left: var(--yh-side-w); }
  body.yh-shell27.sidenav-toggled .sidebar { margin-left: calc(-1 * var(--yh-side-w) - 2px); }
  body.yh-shell27.sidenav-toggled .navbar .navbar-left .navbar-brand { display: flex !important; }
}

/* ---------- Barre latérale : rendu (maquette) ---------- */
#yh-sidebar { background: var(--yh-bg) !important; background-image: none !important; border-right: 1px solid var(--yh-line) !important; box-shadow: none !important; overflow: hidden; }
#yh-sidebar::before { display: none !important; }
#yh-sidebar .sidebar-wrap {
  width: 100% !important; height: 100%; padding: 10px 14px 18px !important; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 2px; overflow-x: hidden; overflow-y: auto !important;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
/* Retouche : barre de défilement fine (6 px, --yh-line), visible au survol ou pendant le défilement.
   Chrome ignore ::-webkit-scrollbar dès que scrollbar-color est posé : on le remet à auto. */
@supports selector(::-webkit-scrollbar) {
  #yh-sidebar .sidebar-wrap { scrollbar-width: auto !important; scrollbar-color: auto !important; }
  #yh-sidebar .sidebar-wrap::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
  #yh-sidebar .sidebar-wrap::-webkit-scrollbar-track { background: transparent; }
  #yh-sidebar .sidebar-wrap::-webkit-scrollbar-thumb { background: transparent; border: 0; border-radius: 99px; }
  #yh-sidebar .sidebar-wrap:hover::-webkit-scrollbar-thumb, #yh-sidebar .sidebar-wrap.is-scrolling::-webkit-scrollbar-thumb { background: var(--yh-line); }
}
@supports not selector(::-webkit-scrollbar) {
  #yh-sidebar .sidebar-wrap { scrollbar-width: thin !important; scrollbar-color: transparent transparent !important; }
  #yh-sidebar .sidebar-wrap:hover, #yh-sidebar .sidebar-wrap.is-scrolling { scrollbar-color: var(--yh-line) transparent !important; }
}
#yh-sidebar .ps__rail-x, #yh-sidebar .ps__rail-y { display: none !important; }

#yh-sidebar ul, #yh-sidebar li { list-style: none !important; }
#yh-sidebar li::marker { content: none !important; }
#yh-sidebar .nav { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; margin: 0 !important; padding: 0 !important; }
#yh-sidebar .nav-item { margin: 0 !important; }
#yh-sidebar .yh-side-h, #yh-sidebar .sidebar-heading {
  margin: 0 !important; padding: 16px 10px 6px !important; border: 0 !important;
  font: 400 11.5px/1.5 var(--font-sans) !important; letter-spacing: .07em !important; text-transform: uppercase !important; color: var(--yh-muted) !important;
}
#yh-sidebar .nav-link {
  position: relative; display: flex !important; align-items: center !important; gap: 10px !important; width: 100%;
  padding: 8px 10px !important; margin: 0 !important; border: 0 !important; border-radius: var(--yh-r-sm) !important;
  background: transparent !important; color: var(--yh-text) !important; box-shadow: none !important; transform: none !important;
  font: 400 14px/1.5 var(--font-sans) !important; text-align: left; text-decoration: none !important; cursor: pointer;
  transition: background-color var(--yh-dur-fast) var(--yh-ease) !important;
}
#yh-sidebar .nav-link::before, #yh-sidebar .nav-link::after { display: none !important; content: none !important; }
#yh-sidebar .nav-link:hover { background: var(--yh-chip) !important; color: var(--yh-text) !important; }
#yh-sidebar .nav-link.active, #yh-sidebar .nav-link[aria-current="page"] { background: var(--yh-tint) !important; color: var(--yh-accent) !important; font-weight: 500 !important; }
#yh-sidebar .nav-link > svg, #yh-sidebar .nav-link > .yh-lucide { width: 18px !important; height: 18px !important; flex: none; color: currentColor !important; stroke-width: 1.6; }
#yh-sidebar .nav-link > .material-icons { width: 18px; font-size: 18px !important; line-height: 1; flex: none; overflow: hidden; color: currentColor !important; margin: 0 !important; transform: none !important; }
#yh-sidebar .nav-link > span:not(.yh-tag):not(.yh-app-link__badge):not(.badge) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#yh-sidebar .yh-tag, #yh-sidebar .yh-app-link .yh-app-link__badge {
  margin-left: auto; flex: none; padding: 1px 7px; border-radius: 999px; background: var(--yh-chip); color: var(--yh-muted) !important;
  font: 400 11px/1.5 var(--font-sans); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums;
}
#yh-sidebar .nav-link.active .yh-tag { background: var(--yh-card); }
#yh-sidebar .icon-expand, #yh-sidebar .yh-chev { margin-left: auto; width: 16px !important; height: 16px !important; font-size: 16px !important; color: var(--yh-muted) !important; transition: transform .2s var(--yh-ease); }
#yh-sidebar [aria-expanded="true"] > .icon-expand, #yh-sidebar [aria-expanded="true"] > .yh-chev { transform: rotate(180deg); }
/* Groupe repliable « Plus » et sous-listes */
#yh-sidebar .yh-side-more { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--yh-line); }
#yh-sidebar .yh-side-more-btn { color: var(--yh-muted) !important; }
#yh-sidebar .yh-side-more-btn[aria-expanded="true"] { color: var(--yh-text) !important; }
#yh-sidebar .yh-side-more .collapse > .nav, #yh-sidebar .yh-side-more .collapsing > .nav, #yh-sidebar .yh-side-more .collapse > ul { padding-top: 2px !important; }
#yh-sidebar .sub-nav .nav-subnav, #yh-sidebar .nav-subnav { margin: 2px 0 4px 19px !important; padding: 0 0 0 10px !important; border-left: 1px solid var(--yh-line) !important; background: transparent !important; }
#yh-sidebar .nav-subnav .nav-link { font-size: 13.5px !important; padding: 6px 8px !important; color: var(--yh-muted) !important; }
#yh-sidebar .nav-subnav .nav-link:hover { color: var(--yh-text) !important; }
#yh-sidebar .nav-subnav .badge { margin-left: auto; background: transparent !important; color: var(--yh-muted) !important; font-weight: 400; }
#yh-sidebar .nav-subnav .yh-lucide-dot, #yh-sidebar .nav-subnav .material-icons.size-xs { display: none !important; }
#yh-sidebar .nav-subnav .nav-link .pl-2 { padding-left: 0 !important; }
#yh-sidebar .yh-side-search { margin: 4px 0 8px; }

@media (prefers-reduced-motion: reduce) {
  #yh-sidebar .nav-link, #yh-sidebar .icon-expand, #yh-sidebar .yh-chev, .yh-icon-btn, .yh-search-field { transition: none !important; }
}

/* ---------- Contenu ---------- */
@media (min-width: 994px) {
  body.yh-shell27 .body-content { margin-top: 0 !important; margin-bottom: 0 !important; }
  body.yh-shell27 .body-content .section-main { max-width: none !important; margin: var(--yh-top-h) 0 0 0 !important; padding: 32px !important; }
  body.yh-shell27 .footer-content .footer { margin: 0 32px 0 !important; max-width: none !important; }
}

/* ---------- Mobile et tablette (< 992 px) : barre 56 px, tiroir, barre d'onglets ---------- */
.yh-tabbar { display: none; }
@media (max-width: 991.98px) {
  body.yh-shell27 { --yh-top-h: 56px; }
  body.yh-shell27 .navbar.sub-bar { display: none !important; }
  .yh-top27 .navbar-left { width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; border-right: 0 !important; border-bottom: 1px solid var(--yh-line) !important; padding: 0 12px 0 0 !important; }
  .yh-top27 .navbar-brand { padding-left: 16px !important; }
  .yh-top27 .navbar-mobile-controls { display: flex !important; align-items: center; gap: 6px; }
  .yh-m-menu {
    display: inline-flex !important; align-items: center; gap: 8px; height: 44px; padding: 0 12px !important; margin: 0 !important;
    border: 1px solid var(--yh-line) !important; border-radius: var(--yh-r-sm) !important; background: var(--yh-card) !important;
    color: var(--yh-text) !important; font: 500 14px/1 var(--font-sans) !important; text-decoration: none !important; cursor: pointer;
  }
  .yh-m-menu:hover { background: var(--yh-chip) !important; }
  .yh-m-menu svg { width: 18px; height: 18px; }
  .yh-top27 .navbar-mobile-controls .dropdown-menu.yh-usermenu { position: absolute; right: 0; left: auto; max-height: calc(100dvh - 140px); overflow-y: auto; }

  /* Tiroir : la barre latérale existante, sous la barre du haut et au-dessus des onglets */
  body.yh-shell27 .sidebar { width: min(320px, 86vw) !important; top: 56px !important; bottom: calc(var(--yh-tabbar-h) + env(safe-area-inset-bottom, 0px)) !important; margin-left: calc(-1 * min(320px, 86vw) - 2px); opacity: 1 !important; visibility: hidden; transition: margin-left .28s var(--yh-ease), visibility 0s linear .28s !important; }
  body.yh-shell27.sidenav-toggled .sidebar { margin-left: 0; visibility: visible; transition: margin-left .28s var(--yh-ease) !important; }
  body.yh-shell27 .sidebar-overlay { top: 56px; bottom: calc(var(--yh-tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  body.yh-shell27 #yh-sidebar .sidebar-wrap { padding-bottom: 16px !important; }

  /* Contenu : sous la barre de 56 px, dégagé de la barre d'onglets */
  body.yh-shell27 .body-content { margin: 0 !important; }
  body.yh-shell27 .body-content .section-main { margin: 56px 0 0 !important; padding: 16px 16px calc(var(--yh-tabbar-h) + 20px + env(safe-area-inset-bottom, 0px)) !important; max-width: none !important; }
  body.yh-shell27 .footer-content { margin: 0 !important; padding-bottom: calc(var(--yh-tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  body.yh-shell27 .footer-content .footer { margin: 0 16px !important; }

  /* Barre d'onglets fixe : Accueil, Services, Factures, Support, Plus */
  .yh-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; display: flex;
    height: calc(var(--yh-tabbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--yh-bg); border-top: 1px solid var(--yh-line);
  }
  .yh-tab27 {
    flex: 1 1 0; min-width: 0; min-height: 44px; margin: -1px 0 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border: 0; border-top: 2px solid transparent; background: transparent; color: var(--yh-muted) !important;
    font: 500 12px/1.2 var(--font-sans); text-decoration: none !important; cursor: pointer;
  }
  .yh-tab27 svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .yh-tab27.is-on, .yh-tab27[aria-expanded="true"] { color: var(--yh-accent) !important; border-top-color: var(--yh-primary); }
  .yh-tab27-ic { position: relative; display: inline-flex; }
  .yh-tab27-dot { position: absolute; top: -3px; right: -6px; width: 8px; height: 8px; border-radius: 99px; background: var(--yh-warn); }
  /* Widget de support (bulle) : au-dessus de la barre d'onglets */
  body.yh-shell27 #yorkhost-chat-widget, body.yh-shell27 .yorkhost-chat-launcher { bottom: calc(var(--yh-tabbar-h) + 12px) !important; }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  body.yh-shell27 .sidebar, body.yh-shell27.sidenav-toggled .sidebar { transition: none !important; }
}

/* ---------- Composants partagés ajoutés en phase 2 ---------- */
/* Raccourcis compacts (puces cliquables) */
.yh-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.yh-shortcut {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--yh-line); border-radius: var(--yh-r-sm);
  background: var(--yh-card); color: var(--yh-text) !important; font: 500 13.5px/1 var(--font-sans); white-space: nowrap; text-decoration: none !important;
  transition: background-color var(--yh-dur-fast) var(--yh-ease);
}
.yh-shortcut:hover { background: var(--yh-chip); color: var(--yh-text) !important; }
.yh-shortcut svg { width: 16px; height: 16px; flex: none; color: var(--yh-accent); stroke-width: 1.6; }
.yh-shortcut .yh-ext { width: 12px; height: 12px; color: var(--yh-faint); }
/* Tableau qui devient une pile de cartes sous 720 px (.yh-table-stack) */
@media (max-width: 720px) {
  .yh-table-stack, .yh-table-stack tbody { display: block; }
  .yh-table-stack thead { display: none; }
  .yh-table-stack tr { display: block; }
}
/* Mes services : chevron juste après le compteur */
#yh-sidebar .yh-tag + .yh-chev { margin-left: 8px; }
#yh-sidebar #menu-yh-services .nav-subnav + .nav-subnav { margin-top: 0 !important; }
/* Barre du haut : code support et langue (pastilles 40 px) */
.yh-top27 .yh-top-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--yh-line); border-radius: 10px; background: var(--yh-card); color: var(--yh-text) !important; font: 500 13.5px/1 var(--font-sans); text-decoration: none !important; white-space: nowrap; }
.yh-top27 .yh-top-chip:hover { border-color: var(--yh-line-strong, var(--yh-muted)); }
.yh-top27 .yh-top-chip svg { width: 17px; height: 17px; flex: none; }
.yh-top27 .yh-top-chip .yh-top-chev { width: 14px; height: 14px; color: var(--yh-muted); }
.yh-top27 .dropdown-item[aria-current="true"] { color: var(--yh-accent) !important; font-weight: 500; }
@media (max-width: 1199px) { .yh-top27 .yh-top-chip > span:not([aria-hidden]) { display: none; } }
/* Mes services déplié : catégories et sous-catégories alignées (chevron et compteur à droite) */
#yh-sidebar .nav-subnav .nav-link,
#yh-sidebar .nav-subnav .nav-link-dropdown { display: flex !important; align-items: center !important; gap: 8px; width: 100%; min-height: 32px; padding: 6px 8px !important; margin: 0 !important; border-radius: 8px !important; line-height: 1.3 !important; }
#yh-sidebar .nav-subnav .nav-link > span:first-child:not(.badge),
#yh-sidebar .nav-subnav .nav-link-dropdown > span:first-child:not(.badge) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#yh-sidebar .nav-subnav .nav-link-dropdown .icon-expand { order: 3; margin-left: auto !important; float: none !important; }
#yh-sidebar .nav-subnav .badge,
#yh-sidebar .nav-subnav .badge-top { position: static !important; top: auto !important; transform: none !important; align-self: center; order: 2; margin: 0 0 0 auto !important; flex: 0 0 auto !important; width: auto !important; padding: 1px 7px !important; border-radius: 999px !important; background: var(--yh-chip) !important; color: var(--yh-muted) !important; font: 400 11px/1.5 var(--font-sans) !important; box-shadow: none !important; }
#yh-sidebar .nav-subnav .badge + .icon-expand { margin-left: 4px !important; }
#yh-sidebar .nav-subnav .nav-subnav { margin: 2px 0 4px 8px !important; }
#yh-sidebar .nav-subnav .nav-link:hover,
#yh-sidebar .nav-subnav .nav-link-dropdown:hover { background: var(--yh-chip) !important; color: var(--yh-text) !important; }
#yh-sidebar .nav-subnav .nav-link.active { background: var(--yh-tint) !important; color: var(--yh-accent) !important; }