Outiref

Code source de l'URL : https://custom-arts.fr

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap" rel="stylesheet">
<!DOCTYPE html>
<html>
<head>
	<title>Customisation de basket et textiles: Custom Arts</title>
	<meta name="description" lang="fr" xmlns:fb="http://www.facebook.com/2008/fbml" content="L'ère de la customisation commence, Custom-Arts vous propose un large choix de vêtements ainsi que baskets à customiser">
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-178464018-1"></script>
	<script>
	  window.dataLayer = window.dataLayer || [];
	  function gtag(){dataLayer.push(arguments);}
	  gtag('js', new Date());

	  gtag('config', 'UA-178464018-1');
</script>
  <meta name="language" content="fr">
  <meta http-equiv="content-language" content="fr">
  <link rel="icon" type="image/png" href="https://custom-arts.fr/img/logoo.png"/>
  <link rel="preload"  href="https://fonts.gstatic.com/s/cinzel/v10/8vIU7ww63mVu7gtR-kwKxNvkNOjw-tbnfY3lDQ.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <link rel="preload"  href="https://fonts.gstatic.com/s/caveat/v8/Wnz6HAc5bAfYB2Q7ZjYY.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <link rel="preload"  href="https://fonts.gstatic.com/s/worksans/v8/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K67QBi8Jpg.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" href="../js/preloader.js" as="script">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <meta property="og:title" content="Custom Arts: Customisation de basket et textiles" />
  <meta property="og:type" content="website" />
  <meta property="og:description" content="L'ère de la customisation commence, Custom-Arts vous propose un large choix de vêtements ainsi que baskets à customiser comme vous le souhaitez. Faites parler votre immagination et créer votre sneaker ou veste de rêve." />  
  <meta property="og:url" content="https://custom-arts.fr/" />
  <meta property="og:site_name" content="Custom Arts" />


	<link rel="stylesheet" type="text/css" href="./css/index.css">
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

  <head>
  <link rel="icon" type="image/png" href="https://custom-arts.fr/img/logoo.png"/>
  <link rel="preload"  href="https://fonts.gstatic.com/s/caveat/v8/Wnz6HAc5bAfYB2Q7ZjYY.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <link rel="preload"  href="https://fonts.gstatic.com/s/worksans/v8/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K67QBi8Jpg.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" href="../js/preloader.js" as="script">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<style type="text/css">
/* cyrillic-ext */

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cinzel/v10/8vIU7ww63mVu7gtR-kwKxNvkNOjw-tbnfY3lDQ.woff2) format('woff2');
}
@font-face {
  font-family: 'hm';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./include/hm.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Caveat Regular'), local('Caveat-Regular'), url(https://fonts.gstatic.com/s/caveat/v8/Wnz6HAc5bAfYB2Q7ZjYY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/bitter/v16/raxjHiqOu8IVPmn7epZnDMyKBvHf5D6c4Pz-UnByjeU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/bitter/v16/raxjHiqOu8IVPmn7epZnDMyKBvHf5D6c4Pz-W3ByjeU.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/bitter/v16/raxjHiqOu8IVPmn7epZnDMyKBvHf5D6c4Pz-UHByjeU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/bitter/v16/raxjHiqOu8IVPmn7epZnDMyKBvHf5D6c4Pz-UXByjeU.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/bitter/v16/raxjHiqOu8IVPmn7epZnDMyKBvHf5D6c4Pz-X3By.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */

/* vietnamese */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/quicksand/v21/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58m-wi40.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/quicksand/v21/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58i-wi40.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/quicksand/v21/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58a-wg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v8/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K67QBiAJpp_c.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v8/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K67QBiEJpp_c.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v8/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K67QBi8Jpg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: SegoeUI;
    src:
        local("Segoe UI Light"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2) format("woff2"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff) format("woff"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf) format("truetype");
    font-weight: 100;
}

@font-face {
    font-family: SegoeUI;
    src:
        local("Segoe UI Semilight"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2) format("woff2"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff) format("woff"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf) format("truetype");
    font-weight: 200;
}

@font-face {
    font-family: SegoeUI;
    src:
        local("Segoe UI"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2) format("woff2"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff) format("woff"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf) format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: SegoeUI;
    src:
        local("Segoe UI Bold"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2) format("woff2"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff) format("woff"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf) format("truetype");
    font-weight: 600;
}

