/* fonts.css */
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* tokens.css */
/* ==========================================================================
   DESIGN TOKENS & CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
  /* Color System */
  --primary: #193153;
  --primary-hover: #193153;
  --primary-light: #e0f2fe;
  --success: #193153;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
  
  /* Neutral Palette */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  
  /* Semantic Colors */
  --bg: var(--gray-50);
  --surface: #fff;
  --border: var(--gray-200);
  --text: var(--gray-800);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  
  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  
  /* Design Properties */
  --radius: 0.5rem;
  --radius-sm: 0.25rem;
  --radius-lg: 0.75rem;
  --shadow: 0 0px 0px 0 rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --transition: 200ms ease;
  
  /* Layout Constants */
  --sidebar-width: 250px;
  --header-height: 60px;
  --container-max-width: 1280px;
}
/* base.css */
/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button, input, select, textarea {
  font: inherit;
}

svg {
  display: block;
}
/* utilities.css */
/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Display Utilities */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.none { display:none !important; }

/* Flexbox Utilities */
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }

/* Grid Utilities */
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.col-span-full { grid-column: 1 / -1; }
.col-span-2 { grid-column: span 2 / span 2; }

/* Gap Utilities */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Spacing Utilities - Margin */
.m-0 { margin: 0; }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* Spacing Utilities - Padding */
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }

/* Typography Utilities */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

/* Color Utilities */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }

