/* Fichier CSS pour présentation du site internet Antony */

body

/* Couleur du fond d'écran */

{
  background-color : rgb(141,180,214);  
  background-attachment:fixed;
  background-repeat: repeat; 
  
  font-family: Arial, "Times New Roman", Impact, "Arial Black",  Verdana, sans-serif;

  color: black;
  margin: 0;
  padding: 0; 
}

/*                                                                      */
/*       Définition de l'entête                                         */ 
/*                                                                      */

#entete
{
width:100%;
height:auto;
/* min-height:180px; */
 /* height:200px;*/
background-color: white; 
padding-top:15px;
/*  background-repeat: repeat;*/

}
/*
#entete1
{
  width:100%;
  height:180px;
padding-top:15px;
}
*/
/*                                                                      */
/*       Définition du carré avec Antony BLARD                          */ 
/*                                                                      */

#boite 
{
  float:left;

  width: 200px; /* 260px */ /* 240px */  /* 300px */
   height:auto;   

   margin-left:20px;

  border:3px rgb(19,199,199) solid; 
  border-radius: 10px; 
  border-left-width: 10px;  
}

/*                                                                      */
/*       Définition des polices utilisées pour le texte dans le header  */ 
/*                                                                      */
/* header h1, #titre h2, section h1 */
#entete h1, #titre h2
{
    text-align: center;
    color: rgb(19,199,199); 
    font-family:"Arial";    
    font-weight: bold;

  /*   line-height: 1em; */ 
 }
 
 #titre h2
{
    font-size: 150%; /* 110 */  /* 150 */                     
 }
 /* header h1, section h1 */
 #entete h1
{
    font-size: 130%; /* 170% */ /* 120 */                     
 }

/*                                                                      */
/*                      Menu de navigation                              */ 
/*                                                                      */
/* et contiendra, pour les mobiles (dans les médias-query )             */
/*            le menu raccourci                                         */

#myTopnav 
{
  min-height:50px; 

 /* margin-top:35px;*/
  margin-left:345px; 
  margin-right:15px;
  padding-top:10px;
  padding-bottom:10px;

background-color: rgb(16,168,164);
  background: -webkit-linear-gradient(
    rgb(21,226,221),                    
    rgb(16,168,164) 50%,                
    rgb(16,168,164) 50%,                
    rgb(12,129,126)                     
  );
  background: -moz-linear-gradient(
    rgb(21,226,221),                    
    rgb(16,168,164) 50%,                
    rgb(16,168,164) 50%,                
    rgb(12,129,126)                     
  );
  background: -o-linear-gradient(
    rgb(21,226,221),                    
    rgb(16,168,164) 50%,                
    rgb(16,168,164) 50%,                
    rgb(12,129,126)                     
  );
  background: linear-gradient(
    to bottom,
    rgb(21,226,221),                    
    rgb(16,168,164) 50%,                
    rgb(16,168,164) 50%,                
    rgb(12,129,126)                     
  );

  border:3px rgb(19,199,199) solid; 
  border-radius: 10px; 

 
  
}

          
.topnav
{          
  
  text-align: center; 


}

/*                                                                      */
/*         Description pour chaque ligne du menu                        */
/*     Içi, on définit la partie pour des pc et grands écrans           */
/*                                                                      */
/*                                                                        */

.topnav a 
{             
  text-align: center; 
  padding-left:10px;
  padding-right:10px;



/* pour éviter que les titres du menu soient coupés sur rétrécissement d'écran */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  color: white; 
  font-size: 140%;   
  font-family:"Times New Roman"; 
  font-style: italic;
  text-decoration: none;
}

/*                                                                      */
/*  Action au passage de la souris  + sur celle de la page active       */
/* #ddd; : couleur de fond = blanc neige                                */
/*                                                                      */
.topnav a:hover, .topnav .active
 
{
  background-color: #ddd;   
  color: black;
}


/*                                                                      */
/*    On précise de ne pas afficher le menu pour mobile, ni la croix    */
/*             Celui-ci sera géré par les médias-querry                 */
/*                                                                      */
.topnav .icon, .topnav .closebtn
{ 
     
  display: none;
  
}


/*                                                                      */
/*       Définition de la zone de titre                                 */ 
/*           Osteopathe et acupuncteur                                  */
#titre 
{

  float:none;
  clear:both;

  width:100%;
  min-height:2px; /* 20px; */ 

  margin-top:0px;
  
/* centrage horizontal */
/*  text-align:center;*/

/* centrage vertical */

/*  line-height:50px; */ 
/*  vertical-align:center; */ 

}

