@charset "utf-8";
/*MA CHARTE GRAPHIQUE*/
@font-face {
    font-family: inter;
    font-weight: regular;
    src: url("../fonts/limelight/Limelight-Regular.ttf");
}
.titres {
    font-family: limelight, serif;
}

@font-face {
    font-family: inter;
    font-weight: regular;
    src: url("../fonts/inter/Inter-Regular.ttf");
}
.texte-courant {
    font-family: inter, sans-serif;
}

@font-face {
    font-family: inter gras;
    font-weight: bold;
    src: url("../fonts/inter/Inter-Bold.ttf");
}
.texte-courant-gras {
    font-family:
        inter gras,
        sans-serif;
}

/*MES COULEURS*/
.blanc {
    color: white !important;
}
.bleu {
    color: #176192;
}
.orange {
    color: #d96e30;
}
.gris {
    color: #96968f;
}
.noir {
    color: black;
}
.vert {
    color: #495925;
}
.taupe {
    color: #a6948a;
}

.fond-orange {
    background-color: #d96e30;
}
.fond-gris-clair {
    background-color: whitesmoke;
}
.fond-gris {
    background-color: #96968f;
}
.fond-blanc {
    background-color: white;
}
.fond-greenery {
    background-color: #7aa542;
}
.fond-taupe {
    background-color: #a6948a;
}

/*MES STYLES*/
html,
body {
    margin: 0;
    padding: 0;
}

body {
    background-color: #495925;
    width: 100%;
    
}

.page,
.wrapper {
    margin: 0;
    padding: 0;
    width: 92%;
    margin-left: 4%;
}
div,
section,
blockquote {
    padding: 0;
    margin: 0;
}

header {
    margin: 0;
    padding: 0;
    background-color: #495925;
}
.superpose {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#menu-principal,
#menu-principal ul,
#menu-principal ul li {
    display: flex;
    flex-direction: row;
}
#menu-principal {
    padding: 0;
    margin: 0;
    position: fixed;
    top :0; left: 0; right: 0;
    z-index: 2;
    width: 100vw;
    background-color: #495925;
}
#menu-principal ul {
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    height: 10vh;
    width: 100vw;
}
#menu-principal ul li  {
    padding: 0;
    margin: 0;
    justify-content: space-around;
}
#menu-principal ul li:last-child  {
    padding: 0;
    margin: 0;
}
#menu-principal ul li a {
    background-color: rgba(0, 0, 0, 0.35);
    width: 99vw;
    padding: 0 0.5vw;
    text-align: center;
}
/*#menu-principal ul li:nth-child(2) a {background-color: red !important; display: none;} NOT READY*/

#section-intro #texte-accroche {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    background-image: url("../images/1-BG-PICS-1920PX/1-bg-jardin-avec-piscine-500m2-entretien-regulier.jpg");
    background-position: right;
    background-size: cover;

    height: 92.5vh;
    overflow: hidden;
    z-index: 0;
}
#voile-noir {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
}
#section1 {
    height: 100vh;
}
#section2 {
    height: 100vh;
}
#part-storytell {
    height: 35vh;
}
#bg-image-staff {
    background-image: url(../images/1-BG-PICS-1920PX/2-bg-staff-equipement-batterie-jardinBG.jpg);
    background-size: cover;
    background-position-y: 0;
    height: 15vh;
}
#staff {
    display: flex;
    align-items: center;
}
#part-value {
    height: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.carroussel {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.carroussel a {
    width: 100vw;
}
.carroussel img:not(.carroussel a img) {
    width: 20%;
    height: auto;
}
#bouton-G-precedent,
#bouton-D-suivant {
    display: flex;
    justify-content: center;
    width: 80vw;
    opacity: 0; /*NOT READY*/
}
#part-process-client {
    height: 45vh;
}
#texte-staff {
    padding: 0 5vw;
}
#staff img {
    width: 35vw;
}

#recommandation {
    display: flex;
    align-items: center;
    justify-content: center;
}
.voile-noir {
    display: flex;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 5;

    width: 100vw;
    height: 100vh;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
#lightbox-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 56;
    background-color: #7aa542;

    display: none;
}

#cookies {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 56;

    padding: 5vw;

    background-color: darkgray;
    display: none !important;
}

footer {
    background-color: white;

    display: flex;
    flex-direction: column;
}
footer nav ul {
    margin: 0;
    padding: 0;
    display: flex;
}
#pratique-bottom {
    background-color: #495925;
    display: flex;
    flex-direction: column;
}
#pratique-bottom ul li a {
    color: white;
    width: 50vw;
    height: 10vw;
    padding: 7.5vw 0;
    text-align: left;
}
#pratique-bottom a {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    padding: 2vw 0.5vw;
    margin: 0 0.5vw 0 0;

    background-color: rgba(0, 0, 0, 0.5);

    font-size: 3vw;
    line-height: 2vh;
}
#pratique-bottom a img {
    width: 10vw;
    height: auto;
    padding: 0 2vw;
}
#pratique-bottom img {
    width: 10vw;
    height: auto;
    padding: 0 5vw;
}
#pratique-bottom a img:nth-child(2) {
    width: 5vw;
    padding: 0;
}

