@charset "UTF-8";
/* =========================================================================
   Qwant Help Center — Copenhagen theme
   Layout & structure inspired by OpenAI help center.
   Tokens, fonts, components driven by Qwant Design System (colors_and_type).
   Fonts (Inter, Nunito) are loaded from document_head.hbs via <link>.
   ========================================================================= */

/***** Normalize *****/
*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
main { display: block; }
hr { height: 0; overflow: visible; }
a { background-color: transparent; }
img { border-style: none; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[hidden] { display: none; }
template { display: none; }

/* =========================================================================
   QWANT DESIGN SYSTEM — TOKENS
   Sourced from /qwant_ds/colors_and_type.css. Single source of truth.
   ========================================================================= */
:root {
  /* ── Primitive palette — Default (Qwant) ───────────────────────────── */
  --palette-default-grey-000: rgb(255, 255, 255);
  --palette-default-grey-050: rgb(249, 250, 251);
  --palette-default-grey-100: rgb(242, 244, 247);
  --palette-default-grey-200: rgb(230, 234, 239);
  --palette-default-grey-300: rgb(218, 223, 231);
  --palette-default-grey-400: rgb(193, 202, 215);
  --palette-default-grey-500: rgb(168, 180, 199);
  --palette-default-grey-600: rgb(131, 149, 175);
  --palette-default-grey-700: rgb(100, 120, 150);
  --palette-default-grey-800: rgb(77, 89, 106);
  --palette-default-grey-900: rgb(60, 69, 83);
  --palette-default-grey-1000: rgb(54, 60, 69);
  --palette-default-grey-1050: rgb(45, 48, 52);
  --palette-default-grey-1100: rgb(33, 35, 39);
  --palette-default-grey-1200: rgb(23, 25, 28);

  --palette-default-grey-alpha-000: rgba(93, 117, 152, 0%);
  --palette-default-grey-alpha-100: rgba(93, 117, 152, 8%);
  --palette-default-grey-alpha-150: rgba(93, 117, 152, 12%);
  --palette-default-grey-alpha-200: rgba(93, 117, 152, 16%);
  --palette-default-grey-alpha-300: rgba(93, 117, 152, 24%);
  --palette-default-grey-alpha-400: rgba(93, 117, 152, 32%);
  --palette-default-grey-alpha-500: rgba(93, 117, 152, 48%);

  --palette-default-black-alpha-050: rgba(0, 0, 0, 4%);
  --palette-default-black-alpha-100: rgba(0, 0, 0, 8%);
  --palette-default-black-alpha-150: rgba(0, 0, 0, 12%);
  --palette-default-black-alpha-200: rgba(0, 0, 0, 16%);
  --palette-default-black-alpha-300: rgba(0, 0, 0, 24%);
  --palette-default-black-alpha-400: rgba(0, 0, 0, 32%);
  --palette-default-black-alpha-500: rgba(0, 0, 0, 40%);
  --palette-default-white-alpha-1000: rgba(255, 255, 255, 80%);
  --palette-default-white-alpha-1100: rgba(255, 255, 255, 88%);
  --palette-default-white-alpha-150: rgba(255, 255, 255, 12%);
  --palette-default-white-alpha-200: rgba(255, 255, 255, 16%);
  --palette-default-white-alpha-300: rgba(255, 255, 255, 24%);

  --palette-default-blue-050: rgb(245, 248, 255);
  --palette-default-blue-100: rgb(235, 243, 255);
  --palette-default-blue-200: rgb(214, 231, 255);
  --palette-default-blue-300: rgb(194, 218, 255);
  --palette-default-blue-400: rgb(153, 194, 255);
  --palette-default-blue-500: rgb(112, 169, 255);
  --palette-default-blue-600: rgb(56, 136, 255);
  --palette-default-blue-700: rgb(5, 97, 255);
  --palette-default-blue-800: rgb(0, 79, 214);
  --palette-default-blue-900: rgb(0, 61, 168);
  --palette-default-blue-1000: rgb(0, 45, 130);
  --palette-default-blue-1050: #042362;
  --palette-default-blue-alpha-100: rgba(112, 169, 255, 14%);
  --palette-default-blue-alpha-200: rgba(112, 169, 255, 28%);
  --palette-default-blue-alpha-300: rgba(112, 169, 255, 44%);

  --palette-default-indigo-100: rgb(235, 237, 255);
  --palette-default-indigo-600: rgb(113, 129, 234);
  --palette-default-indigo-700: rgb(83, 99, 202);
  --palette-default-indigo-800: rgb(69, 83, 176);

  --palette-default-purple-100: rgb(237, 235, 255);
  --palette-default-purple-200: rgb(220, 214, 255);
  --palette-default-purple-300: rgb(204, 196, 253);
  --palette-default-purple-400: rgb(188, 178, 250);
  --palette-default-purple-500: rgb(167, 150, 238);
  --palette-default-purple-600: rgb(147, 117, 230);
  --palette-default-purple-700: rgb(117, 88, 198);
  --palette-default-purple-800: rgb(97, 69, 176);

  --palette-default-green-100: #EDFDF5;
  --palette-default-green-200: #CAF6E2;
  --palette-default-green-600: #02A262;
  --palette-default-green-700: #008055;
  --palette-default-green-800: #006B47;

  --palette-default-red-050: #FBF9F9;
  --palette-default-red-100: #FFF7F5;
  --palette-default-red-200: #FFDED6;
  --palette-default-red-600: #F2542C;
  --palette-default-red-700: #D12E05;
  --palette-default-red-800: #AD2300;

  --palette-default-yellow-050: #FFFDF5;
  --palette-default-yellow-100: #FFF7D6;
  --palette-default-yellow-300: #FFD970;
  --palette-default-yellow-600: #EA6906;
  --palette-default-yellow-700: #C44A0E;

  /* ── Semantic tokens — Light mode ──────────────────────────────────── */
  --color-background-brand-primary: var(--palette-default-grey-1100);
  --color-background-brand-primary-hovered: var(--palette-default-grey-900);
  --color-background-brand-primary-pressed: var(--palette-default-grey-800);
  --color-background-brand-secondary: var(--palette-default-grey-alpha-200);
  --color-background-brand-secondary-hovered: var(--palette-default-grey-alpha-300);

  --color-background-neutral-primary: var(--palette-default-grey-1100);
  --color-background-neutral-secondary: var(--palette-default-grey-alpha-200);
  --color-background-neutral-tertiary: var(--palette-default-grey-alpha-000);

  --color-background-information-primary: var(--palette-default-blue-700);
  --color-background-information-secondary: var(--palette-default-blue-alpha-100);
  --color-background-success-primary: var(--palette-default-green-700);
  --color-background-success-secondary: var(--palette-default-green-100);
  --color-background-danger-primary: var(--palette-default-red-700);
  --color-background-danger-secondary: var(--palette-default-red-100);
  --color-background-warning-primary: var(--palette-default-yellow-300);
  --color-background-warning-secondary: var(--palette-default-yellow-100);

  --color-background-input: var(--palette-default-grey-alpha-200);
  --color-background-input-focused: var(--palette-default-grey-000);
  --color-background-disabled: var(--palette-default-grey-alpha-200);
  --color-background-blanket: var(--palette-default-grey-alpha-400);

  --color-elevation-surface: var(--palette-default-grey-000);
  --color-elevation-surface-raised: var(--palette-default-grey-000);
  --color-elevation-surface-overlay: var(--palette-default-grey-000);
  --color-elevation-surface-secondary: rgb(249, 250, 251);
  --color-elevation-inner: var(--palette-default-grey-100);

  --color-border-primary: var(--palette-default-grey-1100);
  --color-border-secondary: var(--palette-default-grey-alpha-300);
  --color-border-input: var(--palette-default-grey-alpha-300);
  --color-border-focused: var(--palette-default-blue-600);
  --color-border-selected: var(--palette-default-blue-700);
  --color-border-success: var(--palette-default-green-600);
  --color-border-warning: var(--palette-default-yellow-600);
  --color-border-danger: var(--palette-default-red-600);
  --color-border-information: var(--palette-default-blue-600);
  --color-border-disabled: var(--palette-default-grey-alpha-300);
  --color-border-brand: var(--palette-default-grey-1100);

  --color-text-primary: var(--palette-default-grey-1050);
  --color-text-primary-inverse: var(--palette-default-grey-050);
  --color-text-secondary: var(--palette-default-grey-800);
  --color-text-tertiary: var(--palette-default-grey-700);
  --color-text-disabled: var(--palette-default-grey-alpha-500);
  --color-text-brand: var(--palette-default-grey-1050);
  --color-text-information: var(--palette-default-blue-700);
  --color-text-success: var(--palette-default-green-700);
  --color-text-danger: var(--palette-default-red-700);
  --color-text-warning: var(--palette-default-yellow-700);
  --color-text-selected: var(--palette-default-blue-700);
  --color-text-accent-purple: var(--palette-default-purple-700);
  --color-text-accent-indigo: var(--palette-default-indigo-700);

  --color-icon-primary: var(--palette-default-grey-1050);
  --color-icon-secondary: var(--palette-default-grey-700);
  --color-icon-disabled: var(--palette-default-grey-alpha-500);
  --color-icon-information: var(--palette-default-blue-600);
  --color-icon-success: var(--palette-default-green-600);
  --color-icon-danger: var(--palette-default-red-600);
  --color-icon-warning: var(--palette-default-yellow-600);
  --color-icon-selected: var(--palette-default-blue-700);
  --color-icon-accent-purple: var(--palette-default-purple-600);
  --color-icon-accent-indigo: var(--palette-default-indigo-600);

  --color-link-primary: var(--palette-default-blue-800);
  --color-link-secondary: var(--palette-default-grey-1050);
  --color-link-tertiary: var(--palette-default-grey-700);
  --color-link-visited: var(--palette-default-purple-800);

  /* ── Typography ────────────────────────────────────────────────────── */
  --font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-sans-heading: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-lilo-heading: "Nunito", "Inter", sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  --font-letter-spacing-tighter: -0.0125em;
  --font-letter-spacing-tight: -0.01em;
  --font-letter-spacing-normal: 0;

  /* Heading shorthand: weight size/line-height family
     Note : 4xl/3xl downgraded from Inter Black (900) to Bold (700) for a softer,
     more editorial look that matches qwant.com's actual usage of Inter Bold
     on large headings. Inter Black is reserved for occasional emphasis only. */
  --text-heading-6xl: 700 56px/56px var(--font-family-sans-heading);
  --text-heading-5xl: 700 48px/56px var(--font-family-sans-heading);
  --text-heading-4xl: 700 40px/48px var(--font-family-sans-heading);
  --text-heading-3xl: 700 32px/40px var(--font-family-sans-heading);
  --text-heading-2xl: 700 28px/36px var(--font-family-sans-heading);
  --text-heading-xl: 700 24px/32px var(--font-family-sans-heading);
  --text-heading-lg: 600 20px/28px var(--font-family-sans-heading);
  --text-heading-md: 600 16px/24px var(--font-family-sans-heading);
  --text-heading-sm: 600 14px/20px var(--font-family-sans-heading);
  --text-heading-xs: 600 12px/16px var(--font-family-sans-heading);

  --text-body-lg: 400 16px/24px var(--font-family-sans);
  --text-body-md: 400 14px/20px var(--font-family-sans);
  --text-body-sm: 400 12px/16px var(--font-family-sans);
  --text-body-xs: 400 10px/14px var(--font-family-sans);

  /* ── Spacing scale ─────────────────────────────────────────────────── */
  --size-025: 2px;
  --size-050: 4px;
  --size-075: 6px;
  --size-100: 8px;
  --size-150: 12px;
  --size-200: 16px;
  --size-250: 20px;
  --size-300: 24px;
  --size-400: 32px;
  --size-500: 40px;
  --size-600: 48px;
  --size-700: 56px;
  --size-800: 64px;
  --size-900: 72px;
  --size-1000: 80px;
  --size-1200: 96px;

  --spacing-025: 2px;
  --spacing-050: 4px;
  --spacing-075: 6px;
  --spacing-100: 8px;
  --spacing-150: 12px;
  --spacing-200: 16px;
  --spacing-250: 20px;
  --spacing-300: 24px;
  --spacing-400: 32px;
  --spacing-500: 40px;
  --spacing-600: 48px;
  --spacing-700: 56px;
  --spacing-800: 64px;
  --spacing-900: 72px;
  --spacing-1000: 80px;
  --spacing-1200: 96px;

  /* ── Radii ─────────────────────────────────────────────────────────── */
  --border-radius-025: 2px;
  --border-radius-050: 4px;
  --border-radius-100: 8px;
  --border-radius-150: 12px;
  --border-radius-200: 16px;
  --border-radius-250: 20px;
  --border-radius-300: 24px;
  --border-radius-400: 32px;
  --border-radius-full: 9999px;

  --border-radius-sm: var(--border-radius-100);
  --border-radius-md: var(--border-radius-150);
  --border-radius-lg: var(--border-radius-200);
  --border-radius-xl: var(--border-radius-300);

  --button-radius-small: var(--border-radius-sm);
  --button-radius-medium: var(--border-radius-md);
  --button-radius-large: var(--border-radius-lg);

  /* ── Shadows ───────────────────────────────────────────────────────── */
  --shadow-elevation:
    0 2px 4px -2px rgba(0, 0, 0, 0.12),
    0 2px 8px 0 rgba(0, 0, 0, 0.08),
    0 0 1px 0 rgba(0, 0, 0, 0.40);
  --shadow-raised:
    0 2px 12px -1px rgba(0, 0, 0, 0.24),
    0 2px 2px -1px rgba(0, 0, 0, 0.08),
    0 0 1px 0 rgba(0, 0, 0, 0.40);
  --shadow-overlay:
    0 16px 24px -4px rgba(0, 0, 0, 0.12),
    0 0 1px 0 rgba(0, 0, 0, 0.40);

  /* ── Motion ────────────────────────────────────────────────────────── */
  --motion-duration-fast: 100ms;
  --motion-duration-base: 200ms;
  --motion-duration-slow: 300ms;
  --motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --motion-ease-out: cubic-bezier(0.19, 0.91, 0.38, 1);

  /* ── Layout ────────────────────────────────────────────────────────── */
  --layout-headline: 1140px;
  --layout-mainline: 692px;
  --layout-narrow: 760px;
  --navbar-height: 56px;
  --topbar-height: 76px;

  /* ── Brand gradients (search bar focus, AI surfaces) ───────────────── */
  --gradient-searchbar-focused: linear-gradient(
    175deg,
    var(--palette-default-blue-100) 0%,
    var(--palette-default-blue-200) 20%,
    var(--palette-default-blue-300) 40%,
    var(--palette-default-purple-100) 60%,
    var(--palette-default-purple-200) 80%,
    var(--palette-default-purple-300) 100%
  );
  --gradient-border: linear-gradient(
    165deg,
    var(--palette-default-blue-500),
    var(--palette-default-blue-600),
    var(--palette-default-blue-700),
    var(--palette-default-purple-500),
    var(--palette-default-purple-600),
    var(--palette-default-purple-700)
  );
}

/* =========================================================================
   BASE & TYPOGRAPHY
   ========================================================================= */
body {
  margin: 0;
  font: var(--text-body-lg);
  color: var(--color-text-primary);
  background: var(--color-elevation-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a {
  color: var(--color-link-secondary);
  text-decoration: none;
  transition: color var(--motion-duration-base) var(--motion-ease);
}
a:hover { color: var(--color-text-primary); text-decoration: underline; text-underline-offset: 3px; }

button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-200);
}
h1 { font: var(--text-heading-3xl); letter-spacing: var(--font-letter-spacing-tight); }
h2 { font: var(--text-heading-2xl); letter-spacing: var(--font-letter-spacing-tight); }
h3 { font: var(--text-heading-xl); }
h4 { font: var(--text-heading-lg); }
h5 { font: var(--text-heading-md); }
h6 { font: var(--text-heading-sm); }
p  { font: var(--text-body-lg); color: var(--color-text-primary); margin: 0 0 var(--spacing-200); }
small { font: var(--text-body-sm); color: var(--color-text-secondary); }
hr { border: 0; border-top: 1px solid var(--color-border-secondary); margin: var(--spacing-400) 0; }
::selection { background: var(--palette-default-blue-200); color: var(--color-text-primary); }

/* =========================================================================
   LAYOUT CONTAINERS
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--layout-headline);
  margin: 0 auto;
  padding: 0 var(--spacing-300);
}
.container-divider { border-top: 1px solid var(--color-border-secondary); }

/* =========================================================================
   UTILITIES
   ========================================================================= */
.visibility-hidden,
.screen-reader-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-navigation {
  position: absolute;
  top: -40px; left: var(--spacing-200);
  background: var(--color-background-brand-primary);
  color: var(--color-text-primary-inverse);
  padding: var(--spacing-100) var(--spacing-200);
  border-radius: var(--border-radius-sm);
  z-index: 1000;
}
.skip-navigation:focus { top: var(--spacing-200); }

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

/* =========================================================================
   BUTTONS — Qwant DS variants
   .button         → secondary (default brand-grey-alpha)
   .button-primary → primary (brand grey-1100 → inverse text)
   ========================================================================= */
.button,
button.button,
input[type="submit"],
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-100);
  min-height: var(--size-500);              /* 40px = md */
  padding: var(--spacing-100) var(--spacing-200);
  font: var(--text-body-md);
  font-weight: var(--font-weight-semibold);
  border: 1px solid transparent;
  border-radius: var(--button-radius-medium);
  background: var(--color-background-brand-secondary);
  color: var(--color-text-primary);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--motion-duration-base) var(--motion-ease),
              box-shadow var(--motion-duration-base) var(--motion-ease),
              color var(--motion-duration-base) var(--motion-ease),
              border-color var(--motion-duration-base) var(--motion-ease);
}
.button:hover,
button.button:hover {
  background: var(--color-background-brand-secondary-hovered);
  color: var(--color-text-primary);
  text-decoration: none;
}

