/* ==========================================================
   Backscene — thème du centre d'aide (Help Scout Docs)
   design.md §12.7 : structure et forme de help.whatnot.com, thème écrit à partir de nos tokens. Servi par le site à
   une adresse stable, `/aide/help-scout.css`, que `node scripts/aide-publier.mjs --site` inscrit dans les réglages du
   site Help Scout (feuille de style personnalisée, chargée après celle de Help Scout).

   Deux parties :
   1. Copie de tokens.css : chaque `--bs-*` y a exactement sa valeur de tokens.css (principale ou d'une ambiance), et
      chaque `--aide-t-*` est la typographie de la classe `.t-*` du même nom, à chaque largeur ;
      scripts/aide/theme.test.mjs le vérifie.
   2. Le thème : uniquement des `var(...)`. Seules valeurs écrites : `0`, les filets de `1px`, `100%`, et la colonne de
      lecture de `780px` (design.md §12.7) ; les largeurs des `@media` sont celles de tokens.css (560, 808, 1056).
   Le gabarit (ordre des blocs, absence de fil d'Ariane) reste celui de Help Scout (design.md §12.7).
   ========================================================== */

/* ---------- 1. Copie de tokens.css ---------- */

@font-face {
  font-family: "Gogia";
  src: url("../fonts/gogia.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 85%;
  descent-override: 15%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "PP Agrandir";
  src: url("../fonts/pp-agrandir.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 50% 200%;
  font-style: normal;
  font-display: swap;
  ascent-override: 85%;
  descent-override: 15%;
  line-gap-override: 0%;
}

:root {
  --bs-font-display: "Gogia", "PP Agrandir", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --bs-font-text: "PP Agrandir", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --bs-font-weight-regular: 336;
  --bs-font-weight-semibold: 469;
  --bs-font-weight-bold: 617;

  --bs-neutral-100: #FFFFFF;
  --bs-neutral-98: #F9F9FC;
  --bs-neutral-94: #EFEEF3;
  --bs-neutral-92: #E8E7ED;
  --bs-neutral-87: #DBDAE0;
  --bs-neutral-58: #8C8B93;
  --bs-neutral-41: #615F68;
  --bs-neutral-17: #2B2A31;
  --bs-neutral-7: #16151B;
  --bs-neutral-4: #0D0C11;
  --bs-white-a20: #FFFFFF33;
  --bs-white-a40: #FFFFFF66;
  --bs-white-a70: #FFFFFFB2;
  --bs-black-a5: #0000000D;
  --bs-black-a11: #0000001C;
  --bs-violet-81: #D3BEFA;
  --bs-yellow-93: #FAEE96;
  --bs-green-89: #9AF1BF;
  --bs-green-60: #2CA45B;
  --bs-aqua-93: #B7F7ED;
  --bs-blue-88: #C6E1FF;

  --bs-text-on-brand: var(--bs-neutral-4);
  --bs-bg-canvas-alt: var(--bs-neutral-94);
  --bs-bg-brand: var(--bs-violet-81);
  --bs-bg-positive: var(--bs-green-60);
  --bs-bg-info-subtle: var(--bs-blue-88);
  --bs-bg-pastel-lilas: var(--bs-violet-81);
  --bs-bg-pastel-jaune: var(--bs-yellow-93);
  --bs-bg-pastel-vert: var(--bs-green-89);
  --bs-bg-pastel-turquoise: var(--bs-aqua-93);
  --bs-focus-ring-offset: 2px;
  --bs-static-bg-section: var(--bs-neutral-4);

  --bs-space-0-5: 2px;
  --bs-space-1: 4px;
  --bs-space-2: 8px;
  --bs-space-3: 12px;
  --bs-space-4: 16px;
  --bs-space-5: 20px;
  --bs-space-6: 24px;
  --bs-space-8: 32px;
  --bs-space-10: 40px;
  --bs-space-12: 48px;
  --bs-space-16: 64px;
  --bs-space-20: 80px;

  --bs-container-px: 16px;
  --bs-touch-target: 44px;
  --bs-modal-lg: 624px;
  --bs-modal-xl: 808px;
  --bs-mkt-max: 1440px;
  --bs-mkt-header-h: 60px;

  --bs-radius-8: 8px;
  --bs-radius-12: 12px;
  --bs-radius-16: 16px;
  --bs-radius-full: 9999px;

  --bs-shadow-card: 0 2px 8px 0 #0000001F;
  --bs-shadow-popover: 0 4px 16px 0 #00000014;
  --bs-z-popover: 70;
  --bs-duration-base: 150ms;
  --bs-ease-out: cubic-bezier(.165, .84, .44, 1);

  /* Ambiance principale */
  --bs-text-primary: var(--bs-neutral-7);
  --bs-text-secondary: var(--bs-neutral-41);
  --bs-text-inverse: var(--bs-neutral-100);
  --bs-text-link: var(--bs-neutral-7);
  --bs-bg-canvas: var(--bs-neutral-98);
  --bs-bg-surface: var(--bs-neutral-100);
  --bs-bg-hover: var(--bs-black-a5);
  --bs-bg-neutral: var(--bs-black-a11);
  --bs-bg-inverse: var(--bs-neutral-7);
  --bs-border-muted: var(--bs-neutral-92);
  --bs-border-strong: var(--bs-neutral-58);
  --bs-border-focus: var(--bs-neutral-7);
  --bs-focus-ring-color: var(--bs-neutral-7);

  /* Jetons de composant */
  --bs-focus-ring: 2px solid var(--bs-focus-ring-color);
  --bs-button-radius: var(--bs-radius-full);
  --bs-chip-radius: var(--bs-radius-8);
  --bs-chip-bg: var(--bs-bg-hover);
  --bs-chip-bg-hover: var(--bs-bg-neutral);
  --bs-chip-bg-active: var(--bs-bg-inverse);
  --bs-chip-fg-active: var(--bs-text-inverse);
  --bs-input-height: 52px;
  --bs-input-radius: var(--bs-radius-8);
  --bs-input-border: var(--bs-border-strong);
  --bs-input-border-focus: var(--bs-border-focus);

  /* Typographie : la police de chaque classe `.t-*` de tokens.css */
  --aide-t-mkt-h2: 400 40px/38px var(--bs-font-display);
  --aide-t-mkt-h3: 400 28px/34px var(--bs-font-display);
  --aide-t-mkt-label: var(--bs-font-weight-bold) 20px/28px var(--bs-font-text);
  --aide-t-mkt-subhead: var(--bs-font-weight-bold) 20px/28px var(--bs-font-text);
  --aide-t-mkt-body-sm: var(--bs-font-weight-regular) 16px/24px var(--bs-font-text);
  --aide-t-mkt-caption: var(--bs-font-weight-regular) 13px/18px var(--bs-font-text);
  --aide-t-app-title-2: var(--bs-font-weight-semibold) 16px/20px var(--bs-font-text);
  --aide-t-app-body-1: var(--bs-font-weight-regular) 14px/20px var(--bs-font-text);
  --aide-t-app-input-value: var(--bs-font-weight-regular) 16px/22px var(--bs-font-text);
  --aide-t-app-button-lg: var(--bs-font-weight-bold) 16px/24px var(--bs-font-text);
}

@media (min-width: 560px) {
  :root {
    --aide-t-mkt-h2: 400 52px/49px var(--bs-font-display);
    --aide-t-mkt-h3: 400 32px/40px var(--bs-font-display);
    --aide-t-mkt-label: var(--bs-font-weight-bold) 24px/32px var(--bs-font-text);
  }
}
@media (min-width: 808px) {
  :root {
    --bs-mkt-header-h: 96px;
    --bs-container-px: 32px;
    --aide-t-mkt-h2: 400 64px/61px var(--bs-font-display);
  }
}

/* ---------- 2. Thème ---------- */

/* Ambiance `inverse` (COL-10) pour l'en-tête et le bandeau de recherche, noirs comme le bandeau de help.whatnot.com. */
#mainNav,
#docsSearch {
  --bs-text-primary: var(--bs-neutral-100);
  --bs-text-secondary: var(--bs-white-a70);
  --bs-bg-neutral: var(--bs-white-a20);
  --bs-bg-neutral-hover: var(--bs-white-a40);
  --bs-focus-ring-color: var(--bs-neutral-100);
  --bs-focus-ring: 2px solid var(--bs-focus-ring-color);
}

/* Le champ de recherche reste en ambiance principale, même dans le bandeau noir. */
#searchBar {
  --bs-text-primary: var(--bs-neutral-7);
  --bs-text-secondary: var(--bs-neutral-41);
  --bs-bg-hover: var(--bs-black-a5);
  --bs-focus-ring-color: var(--bs-neutral-7);
  --bs-focus-ring: 2px solid var(--bs-focus-ring-color);
}