@font-face {
    font-family: SegoeUI;
    src:
        local("Segoe UI Semibold"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2) format("woff2"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff) format("woff"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf) format("truetype");
    font-weight: 700;
}

  *{
    box-sizing: border-box;
    -webkit-locale : auto;
  	espace blanc : normal;
  }


  a{
    cursor: pointer;
  }

  body{
     -webkit-overflow-scrolling: touch;
    overflow-x: hidden !important;
    height: 100vh;
    margin: 0px;
    padding: 0px;
    position: relative;
  }
  button{
  	outline: none;
  }
  .panier{
  font-family: Cinzel;
    font-weight: bold;
    display: block;
    width: 98%;
    font-size: 27px;
    margin: 25px 0px 23px 0px;
  }

  button{
  	cursor: pointer;
  }

  .modif{
    cursor: pointer;
    border: none;
    font-size: 20px;
    padding: 9px 16px;
    background: #f8f8f8;
    font-family: serif;
    color: black !important;
  }

  #search{
  	outline: none;
    transition: 0.55s;
    border: none;
    right: 3%;
     z-index: 51;
    position: fixed;
    bottom: 3%;
    justify-content: center;
    align-items: center;
    display: flex;
    height: 60px;
    width: 60px;
    margin-right: 0;
    border-radius: 50%;
    background: #d3d3d3;
  }

  select,
  textarea,
  input,
  input[type="text"],
  input[type="button"],
  input[type="submit"],
  .input-checkbox {
  -webkit-appearance: none;
  border-radius: 0;
  }
  input{
  	  font-size: 16px !important;
  }

  #searcher {
    width: 100%;
    float: left;
    position: relative;
    background: transparent;
    border: none;
    border-radius: 2px;
    padding: 15px 0px 15px 30px;
    border-bottom: 1.2px solid black;
    color: black;
    border-radius: 0px;
    font-family: 'hm';
    outline: none;
}
  #recherche {
    background: transparent;
    position: absolute;
    left: -2px;
    margin-top: -7px;
}
#recherche:before {
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Ctitle%3EFoundation%20%2F%20Icon%20%2F%2024%20%2F%20Control%20%2F%20Search%3C%2Ftitle%3E%3Cdefs%3E%3Cpath%20d%3D%22M11%2019a8%208%200%201%200%200-16%208%208%200%200%200%200%2016zm0%201a9%209%200%201%201%200-18%209%209%200%200%201%200%2018zm6.707-3l4.243%204.243-.707.707L17%2017.707l.707-.707z%22%20id%3D%22prefix__a%22%2F%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%2F%3E%3Cuse%20fill%3D%22%23222%22%20xlink%3Ahref%3D%22%23prefix__a%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 24px;
    content: "";
    display: block;
    height: 30px;
    width: 30px;
}
.sous-li > a{
  font-size: 14px !important;
}
.sous-li{
  padding: 5px 0px !important;
}
.sous-li:after{
    content: none !important;
}
.removez{
  cursor: pointer;
    border: 0px;
    padding: 15px;
    background: url(https://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/Close_Icon-512.png);
    background-position: center;
    background-size: 21px;
    background-repeat: no-repeat;
}
#panier{
    justify-content: center;
    align-items: center;
    display: flex;
    height: 40px;
    width: 40px;
    margin-right: 0;
    border-radius: 50%;
    background: #d3d3d3;
}
#menu{
	display: none; 
}
  header{
    font-family: Quicksand;
    position: relative;
    background: #f9f9f9;
    padding: 27px 0;
    width: 100%;
    z-index: 50;
  }
  header ul{
      display: flex;
      width: 93.5%;
      margin: auto;
      justify-content: space-between;
      padding: 0px;
  }

  header li{
    cursor: pointer;
    list-style-type: none;
    font-size: 17px;
  }
  header section{
    width: 903px;
    justify-content: space-between;
    align-items: center;
      display: flex;
      top: 4px;
  }
  header li a{
    line-height: 0;
    font-family: hm;
    vertical-align: middle;
    text-decoration: none;
    color: black;
  }
  #panier,#menu{
    font-size: 20px;
  }
  #header,#view-cart{
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  #header::-webkit-scrollbar,#view-cart::-webkit-scrollbar {
    display: none;
  }
  #header{
    height: 100%;
    overflow-y: scroll;
    background: #faf9f8;
    width: 400px;
    position: fixed;
    height: 100%;
    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.12);
    z-index: 81;
    top: 0px;
    left: -400px;
  }
  #header ul{
      padding: 25px 23px;
      position: relative;
  }
  #header li{
    list-style-type: none;
    position: relative;
    padding: 16px 0px;
  }
  #header li:after {
    content: '';
    background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctitle%3EFoundation%20%2F%20Icon%20%2F%2024%20%2F%20Control%20%2F%20Arrow%20%2F%20Right%3C%2Ftitle%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%2F%3E%3Cpath%20fill%3D%22%23222%22%20d%3D%22M12%203l10.001%209.496-10%209.501-.689-.726L20%2012.996H2v-1h18l-8.688-8.271z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E) center right/100% no-repeat;
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0;
    width: 16px;
}
  #header li:first-child{
    position: absolute;
    cursor: pointer;
    right: 21px;
    top: 28px;
    font-size: 30px;
  }

  #header a{
    font-size: 21px;
    color: black;
    color: black;
    text-decoration: none;
    font-weight: 100;
    font-family: hm;
  }
  .grand_container_upload {
      cursor: pointer;
      position: fixed;
      z-index: 51;
      top: 0px;
      transition: 0.7s;
      display: none;
      height: 100%;
      width: 100%;
      background-color: rgba(0,0,0,.5);
  }
  .active_menu{
    font-weight: bold;
  }
  .left-400{
    left: -400px;
  }
  .right-400{
    right: -400px;
  }
  .zero-left{
    left: 0px ;
  }
  .zero-right{
    right: 0px !important;
  }

  header section{
      position: initial;
  }

    #preheader{
    background: black;
    width: 100%;
    position: relative;
    z-index: 51;
    top: 0px;
  }
  #logo{
    display: none;
  }
  #preheader ul{
    width: 94%;
    margin: auto;
    padding: 13px 0px;
    display: flex;
    justify-content: space-between;
  }
  #preheader li {
    display: inline-block;
    color: white;
  }
  #preheader svg{
    position: relative;
    top: 2px;
  }
  #preheader section:nth-of-type(1) li:nth-of-type(1) {
    padding-right: 10px;
  }
  #preheader a {
    color: white;
  }
    #bar{
      display: initial;
    }

    #bar_flat{
      display: none;
    }

  @media screen and (max-width: 1105px){
  	.none{
      display: none;
    }
    #panier, #menu {
	  font-size: 17px;
	  display: block;
	  top: 2px;
	}
	#search_form{
	    margin-top: -54px !important;
    	z-index: 1;
	}
	header section{
		z-index: 5;
	}
    #panier{
      margin-left: 9px;
      font-size: 21px;
      height: initial;
      width: initial;
      background: initial;
    }
  }
  @media screen and (max-width: 840px){

      header section{
        width: 80% !important;
    }
    #background-container:before{
      display: none;
    }
  }
  @media screen and (max-width: 630px){
  	#header a{
  	    font-size: 18px;
  	}
  	.sous-li > a {
    	font-size: 13px !important;
	}
    #background-container:before{
      display: none;
    }
    #bas{
      display: none;
    }
    #bar{
      display: none;
    }

    #bar_flat{
      display: initial;
    }

    #logo{
      display: initial;
    }

    header section{
      justify-content: space-between;
      width: initial !important;
    }

  }
  @media screen and (max-width: 450px){
    #hide{
      top: 42px !important;
    }
    .panier{
      margin: 37px 0px 23px 0px;
    }
    #header li:first-child {
      top: 11px;
    }
    #header ul{
      padding: 3px 23px;
    }
    #header{
      width: 83vw;
      right: -83%;
    }
    .left-400{
      left: -83%;
    }
    .right-400{
      right: -83%;
    }
  }
ul.products {
  padding: 0;
  margin: 0;
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
}
ul.products li {
  display: inline-block;
  max-width: 200px;
  padding: 10px;
  background-color: #FFFFFF;
  margin: 10px;
  border: 1px solid #EAEAEA;  
  color: #3D3D3D;
}
ul.products li h3 {
  margin: -10px -10px 10px -10px;
  padding: 10px;
  text-align: center;
  background-color: #F5F5F5;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 1.1em;
  color: #5A5A5A;
}
ul.products li fieldset {
  border: none;
  padding: 5px 5px 5px 0px;
  margin: 0;
}
ul.products li fieldset label{
  display:block;
  margin-bottom: 4px;
}
ul.products li fieldset label span{
  width: 80px;
  float: left;
}
ul.products li fieldset label select{
  min-width: 100px;
}
#grand_container_upload {
   position: fixed;
    top: 0px;
    height: 100%;
    z-index: 80;
  width: 100%;
    background-color: hsla(0,0%,94.9%,.6);
}
.button{
  width: 100%;
    cursor: pointer;
    background: black;
    color: #e0dfe1;
    border-radius: 3px;
    font-family: SegoeUI;
    margin-top: 0px;
    text-transform: uppercase;
    border: 1px;
    font-weight: bold;
    padding: 20px 27px;
}
.button:hover{
  background-color: white;
  border: 2px solid #333;
  font-weight: bold;
  color: black;
}
#container{
  width: 520px;
  margin: auto;
  background: red;
}

.product-thumb{
  text-align:center;
}
.product-desc {
  font-style: italic;
  font-size: 0.8em;
  margin-bottom: 4px;
  height: 40px;
  overflow: hidden;
  margin-top: 5px;
}

ul.shopping-cart{
  position: fixed;
  top: 100px;
  right: 0;
  background-color: #F9F9F9;
  padding: 10px;
  min-width: 250px;
  list-style: none;
  font-size: 0.8em;
  border: 1px solid #F0F0F0;
}
ul.shopping-cart .cart-itm {
  margin-bottom: 10px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
}
ul.shopping-cart .cart-itm:last-child{
  border-bottom: none;
  margin-bottom: 0px;
}
ul.shopping-cart .cart-itm .remove-itm{
  float: right;
  font-size: 1.5em;
}
ul.shopping-cart .cart-itm .remove-itm a{
  text-decoration:none;
  color:#000;
}
.cart-total-text a{
  float:right;
}

