/*schéma pourcent*/
:root {
    --root-background-color: #36B251;
    --root-font-color: #d8d8d8;
    --root-font-family: "Poppins", sans-serif;
    --root-font-size: 16px;
    --root-line-height: 1.5;
}

.lh-vars {
    --color-average-secondary: #D04900;
    --color-average: #FFA400;
    --color-fail-secondary: #EB0F00;
    --color-fail: #FF4E42;
    --color-informative: #0D47A1;
    --color-pass-secondary: #018642;
    --color-pass: #0CCE6B;
    --color-hover: #FAFAFA;
    --gauge-circle-size-big: 150px;
    /* Agrandir la taille des cercles de jauge */
    --gauge-circle-size: 60px;
    /* Agrandir la taille des cercles de jauge */
    --gauge-label-font-size-big: 16px;
    /* Agrandir la taille de la police des labels */
    --gauge-label-font-size: 16px;
    /* Agrandir la taille de la police des labels */
    --gauge-label-line-height-big: 44px;
    --gauge-label-line-height: 1.5;
    --gauge-percentage-font-size-big: 36px;
    /* Agrandir la taille de la police des pourcentages */
    --gauge-percentage-font-size: 36px;
    /* Agrandir la taille de la police des pourcentages */
    --gauge-wrapper-width: auto;
    --report-background-color: #fff;
    --report-border-color-secondary: #ebebeb;
    --report-font-family-monospace: "Poppins", sans-serif;
    --report-font-family: Roboto, Helvetica, Arial, sans-serif;
    --report-font-size: 16px;
    --report-line-height: 24px;
    --report-min-width: 400px;
    --report-text-color-secondary: #151515;
    --report-text-color: #151515;
    --report-width: calc(60 * var(--report-font-size));
    --score-container-padding: 16px;
    /* Augmenter le padding des containers */
    --score-icon-background-size: 24px;
    --score-icon-margin-left: 4px;
    --score-icon-margin-right: 12px;
    --score-icon-margin: 0 var(--score-icon-margin-right) 0 var(--score-icon-margin-left);
    --score-icon-size: 12px;
    --scores-container-padding: 20px 0 20px 0;
    --scorescale-height: 6px;
    --scorescale-width: 18px;
    --gauge-circle-size-stat: 44px;
    --gauge-circle-weight-stat: bold;
    --circle-fill-stat: #fff;
    --color-stat: #fff;
}

.site-entry__stat-group {
    display: flex;
}

.lh-root {
    font-family: var(--report-font-family);
    font-size: var(--report-font-size);
    line-height: var(--report-line-height);
    scroll-behavior: smooth;
    color: #212121;
    margin: 0px;
}

.lh-scores-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.lh-gauge__wrapper--pass {
    color: var(--color-pass);
    fill: var(--color-pass);
    stroke: var(--color-pass);
}

.lh-gauge__wrapper--average {
    color: #FFA400;
    fill: #FFA400;
    stroke: #FFA400;
}

.lh-gauge__wrapper--fail {
    color: #FF4E42;
    fill: #FF4E42;
    stroke: #FF4E42;
}

.lh-gauge {
    stroke-linecap: round;
    width: var(--gauge-circle-size-big);
    /* Ajuster la taille des jauges */
    height: var(--gauge-circle-size-big);
    /* Ajuster la taille des jauges */
}

.lh-gauge-base {
    opacity: 0.1;
    stroke: var(--circle-background);
    stroke-width: var(--circle-border-width);
    fill: var(--circle-fill);
}

.lh-gauge-arc {
    fill: none;
    stroke: var(--circle-color);
    stroke-width: var(--circle-border-width);
}

.lh-gauge__percentage {
    width: 100%;
    height: var(--gauge-circle-size-big);
    /* Ajuster la hauteur */
    position: absolute;
    font-family: var(--report-font-family-monospace);
    font-size: var(--gauge-percentage-font-size-big);
    /* Ajuster la taille de la police des pourcentages */
    line-height: 0;
    text-align: center;
    top: calc(var(--score-container-padding) + var(--gauge-circle-size-big) / 2);
}

.lh-gauge__wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-decoration: none;
    padding: var(--score-container-padding);
    --circle-border-width: 8;
    contain: content;
    will-change: opacity;
}