html {
  background: var(--bs-bg-canvas);
}
body {
  margin: 0;
  padding: 0;
  background: var(--bs-bg-canvas);
  color: var(--bs-text-primary);
  font: var(--aide-t-mkt-body-sm);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
select,
textarea {
  font-family: inherit;
}
a {
  color: var(--bs-text-link);
}
:focus-visible,
.navbar .nav li a:focus-visible {
  outline: var(--bs-focus-ring);
  outline-offset: var(--bs-focus-ring-offset);
}

/* En-tête : sous 808 px, logo à gauche et « Contacte-nous » à droite ; au-delà, « Contacte-nous » à gauche et logo au
   centre (comme help.whatnot.com). Ni menu ni liste des thèmes. */
#mainNav {
  margin: 0;
}
#mainNav .navbar-inner {
  min-height: var(--bs-mkt-header-h);
  padding: 0;
  border: 0;
  background: var(--bs-static-bg-section);
}
#mainNav .navbar-inner .container-fluid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  box-sizing: border-box;
  max-width: var(--bs-mkt-max);
  min-height: var(--bs-mkt-header-h);
  margin: 0 auto;
  padding: 0 var(--bs-container-px);
}
#mainNav .navbar-inner .container-fluid::before,
#mainNav .navbar-inner .container-fluid::after {
  display: none;
}
#mainNav .brand {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: flex;
  float: none;
  max-width: none;
  margin: 0;
  padding: 0;
  color: var(--bs-text-primary);
}
/* LOG-01 (header marketing) : 24 px de haut sous 808 px, 32 px au-delà ; largeur automatique. */
#mainNav .brand img {
  display: block;
  width: auto;
  height: var(--bs-space-6);
  max-height: none;
}
#mainNav .btn-navbar {
  display: none;
}
#mainNav .nav-collapse,
#mainNav .nav-collapse.collapse {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  position: static;
  clear: none;
  height: auto;
  overflow: visible;
}
#mainNav .nav {
  position: static;
  display: flex;
  float: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
