@font-face{
  font-family:"Barlow";
  font-weight:400;
  src:url(fonts/barlow-latin-400-normal.woff2) format("woff2");
  font-display:swap;
}

@font-face{
  font-family:"Barlow";
  font-weight:600;
  src:url(fonts/barlow-latin-600-normal.woff2) format("woff2");
  font-display:swap;
}

@font-face{
  font-family:"Barlow Semi Condensed";
  font-weight:600;
  src:url(fonts/barlow-semi-condensed-latin-600-normal.woff2) format("woff2");
  font-display:swap;
}

@font-face{
  font-family:"Barlow Semi Condensed";
  font-weight:700;
  src:url(fonts/barlow-semi-condensed-latin-700-normal.woff2) format("woff2");
  font-display:swap;
}


/* =========================================================
   VARIABLES
   ========================================================= */

:root{
  --bg:#f3f7f7;

  --surface:#ffffff;
  --surface-2:#f0f5f5;
  --surface-3:#e4ecee;

  --ink:#14272d;
  --muted:#657a81;

  --line:#d7e2e4;
  --line-strong:#bdcdd1;

  --blue:#176b78;
  --blue-hover:#125864;
  --blue-soft:#e3f1f3;
  --blue-ink:#ffffff;

  --label:#f2b84b;
  --label-hover:#f7c45e;
  --label-ink:#4b3308;

  --red:#c64b3d;
  --red-soft:#fbeceb;

  --green:#2d8962;
  --green-soft:#e6f5ee;

  --teal:#197e77;
  --teal-soft:#e4f4f2;

  --amber:#b97813;
  --amber-bg:#fff1d8;

  --nav:#103b43;
  --nav-hover:#174c55;
  --nav-active:#e1f0f1;
  --nav-text:#d7e7e9;
  --nav-muted:#96b1b6;

  --radius:13px;
  --radius-s:9px;
  --radius-xs:6px;

  --shadow-xs:
    0 1px 2px rgba(16,48,55,.035);

  --shadow-sm:
    0 6px 18px rgba(16,48,55,.065);

  --shadow-md:
    0 13px 34px rgba(16,48,55,.105);

  --shadow-lg:
    0 22px 52px rgba(16,48,55,.16);

  --f-body:
    "Barlow",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;

  --f-cond:
    "Barlow Semi Condensed",
    "Barlow",
    system-ui,
    sans-serif;

  color-scheme:light;
}


/* =========================================================
   DARK MODE
   ========================================================= */

@media (prefers-color-scheme:dark){

  :root:not([data-theme=light]){

    --bg:#0d181c;

    --surface:#17262b;
    --surface-2:#1c3036;
    --surface-3:#263c42;

    --ink:#edf4f5;
    --muted:#9bb0b5;

    --line:#2c4147;
    --line-strong:#40575e;

    --blue:#58b6c2;
    --blue-hover:#70c5cf;
    --blue-soft:#19383e;
    --blue-ink:#07171a;

    --label:#f2b84b;
    --label-hover:#f7c45e;
    --label-ink:#352400;

    --red:#ef8173;
    --red-soft:#3b2421;

    --green:#6dca9c;
    --green-soft:#1c382b;

    --teal:#55c0b7;
    --teal-soft:#193a38;

    --amber:#e1ad4b;
    --amber-bg:#3b3019;

    --nav:#081f25;
    --nav-hover:#103139;
    --nav-active:#21444b;
    --nav-text:#dcebec;
    --nav-muted:#91aeb3;

    --shadow-xs:
      0 1px 2px rgba(0,0,0,.24);

    --shadow-sm:
      0 6px 18px rgba(0,0,0,.28);

    --shadow-md:
      0 13px 34px rgba(0,0,0,.36);

    --shadow-lg:
      0 22px 52px rgba(0,0,0,.46);

    color-scheme:dark;
  }
}

:root[data-theme=dark]{

  --bg:#0d181c;

  --surface:#17262b;
  --surface-2:#1c3036;
  --surface-3:#263c42;

  --ink:#edf4f5;
  --muted:#9bb0b5;

  --line:#2c4147;
  --line-strong:#40575e;

  --blue:#58b6c2;
  --blue-hover:#70c5cf;
  --blue-soft:#19383e;
  --blue-ink:#07171a;

  --label:#f2b84b;
  --label-hover:#f7c45e;
  --label-ink:#352400;

  --red:#ef8173;
  --red-soft:#3b2421;

  --green:#6dca9c;
  --green-soft:#1c382b;

  --teal:#55c0b7;
  --teal-soft:#193a38;

  --amber:#e1ad4b;
  --amber-bg:#3b3019;

  --nav:#081f25;
  --nav-hover:#103139;
  --nav-active:#21444b;
  --nav-text:#dcebec;
  --nav-muted:#91aeb3;

  --shadow-xs:
    0 1px 2px rgba(0,0,0,.24);

  --shadow-sm:
    0 6px 18px rgba(0,0,0,.28);

  --shadow-md:
    0 13px 34px rgba(0,0,0,.36);

  --shadow-lg:
    0 22px 52px rgba(0,0,0,.46);

  color-scheme:dark;
}


