:root {
    --ink:#17191c;
    --paper:#f3f1ed;
    --card:#fffdfa;
    --red:#e54832;
    --muted:#85827d;
    --line:#dedbd4;
    --green:#26846c
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font:14px -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif
}
a {
    text-decoration:none;
    color:inherit
}
.shell {
    display:flex;
    min-height:100vh
}
.side {
    width:260px;
    background:#9A2B1F;
    color:#f8f6f1;
    padding:28px 20px;
    display:flex;
    flex-direction:column;
    position:fixed;
    inset:0 auto 0 0
}
.brand {
    font-weight:800;
    letter-spacing:.1em;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:15px
}
.brand small {
    display:block;
    color:rgba(255,255,255,.6);
    font:10px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New';
    letter-spacing:.03em;
    margin-top:4px
}
.brand-mark {
    background:var(--red);
    border-radius:9px;
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:18px
}
.profile {
    border-top:1px solid rgba(255,255,255,.2);
    border-bottom:1px solid rgba(255,255,255,.2);
    padding:22px 0;
    margin:42px 0 25px;
    display:flex;
    gap:11px;
    align-items:center
}
.avatar {
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.35);
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    font:12px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New';
    color:#fff
}
.profile b {
    display:block;
    font-size:12px
}
.profile small {
    display:block;
    color:rgba(255,255,255,.62);
    font:10px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New';
    margin-top:4px
}
nav {
    display:grid;
    gap:2px
}
nav a {
    padding:10px 11px;
    border-radius:8px;
    color:rgba(255,255,255,.72);
    display:flex;
    gap:12px;
    align-items:center;
    font-size:13px;
    font-weight:500;
    position:relative;
    transition:background-color .15s ease,color .15s ease
}
nav a:hover {
    background:rgba(255,255,255,.12);
    color:#fff
}
nav a.active {
    background:var(--red);
    color:#fff
}
nav a.active .nav-icon {
    color:#fff
}
.nav-icon {
    width:30px;
    height:30px;
    border-radius:9px;
    flex:none;
    display:grid;
    place-items:center;
    color:#fff;
    background:rgba(255,255,255,.14);
    transition:transform .15s ease
}
.nav-icon svg {
    width:16px;
    height:16px
}
.nav-icon--home {
    background:#D97847
}
.nav-icon--incidents {
    background:#D9534F
}
.nav-icon--fiches {
    background:#3D7DC9
}
.nav-icon--interventions {
    background:#D9A63D
}
.nav-icon--controles {
    background:#43A47A
}
.nav-icon--remontees {
    background:#8266C9
}
.nav-icon--echeances {
    background:#3FA9B8
}
.nav-icon--equipe {
    background:#C9639A
}
.nav-icon--consignes {
    background:#6E78BD
}
.nav-icon--comptes {
    background:#8B8F94
}
nav a:hover .nav-icon {
    transform:scale(1.06)
}
.nav-divider {
    height:1px;
    background:rgba(255,255,255,.2);
    margin:10px 3px
}
.logout {
    margin-top:auto;
    color:rgba(255,255,255,.65);
    padding:12px 11px;
    font-size:12px;
    display:flex;
    align-items:center;
    gap:12px;
    border-radius:8px;
    transition:background-color .15s ease,color .15s ease
}
.logout .nav-icon {
    color:rgba(255,255,255,.65)
}
.logout:hover {
    background:rgba(255,255,255,.12);
    color:#fff
}
.logout:hover .nav-icon {
    color:#fff
}
.install-btn {
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    border:1px dashed rgba(255,255,255,.35);
    background:rgba(255,255,255,.08);
    color:#fff;
    padding:9px 11px;
    border-radius:8px;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    margin-top:14px;
    transition:background-color .15s ease
}
.install-btn[hidden] {
    display:none
}
.install-btn:hover {
    background:rgba(255,255,255,.18)
}
.ios-tip {
    color:rgba(255,255,255,.6);
    font-size:11px;
    line-height:1.5;
    margin-top:12px
}
.ios-tip[hidden] {
    display:none
}
.main {
    margin-left:260px;
    width:calc(100% - 260px);
    padding:0 6.5vw 70px
}
.app-footer {
    margin-top:60px;
    padding-top:20px;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:11px
}
.top {
    height:82px;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:var(--muted);
    font:10px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New';
    letter-spacing:.08em
}
.hero {
    padding:72px 0 52px;
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px
}
.eyebrow {
    font:10px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New';
    letter-spacing:.12em;
    color:var(--red);
    font-weight:500
}
.hero h1,.page-head h1 {
    font-size:clamp(38px,5vw,72px);
    line-height:.98;
    letter-spacing:-.07em;
    margin:18px 0
}
.hero h1 em,.page-head h1 em {
    font-style:normal;
    color:var(--red)
}
.lead {
    color:var(--muted);
    max-width:390px;
    line-height:1.7
}
.signal {
    border-left:2px solid var(--red);
    padding:10px 0 10px 18px;
    min-width:230px
}
.signal span {
    display:inline-block;
    width:7px;
    height:7px;
    background:#31a77f;
    border-radius:50%;
    margin-right:6px
}
.signal b {
    font:10px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New'
}
.signal small {
    display:block;
    color:var(--muted);
    margin-top:9px;
    font-size:10px
}
.stats {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    margin-bottom:42px
}
.stats>div {
    padding:23px 25px;
    border-right:1px solid var(--line)
}
.stats>div:last-child {
    border:0
}
.stats small,.stats span {
    display:block;
    color:var(--muted);
    font-size:11px
}
.stats strong {
    display:block;
    font-size:30px;
    letter-spacing:-.06em;
    margin:9px 0
}
.good {
    color:var(--green)!important
}
.grid-2,.report-layout {
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:22px
}
.shortcuts {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:14px
}
.shortcut {
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:10px;
    transition:border-color .15s ease,transform .15s ease
}
.shortcut:hover {
    border-color:var(--red);
    transform:translateY(-2px)
}
.shortcut-icon {
    width:34px;
    height:34px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:#fff0eb;
    color:var(--red)
}
.shortcut-icon svg {
    width:18px;
    height:18px
}
.shortcut b {
    font-size:15px;
    letter-spacing:-.01em
}
.shortcut small {
    color:var(--muted);
    line-height:1.5
}
.shortcut-icon--incidents {
    background:#fdeceb;
    color:#D9534F
}
.shortcut-icon--interventions {
    background:#fbf1de;
    color:#B9860A
}
.shortcut-icon--controles {
    background:#e6f4ee;
    color:#2f8f66
}
.shortcut-icon--remontees {
    background:#f0ebfa;
    color:#7053b5
}
.shortcut-icon--echeances {
    background:#e6f5f7;
    color:#2f8fa0
}
.shortcut-icon--equipe {
    background:#fbeaf2;
    color:#c14e85
}
.kpi-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px
}
.kpi {
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:22px;
    position:relative
}
.kpi-icon {
    width:38px;
    height:38px;
    border-radius:10px;
    display:grid;
    place-items:center;
    margin-bottom:16px
}
.kpi-icon svg {
    width:19px;
    height:19px
}
.kpi-icon--interventions {
    background:#fbf1de;
    color:#B9860A
}
.kpi-icon--incidents {
    background:#fdeceb;
    color:#D9534F
}
.kpi-icon--echeances {
    background:#e6f5f7;
    color:#2f8fa0
}
.kpi-icon--equipe {
    background:#fbeaf2;
    color:#c14e85
}
.kpi strong {
    display:block;
    font-size:34px;
    letter-spacing:-.04em;
    line-height:1
}
.kpi small {
    display:block;
    color:var(--muted);
    margin-top:6px;
    font-size:12px
}
.kpi-tag {
    position:absolute;
    top:22px;
    right:22px;
    font:10px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New';
    padding:4px 9px;
    border-radius:20px
}
.kpi-tag--alert {
    background:#fff0eb;
    color:var(--red)
}
.kpi-tag--ok {
    background:#e4f2ed;
    color:var(--green)
}
.feature,.panel {
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:30px
}
.feature {
    min-height:260px;
    position:relative;
    overflow:hidden
}
.feature:after {
    content:'✦';
    position:absolute;
    right:28px;
    bottom:-20px;
    color:#f0ece5;
    font-size:160px
}
.feature-icon {
    color:var(--red);
    font-size:25px;
    margin-bottom:40px
}
.feature h2,.panel h2 {
    font-size:22px;
    letter-spacing:-.05em;
    margin:9px 0
}
.feature p,.panel p {
    color:var(--muted);
    line-height:1.65
}
.arrow,.notice a {
    display:block;
    color:var(--red);
    font-weight:700;
    font-size:12px;
    margin-top:26px
}
.notice {
    background:var(--red);
    color:white;
    border:0
}
.notice .eyebrow,.notice p,.notice a {
    color:#ffd4cc
}
.notice h2 {
    font-size:30px
}
.page-head {
    padding:60px 0 35px
}
.page-head h1 {
    font-size:clamp(40px,5vw,64px)
}
.page-head p {
    color:var(--muted)
}
.table-wrap {
    overflow:auto
}
table {
    width:100%;
    border-collapse:collapse;
    margin-top:20px;
    text-align:left;
    font-size:12px
}
th {
    font:10px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New';
    color:var(--muted);
    text-transform:uppercase;
    padding:0 12px 13px;
    border-bottom:1px solid var(--line)
}
td {
    padding:16px 12px;
    border-bottom:1px solid #eeeae3;
    vertical-align:top
}
.row-link {
    cursor:pointer;
    transition:background-color .12s ease
}
.row-link:hover {
    background:#f8f5ef
}
td small {
    display:block;
    color:var(--muted);
    margin-top:5px;
    max-width:260px
}
.badge {
    padding:5px 9px;
    border-radius:20px;
    font:10px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New';
    white-space:nowrap
}
.badge-good {
    background:#e4f2ed;
    color:var(--green)
}
.badge-alert {
    background:#fff0eb;
    color:var(--red)
}
.badge-off {
    background:#eee;
    color:#777
}
.badge-warn {
    background:#fdf1de;
    color:#a5680b
}
.form {
    display:grid;
    gap:14px;
    align-content:start
}
.form h2 {
    margin:0 0 8px
}
.form label {
    font-size:11px;
    font-weight:700
}
.form input,.form select,.form textarea {
    width:100%;
    border:1px solid var(--line);
    border-radius:9px;
    padding:12px;
    background:#fff;
    font:12px -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
    margin-top:6px;
    color:var(--ink)
}
.form textarea {
    resize:vertical
}
.switch {
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    user-select:none
}
.switch input {
    position:absolute;
    opacity:0;
    width:0;
    height:0
}
.switch-track {
    width:40px;
    height:23px;
    background:#e2ded6;
    border-radius:999px;
    position:relative;
    flex:none;
    transition:background-color .15s ease
}
.switch-track:before {
    content:'';
    position:absolute;
    top:2px;
    left:2px;
    width:19px;
    height:19px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 3px rgba(23,25,28,.35);
    transition:transform .15s ease
}
.switch input:checked+.switch-track {
    background:var(--green)
}
.switch input:checked+.switch-track:before {
    transform:translateX(17px)
}
.switch input:focus-visible+.switch-track {
    outline:2px solid var(--red);
    outline-offset:2px
}
.button {
    border:0;
    border-radius:9px;
    background:var(--ink);
    color:#fff;
    padding:14px 18px;
    font-weight:700;
    cursor:pointer
}
.button:hover {
    background:var(--red)
}
.success,.alert {
    padding:14px 18px;
    margin-bottom:20px;
    border-radius:10px;
    background:#e4f2ed;
    color:var(--green)
}
.alert {
    background:#fff0eb;
    color:var(--red)
}
.link-btn {
    border:0;
    background:none;
    color:var(--red);
    cursor:pointer;
    font-size:11px
}
.prose {
    max-width:800px
}
.rule {
    padding:23px 0;
    border-bottom:1px solid var(--line)
}
.rule:first-child {
    padding-top:0
}
.rule b {
    font:11px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New';
    color:var(--red)
}
.login {
    min-height:100vh;
    display:grid;
    grid-template-columns:1.1fr .9fr
}
.login-art {
    background:var(--ink);
    color:#fff;
    padding:55px 8vw;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:relative;
    overflow:hidden
}
.login-art:after {
    content:'✦';
    position:absolute;
    color:#2b2d31;
    font-size:500px;
    right:-100px;
    bottom:-200px
}
.brand-light {
    font-weight:800;
    letter-spacing:.12em;
    position:relative;
    z-index:1
}
.login-art h1 {
    font-size:clamp(46px,6vw,82px);
    line-height:.95;
    letter-spacing:-.08em;
    position:relative;
    z-index:1
}
.login-art h1 em {
    font-style:normal;
    color:#f2634d
}
.login-art p {
    color:#aaa;
    max-width:300px;
    position:relative;
    z-index:1;
    line-height:1.7
}
.login-art>small {
    font:9px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New';
    color:#777;
    letter-spacing:.1em;
    position:relative;
    z-index:1
}
.login-form {
    align-self:center;
    max-width:390px;
    width:75%;
    margin:auto;
    display:grid;
    gap:18px
}
.login-form h2 {
    font-size:38px;
    letter-spacing:-.06em;
    margin:0
}
.login-form p {
    color:var(--muted);
    margin:-8px 0 12px
}
.login-form label {
    font-size:11px;
    font-weight:700
}
.login-form input {
    display:block;
    width:100%;
    padding:15px;
    border:1px solid var(--line);
    border-radius:9px;
    margin-top:7px;
    font:13px -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif
}
.muted {
    color:var(--muted);
    text-align:center;
    font-size:10px
}
.error {
    display:grid;
    place-items:center;
    height:100vh
}
.error .panel {
    max-width:460px
}
.error h1 {
    font-size:42px;
    letter-spacing:-.06em
}
.side-top {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px
}
.side-close,.menu-toggle {
    display:none;
    border:0;
    background:none;
    color:#f3d9d5;
    padding:4px;
    cursor:pointer
}
.side-close svg,.menu-toggle svg {
    width:22px;
    height:22px
}
.side-backdrop {
    display:none
}
@media(max-width:800px) {
.menu-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:fixed;
    top:14px;
    left:16px;
    z-index:45;
    width:38px;
    height:38px;
    background:#9A2B1F;
    color:#f8f6f1;
    border-radius:9px
}
.side-close {
    display:inline-flex
}
.side {
    width:82vw;
    max-width:300px;
    transform:translateX(-100%);
    transition:transform .25s ease;
    z-index:50;
    overflow-y:auto
}
.side.open {
    transform:translateX(0)
}
.side-backdrop {
    display:block;
    position:fixed;
    inset:0;
    background:rgba(23,25,28,.55);
    z-index:44;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease
}
.side-backdrop.open {
    opacity:1;
    pointer-events:auto
}
.brand span:last-child,.profile div,nav a span:not(.nav-icon),.logout span:not(.nav-icon) {
    display:initial
}
nav a,.logout {
    justify-content:flex-start
}
.profile {
    justify-content:flex-start
}
.main {
    margin-left:0;
    width:100%;
    padding:0 5vw 60px
}
.top {
    height:auto;
    padding:64px 0 18px;
    flex-wrap:wrap;
    gap:6px
}
.page-head {
    padding:20px 0 28px
}
.page-head h1,.hero h1 {
    font-size:clamp(32px,9vw,44px);
    letter-spacing:-.04em
}
.hero {
    display:block;
    padding:24px 0 36px
}
.lead {
    max-width:none
}
.signal {
    margin-top:30px;
    min-width:0
}
.stats {
    grid-template-columns:1fr
}
.stats>div {
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:18px 4px
}
.grid-2,.report-layout {
    grid-template-columns:1fr;
    gap:16px
}
.feature,.panel {
    padding:20px
}
table {
    font-size:12px
}
th,td {
    padding:10px 8px
}
.login {
    display:block
}
.login-art {
    min-height:38vh;
    padding:26px 8vw
}
.login-art h1 {
    font-size:40px
}
.login-form {
    width:88%;
    padding:44px 0
}
}



