html {
	scroll-behavior: smooth;
    width: 100%;
}

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}



/*
  /$$$$$$                      /$$                                        
 /$$__  $$                    | $$                                        
| $$  \__/  /$$$$$$  /$$   /$$| $$  /$$$$$$  /$$   /$$  /$$$$$$   /$$$$$$$
| $$       /$$__  $$| $$  | $$| $$ /$$__  $$| $$  | $$ /$$__  $$ /$$_____/
| $$      | $$  \ $$| $$  | $$| $$| $$$$$$$$| $$  | $$| $$  \__/|  $$$$$$ 
| $$    $$| $$  | $$| $$  | $$| $$| $$_____/| $$  | $$| $$       \____  $$
|  $$$$$$/|  $$$$$$/|  $$$$$$/| $$|  $$$$$$$|  $$$$$$/| $$       /$$$$$$$/
 \______/  \______/  \______/ |__/ \_______/ \______/ |__/      |_______/ 
*/




::selection {
     color: #FFF;
     background: var(--colorOrange);
 }





/*
     /$$$$$$           /$$$$$$$$                    /$$           /$$$$$$                             
   /$$$__  $$$        | $$_____/                   | $$          /$$__  $$                            
  /$$_/  \_  $$       | $$     /$$$$$$  /$$$$$$$  /$$$$$$       | $$  \__//$$$$$$   /$$$$$$$  /$$$$$$ 
 /$$/ /$$$$$  $$      | $$$$$ /$$__  $$| $$__  $$|_  $$_//$$$$$$| $$$$   |____  $$ /$$_____/ /$$__  $$
| $$ /$$  $$| $$      | $$__/| $$  \ $$| $$  \ $$  | $$ |______/| $$_/    /$$$$$$$| $$      | $$$$$$$$
| $$| $$\ $$| $$      | $$   | $$  | $$| $$  | $$  | $$ /$$     | $$     /$$__  $$| $$      | $$_____/
| $$|  $$$$$$$$/      | $$   |  $$$$$$/| $$  | $$  |  $$$$/     | $$    |  $$$$$$$|  $$$$$$$|  $$$$$$$
|  $$\________/       |__/    \______/ |__/  |__/   \___/       |__/     \_______/ \_______/ \_______/
 \  $$$   /$$$                                                                                        
  \_  $$$$$$_/                                                                                        
    \______/                                                                                                                                                                             
*/


@font-face {
    font-family: 'ProductSans-Thin';
    src: url('../fonts/ProductSans-Thin.ttf') format('truetype');
}