/* =========================================================
   RESET / BASE
   ========================================================= */

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html,
body{
  margin:0;
  height:100%;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.5;

  background:
    radial-gradient(
      circle at 20% 0%,
      color-mix(in srgb,var(--blue-soft) 45%,transparent),
      transparent 32%
    ),
    var(--bg);

  color:var(--ink);

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,
h2,
h3{
  font-family:var(--f-cond);
  font-weight:700;

  margin:0;

  line-height:1.08;

  letter-spacing:-.018em;
}

h1{
  font-size:2.05rem;
}

h2{
  font-size:1.45rem;
}

h3{
  font-size:1.1rem;
}

a{
  color:var(--blue);
  text-decoration:none;

  transition:
    color .16s ease;
}

a:hover{
  color:var(--blue-hover);
  text-decoration:none;
}

button,
input,
select,
textarea{
  font:inherit;
  color:inherit;
}

:focus-visible{
  outline:3px solid
    color-mix(
      in srgb,
      var(--blue) 70%,
      white
    );

  outline-offset:3px;

  border-radius:6px;
}

::selection{
  background:var(--blue);
  color:var(--blue-ink);
}

.muted{
  color:var(--muted);
}

.small{
  font-size:.875rem;
}

.right{
  text-align:right;
}

.hidden{
  display:none!important;
}

.mono{
  font-family:var(--f-cond);
  font-weight:600;
}


/* =========================================================
   STRUCTURE
   ========================================================= */

#app{
  min-height:100%;

  display:flex;

  flex-direction:column;
}

main{
  flex:1;

  width:100%;
  max-width:1280px;

  margin:0 auto;

  padding:
    22px
    14px
    102px;
}


/* =========================================================
   NAVIGATION MOBILE
   ========================================================= */

.nav{
  position:fixed;

  bottom:0;
  left:0;
  right:0;

  z-index:20;

  display:flex;

  background:
    color-mix(
      in srgb,
      var(--surface) 96%,
      transparent
    );

  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);

  border-top:1px solid var(--line);

  box-shadow:
    0 -10px 30px rgba(16,48,55,.09);

  padding-bottom:
    env(safe-area-inset-bottom);
}

.nav a{
  flex:1;

  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:3px;

  padding:
    8px
    2px
    7px;

  color:var(--muted);

  font-family:var(--f-cond);
  font-weight:600;

  font-size:.8rem;

  text-decoration:none;

  transition:
    color .16s ease,
    transform .15s ease;
}

.nav a svg{
  width:23px;
  height:23px;

  transition:
    transform .16s ease;
}

.nav a.on{
  color:var(--blue);
}

.nav a.on svg{
  transform:translateY(-1px);
}

.nav a:active{
  transform:scale(.95);
}

.nav a.scan{
  color:var(--label-ink);
}

.nav a.scan span.pill{
  background:var(--label);

  border-radius:999px;

  padding:
    5px
    15px;

  margin-top:-17px;

  box-shadow:
    0 3px 0 rgba(0,0,0,.13),
    0 6px 14px rgba(0,0,0,.09);
}

.nav a.scan.on{
  color:var(--label-ink);
}

.badge{
  background:var(--red);

  color:#fff;

  border-radius:999px;

  font-size:.7rem;

  padding:
    1px
    6px;

  margin-left:4px;

  font-family:var(--f-cond);
  font-weight:700;
}

.brand{
  display:none;

  font-family:var(--f-cond);
  font-weight:700;

  font-size:1.55rem;

  letter-spacing:-.025em;

  padding:
    5px
    14px
    30px;

  color:var(--ink);
}

.nav .spacer{
  display:none;
}


/* =========================================================
   NAVIGATION DESKTOP
   ========================================================= */

@media (min-width:900px){

  #app{
    flex-direction:row;
  }

  .nav{
    position:sticky;

    top:0;

    width:258px;

    height:100vh;
    min-height:100vh;

    flex-direction:column;

    padding:
      27px
      15px;

    gap:5px;

    flex:none;

    background:
      linear-gradient(
        180deg,
        #103b43 0%,
        #0d343c 100%
      );

    border:0;

    box-shadow:
      7px 0 28px rgba(10,40,47,.12);
  }

  .nav .brand{
    display:block;

    color:#fff;

    font-size:1.72rem;

    padding:
      7px
      15px
      34px;
  }

  .nav .brand::after{
    content:"";

    display:block;

    width:34px;

    height:3px;

    margin-top:8px;

    border-radius:99px;

    background:var(--label);
  }

  .nav a{
    position:relative;

    flex:none;

    flex-direction:row;

    justify-content:flex-start;

    gap:13px;

    min-height:49px;

    padding:
      11px
      14px;

    border-radius:10px;

    color:var(--nav-text);

    font-size:1rem;
  }

  .nav a svg{
    width:21px;
    height:21px;

    flex:none;
  }

  .nav a:hover{
    background:var(--nav-hover);

    color:#fff;

    transform:none;
  }

  .nav a.on{
    background:var(--nav-active);

    color:#164650;

    font-weight:700;

    box-shadow:
      0 4px 12px rgba(0,0,0,.08);
  }

  .nav a.on::before{
    content:"";

    position:absolute;

    left:0;

    top:9px;
    bottom:9px;

    width:4px;

    border-radius:0 5px 5px 0;

    background:var(--label);
  }

  .nav a.scan{
    margin:
      14px
      0
      17px;

    min-height:52px;

    background:var(--label);

    color:var(--label-ink);

    box-shadow:
      0 4px 0 rgba(0,0,0,.15),
      0 9px 20px rgba(0,0,0,.13);
  }

  .nav a.scan:hover{
    background:var(--label-hover);

    color:var(--label-ink);

    transform:translateY(-1px);

    box-shadow:
      0 5px 0 rgba(0,0,0,.15),
      0 11px 23px rgba(0,0,0,.15);
  }

  .nav a.scan span.pill{
    margin:0;

    padding:0;

    background:none;

    box-shadow:none;

    display:flex;

    gap:13px;

    align-items:center;
  }

  .nav .spacer{
    display:block;

    flex:1;

    margin-top:14px;
  }

  main{
    padding:
      34px
      40px
      50px;
  }
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.pagehead{
  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:16px;

  margin-bottom:25px;

  flex-wrap:wrap;
}