.button-large {
  min-height: var(--size-600);              /* 48px */
  padding: var(--spacing-150) var(--spacing-300);
  font: var(--text-body-lg);
  font-weight: var(--font-weight-bold);
  border-radius: var(--button-radius-large);
}

.button-small {
  min-height: var(--size-400);              /* 32px */
  padding: calc(var(--spacing-050) + var(--spacing-025)) var(--spacing-150);
  font: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--button-radius-small);
}

/* Primary variant — brand dark */
.button-primary,
input[type="submit"],
button[type="submit"] {
  background: var(--color-background-brand-primary);
  color: var(--color-text-primary-inverse);
  box-shadow: var(--shadow-raised);
  border-color: transparent;
}
.button-primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--color-background-brand-primary-hovered);
  color: var(--color-text-primary-inverse);
}
.button-primary:active,
input[type="submit"]:active,
button[type="submit"]:active {
  background: var(--color-background-brand-primary-pressed);
}

/* Outline pill variant (filters, scoped toggles) */
.button-secondary {
  background: var(--color-elevation-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--border-radius-full);
}
.button-secondary:hover { background: var(--palette-default-grey-100); }

/* Disabled */
.button:disabled,
.button.disabled,
button[disabled] {
  background: var(--color-background-disabled);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  box-shadow: none;
  border-color: transparent;
}

