/* ------------------------------------------------------------------
   462eng.fr
   Feuille de style unique. Pas de framework, pas de CDN, pas de build.
   ------------------------------------------------------------------ */

/* ---- 1. Polices (auto-hébergées, cf. fonts/LICENSE.txt) ---------- */

@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-600.woff2") format("woff2");
  /* SemiBold sert aussi pour le gras : à ce corps, Bold tape trop fort,
     et ça fait un fichier de moins à charger. */
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-400i.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Aldrich";
  src: url("../fonts/aldrich-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Orbitron";
  src: url("../fonts/orbitron-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Orbitron";
  src: url("../fonts/orbitron-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- 2. Jetons ---------------------------------------------------- */

:root {
  /* anthracite, du plus profond au plus clair */
  --bg: #26292c;
  --bg-panel: #2e3236;
  --bg-raised: #363b40;
  --line: #454b51;
  --line-soft: #383d42;

  /* Trois niveaux de texte, tous au-dessus de 4.5:1 sur les fonds
     ci-dessus : antiquewhite 11:1, dim 7.7:1, faint 5.3:1. En dessous de
     ces alphas on repasse sous le seuil — vérifié, pas estimé. */
  --fg: antiquewhite;
  --fg-dim: rgb(250 235 215 / 0.75);
  --fg-faint: rgb(250 235 215 / 0.62);

  --accent: #ff5000;
  /* #ff5000 plafonne à 3.9:1 sur le panneau : réservé aux traits, bordures
     et grands corps. Pour du petit texte, --accent-soft (5.2:1). */
  --accent-soft: #ff7a33;
  --accent-ghost: rgb(255 80 0 / 0.14);
  /* texte posé SUR l'accent : l'anthracite du fond n'y passe qu'à 4.4:1 */
  --on-accent: #1a1c1e;

  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Aldrich", "Nunito", system-ui, sans-serif;
  --font-display: "Orbitron", "Aldrich", system-ui, sans-serif;

  --rail-w: 15.5rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 2px; /* presque carré : sobre */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --wipe-ms: 420ms;
}

/* ---- 3. Base ------------------------------------------------------ */

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;

  /* trame très légère : donne du grain sans faire de motif */
  background-image: radial-gradient(
    circle at 18% 0%,
    rgb(255 80 0 / 0.05),
    transparent 62%
  );
  background-attachment: fixed;
}

h1,
h2,
h3 {
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

a {
  color: var(--accent-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover {
  color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Au chargement d'une URL à ancre, le navigateur donne le focus au
   panneau visé (tabindex="0") : un anneau plein autour de tout le
   panneau surprend plus qu'il n'aide — on le remplace par un halo
   discret. Les vrais contrôles gardent l'anneau franc ci-dessus. */
.panel:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ghost);
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-ui);
}
.skip:focus {
  left: 0;
}

/* ---- 4. Ossature -------------------------------------------------- */

.shell {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--gutter);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  /* La scène est bien plus haute que la colonne de gauche. Sans la rangée
     en 1fr, sa hauteur se répartit sur les deux rangées et décroche le rail
     du bloc de marque. */
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "brand stage"
    "rail  stage"
    "foot  foot";
  align-items: start;
}

/* ---- 5. Marque ---------------------------------------------------- */

.brand {
  grid-area: brand;
}

.brand__mark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--fg);
}
.brand__mark span {
  color: var(--accent);
}

.brand__line {
  margin: 0.7rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  line-height: 1.7;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
/* deux lignes voulues, plutôt qu'un retour à la ligne subi sur un tiret */
.brand__line span {
  display: block;
}

.brand::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 1.4rem;
  background: linear-gradient(90deg, var(--accent), transparent 72%);
}

/* ---- 6. Rail de navigation ---------------------------------------- */

/* La liste d'onglets n'existe que si le script tourne : ce sont des
   <button>, ils ne mènent nulle part sans lui. La montrer quand même
   afficherait sept onglets inertes, et surtout une sémantique ARIA qui
   ment — six panneaux annoncés « non sélectionnés » alors qu'ils sont tous
   visibles. Les liens externes du rail, eux, sont de vrais liens : ils
   restent visibles avec ou sans script. */
.rail {
  grid-area: rail;
  position: sticky;
  top: var(--gutter);
}

.rail__list {
  display: none;
}
.js .rail__list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.72rem 0.9rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--fg-dim);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition:
    color 160ms var(--ease),
    border-color 160ms var(--ease),
    background-color 160ms var(--ease);
}

