@font-face {font-family:Raleway; src:url(Raleway-VariableFont_wght.ttf) format('truetype');
}

@font-face {
font-family:Gruppo; src:url(Gruppo-Regular.ttf) format('truetype');
}

/* * {box-sizing:border-box; user-select: none;} */

@media  screen and (min-width: 501px) and (orientation : portrait) {
  .formatSite {
  justify-content:center;  margin:20px auto; width:100%;}
  .boiteImage {text-align:center;  width:40%;  padding:10px;  }
  .imageFormat{width:80%; position:relative; z-index:10; }
  .range { flex-wrap:wrap;}
  .interligne {  line-height:16pt;  font-size:16px; letter-spacing: 2.5px;}
  .achatFormat{ width:100%;}
    #titre {font-size: 35px;}
      .texteFormat {text-align:justify;}
}

/* pour site internet */
@media screen and (max-width: 500px) {
  .formatSite {justify-content:center;  margin:10px auto; width:100%;}
  .range { flex-wrap:wrap;}
  .imageFormat{width:80%;   position:relative; z-index:10; }
  .interligne {  line-height:16pt;   font-size:16px; letter-spacing: 2px; }
  .range.menu div {flex-basis:100%;}
  .range.menu {flex-wrap:wrap;}
  .achatFormat{ width:100%;}
    #titre {font-size: 25px;}
    .texteFormat { height:500px; overflow:hidden; overflow-y: scroll;  text-align:left; }
}

@media screen and (min-width: 501px) and (max-width: 800px) {
  .formatSite {justify-content:center;  margin:0px auto; width:100%;}
.imageFormat{width:80%;  position:relative; z-index:10; border:1px solid white; }
.interligne {line-height:24pt;   font-size:18px; letter-spacing: 2px;}
.range.menu {width:100%;}
.range.menu:nth-child(2) div {margin-bottom:10px;}
.achatFormat{ width:60%;}
  #titre {font-size: 35px;}
    .texteFormat {text-align:justify;}
}

@media screen and (min-width: 801px) and (orientation: landscape) {
.formatSite { justify-content:center;  margin:40px auto; width:70%;}
.imageFormat{width:60%; position:relative; z-index:10; }
.interligne {line-height:24pt;   font-size:18px; letter-spacing: 2.5px;}
.range.menu:nth-child(2) div {margin-bottom:10px;}
/*box-shadow: 6px 6px 5px #4d4d4f; */
  .achatFormat{ width:60%;}
  #titre {font-size: 40px;}
  .texteFormat {text-align:justify;}
}

.colonne {
display:flex;
flex-direction:column;
}

  .boiteImage {text-align:center;  width:40%;  padding:10px;  }

.range {
display:flex;
flex-direction:row;
}

.formatRange {justify-content:center; margin-top:30px;}

.texteFormat{
 font-family:Raleway; padding:0 20px; width:60%;}

 .achatFormat{
  font-family:Raleway; padding:0 20px; text-align:justify;}

h2 {font-family:Gruppo; margin-top:0px;}

.menu {margin-bottom:40px; font-family: Gruppo; font-size:18px; flex-wrap:wrap;  justify-content:space-around;}

htm {
height:100%;
}
body {
background-color:#fff; color:#000; height:100%; padding-bottom:60px;
}

#logo { text-align:center; margin-top:40px;}

