@charset "UTF-8";
/*
@author: Ressort web
* v1.0 2021/08
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# RESSET
# visually-hidden
# HTML - BODY
# Typography 
# Titres
# Header footer
# ACF

# Media Queries
	## Taille écran _ affichage du menu principal et éléments à 1200px
	## IE
	## Print
#CSS design | bouton | icones | couleurs
--------------------------------------------------------------*/
*,
 *::before,
*::after {
  -moz-box-sizing : border-box;
  -webkit-box-sizing : border-box;
  box-sizing : border-box;
}

.commentaire{
  color :blue;
  font-size: 16px;
  font-style: italic;
  font-family: Georgia, serif;

}

/*Normalise*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
fieldset,
form,
figure,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  border: 0;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}


article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

ul,
ol {
  padding-left: 1rem;
}

nav ul,
nav ol {
  list-style: none;
  padding: 0;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

/*
 * Embed content
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

img,
table,
td,
blockquote,
pre,
code,
input,
textarea,
select,
video,
svg,
iframe {
  max-width: 100%;
}

iframe,
img,
input,
select,
textarea {
  height: auto;
}

img {
  border-style: none;
}

figcaption{
  font-size: 1.4rem;
}

b,
strong {
  font-weight: bold;
}


/*
 * Disable animations styles when reduced motion is enabled
 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}


/* ----------------------------- */
/* ==Reset (forms)               */
/* ----------------------------- */
/*
 * Remove the tapping delay on clickable elements in all browsers .
 */
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  touch-action: manipulation;
}

/*
 * 1. Change the inconsistent appearance in all browsers.
 * 2. Add typography inheritance in all browsers.
 */
button,
input,
select,
textarea {
  margin: 0;
  background-color: transparent;
  /* 1 */
  color: inherit;
  /* 1 */
  font-family: inherit;
  /* 2 */
  font-size: inherit;
  /* 2 */
  line-height: inherit;
  /* 2 */
  letter-spacing: inherit;
  /* 2 */
  vertical-align: middle;
}

/*
 * Basic User Interface reset
 */
button,
input:not([type="radio"]):not([type="checkbox"]),
select,
textarea {
  border: 1px;
}

 
pre,
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

pre {
  -moz-tab-size: 2;
       tab-size: 2;
  white-space: pre-wrap;
  line-height: normal;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

/*
 * Show overflow in IE/Edge
 */
button,
input {
  overflow: visible;
}

/* 
 * Remove the inheritance of text transform in Firefox
 */
button,
select {
  text-transform: none;
}

/*
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

form,
fieldset {
  border: none;
}

fieldset {
  margin: 0;
  padding: 1rem;
}

legend {
  display: table;
  max-width: 100%;
  padding: 0 0.125rem;
  border: 0;
  color: inherit;
  white-space: normal;
}

label {
  display: inline-block;
  cursor: pointer;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
  white-space: pre-wrap;
}

progress {
  display: inline-block;
  width: 100%;
  vertical-align: baseline;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

/*visually-hidden*/

.visually-hidden{
  position: absolute !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

/* Links*/
 
a {
  color: #000;
  text-decoration: none;
}

a:focus,
a:hover,
a:active {
  color: #000;
  text-decoration: none;
}

html {
  font-size: 62.5%;
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
 
}

body {
  margin: 0;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 2rem;
  line-height: 1.4;
  background-color: #ffffff;
  color: #000;
}

blockquote cite {
  font-style: italic;
  font-size: 1.6rem;
  font-weight: 600;
}



/*Titre et polices*/
h2, .btn{
	font-family: "Montserrat alternates", Arial, sans-serif;
}


h1, 
.page-title,
aside h2 {
  text-transform: uppercase; 
  font-weight: 200;
  font-family: montserrat;
}

h1, 
.page-title{
  font-size:2rem;
  font-weight: 600;

}

aside h2 {font-size: 2rem;
font-weight: 600;}

h1:before, 
.page-title:before,
aside h2:before{
  content:" ";
  margin-right: 1rem;
  background: #000;
  width: 4rem;
  height: 0.2rem;
  display: inline-block;
}

h2{
	font-size: 4.8rem;
	font-weight: 600;
  padding: 2rem 0;
  text-transform: lowercase;
}

h3.sub-title,
h3.custom-sub-title{
font-size:3rem;
font-weight: 600;}


h3, h4{
  padding: 1rem 0;
}

p {
  text-align: justify;
}

figure {
  padding-bottom: 1.5rem;
}

main {
  min-height: 100vh;
}

.wrap{
  margin: 0 auto;
  padding: 2rem;
}
.inner-header,
.footer-main
.footer-bottom{
  padding: 2rem;
  z-index: 5;
  position: relative;
}

/* ==========================================================================*/
/*inner header
/* ==========================================================================*/ 
.inner-header{
}
.header-main{
	display: flex;
	justify-content: space-between;
}
.inner-header #logo a img{
	max-height: 6rem;
}

/* ==========================================================================*/
/*inner footer
/* ==========================================================================*/ 


.footer-bottom {
  display: flex;
  justify-content: space-between;
}
.social-footer{
  display: flex;
}

.social-footer a{
  font-size: 1.6rem;
  font-weight: 600;
  padding-right: 2rem;
}

#footer-menu{
  font-size: 1.4rem;
  text-transform: uppercase;
}
#web .footer-bottom {
	background: #FFEC83;	
}
#propos .footer-bottom {
  background: #B0BDB0;  
}

