/* Portail Développeur Invox-IA — entry point
 * Shared design system via @doxallia/design (workspace package).
 * Portal-specific styles remain in design/portail-specific.css.
 *
 * Layer order: tokens → reset → primitives → compositions → shell → portal
 */

/* Self-hosted fonts via Fontsource — RGPD compliant, no Google Fonts CDN */
/* noto-sans-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./files/noto-sans-cyrillic-ext-400-normal.woff2) format('woff2'), url(./files/noto-sans-cyrillic-ext-400-normal.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* noto-sans-cyrillic-400-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./files/noto-sans-cyrillic-400-normal.woff2) format('woff2'), url(./files/noto-sans-cyrillic-400-normal.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* noto-sans-devanagari-400-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./files/noto-sans-devanagari-400-normal.woff2) format('woff2'), url(./files/noto-sans-devanagari-400-normal.woff) format('woff');
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}

/* noto-sans-greek-ext-400-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./files/noto-sans-greek-ext-400-normal.woff2) format('woff2'), url(./files/noto-sans-greek-ext-400-normal.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* noto-sans-greek-400-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./files/noto-sans-greek-400-normal.woff2) format('woff2'), url(./files/noto-sans-greek-400-normal.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* noto-sans-vietnamese-400-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./files/noto-sans-vietnamese-400-normal.woff2) format('woff2'), url(./files/noto-sans-vietnamese-400-normal.woff) format('woff');
  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;
}

/* noto-sans-latin-ext-400-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./files/noto-sans-latin-ext-400-normal.woff2) format('woff2'), url(./files/noto-sans-latin-ext-400-normal.woff) format('woff');
  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;
}

/* noto-sans-latin-400-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./files/noto-sans-latin-400-normal.woff2) format('woff2'), url(./files/noto-sans-latin-400-normal.woff) format('woff');
  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;
}
/* noto-sans-cyrillic-ext-500-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./files/noto-sans-cyrillic-ext-500-normal.woff2) format('woff2'), url(./files/noto-sans-cyrillic-ext-500-normal.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* noto-sans-cyrillic-500-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./files/noto-sans-cyrillic-500-normal.woff2) format('woff2'), url(./files/noto-sans-cyrillic-500-normal.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* noto-sans-devanagari-500-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./files/noto-sans-devanagari-500-normal.woff2) format('woff2'), url(./files/noto-sans-devanagari-500-normal.woff) format('woff');
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}

/* noto-sans-greek-ext-500-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./files/noto-sans-greek-ext-500-normal.woff2) format('woff2'), url(./files/noto-sans-greek-ext-500-normal.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* noto-sans-greek-500-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./files/noto-sans-greek-500-normal.woff2) format('woff2'), url(./files/noto-sans-greek-500-normal.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* noto-sans-vietnamese-500-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./files/noto-sans-vietnamese-500-normal.woff2) format('woff2'), url(./files/noto-sans-vietnamese-500-normal.woff) format('woff');
  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;
}

/* noto-sans-latin-ext-500-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./files/noto-sans-latin-ext-500-normal.woff2) format('woff2'), url(./files/noto-sans-latin-ext-500-normal.woff) format('woff');
  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;
}

/* noto-sans-latin-500-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./files/noto-sans-latin-500-normal.woff2) format('woff2'), url(./files/noto-sans-latin-500-normal.woff) format('woff');
  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;
}
/* noto-sans-cyrillic-ext-600-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./files/noto-sans-cyrillic-ext-600-normal.woff2) format('woff2'), url(./files/noto-sans-cyrillic-ext-600-normal.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* noto-sans-cyrillic-600-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./files/noto-sans-cyrillic-600-normal.woff2) format('woff2'), url(./files/noto-sans-cyrillic-600-normal.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* noto-sans-devanagari-600-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./files/noto-sans-devanagari-600-normal.woff2) format('woff2'), url(./files/noto-sans-devanagari-600-normal.woff) format('woff');
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}

/* noto-sans-greek-ext-600-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./files/noto-sans-greek-ext-600-normal.woff2) format('woff2'), url(./files/noto-sans-greek-ext-600-normal.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* noto-sans-greek-600-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./files/noto-sans-greek-600-normal.woff2) format('woff2'), url(./files/noto-sans-greek-600-normal.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* noto-sans-vietnamese-600-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./files/noto-sans-vietnamese-600-normal.woff2) format('woff2'), url(./files/noto-sans-vietnamese-600-normal.woff) format('woff');
  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;
}

/* noto-sans-latin-ext-600-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./files/noto-sans-latin-ext-600-normal.woff2) format('woff2'), url(./files/noto-sans-latin-ext-600-normal.woff) format('woff');
  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;
}

/* noto-sans-latin-600-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./files/noto-sans-latin-600-normal.woff2) format('woff2'), url(./files/noto-sans-latin-600-normal.woff) format('woff');
  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;
}
/* noto-sans-cyrillic-ext-700-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./files/noto-sans-cyrillic-ext-700-normal.woff2) format('woff2'), url(./files/noto-sans-cyrillic-ext-700-normal.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* noto-sans-cyrillic-700-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./files/noto-sans-cyrillic-700-normal.woff2) format('woff2'), url(./files/noto-sans-cyrillic-700-normal.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* noto-sans-devanagari-700-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./files/noto-sans-devanagari-700-normal.woff2) format('woff2'), url(./files/noto-sans-devanagari-700-normal.woff) format('woff');
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}

/* noto-sans-greek-ext-700-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./files/noto-sans-greek-ext-700-normal.woff2) format('woff2'), url(./files/noto-sans-greek-ext-700-normal.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* noto-sans-greek-700-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./files/noto-sans-greek-700-normal.woff2) format('woff2'), url(./files/noto-sans-greek-700-normal.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* noto-sans-vietnamese-700-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./files/noto-sans-vietnamese-700-normal.woff2) format('woff2'), url(./files/noto-sans-vietnamese-700-normal.woff) format('woff');
  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;
}

/* noto-sans-latin-ext-700-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./files/noto-sans-latin-ext-700-normal.woff2) format('woff2'), url(./files/noto-sans-latin-ext-700-normal.woff) format('woff');
  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;
}

/* noto-sans-latin-700-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./files/noto-sans-latin-700-normal.woff2) format('woff2'), url(./files/noto-sans-latin-700-normal.woff) format('woff');
  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;
}
/* jetbrains-mono-cyrillic-ext-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./files/jetbrains-mono-cyrillic-ext-400-normal.woff2) format('woff2'), url(./files/jetbrains-mono-cyrillic-ext-400-normal.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* jetbrains-mono-cyrillic-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./files/jetbrains-mono-cyrillic-400-normal.woff2) format('woff2'), url(./files/jetbrains-mono-cyrillic-400-normal.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* jetbrains-mono-greek-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./files/jetbrains-mono-greek-400-normal.woff2) format('woff2'), url(./files/jetbrains-mono-greek-400-normal.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* jetbrains-mono-vietnamese-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./files/jetbrains-mono-vietnamese-400-normal.woff2) format('woff2'), url(./files/jetbrains-mono-vietnamese-400-normal.woff) format('woff');
  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;
}

/* jetbrains-mono-latin-ext-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./files/jetbrains-mono-latin-ext-400-normal.woff2) format('woff2'), url(./files/jetbrains-mono-latin-ext-400-normal.woff) format('woff');
  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;
}

/* jetbrains-mono-latin-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./files/jetbrains-mono-latin-400-normal.woff2) format('woff2'), url(./files/jetbrains-mono-latin-400-normal.woff) format('woff');
  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;
}
/* jetbrains-mono-cyrillic-ext-500-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./files/jetbrains-mono-cyrillic-ext-500-normal.woff2) format('woff2'), url(./files/jetbrains-mono-cyrillic-ext-500-normal.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* jetbrains-mono-cyrillic-500-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./files/jetbrains-mono-cyrillic-500-normal.woff2) format('woff2'), url(./files/jetbrains-mono-cyrillic-500-normal.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* jetbrains-mono-greek-500-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./files/jetbrains-mono-greek-500-normal.woff2) format('woff2'), url(./files/jetbrains-mono-greek-500-normal.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* jetbrains-mono-vietnamese-500-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./files/jetbrains-mono-vietnamese-500-normal.woff2) format('woff2'), url(./files/jetbrains-mono-vietnamese-500-normal.woff) format('woff');
  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;
}

/* jetbrains-mono-latin-ext-500-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./files/jetbrains-mono-latin-ext-500-normal.woff2) format('woff2'), url(./files/jetbrains-mono-latin-ext-500-normal.woff) format('woff');
  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;
}

/* jetbrains-mono-latin-500-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./files/jetbrains-mono-latin-500-normal.woff2) format('woff2'), url(./files/jetbrains-mono-latin-500-normal.woff) format('woff');
  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;
}

/* @doxallia/design — Layer 0: tokens + reset */
/* Design tokens — extracted from Figma Make VeGwYYdnAyrOLkskcdrVWc (2026-03-26)
 * Source of truth for the portal's visual layer.
 * Re-extract when the Figma design updates; never hand-edit.
 *
 * ⚠ WCAG EXCEPTION — preserve these two values on Figma re-export:
 *   --color-text-muted  : #636374 (not Figma's #717182 — fails WCAG AA 4.17:1)
 *   --color-text-subtle : #5b6b7e light / #9aacbf dark (not Figma's #64748b — fails WCAG AA)
 *   Audit: axe-core 4.11.1 · 2026-03-30 · wiki/portail/accessibilite-declaration.md
 *
 * Font note: Figma specifies Noto Sans (Google Fonts).
 * Self-host via Fontsource to stay GDPR-compliant:
 *   bun add @fontsource/noto-sans
 *   @import "@fontsource/noto-sans/400.css"; etc.
 * Until then the stack falls back gracefully to system-ui.
 *
 * DS2 Snowball alignment (cQg8jnMaukafkqAdfwUcy9 — Doxallia Design System V2):
 *   $space       → --color-brand       #141c52  ✅ identique
 *   $cosmos      → --color-brand-dark  #10152e  ✅ aligné (was #0f1640, ΔE<3)
 *   $liberty-50  → --color-brand-active #eae9ef ✅ identique
 *   $mist (#3f4775) — non mappé, pas d'équivalent portail
 *   Font: Noto Sans ✅  Spacing: 4px base ✅
 *   Grays: portail = slate (blue undertone) vs DS2 = neutral purs — divergence intentionnelle
 *   Semantic (error/success/warning): valeurs portail optimisées developer docs, pas portail client
 *   Radius: portail +2px vs DS2 — choix intentionnel de douceur
 *   DS2 n'a pas : dark mode, code tokens, HTTP badges, callouts, focus ring, z-index, layout
 *   Référence complète : packages/design/DS2_MAPPING.md
 */

:root {
	/* ── Brand ──────────────────────────────────────────── */
	--color-brand: #141c52;
	--color-brand-dark: #10152e; /* DS2 $cosmos — was #0f1640 */
	--color-brand-mid: #3f4775; /* DS2 $mist — intermediate navy/slate */
	--color-brand-active: #eae9ef;
	/* brand used as subtle hover background on light surfaces */
	--color-brand-hover: color-mix(in srgb, var(--color-brand) 6%, transparent);
	/* brand used as foreground text/icon — same as brand in light, lighter in dark */
	--color-brand-text: #141c52;
	/* brand used as border/outline — same as brand in light, lighter in dark */
	--color-brand-border: #141c52;
	/* CTA button on white header — brand in light, semi-transparent in dark */
	--color-header-cta-bg: #141c52;
	--color-header-cta-fg: #ffffff;
	/* text/icon placed ON the brand background — always white regardless of theme */
	--color-on-brand: #ffffff;

	/* ── Focus & Keyboard ───────────────────────────────── */
	--focus-ring-color: var(--color-brand);
	--focus-ring-width: 2px;
	--focus-ring-offset: 2px;
	--ring-shadow: 0 0 0 3px
		color-mix(in srgb, var(--color-brand) 12%, transparent);

	/* ── Surfaces ───────────────────────────────────────── */
	--color-bg: #f8fafc; /* slate-50  */
	--color-surface: #ffffff;
	--color-surface-muted: #f1f5f9; /* slate-100 */

	/* ── State Surfaces ─────────────────────────────────── */
	--hover-surface: #f0f1f6; /* navy #141c52 @ 8% on #f8fafc */
	--active-surface: var(--color-brand-active); /* alias */

	/* ── Disabled State ─────────────────────────────────── */
	--disabled-opacity: 0.5;
	--disabled-bg: var(--color-surface-muted);
	--disabled-text: var(--color-text-muted);

	/* ── Text ───────────────────────────────────────────── */
	--color-text: #1e293b; /* slate-800 */
	--color-text-muted: #636374; /* was #717182 (4.17:1) → 5.2:1 on white — WCAG AA */
	--color-text-subtle: #5b6b7e; /* was #64748b (4.36:1 on white, 3.87:1 on brand-tinted bg) → 5.45:1 — WCAG AA */

	/* ── Border ─────────────────────────────────────────── */
	--color-border: #e2e8f0; /* slate-200 */

	/* ── Component Sizing — S/M/L scale ────────────────── */
	--component-height-sm: 2rem; /* 32px */
	--component-height-md: 2.5rem; /* 40px — min WCAG touch */
	--component-height-lg: 3rem; /* 48px */
	--component-padding-sm: 0.375rem 0.625rem;
	--component-padding-md: 0.5rem 0.875rem;
	--component-padding-lg: 0.625rem 1.125rem;

	/* ── Semantic ───────────────────────────────────────── */
	--color-error: #d4183d;
	--color-success: #16a34a;
	--color-warning: #d97706;

	/* ── HTTP method badges ─────────────────────────────── */
	--color-get-bg: #eff6ff;
	--color-get-fg: #2563eb;
	--color-post-bg: #f0fdf4;
	--color-post-fg: #166534; /* green-800 — was #16a34a (3.1:1 on bg) → 6.1:1 WCAG AA */
	--color-put-bg: #fffbeb;
	--color-put-fg: #92400e; /* amber-800 — was #d97706 (2.9:1 on bg) → 6.2:1 WCAG AA */
	--color-delete-bg: #fef2f2;
	--color-delete-fg: #b91c1c; /* red-700 — was #dc2626 (4.4:1 on bg) → 5.7:1 WCAG AA */
	--color-patch-bg: #f3e8ff;
	--color-patch-fg: #7e22ce;

	/* ── Inline Error Context ───────────────────────────── */
	--error-inline-bg: #fef2f2;
	--error-inline-border: #fecaca;
	--error-inline-text: #7f1d1d;

	/* ── Typography ─────────────────────────────────────── */
	--font-sans:
		"Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		sans-serif;
	--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem; /* 30px — h1 prose, page titles */
	--text-4xl: 2.25rem; /* 36px — DS2 heading-1, hero h1 only */
	--fw-normal: 400;
	--fw-medium: 500;
	--fw-semi: 600;
	--fw-bold: 700;
	--lh-base: 1.5;
	--lh-tight: 1.25;

	/* ── Spacing (4px base) ─────────────────────────────── */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.25rem;
	--s-6: 1.5rem;
	--s-8: 2rem;
	--s-10: 2.5rem;
	--s-12: 3rem;

	/* ── Radius ──────────────────────────────────────────── */
	--radius-sm: 0.375rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.625rem; /* Figma default */
	--radius-xl: 1rem;
	--radius-full: 9999px;

	/* ── Layout ──────────────────────────────────────────── */
	--header-height: 4rem; /* 64px — h-16 Figma */
	--sidebar-width: 24rem; /* 384px — w-96 Figma */
	--content-max-width: 48rem;
	--page-max-width: 80rem; /* max-w-7xl Figma */

	/* ── Misc ────────────────────────────────────────────── */
	--border-width: 1px;
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.09), 0 2px 6px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
	--shadow-brand: 0 4px 16px rgba(20, 28, 82, 0.4);
	--transition: 150ms ease;
	--z-header: 50;
	--z-sidebar: 40;
	--z-overlay: 30;
	--z-dropdown: 60;

	/* ── Transition Timing ──────────────────────────────── */
	--transition-fast: 100ms ease; /* micro-interactions */
	--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); /* modals, panels */

	/* ── Callout admonitions ─────────────────────────────── */
	--callout-note-bg: #eff6ff;
	--callout-note-fg: #1e3a5f;
	--callout-warning-bg: #fffbeb;
	--callout-warning-fg: #7c2d12;
	--callout-tip-bg: #f0fdf4;
	--callout-tip-fg: #14532d;
	--callout-danger-bg: #fef2f2;
	--callout-danger-fg: #7f1d1d;
	--callout-v13-bg: #ecfdf5;
	--callout-v13-fg: #064e3b;
	--callout-v13-border: #10b981;
	--callout-v12-bg: #eff6ff;
	--callout-v12-fg: #1e3a5f;
	--callout-v12-border: #3b82f6;

	/* ── Code text (inside dark panels) ──────────────────── */
	--color-code-text: #e2e8f0; /* slate-200 — default code text */
	--color-code-text-muted: #94a3b8; /* slate-400 — copy button, inactive tabs */
	--color-code-text-active: #f8fafc; /* slate-50  — active tab */
	/* Copy button on dark bg — alpha overlay (light mode or dark mode, stays dark) */
	--color-code-copy-bg: rgba(255, 255, 255, 0.08);
	--color-code-copy-border: rgba(255, 255, 255, 0.12);
	--color-code-copy-bg-hover: rgba(255, 255, 255, 0.16);

	/* ── Source tier badges ─────────────────────────────── */
	/* Reliability tiers — derived from file path by deriveSourceTier().   */
	/* All bg/fg pairs verified WCAG AA (≥ 4.5:1).                        */
	--tier-official-bg: var(--color-brand-active); /* eae9ef — navy tint */
	--tier-official-fg: var(--color-brand); /* #141c52 — 8.5:1 on eae9ef */
	--tier-upstream-bg: #eff6ff; /* blue-50 */
	--tier-upstream-fg: #1e40af; /* blue-800 — 6.9:1 */
	--tier-documented-bg: var(--color-surface-muted); /* slate-100 */
	--tier-documented-fg: #334155; /* slate-700 — 5.5:1 */
	--tier-experimental-bg: #fffbeb; /* amber-50 */
	--tier-experimental-fg: #92400e; /* amber-800 — 6.2:1 */

	/* ── HTTP response status badges ────────────────────── */
	--color-status-2xx-bg: #dcfce7;
	--color-status-2xx-fg: #15803d;
	--color-status-4xx-bg: #fef3c7;
	--color-status-4xx-fg: #92400e;
	--color-status-5xx-bg: #fef2f2;
	--color-status-5xx-fg: #b91c1c;

	/* ── Code surfaces (always dark for readability) ─────── */
	--color-code-bg: #0f172a; /* slate-950 — main code block bg */
	--color-code-surface: #1e293b; /* slate-800 — tab bar bg */
	--color-code-border: #334155; /* slate-700 — tab bar border */

	/* ── OpenAPI renderer aliases ────────────────────────── */
	/* Semantic aliases used by components.css openapi section */
	--color-text-primary: var(--color-text);
	--color-text-secondary: var(--color-text-subtle);
	--method-get-bg: var(--color-get-bg);
	--method-get-text: var(--color-get-fg);
	--method-post-bg: var(--color-post-bg);
	--method-post-text: var(--color-post-fg);
	--method-put-bg: var(--color-put-bg);
	--method-put-text: var(--color-put-fg);
	--method-patch-bg: var(--color-patch-bg);
	--method-patch-text: var(--color-patch-fg);
	--method-delete-bg: var(--color-delete-bg);
	--method-delete-text: var(--color-delete-fg);
}

/* ── Dark mode ───────────────────────────────────────────
 * Activated automatically via prefers-color-scheme, or
 * manually by setting data-theme="dark" on <html>.
 * Toggle persisted to localStorage via dark-mode.js.
 */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--color-bg: #0f172a; /* slate-900 */
		--color-surface: #1e293b; /* slate-800 */
		--color-surface-muted: #293548;

		--color-text: #f1f5f9; /* slate-100 */
		--color-text-muted: #94a3b8; /* slate-400 */
		--color-text-subtle: #9aacbf; /* was #64748b (2.4:1 on dark surface-muted) → 4.84:1 — WCAG AA */

		--color-border: #334155; /* slate-700 */

		--color-brand-active: #1e254a;
		--color-brand-text: #818cf8; /* indigo-400 — brand as text on dark bg */
		--color-brand-border: #818cf8; /* indigo-400 — brand as border on dark bg */
		--color-header-cta-bg: rgba(
			255,
			255,
			255,
			0.12
		); /* semi-transparent on dark header */
		--color-header-cta-fg: #f1f5f9; /* slate-100 */

		/* HTTP badge backgrounds — darker tint */
		--color-get-bg: #1e3a5f;
		--color-post-bg: #14532d;
		--color-put-bg: #451a03;
		--color-delete-bg: #450a0a;
		--color-patch-bg: #3b0764;

		/* HTTP badge foregrounds — bright for dark backgrounds (WCAG AA) */
		--color-get-fg: #93c5fd; /* blue-300, 5.7:1 on #1e3a5f */
		--color-post-fg: #4ade80; /* green-400, 4.6:1 on #14532d */
		--color-put-fg: #fbbf24; /* amber-400, 8.2:1 on #451a03 */
		--color-delete-fg: #f87171; /* red-400, 5.5:1 on #450a0a */
		--color-patch-fg: #c084fc; /* purple-400, 5.4:1 on #3b0764 */

		/* Status badge — muted dark-mode tints */
		--color-status-2xx-bg: #14532d;
		--color-status-2xx-fg: #86efac;
		--color-status-4xx-bg: #451a03;
		--color-status-4xx-fg: #fcd34d;
		--color-status-5xx-bg: #450a0a;
		--color-status-5xx-fg: #fca5a5;

		/* Callout admonitions — dark tints */
		--callout-note-bg: #1e3a5f;
		--callout-note-fg: #bfdbfe;
		--callout-warning-bg: #451a03;
		--callout-warning-fg: #fde68a;
		--callout-tip-bg: #14532d;
		--callout-tip-fg: #bbf7d0;
		--callout-danger-bg: #450a0a;
		--callout-danger-fg: #fecaca;
		--callout-v13-bg: #064e3b;
		--callout-v13-fg: #6ee7b7;
		--callout-v13-border: #059669;
		--callout-v12-bg: #1e3a5f;
		--callout-v12-fg: #93c5fd;
		--callout-v12-border: #3b82f6;

		/* Navy shadow invisible on dark bg — use neutral black shadow instead */
		--shadow-brand: 0 4px 16px rgba(0, 0, 0, 0.5);
	}
}

/* Manual override — always dark regardless of OS setting */
:root[data-theme="dark"] {
	--color-bg: #0f172a;
	--color-surface: #1e293b;
	--color-surface-muted: #293548;
	--color-text: #f1f5f9;
	--color-text-muted: #94a3b8;
	--color-text-subtle: #9aacbf; /* was #64748b (2.4:1 on dark surface-muted) → 4.84:1 — WCAG AA */
	--color-border: #334155;
	--color-brand-active: #1e254a;
	--color-brand-text: #818cf8; /* indigo-400 — brand as text on dark bg */
	--color-brand-border: #818cf8;
	--color-header-cta-bg: rgba(255, 255, 255, 0.12);
	--color-header-cta-fg: #f1f5f9;
	--color-get-bg: #1e3a5f;
	--color-post-bg: #14532d;
	--color-put-bg: #451a03;
	--color-delete-bg: #450a0a;
	--color-patch-bg: #3b0764;
	--color-get-fg: #93c5fd;
	--color-post-fg: #4ade80;
	--color-put-fg: #fbbf24;
	--color-delete-fg: #f87171;
	--color-patch-fg: #c084fc;
	--color-status-2xx-bg: #14532d;
	--color-status-2xx-fg: #86efac;
	--color-status-4xx-bg: #451a03;
	--color-status-4xx-fg: #fcd34d;
	--color-status-5xx-bg: #450a0a;
	--color-status-5xx-fg: #fca5a5;
	--callout-note-bg: #1e3a5f;
	--callout-note-fg: #bfdbfe;
	--callout-warning-bg: #451a03;
	--callout-warning-fg: #fde68a;
	--callout-tip-bg: #14532d;
	--callout-tip-fg: #bbf7d0;
	--callout-danger-bg: #450a0a;
	--callout-danger-fg: #fecaca;
	--callout-v13-bg: #064e3b;
	--callout-v13-fg: #6ee7b7;
	--callout-v13-border: #059669;
	--callout-v12-bg: #1e3a5f;
	--callout-v12-fg: #93c5fd;
	--callout-v12-border: #3b82f6;

	/* Navy shadow invisible on dark bg — use neutral black shadow instead */
	--shadow-brand: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Manual override — always light regardless of OS setting */
:root[data-theme="light"] {
	/* tokens already set in :root {} — no override needed */
}

/* Theme switch animation — class applied transiently by dark-mode.js on toggle.
 * Targets only color/border/shadow properties to avoid interfering with other transitions. */
html.theme-transition *:not(img):not(video):not(canvas) {
	transition:
		background-color 200ms ease,
		color 200ms ease,
		border-color 200ms ease,
		box-shadow 200ms ease !important;
}

/* Minimal reset — box-model + antialiasing */

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

* {
	margin: 0;
}

body {
	-webkit-font-smoothing: antialiased;
}

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

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

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* Focus visible — RGAA 10.7
 * Outline blanc sur fond sombre (header brand), outline brand sur fond clair.
 * :focus (sans :focus-visible) est volontairement absent — le navigateur
 * ajoute son propre style au clic souris qui interfère avec le design.
 */

:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* Header buttons sit on dark brand bg — white outline is more visible */
.portail-header :focus-visible {
	outline-color: #fff;
}


/* @doxallia/design — Layer 1: primitives */
/* @doxallia/design — Badge primitive styles */

/* ── Generic tag badge base ──────────────────────────────── */
/* Used as foundation for deprecated-badge, changelog-badge  */
.tag-badge {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	border-radius: var(--radius-sm);
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
}

code.version-badge {
	background: var(--color-get-bg);
	color: var(--color-get-fg);
	border: none;
	font-size: 0.7rem;
	font-weight: var(--fw-semi);
	padding: 0.1em 0.45em;
	border-radius: 999px;
	letter-spacing: 0.01em;
}

.api-method-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.125rem 0.5rem;
	border-radius: var(--radius-sm);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.4;
}
.api-method-badge--sm {
	padding: 0.0625rem 0.25rem;
	font-size: 0.625rem;
}

.api-method-badge--get {
	background: var(--method-get-bg);
	color: var(--method-get-text);
}
.api-method-badge--post {
	background: var(--method-post-bg);
	color: var(--method-post-text);
}
.api-method-badge--put {
	background: var(--method-put-bg);
	color: var(--method-put-text);
}
.api-method-badge--patch {
	background: var(--method-patch-bg);
	color: var(--method-patch-text);
}
.api-method-badge--delete {
	background: var(--method-delete-bg);
	color: var(--method-delete-text);
}

/* @doxallia/design — Button primitive
 * Base for <button> action elements across the portail.
 * For <a> link-buttons use .support-card-btn from support-card.css.
 */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	border: none;
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
	text-decoration: none;
	transition: background var(--transition);
}

.btn--primary {
	padding: var(--s-2) var(--s-6);
	background: var(--color-brand);
	color: var(--color-on-brand, #fff);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
}

.btn--primary:hover {
	background: var(--color-brand-dark);
}

/* Surface token contract — consumers remap these on dark containers.
 * Defaults preserve the light-surface brand behavior. */
.btn--secondary {
	padding: var(--s-2) var(--s-6);
	background: var(--btn-secondary-bg, transparent);
	color: var(--btn-secondary-fg, var(--color-brand));
	border: 1px solid var(--btn-secondary-border, var(--color-brand));
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
}

.btn--secondary:hover {
	background: var(--btn-secondary-bg-hover, var(--color-brand-active));
}

.btn--ghost {
	padding: var(--s-2) var(--s-4);
	background: transparent;
	color: var(--color-text);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
}

.btn--ghost:hover {
	color: var(--color-brand);
	background: var(--color-surface-muted);
}

.btn--large {
	padding: var(--s-3) var(--s-8);
	font-size: var(--text-base);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	.btn--secondary {
		color: var(--btn-secondary-fg, var(--color-brand-text));
		border-color: var(--btn-secondary-border, var(--color-brand-text));
	}

	.btn--secondary:hover {
		background: var(--btn-secondary-bg-hover, rgba(129, 140, 248, 0.12));
	}

	.btn--ghost:hover {
		color: var(--color-brand-text);
	}
}

/* @doxallia/design — Form control primitive
 * Base for text inputs, selects, and textareas across the portail.
 */

.form-control {
	padding: var(--s-2) var(--s-3);
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	font-size: var(--text-sm);
	outline: none;
	transition: border-color var(--transition);
}

.form-control:focus {
	border-color: var(--color-brand-border);
}

/* For code/XML inputs: monospace font + smaller size */
.form-control--mono {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
}


/* @doxallia/design — Layer 2: compositions */
/* @doxallia/design — Callout (admonition) styles */

.portail-content .callout {
	border-left-width: 4px;
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	padding: var(--s-3) var(--s-4);
	margin: var(--s-4) 0;
	border-left-style: solid;
	background: transparent;
}

.portail-content .callout p {
	margin-bottom: 0;
	font-size: var(--text-sm);
}

.portail-content .callout::before {
	display: block;
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--s-1);
}

.portail-content .callout--note {
	background: var(--callout-note-bg);
	border-left-color: var(--color-get-fg);
}

.portail-content .callout--note::before {
	content: "ℹ Note";
	color: var(--color-get-fg);
}

.portail-content .callout--note p {
	color: var(--callout-note-fg);
}

.portail-content .callout--warning {
	background: var(--callout-warning-bg);
	border-left-color: var(--color-warning);
}

.portail-content .callout--warning::before {
	content: "⚠ Attention";
	color: var(--color-warning);
}

.portail-content .callout--warning p {
	color: var(--callout-warning-fg);
}

.portail-content .callout--tip {
	background: var(--callout-tip-bg);
	border-left-color: var(--color-success);
}

.portail-content .callout--tip::before {
	content: "✦ Conseil";
	color: var(--color-success);
}

.portail-content .callout--tip p {
	color: var(--callout-tip-fg);
}

.portail-content .callout--danger {
	background: var(--callout-danger-bg);
	border-left-color: var(--color-delete-fg);
}

.portail-content .callout--danger::before {
	content: "✕ Attention critique";
	color: var(--color-delete-fg);
}

.portail-content .callout--danger p {
	color: var(--callout-danger-fg);
}

/* @doxallia/design — Code block styles */

.code-copy-btn {
	position: absolute;
	top: var(--s-2);
	right: var(--s-2);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	background: var(--color-code-copy-bg);
	border: 1px solid var(--color-code-copy-border);
	border-radius: var(--radius-md);
	color: var(--color-code-text-muted);
	cursor: pointer;
	opacity: 0;
	transition:
		opacity var(--transition),
		background var(--transition);
}

.code-copy-btn svg {
	width: 0.875rem;
	height: 0.875rem;
}

pre[data-language]:hover .code-copy-btn {
	opacity: 1;
}

.code-copy-btn:hover {
	background: var(--color-code-copy-bg-hover);
	color: var(--color-code-text);
}

@media (max-width: 768px) {
	.code-copy-btn {
		opacity: 1;
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.portail-content hr {
	border: none;
	border-top: var(--border-width) solid var(--color-border);
	margin: var(--s-5) 0;
}

/* @doxallia/design — Table styles */

.portail-content table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--s-4);
	font-size: var(--text-sm);
}

.portail-content th {
	text-align: left;
	padding: var(--s-2) var(--s-3);
	background: var(--color-surface-muted);
	border-bottom: 2px solid var(--color-border);
	font-weight: var(--fw-semi);
	color: var(--color-brand-text);
}

.portail-content td {
	padding: var(--s-2) var(--s-3);
	border-bottom: var(--border-width) solid var(--color-border);
}

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

.portail-content tbody tr:nth-child(even) td {
	background: var(--color-surface-muted);
}

.portail-content tbody tr:hover td {
	background: var(--color-brand-active);
}

@media (max-width: 768px) {
	.portail-content table {
		display: block;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
	}

	.portail-content th,
	.portail-content td {
		padding: var(--s-1) var(--s-2);
		font-size: 0.8125rem;
		white-space: normal;
	}

	.portail-content td code,
	.portail-content th code {
		font-size: 0.75em;
		white-space: nowrap;
	}
}

.table-filter-wrapper {
	position: relative;
}

.table-filter-input {
	display: block;
	width: 100%;
	max-width: 320px;
	margin-bottom: var(--s-2);
	padding: var(--s-1-5) var(--s-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	background: var(--color-surface);
	color: var(--color-text);
	outline: none;
}

.table-filter-input:focus {
	border-color: var(--color-brand-border);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand) 20%, transparent);
}

/* @doxallia/design — Mermaid diagram styles */

.mermaid {
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--s-6);
	overflow-x: auto;
	margin-bottom: var(--s-4);
	text-align: center;
}

@media (max-width: 768px) {
	.mermaid {
		max-height: 70vh;
		overflow: auto;
		padding: var(--s-3);
		border-radius: var(--radius-md);
		background-image: linear-gradient(
			to bottom,
			transparent calc(100% - 2rem),
			color-mix(in srgb, var(--color-surface) 80%, transparent) 100%
		);
	}
}

.mermaid svg {
	max-width: 100%;
	height: auto;
}

/* @doxallia/design — Error page styles */

.portail-error {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	text-align: center;
	padding: var(--s-8);
}

/* SVG illustration — optional, loaded via /assets/pdp-design/assets/errors/{404,500,maintenance}.svg */
.portail-error-illustration {
	width: min(200px, 55vw);
	height: auto;
	margin-bottom: var(--s-6);
	opacity: 0.92;
}

.portail-error-code {
	font-size: 4rem;
	font-weight: var(--fw-bold);
	color: var(--color-brand-text);
	line-height: 1;
	margin-bottom: var(--s-4);
}

.portail-error-message {
	font-size: var(--text-lg);
	font-weight: var(--fw-medium);
	color: var(--color-text);
	margin-bottom: var(--s-2);
}

.portail-error-detail {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--s-6);
}

.portail-error a {
	color: var(--color-brand-text);
	text-underline-offset: 2px;
}

/* Coming-soon page — full centered layout with illustration */
.portail-coming-soon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	text-align: center;
	padding: var(--s-8);
	gap: var(--s-4);
}

.portail-coming-soon-illustration {
	width: min(180px, 50vw);
	height: auto;
	margin-bottom: var(--s-2);
}

.portail-coming-soon-title {
	font-size: var(--text-2xl);
	font-weight: var(--fw-bold);
	color: var(--color-brand-text);
}

.portail-coming-soon-subtitle {
	font-size: var(--text-base);
	color: var(--color-text-muted);
	max-width: 36ch;
}

.portail-coming-soon-contact {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	max-width: 40ch;
}

/* @doxallia/design — Code tabs (shared with portail-specific OpenAPI) */

.code-tabs {
	position: relative;
	background: var(--color-code-bg);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.endpoint-split-aside .code-tabs {
	background: var(--color-code-bg);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.code-tab-list {
	display: flex;
	background: var(--color-code-surface);
	border-bottom: 1px solid var(--color-code-border);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.code-tab {
	padding: var(--s-2) var(--s-4);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-code-text-muted);
	background: none;
	border: none;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition:
		color 0.15s,
		border-color 0.15s;
}
.code-tab:hover {
	color: var(--color-code-text);
}
.code-tab--active {
	color: var(--color-code-text-active);
	border-bottom-color: var(--color-brand-active);
}

@media (max-width: 640px) {
	.code-tab {
		padding: var(--s-2) var(--s-3);
		font-size: 0.75rem;
		white-space: nowrap;
	}
}

.code-panel {
	position: relative;
}
.code-panel pre {
	margin: 0;
	padding: var(--s-4);
	overflow-x: auto;
}
.code-panel code {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	color: var(--color-code-text);
	line-height: 1.6;
	white-space: pre;
}

.copy-btn {
	position: absolute;
	top: var(--s-2);
	right: var(--s-2);
	background: var(--color-code-surface);
	color: var(--color-code-text-muted);
	border: 1px solid var(--color-code-border);
	border-radius: var(--radius-sm);
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	cursor: pointer;
	z-index: 1;
	transition:
		color 0.15s,
		background 0.15s;
}
.copy-btn:hover {
	color: var(--color-code-text-active);
	background: var(--color-code-border);
}

/* Focus-visible on dark code surface — brand color has ~1:1 contrast on #1e293b.
 * Override with a light ring (WCAG 1.4.11 Non-text Contrast: 3:1 minimum). */
.code-tab:focus-visible,
.copy-btn:focus-visible {
	outline-color: #e2e8f0; /* slate-200 — 8:1 contrast on #1e293b */
}

/* ── Code tabs header (label row + tab list wrapper) ─────── */

/* Header wraps both the optional label and the tab list.
 * Provides background + bottom border so .code-tab-list doesn't duplicate them. */
.code-tabs-header {
	background: var(--color-code-surface);
	border-bottom: 1px solid var(--color-code-border);
}

.code-tabs-header .code-tab-list {
	/* Header already provides bg and border — avoid doubling. */
	background: transparent;
	border-bottom: none;
}

.code-tabs-label {
	display: block;
	padding: var(--s-2) var(--s-4) 0;
	font-family: var(--font-mono);
	font-size: 0.625rem;
	font-weight: 600;
	color: var(--color-code-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity: 0.6;
}

/* ── Copy button — icon-only variant ─────────────────────── */

.copy-btn--icon {
	width: 2rem;
	height: 2rem;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Brief green flash on successful copy */
.copy-btn[data-copied="true"] {
	color: #22c55e;
	border-color: rgba(34, 197, 94, 0.2);
}

/* ── Code response card ───────────────────────────────────── */

.code-response {
	background: var(--color-code-bg);
	border-top: 1px solid var(--color-code-border);
}

/* Inside the aside: each panel is a separate rounded card — no top border merge. */
.endpoint-split-aside .code-response {
	border-radius: var(--radius-md);
	overflow: hidden;
	border-top: none;
}

.code-response-header {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-2) var(--s-4);
	background: var(--color-code-surface);
	border-bottom: 1px solid var(--color-code-border);
}

.code-response-label {
	flex: 1;
	font-family: var(--font-mono);
	font-size: 0.625rem;
	font-weight: 600;
	color: var(--color-code-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity: 0.6;
}

.code-response-meta {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--color-code-text-muted);
}

.code-response-status {
	font-size: 0.6875rem;
	font-weight: 600;
	font-family: var(--font-mono);
	padding: 0.125em 0.4em;
	border-radius: var(--radius-sm);
}

.code-response-status--ok {
	background: #14532d;
	color: #bbf7d0;
}

.code-response-status--warn {
	background: #713f12;
	color: #fef08a;
}

.code-response-status--err {
	background: #7f1d1d;
	color: #fecaca;
}

/* @doxallia/design — breadcrumb pill */

/* ── Breadcrumb pill ──────────────────────────────────── */

.doc-breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	background: color-mix(in srgb, var(--color-brand) 10%, transparent);
	color: var(--color-brand-text);
	padding: var(--s-1) var(--s-3);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	margin-bottom: var(--s-4);
}

.doc-breadcrumb-icon {
	display: inline-flex;
	width: 0.875rem;
	height: 0.875rem;
}

.doc-breadcrumb-icon svg {
	width: 100%;
	height: 100%;
}

/* @doxallia/design — heading anchors + code language label */

/* ── Code language label ─────────────────────────────────────── */

.portail-content pre[data-language]::before {
	content: attr(data-language);
	display: block;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	padding: var(--s-2) var(--s-4) 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.7;
}

/* "text" is a meaningless fallback — hide the label */
.portail-content pre[data-language="text"]::before {
	display: none;
}

/* Inside .code-tabs the card header already labels the block — no duplicate label */
.portail-content .code-tabs pre[data-language]::before {
	display: none;
}

/* ── Heading anchors ─────────────────────────────────────────── */

.portail-content h2,
.portail-content h3 {
	position: relative;
}

.heading-anchor {
	display: inline-block;
	margin-left: var(--s-2);
	color: var(--color-text-muted);
	font-weight: var(--fw-normal);
	font-size: 0.9em;
	text-decoration: none;
	opacity: 0;
	transition: opacity 0.15s;
	user-select: none;
}

.portail-content h2:hover .heading-anchor,
.portail-content h2:focus-within .heading-anchor,
.portail-content h3:hover .heading-anchor,
.portail-content h3:focus-within .heading-anchor,
.heading-anchor:focus-visible {
	opacity: 1;
}

/* @doxallia/design — table of contents ("Sur cette page") */

/* ── TOC — "Sur cette page" ──────────────────────────────────── */

.portail-toc {
	display: none;
}

@media (min-width: 1280px) {
	.portail-main:has(.portail-toc) {
		display: grid;
		grid-template-columns: 1fr 220px;
		align-items: start;
	}

	.portail-toc {
		display: block;
		position: sticky;
		top: calc(var(--header-height) + var(--s-6));
		max-height: calc(100vh - var(--header-height) - var(--s-8));
		overflow-y: auto;
		padding: var(--s-4) var(--s-4) var(--s-6) var(--s-5);
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-md);
		background: var(--color-surface);
	}
}

.portail-toc-title {
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	margin: 0 0 var(--s-3);
}

.portail-toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.portail-toc-list a {
	display: block;
	font-size: var(--text-sm);
	color: var(--color-text-subtle);
	text-decoration: none;
	padding: var(--s-1) 0;
	line-height: var(--lh-tight);
	transition: color 0.15s;
}

.portail-toc-list a:hover,
.portail-toc-list a.is-active {
	color: var(--color-brand-text);
}

/* @doxallia/design — prev/next page navigation */

/* ── Prev/Next navigation ────────────────────────────────────── */

.portail-prev-next {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-4);
	margin-top: var(--s-10);
	padding-top: var(--s-6);
	border-top: var(--border-width) solid var(--color-border);
}

