/* Feuille de style CSS paragraphe Body */
/*   MODIF sept 2024 OK*/
body
   {
    margin-top: auto;
    /*fond de page*/  
    background-color:whitesmoke; 
      font-family:'Trebuchet MS',' Arial', 'sans-serif', 'Lucida Sans Unicode', 
         'Lucida Grande', 'Lucida Sans' ;   
   }
    /* balise div blocentier */
   #blocentier
   {
   width: 100%;
   margin: auto;
   }
.acceuil
   {
    width: 150px;
    text-align: left;
    font-weight: bold;
    color: grey;    
   }
.body
   {
    color: orangered;
     font-size: 10mm;
      text-align: center;
       text-transform: uppercase;
   } 
    /* contact plus realisation : modif ok aout24*/
nav
   {
    display: inline-block;
    position: relative;
    width: 90%;
    margin-left: auto;   
   }   
nav ul
   {
   list-style-type: none;
   }  
nav li
   {
    display: inline-block;
    position: relative;
    margin-left: 22%;  
    margin-bottom: 30px    
   }
nav a
   {
  font-size: 1.3em;
  color: #181818;
  padding-bottom: 10px;
  text-decoration: none;
   }
/*parametre survol sourie vert+click blanc*/
/*nav a:hover 
   {
    color: green;
    border-bottom:green ;        
   }
nav a:active
   {
    color: white;
    background-color: white;   
   }  */
    /* FIN DU FICHIER NAV MODIF */

    /*  CONTACT plus realisation suite */
    .click
   {        
       display: inline-block;
       text-align: right;
       margin-right: auto;
       width: 100%; 
       font-size: 1.5vw;
       font-family: Comic Sans MS;       
       font-weight: bold;        
   } 
    .click a
   {
      width: 100%;
    color: blue;
    border: 1px solid  rgb(214, 210, 210);
    background-color: rgb(226, 221, 221);
    padding-left: 20px;
    padding-right:20px ;
   } 
   .click :hover
   {       
        /*  survol */
          color: rgb(79, 129, 4);
           border-bottom: rgb(79, 129, 4);
           background-color: whitesmoke;
           border: whitesmoke;
   }
   .click a:active
   {
      color: white;
   }
   /* Texte intro */
.body2 
   {
    border: whitesmoke 2px solid;
    box-shadow: gray 8px 10px 10px;
    margin-left: 20mm;
    margin-right: 20mm;
    padding: 4px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 1.2em;
    font-family: Comic Sans MS ,Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: bold; 
   }     
