*[id*="l-"] {margin-bottom: 100px;}
*[id*="l-"] h2 {position: relative; padding-left:140px; margin-bottom: 80px;}
*[id*="l-"] h2::before { content: ""; display: block;  width:120px; height: 120px; position: absolute; left: 0; top:-40px; background-size:contain;  background-repeat: no-repeat;}
#l-politique h2::before { background-image: url(/themes/documents-donnees/images/protection-vie-privee/2021G104_vie_prive.png); }
#l-collecte h2::before { background-image: url(/themes/documents-donnees/images/protection-vie-privee/2021G104_collecte.png); }
#l-utilisation h2::before { background-image: url(/themes/documents-donnees/images/protection-vie-privee/2021G104_utilisation.png); }
#l-communication h2::before { background-image: url(/themes/documents-donnees/images/protection-vie-privee/2021G104_communication.png); }
#l-consentement h2::before { background-image: url(/themes/documents-donnees/images/protection-vie-privee/2021G104_consentement.png); }
#l-securite h2::before { background-image: url(/themes/documents-donnees/images/protection-vie-privee/2021G104_securite.png); }
#l-conservation h2::before { background-image: url(/themes/documents-donnees/images/protection-vie-privee/2021G104_conservation.png); }
#l-vosdroits h2::before { background-image: url(/themes/documents-donnees/images/protection-vie-privee/2021G104_droits.png); }

/* Tableau des renseignements personnels */
#l-collecte table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

#l-collecte table th,
#l-collecte table td {
    text-align: left;
    padding: 1rem;
    vertical-align: top;
}

#l-collecte table thead th {
    font-weight: bold;
    border-bottom: 2px solid #ddd;
}

#l-collecte table tbody tr {
    border-bottom: 1px solid #ddd;
}

#l-collecte table tbody th {
    font-weight: bold;
    width: 30%;
}

#l-collecte table tbody td ul {
    margin: 0;
    padding-left: 1.2rem;
}

#l-collecte table tbody td li {
    margin-bottom: 0.5rem;
}

#l-collecte table tbody td p {
    margin-top: 1rem;
}

@media screen and (max-width: 768px) {
    *[id*="l-"] h2 {
        padding-left: 0;
        padding-top: 100px;
    }

    *[id*="l-"] h2::before {
        left: 50%;
        transform: translateX(-50%);
        top: -20px;
        width: 80px;
        height: 80px;
    }

    #l-collecte table,
    #l-collecte table thead,
    #l-collecte table tbody,
    #l-collecte table tr,
    #l-collecte table th,
    #l-collecte table td {
        display: block;
        width: 100%;
    }

    #l-collecte table thead {
        display: none;
    }

    #l-collecte table tbody tr {
        margin-bottom: 2rem;
        padding-bottom: 2rem;
        border-bottom: 2px solid #ddd;
    }

    #l-collecte table tbody th {
        width: 100%;
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
        padding: 0.5rem 0;
        border-bottom: 1px solid #eee;
    }

    #l-collecte table tbody td {
        padding: 0.5rem 0;
    }

    #l-collecte table tbody td ul {
        padding-left: 1rem;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    #l-collecte table tbody th {
        width: 35%;
    }
}

/* Tableau d’utilisation des renseignements */
#l-utilisation table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

#l-utilisation table th,
#l-utilisation table td {
    text-align: left;
    padding: 1rem;
    vertical-align: top;
    width: 33.33%;
}

#l-utilisation table thead th {
    font-weight: bold;
    border-bottom: 2px solid #ddd;
}

#l-utilisation table tbody td {
    border-right: 1px solid #ddd;
}

#l-utilisation table tbody td:last-child {
    border-right: none;
}

#l-utilisation table tbody td ul {
    margin: 0;
    padding-left: 1.2rem;
}

#l-utilisation table tbody td li {
    margin-bottom: 0.5rem;
}

@media screen and (max-width: 768px) {
    #l-utilisation table,
    #l-utilisation table thead,
    #l-utilisation table tbody,
    #l-utilisation table tr,
    #l-utilisation table th,
    #l-utilisation table td {
        display: block;
        width: 100%;
    }

    #l-utilisation table thead th {
        display: none;
    }

    #l-utilisation table tbody td {
        border-right: none;
        border-bottom: 2px solid #ddd;
        padding: 1rem 0;
    }

    #l-utilisation table tbody td::before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        margin-bottom: 0.5rem;
        font-size: 1.1rem;
        border-bottom: 1px solid #eee;
        padding-bottom: 0.5rem;
    }

    #l-utilisation table tbody td ul {
        padding-left: 1rem;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    #l-utilisation table th,
    #l-utilisation table td {
        padding: 0.75rem;
    }
}