/* Variables globales */
/*      utiliser les vars ? : var(--nom-variable) */
:root {
    --couleur-vert-clairclair: #ecf3da;    
    --couleur-vert-clair: #b1c489;
    --couleur-vert-fonce: #008000;
    --couleur-bleu-fonce: #034593;
}

/* #region - 1 - RESET ET BASE
=============================== */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
    font-family: MarianneFont, sans-serif;
}

body {
    margin-bottom: 60px;
    background-color: white !important; /*#e9e9ed*/
    font-family: MarianneFont, sans-serif;
}

.body-content {
    padding-top: 60px;
    font-family: MarianneFont, sans-serif;
}

.bodyprincipal {
    margin-top: 20px;
    margin-bottom: 70px;
}


/* #endregion
=============================== */

.legend {
    background-color: white;
    padding: 5px; /* Optionnel : pour un peu d'espace autour du contenu */
    border-radius: 4px; /* Optionnel : pour arrondir les coins */
}

/* #region - 2 - TYPOGRAPHIE
=============================== */

@font-face {
    font-family: 'MarianneFont';
    src: url('/fonts/Marianne-Regular.woff') format('woff'), url('/fonts/Marianne-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    margin-bottom: 0.5em;
    font-family: MarianneFont, sans-serif;
}

p {
    margin-bottom: 1em;
    font-size: 12pt;
    color: black;
    font-family: MarianneFont, sans-serif;
}

/* #endregion
=============================== */




/* #region - 3 - HEADER
=============================== */

.obs-banner {
    background-size: cover;
    background-position: center;
    background-image: url(/img/banner1.jpg) !important;
    height: 30vh; /* Pour occuper toute la hauteur de l'écran 100vh*/
    position: relative;
}

.categorie_schemadir {
    color: #6c757d;
    font-weight: 800;
}
/* #endregion
=============================== */
/* #region - 4 - MENU / NAVIGATIONS
=============================== */
.navbar-nav {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

/*.dropdown-menu {
    max-width: 100vw;*/ /* Ne dépasse jamais l’écran */
    /*overflow-x: auto;*/ /* Scrolling horizontal uniquement à l'intérieur si nécessaire */
    /*white-space: nowrap;*/ /* Empêche le retour à la ligne si les items sont longs */
/*}*/




/* Taille fixe pour le premier et dernier bouton */
.nav-item.fixed-width {
    flex: 0 0 150px; /* Taille fixe de 150px, ajustez selon vos besoins */
    text-align: center;
}

/* Boutons du milieu qui s'adaptent */
.nav-item.grow-width {
    flex: 1 1 auto; /* Les boutons du milieu prennent tout l'espace disponible */
    text-align: center;
}

/* Style optionnel pour uniformiser les boutons */
.nav-item a.nav-link {
    display: block;
    padding: 10px 15px;
    white-space: nowrap; /* Empêche le texte de se casser */
    text-align: center;
}

.navbar-brand {
    /*min-height: 80px;*/
    color: white;
}

#navSousMenu {
    /*background-color: #e4edcf !important;*/
    background-color: white;
    /*background-image: url("../../Content/img/header-background.png") !important;*/
}

.navbar-observatoire {
    /*background-image: url(/img/banner.JPG) !important;*/
    background-size: cover !important;
    background-color: rgb(255,255,255) !important;
    padding: 0px;
    margin: 0px;
}

li.nav-item:hover {
    font-weight: bold;
}

img.menu-compte-image:hover {
    background-color: hsl(0deg 2.21% 35.13% / 20%);
}

.nav-item-premier {
    background-color: #46b1e1;
    color: white;
}

.nav-item-normal {
    background-color: #156082;
    color: white;
}

.nav-item-compte {
    background-color: #00b050;
    color: white;
}

#intro-example {

}
/* #endregion
=============================== */
/* #region - 5 - BODY / PARTIE PRINCIPALE
=============================== */
h1 {
    color: #156082;
    text-wrap: auto;
    font-size: 24px;
    margin-bottom: 2em;
}

