:root {
    --color-primary: #009adf;
    --color-primary-hover: #2ebaf9;
    --color-error: #ee2410;
    --color-error-hover: #f5533c;
    --color-success: #41cd01;
    --color-success-hover: #6ee82f;
    --color-dark: #3a0648;
    --color-bg-light: #edf1fa;
    --color-light-blue: #d3e3fd;
    --color-white: #ffffff;
    --color-VS: #3a0648;
    --color-warning: #ee2410;
}

/*
    TABLETTE CHANTIER CHARTRES-AMIANTE
    Galaxy Tab A7 WiFi (SM-T500) Gris 32 Go | Samsung Levant.
    Écran : 10.4" TFT LCD, résolution WUXGA+ de 2000 x 1200 pixels (224 ppp)
*/

/*
Text (type violet visual-studio) => color: 
Back-conf (type barre search google) => background-color: #edf1fa;
Bleu léger (type onglet nav google) #d3e3fd
CTA (bleu vif type button CTA) => background-color: var(--color-primary);
Gris/Noir cassé : #333;
info  fill: #2488f5;
warning  fill: #ffc711; (jaune)
error  fill: #ee2410;
success  fill: #41cd01;
*/

/*
    font-size: clamp(1rem, calc(3rem - 2vw), 2.5rem);
Quand l’écran est grand (1920px), 2vw est important → calc(3rem - 2vw) devient petit → valeur proche du min (1rem).
Quand l’écran rétrécit (375px), 2vw devient très petit → calc(3rem - 2vw) devient grand → valeur se rapproche du max (2.5rem).
*/

html, body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    color: #444444;
}

h1 {
    font-size: 2.2rem;
    font-weight: 600;
    display: flex;
    margin: 0;
    color: #333333;
}



/***********************/

.main-home-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 2rem;
}


/******************************/
/* Type Liens : Ahref / Onclick */
/******************************/

.link {
    width: 100%;
    height: auto;
}

a {
    text-decoration: none;
}

.link-log {
    text-decoration: none;
    font-size: clamp(1rem, calc(3rem - 2vw), 1.5rem);
    color: var(--color-primary);
    cursor: pointer;
}


/* nav-link : imite ahref 
 pour les appel onclick */
.nav-link {
    text-decoration: none;
    font-size: clamp(2rem, calc(3rem - 2vw), 2.2rem);
    background-color: var(--color-primary);
    color: white;
    cursor: pointer;
}

    .nav-link:hover {
        background-color: var(--color-primary-hover);
    }

/******************************/

.nav-link-error {
    text-decoration: none;
    font-size: 1.5rem;
    background-color: var(--color-error);
    color: white;
    cursor: pointer;
}

    .nav-link-error:hover {
        background-color: var(--color-error-hover);
    }

/******************************/

.nav-link img, .nav-link-error img {
    margin-right: 1rem;
}



/******************************/
/* TYPE BUTTON */
/******************************/
button, .btn {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width: clamp(12rem, calc(3rem - 2vw), 5rem);
    height: clamp(7rem, calc(3rem - 2vw), 5rem);
    font-size: clamp(1.1rem, calc(3rem - 2vw), 1.5rem);
    border: none;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: 400;
    cursor: pointer;
    transition: .2s;
    margin: 1rem 0.5rem;
    border-radius: 0.3rem;
    padding: 0.5rem 0.5rem;
}