footer #social-bottom ul {
    display: flex;
    flex-direction: row;
}
footer #social-bottom ul li {
    padding: 5vw;
}
footer #signature-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}
footer #signature {
    width: 80vw;
}
#signature a {
    display: flex;
    justify-content: center;
}

footer a img {
    width: 50vw;
}

#horaires,
#zone-spatiale {
    display: flex;
    flex-direction: row;

    justify-content: flex-start;
    align-items: center;
    padding: 2vw 5vw;
}

#copyright {
    background-color: black;
    color: white;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
#copyright a {
    /*display: flex;*/
    width: 40vw;
    background-color: red;
    display: none !important;
}
/*BALISES TEXTE*/

h1,
h2,
h3,
h4,
h5,
h6 {
    /*LES PREMIERS H n sont en serif*/
    font-family: "limelight", serif;
    color: black;
    text-transform: uppercase;
}
p {
    font-family: "inter", sans-serif;
    color: black;
}

h1 {
    font-size: 6vw;
    line-height: 5vh;
}
h2 {
    font-size: 5vw;
    line-height: 3.5vh;
}
/**A FINIR POUR H2 > H6**/
blockquote {
    font-size: 6vw;
    line-height: 3.5vh;
    font-family: "parisienne", cursive;
    color: #d96e30;
}
p {
    font-size: 3vw;
    line-height: 2.2vh;
}
.texte-indic {
    font-size: 2.5vw;
    line-height: 1.8vh;
}
li {
    font-size: 2vw;
    font-family: "inter", sans-serif;
}
#process-commercial {
    display: flex;
    flex-direction: column;
    list-style: decimal;

    height: 30vh;
}
#process-commercial li {
    padding: 2vh;
    margin-left: 5vw;
}
#process-commercial li:nth-child(odd) {
    background-color: lightgray;
}
ol li::marker {
    font-size: 5vw;
    font-family: limelight;
    color: #495925;
}
ul li {
    list-style-type: none;
}

img {
    max-width: 100%; /*pour mettre en version adaptable chaque image*/
    height: 100%;
    vertical-align: middle;
}

form {
    margin: 0;
    padding: 0;
}
form label {
    display: block;
}

hr {
    display: block;
    height: 4px;

    width: 95%;
    margin: 2%;

    background-color: #a6948a;
    color: #a6948a;
}
/* TRANSITION ZOOM IMG NOT WORKING #etapes-permaculture nav ul li .superpose-etapes:hover #etapes-permaculture nav ul li a img { transform: scale(1.2); transition: 0.5s all;}*/
.filet-souligne::after {
    display: block;
    width: 100px;
    height: 2px;

    background-color: #f0842c;
    color: #f0842c;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    z-index: 2;
    content: "";
}

/*ICI MES LIENS ET BOUTONS*/
.lien-filet {
    /*FILET COULEUR BORDER=MOINS visible*/
    display: inline-block;
    padding: 1% 5%;

    background-color: rgba(255, 255, 255, 0);
    border: 2px solid #7aa542;
}
.lien-filet:link,
.lien-filet:visited {
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0);
}
.lien-filet:hover,
.lien-filet:active {
    text-decoration: none;
    background-color: rgba(123, 166, 67, 1);
}

.lien-filet-plein {
    /*FILET BLANC filled=PLUS visible*/
    display: inline-block;
    padding: 1% 3%;

    background-color: #7aa542;
    border: 2px solid rgba(123, 166, 67, 1);
}
.lien-filet-plein:link,
.lien-filet-plein:visited {
    text-decoration: none;
    color: white;
    background-color: #7aa542;
    transition: 0.3s all;
}
.lien-filet-plein:hover,
.lien-filet-plein:active {
    text-decoration: none;
    color: #7aa542;
    background-color: white;
    border: 2px solid rgba(123, 166, 67, 1);
    transition: 0.3s all;
}

.survol-img {
    transform: scale(1);
    transition: all 0.4s;
}
.survol-img:link,
.survol-img:visited {
    opacity: 1;
    transform: scale(1);
    transition: all 0.4s;
}
.survol-img:hover,
.survol-img:active {
    opacity: 0.8;
    transform: scale(1.15);
    transition: all 0.4s;
}