.pagehead h1{
  letter-spacing:-.03em;
}

.pagehead .muted{
  margin-top:5px;

  font-size:.98rem;
}


/* =========================================================
   BREADCRUMBS
   ========================================================= */

.crumbs{
  display:flex;

  flex-wrap:wrap;

  gap:
    2px
    0;

  margin-bottom:8px;

  font-size:.88rem;

  color:var(--muted);
}

.crumbs a,
.crumbs span{
  color:var(--muted);
}

.crumbs a:hover{
  color:var(--blue);
}

.crumbs .sep{
  padding:
    0
    7px;

  opacity:.45;
}

.crumbs .last{
  color:var(--ink);

  font-weight:600;
}


/* =========================================================
   LAYOUT / CARDS
   ========================================================= */

.card{
  background:var(--surface);

  border:
    1px solid
    var(--line);

  border-radius:var(--radius);

  padding:20px;

  box-shadow:var(--shadow-xs);

  transition:
    box-shadow .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.card:hover{
  box-shadow:var(--shadow-sm);

  border-color:
    color-mix(
      in srgb,
      var(--blue) 15%,
      var(--line)
    );
}

.stack{
  display:flex;

  flex-direction:column;

  gap:15px;
}

.row{
  display:flex;

  gap:10px;

  align-items:center;

  flex-wrap:wrap;
}

.between{
  justify-content:space-between;
}

.grow{
  flex:1;

  min-width:0;
}

.grid{
  display:grid;

  gap:15px;
}

.g2{
  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );
}

@media (min-width:700px){

  .g3{
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }

  .g4{
    grid-template-columns:
      repeat(
        4,
        minmax(0,1fr)
      );
  }

  .split{
    grid-template-columns:1fr 1fr;
  }
}


/* =========================================================
   BOUTONS
   ========================================================= */

.btn{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:8px;

  border:
    1px solid
    var(--line-strong);

  background:var(--surface);

  border-radius:var(--radius-s);

  padding:
    9px
    16px;

  min-height:43px;

  cursor:pointer;

  font-weight:600;

  text-decoration:none;

  color:var(--ink);

  box-shadow:
    0 1px 2px rgba(16,48,55,.045);

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    transform .1s ease;
}

.btn:hover{
  background:var(--surface-2);

  border-color:var(--line-strong);

  box-shadow:var(--shadow-sm);

  text-decoration:none;
}

.btn:active{
  transform:translateY(1px);

  box-shadow:none;
}

.btn.primary{
  background:var(--blue);

  border-color:var(--blue);

  color:var(--blue-ink);

  box-shadow:
    0 5px 13px
    color-mix(
      in srgb,
      var(--blue) 24%,
      transparent
    );
}

.btn.primary:hover{
  background:var(--blue-hover);

  border-color:var(--blue-hover);

  box-shadow:
    0 7px 16px
    color-mix(
      in srgb,
      var(--blue) 28%,
      transparent
    );
}

.btn.danger{
  color:var(--red);

  border-color:
    color-mix(
      in srgb,
      var(--red) 45%,
      var(--line)
    );

  background:var(--surface);
}

.btn.danger:hover{
  background:var(--red-soft);

  border-color:var(--red);
}

.btn.small{
  padding:
    5px
    11px;

  min-height:34px;

  font-size:.9rem;
}

.btn[disabled]{
  opacity:.5;

  pointer-events:none;
}

.btn svg{
  width:20px;
  height:20px;
}


/* =========================================================
   FORMULAIRES
   ========================================================= */

.field{
  display:flex;

  flex-direction:column;

  gap:7px;
}

.field label{
  font-weight:600;

  font-size:.9rem;

  color:var(--ink);
}

input[type=text],
input[type=search],
input[type=number],
input[type=date],
input[type=password],
input[type=url],
input[type=tel],
input[type=email],
select,
textarea{

  width:100%;

  border:
    1px solid
    var(--line-strong);

  background:var(--surface);

  border-radius:var(--radius-s);

  padding:
    10px
    13px;

  min-height:45px;

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}

input:hover,
select:hover,
textarea:hover{
  border-color:
    color-mix(
      in srgb,
      var(--blue) 35%,
      var(--line-strong)
    );
}

