:root {
  --couleur_fond: #fac9ff;
  --couleur_demifond: #de9aed;
  --couleur_box1: #9802a8;
  --couleur_box2: #4743bf;
  --taillepolice: 40px;
}

body {
  background-color: var(--couleur_fond);
  font-family: Arial, sans-serif;
}

h1 {
  	font-size: 50px;
    margin: 5px;

}

.maincontainer_index {
	height: 95vh;
  display: grid;
  grid-template-rows: 80px 130px auto 100px;
}

#frame_floating {
   display: none;
   position: absolute;
   top: 2%;
/*   left: 2%;*/
	background-color: var(--couleur_fond);
	font-weight: bold;
	font-size: var(--taillepolice);
	color: white;
	padding: 10px;
	border-radius: 30px;
  border-width: 4px;
  border-style: solid;
  border-color: #000000;
  width: 90%;
  height: 90%;
  z-index: 2;
  box-shadow: 10px 10px 10px black;
  animation-name: vole;
  animation-duration: 0.5s;
}

#ptiteframe {
   display: none;
   position: absolute;
   bottom: 10%;
   right: 10%;
    width: 70%;
    height: 70%;
  background-color: var(--couleur_fond);
	padding: 10px;
	border-radius: 30px;
  border-width: 4px;
  border-style: solid;
  border-color: #000000;
  z-index: 2;
  box-shadow: 10px 10px 10px black;
  animation-name: grandi;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;}

@keyframes vole {
  from {left: -1500px;}
  to {left: 2%;}
}

@keyframes grandi {
  from {
    width: 0%;
    height: 0%;
    }
  to {
    width: 75%;
    height: 75%;
    }
}

.maincontainer_addingrtocourses {
	height: 95vh;
  display: grid;
  grid-template-rows: 130px auto 100px;
  animation-name: apparait;
  animation-duration: 2s;
}

.maincontainer_calendrier {
	height: 95vh;
  display: grid;
  grid-template-rows: 250px 250px 250px 250px 250px 250px 250px;
  row_gap: 20px;
  animation-name: apparait;
  animation-duration: 2s;
}

.maincontainer_shotrash {
	height: 95vh;
  display: grid;
  grid-template-rows: 130px auto 100px;
  animation-name: apparait;
  animation-duration: 2s;
}

@keyframes apparait {
  from {opacity: 0;}
  to {opacity: 1;}
}

header {
/*	background-color: var(--couleur_fond); */
	display: flex;
	justify-content: space-between;
}

nav {
  background-color: var(--couleur_demifond);
	display: flex;
	justify-content: space-between;
	padding: 20px;
	border-radius: 20px;
  border-width: 4px;
  border-style: solid;
  border-color: #000000;
}

/*
section {
	background-color: var(--couleur_fond);
}
*/

section.addnewingr {
  display: grid;
  grid-template-rows: 250px 450px auto;
  height: 90%;
  width: 100%;
	row-gap: 20px;
}

section.addnewplat {
  display: grid;
  grid-template-rows: 200px 250px 200px 400px 140px;
  height: 90%;
  width: 100%;
	row-gap: 20px;
}

section.chaudplat {
  display: grid;
  grid-template-rows: 150px 150px 400px 500px;
  height: 90%;
  width: 100%;
	row-gap: 20px;
}

section.addnewray {
  display: grid;
  grid-template-rows: 100px 800px auto;
  height: 90%;
  width: 100%;
	row-gap: 20px;
}

section.addingrtoplat {
  display: grid;
  grid-template-rows: auto 120px;
  height: 100%;
  width: 100%;
	row-gap: 20px;
}

section.addrecette {
  display: grid;
  grid-template-rows: 50px auto;
  height: 100%;
  width: 100%;
	row-gap: 20px;
}

#frame_select {
  width: 80%;
  height: 100px;  
}

#frame_ingr{
  display: flex;
  flex-direction: column;
	font-size: var(--taillepolice);
	row-gap: 20px;
	padding: 10px;
	border-radius: 20px;
  width: 80%;
  height: 380px;
	background-color: var(--couleur_demifond);
  border-width: 1px;
  border-color: black;
  border-style: solid;
  overflow: scroll;
}

select {
	font-size: var(--taillepolice);
	padding: 10px;
	border-radius: 20px;
  width: 80%;  
	background-color: var(--couleur_demifond);
}

textarea {
	font-size: var(--taillepolice);
	padding: 10px;
	border-radius: 20px;
	background-color: var(--couleur_demifond);
  border-width: 1px;
  border-color: black;
  border-style: solid;
  width: 95%;
  height: 95%;
}

.div_vcenter{
	display: flex;
	justify-content: left;
	column-gap: 40px;
}

.div_entetenew{
	display: flex;
  flex-direction: column;
	align-items: center;
	padding: 20px;
}

footer {
  background-color: var(--couleur_demifond);
	display: flex;
	justify-content: space-between;
	padding: 20px;
  align-items: center;
	border-radius: 20px;
  border-width: 4px;
  border-style: solid;
  border-color: #000000;
}