/* =========================================================================
   FORMS
   ========================================================================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  min-height: var(--size-500);
  padding: var(--spacing-100) var(--spacing-150);
  font: var(--text-body-md);
  color: var(--color-text-primary);
  background: var(--color-background-input);
  border: 1px solid var(--color-border-input);
  border-radius: var(--border-radius-md);
  transition: border-color var(--motion-duration-base) var(--motion-ease),
              background var(--motion-duration-base) var(--motion-ease),
              box-shadow var(--motion-duration-base) var(--motion-ease);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  background: var(--color-background-input-focused);
  border-color: var(--color-border-focused);
  box-shadow: 0 0 0 3px var(--palette-default-blue-alpha-200);
}
::placeholder { color: var(--color-text-tertiary); opacity: 1; }

label {
  display: inline-block;
  margin-bottom: var(--spacing-075);
  font: var(--text-body-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* =========================================================================
   HEADER — Qwant cross-site header (mirrors help.qwant.com, no middle nav)
   ========================================================================= */
.header.qwant-header {
  background: var(--color-elevation-surface);
  border-bottom: 1px solid var(--color-border-secondary);
}

.qwant-header-inner {
  max-width: var(--layout-headline);
  margin: 0 auto;
  padding: var(--spacing-200) var(--spacing-300);
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-300);
}

.qwant-header-brand { display: inline-flex; align-items: center; }
.qwant-header-logo {
  display: inline-flex;
  align-items: center;
}
.qwant-header-logo:hover { text-decoration: none; }
.qwant-header-logo img {
  height: 34px;
  width: auto;
  display: block;
}

/* Text wordmark — used when the bitmap logo would render blurry */
.qwant-header-wordmark {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-primary);
  letter-spacing: var(--font-letter-spacing-tight);
}

.qwant-header-right.nav-wrapper-desktop {
  display: flex;
  align-items: center;
  gap: var(--spacing-200);
}

/* "Retourner sur Qwant.com" — outline rounded button matching qwant.com */
.qwant-header-back {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100);
  padding: var(--spacing-100) var(--spacing-200);
  background: var(--palette-default-grey-alpha-100);
  color: var(--color-text-primary);
  border: 1px solid var(--palette-default-grey-alpha-200);
  border-radius: var(--border-radius-lg);
  font: var(--text-body-md);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: background var(--motion-duration-base) var(--motion-ease),
              border-color var(--motion-duration-base) var(--motion-ease),
              color var(--motion-duration-base) var(--motion-ease);
}
.qwant-header-back:hover {
  background: var(--palette-default-grey-alpha-200);
  border-color: var(--palette-default-grey-alpha-300);
  color: var(--color-text-primary);
  text-decoration: none;
}
.qwant-header-back svg { flex: none; }

.sign-in {
  font: var(--text-body-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.sign-in:hover { color: var(--color-text-primary); text-decoration: none; }

/* Header language selector (light variant on white header) */
.header-language-selector .dropdown-toggle {
  background: transparent;
  border: 1px solid var(--color-border-secondary);
  color: var(--color-text-secondary);
  font: var(--text-body-md);
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-100) var(--spacing-200);
  border-radius: var(--border-radius-full);
}
.header-language-selector .dropdown-toggle:hover {
  background: var(--palette-default-grey-100);
  color: var(--color-text-primary);
  border-color: var(--color-border-secondary);
}
.header-language-selector .dropdown-menu {
  background: var(--color-elevation-surface);
  border-color: var(--color-border-secondary);
  box-shadow: var(--shadow-overlay);
  min-width: 180px;
}
.header-language-selector .dropdown-menu a {
  color: var(--color-text-secondary);
  font: var(--text-body-md);
}
.header-language-selector .dropdown-menu a:hover {
  background: var(--color-elevation-surface-secondary);
  color: var(--color-text-primary);
}

/* User dropdown */
.user-info.dropdown { position: relative; }
.user-info .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100);
  padding: var(--spacing-075) var(--spacing-150);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--border-radius-full);
  color: var(--color-text-secondary);
  font: var(--text-body-md);
}
.user-info .dropdown-toggle:hover {
  background: var(--palette-default-grey-100);
  color: var(--color-text-primary);
}
.user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
}

/* Mobile nav */
.nav-wrapper-mobile { display: none; }
.menu-button-mobile {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100);
  padding: var(--spacing-100);
  background: transparent;
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
}
.menu-list-mobile {
  position: absolute;
  top: 100%; right: var(--spacing-200);
  margin-top: var(--spacing-100);
  min-width: 260px;
  background: var(--color-elevation-surface-overlay);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-overlay);
  padding: var(--spacing-100);
  z-index: 100;
  display: none;
}
.menu-list-mobile[aria-expanded="true"] { display: block; }
.menu-list-mobile-items { list-style: none; padding: 0; margin: 0; }
.menu-list-mobile-items .item a {
  display: block;
  padding: var(--spacing-150);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-secondary);
  font: var(--text-body-md);
}
.menu-list-mobile-items .item a:hover {
  background: var(--palette-default-grey-100);
  color: var(--color-text-primary);
  text-decoration: none;
}
.nav-divider { height: 1px; background: var(--color-border-secondary); margin: var(--spacing-100) 0; }
.user-avatar-item {
  padding: var(--spacing-150);
  display: flex; gap: var(--spacing-150); align-items: center;
}
.menu-profile-avatar { width: 36px; height: 36px; border-radius: 50%; }

/* =========================================================================
   HERO (homepage)
   ========================================================================= */
.section.hero {
  background: var(--color-elevation-surface-secondary);
  padding: var(--spacing-1200) var(--spacing-300);
  margin-bottom: var(--spacing-800);
  border-bottom: 1px solid var(--color-border-secondary);
}

.hero-inner {
  max-width: var(--layout-narrow);
  margin: 0 auto;
  text-align: center;
}

.hero-title {
  font: var(--text-heading-4xl);
  letter-spacing: var(--font-letter-spacing-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-150);
}
.hero-subtitle {
  font: var(--text-body-lg);
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-500);
}

.hero-search-wrap {
  position: relative;
  width: 100%;
}
.hero-search-wrap .search-icon {
  position: absolute;
  left: var(--spacing-300);
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--color-icon-secondary);
  pointer-events: none;
  z-index: 2;
}

.hero .search,
.hero-search-wrap .search { position: relative; width: 100%; }

/* Big rounded pill search bar (DS searchbar) */
.hero .search input[type="search"],
.hero-search-wrap .search input[type="search"] {
  width: 100%;
  height: var(--size-700);                  /* 56px */
  padding: 0 var(--spacing-300) 0 var(--spacing-700);
  font: var(--text-body-lg);
  background: var(--color-elevation-surface);
  border: 1px solid var(--color-border-input);
  border-radius: var(--border-radius-full);
  box-shadow: var(--shadow-elevation);
  transition: border-color var(--motion-duration-base) var(--motion-ease),
              background var(--motion-duration-base) var(--motion-ease),
              box-shadow var(--motion-duration-base) var(--motion-ease);
}
/* Focus state — DS purple/blue gradient halo */
.hero .search input[type="search"]:focus,
.hero-search-wrap .search input[type="search"]:focus {
  outline: none;
  border-color: var(--color-border-focused);
  box-shadow: 0 0 0 3px var(--palette-default-blue-alpha-200);
}

/* Hot topics chips shown under the hero search bar.
   Placed outside .hero-inner (which has max-width 760px) so the row can breathe. */
.hero-hot-topics {
  max-width: var(--layout-headline);
  margin: var(--spacing-500) auto 0;
  padding: 0 var(--spacing-300);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-200);
}
.hero-hot-topics-label {
  font-family: var(--font-family-sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
}
.hero-hot-topics-list {
  list-style: none;
  padding: 0; margin: 0;
  width: 100%;
  display: flex;
  gap: var(--spacing-150);
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}
.hero-hot-topics-list li { display: flex; }
.hero-hot-topic {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100);
  padding: var(--spacing-100) var(--spacing-250);
  background: var(--color-elevation-surface);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--border-radius-full);
  color: var(--color-text-secondary);
  font-family: var(--font-family-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.175px;
  text-decoration: none;
  box-shadow: var(--shadow-elevation);
  white-space: nowrap;
  transition: background var(--motion-duration-base) var(--motion-ease),
              border-color var(--motion-duration-base) var(--motion-ease),
              color var(--motion-duration-base) var(--motion-ease),
              transform var(--motion-duration-base) var(--motion-ease);
}
.hero-hot-topic:hover {
  background: var(--color-elevation-surface);
  border-color: var(--palette-default-grey-alpha-400);
  color: var(--color-text-primary);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-raised);
}

/* Small viewports : allow chips to wrap and truncate cleanly */
@media (max-width: 640px) {
  .hero-hot-topic {
    white-space: normal;
    text-align: center;
  }
}

/* Clear-search button (X) injected by script.js — buildClearSearchButton() */
form[role="search"] { position: relative; }
.clear-button {
  position: absolute;
  right: var(--spacing-200);
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-icon-secondary);
  cursor: pointer;
  transition: background var(--motion-duration-base) var(--motion-ease),
              color var(--motion-duration-base) var(--motion-ease);
  z-index: 3;
}
.clear-button:hover {
  background: var(--palette-default-grey-100);
  color: var(--color-text-primary);
}
.clear-button svg { width: 10px; height: 10px; display: block; }
.search-has-value .clear-button { display: inline-flex; }
.search-has-value input[type="search"] { padding-right: var(--spacing-600); }
.sub-nav .search-container .clear-button { right: var(--spacing-100); width: 22px; height: 22px; }
[dir="rtl"] .clear-button { right: auto; left: var(--spacing-200); }
[dir="rtl"] .sub-nav .search-container .clear-button { left: var(--spacing-100); right: auto; }

/* =========================================================================
   CATEGORIES GRID — DS Cards
   ========================================================================= */
