@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');



HTML {
  width: 100%;
  margin: 0;
  padding: 0;
font-size: 62.5%;  
}

BODY{
	position:relative;
	width: 100%;
  margin: 0;
  padding: 0;	
	font-size: 2rem;  
	color:black;
background: #F0F0F0;
background: linear-gradient(180deg,rgba(240, 240, 240, 1) 0%, rgba(243, 226, 208, 1) 100%);
	line-height:1.4;
font-family: 'Montserrat';
overflow-x:hidden;
	}
IMG{
max-width:100%;
height:auto;
}

*{
box-sizing: border-box;
transition:all 1s ease;
}
/* =========================================================
             HEADER
 ========================================================= */
#bandeaugris{
background: #f0f0f0;
width: 100%; /* 100% de la largeur de l'écran */
padding:15px 20px;
text-align:center;
height:60px;
}
#bandeaugris>div{
max-width:1500px;
position:relative;
margin: 0 auto;
}
#bandeaugris A{
display:inline-block;
padding:0 30px;
color: #413654;
font-size:1.9rem;
text-transform:uppercase;
text-decoration:none;
font-family: 'Space Mono';
}
#rezo{
position:absolute;
top: -5px;
left:0;
}
#rezo A{
padding:0 30px 0 0;
}
div#langues{
position:absolute;
top: -2px;
  right: 30px;
background:white;
border-radius:40px;
}
#langues A{
width:35px;
height:35px;
border-radius:40px;
line-height: 1;
  padding: 10px 0;
}
.langue_active{
background:#eed151;
padding:10px;
border-radius:40px;
}
#menuprincipal{
padding:20px;
background: #EEE6FE;
background: linear-gradient(180deg,rgba(238, 230, 254, 1) 0%, rgba(240, 240, 240, 1) 100%);
text-align:center;
height: 220px;
z-index:10;
width:100%;
}
#menuprincipal.sticky{
position:fixed;
top:0;
padding:10px;
height: 73px;
}

#menuprincipal>div{
margin: 0 auto;
position:relative;
max-width: 1500px;
}
.lienmenu{
display: inline-block;
padding: 10px;
margin: 0 6%;
  text-decoration: none;
  font-size: 2.3rem;
position: relative;
top: -76px;
color: #453365;
font-weight: bold;
letter-spacing: 1px;
}
.cadremenu{
display:none;
z-index: 4;
position:absolute;
left:0;
top:50px;
background: #EEE6FE;
background: linear-gradient(0deg,rgba(238, 230, 254, 1) 0%, rgba(240, 240, 240, 1) 100%);
padding:0 20px;
border-radius:20px;
border:1px solid #453365;
}
.cadremenu A{
display:block;
margin:10px 0;
text-decoration:none;
color: #453365;
font-size:2.2rem;
}
#menuprincipal.sticky .lienmenu{
  font-size: 1.8rem;
top: -26px;
}
#menuprincipal.sticky .logo{
width: 50px;
  display: inline-block;
}
#loupe, #moncompte{
background:white;
padding:10px;
border-radius:40px;
width:60px;
height:60px;
position:absolute;
text-align:center;
top:60px;
left:10px;
}
#moncompte{
right:10px;
left:auto;
}
#menuprincipal.sticky #loupe,#menuprincipal.sticky #moncompte{
width: 40px;
  height: 40px;
  top: 5px;
  }
  
/* =========================================================
            FOOTER
 ========================================================= */
footer{
background:#f0f0f0;
padding:40px 0 0 0;
text-align:center;
}
.footerbas{
position:relative;
text-align:left;
background: #FFFFFF;
background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(248, 234, 221, 1) 100%);
margin:20px 0 0 0;
padding: 50px 4% 70px;
}
.footerbas A{
color:#644f8a;
text-decoration:none;
font-size: 2rem;
  margin: 0 30px;
}
.footerbas img{
position:absolute;
top:10px;
left:4%;
}
/* =========================================================
             HOME PAGE
 ========================================================= */
#slogan{
position: relative;
background:url(/squelettes_v2/images/fond.jpg) no-repeat center center;
height:500px;
width:100vw;
left:calc(50% - 50vw );
}
#slogan p{
padding: 10px 0 0 220px;
  max-width: 1134px;
  color: white;
  font-size: 6rem;
  line-height: 1;
}
#divengage A, #divprojet A{ 
text-decoration:none;
}

#divengage{
background:#eed151;
border-radius:20px;
padding:60px;
text-align:center;
}
#divprojet{
background:#816fa3;
border-radius:20px;
padding:60px;
text-align:center;
}
#divengage span{
display:block;
border-radius:50px;
background:#ffeea8;
color:#5d4488;
text-transform:uppercase;
padding:10px 20px;
margin:5px auto 30px auto;
width:fit-content;

}
#divprojet span{
display:block;
border-radius:50px;
background:#eee6fe;
color:#5d4488;
text-transform:uppercase;
text-decoration:none;
padding:10px 20px;
margin:5px auto 30px auto;
width:fit-content;
}
#divengage .descriptif{
color:#5d4488;
font-size:2rem;
}
#divprojet .descriptif{
color:#eee6fe;
font-size:2rem;
}

