@viewport {
   width: device-width; 
   zoom: 1; 
}

body {
  font-size: 18px;
  --Href: calc(0.4vw + 0.4vh + 12px);
  font-size: var(--Href);
  border-style: hidden;
  font-family: arial,Helvetica,sans-serif; 
  color: RGB(230,230,230);
  margin: 0;
  padding: 0;
  background-color: RGB(53,47,31);
  
/* scorlbar pour internet explorer */
  scrollbar-face-color: RGB(73,67,51);
  scrollbar-shadow-color: RGB(158,158,158); 
  scrollbar-track-color: RGB(158,158,158) ;
  scrollbar-arrow-color: RGB(158,158,158) ; 
}

/* scrollbar pour firefox */
html{
    scrollbar-color: RGB(158,158,158) RGB(73,67,51) RGB(73,67,51);
    scrollbar-width: thin;
    scroll-behavior: smooth;
}
  
/* scrollbar pour chrome et opréra */
::-webkit-scrollbar {
width: 15px;
background: tranparent;
}
/* coulisse */
::-webkit-scrollbar-track  {
background: tranparent;
 } 
::-webkit-scrollbar-track-piece  {
background: RGB(73,67,51); 
border: 7px solid RGB(73,67,51); 
}
/* bouton de traction */
::-webkit-scrollbar-thumb {
  background: RGB(158,158,158) ;
  border-radius: 6px;       
  border: 2px solid RGB(158,158,158) ;
}
::-webkit-scrollbar-thumb:hover {background: RGB(225,225,225);}

/* Bouton H et B */
::-webkit-scrollbar-button {
  background: RGB(158,158,158) ;
  border-radius: 6px;       
  border: 2px solid RGB(158,158,158) ;
}
::-webkit-scrollbar-button:hover {background: RGB(225,225,225);}

/* angle entre la scrollbar H et V */
::-webkit-scrollbar-corner  {display: none;}  
/*  */
::-webkit-resizer {display: none;}  

p {
  font-size: 100%;
  border-style: hidden;
  border-width: 0px;
  margin: 0;
  padding: 0;
}
table {
  font-size: 100%;
  xxborder-style: hidden; 
  border: 0px;
  margin: 0px;
  padding: 0px;
}

.cadreppl {
  width:80%;
  height: 98;
  max-width: 750px;
  min-width: 420px;
  border-radius: 10px;
  border-radius: calc(var(--Href)*1.0);
  padding: 10px;
  padding: calc(var(--Href)*0.5);
  margin-left: auto;
  margin-right: auto;
  background-color: RGB(10,10,10);
  border-radius: calc(var(--Href)*0.5);
}

img {
  width: 100%;
  height: auto;
  border-style: hidden;
  border-width: 0px;
  border-radius: 10px;
  border-radius: calc(var(--Href)*0.5);
  margin: 0;
  padding: 0;
  transition: 0.3s ease;
}
.IMgauche {
  float: left;
  width: 33%;
  margin-right: 10px;
  margin-bottom: 5px;
  margin-right: calc(var(--Href)*0.5);
  margin-bottom: calc(var(--Href)*0.5);
}
.IMdroite {
  float: right;
  width: 33%;
  margin-left: 10px;
  margin-bottom: 5px;
  margin-left: calc(var(--Href)*0.5);
  margin-bottom: calc(var(--Href)*0.5);
}
.IMgauche2 {
  float: left;
  width: 15%;
  margin-right: 10px;
  margin-bottom: 5px;
  margin-right: calc(var(--Href)*0.5);
  margin-bottom: calc(var(--Href)*0.5);
}
.IMdroite2 {
  float: right;
  width: 15%;
  margin-left: 10px;
  margin-bottom: 5px;
  margin-left: calc(var(--Href)*0.5);
  margin-bottom: calc(var(--Href)*0.5);
}
.carre {
  border-radius: 0px;
}

.carreT {
  border-radius: 0px;
  width: 85%;
}