.section.knowledge-base { margin-bottom: var(--spacing-800); }

.blocks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-200);
}

.blocks-item { display: flex; }

/* Card per DS — bg surface, border secondary, radius lg, shadow elevation, lift on hover */
.blocks-item-link {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: var(--spacing-250);
  width: 100%;
  padding: var(--spacing-300);
  background: var(--color-elevation-surface);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-elevation);
  color: var(--color-text-primary);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--motion-duration-base) var(--motion-ease),
              transform var(--motion-duration-base) var(--motion-ease),
              border-color var(--motion-duration-base) var(--motion-ease);
}
.blocks-item-link::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, var(--palette-default-blue-alpha-100), transparent 45%);
  opacity: 0;
  transition: opacity var(--motion-duration-base) var(--motion-ease);
}
.blocks-item-link:hover {
  box-shadow: var(--shadow-raised);
  border-color: var(--palette-default-grey-alpha-400);
  text-decoration: none;
  color: var(--color-text-primary);
  transform: translateY(-2px);
}
.blocks-item-link:hover::before { opacity: 1; }

.blocks-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--border-radius-md);
  background: linear-gradient(135deg, var(--palette-default-blue-100), var(--palette-default-purple-100));
  color: var(--palette-default-blue-800);
  flex: none;
  position: relative;
  z-index: 1;
  transition: background var(--motion-duration-base) var(--motion-ease),
              color var(--motion-duration-base) var(--motion-ease);
}
.blocks-item-icon svg { width: 24px; height: 24px; display: block; }
/* No hover state on the icon — only the card's subtle lift kicks in. */

.blocks-item-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-050);
  min-width: 0;
  position: relative;
  z-index: 1;
}

.blocks-item-title {
  font: var(--text-heading-md);
  color: var(--color-text-primary);
}

.blocks-item-description {
  font: var(--text-body-md);
  color: var(--color-text-tertiary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blocks-item-chevron {
  flex: none;
  color: var(--color-text-tertiary);
  position: relative;
  z-index: 1;
  transition: color var(--motion-duration-base) var(--motion-ease),
              transform var(--motion-duration-base) var(--motion-ease);
}
.blocks-item-link:hover .blocks-item-chevron {
  color: var(--color-text-primary);
  transform: translateX(4px);
}

/* Promoted articles strip on home */
.articles { margin-top: var(--spacing-600); }
.articles h2 {
  font: var(--text-body-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--spacing-200);
}

.promoted-articles {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--spacing-100);
}
.promoted-articles-item a {
  display: flex;
  align-items: center;
  gap: var(--spacing-100);
  padding: var(--spacing-150) var(--spacing-200);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  color: var(--color-text-secondary);
  font: var(--text-body-md);
  font-weight: var(--font-weight-medium);
}
.promoted-articles-item a:hover {
  background: var(--color-elevation-surface-secondary);
  text-decoration: none;
  color: var(--color-text-primary);
}

/* Community card on homepage */
.home-section.community {
  margin-top: var(--spacing-600);
  padding: var(--spacing-500);
  background: var(--color-elevation-surface-secondary);
  border-radius: var(--border-radius-lg);
}
.community-link {
  display: inline-block;
  margin-top: var(--spacing-100);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-secondary);
}
.community-image {
  margin-top: var(--spacing-200);
  height: 120px;
  border-radius: var(--border-radius-md);
  background: var(--palette-default-grey-100) center/cover;
}

/* =========================================================================
   SUB-NAV (breadcrumbs + scoped search)
   ========================================================================= */
.sub-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-200);
  padding: var(--spacing-300) 0;
  flex-wrap: wrap;
}

ol.breadcrumbs,
.sub-nav .breadcrumbs,
.sub-nav ol.breadcrumbs {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font: var(--text-body-md);
  color: var(--color-text-tertiary);
}
ol.breadcrumbs li { display: inline-flex; align-items: center; }
ol.breadcrumbs li + li::before {
  content: "/";
  margin: 0 var(--spacing-100);
  color: var(--color-text-tertiary);
}
ol.breadcrumbs a { color: var(--color-text-tertiary); }
ol.breadcrumbs a:hover { color: var(--color-text-primary); text-decoration: none; }
ol.breadcrumbs li:last-child { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }

.sub-nav .search-container {
  position: relative;
  flex: 0 1 320px;
  min-width: 240px;
}
.sub-nav .search-container .search-icon {
  position: absolute;
  left: var(--spacing-150);
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--color-icon-secondary);
  pointer-events: none;
}
.sub-nav .search-container input[type="search"] {
  height: var(--size-500);
  min-height: var(--size-500);
  padding: 0 var(--spacing-200) 0 var(--spacing-500);
  border-radius: var(--border-radius-full);
  background: var(--color-elevation-surface);
  border: 1px solid var(--color-border-input);
  font: var(--text-body-md);
  box-shadow: var(--shadow-elevation);
}

/* =========================================================================
   PAGE HEADER
   ========================================================================= */
.page-header { margin: var(--spacing-600) 0 var(--spacing-500); }
.page-header h1 { font: var(--text-heading-3xl); margin-bottom: var(--spacing-150); }
.page-header-description {
  color: var(--color-text-secondary);
  font: var(--text-body-lg);
  max-width: 720px;
  margin: 0;
}

/* =========================================================================
   CATEGORY PAGE
   ========================================================================= */
.category-container { padding-bottom: var(--spacing-1200); }

.section-tree { display: grid; gap: var(--spacing-600); }
.section-tree .section {
  padding-top: var(--spacing-500);
  border-top: 1px solid var(--color-border-secondary);
}
.section-tree .section:first-child { padding-top: 0; border-top: 0; }

.section-tree-title { font: var(--text-heading-xl); margin-bottom: var(--spacing-200); }
.section-tree-title a { color: var(--color-text-primary); }
.section-tree-title a:hover { color: var(--color-text-primary); text-decoration: underline; }

.article-list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: var(--spacing-025);
}
.article-list-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-100);
  padding: var(--spacing-150) var(--spacing-200);
  border-radius: var(--border-radius-md);
  color: var(--color-text-secondary);
  transition: background var(--motion-duration-fast) var(--motion-ease);
}
.article-list-item:hover { background: var(--color-elevation-surface-secondary); }
.article-list-link {
  color: var(--color-text-secondary);
  font: var(--text-body-md);
  flex: 1;
}
.article-list-link:hover { color: var(--color-text-primary); text-decoration: none; }

/* =========================================================================
   Article rows — OpenAI-style collection layout (used on category_page)
   ========================================================================= */
.section-collection { padding: 0; border-top: 1px solid var(--color-border-secondary); padding-top: var(--spacing-500); }
.section-collection:first-child { border-top: 0; padding-top: 0; }
.section-collection-header { margin-bottom: var(--spacing-300); }

/* Hide the section header when there's only one section in the category
   (Zendesk forces a Category > Section > Article hierarchy ; this lets the
   visitor see articles listed directly under the category title without
   the redundant "Général" / single-section heading). */
.section-tree .section-collection:only-of-type .section-collection-header,
.section-collection[data-section-name="Général"] .section-collection-header,
.section-collection[data-section-name="General"] .section-collection-header,
.section-collection[data-section-name="Articles"] .section-collection-header,
.section-collection[data-section-name="Default"] .section-collection-header,
.section-collection[data-section-name="Other"] .section-collection-header,
.section-collection[data-section-name="Divers"] .section-collection-header {
  display: none;
}
/* When a single-section is rendered headerless, kill the now-useless top border too */
.section-tree .section-collection:only-of-type { border-top: 0; padding-top: 0; }
.section-collection-title {
  font: var(--text-heading-xl);
  margin: 0;
}
.section-collection-title a { color: var(--color-text-primary); }
.section-collection-title a:hover { text-decoration: underline; color: var(--color-text-primary); }
.section-collection-description {
  font: var(--text-body-lg);
  color: var(--color-text-tertiary);
  margin: var(--spacing-100) 0 0;
  max-width: 720px;
}

.article-rows {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--color-border-secondary);
}
.article-row { border-bottom: 1px solid var(--color-border-secondary); }
.article-row-link {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: var(--spacing-250);
  padding: var(--spacing-300) var(--spacing-200);
  color: var(--color-text-primary);
  transition: background var(--motion-duration-fast) var(--motion-ease),
              padding var(--motion-duration-base) var(--motion-ease);
  border-radius: var(--border-radius-md);
}
.article-row-link:hover {
  background: var(--color-elevation-surface-secondary);
  color: var(--color-text-primary);
  text-decoration: none;
}
.article-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--palette-default-grey-100);
  color: var(--color-text-secondary);
  flex: none;
  transition: background var(--motion-duration-base) var(--motion-ease),
              color var(--motion-duration-base) var(--motion-ease);
}
.article-row-icon svg { width: 18px; height: 18px; display: block; }
.article-row-link:hover .article-row-icon {
  background: var(--palette-default-blue-100);
  color: var(--palette-default-blue-800);
}
.article-row-promoted .article-row-icon {
  background: var(--palette-default-yellow-100);
  color: var(--palette-default-yellow-700);
}