input:focus,
select:focus,
textarea:focus{

  border-color:var(--blue);

  box-shadow:
    0 0 0 3px
    var(--blue-soft);

  outline:none;
}

textarea{
  min-height:94px;

  resize:vertical;
}


/* =========================================================
   BARRE DE RECHERCHE
   ========================================================= */

.searchbar{
  display:flex;

  gap:10px;

  margin-bottom:21px;
}

.searchbar input{
  flex:1;

  height:53px;

  min-height:53px;

  padding:
    0
    18px;

  border:
    1px solid
    var(--line);

  border-radius:12px;

  background:var(--surface);

  font-size:1rem;

  box-shadow:
    0 1px 2px rgba(16,48,55,.025),
    0 6px 20px rgba(16,48,55,.035);
}

.searchbar input::placeholder{
  color:#87989d;
}

.searchbar input:focus{
  border-color:var(--blue);

  box-shadow:
    0 0 0 3px
    var(--blue-soft),

    0 7px 20px
    rgba(16,48,55,.055);
}

.searchbar .btn{
  width:58px;

  height:53px;

  min-height:53px;

  padding:0;

  border-radius:12px;

  background:var(--blue);

  border-color:var(--blue);

  color:#fff;

  box-shadow:
    0 5px 13px
    rgba(23,107,120,.23);
}


/* =========================================================
   CHIPS / TAGS
   ========================================================= */

.chip{
  display:inline-block;

  font-family:var(--f-cond);

  font-weight:700;

  letter-spacing:.035em;

  background:var(--label);

  color:var(--label-ink);

  border-radius:6px;

  padding:
    2px
    9px;

  font-size:.9rem;

  white-space:nowrap;
}

.tag{
  display:inline-flex;

  align-items:center;

  border:
    1px solid
    var(--line);

  border-radius:999px;

  padding:
    4px
    10px;

  font-size:.82rem;

  line-height:1.3;

  color:var(--muted);

  background:var(--surface-2);
}

.tag.low{
  color:var(--red);

  border-color:
    color-mix(
      in srgb,
      var(--red) 55%,
      var(--line)
    );

  background:var(--red-soft);
}

.tag.warn{
  color:var(--amber);

  border-color:
    color-mix(
      in srgb,
      var(--amber) 55%,
      var(--line)
    );

  background:var(--amber-bg);
}

.tag.off{
  background:var(--muted);

  color:var(--surface);

  border-color:var(--muted);
}


/* =========================================================
   LISTE D'ARTICLES
   ========================================================= */

.items{
  display:flex;

  flex-direction:column;

  gap:11px;

  padding:0;

  margin:0;

  list-style:none;
}