#mainNav .nav > li {
  display: none;
}
#mainNav .nav > li#contact {
  display: block;
}
#mainNav .nav > li > a.contactUs {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--bs-touch-target);
  margin: 0;
  padding: 0 var(--bs-space-3);
  border-radius: var(--bs-button-radius);
  background: var(--bs-bg-neutral);
  color: var(--bs-text-primary);
  font: var(--aide-t-app-title-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--bs-duration-base) var(--bs-ease-out);
}
#mainNav .nav > li > a.contactUs:hover,
#mainNav .nav > li > a.contactUs:focus-visible {
  background: var(--bs-bg-neutral-hover);
  color: var(--bs-text-primary);
}
#mainNav .nav .icon-contact::before {
  display: none;
}

/* Bandeau : titre et champ de recherche. */
#docsSearch {
  box-sizing: border-box;
  margin: 0;
  padding: var(--bs-space-10) var(--bs-container-px) var(--bs-space-12);
  border: 0;
  background: var(--bs-static-bg-section);
  color: var(--bs-text-primary);
  text-align: center;
}
#docsSearch h1 {
  max-width: var(--bs-modal-xl);
  margin: 0 auto var(--bs-space-8);
  padding: 0;
  color: var(--bs-text-primary);
  font: var(--aide-t-mkt-h2);
  text-align: center;
}