/* l'icône : témoin d'état, façon LED de face avant */
.tab svg {
  flex: none;
  width: 15px;
  height: 15px;
  fill: currentColor;
  transition: fill 160ms var(--ease);
}

.tab__num {
  margin-left: auto;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

.tab:hover {
  color: var(--fg);
  border-color: var(--line);
  background: var(--bg-raised);
}
.tab:hover svg {
  fill: var(--accent-soft);
}

.tab[aria-selected="true"] {
  color: var(--fg);
  border-color: var(--accent);
  background: var(--bg-raised);
}
.tab[aria-selected="true"] svg {
  fill: var(--accent);
}
.tab[aria-selected="true"] .tab__num {
  color: var(--accent-soft);
}

/* barre d'accent qui pousse depuis le haut */
.tab::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -1px;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 220ms var(--ease);
}
.tab[aria-selected="true"]::before {
  transform: scaleY(1);
}

/* le flash de sélection : 3 impulsions, puis le panneau se déplie */
.tab.is-flashing {
  animation: flash 110ms linear 3;
}
@keyframes flash {
  0%,
  49% {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
  }
  50%,
  100% {
    background: var(--bg-raised);
    color: var(--fg);
    border-color: var(--line);
  }
}
/* pendant le flash, l'icône et le numéro suivent la couleur du texte */
.tab.is-flashing svg {
  fill: currentColor;
}
.tab.is-flashing .tab__num {
  color: currentColor;
}

/* liens externes, sous les onglets : de vrais liens, présents même sans
   script. Mêmes boutons que les onglets — l'icône remplace la LED, la
   flèche remplace le numéro. Le filet reprend celui de la marque. */
