@font-face {
    font-family:'DM Sans';
    font-style:normal;
    font-weight:400;
    src:url('../fonts/dm-sans-latin-400-normal.woff2')
}
@font-face {
    font-family:'DM Sans';
    font-style:normal;
    font-weight:600;
    src:url('../fonts/dm-sans-latin-600-normal.woff2')
}
@font-face {
    font-family:Manrope;
    font-style:normal;
    font-weight:700;
    src:url('../fonts/manrope-latin-700-normal.woff2')
}
:root {
    --green:#e5c900;
    --dark:#151515;
    --muted:#737373;
    --border:#e4e4df;
    color:#222;
    background:#f6f6f3
}
body {
    color:#222
}
h1,h2,h3 {
    font-family:Manrope,'DM Sans',sans-serif
}
a {
    color:inherit
}
button {
    color:#181818
}
button.secondary {
    background:#fff;
    border-color:var(--border)
}
.brand-image {
    width:185px;
    max-width:100%;
    height:auto;
    object-fit:contain
}
.sidebar {
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:250px;
    background:#171717;
    color:#f7f7f7;
    display:flex;
    flex-direction:column;
    padding:24px 18px;
    z-index:30
}
.sidebar .brand {
    flex-shrink:0;
    display:block
}
.sidebar .brand small {
    display:block;
    margin:12px 0;
    color:#bdbdb4
}
.sidebar nav {
    flex:1;
    min-height:0;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:#555 transparent;
    display:flex;
    flex-direction:column;
    gap:3px
}
.sidebar nav a {
    flex-shrink: 0;
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    padding:11px 12px;
    border-radius:7px;
    color:#d0d0c8
}
.sidebar nav .nav-icon {
    width:20px;
    flex:0 0 20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    line-height:1;
    opacity:.9
}
.sidebar nav a:hover,.sidebar nav a.active {
    background:#e5c900;
    color:#111
}
.sidebar-bottom {
    flex-shrink:0;
    margin-top:15px;
    display:grid;
    gap:8px
}
.sidebar-bottom small {
    color:#c6c6c6
}
.sidebar-bottom button {
    font-size:12px;
    padding:8px
}
.workspace {
    margin-left:250px;
    min-width:0
}
.topbar {
    position:sticky;
    top:0;
    z-index:15;
    height:78px;
    background:#ffffffed;
    border-bottom:1px solid var(--border);
    padding:16px 30px;
    display:flex;
    gap:20px;
    align-items:center;
    justify-content:space-between
}
.topbar .search {
    position:relative;
    flex:1;
    max-width:650px
}
.topbar input {
    width:100%
}
#menu-toggle {
    display:none
}
#content {
    padding:28px 32px;
    min-width:0;
    max-width:1800px;
    margin:auto
}
.page-title {
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    margin-bottom:24px
}
.page-title h1 {
    font-size:30px;
    margin:6px 0
}
.page-title p {
    color:#737373
}
.cards {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%, 240px),1fr));
    gap:18px;
    margin-bottom:24px
}
.metric {
    padding:22px;
    background:white;
    border:1px solid var(--border);
    border-radius:12px
}
.metric strong {
    display:block;
    font:700 29px Manrope;
    margin:10px 0
}
.panel {
    margin-bottom:22px;
    border-radius:12px;
    overflow:visible
}
.padded {
    padding:22px
}
.panel-heading {
    padding:18px 22px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px
}
.panel-heading h2 {
    margin:0;
    font-size:20px
}
.table-wrap {
    max-width:100%;
    overflow:auto
}
table {
    width:100%;
    border-collapse:collapse
}
th,td {
    padding:13px 16px;
    border-bottom:1px solid var(--border);
    text-align:left;
    vertical-align:top
}
th {
    font-size:12px;
    color:#777;
    background:#fafaf8
}
td .actions {
    min-width:130px
}
.actions {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center
}
.actions button {
    padding:8px 12px
}
.badge {
    display:inline-flex;
    border-radius:6px;
    background:#eeefdf;
    padding:5px 9px;
    font-size:12px;
    font-weight:600;
    white-space:normal
}
.badge.danger {
    background:#ffe1da;
    color:#9a2814
}
.badge.good {
    background:#e5f1e8;
    color:#245b32
}
.badge.warning {
    background:#fff0b6;
    color:#685000
}
.tabs {
    display:flex;
    flex-wrap:nowrap;
    overflow:auto;
    gap:8px;
    margin:20px 0;
    padding-bottom:8px
}
.tabs a,.tabs button {
    text-decoration:none;
    white-space:nowrap;
    border-radius:7px;
    padding:10px 14px;
    background:#fff;
    border:1px solid #ddd
}
.tabs .selected {
    background:#e5c900;
    border-color:#c5ad00;
    color:#111
}
.muted {
    color:#777
}
.notice {
    padding:14px;
    border-left:3px solid #e5c900;
    background:#fffbe7
}
.error {
    padding:14px;
    background:#fee;
    color:#972727
}
.empty {
    padding:25px;
    color:#777
}
.filters {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:18px
}
.filters input {
    min-width:160px
}
.filters label {
    display:grid;
    gap:5px
}
.search-results {
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:white;
    box-shadow:0 12px 40px #0003;
    max-height:70vh;
    overflow:auto;
    border:1px solid #ddd;
    z-index:100
}
.search-results h4 {
    margin:12px
}
.search-results a {
    display:block;
    padding:11px 15px;
    text-decoration:none;
    border-top:1px solid #eee
}
.search-results a:hover {
    background:#fff5ad
}
dialog {
    border:0;
    border-radius:14px;
    padding:0;
    width:min(860px,calc(100vw - 24px));
    max-height:calc(100dvh - 24px);
    box-shadow:0 20px 90px #0006;
    overflow:auto
}
dialog::backdrop {
    background:#0008
}
dialog>header {
    position:sticky;
    top:0;
    background:#fff;
    z-index:2;
    padding:18px 22px;
    border-bottom:1px solid #ddd;
    display:flex;
    justify-content:space-between;
    align-items:center
}
dialog h2 {
    font-size:21px;
    margin:0
}
#modal-body {
    padding:22px
}
.form-grid,.info-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:15px
}
label {
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-bottom:10px
}
input,select,textarea {
    max-width:100%;
    min-width:0;
    width:100%;
    color:#222
}
input[type=checkbox] {
    width:auto
}
label:has(input[type=checkbox]) {
    flex-direction:row;
    align-items:center
}
textarea {
    min-height:80px
}
.form-grid .wide {
    grid-column:1/-1
}
.form-error:empty {
    display:none
}
.form-actions {
    margin-top:20px;
    display:flex;
    gap:10px;
    justify-content:flex-end
}
.info-grid span {
    display:block;
    font-size:12px;
    color:#777
}
.info-grid strong {
    display:block;
    margin-top:5px
}
.gallery {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:16px
}
.gallery figure {
    margin:0
}
.gallery img {
    width:100%;
    height:210px;
    object-fit:cover;
    border-radius:9px
}
.gallery figcaption {
    padding:10px 0
}
.signature {
    width:100%;
    height:180px;
    background:#fff;
    border:1px dashed #aaa;
    touch-action:none
}
.selected-row {
    outline:2px solid #dbbd00;
    background:#fffbe0
}
.job {
    background:white;
    border:1px solid #ddd;
    border-left:4px solid #d6bc00;
    border-radius:9px;
    padding:16px;
    margin:12px 0
}
.job h3 {
    margin:5px 0 12px
}
.calendar {
    display:grid;
    grid-template-columns:repeat(7,minmax(145px,1fr));
    gap:12px;
    min-width:1080px
}
.calendar>section {
    background:#f0f0e9;
    border-radius:10px;
    padding:10px
}
.calendar h3 {
    font-size:14px
}
.progress {
    height:8px;
    background:#eee;
    border-radius:20px;
    overflow:hidden
}
.progress span {
    height:100%;
    display:block;
    background:#e5c900
}
.timeline {
    list-style:none;
    padding:0
}
.timeline li {
    padding:16px 0 16px 20px;
    border-left:2px solid #e5c900;
    margin-left:10px;
    border-bottom:1px solid #eee
}
.timeline time {
    font-size:12px;
    color:#777
}
.quote-inputs {
    min-width:850px
}
.quote-inputs input,.quote-inputs select {
    padding:8px
}
.quote-inputs td:first-child {
    min-width:230px
}
.summary {
    max-width:430px;
    margin:20px 0 20px auto
}
.summary p {
    display:flex;
    justify-content:space-between;
    gap:16px
}
.total {
    padding:15px;
    background:#f3df72;
    font-weight:700
}
.quick-global {
    position:fixed;
    bottom:20px;
    right:22px;
    z-index:25
}
.quick-global button {
    border-radius:40px;
    padding:15px 24px;
    box-shadow:0 4px 18px #0003
}
#toast {
    position:fixed;
    bottom:85px;
    right:20px;
    background:#222;
    color:#fff;
    padding:16px;
    border-radius:8px;
    max-width:calc(100vw - 40px);
    z-index:150
}
.wizard-steps {
    display:flex;
    gap:8px;
    margin-bottom:20px
}
.wizard-steps span {
    padding:10px;
    background:#eee;
    border-radius:6px
}
.wizard-steps .active {
    background:#f3df72
}
.intake-result {
    display:block;
    width:100%;
    text-align:left;
    background:#fafaf5;
    border:1px solid #ddd;
    margin:8px 0
}
.intake-result span {
    display:block
}
.intake-options {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:12px 0
}
.intake-options button.selected {
    background:#eedc60
}
.setup {
    max-width:650px;
    margin:5vh auto
}
.setup li {
    margin:10px 0
}
.login-form form {
    display:grid;
    gap:12px
}
.portal-header,.portal-main {
    max-width:1100px;
    margin:20px auto;
    padding:20px
}
.details-stack {
    display:grid;
    gap:15px
}
.portal-header {
    display:flex;
    align-items:center;
    gap:20px
}
footer {
    padding:20px 30px;
    color:#777;
    font-size:12px
}
.comparison {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}
.comparison img {
    width:100%;
    max-height:400px;
    object-fit:contain
}
.thumbs {
    display:flex;
    flex-wrap:wrap;
    gap:8px
}
.thumbs img {
    width:95px;
    height:75px;
    object-fit:cover
}
.pill {
    display:inline-block;
    padding:6px 9px;
    background:#eee;
    border-radius:6px
}
.danger-button {
    background:#fee;
    color:#a22
}
a.button {
    padding:10px 14px;
    background:#e5c900;
    border-radius:7px;
    display:inline-block;
    text-decoration:none
}
.no-wrap {
    white-space:nowrap
}
@media(max-width:1050px) {
    .sidebar {
        width:225px
    }
    .workspace {
        margin-left:225px
    }
    #content {
        padding:22px
    }
    .page-title {
        align-items:flex-start
    }
    .page-title h1 {
        font-size:25px
    }
}
@media(max-width:768px) {
    .sidebar {
        transform:translateX(-100%);
        width:260px;
        transition:transform .2s
    }
    .sidebar.open {
        transform:translateX(0);
        box-shadow:12px 0 40px #0003
    }
    .workspace {
        margin:0
    }
    .topbar {
        padding:12px;
        gap:10px;
        height:66px
    }
    .topbar>span {
        display:none
    }
    #menu-toggle {
        display:inline-flex
    }
    #content {
        padding:18px 12px 90px
    }
    .page-title {
        display:block
    }
    .page-title>.actions {
        margin-top:12px
    }
    .form-grid,.info-grid {
        grid-template-columns:1fr
    }
    .cards {
        grid-template-columns:repeat(auto-fit,minmax(min(100%, 160px),1fr));
        gap:10px
    }
    .metric {
        padding:14px
    }
    .metric strong {
        font-size:23px
    }
    .panel-heading {
        padding:15px;
        flex-wrap:wrap
    }
    .padded {
        padding:15px
    }
    dialog>header,#modal-body {
        padding:15px
    }
    .quick-global {
        bottom:15px;
        right:15px
    }
    .login {
        display:block
    }
    .login-story {
        min-height:240px;
        padding:25px
    }
    .login-story h1 {
        font-size:32px
    }
    .login-story>small {
        display:none
    }
    .login-form {
        padding:25px
    }
    .portal-header {
        display:block
    }
    .comparison {
        gap:10px
    }
    th,td {
        padding:11px
    }
    .brand-image {
        max-width:175px
    }
    .setup {
        margin:15px
    }
    .calendar {
        min-width:0;
        grid-template-columns:1fr
    }
}
.sidebar .brand {
    line-height:1.5;
    height:auto;
    min-height:0;
    padding:0;
    margin:0 0 16px
}
.sidebar .brand small {
    font-size:11px;
    line-height:1.6;
    letter-spacing:.04em;
    position:static
}
.sidebar-bottom {
    background:#171717;
    color:#f7f7f7;
    border:0;
    border-top:1px solid #404040;
    padding:16px 0 0;
    position:static
}
.sidebar-bottom small {
    font-size:11px;
    line-height:1.5
}
.sidebar-bottom strong {
    color:#fff
}
.sidebar-bottom form {
    margin:0
}
.sidebar nav {
    overscroll-behavior:contain
}
.sidebar nav::-webkit-scrollbar {
    width:5px
}
.sidebar nav::-webkit-scrollbar-thumb {
    background:#555;
    border-radius:5px
}
.brand-image {
    display:block
}
.timeline pre {
    white-space:pre-wrap;
    overflow-wrap:anywhere
}
.info-grid strong {
    overflow-wrap:anywhere
}
/* ===== Améliorations ergonomie mobile (ajout) ===== */
@media (max-width: 768px) {
    :root {
        font-size:15px
    }
    body,p,td,th,label,.badge,.pill {
        line-height:1.5
    }
    /* Empêche le zoom automatique iOS quand on touche un champ (police < 16px = zoom forcé) */
    input,select,textarea {
        font-size:16px;
        padding:12px 13px
    }
    label {
        font-size:14px;
        gap:8px;
        margin-bottom:14px
    }
    /* Cibles tactiles confortables (44px minimum recommandé) */
    button,a.button {
        min-height:44px;
        padding:12px 18px;
        font-size:15px
    }
    .actions button {
        min-height:40px;
        padding:10px 14px
    }
    #menu-toggle,#modal-close {
        width:44px;
        height:44px;
        min-height:44px;
        padding:0;
        flex-shrink:0
    }
    .sidebar nav a {
        padding:13px 14px;
        min-height:46px;
        display:flex;
        align-items:center;
        font-size:15px
    }
    .tabs a,.tabs button {
        padding:12px 16px;
        min-height:44px;
        display:inline-flex;
        align-items:center
    }
    .sidebar-profile .icon-button {
        width:40px;
        height:40px
    }
    input[type=checkbox] {
        width:22px;
        height:22px
    }
    label:has(input[type=checkbox]) {
        gap:10px
    }
    /* Retour visuel au toucher */
    button:active,a.button:active {
        filter:brightness(0.94);
        transform:scale(0.98)
    }
    /* Actions de page/panel : boutons pleine largeur, faciles à toucher */
    .page-title .actions,.panel-heading .actions {
        width:100%;
        display:flex;
        flex-wrap:wrap;
        gap:10px
    }
    .page-title .actions button,.panel-heading .actions button {
        flex:1;
        min-width:130px
    }
    /* Formulaires en pop-up (dialog) : occupe tout l'écran sur petit mobile, boutons toujours accessibles */
    dialog {
        width:100vw;
        max-width:100vw;
        height:100dvh;
        max-height:100dvh;
        border-radius:0;
        margin:0
    }
    dialog>header {
        padding:16px
    }
    #modal-body {
        padding:16px 16px 24px
    }
    .form-actions {
        position:sticky;
        bottom:0;
        left:0;
        right:0;
        background:#fff;
        padding:14px 16px;
        margin:18px 0 0;
        border-top:1px solid var(--border);
        box-shadow:0 -4px 12px #0001
    }
    .form-actions button {
        flex:1
    }
    /* Tableaux : indique clairement qu'on peut faire défiler horizontalement */
    .table-wrap {
        -webkit-overflow-scrolling:touch;
        position:relative
    }
    .table-wrap::after {
        content:"";
        position:sticky;
        top:0;
        right:0;
        float:right;
        width:14px;
        height:1px;
        pointer-events:none
    }
    table {
        font-size:14px
    }
    th,td {
        padding:12px 14px
    }
    /* Zone de confort en bas pour les téléphones à encoche */
    .quick-global {
        bottom:calc(15px + env(safe-area-inset-bottom));
        right:15px
    }
    #toast {
        bottom:calc(85px + env(safe-area-inset-bottom))
    }
    .sidebar-bottom {
        padding-bottom:calc(16px + env(safe-area-inset-bottom))
    }
}

