ul,ol {list-style-type: none;margin: 0;padding: 0;}

p, h1, h2, h3, h4, h5, h6, a{
color:var(--txt_art_color);
}

a:link {text-decoration: none;margin:0 0;padding:0 0;color:grey}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;font-weight:bold;color:firebrick;}
a:active {text-decoration: underline;}


/* *********HEADER************* */
/* **************************** */

header .HDR7 h1, 
header .HDR7 h2, 
header .HDR7 h3, 
header .HDR7 h4, 
header .HDR7 h5, 
header .HDR7 h6{
display: inline;
margin-left: 0%;
overflow-x: scroll;
color:var(--txt_art_color);
}

header .HDR7 p,
header .HDR7 a{
display: inline;
font-size: inherit;
margin-left: 0%;
overflow-x: scroll;
color:var(--txt_art_color);
overflow-x: scroll;
}

header .HDR7 a:hover{
text-decoration: none;font-weight:normal;color:firebrick;
}

header .HDR7 p:first-child{
margin-left: -1%;
font-size: 140%;
color:var(--top_m0_color);
}

header .HDR7 p:first-child::before{
content: "";
font-size: 100%;
color:firebrick;
}


header .HDR7 p:not(first-child)::before{
content: "\203A \00a0 ";
font-size: 100%;
color:firebrick;
padding-right: 1%;
overflow-x: scroll;
}

header .HDR7 p:not(first-child){
font-size: 130%;
text-indent: 1em;
color:var(--txt_art_color);
overflow-x: scroll;
}

header .HDR7 p:nth-child(3){
font-size: 118%;
overflow-x: scroll;
}

/* **************************** */

header .HDR5a{/* dark mode*/
display: flex;
width: 100%;
height:100%;
border-left:1px dotted var(--border_v);
}

header .HDR5b{/* dark mode*/
display: flex;
align-items: center;
width: 100%;
height:100%;
margin-bottom: 10%;
margin-top: -6%;
border:0px solid purple;
}


/* **************************** */
/* **************************** */
/* **************************** */
/* **************************** */

/* *********NAV************* */
/* **************************** */
/* **************************** */

nav ul {
list-style: none;
font-size: 130%;
width: 90%;
line-height: 180%;
margin-top: 12%;
margin-left: 5%;
padding-left: 8%;
padding-top: 3%;
padding-bottom: 5%;
border:1px dotted var(--border_nav);
border-radius: 2%;

	a {
	display: block;
	text-decoration: none;
	text-align: left;
	color: #555;
	color: grey; /* Black text color */
	color:var(--top_m0_color);
	color:LightSlateGray; /* Black text color */
	}

	a:link {text-decoration: none;color:var(--vmenu_m0_color)}
	a:visited {text-decoration: none;}
	a:hover {text-decoration: none;font-weight:bold;color:firebrick;}
	a:active {text-decoration: underline;}
}



nav .active::before{
display: inline-block;
content: "\2022";
font-weight: bold;
width: .8em;
margin-left: -0.8em;
color:var(--top_hdr_chev);
}


/* *********ARTICLE************* */
/* **************************** */
/* **************************** */

/* *********MAIN */
main h1, main h2, main h3, 
main h4, main h5, main h6, 
main p{
color:var(--txt_main_color);
display: block;
}

main h1, main h2, main h3, main h4, main h5, main h6{
margin-left: 1.75%;
padding-bottom: 2%;
}

/* *********MAIN Article */
main article h1, main article h2, main article h3,
main article h4, main article h5, main article h6{
margin-left: 1.75%;
margin-top: 0;
padding-bottom: 0%;
color:var(--txt_main_color);
}

main article h1:first-of-type{
margin-left: 1.75%;
margin-top: 0;
padding-bottom: 0%;	
}

main article h1:not(:first-of-type) {
margin-top: 8%;
margin-bottom: 3%;
}

main article h2:first-of-type{
margin-top: 3%;
margin-bottom: 1%;
margin-left: 1.75%;
}

main article h2:not(:first-of-type) {
margin-top: 5%;
margin-bottom: 2%;
}

main article h3:first-of-type{
margin-top: 3%;
margin-bottom: 1%;
margin-left: 1.75%;
}

main article h3:not(:first-of-type) {
margin-top: 5%;
margin-bottom: 2%;
}