.cart-view-table-front{
  font-size: 0.7em;
  position: fixed;
  right: -400px;
  top: 0px;
  width: 400px;
  font-family: Arial
}
.cart-view-table-front h3{
  padding: 0;
  margin: 0px 0px 6px 0px;
}
.separator {
    margin: 20px auto 30px auto;
    margin-bottom: 30px;
    width: 98%;
    background: #E8E8E8;
    height: 1px;
}
.separatorz {
  margin: 6px auto 30px auto;
    margin-bottom: 41px;
    width: 98%;
    background: #E8E8E8;
    height: 1px;
}
.cart-view-table-front, #container {
  height: 100%;
    padding: 0px 20px;
    z-index: 90;
    overflow: auto;
  background-color: #FFFFFF;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.12);
  border: 1px solid #E4E4E4;
}
.cart-view-table-front table th, #container table th{
  text-align: left;
  padding: 20px;
}
.even td{
  padding: 20px;
}
.cart-view-table-front table thead, #container table thead{
  background-color: #9CCDFD;
}
.cart-view-table-front table tbody tr.even, #container table tbody tr.even{
  background-color: #F7F7F7;
}
.cart-view-table-front table tbody tr.odd, #container table tbody tr.odd{
  background-color: #EDEDED;
}

@media screen and (max-width: 650px){
.cart-view-table-front{
  max-width:85%;
}
}

</style>

<script type="application/ld+json">

{
  "@graph": 
  [
      {
          "@context": "https://schema.org",
          "@type":"SiteNavigationElement",
          "@id":"#header",
          "name": "Acceuil",
          "url": "https://custom-arts.fr/index.php"
      },
      {
          "@context": "https://schema.org",
          "@type":"SiteNavigationElement",
          "@id":"#header",
          "name": "Catalogue",
          "url": "https://custom-arts.fr/catalogue.php"
      },
      {
          "@context": "https://schema.org",
          "@type":"SiteNavigationElement",
          "@id":"#header",
          "name": "Customiser",
          "url": "https://custom-arts.fr/choix.php"
      },
      {
          "@context": "https://schema.org",
          "@type":"SiteNavigationElement",
          "@id":"#header",
          "name": "Catalogue",
          "url": "https://custom-arts.fr/catalogue.php?terme=&s=Rechercher"
      },
      {
          "@context": "https://schema.org",
          "@type":"SiteNavigationElement",
          "@id":"#header",
          "name": "FAQ",
          "url": "https://custom-arts.fr/faq.php"
      },
      {
          "@context": "https://schema.org",
          "@type":"SiteNavigationElement",
          "@id":"#header",
          "name": "Contact",
          "url": "https://custom-arts.fr/contact.php"
      }
  ]
}
</script>
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Organization",
  "name": "Custom Arts",
  "url": "https://custom-arts.fr/",
  "logo": "https://custom-arts.fr/img/logoo.png",
  "email": "contact@custom-arts.fr"
}
</script>

<script type="text/javascript">

  $(document).ready(function(){

  $('body').scroll(function() {

      if ($('header').offset().top < -81) {
          $('#search').css({'opacity' : '100'});
      } else {
        $('#search').css({'opacity' : '0'});
      }

  });



    $('#menu, #search').click(function(){


      $('#search').css({right: - $('#header').width()});
      $('#header').animate({left: '0px'}, 450);
      $('body').css('overflow', 'hidden'); 
      $('.grand_container_upload').show();
    
    });


    $('#remove').click(function(){
    	$('#search').css({right: '3%'});
    	$('.grand_container_upload').hide();
    	$('html, body').css('overflow', 'initial'); 
        $('#header').animate({left: '-400px'}, 450);

    });


    $('#panier').click(function(){

      $('.grand_container_upload').show();
      $('html, body').css('overflow', 'hidden'); 
      $('#view-cart').animate({right: 0}, 450);

    });

    $('#fermer, .grand_container_upload, .grand_container_upload').click(function(){
      $('#search').css({right: '3%'});
      $('#header').animate({left: '-400px'}, 450);
      $('html, body').css('overflow', 'initial'); 
      $('.grand_container_upload').hide();
      $('#view-cart').animate({right: -400}, 450);

    });



  });


</script>

<div id="preheader">
  
  <ul>
    <section>


    </section>

    <section style="padding-right: 5px;">
      <li><a target="_blank" href="https://www.facebook.com/Custom-Arts-FR-102456098291646"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24"><path d="M15.12 5.32H17V2.14A26.11 26.11 0 0 0 14.26 2c-2.72 0-4.58 1.66-4.58 4.7v2.62H6.61v3.56h3.07V22h3.68v-9.12h3.06l.46-3.56h-3.52V7.05c0-1.05.28-1.73 1.76-1.73z" fill="#FFFFFF"/><rect x="0" y="0" width="24" height="24" fill="rgba(0, 0, 0, 0)" /></svg></a></li>
      <li><a target="_blank" href="https://www.instagram.com/customarts_fr/"><svg style="position: relative;top: 3px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M17.34 5.46a1.2 1.2 0 1 0 1.2 1.2a1.2 1.2 0 0 0-1.2-1.2zm4.6 2.42a7.59 7.59 0 0 0-.46-2.43a4.94 4.94 0 0 0-1.16-1.77a4.7 4.7 0 0 0-1.77-1.15a7.3 7.3 0 0 0-2.43-.47C15.06 2 14.72 2 12 2s-3.06 0-4.12.06a7.3 7.3 0 0 0-2.43.47a4.78 4.78 0 0 0-1.77 1.15a4.7 4.7 0 0 0-1.15 1.77a7.3 7.3 0 0 0-.47 2.43C2 8.94 2 9.28 2 12s0 3.06.06 4.12a7.3 7.3 0 0 0 .47 2.43a4.7 4.7 0 0 0 1.15 1.77a4.78 4.78 0 0 0 1.77 1.15a7.3 7.3 0 0 0 2.43.47C8.94 22 9.28 22 12 22s3.06 0 4.12-.06a7.3 7.3 0 0 0 2.43-.47a4.7 4.7 0 0 0 1.77-1.15a4.85 4.85 0 0 0 1.16-1.77a7.59 7.59 0 0 0 .46-2.43c0-1.06.06-1.4.06-4.12s0-3.06-.06-4.12zM20.14 16a5.61 5.61 0 0 1-.34 1.86a3.06 3.06 0 0 1-.75 1.15a3.19 3.19 0 0 1-1.15.75a5.61 5.61 0 0 1-1.86.34c-1 .05-1.37.06-4 .06s-3 0-4-.06a5.73 5.73 0 0 1-1.94-.3a3.27 3.27 0 0 1-1.1-.75a3 3 0 0 1-.74-1.15a5.54 5.54 0 0 1-.4-1.9c0-1-.06-1.37-.06-4s0-3 .06-4a5.54 5.54 0 0 1 .35-1.9A3 3 0 0 1 5 5a3.14 3.14 0 0 1 1.1-.8A5.73 5.73 0 0 1 8 3.86c1 0 1.37-.06 4-.06s3 0 4 .06a5.61 5.61 0 0 1 1.86.34a3.06 3.06 0 0 1 1.19.8a3.06 3.06 0 0 1 .75 1.1a5.61 5.61 0 0 1 .34 1.9c.05 1 .06 1.37.06 4s-.01 3-.06 4zM12 6.87A5.13 5.13 0 1 0 17.14 12A5.12 5.12 0 0 0 12 6.87zm0 8.46A3.33 3.33 0 1 1 15.33 12A3.33 3.33 0 0 1 12 15.33z" fill="#FFFFFF"/><rect x="0" y="0" width="24" height="24" fill="rgba(0, 0, 0, 0)" /></svg></a></li>
    </section>
  </ul>

</div>