footeri {
  background-color: #f37aff;
	display: flex;
	justify-content: right;
	padding: 20px;
  align-items: flex-end;
}

iframe{
	backgroundColor: transparent;
	border: none;
}

.navimg {
	height:80px;
  opacity: 1;
}

.coorsimg {
	height:60px;
}

.bigimg {
  height:220px;
  animation-name: opacity;
  animation-duration: 1s;
}

.poubimg {
	height:4vh;
}

.poubrouge {
	height:8vh;
  background-color: red;
	border-radius: 30px;
  border-width: 4px;
  border-style: solid;
  border-color: #000000;
  padding: 20px;
  box-shadow: 5px 10px;
  color: black;
  animation-name: shakeAnimation;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

@keyframes shakeAnimation {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.bigeye {
	height:8vh;
  background-color: none;
  border-style: none;
  animation-name: wobbleAnimation;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

@keyframes wow {
  from {height:8vh;}
  to {height:6vh;}
}

@keyframes wobbleAnimation {
  0% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-25px) rotate(-5deg); }
  30% { transform: translateX(20px) rotate(3deg); }
  45% { transform: translateX(-15px) rotate(-3deg); }
  60% { transform: translateX(10px) rotate(2deg); }
  75% { transform: translateX(-5px) rotate(-1deg); }
  100% { transform: translateX(0) rotate(0); }
}

#frame_principale {
	width:95%;
	height:97%;
	padding: 20px;
}

.boxlistcourse {
	display: flex;
  flex-direction: column;
	row-gap: 15px;
}

.rayoncourse {
  display: block;
	font-size: var(--taillepolice);
	padding: 10px;
	border-radius: 30px;
  width: auto;
}

.boxitem {
  display: inline-flex;
  flex-direction: row;
	left:30px;
  background-color: var(--couleur_box1);
	font-size: var(--taillepolice);
	color: white;
  padding-left: 20px;
  padding-right: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
	border-radius: 40px;
	justify-content: left;
	column-gap: 20px;
   vertical-align: bottom; 
}

.boxitemadd {
  display: inline-flex;
  flex-direction: row;
	left:30px;
  background-color: var(--couleur_box2);
	font-size: var(--taillepolice);
	color: white;
  padding-left: 20px;
  padding-right: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
	border-radius: 40px;
	justify-content: left;
	column-gap: 20px;
}

.boxitemingr {
  display: flex;
  flex-direction: row;
	left:30px;
  background-color: var(--couleur_box1);
	font-size: var(--taillepolice);
	color: white;
	padding: 10px;
	border-radius: 30px;
	justify-content: space-between;
	column-gap: 20px;
  }


.goweek {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 70px;
}

.maincontainer_calendrier {
  margin-top: 30px;
  height: 95vh;
  display: grid;
  grid-template-rows: 430px 430px 430px 430px 430px 430px 430px;
}

.caljour {
	font-size: var(--taillepolice);
	padding: 10px;
	border-radius: 20px;
	background-color: var(--couleur_demifond);
  border-width: 1px;
  border-color: black;
  border-style: solid;
  width: 850px;
  height: 360px;
}

.calhead {
  display: flex;
  flex-direction: row;
}

.calheadjour {
  margin-top: -30px;
  font-size: inherit;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 2px;
  padding-bottom: 2px;
	border-radius: 20px;
	background-color: var(--couleur_box1);
  color: white;
  border-width: 1px;
  border-color: black;
  border-style: solid;
  width: 50%;
  height: 50px;
}

.calmois {
  font-size: 30px;
}

.calsec {
  display: Flex;
  flex-direction: column;
	font-size: inherit;
  margin-top: 5px;
  width: 95%;
  height: 160px;
}

.calrow{
  display: grid;
  grid-template-columns: 200px 60px 60px auto 60px;
  width: 95%;
  height: 60px;
}

.calfulldate{
  display: block;
}

.calplat{
  display: inline-block;
  height: 100px;
  width: 100%;
  overflow-x: scroll;
  white-space: nowrap;
}

.jourimg {
	height:50px;
  opacity: 1;
}

.item_courses {
	font-size: var(--taillepolice);
}

.cherch {
	font-size: var(--taillepolice);
	padding: 10px;
	border-radius: 20px;
  width: 90%;  
}

.addd {
	font-size: var(--taillepolice);
	padding: 10px;
	border-radius: 20px;
  width: 600px;  
}

.adddsmall {
	font-size: var(--taillepolice);
	padding: 10px;
	border-radius: 20px;
  width: 80px;  
}

.readonly {
	font-size:60px;
	padding: 20px;
	border-radius: 20px;
  width: auto;  
	background-color: #f37aff;
  text-align: center;
}

button {
	background-color: var(--couleur_demifond);
/*	font-weight: bold;*/
  color: black;
	font-size: var(--taillepolice);
	border-radius: 20px;
  box-shadow: 5px 10px;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
}