.rail__ext {
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.rail__ext::before {
  content: "";
  height: 1px;
  margin-bottom: 0.5rem;
  background: linear-gradient(90deg, var(--accent), transparent 72%);
}
.rail__ext li {
  display: flex;
}
.rail__ext .tab {
  text-decoration: none;
}

/* ---- 7. Allumage : le balayage d'ouverture ------------------------- */

/* Un point orange au centre s'étire en ligne, puis la page s'ouvre
   verticalement depuis cette ligne — un écran qui s'allume. Décoratif,
   et bardé de garde-fous : le voile n'existe qu'avec la classe `js`
   (sans script, rien ne recouvre jamais la page), il ignore les clics,
   et chaque animation se termine en `visibility: hidden` — même à
   0.01ms sous prefers-reduced-motion, l'état final est « disparu ». */
.boot {
  display: none;
}
.js .boot {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

/* Deux volets pleins qui s'écartent en glissant. Chacun porte un trait
   orange net sur son bord intérieur : quand ils s'ouvrent, la ligne du
   centre se scinde visuellement en deux traits qui s'éloignent avec eux. */
.boot__half {
  position: absolute;
  left: 0;
  right: 0;
  /* +1px : sans lui, un liseré de page peut poindre entre les volets */
  height: calc(50% + 1px);
  background: var(--bg);
}
.boot__half::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  /* éteints tant que le faisceau joue sa phase bruitée : sinon ces traits
     pleine largeur le recouvrent dès la première image. Ils s'allument à
     l'instant où les volets partent et où le faisceau s'efface. */
  opacity: 0;
  animation: boot-solid 1ms linear 390ms forwards;
}
.boot__half--top {
  top: 0;
  animation: boot-open-top 420ms var(--ease) 390ms forwards;
}
.boot__half--top::after {
  bottom: 0;
}
.boot__half--bottom {
  bottom: 0;
  animation: boot-open-bottom 420ms var(--ease) 390ms forwards;
}
.boot__half--bottom::after {
  top: 0;
}
@keyframes boot-open-top {
  to {
    transform: translateY(-100%);
    visibility: hidden;
  }
}
@keyframes boot-open-bottom {
  to {
    transform: translateY(100%);
    visibility: hidden;
  }
}

/* Le faisceau : net, sans halo. Il naît au centre et grandit en largeur,
   d'abord haché et instable (deux trames de tirets décalées par à-coups),
   puis se stabilise en trait plein une fois la pleine largeur atteinte.
   À l'ouverture des volets il s'efface d'un coup : les traits portés par
   leurs bords, au même endroit, prennent le relais sans couture. */
.boot__beam {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  margin-top: -1px;
  transform: scaleX(0);
  animation:
    boot-beam-grow 325ms var(--ease) forwards,
    boot-beam-off 1ms linear 390ms forwards;
}
/* La phase bruitée : des pixels épars qui sautillent et se densifient.
   Les longueurs de tirets sont animées de 1px à la période complète de
   chaque trame : la ligne part quasi vide et se remplit continûment,
   pour atteindre 100% quand la pleine largeur est là. @property rend
   ces longueurs interpolables ; sans lui, elles basculent d'un coup à
   mi-parcours — dégradé acceptable. */
.boot__beam::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      var(--accent) 0 var(--boot-dash-a),
      transparent var(--boot-dash-a) 15px
    ),
    repeating-linear-gradient(
      90deg,
      var(--accent) 0 var(--boot-dash-b),
      transparent var(--boot-dash-b) 23px
    );
  animation:
    boot-fill 325ms linear forwards,
    boot-noise 65ms steps(3) 5,
    boot-off 1ms linear 325ms forwards;
}
@property --boot-dash-a {
  syntax: "<length>";
  inherits: false;
  initial-value: 1px;
}
@property --boot-dash-b {
  syntax: "<length>";
  inherits: false;
  initial-value: 1px;
}
@keyframes boot-fill {
  from {
    --boot-dash-a: 1px;
    --boot-dash-b: 1px;
  }
  to {
    --boot-dash-a: 15px;
    --boot-dash-b: 23px;
  }
}
/* la ligne stable qui prend le relais une fois pleine */
.boot__beam::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: 0;
  animation: boot-solid 1ms linear 325ms forwards;
}
@keyframes boot-beam-grow {
  to {
    transform: scaleX(1);
  }
}
@keyframes boot-noise {
  from {
    background-position:
      0 0,
      0 0;
  }
  to {
    background-position:
      -37px 0,
      19px 0;
  }
}
@keyframes boot-solid {
  to {
    opacity: 1;
  }
}
@keyframes boot-off {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes boot-beam-off {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* ---- 8. Scène : le panneau qui se déplie vers la droite ------------ */

.stage {
  grid-area: stage;
  min-height: 26rem;
}

.panel {
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-panel);
  padding: clamp(1.4rem, 3vw, 2.4rem);
}
.panel + .panel {
  margin-top: 1.2rem;
}

.js .panel {
  /* le dépliage : volet qui balaie de la gauche vers la droite.
     `backwards` et non `both` : une fois l'animation finie, plus aucun
     clip-path ne subsiste — sinon il rognerait l'anneau de focus du
     panneau, qui déborde de 3px. */
  animation: unfold var(--wipe-ms) var(--ease) backwards;
}

@keyframes unfold {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0.35;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

/* le contenu suit avec un léger retard : impression de dépliage */
.js .panel > * {
  animation: slidein 380ms var(--ease) backwards;
  animation-delay: 120ms;
}
@keyframes slidein {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- 9. Contenu des panneaux -------------------------------------- */

.panel__eyebrow {
  margin: 0 0 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.panel__title {
  margin: 0 0 1.2rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  letter-spacing: 0.01em;
}

.panel__lede {
  margin: 0 0 1.6rem;
  max-width: 60ch;
  font-size: 1.06rem;
  color: var(--fg);
}

.panel p {
  max-width: 66ch;
  color: var(--fg-dim);
}
.panel p strong {
  color: var(--fg);
  font-weight: 600;
}

.panel h3 {
  display: flex;
  align-items: center;
  /* un intertitre peut porter une étiquette d'état : il faut qu'elle
     puisse passer à la ligne, sinon ça déborde dès qu'on rétrécit */
  flex-wrap: wrap;
  row-gap: 0.35rem;
  column-gap: 0.6rem;
  margin: 2rem 0 0.6rem;
  font-size: 0.94rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--fg);
}
/* repère graphique, pas un caractère : rien à annoncer pour un lecteur d'écran */
.panel h3::before {
  content: "";
  flex: none;
  width: 10px;
  height: 3px;
  background: var(--accent);
}

/* état réel d'un projet — dit plutôt que sous-entendu */
.status {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
  vertical-align: 0.1em;
}
.status--live {
  border-color: var(--accent);
  color: var(--accent-soft);
}
/* dans un intertitre, l'étiquette est un élément flex : sans min-width
   elle refuse de se compresser et pousse la ligne hors du panneau */
.panel h3 .status {
  min-width: 0;
  margin-left: 0;
}

.panel hr {
  border: 0;
  border-top: 1px solid var(--line-soft);
  margin: 2rem 0;
}

/* listes à puce carrée */
.list {
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
  max-width: 66ch;
}
.list li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.5rem;
  color: var(--fg-dim);
}
.list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--accent);
}
.list li strong {
  color: var(--fg);
  font-weight: 600;
}

