/* Variables */
:root {
  --padding:2px;
  --border-size:2px;
  --gap-form:1rem;
  --light-green:#56dbcb;
  --medium-green:#009a90;
  --dark-green:#006158;
  --dark-color:#333;
  --primary-color:var(--light-green);
  --secondary-color:white;
  --background-color:transparent;
  --radius:2rem;
  --transition:all .3s ease-in-out;
}

/* COMMON SELECT */

select{
  appearance: none;
  background: none;
  border: 2px solid var(--primary-color);
  border-radius: 2rem;
  color: var(--primary-color);
  font-family: inherit;
  font-size: inherit;
  font-size: 1em;
  font-style: inherit;
  font-weight: inherit;
  height: 100%;
  letter-spacing: inherit;
  line-height: inherit;
  padding: 1em .5em 0;
  text-decoration: inherit;
  text-transform: inherit;
  width: 100%;
}

/* Form CF7 */
form.wpcf7-form, form.wc-coupon-access-form {
    display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--gap-form);width:100%;align-items:center;justify-content:center;position:relative;
    & h2 {
        flex-basis:100%;margin-bottom:0;text-align:center;text-transform:none;
        &::after {display:none;}
        & + p {flex-basis:100%;text-align:center!important;display:block;}
    }
    & > p {
        display:flex;flex-direction:row;flex-wrap:wrap;gap:0 var(--gap-form);max-width:80%!important;
    }
    & .flex {
        flex:0 0 calc(100%/3 - var(--gap-form));max-width:calc(100%/3 - var(--gap-form));
        & > p {
            display:flex;flex-direction:column;flex-wrap:wrap;gap:var(--gap-form);max-width:100%!important;
            & > * {flex:1 1 100%;}
        }
    }
    & [type=text], & [type=password], & [type=date], & [type=datetime], & [type=datetime-local], & [type=month], & [type=week], & [type=email], & [type=number], & [type=search], & [type=tel], & [type=time], & [type=url], & [type=color], & [type=file], & textarea, & select, & .login form .input {
        border:2px solid transparent;border-radius:var(--radius);background:var(--background-color);width:100%;padding:0 1rem;margin:0;height:3rem;line-height:3;font-size:16px;color:white;box-shadow:none;max-height:100%;resize:none;border:2px solid var(--primary-color);
        &:focus {
            box-shadow:none;background:inherit;border:2px solid var(--secondary-color);
            &:not(:placeholder-shown) {
                background:var(--background-color);color:white;
            }
            & + span:not(.wpcf7-list-item-label) {
                top:-.5rem!important;background:var(--secondary-color);color:var(--dark-green)!important;font-size:.8rem!important;line-height:1.6!important;padding-inline:1rem;opacity:1;white-space: nowrap;
            }
        }
        &:not(:placeholder-shown) {
            border-color:var(--secondary-color);
        }
        & + span:not(.wpcf7-list-item-label) {position:absolute;top:0;line-height:3.1;font-size:.9rem;left:1rem;font-weight:normal;transition:var(--transition);color:var(--primary-color);opacity:1;border-radius:var(--radius);white-space: nowrap;}
        &:not(:placeholder-shown) + span:not(.wpcf7-list-item-label) {
            top:-.5rem!important;background:white;color:var(--dark-green)!important;font-size:.8rem!important;line-height:1.6!important;padding-inline:1rem;opacity:1;
        }
        &:-internal-autofill-selected {
            background:var(--background-color)!important;color:white!important;
        }
    }
    & textarea[rows] {height:7.7rem;}
    & [type=file] {
        &::file-selector-button {display:none;}
    }
    & .wpcf7-radio {
        position:relative;appearance:none;border-radius:var(--radius);border:var(--border-size) solid var(--primary-color);width:fit-content;margin:0 auto;text-align:center;line-height:1;transition:var(--transition);background:none;display:flex;padding:var(--padding);align-items:center;justify-content:center;padding:0;
        & > span {flex:1 0 auto;display:block;margin:0;}
        & label {
            margin-bottom:0;height:100%;
            & span {display:none;}
            & [type="radio"] {
                appearance:none;margin:0;width:100%;height:100%;border-radius:var(--radius);display:block;cursor:pointer;white-space:nowrap;
                &::after {content:attr(value);border-radius:var(--radius);background:none;height:100%;transition:var(--transition);display:block;margin-left:0;text-align:center;line-height:2;text-transform:uppercase;padding-inline:2rem;border:2px solid transparent;}
                &:checked {
                    &::after {
                        background:var(--background-color);color:var(--primary-color);border-color:var(--background-color);
                    }
                }
            }
        }
    }
    & .wpcf7-acceptance {
        background:var(--background-color);display:flex;padding:1rem;border-radius:var(--radius);align-items:center;justify-content:center;margin-bottom:1rem;flex-basis:100%;
        & label {display:flex;align-items:center;gap:.5rem;margin-bottom:0;color:var(--primary-color);}
        & span.wpcf7-list-item-label {line-height:1.2;}
        & [type="checkbox"] {
            position:relative;appearance:none;border-radius:var(--radius);border:var(--border-size) solid var(--primary-color);width:3rem;aspect-ratio:3/2;margin:0;text-align:center;line-height:1;transition:var(--transition);background:var(--background-color);display:inline-block;padding:var(--padding);
            &::after {content:'';border-radius:50%;background:var(--primary-color);height:100%;aspect-ratio:1;transition:var(--transition);display:block;margin-left:0;flex-basis: 3rem;}
            &:checked {
                background:var(--primary-color);
                &::after {background:white;margin-left:calc(50% - var(--border-size) - var(--padding));}
            }
        }
        & a:hover {color:var(--primary-color);text-decoration:underline;}
    }
    & input[type="submit"] {
        border:0;cursor:pointer;transition:var(--transition);border-radius:var(--radius);background:var(--primary-color);color:white;font-size:1rem;text-transform:uppercase;padding-inline:3rem;line-height:2;margin-inline:auto;display:block;width:fit-content;font-weight:bold;
        &:hover {background:white;color:var(--dark-green);}
        &:disabled {cursor:not-allowed;opacity:.5;}
    }
    & ::placeholder {color:var(--background-color)!important;}
    & label {
        position:relative;margin-bottom:1rem;flex-basis:calc(50% - var(--gap-form));width:100%;margin:0;
        &.fullwidth, &.big {
          flex-basis: calc(100% - var(--gap-form) * 2);
          margin-inline: auto;
        }
        &.hide {display:none;}
        &.dark-bg {
            padding:2rem;border-radius:var(--radius);
        }
        & span {
            &.title {
                font-size:1.2rem;line-height:1.2;display:block;margin-bottom:.5rem;text-transform:uppercase;
                & i {
                    font-size:3rem;display:block;margin-bottom:.5rem;
                }
            }
        }
    }
    &.invalid {
        & input.wpcf7-validates-as-required:placeholder-shown, & textarea.wpcf7-validates-as-required:placeholder-shown {border-color:#ef7a4b;}
    }
    &.submitting {
        pointer-events:none;
    }
    & .wpcf7-response-output {
        border:0!important;border-radius:var(--radius);background:var(--secondary-color);padding:1rem 2rem!important;text-align:center;display:block;
    }
    & .wpcf7-spinner {
        background-color:var(--background-color);width:100%;height:100%;border-radius:0;position:absolute;top:0;left:0;opacity:.9;
        &::before {
            background-color:var(--primary-color);top:calc(50% - 48px);left:calc(50% - 48px);width:16px;height:16px;transform-origin:18px 18px;
        }
    }
}