@font-face {
    font-family: 'ProductSans-Light';
    src: url('../fonts/ProductSans-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'ProductSans-Regular';
    src: url('../fonts/ProductSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'ProductSans-Medium';
    src: url('../fonts/ProductSans-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'ProductSans-Bold';
    src: url('../fonts/ProductSans-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'ProductSans-Black';
    src: url('../fonts/ProductSans-Black.ttf') format('truetype');
}




@font-face {
    font-family: 'ffred';
    src: url('../fonts/ffred.woff') format('woff');
}











.txt-thin    {font-family: 'ProductSans-Thin'; }
.txt-light   {font-family: 'ProductSans-Light'; }
.txt-regular {font-family: 'ProductSans-Regular'; }
.txt-medium  {font-family: 'ProductSans-Medium' !important; }
.txt-bold    {font-family: 'ProductSans-Bold' !important; }
.txt-black   {font-family: 'ProductSans-Black' !important; }

.txt-center { text-align: center !important; margin: auto !important; }
.txt-right { text-align: right; }




/*
 /$$$$$$$$                    /$$                        
|__  $$__/                   | $$                        
   | $$  /$$$$$$  /$$   /$$ /$$$$$$    /$$$$$$   /$$$$$$$
   | $$ /$$__  $$|  $$ /$$/|_  $$_/   /$$__  $$ /$$_____/
   | $$| $$$$$$$$ \  $$$$/   | $$    | $$$$$$$$|  $$$$$$ 
   | $$| $$_____/  >$$  $$   | $$ /$$| $$_____/ \____  $$
   | $$|  $$$$$$$ /$$/\  $$  |  $$$$/|  $$$$$$$ /$$$$$$$/
   |__/ \_______/|__/  \__/   \___/   \_______/|_______/ 
*/

h1, h2, h3, h4, p {
    /*max-width: 75ch;*/
    text-rendering: optimizeLegibility;
}


:root {
    
    /* VARIABLE DE COEFFICIENT DE PROPORTIONNALITE UNIVERSEL DU SITE */
    
    --Coeff: .5vw;
    
    --txtSize: calc(1rem + (var(--Coeff) / 2));
    
    --wrap: calc(15vw - 3rem);
    
    --padding: calc(var(--txtSize) * 5);

    
    
    
    
    --colorBlack: hsla(0, 0%, 15.7%, 1); /* EVT Gris Anthracite */
    
    --colorBlanc: hsla(0, 0%, 100%, 1); /* EVT Blanc */
        
    --colorGris: hsla(0, 0%, 60%, 1); /* EVT Gris de texte */
    
    --colorOrange: hsla(31, 100%, 56.1%, 1); /* EVT Orange */
    
    --colorffred: hsla(151, 100%, 50% ,1);
}


.txt-colorOrange { color: var(--colorOrange); }
.txt-colorBlack  { color: var(--colorBlack); }
.txt-colorBlanc  { color: var(--colorBlanc)!important; }
.txt-colorGris   { color: var(--colorGris); }


p {
    font-family: 'ProductSans-Regular';
    font-size: var(--txtSize);
    line-height: 1.6;
    color: var(--colorGris);
}

p a { text-decoration: underline; text-decoration-thickness: 2px; transition: .3s;}
p a:hover { color: var(--colorBlack); }


h1 {
    font-family: 'ProductSans-Black';
    font-size: calc(var(--txtSize) * 2 + 2vw);
    line-height: .93;
    color: var(--colorBlack);
    z-index: 99;
}


.txt-info {
    font-family: 'ProductSans-Light';
    font-size: calc(var(--txtSize) * 1.5);
    line-height: 1.6;
    color: var(--colorOrange);
}

.txt-important {
    font-family: 'ProductSans-Black';
    font-size: calc(var(--txtSize) * 1.15);
    line-height: 1.6;
    color: var(--colorBlack);
}
.txt-titre {
    font-family: 'ProductSans-Black';
    font-weight: 800;
    text-transform: uppercase;
    font-size: calc(var(--txtSize) * 0.8);
    letter-spacing: calc(var(--txtSize) * 0.2);
    line-height: 1.4;
    color: var(--colorBlack);
    margin-bottom: calc(var(--txtSize) * 3);
}







h2 {
    font-family: 'ProductSans-Black';
    position: relative;
    font-size: calc(var(--txtSize) * 1.5 + 2vw);

    line-height: 1;
    color: var(--colorBlack);
    margin-bottom: calc(var(--txtSize) * 7);
}

h2::before {
    content: '';
    position: absolute;
    top: 0;
    width: calc((var(--txtSize) * 1.5 + 2vw) / 1);
    aspect-ratio: 1 / 1;
    border: calc((var(--txtSize) * 1.5 + 2vw) / 6) solid var(--colorOrange);
    margin-top: calc((var(--txtSize) * 1.5 + 2vw) * -1.2);
}


h3 {
    font-family: 'ProductSans-Black';
    position: relative;
    font-size: calc(var(--txtSize) * 1 + 1.5vw);
    line-height: 1;
    color: var(--colorBlack);
    padding-left: calc((var(--txtSize) * 1 + 1.5vw) * 1.75);
    /*margin-bottom: calc((var(--txtSize) * 1 + 1.5vw) * 1.5);*/
    margin-bottom: calc(var(--txtSize) * 5);
}
h3::before {
    content: '';
    position: absolute;
    height: calc((var(--txtSize) * 1 + 1.5vw) / 1.1);
    aspect-ratio: 1 / 1;
    border: calc((var(--txtSize) * 1 + 1.5vw) / 5) solid var(--colorOrange);
    margin-left: calc((var(--txtSize) * 1 + 1.5vw) * -1.75);
}







section {
    padding: var(--padding) var(--wrap);
}


.wrap {
    padding: 0 var(--wrap);
}




ul {
    display: grid;
    position: relative;
    grid-gap: calc(var(--txtSize) * 1.9) calc(var(--txtSize) * 1.5);
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    margin-top: calc(var(--txtSize) * 3);
}

.contenu {
    grid-gap: calc(var(--txtSize) * 4);
    /*grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));*/
    grid-template-columns: 1fr 1fr;
}

            @media screen and (max-width: 950px) {
                .contenu {
                    grid-template-columns: 1fr;
                }
            }

.contenu span { line-height: 1; }

ul li {
    position: relative;
    padding-left: calc(var(--txtSize) * 2);
}

ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(var(--txtSize) / 1.9);
    height: calc(var(--txtSize) / 1.7);
    aspect-ratio: 1 / 1;
    border: calc(var(--txtSize) / 6) solid var(--colorOrange);
}























.img-deco {
    position: relative;
    margin: var(--padding) 0;
}

.img-deco::before {
    content: '';
    width: 100%;
    position: absolute;
    background-color: hsla(0, 0%, 97%, 1);
    background-image: url(../img/evt-pattern.svg);
    /*background-attachment: fixed;*/
    background-position: 40% 30%;
    background-size: calc((var(--txtSize) * 90 + 1.5vw) * 1.75);
    inset: calc(1rem + (var(--padding) / 2)) 0;
    
}

.img-deco-container {
    width: calc(100% - 2 * var(--wrap));
    margin: 0 auto;
    position: relative;
    aspect-ratio: 2/1;
    overflow: hidden;
    transition: .3s;
}

.img-deco-container > img {
    position: absolute;
    width: 100%;
    aspect-ratio: 2/1;
    object-fit: cover;
    animation: ken-burns 40s ease-in-out infinite;
    transition: .5s;
}

            @media screen and (max-width: 800px) {
                .img-deco::before { background-size: calc((var(--txtSize) * 90 + 1.5vw) * 1.75);; }
                .img-deco-container { aspect-ratio: 1/1;}
                .img-deco-container > img { aspect-ratio: 1/1;}
            }

@keyframes ken-burns {
  0% {
    transform-origin: bottom center;
    transform: scale(1);
  }
  50% {
    transform-origin: bottom center;
    transform: scale(1.3);
  }
  100% {
    transform-origin: bottom center;
    transform: scale(1);
  }
}










header {
    position: relative;
    background-color: hsla(0, 0%, 97%, 1);
    background-image: url(../img/evt-pattern.svg);
    /*background-attachment: fixed;*/
    background-position: 20% 60%;
    background-size: calc((var(--txtSize) * 100 + 1.5vw) * 1.75);
    z-index: -2;
}

header::before {
    content:url(../img/evt-logo.svg);
    position: absolute;
    width: calc(var(--txtSize) * 14);
    top: calc(var(--txtSize) * 2);
    left: var(--wrap);
}



header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 35%);
    z-index: -1;
}

header > div {
    display: grid;
    align-items: center;
    position: relative;
    grid-template-columns: 1fr 32.5vw;
    padding-top: calc(var(--txtSize) * 12 + 2vw);
    padding-bottom: calc(var(--padding) / 1.5);
}

            @media (orientation: portrait), screen and (max-width: 900px) {
                header > div {
                    grid-auto-flow: row;
                    align-content: end;
                    grid-template-columns: 1fr;
                    grid-gap: calc(var(--txtSize) * 3);
                }
            }


header > div > div {
    position: relative;
    aspect-ratio: 1/1;
    /*max-height: 80vh;*/
}

header > div > div::before {
    content: '';
    position: absolute;
    left: calc(var(--txtSize) * -.5);
    height: 100%;
    aspect-ratio: 1/2;
    
    background-image: url(../img/evt-terrassement.jpg);
    background-position: 20% 100%;
    background-size: 400%;
    box-shadow: 0px 41px 30px -20px rgba(0,0,0,0.33);
    
    animation: anim-header-top 4s linear forwards;
}

header > div > div::after {
    content: '';
    position: absolute;
    right: calc(var(--txtSize) * -.5);
    height: 100%;
    aspect-ratio: 1/2;
    
    background-image: url(../img/evt-terrassement.jpg);
    background-position: 80% 100%;
    background-size: cover;
    box-shadow: 0px 41px 30px -20px rgba(0,0,0,0.33);
    
    animation: anim-header-bottom 4s ease-in-out forwards;
}


header.index {
    position: relative;
    background-color: hsla(0, 0%, 97%, 1);
    background-image: url(../img/evt-index.jpg);
    background-attachment: scroll;
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 4/3;
    /*max-height: 80vh;*/
    z-index: -2;
}
            @media (orientation: portrait), screen and (max-width: 250px) {
                header.index {
                        background-size: 120% 100%;
                        aspect-ratio: 1/1;
                }
            }

header.index::before {
    content:url(../img/evt-logo.svg);
    position: absolute;
    width: 40%;
    min-width: 350px;
    max-width: 900px;
    top: 15%;
    left: var(--wrap);
}

header.index::after {
    display: none;
}













            @media (orientation: portrait), screen and (max-width: 900px) {
                
                header > div > div {
                    aspect-ratio: 1.75/1;
                    margin-top: calc(var(--txtSize) * 2);
                }
                
                header > div > div::before {
                    aspect-ratio: 0.875/1;
                    background-position: 15% 80%;
                    background-size: 320%;
                }

                header > div > div::after {
                    aspect-ratio: 0.875/1;
                    background-position: 100% 100%;
                }            

            }

@keyframes anim-header-top {
  0%   { top: 0; }
  100% { top: calc(var(--txtSize) * -2); }
}

@keyframes anim-header-bottom {
  0%   { bottom: 0; }
  100% { bottom: calc(var(--txtSize) * -2); }
}





header > div > div.amenagement-exterieur::before {
    background-image: url(../img/evt-photo-amenagement-roches.jpg);
    background-position: 20% 100%;
    background-size: 300%;
}

header > div > div.amenagement-exterieur::after {
    background-image: url(../img/evt-photo-amenagement-restanques.jpg);
    background-position: 80% 100%;
    background-size: cover;
}


header > div > div.assainissement::before {
    background-image: url(../img/evt-photo-assainissement-pompe-relevage.jpg);
    background-position: 25% 100%;
    background-size: cover;
}

header > div > div.assainissement::after {
    background-image: url(../img/evt-photo-assainissement-fosse.jpg);
    background-position: 80% 100%;
    background-size: cover;
}


header > div > div.tp-vrd::before {
    background-image: url(../img/evt-photo-tp-vrd-voie-publique.jpg);
    background-position: 55% 50%;
    background-size: cover;
}

header > div > div.tp-vrd::after {
    background-image: url(../img/evt-photo-tp-vrd-fuite.jpg);
    background-position: 20% 0%;
    background-size: cover;
}






























.retour {
    display: block;
    width: 100%;
    border-bottom: 3px solid hsla(0, 0%, 80%, 1);
    
    
    font-family: 'ProductSans-Black';
    font-weight: 800;
    text-transform: uppercase;
    font-size: calc(var(--txtSize) * 0.8);
    letter-spacing: calc(var(--txtSize) * 0.2);
    line-height: 1.8;
    color: hsla(0, 0%, 75%, 1);
    text-align: right;
    transition: .3s;
    margin-top: calc(var(--txtSize) * 3);
}

.retour img {
    height: calc(var(--txtSize) * 0.5);
    margin-left: calc(var(--txtSize) * 1);
    transition: .3s;
}


.retour:hover {
    color: hsla(0, 0%, 20%, 1);
}

.retour:hover img {
    margin-bottom: calc(var(--txtSize) * .25);
}









.max75ch { max-width: 75ch !important;}





.picto {
    width: calc(var(--txtSize) * 6 + 2vw);
    margin-bottom: calc(var(--txtSize) / 2);
}






.grid-2 {
    display: grid;
    position: relative;
    grid-gap: calc(var(--txtSize) * 4);
    /*grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));*/
    grid-template-columns: 1fr 1fr;
}
.grid-2 > img {
    max-height: 60vh;
    max-width: 30vw;
    aspect-ratio: 1/1.1;
    object-fit: cover;
    border-radius: calc(var(--txtSize) * 1.5);
    box-shadow: 0px 41px 30px -20px rgb(0 0 0 / 33%);
}


                @media screen and (max-width: 950px) {
                        .grid-2 { grid-template-columns: 1fr; }
                        .grid-2 > img { max-width: 100% !important; }
                }

.grid-vertical-center {
    align-items: center;
}

.no-padding-left {
    padding-left: 0 !important;
    margin-left: calc(var(--wrap) * -1) !important;
}
                @media screen and (max-width: 950px) {
                        .no-padding-left  {
                            margin-left: 0 !important;
                            padding-left: 0 !important;
                        }
                }








.recyclage {
    position: relative;
    display: grid;
    text-align: center;
    margin: auto; 
}

.logo-mini {
    display: block;
    text-align: center;
    margin: auto;
    height: calc(var(--txtSize) * 2 + 2vw);
    
}

.recyclage p {
    max-width: 60ch;
    text-align: center;
    margin: auto;
}


.recyclage div {
    display: grid;
    grid-template-columns: auto auto;
    place-items: center;
    margin-top: calc(var(--txtSize) * 2 + 2vw); 
}

.logo-partenaire {
    display: grid;
    height: calc(var(--txtSize) * 4 + 4vw); 
}



.evt-ciffreo {
    display: grid;
    grid-gap: calc(var(--txtSize) * 3.5);
    grid-template-columns: 1fr 1.5fr;
}

.evt-ciffreo img {
    display: grid;
    height: calc(var(--txtSize) * 6 ); 
    text-align: center;
    margin: auto;
}









.nous-contacter {
    display: grid;
    grid-gap: calc(var(--txtSize) * 6);
    grid-template-columns: calc(var(--txtSize) * 14) auto;
}

.nous-contacter > img {
    max-width: calc(var(--txtSize) * 14);
}


                @media screen and (max-width: 950px) {
                                .nous-contacter {
                                    text-align: center;
                                    grid-template-columns: 1fr;
                                    grid-gap: calc(var(--txtSize) * 3);
                                }
                    
                                .nous-contacter img, .bouton {
                                    margin: auto;
                                }
                            }





.bouton {
    display: flex;
    padding: calc(var(--txtSize) * .8) calc(var(--txtSize) * 1.0);
    width: max-content;
    margin-top: calc(var(--txtSize) * 2);
    border: 3px solid var(--colorBlack);
    
    font-family: 'ProductSans-Black';
    font-weight: 800;
    text-transform: uppercase;
    font-size: calc(var(--txtSize) * 0.8);
    letter-spacing: calc(var(--txtSize) * 0.2);
    line-height: 1.4;
    color: var(--colorBlack);
    
    transition: .3s
}

.bouton:hover {
    padding: calc(var(--txtSize) * .8) calc(var(--txtSize) * 1.3);
    border: 3px solid var(--colorOrange);
    box-shadow: 0px 20px 30px -20px var(--colorOrange);
}





        @media (pointer:coarse) { /* DEBUG le scroll lent sur les backgrounds fixed en mobile / tactile */
            
            header, img-deco::before, .facebook { background-attachment: scroll; }

        }




























/*  BURGER MENU */

.burger-menu {
    position: fixed;
    background-color: rgba(255,255,255,1);
    top: calc(40px + (var(--Coeff) / 8));
    right: calc(var(--wrap) - 0rem);
    width: calc(50px + (var(--Coeff) * 2));
    height: calc(50px + (var(--Coeff) * 2));
    border-radius: 50%;
    border: 0;
    z-index: 999;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

.burger-menu input[type="checkbox"] { visibility: hidden; }

.burger-menu label:before, .burger-menu label:after {
    position: absolute;
    content: '';
    border-radius: 50%;
    cursor: pointer;
    top: 0;
    right: 0;
    width: calc(50px + (var(--Coeff) * 2));
    height: calc(50px + (var(--Coeff) * 2));
}

.burger-menu label:before {
    background: url(../img/burger-on.svg) no-repeat center center;
    background-size: 40% 40%;
}

.burger-menu label:after {
    background: url(../img/burger-off.svg) no-repeat center center;
    background-size: 35% 35%;
}

.burger-menu input[type="checkbox"] + label:before {
    animation: burger-anim-fadeIn .5s cubic-bezier(.4,.0,.23,1) forwards;
}

.burger-menu input[type="checkbox"] + label:after{
    animation: burger-anim-fadeOut .5s cubic-bezier(.4,.0,.23,1) forwards;
}

.burger-menu input[type="checkbox"]:checked + label:before {
    animation: burger-anim-fadeOut .5s cubic-bezier(.4,.0,.23,1) forwards;
}

.burger-menu input[type="checkbox"]:checked + label:after {
    animation: burger-anim-fadeIn .5s cubic-bezier(.4,.0,.23,1) forwards;
}

@keyframes burger-anim-fadeIn {
    0%{
        opacity: 0;
        transform: rotate(0deg);
    }

    100%{    
        opacity: 1;
        transform: rotate(360deg);
    }
}

@keyframes burger-anim-fadeOut {
    0%{
        opacity: 1;
        transform: rotate(0deg);
    }

    100%{    
        opacity: 0;
        transform: rotate(360deg);
    }
}






#menu {
    position: fixed;
    background: rgba(240,240,240,.6);
    inset: 0;
    padding: calc(50px + (var(--Coeff) / 1)) var(--wrap);
    display: none;
    overflow-y: auto;
    backdrop-filter: blur(30px);
    z-index: 998;
}

        @supports not (backdrop-filter: blur(30px)) {
            #menu {
                background: rgba(240,240,240,1);
            } 
        }

