/* ══════════════════════════════════════════════════════════════════════
   BatiPilot · interface
   Sommaire : 1 coquille · 2 en-tête de page · 3 cartes et chiffres
   4 boutons · 5 étiquettes et messages · 6 formulaires · 7 tableaux
   8 filtres · 9 accueil · 10 couleurs métiers · 11 planning · 12 Gantt
   13 carte · 14 rapports et photos · 15 compte · 16 commentaires
   17 divers (GED, paie, admin) · 18 fenêtres · 19 plans · 20 connexion
   21 responsive
   ══════════════════════════════════════════════════════════════════════ */

.demarrage { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; background: radial-gradient(60% 50% at 50% 40%, #18297C, transparent 70%), #0A1446; color: #fff; }
.demarrage img { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 12px 34px rgba(0, 0, 0, .35); animation: bp-respire 1.6s ease-in-out infinite; }
.demarrage span { font: 800 26px var(--police-titre); letter-spacing: .1em; text-transform: uppercase; }
.demarrage i { position: relative; width: 120px; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.demarrage i::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 3px; background: #00E3DD; animation: bp-charge 1.1s ease-in-out infinite; }
@keyframes bp-respire { 50% { transform: scale(.94); } }
@keyframes bp-charge { from { left: -40%; } to { left: 100%; } }

.bp-ico { width: 18px; height: 18px; flex: 0 0 auto; display: inline-block; vertical-align: middle; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ═══ 1. Coquille : barre latérale, barre du haut, contenu ═══════════ */
.bp-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }

.bp-side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
  padding: 20px 14px 16px;
  color: var(--marine-texte);
  background: radial-gradient(120% 60% at 0% 0%, var(--marine-3) 0%, transparent 60%), var(--marine);
  scrollbar-color: rgba(255, 255, 255, .15) transparent;
}
.bp-brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 6px; color: inherit; font-weight: 700; }
.bp-brand img { width: 38px; height: 38px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.bp-brand-texte { display: grid; line-height: 1.1; }
.bp-brand-texte b { font: 800 22px var(--police-titre); letter-spacing: .04em; text-transform: uppercase; }
.bp-brand-texte b span { color: var(--orange); }
.bp-brand-texte small { color: var(--marine-texte-2); font-weight: 500; font-size: 12px; }

.bp-nav { display: flex; flex-direction: column; gap: 2px; }
.bp-nav-search { display: flex; align-items: center; gap: 9px; margin: 0 2px 5px; padding: 9px 10px; border: 1px solid var(--marine-trait); border-radius: 10px; color: var(--marine-texte-2); background: rgba(255,255,255,.045); }
.bp-nav-search .bp-ico { width: 16px; height: 16px; }
.bp-nav-search input { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; color: var(--marine-texte); background: transparent; font: 500 12.5px var(--police); }
.bp-nav-search input::placeholder { color: var(--marine-texte-2); opacity: .85; }
.bp-nav-search:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 18%, transparent); }
.bp-nav-no-results { margin: 8px 10px; color: var(--marine-texte-2); font-size: 12px; }
.bp-nav-section { display: flex; flex-direction: column; gap: 2px; }
.bp-nav-groupe { display: block; padding: 14px 12px 6px; color: var(--marine-texte-2); font: 700 11px var(--police); letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.bp-nav button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--marine-texte-2);
  font: 600 14.5px var(--police); text-align: left; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.bp-nav button:hover { background: rgba(255, 255, 255, .06); color: var(--marine-texte); }
.bp-nav button.active { background: var(--primaire); color: #fff; box-shadow: 0 8px 22px rgba(23, 72, 224, .45); }
:root[data-theme="dark"] .bp-nav button.active { background: #2F55E8; }
.bp-nav button.active .bp-ico { stroke: var(--cyan); }

.bp-side-footer { margin-top: auto; display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--marine-trait); }
.bp-side-user { display: flex; align-items: center; gap: 10px; border: 0; background: none; color: inherit; padding: 0; cursor: pointer; text-align: left; }
.bp-side-user span { display: grid; line-height: 1.2; font-weight: 700; font-size: 14px; }
.bp-side-user small { color: var(--marine-texte-2); font-weight: 500; }
.bp-side-quitter { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; border-radius: 9px; border: 1px solid var(--marine-trait); background: transparent; color: var(--marine-texte-2); font: 600 13px var(--police); cursor: pointer; }
.bp-side-quitter:hover { color: #fff; background: rgba(255, 255, 255, .06); }

.bp-main { display: flex; flex-direction: column; min-width: 0; }
.bp-top {
  position: sticky; top: 0; z-index: 20;
  height: 68px; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--trait);
}
.bp-top-titre { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bp-top-titre b { font-weight: 700; white-space: nowrap; }
.bp-top-titre span { color: var(--encre-3); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-top-titre span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 2px 0; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 25%, transparent); }
.bp-top-tools { display: flex; align-items: center; gap: 10px; }
.bp-top-date { padding: 6px 12px; border-radius: 999px; background: var(--surface-3); color: var(--encre-2); font-size: 13px; font-weight: 600; text-transform: capitalize; white-space: nowrap; }
.bp-icon-btn { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--trait); background: var(--surface); color: var(--encre-2); cursor: pointer; transition: var(--transition); }
.bp-icon-btn:hover { color: var(--primaire); border-color: var(--primaire-doux); background: var(--primaire-pale); }
.bp-account-shortcut { display: inline-flex; align-items: center; gap: 10px; padding: 3px 14px 3px 3px; border: 1px solid var(--trait); border-radius: 999px; background: var(--surface); color: var(--encre); cursor: pointer; transition: var(--transition); }
.bp-account-shortcut:hover { border-color: var(--primaire-doux); box-shadow: var(--ombre); }
.bp-account-shortcut > span:last-child { display: grid; text-align: left; line-height: 1.15; font-weight: 700; font-size: 13.5px; }
.bp-account-shortcut small { color: var(--encre-3); font-weight: 500; font-size: 11.5px; }
.bp-mobile-only { display: none !important; }

.bp-content { padding: 28px 32px 48px; min-width: 0; max-width: 1680px; width: 100%; }
.bp-content > * + * { margin-top: 20px; }
.bp-content > .bp-head + * { margin-top: 24px; }

.bp-mobile-nav {
  display: none; position: fixed; z-index: 30; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
  padding: 6px; gap: 2px; overflow-x: auto;
  border-radius: 18px; background: var(--marine); box-shadow: 0 14px 40px rgba(10, 20, 70, .35);
  scrollbar-width: none;
}
.bp-mobile-nav::-webkit-scrollbar { display: none; }
.bp-mobile-nav button {
  flex: 0 0 auto; min-width: 66px; display: grid; justify-items: center; gap: 3px;
  padding: 7px 8px; border: 0; border-radius: 12px; background: transparent;
  color: var(--marine-texte-2); font: 600 11px var(--police); cursor: pointer;
}
.bp-mobile-nav button .bp-ico { width: 20px; height: 20px; }
.bp-mobile-nav button.active { background: var(--primaire); color: #fff; }

.bp-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--primaire), #4F7DFF); color: #fff; font: 700 13px var(--police); overflow: hidden; flex: 0 0 auto; }
.bp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bp-side .bp-avatar { background: linear-gradient(135deg, var(--orange), #FF9A5C); }

/* ═══ 2. En-tête de page ═════════════════════════════════════════════ */
.bp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.bp-head h1 { font: 800 clamp(30px, 3.2vw, 42px)/1 var(--police-titre); letter-spacing: .015em; text-transform: uppercase; color: var(--encre); }
.bp-head h1 em { font-style: normal; color: var(--primaire); }
.bp-head p { color: var(--encre-2); margin: 8px 0 0; max-width: 720px; font-size: 15.5px; }
.bp-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 4px 12px 4px 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--trait); color: var(--encre-2); font: 700 11.5px var(--police); letter-spacing: .08em; text-transform: uppercase; box-shadow: var(--ombre); }
.bp-eyebrow i { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--primaire-pale); color: var(--primaire); font-style: normal; }
.bp-eyebrow .bp-ico { width: 13px; height: 13px; }
.bp-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }

/* ═══ 3. Cartes, chiffres clés, sections ═════════════════════════════ */
.bp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bp-grid.bp-finance-grid, .bp-grid.bp-planner-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bp-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }

.bp-card { position: relative; min-width: 0; padding: 22px; border-radius: var(--rayon-l); background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre); }
.bp-card > h2, .bp-card > .bp-head h2, .bp-section-heading h2 { font-size: 19px; font-weight: 700; color: var(--encre); }
.bp-card > h2 { margin-bottom: 16px; }
.bp-card h3 { font-size: 15px; font-weight: 700; margin: 4px 0 8px; }
.bp-card > p { color: var(--encre-2); }

.bp-stat {
  display: flex; flex-direction: column; gap: 4px; overflow: hidden;
  padding: 20px 20px 18px 24px;
  color: var(--encre-2); font-size: 13.5px; font-weight: 600;
  box-shadow: var(--ombre-carte);
}
.bp-stat::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--accent-stat, var(--primaire)); }
.bp-stat::after { content: ""; position: absolute; right: -28px; top: -28px; width: 96px; height: 96px; border-radius: 50%; background: var(--accent-stat, var(--primaire)); opacity: .07; }
.bp-grid > .bp-stat:nth-child(4n+2) { --accent-stat: var(--cyan); }
.bp-grid > .bp-stat:nth-child(4n+3) { --accent-stat: var(--orange); }
.bp-grid > .bp-stat:nth-child(4n+4) { --accent-stat: var(--t-peinture); }
.bp-stat strong { display: block; margin-top: 4px; color: var(--encre); font: 700 clamp(26px, 2.3vw, 34px)/1.1 var(--police); letter-spacing: -.02em; }
.bp-stat small { color: var(--encre-3); font-weight: 500; }

.bp-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.bp-section-heading p { margin: 4px 0 0; color: var(--encre-2); font-size: 14px; }

/* ═══ 4. Boutons ═════════════════════════════════════════════════════ */
.btn, .bp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 9px 16px;
  border-radius: var(--rayon); border: 1.5px solid var(--trait-fort);
  background: var(--surface); color: var(--encre);
  font: 700 14px var(--police); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), color var(--transition);
}
.btn:hover { border-color: var(--primaire); color: var(--primaire); background: var(--primaire-pale); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-principal { background: var(--primaire); border-color: var(--primaire); color: var(--sur-primaire); box-shadow: var(--ombre-bouton); }
.btn-principal:hover { background: var(--primaire-fonce); border-color: var(--primaire-fonce); color: var(--sur-primaire); transform: translateY(-1px); }
.btn-grand { min-height: 50px; padding: 13px 22px; font-size: 16px; border-radius: 10px; }
.btn-petit { min-height: 30px; padding: 4px 10px; font-size: 12.5px; border-radius: 7px; border-width: 1px; }
.btn-danger { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.btn-danger:hover { background: color-mix(in srgb, var(--rouge) 85%, #000); border-color: transparent; color: #fff; }
.btn-plat { background: transparent; border-color: transparent; color: var(--encre-2); box-shadow: none; }
.btn-plat:hover { background: var(--surface-3); border-color: transparent; color: var(--encre); }
.btn .bp-ico { width: 16px; height: 16px; }
.bp-compteur { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--cyan); color: var(--sur-cyan); font: 800 11px var(--police); }

/* ═══ 5. Étiquettes, notes, états vides, notifications ═══════════════ */
.bp-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--primaire-pale); color: var(--primaire); font: 700 12px var(--police); white-space: nowrap; }
.bp-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bp-tag.ok { background: var(--vert-pale); color: var(--vert); }
.bp-tag.warn { background: var(--jaune-pale); color: var(--jaune-texte); }
.bp-tag.danger { background: var(--rouge-pale); color: var(--rouge); }

.bp-note { padding: 12px 16px; border-radius: 10px; background: var(--primaire-pale); border: 1px solid color-mix(in srgb, var(--primaire) 18%, transparent); border-left: 4px solid var(--primaire); color: var(--encre); font-size: 14px; }
.bp-note b { color: var(--encre); }

.bp-empty { padding: 34px 20px; text-align: center; color: var(--encre-2); border: 1.5px dashed var(--trait-fort); border-radius: var(--rayon-l); background: var(--surface-2); }
.bp-empty::before { content: ""; display: block; width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 14px; background: var(--primaire-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231748E0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 4l9 6.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center / 24px no-repeat; }
td .bp-empty { border: 0; background: transparent; padding: 22px; }

.bp-toast {
  position: fixed; z-index: 1000; right: 22px; bottom: 22px; max-width: min(440px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px 13px 14px; border-radius: 12px;
  background: var(--marine); color: #fff; font-weight: 600; font-size: 14.5px;
  box-shadow: var(--ombre-haute); animation: bp-toast-in .3s cubic-bezier(.2, .9, .3, 1.2);
}
.bp-toast::before { content: ""; flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1446' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat; }
@keyframes bp-toast-in { from { transform: translateY(16px) scale(.97); opacity: 0; } }

/* ═══ 6. Formulaires ═════════════════════════════════════════════════ */
.bp-form { display: grid; gap: 14px; }
.bp-form label, .bp-filterbar label, .filter-label, .bp-planner-filter-fields label, .bp-ged-toolbar label, .bp-month-filter {
  display: grid; gap: 6px; color: var(--encre-2); font: 700 13px var(--police);
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), select, textarea {
  width: 100%; min-height: 42px; padding: 9px 12px;
  border: 2px solid var(--trait-fort); border-radius: var(--rayon);
  background: var(--surface); color: var(--encre);
  font: 500 14.5px var(--police);
  transition: border-color var(--transition), box-shadow var(--transition);
}
input::placeholder, textarea::placeholder { color: var(--encre-3); }
input:hover, select:hover, textarea:hover { border-color: var(--primaire-doux); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primaire); box-shadow: 0 0 0 4px var(--primaire-pale); }
select { appearance: none; padding-right: 36px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A93B2' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; }
select[multiple] { padding: 6px; background-image: none; min-height: 140px; }
select[multiple] option { padding: 6px 8px; border-radius: 6px; }
select[multiple] option:checked { background: var(--primaire-pale); color: var(--primaire); }
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--primaire); cursor: pointer; }
input[type=file] { font: 500 13px var(--police); color: var(--encre-2); }
input[type=file]::file-selector-button { margin-right: 12px; padding: 7px 14px; border: 0; border-radius: 7px; background: var(--primaire-pale); color: var(--primaire); font: 700 13px var(--police); cursor: pointer; }
.bp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bp-form > footer { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding-top: 6px; }
.bp-form > small, .bp-form small { color: var(--encre-3); font-weight: 500; }
.bp-form-hint { color: var(--encre-3); font-size: 13.5px; }

/* ═══ 7. Tableaux ════════════════════════════════════════════════════ */
.bp-table-wrap { overflow: auto; border-radius: var(--rayon-l); background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre); }
.bp-card .bp-table-wrap { box-shadow: none; }
.bp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.bp-table th, .bp-table td { padding: 12px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--trait); }
.bp-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--encre-3); font: 700 11.5px var(--police); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.bp-table tbody tr { transition: background var(--transition); }
.bp-table tbody tr:hover { background: var(--surface-2); }
.bp-table tbody tr:last-child td { border-bottom: 0; }
.bp-table td b { font-weight: 700; color: var(--encre); }
.bp-table td small { color: var(--encre-3); }
.bp-table td > .btn + .btn { margin-left: 6px; }
.bp-cell-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
td > .bp-cell-actions:only-child { margin-top: 0; }
.bp-card-head { align-items: center; margin-bottom: 14px; }
.bp-card-head h2 { font-size: 19px; }
.bp-card-head p { margin-top: 2px; font-size: 14px; }