/* Largeurs intrinsèques : les textes et les contrôles restent dans leur carte. */
.page-title,
.panel-heading {
    flex-wrap: wrap;
}

.page-title > div:first-child {
    flex: 1 1 240px;
    min-width: 0;
}

.page-title > .actions {
    flex: 0 1 auto;
}

.page-title h1,
.panel-heading h2,
.job,
.notice,
.error,
.metric,
.gallery figcaption,
.search-results a {
    overflow-wrap: anywhere;
}

.panel,
.panel-heading > *,
.actions,
.actions > *,
.form-grid > *,
.info-grid > *,
.metric,
.gallery > *,
.comparison > *,
.topbar .search,
.login > section {
    min-width: 0;
    max-width: 100%;
}

.metric strong {
    font-size: clamp(22px, 2vw, 29px);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.actions > button,
.actions > a,
.form-actions > button {
    white-space: normal;
    overflow-wrap: anywhere;
}

.filters {
    align-items: end;
}

.filters > label {
    flex: 1 1 160px;
    min-width: 0;
    max-width: 100%;
}

.filters > input {
    flex: 1 1 180px;
    min-width: 0;
}

.tabs > * {
    flex-shrink: 0;
}

.tabs,
.table-wrap {
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

.summary p {
    flex-wrap: wrap;
    gap: 8px 16px;
    overflow-wrap: anywhere;
}

.summary strong {
    margin-left: auto;
}

.gallery {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

/* Devis : annule le nowrap hérité des tableaux de consultation. */
.quote-inputs {
    min-width: 1080px;
    table-layout: fixed;
    white-space: normal;
}

.quote-inputs th:first-child,
.quote-inputs td:first-child {
    width: 30%;
}

.quote-inputs th:last-child,
.quote-inputs td:last-child {
    width: 60px;
}

.quote-inputs input,
.quote-inputs select,
.quote-inputs small {
    display: block;
    width: 100%;
    margin-bottom: 8px;
}

.quote-inputs td {
    overflow-wrap: anywhere;
}

/* Fenêtres : seul le corps défile, le titre et la fermeture restent accessibles. */
body:has(dialog[open]),
body.menu-open {
    overflow: hidden;
}

dialog[open] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

dialog > header {
    position: relative;
    flex-shrink: 0;
    gap: 16px;
}

dialog h2 {
    min-width: 0;
    overflow-wrap: anywhere;
}

#modal-close {
    flex-shrink: 0;
}

#modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.form-actions {
    flex-wrap: wrap;
}

.wizard-steps > span {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.thumbs > div {
    display: grid;
    gap: 6px;
    width: 100px;
    overflow-wrap: anywhere;
}

/* Navigation : menu fixe sur ordinateur, tiroir sur téléphone et tablette. */
.sidebar {
    height: 100dvh;
}

#sidebar-close,
#sidebar-backdrop {
    display: none;
}

@media (max-width: 1024px) {
    .sidebar {
        width: min(300px, calc(100vw - 48px));
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        padding-top: max(18px, env(safe-area-inset-top));
        padding-bottom: max(18px, env(safe-area-inset-bottom));
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .workspace {
        margin-left: 0;
    }

    #menu-toggle,
    #sidebar-close {
        display: inline-flex;
        width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        flex-shrink: 0;
    }

    #sidebar-close {
        position: absolute;
        top: max(14px, env(safe-area-inset-top));
        right: 12px;
        color: #fff;
        background: #303030;
        border-color: #505050;
    }

    .sidebar .brand-image {
        max-width: calc(100% - 50px);
    }

    #sidebar-backdrop:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100dvh;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: #0008;
        z-index: 29;
    }

    .topbar {
        padding-inline: 16px;
        gap: 12px;
    }

    .sidebar nav a {
        flex-shrink: 0;
        min-height: 44px;
    }
}

