@charset "utf-8";
/* CSS Document */

@media all and (max-width: 2000px) {
    #bloc-andree-contenu-inner { padding-right: 20%;}
}

@media all and (max-width: 1900px) {
    header #logo {width: 300px; margin: 50px 0; padding-bottom: 30px;}
    h1 {font-size: 40px;}
    h2 {font-size: 30px;}
    #bloc-andree-contenu-titre {font-size: 25px;}
    #bloc-andree-contenu-sous {font-size: 19px;}
    #bloc-andree-contenu p {font-size: 20px; margin-bottom: 80px;}
    .bloc-andree-contenu-nom {font-size: 30px;}
    .bloc-andree-contenu-nom span {font-size: 18px;}
    .bloc-andree-contenu-nom::after {height: 80px;}
    
    .service-element-inner, .service-element-prix {padding: 30px;}
    .service-element-prix {font-size: 19px;}
}


@media all and (max-width: 1600px) {
    .div-inner {width: 90%;}
}


@media all and (max-width: 1450px) {
    #bloc-andree {margin-top: 60px;}
    #bloc-andree-contenu-inner {padding-right: 0;}
    .bloc-andree-contenu-nom span {display: block; margin-left: 0;}
    #bloc-andree-contenu-sous {margin-bottom: 20px;}
    #bloc-andree-contenu p {margin-bottom: 40px; font-size: 19px;}
    
    #bloc-seance-contenu p {font-size: 20px;}
    
    .service-element-sous {font-size: 14px;}
    .service-element-titre {font-size: 22px;}
    .service-element-liste-titre, .service-element ul {font-size: 18px;}
}


@media all and (max-width: 1250px) {
    .service-element-inner, .service-element-prix {padding: 20px;}
    #bloc-services-liste {column-gap: 20px;}
    .service-element {width: calc(33% - 14px);}
        
    #bloc-seance-contenu p {padding: 30px 0;}
    
    footer { padding: 3vw 0 400px 0; background-size: 50% auto;}
    .footer-coordonnees-div {font-size: 24px;}
    #footer-social a {width: 60px; height: 60px; background-size: 30px 30px; border: 1px solid #4e56a2;}
}

@media all and (max-width: 1000px) {
    .btn-arrondi {font-size: 18px; letter-spacing: 1px; padding: 20px 80px 18px 30px;}
    
    #bloc-andree-photo img {width: 100%;}
    
    #bloc-services, #bloc-seance {padding: 50px 0;}
    .service-element {margin-bottom: 20px;}
    #bloc-services-liste {flex-direction: column; margin-bottom: 30px;}
    .service-element {width: 100%;}
    #bloc-services-legende {padding: 0;}
    
    #bloc-seance .div-inner {display: flex; align-items:baseline; flex-direction: column-reverse;}
    #bloc-seance-video, #bloc-seance-contenu {width: 100%; margin-bottom: 30px;}
    #bloc-seance-contenu-inner {padding-left: 0;}
    
    footer { padding: 3vw 0 300px 0;}
}


@media all and (max-width: 800px) {
    .btn-arrondi {display: block; text-align: left; margin: 0 0 10px 0 !important;}
    
    h1 {font-size: 35px;}
    h2 {font-size: 25px;}
    #bloc-andree {margin-top: 30px; text-align: center;}
    #bloc-andree-photo img {width: 70%; display: inline-block;}
    #bloc-andree .div-inner {flex-direction:row; flex-wrap: wrap; align-items: baseline;}
    #bloc-andree-photo, #bloc-andree-contenu {width: 100%; }
    .bloc-andree-contenu-nom-cell {display: block;}
    .bloc-andree-contenu-nom-desk {display: none;}
    .bloc-andree-contenu-nom {margin-top: -16px;}
    
    footer { padding: 40px 0 300px 0; text-align: left !important;}
    #footer-coordonnees {flex-direction: column;}
    .footer-coordonnees-div:first-child {padding-right: 0; text-align: left !important;}
    .footer-coordonnees-div:last-child {padding-left: 0;}
    .footer-coordonnees-div:first-child::after {display: none;}
}

@media all and (max-width: 640px) {  
    header #logo {width: 250px; margin: 30px 0; padding-bottom: 20px;}
    h1 {font-size: 32px;}
    h2 {font-size: 22px;}
    
    .btn-arrondi {font-size: 16px;}
    
    #bloc-andree-photo img {width: 90%;}
    
    footer { padding: 40px 0 100px 0;}
    .footer-coordonnees-div {font-size: 20px;}
    
    .video-control {
        width: 60px; height: 60px;}
    .video-control-play, .video-control-pause {width: 20px; height: 20px;
}

@media all and (max-width: 400px) { 
    .bloc-andree-contenu-nom {font-size: 20px; margin-top: -10px;}
}