/*--------------------------------------------*\
                RESET HTP 
/*--------------------------------------------*/
.htp h1, .htp h2, .htp h3, .htp p {
    margin-top: 0;
    margin-bottom: 0 !important;
    font-size: 14px;
}

.htp .form-group {margin-bottom: 0;}

.htp ul {
    list-style: none;
    flex-wrap: nowrap;
}


/*--------------------------------------------*\
                GENERIQUE HTP 
/*--------------------------------------------*/
.htp .clear {
    clear: both;
}

.htp a.lienTxt {
    color: var(--color_site);
    text-decoration: none;
}

.htp a.lienTxt:hover {
    text-decoration: underline;
}

.htp .bt-cta,
.bt-cta {
    padding: 6px 12px !important;
    margin-top: 1em;
    margin-bottom: 0;
    color: #fff;
    border-radius: 50px;
    transition: background-color 0.5s;
    font-size: 16px !important; 
}
.htp .onglet-demande .bt-cta {background-color: var(--color_demande);}
.htp .onglet-negociee .bt-cta {background-color: var(--color_negociee);}
.htp .onglet-annuaire .bt-cta {background-color: var(--color_annuaire);}

.htp .bt-cta:hover {
    color: #000;
}
.htp .onglet-negociee .bt-cta:hover {background-color: var(--color_negociee_opacity40);}

.bt-cta-inverse {
    margin-top: 1em;
    background-color: var(--white);
    border-style: solid;
    border-width: 1px;
    font-size: 18px !important;
}
.htp .onglet-demande .bt-cta-inverse,
.htp .charte-demande .bt-cta-inverse {color: var(--color_demande); border-color: var(--color_demande);}
.htp .onglet-negociee .bt-cta-inverse {color: var(--color_negociee); border-color: var(--color_negociee);}
.htp .onglet-annuaire .bt-cta-inverse {color: var(--color_annuaire); border-color: var(--color_annuaire);}
.htp .charte-disponible.bt-cta-inverse, 
.htp .onglet-disponible .bt-cta-inverse {color: var(--color_disponible); border-color: var(--color_disponible);}
.charte-besoin.bt-cta-inverse, 
.htp .onglet-besoin .bt-cta-inverse {color: var(--color_besoin); border-color: var(--color_besoin);}

.htp .bt-cta-inverse:hover {
    color: var(--white) !important; /* reset Bst */
}
.htp .onglet-demande .bt-cta-inverse:hover,
.htp .charte-demande .bt-cta-inverse:hover  {border-color: var(--color_demande); background-color: var(--color_demande);}
.htp .onglet-negociee .bt-cta-inverse:hover  {border-color: var(--color_negociee); background-color: var(--color_negociee);}
.htp .onglet-annuaire .bt-cta-inverse:hover  {border-color: var(--color_annuaire); background-color: var(--color_annuaire);}
.htp .charte-disponible .bt-cta-inverse:hover,
.htp .charte-disponible.bt-cta-inverse:hover {border-color: var(--color_disponible); background-color: var(--color_disponible);}
.htp .charte-besoin .bt-cta-inverse:hover,
.htp .charte-besoin.bt-cta-inverse:hover {border-color: var(--color_besoin); background-color: var(--color_besoin);}

.bt-cta-noir {
    margin-top: 1em;
    background-color: #000;
    border: 1px solid #000;
    color: #fff;
}

.bt-cta-noir:hover {
    background-color: #fff;
    border: 1px solid #000;
    color: #000;
}

