/* Thème de l'outil ADV, posé sur Bootstrap 5 : menu latéral sombre, contenu clair, une couleur d'accent (violet Claude). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/static/vendor/inter/inter-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/static/vendor/inter/inter-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --fond: #f5f6f9;
  --carte: #ffffff;
  --texte: #101223;
  --discret: #687083;
  --pale: #9aa1b2;
  --bord: #e7e9ef;
  --bord-fort: #d3d7e0;
  --accent: #15172b;
  --accent-survol: #2b2e48;
  --accent-texte: #ffffff;
  --marque: #6a4cf0;
  --marque-fonce: #5136d4;
  --marque-doux: #f2eeff;
  --lien: #5136d4;
  --succes: #ecf8f1;
  --succes-texte: #17693a;
  --erreur: #fdf1f0;
  --erreur-texte: #a8271d;
  --info: #f0f4ff;
  --info-texte: #2a44a8;
  --danger: #d6372b;
  --ia: #6a4cf0;
  --menu: #11121b;
  --menu-texte: #a3a7b9;
  --rayon: 14px;
  --ombre: 0 1px 2px rgba(16, 18, 35, 0.04), 0 1px 3px rgba(16, 18, 35, 0.04);
  --ombre-haute: 0 10px 30px rgba(16, 18, 35, 0.08), 0 2px 6px rgba(16, 18, 35, 0.05);
  --largeur-menu: 248px;

  --bs-body-bg: var(--fond);
  --bs-body-color: var(--texte);
  --bs-body-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: 0.9375rem;
  --bs-border-color: var(--bord);
  --bs-link-color: var(--lien);
  --bs-link-color-rgb: 81, 54, 212;
  --bs-link-hover-color: #3f27b0;
  --bs-emphasis-color: var(--texte);
  --bs-secondary-color: var(--discret);
}

body { min-height: 100vh; -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; letter-spacing: -0.006em; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
main { padding-top: 28px; padding-bottom: 80px; }
h1 { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.025em; margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
h2 { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.012em; margin: 0 0 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
h3 { font-size: 0.75rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--discret); margin: 20px 0 8px; }
h2 + h3, .titre-section + h3 { margin-top: 0; }
main > h1 { margin-bottom: 22px; }
.carte > h2:not(:first-child) { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--bord); }
.carte > dl + *, .carte > details + * { margin-top: 18px; }
label small { font-weight: 400; line-height: 1.4; }
small, .aide, .vide { color: var(--discret); }
small { font-size: 0.8125rem; }
.aide { font-size: 0.875rem; }
.vide { padding: 18px 0; text-align: center; }
.multiligne { white-space: pre-line; }
kbd { font-family: inherit; font-size: 0.6875rem; font-weight: 600; color: var(--discret); background: #fff; border: 1px solid var(--bord-fort); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; box-shadow: none; }
::selection { background: #e2dbff; }

/* Cadre : menu latéral, barre du haut, contenu */
body.avec-menu { padding-left: var(--largeur-menu); }
.barre-laterale {
  position: fixed; inset: 0 auto 0 0; width: var(--largeur-menu); z-index: 40; display: flex; flex-direction: column;
  background: var(--menu); color: var(--menu-texte); padding: 18px 14px 14px; overflow-y: auto;
}
.barre-laterale .marque { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; color: #fff; text-decoration: none; }
.barre-laterale .logo {
  width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem;
  color: #fff; background: linear-gradient(135deg, #8b6cff 0%, #5136d4 100%); box-shadow: 0 4px 14px rgba(106, 76, 240, 0.45), inset 0 1px 0 rgba(255,255,255,.25);
}
.barre-laterale .nom-marque { font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em; }
.barre-laterale .nom-marque small { font-size: 0.6875rem; font-weight: 600; color: #c9bcff; background: rgba(139, 108, 255, 0.16); border-radius: 5px; padding: 2px 6px; margin-left: 4px; vertical-align: 2px; letter-spacing: 0.04em; }
.menu-principal { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.groupe-menu { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #5f6377; margin: 18px 10px 6px; }
.groupe-menu:first-child { margin-top: 4px; }
.lien-menu {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 9px; color: var(--menu-texte); font-size: 0.875rem; font-weight: 500;
  position: relative; transition: background .15s, color .15s;
}
.lien-menu .icone { width: 18px; height: 18px; flex: none; opacity: .85; }
.lien-menu:hover { background: rgba(255, 255, 255, 0.05); color: #fff; text-decoration: none; }
.lien-menu.actif { background: rgba(255, 255, 255, 0.08); color: #fff; }
.lien-menu.actif::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #8b6cff; }
.lien-menu.actif .icone { opacity: 1; color: #b9a6ff; }
.lien-menu .badge { margin-left: auto; }
.profil { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 12px 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.profil .avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #3a3d58, #23253a); border: 1px solid rgba(255,255,255,.1);
}
.profil .qui { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.profil .qui strong { color: #fff; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profil .qui small { color: var(--menu-texte); font-size: 0.75rem; }
.profil .sortie { background: none; border: 0; min-height: 0; padding: 7px; border-radius: 8px; color: var(--menu-texte); }
.profil .sortie:hover { background: rgba(255,255,255,.08); color: #fff; }
.profil .sortie .icone { width: 17px; height: 17px; }

.barre-haut {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 12px 32px;
  background: rgba(245, 246, 249, 0.82); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid rgba(231, 233, 239, 0.8);
}
.recherche-globale { position: relative; flex: 1; max-width: 560px; margin: 0; }
.recherche-globale .icone { position: absolute; left: 13px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--pale); pointer-events: none; }
.recherche-globale input { padding-left: 40px; padding-right: 40px; min-height: 40px; border-radius: 11px; background: #fff; border-color: var(--bord); box-shadow: var(--ombre); font-size: 0.875rem; }
.recherche-globale input::placeholder { color: var(--pale); }
.recherche-globale kbd { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.recherche-globale input:focus + kbd { display: none; }
.nouvelle-commande { margin-left: auto; }
.nouvelle-commande .icone { width: 16px; height: 16px; }
.bouton-menu { display: none; background: #fff; border: 1px solid var(--bord); color: var(--texte); padding: 8px; min-height: 40px; border-radius: 10px; }
.bouton-menu:hover { background: #fff; color: var(--texte); border-color: var(--bord-fort); }
.bouton-menu .icone { width: 20px; height: 20px; }
.voile-menu { position: fixed; inset: 0; z-index: 35; background: rgba(16, 18, 35, 0.45); }
@media (max-width: 991px) {
  body.avec-menu { padding-left: 0; }
  .barre-laterale { transform: translateX(-100%); transition: transform .22s ease; box-shadow: none; }
  body.menu-ouvert .barre-laterale { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.3); }
  .bouton-menu { display: inline-flex; }
  .barre-haut { padding: 10px 16px; gap: 10px; }
  .recherche-globale kbd { display: none; }
  .nouvelle-commande span { display: none; }
  .nouvelle-commande { padding: 8px 11px; }
}
@media (min-width: 992px) { .voile-menu { display: none !important; } }
.zone-contenu > main { padding-left: 32px; padding-right: 32px; }
@media (max-width: 991px) { .zone-contenu > main { padding-left: 16px; padding-right: 16px; padding-top: 20px; } }

/* Mise en page */
.titre-section { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.titre-section > div:not(.titre) { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.carte .titre-section { margin-bottom: 16px; }
.titre-section h2 { margin: 0; }
.sous-titre { color: var(--discret); margin: 4px 0 0; }
.fil-ariane { font-size: 0.8125rem; color: var(--discret); margin-bottom: 6px; font-weight: 500; }
.fil-ariane a { color: var(--discret); }
.fil-ariane a:hover { color: var(--texte); }
.carte {
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 22px 24px; margin-bottom: 20px;
  overflow-x: auto; box-shadow: var(--ombre);
}
.carte.formulaire, .carte.debordant { overflow: visible; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 16px; }
.grille > .carte { margin-bottom: 0; }
.grille.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .grille.trois { grid-template-columns: minmax(0, 1fr); } .carte { padding: 18px 16px; } }
.lateral dl { grid-template-columns: 105px 1fr; font-size: 0.875rem; }
details > summary { cursor: pointer; }
details.demande-envoyee { margin: 0 0 10px; }
details.demande-envoyee[open] > summary { margin-bottom: 10px; }
.grille.cartes { gap: 20px; margin-bottom: 20px; }
.colonnes > .carte { margin-bottom: 0; }
.colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .colonnes { grid-template-columns: minmax(0, 1fr); } }

/* Tableaux */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
th { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--pale); font-weight: 600; background: transparent; }
thead th { padding-top: 2px; padding-bottom: 10px; }
tbody tr:last-child td { border-bottom: 0; }
table.liste-principale tbody tr { transition: background .12s; }
table.liste-principale tbody tr:hover { background: #f8f8fc; }
table.liste-principale td:first-child a { font-weight: 600; color: var(--texte); }
table.liste-principale td:first-child a:hover { color: var(--lien); text-decoration: none; }
.nombre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tfoot td { border-bottom: 0; padding-top: 6px; padding-bottom: 6px; color: var(--discret); }
tfoot tr:first-child td { border-top: 1px solid var(--bord); padding-top: 12px; }
tfoot .fort td { font-weight: 700; color: var(--texte); font-size: 1rem; }
tr.inactif { opacity: 0.5; }
td a { white-space: nowrap; }

/* Formulaires */
label { display: flex; flex-direction: column; gap: 6px; font-size: 0.8125rem; font-weight: 550; color: #3a4055; margin-bottom: 14px; }
label.case { flex-direction: row; align-items: center; gap: 9px; font-weight: 400; font-size: 0.875rem; color: var(--texte); margin-bottom: 6px; }
input, select, textarea {
  font: inherit; font-size: 0.9375rem; color: var(--texte); padding: 8px 12px; border: 1px solid var(--bord-fort); border-radius: 9px;
  background: #fff; width: 100%; min-height: 40px; transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--pale); }
select { appearance: none; padding-right: 34px; background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23687083' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 12px center / 12px; }
input:hover:not(:focus):not(:disabled), select:hover:not(:focus):not(:disabled), textarea:hover:not(:focus):not(:disabled) { border-color: #b9bfcc; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--marque); box-shadow: 0 0 0 4px rgba(106, 76, 240, 0.14); }
input:disabled, select:disabled, textarea:disabled { background-color: #f3f4f7; color: var(--discret); cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { width: 17px; height: 17px; min-height: 0; padding: 0; accent-color: var(--marque); flex: none; }
input[type="checkbox"]:focus, input[type="radio"]:focus { box-shadow: none; }
input[type="file"] { border: 1.5px dashed var(--bord-fort); padding: 8px; font-size: 0.875rem; background: #fafbfd; cursor: pointer; }
input[type="file"]:hover { border-color: var(--marque); background: var(--marque-doux); }
input[type="file"]::file-selector-button { font: inherit; font-size: 0.8125rem; font-weight: 550; border: 1px solid var(--bord-fort); background: #fff; border-radius: 7px; padding: 4px 10px; margin-right: 10px; cursor: pointer; }
input.court { max-width: 110px; }
input.court.prix-libre { max-width: 130px; min-width: 110px; }
.parcours input[type="date"] { max-width: 240px; }
.lignes select { min-width: 240px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Boutons */
button, .bouton {
  font: inherit; font-size: 0.875rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 15px; min-height: 40px; border-radius: 10px; border: 1px solid var(--accent); background: var(--accent);
  color: var(--accent-texte); cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1.2;
  box-shadow: 0 1px 2px rgba(16, 18, 35, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
button:hover, .bouton:hover { background: var(--accent-survol); border-color: var(--accent-survol); color: #fff; text-decoration: none; }
button:active, .bouton:active { transform: translateY(1px); }
button:focus-visible, .bouton:focus-visible, a:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(106, 76, 240, 0.25); }
button.secondaire, .bouton.secondaire { background: #fff; color: var(--texte); border-color: var(--bord-fort); box-shadow: 0 1px 2px rgba(16, 18, 35, 0.05); }
button.secondaire:hover, .bouton.secondaire:hover { background: #f6f7fa; color: var(--texte); border-color: #bfc5d1; }
button.danger { background: #fff; color: var(--danger); border-color: #f2c7c3; box-shadow: none; }
button.danger:hover { background: var(--erreur); color: var(--danger); border-color: var(--danger); }
button.lien { background: none; border: 0; padding: 0; min-height: 0; color: var(--discret); font-weight: 500; box-shadow: none; }
button.lien:hover { color: var(--texte); background: none; text-decoration: underline; }
button.petit, .bouton.petit { padding: 5px 11px; min-height: 32px; font-size: 0.8125rem; border-radius: 8px; }
button[disabled] { opacity: 0.45; cursor: not-allowed; }
.navbar-toggler { background: none; min-height: 0; }
.actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.en-ligne { display: inline; }
form.en-ligne { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0; }
form.en-ligne input:not([type="hidden"]):not([type="checkbox"]) { width: auto; min-width: 280px; }
tr[data-href] { cursor: pointer; }

.filtres, .ligne-form { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filtres input, .filtres select { width: auto; flex: 1; min-width: 180px; }
.filtres select { flex: 0 1 220px; }
.ligne-form input { flex: 1; min-width: 160px; width: auto; }
.transition { border-top: 1px solid var(--bord); padding-top: 14px; margin-top: 14px; }

/* Messages */
.message { position: relative; padding: 12px 16px 12px 18px; border-radius: 11px; margin: 0 0 20px; font-size: 0.9rem; border: 1px solid transparent; overflow: hidden; }
.message::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: currentColor; opacity: .55; }
.message.succes { background: var(--succes); color: var(--succes-texte); border-color: #cdebd8; }
.message.erreur { background: var(--erreur); color: var(--erreur-texte); border-color: #f4d2ce; }
.message.info { background: var(--info); color: var(--info-texte); border-color: #dbe4fb; }
.carte .message { margin-bottom: 14px; }
.note { background: #f8f9fb; border: 1px solid var(--bord); padding: 11px 14px; border-radius: 10px; font-size: 0.875rem; }

/* Listes de définitions */
dl { display: grid; grid-template-columns: 130px 1fr; gap: 9px 12px; margin: 0; font-size: 0.9rem; }
dt { color: var(--discret); font-weight: 400; }
dd { margin: 0; overflow-wrap: anywhere; }

.liste, .historique, .liste-simple { list-style: none; padding: 0; margin: 0 0 12px; }
.liste li, .liste-simple li { padding: 10px 0; border-bottom: 1px solid var(--bord); }
.liste li:last-child, .liste-simple li:last-child { border-bottom: 0; }
.historique li { position: relative; padding: 0 0 16px 22px; font-size: 0.875rem; }
.historique li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--marque); }
.historique li::after { content: ""; position: absolute; left: 6px; top: 19px; bottom: 0; width: 2px; background: var(--bord); }
.historique li:last-child::after { display: none; }
.historique small { display: block; }

/* Compteurs et chiffres clés */
.compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px; }
.compteur {
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 15px 17px; display: flex; flex-direction: column; gap: 2px;
  color: var(--texte); box-shadow: var(--ombre); transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.compteur:hover { border-color: #cdc3ff; box-shadow: var(--ombre-haute); text-decoration: none; transform: translateY(-1px); }
.compteur strong { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.compteur span { color: var(--discret); font-size: 0.8125rem; font-weight: 500; }
.compteur.zero strong { color: #c3c7d2; }

/* Statuts */
.statut { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; padding: 3px 10px 3px 8px; border-radius: 999px; background: #eee; white-space: nowrap; line-height: 1.4; }
.statut::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.statut-brouillon { background: #f0f1f5; color: #4d5468; }
.statut-validee { background: #ebf0ff; color: #2f4fc2; }
.statut-en_preparation { background: #fff4e0; color: #9a5b00; }
.statut-expediee { background: #e3f6f7; color: #0b6574; }
.statut-facturee { background: #f2edff; color: #5a35c9; }
.statut-payee { background: #e6f6ea; color: #1d7034; }
.statut-annulee { background: #fdecea; color: #a8271d; }

/* Étapes de la commande */
.etapes { display: flex; list-style: none; padding: 0; margin: 0 0 24px; gap: 4px; }
.etapes li { flex: 1; font-size: 0.8125rem; color: var(--discret); padding-top: 10px; border-top: 3px solid var(--bord); }
.etapes li.faite { border-top-color: var(--texte); color: var(--texte); }
.etapes li.courante { border-top-color: var(--texte); color: var(--texte); font-weight: 650; }
.etapes.annulee li { border-top-color: #f0c4c0; }
@media (max-width: 700px) { .etapes li:not(.courante) { display: none; } }

/* Bloc « prochaine étape » : une action principale, le reste dans « Autres actions » */
.prochaine { padding: 16px 20px; overflow: visible; }
.prochaine-ligne { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.prochaine-action { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.prochaine-action form { display: flex; align-items: flex-end; gap: 0 10px; flex-wrap: wrap; }
.prochaine-action form label { margin-bottom: 0; min-width: 200px; }
.prochaine-outils { display: flex; align-items: center; gap: 8px; }
.prochaine .rappel { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--bord); font-size: 0.875rem; color: var(--texte); }
details.menu { position: relative; }
details.menu > summary { list-style: none; }
details.menu > summary::-webkit-details-marker { display: none; }
.menu-contenu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 300px; background: #fff; border: 1px solid var(--bord);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.1); padding: 12px; display: flex; flex-direction: column; gap: 12px;
}
.menu-contenu form { display: flex; flex-direction: column; }
.menu-contenu form + form { border-top: 1px solid var(--bord); padding-top: 12px; }
.menu-contenu label { margin-bottom: 8px; }

/* Onglets de la commande */
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--bord); margin: 4px 0 20px; overflow-x: auto; }
.onglets a { padding: 10px 14px; color: var(--discret); font-weight: 500; font-size: 0.9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.onglets a:hover { color: var(--texte); text-decoration: none; }
.onglets a.actif { color: var(--texte); border-bottom-color: var(--texte); }
.onglets .compte { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: #eef0f3; color: var(--discret); font-size: 0.75rem; text-align: center; }
.infos dl { grid-template-columns: 120px 1fr; font-size: 0.875rem; }
.infos hr { margin: 16px 0; border-color: var(--bord); opacity: 1; }
.titre-section.separe { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--bord); }
form.envoi-fichier { display: flex; gap: 8px; align-items: center; }
form.envoi-fichier input[type="file"] { width: 240px; min-height: 30px; padding: 3px; font-size: 0.8125rem; }

/* Parcours RDV */
.parcours { list-style: none; padding: 0; margin: 0; counter-reset: etape; }
.parcours > li { position: relative; padding: 0 0 22px 40px; counter-increment: etape; }
.parcours > li::before {
  content: counter(etape); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--bord-fort); background: #fff; color: var(--discret); font-size: 0.8125rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.parcours > li::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: 4px; width: 1px; background: var(--bord); }
.parcours > li:last-child { padding-bottom: 0; }
.parcours > li:last-child::after { display: none; }
.parcours > li.faite::before { content: "✓"; background: var(--texte); border-color: var(--texte); color: #fff; }
.parcours > li.courante::before { border-color: var(--texte); color: var(--texte); }
.parcours .titre-etape { font-weight: 600; margin: 2px 0 4px; }
.parcours > li:not(.faite):not(.courante) .titre-etape { color: var(--discret); }
.parcours .etat { font-size: 0.875rem; color: var(--discret); margin: 0 0 10px; }

.connexion { max-width: 380px; margin: 12vh auto; padding: 32px; }
.connexion h1 { margin-bottom: 20px; }
.connexion button { width: 100%; margin-top: 6px; }
.sans-bord { border: none; padding: 0; margin: 0; min-width: 0; }
.liens-pennylane { display: flex; gap: 16px; margin: 12px 0 0; }

/* Liste déroulante de recherche (produits, clients) */
.combo { position: relative; }
.combo-liste {
  position: absolute; z-index: 10; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 4px 0; list-style: none;
  background: #fff; border: 1px solid var(--bord); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  max-height: 280px; overflow-y: auto; color: var(--texte);
}
.combo-liste li { padding: 8px 12px; cursor: pointer; }
.combo-liste li.actif, .combo-liste li:hover { background: #f3f4f6; }
.combo-liste li.combo-vide { color: var(--discret); cursor: default; }
.lignes .combo { min-width: 260px; }

/* Aperçu de facture à côté de la commande */
body.apercu-ouvert main { max-width: 1800px; }
.avec-apercu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
body.apercu-ouvert .avec-apercu { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
body.apercu-ouvert .colonnes { grid-template-columns: minmax(0, 1fr); }
.apercu-facture { position: sticky; top: 16px; background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 16px; }
.apercu-facture .titre-section { margin-bottom: 12px; }
.apercu-facture iframe { width: 100%; height: 72vh; min-height: 460px; border: 1px solid var(--bord); border-radius: 6px; background: #fff; }
@media (max-width: 1000px) {
  body.apercu-ouvert .avec-apercu { grid-template-columns: minmax(0, 1fr); }
  .apercu-facture { position: static; }
}

pre.mail {
  white-space: pre-wrap; font-family: inherit; font-size: 0.875rem; background: #f9fafb; border: 1px solid var(--bord);
  border-radius: 8px; padding: 12px 14px; margin: 10px 0 0;
}
.mail-fil pre.mail, .mail-recu pre.mail { max-height: 360px; overflow: auto; }

.suivi { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: #f0f1f3; color: #4b5563; }
.suivi-en_transit { background: #e7eefc; color: #1d4a91; }
.suivi-livre { background: #e5f4e8; color: #1e6b34; }
.suivi-incident { background: #fbe9e7; color: #a12a1b; }

/* Fenêtres (Drive, pièces jointes) */
dialog { border: 1px solid var(--bord); border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.15); }
.fenetre-drive { width: min(560px, calc(100vw - 32px)); height: min(620px, calc(100vh - 64px)); padding: 14px; }
.fenetre-drive::backdrop, .fenetre-pj::backdrop { background: rgba(17, 24, 39, 0.4); }
.fenetre-drive[open] { display: flex; flex-direction: column; gap: 8px; }
.fenetre-drive .titre-section { margin: 0; }
.fenetre-drive iframe { flex: 1; width: 100%; border: 0; }
body.fenetre { padding: 4px; background: var(--carte); }
body.fenetre main { padding: 0; }
body.fenetre .filtres { margin-bottom: 8px; }
body.fenetre .fil { font-size: 0.8125rem; color: var(--discret); margin: 0 0 8px; }
body.fenetre .lieu { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
body.fenetre .lieu a { font-size: 18px; }
.dossiers li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--bord); }
.dossiers li a { color: var(--texte); }
.creer-dossier { margin: 12px 0 8px; }
.fenetre-pj { width: min(1000px, calc(100vw - 32px)); height: calc(100vh - 64px); padding: 14px; }
.fenetre-pj[open] { display: flex; flex-direction: column; gap: 8px; }
.fenetre-pj .titre-section { margin: 0; }
#contenu-pj { flex: 1; min-height: 0; display: flex; justify-content: center; }
#contenu-pj iframe { width: 100%; height: 100%; border: 0; }
#contenu-pj img { max-width: 100%; max-height: 100%; object-fit: contain; }

textarea.modele { font-family: ui-monospace, Menlo, monospace; font-size: 0.8125rem; }
.champs-mail td { padding: 3px 10px 3px 0; border: 0; font-size: 0.8125rem; }
.cle-api { display: flex; align-items: flex-end; gap: 12px; }
.cle-api > label:first-child { flex: 1; }
.cle-api > button, .cle-api > form { margin-bottom: 14px; }
.cases { display: flex; flex-direction: column; justify-content: center; gap: 4px; margin-bottom: 14px; }
.tableau-defilant { overflow-x: auto; }
table.darty td, table.darty th { white-space: nowrap; font-size: 0.75rem; padding: 6px 8px; }
table.darty td.vide { background: #fdecea; }
.mail-recu .mail-entete { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.badge { display: inline-block; min-width: 18px; padding: 1px 6px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 0.6875rem; font-weight: 600; text-align: center; margin-left: 6px; vertical-align: 1px; }

/* Fil de mails */
.mail-fil { border: 1px solid var(--bord); border-radius: 8px; padding: 10px 12px; margin: 8px 0; background: #fff; }
.mail-fil.envoye { background: #fafbfc; }
.mail-fil summary { cursor: pointer; display: flex; gap: 4px 10px; flex-wrap: wrap; align-items: baseline; list-style: none; }
.mail-fil summary::-webkit-details-marker { display: none; }
.mail-fil .sens { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--discret); }
.mail-fil.recu .sens { color: var(--lien); }
.mail-fil strong { font-weight: 600; font-size: 0.9rem; }
.mail-fil summary .aide { flex-basis: 100%; font-size: 0.8125rem; }
.mail-fil .resume-court { flex-basis: 100%; color: #4b5563; font-size: 0.8125rem; }
.mail-fil[open] .resume-court { display: none; }
.resume-ia { background: #f6f3fc; border: 1px solid #e7e0f6; border-radius: 8px; padding: 8px 12px; margin: 10px 0 0; font-size: 0.875rem; }
.badge-ia { display: inline-block; font-size: 0.6875rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--ia); color: #fff; margin-right: 6px; vertical-align: 1px; }
table.entrepots input { width: 100%; }
table.entrepots td { padding: 4px; }
.carte form + .note, .carte form + p { margin-top: 16px; }

/* Formulaires en sections numérotées */
.formulaire-sections > .carte { margin-bottom: 16px; }
.numero-section { display: flex; align-items: center; gap: 10px; }
.numero-section span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--texte, #111827); color: #fff; font-size: 0.8125rem; font-weight: 600;
}
.adresse-resume {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 14px 16px; border: 1px solid var(--bord); border-radius: 8px; background: #f9fafb;
  margin-bottom: 18px;
}
.adresse-resume #resume-livraison { margin-top: 4px; line-height: 1.5; }
#adresse-complete { margin-bottom: 8px; }
.grille.separe { margin-top: 8px; }
.barre-enregistrer {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; gap: 14px; align-items: center;
  padding: 14px 0; background: var(--fond, #f6f7f9); border-top: 1px solid var(--bord);
}
details.entrepots-bloc { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bord); }
details.entrepots-bloc[open] > summary { margin-bottom: 14px; }
.entrepots input { width: 100%; }
details.modele-mail { border: 1px solid var(--bord); border-radius: 8px; padding: 12px 16px; margin-bottom: 10px; }
details.modele-mail[open] > summary { margin-bottom: 12px; }
.mail-edition .titre-section { display: flex; justify-content: space-between; align-items: baseline; }
.onglets-pages { margin-bottom: 20px; }
.etapes-process input:not([type=checkbox]), .etapes-process select { width: 100%; }
.titre-section .bloc-titre { display: block; }
.titre-section .bloc-titre p { margin: 4px 0 0; }
.etapes-process td { vertical-align: top; }
.cases-ligne { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
.cases-ligne .case { margin: 0; white-space: nowrap; }
.infos-etape { margin-top: 10px; }
.parcours .actions { margin-top: 8px; }
details.test-mail { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--bord); }
details.test-mail[open] > summary { margin-bottom: 12px; }
details.test-mail form > * + * { margin-top: 8px; }
.process-client { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--bord); border-radius: 8px; background: #f9fafb; }
.liste-etapes { margin: 8px 0 0; padding-left: 20px; }
.liste-modeles { padding-left: 18px; margin: 6px 0; }
.carte h3 { font-size: 0.95rem; margin: 22px 0 8px; }
fieldset.etape-process { border: 1px solid var(--bord); border-radius: 8px; padding: 14px 16px 6px; margin: 0 0 14px; }
fieldset.etape-process legend { float: none; width: auto; font-size: 0.85rem; font-weight: 600; padding: 0 6px; margin: 0; }
.libelle { font-size: 0.875rem; font-weight: 500; margin-bottom: 6px; }
.cases-ligne.horizontal { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; padding-top: 0; margin-bottom: 14px; }
details.regles { margin: 4px 0 10px; }
details.regles[open] > summary { margin-bottom: 10px; }
.choix-ligne { margin-bottom: 8px; }
.choix-ligne > * { margin: 0; }
.choix-etape { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* Éditeur de process en blocs */
.flow-entete { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 14px; align-items: end; }
.flow-entete label { margin: 0; }
.flow-zone { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; margin: 16px 0 20px; }
.flow { display: flex; flex-direction: column; align-items: center; padding: 8px 0 24px; }
#etapes-flow { display: flex; flex-direction: column; align-items: center; width: 100%; }
.bloc-flow { display: flex; gap: 12px; align-items: flex-start; width: 100%; max-width: 520px; background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 14px 16px; text-align: left; }
.bloc-flow.etape { cursor: pointer; border-left: 4px solid var(--bord-fort); transition: box-shadow .15s, border-color .15s; }
.bloc-flow.etape:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.bloc-flow.etape.choisi { box-shadow: 0 0 0 2px var(--lien); }
.bloc-flow.mail { border-left-color: #2f6fe0; }
.bloc-flow.attente { border-left-color: #d99a1e; }
.bloc-flow.choix { border-left-color: var(--ia); }
.bloc-flow.tache { border-left-color: #6b7280; }
.bloc-flow.depart, .bloc-flow.fin { background: transparent; border-style: dashed; max-width: 360px; }
.bloc-flow.fin { padding: 10px 16px; }
.bloc-corps { flex: 1; min-width: 0; }
.bloc-type { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--discret); }
.bloc-titre { font-weight: 600; margin: 2px 0; }
.bloc-resume { font-size: 0.85rem; color: var(--discret); }
.bloc-outils { display: flex; flex-direction: column; gap: 2px; }
.bloc-outils .lien { padding: 0 6px; font-size: 0.9rem; color: var(--discret); }
.bloc-outils .lien:disabled { opacity: .25; }
.a-regler { color: var(--danger); }
.pastille { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: #eef0f3; font-size: 1rem; }
.pastille.mail { background: #e8f0fd; color: #2f6fe0; }
.pastille.attente { background: #fdf3e0; color: #a46f0c; }
.pastille.choix { background: #efeafb; color: var(--ia); }
.pastille.tache { background: #f0f1f3; color: #4b5563; }
.badges-flow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.badge-flow { font-size: 0.75rem; border-radius: 999px; padding: 2px 9px; background: #f0f1f3; }
.badge-flow.ia { background: #efeafb; color: var(--ia); }
.badge-flow.saut { background: #fdf0ef; color: var(--erreur-texte); }
.badge-flow.contexte { background: #eef3fd; color: var(--lien); }
.lien-flow { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 6px 0; }
.lien-flow::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px solid var(--bord-fort); z-index: 0; }
.lien-flow.ouvert::before { display: none; }
.plus-flow { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--bord-fort); background: var(--carte); color: var(--discret); font-size: 1.1rem; line-height: 1; padding: 0; }
.plus-flow:hover { border-color: var(--lien); color: var(--lien); }
.menu-ajout { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 520px; background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.menu-ajout > button:not(.lien) { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: var(--carte); color: var(--texte); border: 1px solid var(--bord); border-radius: 10px; padding: 10px; font-weight: 400; }
.menu-ajout > button:not(.lien):hover { border-color: var(--lien); }
.menu-ajout small { display: block; color: var(--discret); font-size: 0.78rem; line-height: 1.3; margin-top: 2px; }
.menu-ajout .fermer-ajout { grid-column: 1 / -1; justify-self: center; }
.depart-rapide { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 520px; }
.depart-rapide > button { text-align: left; padding: 10px 14px; }
.depart-rapide small { display: block; color: var(--discret); font-weight: 400; }
.panneau-flow { position: sticky; top: 16px; background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 18px; }
.panneau-flow h2 { margin-top: 0; }
.panneau-titre { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.panneau-titre > div { flex: 1; }
.panneau-actions { display: flex; justify-content: space-between; align-items: end; gap: 12px; border-top: 1px solid var(--bord); margin-top: 14px; padding-top: 14px; }
.panneau-actions label { margin: 0; }
.legende-flow { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.legende-flow li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.875rem; }
.choix-flow { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.choix-flow > * { margin: 0; min-width: 0; flex: 1; }
.choix-flow > .lien { flex: none; }
@media (max-width: 900px) {
  .flow-zone { grid-template-columns: 1fr; }
  .flow-entete { grid-template-columns: 1fr; }
  .menu-ajout { grid-template-columns: 1fr; }
  .panneau-flow { position: static; }
}
.badge-flow.bouton { background: #f4f0fc; color: var(--ia); border: 1px solid #ddd3f3; }
.menu-ajout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.menu-ajout > button:not(.lien) { justify-content: flex-start; white-space: normal; height: auto; }
.menu-ajout > button:not(.lien) > span:last-child { min-width: 0; }
.depart-rapide > button { display: block; white-space: normal; height: auto; }
.depart-rapide > button b { display: block; }
@media (max-width: 900px) { .menu-ajout { grid-template-columns: 1fr; } }
.menu-ajout > button:not(.lien):hover { background: #f8f9fb; color: var(--texte); }
.plus-flow:hover { background: var(--carte); }
.badge-flow { max-width: 100%; overflow-wrap: anywhere; }
.confirmation-neolys select { width: auto; min-width: 140px; padding-top: 2px; padding-bottom: 2px; }

/* Onglet Neolys */
.statut-ok { background: var(--succes); color: var(--succes-texte); }
.statut-erreur { background: var(--erreur); color: var(--erreur-texte); }
.ok-neolys { color: var(--succes-texte); }
.erreur-neolys { color: var(--erreur-texte); font-size: 0.85rem; }
.adresse-api { overflow-wrap: anywhere; }
.etat-neolys .actions { margin-top: 16px; flex-wrap: wrap; }
.etat-neolys input[type=date] { width: auto; }
.journal-neolys td { vertical-align: top; }
.detail-neolys td { padding: 4px 8px; font-size: 0.85rem; border: 0; }
.numero-neolys { margin-top: 6px; }
.numero-neolys label { margin: 0 0 4px; display: block; }
.numero-neolys .en-ligne { display: flex; gap: 6px; align-items: center; }
.numero-neolys input { width: 120px; padding-top: 3px; padding-bottom: 3px; }
.numero-neolys .prefixe { color: var(--discret); font-weight: 400; }
table.colisage input { margin: 0; }
table.colisage td { padding: 6px 6px; }
table.colisage .court { width: 90px; }
table.colisage tfoot td { border-bottom: 0; }
.colisage-form .actions { margin-top: 12px; }
table.colisage tfoot .aide { font-weight: 400; font-size: 0.85rem; }
table.colisage .avec-unite { white-space: nowrap; }
/* Contrôle du colisage : écarts avec la commande. */
.badge-erreur { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--erreur); color: var(--erreur-texte); text-decoration: none; }
.alerte-colis ul { margin: 6px 0 0; padding-left: 18px; }
table.controle-colis tr.ecart td { background: var(--erreur); color: var(--erreur-texte); }
h3.sous-titre { font-size: 0.95rem; margin: 18px 0 8px; }
/* Problèmes signalés sur la commande (lus par Claude) : visibles jusqu'à « Traité ». */
.alertes-commande .alerte-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.alertes-commande form { margin: 0; }
/* Téléphone : lignes de commande en cartes (produit sur toute la largeur, puis quantité / prix / remise), boutons qui passent à la ligne. */
@media (max-width: 640px) {
  .bouton, button { white-space: normal; }
  table.lignes thead { display: none; }
  table.lignes tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--bord); }
  table.lignes tbody td { display: block; border: 0; padding: 0; }
  table.lignes tbody td:first-child, table.lignes tbody td.total-ligne { grid-column: 1 / -1; }
  table.lignes tbody td:last-child { grid-column: 1 / -1; }
  table.lignes .combo, table.lignes select { min-width: 0; width: 100%; }
  table.lignes input.court { max-width: none; width: 100%; }
  table.lignes td[data-label]::before { content: attr(data-label); display: block; font-size: 0.75rem; color: var(--discret); margin-bottom: 2px; }
}


/* À faire, chiffres B2B, commande depuis un PO, recherche. */
.tableau-chiffres tr.groupe td { font-weight: 650; background: #fafafd; }
.tableau-chiffres tr.sous-ligne td:first-child { padding-left: 30px; color: #3a4055; }
.chiffres-cles .compteur strong { font-size: 1.25rem; }
.filtres-chiffres fieldset { border: 0; padding: 0; margin: 8px 0; display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; gap: 4px 18px; }
.filtres-chiffres fieldset label.case { width: auto; margin: 0; }
.filtres-chiffres legend { width: 100%; }
.defilement { overflow-x: auto; }
.depuis-po ul { margin: 8px 0 0; padding-left: 18px; }
small.lue { display: block; margin-top: 3px; }

/* Retouches du thème sur les composants des pages */
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 0.6875rem; font-weight: 700; margin-left: 6px; vertical-align: 1px; font-variant-numeric: tabular-nums; }
h2 .badge, h2 .badge-erreur { margin-left: 0; }
.etapes li { border-top-width: 3px; border-radius: 2px; }
.etapes li.faite, .etapes li.courante { border-top-color: var(--marque); }
.onglets { gap: 2px; border-bottom-color: var(--bord); }
.onglets a { font-weight: 550; border-bottom-width: 2px; }
.onglets a.actif { color: var(--texte); border-bottom-color: var(--marque); }
.onglets .compte { background: #eceef4; }
.onglets a.actif .compte { background: var(--marque-doux); color: var(--marque-fonce); }
.parcours > li.faite::before { background: var(--marque); border-color: var(--marque); }
.parcours > li.courante::before { border: 2px solid var(--marque); color: var(--marque-fonce); box-shadow: 0 0 0 4px var(--marque-doux); }
.numero-section span { background: linear-gradient(135deg, #8b6cff, #5136d4); box-shadow: 0 2px 6px rgba(106, 76, 240, .35); }
.adresse-resume, .process-client { background: #fafbfd; border-radius: 11px; }
.barre-enregistrer { background: rgba(245, 246, 249, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
details.carte > summary { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
details.carte > summary::-webkit-details-marker { display: none; }
details.carte > summary::before { content: "›"; display: inline-block; font-size: 1.1rem; line-height: 1; color: var(--discret); transition: transform .15s; }
details.carte[open] > summary::before { transform: rotate(90deg); }
details.carte[open] > summary { margin-bottom: 16px; }
.menu-contenu, .combo-liste { border-radius: 12px; box-shadow: var(--ombre-haute); }
.combo-liste li.actif, .combo-liste li:hover { background: var(--marque-doux); }
.resume-ia { background: #f6f3ff; border-color: #e6defe; border-radius: 10px; }
.badge-ia { background: linear-gradient(135deg, #8b6cff, #5136d4); }
.mail-fil { border-radius: 11px; }
.mail-fil.recu .sens { color: var(--marque-fonce); }
pre.mail { background: #fafbfd; border-radius: 10px; }
.apercu-facture, .panneau-flow, .bloc-flow, .menu-ajout { border-radius: var(--rayon); box-shadow: var(--ombre); }
.bloc-flow.etape.choisi { box-shadow: 0 0 0 2px var(--marque); }
dialog { border-radius: 16px; box-shadow: var(--ombre-haute); }
.depuis-po { border-radius: 12px; }

/* Connexion : panneau de marque à gauche, formulaire à droite. */
body.sans-menu main { padding: 0; max-width: none; }
.page-connexion { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.page-connexion .vitrine {
  position: relative; overflow: hidden; color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(1200px 600px at -10% -10%, #3b2a8f 0%, transparent 55%), radial-gradient(900px 500px at 110% 110%, #5136d4 0%, transparent 50%), var(--menu);
}
.page-connexion .vitrine::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); pointer-events: none; }
.page-connexion .vitrine .marque { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.125rem; position: relative; z-index: 1; }
.page-connexion .vitrine .logo { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: linear-gradient(135deg, #8b6cff, #5136d4); box-shadow: 0 6px 20px rgba(106, 76, 240, .5); }
.page-connexion .vitrine h2 { font-size: 2.25rem; line-height: 1.15; letter-spacing: -0.035em; font-weight: 700; max-width: 460px; margin: 0 0 16px; position: relative; z-index: 1; display: block; }
.page-connexion .vitrine h2 em { font-style: normal; background: linear-gradient(90deg, #c9bcff, #8b6cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-connexion .vitrine p { color: #b8bbcc; max-width: 440px; position: relative; z-index: 1; margin: 0; }
.page-connexion .vitrine ul { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; color: #d7d9e4; font-size: 0.9rem; }
.page-connexion .vitrine li::before { content: "✓"; display: inline-flex; width: 20px; height: 20px; margin-right: 10px; border-radius: 50%; align-items: center; justify-content: center; font-size: 0.7rem; background: rgba(139, 108, 255, .22); color: #c9bcff; }
.page-connexion .formulaire-connexion { display: flex; align-items: center; justify-content: center; padding: 48px 24px; background: var(--fond); }
.page-connexion form { width: 100%; max-width: 380px; }
.page-connexion form h1 { font-size: 1.75rem; margin-bottom: 6px; }
.page-connexion form .sous-titre { margin-bottom: 28px; }
.page-connexion form button { width: 100%; margin-top: 8px; min-height: 44px; }
@media (max-width: 860px) {
  .page-connexion { grid-template-columns: 1fr; }
  .page-connexion .vitrine { padding: 28px 24px; min-height: 0; }
  .page-connexion .vitrine h2 { font-size: 1.5rem; margin-top: 24px; }
  .page-connexion .vitrine ul { display: none; }
}

/* Tableau de bord */
.accueil-entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.accueil-entete h1 { font-size: 1.875rem; }
.accueil-entete p { margin: 4px 0 0; color: var(--discret); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 18px 20px; box-shadow: var(--ombre); display: flex; flex-direction: column; gap: 6px; color: var(--texte); position: relative; overflow: hidden; }
a.kpi:hover { text-decoration: none; border-color: #cdc3ff; box-shadow: var(--ombre-haute); }
.kpi .kpi-titre { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 550; color: var(--discret); }
.kpi .kpi-icone { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--marque-doux); color: var(--marque-fonce); }
.kpi .kpi-icone .icone { width: 16px; height: 16px; }
.kpi.alerte .kpi-icone { background: var(--erreur); color: var(--danger); }
.kpi .kpi-valeur { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .kpi-detail { font-size: 0.8125rem; color: var(--discret); }
.evolution { font-weight: 650; font-size: 0.75rem; padding: 1px 7px; border-radius: 999px; margin-right: 4px; }
.evolution.hausse { background: var(--succes); color: var(--succes-texte); }
.evolution.baisse { background: var(--erreur); color: var(--erreur-texte); }
.pipeline { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--carte); box-shadow: var(--ombre); margin-bottom: 20px; overflow: hidden; }
.pipeline a { padding: 14px 16px; color: var(--texte); border-right: 1px solid var(--bord); display: flex; flex-direction: column; gap: 6px; transition: background .12s; }
.pipeline a:last-child { border-right: 0; }
.pipeline a:hover { background: #fafafd; text-decoration: none; }
.pipeline strong { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pipeline a.zero strong { color: #c3c7d2; }
@media (max-width: 1100px) { .pipeline { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pipeline a { border-bottom: 1px solid var(--bord); } }
@media (max-width: 600px) { .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpis { grid-template-columns: 1fr 1fr; gap: 10px; } .kpi { padding: 14px; } .kpi .kpi-valeur { font-size: 1.35rem; } }
.accueil-colonnes { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .accueil-colonnes { grid-template-columns: minmax(0, 1fr); } }
.accueil-colonnes .carte { margin-bottom: 20px; }
.titre-carte { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.titre-carte h2 { margin: 0; }
.titre-carte a { font-size: 0.8125rem; font-weight: 600; }
.liste-afaire { list-style: none; padding: 0; margin: 0; }
.liste-afaire li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--bord); }
.liste-afaire li:last-child { border-bottom: 0; padding-bottom: 0; }
.liste-afaire .pastille-type { flex: none; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; }
.pastille-type.probleme { background: var(--erreur); color: var(--danger); }
.pastille-type.neolys { background: #fff4e0; color: #9a5b00; }
.pastille-type.attente { background: var(--marque-doux); color: var(--marque-fonce); }
.pastille-type.rdv { background: #e3f6f7; color: #0b6574; }
.pastille-type.brouillon { background: #f0f1f5; color: #4d5468; }
.liste-afaire .texte-afaire { flex: 1; min-width: 0; font-size: 0.875rem; }
.liste-afaire .texte-afaire a { font-weight: 600; color: var(--texte); }
.liste-afaire .texte-afaire small { display: block; }
.tout-va-bien { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--succes-texte); font-weight: 550; }
.tout-va-bien span { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--succes); }
.top-clients { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.top-clients li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 0.875rem; }
.top-clients .jauge { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: #eef0f5; overflow: hidden; }
.top-clients .jauge i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8b6cff, #5136d4); }
.top-clients strong { font-variant-numeric: tabular-nums; }
.grille { align-items: end; }
.numero-neolys .en-ligne { flex-wrap: wrap; }
.numero-neolys input { width: 110px; min-height: 34px; }
.numero-neolys button { min-height: 34px; padding: 4px 11px; font-size: 0.8125rem; }
/* Actions de Claude : même violet que les résumés lus par Claude. */
button.ia, .bouton.ia { background: linear-gradient(135deg, #7b5cff, #5136d4); border-color: #5a3fe0; color: #fff; box-shadow: 0 2px 8px rgba(106, 76, 240, 0.3), inset 0 1px 0 rgba(255,255,255,.18); }
button.ia:hover, .bouton.ia:hover { background: linear-gradient(135deg, #6c4cf0, #452cc0); border-color: #452cc0; color: #fff; }

/* Téléphone : colonnes secondaires masquées */
.visible-mobile { display: none; }
@media (max-width: 575.98px) {
  .masque-mobile { display: none; }
  br.visible-mobile { display: inline; }
  small.visible-mobile { display: inline; }
  main.container-xl { padding-left: 16px; padding-right: 16px; }
}

/* Fluidité : transitions entre pages, apparitions, retours visuels */
:root { --rapide: 120ms; --normal: 180ms; --lent: 260ms; --courbe: cubic-bezier(.2, .8, .2, 1); }
@view-transition { navigation: auto; }
.barre-laterale { view-transition-name: menu; }
.barre-haut { view-transition-name: barre-haut; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--rapide); }

@keyframes entree { from { opacity: 0; transform: translateY(6px); } }
@keyframes apparition { from { opacity: 0; } }
@keyframes zoom-entree { from { opacity: 0; transform: translateY(4px) scale(.98); } }
@keyframes toast-entree { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes toast-sortie { to { opacity: 0; transform: translateY(8px); } }
@keyframes tourne { to { transform: rotate(360deg); } }

main > * { animation: entree var(--lent) var(--courbe) backwards; }
main > :nth-child(2) { animation-delay: 30ms; }
main > :nth-child(3) { animation-delay: 60ms; }
main > :nth-child(4) { animation-delay: 90ms; }
main > :nth-child(5) { animation-delay: 120ms; }
main > :nth-child(n+6) { animation-delay: 150ms; }
.kpis > * { animation: entree var(--lent) var(--courbe) backwards; }
.kpis > :nth-child(2) { animation-delay: 40ms; }
.kpis > :nth-child(3) { animation-delay: 80ms; }
.kpis > :nth-child(4) { animation-delay: 120ms; }
.jauge > * { transform-origin: left; animation: jauge 700ms var(--courbe) 150ms backwards; }
@keyframes jauge { from { transform: scaleX(0); } }

/* Survols */
a.kpi { transition: transform var(--normal) var(--courbe), box-shadow var(--normal), border-color var(--normal); }
a.kpi:hover { transform: translateY(-2px); }
.pipeline a:hover { background: #fafaff; text-decoration: none; }
.lien-menu .icone { transition: transform var(--normal) var(--courbe), opacity var(--normal); }
.lien-menu:hover .icone { transform: translateX(1px); opacity: 1; }
.onglets a { transition: color var(--rapide), border-color var(--normal); }
a.lien-fleche .icone, .titre-carte a { transition: transform var(--rapide); }

/* Bouton en cours d'envoi */
button.en-cours, .bouton.en-cours { pointer-events: none; opacity: .82; }
button.en-cours::before, .bouton.en-cours::before {
  content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: tourne .6s linear infinite;
}

/* Message de réussite flottant */
.message.flottant {
  position: fixed; right: 24px; bottom: 24px; z-index: 60; margin: 0; max-width: 420px; padding-right: 40px;
  box-shadow: var(--ombre-haute); animation: toast-entree var(--lent) var(--courbe);
}
.message.flottant.sortie { animation: toast-sortie var(--normal) ease forwards; }
.fermer-flottant {
  position: absolute; top: 6px; right: 6px; min-height: 0; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: inherit; box-shadow: none; font-size: 1.1rem; line-height: 1; opacity: .6;
}
.fermer-flottant:hover { background: rgba(0, 0, 0, .06); color: inherit; opacity: 1; }
@media (max-width: 575.98px) { .message.flottant { left: 12px; right: 12px; bottom: 12px; max-width: none; } }

/* Fenêtres */
dialog[open] { animation: zoom-entree var(--normal) var(--courbe); }
dialog::backdrop { background: rgba(16, 18, 35, .4); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: apparition var(--normal) ease; }

/* Palette de commandes (⌘K) */
.palette {
  width: min(560px, calc(100vw - 24px)); margin: 12vh auto auto; padding: 0; border: 1px solid var(--bord); border-radius: 16px;
  background: #fff; box-shadow: 0 24px 60px rgba(16, 18, 35, .22), 0 4px 12px rgba(16, 18, 35, .08); overflow: hidden;
}
.palette-saisie { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid var(--bord); }
.palette-saisie .icone { width: 18px; height: 18px; color: var(--pale); flex: none; }
.palette-saisie input { border: 0; box-shadow: none; padding: 12px 0; min-height: 48px; font-size: 1rem; }
.palette-saisie input:focus { box-shadow: none; }
.palette ul { list-style: none; margin: 0; padding: 6px; max-height: 340px; overflow-y: auto; }
.palette li { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; cursor: pointer; font-size: 0.9rem; color: var(--texte); }
.palette li .icone { width: 17px; height: 17px; color: var(--discret); flex: none; }
.palette li[aria-selected="true"] { background: var(--marque-doux); color: var(--marque-fonce); }
.palette li[aria-selected="true"] .icone { color: var(--marque); }
.palette-aide { display: flex; gap: 16px; margin: 0; padding: 9px 16px; border-top: 1px solid var(--bord); background: #fafbfd; font-size: 0.75rem; color: var(--discret); }
.palette-aide kbd { margin-right: 3px; }
@media (max-width: 575.98px) { .palette-aide { display: none; } }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important;
  }
  button.en-cours::before, .bouton.en-cours::before { animation-duration: 1.2s !important; }
  html { scroll-behavior: auto; }
}

/* Retours et avoirs */
.statut-retour-attendu { background: #fff4e0; color: #9a5b00; }
.statut-retour-recu { background: #e3f6f7; color: #0b6574; }
.statut-retour-avoir_brouillon { background: #f2edff; color: #5a35c9; }
.statut-retour-avoir_emis { background: #e6f6ea; color: #1d7034; }
.statut-retour-annule { background: #fdecea; color: #a8271d; }
.retours-commande { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--bord); }
.retours-commande h3 { margin-top: 0; }
.retours-commande p { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
input.quantite-retour { width: 84px; }

/* Import de l'historique (factures de l'ancien logiciel) */
.depot-factures { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.depot-factures label { flex: 1 1 320px; margin: 0; }
.barre-import { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; margin: 0 0 16px; border-radius: 14px; background: #efeafb; }
.barre-import span { flex: 1 1 240px; color: var(--texte); font-size: 0.9rem; }
.barre-import select, .actions-facture select { width: auto; margin-left: 6px; }
.facture-import { margin-bottom: 14px; }
.facture-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 10px; }
.facture-entete .discret { color: var(--discret); }
.facture-montant { text-align: right; white-space: nowrap; }
.facture-montant a { display: inline-block; margin-top: 4px; font-size: 0.8125rem; }
.facture-import .message ul { margin: 0; padding-left: 18px; }
.actions-facture { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 576px) {
  .facture-entete { flex-direction: column; }
  .facture-montant { text-align: left; }
}
@media (max-width: 640px) {
  .facture-import table.lignes tbody td:nth-child(2) { grid-column: 1 / -1; }
  .facture-import table.lignes tbody td:last-child { grid-column: auto; }
  .facture-import table.lignes tbody td.nombre { text-align: left; }
}
.client-facture { max-width: 520px; }
.facture-import td .petit { display: inline-block; margin-top: 6px; font-size: 0.8125rem; }
table.lignes-correction td small { display: block; color: var(--discret); margin-top: 2px; }
/* N° de lot par produit, sur la commande */
small.lot { color: var(--discret); font-variant-numeric: tabular-nums; }
.lots-commande { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--bord); }
.lots-commande summary { cursor: pointer; font-weight: 550; font-size: 0.9rem; color: var(--lien); }
.lots-commande form { display: grid; gap: 10px; margin-top: 12px; }
.lots-commande label { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: center; margin: 0; }
.lots-commande button { justify-self: start; }
@media (max-width: 576px) { .lots-commande label { grid-template-columns: 1fr; gap: 4px; } }

/* Activation du compte et code à 6 chiffres */
.activation { max-width: 760px; margin: 32px auto; }
.etape-activation h2 { display: flex; align-items: center; gap: 10px; }
.numero-etape { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; font-size: 0.85rem; background: var(--marque-doux); color: var(--marque); font-weight: 700; }
.identifiants { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; align-items: center; margin: 12px 0; }
.identifiants dt { color: var(--discret); font-weight: 500; }
.identifiants dd { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.identifiants code, .secret-totp { font-size: 1rem; padding: 4px 8px; border-radius: 6px; background: #f4f4f8; color: #1d1f2b; word-break: break-all; }
.qr-activation { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.qr-activation .qr { width: 220px; height: 220px; background: #fff; border-radius: 12px; padding: 6px; border: 1px solid #e5e5ee; }
.qr-activation .qr svg { width: 100%; height: 100%; display: block; }
.un-password { margin-top: 12px; }
input.code-2fa { font-size: 1.4rem; letter-spacing: 0.25em; max-width: 220px; font-variant-numeric: tabular-nums; }
.en-ligne-activation { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.en-ligne-activation label { margin: 0; }
.grille-droits select { min-width: 130px; }
.grille-droits td.aide-page { color: var(--discret); font-size: 0.85rem; }
.etat-compte { font-size: 0.8rem; padding: 2px 8px; border-radius: 999px; background: #f0f0f5; color: #555; white-space: nowrap; }
.etat-compte.actif { background: #e6f6ec; color: #1d7a3e; }
.etat-compte.a-activer { background: #fff4de; color: #8a5a00; }
.etat-compte.desactive { background: #fbe9e9; color: #a12b2b; }
.lien-activation { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lien-activation code { word-break: break-all; padding: 6px 8px; background: #f4f4f8; border-radius: 6px; }
.ligne-action { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.ligne-action .aide { margin: 0; }