/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 26 sept. 2020, 23:06:50
    Author     : arthurhohlmann
*/


*, ::before, ::after {
    box-sizing: border-box; 
    margin:0;
    padding:0;
}
p {
  
  
  font-size:30px;
  font-family:futura, monospace;
  margin-left:20px;
  color:#1d1d1f;
  
}

a {
    color:black;
}
a:hover {
    color:#ffd600;
}

body
{
margin:0 auto;
width: 100%;
overflow-x: hidden;
}

/*
body {
    background-color: #ADD8E6;
    font-family: Helvetica, Arial, sans-serif;
    border:1px;
    border:solid;
    margin-left:7%;
    margin-right:7%;
}
*/

img{
    display:block;
    margin: 0 auto;
}


h1 {
  text-align:center;
  font-size:80px;  
  border: 4px;
  border-style:solid;
  font-family:'denk one','viga'; 
  background-color:whitesmoke;
  line-height: 0.75;
  letter-spacing:-.075em;
  box-shadow: 4px 4px rgba(0,0,0,.9), inset 2px 2px #fff;
  
  padding:24px;
  
  margin-left:15%; 
  margin-right:15%;
  margin-top:0.50em;
}

html{
    background-color: white;
    width:100%;
}

.logo img {
    width: 400px;
    margin-bottom: 0.50em;
    margin-top:20px;
}

.bannière img {
    width: 600px;
    margin-bottom: 0.50em;
    margin-top:0.50em;
}



ol {
    font-family:monospace;
    font-size:20px;
}


.intro {
    margin-top:20px;
    align-items:center;
    text-align:center;
    margin-left:10%;
    margin-right:10%;
    display:block;
}

.intro img {
    width:120px;
    margin-bottom:0px;
    margin:10px;
    display:inline;
}

hr {
   
    height:3px;
    background-color:black;
    border:none;
    margin-left:20%;
    margin-right:20%;
    margin-bottom: 20px;
    
}
    
h2 {
    text-align:center;
    font-family:'denk one','viga',monospace;
    font-size:40px;
        
}

.intro p {
    font-family:futura;
    display:inline;
}


.container-onglet ul {
    margin:0;
    padding:0;
    margin-left:2%; 
}

.container-onglet li {
    list-style:none;
    float:left;
    position:relative;
    width:16%;  /*problème ici */
    box-shadow:0 0 10px rgba(0,0,0,0.5);
    border:2px solid black;
}

.container-onglet ul li a {
    height:55px;
    text-align:center;
    z-index:2;
    display:block;
    background-color:#c1dcfe; 
    justify-content:center;
    text-decoration:none;
    color:black;
    font-family:'denk one';
    padding:8px;
    font-size: 15px;
    align-items:center;
    
}

.container-onglet ul ul{
    position:absolute;
    visibility:hidden;
    top:55px;
      /*problème ici */
    height:18px;
    width:600%;
    display:grid;
    
}

.container-onglet ul li:hover ul {
    visibility:visible;
}

.container-onglet ul li a:hover{
    background-color:#7e84cb;
    position:relative;
    color:#ffd600;
    
}

.container-onglet ul li ul a:hover{
    color:black;
    background-color:#7e84cb;
    color:#ffd600;
}


/*
.container-onglet {
    border-radius:3px;
    height:60px;
    box-shadow:0 0 10px rgba(0,0,0,0.5);
    width:80%;
    margin-left:10%;
    margin-top:50px;
    margin-bottom:20px;
    border-style:solid;
    text-align:center;
    display:flex;
    font-family:'denk one','viga',monospace;
    
}
*/

.container-onglet {
    height:45px;
    width:80%;
    display:inline;
    margin-top:50px;
    margin-bottom:20px;
    justify-content:center;
    text-align:center;
    
    
    
}
.container-onglet ul li ul li a {
    position:relative;
    height:44px;
}
/*
footer {
    display:grid;
    grid-template-columns: 1fr 3fr;
}

footer img {
    width:100px;
    bottom:1px;
}*/
footer ul {
    width:24%;
    display:flex;
    text-align:center;
    margin-top:10px;
    margin-left:38%;
    margin-right:38%;
}

footer ul li{ 
    width:50px;
    list-style:none;
    margin:10px;
    font-size:25px;
    transition:0.4s; 
    border-radius:100%;
    box-shadow:0 0 10px rgba(0,0,0,0.5);
}

footer ul li a{
    width: 50px;
    padding:10px;
    justify-content:center;

    display:block;
    color:white;
}

footer ul li a:hover{
    color:white;
}

.liensfooter{
    display: inline-block;
    text-align: center;
    font-size: 200px;
    margin-left:42%;
}

footer ul li:nth-child(5){
    background-color:#3b5999;
}

footer ul li:nth-child(4){
    background-color:#55acee;
} 

footer ul li:nth-child(1){
    background-color:#e4405f;
}

footer ul li:nth-child(2){
    background-color:#010101; 
}

footer ul li:nth-child(3){
    background-color:#0077B5;
}

footer ul li:hover{
    transform:translateY(-10px);
    box-shadow:0 10px 10px rgba(255,205,205,.2);  
}