<header>

  <ul>
    <li style="position: relative;top: 5px;"><a href="./index.php"><img alt="Logo CustomArts" src="../img/5.png" srcset="../img/logoo.png 2x"></a></li>
    <section>
      <li style="position: relative;" id="menu"><svg class="zds-icon RC794g X9n9TI DlJ4rT pVrzNP H3jvU7" height="1em" width="1em" focusable="false" fill="currentColor" viewbox="0 0 24 24" aria-hidden="false" aria-labelledby="menu-fsq7z" role="img"><title id="menu-fsq7z">Menu</title><path d="M.75 2.25h22.5a.75.75 0 000-1.5H.75a.75.75 0 000 1.5zM23.25 21.75H.75a.75.75 0 000 1.5h22.5a.75.75 0 000-1.5zM.75 12.75h12a.75.75 0 000-1.5h-12a.75.75 0 000 1.5z"></path></svg></li>
      <li class="none"><a href="index.php">Accueil</a></li>
      <li class="none"><a href="catalogue.php?terme=&s=Rechercher">Catalogue</a></li>
      <li class="none"><a href="choix.php">Créer mon article</a></li>
      <li class="none"><a href="suivis-devis.php">Suivre mon devis</a></li>
      <li class="none"><a href="faq.php">Foire aux questions</a></li>
      <li id="panier"><a><svg class="zds-icon RC794g X9n9TI DlJ4rT pVrzNP H3jvU7" height="1em" width="1em" focusable="false" fill="currentColor" viewbox="0 0 24 24" aria-hidden="false" aria-labelledby="mon-panier-b4qhc" role="img"><title id="mon-panier-b4qhc">Mon panier</title><path d="M21.2 8.71a2.98 2.98 0 00-3-2.72h-.94v-.76a5.26 5.26 0 00-10.52 0V6H5.8A2.98 2.98 0 002.81 8.7L1.7 20.73V21a3 3 0 003 3l14.6-.03h.26a3 3 0 002.72-3.27l-1.1-11.99zM8.24 5.23a3.75 3.75 0 017.5 0V6h-7.5v-.76zM19.3 22.47l-14.6.03a1.5 1.5 0 01-1.49-1.63l1.1-12.02c.06-.77.7-1.37 1.48-1.36h.95v2.25a.75.75 0 001.5 0V7.49h7.51v2.25a.75.75 0 101.5 0V7.49h.96c.77 0 1.42.59 1.49 1.36l1.09 12v.12c0 .83-.66 1.5-1.49 1.5z"></path></svg></a></li>
    </section>
  </ul>
         <form id="search_form" style="position: absolute; right: 3.5%; margin-top: 10px;" action = "catalogue.php" method = "get">
	         <input id="searcher" placeholder="Rechercher" name = "terme">
	         <button style="background: transparent; position: absolute; left: -27px; margin-top: -7px;" type="submit" id="recherche" name="s" value="Rechercher"><span class="iconify" data-icon="ei:search" data-inline="false"></span></button>
        </form>


</header>

<nav id="header">
	
  <ul>
    <li style="display: none;" id="remove"><span class="iconify" data-icon="ic:outline-remove" data-inline="false"></span></li>
        <li><a class="active_menu"  href="/index.php">Acceuil</a></li>
        <li><a class="" href="/catalogue.php">Catalogue</a></li>
        <li><a href="/choix.php" class="">Créer mon article</a></li>
        <li><a class="" href="/contact.php">Nous contacter</a></li>
        <li><a class="" href="/suivis-devis.php">Suivre mon devis</a></li>
        <li><a class="" href="/faq.php">Foire aux questions</a></li>
        <li class="sous-li"><a href="catalogue.php">Vêtements</a></li>
        <li class="sous-li"><a href="catalogue.php">Baskets</a></li>
        <li class="sous-li"><a href="catalogue.php">Cartables <span style="color: #d01a1a;">(Bientôt disponible)</span></a></li>        
        <form style="margin-top: 20px; overflow: hidden;  margin-bottom: 50px;" action = "catalogue.php" method = "get">
         <input id="searcher" placeholder="Rechercher" name = "terme">
         <button type="submit" id="recherche" name="s" value="Rechercher"><span class="iconify" data-icon="ei:search" data-inline="false"></span></button>
        </form>
  </ul>


</nav>


<button id="search"><svg style="font-size: 24px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em"><g fill="none"><path d="M2 5.995c0-.55.446-.995.995-.995h8.01a.995.995 0 0 1 0 1.99h-8.01A.995.995 0 0 1 2 5.995z" fill="#000000"/><path d="M2 12c0-.55.446-.995.995-.995h18.01a.995.995 0 1 1 0 1.99H2.995A.995.995 0 0 1 2 12z" fill="#000000"/><path d="M2.995 17.01a.995.995 0 0 0 0 1.99h12.01a.995.995 0 0 0 0-1.99H2.995z" fill="#000000"/></g><rect x="0" y="0" width="24" height="24" fill="rgba(0, 0, 0, 0)" /></svg></button>

<div class="grand_container_upload"></div><div class="cart-view-table-front" id="view-cart"><span class="panier" >PANIER</<span><div id="fermer"><span id="hide" style="right: 20px !important;top: 30px; font-size: 30px !important;color: #333333 !important;position: absolute !important;" class="iconify" data-icon="ic:round-minus" data-inline="false"></span></div><span style="font-size: 17px;font-family: Quicksand;">Votre panier est vide</span></div>
<style type="text/css">
	header {
    background: transparent !important;
	}
	@media only screen and (max-device-width: 480px) {
	body {
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}
}
</style>

<body xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" xmlns:fb="">

<div id="video" style="width: 100%;height: 100%; position: relative; top: -112px;">
<video style="object-fit: cover;width: 100%;height: calc(100% + 53px); transform: rotate(180deg);"  id="vidz" src="" loop="" muted="" playsinline="" autoplay=""></video>

<center style="position: absolute;z-index: 50;transform: translate(-50%, -50%);left: 50%;bottom: 0%; width: 98%;" id="responsive">
<h1 style="font-family: 'Cinzel', serif; font-weight: bold;margin-block-end: -15px;">L'AGE D'OR DE LA CUSTOMISATION</h1>
<h2 style="font-family: 'Caveat', cursive;font-weight:100;font-size: 15px;margin: 17px;">LAISSEZ VOTRE IMAGINATION VOUS EMPORTER</h2>
<h3><a href="choix.php"><button style="cursor: pointer;" id="catalogue">Créer mon article</button></a></h3>
</center>

</div>

<script type="text/javascript" src="./js/preloader.js"></script>




<div id="container_articles">
	<div id="contenu_petit_article">	
		<div class="articles">
			<span class="pre_title">Chaussures</span>
			<div class="image_contenu" id="box_vetements">
				<img alt="Air force one , stan smith customisées" name="Presentation des baskets customisées" style="width: 100%;" src="./images/image/box/box-1400.jpg" srcset="./images/image/box/box-1200.jpg 1200w, ./images/image/box/box-1400.jpg 1400w" sizes="40vw">
			<div id="responsive_img_contenu">
				<center class="text_box_vetements">
					<h1><span>SNEAKERS</span><br>PERSONALISÉES</h1>
					<a href="./catalogue.php?terme=af1&s=Rechercher"><button style="padding: 10px 21px;font-size: 9px;"><h2>AIRFORCE ONE</h2></button></a>
					<a href="./catalogue.php?terme=adidas&s=Rechercher"><button style="padding: 10px 21px;font-size: 9px;"><h2>STAN SMITH</h2></button></a>
				</center>
			</div>
			</div>
		</div>
		<div class="articles">
			<span class="pre_title">Vetements</span>
				<div class="image_contenu">					
					<img alt="Vetements customisées" style="width: 100%;" src="./images/image/sweat/sweat-1400.jpg" srcset="./images/image/sweat/sweat-400.jpg 400w, ./images/image/sweat/sweat-1200.jpg 800w, ./images/image/sweat/sweat-1200.jpg 1200w, ./images/image/sweat/sweat-1400.jpg 1400w, ./images/image/sweat/sweat-1800.jpg 1800w" sizes="40vw">
					<div class="container-vetements-txt" style="background: #f4f4f6;">
					<div class="vetements-txt">
						<span style="font-family: hm;">NOUVEAUTES POUR 2021</span>
						<h1 style="font-family: Cinzel">VETEMENTS CUSTOM</h1>
						<p>Retrouvez toute sorte de vêtements: t-shirt, sweat, Vestes...<br>Pour tout le monde et pour tout les goûts.</p>
						<a href="./catalogue.php?terme=vetements&s=Rechercher"><button>D&Eacute;COUVRIR</button></a>
					</div>
					</div>
				</div>
		</div>
	</div>

