/*--generique-- */
.hideMobile {display: none;}
html, body {
  overflow-x: hidden;
}

body {font-family: 'Nunito Sans', sans-serif;}
a {text-decoration: none !important;color: inherit !important;}
ul{list-style: none;padding-left: 0px !important;margin: unset;}
h1{margin-bottom: 0;}
p{margin-bottom: 0;}
h1, h2, p, span{color:#130103;}
.titre-h2 {font-size: 24px;font-weight: 800;margin-bottom:32px;text-align: center;}
@media (min-width:768px) {
    .titre-h2{font-size: 30px;}
}
.bloc-a-propos-de-nous, .engagements, .bloc-nos-marques{max-width: 1512px;margin: auto;}

html {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: 100px;
}

/*---------------------- header----------------------------------- */
header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}
/*---------------------- navbar----------------------------------- */
.navbar{
  position: absolute;
  width: 100%;
  background-color: #E4003C;
  height: 98px;
  border-radius: 0 0 32px 32px;
  color: #fff !important;;
  font-weight: 700;
  font-size: 16px;
  line-height: 130%;
}
.navbar > div{padding-left: 20px;}
.navbar-menu li a {
  display: block;      
  padding: 20px;  
  height: 100%;
  text-decoration: none;
}
@media screen and (min-width: 769px) {
  .hideMobile {
    display: block;
  }
  .navbar{
    display: flex;
    flex-direction: row;
    padding: 20px 40px;
    height: 117px;
  }
  .navbar-menu{
      display: flex;
      gap:80px;
  }
  .navbar-menu li a{padding:16px 8px;}
  .navbar-menu li:hover{color:#E4003C;background-color: #fff;border-radius: 4px;}
}


/*---------------------- Container-head----------------------------------- */
.head-container{position: relative;z-index: 1;margin: auto;margin-top: -77px;padding-top: 100px;min-height: 604px;max-width: 1913px;background-image: url('../src/vitrine/slider/crayon_m.webp');background-repeat: no-repeat;}
.head-container-mannequin-img {position: relative;overflow: hidden;min-height: 368px;background-color: #fff;}
.head-container-mannequin-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  background-image: var(--mannequin-m);
  transform: translateX(100%);
  animation: mannequinSlideIn 1.2s ease-out forwards;
}
.mannequin-fallback img{
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  object-position: right center;
  display: block;
  position: absolute;
  right: 0px;
}
.head-container-content{display: flex;flex-direction: column;gap: 16px; padding:10px 20px 24px;margin:auto;}
.hero-content {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 1s ease-out forwards; 
}
.hero-content h1 {
  opacity: 0; 
  transform: translateY(40px);
  animation: fadeUp 1s ease-out forwards; 
}
.hero-content p {
  opacity: 0; 
  transform: translateY(40px); 
  animation: fadeUp 1s ease-out forwards;
  animation-delay: 0.2s; 
}
.head-container h1{text-align:center;font-size:24px;font-weight: 400;line-height: 130%;}
.head-container h1 span{display:block;font-weight: 900;}
.titre-crayon{background-image:url("../src/vitrine/slider/crayon_m.webp");background-size: 159px;background-repeat: no-repeat;background-position: 51% 16%;padding: 8px 0px 16px;}
.head-container p {text-align: center;}
.head-container ul{display: flex;justify-content:center;gap:8px;}
.head-container li{background-color: white;min-width: 96px;box-shadow: 0 2px 8px 0 rgba(19, 1, 3, 0.16);border-radius:4px;transition:box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);}
.head-container li:hover ,.head-container li:focus-visible  { transform: translateY(-2px);box-shadow: 0 12px 32px rgba(0, 0, 0, 0.09);}
.head-container .icon{display: block;width: 100%;height: 45px;background-repeat: no-repeat;background-size: contain;background-position: center;}
.brand-card{display: block;padding: 16px;width: 100%;height: 100%;}
.head-container .head-helline-brand{background-image:url("../src/vitrine/slider/logo_helline.webp");}
.head-container .head-witt-brand{background-image:url("../src/vitrine/slider/logo_witt.webp");}
.head-container .head-moda-brand{background-image:url("../src/vitrine/slider/logo_modavilona.webp");}

