@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
    font-family: 'Arista2.0';
    src:url('../fonts/z-arista/Arista2.0.ttf'),
        url('../fonts/z-arista/Arista2.0_Alternate_light.ttf') ,
        url('../fonts/z-arista/Arista2.0_fat.ttf'),
        url('../fonts/z-arista/Arista2.0Alternate.ttf'),
        url('../fonts/z-arista/Ar'),
        url('../fonts/z-arista/Arista2.0Alternate_full.ttf'); 
        font-weight: normal;
        font-style: normal;
}
:root {
    --color-default: #000000;
    --color-primary: #FFDE00;
    --color-second: #0000FF;
    --color-third: #FFCC00;
    --color-forth: #FFF5B4;
    --color-fifth: #02021a;
    --color-seventh: #ebecec;
    --color-hover: #93C7F5;
    --color-seventh: #3b91dd;
    --color-ncreative:#FF6400;
    --color-nprint:#FFDE00;
    --color-ndigital:#0000FF;
    --color-ngreen:#008D36;
    --tittle-font-size: 85px;
    --tittle-font-weight: 500;
    --transition: all .3s ease;
    --transition-01: all .8s ease;
    --box-shadow: 0 0 10px #FFCC00;
    --box-shadow-4: 0 0 5px #FFCC00;
    --box-shadow-1: 0 0 3px #fff;
    --box-shadow-3: 0 0 2px #0000FF;
    --box-shadow-5: 0 0 5px #0000FF;
    --box-shadow-2: 0 0 20px #fff;
    --menu-speed: .75s;
    --font-family: 'Poppins', arial, sans-serif;
    --font-family2: 'Arista2.0', Poppins, Arial;
}


/* 
----------------
    Général
----------------
 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins' , Arial, sans-serif;
    text-decoration: none;
    list-style: none;
}




html {
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    color: var(--color-default);
}

.header img {
    width: 100%;
    height: auto;
}

main {
    width: 100%;
    z-index: 9999;
}

header {
    width: 100%;
    height: 100vh;
    z-index: 10;
}

.header-nyusu {
    background-color: rgb(233, 233, 233);
    width: 100%;
    height: 100vh;
    z-index: 900;
}

.bg-ngenie {
    width: 100%;
    min-height: 100vh;
    background-image: url(../images/bg-ngenie.jpg);
    background-attachment: fixed;
    background-size: cover;
    position: relative;
}

.bg-nyusu {
    width: 100%;
    min-height: 100vh;
    background-image: url(../images/bg-nyusu.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}


/* back to top */

#myBtn {
    width: 50px;
    height: 50px;
    opacity: 0;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 9999;
    border: none;
    outline: none;
    background-color: var(--color-hover);
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 2000px;
    transition: ease all .3s;
}

#myBtn:hover {
    background-color: var(--color-second);
}

#myBtn {
    font-size: 20px;
}


/* 
---------------------------
header
---------------------------
*/

nav {
    position: fixed;
    width: 100%;
    align-items: center;
    z-index: 100;
    margin: 0 auto;
}

.navbar {
    width: 85%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding-top: 60px;
    position: relative;
}

.navbarx {
    width: 85%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding-top: 60px;
    position: relative;
}


/* 
======================
Menu
======================
*/

.menu {
    display: flex;
    width: 35%;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    overflow-x: hidden;
    transition: width 0.5s;
    margin-top: 15px;
}

.menu li {
    width: auto;
    height: auto;
    transition: var(--transition);
    cursor: pointer;
}

.menu li:hover,
.menu li.active {
    background-color: #3b91dd;
    border-radius: 400px;
}

.menu li:hover,
.menu li#active {
    background-color: #3b91dd;
    border-radius: 400px;
}

.menu li a {
    color: var(--color-default);
    transition: var(--transition);
    font-family: var(--font-family);
    font-weight: 500;
    padding: 5px 20px;
    text-align: center;
    font-size: 18px;
}

.menu li:hover a,
.menu li.active a {
    color: #ffffff;
    border-radius: 10px;
    padding: 5px 20px;
    font-weight: 700;
}

.menu li:hover a,
.menu li#active a {
    color: #ffffff;
    border-radius: 10px;
    padding: 5px 20px;
    font-weight: 700;
}

.menu.slide {
    width: 0;
}

.menu.hide {
    display: none !important;
}


/* 
=========================
menu fon noir
=========================
*/

.menu-fd-noir {
    display: flex;
    width: 35%;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    overflow-x: hidden;
    transition: width 0.5s;
}

.menu-fd-noir li {
    width: auto;
    height: auto;
    transition: var(--transition);
    cursor: pointer;
}

.menu-fd-noir li:hover,
.menu-fd-noir li.active {
    background-color: #ffffff;
    border-radius: 400px;
}

.menu-fd-noir li:hover,
.menu-fd-noir li#active {
    background-color: #94c5ee;
    border-radius: 400px;
}

.menu-fd-noir li a {
    color: #ffffff;
    transition: var(--transition);
    font-family: var(--font-family);
    font-weight: 500;
    padding: 5px 20px;
    text-align: center;
    font-size: 18px;
}

.menu-fd-noir li:hover a,
.menu-fd-noir li.active a {
    color: #0000FF;
    border-radius: 10px;
    padding: 5px 15px;
    font-weight: 700;
}

.menu-fd-noir li:hover a,
.menu-fd-noir li#active a {
    color: #0000FF;
    border-radius: 10px;
    padding: 5px 15px;
    font-weight: 700;
}

.menu-fd-noir.slide {
    width: 0;
}

.menu-fd-noir.hide {
    display: none !important;
}


/* ================
Menu print
   ===================
*/

.menu-print {
    display: flex;
    width: 35%;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    overflow-x: hidden;
    transition: width 0.5s;
}

.menu-print li {
    width: auto;
    height: auto;
    transition: var(--transition);
    cursor: pointer;
}

.menu-print li:hover,
.menu-print li.active {
    background-color: #FFCC00;
    border-radius: 400px;
}

.menu-print li:hover,
.menu-print li#active {
    background-color: #FFCC00;
    border-radius: 400px;
}

.menu-print li a {
    color: #ffffff;
    transition: var(--transition);
    font-family: var(--font-family);
    font-weight: 500;
    padding: 5px 20px;
    text-align: center;
    font-size: 18px;
}

.menu-print li:hover a,
.menu-print li.active a {
    color: #000000;
    border-radius: 10px;
    padding: 5px 15px;
    font-weight: 700;
}

.menu-print li:hover a,
.menu-print li#active a {
    color: #000000;
    border-radius: 10px;
    padding: 5px 15px;
    font-weight: 700;
}

.menu-print.slide {
    width: 0;
}

.menu-print.hide {
    display: none !important;
}


/* ================
Menu creative
   ===================
*/

.menu-creative {
    display: flex;
    width: 35%;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    overflow-x: hidden;
    transition: width 0.5s;
}

.menu-creative li {
    width: auto;
    height: auto;
    transition: var(--transition);
    cursor: pointer;
}

.menu-creative li:hover,
.menu-creative li.active {
    background-color: #FF6400;
    border-radius: 400px;
}

.menu-creative li:hover,
.menu-creative li#active {
    background-color: #FF6400;
    border-radius: 400px;
}

.menu-creative li a {
    color: #ffffff;
    transition: var(--transition);
    font-family: var(--font-family);
    font-weight: 500;
    padding: 5px 20px;
    text-align: center;
    font-size: 18px;
}

.menu-creative li:hover a,
.menu-creative li.active a {
    color: #ffffff;
    border-radius: 10px;
    padding: 5px 15px;
    font-weight: 700;
}

.menu-creative li:hover a,
.menu-creative li#active a {
    color: #ffffff;
    border-radius: 10px;
    padding: 5px 15px;
    font-weight: 700;
}

.menu-creative.slide {
    width: 0;
}

.menu-creative.hide {
    display: none !important;
}


/* ================
Menu green
   ===================
*/

.menu-green {
    display: flex;
    width: 35%;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    overflow-x: hidden;
    transition: width 0.5s;
}

.menu-green li {
    width: auto;
    height: auto;
    transition: var(--transition);
    cursor: pointer;
}

.menu-green li:hover,
.menu-green li.active {
    background-color: #008D36;
    border-radius: 400px;
}

.menu-green li:hover,
.menu-green li#active {
    background-color: #008D36;
    border-radius: 400px;
}

.menu-green li a {
    color: #000000;
    transition: var(--transition);
    font-family: var(--font-family);
    font-weight: 500;
    padding: 5px 20px;
    text-align: center;
    font-size: 18px;
}

.menu-green li:hover a,
.menu-green li.active a {
    color: #ffffff;
    border-radius: 10px;
    padding: 5px 15px;
    font-weight: 700;
}

.menu-green li:hover a,
.menu-green li#active a {
    color: #ffffff;
    border-radius: 10px;
    padding: 5px 15px;
    font-weight: 700;
}

.menu-green.slide {
    width: 0;
}

.menu-green.hide {
    display: none !important;
}


/* 
--------------
sous menu
--------------
*/

.menu-deroulant-default .sous-menu {
    display: none;
    background-color: #fdfdec;
    border-top: 5px solid #3b91dd;
    width: 200px;
    line-height: 2;
    height: auto;
    position: absolute;
    padding: 20px 10px;
    margin-top: 5px;
    border-radius: 10px;
}

.menu-deroulant-green .sous-menu {
    display: none;
    background-color: #fdfdec;
    border-top: 5px solid #008D36;
    width: 200px;
    line-height: 2;
    height: auto;
    position: absolute;
    padding: 20px 10px;
    margin-top: 5px;
    border-radius: 10px;
}

.menu-deroulant-print .sous-menu {
    display: none;
    background-color: #fdfdec;
    border-top: 5px solid #FFC800;
    width: 200px;
    line-height: 2;
    height: auto;
    position: absolute;
    padding: 20px 10px;
    margin-top: 5px;
    border-radius: 10px;
}

.menu-deroulant-noir .sous-menu {
    display: none;
    background-color: #fdfdec;
    border-top: 5px solid #0000FF;
    width: 200px;
    line-height: 2;
    height: auto;
    position: absolute;
    padding: 20px 10px;
    margin-top: 5px;
    border-radius: 10px;
}

.menu-deroulant-creative .sous-menu {
    display: none;
    background-color: #fdfdec;
    border-top: 5px solid #FF6400;
    width: 200px;
    line-height: 2;
    height: auto;
    position: absolute;
    padding: 20px 10px;
    margin-top: 5px;
    border-radius: 10px;
}

.menu-deroulant-default .sous-menu li {
    transition: var(--transition);
    font-weight: 500;
    padding: 5px 20px;
    font-size: 18px;
}

.menu-deroulant-green .sous-menu li {
    transition: var(--transition);
    font-weight: 500;
    padding: 5px 20px;
    font-size: 18px;
}

.menu-deroulant-print .sous-menu li {
    transition: var(--transition);
    font-weight: 500;
    padding: 5px 20px;
    font-size: 18px;
}

.menu-deroulant-noir .sous-menu li {
    transition: var(--transition);
    font-weight: 500;
    padding: 5px 20px;
    font-size: 18px;
}

.menu-deroulant-creative .sous-menu li {
    transition: var(--transition);
    font-weight: 500;
    padding: 5px 20px;
    font-size: 18px;
}

.menu-deroulant-default .sous-menu li a {
    color: #000000;
    transition: var(--transition);
    padding: 5px;
}

.menu-deroulant-default#active .sous-menu li a {
    color: #000000;
    transition: var(--transition);
    padding: 5px;
}

.menu-deroulant-default .sous-menu li:hover a {
    color: #ffffff;
}

.menu-deroulant-green .sous-menu li a {
    color: #000000;
    transition: var(--transition);
    padding: 5px;
}

.menu-deroulant-green#active .sous-menu li a {
    color: #000000;
    transition: var(--transition);
    padding: 5px;
}

.menu-deroulant-creative .sous-menu li a {
    color: #000000;
    transition: var(--transition);
    padding: 5px;
}

.menu-deroulant-creative#active .sous-menu li a {
    color: #000000;
    transition: var(--transition);
    padding: 5px;
}

.menu-deroulant-print .sous-menu li a {
    color: #000000;
    transition: var(--transition);
    padding: 5px;
}

.menu-deroulant-print#active .sous-menu li a {
    color: #000000;
    transition: var(--transition);
    padding: 5px;
}

.menu-deroulant-noir .sous-menu li a {
    color: #000000;
    transition: var(--transition);
    padding: 5px;
}

.menu-deroulant-noir#active .sous-menu li a {
    color: #000000;
    transition: var(--transition);
    padding: 5px;
}

.menu-deroulant-green .sous-menu li:hover a {
    color: #fff;
}

.menu-deroulant-creative .sous-menu li:hover a {
    color: #fff;
}

.menu-deroulant-noir .sous-menu li:hover a {
    color: #0000ff;
}

.menu-deroulant-default:hover .sous-menu {
    display: block;
}

.menu-deroulant-green:hover .sous-menu {
    display: block;
}

.menu-deroulant-print:hover .sous-menu {
    display: block;
}

.menu-deroulant-noir:hover .sous-menu {
    display: block;
}

.menu-deroulant-creative:hover .sous-menu {
    display: block;
}


/* 
--------------------------------------
menu au click
-------------------------------------
*/

.menubar {
    position: absolute;
    display: none;
    height: 60px;
    width: 65px;
    background: #000000;
    color: #ffffff;
    font-size: 25px;
    text-align: center;
    padding-top: 12px;
    box-shadow: 0 0 5px rgba(100, 100, 100, 0.3);
    border: 1px solid #000;
    cursor: pointer;
    right: 0;
    top: 68px;
    transition: var(--transition);
    z-index: 999999;
}

.menubar-fd-noir {
    position: absolute;
    display: none;
    height: 60px;
    width: 65px;
    background: var(--color-ndigital);
    color: #ffffff;
    font-size: 25px;
    text-align: center;
    padding-top: 12px;
    box-shadow: 0 0 5px rgba(100, 100, 100, 0.3);
    border: 1px solid #000;
    cursor: pointer;
    right: 0;
    top: 68px;
    transition: var(--transition);
    z-index: 999999;
}

.menubar-green {
    position: absolute;
    display: none;
    height: 60px;
    width: 65px;
    background: #008D36;
    color: #ffffff;
    font-size: 25px;
    text-align: center;
    padding-top: 12px;
    box-shadow: 0 0 5px rgba(100, 100, 100, 0.3);
    border: 1px solid #000;
    cursor: pointer;
    right: 0;
    top: 68px;
    transition: var(--transition);
    z-index: 999999;
}

.menubar-print {
    position: absolute;
    display: none;
    height: 60px;
    width: 65px;
    background: #FFC800;
    color: #141413;
    font-size: 25px;
    text-align: center;
    padding-top: 12px;
    box-shadow: 0 0 5px rgba(100, 100, 100, 0.3);
    border: 1px solid #000;
    cursor: pointer;
    right: 0;
    top: 68px;
    transition: var(--transition);
    z-index: 999999;
}

.menubar-creative {
    position: absolute;
    display: none;
    height: 60px;
    width: 65px;
    background: #FF6400;
    color: #fff;
    font-size: 25px;
    text-align: center;
    padding-top: 12px;
    box-shadow: 0 0 5px rgba(100, 100, 100, 0.3);
    border: 1px solid #000;
    cursor: pointer;
    right: 0;
    top: 68px;
    transition: var(--transition);
    z-index: 999999;
}

