:root {
  --white: #ffffff;
  --white-smoke: #f2f2f2;
  --platinum: #e5e5e5;
  --silver: #aaaaaa;
  --gray: #777777;
  --safety-orange: #fd7e14;
  --pigment-green: #28a745;
  --engineering-orange: #c80000;
  --azure: #0080fe;
}
html {
  font-size: 16px;
}
b {
  font-size: 18px;
}
.hautdroite{
  position: absolute;
  top: 8px;
  right: 16px;
}
.gris{
background-color: var(--white-smoke);
border-radius: 10px;
padding:0px 16px 12px 16px;
}
.titre{
color:var(--azure);
margin-left: 8px;
font-weight:bold;
font-size:16px;
}
.titre2{
color:var(--gray);
margin-left: 8px;
font-weight:400;
font-size:16px;
   animation-name: titreanim2;
  animation-duration: 3s;
}
@keyframes titreanim2 {
  from {width: 0%; color:var(--white-smoke);}
  to {color: var(--gray); }
}
.row {
--bs-gutter-x: 0.5rem;
}
.titre3{
height:28px;
border-radius:6px;
color:var(--white);
font-size:18px;
text-align:center;
margin-top:2px;
}

.col-8{
   animation-name: colanim;
  animation-duration: 1s;

}
@keyframes colanim {
  from {opacity:0%;}
  to {opacity:100%; }
}

.progress {
margin-top:2px;
color:var(--white);
background-color: var(--white-smoke);
  height: 28px;
  width: 100%;
  position: relative;
   animation-name: progressanim0;
  animation-duration: 1.5s;
}
@keyframes progressanim0 {
  from {width: 0%; background-color: var(--white-smoke);}
  50% {background-color: var(--white-smoke);}
  to {width: 100%; }
}

.progress:before {
  content: attr(data-label);
  position: absolute;
  text-align: center;
  top: 0px;
  left: 0;
  right: 0;
}

.bg-warning {
background-color: var(--safety-orange) !important;
}
.bg-success {
background-color: var(--pigment-green)!important;
}
.bg-danger {
background-color: var(--engineering-orange) !important;
}
.bg-info {
	background-color: var(--platinum) !important;
	color: var(--engineering-orange) !important;
}
.bg-secondary {
	background-color: var(--silver) !important;
}