/*
 * TechVerte — https://techverte.com/
 * Feuille commune à l'accueil, aux hubs et aux articles, sans framework.
 * Organisation : variables, base, utilitaires, composants, adaptations.
 * Approche mobile-first : 1 colonne, puis 2 à 40em et 3 à 64em.
 * Le seuil de navigation de 64em est aussi défini dans navigation.js.
 */

/* 01. Variables : identité, typographie, espacements et dimensions. */
:root {
  color-scheme: light;

  --color-background: #fffdf7;
  --color-surface: #ffffff;
  --color-text: #182d25;
  --color-muted: #4d6158;
  --color-primary: #164c3c;
  --color-primary-hover: #10392e;
  --color-primary-soft: #e9f1eb;
  --color-accent: #e9b858;
  --color-accent-hover: #dfaa40;
  --color-accent-soft: #f8eed7;
  --color-blue-soft: #edf0f6;
  --color-blue-text: #234a66;
  --color-border: #cedad1;
  --color-border-strong: #71867a;
  --color-focus: #164c3c;
  --color-on-dark: #fffdf7;
  --color-on-dark-muted: #d5e4db;
  --color-focus-on-dark: #f5cd76;

  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-small: 0.875rem;
  --font-size-body: 1rem;
  --font-size-lead: 1.125rem;
  --font-size-h1: clamp(2.125rem, 1.3rem + 3.4vw, 4.25rem);
  --font-size-h2: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem);
  --font-size-h3: 1.25rem;
  --line-height-body: 1.65;
  --line-height-heading: 1.2;

  --space-unit: 1rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --container-width: 72rem;
  --reading-width: 70ch;
  --page-gutter: clamp(1rem, 4vw, 2rem);
  --section-space: clamp(3rem, 7vw, 5rem);
  --target-size: 2.75rem;
  --radius-small: 0.375rem;
  --radius-medium: 0.75rem;
  --radius-large: 1rem;
  --radius-pill: 999px;
  --shadow-card: 0 0.25rem 1rem rgb(24 45 37 / 5%);
  --shadow-card-hover: 0 0.5rem 1.5rem rgb(24 45 37 / 10%);
  --duration-fast: 160ms;
  --easing-standard: ease-out;
}

/* 02. Reset minimal : conservation des comportements natifs utiles. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

h1,
h2,
h3,
p,
ul,
ol {
  margin-block: 0;
}

h1,
h2,
h3 {
  font-weight: 750;
  line-height: var(--line-height-heading);
  letter-spacing: -0.025em;
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }

a,
h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

img,
svg {
  display: block;
  max-inline-size: 100%;
}

img { block-size: auto; }

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

button { cursor: pointer; }

a {
  color: var(--color-primary);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

a:hover { text-decoration-thickness: 0.13em; }

::selection {
  color: var(--color-text);
  background: var(--color-accent);
}

/* Le HTML et le JS pilotent hidden : aucune règle de grille ne le neutralise. */
[hidden] { display: none !important; }

/* 03. Accessibilité : focus, accès rapide et cibles de navigation. */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}

[id] { scroll-margin-block-start: var(--space-6); }

.skip-link {
  position: absolute;
  z-index: 100;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-size);
  max-inline-size: calc(100% - var(--space-6));
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-small);
  color: var(--color-primary);
  background: var(--color-surface);
  font-weight: 700;
  transform: translateY(calc(-100% - var(--space-6)));
}

.skip-link:focus { transform: translateY(0); }

/* Texte disponible aux technologies d'assistance, sans supprimer son contenu. */
.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 04. Utilitaires de mise en page, réutilisables dans les prochains modèles. */
.container {
  width: calc(100% - 2 * var(--page-gutter));
  max-width: var(--container-width);
  margin-inline: auto;
}

.reading-width { max-width: var(--reading-width); }

.section { padding-block: var(--section-space); }

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.grid > * { min-inline-size: 0; }

.stack > * + * { margin-block-start: var(--stack-space, var(--space-4)); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

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

.section-heading { margin-block-end: var(--space-6); }

.section-heading > * + * { margin-block-start: var(--space-4); }

.section-heading > p {
  max-inline-size: var(--reading-width);
  color: var(--color-muted);
}

.eyebrow {
  color: var(--color-primary);
  font-size: var(--font-size-small);
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: 0.025em;
}

/* 05. En-tête : disposition fluide, sans barre fixe qui masque le contenu. */
.site-header {
  border-block-end: 1px solid var(--color-border);
  background: var(--color-surface);
}

.site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-3);
  padding-block: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--space-2);
  min-block-size: var(--target-size);
  color: var(--color-primary);
  text-decoration: none;
}