.survol-img-rotation {
    opacity: 1;
    transform: rotate(0deg);
    transition: all 0.4s;
}
.survol-img-rotation:link,
.survol-img-rotation:visited {
    transform: scale(1);
}
.survol-img-rotation:hover,
.survol-img-rotation:active {
    opacity: 0.8;
    transform: rotate(360deg);
    transition: all 0.4s;
}

.survol-img-doux {
    transition: all 0.4s;
    opacity: 1;
    transform: scale(1);
}
.survol-img-doux:link,
.survol-img-doux:visited {
    transform: scale(1);
}
.survol-img-doux:hover,
.survol-img-doux:active {
    opacity: 0.9;
    transform: scale(1.025);
    transition: all 0.4s;
}

/*LISTES */
.sans-puces {
    list-style: none;
}

/*ALIGNEMENT DU TEXTE*/
.texte-centre {
    text-align: center;
}
.texte-droite {
    text-align: right;
}
.texte-gauche {
    text-align: left;
}
.justifier {
    text-align: justify;
}

.insecable {
    white-space: nowrap;
}

.petit {
    font-size: 1.6vw;
}
.capitales {
    text-transform: uppercase;
}
.bas-de-casse {
    text-transform: capitalize;
}
.bas-de-casse-full {
    text-transform: lowercase;
}
/*ESPACEMENTS*/
.espace-haut {
    padding: 70px 0;
}
.espace-bas {
    padding-bottom: 20px;
}
.espace10 {
    padding: 0 10px;
}
.slide7 {
    padding: 7px 0;
}
.slide10 {
    padding: 10px 0;
}
.slide15 {
    padding-top: 15px;
    padding-bottom: 15px;
}
.slide25 {
    padding: 25px 0;
}
.slide30 {
    padding: 30px 0;
}
.slide35 {
    padding: 35px 0;
}
.slide40 {
    padding: 40px 0;
}
.slide50 {
    padding: 50px 0;
}
.slide150 {
    padding: 150px 0;
}
.espace-moi {
    padding: 0 10px;
}

/*MES FLOATS*/
.gauche {
    float: left;
}
.droite {
    float: right;
}

/*SUPERPOSITION D'ELEMENTS*/
.relatif {
    position: relative;
}

/*TEST ANIMATION*/
#chronoEtLoad {
    display: none;
}

.videowrapper {
    position: relative;
    padding-bottom: 54%;
    width: 100%;
    border: 2px solid red;
}
.videowrapper > iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;

    width: 100%;
    height: 100%;
}
/*DEBUG
header, section {
    border: 1px solid blue;
}
 {
    border: 1px solid red;
}
h1, h2, h3, h4, h5, h6 {border: 1px solid pink;}*/

#scrollDOWN {
    display: none;
}

.icons {
    display: inline-block;
}

a {
    font-family: "limelight", serif;
    font-size: 4vw;
    line-height: 2vh;

    text-transform: uppercase;
    cursor: pointer;
}
a:link,
a:visited {
    text-decoration: underline;
    color: white;
}
a:hover,
a:active {
    text-decoration: underline;
    color: rgba(0, 0, 255, 0.7);
}

#player {
    display: block;

    width: 94vw;
    margin: 0 auto;
    overflow: hidden;
    z-index: 0;

    background-image: url(../images/3-MOVIE-RUSH-TO-WORK-ADAPT/1-storytelling-histoire-reconversion-professionnelle-kevin-ITZHAK-kechochana-thumb-fullHD.jpg);
    background-position-y: 30%;
    background-size: cover;
}
#player a {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;

    z-index: 1;
    width: 100%;
    height: 25vh;
}
#player a img {
    max-width: 100%;
    max-height: 128px;
}

.bouton-vert a {
    background-color: #495925;
}
.bouton-orange a {
    background-color: #d96e30;
}
.bouton-rouge a {
    background-color: #a62103;
}

.bouton-vert a,
.bouton-orange a,
.bouton-rouge a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    padding: 0.5vw 0;

    width: auto;
    height: 7.5vh;

    color: white;
}
.bouton-vert a img,
.bouton-orange a img,
.bouton-rouge a img {
    width: 10vw;
    height: auto;
    padding: 1vw;
}
.bouton-orange a img,
.bouton-rouge a img {
    width: 10vw;
    padding: 1vw;
}
#recommandation img {
    width: 20vw;
    padding: 2vw;
}

.bouton:link {
    display: flex;
    align-items: center;
    border: 2px white solid;

    text-decoration: underline rgba(255, 255, 255, 0);
    transition-duration: 0.5s;
}
.bouton:hover {
    text-decoration: underline;
    border: 2px rgba(255, 255, 255, 0.5) solid;
    transition-duration: 0.2s;
}

.bouton .icons:hover {
    opacity: 0.5;
    transition-duration: 0.2s;
}

.pasENCOREpret {
    display: none !important;
}