@media (max-width: 768px) {
    .calendar {
        width: 100%;
        min-width: 0;
        overflow: visible;
        grid-template-columns: minmax(0, 1fr);
    }

    .calendar > section {
        min-height: 0;
        min-width: 0;
        border-right: 0;
    }

    .calendar .job {
        margin-bottom: 8px;
    }

    .page-title .actions > *,
    .panel-heading .actions > * {
        flex: 1 1 140px;
        min-width: 0;
        text-align: center;
    }

    .actions button {
        min-height: 44px;
    }

    .form-actions {
        bottom: -24px;
        padding: 14px 0 max(24px, env(safe-area-inset-bottom));
    }

    .comparison {
        grid-template-columns: minmax(0, 1fr);
    }

    .search-results {
        position: fixed;
        inset: 66px 12px auto;
        max-height: calc(100dvh - 90px);
    }

    .login-form {
        margin-inline: auto;
    }

    .portal-header h1,
    .setup h1 {
        font-size: clamp(24px, 6vw, 32px);
        overflow-wrap: anywhere;
    }

    /* Chaque ligne de devis devient une carte avec ses libellés visibles. */
    .quote-inputs {
        display: block;
        min-width: 0;
        width: 100%;
    }

    .quote-inputs thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .quote-inputs tbody {
        display: grid;
        gap: 16px;
    }

    .quote-inputs tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 14px;
        border: 1px solid var(--border);
        border-radius: 10px;
    }

    .quote-inputs td,
    .quote-inputs td:first-child,
    .quote-inputs td:last-child {
        display: block;
        width: auto;
        min-width: 0;
        padding: 0;
        border: 0;
    }

    .quote-inputs td:first-child,
    .quote-inputs td:nth-child(6) {
        grid-column: 1 / -1;
    }

    .quote-inputs td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        font-size: 13px;
        font-weight: 600;
        color: #555;
    }

    .quote-inputs td:last-child:empty {
        display: none;
    }

    .quote-inputs td:last-child::before {
        content: none;
    }

    .quote-inputs input,
    .quote-inputs select {
        min-height: 44px;
        font-size: 16px;
    }
}