.portail-prev-next-link {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	padding: var(--s-4);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	text-decoration: none;
	background: var(--color-surface);
	transition:
		border-color 0.15s,
		background 0.15s;
}

.portail-prev-next-link:hover {
	border-color: var(--color-brand-border);
	background: var(--color-brand-active);
}

.portail-prev-next-link--next {
	text-align: right;
}

.portail-prev-next-label {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	font-weight: var(--fw-medium);
}

.portail-prev-next-title {
	font-size: var(--text-sm);
	font-weight: var(--fw-semi);
	color: var(--color-text);
}

@media (max-width: 640px) {
	.portail-prev-next {
		grid-template-columns: 1fr;
	}

	.portail-prev-next-link--next {
		text-align: left;
	}
}

/* @doxallia/design — feedback widget */

/* ── Feedback widget ─────────────────────────────────────────── */

.feedback-widget {
	margin: var(--s-8) 0 var(--s-6);
	padding: var(--s-4) var(--s-6);
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
}

.feedback-question {
	font-size: var(--text-sm);
	color: var(--color-text-subtle);
	margin: 0 0 var(--s-3);
}

.feedback-optional {
	color: var(--color-text-muted);
	font-weight: var(--fw-normal);
}

.feedback-votes {
	display: flex;
	gap: var(--s-2);
}

.feedback-vote {
	padding: var(--s-2) var(--s-4);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	font-size: var(--text-sm);
	cursor: pointer;
	transition:
		border-color 0.15s,
		background 0.15s;
}

.feedback-vote:hover {
	border-color: var(--color-brand-border);
	background: var(--color-brand-active);
}

.feedback-comment-form {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.feedback-textarea {
	width: 100%;
	padding: var(--s-2) var(--s-3);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-text);
	background: var(--color-surface);
	resize: vertical;
	box-sizing: border-box;
}

.feedback-textarea:focus {
	outline: 2px solid var(--color-brand);
	outline-offset: 1px;
	border-color: transparent;
}

.feedback-actions {
	display: flex;
	align-items: center;
	gap: var(--s-3);
}

.feedback-submit {
	padding: var(--s-2) var(--s-4);
	background: var(--color-brand);
	color: #fff;
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	cursor: pointer;
	transition: background 0.15s;
}

.feedback-submit:hover {
	background: var(--color-brand-dark);
}

.feedback-skip {
	background: none;
	border: none;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	cursor: pointer;
	text-decoration: underline;
	padding: 0;
}

.feedback-skip:hover {
	color: var(--color-text-subtle);
}

.feedback-thanks {
	font-size: var(--text-sm);
	color: var(--color-success);
	margin: 0;
}

/* @doxallia/design — API version toggle + callout blocks + mismatch notice */

/* ── API version toggle (header or sidebar) ──────────────────── */

.portail-api-version-toggle {
	display: flex;
	align-items: center;
	/* --color-text-subtle gives readable contrast in both light (#5b6b7e) and dark (#9aacbf) */
	border: var(--border-width) solid var(--color-text-subtle);
	border-radius: var(--radius-md);
	overflow: hidden;
	flex-shrink: 0;
}

.portail-api-version-btn {
	padding: var(--s-1) var(--s-3);
	background: transparent;
	border: none;
	border-right: var(--border-width) solid var(--color-text-subtle);
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	cursor: pointer;
	transition:
		background 0.15s,
		color 0.15s;
	white-space: nowrap;
}

.portail-api-version-btn:last-child {
	border-right: none;
}

.portail-api-version-btn:hover {
	background: var(--color-surface-muted);
	color: var(--color-text);
}

.portail-api-version-btn.is-active {
	background: var(--color-brand-active);
	color: var(--color-brand-text);
}

/* ── Sidebar variant — full-width, flush with nav padding ─────── */

.nav-version-toggle {
	flex-shrink: 1;
	width: fit-content;
	margin: var(--s-3) var(--s-4) var(--s-1);
}

/* ── Version callout blocks ──────────────────────────────────── */

.portail-content .callout--v13 {
	background: var(--callout-v13-bg);
	border-left-color: var(--callout-v13-border);
}

.portail-content .callout--v13::before {
	content: "✦ Nouveauté v1.3";
	color: var(--callout-v13-border);
}

.portail-content .callout--v13 p {
	color: var(--callout-v13-fg);
}

.portail-content .callout--v12 {
	background: var(--callout-v12-bg);
	border-left-color: var(--callout-v12-border);
}

.portail-content .callout--v12::before {
	content: "◈ v1.2";
	color: var(--callout-v12-border);
}

.portail-content .callout--v12 p {
	color: var(--callout-v12-fg);
}

/* Dim v1.3 callouts when viewing in v1.2 mode */
:root[data-api-version="v1.2"] .portail-content .callout--v13 {
	opacity: 0.55;
}

:root[data-api-version="v1.2"] .portail-content .callout--v13::before {
	content: "✦ Nouveauté v1.3 — non disponible en v1.2";
}

/* ── Version mismatch notice ─────────────────────────────────── */

.api-version-notice {
	padding: var(--s-3) var(--s-4);
	background: var(--callout-warning-bg);
	border-left: 3px solid var(--color-warning);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	color: var(--callout-warning-fg);
	margin-bottom: var(--s-6);
}

/* @doxallia/design — home quick-ref block */

/* ── Home quick-ref ────────────────────────────────────── */
.home-quickref {
	margin-top: var(--s-8);
	padding: var(--s-5) var(--s-6);
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-xl);
}

.home-quickref-title {
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin-bottom: var(--s-4);
}

.home-quickref-dl {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-4) var(--s-6);
	margin: 0;
}

.home-quickref-entry {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.home-quickref-entry dt {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	font-weight: var(--fw-medium);
}

.home-quickref-entry dd {
	font-size: var(--text-base);
	color: var(--color-text);
	font-weight: var(--fw-semi);
	margin: 0;
	overflow-wrap: break-word;
}

.home-quickref-dd--url {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	font-weight: var(--fw-regular);
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--s-1) var(--s-2);
	word-break: break-all;
}

@media (max-width: 768px) {
	.home-quickref-dl {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.home-quickref-dl {
		grid-template-columns: 1fr;
	}
}

/* @doxallia/design — API ref landing & group cards */

/* ── API Ref landing & group cards ────────────────────── */
.api-ref-landing {
	margin-bottom: var(--s-8);
}
.api-ref-landing-header {
	margin-bottom: var(--s-6);
}
.api-ref-landing-title {
	font-size: var(--text-2xl);
	font-weight: var(--fw-bold);
	color: var(--color-text);
	margin-bottom: var(--s-2);
}
.api-ref-landing-desc {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}
.api-group-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--s-4);
	margin-bottom: var(--s-6);
}
.api-group-card {
	display: flex;
	gap: var(--s-3);
	padding: var(--s-4);
	border-radius: var(--radius-xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
	text-decoration: none;
	color: var(--color-text);
	transition:
		box-shadow var(--transition),
		border-color var(--transition);
}
.api-group-card:hover {
	border-color: var(--color-brand-border);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--color-brand) 10%, transparent);
}
.api-group-card-icon {
	font-size: 1.5rem;
	line-height: 1;
	flex-shrink: 0;
}
.api-group-card-body {
	flex: 1;
}
.api-group-card-title {
	font-weight: var(--fw-semi);
	font-size: var(--text-sm);
	margin-bottom: var(--s-1);
}
.api-group-card-desc {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin-bottom: var(--s-2);
}
.api-group-card-meta {
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	padding: 0.125rem var(--s-2);
	border-radius: var(--radius-full);
	display: inline-block;
}
.api-group-card--blue .api-group-card-meta {
	background: var(--color-get-bg);
	color: var(--color-get-fg);
}
.api-group-card--purple .api-group-card-meta {
	background: var(--color-patch-bg);
	color: var(--color-patch-fg);
}
.api-group-card--green .api-group-card-meta {
	background: var(--color-post-bg);
	color: var(--color-post-fg);
}
.api-group-card--amber .api-group-card-meta {
	background: var(--color-put-bg);
	color: var(--color-put-fg);
}

/* ── Tag group context banner ─────────────────────────── */
.tag-group-context {
	margin-bottom: var(--s-3);
}
.tag-group-badge {
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	padding: 0.125rem var(--s-2);
	border-radius: var(--radius-full);
}
.tag-group-badge--blue {
	background: var(--color-get-bg);
	color: var(--color-get-fg);
}
.tag-group-badge--purple {
	background: var(--color-patch-bg);
	color: var(--color-patch-fg);
}
.tag-group-badge--green {
	background: var(--color-post-bg);
	color: var(--color-post-fg);
}
.tag-group-badge--amber {
	background: var(--color-put-bg);
	color: var(--color-put-fg);
}

/* ── API subcategory grouping ─────────────────────────── */
.api-subcategory-group {
	margin-bottom: var(--s-6);
}
.api-subcategory-label {
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: var(--s-2) 0;
	border-bottom: var(--border-width) solid var(--color-border);
	margin-bottom: var(--s-3);
}

/* ── Generic portal card base ────────────────────────────── */
/* Shared hover interaction for home-card, profiles-card      */
.portail-card {
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	transition:
		border-color var(--transition),
		box-shadow var(--transition);
}

.portail-card:hover {
	border-color: var(--color-brand-border);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--color-brand) 10%, transparent);
}

/* @doxallia/design — use case block */

/* ── Usecase block ────────────────────────────────────── */
.usecase-block {
	border: var(--border-width) solid var(--color-border);
	border-left: 3px solid var(--color-brand-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	margin: var(--s-6) 0;
	overflow: hidden;
}
.usecase-header {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-4);
	background: var(--color-surface-muted);
	border-bottom: var(--border-width) solid var(--color-border);
}
.usecase-icon {
	font-size: var(--text-base);
	line-height: 1;
}
.usecase-title {
	font-weight: var(--fw-semi);
	font-size: var(--text-sm);
	color: var(--color-text);
}
.usecase-body {
	padding: var(--s-4);
}
.usecase-body > *:first-child {
	margin-top: 0;
}
.usecase-body > *:last-child {
	margin-bottom: 0;
}

/* @doxallia/design — portal timeline + FAQ accordion */

/* ── Portal timeline ──────────────────────────────────── */
.portail-timeline {
	margin: var(--s-6) 0;
}
.portail-timeline-title {
	font-weight: var(--fw-semi);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--s-4);
}
.portail-timeline-track {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-left: 2px solid var(--color-border);
	padding-left: var(--s-4);
	margin-left: var(--s-3);
}
.portail-timeline-step {
	position: relative;
	padding: var(--s-2) var(--s-3);
	margin-bottom: var(--s-1);
}
.portail-timeline-marker {
	position: absolute;
	left: calc(-1 * var(--s-4) - 5px);
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	border-radius: var(--radius-full);
	border: 2px solid var(--color-border);
	background: var(--color-surface);
}
.portail-timeline-label {
	font-size: var(--text-sm);
	color: var(--color-text);
}
/* State color variants — marker dot */
.portail-timeline-step--pending .portail-timeline-marker {
	border-color: var(--color-text-muted);
	background: var(--color-surface-muted);
}
.portail-timeline-step--info .portail-timeline-marker {
	border-color: var(--color-get-fg);
	background: var(--color-get-bg);
}
.portail-timeline-step--success .portail-timeline-marker {
	border-color: var(--color-success);
	background: var(--color-post-bg);
}
.portail-timeline-step--error .portail-timeline-marker {
	border-color: var(--color-error);
	background: var(--color-delete-bg);
}
.portail-timeline-step--neutral .portail-timeline-marker {
	border-color: var(--color-border);
	background: var(--color-surface);
}
/* Label color tinting per state */
.portail-timeline-step--info .portail-timeline-label {
	color: var(--color-get-fg);
}
.portail-timeline-step--success .portail-timeline-label {
	color: var(--color-success);
}
.portail-timeline-step--error .portail-timeline-label {
	color: var(--color-error);
}

/* ── FAQ accordion ────────────────────────────────────── */
.faq-accordion-item {
	border-bottom: var(--border-width) solid var(--color-border);
}
.faq-accordion-btn {
	display: flex;
	width: 100%;
	text-align: left;
	padding: var(--s-4) 0;
	background: none;
	border: none;
	cursor: pointer;
	font-size: var(--text-base);
	font-weight: var(--fw-semi);
	color: var(--color-text);
	gap: var(--s-2);
	align-items: center;
	font-family: inherit;
}
.faq-accordion-btn::after {
	content: "▾";
	margin-left: auto;
	flex-shrink: 0;
	transition: transform var(--transition);
	color: var(--color-text-muted);
}
.faq-accordion-btn[aria-expanded="true"]::after {
	transform: rotate(-180deg);
}

/* display:grid overrides UA [hidden]{display:none} to enable transition.
 * The [hidden] attribute is preserved for AT semantics (managed by accordion.js). */
.faq-accordion-body {
	display: grid !important;
	grid-template-rows: 0fr;
	overflow: hidden;
	transition: grid-template-rows 250ms ease;
}
.faq-accordion-body.is-open {
	grid-template-rows: 1fr;
}
.faq-accordion-body > * {
	overflow: hidden;
	min-height: 0;
	padding-bottom: var(--s-4);
}

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

/* @doxallia/design — changelog timeline */

/* ── Changelog timeline ───────────────────────────────── */
.changelog-version-heading {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding-top: var(--s-6);
}
.changelog-version-badge {
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	padding: 0.125rem var(--s-2);
	border-radius: var(--radius-full);
	background: var(--color-get-bg);
	color: var(--color-get-fg);
	font-family: var(--font-mono);
}
.changelog-entry-badge {
	display: inline-block;
	font-size: 0.65rem;
	font-weight: var(--fw-semi);
	padding: 0.0625rem 0.375rem;
	border-radius: var(--radius-full);
	margin-right: var(--s-2);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	vertical-align: middle;
}
.changelog-entry-badge--feat {
	background: var(--color-post-bg);
	color: var(--color-post-fg);
}
.changelog-entry-badge--fix {
	background: var(--color-put-bg);
	color: var(--color-put-fg);
}
.changelog-entry-badge--breaking {
	background: var(--color-delete-bg);
	color: var(--color-delete-fg);
}
.changelog-entry-badge--security {
	background: var(--color-patch-bg);
	color: var(--color-patch-fg);
}

/* @doxallia/design — Interactive checklist composition
 * Used on prerequisite/onboarding pages with localStorage persistence (checklist.js).
 * Generates a dark branded card with a 2-column responsive grid.
 */

.checklist-block {
	background: var(--color-brand-dark, #10152e);
	border-radius: var(--radius-xl, 1rem);
	padding: var(--s-6);
	margin-bottom: var(--s-8);
	color: var(--color-text-on-dark, #f1f5f9);
}

.checklist-block .checklist-title {
	font-size: var(--text-xl);
	font-weight: var(--fw-bold);
	color: #fff;
	margin-bottom: var(--s-5);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	padding-bottom: var(--s-4);
}

.checklist-block .checklist-desc {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: var(--s-5);
}

/* 2-column grid — Col 1 = Accès+Technique, Col 2 = Métier */
.checklist-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--s-4) var(--s-8);
}

@media (max-width: 640px) {
	.checklist-grid {
		grid-template-columns: 1fr;
	}
}

.checklist-col {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}

/* Category header */
.checklist-category {
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.45);
	margin-bottom: var(--s-2);
}

/* List reset */
.checklist-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

/* Individual item */
.checklist-item {
	display: flex;
	align-items: flex-start;
	gap: var(--s-2);
}

.checklist-item label {
	display: flex;
	align-items: flex-start;
	gap: var(--s-2);
	cursor: pointer;
	min-height: 1.5rem;
}

.checklist-item input[type="checkbox"] {
	flex-shrink: 0;
	margin-top: 2px;
	width: 1rem;
	height: 1rem;
	accent-color: var(--color-brand-text, #818cf8);
	cursor: pointer;
	outline-offset: 2px;
}

.checklist-item input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--color-brand-text, #818cf8);
}

.checklist-item-label {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.85);
	line-height: var(--lh-snug, 1.4);
	transition:
		color var(--transition),
		text-decoration var(--transition);
}

.checklist-item-label code {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--radius-sm);
	padding: 1px 4px;
	font-size: 0.8em;
	color: rgba(255, 255, 255, 0.9);
}

/* Checked state — strike through label */
.checklist-item:has(input:checked) .checklist-item-label {
	text-decoration: line-through;
	color: rgba(255, 255, 255, 0.35);
}

/* Reset button — injected below the grid by checklist.js or server-rendered */
.checklist-block .checklist-reset {
	margin-top: var(--s-5);
	background: transparent;
	border: none;
	padding: 0;
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	text-decoration: underline;
	transition: color var(--transition);
}

.checklist-block .checklist-reset:hover {
	color: rgba(255, 255, 255, 0.7);
}

/* @doxallia/design — Support / help card composition
 * Used at the bottom of onboarding pages to provide CTA to support and next step.
 */

.support-card {
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--s-6);
	margin-top: var(--s-8);
}

.support-card-title {
	font-size: var(--text-base);
	font-weight: var(--fw-semi);
	color: var(--color-brand-text);
	margin-bottom: var(--s-3);
}

.support-card-desc {
	font-size: var(--text-sm);
	color: var(--color-text);
	margin-bottom: var(--s-5);
	line-height: var(--lh-base);
}

.support-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
}

.support-card-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-2) var(--s-5);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	border-radius: var(--radius-full);
	text-decoration: none;
	transition:
		background var(--transition),
		color var(--transition),
		border-color var(--transition);
	white-space: nowrap;
}

.support-card-btn svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

/* Surface token contract — consumers remap these on dark containers
 * (see .home-hero in portail-specific.css). Defaults preserve the light-surface
 * brand behavior; no callsite change needed for existing usages. */
.support-card-btn--primary {
	background: var(
		--support-card-btn-primary-bg,
		var(--color-header-cta-bg, var(--color-brand-dark))
	);
	color: var(--support-card-btn-primary-fg, var(--color-header-cta-fg, #fff));
	border: var(--border-width) solid
		var(--support-card-btn-primary-border, transparent);
}

.support-card-btn--primary:hover {
	background: var(
		--support-card-btn-primary-bg-hover,
		color-mix(
			in srgb,
			var(
					--support-card-btn-primary-bg,
					var(--color-header-cta-bg, var(--color-brand-dark))
				)
				85%,
			transparent
		)
	);
}

.support-card-btn--secondary {
	background: var(--support-card-btn-secondary-bg, transparent);
	color: var(--support-card-btn-secondary-fg, var(--color-brand-text));
	border: var(--border-width) solid
		var(--support-card-btn-secondary-border, var(--color-brand-border));
}

.support-card-btn--secondary:hover {
	background: var(
		--support-card-btn-secondary-bg-hover,
		var(--color-brand-active)
	);
}

@media (max-width: 480px) {
	.support-card-actions {
		flex-direction: column;
	}

	.support-card-btn {
		justify-content: center;
	}
}

/* @doxallia/design — Surface-inverse modifier
 *
 * Remaps the CTA button token families (.btn--* primitive AND
 * .support-card-btn--* composition) for high-contrast rendering when
 * placed on a dark brand surface (welcome hero, dark cta-card, dark
 * landing banner, etc.).
 *
 * Usage: add `.surface--inverse` to any container that owns a dark
 * background; the CSS variables cascade so the modifier can live on
 * the outermost wrapper. No DOM/markup change on the buttons themselves.
 *
 *   <div class="home-hero surface--inverse">
 *     <a class="support-card-btn support-card-btn--secondary">…</a>
 *     <button class="btn btn--secondary">…</button>
 *   </div>
 *
 * Values tuned for WCAG AA on the brand-dark hero (#141c52 navy):
 * - Secondary CTA: 12% white surface + 95% white border (defines the
 *   button shape clearly), 24% on hover.
 * - Primary CTA: solid white surface + brand-dark text.
 *
 * Other design conventions (consumer-specific CTA systems) keep their
 * own tokens; this modifier only remaps the two design-system families.
 *
 * Honors the "surface token contract" documented in
 * support-card.css:55-57. */

.surface--inverse {
	/* .btn--* primitive (button.css) */
	--btn-secondary-bg: rgba(255, 255, 255, 0.12);
	--btn-secondary-fg: #fff;
	--btn-secondary-border: rgba(255, 255, 255, 0.95);
	--btn-secondary-bg-hover: rgba(255, 255, 255, 0.24);

	/* .support-card-btn--* composition (support-card.css) */
	--support-card-btn-primary-bg: #fff;
	--support-card-btn-primary-fg: var(--color-brand-dark, #141c52);
	--support-card-btn-primary-border: transparent;
	--support-card-btn-primary-bg-hover: rgba(255, 255, 255, 0.88);

	--support-card-btn-secondary-bg: rgba(255, 255, 255, 0.12);
	--support-card-btn-secondary-fg: #fff;
	--support-card-btn-secondary-border: rgba(255, 255, 255, 0.95);
	--support-card-btn-secondary-bg-hover: rgba(255, 255, 255, 0.24);
}

/* Focus-visible ring — white on dark surface, matches the dark-mode
 * pattern in button.css:66-79. */
.surface--inverse .btn--secondary:focus-visible,
.surface--inverse .support-card-btn--secondary:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* @doxallia/design — Details/accordion composition
 * Wraps a <details> element with card styling and a + chevron toggle.
 * Usage:
 *   <details class="details-toggle">
 *     <summary>Question</summary>
 *     <div class="details-toggle__body">Answer</div>
 *   </details>
 */

.details-toggle {
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.details-toggle > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--s-4);
	font-weight: var(--fw-medium);
	cursor: pointer;
	user-select: none;
	list-style: none;
	transition: background var(--transition);
}

.details-toggle > summary::-webkit-details-marker {
	display: none;
}

.details-toggle > summary::after {
	content: "+";
	flex-shrink: 0;
	font-size: 1.25rem;
	color: var(--color-text-muted);
	transition: transform var(--transition);
	margin-left: var(--s-3);
}

.details-toggle[open] > summary::after {
	transform: rotate(45deg);
}

.details-toggle > summary:hover {
	background: var(--color-surface-muted);
}

.details-toggle[open] > summary {
	border-bottom: var(--border-width) solid var(--color-border);
}

/* Use .details-toggle__body for new accordion content.
 * Note: existing .faq-item uses .faq-answer instead (portail-specific.css). */
.details-toggle__body {
	padding: var(--s-4);
	color: var(--color-text-subtle);
	line-height: var(--lh-relaxed, 1.7);
}

/* ── .accordion-group ─────────────────────────────────────────────────────── */

.accordion-group {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	margin: var(--s-6) 0;
}

/* ── .details-toggle--lg — large overview variant ─────────────────────────── */

.details-toggle--lg > summary {
	padding: var(--s-5) var(--s-6);
	font-size: var(--text-lg);
	font-weight: var(--fw-semibold);
	justify-content: flex-start;
	gap: var(--s-3);
}

.details-toggle--lg > summary::before {
	content: "▶";
	flex-shrink: 0;
	font-size: 0.7em;
	color: var(--color-text-muted);
	transition: transform var(--transition);
}

.details-toggle--lg[open] > summary::before {
	transform: rotate(90deg);
}

/* Disable the base + sign for the large variant */
.details-toggle--lg > summary::after {
	content: none;
}

.details-toggle--lg .details-toggle__body {
	padding: var(--s-5) var(--s-6);
}

/* @doxallia/design — Source tier badge component
 * Compact inline chip indicating the reliability tier of a cited source.
 * Pairs with deriveSourceTier() from @doxallia/ai/corpus/source-tier.
 *
 * Usage:
 *   <span class="tier-badge tier-official">Officiel DGFIP</span>
 *   <span class="tier-badge tier-upstream">SI Doxallia</span>
 *   <span class="tier-badge tier-documented">Wiki validé</span>
 *   <span class="tier-badge tier-experimental">Expérimental</span>
 */

.tier-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.1rem 0.4rem;
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	line-height: 1.4;
	white-space: nowrap;
	vertical-align: middle;
	letter-spacing: 0.01em;
}

.tier-badge.tier-official {
	background: var(--tier-official-bg);
	color: var(--tier-official-fg);
}

.tier-badge.tier-upstream {
	background: var(--tier-upstream-bg);
	color: var(--tier-upstream-fg);
}

.tier-badge.tier-documented {
	background: var(--tier-documented-bg);
	color: var(--tier-documented-fg);
}

.tier-badge.tier-experimental {
	background: var(--tier-experimental-bg);
	color: var(--tier-experimental-fg);
}

/* @doxallia/design — Portal Legacy Components
 *
 * Classes migrées d'un consumer historique vers le design system.
 * À progressivement déplacer vers des fichiers dédiés au fur et à mesure.
 *
 * Catégories:
 *  - Portal shell (header, sidebar, nav)
 *  - API Reference (OpenAPI spec viewer)
 *  - Validator (invoice validation UI)
 *  - Dashboard
 *  - Onboarding
 *  - Miscellaneous components
 */

/* ── Base ────── */
/* ── Base ─────────────────────────────────────────────── */

html {
	font-size: var(--text-base);
}

body {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--lh-base);
	background: var(--color-bg);
	color: var(--color-text);
}

/* ── Portal Header ────── */
/* ── Header ───────────────────────────────────────────── */

.portail-header {
	height: var(--header-height);
	background: var(--color-brand);
	position: sticky;
	top: 0;
	z-index: var(--z-header);
}

.portail-header-inner {
	display: grid;
	grid-template-columns: var(--sidebar-width) 1fr;
	max-width: var(--page-max-width);
	margin: 0 auto;
	height: 100%;
}

.portail-header-left {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: 0 var(--s-4);
	border-right: var(--border-width) solid rgba(255, 255, 255, 0.1);
}

.portail-header-right {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding: 0 var(--s-6);
	justify-content: flex-end;
}

/* Dark mode toggle */
.portail-dark-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: none;
	background: transparent;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	border-radius: var(--radius-sm);
	transition:
		color var(--transition),
		background var(--transition);
	flex-shrink: 0;
}

.portail-dark-toggle:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

/* Language toggle — FR|EN switcher in header */
.portail-lang-toggle {
	display: flex;
	align-items: center;
	gap: 2px;
	border: var(--border-width) solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-sm);
	overflow: hidden;
	flex-shrink: 0;
}

.portail-lang-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0.2rem 0.5rem;
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	background: transparent;
	border: none;
	cursor: pointer;
	transition:
		color var(--transition),
		background var(--transition);
	line-height: 1.5;
}

.portail-lang-btn:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
}

.portail-lang-btn--active {
	color: #fff;
	background: rgba(255, 255, 255, 0.15);
	font-weight: var(--fw-semi);
	cursor: default;
}

.portail-lang-flag {
	display: block;
	flex-shrink: 0;
	border-radius: 1px;
	box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.15);
}

/* Mobile: show only the inactive locale as a single flag button (direct switch, no dropdown) */
@media (max-width: 640px) {
	.portail-lang-code {
		display: none;
	}

	.portail-lang-btn--active {
		display: none;
	}

	.portail-lang-toggle {
		border: none;
	}

	.portail-lang-btn {
		min-height: 44px;
		min-width: 44px;
		justify-content: center;
		padding: 0.35rem 0.5rem;
	}
}

/* i18n fallback banner — shown when EN page is not yet translated */
.i18n-fallback-banner {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	margin-bottom: var(--s-6);
	background: color-mix(
		in srgb,
		var(--color-warning, #f59e0b) 10%,
		transparent
	);
	border: var(--border-width) solid
		color-mix(in srgb, var(--color-warning, #f59e0b) 40%, transparent);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* Mobile menu toggle — sits inside .portail-header-left (dark brand bg) */
.portail-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--s-2);
	border-radius: var(--radius-md);
	color: rgba(255, 255, 255, 0.7);
	line-height: 1;
	transition: background var(--transition);
}

.portail-menu-toggle:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.portail-menu-toggle svg {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}

/* Logo */
.portail-logo {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	text-decoration: none;
}

.portail-logo-icon {
	flex-shrink: 0;
	display: block;
}

.portail-logo-text {
	display: flex;
	flex-direction: column;
	line-height: var(--lh-tight);
}

.portail-logo-name {
	font-size: var(--text-sm);
	font-weight: var(--fw-semi);
	color: #fff;
}

.portail-logo-sub {
	font-size: 0.6875rem;
	color: rgba(255, 255, 255, 0.6);
}

/* Sidebar search */
.portail-sidebar-search {
	position: relative;
	padding: var(--s-4) var(--s-4) var(--s-3);
	border-bottom: var(--border-width) solid var(--color-border);
}

.portail-sidebar-search-icon {
	position: absolute;
	left: calc(var(--s-4) + var(--s-3));
	top: 50%;
	transform: translateY(-50%) translateY(calc(var(--s-4) / 2 - var(--s-3) / 2));
	width: 1rem;
	height: 1rem;
	color: var(--color-text-muted);
	pointer-events: none;
}

.portail-sidebar-search input {
	width: 100%;
	padding: var(--s-2) var(--s-3) var(--s-2)
		calc(var(--s-3) + 1.25rem + var(--s-2));
	font-size: var(--text-sm);
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-full);
	color: var(--color-text);
	outline: none;
	transition:
		border-color var(--transition),
		box-shadow var(--transition);
}

.portail-sidebar-search input:focus {
	border-color: var(--color-brand-border);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.portail-sidebar-search input::placeholder {
	color: var(--color-text-muted);
}

/* Search results dropdown */
.search-results {
	position: absolute;
	top: calc(100% + var(--s-1));
	left: 0;
	right: 0;
	list-style: none;
	padding: var(--s-1);
	margin: 0;
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	z-index: var(--z-dropdown);
}

.search-result-item a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--s-2) var(--s-3);
	border-radius: var(--radius-md);
	text-decoration: none;
	color: var(--color-text);
	transition: background var(--transition);
}

.search-result-item a:hover,
.search-result-item--active a {
	background: var(--color-brand-active);
}

.search-result-item strong {
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--color-brand-text);
}

.search-result-item span {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

/* Header right */
.portail-version {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.6);
}

.portail-last-updated {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	cursor: default;
	position: relative;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
	transition: color var(--transition);
}

.portail-last-updated:hover {
	color: var(--color-text);
}

.portail-last-updated::after {
	content: attr(data-tooltip);
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	white-space: nowrap;
	background: #1e293b;
	color: #f1f5f9;
	font-size: var(--text-xs, 0.75rem);
	padding: 4px 8px;
	border-radius: var(--radius-sm, 4px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	pointer-events: none;
	opacity: 0;
	transform: translateY(-4px);
	transition:
		opacity 150ms ease,
		transform 150ms ease;
	z-index: 100;
}

.portail-last-updated:hover::after {
	opacity: 1;
	transform: translateY(0);
}

.portail-logout {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	padding: var(--s-2) var(--s-4);
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.8);
	border: var(--border-width) solid rgba(255, 255, 255, 0.25);
	border-radius: var(--radius-full);
	text-decoration: none;
	transition:
		color var(--transition),
		border-color var(--transition),
		background var(--transition);
	white-space: nowrap;
}

.portail-logout-icon {
	display: none;
	flex-shrink: 0;
}

.portail-logout:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.6);
	background: rgba(255, 255, 255, 0.1);
}

/* ── Layout ───────────────────────────────────────────── */

/* ── Portal Layout ────── */
/* ── Layout ───────────────────────────────────────────── */

.portail-layout {
	display: grid;
	grid-template-columns: var(--sidebar-width) 1fr;
	max-width: var(--page-max-width);
	margin: 0 auto;
	min-height: calc(100vh - var(--header-height));
}

/* ── Sidebar ──────────────────────────────────────────── */

/* ── Portal Sidebar ────── */
/* ── Sidebar ──────────────────────────────────────────── */

.portail-sidebar {
	background: var(--color-surface);
	border-right: var(--border-width) solid var(--color-border);
	position: sticky;
	top: var(--header-height);
	height: calc(100vh - var(--header-height));
	overflow-y: auto;
	scrollbar-width: none;
	display: flex;
	flex-direction: column;
}

.portail-sidebar::-webkit-scrollbar {
	display: none;
}

.portail-sidebar-nav {
	flex: 1;
	padding: var(--s-6) var(--s-4) var(--s-4);
}

/* Assistant IA link — above the support box */
.portail-sidebar-chat-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	margin: 0 var(--s-6) var(--s-2);
	padding: var(--s-3) var(--s-4);
	border-radius: var(--radius-lg);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--color-brand-text);
	background: var(--color-brand-active);
	border: var(--border-width) solid var(--color-brand-border);
	text-decoration: none;
	transition:
		background var(--transition),
		border-color var(--transition);
}

.portail-sidebar-chat-link:hover,
.portail-sidebar-chat-link--active {
	background: var(--color-brand-active);
	border-color: var(--color-brand-text);
	color: var(--color-brand-text);
}

.portail-sidebar-chat-link svg {
	flex-shrink: 0;
	color: var(--color-brand-text);
}

/* Support box at the bottom of the sidebar */
.portail-sidebar-support {
	padding: var(--s-4) var(--s-6);
	border-top: var(--border-width) solid var(--color-border);
	flex-shrink: 0;
}

.portail-sidebar-support-box {
	background: var(--color-surface-muted);
	border-radius: var(--radius-lg);
	padding: var(--s-4);
}

.portail-sidebar-support-title {
	display: block;
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	color: var(--color-brand-text);
	margin-bottom: var(--s-1);
}

.portail-sidebar-support-text {
	display: block;
	font-size: var(--text-xs);
	color: var(--color-text);
	margin-bottom: var(--s-3);
}

.portail-sidebar-support-link {
	font-size: var(--text-xs);
	color: var(--color-brand-text);
	text-decoration: underline;
	transition: opacity var(--transition);
}

.portail-sidebar-support-link:hover {
	opacity: 0.75;
}

/* ── Nav ──────────────────────────────────────────────── */

/* ── Portal Navigation ────── */
/* ── Nav ──────────────────────────────────────────────── */

.nav-section {
	margin-bottom: var(--s-2);
}

.nav-section + .nav-section {
	padding-top: var(--s-4);
}

.nav-section-label {
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	color: var(--color-text-subtle);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--s-2);
	padding: 0 var(--s-3);
}

/* Collapsible section (details/summary variant) */
.nav-section-toggle summary {
	list-style: none;
}

.nav-section-toggle summary::-webkit-details-marker {
	display: none;
}

.nav-section-summary {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-1) var(--s-3);
	margin-bottom: var(--s-2);
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	color: var(--color-text-subtle);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	border-radius: var(--radius-lg);
	user-select: none;
	transition:
		background var(--transition),
		color var(--transition);
}

.nav-section-summary:hover {
	background: var(--color-surface-muted);
	color: var(--color-text);
}

.nav-section-chevron {
	margin-left: auto;
	width: 10px;
	height: 10px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--transition);
	flex-shrink: 0;
}

.nav-section-toggle[open] .nav-section-chevron {
	transform: rotate(-135deg);
}

.nav-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.nav-item a {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-2) var(--s-3);
	border-radius: var(--radius-lg);
	text-decoration: none;
	font-size: var(--text-sm);
	color: var(--color-text);
	transition:
		background var(--transition),
		color var(--transition);
}

.nav-item a:hover {
	background: var(--color-surface-muted);
}