.menubar:hover {
    background-color: #FFC800;
    color: var(--color-second);
    border: 1px solid var(--color-third);
}

.menubar-fd-noir:hover {
    background-color: #FFC800;
    color: var(--color-second);
    border: 1px solid var(--color-third);
}

.menubar-green:hover {
    background-color: #FFC800;
    color: var(--color-second);
    border: 1px solid var(--color-third);
}

.menubar-print:hover {
    background-color: #FFC800;
    color: var(--color-second);
    border: 1px solid var(--color-third);
}

.menubar-creative:hover {
    background-color: #FFC800;
    color: var(--color-second);
    border: 1px solid var(--color-third);
}

.menubar.active {
    display: block;
}

.menubar.fixed {
    position: relative;
}

.menubar-fd-noir.active {
    display: block;
}

.menubar-green.active {
    display: block;
}

.menubar-print.active {
    display: block;
}

.menubar-creative.active {
    display: block;
}

.menu.active {
    display: block;
}

.menubar.fixed {
    position: relative;
}

.Closemenu {
    position: absolute;
    height: 60px;
    width: 65px;
    background: #000000;
    color: #fff;
    font-size: 25px;
    text-align: center;
    padding-top: 11px;
    box-shadow: 0 0 5px rgba(100, 100, 100, 0.3);
    border: 1px solid #000000;
    cursor: pointer;
    top: 68px;
    right: 7.5%;
    z-index: 999999999;
    transition: var(--transition);
}

.Closemenu:hover {
    background: var(--color-third);
    border: 1px solid var(--color-third);
    color: var(--color-second);
}

.navBarclick {
    background-color: #141413;
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 999999999;
    transition: var(--transition-01);
    visibility: hidden;
    opacity: 0;
}

.navBarclick-active {
    visibility: visible;
    opacity: 1;
}

#clickmenu {
    width: 75%;
    margin: 0 auto;
    padding-top: 120px;
    justify-content: space-between;
}

.clickmenu {
    width: 8%;
    padding-top: -5px;
}

.clickmenu li {
    padding: 25px 0 0 0;
    position: relative;
}

.clickmenu li a {
    font-size: 50px;
    font-weight: 600;
    font-family: var(--font-family);
    font-family: Poppins, Arial, Helvetica, sans-serif;
    color: #6e6d6d;
    transition: var(--transition);
    z-index: 100;
    position: relative;
}

.clickmenu li a:hover {
    color: var(--color-third);
    padding-left: 10px;
}

.clickmenu li:hover .activemenu {
    display: block;
}

.activemenu {
    background-color: var(--color-second);
    width: 100%;
    height: 30px;
    position: absolute;
    bottom: 5px;
    left: -15px;
    z-index: 10;
    border-radius: 200px;
    display: none;
    transition: var(--transition);
}

.clikmenu-menu-deroulant .clickmenu-sous-menu {
    position: absolute;
    left: 200%;
    top: -150%;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 5px 20px 20px 20px;
    border-left: 5px solid var(--color-second);
    display: none;
    transition: all ease .3s;
}

.clikmenu-menu-deroulant .clickmenu-sous-menu li a {
    font-size: 20px;
    padding: 5px 20px;
}

.clikmenu-menu-deroulant .clickmenu-sous-menu li:hover a {
    color: rgb(255, 255, 255);
    background-color: blue;
    border-radius: 200px;
}

.clikmenu-menu-deroulant:hover .clickmenu-sous-menu {
    display: block;
    transition: all ease .3s;
}


/* #clickmenu .logo{

} */

.socialmedia {
    width: 45%;
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
    padding-top: 200px;
    background-color: rgb(192, 192, 192);
}

.block-navClickmenu {
    display: flex;
}

#socialmedia {
    padding: 220px 0 0 100px;
    color: #000000;
}

.info-social-media {
    padding-bottom: 20px;
}

.info-social-media h2 {
    padding-bottom: 20px;
    font-size: 35px;
    font-weight: 600;
    text-transform: uppercase;
    font-family: century gothic, Helvetica, sans-serif;
}

.info-social-media span {
    padding: 20px;
    font-size: 16px;
    font-family: century gothic, Helvetica, sans-serif;
}

.-img-social-media {
    padding-top: 50px;
}

.-img-social-media i {
    font-size: 40px;
}

.-img-social-media a i {
    color: rgb(0, 0, 0);
    transition: var(--transition);
    width: 35px;
    height: 35px;
    border-radius: 5px;
}

.fa-facebook-square:hover {
    color: rgb(3, 69, 250);
}

.fa-instagram-square:hover {
    color: rgb(255, 0, 76);
}

.fa-youtube-square:hover {
    color: rgb(255, 0, 0);
}

.fa-twitter-square:hover {
    color: rgb(0, 195, 255);
}

.fa-linkedin:hover {
    color: rgb(0, 98, 255);
}

.-img-social-media P {
    font-size: 25px;
    font-family: century gothic, Helvetica, sans-serif;
    font-weight: 600;
}

.bande {
    background-color: #FFDE00;
    width: 100%;
    height: 1px;
    position: relative;
    left: -200px;
    margin-bottom: 10px;
}

.design-menu {
    font-size: 35px;
    font-weight: 500;
    font-family: century gothic, Poppins, sans-serif;
    text-transform: uppercase;
    transform: rotate(90deg);
    position: absolute;
    bottom: 75%;
    top: 27%;
    color: white;
}


/* 
---------------------------
footer
---------------------------
*/

.bg-footer {
    height: auto;
    justify-content: center;
    background-color: var(--color-default);
    padding: 200px 0;
}

.max-foot {
    width: 80%;
    margin: 0 auto;
}

.content_footer {
    width: 100%;
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-weight: 300;
}

.drapeau {
    width: 80%;
    height: auto;
    position: relative;
    left: 30%;
}

.drapeau img {
    width: 50px;
    height: auto;
}

.b_left {
    color: aliceblue;
    width: 25%;
    text-align: justify;
}

.b_center {
    color: aliceblue;
    width: 16%;
    margin-top: 50px;
}

.b_center img {
    width: 35px;
    padding-right: 10px;
}

.b_rigth {
    color: aliceblue;
    width: 25%;
    margin-top: 50px;
}

.span {
    font-size: 20px;
    font-weight: 400;
    padding-left: -10px;
}

input[type="mail"] {
    background-color: #ffffff;
    width: 100%;
    height: 40px;
    border: none;
    padding: 20px 0;
    margin-bottom: 20px;
    padding-left: 20px;
}

input[type="Email"] {
    background-color: #ffffff;
    width: 49.5%;
    height: 40px;
    border: none;
    padding-left: 20px;
    margin-bottom: 20px;
}

input[type="text"] {
    background-color: #ffffff;
    width: 49.5%;
    height: 40px;
    border: none;
    padding-left: 20px;
    margin-bottom: 20px;
}

textarea {
    background-color: #ffffff;
    width: 99.5%;
    height: 80px;
    border: none;
    padding-left: 20px;
    margin-bottom: 20px;
    padding-top: 10px;
}

textarea:focus {
    outline: none;
}

input:focus {
    outline: none;
}

.tittle-nl {
    font-size: 20px;
    font-weight: 400;
    padding-bottom: 20px;
}



#btn-send {
    background-color: #ffffff;
    border: var(--color-third);
    width: 40%;
    height: 40px;
    color: #000000;
    font-weight: 500;
    font-size: 18px;
    margin-top: 20px;
    transition: var(--transition);
    font-family: Arial, Helvetica, sans-serif;
}

#btn-send:hover {
    cursor: pointer;
    box-shadow: var(--box-shadow);
    color: var(--color-second);
    background-color: var(--color-primary);
}

.info-footer {
    position: relative;
    top: -30px;
    font-size: 16px;
    left: 35px;
}


/* 
------------------------
index.php
------------------------
*/

.liste-services {
    width: 100%;
    margin: 0 auto;
    justify-content: space-between;
}

.liste-services b {
    font-size: 18px;
    font-weight: 400;
}

/* .liste-services ul li{
    list-style-image: url(../puces/nyusu.png);
} */

.info-head-left {
    position: relative;
    top: 550px;
    width: 30%;
    left: 200px;
}

.info-head-right {
    width: 55%;
    background-color: rgb(207, 206, 206);
    height: 100vh;
}

.info-head-right img {
    width: 80%;
    padding: 0 30px 0;
    position: relative;
    bottom: 50px;
    top: 25px;
    left: 40px;
}

.bock-head {
    display: flex;
    width: 100%;
    margin: 0 auto;
    position: relative;
    justify-content: space-between;
}

.tittle-head {
    position: relative;
    font-size: 45px;
    color: #000000;
    line-height: 1.3;
    font-family: 'Arista2.0';
}

.info-head {
    font-size: 18px;
    font-weight: normal;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-style: narrow;
    padding-top: -10px;
}
/*

.btn-ensavoirplus {
    background-color: var(--color-second);
    width: 250px;
    height: 45px;
    text-align: center;
    margin-top: 40px;
    transition: var(--transition);
}

.btn-ensavoirplus:hover {
    background-color: var(--color-primary);
    box-shadow: var(--box-shadow);
    cursor: pointer;
    color: var(--color-second);
}

.btn-ensavoirplus:hover a {
    color: var(--color-second);
}

.btn-ensavoirplus a {
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    font-family: Arial, Poppins, sans-serif;
    transition: var(--transition);
    padding: 20px;
    position: relative;
    top: 10px;
}*/




/*.btn-ensavoirplusx {*/
/*    background-color: var(--color-second);*/
/*    width: 50px;*/
/*    height: 50px;*/
/*    text-align: center;*/
/*    border-radius: 200px;*/
/*    margin-top: 40px;*/
/*    transition: var(--transition);*/
/*}*/

/*.btn-ensavoirplusx:hover {*/
/*    background-color: var(--color-primary);*/
/*    box-shadow: var(--box-shadow);*/
/*    cursor: pointer;*/
/*    color: var(--color-second);*/
/*}*/

/*.btn-ensavoirplusx:hover a {*/
/*    color: var(--color-second);*/
/*}*/

/*.btn-ensavoirplusx a {*/
/*    color: #ffffff;*/
/*    font-size: 18px;*/
/*    font-weight: 500;*/
/*    font-family: Arial, Poppins, sans-serif;*/
/*    transition: var(--transition);*/
/*    padding: 20px;*/
/*    position: relative;*/
/*    top: 10px;*/
/*}*/




/* 
------------------------------
main
------------------------------
*/
 
  #grow_title{
        font-size:100px;
    }
  #min_title{
        font-size:35px;
    }
    
    #info_tittle{
        font-size:25px;
    }
.a-propos {
    width: 85%;
    justify-content: space-between;
    margin: 0 auto;
    padding: 300px 10px 0 0;
}

.img-a-propos {
    width: 50%;
}

.img-a-propos img {
    width: 50%;
}

.info-a-propos {
    position: relative;
    left: 50px;
    padding: 50px 0px;
    width: 60%;
}

.tittle-info {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.1;
    padding: 20px 0;
    font-family: var(--font-family2);
    letter-spacing: -1;
    color: #000;
}

.cont-info-a-propos {
    font-size: 18px;
    /* width: 45%; */
}

#a-propos {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.a-propos-img {
    width: 100%;
    position: relative;
    bottom: 250px;
    opacity: .8;
}

.a-propos-img img {
    width: 100%;
}

.info-a-propos-servives {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: -200px;
    padding-bottom: 200px;
}

.info-a-propos-servives-text {
    position: relative;
    background-color: #ffd900;
    width: 35%;
    height: 730px;
    top: 250px;
    right: 500px;
    border: 15px solid #ffff;
}

.info-a-propos-servives-img {
    width: 40%;
}

.bg-info-a-propos-servives-text {
    padding: 50px 40px;
}

.block-services {
    padding: 35px;
    width: 100%;
height: auto;
}

.services {
    display: flex;
    padding: 15px 0;
}

.services svg .cls-1 {
    fill: #0000FF;
}

.sec-tittle {
    font-size: 40px;
    font-weight: 500;
    cursor: pointer;
    left: 10px;
}

.sec-tittle a {
    color: #000;
    transition: var(--transition);
    position: relative;
    top: 5px;
    left: 15px;
    font-family: 'Arial ', Helvetica, sans-serif;
}

.sec-tittle:hover a {
    color: #ffffff;
    background-color: #0000ff;
    border-radius: 290px;
    box-shadow: var(--box-shadow-4);
    padding: 5px 20px;
    font-size: 35px;
}

.services svg {
    width: 45px;
    margin-right: 10px;
}

.btn-decouvrez-lagence {
    padding: 30px;
    text-align: center;
    width: 100%;
    background-color: var(--color-second);
    transition: var(--transition);
    position: relative;
    top: 50px;
}

.btn-decouvrez-lagence a {
    color: #fff;
    font-size: 27px;
}

.btn-decouvrez-lagence:hover {
    cursor: pointer;
    box-shadow: var(--box-shadow-5);
    background-color: #111fbd;
}

.button a {
    color: #ffffff;
    font-size: 40px;
    padding-left: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: narrow;
    transition: var(--transition);
}

.button:hover a {
    color: rgb(255, 255, 255);
}


/* 
--------------------
nos-services
--------------------
*/

#nos-services {
    background-color: #ECECEC;
    width: 100%;
    height: auto;
}

.titre-nos-services {
    position: relative;
    font-size: 75px;
    font-weight: 800;
    color:black;
    z-index: 100;
    /* font-family: century gothic, Poppins, arial; */
    font-family: var(--font-family2);
}

.sous-titre-nos-services {
    position: relative;
    font-size: 60px;
    font-weight: 400;
    z-index: 100;
    /* font-family: century gothic, Poppins, arial; */
    font-family: var(--font-family2);
    color: #000;
}


.nos-services {
    width: 80%;
    margin: 0 auto;
    padding-top: 150px;
}

.titre-services {
    padding-left: 50px;
}

.titre-services-equp {
    padding-left: 50px;
}

/* .souligneur {
    background-color: var(--color-third);
    width: 250px;
    height: 38px;
    position: relative;
    top: -40px;
    left: -5px;
} */

.souligneur {
    background-color: var(--color-third);
    width: 150px;
    height: 10px;
    position: relative;
    top: -15px;
    left: -5px;
}


#souligneur-creative{
    width: 150px;
    height: 10px;
    position: relative;
    top: -15px;
    left: -5px;
    background-color: #FF6400;
}


#souligneur-digital{
    width: 150px;
    height: 10px;
    position: relative;
    top: -15px;
    left: -5px;
    background-color: #0000ff;
    /* background-color: #bdddf7; */
}


#souligneur-print{
    width: 150px;
    height: 10px;
    position: relative;
    top: -15px;
    left: -5px;
    background-color: var(--color-nprint);
}


#souligneur-green{
    width: 150px;
    height: 10px;
    position: relative;
    top: -15px;
    left: -5px;
    background-color: var(--color-ngreen);
    /* background-color: #bdddf7; */
}


/* 
----------------
box-services
----------------
*/

#box-services {
    width: 100%;
    padding: 50px 50px 100px 50px;
    text-align: center;
}

.box-services {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    text-align: center;
    gap: 10px;
    padding-bottom: 100px;
    margin: 0 auto;
}