#menu > img {
    position: absolute;
    width: calc(var(--txtSize) * 14);
    top: calc(var(--txtSize) * 2);
    left: calc( 50% - (var(--txtSize) * 7));
}

.on {
    display: block !important; 
    animation: menu-fadeIn .5s cubic-bezier(.4,.0,.23,1) forwards;
}
.off {
    animation: menu-fadeOut .5s cubic-bezier(.4,.0,.23,1) forwards;
}

@keyframes menu-fadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes menu-fadeOut {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

.container-menu {
    display: grid;
    grid-gap: calc(var(--txtSize) * 2);
    /*margin-top: calc(var(--txtSize) * 9);*/
    margin-top: 15vh;
    width: 100%;
}

.container-menu a {
    margin: 0 auto;
    font-family: 'ProductSans-Black';
    font-size: calc(var(--txtSize) * 1.0 + 1.2vw);
    line-height: 1;
    color: var(--colorBlack);
    text-align: center;
    text-decoration: none;
    transition: .3s;
}

.container-menu a:hover {
    color: var(--colorOrange);
}













































hr {
    height: 3px;
    /*width: 100%;*/
    background-color: hsla(0, 0%, 90%, 1);
    margin: calc( var(--padding) / 4) var(--wrap);
}

hr.fonce {
    background-color: hsla(0, 0%, 20%, 1);
}



footer {
    background-color: hsla(0, 0%, 15.7%, 1);
    padding: var(--padding) var(--wrap) calc( var(--padding) / 2) var(--wrap);
}

footer p { line-height: 1.2;}

.grid-footer {
    display: grid;
    grid-gap: calc(var(--txtSize) * 4);
    grid-template-columns: auto auto 1fr;
}
.grid-footer-nav {
    display: grid;
    grid-gap: calc(var(--txtSize) * 2);
    grid-template-columns: 1.5fr 1fr;
}

footer a {
    text-decoration: none;
    /*display: grid;*/
    transition: .3s;
    margin-bottom: calc(var(--txtSize) * 1.175 );
}

footer a:hover { color: var(--colorOrange); }

.hr-footer {
    margin: calc( var(--padding) * .3) 0;
    background-color: hsla(0, 0%, 20%, 1);
}


.ffred {
    font-family: 'ffred';
    font-size: calc(var(--txtSize) * 1.175 );
    color: var(--colorBlanc);
}
.color-ffred {
    color: hsla(151, 100%, 50% ,1);
}

.espace-footer {
    display: block;
    height: calc(var(--txtSize) * 1.3 );
}

                @media screen and (max-width: 950px) {
                                .grid-footer {
                                    grid-template-columns: 1fr;
                                }

                            }

                @media screen and (max-width: 600px) {
                                .grid-footer-nav {
                                    grid-template-columns: 1fr;
                                }

                            }






.facebook {
    display: grid;
    text-align: center;
    margin: auto; 
}

.facebook p {
    max-width: 60ch;
    text-align: center;
    margin: auto;
}

.facebook div {
    display: grid;
    grid-template-columns: auto auto;
    place-items: center;
    grid-column-gap: calc(var(--txtSize) * 2 + 2vw); 
    margin-top: calc(var(--txtSize) * 2 + 2vw); 
}

.logo-reseaux-sociaux {
    display: grid;
    height: calc(var(--txtSize) * 1 + 4vw); 
    transition: .15s;
}

.logo-reseaux-sociaux:hover {
    margin-top: calc(var(--txtSize) * -.6); 
}









.partenaires {
    font-family: 'ProductSans-Black';
    font-weight: 800;
    text-transform: uppercase;
    font-size: calc(var(--txtSize) * 0.8);
    letter-spacing: calc(var(--txtSize) * 0.2);
    line-height: 1.4;
    color: hsla(0, 0%, 70%, 1);
    text-align: center;
}

.grid-partenaires {
    margin-top: calc(var(--txtSize) * 2);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(135px, 100%), 14.5%));

    place-items: center;
    justify-content: center;
    grid-column-gap: calc(var(--txtSize) * 3); 
    grid-row-gap: calc(var(--txtSize) * 4);
    min-height: max-content;
}


