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

body
{
  /*  Initialisation des paramêtres - 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;

  background-color: white; 
  padding-top:15px;

}

/*                                                                      */
/*       Définition du carré avec Antony BLARD                          */ 
/*                                                                      */

#boite 
{
  float:left;

  width: 200px; 
  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  */ 
/*                                                                      */

#entete h1 
{
    text-align: center;
    color: rgb(19,199,199); 
    font-family:"Arial";    
    font-weight: bold;
    font-size: 130%;
 }
 

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

#myTopnav 
{
  min-height:50px; 

  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; 

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

/* centrage vertical */

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

}



/*                                                                      */
/*    Action de l'entête 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;     
   font-style: normal;
   text-decoration: none;
   color:black;

  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: 4px; 
    text-decoration: none;
    font-size: 120%;   /* 180% */
    font-family:"Times New Roman"; 
    font-weight: bold;
    color:black;
  /*  line-height:1.0em; */
   
    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;
}

}


/***********************************************************/
/* 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 le traitement en général            */
/*********************************************************/

#article1
{

  width:100%;
  height:auto;

  text-align:center;

  padding-bottom:2px;
  background-color:white; 

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

}


/*                            */
/*  Police pour le Texte      */
/*                            */
/*                            */

article {}

#article1 h2
{

  font-family: "Times New Roman";
  font-size: 150%; 
  font-weight: bold;
  
}
#article1 h3
{

font-family: "Times New Roman";
   font-size: 100%; 
   font-style: italic;
   line-height: 1em; 
 
}
#article1 h4
{
  font-family: "Times New Roman";
     font-size: 100%; 
     font-style: normal;

}




/*********************************************************/
/* 2ème carré ur toute la largeur de la page permettant de*/
/*     ne pas coller à l'article1                         */
/*********************************************************/

#niveau2 
{
  float:none;
  clear:both;

  width:100%;
  height:20px; 

 margin:auto;

}

/*********************************************************/
/*3ème carre permettant de créer un cadre de 960pixel    */
/*      que l'on peut centrer                            */
/*********************************************************/

#niveau3 
{

  float:none;
  clear:both;
  width : 1200px;   
  min-width:350px;
  height: auto;
 
/* centrage horizontal  */
  margin:auto;
  margin-top:0px;

}

