/* =========================================================================
   L'Atelier By — Consultant PWA theme  (WebShop design language, refined)
   Same palette/system as WebShop admin.css, executed with more craft:
   generous rhythm, hairline borders, layered soft shadows, elegant hero,
   tasteful earthy tile tints, tactile motion. Loaded after Mazer's app.css.
   ========================================================================= */

/* ---- Brand fonts -------------------------------------------------------- */
@font-face { font-family:'Gotham'; src:url('../fonts/Gotham_Light.otf') format('opentype');   font-weight:300; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('../fonts/Gotham_Book.otf') format('opentype');    font-weight:400; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('../fonts/Gotham_Regular.otf') format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('../fonts/Gotham_Medium.otf') format('opentype');  font-weight:600; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('../fonts/Gotham_Medium.otf') format('opentype');  font-weight:700; font-display:swap; }
@font-face { font-family:'Vank';   src:url('../fonts/GC_Vank.ttf') format('truetype');         font-weight:400; font-display:swap; }

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --c-primary:#8D1D2C; --c-primary-hover:#731722; --c-primary-soft:#f4dfe2;
  --c-secondary:#F2C9A0; --c-secondary-soft:#f8ead9; --c-on-abricot:#6b4420;
  --c-bg:#EAE4DC; --c-bg-2:#F4EFE8; --c-surface:#FFFFFF;
  --c-ink:#241f1c; --c-muted:#7a7168;
  --c-line:rgba(36,26,22,.09); --c-line-2:rgba(36,26,22,.14);
  --c-ruby:#8D1D2C; --c-encre:#1F4F6B; --c-ambre:#C17A2A; --c-brun:#8a4a24; --c-vert:#2D7A3E; --c-aubergine:#5C4A8A;
  --font-display:'Vank','Gotham',serif; --font-ui:'Gotham',system-ui,-apple-system,sans-serif;
  --r-sm:9px; --r-md:13px; --r-lg:18px; --r-xl:22px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(70,40,25,.05);
  --sh-2:0 1px 3px rgba(70,40,25,.05), 0 8px 22px -14px rgba(70,40,25,.22);
  --sh-3:0 2px 6px rgba(70,40,25,.06), 0 16px 34px -18px rgba(70,40,25,.30);
  --ease:cubic-bezier(.4,0,.2,1);

  --bs-primary:var(--c-primary); --bs-primary-rgb:141,29,44;
  --bs-primary-text-emphasis:#5c131d; --bs-primary-bg-subtle:#f4dfe2; --bs-primary-border-subtle:#dda9b0;
  --bs-link-color:var(--c-primary); --bs-link-color-rgb:141,29,44; --bs-link-hover-color:var(--c-primary-hover);
  --bs-body-font-family:var(--font-ui); --bs-body-color:var(--c-ink); --bs-body-bg:var(--c-bg);
  --bs-border-color:var(--c-line); --bs-secondary-color:var(--c-muted);
  --bs-border-radius:var(--r-md); --bs-border-radius-sm:var(--r-sm); --bs-border-radius-lg:var(--r-lg);
}