/* ═══ 8. Barres de filtres et d'outils ═══════════════════════════════ */
.bp-filterbar, .bp-ged-toolbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  padding: 14px 16px; border-radius: var(--rayon-l);
  background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre);
}
.bp-filterbar label, .bp-ged-toolbar label { flex: 0 1 190px; }
.bp-filter-search, .bp-ged-toolbar label:first-child { flex: 1 1 260px !important; }
.bp-filter-search input, .bp-ged-toolbar input[type=search] { padding-left: 38px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A93B2' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 12px center / 17px no-repeat, var(--surface); }
.bp-filterbar input[type=date] { width: 160px; }
.bp-filter-count { margin-left: auto; align-self: center; padding: 5px 12px; border-radius: 999px; background: var(--surface-3); color: var(--encre-2); font: 700 12.5px var(--police); white-space: nowrap; }
.bp-content > .bp-filterbar + .bp-table-wrap, .bp-card .bp-filterbar + .bp-table-wrap { margin-top: 12px; }
.bp-card .bp-filterbar { box-shadow: none; background: var(--surface-2); margin-bottom: 12px; }
.bp-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.bp-toolbar .bp-stat { padding: 0; box-shadow: none; font-weight: 500; font-size: 13px; color: var(--encre-3); align-self: center; }
.bp-toolbar .bp-stat::before, .bp-toolbar .bp-stat::after { display: none; }
.bp-toolbar .filter-label { min-width: 190px; }

/* ═══ 9. Accueil : tendances, finances, démo ═════════════════════════ */
.bp-dashboard-trends .bp-section-heading { margin-bottom: 10px; }
.bp-trend-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 16px; color: var(--encre-2); font-size: 13px; font-weight: 600; }
.bp-trend-legend span { display: inline-flex; align-items: center; gap: 7px; }
.bp-trend-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.bp-trend-chart { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.bp-trend-month { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--trait); }
.bp-trend-month:last-child { background: var(--primaire-pale); border-color: color-mix(in srgb, var(--primaire) 25%, transparent); }
.bp-trend-bars { height: 132px; display: flex; align-items: flex-end; gap: 4px; margin-bottom: 10px; padding-bottom: 1px; border-bottom: 1.5px solid var(--trait-fort); background: repeating-linear-gradient(to top, transparent 0 32px, var(--trait) 32px 33px); }
.bp-trend-bar { flex: 1; display: block; min-width: 0; border-radius: 5px 5px 2px 2px; transition: height .6s cubic-bezier(.2, .8, .2, 1); }
.bp-trend-bar.reports, .bp-trend-legend i.reports { background: var(--primaire); }
.bp-trend-bar.sites, .bp-trend-legend i.sites { background: var(--cyan); }
.bp-trend-bar.invoice, .bp-trend-legend i.invoice { background: var(--vert); }
.bp-trend-bar.cost, .bp-trend-legend i.cost { background: var(--orange); }
.bp-trend-month b { font: 800 16px var(--police-titre); letter-spacing: .04em; text-transform: uppercase; color: var(--encre); }
.bp-trend-month small { color: var(--encre-3); font-size: 11.5px; line-height: 1.35; }
.bp-trend-note { display: block; margin-top: 12px; color: var(--encre-3); }
.bp-demo-empty { background: linear-gradient(120deg, var(--marine) 0%, var(--marine-3) 100%); color: #fff; border: 0; box-shadow: var(--ombre-carte); }
.bp-demo-empty h2 { color: #fff !important; font: 800 26px var(--police-titre) !important; text-transform: uppercase; letter-spacing: .02em; }
.bp-demo-empty p { color: #C9D2F5 !important; max-width: 640px; }
.bp-demo-empty .btn-principal { background: var(--cyan); border-color: var(--cyan); color: var(--sur-cyan); box-shadow: 0 8px 24px rgba(0, 227, 221, .3); }
.bp-dash-detail { display: grid; gap: 20px; }
.bp-dash-alertes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bp-dash-alertes button {
  --a: var(--primaire);
  width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr) 18px; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--trait); border-left: 4px solid var(--a);
  background: var(--surface); color: var(--encre); text-align: left; font: inherit; cursor: pointer; transition: var(--transition);
}
.bp-dash-alertes button:hover { border-color: var(--a); box-shadow: var(--ombre-carte); transform: translateX(2px); }
.bp-dash-alertes button > i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--a) 14%, var(--surface)); color: var(--a); }
.bp-dash-alertes button > .bp-ico { color: var(--encre-3); width: 16px; height: 16px; }
.bp-dash-alertes span { display: grid; min-width: 0; line-height: 1.3; }
.bp-dash-alertes b { font-size: 14.5px; }
.bp-dash-alertes small { color: var(--encre-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-dash-alertes .rouge { --a: var(--rouge); }
.bp-dash-alertes .orange { --a: var(--orange); }
.bp-dash-alertes .jaune { --a: var(--jaune); }
.bp-dash-alertes .jaune > i { color: var(--jaune-texte); }
.bp-dash-alertes .ok { --a: var(--vert); background: var(--surface-2); }
.bp-dash-alertes .ok b { color: var(--encre-2); font-weight: 600; }
.bp-dash-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.bp-dash-semaine > div { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--trait); text-align: center; }
.bp-dash-semaine > div.we { opacity: .7; }
.bp-dash-semaine > div.auj { background: var(--primaire-pale); border-color: var(--primaire); }
.bp-dash-barre { position: relative; width: 22px; height: 110px; margin-bottom: 6px; border-radius: 6px; background: var(--trait); overflow: hidden; }
.bp-dash-barre i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 6px; background: linear-gradient(to top, var(--primaire), #5B8BFF); transition: height .6s cubic-bezier(.2, .8, .2, 1); }
.bp-dash-semaine .auj .bp-dash-barre i { background: linear-gradient(to top, var(--orange), #FF9A5C); }
.bp-dash-semaine b { font: 800 22px/1 var(--police-titre); }
.bp-dash-semaine small { color: var(--encre-3); font-size: 11.5px; text-transform: capitalize; }
.bp-dash-semaine small + small { text-transform: none; font-size: 10.5px; }
.bp-dash-note { margin: 12px 0 0; color: var(--encre-3); font-size: 13px; }
/* Avatar « tête dans un cercle », couleur propre à chaque salarié */
.bp-tete { width: 24px; height: 24px; flex: 0 0 24px; display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%; border: 2px solid var(--surface); background: var(--person, var(--encre-3)); color: #fff; font: 800 10px var(--police); font-style: normal; }
.bp-tete .bp-ico { width: 18px; height: 18px; margin-top: 7px; fill: currentColor; stroke: none; }
.bp-tete.sans { background: var(--trait-fort); }
.bp-tete.plus { background: var(--surface-3); color: var(--encre-2); }
.bp-tetes { display: flex; justify-content: center; margin: 4px 0 2px; }
.bp-tetes .bp-tete + .bp-tete { margin-left: -8px; }
.bp-dash-semaine .bp-tete { border-color: var(--surface-2); }
.bp-dash-semaine .auj .bp-tete { border-color: var(--primaire-pale); }
.bp-dash-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.bp-dash-site { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--trait); border-top: 4px solid var(--site, var(--primaire)); }
.bp-dash-site header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bp-dash-site header div { display: grid; min-width: 0; line-height: 1.25; }
.bp-dash-site header b { font: 800 17px var(--police-titre); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-dash-site header small { color: var(--encre-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-dash-site header .bp-tag { flex: 0 0 auto; font-size: 11px; }
.bp-dash-jauge { position: relative; height: 10px; border-radius: 10px; background: var(--trait); }
.bp-dash-jauge i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px; background: linear-gradient(90deg, var(--primaire), var(--cyan)); }
.bp-dash-jauge b { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--orange); }
.bp-dash-site p { margin: 0; color: var(--encre-2); font-size: 13px; }
.bp-dash-site p strong { color: var(--encre); font: 800 20px var(--police-titre); }
.bp-dash-site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; color: var(--encre-2); font-size: 13px; }
.bp-dash-site li { display: flex; align-items: center; gap: 8px; }
.bp-dash-site li .bp-ico { width: 15px; height: 15px; color: var(--encre-3); }
.bp-dash-site li em { font-style: normal; font-weight: 700; color: var(--rouge); }
.bp-dash-site footer { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; border-top: 1px solid var(--trait); }
.bp-dash-site footer .btn { flex: 1; }
.bp-grid-2 .bp-note + .bp-note { margin-top: 10px; }
.bp-grid-2 .bp-note { border-left-width: 3px; background: var(--surface-2); border-color: var(--trait); border-left-color: var(--primaire); }

/* ═══ 10. Couleurs des chantiers, salariés, corps d'état, lots, statuts ═ */
[class*="site-color-"] { --site: hsl(var(--site-h) var(--s-site) var(--l-site)); }
[class*="person-color-"] { --person: hsl(var(--person-h) var(--s-pers) var(--l-pers)); }
.site-color-1{--site-h:212} .site-color-2{--site-h:350} .site-color-3{--site-h:127} .site-color-4{--site-h:265} .site-color-5{--site-h:42} .site-color-6{--site-h:180} .site-color-7{--site-h:317} .site-color-8{--site-h:95} .site-color-9{--site-h:232} .site-color-10{--site-h:10}
.site-color-11{--site-h:147} .site-color-12{--site-h:285} .site-color-13{--site-h:62} .site-color-14{--site-h:200} .site-color-15{--site-h:337} .site-color-16{--site-h:115} .site-color-17{--site-h:252} .site-color-18{--site-h:30} .site-color-19{--site-h:167} .site-color-20{--site-h:305}
.site-color-21{--site-h:82} .site-color-22{--site-h:220} .site-color-23{--site-h:357} .site-color-24{--site-h:135} .site-color-25{--site-h:272} .site-color-26{--site-h:50} .site-color-27{--site-h:187} .site-color-28{--site-h:325} .site-color-29{--site-h:102} .site-color-30{--site-h:240}
.person-color-1{--person-h:25} .person-color-2{--person-h:163} .person-color-3{--person-h:300} .person-color-4{--person-h:78} .person-color-5{--person-h:215} .person-color-6{--person-h:353} .person-color-7{--person-h:130} .person-color-8{--person-h:268} .person-color-9{--person-h:45} .person-color-10{--person-h:183}
.person-color-11{--person-h:320} .person-color-12{--person-h:98} .person-color-13{--person-h:235} .person-color-14{--person-h:13} .person-color-15{--person-h:150} .person-color-16{--person-h:288} .person-color-17{--person-h:65} .person-color-18{--person-h:203} .person-color-19{--person-h:340} .person-color-20{--person-h:118}
.person-color-21{--person-h:255} .person-color-22{--person-h:33} .person-color-23{--person-h:170} .person-color-24{--person-h:308} .person-color-25{--person-h:85} .person-color-26{--person-h:223} .person-color-27{--person-h:0} .person-color-28{--person-h:138} .person-color-29{--person-h:275} .person-color-30{--person-h:53}
.trade-peinture { --trade: var(--t-peinture); } .trade-maconnerie { --trade: var(--t-maconnerie); } .trade-plomberie { --trade: var(--t-plomberie); }
.trade-electricite { --trade: var(--t-electricite); } .trade-manoeuvre { --trade: var(--t-manoeuvre); } .trade-autre { --trade: var(--t-autre); }
.phase-peinture { --phase: var(--g-peinture); } .phase-maconnerie { --phase: var(--g-maconnerie); } .phase-plomberie { --phase: var(--g-plomberie); }
.phase-electricite { --phase: var(--g-electricite); } .phase-finition { --phase: var(--g-finition); } .phase-autre { --phase: var(--g-autre); }
.phase-demolition { --phase: var(--g-demolition); } .phase-platrerie { --phase: var(--g-platrerie); } .phase-menuiserie { --phase: var(--g-menuiserie); }
.phase-sols { --phase: var(--g-sols); } .phase-facade { --phase: var(--g-facade); } .phase-toiture { --phase: var(--g-toiture); }
.status-en_cours { --statut: var(--vert); } .status-bloque { --statut: var(--rouge); } .status-termine { --statut: var(--encre-3); } .status-a_faire { --statut: var(--primaire); }

.bp-color-legend, .bp-map-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.bp-color-legend span, .bp-map-legend span { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--trait); color: var(--encre-2); font-size: 12.5px; font-weight: 600; }
.legend-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; background: var(--trade, var(--phase, var(--statut, var(--site, var(--encre-3))))); }

.bp-site-pill { display: inline-flex; align-items: center; max-width: 100%; padding: 2px 10px; border-radius: 999px; background: var(--site, var(--primaire)); color: var(--texte-site); font: 700 12px/1.6 var(--police); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-trade-pill { display: inline-flex; padding: 1px 9px; border-radius: 999px; background: color-mix(in srgb, var(--trade, var(--t-autre)) 14%, transparent); color: color-mix(in srgb, var(--trade, var(--t-autre)) 75%, var(--encre)); font: 700 11.5px/1.7 var(--police); }
.bp-person-dot { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: 2px -4px 2px 0; border-radius: 50%; background: var(--person, var(--primaire)); color: var(--texte-site); font: 700 10.5px var(--police); border: 2px solid var(--surface); vertical-align: middle; }
.bp-team-count { margin-left: 12px; color: var(--encre-3); font-size: 12px; font-weight: 600; }
.bp-loss { color: var(--rouge); } .bp-profit { color: var(--vert); }

/* ═══ 11. Planning ═══════════════════════════════════════════════════ */
.bp-planner-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 18px; }
.bp-period-nav { display: flex; align-items: center; gap: 8px; }
.bp-period-nav strong { margin-left: 8px; font: 800 22px var(--police-titre); text-transform: uppercase; letter-spacing: .03em; }
.bp-period-nav .btn-plat { width: 40px; padding: 0; font-size: 22px; border: 1.5px solid var(--trait-fort); }
.bp-period-tabs { display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--surface-3); }
.bp-period-tabs button { min-width: 84px; padding: 8px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--encre-2); font: 700 13.5px var(--police); cursor: pointer; transition: var(--transition); }
.bp-period-tabs button:hover { color: var(--encre); }
.bp-period-tabs button.active { background: var(--surface); color: var(--primaire); box-shadow: 0 2px 10px rgba(10, 20, 70, .1); }
.bp-planner-filters { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 16px 18px; }
.bp-planner-filters > strong { align-self: center; font-weight: 700; color: var(--encre-2); }
.bp-planner-filter-fields { display: flex; flex-wrap: wrap; gap: 12px; flex: 1; }
.bp-planner-filter-fields label { flex: 1 1 180px; }
.bp-planner-hint { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: var(--jaune-pale); color: var(--jaune-texte); font-weight: 700; }
.bp-planner-section .bp-table th { text-align: center; }
.bp-planner-section .bp-table th:first-child { text-align: left; }
.bp-table .bp-period-row th { position: static; padding: 10px 12px; background: var(--surface); border-bottom: 1px solid var(--trait); text-align: left; text-transform: none; letter-spacing: 0; color: var(--encre); }
.bp-period-strip { position: sticky; left: 12px; width: var(--strip-w, auto); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bp-period-strip strong { flex: 1; text-align: center; font: 800 19px var(--police-titre); letter-spacing: .03em; text-transform: uppercase; color: var(--encre); }
.bp-period-strip .btn { min-height: 38px; padding: 6px 14px; font-size: 13.5px; border-width: 1.5px; border-radius: 10px; }
.bp-period-strip .btn .bp-ico { width: 18px; height: 18px; stroke-width: 2.2; }
.bp-table .bp-meteo-row th { position: static; padding: 8px 6px; background: var(--surface); border-bottom: 1px solid var(--trait); text-align: center; vertical-align: middle; text-transform: none; letter-spacing: 0; color: var(--encre); }
.bp-table .bp-meteo-row th:first-child { text-align: left; padding-left: 14px; }
.bp-meteo-titre { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--encre-2); font: 700 11.5px var(--police); letter-spacing: .07em; text-transform: uppercase; }
.bp-meteo-titre .bp-ico { width: 15px; height: 15px; color: var(--orange); }
#planning-meteo-site { width: 100%; max-width: 230px; min-height: 32px; padding: 4px 30px 4px 9px; border-width: 1.5px; font-size: 12.5px; }
.bp-meteo { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--primaire-pale); white-space: nowrap; }
.bp-meteo i { font-style: normal; font-size: 17px; line-height: 1; }
.bp-meteo b { font: 800 14px var(--police); color: var(--encre); }
.bp-meteo small { color: var(--encre-3); font: 600 12px var(--police); }
.bp-meteo-row em { display: block; margin-top: 3px; color: var(--encre-3); font: 600 11px var(--police); font-style: normal; }
.bp-meteo-row th.pluie .bp-meteo { background: color-mix(in srgb, var(--g-plomberie) 18%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-plomberie) 40%, transparent); }
.bp-meteo-row th.pluie em { color: var(--g-plomberie); font-weight: 800; }
.bp-meteo-vide { color: var(--encre-3); cursor: help; }
.bp-meteo-erreur { display: block; max-width: 230px; margin-top: 4px; color: var(--rouge); font-weight: 600; white-space: normal; }
.bp-weather-inline { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--primaire-pale); color: var(--primaire); font: 700 11px var(--police); text-transform: none; letter-spacing: 0; }

.bp-employee-name { min-width: 180px; position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: inset 4px 0 0 var(--person, var(--primaire)); }
.bp-employee-name b { display: block; }
.bp-employee-name small { color: var(--encre-3); }
.bp-week-cell { min-width: 124px; vertical-align: top !important; padding: 6px !important; border-left: 1px solid var(--trait); }
.bp-week-cell.drop-target { background: var(--primaire-pale); box-shadow: inset 0 0 0 2px var(--primaire); }
.bp-week-assignment {
  display: flex; flex-direction: column; gap: 3px;
  padding: 5px 7px 5px 8px; border-radius: 8px;
  background: color-mix(in srgb, var(--person, var(--primaire)) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--person, var(--primaire)) 28%, transparent);
  border-left: 4px solid var(--trade, var(--t-autre));
  font-size: 12px; cursor: pointer; transition: transform var(--transition), box-shadow var(--transition);
}
.bp-week-assignment[draggable="true"] { cursor: grab; }
.bp-week-block { position: relative; padding-right: 27px; }
.bp-resize-handle { position: absolute; top: 5px; right: 4px; bottom: 5px; width: 20px; border: 0; border-radius: 6px; background: color-mix(in srgb, var(--person, var(--primaire)) 14%, var(--surface)); color: var(--primaire); font: 800 18px/1 var(--police); cursor: ew-resize; touch-action: none; }
.bp-resize-handle:hover, .bp-resize-handle.resizing { background: var(--primaire); color: #fff; }
.bp-day-hours { display: block; margin: 0 0 5px; color: var(--primaire); font-size: 10px; font-weight: 800; }
.bp-quick-add { display: flex; justify-content: space-evenly; gap: 3px; margin-top: 2px; padding-top: 2px; border-top: 1px dashed var(--trait); }
.bp-quick-add button { min-width: 38px; padding: 3px 5px; border: 0; border-radius: 6px; background: transparent; color: var(--primaire); font: 700 10px var(--police); cursor: pointer; }
.bp-quick-add button:hover { background: var(--primaire-pale); }
.bp-week-assignment:hover { transform: translateY(-1px); box-shadow: var(--ombre-carte); }
.bp-week-assignment + .bp-week-assignment { margin-top: 6px; }
.bp-week-assignment small { color: var(--encre-2); font-weight: 600; }
.bp-week-assignment small:not(.bp-assignment-summary), .bp-week-assignment > b { display: none; }
.bp-week-assignment .bp-assignment-summary { overflow: hidden; color: var(--encre-3); font-size: 10.5px; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.bp-week-assignment .bp-site-pill { max-width: calc(100% - 2px); padding: 1px 8px; font-size: 11px; line-height: 1.45; }
.bp-week-assignment.dragging { opacity: .4; }
.bp-add-cell { width: 30px; height: 30px; display: block; margin: 4px auto; border-radius: 50%; border: 1.5px dashed var(--trait-fort); background: transparent; color: var(--encre-3); font: 600 18px/1 var(--police); cursor: pointer; transition: var(--transition); }
.bp-add-cell:hover { border-style: solid; border-color: var(--primaire); background: var(--primaire); color: #fff; transform: scale(1.08); }
.bp-notifications-wrap { position: relative; }
.bp-notification-button { position: relative; }
.bp-notification-button > span { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border-radius: 99px; background: var(--rouge); color: #fff; font: 800 10px var(--police); }
.bp-notification-menu { position: absolute; z-index: 30; top: calc(100% + 10px); right: 0; width: min(360px, calc(100vw - 28px)); max-height: min(70vh, 520px); overflow: auto; padding: 8px; border: 1px solid var(--trait); border-radius: 14px; background: var(--surface); box-shadow: var(--ombre-carte); }
.bp-notification-menu[hidden] { display: none; }
.bp-notification-menu > header { position: sticky; top: -8px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px; background: var(--surface); border-bottom: 1px solid var(--trait); }
.bp-notification-item { display: block; width: 100%; padding: 10px; border: 0; border-radius: 9px; background: transparent; color: var(--encre); text-align: left; cursor: pointer; }
.bp-notification-item:hover, .bp-notification-item.unread { background: var(--primaire-pale); }
.bp-notification-item b, .bp-notification-item span, .bp-notification-item small { display: block; }
.bp-notification-item span { margin-top: 4px; color: var(--encre-2); font-size: 12px; }
.bp-notification-item small { margin-top: 5px; color: var(--encre-3); font-size: 10px; }
.bp-notification-empty { padding: 12px; color: var(--encre-3); text-align: center; }
.bp-day-empty { display: block; text-align: center; color: var(--encre-3); }
.bp-planning-row td:first-child { box-shadow: inset 4px 0 0 var(--person, var(--primaire)); }
.bp-site-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.bp-site-summary { padding: 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--trait); }
.bp-site-summary p { margin: 10px 0 0; }
.bp-weather-strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0; }
.bp-weather-day { min-width: 92px; display: grid; justify-items: center; gap: 2px; padding: 12px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--trait); text-align: center; font-size: 12px; }
.bp-weather-icon { font-size: 26px; }
.bp-weather-error { padding: 14px; border-radius: 10px; background: var(--rouge-pale); color: var(--rouge); }

/* ═══ 12. Gantt des phases ═══════════════════════════════════════════ */
.bp-gantt-barre { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.bp-gantt-barre .filter-label { flex: 0 1 170px; }
.bp-gantt-barre .bp-gantt-site { flex: 1 1 240px; }
.bp-gantt-commandes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.bp-gantt-commandes .bp-period-tabs button { min-width: 0; }
.bp-gantt-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 18px 0 14px; }
.bp-gantt-kpis > div { display: grid; gap: 2px; align-content: start; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--trait); }
.bp-gantt-kpis small { color: var(--encre-3); font: 700 10.5px var(--police); letter-spacing: .08em; text-transform: uppercase; }
.bp-gantt-kpis b { font: 800 21px/1.15 var(--police-titre); letter-spacing: .01em; color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-gantt-kpis span { color: var(--encre-3); font-size: 12px; }
.bp-gantt-kpis .alerte { background: var(--rouge-pale); border-color: color-mix(in srgb, var(--rouge) 35%, transparent); }
.bp-gantt-kpis .alerte b { color: var(--rouge); }
.bp-gx-jauge { display: block; height: 6px; margin-top: 6px; border-radius: 6px; background: var(--trait); overflow: hidden; }
.bp-gx-jauge i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--primaire), var(--cyan)); }
.bp-gantt-legend { margin: 0 0 12px; }
.bp-gantt-legend span { gap: 8px; padding-left: 4px; }
.bp-leg { width: 14px; height: 11px; display: inline-block; border-radius: 3px; }
.bp-leg.retard { border: 2px solid var(--rouge); }
.bp-leg.bloque { background: repeating-linear-gradient(-45deg, var(--rouge) 0 2px, var(--rouge-pale) 2px 5px); }
.bp-leg.auj { width: 3px; height: 14px; border-radius: 2px; background: var(--orange); }
.bp-leg.ferie { background: repeating-linear-gradient(-45deg, var(--trait-fort) 0 1.5px, var(--surface-3) 1.5px 4px); border: 1px solid var(--trait-fort); }
.bp-gantt-aide { margin: 12px 0 0; color: var(--encre-3); font-size: 13px; }

