/* CSS Document */
:root { 
--hauteur-menu: 60px;
}
* {
  margin: 0px;
  padding: 0px;
  font-family: Montserrat, sans-serif;
}
nav {
  width: 100%;
  font-size: 15px;
  position:static;
  top: 0;
}
nav > ul {
  display: flex;
  text-align: center;
  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.3);
  height: var(--hauteur-menu);
}
 
nav ul {
  list-style-type: none;
}

nav > ul > li {
  background-color: white;
  position: relative;
  height: 100%;
  flex: 1;
}
nav > ul > li > a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

li a {
  text-decoration: none;
  color: black;
}

.menu-deroulant > a:after{
  content: '❯';
  font-size: 15px;
  margin-left: 7px;
  display: inline-block;
}
.sous-menu {
  margin-top: var(--hauteur-menu);
  width: 100%;
  text-align: left;
  background-color: white;
  border-radius: 2px;
  overflow: hidden;
  max-height: 0;
}

.sous-menu > li > a {
  height: 50px;
  padding-left: 20px;
  width: 100%;
  align-items: center;
  display: flex;
}
nav > ul > li:hover > a{
  color: #2169EC;
}
.sous-menu > li:hover {
  background-color: rgba(33, 105, 236, 0.3);
}

.sous-menu > li:hover > a {
  color: white;
}
@keyframes rotationFleche {
  0% {
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(90deg);
  }
}
.menu-deroulant:hover > a:after{
  animation: rotationFleche 0.2s linear forwards;
}
@keyframes apparitionSousMenu {
  0% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0);
    border-top: 3px solid #2169EC;
  }
  30% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
  100% {
    max-height: 50em;
    border-top: 3px solid #2169EC;
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
}
.menu-deroulant:hover > .sous-menu {
  animation: apparitionSousMenu 1s forwards;
}
h1{color:#1B00CC;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-style:oblique;
    font-variant:normal;
    font-weight: normal;
    font-size: 40px;
    text-align: center;
}
h2{
    color: #1B00CC;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 40px;
    text-align: center;
}
h3{color: #1B00CC;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 20px;
    text-align: left;
}
h4{color:aliceblue;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-style:oblique;
    font-variant:normal;
    font-weight: normal;
    font-size: 40px;
    text-align: center;
}
#background01{
    background-image: url("../2022/07/Formation individuelle.jpg");
    background-size: cover;
    display: flex;
    align-items:flex-end;
    justify-content: center;
    border: 2px solid #FFFFFF;
}
#background01:hover {border: 4px solid #000000;}
#background02{
    background-image: url("../2022/07/Formation groupe.jpg");
    background-size: cover;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border: 2px solid #FFFFFF;
		}
#background02:hover {border: 4px solid #000000;}
#background03{
    background-image: url("../2022/07/Accompagnement marche.jpg");
    background-size: cover;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border: 2px solid #FFFFFF;
		}
#background03:hover {border: 4px solid #000000;}
#background04{
    background-image: url("../2022/07/plan.jpg");
    background-size: cover;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border: 2px solid #FFFFFF;
		}
#background04:hover {border: 4px solid #000000;}
#background11{
    background-image: url("../2022/07/Background11.jpg");
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
		}
#background11:hover {border: 4px solid #000000;}
#background12{
    background-image: url("../2022/07/Background 12.jpg");
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
		}
#background12:hover {border: 4px solid #000000;}
#background21{
    background-image: url("../2022/07/Background 21.jpg");
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
		}
#background21:hover {border: 4px solid #000000;}
#background22{
    background-image: url("../2022/07/Background 22.jpg");
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
		}
#background22:hover {border: 4px solid #000000;}
#background23{
    background-image: url("../2022/07/Background 23.jpg");
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
		}
#background23:hover {border: 4px solid #000000;}
#background221{
    background-image: url("../2022/07/BA125.jfif");
    background-size: cover;
	background-position:center;
    display: block;
    align-items:center;
    justify-content: center;
    border: 2px solid #FFFFFF;
		}
#background222{
    background-image: url("../2022/07/region ARA.jpg");
    background-size: cover;
	background-position:center;
    display:block;
    align-items:center;
    justify-content: center;
    border: 2px solid #FFFFFF;
		}
#background223{
    background-image: url("../2022/07/Lyon.jpg");
    background-size: cover;
    display: block;
    align-items:center;
    justify-content: center;
    border: 2px solid #FFFFFF;
		}
#background224{
    background-image: url("../2022/07/digne-les-bains03_cdv-ville-de-dignelesbains.jpg");
    background-size: cover;
    display: block;
    align-items:center;
    justify-content: center;
    border: 2px solid #FFFFFF;
		}
#background225{
    background-image: url("../2022/07/Dossier-Bien-coordonner-chantier-ville-F.jpg");
     background-size: cover;
    display: block;
    align-items:center;
    justify-content: center;
    border: 2px solid #FFFFFF;
}
#background1reg{
    background-blend-mode:overlay;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
    background-image: url("../2022/07/Background reg.jpg");
		}