.gallery {
    margin:30px 6%;
    display:grid;
    width:86%;
    grid-gap:30px;
    grid-template-columns: repeat(auto-fill, minmax(175px, 230px));
    grid-auto-rows:230px;
    text-align:center;
    align-content:center;
    justify-content:center;
    grid-auto-flow:dense;
}

.item {
    border:solid 3px black;
    box-shadow:3px 3px rgba(0,0,0,0.9);
    
}

.gallery :nth-child(4n){
    grid-column:span 2;
    grid-row:span 2;
}

.item:hover {
    transform:translateY(-10px);
    transform:scale(1.2,1.2); 
    transition:0.4s;
}
.info {
    background-color:rgba(0,0,0,0.4);
    text-align:start;
    height:34%;
    visibility:hidden;
}

.item:hover .info{
    visibility:visible;
}

.info p {
    font-size:12px;
    margin-left:0px;
    display:inline;
    color:#fff;
}
.info h3 {
    font-size:13px;
    color:#fff;
    
}

.it1 {
    background-image:url(img/IngeEtude.JPG); 
    background-size:cover;
}
.it2 {
    background-image:url(img/Hypatie.JPG);
    background-size:cover;
}
.it3 {
    background-image:url(img/MemoireSementique1.JPG);
    background-size:cover;
}
.it4 {
    background-image:url(img/DataEngineer.jpg);
    background-size:cover;
}
.it5 {
    background-image:url(img/MaeJemison.JPG);
    background-size:cover;
}
.it6 {
    background-image:url(img/lillianMollerGilbreth.jpg);
    background-size:cover;
}
.it7 {
    background-image:url(img/Margot_Bastin.jpg);
    background-size:cover;
}
.it8 {
    background-image:url(img/HedyLamarr.jpg);
    background-size:cover;
}
.it9 {
    background-image:url(img/Camille_Allegre.jpg);
    background-size:cover;
}
.it10 {
    background-image:url(img/ingealitéCovd19.jpg);
    background-size:cover;
}
.it11 {
    background-image:url(img/Elise_Goetz.jpg);
    background-size:cover;
}
.it12 {
    background-image:url(img/GraceHopper2019.jpg);
    background-size:cover;
}
.it13 {
    background-image:url(img/Rosalind\ Franklin.jpg);
    background-size:cover;
}
.it14 {
    background-image:url(img/uneFemme.jpg);
    background-size:cover;
}
.it15 {
    background-image:url(img/Niron_Duron.jpg);
    background-size:cover;
}
.it16 {
    background-image:url(img/KatherineJohnson.jpg);
    background-size:cover;
}
.it17 {
    background-image:url(img/femmesDeLinformatique.jpg);
    background-size:cover;
}
.it18 {
    background-image:url(img/IngenieureLogicielle.jpg);
    background-size:cover;
}
.it19 {
    background-image:url(img/AdaLovelace.jpg);
    background-size:cover;
}
.it20 {
    background-image:url(img/femmesDelespace.jpg);
    background-size:cover;
}
.it21 {
    background-image:url(img/Nalina_Chathiry.jpg);
    background-size:cover;
}
.it22 {
    background-image:url(img/MarieCurie.jpg);
    background-size:cover;
}
.it23 {
    background-image:url(img/RespoHygieneAlimentaire.jpg);
    background-size:cover;
}
.it24 {
    background-image:url(img/euphemiaHaynes.jpg);
    background-size:cover;
}
.it25 {
    background-image:url(img/IngeReseauxSousMarin.jpg);
    background-size:cover;
}
.it26 {
    background-image:url(img/emmyNoether.jpg);
    background-size:cover;
}
.it27 {
    background-image:url(img/Donatelle_Caringi.jpg);
    background-size:cover;
}
.it28 {
    background-image:url(img/ChienShiungWu2019.jpg);
    background-size:cover;
}
.it29 {
    background-image:url(img/Lisa_Zabdonella.jpg);
    background-size:cover;
}
.it30 {
    background-image:url(img/marySherman.jpg);
    background-size:cover;
}
.it31 {
    background-image:url(img/Aline_Moreau.jpg);
    background-size:cover;
}
.it32 {
    background-image:url(img/IngeDevWeb.JPG);
    background-size:cover;
}
.it33 {
    background-image:url(img/JocelynBell.JPG);
    background-size:cover;
}
.it34 {
    background-image:url(img/EffetMahilda1.JPG);
    background-size:cover;
}
.it35 {
    background-image:url(img/Chien.JPG);
    background-size:cover;
}
.it36 {
    background-image:url(img/GraceHopper.JPG);
    background-size:cover;
}
.it37 {
    background-image:url(img/Charpentier.jpg);
    background-size:cover;
}
.it38 {
    background-image:url(img/ClemenceGaillotte.jpg);
    background-size:cover;
}


.it1 p{
    font-size:8px;
}   
.gallery a {
    text-decoration:none;
}

.contenu{
    margin-top:30px;
    width:90%;
    display:flex;
    flex-wrap:nowrap;
}



.contenu img {
    width:200px;
    border-radius:100%;
    justify-content:flex-start;
    margin-left:20px;
    margin-right:60px;
}



