/* Police Gilroy */
@font-face {
    font-family: gilroy;
    src: url("../police/Gilroy-Light.otf");
}
 /* @font-face {
    font-family: gilroy-bold;
    src: url("../police/Gilroy-ExtraBold.otf");
}*/

/* taille police */


/* =================   Fond illustration   ==================*/

body {
    background: url("../images/mur3.jpg") fixed;
    background-size: cover;
    font-family: Arial;
    line-height: 1.6;
}    

.page_title {
    margin-bottom: 300px;
}

.greedy-nav .visible-links a::before {
    background: red;
}

title {
    color: rgba(255, 255, 255, 0)
}

/* =================   Ajustements pour rendre les textes plus lisible   ==================*/
a, a:active, a:hover, a:visited {
    text-decoration: none;
    font-family: Arial, sans-serif;
}

.page__content p, .page__content li, .page__content dl {
  font-size: 0.95em;
}

h1, h2, h3, h4, h5, h6 {
   font-family: Arial;
   font-weight: bold;
}

/* =================   Marge à l'intérieur des éléments dans les grilles   ==================*/
#archive__item-body1, .grid__item .archive__item-title, .grid__item .page__meta, .grid__item .archive__item-excerpt {
  padding-left: 4%;
  padding-right: 4%;
  padding-bottom: 6%;
}

/* ================= ==================*/
hr.hr-break {
    clear: both;
    color: white;
    margin-bottom: 3em;
}
/*==================== splash page ========================= */

#page-title-H {
    text-align: center;
    font-family: gilroy, Arial, sans-serif;  
    font-size: 1.25em;
    
   
}

.page__hero--overlay {
    display: flex;
    flex-direction: column-reverse;
    height: 90vh;
    margin-bottom: 0px;
}

#archive__item-body1 {
    height: 310px;
    margin-bottom: 20px;
}

.feature__wrapper {
    border-bottom: none;
}


article.splash {
   padding-top: 40px;
}

/* Position du titre et de l'excerpt dans bandeau */
#conteneur.wrapper {
    justify-content: center;
}


p.page__lead {
    text-align: center;
    font-family: gilroy, Arial, sans-serif;
}


/* ================  barre de navigation sticky ======================= */

.masthead {
    position: -webkit-sticky; /* Safari */
    background-color: rgba(0, 0, 0, 0.8);
    position: sticky;
    top: 0;
    padding-bottom: 5px;
    margin-bottom: 0px;
}


.greedy-nav {
    background-color: rgba(255, 255, 255, 0) ;
}

/* =========================  Barre de navigation non sticky =================== */

.masthead2 {
    background-color: rgba(0, 0, 0, 0.8);
    padding-bottom: 5px;
    margin-bottom: 5px;
}


/* ================   barre de navigation secondaire : Actualités, Nous rejoindre... ============= */
.masthead__inner-wrap {
    display: flex;
    flex-direction: column;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    align-content: flex-end;
}
nav#site-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
   
}


/* =========  Barre de navigation organisée en 3 éléments : logo / barre secondaire / barre principale dans le bloc nav ========== */

.logo2 {
    z-index: -1;
    margin-top: -20px;
 }

.menu3 {
    display: flex;
    align-self: flex-end;
}

.masthead__menu2 {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.site-nav {
    flex-grow: 1;  /* donne toute la place restante à la div */
}

.visible-links {
    display: flex;
    justify-content: flex-end;
}

.site-nav2 {
    font-size: 0.7em;
}

#site-nav2 {
    margin-bottom: 0px;
    height: 25px;
}

/* ================================ Menu deroulant ================================== */
.child-link {
    font-size: 0.8em;
}

.dropdownmenu ul {
	display: none;
}
.dropdownmenu a {
	display: block;
}
.dropdownmenu li:hover ul {
  display: block ;
  position: absolute; 
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) ;
}

.dropdownmenu ul li {
  background-color: rgb(50, 98, 185, 0.9); /* Couleur d'arriere-plan des sous-menu */
  padding: 8px 0;
}




.navigation-fixe {
    position: -webkit-sticky; /* Safari */
    background-color: rgba(0, 0, 0, 0.8);
    position: sticky;
    top: 0;
    margin-bottom: 10px;
    z-index: 10;             /* profondeur de la div */
}

#wsweet1 {
    display: flex;
}
.wsweet12 {
    margin: 50px;
}

/* ==================== bouton visité ==================== */
.btn {
    font-family: gilroy-bold, Arial, sans-serif;
}


/* Articles blog */

.image_blog_centre {
   display: flex;
   margin: 30px;
   justify-content: center;
}

/* Couleur bouton primaire */

.archive__item {
    background-color: rgba(255, 255, 255, 0.2);
}

.archive__item-teaser {
    border-radius: 0;
}

/* ======   Blog mise en page grid (blog, archive, brève et champ d'action : titre et excerpt ================== */

.archive__item-title {
    text-align: center;
}

.archive__item-excerpt {
    text-align: justify;
}


