/****************** index *******************/

body{
    
    margin:auto;
    font-size:25px;
    width:100%;  
}

/*HEADER*/
#entete{
    display:flex;
    justify-content: space-around;
    margin: 50px;
}
/*NAVIGATION*/
#menu_contenu{
    display:flex;
     justify-content: space-between;
    
     margin:50px;   
     width: 90%;
     margin:auto;
}

.menu_content{
    background-color: rgb(154, 247, 185);
    padding:10px;
    font-weight:bold;
    font-size:0.8em;
}

#menu_contenu a{
   text-align:none;
}

a:hover{
    text-align:none;
}

/* TITRE PAGE DE GARDE*/
#grand_titre{
    text-align:center;
    width: 90%;
    margin:auto;

    background-color: black;
    color: white;  
   
    text-transform: uppercase; /* Met le texte en majuscules */
    border-radius: 10px; /* Arrondit les coins */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Ombre douce */
    letter-spacing: 2px; /* Espacement entre les lettres */
}


#premier_bloc_page, #deuxieme_bloc_page, #troisieme_bloc_page {
    display:flex;
    justify-content: space-around;
    flex-wrap:wrap;
    width:70%;
    margin:auto;
}

#deuxieme_bloc_page
{
    text-align:center; 
}

#troisieme_bloc_page
{
    text-align:justify;
}

.bloc{
    text-align:center;
}

.blo1{ 
    background-color:rgb(154, 247, 185);
    padding:2px;
    border-radius: 15px;
    text-align:center;
    width:100%;
}
/****************** index *******************/


/****************************IDENTITE.PHP*******************/
.titre{
    background-color:rgb(17, 12, 12);
    padding:10px;
    margin-bottom: 10px;
    color:white;
}
#premier_bloc_p{
    display:flex;
    flex-direction: space-around;
    flex-wrap:wrap;   
    margin:auto;
}
#bloc_1, #bloc_2, #bloc_3, #bloc_4, #bloc_5, #bloc_6
{
    margin:10px;
    padding:10px;
    width: 25%;
    margin:auto;
    padding-top: 0px;
    margin-top: 0px;    
} 
.blo2{
    margin-right:10px;
    width:100%;
    background-color:rgb(154, 247, 185);
    padding:2px;
    border-radius: 15px;
}
/****************************IDENTITE.PHP*******************/


/***********************GRILLE DE COTATION**************************/

#grav_bloc{
    margin-bottom: 60px;
    text-align: center;
}

#centre
{
    text-align:center;
    margin:20px;
}

/*tableau*/
.entete{
    font-weight:bold;
    background-color:rgb(154, 247, 185);
    color:black;
 }

.tableau{
    display:table;
    width: 80%;
 /*   background-color: */
    margin:auto;
    font-family:arial;
 }

 .ligne{
    display:table-row;
 }

 .cellule{
    display:table-cell;
    text-align:center;
    border:1px solid #000;
    padding:10px;
     font-size: 0.8em;
 }

 #ent{
    font-weight:bold;
    background-color: #666;
    color:#FFF;
 }

 #corps{
    display:table-row-group;
 }

 .entet{
    display:table-header-group;
    border-radius:10px;
 }


 .espace{
    margin-bottom: 30px;
 }
 /*tableau*/

#vert{
    background-color:rgb(154, 247, 185);
    padding:20px;
}

#jaune{
    background-color:yellow;
    padding:20px;
}

#rouge{
    background-color:red;
    padding:20px;
}

#gras{
    font-weight: bold;
    text-align: center;
   
}

#critere
{
    text-align:center;
    width:80%;
    margin:auto;
    margin-bottom: 20px;
}


/***GRILLE IDENTIFICATION*******/

#page
{
   width:40%;
   margin:auto;
}


.conteneur{
    display:flex;
    flex-direction: column;
    padding-bottom:20px;
    padding-top:10px
    
}

.contenu{
    margin-left: 20px;


    
}


.textinput{
    width: 100%;
    
      height: 40px;
      padding: 10px;
      font-size: 16px;
      color: #333;
      background-color: #fff;
      border: 2px solid #ccc;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      outline: none;
      resize: vertical;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
}


.styled-text {
   
    height: 40px;
    padding: 10px;
    font-size: 16px;
    color: #333;
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }

  .styled-text:focus {
    border-color: #007BFF;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  }

.content{
    display:flex;
}

#identification_des_risques
{
  background-color:rgb(154, 247, 185);
}

#Evaluation_du_risque{
    background-color: rgb(154, 247, 185);
}

#maitrise_du_risque{
    background-color: rgb(154, 247, 185);
}

#plan_action{
    background-color: rgb(154, 247, 185);
}

.textarea1{
    width:100%;
}

#bouton_envoyer{
   margin:auto;
   width:200px;
  height:50px;
}