@media screen and (max-width:640px) {
    form {
        & label {margin-bottom:.5rem;flex-basis:100%;}
        & > p {max-width:90%!important;}
        & .wpcf7-acceptance {
            padding-inline:0;width:100%;text-align:left;
            & [type="checkbox"] {
                flex-basis:3rem;
            }
        }
        & .wpcf7-radio {
            flex-direction:column;border-radius:calc(var(--radius)/2);padding:.2rem;width:100%;
            & > span {width:100%;}
        }
        & .flex {
            flex:0 0 100%;max-width:100%;
            & p {margin-bottom:0!important;}
        }
        & [type=text], & [type=password], & [type=date], & [type=datetime], & [type=datetime-local], & [type=month], & [type=week], & [type=email], & [type=number], & [type=search], & [type=tel], & [type=time], & [type=url], & [type=color], & [type=file], & textarea, & select, & .login form .input {font-size:1rem;line-height:2.6;}
    }
}

/* End Form CF7 */


header {
  & .menu {
    & [data-user] {
      position:relative;
      &:hover {
        &::after {
          content:attr(data-user);font-size:.7rem;color:white;display:block;text-align:center;margin-top:-.5rem;font-weight:normal;position:absolute;bottom:-1.5rem;right:0;background:#1d1d1b;padding:.2rem 1rem;border-radius:2rem;white-space:nowrap;
        }
      }
    }
  }
}


.pistolet {
  width:100%;height:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;flex-wrap:nowrap;position:relative;background:#ffffff12;border-radius:2rem;margin-bottom:.5rem;padding:1rem 0 2rem 0;gap:1rem;
  & .remove-product-row {
    position:absolute;top:1rem;right:1rem;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;cursor:pointer;font-size:1.5rem;
  }
  &:first-of-type {
    & .remove-product-row {
      display:none;
    }
  }
  & + #add-product-row {
    margin-inline:auto;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;width:3rem;aspect-ratio:1;height:auto;background:var(--light-green);border-radius:50%;cursor:pointer;transition:background-color 0.3s cubic-bezier(0, 0, 0.18, 0.99);font-size:2rem;margin-top:-3rem;display:none;position:relative;margin-bottom:2rem;
    &:hover {
      background-color:white;color:var(--dark-green);transform:scale(1.1);
    }
    &::after {
      content:'Ajouter un pistolet';position:absolute;width:10rem;height:auto;overflow:hidden;font-size:.9rem;left:50%;color:var(--light-green);transform:translateX(-50%);top:3.5rem;text-align:center;display:block;text-transform:uppercase;
    }
  }
  & label {
    width:auto!important;
    &.numeroSerieLabel, &.marqueLabel, &:has([name="modelePistolet"]) {
      display:none;width:auto;
    }
  }
  &:has([name="marquePistolet"]:checked) {
      & label:has([name="modelePistolet"]) {
        display:block;
      }
  }
  & .choixRecompense, & .contenuPack {
    display:none;
    & p {
      text-align:center;
    }
  }
  &:has([name="marquePistolet"]:checked) {
    &:has([name="modelePistolet"]:not(:placeholder-shown)) {
      & .choixRecompense {
        display:block;
      }
    }
  }
  & label:has([name*="pistolet"]:checked) {
    pointer-events:none;
  }
  &:has([name="recompense"]:checked) {
    & .contenuPack {
      display:block;max-width:70%;
    }
    & + #add-product-row {
      display:flex;
    }
  }
  &:has([name*="marquePistolet_"]:checked) {
    &:has([name*="modelePistolet_"]:not(:placeholder-shown)) {
      & .choixRecompense {
        display:block;
      }
    }
  }
  &:has([name*="recompense_"]:checked) {
    & .contenuPack {
      display:block;max-width:70%;
    }
  }
  &:has([name="marquePistolet"][value="Ripack"]:checked) {
    & label.numeroSerieLabel {
      display:block;
    }
  }
  &:has([name="marquePistolet"][value="Autre"]:checked) {
    & label.marqueLabel {
      display:block;
    }
  }
  &:has([name*="marquePistolet_"]) {
    &:has([value="Ripack"]:checked) {
      & label.numeroSerieLabel {
        display:block;
      }
    }
    &:has([value="Autre"]:checked) {
      & label.marqueLabel {
        display:block;
      }
    }
  }
  &:has([name="recompense"]:checked) {
    & ~ .contactInfo {
      display:flex;
    }
  }
}

html {
  &[lang="de"] {
    & .pistolet {
      & + #add-product-row {
        &::after {
            content: 'Schrumpfpistole hinzufügen';
        }
      }
    }
    & .wpcf7-form .choixRecompense .wpcf7-checkbox .wpcf7-list-item.last .wpcf7-list-item-label:before {
      content: 'Auf einer neuen Ripack Schrumpfpistole';
    }
    & .wpcf7-form .choixRecompense .wpcf7-checkbox .wpcf7-list-item.first .wpcf7-list-item-label:before {
      content: 'ausgewählt von Ripacycle';
    }
  }
  &[lang="en"] {
    & .pistolet {
      & + #add-product-row {
        &::after {
            content: 'Add a shrink gun';
        }
      }
    }
    & .wpcf7-form .choixRecompense .wpcf7-checkbox .wpcf7-list-item.last .wpcf7-list-item-label:before {
      content: 'On a new Ripack shrink gun';
    }
    & .wpcf7-form .choixRecompense .wpcf7-checkbox .wpcf7-list-item.first .wpcf7-list-item-label:before {
      content: 'selected by Ripacycle';
    }
  }
  &[lang="es"] {
    & .pistolet {
      & + #add-product-row {
        &::after {
            content: 'Agregar una pistola de retracción';
        }
      }
    }
    & .wpcf7-form .choixRecompense .wpcf7-checkbox .wpcf7-list-item.last .wpcf7-list-item-label:before {
      content: 'En una nueva pistola de retracción Ripack';
    }
    & .wpcf7-form .choixRecompense .wpcf7-checkbox .wpcf7-list-item.first .wpcf7-list-item-label:before {
      content: 'seleccionada por Ripacycle';
    }
  }
}

.contactInfo {display:none;flex-direction:row;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;margin-bottom:1rem;gap:1rem;}

.button {
    padding:.7rem 2rem;display:inline-block;font-size:.9rem;font-weight:500;color:#fff;cursor:pointer;position:relative;border-radius:2rem;background:var(--light-green);font-family:"square", sans-serif;text-transform:uppercase;border:none;outline:none;transition:all 0.3s cubic-bezier(0, 0.07, 0.57, 0.99);
    &:hover, &:focus {
      background: var(--dark-green);
    }
}
.descriptionContainer {
  max-width:100%;
}
form.variations_form {
  display:flex;flex-direction:column;justify-content:center;align-items:flex-end;flex-wrap:nowrap;width:100%;margin-top:1rem;
  & .single_variation_wrap {
    display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;width:100%;
    & .woocommerce-variation-price {
      font-size:2.5rem;font-weight:bold;font-family:"DIN Pro", sans-serif;color:var(--dark-green);
    }
    & .woocommerce-variation-add-to-cart {
      display:flex;flex-direction:row;justify-content:flex-end;align-items:center;flex-wrap:nowrap;width:100%;gap:1rem;
    }
  }
  & .variations {
    & label {
      margin-inline:1rem;text-transform:uppercase;font-weight:bold;font-family:"DIN Pro", sans-serif;
    }
  }
  & select, & input {
    border-radius:2rem;line-height:2;border:2px solid var(--light-green);padding:0 1rem;font-size:1rem;color:var(--dark-color);background-color:#fff;text-align:center;height:2rem;
    &[type="number"] {
      max-width:4rem;
    }
    & option {
      line-height:2;
    }
  }
}

