/* https://src.chromium.org/viewvc/chrome/trunk/deps/third_party/WebKit/WebCore/css/html4.css?view=markup&pathrev=12596 */
*,*::after,*::before{border:0 none;box-sizing:border-box;margin:0;outline:medium none;padding:0}

hr {height:1px;background-color:#aaa;margin:1em auto;}
ul, ol {/* padding: 0 1.8em 0 1.8em;margin: 0.3em 0; */}
ol ul, ul ol, ul ul, ol ol {margin-top: 0;margin-bottom: 0}
blockquote {padding: 1em}
h1, h2, h3, h4, h5, h6 {/* margin: 0.5em 0 */}
/*  */
/*
.hx{margin: 0.5em 0}
Les marges et tailles navigateur ??? ça m'étonnerait :
.h1{font-size:2em;margin:0.67em 0}
.h2{font-size:1.5em;margin:0.83em 0}
.h3{font-size:1.17em;margin:1em 0}
.h4{font-size:1em;margin:1.33em 0}
*/
li, p {/* line-height: 1.4em;	margin: 0.4em 0; */}
p {margin: 0 auto 0.5em auto;}
a {text-decoration:none}
canvas, img, svg, video {max-width:100%;height:auto}
.bgcover{background:transparent no-repeat center/cover}
.bgcontain{background:transparent no-repeat center/contain}

/* canvas.db, img.db, svg.db, video.db {margin-left: auto;margin-right: auto;} */
:root {
	font-size: 16px;
	/*
	--c1: #144168;
	--c1c: #486c96;
	--c1d: #001b3d;
	--c1t: #a3e5f7;
	
	--c2: #75a585;
	--c2c: #a5d7b5;
	--c2d: #487658;
	--c2t: #a3e5f7;
	
	--c3: #a3e5f7;
	--c4: #ddbfac;
	--c5: white;
	*/
}
/* font-size: min(max(14px, calc(0.417vw + 12px)), 18px); */
.rem {font-size: clamp(14px, calc(0.417vw + 12px), 18px)}

.h100 {height:100%}
.w100 {width:100%}

.flex {display:flex}
.column {flex-flow:column}
.wrap{flex-wrap:wrap}
.nowrap{flex-wrap:nowrap}

.grid {display:grid}


.fl{float:left}
.fr{float:right}
.fn{float:none}
.tac{text-align:center}
.tal{text-align:left}
.tar{text-align:right}
.taj {text-align:justify;hyphens:auto}
.ltr{direction:ltr}
.rtl{direction:rtl}
.rel{position:relative}
.fixed{position:fixed}
.fullfixed{position:fixed; inset:0}
.abso{position:absolute}
.fullabso{position:absolute; inset:0}


.dn{display:none}
.db{display:block}
.di{display:inline}
.dib{display:inline-block}
.dif{display:inline-flex}

.hand{cursor: pointer}
.normal {font-weight: normal}
.bold {font-weight: bold}
.italic {font-style: italic}
.underline {text-decoration:underline}
.strike {text-decoration: line-through}

.aic{align-items:center}
.jic{justify-items:center}
.ase{align-self:end}
.asc{align-self:center}

.vat{vertical-align:top; align-self:self-start}
.vam{vertical-align:middle; align-self:center}
.vab{vertical-align:bottom; align-self:flex-end}

.nobullet {list-style: none}
.nobullet li {list-style: none}
.rounded, .round {border-radius: 50%}
.flipped {transform: scale(-1, 1)}


.oauto {overflow:auto}
.ohidden {overflow:hidden}
.oyhidden {overflow:auto;overflow-x:hidden}
.oxhidden {overflow:auto;overflow-y:hidden}


/* .w200px{width:200px}.w250px{width:250px}.w300px{width:300px}.w350px{width:350px}.w400px{width:400px} */
.wnone{display:none}
.wauto, .hauto {flex:1 1 0px}
/* .w17{width:16.66%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w33{width:33.33%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w67{width:66.66%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w83{width:83.33%}.w100{width:100%}.ord-2{order:-2}.ord-1{order:-1}.ord0{order:0}.ord1{order:1}.ord2{order:2} */

.wmax{margin:auto;width:100%}

@media screen and (min-width: 1024px){
.dh100 {height:100%}
.dw100 {width:100%}
.wmax{max-width:1280px}
.dnone{display:none}.dwauto{flex:1 1 0px}.dw17{width:16.66%}.dw20{width:20%}.dw25{width:25%}.dw30{width:30%}.dw33{width:33.33%}.dw40{width:40%}.dw50{width:50%}.dw60{width:60%}.dw67{width:66.66%}.dw70{width:70%}.dw75{width:75%}.dw80{width:80%}.sw83{width:83.33%}.dw100{width:100%}.dord-2{order:-2}.dord-1{order:-1}.dord0{order:0}.dord1{order:1}.dord2{order:2}

.d2fr {grid-template-columns:repeat(2,1fr)}
.d3fr {grid-template-columns:repeat(3,1fr)}
}

/* tablet 1600/800=2        › 1600/1000=1.6   › 1600/1024=1.5625 */
@media screen and (min-width: 769px) and (max-width: 1023px){
.th100 {height:100%}
.tw100 {width:100%}
/* .wmax{max-width:810px} */
.tnone{display:none}.twauto{flex:1 1 0px}.tw17{width:16.66%}.tw20{width:20%}.tw25{width:25%}.tw30{width:30%}.tw33{width:33.33%}.tw40{width:40%}.tw50{width:50%}.tw60{width:60%}.tw67{width:66.66%}.tw70{width:70%}.tw75{width:75%}.tw80{width:80%}.tw83{width:83.33%}.tw100{width:100%}.tord-2{order:-2}.tord-1{order:-1}.tord0{order:0}.tord1{order:1}.tord2{order:2}

.t2fr {grid-template-columns:repeat(2,1fr)}
.t3fr {grid-template-columns:repeat(3,1fr)}
}

/* smartphone 1600/450=3.56 › 1600/600=2.666 › 1600/768=2.0833 */
@media screen and (max-width: 768px){
.sh100 {height:100%}
.sw100 {width:100%}
/* .wmax{max-width:810px} */
.snone{display:none}.swauto{flex:1 1 0px}.sw17{width:16.66%}.sw20{width:20%}.sw25{width:25%}.sw30{width:30%}.sw33{width:33.33%}.sw40{width:40%}.sw50{width:50%}.sw60{width:60%}.sw67{width:66.66%}.sw70{width:70%}.sw75{width:75%}.sw80{width:80%}.sw83{width:83.33%}.sw100{width:100%}.sord-2{order:-2}.sord-1{order:-1}.sord0{order:0}.sord1{order:1}.sord2{order:2}

.s2fr {grid-template-columns:repeat(2,1fr)}
.s3fr {grid-template-columns:repeat(3,1fr)}
}

@media screen and (max-width: 400px){
/* pour les petits écrans on peut donner 14px › 1400/400=3.5  */
}

/* pour replier - c1,2,3.. bgc1,2,3.. */
@media screen and (min-width: 10px){
	.c1 {color: var(--c1)}
	.bgc1 {background-color: var(--c1)}
	.bgc1c {background-color: var(--c1c)}
	.bgc1d {background-color: var(--c1d)}
	.c2 {color: var(--c2)}
	.bgc2 {background-color: var(--c2)}
	.bgc2c {background-color: var(--c2c)}
	.bgc2d {background-color: var(--c2d)}
	.c3 {color: var(--c3)}
	.bgc3 {background-color: var(--c3)}
	.c4 {color: var(--c4)}
	.bgc4 {background-color: var(--c4)}
	.c5 {color: var(--c5)}
	.bgc5 {background-color: var(--c5)}
}
/* pour replier - pad0,05,15 et marg0,05,15 */
@media screen and (min-width: 10px){
/* on détermine un pad général pour les blocs de texte */
.pad {padding: 1em 2em 2em 2em}
.pad0 {padding: 0}
.pad05 {padding: 0.5em}
.pad1 {padding: 1em}
.pad15 {padding: 1.5em}
.pad2 {padding: 2em}

.pt0 {padding-top: 0em}
.pr0 {padding-right: 0em}
.pb0 {padding-bottom: 0em}
.pl0 {padding-left: 0em}

.pt05 {padding-top: 0.5em}
.pr05 {padding-right: 0.5em}
.pb05 {padding-bottom: 0.5em}
.pl05 {padding-left: 0.5em}

.pt1 {padding-top: 1em}
.pr1 {padding-right: 1em}
.pb1 {padding-bottom: 1em} 
.pl1 {padding-left: 1em}

.pt15 {padding-top: 1.5em}
.pr15 {padding-right: 1.5em}
.pb15 {padding-bottom: 1.5em}
.pl15 {padding-left: 1.5em}

.pt2 {padding-top: 2em}
.pr2 {padding-right: 2em}
.pb2 {padding-bottom: 2em}
.pl2 {padding-left: 2em}

/* à tester › on détermine un pad général pour les blocs de texte - l'avantage des padding c'est qu'ils ne fusionnent pas */
/* .margin {margin: 1em 2em 2em 2em} */
.mauto {margin: auto}
.marg {margin: 1em auto}

.marg0 {margin: 0}
.marg025 {margin: 0.25em}
.marg05 {margin: 0.5em}
.marg1 {margin: 1em}
.marg15 {margin: 1.5em}
.marg2 {margin: 2em}
.marg25 {margin: 2.5em}
.marg3 {margin: 3em}


.mt0 {margin-top: 0em}
.mr0 {margin-right: 0em}
.mb0 {margin-bottom: 0em}
.ml0 {margin-left: 0em}

.mt025 {margin-top: 0.25em}
.mr025 {margin-right: 0.25em}
.mb025 {margin-bottom: 0.25em}
.ml025 {margin-left: 0.25em}

.mt05 {margin-top: 0.5em}
.mr05 {margin-right: 0.5em}
.mb05 {margin-bottom: 0.5em}
.ml05 {margin-left: 0.5em}

.mt1 {margin-top: 1em}
.mr1 {margin-right: 1em}
.mb1 {margin-bottom: 1em}
.ml1 {margin-left: 1em}

.mt15 {margin-top: 1.5em}
.mr15 {margin-right: 1.5em}
.mb15 {margin-bottom: 1.5em}
.ml15 {margin-left: 1.5em}

.mt2 {margin-top: 2em}
.mr2 {margin-right: 2em}
.mb2 {margin-bottom: 2em}
.ml2 {margin-left: 2em}

.mt25 {margin-top: 2.5em}
.mr25 {margin-right: 2.5em}
.mb25 {margin-bottom: 2.5em}
.ml25 {margin-left: 2.5em}

.mt3 {margin-top: 3em}
.mr3 {margin-right: 3em}
.mb3 {margin-bottom: 3em}
.ml3 {margin-left: 3em}

/* une série de font-size */
.fs06 {font-size: 0.6em}
.fs08 {font-size: 0.8em}
.fs12 {font-size: 1.2em}
.fs14 {font-size: 1.4em}
.fs16 {font-size: 1.6em}
.fs18 {font-size: 1.8em}
.fs2 {font-size: 2em}
}

@media screen and (pointer: fine) {
	.sbmTmpScroll::-webkit-scrollbar {
		display: none !important
	}
	.sbmTmpScroll {
		-ms-overflow-style: none !important;
		scrollbar-width: none !important
	}
}