#contact .footer-bottom {
  background: #FFD3B1;  
}
.footer-bottom .legals{
	text-align: right;
	display: flex;
	justify-content: end;
	align-items: center;
  font-size: 1.2rem;
}
.footer-bottom .legals a{
  padding: 0rem 2rem;
}

.copyright{
	padding: 0rem 2rem;	
}


/*style du contenu*/

/*style article - blog*/

.byline, .article-footer {
  font-style: italic;
  font-size: 1.6rem;
  padding: 1rem 0;
}

/*voir responsive*/
.page-header{
  padding-top: 15rem;
}



/* ==========================================================================*/
/*STYLES ACF
/* ==========================================================================*/ 

.test.class-personnalise{
  background: red;
}


/*acf  template page-header-acf*/
.page-header-acf .acf-img-une{
}

.page-header-acf .resume{
}


/*content ACF section et aside*/
.section .resume {
  font-weight: 600;
  font-size: 3.2rem;
}
 .section h2{
	font-size: 4.8rem;
	font-weight: 600;
}
 .section .custom-paragraphe{
  margin: 2rem 0;
}

.section h3.sub-title-h3{
  font-weight: 600;
}
/*accordion*/
      .acf .accordion{
        margin: 4rem 0rem;
      }
      .acf .section-title-accordion {
        width: 100%;
        transition: 0.4s;
        min-height: 6rem;
        width: 100%;
        position: relative;
        font-weight: 600;
        background: #f3f3f3;
        padding: 1rem;
      }
      .acf .section-title-accordion.multi-setion{
        cursor: pointer;  
      }
      .acf .section-title-accordion.multi-setion:after{
        content: "\f078";
        position: absolute;
        top : 0;
        right: 0px;
        height: 6rem;
        width: 6rem;
        line-height: 6rem;
        font-family: FontAwesome;
        background: #cecece;
        text-align: center;
        font-size: 2rem;
      }
      .acf .section-title-accordion.active:after{
        content: "\f077";
      }

      .acf .content-accordion{
        background: #ccc;
      }

/*two col*/
.two-col{
  display: flex;
  justify-content : space-between;
  margin-bottom: 4rem;
  text-align: left!important;
}



/* ==========================================================================*/
/*544* > 544 en dessous
/* ==========================================================================*/ 
@media (max-width: 544px) {

  html{
    font-size: 50%;
  }

      body#web {
       border: solid 1rem #FFEC83!important;
      }

      body#propos{
         border: solid 1rem #B0BDB0!important;
      }
      body#contact {
       border: solid 1rem #FFD3B1!important;
      }
      .footer-bottom {
        flex-direction:column;
      }

      .two-col{
        flex-direction: column;
        width: 100%;
      }

      .process .flexible-acf>h3{
      font-size: 20rem!important;
    }
}

