@font-face {
  /* Copyright 2020 The Open Sans Project Authors (https://github.com/googlefonts/opensans) */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(''),
       url('/assets/fonts/open-sans-v28-latin-regular.woff2') format('woff2'),
       url('/assets/fonts/open-sans-v28-latin-regular.woff') format('woff');
}

* {
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
}

html {
  height: 100%;
}

body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  color: #292B2C;
  background-color: #F7F7F7;
  text-align: center;
  height: 100%;
  display: flex;
}

[hidden] {
  display: none !important;
}

.access-hidden {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute;
}

main {
  margin: auto;
  padding: 1rem 0 1rem 0;
  width: 90%;
  max-width: 60rem;
}

noscript {
  color: #E00000;
}

h1 {
  font-size: 2rem;
}

#output {
  display: block;
  width: 90%;
  margin: 1rem auto;
  padding: 1rem;
  border-radius: 0.5rem;
  border: 2px solid #292B2C;
  word-wrap: break-word;
}

#output p {
  margin: 0;
}

.success {
  background-color: #5CB85C;
}

.fail {
  background-color: #F57F7F;
}

.warn {
  background-color: #F4C27C;
}

.info {
  background-color: #58A5FD;
}

#input {
  height: 100%;
  width: 15rem;
  max-width: 70%;
  border-radius: 0.2rem 0 0 0.2rem;
  border: 2px solid #292B2C;
  border-right-style: none;
  padding-left: 0.8rem;
}

#input:focus {
  outline: none;
  background-color: #fdf4e8;
}

#submitButton {
  height: 100%;
  width: 5rem;
  max-width: 25%;
  white-space: nowrap;
  color: inherit;
  background-color: #F0AD4E;
  border-radius: 0 0.2rem 0.2rem 0;
  border: 2px solid #292B2C;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  cursor: pointer;
}

#submitButton:hover {
  background-color: #eea33a;
}

#submitButton:active, #submitButton:focus-visible {
  background-color: #ec9822;
}

#inputZone {
  height: 3rem;
  margin: 2rem 0 2rem 0;
  display: flex;
  justify-content: center;
}

#outputURL {
  display: block;
  margin: 0.6rem auto;
  width: 90%;
  border: 1px solid #292B2C;
  text-align: center;
  padding: 0.2rem;
  border-radius: 0.2rem;
}

#outputURL:focus {
  outline: none;
  background-color: #e6f1ff;
}

.explications {
  max-width: 25rem;
  margin: 1.5em auto 1.5em auto;
}

a {
  color: inherit;
}

a:hover {
  text-decoration: none;
}

a:active {
  color: #6C7175;
}

.home-link {
  display: block;
  margin: 1.5em auto 1.5em auto;
  width: fit-content;
}

body:not(.home) .only-home {
  display: none;
}

body.home .except-home {
  display: none;
}

a[target=_blank]::after {
    content: "";
    content: ""/" (ouvre dans un nouvel onglet)";
    width: 1em;
    height: 1em;
    margin: 0 0.05em 0.1em 0.1em;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9 2v1h3.3L6 9.3l.7.7L13 3.7V7h1V2zM4 4c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2V7l-1 1v4c0 .6-.4 1-1 1H4c-.6 0-1-.4-1-1V6c0-.6.4-1 1-1h4l1-1z'/%3E%3C/svg%3E") no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: text-bottom;
}