.article-row-content {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100);
}
.article-row-title {
  font: var(--text-heading-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.4;
}
.article-row-chevron {
  flex: none;
  color: var(--color-text-tertiary);
  transition: color var(--motion-duration-base) var(--motion-ease),
              transform var(--motion-duration-base) var(--motion-ease);
}
.article-row-link:hover .article-row-chevron {
  color: var(--color-text-primary);
  transform: translateX(4px);
}

@media (max-width: 480px) {
  .article-row-link { padding: var(--spacing-200) var(--spacing-150); gap: var(--spacing-150); }
  .article-row-title { font: var(--text-body-lg); font-weight: var(--font-weight-semibold); }
}

.see-all-articles {
  display: inline-block;
  margin-top: var(--spacing-200);
  font: var(--text-body-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-link-primary);
}
.see-all-articles:hover { text-decoration: underline; }

.icon-star { color: var(--color-icon-warning); flex: none; }
.icon-lock { color: var(--color-icon-secondary); flex: none; }

/* =========================================================================
   SECTION PAGE
   ========================================================================= */
.section-container { padding-bottom: var(--spacing-1200); }
.section-list {
  list-style: none;
  padding: 0; margin: 0 0 var(--spacing-300);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-150);
}
.section-list-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-150);
  padding: var(--spacing-200);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  color: var(--color-text-primary);
  font: var(--text-body-md);
  font-weight: var(--font-weight-semibold);
  background: var(--color-elevation-surface);
}
.section-list-item a:hover {
  background: var(--color-elevation-surface-secondary);
  text-decoration: none;
}

/* =========================================================================
   ARTICLE PAGE
   ========================================================================= */
.article-container {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--spacing-800);
  padding-bottom: var(--spacing-1200);
}
@media (max-width: 900px) {
  .article-container { grid-template-columns: 1fr; gap: var(--spacing-300); }
}

.article-sidebar {
  position: sticky;
  top: var(--spacing-300);
  align-self: start;
}

.collapsible-sidebar-title {
  display: block;
  font: var(--text-body-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--spacing-150);
}

.collapsible-sidebar-toggle {
  display: none;
  align-items: center;
  gap: var(--spacing-100);
  width: 100%;
  padding: var(--spacing-150);
  background: var(--color-elevation-surface-secondary);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
}
.collapsible-sidebar-toggle-icon { width: 16px; height: 16px; }
.collapsible-sidebar-toggle-icon.x-icon { display: none; }

.collapsible-sidebar-body ul {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: var(--spacing-025);
}
.sidenav-item {
  display: block;
  padding: var(--spacing-100) var(--spacing-150);
  font: var(--text-body-md);
  color: var(--color-text-tertiary);
  border-radius: var(--border-radius-sm);
  border-left: 2px solid transparent;
  line-height: 1.45;
}
.sidenav-item:hover {
  background: var(--color-elevation-surface-secondary);
  color: var(--color-text-primary);
  text-decoration: none;
}
.sidenav-item.current-article {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  background: var(--palette-default-blue-alpha-100);
  border-left-color: var(--color-border-selected);
}
.article-sidebar-item {
  display: inline-block;
  margin-top: var(--spacing-150);
  font: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-link-primary);
}
.article-sidebar-item:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .article-sidebar { position: static; }
  .collapsible-sidebar-toggle { display: inline-flex; }
  .collapsible-sidebar-title { display: none; }
  .collapsible-sidebar-body { display: none; padding-top: var(--spacing-150); }
  .collapsible-sidebar[aria-expanded="true"] .collapsible-sidebar-body { display: block; }
  .collapsible-sidebar[aria-expanded="true"] .chevron-icon { display: none; }
  .collapsible-sidebar[aria-expanded="true"] .x-icon { display: block; }
}

.article { max-width: var(--layout-narrow); }

.article-header { margin-bottom: var(--spacing-300); }
.article-title {
  font: var(--text-heading-3xl);
  letter-spacing: var(--font-letter-spacing-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-200);
  display: flex;
  align-items: center;
  gap: var(--spacing-150);
  flex-wrap: wrap;
}

.article-author {
  display: flex;
  align-items: center;
  gap: var(--spacing-150);
  font: var(--text-body-sm);
  color: var(--color-text-tertiary);
}
.avatar.article-avatar { display: inline-flex; }
.avatar.article-avatar img { width: 32px; height: 32px; border-radius: 50%; }

.article-meta { display: flex; flex-direction: column; gap: 2px; }
.meta-group {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100);
  color: var(--color-text-tertiary);
  font: var(--text-body-sm);
}
.meta-data { color: var(--color-text-tertiary); font: var(--text-body-sm); }

.article-info { margin: var(--spacing-300) 0; }

/* =========================================================================
   ARTICLE BODY — long-form prose
   ========================================================================= */
.article-body {
  font: var(--text-body-lg);
  line-height: 1.75;
  color: var(--color-text-primary);
}
.article-body > * { max-width: 100%; }

.article-body p,
.article-body ul,
.article-body ol,
.article-body blockquote,
.article-body pre,
.article-body table { margin: 0 0 var(--spacing-300); }

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4 {
  color: var(--color-text-primary);
  margin: var(--spacing-600) 0 var(--spacing-200);
  scroll-margin-top: 80px;
}
.article-body h2 { font: var(--text-heading-xl); }
.article-body h3 { font: var(--text-heading-lg); }
.article-body h4 { font: var(--text-heading-md); }

.article-body a {
  color: var(--color-link-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.article-body a:hover { text-decoration-thickness: 2px; }

.article-body ul, .article-body ol { padding-left: 1.4em; }
.article-body li { margin-bottom: var(--spacing-100); }
.article-body li > ul, .article-body li > ol { margin-top: var(--spacing-100); margin-bottom: 0; }

.article-body blockquote {
  padding: var(--spacing-150) var(--spacing-300);
  border-left: 3px solid var(--color-border-information);
  background: var(--color-background-information-secondary);
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
  color: var(--color-text-primary);
}

.article-body code {
  font-family: var(--font-family-mono);
  font-size: 0.92em;
  background: var(--palette-default-grey-100);
  padding: 2px 6px;
  border-radius: var(--border-radius-sm);
  color: var(--color-text-primary);
}
.article-body pre {
  font-family: var(--font-family-mono);
  font-size: 13.5px;
  background: var(--palette-default-grey-1100);
  color: var(--palette-default-grey-050);
  padding: var(--spacing-300);
  border-radius: var(--border-radius-md);
  overflow-x: auto;
  line-height: 1.55;
}
.article-body pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

.article-body img {
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border-secondary);
  margin: var(--spacing-150) 0;
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  font: var(--text-body-md);
}
.article-body table th,
.article-body table td {
  padding: var(--spacing-150);
  border: 1px solid var(--color-border-secondary);
  text-align: left;
  vertical-align: top;
}
.article-body table th {
  background: var(--color-elevation-surface-secondary);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.article-body hr {
  border: 0;
  border-top: 1px solid var(--color-border-secondary);
  margin: var(--spacing-500) 0;
}

/* Content tags */
.content-tags { margin-top: var(--spacing-500); }
.content-tags p {
  font: var(--text-body-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--spacing-100);
}
.content-tag-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-100);
}
.content-tag-item a {
  display: inline-block;
  padding: var(--spacing-050) var(--spacing-150);
  background: var(--color-elevation-surface-secondary);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--border-radius-full);
  font: var(--text-body-sm);
  color: var(--color-text-secondary);
}
.content-tag-item a:hover {
  background: var(--palette-default-grey-100);
  text-decoration: none;
  color: var(--color-text-primary);
}

/* Attachments */
.article-attachments { margin-top: var(--spacing-300); }
.attachments {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: var(--spacing-100);
}
.attachment-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-150);
  padding: var(--spacing-150) var(--spacing-200);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  background: var(--color-elevation-surface);
  font: var(--text-body-md);
}
.attachment-icon { color: var(--color-icon-secondary); flex: none; }
.attachment-meta { margin-left: auto; }

/* =========================================================================
   ARTICLE FOOTER (votes / share / etc.)
   ========================================================================= */
.article-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-200);
  padding-top: var(--spacing-300);
  border-top: 1px solid var(--color-border-secondary);
}

.article-share { display: inline-flex; gap: var(--spacing-100); align-items: center; }
.article-comment-count {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100);
  font: var(--text-body-sm);
  color: var(--color-text-tertiary);
}

.article-votes {
  margin-top: var(--spacing-600);
  padding: var(--spacing-500);
  background: var(--color-elevation-surface-secondary);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--border-radius-lg);
  text-align: center;
}
.article-votes-question {
  font: var(--text-heading-md);
  margin: 0 0 var(--spacing-200);
}
.article-votes-controls {
  display: inline-flex;
  gap: var(--spacing-150);
  margin-bottom: var(--spacing-150);
}
.article-vote {
  min-width: 80px;
  padding: var(--spacing-150) var(--spacing-300);
  border-radius: var(--border-radius-full);
  background: var(--color-elevation-surface);
  border: 1px solid var(--color-border-secondary);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}
.article-vote:hover { background: var(--palette-default-grey-100); }
.article-vote.button-primary {
  background: var(--color-background-brand-primary);
  color: var(--color-text-primary-inverse);
  border-color: var(--color-background-brand-primary);
}
.article-votes-count {
  display: block;
  font: var(--text-body-sm);
  color: var(--color-text-tertiary);
}

.article-more-questions {
  margin-top: var(--spacing-500);
  font: var(--text-body-lg);
  color: var(--color-text-secondary);
}
.article-more-questions a { color: var(--color-link-primary); }
.article-more-questions a:hover { text-decoration: underline; }

.article-return-to-top {
  margin-top: var(--spacing-500);
  text-align: center;
  font: var(--text-body-md);
}
.article-return-to-top a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100);
  color: var(--color-text-tertiary);
}
.article-return-to-top-icon { transform: rotate(180deg); width: 14px; height: 14px; }

/* Related & recently viewed */
.article-relatives { margin-top: var(--spacing-800); display: grid; gap: var(--spacing-500); }
.article-relatives > section h3,
.article-relatives > section h2 {
  font: var(--text-body-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--spacing-150);
}
.article-relatives ul {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: var(--spacing-025);
}
.article-relatives li a {
  display: block;
  padding: var(--spacing-150) var(--spacing-200);
  border-radius: var(--border-radius-md);
  color: var(--color-text-secondary);
  font: var(--text-body-md);
}
.article-relatives li a:hover {
  background: var(--color-elevation-surface-secondary);
  color: var(--color-text-primary);
  text-decoration: none;
}