.brand::before {
  content: "";
  flex-shrink: 0;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border: 0.375rem solid var(--color-accent-soft);
  border-radius: 50%;
  background: var(--color-accent);
}

.brand__name {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.brand:hover .brand__name { text-decoration: underline; }

.site-nav {
  grid-column: 1 / -1;
  min-inline-size: 0;
  padding-block-start: var(--space-4);
}

.site-nav ul,
.site-footer ul {
  padding: 0;
  list-style: none;
}

.site-nav__topics {
  display: grid;
  gap: var(--space-2);
}

.site-nav__topics a {
  display: flex;
  align-items: center;
  min-block-size: var(--target-size);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-small);
  color: var(--color-text);
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
}

.site-nav__topics a:hover,
.site-nav__topics a[aria-current="page"] {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  text-decoration: underline;
}

.site-nav .site-nav__secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}

.site-nav__secondary a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-size);
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

/* 06. Bouton burger : son affichage dépend de l'initialisation effective du JS. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-inline-size: var(--target-size);
  min-block-size: var(--target-size);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-small);
  color: var(--color-primary);
  background: var(--color-surface);
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1.3;
}

.nav-toggle:hover { background: var(--color-primary-soft); }

.nav-toggle__icon {
  display: grid;
  gap: 0.25rem;
  inline-size: 1.125rem;
  flex-shrink: 0;
}

.nav-toggle__icon > span {
  display: block;
  block-size: 0.125rem;
  background: currentColor;
  transition: transform var(--duration-fast) var(--easing-standard),
    opacity var(--duration-fast) var(--easing-standard);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon > span:nth-child(1) {
  transform: translateY(0.375rem) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon > span:nth-child(2) { opacity: 0; }

.nav-toggle[aria-expanded="true"] .nav-toggle__icon > span:nth-child(3) {
  transform: translateY(-0.375rem) rotate(-45deg);
}

/* 07. Fil d'Ariane : les séparateurs sont décoratifs, ajoutés par le CSS. */
.breadcrumb {
  padding-block: var(--space-4);
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.breadcrumb__list > li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
}

.breadcrumb__list > li + li::before {
  content: "";
  inline-size: 0.35rem;
  block-size: 0.35rem;
  border-block-start: 1px solid currentColor;
  border-inline-end: 1px solid currentColor;
  transform: rotate(45deg);
}

.breadcrumb a { padding-block: var(--space-2); }

/* 08. Héros : hiérarchie typographique et appels à l'action. */
.hero {
  padding-block-start: var(--space-6);
  border-block-end: 1px solid var(--color-border);
}

.hero .eyebrow {
  display: inline-block;
  max-inline-size: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
}

.hero__title {
  max-width: 22ch;
  margin-block: var(--space-5);
  font-size: var(--font-size-h1);
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.hero__intro {
  max-inline-size: 62ch;
  color: var(--color-muted);
  font-size: var(--font-size-lead);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--target-size);
  max-inline-size: 100%;
  padding: var(--space-3) var(--space-5);
  border: 2px solid transparent;
  border-radius: var(--radius-small);
  font: inherit;
  font-weight: 750;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard);
}

.btn:hover { text-decoration: underline; }

.btn--primary {
  border-color: var(--color-primary);
  color: var(--color-on-dark);
  background: var(--color-primary);
}

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

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

.btn--secondary:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.btn--accent {
  border-color: var(--color-primary);
  color: var(--color-text);
  background: var(--color-accent);
}

.btn--accent:hover { background: var(--color-accent-hover); }

/* 09. Cartes thématiques : un accent distinct pour chaque silo. */
.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

/* Aucun overflow:hidden : les contours de focus restent visibles autour des liens. */
.topic-card {
  --topic-background: var(--color-primary-soft);
  --topic-accent: var(--color-primary);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border-block-start: 4px solid var(--topic-accent);
  background: var(--topic-background);
}

.topic-card--charging {
  --topic-background: var(--color-blue-soft);
  --topic-accent: var(--color-blue-text);
}

.topic-card--solar {
  --topic-background: var(--color-accent-soft);
  --topic-accent: var(--color-primary);
}

.topic-card .eyebrow,
.topic-card h3 a { color: var(--topic-accent); }

.topic-card__highlights {
  margin-block-start: auto;
  padding-inline-start: var(--space-5);
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.topic-card__highlights > li + li { margin-block-start: var(--space-2); }

/* 10. Articles récents : images dimensionnées et contenu lisible. */
.latest {
  border-block: 1px solid var(--color-border);
  background: var(--color-primary-soft);
}

.article-card {
  display: flex;
  flex-direction: column;
  transition: border-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard);
}