.chiffres-cle-grid {
    display: grid;
    grid-column-gap: calc(var(--txtSize) * 2);
    grid-row-gap: calc(var(--txtSize) * 3);
    grid-template-columns: auto auto auto;
}


.chiffres-cle {
    display: grid;
    border-left: 6px solid var(--colorOrange);
    padding: calc(var(--txtSize) * 1) 0 calc(var(--txtSize) * .8) calc(var(--txtSize) * 1.15);
    
    font-family: 'ProductSans-Black';
    font-weight: 800;
    text-transform: uppercase;
    font-size: calc(var(--txtSize) * 0.8);
    letter-spacing: calc(var(--txtSize) * 0.2);
    line-height: 1.0;
    color: hsla(0, 0%, 70%, 1);
    background: linear-gradient(90deg, rgba(0,0,0,0.035) 0%, rgba(0,0,0,0) 100%);
}

.chiffres-cle span {
    font-family: 'ProductSans-Black';
    font-weight: 800;
    font-size: calc(var(--txtSize) * 3 + 2vw);
    letter-spacing: normal;
    line-height: 1;
    color: hsla(0, 0%, 20%, 1);
}

                @media screen and (max-width: 820px) {
                    .chiffres-cle-grid {grid-template-columns: 1fr;}
                }




 
