/*********************************************************************************************************************************************
    DATE        : 14/06/2023
    AUTEUR      : Alexandre Rangé
    DESCRIPTION : Ce fichier sert à définir les données communes au design système (couleur, police, taille, bordure, etc...). 
                  Si un élément ne sert qu'à un seul endroit, il est préférable dans le mettre dans une classe et un fichier autre.
*********************************************************************************************************************************************/


/*
    DATE        : 14/06/2023
    AUTEUR      : Alexandre Rangé
    DESCRIPTION : La pseudo-classe ":root" est utilisé pour déclarer des constantes CSS communes à plusieurs classe. Pour plus d'info sur le sujet : https://www.w3schools.com/css/css3_variables.asp
*/
:root {
    /*#region COLORS*/
    /*#region PRIMARY*/
    /*#region PRIMARY LIGHT (Blanc et Bleus)*/
    --color-primary-light-white-1: #FFFFFF;
    --color-primary-light-white-1-1: rgba(255, 255, 255, 0.87);
    --color-primary-light-white-2: #F8FCFF; /*#F1F8FD;*/
    --color-primary-light-white-3: #F1F8FD;
    --color-primary-light-blue-1: #283E61;
    --color-primary-light-blue-1-1: #1E304D;
    --color-primary-light-blue-1-2: rgba(40, 62, 97, 0.25);
    --color-primary-light-blue-2: #546581;
    --color-primary-light-blue-2-1: #465368;
    --color-primary-light-blue-3: #BDCFDD;
    --color-primary-light-blue-4: rgba(189, 207, 221, 0.5);
    --color-primary-light-blue-5: #3E5881;
    --color-primary-light-blue-6: #D7EBF9;
    --color-primary-light-blue-7: #A9B2BF;
    --color-primary-light-blue-8: #E5F2FA;
    --color-primary-light-blue-9: rgba(255, 255, 255, 1);
    /*#endregion*/
    /*#region PRIMARY INFO (Bleus)*/
    --color-primary-info-blue-1: #0089D1;
    --color-primary-info-blue-1-1: rgba(0,137,209,0.4);
    --color-primary-info-blue-1-2: rgba(0, 137, 209, 0.21);
    --color-primary-info-blue-1-3: rgba(0, 137, 209, 0.15);
    --color-primary-info-blue-2: #4DADE0;
    --color-primary-info-blue-3: #BFDEF2;
    --color-primary-info-blue-3-1: rgba(191, 222, 242, 0.4);
    --color-primary-info-blue-3-1-no-transparency: #E5F2FA;
    --color-primary-info-blue-4: #0079B9;
    /*#endregion*/
    /*#endregion*/
    /*#region SECONDARY*/
    /*#region SECONDARY LIGHT (Verts)*/
    --color-secondary-light-green-1: #02C39A;
    --color-secondary-light-green-1-1: #0EB18F;
    --color-secondary-light-green-2: #6BCFBA;
    --color-secondary-light-green-3: #BFE5DD;
    --color-secondary-light-green-4: #E8F5F3;
    --color-secondary-light-green-5: #03AA86;
    /*#endregion*/
    /*#region SECONDARY INFO (Verts)*/
    --color-secondary-info-green-1: #035A6B;
    --color-secondary-info-green-1-1: rgba(3, 90, 107, 0.4);
    --color-secondary-info-green-2: #51848E;
    --color-secondary-info-green-2-1: rgba(91, 132, 141, 0.75);
    --color-secondary-info-green-3: #88AEB7;
    --color-secondary-info-green-4: #CDDFE1;
    /*#endregion*/
    /*#endregion*/
    /*#region LIGHT (Gris)*/
    --color-light-grey-1: #EAEAEA;
    --color-light-grey-2: #757575;
    /*#endregion*/
    /*#region ERROR (Rouges)*/
    --color-error-red-1: #EA4C61;
    --color-error-red-1-1: rgba(234, 76, 97, 0.75);
    --color-error-red-2: #9E3241;
    --color-error-red-3: #EF7081;
    --color-error-red-4: #FAAFB3;
    /*#endregion*/
    /*#region PRIMARY LIGHT ORANGE*/
    --color-primary-light-orange-1: #FE9666;
    --color-primary-light-orange-2: #F6DBCE;
    --color-primary-light-orange-3: #FFBA9A;
    --color-primary-light-orange-4: #FFEEE7;
    /*#endregion*/
    /*#region GREY*/
    --color-grey-1: #7E7E7E;
    --color-grey-1-1: rgba(126, 126, 126, 0.75);
    --color-grey-1-2: rgba(126, 126, 126, 0.35);
    --color-grey-2: #666666;
    --color-grey-3: #999999;
    --color-grey-4: #0000008A;
    --color-grey-5: #00000061;
    --color-grey-6: #DFDFDF;
    --color-grey-7: #636363;
    --color-grey-8: #757575;
    --color-grey-9: #EBEBEB;
    --color-grey-9-1: rgba(235, 235, 235,0.4);
    --color-grey-10: #F1F1F1;
    --color-grey-11: #D3D3D3;
    --color-grey-12: #F8F8F8;
    --color-grey-13: #C0C0C0;
    --color-grey-14: #818181;
    --color-grey-15: #333333;
    --color-grey-16: #DFDFDF;
    --color-grey-17: #484848;
    --color-grey-18: #CCCCCC;
    --color-grey-19: #8E8E8E;
    /*#endregion GREY*/
    /*#region OTHER*/
    --color-black-0: #000000;
    --color-black-1: #0000003B;
    --color-black-2: #173D50;
    --color-black-3: rgba(0, 0, 0, 0.75);
    --color-yellow-1: #FFAF00;
    --color-placeholder-grey: #0000006b;
    /*#endregion*/
    /*#region PRIMARY DARK*/
    --color-primary-dark-blue: #283941;
    --color-primary-dark-blue-1: #9CAECA;
    /*#endregion*/
    /*#region Couleurs Marques*/
    --color-linkedin: #0A66C2;
    --color-twitter-old: #1DA1F2;
    --color-twitter-new: #000000;
    --color-facebook: #1877F2;
    /*#endregion*/
    /*#region FONT*/
    /*Police utilisée*/
    --font-family-1: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    --font-family-2: 'Roboto', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    --font-family-3: 'Font Awesome 6 Pro';
    /*Font weight generic*/
    --generic-font-weight-lightest: 400;
    --generic-font-weight-light: 600;
    --generic-font-weight-heavy: 700;
    --generic-font-weight-heavier: 900;
    --generic-font-weight-bold: bold;
    /*Font size generic*/
    --font-size-tiniest: 9px;
    --font-size-tinier: 10px;
    --font-size-tiny: 11px;
    --font-size-smallest: 12px;
    --font-size-small: 13px;
    --font-size-normal: 14px;
    --font-size-big: 16px;
    --font-size-big-0: 17px;
    --font-size-big-1: 18px;
    --font-size-big-2: 22px;
    --font-size-big-3: 24px;
    --font-size-bigger: 25px;
    --font-size-bigger-2: 26px;
    --font-size-bigger-3: 28px;
    --font-size-bigger-4: 30px;
    --font-size-bigger-5: 32px;
    --font-size-biggest: 35px;
    --font-size-biggest-1: 36px;
    /*Grand titre*/
    --font-size-titre-grand: var(--font-size-biggest);
    --font-weight-titre-grand: var(--generic-font-weight-heavy);
    /*Titre Normal*/
    --font-size-titre: var(--font-size-big-3);
    --font-weight-titre: var(--generic-font-weight-lightest);
    /*Sous Titre*/
    --font-size-sous-titre: var(--font-size-big);
    --font-weight-sous-titre: var(--generic-font-weight-heavy);
    /*Titre & CTA*/
    --font-size-titre-cta: var(--font-size-normal);
    --font-weight-titre-cta-heavy: var(--generic-font-weight-heavy);
    --font-weight-titre-cta: var(--generic-font-weight-light);
    /*Titre Panel*/
    --font-size-titre-panel: var(--font-size-big);
    --font-weight-titre-panel: var(--generic-font-weight-heavy);
    /*Label 1*/
    --font-size-label-1: var(--font-size-normal);
    --font-weight-label-1: var(--generic-font-weight-lightest);
    /*Label 2*/
    --font-size-label-2: var(--font-size-smallest);
    --font-weight-label-2: var(--generic-font-weight-lightest);
    /*Texte normal*/
    --font-size-content: var(--font-size-normal);
    --font-weight-content: var(--generic-font-weight-lightest);
    /*Legend & Lien*/
    --font-size-legend-link: var(--font-size-normal);
    --font-weight-legend-link: var(--generic-font-weight-lightest);
    /*PlaceHolder*/
    --font-size-placeholder: var(--font-size-normal);
    --font-weight-placeholder: var(--generic-font-weight-lightest);
    /*Legende titre*/
    --font-size-legende-titre: var(--font-size-small);
    --font-weight-legende-titre: var(--generic-font-weight-heavy);
    /*Legende tag*/
    --font-size-legende-tag: var(--font-size-small);
    --font-weight-legende-tag: var(--generic-font-weight-lightest);
    /*Pagination*/
    --font-size-pagination: var(--font-size-small);
    --font-weight-pagination: var(--generic-font-weight-lightest);
    /*#endregion*/
    --border-radius-1: 4px;
    --border-radius-2: 6px;
    /*#region SCROLLBAR POUR FIREFOX*/
    overflow: scroll;
    overflow-x: hidden;
    /*#endregion */
    /*Couleur font-awesome duo tone*/
    --fa-primary-color: var(--color-primary-light-blue-1);
    --fa-secondary-color: var(--color-primary-light-blue-1);
    /*#region Palette de couleur graph Immeuble */
    --graph-bureau: #0EB18F;
    --graph-a-batir: #02C39A;
    --graph-bati-terrain: #6BCFBA;
    --graph-agricole: #BFE5DD;
    --graph-commerce: #035A6B;
    --graph-culture: #51848E;
    --graph-enseignement: #88AEB7;
    --graph-hopitaux: #4098AD;
    --graph-hotel: #283E61;
    --graph-sous-sols: #546581;
    --graph-logement: #9CAECA;
    --graph-logistique: #BDCFDD;
    --graph-industriel: #0089D1;
    --graph-parking: #4DADE0;
    --graph-public: #BFDEF2;
    --graph-religieux: #2FC2C7;
    --graph-loisir: #FE9666;
    --graph-terrain: #FFBA9A;
    --graph-transport: #F6DBCE;
    --graph-residence-etudiante: #2B6411;
    --graph-residence-senior: #81C861;
    --graph-residence-tourisme: #3A8E14;
    --graph-inconnu: #949494;
    --graph-non-specifie: #545454;
    --graph-defaut: #FFFFFF;
    /*#endregion Palette de couleur graph Immeuble */
}