main article h4:first-of-type,
main article h5:first-of-type,
main article h6:first-of-type{
margin-top: 4%;
margin-bottom: 1%;
margin-left: 1.75%;
}

main article h4:not(:first-of-type) {
margin-top: 7%;
margin-bottom: 2%;
}

main article h4:not(:first-of-type),
main article h5:not(:first-of-type),
main article h6:not(:first-of-type) {
margin-top: 5%;
margin-bottom: 2%;
}

article p:first-of-type{
margin-top:4%;
font-size: 120%;
width:90%;
padding-left: 2%;
padding-right: 2%;
text-indent: 2%;
line-height: 165%;
color:ar(--bg);
}

article p{
margin-top: 2%;
font-size: 120%;
width:90%;
padding-left: 2%;
padding-right: 2%;
text-indent: 2%;
line-height: 165%;
color:ar(--bg);

	a:link {
	display:inline;
	text-decoration: none;
	color:var(--lien_art);
	border-bottom:1px dotted tomato;
	}
}



/* article section */
main article section{
/*margin-top: 8%;
margin-bottom: 8%;
border: 0px dotted lime;*/
}

article section.sect_a1{
width: 90%;
padding: 5% 0.5%;
border: 1px dotted grey;
	p{
	color:inherit;
	width: 100%;
	text-align: inherit;
	margin-top: -1.5%;
	margin-bottom: -1%;
	}
}

/* tag keyword */

mcle-1{color:var(--keyw1_color);}
mcle-2{color:var(--keyw2_color);}/*keyw3a_color*/
mcle-3{color:var(--keyw3_color);}/*keyw2_color*/
mcle-4{color:var(--keyw4_color);}/*keyw3_color*/
mcle-5{
color:var(--keyw5_color);/*keyw5_color*/
font-size: 90%;
font-style: italic;
}

.note {
width: 70%;
margin-left: 5%;
margin-top:2%;
color:var(--keyw3_color);
background: lightyellow;
border: 1px solid yellow;
padding: 1rem;
border-radius: 10px;
}

figcaption{
text-align: left;
margin-left: 15%;
margin-top: 0.5%;
margin-bottom: 0.5%;
color:#393838;
}

/* tag hr line */

hr.hr02 {
border: 0;
height: 1px;
margin-bottom: 8%;
margin-top: 8%;
margin-left:4%;
background-image: linear-gradient(to right, var(--border_v), var(--border_dm_btn), var(--border_v));
width:90%;
}

hr.hr02a {
border: 0;
height: 1px;
margin-bottom: 8%;
margin-top: 8%;
margin-left:24%;
background-image: linear-gradient(to right, var(--border_v), var(--border_dm_btn), var(--border_v));
width:40%;
}

/*hr3 aaa*/
hr.hr3 {
margin-top: 5%;
margin-bottom: 5%;
margin-left: 38%;
border: 0;
}

hr.hr3--dots {
overflow: visible;
border: 0;
content: "";
background-color: var(--hr5_col);
display: block;
height: 7px;
width: 7px;
border-radius: 50%;
position: relative;
}

hr.hr3--dots:before {
content: "";
background-color: var(--hr5_col);
display: block;
height: 7px;
width: 7px;
border-radius: 50%;
position: absolute;
left: -32px;
-webkit-animation: dot-move-left 2.05s ease-out forwards;
  animation: dot-move-left 2.05s ease-out forwards;
}
hr.hr3--dots:after {
content: "";
background-color: var(--hr5_col);
display: block;
height: 7px;
width: 7px;
border-radius: 50%;
position: absolute;
left: 32px;
-webkit-animation: dot-move-right 1.05s ease-out forwards;
  animation: dot-move-right 1.05s ease-out forwards;
}

@-webkit-keyframes dot-move-right {
0% {
left: 0;
}
100% {
left: 32px;
}
}

@keyframes dot-move-right {
0% {
left: 0;
}
100% {
left: 32px;
}
}
@-webkit-keyframes dot-move-left {
0% {
left: 0;
}
100% {
left: -32px;
}
}
@keyframes dot-move-left {
0% {
left: 0;
}
100% {
left: -32px;
}
}

hr.hr5 {
  border: none;
  border-top: 3px dotted #999;
  color: #999;
  background-color: #fff;
  height: 1px;
  margin: 20px 0;
}

