/* @override
	http://valocarb2018.local/css/css_helper.css
	http://fa2022.local/css/css_helper.css */



/* @group iPad Retina / HD Version */
/*@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (max--moz-device-pixel-ratio: 2),
(-webkit-min-device-pixel-ratio: 1.5),
screen and (max--moz-device-pixel-ratio: 1.5) {


}*/
/* @end */


/* VERSION DU 28 OCT 2025 */
/* Ajout des dimensions de la fenêtre CSS only, trouvé ici : https://codepen.io/t_afif/pen/NPxMEqG */


:root {
  --w: calc(100vw/1px); /* screen width */
  --h: calc(100vh/1px); /* screen height*/
  /* The result is an integer without unit  */
}




/* OUTLINE ALL */
html.outline h1, html.outline h2, html.outline h3, html.outline h4, html.outline h5 {
	outline: rgba(5, 242, 247, 0.5) dashed 1px!important;
}
html.outline p, html.outline ul, html.outline li, html.outline div, html.outline nav, html.outline header, html.outline footer, html.outline, html.outline body {
	outline: rgba(255, 255, 255, 0.5) dashed 1px!important;
}
html.outline img {
	outline: black solid 2px!important;
}
html.outline a {
	outline: red solid 2px!important;
}


/* @group MEDIA QUERY - RESPONSIVE DESIGN */
#debugcss {
	position: fixed;
	left: 34px;
	top: 27px;
	font-size: 12px;
	color: #000000;
	background-color: rgba(255, 255, 255, 0.76);
	display: block;
	z-index: 99999;
}
body:before, body:after {
	content:"CSS | Responsive Design non supporté / Mode normal";
	position: fixed;
	bottom: 10px;
	right: 10px;
	font-size: 12px;
	color: #111;
	z-index: 99999;
	background-color: #fecb41;
	display: block;
	padding: 5px 10px;
	border-radius: 6px;
}
body:after {
	left: 10px;
	right: auto;
  	counter-reset: h var(--h) w var(--w);
}
/* MIN-WIDTH */
@media (min-width:0px) {
	body:after {
		content: "CSS | moins de 320px | SM | " counter(w) "x" counter(h);
	}
}
@media (min-width:320px) {
	body:after {
		content: "CSS | min-width:320px | S | " counter(w) "x" counter(h);
	}
}

@media (min-width:414px) {
	body:after {
		content: "CSS | min-width:414px | S | " counter(w) "x" counter(h);
	}
}

@media (min-width:481px) {
	body:after {
		content: "CSS | min-width:480px | SM | " counter(w) "x" counter(h);
	}
}

@media (min-width:640px) {
	body:after {
		content: "CSS | min-width:640px | M | " counter(w) "x" counter(h);
	}
}

@media (min-width:768px) {
	body:after {
		content: "CSS | min-width:768px | M | " counter(w) "x" counter(h);
	}
}

@media (min-width:800px) {
	body:after {
		content: "CSS | min-width:800px | LM | " counter(w) "x" counter(h);
	}
}

@media (min-width:900px) {
	body:after {
		content: "CSS | min-width:900px | LM | " counter(w) "x" counter(h);
	}
}

@media (min-width:993px) {
	body:after {
		content: "CSS | min-width:800px | L | " counter(w) "x" counter(h);
	}
}

@media (min-width:1024px) {
	body:after {
		content: "CSS | min-width:1024px | L | " counter(w) "x" counter(h);
	}
}

@media (min-width:1280px) {
	body:after {
		content: "CSS | min-width:1280px | LL | " counter(w) "x" counter(h);
	}
}

@media (min-width:1400px) {
	body:after {
		content: "CSS | min-width:1400px | LL | " counter(w) "x" counter(h);
	}
}

@media (min-width:1440px) {
	body:after {
		content: "CSS | min-width:1440px | LL | " counter(w) "x" counter(h);
	}
}

@media (min-width:1600px) {
	body:after {
		content: "CSS | min-width:1600px | XL | " counter(w) "x" counter(h);
	}
}

@media (min-width:1680px) {
	body:after {
		content: "CSS | min-width:1680px | XL | " counter(w) "x" counter(h);
	}
}

@media (min-width:1720px) {
	body:after {
		content: "CSS | min-width:1720px | XL | " counter(w) "x" counter(h);
	}
}

@media (min-width:1800px) {
	body:after {
		content: "CSS | min-width:1800px | XL | " counter(w) "x" counter(h);
	}
}

@media (min-width:1920px) {
	body:after {
		content: "CSS | min-width:1920px | XL | " counter(w) "x" counter(h);
	}
}


/* MAX-WIDTH */
@media (max-width:2560px) {
	body:before { content:"CSS | max-width:2560px"; }
}

@media (max-width:1920px) {
	body:before { content:"CSS | max-width:1920px"; }
}

@media (max-width:1720px) {
	body:before { content:"CSS | max-width:1720px"; }
}

@media (max-width:1680px) {
	body:before { content:"CSS | max-width:1680px"; }
}

@media (max-width:1600px) {
	body:before { content:"CSS | max-width:1600px"; }
}
@media (max-width:1440px) {
	body:before { content:"CSS | max-width:1440px"; }
}

@media (max-width:1400px) {
	body:before { content:"CSS | max-width:1400px"; }
}

@media (max-width:1360px) {
	body:before { content:"CSS | max-width:1360px"; }
}

@media (max-width:1280px) {
	body:before { content:"CSS | max-width:1280px"; }
}

@media (max-width:1200px) {
	body:before { content:"CSS | max-width:1200px"; }
}

@media (max-width:1130px) {
	body:before { content:"CSS | max-width:1130px"; }
}

@media (max-width:1080px) {
	body:before { content:"CSS | max-width:1080px"; }
}

@media (max-width:1024px) {
	body:before { content:"CSS | max-width:1024px (iPad)"; }
}

@media (max-width:992px) {
	body:before { content:"CSS | max-width:992px"; }
}

@media (max-width:980px) {
	body:before { content:"CSS | max-width:980px"; }
}

@media (max-width:960px) {
	body:before { content:"CSS | max-width:960px"; }
}

@media (max-width:900px) {
	body:before { content:"CSS | max-width:900px"; }
}

@media (max-width:840px) {
	body:before { content:"CSS | max-width:840px"; }
}
@media (max-width:800px) {
	body:before { content:"CSS | max-width:800px"; }
}
@media (max-width:768px) {
	body:before { content:"CSS | max-width:768px"; }
}

@media (max-width:740px) {
	body:before { content:"CSS | max-width:740px"; }
}

@media (max-width:640px) {
	body:before { content:"CSS | max-width:640px";	}
}

@media (max-width:600px) {
	body:before { content:"CSS | max-width:600px"; }
}

@media (max-width:480px) {
	body:before { content:"CSS | max-width:480px"; }
	body:after {
		bottom: 42px;
	}
}
@media (max-width:414px) {
	body:before { content:"CSS | max-width:414px (iPhone 6/7/8 plus | XR)"; }
}
@media (max-width:375px) {
	body:before { content:"CSS | max-width:375px (iPhone 6/7/8 | X | XS)"; }
}
@media (max-width:360px) {
	body:before { content:"CSS | max-width:360px (Samsung S7/S8/S9)"; }
}
@media (max-width:320px) {
	body:before { content:"CSS | max-width:320px (iPhone 5)"; }
}