body {
  &.menuOpen .menu li:has(.cart-contents) {
    display:none;
  }
}



.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt {
  border-radius:2rem;line-height:2;padding:0 1rem;font-size:1rem;color:#fff;background-color:var(--dark-green);text-align:center;height:2rem;white-space:nowrap;
  &:hover {
    background-color:var(--dark-color);color:#fff;
  }
}

body {
  &.woocommerce {
    & .breadcrumb {
      margin-bottom:1rem;padding-left:2rem;
    }
    & .productActions {
      padding-top:1rem;
    }
    & .single_variation_wrap{
      max-width: 100%;
    }
    & .single_variation {
      display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;gap:1rem;background:var(--dark-green);border-radius:3rem;padding:.5rem;
      & .price {
        font-size:1.4rem;font-weight:bold;color:var(--dark-green);font-family:"square", sans-serif;text-transform:uppercase;display:flex;align-items:center;gap:.5rem;
        & .woocommerce-Price-amount {
          display:flex;flex-direction:row;align-items:center;gap:.5rem;background:white;border-radius:2rem;padding:1rem;
          & em {
            font-size:.7rem;font-weight:normal;color:var(--dark-green);display:block;
          }
          &.with-coupon {
            background:var(--light-green);color:var(--dark-green);border-radius:2rem;padding:1rem .5rem;
          }
        }
        & ins {
          text-decoration:none;
        }
        & .woocommerce-Price-currencySymbol {
          font-size:1.4rem;font-weight:bold;color:var(--dark-green);font-family:"square", sans-serif;text-transform:uppercase;
        }
        & del {
          color:var(--dark-color);text-decoration:line-through;font-size:1.2rem;margin-left:1rem;
          & .woocommerce-Price-currencySymbol {
            font-size:1.2rem;color:var(--dark-color);
          }
        }
        & ~ form button.single_add_to_cart_button {
          line-height:4;height:4rem;background: #fff;padding:0 2rem;color:var(--dark-green);
          &:disabled {
            background:var(--dark-color);color:#999;opacity:1;cursor:not-allowed;line-height:2;
          }
        }
      }
      & .quantity {
        display:none;
      }
    }
    & .related-products {
      margin-top:4rem;
      & h3 {
        font-size:1.1rem;color:#1d1d1b;text-align:center;display:block;margin:2rem 0;
      }
      &:has(.swiper-pagination-lock) {
        & .swiper-wrapper {
          justify-content:center;
        }
      }
    }
  }
  &.wc-coupon-access-granted {
    & [data-categories="neufs"] {
      & .wc-block-components-quantity-selector {
        display:none;
      }
    }
  }
  &.page-template-page-produits-neufs, &.single-product, &.wp-singular {
    & main:has(.wc-coupon-access-form, [name="loginform_distributeur"], [name="loginform_client"]) {
      height:calc(100vh - var(--footer-height));display:flex;flex-direction:column;justify-content:center;align-items:center;flex-wrap:nowrap;padding-top:var(--header-height);
      & .heroBackground {
        display:none;
      }
    }
    & main:has([name="loginform_distributeur"]) {
      & .defautTop {
        padding-top:0;
      }
      & .container-fluid {
        background:#f2f2f2;padding:3rem;border-radius:2rem;text-align:center;
        & h1 {
          display:block;
        }
      }
      & #loginform_distributeur {
        margin:0 auto;padding:0;
        & p:not(.login-remember) {
          position:relative;width:100%;
          & label {
            position:absolute;left:1rem;font-weight:normal;transition:var(--transition);opacity:1;border-radius:var(--radius);top:-.5rem;background:var(--secondary-color);color:var(--dark-green);font-size:.8rem;line-height:1.6;padding-inline:1rem;
          }
        }
        & input {
          width:100%;padding:1rem;border-radius:2rem;border:2px solid var(--light-green);font-size:1rem;color:var(--dark-green);margin-bottom:0;background:white;
          & + span:not(.wpcf7-list-item-label) {
            color:var(--dark-green);
          }
          &:focus, &:focus-visible {
            border-color:var(--dark-green);outline:none;
            &:not(:placeholder-shown) {
              color:var(--dark-green);
            }
          }
          &[type="submit"] {
            padding:.7rem 2rem;display:inline-block;font-size:.9rem;font-weight:500;color:#fff;cursor:pointer;position:relative;border-radius:2rem;background:#56dbcb;font-family:"square", sans-serif;text-transform:uppercase;border:none;outline:none;transition:all 0.3s cubic-bezier(0, 0.07, 0.57, 0.99);
            &:hover, &:focus {
              background:#006158;
            }
          }
        }
        & .login-remember {
          & label {
            display:flex;align-items:center;gap:.5rem;
            & input {
              width:auto;margin:0;
            }
          }
        }
      }
    }
    & .wc-coupon-access-form, & #loginform_distributeur {
      max-width:50vw;margin:5rem auto;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:1rem;padding:3rem;border-radius:2rem;background:#f2f2f2;
      & input {
        &[name="wc_coupon_code"], &[name="user_email"] {
          width:100%;padding:1rem;border-radius:2rem;border:2px solid var(--light-green);font-size:1rem;color:var(--dark-green);margin-bottom:0;background:white;
          & + span:not(.wpcf7-list-item-label) {
            color:var(--dark-green);
          }
          &:focus, &:focus-visible {
            border-color:var(--dark-green);outline:none;
            &:not(:placeholder-shown) {
              color:var(--dark-green);
            }
          }
          &:not(:placeholder-shown) {
            border-color:var(--dark-green);
            & + span:not(.wpcf7-list-item-label) {
              background:var(--dark-green);color:white!important;
            }
          }
        }
      }
      & p {
        max-width:100%!important;
      }
      & .error-message {
        color:#ef7a4b;text-align:center;
      }
    }
  }
}

.cart-contents {
  position:relative;display:flex!important;flex-flow:column nowrap;justify-content:center;padding-inline:1rem!important;
  &:before {
    font-family:'Font Awesome 5 Free';font-weight:600;content:'\f290'!important;font-size:1rem;color:white;
  }
  &:hover {
    text-decoration: none;
  }
  & .cart-contents-count {
    position:absolute;top:1rem;right:0;transform:translateY(-105%) translateX(25%) scale(1);font-weight:normal;font-size:.7rem;line-height:1.4;height:1.4rem;width:1.4rem;vertical-align:middle;text-align:center;color:#fff;background:var(--dark-color);border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;animation:zoomCartCounter .5s 1s ease-in-out forwards;
  }
}

@keyframes zoomCartCounter {
  0% {transform:translateY(-105%) translateX(25%) scale(1);}
  50% {transform:translateY(-105%) translateX(25%) scale(2);}
  100% {transform:translateY(-105%) translateX(25%) scale(1);}
}