hr.hr6 {
  height: 20px;
  border: none;
  position: relative;
  background: #eaeaea;
}

hr.hr6::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 20px;
  background-image: radial-gradient(#4a7c59 0%, #4a7c59 50%, transparent 50%, transparent 100%);
  background-size: 20px 20px;
}

hr.hr7 {
  height: 20px;
  border: none;
  position: relative;
  background: #eaeaea;
}

hr.hr7::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' height='100%25' width='100%25'><path d='M0 20 Q 25 0, 50 20 T 100 20 L 100 100 L 0 100 Z' fill='%234a7c59'/></svg>");
  background-repeat: repeat-x;
}

hr.hr8 {
  display: block;
  position: relative;
  width: 100%;
  height: 2px;
  margin: 3rem 0 5rem 0vw;
  left: 0%;
  border: none;
  border-bottom: 4px dashed rgba(124, 70, 87, 0.25);
  float: left;
}
hr.hr8 ~ * {
  clear: both;
}

/*HR zzz*/

/* tag pre */

pre{
margin-left: 2%;
white-space: pre-wrap;       /* Since CSS 2.1 */
white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
width: 80%;
}

/* index 000 pre demo keyw*/
mdemo-1{
font-size: var(--text_xs);
color:var(--kwmdemo_col);
margin-left: 10%;
}

/* art style telech clé */
.telech{
  margin-top:5%;
  font-size: var(--text_xsl);
  text-align: left;
  text-indent: 2%;
  margin-left: 5%;
  padding: 1% 0%;
  padding-left: 7%;
  width: 40%;
  border:1px dotted green;
  border-spacing: 15px;

 a{color:var(--telech_col);}
 a:link {color:var(--telech_col);border:0;}
 a:visited {color:var(--telech_col);}
 a:active {color:var(--telech_col);}
 a:hover{color:var(--telech_col_hov);}
}

article .figcaptpre001{
margin-left: -2%;
padding-top:2%;
}

/* article default table aaa */
table{
width: 50%;
margin-top: 2.5%;
margin-left: 15%;
margin-bottom: 3%;
border-collapse: collapse;
border: 1px solid var(--border_v);
}

table, table th, table td {
border-collapse: collapse;
margin: 25px 0;
margin-top: 0%;
margin-bottom: 4%;
margin-left: 14%;
font-size: 0.9em;
padding: 2%;
color:var(--txt_main_color);
font-family: sans-serif;
border-collapse: collapse;
border: 1px solid var(--border_v);
}
/* article default table zzz */
/* art default table aaa */

/* art default table zzz */

/* art image pre basic text AVEC LN zzz */

/* *********ASIDE************* */
/* **************************** */
/* **************************** */

aside h2{
line-height: 200%;
}

aside p{
color:var(--txt_ftr_color);
}

aside ul, aside li, aside a{
color:var(--txt_art_color);
color:lime;
}

aside ul{
margin-top: 5%;
font-size: 100%;
width: 90%;
}

/* *********FOOTER************* */
/* **************************** */
/* **************************** */


footer .FTR1, 
footer .FTR2, 
footer .FTR3, 
footer .FTR4{
width: 100%;height:100%;
}

.FTR1 p, .FTR1 a,
.FTR2 p, .FTR1 a,
.FTR3 p, .FTR1 a,
.FTR4 p, .FTR1 a{
color:var(--txt_ftr_color);
}


footer .FTR1{
grid-column: 1 / 2;
}

footer .FTR1 a{
	color:grey;
}

footer .FTR1 p, 
footer .FTR1 a{

}

footer #p_vers{
  color:var(--top_hdr_chev);
  font-style: italic;
  font-size: 115%;
  margin-left: 42%;
  font-size: 90%;
}

footer #a_vers{
  color:var(--top_hdr_chev);
  font-style: italic;
  font-size: 115%;
  margin-left: 42%;
  font-size: 90%;
}

footer .FTR1 a:hover{
text-decoration: none;
}

footer .FTR2{
grid-column: 2 / 3;
}

footer .FTR2  p{
margin-left: 0%;
font-style: italic;
}

footer .FTR3{
grid-column: 3 / 4;
display: inline;
}

footer .FTR3 p{
display: inline;
}

footer .FTR4{
grid-column: 4 / 5;
display: inline;
visibility: hidden;
}