footer {position:fixed; bottom:0; left:0; right:0; height:80px; background-color:#fff;  text-align:center;  width:100%; z-index:100; border-top:1px solid #ccc; box-shadow: -0px -10px 18px #fff;}
footer img { margin-top:5px; }

#titre {font-family :Gruppo; font-weight:bold; border-bottom:1px solid white;}

.range.menu div a {text-decoration:none; color:#000; }
.range.menu div a:hover {color:#f36400;}

@font-face {font-family:Raleway; src:url(Raleway-VariableFont_wght.ttf) format('truetype');
}

@font-face {
font-family:Gruppo; src:url(Gruppo-Regular.ttf) format('truetype');
}

/* * {box-sizing:border-box; user-select: none;} */

@media  screen and (min-width: 501px) and (orientation : portrait) {
  .formatSite {
  justify-content:center;  margin:20px auto; width:100%;}
  .boiteImage {text-align:center;  width:40%;  padding:10px;  }
  .imageFormat{width:80%; position:relative; z-index:10; }
  .range { flex-wrap:wrap;}
  .interligne {  line-height:16pt;  font-size:16px; letter-spacing: 2.5px;}
  .achatFormat{ width:100%;}
    #titre {font-size: 35px;}
      .texteFormat {text-align:justify;}
}

/* pour site internet */
@media screen and (max-width: 500px) {

  .formatSite {justify-content:center;  margin:10px auto; width:100%;}
  .range { flex-wrap:wrap;}
  .imageFormat{width:80%;   position:relative; z-index:10; }
  .interligne {  line-height:16pt;   font-size:16px; letter-spacing: 2px; }
  .range.menu div {flex-basis:100%;}
  .range.menu {flex-wrap:wrap;}
  .achatFormat{ width:100%;}
    #titre {font-size: 25px;}
    .texteFormat { height:500px; overflow:hidden; overflow-y: scroll;  text-align:left; }
}

@media screen and (min-width: 501px) and (max-width: 800px) {
  .formatSite {justify-content:center;  margin:0px auto; width:100%;}
.imageFormat{width:80%;  position:relative; z-index:10; border:1px solid white; }
.interligne {line-height:24pt;   font-size:18px; letter-spacing: 2px;}
.range.menu {width:100%;}
.range.menu:nth-child(2) div {margin-bottom:10px;}
.achatFormat{ width:60%;}
  #titre {font-size: 35px;}
    .texteFormat {text-align:justify;}
}

@media screen and (min-width: 801px) and (orientation: landscape) {
.formatSite { justify-content:center;  margin:40px auto; width:70%;}
.imageFormat{width:60%; position:relative; z-index:10; }
.interligne {line-height:24pt;   font-size:18px; letter-spacing: 2.5px;}
.range.menu:nth-child(2) div {margin-bottom:10px;}
/*box-shadow: 6px 6px 5px #4d4d4f; */
  .achatFormat{ width:60%;}
  #titre {font-size: 40px;}
  .texteFormat {text-align:justify;}
}

.colonne {
display:flex;
flex-direction:column;
}

  .boiteImage {text-align:center;  width:40%;  padding:10px;  }

.range {
display:flex;
flex-direction:row;
}

.formatRange {justify-content:center; margin-top:30px;}

.texteFormat{
 font-family:Raleway; padding:0 20px; width:60%;}

 .achatFormat{
  font-family:Raleway; padding:0 20px; text-align:justify;}

h2 {font-family:Gruppo; margin-top:0px;}

.menu {margin-bottom:40px; font-family: Gruppo; font-size:18px; flex-wrap:wrap;  justify-content:space-around;}

htm {
height:100%;
}
body {
background-color:#fff; color:#000; height:100%; padding-bottom:60px;
}

#logo { text-align:center; margin-top:40px;}

footer {position:fixed; bottom:0; left:0; right:0; height:80px; background-color:#fff;  text-align:center;  width:100%; z-index:100; border-top:1px solid #ccc; box-shadow: -0px -10px 18px #fff;}
footer img { margin-top:5px; }

#titre {font-family :Gruppo; font-weight:bold; border-bottom:1px solid white;}

.range.menu div a {text-decoration:none; color:#000; }
.range.menu div a:hover {color:#f36400;}


.typelivre {font-size:15px; font-family:Helvetica, Arial; font-weight: bold; margin-top:-10px;  letter-spacing:2.5px;}


h2 span:nth-child(2) {font-size:14px; font-family:Helvetica, Arial; }
h2 span:nth-child(3) {font-size:18px;}
h2 span { font-size:18px; font-weight:normal; }

.typelivre {font-size:15px; font-family:Helvetica, Arial; font-weight: bold; margin-top:-10px;  letter-spacing:2.5px;}