.contenu p {
    font-size:25px;
    font-family:futura, monospace;
    padding:20px;
}

.contenu .texte{
    border-radius:2%;
    background-color:rgba(193,220,254,0.6);
    width:80%;
    justify-content:center;
    border:2px solid black;
    box-shadow:0 0 10px rgba(0,0,0,0.5);
}



.contenuExp {
    width:90%;
    margin-bottom:100px;
    margin-left:5%;
    margin-right:5%;
    margin-top:50px;
    display:grid;
    border-bottom:100px;
    grid-gap:40px;
    grid-template-columns: repeat(8,1fr);
    grid-template-rows:repeat(auto, 100px);
    grid-auto-rows:auto;
    text-align:center;
    grid-auto-flow:dense;
}

.contenuExp p{
    padding:20px;
    font-size:25px;
    text-align:center;
    font-family:monospace;
    display:flex;
    align-items:center;
    background-color:#c1dcfeaf;
    border-radius:2%;
    border:1px solid black;
}

.contenuExp :nth-child(6n+1){
    grid-column:1/7;
    grid-row:12n/12n+1;
}

.contenuExp :nth-child(6n+2){
    grid-column:1/4;
    grid-row:12n+2/auto;
}

.contenuExp :nth-child(6n+3){
    grid-column:4/9;
    grid-row:auto/auto;
}
.contenuExp :nth-child(6n+4){
    grid-column:3/8;
    grid-row:12n+6/12n+7;
}
.contenuExp :nth-child(6n+5){
    grid-column:6/9;
    grid-row:12n+9/auto;
    
}

.contenuExp :nth-child(6n){
    grid-column:1/6;
    grid-row:12n+7/auto;
}

.contenuExp imgTexte{
    width:100%;
    
}
.contenuExp img, iframe{
    min-width:200px;
    max-width:70%;
    border:3px solid black;
}


.contenuExp h3 {
    text-align:center;
    font-size:50px;
}



.GalleryCarte {
    width:80%;
    display:grid;
    grid-template-columns:repeat(2, minmax(300px, 1fr));
    grid-template-rows:repeat(4, 150px);
    grid-gap:30px;
    margin-left:10%;
    margin-top:40px;

}

.carte{
    border:2px solid black; 
    box-shadow:0 0 5px rgba(0,0,0,0.5);
    background-color:#c1dcfe;
    height:150px;
}


.ContenuCarte {
    display:grid;
    grid-template-columns:135px 1fr 1fr;
    height:100%;
    padding:5px;
    grid-gap:5px;

}
.ImageCarte{
    grid-column:1/2;
    border:1px solid black;
    height:135px;
}
.ImageCarte img {
    width:100%;
    height:133px;
}
.DescriptionCarte {
    grid-column:2/4;
    padding:5px;
}

.DescriptionCarte h4 {
    font-size:16px; 
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    text-decoration:none;
    text-align:center;
}

.DescriptionCarte p {
    font-size:15px;
    font-family:Georgia, 'Times New Roman', Times, serif;
    text-align:start;
    margin-left:5px;
}

.DescriptionCarte hr {
    height:2px;
    margin-bottom:10px;
    margin-top:4px;
}

.carte:hover {
    transform:translateY(-10px);
    transform:scale(1.1,1.1); 
    transition:0.2s;
}

.GalleryCarte a {
    color:black;
    text-decoration:none;
}

.ImagePrincipale img{
    width:400px;
    margin-top:20px;
}


.tiktok-embed {
    margin-left:0px;
}

h5 {
    font-size:20px;
}

.contenuTemoignage {
    display:grid;
    width:80%;
    margin-left:10%;
    grid-template-columns: 1fr 1fr ; 
    grid-gap:30px;
    margin-top: 100px;
    margin-bottom:100px; 
    grid-auto-flow:dense;
    
}

.caseTem {
    border:2px solid black; 
    padding:10px; 
    display:flex; 
    justify-content:center; 
    flex-direction:column;

}

.caseTem p{
    font-size: 25px;
    background-color:transparent;
    font-family:'Times New Roman', Times, serif;
}

.caseTem h3{
    font-size:27px;
}

.contenuTemoignage div:nth-child(3n){
    grid-column:span 2; 
    background-color:#c1dcfeaf;
}
.contenuTemoignage div:nth-child(3n+1){
    background-color:whitesmoke;
} 
.contenuTemoignage div:nth-child(3n+2){
    background-color:#c6caf5;
}

.contenuTemoignage :nth-child(4n){
    grid-row:span 2;
}

.ImageArticle{
    display:grid;
    width:80%;
    grid-template-rows:auto;
    grid-template-columns:auto auto;
    margin-left:10%;
    margin-top:30px;
    margin-bottom:20px;
    
}
.ImageArticle img {
    width:550px;
}

.contenuContact {
    width:80%;
    margin-left:10%;
    margin-top:50px;
    margin-bottom:50px;
}

.contenuContact li{
    list-style:none;
    font-size:30px;
    font-family:Arial, Helvetica, sans-serif;
    padding:10px;
    text-align:center;
}