/* ============================== arborescence niveau 2 nav caché ================================ */
ul.hidden-links > li > ul {
    display: none;
    visibility: hidden;
}







/* ========== footer ============== */

.pied {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.pied2 {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.pied3 {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.pied1 {
    font-size: small;
    padding-left: 20px;
}

.page__footer-copyright {
    display: flex;
    justify-content: center;
}

.page__footer-follow {
    display: flex;
    justify-content: space-evenly;
}

.page__footer {
    background: rgba(0,0,0,0.3);
}

/* =========== Contact ============ */

.contact {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.bureau {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    font-size: large;  
    text-align: center;
}

.contact1 {
    display: flex;
    flex-direction: column;
    margin: 10px;
    text-align: center;
    font-size: large;
}

.suivre {
    display: flex;
    flex-direction: column;
    margin: 10px;
    text-align: center;
    font-size: medium;
}

.suivre h1 {
   font-size: 28px;
}

.suivre a {
    font-size: 18px;
}

.contact2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: large;
}

.contact1 h1 {
    font-size: 28px;
}

.contact3c {
    flex-direction: row;
    text-align: center;
    padding-bottom: 0px;
}

.contact3 {
    font-size: medium;
    text-align: center;
    width: 30%;
}

.sansMargin {
    margin-top: 0px;
}

.anchor {
    display: block;
    height: 150px;
    margin-top: -150px;
    visibility: hidden;
}

/* ========== grid blog ========= */

div.blog article {
   height: 410px;
   overflow: hidden;
}

div.blog article h2.archive__item-title {
   height: 65px;
   overflow: hidden;
   font-size: 16px;
   padding: 5px;
}

div.blog article p.page__meta {
   padding: 5px;
}

div.blog article p.archive__item-excerpt {
   padding: 4%;
}

/* =========== grid actu ========== */

div.actu article {
    height: 320px;
    overflow: hidden;
}

div.actu h2.archive__item-title {
    height: 75px;
    overflow: hidden;
    font-size: 18px;
    padding: 5px;
}

div.actu p.archive__item-excerpt {
    padding: 4%;
 }

 /* =========== grid actu home page ========== */

div.actuhome article {
    height: 340px;
    overflow: hidden;
    margin-bottom : 1em !important;
}

@media (min-width: 64em) {
    div.actuhome  article .archive__item-teaser {
    max-height: 200px;
    }
}


div.actuhome h2.archive__item-title {
    height: 75px;
    overflow: hidden;
    font-size: 18px;
    padding: 5px;
}

 /* =========== grid tech ========== */

div.tech article {
    height: 170px;
    overflow: hidden;
}

div.tech h2.archive__item-title {
    height: 75px;
    overflow: hidden;
    font-size: 18px;
    padding: 5px;
}

div.tech p.archive__item-excerpt {
    padding: 7px;
 }

  /* =========== grid conf ========== */

div.conf article {
    height: 270px;
    overflow: hidden;
}

div.conf h2.archive__item-title {
    height: 75px;
    overflow: hidden;
    font-size: 18px;
    padding: 5px;
}

div.conf p.archive__item-excerpt {
    text-align: center;
    padding: 7px;
 }

 /* =========== grid even (évènements) ========== */

 div.even article {
    height: 210px;
    overflow: hidden;
}

div.even h2.archive__item-title {
    height: 90px;
    overflow: hidden;
    font-size: 18px;
    padding: 5px;
}

div.even p.archive__item-excerpt {
    padding: 7px;
 }

 /* ========================= page équipe ==========================*/
 .galleriePortrait {
    display: flex;
    flex-direction: row;
}

.bio {
    display: flex;
    flex-direction: column; 
    width: 25%;
    justify-content: center;
    align-items: center;
    margin-bottom: 150px;
}

 .portrait {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 11; 
}

.portrait img {
    filter: grayscale(100%);
}

.portraitcontenu {
    display: flex;
    flex-direction: column;
    transition-property: background-color, transform;
    z-index: 10;
    width: 175px;
    height: 175px;
    padding-top: 1.5em;
    align-items: center;
    text-align: center;
    font-size: x-small;
    background-color: rgba(255, 255, 255, 0);
    transition-duration: 3s, 2s;
}

h2.titrePortrait2 {
    margin-top: 1em;
    margin-bottom: 1em;
}


.portraitcontenu a {
    font-size: small;
    
}

.bio:hover .portraitcontenu {
    transform: translateY(215px);
    background-color: rgba(255, 255, 255, 0.2);  
}

.bio:hover .portraitcontenu a {
    text-decoration: none;
}

/* =================== Réduction marge latérale intro ==============*/

.feature__item--center .archive__item-body {
    width: auto;
    margin: 20px;
}

/* =================== Cadres gauche / droite ====================== */

.feature__item--left .archive__item-teaser {
    overflow: inherit;
}

.feature__item--left .archive__item-teaser img {
  margin: -10px 0 0 -10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) ;
}

.feature__item--right .archive__item-teaser {
    overflow: inherit;
}

.feature__item--right .archive__item-teaser img {
  margin: -10px -10px 0 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) ;
}

@media (max-width: 599px) {
  .feature__item--left .archive__item-teaser img, .feature__item--right .archive__item-teaser img {
    margin: 0;
    box-shadow: 0 0 0;
  }
}

/* =================== Centrer excerpt page d'accueil ================= */

.page__hero--overlay .wrapper {
    display: flex;
}

/* =================== Page Ils nous font confiance logos ============== */

.logoClient1 {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    margin-bottom: 30px;
}

.logoClient {
    display: flex;
    justify-content: center;
    background-color: white;
    width: 18%;
    height: 80px;
    margin: 9px;
    padding: 10px;
}



/* ================= Pages Open Source et Écosystème ====================== */
.partenaires1 {
    display: flex;
    justify-content: center;
    padding-bottom: 50px;
    flex-wrap: wrap;
}

.partenaires {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 23%;
    background: white;
    /*height: 100px;*/
    margin: 5px;
    padding: 10px;
}



h2#partenaires {
    margin-top: 0;
}