/* Conteneur scroll horizontal */
body {
  & .wc-block-components-notices {
    display:block;margin:0;position:fixed;top:0;left:0;z-index:9999;width:100%;
    & .wc-block-components-notice-banner {
      margin:0;border:0;text-align:center;font-family:"square", sans-serif;text-transform:uppercase;font-size:.8rem;
    }
  }
  &.woocommerce-cart, &.woocommerce-page {
    & #survey_checkout {
        padding:2rem;border-radius:2rem;margin:20px 0;border:1px solid black;
        & h2 {
            margin-bottom:1rem;font-size:1.4rem;color:black;
        }
        & label {
            font-weight:500;color:#444;
        }
        & select {
            width:100%;padding:.5rem;border:1px solid black;border-radius:2rem;color:black;background:white;
        }
        & .form-row {
            margin-bottom:15px;
        }
        & .woocommerce-input-wrapper {
            display:flex;gap:1rem;
            & [type="radio"] {
                appearance:none;background:white;border:1px solid black;border-radius:50%;cursor:pointer;display:inline-block;width:1rem;height:1rem;margin:inherit;position:relative;vertical-align:-.1rem;margin-right:.5rem;
                &:checked::before {
                    background:black;border-radius:50%;content:'';display:block;height:.75em;left:50%;margin:0;min-height:12px;min-width:12px;position:absolute;top:50%;transform:translate(-50%, -50%);width:.75em;
                }
            }
        }
    }
    & div[data-message*="Toutes nos excuses, le code promo"] {
      display:none!important;
    }
    & .empty-cart-cta {
      margin:2rem auto;display:block;width:fit-content;
    }
    & .wp-block-heading {
          display:flex;flex-direction:column;justify-content:center;align-items:center;flex-wrap:nowrap;font-size:1.4rem;font-family:"square", sans-serif;text-transform:uppercase;color:var(--light-green);
          &.wc-block-cart__empty-cart__title {
            font-size:1rem;
          }
          &:has(+ .wc-block-grid) {
            margin-top:4rem;margin-bottom:2rem;
          }
    }
    & .wp-block-product-new {
      margin-bottom:4rem;
    }
    & .wc-block-grid__products {
      display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:2rem;padding:1rem 0;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;align-items:flex-start;justify-content:space-between;
      & .wc-block-grid__product {
        flex:0 0 auto;width:80%;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center;align-items:center;flex-wrap:nowrap;width:100%;height:100%;background-color:var(--light-green);border-radius:3rem;padding:2rem 1rem;transition:background-color .3s cubic-bezier(0, 0.07, 0.57, 0.99);position:relative;max-width:calc(25% - 2rem);
        & .wc-block-grid__product-title {
          font-family:"square", sans-serif;text-transform:uppercase;background-color:#fff;color:var(--light-green);padding:.8rem 7rem .5rem 1rem;border-radius:2rem;width:100%;height:4rem;display:flex;align-items:center;justify-content:flex-start;font-size:1rem;font-weight:bold;text-align:left;
        }
        & .price {
          padding:.5rem 1rem;background-color:#006158;color:var(--light-green);font-weight:bold;font-size:1.2rem;border-radius:2rem;margin-top:-4.75rem;margin-right:0;width:7rem;text-align:center;text-transform:uppercase;display:flex;align-items:center;justify-content:center;height:4rem;z-index:1;margin-bottom:2rem;
        }
        & .wc-block-grid__product-add-to-cart.wp-block-button {
          padding:.7rem 2rem;display:inline-block;font-size:.9rem;font-weight:500;cursor:pointer;position:relative;border-radius:2rem;font-family:"square", sans-serif;text-transform:uppercase;border:none;outline:none;background:#006158;color:var(--light-green);transition:transform 0.3s cubic-bezier(0, 0.07, 0.57, 0.99);margin:0 auto -4rem;
          &:hover {
            background:#004d4d;
          }
          & .wp-block-button__link {
            color:inherit;background:none;border-radius:inherit;text-decoration:inherit;padding:0;
          }
        }
      }
      &::-webkit-scrollbar {
        display:none;
      }
    }
  }
  &.woocommerce-order-received {
    & .woocommerce-notice {
      text-align:center;font-family:"square", sans-serif;text-transform:uppercase;font-size:1.2rem;color:#1d1d1b;margin-bottom:2rem;
    }
    & ul{
      &.woocommerce-thankyou-order-details {
        margin-inline:auto;max-width:80%;width:fit-content;text-align:center;padding:2rem;border:2px solid var(--light-green);border-radius:2rem;margin-bottom:0;
      }
    }
    & section {
      padding:10rem 5vw 5vw 5vw;
      &.defautTop {
        & .col-12:has(h1) {
          margin-bottom:.5rem;
          & h1 {
            align-items:center;
          }
        }
      }
      & h2 {
        font-family:"square", sans-serif;text-transform:uppercase;font-size:1.4rem;color:var(--light-green);text-align:center;margin-bottom:2rem;text-align:center;
        &.woocommerce-order-details__title {
          display:none;
        }
      }
    }
    & .container-fluid {
      padding:2rem 5vw;
    }
  }
  & .ripackAccessories {
    display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:nowrap;width:100%;margin-top:2rem;color:white;background:var(--dark-green);padding:2rem;gap:2rem;border-radius:2rem;
    & .accessoriesImg {
      flex:1 0 40%;display:flex;gap:1rem;align-items:center;justify-content:center;
    }
    & h2 {
      text-align:left!important;color:white;margin:0!important;
    }
    & p {
      margin:1rem 0;
    }
    & img {
      width:150px;max-height:max-content;height:auto;max-width:fit-content;
    }
    & .btn {
      &:hover {
        background:white;color:var(--dark-green);
      }
    }
  }
}
body{
  &:not(.page-template-page-mentions){
    details {
      & summary {
        font-family:"square", sans-serif;text-transform:uppercase;font-size:1rem;cursor:pointer;width:fit-content;margin-inline:auto;background:var(--light-green);line-height:3;border-radius:2rem;color:white;padding-inline:1rem 2rem;z-index:1;position:relative;margin-top:-1.5rem;
        & i {
          font-size:1.2rem;display:inline-block;margin-left:.5rem;transition:transform .3s ease-in-out;
        }
      }
      & .content {
        padding:1rem 2rem;border-radius:2rem;background:white;color:var(--dark-green);font-size:1rem;line-height:1.6;text-align:left;border:1px solid var(--light-green);max-width:80%;margin-inline:auto;padding-top:4rem;margin-top:calc(-1.5rem - 2px);z-index:0;position:relative;
        & section {
          padding:1rem;
        }
        & p {
          margin-bottom:1rem;
        }
        & ul {
          list-style-type:none;padding-left:0;margin-bottom:1rem;
          & li {
            margin-bottom:.5rem;
          }
        }
      }
    }
  }
}


/* PANIER */