.box {
    background-color: #fff;
    width: 23.5%;
    height: auto;
    text-align: center;
    border: 1px solid #fff;
    transition: var(--transition);
}

.box:hover {
    background-color: var(--color-hover);
    border: 1px solid var(--color-second);
    box-shadow: var(--box-shadow-3);
    cursor: pointer;
}

.box-green {
    background-color: #fff;
    width: 23.5%;
    height: auto;
    justify-content: space-between;
    text-align: center;
    border: 1px solid #fff;
    transition: var(--transition);
    padding: 60px;
}

.box-creative {
    background-color: #fff;
    width: 23.5%;
    height: auto;
    justify-content: space-between;
    text-align: center;
    border: 1px solid #fff;
    transition: var(--transition);
    padding: 60px;
}

.box-print {
    background-color: #fff;
    width: 23.5%;
    height: auto;
    justify-content: space-between;
    text-align: center;
    border: 1px solid #fff;
    transition: var(--transition);
    padding: 60px;
}

.box-digital {
    background-color: #fff;
    width: 23.5%;
    height: auto;
    justify-content: space-between;
    text-align: center;
    border: 1px solid #fff;
    transition: var(--transition);
    padding: 60px;
}

.box-print:hover {
    background-color: #FFC800;
    border: 1px solid #FFC800;
    box-shadow: var(--box-shadow-3);
    cursor: pointer;
}

.box-digital:hover {
    background-color: var(--color-second);
    border: 1px solid var(--color-second);
    box-shadow: var(--box-shadow-3);
    cursor: pointer;
}

.box-creative:hover {
    background-color: #FF6400;
    border: 1px solid #FF6400;
    box-shadow: var(--box-shadow-3);
    cursor: pointer;
}

.box-green:hover {
    background-color: #008D36;
    border: 1px solid #008D36;
    box-shadow: var(--box-shadow-3);
    cursor: pointer;
}

.box-green:hover h4 {
    color: #fff;
}

.box-green h4 {
    margin: 10px 0;
    font-size: 23px;
    font-weight: 700;
    color: #008D36;
    transition: var(--transition);
}

.box-digital h4 {
    margin: 10px 0;
    font-size: 23px;
    font-weight: 700;
    color: #0000FF;
    transition: var(--transition);
}

.box-creative h4 {
    margin: 10px 0;
    font-size: 23px;
    font-weight: 700;
    color: #FF6400;
    transition: var(--transition);
}

.box-print h4 {
    margin: 10px 0;
    font-size: 23px;
    font-weight: 700;
    color: #FFC800;
    transition: var(--transition);
}

.box-creative:hover h4 {
    color: rgb(255, 255, 255);
}

.box-print:hover h4 {
    color: rgb(255, 255, 255);
}

.box-digital:hover h4 {
    color: rgb(255, 255, 255);
}

.box:hover h4 {
    color: #fff;
}

h4 {
    margin: 10px 0;
    font-size: 25px;
    font-weight: 700;
    color: var(--color-second);
    transition: var(--transition);
}

.cont-box {
    padding: 20px;
}

.btn-plus {
    color: var(--color-second);
    background-color: var(--color-second);
    border: none;
    width: 200px;
    height: 50px;
    margin-top: 30px;
    transition: var(--transition);
}

.btn-plus:hover {
    /* background-color:var(--color-primary); */
    box-shadow: var(--box-shadow-5);
    cursor: pointer;
}

.button.btn-plus a {
    font-size: 18px;
    color: #fff;
    padding: 50px 30px;
    transition: var(--transition);
    font-family: Arial, Helvetica, sans-serif;
    font-style: narrow;
}

.cont-box svg {
    position: relative;
    top: 10px;
    width: 100%;
}


/* box svg */

.box-print .cls-1 {
    fill: #FFC800;
    transition: ease all .3s;
    padding-top: 30px;
}

.box-print:hover .cls-1 {
    fill: #ffffff;
}

.box-digital .cls-1 {
    fill: #0000FF;
    transition: ease all .3s;
}

.box-digital:hover .cls-1 {
    fill: #ffffff;
}

.box-green .cls-1 {
    fill: #008D36;
    transition: ease all .3s;
}

.box-green:hover .cls-1 {
    fill: #ffffff;
}

.box-creative .cls-1 {
    fill: #FF6400;
    transition: ease all .3s;
}

.box-creative:hover .cls-1,
.cls-2 {
    fill: #ffffff;
}


/* 
---------------
réalisation
---------------
*/

#work {
    width: 100%;
    padding: 300px 0 10px 0;
}

.work {
    width: 80%;
    justify-content: space-between;
    margin: 0 auto;
    padding: 30px 10px 0 0;
}

#realisation {
    display: flex;
    position: relative;
    bottom: -200px;
}

.info-realisation {
    position: relative;
    left: 50px;
    padding: 50px 0px;
    width: 60%;
}

.realisation-img {
    width: 60%;
    position: relative;
    bottom: 250px;
}

.img-realisation {
    margin-bottom: -250px;
    margin-top: -100px;
}

.realisation-img img {
    width: 100%;
}

.work-picture-ln {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 20px;
}

.work-picture {
    width: 65%;
    margin: 0 auto;
    padding: 250px 0;
    justify-content: center;
    text-align: center;
}


.work-picture-bg {
    margin-top: -58px;
    background-color: #f5f5f5;
    width: 100%;
    justify-content: center;
    text-align: center;
}

.work-picture-ln .img {
    transition: var(--transition);
    width: 31%;
}


.work-picture-ln .img img {
    transition: var(--transition);
    width: 100%;
}

.work-picture-ln img:hover {
    transform: scale(1.1);
    cursor: pointer;
}

.work-picture-ln .zoom {
    transition: var(--transition);
    overflow: hidden;
    width: 100%;
    height: 500px;
}

/* 
 ---------------------
btn-voir-plus
 ---------------------

*/

.btn-voir-plus {
    background-color: var(--color-second);
    border: none;
    width: 25%;
    height: auto;
    padding: 25px;
    position: relative;
    top: 40px;
    margin: 0 auto;
    transition: var(--transition);
}

.btn-voir-plus:hover {
    cursor: pointer;
    background-color: var(--color-primary);
    box-shadow: var(--box-shadow-4);
}

.btn-voir-plus:hover a {
    color: var(--color-second);
}

.btn-voir-plus a {
    font-family: Arial, Helvetica, sans-serif;
    font-style: narrow;
    transition: var(--transition);
    font-size: 25px;
    color: #FFF;
}

.btn-voir-plus img {
    width: 50px;
}


/* 
------------------
animation
------------------
*/

.bg-animation {
    background-color: var(--color-third);
    border: 7px solid #fff;
    width: 70%;
    margin: 0 auto;
    position: relative;
    top: -200px;
    z-index: 100;
}


.bg-animation1 {
    border: 7px solid #fff;
    width: 70%;
    margin: 0 auto;
    position: relative;
    top: -80px;
    z-index: 100;
}

.animation {
    display: flex;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    width: 80%;
    position: relative;
    top: 35px;
    text-align: center;
}

.titre-section-annimation{
    text-align: center;
    width: 50%;
    background-color: #000000;
    font-size: 35px;
    font-weight: 600;
    padding: 20px 0;
    color: rgb(255, 255, 255);
    position: relative;
    top: -30px;
    z-index: 100;
    margin: 0 auto
}

.titre-section-annimation1{
    text-align: center;
    width: 70%;
    background-color: #505050;
    font-size: 35px;
    font-weight: 700;
    padding: 20px ;
    color: rgb(255, 255, 255);
    margin: 0 auto;
    border-radius: 0 20px 0 20px 0;
    border: 1px solid #505050;
}

.hr{
    width: 60%;
    margin: 0 auto;
}
.block-an {
    width: 19%;
    height: auto;
}

#block-an{
    width: 25%;
    height: auto;
    text-align: center;
}

.titre-block-an{
    font-size: 30px;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 30px;
}

.block-an img {
    width: 50%;
}

.block-an h2 {
    font-size: 45px;
    position: relative;
    top: -20px;
    color: var(--color-second);
    font-weight: 600;
}

.block-an p {
    font-size: 25px;
    position: relative;
    top: -30px;
}

.team {
    margin: 0 auto;
    width: 80%;
    position: relative;
    padding-top: 200px;
    padding-bottom: 200px;
}

#team {
    margin-bottom: 0;
    width: 100%;
    height: auto;
    background-color: #dfdddd;
    position: relative;
    top: 0;
}

.team .img-titre-services {
    margin: 0 auto;
}

.img-titre-services {
    margin: 0 auto;
}

.team-personal {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 80%;
    position: relative;
    margin: 0 auto;
    padding-bottom: 60px;
    justify-content: space-between;
    top: 70px;
}

.block-team {
    height: 500px;
    transition: var(--transition);
    position: relative;
    width: 24%;
    margin: 60px 0;
    background-image: url(../images/akosse-1.png);
    background-size: 100%;
    background-repeat: no-repeat;
    transition: ease all .2s;
    align-items: center;
}

.block-team:hover {
    cursor: pointer;
    background-image: url(../images/akosse.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

#block-team-smt {
    height: 490px;
    transition: var(--transition);
    position: relative;
    width: 24%;
    margin: 60px 0;
    background-image: url(../images/smt-01.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    transition: ease all .2s;
    align-items: center;
}

#block-team-smt:hover {
    cursor: pointer;
    background-image: url(../images/smt-03.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}

#block-team-akosse {
    height: 490px;
    transition: var(--transition);
    position: relative;
    width: 24%;
    margin: 60px 0;
    background-image: url(../images/akosse-1.png);
    background-size: 100%;
    background-repeat: no-repeat;
    transition: ease all .2s;
    align-items: center;
}

#block-team-akosse:hover {
    cursor: pointer;
    background-image: url(../images/akosse-03.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}

#block-team-romaric {
    height: 490px;
    transition: var(--transition);
    position: relative;
    width: 24%;
    margin: 60px 0;
    background-image: url(../images/romaric-01.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    transition: ease all .2s;
    align-items: center;
}

#block-team-romaric:hover {
    cursor: pointer;
    background-image: url(../images/romaric-03.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}

#block-team-paul {
    height: 490px;
    transition: var(--transition);
    position: relative;
    width: 24%;
    margin: 60px 0;
    background-image: url(../images/paul-01.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    transition: ease all .2s;
    align-items: center;
}

#block-team-paul:hover {
    cursor: pointer;
    background-image: url(../images/paul-03.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}

.block-team:hover .btn-team {
    display: block;
}

.block-team:hover a {
    color: #0000FF;
}

.team-info {
    background-color: var(--color-forth);
    width: 100%;
    height: auto;
    position: relative;
    bottom: 80px;
}

.block-team-info {
    padding: 10px 20px;
}

.block-team-info b {
    text-transform: uppercase;
    color: var(--color-third);
}

.block-team-info h2 {
    font-size: 30px;
}

.block-team-info p {
    font-size: 20px;
}

.btn-team {
    background-color: var(--color-primary);
    width: 100%;
    position: absolute;
    text-align: center;
    bottom: 0;
    right: 0;
    top: 87, 5%;
    height: auto;
    display: none;
    padding: 25px;
}

.btn-team a {
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: narrow;
    color: var(--color-second);
    font-weight: 500;
}

.btn-view-team {
    background-color: var(--color-second);
    width: 25%;
    height: auto;
    margin: 0 auto;
    transition: var(--transition);
    text-align: center;
    padding: 15px;
    z-index: 10;
    position: relative;
    top: 70px;
}

.btn-view-team a {
    font-family: Arial, Helvetica, sans-serif;
    font-style: narrow;
    font-size: 21px;
    color: #fff;
    transition: var(--transition);
}

.btn-view-team:hover {
    cursor: pointer;
    background-color: var(--color-primary);
    box-shadow: var(--box-shadow-4);
}

.btn-view-team:hover a {
    color: var(--color-second);
}


/* 
-----------------
contact
-----------------

*/

.bg-contact {
    width: 100%;
    min-height: 100vh;
    background-image: url('../images/bg-contact.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.tittle-contact {
    text-align: center;
}

.tittle-contact .titre-contact {
    position: relative;
    font-size: 75px;
    font-weight: 600;
    z-index: 10;
    font-family: century gothic, Poppins, arial;
}

.souligneur-contact {
    background-color: var(--color-third);
    width: 150px;
    height: 38px;
    position: relative;
    top: -45px;
    margin: 0 auto;
}

.Nous-contactez {
    background-color: var(--color-second);
    width: 30%;
    padding: 20px;
    transition: var(--transition);
    margin: 0 auto;
    text-align: center;
}

.Nous-contactez a {
    font-family: Arial, Helvetica, sans-serif;
    font-style: narrow;
    font-size: 21px;
    transition: var(--transition);
    color: #ffffff;
}

.Nous-contactez:hover {
    cursor: pointer;
    background-color: var(--color-primary);
    box-shadow: var(--box-shadow-4);
}

.Nous-contactez:hover a {
    color: var(--color-second);
}


/* 
-------------------------
a propos
-------------------------
*/

.video-apropos {
    width: 64%;
    height: auto;
    padding: 50px;
    margin: 0 auto;
}

.organigramme-nyusu {
    width: 90%;
    margin: 0 auto;
    text-align: center;
}

.organigramme-nyusu img {
    width: auto;
}

.liste-services {
    font-size: 21px;
    font-weight: 600;
    padding-left: 80px;
}


/* 
-----------------------------
notre experience
-----------------------------
*/

#bloc-experience {
    height: auto;
}

#box-experience {
    width: 80%;
    margin: 0 auto;
}

.box-experience {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.box-exp {
    width: 24%;
    height: auto;
    background-color: #b5d2fc;
    transition: var(--transition);
    justify-content: center;
    text-align: center;
    padding: 50px;
}

.box-exp:hover {
    background-color: var(--color-second);
    cursor: pointer;
    box-shadow: var(--box-shadow-5);
}

.box-exp:hover .cont-box-exp svg {
    transform: scale(1.2);
}

.box-exp h5 {
    color: rgb(95, 95, 95);
}

.box-exp:hover h5 {
    color: #fff;
}


.cont-box-exp {
    padding: 10px;
    width: 100%;
}

.cont-box-exp svg {
    width: 35%;
}

.cont-box-exp-ngenie svg {
    width: 25%;
    padding: 50px 0;
}

.cont-box-exp-nyusu svg {
    padding: 20px 0;
    width: 60%;
}

.cont-box-exp-nyusu svg .cls-1 {
    fill: rgb(95, 95, 95);
    transition: var(--transition);
}

.cont-box-exp-ngenie svg .cls-1 {
    fill: rgb(95, 95, 95);
    transition: var(--transition);
}

.box-exp:hover .cont-box-exp-nyusu svg .cls-1 {
    fill: rgb(255, 255, 255);
}

.box-exp:hover .cont-box-exp-ngenie svg .cls-1 {
    fill: rgb(255, 255, 255);
}

.conmyBtn-box-exp .cls-1 {
    fill: rgb(95, 95, 95);
    transition: var(--transition);
}

.box-exp:hover .cont-box-exp .cls-1 {
    fill: rgb(255, 255, 255);
}

.cont-box-exp-ngenie h5 {
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
    padding-bottom: 20px;
}

.cont-box-exp-nyusu h5 {
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
    padding-bottom: 20px;
}

.cont-box-exp h5 {
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
    padding-bottom: 10px;
}

#team-page {
    padding: 100px 0 200px 0;
    background-color: #fddddd1a;
}

