@charset "UTF-8";
/* CSS Document */

html, body {
/* color: #0F9858; */
color: #0c7d48;
background-color:#D5EDDE;
/* font-family: Times, serif; */
/* font-family: 'Times New Roman', Times, serif; */
font-size: 16px;
line-height: 19px;
text-underline-offset: 2px;
}

::-webkit-scrollbar { 
width: 0px;
}

::selection {
background-color: #FF7230;
color: white;
}

span {
color: #84C19B;
text-decoration: underline;
/* font-variant: small-caps; */
}

/* Liens dans le texte courant */
a {
/* color: #0F9858; */
color: #0c7d48;
text-decoration: underline;
}
a:visited {
/* color: #0F9858; */
color: #0c7d48;
text-decoration: underline;
}
a:hover {
color: #FFF;
text-decoration: none;
}

a.menur {
text-decoration: line-through;
}
a.menur:visited {
text-decoration: line-through;
}
a.menur:hover {
text-decoration: none;
}

#nav a {
/* color: #0F9858; */
color: #0c7d48;
text-decoration: none;
}
#nav a:visited {
/* color: #0F9858; */
color: #0c7d48;
text-decoration: none;
}
#nav a:hover {
/* color: #0F9858; */
color: #0c7d48;
/* text-decoration: underline;
background-color: #D5EDDE; */
color: #FF7230;
text-decoration: none;
}

.liste2 a:hover {
/* color: #0F9858; */
color: #FF7230;
text-decoration: none;
}

img {
width:50%;
display: block;
}

/* Hack bichromie */
.img-wrapper {
    position:            relative;
	  margin-top:          0.5rem;
    display:             flex;
    flex:                1 1 100%;
    background-color:    #d5EDDE;
    height:              100%;
    padding:             0;
    overflow:            hidden;
  }
  
.img-wrapper img {
    position:            relative;
    filter:              grayscale(100%) contrast(130%);
    flex:                1 0 100%;
    height:              50%; /* 100% */
    width:               50%; /* 100% */
    max-width:           50%; /* 100% */
    mix-blend-mode:      multiply;
    object-fit:          cover;
    opacity:             1;
  }
  
.img-wrapper::before {
    position:            absolute;
    content:             '';
    background-color:    /* #0F9858; */ #0c7d48;
    height:              100%;
    left:                0;
    right:               0;
    top:                 0;
    bottom:              0;
    mix-blend-mode:      screen;
    width:               50%; /* 100% */
    z-index:             1;
}

.img-wrapper:hover:before {
  position:            absolute;
  content:             '';
  background-color:    #FF7230 ;
  height:              100%;
  left:                0;
  right:               0;
  top:                 0;
  bottom:              0;
  mix-blend-mode:      screen;
  width:               50%; /* 100% */
  z-index:             1;
}

/* --- */

.header {
padding-left: 1rem; padding-right: 1rem; padding-bottom: 1rem; padding-top: 1rem;
overflow-y: hidden;
/* background-color: #FF7230; */ /* ### */
}

.menubox {
padding-top: 1rem;
/* background-color: #0F9858; */
}

.menu {
width: 10%;
display:inline-block;
/* color: #FFF; */ /* ### */
/* background-color: cornflowerblue; */
}

#nav {
position: fixed;
width: calc(15% - 1rem);
padding-left: 1rem; padding-right: 1rem; padding-bottom: 0rem; padding-top: 0rem; /* padding-top: 0.5rem; */
overflow-y: auto;
background-color: #FFF;
}

.content { /* Class pour l'index */
position: fixed;
left: 15%; /* width: 85%; */
padding-left: 1rem; padding-right: 1rem; padding-bottom: 1rem; padding-top: 0rem; /* padding-top: 0.5rem; */
overflow-y: auto;
/* background-color: pink; */
/* background-color: brown; /* ### */
/* background-color: #FF7230; */
}

#content { /* Id pour les autres pages */
position: fixed;
left: 15%; /* width: 85%; */
padding-left: 1rem; padding-right: 1rem; padding-bottom: 1rem; padding-top: 0rem; /* padding-top: 0.5rem; */
overflow-y: auto;
/* background-color: brown; /* ### */
}

#glossaire {
position: relative;
display: block;
background-color:#D5EDDE;
/* background-color: darkorange; /* ### */
}

.mot {
position: relative;
display: block;
background-color:#D5EDDE;
/* background-color: aliceblue; /* ### */
}

.work {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0; width: calc(20% - 1.25rem);
height:6rem ; /* Cache lié au sticky */
padding-right: 0.5rem; padding-left: 1rem;
vertical-align: top;
display: inline-block;
background-color:#D5EDDE;
}

.liste1 {
top: 0; width: calc(20% - 0.25rem);
padding-right: 0.5rem;
vertical-align: top;
margin-bottom: 0.5rem;
display: inline-block;
background-color:#D5EDDE;
}

.definition {
left: 20%; width: calc(80% - 0.25rem);
vertical-align: top;
margin-bottom: 0.5rem;
text-indent: 20%;
display: inline-block;
background-color:#D5EDDE;
/* background-color:pink; /* ### */
}

.liste2 {
left: 20%; width: calc(80% - 0.25rem);
vertical-align: top;
margin-bottom: 0.5rem;
display: inline-block;
background-color:#FFF;
/* background-color:pink; /* ### */
}

#info {
position: relative;
display: block;
/* background-color: chartreuse; */
/* background-color: #FF7230; */
}

.information {
position: absolute;
top:0; left: 0; width:calc(50% - 2rem); /* padding-bottom: 1rem; */
padding-right: 1rem; padding-top: 0.5rem; padding-left: 1rem;;
/* background-color: burlywood; */
}

.equipe {
position: absolute;
top:0; left: 50%; width:50%;
padding-top: 0.5rem; /* padding-bottom: 1rem; */
/* background-color: darkgoldenrod; */
}

.footer1 {
position: fixed;
left:1rem; bottom:1rem;
/* background-color: aliceblue; */
}

.footer2 {
position: fixed;
left:calc(15% + 1rem); bottom:1rem;
/* background-color: aliceblue; */
}

#footer3 {
position: fixed;
right:1rem; bottom:1rem;
/* background-color: aliceblue; */
}