/* =========================================================================
   COMMENTS
   ========================================================================= */
.article-comments,
.post-comments { margin-top: var(--spacing-800); }

.comment-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-150);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-300);
}
.comment-heading { font: var(--text-heading-xl); margin: 0; }
.comment-callout { color: var(--color-text-tertiary); font: var(--text-body-md); margin: 0; }

.comment-list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: var(--spacing-300);
}
.comment-wrapper {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--spacing-200);
  padding: var(--spacing-300);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--border-radius-lg);
  background: var(--color-elevation-surface);
  box-shadow: var(--shadow-elevation);
}
.comment-info { min-width: 0; }
.comment-author {
  display: flex;
  align-items: center;
  gap: var(--spacing-150);
  margin-bottom: var(--spacing-150);
  flex-wrap: wrap;
}
.comment-avatar img { width: 32px; height: 32px; border-radius: 50%; }
.comment-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100);
  flex-wrap: wrap;
  font: var(--text-body-md);
}
.comment-meta a { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.comment-body { color: var(--color-text-primary); }

.comment-actions-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-150);
  align-items: center;
}
.comment-vote {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-050);
  background: var(--color-elevation-surface-secondary);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--border-radius-full);
  padding: var(--spacing-050);
}
.comment-vote button,
.comment-vote a {
  display: inline-flex;
  width: 28px; height: 28px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--color-icon-secondary);
}
.comment-vote .vote-up svg { transform: rotate(180deg); }
.comment-vote .vote-voted { color: var(--color-icon-selected); background: var(--color-elevation-surface); }
.comment-vote .vote-sum { padding: 0 var(--spacing-100); font: var(--text-body-sm); color: var(--color-text-secondary); }

.comment-form { margin-top: var(--spacing-300); display: flex; gap: var(--spacing-150); }
.comment-container { flex: 1; }
.comment-form-controls { margin-top: var(--spacing-150); display: flex; justify-content: flex-end; }

/* =========================================================================
   STATUS LABELS / BADGES
   ========================================================================= */
.status-label {
  display: inline-block;
  padding: 2px var(--spacing-100);
  font: var(--text-body-xs);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  border-radius: var(--border-radius-full);
  background: var(--color-elevation-surface-secondary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-secondary);
}
.status-label-featured {
  background: var(--palette-default-yellow-100);
  color: var(--palette-default-yellow-700);
  border-color: var(--palette-default-yellow-300);
}
.status-label-pinned {
  background: var(--palette-default-blue-100);
  color: var(--palette-default-blue-800);
  border-color: var(--palette-default-blue-200);
}
.status-label-pending-moderation {
  background: var(--palette-default-red-100);
  color: var(--palette-default-red-700);
  border-color: var(--palette-default-red-200);
}
.status-label-official {
  background: var(--color-background-brand-primary);
  color: var(--color-text-primary-inverse);
  border-color: var(--color-background-brand-primary);
}

.community-badge {
  display: inline-block;
  padding: 2px var(--spacing-100);
  font: var(--text-body-sm);
  border-radius: var(--border-radius-full);
  background: var(--color-elevation-surface-secondary);
  border: 1px solid var(--color-border-secondary);
  color: var(--color-text-secondary);
}
.community-badge-titles,
.community-badge-achievements {
  display: inline-flex;
  gap: var(--spacing-050);
  padding: 0; margin: 0;
  list-style: none;
}

/* =========================================================================
   DROPDOWNS
   ========================================================================= */
.dropdown { position: relative; display: inline-block; }
.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100);
  padding: var(--spacing-100) var(--spacing-200);
  background: var(--color-elevation-surface);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--border-radius-full);
  font: var(--text-body-md);
  color: var(--color-text-secondary);
}
.dropdown-toggle:hover {
  background: var(--palette-default-grey-100);
  color: var(--color-text-primary);
}
.dropdown-chevron-icon { width: 12px; height: 12px; }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 200px;
  padding: var(--spacing-100);
  background: var(--color-elevation-surface-overlay);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-overlay);
  z-index: 50;
  display: none;
}
.dropdown[aria-expanded="true"] > .dropdown-menu,
.dropdown-toggle[aria-expanded="true"] + .dropdown-menu { display: block; }
.dropdown-menu a,
.dropdown-menu [role="menuitem"],
.dropdown-menu [role="menuitemradio"] {
  display: block;
  padding: var(--spacing-100) var(--spacing-150);
  border-radius: var(--border-radius-sm);
  font: var(--text-body-md);
  color: var(--color-text-secondary);
}
.dropdown-menu a:hover {
  background: var(--color-elevation-surface-secondary);
  color: var(--color-text-primary);
  text-decoration: none;
}
.dropdown-menu-end { left: auto; right: 0; }
.separator { height: 1px; background: var(--color-border-secondary); margin: var(--spacing-100) 0; }

/* =========================================================================
   PAGINATION
   ========================================================================= */
.pagination,
nav.pagination {
  display: flex;
  justify-content: center;
  gap: var(--spacing-050);
  list-style: none;
  padding: var(--spacing-300) 0 0;
  margin: 0;
}
.pagination a,
.pagination span,
.pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--spacing-150);
  border-radius: var(--border-radius-md);
  font: var(--text-body-md);
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid transparent;
}
.pagination a:hover {
  background: var(--color-elevation-surface-secondary);
  color: var(--color-text-primary);
  text-decoration: none;
}
.pagination .current,
.pagination [aria-current="page"] {
  background: var(--color-background-brand-primary);
  color: var(--color-text-primary-inverse);
  border-color: var(--color-background-brand-primary);
}

/* =========================================================================
   REQUESTS / FORMS PAGES
   ========================================================================= */
.request-container,
.requests-table-wrapper,
.requests-page,
.new-request-page,
.subscriptions-page,
.user-profile-page,
.community-post-list-page { padding-bottom: var(--spacing-1200); }


/* RGPD consent notice injected above the submit button (new-request form) */
.new-request-legal-notice {
  margin: 0 0 var(--spacing-300);
  font: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.new-request-legal-notice a {
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.new-request-legal-notice a:hover {
  color: var(--color-text-primary);
}

/* Simplified recap for anonymous submissions on request_page.hbs */
.request-recap {
  max-width: var(--layout-narrow);
  margin: var(--spacing-500) auto var(--spacing-1200);
  padding-bottom: var(--spacing-800);
}
.request-recap-intro {
  font: var(--text-body-lg);
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-400);
  line-height: 1.6;
}
.request-recap-card {
  padding: var(--spacing-500) var(--spacing-500);
  background: var(--color-elevation-surface);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-elevation);
}
.request-recap-body {
  font: var(--text-body-lg);
  color: var(--color-text-primary);
  line-height: 1.6;
}
.request-recap-body p,
.request-recap-body ul,
.request-recap-body ol { margin: 0 0 var(--spacing-200); }
.request-recap-body p:last-child { margin-bottom: 0; }
.request-recap-attachments {
  margin: var(--spacing-400) 0 0;
  padding-top: var(--spacing-300);
  border-top: 1px solid var(--color-border-secondary);
}
.request-recap-actions {
  margin-top: var(--spacing-500);
  display: flex;
  justify-content: center;
}
.request-recap-cta {
  gap: var(--spacing-100);
}
.request-recap-cta svg { flex: none; }

table.requests {
  width: 100%;
  border-collapse: collapse;
  font: var(--text-body-md);
}
table.requests th,
table.requests td {
  padding: var(--spacing-150) var(--spacing-200);
  border-bottom: 1px solid var(--color-border-secondary);
  text-align: left;
}
table.requests th {
  background: var(--color-elevation-surface-secondary);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
table.requests tr:hover td { background: var(--color-elevation-surface-secondary); }

/* =========================================================================
   COMMUNITY & POSTS
   ========================================================================= */
.community-hero {
  background: var(--color-elevation-surface-secondary);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-600);
  margin: var(--spacing-300) 0;
}

.posts-list.striped-list { list-style: none; padding: 0; margin: 0; }
.striped-list-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--spacing-200);
  align-items: center;
  padding: var(--spacing-200);
  border-bottom: 1px solid var(--color-border-secondary);
}
.striped-list-item:hover { background: var(--color-elevation-surface-secondary); }
.striped-list-number { color: var(--color-text-tertiary); font: var(--text-body-sm); }
.striped-list-title a { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.striped-list-info { font: var(--text-body-sm); color: var(--color-text-tertiary); }
.post-overview-count {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100);
  font: var(--text-body-sm);
  color: var(--color-text-tertiary);
}

.community-footer {
  margin-top: var(--spacing-600);
  padding-top: var(--spacing-300);
  border-top: 1px solid var(--color-border-secondary);
}
.community-footer-title {
  font: var(--text-body-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--spacing-150);
}

.topic-filters {
  display: flex;
  gap: var(--spacing-100);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-300);
}

/* Primary CTA in community */
.post-to-community {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100);
  padding: var(--spacing-100) var(--spacing-300);
  background: var(--color-background-brand-primary);
  color: var(--color-text-primary-inverse);
  border-radius: var(--border-radius-md);
  font: var(--text-body-md);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-raised);
  min-height: var(--size-500);
}
.post-to-community:hover {
  background: var(--color-background-brand-primary-hovered);
  color: var(--color-text-primary-inverse);
  text-decoration: none;
}

/* Post page */
.post-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--spacing-600);
  padding-bottom: var(--spacing-1200);
}
@media (max-width: 900px) {
  .post-container { grid-template-columns: 1fr; }
}
.post-title { font: var(--text-heading-3xl); margin-bottom: var(--spacing-200); }
.post-body { font: var(--text-body-lg); line-height: 1.75; color: var(--color-text-primary); }
.post-sidebar {
  padding: var(--spacing-300);
  background: var(--color-elevation-surface-secondary);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--color-border-secondary);
}
.post-sidebar-title {
  font: var(--text-body-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--spacing-150);
}