@-moz-document url-prefix() {
    body {
        scrollbar-width: thin;
        scrollbar-color: var(--color-primary-light-blue-1) var(--color-primary-light-blue-7);
    }
}
/*#region SCROLLBAR POUR CHROME et EDGE*/
::-webkit-scrollbar {
    z-index: 100;
    width: 5px;
    height: 5px;
    background-color: transparent;
}

::-webkit-scrollbar-track {
    z-index: 100;
    background: var(--color-primary-light-blue-7);
    border: 0px dashed var(--color-primary-light-blue-7);
    border-radius: 0px;
}

::-webkit-scrollbar-thumb {
    z-index: 100;
    background: var(--color-primary-light-blue-1);
    border: 0px none transparent;
    border-radius: 0px;
}

::-webkit-scrollbar-button {
    z-index: 100;
    width: 0px;
    height: 0px;
}

::-webkit-scrollbar-corner {
    z-index: 100;
    background: transparent;
}
/*#endregion*/

/*#region Style générique*/
.grand-titre-explore {
    font-family: var(--font-family-1);
    font-weight: var(--font-weight-titre-grand);
    font-size: var(--font-size-titre-grand);
    color: var(--color-primary-light-blue-1);
}

.titre-explore {
    font-family: var(--font-family-1);
    font-weight: var(--generic-font-weight-light);
    font-size: var(--font-size-titre);
    color: var(--color-primary-light-blue-1);
    line-height: 29px;
    letter-spacing: 0.03em;
    text-align: center;
    font-style: italic;
}