</div>


  </div>




<div id="customisation">

	<div class="custom-left">
		<div class="container_text_custom">
			<p> <b> L'indivitualité !</b> c'est ce que custom arts reflète. Vous êtes unique et votre tenue doit l'être également avec notre outils de customisation en ligne, laissez parler votre imagination et créez votre paire de rêve.</p>
			<h2>Envoyez nous<br>votre article<br></h2>
			<p>Arrivée au panier, vous avez le choix entre nous envoyer votre basket / veste et payer uniquement la prestation de la customisation, ou d'acheter l'article ainsi que la customisation directement chez nous !</p>
			<br>
			<a style="text-transform: uppercase;" href="/catalogue.php?terme=one+piece&s=Rechercher">Découvrir</a>
		</div>
	</div>
	<div class="custom-right">
	</div>

</div>


<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>

<div id="debut" class="swiper-container">
    <div class="swiper-wrapper">



      <div style="width: auto;" id="swiper-slidez" class="swiper-slide">
        <a style="text-decoration: none; color: black;" href="pp.php?id=95">    
        <div  class="image" id="image">
    


    <div class="desc" id="desc1"></div>
    <img alt="AF1 Gratte Ciel" alt_img="./images/immeuble/4.jpg" src="/images/immeuble/index_2.jpg">

  </div>

  <div class="tt" style="text-align: center;width: 80%;margin: auto; text-align: center;">
  <span style="font-family: 'Cinzel', serif;font-weight: bold;font-size: 28px;margin-top: 27px;display: block;">AF1 Gratte Ciel</span>
  <p style="font-family: 'Bitter', serif;">190€ ou 75€</p>
  </div>

  </a>

      </div>
    






      <div style="width: auto;" id="swiper-slidez" class="swiper-slide">
        <a style="text-decoration: none; color: black;" href="pp.php?id=135">    
        <div  class="image" id="image">
    


    <div class="desc" id="desc1"></div>
    <img alt="AF1 Onizuka" alt_img="./images/onizuka/4.jpg" src="/images/onizuka/index_2.jpg">

  </div>

  <div class="tt" style="text-align: center;width: 80%;margin: auto; text-align: center;">
  <span style="font-family: 'Cinzel', serif;font-weight: bold;font-size: 28px;margin-top: 27px;display: block;">AF1 Onizuka</span>
  <p style="font-family: 'Bitter', serif;">200€ ou 75€</p>
  </div>

  </a>

      </div>
    






      <div style="width: auto;" id="swiper-slidez" class="swiper-slide">
        <a style="text-decoration: none; color: black;" href="pp.php?id=88">    
        <div  class="image" id="image">
    


    <div class="desc" id="desc1"></div>
    <img alt="AF1 Rick &amp; Morty" alt_img="./images/rick-morty/4.jpg" src="/images/rick-morty/index_2.jpg">

  </div>

  <div class="tt" style="text-align: center;width: 80%;margin: auto; text-align: center;">
  <span style="font-family: 'Cinzel', serif;font-weight: bold;font-size: 28px;margin-top: 27px;display: block;">AF1 Rick &amp; Morty</span>
  <p style="font-family: 'Bitter', serif;">200€ ou 80€</p>
  </div>

  </a>

      </div>
    






      <div style="width: auto;" id="swiper-slidez" class="swiper-slide">
        <a style="text-decoration: none; color: black;" href="pp.php?id=110">    
        <div  class="image" id="image">
    


    <div class="desc" id="desc1"></div>
    <img alt="AF1 Flat" alt_img="./images/color/4.jpg" src="/images/color/index_2.jpg">

  </div>

  <div class="tt" style="text-align: center;width: 80%;margin: auto; text-align: center;">
  <span style="font-family: 'Cinzel', serif;font-weight: bold;font-size: 28px;margin-top: 27px;display: block;">AF1 Flat</span>
  <p style="font-family: 'Bitter', serif;">400.30€ ou 50€</p>
  </div>

  </a>

      </div>
    






      <div style="width: auto;" id="swiper-slidez" class="swiper-slide">
        <a style="text-decoration: none; color: black;" href="pp.php?id=25020">    
        <div  class="image" id="image">
    


    <div class="desc" id="desc1"></div>
    <img alt="AF1 Koro Sensei" alt_img="./images/korosensei/3.jpg" src="/images/korosensei/index_2.jpg">

  </div>

  <div class="tt" style="text-align: center;width: 80%;margin: auto; text-align: center;">
  <span style="font-family: 'Cinzel', serif;font-weight: bold;font-size: 28px;margin-top: 27px;display: block;">AF1 Koro Sensei</span>
  <p style="font-family: 'Bitter', serif;">180€ ou 65€</p>
  </div>

  </a>

      </div>
    






      <div style="width: auto;" id="swiper-slidez" class="swiper-slide">
        <a style="text-decoration: none; color: black;" href="pp.php?id=93">    
        <div  class="image" id="image">
    


    <div class="desc" id="desc1"></div>
    <img alt="AF1 Luis Vuitton" alt_img="./images/louisV/4.jpg" src="/images/louisV/index_2.jpg">

  </div>

  <div class="tt" style="text-align: center;width: 80%;margin: auto; text-align: center;">
  <span style="font-family: 'Cinzel', serif;font-weight: bold;font-size: 28px;margin-top: 27px;display: block;">AF1 Luis Vuitton</span>
  <p style="font-family: 'Bitter', serif;">400.30€ ou 50€</p>
  </div>

  </a>

      </div>
    






      <div style="width: auto;" id="swiper-slidez" class="swiper-slide">
        <a style="text-decoration: none; color: black;" href="pp.php?id=86">    
        <div  class="image" id="image">
    


    <div class="desc" id="desc1"></div>
    <img alt="AF1 BTS" alt_img="./images/bts/4.jpg" src="/images/bts/index_2.jpg">

  </div>

  <div class="tt" style="text-align: center;width: 80%;margin: auto; text-align: center;">
  <span style="font-family: 'Cinzel', serif;font-weight: bold;font-size: 28px;margin-top: 27px;display: block;">AF1 BTS</span>
  <p style="font-family: 'Bitter', serif;">200€ ou 85€</p>
  </div>

  </a>

      </div>
    




 </div>
     <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>

    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->

  </div>



<div class="custom-middle" id="customisation">

  <div id="left-left" class="custom-left">
		<div id="container_text_custom" class="container_text_custom">
			<p>Découvrez nos air forces one customisées avec les marques les plus populaires tel que <b>Gucci</b>, <b>Burberry</b>, <b>Luis Vuitton</b>...</p>
			<h2 id="text_burberry" style="text-align: center;    line-height: 79px;">CUSTOM ARTS <br> X <br>BURBERRY</h2>
			<p>#CUSTOM ARTS DESIGN</p><br>
			<a style="text-transform: uppercase;" href="/catalogue.php?terme=one+piece&s=Rechercher">Découvrir</a>
		</div>
	</div>
	<div id="custom-right"  class="custom-right">
	</div>

</div>