.article-card:focus-within { border-color: var(--color-primary); }

.article-card__image {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-start-start-radius: var(--radius-large);
  border-start-end-radius: var(--radius-large);
}

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
}

.article-card__category {
  font-size: var(--font-size-small);
  font-weight: 700;
}

.article-card__category a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-size);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
}

.card__body > p:last-child { color: var(--color-muted); }

/* 11. Présentation éditoriale et transparence. */
.about__principles { margin-block-end: var(--space-6); }

.about__principles > section {
  padding-inline-start: var(--space-5);
  border-inline-start: 3px solid var(--color-border-strong);
}

.about__principles > section > * + * { margin-block-start: var(--space-4); }

.about__principles p { color: var(--color-muted); }

.about__principles a,
.text-link {
  display: inline-block;
  padding-block: var(--space-2);
  font-weight: 650;
}

.affiliate-panel {
  border-block: 1px solid var(--color-border);
  background: var(--color-accent-soft);
}

.affiliate-panel .reading-width > * + * { margin-block-start: var(--space-5); }

.affiliate-panel .reading-width > a {
  display: inline-block;
  padding-block: var(--space-2);
  font-weight: 700;
}

.affiliate-offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.affiliate-offer__label {
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-weight: 700;
}

/* 12. Pied de page : les couleurs de focus sont adaptées au fond sombre. */
.site-footer {
  --color-focus: var(--color-focus-on-dark);
  color: var(--color-on-dark-muted);
  background: var(--color-primary-hover);
}

.site-footer__brand {
  margin-block-end: var(--space-3);
  color: var(--color-on-dark);
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.site-footer__grid {
  gap: var(--space-6);
  margin-block: var(--space-7);
}

.site-footer__heading {
  margin-block-end: var(--space-4);
  color: var(--color-on-dark);
  font-size: 1rem;
  letter-spacing: 0;
}

.site-footer a {
  display: inline-block;
  min-block-size: var(--target-size);
  padding-block: var(--space-2);
  color: var(--color-on-dark);
}

.site-footer a:hover { color: var(--color-focus-on-dark); }

.site-footer__disclosure {
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border-strong);
  font-size: var(--font-size-small);
}

.site-footer__copyright {
  margin-block-start: var(--space-5);
  font-size: var(--font-size-small);
}

.site-footer__copyright small { font-size: inherit; }

/* 13. Tablettes : deux colonnes, boutons côte à côte si l'espace le permet. */
@media (min-width: 40em) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .site-nav__topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .hero {
    padding-block-start: var(--space-7);
    background: radial-gradient(circle at 100% 0%, var(--color-accent-soft) 0, var(--color-accent-soft) 13rem, transparent 13rem);
  }

  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .topic-card,
  .card__body { padding: var(--space-6); }

  .section-heading { margin-block-end: var(--space-7); }
}

/* 14. Ordinateurs : ce seuil doit rester identique dans navigation.js. */
@media (min-width: 64em) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .site-header__inner {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-7);
  }

  .brand__name { font-size: 1.625rem; }

  .brand::before {
    inline-size: 2rem;
    block-size: 2rem;
  }

  .site-nav {
    grid-column: 2;
    padding-block-start: 0;
  }

  .site-nav__topics {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
  }

  .site-nav__topics a { padding-inline: var(--space-3); }

  .site-nav .site-nav__secondary {
    justify-content: flex-end;
    gap: 0 var(--space-5);
    margin-block-start: var(--space-2);
    padding-block-start: 0;
    border-block-start: 0;
  }

  .hero { padding-block-end: var(--space-9); }

  .about__principles { gap: var(--space-6); }
}

/* 15. Survol réservé aux dispositifs disposant d'un pointeur précis. */
@media (hover: hover) and (pointer: fine) {
  .article-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-card-hover);
  }
}

