/* GestaPro — design system repris à l’identique de l’ERP Update IT & Training (« Premium SaaS UI »).
   Ne pas modifier ce fichier à la main : les adaptations propres à GestaPro vont dans app.css. */
/* ==========================================================================
   Update IT & Training — Design system « Premium SaaS UI »
   Rose Update IT & Training + marine (structure) + vert (états OK), aux couleurs du site update-it-training.com
   Couleurs vives réservées aux actions, indicateurs, graphiques, catégories,
   progressions, notifications, états, illustrations, boutons et badges.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* ------------------------------------------------------------- Jetons --- */
:root {
  --brand:#E72773; --brand-600:#C71C61; --brand-700:#AD164E; --brand-50:#fff2e0; --brand-100:#ffe3bf; --brand-200:#ffc980;

  /* palette vive */
  --violet:#7c3aed; --violet-soft:#f3eeff; --violet-text:#6d28d9;
  --blue:#2d7cff;   --blue-soft:#edf4ff;   --blue-text:#1f5fd6;
  --cyan:#0fb5d3;   --cyan-soft:#e6f9fc;   --cyan-text:#0b7a8f;
  --teal:#0fb39a;   --teal-soft:#e6faf6;   --teal-text:#0b7f6e;
  --green:#16c47f;  --green-soft:#e8faf1;  --green-text:#0b8a56;
  --amber:#ffb020;  --amber-soft:#fff6e0;  --amber-text:#9a6400;
  --orange:#ff7a1a; --orange-soft:#fff1e6; --orange-text:#c2520a;
  --pink:#ec4899;   --pink-soft:#fdedf6;   --pink-text:#be185d;
  --rose:#e5264b;   --rose-soft:#ffeef1;   --rose-text:#c21d3d;
  --slate:#64748b;  --slate-soft:#f1f4f8;  --slate-text:#475569;

  --grad-brand:linear-gradient(135deg, #FF2D7A 0%, #E72773 50%, #C71C61 100%);
  --grad-red:linear-gradient(135deg, #FF2D7A, #E72773);
  --grad-violet:linear-gradient(135deg, #a36bff, #6d28d9);
  --grad-blue:linear-gradient(135deg, #5aa2ff, #2a5bf0);
  --grad-cyan:linear-gradient(135deg, #3fd9f0, #0b97c4);
  --grad-teal:linear-gradient(135deg, #34e0be, #0e9f8a);
  --grad-green:linear-gradient(135deg, #3ee39a, #0fa868);
  --grad-amber:linear-gradient(135deg, #ffcb47, #f59e0b);
  --grad-orange:linear-gradient(135deg, #ffa94d, #ff5e1a);
  --grad-pink:linear-gradient(135deg, #ff7ac6, #db2777);
  --grad-gray:linear-gradient(135deg, #94a3b8, #475569);
  --grad-progress:linear-gradient(90deg, #16c47f, #0fb5d3);

  /* états */
  --success:var(--green-text); --success-soft:var(--green-soft);
  --warning:var(--amber-text); --warning-soft:var(--amber-soft);
  --danger:var(--rose);        --danger-soft:var(--rose-soft);
  --info:var(--blue-text);     --info-soft:var(--blue-soft);

  --canvas:#f4f5fa; --surface:#ffffff; --surface-2:#f8f9fc; --surface-3:#f0f2f7; --surface-elev:#ffffff;
  --line:#e7e9f0; --line-2:#eff1f6; --line-strong:#d5d9e2;
  --heading:#0f1222; --text:#3a4052; --muted:#687085; --faint:#9aa1b2;

  --side:#ffffff; --side-2:rgba(15,18,34,.05); --side-line:#eceef4; --side-text:#3a4052; --side-muted:#8a91a3;

  --r-sm:8px; --r-md:11px; --r-lg:14px; --r-xl:18px; --r-2xl:22px;
  --shadow-xs:0 1px 2px rgba(15,18,34,.05);
  --shadow-sm:0 1px 2px rgba(15,18,34,.04), 0 4px 14px -6px rgba(15,18,34,.08);
  --shadow-md:0 14px 32px -12px rgba(15,18,34,.20);
  --shadow-lg:0 30px 60px -18px rgba(15,18,34,.34);
  --ring:0 0 0 3.5px rgba(251,140,0,.16);

  --sidenav-w:268px; --sidenav-compact:76px; --topbar-h:64px;
  --font:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display:'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* alias historiques utilisés par les pages */
  --primary:var(--brand); --primary-dark:var(--brand-600); --primary-soft:var(--brand-50); --primary-softer:#fffaf3;
  --bg:var(--surface-3); --border:var(--line); --border-strong:var(--line-strong); --purple:var(--violet); --purple-soft:var(--violet-soft);
}

/* ------------------------------------------------------------- Base --- */
*, *::before, *::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; padding:0; }
body { font-family:var(--font); background:var(--canvas); color:var(--text); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:'cv11', 'ss01'; }
a { color:var(--brand); text-decoration:none; transition:color .12s; }
a:hover { color:var(--brand-600); }
h1, h2, h3, h4, h5, h6 { color:var(--heading); margin:0 0 .5rem; font-weight:700; letter-spacing:-.018em; line-height:1.25; }
h3 { font-size:1.05rem; } h4 { font-size:.98rem; }
p { margin:0 0 .8rem; }
img { max-width:100%; }
::selection { background:var(--brand-100); color:var(--heading); }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:6px; }
kbd { font-family:var(--font); font-size:.68rem; font-weight:600; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-bottom-width:2px; border-radius:6px; padding:.05rem .38rem; }
.ic { width:1.15em; height:1.15em; stroke:currentColor; stroke-width:1.85; fill:none; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.2em; flex:none; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:99px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:#b4bac3; background-clip:content-box; border:3px solid transparent; }
::-webkit-scrollbar-track { background:transparent; }

/* ============================================================ Menu latéral */
.sidenav { position:fixed; inset-block:0; inset-inline:0 auto; width:var(--sidenav-w); background:var(--side); color:var(--side-text); z-index:120; display:flex; flex-direction:column; border-inline-end:1px solid var(--line); transition:width .22s ease, transform .25s ease; }
.sn-top { position:relative; display:flex; align-items:center; justify-content:center; padding:1.6rem 1rem 1.45rem; margin-bottom:.35rem; }
/* filet dégradé discret sous le logo */
.sn-top::after { content:''; position:absolute; inset-inline-start:1.4rem; inset-inline-end:1.4rem; bottom:0; height:1px; background:linear-gradient(90deg, transparent, var(--side-line) 22%, var(--side-line) 78%, transparent); pointer-events:none; }
.sn-brand { display:flex; align-items:center; justify-content:center; min-width:0; }
.sn-brand svg, .sn-brand img { display:block; height:64px !important; width:auto; }
.sn-coeur { display:none; }
.sn-reduire { position:absolute; inset-inline-end:.55rem; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:9px; border:none; background:transparent; color:var(--side-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s, background .15s; }
.sidenav:hover .sn-reduire, .sn-reduire:focus-visible { opacity:1; }
.sn-reduire:hover { background:var(--side-2); color:var(--heading); }
.sn-nav { flex:1; overflow-y:auto; padding:.75rem .75rem 1.5rem; scrollbar-width:thin; scrollbar-color:#dfe2ea transparent; }
.sn-nav::-webkit-scrollbar-thumb { background:#dfe2ea; background-clip:content-box; }
.nav-group { margin-top:.45rem; }
.nav-group-racine { margin-top:0; padding-bottom:.4rem; border-bottom:1px solid var(--side-line); margin-bottom:.15rem; }
.nav-heading { display:flex; align-items:center; justify-content:space-between; width:100%; padding:.65rem .7rem .45rem; border:none; background:none; color:#4a5164; font:700 .76rem/1.1 var(--font); letter-spacing:.06em; text-transform:uppercase; cursor:pointer; border-radius:8px; transition:color .15s; }
.nav-heading:hover { color:var(--heading); }
.nav-heading .ic { width:14px; height:14px; color:#9aa1b2; transition:transform .2s, color .15s; }
.nav-group.closed .nav-heading .ic { transform:rotate(-90deg); }
.nav-group.a-active > .nav-heading { color:var(--heading); }
.nav-group .nav { list-style:none; margin:0; padding:0; overflow:hidden; max-height:600px; transition:max-height .26s ease; }
.nav-group.closed .nav { max-height:0; }
.sidenav.sans-anim .nav-group .nav, .sidenav.sans-anim .nav-heading .ic { transition:none; }
.nav-link { position:relative; display:flex; align-items:center; gap:.72rem; padding:.52rem .7rem; margin:1px 0; border-radius:10px; color:var(--side-text); font-size:.92rem; font-weight:500; white-space:nowrap; }
.nav-link:hover { background:var(--side-2); color:var(--heading); }
.nav-link.active { color:#fff; font-weight:600; }
.nav-ico { display:flex; flex:none; color:var(--side-muted); }
.nav-ico .ic { width:18px; height:18px; }
.nav-lab { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.nav-count { margin-inline-start:auto; min-width:20px; height:20px; padding:0 .38rem; border-radius:99px; background:#eef0f5; color:var(--side-text); font-size:.68rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.nav-count.alerte { background:var(--brand); color:#fff; }

/* mode compact */
.menu-compact .sidenav { width:var(--sidenav-compact); }
.menu-compact .main-content { margin-inline-start:var(--sidenav-compact); }
.menu-compact .sn-top { flex-direction:column; padding:1.15rem .5rem .8rem; gap:.5rem; margin-bottom:.2rem; }
.menu-compact .sn-top::after { inset-inline-start:.9rem; inset-inline-end:.9rem; }
.menu-compact .sn-nav { padding-top:.55rem; }
.menu-compact .sn-logo { display:none; }
.menu-compact .sn-coeur { display:flex; }
.menu-compact .sn-coeur svg, .menu-compact .sn-coeur img { height:30px !important; width:auto; }
.menu-compact .sn-reduire { position:static; transform:none; opacity:1; }
.menu-compact .nav-heading { display:none; }
.menu-compact .nav-group { margin-top:.35rem; padding-top:.35rem; border-top:1px solid var(--side-line); }
.menu-compact .nav-group-racine { border-top:none; padding-top:0; border-bottom:none; }
.menu-compact .nav-group.closed .nav { max-height:600px; }
.menu-compact .nav-link { justify-content:center; padding:.62rem 0; }
.menu-compact .nav-lab { display:none; }
.menu-compact .nav-count { position:absolute; top:3px; inset-inline-end:5px; min-width:16px; height:16px; font-size:.6rem; padding:0 .25rem; }
.menu-compact .nav-link:hover::after { content:attr(data-tip); position:fixed; inset-inline-start:calc(var(--sidenav-compact) + 6px); margin-top:0; background:#111318; color:#fff; font-size:.82rem; font-weight:600; padding:.38rem .65rem; border-radius:8px; box-shadow:var(--shadow-md); pointer-events:none; z-index:200; }

/* ============================================================ Barre du haut */
.main-content { margin-inline-start:var(--sidenav-w); min-height:100vh; display:flex; flex-direction:column; transition:margin-inline-start .22s ease; }
/* grille 3 colonnes : fil d'Ariane | recherche centrée | actions. Les colonnes latérales sont égales tant que
   la recherche (rétrécie selon --topnav-droite-w, mesuré en JS) laisse la place au bloc d'actions. */
.topnav { position:sticky; top:0; z-index:110; height:var(--topbar-h); display:grid; grid-template-columns:minmax(0, 1fr) auto 1fr; align-items:center; column-gap:1rem; padding:0 1.75rem; container-type:inline-size; background:rgba(243,244,246,.86); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid transparent; transition:border-color .2s, background .2s; }
.topnav.defile { border-bottom-color:var(--line); background:rgba(255,255,255,.9); }
.menu-toggle { display:none; width:40px; height:40px; border:none; border-radius:10px; background:transparent; color:var(--heading); cursor:pointer; align-items:center; justify-content:center; }
.menu-toggle:hover { background:var(--surface); }
.menu-toggle .ic { width:22px; height:22px; }
.topnav-gauche { display:flex; align-items:center; gap:.6rem; min-width:0; }
.crumbs { display:flex; align-items:center; gap:.35rem; min-width:0; font-size:.88rem; color:var(--muted); white-space:nowrap; overflow:hidden; }
.crumbs a { color:var(--muted); display:inline-flex; align-items:center; }
.crumbs a:hover { color:var(--heading); }
.crumb-sep { display:inline-flex; color:var(--faint); }
.crumb-sep .ic { width:14px; height:14px; }
.crumb-home .ic { width:16px; height:16px; }
.crumb-cur { color:var(--heading); font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.gsearch-btn { display:flex; align-items:center; gap:.6rem; width:min(440px, 34vw); width:clamp(13rem, calc(100cqi - 2 * var(--topnav-droite-w, 23rem) - 2rem), 440px); padding:.55rem .6rem .55rem .9rem; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--faint); font:inherit; font-size:.88rem; cursor:pointer; box-shadow:var(--shadow-xs); transition:border-color .15s, box-shadow .15s; }
.gsearch-btn:hover { border-color:var(--line-strong); box-shadow:var(--shadow-sm); }
.gsearch-btn span { flex:1; text-align:start; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gsearch-btn .ic { color:var(--muted); }
.topnav-droite { display:flex; align-items:center; gap:.55rem; justify-self:end; width:max-content; }
.theme-bascule .ic-sun, .theme-bascule-menu .ic-sun { display:none; }
.theme-bascule:hover .ic { color:var(--violet); }
.btn-scan { display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .95rem; border-radius:11px; background:var(--heading); color:#fff; font-weight:600; font-size:.88rem; }
.btn-scan:hover { background:#000; color:#fff; }
.btn-rond { position:relative; width:40px; height:40px; border-radius:11px; border:1px solid var(--line); background:var(--surface); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow-xs); }
.btn-rond:hover { color:var(--heading); border-color:var(--line-strong); }
.btn-rond .ic { width:19px; height:19px; }
.pastille { position:absolute; top:-5px; inset-inline-end:-5px; min-width:18px; height:18px; padding:0 .3rem; border-radius:99px; background:var(--brand); color:#fff; font-size:.66rem; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--canvas); }
.user-btn { display:flex; align-items:center; gap:.6rem; padding:.25rem .55rem .25rem .3rem; border:1px solid transparent; border-radius:12px; background:transparent; cursor:pointer; font:inherit; color:var(--heading); }
.user-btn:hover { background:var(--surface); border-color:var(--line); }
.user-btn > .ic { width:15px; height:15px; color:var(--muted); }
.uname { display:flex; flex-direction:column; line-height:1.15; text-align:start; font-weight:600; font-size:.88rem; }
.uname small { font-size:.72rem; color:var(--muted); font-weight:500; }
.menu-compte { display:flex; gap:.7rem; align-items:center; padding:.6rem .7rem .8rem; border-bottom:1px solid var(--line-2); margin-bottom:.3rem; }
.menu-compte b { display:block; color:var(--heading); font-size:.9rem; }
.menu-compte small { color:var(--muted); font-size:.78rem; }

/* ============================================================ Contenu */
.container-app { flex:1; width:100%; max-width:1560px; margin:0 auto; padding:1.4rem 1.75rem 2.5rem; animation:page-in .28s ease; }
@keyframes page-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem 1.5rem; flex-wrap:wrap; margin-bottom:1.35rem; }
.page-titres { min-width:0; }
.page-title { font-size:1.72rem; font-weight:750; letter-spacing:-.028em; margin:0; line-height:1.2; }
.page-sub { margin-top:.35rem; color:var(--muted); font-size:.92rem; display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.page-actions { display:flex; gap:.55rem; flex-wrap:wrap; align-items:center; }
.module-tabs { display:flex; gap:.2rem; margin:-.35rem 0 1.4rem; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.module-tabs::-webkit-scrollbar { display:none; }
.module-tabs a { display:inline-flex; align-items:center; gap:.45rem; padding:.62rem .8rem; margin-bottom:-1px; border-bottom:2px solid transparent; color:var(--muted); font-size:.9rem; font-weight:550; white-space:nowrap; }
.module-tabs a .ic { width:16px; height:16px; }
.module-tabs a:hover { color:var(--heading); }
.module-tabs a.actif { color:var(--heading); border-bottom-color:var(--brand); font-weight:650; }
.module-tabs a.actif .ic { color:var(--brand); }
.footer-app { padding:1rem 1.75rem 1.4rem; color:var(--faint); font-size:.78rem; text-align:center; }
.fil { display:none; }

/* ============================================================ Cartes */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-xs); margin-bottom:1.35rem; overflow:hidden; }
.card-header { display:flex; align-items:center; gap:.8rem 1rem; flex-wrap:wrap; padding:1rem 1.35rem; border-bottom:1px solid var(--line-2); min-height:60px; }
.card-header h3 { margin:0; flex:1 1 12rem; display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; font-size:1rem; font-weight:650; letter-spacing:-.01em; }
.card-header h3 .ic { color:var(--muted); }
.card-header .card-desc { flex-basis:100%; margin:-.2rem 0 0; color:var(--muted); font-size:.85rem; }
.card-body { padding:1.35rem; }
.card-table .card-body { padding:0; }
.card-foot { padding:.9rem 1.35rem; border-top:1px solid var(--line-2); background:var(--surface-2); display:flex; gap:.6rem; justify-content:flex-end; flex-wrap:wrap; }
.card.card-plate { box-shadow:none; }
.card.card-sombre { background:linear-gradient(135deg, #15171c, #262a31); border-color:#22252b; color:#e5e7eb; }
.grille-2 { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.35rem; }
.grille-3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.35rem; }
.grille-2 > .card, .grille-3 > .card { margin-bottom:0; }
.grille-lat { display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:1.35rem; align-items:start; }
.grille-lat > div > .card:last-child { margin-bottom:0; }

/* ============================================================ Indicateurs */
.kpis { display:grid; gap:1rem; margin-bottom:1.35rem; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); }
.kpi { position:relative; display:flex; flex-direction:column; gap:.2rem; padding:1rem 1.15rem 1.05rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-xs); color:var(--text); overflow:hidden; transition:box-shadow .16s, transform .16s, border-color .16s; }
a.kpi:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--line-strong); color:var(--text); }
.kpi-tete { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.15rem; }
.kpi-lab { font-size:.82rem; color:var(--muted); font-weight:550; }
.kpi-ico { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--surface-3); color:var(--muted); flex:none; }
.kpi-ico .ic { width:18px; height:18px; }
.kpi-red .kpi-ico { background:var(--brand-50); color:var(--brand); }
.kpi-green .kpi-ico { background:var(--success-soft); color:var(--success); }
.kpi-orange .kpi-ico { background:var(--orange-soft); color:var(--orange); }
.kpi-blue .kpi-ico { background:var(--info-soft); color:var(--info); }
.kpi-violet .kpi-ico { background:var(--violet-soft); color:var(--violet); }
.kpi-teal .kpi-ico { background:var(--teal-soft); color:var(--teal); }
.kpi-val { font-size:1.62rem; font-weight:750; color:var(--heading); letter-spacing:-.03em; line-height:1.15; font-variant-numeric:tabular-nums; }
.kpi-val small { font-size:.85rem; font-weight:600; color:var(--muted); letter-spacing:0; }
.kpi-sub { font-size:.8rem; color:var(--muted); }
.kpi-sub b { color:var(--danger); }
.kpi-alerte { border-color:#fde0bd; background:linear-gradient(180deg, #fff 55%, var(--brand-50)); }
.kpi-alerte .kpi-val { color:var(--danger); }
.kpi-alerte::after { content:''; position:absolute; top:0; inset-inline-start:1.15rem; inset-inline-end:1.15rem; height:3px; border-radius:0 0 3px 3px; background:var(--brand); }
.tendance { display:inline-flex; align-items:center; font-weight:700; font-size:.74rem; padding:.05rem .42rem; border-radius:6px; }
.tendance.hausse { color:var(--success); background:var(--success-soft); }
.tendance.baisse { color:var(--danger); background:var(--danger-soft); }
.jauge { height:6px; border-radius:99px; background:var(--surface-3); overflow:hidden; margin:.3rem 0 .15rem; }
.jauge span { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, #FF2D7A, var(--brand)); }
.stats-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:1rem; margin-bottom:1.35rem; }
.stat-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:1.1rem 1.25rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.stat-card .label { font-size:.82rem; color:var(--muted); font-weight:550; }
.stat-card .value { font-size:1.5rem; font-weight:750; color:var(--heading); }
.mini-kpis { display:grid; grid-template-columns:repeat(3, 1fr); gap:.5rem; margin-bottom:.8rem; }
.mini-kpis div { background:var(--surface-2); border:1px solid var(--line-2); border-radius:12px; padding:.6rem; text-align:center; }
.mini-kpis b { display:block; font-size:1.25rem; color:var(--heading); }
.mini-kpis span { font-size:.72rem; color:var(--muted); }

/* ============================================================ Tableaux */
.table-wrap { overflow-x:auto; }
table.table { width:100%; border-collapse:separate; border-spacing:0; }
.table th { position:sticky; top:0; z-index:1; padding:.68rem 1rem; background:var(--surface-2); color:var(--muted); font-size:.72rem; font-weight:650; text-transform:uppercase; letter-spacing:.06em; text-align:start; border-bottom:1px solid var(--line); white-space:nowrap; }
.table th:first-child, .table td:first-child { padding-inline-start:1.35rem; }
.table th:last-child, .table td:last-child { padding-inline-end:1.35rem; }
.table td { padding:.78rem 1rem; border-bottom:1px solid var(--line-2); vertical-align:middle; font-size:.92rem; }
.table tbody tr { transition:background .1s; }
.table tbody tr:hover td { background:#fafbfc; }
.table tbody tr:last-child td { border-bottom:none; }
.table td b, .table td .fw-bold { color:var(--heading); }
.table td a.fw-bold, .table td > a:not(.btn) { font-weight:600; }
.table td a[href^="tel:"], .table td a[href^="mailto:"] { color:var(--text); font-weight:500; }
.table td a[href^="tel:"]:hover, .table td a[href^="mailto:"]:hover { color:var(--brand); }
.table td small { font-size:.8rem; }
.table .num { text-align:end; font-variant-numeric:tabular-nums; white-space:nowrap; }
.table .center { text-align:center; }
.table-sm td { padding:.55rem .85rem; font-size:.88rem; }
.table-sm th { padding:.55rem .85rem; }
.table-click tbody tr[data-href] { cursor:pointer; }
.table td.actions, .table td:has(> .btn-icon), .table td:has(> form > .btn-icon) { text-align:end; white-space:nowrap; width:1%; }
.table td.actions .btn + .btn, .table td.actions form + form, .table td.actions .btn + form, .table td.actions form + .btn { margin-inline-start:.15rem; }
.table tr.ligne-alerte td:first-child { box-shadow:inset 3px 0 0 var(--danger); }
.table tr.selection td { background:var(--brand-50); }
.table tr.total td { font-weight:700; color:var(--heading); background:var(--surface-2); }
.table td.vide, .vide { text-align:center; color:var(--muted); padding:2.6rem 1rem !important; }
.table tr.ligne-vide td { padding:0 !important; }
.table tr.ligne-vide:hover td { background:transparent; }
tr.flash td { animation:flash 1.1s ease; }
@keyframes flash { 0% { background:#fff4c2; } 100% { background:transparent; } }
.vignette { width:56px; }
.vignette img, .vignette span { width:40px; height:40px; border-radius:10px; object-fit:cover; display:flex; align-items:center; justify-content:center; background:var(--surface-3); color:var(--faint); }
.personne { display:flex; align-items:center; gap:.7rem; min-width:0; max-width:380px; }
.personne > div { min-width:0; overflow:hidden; }
.personne b { display:block; color:var(--heading); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.personne b a { color:var(--heading); }
.personne b a:hover { color:var(--brand); }
.personne small { display:block; color:var(--muted); font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.code { font-family:var(--mono); font-size:.88em; letter-spacing:.01em; }
.ref { font-family:var(--mono); font-size:.86rem; font-weight:600; color:var(--heading); }

/* avatars */
.avatar { width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; flex:none; font-size:.78rem; font-weight:700; letter-spacing:.02em; color:#fff; background:#6b7280; }
.av-0 { background:linear-gradient(135deg, #E72773, #FF2D7A); }
.av-1 { background:linear-gradient(135deg, #2563eb, #60a5fa); }
.av-2 { background:linear-gradient(135deg, #0d9488, #34d399); }
.av-3 { background:linear-gradient(135deg, #7c3aed, #a78bfa); }
.av-4 { background:linear-gradient(135deg, #ea580c, #fbbf24); }
.av-5 { background:linear-gradient(135deg, #334155, #64748b); }
.avatar.av-lg { width:52px; height:52px; border-radius:14px; font-size:1.05rem; }

/* ============================================================ Badges */
.badge { display:inline-flex; align-items:center; gap:.38rem; padding:.2rem .62rem; border-radius:999px; font-size:.75rem; font-weight:650; line-height:1.5; white-space:nowrap; }
.badge::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.badge-success   { background:var(--success-soft); color:var(--success); }
.badge-danger    { background:var(--danger-soft); color:var(--danger); }
.badge-warning   { background:var(--warning-soft); color:var(--warning); }
.badge-info      { background:var(--info-soft); color:var(--info); }
.badge-primary   { background:var(--brand-50); color:var(--brand); }
.badge-secondary { background:var(--surface-3); color:#5f6670; }
.badge-violet    { background:var(--violet-soft); color:var(--violet); }
.badge-plein::before { display:none; }
.puce { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--faint); }

/* ============================================================ Boutons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.48rem; padding:.56rem 1.05rem; border:1px solid transparent; border-radius:var(--r-md); font:600 .9rem/1.3 var(--font); cursor:pointer; background:var(--surface); color:var(--text); text-align:center; white-space:nowrap; transition:background .14s, border-color .14s, color .14s, box-shadow .14s, transform .08s; }
.btn:active { transform:translateY(1px); }
.btn .ic { width:17px; height:17px; }
.btn-primary { background:var(--brand); color:#fff; box-shadow:0 1px 2px rgba(16,24,40,.12), inset 0 1px 0 rgba(255,255,255,.14); }
.btn-primary:hover { background:var(--brand-600); color:#fff; }
.btn-light, .btn-secondary { background:var(--surface); color:var(--heading); border-color:var(--line-strong); box-shadow:var(--shadow-xs); }
.btn-light:hover, .btn-secondary:hover { background:var(--surface-2); border-color:#c3c8cf; color:var(--heading); }
.btn-dark { background:var(--heading); color:#fff; }
.btn-dark:hover { background:#000; color:#fff; }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover { filter:brightness(1.07); color:#fff; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#b91c1c; color:#fff; }
.btn-warning { background:#f59e0b; color:#fff; }
.btn-info { background:var(--info); color:#fff; }
.btn-ghost { background:transparent; color:var(--text); }
.btn-ghost:hover { background:var(--surface-3); color:var(--heading); }
.btn-sm { padding:.4rem .75rem; font-size:.83rem; border-radius:9px; }
.btn-sm .ic { width:15px; height:15px; }
.btn-lg { padding:.78rem 1.35rem; font-size:.98rem; border-radius:12px; }
.btn[disabled], .btn.disabled { opacity:.45; cursor:not-allowed; pointer-events:none; }
.btn-link { background:none; border:none; color:var(--brand); padding:.4rem .5rem; box-shadow:none; }
.btn-link:hover { text-decoration:underline; background:none; }
.btn-lien { border:none; background:none; padding:0; color:var(--brand); font:inherit; text-decoration:underline; cursor:pointer; }
/* boutons icône (actions de ligne) */
.btn-icon { width:34px; height:34px; padding:0 !important; border:none !important; background:transparent !important; color:#8b929c; box-shadow:none !important; border-radius:9px; }
.btn-icon .ic { width:18px; height:18px; }
.btn-icon:hover { background:var(--surface-3) !important; color:var(--heading); }
.btn-icon.btn-info:hover, .btn-icon-info:hover { color:var(--info); background:var(--info-soft) !important; }
.btn-icon.btn-success:hover, .btn-icon-success:hover { color:var(--success); background:var(--success-soft) !important; }
.btn-icon.btn-danger:hover, .btn-icon-danger:hover { color:var(--danger); background:var(--danger-soft) !important; }
.btn-icon.btn-warning:hover, .btn-icon-warning:hover { color:var(--warning); background:var(--warning-soft) !important; }
.btn-groupe { display:inline-flex; }
.btn-groupe .btn { border-radius:0; }
.btn-groupe .btn:first-child { border-radius:var(--r-md) 0 0 var(--r-md); }
.btn-groupe .btn:last-child { border-radius:0 var(--r-md) var(--r-md) 0; }
.btn-groupe .btn + .btn { margin-inline-start:-1px; }

/* ============================================================ Formulaires */
.form-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1rem 1.15rem; }
.form-grid .full { grid-column:1 / -1; }
.form-grid-1 { grid-template-columns:1fr; }
.form-grid-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.form-row-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:.8rem; }
label.flabel { display:block; margin-bottom:.35rem; font-size:.82rem; font-weight:600; color:var(--heading); }
.req::after { content:' *'; color:var(--brand); }
.form-aide { display:block; margin-top:.3rem; font-size:.78rem; color:var(--muted); }
.form-control { width:100%; min-height:40px; padding:.55rem .8rem; border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--surface); color:var(--heading); font:400 .92rem/1.4 var(--font); box-shadow:var(--shadow-xs); transition:border-color .13s, box-shadow .13s; }
.form-control:hover { border-color:#c1c6cd; }
.form-control:focus { outline:none; border-color:var(--brand); box-shadow:var(--ring); }
.form-control::placeholder { color:#a9afb8; }
select.form-control { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%236b7280' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .8rem center; padding-inline-end:2.2rem; }
textarea.form-control { resize:vertical; min-height:88px; }
input[type=date].form-control, input[type=time].form-control, input[type=month].form-control { min-width:0; }
.form-control.form-control-sm { min-height:34px; padding:.35rem .6rem; font-size:.87rem; border-radius:8px; }
.form-control.erreur { border-color:var(--danger); box-shadow:0 0 0 3.5px var(--danger-soft); }
fieldset[disabled] .form-control { background:var(--surface-2); color:var(--muted); border-color:var(--line); box-shadow:none; }
.fs { border:none; margin:0; padding:0; min-width:0; }
.card-body.fs { padding:1.35rem; }
.input-inline { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.input-inline.serre { gap:.35rem; flex-wrap:nowrap; }
.input-inline .form-control { width:auto; }
.input-suffix { display:flex; align-items:stretch; }
.input-suffix .form-control { border-start-end-radius:0; border-end-end-radius:0; min-width:0; }
.input-suffix span { display:flex; align-items:center; padding:0 .75rem; background:var(--surface-2); border:1px solid var(--line-strong); border-inline-start:none; border-radius:0 var(--r-md) var(--r-md) 0; color:var(--muted); font-size:.84rem; white-space:nowrap; }
.input-icone { position:relative; }
.input-icone > .ic { position:absolute; inset-inline-start:.8rem; top:50%; transform:translateY(-50%); color:var(--faint); pointer-events:none; width:17px; height:17px; }
.input-icone > .form-control { padding-inline-start:2.35rem; }
.switch { display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; font-size:.9rem; margin:.25rem 1.2rem .25rem 0; user-select:none; color:var(--text); }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.switch input + span { position:relative; width:38px; height:22px; border-radius:99px; background:#d1d5db; transition:background .16s; flex:none; }
.switch input + span::after { content:''; position:absolute; top:3px; inset-inline-start:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.22); transition:transform .16s; }
.switch input:checked + span { background:var(--brand); }
.switch input:checked + span::after { transform:translateX(16px); }
.switch input:focus-visible + span { outline:2px solid var(--brand); outline-offset:2px; }
.radio { display:flex; align-items:center; gap:.5rem; font-size:.9rem; margin:.3rem 0; cursor:pointer; }
.radio input, input[type=checkbox], input[type=radio] { accent-color:var(--brand); }
input[type=checkbox] { width:16px; height:16px; }
.liste-choix { display:flex; flex-direction:column; gap:.5rem; }
.liste-choix label { display:flex; gap:.65rem; align-items:baseline; padding:.75rem .95rem; border:1px solid var(--line-strong); border-radius:12px; cursor:pointer; transition:border-color .13s, background .13s; }
.liste-choix label:hover { border-color:#c1c6cd; }
.liste-choix label:has(input:checked) { border-color:var(--brand); background:var(--brand-50); }
.form-section { margin:1.3rem 0 .75rem; padding-top:1.1rem; border-top:1px solid var(--line-2); }
.form-section:first-child { margin-top:0; padding-top:0; border-top:none; }
.form-section h4 { margin:0; font-size:.92rem; }
.form-section p { margin:.15rem 0 0; font-size:.82rem; color:var(--muted); }
.sous-titre-form { margin:.6rem 0 0; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; }
.options-fiscales { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; padding-top:.5rem; border-top:1px dashed var(--line); }
.options-fiscales .form-control { max-width:260px; }
.options-fiscales .input-suffix { max-width:120px; }
input[type=color].couleur { width:54px; height:40px; border:1px solid var(--line-strong); border-radius:10px; padding:3px; background:var(--surface); cursor:pointer; }
.stepper { display:inline-flex; align-items:center; border:1px solid var(--line-strong); border-radius:10px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-xs); }
.stepper button { width:32px; height:34px; border:none; background:var(--surface-2); font-size:1.05rem; cursor:pointer; color:var(--heading); }
.stepper button:hover { background:var(--brand-50); color:var(--brand); }
.stepper input { width:50px; height:34px; border:none; background:transparent; text-align:center; font:inherit; font-weight:700; color:var(--heading); -moz-appearance:textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
details.repli > summary { list-style:none; cursor:pointer; }
details.repli > summary::-webkit-details-marker { display:none; }
details.repli > summary h3::after { content:''; margin-inline-start:auto; width:9px; height:9px; border-inline-end:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .2s; }
details.repli[open] > summary h3::after { transform:rotate(-135deg); }
details.repli:not([open]) > summary { border-bottom:none; }

/* ============================================================ Barres d'outils */
.filtres, .toolbar { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; padding:.85rem 1.35rem; border-bottom:1px solid var(--line-2); }
.filtres .form-control, .toolbar .form-control { width:auto; min-width:160px; min-height:38px; padding:.45rem .75rem; font-size:.88rem; }
.filtres input[type=search], .toolbar input[type=search] { min-width:260px; padding-inline-start:2.3rem; background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat .8rem center; }
.filtres input[type=search]:focus, .toolbar input[type=search]:focus { background-color:var(--surface); }
.filtres .espace, .toolbar .espace { flex:1; }
.toolbar input[type=search] { flex:0 1 380px; }
.onglets { display:inline-flex; max-width:100%; gap:.2rem; padding:.22rem; border-radius:11px; background:var(--surface-3); flex-wrap:wrap; }
.onglets a, .onglets button { display:inline-flex; align-items:center; gap:.4rem; padding:.38rem .8rem; border-radius:8px; border:none; background:none; color:var(--muted); font:550 .86rem/1.3 var(--font); cursor:pointer; white-space:nowrap; }
.onglets a:hover, .onglets button:hover { color:var(--heading); }
.onglets a.actif, .onglets button.actif { background:#fff; color:var(--heading); box-shadow:var(--shadow-sm); font-weight:650; }
.onglets-compacts a { padding:.32rem .7rem; font-size:.83rem; }
.onglet-n { min-width:18px; padding:0 .3rem; border-radius:99px; background:rgba(16,18,23,.07); font-size:.7rem; font-weight:700; text-align:center; }
.onglets a.actif .onglet-n { background:var(--brand-50); color:var(--brand); }
.searchbar { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.searchbar .form-control { width:auto; min-width:200px; }
.card-header .form-control[data-filter], .recherche-mini { max-width:240px; min-height:36px; padding:.4rem .8rem; border-radius:999px; background:var(--surface-2); font-size:.87rem; }
.pagination { display:flex; gap:.3rem; align-items:center; padding:.9rem 1.35rem; border-top:1px solid var(--line-2); flex-wrap:wrap; }
.pagination a, .pagination span { min-width:34px; height:34px; padding:0 .6rem; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; border:1px solid var(--line); color:var(--text); font-size:.85rem; background:var(--surface); }
.pagination a:hover { border-color:var(--line-strong); color:var(--heading); }
.pagination .cur { background:var(--heading); color:#fff; border-color:var(--heading); }

/* ============================================================ Menus déroulants */
.menu-deroulant { position:relative; }
.menu-liste { display:none; position:absolute; inset-inline-end:0; top:calc(100% + 8px); min-width:250px; padding:.35rem; background:var(--surface-elev); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); z-index:140; }
.menu-deroulant.ouvert .menu-liste { display:block; animation:pop .14s ease; }
@keyframes pop { from { opacity:0; transform:translateY(-4px) scale(.98); } to { opacity:1; transform:none; } }
.menu-large { min-width:340px; }
.menu-liste form { margin:0; }
.menu-liste > a, .menu-liste > button, .menu-liste form > button { display:flex; width:100%; align-items:center; gap:.6rem; padding:.55rem .7rem; border:none; background:none; border-radius:9px; color:var(--heading); font:500 .88rem/1.3 var(--font); text-align:start; cursor:pointer; }
.menu-liste > a .ic, .menu-liste > button .ic, .menu-liste form > button .ic { color:var(--muted); width:17px; height:17px; }
.menu-liste > a:hover, .menu-liste > button:hover, .menu-liste form > button:hover { background:var(--surface-3); color:var(--heading); }
.menu-liste .danger, .menu-liste .danger .ic { color:var(--danger) !important; }
.menu-liste hr, .menu-sep { border:none; border-top:1px solid var(--line-2); margin:.3rem .2rem; }
.menu-titre { padding:.45rem .7rem .3rem; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.menu-vide { display:flex; align-items:center; gap:.5rem; padding:.9rem .7rem; color:var(--success); font-size:.88rem; font-weight:600; }
.notif-item { align-items:flex-start !important; }
.notif-ico { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none; }
.notif-ico .ic { width:16px !important; height:16px !important; }
.ton-danger { background:var(--danger-soft); } .ton-danger .ic { color:var(--danger) !important; }
.ton-warning { background:var(--warning-soft); } .ton-warning .ic { color:var(--warning) !important; }
.ton-info { background:var(--info-soft); } .ton-info .ic { color:var(--info) !important; }
.notif-item span:last-child { padding-top:.25rem; line-height:1.35; }

/* ============================================================ Dialogues */
dialog { color:var(--text); font-family:var(--font); }
dialog.confirm-dlg { background:var(--surface-elev); border:none; border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:1.6rem 1.7rem 1.35rem; max-width:440px; width:92%; }
dialog::backdrop { background:rgba(15,17,21,.46); backdrop-filter:blur(3px); }
.confirm-dlg h4 { margin-bottom:.4rem; font-size:1.1rem; }
.confirm-dlg p { margin:.2rem 0 1.35rem; font-size:.93rem; color:var(--text); }
.confirm-dlg .d-flex { justify-content:flex-end; }
dialog[open].confirm-dlg { animation:pop .16s ease; }
/* tiroir latéral */
dialog.drawer { position:fixed; inset-block:0; inset-inline:auto 0; margin:0; height:100vh; max-height:100vh; width:min(560px, 100vw); max-width:100vw; padding:0; border:none; border-radius:0; background:var(--surface); box-shadow:var(--shadow-lg); }
dialog.drawer.drawer-large { width:min(760px, 100vw); }
dialog.drawer[open] { animation:tiroir .24s cubic-bezier(.2,.8,.2,1); }
@keyframes tiroir { from { transform:translateX(40px); opacity:.4; } to { transform:none; opacity:1; } }
.drawer-panel { display:flex; flex-direction:column; height:100%; }
.drawer-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.25rem 1.5rem 1.05rem; border-bottom:1px solid var(--line-2); }
.drawer-head h3 { margin:0; font-size:1.15rem; }
.drawer-head p { margin:.2rem 0 0; color:var(--muted); font-size:.86rem; }
.drawer-body { flex:1; overflow-y:auto; padding:1.35rem 1.5rem; }
.drawer-foot { display:flex; justify-content:flex-end; gap:.6rem; padding:.95rem 1.5rem; border-top:1px solid var(--line-2); background:var(--surface-2); }
/* palette de recherche */
dialog.palette { margin:10vh auto auto; width:min(660px, 94vw); max-height:72vh; padding:0; background:var(--surface-elev); border:none; border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; }
dialog.palette[open] { display:flex; flex-direction:column; animation:pop .15s ease; }
.palette-champ { display:flex; align-items:center; gap:.7rem; padding:.9rem 1.1rem; border-bottom:1px solid var(--line-2); }
.palette-champ .ic { width:20px; height:20px; color:var(--muted); }
.palette-champ input { flex:1; border:none; outline:none; font:500 1.02rem var(--font); color:var(--heading); background:none; }
.palette-champ input::-webkit-search-cancel-button { display:none; }
.palette-resultats { overflow-y:auto; padding:.4rem; flex:1; }
.pal-cat { padding:.55rem .75rem .25rem; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.pal-item { display:flex; align-items:center; gap:.75rem; padding:.55rem .75rem; border-radius:10px; color:var(--text); }
.pal-item .pal-ico { width:32px; height:32px; border-radius:9px; background:var(--surface-3); display:flex; align-items:center; justify-content:center; color:var(--muted); flex:none; }
.pal-item .pal-ico .ic { width:17px; height:17px; }
.pal-item b { color:var(--heading); font-weight:600; font-size:.92rem; }
.pal-item small { margin-inline-start:auto; color:var(--muted); font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:45%; }
.pal-item.sel, .pal-item:hover { background:var(--brand-50); color:var(--heading); }
.pal-item.sel .pal-ico { background:#fff; color:var(--brand); }
.pal-vide { padding:2rem 1rem; text-align:center; color:var(--muted); font-size:.9rem; }
.palette-pied { display:flex; gap:1.2rem; padding:.6rem 1.1rem; border-top:1px solid var(--line-2); background:var(--surface-2); font-size:.76rem; color:var(--muted); }
.palette-pied kbd { margin-inline-end:.2rem; }

/* ============================================================ Notifications (toasts) */
.toasts { position:fixed; top:calc(var(--topbar-h) + 12px); inset-inline-end:1.4rem; z-index:300; display:flex; flex-direction:column; gap:.55rem; max-width:420px; }
.alert { position:relative; padding:.85rem 2.4rem .85rem 1.1rem; border-radius:var(--r-lg); background:#16181d; color:#fff; font-weight:550; font-size:.9rem; box-shadow:var(--shadow-lg); animation:toast-in .25s ease; display:flex; align-items:flex-start; gap:.6rem; }
@keyframes toast-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
.alert.hide { opacity:0; transform:translateY(-8px); transition:all .3s; }
.alert::before { content:''; width:8px; height:8px; border-radius:50%; margin-top:.4rem; flex:none; background:#9ca3af; }
.alert-success::before { background:#4ade80; }
.alert-danger::before { background:#ff6b6b; }
.alert-warning::before { background:#fbbf24; }
.alert-info::before { background:#60a5fa; }
.alert .a-close { position:absolute; inset-inline-end:.55rem; top:.6rem; background:none; border:none; color:rgba(255,255,255,.55); cursor:pointer; font-size:.9rem; padding:.1rem .3rem; }
.alert .a-close:hover { color:#fff; }

/* ============================================================ Blocs divers */
.etat-vide { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.3rem; padding:2.6rem 1.5rem; color:var(--muted); }
.etat-vide-ico { width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:var(--surface-3); color:var(--faint); margin-bottom:.4rem; }
.etat-vide-ico .ic { width:24px; height:24px; }
.etat-vide b { color:var(--heading); font-size:.98rem; }
.etat-vide p { margin:0 0 .6rem; font-size:.88rem; max-width:420px; }
.note-info { display:flex; gap:.65rem; align-items:flex-start; padding:.8rem 1rem; margin-bottom:1.2rem; border-radius:var(--r-lg); background:var(--info-soft); color:#1e40af; font-size:.88rem; border:1px solid #dbe6fd; }
.note-info .ic { flex:none; margin-top:.12rem; }
.note-warning { background:var(--warning-soft); color:#92400e; border-color:#fde7c2; }
.note-success { background:var(--success-soft); color:var(--success); border-color:#c9f0dd; }
.section-titre { font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:700; margin:1.5rem 0 .75rem; }
.kv { display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0; border-bottom:1px solid var(--line-2); font-size:.9rem; }
.kv:last-child { border-bottom:none; }
.kv span { color:var(--muted); }
.kv b { color:var(--heading); text-align:end; }
.liste-liens { display:flex; flex-direction:column; gap:.2rem; padding:.6rem .7rem !important; }
.liste-liens a { display:grid; grid-template-columns:1fr auto; gap:.05rem .6rem; align-items:center; padding:.55rem .65rem; border-radius:11px; color:var(--text); }
.liste-liens a:hover { background:var(--surface-3); }
.liste-liens a span:first-child { font-size:.76rem; color:var(--muted); grid-column:1; }
.liste-liens a b { grid-column:1; color:var(--heading); font-size:.9rem; }
.liste-liens a .badge { grid-column:2; grid-row:1 / span 2; }
.etapes { display:flex; gap:.5rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.etape { flex:1; min-width:160px; display:flex; align-items:center; gap:.6rem; padding:.65rem .85rem; border-radius:12px; background:var(--surface); border:1px solid var(--line); color:var(--muted); font-size:.85rem; font-weight:550; }
.etape span { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface-3); font-weight:700; font-size:.78rem; flex:none; }
.etape span .ic { width:14px; height:14px; stroke-width:2.4; }
.etape.fait { color:var(--success); } .etape.fait span { background:var(--success-soft); color:var(--success); }
.etape.actif { color:var(--heading); border-color:var(--brand); box-shadow:var(--ring); } .etape.actif span { background:var(--brand); color:#fff; }
.bordure-haut { border-top:1px solid var(--line-2); }
.fiche-tete { display:flex; align-items:center; gap:1rem; }
.fiche-tete .avatar { width:56px; height:56px; border-radius:16px; font-size:1.1rem; }
.chip { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .6rem; border-radius:8px; background:var(--surface-3); color:var(--text); font-size:.8rem; font-weight:550; }
.chip .ic { width:14px; height:14px; color:var(--muted); }
.liste-param { display:flex; flex-direction:column; gap:.3rem; }
.liste-param-item { display:flex; justify-content:space-between; align-items:center; padding:.35rem .4rem .35rem .8rem; background:var(--surface-2); border:1px solid var(--line-2); border-radius:10px; font-size:.9rem; }

/* ============================================================ Documents (éditeur) */
.doc-grid { display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:1.35rem; align-items:start; }
.doc-main, .doc-side { min-width:0; }
.sticky { position:sticky; top:calc(var(--topbar-h) + 14px); }
.lignes-doc { min-width:980px; }
.lignes-doc th { padding:.62rem .45rem; font-size:.68rem; }
.lignes-doc td { padding:.45rem .35rem; vertical-align:top; }
.lignes-doc td:first-child, .lignes-doc th:first-child { padding-inline-start:1.1rem; }
.lignes-doc .form-control { min-height:36px; padding:.42rem .55rem; font-size:.88rem; border-radius:8px; box-shadow:none; }
.lignes-doc .l-desc { margin-top:.3rem; min-height:30px; font-size:.8rem; padding:.3rem .55rem; color:var(--muted); border-style:dashed; }
.lignes-doc .l-total { font-weight:700; color:var(--heading); padding-top:.95rem; white-space:nowrap; }
.lignes-doc td.grise .form-control { background:var(--surface-2); color:var(--faint); }
.lignes-doc td.actions { padding-top:.5rem; }
.lignes-doc input[type=number] { -moz-appearance:textfield; text-align:end; }
.lignes-doc input[type=number]::-webkit-outer-spin-button, .lignes-doc input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.lignes-doc .l-qte, .lignes-doc .l-jours { min-width:62px; }
.lignes-doc .l-pu { min-width:96px; }
.lignes-doc .l-tarif { min-width:104px; }
.lignes-doc .l-tva { min-width:78px; }
.lignes-doc .remise-combo { min-width:128px; }
.lignes-doc .l-rem { min-width:64px; }
.lignes-doc .l-des { min-width:220px; }
.remise-combo { display:flex; }
.remise-combo .form-control:first-child { border-radius:8px 0 0 8px; min-width:0; }
.remise-combo select.form-control { width:auto; min-width:64px; border-radius:0 8px 8px 0; border-inline-start:none; padding-inline-end:1.7rem; background-position:right .5rem center; }
.lignes-vide { text-align:center; color:var(--muted); padding:2rem 1rem; }
.ajout-produit { display:flex; align-items:center; gap:.6rem; flex:1; min-width:280px; max-width:640px; position:relative; }
/* carte Lignes : recherche de produit et « Ligne libre » collés au titre, à gauche */
.lignes-tete { justify-content:flex-start; }
.lignes-tete h3 { flex:0 0 auto; }
.lignes-tete .ajout-produit { max-width:720px; }
@media (max-width:700px) { .lignes-tete .ajout-produit { flex-basis:100%; min-width:0; } }
.ajout-produit .ic-wrap { position:absolute; inset-inline-start:.85rem; color:var(--muted); pointer-events:none; display:flex; }
.ajout-produit .form-control { padding-inline-start:2.4rem; border-radius:999px; background:var(--surface-2); }
.ajout-produit .form-control:focus { background:var(--surface); }
.aide-periode { display:flex; align-items:flex-end; min-width:0; }
/* action « appliquer le nombre de jours » : lien sous le champ, jamais plus large que la colonne */
.btn-lien.aide-jours { display:inline-flex; align-items:center; gap:.35rem; margin-top:.4rem; max-width:100%; font-size:.8rem; font-weight:600; text-align:start; line-height:1.3; white-space:normal; }
.btn-lien.aide-jours .ic { width:14px; height:14px; flex:none; }
.btn-lien.aide-jours { text-decoration:none; }
.btn-lien.aide-jours:hover { text-decoration:underline; }
#lignes-table select, #lignes-table input { min-width:74px; }
#lignes-table td { padding:.4rem .45rem; }
.totaux-box { max-width:380px; margin-inline-start:auto; background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:.7rem 1rem; }
.totaux-box table { width:100%; }
.totaux-box td { padding:.4rem .4rem; font-size:.92rem; }
.totaux-box tr.grand td { font-weight:750; color:var(--heading); border-top:2px solid var(--heading); font-size:1.05rem; }
.recap .card-body { padding:1.1rem 1.3rem; }
.recap-ligne { display:flex; justify-content:space-between; align-items:center; gap:.8rem; padding:.4rem 0; font-size:.92rem; }
.recap-ligne b { color:var(--heading); font-variant-numeric:tabular-nums; white-space:nowrap; }
.recap-ligne.sous { font-size:.82rem; color:var(--muted); padding:.18rem 0; }
.recap-ligne.sous b { color:var(--text); font-weight:600; }
.recap-ligne.fort { font-weight:700; color:var(--heading); border-top:1px solid var(--line); margin-top:.3rem; padding-top:.6rem; }
.recap-ligne .switch { margin:0; font-size:.92rem; }
.recap-ligne > label:not(.switch) { cursor:pointer; }
.recap-droite { display:inline-flex; align-items:center; gap:.65rem; }
.switch-sm input + span { width:30px; height:18px; }
.switch-sm input + span::after { top:3px; inset-inline-start:3px; width:12px; height:12px; }
.switch-sm input:checked + span::after { transform:translateX(12px); }
.recap-remise .remise-combo { max-width:170px; }
.recap-remise .form-control { min-height:34px; padding:.35rem .55rem; font-size:.88rem; }
.recap-total { display:flex; justify-content:space-between; align-items:center; margin:.8rem -.35rem .4rem; padding:.9rem 1rem; border-radius:14px; background:linear-gradient(135deg, var(--brand), #FF2D7A); color:#fff; font-weight:700; box-shadow:0 12px 24px -12px rgba(251,140,0,.6); }
.recap-total b { font-size:1.3rem; font-variant-numeric:tabular-nums; }
.recap-lettres { font-size:.8rem; color:var(--muted); font-style:italic; margin:.5rem 0 .2rem; line-height:1.4; }
.recap-actions { display:grid; gap:.55rem; margin-top:1rem; }

/* ============================================================ Scan (bureau) */
.scan-card { background:linear-gradient(135deg, #111318, #262a31); border-color:#1f2228; color:#fff; }
.scan-card .flabel { color:rgba(255,255,255,.72); }
.scan-zone { display:flex; gap:1.1rem; align-items:center; }
.scan-ico { width:56px; height:56px; border-radius:16px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; flex:none; }
.scan-ico .ic { width:28px; height:28px; color:#fff; }
.scan-champ { flex:1; min-width:0; }
.scan-input { font-size:1.12rem; min-height:50px; padding:.75rem 1rem; border-radius:12px; border:2px solid transparent; font-family:var(--mono); letter-spacing:.04em; flex:1; min-width:200px; }
.scan-input:focus { border-color:#FF2D7A; box-shadow:0 0 0 5px rgba(255,166,61,.22); }
.qte-scan { width:110px; flex:none; }
.qte-scan .form-control { min-height:50px; text-align:center; }
.scan-card .input-suffix span { background:rgba(255,255,255,.1); border-color:transparent; color:#fff; }
.scan-retour { margin-top:1rem; padding:.72rem 1rem; border-radius:12px; font-size:.93rem; animation:toast-in .2s ease; }
.scan-retour.ok { background:rgba(74,222,128,.14); color:#bbf7d0; }
.scan-retour.alerte { background:rgba(251,191,36,.15); color:#fde68a; }
.scan-retour.erreur { background:rgba(255,107,107,.17); color:#fecaca; }
.scan-retour span { float:inline-end; font-weight:700; }
.progression { margin-top:1.05rem; }
.progression-txt { font-size:.88rem; color:rgba(255,255,255,.8); margin-bottom:.4rem; }
.progression-txt b { color:#fff; font-size:1.08rem; }
.card:not(.scan-card) .progression-txt { color:var(--muted); }
.card:not(.scan-card) .progression-txt b { color:var(--heading); }
.progression-detail { font-size:.8rem; color:rgba(255,255,255,.65); margin-top:.45rem; }
.barre { height:8px; background:rgba(255,255,255,.12); border-radius:99px; overflow:hidden; }
.barre span { display:block; height:100%; background:linear-gradient(90deg, #4ade80, #16a34a); border-radius:99px; transition:width .3s; }
.scan-modes { display:flex; gap:.4rem; margin-bottom:1rem; flex-wrap:wrap; }
.scan-modes button { display:inline-flex; align-items:center; gap:.4rem; padding:.48rem .9rem; border-radius:999px; border:1px solid rgba(255,255,255,.2); background:transparent; color:rgba(255,255,255,.8); font:inherit; font-size:.86rem; cursor:pointer; }
.scan-modes button.actif { background:#fff; color:#111318; border-color:#fff; font-weight:650; }

/* ============================================================ Produit / QR */
.photo-produit { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.photo-produit img { width:84px; height:84px; object-fit:cover; border-radius:14px; border:1px solid var(--line); }
.qr-carte .card-body { text-align:center; }
.qr-visuel svg { width:180px; height:180px; border-radius:12px; }
.qr-code { font-family:var(--mono); font-weight:700; font-size:1.18rem; letter-spacing:.06em; color:var(--brand); margin:.4rem 0; }

/* ============================================================ Tableau de bord */
.periode { display:flex; align-items:center; gap:.4rem; }
.periode .form-control { width:auto; min-height:38px; }
.quick-actions { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:.8rem; margin-bottom:1.35rem; }
.qa { display:flex; align-items:center; gap:.7rem; padding:.8rem .95rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); font-weight:600; color:var(--heading); font-size:.9rem; box-shadow:var(--shadow-xs); transition:all .15s; }
.qa:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); color:var(--brand); border-color:var(--brand-100); }
.qa-ico { width:38px; height:38px; border-radius:11px; background:var(--brand-50); color:var(--brand); display:flex; align-items:center; justify-content:center; flex:none; font-size:1.05rem; }
.qa-ico .ic { width:19px; height:19px; }
.quick-actions .qa-scan { background:var(--heading); border-color:var(--heading); color:#fff; }
.quick-actions .qa-scan .qa-ico { background:rgba(255,255,255,.12); color:#fff; }
.quick-actions .qa-scan:hover { color:#fff; background:#000; }
.qa > span:last-child { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.qa-aide { font-size:.76rem; color:var(--muted); font-weight:500; margin-top:.1rem; }
.qa-scan .qa-aide { color:rgba(255,255,255,.6); }
.btn-groupe .form-control { width:auto; min-height:40px; box-shadow:none; }
.btn-groupe .btn { min-height:40px; }
.kpi-sub .jauge { display:block; margin:.3rem 0 .35rem; }
.mini-stats { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.35rem; }
.mini { display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .95rem; background:var(--surface); border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.86rem; }
.mini b { color:var(--heading); }
.mini.alerte { background:var(--warning-soft); color:var(--warning); border-color:#fde7c2; }
.dash-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap:1.2rem; margin-top:1.2rem; }
.dash-grid .card { margin-bottom:0; }
.dash-large { grid-column:1 / -1; }
@media (min-width:1200px) { .dash-large { grid-column:span 2; } }
.legende { display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--muted); }
.l-barre { width:12px; height:12px; border-radius:3px; background:var(--brand); margin-inline-start:.6rem; }
.l-ligne { width:16px; height:3px; border-radius:2px; background:var(--heading); margin-inline-start:.8rem; }
.graph { width:100%; height:auto; display:block; }
.g-grille { stroke:#eceef1; stroke-width:1; }
.g-axe { fill:#9aa0a8; font-size:10px; font-family:var(--font); }
.g-barre { fill:var(--brand); opacity:.88; }
.g-barre:hover { opacity:1; }
.g-ligne { fill:none; stroke:var(--heading); stroke-width:2.2; stroke-linejoin:round; }
.g-point { fill:var(--surface); stroke:var(--heading); stroke-width:2; }
.graph-pied { font-size:.84rem; color:var(--muted); margin-top:.5rem; }
.chart { display:flex; align-items:flex-end; gap:10px; height:230px; padding-top:1.4rem; }
.chart-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:0; }
.chart-bar { width:100%; max-width:46px; background:linear-gradient(180deg, #FF2D7A, var(--brand)); border-radius:8px 8px 3px 3px; }
.chart-val, .chart-lab { font-size:.72rem; color:var(--muted); }
.planning { padding:.5rem .9rem 1rem !important; max-height:440px; overflow:auto; }
.planning-jour { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:700; margin:.85rem .35rem .3rem; }
.planning-item { display:flex; gap:.7rem; align-items:center; padding:.5rem .55rem; border-radius:11px; color:var(--text); }
.planning-item:hover { background:var(--surface-3); color:var(--text); }
.planning-item b { display:block; color:var(--heading); font-size:.9rem; }
.planning-item small { color:var(--muted); font-size:.8rem; }
.p-ico { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; background:var(--surface-3); color:var(--muted); }
.p-ico .ic { width:17px; height:17px; }
.p-depart .p-ico { background:var(--orange-soft); color:var(--orange); }
.p-retour .p-ico { background:var(--success-soft); color:var(--success); }
.p-evenement .p-ico { background:var(--brand-50); color:var(--brand); }
.classement { display:flex; flex-direction:column; gap:.15rem; }
.rang { display:grid; grid-template-columns:1fr auto; gap:.25rem .8rem; padding:.5rem .35rem; border-radius:10px; color:var(--text); }
.rang:hover { background:var(--surface-3); color:var(--text); }
.rang-nom { font-weight:600; color:var(--heading); font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rang-val { font-size:.84rem; font-weight:700; color:var(--heading); font-variant-numeric:tabular-nums; }
.rang-barre { grid-column:1 / -1; height:5px; background:var(--surface-3); border-radius:99px; overflow:hidden; }
.rang-barre span { display:block; height:100%; background:var(--brand); border-radius:99px; opacity:.8; }

/* ============================================================ Calendrier */
.cal-nav { display:flex; align-items:center; gap:.5rem; }
.cal-mois { font-size:1.05rem; font-weight:700; color:var(--heading); min-width:170px; text-align:center; text-transform:capitalize; }
.cal-grid { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); border-top:1px solid var(--line-2); }
.cal-head { padding:.6rem .5rem; text-align:start; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); background:var(--surface-2); border-bottom:1px solid var(--line-2); }
.cal-cell { min-height:118px; padding:.45rem .5rem .55rem; border-inline-end:1px solid var(--line-2); border-bottom:1px solid var(--line-2); font-size:.8rem; background:var(--surface); }
.cal-grid > .cal-cell:nth-child(7n) { border-inline-end:none; }
.cal-cell.other { background:var(--surface-2); }
.cal-cell.other .dnum { color:var(--faint); }
.cal-cell .dnum { display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px; border-radius:8px; font-weight:650; color:var(--heading); font-size:.84rem; }
.cal-cell.today .dnum { background:var(--brand); color:#fff; }
.cal-evt { display:block; margin-top:4px; padding:.2rem .5rem; border-radius:6px; background:var(--brand-50); color:var(--brand-700); border-inline-start:3px solid var(--brand); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.74rem; }
.cal-evt:hover { filter:brightness(.96); color:var(--brand-700); }
.cal-evt.brouillon { background:var(--surface-3); color:#5f6670; border-inline-start-color:var(--faint); }
.cal-evt.sortie { background:var(--orange-soft); color:#9a3412; border-inline-start-color:var(--orange); }
.cal-evt.retour { background:var(--success-soft); color:#166534; border-inline-start-color:var(--success); }
.cal-legende { display:flex; gap:1rem; flex-wrap:wrap; font-size:.8rem; color:var(--muted); }
.cal-legende span { display:inline-flex; align-items:center; gap:.4rem; }
.cal-legende i { width:10px; height:10px; border-radius:3px; display:inline-block; }

/* ============================================================ Configuration */
.config { display:grid; grid-template-columns:250px minmax(0, 1fr); gap:1.35rem; align-items:start; }
.config-nav { position:sticky; top:calc(var(--topbar-h) + 14px); display:flex; flex-direction:column; gap:.1rem; padding:.45rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); }
.config-nav a { display:flex; align-items:center; gap:.7rem; padding:.58rem .75rem; border-radius:10px; color:var(--text); font-weight:550; font-size:.9rem; }
.config-nav a:hover { background:var(--surface-3); color:var(--heading); }
.config-nav a.actif { background:var(--brand-50); color:var(--brand); font-weight:650; }
.config-nav a .ic { width:18px; height:18px; color:var(--muted); }
.config-nav a.actif .ic { color:var(--brand); }
.config-nav span { width:1.4rem; text-align:center; }
.config-contenu .card-header .text-muted { flex-basis:100%; }
.logo-apercu { display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; }
.logo-cadre { background:var(--surface-2); border:1px solid var(--line-2); border-radius:14px; padding:1.1rem 1.4rem; }
.logo-cadre img { max-height:80px; max-width:320px; }
.config-colonnes { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1.2rem; }
.raccourcis { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1rem; }
.raccourci { display:flex; flex-direction:column; gap:.2rem; padding:1.05rem 1.15rem; color:var(--text); }
.raccourci .kpi-ico { margin-bottom:.45rem; }
.raccourci b { color:var(--heading); }
.raccourci small { color:var(--muted); }
.raccourci:hover { box-shadow:var(--shadow-md); color:var(--text); }
.config-aide { display:flex; gap:1.4rem; align-items:flex-start; }
.config-aide p { margin:0 0 .7rem; line-height:1.55; }
.aide-bloc svg { border-radius:10px; box-shadow:var(--shadow-sm); }
.matrice td:first-child { font-weight:600; color:var(--heading); }

/* ============================================================ Connexion */
body.login-page { min-height:100vh; display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(420px, .95fr); background:var(--surface); }
.login-visuel { position:relative; overflow:hidden; background:radial-gradient(900px 500px at 15% 10%, rgba(251,140,0,.35), transparent 60%), radial-gradient(700px 500px at 90% 90%, rgba(255,166,61,.22), transparent 60%), #0f1115; color:#fff; padding:3rem 3.2rem; display:flex; flex-direction:column; justify-content:space-between; }
.login-visuel::after { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:44px 44px; mask-image:radial-gradient(circle at 30% 30%, #000 20%, transparent 75%); pointer-events:none; }
.login-visuel > * { position:relative; z-index:1; }
.login-visuel h2 { color:#fff; font-size:2.25rem; line-height:1.15; letter-spacing:-.03em; max-width:520px; margin:0 0 1rem; }
.login-visuel p { color:rgba(255,255,255,.72); max-width:480px; font-size:1rem; }
.login-atouts { display:grid; gap:.8rem; margin-top:1.6rem; max-width:460px; }
.login-atouts div { display:flex; gap:.8rem; align-items:center; color:rgba(255,255,255,.85); font-size:.93rem; }
.login-atouts .ic { width:34px; height:34px; padding:8px; border-radius:10px; background:rgba(255,255,255,.08); color:#ff6b6b; }
.login-forme { display:flex; align-items:center; justify-content:center; padding:2rem; background:var(--surface); }
.login-card { width:100%; max-width:400px; }
.login-logo { display:flex; margin-bottom:1.8rem; }
.login-logo svg { height:44px; width:auto; }
.login-card h1 { font-size:1.6rem; margin-bottom:.3rem; }
.login-sub { color:var(--muted); margin-bottom:1.6rem; font-size:.95rem; }
.login-card .form-control { min-height:46px; }
.login-card .btn { min-height:46px; font-size:.96rem; }
.login-card .flabel { margin-top:1rem; }
.login-pied { margin-top:2rem; font-size:.8rem; color:var(--faint); }
.login-oubli { display:flex; justify-content:flex-end; margin-top:.35rem; }
.login-oubli a { font-size:.82rem; font-weight:600; color:var(--primary); text-decoration:none; }
.login-oubli a:hover { text-decoration:underline; }


/* ============================================================ Utilitaires */
.d-inline { display:inline; } .d-flex { display:flex; } .d-grid { display:grid; } .flex-wrap { flex-wrap:wrap; } .flex-1 { flex:1; }
.gap-1 { gap:.4rem; } .gap-2 { gap:.7rem; } .gap-3 { gap:1rem; }
.align-center { align-items:center; } .justify-between { justify-content:space-between; } .justify-end { justify-content:flex-end; }
.mt-0 { margin-top:0; } .mt-1 { margin-top:.5rem; } .mt-2 { margin-top:1rem; } .mt-3 { margin-top:1.5rem; }
.mb-0 { margin-bottom:0 !important; } .mb-1 { margin-bottom:.5rem; } .mb-2 { margin-bottom:1rem; } .mb-3 { margin-bottom:1.5rem; }
.ms-2 { margin-inline-start:.6rem; } .ms-auto { margin-inline-start:auto; }
.p-0 { padding:0 !important; }
.text-right { text-align:end; } .text-center, .center { text-align:center !important; }
.text-muted { color:var(--muted); } .text-faint { color:var(--faint); }
.text-danger, .text-red { color:var(--danger); } .text-success, .text-green { color:var(--success); } .text-warning { color:var(--warning); }
.text-primary { color:var(--brand); } .text-info { color:var(--info); } .text-orange { color:var(--orange); }
.text-purple { color:var(--violet); } .text-teal { color:var(--teal); } .text-yellow { color:#a16207; } .text-dark { color:var(--heading); }
.small { font-size:.84rem; } .tiny { font-size:.76rem; } .fw-bold { font-weight:700; } .fw-semi { font-weight:600; } .nowrap { white-space:nowrap; }
.w-100 { width:100%; } .mw-0 { min-width:0; }
.tabular { font-variant-numeric:tabular-nums; }
.ellipsis { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ============================================================ Impression */
@media print {
  .sidenav, .topnav, .footer-app, .no-print, .toasts, .sidenav-backdrop, .page-actions, .module-tabs, .filtres { display:none !important; }
  .main-content { margin:0 !important; }
  .container-app { padding:0; max-width:none; animation:none; }
  .card { box-shadow:none; border:1px solid #ddd; }
  body { background:#fff; }
}

/* ============================================================ Responsive */
.sidenav-backdrop { display:none; position:fixed; inset:0; background:rgba(15,17,21,.5); z-index:115; }
@media (max-width:1280px) {
  .grille-3 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
/* barre du haut étroite (menu déplié, écrans moyens) : on allège les actions pour garder la recherche au centre */
@container (max-width:1200px) { .uname { display:none; } }
@container (max-width:1000px) { .gsearch-btn kbd { display:none; } }
@container (max-width:900px) { .btn-scan span { display:none; } .btn-scan { padding:.55rem .72rem; } }
@media (max-width:1100px) {
  .doc-grid, .grille-lat { grid-template-columns:minmax(0, 1fr); }
  .sticky { position:static; }
  .config { grid-template-columns:minmax(0, 1fr); }
  .config-nav { position:static; flex-direction:row; overflow-x:auto; }
  .config-nav a { white-space:nowrap; }
  .grille-2 { grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:980px) {
  .sidenav, .menu-compact .sidenav { width:var(--sidenav-w); transform:translateX(-100%); box-shadow:var(--shadow-lg); }
  .sidenav.open { transform:none; }
  .sidenav.open ~ .sidenav-backdrop { display:block; }
  .main-content, .menu-compact .main-content { margin-inline-start:0; }
  .menu-compact .sn-logo, .menu-compact .nav-lab, .menu-compact .nav-heading { display:revert; }
  .menu-compact .sn-coeur { display:none; }
  .menu-compact .sn-top { flex-direction:row; padding:1.6rem 1rem 1.45rem; margin-bottom:.35rem; }
  .menu-compact .sn-top::after { inset-inline-start:1.4rem; inset-inline-end:1.4rem; }
  .menu-compact .sn-nav { padding-top:.75rem; }
  .menu-compact .nav-link { justify-content:flex-start; padding:.52rem .7rem; }
  .menu-compact .nav-count { position:static; min-width:20px; height:20px; padding:0 .38rem; font-size:.68rem; }
  .menu-compact .nav-link:hover::after { content:none; }
  .menu-compact .nav-heading { display:flex; }
  .menu-compact .nav-group { margin-top:.45rem; padding-top:0; border-top:none; }
  .menu-compact .nav-group-racine { margin-top:0; border-bottom:1px solid var(--side-line); }
  .menu-compact .nav-group.closed .nav { max-height:0; }
  .sn-reduire { display:none; }
  .menu-toggle { display:inline-flex; }
  .topnav { display:flex; padding:0 1rem; gap:.6rem; }
  .crumbs { display:none; }
  .gsearch-btn { margin-inline-start:auto; width:auto; }
  .gsearch-btn span, .gsearch-btn kbd { display:none; }
  .uname, .user-btn > .ic { display:none; }
  .container-app { padding:1.1rem 1rem 2rem; }
  .page-title { font-size:1.38rem; }
}
@media (max-width:700px) {
  body.login-page { grid-template-columns:1fr; }
  .login-visuel { display:none; }
  .kpis { grid-template-columns:1fr 1fr; gap:.7rem; }
  .kpi { padding:.85rem .9rem; }
  .kpi-val { font-size:1.22rem; }
  .kpi-ico { display:none; }
  .btn-scan span { display:none; }
  .scan-zone { flex-direction:column; align-items:stretch; }
  .scan-ico { display:none; }
  .etape { min-width:calc(50% - .5rem); }
  .form-row-2, .form-row-3, .form-grid-2, .grille-3 { grid-template-columns:1fr; }
  .filtres .form-control, .filtres input[type=search], .toolbar input[type=search], .toolbar select.form-control { min-width:0; width:100%; flex:1 1 100%; }
  .toolbar .input-inline.serre { width:100%; }
  .toolbar .input-inline.serre .form-control { flex:1; min-width:0; }
  .toolbar .espace { display:none; }
  .page-actions { width:100%; }
  .menu-large { min-width:290px; }
  .quick-actions { grid-template-columns:repeat(2, 1fr); }
  .table th:first-child, .table td:first-child { padding-inline-start:1rem; }
}

/* ==========================================================================
   v6.5 — Premium SaaS UI : couleurs vives, dégradés, profondeur
   ========================================================================== */

/* ---------- tons (variables par couleur) ---------- */
.ton-red, .kpi-red       { --g:#ff7a7a; --gt:var(--brand);       --gs:var(--brand-50);    --gg:var(--grad-red);    --glow:rgba(251,140,0,.55); --glow-soft:rgba(255,166,61,.16); }
.ton-violet, .kpi-violet { --g:#b794ff; --gt:var(--violet-text); --gs:var(--violet-soft); --gg:var(--grad-violet); --glow:rgba(124,58,237,.55); --glow-soft:rgba(124,58,237,.14); }
.ton-blue, .kpi-blue     { --g:#7ab0ff; --gt:var(--blue-text);   --gs:var(--blue-soft);   --gg:var(--grad-blue);   --glow:rgba(45,124,255,.55); --glow-soft:rgba(45,124,255,.14); }
.ton-cyan, .kpi-cyan     { --g:#56dcf0; --gt:var(--cyan-text);   --gs:var(--cyan-soft);   --gg:var(--grad-cyan);   --glow:rgba(15,181,211,.55); --glow-soft:rgba(15,181,211,.15); }
.ton-teal, .kpi-teal     { --g:#4ee3c6; --gt:var(--teal-text);   --gs:var(--teal-soft);   --gg:var(--grad-teal);   --glow:rgba(15,179,154,.55); --glow-soft:rgba(15,179,154,.15); }
.ton-green, .kpi-green   { --g:#4ade9a; --gt:var(--green-text);  --gs:var(--green-soft);  --gg:var(--grad-green);  --glow:rgba(22,196,127,.55); --glow-soft:rgba(22,196,127,.15); }
.ton-amber, .kpi-amber   { --g:#ffc857; --gt:var(--amber-text);  --gs:var(--amber-soft);  --gg:var(--grad-amber);  --glow:rgba(245,158,11,.55); --glow-soft:rgba(255,176,32,.18); }
.ton-orange, .kpi-orange { --g:#ffa25c; --gt:var(--orange-text); --gs:var(--orange-soft); --gg:var(--grad-orange); --glow:rgba(255,94,26,.55); --glow-soft:rgba(255,122,26,.16); }
.ton-pink, .kpi-pink     { --g:#ff86c4; --gt:var(--pink-text);   --gs:var(--pink-soft);   --gg:var(--grad-pink);   --glow:rgba(219,39,119,.5); --glow-soft:rgba(236,72,153,.14); }
.ton-gray, .kpi-gray     { --g:#aab2c0; --gt:var(--slate-text);  --gs:var(--slate-soft);  --gg:var(--grad-gray);   --glow:rgba(71,85,105,.45); --glow-soft:rgba(100,116,139,.12); }

/* ---------- couleur par catégorie d'icône ---------- */
.ic-sparkles, .ic-calendar, .ic-briefcase, .ic-zap, .ic-key, .ic-palette, .ic-history, .ic-list { --ic-t:var(--violet-text); --ic-s:var(--violet-soft); }
.ic-file, .ic-users, .ic-user, .ic-id-card, .ic-info, .ic-search, .ic-mail, .ic-send, .ic-shield, .ic-edit, .ic-factory, .ic-grid { --ic-t:var(--blue-text); --ic-s:var(--blue-soft); }
.ic-receipt, .ic-money, .ic-wallet, .ic-coins, .ic-check, .ic-trend, .ic-percent, .ic-save, .ic-card { --ic-t:var(--green-text); --ic-s:var(--green-soft); }
.ic-out, .ic-truck, .ic-speaker, .ic-layers, .ic-repeat, .ic-tag, .ic-box, .ic-print { --ic-t:var(--orange-text); --ic-s:var(--orange-soft); }
.ic-inbox, .ic-scan, .ic-qr, .ic-clipboard, .ic-warehouse, .ic-database, .ic-refresh, .ic-download, .ic-upload, .ic-image, .ic-pin, .ic-phone, .ic-building, .ic-folder { --ic-t:var(--cyan-text); --ic-s:var(--cyan-soft); }
.ic-clock, .ic-bell, .ic-lock, .ic-sun { --ic-t:var(--amber-text); --ic-s:var(--amber-soft); }
.ic-user-x, .ic-file-minus, .ic-pdf, .ic-undo { --ic-t:var(--pink-text); --ic-s:var(--pink-soft); }
.ic-alert, .ic-ban, .ic-trash, .ic-x { --ic-t:var(--rose-text); --ic-s:var(--rose-soft); }

/* ---------- fond de l'application ---------- */
body { background:
  radial-gradient(1100px 520px at 105% -12%, rgba(251,140,0,.07), transparent 60%),
  radial-gradient(900px 520px at 30% -25%, rgba(124,58,237,.06), transparent 62%),
  radial-gradient(700px 500px at 0% 105%, rgba(15,181,211,.05), transparent 60%),
  var(--canvas);
  background-attachment:fixed; }
h1, h2, .page-title, .kpi-val, .login-card h1, .login-visuel h2, .cal-mois { font-family:var(--font-display); }
::selection { background:#ffe3bf; }

/* ---------- tuiles d'icône ---------- */
.tuile { width:38px; height:38px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; flex:none; color:#fff; background:var(--gg, var(--grad-gray)); box-shadow:0 8px 18px -10px var(--glow, rgba(15,18,34,.5)), inset 0 1px 0 rgba(255,255,255,.22); }
.tuile .ic { width:19px; height:19px; stroke-width:2; color:#fff; }
.tuile-sm { width:30px; height:30px; border-radius:9px; }
.tuile-sm .ic { width:16px; height:16px; }
.tuile-lg { width:50px; height:50px; border-radius:14px; }
.tuile-lg .ic { width:24px; height:24px; }

/* ---------- menu latéral coloré ---------- */
.sidenav { background:
    radial-gradient(300px 190px at 50% -60px, rgba(251,140,0,.10), transparent 72%),
    radial-gradient(260px 300px at -40px 105%, rgba(124,58,237,.08), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #fafbfd 55%, #f6f7fb 100%);
  box-shadow:10px 0 34px -30px rgba(15,18,34,.45); }
/* motif : petits carrés arrondis, clin d'œil au cœur pixelisé du logo */
.sidenav::before { content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Crect x='9' y='9' width='4' height='4' rx='1.2' fill='%23E72773' fill-opacity='.13'/%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 22%, rgba(0,0,0,.12) 55%, rgba(0,0,0,.5) 88%, #000 100%);
  mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 22%, rgba(0,0,0,.12) 55%, rgba(0,0,0,.5) 88%, #000 100%); }
.sidenav > * { position:relative; }
.nav-ico { color:var(--gt, var(--side-muted)); }
.nav-link:hover .nav-ico { color:var(--gt, var(--heading)); }
.nav-link:hover { background:rgba(15,18,34,.05); }
.nav-link.active { background:var(--grad-brand); color:#fff; box-shadow:0 10px 22px -12px rgba(251,140,0,.8), inset 0 1px 0 rgba(255,255,255,.2); }
.nav-link.active .nav-ico { color:#fff; }
.nav-link.active .nav-count { background:rgba(255,255,255,.28); color:#fff; }
.nav-count.alerte { background:var(--grad-brand); box-shadow:0 4px 10px -4px rgba(251,140,0,.6); }
.nav-heading:hover { color:var(--brand); }
.nav-heading:hover .ic { color:var(--brand); }
.nav-group.a-active > .nav-heading { color:var(--brand); font-weight:800; }
.nav-group.a-active > .nav-heading .ic { color:var(--brand); }
/* icônes du menu : simplement colorées selon le module, sans cadre — teintes franches et trait épais pour rester bien lisibles sur fond clair */
.nav-ico.ton-module { --nav-ic:var(--gt, var(--side-muted)); }
.nav-ico.ton-module.ton-red    { --nav-ic:#E72773; }
.nav-ico.ton-module.ton-violet { --nav-ic:#7c3aed; }
.nav-ico.ton-module.ton-blue   { --nav-ic:#1766f5; }
.nav-ico.ton-module.ton-cyan   { --nav-ic:#0891b2; }
.nav-ico.ton-module.ton-teal   { --nav-ic:#0d9488; }
.nav-ico.ton-module.ton-green  { --nav-ic:#0c9d5c; }
.nav-ico.ton-module.ton-amber  { --nav-ic:#e08600; }
.nav-ico.ton-module.ton-orange { --nav-ic:#f0600f; }
.nav-ico.ton-module.ton-pink   { --nav-ic:#db2777; }
.nav-ico.ton-module.ton-gray   { --nav-ic:#475569; }
.nav-link .nav-ico.ton-module .ic { width:20px; height:20px; color:var(--nav-ic); stroke-width:2.3; transition:transform .15s ease; }
.nav-link:hover .nav-ico.ton-module .ic { transform:scale(1.1); }
.nav-link.active .nav-ico.ton-module .ic { color:#fff; }
:root[data-theme="dark"] .nav-ico.ton-module { --nav-ic:var(--gt, var(--side-muted)); }

/* ---------- barre du haut ---------- */
.topnav.defile { background:rgba(255,255,255,.82); }
.gsearch-btn { border-radius:12px; }
.gsearch-btn:hover .ic { color:var(--brand); }
.btn-scan { background:linear-gradient(135deg, #1c2030, #0f1117); box-shadow:0 8px 18px -10px rgba(15,17,23,.8); }
.btn-scan .ic { color:#56dcf0; }
.btn-scan:hover { background:linear-gradient(135deg, #252a3d, #111320); }
.pastille { background:var(--grad-brand); box-shadow:0 4px 10px -4px rgba(251,140,0,.8); }
.crumb-groupe { color:var(--muted); }
.menu-tuile .tuile { width:28px; height:28px; border-radius:8px; }
.menu-tuile .tuile .ic, .menu-liste > a.menu-tuile .tuile .ic, .notif-item .tuile .ic { width:15px; height:15px; color:#fff !important; }
.notif-item .tuile { width:32px; height:32px; border-radius:9px; }
.menu-liste > a > .ic { color:var(--ic-t, var(--muted)); }

/* ---------- en-tête de page ---------- */
.page-title { font-weight:800; letter-spacing:-.03em; }
.page-head.hero { position:relative; overflow:hidden; align-items:center; padding:1.3rem 1.6rem 1.3rem 1.75rem; margin-bottom:1.35rem; border-radius:var(--r-2xl);
  background:
    radial-gradient(380px 220px at 100% 0%, rgba(255,166,61,.13), transparent 70%),
    radial-gradient(320px 200px at 80% 120%, rgba(33,80,212,.08), transparent 70%),
    linear-gradient(100deg, #fff 0%, #fff 50%, #fff7ec 100%);
  border:1px solid var(--line); box-shadow:0 1px 2px rgba(16,24,40,.04), 0 16px 34px -28px rgba(251,140,0,.45); }
.page-head.hero::before { content:''; position:absolute; inset-inline-start:0; top:22%; bottom:22%; width:4px; border-radius:0 4px 4px 0; background:var(--grad-brand); }
.page-head.hero::after { content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Crect x='9' y='9' width='4' height='4' rx='1.2' fill='%23E72773' fill-opacity='.16'/%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(90deg, transparent 42%, #000 100%); mask-image:linear-gradient(90deg, transparent 42%, #000 100%); }
.page-head.hero > * { position:relative; z-index:1; }
.page-head.hero .page-titres { display:grid; grid-template-columns:auto 1fr; column-gap:1rem; align-items:center; }
.page-head.hero .hero-ico { grid-row:1 / span 2; width:52px; height:52px; border-radius:15px; }
.page-head.hero .hero-ico .ic { width:25px; height:25px; }
.page-head.hero .page-title { color:var(--heading); font-size:1.7rem; }
.page-head.hero .page-sub { margin-top:.25rem; }
.page-head.hero .page-sub b { color:var(--brand); font-weight:700; }
.hero-date { display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .6rem; border-radius:8px; background:var(--surface-3); color:var(--text); font-weight:600; font-size:.84rem; }
.hero-date .ic { width:14px; height:14px; color:var(--brand); }
.page-head.hero .btn-groupe { background:var(--surface); border-radius:var(--r-md); box-shadow:0 1px 2px rgba(16,24,40,.06), 0 8px 18px -14px rgba(15,18,34,.35); }
.page-head.hero .btn-groupe .btn { color:var(--heading); }
.page-head.hero .btn-groupe .btn:hover { color:var(--brand); background:var(--rose-soft); }
.page-head.hero .btn-groupe .form-control { font-weight:600; color:var(--heading); text-transform:capitalize; }
.module-tabs a:hover .ic { color:var(--ic-t, var(--heading)); }
.module-tabs a.actif { border-bottom-color:transparent; box-shadow:inset 0 -2px 0 var(--gt, var(--brand)); }
.module-tabs a.actif .ic { color:var(--gt, var(--brand)); }
.section-titre { display:flex; align-items:center; gap:.5rem; }
.section-titre::before { content:''; width:18px; height:4px; border-radius:99px; background:var(--grad-brand); }

/* ---------- cartes ---------- */
.card { border-color:var(--line); box-shadow:var(--shadow-sm); }
.card-header h3 > .ic { width:32px; height:32px; padding:7px; border-radius:10px; background:var(--ic-s, var(--surface-3)); color:var(--ic-t, var(--muted)); stroke-width:2; }
.card-header h3 { font-family:var(--font); }

/* ---------- indicateurs ---------- */
.kpi { border-color:var(--line); box-shadow:var(--shadow-sm); padding:1.05rem 1.2rem 1.1rem; }
.kpi::before { content:''; position:absolute; inset-inline-end:-54px; top:-54px; width:170px; height:170px; border-radius:50%; background:radial-gradient(circle, var(--glow-soft, rgba(100,116,139,.1)), transparent 68%); pointer-events:none; }
.kpi > * { position:relative; }
a.kpi:hover { box-shadow:0 18px 36px -18px var(--glow, rgba(15,18,34,.3)); border-color:var(--line-strong); }
.kpi .kpi-ico.tuile { width:40px; height:40px; border-radius:12px; background:var(--gg, var(--grad-gray)); color:#fff; }
.kpi-ico.tuile .ic { width:20px; height:20px; }
.kpi-ico:not(.tuile) { background:var(--gs, var(--surface-3)); color:var(--gt, var(--muted)); }
.kpi-val { font-size:1.72rem; font-weight:800; letter-spacing:-.035em; white-space:nowrap; }
.kpi { container-type:inline-size; }
.kpi-val { font-size:clamp(1.1rem, 12cqi, 1.72rem); }
.kpi-val small.kpi-dec { font-size:.68em; font-weight:700; color:inherit; opacity:.72; letter-spacing:-.01em; margin-inline-start:.02em; }
.kpi-alerte { border-color:#ffd0d6; background:linear-gradient(180deg, #fff 58%, #fff3f5); }
.kpi-alerte::after { inset-inline-start:0; inset-inline-end:0; height:3px; border-radius:0; background:var(--grad-brand); }
.kpi-alerte .kpi-val { color:var(--rose); }
.kpi-sub b { color:var(--rose); }
.tendance { padding:.08rem .45rem; border-radius:99px; }
.tendance.hausse { color:var(--green-text); background:var(--green-soft); }
.tendance.baisse { color:var(--rose-text); background:var(--rose-soft); }
.jauge { height:7px; background:var(--surface-3); }
.jauge span { background:var(--grad-brand); box-shadow:0 2px 8px -2px rgba(251,140,0,.5); }

/* ---------- boutons ---------- */
.btn-primary { background:var(--grad-brand); border-color:transparent; box-shadow:0 10px 22px -12px rgba(251,140,0,.9), inset 0 1px 0 rgba(255,255,255,.22); }
.btn-primary:hover { background:var(--grad-brand); filter:brightness(1.06) saturate(1.05); box-shadow:0 14px 26px -12px rgba(251,140,0,.95), inset 0 1px 0 rgba(255,255,255,.22); color:#fff; }
.btn-success { background:var(--grad-green); box-shadow:0 10px 22px -12px rgba(22,196,127,.8); }
.btn-danger { background:linear-gradient(135deg, #ff5577, #d11a3f); box-shadow:0 10px 22px -12px rgba(229,38,75,.8); }
.btn-danger:hover { background:linear-gradient(135deg, #ff5577, #d11a3f); filter:brightness(1.05); }
.btn-info { background:var(--grad-blue); box-shadow:0 10px 22px -12px rgba(45,124,255,.8); }
.btn-warning { background:var(--grad-amber); color:#3b2a00; box-shadow:0 10px 22px -12px rgba(245,158,11,.8); }
.btn-dark { background:linear-gradient(135deg, #1c2030, #0f1117); }
.btn-light:hover { border-color:#c5cad6; }
.btn-icon:hover { color:var(--ic-t, var(--heading)); }
.btn-icon.btn-icon-info:hover, .btn-icon.btn-info:hover { color:var(--blue-text); background:var(--blue-soft) !important; }
.btn-icon.btn-icon-success:hover, .btn-icon.btn-success:hover { color:var(--green-text); background:var(--green-soft) !important; }
.btn-icon.btn-icon-danger:hover, .btn-icon.btn-danger:hover { color:var(--rose-text); background:var(--rose-soft) !important; }
.btn-icon.btn-icon-warning:hover, .btn-icon.btn-warning:hover { color:var(--amber-text); background:var(--amber-soft) !important; }

/* ---------- badges & états ---------- */
.badge { font-weight:650; }
.badge-success   { background:var(--green-soft);  color:var(--green-text); }
.badge-danger    { background:var(--rose-soft);   color:var(--rose-text); }
.badge-warning   { background:var(--amber-soft);  color:var(--amber-text); }
.badge-info      { background:var(--blue-soft);   color:var(--blue-text); }
.badge-primary   { background:var(--brand-50);    color:var(--brand); }
.badge-secondary { background:var(--slate-soft);  color:var(--slate-text); }
.badge-violet    { background:var(--violet-soft); color:var(--violet-text); }
.badge-cyan      { background:var(--cyan-soft);   color:var(--cyan-text); }
.badge-orange    { background:var(--orange-soft); color:var(--orange-text); }
.badge-pink      { background:var(--pink-soft);   color:var(--pink-text); }
.badge-plein { color:#fff; background:var(--grad-brand); }
.chip .ic { color:var(--ic-t, var(--muted)); }

/* ---------- onglets, barres d'outils ---------- */
.onglets a.actif .onglet-n, .onglets button.actif .onglet-n { background:var(--grad-brand); color:#fff; }
.filtres input[type=search]:focus, .toolbar input[type=search]:focus { border-color:var(--brand); }
.pagination .cur { background:var(--grad-brand); border-color:transparent; box-shadow:0 6px 14px -8px rgba(251,140,0,.8); }

/* ---------- tableaux ---------- */
.table th { background:#f7f8fc; }
.table tbody tr:hover td { background:#fbfaff; }
.table tr.selection td { background:#fff4f5; }
.ref { color:var(--heading); }
a.ref:hover { color:var(--brand); }
.av-0 { background:linear-gradient(135deg, #FF2D7A, #E72773); }
.av-1 { background:linear-gradient(135deg, #5aa2ff, #6d28d9); }
.av-2 { background:linear-gradient(135deg, #3ee39a, #0b97c4); }
.av-3 { background:linear-gradient(135deg, #a36bff, #db2777); }
.av-4 { background:linear-gradient(135deg, #ffcb47, #ff5e1a); }
.av-5 { background:linear-gradient(135deg, #3fd9f0, #2a5bf0); }
.avatar { box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }

/* ---------- états vides illustrés ---------- */
.etat-vide-ico { position:relative; width:64px; height:64px; border-radius:20px; background:linear-gradient(135deg, var(--ic-s-bg, #fff2e0), #f3eeff); color:var(--brand); box-shadow:0 0 0 8px rgba(251,140,0,.04), 0 16px 30px -18px rgba(124,58,237,.5); margin-bottom:.8rem; }
.etat-vide-ico .ic { width:28px; height:28px; color:var(--ic-t, var(--brand)); stroke-width:1.9; }
.etat-vide-ico::before, .etat-vide-ico::after { content:''; position:absolute; border-radius:50%; }
.etat-vide-ico::before { width:10px; height:10px; inset-inline-end:-10px; top:-6px; background:var(--grad-amber); }
.etat-vide-ico::after { width:7px; height:7px; inset-inline-start:-9px; bottom:4px; background:var(--grad-cyan); }

/* ---------- étapes du flux ---------- */
.etape { border-color:var(--line); box-shadow:var(--shadow-xs); }
.etape.fait { color:var(--green-text); }
.etape.fait span { background:var(--grad-green); color:#fff; box-shadow:0 6px 14px -8px rgba(22,196,127,.9); }
.etape.actif { color:var(--heading); border:1.5px solid transparent; background:linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-brand) border-box; box-shadow:0 10px 22px -16px rgba(251,140,0,.8); }
.etape.actif span { background:var(--grad-brand); color:#fff; box-shadow:0 6px 14px -6px rgba(251,140,0,.8); }

/* ---------- progression ---------- */
.barre span { background:var(--grad-progress); box-shadow:0 2px 10px -2px rgba(15,181,211,.6); }

/* ---------- tiroirs, palette, dialogues, notifications ---------- */
.drawer-panel { position:relative; }
.drawer-panel::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad-brand); }
.pal-item.sel .pal-ico, .pal-item:hover .pal-ico { background:var(--grad-brand); color:#fff; box-shadow:0 6px 14px -8px rgba(251,140,0,.8); }
.pal-item .pal-ico .ic { color:inherit; }
.alert { overflow:hidden; }
.alert::after { content:''; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; background:var(--grad-gray); }
.alert-success::after { background:var(--grad-green); }
.alert-danger::after { background:linear-gradient(180deg, #ff5577, #d11a3f); }
.alert-warning::after { background:var(--grad-amber); }
.alert-info::after { background:var(--grad-blue); }
.note-info { background:linear-gradient(135deg, var(--blue-soft), #f3f0ff); border-color:#dce6ff; color:#1e3a8a; }
.note-info .ic { color:var(--blue-text); }
.note-warning { background:linear-gradient(135deg, var(--amber-soft), #fff1e6); border-color:#ffe3b0; color:#7a4a00; }
.note-warning .ic { color:var(--amber-text); }
.note-success { background:linear-gradient(135deg, var(--green-soft), #eafff5); border-color:#c2eeda; color:var(--green-text); }
.note-success .ic { color:var(--success); }
.confirm-dlg h4 { font-family:var(--font-display); }

/* ---------- documents ---------- */
.recap-total { background:var(--grad-brand); box-shadow:0 16px 30px -16px rgba(251,140,0,.85); }
.scan-card { background:
  radial-gradient(420px 220px at 100% 0%, rgba(15,181,211,.28), transparent 60%),
  radial-gradient(380px 220px at 0% 120%, rgba(124,58,237,.35), transparent 62%),
  linear-gradient(135deg, #121523, #1f1b36); border-color:#232638; }
.scan-ico { background:var(--grad-cyan); box-shadow:0 10px 22px -10px rgba(15,181,211,.8); }

/* ---------- tableau de bord ---------- */
.qa { border-color:var(--line); box-shadow:var(--shadow-sm); }
.qa:hover { color:var(--heading); border-color:var(--line-strong); box-shadow:0 18px 32px -18px var(--glow, rgba(15,18,34,.35)); }
.qa .tuile { width:40px; height:40px; border-radius:12px; }
.quick-actions .qa-scan { background:
  radial-gradient(240px 120px at 100% 0%, rgba(15,181,211,.35), transparent 65%),
  linear-gradient(135deg, #181c2c, #0f1117); border-color:#1c2030; }
.quick-actions .qa-scan:hover { color:#fff; background:
  radial-gradient(240px 120px at 100% 0%, rgba(15,181,211,.5), transparent 65%),
  linear-gradient(135deg, #1e2336, #111320); }
.g-grille { stroke:#eceef5; stroke-dasharray:3 4; }
.g-axe { fill:#9aa1b2; }
.g-barre { fill:url(#g-degrade-barre); opacity:1; }
.g-barre:hover { filter:brightness(1.08); }
.g-aire { fill:url(#g-degrade-aire); }
.g-ligne { stroke:#7c3aed; stroke-width:2.6; }
.g-point { stroke:#7c3aed; stroke-width:2.2; }
.l-barre { background:var(--grad-brand); }
.l-ligne { background:#7c3aed; height:3px; }
.planning-item .tuile { width:34px; height:34px; border-radius:10px; }
.classement .rang:nth-child(1) .rang-barre span { background:var(--grad-brand); }
.classement .rang:nth-child(2) .rang-barre span { background:var(--grad-violet); }
.classement .rang:nth-child(3) .rang-barre span { background:var(--grad-blue); }
.classement .rang:nth-child(4) .rang-barre span { background:var(--grad-cyan); }
.classement .rang:nth-child(5) .rang-barre span { background:var(--grad-green); }
.rang-barre { height:6px; }
.rang-barre span { opacity:1; }

/* ---------- planning ---------- */
.cal-cell.today .dnum { background:var(--grad-brand); box-shadow:0 6px 14px -8px rgba(251,140,0,.9); }
.cal-evt { background:var(--violet-soft); color:var(--violet-text); border-inline-start-color:var(--violet); }
.cal-evt:hover { color:var(--violet-text); }
.cal-evt.sortie { background:var(--orange-soft); color:var(--orange-text); border-inline-start-color:var(--orange); }
.cal-evt.retour { background:var(--green-soft); color:var(--green-text); border-inline-start-color:var(--green); }
.cal-evt.brouillon { background:var(--slate-soft); color:var(--slate-text); border-inline-start-color:#94a3b8; }

/* ---------- configuration ---------- */
.config-nav a .ic { color:var(--ic-t, var(--muted)); }
.config-nav a.actif { background:linear-gradient(135deg, #fff2e0, #fdf2ff); color:var(--brand); box-shadow:inset 0 0 0 1px #ffe3bf; }
.config-nav a.actif .ic { color:var(--brand); }

/* ---------- connexion ---------- */
.login-visuel { background:
  radial-gradient(760px 460px at 12% 8%, rgba(251,140,0,.5), transparent 60%),
  radial-gradient(620px 460px at 92% 92%, rgba(124,58,237,.45), transparent 60%),
  radial-gradient(420px 320px at 70% 20%, rgba(15,181,211,.2), transparent 62%),
  #0e1018; }
.login-atouts .ic { background:var(--grad-brand); color:#fff; box-shadow:0 10px 22px -12px rgba(251,140,0,.9); }
.login-atouts div:nth-child(2) .ic { background:var(--grad-violet); box-shadow:0 10px 22px -12px rgba(124,58,237,.9); }
.login-atouts div:nth-child(3) .ic { background:var(--grad-cyan); box-shadow:0 10px 22px -12px rgba(15,181,211,.9); }
.login-atouts div:nth-child(4) .ic { background:var(--grad-green); box-shadow:0 10px 22px -12px rgba(22,196,127,.9); }

/* ---------- lieux : suggestions & Google Maps ---------- */
.champ-lieu { position:relative; }
.champ-lieu > .form-control { padding-inline-end:2.6rem; }
.champ-lieu-maps { position:absolute; inset-inline-end:.35rem; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--grad-green); box-shadow:0 6px 12px -6px rgba(22,196,127,.8); }
.champ-lieu-maps .ic { width:16px; height:16px; stroke-width:2.1; }
.champ-lieu-maps:hover { color:#fff; filter:brightness(1.07); }
.suggestions-lieu { position:fixed; z-index:400; max-height:340px; overflow-y:auto; padding:.35rem; background:var(--surface-elev); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); animation:pop .12s ease; }
.sug-cat { padding:.45rem .6rem .25rem; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.sug-item { display:flex; align-items:center; gap:.65rem; width:100%; padding:.5rem .6rem; border:none; background:none; border-radius:10px; text-align:start; cursor:pointer; font:inherit; color:var(--text); }
.sug-item:hover, .sug-item.sel { background:var(--brand-50); }
.sug-ico { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none; color:#fff; }
.sug-ico .ic { width:15px; height:15px; stroke-width:2.1; }
.sug-historique .sug-ico { background:var(--grad-violet); }
.sug-tunisie .sug-ico { background:var(--grad-red); }
.sug-osm .sug-ico { background:var(--grad-green); }
.sug-txt { min-width:0; }
.sug-txt b { display:block; font-weight:600; font-size:.88rem; color:var(--heading); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sug-txt small { display:block; font-size:.76rem; color:var(--muted); }
.sug-pied { padding:.35rem .6rem .15rem; font-size:.68rem; color:var(--faint); text-align:end; }
.lien-maps { display:inline-flex; align-items:center; gap:.3rem; color:inherit; max-width:100%; }
.lien-maps .ic { width:14px; height:14px; color:var(--green-text); flex:none; }
.lien-maps span { overflow:hidden; text-overflow:ellipsis; }
.lien-maps:hover { color:var(--green-text); text-decoration:underline; text-underline-offset:2px; }
.chip.lien-maps:hover { text-decoration:none; background:var(--green-soft); }

/* ---------- ajustements mobiles Premium ---------- */
@media (max-width:700px) {
  .kpi .kpi-ico.tuile { display:none; }
  .kpi-val { font-size:clamp(.98rem, 12cqi, 1.3rem); }
  .page-head.hero { padding:1.1rem 1.1rem 1.1rem 1.25rem; }
  .page-head.hero .page-title { font-size:1.4rem; }
  .page-head.hero .hero-ico { width:42px; height:42px; border-radius:12px; }
  .page-head.hero .hero-ico .ic { width:21px; height:21px; }
  .table .personne { max-width:220px; }
}
.table .personne { max-width:300px; }

/* ---------- mobile scanner ---------- */
.sa-modes button.actif { background:var(--grad-brand); }

/* ==========================================================================
   Page Scanner (smartphone)
   ========================================================================== */
body.scan-app { background:#0f1115; color:#e9eaec; min-height:100vh; font-size:16px; padding-bottom:env(safe-area-inset-bottom); }
.sa-top { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:.8rem; padding:calc(.7rem + env(safe-area-inset-top)) 1rem .7rem; background:rgba(15,17,21,.9); backdrop-filter:blur(10px); }
.sa-retour { color:#fff; line-height:1; padding:0 .2rem; }
.sa-marque { display:flex; align-items:center; gap:.55rem; font-weight:700; font-size:1.05rem; color:#fff; flex:1; }
.sa-son { background:rgba(255,255,255,.08); border:none; border-radius:12px; width:42px; height:42px; color:#fff; display:flex; align-items:center; justify-content:center; }
.sa-son .ic, .sa-retour .ic { width:22px; height:22px; }
.sa-retour { display:flex; align-items:center; }
.sa-modes button .ic { width:22px; height:22px; }
.sa-modes { display:grid; grid-template-columns:repeat(4, 1fr); gap:.4rem; padding:.3rem 1rem .8rem; }
.sa-modes button { display:flex; flex-direction:column; align-items:center; gap:.2rem; padding:.62rem .2rem; border-radius:14px; border:none; background:rgba(255,255,255,.06); color:#c9ccd1; font:inherit; font-size:1.2rem; }
.sa-modes button span { font-size:.72rem; font-weight:600; }
.sa-modes button.actif { background:var(--brand); color:#fff; box-shadow:0 10px 22px -10px rgba(251,140,0,.8); }
.sa-main { padding:0 1rem 2rem; max-width:560px; margin:0 auto; }
.sa-contexte { background:rgba(255,255,255,.05); border-radius:16px; padding:.9rem; margin-bottom:.9rem; }
.sa-contexte-titre { font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:#9aa0a8; font-weight:700; margin-bottom:.5rem; }
.sa-contexte .form-control { background:#1b1e23; color:#fff; border-color:#2e3237; box-shadow:none; }
.sa-aide { font-size:.85rem; color:#9aa0a8; margin:.5rem 0 0; }
.sa-aide b { color:#fff; }
.sa-camera { position:relative; background:rgba(255,255,255,.04); border-radius:20px; padding:.8rem; }
.sa-reader { border-radius:14px; overflow:hidden; background:#000; min-height:0; }
.sa-reader video { border-radius:14px; }
.sa-reader img[alt="Info icon"], .sa-reader > div > img { display:none !important; }
.sa-flash { position:absolute; inset:.8rem .8rem auto .8rem; height:0; border-radius:14px; pointer-events:none; }
.sa-flash.ok { height:calc(100% - 1.6rem); box-shadow:inset 0 0 0 6px #22c55e; animation:fondu .7s ease forwards; }
.sa-flash.ko { height:calc(100% - 1.6rem); box-shadow:inset 0 0 0 6px #ef4444; animation:fondu .7s ease forwards; }
@keyframes fondu { from { opacity:1; } to { opacity:0; } }
.sa-camera-actions { display:flex; gap:.5rem; margin-top:.7rem; }
.sa-camera-actions .btn-primary { flex:1; padding:.85rem; font-size:1rem; border-radius:14px; }
.sa-camera-actions .btn-light { background:rgba(255,255,255,.1); color:#fff; border:none; box-shadow:none; }
.sa-champs-retour { display:grid; grid-template-columns:repeat(3, 1fr); gap:.4rem; margin-top:.7rem; }
.sa-champs-retour button { padding:.7rem .3rem; border-radius:12px; border:1px solid #34383e; background:transparent; color:#c9ccd1; font:inherit; font-size:.85rem; font-weight:600; }
.sa-champs-retour button.actif[data-champ="retour"] { background:#16a34a; border-color:#16a34a; color:#fff; }
.sa-champs-retour button.actif[data-champ="endommagee"] { background:#d97706; border-color:#d97706; color:#fff; }
.sa-champs-retour button.actif[data-champ="perdue"] { background:#dc2626; border-color:#dc2626; color:#fff; }
.sa-manuel { display:flex; gap:.4rem; margin-top:.7rem; }
.sa-manuel .form-control { background:#1b1e23; border-color:#2e3237; color:#fff; font-family:var(--mono); box-shadow:none; }
.sa-manuel .sa-qte { width:70px; flex:none; text-align:center; }
.sa-saisie { position:relative; flex:1; min-width:0; }
.sa-saisie .form-control { width:100%; font-family:var(--font); }
.sa-suggestions { position:absolute; inset-inline-start:0; inset-inline-end:-7.5rem; top:calc(100% + 6px); max-height:min(52vh, 360px); overflow-y:auto; z-index:30; background:#1b1e23; border:1px solid #33373d; border-radius:14px; box-shadow:0 18px 40px -12px rgba(0,0,0,.7); padding:.3rem; }
.sa-sugg { display:flex; flex-direction:column; gap:.15rem; width:100%; text-align:start; background:none; border:0; border-radius:10px; padding:.6rem .7rem; color:#e9eaec; font:inherit; cursor:pointer; }
.sa-sugg + .sa-sugg { border-top:1px solid #26292e; }
.sa-sugg:hover, .sa-sugg.actif { background:#262a31; }
.sa-sugg-nom { font-weight:600; font-size:.95rem; line-height:1.25; }
.sa-sugg-meta { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; font-size:.78rem; color:#9aa0a8; }
.sa-sugg-meta code { font-family:var(--mono); color:#c9ccd1; }
.sa-sugg mark { background:rgba(255,176,32,.25); color:#ffd36b; border-radius:3px; padding:0 1px; }
.sa-sugg-bon { margin-inline-start:auto; background:rgba(34,197,94,.16); color:#4ade80; border-radius:99px; padding:.05rem .5rem; font-weight:700; }
.sa-sugg-stock { margin-inline-start:auto; color:#7d838c; }
.sa-sugg-vide { padding:.8rem; color:#9aa0a8; font-size:.88rem; text-align:center; }
.sa-manuel .btn-dark { background:#fff; color:#111; }
.sa-resultat { margin-top:.9rem; border-radius:18px; padding:1rem 1.1rem; background:#1b1e23; border-inline-start:5px solid #22c55e; animation:toast-in .2s ease; }
.sa-resultat.ko { border-inline-start-color:#ef4444; }
.sa-res-titre { font-weight:700; font-size:1.05rem; color:#fff; }
.sa-res-sous { color:#9aa0a8; font-size:.88rem; margin-top:.15rem; }
.sa-res-grand { font-size:2.4rem; font-weight:800; color:#fff; line-height:1.1; margin-top:.3rem; }
.sa-res-grand small { font-size:1rem; color:#9aa0a8; font-weight:600; }
.sa-chiffres { display:grid; grid-template-columns:repeat(3, 1fr); gap:.4rem; margin:.8rem 0; }
.sa-chiffres div { background:rgba(255,255,255,.05); border-radius:12px; padding:.6rem .4rem; text-align:center; }
.sa-chiffres b { display:block; font-size:1.3rem; color:#fff; }
.sa-chiffres span { font-size:.72rem; color:#9aa0a8; }
.sa-bloc { margin-top:.8rem; }
.sa-bloc h4 { font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:#9aa0a8; margin:0 0 .3rem; }
.sa-kv { display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:.5rem 0; border-bottom:1px solid #2a2d32; color:#e9eaec; font-size:.9rem; }
.sa-kv small { display:block; color:#9aa0a8; font-size:.78rem; }
.sa-kv b { color:#fff; }
.sa-liste { margin-top:1rem; }
.sa-progress { margin-bottom:.6rem; }
.sa-progress-txt { font-size:.9rem; color:#c9ccd1; margin-bottom:.35rem; }
.sa-progress-txt b { color:#fff; font-size:1.1rem; }
.sa-ligne { display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:.7rem .8rem; border-radius:14px; background:#1b1e23; margin-bottom:.35rem; border-inline-start:4px solid #3a3e44; }
.sa-ligne b { display:block; color:#fff; font-size:.92rem; }
.sa-ligne small { color:#9aa0a8; font-size:.78rem; }
.sa-ligne.ok { border-inline-start-color:#22c55e; }
.sa-ligne.partiel { border-inline-start-color:#f59e0b; }
.sa-ligne.ko { border-inline-start-color:#ef4444; }
.sa-compte { font-size:1.35rem; font-weight:800; color:#fff; white-space:nowrap; }
.sa-compte small { font-size:.85rem; color:#9aa0a8; }
.sa-fin { margin-top:1rem; }
.sa-fin .btn { padding:.9rem; border-radius:14px; }

/* ================================================================== Profil utilisateur & photos */
.avatar-photo { padding:0; overflow:hidden; background:var(--surface-3); }
.avatar-photo img { width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
.avatar.avatar-xl { width:96px; height:96px; border-radius:26px; font-size:1.9rem; }
a.menu-compte { color:inherit; border-radius:12px; text-decoration:none; transition:background .15s; }
a.menu-compte:hover { background:var(--surface-3); text-decoration:none; }
.menu-compte .badge { margin-top:.3rem; }
.menu-compte small { display:block; }

.profil-carte { overflow:hidden; }
.profil-couverture { height:118px; background:var(--grad-brand); position:relative; }
.profil-couverture::after { content:""; position:absolute; inset:0; opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect x='6' y='6' width='14' height='14' rx='4' fill='%23fff'/%3E%3Crect x='28' y='28' width='10' height='10' rx='3' fill='%23fff' opacity='.6'/%3E%3C/svg%3E"); }
.profil-identite { display:flex; align-items:flex-start; gap:1.3rem; padding:0 1.5rem 1.35rem; margin-top:-48px; position:relative; flex-wrap:wrap; }
.profil-avatar { position:relative; flex:none; }
.profil-avatar .avatar { box-shadow:0 0 0 5px var(--surface), 0 16px 30px -18px rgba(15,18,34,.55); }
.profil-avatar-btn { position:absolute; inset-inline-end:-6px; bottom:-6px; width:34px; height:34px; border-radius:11px; border:3px solid var(--surface); background:var(--grad-brand); color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.profil-avatar-btn .ic { width:16px; height:16px; color:#fff; }
.profil-avatar-btn:hover { filter:brightness(1.08); }
.profil-texte { flex:1; min-width:220px; padding-top:60px; }
.profil-texte h2 { margin:0 0 .45rem; font-size:1.45rem; color:var(--heading); }
.profil-meta { display:flex; gap:.45rem; flex-wrap:wrap; align-items:center; }
.profil-chiffres { display:flex; gap:.6rem; flex-wrap:wrap; padding-top:58px; }
.profil-chiffres div { background:var(--surface-2); border:1px solid var(--line-2); border-radius:14px; padding:.6rem .9rem; min-width:118px; }
.profil-chiffres b { display:block; color:var(--heading); font-size:1rem; }
.profil-chiffres span { color:var(--muted); font-size:.75rem; }

.photo-profil { display:flex; gap:1.3rem; align-items:center; flex-wrap:wrap; }
.photo-profil > div { flex:1; min-width:220px; }
.photo-profil form { display:inline; }

.depot-photo { display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center; padding:1.8rem 1rem; border:2px dashed var(--line); border-radius:18px; background:var(--surface-2); cursor:pointer; transition:border-color .15s, background .15s; }
.depot-photo:hover, .depot-photo.survol { border-color:var(--brand); background:var(--rose-soft); }
.depot-photo input[type=file] { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.depot-photo b { color:var(--heading); margin-top:.4rem; }
.depot-photo small { color:var(--muted); }

.activite { display:flex; flex-direction:column; gap:.1rem; }
.activite-item { display:flex; gap:.7rem; padding:.45rem 0; position:relative; }
.activite-item:not(:last-child)::before { content:""; position:absolute; inset-inline-start:4px; top:1.25rem; bottom:-.45rem; width:2px; background:var(--line-2); }
.activite-puce { width:10px; height:10px; border-radius:50%; background:var(--grad-brand); flex:none; margin-top:.35rem; box-shadow:0 0 0 3px var(--surface); position:relative; }
.activite-item b { color:var(--heading); font-size:.88rem; font-weight:600; }
.activite-item small { display:block; color:var(--muted); font-size:.76rem; }

.liste-acces { display:flex; flex-direction:column; gap:.45rem; }
.acces-item { display:flex; align-items:center; gap:.65rem; font-size:.9rem; color:var(--heading); }
.acces-item span:not(.tuile) { flex:1; }

@media (max-width: 640px) {
  .profil-identite { padding:0 1rem 1.1rem; gap:.9rem; }
  .profil-chiffres { width:100%; padding-top:0; }
  .profil-texte { padding-top:0; }
  .profil-identite { flex-direction:column; align-items:stretch; }
  .profil-avatar { align-self:flex-start; }
  .profil-chiffres div { flex:1; min-width:0; }
  .avatar.avatar-xl { width:84px; height:84px; border-radius:22px; }
}

/* ==========================================================================
   v7 — Mode sombre
   <html data-theme="dark|light"> posé avant le premier rendu (script en tête de page) : choix mémorisé
   dans localStorage « ile_theme », à défaut préférence du système. Écran uniquement : l'impression reste claire.
   ========================================================================== */
.theme-bascule-menu .ic { color:var(--violet) !important; }
@media (prefers-reduced-motion:no-preference) {
  html.theme-bascule, html.theme-bascule *, html.theme-bascule *::before, html.theme-bascule *::after {
    transition:background-color .3s ease, border-color .3s ease, color .3s ease, fill .3s ease, stroke .3s ease, box-shadow .3s ease !important; }
}

@media screen {
  :root[data-theme="dark"] {
    color-scheme:dark;
    --brand:#E72773; --brand-600:#ffb35c; --brand-700:#ffc98a; --brand-50:rgba(255,161,51,.13); --brand-100:rgba(255,161,51,.24); --brand-200:rgba(255,161,51,.38);

    --violet:#8b5cf6; --violet-soft:rgba(139,92,246,.17); --violet-text:#b9a0ff;
    --blue:#4c8dff;   --blue-soft:rgba(45,124,255,.17);   --blue-text:#8ab6ff;
    --cyan:#22c3df;   --cyan-soft:rgba(15,181,211,.16);   --cyan-text:#5fd9ee;
    --teal:#14c3a8;   --teal-soft:rgba(15,179,154,.17);   --teal-text:#56e0c6;
    --green:#E72773;  --green-soft:rgba(22,196,127,.16);  --green-text:#52e0a2;
    --amber:#ffb830;  --amber-soft:rgba(255,176,32,.16);  --amber-text:#ffca5f;
    --orange:#ff8a33; --orange-soft:rgba(255,122,26,.17); --orange-text:#ffa86b;
    --pink:#f25ca8;   --pink-soft:rgba(236,72,153,.17);   --pink-text:#ff91c9;
    --rose:#ff4d6d;   --rose-soft:rgba(229,38,75,.19);    --rose-text:#ff8499;
    --slate:#8391a7;  --slate-soft:rgba(148,163,184,.14); --slate-text:#b5bfce;

    --canvas:#0c0e14; --surface:#151821; --surface-2:#1a1e28; --surface-3:#222733; --surface-elev:#1c202b;
    --line:#262b37; --line-2:#1f232e; --line-strong:#363c4b;
    --heading:#f2f4fa; --text:#c3c8d5; --muted:#8e95a8; --faint:#686f82;
    --side:#10131b; --side-2:rgba(255,255,255,.06); --side-line:#222633; --side-text:#c3c8d5; --side-muted:#7c8397;

    --shadow-xs:0 1px 2px rgba(0,0,0,.35);
    --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 4px 14px -6px rgba(0,0,0,.45);
    --shadow-md:0 14px 32px -12px rgba(0,0,0,.6);
    --shadow-lg:0 30px 60px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06);
    --ring:0 0 0 3.5px rgba(255,161,51,.3);
    --primary-softer:rgba(255,161,51,.07);
  }

  /* base */
  :root[data-theme="dark"] body { background:
      radial-gradient(1100px 520px at 105% -12%, rgba(251,140,0,.10), transparent 60%),
      radial-gradient(900px 520px at 30% -25%, rgba(124,58,237,.10), transparent 62%),
      radial-gradient(700px 500px at 0% 105%, rgba(15,181,211,.05), transparent 60%),
      var(--canvas);
    background-attachment:fixed; }
  :root[data-theme="dark"] ::selection { background:rgba(255,161,51,.4); color:#fff; }
  :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background:#343a48; background-clip:content-box; }
  :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background:#474e60; background-clip:content-box; }
  :root[data-theme="dark"] .text-yellow { color:var(--amber-text); }
  :root[data-theme="dark"] dialog::backdrop { background:rgba(4,5,9,.62); }

  /* menu latéral sombre, motif de petits carrés conservé */
  :root[data-theme="dark"] .sidenav { background:
      radial-gradient(300px 190px at 50% -60px, rgba(255,161,51,.15), transparent 72%),
      radial-gradient(260px 300px at -40px 105%, rgba(139,92,246,.13), transparent 70%),
      linear-gradient(180deg, #131722 0%, #10131b 55%, #0e1118 100%);
    border-inline-end-color:var(--line); box-shadow:10px 0 34px -28px rgba(0,0,0,.9); }
  :root[data-theme="dark"] .sidenav::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Crect x='9' y='9' width='4' height='4' rx='1.2' fill='%23ffa133' fill-opacity='.17'/%3E%3C/svg%3E"); }
  :root[data-theme="dark"] .sn-nav { scrollbar-color:#2a2f3c transparent; }
  :root[data-theme="dark"] .sn-nav::-webkit-scrollbar-thumb { background:#2a2f3c; background-clip:content-box; }
  :root[data-theme="dark"] .nav-heading { color:#9ca3b6; }
  :root[data-theme="dark"] .nav-heading .ic { color:#5f6679; }
  :root[data-theme="dark"] .nav-link:hover { background:rgba(255,255,255,.06); }
  :root[data-theme="dark"] .nav-count:not(.alerte) { background:rgba(255,255,255,.09); }
  :root[data-theme="dark"] .menu-compact .nav-link:hover::after { background:#262b38; }
  :root[data-theme="dark"] .sn-logo svg > g:first-of-type, :root[data-theme="dark"] .login-logo svg > g:first-of-type,
  :root[data-theme="dark"] .login-logo svg > text { fill:var(--heading); }
  :root[data-theme="dark"] .sn-logo svg > path, :root[data-theme="dark"] .login-logo svg > path { stroke:var(--heading); }

  /* barre du haut */
  :root[data-theme="dark"] .topnav { background:rgba(12,14,20,.74); }
  :root[data-theme="dark"] .topnav.defile { background:rgba(16,19,27,.88); border-bottom-color:var(--line); }
  :root[data-theme="dark"] .gsearch-btn { background:var(--surface-2); border-color:var(--line-strong); }
  :root[data-theme="dark"] .gsearch-btn:hover { border-color:#4a5165; }
  :root[data-theme="dark"] .btn-scan, :root[data-theme="dark"] .btn-dark { background:linear-gradient(135deg, #2b3148, #1a1e2c); box-shadow:0 8px 18px -10px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.09); }
  :root[data-theme="dark"] .btn-scan:hover, :root[data-theme="dark"] .btn-dark:hover { background:linear-gradient(135deg, #353c57, #202536); color:#fff; }
  :root[data-theme="dark"] .theme-bascule .ic-moon, :root[data-theme="dark"] .theme-bascule-menu .ic-moon { display:none; }
  :root[data-theme="dark"] .theme-bascule .ic-sun, :root[data-theme="dark"] .theme-bascule-menu .ic-sun { display:inline-block; }
  :root[data-theme="dark"] .theme-bascule .ic, :root[data-theme="dark"] .theme-bascule-menu .ic { color:var(--amber) !important; }

  /* en-tête de page (bandeau) */
  :root[data-theme="dark"] .page-head.hero { background:
      radial-gradient(380px 220px at 100% 0%, rgba(255,166,61,.17), transparent 70%),
      radial-gradient(320px 200px at 80% 120%, rgba(33,80,212,.13), transparent 70%),
      linear-gradient(100deg, var(--surface) 0%, var(--surface) 50%, #1e1720 100%);
    box-shadow:0 1px 2px rgba(0,0,0,.3), 0 16px 34px -28px rgba(251,140,0,.55); }
  :root[data-theme="dark"] .page-head.hero::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Crect x='9' y='9' width='4' height='4' rx='1.2' fill='%23ffa133' fill-opacity='.2'/%3E%3C/svg%3E"); }
  :root[data-theme="dark"] .page-head.hero .btn-groupe { background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line), 0 8px 18px -14px rgba(0,0,0,.8); }

  /* indicateurs, tableaux */
  :root[data-theme="dark"] .kpi-alerte { border-color:rgba(255,77,109,.36); background:linear-gradient(180deg, var(--surface) 58%, rgba(255,161,51,.1)); }
  :root[data-theme="dark"] .table th { background:var(--surface-2); }
  :root[data-theme="dark"] .table tbody tr:hover td { background:rgba(255,255,255,.028); }
  :root[data-theme="dark"] .table tr.selection td { background:rgba(255,161,51,.09); }
  :root[data-theme="dark"] tr.flash td { animation-name:flash-sombre; }
  @keyframes flash-sombre { 0% { background:rgba(255,202,95,.22); } 100% { background:transparent; } }

  /* formulaires, boutons, onglets */
  :root[data-theme="dark"] .form-control:hover, :root[data-theme="dark"] .liste-choix label:hover { border-color:#4a5165; }
  :root[data-theme="dark"] .form-control:focus { border-color:var(--brand); }
  :root[data-theme="dark"] .form-control::placeholder { color:#5f6679; }
  :root[data-theme="dark"] fieldset[disabled] .form-control, :root[data-theme="dark"] .form-control:disabled { background-color:var(--surface-2); }
  :root[data-theme="dark"] .switch input + span { background:#373d4c; }
  :root[data-theme="dark"] .btn-light, :root[data-theme="dark"] .btn-secondary { background:var(--surface-2); }
  :root[data-theme="dark"] .btn-light:hover, :root[data-theme="dark"] .btn-secondary:hover { background:var(--surface-3); border-color:#4a5165; }
  :root[data-theme="dark"] .btn-icon { color:#8e95a8; }
  :root[data-theme="dark"] .onglets a.actif, :root[data-theme="dark"] .onglets button.actif { background:#2d3344; box-shadow:0 1px 2px rgba(0,0,0,.45); }
  :root[data-theme="dark"] .onglet-n { background:rgba(255,255,255,.1); }

  /* menus, palette, notifications, encadrés */
  :root[data-theme="dark"] .menu-liste > a:hover, :root[data-theme="dark"] .menu-liste > button:hover, :root[data-theme="dark"] .menu-liste form > button:hover, :root[data-theme="dark"] a.menu-compte:hover { background:rgba(255,255,255,.06); }
  :root[data-theme="dark"] .alert { background:#232836; }
  :root[data-theme="dark"] .note-info { background:linear-gradient(135deg, rgba(45,124,255,.14), rgba(139,92,246,.1)); border-color:rgba(76,141,255,.3); color:#c4d8ff; }
  :root[data-theme="dark"] .note-warning { background:linear-gradient(135deg, rgba(255,176,32,.13), rgba(255,122,26,.1)); border-color:rgba(255,176,32,.3); color:#ffd894; }
  :root[data-theme="dark"] .note-success { background:linear-gradient(135deg, rgba(22,196,127,.14), rgba(16,185,129,.1)); border-color:rgba(22,196,127,.3); color:#9ff0cb; }
  :root[data-theme="dark"] .mini.alerte { border-color:rgba(255,176,32,.3); }
  :root[data-theme="dark"] .etat-vide-ico { background:linear-gradient(135deg, rgba(255,161,51,.16), rgba(139,92,246,.18)); box-shadow:0 0 0 8px rgba(255,161,51,.05), 0 16px 30px -18px rgba(0,0,0,.8); }

  /* tableau de bord, planning, configuration */
  :root[data-theme="dark"] .quick-actions .qa-scan { border-color:#2a2f45; }
  :root[data-theme="dark"] .g-grille { stroke:#2a2f3c; }
  :root[data-theme="dark"] .g-axe { fill:#7c8397; }
  :root[data-theme="dark"] .g-ligne, :root[data-theme="dark"] .g-point { stroke:#a78bfa; }
  :root[data-theme="dark"] .l-ligne { background:#a78bfa; }
  :root[data-theme="dark"] .cal-cell.other { background:#11141b; }
  :root[data-theme="dark"] .config-nav a.actif { background:linear-gradient(135deg, rgba(255,161,51,.15), rgba(168,85,247,.1)); box-shadow:inset 0 0 0 1px rgba(255,161,51,.3); }
  :root[data-theme="dark"] .logo-cadre { background:#f4f5fa; border-color:var(--line-strong); }   /* aperçu du logo tel qu'imprimé */
}

/* Paramètres › Numérotation des documents */
.num-series td { padding-top:.45rem; padding-bottom:.45rem; }
.num-series .form-control { min-width:0; }
.num-series .num-prefixe { width:6.5rem; text-transform:uppercase; }
.num-series .num-annee { width:6.5rem; }
.num-series .num-prochain { width:8rem; }
.num-series .num-apercu { font-weight:700; color:var(--heading); white-space:nowrap; }
.num-series tr.num-groupe td { background:var(--surface-2); color:var(--muted); font-size:.72rem; font-weight:650; text-transform:uppercase; letter-spacing:.06em; padding-top:.5rem; padding-bottom:.5rem; }
.num-series tbody tr.num-groupe:hover td { background:var(--surface-2); }
.num-series td.code { white-space:nowrap; }

/* Choix multiple (modes de règlement) */
.form-row-2 .full { grid-column:1 / -1; }
.choix-multi { display:flex; flex-wrap:wrap; gap:.4rem; }
.choix-multi label { position:relative; margin:0; cursor:pointer; }
.choix-multi input { position:absolute; opacity:0; width:0; height:0; }
.choix-multi span { display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .75rem; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--text); font-size:.86rem; font-weight:550; line-height:1.2; transition:border-color .12s, background .12s, color .12s; user-select:none; }
.choix-multi span .ic { width:14px; height:14px; display:none; }
.choix-multi label:hover span { border-color:var(--line-strong); }
.choix-multi input:checked + span { border-color:var(--brand); background:var(--brand-50); box-shadow:inset 0 0 0 1px var(--brand); color:var(--brand-600); font-weight:650; }
.choix-multi input:checked + span .ic { display:inline-block; color:var(--brand); }
.choix-multi input:focus-visible + span { outline:2px solid var(--brand); outline-offset:2px; }
.choix-multi input:disabled + span { cursor:default; opacity:.75; }
.num-series .num-jour { display:inline-block; min-width:6.5rem; font-size:.86rem; color:var(--muted); }

/* Formulaire pleine largeur sur 3 colonnes (création d'un bon de sortie) */
.form-grid-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.form-grid-3 .span-2 { grid-column:span 2; }
.bs-creation .card-body { padding-top:1.1rem; }
@media (max-width:980px) { .form-grid-3 { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:700px) { .form-grid-3 { grid-template-columns:1fr; } .form-grid-3 .span-2 { grid-column:auto; } }

/* Équipe : pastilles + ajout d'une personne hors liste */
.choix-equipe { display:grid; gap:.55rem; }
.equipe-ajout { display:flex; gap:.5rem; align-items:center; max-width:460px; }
.equipe-ajout .form-control { flex:1; min-width:0; }
.champ-auto { box-shadow:0 0 0 3px var(--brand-100); transition:box-shadow .3s; }
.form-grid-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
@media (max-width:980px) { .form-grid-4 { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:700px) { .form-grid-4 { grid-template-columns:1fr; } }

/* En-tête de page collant : Enregistrer / Valider toujours accessibles en haut de l'écran */
.page-head.collante { position:sticky; top:var(--topbar-h); z-index:60; margin-inline:-.9rem; padding:.55rem .9rem; border-radius:0 0 var(--r-lg) var(--r-lg); transition:box-shadow .2s, background-color .2s; }
.page-head.collante.colle { background:color-mix(in srgb, var(--canvas) 90%, transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 10px 24px -18px rgba(15, 23, 42, .45); border-bottom:1px solid var(--line-2); }
.page-head.collante.colle .page-sub { display:none; }
.page-head.collante.colle .page-title { font-size:1.12rem; }
.page-head.collante .page-actions .btn { white-space:nowrap; }
.sticky, .config-nav { top:calc(var(--topbar-h) + var(--tete-collee, 0px) + 14px); }
@media (max-width:700px) {
  .page-head.collante { margin-inline:-1rem; padding-inline:1rem; }
  .page-head.collante.colle .page-titres { display:none; }
  .page-head.collante.colle .page-actions { flex-wrap:nowrap; overflow-x:auto; padding-bottom:.1rem; }
}
:root[data-theme="dark"] .page-head.collante.colle { box-shadow:0 10px 24px -16px rgba(0, 0, 0, .8); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .page-head.collante.colle { box-shadow:0 10px 24px -16px rgba(0, 0, 0, .8); } }


/* Barre du haut : recherche centrée entre le fil d'Ariane et le groupe « Scanner » (même distance des deux côtés) */
@media (min-width:981px) {
  .topnav { grid-template-columns:fit-content(38%) minmax(12rem, 1fr) auto; }
  .topnav .gsearch-btn { justify-self:center; width:min(440px, 100%); }
  .topnav .crumbs { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
}

/* Bouton secondaire d'annulation dans l'en-tête (Annuler le bon, Abandonner le pointage) */
.btn.btn-light.text-danger { color:var(--danger); }
.btn.btn-light.text-danger .ic { color:currentColor; }
.btn.btn-light.text-danger:hover { background:color-mix(in srgb, var(--danger) 9%, var(--surface)); border-color:color-mix(in srgb, var(--danger) 35%, var(--line)); }


/* Rapports & statistiques */
.rapport-periode { margin-bottom:1.1rem; }
.rapport-periode .toolbar { border-bottom:none; flex-wrap:wrap; }
.rapport-table th[data-tri] { cursor:pointer; user-select:none; white-space:nowrap; }
.rapport-table th[data-tri]::after { content:'↕'; margin-inline-start:.3rem; opacity:.35; font-size:.85em; }
.rapport-table th[aria-sort="descending"]::after { content:'↓'; opacity:.9; }
.rapport-table th[aria-sort="ascending"]::after { content:'↑'; opacity:.9; }
.rapport-table td a { color:inherit; text-decoration:none; }
.rapport-table td a:hover { color:var(--brand); text-decoration:underline; }
.rapport-table tfoot td { position:sticky; bottom:0; background:var(--surface-2); font-weight:750; border-top:2px solid var(--line); white-space:nowrap; }
.age-barre { display:flex; height:14px; border-radius:99px; overflow:hidden; background:var(--surface-3); margin:.3rem 0 1rem; }
.age-barre span { height:100%; }
.age-legende { display:grid; gap:.45rem; }
.age-legende > div { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.55rem; font-size:.88rem; }
.age-legende b { font-variant-numeric:tabular-nums; white-space:nowrap; }
.age-pastille { width:10px; height:10px; border-radius:3px; display:inline-block; }
.age-vert { background:#10b981; } .age-ambre { background:#f5b301; } .age-orange { background:#f97316; } .age-rouge { background:#ef4444; } .age-bordeaux { background:#9f1239; }
.rapport-table th:first-child, .rapport-table td:first-child { min-width:16rem; }
.rapport-table td.num, .rapport-table th.num { white-space:nowrap; }
@media (max-width:700px) { .rapport-table th:first-child, .rapport-table td:first-child { min-width:11rem; } }

/* Fiche client : onglets de l'historique */
.fiche-onglets { display:flex; width:fit-content; max-width:100%; margin:.2rem 0 1.1rem; overflow-x:auto; flex-wrap:nowrap; }
.fiche-onglets a { white-space:nowrap; }
.fiche-panneau > .card, .fiche-panneau > .grille-lat, .fiche-panneau > .grille-2 { margin-bottom:1.1rem; }
.fiche-filtre-docs .btn.actif { background:var(--brand); border-color:var(--brand); color:#fff; }
/* Scanner : saisie code / quantité / OK au-dessus de la caméra */
.sa-camera > .sa-manuel:first-child { margin-top:0; margin-bottom:.7rem; position:relative; z-index:5; }

/* ==========================================================================
   Application installée sur l'écran d'accueil (iPhone / iPad) et page Applications mobiles
   ========================================================================== */
.appli-installee { --topbar-h:calc(64px + env(safe-area-inset-top, 0px)); }
/* bandeau sombre sous l'heure et la batterie (barre d'état translucide) */
.appli-installee body::before { content:''; position:fixed; z-index:1000; top:0; inset-inline-start:0; inset-inline-end:0; height:env(safe-area-inset-top, 0px); background:#16181c; pointer-events:none; }
.appli-installee .topnav { padding-top:env(safe-area-inset-top, 0px); }
.appli-installee .sidenav { padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px); }
.appli-installee dialog.drawer { border-top:env(safe-area-inset-top, 0px) solid #16181c; padding-bottom:env(safe-area-inset-bottom, 0px); }
.appli-installee .container-app { padding-bottom:calc(2rem + env(safe-area-inset-bottom, 0px)); }
.appli-installee body.login-page { padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px); }

.appli-carte .card-body { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:1.5rem; align-items:start; }
.appli-qr { text-align:center; }
.appli-qr svg { display:block; width:150px; height:150px; padding:8px; background:#fff; border:1px solid var(--line); border-radius:14px; }
.appli-qr small { display:block; margin-top:.45rem; color:var(--muted); font-size:.76rem; }
.appli-meta { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.appli-etapes { list-style:none; counter-reset:etape; margin:0 0 1.15rem; padding:0; display:flex; flex-direction:column; gap:.75rem; }
.appli-etapes li { counter-increment:etape; position:relative; padding-inline-start:2.3rem; line-height:1.5; }
.appli-etapes li::before { content:counter(etape); position:absolute; inset-inline-start:0; top:0; width:1.6rem; height:1.6rem; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--brand-50); color:var(--brand); font-weight:750; font-size:.8rem; }
.appli-ico-partage .ic { width:16px; height:16px; vertical-align:-3px; color:var(--blue-text, #2563eb); }
[data-theme="dark"] .appli-etapes li::before { background:rgba(251,140,0,.18); color:#ff8a8f; }
@media (max-width:700px) {
  .appli-carte .card-body { grid-template-columns:1fr; }
  .appli-qr { display:none; }
}

/* ==========================================================================
   Téléphone : tableaux de liste affichés en cartes (étiquettes de colonnes posées par app.js)
   ========================================================================== */
@media (max-width:700px) {
  .toasts { inset-inline-start:1rem; inset-inline-end:1rem; max-width:none; }
  .container-app { overflow-wrap:anywhere; }
  .table-wrap:has(> .table-cartes) { overflow-x:visible; }
  .table-cartes thead { display:none; }
  .table-cartes, .table-cartes tbody, .table-cartes tfoot { display:block; width:100%; }
  .table-cartes tr { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.5rem 1rem; padding:.85rem 1rem; border-bottom:1px solid var(--line-2); }
  .table-cartes tbody tr:last-child { border-bottom:none; }
  .table-cartes tfoot tr { background:var(--surface-2); border-top:2px solid var(--line); }
  .table-cartes td { display:block; min-width:0; width:auto !important; max-width:none; padding:0 !important; border:none !important; background:none !important; text-align:start !important; font-size:.88rem; position:static; }
  .table-cartes td::before { content:attr(data-label); display:block; margin-bottom:.12rem; color:var(--muted); font-size:.66rem; font-weight:650; letter-spacing:.05em; text-transform:uppercase; }
  .table-cartes td[data-label=""]::before, .table-cartes td.carte-titre::before, .table-cartes td.carte-plein::before, .table-cartes td.carte-actions::before { content:none; }
  .table-cartes td.carte-titre { grid-column:1 / -1; font-size:.95rem; }
  .table-cartes td.carte-plein, .table-cartes td:has(> .personne) { grid-column:1 / -1; }
  .table-cartes td.carte-actions { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; white-space:normal; }
  .table-cartes td.carte-actions form { display:inline-flex; }
  .table-cartes td.carte-vide { display:none; }
  .table-cartes tr.a-coche { position:relative; padding-inline-end:3rem; }
  .table-cartes td.carte-coche { position:absolute; top:.85rem; inset-inline-end:1rem; }
  .table-cartes td.carte-coche input { width:20px; height:20px; }
  .table-cartes td.carte-media { grid-column:1 / -1; }
  .table-cartes td.carte-media::before { content:none; }
  .table-cartes td.num { white-space:normal; }
  .table-cartes .personne { max-width:100%; }
  .table-cartes tbody tr:hover td { background:none; }
  .table-cartes tr.ligne-alerte { box-shadow:inset 3px 0 0 var(--danger); }
  .table-cartes tr.ligne-alerte td:first-child { box-shadow:none; }
  .table-cartes tr.ligne-vide { display:block; }
  /* tableaux de saisie : champs pleine largeur, suppression de la largeur minimale du bureau */
  .table-cartes.table-saisie { min-width:0 !important; }
  .table-saisie td.carte-titre::before { content:attr(data-label); }
  .table-saisie td .form-control, .table-saisie td select, .table-saisie td textarea { width:100%; min-width:0 !important; max-width:100%; }
  .table-saisie td > div, .table-saisie .remise-combo, .table-saisie .input-inline { min-width:0 !important; max-width:100%; }
  .table-saisie td.carte-actions { justify-content:flex-end; }
  .table-saisie .l-total { padding-top:0; font-size:1rem; }
}

/* Planning : grille mensuelle large sur ordinateur ; sur téléphone grille compacte + liste des jours occupés */
.cal-grid-mois { min-width:760px; border-top:0; }
.cal-agenda { display:none; }
@media (max-width:700px) {
  .cal-nav { width:100%; justify-content:space-between; }
  .cal-mois { min-width:0; }
  .cal-legende { gap:.35rem .8rem; font-size:.74rem; }
  .cal-grid-mois { min-width:0; }
  .cal-grid-mois .cal-head { padding:.45rem 0; text-align:center; font-size:.6rem; letter-spacing:.02em; }
  .cal-grid-mois .cal-cell { min-height:54px; padding:.25rem .15rem; text-align:center; overflow:hidden; }
  .cal-grid-mois .cal-cell .dnum { min-width:22px; height:22px; font-size:.74rem; }
  .cal-grid-mois .cal-evt { height:5px; margin:3px 2px 0; padding:0; border:0; border-radius:3px; font-size:0; background:var(--violet); }
  .cal-grid-mois .cal-evt.sortie { background:var(--orange); }
  .cal-grid-mois .cal-evt.retour { background:var(--green); }
  .cal-grid-mois .cal-evt.brouillon { background:#94a3b8; }
  .cal-agenda { display:block; border-top:1px solid var(--line-2); }
  .cal-agenda-jour { display:flex; gap:.9rem; padding:.8rem 1rem; border-bottom:1px solid var(--line-2); }
  .cal-agenda-jour:last-child { border-bottom:none; }
  .cal-agenda-date { flex:none; width:2.8rem; text-align:center; }
  .cal-agenda-date b { display:block; font-size:1.3rem; line-height:1.1; color:var(--heading); font-family:var(--font-display); }
  .cal-agenda-date span { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
  .cal-agenda-jour.today .cal-agenda-date b { color:var(--brand); }
  .cal-agenda-evts { flex:1; min-width:0; display:flex; flex-direction:column; gap:.35rem; }
  .cal-agenda-evts .cal-evt { margin:0; padding:.4rem .6rem; white-space:normal; font-size:.86rem; }
  .cal-agenda-evts .cal-evt small { display:block; font-weight:500; opacity:.8; font-size:.76rem; }
}

/* Écrans tactiles : cibles d'au moins 40 px ; champs en 16 px sur téléphone (sinon Safari iPhone zoome à chaque saisie) */
@media (pointer:coarse) {
  .btn-icon { width:40px; height:40px; }
  .table-cartes td.carte-actions .btn-icon { background:var(--surface-2) !important; }
}
@media (max-width:700px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea, .form-control, .lignes-doc .form-control { font-size:16px; }
  .lignes-doc .l-desc { font-size:15px; }
}

/* Raccourcis du tableau de bord réservés au téléphone et à la tablette (menu latéral replié) */
@media (min-width:981px) { .quick-actions .qa-mobile { display:none; } }

/* Export TEJ d'une facture (tiroir) */
.tej-resume { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:.45rem 1rem; margin:1rem 0; font-size:.9rem; }
.tej-resume dt { color:var(--muted); font-weight:600; }
.tej-resume dd { margin:0; color:var(--heading); }
.tej-fichiers { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.tej-fichiers li { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.3rem .8rem; padding:.55rem .75rem; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2); font-size:.86rem; }
.tej-fichiers li span { color:var(--muted); }

/* Règlement : retenue à la source retenue par le client */
.regl-retenue { padding:.8rem .9rem; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface-2); }
.regl-retenue-tete { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem .8rem; }
.regl-retenue-tete .switch { margin:0; }
.regl-taux { width:7.5rem; }
.regl-decompte { margin:.7rem 0 .5rem; display:flex; flex-direction:column; gap:.2rem; font-size:.86rem; }
.regl-decompte > div { display:flex; justify-content:space-between; gap:1rem; }
.regl-decompte dt { color:var(--muted); font-weight:500; }
.regl-decompte dd { margin:0; font-variant-numeric:tabular-nums; color:var(--heading); white-space:nowrap; }
.regl-decompte .total { margin-top:.25rem; padding-top:.35rem; border-top:1px dashed var(--line-strong); font-weight:700; }
.regl-decompte .total dt { color:var(--heading); font-weight:700; }
.regl-memo { font-size:.8rem; margin:0; }

/* Lignes de document : prix sous le plancher / jour du produit */
.lignes-doc tr.sous-plancher .l-pu { border-color:var(--danger); background:var(--danger-soft); color:var(--danger); font-weight:700; }
.lignes-doc .l-plancher { display:block; margin-top:.25rem; font-size:.72rem; font-weight:600; color:var(--danger); white-space:nowrap; text-align:end; }
.alerte-plancher { margin:.8rem 1.1rem; }

/* Double authentification (Mon profil) */
.tfa-activation{display:flex;gap:1.25rem;flex-wrap:wrap;align-items:flex-start}
.tfa-activation>div:last-child{flex:1 1 16rem;min-width:0}
.tfa-qr{background:#fff;padding:.6rem;border-radius:12px;border:1px solid var(--line);flex:0 0 auto}
.tfa-secret{display:inline-block;margin-top:.25rem;padding:.2rem .45rem;border-radius:6px;background:var(--surface-2);font-size:.86em;word-break:break-all}
.tfa-codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.5rem;margin:.75rem 0}
.tfa-codes code{padding:.45rem .5rem;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);text-align:center;letter-spacing:.04em}

/* Modèles d'e-mails (configuration) */
.config-nav-modeles{display:flex;flex-wrap:wrap;gap:.4rem}
.chips-variables{display:flex;flex-wrap:wrap;gap:.35rem}
.chips-variables code{font-size:.8rem}

/* Page publique de signature d'une offre de prix */
.page-signature{background:var(--canvas);min-height:100vh;margin:0}
.signature-shell{max-width:720px;margin:0 auto;padding:2rem 1rem 3rem;display:flex;flex-direction:column;gap:1rem}
.signature-logo{display:flex;justify-content:center;margin-bottom:.5rem}
.signature-doc .card-header h1{font-size:1.15rem;margin:0}
.signature-infos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:.6rem 1.2rem;margin:0 0 1rem}
.signature-infos div{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.signature-infos dt{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.signature-infos dd{margin:0;font-size:.98rem;word-break:break-word}
.signature-cadre{position:relative;background:#fff;border:1px dashed var(--line);border-radius:12px;height:190px;touch-action:none}
:root[data-theme="dark"] .signature-cadre{background:#f7f8fa}
.signature-cadre canvas{display:block;width:100%;height:100%;border-radius:12px;cursor:crosshair}
.signature-effacer{position:absolute;top:.5rem;inset-inline-end:.5rem}
.signature-actions{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.signature-final{text-align:center;padding:2.2rem 1.5rem}
.signature-final h1{font-size:1.3rem;margin:.6rem 0}
.signature-ok{width:60px;height:60px;margin:0 auto;border-radius:50%;background:var(--green-soft);color:var(--green-text);display:flex;align-items:center;justify-content:center}
.signature-ok svg{width:30px;height:30px}
.signature-preuve{font-size:.84rem;color:var(--muted);word-break:break-word;margin:.8rem 0 1.2rem}
.signature-pied{text-align:center;font-size:.82rem;color:var(--muted);margin:.5rem 0 0}

/* Signature électronique d'une offre de prix (fiche devis) */
.carte-signature{margin-bottom:1rem}
.sig-signee{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.sig-image{max-width:220px;max-height:90px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.35rem}
.sig-lien{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.sig-lien .form-control{flex:1 1 18rem;min-width:0;font-size:.86rem}
.sig-champs{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:.9rem 1rem;align-items:end}
.sig-champs>div{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.sig-champs .flabel{margin:0;white-space:nowrap}

/* Historique des communications (fiche document et fiche client) */
.comm-liste{display:flex;flex-direction:column;gap:.15rem}
.comm-item{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:center;padding:.6rem .2rem;border-bottom:1px solid var(--line-2)}
.comm-item:last-child{border-bottom:0}
.comm-corps{min-width:0;display:flex;flex-direction:column;gap:.1rem}
.comm-detail{font-size:.84rem;color:var(--muted);word-break:break-word}
.comm-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.1rem;font-size:.8rem;color:var(--muted);white-space:nowrap}
@media (max-width:700px){
  .comm-item{grid-template-columns:auto 1fr;gap:.6rem}
  .comm-meta{grid-column:2;align-items:flex-start;flex-direction:row;gap:.5rem;flex-wrap:wrap}
}

/* Page Notifications (nouvelles / déjà vues) */
.notif-liste{display:flex;flex-direction:column;gap:.15rem}
.notif-ligne{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:center;padding:.55rem .2rem;border-bottom:1px solid var(--line-2)}
.notif-ligne:last-child{border-bottom:0}
.notif-ligne.lue{opacity:.72}
.notif-texte{display:flex;flex-direction:column;gap:.1rem;min-width:0;color:inherit;text-decoration:none;word-break:break-word}
.notif-texte small{color:var(--muted);font-size:.78rem}
.notif-pied{display:flex;gap:.4rem;flex-wrap:wrap;padding:.5rem .6rem 0;border-top:1px solid var(--line-2);margin-top:.35rem}
@media (max-width:700px){ .notif-ligne{grid-template-columns:auto 1fr} .notif-ligne form{grid-column:2} }

/* Page de connexion : logo agrandi, centré entre le haut du panneau et le texte (le texte garde sa place au milieu) */
.login-visuel { justify-content:flex-start; }
.login-visuel > .login-visuel-logo { flex:1 1 0; display:flex; align-items:center; min-height:0; margin-top:-3rem; }   /* la zone part du bord supérieur (compense le padding) */
.login-visuel > .login-visuel-pied { flex:1 1 0; display:flex; align-items:flex-end; margin:0; }

/* ==========================================================================
   Charte Update IT & Training (site update-it-training.com)
   orange #E72773 (actions) · marine #0B1044 (texte, structure) · bleu #2150d4 · vert #E72773 (états OK)
   fond #f6f8fc · bordures #E6E8F0
   ========================================================================== */
:root {
  --marine:#0B1044; --marine-2:#171D60; --marine-soft:#e9eef8;
  --brand:#E72773; --brand-600:#C71C61; --brand-700:#AD164E; --brand-50:#fff2e0; --brand-100:#ffe3bf; --brand-200:#ffc980;
  --blue:#2150d4;  --blue-soft:#ebf0fd;  --blue-text:#1d44b4;
  --green:#E72773; --green-soft:#f0f8e3; --green-text:#4f7d1a;
  --orange:#E72773; --orange-soft:#fff2e0; --orange-text:#b85f00;
  --grad-brand:linear-gradient(135deg, #FF2D7A 0%, #E72773 55%, #C71C61 100%);
  --grad-orange:linear-gradient(135deg, #ffb54d, #C71C61);
  --grad-red:linear-gradient(135deg, #f87171, #dc2626);
  --grad-blue:linear-gradient(135deg, #4f7bf0, #2150d4);
  --grad-green:linear-gradient(135deg, #b2db6d, #C71C61);
  --grad-progress:linear-gradient(90deg, #E72773, #C71C61);
  --grad-marine:linear-gradient(135deg, #171D60, #0B1044);
  --canvas:#f6f8fc; --line:#E6E8F0; --line-2:#eef1f7; --line-strong:#d3d9e6;
  --heading:#0B1044; --text:#33415e; --muted:#535973; --faint:#97a2b8;
  --side:#ffffff; --side-line:#E6E8F0; --side-text:#26365a; --side-muted:#7d89a3;
  --ring:0 0 0 3.5px rgba(251,140,0,.18);
  --success:var(--green-text); --success-soft:var(--green-soft);
  --info:var(--blue-text); --info-soft:var(--blue-soft);
}
body { background:
  radial-gradient(1100px 520px at 105% -12%, rgba(251,140,0,.07), transparent 60%),
  radial-gradient(900px 520px at 30% -25%, rgba(33,80,212,.06), transparent 62%),
  var(--canvas); background-attachment:fixed; }
/* ton « red » réservé aux alertes (l'orange est la couleur de marque) */
.ton-red, .kpi-red { --g:#f87171; --gt:#c81e1e; --gs:#fdecec; --gg:var(--grad-red); --glow:rgba(220,38,38,.45); --glow-soft:rgba(220,38,38,.12); }
.kpi-red .kpi-ico { background:#fdecec; color:#c81e1e; }
.ton-orange, .kpi-orange { --g:#ffb54d; --gt:var(--orange-text); --gs:var(--orange-soft); --gg:var(--grad-orange); --glow:rgba(251,140,0,.5); --glow-soft:rgba(251,140,0,.14); }
.ton-green, .kpi-green { --g:#b2db6d; --gt:var(--green-text); --gs:var(--green-soft); --gg:var(--grad-green); --glow:rgba(111,166,43,.5); --glow-soft:rgba(151,199,71,.16); }
.ton-blue, .kpi-blue { --g:#7c9cf2; --gt:var(--blue-text); --gs:var(--blue-soft); --gg:var(--grad-blue); --glow:rgba(33,80,212,.5); --glow-soft:rgba(33,80,212,.12); }
.badge-success { background:var(--green-soft); color:var(--green-text); }
.btn-success { background:#C71C61; color:#fff; }
.btn-success:hover { background:#5d8f22; color:#fff; }
.btn-dark { background:var(--marine); color:#fff; }
.btn-dark:hover { background:var(--marine-2); color:#fff; }
.alert { background:var(--marine); }
.alert-success::before { background:#E72773; }

/* menu latéral clair : structure marine, accents orange */
.sidenav { background:
    radial-gradient(300px 190px at 50% -60px, rgba(251,140,0,.10), transparent 72%),
    radial-gradient(260px 300px at -40px 105%, rgba(33,80,212,.07), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfe 55%, #f6f8fc 100%); }
.sidenav::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='1.6' fill='%230B1044' fill-opacity='.10'/%3E%3C/svg%3E"); }
.nav-heading { color:var(--marine); opacity:.78; }
.nav-heading:hover, .nav-group.a-active > .nav-heading { color:var(--brand); opacity:1; }
.nav-link { color:var(--side-text); }
.nav-link:hover { background:var(--brand-50); color:var(--marine); }
.nav-link.active { background:var(--grad-marine); color:#fff; box-shadow:0 10px 22px -12px rgba(12,36,82,.75), inset 3px 0 0 var(--brand); }
.nav-link.active .nav-ico.ton-module .ic, .nav-link.active .nav-ico { color:#ffb04d; }
.nav-ico.ton-module.ton-orange { --nav-ic:#C71C61; }
.nav-ico.ton-module.ton-green  { --nav-ic:#C71C61; }
.nav-ico.ton-module.ton-blue   { --nav-ic:#2150d4; }
.nav-ico.ton-module.ton-gray   { --nav-ic:#0B1044; }
.nav-count.alerte { background:var(--grad-brand); }
.menu-compact .nav-link:hover::after { background:var(--marine); }

/* en-tête d'accueil : liseré orange */
.page-head.hero { background:
    radial-gradient(380px 220px at 100% 0%, rgba(251,140,0,.12), transparent 70%),
    radial-gradient(320px 200px at 80% 120%, rgba(33,80,212,.07), transparent 70%),
    linear-gradient(100deg, #fff 0%, #fff 50%, #fff8ee 100%); }
.recap-total { background:var(--grad-marine); box-shadow:0 12px 24px -12px rgba(12,36,82,.55); }
.recap-total b { color:#ffb04d; }
.login-visuel { background:radial-gradient(900px 500px at 15% 10%, rgba(251,140,0,.30), transparent 60%), radial-gradient(700px 500px at 90% 90%, rgba(151,199,71,.20), transparent 60%), #0B1044; }
.login-atouts .ic { color:#ffb04d; }
/* Logo blanc transparent sur le panneau sombre ; logo couleur sans cadre sur fond clair */
.login-visuel-logo img, .login-logo img { background:none; border-radius:0; padding:0; }
.logo-img { display:block; max-width:100%; object-fit:contain; }
.sidenav .sn-top { padding:1.1rem 1rem 1rem; }

@media screen {
  :root[data-theme="dark"] {
    --brand:#E72773; --brand-600:#ffb35c; --brand-700:#ffc98a;
    --green:#E72773; --green-soft:rgba(151,199,71,.16); --green-text:#b8e07a;
    --blue:#5b84ee; --blue-soft:rgba(33,80,212,.2); --blue-text:#9db5f7;
    --orange:#ffa133; --orange-soft:rgba(255,161,51,.16); --orange-text:#ffc07a;
    --heading:#f2f5fb; --text:#c4cbdb; --muted:#93a0bb; --canvas:#0a1226; --surface:#111b33; --surface-2:#15203b; --surface-3:#1b2846; --surface-elev:#16213d;
    --line:#22304f; --line-2:#1a2643; --line-strong:#33446a; --side:#0d1730; --side-line:#22304f; --side-text:#c4cbdb; --side-muted:#7f8db0;
  }
  :root[data-theme="dark"] .sidenav { background:linear-gradient(180deg, #0f1b38 0%, #0c1630 55%, #0a1226 100%); }
  :root[data-theme="dark"] .nav-heading { color:#9fb0d4; }
  :root[data-theme="dark"] .nav-link:hover { background:rgba(255,161,51,.10); color:#fff; }
  :root[data-theme="dark"] .nav-link.active { background:linear-gradient(135deg, #1d3a80, #142a5c); }
  :root[data-theme="dark"] body { background:radial-gradient(1100px 520px at 105% -12%, rgba(255,161,51,.08), transparent 60%), var(--canvas); background-attachment:fixed; }
  /* mode sombre : logo blanc transparent, sans cadre */
  :root[data-theme="dark"] .sn-brand img, :root[data-theme="dark"] .sn-coeur img { background:none; border-radius:0; padding:0; }
  :root[data-theme="dark"] .alert { background:#1b2846; }
}

:root{--grad-brand:linear-gradient(135deg,#FF2D7A,#FF6839);--text:#535973;--muted:#535973;--border:#E6E8F0}

/* Logo : version blanche transparente en mode sombre */
img.logo-sombre { display:none !important; }
:root[data-theme="dark"] img.logo-clair { display:none !important; }
:root[data-theme="dark"] img.logo-sombre { display:block !important; }