@charset "UTF-8";

@font-face
{
font-family: 'Conv_Reef';
src: url('fonts/Reef.eot');
src: local('☺'), 
url('fonts/Reef.woff') format('woff'), 
url('fonts/Reef.ttf') format('truetype'), 
url('fonts/Reef.svg') format('svg');
font-weight: normal;
font-style: normal;
}
{
font-family: basic;
src: url(fonts/basic.woff);
font-weight: normal;
font-style: normal;
}
{
font-family: light;
src: url(fonts/light.woff);
font-weight: normal;
font-style: normal;
}
{
font-family: bold;
src: url(fonts/bold.woff);
font-weight: normal;
font-style: normal;
}
{
font-family: manu;
src: url(fonts/manu.woff);
font-weight: normal;
font-style: normal;
}

blockquote { letter-spacing: 0.1em }

body {
height: 100%;
overflow-y: auto;
font-family:'Conv_Reef',Sans-Serif;
text-align:center;
border:0px ;
padding:0px;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;
font-smoothing: antialiased;
-moz-font-smoothing: auto;
-webkit-font-smoothing: antialiased;
}

#menu__toggle {
  opacity: 0;
}
#menu__toggle:checked + .menu__btn > span {
  transform: translate(0px, 0px) rotate(135deg);
}
#menu__toggle:checked + .menu__btn > span::before {
  top: 0;
  opacity: 0;
}
#menu__toggle:checked + .menu__btn > span::after {
  top: 0;
  transform: translate( -1px, -1px) rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  left: 0 !important;
}
.menu__btn {
  position: fixed;
  top: 27px;
  left: 10px;
  width: 20px;
  height: 5%;
  opacity: 0.5;
  cursor: pointer;
  z-index: 2;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 44%;
  opacity: 1;
  background: 
  linear-gradient( aquamarine 4px, transparent 3px );
  transition-duration: 0.5s;
}
.menu__btn > span::before {
  content: '';
  top: -8px;
}
.menu__btn > span::after {
  content: '';
  top: 8px;
  
}
.menu__box {
  display: block;
  position: fixed;
  top: 0;
  left: -100%;
  width: 300px;
  z-index: 1 ;
  height: 100%;
  margin: 0;
  padding: 40px 0;
  list-style: none;
background: 
linear-gradient(rgba(72, 61, 139,.4) 0px, transparent 50px),
linear-gradient(to top, rgba(72, 61, 139,.4) 0px, transparent 50px),
linear-gradient(90deg, lightSteelBlue, lightSkyBlue, aquamarine, mediumSpringGreen, paleGreen, rgb(160, 255, 152) 100%);
box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
transition-duration: .25s;
}

.menu__item {
  display: block;
  padding: 12px 24px;
  color: #333;
  font-family:'Conv_Reef',Sans-Serif;    
font-size: 170%;
color: white;
border: 0px ;
text-align: left;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;
font-smoothing: antialiased;
-moz-font-smoothing: auto;
-webkit-font-smoothing: antialiased;
text-decoration: none;
text-shadow:
   -1px 0px 0 rgba(0, 20, 63, 0.2),  
    0px -1px 0 rgba(0, 20, 63, 0.2),
     0px 0px 0 rgba(0, 20, 63, 0.2),
   -1px -1px 0 rgba(0, 20, 63, 0.2),  
    1px -1px 0 rgba(0, 20, 63, 0.2),
    -1px 1px 0 rgba(0, 20, 63, 0.2),
     1px 1px 0 rgba(0, 20, 63, 0.2);
  transition-duration: .25s;
}
.menu__item:hover {
  opacity: 0.5;
}

.divclassmini {
width: 100%;
position: fixed;
left: 0px;
bottom: 0px;
top: 4.2em;
}

.invert {
background-color: #ccffcc;
mix-blend-mode: difference;
}

.invert1 {
background-color: #ccffcc;
mix-blend-mode: difference;
height: 120px;

}


.invert2 {
background-color: #ccffcc;
mix-blend-mode: difference;
height: 440px;

}

.invertimage {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  mix-blend-mode: difference;
 
 }


.minisiteclass {
background:
linear-gradient(rgba(199, 210, 254,.4) 0px, transparent 50px),
linear-gradient(to top, rgba(199, 210, 254,.4) 0px, transparent 50px),
linear-gradient(90deg, WhiteSmoke, MintCream, HoneyDew, rgb(230, 255, 230) 100%);
width: 100%;
height: 100%;
border: 0px;
}

#titre {
text-align:center;
  background: linear-gradient(90deg, rgb(45, 153, 255) 30%, white 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
text-shadow:
   -1px 0px 0 rgba(0, 20, 63, 0.2);
  left: 0px;
  top: -0.8em;
  position: fixed;
  width: 100%;
  margin: 0;
}

#menu {
  position: fixed;
  letter-spacing: 7px;
  text-align:center;
  text-shadow:
   -1px 0px 0 rgba(0, 20, 63, 0.2),  
    0px -1px 0 rgba(0, 20, 63, 0.2),
     0px 0px 0 rgba(0, 20, 63, 0.2),
   -1px -1px 0 rgba(0, 20, 63, 0.2),  
    1px -1px 0 rgba(0, 20, 63, 0.2),
    -1px 1px 0 rgba(0, 20, 63, 0.2),
     1px 1px 0 rgba(0, 20, 63, 0.2);
color: white;
  right: 0;
  top: 2em;
  width: 100%;
}

ul {
 display: block;
 list-style-type: "\1F63C \0020";
  margin-top: 0.5em;
  margin-bottom: 0em;
  margin-left: -1.5em;
  font-size: 90%; }