<div id="middle" class="swiper-container">
    <div id="swiper_veste" class="swiper-wrapper">



      <div style="width: auto;" class="swiper-slide">
        <a style="text-decoration: none; color: black;" href="pp.php?id=25044">    
        <div  class="image image-vestes" id="image">
    


    <div class="desc" id="desc1"></div>
    <img alt="Veste Berserk" alt_img="/images/berserk/berserk-1.jpg" src="/images/barserk/berserk-2.jpg">

  </div>

  <div class="tt" style="text-align: center;width: 80%;margin: auto; text-align: center;">
  <span style="font-family: 'Cinzel', serif;font-weight: bold;font-size: 28px;margin-top: 27px;display: block;">Veste Berserk</span>
  <p style="font-family: 'Bitter', serif;">200.00€ ou 85€</p>
  </div>

  </a>

      </div>
    






      <div style="width: auto;" class="swiper-slide">
        <a style="text-decoration: none; color: black;" href="pp.php?id=25037">    
        <div  class="image image-vestes" id="image">
    


    <div class="desc" id="desc1"></div>
    <img alt="Veste Goku" alt_img="./images/vestes/goku_manga/2.jpg" src="./images/vestes/goku_manga/1.jpg">

  </div>

  <div class="tt" style="text-align: center;width: 80%;margin: auto; text-align: center;">
  <span style="font-family: 'Cinzel', serif;font-weight: bold;font-size: 28px;margin-top: 27px;display: block;">Veste Goku</span>
  <p style="font-family: 'Bitter', serif;">120€ ou 90€</p>
  </div>

  </a>

      </div>
    






      <div style="width: auto;" class="swiper-slide">
        <a style="text-decoration: none; color: black;" href="pp.php?id=25041">    
        <div  class="image image-vestes" id="image">
    


    <div class="desc" id="desc1"></div>
    <img alt="Veste Naruto" alt_img="/images/obito-kakashi-lin/kakashi-obito-lin-2.jpg" src="/images/obito-kakashi-lin/kakashi-obito-lin-1.jpg">

  </div>

  <div class="tt" style="text-align: center;width: 80%;margin: auto; text-align: center;">
  <span style="font-family: 'Cinzel', serif;font-weight: bold;font-size: 28px;margin-top: 27px;display: block;">Veste Naruto</span>
  <p style="font-family: 'Bitter', serif;">200.00€ ou 85€</p>
  </div>

  </a>

      </div>
    






      <div style="width: auto;" class="swiper-slide">
        <a style="text-decoration: none; color: black;" href="pp.php?id=25033">    
        <div  class="image image-vestes" id="image">
    


    <div class="desc" id="desc1"></div>
    <img alt="Veste Kanagawa" alt_img="./images/vestes/vague/2.jpg" src="./images/vestes/vague/1.jpg">

  </div>

  <div class="tt" style="text-align: center;width: 80%;margin: auto; text-align: center;">
  <span style="font-family: 'Cinzel', serif;font-weight: bold;font-size: 28px;margin-top: 27px;display: block;">Veste Kanagawa</span>
  <p style="font-family: 'Bitter', serif;">130€ ou 100€</p>
  </div>

  </a>

      </div>
    






      <div style="width: auto;" class="swiper-slide">
        <a style="text-decoration: none; color: black;" href="pp.php?id=25042">    
        <div  class="image image-vestes" id="image">
    


    <div class="desc" id="desc1"></div>
    <img alt="Veste Aokiji" alt_img="/images/kuzan-aokiji/aokiji-kuzan-2.jpg" src="/images/kuzan-aokiji/aokiji-kuzan-1.jpg">

  </div>

  <div class="tt" style="text-align: center;width: 80%;margin: auto; text-align: center;">
  <span style="font-family: 'Cinzel', serif;font-weight: bold;font-size: 28px;margin-top: 27px;display: block;">Veste Aokiji</span>
  <p style="font-family: 'Bitter', serif;">200.00€ ou 85€</p>
  </div>

  </a>

      </div>
    






      <div style="width: auto;" class="swiper-slide">
        <a style="text-decoration: none; color: black;" href="pp.php?id=25045">    
        <div  class="image image-vestes" id="image">
    


    <div class="desc" id="desc1"></div>
    <img alt="Veste Naruto" alt_img="/images/lee-naruto/lee-naruto.jpg" src="/images/lee-naruto/lee-naruto2.jpg">

  </div>

  <div class="tt" style="text-align: center;width: 80%;margin: auto; text-align: center;">
  <span style="font-family: 'Cinzel', serif;font-weight: bold;font-size: 28px;margin-top: 27px;display: block;">Veste Naruto</span>
  <p style="font-family: 'Bitter', serif;">200.00€ ou 85€</p>
  </div>

  </a>

      </div>
    






      <div style="width: auto;" class="swiper-slide">
        <a style="text-decoration: none; color: black;" href="pp.php?id=25028">    
        <div  class="image image-vestes" id="image">
    


    <div class="desc" id="desc1"></div>
    <img alt="Veste Sangoku" alt_img="./images/vestes/goku/2.jpg" src="./images/vestes/goku/1.jpg">

  </div>

  <div class="tt" style="text-align: center;width: 80%;margin: auto; text-align: center;">
  <span style="font-family: 'Cinzel', serif;font-weight: bold;font-size: 28px;margin-top: 27px;display: block;">Veste Sangoku</span>
  <p style="font-family: 'Bitter', serif;">130€ ou 100€</p>
  </div>

  </a>

      </div>
    




 </div>

    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->

  </div>





	<div  id="separator">

    <section>
			<span style="font-size: 32px;white-space: pre-wrap;line-height: 47px;" id="blackk">UNE EQUIPE A VOTRE DISPOSITION</span>
      <div class="display_none" style="width: 250px;height: 2px; background: black;margin: 20px 0px;"></div>
      <p>Chaque customisation nécessite plusieurs étapes de production avant d’arriver au résultat final. Notre équipe s'engage à vous envoyer des photo de l'avancement de votre customisation par e-mail ou reseaux sociaux. </p>
			<a id="button_offre" style="padding: 17px 44px !important; line-height: 78px;" href="./catalogue.php?terme=&s=Rechercher">En savoir +</a>
    </section>

 	 </div>



<div id="three_carre">
<div class="threee_carre">

	<div id="first_carre" class="threeee_carre">
	<a href="./custom/vetements.php?choix=veste_bleu">
	<div class="three_carre">
		<img id="veste" alt="veste à customiser" src="./custom/img/veste.png">
	</div>
	</a>
	 <div style="text-align: center;width: 100%;margin: auto; text-align: center;">
		  <span style="font-family: 'Cinzel', serif;font-weight: bold;font-size: 30px;margin-top: 34px;display: block;white-space: nowrap;">VESTE EN JEAN</span>
		  <p style="font-family: 'Bitter', serif;margin-top: 10px;">à partire de 60€ ou 30€</p>
  	</div>

	</div>

  <div id="middle_carre" class="threeee_carre">
  <a href="./custom/chaussures.php?choix=airforce_one">
  <div class="three_carre">
    <img alt="air force one à customiser" src="./custom/img/af1.jpg">
  </div>
  </a>
   <div style="text-align: center;width: 100%;margin: auto; text-align: center;">
      <span style="font-family: 'Cinzel', serif;font-weight: bold;font-size: 30px;margin-top: 34px;display: block;white-space: nowrap;">AIR FORCE ONE</span>
      <p style="font-family: 'Bitter', serif;margin-top: 10px;">à partire de 60€ ou 30€</p>
    </div>

  </div>


  <div class="threeee_carre">
  <a href="./custom/chaussures.php?choix=stan_smith">
  <div class="three_carre">
    <img alt="stan smith à customiser" src="./custom/img/stan.jpg">
  </div>
  </a>
   <div style="text-align: center;width: 100%;margin: auto; text-align: center;">
      <span style="font-family: 'Cinzel', serif;font-weight: bold;font-size: 30px;margin-top: 34px;display: block;white-space: nowrap;">STAN SMITH</span>
      <p style="font-family: 'Bitter', serif;margin-top: 10px;">à partire de 60€ ou 30€</p>
    </div>

  </div>