h2 {
    color: #156082;
    text-wrap: auto;
    font-size: 18px;
    margin-bottom: 1em;
}

/* Pour que les select2 utilisants le padright fonctionnent bien */
.select2-results__option {
    font-family: monospace;
    /*white-space: pre;*/
}

.select2-selection__rendered {
    font-family: monospace;
    /*white-space: pre;*/
}

.select2.select2-container.select2-container--classic {
    padding-left: 0 !important;
}

.select2-container--classic.select2-container--focus {
    padding-left: 0 !important;
}
.select2-container--classic.select2-container--below {
    padding-left: 0 !important;
}

/* Conteneur des boutons */
.index-button-container {
    text-align: center;
}


    .index-button-container .btn {
        background-color: #46b1e1;
        margin-right: 20px;
        width: 160px;
    }

        .index-button-container .btn.selected {
            background-color: #156082 !important;
            color: white;
        }

        .index-button-container .btn:hover {
            background-color: #156082;
            color:white;
        }

        /* Style spécifique pour le bouton "PRESENTATION" */
        .index-button-container .btn.presentation {
            font-weight: bold;
            background-color: #46b1e1; /* Couleur différente */
            width: 180px; /* Un peu plus large */
            padding: 5px; /* Plus de padding pour le rendre plus visible */
            border: 2px solid #156082; /* Bordure pour accentuer */
        }

            .index-button-container .btn.presentation:hover {
                background-color: #156082;
                color: white;
            }
.card {
    /*background-color: white;*/
    background: linear-gradient(to bottom, #f0f9ff 25%, #ffffff 75%); /* Dégradé clair */
    border-radius: 25px !important;
    /*border-collapse: separate;*/
    border: 1px solid #808080;
    margin-bottom: 10px;
    padding: 20px;
    box-shadow: 5px 5px 5px 0px #9BA09A;
    transition: transform 0.3s, box-shadow 0.3s;
}

    .card p {
        margin-top: 0pt;
        margin-bottom: 10pt;
        text-align: justify;
        text-justify: inter-word;
        font-size: 14pt;
        color: black;
        vertical-align: baseline;
    }

    .card:hover {
        /*transform: translateY(-2px);*/
        box-shadow: 0 8px 12px rgb(0 0 0 / 82%);
    }

.card-titre {
    color: #034593 !important;
    font-size: 16pt;
    font-weight: bold;
    border-bottom: 1px solid #034593;
}
.clickable-icon {
    cursor: pointer;
}

#pdfCanvas {
    border: 2px solid #000; /* Bordure noire de 2px */
    border-radius: 5px; /* Coins arrondis */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3); /* Ombre légère */
    margin-top: 10px; /* Espacement */
    background: white; /* Fond blanc pour contraste */
}



#divMessageEnvoye {
    color: #28a745; /* Vert Bootstrap */
    background-color: #e9f7ef; /* Vert clair */
    border: 1px solid #c3e6cb;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 15px;
    display: none; /* Masqué par défaut */
}

.readonly-field {
    background-color: #e9ecef; /* Couleur de fond grisée */
    color: #6c757d; /* Couleur du texte grisé */
    cursor: not-allowed; /* Changement du curseur pour indiquer l'état non modifiable */
}

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
    opacity: 1 !important;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 220px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 5px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 125%; /* Positionne le tooltip au dessus du texte */
        left: 50%;
        margin-left: -110px; /* Utilise la moitié de la largeur pour centrer le tooltip */
        opacity: 0;
        transition: opacity 0.3s;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }




/* ENGAGEMENTS */

.accordion-button {
    background-color: #b1c489;
    color: black;
}
.accordion-button:not(.collapsed) {
    background-color: #cadba4;
    color: black;
}


.list-group-item-vert {
    background-color: #e4edcf;
}