.selection{
    width:250px;
    height:30px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 10px;
    font-size: 16px;
    color: #333;
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input{
    width:300px;
    height:30px
}

.bloc_chiffre{
    background-color:rgb(154, 247, 185);
    padding-right:10px;
    padding-left: 10px;
    margin-left: 20px;
    margin-top: 3px;
   
}

.resultat_critere_risque_maitrise{
   
    background-color: rgb(13, 166, 80);
    color: white; /* Texte en blanc pour un bon contraste */
    padding: 15px 20px; /* Espacement intérieur */
    margin-top: 10px;
    border-radius: 10px;
    font-weight: bold; /* Texte plus lisible */
    text-align: center; /* Centrage du texte */
    font-size: 1.2rem; /* Taille de police plus visible */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre douce pour effet moderne */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation fluide */
}


.resultat_critere_risque_modere{
    background-color: rgb(245,189,13);
    color: white; /* Texte en blanc pour un bon contraste */
    padding: 15px 20px; /* Espacement intérieur */
    margin-top: 10px;
    border-radius: 10px;
    font-weight: bold; /* Texte plus lisible */
    text-align: center; /* Centrage du texte */
    font-size: 1.2rem; /* Taille de police plus visible */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre douce pour effet moderne */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation fluide */
}


.resultat_critere_risque_majeur{
    background-color: rgb(232,11,15);
    color: white; /* Texte en blanc pour un bon contraste */
    padding: 15px 20px; /* Espacement intérieur */
    margin-top: 10px;
    border-radius: 10px;
    font-weight: bold; /* Texte plus lisible */
    text-align: center; /* Centrage du texte */
    font-size: 1.2rem; /* Taille de police plus visible */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre douce pour effet moderne */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation fluide */
}


/* Style du bouton */
#bouton_envoyer {
    width: 200px;
    height: 50px;
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    color: white;
    background: linear-gradient(135deg, #3498db, #2980b9); /* Dégradé bleu */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Effet au survol */
#bouton_envoyer:hover {
    background: linear-gradient(135deg, #2ecc71, #27ae60); /* Dégradé vert */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

/* Effet au clic */
#bouton_envoyer:active {
    transform: scale(0.95);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

/* Style du bouton submit */
#filtrer {
    width: 200px;
    height: 50px;
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    color: white;
    background: linear-gradient(135deg, #3498db, #2980b9); /* Dégradé bleu */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Effet au survol */
#filtrer:hover {
    background: linear-gradient(135deg, #2ecc71, #27ae60); /* Dégradé vert */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

/* Effet au clic */
#filtrer:active {
    transform: scale(0.95);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}



/************** RISQUE EVALUE ********************/
.barre_recherche_risque{
    display:flex;
    padding:5px;
}

.fenetre_menu_1{
    cursor:pointer;
}

.fenetre_menu_2{
    cursor:pointer;
}

#barre_recherche_niveau_frequence_conteneur{
    display:flex;
}

#barre_recherche{
    display:flex;
}

#barre_recherche_niveau_gravite_conteneur{
    display:flex;
}

#barre_recherche_niveau_maitrise_conteneur{
    display:flex;
}

#barre_recherche_niveau_risque_conteneur{
    display:flex;
}

#barre_recherche_echeance_conteneur{
    display:flex;
}

#barre_recherche{
    font-size: 23px;;
}

.marge{
    padding-left:1px;
}

#bloc_recherche{
    display:flex;
    flex-direction:column;
    align-items: center;
    padding-bottom:20px;
    width: 100%;
}

.content_barre_action
{
    display:flex;
    flex-direction: rows;
    
}

/* balise select */

select {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    appearance: none; /* Supprime l'apparence par défaut */
    -webkit-appearance: none; /* Safari */
    -moz-appearance: none; /* Firefox */
}

/* Ajout d'une icône flèche personnalisée */
.barre_recherche_contenu select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 30px;
}

/* Effet au survol */
select:hover {
    border-color: #007BFF;
}

/* Effet au focus */
select:focus {
    outline: none;
    border-color: #0056b3;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Style des options */
select option {
    padding: 10px;
    font-size: 16px;
}


/* Style de l'input date */
input[type="date"] {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    appearance: none; /* Supprime le style par défaut */
    -webkit-appearance: none; /* Safari */
    -moz-appearance: none; /* Firefox */
}

/* Ajout d'une icône calendrier personnalisée */
.barre_recherche_contenu input[type="date"] {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M7 10h10v2H7zm0 4h7v2H7zM19 3h-1V1h-2v2H8V1H6v2H5a2 2 0 00-2 2v16a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm0 18H5V8h14z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
    padding-right: 35px; /* Pour éviter que le texte chevauche l'icône */
}

/* Effet au survol */
input[type="date"]:hover {
    border-color: #007BFF;
}

/* Effet au focus */
input[type="date"]:focus {
    outline: none;
    border-color: #0056b3;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Modifier le style du placeholder (pour les navigateurs qui l'affichent) */
input[type="date"]::placeholder {
    color: #aaa;
    font-style: italic;
}


/* balise select */


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

*{
    font-family: 'Poppins', sans-serif;
}

/* parametre */

#parametre_content
{
    display:flex;
    justify-content: center;
}

.param_img
{
    width:50%;
}

#update
{
    width:20px;
}

/* parametre */



/*************** PARAMETRE IDENTITE *****************/
#bouton_form{
    text-align: center;
}


#test{
    background-color: red;
}