.defautTop{
    padding-top: 12.5rem;
    position: relative;
    & .col-12{
        margin-bottom: 2rem;
    }
}
.page-template-default {
    & .wp-block-woocommerce-cart, & .wp-block-woocommerce-checkout {
        & .wp-block-woocommerce-checkout-order-summary-block {
          padding:.5rem;border-radius:2rem;;
        }
        & .wc-block-components-radio-control--highlight-checked {
            & .wc-block-components-radio-control-accordion-option--checked-option-highlighted, 
            & label.wc-block-components-radio-control__option--checked-option-highlighted{
                padding:.5rem;border-radius: 2rem;
            }
            &:after{
                border: none;
            }
        }
        & .wc-block-cart__submit-button, & .wc-block-components-button {
            font-family: "square", sans-serif;text-transform: uppercase;border:none;outline:none;border-radius:2rem;line-height:1.1;padding:0 1rem;font-size:1rem;color:#fff;background-color:var(--dark-green);text-align:center;height:2rem;
            &:hover {
            background-color:var(--dark-color);color:#fff;
            }
        }
        & .wc-block-components-form .wc-block-components-text-input input[type=email], & .wc-block-components-form .wc-block-components-text-input input[type=number], & .wc-block-components-form .wc-block-components-text-input input[type=password], & .wc-block-components-form .wc-block-components-text-input input[type=tel], & .wc-block-components-form .wc-block-components-text-input input[type=text], & .wc-block-components-form .wc-block-components-text-input input[type=url], & .wc-block-components-text-input input[type=email], & .wc-block-components-text-input input[type=number], & .wc-block-components-text-input input[type=password], & .wc-block-components-text-input input[type=tel], & .wc-block-components-text-input input[type=text], & .wc-block-components-text-input input[type=url] {
            border-radius:2rem;line-height:2;border:2px solid var(--dark-color);padding:.25rem 1rem;font-size:1rem;color:var(--dark-color);background-color:#fff;text-align:left;
            &:focus, &:focus-visible {
            border-color:var(--dark-color);outline:none;
            }
        }
        & .wc-block-components-form .wc-block-components-text-input label, & .wc-block-components-text-input label, & .wc-blocks-components-select .wc-blocks-components-select__label{
            left: 1rem;
        }
        & .wc-blocks-components-select .wc-blocks-components-select__select {
            border:2px solid var(--dark-color);border-radius:2rem;padding: .25rem 1rem;
            &:focus, &:focus-visible {
                border-color:var(--dark-color);outline:none;
            }
        }
    }
    /* Checkout */
    & .wp-block-woocommerce-checkout-order-summary-block, & .wc-block-components-totals-wrapper, & .wp-block-woocommerce-checkout-order-summary-totals-block{
        border-color: var(--dark-color);
    }
    /* Panier */
    & .wc-block-cart {
        & .wp-block-woocommerce-cart-order-summary-block{
            border-color: var(--dark-color);
        }
        & .wc-block-cart__totals-title{
            font-size: 1rem;
        }
    }
    & .wc-block-cart-items__row{
        border-bottom: none;
    }
    & .wc-block-cart__main {
        & .wc-block-cart-items {
            border-bottom: none;
            thead{
                display: none;
            }
            & td{
                border-color: var(--dark-color);
            }
        }
        & .wc-block-cart-item__image{
            width: 130px;
            max-width: 100%;
        }
    }
    
    &.editor-styles-wrapper table.wc-block-cart-items .wc-block-cart-items__header, & table.wc-block-cart-items .wc-block-cart-items__header {
        font-size: 1rem;
        text-transform: uppercase;
    }
    & .editor-styles-wrapper table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name, & table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
        font-size: 1rem;
        color: var(--dark-green);
        font-family: "square", sans-serif;
        text-transform: uppercase;
        text-wrap: balance;
    }
    & .wc-block-components-product-price{
        font-weight: bold;
        font-size: 1.2rem;
    }
}