.nav-item--active a,
.nav-item a[aria-current="page"] {
	background: var(--color-brand-active);
	color: var(--color-brand-text);
	font-weight: var(--fw-medium);
	/* Left-edge indicator — inset shadow avoids layout shift */
	box-shadow: inset 3px 0 0 var(--color-brand);
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/* Nav badge — HTTP method or arbitrary label */
.nav-badge {
	margin-left: auto;
	font-size: 0.65rem;
	font-weight: var(--fw-semi);
	padding: 0.1rem var(--s-1);
	border-radius: var(--radius-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.4;
	/* default: neutral */
	background: var(--color-surface-muted);
	color: var(--color-text-subtle);
}

.nav-badge[data-method="GET"] {
	background: var(--color-get-bg);
	color: var(--color-get-fg);
}
.nav-badge[data-method="POST"] {
	background: var(--color-post-bg);
	color: var(--color-post-fg);
}
.nav-badge[data-method="PUT"] {
	background: var(--color-put-bg);
	color: var(--color-put-fg);
}
.nav-badge[data-method="DELETE"] {
	background: var(--color-delete-bg);
	color: var(--color-delete-fg);
}

/* Semantic nav badge variants — high-signal labels only.
 * Guide / Référence / Exemples / Dépannage / Client / Normatif / Sécurité stay neutral.
 * Only these labels carry visual urgency / role context: */
/* Guide / Référence / Exemples stay neutral (default .nav-badge) */
.nav-badge[data-label="v1.3"] {
	background: var(--callout-v13-bg);
	color: var(--callout-v13-fg);
}
.nav-badge[data-label="Test"] {
	background: var(--color-patch-bg);
	color: var(--color-patch-fg);
}
.nav-badge[data-label="Fiscal"] {
	background: var(--color-put-bg);
	color: var(--color-put-fg);
}
.nav-badge[data-label="Admin"] {
	background: var(--color-delete-bg);
	color: var(--color-delete-fg);
}
.nav-badge[data-label="Nouveau"] {
	background: var(--color-brand-active);
	color: var(--color-brand-text);
}
.nav-badge[data-label="Migration"] {
	background: var(--callout-warning-bg);
	color: var(--callout-warning-fg);
}

/* Nav section divider */
.nav-divider {
	border: none;
	border-top: var(--border-width) solid var(--color-border);
	margin: var(--s-3) var(--s-4);
	opacity: 0.5;
}

/* Nav zone label — non-clickable taxonomy header */
.nav-zone-label {
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-subtle);
	padding: var(--s-4) var(--s-4) var(--s-1);
	margin-top: var(--s-2);
	user-select: none;
}

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

/* ── Main Content Area ────── */
/* ── Main content ─────────────────────────────────────── */

.portail-main {
	min-height: calc(100vh - var(--header-height));
	padding: var(--s-8);
	/* clip instead of hidden: prevents horizontal overflow without creating a scroll container,
     which would break position:sticky on .portail-toc children. */
	overflow-x: clip;
}

.portail-content {
	max-width: var(--content-max-width);
}

/* Markdown typography */
.portail-content h1 {
	font-size: var(--text-2xl);
	font-weight: var(--fw-semi);
	color: var(--color-brand-text);
	line-height: var(--lh-tight);
	margin-bottom: var(--s-4);
}

.portail-content h2 {
	font-size: var(--text-xl);
	font-weight: var(--fw-semi);
	color: var(--color-brand-text);
	line-height: var(--lh-tight);
	margin-top: var(--s-10);
	margin-bottom: var(--s-3);
	padding-bottom: var(--s-2);
	border-bottom: 2px solid
		color-mix(in srgb, var(--color-brand) 15%, transparent);
}

.portail-content h3 {
	font-size: var(--text-lg);
	font-weight: var(--fw-medium);
	color: var(--color-brand-text);
	margin-top: var(--s-8);
	margin-bottom: var(--s-2);
}

.portail-content h4 {
	font-size: var(--text-base);
	font-weight: var(--fw-medium);
	color: var(--color-text);
	margin-top: var(--s-6);
	margin-bottom: var(--s-2);
}

.portail-content p {
	margin-bottom: var(--s-4);
}

/* Inline links inside prose content — :not(.btn) excludes styled call-to-action
   pills whose color comes from .btn--* rules (would otherwise lose to the
   cascade and render navy text on navy bg, invisible). */
.portail-content a:not(.btn) {
	color: var(--color-brand-text);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--transition);
}

.portail-content a:not(.btn):hover {
	color: var(--color-brand-text);
}

.portail-content ul,
.portail-content ol {
	padding-left: var(--s-6);
	margin-bottom: var(--s-4);
}

.portail-content li {
	margin-bottom: var(--s-1);
}

/* Task list — interactive checkboxes rendered from GFM `- [ ]` syntax */
.portail-content ul:has(.task-item) {
	padding-left: var(--s-2);
}

.portail-content .task-item {
	list-style: none;
	display: flex;
	align-items: baseline;
	gap: var(--s-2);
}

.task-checkbox {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	margin-top: 0.15em;
	accent-color: var(--color-brand-text);
	cursor: pointer;
}

.checklist-reset {
	display: inline-block;
	margin-top: var(--s-2);
	padding: 0;
	background: none;
	border: none;
	font-size: var(--text-sm);
	color: var(--color-text-subtle);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.checklist-reset:hover {
	color: var(--color-text-muted);
}

.portail-content code {
	font-family: var(--font-mono);
	font-size: 0.875em;
	background: color-mix(in srgb, var(--color-brand) 8%, white);
	border: var(--border-width) solid
		color-mix(in srgb, var(--color-brand) 20%, var(--color-border));
	border-radius: var(--radius-sm);
	padding: 0.125em 0.375em;
}

/* Dark mode: replace hardcoded white mix with dark surface */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .portail-content code {
		background: color-mix(
			in srgb,
			var(--color-brand) 25%,
			var(--color-surface)
		);
		border-color: color-mix(
			in srgb,
			var(--color-brand) 35%,
			var(--color-border)
		);
		color: var(--color-text);
	}
}
:root[data-theme="dark"] .portail-content code {
	background: color-mix(in srgb, var(--color-brand) 25%, var(--color-surface));
	border-color: color-mix(in srgb, var(--color-brand) 35%, var(--color-border));
	color: var(--color-text);
}

.portail-content pre {
	/* dark surface for code blocks — always dark regardless of theme for readability */
	background: var(--color-code-bg);
	border-radius: var(--radius-lg);
	padding: var(--s-4);
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	margin-bottom: var(--s-4);
	scrollbar-width: thin;
	scrollbar-color: var(--color-text-subtle) transparent;
}

/* Ultra-mobile: word-wrap instead of horizontal scroll */
@media (max-width: 480px) {
	.portail-content pre {
		white-space: pre-wrap;
		word-wrap: break-word;
		overflow-x: hidden;
	}
}

/* Code block — position context for copy button */
.portail-content pre[data-language] {
	position: relative;
}

/* Copy button */
.code-copy-btn {
	position: absolute;
	top: var(--s-2);
	right: var(--s-2);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	background: var(--color-code-copy-bg);
	border: 1px solid var(--color-code-copy-border);
	border-radius: var(--radius-md);
	color: var(--color-code-text-muted);
	cursor: pointer;
	opacity: 0;
	transition:
		opacity var(--transition),
		background var(--transition);
}

.code-copy-btn svg {
	width: 0.875rem;
	height: 0.875rem;
}

pre[data-language]:hover .code-copy-btn {
	opacity: 1;
}

.code-copy-btn:hover {
	background: var(--color-code-copy-bg-hover);
	color: var(--color-code-text);
}

.portail-content pre code {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	background: none;
	border: none;
	padding: 0;
	color: var(--color-code-text);
}

.portail-content blockquote {
	border-left: 3px solid var(--color-brand-active);
	padding: var(--s-3) var(--s-4);
	margin: var(--s-4) 0;
	background: color-mix(in srgb, var(--color-brand-active) 50%, transparent);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.portail-content blockquote p {
	margin-bottom: 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* Admonitions — NOTE / WARNING / TIP
 * Triggered by > [!NOTE], > [!WARNING], > [!TIP] in markdown.
 * Colors use existing semantic tokens; no new values added.
 */
.portail-content .callout {
	border-left-width: 4px;
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	padding: var(--s-3) var(--s-4);
	margin: var(--s-4) 0;
	/* Reset blockquote defaults */
	border-left-style: solid;
	background: transparent;
}

.portail-content .callout p {
	margin-bottom: 0;
	font-size: var(--text-sm);
}

.portail-content .callout::before {
	display: block;
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--s-1);
}

/* NOTE */
.portail-content .callout--note {
	background: var(--callout-note-bg);
	border-left-color: var(--color-get-fg);
}

.portail-content .callout--note::before {
	content: "ℹ Note";
	color: var(--color-get-fg);
}

.portail-content .callout--note p {
	color: var(--callout-note-fg);
}

/* WARNING */
.portail-content .callout--warning {
	background: var(--callout-warning-bg);
	border-left-color: var(--color-warning);
}

.portail-content .callout--warning::before {
	content: "⚠ Attention";
	color: var(--color-warning);
}

.portail-content .callout--warning p {
	color: var(--callout-warning-fg);
}

/* TIP */
.portail-content .callout--tip {
	background: var(--callout-tip-bg);
	border-left-color: var(--color-success);
}

.portail-content .callout--tip::before {
	content: "✦ Conseil";
	color: var(--color-success);
}

.portail-content .callout--tip p {
	color: var(--callout-tip-fg);
}

/* DANGER */
.portail-content .callout--danger {
	background: var(--callout-danger-bg);
	border-left-color: var(--color-delete-fg);
}

.portail-content .callout--danger::before {
	content: "✕ Attention critique";
	color: var(--color-delete-fg);
}

.portail-content .callout--danger p {
	color: var(--callout-danger-fg);
}

.portail-content table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--s-4);
	font-size: var(--text-sm);
}

.portail-content th {
	text-align: left;
	padding: var(--s-2) var(--s-3);
	background: var(--color-surface-muted);
	border-bottom: 2px solid var(--color-border);
	font-weight: var(--fw-semi);
	color: var(--color-brand-text);
}

.portail-content td {
	padding: var(--s-2) var(--s-3);
	border-bottom: var(--border-width) solid var(--color-border);
}

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

/* Table — zebra rows + hover for long tables */
.portail-content tbody tr:nth-child(even) td {
	background: var(--color-surface-muted);
}

.portail-content tbody tr:hover td {
	background: var(--color-brand-active);
}

/* Tables — horizontal scroll on mobile (no HTML change needed).
 * Only the <table> needs display:block for overflow-x:auto to work.
 * Changing tbody to block breaks the table-row/table-cell hierarchy. */
@media (max-width: 768px) {
	.portail-content table {
		display: block;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
	}

	.portail-content th,
	.portail-content td {
		padding: var(--s-1) var(--s-2);
		font-size: 0.8125rem;
		white-space: normal;
	}

	/* Code in table cells — keep on one line but smaller on mobile */
	.portail-content td code,
	.portail-content th code {
		font-size: 0.75em;
		white-space: nowrap;
	}
}

/* ── Table filter ────────────────────────────────────────
 * Injected by portail-enhancements.js above filterable tables (>8 rows).
 */
.table-filter-wrapper {
	position: relative;
}

.table-filter-input {
	display: block;
	width: 100%;
	max-width: 320px;
	margin-bottom: var(--s-2);
	padding: var(--s-1-5) var(--s-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	background: var(--color-surface);
	color: var(--color-text);
	outline: none;
}

.table-filter-input:focus {
	border-color: var(--color-brand-border);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand) 20%, transparent);
}

/* ── Inline version badge ────────────────────────────────
 * Applied by portail-enhancements.js to <code>v1.2</code> / <code>v1.3</code>.
 */
code.version-badge {
	background: var(--color-get-bg);
	color: var(--color-get-fg);
	border: none;
	font-size: 0.7rem;
	font-weight: var(--fw-semi);
	padding: 0.1em 0.45em;
	border-radius: 999px;
	letter-spacing: 0.01em;
}

/* ── Copy button — mobile touch target ──────────────────── */

/* ── Copy Button ────── */
/* ── Copy button — mobile touch target ──────────────────── */
@media (max-width: 768px) {
	.code-copy-btn {
		opacity: 1; /* Always visible on touch screens */
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.portail-content hr {
	border: none;
	border-top: var(--border-width) solid var(--color-border);
	margin: var(--s-5) 0;
}

/* Mermaid diagrams — framed container with branded palette */
.mermaid {
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--s-6);
	overflow-x: auto;
	margin-bottom: var(--s-4);
	text-align: center;
}

@media (max-width: 768px) {
	.mermaid {
		max-height: 70vh;
		overflow: auto;
		padding: var(--s-3);
		border-radius: var(--radius-md);
		/* Hint: scrollable on mobile */
		background-image: linear-gradient(
			to bottom,
			transparent calc(100% - 2rem),
			color-mix(in srgb, var(--color-surface) 80%, transparent) 100%
		);
	}
}

.mermaid svg {
	max-width: 100%;
	height: auto;
}

/* ── Error pages ──────────────────────────────────────── */

/* ── Login ────── */
/* ── Login ────────────────────────────────────────────── */

/* Full-screen navy background — same brand as hero, isolated from portal layout */
body.portail-login-page {
	margin: 0;
	min-height: 100dvh;
	background: var(--color-brand);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

/* Blob container — fills viewport, clips decorative SVGs */
.portail-login-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Decorative SVG blobs — Figma login screen design */
/* min() caps the size on large screens; hidden on mobile via media query below */
.login-bg-ring {
	position: absolute;
	top: -35%;
	right: -10%;
	width: min(52%, 480px);
	opacity: 0.9;
	pointer-events: none;
	user-select: none;
}

.login-bg-chevrons {
	position: absolute;
	bottom: -15%;
	right: -3%;
	width: min(36%, 340px);
	pointer-events: none;
	user-select: none;
}

/* Hide decorative background on mobile — login card takes full focus */
@media (max-width: 640px) {
	.portail-login-bg {
		display: none;
	}
}

/* Centered layout wrapper — sits above the blob bg */
.portail-login {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: var(--s-4);
	position: relative;
	z-index: 1;
}

/* White card */
.login-card {
	background: var(--color-surface);
	border-radius: var(--radius-xl);
	padding: var(--s-8);
	width: min(400px, calc(100vw - 2rem));
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

/* Card header — operator name + product subtitle */
.login-header {
	margin-bottom: var(--s-6);
}

.login-operator-name {
	display: block;
	font-size: var(--text-xl);
	font-weight: var(--fw-semi);
	color: var(--color-text);
	margin-bottom: var(--s-1);
}

.login-subtitle {
	display: block;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* Form — layout only, card styling is on .login-card */
.login-form {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}

/* Floating label field */
.login-field {
	position: relative;
}

.login-field input {
	width: 100%;
	box-sizing: border-box;
	padding: 1.25rem var(--s-3) var(--s-2);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--text-base);
	font-family: var(--font-sans);
	color: var(--color-text);
	background: var(--color-bg);
	outline: none;
	transition: border-color var(--transition);
}

.login-field input:focus {
	border-color: var(--color-brand);
}

/* Label floats above when input is focused or filled */
.login-field label {
	position: absolute;
	left: var(--s-3);
	top: 50%;
	transform: translateY(-50%);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	transition:
		top var(--transition),
		transform var(--transition),
		font-size var(--transition),
		color var(--transition);
	pointer-events: none;
}

.login-field input:focus ~ label,
.login-field input:not(:placeholder-shown) ~ label {
	top: 0.45rem;
	transform: none;
	font-size: var(--text-xs);
	color: var(--color-brand-text);
}

/* Submit button — full-width pill */
.login-submit {
	width: 100%;
	margin-top: var(--s-2);
	padding: var(--s-3);
	background: var(--color-brand);
	color: var(--color-on-brand);
	border: none;
	border-radius: var(--radius-full);
	font-size: var(--text-base);
	font-family: var(--font-sans);
	font-weight: var(--fw-semi);
	cursor: pointer;
	transition: background var(--transition);
}

.login-submit:hover {
	background: var(--color-brand-dark);
}

.login-submit:focus-visible {
	outline: 2px solid var(--color-on-brand);
	outline-offset: 2px;
}

/* Error banner */
.login-error {
	font-size: var(--text-sm);
	color: var(--color-error);
	background: color-mix(in srgb, var(--color-error) 8%, transparent);
	border: var(--border-width) solid
		color-mix(in srgb, var(--color-error) 20%, transparent);
	border-radius: var(--radius-md);
	padding: var(--s-2) var(--s-3);
}

/* Coming soon card body */
.portail-coming-soon-message {
	font-size: var(--text-sm);
	color: var(--color-text);
	margin-bottom: var(--s-3);
}

.portail-coming-soon-contact {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* Overlay — always fixed, hidden by default (desktop and mobile) */
.portail-mobile-overlay {
	display: none;
	position: fixed;
	inset: 0;
	top: var(--header-height);
	background: rgba(0, 0, 0, 0.2);
	z-index: var(--z-overlay);
}

.portail-mobile-overlay.is-visible {
	display: block;
}

/* ── Mobile sidebar ───────────────────────────────────── */

/* ── Mobile Sidebar ────── */
/* ── Mobile sidebar ───────────────────────────────────── */

@media (max-width: 1023px) {
	.portail-menu-toggle {
		display: flex;
	}

	.portail-header-inner {
		grid-template-columns: 1fr auto;
	}

	.portail-header-left {
		border-right: none;
	}

	.portail-layout {
		grid-template-columns: 1fr;
	}

	.portail-sidebar {
		position: fixed;
		top: var(--header-height);
		left: 0;
		/* Explicit height + overflow — needed for correct scroll on iOS Safari
       when position changes from sticky to fixed. */
		height: calc(100vh - var(--header-height));
		overflow-y: auto;
		width: var(--sidebar-width);
		z-index: var(--z-sidebar);
		transform: translateX(-100%);
		transition: transform 200ms ease;
		box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
	}

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

	/* Prevent iOS Safari from zooming in when the search input is focused.
     iOS zooms if font-size < 16px on any input element. */
	.portail-sidebar-search input {
		font-size: 1rem;
	}

	.portail-main {
		padding: var(--s-6) var(--s-4);
	}
}

/* Ultra-mobile: tighten padding further */
@media (max-width: 480px) {
	.portail-main {
		padding: var(--s-4) var(--s-3);
	}
}

/* ── Header CTA ───────────────────────────────────────── */

/* ── Header CTA ────── */
/* ── Header CTA ───────────────────────────────────────── */
/* Base style must appear BEFORE media queries — same specificity, order decides. */

.portail-header-cta {
	display: inline-flex;
	align-items: center;
	padding: var(--s-2) var(--s-5);
	background: var(--color-header-cta-bg);
	color: var(--color-header-cta-fg);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition:
		background var(--transition),
		color var(--transition);
	white-space: nowrap;
}

.portail-header-cta:hover {
	background: color-mix(in srgb, var(--color-header-cta-bg) 85%, transparent);
}

@media (max-width: 768px) {
	/* Last-updated is secondary — hide first to reclaim space */
	.portail-last-updated {
		display: none;
	}
}

@media (max-width: 640px) {
	/* CTA button hidden on small screens — accessible via sidebar or login flow */
	.portail-header-cta {
		display: none;
	}

	/* Keep version visible: useful context even on small screens */
	.portail-version {
		display: block;
		font-size: var(--text-xs);
		white-space: nowrap;
		margin-left: auto;
	}

	/* Hide logo subtitle — save header width */
	.portail-logo-sub {
		display: none;
	}

	/* Scale down headings so they don't dominate on phone screens */
	.portail-content h1 {
		font-size: 1.25rem;
	}
	.portail-content h2 {
		font-size: 1.05rem;
	}
	.portail-content h3 {
		font-size: var(--text-base);
	}
	.api-intro h1 {
		font-size: 1.375rem;
	}

	/* Allow inline code to wrap rather than overflow — only outside <pre> blocks.
   * overflow-wrap: break-word breaks only when a word won't fit (last resort).
   * break-all was too aggressive: it split every character, causing vertical stacking
   * in table cells. Exclude pre > code so code blocks stay pre-formatted. */
	.portail-content :not(pre) > code {
		overflow-wrap: break-word;
		word-break: break-word;
	}
}

@media (max-width: 480px) {
	/* Ultra-narrow: keep only toggle + logout in header */
	.portail-version {
		display: none;
	}

	.portail-header-right {
		gap: var(--s-2);
		padding: 0 var(--s-3);
	}

	/* Logout: icon only — remove border/pill, match dark toggle style */
	.portail-logout {
		padding: var(--s-2);
		border: none;
		border-radius: var(--radius-sm);
	}

	.portail-logout-icon {
		display: block;
	}

	.portail-logout-text {
		display: none;
	}
}

/* ═══════════════════════════════════════════════════════
   OpenAPI renderer
   ═══════════════════════════════════════════════════════ */

/* ── HTTP method badges ───────────────────────────────── */

/* ── HTTP Method Badges ────── */
/* ── HTTP method badges ───────────────────────────────── */
.api-method-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.125rem 0.5rem;
	border-radius: var(--radius-sm);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.4;
}
.api-method-badge--sm {
	padding: 0.0625rem 0.25rem;
	font-size: 0.625rem;
}

.api-method-badge--get {
	background: var(--method-get-bg);
	color: var(--method-get-text);
}
.api-method-badge--post {
	background: var(--method-post-bg);
	color: var(--method-post-text);
}
.api-method-badge--put {
	background: var(--method-put-bg);
	color: var(--method-put-text);
}
.api-method-badge--patch {
	background: var(--method-patch-bg);
	color: var(--method-patch-text);
}
.api-method-badge--delete {
	background: var(--method-delete-bg);
	color: var(--method-delete-text);
}

/* ── Endpoint card ────────────────────────────────────── */

/* ── Endpoint Card ────── */
/* ── Endpoint card ────────────────────────────────────── */
.openapi-renderer {
	display: flex;
	flex-direction: column;
	gap: var(--s-8);
}

.api-intro {
	padding-block: var(--s-6);
}
.api-intro h1 {
	font-size: 1.75rem;
	color: var(--color-brand-text);
	margin-bottom: var(--s-2);
}
.api-version {
	color: var(--color-text-secondary);
	margin-bottom: var(--s-4);
}
.api-description {
	color: var(--color-text-secondary);
	max-width: 72ch;
}
.api-servers ul {
	list-style: none;
	padding: 0;
}
.api-servers li {
	margin-block: var(--s-1);
}
.api-spec-download {
	display: inline-block;
	margin-top: var(--s-4);
	font-size: var(--text-sm);
	color: var(--color-text-subtle);
	text-decoration: none;
}
.api-spec-download:hover {
	color: var(--color-text);
	text-decoration: underline;
}

.tag-section {
	margin-bottom: var(--s-10);
}
.tag-section-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-brand-text);
	border-bottom: 1px solid var(--color-border);
	padding-bottom: var(--s-2);
	margin-bottom: var(--s-6);
}
.tag-section-desc {
	color: var(--color-text-secondary);
	margin-bottom: var(--s-4);
}

.endpoint-card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	overflow: hidden;
	margin-bottom: var(--s-4);
}

.endpoint-card[data-method="GET"] {
	border-left: 3px solid var(--color-get-fg);
}
.endpoint-card[data-method="POST"] {
	border-left: 3px solid var(--color-post-fg);
}
.endpoint-card[data-method="PUT"] {
	border-left: 3px solid var(--color-put-fg);
}
.endpoint-card[data-method="PATCH"] {
	border-left: 3px solid var(--color-patch-fg);
}
.endpoint-card[data-method="DELETE"] {
	border-left: 3px solid var(--color-delete-fg);
}
.endpoint-header {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-4) var(--s-5);
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}
.endpoint-path {
	font-family: var(--font-mono);
	font-size: 0.875rem;
	color: var(--color-text-primary);
	background: transparent;
	border: none;
	padding: 0;
	/* Allow shrinking in flex — prevents long paths from overflowing the header */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.permalink-btn {
	display: none;
	margin-left: auto;
	padding: var(--s-1) var(--s-2);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--color-text-subtle);
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition:
		color var(--transition),
		background var(--transition);
	line-height: 1;
}

.endpoint-card:hover .permalink-btn,
.permalink-btn:focus-visible {
	display: inline-flex;
	align-items: center;
}

.permalink-btn:hover {
	background: var(--color-surface-muted);
	color: var(--color-text);
}

.permalink-btn--copied {
	color: var(--color-success);
	border-color: var(--color-success);
}
.endpoint-summary {
	padding: var(--s-3) var(--s-5);
	margin: 0;
	font-weight: 500;
}
.endpoint-desc {
	padding: 0 var(--s-5) var(--s-3);
	color: var(--color-text-secondary);
	font-size: 0.9rem;
}
.deprecated-badge {
	font-size: 0.75rem;
	background: var(--color-status-4xx-bg);
	color: var(--color-status-4xx-fg);
	padding: 0.125rem 0.5rem;
	border-radius: var(--radius-sm);
}

/* ── Endpoint split layout (2/3 + 1/3) ───────────────── */

/* ── Endpoint Split Layout ────── */
/* ── Endpoint split layout (2/3 + 1/3) ───────────────── */

/* Remove max-width constraint on API ref pages */
.portail-content:has(.openapi-renderer) {
	max-width: none;
}

.endpoint-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

@media (min-width: 900px) {
	.endpoint-split {
		grid-template-columns: 2fr 1fr;
		align-items: start;
	}
}

.endpoint-split-main {
	/* min-width: 0 — grid tracks default to auto (content size); this lets the
   * column shrink below its content, so overflow-x: auto on <pre> can scroll. */
	min-width: 0;
}

.endpoint-split-aside {
	border-top: 1px solid var(--color-border);
	/* min-width: 0 — same reason: prevents long <pre> lines from blowing out the
   * 1fr column and overflowing the page. */
	min-width: 0;
}

@media (min-width: 900px) {
	.endpoint-split-aside {
		border-top: none;
		border-left: 1px solid var(--color-border);
		min-height: 100%;
	}
}

/* Mobile/tablet: panels stack below main content, full natural height */
@media (max-width: 900px) {
	.endpoint-split-aside {
		border-top: 1px solid var(--color-border);
		border-left: none;
	}
}

.endpoint-section {
	padding: var(--s-4) var(--s-5);
	border-top: 1px solid var(--color-border);
}
.endpoint-section h4 {
	margin: 0 0 var(--s-3);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ── Parameters table ─────────────────────────────────── */

/* ── Parameters Table ────── */
/* ── Parameters table ─────────────────────────────────── */
.params-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}
.params-table th,
.params-table td {
	padding: var(--s-2) var(--s-3);
	text-align: left;
	border-bottom: 1px solid var(--color-border);
}
.params-table th {
	background: var(--color-bg);
	font-weight: 600;
	color: var(--color-text-secondary);
}

/* Mobile: compact endpoint header and sections */
@media (max-width: 640px) {
	.endpoint-header {
		flex-wrap: wrap;
		padding: var(--s-3) var(--s-3);
		gap: var(--s-2);
	}

	/* Override desktop truncation — show the full path on mobile */
	.endpoint-path {
		white-space: normal;
		overflow: visible;
		text-overflow: unset;
		word-break: break-all;
	}

	.endpoint-summary,
	.endpoint-desc {
		padding-inline: var(--s-3);
	}

	.endpoint-section {
		padding: var(--s-3) var(--s-3);
	}
}

/* ── Schema tree ──────────────────────────────────────── */

/* ── Schema Tree ────── */
/* ── Schema tree ──────────────────────────────────────── */
.schema-tree {
	border: none;
}
.schema-tree > summary {
	cursor: pointer;
	list-style: none;
}
.schema-tree > summary::marker,
.schema-tree > summary::-webkit-details-marker {
	display: none;
}
.schema-tree > summary::before {
	content: "▶ ";
	font-size: 0.6875rem;
	color: var(--color-text-secondary);
	transition: transform 0.15s;
}
.schema-tree[open] > summary::before {
	content: "▼ ";
}

.schema-row {
	display: flex;
	align-items: baseline;
	gap: var(--s-2);
	padding: var(--s-1) 0;
	font-size: 0.875rem;
}

@media (max-width: 640px) {
	.schema-row {
		flex-direction: column;
		gap: var(--s-1);
		align-items: flex-start;
	}

	.schema-type,
	.schema-required {
		display: inline-block;
		margin-right: var(--s-2);
		margin-bottom: var(--s-1);
	}
}
.schema-key {
	font-family: var(--font-mono);
	font-weight: 600;
	color: var(--color-text-primary);
}
.schema-type {
	background: var(--color-bg);
	color: var(--color-brand-text);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	padding: 0.0625rem 0.375rem;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
}
.schema-required {
	font-size: 0.6875rem;
	background: var(--color-status-5xx-bg);
	color: var(--color-status-5xx-fg);
	padding: 0.0625rem 0.375rem;
	border-radius: var(--radius-sm);
}
.schema-desc {
	color: var(--color-text-secondary);
	font-size: 0.8125rem;
}
.schema-enum {
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
}
.schema-example {
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
}
.schema-circular {
	font-style: italic;
	color: var(--color-text-secondary);
	font-size: 0.8125rem;
}
.schema-union-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-text-secondary);
	text-transform: uppercase;
}
.schema-more {
	font-style: italic;
	color: var(--color-text-secondary);
	font-size: 0.8125rem;
}
.schema-tree-root {
	background: var(--color-bg);
	border-radius: var(--radius-md);
	padding: var(--s-3);
	margin-top: var(--s-2);
}
.content-type-label {
	margin-bottom: var(--s-2);
}
.schema-prop {
	position: relative;
}

/* ── Response badges ──────────────────────────────────── */

/* ── Response Badges ────── */
/* ── Response badges ──────────────────────────────────── */
.response-item {
	margin-bottom: var(--s-3);
}
.response-header {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin-bottom: var(--s-2);
}
.status-badge {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 0.875rem;
	padding: 0.125rem 0.5rem;
	border-radius: var(--radius-sm);
}
.status-2xx {
	background: var(--color-status-2xx-bg);
	color: var(--color-status-2xx-fg);
}
.status-4xx {
	background: var(--color-status-4xx-bg);
	color: var(--color-status-4xx-fg);
}
.status-5xx {
	background: var(--color-status-5xx-bg);
	color: var(--color-status-5xx-fg);
}
.status-other {
	background: var(--color-bg);
	color: var(--color-text-secondary);
}
.response-desc {
	color: var(--color-text-secondary);
	font-size: 0.875rem;
}

/* ── Code aside panels (two-panel aside design) ───────── */

/* ── Code Aside Panels ────── */
/* ── Code aside panels (two-panel aside design) ───────── */
.code-aside-panels {
	display: flex;
	flex-direction: column;
}

@media (min-width: 900px) {
	.code-aside-panels {
		position: sticky;
		top: calc(var(--header-height) + var(--s-4));
		/* Scroll within the sticky container if both panels are taller than viewport */
		max-height: calc(100dvh - var(--header-height) - var(--s-8));
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: var(--color-code-border) transparent;
	}
}

.code-aside-panel {
	border-bottom: 1px solid var(--color-code-border);
}
.code-aside-panel:last-child {
	border-bottom: none;
}

.code-aside-panel-header {
	padding: var(--s-3) var(--s-4);
	background: var(--color-code-surface);
	border-bottom: 1px solid var(--color-code-border);
}
.code-aside-panel-label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--color-code-text-muted);
}

/* Response example panel */
.response-example-meta {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-2) var(--s-4);
	background: var(--color-code-surface);
	border-bottom: 1px solid var(--color-code-border);
	position: relative;
}
.response-example-content-type {
	font-size: 0.8125rem;
	color: var(--color-code-text-muted);
	font-family: var(--font-mono);
	flex: 1;
}
/* Copy button inside the response meta bar — no absolute positioning */
.copy-btn--meta {
	position: static;
}

/* ── Code tabs ────────────────────────────────────────── */

/* ── Code Tabs ────── */
/* ── Code tabs ────────────────────────────────────────── */
.code-tabs {
	position: relative;
	background: #0f172a;
	border-radius: var(--radius-md);
	overflow: hidden;
}

/* Code tabs variant inside split layout aside — rounded card */
.endpoint-split-aside .code-tabs {
	background: var(--color-code-bg);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.code-tab-list {
	display: flex;
	background: var(--color-code-surface);
	border-bottom: 1px solid var(--color-code-border);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.code-tab {
	padding: var(--s-2) var(--s-4);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-code-text-muted);
	background: none;
	border: none;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition:
		color 0.15s,
		border-color 0.15s;
}
.code-tab:hover {
	color: var(--color-code-text);
}
.code-tab--active {
	color: var(--color-code-text-active);
	border-bottom-color: var(--color-brand-active);
}

/* Code tabs — smaller tap targets on mobile to keep tabs visible */
@media (max-width: 640px) {
	.code-tab {
		padding: var(--s-2) var(--s-3);
		font-size: 0.75rem;
		white-space: nowrap;
	}
}

.code-panel {
	position: relative;
}
.code-panel pre {
	margin: 0;
	padding: var(--s-4);
	overflow-x: auto;
}
.code-panel code {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	color: #e2e8f0;
	line-height: 1.6;
	white-space: pre;
}

.copy-btn {
	position: absolute;
	top: var(--s-2);
	right: var(--s-2);
	background: #1e293b;
	color: #94a3b8;
	border: 1px solid #334155;
	border-radius: var(--radius-sm);
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	cursor: pointer;
	z-index: 1;
	transition:
		color 0.15s,
		background 0.15s;
}
.copy-btn:hover {
	color: #f8fafc;
	background: #334155;
}

/* ── Try-it panel ─────────────────────────────────────── */

/* ── Try-it Panel ────── */
/* ── Try-it panel ─────────────────────────────────────── */
.try-it-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.try-it-toggle {
	font-size: 0.8125rem;
	color: var(--color-brand-text);
	background: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0.25rem 0.75rem;
	cursor: pointer;
	transition: background 0.15s;
}
.try-it-toggle:hover {
	background: var(--color-brand-active);
}

.try-it-panel {
	margin-top: var(--s-3);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}
.try-it-auth {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	flex-wrap: wrap;
}
.try-it-label {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-text-secondary);
}
.try-it-token-input {
	flex: 1;
	min-width: 0;
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	padding: var(--s-2) var(--s-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	color: var(--color-text);
}
.try-it-oauth-btn {
	padding: var(--s-2) var(--s-3);
	font-size: 0.8125rem;
	background: var(--color-brand-active);
	color: var(--color-brand-text);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	white-space: nowrap;
}
.try-it-body-group {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}
.try-it-body {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	padding: var(--s-2) var(--s-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	color: var(--color-text);
	resize: vertical;
}
.try-it-send {
	align-self: flex-start;
	padding: var(--s-2) var(--s-5);
	background: var(--color-brand);
	color: white;
	border: none;
	border-radius: var(--radius-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
}
.try-it-send:hover {
	background: var(--color-brand-dark);
}
.try-it-response {
	margin-top: var(--s-2);
}
.try-it-response-meta {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin-bottom: var(--s-2);
}
.try-it-status {
	font-family: var(--font-mono);
	font-weight: 700;
}
.try-it-duration {
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
}
.try-it-response-body {
	background: #0f172a;
	color: #e2e8f0;
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	padding: var(--s-4);
	border-radius: var(--radius-md);
	overflow-x: auto;
	max-height: 400px;
	overflow-y: auto;
	white-space: pre;
	line-height: 1.5;
}

/* ── Sidebar openapi nav ──────────────────────────────── */

/* ── Sidebar OpenAPI Nav ────── */
/* ── Sidebar openapi nav ──────────────────────────────── */

/* Collapsible tag sections */
.sidebar-tag-section {
	margin-bottom: var(--s-4);
}

/* Remove default <details> marker */
.sidebar-tag-section > summary {
	list-style: none;
}

.sidebar-tag-section > summary::-webkit-details-marker {
	display: none;
}

.sidebar-tag-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--s-1) var(--s-4);
	cursor: pointer;
	border-radius: var(--radius-sm);
	transition: background var(--transition);
	user-select: none;
}

.sidebar-tag-toggle:hover {
	background: var(--color-surface-muted);
}

.sidebar-chevron {
	width: 0.875rem;
	height: 0.875rem;
	color: var(--color-text-subtle);
	flex-shrink: 0;
	transition: transform 200ms ease; /* intentionally slower than --transition (150ms) for a smoother chevron flip */
}

.sidebar-tag-section[open] .sidebar-chevron {
	transform: rotate(180deg);
}

.sidebar-tag-name {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-secondary);
	padding: var(--s-1) var(--s-4);
	margin-bottom: var(--s-1);
}
.sidebar-op-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.sidebar-op-link {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-1) var(--s-4);
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	text-decoration: none;
	border-radius: var(--radius-sm);
	transition:
		background 0.15s,
		color 0.15s;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sidebar-op-link:hover {
	background: var(--color-brand-active);
	color: var(--color-brand-text);
}

/* ── Nav item icon ────────────────────────────────────── */

/* ── Nav Item Icon ────── */
/* ── Nav item icon ────────────────────────────────────── */

.nav-item-icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	color: var(--color-text-subtle);
}

/* SVG must fill the icon container — without explicit size the browser
   may render it at 300×150px (spec default) which breaks mobile layout. */
.nav-item-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.nav-item a,
.nav-group-summary {
	display: flex;
	align-items: center;
	gap: var(--s-2);
}

/* ── Collapsible nav group ────────────────────────────── */

/* ── Collapsible Nav Group ────── */
/* ── Collapsible nav group ────────────────────────────── */

.nav-group {
	list-style: none;
}

.nav-group summary {
	list-style: none;
}

.nav-group summary::-webkit-details-marker {
	display: none;
}

.nav-group-summary {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-2) var(--s-3);
	border-radius: var(--radius-lg);
	cursor: pointer;
	font-size: var(--text-sm);
	color: var(--color-text);
	transition: background var(--transition);
	user-select: none;
}

.nav-group-summary:hover {
	background: var(--color-surface-muted);
}

.nav-group-chevron {
	margin-left: auto;
	width: 0.625rem;
	height: 0.625rem;
	border-right: 1.5px solid var(--color-text-subtle);
	border-bottom: 1.5px solid var(--color-text-subtle);
	transform: rotate(45deg);
	transition: transform var(--transition);
	flex-shrink: 0;
}

.nav-group[open] .nav-group-chevron {
	transform: rotate(-135deg);
}

/* ── Nav group children ───────────────────────────────── */

/* ── Nav Group Children ────── */
/* ── Nav group children ───────────────────────────────── */

.nav-group-children {
	list-style: none;
	padding: var(--s-1) 0 var(--s-1) var(--s-6);
	margin: 2px 0 0;
	border-left: 2px solid var(--color-border);
	margin-left: calc(var(--s-3) + 0.5rem);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.nav-child-item {
	list-style: none;
}

.nav-child-link {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-1) var(--s-2);
	border-radius: var(--radius-md);
	text-decoration: none;
	font-size: var(--text-xs);
	color: var(--color-text-subtle);
	transition:
		background var(--transition),
		color var(--transition);
	overflow: hidden;
}

.nav-child-link:hover {
	background: var(--color-surface-muted);
	color: var(--color-text);
}

/* ── Nav method badge (in children) ──────────────────── */

/* ── Nav Method Badge ────── */
/* ── Nav method badge (in children) ──────────────────── */

.nav-method-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-family: var(--font-mono);
	font-size: 0.625rem;
	font-weight: var(--fw-semi);
	padding: 0.0625rem var(--s-1);
	border-radius: var(--radius-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.4;
	background: var(--color-surface-muted);
	color: var(--color-text-subtle);
}

.nav-method-badge[data-method="GET"] {
	background: var(--color-get-bg);
	color: var(--color-get-fg);
}
.nav-method-badge[data-method="POST"] {
	background: var(--color-post-bg);
	color: var(--color-post-fg);
}
.nav-method-badge[data-method="PUT"] {
	background: var(--color-put-bg);
	color: var(--color-put-fg);
}
.nav-method-badge[data-method="DELETE"] {
	background: var(--color-delete-bg);
	color: var(--color-delete-fg);
}
.nav-method-badge[data-method="PATCH"] {
	background: var(--color-patch-bg);
	color: var(--color-patch-fg);
}

/* ── Nav top list (no section label) ─────────────────── */

/* ── Nav Top List ────── */
/* ── Nav top list (no section label) ─────────────────── */

.nav-list--top {
	margin-bottom: var(--s-4);
	padding-bottom: var(--s-4);
	border-bottom: var(--border-width) solid var(--color-border);
}

/* ── Breadcrumb pill ──────────────────────────────────── */

/* ── Breadcrumb Pill ────── */
/* ── Breadcrumb pill ──────────────────────────────────── */

.doc-breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	background: color-mix(in srgb, var(--color-brand) 10%, transparent);
	color: var(--color-brand-text);
	padding: var(--s-1) var(--s-3);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	margin-bottom: var(--s-4);
}