/*                                                                      */
/*    Action sur le Header pour les mobiles et tablettes                */
/*    pour afficher le petit menu en haut à droite                      */
/*                                                                      */
@media screen and (max-width: 961px)  
{

/*                                                                      */
/*    On réduit le menu horizontal sans le faire disparaitre            */
/*                                                                      */

  #myTopnav 
  {

    height:0px;
    min-height:0px; 

    margin-top:0px; 
    margin-left:0px;
    padding:0;


background-color: white;
border-style : none;  
 


  }
/*                                                                      */
/*    chaque élément du menu horizontal est caché                       */
/*                                                                      */                
  .topnav a 
  {
    display: none;
  } 

/*                                                                      */
/*    On fait apparaitre le menu pour mobile en haut à droite           */
/*                                                                      */
  .topnav a.icon
  {

   float:right; 
    
   margin-top:35px;
   margin-right:3%;
   
  font-size:40px;     /* 200%;*/ /* 50 px */ 
  font-style: normal;
  text-decoration: none;
  color:black;
 
  /* background-color : rgb(141,180,214); */ 

 /*  border:3px rgb(19,199,199) solid; 
  border-radius: 10px; */



background-color: rgb(16,168,164);
  background: -webkit-linear-gradient(
    rgb(21,226,221),                    
    rgb(16,168,164) 50%,                
    rgb(16,168,164) 50%,                
    rgb(12,129,126)                     
  );
  background: -moz-linear-gradient(
    rgb(21,226,221),                    
    rgb(16,168,164) 50%,                
    rgb(16,168,164) 50%,                
    rgb(12,129,126)                     
  );
  background: -o-linear-gradient(
    rgb(21,226,221),                    
    rgb(16,168,164) 50%,                
    rgb(16,168,164) 50%,                
    rgb(12,129,126)                     
  );
  background: linear-gradient(
    to bottom,
    rgb(21,226,221),                    
    rgb(16,168,164) 50%,                
    rgb(16,168,164) 50%,                
    rgb(12,129,126)                     
  );

  border:3px rgb(19,199,199) solid; 
  border-radius: 10px; 
  display:block; 
  }

}

/*                                                                      */
/*    Action sur le Header pour les mobiles et tablettes                */
/*    pour afficher tous les choix sur 1 page à part                    */
/*     lié avec la gestion par javascript dans le html                  */
/*                                                                      */
@media screen and (max-width: 961px)  
{
/*                                                                    */
/*    On fait apparaitre la croix rouge en haut à droite                */
/*                                                                      */
  .topnav.responsive .closebtn 
  { 
    position: fixed;
    right: 20px;
    top: 0;
    color:red;
    font-size:36px;

  }


/*                                                                    */
/*    On réserve tout l'écran pour afficher les éléments du menu      */
/*                                                                    */

  #myTopnav.responsive 
  {
    height: 100%;
    width: 100%;
 
    position: fixed;  
    z-index: 1;
    top: 0;
    left: 0;
padding-top:50px;

    text-align:left;
    background: rgb(141, 180, 214); 
    opacity: 1;
        
    display:block;
  }

/*                                                                    */
/*    On cache l'icone du petit menu                                  */
/*                                                                    */
  .topnav.responsive .icon
  { 
    display: none;
  }


/*                                                                    */
/*    On affiche les lignes du menu pour mobile                       */
/*                                                                    */
.topnav.responsive a 
  {          
text-align:left;
    padding: 6px; /* 4px */ /*   8px; */
    text-decoration: none;
    font-size: 140%; /*120%*/  /* 180% */
    font-family:"Times New Roman"; 
    font-weight: bold;
    color:black;
    display: block;
    transition: 0.3s;
  }

/*                                                                      */
/*  Action au passage de la souris  + sur celle de la page active       */
/* #ddd; : couleur de fond = blanc neige                                */
/*                                                                      */

.topnav.responsive a:hover, .topnav.responsive .active
 
{
  background-color: #ddd;   
  color: black;
}


}


/*                                                                      */
/*            Action pour le Menu de navigation                         */ 
/*                 pour les appareils mobiles                           */
/*                    par les médias-query                              */
/*                                                                      */
/*     Enclenchés en fonction de la taille de l'appareil                */
/*     Enclenchés aussi par le clic de la souris géré en javascript     */
/*     Le script inclus dans la partie HTML                             */
/*       transforme Topnav en Topnav.responsive                         */
/*        ce qui indique que l'écran est positionné sur le menu mobile  */

/*      320px : smartphones, iPhones, téléphones en portrait de résolution 480x320.  */
/*      481px : e-readers en portrait, petite tablette de 600px ou 640px de large.   */
/*      641px : tablettes en portrait, portrait iPad, landscape e-readers, teléphone en paysage de 800x480 et 854x480 .    */
/*      961px : tablette, fablettes, iPad en paysage, laptops de basse résolution.   */
/*      1025px : Grandes tablettes en orientation paysage, laptops et desktops courants. */
/*      1281px : laptops et desktops de haute résolution.   */

