/* Site de Dusty (dusty.websolutis.com) : pages statiques, couleurs de la charte (docs/brand/charte.json), polices du
   système, aucune ressource extérieure. */
:root {
  color-scheme: light dark;
  --fond: #f7f5f1;
  --panneau: #ffffff;
  --panneau-2: #f0ece5;
  --texte: #1a1816;
  --texte-2: #5e5850;
  --texte-3: #8a8379;
  --separateur: #e2dcd2;
  --accent: #0e7490;
  --accent-appuye: #0b5f76;
  --accent-doux: rgba(14, 116, 144, 0.12);
  --sciure: #e7d2ae;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #1c1b19;
    --panneau: #252422;
    --panneau-2: #2e2c29;
    --texte: #f3f0ea;
    --texte-2: #a9a397;
    --texte-3: #7a746b;
    --separateur: #393632;
    --accent: #1a9cb8;
    --accent-appuye: #3bb0cb;
    --accent-doux: rgba(26, 156, 184, 0.2);
    --sciure: #6b5236;
  }
}
* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a {
  color: var(--accent);
  text-underline-offset: 2px;
}
a:hover {
  color: var(--accent-appuye);
}
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.saut {
  position: absolute;
  left: -9999px;
}
.saut:focus {
  left: 16px;
  top: 8px;
  background: var(--panneau);
  padding: 6px 10px;
  z-index: 1;
}
header.tete,
footer.pied,
main {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px;
}
header.tete {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--separateur);
}
header.tete .marque {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--texte);
  text-decoration: none;
  font-weight: 700;
  font-size: 20px;
  margin-right: auto;
}
header.tete .marque img {
  width: 36px;
  height: 36px;
}
header.tete nav {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 15px;
}
header.tete nav a {
  color: var(--texte-2);
  text-decoration: none;
}
header.tete nav a:hover,
header.tete nav a[aria-current="page"] {
  color: var(--accent);
}
main {
  padding-top: 32px;
  padding-bottom: 48px;
}
h1 {
  font-size: 34px;
  line-height: 1.2;
  margin: 0 0 12px;
}
h2 {
  font-size: 22px;
  line-height: 1.3;
  margin: 36px 0 8px;
}
h3 {
  font-size: 18px;
  margin: 24px 0 6px;
}
p,
ul,
ol,
table {
  margin: 0 0 14px;
}
li {
  margin-bottom: 6px;
}
.chapo {
  font-size: 20px;
  color: var(--texte-2);
  margin-bottom: 24px;
}
.heros {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 8px;
}
.heros img {
  width: 112px;
  height: 112px;
  flex: none;
}
.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 18px 0 8px;
}
.carte {
  background: var(--panneau);
  border: 1px solid var(--separateur);
  border-radius: 12px;
  padding: 16px 18px;
}
.carte h3 {
  margin-top: 0;
}
.carte p {
  margin: 0;
  color: var(--texte-2);
  font-size: 15px;
}
.etat {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-doux);
  border-radius: 999px;
  padding: 1px 10px;
  margin-bottom: 6px;
}
.encart {
  background: var(--panneau);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 18px 0;
}
.sommaire {
  background: var(--panneau-2);
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 15px;
}
.sommaire ul {
  margin: 6px 0 0;
  padding-left: 20px;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: 7px 10px;
  border-bottom: 1px solid var(--separateur);
}
th {
  color: var(--texte-2);
  font-weight: 600;
}
code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.9em;
  background: var(--panneau-2);
  border-radius: 4px;
  padding: 1px 5px;
}
.date {
  color: var(--texte-3);
  font-style: italic;
}
footer.pied {
  border-top: 1px solid var(--separateur);
  padding-top: 18px;
  padding-bottom: 32px;
  color: var(--texte-3);
  font-size: 14px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
footer.pied a {
  color: var(--texte-2);
}
@media (max-width: 560px) {
  body {
    font-size: 16px;
  }
  h1 {
    font-size: 28px;
  }
  .heros {
    flex-direction: column;
    align-items: flex-start;
  }
  .heros img {
    width: 80px;
    height: 80px;
  }
}
.encart p:last-child,
.carte p:last-child {
  margin-bottom: 0;
}