/******************************************************************/
/*niveau4-1 carré de 100% de la largeur du bloc précédent         */
/*niveau4-2 carré de 100% de la largeur du bloc précédent         */
/*niveau4-3 carré de 100% de la largeur du bloc précédent         */
/* ils vont acceuillir les photos et texte de droite et de gauche */
/******************************************************************/
#niveau4-1, #niveau4-2, #niveau4-3
{
  float:left; 
  color:black;

  width: 100%;

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



/*********************************************************/
/*     niveau4-1g, 2g et 3g                              */
/*  Définition des 3 blocs de gauche (photos et textes)  */
/*                                                       */
/*********************************************************/
#niveau4-1g, #niveau4-2g, #niveau4-3g
{
   float:left;  

   width:600px; 
   min-width: 300px;
   height:auto;
   
   text-align:center;
   margin:auto;
}

/*********************************************************/
/*     niveau4-1d, 2d et 3d                              */
/*  Définition des 3 blocs de droite (photos et textes)  */
/*                                                       */
/*********************************************************/
#niveau4-1d, #niveau4-2d, #niveau4-3d
{
   float:left;  

   width:600px; 
    min-width: 400px;
   height:auto;
   
   text-align:center;
   margin:auto;
}




/*********************************************************/
/*Affichage des images                                   */
/*    image2, image2a et 2b sont à gauche                */
/*    image3, image3a et 3b sont à droite                */
/*********************************************************/



#image2
{
   float:left;
   
   background-image: url("image2.jpg");
   background-repeat: no-repeat;

   width:173px;       
   height:auto;   
   min-height:183px;  

   margin-top:0px;
   margin-bottom:10px;
}


#image3
{
   float:left;
   background-image: url("image3.jpg");
   background-repeat: no-repeat;
  
  
   width: 173px;   
   height:auto; 
   min-height:183px; 

   margin-top:0px;
   margin-bottom:10px;
 }

/*                                         */
/*    Image2 à guche de l'écran            */ 
/*                                         */

#image2a
{
  float:left;
   background-image: url("image2a.jpg");
   background-repeat: no-repeat;

   width:173px; 
   height:auto;      
    min-height:183px; 
    
    margin-top:10px;
    margin-bottom:10px;
}


#image3a
{
  float:left;
   
   background-image: url("image3a.jpg");
   background-repeat: no-repeat;
 
   width: 173px; 
   height:auto; 
    min-height:183px;
    
    margin-top:10px;
    margin-bottom:10px;
 }

#image2b
{
  float:left;
   background-image: url("image2b.jpg");
   background-repeat: no-repeat;

   width: 173px; 
   height:auto; 
    min-height:183px;
     
   margin-top:10px;
   margin-bottom:10px;
}


#image3b
{
  float:left;

   background-image: url("image3b.jpg");
   background-repeat: no-repeat;
  
   width: 173px;
   height:auto; 
    min-height:183px;
  
    margin-top:10px;
    margin-bottom:10px;
 }

/*********************************************************/
/*     carre à droite de la photo  pour centrer le texte */
/*                                                       */
/*********************************************************/
#niveau4-1gt, #niveau4-2gt, #niveau4-3gt, #niveau4-1dt, #niveau4-2dt, #niveau4-3dt
{
   float:left;   
   min-width:150px;
   max-width:330px; 
   height:auto;

   text-align:left;

   color: black;        
}

                           


article{}


/*                                         */
/*   marges par rapport au bloc précédent  */ 
/*                                         */


#niveau4-1gt
{
  margin-left:20px;    
}

#niveau4-1dt
{
  margin-left:20px;    
}

#niveau4-2gt
{
  margin-top:10px;
  margin-left:20px;    
}

#niveau4-3gt
{
  margin-top:10px;
  margin-left:20px;    
}

#niveau4-2dt
{
 
   margin-top:10px;
   margin-left:20px;    
}


#niveau4-3dt
{
 
   margin-top:10px;    
   margin-left:20px;
}


/*                                         */
/*   police de charactères                 */ 
/*                                         */

.texte p
{
  font-family: "Times New Roman";
  font-size: 15px;           
  font-weight: bold;
  
  margin-top: 0px; 
  margin-bottom: 0px; 
  opacity: 1;
}
.texte h1
{
  font-family: "Times New Roman";
  font-size: 17px; 
  font-weight: bold;
  text-decoration: underline;
  
 margin-top: 0px; 
 margin-bottom: 0px; 
 opacity: 1;
     
}

/***************************************************************/
/*     action si mobile ou tablette en landscape               */
/*  on affiche une photo et son texte sur le coté de la photo  */
/***************************************************************/
@media screen and (max-width: 961px)  
{
#niveau3,
#niveau4-1, #niveau4-2, #niveau4-3

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

 /* on prend toute la largeur du bloc  */
     width:100%;
     min-width:100%;
     max-width:100%;
     height: auto;
     display: block; 
    
/* On les centre dans la page   */
    text-align:center;
    margin:auto;
    margin-left:auto;
    margin-right:auto;

/* marges entre les blocs   */
    padding-top: 20px;
    padding-bottom:20px;
  }

#niveau4-1g, #niveau4-2g, #niveau4-3g, #niveau4-1d, #niveau4-2d, #niveau4-3d
  {
 /* on enlève le centrage à gauche des carrés */
    float:none;
    clear:both;

  /* on ne prend pas toute la largeur du bloc pour mieux centrer  */

     width:90%; /* 85%; */
     min-width:25%; /* 50%; */
     max-width:90%; /* 85%; */
     height: auto;
     display: block; 
    
/* On les centre dans la page   */
    text-align:center;
    margin:auto;
    margin-left:auto;
    margin-right:auto;

/* marges entre les blocs   */
    padding-top: 20px;
    padding-bottom:20px;
  }
}


/***************************************************************/
/*     action si mobile ou tablette en mode portrait           */
/*  on affiche une photo et son texte en dessous               */
/***************************************************************/

@media screen and (max-width: 600px)  
{
#niveau2
  {
  	margin:0px;
  	padding:0px;
  }


#niveau3,
#niveau4-1, #niveau4-2, #niveau4-3,
#niveau4-1g, #niveau4-2g, #niveau4-3g, #niveau4-1d, #niveau4-2d, #niveau4-3d 
  {
 /* on enlève le centrage à gauche des carrés */
    float:none;
    clear:both;
/* on prend toute la largeur du bloc  */
     width:100%;
     min-width:100%;
     max-width:100%;
     height: auto;
     display: block; 
    
/* On les centre dans la page   */
    text-align:center;
    margin:auto;
    margin-left:auto;
    margin-right:auto;

/* marges entre les blocs   */
    margin:0px;
    padding:0px;

  }



  #image2, #image3, #image2a, #image3a, #image2b, #image3b
  {

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

  /* on redéfinit la taille de la photo   */
    width: 150px;
    height:auto; 
    min-height:127px;
    display: block; 

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

  }


#niveau4-1gt, #niveau4-2gt, #niveau4-3gt, #niveau4-1dt, #niveau4-2dt, #niveau4-3dt
  {
/* on enlève le centrage à gauche des carrés */
    float:none;
    clear:both;

  /* on redéfinit la taille du bloc texte   */
     width:70%;
     height: auto;
     display: block; 
    
/* On les centre dans la page   */    
    text-align:center;
    margin:auto;
    margin-left:auto;
    margin-right:auto;

/* marges entre les blocs   */
    padding-top: 10px; 
    padding-bottom:10px; 
  }

}


/*                                         */
/*          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        */ 
/*                                         */


/*                                         */
/*          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; */
  }


}