:root{
    --black: black;
    --white: rgb(253, 253, 253);
        --white-opacity: rgba(255, 255, 255, 0.702);
    --blue1: #1632f5;
    --orange: #f65b22;
    --blue2: #08a4f6;
    --jaune: #f4c522;
    --vert: #16f5cb;

    --gap: var(--height-header);
    --border: 3px;
    --main-padding: 50px;
    --font-size: max(30px, 2vw);
    --display-screen: flex;

    --width-bequille: 70px;

    --height-header: 111px;

    --flex-direction-hero-section-button: row;

    --grid-template-column-col2: 1fr 1fr;
    --grid-template-rows-col2: 1fr;
    --grid-template-column-col3: 0.5fr 1fr 1fr;
    --grid-template-rows-col3: 1fr;

    --justify-content-logo-localisation: start;

    --wrap-width: 70%;
    --wrap-min-width: 600px;
    
    --top-hero-logo: calc(var(--height-header));
    --transform-hero-spin-logo: translateX(30%) rotate(0deg);
    --width-hero-logo: 100vmin;
    --right-hero-logo: 0;
}

@media (max-width: 710px) {

:root{
    --gap: 80px;
    --border: 2px;
    --main-padding: 20px;
    --font-size:  max(20px, 2vw);
    --display-screen: none;

    --width-bequille: 35px;

    --height-header: 80px;

    --flex-direction-hero-section-button: column;

    --grid-template-column-col2: 1fr;
    --grid-template-rows-col2: auto auto;
    --grid-template-column-col3: 1fr;
    --grid-template-rows-col3: 0.5fr 1fr 1fr;

    --top-hero-logo: calc(var(--height-header) + 420px);
    --transform-hero-spin-logo: translateX(50%) rotate(0deg);
    --width-hero-logo: 70vmin;
    --right-hero-logo: 50%;

    --justify-content-logo-localisation: center;

    --wrap-width: 100%;
    --wrap-min-width: 300px;
}

@keyframes logo-rotate {
    from { transform: translateX(50%) rotate(0deg); }
    to   { transform: translateX(50%) rotate(360deg); }
}



}