body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {margin :0; padding :0; } 
fieldset, img { border :0;margin: 0px 0px 0px 0px;} 
address, caption, cite, dfn, em, strong, th, var { font-style :normal; font-weight :normal; } 
ol, ul { list-style :none; }  
caption, th { text-align :left; } 
h1, h2, h3, h4, h5, h6 { font-size :100%; font-weight :normal; } 
/* =================fin du raz================= */ 
html, body {  height: 100%; } 
 
body { 	background-color:#6c564b;font-family:"Times New Roman", Times, serif;color:#feffff; font-size:22px;margin:0;border:0;text-align: center;}
/* #577bac  #0080c0  OLD nouveau   577bac        6c564b    */
* {box-sizing: border-box;} 

.wrapper {
  display: grid;
  grid-template-rows: auto auto 1fr;   
  grid-template-areas:  
    "bandeau"
    "ToutMenu"
    "content"
    "footer";
  min-height: 100vh;
}
.bandeau {
  grid-area: bandeau;
  text-align:center;
}
.ToutMenu {
  grid-area: ToutMenu;
  text-align:center;
}
.content {
  grid-area: content;
  text-align:left;

}
.footer  {
  grid-area: footer;
  text-align:center;
}

/* ____________doctype_________________  */
div.Limage_de_droite{position:fixed;top:300px;right:0;z-index:10;overflow:hidden;display:block;}
div.scrollUpB  {position: fixed;top : 10px;width:14px;right: 60px;z-index:70;}
div.scrollUpH  {position: fixed;bottom : 10px;width:14px;right: 60px;z-index:70;}
div.user-info { position: absolute;right: 50px;top: 2px;width:overflow :hidden; z-index :70; }
div.home{position:fixed;top:4px;left:4px;overflow:hidden;z-index:70;}

/* ____________menu_________________  */

div.bordbruncadre {height:auto;width:auto;max-width:900px;margin:auto;color:#ffffff;border:solid 2px #bb9999; border-radius:30px;}
a.bordbruncadre {font-family:"Times New Roman", Times, serif;color:#ffffff;text-decoration:none;}
a.bordbruncadre:hover {color:#ff2222;}


.LeLabel,
.LaCheckBox { display: none; }
.menu {  display: block;flex-wrap: wrap;margin: 0;padding: 0; }
.menu {  max-width:1400px;margin:0 auto;display:flex; justify-content:center;}

/* margin  haut | droit | bas | gauche */
a.lemenuA {   padding:5px 10px;margin:15px 5px 5px 0px;color:#ff2222;  text-decoration:none;  font-size:24px;border:solid 1px #ffffff; border-radius:30px;}
a.lemenu {   padding:5px 10px;margin:15px 5px 5px 0px;color:#ffffff;  text-decoration:none;  font-size:24px;border:solid 1px #ffffff; border-radius:30px;}
a.lemenu:link {}
a.lemenu:hover {color:#FF2222;}

/* __________________________blog__livre-or_____tchat________________________  */
form.blogsaisie{border:#ffffff solid 1px;padding:22px;width:auto;max-width:900px;border-radius:10px;text-align:center;}
label.saisie_commentaire{text-align:right;width:100px;display:inline-block;vertical-align:top;font-weight:bold;margin-right:22px;}
div.centre4blanc{height:auto;width:auto;max-width:1100px;margin:auto;text-align:center;}
div.centre01 { width :auto; margin :auto; text-align :center; }
div.blog {height :auto;width :auto; max-width :700px;margin :auto; padding : 0px 10px 0px 10px; text-align :center;border: 2px solid #ffffff; border-radius : 20px;}
div.blog600 {height :auto;width :auto; max-width :600px;margin :auto; padding : 0px 10px 0px 10px; text-align :center;border: 2px solid #ffffff; border-radius : 20px;}
textarea.blog  {background-color:#ffffff;border:#557bee solid 1px;padding:4px;width:400px;height:240px;border-radius:10px;}
figure.blog {display: flex;border: 1px solid #ffffff;border-radius: 20px;padding:5px;margin:auto;width:80%;align-items: center;}
img.blog {width:80px;width:80px;border-radius:50%; line-height:3em;}
p.blog  {text-align:justify;margin:0.5em 0;}
figcaption.blog {padding:0;padding-left:2em;}
figure.blogREP {display: flex;border: 1px solid #FF2222;border-radius: 20px;padding:5px;margin:auto;width:80%;align-items: center;}
img.blogREP {width:80px;width:80px;border-radius:50%; line-height:3em;}
p.blogREP  {text-align:justify;margin:0.5em 0;}
figcaption.blogREP {padding:0;padding-left:2em;}
div.LesReponses {  height:auto;width:auto;max-width:1000px;margin:auto;text-align:center;}
div.LeRetourL {  width:auto;max-width:1000px;margin:auto;text-align:center;}
div.choix {width:auto;max-width:400px;padding: 30px;margin:auto;font-family: "Times New Roman", Times, serif;border: 2px solid #000000;border-radius: 20px;text-align:left;}
div.choix2 {width:auto;max-width:600px;padding: 30px;margin:auto;font-family: "Times New Roman", Times, serif;text-align:left;}

/*___________________saisie input hauteur________________________________ */

img.Xleft {    float: left;    margin: 0em 1em 0.5em 0em;    border: none;}


/* ______________________notre metier _______________________ */

div.centreFade {height:300px;width:90%;max-width:500px;margin:auto;position: relative;}
img.fade {position: absolute;top:0px;left:0px;}
/* ___________________divers__1_______________________________ */
figure.blogTOPO {display: flex;border: 1px solid #ffffff;border-radius: 20px;padding: 5px;
 margin: 2em auto;align-items: center;max-width: 400px;}  
figcaption.blogTOPO {margin: auto;}
.blogTOPO p {text-align: center;margin: 5px auto;color: #ffffff;}
img.blogTOPO {width: 80px;height: 80px;}

b.b-bleu,
a.b-bleu {color:#ffffff;}
a.b-bleu:hover { color :#FF2222; }

p.txtjust { text-align:justify;}
span.bordbrun {color:#ffffff;}
/* __________________________2_______________________________ */
label,
textarea {  letter-spacing: 1px;}
textarea.saisie_commentaire{background-color:#f2f2f2;border:#ffffff solid 1px;padding:4px;width:400px;height:240px;border-radius:10px;}


/* ____________le bas footer_________  */
a.LesAcoryght{font-family:"Times New Roman", Times, serif;color:#feffff;text-decoration:none;}
a.LesAcoryght:hover{color:#FF2222;}

/* ____________les pages____________  */

a.LesA{font-family:"Times New Roman", Times, serif;color:#ffffff;text-decoration:none;}
a.LesA:hover{color:#ff2222;}
a.LesA3 {font-family :"Times New Roman", Times, serif;color :#ffffff; text-decoration :none; } 
a.LesA3:hover { color :#ff2222; }
a.LesA31 {font-family :"Times New Roman", Times, serif;color :#ffffff; text-decoration :none; } 
a.LesA31:hover { color :#FF2222; }

a.LesA12{font-family:"Times New Roman", Times, serif;color:#ffffff;text-decoration:none;}
a.LesA12:hover{color:#ff2222;}
a.LesAHaut{font-family:"Times New Roman", Times, serif;color:#ffffff;text-decoration:none;border-bottom:1px;line-height:200%;}
a.LesAHaut:hover{color:#FF2222;}
a.LesAC{font-family:"Times New Roman", Times, serif;color:#ffffff;text-decoration:none;border-bottom:1px;line-height:200%;}
a.LesAC{color:#eeaaaa;}

span.leTitre{font-family: "Felix Titling", "Times New Roman", Harrington, sans-serif;font-size: 40px;color:#aaaaaa;}
span.LaFonte_blog{font-family:"Times New Roman", Times, serif;color:#feffff;}
span.LaFonte_blog_left{text-align:left;font-family:"Times New Roman", Times, serif;color:#feffff;}
span.LaFonte_rouge{font-family:"Times New Roman", Times, serif;color:#ee5555;}
span.LaFonte_blog{font-family:"Times New Roman", Times, serif;color:#feffff;}
span.LaFonte_rouge{font-family:"Times New Roman", Times, serif;color:#ee5555;}
span#u_0_2{color:#ffffff;}
div.centre2Left { text-align:left; margin:auto; width:90%;} 
.menu-carre2{width:330px;height:255px;margin:0 0.8% 0.8% 0;position:relative;float:left;display:inline;border:#ffffff solid 2px;overflow:hidden;}
.menu-carre3{width:330px;height:255px;margin:0 0.8% 0.8% 0;position:relative;float:left;display:inline;border:#ffffff solid 2px;overflow:hidden;}
div.mescarres{width: 270px;border: 1px solid black;text-align: center; padding: 1px 1px 1px 1px;display: inline-flex;height: 240px;margin: 1px 1px 1px 1px;}
div.mesInterlignes {line-height: 20px;}
span.codephp{font-family:"Times New Roman", Times, serif;color:#1111aa;padding:10px;}
div.centrephp{width:90%;margin:auto;text-align:left;border:1px solid #ffffff;border-radius:20px;background-color:#ffffff;}
img.img-circle {  border-radius: 50%;width:60px;height:60px; }
img.img-home { width:60px;height:60px; }
img.lesliens2{float:left;margin:10px;vertical-align:middle;}
div.lesliens500 {float:left;margin:10px;border:5px solid #ffffff;width: 500px;height: 500px;border-radius: 50%;}
img.lesliens500 {  width: inherit;height: inherit;border-radius: inherit;}
/* _________________________________ */

div.lartiste {  float:left;  align-items: left;    margin: 10px auto;
  border: 5px solid #ffffff;  width: 210px; border-radius: 50%;  overflow: hidden;}
img.lartiste {  width: 100%;  height: 100%;  object-fit: cover;}

div.lartiste2 {float:left;margin:10px;border:5px solid #ffffff;width: 210px;height: 210px;border-radius: 50%;overflow:hidden;}
img.lartiste2 {  width: inherit;height: inherit;border-radius: inherit;}
img.lartiste3{margin:10px;vertical-align:middle;width:120px;height:120px;}
div.lesliens {float:left;margin:10px;border:5px solid #ffffff;width: 210px;height: 210px;border-radius: 50%;overflow:hidden;}
img.lesliens {  width: inherit;height: inherit;border-radius: inherit;}
img.lesliens3{margin:10px;vertical-align:middle;width:120px;height:120px;}
img.lesliens4{margin:10px;vertical-align:middle;width:200px;height:200px;}
img.mescarres{width:250px;height:120px;border:0px;}
img.im300{vertical-align:middle;}
img.bande{height: auto;width: 90%;max-width: 1000px;  margin: auto;}
img.bande2{width:100%;max-width:1000px;display: Flex;margin-left:auto;margin-right: auto; }
div.centre0{width:90%;margin:auto;text-align:left;background-color:#eeeeee;border-radius:20px;}
div.champ { height:300px; width:300px; border: 1px solid #ffffff;text-align:center;}
div.Connecter1 {height:auto;width:auto;max-width:400px;margin:auto;text-align:center;z-index :160;}
input.champ {    height:34px;font-family:"Times New Roman", Times;}
input.submit {    height:34px;font-family:"Times New Roman", Times;}
p.le300{width:325px;height:252px;line-height:225px;text-align:center;}
p.voir{border-right:1px solid #ffffff;}
p.Leleftphp{text-align:left;padding:10px;}
p.Leleft{text-align:justify;font-family:"Times New Roman", Times, serif;color:#feffff;}
p.Leleft2{text-align:left;font-family:"Times New Roman", Times, serif;color:#feffff;}
p.mesInterlignes {text-align:justify;font-family:"Times New Roman", Times, serif;color:#feffff;line-height: 20px;}
p.Center{text-align:center;font-family:"Times New Roman", Times, serif;color:#feffff;}

div.tchatxx {height :auto;width :auto; max-width :800px; margin :auto; text-align :center;
border-bottom : 1px solid #ffffff;border-left : 1px solid #ffffff;border-top : 1px solid #ffffff;border-right : 1px solid #ffffff;
box-shadow : -1px -1px 0 #ffffff, -1px -1px 0 #ffffff inset;border-top-left-radius : 20px;border-top-right-radius : 20px;
border-bottom-right-radius : 20px;border-bottom-left-radius : 20px;}


div.PetitBloque {height :auto;width :auto; max-width :900px; margin :auto; text-align :center;
border-bottom : 1px solid #ffffff;border-left : 1px solid #ffffff;border-top : 1px solid #ffffff;border-right : 1px solid #ffffff;
box-shadow : -1px -1px 0 #ffffff, -1px -1px 0 #ffffff inset;border-top-left-radius : 20px;border-top-right-radius : 20px;
border-bottom-right-radius : 20px;border-bottom-left-radius : 20px;}


/* ________section = img et txt ______________   */

.centreXblanc > article > figure img  {    max-width:100%;  } 


/* ________________________________________ */

/* facon texte autour rond */


.LeTexte {height:auto;width:auto;max-width:900px;margin:auto;padding:30px;box-sizing:border-box;border-radius:10px;box-shadow: 0 15px 50px rgba(0,0,0,-2);}
.LeRond {width:500px;height:500px;background:url(https://www.fox-infographie.com/logos/gaulin_huguette.jpg);background-size:100% 100%;
border-radius:50%;float:left;shape-outside:circle();margin:20px}


/* _______________________________________________________________________________________ */
div.centre2blanc{height:auto;width:auto;max-width:900px;margin:auto;text-align:center;}

label,
textarea {font-size: 20px;letter-spacing: 1px;}

input#LinputMdpa { box-sizing: border-box;width: 200px; height: 30px; padding-left: 8px; vertical-align: top;}
button#LbuttonMdpa {vertical-align: top;width: 30px;height: 30px; cursor: pointer;margin:0;padding:0;}
img#LimgMdpa {width:25px;vertical-align: middle;}

input#LinputMdpb { box-sizing: border-box;width: 200px; height: 30px; padding-left: 8px; vertical-align: top;}
button#LbuttonMdpb {vertical-align: top;width: 30px;height: 30px; cursor: pointer;margin:0;padding:0;}
img#LimgMdpb {width:25px;vertical-align: middle;}

input#LinputMdpc { box-sizing: border-box;width: 200px; height: 30px; padding-left: 8px; vertical-align: top;}
button#LbuttonMdpc {vertical-align: top;width: 30px;height: 30px; cursor: pointer;margin:0;padding:0;}
img#LimgMdpc {width:25px;vertical-align: middle;}

.ow-anywhere { 
  overflow-wrap: anywhere; 
}
/* exemple
<em class="ow-anywhere">
*/
pre, samp {overflow-wrap: anywhere;}

input#LinputMdpa { box-sizing: border-box;width: 200px; height: 30px; padding-left: 8px; vertical-align: top;}
img#LimgMdpa {width:20px;vertical-align: middle;}

input#LinputMdpb { box-sizing: border-box;width: 200px; height: 30px; padding-left: 8px; vertical-align: top;}
img#LimgMdpb {width:20px;vertical-align: middle;}

input#LinputMdpc { box-sizing: border-box;width: 200px; height: 30px; padding-left: 8px; vertical-align: top;}
img#LimgMdpc {width:20px;vertical-align: middle;}

input#LinputMdpd { box-sizing: border-box;width: 200px; height: 30px; padding-left: 8px; vertical-align: top;}
img#LimgMdpd {width:20px;vertical-align: middle;}

input#LinputMdpe { box-sizing: border-box;width: 200px; height: 30px; padding-left: 8px; vertical-align: top;}
img#LimgMdpe {width:20px;vertical-align: middle;}

input#LinputMdpf { box-sizing: border-box;width: 200px; height: 30px; padding-left: 8px; vertical-align: top;}
img#LimgMdpf {width:20px;vertical-align: middle;}

/* ==================================================  */
img.leleft {padding: 20px;border-radius:50%;width: 70px;height: 70px;}
img.bande { width :90%; } 


ul.ulleft li {
	padding:4px 4px 6px 5px;
	border-bottom: 1px #666 dashed;
        text-align: left;
	}


/* ====================================================== */



/* ____________________media640px en min width___POUR ARTICLE FIGURE etc___________________ */
@media screen and (min-width:640px){
/* ________section = img et txt ______________   */  
  .centreXblanc > article { display:flex; justify-content:center;  align-items:center;  }
  .centreXblanc > article > figure,
  .centreXblanc > article > div   { flex:1 1 45%;  width:45%;  }
  .centreXblanc > div {  display: block;   width: auto;  }
/* ____________________________________   */
}

@media (min-width: 750px) and (max-width: 1400px) { 
div.Limage_de_droite{display:none;}
}

@media (max-width:750px){  
body, element1, element2 {width:auto;margin : 0;}
img,blockquote, pre, textarea, input, iframe, object, embed, video {max-width:90%;	height: auto;}
textarea {overflow-wrap:break-word;hyphens:auto;}
pre, samp {overflow-wrap: anywhere;}

div.Limage_de_droite{display:none;}
figure.blog {display:flex;border: 1px solid #ffffff;border-radius: 20px;padding:5px;width:90%}
span.leTitre {font-family: "Felix Titling", "Times New Roman", Harrington, sans-serif;color:#aaaaaa;}
div.lesliens {float:left;margin:10px;border:5px solid #ffffff;width: 120px;height: 120px;border-radius: 50%;overflow:hidden;}
img.lesliens {  height: auto;width: 120px;margin: auto;}
img.lesliens3{margin:10px;vertical-align:middle;width:100px;height:100px;}
img.lesliens4{margin:10px;vertical-align:middle;width:120px;height:120px;}

div.lartiste2 {float:left;margin:10px;border:5px solid #ffffff;width: 50%;border-radius: 50%;overflow:hidden;}
img.lartiste2 {  width: 50%;margin: auto;}
  
  div.lartiste {    margin: 10px auto;    border: 5px solid #ffffff;    width: 120px;    height: 120px;  }
  img.lartiste {    width: 100%; max-width: inherit;   height: 100%;    object-fit: cover;  }

img.lartiste3{margin:10px;vertical-align:middle;width:100px;height:100px;}

.menu {display: none;width: 300px;}
.LaCheckBox,.LeLabel  {display:block;width:30px;}

.LaCheckBox:checked ~ .menu {    display: block;display: flex;flex-wrap: wrap;flex-direction:column; }
.LaCheckBox {opacity: 0;	position: absolute;	top: -5000px;}
.LaCheckBox:focus + .LeLabel { outline: #000000 auto 5px;}
.LeLabel {justify-content: space-between}
.LeLabel {margin-left: auto;} 


}