</div>

</div>

<div id="prefooter">
<a href="./pp.php?id=25007" style="font-family: Cinzel; position: absolute; bottom: 31px;right: 40px;font-weight: bold;color: black;">#Veste Onizuka</a>
<div class="display" style="background: black; opacity: 0.7; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;display: none;"></div>


	<div class="txt">
    <img class="beauty" style="max-width: 32px;margin: auto;display: none;" src="./images/quote-marks.png">
		<h2 style="font-family: 'Cinzel', serif;">CUSTOMISEZ VOS VETEMENTS</h2>
		<p>Nous proposons un large choix d'articles à customiser, du bas jusqu'en haut: casquette , t-shirt, sweat, chaussures et bientot des objets.<br><br>Toutes les customisations sont soigneusement réalisés par notre équipe à la main, pour une protection integral nous appliquons différents peintures en fonction de la matière afin de résister dans le temps. </p>
		<a href="./choix.php"><button id="button_offre" style="margin-bottom: 35px;margin-top: 15px;">Customiser</button></a>
	</div>
	<div id="footer_bottom" style="position: relative;">
		<img alt="Manequin sweat roi lion" id="img_footer_one" class="image_footer" src="./images/vestes/onizuka/test.jpg"> 
		<center id="text_center" style="z-index: 50;position: absolute;top: 46%; left: 50%; transform: translate(-50% , -50%); text-transform: uppercase;">
			<h3 style="font-family: 'Cinzel';color: white;font-size: 52px;">CUSTOMISER <br>MA VESTE</h3>

			<a href="/catalogue.php?terme=vestes&s=Rechercher">Découvrir</a>

		</center>
	</div>

</div>



<div id="last" class="swiper-container">
    <div class="swiper-wrapper">



    
      <div style="width: auto;" id="swiper-slidez" class="swiper-slide">
        <a style="text-decoration: none; color: black;" href="pp.php?id=101">    
        <div  class="image" id="image">
    


    <div class="desc" id="desc1"></div>
    <img alt="AF1 Espace" alt_img="./images/dodo/4.jpg" src="/images/dodo/index_2.jpg">

  </div>

  <div class="tt" style="text-align: center;width: 80%;margin: auto; text-align: center;">
  <span style="font-family: 'Cinzel', serif;font-weight: bold;font-size: 28px;margin-top: 27px;display: block;">AF1 Espace</span>
  <p style="font-family: 'Bitter', serif;">190€ ou 75€</p>
  </div>

  </a>

      </div>
    






    
      <div style="width: auto;" id="swiper-slidez" class="swiper-slide">
        <a style="text-decoration: none; color: black;" href="pp.php?id=25025">    
        <div  class="image" id="image">
    


    <div class="desc" id="desc1"></div>
    <img alt="AF1 Shigeo Kageyama" alt_img="./images/Shigeo-Kageyama/3.jpg" src="/images/Shigeo-Kageyama/index_2.jpg">

  </div>

  <div class="tt" style="text-align: center;width: 80%;margin: auto; text-align: center;">
  <span style="font-family: 'Cinzel', serif;font-weight: bold;font-size: 28px;margin-top: 27px;display: block;">AF1 Shigeo Kageyama</span>
  <p style="font-family: 'Bitter', serif;">190€ ou 75€</p>
  </div>

  </a>

      </div>
    






    
      <div style="width: auto;" id="swiper-slidez" class="swiper-slide">
        <a style="text-decoration: none; color: black;" href="pp.php?id=119">    
        <div  class="image" id="image">
    


    <div class="desc" id="desc1"></div>
    <img alt="AF1 Vegeta" alt_img="./images/majin/4.jpg" src="/images/majin/index_2.jpg">

  </div>

  <div class="tt" style="text-align: center;width: 80%;margin: auto; text-align: center;">
  <span style="font-family: 'Cinzel', serif;font-weight: bold;font-size: 28px;margin-top: 27px;display: block;">AF1 Vegeta</span>
  <p style="font-family: 'Bitter', serif;">205€ ou 85€</p>
  </div>

  </a>

      </div>
    






    
      <div style="width: auto;" id="swiper-slidez" class="swiper-slide">
        <a style="text-decoration: none; color: black;" href="pp.php?id=110">    
        <div  class="image" id="image">
    


    <div class="desc" id="desc1"></div>
    <img alt="AF1 Flat" alt_img="./images/color/4.jpg" src="/images/color/index_2.jpg">

  </div>

  <div class="tt" style="text-align: center;width: 80%;margin: auto; text-align: center;">
  <span style="font-family: 'Cinzel', serif;font-weight: bold;font-size: 28px;margin-top: 27px;display: block;">AF1 Flat</span>
  <p style="font-family: 'Bitter', serif;">400.30€ ou 50€</p>
  </div>

  </a>

      </div>
    






    
      <div style="width: auto;" id="swiper-slidez" class="swiper-slide">
        <a style="text-decoration: none; color: black;" href="pp.php?id=84">    
        <div  class="image" id="image">
    


    <div class="desc" id="desc1"></div>
    <img alt="AF1 Couché Soleil" alt_img="./images/la9la9/4.jpg" src="/images/la9la9/index_2.jpg">

  </div>

  <div class="tt" style="text-align: center;width: 80%;margin: auto; text-align: center;">
  <span style="font-family: 'Cinzel', serif;font-weight: bold;font-size: 28px;margin-top: 27px;display: block;">AF1 Couché Soleil</span>
  <p style="font-family: 'Bitter', serif;">200€ ou 85€</p>
  </div>

  </a>

      </div>
    






    
      <div style="width: auto;" id="swiper-slidez" class="swiper-slide">
        <a style="text-decoration: none; color: black;" href="pp.php?id=25022">    
        <div  class="image" id="image">
    


    <div class="desc" id="desc1"></div>
    <img alt="AF1 Senko" alt_img="./images/stone_black_white/3.jpg" src="/images/stone_black_white/index_2.jpg">

  </div>

  <div class="tt" style="text-align: center;width: 80%;margin: auto; text-align: center;">
  <span style="font-family: 'Cinzel', serif;font-weight: bold;font-size: 28px;margin-top: 27px;display: block;">AF1 Senko</span>
  <p style="font-family: 'Bitter', serif;">190€ ou 75€</p>
  </div>

  </a>

      </div>
    






    
      <div style="width: auto;" id="swiper-slidez" class="swiper-slide">
        <a style="text-decoration: none; color: black;" href="pp.php?id=135">    
        <div  class="image" id="image">
    


    <div class="desc" id="desc1"></div>
    <img alt="AF1 Onizuka" alt_img="./images/onizuka/4.jpg" src="/images/onizuka/index_2.jpg">

  </div>

  <div class="tt" style="text-align: center;width: 80%;margin: auto; text-align: center;">
  <span style="font-family: 'Cinzel', serif;font-weight: bold;font-size: 28px;margin-top: 27px;display: block;">AF1 Onizuka</span>
  <p style="font-family: 'Bitter', serif;">200€ ou 75€</p>
  </div>

  </a>

      </div>
    




 </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->

  </div>



     <script type="text/javascript">
const titre = document.querySelector('h1');
const media1 = window.matchMedia("(max-width:1000px)");
const media2 = window.matchMedia("(min-width:1000px)");


 





  


    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 'auto',
      spaceBetween: 30,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });




    




   </script>