span.titre-explore {
    /* Centrer horizontalement le span */
    display: table;
    margin: 0 auto;
}

.sous-titre-explore {
    font-family: var(--font-family-1);
    font-weight: var(--font-weight-sous-titre);
    font-size: var(--font-size-sous-titre);
    color: var(--color-primary-light-blue-1);
}

.titre-cta-explore {
    font: var(--font-size-titre-cta) var(--font-family-1); /*Cette ligne sert à écraser le style de DevExpress*/
    font-family: var(--font-family-1);
    font-weight: var(--font-weight-titre-cta-heavy);
    font-size: var(--font-size-titre-cta);
    color: var(--color-primary-light-blue-1);
}

.titre-cta-explore-light-weight {
    font: var(--font-size-titre-cta) var(--font-family-1); /*Cette ligne sert à écraser le style de DevExpress*/
    font-family: var(--font-family-1);
    font-weight: var(--generic-font-weight-lightest);
    font-size: var(--font-size-titre-cta);
    color: var(--color-primary-light-blue-1);
}

.titre-cta-explore-light {
    font-family: var(--font-family-1);
    font-weight: var(--font-weight-titre-cta);
    font-size: var(--font-size-titre-cta);
    color: var(--color-primary-info-blue-1);
}

.sous-titre-cta-explore-light {
    font-family: var(--font-family-1);
    font-weight: var(--generic-font-weight-lightest);
    font-size: var(--font-size-smallest);
    color: var(--color-primary-info-blue-1);
}

.titre-panel-explore {
    font: var(--font-size-titre-panel) var(--font-family-1); /*Cette ligne sert à écraser le style de DevExpress*/
    font-family: var(--font-family-1);
    font-weight: var(--font-weight-titre-panel);
    font-size: var(--font-size-titre-panel);
    color: var(--color-primary-light-blue-1);
}

    .titre-panel-explore.titre-index {
        font-weight: var(--generic-font-weight-light);
    }

.titre-section-actu {
    font-family: var(--font-family-1);
    font-size: var(--font-size-normal);
    font-weight: var(--generic-font-weight-light);
    line-height: 23.3px;
    letter-spacing: 0.01em;
    text-align: left;
    text-transform: uppercase;
    color: var(--color-primary-light-blue-1);
}

.titre-section-actu.sstheme{
    text-transform: initial;
}

.label-1-explore {
    font-family: var(--font-family-1);
    font-weight: var(--font-weight-label-1);
    font-size: var(--font-size-label-1);
    color: var(--color-primary-light-blue-1);
}

.label-explore-weight-600 {
    font-family: var(--font-family-1);
    font-weight: var(--generic-font-weight-light);
    font-size: var(--font-size-label-1);
    color: var(--color-primary-light-blue-1);
}

.label-1-explore-inactive {
    font-family: var(--font-family-1);
    font-weight: var(--font-weight-label-1);
    font-size: var(--font-size-label-1);
    color: var(--color-grey-3);
}

.caption-form-explore {
    font-family: var(--font-family-1);
    font-weight: var(--generic-font-weight-light);
    font-size: var(--font-size-normal);
    color: var(--color-grey-7);
}

.caption-titre-form-explore {
    margin-top: 10px;
    font-weight: var(--generic-font-weight-light);
}

.content-explore, .data-value {
    font-family: var(--font-family-1);
    font-weight: var(--font-weight-content);
    font-size: var(--font-size-content);
    color: var(--color-primary-light-blue-1);
    letter-spacing: 0.42px;
}

.data-value-strong {
    font-family: var(--font-family-1);
    font-size: var(--font-size-content);
    color: var(--color-error-red-1);
    letter-spacing: 0.42px;
}

