/* ============================================================
   ROCKY'S — HARMONIE (charte graphique unifiée, passe légère)
   ------------------------------------------------------------
   Objectif : épurer + harmoniser TOUTES les pages, sans refonte.
   - un seul rouge (brand guide Pantone 485C #E42A29) au lieu de 3
   - fonds/bordures identiques partout
   - modules & boutons arrondis, ombres douces
   - sidebar sobre et professionnelle (sans emojis)
   Chargée en fin de <head>, APRÈS le <style> de chaque page.
   Retirer le <link> = retour à l'ancien look. Aucune logique touchée.
   ============================================================ */

/* Typo body officielle du brand guide : Epilogue (fallback Lato) */
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@300;400;500;700;900&display=swap');

/* ═══════════════════════════════════════════════════════════════════
   --rk-haut : LA BANDE INTOUCHABLE EN HAUT DE L'ÉCRAN.
   Sur le téléphone d'Antonino l'appli tourne en PLEIN ÉCRAN : Android dessine
   sa barre d'état (heure, wifi, batterie) PAR-DESSUS la page et avale les
   touches qui tombent dedans. « ← Tableau de bord », épinglé à 10 px du haut,
   était visible mais NE RÉPONDAIT PAS au clic (29/08/2026).
   env(safe-area-inset-top) ne sauve pas la mise : il vaut 0 dans cette WebView
   (il n'est renseigné que sur les encoches iOS). Il faut donc un PLANCHER en
   dur — 34 px, soit la barre d'état Android (24 dp) plus une marge.
   Règle qui en découle : AUCUN élément cliquable ne commence au-dessus de
   var(--rk-haut). Tout ce qui est épinglé en haut s'y aligne.
   ═══════════════════════════════════════════════════════════════════ */
:root { --rk-haut: max(10px, env(safe-area-inset-top)); --rk-bandeau: #E08A1E; }
/* Le plancher suit le TACTILE, pas la largeur : une tablette d'atelier en
   paysage fait 1280 px de large et l'appli y tourne aussi en plein ecran,
   avec la meme barre d'etat par-dessus. Sans `pointer: coarse`, tout
   retombait a 10 px des qu'on tournait la tablette. Une souris ne declenche
   pas `coarse` : le bureau garde ses 10 px. */
@media (max-width: 1024px), (pointer: coarse) {
  :root { --rk-haut: max(34px, env(safe-area-inset-top)); }
}

:root {
  /* -- Palette unifiée (remap des variables existantes) -- */
  --red:    #E42A29;          /* rouge officiel brand guide (Pantone 485C) */
  --dark:   #1C1A17;
  --gray:   #6E6760;
  --light:  #F6F4F0;          /* fond app */
  --cream:  #FAF8F4;          /* surfaces douces */
  --border: #E7E3DB;          /* traits doux */
  --green:  #1F9D5A;
  --gold:   #E08A1E;
  --blue:   #2F6BF0;
  /* rouge fonce (survol/presse) — la charte le donne comme variante du 485C.
     Il etait code en dur (#C4211D) sur ~20 pages : il ne suivait donc PAS
     la marque L'Artisane. Variable -> il suit. */
  --red-dark: #C4211D;

  --hz-r:      14px;          /* rayon modules */
  --hz-r-sm:   10px;          /* rayon boutons/champs */
  --hz-shadow: 0 1px 2px rgba(30,26,20,.05), 0 8px 22px -14px rgba(30,26,20,.18);
  --hz-shadow-sm: 0 1px 2px rgba(30,26,20,.06);
  --hz-ease: cubic-bezier(.22,1,.36,1);
}

/* ============ BASE ============ */
body {
  background: var(--light) !important;
  font-family: 'Epilogue', 'Lato', -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(228,42,41,.15); }

* { scrollbar-width: thin; scrollbar-color: #D9D4CA transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #D9D4CA; border-radius: 999px; border: 3px solid var(--light); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--red); outline-offset: 2px; border-radius: 6px;
}

/* ============ MODULES ARRONDIS (cartes, panneaux, tableaux) ============ */
.card, .stat-card, .table-wrap, .box, .panel, .section, .tile,
.totals-block, .login-card, .modal, .agg-card, .order-card, .cfgbar, .date-bar {
  border-radius: var(--hz-r) !important;
  border-color: var(--border) !important;
  box-shadow: var(--hz-shadow-sm);
}
.table-wrap { overflow: hidden; }
/* Pop-ups : le scroll reste DANS la modal, jamais l'arrière-plan. harmonie forçait
   « .modal{overflow:hidden} » (chargé après les styles de page) → ça cassait le
   scroll interne de TOUTES les modales, et le scroll fuyait vers le fond. */
.modal { max-height: 92vh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body.modal-open { overflow: hidden; }
.stat-card { transition: transform .18s var(--hz-ease), box-shadow .2s var(--hz-ease); }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--hz-shadow); }

/* ============ BOUTONS ============ */
.btn, button.btn, a.btn {
  border-radius: var(--hz-r-sm) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  transition: transform .13s var(--hz-ease), box-shadow .16s var(--hz-ease),
              background .16s, border-color .16s, color .16s;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--hz-shadow-sm); }
.btn:active { transform: translateY(0); }

/* ---- POLISH : boutons « tout terrain » (la plupart ne portent pas .btn) ----
   Base soignée + micro-interactions, SANS toucher aux couleurs métier. Additif :
   sans !important, un style de page garde la main sur ce qu'il déclare. */
button, input[type="submit"], input[type="button"] {
  cursor: pointer;
  border-radius: 10px;
  transition: transform .12s var(--hz-ease), box-shadow .16s var(--hz-ease),
              filter .16s, background .16s, border-color .16s, color .16s;
}
button:not(:disabled):hover,
input[type="submit"]:not(:disabled):hover { filter: brightness(1.04) saturate(1.02); }
button:not(:disabled):active,
input[type="submit"]:not(:disabled):active { transform: translateY(1px); }
button:disabled { cursor: not-allowed; opacity: .6; }

/* ---- POLISH : typographie ---- */
h1, h2, h3, .page-title, .card-title { text-wrap: balance; }
/* chiffres qui s'alignent en colonnes (stats, KPI, tableaux) */
.stat-value, .stat .n, .kpi .n, .num { font-variant-numeric: tabular-nums; }
/* petits labels majuscules : un filet d'air */
.stat .l, .kpi .l, .card-sub, .hint { letter-spacing: .02em; }

/* ============ CHAMPS ============ */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]),
select, textarea {
  border-radius: var(--hz-r-sm) !important;
  border-color: #DCD6CC !important;
  transition: border-color .15s, box-shadow .15s;
}
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(228,42,41,.12) !important;
  outline: none !important;
}

/* ============ TABLEAUX ============ */
thead, table thead { background: var(--cream) !important; }
th { color: var(--gray) !important; border-bottom: 1px solid var(--border) !important; letter-spacing: .04em !important; }
td, th { border-color: var(--border) !important; }
tbody tr { transition: background .13s; }
tbody tr:hover { background: var(--cream) !important; }