.doc-breadcrumb-icon {
	display: inline-flex;
	width: 0.875rem;
	height: 0.875rem;
}

.doc-breadcrumb-icon svg {
	width: 100%;
	height: 100%;
}

/* ── Invoice validator ────────────────────────────────── */

/* ── Invoice Validator ────── */
/* ── Invoice validator ────────────────────────────────── */

.validate-page {
	max-width: var(--content-max-width);
}

.validate-intro {
	color: var(--color-text-subtle);
	font-size: var(--text-sm);
	margin-bottom: var(--s-6);
}

.validate-error {
	font-size: var(--text-sm);
	color: var(--color-error);
	background: color-mix(in srgb, var(--color-error) 8%, transparent);
	border: var(--border-width) solid
		color-mix(in srgb, var(--color-error) 20%, transparent);
	border-radius: var(--radius-md);
	padding: var(--s-3) var(--s-4);
	margin-bottom: var(--s-5);
}

.validate-form {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
	margin-bottom: var(--s-8);
}

.validate-input-group {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.validate-label {
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--color-text);
}

.validate-file-input {
	font-size: var(--text-sm);
	color: var(--color-text);
}

.validate-xml-textarea {
	width: 100%;
	padding: var(--s-3);
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	resize: vertical;
	outline: none;
	transition: border-color var(--transition);
}

.validate-xml-textarea:focus {
	border-color: var(--color-brand-border);
}

.validate-or-divider {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	color: var(--color-text-subtle);
	font-size: var(--text-sm);
}

.validate-or-divider::before,
.validate-or-divider::after {
	content: "";
	flex: 1;
	height: var(--border-width);
	background: var(--color-border);
}

.validate-samples {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	flex-wrap: wrap;
	margin-top: var(--s-1);
}

.validate-samples-label {
	font-size: var(--text-xs);
	color: var(--color-text-subtle);
}

.validate-sample-btn {
	font-size: var(--text-xs);
	color: var(--color-brand-text);
	background: none;
	border: var(--border-width) solid var(--color-brand);
	border-radius: var(--radius-full);
	padding: var(--s-1) var(--s-3);
	cursor: pointer;
	transition:
		background var(--transition),
		color var(--transition);
}

.validate-sample-btn:hover {
	background: var(--color-brand);
	color: #ffffff;
}

.validate-sample-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.validate-options {
	display: flex;
	gap: var(--s-6);
	align-items: flex-end;
	flex-wrap: wrap;
}

.validate-option-group {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.validate-select {
	padding: var(--s-2) var(--s-3);
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	font-size: var(--text-sm);
	outline: none;
	transition: border-color var(--transition);
	cursor: pointer;
}

.validate-select:focus {
	border-color: var(--color-brand-border);
}

.validate-extended-label {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	cursor: pointer;
	font-size: var(--text-sm);
	color: var(--color-text);
	padding-bottom: var(--s-2);
}

.validate-checkbox {
	width: 1rem;
	height: 1rem;
	accent-color: var(--color-brand);
	cursor: pointer;
	flex-shrink: 0;
}

.validate-option-note {
	font-size: var(--text-xs);
	color: var(--color-text-subtle);
}

.validate-submit {
	align-self: flex-start;
	padding: var(--s-2) var(--s-6);
	background: var(--color-brand);
	color: #ffffff;
	border: none;
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	cursor: pointer;
	transition: background var(--transition);
}

.validate-submit:hover {
	background: var(--color-brand-dark);
}

/* ── Validation result ────────────────────────────────── */

/* ── Validation Result ────── */
/* ── Validation result ────────────────────────────────── */

.validate-result {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	margin-top: var(--s-4);
	padding-top: var(--s-6);
	border-top: var(--border-width) solid var(--color-border);
}

.validate-result-header {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	flex-wrap: wrap;
	padding: var(--s-4);
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
}

.validate-result-badge {
	display: inline-flex;
	align-items: center;
	padding: var(--s-1) var(--s-3);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: var(--fw-semi);
	flex-shrink: 0;
}

.validate-result-badge--valid {
	background: color-mix(in srgb, var(--color-success) 12%, transparent);
	color: var(--color-success);
}

.validate-result-badge--warning {
	background: color-mix(in srgb, var(--color-warning) 12%, transparent);
	color: var(--color-warning);
}

.validate-result-badge--error {
	background: color-mix(in srgb, var(--color-error) 10%, transparent);
	color: var(--color-error);
}

.validate-result-filename {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--color-text);
	font-weight: var(--fw-medium);
}

.validate-result-meta {
	font-size: var(--text-xs);
	color: var(--color-text-subtle);
}

.validate-result-error {
	font-size: var(--text-sm);
	color: var(--color-error);
	padding: var(--s-2) var(--s-4);
}

.validate-download-btn {
	margin-left: auto;
	font-size: var(--text-xs);
	color: var(--color-brand-text);
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.validate-download-btn:hover {
	color: var(--color-brand-text);
}

/* ── Per-pass accordion ───────────────────────────────── */

/* ── Per-pass Accordion ────── */
/* ── Per-pass accordion ───────────────────────────────── */

.validate-pass {
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.validate-pass-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	cursor: pointer;
	list-style: none;
	background: var(--color-surface);
	transition: background var(--transition);
	user-select: none;
}

.validate-pass-summary::-webkit-details-marker {
	display: none;
}

.validate-pass-summary:hover {
	background: var(--color-surface-muted);
}

.validate-pass--ok > .validate-pass-summary {
	border-left: 3px solid var(--color-success);
}

.validate-pass--warning > .validate-pass-summary {
	border-left: 3px solid var(--color-warning);
}

.validate-pass--error > .validate-pass-summary {
	border-left: 3px solid var(--color-error);
}

.validate-pass-label {
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--color-text);
}

.validate-pass-count {
	font-size: var(--text-xs);
}

.validate-pass-count--ok {
	color: var(--color-success);
	font-weight: var(--fw-semi);
}

.validate-pass-count--warning {
	color: var(--color-warning);
}

.validate-pass-count--error {
	color: var(--color-error);
}

.validate-pass-empty {
	font-size: var(--text-sm);
	color: var(--color-success);
	padding: var(--s-4);
}

.validate-pass-saxon-error {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-error);
	background: color-mix(in srgb, var(--color-error) 5%, transparent);
	padding: var(--s-4);
	margin: 0;
	white-space: pre-wrap;
	word-break: break-all;
}

/* ── SVRL messages ────────────────────────────────────── */

/* ── SVRL Messages ────── */
/* ── SVRL messages ────────────────────────────────────── */

.validate-msg {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--s-2);
	align-items: baseline;
	padding: var(--s-2) var(--s-4);
	font-size: var(--text-sm);
	border-top: var(--border-width) solid var(--color-border);
}

.validate-pass > .validate-msg:first-child,
details.validate-pass .validate-msg:first-of-type {
	border-top: none;
}

.validate-msg--error {
	background: color-mix(in srgb, var(--color-error) 4%, transparent);
	border-left: 3px solid var(--color-error);
}

.validate-msg--warning {
	background: color-mix(in srgb, var(--color-warning) 6%, transparent);
	border-left: 3px solid var(--color-warning);
}

.validate-msg-id {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-text-subtle);
	white-space: nowrap;
}

.validate-msg-text {
	color: var(--color-text);
}

.validate-msg-location {
	grid-column: 1 / -1;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-text-subtle);
	word-break: break-all;
}

/* ── Validator (validator-* components) ──────────────────── */

/* ── Validator Components ────── */
/* ── Validator (validator-* components) ──────────────────── */

.validator-intro {
	color: var(--color-text-subtle);
	font-size: var(--text-sm);
	margin-bottom: var(--s-4);
}

.validator-unavailable {
	background: color-mix(in srgb, var(--color-warning) 10%, transparent);
	border: var(--border-width) solid
		color-mix(in srgb, var(--color-warning) 30%, transparent);
	border-radius: var(--radius-md);
	padding: var(--s-4);
	font-size: var(--text-sm);
	color: var(--color-text);
	margin-bottom: var(--s-4);
}

.validator-error {
	font-size: var(--text-sm);
	color: var(--color-error);
	background: color-mix(in srgb, var(--color-error) 8%, transparent);
	border: var(--border-width) solid
		color-mix(in srgb, var(--color-error) 20%, transparent);
	border-radius: var(--radius-md);
	padding: var(--s-3) var(--s-4);
	margin-bottom: var(--s-4);
}

.validator-form {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	margin-bottom: var(--s-8);
}

/* ── Tab toggle ───────────────────────────────────── */

/* ── Tab Toggle ────── */
/* ── Tab toggle ───────────────────────────────────── */

.validator-input-toggle {
	display: flex;
	gap: var(--s-2);
	flex-wrap: wrap;
}

.toggle-btn {
	padding: var(--s-1) var(--s-4);
	font-size: var(--text-sm);
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-full);
	color: var(--color-text-subtle);
	cursor: pointer;
	transition:
		background var(--transition),
		border-color var(--transition),
		color var(--transition);
}

.toggle-btn:hover {
	background: var(--color-surface);
	color: var(--color-text);
}

.toggle-btn--active {
	background: var(--color-brand);
	border-color: var(--color-brand);
	color: #ffffff;
}

.toggle-btn--active:hover {
	background: var(--color-brand-dark);
	border-color: var(--color-brand-dark);
	color: #ffffff;
}

/* ── Sections ────────────────────────────────────── */

/* ── Sections ────── */
/* ── Sections ────────────────────────────────────── */

.validator-section {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

/* ── Dropzone ────────────────────────────────────── */

/* ── Dropzone ────── */
/* ── Dropzone ────────────────────────────────────── */

.validator-dropzone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-height: 7rem;
	padding: var(--s-4);
	background: var(--color-surface-muted);
	border: 2px dashed var(--color-border);
	border-radius: var(--radius-lg);
	text-align: center;
	cursor: pointer;
	transition:
		border-color var(--transition),
		background var(--transition);
}

.validator-dropzone:hover,
.validator-dropzone:focus-within,
.validator-dropzone--drag {
	border-color: var(--color-brand-border);
	background: color-mix(
		in srgb,
		var(--color-brand) 4%,
		var(--color-surface-muted)
	);
}

.validator-dropzone input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.validator-dropzone label {
	font-size: var(--text-sm);
	color: var(--color-text-subtle);
	pointer-events: none;
}

.validator-dropzone .link {
	color: var(--color-brand-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.validator-filename {
	font-size: var(--text-xs);
	color: var(--color-text-subtle);
	font-family: var(--font-mono);
}

/* ── Paste textarea ──────────────────────────────── */

/* ── Paste Textarea ────── */
/* ── Paste textarea ──────────────────────────────── */

.validator-textarea {
	width: 100%;
	padding: var(--s-3);
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	resize: vertical;
	outline: none;
	transition: border-color var(--transition);
}

.validator-textarea:focus {
	border-color: var(--color-brand-border);
}

/* ── SIREN / SIRET section ───────────────────────── */

/* ── SIREN / SIRET ────── */
/* ── SIREN / SIRET section ───────────────────────── */

.siren-form-row {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	flex-wrap: wrap;
	font-size: var(--text-sm);
}

.siren-form-row label {
	color: var(--color-text);
	font-weight: var(--fw-medium);
}

.siren-form-row [role="group"] {
	display: flex;
	gap: var(--s-4);
}

.siren-input {
	padding: var(--s-2) var(--s-3);
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	width: 12rem;
	outline: none;
	transition: border-color var(--transition);
}

.siren-input:focus {
	border-color: var(--color-brand-border);
}

/* ── Samples dropdown ────────────────────────────── */

/* ── Samples Dropdown ────── */
/* ── Samples dropdown ────────────────────────────── */

.validator-samples {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	flex-wrap: wrap;
	font-size: var(--text-sm);
}

.validator-samples label {
	color: var(--color-text-subtle);
	white-space: nowrap;
}

.validator-samples select {
	padding: var(--s-1) var(--s-3);
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	font-size: var(--text-sm);
	outline: none;
	cursor: pointer;
	transition: border-color var(--transition);
}

.validator-samples select:focus {
	border-color: var(--color-brand-border);
}

/* ── Options row ────────────────────────────────── */

/* ── Options Row ────── */
/* ── Options row ────────────────────────────────── */

.validator-options {
	display: flex;
	gap: var(--s-6);
	align-items: flex-end;
	flex-wrap: wrap;
}

.validator-option {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	font-size: var(--text-sm);
}

.validator-option label {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	cursor: pointer;
	color: var(--color-text);
	padding-bottom: var(--s-2);
}

.validator-option select {
	padding: var(--s-2) var(--s-3);
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	font-size: var(--text-sm);
	outline: none;
	cursor: pointer;
	transition: border-color var(--transition);
}

.validator-option select:focus {
	border-color: var(--color-brand-border);
}

.validator-option input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	accent-color: var(--color-brand);
	cursor: pointer;
	flex-shrink: 0;
}

.validator-option-note {
	font-size: var(--text-xs);
	color: var(--color-text-subtle);
}

/* ── Submit button ──────────────────────────────── */

/* ── Submit Button ────── */
/* ── Submit button ──────────────────────────────── */

.validator-submit {
	align-self: flex-start;
	padding: var(--s-2) var(--s-6);
	background: var(--color-brand);
	color: #ffffff;
	border: none;
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	cursor: pointer;
	transition: background var(--transition);
}

.validator-submit:hover {
	background: var(--color-brand-dark);
}

/* ── SIREN result ───────────────────────────────── */

/* ── SIREN Result ────── */
/* ── SIREN result ───────────────────────────────── */

.siren-result {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	border: var(--border-width) solid transparent;
	margin-top: var(--s-4);
}

.siren-result--ok {
	background: color-mix(in srgb, var(--color-success) 10%, transparent);
	border-color: color-mix(in srgb, var(--color-success) 25%, transparent);
	color: var(--color-text);
}

.siren-result--fail {
	background: color-mix(in srgb, var(--color-error) 8%, transparent);
	border-color: color-mix(in srgb, var(--color-error) 20%, transparent);
	color: var(--color-text);
}

.siren-result-icon {
	font-size: 1.1rem;
	flex-shrink: 0;
}

.siren-result--ok .siren-result-icon {
	color: var(--color-success);
}

.siren-result--fail .siren-result-icon {
	color: var(--color-error);
}

/* ── Validation result ──────────────────────────── */

/* ── Validation Result 2 ────── */
/* ── Validation result ──────────────────────────── */

.validator-result {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	margin-top: var(--s-6);
	padding-top: var(--s-6);
	border-top: var(--border-width) solid var(--color-border);
}

.validator-result-header {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	flex-wrap: wrap;
	padding: var(--s-4);
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-left-width: 4px;
	border-radius: var(--radius-lg);
}

.validator-result-header--ok {
	border-left-color: var(--color-success);
}

.validator-result-header--warning {
	border-left-color: var(--color-warning);
}

.validator-result-header--error {
	border-left-color: var(--color-error);
}

.validator-result-icon {
	font-size: 1.25rem;
	flex-shrink: 0;
}

.validator-result-header--ok .validator-result-icon {
	color: var(--color-success);
}

.validator-result-header--warning .validator-result-icon {
	color: var(--color-warning);
}

.validator-result-header--error .validator-result-icon {
	color: var(--color-error);
}

.validator-result-summary {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	flex: 1;
	min-width: 0;
}

.validator-result-summary strong {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	word-break: break-all;
}

.validator-result-meta {
	font-size: var(--text-xs);
	color: var(--color-text-subtle);
}

.validator-result-status {
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
}

.validator-result-header--ok .validator-result-status {
	color: var(--color-success);
}

.validator-result-header--warning .validator-result-status {
	color: var(--color-warning);
}

.validator-result-header--error .validator-result-status {
	color: var(--color-error);
}

.validator-download {
	margin-left: auto;
	font-size: var(--text-xs);
	color: var(--color-brand-text);
	background: none;
	border: var(--border-width) solid var(--color-brand-border);
	border-radius: var(--radius-full);
	padding: var(--s-1) var(--s-3);
	cursor: pointer;
	white-space: nowrap;
	transition:
		background var(--transition),
		color var(--transition);
}

.validator-download:hover {
	background: var(--color-brand);
	color: #ffffff;
	border-color: var(--color-brand);
}

.validator-well-formedness-error {
	padding: var(--s-3) var(--s-4);
	background: color-mix(in srgb, var(--color-error) 6%, transparent);
	border: var(--border-width) solid
		color-mix(in srgb, var(--color-error) 20%, transparent);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	color: var(--color-text);
}

/* ── Per-pass accordion ─────────────────────────── */

/* ── Per-pass Accordion 2 ────── */
/* ── Per-pass accordion ─────────────────────────── */

.validator-pass {
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.validator-pass-summary {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	cursor: pointer;
	list-style: none;
	background: var(--color-surface);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	transition: background var(--transition);
	user-select: none;
}

.validator-pass-summary::-webkit-details-marker {
	display: none;
}

.validator-pass-summary:hover {
	background: var(--color-surface-muted);
}

.validator-pass--ok > .validator-pass-summary {
	border-left: 3px solid var(--color-success);
}

.validator-pass--warn > .validator-pass-summary {
	border-left: 3px solid var(--color-warning);
}

.validator-pass--fail > .validator-pass-summary {
	border-left: 3px solid var(--color-error);
}

.validator-pass--saxon-error > .validator-pass-summary {
	border-left: 3px solid var(--color-warning);
}

.validator-pass-saxon {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-error);
	background: color-mix(in srgb, var(--color-error) 5%, transparent);
	padding: var(--s-4);
	margin: 0;
	white-space: pre-wrap;
	word-break: break-all;
}

/* ── SVRL messages ──────────────────────────────── */

/* ── SVRL Messages 2 ────── */
/* ── SVRL messages ──────────────────────────────── */

.validator-msg {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--s-2) var(--s-3);
	align-items: baseline;
	padding: var(--s-2) var(--s-4);
	font-size: var(--text-sm);
	border-top: var(--border-width) solid var(--color-border);
}

.validator-msg--error {
	background: color-mix(in srgb, var(--color-error) 4%, transparent);
	border-left: 3px solid var(--color-error);
}

.validator-msg--warning {
	background: color-mix(in srgb, var(--color-warning) 6%, transparent);
	border-left: 3px solid var(--color-warning);
}

.validator-msg-id {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-text-subtle);
	white-space: nowrap;
}

.validator-msg-text {
	color: var(--color-text);
}

.validator-msg-loc {
	grid-column: 1 / -1;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-text-subtle);
	word-break: break-all;
}

.validator-msg-hint {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	padding: var(--s-2) var(--s-3);
	margin-top: var(--s-1);
	background: color-mix(
		in srgb,
		var(--color-brand) 5%,
		var(--color-surface-muted)
	);
	border-left: 3px solid var(--color-brand-border);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-size: var(--text-xs);
}

.validator-msg-human {
	color: var(--color-text);
	font-style: italic;
}

.validator-msg-fix {
	font-family: var(--font-mono);
	color: var(--color-text-subtle);
	font-size: var(--text-xs);
	white-space: pre-wrap;
	word-break: break-word;
}

/* ── Static pages (FAQ, Changelog, Terms) ─────────────── */

/* ── Static Pages ────── */
/* ── Static pages (FAQ, Changelog, Terms) ─────────────── */

.static-page {
	max-width: 52rem;
}

.static-page-header {
	margin-bottom: var(--s-8);
}

.static-page-header h1 {
	margin-bottom: var(--s-3);
}

.static-page-intro {
	color: var(--color-text-subtle);
	font-size: var(--text-base);
}

/* ── FAQ ──────────────────────────────────────────────── */

/* ── FAQ ────── */
/* ── FAQ ──────────────────────────────────────────────── */

.faq {
	display: flex;
	flex-direction: column;
	gap: var(--s-8);
}

.faq-category h2 {
	font-size: var(--text-base);
	font-weight: var(--fw-semi);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding-bottom: var(--s-2);
	border-bottom: var(--border-width) solid var(--color-border);
	margin-bottom: var(--s-3);
}

.faq-items {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.faq-item {
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.faq-item summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--s-4);
	font-weight: var(--fw-medium);
	cursor: pointer;
	user-select: none;
	list-style: none;
	transition: background var(--transition);
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary::after {
	content: "+";
	flex-shrink: 0;
	font-size: 1.25rem;
	color: var(--color-text-muted);
	transition: transform var(--transition);
	margin-left: var(--s-3);
}

.faq-item[open] summary::after {
	transform: rotate(45deg);
}

.faq-item summary:hover {
	background: var(--color-surface-muted);
}

.faq-item[open] summary {
	border-bottom: var(--border-width) solid var(--color-border);
}

.faq-answer {
	padding: var(--s-4);
	color: var(--color-text-subtle);
	line-height: var(--lh-relaxed, 1.7);
}

.faq-answer ul {
	margin-top: var(--s-2);
	padding-left: var(--s-4);
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.faq-answer li {
	list-style: disc;
}

.faq-answer p + p {
	margin-top: var(--s-2);
}

.faq-cta {
	margin-top: var(--s-12);
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--s-6);
}

.faq-cta h3 {
	margin-bottom: var(--s-2);
}

.faq-cta p {
	color: var(--color-text-subtle);
	margin-bottom: var(--s-4);
}

.faq-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
}

.faq-cta-btn {
	display: inline-flex;
	align-items: center;
	padding: var(--s-2) var(--s-5);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	text-decoration: none;
	transition:
		background var(--transition),
		color var(--transition),
		border-color var(--transition);
}

.faq-cta-btn--primary {
	background: var(--color-brand);
	color: var(--color-on-brand);
}

.faq-cta-btn--primary:hover {
	opacity: 0.9;
}

.faq-cta-btn--secondary {
	border: var(--border-width) solid var(--color-border);
	color: var(--color-text);
}

.faq-cta-btn--secondary:hover {
	border-color: var(--color-brand-border);
	color: var(--color-brand-text);
}

/* ── Changelog ────────────────────────────────────────── */

/* ── Changelog ────── */
/* ── Changelog ────────────────────────────────────────── */

.changelog-banner {
	display: flex;
	align-items: flex-start;
	gap: var(--s-4);
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-brand);
	border-radius: var(--radius-lg);
	padding: var(--s-5);
	margin-bottom: var(--s-8);
}

.changelog-banner-icon {
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	background: var(--color-brand);
	color: var(--color-surface);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	font-weight: var(--fw-bold, 700);
}

.changelog-banner-title {
	font-size: var(--text-lg, 1.125rem);
	font-weight: var(--fw-semi);
	margin-bottom: var(--s-1);
	display: flex;
	align-items: center;
	gap: var(--s-2);
}

.changelog-banner-meta {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--s-1);
}

.changelog-banner-desc {
	font-size: var(--text-sm);
	color: var(--color-text-subtle);
}

.changelog-badge {
	display: inline-block;
	padding: 1px var(--s-2);
	border-radius: var(--radius-sm, 4px);
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.changelog-badge--stable {
	background: var(--color-brand);
	color: var(--color-surface);
}
.changelog-badge--release {
	background: var(--color-surface-muted);
	color: var(--color-text-muted);
	border: var(--border-width) solid var(--color-border);
}
.changelog-badge--upcoming {
	background: var(--color-surface-muted);
	color: var(--color-text);
	border: var(--border-width) solid var(--color-border);
}

.changelog-timeline {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--s-8);
}

.changelog-entry {
	display: flex;
	gap: var(--s-4);
}

.changelog-entry-marker {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
}

.changelog-entry-dot {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--color-brand);
	color: var(--color-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	flex-shrink: 0;
}

.changelog-entry-line {
	width: 2px;
	flex: 1;
	min-height: var(--s-6);
	background: var(--color-border);
	margin: var(--s-2) 0;
}

.changelog-entry-content {
	flex: 1;
	padding-bottom: var(--s-8);
}

.changelog-entry-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-3);
	margin-bottom: var(--s-3);
}

.changelog-entry-title {
	display: flex;
	align-items: center;
	gap: var(--s-2);
}

.changelog-entry-title h3 {
	font-size: var(--text-lg, 1.125rem);
	font-weight: var(--fw-semi);
}

.changelog-entry-date {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	white-space: nowrap;
}

.changelog-entry-content h4 {
	font-weight: var(--fw-medium);
	margin-bottom: var(--s-3);
	color: var(--color-text-subtle);
}

.changelog-items {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding: 0;
	list-style: none;
}

.changelog-item {
	display: flex;
	align-items: baseline;
	gap: var(--s-2);
	font-size: var(--text-sm);
	color: var(--color-text);
}

.changelog-item-label {
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	padding: 1px var(--s-2);
	border-radius: var(--radius-sm, 4px);
	white-space: nowrap;
	flex-shrink: 0;
}

.changelog-item--feature .changelog-item-label {
	background: var(--color-status-2xx-bg);
	color: var(--color-status-2xx-fg);
}
.changelog-item--improvement .changelog-item-label {
	background: var(--color-get-bg);
	color: var(--color-get-fg);
}
.changelog-item--fix .changelog-item-label {
	background: var(--color-status-5xx-bg);
	color: var(--color-status-5xx-fg);
}
.changelog-item--security .changelog-item-label {
	background: var(--color-patch-bg);
	color: var(--color-patch-fg);
}

.changelog-roadmap {
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--s-6);
	margin-bottom: var(--s-6);
}

.changelog-roadmap h2 {
	margin-bottom: var(--s-2);
}

.changelog-roadmap > p {
	color: var(--color-text-subtle);
	margin-bottom: var(--s-4);
	font-size: var(--text-sm);
}

.changelog-roadmap-item {
	display: flex;
	gap: var(--s-3);
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--s-4);
}

.changelog-roadmap-item h3 {
	font-weight: var(--fw-medium);
	margin-bottom: var(--s-2);
	font-size: var(--text-sm);
}

.changelog-roadmap-item ul {
	padding-left: var(--s-3);
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	font-size: var(--text-sm);
	color: var(--color-text-subtle);
}

.changelog-roadmap-item li {
	list-style: disc;
}

.changelog-semver {
	background: var(--color-text);
	color: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--s-6);
}

.changelog-semver h3 {
	font-weight: var(--fw-semi);
	margin-bottom: var(--s-2);
	color: var(--color-surface);
}

.changelog-semver > p:first-of-type {
	font-size: var(--text-sm);
	color: var(--color-surface-muted);
	margin-bottom: var(--s-3);
}

.changelog-semver ul {
	padding-left: var(--s-4);
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	font-size: var(--text-sm);
	color: var(--color-surface-muted);
	margin-bottom: var(--s-4);
}

.changelog-semver li {
	list-style: disc;
}

.changelog-semver-note {
	background: color-mix(in srgb, var(--color-surface) 10%, transparent);
	border-radius: var(--radius-md);
	padding: var(--s-4);
	font-size: var(--text-sm);
	color: var(--color-surface-muted);
}

/* ── Terms ────────────────────────────────────────────── */

/* ── Terms ────── */
/* ── Terms ────────────────────────────────────────────── */

.terms {
	display: flex;
	flex-direction: column;
	gap: var(--s-6);
}

.terms-intro {
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--s-5);
	font-size: var(--text-sm);
	color: var(--color-text-subtle);
}

.terms-section h2 {
	font-size: var(--text-lg, 1.125rem);
	font-weight: var(--fw-semi);
	margin-bottom: var(--s-3);
}

.terms-section h3 {
	font-weight: var(--fw-medium);
	margin-bottom: var(--s-2);
	margin-top: var(--s-4);
	font-size: var(--text-sm);
}

.terms-section h3:first-child {
	margin-top: 0;
}

.terms-card {
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--s-5);
	font-size: var(--text-sm);
	color: var(--color-text-subtle);
	line-height: var(--lh-relaxed, 1.7);
}

.terms-card p + p {
	margin-top: var(--s-3);
}

.terms-card ul {
	padding-left: var(--s-4);
	margin-top: var(--s-2);
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.terms-card li {
	list-style: disc;
}

.terms-card--table {
	padding: 0;
	overflow: hidden;
}

.terms-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}

.terms-table thead {
	background: var(--color-surface-muted);
}

.terms-table th {
	text-align: left;
	padding: var(--s-3) var(--s-5);
	font-weight: var(--fw-semi);
	color: var(--color-text);
	border-bottom: var(--border-width) solid var(--color-border);
}

.terms-table td {
	padding: var(--s-3) var(--s-5);
	color: var(--color-text-subtle);
	border-bottom: var(--border-width) solid var(--color-border);
}

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

.terms-table-note {
	padding: var(--s-3) var(--s-5);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	border-top: var(--border-width) solid var(--color-border);
}

.terms-contact {
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--s-6);
}

.terms-contact h2 {
	font-size: var(--text-lg, 1.125rem);
	font-weight: var(--fw-semi);
	margin-bottom: var(--s-2);
}

.terms-contact > p {
	font-size: var(--text-sm);
	color: var(--color-text-subtle);
	margin-bottom: var(--s-4);
}

.terms-contact-list {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--s-2) var(--s-5);
	font-size: var(--text-sm);
	margin-bottom: var(--s-4);
}

.terms-contact-list dt {
	font-weight: var(--fw-medium);
	color: var(--color-text);
}

.terms-contact-list dd {
	color: var(--color-text-subtle);
}

.terms-contact-note {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--s-3);
}

/* ── Home page ────────────────────────────────────────── */

/* ── Home Page ────── */
/* ── Home page ────────────────────────────────────────── */

/* Hero */
.home-hero {
	background:
		radial-gradient(
			ellipse at 70% -20%,
			rgba(99, 130, 255, 0.18) 0%,
			transparent 55%
		),
		radial-gradient(
			ellipse at 0% 100%,
			rgba(30, 58, 138, 0.4) 0%,
			transparent 50%
		),
		var(--color-brand);
	border-radius: var(--radius-xl);
	padding: var(--s-10);
	margin-bottom: var(--s-10);
	position: relative;
	overflow: hidden;
}

/* Subtle dot-grid overlay for depth — z-index: 0 keeps it behind flex children */
.home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(
		circle,
		rgba(255, 255, 255, 0.06) 1px,
		transparent 1px
	);
	background-size: 28px 28px;
	pointer-events: none;
	z-index: 0;
}

/* Hero content — positioned above ::before */
.home-hero-content {
	position: relative;
	z-index: 1;
	max-width: 720px;
}

.home-hero-eyebrow {
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.85);
	background: rgba(255, 255, 255, 0.12);
	padding: var(--s-1) var(--s-3);
	border-radius: var(--radius-full);
	margin-bottom: var(--s-4);
}

.home-hero h1 {
	font-size: var(--text-4xl); /* DS2 heading-1 36px */
	font-weight: var(--fw-bold);
	color: #fff;
	margin-bottom: var(--s-4);
	line-height: var(--lh-tight);
}

.home-hero-desc {
	font-size: var(--text-base);
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: var(--s-5);
	line-height: 1.7;
}

.home-hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}

.home-badge {
	display: inline-flex;
	align-items: center;
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	color: rgba(255, 255, 255, 0.75);
	background: rgba(255, 255, 255, 0.1);
	border: var(--border-width) solid rgba(255, 255, 255, 0.15);
	border-radius: var(--radius-full);
	padding: var(--s-1) var(--s-3);
}

/* Sections */
.home-section {
	margin-bottom: var(--s-12);
}

.home-section-title {
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: var(--s-4);
}

/* Use cases */
.home-usecases {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-4);
}

.home-usecase {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	padding: var(--s-5);
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
}

.home-usecase-tag {
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	color: var(--color-brand-text);
	background: var(--color-brand-active);
	border-radius: var(--radius-sm);
	padding: 2px var(--s-2);
	align-self: flex-start;
}

.home-usecase p {
	font-size: var(--text-sm);
	color: var(--color-text-subtle);
	line-height: 1.6;
	flex: 1;
	margin: 0;
}

.home-usecase a {
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--color-brand-text);
	text-decoration: none;
	align-self: flex-start;
}

.home-usecase a:hover {
	text-decoration: underline;
}

/* Versions */
.home-versions {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--s-4);
}

.home-version {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	padding: var(--s-5);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
}

.home-version--stable {
	background: var(--color-surface);
}

.home-version--upcoming {
	background: var(--color-surface-muted);
}

.home-version-header {
	display: flex;
	align-items: center;
	gap: var(--s-3);
}

.home-version-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--s-1) var(--s-2);
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	font-family: var(--font-mono);
	border-radius: var(--radius-sm);
	white-space: nowrap;
}

.home-version--stable .home-version-badge {
	background: color-mix(in srgb, var(--color-success) 12%, transparent);
	color: var(--color-success);
}

.home-version--upcoming .home-version-badge {
	background: color-mix(in srgb, var(--color-brand) 10%, transparent);
	color: var(--color-brand-text);
}

.home-version-label {
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--fw-semi);
	color: var(--color-text);
}

.home-version-date {
	display: block;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.home-version-desc {
	font-size: var(--text-sm);
	color: var(--color-text-subtle);
	line-height: 1.6;
	margin: 0;
}

.home-version-items {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.home-version-items li {
	font-size: var(--text-sm);
	color: var(--color-text-subtle);
	padding-left: var(--s-4);
	position: relative;
}

.home-version-items li::before {
	content: "→";
	position: absolute;
	left: 0;
	color: var(--color-text-muted);
}

.home-version-link {
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--color-brand-text);
	text-decoration: none;
	align-self: flex-start;
	margin-top: auto;
}

.home-version-link:hover {
	text-decoration: underline;
}

/* Support strip */
.home-support {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-4);
	padding: var(--s-6);
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	margin-bottom: var(--s-8);
}

.home-support-item {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
}

.home-support-icon {
	flex-shrink: 0;
	color: var(--color-text-muted);
	margin-top: 2px;
}

.home-support-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.home-support-item > div {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.home-support-item strong {
	font-size: var(--text-sm);
	font-weight: var(--fw-semi);
	color: var(--color-text);
}

.home-support-item p {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin: 0;
}

.home-support-item a {
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--color-brand-text);
	text-decoration: none;
}

.home-support-item a:hover {
	text-decoration: underline;
}

/* Responsive — home */
@media (max-width: 1023px) {
	/* Tablet: use-cases 3col → 2col (cards and versions already 2col, fine) */
	.home-usecases {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.home-usecases,
	.home-versions,
	.home-support {
		grid-template-columns: 1fr;
	}

	.home-support,
	.home-section-panel {
		padding: var(--s-4);
	}
}

/* ── Code language label ─────────────────────────────────────── */

/* ── Code Language Label ────── */
/* ── Code language label ─────────────────────────────────────── */

.portail-content pre[data-language]::before {
	content: attr(data-language);
	display: block;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	padding: var(--s-2) var(--s-4) 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.7;
}

/* "text" is a meaningless fallback — hide the label */
.portail-content pre[data-language="text"]::before {
	display: none;
}

/* ── Heading anchors ─────────────────────────────────────────── */

/* ── Heading Anchors ────── */
/* ── Heading anchors ─────────────────────────────────────────── */

.portail-content h2,
.portail-content h3 {
	position: relative;
}

.heading-anchor {
	display: inline-block;
	margin-left: var(--s-2);
	color: var(--color-text-muted);
	font-weight: var(--fw-normal);
	font-size: 0.9em;
	text-decoration: none;
	opacity: 0;
	transition: opacity 0.15s;
	user-select: none;
}

.portail-content h2:hover .heading-anchor,
.portail-content h3:hover .heading-anchor,
.heading-anchor:focus {
	opacity: 1;
}

/* ── TOC — "Sur cette page" ──────────────────────────────────── */

/* ── TOC ────── */
/* ── TOC — "Sur cette page" ──────────────────────────────────── */

.portail-toc {
	display: none;
}

@media (min-width: 1280px) {
	.portail-main:has(.portail-toc) {
		display: grid;
		grid-template-columns: 1fr 220px;
		align-items: start;
	}

	.portail-toc {
		display: block;
		position: sticky;
		top: calc(var(--header-height) + var(--s-6));
		max-height: calc(100vh - var(--header-height) - var(--s-8));
		overflow-y: auto;
		padding: var(--s-8) var(--s-4) var(--s-6) var(--s-6);
		border-left: var(--border-width) solid var(--color-border);
	}
}

.portail-toc-title {
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	margin: 0 0 var(--s-3);
}

.portail-toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.portail-toc-list a {
	display: block;
	font-size: var(--text-sm);
	color: var(--color-text-subtle);
	text-decoration: none;
	padding: var(--s-1) 0;
	line-height: var(--lh-tight);
	transition: color 0.15s;
}

.portail-toc-list a:hover,
.portail-toc-list a.is-active {
	color: var(--color-brand-text);
}

/* ── Prev/Next navigation ────────────────────────────────────── */

/* ── Prev/Next Navigation ────── */
/* ── Prev/Next navigation ────────────────────────────────────── */

.portail-prev-next {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-4);
	margin-top: var(--s-10);
	padding-top: var(--s-6);
	border-top: var(--border-width) solid var(--color-border);
}

.portail-prev-next-link {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	padding: var(--s-4);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	text-decoration: none;
	background: var(--color-surface);
	transition:
		border-color 0.15s,
		background 0.15s;
}

.portail-prev-next-link:hover {
	border-color: var(--color-brand-border);
	background: var(--color-brand-active);
}

.portail-prev-next-link--next {
	text-align: right;
}

.portail-prev-next-label {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	font-weight: var(--fw-medium);
}

.portail-prev-next-title {
	font-size: var(--text-sm);
	font-weight: var(--fw-semi);
	color: var(--color-text);
}

@media (max-width: 640px) {
	.portail-prev-next {
		grid-template-columns: 1fr;
	}

	.portail-prev-next-link--next {
		text-align: left;
	}
}

/* ── Feedback widget ─────────────────────────────────────────── */

/* ── Feedback Widget ────── */
/* ── Feedback widget ─────────────────────────────────────────── */

.feedback-widget {
	margin: var(--s-8) 0 var(--s-6);
	padding: var(--s-4) var(--s-6);
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
}

.feedback-question {
	font-size: var(--text-sm);
	color: var(--color-text-subtle);
	margin: 0 0 var(--s-3);
}

.feedback-optional {
	color: var(--color-text-muted);
	font-weight: var(--fw-normal);
}

.feedback-votes {
	display: flex;
	gap: var(--s-2);
}

.feedback-vote {
	padding: var(--s-2) var(--s-4);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	font-size: var(--text-sm);
	cursor: pointer;
	transition:
		border-color 0.15s,
		background 0.15s;
}

.feedback-vote:hover {
	border-color: var(--color-brand-border);
	background: var(--color-brand-active);
}

.feedback-comment-form {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.feedback-textarea {
	width: 100%;
	padding: var(--s-2) var(--s-3);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-text);
	background: var(--color-surface);
	resize: vertical;
	box-sizing: border-box;
}

.feedback-textarea:focus {
	outline: 2px solid var(--color-brand);
	outline-offset: 1px;
	border-color: transparent;
}

.feedback-actions {
	display: flex;
	align-items: center;
	gap: var(--s-3);
}

.feedback-submit {
	padding: var(--s-2) var(--s-4);
	background: var(--color-brand);
	color: #fff;
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	cursor: pointer;
	transition: background 0.15s;
}

.feedback-submit:hover {
	background: var(--color-brand-dark);
}

.feedback-skip {
	background: none;
	border: none;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	cursor: pointer;
	text-decoration: underline;
	padding: 0;
}

.feedback-skip:hover {
	color: var(--color-text-subtle);
}

.feedback-thanks {
	font-size: var(--text-sm);
	color: var(--color-success);
	margin: 0;
}