.etapes > div {
    display: block;
    width: 55%;
    min-width: 350px;
    margin: auto;
    text-align: center;
}

.picto-fleche {
    display: block;
    height: calc(var(--txtSize) * 2.5);
    margin: calc(var(--txtSize) * 2) auto;
}

.picto-etape {
    display: block;
    margin: 0 auto 10px auto;
    height: calc(var(--txtSize) * 4);
}







.citation {
    display: block;
    width: 100%;
    background-color: hsla(0, 0%, 10%, 1);
    background-image: url(../img/evt-background-citation.jpg);
    background-position: center center;
    background-size: cover;
}

.citation img {
    height: calc(var(--txtSize) * 2.5);
    margin-top: calc(var(--txtSize) * -1);
}


.recyclage-index {
    display: block;
    width: 100%;
    background-color: hsla(0, 0%, 10%, 1);
    background-image: url(../img/evt-background-recyclage.jpg);
    background-position: center center;
    background-size: cover;
}

.recyclage-index img {
    height: calc(var(--txtSize) * 6);
}











.vignette-grid {
    display: grid;
    grid-row-gap: calc(var(--txtSize) * 6);
    grid-column-gap: calc(var(--txtSize) * 2);
    /*grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));*/
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    align-items: flex-end !important;
}