/* En paysage, réserver de la place au menu plutôt qu'au branding. */
@media (max-height: 540px) {
    .sidebar {
        padding-block: 10px;
    }

    .sidebar .brand {
        margin-bottom: 10px;
    }

    .sidebar .brand-image {
        width: 125px;
    }

    .sidebar .brand small {
        display: none;
    }

    .sidebar-bottom {
        margin-top: 8px;
        padding-top: 8px;
        padding-bottom: env(safe-area-inset-bottom);
        gap: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar {
        transition: none;
    }
}

/* Parcours unique de réception, utilisable au pouce sans débordement. */
.intake-flow,
.intake-step,
.intake-summary,
.request-card {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.intake-flow progress {
    width: 100%;
    height: 8px;
    accent-color: #dfbf00;
    margin-bottom: 16px;
}

.intake-progress {
    font-weight: 600;
}

.intake-summary {
    padding: 12px;
    background: #f5f5f2;
    border-radius: 8px;
    margin-bottom: 16px;
}

.intake-summary button {
    display: block;
    margin-top: 8px;
}

.intake-choices,
.intake-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 10px;
    margin-block: 12px;
}

.intake-choices button,
.intake-types label,
.intake-result {
    min-height: 48px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
}

.intake-types label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
}

.intake-types label:has(:checked) {
    background: #fff7b0;
    border-color: #837000;
}