.data-value-sub-data {
    font-family: var(--font-family-1);
    font-weight: var(--generic-font-weight-lightest);
    font-size: var(--font-size-smallest);
    color: var(--color-primary-light-blue-1);
    letter-spacing: 0.42px;
    font-style: italic;
}

div.legende-lien-explore, a.legende-lien-explore, a {
    font-family: var(--font-family-1);
    font-weight: var(--font-weight-legend-link);
    font-size: var(--font-size-legend-link);
    color: var(--color-primary-info-blue-1);
    text-decoration: none;
    cursor: pointer;
}

    div.legende-lien-explore:link, a.legende-lien-explore:link, a:link {
        font-family: var(--font-family-1);
        font-weight: var(--font-weight-legend-link);
        font-size: var(--font-size-legend-link);
        color: var(--color-primary-info-blue-1);
        text-decoration: none;
    }

    div.legende-lien-explore:visited, a.legende-lien-explore:visited, a:visited {
        color: var(--color-primary-info-blue-1);
        text-decoration: none;
    }

    div.legende-lien-explore:hover, a.legende-lien-explore:hover, a:hover {
        color: var(--color-primary-info-blue-1);
        text-decoration: underline;
        cursor: pointer;
    }

.placeholder-explore {
    font-family: var(--font-family-1);
    font-weight: var(--font-weight-placeholder);
    font-size: var(--font-size-placeholder);
    color: var(--color-grey-1);
}

.legende-titre-explore {
    font-family: var(--font-family-1);
    font-weight: var(--font-weight-legende-titre);
    font-size: var(--font-size-legende-titre);
    color: var(--color-primary-light-blue-2);
}

.legende-tag-explore {
    font-family: var(--font-family-1);
    font-weight: var(--font-weight-legende-tag);
    font-size: var(--font-size-legende-tag);
    color: var(--color-primary-light-blue-2);
    font-style: italic;
}

.pagination-explore {
    font-family: var(--font-family-1);
    font-weight: var(--font-weight-pagination);
    font-size: var(--font-size-pagination);
    color: var(--color-primary-light-blue-2);
    font-style: italic;
}

.data-title {
    font-family: var(--font-family-1);
    font-weight: var(--generic-font-weight-light);
    font-size: var(--font-size-normal);
    color: var(--color-primary-light-blue-1);
}

.data-label {
    font-family: var(--font-family-1);
    font-weight: var(--font-weight-label-2);
    font-size: var(--font-size-label-2);
    color: var(--color-grey-1);
}

.data-label-strong {
    font-family: var(--font-family-1);
    font-weight: var(--generic-font-weight-heavy);
    font-size: var(--font-size-label-2);
    color: var(--color-grey-1);
}

.data-compulsory {
    font-family: var(--font-family-1);
    font-weight: var(--generic-font-weight-bold);
    font-size: var(--font-size-label-2);
    color: var(--color-error-red-1);
}

.data-tag {
    background-color: var(--color-secondary-light-green-3);
    color: var(--color-primary-light-blue-1);
    padding: 4px 8px;
    border-radius: var(--border-radius-1);
    -moz-border-radius: var(--border-radius-1);
    -webkit-border-radius: var(--border-radius-1);
    width: fit-content;
}
/*#endregion*/

/*#region Divers */
.noBackColor {
    background-color: inherit !important;
}

.do-not-display {
    display: none;
}

table > tbody > tr > td.valign-top {
    vertical-align: top;
}

table.noSpacingNoPadding {
    border-spacing: 0;
    border-collapse: collapse;
}

    table.noSpacingNoPadding > tbody > tr > td {
        padding: 0; /* Marge à l'intérieur des cellules, équivalent de cellpadding */
    }

table.tdx3 {
    width: 100%;
}

    table.tdx3 > tbody > tr > td {
        width: 33%;
        vertical-align: top;
    }
/*#endregion*/

/*#region Boutons*/
.button-reverse {
    border-color: var(--color-secondary-light-green-1);
    border-width: 1px;
    border-style: solid;
    background-color: var(--color-primary-light-white-1);
    color: var(--color-secondary-light-green-1);
    padding: 0px;
}

    .button-reverse:hover {
        border-color: var(--color-secondary-light-green-1);
        border-width: 1px;
        border-style: solid;
        background-color: var(--color-secondary-light-green-1);
        color: var(--color-primary-light-white-1);
        padding: 0px;
    }

.button-light-blue {
    border-color: var(--color-primary-light-blue-2);
    border-width: 1px;
    border-style: solid;
    background-color: var(--color-primary-light-blue-2);
    color: var(--color-primary-light-white-1);
}

    .button-light-blue:hover {
        border-color: var(--color-primary-light-blue-2-1);
        border-width: 1px;
        border-style: solid;
        background-color: var(--color-primary-light-blue-2-1);
        color: var(--color-primary-light-white-1);
        font-weight: var(--generic-font-weight-light);
    }

.button-dark-blue {
    background-color: var(--color-primary-light-blue-1);
    color: var(--color-primary-light-white-1);
}

    .button-dark-blue:hover {
        background-color: var(--color-primary-light-blue-1-1);
        font-weight: var(--generic-font-weight-light);
    }