.lh-gauge__label {
    font-size: var(--gauge-label-font-size-big);
    /* Ajuster la taille de la police des labels */
    line-height: var(--gauge-label-line-height-big);
    margin-top: 10px;
    text-align: center;
    color: var(--report-text-color);
}

.lh-scores-header .lh-gauge__wrapper {
    width: var(--gauge-wrapper-width);
}

    
    .card:nth-child(1)::before {
        bottom: 0;
        right: 0;
        clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);
    }

    .card:nth-child(2)::before {
        bottom: 0;
        left: 0;
        clip-path: circle(calc(6.25rem + 7.5vw) at 0% 100%);
    }

    .card:nth-child(3)::before {
        top: 0;
        right: 0;
        clip-path: circle(calc(6.25rem + 7.5vw) at 100% 0%);
    }

    .card:nth-child(4)::before {
        top: 0;
        left: 0;
        clip-path: circle(calc(6.25rem + 7.5vw) at 0% 0%);
    }


    .card:hover p {
        color: #fff;
    }    
    
    /* Common Style */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html,
    body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Poppins", sans-serif;
        font-size: 62.5%;
        font-size: 10px;
        overflow: auto;
    }

    .logo {
        margin-top: 5px;
        width: 40px;
        height: auto;
    }

    /* Navbar section */


    .sub-menu {
        height: 65px;
    }

    .sub-menu ul {
        list-style-type: none;
        width: 100%;
        height: 65px;
        display: flex;
        padding: 20px;
        justify-content: center;
    }

    .sub-menu ul li {
        width: auto;
        height: 65px;
        padding: 0;
        padding-right: 3rem;
        margin-left: 40px;
        margin-right: 40px;
    }

    .sub-menu ul li a {
        text-decoration: none;
        color: black;
        line-height: 65px;
        font-size: 20px;
        font-family: Righteous;
    }





