html {
  /*height: 100%;*/
  font-size: 16px;
}
body {
    background: #bfd2dd;
    background-image: url("/images/fondhg.jpg"), url("/images/fondbg.jpg"), url("/images/fondhd.jpg"), url("/images/fondbd.jpg"), url("/images/fondc.jpg");
    background-position: top left, bottom left, top right, bottom right, center center;
    background-repeat: no-repeat;
    background-attachment: scroll, scroll, scroll, scroll, scroll;
    background-size: 10%, 25%, 25%, 25%, 50%;
    /*background-size: contain;*/
    /*background-size: 100vw 100vh;*/
    /*background-size: cover;
    background-repeat: no-repeat;*/
    font-family: Verdana, sans-serif;
    font-weight: normal;
    font-size: 1rem;
    
    /*min-height: 100%;*/
    padding : 0;
    border : none;
    margin: 0;
}
.hk {
    background-image: url("/images/fondhg.jpg");
    background-position: top left;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: 10%;
}
.text {
    color: green; /* TO DELETE */
}
.entete {	
	height: 4rem;
    /*background: rgba(200,200,200,0.5);*/
}
.contenu {
	padding: 4rem;
	min-height: calc(100vh - calc(104px + 15rem));
}

.listerubriques {
    display: flex;
    flex-direction: column;
	align-items: flex-start;
    justify-content: space-between;
	/*align-self: stretch;*/
	height: calc(100vh - calc(104px + 15rem));
}

.pieddepage {
    height: 100px;
    border-top: 2px solid white;
    font-size: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
  /*position: absolute;
  width: 100%; 
  bottom: 0; left: 0; right: 0;*/

}

h1 {
    color: black;
    text-align: center;
    font-size: 2rem;
}
h2
{
    font-size: 2rem;
}
h3
{
    font-size: 1rem;
}

.starticon {
    vertical-align: middle;
    width: 30px;
    height: auto;
}

.endicon {
    width: 40px;
    height: auto;
}
.logos {
  display: flex;
  /*align-items: center;
  justify-content: space-between;*/
  column-gap: 20px;
  width: 50%;
}

.monemail::before {
    content: "contact@baudasse-consulting.fr";
}
img {
    /*float: inline-end;*/
    /*float: left;*/
    vertical-align: top;
}
.logosociete {
    display: none;
    text-align: right;
    float: inline-end;
}
.right {
   float: inline-end; 
}

.btn {
    transition-property: transform;
    transition-duration: 500ms;
    &:hover {
    }
}


.rubrique {
    background: rgba(0,0,0,0.40);
    color: #000000;
    font-size: 2rem;
    cursor: pointer;
    padding: 1.25rem 2rem;
    border-radius: 10rem;
    height: 6rem;
    width: calc(100vw - 12rem);
    /*border: 1px solid lightgrey;*/
    transition-property: transform;
    transition-duration: 500ms;
    &:hover {
        transform: scale(1.05);
        /*color :#15DEA5;*/
        color: white;
        /*border: 1px solid white;*/
    }
}

.rubrique:hover .description,
.rubrique:hover .description:before {
  /*transform: translateY(0) translateZ(0);*/
  opacity: 1;
}

.description {
    font-size: 1.5rem;
    border: 1px solid black;
    padding: 1rem 0.25rem;
    border-radius: 2rem;
    margin: 1rem;
    position: relative;
    width: 50%;
    
    transform: translateY(-3rem)
        translateX(100%);
    
    background: white; /*fallback color*/
    background: rgba(200,200,200,0.75);
    
    opacity: 0;
    color: black;
    /*transform: translateY(100%)
    translateY(-88px)
    translateZ(0);*/
    /*transition: transform 0.3s ease-out;*/
    transition-duration: 1500ms;
}

/* Style pour la description d'une référence -> reference */
/* Première ligne  : Titre à gauche, logo à droite */
/* 2ème ligne : description à gauche, et colonne à droite pour des graphes */
.reference {
    border: 1px solid black;
    margin: 1rem;
    padding: 1rem;
    font-size: 1rem;
    color: black;
    text-align : justify;
    background-color: white;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	align-items: flex-start;
    justify-content: space-between;
    overflow: hidden;
}

.reference>*:first-child {
  width: 80%;
}
.reference>:nth-child(0n + 2) {
  width: 20%;
}
.reference>:nth-child(0n + 3) {
  width: 95%;
}
.reference .p {
    font-size: 1.5rem;
    color: red;
}


.entetereference {
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    overflow: hidden;
}
.entetereference>*:first-child {
  width: 80%;
  min-width:60%;
}
.entetereference>:nth-child(0n + 2) {
  width: 20%;
}
.entetereference>:nth-child(0n + 3) {
  width: 90%;
}

.titrereference {
    color: darkblue;
    font-size: 1.5rem;
    font-weight: bold;
    text-align : left;
}
.resumereference {
    font-size: 1.5rem;
    color: darkblue;
}
.periodereference {
    font-size: 1.5rem;
    color: darkblue;
}
.activitesreference {
    color: rgb(120, 120, 120);
    display: none;
}

