:root{
	--mobile-breakpoints : 320px; --tablets-breakpoints : 481px; --laptops-breakpoints : 769px; --desktops-breakpoints : 1025px; --tv-breakpoints : 1201px;
	
	--grid-template-rows: [nav-start] minmax(50px, auto) [header-start] minmax(100px, auto) [main-start] minmax(50vh, 1fr) [main-end] minmax(150px, auto) [page-end];/*NEW template-rows */
	
	--hue: 50; --sat : 100%; --light: 45%; /* 9; --sat : 96%; --light: 44%*/
	--primaryColor :hsl(var(--hue), var(--sat), var(--light)); /* 		#dcbf04 #dc2504  (#FCDC01)   triade green #98DB04 hsl(79, 96%, 44%) blue #044EDB hsl(219, 96%, 44%) complementar #04DB80 hsl(155, 96%, 44%) */
	--basicFontColor:  hsl(var(--hue), var(--sat), 8%);/*     hsl(from var(--primaryColor) calc(h + 3) calc(s + 4) calc(l - 1))*/
	--basicLinkColor: #222;
	--basicContraFontColor: hsl(0, 0%, 100%);
	--basicShadow: hsla(var(--hue),92%, 20%, 0.15);
	--sliderHandleColor: hsla(var(--hue),var(--sat), 64%, 1);
	--sliderWidth: 20px;
	--markColor : hsla(var(--hue),var(--sat), 70%, 0.33);
	--primaryColor75 : hsla(var(--hue),var(--sat), var(--light), 0.75);
	--primaryColor50 : hsla(var(--hue),var(--sat), var(--light), 0.5);
	--primaryColor25 : hsla(var(--hue),var(--sat), var(--light), 0.25);
	--primaryColor05 : hsla(var(--hue),var(--sat), var(--light), 0.05);
	--triad1Color : hsl(219, var(--sat), var(--light));
	--triad2Color : hsl(79, 50%, var(--light));
	--triad1Color25 : hsla(219, var(--sat), var(--light),0.25);
	--triad1Color65 : hsla(219, var(--sat), var(--light),0.65);
	--triad2Color25 : hsla(79, var(--sat), var(--light),0.25);
	--triad2Color65 : hsla(79, var(--sat), var(--light),0.65);
	--classicColor : hsl(var(--hue), 50%, 20%);
	--digitalColor : hsl(219, var(--sat), 20%);
	--goldColor :   hsl(41, 98%, 39%); /* 	hsl(39, 91%, 39%); #be7f09 */
	--goldColor25 :   hsla(41, 98%, 39%,0.25); /* 	hsl(39, 91%, 39%); */
	--prefsColor :   hsla(var(--hue), var(--sat),10%,0.95); 
	
	--reey_font: 'reey';
	--jinky_font: 'jinky';
	--bpdotssquare_font: 'bpdotssquare';
	--loveyalikeasister_font: 'loveyalikeasister';
	--candelaBook_font: 'candelabook';
	--dosisBold_font: 'dosisBold';
	--dosis_font: 'dosis';
	
	--white-100: rgba(255, 255, 255, 1);/* * */
	--white-99: rgba(255, 255, 255, 0.99);/* * */
	--white-98: rgba(255, 255, 255, 0.98);
	--white-95: rgba(255, 255, 255, 0.95);/* * */
	--white-90: rgba(255, 255, 255, 0.9);
	--white-75: rgba(255, 255, 255, 0.75);
	--white-50: rgba(255, 255, 255, 0.5);
	--white-25: rgba(255, 255, 255, 0.25);
	--white-15: rgba(255, 255, 255, 0.15);/* * */
	--white-10: rgba(255, 255, 255, 0.1);
	--black-100: rgba(0, 0, 0, 1);
	--black-95: rgba(0, 0, 0, 0.95);
	--black-90: rgba(0, 0, 0, 0.9);
	--black-80: rgba(0, 0, 0, 0.80);/* * */
	--black-75: rgba(0, 0, 0, 0.75);/* * */
	--black-50: rgba(0, 0, 0, 0.5);
	--black-25: rgba(0, 0, 0, 0.25);
	--black-20: rgba(0, 0, 0, 0.2);
	--black-15: rgba(0, 0, 0, 0.15);/* * */
	--black-10: rgba(0, 0, 0, 0.10);
	--black-05: rgba(0, 0, 0, 0.05);
	
	--body_BckgdColor: var(--white-100);
	--page_BckgdColor: var(--primaryColor);
	
	--aside_BckgdColor: var(--black-80);
	--aside_headerBckgdColor: var(--black-80);
	--asideTabs_checked_BckgdColor: var(--white-95);
	--asideTabs_container_BckgdColor: var(--white-95);
	--aside-overlay_BckgdColor: var(--black-75);
	
	--nav_BckgdColor: var(--black-80);
	--header_BckgdColor: linear-gradient(var(--white-25), var(--black-25));
	--footer_BckgdColor: linear-gradient(var(--white-100), var(--white-75));
	--main_BckgdColor: var(--white-99);
	
	--overlay_BckgdColor: var(--black-75); /* rgba(153, 153, 153, 0.95); */
	--overlay_header_BckgdColor: var(--white-100);

	--overlay_container_BckgdColor: var(--white-100);
	
	--basicSvgColor: var(--basicFontColor);
	--basicSvgSize: 1.6rem;
	
	--MaxWidthContainerSize: 875px;
	--basic-padding : 1rem;
	--container_padding : calc(1.2rem - 1vw);
	
	--border-radius: 1em;
/* 	bulle snippet */
	--bulleColor : hsla(var(--hue),var(--sat), 13%, 0.95);
	--bulleBorderColor: hsla(var(--hue),var(--sat), 42%, 0.8);
	--bulleContentColor: var(--white-100);
	--bulleFiletSize:30px;
	--bullePosFilet: 50%;/* //calc(0px + 43vw ); */
	--bulleBorderWidth: 3px;
	
	--vignetteSize: clamp( 35px, 29.615384615384613px + 30.76923076923077vw, 40px );
	
}
/* --------------------------------------------------------------

   Reinitialise les balises HTML

-------------------------------------------------------------- */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100.01%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
  font-size: 1em;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* Print styles from HTML5 Boilerplate */
@media print {
  * {
    text-shadow: none !important;
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}