/* =========================================================================
   SEARCH RESULTS — OpenAI-style article rows + AI answer wrapper
   ========================================================================= */
.search-results {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--spacing-600);
  padding: var(--spacing-300) 0 var(--spacing-1200);
}
@media (max-width: 900px) { .search-results { grid-template-columns: 1fr; gap: var(--spacing-400); } }

.search-results-sidebar { display: flex; flex-direction: column; gap: var(--spacing-500); }
.search-results-column { min-width: 0; }

.search-results-subheading {
  font: var(--text-heading-2xl);
  letter-spacing: var(--font-letter-spacing-tight);
  margin: var(--spacing-300) 0 var(--spacing-400);
}

.search-results-list.article-rows {
  border-top: 0;
}
.search-results-list.article-rows .article-row:first-child { border-top: 1px solid var(--color-border-secondary); }

.search-result-row .article-row-link {
  align-items: flex-start;
  padding: var(--spacing-300) var(--spacing-200);
  text-align: left;
}
.search-result-row .article-row-icon { margin-top: 2px; }

.search-result-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-100);
  min-width: 0;
  width: 100%;
  text-align: left;
}
.search-result-content > * {
  text-align: left;
  width: 100%;
}
.search-result-content .search-result-title.article-row-title {
  font: var(--text-heading-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  display: block;
  width: 100%;
  text-align: left;
}

.search-result-excerpt {
  font: var(--text-body-md);
  color: var(--color-text-secondary);
  margin: 0;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* AI answer wrapper — styles the {{generative_answers}} output */
.qwant-search-ai-answer {
  margin-bottom: var(--spacing-500);
  padding: var(--spacing-400) var(--spacing-500);
  border-radius: var(--border-radius-lg);
  background:
    linear-gradient(135deg,
      var(--palette-default-purple-050) 0%,
      var(--palette-default-blue-050) 50%,
      var(--palette-default-purple-050) 100%);
  border: 1px solid var(--palette-default-purple-200);
  font-family: var(--font-family-sans);
  color: var(--color-text-primary);
}
.qwant-search-ai-answer:empty { display: none; }

/* Neutralise Zendesk's inner wrapper : remove its border / bg / padding so we only
   see our outer wrapper (fixes the "double border" effect). */
.qwant-search-ai-answer > *,
.qwant-search-ai-answer > article,
.qwant-search-ai-answer > section,
.qwant-search-ai-answer > div,
.qwant-search-ai-answer > .generative-answer,
.qwant-search-ai-answer [class*="answer"],
.qwant-search-ai-answer [class*="Answer"] {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Re-style the Zendesk-rendered subheading + body inside generative_answers.
   Font-weight kept at 600 (semibold) — no heavy bold. */
.qwant-search-ai-answer h1,
.qwant-search-ai-answer h2,
.qwant-search-ai-answer h3,
.qwant-search-ai-answer .generative-answer-heading,
.qwant-search-ai-answer [class*="heading"],
.qwant-search-ai-answer [class*="title"] {
  font-family: var(--font-family-sans) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color: var(--color-text-primary) !important;
  letter-spacing: -0.16px !important;
  margin: 0 0 var(--spacing-150) !important;
  display: flex;
  align-items: center;
  gap: var(--spacing-100);
}
.qwant-search-ai-answer p,
.qwant-search-ai-answer li,
.qwant-search-ai-answer span,
.qwant-search-ai-answer div {
  font-family: var(--font-family-sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  letter-spacing: -0.175px !important;
  color: var(--color-text-secondary) !important;
}
/* Highlights inside the AI copy : "réponse Flash", "résumé généré..." are wrapped
   in <strong> by Zendesk. Force them to semibold (600) instead of the default 700+
   to match the rest of the theme. */
.qwant-search-ai-answer strong,
.qwant-search-ai-answer b {
  font-family: var(--font-family-sans) !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
}
.qwant-search-ai-answer ul,
.qwant-search-ai-answer ol { margin: var(--spacing-100) 0 0 !important; padding-left: 1.4em !important; }
.qwant-search-ai-answer li { margin-bottom: var(--spacing-050) !important; }
.qwant-search-ai-answer li::marker { color: var(--color-text-tertiary); }
.qwant-search-ai-answer a {
  color: var(--color-link-primary) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500 !important;
}
.qwant-search-ai-answer svg {
  color: var(--palette-default-purple-700);
  flex: none;
}

/* Sidebar inside search results */
.search-results-sidebar .filters-in-section { margin: 0; }
.search-results-sidebar .collapsible-sidebar-title.sidenav-title {
  font: var(--text-body-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
  margin: 0 0 var(--spacing-150);
}
.search-results-sidebar .multibrand-filter-list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 2px;
}
.search-results-sidebar .multibrand-filter-list .sidenav-item {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-100);
  padding: var(--spacing-100) var(--spacing-150);
  border-radius: var(--border-radius-sm);
  font: var(--text-body-md);
  color: var(--color-text-secondary);
}
.search-results-sidebar .multibrand-filter-list .sidenav-item:hover {
  background: var(--color-elevation-surface-secondary);
  color: var(--color-text-primary);
  text-decoration: none;
}
.search-results-sidebar .multibrand-filter-list .sidenav-item.current {
  background: var(--palette-default-blue-alpha-100);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}
.search-results-sidebar .doc-count { color: var(--color-text-tertiary); }

.search-results-sidebar .collapsible-sidebar-toggle { display: none; }
@media (max-width: 900px) {
  .search-results-sidebar .collapsible-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-100);
    width: 100%;
    padding: var(--spacing-150);
    background: var(--color-elevation-surface-secondary);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-md);
  }
  .search-results-sidebar .multibrand-filter-list { display: none; padding-top: var(--spacing-150); }
  .search-results-sidebar [aria-expanded="true"] + .multibrand-filter-list { display: grid; }
}

/* No-results block centered */
.no-results { text-align: center; padding: var(--spacing-700) var(--spacing-300); color: var(--color-text-secondary); }
.no-results svg { margin: 0 auto var(--spacing-300); }
.no-results .headline { font: var(--text-heading-lg); color: var(--color-text-primary); margin-bottom: var(--spacing-150); }
.no-results .action-prompt { font: var(--text-body-md); margin-bottom: var(--spacing-100); }

/* Kill the native webkit/blink "search cancel" cross — keeps only our .clear-button */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
input[type="search"] { -moz-appearance: textfield; }

/* =========================================================================
   SERVICE CATALOG
   ========================================================================= */
.service-catalog-hero {
  background: var(--color-elevation-surface-secondary);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-600);
  margin: var(--spacing-300) 0 var(--spacing-500);
}

/* =========================================================================
   ERRORS
   ========================================================================= */
.error-page,
.error-container {
  text-align: center;
  padding: var(--spacing-1200) var(--spacing-300);
}
.error-page h1 { font: var(--text-heading-5xl); }

/* =========================================================================
   FOOTER — Qwant cross-site footer (dark theme, matches Figma spec)
   Design tokens sourced from Figma "Core Components" node 31:2787
   ========================================================================= */
.footer.qwant-footer {
  background: #212327;                   /* color/background/neutral-primary */
  color: #f9fafb;                         /* color/text/primary */
  margin-top: var(--spacing-1200);
  padding: var(--spacing-800) 0 var(--spacing-500);
  border-top: 0;
}

.qwant-footer-inner {
  max-width: var(--layout-headline);
  margin: 0 auto;
  padding: 0 var(--spacing-400);
}

/* Top : brand column + 4 nav columns (brand takes 2× more room like qwant.com) */
.qwant-footer-top {
  display: grid;
  grid-template-columns: minmax(280px, 2.4fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--spacing-600);
  row-gap: var(--spacing-500);
  padding-bottom: var(--spacing-700);
  border-bottom: 1px solid rgba(93, 117, 152, 0.24);      /* color/border/secondary */
}
@media (max-width: 900px) {
  .qwant-footer-top { grid-template-columns: 1fr 1fr; }
  .qwant-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .qwant-footer-top { grid-template-columns: 1fr; gap: var(--spacing-500); }
}

