* {
    box-sizing:border-box;
}

html, body {
    margin:0;
    padding:0;
    font-size:15px;
}

html {
    scroll-behavior:smooth;
}

body {
    background-color:#ffffff;
}

.clearfix::after {
      content: "";
      clear: both;
      display: table;
}

@font-face {
    font-family:Alice;
    src:url(fonts/Alice-Regular.ttf)
}

@font-face {
    font-family:CelloSansLight;
    src:url(fonts/hinted-CelloSans-Light.ttf)
}

@font-face {
    font-family:CelloSans;
    src:url(fonts/hinted-CelloSans-Regular.ttf)
}

@font-face {
    font-family:CelloSansMedium;
    src:url(fonts/hinted-CelloSans-Medium.ttf)
}

@font-face {
    font-family:CelloSansBold;
    src:url(fonts/hinted-CelloSans-Bold.ttf)
}

h1,h2,h3,h4 {
    font-family:Alice;
    text-align:center;
}

p, table {
    font-family:CelloSans;
    color:#4c2e27;
}

li {
    font-family:CelloSansLight;
}

nav a {
    font-family:CelloSansMedium;
}

header {
}



h1 {
    color:#f0b62b;
    text-shadow: 1px 1px 2px black;
    font-size:3.5rem;
    text-transform:uppercase;
    margin-top:0;
    margin-bottom:0;
    padding-top:1.5rem;
}

h1.mobile-flex-cont {
    line-height:3.3rem;
    margin-bottom:1rem;
}

h1.noindex {
    font-size:2.5rem;
}

h2 {
    color:#006480;
    font-size:2rem;
    margin-top:0;
    margin-bottom:2.5rem;
}

h3 {
    color:#006480;
    font-size:1.8rem;
    margin-top:;
    margin-bottom:;
}

h4 {
    color:#006480;
    font-size:1.4rem;
    margin-top:;
    margin-bottom:;
}

p.principal {
    margin:1rem 1rem;
}

.center {
    text-align:center;
}

div#intro {
}

div.bloc {
    margin-top:5rem;
}

img.ctral {
    width:100%;
    height:auto;
}

div.mediab {
    text-align:center;
}

div.bord.outils.up {
    height:7vh;    
    background-color:#ddc388;
    clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
    margin-top:1rem;
}

div#outils {
    background-color:#ddc388;
    padding:2rem 0 0;
}

div.bord.outils.down {
    display:none;
}

div#outils img {
    width:100%;
    height:auto;
}

.desktop-flex-cont {
    display:none;
}
    
    img.opac {
}

div.legend li {
    margin:1rem;
    color:#4c2e27;
}

.shmn {
    margin-top:2rem;
}

div#quisuisje p {
    color:#4c2e27;
    margin:1rem 1rem;
}

img.portrait {
    display:block;
    width:70%;
    height:auto;
    margin:2rem auto;
    border:2px solid #f0b62b;
    border-radius:50%;
}

#outils img {
    border-top:1px solid black;
    border-bottom:2px solid black;
}

#outils img.last-img {
    border-bottom:none;
}

div#seances {
    background-color:#bedee8;
    padding:3rem;
    border-radius:10%;
}

div#seances h3 {
   margin-top:0;
}

table {
    width:50%;
    margin:auto;
    text-align:center;
    border:1px solid white;
}

table.menu {
    width:100%;
    background-color:#f0b62b;
    text-transform:uppercase;
    text-align:center;
    font-size:0.8rem;
    border:none;
    padding-top:3px;
}

table.menu a {
    text-decoration:none;
    color:#006480;
}

table.menu a:hover {
    text-decoration:underline;
}

td.tag {
    border:1px solid white;
}

td.prix {
    border:1px solid #bedee8;
    background-color:white;
}

div#contact {
    margin-top:5rem;
    padding-bottom:4rem;
}

nav {
    background-color:#f0b62b;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around;
    align-items:center;
    padding:0.5rem;
}

nav a {
    color:#006480;
    text-transform:uppercase;
    text-decoration:none;
}