@media screen and (max-width:1750px){
  .page-template-page-accueil {
    & .heroSection {
        padding: 15rem 10vw 10rem 10vw;
    }
    & .heroTitle {
        font-size: 3rem;
        & p {
          & strong{
            font-size: 3rem;
          }
        }
    }
  }
  .heroVisualContainer{
    width: 470px;
    & .shape {
        width: 340px;
        left: calc(50% - 170px);
    }
    & .leafTop {
        top: -2rem;
        left: 15%;
        width: 170px;
    }
    & .leafBtm {
        bottom: -3rem;
        left: calc(50% - 100px);
        width: 200px;
    }
    & .leafRight {
        top: calc(50% - 40px);
        right: -3rem;
        width: 110px;
    }
  }
  .videoBtn {
      left: 1rem;
  }
  .indexItem {
      margin: 0.5rem;
  }
  .indexTitle {
      font-size: 1.3rem;
      margin: .5rem 2rem .5rem .5rem;
  }
  footer .row {
      display: grid;
      grid-template-columns: 320px 180px 1fr;
      grid-template-rows: repeat(3, auto);
      grid-row-gap: 2rem;
  }
  .logoFooter {
      grid-area: 1/1/2/2;
  } 
  .footerAdress {
    grid-area: 1 / 2 / 2 / 3; 
  }
  .blogLink{
    grid-area: 1 / 3 / 2 / 4;
    align-items: flex-start;
  }
  .mentionsContainer{
    grid-area: 2 / 1 / 3 / 4;
    justify-content: center;
    text-align: center;
  }
}
@media screen and (max-width:1600px){
  header {
      padding: 1rem 5%;
  }
  .logo {
    width: 320px;
  }
  .menu {
    & li {
      & a {
        font-size: .8rem;
        padding: 0.5rem 1.5rem;
      }
    }
  }
  .btnMenu {
    top: 3.45rem;
  }
  .langContainer {
      top: .7rem;
  }
  .page-template-page-accueil {
    & .heroSection {
        padding: 15rem 5vw 10rem 5vw;
    }
  }

  .singleContent .content > * {
      padding-left: 5%;
      padding-right: calc(5% + 380px);
  }
  .singleContent .anchor-container {
      width: calc(90% - 300px);
      margin-left: 5%;
      margin-right: calc(5% + 300px);
  }
  .singleContent .postPanel {
      width: 300px;
      right: 2.5%;
  }
}
@media screen and (max-width:1500px){
  .heroBtn{
    p:nth-child(3) {
        font-family: "DIN Pro", sans-serif;
    }
  }
  .swiperProcess{
    &:not(.swiper-initialized) {
      & .swiper-slide {
          width: 300px;
      }
    }
  }
  .processCardContent {
    text-wrap: balance;
    & p {
        font-family:  "DIN Pro", sans-serif;
        line-height: 1.1;
        font-size: 1rem;
        margin-top: 5px;
    }
  }
  .processCardImg {
    height: 210px;
  }

  .swiperPistol{
    &:not(.swiper-initialized) {
      & .swiper-slide {
        width: 320px;
        margin: 0 1rem;
      }
    }
  }
  .pistolCardBack{
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
  }
  .pistolInfos {
    margin-top: 1rem;
  }
  .pistolName{
    width: calc(100% - (90px - 2rem));
  }
  .pistolPrice {
      padding: 0.5rem;
      font-size: 1rem;
      width: 90px;
  }
  .fonctionnementList {
      width: 650px;
  }

  .heroTitle {
    & p {
      & > strong{
        font-size: 2rem;
        -webkit-text-stroke-width: 2px;
      }
    }
  }

  .steps {
    & .step {
        width: 280px;
    }
  }

  .swiperProduct {
    & .swiper-pagination-bullet {
        width: 3rem;
        height: 2rem;
    }
  }
}
@media screen and (max-width:1400px){
  .greenPart {
    & .greenPartBack{
      overflow: hidden;
      &:before {
          top: -30%;
          left: -20%;
          width: 160%;
          height: 160%;
          transform: rotate(-15deg);
      }
    }
  }
  .greenPartIndex {
      border: none;
      border-radius: 0;
      justify-content: flex-start;
      flex-wrap: wrap;
  }
  .indexTitle{
    margin-top: 2rem;
    width: 100%;
    & p{
      & br{
        display: none;
      }
    }
  }

  .gradeItem {
    & .text {
      & strong{
        font-size: 1rem;
      }
    }
  }

  .heroEclateVisual{
    margin-top: 3rem;
    & .leafTop {
        top: -2rem;
        left: 15%;
        width: 170px;
    }
    & .leafBtm {
        bottom: -3rem;
        left: calc(50% - 100px);
        width: 200px;
    }
    & .leafRight {
        top: calc(50% - 40px);
        right: -3rem;
        width: 110px;
    }
  }

  .schemaSecuriteBlock{
    width: 300px;
  }
}
@media screen and (max-width:1300px){
  .menu {
    & li{
      &:nth-child(3){
        display: none;
      }
    }
  }
  body.menuOpen {
    & .menu {
      & li{
      &:nth-child(3){
          display: flex;
        }
      }
    } 
  }
  .topLinks p {
      font-size: .9rem;
  }
  .btnMenu {
      top: 3.25rem;
  }
  .heroSection{
    padding-top: 12.5rem;
  }
}
@media screen and (max-width:1200px) {
  header{
    padding: 1rem 4rem 1rem 2rem;
  }
  .btnMenu, .langContainer{
    right: 1.5rem;
  }
  .swiperProcess {
    width: 600px;
    max-width: 100%;
  }
  .buyPistolTitle{
    padding-top: 5rem;
  }
  .visualAndVideoBtn{
    width: 100%;
    display: flex;
    justify-content: center;
    &.basicAppear.-xLeft {
        transform: translate(0, 50px);
    }
  }
  .fonctionnementList {
      width: 530px;
      margin-top: 3rem;
      &.basicAppear.-xRight {
          transform: translate(0, 50px);
      }
  }
  .swiperPistol{
    & .pistolInfos{
      width: 300px;
      max-width: 100%;
    }
  }

  .steps {
    & .step {
        width: 210px;
        margin: .5rem 1rem;
        &:not(:last-child):after {
          width: 1.5rem;
          height: 1.5rem;
          right: -1.75rem;
      }
    }
  }

  .groupeSefmat {
      padding-bottom: 30vw;
  }

 

  .productPictoAndPrice {
    & > div {
      & > div {
          width: 3rem;
          min-width: 3rem;
          height: 3rem;
      }
      &.grade{
        & > p{
          display: none;
        }
        & > div{
          display: flex;
          align-items: center;
          width: 100%;
          margin-right: 0;
          & img{
            width: 3rem;
            min-width: 3rem;
            height: 3rem;
            margin-right: .5rem;
          }
          & .gradeInfoIcon{
            position: initial;
            width: auto;
            min-width: 1px;
            height: auto;
            background-color: var(--medium-green);
            border-radius: 1rem;
            padding: .2rem .5rem;
            text-align: center;
            & svg{
              display: none;
            }
            & span{
              display: flex;
              justify-content: center;
              text-align: center;
              color: #fff;
            }
          }
        }
      }
    }
  }

  .singleContent{
    padding: 100px 5% 3rem 5%;
  }
  .singleContent .postPanel{
    position: initial;
    order: 2;
    width: 100%;
    margin-top: 2rem;
  }
   .singleContent .content{
    order: 1;
   }
  .singleContent .content > * {
      padding-left: 0;
      padding-right: 0;
  }
  .singleContent .anchor-container {
      width: 100%;
      margin-left: 0;
      margin-right: 0;
  }
  .singleContent h1 {
      font-size: 1.6rem;
  }
  .singleContent h2{
    font-size: 1.2rem;
  }
  .singleContent h3{
    font-size: 1rem;
  }
  footer {
      & .row {
          & .mentionsContainer {
              text-align: center;
              justify-content: center;
              align-items: center;
              flex-wrap: wrap;
          }
      }
  }
}
@media screen and (max-width:1100px){
  .page-template-page-accueil {
    & .heroSection {
        padding: 15rem 5vw 10rem 5vw;
    }
    & .heroTitle {
        font-size: 2.5rem;
        & p {
          & strong{
            font-size: 2.5rem;
            -webkit-text-stroke-width: 3px;
          }
        }
    }
  }
  .heroVisualContainer{
    width: 400px;
    & .shape {
        width: 280px;
        left: calc(50% - 140px);
    }
    & .leafTop {
        top: -1rem;
        left: 20%;
        width: 140px;
    }
    & .leafBtm {
        bottom: -2rem;
        left: calc(50% - 85px);
        width: 170px;
    }
    & .leafRight {
        top: calc(50% - 20px);
        right: -2rem;
        width: 90px;
    }
  }
  .videoBtn {
      left:0;
  }
}
@media screen and (max-width:991px) {
  header{
    padding-top: 2rem;
  }
  .menu {
      & li {
          &:nth-child(1), &:nth-child(2) {
              display: none;
          }
      }
  }
  body.menuOpen {
    & .header_right {
      margin-right: 0;
    }
    & .menu {
        & li {
            &:nth-child(1), &:nth-child(2) {
                display: flex;
            }
        }
    } 
  }
  .header_right {
    margin-right: 2.5rem;
  }
  .topLinks{
    position: absolute;
    left: 0;
    top: .5rem;
    width: 100%;
    padding: 0 5vw;
  }
  .btnMenu {
      top: 2.5rem;
  }
  .langContainer {
      right: 4.3rem;
      top: 2.5rem;
  }
  .page-template-page-accueil {
      & .heroSection {
          padding: 10rem 5vw 5rem 5vw;
      }
      & .heroContentText{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
      }
      & .heroTitle {
        width: 100%;
        & br{
          display: none;
        }
        & p {
          font-size: 2rem;
            & strong {
                font-size: 2rem;
                -webkit-text-stroke-width: 2px;
            }
        }
        + .heroBtn{
          margin-right: 1rem;
        }
      }
      & .heroBtn{
          width: calc(50% - .5rem);
      }
  }
  .heroVisualContainer {
    margin-top: 3rem;
    width: 100%;
    & .shape {
        width: 100%;
        height: calc(100% + 2rem);
        top: -1rem;
        left: 0;
        border-radius: 3rem;
    }
    & .pistoletRipack, .logoAndCircle{
      width: 340px;
      height: 340px;
      left: calc(50% - 170px);
      top: calc(50% - 170px);
    }
    & .leafTop {
        top: -1rem;
        left: calc(50% - 60px);
        width: 140px;
    }
    & .leafRight {
        top: calc(50% + 20px);
        right: calc(50% - 200px);
    }
  }
  .videoBtn {
    left: calc(50% - 160px);
    & div {
      & svg{
        fill: #fff;
      }
    }
    & p {
      color: #fff;
    }
  }
  .indexItem{
    width: 100%;
    justify-content: flex-start;
  }

  .page-template-page-recycler {
    & .heroSection{
      padding-top: 10rem;
    }
  }
  .steps{
    flex-direction: column;
    align-items: center;
    & .step{
      width: 400px;
      max-width: 100%;
      margin: .5rem 0;
      &:not(:last-child):after{
        content: none;
      }
    }
  }
  .wpcf7-form {
    & .choixRecompense {
      & .wpcf7-checkbox .wpcf7-list-item {
        width: 520px;
        max-width: 100%;
        margin: 0.75rem;
        &:not(.last) label{
          margin-right: 0;
        }
      }
      & .wpcf7-checkbox .wpcf7-list-item.first .wpcf7-list-item-label:before{
          margin-top: 9rem;
        }
    }
  }
  .heroSection, .topPageBlog{
    padding-top: 10rem;
  }

  .bubble {
      width: 150px;
      height: 150px;
      margin: 1rem;
      &:nth-child(2) {
          width: 190px;
          height: 190px;
      }
      & p {
        font-size: .8rem;
      }
  }

  .heroSocieteVisual{
    margin-top: 2rem;
  }
  .carteMonde {
    margin-bottom: -15rem;
    & .carte{
      padding: .5rem;
    }
    & .citation {
      bottom: 20%;
      & p{
        font-size: 1rem;
      }
      & strong {
          font-size: 1.5rem;
      }
    }
  }
  .securiteContent{
    padding-top: 10rem;
  }
  .securiteContent .block {
      width: 100%;
      padding-right: 1rem;
      padding-left: 1rem;
      max-width: 100%;
  }
  .schemaSecuriteBlock {
      width: 300px;
      max-width: 100%;
      & div{
        align-items: center;
      }
  }
  .engagementsRespect  {
    & .container-fluid:not(.timelineContainer){
      & .roundedImg{
        order: 1;
        margin-bottom: 2rem;
        height: 300px;
      }
      & .block{
        order: 2;
        width: 100%;
        max-width: 100%;
      }
    }
    
  }

  .gradeInfo{
    width: 400px;
  }
  
  .gradeItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    & .text {
      display: none;
      & strong{
        font-size: .9rem;
      }
    } 
    & .gradeInfoIcon{
      position: initial;
      width: auto;
      height: auto;
      margin-top: .5rem;
      border-radius: 1rem;
      background-color: var(--medium-green);
      padding: .35rem 1rem;
      color: #fff;
      & span{
        color: #fff;
        display: inline-block;
        font-size: .9rem;
      }
      & svg{
        display: none;
      }
    }
  }
  .gradePicto {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    & img{
      width: 4rem;
      height: 4rem;
    }
  }

  .gradeFilterContainer{
    margin-top: 3rem;
  }

  .heroProduct{
    padding-top: 8rem;
  }
  .productDetails{
    order: 1;
  }
  .productPictoAndPrice{
    width: 100%;
  }
  .descriptionContainer{
    & .text {
      & p{
        width: 100%;
        max-width: 100%;
      }
    }
  }
  .productActions {
      justify-content: flex-start;
      width: 100%;
      margin-top: 1rem;
      border-top: 2px solid #009a90;
  }
  .certificationsProduct {
    justify-content: flex-start;
    & img {
      width: 110px;
    }
  }
  .productImgContainer{
    order: 2;
    margin-top: 2rem;
  }
  .swiperProduct .swiper-slide:first-child picture {
    min-height: 300px;
    margin: 0 auto;
  }


  .postBlock{
    width: 100%;
    margin: 2rem 0;
    padding: 0 1rem;
  }
  .postBlock_content{
    padding: 1rem 0;
  }

  .heroContact{
    & .row{
      justify-content: flex-start;
    }
  }
  .contactBlock {
      align-items: flex-start;
      margin-right: 0;
      padding: 0 2rem;
  }
  

  body {
      &.woocommerce {
          & .breadcrumb {
              margin-bottom: 1rem;
              padding-left: 1rem;
          }
          & .single_variation {
              & .price {
                font-size: 1rem;
                & .woocommerce-Price-currencySymbol{
                  font-size: 1rem;
                }
                  & ~ form button.single_add_to_cart_button {
                      line-height: 3;
                      height: 3rem;
                  }
              }
          }
      }
  }

  .defautTop{
    padding-top: 8rem;
  }

  footer {
    & .row {
      display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;
      & .mentionsContainer {
        text-align:center;justify-content:center;align-items:center;flex-wrap:wrap;
      }
    }
  }
}
@media screen and (max-width:768px) {
  .page-template-page-accueil {
      & .heroTitle {
        + .heroBtn{
          margin-right: 0;
        }
      }
      & .heroBtn{
          width: 100%;
          margin: .5rem 0;
      }
  }
}

