:root {
  --bitc-color1:#b0c863; /* VERT - Bike in the City */
  --elr-color1:#254b96; /* BLEU eLR */
  --elr-color-icones:white;
  --elr-color-desactive:#a6a6a6; /* GRIS */
  --elr-color-annule:#db4445; /* ROUGE */
  --elr-color-retour:#5f3e3c; /* MARRON */
}

*
{
    margin:0;
    padding:0;
}
#demoFil,
#suivi-textes
{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    position:relative;
    width:70%;
    height:auto;
    aspect-ratio:1125/100;
}
#demoFil
{
    margin:1em auto 0 auto;
}
#suivi-textes
{
    margin:0 auto;
}
#suivi-textes h5
{
    font-size:200%;
    line-height:0.9em;
    text-align:center;
    overflow:visible;
}
#suivi-textes .statutEncours h5
{
    color:var(--elr-color1);
}
#suivi-textes .statutAnnule h5
{
    color:var(--elr-color-annule);
}
#suivi-textes .statutRetour h5
{
    color:var(--elr-color-retour);
}
#suivi-textes p.commentaires
{
    width:100% important;
    height:1em important; 
    color:var(--elr-color-desactive);
    font-size:80%;
    text-align:center;
    overflow:visible;
}

#suivi-textes .blocContenu
{
    position:absolute;
    width:20%;  
    text-align:center;
}
#suivi-textes .etape1
{
    left:5.3%;
}
#suivi-textes .etape2
{
    left:25.0%;
}
#suivi-textes .etape3
{
    left:45.1%;
}
#suivi-textes .etape4
{
    left:65.5%;
}
        
.filsuivi {
    display:block;
    width:20%;
    height:auto;
    aspect-ratio:1125/100;
    color:var(--elr-color-desactive);
}
.filsuiviEncours {
    color:var(--elr-color1);
}
.filsuiviAnnule {
    color:var(--elr-color-annule);
}
.filsuiviRetour {
    color:var(--elr-color-retour);
}
.suiviIcone {
    position:absolute;
    width:9.5%;
    height:auto;
    aspect-ratio:1/1;
    color:var(--elr-color-icones);
}
.suiviIconeCree {
    top:-4.5%;
    left:10.8%;
}    
.suiviIconeCollecte,
.suiviIconeAnnule {
    top:-4.5%;
    left:30.7%;
}
.suiviIconeInstance {
    top:-4.5%;
    left:50.7%;    
}
.suiviIconeRetour,
.suiviIconeLivre {
    top:-4.5%;
    left:70.7%;    
}

/* Portail CLIENT */

/* Commande rapide */
h5.titreCommandeRapideLRAR,
h5.titreCommandeRapideTimbres
{
    color:var(--elr-color1);
    font-size:130%;
    font-weight:normal;
    text-align:center;
    margin:0 0 0.4em 0;
}

ul.listeCommandeRapide
{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(77px, 1fr));
}   
ul.listeCommandeRapide li
{

}
ul.listeCommandeRapide li a
{
    display:block;  
    border:2px solid var(--elr-color1);
    color:white;
    font-size:180%;
    text-align:center;
    border-radius:0.2em;
    margin:0 0.4em 0.4em 0;
    padding:0.1em 0.3em;
}
ul#listeCommandeRapideLRAR li a
{
    background-color:var(--elr-color1);
}
ul#listeCommandeRapideTimbres li a
{
    background-color:#97b3d3;
}