.vignette {
    display: grid;
    border: 4px solid hsla(0, 0%, 95%, 1);
    position: relative;
    border-top: calc(var(--txtSize) * 5) solid hsla(0, 0%, 95%, 1);
    padding: calc(var(--txtSize) * 0.8);
    text-align: center;
    margin: auto 10%;
}

.vignette > a {
    margin: calc(var(--txtSize) * 2) auto 0 auto !important;
}

.vignette > .picto {
    position: absolute;
    top: calc(var(--txtSize) * -8.5);
    left: calc(50% - (calc(var(--txtSize) * 4))) !important;
    height: calc(var(--txtSize) * 8) !important;
    width: auto;
    aspect-ratio: 1/1;
}







.categories-grid {
    display: grid;
    position: relative;
    grid-gap: calc(var(--txtSize) * 4);
    grid-template-columns: calc(var(--txtSize) * 8) 1fr;
    border: 4px solid hsla(0,0%,95%,1);
    margin: auto;
    width: 100%;
    max-width: 1000px;
    /*background-color: hsla(0,0%,95%,1);*/
    padding: calc(var(--txtSize) * 2);
    border-radius: calc(var(--txtSize) * 1.5);
    box-shadow: 0px 60px 30px -40px rgba(0,0,0,0.15);
    margin-bottom: calc(var(--txtSize) * 4);
}

                @media screen and (max-width: 950px) {
                    .categories-grid {
                        grid-template-columns: 1fr;
                        text-align: center;
                        grid-gap: calc(var(--txtSize) * 1);
                    }
                    .categories-grid > img {
                        margin: auto;
                    }
                }