/* ── Version block containers (::: version v1.3 / v1.2 :::) ─── */

/* ── Version Block Containers ────── */
/* ── Version block containers (::: version v1.3 / v1.2 :::) ─── */
/* For multi-paragraph sections that are version-specific.
   Unlike callouts (single blockquote), these can wrap any block content. */

.version-block {
	position: relative;
	border-left: 3px solid transparent;
	padding: var(--s-3) var(--s-4);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	margin: var(--s-4) 0;
}

.version-block--v13 {
	background: var(--callout-v13-bg);
	border-left-color: var(--callout-v13-border);
}

.version-block--v13::before {
	content: "✦ Nouveauté v1.3";
	display: block;
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--callout-v13-border);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--s-2);
}

.version-block--v12 {
	background: var(--callout-v12-bg);
	border-left-color: var(--callout-v12-border);
}

.version-block--v12::before {
	content: "◈ v1.2 uniquement";
	display: block;
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--callout-v12-border);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--s-2);
}

/* Hide in opposite version mode */
:root[data-api-version="v1.2"] .portail-content .version-block--v13 {
	display: none;
}

:root[data-api-version="v1.3"] .portail-content .version-block--v12 {
	display: none;
}

/* ── Version callout blocks ──────────────────────────────────── */

/* ── Version Callout Blocks ────── */
/* ── Version callout blocks ──────────────────────────────────── */

.portail-content .callout--v13 {
	background: var(--callout-v13-bg);
	border-left-color: var(--callout-v13-border);
}

.portail-content .callout--v13::before {
	content: "✦ Nouveauté v1.3";
	color: var(--callout-v13-border);
}

.portail-content .callout--v13 p {
	color: var(--callout-v13-fg);
}

.portail-content .callout--v12 {
	background: var(--callout-v12-bg);
	border-left-color: var(--callout-v12-border);
}

.portail-content .callout--v12::before {
	content: "◈ v1.2";
	color: var(--callout-v12-border);
}

.portail-content .callout--v12 p {
	color: var(--callout-v12-fg);
}

/* Hide v1.3-specific callouts entirely in v1.2 mode.
   These blocks describe behavior that doesn't exist in v1.2.
   Dimming (previous approach) was wrong — it left unactionable content visible. */
:root[data-api-version="v1.2"] .portail-content .callout--v13 {
	display: none;
}

/* Symmetric: hide v1.2-specific callouts in v1.3 mode.
   Reserved for deprecation notices when v1.3 ships.
   Currently unused in content — infrastructure ready. */
:root[data-api-version="v1.3"] .portail-content .callout--v12 {
	display: none;
}

/* ── Version block containers (::: version v1.3 / v1.2 :::) ─── */

/* ── Version Block Containers 2 ────── */
/* ── Version block containers (::: version v1.3 / v1.2 :::) ─── */
/* For multi-paragraph sections that are version-specific.
   Unlike callouts (single blockquote), these can wrap any block content. */

.version-block {
	position: relative;
	border-left: 3px solid transparent;
	padding: var(--s-3) var(--s-4);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	margin: var(--s-4) 0;
}

.version-block--v13 {
	background: var(--callout-v13-bg);
	border-left-color: var(--callout-v13-border);
}

.version-block--v13::before {
	content: "✦ Nouveauté v1.3";
	display: block;
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--callout-v13-border);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--s-2);
}

.version-block--v12 {
	background: var(--callout-v12-bg);
	border-left-color: var(--callout-v12-border);
}

.version-block--v12::before {
	content: "◈ v1.2 uniquement";
	display: block;
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--callout-v12-border);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--s-2);
}

/* Hide in opposite version mode */
:root[data-api-version="v1.2"] .portail-content .version-block--v13 {
	display: none;
}

:root[data-api-version="v1.3"] .portail-content .version-block--v12 {
	display: none;
}

/* ── Version-gated nav items ─────────────────────────────────── */

/* ── Version-gated Nav Items ────── */
/* ── Version-gated nav items ─────────────────────────────────── */

/* v1.3-only nav items are dimmed (not hidden) in v1.2 mode.
   Dimming preserves discoverability — the user can see what's coming in v1.3.
   We don't hide because migration-related pages are still relevant for v1.2 users. */
:root[data-api-version="v1.2"] .nav-item[data-min-version="v1.3"] {
	opacity: 0.45;
}

:root[data-api-version="v1.2"] .nav-item[data-min-version="v1.3"]:hover {
	opacity: 0.8;
}

/* Ensure the v1.3 badge is still clearly visible even when item is dimmed */
:root[data-api-version="v1.2"] .nav-item[data-min-version="v1.3"] .nav-badge {
	opacity: 1;
}

/* ── Version mismatch notice ─────────────────────────────────── */

/* ── Version Mismatch Notice ────── */
/* ── Version mismatch notice ─────────────────────────────────── */

.api-version-notice {
	padding: var(--s-3) var(--s-4);
	background: var(--callout-warning-bg);
	border-left: 3px solid var(--color-warning);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	color: var(--callout-warning-fg);
	margin-bottom: var(--s-6);
}

/* ── Skip link (lien d'évitement — RGAA 12.7) ───────────────── */

/* ── Skip Link ────── */
/* ── Skip link (lien d'évitement — RGAA 12.7) ───────────────── */

.skip-link {
	position: absolute;
	top: -100%;
	left: var(--s-4);
	z-index: calc(var(--z-header) + 10);
	padding: var(--s-2) var(--s-4);
	background: var(--color-brand);
	color: #fff;
	font-size: var(--text-sm);
	font-weight: var(--fw-semi);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: top 0.1s;
}

.skip-link:focus {
	top: var(--s-2);
}

/* ── Reading progress bar ────────────────────────────────────── */

/* ── Reading Progress Bar ────── */
/* ── Reading progress bar ────────────────────────────────────── */

.portail-progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 0%;
	background: var(--color-brand-text);
	z-index: calc(var(--z-header) + 5);
	transition: width 80ms linear;
	pointer-events: none;
}

/* ── prefers-reduced-motion — RGAA 13.8 + éco-conception ────── */

/* ── Reduced Motion ────── */
/* ── prefers-reduced-motion — RGAA 13.8 + éco-conception ────── */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
		scroll-behavior: auto;
	}
}

/* ── @media print ────────────────────────────────────────────── */

/* ── Print Styles ────── */
/* ── @media print ────────────────────────────────────────────── */

@media print {
	.portail-header,
	.portail-sidebar,
	.portail-mobile-overlay,
	.portail-toc,
	.feedback-widget,
	.portail-prev-next,
	.portail-progress-bar,
	.portail-api-version-toggle,
	.copy-btn,
	.table-filter-input,
	.heading-anchor {
		display: none;
	}

	.portail-layout {
		display: block;
	}

	.portail-main {
		display: block;
		padding: 0;
	}

	.portail-content {
		max-width: none;
		padding: 0;
	}

	.portail-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		color: #555;
	}
}

/* ── Dashboard ────────────────────────────────────────────────────────────── */

/* ── Dashboard ────── */
/* ── Dashboard ────────────────────────────────────────────────────────────── */

.dashboard-notice-mock {
	display: flex;
	align-items: flex-start;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-4);
	background: var(--callout-warning-bg);
	border: var(--border-width) solid
		color-mix(in srgb, var(--color-warning) 30%, transparent);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	color: var(--callout-warning-fg);
	margin-bottom: var(--s-6);
	line-height: var(--lh-base);
}

.dashboard-notice-mock svg {
	flex-shrink: 0;
	margin-top: 0.1em;
	color: var(--color-warning);
}

.dashboard-section-title {
	font-size: var(--text-lg);
	font-weight: var(--fw-semi);
	color: var(--color-text);
	margin: 0 0 var(--s-4);
	padding-bottom: var(--s-2);
	border-bottom: var(--border-width) solid var(--color-border);
}

/* Page title */

.dashboard-page-title {
	font-size: var(--text-2xl);
	font-weight: var(--fw-bold);
	color: var(--color-text);
	margin: 0 0 var(--s-6);
	line-height: var(--lh-tight);
}

/* Metric cards grid */

.dashboard-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--s-4);
	margin-bottom: var(--s-4);
}

@media (min-width: 640px) {
	.dashboard-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
	.dashboard-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

.dashboard-metric-card {
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--s-5);
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.dashboard-metric-label {
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
}

.dashboard-metric-value {
	font-size: var(--text-2xl);
	font-weight: var(--fw-bold);
	color: var(--color-text);
	line-height: var(--lh-tight);
}

.dashboard-metric-unit {
	font-size: var(--text-sm);
	font-weight: var(--fw-normal);
	color: var(--color-text-subtle);
}

.dashboard-metric-sublabel {
	font-size: var(--text-xs);
	color: var(--color-text-subtle);
}

.dashboard-metric-badge {
	margin-top: var(--s-2);
}

/* Alert badges */

.dashboard-alert-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem var(--s-2);
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	white-space: nowrap;
}

.dashboard-alert-badge--green {
	background: color-mix(in srgb, var(--color-success) 12%, transparent);
	color: var(--color-success);
}

.dashboard-alert-badge--yellow {
	background: color-mix(in srgb, var(--color-warning) 12%, transparent);
	color: var(--color-warning);
}

.dashboard-alert-badge--red {
	background: color-mix(in srgb, var(--color-error) 12%, transparent);
	color: var(--color-error);
}

/* CDV distribution table */

.dashboard-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
	margin-bottom: var(--s-6);
}

.dashboard-table th {
	text-align: left;
	padding: var(--s-2) var(--s-3);
	font-weight: var(--fw-semi);
	color: var(--color-text-muted);
	border-bottom: var(--border-width) solid var(--color-border);
	white-space: nowrap;
}

.dashboard-table td {
	padding: var(--s-2) var(--s-3);
	border-bottom: var(--border-width) solid var(--color-surface-muted);
	vertical-align: middle;
}

.dashboard-bar {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	min-width: 10rem;
}

.dashboard-bar-track {
	flex: 1;
	height: 6px;
	background: var(--color-surface-muted);
	border-radius: var(--radius-full);
	overflow: hidden;
}

.dashboard-bar-fill {
	height: 100%;
	border-radius: var(--radius-full);
	background: var(--color-brand);
	min-width: 2px;
}

/* Alert list */

.dashboard-alert-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.dashboard-alert-item {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-left-width: 3px;
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
}

.dashboard-alert-item--green {
	border-left-color: var(--color-success);
}
.dashboard-alert-item--yellow {
	border-left-color: var(--color-warning);
}
.dashboard-alert-item--red {
	border-left-color: var(--color-error);
}

.dashboard-alert-message {
	flex: 1;
	color: var(--color-text);
}

.dashboard-alert-since {
	color: var(--color-text-subtle);
	font-size: var(--text-xs);
	white-space: nowrap;
}

.dashboard-no-alerts {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	padding: var(--s-3) 0;
}

/* ── Gestionnaire client status ───────────────────────── */

/* ── Client Status ────── */
/* ── Gestionnaire client status ───────────────────────── */

.dashboard-client-status {
	display: inline-flex;
	align-items: center;
	padding: var(--s-0-5) var(--s-2);
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
}

.dashboard-client-status--active {
	background: color-mix(in srgb, var(--color-success) 12%, transparent);
	color: var(--color-success);
}

.dashboard-client-status--onboarding {
	background: color-mix(in srgb, var(--color-warning) 12%, transparent);
	color: var(--color-warning);
}

.dashboard-client-status--inactive {
	background: var(--color-surface-muted);
	color: var(--color-text-subtle);
}

.dashboard-phase-badge {
	display: inline-flex;
	align-items: center;
	margin-left: var(--s-2);
	padding: var(--s-0-5) var(--s-2);
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	background: var(--color-surface-muted);
	color: var(--color-text-subtle);
	border: var(--border-width) solid var(--color-border);
}

/* ── SIREN picker form on dashboard pages ─────────────── */

/* ── SIREN Picker ────── */
/* ── SIREN picker form on dashboard pages ─────────────── */

.dashboard-siren-form {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	flex-wrap: wrap;
	margin-top: var(--s-6);
	font-size: var(--text-sm);
}

.dashboard-siren-form label {
	color: var(--color-text);
	font-weight: var(--fw-medium);
}

/* ── Mode badge (mock / live) ──────────────────────────── */

/* ── Mode Badge ────── */
/* ── Mode badge (mock / live) ──────────────────────────── */

.dashboard-mode-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	padding: var(--s-1) var(--s-2);
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	line-height: 1;
}

.dashboard-mode-badge--mock {
	background: var(--color-surface-muted);
	color: var(--color-text-subtle);
	border: var(--border-width) solid var(--color-border);
}

.dashboard-mode-badge--live {
	background: color-mix(in srgb, var(--color-success) 10%, transparent);
	color: var(--color-success);
	border: var(--border-width) solid
		color-mix(in srgb, var(--color-success) 30%, transparent);
}

/* Pulsing dot for live indicator */

.dashboard-mode-dot {
	display: inline-block;
	width: 0.45em;
	height: 0.45em;
	border-radius: var(--radius-full);
	background: currentColor;
	flex-shrink: 0;
}

.dashboard-mode-badge--live .dashboard-mode-dot {
	animation: dashboard-pulse 2s ease-in-out infinite;
}

@keyframes dashboard-pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.3;
	}
}

/* ── Direction badge (in / out) ────────────────────────── */

/* ── Direction Badge ────── */
/* ── Direction badge (in / out) ────────────────────────── */

.dashboard-direction-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.1em var(--s-2);
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	line-height: 1.4;
}

.dashboard-direction-badge--out {
	background: color-mix(in srgb, var(--color-brand) 10%, transparent);
	color: var(--color-brand-text);
	border: var(--border-width) solid
		color-mix(in srgb, var(--color-brand) 25%, transparent);
}

.dashboard-direction-badge--in {
	background: color-mix(in srgb, var(--color-info) 10%, transparent);
	color: var(--color-info);
	border: var(--border-width) solid
		color-mix(in srgb, var(--color-info) 25%, transparent);
}

/* ── Dashboard intro paragraph ─────────────────────────── */

/* ── Dashboard Intro ────── */
/* ── Dashboard intro paragraph ─────────────────────────── */

.dashboard-intro {
	color: var(--color-text-subtle);
	font-size: var(--text-sm);
	max-width: 56rem;
	margin-bottom: var(--s-6);
	line-height: var(--lh-relaxed, 1.7);
}

/* ── Quick links grid ──────────────────────────────────── */

/* ── Quick Links ────── */
/* ── Quick links grid ──────────────────────────────────── */

.dashboard-quicklinks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: var(--s-3);
}

.dashboard-quicklinks a {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-4);
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	color: var(--color-link);
	text-decoration: none;
	transition:
		border-color 0.15s,
		background 0.15s;
}

.dashboard-quicklinks a:hover {
	border-color: var(--color-brand-border);
	background: color-mix(in srgb, var(--color-brand) 4%, var(--color-surface));
}

/* ── Exports page ─────────────────────────────────────── */

/* ── Exports Page ────── */
/* ── Exports page ─────────────────────────────────────── */

.export-page-title {
	font-size: var(--text-2xl);
	font-weight: var(--fw-bold);
	margin-bottom: var(--s-3);
}

.export-intro {
	color: var(--color-text-subtle);
	font-size: var(--text-sm);
	max-width: 52rem;
	margin-bottom: var(--s-6);
	line-height: var(--lh-relaxed, 1.7);
}

.export-notice-mock {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	background: color-mix(
		in srgb,
		var(--color-brand) 6%,
		var(--color-surface-muted)
	);
	border: var(--border-width) solid var(--color-brand-border);
	border-radius: var(--radius-md);
	font-size: var(--text-xs);
	/* brand-tinted bg darkens effective contrast — use text-muted (4.89:1) over text-subtle (4.43:1) */
	color: var(--color-text-muted);
	margin-bottom: var(--s-6);
}

.export-notice-mock svg {
	flex-shrink: 0;
	color: var(--color-brand-text);
	margin-top: 1px;
}

.export-error {
	padding: var(--s-3) var(--s-4);
	background: color-mix(in srgb, var(--color-error) 8%, transparent);
	border: var(--border-width) solid var(--color-error);
	border-radius: var(--radius-md);
	color: var(--color-error);
	font-size: var(--text-sm);
	margin-bottom: var(--s-4);
}

.export-success {
	padding: var(--s-3) var(--s-4);
	background: color-mix(in srgb, var(--color-success) 8%, transparent);
	border: var(--border-width) solid var(--color-success);
	border-radius: var(--radius-md);
	color: var(--color-success);
	font-size: var(--text-sm);
	margin-bottom: var(--s-4);
}

.export-form {
	display: flex;
	flex-direction: column;
	gap: var(--s-6);
	max-width: 40rem;
}

.export-fieldset {
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--s-5);
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}

.export-fieldset legend {
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
	padding: 0 var(--s-2);
}

.export-field-row {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	flex-wrap: wrap;
}

.export-field-row label {
	font-size: var(--text-sm);
	color: var(--color-text);
	white-space: nowrap;
}

.export-date-input {
	padding: var(--s-2) var(--s-3);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--text-sm);
	font-family: inherit;
	transition: border-color var(--transition);
}

.export-date-input:focus {
	outline: none;
	border-color: var(--color-brand-border);
}

.export-select {
	padding: var(--s-2) var(--s-3);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--text-sm);
	font-family: inherit;
	cursor: pointer;
	transition: border-color var(--transition);
}

.export-select:focus {
	outline: none;
	border-color: var(--color-brand-border);
}

.export-format-group {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

.export-format-option {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition:
		border-color var(--transition),
		background var(--transition);
}

.export-format-option:has(input:checked) {
	border-color: var(--color-brand-border);
	background: color-mix(in srgb, var(--color-brand) 4%, var(--color-surface));
}

.export-format-option:hover {
	border-color: var(--color-brand-border);
}

.export-format-option input[type="radio"] {
	margin-top: 2px;
	flex-shrink: 0;
	accent-color: var(--color-brand);
}

.export-format-label {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	font-size: var(--text-sm);
}

.export-format-desc {
	font-size: var(--text-xs);
	color: var(--color-text-subtle);
}

.export-submit-row {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	flex-wrap: wrap;
}

.export-submit {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-5);
	background: var(--color-brand);
	color: var(--color-surface);
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	font-family: inherit;
	cursor: pointer;
	transition: opacity var(--transition);
}

.export-submit:hover {
	opacity: 0.88;
}

.export-submit:active {
	opacity: 0.78;
}

.export-count-hint {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

/* ── Export job status page ───────────────────────────────────────────────── */

/* ── Export Job Status ────── */
/* ── Export job status page ───────────────────────────────────────────────── */

.export-job {
	max-width: 52rem;
}

.export-job-hint {
	color: var(--color-text-subtle);
	font-size: var(--text-sm);
	margin-bottom: var(--s-6);
}

.export-job-spinner {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	font-size: var(--text-sm);
	color: var(--color-text-subtle);
	margin-bottom: var(--s-4);
}

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

.export-job-spin {
	animation: export-spin 1s linear infinite;
	color: var(--color-brand);
}

.export-job-ready {
	padding: var(--s-4) var(--s-5);
	background: color-mix(in srgb, var(--color-success) 8%, transparent);
	border: var(--border-width) solid var(--color-success);
	border-radius: var(--radius-md);
	color: var(--color-success);
	font-size: var(--text-sm);
	margin-bottom: var(--s-5);
}

.export-job-ready-header {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	font-weight: var(--fw-medium);
	margin-bottom: var(--s-4);
}

/* Summary key/value grid inside the success banner */
.export-job-summary {
	display: grid;
	grid-template-columns: auto 1fr;
	row-gap: var(--s-1);
	column-gap: var(--s-5);
	margin: 0;
	padding-left: var(--s-7);
}

.export-job-summary-row {
	display: contents;
}

.export-job-summary dt {
	font-weight: var(--fw-medium);
	color: color-mix(in srgb, var(--color-success) 80%, var(--color-text));
	white-space: nowrap;
}

.export-job-summary dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

/* Preview section */
.export-job-preview {
	margin-bottom: var(--s-5);
}

.export-job-preview-label {
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
	margin-bottom: var(--s-2);
}

.export-job-preview-table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
}

.export-job-preview-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}

.export-job-preview-table th {
	text-align: left;
	padding: var(--s-2) var(--s-3);
	background: var(--color-surface-muted);
	border-bottom: 2px solid var(--color-border);
	font-weight: var(--fw-semi);
	color: var(--color-brand-text);
	white-space: nowrap;
}

.export-job-preview-table td {
	padding: var(--s-2) var(--s-3);
	border-bottom: var(--border-width) solid var(--color-border);
	white-space: nowrap;
}

.export-job-preview-table tbody tr:last-child td {
	border-bottom: none;
}

.export-job-preview-table tbody tr:nth-child(even) td {
	background: var(--color-surface-muted);
}

.export-job-preview-table tbody tr:hover td {
	background: var(--color-brand-active);
}

.export-job-preview-hint {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin-top: var(--s-2);
}

.export-job-actions {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	flex-wrap: wrap;
	margin-bottom: var(--s-4);
}

.export-job-back {
	font-size: var(--text-sm);
	color: var(--color-text-subtle);
	text-decoration: none;
	transition: color var(--transition);
}

.export-job-back:hover {
	color: var(--color-brand-text);
}

.export-job-empty {
	padding: var(--s-3) var(--s-4);
	background: color-mix(
		in srgb,
		var(--color-warning, #eab308) 12%,
		transparent
	);
	border: 1px solid
		color-mix(in srgb, var(--color-warning, #eab308) 40%, transparent);
	border-radius: var(--radius);
	color: var(--color-text);
	font-size: var(--text-sm);
	margin-bottom: var(--s-4);
}

/* .export-job-meta removed — Job ID no longer displayed to users */

/* ── Habilitations — Profile Cards (Rôles disponibles) ─────── */

/* ── Habilitations ────── */
/* ── Habilitations — Profile Cards (Rôles disponibles) ─────── */

.habilitations-page-subtitle {
	color: var(--color-text-muted);
	margin-bottom: var(--s-6);
	font-size: var(--text-sm);
}

.profiles-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--s-4);
	margin-bottom: var(--s-8);
}

.profiles-card {
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--s-4);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	transition:
		border-color var(--transition),
		box-shadow var(--transition);
}

.profiles-card:hover {
	border-color: var(--color-brand-border);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--color-brand) 10%, transparent);
}

.profiles-card-header {
	display: flex;
	gap: var(--s-3);
	align-items: flex-start;
}

.profiles-card-icon {
	color: var(--color-brand-text);
	flex-shrink: 0;
}

.profiles-card-title {
	font-weight: var(--fw-semi);
	color: var(--color-text);
	font-size: var(--text-base);
}

.profiles-card-role {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin-top: var(--s-1);
}

.profiles-card-desc {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: var(--lh-base);
	margin: 0;
	flex: 1;
}

.profiles-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-1);
}

.profiles-action-tag {
	font-size: var(--text-xs);
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-full);
	padding: 0.1em 0.6em;
	color: var(--color-text-muted);
	white-space: nowrap;
}

.profiles-card-footer {
	display: flex;
	gap: var(--s-2);
	margin-top: auto;
	padding-top: var(--s-2);
	border-top: var(--border-width) solid var(--color-border);
}

.profiles-card-link,
.profiles-card-invite {
	font-size: var(--text-sm);
	text-decoration: none;
	padding: var(--s-1) var(--s-2);
	border-radius: var(--radius-md);
	transition: background var(--transition);
}

.profiles-card-link {
	color: var(--color-text-muted);
}
.profiles-card-link:hover {
	background: var(--color-surface-muted);
}
.profiles-card-invite {
	background: var(--color-brand);
	color: var(--color-on-brand);
	font-weight: var(--fw-medium);
}
.profiles-card-invite:hover {
	background: var(--color-brand-dark);
}

/* ── Permission matrix ─────────────────────────────────────── */

/* ── Permission Matrix ────── */
/* ── Permission matrix ─────────────────────────────────────── */

.habilitations-matrix-scroll {
	overflow-x: auto;
}

.habilitations-matrix-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}

.habilitations-matrix-cell {
	padding: var(--s-2) var(--s-3);
	border: var(--border-width) solid var(--color-border);
	text-align: center;
	vertical-align: middle;
}

.habilitations-matrix-header-profile {
	text-align: left;
	font-weight: var(--fw-semi);
	background: var(--color-surface-muted);
	white-space: nowrap;
}

.habilitations-matrix-header-action {
	font-weight: var(--fw-medium);
	background: var(--color-surface-muted);
	font-size: var(--text-xs);
}

.habilitations-matrix-check {
	color: var(--color-success);
	font-weight: var(--fw-bold);
}
.habilitations-matrix-no {
	color: var(--color-text-muted);
}

/* ── Team — Role presets in invitation form ─────────────────── */

/* ── Team Presets ────── */
/* ── Team — Role presets in invitation form ─────────────────── */

.team-role-presets {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-bottom: var(--s-2);
}

.team-role-preset {
	padding: var(--s-1) var(--s-3);
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	cursor: pointer;
	transition:
		background var(--transition),
		border-color var(--transition);
}

.team-role-preset:hover {
	border-color: var(--color-brand-border);
}

.team-role-preset--selected,
.team-role-preset[aria-pressed="true"] {
	background: var(--color-brand);
	color: var(--color-on-brand);
	border-color: var(--color-brand);
}

/* ── Team — Member directory ────────────────────────────────── */

/* ── Team Directory ────── */
/* ── Team — Member directory ────────────────────────────────── */

.habilitations-search-bar {
	margin-bottom: var(--s-4);
}

.habilitations-user-search {
	width: 100%;
	max-width: 320px;
	padding: var(--s-2) var(--s-3);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	background: var(--color-surface);
	color: var(--color-text);
	outline: none;
}

.habilitations-user-search:focus {
	border-color: var(--color-brand-border);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand) 20%, transparent);
}

.team-member-role {
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--color-brand-text);
}

.habilitations-form-optional {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	font-weight: var(--fw-normal);
}

/* ── Onboarding wizard ────────────────────────────────────── */

/* ── Onboarding Wizard ────── */
/* ── Onboarding wizard ────────────────────────────────────── */

.onboarding-page {
	max-width: var(--content-max-width);
}
.onboarding-page-header {
	margin-bottom: var(--s-6);
}
.onboarding-page-title {
	font-size: var(--text-2xl);
	font-weight: var(--fw-bold);
	color: var(--color-brand-text);
	margin-bottom: var(--s-2);
}
.onboarding-page-subtitle {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.onboarding-progress-container {
	margin-bottom: var(--s-8);
}
.onboarding-progress-bar {
	height: 8px;
	background: var(--color-surface-muted);
	border-radius: var(--radius-full);
	overflow: hidden;
	margin-bottom: var(--s-2);
}
.onboarding-progress-fill {
	height: 100%;
	background: var(--color-brand);
	border-radius: var(--radius-full);
	transition: width 300ms ease;
}
.onboarding-progress-meta {
	display: flex;
	justify-content: space-between;
	font-size: var(--text-sm);
}
.onboarding-progress-label {
	font-weight: var(--fw-medium);
	color: var(--color-brand-text);
}
.onboarding-progress-time {
	color: var(--color-text-muted);
}

.onboarding-steps-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

.onboarding-step {
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--s-4);
	transition: border-color var(--transition);
}
.onboarding-step[data-status="done"] {
	border-color: var(--color-success);
	background: color-mix(in srgb, var(--color-success) 5%, var(--color-surface));
}
.onboarding-step[data-status="in-progress"] {
	border-color: var(--color-brand-border);
}

.onboarding-step-header {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
}
.onboarding-step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	min-width: 1.75rem;
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: var(--fw-bold);
	color: var(--color-brand-text);
}
.onboarding-step[data-status="done"] .onboarding-step-number {
	background: var(--color-success);
	color: #fff;
	border-color: var(--color-success);
}
.onboarding-step-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}
.onboarding-step-title {
	font-weight: var(--fw-semi);
	color: var(--color-text);
}
.onboarding-step-desc {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}
.onboarding-step-controls {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--s-2);
	flex-shrink: 0;
}
.onboarding-step-status-badge {
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	padding: 0.15em 0.6em;
	border-radius: var(--radius-full);
	background: var(--color-surface-muted);
	color: var(--color-text-muted);
}
.onboarding-step-status-badge[data-status="done"] {
	background: color-mix(in srgb, var(--color-success) 15%, transparent);
	color: var(--color-success);
}
.onboarding-step-status-badge[data-status="blocked"] {
	background: color-mix(in srgb, var(--color-warning) 15%, transparent);
	color: var(--color-warning);
}
.onboarding-step-btn {
	font-size: var(--text-xs);
	padding: var(--s-1) var(--s-2);
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	cursor: pointer;
	color: var(--color-text);
	transition:
		background var(--transition),
		border-color var(--transition);
	white-space: nowrap;
}
.onboarding-step-btn:hover:not(:disabled) {
	border-color: var(--color-brand-border);
	background: var(--color-brand-active);
}
.onboarding-step-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ── Sources de vérité ────────────────────────────────────── */

/* ── Sources de Vérité ────── */
/* ── Sources de vérité ────────────────────────────────────── */

.alert {
	padding: var(--s-4) var(--s-5);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	border: var(--border-width) solid transparent;
}
.alert-warn {
	background: var(--callout-warning-bg);
	color: var(--callout-warning-fg);
	border-color: var(--color-warning);
}

.sources-header {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	margin-bottom: var(--s-6);
	flex-wrap: wrap;
}
.sources-header h1 {
	margin: 0;
	font-size: var(--text-xl);
	font-weight: var(--fw-semi);
}
.last-run {
	margin-left: auto;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}
.btn-refresh {
	padding: var(--s-2) var(--s-4);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--color-brand-text);
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition:
		background var(--transition),
		border-color var(--transition);
}
.btn-refresh:hover:not(:disabled) {
	background: var(--color-brand-active);
	border-color: var(--color-brand-border);
}
.btn-refresh:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.sources-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}
.sources-table thead th {
	padding: var(--s-2) var(--s-3);
	text-align: left;
	font-weight: var(--fw-semi);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
	border-bottom: 2px solid var(--color-border);
	background: var(--color-bg);
}
.source-row td {
	padding: var(--s-3) var(--s-3);
	border-bottom: var(--border-width) solid var(--color-border);
	vertical-align: top;
}
.source-row:last-child td {
	border-bottom: none;
}
.source-row:hover td {
	background: var(--color-surface-muted);
}

/* Status-based left border accent */
.source-row.status-new-version td:first-child {
	border-left: 3px solid var(--color-warning);
	padding-left: calc(var(--s-3) - 3px);
}
.source-row.status-unreachable td:first-child {
	border-left: 3px solid var(--color-error);
	padding-left: calc(var(--s-3) - 3px);
}
.source-row.status-up-to-date td:first-child {
	border-left: 3px solid var(--color-success);
	padding-left: calc(var(--s-3) - 3px);
}
.source-row.status-manual-check td:first-child {
	border-left: 3px solid var(--color-border);
	padding-left: calc(var(--s-3) - 3px);
}

.badge {
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	letter-spacing: 0.04em;
	padding: 0.125rem 0.5rem;
	border-radius: var(--radius-full);
	white-space: nowrap;
}
.badge-ok {
	background: color-mix(in srgb, var(--color-success) 15%, transparent);
	color: var(--color-success);
}
.badge-warn {
	background: color-mix(in srgb, var(--color-warning) 15%, transparent);
	color: var(--color-warning);
}
.badge-error {
	background: color-mix(in srgb, var(--color-error) 15%, transparent);
	color: var(--color-error);
}
.badge-info {
	background: var(--color-surface-muted);
	color: var(--color-text-muted);
}

.source-id {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-text-subtle);
	margin-top: var(--s-1);
}
.constraint-note {
	display: block;
	font-size: var(--text-xs);
	color: var(--color-warning);
	margin-top: var(--s-1);
}

.version-local {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}
.version-upstream {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-success);
	font-weight: var(--fw-medium);
}

.impact-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}
.impact-list code {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	background: var(--color-surface-muted);
	color: var(--color-text);
	padding: 0.0625rem 0.375rem;
	border-radius: var(--radius-sm);
	border: var(--border-width) solid var(--color-border);
}

.onboarding-step-links {
	display: flex;
	gap: var(--s-2);
	margin-top: var(--s-3);
	flex-wrap: wrap;
}
.onboarding-step-link {
	font-size: var(--text-sm);
	color: var(--color-brand-text);
	text-decoration: none;
	padding: var(--s-1) var(--s-2);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	transition: background var(--transition);
}
.onboarding-step-link:hover {
	background: var(--color-brand-active);
}
.onboarding-step-link--tool {
	background: var(--color-surface-muted);
}

.onboarding-page-footer {
	display: flex;
	gap: var(--s-4);
	align-items: center;
	margin-top: var(--s-8);
	padding-top: var(--s-6);
	border-top: var(--border-width) solid var(--color-border);
}
.onboarding-reset-btn {
	font-size: var(--text-sm);
	padding: var(--s-2) var(--s-4);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	cursor: pointer;
	color: var(--color-text-muted);
	transition:
		color var(--transition),
		border-color var(--transition);
}
.onboarding-reset-btn:hover {
	color: var(--color-error);
	border-color: var(--color-error);
}
.onboarding-profiles-link {
	font-size: var(--text-sm);
	color: var(--color-brand-text);
	text-decoration: none;
}
.onboarding-profiles-link:hover {
	text-decoration: underline;
}

/* ── Home quick-ref ────────────────────────────────────── */

/* ── Home Quick Ref ────── */
/* ── Home quick-ref ────────────────────────────────────── */
.home-quickref {
	margin-top: var(--s-8);
	padding: var(--s-6);
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-xl);
}

.home-quickref-title {
	font-size: var(--text-sm);
	font-weight: var(--fw-semi);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--s-4);
}

.home-quickref-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--s-3);
}

.home-quickref-item {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.home-quickref-label {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	font-weight: var(--fw-medium);
}

.home-quickref-value {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--color-text);
	background: var(--color-surface-muted);
	padding: var(--s-1) var(--s-2);
	border-radius: var(--radius-sm);
	border: var(--border-width) solid var(--color-border);
	word-break: break-all;
}

.home-quickref-value--text {
	font-family: var(--font-base);
	font-size: var(--text-base);
	font-weight: var(--fw-semi);
	background: none;
	border: none;
	padding: 0;
	word-break: normal;
}

/* ── API Ref landing & group cards ────────────────────── */

/* ── API Ref Landing ────── */
/* ── API Ref landing & group cards ────────────────────── */
.api-ref-landing {
	margin-bottom: var(--s-8);
}
.api-ref-landing-header {
	margin-bottom: var(--s-6);
}
.api-ref-landing-title {
	font-size: var(--text-2xl);
	font-weight: var(--fw-bold);
	color: var(--color-text);
	margin-bottom: var(--s-2);
}
.api-ref-landing-desc {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}
.api-group-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--s-4);
	margin-bottom: var(--s-6);
}
.api-group-card {
	display: flex;
	gap: var(--s-3);
	padding: var(--s-4);
	border-radius: var(--radius-xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
	text-decoration: none;
	color: var(--color-text);
	transition:
		box-shadow var(--transition),
		border-color var(--transition);
}
.api-group-card:hover {
	border-color: var(--color-brand-border);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--color-brand) 10%, transparent);
}
.api-group-card-icon {
	font-size: 1.5rem;
	line-height: 1;
	flex-shrink: 0;
}
.api-group-card-body {
	flex: 1;
}
.api-group-card-title {
	font-weight: var(--fw-semi);
	font-size: var(--text-sm);
	margin-bottom: var(--s-1);
}
.api-group-card-desc {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin-bottom: var(--s-2);
}
.api-group-card-meta {
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	padding: 0.125rem var(--s-2);
	border-radius: var(--radius-full);
	display: inline-block;
}
.api-group-card--blue .api-group-card-meta {
	background: var(--color-get-bg);
	color: var(--color-get-fg);
}
.api-group-card--purple .api-group-card-meta {
	background: var(--color-patch-bg);
	color: var(--color-patch-fg);
}
.api-group-card--green .api-group-card-meta {
	background: var(--color-post-bg);
	color: var(--color-post-fg);
}
.api-group-card--amber .api-group-card-meta {
	background: var(--color-put-bg);
	color: var(--color-put-fg);
}

/* ── Tag group context banner ─────────────────────────── */

/* ── Tag Group Context ────── */
/* ── Tag group context banner ─────────────────────────── */
.tag-group-context {
	margin-bottom: var(--s-3);
}
.tag-group-badge {
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	padding: 0.125rem var(--s-2);
	border-radius: var(--radius-full);
}
.tag-group-badge--blue {
	background: var(--color-get-bg);
	color: var(--color-get-fg);
}
.tag-group-badge--purple {
	background: var(--color-patch-bg);
	color: var(--color-patch-fg);
}
.tag-group-badge--green {
	background: var(--color-post-bg);
	color: var(--color-post-fg);
}
.tag-group-badge--amber {
	background: var(--color-put-bg);
	color: var(--color-put-fg);
}

/* ── API subcategory grouping ─────────────────────────── */

/* ── API Subcategory ────── */
/* ── API subcategory grouping ─────────────────────────── */
.api-subcategory-group {
	margin-bottom: var(--s-6);
}
.api-subcategory-label {
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: var(--s-2) 0;
	border-bottom: var(--border-width) solid var(--color-border);
	margin-bottom: var(--s-3);
}

/* ── Usecase block ────────────────────────────────────── */

/* ── Usecase Block ────── */
/* ── Usecase block ────────────────────────────────────── */
.usecase-block {
	border: var(--border-width) solid var(--color-border);
	border-left: 3px solid var(--color-brand-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	margin: var(--s-6) 0;
	overflow: hidden;
}
.usecase-header {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-4);
	background: var(--color-surface-muted);
	border-bottom: var(--border-width) solid var(--color-border);
}
.usecase-icon {
	font-size: var(--text-base);
	line-height: 1;
}
.usecase-title {
	font-weight: var(--fw-semi);
	font-size: var(--text-sm);
	color: var(--color-text);
}
.usecase-body {
	padding: var(--s-4);
}
.usecase-body > *:first-child {
	margin-top: 0;
}
.usecase-body > *:last-child {
	margin-bottom: 0;
}

/* ── Portal timeline ──────────────────────────────────── */

/* ── Portal Timeline ────── */
/* ── Portal timeline ──────────────────────────────────── */
.portail-timeline {
	margin: var(--s-6) 0;
}
.portail-timeline-title {
	font-weight: var(--fw-semi);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--s-4);
}
.portail-timeline-track {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-left: 2px solid var(--color-border);
	padding-left: var(--s-4);
	margin-left: var(--s-3);
}
.portail-timeline-step {
	position: relative;
	padding: var(--s-2) var(--s-3);
	margin-bottom: var(--s-1);
}
.portail-timeline-marker {
	position: absolute;
	left: calc(-1 * var(--s-4) - 5px);
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	border-radius: var(--radius-full);
	border: 2px solid var(--color-border);
	background: var(--color-surface);
}
.portail-timeline-label {
	font-size: var(--text-sm);
	color: var(--color-text);
}
/* State color variants — marker dot */
.portail-timeline-step--pending .portail-timeline-marker {
	border-color: var(--color-text-muted);
	background: var(--color-surface-muted);
}
.portail-timeline-step--info .portail-timeline-marker {
	border-color: var(--color-get-fg);
	background: var(--color-get-bg);
}
.portail-timeline-step--success .portail-timeline-marker {
	border-color: var(--color-success);
	background: var(--color-post-bg);
}
.portail-timeline-step--error .portail-timeline-marker {
	border-color: var(--color-error);
	background: var(--color-delete-bg);
}
.portail-timeline-step--neutral .portail-timeline-marker {
	border-color: var(--color-border);
	background: var(--color-surface);
}
/* Label color tinting per state */
.portail-timeline-step--info .portail-timeline-label {
	color: var(--color-get-fg);
}
.portail-timeline-step--success .portail-timeline-label {
	color: var(--color-success);
}
.portail-timeline-step--error .portail-timeline-label {
	color: var(--color-error);
}

