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

@media all and (max-width: 2100px) {
    #header-logo {width: 300px;}
    #header-menu a {font-size: 20px;}
    #home-top-phrase {font-size: 80px;}
    
    #produit-specs { padding: 10px 20px;}
    .produit-spec {padding-left: 40px; font-size: 16px; margin-left: 60px;}
    .produit-spec::before {width: 30px; height: 30px;}
    .produit-spec-prix {font-size: 30px;}
    .produit-spec-prix span {font-size: 14px;}
    
    #seance-half-photo {width: 60%;}
    #seance-half .seance-infos {width: 80%;}
    
    #page-top .titre-sous {font-size: 35px;}
    h1 {font-size: 65px;}
    h1 + p, #produit-titre + #produit-specs, h1 + .cols {margin-top: 50px;}
    h2 {font-size: 55px;}
    .single-post h2 {font-size: 45px; padding-bottom: 30px;}
    h3, .gform_confirmation_message {font-size: 40px;}
    #page-top p {padding: 0 10vw;}
    
    #menu-secondaire a {width: 30px; height: 30px; font-size: 14px;}
}



@media all and (max-width: 1600px) {
    .div-inner {padding-left: 5vw; padding-right: 5vw;}
    
    .btn-carre, .gform_wrapper .gform_button, .wp-element-button {padding: 15px 20px; font-size: 16px;}
    .btn-carre:hover:after {width: 400px; height: 400px;}
    
    #header-menu a {font-size: 18px;}
    #home-top-phrase {font-size: 70px;}
    #home-top-andree {width: calc(80% - 20vw);}
    
    .accueil-service-infos .accueil-service-sous {font-size: 25px;}
    .bloc-service-contenu, .bloc-service-large { padding-bottom: 200px;}
    .home .accueil-service-infos {padding: 100px 0;}
    
    #liste-even-left p {font-size: 22px;}
    .even-element p span {display: block; margin-left: 0; margin-top: 5px;}
    .even-element {padding: 20px 80px 20px 30px; margin-bottom: 15px;}
    .even-element:before {right: 30px; height: 20px; width: 20px;}
    #liste-even .div-inner {column-gap: 10%;}
    #liste-even .div-inner div {width: 45%;}
    
    #footer-haiku-texte {font-size: 35px;}
    #footer-haiku-autrice {font-size: 24px;}
    #footer-logo {width: 150px; margin-bottom: 50px;}
    #footer-infos p {padding-bottom: 50px;}
    #footer-infos-droit a {font-size: 22px; padding: 10px;}
    
    #service-aide-left .accent {font-size: 30px;}
    #service-aide-droit input[type="text"] {font-size: 20px; padding: 15px 20px; width: calc(100% - 40px);}
    
    #bloc-temoignage-poste {font-size: 28px;}
    #bloc-temoignage-fonction {font-size: 24px;}
    
    .produit-carte-petit-titre {font-size: 20px;}
    
    #services-apropos p {font-size: 24px;}
    
    .menu-principal-container > ul, .menu-main-container > ul {margin-top: 40px;}
    
    #comments {padding: 20px;}
    
    #page-top .titre-sous {font-size: 30px;}
    h1 {font-size: 60px;}
    h2 {font-size: 50px;}
    .single-post h2 {font-size: 40px; padding-bottom: 20px; padding-top: 20px;}
    h3, .gform_confirmation_message {font-size: 35px;}
    .single-post h3 {font-size: 30px;}
    p, ul, ol {font-size: 20px;}
    #contenu ul li::before {top: 10px;}
    #page-top p {font-size: 25px;}
}


