/* ============================================================
   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');

: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;

  --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: 10px !important;
  padding-bottom: 18px !important;                /* 12px damier + respiration */
}
@media (max-width: 640px) {
  .topbar {
    padding-top: 8px !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; } }
@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) */
.topbar a, .topbar strong, .topbar span:not(.topbar-mode):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 ============ */
.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 {
  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 { margin-top: 0 !important; padding-top: .5rem !important; }
/* titre de section teinté comme son icône */
.sidebar h4[data-ic="dash"]    { color: #C4211D !important; }
.sidebar h4[data-ic="vues"]    { color: #2F6BF0 !important; }
.sidebar h4[data-ic="prod"]    { color: #C97508 !important; }
.sidebar h4[data-ic="cata"]    { color: #C0622B !important; }
.sidebar h4[data-ic="clients"] { color: #0E7490 !important; }
.sidebar h4[data-ic="stock"]   { color: #1F9D5A !important; }
.sidebar h4[data-ic="livr"]    { color: #475569 !important; }
.sidebar h4[data-ic="equipe"]  { color: #915FA8 !important; }
/* pastille-icône colorée par domaine */
.sidebar 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"]    { --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"]    { --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"]    { --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"]    { --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"] { --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"]   { --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"]    { --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"]  { --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: 641px) {
  body:has(.rk-back) .topbar { padding-left: 124px !important; }
}
@media (max-width: 640px) {
  body:has(.rk-back) .topbar { padding-top: 52px !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 : 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([class*="badge"]) { color: #2F6A93; }
html[data-brand="artisane"] .topbar .ref { color: #5E9BC0 !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: 8px !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;
  padding-left: max(14px, env(safe-area-inset-left)) !important;
  padding-right: max(14px, env(safe-area-inset-right)) !important;
}
.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;
  padding-top: 12px !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-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; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — 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).
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .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: 640px) {
  .topbar:has(.topbar-role) { padding-left: 10px !important; }
  .topbar:has(.topbar-role) .topbar-logo { margin: 0 auto !important; }
  .topbar:has(.topbar-role) #dashboardLink {
    position: absolute !important; top: 10px !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: 640px) {
  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;
    padding: 10px 12px 16px !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 {
    content: ""; width: 30px; height: 30px; flex: none; margin: 0 auto; order: 0;
    background: url("/images/logos/rockys-personnage-red.png") center/contain no-repeat;
  }
  /* Dashboard : cartouche blanc épinglé en haut à droite (hors flux) */
  body:has(#rk-admin-nav-root) .topbar:not(:has(.topbar-role)):not(:has(.brandsw)):not(:has(.topbar-logo)) a[href$="index.html"] {
    position: absolute !important; top: 8px !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;
    background: var(--gold, #E08A1E) !important; color: var(--dark, #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;
  }
  /* 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;
  }
  /* 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"]) {
    order: 7 !important; flex-basis: 100% !important; text-align: center !important;
    font-size: .74rem !important;
  }
}