.btn-view-action {
    width: clamp(7rem, calc(3rem - 2vw), 5rem);
    height: clamp(7rem, calc(3rem - 2vw), 5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffc711;
    border-radius: 100%;
    cursor: pointer;
    flex-grow: 0;
}


.btn-view {
    width: 5rem;
    height: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #d3e3fd;
    border-radius: 100%;
    cursor: pointer;
    flex-grow: 0;
}

.btnedit {
    width: clamp(4rem, calc(3rem - 2vw), 5rem);
    height: auto;
    flex-grow: 0;
    background-color: forestgreen; /* #41cd01; */
    border-radius: 0.3rem;
    margin: 0 0.8rem;
    cursor: pointer;
}

/* btn listchantier */
.listchantier.btnedit {
    width: clamp(6rem, calc(3rem - 2vw), 5rem);
    height: clamp(6rem, calc(3rem - 2vw), 5rem);
    font-size: clamp(1.1rem, calc(3rem - 2vw), 1.5rem);
    flex-grow: 0;
    background-color: forestgreen; /* #41cd01; */
    border-radius: 0.3rem;
    margin: 0 0.8rem;
    cursor: pointer;
}
    .listchantier.btnedit img {
        width: clamp(4rem, calc(3rem - 2vw), 3rem);
        height: clamp(4rem, calc(3rem - 2vw), 3rem);
        padding-top: 0.75rem;
    }
/*******************/


.btndelete {
    width: clamp(8rem, calc(3rem - 2vw), 5rem);
    height: auto;
    font-size: clamp(1.1rem, calc(3rem - 2vw), 1.5rem);
    flex-grow: 0;
    background-color: #ee2410; /*darkred;*/
    border-radius: 0.3rem;
    margin: 0 0.8rem;
    cursor: pointer;
}

.btnedit img,
.btndelete img {
    width: 100%;
    height: 1.5rem;
    padding-top: 0.75rem;
}

    button:hover,
    .btn:hover,
    .btnedit:hover,
    .btndelete:hover {
        background-color: #2ebaf9;
        transform: scale(1.15);
        transition: 0.3s ease-in-out;
    }

    button:active,
    .btn:active,
    .btnedit:active,
    .btndelete:active {
        background-color: #0073a7;
    }


    button:disabled,
    .btn:disabled,
    .btnedit:disabled,
    .btndelete:disabled {
        background-color: #cccccc !important;
        color: #666666 !important;
        cursor: not-allowed;
        transform: none !important;
        opacity: 0.7;
    }

.btndelete-all {
    width: auto;
    height: 4rem;
    flex-grow: 0;
    background-color: darkred;
    color: var(--color-white);
    border-radius: 0.3rem;
    margin: 0 0.5rem;
    cursor: pointer;
}

/******************************/
/* class view info bulle aide */
/******************************/

.helperInfo span {
    display: none;
    color: #fff;
    background: rgba(51,51,51,0.95);
    padding: 20px;
    /*top: 5rem;
    right: 0;*/
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    width: 110px;
    text-align: center;
    /*position: absolute;*/
    position: fixed;
    z-index: 1200;
}

.helperInfo:hover span {
    display: block;
}

/* Class spécifique composant admin et log */

.spe-conf {
    width: 80%;
    height: auto;
    background-color: #edf1fa;
    border-radius: 4rem;
    margin: 0 0 2rem 2rem;
}

.sub-title {
    font-size: 1.6rem;
    font-weight: 100;
    flex-grow: 1;
    color: #3a0648;
    margin-left: 2rem;
}

.info-conf {
    padding: 0.25rem 0 0 0;
    font-size: 1.5rem;
    color: #3a0648;
}

.sub-info-conf {
    padding: 0.25rem 0 0 0;
    font-size: 1rem;
    color: #3a0648;
}


/**************************/
/* FORM */
/**********************/

.container-filter {
    position: fixed;
    top: 10rem;
    right: 0.5rem;
    border-top: solid white 2px;
}


.form-group {
    margin: 0.5rem 0;
    color: #3a0648;
}


input + label,
select + label,
textarea + label,
label + input,
label + select,
label + textarea {
    display: block;
}


input, select {
    height: 3rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.5rem;
    margin-top: 0.25rem;
    color: #444444;
    font-size: 0.9rem;
    outline-style: outset;
    outline-color: #3a0648;
    outline-width: 1px;
    border-radius: 0.3rem;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

textarea {
    height: 6rem;
    max-height: 6rem;
    min-height: 6rem;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    margin-top: 0.25rem;
    padding: 0.2rem 0.5rem;
    color: #444444;
    font-size: 0.9rem;
    outline-style: outset;
    outline-color: #3a0648;
    outline-width: 2px;
    border-radius: 0.3rem;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.inputselect {
    height: 3rem;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.25rem;
    padding: 0.2rem 0.5rem;
    color: #444444;
    font-size: 0.9rem;
    outline-style: outset;
    outline-color: #3a0648;
    outline-width: 2px;
    border-radius: 0.3rem;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.inputcheckbox {
    height: 3rem;
    width: 3rem;
    box-sizing: border-box;
    margin-top: 0.5rem;
    padding: 0.2rem 0.5rem;
    outline-style: outset;
    outline-color: #3a0648;
    outline-width: 2px;
    border-radius: 0.6rem;
}





    .container-form-add {
        width: 22%;
        height: auto;
        border: #d3e3fd 2px solid;
        border-radius: 0.3rem;
        padding: 1rem 1.5rem;
        margin: 1rem auto;
    }

    .container-form-add-medium {
        width: 40%;
        height: auto;
        border: #d3e3fd 2px solid;
        border-radius: 0.3rem;
        padding: 1rem 1.5rem;
        margin: 1rem auto;
    }

    .container-form-add-big {
        width: 80%;
        height: auto;
        border: #d3e3fd 2px solid;
        border-radius: 0.3rem;
        padding: 1rem 1.5rem;
        margin: 1rem auto;
    }


.label-filename {
    font-size: 1.2rem;
}

.label-legende {
    font-size: 0.8rem;
    margin: 0.3rem auto;
    color: grey;
}

article label {
    color: #009adf;
    font-weight: 600;
    font-size: clamp(1.1rem, calc(3rem - 2vw), 2.2rem);
}

/***********************************/
/* title dédié à tous les composants PAGE et FORM */
/*********************************/

.title {
    display: flex;
    font-size: 2.6rem;
    color: #3a0648;
    font-weight: 800;
}

.title-medium {
    display: flex;
    font-size: 1.6rem;
    color: #3a0648;
    font-weight: 800;
}

.title-small {
    display: flex;
    font-size: 1.3rem;
    color: #3a0648;
    font-weight: 800;
}

.f-size-small {
    font-size: 0.8rem;
}

.f-size-medium {
    font-size: 1.2rem;
}

.f-size-big {
    font-size: 1.6rem;
}

.word-break {
    word-break: break-all;
    overflow-wrap: break-word;
    max-width: 100%;
}

/*********************************************/
/* CONTAINER & CLASS GENERIQUES */
/*************************************/

.container-row {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
}

    .container-col {
        display: flex;
        flex-direction: column;
    }

    .container-wrap {
        width: 95%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        padding: 0 2.5%;
        
    }

    overflowXHidden {
        overflow-x: hidden;
    }
    .grow1 {
        flex-grow: 1;
    }

    .display-none {
        display: none;
    }

    .w100 {
        width: 100%;
    }

    .w80 {
        width: 80%;
    }

    .w50 {
        width: 50%;
    }

    .w-auto {
        width: auto;
    }

    .h-auto {
        height: auto;
    }

    .h100 {
        height: 100vh;
    }

    .align-top {
        vertical-align: top;
    }

    .align-it-end {
        align-items : flex-end;
    }

    .align-it-center {
        align-items : center;
    }

    .align-it-start {
        align-items : flex-start;
    }

    .j-start {
        justify-content: flex-start;
    }

    .j-end {
        justify-content: flex-end;
    }

    .j-center {
        justify-content: center;
    }

    .j-around {
        justify-content: space-around;
    }

.txt-center {
    text-align: center;
}

.txt-right {
    text-align: right;
}

.txt-left {
    text-align: left;
}

.marginT1 {
    margin-top: 1rem;
}

.marginT2 {
    margin-top: 2rem;
}

.marginT4 {
    margin-top: 4rem;
}
    .marginTB1 {
        margin: 1rem auto;
    }

    .marginTB2 {
        margin: 2rem auto;
    }

    .marginLR1 {
        margin: auto 1rem;
    }

    .marginLR2 {
        margin: auto 2rem;
    }

    .marginLR4 {
        margin: auto 4rem;
    }

    .marginLR6 {
        margin: auto 6rem;
    }

.marginTRBL05 {
    margin: 0.5rem;
}

    .marginTRBL1 {
        margin: 1rem;
    }

    .marginTRBL2 {
        margin: 2rem;
    }

.paddingTB05 {
    padding: 0.5rem 0;
}

    .paddingTB1 {
        padding: 1rem 0;
    }

    .paddingTB2 {
        padding: 2rem 0;
    }

    .paddingT2 {
        padding-top: 2rem;
    }

    .paddingT4 {
        padding-top: 4rem;
    }

    .paddingT6 {
        padding-top: 6rem;
    }

    .paddingLR1 {
        padding: 0 1rem;
    }

    .paddingLR2 {
        padding: 0 2rem;
    }

    .paddingTRBL05 {
        padding: 0.5rem;
    }

    .paddingTRBL1 {
        padding: 1rem;
    }

    .paddingTRBL2 {
        padding: 2rem;
    }

    .border-conf {
        border-top: solid #d3e3fd 2px;
        border-bottom: solid #d3e3fd 2px;
    }

    .border-conf-top {
        border-top: solid #d3e3fd 2px;
    }

    .border-conf-bottom {
        border-bottom: solid #d3e3fd 2px;
    }

    .border-form {
        border: solid #d3e3fd 2px;
        border-radius: 0.3rem;
    }

    .border-blue-dark {
        border: solid #3a0648 2px;
        border-radius: 0.3rem;
    }

    .border-grey {
        border: solid #444444 2px;
        border-radius: 0.3rem;
    }

    .border-blue-cta {
        border: solid #009adf 2px;
        border-radius: 0.3rem;
    }

.colorCTA {
    color: #009adf;
    /*  #3a0648;*/
}

.colorWhite {
    color: var(--color-white);
}

.colorVS {
    color: #3a0648;
}

.colorSuccess {
    color: #41cd01;
}
.warning-message, .colorWarning {
    color: #ee2410;
}



.bgColor-blueHover {
    background-color: #2ebaf9;
}

.bgColor-purpleVS {
    background-color: #3a0648;
}

.bgColor-error {
    background-color: #ee2410;
}

.bgColor-success {
    background-color: #41cd01;
}

.bgColor-info {
    background-color: #2488f5;
}

.bgColor-warning {
    background-color: #ffc711;
}

.bgColor-backGoogle {
    background-color: #edf1fa;
}

.bgColor-ongletGoogle {
    background-color: #d3e3fd;
}


.cursor-pointer {
    cursor: pointer;
    padding: 8px 12px;
    min-height: 44px;
}

.text {
    display: flex;
    font-size: 1rem;
    color: #3a0648;
    font-weight: 400;
    line-height: 2rem;
}

.hidden {
    display: none;
}


.z-index1 {
    z-index: 1;
}

.Z-index99 {
    z-index: 99;
}

.warp-word {
    /*width: 200px;*/ /* largeur fixe ou max */
    /*white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    border: 1px solid #ccc;
    padding: 5px;*/

    word-break: break-all; /* Coupe le mot partout si nécessaire */
    /* word-wrap: break-word; Pour couper les mots trop longs */
    /* white-space: normal;  Permet le retour à la ligne */
    /* overflow-wrap: break-word;  Support moderne */
}


/* Class Générique servant pour DEBUG */

.border-red {
    border: solid red 1px;
}

.border-blue {
    border: solid blue 1px;
}

.border-black {
    border: solid black 1px;
}




/*************************************/

.page-twopart {
    width: 50%;
    height: auto;
    padding: 2rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: #edf1fa;
    color: #3a0648;
    text-align: center;
}


/************************/
/* Class Elements Card 
 affichage card chantier */
/************************/

.part-card {
    width: 30rem;
    height: auto;
    /*min-height: 12rem;*/
    padding: 0.5rem 1rem;
    margin: 2rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border: solid #d3e3fd 3px;
    background-color: #edf1fa;
    color: #3a0648;
    text-align: center;
    border-radius: 0.3rem;
}


.part-card .title-card {
    width: 90%;
    height: auto;
    display: flex;
    flex-grow: 1;
    text-align: left;
}




.part-card img {
    width: 100%;
    height: 1.5rem;
}

    .part-card .content-card {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
    }

    .part-card .line-element,
    .part-card-conf .line-element,
    .part-card-error .line-element {
        font-size: 1rem;
        color: #3a0648;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }



/* Spe Card page configuration */

.part-card-conf {
    width: 20rem;
    height: auto;
    /*min-height: 12rem;*/
    padding: 0.5rem 1rem;
    margin: 2rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border: solid #d3e3fd 3px;
    /* border: #77A6F7 3px solid;*/
    background-color: #edf1fa;
    color: #3a0648;
    text-align: center;
    border-radius: 0.3rem;
}


.part-card-conf .title-card {
    width: 60%;
    height: auto;
    display: flex;
    flex-grow: 1;
    text-align: left;
}



    .part-card-conf .content-card,
    .part-card-error .content-card {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
    }



/* Part-card error */

.part-card-error {
    width: 80%;
    height: auto;
    padding: 0.5rem 1rem;
    margin: 2rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border: solid #d3e3fd 3px;
    background-color: #edf1fa;
    color: #3a0648;
    text-align: left;
    border-radius: 0.3rem;
}


/* Part-card ticket */

.part-card-ticket {
    width: 40%;
    height: auto;
    padding: 0.5rem 1rem;
    margin: 2rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border: solid #d3e3fd 3px;
    background-color: #edf1fa;
    color: #3a0648;
    text-align: left;
    border-radius: 0.3rem;
}

.ticket-user-actif {
    width: 40%;
    height: auto;
    border: #3a0648 2px solid;
    border-radius: 0.3rem;
    padding: 1rem 1.5rem;
    margin: 1rem auto;
    background-color: white;
}

.ticket-user-inactif {
    width: 40%;
    height: auto;
    border: #3a0648 2px solid;
    border-radius: 0.3rem;
    padding: 1rem 1.5rem;
    margin: 1rem auto;
    background-color: ghostwhite;
}


/* Style STATUT CHANTIER (fil) */

.container-statut {
    padding-bottom: 1rem;
    border-bottom: solid #d3e3fd 4px;
    border-top: solid #d3e3fd 4px;
}

.state-chantier-on {
    width: 2rem;
    height: 2rem;
    font-size: 1.5rem;
    border-radius: 100%;
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    display: inline-block;
    color: #fff;
}

.state-chantier-off {
    width: 2rem;
    height: 2rem;
    font-size: 1.5rem;
    border-radius: 100%;
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    opacity: 0.3;
    display: inline-block;
    color: #fff;
}

.container-doc {
    padding-top: 1rem;
    border-top: solid #d3e3fd 4px;
}


/* Class Elements Dashboards */


    .statutpointOn {
        width: 1rem;
        height: 1rem;
        border-radius: 100%;
        background-color: forestgreen;
        margin: 0.25rem 0.5rem 0 0;
    }

    .statutpointOff {
        width: 1rem;
        height: 1rem;
        border-radius: 100%;
        background-color: red;
        margin: 0.25rem 0.5rem 0 0;
    }

    .statutpointOrange {
        width: 1rem;
        height: 1rem;
        border-radius: 100%;
        background-color: darkorange;
        margin: 0.25rem 0.5rem 0 0;
    }

    /* CARD-DASH */

/* CARD-DASH */
.card-dash, .card-dash-double, .card-dash-min {
    margin: 2rem 1rem;
    text-align: center;
    cursor: pointer;
}

/* Nouveau wrapper interne qui contient le style visuel */
.card-dash-inner, .card-dash-double-inner, .card-dash-min-inner {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    border-radius: 0.5rem;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Dimensions */
.card-dash {
    width: 100%;
    max-width: 18rem;
    height: 18rem;
}

.card-dash-min {
    width: auto;
    min-width: 16rem;
    height: 8rem;
}

.card-dash-double, .card-dash-double-inner {
    width: auto;
    height: 18rem;
}

    /* Liens */
    .card-dash a, .card-dash-double a, .card-dash-min a {
        color: #fff;
        text-decoration: none;
        display: block;
        height: 100%;
        width: 100%;
    }

/* Titres */
.card-dash .title-card-dash {
    font-weight: 800;
    font-size: 1.8rem;
    margin-top: 1rem;
}

.card-dash-double .title-card-dash {
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.card-dash-min .title-card-dash {
    font-weight: 400;
    font-size: 1rem;
    margin-bottom: 0.3rem;
}

.count-title {
    font-size: 1.2rem;
}

.count {
    font-size: 2.5rem;
    font-weight: bold;
}

/* Images + spans animés */
.card-dash img,
.card-dash span {
    transition: transform 0.4s ease;
    transform-origin: center center;
}

/* Effets hover */
@media (hover: hover) and (pointer: fine) {
    .card-dash:hover .card-dash-inner,
    .card-dash-double:hover .card-dash-double-inner,
    .card-dash-min:hover .card-dash-min-inner {
        transform: translateY(-8px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        filter: brightness(1.05);
    }

    .card-dash:hover img {
        animation: floaty 0.6s ease-in-out forwards;
    }

    .card-dash:hover span {
        transform: scale(1.05);
    }
}

/* Animation douce type "soucoupe" */
@keyframes floaty {
    0% {
        transform: scale(1) translateY(0);
    }

    30% {
        transform: scale(1.05) translateY(-3px);
    }

    60% {
        transform: scale(1.05) translateY(2px);
    }

    100% {
        transform: scale(1.05) translateY(0);
    }
}


/*.card-dash, .card-dash-double, .card-dash-min {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    border-radius: 0.5rem;
    color: #fff;
    margin: 2rem 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    text-align: center;
}

.card-dash {
    width: 100%;
    max-width: 18rem;
    height: 18rem;
}

.card-dash-min {
    width: auto;
    min-width: 16rem;
    height: 8rem;
}

.card-dash-double {
    width: auto;
    height: 18rem;
}

    .card-dash a, .card-dash-double a, .card-dash-min a {
        color: #fff;
        text-decoration: none;
        display: block;
        height: 100%;
        width: 100%;
        cursor: pointer;
    }

.card-dash .title-card-dash {
    font-weight: 800;
    font-size: 1.8rem;
    margin-top: 1rem;
}

.card-dash-double .title-card-dash {
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.card-dash-min .title-card-dash {
    font-weight: 400;
    font-size: 1rem;
    margin-bottom: 0.3rem;
}

.count-title {
    font-size: 1.2rem;
}

.count {
    font-size: 2.5rem;
    font-weight: bold;
}

.card-dash img,
.card-dash span {
    transition: transform 0.4s ease;
    transform-origin: center center;
}*/


/* CSS */
/*@media (hover: hover) and (pointer: fine) {
    .card-dash {
        position: relative;*/ /* wrapper stable - zone hover ne bouge pas */
        /* si ton layout nécessite, tu peux forcer box-sizing : */
        /*box-sizing: border-box;*/
        /* ne pas clipper l'ombre si tu veux voir la shadow de l'inner */
        /*overflow: visible;
    }

    .card-dash__inner {*/
        /* L'inner est l'élément "visuel" qu'on fera monter.
       On applique les transitions ici (transform + ombre + filtre). */
        /*transition: transform 280ms cubic-bezier(.2,.8,.2,1), box-shadow 280ms ease, filter 280ms ease;
        will-change: transform, box-shadow, filter;
        border-radius: 8px;*/ /* exemple */
        /*overflow: hidden;*/ /* si tu veux coins arrondis propres */
        /*background: white;*/ /* si besoin */
    /*}*/

    /* Hover appliqué au wrapper (stable) déclenche l'animation de l'inner */
    /*.card-dash:hover .card-dash__inner {
        transform: translateY(-8px);*/ /* hausse Y désirée */
        /*box-shadow: 0 10px 20px rgba(0,0,0,0.22);*/ /* relief doux */
        /*filter: brightness(1.05);
    }*/

    /* Image : animation légère "soulevée" (soucoupe) */
    /*.card-dash__inner img {
        display: block;
        max-width: 100%;
        height: auto;
        transition: transform 360ms cubic-bezier(.2,.8,.2,1);
        will-change: transform;
        backface-visibility: hidden;
        transform-origin: center;
    }

    .card-dash:hover .card-dash__inner img {
        transform: translateY(-3px) scale(1.03);*/ /* petit décalage + scale */
    /*}

    .card-dash__inner .card-title,
    .card-dash__inner .badge-new {
        transition: transform 240ms ease;
    }

    .card-dash:hover .card-dash__inner .card-title {
        transform: translateY(-2px);
    }

    .card-dash:hover .card-dash__inner .badge-new {
        transform: scale(1.08);
    }
}*/

/* optionnel : éviter tout saut horizontal global si tu en avais */
/*.container-where-cards-live {
    overflow-x: hidden;*/
    /* overflow-y: auto; si nécessaire pour le scroll vertical */
/*}*/



/*@media (hover: hover) and (pointer: fine) {
    .card-dash:hover {
        transform: translateY(-8px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        filter: brightness(1.1);
    }

        .card-dash:hover img,
        .card-dash:hover span {
            transform: rotate(10deg) scale(1.1);
        }
        .card-dash:hover .badge-new {
            transform: scale(1.1);
        }
}*/

@media (max-width: 480px) {
    .card-dash, .card-dash-double {
        height: 14rem;
        margin: 1rem 0.5rem;
    }

    .title-card-dash {
        font-size: 1.4rem;
    }

    .count {
        font-size: 2rem;
    }
}


/* Badge "Nouveau" en haut à droite - pour card-dash (point Info)  */
.badge-new {
    position: absolute;
    top: 8px;
    right: 12px;
    background-color: #e03e3e; /* rouge vif */
    color: white;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 12px;
    box-shadow: 0 0 6px rgba(224, 62, 62, 0.7);
    animation: pulse 2.5s infinite ease-in-out;
    pointer-events: none; /* pour que le badge ne gêne pas le clic */
}

/* Animation pulsation douce */
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 6px rgba(224, 62, 62, 0.7);
    }

    50% {
        box-shadow: 0 0 12px rgba(224, 62, 62, 1);
    }
}

/*.card-dash {
    width: 18rem;
    height: 18rem;
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    border-radius: 0.5rem;
    color: #fff;
    margin: 2rem 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); 
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    text-align: center;
}



.card-dash-double {
    width: auto;
    height: 18rem;
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    border-radius: 0.5rem;
    color: #fff;
    margin: 2rem 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); 
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    text-align: center;
}

    .card-dash a, .card-dash-double a {
        color: #fff;
        text-decoration: none;
        display: block;
        height: 100%;
        width: 100%;
    }

.title-card-dash {
    font-weight: 800;
    font-size: 1.8rem;
    margin-top: 1rem;
}

.count-title {
    font-size: 1.2rem;
}

.count {
    font-size: 2.5rem;
    font-weight: bold;
}



@media (hover: hover) and (pointer: fine) {
    .card-dash:hover {
        transform: translateY(-8px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        filter: brightness(1.1);
    }

    .card-dash img,
    .card-dash span {
        transition: transform 0.4s ease;
    }

    .card-dash:hover img,
    .card-dash:hover span {
        transform: rotate(10deg);
    }
}
*/

    /**********************************/
    /* Class menu déroulant (profil & chantier) */
    /**********************************/


    .info-user {
        width: auto;
        height: 6rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-grow: 1;
        padding: 1rem 0.5rem 0 0.5rem;
        cursor: pointer;
    }

    .btn-profil {
    }

    .container-menu {
        width: auto;
        height: auto;
        min-height: 7rem;
        max-height: 30rem;
        position: absolute;
        top: 6rem;
        right: 0;
        border-left: #77A6F7 3px solid;
        border-bottom: #77A6F7 3px solid;
        color: #3a0648;
        background-color: #2ebaf9;
        z-index:900;
    }

    /**********************************/
    /* Class dédié modal addDoc */
    /**********************************/
    .form-modal {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1.2rem;
        font-size: 0.95rem;
    }

    .form-header {
        display: flex;
        gap: 0.8rem;
        align-items: flex-start;
    }

    .form-infos {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .text-muted {
        font-size: 0.85rem;
        color: #666;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .form-actions {
        display: flex;
        justify-content: flex-end;
        margin-top: 1rem;
    }

    .btn-primary {
        padding: 0.5rem 1rem;
        font-weight: bold;
        border: none;
        background-color: #3b82f6;
        color: white;
        border-radius: 4px;
        cursor: pointer;
    }


    /**********************************/
    /* Class dédié modal download */
    /**********************************/

    .modal-overlay {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }

    .modal-content {
        background-color: #fff;
        padding: 24px;
        border-radius: 8px;
        width: 90%;
        max-width: 500px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        animation: fadeIn 0.2s ease-in-out;
    }

    .modal-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 20px;
    }

        .modal-actions button {
            padding: 8px 16px;
            border: none;
            border-radius: 5px;
            /*background-color: #eee;*/
            cursor: pointer;
        }

            .modal-actions button:hover {
                background-color: #ddd;
                transition: background-color 0.9s ease;
            }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: scale(0.95);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }


    /*************************/
    /* css pour composant doc chantier : FileListToChantier */
    /* Style du bouton déplier/replier */
    /*************************/

    button.btn-link {
        color: #007bff; /* bleu bootstrap */
        text-decoration: none;
        padding: 0 0.5rem;
        border: none;
        background: transparent;
        cursor: pointer;
    }

        button.btn-link:hover {
            text-decoration: underline;
            color: #0056b3; /* bleu un peu plus foncé au survol */
        }

    /* Style de l'entête de l'étape */
    .container-doc h5 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    /* Un peu d’espace à gauche des boutons dans les listes */
    .container-row.j-start .container-col.cursor-pointer img {
        transition: transform 0.3s ease;
    }

    .container-row.j-start .container-col.cursor-pointer:hover img {
        transform: scale(1.1);
    }

    /* Ajout d’une petite marge sur le badge "Nouveau" */
    .badge.bg-success {
        font-size: 0.8rem;
        padding: 0.2rem 0.4rem;
    }

    .container-doc {
        margin-bottom: 2rem;
        padding: 1rem;
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .container-row.border-blue-dark {
        border: 1px solid #007BFF;
        border-radius: 8px;
        background-color: #fff;
        transition: background 0.2s ease;
    }

        .container-row.border-blue-dark:hover {
            background-color: #f0f8ff;
        }

    /***************************/

    /* Style dédié au button Home (TaskBar) */
    .home-label {
        color: white;
        font-weight: 500;
        font-size: 1rem;
        display: none; /* Affiche le texte uniquement au survol ou sur grand écran */
    }

    .hover-scale:hover .home-label {
        display: inline;
    }

    .hover-scale {
        transition: transform 0.2s ease-in-out;
    }

        .hover-scale:hover {
            transform: scale(1.05);
        }

    /*********************/
    /***** style dédié à la signature doc xlsx ****/
    .signature-label {
        font-weight: bold;
        font-style: italic;
        color: #555;
        border: 1px solid #ccc;
    }

    .signature-style {
        font-weight: bold;
        font-size: 1.4rem;
        color: #1a237e;
        border: 1px solid #1a237e;
    }

    .htCenter.header-title {
        font-size: 1.2rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .htCenter {
        text-align: center !important;
    }

    .header-title {
        font-weight: bold;
        background-color: #3f51b5;
        color: white;
        text-align: center;
    }
    /*********************/
    /*********************/
    /***** RESPONSIVE ****/
    /*********************/
    /*********************/

    /* Petit format */
    @media (max-width: 1249px) {

        /* Class liées composants LOGIN */
        .container-login {
            width: 70%;
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
        }

        .logo-CA-login {
            width: 16rem;
            height: auto;
            align-items: center;
            margin: 1rem;
        }
        /***************************/

    }


    /***************************/
    /***************************/
    /***************************/


    /* Grand format */
    @media (min-width: 1250px) {

        /* Class liées composants LOGIN */
        .container-login {
            width: 40%;
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
        }

        .logo-CA-login {
            width: 16rem;
            height: auto;
            align-items: center;
            margin: 1rem;
        }
        /***************************/
    }

    /* === Responsive tablette Samsung Galaxy A7 (2000x1200) === */
    @media (min-width: 768px) and (max-width: 1280px) {
        .container-form-add,
        .container-form-add-medium,
        .container-form-add-big {
            width: 90% !important;
        }

        .part-card,
        .part-card-conf,
        .part-card-error,
        .part-card-ticket {
            width: 100%;
            margin: 1rem 0.5rem;
        }

        .page-twopart {
            width: 100%;
            padding: 1rem;
        }

        .container-row {
            flex-direction: row;
        }

        .btnedit, .btndelete {
            width: 8rem;
            height: 8rem;
        }

            .btnedit img, .btndelete img {
                height: 2rem;
                padding-top: 1rem;
            }
    }

    /* Style filtre LogConnect */
.container-row.flex-wrap {
    flex-wrap: wrap;
    gap: 1rem;
}

.align-center {
    align-items: center;
}

.marginR1 {
    margin-right: 1rem;
}

.gap1 > * {
    margin-right: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-right: 1rem;
    min-width: 150px;
}

    .form-group label {
        color: #009adf;
        margin-bottom: 0.25rem;
        font-weight: bold;
    }

.form-actions {
    display: flex;
    align-items: center;
}

input[type="date"],
select,
button {
    padding: 0.4rem 0.6rem;
}


/* Wrapper flex pour champ password + bouton */

.password-wrapper {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
}

    /* neutralise le width:100% et display:block globaux */
    .password-wrapper .password-field {
        flex: 1; /* prend l’espace restant */
        width: auto; /* ignore le 100% global */
        display: inline-block;
        height: 3rem;
        border-radius: 0.3rem;
        border: 1px solid #3a0648;
        font-size: 0.9rem;
        color: #444;
    }

    .password-wrapper .password-toggle-btn {
        display: inline-block;
        height: 3rem;
        max-width : 3rem;
        padding: 0 0.5rem;
        /*border: 1px solid #3a0648;*/
        /*border-radius: 0.3rem;*/
        background: #fff;
        cursor: pointer;
    }


/* Button switch dans (addDocumentBase) */


/* Container du switch */
.switch {
    position: relative;
    display: inline-block;
    width: 75px;
    height: 42px;
}

    /* Masque le checkbox natif */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* Slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-warning);
    transition: 0.4s;
    border-radius: 42px;
}

    /* Bouton rond */
    .slider:before {
        position: absolute;
        content: "";
        height: 33px;
        width: 33px;
        left: 5px;
        bottom: 5px;
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
    }

/* Quand activé */
.switch input:checked + .slider {
    background-color: var(--color-success);/* vert par défaut */
}

    .switch input:checked + .slider:before {
        transform: translateX(33px);
    }

/* Optionnel : coins arrondis */
.slider.round {
    border-radius: 42px;
}