#team-page-tearm-info {
    padding: 50px 0;
}


/* 
---------------------------
partenaire
---------------------------
*/

.block-partenaire {
    width: 100%;
    margin-top: 150px;
}

.cont-block-partenaire {
    padding: 130px 0 150px 0;
    width: 80%;
    height: auto;
    margin: 0 auto;
}

.block-img-part02 {
    margin-top: 50px;
    margin-left: 50px;
}

.block-img-part01 img {
    width: 20%;
    padding: 0 30px;
}

.block-img-part02 img {
    width: 20%;
    padding: 0 30px;
}

.img-partenaire {
    width: 80%;
    margin: 0 auto;
}


/* 
----------------------------
TEAM PICTURE
----------------------------

*/

.picture-team {
    position: relative;
    width: 60%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    padding-top: 50px;
}

.picture-team-info {
    width: 60%;
    margin: 0 auto;
    display: flex;
    padding-top: 50px;
}

.pp-1 {
    height: 350px;
    transition: var(--transition);
    position: relative;
    width: 24.5%;
    background-image: url(../images/pp-1.png);
    background-size: 100%;
    background-repeat: no-repeat;
    transition: ease all .5s;
    align-items: center;
}

.pp-1:hover {
    cursor: pointer;
    background-image: url(../images/akosse.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

.pp-1 .team-info {
    background-color: var(--color-forth);
    width: 100%;
    height: 20%;
    position: relative;
    top: 0;
}

.pp-2 .team-info {
    background-color: var(--color-forth);
    width: 100%;
    height: 20%;
    position: relative;
    top: 0;
}

.pp-2 {
    height: 350px;
    transition: var(--transition);
    position: relative;
    width: 24.5%;
    background-image: url(../images/pp-1.png);
    background-size: 100%;
    background-repeat: no-repeat;
    transition: ease all .5s;
    align-items: center;
}

.pp-2:hover {
    cursor: pointer;
    background-image: url(../images/akosse.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

.pp-1 .team-info {
    display: none;
}

.pp-2 .team-info {
    display: none;
}

.pp-1 .team-info {
    display: none;
}

.pp-2:hover .team-info {
    display: block;
}

.pp-1:hover .team-info {
    display: block;
}

.pp-1,
.pp-2:hover {
    cursor: pointer;
}

.pp-2 .btn-team-info {
    display: none;
}

.pp-2:hover .btn-team-info {
    display: block;
}

.pp-1 .btn-team-info {
    display: none;
}

.pp-1:hover .btn-team-info {
    display: block;
}

.btn-team-info {
    background-color: var(--color-primary);
    width: 100%;
    height: auto;
    border: none;
    position: absolute;
    transition: var(--transition);
    bottom: 0;
    padding: 10px;
    right: 0;
    z-index: 100;
}

.btn-team-info:hover a {
    color: var(--color-second);
}

.btn-team-info a {
    color: var(--color-second);
    font-size: 18px;
    padding: 10px;
}

.pp-1 .team-info {
    position: absolute;
}

.pp-2 .team-info {
    position: absolute;
}


/* 
-------------------------------
ngenie
-------------------------------

*/

.box-ngenie {
    width: 60%;
    padding-top: 100px;
    margin: 0 auto;
}

#ngenie {
    margin-bottom: 100px;
    margin-top: 50px;
}

.ngenie {
    width: 100%;
    height: auto;
}

.box-serv-01,
.box-serv-02 {
    display: flex;
    padding: 5px;
}

.box-serv {
    width: 250px;
    height: auto;
    background-color: var(--color-forth);
    transition: var(--transition);
    justify-content: center;
    text-align: center;
    border-radius: 10px;
    padding: 30px 0;
    border: 1px solid #fff;
    margin: 10px;
}

.box-serv:hover {
    background-color: var(--color-second);
    cursor: pointer;
    box-shadow: var(--box-shadow-5);
    border: px solid var(--color-third);
}

.bloc-tittre-ngenie {
    display: flex;
    width: 70%;
    justify-content: space-between;
    margin: 0 auto;
}


/* 
----------------------------
nGenie
----------------------------
*/

.info-page-service {
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: 0 auto;
    padding-top: 120px;
    padding-bottom: 100px;
}

.info-page-services {
    width: 100%;
    justify-content: center;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.info-page-service-text {
    width: 80%;
}

.info-page-imga {
    width: 100%;
    padding-top: 30px;
}

.info-page-imga img {
    width: 100%;
}

.banner-services {
    margin: 0 auto;
    position: absolute;
    bottom: -70px;
}

.banner-services img {
    width: 100%;
    margin: 0 auto;
}

#box-experience-services {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.box-experience-service {
    width: 50%;
    margin: 0 auto;
    justify-content: center;
}

.bg-nyusu-services {
    width: 100%;
    padding: 30px 0 100px 0;
    background-color: #e8eefe;
}

.block-info-nyusu {
    width: 100%;
    padding: 20px 0 0 0;
}

.tittle-service-pack {
    margin: 0 auto;
    width: 80%;
}

.pack-offres {
    width: 100%;
    margin: 0 auto;
    padding: 100px 0 0 0;
}

.list-pack {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 auto;
    width: 75%;
}

.pack {
    background-color: #ffffff;
    height: auto;
    width: 23%;
    margin: 0 auto;
    box-shadow: 0 0 8px #b6b6b6;
    position: relative;
    padding-bottom: 50px;
}

.souligner-tittle-pack {
    background-color: var(--color-third);
    width: 80%;
    height: 2px;
    margin: 0 auto;
    margin-bottom: 30px;
}

.titte-pack h1 {
    text-align: center;
    padding: 20px 0;
    font-size: 21px;
}

.content-pack {
    padding: 0 30px;
    font-size: 15px;
}

.price-pack {
    font-size: 25px;
    padding: 50px 30px;
    font-weight: 600;
    text-align: center;
    font-family: Arial, Poppins, sans-serif;
}

.btn-view-pack {
    background-color: var(--color-second);
    border: none;
    text-align: center;
    width: 100%;
    height: 50px;
    transition: var(--transition);
    position: absolute;
    cursor: pointer;
    left: 0;
    bottom: 0;
}

.btn-view-pack a {
    padding: 50px;
    font-size: 18px;
    color: #ffffff;
}

.btn-view-pack:hover {
    background-color: var(--color-third);
}

.btn-view-pack:hover a {
    color: var(--color-second);
}

#ilust{
    width: 100%;
    height: 100vh;
    background-image: url(../images/bg-paralax.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.animation-ngenie {
    background-color: var(--color-third);
    width: 75%;
    height: auto;
    margin: 0 auto;
    position: relative;
    z-index: 100;
    top: -50px;
    padding: 10px 0 60px 0;
    /* transform: translateX(-50%, 50%);
    left: 12%; */
}

.tittle-an-ngenie {
    text-align: center;
    padding-top: 120px;
}

.par-ngenie {
    text-align: center;
    padding-top: 10px;
}

.btn-nous-contactez-ngenie {
    background-color: var(--color-second);
    width: 20%;
    padding: 25px;
    margin: 0 auto;
    transition: var(--transition);
    cursor: pointer;
    text-align: center;
}

.btn-nous-contactez-ngenie a {
    font-family: Arial, Helvetica, sans-serif;
    font-style: narrow;
    font-size: 21px;
    color: #ffffff;
}

.btn-nous-contactez-ngenie:hover {
    background-color: #0a0a6d;
    box-shadow: 0 0 5px rgb(139, 139, 139);
}

.btn-nous-contactez-ngenie:hover a {
    color: #fff;
}


/* 
-------------------------
temoignage
-------------------------
*/

.temoignage {
    width: 100%;
    padding: 100px 0 200px 0;
}

.temoignage-01 {
    background-color: #F3EFCE;
    border: 2px solid #FFCC00;
    border-radius: 10px;
    margin: 0 auto;
    width: 50%;
    height: 280px;
    display: flex;
    justify-content: space-between;
}

.image-temoignage {
    width: 30%;
    position: relative;
    top: -100px;
    left: 50px;
}

.block-temoignage {
    position: relative;
    margin-top: -100px;
}

.block-text-temoignage {
    width: 60%;
    position: relative;
}

.image-temoignage img {
    width: 100%;
    margin: 0 auto;
}

.text-temoignage {
    padding: 50px 0 30px 0;
}

.nom-temoin {
    font-size: 21px;
    font-weight: 600;
    text-align: center;
}

.date-temoignage {
    font-size: 16px;
    font-weight: 600;
    padding-top: 10px;
}

.box-carr {
    margin: 0 auto;
    width: 20%;
    padding-top: 50px;
    position: absolute;
    right: 50%;
    left: 50%;
}

.box-carr ul {
    display: flex;
    text-align: center;
}

.box-carr ul li {
    background-color: #ffffff;
    width: 15px;
    height: 15px;
    border-radius: 200px;
    margin: 1px;
    border: 1px solid #0000FF;
}

.box-carr ul li.active {
    background-color: var(--color-third);
}


/* 
-----------------------------
partenaire
-----------------------------
*/

#block-partenaire {
    width: 100%;
    background-color: rgb(235, 235, 235);
}

.list-partenaire {
    width: 80%;
    margin: 0 auto;
    position: relative;
}

#block-liste-partenaire {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.block-partenaire {
    width: 80%;
    margin: 0 auto;
}

.liste-partenaire {
    width: 60%;
    height: auto;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 auto;
}


.logo-part-01 {
    transition: var(--transition);
    overflow: hidden;
    width: 18%;
    height: auto;
}

.logo-part-01 img {
    transition: var(--transition);
    width: 100%;
}

.logo-part-01 img:hover {
    transform: scale(1.1);
    cursor: pointer;
}


/* 
--------------------------
Parlons
--------------------------
*/

#block-nous-contacter {
    width: 100%;
    min-height: 100vh;
    padding-top: 450px;
    background-image: url('../images/bg-contact.png');
    background-repeat: no-repeat;
    background-size: cover;
    /* margin-top: -300px; */
}

#block-nous-contacter-autre {
    width: 100%;
    min-height: 80vh;
    padding-top: 280px;
    background-image: url('../images/bg-contact.png');
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 0px;
}

.block-nous-contacter {
    width: 80%;
    margin: 0 auto;
}

/* 

.btn-nous-contactez {
    margin: 0 auto;
    width: 20%;
    height: auto;
    text-align: center;
    background-color: var(--color-second);
    padding: 15px;
    position: relative;
    top: 30px;
}

.btn-nous-contactez a {
    font-family: Arial, Helvetica, sans-serif;
    font-style: narrow;
    font-size: 21px;
    transition: var(--transition);
    color: #ffffff;
}

.btn-nous-contactez:hover {
    cursor: pointer;
    background-color: var(--color-primary);
    box-shadow: var(--box-shadow-4);
}

.btn-nous-contactez:hover a {
    color: var(--color-second);
}

*/

/* 
-----------------------------------
nprint
----------------------------------
*/

.bg-nprint {
    width: 100%;
    min-height: 100vh;
    background-image: url(../images/bg-nprint01.png);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

#nprint {
    margin-top: 100px;
}

#nprint-equipement {
    margin-top: 200px;
    width: 100%;
}

.nprint-info {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
}

.nprint-info-text {
    width: 80%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.nprint-info-text-para {
    position: relative;
    width: 80%;
    z-index: 200;
    left: -50px;
}

.nprint-info-text-para .ul{
    margin-left: 35px;
}

.nprint-info-text-para .ul li{
    list-style-image: url(../logo/symbole-digital-01.jpg);
}

.nprint-info-image {
    position:relative;
    width: 15%;
    opacity: .8;
}

#nprint-info-image{
    position:relative;
    width: 15%;
    opacity: .8;
    left: -250px;

}

#nprint-info-image img {
    width: 500px;
}

.nprint-info-image img {
    width: 100%;
}

.nprint-info-image-1 {
    position: relative;
    width: 20%;
    bottom: 0;
    top: 0;
    z-index: 1;
    opacity: .8;
}

.nprint-info-image-1 img {
    width: 300px;
}

#pres-nprint {
    width: 100%;
    position: relative;
    z-index: 100;
}

.pres-nprint {
    width: 60%;
    margin: 0 auto;
}


.print-numerique {
    width: 100%;
}

.print-numerique svg {
    width: 100%;
    margin-top: 120px;
}

.print-numerique p {
    padding: 0 50px 10px 50px;
    font-size: 18px;
    text-align: center;
    font-weight: 500;
    position: relative;
    top: 10px;
    color: #5B5B5B;
}



.pres-nprint-num {
    flex-wrap: wrap;
    gap: 10px;
    display: flex;
    justify-content: space-between;
    text-align: center;
    width: 100%;
}

.cont-print-offset {
    padding: 10px;
}

.print-offset {
    width: 32.8%;
    height: auto;
    background-color: #FFF5B4;
    cursor: pointer;
    transition: var(--transition);
    padding: 20px 0;
}

#print-offset-nprint{
    width: 32.8%;
    height: auto;
    background-color:var(--color-nprint);
    cursor: pointer;
    transition: var(--transition);
    padding: 20px 0;
}

.print-offset:hover {
    background-color: var(--color-seventh);
    box-shadow: 0 0 5px #4b4b4b;
}

.print-offset:hover .cls-1 {
    fill: #fff;
}

.print-offset:hover p {
    color: #fff;
}

#print-offset-nprint:hover {
    /* background-color: var(--color-seventh); */
    background-color: #fdf09b;
    box-shadow: 0 0 5px #4b4b4b;
}

#print-offset-nprint:hover .cls-1 {
    fill: #5B5B5B;
}

#print-offset-nprint:hover p {
    color: #5B5B5B;
}

.print-offset svg {
    width: 100%;
    padding-top: 30px;
    padding-bottom: 10px;
}

.print-offset p {
    font-size: 16px;
    padding-bottom: 10px;
    color: #5B5B5B;
    font-weight: 500;
}


/* 
 ---------------------------
 Equipement
 --------------------------
*/

.nprint-equipement {
    width: 100%;
    text-align: center;
    justify-content: center;
}

.nprint-equipement img {
    width: 80%;
    padding: 100px;
    margin: 0 auto
}


/* 
-----------------------
citation nprint
-----------------------
*/

.nprint-citation {
    background-color: #F6ECA9;
    width: 100%;
    height: auto;
    text-align: center;
}

.cont-nprint-citation {
    padding: 100px 50px;
}

.cont-nprint-citation h2 {
    font-size: 30px;
    padding-bottom: 30px;
}

.cont-nprint-citation .btn-decouvrer-lagence{
    width: 20%;
}

.btn-nous-contactez-print a {
    font-family: Arial, Helvetica, sans-serif;
    font-style: narrow;
    font-size: 21px;
    transition: var(--transition);
    color: #ffffff;
    position: relative;
    top: 10px;
}

.btn-nous-contactez-print:hover {
    background-color: var(--color-third);
}

.btn-nous-contactez-print:hover a {
    color: var(--color-second);
}


/* 
----------------------------
ncreative
----------------------------
*/

