:root {
	--g-blanc: #ffffff;
	--g-gris: #6c757d;
	--g-noir: #222222;
	
	--g-clair: #ffffff;
	--g-fonce: #555555;
	--g-couleur1: #d63384; 
	--g-couleur2: #0d6efd;
  --g-couleurLien: #d63384;
	
	--g-bleu: #2271b1;
	--g-marine: #0a2bac;
	--g-indigo: #6610f2;
	--g-violet: #6f42c1;
	--g-rose: #d63384;
	--g-rouge: #c71212;
	--g-orange: #ffa90b;
	--g-marron: #664d03;
	--g-jaune: #fff3cd;
	--g-vert: #198754;
	--g-verteau: #20c997;
	--g-cyan: #0dcaf0;
	--g-bordeaux: #9a042a;
	
	--g-mpv1: 6px; 
	--g-mpv2: 10px;
	--g-mpv3: 15px; 	
}

/** largeur des contenairs **/
.wpp { width: 100%; margin: 0 auto; }
.wm { width: calc(100% - 30px); max-width: 1320px; margin: 0 auto; }
.ws { width: calc(100% - 30px); max-width: 920px; margin: 0 auto; }
.wxs { width: calc(100% - 30px); max-width: 620px; margin: 0 auto; }
.dBlock { display: block; }

/** TEXT **/
.txtClr { color: var(--g-clair); }
.txtOrg { color: var(--g-orange); }
.txtRge { color: var(--g-rouge); }
.txtVrt { color: var(--g-vert); }
.txtBle { color: var(--g-bleu); }
.txtInd { color: var(--g-indigo); }
.txtGrs { color: var(--g-gris); }
.txtVlt { color: var(--g-violet); }
.txtBlc { color: var(--g-blanc); }

.txtCtr { text-align: center; }
.txtRgt { text-align: right; }
.txtBld { font-weight: 600; }

/** BACKGROUND **/
.bgGrs {
	background-color: var(--g-gris);
	color: var(--g-blanc);
}
.bgBlc {
	background-color: var(--g-blanc);
	color: var(--g-gris);
}
.bgOrg {
	background-color: var(--g-orange);
	color: var(--g-blanc);
}
.bgRge {
	background-color: var(--g-rouge);
	color: var(--g-blanc);
}
.bgVrt {
	background-color: var(--g-vert);
	color: var(--g-blanc);
}
.bgBle {
	background-color: var(--g-bleu);
	color: var(--g-blanc);
}
.bgInd {
	background-color: var(--g-indigo);
	color: var(--g-blanc);
}
.bgRse {
	background-color: var(--g-rose);
	color: var(--g-blanc);
}
.bgVlt {
	background-color: var(--g-violet);
	color: var(--g-blanc);
}
.bgJne {
	background-color: var(--g-jaune);
  color: var(--g-gris);  
}
.bgBrd {
	background-color: var(--g-bordeaux);
	color: var(--g-blanc);
}
.bgNoir {
	background-color: var(--g-noir);
	color: var(--g-blanc);
}

/** BORDER **/
.bt { border-top: 2px solid var(--g-couleur2); }
.bb { border-bottom: 2px solid var(--g-couleur2); }
.bs { border-left: 2px solid var(--g-couleur2); }
.be { border-right: 2px solid var(--g-couleur2); }

.bdrBlc { border: 2px solid var(--g-blanc); }
.bdrRse { border: 2px solid var(--g-rose); }
.bdrBle { border: 2px solid var(--g-bleu); }

/** Border Haut et Bas **/
.bvBlc { 
	border-top: 2px solid var(--g-blanc);
	border-bottom: 2px solid var(--g-blanc);
}
/** Border Droite et Gauche **/
.bhBlc { 
	border-left: 2px solid var(--g-blanc);
	border-right: 2px solid var(--g-blanc);
}

/** Border Radius **/
.br { border-radius: 8px; }
.brt { border-radius: 8px 8px 0 0; }
.brb { border-radius: 0 0 8px 8px; }
.brDiag1 { border-radius: 8px 0 0 8px; }
.brDiag2 { border-radius: 0 8px 8px 0; }