/* ==========================================================================*/
/*544* < 544 
/* ==========================================================================*/ 
@media (min-width: 544px) {
    .wrap{
        width: 100%;
      	}

      .acf .col-1, .acf .col-2{
      width: 50%;
      float: left;
      min-height: 6rem;
      }

      .acf .col-1{
        padding-right: 2rem;
      }
      .acf .col-2{ 
        padding-left: 2rem;
      }
   
}
/* ==========================================================================*/
/*768* < 768 
/* ==========================================================================*/ 
@media (min-width: 768px) {
  .wrap{
  	max-width: 700px;
  	}
}
/* ==========================================================================*/
/*992* < 992 
/* ==========================================================================*/ 
@media (min-width: 992px) {
   .wrap{
  	max-width: 800px;
  	}
   #return-to-top i {
  position: fixed;
  bottom: 6rem;
  right: 2rem;
  width: 6rem;
  height:6rem;
  line-height: 6rem;
  text-align: center;
  text-decoration: none;
  z-index: 100;
  display: none;
  background:#272B27;

  }

  #return-to-top i{
      display: inline-block;
      cursor: pointer; 
      transition :0.1s linear;    
      }

  #return-to-top i:hover{
     height:12rem;
       bottom: 6rem;
    }

      #return-to-top i:before{  
        content: "top";
        font-family: "montserrat alternates";
        color:#fff;
        font-size: 1.2rem;            
      }

}

/* ==========================================================================*/
/*1200* > 1200 | En dessous
/* ==========================================================================*/ 
@media (max-width: 1200px) {

/*menu simple responsive*/
    .texte-menu, 
    .social-menu {
      position: absolute !important;
      border: 0 !important;
      height: 1px !important;
      width: 1px !important;
      padding: 0 !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;}

    .contact-menu{
      position: fixed;
      bottom: 0;
      width: 100%;
      padding-bottom: 2rem;
    }
}
/* ==========================================================================*/
/*1200* < 1200 | AFFICHAGE DU MENU PRINCIPAL | breadcrumbs
POSITIONNEMENT DES ELEMENTS
/* ==========================================================================*/ 
@media (min-width: 1200px) {
    .wrap{
  	max-width: 1000px;
    padding: 0;
    }

    /*le menu*/
      .texte-menu{
      display: flex;
      justify-content: center;
      flex-direction: column;
      width: 50%;
      font-family: "montserrat alternates" ;
      font-weight: 600;


      }
      .texte-menu p,
      .texte-menu .logo-menu{
        max-width: 35rem;
        margin: 0 auto;
        font-size: 2.6rem;
        text-align: left;
      }
      .logo-menu{
        padding-bottom: 6rem;
      }
      .menu-menu-simple-container{
        width: 50%;
      }
      .contact-menu{
        position: fixed;
        bottom: 0;
        right: 0;
        display: flex; 
        text-align: center;
        font-weight: 600; 
      }
      .contact-menu p,
      .social-menu p{
        padding: 2rem;
      }
      .social-menu{
        position: fixed;
        left: 0;
        bottom: 0;
        display: flex;
        font-weight: 600; 
      }

    .page-header{
      
      animation: animate-page-title 1.5s linear 1; 
      animation-delay: 0s; 
     /* animation-fill-mode: forwards;*/
    }

@keyframes animate-page-title{
        0% { transform: translateX(0%);
              margin-bottom: 100rem; }
        50% {transform: translateX(0%)}
       60% { transform: translateX(0%);} */
        100% { transform: translateX(0%);
          margin-bottom: 0 }
              }

    /*positionnement des éléments avec aside*/
    .section {
      padding-bottom: 6rem;
    }
      .class-aside .content {
        display: flex;
        justify-content :space-between;
      }
      .class-aside .section-1,
      .class-aside .aside-1{
        width: 50%;
        padding-bottom: 6rem;
      }
      .class-aside .section-1 .wrap{
        padding-left: calc((100vw - 1050px)/2);
        padding-right: 4rem; }
      .class-aside .aside-1 .wrap{
        padding-right: calc((100vw - 1050px)/2);
        padding-left: 4rem;
      }
      .class-aside .aside-1{
        display: flex;
        justify-content: end;
        flex-direction:column;
        padding-bottom: 20rem;     
        }
}

/* ==========================================================================*/
/*1330* < 1330 
/* ==========================================================================*/ 
@media (min-width: 1330px) {
 
}



/* ==========================================================================*/
/*STYLE IE*/
/* ==========================================================================*/ 

@media screen and (min-width:0\0){

	body:before{
      content: "Vous utilisez internet explorer... Ce navigateur n'est plus mis à jour, le site est optimisé pour les navigateurs récents";
      background: #B0BDB0;
      padding: 0rem 0rem 0rem 4rem;
      width: 100%;
      height: 100%;
      display: block;
      margin-bottom: 4rem;
      position: fixed;
      z-index: 80000;
      line-height: 6rem;
    }
}



