@font-face {
  font-family: "Quicksand";
  src:
    url("/fonts/quicksand/Quicksand-Bold.woff2") format("woff2"),
    url("/fonts/quicksand/Quicksand-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Quicksand";
  src:
    url("/fonts/quicksand/Quicksand-Regular.woff2") format("woff2"),
    url("/fonts/quicksand/Quicksand-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

:root {
    --couleur-gris-clair : #f4f6f9;
    --couleur-gris-fonce : #d6dbe1;
    --couleur-gris-plus-fonce : #a2a4a5;

    --couleur-vert-clair : #d1fae5; 
    --couleur-vert-fonce : #065f46;
    --couleur-vert-plus-fonce : #0b4244;

    --couleur-rouge : #dc3545;
    --couleur-rouge-clair : #fee2e2;
    --couleur-rouge-fonce : #991b1b;

    --couleur-noire : #000000;
    --couleur-blanche :  #ffffff;
    --couleur-noire-leger : rgba(0, 0, 0, 0.5);

    --texte-small : 1rem;
    --texte-medium : 1.2rem;
    --texte-large : 2rem;
    --texte-extra-large : 2.5rem;

    --epaisseur-gras : 700;
    --epaisseur-normal : 400;
}

body {
  font-family: "Quicksand", Arial, Helvetica, sans-serif;
  font-weight: var(--epaisseur-normal);
  font-size: var(--texte-small);
  background-color:  var(--couleur-gris-clair);
}

.lien-deconnexion {
  text-align: right;
  padding: 1rem;
  background-color: var(--couleur-vert-plus-fonce);
}

.lien-deconnexion a {
    color: var(--couleur-blanche);
}

main {
  padding-inline: 1rem;
}

h1 {
    text-align: center;
    color: var(--couleur-noire);
    font-size: var(--texte-medium);
}

@media(min-width: 600px) {
    h1 {
        font-size: var(--texte-large);
    }   
}

.container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-block: 10rem;
  padding-bottom: 2rem;
}

nav {
  position: fixed;
  top: 0;
  width: 100%;
}

.feedback {
  text-align: center;
  padding: 1rem;
}

.feedback.valide {
  background-color: var(--couleur-vert-clair);
  color: var(--couleur-vert-fonce);
}

.feedback.invalide {
    background-color: var(--couleur-rouge-clair);
    color: var(--couleur-rouge-fonce);
}

.feedback.chargement {
    background-color: var(--couleur-gris-fonce);
    color: var(--couleur-noire);
    animation: blink 1s infinite;
}

@keyframes blink {
  50% { opacity: 0.5; }
}

.lien {
  text-align: center;
  color: var(--couleur-vert-fonce);
}

.cacher {
  opacity : 0;
}

.overlay {
  position: fixed;
  top : 0;
  left : 0;
  width: 100vw;
  height: 100vh;
  background-color : var(--couleur-noire-leger);

  display: none;
}

.overlay__contenu {
  width: 90%;
  max-width: 400px;

  background-color: var(--couleur-blanche);
  padding-block: 4rem;
  padding-inline: 1rem;
  border-radius: 8px;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.overlay__contenu p{
  text-align: center;
  font-weight: var(--epaisseur-gras);
}

.affiche-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}