.ancres p /*modif septembre2024 ok*/
   {
            max-width: 100%;
            position: relative;
            display: inline-block;           
            font-size: 150%;
            font-weight: bold;  
            font-family: Arial, Helvetica, sans-serif;
            color: rgb(14, 10, 233); 
            left: 4%;
            margin-left: 18%;
            margin-top: 20px;
            margin-bottom: 20px;
   }
   .ancres  :hover
   {
      color: green;     
   } 
   .ancres :active
   {
      color: rgb(214, 210, 210);
   }       
    h2
   {
        color: black;
   }    
    .image /*Modification sept 2024 ok*/
   {
         position: relative;
         display: inline;        
         border: gray 2px solid;
         max-width: 100%;         
         left: 6%;  
         margin-left: 14%;           
         vertical-align: bottom;
   }  

   /*alignement photos métiers*/
   /*alignement texts métiers */
   .metierPlomb
   {       
       font-size: 20px;
       color: #666565;
       position: relative;       
      top: 100px;
      width: 70%;
       border: 1px rgb(128, 128, 128) solid;
       text-align: justify;
       padding: 10px;
       margin-left: 150px;      
       margin-top: 5%;
       background-color: rgb(233, 229, 229);
      
   }
   .metierPlomb h2
   {      
    font-size: 20px;
    color: black;
   }
   .metierSanit
   {
    width: 70%;   
    margin-bottom: 30px;
    font-size: 20px;
    color:#807e7e;
    position: relative;
    top: 100px;    
    border: 1px rgb(128, 128, 128) solid;
    text-align: justify;
    padding: 10px;
    margin-left: 150px;
    margin-top: 5%;    
    background-color: rgb(233, 229, 229);
   }
   .metierSanit h2
   {
    font-size: 20px;
    color: black;
   }
    .metierChauff
   {
        font-size: 20px;
        color: #807e7e;
        position: relative;
        top:100px ;
        width: 70%;
        border: 1px rgb(128, 128, 128) solid;
        text-align: justify;
        padding: 10px;
        margin-left: 150px;       
         margin-bottom: 5%;
        background-color: rgb(233, 229, 229);
   }
    .metierChauff h2
   {
        font-size: 20px;
        color: black;       
   }     
    span
   {
    color: sandybrown;
    font-size: 1.2em;
    font-weight: bold;
   }
   /*---------------------------responsive design-------------------------*/
   /*Iphones*/
   /*modif septembre24 ok*/    
    @media only screen and (min-width:320px) and (max-device-width:400px)
{       
    .body
    {    
     width: auto; 
     font-size: clamp(1rem, 2vw + 1rem, 2rem);
    }  
     .body2
     {
      font-size: 15px;
      min-width: 90%;
      margin-left:5px ;
     }   
     .click
     {
        font-size: 3vw;
     }
     
     .ancres p /*Modif septembre 2024 ok*/
     {     
         display: inline-flex;
         justify-content: center;
         font-size:18px;
         left: 1%;
         margin-left: 7%;
     }     
     .image   
     {
        max-width: 100%;
        display: inline-flex; 
        justify-content:left;       
        margin-bottom: 20%;
        margin-left: 5%; 
        width:80px;
        height: 80px;       
     }     
     .metierPlomb
     {
      width:90%;       
      margin-left: 5px;
      font-size: 15px;
     }
     .metierSanit
     {
      width: 90% ;
      margin-left: 5px;
      font-size: 15px;
     }
     .metierChauff
     {
      width:90% ;
      margin-left: 5px;
      font-size: 15px;
     }
}    
  /*tablettes 7/10 pouces*/ /*modifs ok septembre24*/
   
   @media only screen  and (min-width:401px) and (max-device-width:640px)
{    
    .image
     {          
         display:inline-flex;
         justify-content: left;       
         margin-bottom: 20%;
         margin-left: 10%;
         width:90px;
         height:90px;
     }
     .click
     {
        font-size: 3.5vw;
     }
     .ancres p
     {      
      display: inline-flex;
      justify-content: center;
      font-size:20px;
      left:5%;
      margin-left: 11%;
     }   
        .metierPlomb
     {
         width:90%;       
         margin-left: 5px;
         font-size: 15px;
     }
        .metierSanit
     {
         width: 90% ;
         margin-left: 5px;
         font-size: 15px;
     }
        .metierChauff
     {
         width:90% ;
         margin-left: 5px;
         font-size: 15px;
     }
}
/*tablette 10p et pc  modif ok septembre24*/  

@media screen and (min-width:641px) and (max-width:1025px)
{ 
   .image
   {        
        display:inline-flex;
        justify-content: left;               
        margin-bottom: 5%;
        margin-left: 12%; 
        width: 120px;
        height:120px;
   }   
  
    .ancres p
   {      
        display:inline-flex;
        justify-content:center;       
        font-size: 23px;
        left: 2%;
        margin-left: 17%;
        margin-right:-31px;
   }
   
    .metierPlomb
   {
        width:90%;       
        margin-left: 5px;
        font-size: 15px;
   }
        .metierSanit 
   {
        width: 90% ;
        margin-left: 5px;
        font-size: 15px;
   }
        .metierChauff        
   {
        width:90% ;
        margin-left: 5px;
        font-size: 15px;
   }    
}  /*fin res-designe*/