/* ==========================================================================*/
/*CSS design*/
/*styles du site RESSORTWEB*/
/* ==========================================================================*/


/*couleur border pages et animation*/
body, body#web{
border-top: solid 2rem #FFEC83;
border-left: solid 2rem #FFEC83;
border-right: solid 2rem #FFEC83;}

body#contact{
  border-top: solid 2rem #FFD3B1;
  border-left: solid 2rem #FFD3B1;
  border-right: solid 2rem #FFD3B1;
}
body#propos{
  border-top: solid 2rem #B0BDB0;
  border-left: solid 2rem #B0BDB0;
  border-right: solid 2rem #B0BDB0;
}

    body#web {
      animation: backgroundtransitionweb 0.7s cubic-bezier(.77,.07,.06,.99) 1; 
      animation-delay: 0.2s; 
      animation-fill-mode: backwards;        
      }

             @keyframes backgroundtransitionweb {
               0% {  background: linear-gradient(to  bottom, white 50%,#FFEC83  50%);
                    background-size: 100% 200%;
                    background-position: bottom left; }

              100% { background-position:  top left;}
            }


    body#contact{
        animation: backgroundtransitioncontact 0.7s cubic-bezier(.77,.07,.06,.99) 1; 
        animation-delay: 0.2s; 
        animation-fill-mode: backwards;
      }

      
            @keyframes backgroundtransitioncontact{
               0% {  background: linear-gradient(to  bottom, white 50%,#FFD3B1  50%);
                    background-size: 100% 200%;
                    background-position: bottom left; }

              100% { background-position:  top left;}
               
            }


    body#propos{
      animation: backgroundtransitionpropos 0.7s cubic-bezier(.77,.07,.06,.99) 1; 
      animation-delay: 0.2s; 
      animation-fill-mode: backwards;
    }

            @keyframes backgroundtransitionpropos{
                 0% {  background: linear-gradient(to  bottom, white 50%,#B0BDB0  50%);
                      background-size: 100% 200%;
                      background-position: bottom left; }

                100% { background-position:  top left;}
              }
         

        
        /*animation page*/

        main {
        animation: pagetransition 1s cubic-bezier(.77,.07,.06,.99) 1; 
        transform: translateY(0%);
        animation-delay: 0.3s; 
        animation-fill-mode: both; 
        
        }

       @keyframes pagetransition {
        0% { transform: translateY(70%); }
      
        100% { transform: translateY(0%);  }
      }

   
     /*404*/
     .oups{
      color: #FFEC83;
      font-size: 20rem;  

     }

/*page process à revoir*/

 .process .flexible-acf>h2{
  z-index: 15;
  position: absolute;
  height: 30rem;
  align-items: end;
  display: flex;

 }

      .process .flexible-acf>h3{
        font-weight: 800;
        font-size: 30rem;       
        color: #FFEC83;
        position: relative;
        z-index: -100;
        display: flex;
      }
      .process .flexible>h3:after{
    
      }

       .process .custom-paragraphe{       
       border-left: solid 1rem;
       padding-left: 6rem;       
       }
      

/* MENU*/
/*Bouton */


    #btn-main-menu-simple span{
      background: #000;
      border-radius:10px;
      height:7px;
      margin: 7px 0;
      transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6);
    }

    #btn-main-menu-simple span:nth-of-type(1){
      width:50%;
    }
    #btn-main-menu-simple span:nth-of-type(2){
      width:100%;}
    #btn-main-menu-simple span:nth-of-type(3){
      width:75%;
     }
    .menu-simple-open #btn-main-menu-simple{
        transform: translateY(20%) rotateZ(90deg);
    }
    .menu-simple-open #btn-main-menu-simple span{
        width: 7px;
        background-color: #000;
    }

    #btn-main-menu-simple{
      display: table;
      position: absolute;
      right: 2rem;
      cursor: pointer;
      z-index: 80;  
    }
    #btn-main-menu-simple{
      display:flex;
      flex-direction:column;
      width:70px;
      cursor:pointer;
    }