li {
letter-spacing: 1px; }

#pages { 
text-align: left;
font-size: 130%;
margin-left: 1em;
}

<!-- liste avec colonne s'auto-organisant -->
ol {
text-align: left;
  margin: 0;
  padding: 0;
  list-style: none;
  /*---*/
  column-count: 2;
  column-gap: 0;
  width: 100%;
}

li {
  background-color: transparent;
  outline: 0px ;
}


.h1
{
font-family:'Conv_Reef',Sans-Serif;    
font-size: 300%;
letter-spacing: 5px;
border: 0px;
padding: 0px;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;
font-smoothing: antialiased;
-moz-font-smoothing: auto;
-webkit-font-smoothing: antialiased;
}

.h2
{
font-family:'Conv_Reef',Sans-Serif;    
font-size: 170%;
color: white;
letter-spacing: 1px;
align: center;
border: 0px
padding: 0px;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;
font-smoothing: antialiased;
-moz-font-smoothing: auto;
-webkit-font-smoothing: antialiased;
}

.h3
{
font-family:'Conv_Reef',Sans-Serif;    
font-size: 100%;
color: blue ;
border: 0px
padding: 0px;
align: center;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;
font-smoothing: antialiased;
-moz-font-smoothing: auto;
-webkit-font-smoothing: antialiased;
}

.h4 {
font-family:'light',Sans-Serif;    
font-size: 90%;
color: black;
border: 0px
padding: 0px;
align: center;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;
font-smoothing: antialiased;
-moz-font-smoothing: auto;
-webkit-font-smoothing: antialiased;
}

.h5 {
font-family:'basic',Sans-Serif;    
font-size: 100%;
color: #372EA3 ;
border: 0px
padding: 0px;
align: center;
text-shadow:
   -1px 0px 0 rgba(0, 20, 63, 0.2);
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;
font-smoothing: antialiased;
-moz-font-smoothing: auto;
-webkit-font-smoothing: antialiased;
}

.h6 {
font-family:'light',Sans-Serif;    
font-style: italic;
font-size: 70%;
color: black;
border: 0px ;
opacity: 0.3 ;
padding: 0px;
align: center;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;
font-smoothing: antialiased;
-moz-font-smoothing: auto;
-webkit-font-smoothing: antialiased;
}

.h7 {
font-family:'Conv_Reef',Sans-Serif;    
font-size: 200%;
background-color: black;
color: #00dd38;
border: 0px;
padding: 0px;
align: center;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;
font-smoothing: antialiased;
-moz-font-smoothing: auto;
-webkit-font-smoothing: antialiased;
}

.h8 {
font-family:'Conv_Reef',Sans-Serif;    
font-size: 150%;
color: #00dd38;
border: 0px;
padding: 0px;
align: center;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;
font-smoothing: antialiased;
-moz-font-smoothing: auto;
-webkit-font-smoothing: antialiased;
}

.h88 {
font-family:'Conv_Reef',Sans-Serif;    
font-size: 100%;
color: #000000;
border: 0px;
padding: 0px;
align: center;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;
font-smoothing: antialiased;
-moz-font-smoothing: auto;
-webkit-font-smoothing: antialiased;
}


a:link {
  text-decoration: none;
  color: #FF00E3;;
}

a:hover { 
text-decoration: none;
color: #00dd38;}

a:active {
text-decoration: none;
color: #2FFF64;}

a:visited {
text-decoration: none;
color: #FF00E3;
}

img {
    max-width: 96%;
    height: auto;
    width: auto\9; /* ie8 */
    margin-top: 3%;
    margin-bottom: 3%;
    margin-right: 0%;
    margin-left: 0%;
    border-style: solid;
    border-width: 0;
    border-color: black;
 }
 
 
   .btn {
  background-image: 
 linear-gradient(rgba(72, 61, 139, 0.4) 0px, transparent 50px),
linear-gradient(to top, rgba(72, 61, 139, 0.4) 0px, transparent 50px),
linear-gradient(90deg, lightSteelBlue, lightSkyBlue, aquamarine, mediumSpringGreen, paleGreen, rgb(160, 255, 152) 100%);
  border: none;
  position: static;
  color: white;
  text-shadow:
   -1px 0px 0 rgba(0, 20, 63, 0.2),  
    0px -1px 0 rgba(0, 20, 63, 0.2),
     0px 0px 0 rgba(0, 20, 63, 0.2),
   -1px -1px 0 rgba(0, 20, 63, 0.2),  
    1px -1px 0 rgba(0, 20, 63, 0.2),
    -1px 1px 0 rgba(0, 20, 63, 0.2),
     1px 1px 0 rgba(0, 20, 63, 0.2);
  padding: 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 12px;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.btn:hover {
  background-image: 
linear-gradient(rgba(72, 61, 139, 0.4) 0px, transparent 30px),
linear-gradient(90deg, lightSteelBlue, lightSkyBlue, aquamarine, mediumSpringGreen, paleGreen, rgb(160, 255, 152) 100%);
  color: white;
  text-shadow:
   -1px 0px 0 rgba(0, 20, 63, 0.2),  
    0px -1px 0 rgba(0, 20, 63, 0.2),
     0px 0px 0 rgba(0, 20, 63, 0.2),
   -1px -1px 0 rgba(0, 20, 63, 0.2),  
    1px -1px 0 rgba(0, 20, 63, 0.2),
    -1px 1px 0 rgba(0, 20, 63, 0.2),
     1px 1px 0 rgba(0, 20, 63, 0.2);
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}