/* ============ BARRE DE PROGRESSION (carte Production du jour) ============ */
.stat-progress {
  height: 8px; border-radius: 999px; background: var(--cream);
  border: 1px solid var(--border); overflow: hidden; margin-top: .55rem;
}
.stat-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--red), #E08A1E);
  transition: width .9s cubic-bezier(.22,1,.36,1);
}
.stat-progress-fill.done { background: linear-gradient(90deg, #4CAF6E, var(--green)); }

/* ============ BADGES / CHIPS ============ */
.status-badge, .filter-chip, .chip, .pill, .badge {
  border-radius: 999px !important;
  font-weight: 600 !important;
}

/* ============ TOPBAR — style ÉTIQUETTE Rocky's (rose + damier en bordure basse) ============ */
/* Le damier est peint DANS le fond de la barre (couche background ancrée en bas) :
   aucun pseudo-élément absolu → fonctionne sur toutes les topbars, positionnées ou non. */
.topbar {
  background:
    linear-gradient(90deg, var(--red) 50%, transparent 50%)
      left bottom / 24px 12px repeat-x,
    #FCE2E3 !important;                           /* rose étiquette + 1 rangée de carrés nets */
  color: #C4211D !important;
  border-bottom: none !important;
  box-shadow: 0 2px 14px -8px rgba(196,33,29,.22) !important;
  height: auto !important;
  padding-top: var(--rk-haut) !important;   /* passe SOUS la barre d'état iOS */
  padding-bottom: 18px !important;                /* 12px damier + respiration */
}
@media (max-width: 640px) {
  .topbar {
    padding-top: var(--rk-haut) !important; padding-bottom: 14px !important;
    background:
      linear-gradient(90deg, var(--red) 50%, transparent 50%)
        left bottom / 20px 10px repeat-x,
      #FCE2E3 !important;
  }
}
/* logo : script rouge (comme sur l'étiquette) */
.topbar img[src*="wordmark-white"],
.topbar img[src*="full-white"] { content: url("/images/logos/rockys-wordmark-red.svg"); }
/* le PERSONNAGE au trait à côté du logo + devise de l'étiquette */
.topbar-logo { display: inline-flex !important; align-items: center; gap: .6rem; }
.topbar-logo::before {
  content: ""; width: 34px; height: 34px; flex: none;
  background: url("/images/logos/rockys-personnage-red.png") center/contain no-repeat;
}
.topbar-logo::after {
  content: "Fait à la main. Zéro triche.";
  font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #C4211D; white-space: nowrap; margin-left: 1rem; opacity: .8;
}
@media (max-width: 1100px) { .topbar-logo::after { display: none; } }
/* Le logo ne se comprime JAMAIS. Sans ceci, `.topbar-logo` (enfant flex de la
   topbar) rétrécit sous la largeur de son image : le wordmark déborde et passe
   par-dessus le badge PROD de `.topbar-info`. Vu sur tablette ~1000px. */
.topbar-logo { flex: none; }
/* C'est la droite de la barre qui absorbe le manque de place, pas le logo. */
.topbar-info { min-width: 0; }
/* Entre 900px (compactage admin) et 1100px, « ADMINISTRATEUR » restait affiché
   et saturait la barre. On le masque dès 1100px, comme la devise. */
@media (max-width: 1100px) { .topbar-user span { display: none !important; } }
@media (max-width: 640px)  {
  .topbar-logo::before { width: 30px; height: 30px; }
  /* trop étroit pour le wordmark : le personnage devient LE logo */
  .topbar-logo img { display: none !important; }
}
/* textes : ROUGE sur rose, façon étiquette (y compris styles inline hérités) */
/* .brand-chip est exclue : elle pose son PROPRE fond de marque et son texte
   blanc, mais « .topbar span » (0,2,1) battait « .brand-chip » (0,1,0) — le
   libelle sortait en rouge sombre sur rouge, illisible (bureau compris). */
.topbar a, .topbar strong, .topbar span:not(.topbar-mode):not(.brand-chip):not([class*="badge"]) { color: #C4211D; }
.topbar [style*="color:#fff"], .topbar [style*="color: #fff"],
.topbar [style*="255,255,255"], .topbar [style*="color:#1A1A1A"],
.topbar [style*="color: #1A1A1A"] { color: #C4211D !important; }
.topbar-user strong { color: #A81916 !important; }
.topbar-user span { color: #D3706A !important; }
.topbar-mode { border-radius: 999px !important; }
/* boutons : pilules blanches à liseré rouge (comme les cartouches de l'étiquette) */
.topbar-logout, .topbar a.btn, .topbar button:not(.mobile-menu-btn):not(.topbar-logout) {
  border-radius: var(--hz-r-sm) !important;
}
.topbar-logout {
  background: #fff !important; color: #C4211D !important;
  border: 1.5px solid #F0AFA7 !important; font-weight: 700 !important;
}
.topbar-logout:hover { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }
.mobile-menu-btn { background: #fff !important; color: #C4211D !important; border: 1.5px solid #F0AFA7 !important; border-radius: var(--hz-r-sm) !important; }
/* cartouches blancs inline (liens boutons des topbars de pages) */
.topbar a[style*="background:#fff"], .topbar a[style*="background: #fff"],
.topbar [style*="border:1px solid"] { border-color: #F0AFA7 !important; }

/* ============ SIDEBAR (dashboard) — sections en CARTES ============ */
/* Le tiroir du burger (js/admin-nav.js) partage le composant de la sidebar :
   memes cartes de section, memes pastilles-icones, meme classement. Sans ca il
   sortait une liste plate — le menu paraissait « en desordre » des qu'on entrait
   dans un module. */
.rk-drawer { background: #F6F1E9 !important; }
.rk-drawer .sb-card { margin: 0 .7rem .7rem; }
.sidebar {
  background: #F6F1E9 !important;                 /* papier chaud */
  border-right: 1px solid var(--border) !important;
  padding: 1rem 0.75rem 2rem !important;
}
/* chaque section = une carte blanche */
.sb-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.4rem 0.4rem 0.5rem;
  margin: 0 0 0.7rem;
  box-shadow: var(--hz-shadow-sm);
}
.sidebar h4, .rk-drawer h4{
  display: flex; align-items: center; gap: .55rem;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  color: #8A8072 !important;
  padding: 0.5rem 0.5rem 0.45rem !important;
  margin: 0 0 0.15rem !important;
  border-top: none !important;
  border-bottom: 1px solid #F1ECE2;
}
.sidebar h4:first-of-type, .rk-drawer h4:first-of-type{ margin-top: 0 !important; padding-top: .5rem !important; }
/* titre de section teinté comme son icône */
.sidebar h4[data-ic="dash"], .rk-drawer h4[data-ic="dash"]{ color: #C4211D !important; }
.sidebar h4[data-ic="vues"], .rk-drawer h4[data-ic="vues"]{ color: #2F6BF0 !important; }
.sidebar h4[data-ic="prod"], .rk-drawer h4[data-ic="prod"]{ color: #C97508 !important; }
.sidebar h4[data-ic="cata"], .rk-drawer h4[data-ic="cata"]{ color: #C0622B !important; }
.sidebar h4[data-ic="clients"], .rk-drawer h4[data-ic="clients"]{ color: #0E7490 !important; }
.sidebar h4[data-ic="stock"], .rk-drawer h4[data-ic="stock"]{ color: #1F9D5A !important; }
.sidebar h4[data-ic="livr"], .rk-drawer h4[data-ic="livr"]{ color: #475569 !important; }
.sidebar h4[data-ic="equipe"], .rk-drawer h4[data-ic="equipe"]{ color: #915FA8 !important; }
/* pastille-icône colorée par domaine */
.sidebar h4[data-ic]::before, .rk-drawer h4[data-ic]::before{
  content: ""; width: 26px; height: 26px; border-radius: 8px; flex: none;
  background-color: var(--sb-soft, #F1EEE7);
  background-image: var(--sb-ic);
  background-repeat: no-repeat; background-position: center; background-size: 15px 15px;
}
.sidebar h4[data-ic="dash"], .rk-drawer h4[data-ic="dash"]{ --sb-soft: #FDECEA; --sb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E42A29' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V20h14V9.5'/%3E%3C/svg%3E"); }
.sidebar h4[data-ic="vues"], .rk-drawer h4[data-ic="vues"]{ --sb-soft: #E9EFFD; --sb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6BF0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='m7 14 3-3 3 2 5-6'/%3E%3C/svg%3E"); }
.sidebar h4[data-ic="prod"], .rk-drawer h4[data-ic="prod"]{ --sb-soft: #FBEFD9; --sb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E08A1E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s4 4 4 8a4 4 0 0 1-8 0c0-1.5.6-2.8 1.4-4C10 8.5 12 6 12 3Z'/%3E%3Cpath d='M12 21a6 6 0 0 0 6-6c0-1-.3-2-.8-3'/%3E%3C/svg%3E"); }
.sidebar h4[data-ic="cata"], .rk-drawer h4[data-ic="cata"]{ --sb-soft: #F7E8DE; --sb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C0622B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 3 20l9-2 9 2z'/%3E%3Ccircle cx='10' cy='12' r='1'/%3E%3Ccircle cx='13' cy='15' r='1'/%3E%3C/svg%3E"); }
.sidebar h4[data-ic="clients"], .rk-drawer h4[data-ic="clients"]{ --sb-soft: #E0F1F4; --sb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7490' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c0-3.5 2.7-5.5 6-5.5S15 16.5 15 20'/%3E%3Cpath d='M16 5a3 3 0 0 1 0 6'/%3E%3C/svg%3E"); }
.sidebar h4[data-ic="stock"], .rk-drawer h4[data-ic="stock"]{ --sb-soft: #E7F5EC; --sb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F9D5A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13h4l2 3h4l2-3h4'/%3E%3Cpath d='M4 13 6 5h12l2 8v6H4z'/%3E%3C/svg%3E"); }
.sidebar h4[data-ic="livr"], .rk-drawer h4[data-ic="livr"]{ --sb-soft: #EDF1F5; --sb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='12' height='10' rx='1.5'/%3E%3Cpath d='M14 9h4l3 3v4h-7z'/%3E%3Ccircle cx='7' cy='18' r='1.7'/%3E%3Ccircle cx='17' cy='18' r='1.7'/%3E%3C/svg%3E"); }
.sidebar h4[data-ic="equipe"], .rk-drawer h4[data-ic="equipe"]{ --sb-soft: #F3EAF7; --sb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23915FA8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c0-3.5 3-5.5 7-5.5s7 2 7 5.5'/%3E%3C/svg%3E"); }
.sidebar a, .sidebar .nav-link {
  display: block;
  padding: 0.5rem 0.8rem !important;
  margin: 1px 0;
  border-radius: 9px !important;
  border-left: none !important;
  font-size: 0.86rem !important;
  color: #57504A !important;
  line-height: 1.3;
  transition: background .13s, color .13s;
}
.sidebar a:hover { background: var(--cream) !important; color: var(--dark) !important; }
.sidebar a.active, .sidebar a.sidebar-here {
  background: rgba(228,42,41,.08) !important;
  color: #C4211D !important;
  font-weight: 650 !important;
  box-shadow: inset 3px 0 0 var(--red);
}
.sidebar a .count { border-radius: 999px !important; }
/* neutraliser le lien "Vue Apps" bariolé */
.sidebar a[href="apps.html"] {
  background: var(--cream) !important;
  color: var(--dark) !important;
  border: 1px solid var(--border) !important;
  font-weight: 600 !important;
}

/* ============ MENU PARTAGÉ (burger admin-nav.js) ============ */
#rk-admin-nav-root a { border-radius: 9px !important; }
#rk-admin-nav-root [class*="panel"] { border-radius: 0 var(--hz-r) var(--hz-r) 0 !important; }
/* bouton « Retour » flottant (position:fixed, admin-nav.js) : cartouche BLANC
   façon étiquette. L'ancien style translucide était pensé pour une topbar
   sombre → illisible sur le rose. Blanc + rouge = lisible sur toutes les topbars. */
#rkBack, .rk-back {
  background: #fff !important;
  color: #C4211D !important;
  border: 1.5px solid #F0AFA7 !important;
  border-radius: 999px !important;
  padding: .45rem .95rem !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px -4px rgba(196,33,29,.4) !important;
  backdrop-filter: none !important;
}
#rkBack:hover, .rk-back:hover { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }
/* La flèche est fixe en haut-gauche → on réserve sa place pour qu'elle ne
   recouvre plus le logo/titre des topbars d'atelier (ex. REG-PROD-01).
   Desktop : on décale à droite. Mobile : on dégage par le HAUT (sinon une
   gouttière de 124px gâche toute la largeur — cf. barre REG dense). */
@media (min-width: 1025px) {
  body:has(.rk-back) .topbar { padding-left: 124px !important; }
}
/* La réserve par le HAUT valait jusqu'à 640 px seulement. Depuis que la mise
   en page téléphone monte à 1024 px, son `padding-top: var(--rk-haut)`
   (plus tardif dans le fichier) écrasait cette règle : la pastille « Retour »
   et le burger se posaient sur la mascotte et sur le titre (catalogue,
   coffre-contrats, contracts-employer, print-price-lists…). Même borne, et
   le plancher de la barre d'état s'ajoute à la hauteur de la pastille. */
@media (max-width: 1024px) {
  body:has(.rk-back) .topbar { padding-top: calc(var(--rk-haut) + 46px) !important; }
}

/* ============ BARRE D'OUTILS REG-PROD-01 (production-reg.html) ============
   Le bandeau bascule-marque + « Lot : … » + savechip + badge portait des
   fonds teintés par marque qui juraient avec la topbar. On les repasse en
   cartouches BLANCS à liseré doux, pilotés par des variables de THÈME
   posées sur la topbar → chaque marque garde SES tons (cf. plus bas). */

/* Thème par défaut = Rocky's (rose + rouge, identité maison) */
.topbar {
  --tb-line:   #F0AFA7;   /* liseré des cartouches */
  --tb-ink:    #C4211D;   /* texte fort */
  --tb-mut:    #B4534E;   /* texte atténué (onglet inactif) */
  --tb-accent: var(--red);/* pastille active */
  --tb-soft:   #FCE2E3;   /* survol doux */
}

/* -- L'Artisane : l'ACCENT de marque devient bleu acier. Beaucoup de pages
   utilisent --red comme couleur d'accent (boutons, bordures, surlignages) ;
   en contexte Artisane on la re-teinte pour que TOUT le contenu suive, pas
   juste la topbar. Le rouge « danger » des pages est presque toujours codé en
   dur (#b91c1c…) donc pas impacté. -- */
html[data-brand="artisane"] { --red: #3F7CAC; --red-dark: #2F6A93; }

/* -- L'Artisane : tons du logo (bleu poudré + encre bleu acier) -- */
html[data-brand="artisane"] .topbar {
  --tb-line:   #AED0E4;
  --tb-ink:    #2F6A93;
  --tb-mut:    #5E86A3;
  --tb-accent: #5E9BC0;
  --tb-soft:   #DCEEF6;
  /* damier bleu-sur-bleu, façon étiquette L'Artisane (au lieu du rose Rocky's) */
  background:
    conic-gradient(#7BA8C7 90deg, #E3F1F8 0 180deg, #7BA8C7 0 270deg, #E3F1F8 0)
      left bottom / 14px 14px repeat-x,
    #E3F1F8 !important;
  color: #2F6A93 !important;
  box-shadow: 0 2px 14px -8px rgba(47,106,147,.28) !important;
}
@media (max-width: 640px) {
  html[data-brand="artisane"] .topbar {
    background:
      conic-gradient(#7BA8C7 90deg, #E3F1F8 0 180deg, #7BA8C7 0 270deg, #E3F1F8 0)
        left bottom / 10px 10px repeat-x,
      #E3F1F8 !important;
  }
}
/* textes de la topbar L'Artisane : bleu acier au lieu du rouge Rocky's */
html[data-brand="artisane"] .topbar a,
html[data-brand="artisane"] .topbar strong,
html[data-brand="artisane"] .topbar span:not(.brand-chip):not([class*="badge"]) { color: #2F6A93; }
html[data-brand="artisane"] .topbar .ref { color: #5E9BC0 !important; }

/* ============ L'Artisane — HEADER COMPACT mobile/tablette ============
   Les topbars Artisane (dashboard .logo-wrap gros logo 54px, topbars custom)
   n'avaient PAS le compactage responsive de Rocky's → header qui déborde et
   wrappe sur 3 lignes (127px), burger noyé, switcher illisible. On calque la
   recette Rocky's (logo réduit, nowrap, nom tronqué, logout compact). TOUT est
   scopé html[data-brand="artisane"] → RIGOUREUSEMENT AUCUN impact sur Rocky's. */
@media (max-width: 900px) {
  html[data-brand="artisane"] .topbar {
    /* sides only : le raccourci « padding » remettait padding-top à 0 et
       écrasait la safe-area iOS (topbar Artisane sous l'heure de l'iPhone). */
    padding-top: var(--rk-haut) !important;
    padding-bottom: 14px !important;
    padding-left: 0.85rem !important; padding-right: 0.85rem !important;
    gap: 0.5rem !important;
    min-height: 52px;
  }
  /* Le `nowrap` ne vaut que pour l'en-tete SIMPLE du tableau de bord (logo,
     switcher, nom, deconnexion) : il tient sur une ligne. La barre REG, elle,
     porte une quinzaine d'elements — logo, titre, switcher, lot, date, six
     boutons. Avec nowrap elle mesurait 1894 px dans un ecran de 390 : tout
     etait coupe a droite, definitivement (pas de defilement). Elle passe donc
     a la ligne comme sa feuille de page le prevoyait. */
  html[data-brand="artisane"] .topbar:not(:has(.brandsw)) {
    flex-wrap: nowrap !important;
  }
  html[data-brand="artisane"] .topbar .logo-wrap { flex: 0 1 auto; min-width: 0; }
  html[data-brand="artisane"] .topbar .logo-wrap img,
  html[data-brand="artisane"] .topbar .topbar-logo img { height: 30px !important; width: auto !important; }
  html[data-brand="artisane"] .topbar .mobile-menu-btn,
  html[data-brand="artisane"] .topbar .rk-burger { flex: 0 0 auto; }
  /* Burger : bleu acier L'Artisane (sinon il reste rouge Rocky's) — toutes pages Artisane */
  html[data-brand="artisane"] .mobile-menu-btn,
  html[data-brand="artisane"] .rk-burger {
    color: #2F6A93 !important; border-color: #AED0E4 !important; background: #fff !important;
  }
  html[data-brand="artisane"] .mobile-menu-btn:hover,
  html[data-brand="artisane"] .rk-burger:hover {
    background: #5E9BC0 !important; border-color: #5E9BC0 !important; color: #fff !important;
  }
  /* Le nom d'utilisateur se tronque au lieu de pousser la largeur du header */
  html[data-brand="artisane"] .topbar .user,
  html[data-brand="artisane"] .topbar #userInfo,
  html[data-brand="artisane"] .topbar .topbar-user {
    min-width: 0; flex: 0 1 auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34vw;
  }
  html[data-brand="artisane"] .topbar .logout,
  html[data-brand="artisane"] .topbar .topbar-logout {
    flex: 0 0 auto; padding: 0.4rem 0.6rem !important; font-size: 0.75rem !important; white-space: nowrap;
  }
  html[data-brand="artisane"] .topbar .rk-brandsw,
  html[data-brand="artisane"] .topbar .switcher { flex: 0 0 auto; font-size: 0.72rem; }
}
@media (max-width: 480px) {
  /* Très petit écran (téléphone) : le nom d'utilisateur cède la place
     (switcher de marque + burger prioritaires). Logo à taille naturelle
     (jamais compressé), logout collé à droite → header propre sur 1 ligne. */
  html[data-brand="artisane"] .topbar .user,
  html[data-brand="artisane"] .topbar #userInfo,
  html[data-brand="artisane"] .topbar .topbar-user { display: none !important; }
  html[data-brand="artisane"] .topbar {
    gap: 0.35rem !important;
    padding-top: var(--rk-haut) !important;
    padding-bottom: 12px !important;
    padding-left: 0.6rem !important; padding-right: 0.6rem !important;
  }
  html[data-brand="artisane"] .topbar .logo-wrap { flex: 0 0 auto; }
  html[data-brand="artisane"] .topbar .logo-wrap img,
  html[data-brand="artisane"] .topbar .topbar-logo img { height: 26px !important; }
  html[data-brand="artisane"] .topbar .logout,
  html[data-brand="artisane"] .topbar .topbar-logout { margin-left: auto; padding: 0.35rem 0.5rem !important; font-size: 0.7rem !important; }
  /* switcher de marque compact (bat le padding/police de base) */
  html[data-brand="artisane"] .topbar .rk-brandsw { font-size: 0.66rem !important; }
  html[data-brand="artisane"] .topbar .rk-brandsw a { padding: 0.28rem 0.55rem !important; }
}

/* flèche « ← Retour » (fixe, hors topbar) : suit le thème bleu L'Artisane */
html[data-brand="artisane"] #rkBack,
html[data-brand="artisane"] .rk-back {
  color: #2F6A93 !important; border-color: #AED0E4 !important;
  box-shadow: 0 2px 8px -4px rgba(47,106,147,.4) !important;
}
html[data-brand="artisane"] #rkBack:hover,
html[data-brand="artisane"] .rk-back:hover { background: #5E9BC0 !important; border-color: #5E9BC0 !important; color: #fff !important; }

/* -- Cartouches (pilotés par le thème de marque) -- */
.topbar .brandsw {
  background: #fff !important;
  border: 1.5px solid var(--tb-line) !important;
  box-shadow: 0 2px 8px -5px rgba(30,26,20,.35);
  padding: 2px !important;
  gap: 2px;
}
.topbar .brandsw a { color: var(--tb-mut) !important; border-radius: 999px !important; }
.topbar .brandsw a:hover { background: var(--tb-soft) !important; color: var(--tb-ink) !important; }
.topbar .brandsw a.on {
  background: var(--tb-accent) !important; color: #fff !important;
  box-shadow: 0 1px 4px -1px rgba(30,26,20,.4);
}
.topbar .lotbox {
  background: #fff !important;
  border: 1.5px solid var(--tb-line) !important;
  color: var(--tb-ink) !important;
}
.topbar .lotbox b { color: var(--tb-ink) !important; }
.topbar .savechip {
  background: #fff !important;
  border: 1.5px solid var(--tb-line) !important;
  color: var(--tb-ink) !important;
}
.topbar .savechip.saved { background: #EAF7EF !important; border-color: #BFE6CD !important; color: var(--green) !important; }
.topbar .savechip.err   { background: #FDEAEA !important; border-color: #F3C6C6 !important; color: #B91C1C !important; }
/* badge marque : cartouche blanc, texte à l'encre de la marque */
.topbar .badge {
  background: #fff !important;
  border: 1.5px solid var(--tb-line) !important;
  color: var(--tb-ink) !important;
}

/* ---- Sélecteur de marque des DASHBOARDS (Rocky's ⇄ Artisane) ----
   Cartouche « étiquette » propre, zéro emoji, thème par marque (rouge / bleu).
   Autonome (ne dépend pas d'être dans .topbar) : themé via html[data-brand]. */
.rk-brandsw {
  display: inline-flex; gap: 2px; padding: 2px;
  background: #fff; border: 1.5px solid #F0AFA7; border-radius: 999px;
  font-size: .72rem; font-weight: 800;
  box-shadow: 0 2px 8px -5px rgba(30,26,20,.35);
}
.rk-brandsw a {
  padding: .3rem .75rem; border-radius: 999px; color: #B4534E; text-decoration: none;
  white-space: nowrap; transition: background .13s, color .13s;
}
.rk-brandsw a.active, .rk-brandsw a.on { background: #E42A29; color: #fff; }
.rk-brandsw a:not(.active):not(.on):hover { background: #FCE2E3; color: #C4211D; }
html[data-brand="artisane"] .rk-brandsw { border-color: #AED0E4; }
html[data-brand="artisane"] .rk-brandsw a { color: #5E86A3; }
html[data-brand="artisane"] .rk-brandsw a.active,
html[data-brand="artisane"] .rk-brandsw a.on { background: #5E9BC0; }
html[data-brand="artisane"] .rk-brandsw a:not(.active):not(.on):hover { background: #DCEEF6; color: #2F6A93; }

/* A4 (impression) : cartouche blanc cohérent avec le thème */
.topbar .btn.print {
  background: #fff !important; color: var(--tb-ink) !important;
  border: 1.5px solid var(--tb-line) !important;
}
.topbar .btn.print:hover { background: var(--tb-accent) !important; color: #fff !important; border-color: var(--tb-accent) !important; }

/* -- MOBILE : la barre d'outils REG était un empilement géant de gros boutons.
   On compacte tout (hauteur, padding, gaps) pour packer plusieurs contrôles
   par ligne et rendre l'écran à nouveau lisible. -- */
@media (max-width: 640px) {
  .topbar:has(.brandsw) { row-gap: .3rem !important; column-gap: .3rem !important; padding-bottom: 14px !important; }
  .topbar:has(.brandsw) .btn {
    min-height: 34px !important; padding: .32rem .55rem !important;
    font-size: .72rem !important; border-radius: 8px !important;
  }
  .topbar:has(.brandsw) input[type=date] {
    min-height: 34px !important; padding: .25rem .4rem !important; font-size: .8rem !important;
  }
  .topbar .brandsw { padding: 2px !important; }
  .topbar .brandsw a { padding: .3rem .5rem !important; font-size: .7rem !important; }
  .topbar .lotbox, .topbar .savechip, .topbar .badge {
    font-size: .66rem !important; padding: .28rem .5rem !important;
  }
  .topbar h1 { font-size: .9rem !important; }
  .topbar .spacer { display: none !important; }   /* pas de ressort géant sur mobile */

  /* -- Haut de la barre REG : on déclutter comme l'atelier.
     Avant : « ← Retour » (fixe) + burger empilés à gauche (chevauchement) +
     vide à droite. Désormais : burger à gauche, « ← Retour » à droite. -- */
  body:has(.brandsw) .rk-burger { left: 10px !important; }
  body:has(.brandsw) .rk-back   { left: auto !important; right: 10px !important; top: var(--rk-haut) !important; }
  /* logo Rocky's + titre : centrés sur leur ligne (le burger fixe tient la gauche) */
  .topbar:has(.brandsw) #logo { margin-left: auto !important; }
  .topbar:has(.brandsw) h1    { margin-right: auto !important; }
  /* « RÉF : REG-PROD-01 » : superflu sur mobile → masqué (gain de place) */
  .topbar:has(.brandsw) .ref { display: none !important; }
  /* « ← Hub » redondant quand « ← Retour » existe déjà → masqué sur mobile */
  body:has(.rk-back) .topbar:has(.brandsw) #hubbtn { display: none !important; }
}

/* ============ MODALES / DRAWERS ============ */
.modal-head { border-radius: var(--hz-r) var(--hz-r) 0 0 !important; }
.drawer-header { border-bottom: 1px solid var(--border) !important; }

/* ============================================================
   MOBILE FIRST — règles globales (toutes les pages)
   Objectifs : zéro scroll horizontal de page, zéro zoom nécessaire,
   badges qui ne se cassent jamais, utilisable à une main.
   ============================================================ */

/* -- Verrou : la page ne défile JAMAIS horizontalement -- */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video, canvas, iframe { max-width: 100%; }

/* -- Les tableaux défilent DANS leur cadre, jamais la page -- */
.table-wrap, .rk-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* -- Badges & pastilles : jamais coupés au milieu -- */
.status-badge, .notif-badge, .pill, .chip, .badge,
.ref-cell > span, td > span[style*="border-radius"] {
  white-space: nowrap !important;
}

/* -- Cartes mobiles (table.rk-cards de mobile.js) : mise en page propre -- */
table.rk-cards td { flex-wrap: wrap !important; row-gap: .3rem; }
table.rk-cards .ref-cell {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: .3rem .4rem !important;
  font-size: .85rem !important;
  line-height: 1.35 !important;
}
table.rk-cards .ref-cell::before { flex-basis: 100%; }
table.rk-cards td::before { font-size: .68rem !important; letter-spacing: .04em; text-transform: uppercase; }
table.rk-cards tr { border-radius: var(--hz-r) !important; border: 1px solid var(--border) !important; box-shadow: var(--hz-shadow-sm); }

@media (max-width: 760px) {
  /* -- Anti-zoom iOS : les champs à 16px ne déclenchent pas le zoom focus -- */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select, textarea { font-size: 16px !important; }

  /* -- Cibles tactiles : utilisable au pouce, avec des gants -- */
  .btn, button.btn, a.btn, select { min-height: 44px; }
  button:not(.btn):not([class*="close"]):not([class*="check"]):not(.rk-burger) { min-height: 40px; }
  td, th { padding: .55rem .6rem; }

  /* -- Modales & drawers : pleine largeur confortable -- */
  .modal { width: calc(100vw - 20px) !important; max-width: none !important; }
  .drawer { width: 100vw !important; }
}

/* ═══════════ ESPACE CLIENT (/client/) — topbar étiquette + mise en page aérée ═══════════ */
/* Scope : body.client-space (posé sur les 7 pages client). */

/* -- Topbar : identité étiquette, cartouches blancs -- */
.client-space .topbar {
  gap: .55rem !important;
  flex-wrap: nowrap !important;
  padding-top: var(--rk-haut) !important;   /* passe SOUS la barre d'état iOS */
  padding-left: max(14px, env(safe-area-inset-left)) !important;
  padding-right: max(14px, env(safe-area-inset-right)) !important;
}
/* petit écran : tout tient sur une ligne, « Déconnexion » reste accessible */
@media (max-width: 430px) {
  .client-space .topbar { gap: .35rem !important; }
  .client-space .topbar img { height: 28px !important; }
  .client-space .topbar .hello { min-width: 0; flex: 1 1 auto; }
  .client-space .topbar .logout { padding: .5rem .6rem !important; font-size: .82rem; }
}
.client-space .topbar img { height: 34px !important; }
.client-space .topbar .hello {
  color: #C4211D !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.client-space .topbar .logout,
.client-space .topbar .profil-btn {
  background: #fff !important;
  border: none !important;
  color: #C4211D !important;
  border-radius: 999px !important;
  padding: .5rem .85rem !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px -3px rgba(196,33,29,.35);
  min-height: 36px;
}
.client-space .topbar .profil-btn { width: 36px; height: 36px; padding: 0 !important; font-size: 1rem; }
.client-space .topbar .logout:hover,
.client-space .topbar .profil-btn:hover { color: var(--red) !important; box-shadow: 0 4px 12px -3px rgba(196,33,29,.45); }

/* -- Contenu : on respire (la colonne 680px flottait dans le vide en desktop) -- */
.client-space .container { max-width: 900px; }

/* -- Titres : sans-serif graphique cohérent avec le reste du site + puce rouge -- */
.client-space h1, .client-space h2 {
  font-family: 'Epilogue', 'Lato', -apple-system, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em;
}
.client-space h2 { text-transform: none; }
.client-space h2::before {
  content: ""; width: 9px; height: 9px; flex: none;
  background: var(--red); border-radius: 3px;
}

/* -- Actions rapides : boutons nets, icônes SVG -- */
.client-space .qa { border-radius: 14px; border-width: 1px; padding: 1.05rem .8rem; }
.client-space .qa .ico svg { width: 26px; height: 26px; display: block; }
.client-space .qa.primary { background: var(--red); }
.client-space .qa.primary:hover { background: #C4211D; }

/* -- Listes de commandes : grille 2 colonnes dès qu'il y a la place -- */
@media (min-width: 760px) {
  .client-space #ongoingList, .client-space #recentList {
    display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
  }
  .client-space #ongoingList .order-card, .client-space #recentList .order-card { margin-bottom: 0; }
  .client-space #ongoingList .empty, .client-space #recentList .empty { grid-column: 1 / -1; }
}
.client-space .order-card { border-radius: 12px; }
.client-space .order-card .ref { font-family: 'Epilogue', 'Lato', sans-serif; font-weight: 900; }

/* ═══════════════════════════════════════════════════════════════════
   IDENTITÉ FORTE — police de titre officielle + en-tête retravaillé
   Humanist 521 BT UltraBold : LA police d'affichage du brand guide.
   Elle remplace le Playfair serif, hors charte.
   ═══════════════════════════════════════════════════════════════════ */
/* Typo interface = Epilogue partout (police de texte officielle du brand
   guide). PAS de police d'affichage lourde dans l'admin : elle fatigue en
   usage dense. L'impact des titres vient de la graisse Black + la couleur,
   l'identité vient de la topbar/damier/couleurs — pas de la typo des titres. */
h1, h2, h3, .page-title, .content > h2, .main > h2, .stat-value {
  font-family: 'Epilogue', -apple-system, 'Helvetica Neue', sans-serif !important;
}
h1, h2.page-title, .page-title, .content > h2, .main > h2, section > h2:first-child {
  font-weight: 900 !important;
  letter-spacing: -0.01em;
}
/* le mot accentué du titre : en rouge, même graisse */
h1 em, h1 i, h2 em, h2 i, .page-title em, .page-title i {
  font-style: normal !important; color: var(--red); font-weight: 900;
}
.stat-value { font-weight: 900 !important; letter-spacing: -0.02em; }

/* ---- Topbar : lockup mascotte + wordmark, damier fin, bloc utilisateur ---- */
.topbar {
  /* damier deux fois plus fin : liseré, pas gros pointillés */
  background:
    conic-gradient(var(--red) 90deg, #FCE2E3 0 180deg, var(--red) 0 270deg, #FCE2E3 0)
      left bottom / 14px 14px repeat-x,
    #FCE2E3 !important;
  /* safe-area : c'est CETTE règle qui gagne (elle est la plus tardive du fichier).
     env(...) = 0 hors encoche → aucun changement visuel en navigateur / desktop ;
     sur iPhone à encoche en PWA, la barre ne passe plus SOUS l'heure et la batterie. */
  padding-top: var(--rk-haut) !important;
  padding-bottom: 20px !important;
  gap: .9rem !important;
}
@media (max-width: 640px) {
  .topbar {
    background:
      conic-gradient(var(--red) 90deg, #FCE2E3 0 180deg, var(--red) 0 270deg, #FCE2E3 0)
        left bottom / 10px 10px repeat-x,
      #FCE2E3 !important;
    padding-top: var(--rk-haut) !important;
    padding-bottom: 14px !important;
  }
}
.topbar-logo::before { width: 30px; height: 30px; }
.topbar-logo::after {
  font-size: .68rem; letter-spacing: .16em; opacity: .55;
  border-left: 1px solid rgba(196,33,29,.25);
  padding-left: 1rem; margin-left: 1rem;
}

/* Environnement : pastille discrète à liseré, pas un aplat criard */
.topbar-mode {
  background: transparent !important;
  border: 1.5px solid rgba(196,33,29,.35) !important;
  color: #C4211D !important;
  font-size: .64rem !important; font-weight: 800 !important;
  letter-spacing: .12em; padding: .25rem .6rem !important;
}

/* Utilisateur : avatar mascotte + nom + rôle, dans un cartouche blanc */
.topbar-user {
  display: inline-flex !important; align-items: center; gap: .55rem;
  background: #fff; border-radius: 999px;
  padding: .3rem .95rem .3rem .35rem;
  box-shadow: 0 2px 10px -5px rgba(196,33,29,.45);
  line-height: 1.15;
}
.topbar-user::before {
  content: ""; width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: #FCE2E3 url("/images/logos/rockys-personnage-red.png") center/72% no-repeat;
}
.topbar-user strong { font-size: .84rem; font-weight: 800 !important; }
.topbar-user span {
  font-size: .62rem !important; letter-spacing: .1em; margin-left: 0 !important;
  color: #C08B87 !important; display: block;
}

/* ---- Bandeau d'information (notifications, alertes) ---- */
.rk-banner {
  display: none; align-items: center; gap: .9rem; flex-wrap: wrap;
  background: linear-gradient(90deg, #FFF6F5, #fff 55%);
  border: 1px solid #F3D9D6; border-radius: var(--hz-r);
  padding: .85rem 1rem; margin-bottom: 1rem;
  box-shadow: var(--hz-shadow-sm);
}
.rk-banner .rk-banner-ico {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: #FCE2E3; color: var(--red);
  display: grid; place-items: center;
}
.rk-banner .rk-banner-ico svg { width: 19px; height: 19px; }
.rk-banner-body { flex: 1; min-width: 220px; }
.rk-banner-body strong { font-size: .92rem; display: block; }
.rk-banner-body .sub { font-size: .81rem; color: var(--gray); margin-top: .1rem; }
.rk-banner .rk-btn {
  border: none; border-radius: 999px; padding: .55rem 1.2rem;
  font: inherit; font-weight: 700; font-size: .84rem; cursor: pointer;
  background: var(--red); color: #fff;
  box-shadow: 0 6px 16px -8px rgba(196,33,29,.7);
  transition: background .15s, transform .12s;
}
.rk-banner .rk-btn:hover { background: #C4211D; transform: translateY(-1px); }
.rk-banner .rk-btn.ghost {
  background: #fff; color: var(--dark); border: 1.5px solid var(--border); box-shadow: none;
}
.rk-banner .rk-err {
  display: none; width: 100%; font-size: .78rem; color: #b91c1c;
  background: #FEE2E2; border-radius: 8px; padding: .45rem .65rem;
  font-family: ui-monospace, monospace; word-break: break-word;
}

/* ---- Sidebar : élément actif marqué au liseré rouge ---- */
.sidebar a.active, .sidebar a[aria-current="page"] {
  position: relative;
  background: #FDECEA !important;
  color: #C4211D !important;
  font-weight: 700 !important;
}
.sidebar a.active::before, .sidebar a[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--red);
}
.sidebar h4 {
  font-size: .68rem !important; letter-spacing: .14em !important;
  text-transform: uppercase;
}
/* États du bandeau : activé (vert) / bloqué (neutre) */
.rk-banner.is-on  { background: linear-gradient(90deg, #F2FBF5, #fff 55%); border-color: #CBEBD7; }
.rk-banner.is-on  .rk-banner-ico { background: #DFF4E7; color: var(--green); }
.rk-banner.is-off { background: #FAFAF9; border-color: var(--border); }
.rk-banner.is-off .rk-banner-ico { background: #EFEDEA; color: var(--gray); }

/* Mobile : le cartouche utilisateur ne doit pas pousser la déconnexion hors écran */
@media (max-width: 640px) {
  .topbar { gap: .45rem !important; padding-left: 10px !important; padding-right: 10px !important; }
  .topbar-user {
    padding: .22rem .5rem .22rem .25rem;
    max-width: 34vw; overflow: hidden; min-width: 0;
  }
  .topbar-user::before { width: 22px; height: 22px; }
  .topbar-user strong {
    font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .topbar-user span { display: none !important; }   /* rôle : masqué, gain de place */
  .topbar-logo::after { display: none; }
  .topbar-mode { display: none !important; }        /* env. : info de bureau, pas de mobile */
  .topbar-logout { padding: .45rem .8rem !important; font-size: .74rem !important; }
}

/* Topbars « simples » CONVERTIES (planning-equipe, tour-detail, dimona…) :
   elles n'ont pas de CSS .topbar propre → sans ceci, .topbar reste en `block`
   sur desktop et le contenu (Dashboard + titre) s'empile dans une grande bande
   rose vide. On pose le flex à TOUTES les largeurs (le bloc mobile plus bas
   surcharge pour la mise en page bandeau/mascotte). */
body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
/* titre : pas de grosse marge héritée de la page → sinon la bande rose gonfle
   et le damier « flotte » trop bas (effet buggé). */
body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) h1 {
  margin: 0 !important;
}
/* « ← Dashboard » : cartouche blanc propre (desktop) au lieu d'un lien rouge
   souligné brut. En mobile, la règle plus bas le repositionne en haut à droite. */
body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) a[href$="index.html"]:not(:has(img)):not(:has(svg)) {
  text-decoration: none !important; font-weight: 700; font-size: .82rem; white-space: nowrap;
  background: #fff; border: 1.5px solid #F0AFA7; color: #C4211D;
  padding: .38rem .75rem; border-radius: 999px;
  transition: background .14s, color .14s, border-color .14s;
}
body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) a[href$="index.html"]:hover {
  background: var(--red); border-color: var(--red); color: #fff;
}
html[data-brand="artisane"] body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) a[href$="index.html"] {
  border-color: #AED0E4; color: #2F6A93;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE ET TABLETTE — topbar « atelier » (production.html : rôle +
   cartonnettes + user + déconnexion). Trop d'éléments à 375px → on compacte
   et on évite tout débordement (le bouton Déconnexion était coupé à droite).

   BORNE PORTÉE DE 640 À 1024 px (27/08/2026). Les trois blocs qui suivent
   composent la mise en page validée par Antonien sur téléphone — burger à
   gauche, mascotte centrée, « ← Tableau de bord » épinglé à droite, TITRE EN
   BANDEAU AMBRE pleine largeur, sous-titre dessous. Elle était réservée au
   téléphone ; sur tablette portrait (800 px) les pages retombaient sur la
   disposition bureau, d'où l'incohérence signalée. 1024 px couvre la tablette
   portrait ; en paysage (1280 px) la disposition bureau reste la bonne, il y
   a la place.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .topbar { row-gap: .45rem !important; column-gap: .4rem !important; padding-left: 10px !important; padding-right: 10px !important; }
  /* le rôle (ATELIER ÉTIQUETAGE) : pastille compacte, pleine largeur si besoin */
  .topbar-role {
    font-size: .66rem !important; letter-spacing: .04em !important;
    padding: .28rem .6rem !important; order: 3; flex-basis: 100%;
    text-align: center;
  }
  /* la zone actions : reste sur une ligne, tout tient, rien n'est coupé */
  .topbar-info {
    order: 4; flex-basis: 100%; width: 100%;
    display: flex !important; flex-wrap: nowrap !important;
    align-items: center; justify-content: space-between;
    gap: .35rem !important; min-width: 0;
  }
  .topbar-info .topbar-logout,
  .topbar-info > a.topbar-logout {
    padding: .42rem .5rem !important; font-size: .68rem !important;
    white-space: nowrap; flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis;
  }
  /* le lien Cartonnettes : on garde, mais compact (pas de retour à la ligne) */
  #cartonnettesLink { max-width: 42vw; }
  /* le cartouche user au milieu peut rétrécir */
  .topbar-info .topbar-user { font-size: .72rem !important; max-width: 30vw; overflow: hidden; text-overflow: ellipsis; }
  /* Dashboard : garde-le compact en haut */
  #dashboardLink { padding: .4rem .6rem !important; font-size: .68rem !important; }
}

/* Mobile : topbars « atelier » (rôle affiché). Le burger (fixe) tient le coin
   haut-gauche. Plutôt qu'une gouttière de 54px qui décalait TOUT le contenu
   vers la droite (logo « flottant » après le burger, rôle/actions poussés),
   on laisse le burger tenir la gauche, on CENTRE le logo Rocky's sur la 1ʳᵉ
   ligne, et « ← Dashboard » est épinglé en haut à droite (hors flux → ne
   décentre pas le logo). La topbar est sticky = bloc de référence pour l'absolu. */
@media (max-width: 1024px) {
  .topbar:has(.topbar-role) { padding-left: 10px !important; }
  /* min-height 40 = la hauteur de la pastille « ← Tableau de bord »
     epinglee a droite (elle porte min-height:40px). Sans cela la 1re ligne
     ne faisait que 30 px (la mascotte) et la pastille debordait de 3 px sur
     le bandeau « ATELIER ETIQUETAGE » juste dessous. */
  .topbar:has(.topbar-role) .topbar-logo {
    margin: 0 auto !important; min-height: 40px;
    display: flex; align-items: center;
  }
  .topbar:has(.topbar-role) #dashboardLink {
    position: absolute !important; top: var(--rk-haut) !important; right: 10px !important;
    margin: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — topbars « simples » (~40 pages : ← Dashboard + <h1> titre +
   sous-titre). Avant : le burger fixe recouvrait « Dashboard », titre et
   sous-titre s'écrasaient sur une seule ligne. On applique LE MÊME modèle
   que l'atelier étiquetage :
     · burger fixe à gauche · mascotte Rocky's centrée · Dashboard en haut à
       droite · titre en bandeau pleine largeur · sous-titre dessous.
   Cible : toute topbar qui n'est ni « atelier » (.topbar-role) ni « REG »
   (.brandsw). On force sticky = bloc de référence pour le Dashboard absolu
   (et un en-tête qui reste accessible au scroll). ═══════════════════════ */
@media (max-width: 1024px) {
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) {
    position: sticky !important; top: 0 !important; z-index: 40 !important;
    /* display:flex indispensable : les pages converties (ex. dimona) ne
       déclaraient aucun style .topbar → elle restait en block et la mise en
       page (mascotte centrée + bandeau pleine largeur) tombait à plat. */
    display: flex !important; align-items: center !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    /* safe-area : c'est LA règle gagnante sur toutes les pages qui utilisent la
       topbar mobile d'admin-nav (mascotte centrée + bandeau orange). Le raccourci
       « padding » écrasait l'inset iOS posé plus haut → on l'éclate par côté. */
    padding-top: var(--rk-haut) !important;
    padding-right: 12px !important; padding-bottom: 16px !important; padding-left: 12px !important;
    row-gap: .3rem !important; column-gap: .4rem !important;
  }
  /* mascotte Rocky's centrée sur la 1ʳᵉ ligne (le burger fixe tient la gauche) */
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo))::before {
    /* min-height 44 : la pastille « ← Tableau de bord » epinglee monte jusqu'a
       44 px de haut sur certaines pages (dispatch : c'est un `.btn` de la
       page). Si la 1re ligne est plus basse qu'elle, la pastille deborde sur
       la 2e et recouvre le bandeau. La 1re ligne prend donc la hauteur de la
       pastille — l'image, elle, garde ses 30 px. */
    content: ""; width: 30px; min-height: 44px; flex: none; margin: 0 auto; order: 0;
    background: url("/images/logos/rockys-personnage-red.png") center no-repeat;
    background-size: auto 30px;
  }
  /* En contexte L'Artisane, c'est le sticker de la marque qui doit etre au
     centre, pas la mascotte Rocky's. Le sticker est en 600x264 : un carre de
     30px l'ecraserait, on lui donne sa largeur. */
  html[data-brand="artisane"] body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo))::before,
  body:has(#rk-admin-nav-root) html[data-brand="artisane"] .topbar::before {
    width: 68px !important;
    background-image: url("/images/logos/lartisane-sticker.png") !important;
  }
  /* NB : `:has()` ne peut PAS etre imbrique dans un autre `:has()` — le
     navigateur jette alors la regle ENTIERE, sans rien dire. La premiere
     version ecrivait `:has(> a:has(img))` : invalide, donc sans effet.
     On teste le descendant directement : `:has(> a > img)`.
     Une barre qui porte DEJA un logo (export-odoo : le mot-symbole Rocky's)
     n'a pas besoin de la mascotte en plus : les deux se disputaient la 1re
     ligne et la pastille « Tableau de bord » passait sur le mot-symbole.
     Dans ce cas le logo EST l'element centre. */
body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)):has(> a > img)::before,
body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)):has(> img)::before { content: none !important; }
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) > a:has(img),
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) > img {
    order: 0 !important; flex: 0 0 auto !important; margin: 0 auto !important;
  }
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) > a:has(img) img,
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) > img { height: 26px !important; width: auto !important; }

  /* ... et quand un logo occupe le centre, la pastille « Tableau de bord »
     ne peut plus etre epinglee en haut a droite : le mot-symbole passe
     dessous (export-odoo). Elle prend sa propre ligne. */
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)):has(> a > img) > a[href$="index.html"]:not(:has(img)),
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)):has(> img) > a[href$="index.html"]:not(:has(img)),
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)):has(> img) > a.btn,
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)):has(> img) > .btn {
    position: static !important; order: 7 !important;
    flex: 0 0 auto !important; margin: .25rem auto 0 !important;
  }

  /* Dashboard : cartouche blanc épinglé en haut à droite (hors flux) */
  /* `a[href$="index.html"]` attrape AUSSI le lien-logo « ../index.html »
     (export-odoo) : le mot-symbole se retrouvait epingle au meme endroit
     que la pastille, l'un sur l'autre. On exclut les liens qui portent
     une image. */
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) a[href$="index.html"]:not(:has(img)):not(:has(svg)) {
    position: absolute !important; top: var(--rk-haut) !important; right: 10px !important; margin: 0 !important;
    background: #fff !important; border: 1.5px solid #F0AFA7 !important; color: #C4211D !important;
    padding: .34rem .62rem !important; border-radius: 999px !important;
    font-size: .72rem !important; font-weight: 700 !important;
  }
  /* Titre : BANDEAU ORANGE pleine largeur (comme « ATELIER ÉTIQUETAGE ») */
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) h1 {
    flex-basis: 100% !important; width: 100% !important; text-align: center !important;
    display: block !important;  /* certaines pages ont h1{display:flex} → casse le centrage du bandeau */
    order: 5 !important; margin: 0 !important;
    /* --rk-bandeau, PAS --gold : dispatch.html redefinit `--gold: #C8956C`
       pour ses creneaux d'apres-midi, et le bandeau du titre en heritait —
       il sortait beige au lieu de l'ambre de la charte. Une variable qui
       n'appartient qu'a harmonie ne peut pas etre detournee par accident. */
    background: var(--rk-bandeau, #E08A1E) !important; color: #1C1A17 !important;
    padding: .42rem 1rem !important; border-radius: 4px !important;
    font-size: .82rem !important; font-weight: 900 !important;
    letter-spacing: .08em !important; text-transform: uppercase !important;
    line-height: 1.25 !important;
  }
  /* Beaucoup de pages enveloppent le titre : <div style="flex:1"><h1>…</h1>
     <div class="sub">…</div></div>. Le `flex-basis:100%` posé sur le <h1>
     ci-dessus ne sert alors à RIEN : l'élément de flex, c'est l'enveloppe.
     Le bandeau restait donc sur la 1ʳᵉ ligne, à côté de la mascotte, et la
     pastille « ← Tableau de bord » épinglée à droite lui passait dessus
     (titre coupé — constaté sur prep-reg, petrins-boules, cuisson-fonds…).
     On donne donc sa ligne à l'enveloppe, et le bandeau retrouve la sienne. */
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) > div:has(> h1) {
    flex-basis: 100% !important; width: 100% !important; min-width: 0 !important;
    order: 5 !important; margin: 0 !important; text-align: center !important;
  }
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) > div:has(> h1) > .sub,
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) > div:has(> h1) > div {
    text-align: center !important; font-size: .72rem !important; margin-top: .18rem !important;
  }

  /* Sous-titre + éventuels autres <span> : pleine largeur, petit, centré */
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) > span {
    flex-basis: 100% !important; width: 100% !important; text-align: center !important;
    order: 6 !important; font-size: .72rem !important;
  }
  /* ── Ce qui descend sous le titre, et comment ────────────────────────
     La 1re ligne ne porte que la mascotte et la pastille « ← Tableau de
     bord » epinglee a droite. Tout le reste descend (order 8).

     ATTENTION au piege qui a coute une passe ici : la liste de selecteurs
     des CHAMPS se terminait par une virgule et le commentaire du bloc
     suivant s'intercalait — les quatre selecteurs se sont retrouves
     FUSIONNES avec la regle des groupes. Champs et boutons heritaient donc
     de `flex: 1 1 100%` : sur coffre-contrats chaque bouton prenait sa
     propre rangee et la barre montait a 423 px, la moitie d'un ecran.
     Trois regles distinctes, dans cet ordre — decor, puis groupes (qui doit
     GAGNER, meme specificite donc c'est le rang qui tranche), puis champs.

     1. Le decor (la pastille « A » de garnissage-clients) garde sa taille. */
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) > div:not(:has(> h1)):not(:empty) {
    order: 8 !important; flex: 0 0 auto !important; margin: .1rem auto 0 !important;
  }

  /* 2. Un GROUPE DE COMMANDES (onglets « Pizzas / Pâtes / Sauces », segment
        de vue…) prend une rangee entiere : il etait coupe par le champ date
        a cote. On le reconnait a ce qu'il CONTIENT. */
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) > div:not(:has(> h1)):has(button),
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) > div:not(:has(> h1)):has(a),
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) > div:not(:has(> h1)):has(input),
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) > div:not(:has(> h1)):has(select) {
    order: 8 !important; flex: 1 1 100% !important; min-width: 0 !important;
    margin-top: .1rem !important; justify-content: center !important;
  }

  /* 3. Les champs et boutons isoles se PARTAGENT leur rangee : deux tiennent
        cote a cote, et un bouton seul reste pleine largeur. */
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) > input,
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) > select,
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) > button,
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) > label {
    order: 8 !important; flex: 1 1 8rem !important; min-width: 0 !important;
    margin-top: .1rem !important;
  }

body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) > .brand-chip {
    /* la regle « > span » ci-dessus l'etirait sur toute la largeur : la
       pastille rouge « Rocky's » ressemblait alors a un bandeau d'alerte.
       Elle reste sur sa ligne, mais a sa taille, centree. */
    flex: 0 0 auto !important; width: auto !important; max-width: 90% !important;
    margin: .05rem auto !important; padding: .16rem .6rem !important;
    font-size: .64rem !important;
  }

  /* liens secondaires (ex. « Voir feuille ») : sous le titre, pleine largeur */
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) > a:not([href$="index.html"]) {
    /* Les liens secondaires se PARTAGENT leur rangee au lieu d'en prendre
       chacun une : sur coffre-contrats (« ZIP semaine », « Imprimer »,
       « Acces inspection ») la barre faisait 423 px de haut, la moitie d'un
       ecran de telephone. A 9rem de base, deux tiennent cote a cote et un
       seul reste pleine largeur. */
    order: 7 !important; flex: 1 1 9rem !important; min-width: 0 !important;
    text-align: center !important; font-size: .74rem !important;
  }
}

/* =====================================================================
   SAFE-AREA iOS — BAS D'ÉCRAN (barre d'action, feuilles, toasts)
   ---------------------------------------------------------------------
   Le commit 3a2285e a traité le HAUT de l'espace client. Le même défaut
   existait en BAS : sur iPhone à encoche (PWA plein écran, viewport-fit=cover),
   la barre d'indicateur « home » recouvre le dernier ~34px de l'écran →
   boutons Valider / Enregistrer partiellement inaccessibles.
   env(safe-area-inset-bottom) vaut 0 hors encoche → AUCUN changement visuel
   en navigateur, sur desktop, ni sur un téléphone sans encoche.
   ===================================================================== */
.bottom-bar, .action-bar, .sheet, .modal.show, .rk-bottombar,
.sheet-overlay > .sheet, .bottombar, .fixed-bottom {
  padding-bottom: max(var(--hz-bb, 0.8rem), env(safe-area-inset-bottom));
}
/* Feuilles ancrées en bas (bottom sheets) : seulement en mode « collé en bas ».
   Au-dessus de 600px elles repassent en modale centrée → pas d'inset à ajouter. */
@media (max-width: 599px) {
  .modal, .sheet {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* =====================================================================
   BOUTON « Installer l'app » (js/install-pwa.js) — couleur de MARQUE
   Le script code un rouge en dur (#D62828) : hors charte (le rouge Rocky's
   est #E42A29) et il restait ROUGE en contexte L'Artisane. On repasse par
   var(--red) → rouge Rocky's / bleu acier L'Artisane, automatiquement.
   ===================================================================== */
#rkInstallBtn, .rk-install-btn, [id*="installBtn"], [class*="install-pill"] {
  background: var(--red) !important;
}

/* =====================================================================
   TOPBAR — anti-débordement du bloc de droite (déconnexion / NL / compte)
   Constaté à 375px sur equipe/home (« DÉCONNEXION » coupé au bord droit) et
   client/index (nom d'utilisateur tronqué qui pousse les boutons hors écran).
   Règle : le NOM se tronque, les BOUTONS gardent leur taille et restent dans
   l'écran. Aucun effet au-dessus de 640px.
   ===================================================================== */
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; column-gap: .4rem !important; }
  /* le bloc identité peut rétrécir/tronquer… */
  .topbar .hello, .topbar .user, .topbar #userInfo, .topbar .topbar-user,
  .topbar .greet, .topbar .whoami {
    min-width: 0 !important; flex: 1 1 auto !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* …les actions, jamais : elles restent entières et cliquables (≥ 40px) */
  .topbar .logout, .topbar .topbar-logout, .topbar a.logout,
  .topbar .lang, .topbar .profil-btn, .topbar .btn-lang {
    flex: 0 0 auto !important;
    white-space: nowrap;
    padding: .45rem .6rem !important;
    font-size: .78rem !important;
    min-height: 40px; display: inline-flex; align-items: center;
  }
}

/* =====================================================================
   POLICE — widgets injectés par JS hors charte
   js/install-pwa.js et js/chat-widget.js codent « Inter » en dur (police
   NON charte : la charte, c'est Humanist 521 en display + Epilogue en texte).
   Ces fichiers ne sont pas dans le périmètre UI → on rattrape en CSS.
   ===================================================================== */
[class*="pwa-"], [id*="pwa"], [id*="Pwa"], [id*="install"], [class*="install-"],
[class*="chat-widget"], #chatWidget, #chat-widget, #chatWidget * {
  font-family: 'Epilogue', -apple-system, sans-serif !important;
}

/* =====================================================================
   TOPBAR — bouton « Déconnexion » hérité des anciens en-têtes SOMBRES
   ---------------------------------------------------------------------
   equipe/home.html et admin/artisane/index.html stylent « .topbar .logout »
   en blanc translucide (color: rgba(255,255,255,.7) + bordure blanche) :
   c'était lisible sur l'ancien header noir, c'est quasi INVISIBLE sur la
   topbar étiquette rose (contraste ~1.4:1). Même correctif que pour .rk-back :
   cartouche BLANC à liseré, encre de marque → lisible sur rose ET sur bleu.
   ===================================================================== */
.topbar .logout,
.topbar button.logout,
.topbar a.logout {
  background: #fff !important;
  color: var(--red-dark, #C4211D) !important;
  border: 1.5px solid #F0AFA7 !important;
  border-radius: var(--hz-r-sm) !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;      /* « DÉCONNEXION » en capitales = trop large à 375px */
  box-shadow: 0 2px 8px -5px rgba(196,33,29,.45) !important;
}
.topbar .logout:hover, .topbar button.logout:hover, .topbar a.logout:hover {
  background: var(--red) !important; border-color: var(--red) !important; color: #fff !important;
}
html[data-brand="artisane"] .topbar .logout,
html[data-brand="artisane"] .topbar button.logout,
html[data-brand="artisane"] .topbar a.logout { border-color: #AED0E4 !important; }

/* Mobile : l'identité se tronque pour que le bouton reste sur la MÊME ligne
   (il tombait à la ligne, seul et désaligné, sous « Bonjour … »). */
@media (max-width: 640px) {
  .topbar .hello { max-width: 46vw !important; flex: 0 1 auto !important; }
  .topbar .logout, .topbar button.logout, .topbar a.logout { margin-left: auto !important; }
}

/* =====================================================================
   PAGES « PORTE D'ENTRÉE » — connexion, activation, mot de passe
   ---------------------------------------------------------------------
   Ces 7 pages étaient sur fond NOIR (var(--dark), parfois un dégradé sombre
   sur hero.jpg). C'est la toute première image de la marque pour un client
   ou un nouvel ouvrier, et le noir n'est PAS dans le brand guide (rouge 485C,
   rose 698C, crème, charcoal). On les repasse sur la recette maison :
   fond CRÈME + bandeau ÉTIQUETTE rose (mascotte centrée + damier), comme la
   topbar de toutes les autres pages.

   Activation : ajouter la classe « rk-gate » sur le <body> de la page.
   ===================================================================== */
body.rk-gate {
  background: var(--light) !important;      /* crème app (#F6F4F0) au lieu du noir */
  background-image: none !important;
  color: var(--dark);
}

/* Le bandeau étiquette : rose + mascotte au trait centrée + damier en bas.
   position:fixed → il ne perturbe pas le centrage flex de la carte. */
body.rk-gate::before {
  content: "";
  position: fixed; top: 0; left: 0; right: 0;
  height: calc(58px + env(safe-area-inset-top));
  background:
    url("/images/logos/rockys-personnage-red.png")
      center calc(11px + env(safe-area-inset-top)) / auto 30px no-repeat,
    conic-gradient(var(--red) 90deg, #FCE2E3 0 180deg, var(--red) 0 270deg, #FCE2E3 0)
      left bottom / 14px 14px repeat-x,
    #FCE2E3;
  box-shadow: 0 2px 14px -8px rgba(196,33,29,.22);
  z-index: 5; pointer-events: none;
}

/* On dégage la hauteur du bandeau sur le conteneur QUI CENTRE la carte :
   soit un .wrap / .login-wrap dédié, soit le <body> lui-même. */
body.rk-gate .wrap,
body.rk-gate .login-wrap { padding-top: calc(80px + env(safe-area-inset-top)) !important; }
body.rk-gate:not(:has(.wrap)):not(:has(.login-wrap)) { padding-top: calc(80px + env(safe-area-inset-top)) !important; }

/* Fonds sombres hérités (dégradé noir posé sur hero.jpg) : neutralisés. */
body.rk-gate .wrap,
body.rk-gate .login-wrap {
  background: transparent !important;
  background-image: none !important;
}

/* La carte : blanche sur crème → ombre DOUCE (l'ancienne était calculée pour
   ressortir sur du noir : rgba(0,0,0,.4) à 60px, beaucoup trop lourde ici). */
body.rk-gate .card,
body.rk-gate .login-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--hz-r) !important;
  box-shadow: 0 1px 2px rgba(30,26,20,.05), 0 18px 40px -22px rgba(30,26,20,.35) !important;
}
/* calendar.html : filet rouge en haut de carte -> couleur de marque */
body.rk-gate .login-card { border-top: 4px solid var(--red) !important; }

/* Titres de ces pages : encre étiquette, comme les titres de topbar. */
body.rk-gate .card h1,
body.rk-gate .login-card h1 { color: var(--red-dark, #C4211D); }

/* L'Artisane : le bandeau passe au bleu poudré (client/activer peut être
   ouvert en contexte Artisane via ?brand=artisane). */
html[data-brand="artisane"] body.rk-gate::before {
  background:
    conic-gradient(#7BA8C7 90deg, #E3F1F8 0 180deg, #7BA8C7 0 270deg, #E3F1F8 0)
      left bottom / 14px 14px repeat-x,
    #E3F1F8;
  box-shadow: 0 2px 14px -8px rgba(47,106,147,.28);
}

/* admin/calendar.html sert DEUX écrans dans la même page : la connexion, puis
   l'app (qui a sa propre topbar). Le bandeau « porte d'entrée » ne doit donc
   vivre que tant que l'écran de connexion est affiché — sinon il se superpose
   à la topbar de l'app une fois connecté. */
body.rk-gate:has(.login-wrap[style*="display: none"])::before,
body.rk-gate:has(.login-wrap[style*="display:none"])::before { content: none; }
body.rk-gate:has(.login-wrap[style*="display: none"]),
body.rk-gate:has(.login-wrap[style*="display:none"]) { padding-top: 0 !important; }

/* Le bandeau porte déjà la mascotte : on retire celle répétée DANS la carte
   (client/activer + equipe/activer affichaient deux fois le même personnage). */
body.rk-gate .card > img.logo { display: none !important; }

/* =====================================================================
   TOPBAR — bloc d'ACTIONS à droite (.tb-actions) + bouton pilule (.tb-btn)
   ---------------------------------------------------------------------
   Constat sur iPhone (equipe/home) : « Mon compte » était un simple lien
   texte — rien ne disait que c'était cliquable — et « Déconnexion » tombait
   SEULE sur une deuxième ligne, décalée. Résultat bancal.
   Ici les deux actions vivent dans un bloc : même gabarit, même style, elles
   restent côte à côte et, si ça déborde, elles passent à la ligne ENSEMBLE.
   Réutilisable sur n'importe quelle topbar.
   ===================================================================== */
.topbar .tb-actions {
  display: flex; align-items: center; gap: .4rem;
  margin-left: auto; flex: 0 0 auto;
}
.topbar .tb-btn,
.topbar .tb-actions .logout {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 40px; padding: 0 .8rem;
  background: #fff;
  color: var(--red-dark, #C4211D);
  border: 1.5px solid #F0AFA7;
  border-radius: var(--hz-r-sm);
  font: inherit; font-size: .82rem; font-weight: 700;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 2px 8px -5px rgba(196,33,29,.45);
  transition: background .15s, color .15s, border-color .15s;
}
.topbar .tb-btn svg { width: 16px; height: 16px; flex: none; }
.topbar .tb-btn:hover,
.topbar .tb-actions .logout:hover {
  background: var(--red) !important; border-color: var(--red) !important; color: #fff !important;
}
/* mascotte de gauche : même gabarit que l'espace client */
.topbar .tb-mascotte { height: 30px; width: auto; flex: none; }

/* L'Artisane : liseré bleu poudré */
html[data-brand="artisane"] .topbar .tb-btn,
html[data-brand="artisane"] .topbar .tb-actions .logout { border-color: #AED0E4 !important; }

@media (max-width: 640px) {
  /* le prénom se tronque : les deux boutons gardent leur taille et tiennent
     sur la MÊME ligne que la salutation */
  .topbar .hello { font-size: .88rem !important; max-width: 40vw !important; }
  .topbar .tb-btn, .topbar .tb-actions .logout { padding: 0 .65rem; font-size: .78rem; }
}
/* Écran étroit : ce sont les BOUTONS qui comptent, pas la salutation.
   On sacrifie donc le NOM de famille (puis la mascotte) pour que « Mon compte »
   et « Déconnexion » gardent tous les deux leur libellé sur une seule ligne. */
@media (max-width: 560px) {
  .topbar .hello .ln { display: none; }
}
@media (max-width: 400px) {
  .topbar .tb-mascotte { display: none; }
  .topbar .tb-btn, .topbar .tb-actions .logout { padding: 0 .55rem; font-size: .75rem; }
}
@media (max-width: 380px) {
  /* iPhone SE / mini : dernier resserrage pour que tout tienne sur UNE ligne */
  .topbar .hello { font-size: .8rem !important; }
  .topbar .tb-btn, .topbar .tb-actions .logout { padding: 0 .45rem; font-size: .72rem; gap: .3rem; }
  .topbar .tb-btn svg { width: 14px; height: 14px; }
}

/* =====================================================================
   BANDEAU « Voir en tant que » (js/impersonation-banner.js)
   ---------------------------------------------------------------------
   Signalé sur iPhone : impossible de revenir à son compte. Le bandeau était
   en position:fixed top:0 avec un simple padding de 8px et AUCUNE compensation
   d'encoche → le bouton « Revenir à mon compte » commençait à 26px du haut,
   sa moitié supérieure tombait dans la barre d'état / la Dynamic Island, où
   iOS capte le geste avant la page. L'admin restait piégé dans le compte
   consulté.
   Ici : safe-area, cible tactile >= 44px, couleurs de marque (le rouge était
   codé en dur → il restait rouge côté L'Artisane), typo Epilogue, et sur
   mobile le bouton passe pleine largeur sur sa propre ligne.
   ===================================================================== */
.rk-imp {
  position: fixed; top: 0; left: 0; right: 0; z-index: 99999;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  background: var(--red, #E42A29); color: #fff;
  font-family: 'Epilogue', -apple-system, sans-serif;
  font-size: .86rem; font-weight: 800;
  padding-top: calc(var(--rk-haut) + .2rem);
  padding-bottom: .5rem;
  padding-left: max(.9rem, env(safe-area-inset-left));
  padding-right: max(.9rem, env(safe-area-inset-right));
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
}
.rk-imp .rk-imp-label { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .5rem; }
.rk-imp .rk-imp-tag {
  flex: none; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px; padding: .12rem .5rem;
  font-size: .66rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.rk-imp .rk-imp-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-imp .rk-imp-back {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  /* !important : la règle générique « button:not(.btn){min-height:40px} » plus
     haut dans ce fichier a une spécificité supérieure (les :not comptent). */
  min-height: 44px !important; padding: 0 .9rem;   /* cible tactile confortable */
  background: #fff; color: var(--red-dark, #C4211D);
  border: none; border-radius: var(--hz-r-sm);
  font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.rk-imp .rk-imp-back svg { width: 16px; height: 16px; flex: none; }
.rk-imp .rk-imp-back:disabled { opacity: .7; cursor: progress; }

@media (max-width: 640px) {
  /* le bouton descend sur sa propre ligne et prend toute la largeur : il est
     alors LOIN de l'encoche et impossible à rater au pouce */
  .rk-imp { gap: .45rem; font-size: .8rem; }
  .rk-imp .rk-imp-label { flex: 1 1 100%; }
  .rk-imp .rk-imp-back { flex: 1 1 100%; width: 100%; }
}

/* La topbar collante de la page doit s'arrêter SOUS le bandeau, sinon elle
   glisse derrière lui au défilement. --rk-imp-h est posée par le script. */
body:has(.rk-imp) .topbar { top: var(--rk-imp-h, 0px) !important; }

/* Et surtout : la topbar n'est PLUS contre le bord haut de l'écran (le bandeau
   est passé devant), donc elle ne doit pas réserver l'encoche une SECONDE fois.
   Sans ça, la barre passait de 64 à 101px et tout l'écran descendait — c'est ce
   qui donnait « l'écran est trop haut » en consultation. */
body:has(.rk-imp) .topbar { padding-top: 10px !important; }
@media (max-width: 640px) {
  body:has(.rk-imp) .topbar { padding-top: 8px !important; }
}

/* ============================================================
   TABLETTE — ecran tactile large
   ------------------------------------------------------------
   Cible : les tablettes Android des postes de production, affichees en
   kiosque via Managed Google Play (cf. js/kiosk.js). `pointer: coarse`
   distingue un doigt d'une souris, et la borne a 700 px evite d'attraper
   les telephones, qui ont deja leurs regles.

   Le probleme mesure avant cette regle : 22 elements interactifs sous 36 px
   de haut sur le hub Artisane, 26 sur le REG-PROD-01. A l'atelier, souvent
   avec des gants, c'est infrappable. La reference est 44 px (Apple HIG) /
   48 dp (Material).

   On ne touche PAS a la hauteur de la topbar : mesuree a 57-61 px, elle est
   deja juste. On l'empeche seulement de se casser en plusieurs lignes.
   ============================================================ */
@media (pointer: coarse) and (min-width: 700px) {

  /* --- 1. cibles tactiles --- */
  /* `.pill` n'est PAS visee telle quelle : la meme classe sert de badge
     d'affichage (numero de lot, statut) qu'on ne tape jamais. Lui imposer
     44 px alors qu'elle n'a que 1,6 px de marge interieure verticale la
     transformait en ELLIPSE — son border-radius de 999px s'appliquant a une
     boite a peine plus large que haute. Vu sur stock-pizzas.html, badge de
     lot « 233-26 » : boite 55x44 pour un texte de 15 px.
     On ne vise donc que les pilules reellement actionnables. */
  .topbar a, .topbar button,
  .btn, .btn-sm, button, [role="tab"], .chip, .tab,
  a.pill, button.pill, label.pill, .pill[onclick], .pill[tabindex],
  select, input[type="text"], input[type="search"], input[type="date"],
  input[type="number"], input[type="tel"], input[type="email"] {
    min-height: 44px;
  }
  /* la sidebar du dashboard et le tiroir du burger : mesures a 34 px */
  .sidebar a, .rk-drawer a, .nav-link { min-height: 44px; display: flex; align-items: center; }
  /* les boutons-icones doivent aussi etre carres, pas juste hauts */
  .btn-icon, .icon-btn, .copy-btn, [class*="btn-ico"] { min-width: 44px; }
  /* de l'air entre deux cibles voisines, sinon on en frappe deux a la fois */
  .btn + .btn, button + button, .chip + .chip { margin-left: .35rem; }

  /* --- 2. la topbar garde sa hauteur mais tient sur UNE ligne --- */
  .topbar { flex-wrap: nowrap !important; }
  .topbar h1, .topbar .title, .topbar strong {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  /* Le burger d'admin-nav est fixe en haut a gauche : sans cette reserve il
     se pose SUR le bouton de retour des pages qui en ont un. */
  /* Le burger n'existe que sous 900 px (admin-nav.js le masque au-dela).
     Sans cette borne, une tablette en PAYSAGE (1280 px, tactile donc
     `coarse`) reservait 3.9rem pour un bouton absent : 62 px de vide a
     gauche, et le titre de coffre-contrats passait sous la pastille
     « ← Retour ». */
  @media (max-width: 900px) {
    body.rk-burger-on .topbar { padding-left: 3.9rem !important; }
  }
  /* meme gabarit de doigt que les autres commandes, et carre */
  .rk-burger { width: 44px !important; height: 44px !important; }

  /* --- 3. lisibilite a bout de bras --- */
  body { font-size: 16px; }
  table td, table th { padding-top: .55rem; padding-bottom: .55rem; }

  /* --- 4. TABLETTE : la topbar empilee ne doit pas manger l'ecran ---
     Sur telephone chaque lien secondaire prend sa propre ligne : c'est bon
     pour le pouce. En tablette portrait il y a la largeur, et empiler faisait
     grimper la barre a 188 px sur produits.html (15 % de l'ecran). Ils se
     rangent donc cote a cote a partir de 641 px. */
  /* Meme selecteur que la regle telephone, sinon ses trois :not(:has())
     lui donnent une specificite superieure et l'ordre ne suffit pas. */
  @media (min-width: 641px) {
    body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) > a:not([href$="index.html"]) {
      flex: 1 1 auto !important; min-width: 8rem;
    }
    body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) h1 {
      padding-top: .3rem !important; padding-bottom: .3rem !important;
    }
  }

  /* --- 5. pas de survol sur un ecran tactile : l'etat actif doit se voir --- */
  .btn:active, button:active, .chip:active { filter: brightness(.94); }
}

/* ═══════════════════════════════════════════════════════════════════
   FILET DE SECURITE — les pages SANS topbar
   Les pages d'impression (stock/print-po, stock/print-lot) et quelques
   ecrans de reglages posent leurs boutons directement en haut du <body> :
   « Imprimer » demarrait a 10 px, donc sous la barre d'etat Android en
   plein ecran. Elles n'ont pas de .topbar, aucune des regles ci-dessus ne
   les protegeait. On decale donc le corps entier du plancher.
   harmonie.css n'est chargee QUE sur admin/ client/ connexion/ equipe/
   livreur/ stock/ — la vitrine publique n'est pas touchee.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px), (pointer: coarse) {
  body:not(:has(.topbar)):not(:has(.rk-gate)) { padding-top: var(--rk-haut); }
  /* Et le plancher vaut pour TOUTE barre du haut, y compris celles qui posent
     leur propre padding (coffre-contrats : `.top { padding: 12px }`, donc des
     boutons a 12 px du bord sur une tablette en paysage). Les regles plus
     specifiques ci-dessus (reserve pour la pastille « Retour ») gagnent
     toujours sur celle-ci. */
  .topbar { padding-top: var(--rk-haut) !important; }
}
/* a l'impression, ce decalage n'a plus de sens (et decalerait la 1re page) */
@media print { body { padding-top: 0 !important; } }

/* Rappel de fin de fichier. Attention : ce n'est PAS l'ordre qui tranche ici.
   La règle téléphone porte `body:has(#rk-admin-nav-root)` — un :has() prend la
   spécificité de son argument, donc celle d'un IDENTIFIANT (1,4,2). Un simple
   `body:has(.rk-back) .topbar` (0,2,1) perdait quel que soit son rang dans le
   fichier, et la pastille restait posée sur la mascotte. On reprend donc le
   sélecteur entier. Le cas sans topbar (catalogue, achats, print-price-lists)
   se règle sur le <body> : la pastille y flotte au-dessus du contenu. */
@media (max-width: 1024px) {
  body:has(.rk-back) .topbar,
  body:has(#rk-admin-nav-root):has(.rk-back) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) {
    padding-top: calc(var(--rk-haut) + 46px) !important;
  }
  body:not(:has(.topbar)):not(:has(.rk-gate)):has(.rk-back) {
    padding-top: calc(var(--rk-haut) + 46px);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   TIROIR DES TABLEAUX DE BORD — la barre du haut ne doit pas flotter dessus
   -------------------------------------------------------------------
   Signale par Antonino le 29/08 : menu ouvert sur /admin/index.html, la
   barre rose (burger, switcher, nom, deconnexion, damier) se retrouvait
   PLANTEE AU MILIEU de l'ecran, par-dessus le menu.

   Deux causes qui se cumulent :

   1. Les tableaux de bord empilent leur tiroir SOUS la barre du haut
      (fond a z-index 50, tiroir 60, barre 100), alors que le tiroir des
      pages modules — celui qu'Antonino a valide — passe AU-DESSUS
      (fond 200, tiroir 201). D'ou la barre qui perce le menu.
   2. Ouvrir le tiroir pose `body { overflow: hidden }`. Cela fait du <body>
      un conteneur de defilement, ce qui CASSE `position: sticky` : la barre
      cesse de coller au haut et se replace a sa position de flux, decalee du
      defilement en cours. Au milieu de l'ecran chez Antonino, hors ecran
      chez moi — selon l'endroit ou la page etait descendue.

   On corrige les deux : meme empilement que les pages modules, et la barre
   est explicitement fixee en haut tant que le tiroir est ouvert.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .sidebar-backdrop { z-index: 200 !important; }
  body:has(.sidebar-backdrop) .sidebar {
    top: 0 !important; z-index: 201 !important;
  }
  /* Le meme `body { overflow: hidden }` casse aussi position:sticky sur les
     PAGES MODULES (barre mesuree a -400 px du haut, tiroir ouvert). Ca ne s'y
     voyait pas : leur tiroir et leur voile passent au-dessus de la barre, qui
     restait donc cachee. On la fixe quand meme — sinon, selon l'endroit ou la
     page etait descendue, elle reapparait au milieu, derriere le voile. */
  body:has(.sidebar.open) .topbar,
  body:has(.rk-drawer.open) .topbar {
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   TABLETTE EN KIOSQUE — symetrie du haut, et la pastille de marque
   -------------------------------------------------------------------
   Signale par Antonino sur la tablette d'atelier (?kiosk=1), 29/08.

   1. « le bouton retour tableau de bord ici est pas symetrique ».
      Mesure a 620 px : le burger fait 40x40 a 9 px du bord gauche, la
      pastille « ← Tableau de bord » fait 44 px de haut a 10 px du bord
      droit. Deux gabarits differents pour deux boutons qui se font face.
      La regle des cibles tactiles qui passe le burger a 44 px etait bornee
      a `min-width: 700px` — la tablette declare 620 px via son viewport et
      la ratait. Les deux prennent desormais le meme gabarit et la meme
      marge, quelle que soit la largeur, des que l'ecran est tactile.

   2. « le switch rocky's artisane aussi ». Les liens du selecteur de marque
      recevaient `min-height: 44px` (cible tactile) tout en restant en
      `display: block` : le libelle se calait EN HAUT de la pastille bleue
      au lieu d'etre centre, et « Artisane » debordait de son fond. On donne
      la hauteur au CONTENEUR et on centre les libelles — le fond colle de
      nouveau au texte, et la cible reste large.
   ═══════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  .rk-burger { width: 44px !important; height: 44px !important; }
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) a[href$="index.html"]:not(:has(img)):not(:has(svg)),
  .topbar:has(.topbar-role) #dashboardLink {
    /* #dashboardLink : la pastille des barres « atelier » (production.html…),
       qui sont exclues du selecteur ci-dessus. Elle faisait 40 px face a un
       burger de 44. */
    min-height: 44px !important; right: 10px !important;
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important;
  }
  .rk-brandsw, .brandsw { align-items: stretch; min-height: 44px; }
  .rk-brandsw a, .brandsw a {
    display: flex !important; align-items: center !important;
    justify-content: center !important; min-height: 0 !important;
  }
}