/* Modale de réinitialisation du mot de passe */
.modal-overlay {
    position:fixed;
    inset:0;
    z-index:20;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(23,25,28,.72)
}

.modal-overlay[hidden] {
    display:none
}

.modal-box {
    position:relative;
    width:min(100%,440px);
    padding:32px;
    background:var(--card);
    border-radius:16px;
    border-top:4px solid var(--red);
    box-shadow:0 18px 60px rgba(23,25,28,.28)
}

.modal-box h2 {
    font-size:28px;
    letter-spacing:-.06em;
    margin:13px 38px 8px 0
}

.modal-box p {
    color:var(--muted);
    line-height:1.6;
    margin:0 0 22px
}

.modal-box .form {
    gap:14px
}

.modal-close {
    position:absolute;
    top:16px;
    right:18px;
    border:0;
    background:none;
    color:var(--muted);
    font-size:28px;
    line-height:1;
    cursor:pointer
}

.modal-close:hover {
    color:var(--red)
}

.modal-actions {
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:4px
}

.modal-cancel {
    border:0;
    background:none;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    padding:14px 0
}

.modal-cancel:hover {
    color:var(--red)
}

td>form select {
    font-size:11px;
    padding:7px 8px;
    border:1px solid var(--line);
    border-radius:7px;
    background:#fff;
    color:var(--ink)
}

.account-actions {
    white-space:nowrap
}

.account-actions form {
    display:inline
}

.account-actions .link-btn {
    margin:0 8px 4px 0;
    padding:0
}