.item{
  display:flex;

  gap:15px;

  align-items:center;

  min-height:94px;

  background:var(--surface);

  border:
    1px solid
    var(--line);

  border-radius:13px;

  padding:
    14px
    16px;

  color:inherit;

  position:relative;

  box-shadow:var(--shadow-xs);

  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

.item:hover{
  border-color:
    color-mix(
      in srgb,
      var(--blue) 30%,
      var(--line)
    );

  background:var(--surface);

  box-shadow:var(--shadow-sm);

  text-decoration:none;

  transform:translateY(-2px);
}

.item.inactive{
  opacity:.55;
}

.thumb{
  width:68px;

  height:68px;

  border-radius:11px;

  background:
    linear-gradient(
      145deg,
      var(--surface-2),
      var(--surface-3)
    );

  flex:none;

  object-fit:cover;

  display:grid;

  place-items:center;

  color:var(--muted);

  border:
    1px solid
    var(--line);
}

.thumb svg{
  width:28px;
  height:28px;
}

.item .name{
  font-weight:600;

  font-size:1.09rem;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;
}

.item .qty{
  font-family:var(--f-cond);

  font-weight:700;

  font-size:1.5rem;

  text-align:right;

  min-width:50px;

  line-height:1;

  color:var(--blue);
}

.item .qty small{
  display:block;

  font-weight:600;

  font-size:.72rem;

  color:var(--muted);

  margin-top:4px;
}

.item .sel{
  width:22px;

  height:22px;

  flex:none;
}

.item.select-on{
  border-color:var(--blue);

  background:var(--blue-soft);

  box-shadow:
    0 0 0 2px
    color-mix(
      in srgb,
      var(--blue) 15%,
      transparent
    );
}


/* =========================================================
   DASHBOARD — STATS
   ========================================================= */

.grid.g4{
  gap:15px;
}

.stat{
  min-height:158px;

  padding:20px;

  position:relative;

  overflow:hidden;

  background:var(--surface);

  border:
    1px solid
    var(--line);

  border-radius:14px;

  box-shadow:
    0 1px 2px rgba(16,48,55,.025),
    0 7px 20px rgba(16,48,55,.038);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.stat::after{
  content:"";

  position:absolute;

  width:90px;
  height:90px;

  right:-38px;
  bottom:-42px;

  border-radius:50%;

  background:
    color-mix(
      in srgb,
      var(--blue) 6%,
      transparent
    );

  pointer-events:none;
}

.stat:hover{
  transform:translateY(-3px);

  box-shadow:var(--shadow-md);

  border-color:
    color-mix(
      in srgb,
      var(--blue) 25%,
      var(--line)
    );
}

.stat .n{
  font-family:var(--f-cond);

  font-weight:700;

  font-size:2.65rem;

  line-height:1;

  letter-spacing:-.045em;

  margin-top:20px;

  color:var(--ink);
}

.stat .l{
  color:var(--muted);

  font-size:.92rem;

  margin-top:6px;
}

.stat-ic{
  display:inline-flex;

  align-items:center;

  justify-content:center;

  width:43px;

  height:43px;

  border-radius:11px;

  margin-bottom:auto;
}

.stat-ic svg{
  width:21px;

  height:21px;
}

.stat.c-blue{
  border-top:
    3px solid
    var(--blue);
}

.stat.c-teal{
  border-top:
    3px solid
    var(--teal);
}

.stat.c-green{
  border-top:
    3px solid
    var(--green);
}

.stat.c-amber{
  border-top:
    3px solid
    var(--amber);
}

.stat.c-blue .stat-ic{
  background:var(--blue-soft);

  color:var(--blue);
}

.stat.c-teal .stat-ic{
  background:var(--teal-soft);

  color:var(--teal);
}

.stat.c-green .stat-ic{
  background:var(--green-soft);

  color:var(--green);
}

.stat.c-amber .stat-ic{
  background:var(--amber-bg);

  color:var(--amber);
}

.stat.c-amber{
  border-color:
    color-mix(
      in srgb,
      var(--amber) 45%,
      var(--line)
    );

  border-top-color:var(--amber);
}

.stat.warn .n{
  color:var(--red);
}


/* =========================================================
   BARRES DE STATISTIQUES
   ========================================================= */

.bars{
  display:flex;

  flex-direction:column;

  gap:14px;
}

.bar{
  display:grid;

  grid-template-columns:
    125px
    1fr
    30px;

  gap:10px;

  align-items:center;

  font-size:.92rem;
}

.bar .track{
  height:9px;

  background:var(--surface-3);

  border-radius:999px;

  overflow:hidden;
}

.bar .fill{
  height:100%;

  background:var(--blue);

  border-radius:999px;

  transition:
    width .3s ease;
}

.bar .lbl{
  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;
}


/* =========================================================
   ACCUEIL — SECTION REPLIABLE
   ========================================================= */

details.card{
  cursor:default;
}

details.card>summary{
  cursor:pointer;

  list-style:none;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;
}

details.card>summary::-webkit-details-marker{
  display:none;
}

details.card>summary::after{
  content:"";

  width:8px;
  height:8px;

  flex:none;

  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);

  transform:rotate(45deg);

  transition:transform .15s ease;
}

details.card[open]>summary{
  margin-bottom:16px;
}

details.card[open]>summary::after{
  transform:rotate(-135deg);
}

details.card>summary h2{
  display:inline;
}


/* =========================================================
   FICHE ARTICLE
   ========================================================= */

.hero{
  display:grid;

  gap:19px;

  min-width:0;
}

.hero h1{
  overflow-wrap:anywhere;
}

@media (min-width:700px){

  .hero{
    grid-template-columns:
      330px
      1fr;

    align-items:start;
  }
}

.photo{
  width:100%;

  aspect-ratio:4/3;

  border-radius:var(--radius);

  background:
    linear-gradient(
      145deg,
      var(--surface-2),
      var(--surface-3)
    );

  object-fit:cover;

  border:
    1px solid
    var(--line);

  display:grid;

  place-items:center;

  color:var(--muted);

  box-shadow:var(--shadow-xs);
}

.photo svg{
  width:50px;
  height:50px;
}

.photo.empty{
  aspect-ratio:16/6;
}

.kv{
  display:grid;

  grid-template-columns:auto 1fr;

  gap:
    9px
    19px;

  margin:0;
}

.kv dt{
  color:var(--muted);
}

.kv dd{
  margin:0;

  font-weight:600;

  overflow-wrap:anywhere;

  min-width:0;
}

.kv dd a{
  display:inline-flex;

  align-items:center;

  gap:6px;

  background:var(--blue-soft);

  color:var(--blue);

  padding:5px 12px 5px 10px;

  border-radius:999px;

  font-weight:600;

  transition:
    background .15s ease,
    box-shadow .15s ease;
}

.kv dd a:hover{
  background:
    color-mix(
      in srgb,
      var(--blue-soft) 65%,
      var(--blue) 14%
    );

  box-shadow:var(--shadow-xs);
}

.kv dd a svg{
  width:16px;
  height:16px;

  flex:none;
}

.qtybox{
  display:flex;

  align-items:center;

  gap:10px;
}

.qtybox .big{
  font-family:var(--f-cond);

  font-weight:700;

  font-size:2.7rem;

  min-width:78px;

  text-align:center;

  color:var(--blue);
}

.qtybox .btn{
  width:52px;

  height:52px;

  justify-content:center;

  font-size:1.5rem;

  padding:0;
}


/* =========================================================
   QR
   ========================================================= */

.qrbox{
  display:flex;

  gap:19px;

  align-items:center;

  flex-wrap:wrap;
}

.qrbox img{
  width:132px;

  height:132px;

  image-rendering:pixelated;

  background:#fff;

  border:
    1px solid
    var(--line);

  border-radius:var(--radius-s);

  box-shadow:var(--shadow-xs);
}


/* =========================================================
   HISTORIQUE
   ========================================================= */

.hist{
  list-style:none;

  margin:0;

  padding:0;

  display:flex;

  flex-direction:column;
}

.hist li{
  padding:
    11px
    0;

  border-bottom:
    1px solid
    var(--line);

  display:grid;

  grid-template-columns:
    82px
    1fr;

  gap:10px;

  font-size:.95rem;
}

.hist li:last-child{
  border:0;
}

.hist .when{
  color:var(--muted);

  font-family:var(--f-cond);

  font-weight:600;
}

.spark{
  width:100%;

  height:70px;
}


/* =========================================================
   SCANNER
   ========================================================= */

.scanwrap{
  position:relative;

  border-radius:var(--radius);

  overflow:hidden;

  background:#000;

  aspect-ratio:3/4;

  max-height:70vh;

  margin:0 auto;

  max-width:520px;

  box-shadow:var(--shadow-lg);
}

.scanwrap video{
  width:100%;

  height:100%;

  object-fit:cover;
}

.scanwrap .frame{
  position:absolute;

  inset:18% 14%;

  border:
    3px solid
    var(--label);

  border-radius:16px;

  box-shadow:
    0 0 0 999px rgba(0,0,0,.42),

    0 0 30px
    rgba(242,184,75,.3);
}


/* =========================================================
   TOAST
   ========================================================= */

.toast{
  position:fixed;

  left:50%;

  transform:translateX(-50%);

  bottom:88px;

  background:var(--ink);

  color:var(--surface);

  padding:
    12px
    19px;

  border-radius:11px;

  z-index:60;

  max-width:90vw;

  font-weight:600;

  box-shadow:var(--shadow-md);
}

.toast.err{
  background:var(--red);

  color:#fff;
}

@media (min-width:900px){

  .toast{
    bottom:24px;
  }
}


/* =========================================================
   DIALOG
   ========================================================= */

dialog{
  border:
    1px solid
    var(--line);

  border-radius:15px;

  background:var(--surface);

  color:var(--ink);

  padding:23px;

  max-width:min(540px,94vw);

  width:100%;

  box-shadow:var(--shadow-lg);
}

dialog::backdrop{
  background:rgba(7,27,32,.66);

  backdrop-filter:blur(4px);
}

dialog h2{
  margin-bottom:15px;
}


/* =========================================================
   ARBRE
   ========================================================= */

.tree-row{
  display:flex;

  align-items:center;

  gap:8px;

  padding:
    10px
    11px;

  border-bottom:
    1px solid
    var(--line);

  transition:
    background .15s ease,
    padding-left .15s ease;
}

.tree-row:hover{
  background:var(--surface-2);

  padding-left:14px;
}

.tree-row:last-child{
  border:0;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.empty{
  text-align:center;

  padding:
    52px
    16px;

  color:var(--muted);
}

.empty h3{
  color:var(--ink);

  margin-bottom:7px;
}


/* =========================================================
   LOGIN
   ========================================================= */

.loginbox{
  max-width:410px;

  margin:10vh auto 0;

  padding:
    0
    14px;
}

.loginbox .card{
  padding:26px;

  box-shadow:var(--shadow-md);

  border-radius:16px;
}


/* =========================================================
   AVERTISSEMENT
   ========================================================= */

.warnbox{
  border:
    1px solid
    color-mix(
      in srgb,
      var(--label) 70%,
      var(--line)
    );

  background:
    color-mix(
      in srgb,
      var(--label) 13%,
      var(--surface)
    );

  border-radius:var(--radius-s);

  padding:
    13px
    15px;
}


/* =========================================================
   CHECKBOX / LISTES
   ========================================================= */

.check{
  display:flex;

  align-items:center;

  gap:12px;

  padding:14px;

  background:var(--surface);

  border:
    1px solid
    var(--line);

  border-radius:var(--radius);

  cursor:pointer;

  transition:
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

.check:hover{
  border-color:
    color-mix(
      in srgb,
      var(--blue) 25%,
      var(--line)
    );

  background:var(--surface-2);

  box-shadow:var(--shadow-xs);

  transform:translateY(-1px);
}

.check input{
  width:26px;

  height:26px;

  flex:none;

  accent-color:var(--blue);
}

.check.done{
  opacity:.55;

  text-decoration:line-through;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.progress{
  height:9px;

  background:var(--surface-3);

  border-radius:999px;

  overflow:hidden;
}

.progress>div{
  height:100%;

  background:var(--green);

  border-radius:999px;

  transition:
    width .3s ease;
}


/* =========================================================
   GALERIE
   ========================================================= */

.gallery{
  display:flex;

  gap:10px;

  flex-wrap:wrap;

  max-width:100%;
}

.gph{
  position:relative;

  width:82px;

  height:82px;

  border-radius:10px;

  overflow:hidden;

  border:
    1px solid
    var(--line);

  background:var(--surface-2);

  flex:0 0 auto;

  box-shadow:var(--shadow-xs);
}

.gph.pending{
  border-style:dashed;

  border-color:var(--blue);
}

.gph.pending::after{
  content:"";

  position:absolute;

  bottom:4px;

  left:4px;

  width:8px;

  height:8px;

  border-radius:50%;

  background:var(--blue);
}

.gph img{
  width:100%;

  height:100%;

  object-fit:cover;

  cursor:zoom-in;

  display:block;

  transition:
    transform .2s ease;
}

.gph:hover img{
  transform:scale(1.05);
}

.gph .rm{
  position:absolute;

  top:4px;

  right:4px;

  width:23px;

  height:23px;

  border-radius:50%;

  border:0;

  background:rgba(10,25,30,.7);

  color:#fff;

  font-size:.8rem;

  cursor:pointer;

  line-height:1;

  backdrop-filter:blur(4px);
}

.gph.add{
  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:4px;

  color:var(--muted);

  cursor:pointer;

  font-size:.78rem;

  text-align:center;

  padding:4px;

  transition:
    border-color .15s ease,
    background .15s ease,
    color .15s ease,
    transform .15s ease;
}

.gph.add svg{
  width:20px;

  height:20px;
}

.gph.add span{
  font-size:.68rem;
}

.gph.add:hover{
  border-color:var(--blue);

  background:var(--blue-soft);

  color:var(--blue);

  transform:translateY(-1px);
}

.gph.empty{
  display:flex;

  align-items:center;

  justify-content:center;

  color:var(--muted);
}

.gph.empty svg{
  width:24px;

  height:24px;
}

@media (min-width:700px){

  .gph{
    width:96px;

    height:96px;
  }
}


/* =========================================================
   LIGHTBOX
   ========================================================= */

.lb{
  position:relative;

  padding:0;

  max-width:94vw;

  max-height:90vh;

  display:flex;

  align-items:center;

  justify-content:center;

  touch-action:pan-y;
}

.lb img{
  max-width:94vw;

  max-height:90vh;

  object-fit:contain;

  border-radius:var(--radius-s);

  display:block;

  user-select:none;

  -webkit-user-select:none;
}

dialog:has(.lb),
dialog.lb-dialog{
  padding:10px;

  background:transparent;

  border:0;

  box-shadow:none;

  width:auto;

  max-width:96vw;

  max-height:96vh;
}

.lb-close{
  position:absolute;

  top:-14px;

  right:-14px;

  width:36px;

  height:36px;

  border-radius:50%;

  border:0;

  background:var(--ink);

  color:var(--bg);

  font-size:1rem;

  cursor:pointer;

  display:grid;

  place-items:center;

  box-shadow:var(--shadow-md);

  z-index:2;
}

.lb-nav{
  position:absolute;

  top:50%;

  transform:translateY(-50%);

  width:46px;

  height:46px;

  border-radius:50%;

  border:0;

  background:rgba(7,27,32,.55);

  color:#fff;

  font-size:1.5rem;

  line-height:1;

  cursor:pointer;

  display:grid;

  place-items:center;

  z-index:2;

  backdrop-filter:blur(3px);

  transition:background .15s ease;
}

.lb-nav:hover{
  background:rgba(7,27,32,.78);
}

.lb-nav.prev{
  left:8px;
}

.lb-nav.next{
  right:8px;
}

.lb-count{
  position:absolute;

  bottom:10px;

  left:50%;

  transform:translateX(-50%);

  background:rgba(7,27,32,.6);

  color:#fff;

  padding:
    3px
    12px;

  border-radius:999px;

  font-size:.8rem;

  font-family:var(--f-cond);

  font-weight:600;

  z-index:2;
}

@media (max-width:699px){

  .lb-close{
    top:8px;

    right:8px;
  }
}


/* =========================================================
   DOCUMENTS
   ========================================================= */

.doclist{
  list-style:none;

  margin:0;

  padding:0;

  display:flex;

  flex-direction:column;

  gap:8px;
}

.doclist li{
  display:flex;

  align-items:center;

  gap:9px;

  min-width:0;
}

.doclist li svg{
  width:18px;

  height:18px;

  flex:none;

  color:var(--muted);
}

.doclist li a{
  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  flex:1;
}


/* =========================================================
   APPARENCE — PERSONNALISATION
   ========================================================= */

.swatch{
  width:32px;

  height:32px;

  border-radius:50%;

  border:2px solid transparent;

  cursor:pointer;

  padding:0;

  box-shadow:var(--shadow-xs);

  transition:transform .12s ease;
}

.swatch:hover{
  transform:scale(1.08);
}

.swatch.on{
  border-color:var(--ink);

  box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--line-strong);
}

.swatch-custom-wrap{
  position:relative;

  display:inline-block;

  width:32px;

  height:32px;
}

.swatch.custom{
  width:32px;

  height:32px;

  background:conic-gradient(from 180deg,#c64b3d,#f2b84b,#2d8962,#197e77,#176b78,#6a4c93,#8a3a4a,#c64b3d);
}

.swatch-custom-wrap input[type=color]{
  position:absolute;

  inset:0;

  opacity:0;

  cursor:pointer;

  width:32px;

  height:32px;

  min-height:0;

  padding:0;

  border:0;
}

.fontpacks{
  display:grid;

  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));

  gap:10px;
}

.fontcard{
  border:1px solid var(--line-strong);

  border-radius:var(--radius-s);

  padding:12px 14px;

  background:var(--surface);

  cursor:pointer;

  text-align:left;

  min-height:0;

  transition:border-color .15s ease,box-shadow .15s ease;
}

.fontcard:hover{
  border-color:var(--blue);
}

.fontcard.on{
  border-color:var(--blue);

  box-shadow:0 0 0 1px var(--blue);
}

.fontcard .fc-h{
  font-size:1.22rem;

  line-height:1.15;

  font-weight:700;

  margin-bottom:3px;

  color:var(--ink);
}

.fontcard .fc-b{
  font-size:.78rem;

  color:var(--muted);
}

:root[data-font="systeme"]{
  --f-body:
    -apple-system,
    "Segoe UI Variable Text",
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;

  --f-cond:
    -apple-system,
    "Segoe UI Variable Text",
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
}

:root[data-font="classique"]{
  --f-body:
    Georgia,
    "Iowan Old Style",
    "Times New Roman",
    serif;

  --f-cond:
    Georgia,
    "Iowan Old Style",
    "Times New Roman",
    serif;
}

:root[data-font="arrondie"]{
  --f-body:
    ui-rounded,
    "SF Pro Rounded",
    "Segoe UI",
    system-ui,
    sans-serif;

  --f-cond:
    ui-rounded,
    "SF Pro Rounded",
    "Segoe UI",
    system-ui,
    sans-serif;
}

.densitybar{
  display:flex;

  gap:8px;

  flex-wrap:wrap;
}

.densitybar .btn{
  flex:1;

  justify-content:center;

  min-width:120px;
}

.densitybar .btn.on{
  background:var(--blue-soft);

  border-color:var(--blue);

  color:var(--blue);
}

.radiusbar{
  display:flex;

  gap:8px;

  flex-wrap:wrap;
}

.radiusbar button{
  width:54px;

  height:44px;

  border:1px solid var(--line-strong);

  background:var(--surface);

  cursor:pointer;

  transition:border-color .15s ease,box-shadow .15s ease;
}

.radiusbar button.on{
  border-color:var(--blue);

  box-shadow:0 0 0 1px var(--blue);
}

:root[data-radius="sharp"]{
  --radius:6px;
  --radius-s:4px;
  --radius-xs:3px;
}

:root[data-radius="round"]{
  --radius:22px;
  --radius-s:16px;
  --radius-xs:10px;
}

:root[data-density=compact] .card{
  padding:12px;
}

:root[data-density=compact] .btn{
  padding:6px 12px;

  min-height:37px;
}

:root[data-density=compact] .stack{
  gap:9px;
}

:root[data-density=compact] .item{
  min-height:74px;

  padding:10px 12px;
}

:root[data-density=compact] main{
  padding-top:12px;
}

@media (min-width:900px){

  :root[data-density=compact] main{
    padding:16px 32px 40px;
  }
}


/* =========================================================
   RESPONSIVE HELPERS
   ========================================================= */

.m-only{
  display:inline;
}

.d-only{
  display:none;
}

@media (min-width:900px){

  .m-only{
    display:none;
  }

  .d-only{
    display:inline;
  }
}

@media (max-width:899px){

  .nav a.desk{
    display:none;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:699px){

  main{
    padding:
      18px
      12px
      96px;
  }

  h1{
    font-size:1.75rem;
  }

  h2{
    font-size:1.32rem;
  }

  .pagehead{
    margin-bottom:20px;
  }

  .card{
    padding:16px;
  }

  .grid.g4{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:10px;
  }

  .stat{
    min-height:130px;

    padding:15px;
  }

  .stat .n{
    font-size:2.1rem;

    margin-top:17px;
  }

  .stat .l{
    font-size:.86rem;
  }

  .stat-ic{
    width:38px;
    height:38px;
  }

  .item{
    min-height:84px;

    padding:
      11px
      12px;

    gap:11px;
  }

  .thumb{
    width:58px;
    height:58px;
  }

  .item .name{
    font-size:1rem;
  }

  .item .qty{
    font-size:1.32rem;

    min-width:40px;
  }

  .searchbar{
    margin-bottom:17px;
  }

  .searchbar input{
    height:49px;

    min-height:49px;

    padding-left:14px;
  }

  .searchbar .btn{
    width:52px;

    height:49px;

    min-height:49px;
  }

  .hero{
    gap:15px;
  }

  .qtybox .big{
    font-size:2.4rem;
  }
}


/* =========================================================
   PETITS ÉCRANS
   ========================================================= */

@media (max-width:420px){

  .g2{
    grid-template-columns:1fr;
  }

  .stat{
    min-height:120px;
  }

  .stat .n{
    font-size:1.92rem;
  }

  .item .sel{
    width:20px;
    height:20px;
  }

  .btn{
    padding-left:12px;
    padding-right:12px;
  }
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@media (prefers-reduced-motion:no-preference){

  .toast{
    animation:
      pop
      .18s
      ease-out;
  }

  @keyframes pop{

    from{
      opacity:0;

      transform:
        translate(
          -50%,
          8px
        );
    }

  }
}