/* Champ de recherche, du bandeau comme de la colonne. */
#searchBar {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--bs-modal-lg);
  margin: 0 auto;
  padding: 0;
  text-align: left;
}
/* `input.search-query` : au-dessus de `#sidebar form .search-query` de Help Scout. */
#searchBar input.search-query {
  flex: 1;
  box-sizing: border-box;
  min-width: 0;
  height: var(--bs-input-height);
  margin: 0;
  padding: 0 var(--bs-space-4);
  border: 1px solid var(--bs-input-border);
  border-radius: var(--bs-input-radius);
  background: var(--bs-bg-surface);
  box-shadow: none;
  color: var(--bs-text-primary);
  font: var(--aide-t-app-input-value);
  transition: border-color var(--bs-duration-base) var(--bs-ease-out);
}
#searchBar input.search-query::placeholder {
  color: var(--bs-text-secondary);
}
/* Anneau de 2 px tracé dans le champ (dehors, il serait noir sur le bandeau noir), par le bord et une ombre : Help
   Scout impose `input:focus { outline: 0 !important }`. */
#searchBar input.search-query:focus {
  border-color: var(--bs-input-border-focus);
  box-shadow: inset 0 0 0 1px var(--bs-input-border-focus);
}
#docsSearch #searchBar .search-query {
  border-right: 0;
  border-radius: var(--bs-input-radius) 0 0 var(--bs-input-radius);
}
#docsSearch #searchBar button {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--bs-input-height);
  margin: 0;
  padding: 0 var(--bs-space-6);
  border: 0;
  border-radius: 0 var(--bs-input-radius) var(--bs-input-radius) 0;
  background: var(--bs-bg-brand);
  color: var(--bs-text-on-brand);
  font: var(--aide-t-app-button-lg);
  text-shadow: none;
  transition: background-color var(--bs-duration-base) var(--bs-ease-out);
}
#docsSearch #searchBar button:hover {
  box-shadow: inset 0 0 0 var(--bs-input-height) var(--bs-bg-hover);
}
#docsSearch #searchBar button .icon-search {
  color: var(--bs-text-on-brand);
}
#sidebar #searchBar.sm {
  max-width: none;
  margin: 0 0 var(--bs-space-6);
}
#sidebar #searchBar.sm .search-query {
  padding-right: var(--bs-input-height);
}
#sidebar #searchBar.sm button {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--bs-input-height);
  height: var(--bs-input-height);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bs-text-secondary);
}
#searchBar #serp-dd,
#searchBar #serp-dd.sb {
  top: calc(var(--bs-input-height) + var(--bs-space-1));
  left: 0;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--bs-border-muted);
  border-radius: var(--bs-radius-12);
  background: var(--bs-bg-surface);
  box-shadow: var(--bs-shadow-popover);
  overflow: hidden;
  z-index: var(--bs-z-popover);
}
#serp-dd .result > li {
  margin: 0;
}
#serp-dd .result a {
  padding: var(--bs-space-3) var(--bs-space-4);
  color: var(--bs-text-primary);
  font: var(--aide-t-app-body-1);
}
#serp-dd .result a:hover,
#serp-dd .result > li.active {
  background: var(--bs-bg-hover);
  color: var(--bs-text-primary);
}
#serp-dd .noResults {
  padding: var(--bs-space-3) var(--bs-space-4);
  color: var(--bs-text-secondary);
  font: var(--aide-t-app-body-1);
}

/* Contenu : une seule colonne de lecture, la recherche en tête (design.md §12.7). */
#contentArea {
  box-sizing: border-box;
  max-width: var(--bs-mkt-max);
  margin: 0 auto;
  padding: var(--bs-space-8) var(--bs-container-px) 0;
}
/* Les pseudo-éléments de dégagement de Help Scout deviendraient des cases de la grille de l'accueil. */
#contentArea::before,
#contentArea::after {
  display: none;
}
#contentArea > .row-fluid {
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: 780px;
  margin: 0 auto;
}
#contentArea > .row-fluid::before,
#contentArea > .row-fluid::after {
  display: none;
}
#main-content,
#sidebar {
  float: none;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
}
#sidebar {
  order: -1;
}
.contentWrapper {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bs-text-primary);
}
.contentWrapper h1 {
  margin: 0 0 var(--bs-space-6);
  color: var(--bs-text-primary);
  font: var(--aide-t-mkt-h3);
}
.contentWrapper p {
  margin: 0 0 var(--bs-space-4);
  color: var(--bs-text-secondary);
}

