body {font-family:Arial,Helvetica,sans-serif;font-size:100%;  }

 :root
          {
            --hauteur-menu: 200px;
          }
/*------------------------header----------------------------------------------------*/
.header{background: url(images/KRMO-1.jpg) no-repeat;  background-size:cover; height:300px; }

 #header /* la couleur du fond de navigateur et sa taille*/
        {
         
          
         height: 80px;
          width: 1114px;
          text-align: center;
          bottom: 0;
          margin: 14.5px;

         }


        nav
          {
             position: sticky;
          }
          nav > ul
          {
            display:flex;
            text-align: center;
            height: var(--hauteur-menu);
          }

          nav ul
          {
             list-style-type: none;
          }

          nav > ul > li{ position: relative; height: 150%; flex: 1; }
          nav > ul > li > a { position: absolute; top: 50%; left:50%;  transform: translate(-50%, -50%);}
          

          .menu-deroulant > a :after
          {
            content: ;
           
            display: inline-block;
          }
          .sous-menu
          {
            margin-top: var(--hauteur-menu);/*  le sous menu s'affiche juste sous le menu*/
            width: 100%; /* la taille de la marger du sous menu*/ 
            text-align:center;
            background-color: white; border-radius: 2px;
            overflow: hidden;
            max-height:0;

 
          }

          .sous-menu > li > a
          {
            height: 50px;
            padding-left: 40px;
            width: 100%;
            align-items: center;
            display: flex;
          } 
            li > a :after{content: '';}
              li > a :only-child:after{content: '';}/* le symbole  sur les menus*/
          .menu-deroulant:hover > a :after
          {
            animation: rotationfleche
            0.2s linear forwards;
          }
        
        @keyframes apparitionSousMenu /* l"apparition du sous menu*/
        {
          0%{
            box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0);
            border-top: 3px solid #2169EC;

          }
          30%{
            box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.3);

          }
          100%{
            max-height: 50em;
            border-top: 3px solid  #2169EC;
            box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.3);

          }
        }

        .menu-deroulant:hover >.sous-menu
        {
          animation: apparitionSousMenu 3s forwards;
        }

             a
        {
            color: rgb(200,100,110); /* changer les couleurs des differents lins*/
            text-decoration:none;/*enlevement des soulignements sous des liens*/
            font-weight: bold;
            font-family: 'LearningCurveProRegular', Arial, serif;
            font-size: 1em;
            display: inline-block;/*centrer le lien*/ 
           
        }

          .entete a:hover/* le survolement*/
        {
           background:url(images/menu.gif)  no-repeat right center ; /*image au survole (exp: flèche)*/
           background-position:inline-block ;/* postion de la fleche*/
        }
         .entete a
         {
            padding: 10px 10px 10px 10px;
             
             left: 150PX;

         }

         .entete img
            {
            position: absolute;
            margin-left:-5px;
           background-color: green;
            width: 50px;
            height: 50px; 
            left:150px;
           }
         .cercle /*le cercle et ses differente dimenssion*/
         {
            
             background:rgb(69,83,250);
            border-radius: 50%;
            width: 42px;
            height: 42px;
            float:  right;
            margin: -60px;
            margin-top:-8%;

        }


        .menu.icon /* le 2eme traits qui englobe les deux autres traits */
        {
          color: white;
          position: absolute;
          margin-left: 2px;
          margin-top: 19px;
          width: 18px;
          height: 1.8px;
          right:165px;/* ceci a centré mes trois traits dans le cercle*/
          background-color: currentColor;
        }

       .menu.icon:before/* le 1er trait et ses dimenssion*/
        {
          content: '';
          position: absolute;
          top:-5px;
          right: 0;
          width: 18px;
          height: 1.8px;
          background-color: currentColor;
        }

        .menu.icon:after/* le 3eme trait et ses dimension*/
        {
          content: '';
          position: absolute;
          top: 5px;
          right: 0;
          width: 18px;
          height: 1.8px;
          background-color: currentColor;
        }

 #logo
         {
             
            position: absolute;
            margin-left:-5px;
            margin-top: 120px;/*permet la position souhaité pas le webmaster*/
            width: 50px;
            height: 50px; 
            left:150px; 
          }

        .logo{background-color: rgb(128, 0, 0);width: 100px;}
               
.button {background:grey ; color: rgb(128, 0, 0); text-decoration: none;
 width: 70px; height: 40px; margin: 20px; font-family:"trebuchet MS",Helvetica,sans-serif; 
 font-size: 1.5em; display: inline-block;}

 .button:hover{background-color: blue; color:rgb(128, 0, 0) ;}

p {   color: rgb(128, 0, 0);margin :20px; line-height:1.5em}

/* txt,links,lines,titles */

a:hover {background-color: rgb(128, 0, 0);}
h1 
{
 color: rgb(128, 0, 0);
 text-align: center;
}

.texte{color: black;}

h2 { float: :center;font-family:"trebuchet MS",Helvetica,sans-serif;font-weight:normal;font-size:1.5em; }
 span {color:rgb(128, 50, 50); left: 25px; } 

 em{font-size: 2em; color: darkred; text-decoration: bold;}

 
.grille
{

    display: grid;
    grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2,1fr);
   font-size: 1em;
   text-align: center;
   grid-gap: 60px;
   margin-bottom: 150px;
   margin-top: 100px;
     


}


.pseudo{border-radius:0px;}

#search{padding: 2px;
             border-radius: 40px;
             outline: none;
              border: 3px solid maroon;
              background: url('images/chercher.png' )right no-repeat ;
              width: 30px;
              /* permettant de faire la transition en 2seconde */
              transition: width 2s;
           -webkit- transition: width 2s;
            -moz-transition: width 2s;
            -o-transition: width 2s;
            -ms-transition: width 2s;


            }

            #search:focus{width: 200px;}/*la taille du champ*/

             
           .login{
            color:rgb(128,0,0);
            float:  right;
             margin-right:120px;
            margin-top:-11%;}

            .header-meta{ 
            margin-right:150px;
            float:right;
           font-size: 1.02em;  color:black; margin-top:-15%;}
             .phone{color:rgb(128, 0, 0); font-size: 1.02em;}
  

/*--------------------------------------------------section------------------------------------------------------------*/
.contient{width: 100px; height: 80%;}