.bg-ncreative {
    width: 100%;
    min-height: 100vh;
    background-image: url(../images/bg-ncreative-01.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.ncreative-info-image {
    position:relative;
    text-align: right;
    bottom: 0;
    top: 0;
    left: 100px;
    width: 20%;
    opacity: .3;
}

.ncreative-info-image img {
    width: 500px;
}

#ncreative {
    margin-top: 100px;
    width: 100%;
}

.pres-ncreative {
    width: 100%;
}

.pres-ncreative-num {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    /*justify-content: space-between;*/
    width: 100%;
    gap: 10px;
}

.ncreative-offset {
    width: 32.5%;
    height: auto;
    background-color: #FFF5B4;
    cursor: pointer;
    transition: var(--transition);
    padding: 20px 0;
}


#ncreative-offset-creative{
    background-color: var(--color-ncreative);
    transition: var(--transition);
}



#ncreative-offset-creative:hover {
    background-color: #ff66009c;
    box-shadow: 0 0 5px #4b4b4b;
}

#ncreative-offset-creative .cls-1 {
    fill: #fff;
}

#ncreative-offset-creative p {
    color: #fff;
}



#ncreative-offset-digital{
    background-color: #0000FF;
    transition: var(--transition);
}

#ncreative-offset-digital .cls-1 {
    fill: #fff;
}

#ncreative-offset-digital p {
    color: #fff;
}

#ncreative-offset-digital:hover {
    background-color: var(--color-seventh);
    box-shadow: 0 0 5px #4b4b4b;
}

#ncreative-offset-digital:hover .cls-1 {
    fill: #fff;
}

#ncreative-offset-digital:hover p {
    color: #fff;
}

.ncreative-offset svg {
    width: 100%;
    padding-top: 30px;
    padding-bottom: 10px;
}

.ncreative-offset p {
    font-size: 16px;
    padding-bottom: 10px;
    color: #5B5B5B;
    font-weight: 500;
}

.ncreative-offset-ngreen {
    width: 32.5%;
    height: auto;
    /* background-color: #FFF5B4; */
    /* background-color: #008d36; */
    background-color: #008D36;
    cursor: pointer;
    transition: var(--transition);
}

.ncreative-offset-ngreen svg {
    width: 100%;
    padding-top: 30px;
    padding-bottom: 10px;
}

.ncreative-offset-ngreen p {
    font-size: 16px;
    padding-bottom: 10px;
    /* color: #5B5B5B; */
    /* color: #c4c4c4; */
    color: #ffffff;
    font-weight: 500;
}

.bloc-nprint-info-text {
    width: 80%;
    padding: 20px;
}

.ncreative-offset-ngreen:hover {
    
    background-color: #7fac7f;
    box-shadow: 0 0 5px #4b4b4b;
}

.ncreative-offset-ngreen .cls-1 {
    /* fill: #4b4b4b; */
   /* fill: #c4c4c4; */
   fill: #ffffff;
}

.ncreative-offset-ngreen:hover .cls-1 {
    fill: #fff;
}

.ncreative-offset-ngreen:hover p {
    color: #fff;
}

.ncreative-offset-serigraphie {
    width: 32%;
    height: auto;
    background-color: #FFF5B4;
    cursor: pointer;
    transition: var(--transition);
}

.ncreative-offset-serigraphie p {
    position: relative;
    top: 25px;
    color: #5B5B5B;
    font-weight: 500;
    transition: var(--transition);
}

.ncreative-offset-atelier {
    width: 32%;
    height: auto;
    background-color: #FFF5B4;
    cursor: pointer;
    transition: var(--transition);
}

.ncreative-offset-atelier svg {
    padding: 8px;
    transition: var(--transition);
}

.ncreative-offset-atelier p {
    position: relative;
    top: 10px;
    color: #5B5B5B;
    font-weight: 500;
    transition: var(--transition);
}

.ncreative-offset-broderie {
    width: 32%;
    height: auto;
    background-color: #FFF5B4;
    cursor: pointer;
    transition: var(--transition);
}

.ncreative-offset-broderie p {
    position: relative;
    top: -10px;
    color: #5B5B5B;
    font-weight: 500;
}


/* hover box offset */


/* serigraphie */

.ncreative-offset-serigraphie:hover {
    background-color: var(--color-seventh);
    box-shadow: 0 0 5px #4b4b4b;
}

.ncreative-offset-serigraphie:hover .cls-1 {
    fill: #fff;
}

.ncreative-offset-serigraphie:hover p {
    color: #fff;
}


/* offset */

.ncreative-offset:hover {
    background-color: var(--color-seventh);
    box-shadow: 0 0 5px #4b4b4b;
}

.ncreative-offset:hover .cls-1 {
    fill: #fff;
}

.ncreative-offset:hover p {
    color: #fff;
}


/* atelier de finition */

.ncreative-offset-atelier:hover {
    background-color: var(--color-seventh);
    box-shadow: 0 0 5px #4b4b4b;
}

.ncreative-offset-atelier:hover .cls-1 {
    fill: #fff;
}

.ncreative-offset-atelier:hover p {
    color: #fff;
}


/* broderie */

.ncreative-offset-broderie:hover {
    background-color: var(--color-seventh);
    box-shadow: 0 0 5px #4b4b4b;
}

.ncreative-offset-broderie:hover .cls-1 {
    fill: #fff;
}

.ncreative-offset-broderie:hover p {
    color: #fff;
}

.ncreative-equipement {
    width: 100%;
    text-align: center;
}

.ncreative-realisation {
    display: flex;
    width: 50%;
    margin: 0 auto;
    justify-content: space-between;
    padding-bottom: 300px;
}

.ncreative-realisation img {
    width: 70%;
}


/* 
===========================
nDigital
===========================
*/

.bg-nDigital {
    width: 100%;
    min-height: 100vh;
    background-image: url(../images/bg-ndigital.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.ndigital-prestation {
    width: 100%;
    margin-bottom: -10px;
}

.ndigital-prestation img {
    width: 100%;
}


/* 
===========================
nGreen
===========================
*/

.bg-ngreen {
    width: 100%;
    min-height: 100vh;
    background-image: url(../images/Pesticides_agricoles.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}


/* 
===========================
nDev
===========================
*/

.bg-nDev {
    width: 100%;
    min-height: 100vh;
    background-image: url(../images/website-scaled.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}


/* 
============================
ngreen
============================
*/

.block-ngreen {
    margin: 100px 0;
}


/* 
==========================
Contact
==========================
*/

.header {
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

.header img {
    width: 100%;
    height: auto;
}

.content-contact {
    padding: 200px 0 100px 0;
    position: relative;
    width: 90%;
    margin: 0 auto;
}

.block-contact {
    width: 80%;
    margin: 0 auto;
    justify-content: center;
    padding-top: 50px;
}

.info-page {
    width: 80%;
    margin: 0 auto;
    padding-bottom: 100px;
}

.info-page video {
    width: 70%;
    margin: 0 auto;
    text-align: center;
}

.info-page-contact {
    width: 80%;
    margin: 0 auto;
    padding-bottom: 50px;
}

.info-page-nprint {
    width: 80%;
    margin: 0 auto;
    padding-bottom: 100px;
}

.info-titre-page {
    margin-top: -15px;
    font-size: 21px;
    padding-left: 15px;
    font-family: Arial, Helvetica, sans-serif;
}


/* 
=============================
noffres
=============================
*/

.cont-header-noffre {
    background-color: #00e0fe10;
    width: 100%;
    padding-top: 18%;
    width: 100%;
    min-height: 100vh;
    background-image: url(../images/bg-construction.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.tittre-noffre {
    width: 60%;
    font-size: 60px;
    text-align: center;
    line-height: 1.2;
    margin: 0 auto;
    font-weight: 800;
    color: var(--color-fifth);
}

.para-noffre {
    width: 40%;
    font-size: 25px;
    text-align: center;
    margin: 0 auto;
    font-weight: 500;
    padding-top: 20px;
    color: var(--color-fifth);
}

.titre-bloc-kit {
    padding-top: 150px;
    font-size: 45px;
    font-weight: 700;
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

.list-kits {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: space-between;
    width: 70%;
    margin: 0 auto;
    padding: 200px 0 20px 0;
}

.box-kit {
    width: 24%;
    height: 580px;
    padding: 60px;
    background-color: #fff;
    border: solid 1px #a5a5a5;
    box-shadow: 0 0 10px #00000038;
    cursor: pointer;
    position: relative;
    transition: ease all .3s;
}

.box-kit:hover {
    transform: scale(1.1);
    background-color: #d0e9ff;
}

#kit-digital {
    width: 24%;
    height: 780px;
    padding: 60px;
    border: solid 1px #a5a5a5;
    box-shadow: 0 0 10px #00000038;
    cursor: pointer;
    position: relative;
    top: -100px;
    transition: ease all .3s;
    background-color: #c5c5c5;
}

#kit-digital:hover {
    transform: scale(1.1);
    background-color: #d0e9ff;
}

.cont-box-kit h3 {
    text-align: center;
    padding-bottom: 10px;
    font-size: 35px;
}

.souligneur-titre-box-kit {
    width: 80%;
    height: 2px;
    margin: 10px auto;
    background-color: #cc530d;
}

.price-kit {
    font-size: 35px;
    font-weight: 700;
    color: #000000;
    text-align: center;
    padding: 20px 0;
}

.btn-box-kit {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-second);
    padding: 10px;
    text-align: center;
    color: #FFF;
    transition: ease all .3s;
}

.btn-box-kit:hover {
    background-color: var(--color-primary);
}

.btn-box-kit:hover a {
    color: var(--color-second);
    font-weight: 600;
}

.btn-box-kit a {
    color: #FFF;
    font-size: 18px;
}

.cont-cit-kit h3 {
    font-size: 55px;
}

#cit-kit {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 200px 0;
    background-color: #ecf7ff;
}

.par-cit-kit {
    width: 50%;
    margin: 3% auto;
    padding: 10px;
}

.btn-cit-kit {
    width: 18%;
    height: auto;
    margin: 0 auto;
    text-align: center;
    background-color: var(--color-second);
    padding: 22px 30px;
    cursor: pointer;
    transition: ease all .3s;
}

.btn-cit-kit:hover {
    background-color: var(--color-primary);
    box-shadow: var(--box-shadow);
}

.btn-cit-kit:hover a {
    color: var(--color-second);
    font-weight: 600;
}

.btn-cit-kit a {
    color: rgb(255, 255, 255);
    font-size: 20px;
}

.cont-header-kit-print {
    width: 100%;
    height: 100vh;
    text-align: center;
    padding-top: 330px;
    background-color: #e8eeb198;
}

.cont-header-kit-digital {
    width: 100%;
    height: 100vh;
    text-align: center;
    padding-top: 280px;
    background-color: #e0f4f7;
}

.cont-header-kit-event {
    width: 100%;
    height: 100vh;
    text-align: center;
    padding-top: 330px;
    background-color: #eeeff5;
}

.cont-header-kit-smedia {
    width: 100%;
    height: 100vh;
    text-align: center;
    padding-top: 310px;
    background-color: #ebf5ff;
}


/* KIT PRINT */

#block-kit-print {
    padding: 100px 0 150px 0;
}

#block-kit-digital {
    padding: 100px 0 150px 0;
}

#block-kit-event {
    padding: 100px 0 150px 0;
}

#block-kit-s-media {
    padding: 100px 0 150px 0;
}

.detail-kit {
    width: 80%;
    margin: 0 auto;
}

.list-detail-kit {
    list-style: circle;
}

.cont-detail-kit {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    padding-top: 100px;
}

.list-detail-kit {
    width: 60%;
}

.img-detail-kit {
    width: 39%;
    border: solid 1px #000000;
    margin-top: 30px;
}

#block-kit-event .img-detail-kit {
    width: 39%;
    border: solid 1px #000000;
    height: 930px;
}

#block-kit-digital .img-detail-kit {
    width: 39%;
    border: solid 1px #000000;
    height: 750px;
}

#block-kit-s-media .img-detail-kit {
    width: 39%;
    border: solid 1px #000000;
    height: 780px;
}

#block-kit-print .img-detail-kit {
    width: 39%;
    border: solid 1px #000000;
    height: 700px;
}

.img-detail-kit img {
    padding: 50px;
    width: 100%;
    margin-top: 60px;
}

#img-detail-kit-print {
    padding-top: 30px;
}

#img-detail-kit-smedia img {
    padding: 0px;
    width: 80%;
    margin-top: 50px;
    position: relative;
    left: 70px;
}

.detail-kit h3 {
    width: 100%;
    margin: 10px auto;
    text-align: center;
    font-size: 35px;
}

.bande-separateur {
    width: 40%;
    height: 5px;
    background-color: var(--color-primary);
    margin: 0 auto;
    position: relative;
    z-index: 100;
}

.bande-separateur-2 {
    width: 20%;
    height: 10px;
    background-color: var(--color-primary);
    margin: 0 auto;
    position: relative;
    z-index: 200;
}

#bande-separateur-digital {
    background-color: var(--color-second);
}

#bande-separateur-digital-2 {
    background-color: var(--color-second);
}

#bande-separateur-event {
    background-color: #c1c4f1;
}

#bande-separateur-event-2 {
    background-color: #c1c4f1;
}

#bande-separateur-smedia {
    background-color: #66cfe3;
}

#bande-separateur-smedia-2 {
    background-color: #66cfe3;
}

.list-detail-kit h3 {
    padding-bottom: 20px;
    position: relative;
    left: -350px;
}

#list-detail-kit-print h3 {
    position: relative;
    left: -320px;
}

#list-detail-kit-smedia h3 {
    position: relative;
    left: -300px;
}

#list-detail-kit-event h3 {
    position: relative;
    left: -350px;
}

.list-detail-kit h4 {
    padding: 20px 0;
    position: relative;
    left: -60px;
    color: #000;
}

.list-detail-kit li {
    list-style: square;
    padding-left: 10px;
    line-height: 2;
    font-size: 14px;
}

.price-kit {
    font-size: 30px;
    color: #000000;
    font-weight: 700;
    text-align: center;
    padding-top: 30px;
}

.btn-kit {
    background-color: var(--color-primary);
    width: 80%;
    margin: 10px auto;
    padding: 15px;
    text-align: center;
    color: rgb(255, 255, 255);
    cursor: pointer;
    transition: ease all .3s;
}

.btn-kit-event {
    background-color: #c1c4f1;
    width: 80%;
    margin: 10px auto;
    padding: 15px;
    text-align: center;
    color: rgb(255, 255, 255);
    cursor: pointer;
    transition: ease all .3s;
}

.btn-kit-smedia {
    background-color: #66cfe3;
    width: 80%;
    margin: 10px auto;
    padding: 15px;
    text-align: center;
    color: rgb(255, 255, 255);
    cursor: pointer;
    transition: ease all .3s;
}

.btn-kit-smedia:hover {
    box-shadow: 0 0 10px #66cfe3;
}

.btn-kit-event:hover {
    box-shadow: 0 0 10px #c1c4f1;
}

.btn-kit-event a {
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-weight: 600;
}

.btn-kit-smedia a {
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-weight: 600;
}

.btn-kit:hover {
    background-color: var(--color-primary);
    box-shadow: var(--box-shadow);
}

.btn-kit a {
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-weight: 600;
}

#autre-kit {
    background-color: #effeff;
    height: auto;
    width: 100%;
}

.btn-kit-digital {
    background-color: var(--color-second);
    width: 80%;
    margin: 15px auto;
    padding: 15px;
    text-align: center;
    color: rgb(255, 255, 255);
    cursor: pointer;
    transition: ease all .3s;
}