div.opensource {
    padding-top: 1em;
}

/* ========================= Splash page intro centrée ============================ */

.feature__item--center1 {
    display: flex;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.2);
    padding-top: 1em;
}

.feature__item--center1 .archive__item {
    background-color: rgba(0, 0, 0, 0);
}

.feature__item--center1 .archive__item-excerpt {
    text-align: center;
    font-size: large;
}

/* ===========  Intro des pages marge top à faire ============ */

.feature__item--center2 {
    display: flex;
    justify-content: center;
    margin-top: 10px;;
}



/* =============== page Open Source ======================= */
.opensource {
    background-color: rgba(255, 255, 255, 0.2);
    text-align: justify;
    padding: 35px 25px 10px 25px;s
}

.partenaires1 {
    background-color: rgba(255, 255, 255, 0.2);
    margin-bottom: 50px;
    padding-bottom: 20px;
}

.opensource h1 {
    text-align: center;
}

.opensource p {
    font-size: 0.85em;
}

/* ================ Images ====================== */

.image_partial_width {
  width: 75%;
  margin: 0 auto;
  display: flex;
}

.image_left {
  width: 50%;
  float: left;
}

.image_right {
  width: 50%;
  float: right;
}

.image_center {
  margin: 0 auto;
  display: flex;
}

/* ================ page formation ====================== */
/* indicateurs*/

.container_ind {
    display: flex;
    justify-content: space-around;
    align-content: center;
    align-items: stretch;
    flex-wrap: wrap;
}

.box_ind {
    text-align: center;
    border-style: solid;
    border-radius: 10px;
    padding: 10px;
    max-width: 150px;
    margin: 5px;
    flex: 1 1 0;
}

.number_ind {
	margin: 0.5em 0 0.5em !important;
	line-height: 1.2;
	font-family: -apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif;
	font-weight: bold;
    font-size: xx-large !important;
}

.text_ind {
   font-size: medium !important;
   vertical-align: middle;
}


/* ==================================================== */
/* ================ Media Queries ===================== */
/* ==================================================== */

/* ================ Footer ============ */

@media (max-width: 1080px) {
    .pied {
        display: flex;
        flex-direction: row;
    }

    .pied2 {
        display: block;
    }

    .page__footer-follow .social-icons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        
    }
}

/* ================ Header ============ */
@media (max-width: 700px) {
    .page__hero--overlay {
        height: 50vh;
    }
}

/* ================ Contact ============ */
@media (max-width: 700px) {
    .contact3 {
        font-size: small;
    }

    .contact1 {
        font-size: medium;
    }

    .suivre a {
        font-size: medium;
    }
}

/* ================ Open Source ============ */
@media (max-width: 700px) {
    .partenaires1 {
        flex-wrap: wrap;
        justify-content: center;
    }
}


/* ================ Équipe dirigeante ============ */
@media (max-width: 950px) {
    .galleriePortrait {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }    

    .bio {
        width: 100%;
        margin-bottom: 30px;
    }


    .portrait {
        transition-property: transform;
        transition-duration: 2s;
    }

    
   

    .bio:hover .portraitcontenu {
        transform: translateX(100px);
    }

    .bio:hover .portrait {
        transform: translateX(-100px);
        
    }

}


/* ================= boite "feature row" ================ */


@media (max-width: 600px) {
    .archive__item p {
        padding: 5px;
        margin-bottom: 5px;
    }
   
    #archive__item-body1 {
        height: auto;
        margin-bottom: 0;
    }

    #archive__item-body1 h2 {
        margin-top: 10px;
    }

    #archive__item-teaser1 {
        margin-bottom: 0;
    }

}
/* ================= Tableaux ============== */
table.table-fullwidth {
    display: table;
}

.quote {
  font-family: Georgia;
  padding-left: 20px;
  border-left: 2px white solid;
}
/* ================= Fix sticky sidebar below navbar ============== */
.sticky, .sidebar__right.sticky {
    top: 5em;
}