/* --- Brand column (left) --- */
.qwant-footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-250);
  align-items: flex-start;
}
.qwant-footer-logo { display: inline-flex; align-items: center; }
.qwant-footer-logo:hover { text-decoration: none; }
.qwant-footer-logo img {
  width: 48px; height: 48px;
  display: block;
  /* Asset already fills with #F9FAFB — no filter needed */
}
.qwant-footer-tagline {
  /* Figma: Inter Bold 20/28, letter-spacing -0.25px, #f9fafb */
  font-family: var(--font-family-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.25px;
  color: #f9fafb;
  margin: 0;
  max-width: 320px;
}
.qwant-footer-cta {
  /* Figma: pill h40, padding 0 16, transparent bg, blue-alpha border,
     text Inter Semi Bold 14/20 -0.175px #f9fafb */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-100);
  height: 40px;
  padding: 0 var(--spacing-200);
  background: transparent;
  color: #f9fafb !important;
  border: 1px solid rgba(200, 220, 249, 0.24);
  border-radius: var(--border-radius-full);
  font-family: var(--font-family-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.175px;
  text-decoration: none;
  margin-top: var(--spacing-150);
  transition: background var(--motion-duration-base) var(--motion-ease),
              color var(--motion-duration-base) var(--motion-ease),
              border-color var(--motion-duration-base) var(--motion-ease);
}
.qwant-footer-cta:hover {
  background: rgba(200, 220, 249, 0.08);
  color: #f9fafb !important;
  border-color: rgba(200, 220, 249, 0.4);
  text-decoration: none;
}

/* --- Columns headings + links --- */
.qwant-footer-col { min-width: 0; }
.qwant-footer-col-title {
  /* Figma: Inter Bold 16/24 -0.16px #f9fafb */
  font-family: var(--font-family-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.16px;
  color: #f9fafb;
  margin: 0 0 var(--spacing-250);
  text-transform: none;
}
.qwant-footer-col ul {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: var(--spacing-150);
}
.qwant-footer-col a,
.qwant-footer-col li a {
  /* Figma: Inter Semi Bold 14/20 -0.175px #f9fafb */
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100);
  font-family: var(--font-family-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.175px;
  color: #f9fafb;
  text-decoration: none;
  transition: color var(--motion-duration-base) var(--motion-ease);
}
.qwant-footer-col a:hover {
  color: #f9fafb;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.qwant-footer-item-icon {
  flex: none;
  width: 16px;
  height: 16px;
  display: block;
  /* SVGs ship with their own #F9FAFB fill */
}

/* --- Suivez-nous : icons grid (3 per row wrapping to 2 rows) --- */
.qwant-footer-social {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 32px);
  gap: var(--spacing-100);
}
.qwant-footer-social li { display: inline-flex; }
.qwant-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--palette-default-white-alpha-150);
  transition: background var(--motion-duration-base) var(--motion-ease),
              transform var(--motion-duration-base) var(--motion-ease);
}
.qwant-footer-social a img {
  width: 18px;
  height: 18px;
  display: block;
  transition: filter var(--motion-duration-base) var(--motion-ease);
}
.qwant-footer-social a:hover {
  background: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.qwant-footer-social a:hover img {
  filter: invert(1);       /* white icon → black on white bg */
}

/* --- App store badges --- */
.qwant-footer-app-badges {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-150);
  align-items: flex-start;
}
.qwant-footer-app-badges a {
  display: inline-block;
  transition: opacity var(--motion-duration-base) var(--motion-ease);
}
.qwant-footer-app-badges a:hover { opacity: 0.85; }
.qwant-footer-app-badges img { height: 40px; width: auto; display: block; }

/* --- Bottom rail --- */
.qwant-footer-bottom {
  padding-top: var(--spacing-400);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-400);
  flex-wrap: wrap;
}
.qwant-footer-bottom-left {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-150);
  min-width: 0;
  flex: 1 1 auto;
}
.qwant-footer-bottom-right {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-200);
  flex-wrap: wrap;
}

.qwant-footer-legal {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-150) var(--spacing-300);
}
.qwant-footer-legal a {
  /* Figma: Inter Medium 12/16 0 letter-spacing, #f9fafb */
  font-family: var(--font-family-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #f9fafb;
  text-decoration: none;
  transition: color var(--motion-duration-base) var(--motion-ease);
}
.qwant-footer-legal a:hover { color: #f9fafb; text-decoration: underline; text-underline-offset: 3px; }

.qwant-footer-copy {
  /* Figma: Inter Medium 12/16, color secondary #dadfe7 */
  font-family: var(--font-family-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #dadfe7;
}

/* Feedback CTA (bottom right) — h32 pill, subtle blue-alpha border */
.qwant-footer-feedback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-100);
  height: 32px;
  padding: 0 var(--spacing-150);
  background: transparent;
  color: #f9fafb !important;
  border: 1px solid rgba(200, 220, 249, 0.24);
  border-radius: var(--border-radius-full);
  font-family: var(--font-family-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.175px;
  text-decoration: none;
  transition: background var(--motion-duration-base) var(--motion-ease),
              border-color var(--motion-duration-base) var(--motion-ease);
}
.qwant-footer-feedback:hover {
  background: rgba(200, 220, 249, 0.08);
  border-color: rgba(200, 220, 249, 0.4);
  color: #f9fafb !important;
  text-decoration: none;
}

/* Language switcher in footer — matches Feedback btn spec (h32, blue-alpha border) */
.footer-language-selector .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100);
  height: 32px;
  padding: 0 var(--spacing-150);
  background: transparent;
  border: 1px solid rgba(200, 220, 249, 0.24);
  color: #f9fafb;
  font-family: var(--font-family-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.175px;
  border-radius: var(--border-radius-full);
}
.footer-language-selector .dropdown-toggle:hover {
  background: rgba(200, 220, 249, 0.08);
  border-color: rgba(200, 220, 249, 0.4);
  color: #f9fafb;
}
.footer-language-selector .dropdown-menu {
  bottom: calc(100% + 4px);
  top: auto;
  background: #212327;
  border-color: rgba(200, 220, 249, 0.24);
}
.footer-language-selector .dropdown-menu a {
  color: #dadfe7;
  font-family: var(--font-family-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
}
.footer-language-selector .dropdown-menu a:hover {
  background: rgba(200, 220, 249, 0.08);
  color: #f9fafb;
}

/* =========================================================================
   FAB — Floating "Nous contacter" button
   ========================================================================= */
.qwant-fab-contact {
  position: fixed;
  bottom: var(--spacing-300);
  right: var(--spacing-300);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100);
  padding: var(--spacing-150) var(--spacing-300);
  background: var(--color-background-brand-primary);
  color: var(--color-text-primary-inverse) !important;
  border-radius: var(--border-radius-full);
  font: var(--text-body-md);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  box-shadow:
    0 12px 32px rgba(0,0,0,.18),
    0 4px 8px rgba(0,0,0,.12);
  transition: background var(--motion-duration-base) var(--motion-ease),
              transform var(--motion-duration-base) var(--motion-ease),
              box-shadow var(--motion-duration-base) var(--motion-ease);
  z-index: 90;
}
.qwant-fab-contact:hover {
  background: var(--color-background-brand-primary-hovered);
  color: var(--color-text-primary-inverse) !important;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow:
    0 16px 36px rgba(0,0,0,.22),
    0 6px 10px rgba(0,0,0,.14);
}
.qwant-fab-contact:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: 3px;
}
.qwant-fab-contact svg { flex: none; }

/* Mobile : compact round icon button */
@media (max-width: 640px) {
  .qwant-fab-contact {
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
    bottom: var(--spacing-200);
    right: var(--spacing-200);
  }
  .qwant-fab-contact span { display: none; }
  .qwant-fab-contact svg { width: 22px; height: 22px; }
}

/* Legacy fallback (if some pages still reference .footer-inner) */
.footer-inner {
  max-width: var(--layout-headline);
  margin: 0 auto;
  padding: 0 var(--spacing-300);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-200);
  flex-wrap: wrap;
  font: var(--text-body-md);
  color: var(--color-text-tertiary);
}
.footer-inner a { color: var(--color-text-tertiary); }
.footer-inner a:hover { color: var(--color-text-primary); text-decoration: none; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 768px) {
  .qwant-header-right.nav-wrapper-desktop,
  .nav-wrapper-desktop { display: none; }
  .nav-wrapper-mobile { display: flex; align-items: center; gap: var(--spacing-100); position: relative; }
  .qwant-header-inner { padding: var(--spacing-150) var(--spacing-200); min-height: 56px; }
  .qwant-header-logo img { height: 28px; }
  .section.hero { padding: var(--spacing-700) var(--spacing-200); margin-bottom: var(--spacing-500); }
  .hero-title { font: var(--text-heading-2xl); }
  .hero-subtitle { margin-bottom: var(--spacing-300); }
  .hero .search input[type="search"],
  .hero-search-wrap .search input[type="search"] { height: var(--size-600); padding-left: var(--spacing-600); font: var(--text-body-md); }
  .hero-search-wrap .search-icon { left: var(--spacing-200); }
  .sub-nav { padding: var(--spacing-200) 0; }
  .article-relatives { gap: var(--spacing-300); }
}

@media (max-width: 480px) {
  .blocks-list { grid-template-columns: 1fr; }
  .article-votes { padding: var(--spacing-200); }
  .article-vote { min-width: 64px; padding: var(--spacing-100) var(--spacing-200); }
}

/* =========================================================================
   NOTIFICATIONS & MISC
   ========================================================================= */
.notification, .notification-error, .notification-success, .notification-info {
  padding: var(--spacing-150) var(--spacing-200);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border-secondary);
  margin: var(--spacing-200) 0;
  background: var(--color-elevation-surface-secondary);
  font: var(--text-body-md);
}
.notification-error {
  background: var(--color-background-danger-secondary);
  border-color: var(--color-border-danger);
  color: var(--color-text-danger);
}
.notification-success {
  background: var(--color-background-success-secondary);
  border-color: var(--color-border-success);
  color: var(--color-text-success);
}
.notification-info {
  background: var(--color-background-information-secondary);
  border-color: var(--color-border-information);
  color: var(--color-text-information);
}

.muted, .text-muted, .text-secondary { color: var(--color-text-secondary); }

/* Stretch Zendesk-rendered search field to the parent container */
.search input[type="search"],
.search-full input[type="search"] { font-family: inherit; }

/* =========================================================================
   RTL light touch
   ========================================================================= */
[dir="rtl"] .sidenav-item { border-left: 0; border-right: 2px solid transparent; }
[dir="rtl"] .sidenav-item.current-article { border-right-color: var(--color-border-selected); }
[dir="rtl"] .hero-search-wrap .search-icon { left: auto; right: var(--spacing-300); }
[dir="rtl"] .hero-search-wrap .search input[type="search"],
[dir="rtl"] .hero .search input[type="search"] { padding: 0 var(--spacing-700) 0 var(--spacing-300); }
[dir="rtl"] .sub-nav .search-container .search-icon { left: auto; right: var(--spacing-150); }
[dir="rtl"] .sub-nav .search-container input[type="search"] { padding: 0 var(--spacing-500) 0 var(--spacing-200); }