:root{--ink:#20344d;--sub:#64758b;--line:#dde7f0;--bg:#f5f8fc;--teal:#004899}*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink)}.layout{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:100vh}aside{background:#ffffff;color:#fff;padding:24px 15px}aside strong{display:block;margin:7px 12px 28px;letter-spacing:.05em}aside button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:9px;padding:12px;color:#36516f;cursor:pointer;font-weight:650}aside button.active,aside button:hover{background:#e9f4fb;color:#fff}main{padding:32px;min-width:0}h1{margin:0;font-size:30px}p.muted,.muted{color:var(--sub)}.header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:25px}.badge{font-size:12px;border-radius:999px;padding:7px 12px;background:#fff0d3;color:#906113;font-weight:750}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.stat,.panel{background:#fff;border:1px solid var(--line);border-radius:15px;padding:19px}.stat span{display:block;color:var(--sub);font-size:13px}.stat strong{display:block;font-size:29px;margin-top:9px}.panel{margin-top:16px;overflow:auto}h2{font-size:18px;margin:0 0 15px}table{width:100%;border-collapse:collapse;white-space:nowrap}td,th{padding:12px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}th{color:var(--sub);background:#f7faff}.tab{display:none}.tab.active{display:block}.pill{background:#e6f4ef;color:#197157;border-radius:99px;padding:5px 8px;font-size:12px}.note{background:#edf6fc;padding:14px;border-radius:12px;font-size:13px}.btn{background:var(--teal);color:white;border:0;border-radius:9px;padding:11px 15px;cursor:pointer}.btn.secondary{background:#edf4fb;color:var(--ink)}.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.mission{border-bottom:1px solid var(--line);padding:15px 0}.mission:last-child{border:0}@media(max-width:800px){.layout{display:block}aside{padding:15px}aside strong{margin:0 0 12px}aside nav{display:flex;overflow:auto}aside button{white-space:nowrap;width:auto}main{padding:18px}.stats{grid-template-columns:repeat(2,1fr)}}
/* Formulaires modernes, communs à tous les modules */
.panel form{max-width:780px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;row-gap:5px}
.panel form>label{font-size:13px;font-weight:650;color:#36516f;line-height:1.55}
.panel form>label:has(textarea),.panel form>label:has(select){grid-column:1/-1}
.panel form input:not([type="hidden"]),.panel form select,.panel form textarea{width:100%!important;max-width:none!important;margin-top:7px;padding:12px 14px;min-height:44px;border:1px solid #cedcea;border-radius:10px;background:#f7faff;color:var(--ink);font:inherit;font-size:14px;outline:0;transition:border-color .15s,box-shadow .15s,background .15s}
.panel form textarea{resize:vertical;min-height:100px}
.panel form input:hover,.panel form select:hover,.panel form textarea:hover{border-color:#83b9d5;background:#fff}
.panel form input:focus,.panel form select:focus,.panel form textarea:focus{background:#fff;border-color:var(--teal);box-shadow:0 0 0 3px #50b9d333}
.panel form>.btn{grid-column:1/-1;justify-self:start;margin-top:13px;min-width:135px;font-weight:700}
.panel td a[href*="edit="]{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap;font-size:12px;font-weight:700;color:#004899;background:#edf6fc;border:1px solid #c9e4f0;border-radius:7px;padding:5px 10px;line-height:1.4;transition:background .15s,border-color .15s}
.panel td a[href*="edit="]:hover{background:#dceff8;border-color:#78c6de}
.panel td a[href*="edit="]:focus-visible{outline:3px solid #50b9d3;outline-offset:2px}
@media(max-width:680px){.panel form{grid-template-columns:1fr}.panel form>label{grid-column:1/-1}}

/* Thème sombre ARTÉA : automatique, ou choix manuel persistant */

:root[data-theme="dark"]{color-scheme:dark;--ink:#edf4ff;--sub:#a9bdd8;--line:#304b70;--bg:#0b172b;--teal:#1768b9}

:root[data-theme="dark"] .panel,:root[data-theme="dark"] .stat{background:#132440}
:root[data-theme="dark"] th{background:#193153}
:root[data-theme="dark"] .note{background:#1b365b}
:root[data-theme="dark"] .panel form input:not([type="hidden"]),:root[data-theme="dark"] .panel form select,:root[data-theme="dark"] .panel form textarea{background:#101f37;color:var(--ink);border-color:#42618a}
:root[data-theme="dark"] .panel form>label{color:var(--ink)}
:root[data-theme="dark"] .btn.secondary{background:#203d64;color:#edf4ff}



:root[data-theme="dark"] .panel form input:hover,:root[data-theme="dark"] .panel form input:focus,:root[data-theme="dark"] .panel form select:focus,:root[data-theme="dark"] .panel form textarea:focus{background:#1b3658;color:var(--ink)}

/* Mode sombre : planning et tableau de bord */
:root[data-theme="dark"] .plan-week .week-scroll{border-color:#34527a!important}
:root[data-theme="dark"] .plan-week .week-grid{background:#101f37!important}
:root[data-theme="dark"] .plan-week .week-corner,:root[data-theme="dark"] .plan-week .week-day-heading{background:#193153!important;border-color:#34527a!important;color:#edf4ff!important}
:root[data-theme="dark"] .plan-week .week-day-heading span,:root[data-theme="dark"] .plan-week .week-hour-label{color:#a9bdd8!important}
:root[data-theme="dark"] .plan-week .week-hours{background:#132440!important}
:root[data-theme="dark"] .plan-week .week-day-column{border-color:#34527a!important;background-color:#142845!important;background-image:linear-gradient(to bottom,#142845 0,#142845 calc(50% - 1px),#1b3658 50%,#1b3658 calc(100% - 1px),#365378 100%)!important}
:root[data-theme="dark"] .plan-week .week-hour-line{border-color:#365378!important}
:root[data-theme="dark"] .plan-week .week-day-heading.week-holiday{background:#53432c!important;color:#f8d997!important}
:root[data-theme="dark"] .plan-week .week-holiday-label{color:#f8d997!important}
:root[data-theme="dark"] .plan-week .week-day-column.week-holiday{background-color:#3c3529!important;background-image:linear-gradient(to bottom,#3c3529 0,#3c3529 calc(50% - 1px),#4b402d 50%,#4b402d calc(100% - 1px),#67583d 100%)!important}
:root[data-theme="dark"] .plan-week .week-need.coverage-full{background:#204f3b!important;border-color:#3e9568!important;color:#e2fae9!important}
:root[data-theme="dark"] .plan-week .week-need.coverage-partial{background:#57451e!important;border-color:#c49a48!important;color:#fff0c8!important}
:root[data-theme="dark"] .plan-week .week-need.coverage-none{background:#522e34!important;border-color:#b66b73!important;color:#ffe7e8!important}
:root[data-theme="dark"] .plan-week .week-need small{color:inherit!important}
:root[data-theme="dark"] .plan-week .week-need:hover{filter:brightness(1.13)}
.plan-week .planning-employee-filter,.pointage-audit .planning-employee-filter{background:#edf4f1!important}
:root[data-theme="dark"] .plan-week .planning-employee-filter,:root[data-theme="dark"] .pointage-audit .planning-employee-filter{background:#193153!important}
:root[data-theme="dark"] .plan-week .planning-filter-person,:root[data-theme="dark"] .pointage-audit .planning-filter-person{background:#142845!important;color:#edf4ff!important;border-color:#34527a!important}
:root[data-theme="dark"] .plan-week .planning-filter-person.is-active,:root[data-theme="dark"] .pointage-audit .planning-filter-person.is-active{background:#004899!important}
:root[data-theme="dark"] .plan-week .planning-filter-hours,:root[data-theme="dark"] .pointage-audit .planning-filter-hours{background:#25466e!important;color:#edf4ff!important}
:root[data-theme="dark"] .artea-time-modal,:root[data-theme="dark"] #bulk-modal,:root[data-theme="dark"] .pointage-correction-dialog{background:#132440!important;color:#edf4ff!important}
:root[data-theme="dark"] .artea-donut-card{background:#162c4b!important;border-color:#34527a!important;color:#edf4ff!important}
:root[data-theme="dark"] .artea-donut-sub{color:#a9bdd8!important}
:root[data-theme="dark"] .artea-dashboard-summary{background:#193153!important}


/* Distance routière : badge commun aux interventions et affectations */
.road-distance-badge{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;max-width:100%;margin:9px 0 3px;padding:7px 12px;border-radius:999px;background:#d7efe5;color:#10583f;font-weight:800;font-size:13px;line-height:1.3;border:1px solid #8fc9ad;white-space:nowrap}
.road-distance-unavailable{background:#edf0f0;color:#687a79;border-color:#d4dddd;font-weight:600}
.assign-person .road-distance-badge{align-self:center;margin:0;white-space:normal;text-align:center}
:root[data-theme="dark"] .road-distance-badge{background:#1c4165;color:#cfedff;border-color:#437ba3}
:root[data-theme="dark"] .road-distance-unavailable{background:#263750;color:#b0bfd3;border-color:#415571}


/* Menu latéral toujours visible sur ordinateur */
@media(min-width:801px){
  .layout>aside{position:sticky;top:0;align-self:start;height:100vh;max-height:100vh;overflow-y:auto;overscroll-behavior:contain}
}

/* MyArtea — palette du site vitrine, thème clair. */
:root:not([data-theme="dark"])
{
  color-scheme: light;
  --ink: #20344d;
  --sub: #64758b;
  --line: #dde7f0;
  --bg: #f5f8fc;
  --teal: #004899;
}
:root:not([data-theme="dark"]) .layout > aside
{
  background: #fff;
  color: #004899;
  border-right: 1px solid #dde7f0;
  border-top: 5px solid #50b9d3;
}
:root:not([data-theme="dark"]) aside strong
{
  color: #004899;
}
:root:not([data-theme="dark"]) aside nav a,
:root:not([data-theme="dark"]) aside nav button
{
  color: #36516f;
  background: transparent;
}
:root:not([data-theme="dark"]) aside nav a:hover,
:root:not([data-theme="dark"]) aside nav button:hover
{
  background: #edf6fc;
  color: #004899;
}
:root:not([data-theme="dark"]) aside nav a.active,
:root:not([data-theme="dark"]) aside nav button.active
{
  background: #e7f3fb;
  color: #004899;
  box-shadow: none;
}
:root:not([data-theme="dark"]) h1,
:root:not([data-theme="dark"]) h2,
:root:not([data-theme="dark"]) h3
{
  color: #004899;
}
:root:not([data-theme="dark"]) .panel,
:root:not([data-theme="dark"]) .stat
{
  box-shadow: 0 3px 16px #00489906;
}
:root:not([data-theme="dark"]) main a:not(.btn):not(.week-need):not(.pill)
{
  color: #004899;
}
:root:not([data-theme="dark"]) .auth input
{
  border-color: #cedcea;
  background: #fff;
  color: #20344d;
}
:root:not([data-theme="dark"]) input:focus-visible,
:root:not([data-theme="dark"]) select:focus-visible,
:root:not([data-theme="dark"]) textarea:focus-visible
{
  outline: 3px solid #50b9d344;
  outline-offset: 2px;
}
:root:not([data-theme="dark"]) .artea-dashboard-summary,
:root:not([data-theme="dark"]) .planning-employee-filter
{
  background: #edf6fc !important;
}
:root:not([data-theme="dark"]) .artea-donut-sub
{
  color: #64758b;
}
:root:not([data-theme="dark"]) .btn:not(.btn-danger):not(.btn-success):not(.secondary):not(.btn-small)
{
  background: #004899;
  color: #fff;
}

/* Navigation contrastée lorsque le mode sombre est choisi. */
:root[data-theme="dark"] .layout > aside
{
  background: #10233f;
  color: #edf4ff;
}
:root[data-theme="dark"] aside nav a,
:root[data-theme="dark"] aside nav button
{
  color: #dbe7fa;
}
:root[data-theme="dark"] aside nav a:hover,
:root[data-theme="dark"] aside nav a.active,
:root[data-theme="dark"] aside nav button:hover,
:root[data-theme="dark"] aside nav button.active
{
  background: #1d3e66;
  color: #fff;
}

/* ARTÉA — thème sombre bleu nuit, turquoise et magenta. */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] aside strong
{
  color: #edf4ff;
}
:root[data-theme="dark"] .layout > aside
{
  background: #0f203c;
  border-right: 1px solid #304b70;
  border-top: 5px solid #50b9d3;
}
:root[data-theme="dark"] aside nav a.active,
:root[data-theme="dark"] aside nav button.active
{
  background: #193b65;
  color: #fff;
  box-shadow: none;
}
:root[data-theme="dark"] main a:not(.btn):not(.week-need):not(.pill)
{
  color: #8bd8ef;
}
:root[data-theme="dark"] .auth input,
:root[data-theme="dark"] .panel form input:not([type="hidden"]),
:root[data-theme="dark"] .panel form select,
:root[data-theme="dark"] .panel form textarea
{
  background: #101f37;
  color: #edf4ff;
  border-color: #42618a;
}
:root[data-theme="dark"] input:focus-visible,
:root[data-theme="dark"] select:focus-visible,
:root[data-theme="dark"] textarea:focus-visible
{
  outline: 3px solid #50b9d355;
  outline-offset: 2px;
}
:root[data-theme="dark"] .btn:not(.btn-danger):not(.btn-success):not(.secondary):not(.btn-small)
{
  background: #005bb5;
  color: #fff;
}
:root[data-theme="dark"] .btn.secondary,
:root[data-theme="dark"] .btn.btn-small,
:root[data-theme="dark"] .panel td a[href*="edit="]
{
  background: #203d64;
  color: #ddf4ff;
  border-color: #42618a;
}
:root[data-theme="dark"] .employee-week-shift
{
  background: #162c4b;
  border-color: #34527a;
  border-left-color: #50b9d3;
}
:root[data-theme="dark"] .employee-week-time
{
  color: #8bd8ef;
}
:root[data-theme="dark"] .employee-week-shift small
{
  color: #a9bdd8;
}

/* Sites — couleurs de la charte et contraste des salariés attitrés. */
:root:not([data-theme="dark"]) main a.site-attired-badge
{
  background: #edf6fc;
  border-color: #beddec;
  color: #004899 !important;
}
:root:not([data-theme="dark"]) main a.site-attired-badge:hover
{
  background: #dceff8;
}
:root:not([data-theme="dark"]) .site-client-logo,
:root:not([data-theme="dark"]) .site-attired-avatar
{
  background: #004899;
  color: #fff !important;
}
:root[data-theme="dark"] main a.site-attired-badge
{
  background: #203d64;
  border-color: #42618a;
  color: #edf4ff !important;
}
:root[data-theme="dark"] main a.site-attired-badge:hover
{
  background: #285487;
  border-color: #50b9d3;
}
:root[data-theme="dark"] main a.site-client-logo,
:root[data-theme="dark"] .site-attired-avatar
{
  background: #005bb5;
  color: #fff !important;
}
:root[data-theme="dark"] .site-attired-empty,
:root[data-theme="dark"] .site-coverage-cell small
{
  color: #afc1dc;
}
:root[data-theme="dark"] .site-coverage-track
{
  background: #304b70;
}
:root[data-theme="dark"] .site-coverage-fill
{
  filter: brightness(1.3) saturate(.85);
}
:root[data-theme="dark"] .site-coverage-number
{
  color: #edf4ff;
}

/* Salariés : sites attitrés compacts, initiales et couleurs ARTÉA. */
.employee-site-chips
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 230px;
  max-width: 100%;
  white-space: normal;
}
main a.employee-site-chip
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 38px;
  min-height: 34px;
  max-width: 100%;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid #beddec;
  border-radius: 9px;
  background: #edf6fc;
  color: #004899 !important;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none !important;
}
main a.employee-site-chip:hover
{
  background: #dceff8;
  border-color: #50b9d3;
}
main a.employee-site-chip:focus-visible
{
  outline: 3px solid #50b9d3;
  outline-offset: 2px;
}
:root:not([data-theme="dark"]) .employee-list-avatar
{
  background: #004899;
  color: #fff;
}
:root[data-theme="dark"] main a.employee-site-chip
{
  background: #203d64;
  border-color: #42618a;
  color: #edf4ff !important;
}
:root[data-theme="dark"] main a.employee-site-chip:hover
{
  background: #285487;
  border-color: #50b9d3;
}
:root[data-theme="dark"] .employee-list-avatar
{
  background: #005bb5;
  color: #fff;
}
:root[data-theme="dark"] .employee-hours-track
{
  background: #304b70;
}
:root[data-theme="dark"] .employee-hours-progress small
{
  color: #afc1dc;
}
:root[data-theme="dark"] .employee-hours-fill
{
  filter: brightness(1.3) saturate(.85);
}

/* Préférences et horaires — palette ARTÉA. */
.settings-content .settings-hours
{
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.settings-content .settings-hours h2{margin-top:0}
.settings-content .settings-hours-form
{
  display:flex!important;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:14px;
  max-width:none!important;
}
.settings-content .settings-hours-form label{display:flex;flex-direction:column;gap:6px;min-width:135px}
.settings-content .settings-hours-form .btn{margin:0;min-height:44px}
:root:not([data-theme="dark"]) .settings-tabs a
{
  background:#edf4fb;
  color:#004899!important;
}
:root:not([data-theme="dark"]) .settings-tabs a.active
{
  background:#004899;
  color:#fff!important;
}
:root[data-theme="dark"] .settings-tabs a
{
  background:#203d64;
  color:#ddf4ff!important;
}
:root[data-theme="dark"] .settings-tabs a.active
{
  background:#005bb5;
  color:#fff!important;
  box-shadow: none;
}
.settings-tabs a:focus-visible{outline:3px solid #50b9d3;outline-offset:2px}
:root[data-theme="dark"] .settings-content .settings-prefix{background:#203d64;color:#ddf4ff;border-color:#42618a}
:root[data-theme="dark"] .settings-content .pay-field>input,
:root[data-theme="dark"] .settings-content .settings-input-group input{background:#101f37;color:#edf4ff;border-color:#42618a}

/* États mensuels — boutons et cartes ARTÉA. */
:root:not([data-theme="dark"]) main a.monthly-choice,
:root:not([data-theme="dark"]) main a.monthly-nav-button,
:root:not([data-theme="dark"]) main a.mc-button
{
  background:#edf4fb;
  border:1px solid #beddec;
  color:#004899!important;
}
:root:not([data-theme="dark"]) main a.monthly-choice:hover,
:root:not([data-theme="dark"]) main a.monthly-nav-button:hover,
:root:not([data-theme="dark"]) main a.mc-button:hover
{
  background:#dceff8;
  border-color:#50b9d3;
}
:root:not([data-theme="dark"]) .monthly-choice-icon,
:root:not([data-theme="dark"]) .monthly-page-icon
{
  background:#dceff8;
  color:#004899;
}
:root:not([data-theme="dark"]) .monthly-choice-content > span
{
  color:#526780;
}
:root:not([data-theme="dark"]) .monthly-choice-arrow{color:#004899}
:root[data-theme="dark"] main a.monthly-choice,
:root[data-theme="dark"] main a.monthly-nav-button,
:root[data-theme="dark"] main a.mc-button
{
  background:#203d64;
  border:1px solid #42618a;
  color:#edf4ff!important;
}
:root[data-theme="dark"] main a.monthly-choice:hover,
:root[data-theme="dark"] main a.monthly-nav-button:hover,
:root[data-theme="dark"] main a.mc-button:hover
{
  background:#285487;
  border-color:#50b9d3;
}
:root[data-theme="dark"] .monthly-choice-icon,
:root[data-theme="dark"] .monthly-page-icon
{
  background:#004899;
  color:#ddf4ff;
}
:root[data-theme="dark"] .monthly-choice .monthly-choice-content > span
{
  color:#afc1dc;
}
:root[data-theme="dark"] .monthly-choice .monthly-choice-arrow
{
  color:#8bd8ef;
}
main a.monthly-choice:focus-visible,
main a.monthly-nav-button:focus-visible,
main a.mc-button:focus-visible
{
  outline:3px solid #50b9d3;
  outline-offset:3px;
}

/* Liste clients — logos carrés et initiales lisibles. */
main a.client-logo
{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  min-width:40px;
  flex:0 0 40px;
  box-sizing:border-box;
  overflow:hidden;
  border:1px solid #c9dfef;
  border-radius:10px;
  background:#004899;
  color:#fff!important;
  text-decoration:none!important;
  font-size:11px;
  font-weight:750;
  line-height:1;
  white-space:nowrap;
}
main a.client-logo:hover
{
  border-color:#50b9d3;
  box-shadow:0 0 0 2px #50b9d333;
}
main a.client-logo:focus-visible
{
  outline:3px solid #50b9d3;
  outline-offset:3px;
}
main a.client-logo:has(img){background:#fff}
main a.client-logo img
{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  padding:3px;
  box-sizing:border-box;
  object-fit:contain;
  background:#fff;
}
:root[data-theme="dark"] main a.client-logo
{
  background:#005bb5;
  border-color:#42618a;
  color:#fff!important;
}
:root[data-theme="dark"] main a.client-logo:has(img){background:#fff}

/* États salariés — avatars ronds et contraste des initiales. */
main a.monthly-employee-avatar
{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 36px;
  width:36px;
  height:36px;
  min-width:36px;
  box-sizing:border-box;
  overflow:hidden;
  border:1px solid #c9dfef;
  border-radius:50%;
  background:#004899;
  color:#fff!important;
  text-decoration:none!important;
  font-size:11px;
  font-weight:750;
  line-height:1;
}
main a.monthly-employee-avatar img
{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:cover;
  border-radius:50%;
}
main a.monthly-employee-avatar:hover
{
  border-color:#50b9d3;
  box-shadow:0 0 0 2px #50b9d333;
}
main a.monthly-employee-avatar:focus-visible
{
  outline:3px solid #50b9d3;
  outline-offset:3px;
}
:root[data-theme="dark"] main a.monthly-employee-avatar
{
  background:#005bb5;
  border-color:#42618a;
  color:#fff!important;
}