:root {
    --TabBorder: #aeaeae;
    --HeadBackGround: #f0f0f0;
    --MargeColonne: 17px;
}

/**********************************************
    IMAGES RESPONSIVES
**********************************************/
img {
    max-width: 100%;
    height: auto;
}

/**********************************************
    IMAGE CENTRÉE
**********************************************/
.ImgCenter { display: block; margin: 22px auto; }

/**********************************************
    IMAGE CENTRÉE AVEC TEXTE
**********************************************/
.ImgText { display: flex; align-items: center; flex-direction: column; }
.ImgText p { font-style: italic; text-align: center; }
.ImgText img { margin-top: 11px; }
.TabImg tr:nth-child(2) td { font-style: italic }
.TabImg { width: 100%; }

/**********************************************
    IMAGES FLEX
**********************************************/
.ImgFlex { display: flex; justify-content: center; gap: 9%; align-items: center; }
.ImgFlex .ImgText > p { margin: 11px 0 !important; }

/**********************************************
    IMAGE A GAUCHE / TEXTE A DROITE
**********************************************/
.TextAdroite { display: flex; align-items: center; }
.TextAdroite img { margin-top: 11px; margin-bottom: 11px; }
.TextAdroite p { margin: 0 !important; }
.TextAdroite p > h3 { padding: 0 !important; }

/**********************************************
    IMAGE A DROITE / TEXTE A GAUCHE
**********************************************/
.TextAgauche { display: flex; align-items: center; flex-direction: row-reverse; justify-content: space-between; }
.TextAgauche img { margin-top: 11px; margin-bottom: 11px; }
.TextAgauche p > h3 { padding: 0 !important; }

/******************************************************************************************************************************************
            TABLEAU
******************************************************************************************************************************************/
.TabCenter { margin-left: auto; margin-right: auto; }
.TableScroll { display: block; width: fit-content; overflow-x: auto; padding-bottom: 10px; border: none; }

table { 
    border: none;
    margin-left: var(--MainPadding); 
    padding: 0 calc(var(--MainPadding) - var(--MargeColonne));
}
table:not(.NoHead) > tbody > tr:first-child > td { border-top: none; }

table td { 
    border-left: 1px solid var(--TabBorder); 
    border-right: 1px solid var(--TabBorder); 
    border-top: 1px solid var(--TabBorder); 
    border-bottom: 1px solid var(--TabBorder);
    padding: 7px var(--MargeColonne);
    line-height: 1.5;
}

table thead tr td {
    background-color: var(--HeadBackGround);
    border-top: none;
    border-bottom: none;
    padding: 11px 22px;
    line-height: 22px;    
}

table.NoMarge {  padding: 0; }

/**********************************************
    TITRE A GAUCHE
**********************************************/
table.TitreGauche { border-left: none; }
.TitreGauche tr > td:first-child  { background-color: var(--HeadBackGround); border-left: none; border-right: none; font-weight: bold; }
.TitreGauche tr > td:nth-child(2) { border-left: none; }
/**********************************************
    TITRE A DROITE
**********************************************/
table.TitreDroite { border-right: none; }
.TitreDroite tr > td:last-child  { background-color: var(--HeadBackGround); border-left: none; border-right: none; font-weight: bold; }
.TitreDroite tr > td:nth-last-child(-n + 2) { border-right: none; }

/**********************************************
    TABLEAU LISTES
**********************************************/
.TableListe td  { vertical-align: top; }
.TableListe ul  { padding: 0 !important; }
.TableListe ul li { display: block; margin: 6px 22px 6px 0; white-space: nowrap; }

/******************************************************************************************************************************************
            STYLE ECRAN PORTATIF
******************************************************************************************************************************************/
@media (max-width: 959px) {
    table.tc-table-no-border:has(img.ImgTab) td { padding: 0 8px 3px 8px; }
    table td { padding: 3px 7px; }
    
    .ImgFlex, .TextAdroite, .TextAgauche { flex-direction: column; }
    .TextAdroite img, .TextAgauche img { margin: 8px 0 !important; }
    
    .ImgLigne { width: 28px; }
}