#background-video{
    width: 100%;
  height: 80%;
  object-fit: contain;
  position:absolute;
  left: 0;
  right: 0;
  top: -10%;
  bottom: 0;
  z-index: -1;

	}
#background1cond{
    background-blend-mode: overlay;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
    background-image: url("../2022/07/Background OP.jpg");
}
#background1super{
    background-blend-mode: overlay;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
    background-image: url("../2022/07/Background super.jpg");
}
#background1marche{
    background-blend-mode: overlay;
    background-position:left;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
    background-image: url("../2022/07/Background marches publics.jpg");
}
#background1incendie{
    background-blend-mode: overlay;
    background-position:bottom;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
    background-image: url("../2022/07/Background incendie.jpg");
}
#background1formindiv{
    background-blend-mode: overlay;
    background-position:center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
    background-image: url("../2022/07/Background form indiv.jpg");
}
#background1formgrp{
    background-blend-mode: overlay;
    background-position:center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
    background-image: url("../2022/07/Background form groupe.jpeg");
}
#background1acc{
    background-blend-mode: overlay;
    background-position:center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
    background-image: url("../2022/07/Background Acc.jpg");
}
#background1cons{
    background-blend-mode: overlay;
    background-position:center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
    background-image: url("../2022/07/background1cons.jpg");
}
#background1pre{
    background-blend-mode: overlay;
    background-position:0px -50px;
	background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
    background-image: url("../2022/07/Background index.jpeg");
}
.text-center{    
	background-color: hsla(0,0%,100%,0.70);
	color:black;
    padding-left: 20px;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
	text-decoration: underline
}
.text-center1{
 	background-color: hsla(0,0%,100%,0.70);
	padding: 15px;
	text-align:center;
}
.text-left1{
 	background-color: hsla(0,0%,100%,0.70);
	padding: 15px;
	text-align:left;}
.encadrer-un-contenu{ 
	border: 1px solid hsla(239,98%,32%,1.00);
	padding-right: 20%;
	padding-left: 20%;
}
.image_logo{
    background-repeat: no-repeat;
    background-image: url("../2022/07/logo-lc-formation.png");
    background-size: contain;
    width: 30%;
    height: 130%;
    magin: 0;
    padding:0;
}
.image_logo_pied{
    background-repeat: no-repeat;
    background-image: url("../2022/07/logo-lc-formation.png");
    background-size: contain;
	background-position:bottom;
    width: 100px;
    height: 100px;   
}
.row27{
	display:flex;
	justify-content:space-around;
}
.row28{
	display:flex;
	justify-content: space-between;
	text-justify: auto;
}
.row_pied{
	display:flex;
	background: linear-gradient(180deg,#DFDFDF,white);
	border-radius: 10px;
	justify-content:space-between;
	height: 100%;
	padding-top: 20px;
	}
.text-pied{
	color:hsla(246,100%,48%,1.00);
}
.text-pied:hover{
	color:black;
	text-decoration:underline;
}
.diplome{
	display: flex;
	flex-direction: column;
}
.row .diplome {
	display: flex;
	flex-direction: row;
	flex-flow:column wrap;
	align-items: left;
	width: 30%;
}
section h1 {
	text-align: center;
}
body {
	padding: 5px;
}
.text-left{
	display:flex;
	position:absolute;
	padding-left: 20%;
}
button:hover {
	background-color:black;
	color:aliceblue;
}
table, caption, th, td {

border: 1px solid black;
  border-collapse: collapse;

}
caption, th, td {

padding: 8px;

}
th {

background-color:hsla(0,0%,69%,1.00);

}
.container_tarif{
	display:flex;
	flex-direction: column;
	align-items: center;
	
}
.titre{
	display:flex;
	flex-direction:column;
	position:right;
}

@media  screen and (max-width: 768px){     /* format tablette */
    .photopage img{
        width: 150px;
		height: auto;
  
	}
	nav {
		font-size: 12px;
	}
	header h1{
		font-size:35px;
	}
	section h2{
		font-size: 30px;
	}
	section h3{
		font-size:18px;
	}
	section {
		font-size: 13px;
	
	}
	.text-center1 strong{
		font-size: 13px;
	}
	.row28 img{
		width: 150px;
		height: auto;
	}
	.row27 img{
		width: 150px;
		height: auto;
	}
	.row img{
		width: 150px;
		height: auto;
	}
	.container_tableau {
		font-size: 12px;
	}
	.row .map iframe{
		width: 400px;
		height: 300px;
	}
}
@media  screen and (max-width : 481px){/* format mobile */
	.photopage img{
       width: 100px;
		height: auto;
  }
	nav {
		font-size: 10px;
	}
	header h1{
		font-size:30px;
	}
	section h2{
		font-size: 25px;
	}
	section h3{
		font-size:15px;
	}
	section {
		font-size: 10px;
	}
	div.text-center1 {
		visibility:hidden ;
	}
	.row28 img{
		width: 100px;
		height: auto;
	}
		.row27 img{
		width: 100px;
		height: auto;
	}
	.container_tableau {
		font-size: 10px;
	}
	.row .map iframe{
		width: 300px;
		height: 200px;
	}
}