@media all and (max-width: 1300px) {
    header {width: calc(100% - 100px);}
    .marge-faible {padding-right: 50px; padding-left: 50px;}
    .marge-forte {padding-right: 100px; padding-left: 100px;}
    .marge-blocs {padding-top: 80px; padding-bottom: 80px;}
    
    #header-logo {width: 250px;}
    #header-menu a {font-size: 17px;}
    #home-top-phrase {font-size: 60px;}
    #home-top-andree {width: calc(95% - 29vw);}
    #home-top-phrase-l1, #home-top-phrase-l2 {padding-left: 25vw;}
    
    #services-montagne-soleil::before {filter: blur(5px);}
    
    #service-aide .div-inner {gap : 10%;}
    #service-aide .div-inner > div {width: 45%;}
    
    #service-aide-feuille {width: 700px; height: 700px; background-position: bottom left;}
    
    .accordion h3 a {padding: 15px 0; font-size: 24px;}
    .accordion h3 a::after { top: 15px;}
    
    #produit-specs { padding: 8px 15px;}
    .produit-spec {padding-left: 30px; font-size: 16px; margin-left: 50px;}
    .produit-spec::before {width: 25px; height: 25px;}
    .produit-spec-prix {font-size: 25px;}
    .produit-spec-prix span {font-size: 14px;}
    
    .produit #service-aide-fleche, .service #service-aide-fleche {display: none;}
    
    #seance-half-photo {bottom: -80px;}
    
    .nouvelles-element {align-items: flex-start; margin-bottom: 30px; padding-bottom: 30px;}
    .nouvelles-element .accueil-nouvelle-image {width: 33%;}
    .nouvelles-element .accueil-nouvelle-contenu {width: 66%}
    .bloc-contenu-nouvelle-photo-img {width: 42vw;}
    #bloc-contenu-nouvelle-date, #bloc-publication-cat {font-size: 15px;}
    
    #contenu-menu {width: calc(55%);}
    #activites-menu {width: calc(45% - 4vw);}
    
    .single-formation #contenu .div-inner {flex-direction: column;}
    #formation-gauche, #formation-droit {width: 100%;}
    
    h1 {font-size: 55px;}
    h1 + p, #produit-titre + #produit-specs, h1 + .cols {margin-top: 40px;}
    h2 {font-size: 45px;}
    .single-post h2 {font-size: 35px; padding-bottom: 30px;}
    h3 {font-size: 30px;}
    .single-post h3 {font-size: 25px;}
    p, ul, ol {font-size: 19px;}
    #contenu p, #contenu ul, #contenu ol { padding-bottom: 20px;} 
}



@media all and (max-width: 1000px) {
    header {padding-top: 20px; padding-bottom: 20px; width: calc(100% - 40px);}
    
    #menu-secondaire {right: 150px;}
    #menu-secondaire a { padding-top: 20px;}
    #header-icon-panier img, #header-switcher span, #header-moncompte img {top: auto; transform: translateX(-50%);}
    #header-icon-panier img { bottom: 0;}
    #header-switcher span {bottom: 5px;}
    
    .btn-carre, .gform_wrapper .gform_button, .wp-element-button {padding: 10px 15px; font-size: 15px; margin-top: 20px;}
    
    .marge-faible {padding-right: 20px; padding-left: 20px;}
    .marge-forte {padding-right: 50px; padding-left: 50px;}
    .marge-blocs {padding-top: 40px; padding-bottom: 40px;}
    
    .div-inner {padding-left: 20px; padding-right: 20px;}
    .seance-infos-inner {padding: 30px;}
    
    #home-top-phrase {text-align: center; font-size: 45px; padding-top: 150px;}
    #home-top-phrase-l1, #home-top-phrase-l2 {padding-left: 0;}
    #home-top-photo {top: 250px;}
    
    .home .accueil-service-infos {padding: 60px 0;}
    .bloc-service-contenu, .bloc-service-large {width: 100%;}
    .accueil-service-infos .accueil-service-sous {font-size: 22px;}
    #accueil-service-3 {text-align: left;}
    #accueil-service-3-stack {gap: 30px; flex-direction: column;}
    .bloc-service-large {opacity: 1 !important; padding-bottom: 100px;}
    .accueil-service-triptique:nth-child(1), .accueil-service-triptique:nth-child(3) {padding-top: 0;}
    
    #services-montagne-container {display: none;}
    
    footer {background-position: top left;}
    #footer-logo {width: 100px;}
    #footer-social a {width: 50px; height: 50px;}
    #footer-haiku {width: 100%; margin-left: 0; text-align: center; padding-top: 200px;}
    #footer-haiku-texte {font-size: 30px;}
    #footer-haiku-autrice {padding-left: 0;}
    #footer-haiku-autrice::before {display: none;}
    #footer-haiku-autrice span {display: inline-block;}
    #footer-soleil {mask-position: top left;}
    #footer-soleil-forme {top: 100px; left: 250px;}
    
    #page-top {padding-top: 150px;}
    #page-top .titre-sous {font-size: 25px;}
    #page-top p {font-size: 22px;}
    
    .produit #page-top .div-inner {display: flex; align-items: center; text-align: left;}
    #produit-image-rond {display: none;}
    #produit-specs {flex-direction: column; align-items: flex-start; border-radius: 20px; padding: 20px; width: calc(100% - 40px);}
    .produit-spec {margin-bottom: 15px; width: calc(100% - 30px);}
    .produit-spec, .produit-spec-prix {margin-left: 0 !important;}
    .produit-spec-prix {margin-top: 10px; padding-top: 20px; margin-bottom: 0; border-top: 1px solid rgba(0,0,0,0.1); width: 100%;}
    
    #produit-cross .div-inner {flex-direction: column;}
    #produit-cross .produit-carte {width: 100%; margin-bottom: 50px;}
    #seance-half {width: 100%;}
    #seance-half-photo {width: 400px;}
    #seance-half .seance-infos-inner {padding-right: 150px;}
    
    #bloc-temoignage-titre {padding-bottom: 15px; margin-bottom: 15px;}
    
    .cols {display: block;}
    .cols .col {width: 100%; margin-bottom: 40px;}
    .cols .col:first-child, .cols .col:last-child {padding: 0;}
    .cols .col:last-child {margin-bottom: 0;}
    
    #services-apropos {padding-right: 0;}
    
    #bloc-contenu-nouvelle-date, #bloc-publication-cat {padding-bottom: 30px; margin-bottom: 30px;}
    
    #formation-gauche-inner {padding: 20px;}
    .wp-block-file a {font-size: 16px;}
    
    #scroll-haut {display: none;}
    
    h1 {font-size: 45px;}
    h2 {font-size: 40px; padding-bottom: 20px;}
    h3, .gform_confirmation_message {font-size: 25px; padding-bottom: 20px;}
}


