* {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: "Poppins-medium";
  src: url("../fonts/Poppins-Medium-75892e797686f8f066978244f022b8e7.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Poppins-bold";
  src: url("../fonts/Poppins-Bold-2e887e8d7715036f60e8b43377122a94.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Poppins-Semibold";
  src: url("../fonts/Poppins-SemiBold-b9e5a91859a493f7cf6d084f74c56fc8.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Poppins-Regular";
  src: url("../fonts/Poppins-Regular-f46d8a0ca765064127b15d321852bda9.woff2") format("woff2");
  font-display: swap;
}

:root {
  --couleur-texte-p: #000000;
  --couleur-primary: #0a3cdd;
  --couleur-accent-un: #ff2e00;
  --couleur-accent-deux: #ffbc0a;
  --couleur-accent-trois: #44af69;
  --couleur-socioculturel: #ffa69e;
  --couleur-famille: var(--couleur-accent-trois);
  --couleur-violet: #CC66CC;
  --couleur-fond: #f9f2f2;
}


body {
  display: flex;
  flex-direction: column;
  background-color: #fffafa;
  align-items: center;
  font-size: 100%;
  color: var(--couleur-primary);
  overflow-x: hidden;
}

main {
  padding: 10% 0;
  width: 85%;
}

h1 {
  font-family: "Poppins-Semibold";
  font-size: calc(1.5rem + 4vw);
  line-height: 1.3;
  color: var(--couleur-primary);
  text-align: center;

}

.h1Souligner {
  border-bottom: red 5px solid;
  padding: 0 5%;
}

h2 {
  font-family: "Poppins-medium";
  font-size: calc(1rem + 2.5vw);
  color: var(--couleur-primary);
  line-height: 2;
}

h3 {
  font-family: "Poppins-bold";
  font-size: calc(1rem + 1.25vw);
}

h4 {
  font-family: "Poppins-Semibold";
  font-size: calc(1rem + 0.5vw);
  color: var(--couleur-accent-un);
}

p {
  font-size: calc(1rem + 0.5vw);
  line-height: 1.5;
  font-family: "Poppins-Regular";
  color: var(--couleur-primary);
  padding: 4% 0;
}

a,
li {
  font-family: "Poppins-medium";
  font-size: 16px;
  line-height: 32px;
}

button {
  font-family: "Poppins-bold";
  border: none;
  font-size: 18px;
}

label {
  font-family: "Poppins-medium";
  border: none;
  font-size: 14px;
}

.titre-footer {
  font-family: "Poppins-medium";
  font-size: calc(1rem + 2.5vw);
  color: var(--couleur-primary);
  line-height: 2;
}
.skip-link {
  position: absolute;
  top: -80px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 1000;
  outline: none;
  text-decoration: none;

  &:focus {
    top: 5px;
    left: 5px;
    box-shadow: 0 0 0 2px #ffd700, 0 0 0 6px #000; 
  }
}

.no-js-warning {
  display: flex;
  color: #000;
  text-align: center;
  margin: 25px;
  padding: 10px;
  font-size: 14px;
}

@media screen and (max-width: 600px) {
  .long-titre {
    font-size: 8vw;
  }
}