/* Sizing Utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-48 { width: 12rem; }
.w-64 { width: 16rem; }
.w-72 { width: 18rem; }
.w-80 { width: 20rem; }
.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }

/* Border Utilities */
.border-t { border-top: 1px solid var(--border); }
.border-t-2 { border-top: 2px solid var(--border); }
.border-gray-300 { border-color: var(--gray-300, #d1d5db); }

/* Positioning Utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Enhanced Background Highlights */
.bg-gray-50 {
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  border: 1px solid #e5e7eb;
}

.bg-blue-50 {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #bfdbfe;
}
/* Titre réservé aux lecteurs d'écran : rétablit la hiérarchie h1 → h2 → h3
   avant une grille dont les cartes portent des <h3>, sans rien afficher. */
.sr-only-heading {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* layout.css */
/* App-specific layout overrides.
   Generic layout fixes belong in /var/www/app-core/public/assets/css/components/layout.css */

/* Page header */
.page-header {
    padding: 1.25rem 0 1rem;
    margin-bottom: .5rem;
}
.page-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Titre de page : aligne une icône de tête À GAUCHE du texte (et non au-dessus).
   Sans ça, la règle globale `svg { display:block }` décroche l'icône sur sa
   propre ligne dès qu'on met icon() dans un <h1 class="page-title">. */
.page-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.page-title > svg { flex-shrink: 0; }

/* Sous-titre de page (sous le titre) — était utilisé sans CSS dans plusieurs vues. */
.page-sub {
    margin: .25rem 0 0;
    color: var(--text-muted);
    font-size: .9rem;
}

/* Push main content past the fixed sidebar on desktop */
.main-content {
    margin-left: var(--sidebar-width);
    padding: 1.5rem 2rem;
    min-height: 100vh;
}

@media (max-width: 768px) {
    .main-content {
        margin-left: 0;
    }
}

/* badges.css */
/* ==========================================================================
   BADGE COMPONENTS
   ========================================================================== */

/* Respecter l'attribut [hidden] même sur les éléments à display explicite
   (sinon un badge/compare-price vide reste visible). */
[hidden] { display: none !important; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  letter-spacing: 0.025em;
}

/* Badge Variants */
.badge-primary { background: #dbeafe; color: #1e40af; }
.badge-variables { background: #dbeafe; color: #1e40af; }
.badge-secondary { background: var(--gray-100); color: var(--gray-700); }
.badge-success { background: #d1fae5; color: #065f46; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-error { background: #fee2e2; color: #991b1b; }
.badge-info { background-color: var(--info); color: white; }
.badge-helper { background: #dbeafe; color: #1e40af; }

/* Project-specific badges */
.badge-construction { background-color: #10b981; color: white; }
.badge-renovation { background-color: #f59e0b; color: white; }
.badge-sav { background-color: #ef4444; color: white; }

/* Priority badges */
.badge-priority-low { background-color: #6b7280; color: white; }
.badge-priority-medium { background-color: #3b82f6; color: white; }
.badge-priority-high { background-color: #f59e0b; color: white; }
.badge-priority-urgent { background-color: #ef4444; color: white; }

/* Status badges */
.badge-status-draft { background-color: #6b7280; color: white; }
.badge-status-active { background-color: #10b981; color: white; }
.badge-status-on_hold { background-color: #f59e0b; color: white; }
.badge-status-completed { background-color: #059669; color: white; }
.badge-status-cancelled { background-color: #ef4444; color: white; }
.badge-status-pending { background-color: #6b7280; color: white; }
.badge-status-in_progress { background-color: #3b82f6; color: white; }
.badge-status-delayed { background-color: #dc2626; color: white; }

/* Count Badge */
.count-badge {
  background: var(--primary);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: 1rem;
  margin-left: var(--space-2);
  min-width: 1.5rem;
  text-align: center;
}

/* Type indicators */
.type-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.type-indicator.product {
  background-color: #dbeafe;
  color: #1e40af;
}

.type-indicator.pack {
  background-color: #d1fae5;
  color: #065f46;
}

.item-type-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
}

.item-type-badge.product {
  background-color: #3b82f6;
  color: white;
}

.item-type-badge.pack {
  background-color: #10b981;
  color: white;
}
/* buttons.css */
/* ==========================================================================
   BUTTON COMPONENTS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  line-height: 1;
  padding: var(--space-3) var(--space-4);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
  width: fit-content;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-loading {
  opacity: 0.8;
  cursor: wait;
}

.btn-spinner {
  display: block;
  width: 0.875em;
  height: 0.875em;
  border: 0.15em solid rgba(255, 255, 255, 0.4);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  flex-shrink: 0;
}

/* Button Variants */
.btn-primary {
  background: var(--primary);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--gray-50);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--gray-100);
}

.btn-ghost.text-error {
  background: white;
  border: 1px solid #fecaca;
  color: var(--error);
}

.btn-ghost.text-error:hover:not(:disabled) {
  background: white;
}

.btn-danger {
  background: var(--error);
  color: white;
}

.btn-success {
  background: var(--success);
  color: white;
}

.btn-warning {
  background: var(--warning);
  color: white;
}

.btn-warning:hover:not(:disabled) {
  background: #d97706;
  border-color: #d97706;
  color: white;
}

/* Button Sizes */
.btn-xs {
  padding: var(--space-1) var(--space-2);
  font-size: 0.75rem;
}

.btn-sm {
  padding: var(--space-2) var(--space-3);
  font-size: 0.75rem;
}

.btn-lg {
  padding: var(--space-4) var(--space-6);
  font-size: 1rem;
}

/* Special Button Types */
.btn-icon {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.btn-icon:hover {
  background: white;
}

.btn-icon.text-error {
  color: #ef4444;
}

.btn-remove {
  background: #ef4444;
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition);
}

.btn-remove:hover {
  background: #dc2626;
}

.btn-document-action {
  padding: 0.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.25rem;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-document-action:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.btn-document-action.text-error {
  color: #ef4444;
}

.btn-document-action.text-error:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}
/* ==========================================================================
   PRICING TOGGLE (Devis / Méthode style pill switch)
   ========================================================================== */

.pricing-toggle {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    align-self: stretch;
    background: var(--bg-secondary, #f3f4f6);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius, 0.5rem);
    padding: 3px;
}

.pricing-toggle-pill {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    background: white;
    border-radius: calc(var(--radius, 0.5rem) - 3px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.pricing-toggle .toggle-btn {
    position: relative;
    z-index: 1;
    padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
    border: none;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: calc(var(--radius, 0.5rem) - 3px);
    cursor: pointer;
    transition: color 0.18s ease;
    white-space: nowrap;
    text-align: center;
}

.pricing-toggle .toggle-btn:hover:not(.active) {
    color: var(--text, #1f2937);
}

.pricing-toggle .toggle-btn.active {
    color: var(--primary, #667eea);
}

/* cards.css */
/* ==========================================================================
   CARD COMPONENTS
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
  box-shadow: var(--shadow);
  transition: all var(--transition);
}


.card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.card-interactive {
  cursor: pointer;
  transition: all var(--transition);
}

.card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-4);
}

.price-card-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-4);
}

.card-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1.25rem;
  font-weight: 600;
}

.card-title > svg {
  display: inline;
  flex-shrink: 0;
}

.card-body {
  margin-bottom: var(--space-4);
}

.card-footer {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.card-footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Enhanced pack cards styling */
.pack-card {
  background: white;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
  overflow: hidden;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  cursor: pointer;
}

.pack-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}

.pack-card-image {
  height: 330px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow: hidden;
}

.pack-card-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.02);
  border-radius: inherit;
  z-index: 0;
}

.pack-card-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  position: relative;
  z-index: 1;
}

.pack-card-icon {
  color: #9ca3af;
  opacity: 0.6;
  z-index: 1;
}

.pack-card-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pack-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.pack-card-description {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.5;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pack-card-meta {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pack-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: #f3f4f6;
  color: #374151;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
}

.pack-card-badge.primary {
  background: #dbeafe;
  color: #1d4ed8;
}

.pack-card-badge.success {
  background: #d1fae5;
  color: #065f46;
}

.pack-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid #f3f4f6;
}

.pack-card-configure-btn {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pack-card-configure-btn:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

.pack-card-status {
  font-size: 0.75rem;
  color: #059669;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* List view styling */
.pack-list-item {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.2s ease;
}

.pack-list-item:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.pack-list-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
}

.pack-list-info {
  flex: 1;
}

.pack-list-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.5rem;
}

.pack-list-description {
  color: #6b7280;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.pack-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.pack-list-meta-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: #6b7280;
}

.pack-list-actions {
  flex-shrink: 0;
}

/* Card image styles - Centered and Contained */
.card-image {
  width: 100%;
  height: 200px;
  object-fit: contain;
  object-position: center;
  background-color: #f9fafb;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  padding: 1rem;
}

.card-image-placeholder {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f4f6;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  color: #9ca3af;
}

/* Product card image - Centered and Contained */
.product-card-image {
  width: 100%;
  height: 330px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

.product-card-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  position: relative;
  z-index: 1;
}
/* forms.css */
/* ==========================================================================
   FORM COMPONENTS
   ========================================================================== */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-group {
  display: flex;
  flex-direction: column;
}

/* Espacement vertical par défaut entre champs EMPILÉS. Sans ça, des .form-group
   bruts (hors d'un .form-layout) se collent : l'input d'un champ touche le label
   du suivant. La grille .form-layout gère déjà l'écart via `gap`, donc on y remet
   la marge à 0 pour ne pas doubler l'espacement. */
.form-group + .form-group { margin-top: var(--space-4); }
.form-layout .form-group + .form-group { margin-top: 0; }

/* Une image dans un .form-group (aperçu logo…) ne doit PAS être étirée par le
   align-items:stretch du flex-column — sinon elle prend toute la largeur et se déforme. */
.form-group > img { align-self: flex-start; width: auto; max-width: 100%; }

.form-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
  height: 25px;
  font-weight: 500;
}

.form-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: 1rem;
  color: var(--text);
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.check-label {
  width: 100%;
  padding: var(--space-3) 0;
  font-size: 1rem;
  color: var(--text);
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.check-label span {
  vertical-align: middle;
}

.form-input:focus,
.form-input:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input.error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-input-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25;
}

/* Select Dropdown Styling */
select.form-input {
  padding-right: 2.5rem;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 1rem;
}

/* Form Layouts */
.form-layout {
  display: grid;
  gap: var(--space-4);
}

.form-layout.cols-1 { grid-template-columns: 1fr; }
.form-layout.cols-2 { grid-template-columns: repeat(2, 1fr); }
.form-layout.cols-3 { grid-template-columns: repeat(3, 1fr); }
.form-layout.cols-4 { grid-template-columns: repeat(4, 1fr); }
.form-layout.cols-5 { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }
.span-full { grid-column: 1 / -1; }
.col-span-2 { grid-column: span 2; }

/* Form Validation & Status */
.form-help {
  color: var(--text-secondary);
  font-size: 0.75rem;
  margin-top: var(--space-1);
}

.form-error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--error);
  font-size: 0.75rem;
  margin-top: var(--space-1);
}

.form-status {
  margin-top: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid transparent;
}

.form-status.success {
  background-color: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}

.form-status.error {
  background-color: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

.form-status.loading {
  background-color: #eff6ff;
  color: #1d4ed8;
  border-color: #dbeafe;
}

.form-status.warning {
  background-color: #fefce8;
  color: #ca8a04;
  border-color: #fef08a;
}

/* Fieldsets */
.form-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  background: var(--gray-50);
}

.form-legend {
  font-weight: 600;
  color: var(--primary);
  padding: 0 var(--space-2);
  font-size: 0.875rem;
}

/* Form Containers & Actions */
.form-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* File Inputs */
.file-input {
  padding: var(--space-3);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--gray-50);
  cursor: pointer;
  transition: all var(--transition);
}

.file-input:hover {
  border-color: var(--primary);
  background: rgba(37, 99, 235, 0.05);
}

.drag-over {
  background-color: var(--primary-light, #e0f2fe) !important;
  border-color: var(--primary, #3b82f6) !important;
  transform: scale(1.02);
  transition: all 0.2s ease;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: var(--gray-50);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  transition: background-color 0.2s;
}

.file-item:hover {
  background: var(--gray-100);
}

/* Checkboxes */
.checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.form-checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.checkbox-label {
  font-size: 0.875rem;
  color: var(--text);
  cursor: pointer;
  margin: 0;
}

/* Checkbox List - card style options */
.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.checkbox-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.15s ease;
  cursor: pointer;
}

.checkbox-list-item:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
}

.checkbox-list-item:has(input:checked) {
  background: var(--primary-50, #eff6ff);
  border-color: var(--primary);
}

.checkbox-list-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.checkbox-list-item .checkbox-content {
  flex: 1;
  min-width: 0;
}

.checkbox-list-item .checkbox-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--text);
}

.checkbox-list-item .checkbox-description {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  line-height: 1.4;
}

/* PO Type List - alternative checkbox card style */
.po-type-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.po-type-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.15s ease;
  cursor: pointer;
}

.po-type-item:hover {
  background: var(--gray-50);
}

.po-type-item:has(input:checked) {
  background: var(--primary-50, #eff6ff);
  border-color: var(--primary);
}

.po-type-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.po-type-item .po-type-content {
  flex: 1;
}

.po-type-item .po-type-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}

.po-type-item .po-type-help {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* Validation message card */
.validation-message-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.validation-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: #495057;
}

.validation-header h6 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.validation-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.validation-list li {
    font-size: 0.8125rem;
    color: #6c757d;
    padding-left: 1.5rem;
    position: relative;
}

.validation-list li:before {
    content: '•';
    position: absolute;
    left: 0.5rem;
    color: #adb5bd;
}

.validation-list strong {
    color: #495057;
    font-weight: 500;
}

/* Form help text styling */
.form-help.text-muted {
    color: #6c757d;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.help-text {
    display: block;
    color: var(--text-secondary, #6c757d);
    font-size: 0.75rem;
    font-weight: 400;
    margin-top: var(--space-1, 0.25rem);
}

/* Input with suffix (€, %, kg, etc.) */
.input-with-suffix {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-suffix .form-input {
    padding-right: 2.5rem;
    width: 100%;
}

.input-with-suffix .input-suffix {
    position: absolute;
    right: 0.75rem;
    color: var(--text-secondary, #6c757d);
    font-size: 0.875rem;
    font-weight: 500;
    pointer-events: none;
    user-select: none;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .form-layout.cols-2,
  .form-layout.cols-3,
  .form-layout.cols-4,
  .form-layout.cols-5 {
    grid-template-columns: 1fr;
  }
  
  .span-full,
  .col-span-2 {
    grid-column: 1;
  }
}
/* navigation.css */
/* ==========================================================================
   NAVIGATION COMPONENTS
   ========================================================================== */

/* Sidebar Navigation */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--bg);
  color: var(--gray-600);
  padding: var(--space-4);
  overflow-y: auto;
  z-index: 1000;
}

.sidebar-brand {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: var(--space-4);
  text-align: center;
}

.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  transition: background var(--transition);
}

.sidebar-nav a:hover,
.sidebar-nav .active > a {
  background: var(--gray-100);
}

.menu-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Submenu System */
.has-submenu > a {
  cursor: pointer;
}

.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition);
  margin-top: 4px;
}

.has-submenu.open .submenu {
  max-height: 500px;
}

.submenu li {
  padding-left: 20px;
}

.submenu li a {
  padding: var(--space-3) var(--space-4);
}

/* Tab Navigation */
.nav-tabs-container {
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.nav-tabs {
  display: flex;
  gap: var(--space-2);
}

.nav-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 3px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--transition);
}

.nav-tab:hover {
  color: var(--primary);
  background: var(--gray-50);
}

.nav-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: var(--gray-50);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Mobile Header */
.mobile-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--bg);
  color: var(--gray-700);
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  z-index: 999;
}

.hamburger-btn {
  background: none;
  border: none;
  color: var(--gray-700);
  cursor: pointer;
  padding: var(--space-2);
}

/* View Toggle */
.view-toggle {
  display: flex;
  gap: 0.25rem;
  background: var(--gray-100);
  padding: 0.25rem;
  border-radius: var(--radius);
}

.view-btn {
  padding: 0.5rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}

.view-btn.active {
  background: white;
  color: var(--primary);
  box-shadow: var(--shadow);
}

/* Submenu Toggle Icons */
.submenu-toggle {
  cursor: pointer;
}

.submenu-toggle .icon-cont:last-child svg,
.submenu-toggle .icon-cont:last-child > * {
  transition: transform var(--transition);
  transform-origin: center;
}

.has-submenu.open .submenu-toggle .icon-cont:last-child svg,
.has-submenu.open .submenu-toggle .icon-cont:last-child > * {
  transform: rotate(180deg);
}

.submenu-toggle > .icon-cont:nth-child(2) svg,
.submenu-toggle > .icon-cont:nth-child(2) > * {
  transition: transform var(--transition);
  transform-origin: center;
}

.has-submenu.open .submenu-toggle > .icon-cont:nth-child(2) svg,
.has-submenu.open .submenu-toggle > .icon-cont:nth-child(2) > * {
  transform: rotate(180deg);
}

.submenu-toggle .menu-label .icon-cont,
.submenu-toggle .menu-label .icon-cont svg,
.submenu-toggle .menu-label .icon-cont > * {
  transform: none !important;
}

/* Sidebar Notification Badges */
.sidebar-badge {
  font-size: 0.6rem;
  padding: 0;
  min-width: 1.1rem;
  height: 1.1rem;
  line-height: 1.1rem;
  text-align: center;
  border-radius: 50%;
  margin-left: auto;
  flex-shrink: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .mobile-header { 
    display: flex; 
  }
  
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition);
  }
  
  .sidebar.open { 
    transform: translateX(0); 
  }
}
/* tables.css */
/* ==========================================================================
   TABLE COMPONENTS
   ========================================================================== */

.table-container {
  background: var(--surface);
  border-radius: var(--radius);
  overflow-x: auto;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: relative;
}

.table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table th {
  text-align: left;
  padding: var(--space-3);
  font-weight: 600;
  background: var(--gray-50);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: 0.875rem;
  white-space: nowrap;
}

.table tr:last-child td {
  border-bottom: none;
}

.table tr:hover td {
  background: var(--gray-50);
}

.table tbody tr {
  position: relative;
}

.table-totals td {
  border-top: 2px solid var(--border);
  background: var(--gray-50);
  font-weight: 600;
}

.table-preview {
  font-size: 0.75rem;
}

.table-preview th,
.table-preview td {
  padding: var(--space-2);
}

.table td .text-muted {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Line Items Table */
.line-items-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
}

.line-items-table th {
  background: var(--gray-50);
  padding: var(--space-3);
  text-align: left;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.line-items-table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--gray-100);
  vertical-align: top;
}

.line-items-table tbody tr:hover {
  background: var(--gray-50);
}

.line-items-table .line-item-input {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  background: var(--surface);
}

.line-items-table .line-item-input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.line-items-table .line-item-input:invalid {
  border-color: var(--error);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}

.line-items-table .line-item-description {
  min-width: 200px;
}

.line-items-table .line-item-quantity,
.line-items-table .line-item-price,
.line-items-table .line-item-vat,
.line-items-table .line-item-total {
  width: 100px;
}

.line-items-table .line-item-actions {
  width: 60px;
  text-align: center;
}

.line-item-total-display {
  font-family: inherit;
  font-weight: 500;
  color: var(--text);
  text-align: right;
  padding: var(--space-2) var(--space-3);
}

/* Table Images */
.table-image {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 0.375rem;
  border: 1px solid #e5e7eb;
}

.table-image-placeholder {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f4f6;
  border-radius: 0.375rem;
  color: #9ca3af;
}

/* Sticky actions column — only when last th is empty and last td contains entity-actions */
.table th:last-child:empty,
.table td:last-child:has(.entity-actions) {
  position: sticky;
  right: 0;
  background: var(--surface);
  z-index: 1;
  width: 58px;
  min-width: 58px;
  max-width: 58px;
  text-align: center;
}
.table th:last-child:empty {
  background: var(--gray-50);
  z-index: 2;
}
.table tr:hover td:last-child:has(.entity-actions) {
  background: var(--gray-50);
}
.table td:last-child:has(.entity-dropdown.show) {
  z-index: 1002;
}

/* Smart table positioning for last columns */
.table td:nth-last-child(1) .entity-dropdown,
.table td:nth-last-child(2) .entity-dropdown {
  right: 0;
  left: auto;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .table-container { 
    margin: 0 calc(-1 * var(--space-4)); 
  }
  
  /* Line Items Table Mobile */
  .line-items-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  .line-items-table thead,
  .line-items-table tbody,
  .line-items-table th,
  .line-items-table td,
  .line-items-table tr {
    display: block;
  }
  
  .line-items-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .line-items-table tr {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    background: var(--surface);
  }
  
  .line-items-table td {
    border: none;
    position: relative;
    padding-left: 50% !important;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
  
  .line-items-table td:before {
    content: attr(data-label) ": ";
    position: absolute;
    left: var(--space-3);
    width: 45%;
    padding-right: var(--space-2);
    white-space: nowrap;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
  }
  
  /* Line item input mobile sizing */
  .line-items-table .line-item-input {
    font-size: 16px; /* Prevent zoom on iOS */
  }
}
/* tabs.css */
/* Onglets de navigation secondaire (sous le page-header).
   Remplace les barres d'onglets bricolées inline (admin newsletter / alertes). */
.tabs {
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .9rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition);
}

.tab:hover { color: var(--text); }

.tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ms-dropdown.css */
/* ── Searchable multiselect dropdown ─────────────────────────── */

.ms-wrap { position: relative; display: inline-block; }

/* Trigger au repos */
.ms-trigger {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px 3px 10px; height: 26px;
    background: transparent; border: 1px solid transparent;
    border-radius: var(--radius-sm, 4px);
    font-size: 0.8rem; font-weight: 500; font-family: inherit;
    color: var(--text-secondary, #6b7280);
    white-space: nowrap; cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    outline: none;
}
.ms-trigger:hover {
    border-color: var(--border, #e5e7eb);
    background: var(--gray-50, #f9fafb);
    color: var(--text, #1f2937);
}

/* Filtre actif ou panel ouvert → bleu */
.ms-wrap.open .ms-trigger,
.ms-wrap.has-value .ms-trigger {
    border-color: var(--primary, #193153);
    color: var(--primary, #193153);
    background: var(--primary-light, #eef2ff);
}

/* Chevron animé */
.ms-chevron { opacity: 0.5; flex-shrink: 0; transition: transform 0.15s; }
.ms-wrap.open .ms-chevron { transform: rotate(180deg); opacity: 1; }

/* Badge count */
.ms-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    font-size: 0.68rem; font-weight: 700;
    background: var(--primary, #193153); color: #fff; line-height: 1;
    flex-shrink: 0;
}

/* Panel */
.ms-panel {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 200;
    min-width: 200px; background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius, .5rem);
    box-shadow: 0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
    overflow: hidden;
}
.ms-wrap.open .ms-panel { display: block; }

.ms-search-wrap {
    display: flex; align-items: center; gap: 7px;
    padding: .5rem .75rem; border-bottom: 1px solid var(--border, #e5e7eb);
    color: var(--text-secondary, #6b7280);
}
.ms-search {
    border: none; outline: none; background: transparent;
    font-size: .875rem; font-family: inherit;
    color: var(--text, #1f2937); width: 100%; min-width: 0;
}
.ms-search::placeholder { color: var(--text-muted, #9ca3af); }

.ms-options { max-height: 220px; overflow-y: auto; padding: 4px; }
.ms-option {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: calc(var(--radius, .5rem) - 2px);
    cursor: pointer; font-size: .875rem; font-family: inherit;
    color: var(--text, #1f2937); user-select: none;
    transition: background .1s;
}
.ms-option:hover { background: var(--gray-100, #f3f4f6); }
.ms-option.hidden { display: none; }
.ms-option input[type="checkbox"] {
    width: 14px; height: 14px; flex-shrink: 0;
    accent-color: var(--primary, #193153); cursor: pointer; margin: 0;
}

.ms-empty { padding: 10px 12px; font-size: .85rem; color: var(--text-secondary, #6b7280); text-align: center; }
.ms-empty.hidden { display: none; }

.ms-footer {
    border-top: 1px solid var(--border, #e5e7eb);
    padding: 6px 8px; display: flex; justify-content: flex-end;
}
.ms-clear-btn {
    background: none; border: none; font-size: .8rem;
    color: var(--text-secondary, #6b7280); cursor: pointer;
    padding: 3px 8px; border-radius: var(--radius-sm, 4px); font-family: inherit;
}
.ms-clear-btn:hover { color: var(--error, #ef4444); background: var(--gray-100, #f3f4f6); }

/* ── ms-dropdown dans un <th> ────────────────────────────────── */
.table thead th:has(.ms-wrap) { padding: 0; }
.table thead th .ms-wrap      { display: block; }
.table thead th .ms-trigger {
    padding: var(--space-3, .75rem);
    font-size: 0.72rem; font-weight: 600;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase; letter-spacing: 0.4px;
    width: 100%; height: auto;
    border-radius: 0; background: var(--gray-50, #f9fafb);
    border-color: transparent;
}
.table thead th .ms-trigger:hover {
    border-color: transparent;
    background: var(--gray-100, #f3f4f6);
}

/* Panel escapes table overflow via .ms-open class (toggled by JS) */
.table-container.ms-open               { overflow: visible; }
.table-container.ms-open thead         { position: relative; z-index: 5; }
.table-container.ms-open thead tr:first-child th:first-child { border-top-left-radius: var(--radius, .5rem); }
.table-container.ms-open thead tr:first-child th:last-child  { border-top-right-radius: var(--radius, .5rem); }

/* ── ms-wrap utilisé comme CHAMP de formulaire ────────────────
   (pickers Marque / Catégorie de la fiche produit, coloris du
   tiroir d'offre). Vit ici et non en <style> inline : le tiroir
   d'offre est un module JS, il n'a pas de feuille à lui. */
.ms-wrap.ms-field { position: relative; }
.ms-wrap.ms-field .ms-trigger {
    height: auto;
    min-height: 42px;
    padding: .5rem .75rem;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius, 8px);
    font-size: 1rem;
    font-weight: 400;
    color: var(--text, #1f2937);
    width: 100%;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.ms-wrap.ms-field .ms-trigger:hover {
    border-color: #9ca3af;
    background: #fff;
    color: var(--text, #1f2937);
}
.ms-wrap.ms-field.open .ms-trigger,
.ms-wrap.ms-field.has-value .ms-trigger {
    border-color: var(--border, #e5e7eb);
    background: #fff;
    color: var(--text, #1f2937);
}
.ms-wrap.ms-field.open .ms-trigger {
    border-color: var(--primary, #193153);
    box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}
.ms-wrap.ms-field .ms-panel {
    width: 100%;
    top: calc(100% + 4px);
    left: 0;
}
/* Le libellé sélectionné peut être long (« Ebony Wave High Gloss ») :
   il tronque au lieu d'élargir le champ. La pastille, elle, ne se comprime pas. */
.ms-wrap.ms-field .ms-value {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}
.ms-wrap.ms-field .ms-value > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Pastille de finition (couleur du référentiel mm_colors.hex). Absente quand la
   finition n'a pas de couleur : on n'invente pas un gris qui ressemblerait à un
   vrai coloris. */
.ms-dot {
    flex: 0 0 auto;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
/* Ligne « créer cette finition » en pied de panneau. */
.ms-create-btn {
    display: flex; align-items: center; gap: 6px; width: 100%;
    background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: .8rem; color: var(--primary, #193153); font-weight: 600;
    padding: 6px 8px; border-radius: var(--radius-sm, 4px); text-align: left;
}
.ms-create-btn:hover { background: var(--gray-100, #f3f4f6); }
.ms-create-btn[disabled] { opacity: .5; cursor: default; }

/* dropdowns.css */
/* ==========================================================================
   DROPDOWN COMPONENTS
   ========================================================================== */

/* Entity Actions Dropdown */
.entity-actions { 
  position: relative;
}

.entity-actions-btn {
  display: inline-flex;
  padding: var(--space-2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}

.entity-actions-btn:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
}

.entity-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
  min-width: 160px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: visible;
  display: none !important;
}

.entity-dropdown.show {
  display: block !important;
}

.entity-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  color: var(--text);
  font-size: 0.875rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition);
  border-radius: 0;
  white-space: nowrap;
}

.entity-dropdown-item:hover { 
  background: var(--gray-100); 
  color: #111827;
}

.entity-dropdown-item:first-child {
  border-radius: var(--radius) var(--radius) 0 0;
}

.entity-dropdown-item:last-child {
  border-radius: 0 0 var(--radius) var(--radius);
}

.entity-dropdown-item:focus {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.entity-dropdown-item.danger { 
  color: var(--error); 
}

.entity-dropdown-item.danger:hover { 
  background: #fef2f2; 
  color: #dc2626; 
}

.entity-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* Dropdown Divider (hr) */
.entity-dropdown hr.dropdown-divider,
.dropdown-divider {
  height: 1px;
  background: var(--border);
  border: none;
  margin: 4px 0;
}

/* Entity Dropdown Submenu */
.entity-dropdown-submenu {
  position: relative;
}

.entity-dropdown-submenu-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  color: var(--text);
  font-size: 0.875rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition);
}

.entity-dropdown-submenu-trigger:hover {
  background: var(--gray-100);
}

.entity-dropdown-submenu-content {
  position: absolute;
  left: auto;
  right: 100%;
  top: 0;
  min-width: 200px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: none;
  z-index: 1001;
}

.entity-dropdown-submenu:hover .entity-dropdown-submenu-content,
.entity-dropdown-submenu.active .entity-dropdown-submenu-content {
  display: block;
}

/* Submenu position adjustment for right edge */
@media (max-width: 1200px) {
  .entity-dropdown-submenu-content {
    left: auto;
    right: 100%;
  }
}

/* Submenu items */
.entity-dropdown-submenu-content .entity-dropdown-item {
  border-radius: 0;
}

.entity-dropdown-submenu-content .entity-dropdown-item:first-child {
  border-radius: var(--radius) var(--radius) 0 0;
}

.entity-dropdown-submenu-content .entity-dropdown-item:last-child {
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Dropdown Container */
.dropdown-container {
  position: relative;
}

.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Dropdown Menu - Fixed visibility */
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  z-index: 100;
  display: none; /* Use display instead of opacity/visibility */
}

.dropdown-menu.show {
  display: block; /* Simple show/hide */
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition);
  font-size: 0.875rem;
}

.dropdown-item:hover {
  background: var(--gray-50);
}

/* Searchable Dropdown Components */
.searchable-dropdown {
  position: relative;
  width: 100%;
}

.searchable-dropdown .form-input {
  position: relative;
  width: 100%;
}

.searchable-dropdown .form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.searchable-dropdown .form-input.error {
  border-color: var(--error);
}

.searchable-dropdown .form-input.error:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.searchable-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 200px;
  overflow-y: auto;
}

.searchable-dropdown-menu.hidden {
  display: none;
}

.searchable-dropdown-item {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  color: var(--text);
  background: var(--surface);
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background-color var(--transition);
  border-bottom: 1px solid var(--gray-100);
}

.searchable-dropdown-item:last-child {
  border-bottom: none;
}

.searchable-dropdown-item:hover,
.searchable-dropdown-item.highlighted {
  background: var(--gray-50);
}

.searchable-dropdown-item.selected {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 500;
}

.searchable-dropdown-empty,
.searchable-dropdown-no-results {
  padding: var(--space-4);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-style: italic;
}

.searchable-dropdown-loading {
  padding: 0.75rem;
  text-align: center;
  color: var(--text-muted);
}

.searchable-dropdown-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

/* Product Search Dropdown */
.product-search-container {
  position: relative;
}

.product-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: white;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 50;
}

.product-search-item {
  padding: 0.5rem;
  cursor: pointer;
  transition: background var(--transition);
}

.product-search-item:hover {
  background: var(--gray-50);
}

/* Component Search Dropdown */
.component-search-container {
  position: relative;
}

.component-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.component-search-item {
  padding: 0.75rem;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.15s;
}

.component-search-item:hover {
  background-color: #f9fafb;
}

.component-search-item:last-child {
  border-bottom: none;
}

/* Condition Suggestions (for future autocomplete) */
.condition-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 50;
  max-height: 200px;
  overflow-y: auto;
}

.condition-suggestion-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
}

.condition-suggestion-item:hover {
  background: #f8fafc;
}

.condition-suggestion-item:last-child {
  border-bottom: none;
}

/* Responsive dropdown positioning */
.entity-dropdown.position-left {
  right: 0;
  left: auto;
}

.entity-dropdown.position-right {
  left: 0;
  right: auto;
}

.dropdown-near-bottom {
  top: auto;
  bottom: 100%;
  transform: translateY(10px);
}

.dropdown-near-bottom.show {
  transform: translateY(0);
}

.dropdown-near-right {
  right: 0;
  left: auto;
}

.dropdown-near-left {
  left: 0;
  right: auto;
}

/* ==========================================================================
   STATUS POPOVER - Quick status change component
   ========================================================================== */

.status-popover {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  min-width: 280px;
  display: none;
}

.status-popover.show {
  display: block;
}

.status-popover-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-popover-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.status-popover-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.status-popover-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.status-popover-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.status-popover-btn.current {
  cursor: default;
  box-shadow: inset 0 0 0 2px currentColor;
}

/* Status button variants */
.status-popover-btn.status-draft {
  background: var(--gray-100);
  color: var(--text-secondary);
  border-color: var(--gray-300);
}

.status-popover-btn.status-submitted {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #93c5fd;
}

.status-popover-btn.status-under_review {
  background: #fef3c7;
  color: #b45309;
  border-color: #fcd34d;
}

.status-popover-btn.status-approved {
  background: #d1fae5;
  color: #047857;
  border-color: #6ee7b7;
}

.status-popover-btn.status-rejected {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

.status-popover-btn.status-converted_to_po {
  background: #e0e7ff;
  color: #4338ca;
  border-color: #a5b4fc;
}

.status-popover-btn.status-expired {
  background: var(--gray-100);
  color: var(--text-muted);
  border-color: var(--gray-300);
}

.status-popover-btn.status-converted_to_invoice {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}

.status-popover-btn.status-unknown {
  background: var(--gray-100);
  color: var(--text-secondary);
  border-color: var(--gray-300);
}

/* Purchase Order status button variants */
.status-popover-btn.status-sent {
  background: #e0e7ff;
  color: #4338ca;
  border-color: #a5b4fc;
}

.status-popover-btn.status-confirmed {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #93c5fd;
}

.status-popover-btn.status-partial {
  background: #fef3c7;
  color: #b45309;
  border-color: #fcd34d;
}

.status-popover-btn.status-delivered {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}

.status-popover-btn.status-invoiced {
  background: #d1fae5;
  color: #047857;
  border-color: #6ee7b7;
}

.status-popover-btn.status-cancelled {
  background: var(--gray-100);
  color: var(--text-muted);
  border-color: var(--gray-300);
}

/* Rejection reason section */
.status-popover-rejection {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  display: none;
}

.status-popover-rejection.show {
  display: block;
}

.status-popover-rejection textarea {
  width: 100%;
  min-height: 60px;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem;
  resize: vertical;
  margin-bottom: var(--space-2);
}

.status-popover-rejection textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.status-popover-rejection-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* Loading state */
.status-popover-btn.loading {
  pointer-events: none;
  opacity: 0.7;
}

.status-popover-btn.loading::after {
  content: '';
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: var(--space-1);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Popover arrow */
.status-popover::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: white;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

/* Position adjustments for table cells */
td .status-popover {
  left: 0;
  transform: none;
}

td .status-popover::before {
  left: 20px;
  transform: rotate(45deg);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  /* Searchable Dropdown Mobile */
  .searchable-dropdown-menu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    max-height: 50vh;
  }
  
  /* Dropdown Mobile */
  .entity-dropdown {
    right: auto;
    left: 0;
    min-width: 140px;
  }
  
  .entity-actions:nth-last-child(-n+2) .entity-dropdown {
    right: 0;
    left: auto;
  }
  
  .dropdown-menu {
    right: auto;
    left: 0;
  }
}
/* modals.css */
/* ==========================================================================
   MODAL COMPONENTS
   ========================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition);
}

.modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  transform: scale(0.95);
  transition: transform var(--transition);
}

.modal-overlay.show .modal { 
  transform: scale(1); 
}

.modal-lg { 
  max-width: 800px; 
}

.modal-xl { 
  width: 95vw;
  max-width: 1200px;
}

.modal-xxl {
  width: 100%;
  max-width: 100% !important;
}

.modal-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.modal-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.modal-header-total {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--gray-100);
  border-radius: var(--radius);
}

.modal-header-total-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.modal-header-total-value {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primary);
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius);
  transition: all var(--transition);
  line-height: 1;
}

.modal-close:hover { 
  background: var(--gray-100); 
}

.modal-body {
  padding: var(--space-4);
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: var(--space-4);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  background: var(--gray-50);
  flex-shrink: 0;
}

/* NOTE: forms must be placed INSIDE .modal-body, never wrapping both
   .modal-body and .modal-footer. See CLAUDE.md modal patterns. */

/* Enhanced Help Modal */
#conditionHelpModal .modal {
  max-width: 900px;
  max-height: 80vh;
  overflow-y: auto;
}

#conditionHelpModal .modal-body h4 {
  color: #1f2937;
  font-size: 16px;
  font-weight: 600;
  margin-top: 24px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e5e7eb;
}

#conditionHelpModal .modal-body h4:first-child {
  margin-top: 0;
}

#conditionHelpModal .modal-body code {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  padding: 3px 8px;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  color: #475569;
  border: 1px solid #cbd5e1;
  font-weight: 500;
}

/* Grid Utilities for Help Modal */
#conditionHelpModal .grid {
  display: grid;
}

#conditionHelpModal .grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

#conditionHelpModal .gap-2 {
  gap: 8px;
}

#conditionHelpModal .gap-6 {
  gap: 24px;
}

/* Modal accessibility */
.modal-open .entity-dropdown {
  z-index: 1060; /* Higher than modal backdrop */
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .modal-lg,
  .modal-xl {
    max-width: 95vw;
    margin: var(--space-4);
  }
  
  #conditionHelpModal .grid-cols-2 {
    grid-template-columns: 1fr;
  }
}
/* notifications.css */
/* ==========================================================================
   NOTIFICATION & ALERT COMPONENTS
   ========================================================================== */

/* Notifications */
#notification-container {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 400px;
  pointer-events: none;
}

.notification {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-weight: 500;
  font-size: 0.875rem;
  pointer-events: auto;
  transform: translateX(100%);
  opacity: 0;
  transition: all 0.3s ease;
  background: var(--surface);
  border: 1px solid var(--border);
}

.notification.animate-slideInUp {
  transform: translateX(0);
  opacity: 1;
}

.notification-success { 
  background: var(--success); 
  color: white; 
  border-color: var(--success); 
}

.notification-error { 
  background: var(--error); 
  color: white; 
  border-color: var(--error); 
}

.notification-warning { 
  background: var(--warning); 
  color: white; 
  border-color: var(--warning); 
}

.notification-info { 
  background: var(--primary); 
  color: white; 
  border-color: var(--primary); 
}

.notification-close {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1.25rem;
  padding: var(--space-1);
  opacity: 0.8;
}

/* Alerts */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
}

.alert-warning {
  background-color: #fef3c7;
  border: 1px solid var(--warning);
  color: #92400e;
}

.alert-success {
  background-color: #10b981;
  color: white;
  border: 1px solid #059669;
}

.alert-danger {
  background-color: #ef4444;
  color: white;
  border: 1px solid #dc2626;
}

.alert-icon {
  flex-shrink: 0;
  margin-top: var(--space-1);
}

.alert-content {
  flex: 1;
}

.alert-content strong {
  font-weight: 600;
  color: #78350f;
}
/* top-nav.css */
/* ==========================================================================
   TOP NAV (PRIORITY STYLES)
   ========================================================================== */

.nav-container {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    min-height: 2.5rem;
    box-sizing: border-box;
}

/* Breadcrumb section (left side) */
.breadcrumb-section {
    flex: 1;
    min-width: 0;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    height: 1.75rem;
    overflow-x: auto;
    padding: 0;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    flex-shrink: 0;
    white-space: nowrap;
    height: 1.75rem;
    line-height: 1.75rem;
    box-sizing: border-box;
}

.breadcrumb-item a {
    background-color: #f3f4f6;
    text-decoration: none;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    height: 1.75rem;
    line-height: normal;
    box-sizing: border-box;
    font-weight: 500;
}

.breadcrumb-item a:hover {
    background-color: #eff6ff;
}

.breadcrumb-item.active {
    color: #374151;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    height: 1.75rem;
    line-height: normal;
    box-sizing: border-box;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    background: #eff6ff;
}

/* Icons consistent sizing */
.breadcrumb-item svg,
.breadcrumb-item .icon {
    flex-shrink: 0;
    width: 16px !important;
    height: 16px !important;
    display: inline-block;
    vertical-align: middle;
}

.breadcrumb > svg {
    flex-shrink: 0;
    width: 14px !important;
    height: 14px !important;
    color: #9ca3af;
}

.search-section {
  background: var(--gray-50);
  padding: var(--space-6);
  border-radius: var(--radius);
  margin-bottom: var(--space-6);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.search-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.search-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 var(--space-2) 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.search-description {
  margin: 0 0 var(--space-4) 0;
  opacity: 0.9;
  font-size: 0.875rem;
  line-height: 1.4;
}

.search-controls,
.search-filters-bar {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  margin-bottom: var(--space-8);
}

.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.5rem 0.875rem;
    min-width: 280px;
    height: 2.25rem;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.search-wrapper:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-wrapper .search-icon {
    color: #6b7280;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

/* TOP NAV SEARCH INPUT - PRIORITY STYLES */
.search-input {
    padding: 20px 0;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    flex: 1;
    font-size: 0.875rem;
    outline: none !important;
    box-shadow: none !important;
    color: #374151;
    height: 100%;
}

.search-input::placeholder {
    color: #9ca3af;
}

.search-clear {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.25rem;
    margin-left: 0.375rem;
    border-radius: 0.25rem;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
}

.search-wrapper:focus-within .search-clear {
    display: flex;
}

.search-clear:hover {
    background: #f3f4f6;
    color: #374151;
}

.results-badge {
    font-size: 0.875rem;
    color: #6b7280;
    white-space: nowrap;
    font-weight: 500;
    padding: 0rem 0rem;
    background: #f9fafb;
}

.filter-search-wrapper {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: nowrap;
}

.filter-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 250px;
}

.filter-icon {
    position: absolute;
    left: 0.75rem;
    pointer-events: none;
    color: #6b7280;
    z-index: 1;
}

.filter-wrapper .form-input {
    padding-right: 2rem;
    width: 100%;
}

.search-wrapper {
    flex: 1 1 300px;
    position: relative;
}

@media (max-width: 768px) {
    .filter-search-wrapper {
        flex-direction: column;
        width: 100%;
        flex-wrap: wrap;
    }
    
    .filter-wrapper,
    .search-wrapper {
        width: 100%;
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   SEARCH & FILTER COMPONENTS (SECONDARY STYLES)
   ========================================================================== */

/* Legacy search controls (for existing pages) */
.search-controls,
.search-filters-bar {
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
    margin-bottom: var(--space-8);
}

/* New card header filters (single row layout) */
.card-header-filters {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.card-header-filters .search-wrapper {
    flex: 0 0 auto;
    max-width: 320px;
}

/* Alternative search input styles (when not in top nav) */
.search-input:not(.search-wrapper .search-input) {
    position: relative;
    flex: 1;
    max-width: 300px;
    min-width: 200px;
}

.search-input:not(.search-wrapper .search-input) input {
    padding-left: 2.5rem;
}

/* Alternative search icon positioning (when not in top nav) */
.search-icon:not(.search-wrapper .search-icon) {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
}

/* Filter Components */
.filters {
    display: flex;
    gap: 0.75rem;
}

.filters select {
    min-width: 150px;
}

/* Card header filters - direct children layout */
.card-header-filters > select {
    min-width: 140px;
}

.card-header-filters > .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.filters-grid {
    display: flex;
    gap: var(--space-6);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.filter-label {
    font-weight: 600;
    color: var(--text);
    font-size: 0.875rem;
}

/* ==========================================================================
   CATEGORY AND PACK STYLING
   ========================================================================== */

.category-card {
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.category-icon {
    color: white;
}

.category-list-item {
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-list-item:hover {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.component-groups {
    max-height: 400px;
    overflow-y: auto;
}

.component-group {
    margin-bottom: 0.5rem;
}

.group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.group-header:hover {
    background: #e9ecef;
}

.group-name {
    font-weight: 500;
    flex: 1;
}

.group-arrow {
    transition: transform 0.2s;
    font-size: 0.8rem;
}

.group-content {
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 0.25rem 0.25rem;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.group-content.collapsed {
    max-height: 0;
    border: none;
}

.component-item {
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid #f1f3f4;
    font-size: 0.85rem;
}

.component-item:last-child {
    border-bottom: none;
}

.component-name {
    color: #495057;
}

/* ==========================================================================
   RESPONSIVE BEHAVIOR
   ========================================================================== */

/* Mobile Responsive */
@media (max-width: 768px) {
    /* Top nav responsive (priority) */
    .nav-container {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
        padding: 0.75rem;
    }
    
    .search-section {
        justify-content: space-between;
        gap: 0.75rem;
    }
    
    .search-wrapper {
        min-width: 200px;
        flex: 1;
    }
    
    .results-badge {
        flex-shrink: 0;
    }
    
    /* Secondary search components responsive */
    .search-controls,
    .search-filters-bar { 
        flex-direction: column; 
    }
    
    .card-header-filters {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }
    
    .search-input:not(.search-wrapper .search-input) {
        max-width: none;
        min-width: auto;
    }
    
    .card-header-filters > select {
        min-width: auto;
    }
    
    .filters {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .search-wrapper {
        min-width: 150px;
    }
    
    .nav-container {
        margin: 0.5rem 0;
    }
}
/* data-display.css */
/* ==========================================================================
   DATA DISPLAY COMPONENTS
   ========================================================================== */

/* Meta Information */
.meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--gray-100);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.meta-primary {
  background: rgba(37, 99, 235, 0.1);
  color: var(--primary);
  border-color: rgba(37, 99, 235, 0.2);
}

.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.meta-block {
  background: var(--gray-50);
  border-radius: var(--radius);
  padding: 0.75rem;
}

.meta-block-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.5rem 0;
}

/* Contact Components */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--primary);
  font-size: 0.875rem;
  text-decoration: none;
  font-weight: 500;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

.contact-link:hover {
  color: var(--primary-hover);
  background: rgba(37, 99, 235, 0.05);
}

.contact-link-small {
  font-size: 0.8125rem;
  padding: var(--space-1) var(--space-1);
}

.address-block {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-style: normal;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Financial Summary */
.financial-summary {
  background: var(--gray-50);
  border-radius: var(--radius);
  padding: var(--space-6);
  border: 1px solid var(--border);
}

.financial-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.financial-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
}

.financial-summary-label {
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
}

.financial-summary-value {
  font-family: inherit;
  font-weight: 500;
  color: var(--text);
}

.financial-summary-total {
  border-top: 2px solid var(--border);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
}

.financial-summary-total .financial-summary-row {
  padding: var(--space-3) 0;
}

.financial-summary-total .financial-summary-label {
  color: var(--primary);
  font-weight: 600;
  font-size: 1rem;
}

.financial-summary-total .financial-summary-value {
  color: var(--primary);
  font-size: 1.25rem;
  font-weight: 700;
}

/* Purchase Order Cards */
.po-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.po-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--gray-100);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.po-meta-primary {
  background: rgba(37, 99, 235, 0.1);
  color: var(--primary);
  border-color: rgba(37, 99, 235, 0.2);
}

.po-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.po-amount {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--text);
}

/* Icon System */
.icon-cont {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.icon-cont svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

/* Icon Size Variants */
.icon-cont.icon-xs { width: 12px; height: 12px; }
.icon-cont.icon-sm { width: 16px; height: 16px; }
.icon-cont.icon-lg { width: 24px; height: 24px; }
.icon-cont.icon-xl { width: 28px; height: 28px; }

/* Icon Fallback */
.icon-text {
  font-weight: bold;
  color: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

svg:not([fill]):not([stroke]) {
  stroke: currentColor;
  fill: none;
}

.contact-item .icon-cont {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

.address-block .icon-cont {
  flex-shrink: 0;
  margin-top: var(--space-1);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .financial-summary {
    padding: var(--space-4);
  }
  
  .financial-summary-grid {
    grid-template-columns: 1fr;
  }
  
  .po-card-meta {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .po-card-footer {
    flex-direction: column;
    gap: var(--space-2);
    align-items: stretch;
  }
  
  .po-amount {
    font-size: 1rem;
  }
  
  .meta-grid {
    grid-template-columns: 1fr;
  }
}
/* Bandeau de catégorie compact.
   Il portait la description complète, soit ~350 px avant le premier produit,
   pour un texte que personne ne lit. Le texte est passé sous la grille ; ce
   bandeau ne garde que le titre et un repère chiffré. */
.page-hero.page-hero-compact {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.page-hero.page-hero-compact h1 {
  margin-bottom: 0.25rem;
}
.page-hero.page-hero-compact p {
  font-size: 0.9rem;
  opacity: 0.85;
}

/* states.css */
/* ==========================================================================
   STATE COMPONENTS
   ========================================================================== */

/* Loading States */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-8);
  text-align: center;
  color: var(--text-secondary);
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid var(--gray-200);
  border-top: 2px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: var(--space-4);
}

.loading-spinner.inline {
  display: inline-block;
  vertical-align: middle;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  animation: spin 0.6s linear infinite;
  margin: 0;
  flex-shrink: 0;
  align-self: center;
}

.line-items-loading {
  opacity: 0.6;
  pointer-events: none;
}

.financial-summary-loading .financial-summary-value {
  background: var(--gray-200);
  color: transparent;
  border-radius: var(--radius-sm);
  animation: pulse 1.5s ease-in-out infinite;
}

/* Empty States */
.empty-state,
.empty-content {
  text-align: center;
  padding: var(--space-12) var(--space-8);
  background: var(--surface);
  border-radius: var(--radius);
  border: 2px dashed var(--border);
  color: var(--text-secondary);
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-8);
  color: var(--text-muted);
  opacity: 0.7;
}

.empty-state-icon svg {
  width: 64px !important;
  height: 64px !important;
}

.empty-state-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--text);
}

.empty-state-description {
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.empty-content p {
  margin: var(--space-2) 0;
  font-size: 0.875rem;
}

/* Info Box */
.info-box {
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.info-box h4 {
  margin: 0 0 var(--space-3) 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

/* Image Gallery States */
.image-preview-container {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #e5e7eb;
  border-radius: 0.5rem;
  padding: 1rem;
  background-color: #f9fafb;
}

.image-placeholder {
  text-align: center;
  color: #9ca3af;
}

.image-preview-container img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .loading-state {
    padding: var(--space-8) var(--space-4);
  }
  
  .empty-state {
    padding: var(--space-8) var(--space-6);
  }
}
/* animations.css */
/* ==========================================================================
   ANIMATIONS & KEYFRAMES
   ========================================================================== */

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Animation for New Components */
@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Success Animation */
@keyframes checkmark {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* Loading Animation */
.condition-validation.loading {
  animation: pulse 2s infinite;
}

/* Success Animation */
.condition-validation.success svg {
  animation: checkmark 0.6s ease-out;
}

.component-row {
  animation: slideInFromRight 0.4s ease-out;
}
/* responsive.css */
/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

/* Tablet Breakpoint */
@media (min-width: 769px) {
  .content-layout.cards > .card {
    flex: 0 0 calc(50% - var(--space-3));
  }
}

/* Desktop Breakpoint */
@media (min-width: 1200px) {
  .content-layout.cards > .card {
    flex: 0 0 calc(25% - var(--space-3));
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  /* Layout Adjustments */
  .mobile-header { 
    display: flex; 
  }
  
  .main-content {
    margin-left: 0;
    padding-top: calc(var(--header-height) + var(--space-4));
    width: 100%;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition);
  }
  
  .sidebar.open { 
    transform: translateX(0); 
  }
  
  /* Content Layout Mobile */
  .content-layout.cards {
    flex-direction: column;
  }
  
  .content-layout.cards > .card {
    max-width: none;
    width: 100%;
  }
  
  .content-layout.split {
    grid-template-columns: 1fr;
  }
  
  /* Form Layout Mobile */
  .form-layout.cols-2,
  .form-layout.cols-3,
  .form-layout.cols-5 {
    grid-template-columns: 1fr;
  }
  
  /* Page Header Mobile */
  .page-header {
    flex-direction: column;
    gap: var(--space-4);
    text-align: left;
    padding: var(--space-6);
  }
  
  .page-header-actions {
    width: 100%;
    margin-left: 0;
  }
  
  /* Modal Mobile */
  .modal-lg,
  .modal-xl {
    max-width: 95vw;
    margin: var(--space-4);
  }
  
  /* Search Mobile */
  .search-controls,
  .search-filters-bar { 
    flex-direction: column; 
  }
  
  .search-input {
    max-width: none;
  }
  
  .filters {
    flex-wrap: wrap;
  }
  
  /* Searchable Dropdown Mobile */
  .searchable-dropdown-menu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    max-height: 50vh;
  }
  
  /* Dropdown Mobile */
  .entity-dropdown {
    right: auto;
    left: 0;
    min-width: 140px;
  }
  
  .entity-actions:nth-last-child(-n+2) .entity-dropdown {
    right: 0;
    left: auto;
  }
  
  /* Document grid mobile: 2 columns */
  .document-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .document-card-preview {
    height: 100px;
  }

  .doc-actions {
    align-self: stretch;
  }
  
  /* Button Mobile */
  .btn-remove {
    width: 100%;
    height: auto;
    padding: 0.75rem;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .page-header {
    padding: var(--space-4);
  }
  
  .page-header-content h1 {
    font-size: 1.375rem;
  }
  
  .section-header {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
  }
  
  .section-title {
    font-size: 1rem;
    gap: var(--space-2);
  }
  
  .count-badge {
    font-size: 0.625rem;
    padding: var(--space-1) var(--space-1);
  }
  
  .loading-state {
    padding: var(--space-8) var(--space-4);
  }
  
  .empty-state {
    padding: var(--space-8) var(--space-6);
  }
}

/* Container overflow fixes */
#listViewContainer {
  overflow: visible;
  position: relative;
}

#listViewContainer .table-container {
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 10px;
}

#cardsViewContainer {
  position: relative;
  overflow: visible;
}

.page-content,
.main-content {
  overflow: visible;
  position: relative;
}

/* Dropdown body scroll prevention */
.dropdown-open {
  overflow: hidden;
}

/* Modal accessibility */
.modal-open .entity-dropdown {
  z-index: 1060; /* Higher than modal backdrop */
}

/* Debug helper (remove in production) */
.debug-dropdown {
  border: 2px solid red !important;
  background: yellow !important;
}
/* public.css */
/* ═══════════════════════════════════════════════════════════════════
   PUBLIC LAYOUT
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* Rouge de marque. DEUX teintes VOLONTAIRES, pas une incohérence :
       --mm-red       : remplissages / badges / grands éléments (#d9392d, ~4.4:1 sur blanc).
       --mm-red-ink   : petit texte sur fond clair — teinte plus foncée pour passer
                        le contraste WCAG AA (~5.6:1). Ne PAS fusionner les deux. */
    --mm-red:     #d9392d;
    --mm-red-ink: #c42d22;
}

/* ── Header ──────────────────────────────────────────────────────── */
.public-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.public-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Logo */
.public-logo {
    display: flex;
    align-items: center;
    gap: .625rem;
    text-decoration: none;
    flex-shrink: 0;
}
.public-logo-mark { display: block; flex-shrink: 0; }
.public-logo-img { height: 38px; width: auto; display: block; }
.public-logo-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -.3px;
    line-height: 1;
}
.logo-mag    { color: #193153; }
.logo-market { color: #d9392d; }

/* Nav */
.public-nav {
    display: flex;
    align-items: center;
    gap: .125rem;
    flex: 1;
}
.public-nav-link {
    display: inline-block;
    text-decoration: none;
    color: #4b5563;
    font-size: .875rem;
    font-weight: 600;
    padding: .375rem .75rem;
    border-radius: 6px;
    transition: color .15s, background .15s;
}
.public-nav-link:hover { color: #111827; background: #f3f4f6; }
/* La page courante était signalée en rouge de marque, au même titre que le
   bouton « S'inscrire » : deux rôles très différents (repère de navigation vs
   appel à l'action) écrits dans la même couleur. Le rouge est gardé pour les
   seules actions de conversion. Le soulignement essayé ensuite était pire :
   sur « Produits », qui porte déjà un chevron de menu déroulant, un trait se
   lit comme une décoration parasite, pas comme un repère. L'état actif se dit
   donc au plus discret : encre plus foncée et graisse, rien d'autre. */
.public-nav-link.active { color: #111827; font-weight: 700; }
button.public-nav-link { background: none; border: none; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; }

/* Megamenu */
.megamenu-wrapper {
    position: relative;
}
.megamenu {
    display: none;
    position: absolute;
    top: 100%;
    left: -1rem;
    padding-top: 12px;
    background: transparent;
    z-index: 300;
    min-width: min(680px, calc(100vw - 1.5rem));
    max-width: calc(100vw - 1.5rem);
}
.megamenu-inner-wrap {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.12);
    overflow: auto;
    max-height: calc(100vh - 100px);
}
.megamenu-wrapper.open .megamenu { display: block; }
.megamenu-wrapper.open .megamenu-trigger svg { transform: rotate(180deg); }
.megamenu-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 1.25rem;
    gap: 1rem;
}
.megamenu-col { display: flex; flex-direction: column; gap: .125rem; }
.megamenu-col-title {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #9ca3af;
    padding: .25rem .5rem .5rem;
    text-decoration: none;
    transition: color .12s;
    cursor: pointer;
}
.megamenu-col-title:hover { color: #d9392d; }
.megamenu-item {
    display: block;
    font-size: .8375rem;
    color: #374151;
    text-decoration: none;
    padding: .3rem .5rem;
    border-radius: 5px;
    transition: background .12s, color .12s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.megamenu-item:hover { background: #f3f4f6; color: #111827; }
.megamenu-footer {
    border-top: 1px solid #f3f4f6;
    padding: .75rem 1.25rem;
    background: #fafafa;
    position: sticky;
    bottom: 0;
}
.megamenu-all {
    font-size: .8375rem;
    font-weight: 600;
    color: #d9392d;
    text-decoration: none;
}
.megamenu-all:hover { text-decoration: underline; }

/* Header search */
.public-header-search {
    position: relative;
    flex: 1;
    max-width: 300px;
}
.public-header-search svg {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}
.public-header-search input {
    width: 100%;
    height: 36px;
    padding: 0 .875rem 0 2.375rem;
    font-size: .875rem;
    font-family: inherit;
    border: 1.5px solid #e5e7eb;
    border-radius: 20px;
    background: #f9fafb;
    color: #111827;
    outline: none;
    transition: border-color .15s, background .15s;
    box-sizing: border-box;
}
.public-header-search input:focus { border-color: #193153; background: #fff; }

/* Header actions */
.public-header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

/* Language switcher */
.lang-switcher {
    position: relative;
    margin-left: .25rem;
}
.lang-current {
    font-size: 1.15rem;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 5px;
    border-radius: 6px;
    transition: background .15s;
    display: flex;
    align-items: center;
}
.lang-current:hover { background: #f3f4f6; }
.lang-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    padding: .35rem;
    min-width: 140px;
    z-index: 200;
}
.lang-switcher.open .lang-dropdown { display: flex; flex-direction: column; }
.lang-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .65rem;
    border-radius: 6px;
    font-size: .85rem;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    transition: background .12s;
    white-space: nowrap;
}
.lang-option:hover { background: #f3f4f6; color: #111; }
.lang-option.active { background: #eef2ff; color: #193153; font-weight: 600; }
.lang-switcher-mobile {
    padding: .5rem 0;
    margin-top: .25rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Mobile nav toggle */
.public-nav-mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    cursor: pointer;
    color: #374151;
    border-radius: 6px;
    margin-left: auto;
}
.public-nav-mobile-toggle:hover { background: #f3f4f6; }
.public-header-mobile { display: none; align-items: center; gap: .15rem; margin-left: auto; }
.public-nav-mobile-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #f3f4f6;
    border-radius: 8px;
    padding: .65rem .8rem;
    margin-bottom: .85rem;
    color: #9ca3af;
}
.public-nav-mobile-search input {
    border: none;
    background: none;
    outline: none;
    font-size: .95rem;
    color: #111827;
    width: 100%;
}
.public-nav-mobile-search input::placeholder { color: #9ca3af; }
.public-nav-mobile {
    display: none;
    flex-direction: column;
    border-top: 1px solid #e5e7eb;
    padding: .5rem 1.25rem 1rem;
    background: #fff;
}
.public-nav-mobile.open { display: flex; }
.public-nav-mobile .public-nav-link { padding: .5rem .25rem; border-radius: 0; border-bottom: 1px solid #f3f4f6; }

/* ── Catégories dans le menu mobile ────────────────────────────────────────
   Le megamenu est un survol à deux colonnes : intransposable au tactile. Ici,
   une entrée « Produits » dépliable, puis un groupe dépliable par famille. */
.mobile-cats-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: none; border: 0; cursor: pointer;
    font: inherit; text-align: left;
}
.mobile-cats-toggle svg { transition: transform .2s; flex: none; color: #9ca3af; }
.mobile-cats.open .mobile-cats-toggle svg { transform: rotate(180deg); }
.mobile-cats-panel { padding: .1rem 0 .6rem; }
.mobile-cats-all {
    display: block; padding: .5rem .25rem; font-size: .8rem; font-weight: 600;
    color: #4b5563; text-decoration: none;
}
.mobile-cats-loading { padding: .5rem .25rem; color: #9ca3af; font-size: .85rem; margin: 0; }
.mobile-cats-group-btn {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: .55rem .25rem; background: none; border: 0;
    border-top: 1px solid #f3f4f6; cursor: pointer;
    font: inherit; font-size: .875rem; font-weight: 600; color: #374151; text-align: left;
}
.mobile-cats-group-btn svg { transition: transform .2s; flex: none; color: #9ca3af; }
.mobile-cats-group-btn.open svg { transform: rotate(180deg); }
.mobile-cats-sub { display: flex; flex-direction: column; padding: .1rem 0 .5rem .75rem; }
.mobile-cats-sub a {
    padding: .42rem .25rem; font-size: .85rem; color: #4b5563; text-decoration: none;
}
.mobile-cats-sub a:first-child { color: #111827; font-weight: 600; }
/* Le panneau mobile peut devenir plus haut que l'écran une fois déplié. */
.public-nav-mobile { max-height: calc(100vh - 64px); overflow-y: auto; }

/* Footer logo */
.public-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    margin-bottom: .875rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 800;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.public-footer {
    background: #111827;
    color: #9ca3af;
    margin-top: 5rem;
}
.public-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 3.5rem 2rem 2.5rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
}
.public-footer-brand-name {
    font-size: .9375rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .625rem;
}
.public-footer-brand p {
    font-size: .8375rem;
    line-height: 1.65;
    /* Fond sombre #111827 : #6b7280 n'y donne que 3,67:1. Ici il faut
       ÉCLAIRCIR, pas assombrir. #7a818f atteint 4,53. */
    color: #7a818f;
    margin: 0;
    max-width: 240px;
}
.public-footer-col h4 {
    font-size: .75rem;
    font-weight: 600;
    color: #d1d5db;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .875rem;
}
.public-footer-col a {
    display: block;
    text-decoration: none;
    /* Fond sombre #111827 : #6b7280 n'y donne que 3,67:1. Ici il faut
       ÉCLAIRCIR, pas assombrir. #7a818f atteint 4,53. */
    color: #7a818f;
    font-size: .875rem;
    margin-bottom: .4375rem;
    transition: color .15s;
}
.public-footer-col a:hover { color: #fff; }
.public-footer-bottom {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    border-top: 1px solid #1f2937;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .8rem;
    /* Fond sombre #111827 : #4b5563 n'y donne que 2,35:1. #788290 atteint 4,56. */
    color: #788290;
}

/* Public content */
.public-content {
    min-height: calc(100vh - 64px - 280px);
}


/* ═══════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════ */
.hero {
    background: #0a1628;
    background-image:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(221,61,49,.12) 0%, transparent 60%),
        radial-gradient(ellipse 40% 80% at 0% 50%, rgba(25,49,83,.5) 0%, transparent 50%),
        radial-gradient(ellipse 40% 80% at 100% 50%, rgba(25,49,83,.4) 0%, transparent 50%);
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, rgba(10,22,40,.6), transparent);
    pointer-events: none;
}
/* Hero floating product showcase */
.hero-showcase {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.hero-showcase-item {
    position: absolute;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
    opacity: .12;
    transition: opacity 1s ease;
}
.hero-showcase-item.loaded { opacity: .18; }
.hero-showcase-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-showcase-item:nth-child(1) {
    width: 200px; height: 260px;
    top: 10%; left: 3%;
    transform: rotate(-6deg);
}
.hero-showcase-item:nth-child(2) {
    width: 180px; height: 220px;
    top: 15%; right: 4%;
    transform: rotate(4deg);
}
.hero-showcase-item:nth-child(3) {
    width: 160px; height: 200px;
    bottom: 20%; left: 6%;
    transform: rotate(3deg);
}
.hero-showcase-item:nth-child(4) {
    width: 170px; height: 210px;
    bottom: 18%; right: 6%;
    transform: rotate(-5deg);
}
@media (max-width: 1024px) {
    .hero-showcase { display: none; }
}

.hero-inner {
    max-width: 780px;
    margin: 0 auto;
    padding: 5.5rem 2rem 3.5rem;
    text-align: center;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(255,255,255,.5);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    padding: .4rem 1.25rem;
    margin-bottom: 1.75rem;
    backdrop-filter: blur(8px);
}
.hero-eyebrow svg { color: #d9392d; }
.hero-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.25rem, 6vw, 3.75rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.04em;
    color: #fff;
    margin: 0 0 1.375rem;
}
.hero-title-accent { color: #d9392d; }
.hero-lead {
    font-size: 1.075rem;
    line-height: 1.75;
    color: rgba(255,255,255,.55);
    margin: 0 auto 2.75rem;
    max-width: 520px;
}
.hero-actions {
    display: flex;
    gap: .875rem;
    justify-content: center;
    flex-wrap: wrap;
}
.hero-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #d9392d;
    color: #fff;
    font-size: .9375rem;
    font-weight: 700;
    padding: .875rem 2.25rem;
    border-radius: 8px;
    /* Bordure transparente déclarée explicitement : sans elle, les usages en
       <button> (le CTA « Faire une demande ») héritent du 2px outset noir du
       navigateur, alors que les usages en <a> n'ont rien. Même convention que
       .btn dans buttons.css. */
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 4px 20px rgba(221,61,49,.45);
}
.hero-btn-primary:hover { background: #c63529; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(221,61,49,.45); }
.hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.8);
    font-size: .9375rem;
    font-weight: 600;
    padding: .875rem 1.75rem;
    border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,.15);
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
    backdrop-filter: blur(4px);
}
.hero-btn-secondary:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color: #fff; }

/* Stats bar */
.hero-stats {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.2);
    position: relative;
}
.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.625rem 3.5rem;
    flex: 1;
    max-width: 220px;
}
.hero-stat-sep {
    width: 1px;
    background: rgba(255,255,255,.1);
    flex-shrink: 0;
    align-self: stretch;
    margin: 1rem 0;
}
.hero-stat-n {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.75rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-bottom: .35rem;
    letter-spacing: -.03em;
}
.hero-stat-l {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.66);
    text-align: center;
}


/* ═══════════════════════════════════════════════════════════════════
   TRUST BAR
   ═══════════════════════════════════════════════════════════════════ */
.trust-bar {
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}
.trust-bar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.625rem 2rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .75rem 1.5rem;
    border-right: 1px solid #f3f4f6;
}
.trust-item:last-child { border-right: none; }
.trust-icon {
    width: 42px;
    height: 42px;
    background: rgba(221,61,49,.07);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #d9392d;
}
.trust-item strong {
    display: block;
    font-size: .8375rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: .1rem;
}
.trust-item span {
    font-size: .775rem;
    color: #6b7280;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════
   BRAND STRIP
   ═══════════════════════════════════════════════════════════════════ */
.brands-strip-section {
    background: #fff;
    border-bottom: 1px solid #ebebeb;
    padding: 1.25rem 0;
    overflow: hidden;
}
.brands-strip-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}
.brands-strip-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    /* #9ca3af sur blanc ne donnait que 2,54:1, très loin du seuil AA de 4,5.
       #6f7682 atteint 4,58 en restant une teinte grise discrète. */
    color: #6f7682;
    margin: 0 0 .75rem;
    display: block;
}
.brands-strip-track {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    align-items: center;
}
.brand-pill {
    display: inline-block;
    padding: .3rem .875rem;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    color: #374151;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
    white-space: nowrap;
}
.brand-pill:hover {
    border-color: #d9392d;
    color: #d9392d;
    background: rgba(221,61,49,.04);
}
/* Logo-based brand chip */
.brand-logo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 4px 12px;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.brand-logo-chip img {
    height: 22px;
    max-width: 72px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .55;
    transition: filter .2s, opacity .2s;
}
.brand-logo-chip:hover {
    border-color: #d1d5db;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.brand-logo-chip:hover img {
    filter: grayscale(0%);
    opacity: 1;
}
.brand-logo-chip-skeleton {
    display: inline-flex;
    height: 36px;
    width: 88px;
    border-radius: 8px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e9eaec 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
.brand-pill-skeleton {
    display: inline-block;
    height: 30px;
    width: 80px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e9eaec 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}


/* ═══════════════════════════════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════════════════════════════ */
.home-section { padding: 4rem 0; }
.home-section-alt { background: #f9fafb; }
.home-section-dark {
    background: #0a1628;
    background-image:
        radial-gradient(ellipse 60% 60% at 50% 0%, rgba(221,61,49,.08) 0%, transparent 60%);
}
.how-step-dark h3 { color: #fff; }
.how-step-dark p { color: rgba(255,255,255,.86); }
.how-step-dark .how-step-num {
    background: #d9392d;
    box-shadow: 0 4px 16px rgba(221,61,49,.4);
}

.section-inner { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -.025em;
    margin: 0;
}
.section-more {
    font-size: .875rem;
    font-weight: 500;
    color: #193153;
    text-decoration: none;
    transition: opacity .15s;
}
.section-more:hover { opacity: .7; }
.section-eyebrow {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--mm-red-ink);
    margin-bottom: .35rem;
}

/* ── How it works ────────────────────────────────────────────────── */
.how-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-top: 1rem;
}
.how-step {
    flex: 1;
    max-width: 320px;
    text-align: center;
    padding: 1.5rem;
}
.how-step-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #0f1f38;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.125rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}
.how-step h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: .5rem;
}
.how-step p {
    font-size: .875rem;
    color: #6b7280;
    line-height: 1.65;
    margin: 0;
}
.how-step-arrow {
    display: flex;
    align-items: center;
    padding-top: 2.5rem;
    color: #d1d5db;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .how-steps { flex-direction: column; align-items: center; }
    .how-step-arrow { display: none; }
}

/* ── Featured grid ──────────────────────────────────────────────── */
.featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;
}
.featured-card-large {
    grid-row: 1 / 3;
}
.featured-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    min-height: 240px;
    background: #111;
}
.featured-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transition: transform .4s ease, filter .4s ease;
}
.featured-card:hover img {
    transform: scale(1.04);
    filter: brightness(.85);
}
.featured-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.15) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    color: #fff;
    z-index: 1;
}
.featured-badge {
    display: inline-block;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 4px;
    padding: .2rem .6rem;
    margin-bottom: .5rem;
    width: fit-content;
}
.featured-card-brand {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.6);
    margin-bottom: .25rem;
}
.featured-card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 .4rem;
    color: #fff;
}
.featured-card-large .featured-card-title {
    font-size: 1.5rem;
}
.featured-card-price {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: #d9392d;
}
.featured-skeleton {
    border-radius: 14px;
    min-height: 240px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e9eaec 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
.featured-skeleton:first-child {
    grid-row: 1 / 3;
}
@media (max-width: 768px) {
    .featured-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .featured-card-large { grid-row: auto; }
    .featured-card { min-height: 200px; }
}

/* ── Brand showcase ─────────────────────────────────────────────── */
.brand-showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.brand-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.brand-card:hover {
    border-color: #193153;
    box-shadow: 0 8px 24px rgba(25,49,83,.1);
    transform: translateY(-2px);
}
.brand-card-img {
    height: 160px;
    overflow: hidden;
    background: #f3f4f6;
}
.brand-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .4s ease;
}
.brand-card:hover .brand-card-img img {
    transform: scale(1.05);
}
.brand-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}
.brand-card-body {
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.brand-card-logo {
    height: 22px;
    width: auto;
    max-width: 100px;
    object-fit: contain;
}
.brand-card-name {
    font-size: .9375rem;
    font-weight: 700;
    color: #111827;
}
.brand-card-count {
    font-size: .75rem;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}
.brand-card-skeleton {
    height: 220px;
    border-radius: 12px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e9eaec 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@media (max-width: 768px) {
    .brand-showcase {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .brand-showcase {
        grid-template-columns: 1fr;
    }
}

/* ── Condition grid ─────────────────────────────────────────────── */
.cond-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.cond-card {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    height: 180px;
    background: #111;
}
.cond-card-img {
    position: absolute;
    inset: 0;
}
.cond-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.6);
    transition: transform .4s ease, filter .4s ease;
}
.cond-card:hover .cond-card-img img {
    transform: scale(1.06);
    filter: brightness(.5);
}
.cond-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    text-align: center;
    padding: 1rem;
}
.cond-card-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.125rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.02em;
}
.cond-card-count {
    font-size: .75rem;
    font-weight: 600;
    color: rgba(255,255,255,.6);
    margin-top: .25rem;
}
.cond-skeleton {
    height: 180px;
    border-radius: 12px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e9eaec 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@media (max-width: 768px) {
    .cond-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .cond-grid {
        grid-template-columns: 1fr;
    }
    .cond-card { height: 150px; }
}

/* ── Category grid ───────────────────────────────────────────────── */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
}
.cat-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.25rem 1.25rem 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none;
    color: #111827;
    transition: border-color .18s, box-shadow .18s, transform .18s;
    min-height: 80px;
}
.cat-card:hover {
    border-color: #193153;
    box-shadow: 0 6px 20px rgba(25,49,83,.1);
    transform: translateY(-2px);
}
.cat-card-name {
    font-size: .875rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.35;
}
.cat-card-count {
    font-size: .75rem;
    color: #d9392d;
    font-weight: 600;
    margin-top: .5rem;
}

/* ── Category image cards (magmarket-style) ──────────────────────── */
.cat-card-img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    background: #1a2332 center/cover no-repeat;
    transition: transform .18s, box-shadow .18s;
}
.cat-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10,22,40,.55);
    transition: background .2s;
}
.cat-card-img:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(10,22,40,.25);
}
.cat-card-img:hover::after { background: rgba(10,22,40,.35); }
.cat-card-img-label {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .5rem 1rem;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.cat-card-img-label small {
    font-size: .7rem;
    font-weight: 400;
    opacity: .85;
    text-transform: none;
    letter-spacing: 0;
}

/* Photo hero (magmarket-style background) — full-bleed immersive banner */
.hero-title-magma { text-transform: uppercase; letter-spacing: .01em; }
.hero--photo {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: clamp(360px, 48vh, 560px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
}
/* Guard against the 100vw bleed creating a horizontal scrollbar */
.public-content { overflow-x: hidden; }

/* ── Skeletons ───────────────────────────────────────────────────── */
.cat-skeleton { height: 150px; border-radius: 12px; }

/* ── Skeletons ───────────────────────────────────────────────────── */
.cat-skeleton,
.prod-skeleton {
    border-radius: 10px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e9eaec 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
.prod-skeleton { height: 290px; }

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Product grid ────────────────────────────────────────────────── */
.prod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════════
   NEWSLETTER
   ═══════════════════════════════════════════════════════════════════ */
.newsletter-section {
    background: #193153;
    padding: 3.5rem 0;
}
.newsletter-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    flex-wrap: wrap;
}
.newsletter-copy h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.375rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: .375rem;
    letter-spacing: -.02em;
}
.newsletter-copy p {
    font-size: .9rem;
    color: rgba(255,255,255,.55);
    margin: 0;
}
.newsletter-form {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.newsletter-input {
    height: 44px;
    padding: 0 1rem;
    font-size: .875rem;
    font-family: inherit;
    border: 1.5px solid rgba(255,255,255,.15);
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    color: #fff;
    outline: none;
    width: 260px;
    transition: border-color .15s, background .15s;
}
.newsletter-input::placeholder { color: rgba(255,255,255,.35); }
.newsletter-input:focus { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.12); }
.newsletter-btn {
    height: 44px;
    padding: 0 1.5rem;
    background: #d9392d;
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, transform .15s;
    white-space: nowrap;
}
.newsletter-btn:hover { background: #c63529; transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════════════════
   CTA BANNER
   ═══════════════════════════════════════════════════════════════════ */
/* ── FAQ ─────────────────────────────────────────────────────────── */
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid #e5e7eb; }
.faq-item summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem 0; font-size: .9375rem; font-weight: 600;
    color: #111827; cursor: pointer; list-style: none; transition: color .15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.25rem; font-weight: 400; color: #9ca3af; flex-shrink: 0; margin-left: 1rem; }
.faq-item[open] summary::after { content: '−'; color: #d9392d; }
.faq-item summary:hover { color: #d9392d; }
.faq-answer { padding: 0 0 1.25rem; }
.faq-answer p { font-size: .875rem; line-height: 1.7; color: #6b7280; margin: 0; }

.home-cta {
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    padding: 5rem 2rem;
    text-align: center;
}
.home-cta-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 2rem;
}
.home-cta-badge {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--mm-red-ink);
    background: rgba(221,61,49,.08);
    border: 1px solid rgba(221,61,49,.2);
    border-radius: 999px;
    padding: .3rem .875rem;
    margin-bottom: 1.25rem;
}
.home-cta h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: .875rem;
    letter-spacing: -.03em;
    text-wrap: balance;
}
.home-cta p {
    font-size: 1rem;
    color: #6b7280;
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
/* Le halo rouge de .hero-btn-primary est dessiné pour le hero sombre, où il
   se lit comme une lueur. Sur ces bandeaux clairs il vire au nuage rose : on
   lui substitue l'élévation discrète employée partout ailleurs sur fond clair
   (encart d'achat, cartes), et on ne rappelle le rouge qu'au survol, resserré. */
.home-cta .hero-btn-primary { box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.home-cta .hero-btn-primary:hover { box-shadow: 0 6px 16px rgba(217,57,45,.22); }
.home-cta .hero-btn-secondary {
    color: #374151;
    border-color: #d1d5db;
    background: #fff;
}
.home-cta .hero-btn-secondary:hover {
    color: #111827;
    border-color: #193153;
    background: #f3f4f6;
}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤ 1024px) ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .trust-bar-inner { grid-template-columns: repeat(2, 1fr); }
    .trust-item { border-right: none; border-bottom: 1px solid #f3f4f6; }
    .trust-item:nth-child(2n) { border-right: none; }
    .trust-item:nth-last-child(-n+2) { border-bottom: none; }

    .public-footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .prod-grid { grid-template-columns: repeat(3, 1fr); }
    .cat-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
    .megamenu { min-width: min(560px, calc(100vw - 1.5rem)); }
    .megamenu-inner { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile (≤ 768px) ────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Header */
    .public-header-inner { padding: 0 1rem; gap: .75rem; height: 56px; }
    .public-header-search { display: none; }
    .public-header-actions { display: none; }
    .public-nav { display: none; }
    .public-nav-mobile-toggle { display: inline-flex; }
    .public-header-mobile { display: flex; }

    /* Hero */
    .hero-inner { padding: 3.5rem 1.25rem 3rem; }
    .hero-eyebrow { font-size: .65rem; }
    .hero-lead { font-size: .975rem; }
    .hero-actions { gap: .75rem; }
    .hero-btn-primary, .hero-btn-secondary { padding: .75rem 1.5rem; font-size: .875rem; width: 100%; justify-content: center; }
    .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: #0c1a2e; border-top: 1px solid rgba(255,255,255,.1); }
    .hero-stat { padding: 1.4rem .5rem; max-width: none; justify-content: flex-start; gap: .35rem; }
    .hero-stat-sep + .hero-stat { border-left: 1px solid rgba(255,255,255,.1); }
    .hero-stat-sep { display: none; }
    .hero-stat-n { font-size: 1.5rem; margin-bottom: 0; }
    .hero-stat-l { font-size: .6rem; letter-spacing: .03em; line-height: 1.35; }

    /* Trust bar */
    .trust-bar-inner { grid-template-columns: 1fr 1fr; padding: 1rem; gap: 0; }
    .trust-item { padding: .875rem .75rem; border-right: none; border-bottom: 1px solid #f3f4f6; }
    .trust-item:nth-child(odd) { border-right: 1px solid #f3f4f6; }
    .trust-item:nth-last-child(-n+2) { border-bottom: none; }

    /* Sections */
    .home-section { padding: 2.5rem 0; }
    .home-section-alt { padding: 2.5rem 0; }
    .section-inner { padding: 0 1rem; }
    .section-head { margin-bottom: 1.25rem; }
    .section-title { font-size: 1.125rem; }
    .section-more { font-size: .8125rem; white-space: nowrap; }

    /* Brand strip */
    .brands-strip-section { padding: 1rem; }
    .brands-strip-track { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
    .brands-strip-track::-webkit-scrollbar { display: none; }

    /* Category grid */
    .cat-grid { grid-template-columns: repeat(2, 1fr); gap: .625rem; }
    .cat-card { padding: .875rem 1rem; min-height: 64px; }
    .cat-card-name { font-size: .8125rem; }
    .cat-card-count { font-size: .7rem; margin-top: .375rem; }

    /* Product grid */
    .prod-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }

    /* Newsletter */
    .newsletter-section { padding: 2.5rem 1rem; }
    .newsletter-inner { flex-direction: column; gap: 1.5rem; align-items: flex-start; }
    .newsletter-copy h2 { font-size: 1.2rem; }
    .newsletter-input { width: 100%; box-sizing: border-box; }
    .newsletter-form { width: 100%; flex-direction: column; }
    .newsletter-btn { width: 100%; }

    /* CTA */
    .home-cta { padding: 3rem 1rem; }
    .home-cta h2 { font-size: 1.5rem; }
    .home-cta p { font-size: .9rem; }

    /* Footer */
    .public-footer { margin-top: 3rem; }
    .public-footer-inner { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.5rem 1.25rem 2rem; }
    .public-footer-bottom { flex-direction: column; gap: .375rem; text-align: center; padding: 1.25rem; }

    /* Other pages */
    .page-hero { padding: 2.5rem 1rem; }
    .page-hero h1 { font-size: 1.5rem; }
    .page-hero p { font-size: .9rem; }
    .page-section { padding: 2rem 1rem; }
    .brands-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .brands-toolbar { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .brands-toolbar input { max-width: 100% !important; width: 100%; box-sizing: border-box; }
    .contact-layout { grid-template-columns: 1fr; gap: 2rem; }

    /* Product show */
    .product-layout { flex-direction: column; }
    .product-gallery { width: 100%; }
    .product-info { width: 100%; }
}

/* ── Small mobile (≤ 480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
    .hero-inner { padding: 2.75rem 1rem 2.5rem; }
    .hero-stats { grid-template-columns: repeat(3, 1fr); }
    .hero-stat { padding: 1rem .25rem; }
    .hero-stat-n { font-size: 1.25rem; }

    .trust-bar-inner { grid-template-columns: 1fr; }
    .trust-item { border-right: none !important; }
    .trust-item:nth-last-child(-n+2) { border-bottom: 1px solid #f3f4f6; }
    .trust-item:last-child { border-bottom: none; }

    .cat-grid { grid-template-columns: 1fr 1fr; }
    .prod-grid { grid-template-columns: 1fr 1fr; gap: .625rem; }

    .page-hero h1 { font-size: 1.375rem; }

    .brands-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .brand-card-logo { width: 60px; height: 36px; }
    .brand-card-logo img { max-width: 60px; max-height: 36px; }
}


/* ═══════════════════════════════════════════════════════════════════
   AUTH LAYOUT
   ═══════════════════════════════════════════════════════════════════ */
.auth-layout {
    min-height: 100vh;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
}
.auth-content-layout {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
    padding: 2.5rem;
    width: 100%;
    max-width: 460px;
}
.auth-card-header {
    text-align: center;
    margin-bottom: 2rem;
}
.auth-logo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: #111827;
    font-weight: 700;
    font-size: .9375rem;
    margin-bottom: 1.5rem;
}
.auth-logo-mark {
    width: 32px;
    height: 32px;
    background: #193153;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
}
.auth-logo-img { height: 46px; width: auto; display: block; }
.auth-card-header h1 {
    font-size: 1.375rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: .25rem;
    letter-spacing: -.02em;
}
.auth-card-header p {
    font-size: .875rem;
    color: #6b7280;
}
.auth-alert {
    padding: .75rem 1rem;
    border-radius: 8px;
    font-size: .875rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}
.auth-alert-error   { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.auth-alert-success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.auth-label-link {
    float: right;
    font-size: .8125rem;
    font-weight: 400;
    color: #193153;
    text-decoration: none;
}
.auth-label-link:hover { text-decoration: underline; }
.auth-card-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: .875rem;
    color: #6b7280;
}
.auth-card-footer a {
    color: #193153;
    font-weight: 600;
    text-decoration: none;
}
.auth-card-footer a:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════════════════════════════
   PAGE HERO (used on Brands, Contact, Merchants, etc.)
   ═══════════════════════════════════════════════════════════════════ */
.page-hero {
    background: #193153;
    padding: 3.5rem 2rem;
    text-align: center;
    color: #fff;
}
.page-hero-inner { max-width: 680px; margin: 0 auto; }
.page-hero h1 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.03em;
    margin-bottom: .5rem;
    color: #fff;
}
.page-hero p { font-size: 1rem; color: rgba(255,255,255,.65); }

.page-section { padding: 3.5rem 2rem; }


/* ═══════════════════════════════════════════════════════════════════
   BRANDS PAGE
   ═══════════════════════════════════════════════════════════════════ */
.brands-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.brands-count { font-size: .875rem; color: #9ca3af; }

.brands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .875rem;
}
.brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.25rem .75rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    text-decoration: none;
    color: #111827;
    gap: .25rem;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.brand-card:hover {
    border-color: #193153;
    box-shadow: 0 4px 14px rgba(25,49,83,.1);
    transform: translateY(-1px);
}
.brand-card-logo {
    width: 80px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .375rem;
}
.brand-card-logo img {
    max-width: 80px;
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .6;
    transition: filter .2s, opacity .2s;
}
.brand-card:hover .brand-card-logo img {
    filter: grayscale(0%);
    opacity: 1;
}
.brand-card-initial {
    font-size: 1.5rem;
    font-weight: 700;
    color: #d1d5db;
}
.brand-card-name { font-size: .875rem; font-weight: 600; color: #1f2937; }
/* #9ca3af sur blanc ne donne que 2,54:1. Cette règle, plus tardive dans le
   fichier, écrasait le #6b7280 défini plus haut. #6f7682 atteint 4,58. */
.brand-card-count { font-size: .775rem; color: #6f7682; }
.brand-skeleton {
    height: 118px;
    border-radius: 10px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e9eaec 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}


/* ═══════════════════════════════════════════════════════════════════
   CONTACT PAGE
   ═══════════════════════════════════════════════════════════════════ */
.contact-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 3rem;
    align-items: start;
}
.contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
}
.contact-info-icon {
    width: 40px;
    height: 40px;
    background: #eef2f7;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #193153;
}
.contact-info-item strong { display: block; font-size: .9rem; font-weight: 600; color: #111827; margin-bottom: .15rem; }
.contact-info-item span   { font-size: .8375rem; color: #6b7280; }
.contact-info-item a      { color: #193153; }
.contact-form textarea.form-input { resize: vertical; min-height: 120px; }



/* ═══════════════════════════════════════════════════════════════════
   MERCHANTS PAGE
   ═══════════════════════════════════════════════════════════════════ */
.merchants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}
.merchant-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.merchant-card-header { display: flex; align-items: center; gap: 1rem; }
.merchant-avatar {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #193153;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: .03em;
}
.merchant-name { font-size: 1rem; font-weight: 700; color: #111827; margin: 0; }
.merchant-location {
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .8rem;
    color: #6b7280;
    margin-top: .2rem;
}
.merchant-desc { font-size: .875rem; color: #6b7280; line-height: 1.55; margin: 0; }
.merchant-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}
.merchant-stat { font-size: .8125rem; color: #9ca3af; }


/* ═══════════════════════════════════════════════════════════════════
   HOME — VERSION SOBRE & ÉLÉGANTE
   Palette restreinte : encre #111827, gris #6b7280, blanc / off-white.
   Le rouge de marque n'est plus qu'un petit accent (eyebrow, prix, CTA).
   Aucun aplat de couleur, pas de dégradé criard.
   ═══════════════════════════════════════════════════════════════════ */

/* ── En-têtes de section : titres affirmés, accent minimal ────────── */
.home-section .section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .7rem;
    letter-spacing: .16em;
}
.home-section .section-eyebrow::before {
    content: "";
    width: 18px;
    height: 1px;
    background: var(--mm-red-ink);
}
.home-section .section-title {
    font-size: clamp(1.4rem, 1.05rem + 1.4vw, 1.95rem);
    font-weight: 700;
    letter-spacing: -.03em;
}

/* ── Cartes : élévation douce et discrète (featured + cond) ───────── */
.featured-card,
.cond-card {
    box-shadow: 0 1px 2px rgba(17,24,39,.06);
    transition: transform .2s ease, box-shadow .2s ease;
}
.featured-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(17,24,39,.14); }
.cond-card:hover     { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(17,24,39,.16); }

/* ── Hero : accent rouge PLEIN (pas de dégradé), stats sobres ─────── */
/* .hero-title-accent garde sa couleur rouge solide définie plus haut. */
.hero-stats {
    border-top: none;
    background: transparent;
    gap: .75rem;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 2rem 3rem;
    flex-wrap: wrap;
}
.hero-stat {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    padding: 1.1rem 1.5rem;
    max-width: none;
}
.hero-stat-sep { display: none; }

/* ── « Bonnes affaires » : sobre, sans aplat rouge ────────────────── */
/* Différenciée par une teinte chaude très légère + filets fins ;      */
/* eyebrow / titre / lien reprennent leur style d'encre par défaut.    */
.home-section-deals {
    background: #f8f7f5;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
}

/* ── CTA marchand : carte claire encadrée (≠ bloc Reprise) ────────── */
.home-cta-framed {
    background: #fff;
}
.home-cta-framed .home-cta-inner {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 2.75rem 2.5rem;
    background: #fafafa;
}

/* ── Cartes « Haut de gamme » : produit entier visible (contain) ──── */
/* Les visuels sont des photos produit (souvent sur fond blanc) : cover  */
/* les rognait. On affiche en entier sur tuile blanche, légende lisible. */
.featured-card { background: #fff; }
.featured-card img {
    object-fit: contain;
    padding: 1.25rem 1.25rem 3.75rem;
}
.featured-card-large img { padding: 1.75rem 1.75rem 5rem; }
.featured-card:hover img { transform: scale(1.03); filter: none; }
.featured-card-overlay {
    background: linear-gradient(to top, rgba(17,24,39,.82) 0%, rgba(17,24,39,.30) 28%, transparent 58%);
}

/* ── Section sombre « Notre différence » : lisibilité ─────────────── */
/* .how-step-dark h3/p étaient écrasés par .how-step h3/p (même         */
/* spécificité, définis plus bas) → texte sombre sur fond navy.         */
/* On force ici avec une spécificité supérieure (0,2,1).                */
.home-section-dark .how-step h3 { color: #fff; }
.home-section-dark .how-step p  { color: rgba(255,255,255,.82); }

/* ── Responsive : stats hero empilées proprement ──────────────────── */
@media (max-width: 600px) {
    .hero-stats { gap: .5rem; padding-bottom: 2rem; }
    .hero-stat { flex: 1 1 40%; padding: .9rem 1rem; }
}

/* ── Autocomplétion barre de recherche ─────────────────────────────── */
.mm-search { position: relative; }
.public-nav-mobile-search.mm-search { position: relative; }

.mm-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1200;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(17, 24, 39, .14);
    padding: .35rem;
    max-height: min(70vh, 460px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* En desktop le champ fait 300px ; on élargit le menu pour les vignettes. */
.public-header-search .mm-suggest { min-width: 340px; right: auto; }

.mm-suggest-group {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9ca3af;
    padding: .5rem .6rem .25rem;
}
.mm-suggest-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .6rem;
    border-radius: 8px;
    text-decoration: none;
    color: #111827;
    cursor: pointer;
}
.mm-suggest-item:hover,
.mm-suggest-item.is-active { background: #f3f4f6; }

.mm-suggest-thumb {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mm-suggest-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mm-suggest-noimg { width: 100%; height: 100%; background: #f3f4f6; }

.mm-suggest-body { flex: 1 1 auto; min-width: 0; }
.mm-suggest-title {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mm-suggest-meta {
    display: block;
    font-size: .75rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mm-suggest-price {
    flex: 0 0 auto;
    font-size: .875rem;
    font-weight: 700;
    color: #193153;
    white-space: nowrap;
}

.mm-suggest-brand { justify-content: space-between; }
.mm-suggest-brand-name { font-weight: 600; font-size: .875rem; }
.mm-suggest-count { font-size: .75rem; color: #6b7280; }

.mm-suggest-all {
    justify-content: center;
    font-size: .82rem;
    font-weight: 600;
    color: #d9392d;
    margin-top: .15rem;
}
.mm-suggest-empty {
    padding: .9rem .6rem;
    font-size: .85rem;
    color: #6b7280;
    text-align: center;
}

/* product-card.css */
/* ==========================================================================
   PRODUCT CARD — composant partagé (SOURCE UNIQUE)
   Importé par MagMarket (main.css) ET par le moteur de vitrine (symlink).
   Toutes les couleurs ont un fallback inline → le composant est portable :
   il reprend simplement le --primary du contexte (couleur du marchand côté vitrine).
   N'AJOUTE PAS de markup spécifique ici ; garde-le purement visuel et tokenisé.
   ========================================================================== */

/* Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1.25rem;
    transition: opacity .15s;
}
.products-grid.loading-dim { opacity: .45; pointer-events: none; }

/* ── Product cards ───────────────────────────────────────────────── */

/* Carte posée, pas flottante (2026-09-02) : l'ombre portée sur deux niveaux et
   le soulèvement au survol donnaient à une grille de vingt cartes un relief de
   catalogue promotionnel. Un filet suffit à délimiter ; au survol c'est le
   filet qui se marque, la carte ne bouge plus. Même vocabulaire que la fiche
   produit, qui n'a plus ni cadre ni ombre. */
.product-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line, #e9ebef);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, box-shadow .2s;
}
.product-card:hover {
    border-color: #cfd4db;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .05);
}

/* Image area — white so product photos blend naturally */
.product-card-img {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #fff;
    overflow: hidden;
    border-bottom: 1px solid var(--border, #f0f0f0);
    /* Colonne : une bande d'étiquettes en haut, l'image occupe tout le reste.
       Les étiquettes étaient auparavant en surimpression ; sur une photo en
       paysage elles remplissaient la bande blanche du haut pendant que celle du
       bas restait vide, et l'ensemble paraissait décentré. */
    display: flex;
    flex-direction: column;
}
.product-card-img img {
    flex: 1;
    min-height: 0;
    width: 100%;
    object-fit: contain;
    /* Retrait resserré (était 1rem) : le produit occupait à peine la moitié du
       cadre, entouré de blanc. Sur une vignette de catalogue, la photo est
       l'argument, elle doit remplir la place disponible. */
    padding: .15rem .55rem .55rem;
    transition: transform .3s ease;
}
.product-card:hover .product-card-img img { transform: scale(1.04); }
.product-card-no-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-300, #d1d5db);
}

/* Condition badge — top-left */
.product-card-flags {
    /* Hauteur RÉSERVÉE même sans étiquette : sans cela, une carte avec badge et
       une carte sans badge n'auraient pas la même zone d'image et la grille
       perdrait son alignement. C'est ce qui rend l'ensemble consistant. */
    flex: none;
    min-height: 2.15rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .4rem;
    padding: .55rem .6rem 0;
}
/* L'état n'est plus posé sur l'image : il rejoint la catégorie dans le corps de
   la carte. Sur l'image, il remplissait la bande blanche du haut d'une photo en
   paysage pendant que celle du bas restait vide, ce qui donnait une impression
   de décentrage alors que l'image était bien centrée. */
/* Sur du matériel d'occasion, l'état est l'attribut décisif : il garde donc du
   poids typographique, mais sans cadre — deux boîtes de styles différents côte
   à côte faisaient désordre. */
.product-card-badge {
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .2rem .45rem;
    border-radius: 3px;
    background: transparent;
    /* #6b7280 = 4,83:1 sur blanc, au-dessus du seuil AA. */
    color: #6b7280;
    border: 1px solid var(--line, #e4e7ec);
    white-space: nowrap;
}

/* Discount badge — top-right */
/* La remise redevient un chiffre lisible et non une pastille d'alerte : sur une
   grille entière, vingt pastilles rouges tiraient l'œil avant les produits.
   #4b5563 = 7,56:1 sur blanc, la lisibilité est meilleure qu'avant. */
.product-card-discount {
    font-size: .72rem;
    font-weight: 600;
    padding: .2rem 0;
    background: transparent;
    color: #4b5563;
    white-space: nowrap;
    flex: none;
}

/* Body */
.product-card-body {
    /* Rythme resserré : quatre éléments espacés de .25rem donnaient une carte
       aérée mais molle, sans hiérarchie. La marque et le titre se rapprochent,
       le prix se détache par un espace au-dessus. */
    padding: .7rem .85rem .85rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.product-card-brand {
    font-size: .7rem;
    color: var(--primary, #2563eb);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.product-card-title {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    color: var(--gray-900, #111827);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card-category {
    font-size: .72rem;
    /* #8b91a0 ne donnait que 3,15:1 sur blanc, sous le seuil AA. */
    color: #6f7682;
    margin: .1rem 0 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Le point médian n'apparaît que si l'état le précède : le carrousel des
   produits liés n'affiche que l'état, il ne doit pas hériter d'un point isolé. */


/* Price row */
.product-card-price {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    /* Le prix est poussé en BAS de la carte : dans une grille, des prix alignés
       d'une carte à l'autre se comparent d'un coup d'œil, alors qu'ils sautaient
       de ligne selon la longueur du titre. */
    margin-top: auto;
    padding-top: .55rem;
    /* Le prix neuf passe à la ligne EN ENTIER quand il ne tient pas : nowrap seul
       empêchait la coupure du nombre mais faisait déborder la carte de 22 px. */
    flex-wrap: wrap;
    row-gap: .15rem;
}
.product-card-price strong {
    font-size: 1.1rem;
    /* 700 → 600 : même graisse que le prix de la fiche produit. */
    font-weight: 600;
    color: var(--gray-900, #111827);
    letter-spacing: -.015em;
}
.product-card-compare {
    font-size: .8rem;
    color: var(--text-muted, #6f7682);
    text-decoration: line-through;
  /* Le montant ne doit jamais se couper : « Neuf : 7 990,00 € »
     passait à la ligne au milieu du nombre sur les cartes étroites. */
  white-space: nowrap;
}

/* Chargement d'une nouvelle page de résultats.
   Les cartes précédentes RESTENT affichées, simplement atténuées, et le spinner
   se superpose. Vider la grille pendant l'attente donnait l'impression d'une
   erreur et faisait sauter la hauteur de la page à chaque clic sur un filtre. */
.products-grid-wrap { position: relative; min-height: 120px; }
.products-grid-wrap > .state-loading {
  position: absolute;
  inset: 0;
  padding: 0;
  align-items: flex-start;
  padding-top: 3.5rem;
  pointer-events: none;
  background: rgba(255, 255, 255, .35);
}
/* Atténuation plus douce qu'auparavant : le spinner suffit à signaler l'attente,
   inutile d'effacer les résultats à moitié. */
.products-grid.loading-dim { opacity: .62; pointer-events: none; transition: opacity .12s ease; }

/* Conditionnement sur la carte : « 2 600 € la paire ». Discret, il qualifie le
   prix sans concurrencer le montant ni le prix barré qui le suit. */
.product-card-soldas { font-size: .78rem; font-weight: 500; color: var(--gray-500, #6b7280); margin-left: .3rem; }

/* products.css */
/* ── Products listing layout ─────────────────────────────────────── */

.products-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    align-items: start;
}

/* ── Filters sidebar ─────────────────────────────────────────────── */

.filters-sidebar {
    position: sticky;
    top: 80px;
    background: #fff;
    border: 1.5px solid var(--border, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
}

.filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.filters-title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--gray-900, #111);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.filters-clear-all {
    font-size: .775rem;
    color: var(--primary, #2563eb);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-weight: 500;
}
.filters-clear-all:hover { text-decoration: underline; }

/* Filter sections */
.filter-section {
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.filter-section:last-child { border-bottom: none; }

.filter-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
    color: var(--gray-800, #1f2937);
    text-align: left;
}
.filter-section-toggle span:first-child { flex: 1; }
.filter-section-toggle:hover { background: var(--gray-50, #f9fafb); }

.filter-chevron {
    flex-shrink: 0;
    transition: transform .2s;
    color: var(--text-muted, #9ca3af);
}
.filter-section.open .filter-chevron { transform: rotate(180deg); }

.filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--primary, #2563eb);
    color: #fff;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
}

.filter-options {
    display: none;
    padding: .25rem 0 .75rem;
}
.filter-section.open .filter-options { display: block; }

/* Checkboxes */
.filter-option {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .35rem 1rem;
    cursor: pointer;
    font-size: .875rem;
    color: var(--gray-700, #374151);
    transition: background .1s;
    user-select: none;
}
.filter-option:hover { background: var(--gray-50, #f9fafb); }
.filter-option input[type=checkbox] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    accent-color: var(--primary, #2563eb);
    cursor: pointer;
}
.filter-option-label { flex: 1; }
.filter-option-count {
    font-size: .775rem;
    color: var(--text-muted, #9ca3af);
}

/* Brand search */
.filter-brand-search-wrap {
    padding: .5rem .875rem;
}
.filter-brand-search {
    width: 100%;
    font-size: .8rem;
    padding: .35rem .625rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    outline: none;
    background: var(--gray-50, #f9fafb);
    color: var(--gray-800, #1f2937);
    box-sizing: border-box;
}
.filter-brand-search:focus { border-color: var(--primary, #2563eb); background: #fff; }

.filter-options-list { max-height: 220px; overflow-y: auto; }

/* Price range slider */
.price-slider-wrap { padding: .5rem 1rem .75rem; }

.price-slider-display {
    display: flex;
    justify-content: space-between;
    margin-bottom: .75rem;
}
.price-slider-val {
    font-size: .8rem;
    font-weight: 600;
    color: var(--gray-800, #1f2937);
    background: var(--gray-100, #f3f4f6);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    padding: .2rem .5rem;
}

.price-slider-track {
    position: relative;
    height: 4px;
    background: var(--gray-200, #e5e7eb);
    border-radius: 2px;
    margin: 16px 0;
}

.price-slider-fill {
    position: absolute;
    top: 0; bottom: 0;
    background: var(--primary, #2563eb);
    border-radius: 2px;
    pointer-events: none;
}

.price-range-thumb {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 4px;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
    outline: none;
    margin: 0;
}

.price-range-thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--primary, #2563eb);
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
    cursor: pointer;
    pointer-events: all;
    transition: transform .1s, box-shadow .1s;
}
.price-range-thumb::-webkit-slider-thumb:hover,
.price-range-thumb:active::-webkit-slider-thumb {
    transform: scale(1.15);
    box-shadow: 0 0 0 4px rgba(37,99,235,.15);
}

.price-range-thumb::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--primary, #2563eb);
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
    cursor: pointer;
    pointer-events: all;
}
.price-range-thumb::-moz-range-track { background: transparent; }

/* Skeleton loaders */
.filter-skeleton-list { padding: .25rem 1rem; }
.filter-skeleton {
    height: 14px;
    background: linear-gradient(90deg, var(--gray-100, #f3f4f6) 25%, var(--gray-200, #e5e7eb) 50%, var(--gray-100, #f3f4f6) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 4px;
    margin-bottom: .6rem;
}
.filter-skeleton:nth-child(2) { width: 80%; }
.filter-skeleton:nth-child(3) { width: 60%; }
.filter-skeleton:nth-child(4) { width: 75%; }
.filter-skeleton:nth-child(5) { width: 50%; }

/* ── Main content area ───────────────────────────────────────────── */

.products-main { min-width: 0; }

.products-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.toolbar-left { display: flex; align-items: center; gap: .75rem; }
.toolbar-right { display: flex; align-items: center; gap: .75rem; }

.products-count { font-size: .875rem; color: var(--text-muted, #6b7280); }

.filters-mobile-toggle { position: relative; }
.filters-mobile-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--primary, #2563eb);
    color: #fff;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.search-box {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1.5px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: .4rem .75rem;
    background: #fff;
    color: var(--text-muted, #9ca3af);
}
.search-box input {
    border: none;
    outline: none;
    font-size: .875rem;
    background: transparent;
    color: var(--gray-800, #1f2937);
    width: 180px;
}
.search-box:focus-within { border-color: var(--primary, #2563eb); }

.sort-select {
    font-size: .875rem;
    padding: .4rem .625rem;
    border: 1.5px solid var(--border, #e5e7eb);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

/* Active filter chips */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1rem;
}

.active-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .275rem .625rem;
    background: var(--primary-50, #eff6ff);
    color: var(--primary, #2563eb);
    border: 1px solid var(--primary-100, #bfdbfe);
    border-radius: 999px;
    font-size: .775rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background .1s;
}
.active-chip:hover { background: var(--primary-100, #dbeafe); }
.chip-remove { font-size: .9rem; line-height: 1; color: var(--primary, #2563eb); opacity: .7; }

/* States */
.state-loading {
    display: flex;
    justify-content: center;
    padding: 3rem;
}
.state-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border, #e5e7eb);
    border-top-color: var(--primary, #2563eb);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

.state-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4rem 1rem;
    color: var(--text-muted, #6b7280);
    text-align: center;
}
.state-empty p { margin: 0; font-size: .95rem; }

/* Grid + product cards → déplacés dans components/product-card.css
   (source unique partagée avec le moteur de vitrine). Ne pas redéclarer ici. */

/* Pagination */
.products-pagination { padding: 2rem 0; }
.pagination { display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap; }

/* ── Single product page ─────────────────────────────────────────── */

.product-page { max-width: 1280px; margin: 0 auto; padding: 2rem; }

.product-breadcrumb { display: flex; gap: .5rem; align-items: center; font-size: .875rem; color: var(--text-muted, #6b7280); margin-bottom: 2rem; flex-wrap: wrap; }
.product-breadcrumb a { color: var(--primary, #2563eb); text-decoration: none; }
.product-breadcrumb a:hover { text-decoration: underline; }

.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }

.product-gallery-main {
    /* Cadre CARRÉ et non 4/3 : la colonne d'achat étant plus haute, un cadre
       paysage laissait 179 px de blanc sous la photo. Le carré comble ce vide
       ET agrandit le produit d'un tiers — décisif en occasion, où la photo est
       ce qui montre l'état réel. Cohérent avec les vignettes du catalogue,
       elles aussi en 1/1. */
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

/* Slide track */
.gallery-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform .35s ease;
}
.gallery-slide {
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}
.gallery-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 1.5rem;
}
.gallery-zoomable { cursor: zoom-in; }
.product-no-image { color: var(--text-muted, #9ca3af); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

/* Dots indicator (mobile) */
.gallery-dots {
    position: absolute;
    bottom: .75rem;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    gap: .375rem;
    z-index: 3;
}
.gallery-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(0,0,0,.2);
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.gallery-dot.active {
    background: #193153;
    transform: scale(1.25);
}
@media (max-width: 768px) {
    .gallery-dots { display: flex; }
    .gallery-arrow { display: none !important; }
    .gallery-slide img { padding: 1rem; }
}

/* Gallery arrows */
.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #374151;
    opacity: 0;
    transition: opacity .2s, background .15s;
    z-index: 2;
}
.gallery-arrow-prev { left: .5rem; }
.gallery-arrow-next { right: .5rem; }
.product-gallery-main:hover .gallery-arrow { opacity: 1; }
.gallery-arrow:hover { background: #fff; color: #193153; }

/* Zoom button */
.gallery-zoom-btn {
    position: absolute;
    bottom: .5rem; right: .5rem;
    width: 30px; height: 30px;
    border-radius: 6px;
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(0,0,0,.08);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #6b7280;
    opacity: 0;
    transition: opacity .2s;
    z-index: 2;
}
.product-gallery-main:hover .gallery-zoom-btn { opacity: 1; }
.gallery-zoom-btn:hover { color: #193153; background: #fff; }

.product-gallery-thumbs { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.product-thumb {
    width: 72px; height: 72px;
    object-fit: contain;
    border: 2px solid var(--border, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    padding: .375rem;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.product-thumb.active, .product-thumb:hover {
    border-color: #193153;
    box-shadow: 0 0 0 1px #193153;
}

/* ── Lightbox ───────────────────────────────────────────────────── */
.gallery-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn .2s ease;
}
.gallery-lightbox.hidden { display: none; }
.gallery-lightbox img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    background: #fff;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 8px 40px rgba(0,0,0,.4);
    border-radius: 4px;
    user-select: none;
}
.lightbox-close {
    position: absolute;
    top: 1rem; right: 1.25rem;
    font-size: 2rem;
    line-height: 1;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    opacity: .7;
    transition: opacity .15s;
}
.lightbox-close:hover { opacity: 1; }
.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.lightbox-arrow:hover { background: rgba(255,255,255,.25); }
.lightbox-prev { left: 1.25rem; }
.lightbox-next { right: 1.25rem; }
.lightbox-counter {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.6);
    font-size: .85rem;
    pointer-events: none;
}

.product-brand { font-size: .8rem; color: var(--primary, #2563eb); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; text-decoration: none; }
.product-title { font-size: 1.6rem; font-weight: 700; margin: .5rem 0; line-height: 1.25; }
.product-ref { font-size: .875rem; margin-bottom: 1rem; }
/* État "capteur de demande" (fiche sans offre / en rupture) — Module 1 */
.product-state-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .75rem; border-radius: 8px; font-weight: 600; font-size: .9rem; margin: .75rem 0 .25rem; }
.product-state-badge.product-state-sold { background: #fef2f2; color: #b91c1c; }
.product-state-badge.product-state-unavailable { background: #fffbeb; color: #b45309; }
.product-similar-link a { display: inline-flex; align-items: center; gap: .35rem; color: #6b7280; text-decoration: none; }
.product-similar-link a:hover { text-decoration: underline; }
.product-price-block { display: flex; align-items: baseline; gap: .75rem; margin: 1rem 0; flex-wrap: wrap; }
.product-price { font-size: 1.75rem; font-weight: 700; color: var(--gray-900, #111); }
.product-compare-price { font-size: 1.1rem; color: var(--text-muted, #9ca3af); text-decoration: line-through; }
.product-meta-row { display: flex; align-items: center; gap: .5rem; font-size: .9rem; margin: .4rem 0; color: var(--text-muted, #4b5563); }
.product-short-desc { font-size: .95rem; line-height: 1.6; margin: 1.25rem 0; color: var(--gray-700, #374151); }
.product-actions { display: flex; gap: .75rem; margin: 1.5rem 0; flex-wrap: wrap; }
.product-actions .btn { flex: 1; min-width: 180px; justify-content: center; }

/* Reassurance badges */
.product-reassurance {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 1.25rem 0;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
}
.reassurance-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border, #f0f0f0);
}
.reassurance-item:last-child { border-bottom: none; }
.reassurance-item svg {
    flex-shrink: 0;
    color: var(--primary, #2563eb);
}
.reassurance-item div {
    display: flex;
    flex-direction: column;
}
.reassurance-item strong {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--gray-800, #1f2937);
}
.reassurance-item span {
    font-size: .75rem;
    color: var(--text-muted, #6b7280);
}

/* Merchant card */
.product-merchant-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .875rem 1rem;
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    margin-bottom: 1rem;
}
.merchant-card-header {
    display: flex;
    align-items: center;
    gap: .625rem;
}
.merchant-card-header div {
    display: flex;
    flex-direction: column;
}
.merchant-card-header strong {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted, #6b7280);
    font-weight: 500;
}
.merchant-name {
    font-size: .9rem;
    font-weight: 600;
    color: var(--gray-900, #111);
}
.merchant-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary, #2563eb);
    color: #fff;
    font-weight: 700;
    font-size: .875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Related products */
.product-related-section { margin-top: 1rem; }
.related-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

/* Skeleton for related products */
.product-card-skeleton {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border, #e5e7eb);
}
.product-card-skeleton .skeleton-img {
    aspect-ratio: 1/1;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}
.product-card-skeleton .skeleton-text {
    height: 12px;
    margin: .75rem 1rem .5rem;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 4px;
}
.product-card-skeleton .skeleton-text.short { width: 50%; margin-top: 0; margin-bottom: 1rem; }

.product-dims { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: 1rem; }
.product-dim { background: var(--gray-50, #f9fafb); border: 1px solid var(--border, #e5e7eb); border-radius: 6px; padding: .5rem; text-align: center; font-size: .8rem; display: flex; flex-direction: column; gap: .2rem; }
.product-dim span { color: var(--text-muted, #6b7280); }
.product-section { margin-bottom: 3rem; }
.product-section h2 { font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border, #e5e7eb); }
.product-description { font-size: .95rem; line-height: 1.7; color: var(--gray-700, #374151); max-width: 75ch; }
.specs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.product-specs-table { width: 100%; min-width: 0; border-collapse: collapse; }
.product-specs-table td { word-break: break-word; overflow-wrap: break-word; white-space: normal; vertical-align: top; padding: .35rem .5rem; }
.product-specs-table td.spec-key { font-weight: 500; color: var(--gray-700, #374151); width: 40%; }
.product-documents, .product-links { display: flex; flex-wrap: wrap; gap: .75rem; }
.product-doc-link, .product-ext-link { display: flex; align-items: center; gap: .4rem; padding: .5rem .875rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; text-decoration: none; color: var(--gray-800, #111); font-size: .875rem; transition: border-color .15s; }
.product-doc-link:hover, .product-ext-link:hover { border-color: var(--primary, #2563eb); color: var(--primary, #2563eb); }

/* ── Contact modal ───────────────────────────────────────────────── */

.pmodal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(3px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    animation: fadeIn .15s ease;
}
.pmodal-overlay.hidden { display: none; }

@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.pmodal {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0,0,0,.22);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2rem;
    animation: slideUp .18s ease;
}

.pmodal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #f0f0f0;
}
.pmodal-header-info {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
}
.pmodal-icon {
    width: 42px;
    height: 42px;
    background: rgba(37,99,235,.08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #2563eb);
    flex-shrink: 0;
}
.pmodal-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #111827;
    margin: .1rem 0 .2rem;
}
.pmodal-sub {
    font-size: .8375rem;
    color: #6b7280;
    margin: 0;
}
.pmodal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: #f3f4f6;
    border-radius: 8px;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .1s, color .1s;
}
.pmodal-close:hover { background: #e5e7eb; color: #111; }

.pmodal-ref {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .8rem;
    color: #6b7280;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: .5rem .75rem;
    margin-bottom: 1.25rem;
}

.pmodal-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.pmodal-actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #f0f0f0;
}

.product-contact-success {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.25rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    color: #15803d;
    font-size: .9rem;
    font-weight: 500;
    margin-top: .5rem;
}
.product-contact-error {
    padding: .75rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: .875rem;
    margin-top: .75rem;
}

.form-label-optional { font-size: .75rem; color: #9ca3af; font-weight: 400; }
.required { color: #ef4444; }

@media (max-width: 600px) {
    .pmodal { padding: 1.25rem; }
    .pmodal-row { grid-template-columns: 1fr; }
    .pmodal-actions { flex-direction: column-reverse; }
    .pmodal-actions .btn { width: 100%; justify-content: center; }
}

/* ── Animations ──────────────────────────────────────────────────── */
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 960px) {
    .products-layout { grid-template-columns: 1fr; }

    .filters-sidebar {
        position: fixed;
        top: 0; left: 0;
        height: 100vh;
        width: 280px;
        z-index: 300;
        transform: translateX(-100%);
        transition: transform .25s ease;
        border-radius: 0;
        overflow-y: auto;
    }
    .filters-sidebar.open { transform: translateX(0); box-shadow: 4px 0 32px rgba(0,0,0,.18); }

    .filters-mobile-toggle { display: inline-flex !important; }
}

@media (min-width: 961px) {
    .filters-mobile-toggle { display: none !important; }
}

@media (max-width: 768px) {
    .related-products-grid { grid-template-columns: repeat(2, 1fr); }
    .product-actions .btn { min-width: 0; }
}

@media (max-width: 600px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
    .products-layout { padding: 1rem; }
    .product-layout { grid-template-columns: 1fr; gap: 1.5rem; }
    .product-dims { grid-template-columns: repeat(2, 1fr); }
    .search-box input { width: 120px; }
    .product-specs-table td,
    .product-specs-table td.spec-key { display: block; width: 100%; }
    .product-specs-table td.spec-key { padding-bottom: .1rem; border-bottom: none; }
    .product-specs-table tr { display: block; border-bottom: 1px solid var(--border, #e5e7eb); padding: .4rem 0; }
    .product-actions { flex-direction: column; }
    .product-actions .btn { width: 100%; }
    .product-merchant-card { flex-direction: column; align-items: flex-start; gap: .5rem; }
}


/* === Variantes & offres (style marketplace) === */
/* Prix + "À partir de" */
.product-price-from-label {
  flex-basis: 100%;
  font-size: .8rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: -.35rem;
}

/* Sélecteurs de variantes (état / couleur / capacité) */
.product-variants { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-4) 0; }
.product-variant-axis { display: flex; flex-direction: column; gap: var(--space-2); }
.variant-axis-label {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--gray-700);
}
.variant-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.variant-option {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .55rem; text-align: left;
  background: #fff; color: var(--gray-900);
  border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: .55rem .85rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.variant-option .vo-text { display: flex; flex-direction: column; gap: .12rem; line-height: 1.15; }
.variant-option .vo-name { font-size: .9rem; font-weight: 600; }
.variant-option .vo-price { font-size: .78rem; font-weight: 600; color: var(--text-muted); }
.variant-option.active .vo-price { color: var(--primary); }
.vo-swatch {
  width: 18px; height: 18px; border-radius: 50%; flex: none; display: inline-block;
  border: 1px solid rgba(0,0,0,.18);
}
.variant-option.active .vo-swatch { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary); }
.product-meta-row .vo-swatch { width: 16px; height: 16px; }
.variant-condition-desc { font-size: .82rem; color: var(--text-muted); margin: .15rem 0 0; line-height: 1.35; }
.variant-condition-desc:empty { display: none; }
.variant-option:hover:not(.variant-option-disabled):not(.active) { border-color: var(--gray-500); }
.variant-option.active {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
  background: var(--primary-light); color: var(--primary);
}
.variant-option-disabled {
  opacity: .45; cursor: not-allowed; text-decoration: line-through;
  background: var(--gray-50);
}

/* Valeur unique (pas de choix) : ligne discrète */
.product-meta-row { color: var(--gray-700); }
.product-meta-row strong { color: var(--gray-900); }

/* Liste des offres concurrentes */
.product-offers { margin-top: var(--space-4); border-top: 1px solid var(--border); padding-top: var(--space-4); }
.product-offers-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 var(--space-3); color: var(--gray-900); }
.offer-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.offer-row:hover { border-color: var(--gray-500); }
.offer-row-selected { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--primary-light); }
.offer-row-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.offer-row-price { font-size: 1.15rem; font-weight: 700; color: var(--gray-900); }
.offer-row-meta { font-size: .85rem; color: var(--gray-700); }
.offer-row-merchant { font-size: .8rem; color: var(--text-muted); }
.offer-row-merchant::before { content: "\00b7\00a0"; color: var(--gray-500); }
.offer-unavailable { opacity: .55; }
.offer-merchant-desc {
  margin: .75rem 0;
  padding: .75rem 1rem;
  background: #f8fafc;
  border-left: 3px solid var(--primary, #4f46e5);
  border-radius: 0 6px 6px 0;
  font-size: .875rem;
  color: var(--gray-800);
}
.offer-merchant-desc strong { display: block; margin-bottom: .25rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.offer-merchant-desc p { margin: 0; line-height: 1.6; }
.offer-select-btn {
  white-space: nowrap; cursor: pointer;
  border: 1.5px solid var(--primary); background: #fff; color: var(--primary);
  border-radius: var(--radius); padding: .5rem 1.1rem; font-size: .85rem; font-weight: 700;
  transition: background .15s ease, color .15s ease;
}
.offer-select-btn:hover:not(:disabled) { background: var(--primary); color: #fff; }
.offer-select-btn:disabled { border-color: var(--border); color: var(--text-muted); cursor: not-allowed; }
.offer-row-selected .offer-select-btn { background: var(--primary); color: #fff; }

/* ── Options payantes (add-ons) ────────────────────────────────── */
.product-addons-block {
  margin: 1rem 0;
  padding: .875rem 1rem;
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 8px);
  background: #f9fafb;
}
.addons-header {
  display: flex; align-items: center; gap: .4rem;
  font-size: .9rem; margin-bottom: .6rem;
  color: var(--gray-900, #111);
}
.addons-header svg { color: var(--gray-600, #4b5563); flex-shrink: 0; }
.addon-choice {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .5rem .75rem;
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 6px;
  cursor: pointer;
  font-size: .875rem;
  background: #fff;
  margin-bottom: .4rem;
  transition: border-color .15s ease, background .15s ease;
  user-select: none;
}
.addon-choice:has(input:checked) {
  border-color: var(--primary, #2563eb);
  background: var(--primary-light, #eff6ff);
}
.addon-choice input[type="checkbox"] { margin-top: .15rem; accent-color: var(--primary, #2563eb); flex-shrink: 0; }
.addon-choice-body { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.addon-choice-label { font-weight: 600; color: var(--gray-900, #111); }
.addon-choice:has(input:checked) .addon-choice-label { color: var(--primary, #2563eb); }
.addon-choice-notes { font-size: .78rem; color: var(--text-muted, #6b7280); }
.addon-choice-price { font-weight: 700; color: var(--primary, #2563eb); white-space: nowrap; margin-left: auto; padding-left: .5rem; }
/* Merchant form editor */
.addon-editor-row { background: #f9fafb; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; padding: .6rem .75rem; margin-bottom: .5rem; }

/* ── Fiche : livraison au CTA + sommaire sticky + barre d'achat mobile (best practices 2026) ── */
.product-ship-note { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--gray-700, #374151); margin: .25rem 0 1rem; }
.product-ship-note svg { flex-shrink: 0; color: var(--primary, #193153); }
.product-ship-note strong { color: #065f46; }

.product-section { scroll-margin-top: 120px; }
html { scroll-behavior: smooth; }

/* ── Marque : logo + nom, cliquables d'un bloc ─────────────────────────────
   Le logo est enfermé dans un cadre de taille FIXE : les logos de marque ont
   des ratios très variables (KEF est large, Focal presque carré) et sans
   contrainte la hauteur de la ligne sauterait d'une fiche à l'autre. */
.product-brand-row {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  margin-bottom: .15rem;
}
.product-brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 28px;
  padding: 2px 6px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  flex: none;
}
.product-brand-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.product-brand-row:hover .product-brand { text-decoration: underline; }

/* ── « Faire une offre » ───────────────────────────────────────────────────
   Aligné sur le bord gauche des boutons d'action, dont il est une variante
   discrète. Il était auparavant sous la ligne de livraison et décalé vers la
   droite par le padding du bouton fantôme. */
.product-make-offer-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: .6rem 0 .9rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  color: #4b5563;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.product-make-offer-link:hover { color: #d9392d; }

/* ══ FICHE PRODUIT ════════════════════════════════════════════════════════
   La colonne d'information était une pile plate : marque, titre, référence,
   état, prix, garantie, description, boutons, livraison, réassurance, tous au
   même niveau visuel. Rien ne signalait où se prend la décision d'achat.
   La page est réorganisée en trois temps : IDENTIFIER (marque, titre,
   catégorie), COMPRENDRE (description courte), ACHETER (encart dédié). */

/* La galerie prend un peu plus de place : sur du matériel d'occasion, la photo
   est l'argument principal, c'est elle qui montre l'état réel. */
.product-layout { grid-template-columns: 1.15fr 1fr; }

/* ── Identification ────────────────────────────────────────────────────── */
.product-brand-row { margin-bottom: .5rem; }
/* CHANGEMENT ASSUMÉ (2026-09-02) : le logo était calé en float à droite dans
   un cadre blanc de 132×46. Il faisait un second point lourd en face du titre
   et, une fois l'encart d'achat mis à plat, c'était le seul rectangle encadré
   de la colonne. Il repasse au fil du texte, au-dessus du titre, sans cadre :
   la colonne a alors UN seul bord gauche, sur lequel tout s'aligne.
   mix-blend-mode efface le fond blanc des logos fournis en PNG opaque.
   Hauteur constante pour que la ligne ne saute pas d'une fiche à l'autre. */
.product-page .product-brand-row { float: none; display: flex; align-items: center;
  min-height: 0; width: fit-content; margin: 0 0 1rem; }
.product-page .product-brand-logo { width: auto; max-width: 118px; height: 28px;
  padding: 0; border: 0; background: none; border-radius: 0; }
.product-page .product-brand-logo img { height: 28px; width: auto; max-width: 118px; mix-blend-mode: multiply; }
/* Titre : c'est lui qui ouvre la colonne, il en porte le poids. */
.product-page .product-title { margin: 0 0 .55rem; font-size: 2.05rem; font-weight: 600;
  line-height: 1.15; letter-spacing: -.025em; color: #111827; }
/* Catégorie et référence en sur-titre discret, pas en phrase. */
.product-page .product-meta-line { margin: 0; font-size: .76rem; letter-spacing: .1em;
  text-transform: uppercase; color: #9aa0a8; }
.product-meta-line { margin: 0 0 .85rem; font-size: .85rem; color: #6b7280; }
.product-meta-line a { color: inherit; }
.product-meta-sep { margin: 0 .35rem; opacity: .5; }
.product-short-desc { margin: 0 0 1.1rem; color: #4b5563; line-height: 1.55; }
.product-page .product-short-desc { margin: 1.05rem 0 0; font-size: .95rem; line-height: 1.65;
  color: #5b6470; max-width: 52ch; }

/* ── Encart d'achat ────────────────────────────────────────────────────────
   Traitement volontairement DISCRET (2026-09-02). L'encart empilait trois
   aplats de couleur saturée sur la même ligne (pastille d'état bleu plein,
   remise rouge sur fond rose, prix en 800) : sur du matériel haut de gamme
   d'occasion, ce vocabulaire de promotion dévalorise le produit. Rien n'est
   retiré (mentions L112-1-1 / neuf constaté comprises), tout est requalifié
   en hiérarchie typographique : contours fins, gris, graisses modérées.
   ────────────────────────────────────────────────────────────────────────── */
/* Plus de cadre du tout (arbitrage Olivier du 2026-09-02) : la page a déjà un
   fond gris clair et deux colonnes, l'encart est donc délimité sans qu'on ait
   besoin de le dessiner. Le pavé blanc + les gros boutons étaient ce qui
   restait de plus « place de marché » sur la fiche. */
.product-buybox {
  border: 0;
  border-radius: 0;
  background: transparent;
  /* Le filet remplace le cadre : il sépare l'identification de l'achat sans
     enfermer quoi que ce soit, et donne à la colonne la colonne vertébrale
     qui lui manquait une fois le pavé blanc retiré. */
  border-top: 1px solid #e6e8ec;
  margin-top: 1.6rem;
  padding: 1.6rem 0 0;
}
/* Le bloc prix se lit en TROIS temps au lieu d'une ligne encombrée :
   état / prix / référence de comparaison. Les deux pseudo-éléments du
   conteneur sont des éléments flex de hauteur nulle : ils servent de sauts
   de ligne intercalés par `order`, sans toucher au HTML (que product-variant.js
   met à jour par id). */
.product-buybox .product-price-block {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0 .5rem; margin: 0;
}
.product-buybox .product-price-block::after  { content: ""; flex-basis: 100%; height: 0; order: -2; }
.product-buybox .product-price-block::before { content: ""; flex-basis: 100%; height: 0; order: 2; }
/* État : contour fin plutôt qu'aplat. align-self évite que le contour ne
   s'étire sur toute la ligne libérée par le saut. */
.product-buybox #offerConditionBadge {
  order: -3; align-self: flex-start;
  background: transparent; color: #9aa0a8;
  border: 0; border-radius: 0;
  font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  padding: 0; margin: 0 0 .55rem;
}
/* Seul « Neuf » garde une nuance, à peine appuyée. */
.product-buybox #offerConditionBadge.badge-success { color: #12694f; }
.product-buybox .product-price-from-label { order: -1; color: #9aa0a8; font-weight: 500; letter-spacing: .11em; margin-bottom: .15rem; }
.product-buybox .product-price { order: 0; font-size: 2.25rem; font-weight: 600; line-height: 1.05; letter-spacing: -.03em; color: #101828; }
.product-buybox .product-price-soldas { order: 1; margin-left: 0; font-size: .95rem; font-weight: 400; color: #8b9099; }
.product-buybox .product-compare-price { order: 3; font-size: .82rem; color: #9aa0a8; margin-top: .6rem; }
/* La remise redevient une information chiffrée posée après le prix neuf, et
   non une pastille d'alerte. Le point sépare les deux (ils sont toujours
   affichés ensemble : même condition serveur $dDisplay). */
.product-buybox #offerDiscount {
  order: 4; background: transparent; color: #4b5563;
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  padding: 0; margin-top: .6rem;
}
.product-buybox #offerDiscount::before { content: "·"; margin-right: .5rem; color: #d0d4da; font-weight: 400; }
/* Sur écran étroit la ligne de comparaison se scinde en deux : le point de
   séparation se retrouverait seul en tête de la seconde ligne. On le retire
   et on resserre l'interligne, la remise se lisant alors comme sa propre
   ligne sous le prix neuf constaté. */
@media (max-width: 560px) {
  .product-buybox #offerDiscount::before { content: none; }
  .product-buybox #offerDiscount { margin-top: .2rem; }
}
/* Mention légale : lisible, jamais dominante (52 caractères par ligne). */
.product-buybox #offerPriceNote { font-size: .72rem; line-height: 1.5; color: #a7acb3; max-width: 54ch; margin: .65rem 0 0; }
/* Le conteneur de variantes reste dans le HTML même sans axe à choisir : sa
   gouttière laissait un trou de 32 px juste avant les boutons. L'espacement
   passe sur les axes eux-mêmes, donc vide il ne prend plus de place. */
.product-buybox .product-variants { margin: 0; gap: 0; }
.product-buybox .product-variant-axis { margin-top: 1.15rem; }
.product-buybox .product-meta-row,
.product-buybox .product-stock-row { margin: .75rem 0 0; font-size: .875rem; }
/* Deux boutons pleine largeur de force égale donnaient à la fiche une allure de
   tunnel de conversion. Un seul bouton plein, à la largeur de son texte, et
   « Poser une question » ramené au rang de lien : la hiérarchie fait le travail
   à la place du contraste. Le flex:1 hérité (products.css plus haut) est annulé,
   sinon les deux boutons s'étirent à parts égales. */
.product-buybox .product-actions { margin: 1.6rem 0 0; padding-top: 1.6rem; gap: 1.1rem;
  align-items: center; border-top: 1px solid #e6e8ec; }
.product-page .product-actions .btn { flex: 0 0 auto; min-width: 0; }
.product-page .product-actions .btn-lg { padding: .85rem 1.7rem; font-size: .92rem; font-weight: 500; border-radius: 6px; }
.product-page .product-actions .btn svg { width: 16px; height: 16px; }
.product-page .product-actions .btn-primary { background: #16243d; }
.product-page .product-actions .btn-secondary { background: none; border-color: transparent; color: #8b9099; padding: .7rem .1rem; font-weight: 500; }
.product-page .product-actions .btn-secondary:hover { background: none; color: #16243d; }
.product-page .product-actions .btn-secondary svg { color: #b2b7be; }
/* « Faire une offre » vit maintenant DANS la rangée d'actions, à côté de
   « Poser une question » : même nature (s'adresser au marchand), donc même
   traitement, et le bouton d'achat reste la seule forme pleine. Le soulignement
   permanent est retiré, sinon des deux liens voisins un seul paraissait
   cliquable ; il revient au survol. */
.product-buybox .product-make-offer-link {
  margin: 0; font-size: .92rem; font-weight: 500; color: #8b9099;
  text-decoration: none; border-bottom: 0; padding: .85rem .1rem;
  display: inline-flex; align-items: center; gap: .5rem; line-height: 1;
}
.product-buybox .product-make-offer-link svg { width: 16px; height: 16px; color: #b2b7be; }
.product-buybox .product-make-offer-link:hover { color: #16243d; text-decoration: underline; text-underline-offset: 4px; }
/* Livraison : bandeau de pied sans fond gris, séparé par un simple filet. */
.product-buybox .product-ship-note {
  margin: 1.6rem 0 0;
  padding: 1.6rem 0 0;
  border-top: 1px solid #e6e8ec;
  background: transparent;
  border-radius: 0;
  font-size: .85rem;
  color: #5b6470;
  align-items: flex-start;
}
.product-buybox .product-ship-note svg { color: #b2b7be; }
.product-buybox .product-ship-note strong { color: #4b5563; font-weight: 600; }
/* Sans le cadre de l'encart d'achat, ce bloc resterait le seul encadré de la
   colonne, donc le point le plus lourd de la page : mêmes filets fins. */
/* Livraison, garantie et retour disent la même chose : ce sont les conditions
   de la vente. Trois lignes de même forme, alignées sur la même colonne, au
   lieu d'un encadré à part avec ses propres titres en gras. */
.product-page .product-reassurance { margin: .55rem 0 0; border: 0; border-radius: 0; }
.product-page .reassurance-item { padding: .28rem 0; border: 0; gap: .7rem; }
.product-page .reassurance-item svg { width: 16px; height: 16px; color: #b2b7be; }
.product-page .reassurance-item div { flex-direction: row; gap: .4rem; align-items: baseline; }
.product-page .reassurance-item strong { font-size: .85rem; font-weight: 500; color: #5b6470; }
.product-page .reassurance-item span { font-size: .85rem; color: #9aa0a8; }
.product-page .reassurance-item span::before { content: "· "; }
.product-buybox .product-ship-note svg { color: #b2b7be; }
/* La photo porte la page : plus de bordure autour, la respiration suffit. */
.product-page .product-gallery-main { border: 0; border-radius: 4px; }
/* Produit sans offre : pas de zone de prix, donc pas de filet à cet endroit,
   sinon deux filets se suivent en encadrant du vide. */
.product-buybox--noprice { border-top: 0; margin-top: 0; padding-top: 0; }
/* « Vendu » / « Temporairement indisponible » : l'aplat ambre était devenu le
   point le plus voyant de la fiche une fois le reste calmé. L'information est
   importante, elle n'a pas besoin d'être criée : texte coloré, contour fin. */
.product-page .product-state-badge { padding: .3rem .6rem; border-radius: 4px; font-size: .78rem;
  font-weight: 500; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .1rem; background: transparent; border: 1px solid; }
.product-page .product-state-badge.product-state-sold { color: #a13a32; border-color: #edd0cd; }
.product-page .product-state-badge.product-state-unavailable { color: #96601f; border-color: #ecdcc4; }
.product-page .product-state-badge svg { width: 14px; height: 14px; }

@media (max-width: 768px) {
  .product-layout { grid-template-columns: 1fr; }
  /* En colonne unique, un logo poussé au bord droit se retrouve seul dans un
     coin, sans rien pour l'y retenir : on le remet au fil du texte. */
  .product-page .product-brand-row { float: none; margin: 0 0 .5rem; }
  .product-buybox .product-ship-note { margin: 1.2rem 0 0; padding: .8rem 0 0; }
  /* En colonne unique l'action principale reprend toute la largeur, mais le
     lien secondaire reste calé à gauche : centré et pleine largeur, il se lit
     comme un second bouton, ce qu'il n'est plus. */
  .product-page .product-actions .btn-primary { flex: 1 0 100%; }
  .product-page .product-actions .btn-secondary { width: auto; align-self: flex-start; padding-left: 0; padding-right: 0; }
  /* En colonne, les deux actions secondaires se rangent sous le bouton, calées
     à gauche : centrées elles flottaient au milieu de rien. */
  .product-buybox .product-actions { gap: .3rem; }
  .product-buybox .product-make-offer-link { align-self: flex-start; padding-left: 0; padding-right: 0; }
  /* Sur une colonne étroite, « Garanti & testé · Matériel vérifié… » sur une
     seule ligne se coupe n'importe où : on revient au libellé au-dessus du
     détail, et le point de liaison n'a plus lieu d'être. */
  .product-page .reassurance-item { padding: .4rem 0; }
  .product-page .reassurance-item div { flex-direction: column; gap: .1rem; }
  .product-page .reassurance-item span::before { content: none; }
}

/* ── En-tête de la page catalogue ──────────────────────────────────────────
   Titre plus une seule ligne de chiffres. Les pastilles de catégorie qui
   l'encombraient faisaient doublon avec la section Catégorie de la barre
   latérale, et leur retour à la ligne produisait un drapeau irrégulier.
   Elles sont désormais en texte suivi en bas de page. */
.page-intro {
  /* MÊMES gabarit et retrait que .products-layout, sinon le titre ne s'aligne
     pas sur la colonne de filtres juste en dessous : mesuré, 1200+16px contre
     1280+32px donnait 24 px de décalage. */
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.25rem 2rem .25rem;
}
.page-intro h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 .3rem; }
.page-intro p { margin: 0; color: #6b7280; font-size: .95rem; }
.page-intro .sep { margin: 0 .3rem; opacity: .45; }

@media (max-width: 768px) {
  /* La grille resserre son retrait à 1rem en mobile : l'en-tête doit suivre,
     sinon le titre est décalé de 16 px vers la droite par rapport aux cartes. */
  .page-intro { padding-left: 1rem; padding-right: 1rem; }
}

/* ══ FICHE PRODUIT : DESCRIPTION & CARACTÉRISTIQUES ═══════════════════════ */

.product-section { margin-bottom: 2.5rem; }
.product-section h2 {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid #e6e8ec;
}
.specs-subtitle {
  font-size: .95rem;
  font-weight: 600;
  color: #374151;
  margin: 1.5rem 0 .6rem;
}

/* ── Description à gauche, caractéristiques à droite ──────────────────────
   La description reste bornée à 72 caractères par ligne (au-delà l'œil perd
   la ligne suivante), mais elle n'a plus à laisser la moitié droite de la page
   vide : les caractéristiques viennent l'occuper, et remontent du même coup
   au-dessus de la ligne de flottaison. Sous 1000 px, retour à l'empilement. */
/* Description à GAUCHE, caractéristiques à DROITE. La colonne de la description
   est calée sur sa largeur de lecture (620 px, soit ~72 caractères dans sa
   propre fonte : l'unité ch appliquée à la grille se calcule sur la fonte du
   conteneur et pas sur celle du texte, elle donnait 720 px, trop large pour
   l'œil), et les caractéristiques prennent tout le reste. Les deux colonnes
   tombent ainsi à fleur des bords de la page, sans réserve blanche au bord. */
.product-detail-cols { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
  gap: 0 3.5rem; align-items: start; margin-bottom: 2.5rem; }
.product-detail-cols > .product-section { margin-bottom: 0; }
/* Dans une colonne large, la description n'a plus besoin de son propre plafond :
   c'est la colonne qui le porte. */
.product-detail-cols .product-description { max-width: none; }
/* En colonne étroite les caractéristiques repassent sur un seul rang. */
.product-detail-cols .product-specs-table tbody { grid-template-columns: 1fr; column-gap: 0; }
.product-detail-cols .product-dims { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1000px) {
  .product-detail-cols { grid-template-columns: 1fr; gap: 2.5rem 0; }
  .product-detail-cols .product-description { max-width: 72ch; }
  .product-detail-cols .product-specs-table tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
}
@media (max-width: 900px) {
  .product-detail-cols .product-specs-table tbody { grid-template-columns: 1fr; column-gap: 0; }
}

/* Les caractéristiques en DEUX colonnes sur grand écran : huit lignes empilées
   se lisent comme une liste interminable, deux blocs de quatre se balaient du
   regard. Les lignes alternent pour suivre l'œil jusqu'à la valeur. */
.product-specs-table { width: 100%; border-collapse: collapse; }
.product-specs-table tbody {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2.5rem;
}
.product-specs-table tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid #eef0f3;
}
/* Le fond alterné faisait table d'administration. Le filet suffit à suivre la
   ligne jusqu'à la valeur, et la page garde un seul vocabulaire. */
.product-specs-table tr:nth-child(odd) { background: transparent; }
.product-specs-table td { padding: 0; border: 0; vertical-align: top; font-size: .875rem; }
.product-specs-table td.spec-key { width: auto; font-weight: 400; color: #6b7280; }

@media (max-width: 900px) {
  .product-specs-table tbody { grid-template-columns: 1fr; column-gap: 0; }
}

/* Conditionnement collé au prix : « 6 299 € la paire ». La marge négative
   annule le gap du conteneur flex, sinon le libellé flotte loin du montant
   et se lit comme une mention indépendante. */
.product-price-soldas { font-size: .95rem; font-weight: 600; color: var(--gray-600, #4b5563); margin-left: -.45rem; }
.product-buybox .product-price-soldas { font-size: 1rem; }

/* merchant.css */
/* ── Merchant Portal ───────────────────────────────────────────── */

/* Stats grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.stat-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.stat-skeleton {
    height: 88px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}
.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.stat-icon svg { width: 22px; height: 22px; }
.stat-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f1f38;
    line-height: 1;
}
.stat-label {
    font-size: .8rem;
    color: #6b7280;
    margin-top: .25rem;
}
.mt-6 { margin-top: 1.5rem; }

/* Product form layout */
.form-layout-2col {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1.5rem;
    align-items: start;
}
.form-main { min-width: 0; }
.form-sidebar { min-width: 0; }

/* Upload zone */
.upload-zone {
    border: 2px dashed #d1d5db;
    border-radius: 10px;
    padding: 1rem;
    cursor: pointer;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s;
}
.upload-zone:hover { border-color: #d9392d; }

/* Gallery */
.gallery-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.gallery-item {
    position: relative;
    width: 130px;
    height: 130px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery-item-del {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,.6);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    padding: 0;
    display: none;
}
.gallery-item:hover .gallery-item-del { display: block; }

/* Table loading */
.table-loading {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
}

/* Dashboard two-panel layout */
.dash-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Dash list (orders + products) */
.dash-list { }
.dash-list-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
    transition: background .15s;
}
.dash-list-row:last-child { border-bottom: none; }
.dash-list-row:hover { background: #f9fafb; }
.dash-list-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .125rem;
}
.dash-list-title {
    font-weight: 600;
    font-size: .875rem;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-list-sub {
    font-size: .75rem;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-list-right {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}
.dash-list-price {
    font-weight: 700;
    font-size: .875rem;
    color: #0f1f38;
    min-width: 60px;
    text-align: right;
}
.dash-list-date {
    font-size: .75rem;
    color: #9ca3af;
    min-width: 80px;
    text-align: right;
}
.dash-empty {
    padding: 2rem;
    text-align: center;
    color: #9ca3af;
    font-size: .9rem;
}
.dash-empty-products {
    padding: 2rem;
    text-align: center;
}
.dash-empty-products p { color: #9ca3af; margin-bottom: 1rem; }

/* Responsive */
@media (max-width: 1100px) {
    .dash-panels { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .form-layout-2col { grid-template-columns: 1fr; }
    .form-sidebar { order: -1; }
}
@media (max-width: 600px) {
    .stats-grid { grid-template-columns: 1fr; }
    .dash-list-date { display: none; }
}

/* ── Message cards ───────────────────────────────────────────────── */
.msg-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: .75rem;
    transition: border-color .15s;
}
.msg-card:hover { border-color: #d1d5db; }
.msg-unread { border-left: 3px solid #d9392d; }
.msg-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    cursor: pointer;
    gap: 1rem;
}
.msg-card-left {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}
.msg-card-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #374151;
    font-size: .75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.msg-unread .msg-card-avatar { background: #d9392d; color: #fff; }
.msg-card-name { font-size: .875rem; font-weight: 600; color: #111827; }
.msg-card-email { font-size: .75rem; color: #6b7280; }
.msg-card-right {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}
.msg-card-product {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    color: #6b7280;
    background: #f3f4f6;
    padding: .2rem .5rem;
    border-radius: 4px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msg-card-date { font-size: .75rem; color: #9ca3af; white-space: nowrap; }
.msg-card-preview {
    padding: 0 1.25rem .75rem;
    font-size: .8125rem;
    color: #6b7280;
    line-height: 1.5;
    cursor: pointer;
}
.msg-card-body {
    border-top: 1px solid #f3f4f6;
    padding: 1.25rem;
}
.msg-card-content {
    font-size: .875rem;
    line-height: 1.7;
    color: #374151;
    margin-bottom: 1rem;
}
.msg-card-meta {
    font-size: .8125rem;
    color: #6b7280;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.msg-card-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
@media (max-width: 768px) {
    .msg-card-header { flex-direction: column; align-items: flex-start; }
    .msg-card-right { flex-wrap: wrap; }
    .msg-card-product { max-width: 100%; }
}

/* ── Onboarding marchand (dashboard) — classes onb-* (étaient sans CSS) ──── */
.onb-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
}
.onb-banner-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: #dbeafe; color: #2563eb; border-radius: 10px;
}
.onb-banner-icon svg { width: 22px; height: 22px; }
.onb-banner-text strong { display: block; margin-bottom: 2px; }
.onb-banner-text p { margin: 0; color: var(--text-muted); font-size: .9rem; }

.onb-card { margin-bottom: var(--space-5); }
.onb-welcome { margin-bottom: var(--space-5); }
.onb-title { margin: 0 0 4px; font-size: 1.4rem; font-weight: 700; }
.onb-subtitle { margin: 0; color: var(--text-muted); }

.onb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
@media (max-width: 860px) { .onb-grid { grid-template-columns: 1fr; } }

.onb-section-title { margin: 0 0 var(--space-4); font-size: 1rem; font-weight: 600; }

.onb-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.onb-step { display: flex; align-items: flex-start; gap: var(--space-3); }
.onb-step-mark {
    flex-shrink: 0;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--gray-100); color: var(--gray-500);
    font-size: .8rem; font-weight: 700;
}
.onb-step-mark svg { width: 16px; height: 16px; }
.onb-step.is-done .onb-step-mark { background: #d1fae5; color: #059669; }
.onb-step-body { display: flex; flex-direction: column; }
.onb-step-label { font-weight: 600; color: var(--text); text-decoration: none; }
a.onb-step-label:hover { color: var(--primary); }
.onb-step.is-done .onb-step-label { color: var(--text-muted); text-decoration: line-through; }
.onb-step-sub { font-size: .85rem; color: var(--text-muted); }

.onb-app {
    background: var(--gray-50);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-4);
}
.onb-app-pitch { display: flex; align-items: flex-start; gap: var(--space-4); }
.onb-app-icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: #ede9fe; color: #7c3aed; border-radius: 10px;
}
.onb-app-icon svg { width: 22px; height: 22px; }
.onb-app-pitch strong { display: block; margin-bottom: 2px; }
.onb-app-pitch p { margin: 0; color: var(--text-muted); font-size: .9rem; }
.onb-app-dl { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.onb-qr { border-radius: 8px; flex-shrink: 0; }
.onb-app-dl-cta { display: flex; flex-direction: column; gap: var(--space-2); }
.onb-app-dl-hint { font-size: .8rem; color: var(--text-muted); }

/* cart.css */
/* ── Cart & Checkout ───────────────────────────────────────────── */

/* Cart icon in header */
.cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    color: #374151;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.cart-btn:hover { background: #f3f4f6; color: #d9392d; }
.cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    background: #d9392d;
    color: #fff;
    border-radius: 9px;
    font-size: .65rem;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

/* Cart layout */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 2rem;
    align-items: start;
}
.cart-loading {
    grid-column: 1/-1;
    padding: 3rem;
    text-align: center;
    color: #6b7280;
}

/* Empty state */
.cart-empty {
    grid-column: 1/-1;
    text-align: center;
    padding: 4rem 2rem;
}
.cart-empty-icon {
    width: 96px;
    height: 96px;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: #9ca3af;
}
.cart-empty h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: .5rem; }
.cart-empty p  { color: #6b7280; margin-bottom: 1.5rem; }

/* Items column */
.cart-items-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.cart-items-header h2 { font-size: 1.1rem; font-weight: 700; }

/* Cart item */
.cart-item {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid #e5e7eb;
    align-items: center;
}
.cart-item:last-child { border-bottom: none; }
.cart-item-img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid #e5e7eb;
}
.cart-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-title {
    font-weight: 600;
    color: #0f1f38;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cart-item-title:hover { color: #d9392d; }
.cart-item-price { font-size: .85rem; color: #6b7280; margin-top: .25rem; }

/* Cart item actions */
.cart-item-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    flex-shrink: 0;
}
.qty-control {
    display: flex;
    align-items: center;
    gap: .25rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
}
.qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.qty-btn:hover { background: #f3f4f6; }
.qty-val {
    min-width: 28px;
    text-align: center;
    font-weight: 600;
    font-size: .9rem;
}
.cart-item-total {
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.cart-item-remove {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0;
    line-height: 1;
    transition: color .15s;
}
.cart-item-remove:hover { color: #dc2626; }

/* Summary */
.cart-summary {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1.5rem;
    position: sticky;
    top: 80px;
}
.cart-summary h3 { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; }
.cart-summary-row {
    display: flex;
    justify-content: space-between;
    padding: .5rem 0;
    font-size: .9rem;
    border-bottom: 1px solid #f3f4f6;
}
.cart-summary-row:last-of-type { border-bottom: none; }
.cart-summary-discount { color: #16a34a; }
.cart-summary-total {
    font-weight: 700;
    font-size: 1.05rem;
    color: #0f1f38;
}
.cart-promo { margin-top: 1rem; }
.cart-promo-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 8px;
    padding: .5rem .75rem;
    font-size: .875rem;
    color: #166534;
}
.btn-full { width: 100%; }

/* ── Cart slide-in drawer ──────────────────────────────────────── */

.cart-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(2px);
    z-index: 900;
    animation: fadeIn .15s ease;
}
.cart-drawer-overlay.hidden { display: none; }

.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 92vw;
    height: 100vh;
    background: #fff;
    box-shadow: -8px 0 40px rgba(0,0,0,.15);
    z-index: 910;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.cart-drawer.open { transform: translateX(0); }

.cart-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.cart-drawer-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}
.cart-drawer-close {
    width: 32px; height: 32px;
    border: none;
    background: #f3f4f6;
    border-radius: 8px;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: background .15s, color .15s;
}
.cart-drawer-close:hover { background: #e5e7eb; color: #111; }

.cart-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}

.cart-drawer-footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
    background: #fafafa;
}

/* Added confirmation */
.cart-drawer-added {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    margin-bottom: 1rem;
    color: #15803d;
    font-weight: 600;
    font-size: .9rem;
}
.cart-drawer-added-check {
    width: 28px; height: 28px;
    background: #16a34a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

/* Featured added product */
.cart-drawer-product {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding-bottom: 1rem;
}
.cart-drawer-product img {
    width: 80px; height: 80px;
    object-fit: contain;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: .25rem;
    background: #fff;
    flex-shrink: 0;
}
.cart-drawer-product-info { flex: 1; min-width: 0; }
.cart-drawer-product-title {
    font-weight: 600;
    font-size: .9rem;
    color: #111;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cart-drawer-product-title:hover { color: #d9392d; }
.cart-drawer-product-price { font-weight: 700; font-size: .95rem; margin-top: .25rem; }
.cart-drawer-product-qty { font-size: .8rem; color: #6b7280; margin-top: .15rem; }

/* Divider */
.cart-drawer-divider {
    height: 1px;
    background: #e5e7eb;
    margin: .75rem 0;
}
.cart-drawer-others-title {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    margin-bottom: .75rem;
}

/* Other items in cart */
.cart-drawer-item {
    display: flex;
    gap: .75rem;
    align-items: center;
    padding: .5rem 0;
}
.cart-drawer-item img {
    width: 48px; height: 48px;
    object-fit: contain;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: .15rem;
    background: #fff;
    flex-shrink: 0;
}
.cart-drawer-item-info { flex: 1; min-width: 0; }
.cart-drawer-item-title {
    font-size: .8rem;
    font-weight: 500;
    color: #374151;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cart-drawer-item-price { font-size: .8rem; font-weight: 600; color: #111; }

/* Footer */
.cart-drawer-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 1rem;
}
.cart-drawer-total strong { font-size: 1.15rem; }
.cart-drawer-checkout {
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
}
.cart-drawer-continue {
    margin-top: .5rem;
    justify-content: center;
    font-size: .875rem;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Responsive */
@media (max-width: 768px) {
    .cart-layout { grid-template-columns: 1fr; }
    .cart-item { flex-wrap: wrap; }
    .cart-item-actions { flex-direction: row; align-items: center; flex: 1; justify-content: space-between; }
}

/* overrides.css */
/* ── Overrides (must come after all imports) ─────────────────── */
.modal form { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
.modal-body .form-fieldset:last-of-type { margin-bottom:0; }