/** ESPACE **/
.p1 { padding: var(--g-mpv1); }
.p2 { padding: var(--g-mpv2); }
.p3 { padding: var(--g-mpv3); }

.pv1 { padding-top: var(--g-mpv1); padding-bottom:var(--g-mpv1); }
.mv1 { margin-top: var(--g-mpv1); margin-bottom: var(--g-mpv1); }
.ph1 { padding-left: var(--g-mpv1); padding-right:var(--g-mpv1); }
.mh1 { margin-left: var(--g-mpv1); margin-right: var(--g-mpv1); }

.pt1 { padding-top: var(--g-mpv1); }
.pb1 { padding-bottom:var(--g-mpv1); }
.ps1 { padding-left: var(--g-mpv1); }
.pe1 { padding-right:var(--g-mpv1); }
.mt1 { margin-top: var(--g-mpv1); }
.mb1 { margin-bottom: var(--g-mpv1); }
.ms1 { margin-left: var(--g-mpv1); }
.me1 { margin-right: var(--g-mpv1); }

.pv2 { padding-top: var(--g-mpv2); padding-bottom:var(--g-mpv2); }
.ph2 { padding-left: var(--g-mpv2); padding-right:var(--g-mpv2); }
.ps2 { padding-left: var(--g-mpv2); }
.pt2 { padding-top: var(--g-mpv2); }
.pe2 { padding-right:var(--g-mpv2); }
.pb2 { padding-bottom:var(--g-mpv2); }


.mv2 { margin-top: var(--g-mpv2); margin-bottom: var(--g-mpv2); }
.mh2 { margin-left: var(--g-mpv2); margin-right: var(--g-mpv2); }
.ms2 { margin-left: var(--g-mpv2); }
.mt2 { margin-top: var(--g-mpv2); }
.me2 { margin-right: var(--g-mpv2); }
.mb2 { margin-bottom: var(--g-mpv2); }

.pv3 { padding-top: var(--g-mpv3); padding-bottom:var(--g-mpv3); }
.ph3 { padding-left: var(--g-mpv3); padding-right:var(--g-mpv3); }
.ps3 { padding-left: var(--g-mpv3); }
.pt3 { padding-top: var(--g-mpv3); }
.pe3 { padding-right: var(--g-mpv3); } 
.pb3 { padding-bottom: var(--g-mpv3); } 

.mv3 { margin-top: var(--g-mpv3); margin-bottom: var(--g-mpv3); }
.mh3 { margin-left: var(--g-mpv3); margin-right: var(--g-mpv3); }
.ms3 { margin-left: var(--g-mpv3); }
.mt3 { margin-top: var(--g-mpv3); }
.me3 { margin-right: var(--g-mpv3); }
.mb3 { margin-bottom: var(--g-mpv3); } 

.m5 { margin: 2rem; }
.ms5 { margin-left: 2rem; }
.mb5 { margin-bottom: 2rem; }
.me5 { margin-right: 2rem; }
.mt5 { margin-top: 2rem; }

/** FLEX **/
.fs { 
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
}

.fc {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	flex-direction: row;
}

.fbtw {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.fbtw.h { align-items: flex-start; }

.fbsa {
	display: flex;
	justify-content: space-around;
	align-items: center;
}


.fhc { /** centré horizontal **/
	display: flex;
	align-items: center;
}

.fe {
	display: flex;
	justify-content: end;
	align-items: center;
}

/** GRID **/
.gc { /* centre les sous block en fonction de la largeur de leur contenu */
	display: grid;
  justify-content: center;
}

.gali-alerte {
	border-radius: 6px;
	padding: 18px 20px;
	text-align: center;
	margin: 20px auto;
	width: calc(100% - 40px);
}
.gali-pastille { border-radius: 48%; }
.gali-fermer { float: right; }
.gali-small, small { font-size: .875em; }

.gali-fanion {
	border-radius: 12px 4px;
	padding: .4rem .7rem;
}

.gali-fanion-s { 
	font-size: .875em;
	border-radius: 8px 3px;
	padding: .2rem .4rem;
}