#price-kit-digital {
    font-size: 30px;
    color: #000000;
    font-weight: 700;
    text-align: center;
    padding-top: 0;
}

.btn-kit-digital:hover {
    color: #fff;
    box-shadow: var(--box-shadow-5);
}

.btn-kit-digital:hover a {
    color: #fff;
    font-weight: 600;
}

.btn-kit-digital a {
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-weight: 600;
}


/* 
=========================
Portfolio
=========================
*/

#portfolio {
    width: 100%;
    height: 60vh;
}

.cont-header-portfolio {
    width: 100%;
    height: 60vh;
    background-image: url(../images/bg-portfolio.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

#cont-portfolio {
    position: relative;
    bottom: -100px;
}

.block-cont-header-port {
    width: 85%;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 auto;
    justify-content: space-between;
    padding-top: 350px;
}

.tittle-header-port {
    width: 40%;
}

.tittle-header-port h3 {
    font-size: 70px;
    line-height: 1.3;
    font-weight: 800;
    color: rgb(37, 37, 37);
    font-family: Arial NARROW, Helvetica, sans-serif;
}

.par-header-port {
    width: 80%;
    padding: 30px;
    font-size: 18px;
    font-weight: 500;
}

.btn-header {
    background-color: var(--color-second);
    width: 20%;
    padding: 20px;
    position: relative;
    left: 180px;
    top: -30px;
    cursor: pointer;
    text-align: center;
    transition: ease all .3s;
}

.btn-header:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.432);
}

.btn-header a {
    color: rgb(255, 255, 255);
}

#cont-portfolio {
    width: 80%;
    margin: 0 auto;
    padding: 100px;
    position: relative;
}

.list-des-images-par-cartegorie {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 75%;
    height: auto;
}

.realisation-par-service {
    position: sticky;
    width: 23%;
    top: 70px;
    left: 90%;
}

#logo .list-des-images-par-cartegorie {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: 76%;
}

#logo .logo-realisation {
    width: 30%;
}

.realisation-par-service li {
    padding: 10px;
    font-size: 25px;
    font-weight: 500;
    transition: ease all .3s;
    list-style: square;
}

.realisation-par-service li:hover {
    background-color: #d3d6fa;
}

.realisation-par-service li.active {
    background-color: #d3d6fa;
}

.logo-realisation {
    cursor: pointer;
    transition: all ease .3s;
    width: 45%;
    position: relative;
    top: -250px;
}

.logo-realisation img {
    width: 100%;
}

.logo-realisation:hover {
    background-color: #d3d6fa;
    padding-left: 25px;
    padding-bottom: 15px;
}

.logo-realisation:hover img {
    box-shadow: -10px 10px 10px #0000006c;
}

#comment-portfolio {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: space-between;
    width: 70%;
    margin: 0 auto;
    padding-bottom: 200px;
}

.comment-portfolio {
    width: 65%;
    position: relative;
    top: 150px;
}

.comment-portfolio p {
    font-size: 30px;
    font-weight: 500;
}

.img-comment-portfolio {
    width: 30%;
}

.img-comment-portfolio img {
    width: 100%;
}

.btn-comment-portfolio {
    background-color: var(--color-primary);
    width: 35%;
    padding: 15px;
    text-align: center;
    margin-top: 20px;
    cursor: pointer;
    transition: ease all .3s;
}

.btn-comment-portfolio:hover {
    box-shadow: 0 0 5px #38383840;
    background-color: var(--color-second);
}

.btn-comment-portfolio:hover a {
    color: rgb(255, 255, 255);
}

.btn-comment-portfolio a {
    color: rgb(0, 0, 0);
    font-size: 18px;
    font-weight: 600;
}

#webdesign,
#creation-graphique,
#logo {
    padding-bottom: 20px;
}


/* 
======================
Location
======================
*/

#bg-location {
    width: 100%;
    min-height: 100vh;
    background-image: url(../images/bg-location-02.jpg);
    background-attachment: fixed;
    background-size: cover;
    position: relative;
}


/*
=======================
produit 01
=======================
*/

#produit-01 {
    background-color: #f0fefe;
}

.produit-01 {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 auto;
    justify-content: space-between;
    padding: 200px 0;
}

.image-prod01 {
    width: 55%;
    height: 800px;
    background-image: url(../images/location-prod02.jpg);
    background-size: 100%;
    cursor: pointer;
    transition: all ease .3s;
}

.image-prod01:hover {
    width: 55%;
    height: 800px;
    background-image: url(../images/location-prod05.jpg);
    background-size: 100%;
}

.par-prod01 {
    width: 43%;
    padding: 30px 50px;
}

.par-prod01 h5 {
    padding: 0 0 20px 0;
    font-size: 25px;
}

.par-prod01 p {
    font-size: 15px;
}

.titre-pro01 {
    width: 60%;
    padding: 50px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 30px;
}

.titre-pro01 h1 {
    font-size: 45px;
    margin-bottom: 20px;
}

.bloc-prix-location {
    display: flex;
    width: 90%;
    justify-content: space-between;
    padding: 30px 0;
}

.prix-location {
    font-size: 65px;
    font-weight: 700;
}

.njour-location {
    position: relative;
    top: 30px;
}

.njour-location span {
    background-color: #ff9900;
    padding: 20px 25px;
}

.btn-location-prod01 {
    width: 60%;
    padding: 20px 25px;
    background-color: var(--color-second);
    text-align: center;
    cursor: pointer;
    transition: ease all .3s;
    font-size: 18px;
    color: rgb(255, 255, 255);
    cursor: pointer;
}

.btn-location-prod01:hover {
    background-color: var(--color-primary);
    box-shadow: 0 0 20px rgba(41, 40, 40, 0.146);
    color: var(--color-second);
    font-weight: 600;
}


/*
=======================
produit 02
=======================
*/

#produit-02 {
    background-color: #feece5;
    width: 100%;
    padding: 150px 0;
}

.produit-02 {
    width: 70%;
    margin: 0 auto;
    text-align: center;
}

.image-prod02 {
    width: 55%;
    height: 650px;
    margin: 0 auto;
    background-image: url(../images/location-prod12.jpg);
    background-size: 100%;
    cursor: pointer;
    transition: all ease .3s;
}

.image-prod02:hover {
    width: 55%;
    height: 650px;
    background-image: url(../images/location-prod11.jpg);
    background-size: 100%;
}

.bloc-prix-location-prod02 {
    width: 35%;
    display: flex;
    padding: 30px 0;
    justify-content: space-between;
    margin: 0 auto;
}

.bloc-prix-location-prod02 .prix-location {
    font-size: 65px;
    font-weight: 700;
}

.bloc-prix-location-prod02 .njour-location {
    position: relative;
    top: 30px;
}

.bloc-prix-location-prod02 .njour-location span {
    background-color: #eeff00;
    padding: 20px 25px;
}

.titre-prod02 {
    width: 60%;
    padding: 50px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 30px;
}

.titre-prod02 h1 {
    font-size: 45px;
    margin-bottom: 20px;
}

.titre-prod02 b {
    font-size: 20px;
    margin-bottom: 10px;
}

.par-prod02 {
    width: 60%;
    margin: 0 auto;
    text-align: center;
}

.par-prod02 b {
    font-size: 25px;
}

.para-prod02 {
    width: 75%;
    margin: 0 auto;
    position: relative;
    top: -40px;
}

.para-prod02 b {
    font-size: 25px;
}

.btn-location-prod02 {
    width: 40%;
    padding: 20px 25px;
    background-color: var(--color-second);
    text-align: center;
    cursor: pointer;
    transition: ease all .3s;
    margin: 0 auto;
    color: rgb(255, 255, 255);
    font-weight: 500;
    cursor: pointer;
}

.btn-location-prod02:hover {
    background-color: var(--color-primary);
    box-shadow: 0 0 20px rgba(41, 40, 40, 0.233);
    color: var(--color-second);
    font-weight: 600;
}



/*
=======================
produit 03
=======================
*/

#produit-03 {
    padding: 100px 0;
    margin: 0 auto;
    width: 80%;
}

.image-prod03 {
    display: flex;
    flex-wrap: wrap;
    grid-area: 5px;
    width: 100%;
    margin: 0 auto;
}

.img-prod03 {
    width: 25%;
    cursor: pointer;
    transition: all ease .3s;
}

.img-prod03:hover {
    transform: scale(1.1);
}

.img-prod03 img {
    width: 80%;
}

.par-prod03 {
    width: 40%;
    margin: 0 auto;
    padding-top: 80px;
    padding-bottom: 20px;
}

.bloc-prix-location-prod03 {
    width: 100%;
    display: flex;
    padding: 30px 0;
    justify-content: space-between;
    margin: 0 auto;
}

.bloc-prix-location-prod03 .prix-location {
    font-size: 65px;
    font-weight: 700;
}


/* #nbre-jours{
    background-color: #ffe600;
    width: 65%;
    height: 65px;
    border: none;
    padding-left: 30px;
    margin-bottom: 20px;
} */

.njour-location-prod03 {
    position: relative;
    top: -5px;
}

.btn-location-prod03 {
    width: 55%;
    padding: 20px 25px;
    background-color: var(--color-second);
    text-align: center;
    cursor: pointer;
    transition: ease all .3s;
    margin: 10px auto;
    color: rgb(255, 255, 255);
    font-weight: 500;
    cursor: pointer;
}

.btn-location-prod03:hover {
    background-color: var(--color-primary);
    box-shadow: 0 0 20px rgba(41, 40, 40, 0.233);
    color: var(--color-second);
    font-weight: 600;
}

/*

.btn-location-prod03:hover a {
    color: var(--color-second);
    font-weight: 600;
}

.btn-location-prod03 a {
    font-size: 18px;
    color: #FFF;
}*/

.image-prod04 {
    width: 60%;
    height: 800px;
    margin: 5% auto;
    background-image: url(../images/location-prod41.jpg);
    background-size: 100%;
    cursor: pointer;
    transition: all ease .3s;
}

.image-prod04:hover {
    width: 60%;
    height: 800px;
    background-image: url(../images/location-prod42.jpg);
    background-size: 100%;
}

.bloc-prix-location-04 {
    width: 70%;
    display: flex;
    padding: 30px 0;
    justify-content: space-between;
    margin: 0 auto;
}

.bloc-prix-location-prod04 .njour-location {
    position: relative;
    top: 60px;
}


/* 
==========================
info equipe
==========================
*/

.info-perso-equipe {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-top: 250px;
}

#plus-tearm {
    width: 100%;
    background-color: #ecf4ff;
    margin-top: 200px;
    padding-top: 100px;
    padding-bottom: 150px;
}

.plus-tearm {
    width: 80%;
    margin: 0 auto;
    padding-top: 50px;
}

.image-tearm {
    width: 50%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    padding-top: 100px;
}

.block-info-team-detail {
    width: 45%;
    padding-top: 100px;
}

.image-tearm img {
    width: 100%;
    margin: 0 auto;
}

.bd-tearm {
    background-color: var(--color-third);
    width: 100%;
    height: 90%;
    position: relative;
    top: -570px;
    left: -50px;
    z-index: -1;
}

.tearm-rx {
    width: 80%;
    position: relative;
    padding-top: 20px;
}

.tearm-rx a i {
    font-size: 45px;
    padding-left: 5px;
}

#team-page-tearm-info {
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    padding-top: 50px;
}

.picture-team {
    position: relative;
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    padding-top: 50px;
}

.picture-team-info {
    width: 60%;
    margin: 0 auto;
    display: flex;
    padding-top: 50px;
}

.para-info-tearm {
    width: 100%;
    padding-left: 0;
}

.pp-1 .team-info {
    background-color: var(--color-forth);
    width: 100%;
    height: 20%;
    position: relative;
    top: 0;
}

.pp-2 .team-info {
    background-color: var(--color-forth);
    width: 100%;
    height: 20%;
    position: relative;
    top: 0;
}

.pp-3 .team-info {
    background-color: var(--color-forth);
    width: 100%;
    height: 20%;
    position: relative;
    top: 0;
}

.pp-4 .team-info {
    background-color: var(--color-forth);
    width: 100%;
    height: 20%;
    position: relative;
    top: 0;
}

.pp-5 .team-info {
    background-color: var(--color-forth);
    width: 100%;
    height: 20%;
    position: relative;
    top: 0;
}

.pp-6 .team-info {
    background-color: var(--color-forth);
    width: 100%;
    height: 20%;
    position: relative;
    top: 0;
}

.pp-7 .team-info {
    background-color: var(--color-forth);
    width: 100%;
    height: 20%;
    position: relative;
    top: 0;
}

.pp-8 .team-info {
    background-color: var(--color-forth);
    width: 100%;
    height: 20%;
    position: relative;
    top: 0;
}

