/* Charte ID ACIER : jaune #FDD835, anthracite #212121 / #424242, Manrope, angles droits */
:root {
  --ida-jaune: #FDD835;
  --ida-jaune-fonce: #F2C200;
  --ida-noir: #212121;
  --ida-anthracite: #424242;
  --ida-gris: #7a7a7a;
  --ida-gris-clair: #f6f6f6;
  --ida-bord: #dbdbdb;
  --ida-vert: #219653;
  --ida-orange: #ff9a52;
  --ida-rouge: #ff4c4c;
  --ida-bleu: #2E86AB;
  --bs-body-font-family: "Manrope", "Montserrat", system-ui, sans-serif;
  --bs-body-color: var(--ida-noir);
  --bs-body-bg: var(--ida-gris-clair);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-link-color: var(--ida-noir);
  --bs-link-color-rgb: 33,33,33;
  --bs-link-hover-color: #000;
  --bs-primary: #212121;
  --bs-primary-rgb: 33,33,33;
  --sidebar-w: 236px;
}
body { background: var(--ida-gris-clair); font-size: .94rem; }
h1, h2, h3, h4, h5, .fw-title { font-family: "Montserrat", "Manrope", sans-serif; font-weight: 700; }
h1 { font-size: 1.45rem; }
.btn, .form-control, .form-select, .card, .badge, .dropdown-menu, .alert, .modal-content, .nav-pills .nav-link, .list-group, .ts-control { border-radius: 0 !important; }
.btn { font-weight: 700; }
.btn-jaune, .btn-primary { --bs-btn-bg: var(--ida-jaune); --bs-btn-border-color: var(--ida-jaune); --bs-btn-color: var(--ida-noir);
  --bs-btn-hover-bg: var(--ida-jaune-fonce); --bs-btn-hover-border-color: var(--ida-jaune-fonce); --bs-btn-hover-color: var(--ida-noir);
  --bs-btn-active-bg: var(--ida-jaune-fonce); --bs-btn-active-color: var(--ida-noir); --bs-btn-disabled-bg: var(--ida-jaune); --bs-btn-disabled-color: var(--ida-noir); }
