@charset "utf-8";
/* *************** CSS Document for psychologue-enligne-geraldinesaintgeorges.fr ************* */

/* Généralités */
* {margin:0;padding:0} /* reset */
html {font-size:100%}  /* 1rem = font-size par défaut du navigateur (16px) */
body {background:#C3C3c3;color:black;font-family:calibri,sans-serif}
#page {background:white;width:100%;min-width:320px;max-width:1024px;margin:10px auto;font-size:1rem}
img {width:100%;display:block;margin:auto}
.blue {color:#2A5399}
.red {color:red}
.hidden, .montrersiburger, #le-mot-menu {display:none}
/* figcaption {font-size:0.9em;font-style:italic;padding:10px 10px 30px 10px} */
article p {text-align:justify;margin:0.5em 0}
table {margin:auto}
/*.cesure {
	-webkit-hyphens:auto;
    -moz-hyphens:auto;
    -ms-hyphens:auto;
	hyphens:auto}*/

/* Titres */
h1, h2, h3 {color:#F7714C;font-weight:bold}
h1 {font-size:1.4rem;margin:0.5rem 0 1.5rem 0;text-align:center}
h2 {font-size:1.2rem;margin:1rem 0 0 0}
h3 {font-size:1rem;margin:1rem 0 0 0}
h1.hidden+h2 {margin:0;text-align:center}
.normal    {font-weight:normal;color:black;font-size:1rem;text-align:justify}
.encartitre {text-align:center;color:#F7714C;font-weight:bold;font-size:1.2rem;margin:1rem 0 0 0}

/* Listes */
main ul, aside ul {margin:0 0 0 20px;list-style-position:outside}
main ul {padding-left:10px}

/* Liens */
main a    {text-decoration:underline}
#mailto a {text-decoration:none;font-size:0.9rem}
article .ensavoirplus {text-align:right;margin:0 0 2rem 0;font-style:italic}
article .ensavoirplus a {color:#2A5399}
aside .ensavoirplus {text-align:center;padding:0.5rem}
#mailto a:focus, #mailto a:link, #mailto a:active, #mailto a:visited {;text-decoration:none;color:inherit}
.encart a:focus, .encart  a:link, .encart a:active, .encart a:visited {;text-decoration:none;color:inherit}


/* Bandeau */
#bandeau {width:100%;display:table}
#logo {display:table-cell;vertical-align:middle;text-align:center;padding:5px}
#bandeautexte {display:table-cell;vertical-align:middle;font-weight:bold;text-align:center;	margin:0}
#bandeautexte a {text-decoration:none}
#bandeautitre a {color:#2A5399}
#bandeausoustitre {font-size:0.9em}
#bandeausoustitre a {color:#F7714C}
#logo {
	-webkit-transition:all linear .3s;
	-moz-transition:all linear .3s;
	-ms-transition:all linear .3s;
	-o-transition:all linear .3s;
	transition:all linear .3s}
#logo:hover {overflow:hidden;
	-webkit-transform:scale(1.1,1.1);
	-moz-transform:scale(1.1,1.1);
	-ms-transform:scale(1.1,1.1);
	-o-transform:scale(1.1,1.1);
	transform:scale(1.1,1.1)}

/* Menu classique (et menu pied de page) */
#menu {font-size:0.9em}
footer {font-size:0.85rem}
nav {background:#2A5399;text-align:center;padding:1px 10px}
nav ul {display:inline;text-align:inherit}
nav li {display:inline;list-style:none;padding:0 10px}
nav a {text-decoration:none;color:white;white-space:nowrap;line-height:1.75em}
nav a:hover {background:#eee;color:#2A5399;opacity:0.9}
#actif {background:#eee}
#actif a {color:black}
.vignette {display:none;text-align:center}

/* Corps */
#corps, aside, main {padding:10px 10px 10px 10px}
.whatsapp img {height:1.5rem}

/* Aside */
/*.illustration {width:192px;margin:-8px -8px 10px -8px}*/
#coordonnees {padding:1em 0 1em 0;color:white}
.illustration {max-width:192px;margin:auto;margin-top:10px;padding-bottom:10px}
.logospecialiste {margin:20px auto;max-width:200px}
aside {background:#2A5399;text-align:center}
.contact {font-style:italic;line-height:1.5em;padding:50px 0}
.encart {text-align:center;font-style:italic;color:white}
.encart p {margin:20px 0}

/* Page Contact - Style spécifique placé dans la page Contact */

/* Page Mentions - Style spécifique placé dans la page Mentions */

/* Retour haut de page */
#fleche {position:fixed;bottom:10px;right:calc(50% - 490px);font-size:1em}

/* Footer */
#copyright {font-style:italic;font-size:0.8rem;text-align:left;padding:2px 0 0 10px}
#copyright img {width:0.5rem;display:inline}


/*////////////////////////////////////////////////////////////////*/
/*//////////////////////// Media Queries /////////////////////////*/
/*////////////////////////////////////////////////////////////////*/

/*///////// Grands écrans //////////*/
@media screen and (min-width:1025px) { 
#logo {width:150px;padding:10px 10px}
#bandeautexte {font-size:2.3rem;line-height:1.2em}
#menu {display:block!important}
#le-mot-menu {display:none!important}
aside {float:right;width:212px;margin:15px 0 10px 20px}
#corps:after {content:"";display:block;clear:both}
}

/*///////// Tablettes //////////*/
@media screen and (min-width:768px) and (max-width:1024px) { 
.menu-ul {display:table;margin:auto}
#logo {width:100px}
#bandeautexte {font-size:2rem;line-height:1.1em}
#menu {display:block!important}
#le-mot-menu {display:none!important}
aside {float:right;width:212px;margin:15px 0 10px 20px}
#corps:after {content:"";display:block;clear:both}
#fleche {position:fixed;bottom:10px;right:0;font-size:1em}
}

/*///////// Grands smartphones format paysage //////////*/
@media screen and (min-width:531px) and (max-width:767px) {
/*.menu-ul {display:table;margin:auto}*/
#logo {width:80px}
#bandeautexte {font-size:1.7rem;line-height:1em}
#corps {
  	display: -webkit-box;
 	display: -moz-box;
 	display: -ms-flexbox;
	display: -webkit-flex;
  	display: flex; 
  	-webkit-flex-flow: row wrap;
  	flex-flow: row wrap}
aside, main {flex: 1 auto}
aside {order:2}
main  {order:1}
#fleche {position:fixed;bottom:50px;right:0;font-size:1rem}
    
/* Menu Burger */
#coordonnnesdetete {padding-bottom: 10px}
.cachersiburger {display:none}
.montrersiburger {display:block;text-align:center;font-size:0.9rem}
#burger span {display:block;width:30px;height:4px;border-radius:5px;background:#2A5399;margin-bottom:.2rem}
#le-mot-menu {display:block;text-align:center;font-size:0.7em;margin-top:-3px;color:#2A5399}
#vignettetmenu {min-width:calc(50% + 75px);float:right}
.vignette {display:table-cell;vertical-align:top;width:60px;text-align:center}
figure.vignette {width:150px}
/*img {display:block;margin:auto}*/
#menuburger {display:table-cell;vertical-align:top}
#menuburger #menu a {color:#2A5399}
#burger {float:right;padding:5px}
#menu {display:none;text-align:left;margin-left:2px;font-size:0.8em}
#menu li {display:block;text-align:left;padding-left:0}
#menu, #actif {background-color:#eee}
header:after {content:"";display:block;clear:both}
#burger:hover {cursor:pointer}
}


/*///////// Petits smartphones format paysage //////////*/
@media screen and (min-width:421px) and (max-width:530px) {
#logo {width:70px}
#bandeautexte {font-size:1.2rem;line-height:1em}
#menu {display:block!important}
#le-mot-menu {display:none!important}
#corps {
  	display: -webkit-box;
 	display: -moz-box;
 	display: -ms-flexbox;
	display: -webkit-flex;
  	display: flex; 
  	-webkit-flex-flow:row wrap;
  	flex-flow:row wrap}
aside, main {flex: 1 auto}
aside {order:2}
main  {order:1}
#fleche {position:fixed;bottom:50px;right:0;font-size:1rem}
}


/*///////// Smartphones format portrait //////////*/
@media screen and (max-width:420px) { 
#logo {width:60px}
#bandeautexte {font-size:0.9rem;line-height:1.5em;}
#corps {
  	display: -webkit-box;
 	display: -moz-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
  	display: flex; 
  	-webkit-flex-flow: row wrap;
  	flex-flow: row wrap;
}
aside, main {flex: 1 auto}
aside {order:2}
main  {order:1}
#fleche {position:fixed;bottom:50px;right:0;font-size:1rem}

/* Menu Burger */
#coordonnnesdetete {padding-bottom: 10px}
.cachersiburger {display:none}
.montrersiburger {display:block;text-align:center;font-size:0.9rem}
#burger span {display:block;width:30px;height:4px;border-radius:5px;background:#2A5399;margin-bottom:.2rem}
#le-mot-menu {display:block;text-align:center;font-size:0.7em;margin-top:-3px;color:#2A5399}
#vignettetmenu {min-width:calc(50% + 75px);float:right}
.vignette {display:table-cell;vertical-align:top;width:60px;text-align:center}
figure.vignette {width:150px}
/*img {display:block;margin:auto}*/
#menuburger {display:table-cell;vertical-align:top}
#menuburger #menu a {color:#2A5399}
#burger {float:right;padding:5px}
#menu {display:none;text-align:left;margin-left:2px;font-size:0.8em}
#menu li {display:block;text-align:left;padding-left:0}
#menu, #actif {background-color:#eee}
header:after {content:"";display:block;clear:both}
#burger:hover {cursor:pointer}
}

/*///// Remettre le menu classique quand on a refermé le burger puis élargi l'écran ///////*/
/*///// Car le javascript document.getElementById('menu').style.cssText='display:none'; ///*/
/*///// insère un style dans le code html : <nav id="menu" style="display: none">  ////////*/
@media screen and (min-width: 421px) and (max-width:530px) {
#menu {display:block!important}
#le-mot-menu {display:none!important}
}

/*///// Réduire de façon harmonieuse toutes les tailles de polices en orientation paysage ////*/
/*///////////////////  (car bug sur les périphériques iPhone et iPad)  ///////////////////////*/
@media (max-device-width:768px) and (orientation:landscape) {
html {-webkit-text-size-adjust:100%;-ms-text-size-adjust: 100%;}
}