@media all and (max-width: 800px) {
    #header-logo {width: 200px;}
    #home-top-phrase {text-align: center; font-size: 40px; padding-top: 130px;}
    #home-top-photo {width: 40vw; top: 280px;}
    #home-top-andree {margin: 100px 0; padding: 30px 30px 30px 40vw; width: calc(95% - (40vw + 30px));}    
    
    #liste-even .div-inner {flex-direction: column;}
    #liste-even .div-inner div {width: 100%;}
    #liste-even .div-inner div:first-child {margin-bottom: 40px;}
    
    #footer-haiku {padding-top: 250px;}
    #footer-soleil-forme {width: 200px; height: 200px;}
    
    #page-top {padding-top: 100px;}
    
    #service-aide .div-inner {gap : 10%; flex-direction: column; text-align: center;}
    #service-aide .div-inner > div {width: 100%;}
    #service-aide-droit form {width: 300px; position: relative; left: 50%; transform: translateX(-50%);}
    .infolettre-shop #service-aide-droit form {width: 100%; margin-top: 40px;}
    #service-aide .btn-carre {margin-top: 40px;}
    
    #produit-image-rond {display: inline-block;}
    
    #liste-produits .div-inner {flex-direction: column;}
    #liste-produits .div-inner::after {display: none;}
    .produit-carte {width: 100%; border-bottom: 1px solid rgba(0,0,0,0.2); margin-bottom: 30px; padding-bottom: 30px;}
    .produit-carte:last-child {margin-bottom: 0; padding-bottom: 0; border: 0;}
    
    .produit #page-top .div-inner { flex-direction: column; align-items: flex-start;}
    .produit #service-aide .div-inner {text-align: left;}
    .produit #service-aide-droit .accordion {margin-top: 40px;}
    .accordion h3 {font-size: 25px;}
    
    #bloc-temoignage .div-inner {flex-direction: column;}
    #bloc-temoignage .div-inner > div {width: 100%;}
    #bloc-temoignage-left {margin-bottom: 50px;}
    #bloc-temoignage-left-inner {padding-right: 0;}
    
    #bloc-contenu-nouvelle .div-inner {flex-direction: column;}
    #bloc-contenu-nouvelle-photo, #bloc-contenu-nouvelle-texte {width: 100%;}
    #bloc-contenu-nouvelle-photo img { aspect-ratio : 4 / 3; margin-bottom: 60px;}
    .bloc-contenu-nouvelle-photo-img {width: 100%;}
    
    h1 {font-size: 40px;}
    h2 {font-size: 35px;}
    h3, .gform_confirmation_message {font-size: 25px;}
    #page-top p {padding: 0;}
}