.btn-noir { --bs-btn-bg: var(--ida-noir); --bs-btn-color: #fff; --bs-btn-border-color: var(--ida-noir); --bs-btn-hover-bg: #000; --bs-btn-hover-color: var(--ida-jaune); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--ida-jaune-fonce); box-shadow: 0 0 0 .2rem rgba(253,216,53,.35); }
.form-check-input:checked { background-color: var(--ida-noir); border-color: var(--ida-noir); }
.form-label { font-weight: 600; font-size: .85rem; margin-bottom: .2rem; }
.card { border: 1px solid var(--ida-bord); box-shadow: none; }
.card-header { background: #fff; font-weight: 700; border-bottom: 3px solid var(--ida-jaune); }
.table { --bs-table-bg: #fff; }
.table thead th { background: var(--ida-noir); color: #fff; font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; border: 0; white-space: nowrap; }
.text-muted-2 { color: var(--ida-gris) !important; }

/* Barre du haut */
.topbar { background: var(--ida-noir); color: #fff; height: 58px; position: sticky; top: 0; z-index: 1030; border-bottom: 4px solid var(--ida-jaune); }
.topbar .logo { height: 40px; background: #fff; padding: 3px 6px; }
.topbar .titre { font-family: Montserrat, sans-serif; font-weight: 700; letter-spacing: .02em; font-size: .95rem; }
.topbar a { color: #fff; text-decoration: none; }
.topbar .cloche { position: relative; font-size: 1.3rem; }
.topbar .cloche .badge { position: absolute; top: -4px; right: -10px; background: var(--ida-jaune); color: var(--ida-noir); font-size: .65rem; }

/* Menu latéral */
.sidebar { width: var(--sidebar-w); background: #fff; border-right: 1px solid var(--ida-bord); position: fixed; top: 58px; bottom: 0; overflow-y: auto; padding: 1rem 0; }
.sidebar .rubrique { font-size: .7rem; text-transform: uppercase; color: var(--ida-gris); font-weight: 700; padding: .9rem 1.25rem .3rem; letter-spacing: .06em; }
.sidebar a { display: flex; gap: .7rem; align-items: center; padding: .55rem 1.25rem; color: var(--ida-noir); text-decoration: none; font-weight: 600; border-left: 4px solid transparent; }
.sidebar a:hover { background: var(--ida-gris-clair); }
.sidebar a.active { border-left-color: var(--ida-jaune); background: #fffbe6; }
.sidebar a i { font-size: 1.1rem; width: 1.2rem; }
main.contenu { margin-left: var(--sidebar-w); padding: 1.5rem; min-height: calc(100vh - 58px); }
.bottomnav { display: none; }
@media (max-width: 991.98px) {
  .sidebar { display: none; }
  main.contenu { margin-left: 0; padding: 1rem .75rem 5.5rem; }
  .bottomnav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--ida-noir); z-index: 1030; border-top: 3px solid var(--ida-jaune); padding-bottom: env(safe-area-inset-bottom); }
  .bottomnav a { flex: 1; text-align: center; color: #ddd; text-decoration: none; font-size: .68rem; padding: .45rem 0 .4rem; }
  .bottomnav a i { display: block; font-size: 1.35rem; }
  .bottomnav a.active { color: var(--ida-jaune); }
  .topbar .titre { display: none; }
}

/* En-tête de page */
.page-head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.page-head h1 { margin: 0; }
.page-head h1::after { content: ""; display: block; width: 48px; height: 4px; background: var(--ida-jaune); margin-top: .35rem; }

/* Statuts */
.statut { display: inline-block; font-size: .72rem; font-weight: 700; padding: .15rem .45rem; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.st-planifiee { background: #e9ecef; color: var(--ida-anthracite); }
.st-prise { background: #fff1c2; color: #7a5b00; }
.st-route { background: var(--ida-bleu); color: #fff; }
.st-livree { background: var(--ida-vert); color: #fff; }
.st-annulee { background: var(--ida-rouge); color: #fff; text-decoration: line-through; }
.tag-retour { background: #8E6C8A; color: #fff; font-size: .68rem; font-weight: 700; padding: .1rem .35rem; text-transform: uppercase; }

/* Cartes de livraison dans le planning */
.liv { display: block; background: #fff; border: 1px solid var(--ida-bord); border-left: 5px solid var(--c, var(--ida-anthracite)); padding: .35rem .5rem; margin-bottom: .35rem; text-decoration: none; color: var(--ida-noir); font-size: .8rem; line-height: 1.25; }
.liv:hover { border-color: var(--ida-noir); border-left-color: var(--c); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.liv .h { font-weight: 800; }
.liv .num { font-weight: 700; color: var(--ida-anthracite); }
.liv .cli { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liv .sub { color: var(--ida-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liv.annulee { opacity: .55; }
.liv.livree { background: #f0f9f3; }
.liv.route { background: #eef6fb; }
.liv .ico { float: right; }

.grille { overflow-x: auto; background: #fff; border: 1px solid var(--ida-bord); }
.grille table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 900px; }
.grille th, .grille td { border: 1px solid var(--ida-bord); vertical-align: top; padding: .35rem; }
.grille thead th { background: var(--ida-noir); color: #fff; font-size: .8rem; text-align: center; position: sticky; top: 0; }
.grille thead th.today { background: var(--ida-jaune); color: var(--ida-noir); }
.grille td.today { background: #fffdf0; }
.grille th.ligne { width: 170px; background: #fafafa; text-align: left; font-size: .82rem; border-left: 5px solid var(--c); }
.grille th.ligne small { display: block; color: var(--ida-gris); font-weight: 500; }
.grille td.heure { width: 70px; font-weight: 700; font-size: .78rem; background: #fafafa; text-align: right; color: var(--ida-anthracite); }
.grille td .ajout { display: none; font-size: .75rem; color: var(--ida-gris); text-decoration: none; }
.grille td:hover .ajout { display: inline; }
.mois td { height: 115px; }
.mois .jour-num { font-weight: 800; font-size: .85rem; }
.mois .hors { background: #fafafa; color: #bbb; }
.puce { display: block; font-size: .72rem; border-left: 4px solid var(--c); padding-left: .3rem; margin: .1rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ida-noir); text-decoration: none; }

/* Liste mobile par jour (accordéon) */
.jour-acc .accordion-button { font-weight: 700; background: #fff; }
.jour-acc .accordion-button:not(.collapsed) { background: var(--ida-jaune); color: var(--ida-noir); box-shadow: none; }
.jour-acc .accordion-item { border-radius: 0 !important; }
.jour-acc .compte { background: var(--ida-noir); color: #fff; font-size: .72rem; padding: .1rem .45rem; margin-left: .5rem; }

.filtres { background: #fff; border: 1px solid var(--ida-bord); padding: .6rem .75rem; margin-bottom: 1rem; }
.segment .btn { font-size: .8rem; }
.segment .btn.active { background: var(--ida-noir); color: var(--ida-jaune); border-color: var(--ida-noir); }

/* KPI */
.kpi { background: #fff; border: 1px solid var(--ida-bord); border-top: 4px solid var(--ida-jaune); padding: .9rem 1rem; height: 100%; }
.kpi .val { font-size: 1.8rem; font-weight: 800; font-family: Montserrat, sans-serif; line-height: 1.1; }
.kpi .lib { font-size: .78rem; color: var(--ida-gris); text-transform: uppercase; font-weight: 700; letter-spacing: .03em; }
.barre { height: 8px; background: #eee; }
.barre > span { display: block; height: 100%; background: var(--ida-vert); }
.etoiles { color: #f2b600; letter-spacing: .05em; white-space: nowrap; }

/* Chronologie des étapes */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 1rem 1.9rem; }
.timeline li::before { content: ""; position: absolute; left: .55rem; top: 1.2rem; bottom: 0; width: 2px; background: var(--ida-bord); }
.timeline li:last-child::before { display: none; }
.timeline .pt { position: absolute; left: 0; top: .1rem; width: 1.2rem; height: 1.2rem; background: #fff; border: 2px solid var(--ida-bord); }
.timeline li.ok .pt { background: var(--ida-vert); border-color: var(--ida-vert); }
.timeline li.ok .pt::after { content: "✓"; color: #fff; font-size: .75rem; position: absolute; left: .18rem; top: -.12rem; }

/* Pages publiques (QR, avis, tutoriel) */
.public-head { background: var(--ida-noir); border-bottom: 4px solid var(--ida-jaune); padding: .6rem 1rem; display: flex; align-items: center; gap: .8rem; color: #fff; }
.public-head img { height: 42px; background: #fff; padding: 3px 6px; }
.public-wrap { max-width: 560px; margin: 0 auto; padding: 1rem .9rem 3rem; }
.etape-btn { font-size: 1.15rem; padding: 1rem; width: 100%; }
.sig-zone { border: 2px dashed var(--ida-anthracite); background: #fff; touch-action: none; width: 100%; height: 190px; display: block; }
.note-etoiles { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .2rem; }
.note-etoiles input { display: none; }
.note-etoiles label { font-size: 2.3rem; color: #ccc; cursor: pointer; line-height: 1; }
.note-etoiles input:checked ~ label, .note-etoiles label:hover, .note-etoiles label:hover ~ label { color: #f2b600; }

/* Bon de livraison imprimable */
.bon { background: #fff; max-width: 210mm; margin: 0 auto; padding: 12mm; border: 1px solid var(--ida-bord); page-break-after: always; }
.bon .entete { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 4px solid var(--ida-jaune); padding-bottom: 6mm; margin-bottom: 6mm; }
.bon .qr { text-align: center; border: 2px solid var(--ida-noir); padding: 3mm; }
.bon .qr svg { width: 42mm; height: 42mm; display: block; }
.bon .champ { font-size: .72rem; text-transform: uppercase; color: var(--ida-gris); font-weight: 700; }
@media print {
  .no-print, .topbar, .sidebar, .bottomnav, [data-demande-widget] { display: none !important; }
  main.contenu { margin: 0; padding: 0; }
  body { background: #fff; }
  .bon { border: 0; padding: 0; }
}
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--ida-noir); background-image: linear-gradient(135deg, #212121 0%, #212121 60%, #2a2a2a 60%, #2a2a2a 100%); }
.login-card { background: #fff; width: 100%; max-width: 400px; border-top: 6px solid var(--ida-jaune); padding: 2rem; }
.ts-wrapper.single .ts-control { padding: .375rem .75rem; }
.diff-old { color: var(--ida-rouge); text-decoration: line-through; }
.diff-new { color: var(--ida-vert); font-weight: 700; }

/* Glisser-déposer du planning */
.deplacable { cursor: grab; }
.deplacable:active { cursor: grabbing; }
.en-deplacement { opacity: .4; }
body.glisser [data-drop] { outline: 1px dashed transparent; }
body.glisser .grille td[data-drop]:hover, .drop-survol { background: #fff6c8 !important; outline: 2px dashed var(--ida-jaune-fonce) !important; outline-offset: -3px; }