/* ---- Base --------------------------------------------------------------- */
body {
  font-family:var(--font-ui); color:var(--c-ink); -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(120% 60% at 100% 0%, #f2ece3 0%, rgba(242,236,227,0) 55%),
    var(--c-bg) !important;
}
h1,h2,h3,h4,h5,.card-title { font-family:var(--font-display); font-weight:400; letter-spacing:.01em; color:var(--c-ink); }
.text-muted,.text-secondary { color:var(--c-muted) !important; }
a { color:var(--c-primary); text-decoration:none; }
a:hover { color:var(--c-primary-hover); }
html, body { overflow-x:clip; }
/* Utilitaire absent de Bootstrap/Mazer mais utilisé par les vues (shop, claim,
   helpdesk) : sans lui, un item flex ne rétrécit pas sous la largeur de son
   texte nowrap → la troncature ne s'applique pas et le bouton de droite est
   poussé hors de la carte sur mobile. */
.min-w-0 { min-width:0 !important; }
.app-content .container { max-width:100% !important; }
.app-content .container, .app-topbar .container { padding-inline:20px; box-sizing:border-box; }

/* ---- Buttons ------------------------------------------------------------ */
.btn { border-radius:var(--r-sm); font-weight:600; letter-spacing:.01em; transition:transform .12s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease); }
.btn:active { transform:translateY(1px); }
.btn-lg,.btn { padding-inline:16px; }
.btn-primary {
  --bs-btn-bg:var(--c-primary); --bs-btn-border-color:var(--c-primary);
  --bs-btn-hover-bg:var(--c-primary-hover); --bs-btn-hover-border-color:var(--c-primary-hover);
  --bs-btn-active-bg:var(--c-primary-hover); --bs-btn-active-border-color:var(--c-primary-hover);
  --bs-btn-disabled-bg:var(--c-primary); --bs-btn-disabled-border-color:var(--c-primary);
  color:#fff; box-shadow:0 6px 16px -8px rgba(141,29,44,.55);
}
.btn-primary:hover { box-shadow:0 8px 20px -8px rgba(141,29,44,.6); }
.btn-outline-primary { --bs-btn-color:var(--c-primary); --bs-btn-border-color:var(--c-primary); --bs-btn-hover-bg:var(--c-primary); --bs-btn-hover-border-color:var(--c-primary); --bs-btn-active-bg:var(--c-primary); }
.btn-outline-secondary { --bs-btn-color:var(--c-muted); --bs-btn-border-color:var(--c-line-2); --bs-btn-hover-bg:var(--c-bg-2); --bs-btn-hover-border-color:var(--c-line-2); --bs-btn-hover-color:var(--c-ink); }
.btn-secondary { --bs-btn-bg:var(--c-secondary); --bs-btn-border-color:var(--c-secondary); --bs-btn-color:var(--c-on-abricot); --bs-btn-hover-bg:#ecbc8c; --bs-btn-hover-border-color:#ecbc8c; --bs-btn-hover-color:var(--c-on-abricot); }
.btn-success { --bs-btn-bg:var(--c-vert); --bs-btn-border-color:var(--c-vert); --bs-btn-hover-bg:#256633; --bs-btn-hover-border-color:#256633; box-shadow:0 6px 16px -9px rgba(45,122,62,.5); }

/* ---- Utilities ---------------------------------------------------------- */
.text-primary{color:var(--c-primary)!important;} .bg-primary{background-color:var(--c-primary)!important;}
.link-primary{color:var(--c-primary)!important;} .badge.bg-primary{background:var(--c-primary)!important;}
.badge.bg-secondary{background:var(--c-secondary)!important;color:var(--c-on-abricot)!important;}
.form-check-input:checked{background-color:var(--c-primary);border-color:var(--c-primary);}
.form-control,.form-select{border-radius:var(--r-sm);border-color:var(--c-line-2);}
.form-control:focus,.form-select:focus{border-color:var(--c-secondary);box-shadow:0 0 0 .22rem rgba(141,29,44,.14);}
.nav-pills .nav-link.active{background-color:var(--c-primary);}
.page-item.active .page-link{background-color:var(--c-primary);border-color:var(--c-primary);}
.page-link{color:var(--c-primary);}
.progress-bar{background-color:var(--c-primary);}
.alert-primary{--bs-alert-color:#5c131d;--bs-alert-bg:#f4dfe2;--bs-alert-border-color:#dda9b0;}
.spinner-border.text-primary,.spinner-grow.text-primary{color:var(--c-primary)!important;}
.rounded-pill{border-radius:var(--r-pill)!important;}

/* ---- Cards -------------------------------------------------------------- */
.card {
  border:1px solid var(--c-line) !important; border-radius:var(--r-lg) !important;
  box-shadow:var(--sh-2) !important; background:var(--c-surface);
  transition:transform .16s var(--ease), box-shadow .2s var(--ease);
}
a .card:active, .card.is-tappable:active { transform:scale(.985); }
.card-body { padding:16px 18px; }

/* =========================================================================
   App chrome — topbar, nav sheet, tabbar
   ========================================================================= */
.app-topbar {
  background:rgba(246,241,234,.82) !important; backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--c-line) !important;
}
.app-topbar-inner { padding:10px 0; }
.app-title { font-family:var(--font-display); font-weight:400; font-size:1.28rem; line-height:1.05; color:var(--c-ink); letter-spacing:.01em; }
.app-subtitle { color:var(--c-muted); font-size:.8rem; margin-top:2px; }
.app-hamburger { color:var(--c-primary) !important; border-radius:12px; }
.app-hamburger:active { background:rgba(141,29,44,.10) !important; }

/* Top-sheet nav */
.app-nav-sheet, .app-nav-sheet-header { background:var(--c-surface); }
.app-nav-sheet-title { font-family:var(--font-display); font-weight:400; }
.app-nav-card { border-radius:var(--r-md); transition:background .15s var(--ease); }
.app-nav-card:active { background:rgba(141,29,44,.06) !important; }
.app-nav-card.is-active { background:var(--c-primary-soft) !important; }
.app-nav-card.is-active .app-nav-card-label { color:var(--c-primary) !important; }
.app-nav-card-icon { border-radius:12px !important; background:var(--c-secondary-soft) !important; }
.app-nav-card-icon i { color:var(--c-primary) !important; }
.app-nav-card-icon svg { color:var(--c-primary); display:block; }
.app-nav-card.is-active .app-nav-card-icon { background:rgba(141,29,44,.14) !important; }

/* ---- Line-icon set (Lucide) — global sizing/alignment ------------------- */
/* SVGs default to 1em (width/height attr), so they scale with font-size like
   the old icon font. .lc-icon just fixes vertical rhythm + flex behaviour. */
.lc-icon { display:inline-block; vertical-align:-.14em; flex:none; }
.dash-chevron { display:inline-flex; align-items:center; }
.dash-chevron svg { color:var(--c-muted); opacity:.5; }
.dash-date-ic svg { color:var(--c-muted); vertical-align:-.2em; }

/* hamburger + sheet close: give the button an icon-sized font */
.app-hamburger { font-size:1.55rem; }
.app-hamburger .lc-icon { vertical-align:middle; }
.app-nav-sheet-close { font-size:1.15rem; color:var(--c-muted); }

/* login input icons + error-page glyph pick up brand colour */
.form-control-icon .lc-icon { color:var(--c-muted); vertical-align:middle; }
.error-icon { color:var(--c-primary) !important; }
.error-icon .lc-icon { vertical-align:middle; }

/* buttons: nudge the icon to sit tight before a text label */
.btn .lc-icon { vertical-align:-.14em; }

/* Bottom tab bar (primary nav) */
.app-content { padding-bottom:86px !important; }
.app-tabbar-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:1030;
  display:flex; padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px);
  border-top:1px solid var(--c-line);
}
.app-tab {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  color:#a89e93; font-size:10.5px; font-weight:600; text-decoration:none;
  transition:color .15s var(--ease);
}
.app-tab span { line-height:1; }
.app-tab svg { display:block; }
.app-tab:active { color:var(--c-primary); }
.app-tab.is-active { color:var(--c-primary); }

