body {/*la mise en forme de l'arrière plan :
..................................................................*/
  background-color: black;
  margin: none;
  border: none;
  background-image: url("../images/arriere-plan.png");
  background-size: cover; /* cover — le navigateur redimensionne l'image pour que tout le fond soit couvert, 
  en conservant le format de l'image. La plupart du temps, une partie de l'image est en dehors de la boîte*/
  background-origin: border-box; /* l'origine de l'arrière plan commence à la bordure de la fenêtre*/
  background-repeat: no-repeat;
  background-position: top right;
  background-attachment: fixed; /* L'arrière-plan ne défile pas lorsqu'on fait défiler ou la page ou le contenu de l'élément */

}

.container { /* = partie haute avec image de fond (=/= pied de page) ........................*/
  display: grid;
  grid-template-areas: 
  "poitevin manifeste . ."
  "collectif manifeste chapelloise chapelloise"
  "logo logo logo fourchefiere";
  grid-template-columns: 400px 500px 252px 274px;
  grid-template-rows: 50px 400px 400px;

}


.le-collectif {
  grid-area: collectif;
  position: relative;
  transform: rotate(0.75turn);
  left: 72%;
  bottom: 15%;

  /* pour animation : modifier orientation de l'image source 
  (apparemment impossible d'animer & modifier orientation en CSS) */

}

.le-manifeste {
  grid-area: manifeste;

 /* ANIMATION COUR 2 RECRE : flotement de haut en bas, pendant 5 sec...............................
 .......................
  animation-name: floating;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.68,-0.55,.27,1.55); */
  
  position: relative;
  left: 32%;
  bottom: -5%;
}

.fourchefiere {
  grid-area: fourchefiere; 
  position: relative;
  left: 44%;
  bottom: -20%;
}

.logo {
  grid-area: logo;
  position: relative;
  bottom: -7%;
}

.chapelloise {
  grid-area: chapelloise;
  position: relative;
  left: 25%;
  bottom: -30%;
}

.poitevin {
  grid-area: poitevin;
  position:relative;
  left: 5%;
  bottom: -20%;
}

@keyframes floating {
    0% { transform: translatey(0px); }
    50%  { transform: translatey(9px); }
    100%   { transform: translatey(0px); }    
}


footer {
  margin: 0px;
  padding: 30px;
  padding-top: 40px;
  background-color: #e8e5e3;
  text-align: center;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  text-decoration: none;
  display: grid;
  grid-template-areas: 
  "mentions mentions mentions mentions mentions"
  ". insta contact plan .";
  grid-template-columns: 532px 100px 100px 100px 532px;
  grid-template-rows: 130px 50px;

}

.mentions {
grid-area: mentions;

}

/* Trouver comment enlever la mise en forme auto des liens en bleu souligné ---> noir non souligné ?
...............................*/

.insta {
  grid-area: insta;
}

.contact {
  grid-area: contact;
}

.plan {
  grid-area: plan;
  border-right-color: #b41e00;
}


.parlanjhe {
  color: #b41e00;
  text-align: center;
}