label.toggledetailactivites {
    font-style: italic;
}
label.toggledetailactivites::after {
    /*content: " \0023F7";*/
    content: " \0025BC";
    font-style: normal;
}
label.toggledetailactivites:hover {
    color: blue;
    cursor: pointer;
}
input[type='checkbox'].toggledetailactivites {
  visibility: hidden;
}
.toggledetailactivites:checked~.activitesreference { 
    display: inline; 
}
.toggledetailactivites:checked~.toggledetailactivites::after {
    /*content: " \0023F6"; */
    content: " \0025B2";
}

.twocolumns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	align-items: flex-start;
    justify-content: space-between;
    /*overflow: hidden;*/
}

.twocolumns>*:first-child {
  width: 60%;
}

.photo {
    width: 400px;
    height: auto;
    border: 2px solid black;
    margin: 1rem;
}

.ref {
    color: brown;
}
.important {
    font-weight: bold;
}

.competences {
    width: 30%;
}
progress[value] {
    width: 200px;
}

@media only screen and (min-resolution: 200dpi) and (orientation: portrait) {
    /* Mobile */
    body {
        /*background-image: url("/images/fondv.jpg");*/
        background-size: 30%, 30%, 30%, 30%, 80%;
    }
    html {
        /*height: 100%;*/
        font-size: 32px;
      }
    h1 {
        /*color: yellow;*/
        font-size: 2rem;
    }
    h2 {
        font-size: 1.5rem;
    }
    h3
    {
        font-size: 1rem;
    }
    a
    {
        text-decoration: none;
    }
    .entete {	
	    height: 12rem;
        padding-top: 8rem;
    }
    .rubrique {
        height: 4rem;
        width: calc(100vw - 6rem);
    }
    .endicon {
        width: 200%;
        height: auto;
    }
    .logos {
        column-gap: 60px;
    }
    .contenu {
    	/*min-height: 50vh;*/
    	min-height: calc(100vh - calc(304px + 17rem));
    	padding: 1rem;
    }
    .listerubriques {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        /*height: calc(100vh - calc(304px + 17rem));*/
        height: 50vh;
        /*column-gap: 20px;
        width: 50%;*/
    }

    a {
        /* pour supprimer la zone bleue de sélection sous Chrome sur mobile */
        -webkit-tap-highlight-color: transparent;
    }
    .reference {
        font-size: 0.75rem;
    }
    .titrereference {
        font-size: 2rem;
    }
    .periodereference {
        font-size: 0.9rem;
    }
    .resumereference {
        font-size: 0.9rem;
    }
    .competences {
        width: 100%;
        font-size: 0.8rem;
    }
    progress[value] {
/*        -moz-appearance: none;
        -webkit-appearance: none;*/
        height: 40px;
      /*appearance: none;*/
/*      border: none;*/
/*      margin: 0 10px;
      border-radius: 10em;*/
    }
    progress[value]::-moz-progress-bar {
      border-radius: 15px;
      height: 30px;
    }
    progress[value]::-webkit-progress-bar {
      border-radius: 10em;
    }
    progress[value]::-webkit-progress-value {
      border-radius: 10em;
    }    */
    .twocolumns {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        /*overflow: hidden;*/
    }
    
    .twocolumns>:first-child {
      width: 100%;
      text-align: left;
    }
    .twocolumns> div {
        width: 90%;
        text-align: center;
      }
     
    .photo {
        width: 100%;
        height: auto;
        border: 2px solid black;
        margin: 1rem;
    }
}

@media only screen and (min-resolution: 200dpi) and (orientation: landscape) {
    /* Mobile */
    h1 {
        /*color: darkgreen;*/
        font-size: 2rem;
    }
    h2 {
        font-size: 1rem;
    }
    h3
    {
        font-size: 1rem;
    }
    .entete {	
	    height: 2rem;
    }
    .contenu {
        padding: 1rem;
    	min-height: calc(100vh - calc(102px + 4rem));
    }
	.rubrique {
        height: 2rem;
    }
    .endicon {
        width: 100%;
        height: auto;
    }
    .logos {
        column-gap: 20px;
    }
    a {
        /* pour supprimer la zone bleue de sélection sous Chrome sur mobile */
        -webkit-tap-highlight-color: transparent;
    }
    .competences {
        width: 70%;
    }
}


@media only screen and (max-width: 480px) {
    /*h1 {
    color: purple;
    }*/
}

@media only screen and (max-width: 720px) {
    /*h1 {
        color: blue;
        font-size: 1rem;
    }*/
    h2 {
        font-size: 1rem;
    }
    .description {
        font-size: 1rem;
    }
    body {
        padding :1rem;
    }
}

@media only screen and (min-width: 1280px) {
    /*h1 {
        color: red;
    }*/
    h1,h2 {
    font-size: 2rem;
    }
}