/* Profile avatar tab (far right) */
.app-tab-avatar { width:24px; height:24px; border-radius:50%; background:var(--c-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Vank','Gotham',serif; font-size:11px; line-height:1; }
.app-tab-avatar svg { width:15px; height:15px; }
.app-tab-profile.is-active .app-tab-avatar { box-shadow:0 0 0 2px var(--c-secondary); }

/* legacy FAB */
.app-tabbar, .tabbar { background:var(--c-surface) !important; border-top:1px solid var(--c-line) !important; }
.app-tabbar .fab, .app-fab, .tabbar .fab { background:linear-gradient(135deg,var(--c-primary),#b5354a) !important; box-shadow:0 10px 22px -8px rgba(141,29,44,.55) !important; }
.tab.active, .app-tab.active, .tabbar .active { color:var(--c-primary) !important; }

/* PWA install banner — de-blue */
#pwa-banner { border:1px solid var(--c-line-2) !important; box-shadow:var(--sh-3) !important; border-radius:var(--r-xl) !important; }
#pwa-banner .pwa-title { color:var(--c-ink) !important; }
#pwa-banner .pwa-btn-install { background:linear-gradient(135deg,var(--c-primary),#b5354a) !important; border-radius:var(--r-pill) !important; }
#pwa-ios-tip .pwa-ios-arrow, #pwa-ios-tip a { color:var(--c-primary) !important; }

/* =========================================================================
   Dashboard — refined tiles with tasteful earthy tints (WebShop palette)
   ========================================================================= */
.dash-tile {
  width:46px; height:46px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--c-secondary-soft); box-shadow:inset 0 0 0 1px rgba(36,26,22,.04);
}
.dash-tile svg { width:22px; height:22px; display:block; color:var(--c-primary); }
/* per-item accent — order: Shops, Reports, Helpdesk, Claims, Notes */
.row.g-3 > .col-12:nth-child(1) .dash-tile { background:rgba(141,29,44,.11); }
.row.g-3 > .col-12:nth-child(1) .dash-tile svg { color:var(--c-ruby); }
.row.g-3 > .col-12:nth-child(2) .dash-tile { background:rgba(31,79,107,.11); }
.row.g-3 > .col-12:nth-child(2) .dash-tile svg { color:var(--c-encre); }
.row.g-3 > .col-12:nth-child(3) .dash-tile { background:rgba(193,122,42,.14); }
.row.g-3 > .col-12:nth-child(3) .dash-tile svg { color:var(--c-ambre); }
.row.g-3 > .col-12:nth-child(4) .dash-tile { background:rgba(138,74,36,.12); }
.row.g-3 > .col-12:nth-child(4) .dash-tile svg { color:var(--c-brun); }
.row.g-3 > .col-12:nth-child(5) .dash-tile { background:rgba(92,74,138,.12); }
.row.g-3 > .col-12:nth-child(5) .dash-tile svg { color:var(--c-aubergine); }
/* dashboard card feel */
.row.g-3 > .col-12 .card .card-body { gap:14px !important; }
.row.g-3 > .col-12 .card .fw-700 { font-size:1rem; letter-spacing:-.01em; }
.row.g-3 > .col-12 .card .bi-chevron-right { color:var(--c-muted); opacity:.55; }

/* =========================================================================
   Per-page components (override the templates' inline <style>)
   ========================================================================= */
.tasks-summary-card,.task-card,.tasks-empty-card,.shop-card,.note-card,.claim-card,.helpdesk-card {
  background:var(--c-surface) !important; border:1px solid var(--c-line) !important;
  border-radius:var(--r-lg) !important; box-shadow:var(--sh-2) !important;
}
.task-card,.shop-card { transition:transform .16s var(--ease), box-shadow .2s var(--ease); }
.shop-card:active { transform:scale(.985); }

/* Eyebrows / section labels */
.tasks-summary-eyebrow,.section-title,.tasks-summary-title { }
.tasks-summary-eyebrow,.section-title { color:var(--c-primary) !important; letter-spacing:.15em !important; font-weight:600 !important; }
.tasks-summary-title,.task-title,.shop-name { color:var(--c-ink) !important; letter-spacing:-.01em; }

/* Chips — refined warm pill */
.task-chip {
  background:var(--c-bg-2) !important; color:var(--c-muted) !important;
  border:1px solid var(--c-line) !important; font-weight:600 !important; border-radius:var(--r-pill) !important;
  padding:5px 10px !important;
}

/* Task cards: burgundy accent (done = green) */
.task-card { border-left:3px solid var(--c-primary) !important; }
.task-card.is-done { border-left-color:var(--c-vert) !important; }
.task-priority { color:var(--c-muted) !important; }

/* Shop P&L badges */
.pnl-badge { border-color:var(--c-line-2) !important; color:var(--c-muted) !important; }
.pnl-badge.active { background:var(--c-primary) !important; border-color:var(--c-primary) !important; color:#fff !important; }
.pnl-row.is-expandable:active { background:rgba(141,29,44,.06) !important; }

/* Checklist hero — elegant burgundy */
.checklist-hero {
  background:
    radial-gradient(90% 120% at 92% -10%, rgba(242,201,160,.28) 0%, rgba(242,201,160,0) 55%),
    linear-gradient(150deg,#9a2233 0%,#7c1824 55%,#5f1320 100%) !important;
  border-radius:var(--r-xl) !important;
  box-shadow:0 18px 40px -20px rgba(120,25,40,.6) !important;
  border:1px solid rgba(255,255,255,.06);
}
.checklist-hero::after { background:rgba(255,255,255,.06) !important; }
.hero-rate,.arc-text { font-family:var(--font-display); font-weight:400 !important; letter-spacing:0 !important; }
.hero-label { opacity:.72; letter-spacing:.08em; }
.hero-pill { background:rgba(255,255,255,.12) !important; }
.hero-pill.done { background:rgba(242,201,160,.26) !important; color:#f8e6d2 !important; }
.arc-fill { stroke:#F2C9A0 !important; }

/* Ranking chips */
.shop-rank { background:var(--c-secondary-soft) !important; color:var(--c-primary) !important; border-radius:11px !important; }
.shop-rank.gold { background:#f6e3c4 !important; color:#8a6d1f !important; }
.shop-rank.silver { background:#ececec !important; color:#6b6b6b !important; }
.shop-rank.bronze { background:#f2ddc9 !important; color:#9c5a26 !important; }

/* Progress */
.progress-track { background:#e6ded3 !important; height:7px !important; border-radius:4px !important; }
.progress-fill.excellent { background:linear-gradient(90deg,#2D7A3E,#4bb264) !important; }
.progress-fill.good      { background:linear-gradient(90deg,#C17A2A,#e3a856) !important; }
.progress-fill.bad       { background:linear-gradient(90deg,#8D1D2C,#c2465a) !important; }

/* Status pills keep semantic colours (closed/open/missed) — just soften radius */
.status-pill,.pill { border-radius:var(--r-pill) !important; font-weight:600 !important; }

/* Empty states */
.empty-state,.tasks-empty-card { color:var(--c-muted); text-align:center; }

/* =========================================================================
   Dashboard tiles — dynamic & fluid
   ========================================================================= */
/* narrower, slightly taller tiles — container padding does the narrowing */
.page-content-loaded .row.g-3 { --bs-gutter-y:.7rem; --bs-gutter-x:0; }
.page-content-loaded .row.g-3 .card-body { padding:19px 20px !important; }
.page-content-loaded .dash-tile { width:52px; height:52px; border-radius:15px; }
.page-content-loaded .dash-tile svg { width:25px; height:25px; }
.page-content-loaded .row.g-3 .card .fw-700 { font-size:1.05rem; }

/* depth: soft gradient on each icon tile (keeps the earthy accent) */
.dash-tile { transition:transform .34s cubic-bezier(.34,1.56,.64,1), box-shadow .3s var(--ease); }
.row.g-3 > .col-12:nth-child(1) .dash-tile { background:linear-gradient(145deg, rgba(141,29,44,.17), rgba(141,29,44,.05)); }
.row.g-3 > .col-12:nth-child(2) .dash-tile { background:linear-gradient(145deg, rgba(31,79,107,.17), rgba(31,79,107,.05)); }
.row.g-3 > .col-12:nth-child(3) .dash-tile { background:linear-gradient(145deg, rgba(193,122,42,.2), rgba(193,122,42,.06)); }
.row.g-3 > .col-12:nth-child(4) .dash-tile { background:linear-gradient(145deg, rgba(138,74,36,.18), rgba(138,74,36,.05)); }
.row.g-3 > .col-12:nth-child(5) .dash-tile { background:linear-gradient(145deg, rgba(92,74,138,.18), rgba(92,74,138,.05)); }

/* fluid interaction */
.page-content-loaded .row.g-3 .card { transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s var(--ease); will-change:transform; }
.dash-chevron { transition:transform .28s var(--ease); }
@media (hover:hover) {
  .page-content-loaded .row.g-3 a:hover .card { transform:translateY(-3px); box-shadow:var(--sh-3) !important; }
  .page-content-loaded .row.g-3 a:hover .dash-tile { transform:scale(1.08) rotate(-3deg); }
  .page-content-loaded .row.g-3 a:hover .dash-chevron { transform:translateX(4px); color:var(--c-primary); }
}
.page-content-loaded .row.g-3 a:active .card { transform:scale(.975); box-shadow:var(--sh-1) !important; }
.page-content-loaded .row.g-3 a:active .dash-tile { transform:scale(.92); }

/* staggered entrance */
@keyframes dashIn { from { opacity:0; transform:translateY(18px) scale(.96); } to { opacity:1; transform:none; } }
.page-content-loaded > .d-flex,
.page-content-loaded .row.g-3 > .col-12 { animation:dashIn .6s cubic-bezier(.22,1,.36,1) both; }
.page-content-loaded > .d-flex { animation-duration:.5s; }
.page-content-loaded .row.g-3 > .col-12:nth-child(1) { animation-delay:.06s; }
.page-content-loaded .row.g-3 > .col-12:nth-child(2) { animation-delay:.13s; }
.page-content-loaded .row.g-3 > .col-12:nth-child(3) { animation-delay:.20s; }
.page-content-loaded .row.g-3 > .col-12:nth-child(4) { animation-delay:.27s; }
.page-content-loaded .row.g-3 > .col-12:nth-child(5) { animation-delay:.34s; }

/* =========================================================================
   Dashboard v2 — Panel Consultant (KPIs, tasks, alerts, shops, shortcuts)
   ========================================================================= */
.dash-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 0; }
.dash-logo { height:22px; width:auto; display:block; margin-bottom:5px; }
.dash-date { font-size:12px; color:var(--c-muted); }
.dash-menu-btn { background:rgba(141,29,44,.09) !important; width:42px; height:42px; border-radius:13px; }

/* Dashboard header — logo (left) · date (center) · menu (right) — slightly larger */
.dash-head3 { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:9px 0; }
.dash-head3 .dash-logo { justify-self:start; height:26px; margin:0; }
.dash-date3 { justify-self:center; text-align:center; font-size:13.5px; font-weight:500; color:var(--c-muted); white-space:nowrap; }
.dash-head3 .dash-menu-btn { justify-self:end; width:46px; height:46px; border-radius:14px;
  background:rgba(141,29,44,.09) !important; display:flex; align-items:center; justify-content:center; }

.dash { animation:dashIn .5s cubic-bezier(.22,1,.36,1) both; }
.dash-eyebrow { font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--c-primary); }
.dash-secthead { display:flex; align-items:baseline; justify-content:space-between; margin:22px 2px 10px; }
.dash-seelink { font-size:12px; color:var(--c-muted);
  /* Lien d'en-tête de section : 18 px de haut, à côté d'un titre.
     On lui donne sa propre hauteur de touche sans bouger le titre. */
  display:inline-flex; align-items:center; min-height:40px; padding:0 4px;
  margin:-11px -4px; }
.dash-seelink:hover { color:var(--c-primary); }

/* KPI grid : 4 tuiles sur UNE ligne (grand écran) → 2 par ligne (tablette)
   → 1 par ligne (petit mobile). minmax(0,1fr) = colonnes d'égale largeur,
   les valeurs longues ne cassent pas la grille. */
.dash-kpis { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:11px; }
@media (max-width:900px) { .dash-kpis { grid-template-columns:repeat(2, minmax(0,1fr)); gap:9px; } }
.dash-kpi { background:#fff; border:1px solid var(--c-line); border-radius:18px; padding:15px 16px; min-width:0;
  box-shadow:0 1px 3px rgba(70,40,25,.05),0 10px 24px -18px rgba(70,40,25,.25); }
.dash-kpi-ic { width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  margin-bottom:12px; background:linear-gradient(145deg, rgba(var(--tint),.17), rgba(var(--tint),.05)); }
.dash-kpi-val { font-family:var(--font-display); font-size:24px; color:var(--c-ink); line-height:1; }
.dash-kpi-lbl { font-size:11.5px; color:var(--c-muted); margin-top:5px; }

/* generic card + rows */
.dash-card { background:#fff; border:1px solid var(--c-line); border-radius:18px;
  box-shadow:0 10px 24px -18px rgba(70,40,25,.25); overflow:hidden; }
.dash-row { display:flex; align-items:center; gap:12px; padding:13px 16px; text-decoration:none; color:inherit; }
.dash-list > .dash-row + .dash-row { border-top:1px solid rgba(36,26,22,.06); }
.dash-row:active { background:var(--c-bg-2); }
.dash-row-ic { width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dash-row-txt { flex:1; min-width:0; }
.dash-row-t { font-size:13.5px; font-weight:600; color:var(--c-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-row-s { font-size:11.5px; color:var(--c-muted); margin-top:1px; }
.dash-pill { font-size:10.5px; font-weight:600; color:var(--c-muted); background:var(--c-bg-2);
  border:1px solid var(--c-line); border-radius:999px; padding:4px 9px; white-space:nowrap; }

/* alerts */
.dash-alerts { display:flex; flex-direction:column; gap:9px; }
.dash-alert { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--c-line);
  border-left:3px solid var(--c-primary); border-radius:14px; padding:12px 14px; text-decoration:none; color:inherit;
  box-shadow:0 8px 22px -18px rgba(70,40,25,.25); }
.dash-alert:active { background:var(--c-bg-2); }
.dash-alert-t { font-size:13px; font-weight:600; color:var(--c-ink); }

/* shops mini P&L */
.dash-bar { width:74px; height:6px; border-radius:3px; background:#e6ded3; overflow:hidden; flex-shrink:0; }
.dash-bar > span { display:block; height:100%; }
.dash-pct { font-size:13px; font-weight:700; width:34px; text-align:right; }

/* shortcuts */
.dash-shortcuts { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:9px; }
.dash-sc { background:#fff; border:1px solid var(--c-line); border-radius:15px; padding:13px 6px; text-align:center;
  box-shadow:0 8px 22px -18px rgba(70,40,25,.25); text-decoration:none;
  min-height:64px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.dash-sc > span { display:inline-flex; }
.dash-sc > div { font-size:10.5px; color:var(--c-ink); margin-top:6px; font-weight:600; }
.dash-sc:active { background:var(--c-bg-2); }

@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; }
  .page-content-loaded .row.g-3 > .col-12, .page-content-loaded > .d-flex { opacity:1 !important; transform:none !important; }
  .dash { opacity:1 !important; transform:none !important; }
}

/* ============================================================
   Screen headers (Boutiques / Checklists / Tâches / Notes)
   ============================================================ */
.scr-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.scr-title { font-family:'Vank','Gotham',serif; font-size:22px; color:var(--c-ink); line-height:1.1; }
.scr-sub { font-size:12px; color:var(--c-muted); margin-top:2px; }

/* ============================================================
   Checklists screen
   ============================================================ */
.cl-datenav { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.cl-datenav-arrow { width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid var(--c-line);
  display:flex; align-items:center; justify-content:center; color:var(--c-muted); text-decoration:none;
  flex-shrink:0; -webkit-tap-highlight-color:transparent; }
.cl-datenav-cur { font-size:13px; font-weight:600; color:var(--c-ink); background:#fff; border:1px solid var(--c-line);
  border-radius:999px; padding:7px 16px; min-height:44px; display:inline-flex; align-items:center; gap:7px;
  cursor:pointer; -webkit-tap-highlight-color:transparent; }
.cl-datenav-today { font-size:12px; font-weight:600; color:#fff; background:var(--c-primary); border-radius:999px;
  padding:7px 14px; text-decoration:none; }

.cl-hero { position:relative; overflow:hidden; border-radius:22px; padding:20px; color:#fff;
  background:radial-gradient(90% 120% at 92% -10%,rgba(242,201,160,.28) 0%,rgba(242,201,160,0) 55%),
             linear-gradient(150deg,#9a2233 0%,#7c1824 55%,#5f1320 100%);
  box-shadow:0 18px 40px -20px rgba(120,25,40,.6); }
.cl-hero-main { display:flex; align-items:center; gap:16px; position:relative; z-index:1; }
.cl-ring { position:relative; width:74px; height:74px; flex-shrink:0; }
.cl-ring svg { transform:rotate(-90deg); }
.cl-ring-txt { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Vank','Gotham',serif; font-size:19px; }
.cl-hero-eyebrow { font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.72; }
.cl-hero-big { font-family:'Vank','Gotham',serif; font-size:30px; line-height:1; margin-top:3px; }
.cl-hero-big span { opacity:.6; font-size:20px; }
.cl-hero-note { font-size:12px; opacity:.78; margin-top:4px; }
.cl-hero-pills { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; position:relative; z-index:1; }
.cl-pill { font-size:11px; font-weight:600; border-radius:999px; padding:4px 11px; background:rgba(255,255,255,.12);
  display:inline-flex; align-items:center; gap:5px; }
.cl-pill-done { background:rgba(242,201,160,.26); color:#f8e6d2; }

.cl-eyebrow { font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--c-primary); margin:22px 2px 10px; }
.cl-ranklist { display:flex; flex-direction:column; gap:10px; }
.cl-rank { display:block; background:#fff; border:1px solid var(--c-line); border-radius:16px; padding:14px 16px;
  box-shadow:0 10px 24px -18px rgba(70,40,25,.25); text-decoration:none; color:inherit; }
.cl-rank:active { transform:scale(.99); }
.cl-rank-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.cl-rank-badge { width:32px; height:32px; border-radius:10px; background:#f2f7ff; color:#435ebe;
  display:flex; align-items:center; justify-content:center; font-family:'Vank','Gotham',serif; font-size:15px; flex-shrink:0; }
.cl-rank-badge.gold { background:#f6e3c4; color:#8a6d1f; }
.cl-rank-badge.silver { background:#ececec; color:#6b6b6b; }
.cl-rank-badge.bronze { background:#f2ddc9; color:#9c5a26; }
.cl-rank-id { flex:1; min-width:0; }
.cl-rank-name-row { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.cl-rank-name { font-size:14px; font-weight:700; color:var(--c-ink); }
.cl-rank-city { font-size:11px; color:var(--c-muted); }
.cl-rank-pct { font-family:'Vank','Gotham',serif; font-size:18px; flex-shrink:0; }
.cl-chip { font-size:10px; font-weight:600; border-radius:8px; padding:2px 7px; }
.cl-chip-closed { background:#d1fae5; color:#065f46; }
.cl-chip-open { background:#fef3c7; color:#92400e; }
.cl-chip-late { background:#fee2e2; color:#991b1b; }
.cl-rank-bar { height:7px; border-radius:4px; background:#e6ded3; overflow:hidden; margin-bottom:9px; }
.cl-rank-bar > span { display:block; height:100%; }
.cl-rank-stats { display:flex; gap:7px; }
.cl-stat { flex:1; background:var(--c-bg-2); border-radius:9px; padding:6px 8px; }
.cl-stat-v { font-size:14px; font-weight:700; }
.cl-stat-l { font-size:9.5px; color:var(--c-muted); }
.cl-empty { text-align:center; padding:40px 20px; color:#adb5bd; }
.cl-empty > div { margin-top:8px; }

/* ============================================================
   Tâches screen
   ============================================================ */
.tk { display:flex; flex-direction:column; gap:11px; }
.tk-summary { background:#fff; border:1px solid var(--c-line); border-radius:18px; padding:15px 16px;
  box-shadow:0 10px 24px -18px rgba(70,40,25,.25); }
.tk-summary-eyebrow { font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--c-primary); margin-bottom:5px; }
.tk-summary-big { font-family:'Vank','Gotham',serif; font-size:18px; color:var(--c-ink); }
.tk-summary-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.tk-chip { font-size:11px; font-weight:600; color:var(--c-muted); background:var(--c-bg-2); border:1px solid var(--c-line);
  border-radius:999px; padding:5px 10px; display:inline-flex; align-items:center; gap:5px; }

.tk-card { background:#fff; border:1px solid var(--c-line); border-left:3px solid #8D1D2C; border-radius:16px;
  padding:14px 16px; box-shadow:0 10px 24px -18px rgba(70,40,25,.25); }
.tk-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.tk-card-id { min-width:0; }
.tk-card-name { font-size:14.5px; font-weight:700; color:var(--c-ink); }
.tk-card-path { font-size:12px; color:var(--c-muted); margin-top:2px; }
.tk-badge { font-size:11px; font-weight:600; border-radius:999px; padding:4px 10px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:4px; flex-shrink:0; }
.tk-badge-done { color:#2D7A3E; background:rgba(45,122,62,.12); }
.tk-badge-prio { color:#1F4F6B; background:rgba(31,79,107,.1); }
.tk-card-desc { font-size:12.5px; color:#5b524a; line-height:1.5; margin:9px 0 0; }
.tk-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.tk-metachip { font-size:10.5px; font-weight:600; color:var(--c-muted); background:var(--c-bg-2); border:1px solid var(--c-line);
  border-radius:999px; padding:4px 9px; display:inline-flex; align-items:center; gap:4px; }
.tk-btn { width:100%; margin-top:13px; border-radius:11px; padding:11px; font-size:13px; font-weight:600;
  font-family:inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; }
.tk-btn-primary { border:none; background:var(--c-primary); color:#fff; box-shadow:0 6px 16px -8px rgba(141,29,44,.55); }
.tk-btn-primary:active { background:var(--c-primary-hover); }
.tk-btn-ghost { border:1px solid var(--c-line); background:#fff; color:#5b524a; }

/* ============================================================
   Notes screen
   ============================================================ */
.nt-composer { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--c-line);
  border-radius:18px; padding:14px 16px; box-shadow:0 10px 24px -18px rgba(70,40,25,.25); text-decoration:none; }
.nt-avatar { width:36px; height:36px; border-radius:50%; background:var(--c-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Vank','Gotham',serif; font-size:14px; flex-shrink:0; }
.nt-composer-ph { flex:1; font-size:13px; color:#a89e93; }
.nt-composer-btn { border:none; background:var(--c-primary); color:#fff; width:38px; height:38px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.nt-eyebrow { font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--c-primary); margin:22px 2px 10px; }
.nt-list { display:flex; flex-direction:column; gap:10px; }
.nt-note { display:block; background:#fff; border:1px solid var(--c-line); border-radius:16px; padding:14px 16px;
  box-shadow:0 10px 24px -18px rgba(70,40,25,.25); text-decoration:none; color:inherit; }
.nt-note-head { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.nt-shopchip { font-size:10.5px; font-weight:600; border-radius:8px; padding:2px 8px; }
.nt-date { font-size:11px; color:#a89e93; margin-left:auto; }
.nt-note-body { font-size:13.5px; color:var(--c-ink); line-height:1.5; margin:0; }
.nt-note-author { font-size:11px; color:var(--c-muted); margin-top:8px; }
/* Dernière réponse mise en avant sur la tuile (note = sujet, réponse = corps). */
.nt-note-subject { font-size:12.5px; color:var(--c-muted); font-weight:600; line-height:1.4; margin:0 0 8px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nt-reply { display:flex; align-items:flex-start; gap:8px; }
.nt-reply-arrow { color:var(--c-primary); font-weight:800; line-height:1.35; flex-shrink:0; }
.nt-reply-body { flex:1; min-width:0; }
.nt-reply-author { display:block; font-size:12px; font-weight:800; color:var(--c-ink); }
.nt-reply-text { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:13px; color:var(--c-ink); line-height:1.45; }
.nt-reply-thumb { width:46px; height:46px; object-fit:cover; border-radius:9px; flex-shrink:0; }
.nt-reply-more { margin-top:8px; font-size:11px; font-weight:700; color:var(--c-primary); }
.nt-shopcard { background:#fff; border:1px solid var(--c-line); border-radius:16px; overflow:hidden;
  box-shadow:0 10px 24px -18px rgba(70,40,25,.25); }
.nt-shoprow { display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid rgba(36,26,22,.06);
  text-decoration:none; color:inherit; }
.nt-shoprow.is-last { border-bottom:none; }
.nt-shoprow-id { flex:1; min-width:0; }
.nt-shoprow-name { font-size:13.5px; font-weight:600; color:var(--c-ink); }
.nt-shoprow-meta { font-size:11px; color:var(--c-muted); }

/* ============================================================
   Profil screen
   ============================================================ */
.pf { display:flex; flex-direction:column; gap:11px; }
.pf-card { background:#fff; border:1px solid var(--c-line); border-radius:18px; box-shadow:0 10px 24px -18px rgba(70,40,25,.25); }
.pf-identity { padding:22px 16px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.pf-avatar { width:76px; height:76px; border-radius:50%; background:var(--c-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Vank','Gotham',serif; font-size:28px; line-height:1;
  box-shadow:0 14px 30px -12px rgba(141,29,44,.55); margin-bottom:12px; }
.pf-avatar svg { width:30px; height:30px; }
.pf-name { font-family:'Vank','Gotham',serif; font-size:20px; color:var(--c-ink); }
.pf-role { font-size:12.5px; color:var(--c-muted); margin-top:3px; text-transform:capitalize; }
.pf-eyebrow { font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--c-primary); margin:14px 2px 2px; }
.pf-list { overflow:hidden; }
.pf-row { display:flex; align-items:center; gap:13px; padding:13px 16px; border-bottom:1px solid rgba(36,26,22,.06); }
.pf-row:last-child { border-bottom:none; }
.pf-row-ic { display:flex; flex-shrink:0; }
.pf-row-txt { min-width:0; }
.pf-row-l { font-size:11px; color:var(--c-muted); }
.pf-row-v { font-size:14px; font-weight:600; color:var(--c-ink); }
.pf-logout { margin-top:6px; display:flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid rgba(141,29,44,.28); background:#fff; color:var(--c-primary); border-radius:14px; padding:14px;
  font-size:14px; font-weight:600; text-decoration:none; }
.pf-logout:active { background:rgba(141,29,44,.06); }


/* ============================================================
   Cibles tactiles — plancher commun
   ------------------------------------------------------------
   Mesuré sur les sept écrans principaux : 38 cibles passaient sous
   40 px de haut. En dessous, viser au pouce devient un pari — et
   c'est toute l'application qui donne l'impression d'être fragile.
   Les boutons compacts de Bootstrap (.btn-sm) et les liens de
   navigation de date en étaient les principaux fautifs.
   ============================================================ */
.app-topbar .btn-sm,
.app-topbar-actions .btn-sm { min-height:40px; min-width:40px; }
.cl-datenav-today { min-height:40px; display:inline-flex; align-items:center; }

/* Les deux tuiles de tête de l'écran Tâches — « mes tâches » et « contrôle
   franchisés ». Empilées sur un téléphone, côte à côte dès qu'il y a la place ;
   la grille leur donne alors la MÊME hauteur, ce qu'un simple `margin` entre
   deux cartes de contenus différents ne fait jamais. */
.tk-tiles { display:grid; gap:10px; margin-bottom:12px; }
.tk-tiles > * { margin-bottom:0 !important; }   /* `height:100%` dimensionnait
   la rangée sur la PLUS PETITE tuile, que la plus grande débordait ensuite ;
   l'étirement par défaut de la grille fait le travail correctement. */
@media (min-width:560px) { .tk-tiles { grid-template-columns:1fr 1fr; } }

/* En-tête du résumé de poste : même icône, même place que sur la tuile
   voisine — deux tuiles jumelles dont une seule porterait une icône se
   liraient comme un oubli. */
.tk-summary-hd { display:flex; align-items:center; gap:11px; }
.tk-summary-hd .ico { flex-shrink:0; display:flex; color:var(--c-primary); }

/* Accès à la file complète des tâches du réseau (checklists + tâches).
   Même format de carte que .tk-summary, dont il est toujours voisin : deux
   blocs côte à côte qui ne partagent ni rayon ni ombre se lisent comme deux
   morceaux d'interfaces différentes. Cible au pouce, comme le reste. */
.cl-alltasks { display:flex; align-items:center; gap:11px; min-height:56px; margin:0 0 12px;
  box-sizing:border-box;
  padding:13px 16px; border-radius:18px; background:#fff; border:1px solid var(--c-line);
  box-shadow:0 10px 24px -18px rgba(70,40,25,.25); color:var(--c-ink); }
.cl-alltasks .ico { flex-shrink:0; display:flex; color:var(--c-primary); }
.cl-alltasks .txt { flex:1; min-width:0; }
.cl-alltasks .eyebrow { display:block; font-size:10.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--c-primary); margin-bottom:3px; }
.cl-alltasks .big { display:block; font-family:'Vank','Gotham',serif; font-size:16px; color:var(--c-ink); }
.cl-alltasks .car { flex-shrink:0; color:#c9c0b4; font-size:1.2rem; line-height:1; }