@media screen and (min-width: 768px) {
.head-container{display: flex;flex-direction: row-reverse;}
.head-container .head-container-mannequin-img{margin-bottom: 0;}
.head-container-mannequin-img::before {background-image: var(--mannequin-t);}
.head-container > div{width:50%;}
.head-container-content{gap:40px;margin: 132px auto 55px;}
.head-container h1{font-size:56px;margin:0 auto;width:89%;}
.titre-crayon{background-image:url("../src/vitrine/slider/crayon_d.webp");background-size: 203px;}
.head-container p {width: 83%;margin:0 auto;}
}
@media screen and (min-width: 768px) and (max-width:1023px) {
  .head-container h1{font-size: 32px;}
  .head-container p {width:101%;}
  .head-container-content {margin-top:133px;}
}
@media (min-width:1024px) {
  .head-container h1 {font-size: 47px;}
  .titre-crayon{background-size: 357px;padding: 16px 0px 24px;}
  .head-container .head-container-mannequin-img{background-size: cover;background-position: unset;}
  .head-container-mannequin-img::before {background-image: var(--mannequin-d);background-size: contain;background-position: right;}
  .hero-content p {font-size: 24px;}
  .head-container ul {gap:24px;}
}
@media (min-width:1440px) {
  .head-container .head-container-mannequin-img{background-size: contain;background-position: right;}
  .head-container h1{font-size: 57px;width: 75%;}
  .head-container p{width: 86%;}
}

