@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');
:root{
    --bleu_fonce:#3CAFD0;
    --bleu_clair:#EBF7FA;

    --vert_fonce:#0ACF97;
    --vert_clair:#E7FAF5;

    --orange_fonce:#FFC35A;
    --orange_clair:#FFF9EF;

    --violet_fonce:#737DF4;
    --violet_clair:#F1F2FE;

    --rouge_fonce:#FA5C7C;
    --rouge_clair:#FFEFF2;

    --gris_fonce:#656464;
    --gris_clair:#f9f9f9;

    --marine_fonce:#072879;
    --marine_clair:#dae5ff;

    --rose_fonce:#ea11f2;
    --rose_clair:#fde7fe;
}

.tdb_container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 10px;
    font-family: "Nunito", Verdana, Arial, Helvetica, sans-serif;
    font-weight: 600;
}

.tdb_card {
    border: 1px solid;
    border-radius: 8px;
    padding: 5px;
    background-color: white;
    transition: box-shadow 0.3s ease;
}

.tdb_card:hover {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.tdb_header {
    display: flex;
    align-items: center;
    font-weight: bold;
    margin: 20px;
    margin-top: 5px;
    font-size: 1.4em;
}

.tdb_body {
    margin: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    color:black;
}

.tdb_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tdb_list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
    font-size: 1.1em;
}

.tdb_list li:not(:first-child) {
    border-top: 1px solid #e0e0e0;
}

.tdb_list li:hover{
    box-shadow: 2px 4px 8px 4px rgba(0, 0, 0, 0.2);
}

.tdb_icon{
    padding: 10px;
    border-radius: 4px;
    min-width: 50px;
    text-align: center;
    margin-right: 20px;
}

.tdb_icon_ligne{
    padding-right: 10px;
}

.tdb_badge {
    font-weight: bold;
    margin-left: auto;
}

/* BLEU */
.bleu .tdb_header {
    color: var(--bleu_fonce);
}
.bleu .tdb_body {
    background-color: var(--bleu_clair);
}
.bleu .tdb_icon {
    background-color: var(--bleu_clair);
}
.bleu {
    border-color: var(--bleu_fonce);
}
.bleu .tdb_icon_ligne{
    color: var(--bleu_fonce);
}
.bleu a{
    color: var(--bleu_fonce);
}

/* VERT */
.vert .tdb_header {
    color: var(--vert_fonce);
}
.vert .tdb_body {
    background-color: var(--vert_clair);
}
.vert .tdb_icon {
    background-color: var(--vert_clair);
}
.vert {
    border-color: var(--vert_fonce);
}
.vert .tdb_icon_ligne{
    color: var(--vert_fonce);
}
.vert a{
    color: var(--vert_fonce);
}

/* ORANGE */
.orange .tdb_header {
    color: var(--orange_fonce);
}
.orange .tdb_body {
    background-color: var(--orange_clair);
}
.orange .tdb_icon {
    background-color: var(--orange_clair);
}
.orange {
    border-color: var(--orange_fonce);
}
.orange .tdb_icon_ligne{
    color: var(--orange_fonce);
}
.orange a{
    color: var(--orange_fonce);
}

/* VIOLET */
.violet .tdb_header {
    color: var(--violet_fonce);
}
.violet .tdb_body {
    background-color: var(--violet_clair);
}
.violet .tdb_icon {
    background-color: var(--violet_clair);
}
.violet {
    border-color: var(--violet_fonce);
}
.violet .tdb_icon_ligne{
    color: var(--violet_fonce);
}
.violet a{
    color: var(--violet_fonce);
}

/* ROUGE */
.rouge .tdb_header {
    color: var(--rouge_fonce);
}
.rouge .tdb_body {
    background-color: var(--rouge_clair);
}
.rouge .tdb_icon {
    background-color: var(--rouge_clair);
}
.rouge {
    border-color: var(--rouge_fonce);
}
.rouge .tdb_icon_ligne{
    color: var(--rouge_fonce);
}
.rouge a{
    color: var(--rouge_fonce);
}

/* GRIS */
.gris .tdb_header {
    color: var(--gris_fonce);
}
.gris .tdb_body {
    background-color: var(--gris_clair);
}
.gris .tdb_icon {
    background-color: var(--gris_clair);
}
.gris {
    border-color: var(--gris_fonce);
}
.gris .tdb_icon_ligne{
    color: var(--gris_fonce);
}
.gris a{
    color: var(--gris_fonce);
}

/* MARINE */
.marine .tdb_header {
    color: var(--marine_fonce);
}
.marine .tdb_body {
    background-color: var(--marine_clair);
}
.marine .tdb_icon {
    background-color: var(--marine_clair);
}
.marine {
    border-color: var(--marine_fonce);
}
.marine .tdb_icon_ligne{
    color: var(--marine_fonce);
}
.marine a{
    color: var(--marine_fonce);
}

/* ROSE */
.rose .tdb_header {
    color: var(--rose_fonce);
}
.rose .tdb_body {
    background-color: var(--rose_clair);
}
.rose .tdb_icon {
    background-color: var(--rose_clair);
}
.rose {
    border-color: var(--rose_fonce);
}
.rose .tdb_icon_ligne{
    color: var(--rose_fonce);
}
.rose a{
    color: var(--rose_fonce);
}