/* Accueil : « Parcourir par thème », une tuile par collection, titre seul, sur les pastels de la charte. */
#contentArea:has(> .collection-category) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bs-space-4);
  padding-top: var(--bs-space-10);
}
#contentArea:has(> .collection-category) > :not(.collection-category) {
  grid-column: 1 / -1;
}
.collection-category {
  position: relative;
  margin: 0;
  padding: var(--bs-space-6);
  border-radius: var(--bs-radius-16);
  background: var(--bs-bg-pastel-jaune);
  transition:
    transform var(--bs-duration-base) var(--bs-ease-out),
    box-shadow var(--bs-duration-base) var(--bs-ease-out);
}
.collection-category:nth-of-type(4n + 2) {
  background: var(--bs-bg-pastel-vert);
}
.collection-category:nth-of-type(4n + 3) {
  background: var(--bs-bg-pastel-turquoise);
}
.collection-category:nth-of-type(4n + 4) {
  background: var(--bs-bg-pastel-lilas);
}
.collection-category:hover {
  box-shadow: var(--bs-shadow-card);
  transform: translateY(calc(-1 * var(--bs-space-1)));
}
.collection-category:has(a:focus-visible) {
  outline: var(--bs-focus-ring);
  outline-offset: var(--bs-focus-ring-offset);
}
.collection-category h2 {
  margin: 0;
  padding: 0;
  color: var(--bs-text-primary);
  font: var(--aide-t-mkt-label);
  text-align: left;
}
.collection-category h2 a,
.collection-category h2 a:hover {
  border: 0;
  color: var(--bs-text-primary);
  text-decoration: none;
}
.collection-category h2 a:focus-visible {
  outline: none;
}
/* Toute la tuile mène au thème. */
.collection-category h2 a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.collection-category .category-list {
  display: none;
}

/* Thème et catégorie : les catégories en puces, puis la liste des articles. */
#sidebar h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(100%);
  white-space: nowrap;
}
#sidebar .nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bs-space-2);
  margin: 0 0 var(--bs-space-8);
  padding: 0;
  list-style: none;
}
#sidebar .nav-list li {
  margin: 0;
}
#sidebar .nav-list a {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--bs-touch-target);
  margin: 0;
  padding: 0 var(--bs-space-4);
  border-radius: var(--bs-chip-radius);
  background: var(--bs-chip-bg);
  color: var(--bs-text-primary);
  font: var(--aide-t-app-body-1);
  text-decoration: none;
  transition: background-color var(--bs-duration-base) var(--bs-ease-out);
}
#sidebar .nav-list a:hover,
#sidebar .nav-list a:focus-visible {
  background: var(--bs-chip-bg-hover);
  color: var(--bs-text-primary);
}
#sidebar .nav-list .active a,
#sidebar .nav-list .active a:hover,
#sidebar .nav-list .active a:focus {
  background: var(--bs-chip-bg-active);
  color: var(--bs-chip-fg-active);
  font-weight: var(--bs-font-weight-semibold);
}
#sidebar .nav-list .active a .icon-arrow,
#sidebar .nav-list a .icon-arrow {
  display: none;
}
#categoryHead h1 {
  margin-right: 0;
}
#categoryHead .descrip {
  color: var(--bs-text-secondary);
  font: var(--aide-t-mkt-body-sm);
}
#categoryHead .sort {
  display: none;
}
#contentArea .articleList {
  margin: 0 0 var(--bs-space-10);
  padding: 0;
  list-style: none;
  font: var(--aide-t-mkt-body-sm);
}
#contentArea .articleList > li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--bs-border-muted);
}
#contentArea .articleList > li:first-child {
  border-top: 1px solid var(--bs-border-muted);
}
#contentArea .articleList a {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--bs-touch-target);
  margin: 0;
  padding: var(--bs-space-3) 0;
  color: var(--bs-text-link);
  font: var(--aide-t-mkt-body-sm);
  text-decoration: none;
}
#contentArea .articleList a:hover span {
  text-decoration: underline;
}
#contentArea .articleList .icon-article-doc,
#contentArea .articleList .icon-private-w {
  display: none;
}
#serp .articleList > li {
  padding: var(--bs-space-3) 0;
}
#serp .articleList > li > a {
  min-height: 0;
  margin: 0 0 var(--bs-space-1);
  padding: 0;
  font: var(--aide-t-mkt-label);
}
#serp p,
#serp .articlesFound,
#serp .nada {
  margin: 0;
  color: var(--bs-text-secondary);
  font: var(--aide-t-app-body-1);
}

