/* Guide salarié — styles isolés de l'interface métier. */
.employee-guide-trigger span { font-family:inherit; font-size:21px; font-weight:650; line-height:1; }
.modal.employee-guide-modal { width:min(1060px,100%); height:min(780px,calc(100svh - 40px)); max-height:calc(100dvh - 40px); overflow:hidden; display:flex; flex-direction:column; animation:guide-open .16s ease-out both; }
.employee-guide-modal .modal-header { flex:none; }
.employee-guide-modal>.modal-body { flex:1; min-height:0; padding:0; overflow-x:hidden; overflow-y:auto; scrollbar-gutter:stable; overflow-anchor:none; overscroll-behavior:contain; scroll-behavior:auto; }
.employee-guide { --guide-green:#17543b; --guide-red:#812d2d; --guide-tint:#eef4e9; --guide-white:var(--card,#fff); text-align:left; color:var(--ink); }
.employee-guide button,.employee-guide a { -webkit-tap-highlight-color:transparent; }
.employee-guide button:focus-visible,.employee-guide a:focus-visible,.employee-guide-trigger:focus-visible { outline:3px solid #82b269; outline-offset:4px; }
.employee-guide .icon { width:20px; height:20px; flex:none; }
.guide-steps { position:sticky; top:0; z-index:4; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:6px; padding:18px 26px; background:var(--guide-white); }
.guide-step { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:7px; position:relative; min-height:66px; padding:9px 3px; border:0; border-radius:12px; color:var(--muted); background:transparent; font-size:10px; font-weight:650; cursor:pointer; transition:background .2s,color .2s,box-shadow .2s; }
.guide-step::after { content:''; position:absolute; inset:auto 15% 0; height:2px; background:var(--line); border-radius:3px; }
.guide-step.is-past::after { background:#7bab69; }
.guide-step.is-current { background:var(--guide-tint); color:var(--guide-green); box-shadow:inset 0 1px 0 #ffffffaa,0 4px 12px #173e240b; }
.guide-step.is-current::after { background:var(--guide-green); }
.guide-step:hover { background:var(--guide-tint); }
.guide-content { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:start; min-height:360px; gap:24px; padding:6px 26px 24px; }
.guide-content.has-form .guide-stage { padding:0; border:0; background:transparent; }
.guide-copy { padding:30px 6px 12px; align-self:start; }
.guide-title { margin:0 0 14px; font-size:30px; font-weight:650; line-height:1.16; letter-spacing:-1px; outline:none; text-wrap:balance; }
.guide-copy>p { margin:0; color:var(--muted); font-size:14px; line-height:1.65; }
.guide-tip { display:flex; align-items:flex-start; gap:11px; margin-top:24px; padding-top:18px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); line-height:1.6; }
.guide-tip .icon { color:var(--guide-green); margin-top:1px; width:18px; }
.guide-stage { position:relative; isolation:isolate; display:grid; align-items:start; min-width:0; min-height:360px; padding:22px; border:1px solid #dbe6d4; border-radius:22px; background:var(--guide-tint); }
.guide-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:10px 15px; border:1px solid var(--line); border-radius:13px; background:var(--guide-white); color:var(--ink); font:650 12px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; cursor:pointer; transition:background .18s,transform .18s; }
.guide-button:hover:not(:disabled) { transform:translateY(-1px); background:var(--guide-tint); }
.guide-button.is-primary { background:var(--guide-green); color:#fff; border-color:var(--guide-green); box-shadow:0 5px 13px #123c2514; }
.guide-button.is-primary:hover:not(:disabled) { background:#0e3c2c; }
.guide-button.is-selected { color:var(--guide-green); border-color:#81a877; background:var(--guide-tint); }
.guide-button:disabled { opacity:.5; cursor:default; }
.guide-button.is-primary:disabled { opacity:.85; }
/* Même matière et reflet pour les commandes de chaque rubrique. Aucun zoom du fond. */
.guide-stage :is(.btn,.guide-button,.guide-icon-button,.notification-status-button) { position:relative; isolation:isolate; box-shadow:inset 0 1px 0 #ffffff80,0 5px 14px #173e2412; transition:background .18s,color .18s,border-color .18s,box-shadow .18s; }
.guide-stage :is(.btn,.guide-button,.guide-icon-button,.notification-status-button)::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(115deg,transparent 15%,#ffffff38 40%,#ffffff0a 60%,transparent 85%); background-size:240% 100%; background-position:100% 0; opacity:.5; transition:background-position .65s ease,opacity .2s; }
.guide-stage :is(.btn,.guide-button,.guide-icon-button,.notification-status-button):is(:hover,:focus-visible):not(:disabled) { transform:none; box-shadow:inset 0 1px 0 #ffffff99,0 8px 20px #173e2420; }
.guide-stage :is(.btn,.guide-button,.guide-icon-button,.notification-status-button):is(:hover,:focus-visible):not(:disabled)::after { background-position:0 0; opacity:1; }
.guide-stage :is(.btn,.guide-button,.guide-icon-button,.notification-status-button):active:not(:disabled) { box-shadow:inset 0 2px 5px #173e2418; }
.guide-stage :is(.btn,.guide-button):disabled::after { display:none; }
.guide-wide { width:100%; }
.guide-target { position:relative; }
.guide-highlight { outline:2px solid #88b36d; outline-offset:3px; animation:guide-highlight-glow 2.6s ease-in-out infinite; }
.guide-hint { display:flex; align-items:flex-start; gap:9px; margin:18px 0; padding:12px; border:1px solid #97bf82; border-radius:12px; background:#edf5df; color:#234f36; font-size:11px; line-height:1.65; text-align:left; }
.guide-hint>.icon { width:16px; height:16px; margin-top:2px; transform:rotate(90deg); }
.guide-mini-body>.guide-hint:first-child { margin-top:0; }
.guide-cue { position:absolute; display:flex; flex-direction:column; align-items:center; pointer-events:none; z-index:3; color:var(--guide-green); right:-7px; top:-56px; }
.guide-cue span { padding:6px 10px; border:1px solid #325f36; border-radius:8px; background:#ecf6c9; color:#173b27; font-size:11px; font-weight:750; white-space:nowrap; box-shadow:0 3px 12px #183c2e26; }
.guide-cue svg { width:48px; height:36px; stroke:#204e32; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; animation:guide-cue 2.8s ease-in-out infinite; overflow:visible; }
.guide-cue .guide-cue-outline { stroke:#f8ffe9; stroke-width:8; }
.guide-clock-scene { text-align:center; }
.guide-clock-target { position:relative; margin:34px auto 0; }
.guide-clock-target .guide-cue { top:-20px; left:50%; right:auto; translate:-50% 0; }
.guide-feedback { font-size:11px; line-height:1.6; color:var(--muted); margin:13px 0 0; text-align:center; min-height:34px; }
.guide-mini-card { position:relative; background:var(--guide-white); border:1px solid var(--line); border-radius:17px; box-shadow:0 12px 30px #173e2410; overflow:visible; min-width:0; }
.guide-mini-header { display:flex; align-items:center; gap:8px; min-height:53px; padding:14px; border-bottom:1px solid var(--line); font-size:12px; }
.guide-mini-header>.icon { color:var(--guide-green); width:17px; }
.guide-mini-header>strong { font-weight:650; }
.guide-mini-body { padding:15px; }
.guide-request-start { padding:25px 15px; text-align:center; display:flex; align-items:center; flex-direction:column; gap:16px; }
.guide-request-start>strong { font-size:14px; font-weight:600; }
.guide-request-start .guide-target { margin-top:8px; padding-top:76px; }
.guide-request-start .guide-cue { top:0; left:50%; right:auto; translate:-50% 0; }
.guide-large-icon { display:grid; place-items:center; width:66px; height:66px; margin:0 auto; border-radius:21px; background:var(--guide-tint); color:var(--guide-green); border:1px solid #d3dfca; }
.guide-large-icon .icon { width:29px; height:29px; }
.guide-mini-note { font-size:11px; line-height:1.65; color:var(--muted); margin:18px 0; }
.guide-profile-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:14px 14px 0; }
.guide-profile-tabs .guide-button { flex:1; min-width:0; padding:9px 4px; font-size:11px; }
.guide-setting-label { display:block; margin:4px 0 16px; font-size:12px; font-weight:650; }
.guide-style-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 8px; }
.guide-style-choice { display:flex; align-items:center; gap:9px; min-width:0; padding:8px; border:1px solid var(--line); border-radius:13px; background:var(--guide-white); color:var(--ink); text-align:left; font-family:inherit; font-size:10px; font-weight:600; line-height:1.4; cursor:pointer; }
.guide-style-choice.is-selected { border-color:#81a877; background:var(--guide-tint); }
.guide-style-choice .clock-button-swatch { width:34px; height:34px; flex-basis:34px; pointer-events:none; }
.guide-style-choice .clock-button-swatch[data-selected="true"]>span { opacity:1; }
.guide-style-description { margin:0; color:var(--muted); text-align:center; font-size:10px; line-height:1.6; }
.guide-style-preview { margin-top:-15px; }
.guide-photo-row { display:flex; align-items:center; gap:14px; margin-bottom:16px; font-size:13px; }
.guide-photo-avatar { position:relative; display:grid; place-items:center; width:72px; height:72px; flex:none; border:1px solid var(--line); border-radius:17px; color:var(--guide-green); background:var(--guide-tint); font-size:22px; font-weight:600; overflow:hidden; }
.guide-photo-avatar.has-photo { background:#d1e0c2; color:#4b6856; }
.guide-photo-avatar>.icon { width:60px; height:60px; transform:translateY(8px); }
.guide-photo-avatar .profile-avatar-delete { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); }
.guide-photo-crop { width:min(200px,100%); aspect-ratio:1; position:relative; display:grid; place-items:center; margin:5px auto 0; border:2px solid #7bab69; border-radius:22px; background:#d1e0c2; overflow:hidden; }
.guide-photo-portrait { color:#4b6856; transform:translateY(24px); }
.guide-photo-portrait .icon { width:170px; height:170px; stroke-width:1; }
.guide-crop-grid { position:absolute; inset:0; background:linear-gradient(90deg,transparent 33%,#ffffff88 33% 33.5%,transparent 33.5% 66%,#ffffff88 66% 66.5%,transparent 66.5%),linear-gradient(transparent 33%,#ffffff88 33% 33.5%,transparent 33.5% 66%,#ffffff88 66% 66.5%,transparent 66.5%); }
.guide-reminder { display:grid; justify-items:center; gap:12px; border:1px solid var(--line); border-radius:17px; padding:18px 12px; text-align:center; }
.guide-reminder>span { color:var(--guide-green); }
.guide-reminder>strong { font-size:13px; font-weight:600; }
.guide-reminder>div { display:flex; gap:10px; width:100%; }
.guide-reminder>div>span { flex:1; border-radius:12px; padding:10px; font-size:12px; font-weight:650; color:#fff; }
.guide-reminder-ok { background:#17543b; }.guide-reminder-stop { background:#812d2d; }
.guide-reminder-intro { margin:16px 0 10px; font-size:11px; line-height:1.65; color:var(--muted); }
.guide-reminder-intro strong { color:var(--ink); font-weight:650; }
.guide-reminder-cadence { margin-bottom:16px; padding:10px 12px; border-radius:12px; background:var(--guide-tint); color:var(--guide-green); }
.guide-reminder-cadence strong { display:block; font-size:12px; font-weight:650; line-height:1.8; }
.guide-reminder-cadence span { display:block; margin-top:3px; font-size:10px; line-height:1.6; color:var(--muted); }
.guide-reminder-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; width:100%; margin:0; text-align:left; font-size:10px; line-height:1.6; }
.guide-reminder-choices dt { font-weight:650; color:var(--ink); }
.guide-reminder-choices dd { margin:4px 0 0; color:var(--muted); }
.guide-reminder-stop-rule { margin-bottom:0; font-size:10px; }
.guide-profile-intro { text-align:center; }
.guide-profile-intro>p { font-size:12px; color:var(--muted); margin:17px 0 70px; }
.guide-profile-strip { display:flex; align-items:center; gap:11px; background:var(--guide-green); color:#fff; border-radius:16px; padding:16px; text-align:left; font-size:12px; box-shadow:0 9px 20px #0c281c18; }
.guide-avatar { display:grid; place-items:center; width:36px; height:36px; border:1px solid #ffffff33; border-radius:11px; background:#ffffff16; color:#cfebb4; font-size:12px; font-weight:700; }
.guide-profile-strip small { display:block; font-size:9px; margin-top:5px; color:#d1ddcc; }
.guide-profile-strip .guide-target { margin-left:auto; }
.guide-profile-strip .guide-icon-button { color:white; }
.guide-profile-strip .guide-highlight { outline:2px solid #e5f7bc; outline-offset:4px; background:#ffffff17; box-shadow:0 0 0 7px #ceeba425; animation:none; }
.guide-profile-strip .guide-cue { top:-65px; right:-6px; }
.guide-icon-button { display:grid; place-items:center; position:relative; width:42px; height:42px; padding:0; background:transparent; color:var(--guide-green); border:1px solid transparent; border-radius:12px; cursor:pointer; }
.guide-icon-button:hover { border-color:#9bc58b; }
.guide-fake-field { margin:0 0 11px; }
.guide-fake-field small { display:block; font-size:9px; color:var(--muted); margin-bottom:5px; }
.guide-fake-field>span { display:block; border:1px solid var(--line); border-radius:11px; padding:8px 10px; font-size:15px; letter-spacing:2px; color:#7b8e73; user-select:none; }
.guide-bell-intro { text-align:center; }
.guide-notifications-close { position:absolute!important; top:7px; right:7px; width:36px; height:36px; }
.guide-notification-setting { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px; border:1px solid var(--line); border-radius:13px; background:var(--guide-tint); }
.guide-notification-setting strong { display:block; font-size:11px; font-weight:650; }
.guide-notification-setting small { display:block; margin-top:5px; color:var(--muted); font-size:10px; }
.guide-notification-toggle { flex:none; }
.guide-example-notification { display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:12px; padding:13px 10px; margin-top:18px; }
.guide-example-notification>.icon { color:var(--guide-green); }
.guide-example-notification strong { display:block; font-size:10px; font-weight:650; }
.guide-example-notification small { display:block; font-size:9px; color:var(--muted); margin-top:4px; }
.guide-extra-tip { display:flex; gap:10px; align-items:flex-start; margin-top:22px; color:var(--muted); }
.guide-extra-tip>.icon { width:16px; color:var(--guide-green); }
.guide-extra-tip p { margin:0; font-size:10px; line-height:1.6; }
.guide-extra-tip strong { display:block; margin-bottom:4px; color:var(--ink); }
.guide-install-scene { text-align:center; }
.guide-platforms { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0 auto 22px; max-width:370px; }
.guide-platforms .guide-button { position:relative; justify-content:flex-start; gap:12px; min-width:0; min-height:72px; padding:12px 16px; border:1px solid #b4c7b8; border-radius:15px; text-align:left; }
.guide-platforms .guide-button>svg { width:27px; height:30px; }
.guide-platforms .guide-button strong { display:block; font-size:14px; font-weight:650; }
.guide-platforms .guide-button small { display:block; font-size:10px; margin-top:4px; font-weight:500; color:var(--muted); }
.guide-platforms .guide-button.is-selected { color:white; background:#17543b; border-color:#17543b; box-shadow:0 4px 12px #123c251c; }
.guide-platforms .guide-button.is-selected small { color:#d5e6d4; }
.guide-platforms .guide-button.is-selected .guide-android-logo circle { fill:#17543b; }
.guide-platform-check { position:absolute; top:-6px; right:-5px; display:grid; place-items:center; width:22px; height:22px; border:2px solid var(--card); border-radius:50%; background:#b8d593; color:#1b4c31; }
.guide-platform-check .icon { width:13px; height:13px; }
.guide-phone { position:relative; display:flex; align-items:stretch; width:min(208px,100%); min-height:408px; margin:0 auto; padding:31px 14px 27px; border:5px solid #183c2e; border-radius:29px; background:var(--guide-white); box-shadow:7px 10px 0 #ccdac2; }
.guide-phone-page { display:flex; flex-direction:column; width:100%; }
.guide-phone-speaker { position:absolute; top:9px; left:calc(50% - 16px); width:32px; height:4px; border-radius:5px; background:#183c2e; }
.guide-phone-bar { position:absolute; bottom:8px; left:calc(50% - 23px); width:46px; height:3px; border-radius:5px; background:#9aaf93; }
.guide-phone-page>small { display:block; font-size:9px; color:var(--muted); }
.guide-phone-brand { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:9px; color:var(--guide-green); font-size:14px; font-weight:650; }
.guide-install-steps { padding-left:17px; margin:17px 0; text-align:left; color:var(--muted); font-size:10px; line-height:1.55; }
.guide-install-steps li { padding-left:3px; margin-bottom:8px; }
.guide-install-steps li::marker { color:var(--guide-green); font-weight:700; }
.guide-install-steps b { color:var(--ink); font-weight:600; }
.guide-source { display:inline-flex; align-items:center; gap:3px; margin-top:17px; color:var(--muted); font-size:9px; text-underline-offset:3px; }
.guide-source .icon { width:10px; height:10px; transform:rotate(135deg); }
@keyframes guide-open { from{opacity:0} to{opacity:1} }
@keyframes guide-cue { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }
@keyframes guide-highlight-glow { 0%,100%{outline-color:#a4c68c;box-shadow:0 0 0 3px #99c1781a} 50%{outline-color:#618c47;box-shadow:0 0 0 6px #99c17829} }
[data-theme="dark"] .employee-guide { --guide-tint:#1d3228; --guide-green:#98c87c; --guide-red:#842f31; }
[data-theme="dark"] .guide-button.is-primary,[data-theme="dark"] .guide-profile-strip { background:#20563b; color:#fff; border-color:#427154; }
[data-theme="dark"] .guide-hint { background:#254531; color:#d7eaca; border-color:#7ea568; }
[data-theme="dark"] .guide-platforms .guide-button.is-selected { background:#20563b; border-color:#83ac6f; }
[data-theme="dark"] .guide-platforms .guide-button.is-selected .guide-android-logo circle { fill:#20563b; }
[data-theme="dark"] .guide-stage,[data-theme="dark"] .guide-large-icon { border-color:#3b5541; }
[data-theme="dark"] .guide-phone { border-color:#5b7d60; box-shadow:7px 10px 0 #263d2c; }
@media(max-width:620px) {
  .modal.employee-guide-modal { height:calc(100svh - 24px); max-height:calc(100dvh - 24px); border-radius:22px; }
  .guide-steps { padding:14px 12px 12px; gap:2px; }
  .guide-step { min-height:55px; font-size:8px; gap:6px; }
  .guide-step .icon { width:17px; height:17px; }
  .guide-content,.guide-content.has-form { grid-template-columns:1fr; gap:17px; padding:0 16px 19px; min-height:0; }
  .guide-copy { padding:6px 1px 0; }
  .guide-title { font-size:25px; line-height:1.15; margin:10px 0; }
  .guide-copy>p { font-size:12px; line-height:1.55; }
  .guide-tip { padding-top:10px; margin-top:12px; font-size:10px; gap:8px; line-height:1.5; }
  .guide-tip .icon { width:15px; height:15px; }
  .guide-stage { padding:18px; border-radius:17px; }
  .guide-cue span { font-size:10px; }
  .guide-feedback { min-height:0; font-size:10px; }
  .guide-platforms { gap:8px; }
  .guide-platforms .guide-button { padding:10px; gap:7px; min-height:68px; }
  .guide-platforms .guide-button>svg { width:23px; height:26px; }
  .guide-platforms .guide-button strong { font-size:12px; }
  .guide-platforms .guide-button small { font-size:9px; }
}
@media(max-width:360px) {
  .guide-content,.guide-content.has-form { padding-left:12px; padding-right:12px; }
  .guide-stage { padding:12px; }
  .guide-mini-body { padding:12px; }
  .guide-step span { font-size:7px; letter-spacing:-.1px; }
  .guide-profile-strip { padding:12px; gap:7px; }
  .guide-style-choice { flex-direction:column; text-align:center; padding:10px 4px; min-height:80px; }
  .guide-platforms .guide-button { flex-direction:column; text-align:center; justify-content:center; padding:10px 7px; }
}
@media(prefers-reduced-motion:reduce) {
  .modal.employee-guide-modal { animation:none; }
  .employee-guide *,.employee-guide *::before,.employee-guide *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .guide-cue path { stroke-dashoffset:0; }
}