@media screen and (max-width:767px){
  #grade-filter-form {
      flex-direction: column;
      align-items: flex-start;
      & label{
        margin-right: 0;
        margin-bottom: .5rem;
      }
  }
  .videoScreenshot .videoBtn div {
      width: 5rem;
      height: 5rem;
  }
}

@media screen and (max-width:640px) {
  .title {
    font-size:1.5rem;
    &.sub {
      & p:last-child{
        font-size: 1rem;
      }
    }
  }
  .secondTitle{
    font-size: 1.1rem;
  }
  ol {
    & > li {
      padding-left: 1rem;
        &::before{
          width: 2rem;
          min-width: 2rem;
          height: 2rem;
          top: -7px;
          left: -1.5rem;
          font-size: .8rem;
        }
      }
  }

  .logo {
    width: 260px;
  }
  .topLinks p{
      font-size: .8rem;
  }
  .page-template-page-accueil {
      & .heroSection {
          padding: 7rem 5vw 5rem 5vw;
      }
  }
  .heroBtn {
    p:nth-child(2){
      font-size: 1rem;
    }
  }
  .process{
    padding-top: 2.5rem;
  }
  .visualAndVideoBtnContainer {
    & .leafBtm {
        bottom: -3rem;
        left: calc(50% - 75px);
        width: 150px;
    }
    & .leafTop{
        left: 20%;
        width: 110px;
    }
    & .videoBtn {
        width: 4rem;
        height: 4rem;
        left: calc(50% - 2rem);
        bottom: calc(50% - 2rem);
    }
  }

  .heroEclateVisual{
    & .leafBtm {
        bottom: -3rem;
        left: calc(50% - 75px);
        width: 150px;
    }
    & .leafTop{
        left: 20%;
        width: 110px;
    }
    & .leafRight {
        top: calc(50% + 20px);
        right: calc(50% - 150px);
        width: 80px;
    }
  }
  .videoContainer{
    margin-top: -10rem;
  }
  .sefmatLogo{
    width: 200px;
  }
  .bubblesContainer{
    flex-direction: column;
    align-items: center;
    & .bubble{
      width: 200px;
      height: 200px;
      margin: 1rem 0;
      &:nth-child(2) {
          width: 200px;
          height: 200px;
      }
    }
  }
  .heroContentText .text {
      padding-left: 0;
  }

  .fonctionnementList{
    & ol{
       & li{
          padding-left: 0;
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          & strong{
            margin-bottom: .5rem;
          }
          &::before{
            position: initial;
            margin-bottom: 1rem;
            width: 3rem;
            min-width: 3rem;
            height: 3rem;
            font-size: 1rem;
          }
          & ul{
            padding-left: 0;
          }
       }
    }
  }
  body {
    &.page-template-page-recycler {
      & .heroTitle {
        & p {
          & > strong {
            -webkit-text-stroke-width:3px;
          }
        }
      }
    }
    & .greenPartIndex {
      flex-direction:column;margin-inline:auto;
    }
  }

  .timeline {
    padding: 0 1rem 1rem 2rem;
    & .timeLineIndicator {
      right: auto;
      left: 1rem;
      height: calc(100% - 3rem);

    }
    
    & .historyBlock {
      width: 100%;
      opacity: 1;
      &.left {
        align-items: flex-start;
        text-align: left;
        transform: none;
        margin-top: 1rem;
        & .secondTitle {
            text-align: left;
            align-items: flex-start;
        }
      }
      &.right {
        margin-top: 1rem;
        transform: none;
      }
    }
  }

  .heroContact{
    padding-top: 6rem;
  }
  .contactBlock{
    padding: 0 1rem;
  }
  
  form.wpcf7-form, form.wc-coupon-access-form {
    & label {
      width:100%!important;margin-inline:auto;flex-basis: 100%!important;
    }
    & .legend {
      margin:.75rem 0;
    }
    & .pistolet{
      padding: 1rem 1rem 2rem 1rem;
      &:has([name*="recompense_"]:checked) {
          & .contenuPack {
              display: block;
              max-width: 100%;
          }
      }
    }
    & .choixRecompense {
      & .wpcf7-checkbox {
        flex-direction:column;align-items:flex-start;
        & .wpcf7-list-item {
          width:100%;
          margin: .75rem 0;
        }
      }
    }
    & .contenuPack {
      & .wpcf7-form-control {
        flex-direction:column;align-items:center;
      }
      & .wpcf7-checkbox .wpcf7-list-item{
        width: 100%;
        &:not(.last) label {
            margin-right: 0;
            width: 100%;
        }
      }
      & .wpcf7-list-item-label{
        width: 100%;
        text-align: center;
      }
    }
    & .wpcf7-acceptance {
        padding: 0;
    }

  }

  .wpcf7 .wpcf7-form .wpcf7-response-output {
      width: calc(100% - 2rem);
      left: 1rem;
  }

  .mentions, .cgvContent {
      padding-top: 8rem;
  }

  body {
      &.woocommerce-cart, &.woocommerce-page {
          & #survey_checkout {
            padding: 0;
            border-radius: 0;
            border:none;
              & label {
                  margin-bottom: 0;
                  flex-basis: auto;
              }
          }
      }
  }

    .is-mobile .wc-block-components-form .wc-block-components-checkout-step:after, .is-small .wc-block-components-form .wc-block-components-checkout-step:after {
        content: none !important;
    }
    .is-mobile .wc-block-components-form .wc-block-components-checkout-step,  .is-small .wc-block-components-form .wc-block-components-checkout-step {
      margin-bottom: 5px;
    }

    .is-mobile .wc-block-components-form .wc-block-components-checkout-step{
      margin-bottom: 5px !important;
    }
    .is-mobile .wc-block-checkout__terms{
      margin-bottom: 5px !important;
    }
    .wp-block-woocommerce-checkout-actions-block .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button{
      width: 100% !important;
    }
    
    
  .swiperProduct .swiper-pagination-bullet {
      width: 1rem !important;
      min-width: 1rem;
      height: 1rem;
      overflow: hidden;
      background-color: transparent;
      border: 1px solid var(--dark-color);
      opacity: 0.6;
      & img{
        display: none;
      }
      &.swiper-pagination-bullet-active {
        opacity: 1;
        background-color: var(--dark-color);
      }
  }
  .productPictoAndPrice {
    & > div {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
        & > div{
          margin-right: 0;
        }
        &.grade {
            & > div {
                flex-direction: column;
                align-items: center;
                & img{
                  margin-right: 0;
                }
            }
            
            & .gradeInfoIcon{
              margin-top: .5rem;
              padding: .5rem;
              & span{
                font-size: .7rem;
              }
            }
        }
        & > p{
          margin-top: .5rem;
          font-family: "DIN Pro", sans-serif;
        }
    }
  }
  footer {
    & .row {
        & .mentionsContainer {
            flex-direction: column;
            align-items: center;
        }
    }
  }
}