/*affichage du menu*/

    #main-menu-simple{
      transform:translateY(-100%);
      transition : transform 0.5s ease 0.3s;
      position: fixed;
      top:0;
      right: 0;
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      padding-top : 6rem; 
      z-index: 60;
      padding: 2rem;
    }


     .menu-simple-open #main-menu-simple {       
      transform:translateX(0%);
    
     /* transition: 0.8s all cubic-bezier(0.25, 0.46, 0.45, 0.94);*/
      background: #fff;
      }
     

      .menu-menu-simple-container ul{
      display: flex;
      justify-content: center;
      flex-direction: column;
      width: 100%;
      height: 100%;
      }

      .menu-menu-simple-container ul li{
        padding: 2rem;
        font-size: 4.6rem;
        font-weight: 600;
        font-family: "Montserrat alternates", Arial, sans-serif;  
      }
      .menu-menu-simple-container ul li a{
         transition: 0.2s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
      .menu-menu-simple-container ul li a:hover{
           margin-left: 2rem;
           border-bottom: 2px solid;
      }
      .menu-menu-simple-container ul li a.active{
        color:#464646;
        border-bottom: 2px solid;
      }

    /*couleur du menu */
        #web #main-menu-simple{
            background: #FFEC83;
        }
        #propos #main-menu-simple{
            background: #B0BDB0;
        }
        #contact #main-menu-simple{
          background: #FFD3B1;
        }

        /*couleur du menu ouvert (class des items définies dans wordpress apparence > menu)*/

        .menu-menu-simple-container ul li a:hover:before{
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          position: fixed;
          top : 0;
          right: 0;
          z-index: -20;
         }
          .menu-menu-simple-container ul li.web a:hover:before{
             background: #FFEC83;
          }
          .menu-menu-simple-container ul li.propos a:hover:before{
              
              background: #B0BDB0;
          }
          .menu-menu-simple-container ul li.contact a:hover:before{
              background: #FFD3B1; 
          }


/*essai transition items de menu...*/
.menu-simple-open .menu-menu-simple-container ul li{
        animation: menulitransition 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1;       
        animation-fill-mode: both; 
      }

  .menu-simple-open .menu-menu-simple-container ul li:nth-child(1){
   animation-delay: 0.4s;

}
.menu-simple-open .menu-menu-simple-container ul li:nth-child(2){
   animation-delay: 0.5s;

}
.menu-simple-open .menu-menu-simple-container ul li:nth-child(3){
   animation-delay: 0.7s;

}

      @keyframes menulitransition{
        0%{ margin-left: 6rem;}
        100%{ margin-left: 0rem;}
      }
 /*contact footer */
 /*styles du btn*/



 


/*#CSS design | bouton | icones | couleurs*/

/*les boutons  ( a faire avec JS*/


/*les icones des boutons*/
      .btn:before,
      .btn:after{
        font-family: fontawesome; 
        font-size: 2rem;
        transition:  0.3s linear;   
      }
     

      a.btn-pdf:after{
        content: "\f019";
        padding-left: 2rem;
      }
      a.btn-href.lien-externe:after{
        content:"\f35d"; 
      }
      a.btn-href.lien-interne:after{
        content:"\f061";
        padding-left: 2rem;
      }
      a.btn-href.lien-interne:hover:after{
        padding-left: 4rem;
      }



/*reprendre les liens couleur et paragraphe et bouton transition non prise en charge*/


      

    
    #web .section-1   a,
    #web .aside-1  a{        
      display: inline;
      transition:  0.1s linear;   
      background: linear-gradient(to  top, #FFEC83  30%, white 30%);
      background-size: 100% 100%;
      background-position: bottom left;            
      }

          #web .section-1  a:hover,
          #web .aside-1  a:hover{ 
          background-size: 100% 300%;
          }


    #propos .section-1   a,
    #propos .aside-1  a{       
      display: inline;
      transition:  0.1s linear;   
      background: linear-gradient(to  top, #B0BDB0 30%, white 30%);
      background-size: 100% 100%;
      background-position: bottom left; 
      }

          #propos .section-1  a:hover,
          #propos .aside-1  a:hover{ 
           background-size: 100% 300%;
          }

    #contact .section-1   a,
    #contact .aside-1  a{      
      display: inline;
      transition:  0.1s linear;   
      background: linear-gradient(to  top, #FFD3B1 30%, white 30%);
      background-size: 100% 100%;
      background-position: bottom left; 
    }

          #contact .section-1  a:hover,
          #contact .aside-1 a:hover{ 
             background-size: 100% 300%;
          }



/*bouton sections*/
/*revoir le style des btn ? */
 .content-href{margin-bottom: 4rem;
 }
.section-1 .btn,
.aside-1 .btn{
  font-weight: 900;  
  font-size: 2.8rem;
}

.aside-1 a.btn,
.section-1 a.btn{ 
  
  
}