/* ── FAQ accordion ────────────────────────────────────── */

/* ── FAQ Accordion ────── */
/* ── FAQ accordion ────────────────────────────────────── */
.faq-accordion-item {
	border-bottom: var(--border-width) solid var(--color-border);
}
.faq-accordion-btn {
	display: flex;
	width: 100%;
	text-align: left;
	padding: var(--s-4) 0;
	background: none;
	border: none;
	cursor: pointer;
	font-size: var(--text-base);
	font-weight: var(--fw-semi);
	color: var(--color-text);
	gap: var(--s-2);
	align-items: center;
	font-family: inherit;
}
.faq-accordion-btn::after {
	content: "▾";
	margin-left: auto;
	flex-shrink: 0;
	transition: transform var(--transition);
	color: var(--color-text-muted);
}
.faq-accordion-btn[aria-expanded="true"]::after {
	transform: rotate(-180deg);
}
.faq-accordion-body {
	padding-bottom: var(--s-4);
}

/* ── Changelog timeline ───────────────────────────────── */

/* ── Changelog Timeline ────── */
/* ── Changelog timeline ───────────────────────────────── */
.changelog-version-heading {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding-top: var(--s-6);
}
.changelog-version-badge {
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	padding: 0.125rem var(--s-2);
	border-radius: var(--radius-full);
	background: var(--color-get-bg);
	color: var(--color-get-fg);
	font-family: var(--font-mono);
}
.changelog-entry-badge {
	display: inline-block;
	font-size: 0.65rem;
	font-weight: var(--fw-semi);
	padding: 0.0625rem 0.375rem;
	border-radius: var(--radius-full);
	margin-right: var(--s-2);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	vertical-align: middle;
}
.changelog-entry-badge--feat {
	background: var(--color-post-bg);
	color: var(--color-post-fg);
}
.changelog-entry-badge--fix {
	background: var(--color-put-bg);
	color: var(--color-put-fg);
}
.changelog-entry-badge--breaking {
	background: var(--color-delete-bg);
	color: var(--color-delete-fg);
}
.changelog-entry-badge--security {
	background: var(--color-patch-bg);
	color: var(--color-patch-fg);
}

/* ── Back link (openapi renderer) ──────────────── */

.back-link {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	color: var(--color-brand-text);
	text-decoration: none;
	font-size: var(--text-sm);
	margin-bottom: var(--s-4);
	transition: opacity var(--transition);
}

.back-link:hover {
	opacity: 0.75;
}

/* ── Page header layout (shared across portail apps) ─────────────────────── */

.portail-page-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s-3) var(--s-4);
	margin-bottom: var(--s-6);
}

.portail-page-header h1 {
	font-size: var(--text-2xl);
	font-weight: var(--fw-bold);
	color: var(--color-brand-text);
	margin: 0;
	flex: 1;
	min-width: 0;
}

.portail-page-subtitle {
	flex-basis: 100%;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	margin: 0;
}

.portail-page-actions {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	flex-shrink: 0;
}

/* ── Processing progress track ───────────────────────────────────────────── */
/*
 * .portail-progress-bar at line ~5090 is the reading indicator (position:fixed).
 * Scoping via .portail-progress > resets it to a standard fill bar.
 */

.portail-progress {
	height: 0.5rem;
	background: var(--color-surface-muted);
	border-radius: var(--radius-full);
	overflow: hidden;
	margin-bottom: var(--s-4);
}

.portail-progress > .portail-progress-bar {
	/* Override: global .portail-progress-bar is position:fixed (reading indicator) */
	position: static;
	height: 100%;
	background: var(--color-brand);
	border-radius: var(--radius-full);
	transition: width 200ms ease;
}

/* @doxallia/design — AI Toolbar (admin-only, Stripe-inspired)
 * Styles for: .ai-toolbar, .ai-toolbar-btn, .ai-toolbar-divider, .ai-md-dialog
 * Paired with: @doxallia/design/lib/compositions renderAiToolbar()
 * Injected by the consumer's layout shell when an admin role is active.
 */

/* ── Toolbar bar ──────────────────────────────────────── */

.ai-toolbar {
	float: right;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--s-1);
	padding: var(--s-1) 0 0;
	margin-left: var(--s-4);
}

.ai-toolbar-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--fw-normal);
	color: var(--color-text-muted);
	background: none;
	border: none;
	padding: var(--s-1) var(--s-2);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: color var(--transition);
	white-space: nowrap;
	line-height: 1;
}

.ai-toolbar-btn:hover {
	color: var(--color-brand-text);
}

.ai-toolbar-btn:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.ai-toolbar-btn svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.ai-toolbar-divider {
	color: var(--color-border);
	font-size: var(--text-sm);
	user-select: none;
	opacity: 0.8;
	padding: 0 var(--s-1);
}

/* Narrow viewports: icons only + CSS tooltip on hover */
@media (max-width: 768px) {
	.ai-toolbar-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.ai-toolbar-divider {
		display: none;
	}

	.ai-toolbar-btn {
		position: relative;
	}

	.ai-toolbar-btn::after {
		content: attr(aria-label);
		position: absolute;
		bottom: calc(100% + 6px);
		left: 50%;
		transform: translateX(-50%);
		background: var(--color-text);
		color: var(--color-bg);
		font-size: var(--text-xs);
		padding: 2px var(--s-2);
		border-radius: var(--radius-sm);
		white-space: nowrap;
		pointer-events: none;
		opacity: 0;
		transition: opacity var(--transition);
		z-index: 10;
	}

	.ai-toolbar-btn:hover::after,
	.ai-toolbar-btn:focus-visible::after {
		opacity: 1;
	}
}

/* ── Markdown dialog ──────────────────────────────────── */

.ai-md-dialog {
	position: fixed;
	inset: 0;
	margin: auto;
	background: var(--color-code-bg);
	color: var(--color-code-text);
	border: 1px solid var(--color-code-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: 0;
	width: min(90vw, 48rem);
	max-height: 80vh;
}

.ai-md-dialog[open] {
	display: flex;
	flex-direction: column;
}

.ai-md-dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

.ai-md-dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--s-3) var(--s-4);
	border-bottom: 1px solid var(--color-code-border);
	flex-shrink: 0;
}

.ai-md-dialog-title {
	font-size: var(--text-sm);
	font-weight: var(--fw-semi);
	color: var(--color-code-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ai-md-dialog-actions {
	display: flex;
	align-items: center;
	gap: var(--s-2);
}

.ai-md-close-btn {
	font-size: var(--text-base);
	padding: var(--s-1);
	line-height: 1;
}

.ai-md-content {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	line-height: var(--lh-base);
	color: var(--color-code-text);
	padding: var(--s-4);
	overflow-y: auto;
	white-space: pre-wrap;
	word-break: break-word;
	margin: 0;
	flex: 1;
	min-height: 0;
}

/* @doxallia/design — Endpoint split layout
 * Two-column layout: prose (left 2/3) + sticky code panel (right 1/3).
 * Used by OpenAPI renderers and API documentation pages.
 */

/* ── OpenAPI renderer root ────────────────────────────── */

.openapi-renderer {
	display: flex;
	flex-direction: column;
	gap: var(--s-8);
}

/* Remove max-width on pages that use the 2-column split — needed for the grid to breathe.
 * .openapi-renderer = API ref page; .endpoint-split = doc pages (e.g. authentication). */
.portail-content:has(.openapi-renderer),
.portail-content:has(.endpoint-split) {
	max-width: none;
}

/* ── Split grid ───────────────────────────────────────── */

.endpoint-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

@media (min-width: 900px) {
	.endpoint-split {
		grid-template-columns: 2fr 1fr;
		align-items: start;
	}
}

.endpoint-split-main {
	/* min-width: 0 — grid tracks default to auto (content size); lets the
   * column shrink below its content so overflow-x: auto on <pre> can scroll. */
	min-width: 0;
}

.endpoint-split-aside {
	border-top: 1px solid var(--color-border);
	/* min-width: 0 — prevents long <pre> lines from blowing out the 1fr column. */
	min-width: 0;
}

@media (min-width: 900px) {
	.endpoint-split-aside {
		border-top: none;
		border-left: 1px solid var(--color-border);
		min-height: 100%;
	}
}

/* Mobile/tablet: stack below main content */
@media (max-width: 900px) {
	.endpoint-split-aside {
		border-top: 1px solid var(--color-border);
		border-left: none;
	}
}

/* ── Endpoint section (parameter groups, responses) ───── */

.endpoint-section {
	padding: var(--s-4) var(--s-5);
	border-top: 1px solid var(--color-border);
}

.endpoint-section h4 {
	margin: 0 0 var(--s-3);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

@media (max-width: 640px) {
	.endpoint-section {
		padding: var(--s-3) var(--s-3);
	}
}

/* ── Code aside panels (request + response stacked) ────── */

.code-aside-panels {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	/* Horizontal padding so rounded cards don't touch the aside border */
	padding: var(--s-4) var(--s-3);
}

@media (min-width: 900px) {
	.code-aside-panels {
		position: sticky;
		top: calc(var(--header-height) + var(--s-4));
		/* Scroll within the sticky container if both panels exceed viewport height */
		max-height: calc(100dvh - var(--header-height) - var(--s-8));
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: var(--color-code-border) transparent;
	}
}

.code-aside-panel {
	border-bottom: 1px solid var(--color-code-border);
}

.code-aside-panel:last-child {
	border-bottom: none;
}


/* @doxallia/design — Layer 3: shell */
/* @doxallia/design — Layout component styles */

html {
	font-size: var(--text-base);
}

body {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--lh-base);
	background: var(--color-bg);
	color: var(--color-text);
}

.portail-layout {
	display: grid;
	grid-template-columns: var(--sidebar-width) 1fr;
	max-width: var(--page-max-width);
	margin: 0 auto;
	min-height: calc(100vh - var(--header-height));
}

.portail-sidebar {
	background: var(--color-surface);
	border-right: var(--border-width) solid var(--color-border);
	position: sticky;
	top: var(--header-height);
	height: calc(100vh - var(--header-height));
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--color-border) transparent;
	display: flex;
	flex-direction: column;
}

.portail-sidebar::-webkit-scrollbar {
	width: 4px;
}

.portail-sidebar::-webkit-scrollbar-track {
	background: transparent;
}

.portail-sidebar::-webkit-scrollbar-thumb {
	background: var(--color-border);
	border-radius: var(--radius-full);
}

.portail-sidebar::-webkit-scrollbar-thumb:hover {
	background: var(--color-text-muted);
}

.portail-sidebar-nav {
	flex: 1;
	padding: var(--s-6) var(--s-4) var(--s-4);
}

.portail-main {
	min-height: calc(100vh - var(--header-height));
	padding: var(--s-8);
	overflow-x: clip;
}

.portail-content {
	max-width: var(--content-max-width);
}

/* @doxallia/design — Header component styles */

.portail-header {
	height: var(--header-height);
	background: var(--color-surface);
	border-bottom: var(--border-width) solid var(--color-border);
	position: sticky;
	top: 0;
	z-index: var(--z-header);
}

.portail-header-inner {
	display: grid;
	grid-template-columns: var(--sidebar-width) 1fr;
	max-width: var(--page-max-width);
	margin: 0 auto;
	height: 100%;
	align-items: center;
}

.portail-header-left {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: 0 var(--s-4);
	border-right: var(--border-width) solid var(--color-border);
}

.portail-header-right {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding: 0 var(--s-6);
	justify-content: flex-end;
}

/* Dark mode toggle */
.portail-dark-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: none;
	background: transparent;
	color: var(--color-text-muted);
	cursor: pointer;
	border-radius: var(--radius-sm);
	transition:
		color var(--transition),
		background var(--transition);
	flex-shrink: 0;
}

.portail-dark-toggle:hover {
	background: var(--color-surface-muted);
	color: var(--color-text);
}

/* Dark mode toggle in sidebar — shows icon + text label, full-width */
.portail-sidebar-dark-toggle {
	width: 100%;
	height: auto;
	gap: var(--s-2);
	padding: var(--s-2) var(--s-3);
	justify-content: flex-start;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	border-radius: var(--radius-sm);
	margin-top: var(--s-2);
}

/* Language toggle — FR|EN switcher in header */
.portail-lang-toggle {
	display: flex;
	align-items: center;
	gap: 2px;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	flex-shrink: 0;
}

.portail-lang-btn {
	padding: 0.2rem 0.5rem;
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
	text-decoration: none;
	background: transparent;
	border: none;
	cursor: pointer;
	transition:
		color var(--transition),
		background var(--transition);
	line-height: 1.5;
}

.portail-lang-btn:hover {
	color: var(--color-text);
	background: var(--color-surface-muted);
}

.portail-lang-btn--active {
	color: var(--color-brand-text);
	background: var(--color-brand-active);
	font-weight: var(--fw-semi);
	cursor: default;
}

/* i18n fallback banner — shown when EN page is not yet translated */
.i18n-fallback-banner {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	margin-bottom: var(--s-6);
	background: color-mix(
		in srgb,
		var(--color-warning, #f59e0b) 10%,
		transparent
	);
	border: var(--border-width) solid
		color-mix(in srgb, var(--color-warning, #f59e0b) 40%, transparent);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* Mobile menu toggle */
.portail-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--s-2);
	border-radius: var(--radius-md);
	color: var(--color-text-muted);
	line-height: 1;
	transition:
		background var(--transition),
		color var(--transition);
}

.portail-menu-toggle:hover {
	background: var(--color-surface-muted);
	color: var(--color-text);
}

.portail-menu-toggle svg {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}

/* Logo */
.portail-logo {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	text-decoration: none;
}

.portail-logo-icon {
	flex-shrink: 0;
	display: block;
}

.portail-logo-text {
	display: flex;
	flex-direction: column;
	line-height: var(--lh-tight);
}

.portail-logo-name {
	font-size: var(--text-sm);
	font-weight: var(--fw-semi);
	color: var(--color-brand-text);
}

.portail-logo-sub {
	font-size: 0.6875rem;
	color: var(--color-text-muted);
}

/* Sidebar search */
.portail-sidebar-search {
	position: relative;
	padding: var(--s-4) var(--s-4) var(--s-3);
	border-bottom: var(--border-width) solid var(--color-border);
}

.portail-sidebar-search-icon {
	position: absolute;
	left: calc(var(--s-4) + var(--s-3));
	top: 50%;
	transform: translateY(-50%) translateY(calc(var(--s-4) / 2 - var(--s-3) / 2));
	width: 1rem;
	height: 1rem;
	color: var(--color-text-muted);
	pointer-events: none;
}

.portail-sidebar-search input {
	width: 100%;
	padding: var(--s-2) var(--s-3) var(--s-2)
		calc(var(--s-3) + 1.25rem + var(--s-2));
	font-size: var(--text-sm);
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-full);
	color: var(--color-text);
	outline: none;
	transition:
		border-color var(--transition),
		box-shadow var(--transition);
}

.portail-sidebar-search input:focus {
	border-color: var(--color-brand-border);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.portail-sidebar-search input::placeholder {
	color: var(--color-text-muted);
}

/* Search results dropdown */
.search-results {
	position: absolute;
	top: calc(100% + var(--s-1));
	left: 0;
	right: 0;
	list-style: none;
	padding: var(--s-1);
	margin: 0;
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	z-index: var(--z-dropdown);
}

.search-result-item a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--s-2) var(--s-3);
	border-radius: var(--radius-md);
	text-decoration: none;
	color: var(--color-text);
	transition: background var(--transition);
}

.search-result-item a:hover,
.search-result-item--active a {
	background: var(--color-brand-active);
}

.search-result-item strong {
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--color-brand-text);
}

.search-result-item span {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

/* Header right */
.portail-version {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.portail-last-updated {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	color: var(--color-text-muted);
	cursor: default;
}

.portail-last-updated-text {
	font-size: var(--text-xs);
	white-space: nowrap;
}

.portail-logout {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	padding: var(--s-2) var(--s-4);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-full);
	text-decoration: none;
	transition:
		color var(--transition),
		border-color var(--transition),
		background var(--transition);
	white-space: nowrap;
}

.portail-logout-icon {
	display: none;
	flex-shrink: 0;
}

.portail-logout:hover {
	color: var(--color-brand-text);
	border-color: var(--color-brand-border);
	background: var(--color-brand-active);
}

/* ── Header CTA ───────────────────────────────────────── */
/* Base style must appear BEFORE media queries — same specificity, order decides. */

.portail-header-cta {
	display: inline-flex;
	align-items: center;
	padding: var(--s-2) var(--s-5);
	background: var(--color-header-cta-bg);
	color: var(--color-header-cta-fg);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	border-radius: var(--radius-full);
	text-decoration: none;
	transition:
		background var(--transition),
		color var(--transition);
	white-space: nowrap;
}

.portail-header-cta:hover {
	background: color-mix(in srgb, var(--color-header-cta-bg) 85%, transparent);
}

@media (max-width: 768px) {
	/* Last-updated is secondary — hide first to reclaim space */
	.portail-last-updated {
		display: none;
	}
}

@media (max-width: 640px) {
	/* CTA button hidden on small screens — accessible via sidebar or login flow */
	.portail-header-cta {
		display: none;
	}

	/* Keep version visible: useful context even on small screens */
	.portail-version {
		display: block;
		font-size: var(--text-xs);
		white-space: nowrap;
		margin-left: auto;
	}

	/* Hide logo subtitle — save header width */
	.portail-logo-sub {
		display: none;
	}

	/* Scale down headings so they don't dominate on phone screens */
	.portail-content h1 {
		font-size: 1.25rem;
	}
	.portail-content h2 {
		font-size: 1.05rem;
	}
	.portail-content h3 {
		font-size: var(--text-base);
	}
	.api-intro h1 {
		font-size: 1.375rem;
	}

	/* Allow inline code to wrap rather than overflow — only outside <pre> blocks.
   * overflow-wrap: break-word breaks only when a word won't fit (last resort).
   * break-all was too aggressive: it split every character, causing vertical stacking
   * in table cells. Exclude pre > code so code blocks stay pre-formatted. */
	.portail-content :not(pre) > code {
		overflow-wrap: break-word;
		word-break: break-word;
	}
}

@media (max-width: 480px) {
	/* Ultra-narrow: keep only toggle + logout in header */
	.portail-version {
		display: none;
	}

	.portail-header-right {
		gap: var(--s-2);
		padding: 0 var(--s-3);
	}

	/* Logout: icon only — remove border/pill, match dark toggle style */
	.portail-logout {
		padding: var(--s-2);
		border: none;
		border-radius: var(--radius-sm);
	}

	.portail-logout-icon {
		display: block;
	}

	.portail-logout-text {
		display: none;
	}
}

/* @doxallia/design — Navigation styles */

.portail-sidebar-chat-link {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin: 0 var(--s-6) var(--s-2);
	padding: var(--s-3) var(--s-4);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--color-brand-text);
	background: var(--color-brand-active);
	border: var(--border-width) solid var(--color-brand-border);
	text-decoration: none;
	transition:
		background var(--transition),
		border-color var(--transition);
}

.portail-sidebar-chat-link:hover,
.portail-sidebar-chat-link--active {
	background: var(--color-brand-active);
	border-color: var(--color-brand);
	color: var(--color-brand);
}

/* Locked state — visible but not interactive (role-gated, bientôt) */
.portail-sidebar-chat-link--locked {
	cursor: default;
	opacity: 0.6;
}

.portail-sidebar-chat-link--locked:hover {
	background: var(--color-brand-active);
	border-color: var(--color-brand-border);
	color: var(--color-brand-text);
}

.portail-sidebar-chat-link svg {
	flex-shrink: 0;
	color: var(--color-brand);
}

.portail-sidebar-support {
	padding: var(--s-4) var(--s-6);
	border-top: var(--border-width) solid var(--color-border);
	flex-shrink: 0;
}

.portail-sidebar-support-box {
	background: var(--color-brand-active);
	border: var(--border-width) solid var(--color-brand-border);
	border-radius: var(--radius-lg);
	padding: var(--s-4);
}

.portail-sidebar-support-title {
	display: block;
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	color: var(--color-brand-text);
	margin-bottom: var(--s-1);
}

.portail-sidebar-support-text {
	display: block;
	font-size: var(--text-xs);
	color: var(--color-text);
	margin-bottom: var(--s-3);
}

.portail-sidebar-support-link {
	font-size: var(--text-xs);
	color: var(--color-brand-text);
	text-decoration: underline;
	transition: opacity var(--transition);
}

.portail-sidebar-support-link:hover {
	opacity: 0.75;
}

.nav-section {
	margin-bottom: var(--s-2);
}

.nav-section + .nav-section {
	padding-top: var(--s-4);
}

.nav-section-label {
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	color: var(--color-text-subtle);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--s-2);
	padding: 0 var(--s-3);
}

.nav-section-toggle summary {
	list-style: none;
}

.nav-section-toggle summary::-webkit-details-marker {
	display: none;
}

.nav-section-summary {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-1) var(--s-3);
	margin-bottom: var(--s-2);
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	color: var(--color-text-subtle);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	border-radius: var(--radius-lg);
	user-select: none;
	transition:
		background var(--transition),
		color var(--transition);
}

.nav-section-summary:hover {
	background: var(--color-surface-muted);
	color: var(--color-text);
}

.nav-section-summary:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.nav-section-chevron {
	margin-left: auto;
	width: 10px;
	height: 10px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--transition);
	flex-shrink: 0;
}

.nav-section-toggle[open] .nav-section-chevron {
	transform: rotate(-135deg);
}

.nav-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.nav-item a {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-2) var(--s-3);
	border-radius: var(--radius-lg);
	text-decoration: none;
	font-size: var(--text-sm);
	color: var(--color-text);
	transition:
		background var(--transition),
		color var(--transition);
}

.nav-item a:hover {
	background: var(--color-surface-muted);
}

.nav-item a:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.nav-item--active a,
.nav-item a[aria-current="page"] {
	background: var(--color-brand-active);
	color: var(--color-brand-text);
	font-weight: var(--fw-medium);
	box-shadow: inset 3px 0 0 var(--color-brand);
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.nav-badge {
	margin-left: auto;
	font-size: 0.65rem;
	font-weight: var(--fw-semi);
	padding: 0.1rem var(--s-1);
	border-radius: var(--radius-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.4;
	background: var(--color-surface-muted);
	color: var(--color-text-subtle);
}

.nav-badge[data-method="GET"] {
	background: var(--color-get-bg);
	color: var(--color-get-fg);
}
.nav-badge[data-method="POST"] {
	background: var(--color-post-bg);
	color: var(--color-post-fg);
}
.nav-badge[data-method="PUT"] {
	background: var(--color-put-bg);
	color: var(--color-put-fg);
}
.nav-badge[data-method="DELETE"] {
	background: var(--color-delete-bg);
	color: var(--color-delete-fg);
}

.nav-badge[data-label="v1.3"] {
	background: var(--callout-v13-bg);
	color: var(--callout-v13-fg);
}
.nav-badge[data-label="Test"] {
	background: var(--color-patch-bg);
	color: var(--color-patch-fg);
}
.nav-badge[data-label="Fiscal"] {
	background: var(--color-put-bg);
	color: var(--color-put-fg);
}
.nav-badge[data-label="Admin"] {
	background: var(--color-delete-bg);
	color: var(--color-delete-fg);
}
.nav-badge[data-label="Nouveau"] {
	background: var(--color-brand-active);
	color: var(--color-brand-text);
}
.nav-badge[data-label="Migration"] {
	background: var(--callout-warning-bg);
	color: var(--callout-warning-fg);
}

.nav-divider {
	border: none;
	border-top: var(--border-width) solid var(--color-border);
	margin: var(--s-3) var(--s-4);
	opacity: 0.5;
}

.nav-zone-label {
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-subtle);
	padding: var(--s-4) var(--s-4) var(--s-1);
	margin-top: var(--s-2);
	user-select: none;
}

/* ── Nav item icon ────────────────────────────────────── */

.nav-item-icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	color: var(--color-text-subtle);
}

/* SVG must fill the icon container — without explicit size the browser
   may render it at 300×150px (spec default) which breaks mobile layout. */
.nav-item-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.nav-item a,
.nav-group-summary {
	display: flex;
	align-items: center;
	gap: var(--s-2);
}

/* ── Collapsible nav group ────────────────────────────── */

.nav-group {
	list-style: none;
}

.nav-group summary {
	list-style: none;
}

.nav-group summary::-webkit-details-marker {
	display: none;
}

.nav-group-summary {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-2) var(--s-3);
	border-radius: var(--radius-lg);
	cursor: pointer;
	font-size: var(--text-sm);
	color: var(--color-text);
	transition: background var(--transition);
	user-select: none;
}

.nav-group-summary:hover {
	background: var(--color-surface-muted);
}

.nav-group-summary:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.nav-group-chevron {
	margin-left: auto;
	width: 0.625rem;
	height: 0.625rem;
	border-right: 1.5px solid var(--color-text-subtle);
	border-bottom: 1.5px solid var(--color-text-subtle);
	transform: rotate(45deg);
	transition: transform var(--transition);
	flex-shrink: 0;
}

.nav-group[open] .nav-group-chevron {
	transform: rotate(-135deg);
}

/* ── Nav group children ───────────────────────────────── */

.nav-group-children {
	list-style: none;
	padding: var(--s-1) 0 var(--s-1) var(--s-6);
	margin: 2px 0 0;
	border-left: 2px solid var(--color-border);
	margin-left: calc(var(--s-3) + 0.5rem);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.nav-child-item {
	list-style: none;
}

.nav-child-link {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-1) var(--s-2);
	border-radius: var(--radius-md);
	text-decoration: none;
	font-size: var(--text-xs);
	color: var(--color-text-subtle);
	transition:
		background var(--transition),
		color var(--transition);
	overflow: hidden;
}

.nav-child-link:hover {
	background: var(--color-surface-muted);
	color: var(--color-text);
}

/* ── Locked nav items (coming soon) ──────────────────── */

.nav-child-link--locked {
	cursor: default;
	pointer-events: none;
}

.nav-item--locked .nav-item-link {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-2) var(--s-3);
	width: 100%;
	cursor: default;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.nav-soon {
	margin-left: auto;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	white-space: nowrap;
	flex-shrink: 0;
}

/* ── Nav method badge (in children) ──────────────────── */

.nav-method-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-family: var(--font-mono);
	font-size: 0.625rem;
	font-weight: var(--fw-semi);
	padding: 0.0625rem var(--s-1);
	border-radius: var(--radius-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.4;
	background: var(--color-surface-muted);
	color: var(--color-text-subtle);
}

.nav-method-badge[data-method="GET"] {
	background: var(--color-get-bg);
	color: var(--color-get-fg);
}
.nav-method-badge[data-method="POST"] {
	background: var(--color-post-bg);
	color: var(--color-post-fg);
}
.nav-method-badge[data-method="PUT"] {
	background: var(--color-put-bg);
	color: var(--color-put-fg);
}
.nav-method-badge[data-method="DELETE"] {
	background: var(--color-delete-bg);
	color: var(--color-delete-fg);
}
.nav-method-badge[data-method="PATCH"] {
	background: var(--color-patch-bg);
	color: var(--color-patch-fg);
}

/* ── Nav top list (no section label) ─────────────────── */

.nav-list--top {
	margin-bottom: var(--s-4);
	padding-bottom: var(--s-4);
	border-bottom: var(--border-width) solid var(--color-border);
}

/* @doxallia/design — Prose (markdown typography) styles */

.portail-content h1 {
	font-size: var(--text-2xl);
	font-weight: var(--fw-semi);
	color: var(--color-brand-text);
	line-height: var(--lh-tight);
	margin-bottom: var(--s-4);
}

.portail-content h2 {
	font-size: var(--text-xl);
	font-weight: var(--fw-semi);
	color: var(--color-brand-text);
	line-height: var(--lh-tight);
	margin-top: var(--s-10);
	margin-bottom: var(--s-3);
	padding-bottom: var(--s-2);
	border-bottom: 2px solid
		color-mix(in srgb, var(--color-brand) 15%, transparent);
}

.portail-content h3 {
	font-size: var(--text-lg);
	font-weight: var(--fw-medium);
	color: var(--color-brand-text);
	margin-top: var(--s-8);
	margin-bottom: var(--s-2);
}

.portail-content h4 {
	font-size: var(--text-base);
	font-weight: var(--fw-medium);
	color: var(--color-text);
	margin-top: var(--s-6);
	margin-bottom: var(--s-2);
}

.portail-content p {
	margin-bottom: var(--s-4);
}

/* :not(.btn) excludes call-to-action pills — their color comes from .btn--*
   rules and would otherwise lose to this rule's specificity (0,1,1 > 0,1,0),
   rendering navy text on navy background. */
.portail-content a:not(.btn) {
	color: var(--color-brand-text);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	text-underline-offset: 2px;
	transition: text-decoration-color var(--transition);
}

.portail-content a:not(.btn):hover {
	text-decoration-color: currentColor;
}

.portail-content ul,
.portail-content ol {
	padding-left: var(--s-6);
	margin-bottom: var(--s-4);
}

.portail-content li {
	margin-bottom: var(--s-1);
}

.portail-content ul:has(.task-item) {
	padding-left: var(--s-2);
}

.portail-content .task-item {
	list-style: none;
	display: flex;
	align-items: baseline;
	gap: var(--s-2);
}

.task-checkbox {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	margin-top: 0.15em;
	accent-color: var(--color-brand-text);
	cursor: pointer;
}

.checklist-reset {
	display: inline-block;
	margin-top: var(--s-2);
	padding: 0;
	background: none;
	border: none;
	font-size: var(--text-sm);
	color: var(--color-text-subtle);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.checklist-reset:hover {
	color: var(--color-text-muted);
}

.portail-content code {
	font-family: var(--font-mono);
	font-size: 0.875em;
	background: color-mix(in srgb, var(--color-brand) 8%, white);
	border: var(--border-width) solid
		color-mix(in srgb, var(--color-brand) 20%, var(--color-border));
	border-radius: var(--radius-sm);
	padding: 0.125em 0.375em;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .portail-content code {
		background: color-mix(
			in srgb,
			var(--color-brand) 25%,
			var(--color-surface)
		);
		border-color: color-mix(
			in srgb,
			var(--color-brand) 35%,
			var(--color-border)
		);
		color: var(--color-text);
	}
}
:root[data-theme="dark"] .portail-content code {
	background: color-mix(in srgb, var(--color-brand) 25%, var(--color-surface));
	border-color: color-mix(in srgb, var(--color-brand) 35%, var(--color-border));
	color: var(--color-text);
}

.portail-content pre {
	background: var(--color-code-bg);
	border-radius: var(--radius-lg);
	padding: var(--s-4);
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	margin-bottom: var(--s-4);
	scrollbar-width: thin;
	scrollbar-color: var(--color-text-subtle) transparent;
}

@media (max-width: 480px) {
	.portail-content pre {
		white-space: pre-wrap;
		word-wrap: break-word;
		overflow-x: hidden;
	}
}

.portail-content pre[data-language] {
	position: relative;
}

.portail-content pre code {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	background: none;
	border: none;
	padding: 0;
	color: var(--color-code-text);
}

.portail-content blockquote {
	border-left: 3px solid var(--color-brand-active);
}

.portail-content table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--s-4);
	font-size: var(--text-sm);
}

.portail-content th {
	text-align: left;
	font-weight: var(--fw-medium);
	color: var(--color-brand-text);
	background: color-mix(in srgb, var(--color-brand) 6%, white);
	padding: var(--s-2) var(--s-3);
	border-bottom: 2px solid
		color-mix(in srgb, var(--color-brand) 20%, var(--color-border));
}

.portail-content td {
	padding: var(--s-2) var(--s-3);
	border-bottom: 1px solid var(--color-border);
	vertical-align: top;
}

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

/* Date de dernière mise à jour — affichée sous le h1 */
.prose-meta {
	font-size: var(--text-sm);
	color: var(--color-text-subtle);
	margin-top: calc(var(--s-2) * -1);
	margin-bottom: var(--s-8);
}

/* @doxallia/design — Login page (authoritative source)
 * Loaded after portail-legacy.css — overrides all conflicting login rules.
 */

/* Full-screen navy page */
body.portail-login-page {
	margin: 0;
	min-height: 100dvh;
	background: var(--color-brand);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

/* Decorative blob container */
.portail-login-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.login-bg-ring {
	position: absolute;
	top: -35%;
	right: -10%;
	width: min(52%, 480px);
	opacity: 0.9;
	pointer-events: none;
	user-select: none;
}

.login-bg-chevrons {
	position: absolute;
	bottom: -15%;
	right: -3%;
	width: min(36%, 340px);
	pointer-events: none;
	user-select: none;
}

@media (max-width: 640px) {
	.portail-login-bg {
		display: none;
	}
}

/* Centered layout wrapper */
.portail-login {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: var(--s-4);
	position: relative;
	z-index: 1;
}

/* White card */
.login-card {
	background: var(--color-surface);
	border-radius: var(--radius-xl);
	padding: var(--s-8);
	width: min(400px, calc(100vw - 2rem));
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

/* Card header */
.login-header {
	margin-bottom: var(--s-6);
}

.login-operator-name {
	display: block;
	font-size: var(--text-xl);
	font-weight: var(--fw-semi);
	color: var(--color-text);
	margin-bottom: var(--s-1);
}

.login-subtitle {
	display: block;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* Form — layout only, card is .login-card */
.login-form {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}

/* Floating label field */
.login-field {
	position: relative;
}

.login-field input {
	width: 100%;
	box-sizing: border-box;
	/* top padding makes room for the floated label */
	padding: 1.25rem var(--s-3) var(--s-2);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--text-base);
	font-family: var(--font-sans);
	color: var(--color-text);
	background: var(--color-bg);
	outline: none;
	transition: border-color var(--transition);
}

.login-field input:focus {
	border-color: var(--color-brand);
	box-shadow: var(--ring-shadow);
}

/* Label starts centered in the input, floats to top when filled or focused */
.login-field label {
	position: absolute;
	left: var(--s-3);
	top: 50%;
	transform: translateY(-50%);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	transition:
		top var(--transition),
		transform var(--transition),
		font-size var(--transition),
		color var(--transition);
	pointer-events: none;
}

.login-field input:focus ~ label,
.login-field input:not(:placeholder-shown) ~ label {
	top: 0.45rem;
	transform: none;
	font-size: var(--text-xs);
	color: var(--color-brand-text);
}

/* Submit button */
.login-submit {
	width: 100%;
	margin-top: var(--s-2);
	padding: var(--s-3);
	background: var(--color-brand);
	color: var(--color-on-brand);
	border: none;
	border-radius: var(--radius-full);
	font-size: var(--text-base);
	font-family: var(--font-sans);
	font-weight: var(--fw-semi);
	cursor: pointer;
	transition: background var(--transition);
}

.login-submit:hover {
	background: var(--color-brand-dark);
}

.login-submit:focus-visible {
	outline: 2px solid var(--color-on-brand);
	outline-offset: 2px;
}

/* Error banner */
.login-error {
	font-size: var(--text-sm);
	color: var(--color-error);
	background: color-mix(in srgb, var(--color-error) 8%, transparent);
	border: var(--border-width) solid
		color-mix(in srgb, var(--color-error) 20%, transparent);
	border-radius: var(--radius-md);
	padding: var(--s-2) var(--s-3);
}

/* Mobile nav overlay — used by header JS */
.portail-mobile-overlay {
	display: none;
	position: fixed;
	inset: 0;
	top: var(--header-height);
	background: rgba(0, 0, 0, 0.2);
	z-index: var(--z-overlay);
}

.portail-mobile-overlay.is-visible {
	display: block;
}

/* @doxallia/design — Mobile responsive styles */

@media (max-width: 1023px) {
	.portail-menu-toggle {
		display: flex;
	}

	.portail-header-inner {
		grid-template-columns: 1fr auto;
	}

	.portail-header-left {
		border-right: none;
	}

	.portail-layout {
		grid-template-columns: 1fr;
	}

	.portail-sidebar {
		position: fixed;
		top: var(--header-height);
		left: 0;
		height: calc(100vh - var(--header-height));
		overflow-y: auto;
		width: var(--sidebar-width);
		z-index: var(--z-sidebar);
		transform: translateX(-100%);
		transition: transform 200ms ease;
		box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
	}

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

	.portail-sidebar-search input {
		font-size: 1rem;
	}

	.portail-main {
		padding: var(--s-6) var(--s-4);
	}
}

@media (max-width: 480px) {
	.portail-main {
		padding: var(--s-4) var(--s-3);
	}
}

/* @doxallia/design — Print and accessibility styles */

.print-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-2) var(--s-4);
	font-size: var(--text-sm);
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	cursor: pointer;
	transition: background var(--transition);
}

.print-btn:hover {
	background: var(--color-border);
}

.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: var(--color-brand);
	color: white;
	padding: 8px;
	text-decoration: none;
	z-index: 100;
}

.skip-link:focus {
	top: 0;
}

.reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	background: var(--color-brand);
	z-index: var(--z-header);
	transition: width 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

@media print {
	body {
		background: white;
		color: black;
	}

	.portail-header,
	.portail-sidebar,
	.portail-main {
		display: none;
	}

	.portail-content {
		max-width: 100%;
		padding: 0;
	}

	a {
		color: black;
		text-decoration: underline;
	}

	a::after {
		content: " (" attr(href) ")";
	}
}


/* Portal-specific styles */
/* portail-specific — styles exclusive to the Invox-IA portail */
/* OpenAPI renderer, invoice validator, dashboards, home hero, */
/* static pages — not shared with wiki-site.                   */

/* ═══════════════════════════════════════════════════════
   OpenAPI renderer
   ═══════════════════════════════════════════════════════ */

.api-intro {
  padding-block: var(--s-6);
}
.api-intro h1 {
  font-size: 1.75rem;
  color: var(--color-brand-text);
  margin-bottom: var(--s-2);
}
.api-version {
  color: var(--color-text-secondary);
  margin-bottom: var(--s-4);
}
.api-description {
  color: var(--color-text-secondary);
  max-width: 72ch;
}
.api-servers ul {
  list-style: none;
  padding: 0;
}
.api-servers li {
  margin-block: var(--s-1);
}
.api-spec-download {
  display: inline-block;
  margin-top: var(--s-4);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  text-decoration: none;
}
.api-spec-download:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.tag-section {
  margin-bottom: var(--s-10);
}
.tag-section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-brand-text);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-6);
}
.tag-section-desc {
  color: var(--color-text-secondary);
  margin-bottom: var(--s-4);
}

.endpoint-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  margin-bottom: var(--s-4);
}