.ligne-engagement:hover {
    background-color: #1e7ce1;
}

.cadre-engagement-uniques {
    border-color: black;
    border-style: dashed;
    background-color: #ecf3da; /* vert très léger */
    padding: 4px;
}

.btn-superviseur-non-declare {
    background: none; 
    border: none; 
    padding: 0; 
    font-size: 24px;
    color:black;
    cursor: pointer;
}

.btn-superviseur-declare-ok {
    background: none;
    border: none;
    padding: 0;
    font-size: 24px;
    color: green;
    cursor: pointer;
}

.btn-superviseur-declare-ko {
    background: none;
    border: none;
    padding: 0;
    font-size: 24px;
    color: red;
    cursor: pointer;
}



/*.tableau_superviseur_engagements th:first-child,
.tableau_superviseur_engagements td:first-child {
    position: sticky;
    left: 0;
    background: white;*/ /* ou une autre couleur de fond pour éviter que ce soit transparent */
    /*z-index: 1;*/ /* pour qu’elle passe au-dessus des autres cellules */
    /*box-shadow: 2px 0 5px rgba(0,0,0,0.1);*/ /* optionnel, pour effet de séparation */
/*}*/

/* permet le sticky propre, évite les “fentes” blanches */
.tableau_superviseur_engagements {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
}

    /* on colle tête + cellules gelées au-dessus du reste */
    .tableau_superviseur_engagements thead th {
        position: sticky;
        top: 0;
        z-index: 5;
    }

    /* classe appliquée par le script aux 3 premières colonnes */
    .tableau_superviseur_engagements .freeze {
        position: sticky;
        background: #fff;
        z-index: 8;
    }

    /* Bordures internes visibles */
    .tableau_superviseur_engagements th,
    .tableau_superviseur_engagements td {
        border: 0.8px solid black; /* lignes visibles */
        padding: 6px 8px;
    }

.tableau_superviseur_engagements th {
    background-color: #b1c489 !important;
    text-align: center;
    text-wrap: balance;
    font-weight: 500;
}

.tableau_superviseur_engagements .colonne-paire {
    background-color: #b1c489 !important;
}

.tableau_superviseur_engagements .colonne-impaire {
    background-color: #a1b080 !important;
}



/*    .tableau_superviseur_engagements th:hover {
        background-color: #909e72 !important;
        cursor: pointer;
    }*/


/* LEXIQUE */

.lexique-mot {
    margin-top: 0pt;
    margin-bottom: 10pt;
    text-align: justify;
    text-justify: inter-word;
    font-size: 14pt;
    color: #034593;
    vertical-align: baseline;
    font-weight: bold;
}

.lexique-definition {
}





.btn.btn-telecharger-rapport {
    background-color: #4f5e37;
    color: white;
    min-width: 145px;
    text-align:center
}

.btn-outline-primary {
    color: white; 
    background-color: #156082;
    border-color: black; /* Nouvelle couleur de bordure */
}

    .btn-outline-primary:hover {
        color: white; /* Couleur de texte au survol */
        background-color: #46b1e1; /* Nouvelle couleur de fond au survol */
        border-color: black; /* Couleur de bordure au survol */
    }

.btn-outline-primary:focus, .btn-outline-primary.active {
    color: white;
    background-color: #004085; /* Couleur d'arrière-plan au focus/active */
    border-color: #004085;
    box-shadow: 0 0 0 0.2rem rgba(0, 56, 144, 0.5); /* Ombre personnalisée */
}




/* LOGIN */
.logincontainer {
    max-width: 500px;
    margin: 0 auto; /* Center the form */
    background-color: #f9f9f9; /* Light background */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

    .logincontainer input[name="username"] {
        text-align: center;
    }

    .logincontainer input[name="password"] {
        text-align: center;
    }


/* #endregion
=============================== */
.stepper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    position: relative;
}