/* Article (design.md §12.7) : titre `mkt-h2`, intertitres `mkt-label`, corps `mkt-body-sm`, colonne de 780 px. */
#fullArticle {
  color: var(--bs-text-primary);
  font: var(--aide-t-mkt-body-sm);
}
#fullArticle .title {
  margin: 0 0 var(--bs-space-6);
  color: var(--bs-text-primary);
  font: var(--aide-t-mkt-h2);
}
#fullArticle .printArticle {
  display: none;
}
#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
  color: var(--bs-text-primary);
  font: var(--aide-t-mkt-body-sm);
}
#fullArticle p {
  margin: 0 0 var(--bs-space-4);
}
#fullArticle h2,
#fullArticle h3,
#fullArticle h4 {
  margin: 0 0 var(--bs-space-4);
  color: var(--bs-text-primary);
}
#fullArticle h2 {
  font: var(--aide-t-mkt-label);
}
#fullArticle h3,
#fullArticle h4 {
  margin-top: var(--bs-space-6);
  font: var(--aide-t-mkt-subhead);
}
#fullArticle hr {
  margin: var(--bs-space-10) 0 var(--bs-space-8);
  border: 0;
  border-top: 1px solid var(--bs-border-muted);
}
#fullArticle a,
#fullArticle strong a,
#fullArticle a strong {
  color: var(--bs-text-link);
  text-decoration: underline;
  text-underline-offset: var(--bs-space-0-5);
}
#fullArticle a:hover {
  color: var(--bs-text-secondary);
}
#fullArticle strong,
#fullArticle b {
  color: inherit;
  font-weight: var(--bs-font-weight-bold);
}
#fullArticle ul,
#fullArticle ol {
  margin: 0 0 var(--bs-space-4);
  padding: 0 0 0 var(--bs-space-6);
}
#fullArticle li {
  margin: 0 0 var(--bs-space-2);
}
#fullArticle li > ul,
#fullArticle li > ol {
  margin: var(--bs-space-2) 0 0;
}
#fullArticle blockquote {
  margin: 0 0 var(--bs-space-6);
  padding: var(--bs-space-4) var(--bs-space-5);
  border: 0;
  border-radius: var(--bs-radius-12);
  background: var(--bs-bg-info-subtle);
  font-style: normal;
}
#fullArticle blockquote p:last-child {
  margin-bottom: 0;
}
#fullArticle table {
  margin: 0 0 var(--bs-space-6);
}
#fullArticle table td,
#fullArticle table th {
  padding: var(--bs-space-2) var(--bs-space-3);
  border-top: 1px solid var(--bs-border-muted);
}
#fullArticle table thead {
  color: var(--bs-text-primary);
  font-weight: var(--bs-font-weight-bold);
}