@media screen and (max-width:580px){
  .topLinks{
    display: none;
  }
  .menu {
    & li{
      &:has(.cart-contents){
        display: none;
      }
    }
  }
  .langContainer{
    display: none;
  }
  body{
    &.menuOpen{
      & .header_right {
        justify-content: flex-start;
        overflow-y: scroll;
      }
      & .menu{
        & li{
          &:has(.cart-contents){
            display: flex;
            position: absolute;
            left: 5%;
            top: 2rem;
            width: 4rem;
            padding: 0;
            margin: 0;
          }
          & a{
            font-size: .8rem;
            padding: 1rem 1.3rem;
          }
        }
      }
      .langContainer{
        display: flex;
      }
    }
  }

  .valeurs{
    & .title{
      align-items: center;
      text-align: center;
      margin-bottom: 3rem;
    }
  }
   .listeValeur{
    flex-direction: column;
    align-items: center;
    padding: 0 1rem;
  }
  .listeValeur .pictoContain {
    min-width: 120px;
    height: 120px;
    padding: 1.5rem;
    margin-right: 0;
    margin-bottom: 0;
    border-radius: 2rem;
  } 
  .listeValeur .text{
    max-width: 100%;
  }
  .listeValeur .text p:first-child{
    text-align: center;
  }  

  .gradeItem{
    width: 33.33%;
    padding: .5rem;
    margin: 0;
    & .gradeInfoIcon{
      padding: .35rem .5rem;
        text-align: center;
    }
  }
  .infosSwitcher {
    & .btn{
      font-size: .8rem;
    }
  }

  .videoScreenshot .videoBtn {
    padding-bottom: 1rem;
    & div {
      width: 3rem;
      height: 3rem;
    }
  }

  .greenPart {
      & .greenPartBack {
          &:before {
              top: -30%;
              left: -30%;
              width: 180%;
              height: 180%;
          }
      }
  }

  .tableRow{
    & .titleRow {
        width: 120px;
        font-size: .9rem;
        border-right: 2px solid #1d1d1b;
        height: 100%;
        padding: .5rem .5rem .5rem 0;
    }
    & .valueRow {
        width: calc(100% - 120px);
        text-align: left;
        font-size: .9rem;
    }
  }

  body{
    &.woocommerce{
      & .single_variation {
        border-radius: 2rem;
        padding: 1rem;
        & .price {
            font-size: 1rem;
            width: 100%;
            & .woocommerce-Price-amount{
              justify-content: center;
              text-align: center;
              width: 100%;
            }
            & ~ form  {
                width: 100%;
                & button.single_add_to_cart_button{
                  width: 100%;
                  font-size: 1rem;
                  font-weight: bold;
                  font-family: "Din Pro", sans-serif;
                }
            }
        }
      }
    }
  }
}

@media screen and (max-width:460px){
  .heroVisualContainer {
    & .pistoletRipack{
      width: 210px;
      height: 210px;
      left: calc(50% - 105px);
      top: calc(50% - 105px);
    }
    & .logoAndCircle{
      width: 220px;
      height: 220px;
      left: calc(50% - 110px);
      top: calc(50% - 110px);
    }
    & .leafTop {
        top: -1rem;
        left: calc(50% - 55px);
        width: 110px;
    }
    & .leafRight {
        top: calc(50% + -30px);
        right: calc(50% - 130px);
        width: 70px;
    }
    & .leafBtm {
      bottom: -3rem;
      left: calc(50% - 60px);
      width: 120px;
    }
  }
  .videoBtn {
    left: calc(50% - 40px);
    bottom: calc(50% - 50px);
    & p {
      color: #fff;
    }
  }

  .productList {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3rem;
  }
  .productItem{
    max-width: 100%;
    width: 100%;
  }
  .swiperPistol.swiper-initialized{
    padding-bottom: 5rem;
  }
  .pistolCard{
    padding: 1rem;
  }
  .pistolCard .btn {
      margin-bottom: -2rem;
  }
  .pistolCardVisual {
      padding: 0rem;
      width: 260px;
  }
  .pistolCardVisual > img{
    transform: scale(0.8);
  }
  .pistolInfos{
    flex-direction: column;
    align-items: center;
    margin-top: 0;
  }
  .pistolName{
    width: 100%;
    padding: .5rem 1rem 1.5rem 1rem;
    border-radius: 2rem;
    text-align: center;
  }
  .pistolPrice{
    width: calc(100% - 2rem);
    margin-left: 0;
    margin-top: -1rem;
  }

  .heroContent {
    & img{
      width: 200px;
    }
  }

  .faqContainer_item_ask{
    font-family: "Din Pro", sans-serif;
  }
  .faqContainer_item_response > div {
      padding: 1.5rem;
  }

  .singleContent .anchor-container{
    padding: 1rem;
    border-radius: 1rem;
  }
  .singleContent .postPanel .stickyPanel > div{
    border-radius: 1rem;
    padding: 1rem;
  }

  form.wpcf7-form, form.wc-coupon-access-form {
      & .pistolet {
          padding: 0;
          background: transparent;
          border-radius: 0;
          &:has([name="recompense"]:checked) {
              margin-bottom: 2.5rem;
              & .contenuPack {
                  max-width: 100%;
              }
          }
          & + .pistolet{
            padding-bottom: 1.5rem;
            border-bottom: 2px solid var(--light-green);
          }
          & .remove-product-row{
            top: -1.2rem;
            right: calc(50% - 12px);
          }
      }
      & .choixRecompense .wpcf7-checkbox .wpcf7-list-item.last .wpcf7-list-item-label{
        &:after {
            bottom: calc(50% - 40px);
        }
        &:before{
          margin-top: 9rem;
        }
      }
  }

  .page-template-default {
      & .wc-block-cart__main {
          & .wc-block-cart-items {
              & td {
                margin-bottom: 0;
                  &.wc-block-cart-item__total{
                    display: none;
                  }
              }
          }
      }
  }
} 



/* PROVISOIR */ 

section.partenaires .container-fluid{
  display: none;
}