/* Local system fonts; no remote fonts, imports or tracking. */
:root {
  color-scheme: dark;
  --surface: #080808;
  --text: #ffffff;
  --muted: #dedede;
  --accent: #b83333;
  --accent-hover: #932626;
  --link: #ffb8b8;
  --focus: #ffdf3a;
}
* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  color: var(--text);
  background: #10282b url('./images/tlo.png') center repeat;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
[hidden] { display: none !important; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.25; }
h1 { font-size: 3.25rem; margin-bottom: 1rem; }
h2 { font-size: 2rem; margin-bottom: 2.5rem; }
h3 { font-size: 1.375rem; margin-bottom: 1rem; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-decoration: underline; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .15em; }
button, summary { font: inherit; cursor: pointer; }
button, .button {
  display: inline-block;
  min-height: 2.75rem;
  padding: .75rem 1.25rem;
  border: 2px solid transparent;
  border-radius: .2rem;
  color: #fff;
  background: var(--accent);
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  text-decoration: none;
  white-space: normal;
}
button:hover, .button:hover { background: var(--accent-hover); text-decoration: underline; }
button:disabled { color: #ccc; background: #333; cursor: default; }
a:focus, button:focus, summary:focus, [tabindex='-1']:focus {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px #000;
}
[tabindex='-1'] { scroll-margin-top: 1rem; }
.container { width: calc(100% - 2rem); max-width: 73rem; margin-inline: auto; }
.skip-link {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 10;
  padding: .75rem 1rem;
  max-width: calc(100% - 1.5rem);
  color: #000;
  background: var(--focus);
  font-weight: 700;
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }
.site-header { background: var(--surface); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  padding-block: 1rem;
}
.brand { font-size: 2rem; line-height: 1.2; font-weight: 700; color: var(--text); text-decoration: none; }
.menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu a { display: inline-block; padding: .5rem .25rem; color: var(--text); }
.menu a:hover { color: var(--link); }
.hero {
  display: grid;
  place-items: center;
  min-height: 36rem;
  padding: 4rem 1.25rem;
  background: #206b74 url('./images/technologie.jpg') center / cover no-repeat;
  text-align: center;
}
.hero-copy {
  width: 100%;
  max-width: 48rem;
  padding: 2.5rem 1.5rem;
  border-radius: .25rem;
  color: #fff;
  background: rgba(0, 0, 0, .85);
}
.hero-copy p { font-size: 1.5rem; margin-bottom: 2rem; }
.page-content { background: var(--surface); }
.section { padding: 5rem 2rem; }
.services > h2 { text-align: center; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 3rem 2rem;
}
.services-grid > section { min-width: 0; }
.services-grid h3 { text-align: center; }
.service-icon {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  color: #a52b2b;
  background: #fff;
}
.service-icon svg { width: 2.5rem; height: 2.5rem; fill: none; stroke: currentColor; stroke-width: 2; }
.service-list { padding-left: 1.25rem; margin: 0; color: var(--muted); }
.service-list li + li { margin-top: .4rem; }
.section-action { margin-top: 3rem; text-align: center; }
.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: center;
  gap: 3rem;
  border-top: 1px solid #777;
}
.contact-image { width: 100%; max-width: 30rem; margin-inline: auto; }
.contact-copy { min-width: 0; }
.contact-copy h2 { margin-bottom: 2rem; }
.contact-copy p { margin-bottom: .5rem; }
.email { display: inline-block; font-size: 1.25rem; padding-block: .5rem; }
.site-footer { color: var(--muted); background: var(--surface); border-top: 1px solid #777; }
.footer-inner { padding-block: 1.5rem; }
.footer-inner > p { margin-bottom: .5rem; }
.footer-inner > a { display: inline-block; padding-block: .5rem; }
#readability { margin-top: 1rem; }
summary { width: fit-content; padding: .5rem .25rem; color: var(--text); text-decoration: underline; }
.readability-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding-block: 1rem; }
.high-contrast { --surface: #000; --muted: #fff; --link: #ffdf3a; }
.high-contrast body, .high-contrast .hero { background: #000; }
.high-contrast .hero-copy { background: #000; }
.high-contrast button:not(:disabled), .high-contrast .button { color: #000; background: #ffdf3a; border-color: #ffdf3a; }
.high-contrast .service-icon { color: #000; background: #ffdf3a; }
@media (max-width: 40rem) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  .hero { min-height: 28rem; padding: 2rem 1rem; }
  .hero-copy { padding: 2rem 1rem; }
  .hero-copy p { font-size: 1.25rem; }
  .section { padding: 3rem 1.25rem; }
  .header-inner { gap: 1rem; }
  .menu { gap: .25rem .75rem; }
}
@media (forced-colors: active) {
  a:focus, button:focus, summary:focus, [tabindex='-1']:focus { outline-color: Highlight; }
  .button, button { border-color: ButtonText; }
}