.step {
    flex: 1;
    text-align: center;
    position: relative;
}

    .step::before {
        content: '';
        position: absolute;
        top: 50%;
        left: -50%;
        width: 100%;
        height: 2px;
        background-color: #ccc; /* Couleur par défaut pour les étapes non terminées */
        z-index: 0;
    }

    .step:first-child::before {
        content: none; /* Supprime la ligne pour la première étape */
    }

    .step .circle {
        width: 40px;
        height: 40px;
        margin: 0 auto;
        background-color: #ccc; /* Couleur des étapes non atteintes */
        border-radius: 50%;
        line-height: 40px;
        font-weight: bold;
        z-index: 1;
        position: relative;
        color: #000; /* Texte noir par défaut */
        border: 2px solid transparent; /* Bordure pour styliser */
    }

    /* Étapes terminées (précédant l'étape active) */
    .step.completed .circle {
        background-color: #007bff; /* Vert pour les étapes terminées */
        color: #fff;
        border: 2px solid #007bff;
    }

    .step.completed::before {
        background-color: #007bff; /* Ligne verte pour étapes terminées */
    }

    /* Étape active */
    .step.active .circle {
        background-color: #007bff; /* Bleu pour l'étape active */
        color: #fff;
        border: 2px solid #007bff;
    }

    .step.active::before {
        background-color: #007bff; /* Ligne bleue avant l'étape active */
    }

    /* Étapes futures (après l'étape active) */
    .step.active ~ .step .circle {
        background-color: #ccc; /* Gris pour étapes futures */
        color: #000;
        border: 2px solid #ccc;
    }

    .step.active ~ .step::before {
        background-color: #ccc; /* Ligne grisée après l'étape active */
    }


.tr-stats-groupe-categorie {
    background-color: #d8e0e7;
}

.td-stats-titre {
    background-color: #d8e0e7;
    font-weight: 500;
}

.td-stats-col-light {
    background-color: #f5f7f9;
}

.td-avec-nombre {
    text-align:right;
}

.readonly-textbox {
    background-color: #e9ecef; /* Couleur de fond grisée */
    /*color: #6c757d;*/ /* Couleur du texte un peu grisée */
    border-color: #ced4da; /* Bordure légère */
}

.contact-container {
    max-width: 700px;
    margin: 50px auto;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 30px;
    background-color: #d8e0e7;
}

.mentions-container {
    max-width: 1000px;
    margin: 50px auto;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 30px;
    background-color: #d8e0e7;
}

.cgu-container {
    max-width: 1000px;
    margin: 50px auto;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 30px;
    background-color: #d8e0e7;
}

.address {
    margin-left: 30px;
    font-style: italic;
    color: #495057;
    line-height: 1.6;
}

.td-table-center {
    text-align: center;
    vertical-align: middle;
    overflow:hidden;
}
.td-table-center button {
    width: 100%; /* Remplit toute la largeur disponible */
    height: auto; /* Pour s'assurer que le bouton n'est pas trop haut */
    display: inline-flex; /* Utilise inline-flex pour centrer l'icône */
    justify-content: center; /* Centre horizontalement le contenu du bouton */
    align-items: center; /* Centre verticalement le contenu du bouton */
}

.td-table-left {
    text-align: left;
    vertical-align: middle;
    overflow: hidden;
}

.td-table-number {
    text-align: right;
    vertical-align: middle;
}

.td-explication {
    font-size: small;
    font-style: italic;
    text-align: end;
    color: grey;
    vertical-align: middle;
}



.tableau_decl_culture th {
    background-color: #b1c489 !important;
}

    .tableau_decl_culture th:hover {
        background-color: #909e72 !important;
        cursor: pointer;
    }

.tableau_decl_irrigation th {
    background-color: #b1c489 !important;
    text-align: center;
    text-wrap: balance;
    font-weight: 500;
}

.tableau_decl_irrigation th:hover {
    background-color: #909e72 !important;
    cursor: pointer;
}

