:root {
  --main: #348180;  --text : #fff; --text2: #245251; --rouge:#e12525; 
}


body { background-color:#a5bfb9!important; }

#tab { position: fixed;background-color: var(--main); bottom: 0px; width: 100%; }
.nav-link { color: #fff!important; font-weight:600!important; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--main)!important; background-color: #fff; border-color: #dee2e6 #dee2e6 #fff; }

#tab img { max-width:70px; width:100%; }
#tab li { text-align:center; }

#tab button { width:100%; }


#loading-overlay { display:none; }


header { background-color: var(--main); }
header h1 { color: var(--text); font-size: 25px; text-transform: uppercase; font-weight: 800; }


blockquote { font-style: italic; color: var(--main); font-weight: 600; }

.enregistrer 	{ background-color: var(--main); border: none; padding: 5px 25px; border-radius: 4px; color: #fff; font-weight: 600; font-size: 19px;}
.supprimer 		{ background-color: var(--rouge); border: none; padding: 3px 15px; border-radius: 4px; color: #fff; font-weight: 600; font-size: 15px;}

.plus { border: none; background-color: var(--main); border-radius: 100%; font-weight: 900; color: #ffffff; font-size: 25px; padding: 0px 13px 4px; }



#repas-liste ul li { position:relative; }
.btn-moins { transition-duration:0.2s; background-color:transparent!important; border: none; border-radius: 100%; position: absolute; right: 0px; top: 4px; }
.btn-moins svg { fill:#5e5e5e; max-width: 20px; height: auto; padding: 4px 0px; }



.btn-moins:hover { background-color: var(--rouge)!important; }
.btn-moins:hover svg { fill:#fff; }




label { font-weight: 700; }


h2 { border-bottom: solid 5px var(--main); margin-bottom: 30px!important; padding-bottom: 10px; text-transform: uppercase; font-weight: 800!important; font-size: 25px!important; color:var(--text2); }



#caca-color-indicator {
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.tab-content > .active {
    margin-bottom: 200px;
}



#caca-chargement {
    width: 170px; /* Taille de l'image */
    animation: tourner 2.1s ease-in-out infinite;
}

@keyframes tourner {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
    40% {
        transform: translate(-50%, -50%) rotate(180deg) scale(1.2);
    }
    80% {
        transform: translate(-50%, -50%) rotate(360deg) scale(1);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) scale(1);
    }
}