/*---------------------- Container-3-marques----------------------------------- */
.bloc-nos-marques-bg{background-color: #FAFAFA;}
.bloc-nos-marques {padding: 40px 8px;}
.bloc-nos-marques-cards {display:flex;flex-direction:column;gap:24px;}
.bloc-nos-marques-cards .card {display:flex;margin: 0 auto;gap:20px;box-shadow: 0 2px 8px 0 rgba(19, 1, 3, 0.16);transition:box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);}
.bloc-nos-marques-cards .card:hover{transform: translateY(-2px);box-shadow: 0 12px 32px rgba(0, 0, 0, 0.09);cursor: pointer;}
.bloc-nos-marques-cards .card-content{padding: 0px 20px 24px;display: flex;flex-direction: column;gap: 16px;}
.bloc-nos-marques-cards .card-link {position: absolute;inset: 0; z-index: 1;}
.bloc-nos-marques-cards .card .btn,.card a:not(.card-link) {position: relative;z-index: 2;}
.bloc-nos-marques-cards .card-content .icon {  display: block;  box-shadow: 0px 2px 8px 0px rgba(19, 1, 3, 0.12);width: 40px;height: 40px;border-radius: 4px;background-size: contain;background-repeat: no-repeat;background-position: center;}
.bloc-nos-marques-cards .icon.brand-helline{background-image:url("../src/vitrine/marques/favicon_helline.webp");}
.bloc-nos-marques-cards .icon.brand-witt{background-image:url("../src/vitrine/marques/favicon_witt.webp");}
.bloc-nos-marques-cards .icon.brand-modavilona{background-image:url("../src/vitrine/marques/favicon_moda.webp");}
.bloc-nos-marques-cards .card-text{font-size: 15px;font-weight: 400;line-height: 130%;}
.bloc-nos-marques-cards .card .btn{display:flex;width: fit-content;background-color: #130103;color: #fff;font-weight: 700;border:2px solid #130103;align-items: baseline;gap:8px;}
.bloc-nos-marques-cards .card .btn:hover{background-color: #fff;color:#130103;border:2px solid #130103;}

@media (min-width:768px) {
  .bloc-nos-marques {padding: 40px 24px 80px;}
  .bloc-nos-marques-cards{flex-wrap:wrap;flex-direction: row;}
  .bloc-nos-marques-cards .card { width:48%;}
  .bloc-nos-marques-cards .card-content{padding: 0 24px 24px;gap: 20px;}
  .bloc-nos-marques-cards  .icon {margin: 0 auto; }
  .bloc-nos-marques-cards .card .btn{margin:0 auto;}
  .bloc-nos-marques-cards .card-text{text-align: center;width:93%;}
}
@media (min-width:768px) and (max-width:1023px) {
  .bloc-nos-marques-cards{flex-wrap:wrap;}
}
@media (min-width:1024px) {
  .bloc-nos-marques-cards{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-left:auto;margin-right:auto;}
}
@media (min-width:1440px) {
    .bloc-nos-marques-cards .card {width: 32%; }
}

/*------------------------------------bloc-a-propos-de-nous-----------------------------*/
.bloc-a-propos-de-nous{padding:40px 8px;}
.bloc-a-propos-de-nous .titre-h2{margin-bottom:16px;}
.bloc-a-propos-de-nous-cards{width: 100%;margin: auto;margin-top:32px;display: flex;flex-direction: column;gap: 16px;}
.bloc-a-propos-de-nous-cards .card{display: flex;flex-direction: row;gap: 12px;width: 100%;padding: 20px;margin: auto;justify-content: left;align-items: center;border: 0px solid white;box-shadow: 0px 2px 8px 0px rgba(19, 1, 3, 0.16);border-radius: 4px;}
.bloc-a-propos-de-nous-cards .icon{    width: 44px;height: 44px;background-size: contain;background-repeat: no-repeat;background-position: center;}
.bloc-a-propos-de-nous .icon.payment{background-image: url('../src/vitrine/entreprise/payment_16px.svg');}
.bloc-a-propos-de-nous .icon.about_us{background-image: url('../src/vitrine/entreprise/about_us_16px.svg');}
.bloc-a-propos-de-nous .icon.check{background-image: url('../src/vitrine/entreprise/check_16px.svg');}
.bloc-a-propos-de-nous .icon.catalog{background-image: url('../src/vitrine/entreprise/catalog_16px.svg');}
.bloc-a-propos-de-nous .icon.user{background-image: url('../src/vitrine/entreprise/user_16px.svg');}
.bloc-a-propos-de-nous .card-text{width:100%;}
@media (min-width:768px) {
  .bloc-a-propos-de-nous{padding:80px 24px;}
  .bloc-a-propos-de-nous > p{max-width: 978px;text-align: center;margin: auto;}
  .bloc-a-propos-de-nous-cards{ justify-content: center;flex-direction: row;flex-wrap: wrap;gap: 24px;}
  .bloc-a-propos-de-nous-cards .card{width: 32%;margin:unset;gap:24px;padding: 40px;}
}
@media (min-width:768px) and (max-width:1440px) {
  .bloc-a-propos-de-nous-cards .card {width: 48%;}
}
@media (min-width:1440px) {
    .bloc-a-propos-de-nous-cards .card{ width: 32%;max-width: 392px;}
}
/*------------------------------------bloc-engagement-----------------------------*/
.engagements-bg{background-color: #FAFAFA;}
.engagements{margin:0px auto 40px;background-color: #FAFAFA;padding-top: 24px;}
.engagements .titre-h2{margin-bottom: 16px;padding:0 8px;}
.engagements > p {margin-bottom: 32px;padding:0 8px;}
.bloc-engagements-cards{width: 100%;margin: auto;padding:0 8px;display: flex;flex-direction: column;gap: 16px;}
.engagements .card{display: flex;flex-direction: column;gap: 8px;width: 100%;padding: 20px;margin: auto;justify-content: left;border: 0px solid white;box-shadow: 0px 2px 8px 0px rgba(19, 1, 3, 0.16);}
@media (min-width:768px) {
  .engagements{padding:40px;}
  .engagements .titre-h2, .engagements > p{text-align: center;}
  .bloc-engagements-cards{flex-direction: row;gap: 16px;flex-wrap: wrap;justify-content: center;}
  .engagements .card{width: 48%;margin: unset;}
}

@media (min-width:1024px) {
    .engagements .card{width:48%;margin:unset;}
    .engagements .titre-h2 , .engagements > p {text-align: center;}
}
@media (min-width:1440px) {
    .engagements-content{display: flex;}
}


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

.footer {background-color: #EBEBEB;padding: 40px 16px;text-align: center;border-radius: 32px 32px 0px 0px;}
.footer-list {display: flex;flex-direction: column;gap:16px ;}
.footer-list a {font-size: 16px;color: #130103;text-decoration: none;}
.footer-list li a:hover {text-decoration: underline!important;cursor: pointer;}
.footer-group {margin-bottom: 40px;}
.footer-legal {margin-bottom: 40px;}
.footer-copy {font-size: 14px;color: #130103;margin: 0 auto;width: 182px;}

@media (min-width: 768px) {
  .footer {padding: 48px 24px;}
  .footer-group, .footer-legal {display: flex;flex-direction: column;align-items: center;}
  .footer-list {display: flex;flex-direction: row;gap: 24px;}
  .footer-copy {margin-top: 16px;width: 100%;}
}

/**Volet droit**/

.offcanvas {width: 100%!important;}
.offcanvas .offcanvas-header{border-bottom: 1px solid #e0e0e0;box-shadow: 0 0px 8px rgba(18, 16, 55, 0.24);padding: 24px 40px 16px 40px;}
.offcanvas .offcanvas-header h3{font-size: 24px;padding-left: 16px;font-weight: 700;line-height: 130%;font-family: 'Nunito Sans';}
.offcanvas .legal-content{padding:4px;}
.offcanvas .legal-content p{margin-bottom: 16px;}

@media (min-width: 768px) {
 .offcanvas {width: 50%!important;}
}
@media (min-width: 1024px) {
  .offcanvas .legal-content{padding:40px;}
}


@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes mannequinSlideIn {
  to {
    transform: translateX(0);
  }
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .hero-content,
  .hero-content h1,
  .hero-content p,
  .head-container-mannequin-img::before {
    opacity: 1 !important;
    transform: none !important;
  }
}


a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}