.button-voir {
    background-color: var(--color-primary-light-blue-1);
    color: var(--color-primary-light-white-1);
    font-size: var(--font-size-normal);
    font-family: var(--font-family-1);
    border-radius: var(--border-radius-1);
    border: 1px solid var(--color-primary-light-blue-1);
    padding: 5px 20px;
    cursor: pointer;
}

    .button-voir:hover {
        background-color: var(--color-primary-light-blue-1-1);
        border: 1px solid var(--color-primary-light-blue-1-1);
        font-weight: var(--generic-font-weight-light);
    }
/*#endregion*/

/*#region Classes Marques */

i.color-linkedin {
    color: var(--color-linkedin);
}

i.color-twitter-old {
    color: var(--color-twitter-old);
}

i.color-twitter-new {
    color: var(--color-twitter-new);
}

i.color-facebook {
    color: var(--color-facebook);
}
/*#endregion Classe Marques*/

/*#region Titre de page (ANCIEN FORMAT) - La région pourra être supprimé lorsque tous les titres auront été basculé sur le nouveau format (voir plus bas) */
/*
    @auteur     : Alexandre Rangé
    @date       : 03/01/2024
    @description: Ci-dessous les styles utilisé par la zone de titre de chacune des pages.

    Réprésentation visuelle d'un titre: v1
    *****************************************************************titre-page-container****************************************************************
    * titre-fiche-label                                             titre-centre-principal                                                      titre-ref
    * titre-fiche-type                                              titre-centre-secondaire                                             titre-picto-texte
    *****************************************************************************************************************************************************
*/
.titre-page-container {
    width: 100%;
}

.titre-fiche-label {
    color: var(--color-primary-light-blue-1);
    text-align: left;
    font-family: var(--font-family-1);
    font-size: var(--font-size-small);
    font-style: italic;
    font-weight: var(--generic-font-weight-lightest);
    line-height: 20px;
    letter-spacing: 0.39px;
}

.titre-centre-principal {
    text-align: center;
    font-family: var(--font-family-1);
    line-height: 20px;
    letter-spacing: 0.39px;
}

.titre-picto-texte {
    text-align: right;
    font-family: var(--font-family-1);
    font-size: var(--font-size-small);
    font-weight: var(--generic-font-weight-heavy);
    line-height: 20px;
    letter-spacing: 0.39px;
}

.titre-picto, .titre-picto-label {
    padding-left: 5px;
    padding-right: 5px;
    color: var(--color-secondary-light-green-1);
}

.titre-picto-non, .titre-picto-label-non {
    padding-left: 5px;
    color: var(--color-error-red-1);
}

.titre-fiche-type {
    color: var(--color-primary-info-blue-1);
    text-align: left;
    font-family: var(--font-family-1);
    font-size: var(--font-size-small);
    font-weight: var(--generic-font-weight-lightest);
    line-height: 20px;
    letter-spacing: 0.39px;
    vertical-align: top;
}

.titre-centre-secondaire {
    color: var(--color-primary-info-blue-1);
    text-align: center;
    font-family: var(--font-family-1);
    font-size: var(--font-size-big);
    font-weight: var(--generic-font-weight-heavy);
    line-height: 30px;
    letter-spacing: 0.39px;
}

.titre-ref {
    color: var(--color-primary-light-blue-1);
    text-align: right;
    font-family: var(--font-family-1);
    font-size: var(--font-size-small);
    font-style: italic;
    font-weight: var(--generic-font-weight-lightest);
    line-height: 20px;
    letter-spacing: 0.39px;
}

.titre-statut {
    color: var(--color-error-red-1);
}
/*#endregion*/

/*#region Titre sans volumétrie*/
/*
    @auteur     : Alexandre Rangé
    @date       : 08/07/2024
    @description: Ci-dessous les styles utilisé par la zone de titre de chacune des pages d'affichage.
    --------------------------------------- EXEMPLE ---------------------------------------
    <div id="titrePage" class="titre-fiche-container">
        <table class="titre-fiche-table">
            <tr class="titre-fiche-row">
                <td class="titre-fiche-gauche">
                    <table class="titre-fiche-gauche-table">
                        <tr>
                            <td class="titre-fiche-cell-principale">
                                <div class="titre-fiche-cell-principale-div">
                                    <dx:ASPxLabel ID="lblTitre" runat="server" CssClass="titre-fiche-principal" EncodeHtml="false"></dx:ASPxLabel>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="titre-fiche-cell-secondaire">
                                <dx:ASPxLabel ID="lblSousTitre" runat="server" CssClass="titre-fiche-secondaire" EncodeHtml="false"></dx:ASPxLabel>
                            </td>
                        </tr>
                    </table>
                </td>
                <td class="titre-fiche-droite">
                    <table class="titre-fiche-droite-table">
                        <tr>
                            <td class="titre-fiche-cell-type-ref">
                                <dx:ASPxLabel ID="lblTypeFiche" runat="server" CssClass="titre-fiche-type" EncodeHtml="false"></dx:ASPxLabel>
                                <dx:ASPxLabel ID="lblRefFiche" runat="server" CssClass="titre-fiche-ref" EncodeHtml="false"></dx:ASPxLabel>
                            </td>
                        </tr>
                        <tr>
                            <td class="titre-fiche-cell-complement">
                                <dx:ASPxLabel ID="lblInfoComplement" runat="server" CssClass="titre-fiche-complement" EncodeHtml="false"></dx:ASPxLabel>
                            </td>
                        </tr>
                        <tr>
                            <td class="titre-fiche-cell-qualif">
                                <dx:ASPxLabel ID="lblQualif" runat="server" CssClass="titre-fiche-qualif" EncodeHtml="false"></dx:ASPxLabel>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
*/
/* Conteneur global du titre */
div.titre-fiche-container {
    width: 100%;
    padding: 10px 0;
}
/* Tableau de la structure */
table.titre-fiche-table {
    width: 100%;
}