.pp-1 {
    height: 480px;
    transition: var(--transition);
    position: relative;
    width: 24%;
    background-image: url(../images/smt-02.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    transition: ease all .5s;
    align-items: center;
    margin: 5px;
}

.pp-2 {
    height: 480px;
    transition: var(--transition);
    position: relative;
    width: 24%;
    background-image: url(../images/akosse-02.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    transition: ease all .5s;
    align-items: center;
    margin: 5px;
}

.pp-3 {
    height: 480px;
    transition: var(--transition);
    position: relative;
    width: 24%;
    background-image: url(../images/romaric-02.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    transition: ease all .5s;
    align-items: center;
    margin: 5px;
}

.pp-4 {
    height: 480px;
    transition: var(--transition);
    position: relative;
    width: 24%;
    background-image: url(../images/sangan-02.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    transition: ease all .5s;
    align-items: center;
    margin: 5px;
}

.pp-5 {
    height: 480px;
    transition: var(--transition);
    position: relative;
    width: 24%;
    background-image: url(../images/paul-02.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    transition: ease all .5s;
    align-items: center;
    margin: 5px;
}

.pp-6 {
    height: 480px;
    transition: var(--transition);
    position: relative;
    width: 24%;
    background-image: url(../images/eustache-02.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    transition: ease all .5s;
    align-items: center;
    margin: 5px;
}

.pp-7 {
    height: 480px;
    transition: var(--transition);
    position: relative;
    width: 24%;
    background-image: url(../images/smt-02.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    transition: ease all .5s;
    align-items: center;
    margin: 5px;
}

.pp-8 {
    height: 480px;
    transition: var(--transition);
    position: relative;
    width: 24%;
    background-image: url(../images/alain-02.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    transition: ease all .5s;
    align-items: center;
    margin: 5px;
}

.pp-1:hover {
    cursor: pointer;
    background-image: url(../images/smt-03.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}

.pp-2:hover {
    cursor: pointer;
    background-image: url(../images/akosse-03.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}

.pp-3:hover {
    cursor: pointer;
    background-image: url(../images/romaric-03.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}

.pp-4:hover {
    cursor: pointer;
    background-image: url(../images/sangan-03.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}

.pp-5:hover {
    cursor: pointer;
    background-image: url(../images/paul-03.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}

.pp-6:hover {
    cursor: pointer;
    background-image: url(../images/eustache-03.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}

.pp-7:hover {
    cursor: pointer;
    background-image: url(../images/smt-03.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}

.pp-8:hover {
    cursor: pointer;
    background-image: url(../images/alain-03.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}

.pp-1 .team-info {
    display: none;
}

.pp-2 .team-info {
    display: none;
}

.pp-3 .team-info {
    display: none;
}

.pp-4 .team-info {
    display: none;
}

.pp-5 .team-info {
    display: none;
}

.pp-6 .team-info {
    display: none;
}

.pp-7 .team-info {
    display: none;
}

.pp-8 .team-info {
    display: none;
}

.pp-2:hover .team-info {
    display: block;
}

.pp-1:hover .team-info {
    display: block;
}

.pp-3:hover .team-info {
    display: block;
}

.pp-4:hover .team-info {
    display: block;
}

.pp-5:hover .team-info {
    display: block;
}

.pp-6:hover .team-info {
    display: block;
}

.pp-7:hover .team-info {
    display: block;
}

.pp-8:hover .team-info {
    display: block;
}

.pp-1,
.pp-3,
.pp-4,
.pp-5,
.pp-6,
.pp-7,
.pp-8,
.pp-2:hover {
    cursor: pointer;
}

.pp-1 .btn-team-info {
    display: none;
}

.pp-1:hover .btn-team-info {
    display: block;
}

.pp-2 .btn-team-info {
    display: none;
}

.pp-2:hover .btn-team-info {
    display: block;
}

.pp-3 .btn-team-info {
    display: none;
}

.pp-3:hover .btn-team-info {
    display: block;
}

.pp-4 .btn-team-info {
    display: none;
}

.pp-4:hover .btn-team-info {
    display: block;
}

.pp-5 .btn-team-info {
    display: none;
}

.pp-5:hover .btn-team-info {
    display: block;
}

.pp-6 .btn-team-info {
    display: none;
}

.pp-6:hover .btn-team-info {
    display: block;
}

.pp-7 .btn-team-info {
    display: none;
}

.pp-7:hover .btn-team-info {
    display: block;
}

.pp-8 .btn-team-info {
    display: none;
}

.pp-8:hover .btn-team-info {
    display: block;
}

.btn-team-info {
    background-color: var(--color-primary);
    width: 100%;
    height: auto;
    border: none;
    position: absolute;
    text-align: center;
    transition: var(--transition);
    bottom: 0;
    padding: 20px;
    right: 0;
    z-index: 100;
}

.btn-team-info:hover a {
    color: var(--color-second);
}

.btn-team-info a {
    color: var(--color-second);
    font-size: 18px;
    padding: 10px;
}

.pp-1 .team-info {
    position: absolute;
}

.pp-2 .team-info {
    position: absolute;
}

.pp-3 .team-info {
    position: absolute;
}

.pp-4 .team-info {
    position: absolute;
}

.pp-5 .team-info {
    position: absolute;
}

.pp-6 .team-info {
    position: absolute;
}

.pp-7 .team-info {
    position: absolute;
}

.pp-8 .team-info {
    position: absolute;
}


/* 
-------------------------
supa hiryo
-------------------------
*/

.bg-supa-hiryo {
    width: 100%;
    min-height: 100vh;
    background-image: url('../images/bg-supa-hiryo.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
}

#supa-hiryo {
    width: 100%;
    padding-top: 100px;
}

.supa-hiryo-info {
    width: 100%;
    display: flex;
    align-items: center;
}

.supa-hiryo-info-paragraphe {
    width: 50%;
}

.supa-hiryo-info-paragraphe .titre-services {
    position: relative;
    left: -50px;
}

.supa-hiryo-info-para ul {
    position: relative;
    left: 20px;
}

.supa-hiryo-info-para ul li {
    list-style-type: square;
}

.supa-hiryo-info-image {
    width: 40%;
}

.supa-hiryo-info-image img {
    width: 100%;
}



/* 
=================
loop
=================
*/

#toast div {
    color: rgb(255, 255, 255);
    padding: 10px;
}

.loop {
    width: 100%;
    padding: 100px;
    text-align: center;
    border-bottom: 5px solid #000000;
}

.cont-loop {
    width: 20%;
    margin: 0 auto;
}

.cont-loop img {
    width: 100%;
}


/* 
==========================
formulaire location
==========================
*/

.block-form-location {
    display: flex;
    width: 60%;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 150px;
}

.form-location {
    width: 38%;
    margin: 0 auto;
    padding: 30px;
}



/* 
=================
image similaire
=================
*/



#image-produit-location {
    width: 60%;
    position: relative;
}

.image-produit-location {
    height: auto;
    width: 100%;
    position: absolute;
    top: 150px;
    left: 0;
    display: none;
}

#image-produit-location .active {
    height: auto;
    width: 100%;
    position: absolute;
    top: 150px;
    left: 0;
    display: block;
}

.imag {
    cursor: pointer;
}

#image-simi01 {
    display: block;
    cursor: pointer;
}

.image-produit-location img {
    width: 100%;
}

.image-minuature {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    position: absolute;
    bottom: 30px;
    left: 0;
}

.image-minuature .imag {
    width: 23%;
    border: 1px solid #00000041;
    background-color: #ededed;
    padding: 20px;
}

.image-minuature .imag img {
    width: 100%;
}


#pet-select {
    background-color: #ffffff;
    width: 55.5%;
    height: 40px;
    border: none;
    padding-left: 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.082);
}

#sep-loc {
    width: 100%;
    background-color: #c1c1c14d;
    height: 2px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.sep-loc {
    width: 80%;
    background-color: #c1c1c14d;
    height: 2px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.commander-maint {
    padding-bottom: 20px;
    font-weight: 500;
}

#btn-reserve {
    width: 80%;
    justify-items: center;
    background-color: var(--color-second);
    color: rgb(255, 255, 255);
    cursor: pointer;
    padding: 10px;
    font-size: 18px;
}

#btn-reserve:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.205);
}

.titre-produit {
    padding-bottom: 20px;
}

.titre-produit h3 {
    font-size: 35px;
    color: rgb(84, 82, 82);
}

.titre-produit p {
    font-size: 17px;
    font-weight: 400;
}

.price-produit {
    font-size: 18px;
    color: rgb(34, 33, 33);
}

.caractersitique h3 {
    color: rgb(113, 113, 113);
    font-size: 18px;
}

.caractersitique b {
    color: rgb(113, 113, 113);
    font-weight: 500;
}

.caractersitique ul li {
    color: rgb(133, 133, 133);
}

.description-produit h3 {
    padding-bottom: 10px;
}

.description-produit ul {
    padding-left: 20px;
}

.description-produit ul li {
    list-style: square;
}




/* nos offres */

.block-btn-offre {
    display: flex;
    width: 80%;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 auto;
}

.btn-noffre {
    background-color: var(--color-second);
    width: 18%;
    height: auto;
    margin: 50px auto;
    text-align: center;
    padding: 20px 25px;
    cursor: pointer;
    transition: var(--transition);
}

.btn-noffre:hover {
    background-color: var(--color-primary);
    box-shadow: var(--box-shadow);
}

.btn-noffre:hover a {
    color: var(--color-second);
    font-weight: 500;
}

.btn-noffre a {
    color: #fff;
    font-size: 20px;
    text-align: center;
    font-weight: 500;
}


/* 
=======================
contacts
=======================
*/

#info-contact {
    width: 100%;
    padding-top: 70px;
}

.contact-nyusu{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 80%;
    margin:0 auto;
    justify-content: space-between;
}

.block-info-contact{
    width: 48%;
}


.info-contact-nyusu{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    align-items: top;
    justify-content: space-between;
}

.drapeau-nyusu{
    width: 100%;
    padding-left: 100px;
	Padding-bottom:10px;
}

.drapeau-nyusu img{
    width: 50px;
}

.contact-ci{
    width: 48%;
}

.contact-maroc{
    width: 48%;
}


#contact-ci{
    width: 100%;
}

#contact-maroc{
    width: 100%;
}

.info-nyusu{
    width: 100%;
    display: flex;
    height: 60px;
}


#info-nyusu{
    width: 100%;
    display: flex;
    height: 40px;
}

.info-nyusu img{
    width:35px;
    position: relative;
    top: -10px;
}

#info-nyusu p{
    padding-left: 10px;
    padding-top: 0;
}


.info-nyusu p{
    padding-left: 20px;
    padding-top: 10px;
}


.info-contact-index {
    text-align: center;
}

.tittle-form {
    padding: 50px 0;
}

.tittle-form h1 {
    font-family: century gothic, arial, Poppins;
    font-size: 45px;
    padding-left: 20px;
}


#form-contact {
    width: 50%;
    background-color: var(--color-forth);
}

.form-contact {
    padding: 20px;
}

.checkbox {
    font-size: 15px;
    padding-left: 5px;
}

.type input[type="checkbox"] {
    margin-left: 0;
}



#btn-send {
    background-color: #0000FF;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-style: narrow;
    font-size: 18px;
    margin-left: 0;
    margin-bottom: 20px;
}

#nyusu-rx {
    width: 100%;
    position: relative;
    padding-top: 50px;
    margin: 0 auto;
    right: 0;
    right: 0;
}

.nyusu-rx {
    width: 100%;
}

.nyusu-rx i {
    font-size: 35px;
    color: #6e6d6d;
}

.tittle-rx {
    font-size: 25px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: #4b4b4b;
}


/* 
====================
contact
====================
*/

.block-icones-footer {
    padding: 10px 0;
    width: 100%;
}

#block-icones-footer {
    width: 48%;
}


.block-icones-footer img {
    width: 30px;
}

.block-icones-footer span {
    position: relative;
    top: -5px;
}

.block-icones-footer img span {
    font-size: 21px;
    font-weight: 500;
    position: relative;
    top: -50px;
}

#info-footer {
    position: relative;
    top: -35px;
    left: 50px;
}

#drapeau {
    width: 48%;
    height: auto;
    position: relative;
    left: 10%;
}

#drapeau img {
    height: auto;
    width: 35px;
}


.col #imag01 {
    width: 100%;
}

#imag01 img{
    width: 100%;
}




/* 
------------------------------
btn en savoir plus
------------------------------
*/

.btn-ensavoirplusx {
    width: 50%;
    text-align: center;
    border-radius: 200px;
    margin-top: 40px;
    transition: var(--transition);
    display: flex;
    position: relative;
    align-items: center;
}

.btn-ensavoirplusx:hover .cercle-btn-plus {
    left: -150px;
}


.btn-ensavoirplusx:hover .btn-en-sav-plus {
    transform: translateX(5%);
    opacity: 1;
    color: rgb(255, 255, 255);
}

.btn-ensavoirplusx:hover .btn-en-sav-plus abbr{
    color: rgb(255, 255, 255);
}

.cercle-btn-plus{
    width: 60px;
    height: 60px;
    background-color: var(--color-second);
    border-radius: 20px 0 20px 0;
    text-align: center;
    align-items: center;
    justify-content:center;
    padding: 10px;
    cursor: pointer;
    position: relative;
    z-index: 100;
    color: rgb(255, 255, 255);
    font-size: 25px;
    margin:0 auto;
    transition: ease all .3s;
    left: 0;
}


.btn-en-sav-plus{
    width: 80%;
    background-color: var(--color-second);
    text-align: center;
    align-items: center;
    padding: 10px 20px;
    position: absolute;
    border-radius: 20px 0 20px 0;
    height: 60px;
    cursor: pointer;
    z-index: 50;
    transform: translateX(-10%);
    transition: ease all .8s;
    opacity: 0;
}

.btn-en-sav-plus a{
    color: rgb(255, 255, 255);
    font-size: 18px;
    position: relative;
    top: 7px;
}

.btn-en-sav-plus:hover a{
    color: rgb(255, 255, 255);
}


/* 
------------------------------
btn voir plus
------------------------------
*/


.btn-voirplusx{
    width: 15%;
    text-align: center;
    border-radius: 20px 0 20px 0;
    transition: var(--transition);
    display: flex;
    position: relative;
    align-items: center;
    margin: 5% auto;

}

.btn-voirplusx:hover .cercle-btn-v-plus {
    left: -80px;
}


.btn-voirplusx:hover .btn-v-plus {
    transform: translateX(10%);
    opacity: 1;
    color: rgb(255, 255, 255);
}

.btn-voirplusx:hover .btn-v-plus a{
    color: rgb(255, 255, 255);
}


.cercle-btn-v-plus{
    width: 60px;
    height: 60px;
    background-color: var(--color-second);
    border-radius: 20px 0 20px 0;
    text-align: center;
    align-items: center;
    justify-content:center;
    padding: 10px;
    cursor: pointer;
    position: relative;
    z-index: 100;
    color: rgb(255, 255, 255);
    font-size: 25px;
    margin:0 auto;
    transition: ease all .3s;
    left: 0;
}


.btn-v-plus{
    width: 100%;
    background-color: var(--color-second);
    text-align: center;
    align-items: center;
    padding: 10px 20px;
    position: absolute;
    border-radius: 20px 0 20px 0;
    height: 60px;
    cursor: pointer;
    z-index: 50;
    transform: translateX(-5%);
    transition: ease all .8s;
    opacity: 0;
}

.btn-v-plus a{
    color: rgb(255, 255, 255);
    font-size: 18px;
    position: relative;
    top: 7px;
}

.btn-v-plus:hover a{
    color: rgb(255, 255, 255);
}



/* 
------------------------------
btn-contactez-nous
------------------------------
*/


.btn-contactez-nous{
    width: 10%;
    text-align: center;
    border-radius: 20px 0 20px 0;
    transition: var(--transition);
    display: flex;
    position: relative;
    align-items: center;
    margin: 1% auto;

}

.btn-contactez-nous:hover .cercle-btn-c-nous {
    left: -120px;
}


.btn-contactez-nous:hover .btn-c-nous{
    transform: translateX(8%);
    opacity: 1;
    color: rgb(255, 255, 255);
}

.btn-contactez-nous:hover .btn-c-nousa{
    color: rgb(255, 255, 255);
}


.cercle-btn-c-nous{
    width: 60px;
    height: 60px;
    background-color: var(--color-second);
    border-radius: 20px 0 20px 0;
    text-align: center;
    align-items: center;
    justify-content:center;
    padding: 10px;
    cursor: pointer;
    position: relative;
    z-index: 100;
    color: rgb(255, 255, 255);
    font-size: 25px;
    margin:0 auto;
    transition: ease all .3s;
    left: 0;
}


.btn-c-nous{
    width: 100%;
    background-color: var(--color-second);
    text-align: center;
    align-items: center;
    padding: 10px 20px;
    position: absolute;
    border-radius: 20px 0 20px 0;
    height: 60px;
    cursor: pointer;
    z-index: 50;
    transform: translateX(-5%);
    transition: ease all .8s;
    opacity: 0;
}

.btn-c-nous a{
    color: rgb(255, 255, 255);
    font-size: 18px;
    position: relative;
    top: 7px;
}

.btn-c-nous:hover a{
    color: rgb(255, 255, 255);
}



/* 
------------------------------
btn-decouvrez-lagence
------------------------------
*/


.btn-decouvrer-lagence{
    width: 50%;
    text-align: center;
    border-radius: 20px 0 20px 0;
    transition: var(--transition);
    display: flex;
    position: relative;
    align-items: center;
    margin: 1% auto;

}

.btn-decouvrer-lagence:hover .cercle-btn-d-agence {
    left: -150px;
}


.btn-decouvrer-lagence:hover .btn-d-agence{
    transform: translateX(8%);
    opacity: 1;
    color: rgb(255, 255, 255);
}

.btn-decouvrer-lagence:hover .btn-d-agencea{
    color: rgb(255, 255, 255);
}


