/* ═══ Style « tableur Excel » : planning et Gantt ═══
   Fichier séparé : pour revenir en arrière, retirer la ligne style-excel.css dans index.html. */
@font-face { font-family: "Aptos"; src: local("Aptos"), local("Aptos Narrow"); }

/* --police est redéfinie ici seulement, donc les règles app.css qui l'utilisent (font:…) suivent aussi */
#planning-staff, .bp-gantt-card { --police: Aptos, "Segoe UI", Calibri, system-ui, sans-serif; }

/* Titres de bloc : 16 pt, gras, bleu foncé */
#planning-staff .bp-section-heading h2, .bp-gantt-card .bp-section-heading h2, .bp-gantt-card > h2 { font-size: 21.3px; font-weight: 700; color: #0A1446; }

/* Tableaux : texte 11 pt, lignes serrées */
#planning-staff .bp-table { font-size: 14.67px; }
#planning-staff .bp-table td { padding: 6px 8px; font-size: 14.67px; vertical-align: middle; border-bottom: 1px solid #C6D2EE; }
#planning-staff .bp-table td b { font-weight: 700; }
#planning-staff .bp-table tbody tr:nth-child(even) td { background: #F4F7FE; }

/* En-tête du planning : clair et compact, pour ne pas prendre tout l'écran */
#planning-staff .bp-table thead th { background: #E9EFFB; color: #0A1446; font-size: 12px; font-weight: 700; padding: 3px 6px; border-bottom: 1px solid #C6D2EE; line-height: 1.2; }
#planning-staff .bp-table thead .bp-period-row th { background: #FFFFFF; padding: 3px 8px; }
#planning-staff .bp-period-strip { gap: 8px; }
#planning-staff .bp-period-strip strong { font-size: 14px; color: #0A1446; }
#planning-staff .bp-period-strip .btn { min-height: 28px; padding: 2px 10px; font-size: 12px; }
#planning-staff .bp-period-strip .btn .bp-ico { width: 14px; height: 14px; }
#planning-staff .bp-meteo-titre { margin-bottom: 0; font-size: 10px; }
#planning-staff .bp-meteo { padding: 1px 7px; font-size: 11px; }
#planning-staff .bp-meteo .bp-ico { width: 13px; height: 13px; }
#planning-staff .bp-table thead .bp-select, #planning-staff .bp-table thead select { min-height: 26px; font-size: 12px; padding: 2px 6px; }

/* Gantt : libellés en 11 pt, en-tête bleu foncé en gras */
.bp-gx-coin { font-size: 14.67px; font-weight: 700; }
.bp-gx-titre b { font-size: 14.67px; font-weight: 700; }
.bp-gx-titre small, .bp-gx-sous { font-size: 12px; }
.bp-gx-semaines b { font-size: 14.67px; font-weight: 700; }
.bp-gx-label { padding-top: 4px; padding-bottom: 4px; }

/* Thème sombre : en-tête bleu nuit, texte clair */
:root[data-theme="dark"] #planning-staff .bp-table thead th { background: #1B2750; color: #E8EEFF; border-bottom-color: #2E3F7A; }
:root[data-theme="dark"] #planning-staff .bp-table thead .bp-period-row th { background: #141D3D; }
:root[data-theme="dark"] #planning-staff .bp-period-strip strong { color: #E8EEFF; }

/* ═══ Ambiance chantier (décor CSS uniquement, aucun changement de structure) ═══ */

