/* Setting-ProgicielCA-v1.0.0.css 
  Projet Progiciel CA =>  v1.0.0 */

/* ================================
   FICHIER CSS NECESSAIRES 
    - LibFusion - v1.0.0
    - responsive (tablette uniquement)
    - MainLayout.razor.css
================================= */



/* ================================
   PALETTE GENERIQUE & TYPOGRAPHIE
================================= */
:root {
    /* Couleurs Primaires */
    --color-primary: #009adf; /* Couleur principale (équivalent CTA) */
    --color-primary-hover: #2ebaf9;
    --color-primary-active: #E3752B;
    --color-text-primary: var(--color-white);
    --color-border-primary: #77A6F7;
    /****************************/
    /* RADIUS */
    --radius: 0.3rem;
    --radius-double: 0.6rem;
    --radius-xxl: 4rem;
    --radius-circle: 100%;
    /* Couleurs de Texte */
    --color-text-body: #2d2d2d; /* Texte principal (était --color-txt-primary) */
    --color-text-dark: #333;
    --color-text-on-light: #3a0648; /* Texte sur fond clair (était --color-VS) */
    --color-white: #ffffff;
    --color-text-link: var(--color-primary);
    --color-text-button: var(--color-white);
    /****************************/
    /* Couleurs Fonctionnelles */
    --color-disabled: #cccccc;
    /* SUCCESS */
    --color-success: #41cd01;
    --color-success-hover: #6ee82f;
    /* ERROR - WARNING */
    --color-warning: #ffc711;
    --color-warning-light: lightyellow;
    --color-error: #ee2410;
    --color-error-hover: #f5533c;
    /* Couleurs de Fond / Accents */
    --color-background-light: #edf1fa;
    --color-accent-light: #d3e3fd; /* Utilisé pour les bordures claires */
    --color-background-grey: #2d2d2d; /* Fond spécifique au gris foncé de LIB2 */
    --color-background-panel: #f9faff;
    --shadow-card-light: 0 2px 10px rgb(0 0 0 / 0.05);
    --shadow-card-hover: 0 4px 15px rgb(0 0 0 / 0.12);
    /* MODAL */
    --color-backdrop: rgba(0,0,0,0.4);
    --shadow-modal: 0 4px 12px rgba(0,0,0,0.3);
    /* AUTRES */
    --color-info: #2488f5;
    --color-grey: #444444;
    --color-anthracite: #303030;
    --color-blue-light: #E7ECF3;
    --color-blue-clear: #2ebaf9;
    --color-violet: #3a0647;
    --color-green: #26b050;
    /****************************/
    /* INPUT */
    --inputWidthNormal: 3rem;
    --inputWidthDouble: 6rem;
    --inputWidthTriple: 9rem;
    --color-text-input: var(--color-grey);
    /****************************/
    /* 1. Définir les variables de police (nom) */
    /* * ⚠️ TYPOGRAPHIE : A MODIFIER PAR PROJET
     * La valeur de cette variable définit la font-family utilisée par toutes les classes.
     * La source (@font-face) doit être définie séparément.
     */
    --TypoSize-default: 16px;
    --TypoSize-tablette: 14px;
    --TypoSize-mobile: 12px;
    /* Familles de Polices (À mettre à jour avec les noms réels des @font-face) */
    --font-family-base: 'Montserrat','Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-family-secondary: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ================================
            POLICES
================================= */

/* 2. Définir les @font-face (source) */


/* POLICE MAJEUR */

/* Montserrat ExtraLight (200) */
@font-face {
    font-family: 'Montserrat'; /* Doit correspondre à --font-family-base */
    src: url('../font/Montserrat/Montserrat-ExtraLight.woff2') format('woff2'), url('../font/Montserrat/Montserrat-ExtraLight.woff') format('woff'), url('../font/Montserrat/Montserrat-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

/* Montserrat Regular (400) */
@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat/Montserrat-Regular.woff2') format('woff2'), url('../font/Montserrat/Montserrat-Regular.woff') format('woff'), url('../font/Montserrat/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Montserrat Bold (700) */
@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat/Montserrat-Bold.woff2') format('woff2'), url('../font/Montserrat/Montserrat-Bold.woff') format('woff'), url('../font/Montserrat/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* POLICE MINEUR */

/* Poppins SemiBold (600) */
@font-face {
    font-family: 'Poppins';
    src: url('../font/Poppins/Poppins-SemiBold.woff2') format('woff2'), url('../font/Poppins/Poppins-SemiBold.woff') format('woff'), url('../font/Poppins/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


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

.helperInfo span {
    display: none;
    color: #fff;
    background: rgba(51,51,51,0.95);
    padding: 20px;
    border-radius: var(--radius);
    -moz-border-radius: var(--radius);
    -webkit-border-radius: var(--radius);
    width: 110px;
    text-align: center;
    position: fixed;
    z-index: 1200;
}

.helperInfo:hover span {
    display: block;
}

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

.spe-conf {
    width: 100%;
    height: auto;
    background-color: var(--color-background-light);
    border-radius: var(--radius-xxl);
    vertical-align:top;
    /*margin: 0 0 2rem 2rem;*/
}

.sub-title {
    font-size: 1.6rem;
    font-weight: 100;
    flex-grow: 1;
    color: var(--color-text-on-light);
    margin-left: 2rem;
}

.info-conf {
    padding: 0.25rem 0 0 0;
    font-size: 1.5rem;
    color: var(--color-text-on-light);
}

.sub-info-conf {
    padding: 0.25rem 0 0 0;
    font-size: 1rem;
    color: var(--color-text-on-light);
}


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

/*.container-filter {
    position: fixed;
    top: 10rem;
    right: 0.5rem;
    border-top: solid var(--color-white) 2px;
}*/

.container-form-add {
    width: 22%;
    height: auto;
    border: var(--color-accent-light) 2px solid;
    border-radius: var(--radius);
    padding: 2rem;
    margin: 1rem auto;
}

.container-form-add-medium {
    width: 40%;
    height: auto;
    border: var(--color-accent-light) 2px solid;
    border-radius: var(--radius);
    padding: 3rem;
    margin: 1rem auto;
}

.container-form-add-big {
    width: 80%;
    height: auto;
    border: var(--color-accent-light) 2px solid;
    border-radius: var(--radius);
    padding: 4rem;
    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);
}

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

.page-twopart {
    width: 50%;
    height: auto;
    padding: 2rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: var(--color-background-light);
    color: var(--color-text-on-light);
    text-align: center;
}


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

.part-card {
    width: 33rem;
    height: auto;
    padding: 0.5rem 1rem;
    margin: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border: solid var(--color-accent-light) 3px;
    background-color: var(--color-background-light);
    color: var(--color-text-on-light);
    text-align: center;
    border-radius: var(--radius);
}


.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: var(--color-text-on-light);
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }



/* Spe Card page configuration */

.part-card-conf {
    width: 20rem;
    height: auto;
    padding: 0.5rem 1rem;
    margin: 2rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border: solid var(--color-accent-light) 3px;
    background-color: var(--color-background-light);
    color: var(--color-text-on-light);
    text-align: center;
    border-radius: var(--radius);
}


.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 var(--color-accent-light) 3px;
    background-color: var(--color-background-light);
    color: var(--color-text-on-light);
    text-align: left;
    border-radius: var(--radius);
}


/* 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 var(--color-accent-light) 3px;
    background-color: var(--color-background-light);
    color: var(--color-text-on-light);
    text-align: left;
    border-radius: var(--radius);
}

.ticket-user-actif {
    width: 40%;
    height: auto;
    border: var(--color-text-on-light) 2px solid;
    border-radius: var(--radius);
    padding: 1rem 1.5rem;
    margin: 1rem auto;
    background-color: white;
}

.ticket-user-inactif {
    width: 40%;
    height: auto;
    border: var(--color-text-on-light) 2px solid;
    border-radius: var(--radius);
    padding: 1rem 1.5rem;
    margin: 1rem auto;
    background-color: ghostwhite;
}


/* Style STATUT CHANTIER (fil) */

.container-statut {
    padding-bottom: 1rem;
    border-bottom: solid var(--color-accent-light) 4px;
    border-top: solid var(--color-accent-light) 4px;
}

.state-chantier-on {
    width: 2rem;
    height: 2rem;
    font-size: 1.5rem;
    border-radius: var(--radius-circle);
    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: var(--radius-circle);
    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 var(--color-accent-light) 4px;
}


/* Class Elements Dashboards */


.statutpointOn {
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-circle);
    background-color: forestgreen;
    margin: 0.25rem 0.5rem 0 0;
}

.statutpointOff {
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-circle);
    background-color: red;
    margin: 0.25rem 0.5rem 0 0;
}