/* Tableau : en-tête bleu nuit, Désignation · Durée · semaines S1, S2… */
.bp-gantt-viewport { position: relative; overflow: auto; max-height: 72vh; border: 2px solid var(--g-entete); border-radius: 10px; background: var(--surface); overscroll-behavior: contain; }
.bp-gx {
  --entete: 56px;
  position: relative; display: grid;
  grid-template-columns: var(--gauche) calc(var(--nb) * var(--jour));
  grid-template-rows: var(--entete); grid-auto-rows: var(--ligne);
  width: max-content;
}
.bp-gx.avec-jours { --entete: 86px; }
.bp-gx-coin {
  position: sticky; top: 0; left: 0; z-index: 5;
  display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: center;
  background: var(--g-entete); color: #fff; border-right: 2px solid rgba(255, 255, 255, .9);
  font: 700 17px var(--police);
}
.bp-gx-coin span { display: grid; place-items: center; height: 100%; }
.bp-gx-coin span + span { border-left: 1px solid rgba(255, 255, 255, .35); }
.bp-gx-entete { position: sticky; top: 0; z-index: 4; display: grid; grid-template-rows: 1fr; background: var(--g-entete); color: #fff; }
.bp-gx.avec-jours .bp-gx-entete { grid-template-rows: 1fr 32px; }
.bp-gx-semaines { position: relative; }
.bp-gx-semaines span { position: absolute; top: 0; bottom: 0; left: calc(var(--d) * var(--jour)); width: calc(var(--n) * var(--jour)); display: grid; place-content: center; justify-items: center; line-height: 1.1; overflow: hidden; white-space: nowrap; border-left: 1px solid rgba(255, 255, 255, .35); }
.bp-gx-semaines span:first-child { border-left: 0; }
.bp-gx-semaines b { font: 700 18px var(--police); }
.bp-gx-semaines small { color: rgba(255, 255, 255, .62); font: 600 11px var(--police); }
.bp-gx-jours { position: relative; display: flex; background: rgba(255, 255, 255, .07); border-top: 1px solid rgba(255, 255, 255, .18); }
.bp-gx.avec-equipe { --entete: 92px; }
.bp-gx.avec-jours.avec-equipe { --entete: 122px; }
.bp-gx.avec-equipe .bp-gx-entete { grid-template-rows: 1fr 34px; }
.bp-gx.avec-jours.avec-equipe .bp-gx-entete { grid-template-rows: 1fr 32px 34px; }
.bp-gx-equipe { display: flex; background: rgba(255, 255, 255, .12); border-top: 1px solid rgba(255, 255, 255, .18); }
.bp-gx-equipe span { flex: 0 0 var(--jour); display: grid; place-content: center; justify-items: center; line-height: 1; color: #fff; font: 700 11px var(--police); }
.bp-gx-equipe .bp-ico { width: 13px; height: 13px; fill: #00E3DD; stroke: none; }
.bp-gx-equipe b { font: 800 11.5px var(--police); }
.bp-gx-equipe span.vide { color: rgba(255, 255, 255, .3); }
.bp-gx-equipe span.auj b { color: #FFB38A; }
.bp-gx-coin-equipe { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: rgba(255, 255, 255, .12); border-top: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .88); font: 600 12.5px var(--police); font-style: normal; }
.bp-gx-coin-equipe .bp-ico { width: 16px; height: 16px; color: #00E3DD; }
.bp-gx-sous .bp-tete { width: 18px; height: 18px; flex-basis: 18px; border: 0; }
.bp-gx-sous .bp-tete .bp-ico { width: 14px; height: 14px; margin-top: 5px; }
.bp-gx-plage { position: absolute; display: none; left: calc(var(--hd, 0) * var(--jour)); width: calc(var(--hn, 0) * var(--jour)); pointer-events: none; }
.bp-gx.survol .bp-gx-plage { display: block; }
.bp-gx-jours .bp-gx-plage { top: 2px; bottom: 2px; border-radius: 7px; background: rgba(0, 227, 221, .28); box-shadow: inset 0 0 0 2px #00E3DD; }
.bp-gx-fond .bp-gx-plage { z-index: 1; top: 0; bottom: 0; background: color-mix(in srgb, var(--cyan) 10%, transparent); border-left: 1.5px solid var(--cyan); border-right: 1.5px solid var(--cyan); }
.bp-gx-jours span { flex: 0 0 var(--jour); display: grid; place-content: center; justify-items: center; line-height: 1.05; font: 700 11.5px var(--police); color: #fff; }
.bp-gx-jours small { color: rgba(255, 255, 255, .6); font: 700 9px var(--police); text-transform: uppercase; }
.bp-gx-jours span.we { color: rgba(255, 255, 255, .45); }
.bp-gx-jours span.ferie { color: #FFB38A; }
.bp-gx-jours span.auj { position: relative; color: #fff; }
.bp-gx-jours span.auj::before { content: ""; position: absolute; z-index: -1; inset: 3px 2px; border-radius: 7px; background: var(--orange); }

/* Fond : un jour = une colonne en pointillés, une semaine = un trait plein */
.bp-gx-fond { position: absolute; z-index: 0; left: var(--gauche); top: var(--entete); width: calc(var(--nb) * var(--jour)); height: calc(var(--lignes) * var(--ligne)); display: flex; pointer-events: none; }
.bp-gx-fond > i { flex: 0 0 var(--jour); border-left: 1px dashed color-mix(in srgb, var(--encre) 13%, transparent); }
.bp-gx-fond > i:first-child, .bp-gx-fond > i.lundi { border-left: 1px solid var(--g-ligne); }
.bp-gx-fond > i.we { background: color-mix(in srgb, var(--surface-3) 70%, transparent); }
.bp-gx-fond > i.ferie { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--orange) 26%, transparent) 0 1px, transparent 1px 6px), var(--orange-pale); }
.bp-gx-auj { position: absolute; z-index: 2; top: 0; bottom: 0; left: calc((var(--d) + .5) * var(--jour) - 1px); width: 2px; background: var(--orange); opacity: .85; }
.bp-gx-delai-ligne { position: absolute; z-index: 2; top: 0; left: calc(var(--d) * var(--jour) - 1px); height: calc(100% + var(--ligne)); border-left: 2.5px dashed var(--encre); }
.bp-gx-liens { position: absolute; z-index: 1; left: 0; top: 0; overflow: visible; }
.bp-gx-liens path { fill: none; stroke: var(--encre-2); stroke-width: 1.6; }
.bp-gx-liens path.conflit { stroke: var(--rouge); stroke-dasharray: 4 3; }
.bp-gx-liens marker path { fill: var(--encre-2); stroke: none; }
.bp-gx-liens marker.conflit path { fill: var(--rouge); }

/* Colonne Désignation : pastille ronde du lot, intitulé, durée en gros */
.bp-gx-label {
  position: sticky; left: 0; z-index: 3;
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 64px; align-items: center; gap: 0 12px;
  padding-left: 12px; background: var(--surface);
  border-right: 2px solid var(--g-entete); border-bottom: 1px solid var(--g-ligne);
  cursor: pointer; transition: background var(--transition);
}
.bp-gx-label:hover { background: var(--surface-2); }
.bp-gx-pastille { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--phase, var(--g-autre)); color: #fff; box-shadow: 0 3px 8px color-mix(in srgb, var(--phase, var(--g-autre)) 35%, transparent); }
.bp-gx-pastille .bp-ico { width: 21px; height: 21px; stroke-width: 2; }
.bp-gx-pastille.mini { width: 20px; height: 20px; box-shadow: none; }
.bp-gx-pastille.mini .bp-ico { width: 12px; height: 12px; stroke-width: 2.4; }
.bp-gx-titre { display: grid; gap: 2px; min-width: 0; line-height: 1.2; }
.bp-gx-titre b { font: 700 14.5px var(--police); color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-gx-titre small { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--encre-2); font-size: 11.5px; white-space: nowrap; }
.bp-gx-titre small > span { overflow: hidden; text-overflow: ellipsis; }
.bp-gx-dates { font-weight: 700; color: var(--encre); }
.bp-gx-sous { color: var(--encre-3) !important; }
.bp-gx-dep { display: inline-flex; align-items: center; gap: 3px; min-width: 0; color: var(--primaire); font-weight: 600; }
.bp-gx-dep .bp-ico { width: 12px; height: 12px; flex: 0 0 12px; stroke-width: 2.2; }
.bp-gx-etat { flex: 0 0 auto; padding: 0 7px; border-radius: 999px; font: 700 10.5px/1.6 var(--police); }
.bp-gx-etat.a_faire { background: var(--surface-3); color: var(--encre-2); }
.bp-gx-etat.en_cours { background: var(--primaire-pale); color: var(--primaire); }
.bp-gx-etat.bloque { background: var(--rouge); color: #fff; }
.bp-gx-etat.retard { background: var(--rouge-pale); color: var(--rouge); box-shadow: inset 0 0 0 1px var(--rouge); }
.bp-gx-etat.termine { background: var(--vert-pale); color: var(--vert); }
.bp-gx-duree { display: grid; place-items: center; height: 100%; border-left: 1px solid var(--g-ligne); color: var(--encre); font: 800 22px var(--police); }
.bp-gx-outils { position: absolute; right: 70px; top: 50%; transform: translateY(-50%); display: flex; gap: 4px; padding-left: 14px; background: linear-gradient(90deg, transparent, var(--surface-2) 14px); opacity: 0; transition: opacity var(--transition); }
.bp-gx-outils button { width: 30px; height: 30px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--surface); color: var(--encre-2); cursor: pointer; transition: var(--transition); }
.bp-gx-outils .bp-ico { width: 16px; height: 16px; }
.bp-gx-outils button:hover { background: var(--primaire); border-color: var(--primaire); color: #fff; }
.bp-gx-label:hover .bp-gx-outils, .bp-gx-outils:focus-within { opacity: 1; }
@media (hover: none) { .bp-gx-outils { opacity: 1; } }

/* Barres pleines, une couleur par lot */
.bp-gx-piste { position: relative; z-index: 1; border-bottom: 1px solid var(--g-ligne); }
.bp-gx-barre {
  --c: var(--phase, var(--g-autre));
  position: absolute; top: 17px; bottom: 17px;
  left: calc(var(--d) * var(--jour) + 1px); width: calc(var(--n) * var(--jour) - 2px); min-width: 6px;
  display: flex; align-items: center; justify-content: flex-end; padding: 0 8px;
  border-radius: 3px; background: var(--c); color: #fff; font: 800 12px var(--police);
  cursor: grab; user-select: none; outline-offset: 3px;
  transition: box-shadow var(--transition), filter var(--transition);
}
.bp-gx-barre:hover { filter: brightness(1.06); box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 40%, transparent); }
.bp-gx-barre:focus-visible { outline: 3px solid var(--primaire-doux); }
.bp-gx-barre.phase-electricite { color: #0A1446; }
.bp-gx-barre em { position: relative; z-index: 1; font-style: normal; pointer-events: none; }
.bp-gx-bdates { position: relative; z-index: 1; margin-right: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 11.5px var(--police); opacity: .92; pointer-events: none; }
.bp-gx-barre.status-termine .bp-gx-bdates { margin-left: 14px; }
.bp-gx-jdate { position: absolute; top: 50%; left: calc(var(--d) * var(--jour) + var(--jour) / 2 - 20px); transform: translate(-100%, -50%); color: var(--encre); font: 700 12.5px var(--police); white-space: nowrap; pointer-events: none; }
.bp-gx-avance { position: absolute; left: 0; bottom: 0; height: 4px; width: var(--p); border-radius: 0 0 0 3px; background: rgba(255, 255, 255, .78); pointer-events: none; }
.bp-gx-barre.phase-electricite .bp-gx-avance { background: rgba(10, 20, 70, .55); }
.bp-gx-barre.status-termine::before { content: "✓"; position: absolute; left: 8px; font-weight: 800; }
.bp-gx-barre.status-bloque { background: repeating-linear-gradient(-45deg, var(--c) 0 7px, color-mix(in srgb, var(--c) 55%, #fff) 7px 12px); box-shadow: inset 0 0 0 2px var(--rouge); }
.bp-gx-barre.retard { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--rouge); }
.bp-gx-barre.jalon { left: calc(var(--d) * var(--jour) + var(--jour) / 2 - 11px); width: 22px; min-width: 0; top: 21px; bottom: auto; height: 22px; padding: 0; border-radius: 3px; transform: rotate(45deg); }
.bp-gx-poignee { position: absolute; z-index: 2; top: -3px; bottom: -3px; width: 10px; cursor: ew-resize; touch-action: none; }
.bp-gx-poignee.debut { left: -5px; }
.bp-gx-poignee.fin { right: -5px; }
.bp-gx-poignee::after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 16px; margin: -8px 0 0 -2px; border-radius: 2px; background: var(--encre); opacity: 0; transition: opacity var(--transition); }
.bp-gx-barre:hover .bp-gx-poignee::after { opacity: .7; }
.bp-gx-barre.glisse { z-index: 6; cursor: grabbing; opacity: .9; box-shadow: 0 12px 28px rgba(10, 20, 70, .3); }
.bp-gx-bulle { position: fixed; z-index: 1100; transform: translate(-50%, calc(-100% - 16px)); padding: 6px 12px; border-radius: 8px; background: var(--marine); color: #fff; font: 700 12.5px var(--police); white-space: nowrap; pointer-events: none; box-shadow: var(--ombre-haute); }

/* Pied : repère « Fin du délai » */
.bp-gx-pied-g { position: sticky; left: 0; z-index: 3; display: flex; align-items: center; padding: 0 16px; background: var(--surface); border-right: 2px solid var(--g-entete); color: var(--encre-3); font-size: 13.5px; }
.bp-gx-pied { position: relative; }
.bp-gx-delai { position: absolute; top: 50%; right: calc((var(--nb) - var(--d)) * var(--jour) + 34px); transform: translateY(-50%); display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 14px; border: 2px solid var(--g-finition); border-radius: 8px; background: var(--surface); color: var(--encre); font: 700 15px var(--police); white-space: nowrap; }
.bp-gx-delai small { color: var(--encre-3); font-weight: 600; }
.bp-gx-delai::after { content: ""; position: absolute; left: 100%; top: 50%; width: 28px; height: 2px; background: var(--g-finition); }
.bp-gx-delai::before { content: ""; position: absolute; left: calc(100% + 22px); top: 50%; margin-top: -5px; border: 5px solid transparent; border-left: 8px solid var(--g-finition); }

/* ═══ 13. Carte ══════════════════════════════════════════════════════ */
.map-dot { width: 12px; height: 12px; display: inline-block; border-radius: 50%; border: 3px solid var(--marqueur); background: var(--surface); }
.map-dot.current, .bp-map-marker.current { --marqueur: var(--vert); }
.map-dot.upcoming, .bp-map-marker.upcoming { --marqueur: var(--primaire); }
.map-dot.past, .bp-map-marker.past { --marqueur: var(--encre-3); }
.map-dot.depot, .bp-map-marker.depot, .bp-map-marker.garage, .bp-map-marker.entrepot { --marqueur: var(--orange); }
.bp-map-marker.garage { --marqueur: #f07832; }
.bp-map-marker.entrepot { --marqueur: #7654d6; }
.map-dot.depot { border-radius: 3px; }
.map-symbol { display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 7px; color: var(--marqueur); background: color-mix(in srgb,var(--marqueur) 12%,white); }
.map-symbol.garage { --marqueur: #f07832; }
.map-symbol.depot { --marqueur: var(--orange); }
.map-symbol svg { width: 15px; height: 15px; }
.bp-map-card { padding: 0; overflow: hidden; }
#bp-map { width: 100%; height: min(64vh, 620px); }
.bp-map-marker { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border-radius: 13px; transform: none; border: 2px solid #fff; background: var(--marqueur); color: #fff; box-shadow: 0 5px 15px rgba(10, 20, 70, .32); cursor: pointer; transition: transform .15s ease,box-shadow .15s ease; }
.bp-map-marker:hover,.bp-map-marker:focus-visible { transform: translateY(-2px) scale(1.08); box-shadow: 0 8px 18px rgba(10, 20, 70, .4); outline: 2px solid color-mix(in srgb,var(--marqueur) 45%,white); outline-offset: 2px; }
.bp-map-marker .bp-ico { width: 21px; height: 21px; stroke-width: 2.1; }
.bp-map-marker.current { --marqueur: #17a673; }
.bp-map-marker.upcoming { --marqueur: #315efb; }
.bp-map-marker.past { --marqueur: #7f8aa5; }
.bp-map-marker.garage { --marqueur: #f07832; }
.bp-map-marker.entrepot { --marqueur: #7654d6; }
.bp-map-popup { min-width: 240px; }
.bp-map-popup-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 15px; }
.bp-map-popup-title .bp-ico { width: 21px; height: 21px; flex: 0 0 auto; color: var(--primaire); }
.bp-map-popup-meta { display: grid; gap: 6px; color: #566182; font-size: 12px; }
.bp-map-popup-meta > span { display: flex; align-items: center; gap: 6px; }
.bp-map-popup-meta .bp-ico { width: 15px; height: 15px; flex: 0 0 auto; color: #7180a4; }
.bp-map-kind-tag { width: max-content; padding: 3px 8px; border-radius: 999px; background: #fff1e6; color: #ad5218; font-weight: 700; }
.bp-map-kind-tag.entrepot { background: #f0ebff; color: #6044bd; }
.bp-map-finances { display: grid; gap: 5px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #e5eaf4; font-size: 12px; }
.bp-map-finances span { display: flex; justify-content: space-between; gap: 14px; color: #64708f; }
.bp-map-finances b { color: #15214f; white-space: nowrap; }
.bp-map-error { padding: 14px 18px; color: var(--rouge); font-weight: 600; }
.bp-map-credit { color: var(--encre-3); font-size: 12px; }
.maplibregl-popup-content { padding: 12px 14px !important; border-radius: 12px !important; font: 14px/1.45 var(--police); color: #0A1446; box-shadow: var(--ombre-haute) !important; }
.maplibregl-popup-content b { font-size: 15px; }

/* ═══ 14. Rapports, photos, avant / après ════════════════════════════ */
.bp-report-card { display: grid; gap: 4px; }
.bp-report-card > .bp-head { align-items: flex-start; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid var(--trait); }
.bp-report-card > .bp-head h2 { font: 800 22px var(--police-titre); text-transform: uppercase; letter-spacing: .02em; }
.bp-report-card > .bp-head p { margin-top: 4px; font-size: 14px; }
.bp-report-card > p { margin: 4px 0; color: var(--encre); }
.bp-report-card > p b { color: var(--encre-2); }
.bp-report-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bp-finance-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.bp-finance-row span { padding: 6px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--trait); font-size: 13px; color: var(--encre-2); }
.bp-report-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
.bp-report-photo-grid:has(.bp-photo-list img)::before { content: "Photos du rapport · clique sur une vignette pour parcourir toutes les images"; grid-column: 1 / -1; margin-bottom: -8px; color: var(--encre-3); font-size: 12px; }
.bp-report-photo-group h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.bp-report-photo-group h3 span { padding: 0 8px; border-radius: 999px; background: var(--surface-3); color: var(--encre-2); font-size: 12px; }
.bp-photo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 88px)); gap: 8px; }
.bp-photo-open { display: grid; gap: 4px; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; cursor: zoom-in; color: var(--encre-3); font: 11px var(--police); }
.bp-photo-open small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--trait); transition: transform var(--transition); }
.bp-photo-open:hover .bp-photo { transform: scale(1.025); }
.bp-photo-empty { display: block; padding: 18px; border-radius: 10px; border: 1.5px dashed var(--trait-fort); color: var(--encre-3); text-align: center; }
.bp-photo-gallery-hint { margin: 12px 0 -5px; color: var(--encre-3); font-size: 12px; }
.bp-ba { display: none; }
.bp-ba img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-ba-before-wrap { position: absolute; inset: 0; width: 50%; overflow: hidden; border-right: 3px solid #fff; }
.bp-ba-before-wrap img { width: auto; min-width: 100%; height: 100%; max-width: none; }
.bp-ba-before-wrap::after { content: ""; position: absolute; right: -19px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231748E0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 18px no-repeat; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); z-index: 2; }
.bp-ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 3; margin: 0; }
.bp-ba-label { position: absolute; top: 12px; z-index: 2; padding: 4px 12px; border-radius: 999px; background: rgba(10, 20, 70, .7); color: #fff; font: 700 12px var(--police); letter-spacing: .04em; text-transform: uppercase; backdrop-filter: blur(4px); }
.bp-ba-label-before { left: 12px; }
.bp-ba-label-after { right: 12px; background: var(--cyan); color: var(--sur-cyan); }

.bp-photo-stages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bp-photo-stage { display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: 12px; background: var(--surface-2); border: 1.5px dashed var(--trait-fort); }
.bp-photo-stage-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bp-photo-stage-title b { font-size: 14.5px; color: var(--encre); }
.bp-photo-stage-title small { color: var(--encre-3); font-weight: 500; }
.bp-photo-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.bp-photo-preview:empty { display: none; }
.bp-photo-preview figure { margin: 0; display: grid; gap: 3px; }
.bp-photo-preview figure:has(.bp-photo-delete) { position: relative; }
.bp-photo-thumb { width: 100%; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: zoom-in; }
.bp-photo-preview img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.bp-photo-preview figcaption { font-size: 10.5px; color: var(--encre-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-photo-delete { justify-self: start; padding: 2px 6px; border: 0; border-radius: 6px; background: var(--danger-pale, #fff0f0); color: var(--danger, #a42d35); font: 700 10px var(--police); cursor: pointer; }
.bp-photo-delete:hover { background: var(--danger, #a42d35); color: #fff; }
.bp-photo-viewer { width: min(1120px, 96vw); max-width: none; max-height: 96vh; padding: 0; overflow: visible; border: 0; background: transparent; color: #fff; }
.bp-photo-viewer::backdrop { background: rgba(3, 7, 24, .9); backdrop-filter: blur(5px); }
.bp-photo-viewer-panel { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: 10px; min-height: 320px; }
.bp-photo-viewer-panel figure { display: grid; justify-items: center; gap: 10px; min-width: 0; max-height: 94vh; margin: 0; }
.bp-photo-viewer-panel img { display: block; max-width: 100%; max-height: 82vh; width: auto; height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 12px 44px rgba(0,0,0,.4); }
.bp-photo-viewer-panel figcaption { display: flex; justify-content: space-between; gap: 14px; width: 100%; color: #fff; font-size: 13px; }
.bp-photo-viewer-panel figcaption b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-photo-viewer-panel figcaption small { flex: 0 0 auto; color: rgba(255,255,255,.72); }
.bp-photo-viewer-close, .bp-photo-viewer-arrow { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(255,255,255,.13); color: #fff; cursor: pointer; }
.bp-photo-viewer-close { position: absolute; top: 4px; right: 4px; z-index: 1; font-size: 28px; line-height: 1; }
.bp-photo-viewer-arrow:hover, .bp-photo-viewer-close:hover { background: rgba(255,255,255,.28); }
.bp-photo-viewer-arrow .bp-ico { width: 22px; height: 22px; }
.bp-form label.bp-photo-add, .bp-photo-add {
  position: relative; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: 10px; cursor: pointer;
  background: var(--primaire-pale); color: var(--primaire) !important; border: 1.5px solid color-mix(in srgb, var(--primaire) 30%, transparent);
  font: 700 13.5px var(--police) !important; transition: var(--transition);
}
.bp-photo-add:hover { background: var(--primaire); color: #fff !important; }
.bp-photo-add input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ═══ 15. Mon compte ═════════════════════════════════════════════════ */
.bp-account-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
.bp-profile-card { display: grid; gap: 16px; justify-items: center; text-align: center; }
.bp-profile-card > div:last-child { display: grid; gap: 10px; justify-items: center; }
.bp-profile-card p { color: var(--encre-2); font-size: 14px; }
.bp-profile-avatar { width: 128px; height: 128px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg, var(--primaire), var(--cyan)); color: #fff; font: 800 46px var(--police-titre); box-shadow: 0 0 0 6px var(--surface), 0 0 0 8px var(--primaire-pale), var(--ombre-carte); }
.bp-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bp-profile-help { color: var(--encre-3); }
.bp-account-card h3 { font-size: 17px; margin-top: 4px; }
.bp-account-card > p { color: var(--encre-2); }
.bp-account-divider { height: 1px; margin: 8px 0; background: var(--trait); }
.bp-form label.bp-mfa-option { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--trait); background: var(--surface-2); cursor: pointer; font-weight: 500; transition: var(--transition); }
.bp-mfa-option:has(input:checked) { border-color: var(--primaire); background: var(--primaire-pale); }
.bp-mfa-option input { margin-top: 2px; }
.bp-mfa-option span { display: grid; gap: 2px; }
.bp-mfa-option b { color: var(--encre); font-size: 14.5px; }
.bp-mfa-option small { color: var(--encre-2); font-size: 13px; }

/* ═══ 16. Commentaires ═══════════════════════════════════════════════ */
.bp-comment-list { display: grid; gap: 10px; max-height: 46vh; overflow-y: auto; margin-bottom: 16px; padding-right: 4px; }
.bp-comment { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--trait); }
.bp-comment .bp-comment { margin-top: 10px; background: var(--surface); border-left: 3px solid var(--primaire-doux); }
.bp-comment > header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.bp-comment > header small { color: var(--encre-3); }
.bp-comment > p { margin: 0 0 8px; color: var(--encre); }
.bp-comment > footer { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.bp-comment .btn-petit { min-height: 26px; padding: 2px 8px; border-radius: 999px; }
.bp-react { background: var(--primaire-pale); border-color: transparent; color: var(--primaire); }

/* ═══ 17. Divers : GED, paie, administration ═════════════════════════ */
.bp-month-filter input { min-width: 170px; }
.bp-admin-panel > h2 { margin-bottom: 4px !important; }
.bp-admin-panel > p { margin-bottom: 14px; font-size: 14px; }
.bp-admin-panel .bp-form .btn-principal { justify-self: start; }
.bp-inline-check { display: inline-flex !important; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--encre-2); cursor: pointer; }
.bp-admin-panel td input[type=email], .bp-admin-panel td select { min-width: 200px; min-height: 36px; padding: 6px 10px; }
.bp-ged-toolbar .bp-tag { align-self: center; margin-left: auto; }

/* Sécurité et accès */
.bp-secu-stats .bp-stat.alerte { --accent-stat: var(--rouge); }
.bp-secu-stats .bp-stat.alerte strong { color: var(--rouge); }
.bp-profils { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bp-profil { --p: var(--primaire); display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--trait); border-top: 4px solid var(--p); }
.bp-profil.profil-admin { --p: var(--orange); }
.bp-profil.profil-chef { --p: var(--primaire); }
.bp-profil.profil-salarie { --p: var(--vert); }
.bp-profil.profil-observateur { --p: var(--encre-3); }
.bp-profil > i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--p) 14%, var(--surface)); color: var(--p); }
.bp-profil b { font: 800 18px var(--police-titre); letter-spacing: .03em; text-transform: uppercase; }
.bp-profil p { margin: 0; color: var(--encre-2); font-size: 13.5px; }
.bp-profil small { color: var(--encre-3); font-weight: 600; }
.bp-droits-onglets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.bp-droits-onglets > small { margin: 0 4px 0 8px; color: var(--encre-3); font: 700 11px var(--police); letter-spacing: .08em; text-transform: uppercase; }
.bp-droits-onglets > small:first-child { margin-left: 0; }
.bp-droits-onglets button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--trait-fort); background: var(--surface); color: var(--encre-2); font: 700 13px var(--police); cursor: pointer; transition: var(--transition); }
.bp-droits-onglets button:hover { border-color: var(--primaire); color: var(--primaire); }
.bp-droits-onglets button.actif { background: var(--marine); border-color: var(--marine); color: #fff; }
:root[data-theme="dark"] .bp-droits-onglets button.actif { background: var(--primaire); border-color: var(--primaire); color: var(--sur-primaire); }
.bp-droits-onglets button em { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--surface-3); color: var(--encre-2); font: 800 11px/18px var(--police); font-style: normal; text-align: center; }
.bp-droits-onglets button.actif em { background: rgba(255, 255, 255, .2); color: inherit; }
.bp-matrice-entete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--trait); }
.bp-matrice-entete > div:first-child { display: grid; gap: 2px; }
.bp-matrice-entete b { font: 800 18px var(--police-titre); letter-spacing: .02em; text-transform: uppercase; }
.bp-matrice-entete small { color: var(--encre-3); }
.bp-matrice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.bp-matrice.lecture { grid-template-columns: 1fr; gap: 4px; }
.bp-matrice-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 4px 6px 10px; border-bottom: 1px solid var(--trait); }
.bp-matrice-page { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bp-matrice-page .bp-ico { width: 17px; height: 17px; color: var(--encre-3); }
.bp-matrice-page b { font-size: 14px; font-weight: 600; }
.bp-niveaux { display: inline-flex; flex: 0 0 auto; padding: 3px; gap: 2px; border-radius: 10px; background: var(--surface-3); }
.bp-niveaux button { padding: 5px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--encre-3); font: 700 12px var(--police); cursor: pointer; transition: var(--transition); }
.bp-niveaux button:not(:disabled):hover { color: var(--encre); background: var(--surface); }
.bp-niveaux button:disabled { cursor: default; }
.bp-niveaux button.actif.n0 { background: var(--surface); color: var(--encre-2); box-shadow: 0 1px 4px rgba(10, 20, 70, .12); }
.bp-niveaux button.actif.n1 { background: var(--primaire); color: var(--sur-primaire); }
.bp-niveaux button.actif.n2 { background: var(--vert); color: #fff; }
.bp-niveau { flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; font: 700 12px var(--police); }
.bp-niveau.n0 { background: var(--surface-3); color: var(--encre-3); }
.bp-niveau.n1 { background: var(--primaire-pale); color: var(--primaire); }
.bp-niveau.n2 { background: var(--vert-pale); color: var(--vert); }
.bp-qui { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bp-qui-col { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--trait); border-top: 4px solid var(--encre-3); }
.bp-qui-col.n2 { border-top-color: var(--vert); }
.bp-qui-col.n1 { border-top-color: var(--primaire); }
.bp-qui-col.n0 { border-top-color: var(--rouge); }
.bp-qui-col h3 { flex: 1 0 100%; display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 14px; }
.bp-qui-col h3 span { padding: 0 8px; border-radius: 999px; background: var(--surface-3); font-size: 12px; }
.bp-qui-compte { display: grid; padding: 5px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--trait); font-size: 13px; font-weight: 600; line-height: 1.25; }
.bp-qui-compte small { color: var(--encre-3); font-size: 11px; font-weight: 500; }
.bp-qui-vide { color: var(--encre-3); }
.bp-compte { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.bp-compte span:last-child { display: grid; line-height: 1.25; }
.bp-compte small { color: var(--encre-3); }
.bp-admin-panel tr.inactif td { opacity: .55; }
.bp-admin-panel td select, .bp-admin-panel td input[type=email] { min-width: 150px; min-height: 36px; padding: 6px 30px 6px 10px; font-size: 13px; }
.bp-admin-panel td input[type=email] { padding-right: 10px; min-width: 190px; }
.bp-interrupteur { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--encre-2); cursor: pointer; white-space: nowrap; }
.bp-interrupteur input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bp-interrupteur span { position: relative; width: 38px; height: 22px; flex: 0 0 38px; border-radius: 999px; background: var(--trait-fort); transition: var(--transition); }
.bp-interrupteur span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: var(--transition); }
.bp-interrupteur input:checked + span { background: var(--vert); }
.bp-interrupteur input:checked + span::after { left: 19px; }
.bp-interrupteur input:focus-visible + span { outline: 3px solid var(--primaire-doux); outline-offset: 2px; }
.bp-interrupteur input:disabled + span { opacity: .5; }
.bp-mdp { display: flex; gap: 8px; }
.bp-mdp input { font-family: var(--police-code) !important; letter-spacing: .04em; }
.bp-lecture-seule { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--jaune-pale); color: var(--jaune-texte); font: 700 12px var(--police); font-style: normal; white-space: nowrap; }
.bp-lecture-seule .bp-ico { width: 14px; height: 14px; }
.bp-lecture form, .bp-lecture .bp-react-add, .bp-lecture [data-reply] { display: none !important; }
@media (max-width: 1080px) { .bp-profils { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bp-matrice { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .bp-profils, .bp-qui { grid-template-columns: 1fr; } .bp-niveaux button { padding: 5px 8px; } }

/* ═══ 18. Fenêtres de saisie ═════════════════════════════════════════ */
.bp-modal { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; color: var(--encre); }
.bp-modal::backdrop { background: rgba(6, 11, 43, .55); backdrop-filter: blur(5px); animation: bp-fondu .2s ease; }
@keyframes bp-fondu { from { opacity: 0; } }
.bp-modal-inner { width: min(760px, 94vw); max-height: 90vh; overflow: auto; padding: 0 26px 24px; border-radius: var(--rayon-xl); background: var(--surface); box-shadow: var(--ombre-haute); animation: bp-modal-in .25s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes bp-modal-in { from { transform: translateY(14px) scale(.97); opacity: 0; } }
.bp-modal-inner > header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -26px 18px; padding: 20px 26px 16px; background: var(--surface); border-bottom: 1px solid var(--trait); }
.bp-modal-inner > header h2 { font: 800 24px var(--police-titre); text-transform: uppercase; letter-spacing: .02em; }
.bp-modal-inner > header h2::before { content: ""; display: inline-block; width: 10px; height: 10px; margin: 0 10px 3px 0; border-radius: 3px; background: var(--primaire); box-shadow: 4px 4px 0 var(--cyan); }
.bp-modal .bp-form > footer { position: sticky; bottom: -24px; margin: 4px -26px -24px; padding: 14px 26px 20px; background: linear-gradient(to top, var(--surface) 75%, transparent); }

/* ═══ 19. Visionneuse de plans du chantier ═══════════════════════════ */
.bp-plans-modal .bp-plans { width: min(1320px, 96vw); height: min(880px, 92vh); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border-radius: var(--rayon-xl); background: var(--surface); box-shadow: var(--ombre-haute); animation: bp-modal-in .25s cubic-bezier(.2, .9, .3, 1.1); }
.bp-plans-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--trait); }
.bp-plans-head h2 { font: 800 24px var(--police-titre); text-transform: uppercase; letter-spacing: .02em; }
.bp-plans-head p { margin: 2px 0 0; color: var(--encre-3); font-size: 13.5px; }
.bp-plans-head .bp-actions { align-items: center; }
.bp-plans-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 0; }
.bp-plans-liste { display: flex; flex-direction: column; gap: 10px; padding: 16px; overflow-y: auto; background: var(--surface-2); border-right: 1px solid var(--trait); }
.bp-plans-liste > small { color: var(--encre-3); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.bp-plan-vignette { display: grid; gap: 6px; padding: 8px; border-radius: 12px; border: 2px solid transparent; background: var(--surface); box-shadow: var(--ombre); color: var(--encre); text-align: left; cursor: pointer; transition: var(--transition); }
.bp-plan-vignette:hover { border-color: var(--primaire-doux); }
.bp-plan-vignette.active { border-color: var(--primaire); box-shadow: 0 0 0 4px var(--primaire-pale); }
.bp-plan-mini { display: grid; place-items: center; height: 120px; overflow: hidden; border-radius: 8px; background: #fff; border: 1px solid var(--trait); }
.bp-plan-mini img { width: 100%; height: 100%; object-fit: contain; }
.bp-plan-mini.pdf { background: var(--rouge-pale); color: var(--rouge); font: 800 20px var(--police-titre); letter-spacing: .08em; }
.bp-plan-vignette b { font-size: 13.5px; line-height: 1.25; }
.bp-plan-vignette small { color: var(--encre-3); font-size: 12px; }
.bp-plans-visionneuse { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; background: #0A1446; }
.bp-plans-outils { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 14px; background: rgba(255, 255, 255, .04); border-bottom: 1px solid rgba(255, 255, 255, .08); color: #fff; }
.bp-plans-outils .bp-icon-btn { width: 36px; height: 36px; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); color: #DCE4FF; }
.bp-plans-outils .bp-icon-btn:hover { background: var(--primaire); border-color: var(--primaire); color: #fff; }
.bp-plans-pages:not([hidden]) { display: inline-flex; align-items: center; gap: 4px; padding-right: 8px; margin-right: 4px; border-right: 1px solid rgba(255, 255, 255, .12); }
.bp-plans-zoom { min-width: 58px; text-align: center; font: 700 13px var(--police); color: #DCE4FF; }
.bp-plans-outils .bp-plans-titre { margin-right: auto; font-weight: 700; font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.bp-plans-outils a.btn { min-height: 36px; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #fff; }
.bp-plans-outils a.btn:hover { background: var(--cyan); border-color: var(--cyan); color: var(--sur-cyan); }
.bp-plans-scene {
  position: relative; overflow: hidden; touch-action: none; cursor: grab;
  background-color: #0A1446;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 32px 32px;
}
.bp-plans-scene.glisse { cursor: grabbing; }
.bp-plans-feuille { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.bp-plans-feuille img, .bp-plans-feuille canvas { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.bp-plans-cartouche { position: absolute; right: 16px; bottom: 16px; display: grid; grid-template-columns: repeat(3, auto); margin: 0; overflow: hidden; border-radius: 12px; background: rgba(255, 255, 255, .96); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); color: #0A1446; font-size: 12.5px; pointer-events: none; }
.bp-plans-cartouche div { padding: 8px 14px; border-left: 1px solid #E2E8F6; }
.bp-plans-cartouche div:first-child { border-left: 0; }
.bp-plans-cartouche dt { color: #8A93B2; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bp-plans-cartouche dd { margin: 0; font-weight: 700; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-plans-aide { position: absolute; left: 16px; bottom: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #C9D2F5; font-size: 12px; font-weight: 600; pointer-events: none; }
.bp-plans-vide { display: grid; place-items: center; align-content: center; gap: 14px; height: 100%; padding: 30px; text-align: center; color: #C9D2F5; }
.bp-plans-vide h3 { color: #fff; font: 800 26px var(--police-titre); text-transform: uppercase; letter-spacing: .03em; }
.bp-plans-vide svg { width: 120px; height: 120px; stroke: var(--cyan); fill: none; stroke-width: 1.4; }
.bp-plans-chargement { position: absolute; inset: 0; display: grid; place-items: center; color: #C9D2F5; font-weight: 600; }

/* ═══ 20. Connexion et première ouverture ════════════════════════════ */
.bp-login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr); background: var(--surface); }
.bp-login-visuel {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  padding: 44px 52px; color: #fff;
  background:
    radial-gradient(70% 60% at 85% 10%, rgba(0, 227, 221, .22), transparent 60%),
    radial-gradient(60% 50% at 10% 100%, rgba(23, 72, 224, .55), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 32px 32px,
    #0A1446;
}
.bp-login-visuel .bp-brand { padding: 0; }
.bp-login-visuel .bp-brand-texte small { color: #98A4D3; }
.bp-login-accroche h2 { font: 800 clamp(34px, 3.6vw, 54px)/.98 var(--police-titre); letter-spacing: .015em; text-transform: uppercase; max-width: 560px; }
.bp-login-accroche h2 em { font-style: normal; color: var(--cyan); }
.bp-login-accroche ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; color: #C9D2F5; font-size: 15.5px; }
.bp-login-accroche li { display: flex; gap: 10px; align-items: center; }
.bp-login-accroche li::before { content: ""; flex: 0 0 22px; height: 22px; border-radius: 50%; background: rgba(0, 227, 221, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300E3DD' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.bp-login-plan { position: relative; width: 100%; max-width: 640px; align-self: center; padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.bp-login-plan svg { display: block; width: 100%; height: auto; }
.bp-login-plan .mur { fill: none; stroke: #EAF1FF; stroke-width: 7; }
.bp-login-plan .cloison { fill: none; stroke: #EAF1FF; stroke-width: 3.5; }
.bp-login-plan .fin { fill: none; stroke: rgba(234, 241, 255, .65); stroke-width: 1.4; }
.bp-login-plan .cote { fill: none; stroke: var(--cyan); stroke-width: 1.2; }
.bp-login-plan .reseau { fill: none; stroke: #FF7B6F; stroke-width: 1.6; }
.bp-login-plan .point { fill: #0A1446; stroke: #FF7B6F; stroke-width: 1.6; }
.bp-login-plan text { fill: #EAF1FF; font: 700 12px var(--police-titre); letter-spacing: .1em; }
.bp-login-plan text.petit { fill: rgba(234, 241, 255, .6); font: 600 9.5px var(--police); letter-spacing: .02em; }
.bp-login-plan text.cote-texte { fill: var(--cyan); font: 700 10px var(--police); letter-spacing: .04em; }
.bp-login-plan .trace { stroke-dasharray: 1; stroke-dashoffset: 1; animation: bp-trace 1.6s cubic-bezier(.6, .1, .3, 1) forwards; animation-delay: var(--d, 0s); }
.bp-login-plan .apparait { opacity: 0; animation: bp-apparait .8s ease forwards; animation-delay: var(--d, 0s); }
@keyframes bp-trace { to { stroke-dashoffset: 0; } }
@keyframes bp-apparait { to { opacity: 1; } }
.bp-login-pied { display: flex; flex-wrap: wrap; gap: 8px 22px; color: #98A4D3; font-size: 13px; font-weight: 600; }
.bp-login-pied span { display: inline-flex; align-items: center; gap: 8px; }
.bp-login-pied span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.bp-login-panneau { display: grid; place-items: center; padding: 40px 24px; background: radial-gradient(70% 50% at 50% 0%, var(--primaire-pale), transparent 70%), var(--fond); }
.bp-login-card { width: min(440px, 100%); padding: 34px 32px; border-radius: var(--rayon-xl); background: var(--surface); border: 1px solid var(--trait); box-shadow: 0 10px 40px rgba(23, 72, 224, .16); }
.bp-login-card .bp-eyebrow { box-shadow: none; }
.bp-login-card h1 { font: 800 34px/1 var(--police-titre); letter-spacing: .02em; text-transform: uppercase; }
.bp-login-card h1 em { font-style: normal; color: var(--primaire); }
.bp-login-card > p { margin: 10px 0 22px; color: var(--encre-2); }
.bp-login-card .bp-form > .btn-principal { width: 100%; margin-top: 6px; }
.bp-login-card .bp-note { margin-top: 18px; font-size: 13px; }
.bp-login-securite { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--encre-3); font-size: 12.5px; font-weight: 600; }

/* ═══ 21. Responsive ═════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .bp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-gantt-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bp-trend-chart { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .bp-grid-2, .bp-account-grid { grid-template-columns: 1fr; }
  .bp-login { grid-template-columns: 1fr; }
  .bp-login-visuel { padding: 30px 26px; }
  .bp-login-plan { max-width: 520px; }
  .bp-plans-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .bp-plans-liste { flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--trait); padding: 10px; }
  .bp-plans-liste > small { display: none; }
  .bp-plan-vignette { flex: 0 0 200px; }
  .bp-plan-mini { height: 70px; }
}
@media (max-width: 860px) {
  .bp-shell { grid-template-columns: 1fr; }
  .bp-side { display: none; }
  .bp-mobile-nav { display: flex; }
  .bp-mobile-only { display: inline-grid !important; }
  .bp-top { height: 60px; padding: 0 14px; }
  .bp-top-titre span, .bp-top-date, .bp-account-shortcut > span:last-child { display: none; }
  .bp-account-shortcut { padding: 3px; }
  .bp-content { padding: 18px 14px calc(104px + env(safe-area-inset-bottom)); }
  .bp-head { align-items: flex-start; }
  .bp-actions { width: 100%; }
  .bp-actions .btn { flex: 1 1 auto; }
  .bp-trend-chart { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-report-photo-grid, .bp-photo-stages { grid-template-columns: 1fr; }
  .bp-planner-controls { flex-direction: column; align-items: stretch; }
  .bp-period-tabs { width: 100%; } .bp-period-tabs button { flex: 1; min-width: 0; }
  .bp-plans-modal .bp-plans { width: 100vw; height: 100dvh; border-radius: 0; }
  .bp-plans-head { padding: 12px 14px; flex-wrap: wrap; }
  .bp-plans-cartouche { left: 10px; right: 10px; bottom: 10px; grid-template-columns: 1fr 1fr; }
  .bp-plans-cartouche div:first-child { grid-column: 1 / -1; border-bottom: 1px solid #E2E8F6; }
  .bp-plans-aide { display: none; }
  .bp-modal-inner { width: 100vw; max-height: 92dvh; margin-top: auto; border-radius: 22px 22px 0 0; padding: 0 16px 18px; }
  .bp-modal-inner > header { margin: 0 -16px 16px; padding: 16px; }
  .bp-modal .bp-form > footer { margin: 4px -16px -18px; padding: 12px 16px 18px; }
  .bp-modal .bp-form > footer .btn { flex: 1; }
}
@media (max-width: 700px) {
  .bp-grid, .bp-grid.bp-finance-grid, .bp-grid.bp-planner-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bp-stat { padding: 14px 12px 14px 18px; font-size: 12.5px; }
  .bp-row { grid-template-columns: 1fr; }
  .bp-card { padding: 16px; }
  .bp-filterbar label, .bp-ged-toolbar label { flex: 1 1 100%; }
  .bp-filterbar input[type=date] { width: 100%; }
  .bp-filter-count { margin-left: 0; }
  /* Tableaux empilés en fiches (sauf la grille du planning hebdomadaire) */
  .bp-table.bp-empilable thead { display: block; }
  .bp-table.bp-empilable thead tr:not(.bp-period-row) { display: none; }
  .bp-table.bp-empilable .bp-period-row, .bp-table.bp-empilable .bp-period-row th { display: block; }
  .bp-period-strip .btn span { display: none; }
  .bp-period-strip .btn { width: 42px; padding: 0; }
  .bp-period-strip strong { font-size: 16px; }
  .bp-gantt-kpis { grid-template-columns: 1fr 1fr; }
  .bp-gantt-barre .filter-label { flex: 1 1 140px; }
  .bp-gantt-commandes { width: 100%; margin-left: 0; }
  .bp-gantt-commandes .bp-period-tabs { width: 100%; }
  .bp-gantt-commandes .bp-period-tabs button { flex: 1; padding: 8px 6px; }
  .bp-gantt-commandes > .btn { flex: 1; }
  .bp-gx-coin { grid-template-columns: minmax(0, 1fr) 46px; font-size: 14px; }
  .bp-gx-label { grid-template-columns: 30px minmax(0, 1fr) 46px; gap: 0 8px; padding-left: 8px; }
  .bp-gx-outils { right: 50px; }
  .bp-gx-outils button[data-edit-task] { display: none; }
  .bp-gx-pastille { width: 30px; height: 30px; }
  .bp-gx-pastille .bp-ico { width: 16px; height: 16px; }
  .bp-gx-titre b { font-size: 13px; }
  .bp-gx-titre small > span { display: none; }
  .bp-gx-duree { font-size: 18px; }
  .bp-gx-semaines b { font-size: 15px; }
  .bp-table.bp-empilable, .bp-table.bp-empilable tbody { display: block; }
  .bp-table.bp-empilable tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--trait); }
  .bp-table.bp-empilable tr:last-child { border-bottom: 0; }
  .bp-table.bp-empilable td { display: grid; grid-template-columns: minmax(96px, 36%) minmax(0, 1fr); gap: 10px; padding: 5px 0; border: 0; }
  .bp-table.bp-empilable td::before { content: attr(data-label); color: var(--encre-3); font: 700 11px/1.9 var(--police); letter-spacing: .06em; text-transform: uppercase; }
  .bp-table.bp-empilable td:first-child { grid-template-columns: 1fr; padding-bottom: 8px; font-size: 15px; }
  .bp-table.bp-empilable td:first-child::before { display: none; }
  .bp-table.bp-empilable td[colspan] { display: block; }
  .bp-table.bp-empilable td[colspan]::before { display: none; }
  .bp-table-wrap:has(.bp-empilable) { overflow: visible; }
  .bp-login-visuel { gap: 18px; }
  .bp-login-accroche ul { display: none; }
  .bp-login-plan { display: none; }
  .bp-login-panneau { padding: 20px 14px 32px; align-items: start; }
  .bp-login-card { padding: 26px 20px; }
}
@media (max-width: 420px) {
  .bp-grid, .bp-grid.bp-finance-grid, .bp-grid.bp-planner-kpis { grid-template-columns: 1fr; }
  .bp-trend-chart { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* GED · navigation familière, inspirée de l’Explorateur Windows 11 */
.bp-ged-toolbar { align-items: end; gap: 10px 16px; padding: 14px 16px; border-radius: 12px; }
.bp-ged-toolbar .bp-ged-search-label { display: grid; flex: 1 1 420px !important; gap: 6px; min-width: 0; }
.bp-ged-search-label > span { color: var(--encre-2); font-size: 12px; font-weight: 700; }
.bp-ged-toolbar .bp-ged-search-label input { min-height: 44px; border-radius: 9px; background-color: var(--surface-2); font-size: 14px; }
.bp-ged-toolbar #ged-count { margin-left: 0; }
.bp-ged-search-help { flex: 1 1 100%; margin: -3px 0 0; color: var(--encre-3); font-size: 12px; }
.bp-ged-current-path { margin: 12px 0; padding: 9px 12px; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface); }
.bp-ged-breadcrumb { display: flex; align-items: center; gap: 5px; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.bp-ged-breadcrumb button { padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--encre-2); font: 600 13px var(--police); cursor: pointer; }
.bp-ged-breadcrumb button:hover { background: var(--primaire-pale); color: var(--primaire); }
.bp-ged-breadcrumb button[aria-current="page"] { color: var(--encre); font-weight: 800; }
.bp-ged-separator { color: var(--encre-3); font-size: 19px; line-height: 1; }
.bp-ged-explorer { display: grid; grid-template-columns: minmax(235px, 285px) minmax(0, 1fr); gap: 16px; align-items: start; min-width: 0; }
.bp-ged-explorer > .bp-card { min-width: 0; padding: 18px; border-radius: 16px; box-shadow: 0 5px 18px rgba(25,48,100,.045); }
.bp-ged-tree { align-self: start; background: var(--surface-2); }
.bp-ged-tree-title { display: grid; gap: 3px; padding: 4px 7px 13px; border-bottom: 1px solid var(--trait); }
.bp-ged-tree-title b { color: var(--encre); font-size: 14px; }
.bp-ged-tree-title small { color: var(--encre-3); font-size: 11.5px; }
.bp-ged-tree-node { min-width: 0; }
.bp-ged-tree-children { margin: 2px 0 3px 15px; padding-left: 7px; border-left: 1px solid var(--trait-fort); }
.bp-ged-tree-link { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 40px; margin-top: 3px; padding: 6px 8px; border: 0; border-radius: 9px; background: transparent; color: var(--encre-2); font: 600 12.5px var(--police); text-align: left; cursor: pointer; transition: background var(--transition),color var(--transition); }
.bp-ged-tree-link:hover { background: var(--surface); color: var(--encre); }
.bp-ged-tree-link.active { background: color-mix(in srgb,var(--folder-color,#f6c453) 18%,var(--surface)); color: var(--encre); box-shadow: inset 3px 0 color-mix(in srgb,var(--folder-color,#f6c453) 72%,#bd8521); }
.bp-ged-tree-link > span:last-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-ged-tree-link > small { flex: 0 0 auto; margin-left: auto; color: var(--encre-3); font-size: 10px; }
.bp-ged-tree-caret { width: 10px; color: var(--encre-3); font-size: 15px; text-align: center; }
.bp-ged-folder-icon { display: inline-grid; flex: 0 0 auto; place-items: center; width: 28px; height: 26px; border-radius: 8px; background: color-mix(in srgb,var(--folder-color,#f6c453) 16%,transparent); color: color-mix(in srgb,var(--folder-color,#f6c453) 70%,#75551b); }
.bp-ged-folder-icon svg { width: 23px; height: 21px; fill: color-mix(in srgb,var(--folder-color,#f6c453) 76%,white); stroke: color-mix(in srgb,var(--folder-color,#f6c453) 75%,#75551b); stroke-width: 1.25; stroke-linejoin: round; }
.bp-ged-results { min-height: 300px; overflow: visible; }
.bp-ged-folder-section + .bp-ged-folder-section, .bp-ged-search-group + .bp-ged-search-group { margin-top: 20px; }
.bp-ged-folder-section > h3, .bp-ged-search-group > h3 { display: flex; align-items: center; gap: 8px; margin: 1px 0 10px; color: var(--encre); font-size: 14px; }
.bp-ged-search-group > h3 small { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--surface-3); color: var(--encre-2); font-size: 11px; }
.bp-ged-folder-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,245px),1fr)); gap: 12px; }
.bp-ged-folder { display: flex; align-items: center; gap: 13px; width: 100%; min-width: 0; min-height: 88px; padding: 15px 16px; border: 1px solid color-mix(in srgb,var(--folder-color,#f6c453) 26%,var(--trait)); border-radius: 13px; background: linear-gradient(115deg,color-mix(in srgb,var(--folder-color,#f6c453) 12%,var(--surface)),var(--surface) 72%); color: var(--encre); text-align: left; cursor: pointer; transition: transform var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition); }
.bp-ged-folder:hover { transform: translateY(-2px); border-color: color-mix(in srgb,var(--folder-color,#f6c453) 58%,var(--trait)); background: linear-gradient(115deg,color-mix(in srgb,var(--folder-color,#f6c453) 19%,var(--surface)),var(--surface) 74%); box-shadow: 0 8px 20px rgba(25,48,100,.09); }
.bp-ged-folder:focus-visible,.bp-ged-tree-link:focus-visible { outline: 3px solid color-mix(in srgb,var(--primaire) 55%,transparent); outline-offset: 2px; }
.bp-ged-folder .bp-ged-folder-icon { width: 44px; height: 40px; border-radius: 11px; }
.bp-ged-folder .bp-ged-folder-icon svg { width: 34px; height: 31px; }
.bp-ged-folder-wrap { position: relative; display: flex; align-items: stretch; min-width: 0; }
.bp-ged-folder-wrap > .bp-ged-folder { flex: 1; }
.bp-ged-move-action { align-self: center; flex: 0 0 auto; margin: 0 10px 0 -4px; padding: 7px 10px; border: 1px solid var(--trait); border-radius: 9px; background: var(--surface); color: var(--primaire); font: 700 11px var(--police); cursor: pointer; }
.bp-ged-move-action:hover { border-color: var(--primaire); background: color-mix(in srgb,var(--primaire) 7%,var(--surface)); }
.bp-ged-tree-move { margin: 0; padding: 5px 6px; font-size: 9.5px; }
.bp-ged-drop-target { outline: 3px solid color-mix(in srgb,var(--primaire) 55%,transparent) !important; outline-offset: 2px; background: color-mix(in srgb,var(--primaire) 10%,var(--surface)) !important; }
.bp-ged-file-name[draggable="true"] { cursor: grab; }
.bp-ged-file-name[draggable="true"]:active { cursor: grabbing; }
.bp-ged-color-menu { position: absolute; z-index: 5; top: 6px; right: 6px; }
.bp-ged-color-menu > summary { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid transparent; border-radius: 8px; background: color-mix(in srgb,var(--surface) 85%,transparent); color: var(--encre-2); font-size: 22px; font-weight: 700; line-height: 1; list-style: none; cursor: pointer; opacity: .15; transition: opacity var(--transition),background var(--transition),border-color var(--transition); }
.bp-ged-color-menu > summary::-webkit-details-marker { display: none; }
.bp-ged-folder-wrap:hover .bp-ged-color-menu > summary,.bp-ged-color-menu:focus-within > summary,.bp-ged-color-menu[open] > summary { opacity: 1; }
.bp-ged-color-menu > summary:hover,.bp-ged-color-menu[open] > summary { border-color: var(--trait); background: var(--surface); }
.bp-ged-color-popover { position: absolute; top: 36px; right: 0; width: 190px; padding: 12px; border: 1px solid var(--trait); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 32px rgba(14,28,69,.18); }
.bp-ged-color-popover > b { display: block; margin-bottom: 9px; color: var(--encre); font-size: 11px; }
.bp-ged-move-folder { display: block; width: 100%; margin-top: 10px; padding: 8px 5px; border: 0; border-top: 1px solid var(--trait); background: transparent; color: var(--primaire); font: 700 12px var(--police); text-align: left; cursor: pointer; }
.bp-ged-color-swatches { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.bp-ged-color-swatch { width: 28px; height: 28px; border: 2px solid var(--surface); border-radius: 9px; background: var(--swatch); box-shadow: 0 0 0 1px var(--trait-fort); cursor: pointer; transition: transform var(--transition),box-shadow var(--transition); }
.bp-ged-color-swatch:hover { transform: scale(1.1); }
.bp-ged-color-swatch.selected { box-shadow: 0 0 0 2px var(--primaire); }
.bp-ged-color-swatch:focus-visible { outline: 2px solid var(--primaire); outline-offset: 3px; }
.bp-ged-custom-color { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--trait); color: var(--encre-2); font-size: 11px; }
.bp-ged-custom-color input { width: 28px; height: 26px; padding: 1px; border: 1px solid var(--trait); border-radius: 7px; background: var(--surface); cursor: pointer; }
.bp-ged-custom-color input::-webkit-color-swatch-wrapper { padding: 2px; }
.bp-ged-custom-color input::-webkit-color-swatch { border: 0; border-radius: 4px; }
.bp-ged-tree-row { position: relative; display: flex; align-items: center; min-width: 0; gap: 2px; }
.bp-ged-tree-row .bp-ged-color-menu { position: relative; inset: auto; flex: 0 0 28px; }
.bp-ged-tree-row .bp-ged-color-menu > summary { width: 27px; height: 27px; background: transparent; }
.bp-ged-tree-row .bp-ged-color-menu[open] { z-index: 8; }
.bp-ged-tree-row .bp-ged-color-popover { top: 30px; right: 0; }
.bp-ged-tree-row .bp-ged-tree-link { flex: 1; }
.bp-ged-tree-row .bp-ged-color-menu > summary { opacity: .35; }
.bp-ged-tree-row:hover .bp-ged-color-menu > summary,.bp-ged-tree-row:focus-within .bp-ged-color-menu > summary { opacity: 1; }
.bp-ged-folder-tools { display: flex; justify-content: flex-end; margin: -2px 0 12px; }
.bp-ged-group-access { margin-top: 20px; padding: 16px; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface-2); }
.bp-ged-group-access h3 { margin: 0 0 5px; font-size: 14px; }
.bp-ged-group-access > p { margin: 0 0 12px; color: var(--encre-3); font-size: 12px; }
.bp-ged-group-categories { display: grid; grid-template-columns: repeat(auto-fill,minmax(205px,1fr)); gap: 6px; margin-bottom: 12px; }
.bp-ged-group-categories label { display: flex; align-items: center; gap: 8px; min-height: 35px; padding: 6px 8px; border: 1px solid var(--trait); border-radius: 7px; background: var(--surface); color: var(--encre-2); font-size: 12px; cursor: pointer; }
.bp-ged-group-categories input { accent-color: var(--primaire); }
.bp-ged-item-main { display: grid; gap: 3px; min-width: 0; }
.bp-ged-item-main b { overflow: hidden; color: var(--encre); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.bp-ged-item-main small { overflow: hidden; color: var(--encre-3); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.bp-ged-folder-open { flex: 0 0 auto; margin-left: auto; color: var(--primaire); font-size: 11px; font-weight: 700; }
.bp-ged-list { overflow-x: auto; border: 1px solid var(--trait); border-radius: 9px; }
.bp-ged-list-head, .bp-ged-list-row { display: grid; grid-template-columns: minmax(220px,1fr) minmax(125px,180px) minmax(88px,120px) minmax(110px,150px); align-items: center; gap: 10px; min-width: 630px; padding: 9px 12px; }
.bp-ged-list-head { background: var(--surface-2); color: var(--encre-3); font-size: 10.5px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.bp-ged-list-row { min-height: 58px; border-top: 1px solid var(--trait); background: var(--surface); }
.bp-ged-list-row:hover { background: var(--surface-2); }
.bp-ged-file-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.bp-ged-file-icon { position: relative; display: grid; place-items: center; flex: 0 0 31px; width: 31px; height: 36px; color: var(--primaire); }
.bp-ged-file-icon svg { width: 28px; height: 31px; fill: var(--primaire-pale); stroke: currentColor; stroke-width: 1.5; }
.bp-ged-file-icon i { position: absolute; bottom: -1px; padding: 1px 3px; border-radius: 3px; background: var(--primaire); color: #fff; font: 800 7px var(--police); font-style: normal; }
.bp-ged-file-row .bp-ged-item-main b { font-size: 12.5px; }
.bp-ged-type, .bp-ged-date { overflow: hidden; color: var(--encre-2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.bp-ged-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.bp-ged-actions .btn-petit { min-height: 29px; padding: 3px 8px; }
.bp-ged-search-summary { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 15px; color: var(--encre); font-size: 13px; }
.bp-ged-search-summary span { color: var(--encre-3); font-size: 12px; }
.bp-ged-empty { display: grid; justify-items: center; gap: 7px; padding: 46px 15px; color: var(--encre-2); text-align: center; }
.bp-ged-empty > span { width: 42px; height: 42px; }
.bp-ged-empty svg { width: 42px; height: 42px; fill: var(--primaire-pale); stroke: var(--primaire); stroke-width: 1.2; }
.bp-ged-empty b { color: var(--encre); font-size: 14px; }
.bp-ged-empty small { color: var(--encre-3); font-size: 12px; }
@media (max-width: 860px) {
  .bp-ged-explorer { grid-template-columns: minmax(0,1fr); }
  .bp-ged-tree { max-height: 235px; overflow-y: auto; }
  .bp-ged-results { min-height: 230px; }
  .bp-ged-toolbar .bp-ged-search-label { flex-basis: 100% !important; }
  .bp-ba { height: min(55vw, 260px); }
  .bp-photo-viewer-panel { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 4px; }
  .bp-photo-viewer-arrow { width: 40px; height: 40px; }
}
@media (max-width: 560px) {
  .bp-ged-explorer { gap: 10px; }
  .bp-ged-explorer > .bp-card { padding: 13px; border-radius: 13px; }
  .bp-ged-folder-grid { gap: 9px; }
  .bp-ged-folder { min-height: 78px; padding: 12px; }
  .bp-ged-color-menu > summary,.bp-ged-tree-row .bp-ged-color-menu > summary { opacity: 1; }
  .bp-ged-color-popover { width: 178px; }
  .bp-photo-list { grid-template-columns: repeat(auto-fill, minmax(76px, 92px)); }
  .bp-photo-viewer { width: 100vw; max-width: 100vw; }
  .bp-photo-viewer-panel { grid-template-columns: 36px minmax(0,1fr) 36px; gap: 2px; min-height: 240px; }
  .bp-photo-viewer-panel img { max-height: 78vh; }
  .bp-photo-viewer-arrow { width: 34px; height: 38px; }
  .bp-photo-viewer-arrow .bp-ico { width: 18px; height: 18px; }
  .bp-photo-viewer-close { top: -42px; right: 8px; }
  .bp-ged-folder-grid { grid-template-columns: minmax(0,1fr); }
  .bp-ged-toolbar { padding: 12px; }
  .bp-ged-search-summary { flex-direction: column; gap: 3px; }
  .bp-ged-list-head, .bp-ged-list-row { grid-template-columns: minmax(190px,1fr) 100px 95px 105px; gap: 7px; padding: 9px; }
  .bp-ged-results { padding: 12px !important; }
  .bp-ged-actions .btn-petit { font-size: 11px; }
}
@media (hover: none) {
  .bp-ged-color-menu > summary { opacity: 1; }
}


/* ═══ Analyse financière par chantier et intervenant ═════════════════ */
.bp-finance-filters { display: grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); align-items: end; gap: 12px; }
.bp-finance-filters .bp-filter-search { grid-column: span 2; }
.bp-finance-filters > .btn { min-height: 42px; }
.bp-finance-kpis { grid-template-columns: repeat(4,minmax(0,1fr)); }
.bp-finance-kpis .bp-stat { min-width: 0; }
.bp-finance-kpis .bp-stat strong { font-size: clamp(19px,2vw,27px); }
.bp-finance-charts { align-items: start; }
.bp-finance-charts > .bp-card { min-width: 0; }
.bp-analytics-chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 10px; color: var(--encre-2); font-size: 12px; font-weight: 700; }
.bp-analytics-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bp-analytics-chart-legend i,.bp-analytics-legend i { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--chart-color); }
.bp-analytics-line-wrap { overflow-x: auto; }
.bp-analytics-line { display: block; width: 100%; min-width: 500px; height: auto; overflow: visible; }
.bp-analytics-line .grid { stroke: var(--trait); stroke-width: 1; }
.bp-analytics-line text { fill: var(--encre-3); font: 11px var(--police); }
.bp-analytics-line circle { cursor: help; transition: r .15s ease; }
.bp-analytics-line circle:hover { r: 7; }
.bp-analytics-pie-layout { display: grid; grid-template-columns: minmax(115px, .8fr) minmax(150px, 1.2fr); align-items: center; gap: 16px; }
.bp-analytics-pie { width: min(100%,180px); aspect-ratio: 1; display: grid; place-items: center; margin: auto; border-radius: 50%; }
.bp-analytics-pie > span { width: 62%; aspect-ratio: 1; display: grid; align-content: center; justify-items: center; padding: 8px; border-radius: 50%; background: var(--surface); color: var(--encre); font-size: 14px; font-weight: 800; text-align: center; overflow-wrap: anywhere; }
.bp-analytics-pie > span small { display: block; margin-top: 3px; color: var(--encre-3); font-size: 10px; font-weight: 600; }
.bp-analytics-legend { display: grid; gap: 8px; }
.bp-analytics-legend > div { display: grid; grid-template-columns: 11px minmax(0,1fr) auto; align-items: center; gap: 7px; color: var(--encre-2); font-size: 12px; }
.bp-analytics-legend b { color: var(--encre); white-space: nowrap; }
.bp-analytics-subheading { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--trait); }
.bp-analytics-subheading h2 { font-size: 17px; }
.bp-analytics-subheading p { font-size: 12px; }
.bp-analytics-list { display: grid; gap: 12px; }
.bp-analytics-site { min-width: 0; padding: 0; overflow: hidden; }
.bp-analytics-site > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; }
.bp-analytics-site-title { min-width: 0; display: flex; align-items: center; gap: 12px; }
.bp-analytics-site-title > span:last-child { min-width: 0; display: grid; gap: 4px; }
.bp-analytics-site-title b { color: var(--encre); font-size: 16px; }
.bp-analytics-site-title small { color: var(--encre-3); }
.bp-analytics-site-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 40px; border-radius: 12px; background: var(--primaire-pale); color: var(--primaire); }
.bp-analytics-site-icon .bp-ico { width: 21px; height: 21px; }
.bp-analytics-site-status { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.bp-analytics-site-status > b { font-size: 16px; }
.bp-analytics-site-kpis { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; padding: 0 18px 14px; }
.bp-analytics-site-kpis > span { display: grid; gap: 4px; padding: 10px; border-radius: 9px; background: var(--surface-2); color: var(--encre-3); font-size: 11px; }
.bp-analytics-site-kpis b { color: var(--encre); font-size: 13px; }
.bp-analytics-detail { border-top: 1px solid var(--trait); padding: 0 18px 14px; }
.bp-analytics-detail > summary { padding: 13px 0; color: var(--primaire); font-size: 13px; font-weight: 800; cursor: pointer; }
.bp-analytics-detail[open] > summary { margin-bottom: 6px; }
.bp-analytics-method { color: var(--encre-3); font-size: 12px; line-height: 1.5; }
.bp-analytics-detail h4 { margin: 14px 0 8px; color: var(--encre); }
.bp-analytics-detail footer { display: flex; justify-content: flex-end; margin-top: 12px; }
.bp-analytics-expenses { display: grid; gap: 7px; }
.bp-analytics-expenses > div { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; background: var(--surface-2); }
.bp-analytics-expenses > div > span { flex: 1; display: grid; gap: 3px; }
.bp-analytics-expenses small { color: var(--encre-3); }
@media(max-width:1000px) {
  .bp-finance-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .bp-analytics-site-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media(max-width:680px) {
  .bp-finance-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .bp-finance-filters .bp-filter-search { grid-column: 1 / -1; }
  .bp-finance-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .bp-finance-kpis .bp-stat strong { font-size: 20px; }
  .bp-finance-charts { grid-template-columns: 1fr; }
  .bp-analytics-pie-layout { grid-template-columns: minmax(100px,.8fr) minmax(125px,1.2fr); gap: 10px; }
  .bp-analytics-site > header { align-items: flex-start; padding: 13px; }
  .bp-analytics-site-title { gap: 8px; }
  .bp-analytics-site-title b { font-size: 14px; }
  .bp-analytics-site-status { flex-direction: column; align-items: flex-end; gap: 5px; }
  .bp-analytics-site-status .bp-tag { font-size: 10px; }
  .bp-analytics-site-status > b { font-size: 13px; }
  .bp-analytics-site-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 0 13px 12px; }
  .bp-analytics-detail { padding: 0 13px 12px; }
  .bp-analytics-expenses > div { flex-wrap: wrap; }
}

/* ═══ Ajouts : photos des intervenants et glisser-déposer du planning ═══ */
.bp-photo-salarie { width: 34px; height: 34px; flex: 0 0 34px; display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%; object-fit: cover; background: var(--surface-3); border: 2px solid var(--surface); box-shadow: 0 1px 4px rgba(10, 20, 70, .16); color: var(--encre-2); font: 800 12px var(--police); vertical-align: middle; }
.bp-photo-salarie.petite { width: 26px; height: 26px; flex-basis: 26px; font-size: 10px; }
.bp-photo-salarie.moyenne { width: 42px; height: 42px; flex-basis: 42px; font-size: 14px; }
.bp-photo-salarie.grande { width: 120px; height: 120px; flex-basis: 120px; border-width: 4px; font-size: 34px; }
img.bp-person-dot, span.bp-person-dot.repli { padding: 0; object-fit: cover; }
img.bp-tete, span.bp-tete.repli { object-fit: cover; }
.bp-employe-ligne { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bp-employe-ligne > span { display: grid; min-width: 0; line-height: 1.25; }
.bp-photo-employe { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.bp-photo-employe > div { display: grid; gap: 10px; flex: 1; min-width: 220px; }
.bp-photo-employe p { margin: 0; color: var(--encre-2); }

.bp-palette { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1.5px dashed var(--trait-fort); }
.bp-palette-titre { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; color: var(--encre-2); font: 700 12.5px var(--police); }
.bp-palette-titre .bp-ico { width: 16px; height: 16px; }
.bp-palette .bp-site-pill { cursor: grab; user-select: none; box-shadow: 0 2px 6px rgba(10, 20, 70, .14); transition: transform var(--transition); }
.bp-palette .bp-site-pill:hover { transform: translateY(-1px); }
.bp-palette .bp-site-pill:active { cursor: grabbing; }
.bp-palette-aide { flex-basis: 100%; color: var(--encre-3); font-size: 12px; }
#planning-staff td.bp-week-cell[data-drop-day] { cursor: cell; user-select: none; }
#planning-staff td.bp-selection { background: color-mix(in srgb, var(--primaire) 14%, var(--surface)) !important; box-shadow: inset 0 0 0 2px var(--primaire); }
#planning-staff td.bp-cible { background: color-mix(in srgb, var(--vert) 14%, var(--surface)) !important; box-shadow: inset 0 0 0 2px var(--vert); }
#planning-staff .bp-week-block-cell { position: relative; }
.bp-fantome-duree { position: absolute; z-index: 6; left: 6px; top: 6px; bottom: 6px; min-width: 24px; border: 2px dashed var(--primaire); border-radius: 10px; background: color-mix(in srgb, var(--primaire) 10%, transparent); pointer-events: none; transition: width 80ms linear; }
.bp-fantome-duree.reduit { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 10%, transparent); }
.bp-fantome-duree::after { content: attr(data-libelle); position: absolute; right: 6px; top: -13px; padding: 2px 9px; border-radius: 999px; background: var(--marine); color: #fff; font: 700 11.5px var(--police); white-space: nowrap; box-shadow: var(--ombre-carte); }

.bp-periode-qui { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--trait); }
.bp-periode-qui span { display: grid; line-height: 1.25; }
.bp-periode-qui small { color: var(--encre-3); }
.bp-choix-chantiers { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.bp-choix-chantiers legend { margin-bottom: 6px; color: var(--encre-2); font: 700 13px var(--police); }
.bp-form .bp-choix-chantiers label { position: relative; display: inline-flex; cursor: pointer; }
.bp-choix-chantiers input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bp-choix-chantiers .bp-site-pill { padding: 4px 12px; opacity: .5; transition: opacity var(--transition), box-shadow var(--transition); }
.bp-choix-chantiers label:hover .bp-site-pill { opacity: .8; }
.bp-choix-chantiers input:checked + .bp-site-pill { opacity: 1; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--site, var(--primaire)); }
.bp-choix-chantiers input:focus-visible + .bp-site-pill { outline: 3px solid var(--primaire-doux); outline-offset: 4px; }
.bp-jours-choix { display: flex; flex-wrap: wrap; gap: 6px; }
.bp-form .bp-jours-choix label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1.5px solid var(--trait-fort); color: var(--encre-2); font: 700 12.5px var(--police); cursor: pointer; text-transform: capitalize; }
.bp-form .bp-jours-choix label.we { border-style: dashed; }
.bp-form .bp-jours-choix label:has(input:checked) { background: var(--primaire-pale); border-color: var(--primaire); color: var(--primaire); }
.bp-jours-choix input { width: 15px; height: 15px; }

/* ═══ Ajouts : analyse financière (périodes et comparaisons en barres) ═══ */
.bp-fin-periode { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-bottom: 10px; margin-bottom: 2px; border-bottom: 1px solid var(--trait); }
.bp-fin-periode > span { color: var(--encre-2); font: 700 13px var(--police); }
.bp-fin-periode .bp-period-tabs button { min-width: 0; padding: 7px 14px; }
.bp-fin-periode strong { min-width: 150px; text-align: center; font: 800 17px var(--police-titre); letter-spacing: .03em; text-transform: uppercase; }
.bp-fin-periode .btn-petit { width: 34px; padding: 0; }
.bp-fin-periode small { color: var(--encre-3); }
.bp-fin-comparaisons { margin-top: 20px; }
.bp-fin-barres-liste { display: grid; gap: 10px; max-height: 460px; overflow-y: auto; padding-right: 4px; }
.bp-fin-barre { display: grid; grid-template-columns: minmax(110px, 32%) minmax(0, 1fr) 104px; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--trait); }
.bp-fin-barre:last-child { border-bottom: 0; }
.bp-fin-barre-nom { display: grid; min-width: 0; line-height: 1.25; }
.bp-fin-barre-nom b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-fin-barre-nom small { color: var(--encre-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-fin-barre-pistes { display: grid; gap: 4px; }
.bp-fin-barre-pistes i { display: block; height: 10px; min-width: 2px; border-radius: 0 6px 6px 0; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.bp-fin-barre-pistes i.ca { background: #2457e6; }
.bp-fin-barre-pistes i.cout { background: #f59e0b; }
.bp-fin-barre-marge { display: grid; justify-items: end; line-height: 1.2; }
.bp-fin-barre-marge b { font-size: 13.5px; }
.bp-fin-barre-marge small { color: var(--encre-3); font-size: 11.5px; }
@media (max-width: 700px) { .bp-fin-barre { grid-template-columns: 1fr 90px; } .bp-fin-barre-pistes { grid-column: 1 / -1; grid-row: 2; } }

/* ═══ Ajouts : météo du planning sur toute la période ═══ */
.bp-meteo.normale { background: var(--surface-3); opacity: .85; }
.bp-meteo.normale b { color: var(--encre-2); }
.bp-meteo-row th.normale em { color: var(--encre-3); font-style: italic; }
.bp-meteo.passe { background: var(--surface-3); }
.bp-meteo-row th.passe em { color: var(--encre-3); }
.bp-weather-inline.normale { background: var(--surface-3); color: var(--encre-2); }
.bp-meteo-avert { color: var(--jaune-texte); }

/* ═══ Ajouts : devis & relances client ═══ */
.bp-devis-filtres label { flex: 1 1 160px; }
.bp-devis-ligne { cursor: pointer; }
.bp-devis-alerte { color: var(--orange); font-weight: 700; }
.bp-devis-chantier { display: inline-flex; align-items: center; gap: 4px; color: var(--primaire); font-weight: 600; }
.bp-devis-chantier .bp-ico { width: 13px; height: 13px; }
.bp-devis-modal .bp-modal-inner.bp-devis-fenetre { width: min(1120px, 96vw); }
.bp-devis-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; margin-bottom: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--trait); }
.bp-devis-tete > div:first-child { display: grid; gap: 4px; min-width: 0; }
.bp-devis-tete b { font: 800 20px/1.15 var(--police-titre); letter-spacing: .02em; text-transform: uppercase; }
.bp-devis-tete small { color: var(--encre-3); }
.bp-devis-montant { display: grid; justify-items: end; }
.bp-devis-montant strong { font: 800 28px/1 var(--police-titre); color: var(--encre); }
.bp-devis-montant small { color: var(--encre-3); }
.bp-devis-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bp-devis-corps { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 18px; align-items: start; }
.bp-devis-corps > section { display: grid; gap: 14px; min-width: 0; }
.bp-devis-infos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 0; }
.bp-devis-infos > div { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--trait); }
.bp-devis-infos dt { color: var(--encre-3); font: 700 10.5px var(--police); letter-spacing: .08em; text-transform: uppercase; }
.bp-devis-infos dd { display: grid; gap: 2px; margin: 2px 0 0; font-weight: 700; }
.bp-devis-infos dd small { color: var(--encre-2); font-weight: 500; }
.bp-devis-infos dd a { display: inline-flex; align-items: center; gap: 4px; }
.bp-devis-infos dd .bp-ico { width: 14px; height: 14px; }
.bp-devis-totaux { display: grid; justify-items: end; gap: 4px; padding: 12px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--trait); color: var(--encre-2); font-size: 14px; }
.bp-devis-totaux span { display: flex; gap: 16px; }
.bp-devis-totaux b { min-width: 110px; text-align: right; color: var(--encre); }
.bp-devis-totaux .ttc { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--trait-fort); font-size: 16px; color: var(--encre); }
.bp-devis-totaux .ttc b { font: 800 20px var(--police-titre); }
.bp-devis-notes { margin: 0; padding: 10px 14px; border-left: 3px solid var(--primaire-doux); color: var(--encre-2); white-space: pre-line; }
.bp-devis-corps aside { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--trait); }
.bp-devis-corps aside h3 { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; font-size: 14.5px; }
.bp-devis-corps aside h3 .bp-ico { width: 16px; height: 16px; color: var(--primaire); }
.bp-devis-corps aside h3 span { padding: 0 8px; border-radius: 999px; background: var(--surface-3); font-size: 12px; }
.bp-devis-relance, .bp-devis-evenement { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--trait); font-size: 13px; }
.bp-devis-relance small, .bp-devis-evenement small { color: var(--encre-3); }
.bp-devis-evenement span { color: var(--encre-2); }
.bp-devis-relance details p { margin: 6px 0 0; white-space: pre-line; color: var(--encre-2); }
.bp-devis-vide { color: var(--encre-3); }
.bp-devis-edition td { padding: 6px; vertical-align: middle; }
.bp-devis-edition input, .bp-devis-edition select { min-height: 36px !important; padding: 6px 8px !important; font-size: 13.5px !important; }
.bp-devis-edition td:nth-child(1) { min-width: 240px; }
.bp-devis-edition td:nth-child(2), .bp-devis-edition td:nth-child(3) { width: 82px; }
.bp-devis-edition td:nth-child(4) { width: 110px; }
.bp-devis-edition td:nth-child(5) { width: 96px; }
.bp-devis-total-ligne { width: 110px; text-align: right; font-weight: 700; white-space: nowrap; }
.bp-devis-destinataire { margin: 0; color: var(--encre-2); }
@media (max-width: 860px) { .bp-devis-corps { grid-template-columns: 1fr; } .bp-devis-montant { justify-items: start; } }

/* ═══ Gantt : tâches détaillées par phase ═══ */
.bp-taches { margin-top: 18px; }
.bp-tache-phase { border: 1px solid var(--trait); border-radius: 12px; background: var(--surface-2); margin-top: 10px; overflow: hidden; }
.bp-tache-phase > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; cursor: pointer; list-style: none; }
.bp-tache-phase > summary::-webkit-details-marker { display: none; }
.bp-tache-phase > summary::before { content: "▸"; color: var(--encre-3); transition: transform var(--transition); }
.bp-tache-phase[open] > summary::before { transform: rotate(90deg); }
.bp-tache-titre { display: grid; min-width: 0; line-height: 1.25; flex: 1; }
.bp-tache-titre b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-tache-titre small { color: var(--encre-3); font-size: 12px; }
.bp-tache-avance { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.bp-tache-avance b { font-size: 13px; color: var(--encre); }
.bp-tache-barre { flex: 1; height: 6px; border-radius: 6px; background: var(--trait); overflow: hidden; }
.bp-tache-barre i { display: block; height: 100%; background: var(--vert); border-radius: 6px; }
.bp-taches-liste { list-style: none; margin: 0; padding: 4px 14px 8px; }
.bp-taches-liste li { display: grid; grid-template-columns: minmax(0, 1fr) 170px 34px; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--trait); }
.bp-taches-liste label { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; }
.bp-taches-liste label span { overflow: hidden; text-overflow: ellipsis; }
.bp-taches-liste input[type=checkbox] { width: 17px; height: 17px; flex: 0 0 17px; }
.bp-taches-liste li.st-termine label span { text-decoration: line-through; color: var(--encre-3); }
.bp-taches-liste li.st-annulee label span { text-decoration: line-through; color: var(--rouge); }
.bp-taches-liste li.st-annulee label { cursor: default; }
.bp-taches-liste li.st-en_cours select { border-color: var(--primaire); }
.bp-taches-liste li.st-a_verifier select { border-color: var(--jaune); }
.bp-taches-liste select { min-height: 34px !important; padding: 5px 28px 5px 9px !important; font-size: 13px !important; }
.bp-taches-liste .bp-icon-btn { width: 32px; height: 32px; }
.bp-taches-vide { color: var(--encre-3); font-size: 13.5px; display: block !important; }
.bp-tache-ajout { display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; gap: 10px; padding: 10px 14px 14px; }
.bp-tache-ajout input { min-height: 36px !important; padding: 6px 10px !important; font-size: 13.5px !important; }
.bp-tache-ajout select { min-height: 36px !important; padding: 6px 28px 6px 9px !important; font-size: 13px !important; }
@media (max-width: 700px) { .bp-taches-liste li { grid-template-columns: minmax(0, 1fr) 34px; } .bp-taches-liste li select { grid-column: 1; } .bp-tache-ajout { grid-template-columns: 1fr; } .bp-tache-avance { min-width: 0; } }

/* ═══ Gantt : indicateur d'avancement pondéré (jauge et barre rouge → vert) ═══ */
.bp-gx-indicateur { margin: 16px 0 12px; }
.bp-jauge-carte { display: grid; gap: 14px; padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--trait); border-top: 4px solid var(--jauge, var(--encre-3)); box-shadow: var(--ombre); }
.bp-jauge-carte.vert { --jauge: var(--vert); --jauge-pale: var(--vert-pale); }
.bp-jauge-carte.jaune { --jauge: var(--jaune); --jauge-pale: var(--jaune-pale); }
.bp-jauge-carte.rouge { --jauge: var(--rouge); --jauge-pale: var(--rouge-pale); }
.bp-jauge-carte.gris { --jauge: var(--encre-3); --jauge-pale: var(--surface-3); }
.bp-jauge-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.bp-jauge-tete small { color: var(--encre-3); font: 700 11px var(--police); letter-spacing: .08em; text-transform: uppercase; }
.bp-jauge-valeur { font: 800 34px/1 var(--police-titre); color: var(--encre); }
.bp-jauge-verdict { padding: 3px 12px; border-radius: 999px; background: var(--jauge-pale); color: var(--jauge); font: 700 13px var(--police); }
.bp-jauge-corps { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: 20px; align-items: center; }
.bp-jauge-cadran { display: grid; justify-items: center; gap: 6px; }
.bp-jauge-svg { width: 100%; max-width: 320px; height: auto; overflow: visible; }
.bp-jauge-min { fill: var(--encre-3); font: 600 12px var(--police); }
.bp-jauge-ecart { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; color: var(--encre-3); font-size: 12.5px; }
.bp-jauge-ecart b { color: var(--encre); }
.bp-jauge-ecart b.neg { color: var(--rouge); }
.bp-jauge-ecart b.pos { color: var(--vert); }
.bp-jauge-detail { display: grid; gap: 14px; min-width: 0; }
.bp-jauge-lineaire { display: grid; gap: 6px; }
.bp-jauge-rail { position: relative; height: 26px; border-radius: 8px; background: linear-gradient(90deg, var(--rouge) 0%, var(--jaune) 50%, var(--vert) 100%); }
.bp-jauge-repere { position: absolute; top: -10px; width: 0; height: 0; margin-left: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 12px solid var(--encre); }
.bp-jauge-repere::after { content: ""; position: absolute; top: -40px; left: -1px; width: 2px; height: 30px; background: var(--encre); }
.bp-jauge-graduations { display: flex; justify-content: space-between; color: var(--encre-3); font-size: 11px; }
.bp-jauge-statuts { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-jauge-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--trait); font: 600 13px var(--police); color: var(--encre-2); }
.bp-jauge-chip b { color: var(--encre); }
.bp-jauge-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--encre-3)); }
.bp-jauge-chip.vert { --c: var(--vert); }
.bp-jauge-chip.bleu { --c: var(--primaire); }
.bp-jauge-chip.gris { --c: var(--encre-3); }
.bp-jauge-chip.rouge { --c: var(--rouge); }
.bp-jauge-chip b:first-of-type { margin-left: 2px; }
@media (max-width: 760px) { .bp-jauge-corps { grid-template-columns: 1fr; } }

/* ═══ Mobile : planning en agenda, filtres en volet, Gantt tactile ═══ */
.bp-fab { display: none; }
#planning-staff .bp-agenda-jours, #planning-staff .bp-agenda-titre, #planning-staff .bp-agenda-liste, #planning-staff .bp-agenda-ajout { display: grid; max-width: 760px; margin-left: auto; margin-right: auto; }
#planning-staff .bp-agenda-jours button { display: grid; justify-items: center; gap: 2px; min-height: 76px; padding: 8px 2px; border-radius: 14px; border: 1.5px solid var(--trait); background: var(--surface-2); color: var(--encre); font: inherit; cursor: pointer; }
#planning-staff .bp-agenda-jours button.actif { background: var(--primaire); border-color: var(--primaire); color: #fff; }
#planning-staff .bp-agenda-jours { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 12px auto 4px; }
#planning-staff .bp-agenda-carte { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--trait); border-left: 5px solid var(--trade, var(--t-autre)); cursor: pointer; }
#planning-staff .bp-agenda-liste { display: grid; gap: 10px; }
#planning-staff .bp-agenda-titre b { font: 800 19px/1.1 var(--police-titre); text-transform: uppercase; }
#planning-staff .bp-agenda-titre small { color: var(--encre-3); }
#planning-staff .bp-agenda-titre { margin: 14px auto 10px; }
#planning-staff .bp-agenda-corps { display: grid; gap: 3px; min-width: 0; }
#planning-staff .bp-agenda-heure { display: grid; line-height: 1.2; }
#planning-staff .bp-agenda-heure b { font: 800 19px var(--police-titre); }
#planning-staff .bp-agenda-heure small { color: var(--encre-3); }
#planning-staff .bp-agenda-actions { display: flex; gap: 8px; }
#planning-staff .bp-agenda-ajout { display: inline-flex; justify-content: center; }
#planning-staff .bp-agenda-jours button.actif small, #planning-staff .bp-agenda-jours button.actif i { color: #fff; background: rgba(255,255,255,.2); }
.bp-action-rapide { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--primaire-pale); color: var(--primaire); text-decoration: none; }
.bp-detail-liste { display: grid; gap: 10px; margin: 0; }
.bp-detail-liste div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--trait); }
.bp-detail-liste dt { color: var(--encre-3); font: 700 11px var(--police); letter-spacing: .08em; text-transform: uppercase; }
.bp-detail-liste dd { margin: 0; font-weight: 600; font-size: 15px; }
.bp-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.bp-detail-affectation { max-width: 520px; }
.bp-sheet-entete { display: none; }

@media (max-width: 700px) {
  /* Planning */
  .bp-planner-filters { display: none; }
  .bp-planner-filters.is-open { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-height: 74vh; overflow-y: auto; flex-direction: column; align-items: stretch; gap: 14px; border-radius: 20px 20px 0 0; box-shadow: 0 -18px 50px rgba(10, 20, 70, .35); padding: 0 16px 22px; }
  .bp-planner-filters.is-open > strong { display: none; }
  .bp-planner-filters.is-open .bp-planner-filter-fields { flex-direction: column; }
  .bp-sheet-entete { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: var(--surface); padding: 14px 0 10px; margin-bottom: 4px; border-bottom: 1px solid var(--trait); font: 800 18px var(--police-titre); text-transform: uppercase; letter-spacing: .03em; }
  .bp-fab { display: inline-flex; align-items: center; gap: 8px; position: fixed; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 65; min-height: 52px; padding: 12px 20px; border: 0; border-radius: 999px; background: var(--primaire); color: #fff; font: 700 15px var(--police); box-shadow: 0 10px 26px rgba(23, 72, 224, .45); cursor: pointer; }
  .bp-fab .bp-ico { width: 20px; height: 20px; }
  #planning-staff .bp-agenda-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 12px 0 4px; }
  #planning-staff .bp-agenda-jours button { display: grid; justify-items: center; gap: 2px; min-height: 76px; padding: 8px 2px; border-radius: 14px; border: 1.5px solid var(--trait); background: var(--surface-2); color: var(--encre); font: inherit; cursor: pointer; }
  #planning-staff .bp-agenda-jours button small { color: var(--encre-3); font: 700 11px var(--police); text-transform: capitalize; }
  #planning-staff .bp-agenda-jours button b { font: 800 20px/1 var(--police-titre); }
  #planning-staff .bp-agenda-jours button i { min-width: 20px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--primaire-pale); color: var(--primaire); font: 800 11px/18px var(--police); font-style: normal; text-align: center; }
  #planning-staff .bp-agenda-jours button i.vide { background: transparent; }
  #planning-staff .bp-agenda-jours button em { font-style: normal; font-size: 13px; }
  #planning-staff .bp-agenda-jours button.actif { background: var(--primaire); border-color: var(--primaire); color: #fff; }
  #planning-staff .bp-agenda-jours button.actif small, #planning-staff .bp-agenda-jours button.actif i { color: #fff; background: rgba(255, 255, 255, .2); }
  #planning-staff .bp-agenda-jours button.auj:not(.actif) { border-color: var(--orange); }
  #planning-staff .bp-agenda-titre { display: grid; gap: 2px; margin: 14px 0 10px; }
  #planning-staff .bp-agenda-titre b { font: 800 19px/1.1 var(--police-titre); text-transform: uppercase; letter-spacing: .02em; }
  #planning-staff .bp-agenda-titre small { color: var(--encre-3); }
  #planning-staff .bp-agenda-liste { display: grid; gap: 10px; }
  #planning-staff .bp-agenda-carte { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 12px 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--trait); border-left: 5px solid var(--trade, var(--t-autre)); box-shadow: var(--ombre); cursor: pointer; }
  #planning-staff .bp-agenda-heure { display: grid; line-height: 1.2; }
  #planning-staff .bp-agenda-heure b { font: 800 19px var(--police-titre); color: var(--encre); }
  #planning-staff .bp-agenda-heure small { color: var(--encre-3); font-size: 12px; }
  #planning-staff .bp-agenda-corps { display: grid; gap: 3px; min-width: 0; }
  #planning-staff .bp-agenda-corps > b { font-size: 15px; }
  #planning-staff .bp-agenda-corps > small { color: var(--encre-2); font-size: 12.5px; }
  #planning-staff .bp-agenda-lieu { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #planning-staff .bp-agenda-corps .bp-site-pill { justify-self: start; max-width: 100%; }
  #planning-staff .bp-agenda-actions { display: grid; gap: 8px; }
  .bp-action-rapide { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--primaire-pale); color: var(--primaire); border: 0; text-decoration: none; }
  .bp-action-rapide .bp-ico { width: 20px; height: 20px; }
  #planning-staff .bp-agenda-ajout { display: inline-flex; width: 100%; min-height: 50px; margin-top: 14px; justify-content: center; }
  #planning-staff .bp-agenda-jours, #planning-staff .bp-agenda-titre, #planning-staff .bp-agenda-liste, #planning-staff .bp-agenda-ajout { display: grid; }
  #planning-staff .bp-agenda-ajout { display: inline-flex; }
  #planning-staff .bp-planner-hint { display: none; }

  /* Gantt : cibles tactiles de 44 px, défilement horizontal fluide, détails repliés */
  #gantt-viewport { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scroll-behavior: smooth; max-height: 64vh; touch-action: pan-x pan-y; }
  .bp-gx-barre { top: 10px; bottom: 10px; font-size: 13px; padding: 0 10px; }
  .bp-gx-poignee { width: 16px; }
  .bp-gx-outils button { width: 44px; height: 44px; }
  .bp-gx-outils { right: 56px; }
  .bp-gx-label { grid-template-columns: 36px minmax(0, 1fr) 52px; }
  .bp-gx-pastille { width: 36px; height: 36px; }
  .bp-gx-titre b { font-size: 13.5px; }
  #gantt-viewport:not(.details) .bp-gx-sous, #gantt-viewport:not(.details) .bp-gx-dates { display: none; }
  #gantt-viewport:not(.details) .bp-gx-titre small { display: none; }
  #gantt-viewport:not(.details) .bp-gx-duree { display: none; }
  #gantt-viewport:not(.details) .bp-gx-label { grid-template-columns: 36px minmax(0, 1fr) 44px; }
  .bp-gantt-commandes .btn { min-height: 44px; }
  .bp-gantt-commandes .bp-period-tabs button { min-height: 40px; }
}

/* ═══ Gantt mobile : boutons de zoom + et − ═══ */
.bp-gantt-echelle { display: inline-flex; align-items: center; gap: 6px; }
.bp-gantt-echelle .btn { width: 44px; min-height: 44px; padding: 0; font-size: 20px; font-weight: 700; }
.bp-gantt-echelle span { min-width: 52px; text-align: center; font: 700 13px var(--police); color: var(--encre-2); }
@media (max-width: 700px) { .bp-gantt-commandes { width: 100%; } .bp-gantt-echelle { flex: 1; justify-content: space-between; } }

/* ═══ Gantt : plein écran, planning salarié ═══ */
.bp-gantt-card.bp-gantt-plein { position: fixed; inset: 0; z-index: 80; margin: 0; border-radius: 0; overflow-y: auto; background: var(--surface); padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
.bp-gantt-card.bp-gantt-plein .bp-gantt-viewport { max-height: calc(100vh - 250px); }
.bp-gantt-card.bp-gantt-plein .bp-gantt-aide { display: none; }
body.bp-gantt-verrou { overflow: hidden; }
.bp-controles-salarie .bp-period-nav strong { font-size: 15px; }
@media (max-width: 700px) { .bp-gantt-card.bp-gantt-plein .bp-gantt-kpis, .bp-gantt-card.bp-gantt-plein .bp-gx-indicateur { display: none; } }

/* ═══ Planning mobile : navigation par jour et filtres compacts ═══ */
.bp-agenda-nav { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 8px; align-items: center; margin-top: 10px; }
.bp-agenda-nav .btn { min-height: 44px; padding: 0; justify-content: center; }
.bp-agenda-nav .btn:nth-child(2) { padding: 0 12px; font-size: 14px; }
#planning-staff .bp-agenda-nav { display: grid; }
@media (max-width: 700px) {
  .bp-planner-filters.is-open { padding: 0 14px 18px; }
  .bp-planner-filters.is-open .bp-planner-filter-fields label { font-size: 13px; }
  .bp-planner-filters.is-open select { min-height: 44px !important; font-size: 15px !important; }
  .bp-planner-filters.is-open .bp-planner-filter-fields label { flex: 1 1 100%; }
  .bp-planner-controls { padding: 10px 12px; }
  .bp-planner-controls .bp-period-nav strong { font-size: 15px; }
  .bp-period-nav .btn { min-height: 40px; }
}

/* ═══ Gantt sur téléphone : vue liste simple par phase ═══ */
.bp-phase-liste { display: grid; gap: 10px; }
.bp-phase-carte { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--trait); border-left: 5px solid var(--phase, var(--t-autre)); box-shadow: var(--ombre); cursor: pointer; min-width: 0; }
.bp-phase-tete { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.bp-phase-titre { display: grid; min-width: 0; line-height: 1.25; }
.bp-phase-titre b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-phase-titre small { color: var(--encre-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-phase-dates { color: var(--encre-2); font-size: 13px; font-weight: 600; }
.bp-phase-avance { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.bp-phase-barre { height: 12px; border-radius: 8px; background: var(--trait); overflow: hidden; }
.bp-phase-barre i { display: block; height: 100%; border-radius: 8px; }
.bp-phase-avance b { font-size: 14px; min-width: 42px; text-align: right; }
.bp-phase-axe { position: relative; height: 8px; border-radius: 6px; background: var(--surface-3); }
.bp-phase-axe span { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: var(--phase, var(--t-autre)); }
.bp-gantt-card.mode-liste #gantt-plein, .bp-gantt-card.mode-liste #gantt-details, .bp-gantt-card.mode-liste .bp-gantt-echelle, .bp-gantt-card.mode-liste .bp-gantt-legend, .bp-gantt-card.mode-liste .bp-gantt-kpis { display: none !important; }
.bp-gantt-card.mode-liste .bp-gantt-viewport { border: 0; background: transparent; max-height: none; overflow: visible; }
.bp-gantt-card.mode-liste .bp-gantt-viewport::-webkit-scrollbar { display: none; }
@media (max-width: 700px) { .bp-gantt-card.mode-liste .bp-gx-indicateur { margin-bottom: 8px; } }

/* Gantt mobile : filtres repliés derrière le bouton Filtres */
@media (max-width: 700px) {
  .bp-gantt-barre .filter-label:not(.bp-gantt-site) { display: none; }
  .bp-gantt-barre.filtres-ouverts .filter-label:not(.bp-gantt-site) { display: grid; flex: 1 1 100%; }
  .bp-gantt-barre .bp-gantt-site { flex: 1 1 100%; }
}

.texte-libre { white-space: pre-wrap; }

/* ── Site vitrine : rubrique dépliable du menu et pages de gestion ── */
.bp-nav-parent { display: flex; align-items: stretch; }
.bp-nav-parent > button[data-page] { flex: 1; min-width: 0; }
.bp-nav-fleche { flex: none; width: 38px; background: none; border: 0; cursor: pointer; color: inherit; display: grid; place-items: center; border-radius: 8px; opacity: .8; }
.bp-nav-fleche:hover { background: rgba(127,127,127,.15); opacity: 1; }
.bp-nav-fleche svg { width: 16px; height: 16px; transition: transform .15s; }
.bp-nav-rubrique.ouvert > .bp-nav-parent .bp-nav-fleche svg { transform: rotate(180deg); }
.bp-nav-sous { display: none; margin: 2px 0 4px 22px; padding-left: 10px; border-left: 2px solid var(--trait); }
.bp-nav-rubrique.ouvert > .bp-nav-sous, .bp-recherche .bp-nav-sous { display: grid; gap: 2px; }
.bp-site-rubriques { display: grid; gap: 10px; margin-top: 12px; }
.bp-site-rubrique { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; padding: 14px 16px; border: 1px solid var(--trait); border-radius: 12px; background: var(--surface); cursor: pointer; color: inherit; font: inherit; min-height: 56px; }
.bp-site-rubrique:hover { border-color: var(--primaire); }
.bp-site-rubrique small { display: block; color: var(--encre-2); font-weight: 400; margin-top: 2px; }
.bp-site-rubrique i svg { width: 20px; height: 20px; }
.bp-miniature-actu { width: 72px; height: 44px; object-fit: cover; border-radius: 6px; background: var(--surface-3, #eef); display: inline-block; vertical-align: middle; }
.bp-miniature-actu.grande { width: 168px; height: 100px; display: block; margin-bottom: 8px; }
.bp-miniature-actu.vide { display: inline-grid; place-items: center; color: var(--encre-3); }
.bp-logo-edition { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.bp-logo-apercu { width: 96px; height: 96px; object-fit: contain; border: 1px solid var(--trait); border-radius: 16px; background: #fff; padding: 6px; }
.page-site td small { display: block; color: var(--encre-2); }

/* ── Menu : groupes dépliables (Pilotage, Ressources, Gestion, Administration) ── */
.bp-nav .bp-nav-groupe-bouton { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 12px 6px; border-radius: 8px; background: none; color: var(--marine-texte-2); font: 700 11px var(--police); letter-spacing: .12em; text-transform: uppercase; opacity: .9; cursor: pointer; }
.bp-nav .bp-nav-groupe-bouton:hover { background: rgba(255, 255, 255, .06); color: var(--marine-texte); opacity: 1; }
.bp-nav-groupe-bouton svg { width: 14px; height: 14px; transition: transform .15s; }
.bp-nav-section:not(.ouvert) .bp-nav-groupe-bouton svg { transform: rotate(-90deg); }
.bp-nav-contenu { display: none; flex-direction: column; gap: 2px; }
.bp-nav-section.ouvert .bp-nav-contenu, .bp-recherche .bp-nav-contenu { display: flex; }
.bp-nav .bp-nav-fleche { width: 38px; flex: none; padding: 0; justify-content: center; gap: 0; border-radius: 8px; }

/* ── Stock : barre de recherche (liste des stocks + recherche libre) ── */
.bp-stock-barre { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin: 4px 0 14px; }
.bp-stock-select { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.bp-stock-select span { color: var(--encre-2); font-size: .9rem; }
.bp-stock-select select { min-width: 220px; min-height: 40px; }
.bp-stock-champ { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--trait-fort, var(--trait)); border-radius: 10px; padding: 0 12px; background: var(--surface); min-height: 40px; }
.bp-stock-champ .bp-ico { width: 18px; height: 18px; flex: none; opacity: .6; }
.bp-stock-champ input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; min-height: 38px; font: inherit; color: inherit; }
.bp-stock-champ:focus-within { border-color: var(--primaire); box-shadow: 0 0 0 3px rgba(23, 72, 224, .15); }
.bp-stock-compteur { color: var(--encre-2); font-size: .9rem; margin-left: auto; }
.bp-stock-vide { text-align: center; color: var(--encre-2); padding: 14px 0 4px; margin: 0; }
tr[data-stock-masque] { display: none; }
@media (max-width: 700px) { .bp-stock-select, .bp-stock-select select { width: 100%; } .bp-stock-select { flex-direction: column; align-items: stretch; gap: 4px; } .bp-stock-champ { flex-basis: 100%; min-height: 46px; } .bp-stock-barre .btn { flex: 1; } .bp-stock-compteur { margin-left: 0; width: 100%; } }

/* ── Stock : onglets, bons, achats, matériel fourni, documents imprimables ── */
.bp-onglets { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 14px; border-bottom: 1px solid var(--trait); }
.bp-onglets button { background: none; border: 0; padding: 11px 16px; font: 700 .95rem var(--police); color: var(--encre-2); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; min-height: 44px; }
.bp-onglets button:hover { color: var(--primaire); }
.bp-onglets button.actif { color: var(--primaire); border-bottom-color: var(--primaire); }
.bp-onglets-bas { margin-top: 18px; }
.bp-form-section { margin: 18px 0 4px; font: 800 .8rem var(--police); letter-spacing: .1em; text-transform: uppercase; color: var(--primaire); border-bottom: 1px solid var(--trait); padding-bottom: 4px; }
.bp-bon-lignes-titre { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 0 6px; gap: 10px; flex-wrap: wrap; }
.bp-bon-lignes-titre small { color: var(--encre-2); }
.bp-bon-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto 44px; gap: 8px; align-items: center; margin-bottom: 8px; }
.bp-bon-stock { color: var(--encre-2); white-space: nowrap; min-width: 110px; }
.bp-achat-ligne { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, .8fr) 80px 80px 90px 70px 90px 44px; gap: 6px; align-items: center; margin-bottom: 8px; }
.bp-achat-total { text-align: right; white-space: nowrap; }
.bp-achat-totaux { display: flex; gap: 24px; justify-content: flex-end; flex-wrap: wrap; padding: 12px 4px; font-size: 1.02rem; }
.bp-radio-groupe { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; }
.bp-radio-groupe label { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--trait-fort, var(--trait)); border-radius: 10px; padding: 10px 14px; cursor: pointer; flex: 1 1 220px; font-weight: 600; flex-direction: row; }
.bp-radio-groupe label:has(input:checked) { border-color: var(--primaire); background: var(--primaire-pale, rgba(23, 72, 224, .08)); }
.bp-radio-groupe input { width: 18px; height: 18px; flex: none; }
@media (max-width: 900px) { .bp-achat-ligne { grid-template-columns: 1fr 1fr; } .bp-achat-ligne select, .bp-achat-ligne input[name^=l_] { grid-column: 1 / -1; } }
@media (max-width: 700px) { .bp-bon-ligne { grid-template-columns: 1fr 100px 44px; } .bp-bon-stock { grid-column: 1 / -1; order: 3; } }
.bp-fourni-filtres { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 12px; margin: 4px 0 8px; }
.bp-fourni-filtres label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .88rem; color: var(--encre-2); }
.bp-fourni-filtres select, .bp-fourni-filtres input { min-height: 40px; font-weight: 500; color: var(--encre); }
.bp-fourni-large { grid-column: span 2; }
.bp-fourni-rapide { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 14px; color: var(--encre-2); font-size: .9rem; }
.bp-stat small { display: block; color: var(--encre-2); font-weight: 400; margin-top: 2px; }
.bp-part { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: var(--trait); vertical-align: middle; overflow: hidden; }
.bp-part i { display: block; height: 100%; background: var(--primaire); }
.btn-lien { background: none; border: 0; padding: 0; color: var(--primaire); font: inherit; font-weight: 700; cursor: pointer; text-align: left; text-decoration: underline; }
@media (max-width: 700px) { .bp-fourni-large { grid-column: auto; } .bp-onglets button { flex: 1 1 auto; padding: 10px 8px; font-size: .88rem; } }

/* Document imprimable : bon d'entrée / de sortie, bon de commande */
.bp-calque { position: fixed; inset: 0; z-index: 900; background: rgba(10, 20, 70, .72); overflow: auto; padding: 18px 12px 40px; }
.bp-calque-barre { position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; flex-wrap: wrap; max-width: 794px; margin: 0 auto 14px; padding: 8px; border-radius: 12px; background: var(--surface); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.bp-feuille { background: #fff; color: #0A1446; max-width: 794px; margin: 0 auto; padding: 30px 34px; border-radius: 8px; font-family: var(--police); font-size: 14px; line-height: 1.45; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bp-feuille-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 16px; border-bottom: 3px solid #1748E0; margin-bottom: 18px; }
.bp-feuille-marque { display: flex; gap: 14px; align-items: center; }
.bp-feuille-marque img { width: 64px; height: 64px; object-fit: contain; border-radius: 12px; }
.bp-feuille-marque b { font-size: 1.25rem; display: block; }
.bp-feuille-marque small, .bp-feuille-titre small, .bp-feuille-bloc small, .bp-feuille-signatures small { display: block; color: #4A5378; font-size: .8rem; }
.bp-feuille-titre { text-align: right; }
.bp-feuille-titre b { display: block; font-size: 1.15rem; margin-top: 6px; }
.bp-feuille-genre { display: inline-block; padding: 6px 14px; border-radius: 8px; color: #fff; font: 800 1rem var(--police); letter-spacing: .06em; background: #1748E0; }
.bp-feuille-genre.sortie { background: #FF5A2C; } .bp-feuille-genre.entree { background: #0E9F5B; } .bp-feuille-genre.commande { background: #0A1446; }
.bp-feuille-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 18px; }
.bp-feuille-bloc { background: #F4F7FE; border-radius: 10px; padding: 10px 14px; }
.bp-feuille-bloc small { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-bottom: 2px; }
.bp-feuille-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.bp-feuille-table th { text-align: left; background: #0A1446; color: #fff; padding: 8px 10px; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.bp-feuille-table td { padding: 8px 10px; border-bottom: 1px solid #E2E8F6; vertical-align: top; }
.bp-feuille-table .num { text-align: right; white-space: nowrap; }
.bp-feuille-total { text-align: right; margin: 6px 0 14px; }
.bp-feuille-sommes { margin-left: auto; width: min(320px, 100%); margin-bottom: 14px; }
.bp-feuille-sommes div { display: flex; justify-content: space-between; padding: 5px 10px; }
.bp-feuille-sommes .grand { background: #0A1446; color: #fff; border-radius: 8px; font-size: 1.05rem; margin-top: 4px; }
.bp-feuille-note { background: #FFF8E6; border-radius: 10px; padding: 10px 14px; }
.bp-feuille-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 26px; }
.bp-feuille-signatures div { border: 1.5px dashed #9DB4F2; border-radius: 10px; min-height: 110px; padding: 10px 14px; }
.bp-feuille-pied { margin-top: 22px; padding-top: 10px; border-top: 1px solid #E2E8F6; text-align: center; color: #8A93B2; font-size: .75rem; }
@media (max-width: 700px) { .bp-feuille { padding: 18px 14px; } .bp-feuille-tete { flex-direction: column; } .bp-feuille-titre { text-align: left; } .bp-feuille-signatures { grid-template-columns: 1fr; } .bp-feuille-table { font-size: .82rem; } }
@media print {
  @page { size: A4; margin: 14mm; }
  body.bp-impression > *:not(.bp-calque) { display: none !important; }
  body.bp-impression .bp-calque { position: static; background: none; padding: 0; overflow: visible; }
  .bp-calque-barre { display: none !important; }
  .bp-feuille { box-shadow: none; border-radius: 0; max-width: none; padding: 0; }
  .bp-feuille-signatures div { break-inside: avoid; } .bp-feuille-table tr { break-inside: avoid; }
}

.bp-calque-aide { max-width: 794px; margin: -4px auto 12px; color: #fff; font-size: .85rem; text-align: center; opacity: .9; }
@media print { .bp-calque-aide { display: none !important; } }

/* Flotte : photo du véhicule, documents ; fiche salarié */
.bp-vehicule-ligne { display: inline-flex; align-items: center; gap: 12px; text-align: left; }
.bp-vehicule-photo { width: 64px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; background: var(--surface-2, #eef1f5); display: inline-grid; place-items: center; color: var(--encre-2); }
.bp-vehicule-photo svg { width: 26px; height: 26px; }
.bp-vehicule-photo.grande { width: 220px; height: 150px; border-radius: 16px; }
.bp-vehicule-entete { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 4px 0 16px; }
.bp-modal-large .bp-modal-inner { width: min(1100px, 96vw); }
.bp-lien-fiche { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.bp-lien-fiche:hover b { color: var(--primaire); text-decoration: underline; }
.bp-fiche-entete { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.bp-fiche-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--surface-2, #eef1f5); }
.bp-fiche-periode { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-left: auto; }
.bp-fiche-periode label { display: grid; gap: 4px; font-size: .8rem; }
.bp-positif { color: #1a7f46; } .bp-negatif { color: #c0392b; }
@media (max-width: 700px) { .bp-vehicule-photo.grande { width: 100%; height: 190px; } .bp-fiche-periode { margin-left: 0; } }

/* Application d'authentification : QR code, clé, codes de secours */
.bp-qr { display: grid; place-items: center; margin: 10px 0; }
.bp-qr svg { width: 220px; height: 220px; border-radius: 12px; background: #fff; padding: 6px; }
.bp-cle-totp { display: inline-block; margin-top: 4px; padding: 6px 10px; border-radius: 8px; background: var(--surface-2, #eef1f5); letter-spacing: .08em; word-break: break-all; }
.bp-etapes { padding-left: 20px; }
.bp-codes-secours { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.bp-codes-secours code { display: block; padding: 8px 10px; border-radius: 8px; background: var(--surface-2, #eef1f5); text-align: center; font-size: 1rem; letter-spacing: .06em; }