#bloc_3
{
    width: 515px;
}

/* Style du champ date */
input[type="text"] {
    width: 80%; /* Ajuste la largeur à 100% du conteneur */
    padding: 10px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    border: 2px solid #3498db; /* Bordure bleue */
    border-radius: 8px; /* Coins arrondis */
    background-color: #f8f9fa;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

/* Effet au survol */
input[type="text"]:hover {
    border-color: #2980b9;
}

/* Effet lorsqu'on clique dessus */
input[type="text"]:focus {
    outline: none;
    border-color: #2ecc71; /* Bordure verte */
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.5);
}

/* Ajustement du style du calendrier natif sur certains navigateurs */
input[type="text"]::-webkit-calendar-picker-indicator {
    filter: invert(30%);
    cursor: pointer;
}

/* Style du champ date */
input[type="text"] {
    width: 80%; /* Ajuste la largeur à 100% du conteneur */
    padding: 10px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    border: 2px solid #3498db; /* Bordure bleue */
    border-radius: 8px; /* Coins arrondis */
    background-color: #f8f9fa;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

/* Style du champ date */
input[type="date"] {
    width: 100%; /* Ajuste la largeur à 100% du conteneur */
    padding: 10px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    border: 2px solid #3498db; /* Bordure bleue */
    border-radius: 8px; /* Coins arrondis */
    background-color: #f8f9fa;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

/* Effet au survol */
input[type="date"]:hover {
    border-color: #2980b9;
}

/* Effet lorsqu'on clique dessus */
input[type="date"]:focus {
    outline: none;
    border-color: #2ecc71; /* Bordure verte */
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.5);
}

/* Ajustement du style du calendrier natif sur certains navigateurs */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(30%);
    cursor: pointer;
}

/* Style du champ number */
input[type="number"] {
    width: 80%; /* Ajuste à la largeur du conteneur */
    max-width: 250px; /* Taille max pour éviter qu'il soit trop grand */
    height: 30px;
    padding: 10px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    color: #333;
    background-color: #f8f9fa;
    border: 2px solid #3498db; /* Bordure bleue */
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
}

/* Effet au survol */
input[type="number"]:hover {
    border-color: #2980b9;
}

/* Effet lorsqu'on clique dedans */
input[type="number"]:focus {
    outline: none;
    border-color: #2ecc71; /* Bordure verte */
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.5);
}

/* Style des boutons +/- (pour certains navigateurs) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    opacity: 0.7; /* Légèrement visible */
    transition: opacity 0.3s ease-in-out;
}

input[type="number"]:hover::-webkit-inner-spin-button,
input[type="number"]:hover::-webkit-outer-spin-button {
    opacity: 1; /* Visible au survol */
}


/* Style du bouton submit */
#bouton_envoyer {
    width: 200px;
    height: 50px;
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    color: white;
    background: linear-gradient(135deg, #3498db, #2980b9); /* Dégradé bleu */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Effet au survol */
#bouton_envoyer:hover {
    background: linear-gradient(135deg, #2ecc71, #27ae60); /* Dégradé vert */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

/* Effet au clic */
#bouton_envoyer:active {
    transform: scale(0.95);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}



/************** PARAMETRE IDENTITE  *************/

/***GRILLE IDENTIFICATION*******/


/*tableau de bord*/

#centergraph
{
    display:flex;
    justify-content: center;

    
}

/***********************tablette****************************/
@media screen and (min-width:200px) and (max-width:1600px) {

            /*INDEX*/
            #premier_bloc_page, #deuxieme_bloc_page, #troisieme_bloc_page 
            {
                flex-direction:column;
            }

            /*NAVIGATION*/
            #menu_contenu
            {
             display:flex;
             flex-direction:column;
             align-items: center;    
            }

            .menu_content
            {
                margin:5px;
            }

            /*IDENTITE*/
            .bloc
            {
                display:flex;
                flex-direction:column;   
                margin:auto;
            }

            #premier_bloc_p
            {
                display:flex;
                flex-direction:column;
                align-items: center;
            }


            #bloc_1, #bloc_2, #bloc_3, #bloc_4, #bloc_5, #bloc_6
            {
                width:70%;
                text-align: center;
            }


           /* grille_identification_vierge */
            #page, grand_titre
            {
            width:80%;
            margin:auto;
            }
               /* grille_identification_vierge */

            

               /* risque evalue.php*/
               #barre_recherche
               {
                  flex-direction:column;  
               }

               .cache
               {
                   display:none;
               }

}



/**************************Smartphone***************************/
@media screen and (max-width:767px) {

    .cache2
    {
        display:none;
    }

  

}
/*********************Smartphone********************************/