tr.titre-fiche-row {
    vertical-align: top;
}

td.titre-fiche-full {
    width: 100%;
}

td.titre-fiche-gauche {
    width: 60%;
}

td.titre-fiche-droite {
    width: 40%;
}

table.titre-fiche-gauche-table, table.titre-fiche-droite-table {
    width: 100%;
}
/* Cellule contenant le titre principale */
td.titre-fiche-cell-principale {
    text-align: left;
    vertical-align: top;
}
/* Label du titre principale */
.titre-fiche-principal {
    font-family: var(--font-family-1);
    font-size: var(--font-size-big-3);
    font-weight: var(--generic-font-weight-heavy);
    line-height: 32px;
    letter-spacing: 0.03em;
    color: var(--color-primary-light-blue-1);
}

div.titre-fiche-cell-principale-div {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2; /* Nombre de lignes à afficher avant l'ellipse */
    text-overflow: ellipsis;
    max-height: 68px;
}

/* Cellule contenant le titre secondaire */
td.titre-fiche-cell-secondaire {
    text-align: left;
}
/* Label du titre secondaire */
.titre-fiche-secondaire {
    font-family: var(--font-family-1);
    font-size: var(--font-size-big);
    font-weight: var(--generic-font-weight-lightest);
    line-height: 30px;
    letter-spacing: 0.01em;
    color: var(--color-primary-info-blue-1);
}

/* Cellule contenant le type et la référence */
.titre-fiche-cell-type-ref {
    width: 50%;
    text-align: right;
}
/* Label du type de la fiche */
/* Label de la référence */
.titre-fiche-type, .titre-fiche-ref {
    font-family: var(--font-family-1);
    font-size: var(--font-size-small);
    font-weight: var(--generic-font-weight-lightest);
    line-height: 30px;
    letter-spacing: 0.03em;
    color: var(--color-primary-light-blue-1);
}

/* Cellule contenant le complement */
td.titre-fiche-cell-complement {
    width: 50%;
    text-align: right;
}
/* Label du complement */
.titre-fiche-complement {
    font-family: var(--font-family-1);
    font-size: var(--font-size-small);
    font-style: italic;
    font-weight: var(--generic-font-weight-lightest);
    line-height: 30px;
    letter-spacing: 0.03em;
    color: var(--color-primary-light-blue-1);
}

.titre-fiche-complement-lien {
    cursor: pointer;
}

    .titre-fiche-complement-lien:hover {
        text-decoration: underline;
    }

/* Label du complément spécifique client */
.titre-fiche-complement-client {
    font-family: var(--font-family-1);
    font-size: var(--font-size-small);
    font-style: italic;
    font-weight: var(--generic-font-weight-lightest);
    line-height: 30px;
    letter-spacing: 0.03em;
    color: var(--color-error-red-1);
}

/* Cellule contenant la qualification */
td.titre-fiche-cell-qualif {
    width: 50%;
    text-align: right;
}
/* Label de la qualification */
.titre-fiche-qualif {
    font-family: var(--font-family-1);
    font-size: var(--font-size-small);
    font-weight: var(--generic-font-weight-heavy);
    line-height: 30px;
    letter-spacing: 0.03em;
    color: var(--color-secondary-light-green-1);
    --fa-primary-color: var(--color-secondary-light-green-1);
    --fa-secondary-color: var(--color-secondary-light-green-1);
}
/*#endregion*/

/*#region Titre avec Volumétrie 
    @auteur     : Alexandre Rangé
    @date       : 08/07/2024
    @description: Ci-dessous les styles utilisé par la zone de titre de chacune des pages d'affichage.

    Réprésentation visuelle d'un titre: 
    **************************************************************** titre-fiche-volumetrie-container [titre-fiche-volumetrie-table] *******************************************
    * titre-fiche-volumetrie-label [volumetrie-label]                 titre-fiche-volumetrie-ligne [blue-line]                 titre-fiche-volumetrie-nombre [volumetrie-nombre]
    * titre-fiche-volumetrie-legend [volumetrie-legend]
    ****************************************************************************************************************************************************************************
    <div id="titrePage" class="titre-fiche-volumetrie-container">
        <table class="titre-fiche-volumetrie-table">
            <tr>
                <td class="titre-fiche-volumetrie-label">
                    <dx:ASPxLabel ID="lblTitrePage" runat="server" CssClass="volumetrie-label" EncodeHtml="false"></dx:ASPxLabel>
                </td>
                <td class="titre-fiche-volumetrie-ligne">
                    <div class="blue-line"></div>
                </td>
                <td class="titre-fiche-volumetrie-nombre">
                    <dx:ASPxLabel ID="lblVolumetrie" runat="server" CssClass="volumetrie-nombre" EncodeHtml="false"></dx:ASPxLabel>
                </td>
            </tr>
            <tr>
                <td class="titre-fiche-volumetrie-legend" colspan="3">
                    <dx:ASPxLabel ID="lblLegend" runat="server" CssClass="volumetrie-legend" EncodeHtml="false"></dx:ASPxLabel>
                </td>
            </tr>
        </table>
    </div>
*/
div.titre-fiche-volumetrie-container {
    width: 100%;
    padding: 10px 0;
    max-width: 100vw;
}

