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

body
{
  
    background-image: url("arriere-plan.jpg");
    background-attachment:fixed;
    background-repeat: repeat; 


    font-family: Arial, "Times New Roman", Impact, "Arial Black",  Verdana, sans-serif;

    font-size: 100%;   
    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: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:50px;     /* 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: 10px; /*   8px; */
    text-decoration: none;
    font-size: 180%;   /* 180%; */   
    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;
  }
}




/*********************************************************/
/* Corps de la page web                                  */
/*********************************************************/


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

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

/*  margin-top:180px; */
}

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

/*********************************************************/
/*2ème carre positionné à 20% de la gauche de la page    */
/*  avec affichage de l'image de bienvenue               */
/*********************************************************/

#bienvenue 
{
  width:70%;
  height:70px;

  margin-left:20%;
  background-image: url("bienvenue.gif");
  background-repeat: no-repeat; 
  color:white;
}

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

#niveau2 
{

  float:none;
  clear:both;

  max-width:960px;
  height:auto;
  min-height:474px;
  max-height:999px; /* 948px; */

/* 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 */
/*********************************************************/
#niveau3 
{
  float:left; 
  color:black;

/*   text-align:left; */
  margin-top:0px;
  margin-left:0px;
  margin-right:0px;
}


/*********************************************************/
/*Affichage de l'Arc de Triomphe à gauche de niveau 3    */
/*                                                       */
/*********************************************************/
#niveau3a
{
  float:left; 

  width: 474px; /*474px */
  height:auto;
  min-height: 474px;
  min-width: 474px; /* 474px */ 
  
  margin-top:0px;
  margin-left:0px;
 
  background-image: url("image2.jpg"); 
  background-repeat: no-repeat;
}

/*********************************************************/
/* Carré blanc pour le texte                             */
/*  positionné à gauche de l'image                       */
/*  par margin-left=width de niveau3a (l'image)          */
/*********************************************************/

#niveau3b
{
  width: 474px;
  height:auto;
  min-height: 454px;
  min-width: 100px;

  margin-top:0px;
  margin-left:474px;
  padding-top:5px;   /* 20px */
padding-bottom:5px;

  background-color:white;
}

/*********************************************************/
/* Zones de texte                                        */
/*********************************************************/

#niveau3b h1
{

padding-left: 1%;   

font-family:Arial;  
font-size: 200%;              
font-weight: bold;
line-height: 0.5em;  /* 0.5em;*/ 
}

#niveau3b h3
{

padding-left: 1%; 
text-align:center;
font-family:Arial;  
font-size: 110%; 
font-weight: bold;
line-height: 0.5em;   
}

#niveau3b mark
{
text-decoration: underline;
background-color: transparent;
font-weight: bold; 
}

#niveau3b strong
{
font-weight: bold; 
}

#niveau3b .milieu
{

  margin:auto; 
  margin-left: auto;
  margin-right: auto;
  text-align:center;

  font-family:Arial;  
  font-size: 120%; 
  white-space:pre;
  display:block; 
}

#niveau3b span
{

/* text-align: center;*/
font-family:Arial;  
font-size: 100%; 
white-space:pre;

padding-left: 1%; 
display:block; 
}


#niveau3b p
{

  margin:auto; 
  margin-left: auto;
  margin-right: auto;
  text-align:center;
  text-decoration:none;
  
  color: black;
  font-family:Arial;  
  font-size: 150%; 
  font-weight: bold;
  line-height: 0.5em; 
}

#niveau3b a
{
  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; 

  
 display:block;
 text-align:center;
 text-decoration:none;
 color: white;
 font-weight: bold; 

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


}
#niveau3b a:hover
{
  
  color: black;

}

/*********************************************************/
/* Impact pour les mobiles et tablettes                  */
/*********************************************************/

@media screen and (max-width: 961px)  
{

    #niveau1, #bienvenue, #niveau2, #niveau3, #niveau3a, #niveau3b
  {
 /* on enlève le centrage à gauche des carrés */
    float:none;
    clear:both;

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


/*********************************************************/
/* bas de la page web                                  */
/*********************************************************/

/*********************************************************/
/* 1er carré de 955 de large couleur bleue               */
/*     centré au milieu                                  */
/*********************************************************/

footer 
{
  float:none;
  clear:both;
  
  float;left;
  width:100%;
  height:auto;

  margin-top:0px;

/*
   max-width:955px;
  height:auto;
  min-height:50px;
  max-height:50px; 
  
  background-color: rgb(24,33,83);    
  background-attachment:fixed;
  background-repeat: repeat;
 
 text-align:left;
  
  margin:auto;
  margin-top:0px;
  */
}


#baspage 
{
  float:none;
  clear:both;

  max-width:955px;
  height:auto;
  min-height:50px; 
 max-height:100px; 

 background-color: rgb(24,33,83);    
  background-attachment:fixed;
  background-repeat: repeat;

  margin:auto;
  margin-top:0px;
}


/*********************************************************/
/* 2ème carré  contenant le texte de création            */
/*     à gauche dans le 1er carré                             */
/*********************************************************/

#creation 
{
  float:left; 
  text-align:left;

  width:48%;
  height:50px;

  color:white;

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

/*********************************************************/
/* 3ème carré  contenant les logos                       */
/*     à droite dans le 1er carré                        */
/*********************************************************/
#logos
{
 /* background-color: rgb(24,33,83); */
  float:right; 

  width: 48%;
  height:50px;
  margin-top:0px;
  margin-left:0px;
}


/*********************************************************/
/* Affichage des logos à gauche di 3ème carré            */
/*                                                       */
/*********************************************************/
#linkedin, #facebook, #twitter, #googlep, #instagram  
{
 float:left;
 width:2%;   
 min-width: 30px;

 margin-top:12px;
 margin-left: 5%;
}


/*********************************************************/
/* Impact pour les mobiles et tablettes                  */
/*********************************************************/
@media screen and (max-width: 961px)  
{

 #baspage, #creation, #logos 
  {
    float:none;
    clear:both;

    width:474px;
    
    background-color: rgb(24,33,83);  

    text-align:center;
   
    padding:0px;
    margin:0px;
    margin:auto;
    margin-left:auto;
    margin-right:auto;
  }
  #baspage
  {
    height:70px;
  }

  #creation
  { margin-top:0px;
    height:20px;
  }
  #logos
  { 
    height:50px;
  }

  #linkedin 
  {
    margin-left: 27%;
  }
}