[hidden]{display:none!important}
:root{
  --bg:#f5f7fb; --panel:#ffffff; --ink:#172033; --muted:#667085; --line:#d9dee8;
  --primary:#244a86; --primarySoft:#e7eefb; --primarySoft2:#f4f8ff; --danger:#b42318;
  --weekend:#f04438; --holiday:#12b76a; --special:#2e90fa; --vacation:#f6d84a; --military:#7a3db8; --mixed:#93d66b;
  --shadow:0 12px 30px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:Inter,Arial,sans-serif;color:var(--ink)}
h1{margin:2px 0 4px;font-size:30px;letter-spacing:-.03em}
.eyebrow{margin:0;text-transform:uppercase;font-size:12px;letter-spacing:.13em;opacity:.8}
.eyebrow.small{color:var(--primary);opacity:1;margin-bottom:4px}
.subtitle{margin:0;color:#dfe8f6}
.subtitle.dark{color:var(--muted)}
button,.fileBtn{border:1px solid var(--line);background:white;color:var(--ink);padding:10px 13px;border-radius:12px;cursor:pointer;font-weight:700;font-size:14px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
button:hover,.fileBtn:hover{filter:brightness(.98)}
.primary{background:#fff;color:#123a6b;border-color:#fff}
.primaryLight{background:var(--primarySoft);color:var(--primary);border-color:#c8d8f2}
.dangerLight{color:var(--danger);background:#fff5f5}
main{padding:24px 32px 36px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.topbar{display:flex;gap:24px;justify-content:space-between;align-items:flex-start;padding:28px 32px;background:linear-gradient(135deg,#102a4c,#315d9a);color:white}
.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
label{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
select,input{min-height:46px;border:1px solid var(--line);border-radius:12px;padding:0 12px;background:#fff;font-size:15px}
.field{display:flex;flex-direction:column;gap:7px}
.field.grow{flex:1}
.field.full{grid-column:1 / -1}
.hint{color:var(--muted);font-size:14px;max-width:360px;line-height:1.45}

.controls{display:flex;align-items:end;gap:16px;padding:16px;margin-bottom:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px}
.card .label{font-size:13px;color:var(--muted)}
.card .value{font-size:28px;font-weight:850;margin-top:6px}
.card .detail{font-size:13px;color:var(--muted);margin-top:4px}

.legend{display:flex;gap:10px;flex-wrap:wrap;padding:12px 14px;margin-bottom:16px}
.legendItem{padding:8px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.08);font-size:13px;font-weight:800}
.legendItem:before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:7px;vertical-align:-1px;background:currentColor}
.weekend{color:var(--weekend)} .holiday{color:var(--holiday)} .special{color:var(--special)} .vacation{color:#b58b00} .military{color:var(--military)} .mixed{color:#4f8a10}

.rolePanel{display:flex;gap:12px;align-items:center;padding:14px 16px;margin-bottom:16px}
.rolePanel p{margin:3px 0 0;color:var(--muted);font-size:14px;line-height:1.45}
.roleBadge{font-weight:900;border-radius:999px;padding:8px 12px;white-space:nowrap;border:1px solid var(--line)}
.roleBadge.admin{color:var(--primary);background:var(--primarySoft)}
.roleBadge.user{color:#4f8a10;background:#f1f8e9}
.roleBadge.guest{color:#6840a0;background:#f4edff}

.adminPanel{padding:20px;margin-bottom:16px;background:linear-gradient(180deg,#fff,#fbfcff)}
.adminHero{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}
.adminHero h2{margin:0;font-size:26px;letter-spacing:-.03em}
.adminHero p{margin:6px 0 0;color:var(--muted);line-height:1.5;max-width:760px}
.adminCards{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin-bottom:18px}
.adminCard{border:1px solid var(--line);border-radius:18px;padding:18px;background:#fff;box-shadow:0 8px 22px rgba(16,24,40,.04)}
.adminCard.softCard{background:linear-gradient(180deg,#f8fbff,#ffffff)}
.adminCardHead h3{margin:0 0 6px;font-size:19px;letter-spacing:-.02em}
.adminCardHead p{margin:0;color:var(--muted);line-height:1.45}
.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.previewBox{min-height:46px;display:flex;align-items:center;padding:0 12px;border:1px dashed #b8c7de;border-radius:12px;background:var(--primarySoft2);font-weight:800;color:var(--primary)}
.adminCardActions{display:flex;justify-content:flex-end;margin-top:16px}
.rulesList{display:grid;gap:12px;margin-top:16px}
.ruleItem{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border:1px solid var(--line);border-radius:16px;background:#fff}
.ruleItem p{margin:0;color:var(--muted);line-height:1.45}
.ruleBadge{display:inline-flex;align-items:center;justify-content:center;min-width:90px;padding:7px 10px;border-radius:999px;font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.04em;border:1px solid var(--line)}
.ruleBadge.admin{background:var(--primarySoft);color:var(--primary)}
.ruleBadge.user{background:#eef8ea;color:#447b0a}
.ruleBadge.fixed{background:#fff7e8;color:#9a6700}
.adminSectionTitle{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;margin-bottom:12px}
.adminSectionTitle h3{margin:0 0 4px;font-size:20px;letter-spacing:-.02em}
.adminSectionTitle p{margin:0;color:var(--muted)}
.employeeCards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.employeeCard{border:1px solid var(--line);border-radius:18px;padding:16px;background:#fff}
.employeeCardTop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.employeeCardTop h4{margin:0 0 6px;font-size:20px;letter-spacing:-.02em}
.employeeMeta{display:flex;flex-wrap:wrap;gap:10px;font-size:14px;color:var(--muted)}
.metaChip{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-weight:800;font-size:12px;border:1px solid var(--line)}
.metaChip.ok{background:#eef8ea;color:#447b0a}
.metaChip.warn{background:#fff7e8;color:#9a6700}
.employeeAccountTools{display:flex;gap:12px;align-items:end}
.employeeButtons{display:flex;align-items:end}

.planningWrap{overflow:auto;max-height:70vh;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}
.planning table{border-collapse:separate;border-spacing:0;min-width:100%;font-size:13px}
.planning th,.planning td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;min-width:36px;height:34px}
.planning th{position:sticky;background:#f8fafc;z-index:3;font-weight:800}
.planning .monthRow th{top:0;z-index:6;height:30px}
.planning .dayRow th{top:30px;z-index:5}
.planning .monthGroup{background:#eef3fb;color:var(--primary);font-size:12px;letter-spacing:.02em;border-bottom:2px solid #c8d0dc}
.planning .nameHead,.planning .employee{position:sticky;left:0;z-index:4;background:#fff;text-align:left;min-width:230px;padding:0 12px;border-right:2px solid #c8d0dc}
.planning .nameHead{top:0;background:#f8fafc;z-index:5}
.planning .nameHeadGroup{top:0;z-index:7}
.dayHead .dow{font-size:11px;color:var(--muted)} .dayHead .num{font-weight:850}
.today{box-shadow:inset 0 0 0 2px var(--primary)}
.cell{cursor:pointer;transition:.08s;touch-action:none;user-select:none}
.cell:hover{outline:2px solid var(--primary);outline-offset:-2px}
.cell.weekend{background:var(--weekend);color:white;opacity:.82}
.cell.holiday{background:var(--holiday);color:white;opacity:.82}
.cell.special{background:var(--special);color:white}
.cell.vacation{background:var(--vacation);color:#3b2f00}
.cell.military{background:var(--military);color:white}
.cell.mixed{background:linear-gradient(135deg,var(--vacation) 0 50%,var(--holiday) 50% 100%);color:#172033}
.cell.empty{background:#fff}
.cell.protected{cursor:not-allowed}
.cell.protected:hover{outline:2px dashed rgba(16,24,40,.35);outline-offset:-2px}
.cell.editable{box-shadow:inset 0 0 0 1px rgba(36,74,134,.1)}
.monthDivider{border-left:3px solid var(--primary)!important}

.toast{position:fixed;right:24px;bottom:24px;background:#101828;color:white;padding:12px 16px;border-radius:12px;opacity:0;transform:translateY(10px);transition:.2s;z-index:1100}
.toast.show{opacity:1;transform:translateY(0)}

body.modalOpen{overflow:hidden}
.modalOverlay{position:fixed;inset:0;background:rgba(16,24,40,.54);display:none;align-items:center;justify-content:center;padding:20px;z-index:1000}
.modalOverlay.show{display:flex}
.modalCard{position:relative;width:min(920px,100%);max-height:min(92vh,900px);overflow:auto;background:#fff;border-radius:24px;padding:26px;border:1px solid rgba(255,255,255,.35);box-shadow:0 28px 60px rgba(16,24,40,.28)}
.modalClose{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:999px;padding:0;font-size:24px;line-height:1;border:1px solid var(--line);background:#fff;color:var(--ink)}
.modalHeader{padding-right:40px;margin-bottom:18px}
.modalEyebrow{margin:0 0 6px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--primary)}
.modalHeader h2{margin:0 0 8px;font-size:28px;letter-spacing:-.03em}
.modalIntro{margin:0;color:var(--muted);line-height:1.5}
.smallModal{max-width:680px}
.pdfOptions{display:grid;grid-template-columns:1fr;gap:14px;margin:16px 0}
.modalActions{display:flex;gap:16px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.rightActions button{min-width:140px}

.loginScreen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,#102a4c,#315d9a)}
.loginCard{width:min(460px,100%);background:#fff;border-radius:24px;padding:28px;box-shadow:0 24px 70px rgba(16,24,40,.32);display:flex;flex-direction:column;gap:10px}
.loginCard h1{color:var(--ink)}
.errorText{color:var(--danger);font-weight:700;min-height:20px;margin:0}
.loginDivider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin:2px 0}
.loginDivider:before,.loginDivider:after{content:"";height:1px;background:var(--line);flex:1}
.guestLoginBtn{background:var(--primarySoft);color:var(--primary);border-color:#c8d8f2}
.guestHint{margin:0;color:var(--muted);font-size:13px;line-height:1.35}
.passwordWrap{position:relative;display:flex;align-items:center;width:100%}
.passwordWrap input{width:100%;padding-right:96px}
.togglePassword{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:32px;padding:6px 10px;border-radius:8px;box-shadow:none;background:#f8fafc;color:var(--primary);border-color:#d9dee8;font-size:12px;font-weight:800;width:auto}
.smallPasswordWrap input{padding-right:94px}

#typeSelect{font-weight:800;transition:color .15s ease,border-color .15s ease,box-shadow .15s ease}
#typeSelect.type-vacation{color:#b58b00}
#typeSelect.type-special{color:var(--special)}
#typeSelect.type-military{color:var(--military)}
#typeSelect.type-holiday{color:var(--holiday)}
#typeSelect.type-weekend{color:var(--weekend)}
#typeSelect.type-mixed{color:#4f8a10}
#typeSelect.type-clear{color:var(--ink)}
#typeSelect option{font-weight:800;background:#fff}
#typeSelect option[value="vacation"]{color:#b58b00}
#typeSelect option[value="special"]{color:var(--special)}
#typeSelect option[value="military"]{color:var(--military)}
#typeSelect option[value="holiday"]{color:var(--holiday)}
#typeSelect option[value="weekend"]{color:var(--weekend)}
#typeSelect option[value="mixed"]{color:#4f8a10}
#typeSelect option[value="clear"]{color:var(--ink)}

@media(max-width:1200px){
  .employeeCards{grid-template-columns:1fr}
}
@media(max-width:1100px){
  .topbar{padding:22px 20px}
  h1{font-size:26px}
  .controls{display:grid;grid-template-columns:1fr 1fr;align-items:end}
  .hint{grid-column:1 / -1;max-width:none}
  .adminCards{grid-template-columns:1fr}
  .planning th,.planning td{min-width:34px;height:33px}
}
@media(max-width:900px){
  .topbar,.controls,.employeeAccountTools{flex-direction:column;align-items:stretch}
  .actions{justify-content:flex-start}
  main{padding:16px}
  .planning .employee,.planning .nameHead{min-width:180px}
  .formGrid{grid-template-columns:1fr}
  .modalCard{padding:22px;border-radius:20px}
  .modalHeader h2{font-size:24px}
}
@media(max-width:720px){
  body{background:#fff}
  .topbar{padding:20px 16px;border-bottom-left-radius:18px;border-bottom-right-radius:18px}
  .subtitle{font-size:14px}
  .actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  button{width:100%;text-align:center;padding:11px 10px;font-size:13px}
  main{padding:14px 12px 24px}
  .panel{border-radius:16px;box-shadow:0 8px 20px rgba(16,24,40,.05)}
  .controls{grid-template-columns:1fr;gap:12px;padding:14px}
  select,input{width:100%;font-size:16px}
  .card{padding:13px}
  .card .value{font-size:24px}
  .legend{gap:8px;padding:10px;margin-bottom:12px;overflow-x:auto;flex-wrap:nowrap}
  .legendItem{white-space:nowrap;font-size:12px;padding:7px 9px}
  .planningWrap{max-height:68vh;border-radius:12px}
  .planning table{font-size:12px}
  .planning th,.planning td{min-width:31px;height:31px}
  .planning .employee,.planning .nameHead{min-width:128px;max-width:128px;padding:0 8px;font-size:12px;white-space:normal;line-height:1.2}
  .dayHead .dow{font-size:10px}.dayHead .num{font-size:12px}
  .toast{left:12px;right:12px;bottom:14px;text-align:center}
  .rolePanel{align-items:flex-start}
  .roleBadge{white-space:normal}
  .employeeCardTop{flex-direction:column;align-items:stretch}
  .adminPanel{padding:16px}
  .adminHero h2{font-size:22px}
  .actions{grid-template-columns:1fr}
  .modalOverlay{padding:12px}
  .modalCard{padding:18px;border-radius:18px}
  .modalHeader{padding-right:28px}
  .modalHeader h2{font-size:22px}
  .modalActions{align-items:stretch}
  .rightActions{display:grid;grid-template-columns:1fr}
  .rightActions button{min-width:0}
  .togglePassword{right:5px}
}
@media(max-width:420px){
  h1{font-size:23px}
  .planning .employee,.planning .nameHead{min-width:112px;max-width:112px}
  .planning th,.planning td{min-width:29px;height:30px}
}

#loginScreen[hidden], #appShell[hidden]{display:none!important}


.adminPanelContent{display:block}
.adminPanelContent.collapsed{display:none}
.adminToggleBtn{white-space:nowrap;align-self:flex-start}
@media(max-width:720px){.adminToggleBtn{width:100%}}

/* V3 - validation des demandes de vacances */
.roleBadge.supervisor{color:#7a3db8;background:#f4edff}
.ruleBadge.supervisor{background:#f4edff;color:#6840a0}
.legendItem.vacationPending{color:#d97706;background:#fffaf0}
.cell.vacation-pending{background:#fff3cd;color:#8a5a00;background-image:repeating-linear-gradient(135deg,rgba(217,119,6,.13),rgba(217,119,6,.13) 5px,transparent 5px,transparent 10px)}
.cell.vacation-draft{background:#ffe7a8;color:#7a5100;box-shadow:inset 0 0 0 2px #d97706}
.cell.vacation-pending.protected:hover{outline:2px dashed #d97706}

.requestPanel{padding:18px;margin-bottom:16px}
.requestHeader{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}
.requestHeader h2{margin:0;font-size:23px;letter-spacing:-.02em}
.requestHeader p:not(.eyebrow){margin:5px 0 0;color:var(--muted)}
.requestCount{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 8px;margin-left:6px;border-radius:999px;background:#fff3cd;color:#8a5a00;font-size:14px;vertical-align:3px}
.requestList{display:grid;gap:10px}
.requestList.compact{margin-top:10px}
.requestCard{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.requestCard.pending{border-color:#f0c36d;background:#fffcf5}
.requestCard.approved{border-color:#a7d9b8;background:#f6fff9}
.requestCard.rejected{border-color:#efb1ad;background:#fff8f7}
.requestCard.cancelled{opacity:.72}
.requestMain{display:flex;flex-direction:column;gap:3px}
.requestMain span{font-size:14px}
.requestMain small{color:var(--muted);line-height:1.35}
.requestActions{display:flex;gap:8px;flex-wrap:wrap}
.requestHistory{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.requestHistory summary{cursor:pointer;font-weight:800;color:var(--primary)}
.emptyRequests{padding:14px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);background:#fafbfc}

.vacationDraftBar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;margin-bottom:16px;border-color:#f0c36d;background:#fffcf5}
.vacationDraftBar p{margin:4px 0 0;color:var(--muted)}
.vacationDraftActions{display:flex;gap:8px;flex-wrap:wrap}
.employeeSettingsGrid{display:grid;grid-template-columns:180px minmax(220px,1fr) auto;gap:12px;align-items:end;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.employeeSettingsGrid button{min-height:46px}

@media(max-width:900px){
  .employeeSettingsGrid{grid-template-columns:1fr}
  .requestCard,.vacationDraftBar{align-items:stretch;flex-direction:column}
  .requestActions,.vacationDraftActions{width:100%}
  .requestActions button,.vacationDraftActions button{flex:1}
}

/* Panneau des demandes repliable */
.requestPanel.collapsed{padding:12px 16px}
.requestPanel.collapsed .requestHeader{margin-bottom:0;align-items:center}
.requestPanel.collapsed .requestHeader p:not(.eyebrow){display:none}
.requestPanel.collapsed .requestPanelBody{display:none}
.requestToggleBtn{white-space:nowrap;flex:0 0 auto}
@media(max-width:760px){.requestHeader{align-items:stretch;flex-direction:column}.requestToggleBtn{width:100%}}

/* V3.2 - alerte de chevauchement lors des demandes de vacances */
.requestMain{flex:1;min-width:0}
.overlapAlert{margin-top:10px;border:1px solid #f3c27a;border-radius:12px;background:#fff8e8;overflow:hidden}
.overlapAlert summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;padding:10px 12px;font-weight:800;color:#8a4b08;list-style:none}
.overlapAlert summary::-webkit-details-marker{display:none}
.overlapAlert summary:after{content:'−';font-size:18px;line-height:1;margin-left:auto}
.overlapAlert:not([open]) summary:after{content:'+'}
.overlapAlert summary small{margin-left:auto;color:#9a6700;font-weight:700;white-space:nowrap}
.overlapBody{border-top:1px solid #f3d7a7;padding:10px 12px;display:grid;gap:10px}
.overlapSection{display:grid;gap:6px}
.overlapSection>strong{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#7a4b12}
.overlapRow{display:flex;justify-content:space-between;gap:14px;padding:6px 8px;border-radius:9px;background:rgba(255,255,255,.72)}
.overlapRow span{font-weight:800;color:#172033}
.overlapRow small{color:#667085;text-align:right;line-height:1.35}
.overlapClear{margin-top:9px;padding:8px 10px;border-radius:10px;background:#f2fbf5;color:#267a46;font-size:13px;font-weight:700}
@media(max-width:760px){.overlapAlert summary,.overlapRow{align-items:flex-start;flex-direction:column}.overlapAlert summary small{margin-left:0;white-space:normal}.overlapRow small{text-align:left}}

.roleInfo{flex:1;min-width:0}
.accountBtn{margin-left:auto;white-space:nowrap}
.accountOptions{display:grid;grid-template-columns:1fr;gap:14px;margin:16px 0}
.accountOptions input[readonly]{background:#f8fafc;color:var(--muted);font-weight:800;cursor:not-allowed}
.optionalLabel{font-weight:500;color:var(--muted)}
@media(max-width:700px){.rolePanel{flex-wrap:wrap}.accountBtn{width:100%;margin-left:0}.roleInfo{flex:1 1 calc(100% - 130px)}}