/* Sous l'article : « Cet article t'a-t-il aidé ? », date de mise à jour, articles liés. */
.articleRatings {
  flex-wrap: wrap;
  gap: var(--bs-space-3);
  margin: var(--bs-space-12) 0 0;
  padding: var(--bs-space-6);
  border: 0;
  border-radius: var(--bs-radius-16);
  background: var(--bs-bg-canvas-alt);
  box-shadow: none;
  color: var(--bs-text-primary);
  font: var(--aide-t-app-title-2);
}
.articleRatings-question {
  margin: 0;
}
.rateAction {
  border-color: var(--bs-bg-surface);
  background: var(--bs-bg-surface);
  box-shadow: none;
}
.rateAction:not([disabled='disabled']):hover,
.rateAction:not([disabled='disabled']):focus,
.rateAction.selected {
  background: var(--bs-bg-pastel-jaune);
  box-shadow: none;
}
.rateAction.selected::after {
  border-color: var(--bs-bg-positive);
}
.rating-face {
  fill: var(--bs-text-secondary);
}
.rateAction.selected .rating-face,
.rateAction:focus:not([disabled='disabled']) .rating-face,
.rateAction:hover:not([disabled='disabled']) .rating-face {
  fill: var(--bs-text-primary);
}
#main-content .articleFoot {
  margin-top: var(--bs-space-6);
}
#main-content .articleFoot p,
#main-content .articleFoot time,
#main-content .articleFoot p.lu,
#main-content .articleFoot time.lu {
  float: none;
  margin: 0;
  color: var(--bs-text-secondary);
  font: var(--aide-t-mkt-caption);
  font-style: normal;
}
#main-content .related {
  margin: var(--bs-space-10) 0 0;
  padding: var(--bs-space-8) 0 0;
  border: 0;
  border-top: 1px solid var(--bs-border-muted);
  background: none;
}
#main-content .related h3 {
  margin: 0 0 var(--bs-space-3);
  padding: 0;
  color: var(--bs-text-primary);
  font: var(--aide-t-mkt-label);
  text-transform: none;
}
#main-content .related ul {
  margin: 0;
  padding: 0;
}
#main-content .related ul > li {
  padding: var(--bs-space-2) 0;
}
#main-content .related ul > li a {
  margin: 0;
  color: var(--bs-text-link);
  font: var(--aide-t-mkt-body-sm);
}
#main-content .related .icon-article-doc {
  display: none;
}

/* Recherche sans résultat, page introuvable. */
#noResults {
  padding: var(--bs-space-4) 0;
  color: var(--bs-text-secondary);
  font: var(--aide-t-mkt-body-sm);
}
#errorContainer {
  padding: 0;
  border: 0;
  background: none;
}
#errorContainer .icon-error {
  display: none;
}
#errorContainer p {
  color: var(--bs-text-secondary);
  font: var(--aide-t-mkt-body-sm);
}

/* Pied de page. */
#contentArea footer {
  margin: var(--bs-space-16) 0 0;
  padding: var(--bs-space-8) 0;
  border-top: 1px solid var(--bs-border-muted);
}
#contentArea footer p {
  margin: 0;
  color: var(--bs-text-secondary);
  font: var(--aide-t-mkt-caption);
  text-align: left;
}
#contentArea footer p a,
#contentArea footer p a:hover {
  color: var(--bs-text-secondary);
  text-decoration: underline;
}

@media (min-width: 808px) {
  #mainNav .brand {
    grid-column: 2;
    justify-self: center;
  }
  #mainNav .brand img {
    height: var(--bs-space-8);
  }
  #mainNav .nav-collapse,
  #mainNav .nav-collapse.collapse {
    grid-column: 1;
    justify-self: start;
  }
  #mainNav .nav > li > a.contactUs {
    padding: 0 var(--bs-space-4);
  }
  #docsSearch {
    padding: var(--bs-space-16) var(--bs-container-px) var(--bs-space-20);
  }
  #contentArea {
    padding-top: var(--bs-space-12);
  }
  #contentArea:has(> .collection-category) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bs-space-8);
    padding-top: var(--bs-space-16);
  }
  .collection-category {
    padding: var(--bs-space-8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .collection-category,
  #mainNav .nav > li > a.contactUs,
  #searchBar input.search-query,
  #docsSearch #searchBar button,
  #sidebar .nav-list a {
    transition: none;
  }
  .collection-category:hover {
    transform: none;
  }
}