@media all and (max-width: 640px) {
    .menu-toggle, #menumain {width: 45px; height: 45px;}
    #menumain::before { letter-spacing: 2px;}
    #menumain::after, #menumain #menu-graph {margin: 5px 0;}
    .toggled #menumain::after {transform: translateY(-22px) rotate(135deg);}
    .toggled #menumain #menu-graph {transform: translateY(-13px) rotate(-135deg);}
    
    #menu-secondaire {right: 100px;}
    
    #primary-menu {padding: 100px 40px 0 40px;}
    #primary-menu a {font-size: 22px !important;}
    #primary-menu ul a { font-size: 20px; font-weight: normal;}
    
    #home-top-photo {top: auto; bottom: 0; height: auto; width: 250px;}
    #home-top-andree {position: relative; z-index: 2; margin-bottom: 0; margin-top: 250px; padding: 30px; width: calc(100% - 60px); background-color: rgba(255,255,255,0.8);}
    #home-top-phrase {text-align: right; font-size: 30px; padding-left: 200px;}
    
    .accueil-service-infos {padding: 0 0 60px 0;}
    .bloc-service-contenu, .bloc-service-large {width: 100%;}
    
    .seance-full-photo {position: relative;}
    .seance-full {padding: 0; display: flex; flex-direction: column-reverse;}
    .seance-full .div-inner {padding: 0;}
    .seance-infos {width: 100%;}
    .seance-full-droit .seance-infos {margin-left: 0;}
    
    .service .bloc-service-contenu {height: auto;}
    
    #service-aide-feuille {display: none;}
    
    #seance-half-photo {width: 300px; right: -50px;}
    #seance-half .seance-infos-inner {padding-right: 100px;}
    
    .service #services-montagne {width: 60%;}
    #services-apropos {margin-bottom: 50px;}
    
    #contact-sous-titre {font-size: 19px; margin-bottom: 20px;}
    
    .nouvelles-element {flex-direction: column;}
    .accueil-nouvelle-image {width: 100% !important; margin-bottom: 20px;}
    .accueil-nouvelle-image img { aspect-ratio: 4 / 3;}
    .accueil-nouvelle-contenu {width: 100% !important;}
    
    .page-id-296 #contenu .div-inner, .page-id-405 #contenu .div-inner {flex-direction: column;}
    #contenu-menu {width: 100%; margin-bottom: 30px;}
    #activites-menu {width: 100%;}
    #activites-menu ul a {opacity: 1;}
    #activites-menu ul {padding: 20px !important;}
    
    #respond .comment-form-author, #respond .comment-form-email {width: 100%; float: none;}
#respond .comment-form-author, #respond .comment-form-email {margin: 0}
    
    #footer-logo {left: 50%; position: relative; transform: translateX(-50%);}
    #footer-infos {flex-direction: column; padding-top: 80px; text-align: center; justify-content: center;}
    #footer-infos > div {width: 100%;}
    #footer-infos-left, #footer-infos-droit {text-align: center;}
    #footer-infos-droit ul {width: 100%; margin-top: 80px;}
    #footer-social { justify-content: center;}
    #footer-haiku {padding-top: 50px;}
    #footer-haiku-autrice {font-size: 18px;}
    #footer-soleil {display: none;}
    #footer-soleil-forme {left: 70%;}
    
    h1 {font-size: 40px;}
    h1 + p, #produit-titre + #produit-specs, h1 + .cols {margin-top: 30px;}
    h2 {font-size: 35px;}
    h3, .gform_confirmation_message {font-size: 25px;}
}


@media all and (max-width: 450px) {
    #header-logo {width: 130px;}
    #menumain {margin-top: -10px;}
    
    #home-top-photo {left: -80px;}
    #home-top-andree {margin-top: 200px;}
    #home-top-phrase {padding-left: 150px;}
    
    #menu-secondaire {right: 100px;}
    .menu-toggle, #menumain {right: 15px;}
}