.intake-types input {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin: 0;
}

.intake-result {
    display: block;
    width: 100%;
    margin-top: 8px;
}

.request-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 16px;
}

.requests-page .tabs {
    flex-wrap: wrap;
    white-space: normal;
}

@media (max-width: 768px) {
    dialog,
    #modal-body,
    .intake-flow,
    .requests-page {
        overflow-x: hidden;
    }

    #modal-body input,
    #modal-body select,
    #modal-body textarea {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px;
    }

    #modal-body .form-grid > *,
    #modal-body .actions > * {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .intake-choices,
    .intake-types,
    .request-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .intake-flow .form-actions {
        bottom: -16px;
        gap: 8px;
        flex-wrap: wrap;
    }

    .intake-flow .form-actions button {
        min-height: 48px;
        white-space: normal;
    }

    .intake-flow #quick-submit {
        flex: 1;
    }
}

/* Suivi atelier et véhicules de remplacement */
.tracking-parts{display:grid;gap:10px;margin-top:14px}.tracking-parts article{display:grid;grid-template-columns:minmax(180px,1fr) auto auto auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--border)}.tracking-parts article>div:first-child small{display:block;margin-top:4px}.part-summary{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}.replacement-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:16px}.replacement-choice{border:1px solid var(--border);border-radius:10px;padding:14px;background:#fff}.replacement-choice h3{margin:12px 0 4px}.replacement-choice p{margin-bottom:10px}.replacement-photo{height:120px;border-radius:8px;background:#f1f1ed;display:flex;align-items:center;justify-content:center;font-size:36px;color:#777;overflow:hidden}.replacement-photo img{width:100%;height:100%;object-fit:cover}.paid-choice{display:flex;gap:8px;align-items:center;font-weight:600}.replacement-list-vehicle{display:flex;align-items:center;gap:11px;min-width:190px}.replacement-list-vehicle small{display:block;margin-top:4px}.replacement-thumb{width:58px;height:44px;border-radius:7px;background:#f1f1ed;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}.replacement-thumb img{width:100%;height:100%;object-fit:cover}.replacement-thumb span{font-size:22px;color:#777}
@media(max-width:760px){.tracking-parts article{grid-template-columns:1fr}.replacement-choice-grid{grid-template-columns:1fr}}
.intake-flow .thumbs>div{display:flex;flex-direction:column;gap:8px}.intake-flow .thumbs label{font-size:11px}.intake-flow .thumbs select,.intake-flow .thumbs input{width:100%}.replacement-choice-card{display:grid;grid-template-columns:84px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);border-radius:9px;margin-top:10px;background:#fff}.replacement-choice-card.selected{border-color:var(--green);box-shadow:0 0 0 2px #247a6812}.replacement-choice-card>div:nth-child(2){display:flex;flex-direction:column;gap:4px}.replacement-choice-card>div:nth-child(2) span{font-size:11px;color:var(--muted)}.replacement-choice-photo{width:84px;height:62px;object-fit:cover;border-radius:7px;background:#f1f1ed}.replacement-choice-icon{display:flex;align-items:center;justify-content:center;font-size:28px;color:#777}@media(max-width:760px){.replacement-choice-card{grid-template-columns:68px minmax(0,1fr)}.replacement-choice-card>button{grid-column:1/-1}.replacement-choice-photo{width:68px;height:54px}}