</body>

</html>

<style type="text/css">
	footer{


	}
	.span{

    top: -80px;

    position: relative;
	}

	.footer{
	font-family: Quicksand;
    font-weight: bold;
    font-size: 13px;
    color: #0d0d0d;
    position: relative;
    border-top: 2px solid #333333;

    width: 40%;
    transform: translate(-51%, 0px);
    margin-top: 200px;
    left: 50%;
	}

	.menu_footer_right a , .menu_footer_left a{
		color: black;
    	text-decoration: none;
	}


	.menu_footer_left{
		  position: absolute;    
		  z-index: 2;   
		  text-align: right; 
		  right: 0px; top: 0px; 
		  list-style-type: none;
	}
	.menu_footer_right{
  		z-index: 2;
  		padding: 0px; 
  		position: absolute; 
  		top: 0px;
  		list-style: none;
  		left: 0px;
	}
	.rezo{
		display: inline-flex;
	}
	.footer_logo{
		position: relative;
	    padding: 41px 50px;
	    background: white;
	    left: -4px;
	}
	.pmt{
		position: absolute; left: 0px; top: 143px; height: 60px;
	}
			.menu_footer_right > li{
			text-align: left;
		}
	@media screen and (max-width: 1504px){
		.footer{
			width: 60%;
		}
	}
	@media screen and  (max-width: 1015px){
		.footer{width: 70%;}
	}
	@media screen and (max-width: 700px){
		.pmt{
			height: 35px;
		}
	}

	@media screen and (max-width: 500px){
		.menu_footer_left{
			padding: 0px;
			text-align: center;
			width: 100%;
			right: initial;
			top: 120px;
		}
		.menu_footer_right{
			width: 100%;
			text-align: center;
			top: 32px;
		}


	}

	@media screen and (max-width: 350px){
		.menu_footer_right > li{
			text-align: center;
		}
		.pmt{
			    position: relative;
			    top: 0px;
		}
		.separator{
			display: none;
		}
	}
</style>

<footer style="padding-bottom: 20px; margin-bottom: 100px;">
	<div class="footer">

	<ul class="menu_footer_left">

		<a href="/contact.php"><li style="   width: auto; display: list-item; line-height: 30px;">Nous contacter</li></a>
		<a href="/faq.php"><li style="margin-bottom: 8px;">FAQ</li></a>
		<a href="https://www.facebook.com/CustomArtsFR"><li style="   width: auto;display: inline-flex; line-height: 30px;" class="rezo"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24"><path d="M15.12 5.32H17V2.14A26.11 26.11 0 0 0 14.26 2c-2.72 0-4.58 1.66-4.58 4.7v2.62H6.61v3.56h3.07V22h3.68v-9.12h3.06l.46-3.56h-3.52V7.05c0-1.05.28-1.73 1.76-1.73z" fill="black"/><rect x="0" y="0" width="24" height="24" fill="rgba(0, 0, 0, 0)" /></svg></li></a>
		<a href="https://www.instagram.com/customarts_fr/"><li style="   width: auto;display: inline-flex; line-height: 30px;" class="rezo"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24"><path d="M17.34 5.46a1.2 1.2 0 1 0 1.2 1.2a1.2 1.2 0 0 0-1.2-1.2zm4.6 2.42a7.59 7.59 0 0 0-.46-2.43a4.94 4.94 0 0 0-1.16-1.77a4.7 4.7 0 0 0-1.77-1.15a7.3 7.3 0 0 0-2.43-.47C15.06 2 14.72 2 12 2s-3.06 0-4.12.06a7.3 7.3 0 0 0-2.43.47a4.78 4.78 0 0 0-1.77 1.15a4.7 4.7 0 0 0-1.15 1.77a7.3 7.3 0 0 0-.47 2.43C2 8.94 2 9.28 2 12s0 3.06.06 4.12a7.3 7.3 0 0 0 .47 2.43a4.7 4.7 0 0 0 1.15 1.77a4.78 4.78 0 0 0 1.77 1.15a7.3 7.3 0 0 0 2.43.47C8.94 22 9.28 22 12 22s3.06 0 4.12-.06a7.3 7.3 0 0 0 2.43-.47a4.7 4.7 0 0 0 1.77-1.15a4.85 4.85 0 0 0 1.16-1.77a7.59 7.59 0 0 0 .46-2.43c0-1.06.06-1.4.06-4.12s0-3.06-.06-4.12zM20.14 16a5.61 5.61 0 0 1-.34 1.86a3.06 3.06 0 0 1-.75 1.15a3.19 3.19 0 0 1-1.15.75a5.61 5.61 0 0 1-1.86.34c-1 .05-1.37.06-4 .06s-3 0-4-.06a5.73 5.73 0 0 1-1.94-.3a3.27 3.27 0 0 1-1.1-.75a3 3 0 0 1-.74-1.15a5.54 5.54 0 0 1-.4-1.9c0-1-.06-1.37-.06-4s0-3 .06-4a5.54 5.54 0 0 1 .35-1.9A3 3 0 0 1 5 5a3.14 3.14 0 0 1 1.1-.8A5.73 5.73 0 0 1 8 3.86c1 0 1.37-.06 4-.06s3 0 4 .06a5.61 5.61 0 0 1 1.86.34a3.06 3.06 0 0 1 1.19.8a3.06 3.06 0 0 1 .75 1.1a5.61 5.61 0 0 1 .34 1.9c.05 1 .06 1.37.06 4s-.01 3-.06 4zM12 6.87A5.13 5.13 0 1 0 17.14 12A5.12 5.12 0 0 0 12 6.87zm0 8.46A3.33 3.33 0 1 1 15.33 12A3.33 3.33 0 0 1 12 15.33z" fill="black"/><rect x="0" y="0" width="24" height="24" fill="rgba(0, 0, 0, 0)" /></svg></li></a>
		<a href="#"><li style="   width: auto;display: inline-flex;  line-height: 30px;" class="rezo"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24"><path d="M22 5.8a8.49 8.49 0 0 1-2.36.64a4.13 4.13 0 0 0 1.81-2.27a8.21 8.21 0 0 1-2.61 1a4.1 4.1 0 0 0-7 3.74a11.64 11.64 0 0 1-8.45-4.29a4.16 4.16 0 0 0-.55 2.07a4.09 4.09 0 0 0 1.82 3.41a4.05 4.05 0 0 1-1.86-.51v.05a4.1 4.1 0 0 0 3.3 4a3.93 3.93 0 0 1-1.1.17a4.9 4.9 0 0 1-.77-.07a4.11 4.11 0 0 0 3.83 2.84A8.22 8.22 0 0 1 3 18.34a7.93 7.93 0 0 1-1-.06a11.57 11.57 0 0 0 6.29 1.85A11.59 11.59 0 0 0 20 8.45v-.53a8.43 8.43 0 0 0 2-2.12z" fill="black"/><rect x="0" y="0" width="24" height="24" fill="rgba(0, 0, 0, 0)" /></svg></li></a>
	</ul>


	<center><span class="span"><img class="footer_logo" alt="Logo CustomArts" src="../img/5.png" srcset="../img/logoo.png 2x"></span></center>

	<ul class="menu_footer_right">
		<a href="/mention-legal.php"><li style="   width: auto;display: list-item; line-height: 30px;">Mention legal</li></a>
		<a href="/condition-general-de-vente.php"><li style="   width: auto; display: list-item; line-height: 30px;">Condition de vente</li></a>
		<a href="/politique-confidentialite.php"><li style="   width: auto;display: list-item; line-height: 30px;">Politique de confidentialité</li></a>

	</ul>

	


	</div>

</footer>