.endpoint-card[data-method="GET"] {
  border-left: 3px solid var(--color-get-fg);
}
.endpoint-card[data-method="POST"] {
  border-left: 3px solid var(--color-post-fg);
}
.endpoint-card[data-method="PUT"] {
  border-left: 3px solid var(--color-put-fg);
}
.endpoint-card[data-method="PATCH"] {
  border-left: 3px solid var(--color-patch-fg);
}
.endpoint-card[data-method="DELETE"] {
  border-left: 3px solid var(--color-delete-fg);
}
.endpoint-header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.endpoint-path {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  padding: 0;
  /* Allow shrinking in flex — prevents long paths from overflowing the header */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permalink-btn {
  display: none;
  margin-left: auto;
  padding: var(--s-1) var(--s-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-subtle);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    color var(--transition),
    background var(--transition);
  line-height: 1;
}

.endpoint-card:hover .permalink-btn,
.permalink-btn:focus-visible {
  display: inline-flex;
  align-items: center;
}

.permalink-btn:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.permalink-btn--copied {
  color: var(--color-success);
  border-color: var(--color-success);
}
.endpoint-summary {
  padding: var(--s-3) var(--s-5);
  margin: 0;
  font-weight: 500;
}
.endpoint-desc {
  padding: 0 var(--s-5) var(--s-3);
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}
/* Base structure from .tag-badge (@doxallia/design) */
.deprecated-badge {
  background: var(--color-status-4xx-bg);
  color: var(--color-status-4xx-fg);
}

/* ── Parameters table ─────────────────────────────────── */
.params-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.params-table th,
.params-table td {
  padding: var(--s-2) var(--s-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.params-table th {
  background: var(--color-bg);
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* Mobile: compact endpoint header and sections */
@media (max-width: 640px) {
  .endpoint-header {
    flex-wrap: wrap;
    padding: var(--s-3) var(--s-3);
    gap: var(--s-2);
  }

  /* Override desktop truncation — show the full path on mobile */
  .endpoint-path {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-all;
  }

  .endpoint-summary,
  .endpoint-desc {
    padding-inline: var(--s-3);
  }
}

/* ── Schema tree ──────────────────────────────────────── */
.schema-tree {
  border: none;
}
.schema-tree > summary {
  cursor: pointer;
  list-style: none;
}
.schema-tree > summary::marker,
.schema-tree > summary::-webkit-details-marker {
  display: none;
}
.schema-tree > summary::before {
  content: "▶ ";
  font-size: 0.6875rem;
  color: var(--color-text-secondary);
  transition: transform 0.15s;
}
.schema-tree[open] > summary::before {
  content: "▼ ";
}

.schema-row {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-1) 0;
  font-size: 0.875rem;
}

@media (max-width: 640px) {
  .schema-row {
    flex-direction: column;
    gap: var(--s-1);
    align-items: flex-start;
  }

  .schema-type,
  .schema-required {
    display: inline-block;
    margin-right: var(--s-2);
    margin-bottom: var(--s-1);
  }
}
.schema-key {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-text-primary);
}
.schema-type {
  background: var(--color-bg);
  color: var(--color-brand-text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}
.schema-required {
  font-size: 0.6875rem;
  background: var(--color-status-5xx-bg);
  color: var(--color-status-5xx-fg);
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-sm);
}
.schema-desc {
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
}
.schema-enum {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}
.schema-example {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}
.schema-circular {
  font-style: italic;
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
}
.schema-union-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
}
.schema-more {
  font-style: italic;
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
}
.schema-tree-root {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--s-3);
  margin-top: var(--s-2);
}
.content-type-label {
  margin-bottom: var(--s-2);
}
.schema-prop {
  position: relative;
}

/* ── Response badges ──────────────────────────────────── */
.response-item {
  margin-bottom: var(--s-3);
}
.response-header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.status-badge {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
}
.status-2xx {
  background: var(--color-status-2xx-bg);
  color: var(--color-status-2xx-fg);
}
.status-4xx {
  background: var(--color-status-4xx-bg);
  color: var(--color-status-4xx-fg);
}
.status-5xx {
  background: var(--color-status-5xx-bg);
  color: var(--color-status-5xx-fg);
}
.status-other {
  background: var(--color-bg);
  color: var(--color-text-secondary);
}
.response-desc {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

/* Response example panel */
.response-example-meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  background: var(--color-code-surface);
  border-bottom: 1px solid var(--color-code-border);
  position: relative;
}
.response-example-content-type {
  font-size: 0.8125rem;
  color: var(--color-code-text-muted);
  font-family: var(--font-mono);
  flex: 1;
}
/* Copy button inside the response meta bar — no absolute positioning */
.copy-btn--meta {
  position: static;
}

/* ── Try-it panel ─────────────────────────────────────── */
.try-it-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.try-it-toggle {
  font-size: 0.8125rem;
  color: var(--color-brand-text);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  transition: background 0.15s;
}
.try-it-toggle:hover {
  background: var(--color-brand-active);
}

.try-it-panel {
  margin-top: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.try-it-auth {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.try-it-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.try-it-token-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}
.try-it-oauth-btn {
  padding: var(--s-2) var(--s-3);
  font-size: 0.8125rem;
  background: var(--color-brand-active);
  color: var(--color-brand-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.try-it-body-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.try-it-body {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  resize: vertical;
}
.try-it-send {
  align-self: flex-start;
  padding: var(--s-2) var(--s-5);
  background: var(--color-brand);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.try-it-send:hover {
  background: var(--color-brand-dark);
}
.try-it-response {
  margin-top: var(--s-2);
}
.try-it-response-meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.try-it-status {
  font-family: var(--font-mono);
  font-weight: 700;
}
.try-it-duration {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}
.try-it-response-body {
  background: #0f172a;
  color: #e2e8f0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding: var(--s-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  max-height: 400px;
  overflow-y: auto;
  white-space: pre;
  line-height: 1.5;
}

/* ── Sidebar openapi nav ──────────────────────────────── */

/* Collapsible tag sections */
.sidebar-tag-section {
  margin-bottom: var(--s-4);
}

/* Remove default <details> marker */
.sidebar-tag-section > summary {
  list-style: none;
}

.sidebar-tag-section > summary::-webkit-details-marker {
  display: none;
}

.sidebar-tag-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-1) var(--s-4);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
  user-select: none;
}

.sidebar-tag-toggle:hover {
  background: var(--color-surface-muted);
}

.sidebar-chevron {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--color-text-subtle);
  flex-shrink: 0;
  transition: transform 200ms ease; /* intentionally slower than --transition (150ms) for a smoother chevron flip */
}

.sidebar-tag-section[open] .sidebar-chevron {
  transform: rotate(180deg);
}

.sidebar-tag-name {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  padding: var(--s-1) var(--s-4);
  margin-bottom: var(--s-1);
}
.sidebar-op-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-op-link {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-4);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition:
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-op-link:hover {
  background: var(--color-brand-active);
  color: var(--color-brand-text);
}

/* ── Invoice validator ────────────────────────────────── */

.validate-page {
  max-width: var(--content-max-width);
}

.validate-intro {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  margin-bottom: var(--s-6);
}

.validate-error {
  font-size: var(--text-sm);
  color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 8%, transparent);
  border: var(--border-width) solid
    color-mix(in srgb, var(--color-error) 20%, transparent);
  border-radius: var(--radius-md);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-5);
}

.validate-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin-bottom: var(--s-8);
}

.validate-input-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.validate-label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.validate-file-input {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.validate-or-divider {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

.validate-or-divider::before,
.validate-or-divider::after {
  content: "";
  flex: 1;
  height: var(--border-width);
  background: var(--color-border);
}

.validate-samples {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-1);
}

.validate-samples-label {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.validate-sample-btn {
  font-size: var(--text-xs);
  color: var(--color-brand-text);
  background: none;
  border: var(--border-width) solid var(--color-brand);
  border-radius: var(--radius-full);
  padding: var(--s-1) var(--s-3);
  cursor: pointer;
  transition:
    background var(--transition),
    color var(--transition);
}

.validate-sample-btn:hover {
  background: var(--color-brand);
  color: #ffffff;
}

.validate-sample-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.validate-options {
  display: flex;
  gap: var(--s-6);
  align-items: flex-end;
  flex-wrap: wrap;
}

.validate-option-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.validate-select {
  padding: var(--s-2) var(--s-3);
  background: var(--color-surface-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--transition);
  cursor: pointer;
}

.validate-select:focus {
  border-color: var(--color-brand-border);
}

.validate-extended-label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text);
  padding-bottom: var(--s-2);
}

.validate-checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-brand);
  cursor: pointer;
  flex-shrink: 0;
}

.validate-option-note {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

/* ── Validation result ────────────────────────────────── */

.validate-result {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-6);
  border-top: var(--border-width) solid var(--color-border);
}

.validate-result-header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.validate-result-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  flex-shrink: 0;
}

.validate-result-badge--valid {
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
}

.validate-result-badge--warning {
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  color: var(--color-warning);
}

.validate-result-badge--error {
  background: color-mix(in srgb, var(--color-error) 10%, transparent);
  color: var(--color-error);
}

.validate-result-filename {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: var(--fw-medium);
}

.validate-result-meta {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.validate-result-error {
  font-size: var(--text-sm);
  color: var(--color-error);
  padding: var(--s-2) var(--s-4);
}

.validate-download-btn {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-brand-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.validate-download-btn:hover {
  color: var(--color-brand-text);
}

/* ── Per-pass accordion ───────────────────────────────── */

.validate-pass {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.validate-pass-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  list-style: none;
  background: var(--color-surface);
  transition: background var(--transition);
  user-select: none;
}

.validate-pass-summary::-webkit-details-marker {
  display: none;
}

.validate-pass-summary:hover {
  background: var(--color-surface-muted);
}

.validate-pass--ok > .validate-pass-summary {
  border-left: 3px solid var(--color-success);
}

.validate-pass--warning > .validate-pass-summary {
  border-left: 3px solid var(--color-warning);
}

.validate-pass--error > .validate-pass-summary {
  border-left: 3px solid var(--color-error);
}

.validate-pass-label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.validate-pass-count {
  font-size: var(--text-xs);
}

.validate-pass-count--ok {
  color: var(--color-success);
  font-weight: var(--fw-semi);
}

.validate-pass-count--warning {
  color: var(--color-warning);
}

.validate-pass-count--error {
  color: var(--color-error);
}

.validate-pass-empty {
  font-size: var(--text-sm);
  color: var(--color-success);
  padding: var(--s-4);
}

.validate-pass-saxon-error {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 5%, transparent);
  padding: var(--s-4);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── SVRL messages ────────────────────────────────────── */

.validate-msg {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2);
  align-items: baseline;
  padding: var(--s-2) var(--s-4);
  font-size: var(--text-sm);
  border-top: var(--border-width) solid var(--color-border);
}

.validate-pass > .validate-msg:first-child,
details.validate-pass .validate-msg:first-of-type {
  border-top: none;
}

.validate-msg--error {
  background: color-mix(in srgb, var(--color-error) 4%, transparent);
  border-left: 3px solid var(--color-error);
}

.validate-msg--warning {
  background: color-mix(in srgb, var(--color-warning) 6%, transparent);
  border-left: 3px solid var(--color-warning);
}

.validate-msg-id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.validate-msg-text {
  color: var(--color-text);
}

.validate-msg-location {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  word-break: break-all;
}

/* ── Validator (validator-* components) ──────────────────── */

.validator-intro {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  margin-bottom: var(--s-4);
}

.validator-unavailable {
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  border: var(--border-width) solid
    color-mix(in srgb, var(--color-warning) 30%, transparent);
  border-radius: var(--radius-md);
  padding: var(--s-4);
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--s-4);
}

.validator-error {
  font-size: var(--text-sm);
  color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 8%, transparent);
  border: var(--border-width) solid
    color-mix(in srgb, var(--color-error) 20%, transparent);
  border-radius: var(--radius-md);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
}

.validator-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}

/* ── Tab toggle ───────────────────────────────────── */

.validator-input-toggle {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.toggle-btn {
  padding: var(--s-1) var(--s-4);
  font-size: var(--text-sm);
  background: var(--color-surface-muted);
  /* --color-text-subtle gives readable contrast in both light (#5b6b7e) and dark (#9aacbf) */
  border: var(--border-width) solid var(--color-text-subtle);
  border-radius: var(--radius-full);
  color: var(--color-text-subtle);
  cursor: pointer;
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition);
}

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

.toggle-btn--active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #ffffff;
}

.toggle-btn--active:hover {
  background: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
  color: #ffffff;
}

/* ── Sections ────────────────────────────────────── */

.validator-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* ── Dropzone ────────────────────────────────────── */

.validator-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 7rem;
  padding: var(--s-4);
  background: var(--color-surface-muted);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--transition),
    background var(--transition);
}

.validator-dropzone:hover,
.validator-dropzone:focus-within,
.validator-dropzone--drag {
  border-color: var(--color-brand-border);
  background: color-mix(
    in srgb,
    var(--color-brand) 4%,
    var(--color-surface-muted)
  );
}

.validator-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.validator-dropzone label {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  pointer-events: none;
}

.validator-dropzone .link {
  color: var(--color-brand-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.validator-filename {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
}

/* ── Paste textarea ──────────────────────────────── */

/* Delta: width + padding override + resize (base from .form-control.form-control--mono) */
.validator-textarea {
  width: 100%;
  padding: var(--s-3);
  resize: vertical;
}

/* ── SIREN / SIRET section ───────────────────────── */

.siren-form-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-size: var(--text-sm);
}

.siren-form-row label {
  color: var(--color-text);
  font-weight: var(--fw-medium);
}

.siren-form-row [role="group"] {
  display: flex;
  gap: var(--s-4);
}

/* Delta: width + font-size override (base from .form-control.form-control--mono) */
.siren-input {
  width: 12rem;
  font-size: var(--text-sm);
}

/* ── Samples dropdown ────────────────────────────── */

.validator-samples {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-size: var(--text-sm);
}

.validator-samples label {
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.validator-samples select {
  padding: var(--s-1) var(--s-3);
  background: var(--color-surface-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition);
}

.validator-samples select:focus {
  border-color: var(--color-brand-border);
}

/* ── Options row ────────────────────────────────── */

.validator-options {
  display: flex;
  gap: var(--s-6);
  align-items: flex-end;
  flex-wrap: wrap;
}

.validator-option {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  font-size: var(--text-sm);
}

.validator-option label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
  color: var(--color-text);
  padding-bottom: var(--s-2);
}

.validator-option select {
  padding: var(--s-2) var(--s-3);
  background: var(--color-surface-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition);
}

.validator-option select:focus {
  border-color: var(--color-brand-border);
}

.validator-option input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-brand);
  cursor: pointer;
  flex-shrink: 0;
}

.validator-option-note {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

/* ── Submit button ──────────────────────────────── */

/* Delta: align-self only (base from .btn.btn--primary) */
.validator-submit {
  align-self: flex-start;
}

/* ── SIREN result ───────────────────────────────── */

.siren-result {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  border: var(--border-width) solid transparent;
  margin-top: var(--s-4);
}

.siren-result--ok {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 25%, transparent);
  color: var(--color-text);
}

.siren-result--fail {
  background: color-mix(in srgb, var(--color-error) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-error) 20%, transparent);
  color: var(--color-text);
}

.siren-result-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.siren-result--ok .siren-result-icon {
  color: var(--color-success);
}

.siren-result--fail .siren-result-icon {
  color: var(--color-error);
}

/* ── Validation result ──────────────────────────── */

.validator-result {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: var(--border-width) solid var(--color-border);
}

.validator-result-header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-lg);
}

.validator-result-header--ok {
  border-left-color: var(--color-success);
}

.validator-result-header--warning {
  border-left-color: var(--color-warning);
}

.validator-result-header--error {
  border-left-color: var(--color-error);
}

.validator-result-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.validator-result-header--ok .validator-result-icon {
  color: var(--color-success);
}

.validator-result-header--warning .validator-result-icon {
  color: var(--color-warning);
}

.validator-result-header--error .validator-result-icon {
  color: var(--color-error);
}

.validator-result-summary {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  flex: 1;
  min-width: 0;
}

.validator-result-summary strong {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  word-break: break-all;
}

.validator-result-meta {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.validator-result-status {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
}

.validator-result-header--ok .validator-result-status {
  color: var(--color-success);
}

.validator-result-header--warning .validator-result-status {
  color: var(--color-warning);
}

.validator-result-header--error .validator-result-status {
  color: var(--color-error);
}

.validator-download {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-brand-text);
  background: none;
  border: var(--border-width) solid var(--color-brand-border);
  border-radius: var(--radius-full);
  padding: var(--s-1) var(--s-3);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--transition),
    color var(--transition);
}

.validator-download:hover {
  background: var(--color-brand);
  color: #ffffff;
  border-color: var(--color-brand);
}

.validator-well-formedness-error {
  padding: var(--s-3) var(--s-4);
  background: color-mix(in srgb, var(--color-error) 6%, transparent);
  border: var(--border-width) solid
    color-mix(in srgb, var(--color-error) 20%, transparent);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* ── Per-pass accordion ─────────────────────────── */

.validator-pass {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.validator-pass-summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  list-style: none;
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  transition: background var(--transition);
  user-select: none;
}

.validator-pass-summary::-webkit-details-marker {
  display: none;
}

.validator-pass-summary:hover {
  background: var(--color-surface-muted);
}

.validator-pass--ok > .validator-pass-summary {
  border-left: 3px solid var(--color-success);
}

.validator-pass--warn > .validator-pass-summary {
  border-left: 3px solid var(--color-warning);
}

.validator-pass--fail > .validator-pass-summary {
  border-left: 3px solid var(--color-error);
}

.validator-pass--saxon-error > .validator-pass-summary {
  border-left: 3px solid var(--color-warning);
}

.validator-pass-saxon {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 5%, transparent);
  padding: var(--s-4);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── SVRL messages ──────────────────────────────── */

.validator-msg {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2) var(--s-3);
  align-items: baseline;
  padding: var(--s-2) var(--s-4);
  font-size: var(--text-sm);
  border-top: var(--border-width) solid var(--color-border);
}

.validator-msg--error {
  background: color-mix(in srgb, var(--color-error) 4%, transparent);
  border-left: 3px solid var(--color-error);
}

.validator-msg--warning {
  background: color-mix(in srgb, var(--color-warning) 6%, transparent);
  border-left: 3px solid var(--color-warning);
}

.validator-msg-id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.validator-msg-text {
  color: var(--color-text);
}

.validator-msg-loc {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  word-break: break-all;
}

.validator-msg-hint {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
  margin-top: var(--s-1);
  background: color-mix(
    in srgb,
    var(--color-brand) 5%,
    var(--color-surface-muted)
  );
  border-left: 3px solid var(--color-brand-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-xs);
}

.validator-msg-human {
  color: var(--color-text);
  font-style: italic;
}

.validator-msg-fix {
  font-family: var(--font-mono);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Static pages (FAQ, Changelog, Terms) ─────────────── */

.static-page {
  max-width: 52rem;
}

.static-page-header {
  margin-bottom: var(--s-8);
}

.static-page-header h1 {
  margin-bottom: var(--s-3);
}

.static-page-intro {
  color: var(--color-text-subtle);
  font-size: var(--text-base);
}

/* ── FAQ ──────────────────────────────────────────────── */

.faq {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.faq-category h2 {
  font-size: var(--text-base);
  font-weight: var(--fw-semi);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: var(--s-2);
  border-bottom: var(--border-width) solid var(--color-border);
  margin-bottom: var(--s-3);
}

.faq-items {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* .faq-item — structure provided by .details-toggle (@doxallia/design) */

.faq-answer {
  padding: var(--s-4);
  color: var(--color-text-subtle);
  line-height: var(--lh-relaxed, 1.7);
}

.faq-answer ul {
  margin-top: var(--s-2);
  padding-left: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.faq-answer li {
  list-style: disc;
}

.faq-answer p + p {
  margin-top: var(--s-2);
}

.faq-cta {
  margin-top: var(--s-12);
  background: var(--color-surface-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
}

.faq-cta h3 {
  margin-bottom: var(--s-2);
}

.faq-cta p {
  color: var(--color-text-subtle);
  margin-bottom: var(--s-4);
}

.faq-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* ── Changelog ────────────────────────────────────────── */

.changelog-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  background: var(--callout-tip-bg);
  border: var(--border-width) solid #86efac; /* green-300 */
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-8);
}

.changelog-banner-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--color-success);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: var(--fw-bold, 700);
}

.changelog-banner-title {
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--fw-semi);
  margin-bottom: var(--s-1);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.changelog-banner-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--s-1);
}

.changelog-banner-desc {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

/* Base structure from .tag-badge (@doxallia/design) */
.changelog-badge {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.changelog-badge--stable {
  background: #166534; /* green-800 — was --color-success (#16a34a, 3.2:1 with white) → 6.3:1 WCAG AA */
  color: #fff;
}
.changelog-badge--release {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  border: var(--border-width) solid var(--color-border);
}
.changelog-badge--upcoming {
  background: var(--color-surface-muted);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border);
}

.changelog-timeline {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--s-8);
}

.changelog-entry {
  display: flex;
  gap: var(--s-4);
}

.changelog-entry-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.changelog-entry-dot {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  flex-shrink: 0;
}

.changelog-entry-line {
  width: 2px;
  flex: 1;
  min-height: var(--s-6);
  background: var(--color-border);
  margin: var(--s-2) 0;
}

.changelog-entry-content {
  flex: 1;
  padding-bottom: var(--s-8);
}

.changelog-entry-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

.changelog-entry-title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.changelog-entry-title h3 {
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--fw-semi);
}

.changelog-entry-date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.changelog-entry-content h4 {
  font-weight: var(--fw-medium);
  margin-bottom: var(--s-3);
  color: var(--color-text-subtle);
}

.changelog-items {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: 0;
  list-style: none;
}

.changelog-item {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.changelog-item-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  padding: 1px var(--s-2);
  border-radius: var(--radius-sm, 4px);
  white-space: nowrap;
  flex-shrink: 0;
}

.changelog-item--feature .changelog-item-label {
  background: var(--color-status-2xx-bg);
  color: var(--color-status-2xx-fg);
}
.changelog-item--improvement .changelog-item-label {
  background: var(--color-get-bg);
  color: var(--color-get-fg);
}
.changelog-item--fix .changelog-item-label {
  background: var(--color-status-5xx-bg);
  color: var(--color-status-5xx-fg);
}
.changelog-item--security .changelog-item-label {
  background: var(--color-patch-bg);
  color: var(--color-patch-fg);
}

.changelog-roadmap {
  background: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 100%);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  margin-bottom: var(--s-6);
  color: #f1f5f9;
}

.changelog-roadmap h2 {
  margin-bottom: var(--s-2);
}

.changelog-roadmap > p {
  color: rgba(241, 245, 249, 0.75);
  margin-bottom: var(--s-4);
  font-size: var(--text-sm);
}

.changelog-roadmap-item {
  display: flex;
  gap: var(--s-3);
  background: rgba(255, 255, 255, 0.1);
  border: var(--border-width) solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  padding: var(--s-4);
  color: #f1f5f9;
}

.changelog-roadmap-item h3 {
  font-weight: var(--fw-medium);
  margin-bottom: var(--s-2);
  font-size: var(--text-sm);
  color: #fff;
}

.changelog-roadmap-item ul {
  padding-left: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  font-size: var(--text-sm);
  color: rgba(241, 245, 249, 0.8);
}

.changelog-roadmap-item li {
  list-style: disc;
}

.changelog-semver {
  background: var(--color-text);
  color: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
}

.changelog-semver h3 {
  font-weight: var(--fw-semi);
  margin-bottom: var(--s-2);
  color: var(--color-surface);
}

.changelog-semver > p:first-of-type {
  font-size: var(--text-sm);
  color: var(--color-surface-muted);
  margin-bottom: var(--s-3);
}

.changelog-semver ul {
  padding-left: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: var(--text-sm);
  color: var(--color-surface-muted);
  margin-bottom: var(--s-4);
}

.changelog-semver li {
  list-style: disc;
}

.changelog-semver-note {
  background: color-mix(in srgb, var(--color-surface) 10%, transparent);
  border-radius: var(--radius-md);
  padding: var(--s-4);
  font-size: var(--text-sm);
  color: var(--color-surface-muted);
}

/* ── Terms ────────────────────────────────────────────── */

.terms {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.terms-intro {
  background: var(--color-surface-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.terms-section h2 {
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--fw-semi);
  margin-bottom: var(--s-3);
}

.terms-section h3 {
  font-weight: var(--fw-medium);
  margin-bottom: var(--s-2);
  margin-top: var(--s-4);
  font-size: var(--text-sm);
}

.terms-section h3:first-child {
  margin-top: 0;
}

.terms-card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  line-height: var(--lh-relaxed, 1.7);
}

.terms-card p + p {
  margin-top: var(--s-3);
}

.terms-card ul {
  padding-left: var(--s-4);
  margin-top: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.terms-card li {
  list-style: disc;
}

.terms-card--table {
  padding: 0;
  overflow: hidden;
}

.terms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.terms-table thead {
  background: var(--color-surface-muted);
}

.terms-table th {
  text-align: left;
  padding: var(--s-3) var(--s-5);
  font-weight: var(--fw-semi);
  color: var(--color-text);
  border-bottom: var(--border-width) solid var(--color-border);
}

.terms-table td {
  padding: var(--s-3) var(--s-5);
  color: var(--color-text-subtle);
  border-bottom: var(--border-width) solid var(--color-border);
}

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

.terms-table-note {
  padding: var(--s-3) var(--s-5);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  border-top: var(--border-width) solid var(--color-border);
}

.terms-contact {
  background: var(--color-surface-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
}

.terms-contact h2 {
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--fw-semi);
  margin-bottom: var(--s-2);
}

.terms-contact > p {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  margin-bottom: var(--s-4);
}

.terms-contact-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s-2) var(--s-5);
  font-size: var(--text-sm);
  margin-bottom: var(--s-4);
}

.terms-contact-list dt {
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.terms-contact-list dd {
  color: var(--color-text-subtle);
}

.terms-contact-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--s-3);
}

/* ── Home page ────────────────────────────────────────── */

/* Hero */
.home-hero {
  background:
    radial-gradient(
      ellipse at 70% -20%,
      rgba(99, 130, 255, 0.18) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse at 0% 100%,
      rgba(30, 58, 138, 0.4) 0%,
      transparent 50%
    ),
    var(--color-brand);
  border-radius: var(--radius-xl);
  padding: var(--s-10);
  margin-bottom: var(--s-10);
  position: relative;
  overflow: hidden;
}

/* Subtle dot-grid overlay for depth */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.06) 1px,
    transparent 1px
  );
  background-size: 28px 28px;
  pointer-events: none;
}

.home-hero-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.12);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--s-4);
}

.home-hero h1 {
  font-size: var(--text-4xl); /* DS2 heading-1 36px */
  font-weight: var(--fw-bold);
  color: #fff;
  margin-bottom: var(--s-4);
  line-height: var(--lh-tight);
}

.home-hero-content h1 {
  font-size: var(--text-4xl); /* DS2 heading-1 36px */
  line-height: 1.2;
}

.home-hero-desc {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.75);
  max-width: 44rem;
  margin-bottom: var(--s-5);
  line-height: 1.7;
}

/* support-card-btn inside .portail-content — override prose link underline.
 * prose.css sets .portail-content a { text-decoration: underline } with specificity 0,1,1
 * which beats .support-card-btn { text-decoration: none } (0,1,0). Fix here at 0,2,0. */
.portail-content .support-card-btn {
  text-decoration: none;
}

/* Hero CTAs — layout via support-card-actions, color overrides for dark bg */
.home-hero .support-card-actions {
  margin-bottom: var(--s-5);
}

/* CTA button colors are provided by .surface--inverse on the .home-hero
 * container (see @doxallia/design v1.1+ compositions/surface-inverse.css).
 * Don't re-hardcode opacities here — token remap is the single source of
 * truth so the contract stays consistent across consumers. */

.home-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.home-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.1);
  border: var(--border-width) solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  padding: var(--s-1) var(--s-3);
}

/* Sections */
.home-section {
  clear: right;
  margin-bottom: var(--s-12);
}

.home-section-title {
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--s-4);
}

/* Environment status list */
.home-env-status {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.home-env-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--border-width) solid var(--color-border);
}

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

.home-env-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
}

.home-env-name {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
}

.home-env-note {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin: var(--s-1) 0 0;
}

/* Numbered onboarding steps */
.home-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.home-step {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
}

.home-step-num {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  margin-top: 0.1em;
}

.home-step-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.home-step-title {
  font-size: var(--text-base);
  font-weight: var(--fw-semi);
  color: var(--color-text);
  text-decoration: none;
}

.home-step-title:hover {
  color: var(--color-brand-text);
  text-decoration: underline;
}

/* Override prose link underline inside .portail-content */
.portail-content .home-step-title {
  text-decoration: none;
}

.portail-content .home-step-title:hover {
  text-decoration: underline;
}

.home-step-desc {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  line-height: var(--lh-base);
  margin: 0;
}

.home-section-panel {
  background: var(--color-surface-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
}

/* Use cases */
.home-usecases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}

.home-usecase {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--color-surface-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.home-usecase-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  color: var(--color-brand-text);
  background: var(--color-brand-active);
  border-radius: var(--radius-sm);
  padding: 2px var(--s-2);
  align-self: flex-start;
}

.home-usecase p {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  line-height: 1.6;
  flex: 1;
  margin: 0;
}

.home-usecase a {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-brand-text);
  text-decoration: none;
  align-self: flex-start;
}

.home-usecase a:hover {
  text-decoration: underline;
}

/* Versions */
.home-versions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}

.home-version {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.home-version--stable {
  background: var(--color-surface);
}

.home-version--upcoming {
  background: var(--color-surface-muted);
}

.home-version-header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.home-version-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-1) var(--s-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  font-family: var(--font-mono);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.home-version--stable .home-version-badge {
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
}

.home-version--upcoming .home-version-badge {
  background: color-mix(in srgb, var(--color-brand) 10%, transparent);
  color: var(--color-brand-text);
}

.home-version-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text);
}

.home-version-date {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.home-version-desc {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  line-height: 1.6;
  margin: 0;
}

.home-version-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.home-version-items li {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  padding-left: var(--s-4);
  position: relative;
}

.home-version-items li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--color-text-muted);
}

.home-version-link {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-brand-text);
  text-decoration: none;
  align-self: flex-start;
  margin-top: auto;
}

.home-version-link:hover {
  text-decoration: underline;
}

/* Support strip */
.home-support {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--color-surface-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--s-8);
}

.home-support-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

.home-support-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.home-support-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.home-support-item > div {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.home-support-item strong {
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text);
}

.home-support-item p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}

.home-support-item a {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-brand-text);
  text-decoration: none;
}

.home-support-item a:hover {
  text-decoration: underline;
}

/* Responsive — home */
@media (max-width: 768px) {
  .home-support {
    grid-template-columns: 1fr;
    padding: var(--s-4);
  }
}

/* ── Dashboard ────────────────────────────────────────────────────────────── */

.dashboard-notice-mock {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--callout-warning-bg);
  border: var(--border-width) solid
    color-mix(in srgb, var(--color-warning) 30%, transparent);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--callout-warning-fg);
  margin-bottom: var(--s-6);
  line-height: var(--lh-base);
}

.dashboard-notice-mock svg {
  flex-shrink: 0;
  margin-top: 0.1em;
  color: var(--color-warning);
}

.dashboard-section-title {
  font-size: var(--text-lg);
  font-weight: var(--fw-semi);
  color: var(--color-text);
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: var(--border-width) solid var(--color-border);
}

/* Page title */

.dashboard-page-title {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin: 0 0 var(--s-6);
  line-height: var(--lh-tight);
}

/* Metric cards grid */

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

@media (min-width: 640px) {
  .dashboard-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .dashboard-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.dashboard-metric-card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.dashboard-metric-label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

.dashboard-metric-value {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: var(--lh-tight);
}

.dashboard-metric-unit {
  font-size: var(--text-sm);
  font-weight: var(--fw-normal);
  color: var(--color-text-subtle);
}

.dashboard-metric-sublabel {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.dashboard-metric-badge {
  margin-top: var(--s-2);
}

/* Alert badges */

.dashboard-alert-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem var(--s-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  white-space: nowrap;
}

.dashboard-alert-badge--green {
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
}

.dashboard-alert-badge--yellow {
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  color: var(--color-warning);
}

.dashboard-alert-badge--red {
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
  color: var(--color-error);
}

/* CDV distribution table */

.dashboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-bottom: var(--s-6);
}

.dashboard-table th {
  text-align: left;
  padding: var(--s-2) var(--s-3);
  font-weight: var(--fw-semi);
  color: var(--color-text-muted);
  border-bottom: var(--border-width) solid var(--color-border);
  white-space: nowrap;
}

.dashboard-table td {
  padding: var(--s-2) var(--s-3);
  border-bottom: var(--border-width) solid var(--color-surface-muted);
  vertical-align: middle;
}

.dashboard-bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 10rem;
}

.dashboard-bar-track {
  flex: 1;
  height: 6px;
  background: var(--color-surface-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.dashboard-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  min-width: 2px;
}

/* Alert list */

.dashboard-alert-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.dashboard-alert-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.dashboard-alert-item--green {
  border-left-color: var(--color-success);
}
.dashboard-alert-item--yellow {
  border-left-color: var(--color-warning);
}
.dashboard-alert-item--red {
  border-left-color: var(--color-error);
}

.dashboard-alert-message {
  flex: 1;
  color: var(--color-text);
}

.dashboard-alert-since {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.dashboard-no-alerts {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding: var(--s-3) 0;
}

/* ── Gestionnaire client status ───────────────────────── */

.dashboard-client-status {
  display: inline-flex;
  align-items: center;
  padding: var(--s-0-5) var(--s-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
}

.dashboard-client-status--active {
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
}

.dashboard-client-status--onboarding {
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  color: var(--color-warning);
}

.dashboard-client-status--inactive {
  background: var(--color-surface-muted);
  color: var(--color-text-subtle);
}

.dashboard-phase-badge {
  display: inline-flex;
  align-items: center;
  margin-left: var(--s-2);
  padding: var(--s-0-5) var(--s-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  background: var(--color-surface-muted);
  color: var(--color-text-subtle);
  border: var(--border-width) solid var(--color-border);
}

/* ── SIREN picker form on dashboard pages ─────────────── */

.dashboard-siren-form {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-6);
  font-size: var(--text-sm);
}

.dashboard-siren-form label {
  color: var(--color-text);
  font-weight: var(--fw-medium);
}

/* ── Exports page ─────────────────────────────────────── */

.export-page-title {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  margin-bottom: var(--s-3);
}

.export-intro {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  max-width: 52rem;
  margin-bottom: var(--s-6);
  line-height: var(--lh-relaxed, 1.7);
}

.export-notice-mock {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: color-mix(
    in srgb,
    var(--color-brand) 6%,
    var(--color-surface-muted)
  );
  border: var(--border-width) solid var(--color-brand-border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  /* brand-tinted bg darkens effective contrast — use text-muted (4.89:1) over text-subtle (4.43:1) */
  color: var(--color-text-muted);
  margin-bottom: var(--s-6);
}

.export-notice-mock svg {
  flex-shrink: 0;
  color: var(--color-brand-text);
  margin-top: 1px;
}

.export-error {
  padding: var(--s-3) var(--s-4);
  background: color-mix(in srgb, var(--color-error) 8%, transparent);
  border: var(--border-width) solid var(--color-error);
  border-radius: var(--radius-md);
  color: var(--color-error);
  font-size: var(--text-sm);
  margin-bottom: var(--s-4);
}

.export-success {
  padding: var(--s-3) var(--s-4);
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
  border: var(--border-width) solid var(--color-success);
  border-radius: var(--radius-md);
  color: var(--color-success);
  font-size: var(--text-sm);
  margin-bottom: var(--s-4);
}

.export-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  max-width: 40rem;
}

.export-fieldset {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.export-fieldset legend {
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  padding: 0 var(--s-2);
}

.export-field-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.export-field-row label {
  font-size: var(--text-sm);
  color: var(--color-text);
  white-space: nowrap;
}

.export-date-input {
  padding: var(--s-2) var(--s-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: inherit;
  transition: border-color var(--transition);
}

.export-date-input:focus {
  outline: none;
  border-color: var(--color-brand-border);
}

.export-select {
  padding: var(--s-2) var(--s-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--transition);
}

.export-select:focus {
  outline: none;
  border-color: var(--color-brand-border);
}

.export-format-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.export-format-option {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    border-color var(--transition),
    background var(--transition);
}

.export-format-option:has(input:checked) {
  border-color: var(--color-brand-border);
  background: color-mix(in srgb, var(--color-brand) 4%, var(--color-surface));
}

.export-format-option:hover {
  border-color: var(--color-brand-border);
}

.export-format-option input[type="radio"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-brand);
}

.export-format-label {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  font-size: var(--text-sm);
}

.export-format-desc {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.export-submit-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.export-submit {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  background: var(--color-brand);
  color: var(--color-surface);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  font-family: inherit;
  cursor: pointer;
  transition: opacity var(--transition);
}

.export-submit:hover {
  opacity: 0.88;
}

.export-submit:active {
  opacity: 0.78;
}

.export-count-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ── Export job status page ───────────────────────────────────────────────── */

.export-job {
  max-width: 52rem;
}

.export-job-hint {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  margin-bottom: var(--s-6);
}

.export-job-spinner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  margin-bottom: var(--s-4);
}

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

.export-job-spin {
  animation: export-spin 1s linear infinite;
  color: var(--color-brand);
}

.export-job-ready {
  padding: var(--s-4) var(--s-5);
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
  border: var(--border-width) solid var(--color-success);
  border-radius: var(--radius-md);
  color: var(--color-success);
  font-size: var(--text-sm);
  margin-bottom: var(--s-5);
}

.export-job-ready-header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-weight: var(--fw-medium);
  margin-bottom: var(--s-4);
}

/* Summary key/value grid inside the success banner */
.export-job-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: var(--s-1);
  column-gap: var(--s-5);
  margin: 0;
  padding-left: var(--s-7);
}

.export-job-summary-row {
  display: contents;
}

.export-job-summary dt {
  font-weight: var(--fw-medium);
  color: color-mix(in srgb, var(--color-success) 80%, var(--color-text));
  white-space: nowrap;
}

.export-job-summary dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Preview section */
.export-job-preview {
  margin-bottom: var(--s-5);
}

.export-job-preview-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--s-2);
}

.export-job-preview-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.export-job-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.export-job-preview-table th {
  text-align: left;
  padding: var(--s-2) var(--s-3);
  background: var(--color-surface-muted);
  border-bottom: 2px solid var(--color-border);
  font-weight: var(--fw-semi);
  color: var(--color-brand-text);
  white-space: nowrap;
}

.export-job-preview-table td {
  padding: var(--s-2) var(--s-3);
  border-bottom: var(--border-width) solid var(--color-border);
  white-space: nowrap;
}

.export-job-preview-table tbody tr:last-child td {
  border-bottom: none;
}

.export-job-preview-table tbody tr:nth-child(even) td {
  background: var(--color-surface-muted);
}

.export-job-preview-table tbody tr:hover td {
  background: var(--color-brand-active);
}

.export-job-preview-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--s-2);
}

.export-job-actions {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}

.export-job-back {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  text-decoration: none;
  transition: color var(--transition);
}

.export-job-back:hover {
  color: var(--color-brand-text);
}