/* 1. Démarrage : grue qui balance au-dessus du logo */
.demarrage { position: relative; overflow: hidden; }
.demarrage::before {
  content: ""; position: absolute; right: 12vw; top: 10vh; width: 150px; height: 210px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='210' viewBox='0 0 150 210'%3E%3Crect x='24' y='0' width='10' height='210' fill='%23FFC400'/%3E%3Cpath d='M20 0 L40 0 L40 10 L20 10Z' fill='%23FFC400'/%3E%3Cpath d='M24 40 L134 40 L134 52 L24 52Z' fill='%23FFC400'/%3E%3Cpath d='M24 40 L134 52 M24 52 L134 40' stroke='%230A1446' stroke-width='2' opacity='.35'/%3E%3Cpath d='M0 210 L24 170 L48 210Z' fill='%23FFC400' opacity='.35'/%3E%3Crect x='6' y='150' width='36' height='24' rx='3' fill='%2318297C' stroke='%23FFC400' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .9;
}
.demarrage::after {
  content: ""; position: absolute; right: calc(12vw + 85px); top: calc(10vh + 52px); width: 16px; height: 120px; pointer-events: none;
  transform-origin: 50% 0;
  background: linear-gradient(#FFC400, #FFC400) center top / 2px 100% no-repeat, linear-gradient(#FFC400, #FFC400) center bottom / 16px 14px no-repeat;
  animation: bp-grue 4.2s ease-in-out infinite;
}
@keyframes bp-grue { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

/* 2. Barre latérale : scène de pelleteuse qui défile, tout en bas */
.bp-side::after {
  content: ""; display: block; flex: 0 0 auto; height: 58px; margin: 6px -14px -16px; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='264' height='58' viewBox='0 0 264 58'%3E%3Crect x='0' y='46' width='264' height='12' fill='%232A3A8A'/%3E%3Cpath d='M0 52 H264' stroke='%23FFC400' stroke-width='2' stroke-dasharray='10 8'/%3E%3Cg transform='translate(40 14)'%3E%3Crect x='0' y='16' width='26' height='16' rx='2' fill='%23FFC400'/%3E%3Cpath d='M26 22 L40 8 L46 10 L36 26 Z' fill='%23FFC400'/%3E%3Ccircle cx='8' cy='34' r='4' fill='%230A1446' stroke='%23FFC400' stroke-width='2'/%3E%3Ccircle cx='22' cy='34' r='4' fill='%230A1446' stroke='%23FFC400' stroke-width='2'/%3E%3C/g%3E%3Cg transform='translate(170 22)'%3E%3Cpath d='M0 0 L14 -18 L20 -18 L26 0Z' fill='%23FF6A00'/%3E%3Crect x='-2' y='0' width='30' height='4' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 264px 58px; background-repeat: repeat-x;
  animation: bp-route 9s linear infinite;
}
@keyframes bp-route { from { background-position: 0 0; } to { background-position: -264px 0; } }

/* 3. Écrans vides : casque de chantier au lieu de la maison */
.bp-empty::before {
  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 15a9 8 0 0 1 18 0z'/%3E%3Cpath d='M2 15h20v2.5H2z'/%3E%3Cpath d='M12 7v4'/%3E%3C/svg%3E") center / 26px no-repeat;
}

/* 4. Météo du planning : bâche si pluie (protection), bétonnière si sec (chantier possible) */
#planning-staff .bp-meteo::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 2px; vertical-align: middle; background: center / contain no-repeat; }
#planning-staff .bp-meteo-row th:not(.pluie):not(.normale):not(:first-child) .bp-meteo::after {
  background-image: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 14h13l-2-7H6z'/%3E%3Cpath d='M15 10h3l3 4v0h-6z'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E");
}
#planning-staff .bp-meteo-row th.pluie .bp-meteo::after {
  background-image: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10 Q12 3 21 10 V19 H3 Z'/%3E%3Cpath d='M8 10 V19 M12 8.5 V19 M16 10 V19'/%3E%3C/svg%3E");
}

@media (max-width: 965px) { .bp-side::after { display: none; } }