table.titre-fiche-volumetrie-table {
    width: 100%;
}

td.titre-fiche-volumetrie-label {
    text-align: left;
    width: 0;
    min-width: fit-content;
    padding-left: 16px;
    white-space: nowrap;
}

.volumetrie-label {
    font-family: var(--font-family-1);
    font-size: var(--font-size-big-3);
    font-weight: var(--generic-font-weight-heavy);
    line-height: 31.92px;
    letter-spacing: 0.03em;
    color: var(--color-primary-light-blue-1);
}

    .volumetrie-label.soft {
        font-weight: var(--generic-font-weight-lightest);
    }

div.volumetrie-ligne {
    flex-grow: 1;
    height: 1px;
    background-color: var(--color-primary-light-blue-3);
    margin-top: 1px;
}

td.titre-fiche-volumetrie-nombre {
    text-align: right;
    width: 0;
    min-width: fit-content;
    padding-right: 16px;
    white-space: nowrap;
}

.volumetrie-nombre {
    font-family: var(--font-family-1);
    font-size: var(--font-size-big);
    font-weight: var(--generic-font-weight-heavy);
    margin: 8px 0px;
    color: var(--color-secondary-light-green-1);
}

td.titre-fiche-volumetrie-legend {
    text-align: left;
    padding-left: 16px;
    padding-right: 16px;
}

.volumetrie-legend {
    font-family: var(--font-family-1);
    font-size: var(--font-size-big);
    font-weight: var(--generic-font-weight-lightest);
    line-height: 23.3px;
    letter-spacing: 0.01em;
    color: var(--color-primary-info-blue-1);
}
/*#endregion*/

/*#region Fiches détails*/
.data-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: stretch;
    align-items: stretch;
}

.data-container-one-col {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
    column-fill: auto;
}

.data-container-three-col {
    display: flex;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    column-fill: auto;
}

.data-container-four-col {
    display: flex;
    width: 100%;
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    column-fill: auto;
    justify-content: space-between;
}

.data-multi-panel {
    display: flex;
    gap: 8px;
}

.data-cell {
    padding: 8px 0px;
    display: flex;
    flex-direction: column;
    flex: 1 0 45%;
}

.data-cell-no-data {
    padding: 8px 0px;
    display: flex;
    margin: auto;
}

.data-cell-small-padding {
    padding: 2px 12px 2px 12px;
    display: flex;
    flex-direction: column;
    flex: 1 0 45%;
}

.data-cell-no-padding-lr {
    padding: 2px 0px;
    display: flex;
    flex-direction: column;
    flex: 1 0 45%;
}

.data-cell-context {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    flex: 1 0 15%;
}

.data-cell-thirty {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    flex: 1 0 30%;
    page-break-inside: avoid; /* Theoretically FF 20+ */
    break-inside: avoid-column; /* Chrome, Safari, IE 11 */
}

.data-small-cell {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    flex: 1 0 15%;
}

.date-fiche-detail {
    font-size: var(--font-size-smallest);
    font-weight: var(--generic-font-weight-lightest);
    color: var(--color-grey-7);
}

    .date-fiche-detail:after {
        content: "\a";
        white-space: pre;
    }

.panel-container {
    display: flex;
    column-gap: 16px;
}

.panel-precision-container {
    column-gap: 16px;
}

.panel-cell-fifty {
    display: flex;
    flex-direction: column;
    flex: 1 0 50%;
    page-break-inside: avoid; /* Theoretically FF 20+ */
    break-inside: avoid-column; /* Chrome, Safari, IE 11 */
}

.panel-cell-thirty {
    display: flex;
    flex-direction: column;
    flex: 1 0 30%;
    page-break-inside: avoid; /* Theoretically FF 20+ */
    break-inside: avoid-column; /* Chrome, Safari, IE 11 */
}

.panel-cell-twenty-five {
    display: flex;
    flex-direction: column;
    flex: 1 0 25%;
    page-break-inside: avoid; /* Theoretically FF 20+ */
    break-inside: avoid-column; /* Chrome, Safari, IE 11 */
}

.divCorps {
    width: 100%;
}

.fiche-detail {
    width: 100%;
    max-width: 100%;
    display: table;
    column-gap: 16px;
}

.page-left-column {
    padding-right: 12px;
}

.page-right-column {
    padding-left: 12px;
}

.page-left-column, .page-right-column {
    width: 50%;
    max-width: 50%;
    vertical-align: top;
}

.page-left-column-70-30 {
    padding-right: 15px;
    width: 70%;
    max-width: 70%;
    vertical-align: top;
}

.page-right-column-70-30 {
    padding-left: 15px;
    width: 30%;
    max-width: 30%;
    vertical-align: top;
}


.page-one-column {
    width: 100%;
    vertical-align: top;
}

td.page-three-column {
    width: 33%;
    vertical-align: top;
}

td.page-two-column {
    width: 50%;
    vertical-align: top;
}

.panel-picto-white, .panel-picto-white-left {
    color: var(--color-primary-light-white-1);
    font-size: var(--font-size-normal);
}

.panel-picto-white-left {
    left: 1px;
}

.panel-data-half {
}

.container-header-panel {
    display: flex;
    gap: 20px;
    align-items: center;
    font-weight: var(--generic-font-weight-heavy);
}

