/* FRAMEWORK CSS */

html 	{ height:100%; }
body 	{ height:100%; }
.clear 	{ clear:both; }

/* Position */
.relative   { position:relative; }
.absolute 	{ position:absolute; }

/* Spacing */
.mtop0 		{ margin-top:0 }
.mtop5      { margin-top:5px }
.mtop10 	{ margin-top:10px }
.mtop20 	{ margin-top:20px }
.mtop30 	{ margin-top:30px }
.mtop40 	{ margin-top:40px }
.mtop50     { margin-top:50px }
.mtop60     { margin-top:60px }
.mtop80     { margin-top:80px }
.mtop100 	{ margin-top:100px }

.mbot0 		{ margin-bottom:0; }
.mbot5 		{ margin-bottom:5px; }
.mbot10 	{ margin-bottom:10px; }
.mbot20 	{ margin-bottom:20px; }
.mbot30   	{ margin-bottom:30px; }
.mbot40 	{ margin-bottom:40px; }
.mbot50 	{ margin-bottom:50px; }
.mbot60 	{ margin-bottom:60px; }
.mbot80     { margin-bottom:80px }
.mbot100    { margin-bottom:100px }

.ptop10 	{ padding-top:10px }
.ptop20 	{ padding-top:20px }
.ptop30     { padding-top:30px }
.ptop40 	{ padding-top:40px }
.ptop50     { padding-top:50px }
.ptop60     { padding-top:60px }
.ptop80 	{ padding-top:80px }
.ptop100 	{ padding-top:100px }

.pbot10 	{ padding-bottom:10px }
.pbot20 	{ padding-bottom:20px }
.pbot30 	{ padding-bottom:30px }
.pbot40 	{ padding-bottom:40px }
.pbot50     { padding-bottom:50px }
.pbot60     { padding-bottom:60px }
.pbot80 	{ padding-bottom:80px }
.pbot100 	{ padding-bottom:100px }

.pad10      { padding:10px; }
.pad20      { padding:20px; }
.pad30      { padding:30px; }
.pad40      { padding:40px; }
.pad50      { padding:50px; }

.rpad10      { padding-right:10px; }
.rpad20      { padding-right:20px; }
.rpad30      { padding-right:30px; }
.rpad40      { padding-right:40px; }
.rpad50      { padding-right:50px; }

.lpad10      { padding-left:10px; }
.lpad20      { padding-left:20px; }
.lpad30      { padding-left:30px; }
.lpad40      { padding-left:40px; }
.lpad50      { padding-left:50px; }

.hpad5       { padding-right:5px; padding-left:5px; }
.hpad10      { padding-right:10px; padding-left:10px; }
.hpad20      { padding-right:20px; padding-left:20px; }
.hpad30      { padding-right:30px; padding-left:30px; }
.hpad40      { padding-right:40px; padding-left:40px; }
.hpad50      { padding-right:50px; padding-left:50px; }

.vpad5       { padding-top:5px; padding-bottom:5px; }
.vpad10      { padding-top:10px; padding-bottom:10px; }
.vpad20      { padding-top:20px; padding-bottom:20px; }
.vpad30      { padding-top:30px; padding-bottom:30px; }
.vpad40      { padding-top:40px; padding-bottom:40px; }

.nomargin    { margin:0; }
.nopadding 	 { padding:0; }


/* Text sizing and col-csor */
.text-xxs       { font-size:0.4em; }
.text-xs        { font-size:0.6em; }
.text-sm        { font-size:0.8em; }
.text-md        { font-size:1.2em; line-height:1.2em; }
.text-lg        { font-size:1.4em; }
.text-xl        { font-size:1.6em; }
.text-xxl       { font-size:2em; }

.toupper        { text-transform:uppercase; }
.tolower        { text-transform:lowercase; }

h1, h2, h3, h4, h5, h6      { font-weight:700; }

.text-white     { color:white; }
.text-black      { color:black; }

/* Disposition */
.dblock     { display:block; }
.dinblock      { display:inline-block; vertical-align:top; }
.dinblock_mid  { display:inline-block; vertical-align:middle; }
.dinline    { display:inline; }
.maxwidth   { max-width:100%; height:auto; }
.fullwidth 	{ width:100%; height:auto; }
.fullheight { height:100%; }

/* affichage des */
img[class^='img-fit-'], img[class^='img-fill-']{width:100%;background-color:var(--img_background);}
img[class^='img-fit-']{object-fit: contain;}
img[class^='img-fill-']{object-fit: cover;}
.img-fit-32, .img-fill-32 { aspect-ratio: 3 / 2;} 
.img-fit-1, .img-fill-1 { aspect-ratio: 1 / 1;}
.img-fill-banniere { aspect-ratio: 100 / 17;} /* force un ratio de 100/17 */
.img-fill-banniere-mobile { aspect-ratio: 63 / 45;} /* force un ratio de 630/450 */

@media (max-width: 768px) {
  
  .mobile-hidden  { display:none; }
  .mobile-center, 
  .mobile-center .text-right, 
  .mobile-center .text-left   { text-align:center !important; }

}


/* HTML Elements */
hr 			{ height:1px; background:black; border:0; }
a, 
a:active, 
a:hover     { text-decoration:none; }
p           { line-height:1.4em; }
ul   		{ margin:0; padding:0; list-style-type:none; }

.cursor_over    { cursor:pointer; }


/* Background */
.bg-white       { background:white; }
.bg-black        { background:black; }

.shadowed   	{ box-shadow:-1px 1px 5px 2px rgba(0, 0, 0, 0.3); }
.txt-shadowed { text-shadow:1px 1px 2px black; }


/* Debug et test */
.debug  { border:1px solid red; }



/* // FRAMEWORK CSS */