/* Fakker ! · dashboard de gestion.
   Reproduit l'inspiration « Sales Analytics Dashboard (Dark mode) » (Site dev/Inspirations/).
   Sur PC, toutes les cotes sont en unités de l'image : 646 unités = toute la largeur de l'écran.
   Sur téléphone (< 900 px), la même unité vaut un peu plus de 2 px et la mise en page passe en colonne. */

html { container-type: inline-size; overflow-x: clip; }
body {
  --u: calc(100cqw / 646);
  --fond: #0a0a0a;
  --carte: #1b1b1b;
  --case: #262626;
  --trait: #2b2b2b;
  --texte: #f2f2f2;
  --gris: #9a9a9a;
  --gris-fonce: #5a5a5a;
  --orange: #fb5a3d;
  --violet: #8a86ff;
  --vert: #4cc38a;
  --doux: cubic-bezier(.2, .8, .2, 1);
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
*, *::before, *::after { box-sizing: border-box; }
h1, h3, h4, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

/* ===================== Lancement ===================== */
.lancement {
  position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 18px;
  background: var(--fond); transition: opacity .5s var(--doux), visibility .5s;
}
.lancement img { width: 112px; height: 112px; border-radius: 50%; animation: pop .9s var(--doux) both, halo 1.6s .6s ease-out infinite; }
.lancement p { color: var(--gris); font-size: 14px; letter-spacing: .08em; animation: monte .7s .35s var(--doux) both; }
.lancement.fini { opacity: 0; visibility: hidden; }
@keyframes pop { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes halo { 0% { box-shadow: 0 0 0 0 rgba(251,90,61,.45); } 100% { box-shadow: 0 0 0 28px rgba(251,90,61,0); } }
@keyframes monte { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes apparait { from { opacity: 0; } to { opacity: 1; } }

/* ===================== Code PIN ===================== */
.ecran-pin { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; animation: apparait .5s both; }
.pin-boite { width: min(360px, 100%); text-align: center; position: relative; }
.pin-logo { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 22px; animation: pop .7s var(--doux) both; }
.ecran-pin h1 { font-size: 22px; font-weight: 600; animation: monte .6s .1s var(--doux) both; }
.profils { display: flex; justify-content: center; gap: 28px; margin-top: 28px; }
.profils button { display: grid; justify-items: center; gap: 10px; font-weight: 500; color: #ddd; animation: monte .6s var(--doux) both; transition: transform .2s var(--doux); }
.profils button:nth-child(2) { animation-delay: .08s; }
.profils button:hover { transform: translateY(-4px); }
.profils .avatar { width: 84px; height: 84px; font-size: 26px; transition: box-shadow .2s; }
.profils button:hover .avatar { box-shadow: 0 0 0 3px var(--orange); }
/* Connexion e-mail + mot de passe (1er lancement) */
.connexion { display: grid; gap: 14px; margin-top: 4px; text-align: left; animation: monte .6s var(--doux) both; }
.connexion h1 { text-align: center; }
.connexion .pin-aide { text-align: center; margin: 0 0 6px; }
.connexion label { display: grid; gap: 6px; font-size: 13px; color: var(--gris); }
.connexion input { height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid transparent; background: var(--carte); color: var(--texte); font: 500 16px "Inter", sans-serif; outline: none; transition: border-color .2s; }
.connexion input:focus { border-color: var(--orange); }
.connexion .btn-orange { height: 50px; font-size: 16px; margin-top: 4px; }
.connexion .lien-gris, .pin-liens .lien-gris { font-size: 13px; margin: 0; justify-self: center; }
.connexion.secoue { animation: secoue .45s; }
.pin-liens { display: flex; justify-content: center; gap: 22px; margin-top: 26px; }
.pin-retour { position: absolute; left: 0; top: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--carte); }
.pin-retour svg { width: 18px; height: 18px; }
.pin-avatar .avatar { width: 72px; height: 72px; font-size: 22px; margin: 0 auto 14px; animation: pop .5s var(--doux) both; }
.pin-aide { margin-top: 8px; color: var(--gris); font-size: 14px; min-height: 20px; }
.pin-aide.erreur { color: var(--orange); }
.pin-points { display: flex; justify-content: center; gap: 16px; margin: 26px 0 30px; }
.pin-points i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #555; transition: background .15s, border-color .15s, transform .15s var(--doux); }
.pin-points i.plein { background: var(--orange); border-color: var(--orange); transform: scale(1.15); }
.pin-points.secoue { animation: secoue .45s; }
.pin-points.ok i { background: var(--vert); border-color: var(--vert); }
@keyframes secoue { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.pave { display: grid; grid-template-columns: repeat(3, 76px); justify-content: center; gap: 14px 22px; }
.pave button { width: 76px; height: 76px; border-radius: 50%; background: var(--carte); font-size: 26px; font-weight: 500; display: grid; place-items: center; transition: background .15s, transform .1s; }
.pave button:active { background: #333; transform: scale(.94); }
.pave button[data-effacer] { background: none; }
.pave svg { width: 26px; height: 26px; }

/* ===================== Grille de l'app (PC) ===================== */
.app {
  display: grid;
  grid-template-columns: calc(14*var(--u)) calc(107*var(--u)) calc(14*var(--u)) calc(179*var(--u)) calc(13*var(--u)) calc(305*var(--u)) calc(14*var(--u));
  grid-template-rows: calc(14*var(--u)) calc(23.3*var(--u)) calc(10.7*var(--u)) 1fr calc(14*var(--u));
  height: 100vh; height: 100dvh; min-height: calc(451*var(--u));
}
.carte { background: var(--carte); border-radius: calc(8*var(--u)); }
.app.entre .menu { animation: glisse .7s var(--doux) both; }
.app.entre .haut { animation: monte .6s .1s var(--doux) both; }
@keyframes glisse { from { transform: translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Menu de gauche ---------- */
.menu { grid-column: 2; grid-row: 2 / 5; background: var(--carte); border-radius: calc(8*var(--u)); position: relative; }
.marque { display: flex; align-items: center; gap: calc(5*var(--u)); font-weight: 600; font-size: calc(8.2*var(--u)); letter-spacing: -.01em; }
.menu .marque { position: absolute; left: calc(10.3*var(--u)); top: calc(7.3*var(--u)); }
.marque img { width: calc(14*var(--u)); height: calc(14*var(--u)); border-radius: 50%; }
.marque-mobile { display: none; }
.liens { position: absolute; left: calc(7*var(--u)); right: calc(7.5*var(--u)); top: calc(33*var(--u)); display: grid; gap: calc(6*var(--u)); }
.liens.bas { top: auto; bottom: calc(5.5*var(--u)); }
.liens a {
  position: relative; z-index: 1; display: flex; align-items: center; gap: calc(5*var(--u));
  height: calc(21.7*var(--u)); padding-left: calc(6*var(--u)); border-radius: calc(5*var(--u));
  font-size: calc(7.6*var(--u)); font-weight: 500; color: #e6e6e6; transition: color .25s;
}
.liens a:hover { color: #fff; }
.liens svg { width: calc(11*var(--u)); height: calc(11*var(--u)); transition: transform .25s var(--doux); }
.liens a:hover svg { transform: scale(1.1); }
.liens a.actif { color: var(--orange); }
.liens a.actif svg { fill: var(--orange); stroke: var(--orange); }
/* Le fond de l'onglet actif glisse d'un onglet à l'autre */
.indicateur {
  position: absolute; left: 0; right: 0; top: 0; height: calc(21.7*var(--u));
  background: #262626; border-radius: calc(5*var(--u)); transition: transform .45s var(--doux);
}
.pastille-nb { margin-left: auto; margin-right: calc(5*var(--u)); min-width: calc(9*var(--u)); height: calc(9*var(--u)); padding: 0 calc(2.5*var(--u)); border-radius: 999px; background: var(--orange); color: #fff; font-size: calc(5*var(--u)); display: grid; place-items: center; animation: pop .5s var(--doux) both; }

/* ---------- Barre du haut ---------- */
.haut { grid-column: 4 / 7; grid-row: 2; display: flex; align-items: center; gap: calc(6*var(--u)); }
.recherche {
  width: calc(242*var(--u)); height: 100%; margin-right: auto;
  display: flex; align-items: center; gap: calc(4*var(--u)); padding-left: calc(8*var(--u));
  background: var(--carte); border-radius: 999px; transition: box-shadow .2s;
}
.recherche:focus-within { box-shadow: 0 0 0 1px #3a3a3a; }
.recherche svg { width: calc(9*var(--u)); height: calc(9*var(--u)); color: #e6e6e6; flex: none; }
.recherche input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--texte); font: 500 calc(6.6*var(--u)) "Inter", sans-serif; }
.recherche input::placeholder { color: #d0d0d0; }
.date {
  height: 100%; width: calc(102*var(--u)); display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(3*var(--u)) 0 calc(6*var(--u)); background: var(--carte); border-radius: 999px;
  font-size: calc(6.4*var(--u)); font-weight: 500; color: #e6e6e6;
}
.rond { width: calc(23.3*var(--u)); height: calc(23.3*var(--u)); flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--carte); color: #e6e6e6; position: relative; }
.date .rond { width: calc(17.5*var(--u)); height: calc(17.5*var(--u)); background: #2a2a2a; }
.rond svg { width: calc(9.5*var(--u)); height: calc(9.5*var(--u)); }
.cloche i { position: absolute; top: calc(5.5*var(--u)); right: calc(6*var(--u)); width: calc(4*var(--u)); height: calc(4*var(--u)); border-radius: 50%; background: var(--orange); animation: pop .4s var(--doux) both; }
.cloche.sonne svg { animation: sonne .8s; transform-origin: 50% 10%; }
@keyframes sonne { 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }
.avatar {
  width: calc(24*var(--u)); height: calc(24*var(--u)); flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: #3a2a24; color: var(--orange); font-weight: 700; font-size: calc(7.5*var(--u));
  background-size: cover; background-position: center; transition: box-shadow .2s;
}
button.avatar:hover { box-shadow: 0 0 0 2px var(--orange); }

/* ---------- Zone des vues ---------- */
.vues { grid-column: 4 / 7; grid-row: 4; position: relative; min-height: 0; }
.vue { height: 100%; }
.vue.entre > * { animation: monte .55s var(--doux) both; }
.vue.entre > *:nth-child(2) { animation-delay: .06s; }
.vue.entre > *:nth-child(3) { animation-delay: .12s; }
.vue.entre > *:nth-child(4) { animation-delay: .18s; }
.vue.entre > *:nth-child(5) { animation-delay: .24s; }

/* ---------- Vue Chiffres : la grille de l'inspiration ---------- */
.vue-chiffres {
  display: grid; grid-template-columns: calc(179*var(--u)) calc(13*var(--u)) calc(305*var(--u));
  grid-template-rows: calc(72.3*var(--u)) calc(11.7*var(--u)) calc(167*var(--u)) calc(13*var(--u)) calc(125*var(--u));
  height: auto;
}
.kpis { grid-column: 1 / 4; grid-row: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(13*var(--u)); }
.kpi { position: relative; transition: transform .25s var(--doux), background .25s; }
.kpi:hover { transform: translateY(-3px); background: #1f1f1f; }
.vue.entre .kpi { animation: monte .6s var(--doux) both; }
.vue.entre .kpi:nth-child(2) { animation-delay: .07s; } .vue.entre .kpi:nth-child(3) { animation-delay: .14s; } .vue.entre .kpi:nth-child(4) { animation-delay: .21s; }
.kpi h3 { position: absolute; left: calc(7.7*var(--u)); top: calc(10*var(--u)); font-size: calc(6.6*var(--u)); font-weight: 500; color: #e6e6e6; }
.badge {
  position: absolute; right: calc(9*var(--u)); top: calc(8.5*var(--u)); height: calc(9*var(--u)); padding: 0 calc(3.5*var(--u));
  display: flex; align-items: center; gap: calc(2*var(--u)); border-radius: calc(2.5*var(--u)); font-size: calc(4.8*var(--u)); font-weight: 500;
}
.badge::before { content: ""; width: calc(6*var(--u)); height: calc(4*var(--u)); background: currentColor; -webkit-mask: var(--fleche) center / contain no-repeat; mask: var(--fleche) center / contain no-repeat; }
.badge.hausse { color: var(--violet); background: #26253a; --fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 7l3.5-3.5 2 2L11 1M8 1h3v3' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); }
.badge.baisse { color: var(--orange); background: #3a2420; --fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l3.5 3.5 2-2L11 7M8 7h3V4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); }
.badge.neutre { color: var(--gris); background: #262626; }
.badge.neutre::before { display: none; }
.valeur { position: absolute; left: calc(7.7*var(--u)); top: calc(25*var(--u)); font-size: calc(14.4*var(--u)); font-weight: 500; letter-spacing: -.01em; line-height: 1.1; white-space: nowrap; }
.valeur em { font-style: normal; color: var(--orange); font-size: .7em; }
.periode { position: absolute; left: calc(7.7*var(--u)); bottom: calc(9*var(--u)); font-size: calc(5.2*var(--u)); color: var(--gris-fonce); }

.carte-tete { display: flex; align-items: center; justify-content: space-between; gap: calc(6*var(--u)); min-height: calc(28.6*var(--u)); padding: 0 calc(9.7*var(--u)); }
.carte-tete h3 { font-size: calc(6.8*var(--u)); font-weight: 600; color: #ececec; }
.carte-tete a, .carte-tete .sous { font-size: calc(6*var(--u)); color: var(--gris-fonce); transition: color .2s; }
.carte-tete a:hover { color: var(--texte); }

.heures { grid-column: 1; grid-row: 3; }
.legende-heures { display: flex; gap: calc(5*var(--u)); font-size: calc(4.4*var(--u)); color: var(--gris); }
.legende-heures li, .legende-courbe li { display: flex; align-items: center; gap: calc(2*var(--u)); }
.legende-heures i { width: calc(4*var(--u)); height: calc(4*var(--u)); border-radius: 50%; }
.legende-heures .n1 { background: #4a2420; } .legende-heures .n2 { background: #7a3127; }
.legende-heures .n3 { background: #d24a33; } .legende-heures .n4 { background: var(--orange); }
.grille-heures {
  display: grid; grid-template-columns: calc(19.6*var(--u)) repeat(7, calc(17.3*var(--u)));
  grid-auto-rows: calc(15*var(--u)); column-gap: calc(2.2*var(--u)); row-gap: calc(1.7*var(--u));
  padding-left: calc(9.7*var(--u)); margin-top: calc(-0.3*var(--u)); font-size: calc(5*var(--u)); color: #d6d6d6;
}
.grille-heures .h { display: flex; align-items: center; }
.grille-heures .j { display: flex; align-items: center; justify-content: center; height: calc(12*var(--u)); color: #cfcfcf; }
.case { border-radius: calc(2.5*var(--u)); background: #2a2a2a; transition: transform .2s var(--doux); }
.case:hover { transform: scale(1.12); }
.case.n1 { background: repeating-linear-gradient(135deg, #3f201c 0 calc(.8*var(--u)), #552620 calc(.8*var(--u)) calc(1.6*var(--u))); }
.case.n2 { background: repeating-linear-gradient(135deg, #6a2b22 0 calc(.8*var(--u)), #84342a calc(.8*var(--u)) calc(1.6*var(--u))); }
.case.n3 { background: #d6492f; }
.case.n4 { background: #ff5f3e; }
.vue.entre .case { animation: pop-case .45s var(--doux) both; animation-delay: calc(var(--i) * 12ms + .15s); }
@keyframes pop-case { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }

.courbe { grid-column: 3; grid-row: 3; }
.legende-courbe { display: flex; gap: calc(6*var(--u)); font-size: calc(4.4*var(--u)); color: var(--gris); }
.legende-courbe i { width: calc(7*var(--u)); height: calc(1*var(--u)); }
.legende-courbe .ventes { background: var(--orange); }
.legende-courbe .objectif { background: var(--violet); }
.trace { position: relative; width: 100%; aspect-ratio: 305 / 138; }
.trace svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; stroke-width: initial; }
.trace text { fill: #cfcfcf; stroke: none; font-family: "Inter", sans-serif; font-weight: 500; }
.trace .zone { fill: transparent; stroke: none; cursor: pointer; }
.vue.entre .trace .ligne { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace 1.4s .25s var(--doux) forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.trace .repere { transition: transform .35s var(--doux); }
.bulle {
  position: absolute; transform: translate(10%, -50%); width: calc(68*var(--u)); padding: calc(4*var(--u)) calc(6*var(--u));
  background: #222; border-radius: calc(3*var(--u)); font-size: calc(4.2*var(--u)); color: #d0d0d0;
  transition: left .35s var(--doux), top .35s var(--doux); pointer-events: none;
}
.bulle.gauche { transform: translate(-110%, -50%); }
.bulle p { display: flex; align-items: center; gap: calc(2.5*var(--u)); margin-top: calc(4*var(--u)); }
.bulle p:first-child { margin-top: 0; }
.bulle b { margin-left: auto; font-size: calc(5.6*var(--u)); font-weight: 600; color: #f2f2f2; }
.bulle i { width: calc(3*var(--u)); height: calc(3*var(--u)); border-radius: 50%; }

.gouvernorats { grid-column: 1; grid-row: 5; }
.tuiles { display: grid; grid-template-columns: repeat(3, calc(49*var(--u))); column-gap: calc(5.3*var(--u)); row-gap: calc(6.3*var(--u)); padding-left: calc(10*var(--u)); margin-top: calc(-0.6*var(--u)); }
.tuile { height: calc(43.3*var(--u)); background: var(--case); border-radius: calc(3.5*var(--u)); padding: calc(5.5*var(--u)) calc(4.3*var(--u)) 0; transition: transform .25s var(--doux), background .25s; }
.tuile:hover { transform: translateY(-2px); background: #2c2c2c; }
.tuile .pastille { width: calc(11.5*var(--u)); height: calc(8*var(--u)); border-radius: calc(1.2*var(--u)); background: var(--orange); color: #fff; display: grid; place-items: center; font-size: calc(4*var(--u)); font-weight: 700; }
.tuile .nom { margin-top: calc(3.5*var(--u)); font-size: calc(5.2*var(--u)); color: #e0e0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tuile .chiffre { margin-top: calc(3*var(--u)); font-size: calc(6.6*var(--u)); font-weight: 600; }
.tuile .chiffre small { font-size: calc(3.8*var(--u)); font-weight: 500; color: #cfcfcf; margin-left: calc(1.5*var(--u)); }
.tuile.vide { display: grid; place-items: center; color: var(--gris-fonce); font-size: calc(5*var(--u)); padding: 0; }

.packs { grid-column: 3; grid-row: 5; }
.packs .defile { padding: 0 calc(10*var(--u)); margin-top: calc(-0.3*var(--u)); }
.tableau { width: 100%; border-collapse: collapse; font-size: calc(5.6*var(--u)); }
.tableau th { height: calc(14.7*var(--u)); background: #282828; color: #b8b8b8; font-size: calc(4.6*var(--u)); font-weight: 500; text-transform: uppercase; text-align: center; padding: 0 calc(3*var(--u)); white-space: nowrap; }
.tableau th:first-child { text-align: left; padding-left: calc(5.3*var(--u)); border-radius: calc(3*var(--u)) 0 0 calc(3*var(--u)); }
.tableau th:last-child { border-radius: 0 calc(3*var(--u)) calc(3*var(--u)) 0; }
.tableau td { height: calc(21*var(--u)); text-align: center; color: #e8e8e8; border-bottom: 1px solid var(--trait); padding: 0 calc(3*var(--u)); white-space: nowrap; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau td:first-child { text-align: left; padding-left: calc(3*var(--u)); font-weight: 500; }
.packs .tableau th:first-child { width: calc(78*var(--u)); }
.evo { display: inline-flex; align-items: center; gap: calc(2*var(--u)); }
.evo.hausse { color: var(--violet); } .evo.baisse { color: var(--orange); }

/* ---------- Pages (Commandes, Stock, Argent, Publicité, Clients, Livraison, Réglages) ---------- */
.vue-page { display: flex; flex-direction: column; gap: calc(13*var(--u)); }
.panneau { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.panneau .liste { flex: 1; overflow: auto; padding: 0 calc(10*var(--u)) calc(10*var(--u)); }
.deux { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: calc(13*var(--u)); }
.deux .panneau { overflow: auto; }
.tuiles-stat { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(13*var(--u)); flex: none; }
.stat { background: var(--carte); border-radius: calc(8*var(--u)); padding: calc(9*var(--u)) calc(8*var(--u)); transition: transform .25s var(--doux); }
.stat:hover { transform: translateY(-3px); }
.stat h4 { font-size: calc(6*var(--u)); font-weight: 500; color: #cfcfcf; }
.stat p { margin-top: calc(6*var(--u)); font-size: calc(13*var(--u)); font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.stat p em { font-style: normal; color: var(--orange); font-size: .65em; }
.stat small { display: block; margin-top: calc(4*var(--u)); font-size: calc(4.8*var(--u)); color: var(--gris-fonce); }
.stat.alerte p { color: var(--orange); }
.aide { padding: 0 calc(10*var(--u)) calc(6*var(--u)); color: var(--gris); font-size: calc(5.4*var(--u)); }
.boutons { display: flex; gap: calc(4*var(--u)); }

.filtres { display: flex; gap: calc(3.5*var(--u)); padding: 0 calc(10*var(--u)) calc(7*var(--u)); overflow-x: auto; scrollbar-width: none; flex: none; }
.filtres::-webkit-scrollbar { display: none; }
.filtres button { flex: none; height: calc(13*var(--u)); padding: 0 calc(6*var(--u)); border-radius: 999px; background: var(--case); color: #cfcfcf; font-size: calc(5.2*var(--u)); font-weight: 500; transition: background .2s, color .2s; }
.filtres button b { margin-left: calc(2.5*var(--u)); color: var(--gris); font-weight: 500; }
.filtres button.actif { background: var(--orange); color: #fff; }
.filtres button.actif b { color: #ffd9d0; }

.ligne-cmd { display: grid; grid-template-columns: calc(26*var(--u)) 1.4fr 1fr 1fr calc(44*var(--u)) calc(52*var(--u)) calc(40*var(--u)); align-items: center; gap: calc(5*var(--u)); width: 100%; min-height: calc(24*var(--u)); padding: 0 calc(4*var(--u)); border-bottom: 1px solid var(--trait); font-size: calc(5.6*var(--u)); text-align: left; border-radius: calc(3*var(--u)); transition: background .2s; }
.ligne-cmd:hover { background: #222; }
.ligne-cmd .n { color: var(--gris); }
.ligne-cmd .nom { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-cmd .depuis { color: var(--gris-fonce); text-align: right; white-space: nowrap; }
.ligne-cmd .total { font-weight: 600; text-align: right; }
.vue.entre .ligne-cmd, .vue.entre .ligne-simple { animation: monte .45s var(--doux) both; animation-delay: calc(var(--i, 0) * 30ms + .1s); }
.statut { display: inline-flex; align-items: center; justify-content: center; height: calc(10*var(--u)); padding: 0 calc(4*var(--u)); border-radius: 999px; font-size: calc(4.6*var(--u)); font-weight: 600; white-space: nowrap; }
.s-nouvelle { background: #3a2420; color: var(--orange); }
.s-confirmee { background: #26253a; color: var(--violet); }
.s-expediee { background: #1f2c3a; color: #6fb3ff; }
.s-livree { background: #1d3328; color: var(--vert); }
.s-payee { background: var(--vert); color: #0b1f15; }
.s-retour, .s-annulee { background: #2a2a2a; color: var(--gris); }

.ligne-simple { display: flex; align-items: center; gap: calc(6*var(--u)); min-height: calc(24*var(--u)); padding: calc(4*var(--u)) calc(4*var(--u)); border-bottom: 1px solid var(--trait); font-size: calc(5.6*var(--u)); }
.ligne-simple .principal { flex: 1; min-width: 0; }
.ligne-simple .principal b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-simple .principal small { color: var(--gris); font-size: calc(4.8*var(--u)); }
.ligne-simple .montant { font-weight: 600; white-space: nowrap; }
.ligne-simple .suppr { width: calc(14*var(--u)); height: calc(14*var(--u)); display: grid; place-items: center; border-radius: 50%; color: var(--gris-fonce); transition: background .2s, color .2s; }
.ligne-simple .suppr:hover { background: #2a2a2a; color: var(--orange); }
.ligne-simple .suppr svg { width: 55%; height: 55%; }
.ligne-simple input[type=checkbox] { width: calc(8*var(--u)); height: calc(8*var(--u)); accent-color: var(--orange); }
.vide-liste { padding: calc(30*var(--u)) 0; text-align: center; color: var(--gris-fonce); font-size: calc(6*var(--u)); }

.partage-ligne { display: flex; align-items: center; gap: calc(6*var(--u)); padding: calc(6*var(--u)) calc(10*var(--u)); border-bottom: 1px solid var(--trait); font-size: calc(5.8*var(--u)); }
.partage-ligne .avatar { width: calc(18*var(--u)); height: calc(18*var(--u)); font-size: calc(5.5*var(--u)); }
.partage-ligne div { flex: 1; }
.partage-ligne small { display: block; color: var(--gris); font-size: calc(4.8*var(--u)); margin-top: calc(1.5*var(--u)); }
.partage-ligne b { font-size: calc(8*var(--u)); font-weight: 600; }
.solde { margin: calc(8*var(--u)) calc(10*var(--u)); padding: calc(7*var(--u)); border-radius: calc(4*var(--u)); background: var(--case); font-size: calc(5.8*var(--u)); color: #ddd; }
.solde b { color: var(--orange); }

/* Boutons et formulaires */
.btn-orange, .btn-gris { display: inline-flex; align-items: center; justify-content: center; gap: calc(2.5*var(--u)); height: calc(15*var(--u)); padding: 0 calc(7*var(--u)); border-radius: 999px; font-size: calc(5.6*var(--u)); font-weight: 600; transition: transform .15s, background .2s, opacity .2s; cursor: pointer; white-space: nowrap; }
.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover { background: #ff6f55; }
.btn-gris { background: var(--case); color: #e6e6e6; }
.btn-gris:hover { background: #303030; }
.btn-orange:active, .btn-gris:active { transform: scale(.96); }
.btn-orange svg, .btn-gris svg { width: calc(8*var(--u)); height: calc(8*var(--u)); stroke-width: 2.2; }
.btn-orange:disabled { opacity: .5; }
.lien-gris { color: var(--gris); font-size: calc(5*var(--u)); margin-left: calc(4*var(--u)); }
.formulaire { display: grid; gap: calc(6*var(--u)); padding: 0 calc(10*var(--u)) calc(10*var(--u)); }
.formulaire h4 { font-size: calc(6.2*var(--u)); font-weight: 600; margin-top: calc(6*var(--u)); }
.formulaire label { display: grid; gap: calc(2.5*var(--u)); font-size: calc(5.2*var(--u)); color: var(--gris); }
.formulaire input, .formulaire select, .formulaire textarea {
  width: 100%; height: calc(17*var(--u)); padding: 0 calc(5*var(--u)); border-radius: calc(4*var(--u));
  background: var(--case); border: 1px solid transparent; color: var(--texte); font: 500 calc(6*var(--u)) "Inter", sans-serif; outline: none; transition: border-color .2s;
}
.formulaire textarea { height: calc(34*var(--u)); padding-top: calc(4*var(--u)); resize: vertical; }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { border-color: var(--orange); }
.formulaire .btn-orange, .formulaire .btn-gris { justify-self: start; }
.photo-ligne { display: flex; align-items: center; gap: calc(8*var(--u)); }
.avatar.grand { width: calc(36*var(--u)); height: calc(36*var(--u)); font-size: calc(11*var(--u)); }
.sortir-mobile { display: none; }

/* ---------- Tiroir (fiche commande, ajout) ---------- */
.tiroir { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.55); animation: apparait .25s both; }
.tiroir-boite {
  position: absolute; top: calc(14*var(--u)); right: calc(14*var(--u)); bottom: calc(14*var(--u)); width: calc(220*var(--u));
  background: var(--carte); border-radius: calc(8*var(--u)); overflow: auto; padding: calc(10*var(--u)) 0;
  animation: tiroir-pc .4s var(--doux) both;
}
.tiroir.ferme { animation: disparait .25s both; }
.tiroir.ferme .tiroir-boite { animation: tiroir-pc-sort .25s both; }
@keyframes tiroir-pc { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tiroir-pc-sort { to { transform: translateX(40px); opacity: 0; } }
@keyframes disparait { to { opacity: 0; } }
.fermer { position: absolute; top: calc(8*var(--u)); right: calc(8*var(--u)); width: calc(16*var(--u)); height: calc(16*var(--u)); border-radius: 50%; display: grid; place-items: center; background: var(--case); }
.fermer svg { width: 55%; height: 55%; }
.fiche-tete { padding: 0 calc(10*var(--u)); }
.fiche-tete small { color: var(--gris); font-size: calc(5*var(--u)); }
.fiche-tete h2 { margin: calc(2*var(--u)) 0 calc(4*var(--u)); font-size: calc(11*var(--u)); font-weight: 600; letter-spacing: -.01em; }
.fiche-actions { display: flex; gap: calc(4*var(--u)); padding: calc(6*var(--u)) calc(10*var(--u)); }
.fiche-actions a { flex: 1; }
.fiche-bloc { margin: calc(4*var(--u)) calc(10*var(--u)); padding: calc(6*var(--u)); border-radius: calc(4*var(--u)); background: var(--case); font-size: calc(5.6*var(--u)); }
.fiche-bloc h4 { font-size: calc(4.8*var(--u)); color: var(--gris); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; margin-bottom: calc(4*var(--u)); }
.fiche-bloc p { display: flex; justify-content: space-between; gap: calc(6*var(--u)); padding: calc(1.5*var(--u)) 0; }
.fiche-bloc p span { color: var(--gris); }
.etapes { display: flex; flex-wrap: wrap; gap: calc(3*var(--u)); }
.etapes button { height: calc(13*var(--u)); padding: 0 calc(5*var(--u)); border-radius: 999px; background: #303030; font-size: calc(5*var(--u)); font-weight: 600; transition: background .2s, transform .15s; }
.etapes button:hover { background: #3a3a3a; }
.etapes button.actuel { background: var(--orange); color: #fff; }
.histo { font-size: calc(4.8*var(--u)); color: var(--gris); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(18*var(--u)); z-index: 60; transform: translateX(-50%);
  padding: 12px 18px; border-radius: 999px; background: #2a2a2a; color: #fff; font-size: 14px; font-weight: 500;
  box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: toast .35s var(--doux) both;
}
.toast.orange { background: var(--orange); }
@keyframes toast { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

.onglets, .feuille { display: none; }

/* ===================== Téléphone ===================== */
@media (max-width: 899px) {
  body { --u: min(2.3px, calc(100cqw / 172)); }
  .app { display: block; height: auto; min-height: 100dvh; padding: 14px 14px calc(92px + env(safe-area-inset-bottom)); }
  .menu, .date { display: none; }
  .haut { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; }
  .marque-mobile { display: flex; font-size: 19px; gap: 10px; }
  .marque-mobile img { width: 36px; height: 36px; }
  .haut .rond, .haut .avatar { width: 44px; height: 44px; font-size: 15px; }
  .haut .rond svg { width: 20px; height: 20px; }
  .cloche i { top: 11px; right: 12px; width: 8px; height: 8px; }
  .recherche { order: 5; grid-column: 1 / -1; width: 100%; height: 48px; margin: 4px 0 0; padding-left: 16px; gap: 10px; }
  .recherche svg { width: 18px; height: 18px; }
  .recherche input { font-size: 15px; }
  .vues { margin-top: 14px; }
  .vue { height: auto; }

  .vue-chiffres { display: flex; flex-direction: column; gap: 12px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kpi { height: calc(66*var(--u)); }
  /* Sur téléphone, le badge passe sous le chiffre et la période se cache (c'est le mois en cours) */
  .kpi h3 { font-size: calc(6.2*var(--u)); right: calc(6*var(--u)); top: calc(9*var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .badge { right: auto; left: calc(7.7*var(--u)); top: auto; bottom: calc(8*var(--u)); font-size: calc(4.8*var(--u)); }
  .valeur { top: calc(23*var(--u)); font-size: calc(13.6*var(--u)); }
  .periode { display: none; }
  .trace text { font-size: 8.5px; }
  .heures, .courbe, .gouvernorats, .packs { padding-bottom: calc(8*var(--u)); }
  .courbe { order: 2; } .heures { order: 3; } .gouvernorats { order: 4; } .packs { order: 5; }
  .grille-heures { grid-template-columns: calc(19.6*var(--u)) repeat(7, 1fr); padding-right: calc(10*var(--u)); grid-auto-rows: calc(16*var(--u)); }
  .tuiles { grid-template-columns: repeat(3, 1fr); padding-right: calc(10*var(--u)); }
  .packs .defile { overflow-x: auto; }
  .bulle { width: calc(66*var(--u)); }

  .vue-page { gap: 12px; }
  .tuiles-stat { grid-template-columns: 1fr 1fr; gap: 12px; }
  .deux { grid-template-columns: 1fr; gap: 12px; }
  .panneau, .deux .panneau { overflow: visible; }
  .panneau .liste { overflow: visible; }
  .ligne-cmd { grid-template-columns: 1fr auto; grid-template-areas: "nom total" "info statut"; row-gap: calc(2*var(--u)); padding: calc(5*var(--u)) calc(3*var(--u)); }
  .ligne-cmd .n, .ligne-cmd .depuis, .ligne-cmd .pack { display: none; }
  .ligne-cmd .nom { grid-area: nom; } .ligne-cmd .total { grid-area: total; }
  .ligne-cmd .ville { grid-area: info; color: var(--gris); }
  .ligne-cmd .st { grid-area: statut; justify-self: end; }
  .sortir-mobile { display: block; margin: 0 calc(10*var(--u)) calc(10*var(--u)); }

  .tiroir-boite { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 88dvh; border-radius: 20px 20px 0 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); animation: feuille .45s var(--doux) both; }
  .tiroir.ferme .tiroir-boite { animation: feuille-sort .25s both; }
  @keyframes feuille { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes feuille-sort { to { transform: translateY(100%); } }
  .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }

  /* Barre d'onglets en bas */
  .onglets {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); background: rgba(20,20,20,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid #222;
  }
  .app.entre .onglets { animation: monte .6s .2s var(--doux) both; }
  .onglets a, .onglets button { display: grid; justify-items: center; gap: 4px; padding: 6px 0; font-size: 12px; font-weight: 600; color: #e6e6e6; transition: color .25s; }
  .onglets svg { width: 24px; height: 24px; transition: transform .3s var(--doux); }
  .onglets .actif { color: var(--orange); }
  .onglets .actif svg { fill: var(--orange); stroke: var(--orange); transform: translateY(-2px) scale(1.08); }
  .feuille { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(0,0,0,.5); animation: apparait .2s both; }
  .feuille-boite { position: absolute; left: 10px; right: 10px; bottom: calc(86px + env(safe-area-inset-bottom)); background: #1f1f1f; border-radius: 18px; padding: 6px; animation: monte .35s var(--doux) both; }
  .feuille-boite a { display: flex; align-items: center; gap: 14px; padding: 14px 14px; border-radius: 12px; font-size: 16px; font-weight: 500; }
  .feuille-boite a:active { background: #2a2a2a; }
  .feuille-boite svg { width: 22px; height: 22px; }
}

/* Impression du bordereau */
@media print {
  body { background: #fff; color: #000; }
  .menu, .haut, .onglets, .vue:not([data-vue=livraison]), .carte-tete .boutons, .aide { display: none !important; }
  .app { display: block; height: auto; }
  .carte { background: #fff; }
  .ligne-simple { color: #000; border-color: #ccc; font-size: 12px; }
  .ligne-simple.pas-coche { display: none; }
  .ligne-simple input { display: none; }
}

/* Moins d'animations si le téléphone le demande */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .vue.entre .trace .ligne { stroke-dashoffset: 0; }
}