/*      pour iphones :  @media screen and (max-width: 600px)  */


/***********************************************************/
/* La section vient se positionner à 210px du haut de page */
/***********************************************************/
/* section  */
section{}

#niveau0
{
  float:none;
  clear:both;
  height: auto; 

/*  margin-top:210px;*/

}


/*********************************************************/
/*1er carre sur toute la largeur de la page permettant de*/
/*     ne pas coller à l'entête                          */
/*********************************************************/

#niveau1 
{
  float:none;
  clear:both;

  width:100%;
  height:5px; 
}


/*********************************************************/
/*2ème carre positionné pour carré blanc                 */
/*  avec article sur l'ostéopathie de Still              */
/*********************************************************/

#article1
{

  width:100%;
  height:auto;
  min-height:70px; 
  text-align:center;

 /*  padding-bottom:2px; */

   background-color:white; 

/* centrage vertical */
  line-height:70px; 
  vertical-align:center; 

}


/*                            */
/*  Texte sur l'ostéopathie   */
/*                            */
/*                            */

article {}

#article1 h2
{
    font-family: "Times New Roman";
    font-size: 30px; /* 150%;  */
    font-weight: bold;
    font-style: italic;

}




/*********************************************************/
/*3ème carre sur toute la largeur de la page permettant de*/
/*     ne pas coller à l'article1                         */
/*********************************************************/

#niveau2 
{
  float:none;
  clear:both;

  width:100%;
  height:5px; 
}

/*********************************************************/
/*3ème carre permettant de créer un cadre de 960pixel    */
/*      situé au milieu de la page                       */
/*********************************************************/

#niveau3 
{

  float:none;
  clear:both;

  max-width:960px;
  height:auto;
  min-height:370px;
  max-height:999px; 

/* centrage horizontal  */
  margin:auto;
  margin-top:0px;

}

/*********************************************************/
/*4ème carre permettant de positionner à gauche           */
/* du carré précédent - va acceuillir l'image et le texte */
/*********************************************************/
#niveau4 
{
  float:left; 
  color:black;

  width: 100%;

  margin-top:0px;
  margin-left:0px;
  margin-right:0px;
   
}

/*********************************************************/
/*     carre à gauche pour centrer photo A. STILL        */
/*                                                       */
/*********************************************************/
#niveau4a
{
   float:left;  

   
   width:45%; /* 50%;*/
  /* min-width:400px; */   /*  il n'y en avait pas */
  
  height:auto;  
     /*
   text-align: center;
   margin:auto;
   */  
}

  
/*********************************************************/
/*Affichage de la photo de Mr Still                       */
/*                                                       */
/*********************************************************/
#image1
{ 


    width:400px;      /* 299px; */       
    height:auto;   
    min-height:300px;  /* 260px; */
   
/*
  background-image: url("image1.jpg"); 
  background-repeat: no-repeat;
*/
 /*
  margin:auto;
  text-align:center;
  */
  margin-top:30px;
}


/*********************************************************/
/*     carre à droite pour centrer le texte              */
/*                                                       */
/*********************************************************/
#niveau4b
{
   float:left;  
   width:55%; /* 50% */
   min-width:280px; /* 280px;*/ /* 480px; */ /* 280px; */
  /*  max-width:800px; */ 
   height:auto;
    min-height:280px; 

   margin-top: 0px;
/*   margin-bottom:20px; */
   padding:0;
   margin-left:0;
   text-align:left;

   padding-bottom:30px;

   color: black; 
}

                           


article{}

                                         
/*                                         */
/*            Texte à droite de l'image    */ 
/*                                         */



#niveau4b  mark
{
 background-color: yellow;
}


#niveau4b  h3
{
  font-size: 1.9em; 
  font-weight: bold;
    color: black;   
    font-family:Arial;      
    opacity: 1;
}


#niveau4b  h4
{
  font-size: 1.3em; 
  font-weight: bold;
    color: black;   
    font-family:Arial;      
    opacity: 1;
}
/* section p*/

#niveau4b  p
{
    font-family:Arial;
    font-size: 16px; 
    font-weight: bold;
    margin-top: 0px; 
    margin-bottom: 0px; 
    opacity: 1;
}