nav a:hover {
    text-decoration:underline;
}

nav.mobile-flex-cont a {
    font-size:0.9rem;
    line-height:1.5rem;
} 

nav.mobile-flex-cont {
    padding-top:5px;
    padding-bottom:0;
}

span.quote {
    font-size:1.2rem;
}

p#rdv {
    margin-bottom:1rem;
}

img.num {
    display:block;
    width:200px;
    height:auto;
    margin:1rem auto;
}

button {
    display:block;
    margin:auto;
    background-color:#f0b62b;
    font-family:CelloSansBold;
    color:white;
    text-transform:uppercase;
    font-size:1rem;
    width:180px;
    height:38px;
    border:1px solid #006480;
    border-radius:5px;
}

.phonelk {
    text-decoration:none;
}

a.stick.phonelk button {
    display:none;
    }

.mobile-hide {
    display:none;
}

a.telmob {
    display:inline-block;
    z-index:1000;
    position:fixed;
    top:10px;
    left:10px;
}

a.telmob img {
    width:35px;
    height:35px;
}

ul.listdt {
    color:#006480;
    text-align:center;
    list-style-type:none;
}

li {
} 

img.form {
    display:block;
    width:50%;
    margin:3rem auto;
    border-radius:5px;

}

video {
    width:100%;
    height:auto;
}

footer {
    clear:both;
    border-top:1px dotted grey;
    margin-top:6rem;
    text-align:center;
}


footer p {
    color:grey;
    text-align:center;
    font-style:italic;
    clear:both;
    font-size:0.85em;
    margin:5px;
} 

footer a {
    color:grey;
    text-align:center;
}

@media screen and (min-width:640px) {
 
h1.noindex {
    font-size:3rem;
}   

video {
    width:75%;
    height:auto;
}

.mobile-hide {
    display:flex;
  }

h1.mobile-hide {
    display:block;
  }

html, body {
    font-size:18px;
}

p,li,table {
    font-size:20px;
}

p.principal {
    margin:2.5rem 5rem;
}

.mobile-flex-cont {
    display:none;
}

a.mobile-flex-cont img {
    display:none;
}

.desktop-flex-cont {
    display:flex;
    flex-wrap:wrap;
    margin-top:5rem;
}

img.flex-item {
    display:block;
}

.flex-item  {
    flex:0 0 50%;
}

.legend.flex-item {
    padding:55px;
}

.shmn {
    margin-top:0;
}

.shmn ul  {
    width:50%;
    margin:auto;
}
.shmn h4 {
    width:50%;
    margin:2rem auto;
}

img.shmn {
}

img.portrait {
    width:30%;
    height:auto;
    border:2px solid #f0b62b;
    border-radius:100%;
    margin:2.5rem;
    float:left;
}

div#quisuisje p.first {
    padding-top:2.5rem;
}

div#quisuisje p {
    padding:0rem 2rem;
}

div.bord.outils.up {
    height:20vh;    
    background-color:#ddc388;
    clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
}

#outils img.first-img {
    clip-path: polygon(80% 0, 100% 18%, 100% 100%, 0 100%, 0 0);
    border-top:none;
    border-left:none;
}

#outils div.legend {
    border:1px solid black;
}


#outils div.legend.first {
    border-top:none;
    border-left:none;
    border-right:none;
}
    
#outils div.legend.shmn {
    border:none;
}

#outils img {
    border:1px solid black;
}



div.bord.outils.down {
    display:block;
    height:20vh;    
    background-color:#ddc388;
    clip-path: polygon(100% 0%, 0% 0%, 100% 100%);
}

div#seances {
    width:50%;
    float:left;
}

div#contact {
    width:50%;
    float:right;
    margin-top:12rem;
    margin-bottom:5rem;
    clear:right;
}

a.stick.phonelk button {
    display:inline-block;
    z-index:1000;
    color:#006480;
    position:fixed;
    top:3px;
    right:6px;
  cursor: pointer;
  outline: none;
    text-decoration:none;
}

button:hover {background-color:1}

button:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);






}