/* cartes de domaine */
.cards {
  display: grid;
  gap: 1rem;
  /* min(15rem, 100%) : en dessous de 15rem d'espace disponible la carte
     se contente de la largeur restante au lieu de déborder */
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  margin: 1.4rem 0;
}

.card {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg);
}
.card h3 {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
}
.card h3::before {
  content: none;
}
.card p {
  margin: 0;
  font-size: 0.92rem;
}

/* mots-clés techniques */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0 1.6rem;
  padding: 0;
  list-style: none;
}
.tags li {
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
}

/* citation maison */
.quote {
  margin: 1.6rem 0;
  padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 2px solid var(--accent);
  max-width: 60ch;
}
.quote p {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--fg);
}

/* table sobre (mentions légales) */
.facts {
  width: 100%;
  border-collapse: collapse;
  margin: 0.6rem 0 1.4rem;
  font-size: 0.92rem;
  text-align: left;
}
.facts th,
.facts td {
  padding: 0.55rem 0.9rem 0.55rem 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.facts th {
  width: 12rem;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.facts td {
  color: var(--fg-dim);
}

/* contact */
.contact-mail {
  display: inline-block;
  margin: 0.4rem 0 1.4rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--fg);
  text-decoration: none;
  transition:
    background-color 160ms var(--ease),
    color 160ms var(--ease);
}
.contact-mail:hover {
  background: var(--accent);
  color: var(--on-accent);
}

/* ---- 10. Pied ------------------------------------------------------ */

.foot {
  grid-area: foot;
  margin-top: 1rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  align-items: baseline;
  font-size: 0.78rem;
  color: var(--fg-faint);
}
.foot__mark {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}
.foot a {
  color: var(--fg-dim);
}

/* ---- 11. Adaptations ---------------------------------------------- */

@media (max-width: 62rem) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "brand"
      "rail"
      "stage"
      "foot";
  }

  .rail {
    position: static;
  }

  .rail__list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .tab {
    width: auto;
    flex: 1 1 9rem;
    font-size: 0.75rem;
    padding: 0.6rem 0.7rem;
  }
  .tab__num {
    display: none;
  }
  .tab::before {
    inset: auto 0 -1px 0;
    width: auto;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left;
  }
  .tab[aria-selected="true"]::before {
    transform: scaleX(1);
  }

  /* en ligne comme les onglets ; le filet garde toute la largeur */
  .rail__ext {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .rail__ext::before {
    width: 100%;
  }
  .rail__ext li {
    flex: 1 1 9rem;
  }

  /* en colonne, le volet se déplie vers le bas */
  .panel {
    border-left: 1px solid var(--line-soft);
    border-top: 2px solid var(--accent);
  }
  @keyframes unfold {
    from {
      clip-path: inset(0 0 100% 0);
      opacity: 0.35;
    }
    to {
      clip-path: inset(0 0 0 0);
      opacity: 1;
    }
  }
  @keyframes slidein {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .facts th {
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

@media print {
  /* On repasse par les jetons : redéfinir `body` seul laisserait tout le
     texte en antiquewhite sur blanc, puisque presque rien n'hérite. */
  :root {
    --bg: #fff;
    --bg-panel: #fff;
    --bg-raised: #fff;
    --fg: #000;
    --fg-dim: #1a1a1a;
    --fg-faint: #4a4a4a;
    --accent: #000;
    --accent-soft: #000;
    --on-accent: #fff;
    --line: #999;
    --line-soft: #ccc;
  }

  /* `.js .rail` l'emporterait sur un simple `.rail` : il faut la même
     spécificité pour que le rail disparaisse vraiment à l'impression. */
  .js .rail,
  .rail,
  .js .boot,
  .boot,
  .skip {
    display: none;
  }

  body {
    background: #fff;
    background-image: none;
    color: #000;
  }

  /* Le volet fermé s'imprime quand même : on veut la page entière. Et les
     animations sont coupées — sinon un panneau rouvert sort blanc, figé
     sur la première image de son dépliage. */
  .panel[hidden] {
    display: block;
  }
  .js .panel,
  .js .panel > * {
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .panel {
    border: 0;
    border-top: 1px solid #999;
    background: none;
    padding-left: 0;
    padding-right: 0;
    page-break-inside: avoid;
  }
  .card,
  .tags li,
  .status {
    border-color: #999;
  }

  a {
    text-decoration: underline;
  }
}