:root {
  --couleur-principale: #0079d0;
  --couleur-principale-attenuee: #eaf5ff;
}

body {
  min-width: unset;
}

main {
  border-top: none;
  display: block;
}

#home {
  color: var(--text-default-grey);
  --titre-font-size: 1.75rem;
  --titre-line-height: 2.25rem;
  --titre-margin-block: 0 0.75rem;

  @media (min-width: 992px) {
    --titre-font-size: 2rem;
    --titre-line-height: 2.5rem;
  }

  .bloc-contenu {
    padding: 24px 16px;
  }

  lab-anssi-presentation-anssi {
    --brique-presentation-anssi-titre-couleur: var(--text-title-grey);
  }

  .hero {
    padding-block: 3rem;

    h2 {
      margin-top: 0.75rem;
      font-size: 1.125rem;
      line-height: 1.75rem;
    }

    .conteneur-liens {
      display: flex;
      flex-direction: column;
      margin-block: 1.5rem;
      gap: 1rem;
    }

    img {
      width: 100%;
      max-width: 494px;
      border-radius: 5px;
    }
  }

  .conteneur-titre {
    text-align: left;
  }

  #carrousel-presentation {
    background-color: var(--background-alt-blue-france);
    padding-bottom: 1rem;
    margin-bottom: -24px;

    .conteneur-carrousel,
    .conteneur-liens-carrousel {
      transform: translateY(-24px);
    }

    dsfr-tile {
      width: calc(100vw - (32px + 16px));
      max-width: 384px;
      flex-shrink: 0;
      scroll-snap-align: center;

      &:first-of-type {
        margin-left: 16px;
      }

      &:last-of-type {
        margin-right: 16px;
      }
    }
  }

  #trois-etapes {
    display: flex;
    flex-direction: column;
    padding-block: 3.5rem;

    h3 {
      margin-bottom: 0.5rem;
    }

    p {
      text-align: left;
      font-size: 1rem;
      font-style: normal;
      line-height: 1.5rem;
      max-width: 716px;
    }

    #cartes {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-block: 2rem;
      text-align: left;
      align-items: stretch;
    }

    dsfr-tag {
      margin-bottom: 12px;
    }
  }

  .conteneur-carrousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 32px;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .conteneur-liens-carrousel {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
}

#home .fond-couleur-principale {
  background-color: var(--background-flat-blue-france-lab);
  color: var(--text-inverted-grey);
}

#home .fond-couleur-principale-attenuee {
  background-color: var(--background-alt-blue-france);
}

#home h1 {
  margin: 8px 0 0;
  text-align: left;
  font-size: 2.5rem;
  line-height: 3rem;
}

#home h2 {
  margin: 24px 0 0;
  font-weight: normal;
}

#home h3 {
  font-size: 1.75rem;
  line-height: 2.25rem;
  font-weight: 700;
  margin: 24px 0 0;
  color: var(--text-title-grey);
}

#home .alignement-gauche {
  text-align: left;
}

#home a {
  background: white;
  padding: 10px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--couleur-principale);
  font-weight: 500;
  margin: 24px 0;
}

#home a:hover {
  background: #f1f5f9;
  color: #0c5c98;
}

#home a:active {
  background: #ffffff;
  color: #08416a;
}

#home a.secondaire {
  background: transparent;
  border: 1px solid white;
  color: white;
}

#home a.secondaire:hover {
  background: #f1f5f9;
  color: #0c5c98;
}

#home a.secondaire:active {
  background: #ffffff;
  color: #08416a;
}

#home a.principal {
  background: var(--couleur-principale);
  color: white;
}

#home a.principal:hover {
  background: #0c5c98;
}

#home a.principal:active {
  background: #08416a;
}

#home .tres-grande-marge-basse {
  margin-bottom: 56px;
}

#home .grande-marge-basse {
  margin-bottom: 40px;
}

#home .moyenne-marge-basse {
  margin-bottom: 32px;
}

#home .petite-marge-basse {
  margin-bottom: 24px;
}

#home .tres-petite-marge-basse {
  margin-bottom: 16px;
}

#home .sans-padding-bas {
  padding-bottom: 0;
}

#home .moyenne-police {
  font-size: 1.4em;
}

#home .couleur-principale {
  color: var(--couleur-principale);
}

#home .couleur-principale-foncee {
  color: #0c5c98;
}

#home p {
  margin: 0;
}

#home .conteneur-titre {
  display: flex;
  flex-direction: column-reverse;
}

#home .conteneur-logo-partenaire {
  display: flex;
  flex-direction: row;
  gap: 24px;
}

#home {
  .conteneur-flex-photos-equipe {
    display: flex;
    flex-direction: column-reverse;
    gap: 2rem;
    padding-block: 2rem;
    box-sizing: content-box;
  }

  .conteneur-photos-equipe {
    img {
      max-width: 100%;
    }
  }

  .contenu-texte-photos-equipe {
    padding-block-end: 0.5rem;

    h3 {
      margin-block: 0 0.75rem;
    }

    p {
      font-size: 1rem;
      line-height: 1.5rem;
      margin-block-end: 1.5rem;
    }
  }
}

#home .decalage-bas {
  transform: translateY(6px);
}

#home {
  .resultats {
    padding-block: 3.5rem;

    h3 {
      margin-block: 0;
    }

    dsfr-button {
      margin-block-end: 1rem;
    }
  }

  .chiffres-cle {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-block: 3rem;
  }

  .chiffre-cle {
    h4 {
      font-size: 2rem;
      line-height: 2.5rem;
      margin-block: 0 1rem;
      color: var(--text-title-grey);
    }

    p {
      font-size: 1rem;
      line-height: 1.5rem;
    }
  }
}

#home .conteneur-temoignages {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#home .temoignage h4 {
  margin: 8px 0 0;
  font-size: 1.4em;
}

#home .temoignage h5 {
  margin: 16px 0 0;
  font-size: 1em;
  color: #0c5c98;
}

#home .temoignage h6 {
  margin: 4px 0 0;
  color: #666666;
  font-style: italic;
  font-weight: normal;
}

#home .titre-etroit {
  padding: 0 16px;
}

#home .icone-lien-externe::before {
  content: '';
  width: 16px;
  height: 16px;
  background-image: url('/statique/assets/images/home/icone_lien_externe.svg');
  background-repeat: no-repeat;
  margin-right: 8px;
}

#home .temoignage {
  min-width: calc(100vw - 32px);
  width: calc(100vw - 32px);
  flex-shrink: 0;
  scroll-snap-align: center;
}

#home .taille-borne-242 {
  max-width: 242px;
}

#home #illustration-collaboratif {
  max-width: 384px;
  width: 100%;
}

#home video {
  width: 100%;
}

#home {
  .bloc-impact-national {
    padding-block: 3.5rem;
    text-align: center;

    h3 {
      color: inherit;
      margin-block: 0 0.75rem;
    }

    p {
      font-size: 1rem;
      line-height: 1.5rem;
      margin-bottom: 1.5rem;
    }

    img {
      margin-top: 40px;
      width: 100%;
      max-width: 340px;
    }
  }
}

#home .fond-couleur-principale-attenuee h3.police-noire {
  color: black;
}

#home #resultats dsfr-button {
  width: 100%;
}