.guide{
position:relative;
background:#ffeea8;
padding:60px;
border-radius:20px;
margin:30px 10px 30px 0;
}
.guide:before{
content:"";
position:absolute;
width:calc(100% + 15px);
height:calc(100% + 15px);
background: #5D4488;
background: linear-gradient(180deg,rgba(93, 68, 136, 1) 0%, rgba(232, 207, 104, 1) 100%);
z-index: -1;
  top: -15px;
  left: 0;
  border-radius: 20px;
}

#recherche{
max-width:1250px;
margin:30px auto;
}
#recherche input[type="text"], input[type="search"]{
border:0 none;
background:white;
border-radius:30px;
width:580px;
height:56px;
font-size:1.6rem;
color:#5d4488;
}
#recherche input[type="submit"], #recherche button[type="submit"]{
background:url(/squelettes_v2/images/loupe.png) no-repeat center center #ffeea8;
position:relative;
left:-45px;
top: 22px;
border:0 none;
border-radius:30px;
width:90px;
height:56px;
}
#recherche button[type="submit"] {
  top: 50px;
 }
#recherche select{
margin:30px 20px;
border:0 none;
background:#ffeea8;
border-radius:30px;
width:auto;
height:56px;
font-size:1.6rem;
padding:5px 20px;
color:#5d4488;
}
#recherche #theme{
background:#eed151;
-webkit-box-shadow: 3px -3px 0px 3px #816FA3; 
box-shadow: 3px -3px 0px 3px #816FA3;
}

.menuselect{
display:inline-block;
position: relative;
margin: 0px 40px 30px 0;
background:url(/squelettes_v2/images/chevronbas.png) no-repeat center right #ffeea8;
border-radius:30px;
width:auto;
height:56px;
font-size: 2rem;
padding: 12px 60px 15px 27px;
color: #5d4488;
}
.menuselectjaune{
background:url(/squelettes_v2/images/chevronbas.png) no-repeat center right #eed151;
-webkit-box-shadow: 3px -3px 0px 3px #816FA3; 
box-shadow: 3px -3px 0px 3px #816FA3;
}
.menuselect>div{
display:none;
position:absolute;
width:300px;
background:#ffeea8;
padding:20px;
left:0;
z-index: 5;
top: 57px;
  border-radius: 10px;
}


.cadres_video{
width:21%;
margin:30px 2%;
float:left;
min-height: 360px;
}
.cadres_video .capsule-video{
border-radius:20px;
overflow:hidden;
}
/* =========================================================
           GENERAL
 ========================================================= */
 main{
padding:0 20px;
max-width:1500px;
margin:0 auto;
}
.clear{
clear:both;
}
h1{
color:#5d4488;
font-size:6rem;
text-align:center;
margin: 10px auto 10px auto;
  line-height: 1;
}
h2{
color:#5d4488;
font-size:4rem;
text-align:center;
}
h4{
color:#644f8a;
font-size:2.8rem;
text-align:center;
}
.descriptif_rubrique{
color:#644f8a;
font-size:2.5rem;
text-align:center;
}
.deux_colonnes{
 display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 70px;
  row-gap: 30px;
  padding: 0 0 40px 0;
}
.cellule {
  display: block;
  list-style: none;
  width: 33%;
  float: left;
}
.cellule>div {
position:relative;
margin: 30px 20px;
  display: block;
  border-radius: 10px;
  padding:10px 10px 0 0;
  background: #5D4488;
background: linear-gradient(180deg,rgba(93, 68, 136, 1) 0%, rgba(232, 207, 104, 1) 100%);
}
.tag {
position:absolute;
top:-30px;
transform:rotate(-20deg);
border-radius:50px;
padding:5px 15px;
background:#eed151;
color:white;
font-size:1.8rem;
text-transform:uppercase;
right:20px;
z-index:4;
}
.lien_cellule {
display: flex;
flex-direction: column;
position: relative;
font-size: 1.2rem;
color:#5d4488;
background: #ffeea8;
text-decoration: none;
font-weight: bold;
font-family: 'montserrat';
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
overflow:hidden;
}

.vignette{
line-height: 1;
position:relative;
}
.type2 .lien_cellule  ,.type1 .lien_cellule  {
flex-direction: column-reverse;
}
.type5 .lien_cellule ,.type7 .lien_cellule {
background:#eee6fe;
}
.type1 .lien_cellule {
background:#f0f0f0;
}

.type6 .tag {
left:20px;
right:auto;
background: #fcb05c;
}
.cellule.type6>div{
background: #E8C4C4;
background: linear-gradient(180deg,rgba(232, 196, 196, 1) 0%, rgba(252, 177, 96, 1) 100%);
}

.type1 .tag {
background: #b489ff;
}
.cellule.type1>div{
background: #B489FF;
background: linear-gradient(180deg,rgba(180, 137, 255, 1) 0%, rgba(95, 69, 140, 1) 100%);
}

.type5 .tag {
background: #5d4488;
}

.type7 .tag {
left:20px;
right:auto;
background: #816fa3;
}
.cellule.type7>div{
background: #E8C6C5;
background: linear-gradient(180deg,rgba(232, 198, 197, 1) 0%, rgba(241, 228, 176, 1) 100%);
}
.titre_projet{
color:#5d438a;
font-size:2rem;
padding:30px;
margin:0;
font-weight: bold;
  font-family: 'montserrat';
}
.titre_projet_pad0{
color:#5d4485;
font-size:2rem;
padding:0;
margin:15px 0;
font-weight: bold;
  font-family: 'montserrat';
}