/* Réinitialisation CSS — https://ateliers.esad-pyrenees.fr/web/pages/ressources/css/reset/ */
*, *::before, *::after { box-sizing: border-box; } body { line-height: 1.45; -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; height: auto; max-width: 100%; } input, button, textarea, select { font: inherit; margin: 0; } iframe { border: 0; }

:root {
  --navwidth: 50px;
}
/* activation de “scroll snap” */
html, body {
  height: 100%;
  margin: 0;
}
html {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}

/* “smooth” scroll */
html { scroll-behavior: smooth; }

article {
  /* oblligatoire pour “scroll snap” */
  scroll-snap-align: start;

  /* hauteur fixe et largeur qui tient compte de la nav */
  height: 100vh;
  width: calc(100% - var(--navwidth));

  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
}























body{
    margin-left: 8%;
    margin-top: 3em;
}

.cases {
display: grid; 
  grid-template-columns: 1fr ;
  grid-template-rows: repeat(3, 1fr);
  gap: 2em 3em;
  justify-content: center;
}

.cases img {
width: 70%;
height: auto;
border: 2.5px solid #001664;
border-radius: 1em;
}


.blocbouton {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 90px;
  padding-right: 90px;
  
}




.fou {
  position: relative;
  cursor: pointer;
  rotate: -90deg;
  text-decoration: none;
    padding-bottom: 10em;
}

.fou path {
    animation: swim 2s infinite alternate;
}

.folle {
  position: relative;
  cursor: pointer;
  rotate: 90deg;
  text-decoration: none;
  padding-bottom: 10em;
}

.folle path {
    animation: swim 2s infinite alternate;
}

@keyframes swim {

  100% {
    d: path("m 9,47.4 h 1.2 c 0,0 2.3,-5.3 9.1,-11 v -2.1 c 0,0 -5.5,2.6 -8.2,5.3 0,-7 -2.9,-9.7 0.1,-20.7 C 13.8,9.4 11.1,6.2 11.1,0 10.2,0 9.3,0 8.4,0 c 0,6.2 2,9.6 -0.1,19 -3,13.4 0,13.5 0,20.5 0,0 -2.2,-2.5 -8.3,-5.3 v 2 c 0,0.1 6.8,5.8 9,11.2 z")
  }
}