.truncate {
    white-space: nowrap; /* Empêche le texte de se diviser en plusieurs lignes */
    overflow: hidden; /* Cache le texte qui dépasse */
    text-overflow: ellipsis; /* Ajoute des points de suspension (...) à la fin du texte */
    max-width: 150px; /* Ajustez la largeur de la cellule selon vos besoins */
    display: inline-block; /* Nécessaire pour que l'effet fonctionne */
}


.text-italic-petit p
{
    font-style:italic;
    font-size:medium;
}




.td-mini {
    width: 1%;
    white-space: nowrap; /* Empêche la colonne de s'étendre */
}

.font-weight-bold
{
    font-weight:bold;
}

.td-milieu-h-v
{
    vertical-align: middle;
    text-align: center;
}

.form-cultures option {
    font-family: monospace; /* Police à largeur fixe */
    white-space: pre; /* Respecter les espaces dans le texte */
}

.custom-culture-selector {
    /*max-width: 400px;*/
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.custom-culture-selector .form-select {
    height: auto; /* Permet de gérer dynamiquement la hauteur */
}

.custom-culture-selector input::placeholder {
    font-style: italic;
    color: #aaa;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
    background-color: #156082;
    color:white;
}

.footer a {
    color: white !important;
}
/*-------------------*/
/* PARTIE RESPONSIVE */
/*-------------------*/



/* Smartphones en portrait */
@media (max-width: 480px) {
    .tableau_decl_culture {
        grid-template-columns: repeat(11, 1fr);
        font-size: 10px;
    }


    /* Style des masques */
    .mask {
        position: absolute;
        width: 80%; /* Largeur du masque */
        left: 50%;
        transform: translateX(-50%);
    }

    /* Premier masque */
    .mask-top {
        top: 25%; /* Ajuster à 60% de la hauteur de la bannière */
        padding: 5px;
        vertical-align: central;
        font-size:10px;
    }

    /* Deuxième masque */
    .mask-bottom {
        top: 55%; /* Chevauche légèrement la bannière */
        z-index: 10; /* Priorité d'affichage au-dessus */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre */
        border-radius: 15px; /* Arrondi des coins */
        padding: 10px;
        font-size: 10px;
    }
}

/* Smartphones en paysages et tablettes ou très petit écran ordinateur */
@media (min-width: 481px) and (max-width: 1024px) {
    .tableau_decl_culture {
        grid-template-columns: repeat(11, 1fr);
        font-size: 12px;
    }

    /* Style des masques */
    .mask {
        position: absolute;
        width: 80%; /* Largeur du masque */
        left: 50%;
        transform: translateX(-50%);
    }

    /* Premier masque */
    .mask-top {
        top: 30%; /* Ajuster à 60% de la hauteur de la bannière */
        padding: 5px;
        vertical-align: central;
    }

    /* Deuxième masque */
    .mask-bottom {
        top: 45%; /* Chevauche légèrement la bannière */
        z-index: 10; /* Priorité d'affichage au-dessus */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre */
        border-radius: 15px; /* Arrondi des coins */
        padding: 20px;
        
    }
}

/* Ordinateurs */
@media (min-width: 1025px) {
    .tableau_decl_culture {
        grid-template-columns: repeat(11, 1fr);
        font-size: 14px;
    }


    /* Style des masques */
    .mask {
        position: absolute;
        width: 80%; /* Largeur du masque */
        left: 50%;
        transform: translateX(-50%);
    }

    /* Premier masque */
    .mask-top {
        top: 40%; /* Ajuster à 60% de la hauteur de la bannière */
        padding: 5px;
        vertical-align: central;
    }

    /* Deuxième masque */
    .mask-bottom {
        top: 55%; /* Chevauche légèrement la bannière */
        z-index: 10; /* Priorité d'affichage au-dessus */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre */
        border-radius: 15px; /* Arrondi des coins */
        padding: 20px;
    }

}