.statutpointOrange {
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-circle);
    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;
}



/* 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);
    }
}



/* 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: var(--radius-double);
    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);
    }
}

    /**********************************/
    /* 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: 6rem;
    max-height: 100vh -5.5rem;
    position: absolute;
    top: 5.5rem;
    right: 4px;
    border-left: var(--color-border-primary) 3px solid;
    border-bottom: #77A6F7 3px solid;
    color: var(--color-text-on-light);
    background-color: #2ebaf9;
}

    /**********************************/
    /* 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-actions {
        display: flex;
        justify-content: flex-end;
        margin-top: 1rem;
    }

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

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


    /*************************/
    /* css pour composant doc chantier : FileListToChantier */
    /*************************/

    /* 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;
    }


/* Class liées composants LOGIN */

.background-identity {
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(40deg, rgb(5, 39, 103) 25%, #3a0648 70%);
}


.container-login {
    width: 40%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.title-login h1 {
 color: var(--color-white);
}


.container-logo-CA-login {

}


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



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



.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 var(--color-text-on-light);
        font-size: 0.9rem;
        color: #444;
    }

/*    .password-wrapper .password-toggle-btn {
        display: inline-block;
        height: 3rem;
        max-width : 3rem;
        padding: 0 0.5rem;
        background: #fff;
        cursor: pointer;
        border:none;
    }
*/
/*****************************************/
/* 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;
}

/* Composant Profil */
.text-helloProfil {
    display: flex;
    flex-direction: row;
    justify-content: center;
    min-width:10vw;
    max-width:15vw;
}

.toolBarChantier {
    margin-top: 0;
}




/****************************************************/
/* HOVER AVANCÉ (POINTEUR FIN / DESKTOP UNIQUEMENT) */
/****************************************************/

/* Ces effets de translation et d'ombre ne s'appliquent que si une souris est détectée. */
@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);
    }
}