#niveau4b a
{
  width:300px;
  min-width:300px;
  height:auto;
/*
  margin:auto; 
  margin-left: auto;
  margin-right: auto;
*/

background-color: rgb(16,168,164);
  background: -webkit-linear-gradient(
    rgb(21,226,221),                    
    rgb(16,168,164) 50%,                
    rgb(16,168,164) 50%,                
    rgb(12,129,126)                     
  );
  background: -moz-linear-gradient(
    rgb(21,226,221),                    
    rgb(16,168,164) 50%,                
    rgb(16,168,164) 50%,                
    rgb(12,129,126)                     
  );
  background: -o-linear-gradient(
    rgb(21,226,221),                    
    rgb(16,168,164) 50%,                
    rgb(16,168,164) 50%,                
    rgb(12,129,126)                     
  );
  background: linear-gradient(
    to bottom,
    rgb(21,226,221),                    
    rgb(16,168,164) 50%,                
    rgb(16,168,164) 50%,                
    rgb(12,129,126)                     
  );
  border:3px rgb(19,199,199) solid; 
  border-radius: 10px;   
 
 text-align:center;
 text-decoration:none;
 color: white;
 font-weight: bold; 

  font-family:Arial;  
  font-size: 150%; 
  line-height: 1em; 
display:block; 

}
#niveau4b  a:hover
{
  
  color: black;

}

@media screen and (max-width: 961px)  
{
  #niveau4a
  {
 /* on enlève le centrage à gauche des carrés */
    float:none;
    clear:both;

     width:100%;
     display: block; 
    
/* On les centre dans la page   */
    text-align:center;
    margin:auto;
    margin-left:auto;
    margin-right:auto;

    padding-top: 20px;
    padding-bottom:20px;
  }

#niveau4b
  {
 /* on enlève le centrage à gauche des carrés */
    float:none;
    clear:both;

     width:70%;
display: block; 
    
/* On les centre dans la page   */
    text-align:center;
    margin:auto;
    margin-left:auto;
    margin-right:auto;

    padding-top: 20px;
    padding-bottom:20px;
  }
  #image1
{ 

  margin:auto;
  text-align:center;
}
#niveau4b a
{
 
  margin:auto; 
  margin-left: auto;
  margin-right: auto;
 
/* display:block; */ 

}

}


/*                                         */
/*    Footer -    Bas de page              */
/*                                         */

footer
{
}
footer p
{
    font-family: "Times New Roman";
    color: black;       
    font-size: 19px; 
    margin-top: 0px; 
    margin-bottom: 5px; 
    opacity: 1;
}

/*                                         */
/*          Ligne grisée dans bas de page  */ 
/*                                         */

#baspage 
{
   display: inline-block;  
    text-align: left;  
   height:50px;    
   width: 100%;
   background-color: white;   
   margin-bottom: -5px; 
   margin-top: -5px; 
   padding: 0;

}

/*                                         */
/*          Texte dans Ligne grisée        */ 
/*                                         */

#creation 
{
   display: inline-block;
   min-width: 9%;  /* 18% */  
   float:left;
   text-align: left;
   margin-left: 30px;   
   margin-top: 10px;
   font-family: "script";
   font-size: 10px; 
}
#creation p
{
   font-family:"Arial";    
   color: black; 

 /*  font-size: 15px; */ 
     font-size: 100%;        
    font-weight: normal;
}
#nom 
{
   display: inline-block;
   min-width: 38%;     /* 20% */   
   float:left;
   text-align: right;
   margin-left: 30px;   
   margin-top: 10px;
   font-family: "script";
   font-size: 10px; 
}
#nom p
{
   font-family:"Arial";    
   color: black; 
    /*  font-size: 15px; */ 
     font-size: 120%;        
    font-weight: bold;
   
}
#adress 
{
   display: inline-block;
   min-width: 28%; /* 25%; */    
   float:left;
   text-align: left;
  /*  margin-left: 30px; */   
   margin-top: 10px;
   font-family: "script";
   font-size: 10px; 
}
#adress p
{
   font-family:"Arial";    
   color: black; 
    /*  font-size: 15px; */ 
     font-size: 120%;        
    font-weight: bold;
   
}
#lieu 
{
   display: inline-block;
   min-width: 10%; /* 6%; */   
   float:left;
   text-align: left;
  /*  margin-left: 30px; */   
   margin-top: 10px;
   font-family: "script";
   font-size: 10px; 
}
#lieu p
{
   font-family:"Arial";    
   color: black; 
    /*  font-size: 15px; */ 
     font-size: 120%;        
    font-weight: bold;
   
}
@media screen and (max-width: 961px)  
{
#creation, #nom, #adress, #lieu 
  {
 /* on enlève le centrage à gauche des carrés */
    float:none;
    clear:both;

    width: 100%;
    display: block;

/* On les centre dans la page   */
    text-align:center;
    margin:auto;
    margin-left:auto;
    margin-right:auto;

/*    padding-top: 20px; */
  }


}