* {
box-sizing: border-box;
/* border-box indique au navigateur de prendre en compte la bordure et le remplissage dans la valeur définie pour la largeur et la hauteur */
}
body, html{
font-size: 15px;
font-family: 'Barlow Condensed', 'Avenir Next LT Pro', Arial, sans-serif;
color: rgb(20, 20, 20);
font-weight: 500;
line-height: 1.3;
margin: 0;
background: #fff;
}
/* @font-face {
font-family: 'caviar_dreamsbold';
src: url('../fonts/Caviar_Dreams_Bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
} */
.mainHeader{
padding-top: 20px;
}
/* https://vincentdubroeucq.com/navigation-mobile-sans-js/ */
.mainNavigation{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.menu{
display: none;
flex-basis: 100%;
padding: 15px;
list-style: none;
margin-top: 0;
}
.menu a:hover{
opacity: 1;
background-color: rgb(30, 154, 215);
border-bottom: 3px solid rgb(90, 90, 90);
color: rgb(248, 249, 250);
}
.menuCheckbox:checked ~ .menu{
display: block;
}
.menuCheckbox{
display: none;
}
.menuToggle{
font-size: 1.8rem;
padding: 15px;
cursor: pointer;
color: rgb(39,153,214);
}
.logo{
width: 300px;
margin-left: -15px;
}
.button1{
display: inline-block;
width: 400px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 15px;
padding-right: 15px;
margin-bottom: 9px;
margin-right: 10px;
border: 0.5px solid rgb(49, 180, 255);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: left;
text-decoration: none;
font-variant: small-caps;
color: rgb(20, 20, 20);
}
h1{
margin-top: 15px;
margin-bottom: 10px;
margin-left: 10px;
color: rgb(139, 139, 139);
font-size: 1.8rem;
}
p{
margin: 10px;
}
blockquote p
{
font-style: italic;
font-family: Georgia, "Times New Roman", serif;
text-align: right;
margin-bottom: 0;
margin-top: 0;
padding: 0;
color: #474747;
font-size: 1.4rem;
position: relative;
bottom: 20px;
}
.imgArticle{
display: none;
}
.tooglePAO{
border-radius: 5px;
padding: 5px;
background-color: rgba(64, 170, 231, 0.7);
margin-left: 50px;
margin-right: 10px;
margin-bottom: 10px;
height: 80px;
overflow: auto;
display: none;
}
.tooglePAO a{
text-decoration: none;
color: rgb(101, 101, 101);
}
.toogleWeb{
border-radius: 5px;
padding: 5px;
background-color: rgba(255, 130, 58, .9);
margin-left: 50px;
margin-right: 10px;
margin-bottom: 10px;
height: 80px;
overflow: auto;
display: none;
}
.toogleWeb a{
text-decoration: none;
color: rgb(101, 101, 101);
}
.toogleOffice{
border-radius: 5px;
padding: 5px;
background-color: rgba(230, 230, 230, 1);
margin-left: 50px;
margin-right: 10px;
margin-bottom: 10px;
height: 80px;
overflow: auto;
display: none;
}
.toogleOffice a{
text-decoration: none;
color: rgb(101, 101, 101);
}
.coursTitre{
margin-top: 0;
margin-bottom: 0;
padding-left: 5px;
color: rgb(255, 255, 255);
}
.coursTitreOffice{
margin-top: 0;
margin-bottom: 0;
padding-left: 5px;
color: rgb(179, 75, 75);
}
.infosCours{
color: rgb(91, 91, 91);
font-weight: 500;
font-size: 1.2rem;
}
.coursDescription{
margin-left: 5px;
margin-top: 0;
margin-bottom: 5px;
color: rgb(73, 68, 68);
}
/* Color Theme Swatches in RGBA */
/*.Beautiful-colorful-cityscape-1-rgba { color: rgba(0, 99, 143, 1); }
.Beautiful-colorful-cityscape-2-rgba { color: rgba(91, 209, 255, 1); }
.Beautiful-colorful-cityscape-3-rgba { color: rgba(60, 161, 207, 1); }
.Beautiful-colorful-cityscape-4-rgba { color: rgba(79, 101, 107, 1); }
.Beautiful-colorful-cityscape-5-rgba { color: rgba(245, 164, 71, 1); }*/
.pao{
border-radius: 5px;
padding: 7px;
background-color: rgba(91, 209, 255, 1);
margin-bottom: 15px;
font-size: 1.05rem;
margin-top: 5px;
}
.pao a{
text-decoration: none;
color: rgb(50, 50, 50);
}
.pao a:hover{
color: black;
}
.web{
border-radius: 5px;
padding: 7px;
background-color: rgba(245, 164, 71, 1);
margin-bottom: 15px;
font-size: 1.05rem;
margin-top: 5px;
}
.web a{
text-decoration: none;
color: rgb(50, 50, 50);
}
.web a:hover{
color: black;
}
.office{
border-radius: 5px;
padding: 7px;
background-color: #EDE7E3;
margin-bottom: 15px;
font-size: 1.05rem;
margin-top: 5px;
}
.office a{
text-decoration: none;
color: rgb(50, 50, 50);
}
.office a:hover{
color: black;
}
.mainFooter{
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(2, [col] auto ) ;
grid-template-rows: repeat(3, [row] auto );
margin-top: 40px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 40px;
color: #333;
height: auto;
text-align: left;
padding-top: 20px;
padding-left: 20px;
padding-bottom: 20px;
border: 1px solid #aaa;
border-radius: 5px;
}
/* https://gridbyexample.com/examples/example9/ */
.legal1{
grid-column: col 1;
grid-row: row 1;
}
.social1{
grid-column: col 2;
grid-row: row 1;
}
.important1{
font-weight: bold;
color: #006BCF;
}
.important2{
font-weight: bold;
}
.legal2{
grid-column: col 1;
grid-row: row 2;
font-weight: bold;
}
.legal3{
grid-column: col 1;
grid-row: row 3;
align-self: center;
}
.legal4{
grid-column: col 2;
grid-row: row 3;
text-decoration: none;
}
.ld, .yt, .fb, .ig, .pt, .contact1{
width: 40px;
padding-right: 10px;
}
@media screen and (min-width: 992px){
.menuToggle, .menuCheckbox{
display: none;
}
.menu{
display: block;
flex-basis: auto;
justify-content: space-around;
padding-top: 30px;
}
.menu li{
display: inline-block;
}
.button1{
width: 150px;
}
.mainNavigation{
flex-wrap: nowrap;
}
body{
width: 992px;
margin: 0 auto;
}
.imgArticle{
display: block;
}
.imgArticle:hover{
border-bottom: 3px solid rgb(90, 90, 90);
}
.article img{
float: left;
margin: 0 10px;
border-radius: 5px;
}
.article h1{
margin-left:240px;
margin-bottom: 0;
}
.pao{
margin-left:240px;
height: 100px;
vertical-align: middle;
}
.web{
margin-left:240px;
height: 100px;
}
.office{
margin-left:240px;
height: 100px;
}
.cours{
margin-left: 240px;
}
}