.titreP {
  height: 48px;
  height: calc(var(--Href) * 2.42);
  width: auto;  
  border-radius:0;
  margin: 0;
  padding: 0;
}
.titre1 {
  height: 38px;
  height: calc(var(--Href) * 2.07);
  width: auto;  
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.titre2 {
  height: 32px;
  height: calc(var(--Href) * 1.7);
  width: auto;  
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.titre3 {
  height: 27px;
  height: calc(var(--Href) * 1.44);
  width: auto;  
  border-radius:0;
  margin: 0;
  padding: 0;
}
.titre4 {
  height: 22px;
  height: calc(var(--Href) * 1.20);
  width: auto;  
  border-radius:0;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 207%;
  color: RGB(200,200,200);
  font-weight: bold;
  border-style: none;
  margin: 0;
  padding:0;
}
h2 {
  font-size: 173%;
  color: RGB(215,215,215);
  font-weight: bold;
  border-style: none;
  margin: 0;
  padding: 0;
}
h3 {
  font-size: 144%;
  color: RGB(230,230,230);
  font-weight: bold;
  border-style: none;
  margin: 0;
  padding: 0;
}
h4 {
  font-size: 120%;
  color: RGB(245,245,245);
  font-weight: bold;
  border-style: none;
  margin: 0;
  padding: 0;
}

a {
  font-size: 100%;
  color: RGB(0,100,0);
  background-color: RGB(195,195,195);
  font-weight: bold;
  font-style: italic;  text-decoration: none;
  border-style: hidden;
  border-width: 0px;
  border-radius: 8px;
  margin: 0;
  padding: 0;
  padding-left: 4px;
  padding-right: 4px;
  border-radius: calc(var(--Href)* 0.5);
  padding-left: calc(var(--Href)* 0.2);
  padding-right: calc(var(--Href)* 0.2);
  transition: 0.3s ease;
  display : inline-block;
}
a:active {
  color: RGB(0,100,0);
}
a:link {
  color: RGB(0,100,0);
}
a:hover {
  color: RGB(0,180,0);
  font-style: normal;  
  background-color: RGB(120,120,120);
}

  

/* -------- uniquement pour ce site -------- */







/* Uniquement pour tablettes -------- */


@media only screen and (max-device-width:950px) and (orientation: portrait) {

body {
  --Href: 2.2vmax;
  font-size: var(--Href);
}

.cadreppl {
  font-size: var(--Href);
   width: 85%;
   height: 99%;
   max-width: 1020px;
   min-width: 300px;
 }

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

.carreT {
  border-radius: 0px;
  width: 85%;
}

.bouton1 {
  height: 80px;
}

}

@media only screen and (max-device-height:950px) and (orientation: landscape)  {
  --Href: 2.5vmax;
  font-size: var(--Href);
/* le reste iden que PC */
}


/* Uniquement pour smartphones -------- */

@media only screen and (max-device-width:767px) and (orientation: portrait) {

body {
  --Href: 2.8vmax;
  font-size: var(--Href);;
}

.cadreppl {
  width: 95%;
  height: 97%;
  max-width: 1820px;
}

.IMgauche {
  float: none;
  width: 50%;
  display: block;
  margin-left: 25%;
  margin-right: 25%;
}
.IMdroite {
  float: none;
  width: 50%;
  display: block;
  margin-left: 25%;
  margin-right: 25%;;
}
.IMgauche2 {
  float: left;
  width: 20%;
  margin-right: 10px;
  margin-bottom: 5px;
  margin-right: calc(var(--Href)*0.5);
  margin-bottom: calc(var(--Href)*0.5);
}
.IMdroite2 {
  float: left;
  width: 20%;
  margin-right: 10px;
  margin-bottom: 5px;
  margin-right: calc(var(--Href)*0.5);
  margin-bottom: calc(var(--Href)*0.5);
}
::-webkit-scrollbar {
  width: 0px;
}

.carreT {
  border-radius: 0px;
  width: 95%;
}

.bouton1 {
  height: 80px;
}

}


@media only screen and (max-device-height:767px) and (orientation: landscape)  {

body {
  --Href: 2.8vmax;
  font-size: var(--Href);
}

}