.categories-grid > img {
    width: calc(var(--txtSize) * 8) !important;
    height: auto;
    /*aspect-ratio: 1/1;*/
}



hr.hr-categories { margin: calc( var(--padding) * 1) 0; }




.espace-padding { height: var(--padding); }

.sticky { position: sticky; top: 1rem;}


video {
    width: 100%;
    height: auto;
    /*border-radius: calc(var(--txtSize) * 1.5);*/
    margin-top: calc( var(--padding) * -0);
    box-shadow: 0px 0px 60px rgba(0, 0, 0, .33);
    aspect-ratio: 18/9;
    object-fit: cover;
}


.grid-contact {
    display: grid;
    grid-gap: calc(var(--txtSize) * 6);
    grid-template-columns: 1fr auto;
}

.grid-contact a {
    text-decoration: none;
    text-decoration-color: var(--colorOrange);
    transition: .3s;
}

.grid-contact a:hover {
    text-decoration: underline;
    text-decoration-color: var(--colorOrange);
    transition: .3s;
}

.grid-contact-map {
    display: grid;
    grid-gap: calc(var(--txtSize) * 2);
    grid-template-columns: 1fr 1.5fr;
}


@media screen and (max-width: 950px) {
    .grid-contact {
        grid-template-columns: 1fr;
    }

}