.htp .bt-centrer {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/*--------------------------------------------*\
                Bloc Wrapper 
/*--------------------------------------------*/
/* 2 Colonnes : Contenu Principal + 1 col Droite Aside */
.wrapper-1col-1aside {
    display: flex;
    align-items: flex-start;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #fff;
}

.wrapper-1col-1aside .wcol-principal {
    flex: 3 0 0;
}

.wrapper-1col-1aside .wcol-droit {
    flex: 1 0 0;
}

.monCompte .wrapper-1col-1aside {
    gap: 12px;
}

.monCompte .wcol-principal {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2em;
}

.monCompte .wcol-principal md-content {
    background-color: #fff; /* reset BsT */
    overflow: visible; /* reset BsT */
    margin-left: auto;
    margin-right: auto;
    max-width: 880px;
    width: 100%;
}


/*--------------------------------------------*\
                    BLOC TYPE
/*--------------------------------------------*/
.deroulant-bloc  {
    width: 300px;
}

.deroulant-bloc .bloc-titre {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.deroulant-bloc .bloc-titre .titre {
    margin: 0 10px 0;
}

.deroulant-bloc .bloc-titre svg path {
    fill: var(--color_site);
}


/* _____________________________________ */
/*      TABLEAU LISTE - Mon Espace       */
.monEspace .tableau-liste th {
    cursor: pointer; 
    border-collapse:separate; 
    border-spacing:0 20px;
} 

.monEspace .tableau-liste th:first-of-type, 
.monEspace .tableau-liste th:last-of-type {
    cursor: default !important; 
    width: 5%;
} 

.monEspace .tableau-liste .ligne-info {
    position: relative; /* accroche .info-hover */
} 

.monEspace .tableau-liste td {
    vertical-align: middle;
    padding: 10px 0 0;
    height: 55px;
} 

.monEspace .tableau-liste .ligne-info td {
    cursor: pointer;
    /* background-color: yellow; */
}

.monEspace .tableau-liste .ligne-info td.info-titre {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.monEspace .tableau-liste .ligne-info .ligne-hover .info-hover,
.monEspace .tableau-liste .ligne-info .ligne-hover .bg-warning  {
    display: none;
}

.monEspace .tableau-liste .ligne-info:hover .ligne-hover .info-hover,
.monEspace .tableau-liste .ligne-info:hover .ligne-hover .bg-warning  {
    display: block;
}

.monEspace .tableau-liste .ligne-info .ligne-hover .info-hover,
.monEspace .tableau-liste .ligne-info .ligne-hover .bg-warning {
    position: absolute;  /* accroché par  .ligne-info */
    top: 0;
    left: 0;
    width: 100%;
}


/*--------------------------------------------*\
            CGV / CGU / CHARTE / CONFI
/*--------------------------------------------*/
.htp .pg-legal {
    text-align: justify;
    hyphens: auto;
}

.htp .pg-legal ul, 
.htp .pg-legal ol {
    margin-bottom: 0;
}

.htp .pg-legal ul {
    list-style: circle;
}

.htp .pg-legal h2, 
.htp .pg-legal h3,
.htp .pg-legal h4,
.htp .pg-legal h5 {
    text-align: left;
    font-size: 20px;
    margin-top: 1.5em !important;
}

.htp .pg-legal h2 + h3,
.htp .pg-legal h3 + h4, 
.htp .pg-legal h4 + h5 {
    margin-top: 0.5em !important;
}

.htp .pg-legal p, 
.htp .pg-legal ul  {
    margin-top: 1em;
}

.htp .pg-legal p + ul, 
.htp .pg-legal p + ol  {
    margin-top: 0;
}

.htp .pg-legal ul ol {
    margin-bottom: 0.5em;
}

.htp .pg-legal h2 + *, 
.htp .pg-legal h3 + *,
.htp .pg-legal h4 + *,
.htp .pg-legal h5 + * {
    margin-top: 0.6em;
}


/*--------------------------------------------*\
                Dashboard client
/*--------------------------------------------*/

/* -------------- */
/* Onglet Général */
.monCompte .container-principal {
    display: flex;  
    margin-left: auto;
    margin-right: auto;
}

.dashboard-client .wcol-principal .titre {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

.monCompte .container-aside {
    display: flex;
    flex-direction: column;
    width: 215px;
    position: sticky;
    top: 25%;
    margin-top: 100px;
}

.monCompte .container-aside .pop-in-contact_tips {
    position: initial !important;
    margin-top: 0;
}

.monCompte .container-aside .tips {
    border: 1px solid var(--color_site);
}

/* ---- */
/* menu */
.monCompte md-tabs-canvas.md-center-tabs {
    align-items: center;
}

.monCompte md-tabs-canvas {
    height: 88px;
}

.monCompte .md-tab {
    text-transform: capitalize;
    font-size: 16px;
    color: #fff !important;
    cursor: pointer;
    line-height: 65px;
}

.monCompte md-pagination-wrapper {
    align-items: center;
    height: 88px;
    justify-content: space-evenly;
}

/* -------------- */
/* Onglet Général */
.dashboard-client .onglet-general .form-colPrincipal,
.dashboard-client .onglet-general .form-colFull {
    flex: 0 0 75%;
    display: flex;
    flex-direction: column;
    column-gap: 1em;
}

.dashboard-client .onglet-general .form-colDroit {
    flex: 0 0 20%;
    margin-top: 1em;
}

.dashboard-client .onglet-general .general-photo {
    text-align: center;
}
                          
.dashboard-client .onglet-general .formulaire-profil {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.dashboard-client .onglet-general .form-alignTel,
.dashboard-client .onglet-general .general-web,
.dashboard-client .onglet-general .form-alignMdp,
.dashboard-client .onglet-general .general-adresse,
.dashboard-client .onglet-general .general-siret {
    width: 100%;
    max-width: 445px;
} 

.dashboard-client .onglet-general .general-agrement {
    flex: 1 0 0;
}

.dashboard-client .onglet-general input,
.dashboard-client .onglet-general label {
    width: 100%; /* Reset BsT */
    max-width: 445px;
}

.dashboard-client .onglet-general label.form--label,
.dashboard-client .onglet-societe label.form--label {
    display: block; /* Reset BsT */
    margin-top: 1.5em;
    margin-bottom: 0;  /* Reset BsT */
    color: var(--color_site);
    font-weight: 500; 
    font-size: 13px;  /* Reset BsT */
}

.dashboard-client .onglet-general .form-alignTel {
    display: flex;
    flex-flow: row wrap;
    column-gap: 1em;
    justify-content: space-between;
}

.dashboard-client .onglet-general .form-alignTel > div {
    width: 45%;
}
                                        
.dashboard-client .onglet-general .formulaire-societe {
    display: flex;
    flex-flow: column wrap;
}
                              
.dashboard-client .onglet-general .form-alignAdresse {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1em;
}

.dashboard-client .onglet-general .form-alignWeb {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    column-gap: 1em;
}

.dashboard-client .onglet-general .general-cp {
    flex: 125px 0 0;
}

.dashboard-client .onglet-general .general-ville {
    flex: 2 0 0;
}

.dashboard-client .onglet-general .form-alignMdp {
    display: flex;
    align-items: flex-end;
}

.dashboard-client .onglet-general .form-alignMdp input {
    margin-bottom: 5px;
}

.dashboard-client .onglet-general .general-mdp {
    width: 45%;
}

.dashboard-client#ParametreApp .card-header {
    background-color: #fff; /* reset BsT */
}

.dashboard-client#ParametreApp .card--demande a {
    text-align: left; /* reset BsT */
    font-size: 20px; /* reset BsT */
}

.dashboard-client .onglet-general .modifier-mdp {
    margin-left: 2em;
    text-align: center;
}

.dashboard-client .onglet-general .modifier-mdp small {
    color: var(--color_site);
    font-size: 12px; /* reset BsT */
    text-transform: uppercase;
}

.form-alignSiret {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    column-gap: 1em;
}
                               

/* ------------- */
/* Onglet Equipe */
.monCompte .container-principal.espaceClient-equipe {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
}

.container-principal .card-body {
    width: 276px;
    max-width: 276px;
    padding: 12px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, .29);
}

.container-principal .card-body .equipe-nom {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    color: var(--color_site);
}

.container-principal .card-body .equipe-fonction {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: var(--gris-2);
}

.container-principal .card-body .equipe-detail {
    font-family: "Roboto", sans-serif;
    font-weight: 500;  /* Roboto medium */
    font-size: 14px;
    color: var(--color_paragraphe);
}

.container-principal .equipePlus {
    box-shadow: 0px 3px 6px rgba(0, 0, 0, .29);
    width: 276px;
    height: 145px;
    font-family: "Calibri", sans-serif;
    font-size: 85px;
    font-weight: bold;
    color: var(--color_site);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
}

.container-principal .equipePlus:hover {
    text-decoration: none;
}

.monCompte .espaceClient-equipe md-tabs-canvas.md-center-tabs {
    justify-content: center; /* reset BsT */
}

.monCompte .espaceClient-equipe md-tabs-canvas {
    height: 88px; /* reset BsT */
}

.monCompte .espaceClient-equipe .md-tab {
    text-transform: capitalize; /* reset BsT */
    font-size: 16px; /* reset BsT */
    color: #fff !important; /* reset BsT */
}

.monCompte .espaceClient-equipe md-pagination-wrapper {
    align-items: center; /* reset BsT */
    height: 88px; /* reset BsT */
}

/* ------------- */
/* Onglet Facture */
.dashboard-client .onglet-facture .table-responsive th,
.dashboard-client .onglet-facture .table-responsive td {
    text-align: center;
    font-size: 16px !important; /* reset BsT */
    font-family: "Roboto", sans-serif !important; /* reset BsT */  
}

.dashboard-client .onglet-facture .table-responsive #profils th {
    font-weight: 400 !important; /* reset BsT */  
}

.dashboard-client .onglet-facture .table-responsive td {  
    font-weight: 400; /* Roboto regular */ 
}

.dashboard-client .onglet-facture .table-responsive .td-consulte a {
    color: var(--color_site);
}

.dashboard-client .onglet-facture .table-responsive .td-facture a {
    color: inherit;
}


/* ------------------------- */
/* Onglet Dossier de Societe */
.dashboard-client .onglet-societe .container-principal {
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    max-width: 880px;
    width: 100%;
}

.dashboard-client .onglet-societe .titre,
.cniSociete h3.titre  {
    text-transform: uppercase;
    font-size: 16px;
}

.dashboard-client .onglet-societe h2.titre:not(:first-child),
.cniSociete h2.titre:not(:first-child) {
    margin-top: 1em;
}

.dashboard-client .onglet-societe h3.titre,
.cniSociete h3.titre {
    color: var(--color_site);
    margin-top: 1em;
}

.dashboard-client .onglet-societe .formulaire-dossierModifier h3.titre  {
    margin-top: 2em;
}

.dashboard-client .onglet-societe .titre .date-maj {
    display: block;
    font-style: italic;
    font-size: 14px;
    color: var(--gris-1);
    text-transform: none;
    font-weight: normal;
    margin-top: 5px;
}

.dashboard-client .onglet-societe .maincontent__card__body {
    padding: 0; /* reset BsT */
}

.dashboard-client .onglet-societe .societe-siret,
.cniSociete .societe-siret {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.dashboard-client .onglet-societe .intitule,
.cniSociete .intitule {
    font-size: 14px;
    text-transform: uppercase;
    color: var(--color_site);
    font-weight: 500;
    margin-top: 8px;
}

.dashboard-client .onglet-societe .intitule span {
    font-weight: normal;
    color: #000;
    font-size: 16px;
    text-transform: math-auto;
}

.dashboard-client .onglet-societe .intitule-fluide p {
    display: inline-block;
}

.dashboard-client .onglet-societe .intitule-fluide p:not(:first-child) {
    margin-left: 2em;
}

.dashboard-client .onglet-societe .checkbox-fluide,
.cniSociete .checkbox-fluide {
    text-align: center;
}

.dashboard-client .onglet-societe .checkbox-fluide .titre {
    width: 100%;
    margin-bottom: 8px;
}

.dashboard-client .onglet-societe .checkbox-fluide div,
.cniSociete .checkbox-fluide div {
    display: inline-block;
    margin-top: 8px;
}

.dashboard-client .onglet-societe .checkbox-fluide div:not(:first-child),
.cniSociete .checkbox-fluide div:not(:first-child) {
    margin-left: 1em;
}

.dashboard-client .onglet-societe .checkbox-2col,
.cniSociete .checkbox-2col {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 1em;
    justify-content: center;
}

.dashboard-client .onglet-societe .checkbox-2col .titre,
.cniSociete .checkbox-2col .titre {
    flex: 0 0 100%;
}

.dashboard-client .onglet-societe .checkbox-2col ul,
.cniSociete .checkbox-2col ul {
    flex: 1 0 0;
    margin: 8px 0 0;
    padding-left: 0;
}

.dashboard-client .onglet-societe .checkbox-2col ul.liste-region {
    flex: 0.3 0 0;
}

.dashboard-client .onglet-societe .detail-region,
.cniSociete .detail-region {
    text-align: center;
}

 /* ===> Modifier Dossier Société */
.dashboard-client .onglet-societe .formulaire-dossierModifier .tips-CA {
    padding-left: 137px;
    text-transform: initial;
    font-size: 10px;
    color: var(--color_site);
}

.dashboard-client .onglet-societe .formulaire-dossierModifier .form-control {
    margin-top: 3px;
}

.dashboard-client .onglet-societe .formulaire-dossierModifier textarea {
    max-width: 615px;
    margin-left: auto;
    margin-right: auto;
}

/* Iframe Dossier Société*/
.cniSociete h2 {
    font-size: 16px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700 !important;
    color: var(--color_demande);
}

.cniSociete h3.titre {
    text-align: center;
    font-weight: bold;
    margin-top: 2em;
}

.cniSociete .intitule {
    font-size: 14px;
    text-transform: uppercase;
}
.cniSociete .intitule span {color: var(--color_paragraphe);}

/* ------------------- */
/* Onglet Notification */
.dashboard-client .onglet-notification .container-principal {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dashboard-client .onglet-notification .container-principal h3 {
    margin-top: 2em
}

.dashboard-client .onglet-notification .notifications {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

.dashboard-client .onglet-notification hr {
    box-shadow: 0px 3px 3px var(--shadow-gray);
    border-top-color: #fff;
    margin-top: 8px;
}

.dashboard-client .onglet-notification .text-paramatres {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.dashboard-client .onglet-notification .text-alerte {
    color: var(--color_site);
    font-size: 16px;
    text-decoration: none;
}

.dashboard-client .onglet-notification .choix-notification {
    width: 70%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    justify-self: center;
}

.dashboard-client .onglet-notification .choix-notification md-switch {
    width: 137px; /* reset BsT */
}

.dashboard-client .onglet-notification .custom-select {
    box-shadow: 0px 3px 6px var(--shadow-gray);
    border: 1px solid var(--shadow-gray);

}

/*--------------------------------------------*\
                Bloc Génériques 
/*--------------------------------------------*/
/* _______________ */
/* Interieur Page */

/* ____________________________ */
/*  Barre des étapes restantes */
.htp .progressbar,
.dashboard-ajouter .progressbar {
    margin-top: 1em;
    margin-bottom: 0;
    justify-content: center;
}

.htp .progressbar a,
.dashboard-ajouter .progressbar a {
    font-size: 13px;
    font-weight: 400;  /* Roboto regular */
}

.htp .progressbar a.active,
.dashboard-ajouter .progressbar a.active {
    font-weight: 500;  /* Roboto medium */
}
.charte-negociee .progressbar a, 
.onglet-negociee .progressbar a {color: var(--color_negociee);}
.charte-besoin .progressbar a, .onglet-besoin .progressbar a {color: var(--color_besoin);}

.dashboard-ajouter .progressbar li {
    min-width: 33%;
}


/* _______________________________ */
/*  Bt raccourci ligne/hors ligne */
.htp .nav-pills,
.container-pills .nav-pills,
.monEspace .nav-pills {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
    margin-top: 1em;
}

.container-pills {
    margin-top: 2em;
}

.container-pills .intro-pills {
    font-size: 20px;
    font-weight: 500; /* Roboto Medium */
}

.charte-disponible.container-pills .intro-pills {color: var(--color_disponible);}
.charte-besoin.container-pills .intro-pills {color: var(--color_besoin);}

   
/*--------------------------------------------*\
                      HEADER 
/*--------------------------------------------*/

 .htp .conteneur-branding {
    padding-right: 0;
    padding-left: 0;
    margin-bottom: 1em;
    margin-top: 1em;
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    /* align-items: center;
    justify-content: space-around; */

    justify-content: space-between;
    align-items: center;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.htp .conteneur-branding .texte-welcome {
    flex: 2 0 0;
}

.htp .conteneur-branding .logoHTP {
    max-width: 260px;
}

.htp .conteneur-branding .logoHTP svg {
    color: #000;
    width: auto;
    height: 65px;
}

.conteneur-branding .profil_circle svg {
    color: #000;
    width: 40px;
    height: auto;
    padding: 0;
}
.charte-demande.conteneur-branding .profil_circle svg {color: var(--color_demande);}


/*--------------------------------------------*\
                      MENUS 
/*--------------------------------------------*/

/* _________________________________________ */
 /* Menu Connexion Desktop Client & Visiteur */
.conteneur-branding .container-menuDesktop .connexion-login svg path,
.conteneur-branding .container-menuDesktop .connexion-login svg line,
.conteneur-branding .container-menuDesktop .connexion-login svg rect {
    fill: #000;
    stroke: transparent;
}

.conteneur-branding .container-menuDesktop .connexion-login:hover svg path,
.conteneur-branding .container-menuDesktop .connexion-login:hover svg line,
.conteneur-branding .container-menuDesktop .connexion-login:hover svg rect  {
    fill: #fff;
    stroke: transparent;
}

.conteneur-branding .container-menuDesktop {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    align-self: center;
    gap: 1em;
    list-style: none;
    padding: 0; /* reset BsT */
    margin-right: 1em; /* reset BsT */
    margin-bottom: 0; /* reset BsT */
 }

.conteneur-branding .container-menuDesktop.menuLog-off li {
    margin-left: 0;
}

.conteneur-branding .container-menuDesktop.menuLog-on li {
    margin-left: 0;
}

.conteneur-branding .container-menuDesktop li a {
    display: block;
    text-transform: uppercase;
    font-size: 12px !important;
    line-height: 15px;
    font-family: 'FF Clan', sans-serif;
}

.conteneur-branding .container-menuMobile svg {
    height: auto;
    width: 30px;
    vertical-align: middle;
    /* padding-right: 8px; */
}

.conteneur-branding .container-menuDesktop svg {
    height: auto;
    width: 30px;
    vertical-align: middle;
    padding-right: 8px;
}

.conteneur-branding .container-menuMobile a svg path,
.conteneur-branding .container-menuMobile a svg line,
.conteneur-branding .container-menuMobile a svg rect,
.conteneur-branding .container-menuDesktop li a svg path,
.conteneur-branding .container-menuDesktop li a svg line,
.conteneur-branding .container-menuDesktop li a rect {
    fill : transparent;
    stroke: var(--color_demande)
}

.container-menuMobile .menuLog-off svg path,
.container-menuMobile .menuLog-off svg line,
.container-menuMobile .menuLog-off svg rect {
    stroke : transparent;
    fill : var(--color_demande)
}

.conteneur-branding .container-menuDesktop .menu-user .dropdown-menu {
    position: absolute;
}

.conteneur-branding .container-menuDesktop.menuLog-on .nav-link {
    padding: 0;
}

.container-menuDesktop .menu-ip svg {
    padding-right: 0;
    width: 15px;
}

.container-menuDesktop .menu-mail svg {
    width: 40px;
    height: auto;
}

.container-menuDesktop .menu-user img {
    width: 25px;
    height: auto;
}

.container-menuDesktop .menu-user .dropdown-toggle::after {
    vertical-align: 4px;
}

/* ________________________________________ */
/* Menu Connexion Mobile Client & Visiteur */
 .conteneur-branding .profil_circle {
    display: none;
}

.conteneur-branding .container-menuMobile {
    transition: all .5s;
    order: 4;
    margin-top: 1em;
}

.container-menuMobile .dropdown-item {
    white-space: unset;
    padding-right: 0;
}

.container-menuMobile .menuLog-off {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-around;
    gap: 0.5em;
 }

 .container-menuMobile .menuLog-off li a {
    text-transform: uppercase;
 }

 .conteneur-branding .container-menuMobile .menuLog-off a svg path {
    fill: currentColor;
    stroke: none;
 }

 .container-menuMobile .menuLog-on .user-nom {
    font-size: calc(2* var(--basePX));
    font-weight: bold;
}

 .container-menuDesktop.menuLog-on .menu-user .picto-espace,
 .container-menuDesktop.menuLog-on .menu-user .picto-messagerie,
 .container-menuDesktop.menuLog-on .menu-user .picto-ip  {
    display: none !important;
 }

 .container-menuMobile .picto-ip svg,
 .container-menuDesktop.menuLog-on .menu-user .picto-ip svg {
    height: 17px;
    width: auto;
 }

 .container-menuMobile .picto-espace svg,
 .container-menuDesktop.menuLog-on .menu-user .picto-espace svg {
    height: 19px;
 }

 .container-menuMobile .picto-messagerie svg,
 .container-menuDesktop.menuLog-on .menu-user .picto-messagerie svg {
    width: 28px;
    height: auto;
 }


/* ________________________________________ */
/*          STICKY Gauche & Droite           */
.left-sticky {
    position: fixed;
    z-index: 10;
    top: 200px;
    left: 0;
}

.menu-sticky {
    position: fixed;
    z-index: 10;}

.menu-sticky .right-sticky {
    display: flex;
    align-items: center;}

.menu-sticky.sticky-HautDroit {
    top: 265px;
    right: -175px;
}

.menu-sticky.sticky-HautDroit:hover {
    right: 0;
    transition-property: right;
    transition-duration: 1.5s;
}

.menu-sticky .btn {
    display: flex;
    flex-wrap: nowrap;
    padding: 10px 20px !important;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    width: 250px;
}

.menu-sticky.sticky-HautDroit .btn {
    border-bottom-left-radius: 33px;
    border-top-left-radius: 33px;
}

.menu-sticky svg {
    margin-right: 8px;
}

.menu-sticky .stiky-groupe-1 svg path,
.menu-sticky .stiky-groupe-1 svg rect,
.menu-sticky .stiky-groupe-1 svg line {
    stroke: #fff !important;
    fill: transparent;
}

.menu-sticky.mainfooter__menu sidebarlink svg {
    width: 26px !important;
}

.menu-sticky.mainfooter__menu sidebarlink.picto-disponible svg {
    width: 33px !important;
}

.menu-sticky .stiky-groupe-2 a {
    padding-left: 3px;
}

.menu-sticky .sticky-proposer {
    background-color: var(--color_disponible);
    color: #fff;
}

.menu-sticky .sticky-proposer svg path,
.menu-sticky .sticky-proposer svg line,
.menu-sticky .sticky-proposer svg rect {
    stroke: #fff !important;
}

.menu-sticky .sticky-proposer:hover {
    background-color: #FE9DBE;
    color: #000;
}

.menu-sticky .sticky-proposer:hover svg path,
.menu-sticky .sticky-proposer:hover svg line,
.menu-sticky .sticky-proposer:hover svg rect {
    stroke: #000 !important;
}

.menu-sticky .sticky-recherche {
    background-color: var(--color_besoin);
    color: #fff;
}

.menu-sticky .sticky-recherche svg path,
.menu-sticky .sticky-recherche svg line,
.menu-sticky .sticky-recherche svg rect {
    stroke: #fff !important;
}

.menu-sticky .sticky-recherche:hover {
    background-color: #82A4E4;
    color: #000;
}

.menu-sticky .sticky-recherche:hover svg path,
.menu-sticky .sticky-recherche:hover svg line,
.menu-sticky .sticky-recherche:hover svg rect {
    stroke: #000 !important;
}

.modal-body .sticky-BasGauche {
    display: none;
}


/* _______________________________________ */
/*          Menu Principal Desktop         */
.menu-principal {
    letter-spacing: 1px;
    width: 100%;
}

.mainnavheader .navbar-toggler {
    margin-left: 0; /* reset BsT */
    margin-right: 0; /* reset BsT */
}


/* ________________________________________ */
/*          Burger Menu Principal           */
.menu-burger {
    display: none;
}

.mainnavheader .menu-principal .nav-link .picto-menu {
    height: auto !important; /* Reset BsT */
}

/* ________________________________________ */
/*                   Menu Client           */

#collapseMobileOnly {display: none;} 
#collapseMobileOnly.show {display: none;}


/*---------------------------------------------------*\
    COMMUN ONGLET => Liste, Répondre, Voir  & ajouter
/*---------------------------------------------------*/
.cartouche-reference {
    display: flex;
    flex-flow: row nowrap;
    padding-right: 0;
}

.cartouche-reference .retour {
    flex: 1 0 0;
    justify-content: flex-start;
    max-width: 15%;
}

.cartouche-reference .info {
    flex: 2 0 0;
    text-align: left;
}

.cartouche-reference .suivant {
    flex: 1 0 0; /* flex hérité de .cartouche-reference  */
    display: flex; /* pour les fleches */
    justify-content: flex-end;
}

.cartouche-reference .suivant .flecheG {
    padding-left: 5px;
    text-align: left;
}

.cartouche-reference .suivant .flecheD {
    text-align: right;
}

.cartouche-reference .suivant.solo-xxx  {
    justify-content: flex-end;
}

.htp .container-2col-strict {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.htp .container-2col-strict  .bloc-reponse {
  width: 57%;
  margin-left: 15%;
}

.htp .container-2col-strict .bloc-reponse textarea {
    float: right;
}

.htp .container-2col-strict  .bloc-consigne {
    width: 28%;    
}

.htp .container-2col-strict  .bloc-consigne p {
    max-width: 150px;
    text-align: center;
    margin-left: 1em;
}

.htp .container-2col-souple {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 2em;
    margin-top: 1.5em;
}

.htp .container-2col-souple.form-tjm {
    gap: 1em;
}

.htp .container-2col-souple .bloc-reponse {
    flex: 0 0 55%;
}

.htp .container-2col-souple .bloc-rappel{
    flex: 0 0 45%;
}

.dashboard-ajouter .avec-rappel .bloc-rappel {
    flex: 0 0 30%;
}

.calendrier > * {
    display: flex;
}

.calendrier md-datepicker {
    overflow: visible;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, .29);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
}

.calendrier md-datepicker button {
    order: 2;
}

.calendrier md-datepicker div {
    order: 1;   
    border-bottom: none;
    margin-left: 0;
}

.calendrier md-datepicker div input {
    width: fit-content;
    max-width: fit-content;
    text-align: center;
    font-size: 14px;
    color: var(--color_paragraphe);
    padding-bottom: 0;
    box-shadow: none; /* reset bst */
}

.calendrier md-datepicker div > button {
    display: none;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>
/* >>>>>>> Page Liste */

/* Entête Page : titre, champ recherche et bloc tuto */
.dashboard-entete {
    display: flex;
    align-items: flex-end;
    align-items: flex-end;
}

.dashboard-entete .titre h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 40px !important;
    margin-left: 0 !important;
}

.dashboard-entete .titre .titre-option {
    font-size: 25px;
}

.dashboard-entete .bt-cta {
    max-width: 185px;
    border-radius: 20px;
    padding: 0.5em;
    font-size: 14px;
    line-height: 20px;
}

.titre-bt {
    display: block;
    max-width: 200px;
    margin: 0 auto;
    font-size: 14px;
    font-weight: bold;
}

.dashboard-entete .titre svg {
    width: 60px;
    height: auto; 
    margin-bottom: 0.5em;
}

.dashboard-entete .formulaire-recherche {
    width: 70%;
    margin-top: 1em; 
    margin-left: auto;
    margin-right: auto;
}
 
.dashboard-entete .formulaire-recherche .mainhead__search input {
    padding: 0 25px 0 64px;
    background-position: 1em center;
    background-repeat: no-repeat;
}
 
.onglet-demande .dashboard-entete .formulaire-recherche .mainhead__search input {background-image: url(/assets/img/svg/loupe-demande.svg);}
.onglet-negociee .dashboard-entete .formulaire-recherche .mainhead__search input {background-image: url(/assets/img/svg/loupe-negociee.svg);}
.onglet-annuaire .dashboard-entete .formulaire-recherche .mainhead__search input {background-image: url(/assets/img/svg/loupe-annuaire.svg);}
.onglet-disponible .dashboard-entete .formulaire-recherche .mainhead__search input {background-image: url(/assets/img/svg/loupe-disponnible.svg);}
.onglet-besoin .dashboard-entete .formulaire-recherche .mainhead__search input {background-image: url(/assets/img/svg/loupe-besoin.svg);}

.dashboard-liste .mainhead .mainhead__search input::placeholder {
    font-style: italic;
    color: black;
}

.dashboard-entete .titre {
    flex: 3 0 0;
    max-width: none;
    align-self: center;
}

.dashboard-entete .tuto {
    flex: 1.5 0 0;
    justify-content: center
}

.dashboard-entete .texte-tuto {
    width: 250px;
    border-radius: 30px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, .29);
    padding: 15px;
    margin-bottom: 0 !important;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    font-size: 14px;
    line-height: 20px;
}

.onglet-demande .tuto p {color: var(--color_demande);}
.onglet-negociee .tuto p {color: var(--color_negociee);}
.onglet-annuaire .tuto p {color: var(--color_annuaire);}
.onglet-disponible .tuto p {color: var(--color_disponible);}
.onglet-besoin .tuto p {color: var(--color_besoin);}

.dashboard-entete .colonne-cta  {
    flex: 1.5 0 0;
}

/* **  Champs select => Champs de tri  */
.wrapper-trie,
.wrapper-select {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    gap: 1em;
}

.container-trie,
.container-select {
    display: flex;
    align-items: center;
    position: relative; /* pour poser la fleche du select en ::after */
    background-color: #fff;
    border: 0;
    text-align: left;
}

.onglet-demande .container-trie {margin: 0 auto; width: 355px;}
.onglet-negociee .container-trie .bloc-trie1 {width: 386px;}
.onglet-negociee .container-trie .bloc-trie2 {width: 550px;}
.onglet-disponible .container-trie .bloc-trie1 {width: 386px;}
.onglet-disponible .container-trie .bloc-trie2 {width: 550px;}
.onglet-besoin .container-trie .bloc-trie1 {width: 386px;}
.onglet-besoin .container-trie .bloc-trie2 {width: 550px;}

.container-trie::after,
.container-select::after { /* Le pointeur du select */
	content: '';
	position: absolute;
	top: 52%;
    margin-top: -3px;
	display: block;
	width: 0;
	height: 0;
	border-color: transparent;
	border-top-color: #444; 
	border-width: 6px;
	border-style: solid;
	pointer-events: none;
}

.container-trie::after { /* Le pointeur du select */
	right: 0;
}

.container-select::after { /* Le pointeur du select */
	right: 5px;
}

.container-trie label,
.container-select label {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    margin-bottom: 0;
}
.container-select label {
    font-size: 16px;
}

.container-trie label, .container-trie select {
    font-size: 13px;
}

.container-trie option,
.container-select option {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 13px;
}

.container-trie select,
.container-select select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
    height: auto;
	border: 0;
	margin: 0;
	overflow: hidden;
}

.container-trie select{
	border: 0;
	border-radius: 0;
    padding: .75em;
}
.onglet-demande .container-trie select {width: 215px; color: var(--color_demande);}
.onglet-negociee .container-trie.bloc-trie1 select {width: 150px; color: var(--color_negociee);}
.onglet-negociee .container-trie.bloc-trie2 select {width: 390px; color: var(--color_negociee);}
.onglet-disponible .container-trie.bloc-trie1 select {width: 150px; color: var(--color_disponible);}
.onglet-disponible .container-trie.bloc-trie2 select {width: 320px; color: var(--color_disponible);}
.onglet-besoin .container-trie.bloc-trie1 select {width: 150px; color: var(--color_besoin);}
.onglet-besoin .container-trie.bloc-trie2 select {width: 320px; color: var(--color_besoin);}

.container-select select {
	border-width: 1px;
    border-style: solid;
	border-radius: 10px;
    color: var(--medium_gray);
    font-size: 14px;
    text-align: center;
    padding: .375rem .75rem;
    box-shadow: 0px 3px 6px var(--shadow-gray);
}

.onglet-negociee .container-select select {border-color: var(--color_negociee);}

.onglet-negociee .formulaire-ajouter input[type=text],
.onglet-negociee .formulaire-ajouter select,
.onglet-negociee .formulaire-ajouter textarea {border-color: var(--color_negociee);}

.onglet-annuaire .formulaire-ajouter input[type=text],
.onglet-annuaire .formulaire-ajouter select,
.onglet-annuaire .formulaire-ajouter textarea {border-color: var(--color_annuaire);}

.onglet-negociee .formulaire-ajouter input[type=radio]::before {border-color: var(--gris-1);}

.groupe-2champs {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2em;
}

.container-trie select:focus-visible,
.container-select select:focus-visible {
    outline-width: 0;
}

/* Tableau des résultats */
.dashboard-liste .table-site  {
    margin-top: -10px;
}

.dashboard-liste .tableau-liste th {
    cursor: pointer; 
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    padding: 12px;
}

.tableau-liste .table-corner {width: 24px;}
.tableau-liste .table-ref {width: 66px;}
.tableau-liste .table-titre {width: auto; min-width: 378px;}
.tableau-liste .table-date {width: 114px;}
.tableau-liste .table-duree {width: 100px;}
.tableau-liste .table-tarif {width: 185px;}
.tableau-liste .table-region-rowspan {width: 400px;} 
.tableau-liste .table-region-nospan {width: 200px;} 
.tableau-liste .table-societe {width: 200px;}

.dashboard-liste .tableau-liste td,
.dashboard-liste .tableau-liste td a {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 12px;
}
.dashboard-liste .tableau-liste td {color: var(--color_paragraphe); padding: 12px;}
.onglet-demande .tableau-liste td a {color: var(--color_demande);}
.onglet-negociee .tableau-liste td a {color: var(--color_negociee);}
.onglet-annuaire .tableau-liste td a {color: var(--color_annuaire);}
.onglet-disponible .tableau-liste td a {color: var(--color-disponible);}
.onglet-besoin .tableau-liste td a {color: var(--color-besoin);}

.dashboard-liste .tableau-liste td.region,
.dashboard-liste .tableau-liste td.societe {
    text-transform: uppercase;
}

.htp .pagination a,
.dashboard-liste .pagination a {
    color: var(--white);
    padding: 5px 10px;
    margin: 0 2px;
    text-decoration: none;
}
.dashboard-liste.charte-demande .pagination a,
.dashboard-liste.onglet-demande .pagination a {background-color: var(--color_demande); border: 1px solid var(--color_demande);}

.dashboard-liste.charte-negociee .pagination a,
.dashboard-liste.onglet-negociee .pagination a {background-color: var(--color_negociee); border: 1px solid var(--color_negociee);}

.dashboard-liste.charte-annuaire .pagination ,
.dashboard-liste.onglet-annuaire .pagination a {background-color: var(--color_annuaire); border: 1px solid var(--color_annuaire);}

.dashboard-liste.charte-disponible .pagination a,
.dashboard-liste.onglet-disponible .pagination a {background-color: var(--color-disponible); border: 1px solid var(--color-disponible);}

.dashboard-liste.charte-besoin .pagination a,
.dashboard-liste.onglet-besoin .pagination a {background-color: var(--color-besoin); border: 1px solid var(--color-besoin);}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>>> Commun page Voir */

/* Bloc titre + ref + date en haut de page */
.cartouche-reference .reference-titre {
    font-family: "ClanOT-NarrowMedium";
    font-style: normal;
    font-weight: 600 !important;
    font-size: 24px;
    text-transform: uppercase;
}

.charte-demande.cartouche-reference .reference-titre, 
.onglet-demande.cartouche-reference .reference-titre {color: var(--color_demande);}
.charte-disponible.cartouche-reference .reference-titre,
.onglet-disponible.cartouche-reference .reference-titre {color: var(--color_disponible);}
.charte-negociee.cartouche-reference .reference-titre,
.onglet-negociee.cartouche-reference .reference-titre {color: var(--color_negociee);}

.messagerie .charte-site.cartouche-reference .reference-titre svg {
    width: 35px;
}

.cartouche-reference .reference-date,
.cartouche-reference .reference-ref,
.cartouche-reference .reference-action {
    color: var(--color_paragraphe);
    font-size: 14px;
}
.onglet-demande.cartouche-reference .reference-date span,
.onglet-demande.cartouche-reference .reference-ref span,
.onglet-demande.cartouche-reference .reference-action span {color: var(--color_demande);}
.charte-demande.cartouche-reference .reference-date span,
.charte-demande.cartouche-reference .reference-ref span,
.charte-demande.cartouche-reference .reference-action span {color: var(--color_demande);}

.onglet-negociee.cartouche-reference .reference-date span,
.onglet-negociee.cartouche-reference .reference-ref span,
.onglet-negociee.cartouche-reference .reference-action span {color: var(--color_negociee);}
.charte-negociee.cartouche-reference .reference-date span,
.charte-negociee.cartouche-reference .reference-ref span,
.charte-negociee.cartouche-reference .reference-action span {color: var(--color_negociee);}

.onglet-annuaire.cartouche-reference .reference-date span,
.onglet-annuaire.cartouche-reference .reference-ref span,
.onglet-annuaire.cartouche-reference .reference-action span {color: var(--color_annuaire);}
.charte-annuaire.cartouche-reference .reference-date span,
.charte-annuaire.cartouche-reference .reference-ref span,
.charte-annuaire.cartouche-reference .reference-action span {color: var(--color_annuaire);}

.onglet-disponible.cartouche-reference .reference-date span,
.onglet-disponible.cartouche-reference .reference-ref span,
.onglet-disponible.cartouche-reference .reference-action span {color: var(--color_disponible);}
.charte-disponible.cartouche-reference .reference-date span,
.charte-disponible.cartouche-reference .reference-ref span,
.charte-disponible.cartouche-reference .reference-action span {color: var(--color_disponible);}

.onglet-besoin.cartouche-reference .reference-date span,
.onglet-besoin.cartouche-reference .reference-ref span,
.onglet-besoin.cartouche-reference .reference-action span {color: var(--color_besoin);}
.charte-besoin.cartouche-reference .reference-date span,
.charte-besoin.cartouche-reference .reference-ref span,
.charte-besoin.cartouche-reference .reference-action span {color: var(--color_besoin);}

.cartouche-reference .bt-retour  {
    padding: 0;
}

.cartouche-reference .bt-retour svg,
.bt-retour svg {
    width: 22px;
    height: auto;
}

.cartouche-reference .bt-retour .text,
.bt-retour .text {
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
}

.cartouche-reference .arrow {
    width: 45px;
    height: 27px;
    position: relative;
    display: inline-block;
}

.cartouche-reference .arrow::before, .arrow::after {
    content: '';
    border-color: transparent;
    border-right-color: transparent;
    border-style: solid;
    position: absolute;
}

.cartouche-reference .arrow-left::before {
    border: none;
    height: 27%;
    width: 40%;
    top: 37%;
    left: 3px;
}

.cartouche-reference .arrow-left::after {
    left: -33%;
    top: 3.4px;
    border-width: 10.5px;
}

.cartouche-reference .arrow-right::after {
    left: 36%;
    top: 2.5px;
    border-width: 10px;
}

.cartouche-reference .arrow-right::before {
    border: none;
    height: 27%;
    width: 40%;
    top: 37%;
    left: 0;
}

/* Contenu  */
.dashboard-voir h2 {
    font-size: 18px;
    text-align: center;
    margin-top: 2em;
    margin-bottom: 0;
}
.onglet-demande.dashboard-voir h2 {color: var(--color_demande);}
.onglet-negociee.dashboard-voir h2 {color: var(--color_negociee);}
.onglet-annuaire.dashboard-voir h2 {color: var(--color_annuaire); text-align: left;}
.onglet-disponible.dashboard-voir h2 {color: var(--color_disponible);}
.onglet-besoin.dashboard-voir h2 {color: var(--color_besoin);}

.dashboard-voir h3:not(.titre-info) {
    font-size: 14px;
    margin-bottom: 0;
    margin-top: 1em;
    display: inline-block;
    text-transform: lowercase;
}

.dashboard-voir h3::first-letter {
    text-transform: capitalize;
}

.dashboard-voir h3 + p {
    display: inline-block;
    font-size: 14px;
}

.onglet-demande.dashboard-voir h3 {color: var(--color_demande);}
.onglet-negociee.dashboard-voir h3 {color: var(--color_negociee);}
.onglet-annuaire.dashboard-voir h3 {color: var(--color_annuaire);}
.onglet-disponible.dashboard-voir h3 {color: var(--color_disponible);}
.onglet-besoin.dashboard-voir h3 {color: var(--color_besoin);}

.dashboard-voir .info-resume {
    flex-flow: row wrap;
    gap: 1em;
}

.dashboard-voir .info-resume > article {
    width: 200px; 
    padding-left: 0;
    padding-right: 0;
    max-width: 200px;
}

.dashboard-voir .maincontent__block {
    box-shadow: 0 .3px 6px #00000029;}

.maincontent.dashboard-voir h3.titre-info,
.dashboard-voir h3.titre-info {
    font-size: 14px !important;
    text-transform: uppercase !important;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;}

.onglet-demande h3.titre-info {color: var(--color_demande) !important;}

.dashboard-voir p.texte-info {
    text-transform: lowercase !important;
    line-height: 14px;
    margin-top: 0.5em;}

.dashboard-voir p.texte-info::first-letter{
    text-transform: uppercase !important;}

.dashboard-voir .detail-texte {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0;
    margin-top: 0.5em;
}

/* Bloc résumé détaillé en bas de page */
.cartouche-detail {
    margin-top: 2em;
}

.onglet-negociee .cartouche-detail .detail-societe {color: var(--color_negociee);}
.onglet-annuaire .cartouche-detail .detail-societe {color: var(--color_annuaire);}
.onglet-disponible .cartouche-detail .detail-societe {color: var(--color_disponible);}
.onglet-besoin .cartouche-detail .detail-societe {color: var(--color_besoin);}

.cartouche-detail h1, 
.cartouche-detail h2, 
.cartouche-detail p {
    margin-bottom: 0;
}

.cartouche-detail .detail-societe h1 {
    text-align: left;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: bold;
}

.cartouche-detail .detail-societe h2 {
    text-align: left;
    font-size: 18px;
    text-transform: capitalize;
}

.cartouche-detail .detail-societe h5 {
    font-size: 14px;
    color: var(--gris-1);
    text-transform: math-auto;
    font-weight: normal;
}

.cartouche-detail .detail-societe .localisation {
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    text-transform: capitalize;
}

.cartouche-detail .detail-societe .localisation span {
    text-transform: uppercase;
}

.cartouche-detail .detail-societe p {
    font-size: 16px;
    text-transform: math-auto;
}

.cartouche-detail .detail-societe .scoring {
    color: var(--gris-1);
}

.cartouche-detail .detail-outils  {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.cartouche-detail .detail-outils a {
    text-transform: initial;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
}

.onglet-negociee .cartouche-detail .detail-outils a {color: var(--color_negociee);}
.onglet-annuaire .cartouche-detail .detail-outils a {color: var(--color_annuaire);}
.onglet-disponible .cartouche-detail .detail-outils a {color: var(--color_disponible);}
.onglet-besoin .cartouche-detail .detail-outils a {color: var(--color_besoin);}

.cartouche-detail .detail-outils span {
    display: inline-block;
    width: 45px;
    margin-right: 10px;
}


/* >>>>>>>>>>>>>>>>>>>>>>>>
>>>>>>> Page Répondre */

.dashboard-repondre .container-info > div,
.dashboard-ajouter .container-info > article,
.dashboard-ajouter .container-info > div,
.dashboard-ajouter .container-info > h2 {
    margin-top: 2em;
    align-items: center;
}

.dashboard-repondre .bloc-reponse {
    padding-left: 0;
    padding-right: 0;
}

header.dashboard-ajouter {
    display: block;
    margin-right: 0;
    margin-left: 0;
}

.dashboard-ajouter .form-tjm .bloc-info  {
    max-width: 160px;
}

.dashboard-repondre .bloc-pj,
.dashboard-ajouter .bloc-pj {
    display: flex;
    flex-flow: row nowrap;
    gap : 0.5em;
    align-items: center;
    margin-top: 0.5em;
}

.dashboard-ajouter .bloc-pj {
    justify-content: center;
} 

.dashboard-repondre .label-pj {
    font-weight: 400 !important; /* Roboto regular */
}

.dashboard-ajouter .bloc-pj .label-pj {
    margin-top: 0;
    margin-bottom: 0;
    width: fit-content;
    font-size: 14px !important;
    padding: 8px 20px;
}

.dashboard-repondre .inputLabel,
.dashboard-ajouter .inputLabel {
    position: relative; /* pour accrocher l'input transparent superposé au label : .inputLabel input */
    width: 450px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.dashboard-repondre .inputLabel input,
.dashboard-ajouter .inputLabel input { /* input (insérer une url) transparent superposé au label  */
    position: absolute; /*  accroché par .dashboard-repondre .inputLabel */
    top: 5px;
    left: 60px;
    box-shadow: none;
    border: 0 !important;
    width: 85%;
    padding: 0;
    height: 25px;
    border-radius: 0;
    text-align: left;
}

.dashboard-repondre .memo-format,
.dashboard-ajouter  .memo-format {
    margin: 0;
    font-size: 9px;
    line-height: 11px;
    flex: 0 0 20%;
}

.dashboard-repondre .memo-format span {
    text-decoration: underline;
}

.dashboard-repondre input {
    border-radius: 12px;
    text-align: left;
}

.onglet-negociee.dashboard-ajouter .inputLabel .input {border: 1px solid var(--color_negociee);}
.onglet-annuaire.dashboard-ajouter .inputLabel .input {border: 1px solid var(--color_annuaire);}

.dashboard-repondre .taille-input-1 {
    width: 77%;
}

.dashboard-repondre .taille-input-2 {
    width: 30%;
}

.dashboard-repondre textarea {
    border-radius: 20px;
}

.dashboard-repondre .avec-rappel {
    justify-content: flex-start;
}

.dashboard-repondre .bloc-rappel,
.dashboard-ajouter .bloc-rappel {
    border-radius: 20px;
    padding: 10px;
}

.dashboard-repondre .bloc-rappel p,
.dashboard-ajouter .bloc-rappel {
    font-size: 13px;
    line-height: 15px;
    margin-bottom: 0;
    text-align: center;
    color: #fff;
}
.dashboard-repondre.onglet-demande .bloc-rappel {background-color: var(--color_demande);}

.fake--tooltip__besoin {
    background: var(--color_besoin);
    color: var(--white);
}

/* >>>>>>>>>>>>>>>>>>>>>>>>
>>>>>>> Page Ajouter */
.dashboard-ajouter .avec-rappel {
    justify-content: space-between;
}

.dashboard-ajouter .avec-rappel .bloc-reponse {
    align-items: center;
}

.dashboard-ajouter .avec-rappel .bloc-rappel {
    flex: 0 0 30%;
}

.dashboard-ajouter.onglet-besoin .bloc-rappel {background-color: var(--color_besoin);}

/*--------------------------------------------*\
    COMMUN ONGLET => Colonne Droite 
/*--------------------------------------------*/
.col-aside {
    margin-top: 4em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
}

.bt-focus {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 268px;
    height: 185px;
    padding: 8px;
    font-size: 15px;
}
.onglet-demande .bt-focus {background: var(--color_demande) !important;}
.onglet-negociee .bt-focus {background: var(--color_negociee) !important;}

.htp .tips,
.htp .tips-nu  {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 268px;
    margin-top: 1em;
    padding: 1em;
    font-size: 12px !important;
}

.htp .tips {
    border-radius: 20px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, .29);
}

.htp .tips p {
    font-size: 12px !important;
    line-height: 18px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.htp .tips-step,
.htp .tips-step p {
    font-size: 11px !important;
    line-height: 20px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.htp .contact {
    margin-top: 1em;
    text-align: center;
}

.htp .contact p,
.htp .contact a.btn {
    font-size: 11px !important;
    line-height: 20px;
    font-weight: 400;
}

.htp .contact svg {
    width: 20px;
    height: auto;
}

.htp .contact .picto-hotline {
    display: inline-block;
    margin-top: 0.5em;
}

.htp .contact .picto-hotline svg {
    width: 47px;
    height: auto;
}

.htp .tips-coordinateur {
    width: 100%;
    max-width: 268px;
    margin-top: 1em;
    padding: 1em;
    border-radius: 20px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, .29);
    font-size: 12px !important;
    border: 1px solid var(--color_site);
    font-weight: bold;
}

.htp .tips-coordinateur .coordinateur-identite  {
    display: block;
    color: var(--color_site);
    margin-top: 5px;
}

.picto-hotline .contact_a {
    fill: var(--color_site);
}

/*--------------------------------------------*\
    COMMUN ONGLET => ajouter 
/*--------------------------------------------*/

.dashboard-ajouter h1 {
    font-size: 35px;
    font-weight: 500; /* Roboto medium */
}

.htp .dashboard-ajouter h1 svg {
    width: 80px;
    height: auto;
}

.onglet-negociee.dashboard-ajouter h1 {color: var(--color_negociee);}

.htp .dashboard-ajouter h2 {
    font-size: 15px !important;
    font-weight: 500; /* Roboto medium */
}
.onglet-negociee.dashboard-ajouter h2 {color: var(--color_negociee);}
.onglet-annuaire.dashboard-ajouter h2 {color: var(--color_annuaire);}
.onglet-besoin.dashboard-ajouter h2 {color: var(--color_besoin);}

/* ____________________ */
/*  Formulaire AJOUTER */
.dashboard-ajouter .fer-gauche {
    padding-left: 16.5%;
}

.dashboard-ajouter .progressbar-taille-1  {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

.dashboard-ajouter .formulaire-ajouter .label-reponse  {
    font-weight: 500;  /* Roboto medium */
    font-size: 14px;
}

.onglet-negociee.dashboard-ajouter .label-reponse {color: var(--color_negociee);}
.onglet-annuaire.dashboard-ajouter .label-reponse {color: var(--color_annuaire);}
.onglet-disponible.dashboard-ajouter .label-reponse {color: var(--color_disponible);}
.onglet-besoin.dashboard-ajouter .label-reponse {color: var(--color_besoin);}


.dashboard-ajouter .formulaire-ajouter input[type=text] {
    font-size: 14px;
    font-weight: 400;  /* Roboto regular */
    color: var(--medium_gray) !important;
}

.dashboard-ajouter .formulaire-ajouter input[type=text],
.dashboard-ajouter .formulaire-ajouter textarea {
    margin-left: auto;
    margin-right: auto;
}

.dashboard-ajouter .taille-champ-1 {
    width: 160px;
}

.dashboard-ajouter .taille-champ-2 {
    width: 236px;
}

.dashboard-ajouter .taille-champ-3 {
    width: 450px;
}

.dashboard-ajouter .taille-champ-3 p:not(:first-child) {
    margin-top: 8px;
}
 
.dashboard-ajouter .taille-champ-prix {
    width: 110px;
}

.dashboard-ajouter .formulaire-ajouter .tarif {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    column-gap: 1em;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.dashboard-ajouter .formulaire-ajouter .tarif .form-group {
    align-items: flex-start;
}

.dashboard-ajouter .formulaire-ajouter .cv-formateur p {
    max-width: 570px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.dashboard-repondre  input::placeholder,
.dashboard-ajouter .formulaire-ajouter input::placeholder {
    font-style: italic;
    color:#b3b3b3 !important;
    text-align: center;
    font-size: 11px !important;
}

.dashboard-ajouter .bloc-reponse.avec-consigne {
    position: relative; /* accroche le texte consigne .texte-consigne */
}

.dashboard-ajouter .avec-consigne {
    align-items: center;
}

.avec-consigne .texte-consigne {
    font-size: 14px;
    position: absolute;
    top: 50%;
    right: 5%;
    width: 175px;
}

.dashboard-ajouter .asap {
    font-size: 18px;
}
.onglet-negociee.dashboard-ajouter .asap {color: var(--color_negociee);}
.onglet-negociee.dashboard-ajouter .asap::before {border-color: var(--color_negociee);}
.onglet-besoin.dashboard-ajouter .asap {color: var(--color_besoin);}
.onglet-besoin.dashboard-ajouter .asap::before {border-color: var(--color_besoin);}

.dashboard-ajouter .container-cv-photo {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.dashboard-ajouter .container-cv-photo .photo-format {
    margin-left: 1em;
    margin-bottom: 1em;
    text-align: left;
}
.onglet-disponible.dashboard-ajouter .container-cv-photo .photo-format {color: var(--color_disponible);}

.dashboard-ajouter .photo-tips  {
    font-size: 11px !important;
    text-transform: uppercase !important;
    margin-top: 0.5em !important;
}

.onglet-disponible.dashboard-ajouter .photo-tips {color: var(--color_disponible);}

.dashboard-ajouter .cv-photo {
    cursor: pointer; 
    height: 150px; 
    width: 150px; 
    overflow: hidden;
    border-width: 1px;
    border-style: solid
}
.onglet-disponible.dashboard-ajouter .cv-photo:hover .ajout-cv {color: #fff;}

.onglet-disponible.dashboard-ajouter .cv-photo {
    margin-top: 0;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, .29) !important;
}

.onglet-disponible.dashboard-ajouter .cv-photo {border-color: var(--color_disponible);}

.dashboard-ajouter .cv-photo .ajout-cv {
    font-size: 70px;
}

.onglet-disponible.dashboard-ajouter .cv-photo .ajout-cv {color: var(--color_disponible);}

.dashboard-ajouter .cv-tips {
    font-size: 11px !important;
    text-transform: uppercase !important;
    margin-top: 2em !important;
    color: var(--gris-1);
    font-style: italic;
}

.dashboard-ajouter .form-dispo {
    flex-flow: row nowrap;
}

.dashboard-ajouter .bloc-reponse {
    padding-left: 0;
    padding-right: 0;
}

.dashboard-ajouter .empile-champ {
    text-align: left;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.dashboard-ajouter.onglet-disponible .empile-champ {
    width: 120px;}

.dashboard-ajouter .empile-champ2,
.empile-champ2 {
    width: fit-content;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5em;
}

.dashboard-ajouter .exemple {
    font-size: 10px;
    color: #4B494A;
    font-weight: 400;  /* Roboto regular */
    margin-top: 0.5em;
}

.dashboard-ajouter .nb {
    font-size: 10px;
    color: #8F8E8E;
    font-weight: 500; /* Roboto medium */
}

.dashboard-ajouter .localisation .container-2col-souple {
    justify-content: center;
}

.dashboard-ajouter .localisation .bloc-info {
    cursor: pointer;
    border-radius: 20px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    gap: 10px;
    align-items: center;
    width: 100%;
    max-width: 268px;
    padding: 17px 50px 17px 25px;
    font-size: 15px;
    text-align: left;
    color: #fff;
    font-family: 'ClanOT-Medium', sans-serif;
    font-weight: 300;
}
.onglet-negociee.dashboard-ajouter .localisation .bloc-info {background-color: var(--color_negociee);}
.onglet-disponible.dashboard-ajouter .localisation .bloc-info {background-color: var(--color_disponible);}
.onglet-besoin.dashboard-ajouter .localisation .bloc-info {background-color: var(--color_besoin);}

.dashboard-ajouter .localisation .bloc-info svg {
    width: 35px;
    height: auto;
}

.dashboard-ajouter .localisation label::before {
    border: 2px solid var(--localisation);
    border-radius: 4px;
}

.dashboard-ajouter .localisation label {
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    color: var(--localisation);
}

.dashboard-ajouter .container-table {
    margin-top: 20px;
    display: flex; 
    justify-content: space-around; 
    align-items: stretch; 
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.dashboard-ajouter .table-checkbox td {
    padding: 0;
    vertical-align: middle;
    text-align: left;
    padding: 4px 0 0;
}

.dashboard-ajouter .table-checkbox .td-input {
    width: 30px;
}

.dashboard-ajouter .table-checkbox label {
    font-size: 14px;
    color: var(--color_paragraphe);
    margin-bottom: 0;
}

.dashboard-ajouter .table-checkbox .td-input input[type=radio] {
    text-align: left;
    border-width: 2px;
    border-style: solid;
}
.onglet-negociee.dashboard-ajouter .table-checkbox .td-input input[type=radio] {border-color: var(--color_besoin);}
.onglet-disponible.dashboard-ajouter .table-checkbox .td-input input[type=radio] {border-color: var(--color_disponible);}
.onglet-besoin.dashboard-ajouter .table-checkbox .td-input input[type=radio] {border-color: var(--color_besoin);}

/* >>>> Design CheckBox */
/* The container */
.table-checkbox .design-checkbox {
    display: block;
    position: relative;
    top: -9px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
                    
/* Hide the browser's default radio button */
.design-checkbox input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}
                    
/* Create a custom radio button */
.design-checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #fff;
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
}
.onglet-negociee.dashboard-ajouter .design-checkbox .checkmark {border-color: var(--color_negociee);}
.onglet-disponible.dashboard-ajouter .design-checkbox .checkmark {border-color: var(--color_disponible);}
.onglet-besoin.dashboard-ajouter .design-checkbox .checkmark {border-color: var(--color_besoin);}

/* On mouse-over, add a grey background color */
.design-checkbox:hover input ~ .checkmark {
    background-color: #ccc;
}
                    
/* When the radio button is checked, add a blue background */
.onglet-negociee .design-checkbox input:checked ~ .checkmark {background-color: var(--color_negociee);}
.onglet-disponible .design-checkbox input:checked ~ .checkmark {background-color: var(--color_disponible);}
.onglet-besoin .design-checkbox input:checked ~ .checkmark {background-color: var(--color_besoin);}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.design-checkbox input:checked ~ .checkmark:after {
    display: block;
}
/* <<<< Design CheckBox */
                        

/*--------------------------------------*\
           RECAP NOUVELLE ANNONCE
/*--------------------------------------*/
.recap-annonce h5 {
    margin-top: 1em;
}

.recap-annonce .reference .titre {
    font-family: Calibri, sans-serif;
    font-size: calc(var(--basePX) + 4px) !important;
    font-weight: bold;
    text-transform: uppercase;
}


/*--------------------------------------------*\
    COMMUN ONGLET => répondre 
/*--------------------------------------------*/
.recap-reponse .modal-body {
    padding-top: 32px ;
}

.recap-reponse h2 {
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 500;
    text-transform: math-auto;
    margin-top: 32px;
    padding: 0;
}

.recap-reponse .reference .titre {
    font-family: Calibri, sans-serif;
    font-size: calc(var(--basePX) + 4px) !important;
    font-weight: bold;
    text-transform: uppercase;
}

.recap-reponse .modal-paragraph {
    font-size: 14px;
    margin-top: 15px;
}

.recap-reponse .info-encadrer h2 { /* encadré dans le texte */
    font-size: 14px;
    font-weight: 700;
}

.recap-reponse .container-recap-encart { /* cartouche en haut de la page */
    margin-top: 1em !important;
}

.recap-reponse .container-recap-texte {
    margin-top: 1.5em;
}

.recap-reponse .recap-encart {
    box-shadow: 0px 3px 6px #00000029;
}

.recap-encart-long {
    width: fit-content;
    margin-top: 32px;
}

.recap-reponse .recap-encart-long h2 {
    margin-top: 0;;
}

.formulaire-ajouter .recap-encart-long {
    width: initial;
}

.recap-reponse .container-recap-texte .recap-texte {
    margin-top: 10px;
    border-radius: 0;
    box-shadow: none;
    text-transform: math-auto;
    width: 100%;
}

.recap-reponse .container-recap-texte .recap-texte h3 {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
    text-transform: math-auto; 
    font-size: 18px !important;  
    text-align: center;
    margin-bottom: 0;
    margin-top: 1em;
}

.recap-reponse .container-recap-texte .recap-texte p {
    margin-top: 0.5em;
    color: var(--color_paragraphe);
    font-size: 14px;
    margin-bottom: 0;
}

.recap-reponse.onglet-demande h1,
.recap-reponse.onglet-disponible h1 {
    font-size: 22px;
}

.recap-reponse.onglet-disponible h1

.recap-reponse.onglet-demande h1,
.recap-reponse.onglet-demande h2,
.recap-reponse.onglet-demande h3 {color: var(--color_demande) !important;}

.recap-reponse.onglet-disponible h1,
.recap-reponse.onglet-disponible h2,
.recap-reponse.onglet-disponible h3 {
    color: var(--color_disponible) !important;
}

.recap-reponse .info-maj {
    font-size: 16px;
    color: var(--gris-1);
    font-weight: 400;  /* Roboto regular */
}

/*--------------------------------------*\
                POPUP
/*--------------------------------------*/
/* _________________*/
/*  Commun Popup  */

.popup .popup-titre {
    font-weight: 400;
}

.popup .popup-texte {
    font-size: 15px;
    line-height: 27px;
    margin-top: 1.5em;
}

.popup .popup-texteRef {
    font-size: 15px;
    line-height: 27px;
}

.popup .popup-label {
    font-size: 15px;
    margin-top: 2em;
    text-transform: uppercase;
}

.popup .multi-lines-text {
    font-size: 15px;
}

.popup .popup-container-bt {
    font-size: 22px;
    line-height: 27px;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
}

.popup .popup-container-bt > div,
.popup .popup-container-bt > button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
}

.popup .popup-container-bt a,
.popup .popup-container-bt button {
    border-radius: 30px;
}

/* _______________*/
/*  Popup Login */
.popup-connexion h1 {
    font-size: 24px;
    font-weight: bold;
}

.popup-connexion p {
    font-size: 14px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
}

.popup-connexion .bt-charte  {
    text-decoration: none;
}

/* ____________________________________________________*/
/*  Popup Bravo (suite à une création ou Modification) */
.htp .popup-bravo.bravo-creaModifier {
    width: 550px !important;
    min-width: 550px !important; /* Reset BsT */
}


/* ____________________________________*/
/*  Popup Bravo (suite à une réponse) */
.popup-bravo .popup-titre {
    font-size: 20px;
    font-family: 'FF Clan';
    font-weight: 300;
}
.onglet-demande.popup-bravo .popup-titre {color: var(--color_demande);}
.onglet-negociee.popup-bravo .popup-titre {color: var(--color_negociee);}

.popup-bravo .popup-texte {
    font-size: 16px;
    line-height: 27px;
    margin-top: 2em;
}

.popup-bravo .popup-bloc-bt {
    font-size: 22px !important;
    line-height: 27px;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
}

.popup-bravo .popup-bloc-bt > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
}

.htp .popup-bravo a {
    font-size: 16px !important;
    border-radius: 30px;
}

/* _______________________*/
/*  Popup Désactivation */


/* ________________________________*/
/*  Popup Adhésion et Inscription  */

.popup-adhesion .form-inscription .progressbar {
    flex-wrap: wrap;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.popup-adhesion .container-membre {
    flex: 1.3 0 0;
    padding-left: 15px;
    display: flex;
    flex-flow: column nowrap;
    row-gap: 1em;
    justify-content: flex-start;
    align-items: center;

}

.popup-adhesion h1 {
    margin-top: 1em;
    font-size: 26px;
    font-family: 'ClanOT-NarrowMedium';
    font-style: normal;
    font-weight: 600;
}

.popup-adhesion .container-membre .deja-Membre p {
    font-size: 14px;
}

.popup-adhesion .container-membre .btn {
    font-size: 12px !important;
}

.container-membre .encard-membre {
    display: flex;
    column-gap: 8px;
    align-items: center;
}

.container-membre .inscript_nbr_membre {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 1em;
    width: 100%;
}

.container-membre .container-inscription-membre {
    border: 1px solid var(--color_site);
    border-radius: 15px;
    width: 215px;
    padding: 5px 10px;
}

.container-membre .container-inscription-membre .bloc-info {
    color: var(--color_site);
    display: flex;
    flex-flow: row nowrap;
    column-gap: 8px;
}

.container-membre .container-inscription-membre .bloc-info svg {
    width: 28px;
    height: auto;
}

.container-membre .container-inscription-membre .bloc-action {
    display: flex;
    justify-content: space-between;
    margin-top: 0.3em;
}

.container-membre .container-inscription-membre .bloc-action a {
    padding: 0; /* Reset BsT */
}

.container-membre .container-inscription-membre .bloc-action svg {
    fill: var(--color_site);
    color: var(--color_site);
    width: 15px;
    height: 15px;
}

.popup-adhesion .container-etape {
    flex: 3 0 0;
    justify-content: center;
}

.popup-adhesion .container-etape .contenu-formulaire {
    margin-left: 15%;
    margin-right: 15%;
}

.popup-adhesion .container-etape .contenu-formulaire.recap {
    margin-left: 40px;
    margin-right: 40px;
}

.container-etape .wrap-taille-1 {
    max-width: 620px;
}

.container-etape .valid-cgu a { 
    color: var(--color_site);
}

.popup-adhesion .container-critere {
    flex: 1.3 0 0;
    padding-right: 15px;
    padding-top: 4.5em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.popup-adhesion .container-critere div {
    width: 300px;
}

.container-critere h2 {
    font-size: 16px;
}

.container-critere .texte,
.container-critere .liste {
    font-size: 11px;
}

.container-critere .contact {
    font-weight: bold; 
    font-size: 14px;
}

.container-critere .contact a {
    color: var(--color_site);
}

.container-critere .contact .picto-hotline svg {
    color: var(--color_site);
    fill: var(--color_site);
}

.container-popup .form-inscription {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
    max-width: 680px;
    min-width: 470px;
}

.container-etape .container-bouton .btn,
.container-etape .btn  {
    padding: 6px 12px;

}

.container-membre .deja-Membre {
    margin-bottom: 1em;
}

.form-inscription .nb-mdp {
    font-size: 14px !important;
}


/*--------------------------------------*\
    COMMUN COLONNE ASIDE DROITE
/*--------------------------------------*/
.container-aside .bt-cta {
    font-size: 15px !important;
    font-weight: 400 !important; /* Roboto regular */
    min-width: 120px;
    padding: 6px 12px;
}

.container-aside .bt-cta-inverse {
    cursor: pointer;
    font-size: 15px !important;
    font-weight: 400 !important; /* Roboto regular */
    line-height: 25px;
    padding: 6px 12px;
}

 .htp .container-aside .pop-in-contact_tips {
    position: sticky;
    top: 25%;
    width: 215px;
    margin-left: auto;
    margin-right: auto;
    transition: margin 300ms;
} 

.container-aside .titreBouton {
    font-size: 15px !important;
    line-height: 20px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}

/*--------------------------------------*\
            MON ESPACE
/*--------------------------------------*/

/* Styles Commun */ 
.monEspace {
    max-width: 1055px;
    margin-right: auto;
    margin-left: auto;
}

/* Onglet : disponible + besoin + negocié + annuaire */
.monEspace.contenaire-titre h1 {
    font-size: 35px;
}

.monEspace.contenaire-titre svg {
    display: inline-block;
    width: 62px;
    height: auto;
}

.monEspace .affichage-liste {
    margin-top: 2em;
}

.container-cartouche {
    margin-top: 2em;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
   gap: 2em;
}

.cartouche,
.cartouchePlus,
.cartouche .hoverWarning {
    position: relative; /* accroche le menu hover du cartouche */
    border-radius: 20px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, .29);
    padding: 10px 15px;
    width: 325px;
    min-height: 190px;
    display: flex;
}

.cartouche {
    flex-direction: column;
    justify-content: space-between;
}

.cartouche h3 {
    font-size: 10px;
}

.charte-disponible.cartouche h3, .charte-disponible .cartouche h3 {color: var(--color_disponible);}
.charte-negociee .cartouche h3 {color: var(--color_negociee);}
.charte-annuaire .cartouche h3 {color: var(--color_annuaire);}
.charte-besoin.cartouche h3, .charte-besoin .cartouche h3 {color: var(--color_besoin);}

.cartouche .cartouche-entete p {
    font-family: Calibri, sans-serif;
    font-size: 12px;
}

.cartouche .entete-id {
    color: var(--gris-2);
    text-align: right;
    font-style: italic;
}

.cartouche .entete-date {
    color: var(--gris-2);
    text-align: center;
}

.charte-annuaire .cartouche .cartouche-entete {
    display: flex;
    flex-flow: row nowrap;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.cartouche .cartouche-entete .deadline {
    text-align: center;
    color: var(--deadline); 
}

.cartouche .deadline span {
    vertical-align: middle;
}

.cartouche .cartouche-contenu {
    display: flex;
}

.cartouche .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 70px;
    float: left;
    margin-right: 10px;
    width: 73px;
    height: 73px;
    border-radius: 50%;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, .29);
}
.charte-negociee .cartouche .avatar {color: var(--color_negociee);}
.charte-besoin .cartouche .avatar {color: var(--color_besoin);}

.cartouche .contenu {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 100%;
}

.cartouche .contenu > * {
    margin-top: 0.5em;
}

.cartouche header  {
    display: flex;
    flex-flow: column;
}

.cartouche header h1,
.cartouche header h2 {
    font-family: Calibri, sans-serif;
    font-size: 14px;
    float: left;
}

.cartouche header h2 {
    order: 1;
}

.cartouche header h1 {
    order: 2;
    font-weight: bold;
}
.charte-disponible.cartouche header h1,
.charte-disponible .cartouche header h1 {font-weight: normal; margin-top: 0.5em;}
.charte-disponible.cartouche header h2,
.charte-disponible .cartouche header h2 {font-weight: bold;}

.charte-disponible.cartouche header h1,
.charte-disponible.cartouche header h2,
.charte-disponible .cartouche header h1,
.charte-disponible .cartouche header h2  {color: var(--color_disponible);}

.charte-negociee .cartouche header h1,
.charte-negociee .cartouche header h2  {color: var(--color_negociee);}

.charte-annuaire .cartouche header h1,
.charte-annuaire .cartouche header h2  {color: var(--color_annuaire);}

.charte-besoin.cartouche header h1,
.charte-besoin.cartouche header h2  {color: var(--color_besoin);}


.cartouche .contenu .bouton {
   font-family: Calibri, sans-serif;;
   font-size: 15px;
   border-radius: 10px;
   color: #fff;
   text-align: center;
   padding: 5px;
   text-transform: uppercase;
}
.charte-disponible.cartouche .contenu .bouton {background-color: var(--color_disponible);}
.charte-besoin.cartouche .contenu .bouton {background-color: var(--color_besoin);}

.cartouche .contenu .reference  {
    text-transform: uppercase;
    font-size: 14px;
}

.cartouche .contenu .reference span {
    text-transform: math-auto;
 }

.cartouche .cartouche-pied {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 1em;
}

.charte-annuaire .cartouche-pied {
    justify-content: flex-end;
}
.charte-annuaire .cartouche-pied div {
    text-align: center;
}

.cartouche .cartouche-pied p {
    font-family: Calibri, sans-serif;
    font-size: 12px;
    color: var(--gris-2);
}
.charte-disponible.cartouche .cartouche-pied svg,
.charte-disponible .cartouche .cartouche-pied svg {color: var(--color_disponible);}
.charte-negociee .cartouche .cartouche-pied svg {color: var(--color_negociee);}
.charte-besoin.cartouche .cartouche-pied svg,
.charte-besoin .cartouche .cartouche-pied svg {color: var(--color_besoin);}

.monEspace .cartouche .admin-vu {
    margin-top: 1em;
    font-family: Calibri, sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
}

.charte-disponible .cartouche .admin-vu {color: var(--color_disponible);}

.cartouche .hoverStandard {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 20px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}

.cartouche .hoverWarning {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 20px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}

.cartouche .hoverWarning {
    font-family: Calibri, sans-serif;
    font-size: 17px;
    color: #fff;
    text-align: center;
    background-color: var(--warning);
}
.charte-disponible.cartouche .hoverStandard {background-color: var(--color_disponible);}
.charte-negociee.cartouche .hoverStandard {background-color: var(--color_negociee);}
.charte-annuaire.cartouche .hoverStandard {background-color: var(--color_annuaire);}
.charte-besoin.cartouche .hoverStandard {background-color: var(--color_besoin);}

.cartouche .hoverWarning a {
    font-family: Calibri, sans-serif;
    font-size: 17px;
    color: #fff;
}

.cartouche .hoverWarning a:hover {
    text-decoration: none;
}

.cartouche .hoverStandard a {
    font-family: Calibri, sans-serif;
    font-size: 17px;
    color: #fff;
}

.cartouche .hoverStandard a:hover {
    text-decoration: none;
}

.cartouchePlus {
    font-family: Calibri, sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
}
.charte-disponible .cartouchePlus {background-color: var(--color_disponible);}
.charte-negociee .cartouchePlus {background-color: var(--color_negociee);}
.charte-annuaire .cartouchePlus {background-color: var(--color_annuaire);}
.charte-besoin.cartouchePlus {background-color: var(--color_besoin);}

.cartouchePlus:hover {
    text-decoration: none; 
    color: #fff;
}

.cartouchePlus span {
    font-size: 33px;
    display: inline-block;
}

.monEspace .filtre {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 1em;    
}

.filtre .recherche {
    width: 220px;
}

.monEspace .filtre .champ-recherche {
    position: relative; /* accorche .delete-filtre = la croix pour supprimer la recherche en cours  */
    border: 0;
    border-radius: 0 ;
    border-bottom: 1px solid var(--gris-3);
}

.monEspace .filtre .champ-recherche,
.monEspace .filtre .champ-recherche::placeholder {
    font-size: 14px;
    text-transform: uppercase;
    font-style: normal;
}

.filtre .affiche-carte {
    position: relative; /* accroche le svg .affiche-carte */
    display: block;
    width: 25px;
    height: auto;
}

.filtre .affiche-carte svg {
    width: 25px !important;
    height: 27px;
    position: absolute;
    bottom: -1px;
}

.filtre .affiche-liste svg  {
    width: 31px !important;
    height: auto;
}

.filtre .recherche .delete-filtre svg {
    fill: var(--gris-1);
}


/* _____________________ */
/*  Formulaire REPONDRE */
.formulaire-repondre .container-principal {
    margin-left: 1em;
}

.formulaire-repondre .container-principal form {
    margin-left: 9em;
    margin-top: 1em;
}

.formulaire-repondre .label-reponse {
    font-size: 14px;
    font-weight: 400;  /* Roboto regular */
}

.formulaire-repondre .bloc-info,
.formulaire-ajouter .bloc-info {
    border-radius: 20px;
    width: 100%;
    max-width: 135px;
    padding: 10px 17px;
    font-size: 13px;
    text-align: center;
    color: #fff;
    font-weight: 300;
}
.formulaire-repondre .bloc-info.charte-disponible,
.formulaire-ajouter .bloc-info.charte-disponible {background-color: var(--color_disponible);}
.formulaire-repondre .bloc-info.charte-besoin,
.formulaire-ajouter .bloc-info.charte-besoin {background-color: var(--color_besoin); }

.formulaire-ajouter .container-2col-souple .bloc-info-long,
.formulaire-ajouter .bloc-info-long  {
    max-width: none;
    text-align: left;
}

.formulaire-repondre .bloc-info .memo-tjm,
.formulaire-ajouter .bloc-info .memo-tjm {
    color: #fff;
    font-weight: bold;
}

.charte-disponible.formulaire-repondre .label-reponse {color: var(--color_disponible);}

/*--------------------------------------*\
   Mon Compte
/*--------------------------------------*/
.container-principal {
    gap: 1em;
}

.container-principal .card  {
    width: 300px;
    max-width: 300px; /* reset BsT */
}


/*--------------------------------------*\
   MESSAGERIE
/*--------------------------------------*/
.messagerie .pk { /* svg */
    fill: #fff;
    stroke: var(--color_besoin);
}

/* ------------ */
/* Architecture */
.messagerie .main {
    width: 100%;
    max-width: 1920px;
    padding-left: 60px;
    padding-right: 60px;
}

.messagerie #MessagerieApp2 {
    width: 100%;
    max-width: 1795px;
    display: block
}

.messagerie .wrapper-aside-col {
    display: flex;
    flex-flow: row wrap;
    column-gap: 2em;
    padding-left: 10px;
    padding-right: 10px;
}

.messagerie .wrapper-aside-col .wac-col-gauche {
    flex: 0.8 0 0;
    max-width: 100%; /* reset BsT */
    min-width: 210px;
}

.messagerie .wrapper-aside-col .wac-col-principal {
    width: 100%; /* utile au tableau pour l'ascenseur horizontal en responsive */
    flex: 4 0 0;
    max-width: inherit; /* reset BsT */
    margin-top: 2em;
    margin-bottom: 2em;
}

.messagerie .wrapper-aside-col .wac-footer {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.messagerie .maincontent__messagerie .maincontent__messagerie--rightArea .scroll-area {
    padding-right: 0; /* reset BsT */
    height: auto;  /* reset BsT */
}

.messagerie .wrapper-col-aside {
    display: flex;
    column-gap: 2em;
    justify-content: flex-end;
}

.messagerie .wrapper-col-aside .wca-col-principal {
    flex: 1.6 0 0;
    max-width: 915px;
}

.messagerie .wrapper-col-aside .wca-col-droit {
    flex: 0.7 0 0;
    max-width: 450px;
}


/* Colonne principal */
.messagerie .container-liste-message th {
    font-family: "Roboto", sans-serif;
    font-weight: 500;  /* Roboto medium */
    font-size: 16px;
}

.messagerie .container-discussion,
.messagerie .container-infoContact,
.messagerie .container-infoRapide  {
    box-shadow: 5px 7px 10px #00000029 !important;
    border-radius: 20px;
}

.messagerie .container-discussion {
    margin-bottom: 2em;
}

.messagerie #MsgView.container-discussion .discussion-titre a {
    color: var(--color_disponible) !important;
}

.container-discussion .discussion-message {
    margin-top: 2em;
}

.container-discussion .colonne-recu.container-avatar  {
    margin-right: 1em !important;
}

.container-discussion #discussion .d-flex.justify-content-end article,
.container-discussion #discussion .d-flex.justify-content-end section {
    background-color: var(--color-rose) !important;
}

.container-discussion .container-message-type .discussion__bulle p {
    font-family: "Calibri", sans-serif;
    font-size: 14px;
    margin-top: 8px;
}

.container-discussion .container-message .discussion__bulle  {
    font-family: "Calibri", sans-serif;
    font-size: 14px;
}

.container-discussion .container-message-type .bt-cta-inverse {
    font-size: 13px !important;
    margin-top: 1em;
}

.container-discussion .container-ecriture textarea {
    border-radius: 20px;
    border-color: var(--color-rose) !important;
}

/* Colonne Droite */
.messagerie .new-messages .messagerie-disponible {
    bottom: -2px;
    right: -4px;
}

.messagerie .new-messages .messagerie-besoin {
    bottom: -13px;
    right: -4px;
}

.messagerie .archives {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 1em;
}

.archives .confidentiel {
    display: flex;
    align-items: center;
    max-width: 300px;
}

.archives .confidentiel .texte {
    max-width: 200px;
 }

.archives .confidentiel .picto {
    padding: 0; /* Reset BsT */
}

.archives .container-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 1em;
}

.archives .bt-switch  {
    font-size: 14px;
}
   
.messagerie .corps-bloc .bloc-societe {
    padding-left: 33%;
}

.messagerie .container-infoContact .bloc-info {
    display: flex;
    flex-flow: row wrap;
}

.messagerie .container-infoContact .bloc-avatar {
    flex: 1 0 0;
    margin-top: 1em;
} 

.messagerie .container-infoContact .bloc-civil {
    flex: 2 0 0;
} 

.messagerie .container-infoContact .titre-bloc span,
.messagerie .container-infoContact .titre-bloc svg,
.messagerie .container-infoContact .info-societe,
.messagerie .container-infoContact .info-nom,
.messagerie .container-infoContact .info-tel svg {
    color: var(--color-rose);
}

.messagerie .container-infoContact .titre-bloc span {
    font-size: 18px;
}

.messagerie .container-infoContact .info-societe {
    margin-bottom: 0;
    font-size: 18px;
}

.messagerie .container-infoContact .info-inscription {
    font-size: 15px;
    color: var(--gris-4);
}

.messagerie .container-infoContact .info-avatar {
    width:70px;
    height:70px;
    border-radius:50%;
    background-repeat: no-repeat;
    background-size: contain;
}

.messagerie .container-infoContact .info-tel a {
    color: var(--color_paragraphe);
}

.messagerie .container-infoRapide .titre-bloc  {
    font-size: 17px;
}

.messagerie .container-infoRapide .bloc-infoRapide {
    text-align: center;
    padding: 1rem;
    width: 100%;
    word-break: break-word;
    box-shadow: 0 .3px 6px #00000029;
    font-size: 14px;
    text-align: center;
}

.messagerie .container-infoRapide .libelle {
    color: var(--color_besoin);
    font-weight: 500;  /* Roboto medium */
    text-transform: uppercase;
}

.messagerie .container-infoRapide .reponse {
    text-transform: initial;
}

.messagerie .container-infoRapide .bt-cta  {
    font-size: 13px !important;
    padding: .375rem .75rem;
}


/* Colonne  Gauche */
.messagerie .repertoire-identite {
    padding-right: 1em !important; 
 } 

.messagerie .repertoire-identite .identite-photo {
    float: left;
    margin-right: 1em;
    margin-bottom: 8px;
}

.messagerie .repertoire-identite .disponible--id {
    position: initial;  /* reset BsT */
    display: block;
    text-align: right;
}

.messagerie .repertoire-identite .disponible--fonction {
    margin-top: 8px;
}

.messagerie .repertoire-identite .annonce-supprime {
    margin-top: 8px;
    padding-right: 1em;
}

.messagerie .memo-definition a {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: #fff;
    font-size: 30px;
    font-weight: 400px;
    line-height: 60px;
    text-align: center;
}



/* --------------- */
/* Menu Messagerie */

/* .messagerie .maincontent__messagerie__header, */
.messagerie .menu-messagerie {
    column-gap: 2em;
    justify-content: space-between;
    align-items: stretch;
}

/* .messagerie .maincontent__messagerie__header .category, */
.messagerie .menu-messagerie .onglet-messagerie {
    flex: 1 0 0; /* reset BsT */
}

.messagerie .maincontent__messagerie__header .category.category__link { /* all reset BsT */
    color: var(--black);
    font-size: calc(var(--basePX) + 5px);
    font-family: 'FF Clan';
    padding: .5rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 3px 6px #00000029;
}

.menu-messagerie .onglet-messagerie:hover {
    text-decoration: none; /* reset BsT */
}

.menu-messagerie .onglet-messagerie.border-bottom--demande {border-bottom: 5px solid var(--main-color_demande);} /* reset BsT */ 
.menu-messagerie .onglet-messagerie.border-bottom--negociee {border-bottom: 5px solid var(--main-color_negociee);} /* reset BsT */
.menu-messagerie .onglet-messagerie.border-bottom--disponible {border-bottom: 5px solid var(--main-color_disponible);} /* reset BsT */
.menu-messagerie .onglet-messagerie.border-bottom--besoin {border-bottom: 5px solid var(--main-color_besoin);} /* reset BsT */
.menu-messagerie .onglet-messagerie.border-bottom--demande.active {color: var(--main-color_demande);}
.menu-messagerie .onglet-messagerie.border-bottom--negociee.active {color: var(--main-color_negociee);}
.menu-messagerie .onglet-messagerie.border-bottom--disponible.active {color: var(--main-color_disponible);}
.menu-messagerie .onglet-messagerie.border-bottom--besoin.active {color: var(--main-color_besoin);}

.messagerie .onglet-messagerie .new-messages {
    bottom: -8px;
    right: -15px;
}

.messagerie .wac-col-gauche.messagerie-besoin .new-messages {
    bottom: -14px;
    right: -4px;
}

.container-menuDesktop .menu-mail #new-messages {
    bottom: -6px;
    right: -1px;
}

/* -------------- */
/* Colonne Gauche */
.messagerie .wac-col-gauche .container-recherche {
    position: relative; /* accroche le picto recherche et close */
}

.messagerie .wac-col-gauche .container-recherche input::placeholder {
    color: var(--color_paragraphe) !important;
    font-size: 16px;
    text-transform: uppercase;
    text-align: left;
    font-style: normal;
}

.messagerie .wac-col-gauche .container-recherche input {
    color: var(--color_paragraphe) !important;
    text-align: left;
    font-size: 14px; /* reset BsT */
    padding-left: 25px;
    padding-right: 20px !important; /* reset BsT */
}

.messagerie .wac-col-gauche .picto-svg { 
    position: absolute;
    top: 7px;
    left: 0;
    z-index: 3;
}

.messagerie .wac-col-gauche .picto-svg path{ 
    fill: var(--color_paragraphe);
}

.messagerie .wac-col-gauche .delete-filtre {
            right: 5px; /* reset BsT */
            bottom: 5px;  /* reset BsT */
            padding-right: 0; /* reset BsT */
    background-color: transparent; /* reset BsT */
    width: auto; /* reset BsT */
    height: auto; /* reset BsT */
}

.messagerie .wac-col-gauche .delete-filtre svg {
    width: 15px !important; /* reset BsT */
    height: 15px !important; /* reset BsT */
    position: initial; /* reset BsT */
}

.messagerie .messagerie--listing {
    max-width: 295px;
}    

.messagerie .messagerie--listing > article {
    min-height: 85px;
    align-content: center;
}    

/* Page accueil */
.htp .home__title  {
    font-size: 36px;
}

.htp .summup-texte  {
    width: 656px;
}

.htp .summup-texte p:first-child {
    margin-top: 0;
}

.htp .summup-texte p {
    font-size: 24px;
    text-align: center;
    margin-top: 0.8em;
}

.htp .summup-texte p.lien-annuaire {
    float: left;
}

.htp .summup-texte p.lien-negocie {
    float: right;
}

.htp .summup-texte p.lien-texte  {
    width: 45%;
}

.htp .summup-texte p .bt-cta {
    display: inline-block;
    margin-top: 8px;
    text-decoration: none;
    background-color: #fff;
    font-family: 'ClanOT-NarrowBold';
    font-weight: normal;
    font-size: 21px !important;
    font-weight: bold;
}
.htp .summup-texte p.lien-negocie .bt-cta {color: var(--color_negociee);}
.htp .summup-texte p.lien-annuaire .bt-cta {color: var(--color_annuaire);}

.htp .summup-texte p .bt-cta:hover {
    color: var(--black);
    background: var(--color-rose);
}

.htp .summup-CTA {
    width: 640px;
    padding: 32px 35px 50px 35px;
}
.htp .summup-CTA__title {
    font-size: clamp(1.5rem, 1.7vw, 8vh)
}

.htp .summup-CTA__texte {
    font-size: clamp(1.3rem, 1.2vw, 8vh);
    margin-top: 18px;
}

.htp .pg-accueil {width: 85%;}

.htp .pg-accueil .container-accueil  {
    justify-content: center;
    gap: 1.5em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.pg-accueil .container-accueil article {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 0.5em;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    border-radius: 20px;
    padding: 1rem;
}
.pg-accueil .container-accueil article.container-solutions {
    justify-content: flex-end;
}

.htp .pg-accueil .entete-bloc {
    display: flex;
    flex-direction: row;
}

.dashboard-Module .btn {
    font-size: 15px !important;
}

.pg-accueil .picto svg {
    width: 55px;
    height: auto;
}

.pg-accueil .long-1 {
    flex: 0 0 20%; 
    min-width: 240px; 
}

.pg-accueil .long-1 {
    align-items: center; 
}

.pg-accueil .long-1 > svg {
    width: 70px;
    height: auto;
}

.pg-accueil .long-1-gauche {
    align-items: flex-start; 
}

.pg-accueil .long-2 {
    flex: 0 0 40%; 
    min-width: 370px; 
    align-items: flex-start;
}

.pg-accueil .container-catalogue {
    order: 1;
}

.pg-accueil .container-messagerie {
    order: 3;
}

.pg-accueil .container-messagerie svg {
    width: 100%;
}

.pg-accueil .container-profil {order: 4;}

.pg-accueil .container-formateur-dispo {order: 5;}

.pg-accueil .carousel {
    align-self: flex-start;
    width: 95%;
}


.pg-accueil .container-formation {order: 6;}

.pg-accueil .container-solutions {order: 7;}

.pg-accueil .container-formation-dispo {
    order: 8;
}

.pg-accueil .container-formation-dispo svg {
    color: var(--color_besoin);
}

.pg-accueil .container-besoin {order: 9;}


.pg-accueil .container-annuaire {
    order: 2;
    background-color: #fff;
    color: var(--color_annuaire);
}
.pg-accueil .container-annuaire .title {
    width: fit-content;
}


.pg-accueil .container-catalogue svg path,
.pg-accueil .container-catalogue svg line,
.pg-accueil .container-catalogue svg rect {
    color: #fff;
    stroke: #fff;
    fill: none;
}

.pg-accueil .container-profil g path,
.pg-accueil .container-profil g line,
.pg-accueil .container-profil g rect {
    color: #fff;
    stroke: #fff;
    fill: none;
}

.pg-accueil .container-besoin g path,
.pg-accueil .container-besoin g line,
.pg-accueil .container-besoin g rect {
    color: #fff;
    stroke: #fff;
    fill: none;
}

.pg-accueil .container-formation g path,
.pg-accueil .container-formation g line,
.pg-accueil .container-formation g rect {
    fill: #fff;
}

.container-solutions p {
    line-height: normal;
    text-align: center;
    font-weight: 500;  /* Roboto regular */
    font-family: "Roboto", sans-serif;
    font-size: 25px;
}

.container-solutions a {
    margin-top: 28px;
 }

.container-formation h3.subtitle  {
    font-weight: 500;  /* Roboto regular */
    font-family: "Roboto", sans-serif;
}
  
/*--------------------------------------*\
   SVG
/*--------------------------------------*/

/* Menu Principal Desktop */ 
.menu-principal .picto-menu .modif-svg g path {
    fill: none;
}

.menu-principal .picto-menu:hover .modif-svg path,
.menu-principal .picto-menu:hover .modif-svg line,
.menu-principal .picto-menu:hover .modif-svg rect {
    stroke: #fff;
}

.mainnavheader .menu-principal ul li:hover a .modif-svg g path {
    stroke: #fff;
}

.mainnavheader .menu-principal ul li:hover a path,
.mainnavheader .menu-principal ul li:hover a line,
.mainnavheader .menu-principal ul li:hover a rect {
    stroke: #fff;
    fill: transparent;
}

.mainnavheader .menu-principal ul li.item-demande:hover a path,
.mainnavheader .menu-principal ul li.item-demande:hover a line,
.mainnavheader .menu-principal ul li.item-demande:hover a rect {
    fill: #fff;
    stroke: transparent;
}

/* Menu Sticky All */ 
.menu-sticky .modif-svg g path {
    fill: none;
}

/* Menu Sticky Droite */ 
.menu-sticky .sticky-proposer .modif-svg g path {
    stroke: #fff;
}

.menu-sticky .sticky-proposer:hover .modif-svg g path {
    stroke: #000;
}



/*--------------------------------------*\
   A RANGER 
/*--------------------------------------*/

/* >>>>>>> Onglet DEMANDE FORMATION */
.dashboard-entete form.formulaire-recherche .mainhead__search md-autocomplete-wrap {
    outline: none; 
}
.onglet-besoin .dashboard-entete form.formulaire-recherche .mainhead__search md-autocomplete-wrap {border: 1px solid var(--color_besoin);}
.onglet-disponible .dashboard-entete form.formulaire-recherche .mainhead__search md-autocomplete-wrap {border: 1px solid var(--color_disponible);}
.onglet-annuaire .dashboard-entete form.formulaire-recherche .mainhead__search md-autocomplete-wrap {border: 1px solid var(--color_annuaire);}
.onglet-negociee .dashboard-entete form.formulaire-recherche .mainhead__search md-autocomplete-wrap {border: 1px solid var(--color_negociee);}
.onglet-demande .dashboard-entete form.formulaire-recherche .mainhead__search md-autocomplete-wrap {border: 1px solid var(--color_demande);}


.dashboard-repondre.onglet-demande .label-reponse {color: var(--color_demande) !important;}
.dashboard-repondre.onglet-negociee .label-reponse {color: var(--color_negociee) !important;}


/* Onglet DEMANDE FORMATION <<<<<< */



/* >>>>>>> Onglet FORMATION NEGOCIEE */

/* Mon compte */
.compte-utilisateur .titre-page {
    font-size: 30px;
}

/* RESET ACTU BsT  */
.demande-voir {
    margin-top: 150px;
}

.dashboard-Module .titre-bloc {
    margin-top: 0 !important;
}

.dashboard-Module .container-profil h2, .dashboard-Module .container-besoin h2 {letter-spacing: normal;}
.custom--svg_calendar md-datepicker button.md-datepicker-button {height: 36px;}
.custom--svg_calendar md-datepicker button.md-datepicker-button .md-datepicker-calendar-icon {height: auto;}
.htp .word {
    font-weight: normal;
}

.monEspace #filtre {
    padding: 0;
}

.table__nego thead th {
    font-family: "Roboto", sans-serif;
}