.export-job-empty {
  padding: var(--s-3) var(--s-4);
  background: color-mix(
    in srgb,
    var(--color-warning, #eab308) 12%,
    transparent
  );
  border: 1px solid
    color-mix(in srgb, var(--color-warning, #eab308) 40%, transparent);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: var(--text-sm);
  margin-bottom: var(--s-4);
}

/* .export-job-meta removed — Job ID no longer displayed to users */

/* ── Habilitations — Profile Cards (Rôles disponibles) ─────── */

.habilitations-page-subtitle {
  color: var(--color-text-muted);
  margin-bottom: var(--s-6);
  font-size: var(--text-sm);
}

.profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}

/* Base interactive styles from .portail-card (@doxallia/design) */
.profiles-card {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.profiles-card-header {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}

.profiles-card-icon {
  color: var(--color-brand-text);
  flex-shrink: 0;
}

.profiles-card-title {
  font-weight: var(--fw-semi);
  color: var(--color-text);
  font-size: var(--text-base);
}

.profiles-card-role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--s-1);
}

.profiles-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-base);
  margin: 0;
  flex: 1;
}

.profiles-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.profiles-action-tag {
  font-size: var(--text-xs);
  background: var(--color-surface-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.1em 0.6em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.profiles-card-footer {
  display: flex;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-2);
  border-top: var(--border-width) solid var(--color-border);
}

.profiles-card-link,
.profiles-card-invite {
  font-size: var(--text-sm);
  text-decoration: none;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--radius-md);
  transition: background var(--transition);
}

.profiles-card-link {
  color: var(--color-text-muted);
}
.profiles-card-link:hover {
  background: var(--color-surface-muted);
}
.profiles-card-invite {
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-weight: var(--fw-medium);
}
.profiles-card-invite:hover {
  background: var(--color-brand-dark);
}

/* ── Permission matrix ─────────────────────────────────────── */

.habilitations-matrix-scroll {
  overflow-x: auto;
}

.habilitations-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.habilitations-matrix-cell {
  padding: var(--s-2) var(--s-3);
  border: var(--border-width) solid var(--color-border);
  text-align: center;
  vertical-align: middle;
}

.habilitations-matrix-header-profile {
  text-align: left;
  font-weight: var(--fw-semi);
  background: var(--color-surface-muted);
  white-space: nowrap;
}

.habilitations-matrix-header-action {
  font-weight: var(--fw-medium);
  background: var(--color-surface-muted);
  font-size: var(--text-xs);
}

.habilitations-matrix-check {
  color: var(--color-success);
  font-weight: var(--fw-bold);
}
.habilitations-matrix-no {
  color: var(--color-text-muted);
}

/* ── Team — Role presets in invitation form ─────────────────── */

.team-role-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}

.team-role-preset {
  padding: var(--s-1) var(--s-3);
  background: var(--color-surface-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  cursor: pointer;
  transition:
    background var(--transition),
    border-color var(--transition);
}

.team-role-preset:hover {
  border-color: var(--color-brand-border);
}

.team-role-preset--selected,
.team-role-preset[aria-pressed="true"] {
  background: var(--color-brand);
  color: var(--color-on-brand);
  border-color: var(--color-brand);
}

/* ── Team — Member directory ────────────────────────────────── */

.habilitations-search-bar {
  margin-bottom: var(--s-4);
}

/* Delta: width + bg override + extra focus shadow (base from .form-control) */
.habilitations-user-search {
  width: 100%;
  max-width: 320px;
  background: var(--color-surface);
}

.habilitations-user-search:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand) 20%, transparent);
}

.team-member-role {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-brand-text);
}

.habilitations-form-optional {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--fw-normal);
}

/* ── Onboarding wizard ────────────────────────────────────── */

.onboarding-page {
  max-width: var(--content-max-width);
}
.onboarding-page-header {
  margin-bottom: var(--s-6);
}
.onboarding-page-title {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-brand-text);
  margin-bottom: var(--s-2);
}
.onboarding-page-subtitle {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.onboarding-progress-container {
  margin-bottom: var(--s-8);
}
.onboarding-progress-bar {
  height: 8px;
  background: var(--color-surface-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--s-2);
}
.onboarding-progress-fill {
  height: 100%;
  background: var(--color-brand);
  border-radius: var(--radius-full);
  transition: width 300ms ease;
}
.onboarding-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
}
.onboarding-progress-label {
  font-weight: var(--fw-medium);
  color: var(--color-brand-text);
}
.onboarding-progress-time {
  color: var(--color-text-muted);
}

.onboarding-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.onboarding-step {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  transition: border-color var(--transition);
}
.onboarding-step[data-status="done"] {
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 5%, var(--color-surface));
}
.onboarding-step[data-status="in-progress"] {
  border-color: var(--color-brand-border);
}

.onboarding-step-header {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}
.onboarding-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  background: var(--color-surface-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-brand-text);
}
.onboarding-step[data-status="done"] .onboarding-step-number {
  background: var(--color-success);
  color: #fff;
  border-color: var(--color-success);
}
.onboarding-step-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.onboarding-step-title {
  font-weight: var(--fw-semi);
  color: var(--color-text);
}
.onboarding-step-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.onboarding-step-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
  flex-shrink: 0;
}
.onboarding-step-status-badge {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  padding: 0.15em 0.6em;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}
.onboarding-step-status-badge[data-status="done"] {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  color: var(--color-success);
}
.onboarding-step-status-badge[data-status="blocked"] {
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  color: var(--color-warning);
}
.onboarding-step-btn {
  font-size: var(--text-xs);
  padding: var(--s-1) var(--s-2);
  background: var(--color-surface-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text);
  transition:
    background var(--transition),
    border-color var(--transition);
  white-space: nowrap;
}
.onboarding-step-btn:hover:not(:disabled) {
  border-color: var(--color-brand-border);
  background: var(--color-brand-active);
}
.onboarding-step-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Sources de vérité ────────────────────────────────────── */

.alert {
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  border: var(--border-width) solid transparent;
}
.alert-warn {
  background: var(--callout-warning-bg);
  color: var(--callout-warning-fg);
  border-color: var(--color-warning);
}

.sources-header {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
  flex-wrap: wrap;
}
.sources-header h1 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--fw-semi);
}
.last-run {
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.btn-refresh {
  padding: var(--s-2) var(--s-4);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-brand-text);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background var(--transition),
    border-color var(--transition);
}
.btn-refresh:hover:not(:disabled) {
  background: var(--color-brand-active);
  border-color: var(--color-brand-border);
}
.btn-refresh:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sources-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.sources-table thead th {
  padding: var(--s-2) var(--s-3);
  text-align: left;
  font-weight: var(--fw-semi);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  border-bottom: 2px solid var(--color-border);
  background: var(--color-bg);
}
.source-row td {
  padding: var(--s-3) var(--s-3);
  border-bottom: var(--border-width) solid var(--color-border);
  vertical-align: top;
}
.source-row:last-child td {
  border-bottom: none;
}
.source-row:hover td {
  background: var(--color-surface-muted);
}

/* Status-based left border accent */
.source-row.status-new-version td:first-child {
  border-left: 3px solid var(--color-warning);
  padding-left: calc(var(--s-3) - 3px);
}
.source-row.status-unreachable td:first-child {
  border-left: 3px solid var(--color-error);
  padding-left: calc(var(--s-3) - 3px);
}
.source-row.status-up-to-date td:first-child {
  border-left: 3px solid var(--color-success);
  padding-left: calc(var(--s-3) - 3px);
}
.source-row.status-manual-check td:first-child {
  border-left: 3px solid var(--color-border);
  padding-left: calc(var(--s-3) - 3px);
}

.badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.badge-ok {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  color: var(--color-success);
}
.badge-warn {
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  color: var(--color-warning);
}
.badge-error {
  background: color-mix(in srgb, var(--color-error) 15%, transparent);
  color: var(--color-error);
}
.badge-info {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}

.source-id {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin-top: var(--s-1);
}
.constraint-note {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-warning);
  margin-top: var(--s-1);
}

.version-local {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.version-upstream {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-success);
  font-weight: var(--fw-medium);
}

.impact-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.impact-list code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--color-surface-muted);
  color: var(--color-text);
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--color-border);
}

.onboarding-step-links {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-3);
  flex-wrap: wrap;
}
.onboarding-step-link {
  font-size: var(--text-sm);
  color: var(--color-brand-text);
  text-decoration: none;
  padding: var(--s-1) var(--s-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  transition: background var(--transition);
}
.onboarding-step-link:hover {
  background: var(--color-brand-active);
}
.onboarding-step-link--tool {
  background: var(--color-surface-muted);
}

.onboarding-page-footer {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: var(--border-width) solid var(--color-border);
}
.onboarding-reset-btn {
  font-size: var(--text-sm);
  padding: var(--s-2) var(--s-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  color: var(--color-text-muted);
  transition:
    color var(--transition),
    border-color var(--transition);
}
.onboarding-reset-btn:hover {
  color: var(--color-error);
  border-color: var(--color-error);
}
.onboarding-profiles-link {
  font-size: var(--text-sm);
  color: var(--color-brand-text);
  text-decoration: none;
}
.onboarding-profiles-link:hover {
  text-decoration: underline;
}

/* ── Qualify tool ─────────────────────────────────────────────────────────── */

/* Small detail text inside <details> dropdowns (conversion errors, reval errors) */
.qualify-detail-text {
  margin: var(--s-2) 0 0;
  font-size: var(--text-sm);
}
.qualify-detail-list {
  margin: var(--s-2) 0 0;
  padding-left: var(--s-5);
  font-size: var(--text-sm);
}

/* ── Badges ───────────────────────────────────────────────────────────────── */
.portail-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  line-height: 1.4;
}
.portail-badge--success {
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
}
.portail-badge--error {
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
  color: var(--color-error);
}
.portail-badge--warning {
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  color: var(--color-warning);
}
.portail-badge--neutral {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}
.portail-badge--info {
  background: var(--color-get-bg);
  color: var(--color-get-fg);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
/* Mirrors button.css (.btn) — portail-prefixed for qualify/tool templates. */
.portail-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  border: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--transition);
}
.portail-btn--primary {
  padding: var(--s-2) var(--s-6);
  background: var(--color-brand);
  color: var(--color-on-brand);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
}
.portail-btn--primary:hover {
  background: var(--color-brand-dark);
}
.portail-btn--secondary {
  padding: var(--s-2) var(--s-6);
  background: transparent;
  color: var(--color-brand);
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
}
.portail-btn--secondary:hover {
  background: var(--color-brand-active);
}
.portail-btn--ghost {
  padding: var(--s-2) var(--s-4);
  background: transparent;
  color: var(--color-text);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.portail-btn--ghost:hover {
  color: var(--color-brand);
  background: var(--color-surface-muted);
}
.portail-btn--sm {
  padding: var(--s-1) var(--s-3);
  font-size: var(--text-xs);
}

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.portail-alert {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-bottom: var(--s-4);
}
.portail-alert--error {
  background: color-mix(in srgb, var(--color-error) 8%, transparent);
  border: var(--border-width) solid
    color-mix(in srgb, var(--color-error) 20%, transparent);
  color: var(--color-error);
}
.portail-alert--warning {
  background: color-mix(in srgb, var(--color-warning) 8%, transparent);
  border: var(--border-width) solid
    color-mix(in srgb, var(--color-warning) 20%, transparent);
  color: var(--color-warning);
}

/* ── Form controls ────────────────────────────────────────────────────────── */
/* Mirrors form.css (.form-control) — portail-prefixed for qualify/tool templates. */
.portail-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.portail-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.portail-label {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}
/* Checkbox/toggle row — label wraps input inline */
.portail-label--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
}
.portail-label-hint {
  font-size: var(--text-xs);
  font-weight: var(--fw-normal);
  color: var(--color-text-muted);
}

.portail-input,
.portail-select {
  padding: var(--s-2) var(--s-3);
  background: var(--color-surface-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition);
  width: 100%;
}
.portail-input:focus,
.portail-select:focus {
  border-color: var(--color-brand-border);
}

/* ── Table ────────────────────────────────────────────────────────────────── */
.portail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.portail-table th,
.portail-table td {
  padding: var(--s-2) var(--s-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.portail-table th {
  background: var(--color-bg);
  font-weight: var(--fw-semi);
  color: var(--color-text-muted);
}

/* ── Muted text ───────────────────────────────────────────────────────────── */
.portail-muted {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ── Session-scoped info callout (download expiry notice, etc.) ───────────── */
.portail-callout {
  border-left: 4px solid;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--s-3) var(--s-4);
  margin: var(--s-4) 0;
  font-size: var(--text-sm);
}
.portail-callout--info {
  background: var(--callout-note-bg);
  border-left-color: var(--color-get-fg);
  color: var(--callout-note-fg);
}

/* ── Demo card form layout ────────────────────────────────────────────────── */
.qualify-demo-card-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.qualify-demo-card-version-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.qualify-demo-card-version-row .portail-select {
  flex: 1;
  min-width: 7rem;
  width: auto;
}
.qualify-demo-card-extended-label {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--text-xs);
  white-space: nowrap;
  cursor: pointer;
}

/* ── Qualify tool — demo page layout ─────────────────────────────────────── */

.qualify-demo-section {
  margin-bottom: var(--s-8);
}

.qualify-demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--s-4);
}

.qualify-demo-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.qualify-demo-card-header {
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--color-surface-muted);
}

.qualify-demo-card-title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text);
  margin: 0;
}

.qualify-demo-card-desc {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin: var(--s-1) 0 0;
}

/* ── Qualify tool — file result cards ────────────────────────────────────── */

.qualify-file-card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--s-4);
  overflow: hidden;
}

.qualify-file-header {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--color-surface-muted);
}

.qualify-filename {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  word-break: break-all;
  flex: 1;
  min-width: 0;
}

.qualify-size {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Qualify tool — result sections ──────────────────────────────────────── */

.qualify-validation {
  padding: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: flex-start;
}

.qualify-conversions {
  padding: var(--s-3) var(--s-4) var(--s-4);
}

.qualify-conversions h4 {
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: 0 0 var(--s-3);
}

/* ═══════════════════════════════════════════════════════
   Business flow (business-flows.md)
   ═══════════════════════════════════════════════════════ */

.bflow-track {
  display: flex;
  flex-direction: column;
  margin: var(--s-6) 0 0;
}

.bflow-item {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.bflow-connector {
  width: 2px;
  height: var(--s-5);
  background: var(--color-border);
  margin-left: calc(var(--s-5) + 21px);
}

.bflow-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bflow-icon--neutral {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}
.bflow-icon--info {
  background: var(--color-get-bg);
  color: var(--color-get-fg);
}
.bflow-icon--success {
  background: var(--color-post-bg);
  color: var(--color-success);
}
.bflow-icon--error {
  background: var(--color-delete-bg);
  color: var(--color-delete-fg);
}
.bflow-icon--warning {
  background: var(--callout-warning-bg);
  color: var(--color-warning);
}

.bflow-body {
  flex: 1;
  min-width: 0;
}

.bflow-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-1);
}
.bflow-head code {
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text);
  background: none;
  padding: 0;
}
.bflow-head strong {
  font-size: var(--text-base);
  font-weight: var(--fw-semi);
  color: var(--color-text);
}
.bflow-tag {
  display: inline-block;
  padding: 0.1em 0.5em;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}

.bflow-desc {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin: var(--s-1) 0;
}

.bflow-actions {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.bflow-note {
  margin-top: var(--s-3);
  background: var(--callout-note-bg);
  border-left: 3px solid var(--color-get-fg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--s-2) var(--s-3);
  font-size: var(--text-sm);
  color: var(--callout-note-fg);
}
.bflow-note strong {
  color: var(--color-get-fg);
}

.bflow-terminals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.bflow-terminal {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}
.bflow-terminal--error {
  background: var(--color-delete-bg);
  border-color: var(--color-error);
}
.bflow-terminal--warning {
  background: var(--callout-warning-bg);
  border-color: var(--color-warning);
}
.bflow-terminal--success {
  background: var(--color-post-bg);
  border-color: var(--color-success);
}

.bflow-terminal-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  line-height: 1.2;
}
.bflow-terminal-title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text);
  margin-bottom: var(--s-1);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.bflow-terminal-title code {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  background: none;
  padding: 0;
}
.bflow-terminal-desc {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin: 0;
}

@media (max-width: 640px) {
  .bflow-terminals {
    grid-template-columns: 1fr;
  }
}

/* Integration steps (business-flows.md) */
.int-steps {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin: var(--s-6) 0;
}

.int-step {
  display: flex;
  gap: var(--s-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
}

.int-num {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-base);
  flex-shrink: 0;
}

.int-body {
  flex: 1;
  min-width: 0;
}
.int-body h3 {
  margin: 0 0 var(--s-2);
  font-size: var(--text-base);
  font-weight: var(--fw-semi);
  color: var(--color-text);
}
.int-body p {
  margin: 0 0 var(--s-2);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.int-body p:last-child {
  margin-bottom: 0;
}
.int-body .bflow-note {
  margin-top: var(--s-2);
}
.int-body pre {
  margin-top: var(--s-3);
  margin-bottom: 0;
  font-size: var(--text-xs);
}

/* ── Qualify tool — error details (<details> elements) ───────────────────── */

.qualify-errors summary,
.qualify-warnings summary,
.qualify-conv-error summary,
.qualify-reval-errors summary,
.qualify-saxon-error summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  padding: var(--s-1) 0;
  user-select: none;
}

.qualify-errors summary::-webkit-details-marker,
.qualify-warnings summary::-webkit-details-marker,
.qualify-conv-error summary::-webkit-details-marker,
.qualify-reval-errors summary::-webkit-details-marker,
.qualify-saxon-error summary::-webkit-details-marker {
  color: var(--color-text-muted);
}

.qualify-errors ul,
.qualify-warnings ul,
.qualify-reval-errors ul {
  margin: var(--s-2) 0 0;
  padding-left: var(--s-5);
  font-size: var(--text-xs);
  line-height: var(--lh-relaxed, 1.7);
  color: var(--color-text);
}

.qualify-errors li,
.qualify-warnings li,
.qualify-reval-errors li {
  margin-bottom: var(--s-1);
}

.qualify-conv-error p,
.qualify-saxon-error p {
  margin: var(--s-2) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text);
  font-family: var(--font-mono);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Nav locked items — visual consistency ────────────────
 * Equalize font-size, padding and line-height between locked
 * and unlocked nav items so the "bientôt" badge doesn't make
 * the row look smaller than its siblings. The base
 * .nav-child-link rule sets text-xs; locked items inherit
 * but the inner spans + .nav-soon chip can shift layout
 * subtly, so we re-anchor here.
 */
.nav-child-link,
.nav-child-link--locked {
  font-size: var(--text-xs);
  line-height: var(--lh-snug, 1.4);
  min-height: calc(var(--s-1) * 2 + 1.4em);
}

.nav-child-link > span:not(.nav-method-badge):not(.nav-soon),
.nav-child-link--locked > span:not(.nav-method-badge):not(.nav-soon) {
  font-size: inherit;
  line-height: inherit;
}

.nav-soon {
  font-size: var(--text-xs);
  line-height: inherit;
  padding: 0 var(--s-1);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

/* Chat widget — Clever AI assistant.
 * Uses only tokens from tokens.css. Never add raw color values.
 * z-index: --z-dropdown (60) to stay above sidebar overlay.
 */

/* ── FAB ─────────────────────────────────────────────────────────────────── */
.chat-fab {
	position: fixed;
	bottom: var(--s-6);
	right: var(--s-6);
	/* One level above the panel so the toggle button stays clickable when panel is open */
	z-index: calc(var(--z-dropdown) + 1);

	width: 3.25rem;
	height: 3.25rem;
	border-radius: var(--radius-full);
	border: none;
	background: var(--color-brand);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-brand);
	transition:
		background var(--transition),
		transform var(--transition),
		box-shadow var(--transition);
}

.chat-fab:hover {
	background: var(--color-brand-dark);
	transform: scale(1.07);
	box-shadow: 0 6px 20px rgba(20, 28, 82, 0.5);
}
.chat-fab:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 3px;
}

/* Demo mode — subtle inner ring instead of an alarming badge */
#chat-widget[data-chat-mode="demo"] .chat-fab {
	box-shadow:
		var(--shadow-brand),
		0 0 0 2px rgba(255, 255, 255, 0.2) inset;
}

/* Disabled mode — role-gated (bientôt) */
.chat-fab--disabled {
	background: var(--color-surface-muted);
	color: var(--color-text-muted);
	box-shadow: none;
	cursor: default;
}

.chat-fab--disabled:hover {
	background: var(--color-surface-muted);
	transform: none;
	box-shadow: none;
}

/* "bientôt" badge anchored to top-right corner of the disabled FAB */
.chat-fab--disabled .nav-soon {
	position: absolute;
	top: -6px;
	right: -6px;
	margin-left: 0;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	padding: 1px 5px;
	font-size: 0.55rem;
	font-weight: var(--fw-semi);
	line-height: 1.6;
	color: var(--color-text-muted);
}

/* Explicit hide rule — browser UA [hidden]{display:none} can lose to display:flex at equal specificity */
.chat-panel[hidden] {
	display: none;
}

/* ── Panel ───────────────────────────────────────────────────────────────── */
.chat-panel {
	position: fixed;
	bottom: calc(var(--s-6) + 3.25rem + var(--s-3));
	right: var(--s-6);
	z-index: var(--z-dropdown);

	width: 26rem;
	max-width: calc(100vw - var(--s-8));
	max-height: 75vh;
	display: flex;
	flex-direction: column;

	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.12),
		0 2px 8px rgba(0, 0, 0, 0.06);
	overflow: hidden;
}

/* ── Panel header ────────────────────────────────────────────────────────── */
.chat-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--s-4) var(--s-5);
	background: var(--color-brand);
	color: #fff;
	flex-shrink: 0;
}

.chat-panel-title {
	display: flex;
	align-items: center;
	gap: var(--s-3);
}

.chat-panel-title svg {
	flex-shrink: 0;
	opacity: 0.9;
}

.chat-panel-title-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.chat-panel-title-name {
	font-size: var(--text-sm);
	font-weight: var(--fw-semi);
	line-height: 1.2;
}

.chat-panel-title-badge {
	font-size: 0.65rem;
	font-weight: var(--fw-medium);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.6;
	line-height: 1;
}

.chat-header-actions {
	display: flex;
	align-items: center;
	gap: var(--s-1);
	flex-shrink: 0;
}

.chat-close {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	padding: var(--s-2);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	transition:
		color var(--transition),
		background var(--transition);
	flex-shrink: 0;
}

.chat-close:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
}
.chat-close:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.5);
	outline-offset: 2px;
}

/* ── Messages area ───────────────────────────────────────────────────────── */
.chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: var(--s-5) var(--s-5);
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	min-height: 14rem;
	scroll-behavior: smooth;
}

.chat-msg {
	display: flex;
}

.chat-msg--user {
	justify-content: flex-end;
}
.chat-msg--assistant {
	justify-content: flex-start;
	flex-direction: column;
	align-items: flex-start;
}

.chat-bubble {
	max-width: 82%;
	padding: var(--s-3) var(--s-4);
	border-radius: var(--radius-lg);
	font-size: var(--text-sm);
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-word;
}

.chat-msg--user .chat-bubble {
	background: var(--color-brand);
	color: #fff;
	border-bottom-right-radius: var(--radius-sm);
}

.chat-msg--assistant .chat-bubble {
	background: var(--color-surface-muted);
	color: var(--color-text);
	border-bottom-left-radius: var(--radius-sm);
	white-space: normal; /* markdown handles line breaks */
}

/* Markdown content inside assistant bubbles */
.chat-msg--assistant .chat-bubble ul,
.chat-msg--assistant .chat-bubble ol {
	margin: var(--s-2) 0;
	padding-left: var(--s-5);
}

.chat-msg--assistant .chat-bubble li {
	margin-bottom: var(--s-2);
	line-height: 1.6;
}

.chat-msg--assistant .chat-bubble strong {
	font-weight: var(--fw-semi);
	color: var(--color-text);
}

.chat-msg--assistant .chat-bubble code {
	font-family: var(--font-mono);
	font-size: 0.8em;
	background: rgba(0, 0, 0, 0.07);
	border-radius: var(--radius-sm);
	padding: 0.1em 0.35em;
}

/* Typing indicator — three dots pulsing before first token */
.chat-bubble--typing {
	min-width: 3.5rem;
}

.chat-bubble--typing::after {
	content: "●●●";
	display: inline-block;
	letter-spacing: 3px;
	font-size: 0.45rem;
	vertical-align: middle;
	animation: chat-typing 1.4s ease-in-out infinite;
}

@keyframes chat-typing {
	0%,
	60%,
	100% {
		opacity: 0.25;
	}
	30% {
		opacity: 1;
	}
}

/* Streaming cursor — replaces typing indicator once tokens arrive */
.chat-bubble--streaming::after {
	content: "▋";
	display: inline-block;
	animation: chat-blink 0.7s step-end infinite;
	margin-left: 2px;
	opacity: 0.6;
}

@keyframes chat-blink {
	0%,
	100% {
		opacity: 0.6;
	}
	50% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.chat-bubble--typing::after {
		animation: none;
		opacity: 0.5;
	}
	.chat-bubble--streaming::after {
		animation: none;
	}
}

/* ── Input form ──────────────────────────────────────────────────────────── */
.chat-form {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding: var(--s-4) var(--s-5);
	border-top: var(--border-width) solid var(--color-border);
	flex-shrink: 0;
	background: var(--color-surface);
}

.chat-input-row {
	display: flex;
	gap: var(--s-2);
	align-items: flex-end;
}

.chat-input {
	flex: 1;
	padding: var(--s-3) var(--s-4);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-text);
	background: var(--color-bg);
	outline: none;
	transition: border-color var(--transition);
	line-height: 1.4;
	/* Textarea specific */
	resize: none;
	overflow: hidden;
	min-height: 2.4rem;
	max-height: 7.5rem;
	overflow-y: auto;
}

.chat-input:focus {
	border-color: var(--color-brand);
}
.chat-input:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Character counter ────────────────────────────────────────────────────── */
.chat-char-count {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-align: right;
	line-height: 1;
	min-height: 0.75rem; /* reserve space to avoid layout jump */
}

.chat-char-count--warn {
	color: var(--color-warning, #d97706);
	font-weight: var(--fw-medium);
}

.chat-send {
	width: 2.5rem;
	height: 2.5rem;
	background: var(--color-brand);
	color: #fff;
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background var(--transition);
	align-self: flex-end;
}

.chat-send:hover {
	background: var(--color-brand-dark);
}
.chat-send:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.chat-send:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
}

/* ── Suggestion chips (demo mode) ────────────────────────────────────────── */
.chat-suggestions {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding: var(--s-2) 0 var(--s-1);
}

.chat-suggestion {
	text-align: left;
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--s-3) var(--s-4);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-brand-text);
	cursor: pointer;
	transition:
		background var(--transition),
		border-color var(--transition);
	line-height: var(--lh-base);
}

.chat-suggestion:hover {
	background: var(--color-brand-active);
	border-color: var(--color-brand-border);
}

.chat-suggestion:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
}

/* ── Copy button ─────────────────────────────────────────────────────────── */
.chat-msg--assistant {
	position: relative;
}

.chat-copy-btn {
	position: absolute;
	top: var(--s-2);
	right: calc(-1 * var(--s-1));
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--s-1) var(--s-2);
	color: var(--color-text-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition:
		opacity var(--transition),
		color var(--transition),
		background var(--transition);
}

.chat-msg--assistant:hover .chat-copy-btn,
.chat-copy-btn:focus-visible {
	opacity: 1;
}

.chat-copy-btn:hover {
	color: var(--color-brand);
	background: var(--color-brand-active);
}

.chat-copy-btn--done {
	color: var(--color-brand);
	opacity: 1;
}

.chat-copy-btn:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
}

/* ── Retry button ────────────────────────────────────────────────────────── */
.chat-retry-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	margin-top: var(--s-2);
	padding: var(--s-1) var(--s-3);
	background: none;
	border: var(--border-width) solid var(--color-brand);
	border-radius: var(--radius-md);
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	color: var(--color-brand-text);
	cursor: pointer;
	transition:
		background var(--transition),
		color var(--transition);
}

.chat-retry-btn:hover {
	background: var(--color-brand-active);
}

.chat-retry-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.chat-error-text {
	display: block;
	color: var(--color-text-muted);
}

/* ── Tool-use indicator ──────────────────────────────────────────────────── */
.chat-tool-indicator {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	font-style: italic;
}

/* ── Heading styles inside assistant bubbles ─────────────────────────────── */
.chat-msg--assistant .chat-bubble h1,
.chat-msg--assistant .chat-bubble h2,
.chat-msg--assistant .chat-bubble h3 {
	font-weight: var(--fw-semi);
	color: var(--color-text);
	line-height: 1.3;
	margin: var(--s-3) 0 var(--s-2);
}

.chat-msg--assistant .chat-bubble h1:first-child,
.chat-msg--assistant .chat-bubble h2:first-child,
.chat-msg--assistant .chat-bubble h3:first-child {
	margin-top: 0;
}

.chat-msg--assistant .chat-bubble h1 {
	font-size: var(--text-base);
}
.chat-msg--assistant .chat-bubble h2 {
	font-size: var(--text-sm);
}
.chat-msg--assistant .chat-bubble h3 {
	font-size: var(--text-sm);
	opacity: 0.85;
}

/* Code blocks inside assistant bubbles */
.chat-msg--assistant .chat-bubble pre {
	background: var(--color-code-bg);
	border-radius: var(--radius-md);
	padding: var(--s-3) var(--s-4);
	overflow-x: auto;
	margin: var(--s-2) 0;
	font-size: 0.8em;
}

.chat-msg--assistant .chat-bubble pre code {
	background: none;
	padding: 0;
	font-size: inherit;
	white-space: pre;
	/* Base text color on dark bg — overridden per-token by highlight.js */
	color: var(--color-code-text, #e2e8f0);
}

/* Tables inside assistant bubbles */
.chat-msg--assistant .chat-bubble table {
	display: block;
	overflow-x: auto;
	border-collapse: collapse;
	width: max-content;
	max-width: 100%;
	margin: var(--s-2) 0;
	font-size: 0.78em;
}

.chat-msg--assistant .chat-bubble th,
.chat-msg--assistant .chat-bubble td {
	padding: var(--s-1) var(--s-3);
	border: var(--border-width) solid var(--color-border);
	text-align: left;
	vertical-align: top;
	white-space: normal;
}

.chat-msg--assistant .chat-bubble th {
	background: var(--color-surface-muted);
	font-weight: var(--fw-semi);
}

/* Blockquotes inside assistant bubbles */
.chat-msg--assistant .chat-bubble blockquote {
	border-left: 3px solid var(--color-brand-border);
	margin: var(--s-2) 0;
	padding: var(--s-2) var(--s-3);
	background: var(--color-surface-muted);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	color: var(--color-text-muted);
}

/* Horizontal rules inside assistant bubbles */
.chat-msg--assistant .chat-bubble hr {
	border: none;
	border-top: var(--border-width) solid var(--color-border);
	margin: var(--s-3) 0;
}

/* Task lists — rendered by the chat-markdown-entry.js core rule */
.chat-msg--assistant .chat-bubble .task-list-item {
	list-style: none;
	padding-left: 0;
}

.chat-msg--assistant .chat-bubble .task-list-item .task-list-checkbox {
	margin-right: var(--s-1);
	accent-color: var(--color-brand);
	cursor: default;
}

/* ── Full-page mode — /chat dedicated page ───────────────────────────────── */
#chat-widget[data-chat-fullpage] .chat-fab {
	display: none;
}

#chat-widget[data-chat-fullpage] .chat-panel {
	position: fixed;
	inset: 70px var(--s-5) var(--s-5) var(--s-5);
	width: auto;
	max-width: none;
	max-height: none;
	border-radius: var(--radius-xl);
	display: grid;
	grid-template-columns: 220px 1fr;
	overflow: hidden;
}

#chat-widget[data-chat-fullpage] .chat-messages {
	min-height: 0;
}

#chat-widget[data-chat-fullpage] .chat-bubble {
	max-width: 72%;
}

/* Main panel column (header + messages + form) */
.chat-main-panel {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-width: 0;
}

/* Hide the branded header in full-page mode — sidebar takes over navigation */
#chat-widget[data-chat-fullpage] .chat-panel-header {
	display: none;
}

/* ── History sidebar ─────────────────────────────────────────────────────── */
.chat-history-panel {
	display: flex;
	flex-direction: column;
	border-right: var(--border-width) solid var(--color-border);
	background: var(--color-surface-muted);
	overflow: hidden;
}

.chat-history-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--s-3) var(--s-3) var(--s-2);
	border-bottom: var(--border-width) solid var(--color-border);
	flex-shrink: 0;
	gap: var(--s-2);
}

.chat-history-back {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	background: none;
	border: none;
	padding: var(--s-1) var(--s-2);
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	cursor: pointer;
	transition:
		color var(--transition),
		background var(--transition);
}

.chat-history-back:hover {
	color: var(--color-text);
	background: var(--color-surface);
}

.chat-history-back:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
}

.chat-history-new-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: var(--border-width) solid var(--color-border);
	padding: var(--s-2);
	border-radius: var(--radius-sm);
	color: var(--color-text-muted);
	cursor: pointer;
	transition:
		color var(--transition),
		border-color var(--transition),
		background var(--transition);
	flex-shrink: 0;
}

.chat-history-new-btn:hover {
	color: var(--color-brand-text);
	border-color: var(--color-brand-border);
	background: var(--color-brand-active);
}

.chat-history-new-btn:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
}

.chat-history-list {
	list-style: none;
	margin: 0;
	padding: var(--s-2);
	overflow-y: auto;
	flex: 1;
}

.chat-history-item {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-2) var(--s-3);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background var(--transition);
	min-width: 0;
}

.chat-history-item:hover {
	background: var(--color-surface);
}

.chat-history-item.is-active {
	background: var(--color-brand-active);
}

.chat-history-item-title {
	flex: 1;
	font-size: var(--text-xs);
	color: var(--color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.4;
}

.chat-history-item.is-active .chat-history-item-title {
	color: var(--color-brand-text);
	font-weight: var(--fw-medium);
}

.chat-history-item-date {
	font-size: 0.65rem;
	color: var(--color-text-muted);
	flex-shrink: 0;
}

.chat-history-item-delete {
	background: none;
	border: none;
	padding: var(--s-1);
	color: var(--color-text-muted);
	cursor: pointer;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	opacity: 0;
	transition:
		opacity var(--transition),
		color var(--transition),
		background var(--transition);
}

.chat-history-item:hover .chat-history-item-delete {
	opacity: 1;
}

.chat-history-item-delete:hover {
	color: var(--color-danger, #dc2626);
	background: var(--color-danger-subtle, rgba(220, 38, 38, 0.08));
}

.chat-history-item-delete:focus-visible {
	opacity: 1;
	outline: 2px solid var(--color-brand);
	outline-offset: 1px;
}

.chat-history-empty {
	padding: var(--s-4) var(--s-3);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-align: center;
}

/* Mobile — collapse history sidebar (> 768px keeps it visible) */
@media (max-width: 768px) {
	#chat-widget[data-chat-fullpage] .chat-panel {
		grid-template-columns: 1fr;
	}

	.chat-history-panel {
		display: none;
	}
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.chat-panel {
		right: var(--s-3);
		left: var(--s-3);
		width: auto;
		max-width: none;
		bottom: calc(var(--s-4) + 3.25rem + var(--s-2));
		max-height: 65vh;
	}

	.chat-fab {
		bottom: var(--s-4);
		right: var(--s-4);
	}

	.chat-messages {
		padding: var(--s-4);
		min-height: 8rem;
		gap: var(--s-3);
	}

	/* Suggestions en scroll horizontal sur mobile — économise la hauteur */
	.chat-suggestions {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: var(--s-2);
		padding: var(--s-2) 0 var(--s-3);
		/* Masquer la scrollbar sans perdre la fonctionnalité */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.chat-suggestions::-webkit-scrollbar {
		display: none;
	}

	.chat-suggestion {
		flex-shrink: 0;
		max-width: 72vw;
		padding: var(--s-2) var(--s-3);
		font-size: var(--text-xs);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.chat-form {
		padding: var(--s-3) var(--s-4);
	}
}

/* ── Persona badge ─────────────────────────────────────────────── */
.chat-persona-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	padding: var(--s-1) var(--s-2);
	border-radius: var(--radius-full);
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	cursor: pointer;
	user-select: none;
	min-height: 44px;
	min-width: 44px;
	white-space: nowrap;
	transition: opacity 0.15s;
}
.chat-persona-badge:hover {
	border-color: var(--color-border-strong);
}
.chat-persona-badge[data-group="collaborateurs"] {
	color: var(--color-primary);
	border-color: var(--color-primary);
}
.chat-persona-badge[data-group="clients"] {
	color: var(--color-success);
	border-color: var(--color-success);
}
.chat-persona-badge[aria-disabled="true"] {
	opacity: 0.5;
	cursor: default;
	pointer-events: none;
}

/* ── Bottom sheet ───────────────────────────────────────────────── */
.chat-persona-sheet {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	padding: var(--s-4);
	z-index: 50;
	transform: translateY(100%);
	transition: transform 0.25s ease;
	max-height: 80vh;
	overflow-y: auto;
}
.chat-persona-sheet.open {
	transform: translateY(0);
}
.chat-persona-sheet-handle {
	width: 40px;
	height: 4px;
	background: var(--color-border);
	border-radius: var(--radius-full);
	margin: 0 auto var(--s-4);
}
.chat-persona-sheet-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
	z-index: 49;
	display: none;
}
.chat-persona-sheet-overlay.open {
	display: block;
}
.chat-persona-group-title {
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: var(--s-3) 0 var(--s-2);
}
.chat-persona-option {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-2) var(--s-3);
	border-radius: var(--radius-md);
	cursor: pointer;
	font-size: var(--text-sm);
	min-height: 44px;
}
.chat-persona-option:hover {
	background: var(--color-surface-hover);
}
.chat-persona-option.active {
	background: var(--color-surface-active);
	font-weight: var(--fw-semi);
}
.chat-persona-option-neutre {
	margin-top: var(--s-3);
	border-top: 1px solid var(--color-border);
	padding-top: var(--s-3);
}

/* ── Message feedback ──────────────────────────────────────────── */
.chat-message-feedback {
	display: flex;
	gap: var(--s-1);
	margin-top: var(--s-2);
	opacity: 0;
	transition: opacity 0.15s;
}
.chat-msg--assistant:hover .chat-message-feedback,
.chat-msg--assistant:focus-within .chat-message-feedback {
	opacity: 1;
}
.chat-feedback-btn {
	display: inline-flex;
	align-items: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: 2px 4px;
	border-radius: var(--radius-sm);
	color: var(--color-text-muted);
	transition:
		color 0.15s,
		opacity 0.15s;
}
.chat-feedback-btn:hover:not(:disabled) {
	background: var(--color-surface-hover);
}
.chat-feedback-btn.voted {
	color: var(--color-primary);
}
.chat-feedback-btn:disabled {
	cursor: default;
	opacity: 0.6;
}

/* ── Continue button — shown when response was truncated at max_tokens ─────── */
.chat-continue-btn {
	display: inline-block;
	margin-top: var(--s-2);
	padding: var(--s-1) 0;
	background: none;
	border: none;
	color: var(--color-brand-text);
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
	opacity: 0.65;
	transition: opacity var(--transition);
}

.chat-continue-btn:hover {
	opacity: 1;
}

.chat-continue-btn:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
	border-radius: 2px;
}