.blue-line {
    flex-grow: 1;
    height: 1px;
    background-color: var(--color-primary-light-blue-3);
    margin-top: 4px;
}

.label-treeview {
    font-family: var(--font-family-1);
    font-weight: var(--generic-font-weight-lightest);
    font-size: var(--font-size-normal);
    color: var(--color-primary-light-blue-1);
    line-height: 23px;
    letter-spacing: 0.42px;
    width: calc(100% - 20px);
}
/*#endregion*/

/*#region Specif client*/
.entete-client {
    color: var(--color-primary-light-blue-1);
    font-size: var(--font-size-normal);
}
/*#endregion*/

/*#region Tuile actu*/
div.actu-global-container {
    display: flex;
    gap: 16px;
}

div.actu-container {
    width: 100%;
    min-width: 370px;
    border: solid 1px var(--color-primary-light-blue-3);
    border-top-right-radius: var(--border-radius-1);
    border-bottom-right-radius: var(--border-radius-1);
    color: var(--color-primary-light-blue-1);
}

    div.actu-container:hover {
        border: solid 1px var(--color-secondary-light-green-1);
    }

table.actu-container-table, table.actu-content-table {
    width: 100%;
    height: 100%;
    border-spacing: 0;
    vertical-align: top;
    border-collapse: collapse;
    table-layout: fixed;
}

td.actu-bordure {
    width: 4px;
    background-color: var(--color-primary-info-blue-3);
    height: 100%;
}

div.actu-container:hover td.actu-bordure {
    background-color: var(--color-secondary-light-green-1);
}

td.actu-content {
    padding: 10px 20px 15px 16px;
}

tr.actu-content-picto-type {
    border-bottom: solid 1px var(--color-primary-light-blue-3);
    height: 28px;
    min-height: 28px;
    padding-bottom: 4px;
}

td.actu-content-picto {
    font-size: var(--font-size-big);
    width: 20px;
    min-width: 20px;
    max-width: 20px;
}

td.actu-content-type {
    font-size: var(--font-size-small);
}

td.actu-content-follow-text {
    font-size: var(--font-size-small);
    color: var(--color-secondary-light-green-1);
    text-align: right;
    width: 100px;
    min-width: 100px;
    padding-right: 8px;
}

td.actu-content-follow-picto {
    font-size: var(--font-size-big);
    color: var(--color-secondary-light-green-1);
    width: 20px;
    min-width: 20px;
    max-width: 20px;
}

tr.actu-content-titre {
    font-size: var(--font-size-normal);
    font-weight: var(--generic-font-weight-light);
    height: 24px;
    min-height: 24px;
    padding: 4px 0px
}

tr.actu-content-type-etablissement {
    font-size: var(--font-size-normal);
    font-weight: var(--generic-font-weight-lightest);
    height: 24px;
    min-height: 24px;
    padding: 4px 0px
}

tr.actu-content-sous-titre {
    font-size: var(--font-size-small);
    color: var(--color-grey-1);
    height: 24px;
    min-height: 24px;
    padding: 4px 0px
}

tr.actu-content-sous-titre-bleu {
    font-size: var(--font-size-small);
    color: var(--color-primary-light-blue-1);
    height: 24px;
    min-height: 24px;
    padding: 4px 0px
}

tr.actu-content-info {
    vertical-align: top;
}

div.actu-content-titre-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 1; /* Nombre de lignes à afficher avant l'ellipse */
    text-overflow: ellipsis;
    padding: 4px 0px;
    height: 18px;
}

div.actu-content-info-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 5; /* Nombre de lignes à afficher avant l'ellipse */
    text-overflow: ellipsis;
    padding: 4px 0px;
}

div.actu-content-limit-1-line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 1; /* Nombre de lignes à afficher avant l'ellipse */
    text-overflow: ellipsis;
    padding: 4px 0px;
}

div.actu-content-limit-3-line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 3; /* Nombre de lignes à afficher avant l'ellipse */
    text-overflow: ellipsis;
    padding: 4px 0px;
}

div.actu-content-limit-5-line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 5; /* Nombre de lignes à afficher avant l'ellipse */
    text-overflow: ellipsis;
    padding: 4px 0px;
}

td.actu-cell-vertical-align {
    vertical-align: top;
}

td.actu-padding-data {
    padding-top: 8px;
}

tr.actu-read-more {
    height: 24px;
    min-height: 24px;
}

td.actu-read-more-cell {
    width: 100%;
}
/*#endregion*/

/*#region Immeubles/Copro */
.immeuble-table {
    width: 100%;
}

.immeuble-col-gauche {
    width: 33%;
    vertical-align: top;
}

.immeuble-col-droite {
    vertical-align: top;
}

.indicateur-minus {
    color: var(--color-error-red-1);
    font-size: var(--font-size-big-1);
}

.indicateur-equal {
    color: var(--color-primary-light-orange-1);
    font-size: var(--font-size-big-1);
}

.indicateur-plus {
    color: var(--color-secondary-light-green-1);
    font-size: var(--font-size-big-1);
}
/*#endregion*/

button.swal-button:hover {
    font-weight: var(--generic-font-weight-heavy);
}

button.swal-button--danger:not([disabled]):hover, button.swal-button--cancel:not([disabled]):hover, button.swal-button:not([disabled]):hover {
    background-color: var(--color-secondary-light-green-1-1);
}