/* 5. Écran de connexion : le plan est « en cours de chantier » (laser de nivellement + voyant) */
.bp-login-plan::after {
  content: ""; position: absolute; left: 18px; right: 18px; top: 18px; height: 3px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, #00E3DD 20%, #00E3DD 80%, transparent);
  box-shadow: 0 0 14px #00E3DD, 0 0 4px #00E3DD;
  animation: bp-laser 7s ease-in-out 3s infinite;
}
@keyframes bp-laser {
  0% { top: 18px; opacity: 0; }
  6% { opacity: .9; }
  45% { top: calc(100% - 24px); opacity: .9; }
  50%, 100% { top: calc(100% - 24px); opacity: 0; }
}
.bp-login-plan::before {
  content: "EN CHANTIER"; position: absolute; top: 4px; right: 26px; z-index: 1; pointer-events: none;
  padding: 3px 9px 3px 20px; border-radius: 999px; border: 1px solid rgba(255, 196, 0, .55);
  background: radial-gradient(circle at 9px 50%, #FFC400 3px, transparent 3.5px), rgba(10, 20, 70, .85);
  color: #FFC400; font: 800 10px var(--police-titre); letter-spacing: .14em;
}
@media (prefers-reduced-motion: reduce) { .bp-login-plan::after { animation: none; display: none; } }

/* 6. Flotte véhicules : une bétonnière traverse l'en-tête sur une route en pointillés */
.page-flotte { position: relative; }
.page-flotte::before {
  content: ""; display: block; height: 46px; margin: 0 0 14px; border-radius: 12px; pointer-events: none;
  background:
    linear-gradient(#3A4252, #3A4252) 0 100% / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, #FFC400 0 26px, transparent 26px 52px) 0 100% / 100% 3px no-repeat;
  background-color: #E4E9F3;
  animation: bp-route-flotte 1.6s linear infinite;
}
@keyframes bp-route-flotte { from { background-position: 0 100%, 0 100%; } to { background-position: 52px 100%, 52px 100%; } }
.page-flotte::after {
  content: ""; position: absolute; left: -130px; top: -4px; width: 120px; height: 60px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cpath d='M10 14 H62 L70 40 H14 Z' fill='%23FFC400' stroke='%230A1446' stroke-width='2'/%3E%3Cpath d='M22 14 L30 40 M36 14 L44 40 M50 14 L58 40' stroke='%230A1446' stroke-width='3'/%3E%3Crect x='8' y='40' width='100' height='6' rx='2' fill='%230A1446'/%3E%3Cpath d='M72 22 H96 L110 36 V46 H72 Z' fill='%231748E0'/%3E%3Cpath d='M80 26 H94 L102 36 H80 Z' fill='%23BFE3FF'/%3E%3Ccircle cx='26' cy='49' r='7' fill='%23161616'/%3E%3Ccircle cx='56' cy='49' r='7' fill='%23161616'/%3E%3Ccircle cx='96' cy='49' r='7' fill='%23161616'/%3E%3Ccircle cx='26' cy='49' r='2.5' fill='%23B0B8C8'/%3E%3Ccircle cx='56' cy='49' r='2.5' fill='%23B0B8C8'/%3E%3Ccircle cx='96' cy='49' r='2.5' fill='%23B0B8C8'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: bp-camion 12s linear infinite;
}
@keyframes bp-camion { from { left: -130px; } to { left: calc(100% + 10px); } }
@media (prefers-reduced-motion: reduce) { .page-flotte::before, .page-flotte::after { animation: none; } .page-flotte::after { display: none; } }

/* 6 bis. Suivi budgétaire : jauge d'avancement de la facturation */
.bp-jauge { height: 8px; min-width: 90px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.bp-jauge i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1748E0, #00B8B2); }
.bp-budget-depasse { color: var(--rouge); font-weight: 800; }

/* 7 bis. Logo : un casque de chantier tombe sur la maison, rebondit, puis le logo s'écrase et se redresse */
.bp-brand { position: relative; }
.bp-brand::before {
  content: ""; position: absolute; left: 14px; top: -10px; width: 28px; height: 18px; z-index: 2; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 18'%3E%3Cpath d='M3 13 A11 10 0 0 1 25 13 Z' fill='%23FFC400' stroke='%23B88A00' stroke-width='1.2'/%3E%3Crect x='1' y='12.5' width='26' height='3.5' rx='1.5' fill='%23FFD84D' stroke='%23B88A00' stroke-width='1'/%3E%3Cpath d='M9 6 Q14 3 19 6' stroke='%23FFFFFF' stroke-width='1.6' fill='none' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35));
  animation: bp-casque 6s cubic-bezier(.3, .7, .4, 1) infinite;
}
.bp-brand img { transform-origin: 50% 100%; animation: bp-ecrase 6s ease-in-out infinite; }
.bp-brand img:hover { animation: none; transform: rotate(-8deg) scale(1.08); transition: transform .25s ease; }
@keyframes bp-casque {
  0%, 4% { transform: translateY(-38px); opacity: 0; }
  8% { transform: translateY(0); opacity: 1; }
  10.5% { transform: translateY(-7px); }
  13% { transform: translateY(0); }
  15% { transform: translateY(-2px); }
  17%, 80% { transform: translateY(0); opacity: 1; }
  86%, 100% { transform: translateY(-38px); opacity: 0; }
}
@keyframes bp-ecrase {
  0%, 8% { transform: scale(1, 1); }
  9.5% { transform: scale(1.07, .9); }
  11.5% { transform: scale(.97, 1.04); }
  13.5%, 100% { transform: scale(1, 1); }
}
@media (prefers-reduced-motion: reduce) { .bp-brand::before, .bp-brand img { animation: none; } .bp-brand::before { display: none; } }

/* 8. Organigramme : arbre de cartes reliées par des traits */
.bp-org-wrap { overflow: auto; padding: 12px 8px 20px; }
.bp-org, .bp-org ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; }
.bp-org ul { position: relative; padding-top: 22px; }
.bp-org ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 22px; border-left: 2px solid #9AAAD6; }
.bp-org li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 22px 10px 0; }
.bp-org > li { padding-top: 0; }
.bp-org li::before, .bp-org li::after { content: ""; position: absolute; top: 0; width: 50%; height: 22px; border-top: 2px solid #9AAAD6; }
.bp-org li::before { right: 50%; }
.bp-org li::after { left: 50%; }
.bp-org li:first-child::before, .bp-org li:last-child::after { border-top-color: transparent; }
.bp-org > li::before, .bp-org > li::after, .bp-org li:only-child::before, .bp-org li:only-child::after { display: none; }
.bp-org-carte { display: grid; gap: 3px; justify-items: center; min-width: 190px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre); text-align: center; }
.bp-org-carte small { color: var(--encre-2); font-size: 12px; }
.bp-org-carte .btn { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .demarrage::after, .bp-side::after { animation: none; } }

/* 8 bis. Planning : infos contrat sous le nom du salarié */
.bp-infos-salarie { display: grid; gap: 0; margin-top: 2px; }
.bp-infos-salarie span { display: block; max-width: 100%; padding: 0; background: none; color: var(--encre-3); font: 500 9px/12px var(--police); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-infos-salarie span.bas { color: #b45309; font-weight: 700; }
.bp-infos-salarie span.negatif { color: var(--rouge); font-weight: 700; }

/* 9. Planning semaine compact : les 7 jours tiennent dans l'écran (le détail complet reste dans l'info-bulle de chaque mission) */
@media (min-width: 701px) {
  #planning-staff .bp-table:has(.bp-week-cell) { table-layout: fixed; width: 100%; min-width: 960px; }
  #planning-staff .bp-table:has(.bp-week-cell) td, #planning-staff .bp-table:has(.bp-week-cell) th { min-width: 0; }
  #planning-staff td.bp-employee-name { padding: 4px 6px !important; }
  #planning-staff td.bp-employee-name b { font-size: 12.5px; line-height: 1.2; overflow-wrap: anywhere; }
  #planning-staff td.bp-employee-name small { font-size: 11px; }
  #planning-staff td.bp-employee-name img, #planning-staff td.bp-employee-name .bp-tete { width: 26px; height: 26px; flex-basis: 26px; }
  #planning-staff .bp-week-cell { min-width: 0 !important; padding: 3px !important; }
  #planning-staff .bp-day-hours { display: block; margin-bottom: 2px; font-size: 10px; line-height: 1.2; }
  #planning-staff .bp-week-assignment { margin: 0 0 3px; padding: 3px 5px; font-size: 11px; line-height: 1.25; min-width: 0; }
  #planning-staff .bp-week-assignment .bp-site-pill { display: block; max-width: 100%; padding: 1px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
  #planning-staff .bp-week-assignment .bp-assignment-summary { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
  #planning-staff .bp-week-assignment > small:not(.bp-assignment-summary) { display: none; }
  #planning-staff .bp-add-cell { min-height: 20px; padding: 0 4px; font-size: 12px; line-height: 18px; }
  #planning-staff .bp-week-block-cell button { min-width: 0; padding: 0 4px; font-size: 10.5px; }
  #planning-staff .bp-table thead th { padding: 3px 4px; font-size: 11.5px; }
  #planning-staff .bp-meteo { padding: 1px 5px; font-size: 10.5px; gap: 2px; }
  #planning-staff .bp-meteo b { font-size: 12px; }
  #planning-staff .bp-meteo::after { width: 13px; height: 13px; }
  #planning-staff .bp-meteo-row em { font-size: 10px; }
  #planning-staff .bp-meteo-row th:first-child select { max-width: 100%; }
}