/* 16. Respect des préférences utilisateur et du contraste système. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }

  .btn,
  .nav-toggle,
  .card,
  .hero .eyebrow,
  .article-card__category a { border-color: ButtonText; }

  .brand::before { border-color: CanvasText; }

  .nav-toggle__icon > span { background: ButtonText; }

  .card { box-shadow: none; }
}

/* 17. Impression : lecture du contenu, navigation d'écran masquée. */
@media print {
  body {
    color: #000000;
    background: #ffffff;
    font-size: 11pt;
  }

  .skip-link,
  .site-header,
  .hero__actions,
  .site-footer nav,
  .nav-toggle { display: none !important; }

  .container,
  .reading-width {
    width: 100%;
    max-width: none;
  }

  .section { padding-block: 1rem; }

  .hero,
  .latest,
  .affiliate-panel,
  .site-footer,
  .topic-card {
    color: #000000;
    background: #ffffff;
  }

  .grid { display: block; }

  .grid > * + * { margin-block-start: 1rem; }

  .card {
    break-inside: avoid;
    box-shadow: none;
  }

  .site-footer a,
  .site-footer__brand,
  a { color: #000000; }

  .hero__title { font-size: 24pt; }
}

/* 18. Pages intérieures : titre, état éditorial et texte courant. */
.site-nav__topics a[aria-current] {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  text-decoration: underline;
}

.page-header {
  padding-block: var(--space-6) var(--space-7);
  border-block-end: 1px solid var(--color-border);
}

.page-header__title {
  max-inline-size: 30ch;
  margin-block: var(--space-4);
  font-size: clamp(2rem, 1.3rem + 2.7vw, 3.5rem);
}

.page-header__intro {
  color: var(--color-muted);
  font-size: var(--font-size-lead);
}

.content-status {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  color: var(--color-primary);
  background: var(--color-accent-soft);
  font-size: var(--font-size-small);
  font-weight: 650;
  line-height: 1.5;
}

.notice,
.key-points,
.guide-summary {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid var(--color-primary);
  border-radius: var(--radius-medium);
  background: var(--color-primary-soft);
}

.notice { background: var(--color-accent-soft); }

.notice > * + *,
.key-points > * + *,
.guide-summary > * + * { margin-block-start: var(--space-4); }

.notice h2,
.key-points h2,
.guide-summary h2 { font-size: 1.375rem; }

.prose { overflow-wrap: anywhere; }

.prose > * + *,
.prose section > * + * { margin-block-start: var(--space-5); }

.prose > section + section { margin-block-start: var(--space-7); }

.prose ul,
.prose ol,
.key-points ul { padding-inline-start: var(--space-5); }

.prose li + li { margin-block-start: var(--space-2); }

.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }

.prose h3 { font-size: 1.2rem; }

.definition-list { margin: 0; }

.definition-list dt {
  margin-block-start: var(--space-4);
  font-weight: 700;
}

.definition-list dd { margin: var(--space-1) 0 0; }

/* 19. Hubs : groupes d'articles et navigation entre les silos. */
.hub-groups {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-5);
}

.hub-group {
  min-inline-size: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
}

.hub-group h2 { font-size: 1.375rem; }

.hub-list {
  display: grid;
  gap: var(--space-4);
  margin-block-start: var(--space-5);
  padding-inline-start: var(--space-5);
}

.hub-list a { font-weight: 650; }

.hub-list .content-status {
  display: table;
  margin-block-start: var(--space-2);
}

/* 20. Article et sommaire : repli HTML disponible sans JavaScript. */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--space-6);
  margin-block-start: var(--space-6);
}

.article-content { min-inline-size: 0; }

.toc {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
}

.toc__title { font-size: 1.125rem; }

.toc ol {
  margin-block-start: var(--space-4);
  padding-inline-start: var(--space-5);
}

.toc a {
  display: inline-block;
  min-block-size: var(--target-size);
  padding-block: var(--space-2);
}

.table-scroll {
  max-inline-size: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
}

.table-scroll table {
  inline-size: 100%;
  min-inline-size: 34rem;
  border-collapse: collapse;
  background: var(--color-surface);
  text-align: start;
}

.table-scroll caption {
  padding: var(--space-4);
  font-weight: 700;
  text-align: start;
}

.table-scroll th,
.table-scroll td {
  padding: var(--space-4);
  border-block-start: 1px solid var(--color-border);
  vertical-align: top;
}

.table-scroll thead { background: var(--color-primary-soft); }

/* 21. FAQ : details/summary natifs, utilisables au clavier et sans script. */
.faq-block > h2 { margin-block-end: var(--space-5); }

.faq-item {
  margin-block-start: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
}

.faq-item summary {
  min-block-size: var(--target-size);
  padding: var(--space-4) var(--space-5);
  color: var(--color-primary);
  font-weight: 700;
  cursor: pointer;
}

.faq-item summary::marker { color: var(--color-primary); }

.faq-item > p { padding: 0 var(--space-5) var(--space-5); }

.faq-item[open] summary { text-decoration: underline; }

@media (min-width: 64em) {
  .hub-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .article-layout { grid-template-columns: 15rem minmax(0, 1fr); }
}

@media print {
  .toc { display: none; }
  .article-layout { display: block; }
  .hub-groups { display: block; }
  .hub-group + .hub-group { margin-block-start: 1rem; }
  .table-scroll { overflow: visible; }
  .table-scroll table { min-inline-size: 0; }
}