.cercle-btn-d-agence{
    width: 60px;
    height: 60px;
    background-color: var(--color-second);
    border-radius: 20px 0 20px 0;
    text-align: center;
    align-items: center;
    justify-content:center;
    padding: 10px;
    cursor: pointer;
    position: relative;
    z-index: 100;
    color: rgb(255, 255, 255);
    font-size: 25px;
    margin:0 auto;
    transition: ease all .3s;
    left: 0;
}


.btn-d-agence{
    width: 100%;
    background-color: var(--color-second);
    text-align: center;
    align-items: center;
    padding: 10px 20px;
    position: absolute;
    border-radius: 20px 0 20px 0;
    height: 60px;
    cursor: pointer;
    z-index: 50;
    transform: translateX(-5%);
    transition: ease all .8s;
    opacity: 0;
}

.btn-d-agence a{
    color: rgb(255, 255, 255);
    font-size: 18px;
    position: relative;
    top: 7px;
}

.btn-d-agence:hover a{
    color: rgb(255, 255, 255);
}




/* 
============
carroussel
============
*/

/* header caroussel */

.mySlides{
    display: none;
}

img{
    vertical-align: middle;
}


.banner{
    height: auto;
    background-size: cover;
    background-position: center;
}

.preheader{
    color: #ffffff;
    font-weight: bold;
    font-size: 35px;
    position: absolute;
    margin: 0;
    text-align: center;
    right: 0;
    left: 0;
    justify-content: center;
    text-align: center;
}


.bloc-preheader{
    position: relative;
    top:0;
}

.titre-carroussel{
    color: #ffffff;
    font-weight: bold;
    font-size: 30px;
    text-shadow: 0 2px 5px #000;

}

.comment-titre-carroussel{
    color: #ffffff;
    font-size: 25px;
    margin-top: -10px;
    margin-bottom: 30px;
    font-weight: 500;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.336);
}

.btn-agis-maintenant{
    width: 20%;
    border-radius: 5px;
    margin: 10px auto;
    background-color: #9B0000;
    padding: 10px 0;
    border: 1px solid #ffffff;
    transition: var(--transition);
   
}

.btn-agis-maintenant:hover{
    cursor: pointer;
    box-shadow: 0 0 10px #f2f2f2;
    background-color: var(--color-third);
  
}

.btn-agis-maintenant a{
    font-size: 20px;
    text-transform: uppercase;
    color: #ffffff;   
}


/* sliders */

.container{
    padding-top: 150px;
    width: 70%;
    margin: 0 auto;
    padding-bottom: 100px;
}

.slider{
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}


.slick-slide{
    margin: 0 20px;
    align-items: center;
}

.slick-slide img{
    width: 100%;
    align-items: center;
}

.slick-slider{
    position: relative;
    display: block;
    box-sizing: border-box;
    align-items: center;
}

.slick-list{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    align-items: center;
}

.slick-track{
    position: relative;
    top: 0;
    left: 0;
    display: block
}

.slick-slide{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
    align-items: center;
}

.slick-slide img{
    display: block;
    width: 100%;
    cursor: pointer;
    cursor: hand;
    align-items: center;
}

.slick-initialized .slick-slide{
    display: block;
    align-items: center;
}

.copy{
    padding-top: 250px;
}


.patner-img{

    width: 100px;
    margin-right: 15px;
}




/* section partenaire */


.block-partenaire{
    width: 80%;
    margin: 0 auto;
    padding: 50px;
}

.contenu-parteniare{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.logopart{
    width: 10%;
    margin: 10px;
    transition: all ease .5s;
    cursor: pointer;
}

.logopart img{
    width: 100%;
}

.logopart:hover{
   transform: scale(1.1);
}


/* 
=====================
devise nyusu
=====================
*/

.section-devise{
    width: 100%;
    padding-bottom: 100px;
}


#titre-nos-services {
    position: relative;
    font-size: 50px;
    font-weight: 600;
    z-index: 100;
    font-family: var(--font-family2);

}

#souligneur {
    background-color: var(--color-third);
    width: 150px;
    height: 25px;
    position: relative;
    top: -35px;
    left: -5px;
}

.bloc-experience {
    margin: 0 auto;
    width: 80%;
    padding: 0 0 200px 0;
}



.bloc-separateur-devise{
    width: 90%;
    margin: 5% auto;
    position: relative;
    align-items: center;
    opacity: .5;
}

.separateur-devise01{
    width: 40%;
    margin: 0 auto;
    height: 2px;
    background-color: rgba(112, 112, 112, 0.377);
    border-radius: 100px;
}

.separateur-devise02{
    width: 20px;
    height: 20px;
    background-color: rgb(180, 180, 180);
    border-radius: 500px;
    position: absolute;
    left: 50%;
    top: -10px;
    transform: translateX(50%);
    
}


#devise-nyusu{
    width: 70%;
    margin: 0% auto;
}


.contenu-devise-nyusu{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}


.devise{
    width: 55%;
    padding: 30px;
}


.image-devise{
    width: 45%;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all ease .5s;
    cursor: pointer;
}

.image-devise:hover{
    transform: scale(1.1);
}

.image-devise img{
    width: 100%;
}

/* modal */

.contenu-modal{
    width: 90%;
    margin: 5% auto;
    font-weight: 400;
}

.contenu-modal p{
    font-weight: 400;
    font-size: 16px;
}


.titre-modal{
    padding-left: 70px;
    padding-bottom: 30px;
    color: var(--color-ncreative);
    /* color: #bb4b00; */
    border-bottom: 1px solid var(--color-ncreative);
    font-weight: 700;
}

.titre-modal-digital{
    padding-left: 70px;
    padding-bottom: 30px;
    /* color: #0202ac; */
    color: var(--color-ndigital);
    border-bottom: 1px solid var(--color-ndigital);
    font-weight: 700;
}

.titre-modal-print{
    padding-left: 70px;
    padding-bottom: 30px;
    color: var(--color-nprint);
    /* color: #e9b600; */
    border-bottom: 1px solid var(--color-nprint);
    font-weight: 700;
}

.titre-modal-green{
    padding-left: 70px;
    padding-bottom: 30px;
    
    color: var(--color-ngreen);
    border-bottom: 1px solid var(--color-ngreen);
    font-weight: 700;
}

.liste-services ul {
    padding-top: 50px;
}

/* .liste-services ul li{
    list-style: square;
    list-style-image: url(../logo/symbole-digital-01.jpg);
    font-size: 16px;
    font-weight: 400;
    padding: 2px 0;
} */

.bg-info-page{
    background-color: rgb(243, 243, 243);
    margin-top: -60px;
    padding-top: 100px;
}

#contenu-box-servise{
    width: 100%;
    background-color: rgb(243, 243, 243);
}

#box-servise{
    width: 80%;
    margin: 0 auto;
}



#citation-creative {
    /* background-color: hsla(24, 100%, 50%, 0.301); */
    background-color: var(--color-ncreative);
    width: 100%;
    height: auto;
    text-align: center;
}

#citation-print {
    background-color: #2361073b;
    width: 100%;
    height: auto;
    text-align: center;
}

#citation-digital {
    /* background-color: rgba(0, 0, 255, 0.164); */
    background-color: var(--color-ndigital);
    width: 100%;
    height: auto;
    text-align: center;
}

#citation-green {
    /* background-color: hsla(101, 87%, 20%, 0.301); */
    background-color: var(--color-ngreen);
    width: 100%;
    height: auto;
    text-align: center;
}


#nprint-citation-nprint{
    /* background-color: hsla(101, 87%, 20%, 0.301); */
    background-color: var(--color-nprint);
    width: 100%;
    height: auto;
    text-align: center;
}




.titre-sercive-green{
    padding: 50px 0;
    width: 80%;
    margin: 0 auto;
}


.titre-sercive-green h1{
    font-weight: 500;
    font-family: var(--font-family2);
    text-align: center;
    color: #000;
}

.liseret-green{
    background-color: var(--color-ngreen);
    height: 5px;
    width: 50%;
    margin: 0 auto;
}


#citation-green  #titre-citation-green h2{
    color: rgb(255, 255, 255);
}


#citation-green  #titre-citation-green p{
    color: rgb(255, 255, 255);
}


#citation-green  #titre-citation-green .btn-c-nous{
    background-color: rgb(255, 255, 255);
}


#citation-green  #titre-citation-green .cercle-btn-c-nous{
    background-color: rgb(255, 255, 255);
    color: var(--color-ngreen);
}



#citation-green  #titre-citation-green  .btn-c-nous a{
    color: var(--color-ngreen);
}


#nprint-citation-nprint  #titre-citation-green h2{
    color: rgb(255, 255, 255);
}


#nprint-citation-nprint  #titre-citation-green p{
    color: rgb(255, 255, 255);
}


#nprint-citation-nprint  #titre-citation-print .btn-c-nous{
    background-color: rgb(255, 255, 255);
}



#nprint-citation-nprint  #titre-citation-print .cercle-btn-c-nous{
    background-color: rgb(255, 255, 255);
    color: #000;
}



#nprint-citation-nprint  #titre-citation-print .btn-c-nous a{
    color: #000;
}


#btn-contactez-nous-green .cercle-btn-c-nous{
    background-color: var(--color-ngreen);
}

#btn-contactez-nous-green .btn-c-nous{
    background-color: var(--color-ngreen);
}


#btn-contactez-nous-creative .cercle-btn-c-nous{
    background-color: var(--color-ncreative);
}

#btn-contactez-nous-creative .btn-c-nous{
    background-color: var(--color-ncreative);
}


#btn-contactez-nous-print .cercle-btn-c-nous{
    background-color: var(--color-nprint);
    color: #000;
}

#btn-contactez-nous-print .btn-c-nous{
    background-color: var(--color-nprint);
}

#btn-contactez-nous-print .btn-c-nous a{
    color: #000;
}


#souligneur-titre-ngreen{
    background-color: var(--color-ngreen);
}


#souligneur-titre-ndigital{
    background-color: var(--color-ndigital);
    /* background-color: #bdddf7; */
}


#souligneur-titre-ncreative{
    background-color: var(--color-ncreative);
}


#souligneur-titre-nprint{
    background-color: var(--color-nprint);
}


#citation-digital .cercle-btn-c-nous{
    background-color: #fff;
    color:var(--color-ndigital);
}

#citation-digital .btn-c-nous{
    background-color:#fff;
}

#citation-digital .btn-c-nous a{
    color: var(--color-ndigital);
}


#citation-digital  .cont-nprint-citation h2{
    color: rgb(255, 255, 255);
}


#citation-digital  .cont-nprint-citation p{
    color: rgb(255, 255, 255);
}


#citation-digital  #titre-citation-green .btn-c-nous{
    background-color: rgb(255, 255, 255);
}


#citation-creative  .cont-nprint-citation h2{
    color: rgb(255, 255, 255);
}


#citation-creative  .cont-nprint-citation p{
    color: rgb(255, 255, 255);
}


#citation-creative .cercle-btn-c-nous{
    background-color: #fff;
    color:var(--color-ncreative);
}

#citation-creative .btn-c-nous{
    background-color:#fff;
}

#citation-creative .btn-c-nous a{
    color: var(--color-ncreative);
}



.liste-ndigital li{
    padding-left: 10px;
    list-style-image: url(../puces/digital.png);
    font-weight: 400;
    font-size: 16px;
}

.liste-nprint li{
    padding-left: 10px;
    list-style-image: url(../puces/print.png);
    font-weight: 400;
    font-size: 16px;
}

.liste-ngreen li{
    padding-left: 10px;
    list-style-image: url(../puces/green.png);
    font-weight: 400;
    font-size: 16px;
}

.liste-ncreative li{
    padding-left: 10px;
    list-style-image: url(../puces/creative.png);
    font-weight: 400;
    font-size: 16px;
}


/* equipement-nyusu */

/* print */


.liste-equipement-pint{
    width: 30%;
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    padding-left: 50px;
    bacground-color:green;
}

.equipement-print-svg{
    width: 20%;
    cursor: pointer;
}

.liste-equipement-pint .hp{
    width: 5%;
}

.liste-equipement-pint .hp svg{
    width: 100%;
}

.liste-equipement-pint .hp svg .cls-1 {
    fill: #5b5b5b;
    transition: all ease .5s;
}

.liste-equipement-pint .hp svg:hover .cls-1 {
    fill: #0096d6;
}

.liste-equipement-pint .canon{
    width: 10%;
}

.liste-equipement-pint .canon svg{
    width: 100%;
}

.liste-equipement-pint .canon svg .cls-1 {
    fill: #5b5b5b;
    transition: all ease .5s;
}

.liste-equipement-pint .canon svg:hover .cls-1 {
    fill: #0096d6;
}


.liste-equipement-pint .epson{
    width: 10%;
}

.liste-equipement-pint .epson svg{
    width: 100%;
}

.liste-equipement-pint .epson svg .cls-1 {
    fill: #5b5b5b;
    transition: all ease .5s;
}

.liste-equipement-pint .epson svg:hover .cls-1 {
    fill: #0096d6;
}


.liste-equipement-pint .konica{
    width: 10%;
}

.liste-equipement-pint .konica svg{
    width: 100%;
}

.liste-equipement-pint .konica svg .cls-1 {
    fill: #5b5b5b;
    transition: all ease .5s;
}

.liste-equipement-pint .konica svg:hover .cls-1 {
    fill: #0096d6;
}



/* creative */


.liste-equipement-creative{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-left: 40px;
    padding-top: 30px;
    align-items:center;
}

.liste-equipement-creative p{
    font-size: 12px;
    padding-top: 10px;
}

.equipement-creative-svg{
    width: 8%;
    cursor: pointer;
    text-align: center;
    justify-content: center;
}

.equipement-creative-svg img{
    width: 100%;
}

.equipement-creative-svg svg .cls-1 {
    fill: #5B5B5B;
    transition: var(--transition);
}

.photoshop:hover svg .cls-1 {
    fill: #228CC7;
}

.illustrator:hover svg .cls-1 {
    fill: #F97F0E;
}

.indesign:hover svg .cls-1 {
    fill: #FF3B93;
}

.after:hover svg .cls-1 {
    fill: #D692FF;
}

.premier:hover svg .cls-1 {
    fill: #EB70FF;
}

.xd:hover svg .cls-1 {
    fill: #FF19BB;
}

.logiciel{
    font-size: 25px;
    padding-left: 50px;
}


/* digital */

.liste-equipement-digital{
    width:70%;
    display: flex;
    
    flex-wrap: wrap;
    gap: 10px;
    /*padding-left: 40px;
    padding-top: 30px;*/
    /*align-items: center;*/
}


.liste-equipement-digitals{
    width:100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    
  
    padding-top: 30px;
    align-items: center;
}


.equipement-digital-svg{
    width: 15%;
    cursor: pointer;
    text-align: center;
    justify-content: center;
}

.equipement-digital-svg img{
    width:70%;
}

.js{
    width: 15%;
    
}

.js img{
    width:50%;
}



.marq{
    width: 17%;
  
    
}

.marq img{
    width:60%;
}

.wordpress{
    
    width: 20%;
}

.wordpress img{
    width: 60%;
}


#supa01{
    /* background-color: transparent; */
    background-color: #ececec;
    border-radius: 5px;
}

#supa01:hover{
    /* background-color: transparent; */
    background-color: #ececec;
    box-shadow: none;
}


#supa01 img{
    background-color: transparent;
    transition: var(--transition);
    padding: 50px;
}

#supa01:hover img{
    transform: scale(1.1);
}