/*nav bar*/
    .nav {
        width: 100%;
        height: 65px;
        position: fixed;
        line-height: 65px;
        text-align: center;
        z-index:200;
        background-color: black;
    }

    .nav div.logo {
        float: left;
        width: auto;
        height: auto;
        padding-left: 3rem;
        color:white;
        font-size:35px;
        font-family:Righteous;
    }

    .nav div.logo a {
        text-decoration: none;
        color: #fff;
        font-size: 2.5rem;
    }

    .nav div.logo a:hover {
        color: #00E676;
    }

    .nav div.main_list {
        height: 65px;
        float: right;
    }

    .nav div.main_list ul {
        width: 100%;
        height: 65px;
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav div.main_list ul li {
        width: auto;
        height: 65px;
        padding: 0;
        padding-right: 3rem;
    }

    .nav div.main_list ul li a {
        text-decoration: none;
        color: #fff;
        line-height: 65px;
        font-size: 20px;
        font-family: Righteous;
    }

    .nav div.main_list ul li a:hover {
        color: #00E676;
    }
    
    .nav div.main_list ul li.dropdown {
        display: inline-block;
        }
    
    .nav div.main_list ul li .dropbtn {
        cursor: pointer;
    }
    
    .nav div.main_list ul li .dropdown-content {
        display: none;
        position: absolute;
        background-color: #333;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
    
    .nav div.main_list ul li .dropdown-content a {
        color: white;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }
    
    .nav div.main_list ul li .dropdown-content a:hover {
        background-color: #575757;
        all :ease-in-out 0.5s;
    }
    
    .nav div.main_list ul li.dropdown:hover .dropdown-content,
    .nav div.main_list ul li.dropdown.show .dropdown-content {
        display: block;
        
    }
    
    .navTrigger {
        cursor: pointer;
        display: none;
    }
    
    img {
        width: 100%;
        height: auto;
    }

    body {
        overflow: hidden !important;
    }

    a:focus {
        outline: none;
        box-shadow: none;
    }

    input:focus {
        outline: none;
        border: none;
        box-shadow: none;
    }

    input:focus-visible {
        outline: none;
        border: none;
        box-shadow: none;
    }

    button:focus,
    :focus-visible {
        outline: none;
        border: none;
    }

    /* Root*/
    :root {
        --pear-can: #e6ffde;
        --pear-logo: #03403f;
        --apple-can: #f2675a;
        --apple-logo: #ec4458;
        --exotic-can: #9590f1;
        --black-color: #000000;
        --white-color: #ffffff;
        --exotic-logo: #6464ff;
        --pear-background: #c9e78a;
        --apple-background: #ffb2b2;
        --exotic-background: #c1bff2;
    }
    
    /* After */
    .fruit-image::after {
        content: "";
        position: absolute;
        background: linear-gradient(90deg, #000 3.66%, rgba(0, 0, 0, 0) 92.35%);
        opacity: 0.43;
        filter: blur(7.5px);
        right: 0;
        width: 173px;
        height: 30px;
        z-index: 11;
    }

    .image-one::after {
        bottom: -50px;
    }

    .image-two::after {
        bottom: -200px;
        height: 22px;
    }

    .image-three::after {
        bottom: -280px;
        width: 103px;
    }

    .image-four::after {
        bottom: -50px;
    }

    /*Section  */
    .section-container-main {
        width: 100vw;
        overflow: hidden;
        position: relative;
        z-index: -1;
    }

    .section-container {
        width: 300vw;
        display: flex;
        position: relative;
        align-items: center;
    }

    .section {
        min-width: 100vw;
        height: 100vh;
        position: relative;
        overflow: hidden;
        z-index: -1;
        background: var(--pear-background);
    }

    .section:nth-child(2) {
        background-color: var(--apple-background);
    }

    .section:nth-child(3) {
        background-color: var(--exotic-background);
    }
        .myP {
        text-align: justify;
        padding-left: 15%;
        padding-right: 15%;
        font-size: 20px;
    }
    
    
     /*alternatives*/
 .alternativecard{
     margin-left: 15%;
 }
 .alternativecard h2{
     margin-bottom: 10px;
 }
 .twocards{
     margin-left: 15%;
 }
 .flip {
        position: relative;
    }

    

    .flip>.back {
        position: absolute;
        opacity: 0;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        
    }

    

    .flip {
        position: relative;
        display: inline-block;
        margin-right: 2px;
        margin-bottom: 1em;
        width: 400px;
    }

    .flip>.front,
    .flip>.back {
        display: block;
        color: white;
        width: inherit;
        background-size: cover !important;
        background-position: center !important;
        height: 220px;
        padding: 1em 2em;
        background: #1D1D1D;
        border-radius: 10px;
    }

    .flip>.front p,
    .flip>.back p {
        font-size: 16px;
        line-height: 100%;
        color: #36B251;
        margin-left:10%;
        margin-right:10%;
    }

    .text-shadow {
        text-shadow: 1px 1px rgba(0, 0, 0, 0.04), 2px 2px rgba(0, 0, 0, 0.04), 3px 3px rgba(0, 0, 0, 0.04), 4px 4px rgba(0, 0, 0, 0.04), 0.125rem 0.125rem rgba(0, 0, 0, 0.04), 6px 6px rgba(0, 0, 0, 0.04), 7px 7px rgba(0, 0, 0, 0.04), 8px 8px rgba(0, 0, 0, 0.04), 9px 9px rgba(0, 0, 0, 0.04), 0.3125rem 0.3125rem rgba(0, 0, 0, 0.04), 11px 11px rgba(0, 0, 0, 0.04), 12px 12px rgba(0, 0, 0, 0.04), 13px 13px rgba(0, 0, 0, 0.04), 14px 14px rgba(0, 0, 0, 0.04), 0.625rem 0.625rem rgba(0, 0, 0, 0.04), 16px 16px rgba(0, 0, 0, 0.04), 17px 17px rgba(0, 0, 0, 0.04), 18px 18px rgba(0, 0, 0, 0.04), 19px 19px rgba(0, 0, 0, 0.04), 1.25rem 1.25rem rgba(0, 0, 0, 0.04);
    }

/* FOOTER*/
.footer {
  color: white;
  text-align: center;
  padding: 30px;
  font-family:"Poppins", sans-serif;
  font-size:16px;
  background-color: black;
}

.link {
  color: white;
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

.haut{
    color:black;
    font-size: 40px;
    text-transform: uppercase;
    margin-left: 40px;
}