/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
 

body {
    font: 300 16px Montserrat;
    color: #000
}

.container {
  width: 100%;
  max-width: 100%;
}

.product-accessories {
  margin-top: 70px !important;
}

.product-accessories .h5 {
  margin-bottom: 30px !important;
  text-align: center !important;
}

#product-comments-list-header {
  justify-content: center;
}

.section-2encarts > .container,
.section-4encarts > .container,
.section > .container,
#custom-text > .container,
.reassurance > .container,
.block_newsletter > .row,
.footer-container > .container,
.featured-products > .container {
  width: 100%;
  max-width: 1560px;
}

.sticky-wrapper.adtm_sticky #adtm_menu {
  width: 100% !important;
  left: 0 !important;
  background: #fff !important;
}

.sticky-wrapper.adtm_sticky #adtm_menu div#adtm_menu_inner {
  width: 100% !important;
  max-width: 1560px !important;
  margin: 0 auto !important;
}

a {
  color: #141f39;
  font-weight: bold;
  text-decoration: none ;
}

a:hover{
  color: #000 ;
  font-weight: bold;
  text-decoration: none ;
}

/*#content-wrapper a {
  font-weight: bold !important;
}*/

#subcategories ul li .subcategory-name {
  text-transform: initial !important;
  color: #141f39 !important;
}

#subcategories ul li .subcategory-image a {
  display: block;
  padding: 9px;
  border: 1px solid transparent;
}

#subcategories ul li:hover .subcategory-image a {
  padding: 5px;
  border: 5px solid transparent;
}

#carousel,
#header .header-top,
.adtm_menu_container,
#header .ets_mm_megamenu,
#product #wrapper > .container {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
}

#product #wrapper > .container {
  padding: 0px !important;
}

.btn-primary:not([disabled]):not(.disabled):active,
.btn-primary:not([disabled]):not(.disabled).active,
.show>.btn-primary.dropdown-toggle,
.btn.btn-primary.js-mailalert-add,
.btn.btn-primary.js-mailalert-add:focus-visible,
.btn.btn-primary.js-mailalert-add:focus {
  background-color:#141f39!important;
  border-color:#141f39!important;
  box-shadow:none!important
}
textarea,
select,
.form-control {
  outline:none!important;
  box-shadow:none!important;
  border:1px solid #232323!important;
  color:#000!important;
  font: 400 16px Montserrat;
  padding-left:5px!important;
  padding-right:5px!important;
  opacity:1!important
}
select::placeholder,
textarea::placeholder,
.form-control::placeholder,
.form-control:focus,
.form-control:active,
.form-control:focus-visible,
.input-group.focus {
  outline:none!important;
  box-shadow:none!important;
  color:#000!important;
  font: 400 16px Montserrat;
  padding-left:5px!important;
  padding-right:5px!important;
  opacity:1!important
}
.custom-radio,
.custom-checkbox input[type="checkbox"]+span {
  border:1px solid #000!important
}
input[type="radio"],
input[type="checkbox"] {
  accent: color #141414!important;
}

input[type="radio"] {
  width:18px;
  height:18px
}

.input-group-btn button.btn,
.group-span-filestyle.input-group-btn .btn.btn-default {
  color:#fff!important;
  font: 400 16px Montserrat;
  background:#141f39!important;
  height:37px!important
}
.btn.btn-comment,
.btn-comment.disabled,
.btn-comment:disabled,
.btn.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
  background-color:#141f39!important;
  border-color:#141f39!important;
  font: 400 16px Montserrat;
  color:#fff!important;
  outline:0!important;
  box-shadow:none!important
}
.btn.btn-comment:hover,
.btn-comment.disabled:hover,
.btn-comment:disabled:hover,
.btn.btn-primary:hover,
.btn-primary.disabled:hover,
.btn-primary:disabled:hover {
  background-color:#141f39!important;
  border-color:#141f39!important;
  font: 400 16px Montserrat;
  color:#fff!important;
  outline:0!important;
  box-shadow:none!important
}
.btn-comment-big {
  padding:8px!important
}
.btn.btn-secondary,
.btn-secondary.disabled,
.btn-secondary:disabled {
  background-color:#141f39!important;
  border-color:#141f39!important;
  font: 400 16px Montserrat;
  color:#fff!important;
  outline:0!important;
  box-shadow:none!important
}
.btn.btn-secondary:hover,
.btn-secondary.disabled:hover,
.btn-secondary:disabled:hover {
  background-color:#141f39!important;
  border-color:#141f39!important;
  font: 400 16px Montserrat;
  color:#fff!important;
  outline:0!important;
  box-shadow:none!important
}

#header {
  box-shadow: none !important;
}

.wishlist {
  margin: 0px 15px !important;
}

.layout_layout1 .ets_mm_megamenu_content {
  border-bottom: none !important;
  border-top: none !important;
  background: none !important;
}

img {
    max-width: 100% !important;
    height: auto !important;
}

.titre-encart {
  font:400 25px Montserrat;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.2em;
}

.description-encart {
  font:400 14px Montserrat;
  color: #fff;
  line-height: 1.5em;
}

.btn-encart .bouton {
  font:400 14px Montserrat;
  color: #fff;
  text-transform: uppercase;
  border-bottom: 2px solid #fff;
}

.bouton-parallaxe {
  background: #141f39;
  color: #fff !important;
  font:400 14px Montserrat;
  border-radius: 30px;
  text-transform: uppercase;
  padding: 12px 20px !important;
}

#wrapper {  
  box-shadow: none;
  background-color: #fff;
}

#index #wrapper {  
  padding-top: 0;   
}

.block-category {
    min-height: unset;
    border: none;
    box-shadow: none;
}

h1, .h1,
.h2.products-section-title,
#block-newsletter-label {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font:400 30px Montserrat;
  color: #141f39;
  text-transform: uppercase
}

h1, .h1,
.h2.products-section-title {
  margin-bottom: 40px !important;
}

h1::after, .h1::after,
#block-newsletter-label::after,
.h2.products-section-title::after {
    content: "";
    display: flex;
    margin: 10px auto 10px;
    width: 100px;
    height: 2px;
    background: #141f39;
}

.modal-body .h1::after,
#product .product-container .h1::after {
  margin: 10px auto 10px 0 !important;
}

.modal-body .h1,
#product .product-container .h1 {
  align-items: start;
  text-align: left;
}

.carousel {
  box-shadow: none;
  margin-bottom: 0;
}

.carousel .carousel-inner {
  height: auto;
  margin-bottom: 0
}

.carousel figure {
  margin-bottom: 0
}

#carousel figcaption.caption {display: none}

.carousel .carousel-control .icon-next:hover i, 
.carousel .carousel-control .icon-prev:hover i {
  color: #fff !important;
}

#wrapper .banner,
.carousel .carousel-item {
    text-align: center;
}

#custom-text p, #custom-text .page-content.page-cms ul, 
.page-content.page-cms #custom-text ul {
  color: #000 !important;
  text-transform: none!important;
  font: 400 18px Montserrat;
  line-height: 1.5rem !important;
  text-align: left !important;
}

#block_myaccount_infos .myaccount-title a,
.footer-container .links .h3,
.footer-container .h3,
.links p.h3 {
  color: #fff !important;
  text-transform: none!important;
  font: 400 16px Montserrat;
  margin-bottom: 1.25rem;   
}

.footer-container .block_footer p,
.footer-container .block_footer a,
.footer-container .block_footer span,
.footer-container li a {
  color: #fff !important;
  font: 400 16px Montserrat !important; 
}

.title-footer > img {
  margin-bottom: 15px !important;
}

.footer-container li a:hover {
  color:#fff;
}

.section-vetements {
  background-image: url(../img/fond-encart1.jpg);
  min-height: 52.28vw;
  padding: 50px 20px 50px 50px !important;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.section-2encarts .hommes {
  background-image: url(../img/Encart2.jpg);
  min-height: 52.28vw;
  padding: 50px 20px 50px 50px !important;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.section-2encarts .femmes {
  background-image: url(../img/Encart3.jpg);
  min-height: 52.28vw;
  padding: 50px 20px 50px 50px !important;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.section-4encarts .vet-intervention {
  background-image: url(../img/Encart4.jpg);
  min-height: 107.17vw;
  padding: 50px 20px 50px 50px !important;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.section-4encarts .marbrerie {
  background-image: url(../img/Encart5.jpg);
  min-height: 52.28vw;
  padding: 50px 20px 50px 50px !important;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.section-4encarts .chaussures {
  background-image: url(../img/Encart6.jpg);
  min-height: 52.28vw;
  padding: 50px 20px 50px 50px !important;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.section-4encarts .accessoires {
  background-image: url(../img/Encart7.jpg);
  min-height: 107.17vw;
  padding: 50px 20px 50px 50px !important;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.hommes,
.femmes,
.vet-intervention,
.marbrerie-chaussures,
.accessoires {
  width: 100%;
}


.footer-container {
  background: #141f39 !important;
  padding: 75px 0px 85px !important;
}

.incomm {
  background: #1a1a1a;
  padding: 20px 50px;
  margin-bottom: 0;
  color: #fff;
}

.incomm p, .incomm a {
  color: #fff !important;
  font: 400 16px Montserrat !important;
}

.table th, .table td {
  border-top: none !important;
}


.parallaxe {
  width: 100%;
  background-image: url(../img/encart8-parallaxe.jpg);
  background-position: center;
  position: relative;
  background-attachment: fixed;
  height: 400px;
  padding: 20px 0 !important;
}


.block_newsletter {
  max-width: 100%;
}

.newsletter-description {
  color: #000 !important;
  font: 400 18px Montserrat !important;
  margin-bottom: 40px !important;
}

#block-newsletter-label {
  color: #141f39 !important;
  font: 400 30px Montserrat !important;
  text-transform: initial !important;
}

.psgdpr_consent_message {
  color:#000;
  font: 400 14px Montserrat !important;
  margin-top: 10px !important;
}

.psgdpr_consent_message a {
  color:#141f39 !important;
  font-weight: bold !important;
}

.block_newsletter {
  display:flex;
  flex-direction:row-reverse;
  align-items:center;
  justify-content:center
}

.block_newsletter form input {
  height: 46px;
  box-shadow: none;
  background: transparent !important;
}

.block_newsletter input[type="submit"]:focus-visible,
.block_newsletter input[type="submit"]:active,
.block_newsletter input[type="submit"]:focus,
.block_newsletter input[type="submit"] {
  margin-left:0px!important;
  background-color:transparent !important;
  border-radius:50px;
  color:#141f39;
  font: 400 17px Montserrat !important;
  width:auto;
  height:46px;
  opacity:1;
  padding:0;
  border-color:transparent !important;
  position:relative;
}

.block_newsletter form input[type="email"]:focus,
.block_newsletter form input[type="email"]:focus-visible,
.block_newsletter form input[type="email"] {
  width:100%;
  padding:11px 0px!important;
  border:none !important;
  outline:0;
}

.block_newsletter form input[type="email"]:focus::placeholder,
.block_newsletter form input[type="email"]:focus-visible::placeholder,
.block_newsletter form input[type="email"]::placeholder {
  color:#141f39;
  font: 400 17px Montserrat !important;
  opacity:1!important;
  padding:11px 15px!important
}

.block_newsletter form .form-content {
  border: 2px solid #acacac;
  border-radius: 50px;
  max-width: 477px;
  width: 100%;
}

#search_widget form input:focus,
#search_widget form input:focus-visible,
#search_widget form input {
  background-color: transparent !important;
  border-radius: 0px !important;
  font: 400 14px Montserrat !important;
  color: #141f39;
}

#search_widget form input:focus::placeholder,
#search_widget form input:focus-visible::placeholder,
#search_widget form input::placeholder {
  font: 400 14px Montserrat !important;
  color: #141f39;
}

.header-top #search_widget input {
  padding: 8px 0 !important;
}

 #search_widget {
    min-width: auto;
    border-bottom: 1px solid #141f39;
    width: 200px;
  }

.picto-search {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.reassurance .text-reassu,
.reassurance .text-reassu a {
  color:#141f39;
  font: 400 20px Montserrat !important;
  text-align: center;
}

.reassurance .img-fluid {
  margin-bottom: 10px !important;
}

.block_newsletter {
  padding: 80px 20px!important;
}

.reassurance {
  padding: 40px 20px 100px !important;
}

#footer {
  padding-top: 0 !important;
}

.product-miniature .product-title a,
.product-miniature .product-price-and-shipping {
  color:#000;
  font: 400 20px Montserrat !important;
  text-align: center;
}

.product-description-short p,
.product-description-short span {
  color:#000;
  font: 400 16px Montserrat !important;
  text-align: center;
}

.d-btn-product a {
  background: transparent;
  color: #000;
  font:400 17px Montserrat;
  border-radius: 30px;
  text-transform: uppercase;
  padding: 12px 30px !important;
  border: 2px solid #acacac;
  display: inline-block;
}


#content-wrapper .btn-encart .bouton,
#content-wrapper .bouton-parallaxe,
#content-wrapper .d-btn-product a {
  font-weight: 400 !important;
}

.d-btn-product a:hover {
  background: #141f39;
  color: #fff;
  border: 2px solid #141f39;
}

.product-flags li.product-flag {
  background: #141f39;
  color: #fff;
  font:400 17px Montserrat;
}

.product-miniature .highlighted-informations .quick-view:hover {
  color: #141f39;
}

.contact-rich .block .data {
    color: #000 !important;
    font:400 17px Montserrat;
}

.contact-rich .block .data a {
    color: #141f39 !important;
    font:bold 17px Montserrat;
}

.custom-radio input[type="radio"]:checked+span {
    background-color: #141f39 !important;
}

.featured-products {
  padding: 60px 0px 20px !important;
}

#custom-text {
  padding: 80px 0px !important;
  margin-bottom: 0 !important;
}

.btn-contact-footer {
  background: transparent;
  color: #fff;
  font:400 16px Montserrat;
  border-radius: 30px;
  padding: 10px 40px !important;
  border: 2px solid #fff;
  display: inline-block !important;
}

.footer-container .block_footer .btn-contact-footer:hover {
  background: #fff;
  color: #141f39 !important;
  border: 2px solid #fff;
}

.cart-products-count {
  background: #141f39;
  width: 20px;
  height: 20px;
  display: inline-block;
  border-radius: 50px;
  color: #fff;
  position: absolute;
  top: -10px;
  right: -15px;
  text-align: center;
  font:400 16px Montserrat;
}

.header-center {
  text-align: center;
}

.header-center a {
  display: inline-block;
}

.blockcart .header {
  position: relative !important;
}

#header .header-left p,
#header .header-left a {
  font:400 16px Montserrat;
  color: #000 !important;
}

.wishlist-modal.fade .modal-dialog {
  z-index: 99999999;
}

.block_newsletter .custom-checkbox label {
  text-align: center;
}


.block_newsletter input[type="submit"],
.block_newsletter input[type="submit"]:hover,
.block_newsletter input[type="submit"]:active,
.block_newsletter input[type="submit"]:focus {
  background: transparent !important;
  color: #141f39 !important;
  border: none !important;
}


#index #wrapper > .container {
  padding: 0px !important;
}

.product-miniature .product-description-short p {
  margin-bottom: 0px !important;
}

#product-description-short p {
  margin-bottom: 0px !important;
  font:400 16px Montserrat;
  color: #000 !important;
}

.form-control-select,
.form-control-select:focus,
.form-control-select:active,
.form-control-select:focus-visible {
  background-position: center right !important;
  padding-right: 20px !important;
}


.product-miniature,
.product-miniature .thumbnail-container {
  height: 100%;
}

.product-miniature .thumbnail-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 1.563rem;
  margin-bottom: 0px !important;
}

.product-images > li.thumb-container > .thumb.selected, 
.product-images > li.thumb-container > .thumb:hover {
  border: #141f39 3px solid;
}

.d-btn-product {
  margin-top: auto;
}

.section-description .tabs {
  padding: 0px !important;
}

.tabs .nav-tabs .nav-link {
  font:400 20px Montserrat;
  color: #000 !important;
  text-transform: uppercase !important;
}

.product-actions .control-label,
.section-description .product-description p,
.product-information .product-description p {
  font:400 16px Montserrat;
  color: #000 !important;
}

.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link:hover {
  color: #141f39;
  border-bottom: #141f39 3px solid;
}

#adtm_menu td.adtm_column_wrap_td:nth-last-child(1) span.column_wrap_title::before {
  display: none !important;
}

@media (max-width: 767px) {
  .block_newsletter form .form-content {
    max-width: 477px;
    width: 90%;
  }

  #header .top-logo img {
    width: auto;
    max-height: initial !important;
  }

  #header .top-logo {
    min-height: auto !important;
    justify-content: center;
  }

  #header .header-left p,
  #header .header-left a {text-align: center;}

  #header .header-left {
    margin-bottom: 15px !important;
  }

  #header .header-center {
    margin-bottom: 15px !important;
  }

  .d-btn-product a {
    font: 400 2.22vw Montserrat;
    padding: 12px 3.91vw !important;
  }

  .product-miniature .product-title a, 
  .product-miniature .product-price-and-shipping {
    font: 400 2.61vw Montserrat !important;
  }

  .product-miniature .product-description-short {
    font-size: 14px !important;
  }


}

@media (max-width: 991px) {
  .carousel {
    left: auto;
    width: 100%;
    padding-bottom: 0;
    margin-left: 0;
  }

  #search_widget {
    margin-bottom: 0 !important;
    margin-right: 15px !important;
  }


  #carousel,
  .section-vetements, 
  .section-2encarts .hommes, 
  .section-2encarts .femmes, 
  .section-4encarts .vet-intervention, 
  .section-4encarts .marbrerie, 
  .section-4encarts .chaussures {
    margin-bottom: 20px !important;
  }

    #carousel,
  .section-2encarts > .container,
  .section-4encarts > .container,
  .section > .container,
  #product #wrapper > .container,
  #custom-text > .container,
  .reassurance > .container,
  .block_newsletter > .row,
  .footer-container > .container,
  .featured-products > .container {
    width: 80%;
  }

  .footer-container .block_footer {
    margin-bottom: 25px !important;
  }

  .footer-container .block_footer p, 
  .footer-container .block_footer a,
  .footer-container .block_footer p a,
  .footer-container .block_footer span,
  .newsletter-description,
  .footer-container li a {
    text-align: center !important;
  }
}

@media (min-width: 768px) {
  .mm_menus_ul,
  .scroll_heading .mm_menus_ul{
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

  #search_widget {margin-right: 15px !important;}

  .titre-encart,
  #block-newsletter-label {
    font-size: 40px !important;
  }

  .section-vetements,
  .section-2encarts .hommes,
  .section-2encarts .femmes,
  .section-4encarts .vet-intervention,
  .section-4encarts .marbrerie,
  .section-4encarts .chaussures,
  .section-4encarts .accessoires {
    padding: 50px 20px 70px 60px !important;
  }

  .featured-products {
    padding: 80px 0px 20px !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .section-vetements, 
  .section-2encarts .hommes, 
  .section-2encarts .femmes, 
  .section-4encarts .marbrerie, 
  .section-4encarts .chaussures {
    min-height: 40.42vw;
  }

  .block-categories .category-sub-menu li > a {
    font-size: 13px !important;
  }

  .block-categories .navbar-toggler {
    width: auto !important;
    height: auto !important;
    padding: 0px !important;
  }

  #search_filters > .h6, 
  #search_filters_brands > .h6, 
  #search_filters_suppliers > .h6 {
    font-size: 20px;
  }

  .block-categories .collapse-icons {
    right: -20px !important;
  }

  #header .header-left p, #header .header-left a {
    font: 400 14px Montserrat;
  }

  .section-4encarts .vet-intervention,
  .section-4encarts .accessoires {
    min-height: 82.86vw;
  }

  .titre-encart {
    font:400 30px Montserrat;
  }

  .description-encart {
    font:400 16px Montserrat;
  }

  .btn-encart .bouton {
    font:400 16px Montserrat;
  }

  .bouton-parallaxe {
    font:400 16px Montserrat;
    padding: 12px 30px !important;
  }
}
@media (min-width: 992px) {

  .section-2encarts .hommes,
  .section-4encarts .vet-intervention,
  .section-4encarts .marbrerie-chaussures {
    margin-right: 1.04vw !important;
  }

  .hommes,
  .femmes {
    width: calc(50% - 0.52vw) !important;
  }

  .vet-intervention,
  .marbrerie-chaussures,
  .accessoires {
    width: calc(33.33% - 0.73vw) !important;
  }

  .hommes {
    margin-right: 1.04vw !important;
  }

  .vet-intervention,
  .marbrerie-chaussures {
    margin-right: 1.09vw !important;
  }

  .section,
  #carousel,
  .section-2encarts,
  .section-4encarts .marbrerie {
    margin-bottom: 1.04vw !important;
  }

  .section-2encarts > .container,
  .section-4encarts > .container {
    display: flex;
  }

  .parallaxe {
    height: 29.74vw;
    padding: 20px 0 !important;
  }

  h1, .h1,
  .titre-encart, 
  #block-newsletter-label,
  .h2.products-section-title,
  #block-newsletter-label {
    font-size: 2.08vw !important;
  }

  .featured-products {
    padding: 5.21vw 0px 20px !important;
  }

  .section-vetements, 
  .section-2encarts .hommes, 
  .section-2encarts .femmes, 
  .section-4encarts .vet-intervention, 
  .section-4encarts .marbrerie, 
  .section-4encarts .chaussures, 
  .section-4encarts .accessoires {
    padding: 2.6vw 1.04vw 3.65vw 3.13vw !important;
  }

  .section-vetements, 
  .section-2encarts .hommes, 
  .section-2encarts .femmes, 
  .section-4encarts .marbrerie, 
  .section-4encarts .chaussures {
    min-height: 20.89vw;
  }

  .section-4encarts .vet-intervention,
  .section-4encarts .accessoires {
    min-height: 42.81vw;
  }

  .btn-encart .bouton,
  .description-encart,
  .bouton-parallaxe {
    font-size: 13px !important;
  }

  .reassurance {
    padding: 2.08vw 1.04vw 5.21vw !important;
  }

  .footer-container {
    padding: 3.91vw 0px 4.43vw !important;
  }

  .block_newsletter {
    padding: 4.17vw 20px !important;
  }

  .section-2encarts > .container,
  .section-4encarts > .container,
  .section > .container,
  #custom-text > .container,
  .reassurance > .container,
  .block_newsletter > .row,
  .footer-container > .container,
  .featured-products > .container,
  #carousel,
  #header .header-top,
  .adtm_menu_container,
  #header .ets_mm_megamenu,
  #product #wrapper > .container {
    width: 95% !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {}
@media (min-width: 1200px) {
  .btn-encart .bouton,
  .description-encart,
  .bouton-parallaxe {
    font-size: 16px !important;
  }
}
@media (min-width: 1200px) and (max-width: 1365px) {}
@media (min-width: 1366px) {}
@media (min-width: 1366px) and (max-width: 1599px) {}
@media (min-width: 1600px) {
    .section-2encarts > .container,
  .section-4encarts > .container,
  .section > .container,
  #custom-text > .container,
  .reassurance > .container,
  .block_newsletter > .row,
  .footer-container > .container,
  .featured-products > .container,
  #carousel,
  #header .header-top,
  .adtm_menu_container,
  #header .ets_mm_megamenu,
  #product #wrapper > .container {
    width: 100% !important;
  }
}



/****** Guide ******/

/* Chaque variable va être attribuée à un endroit dans le css plus bas
Par exemple la couleur que l'on mettra dans la variable : "--lien-couleur" va s'appliquer à la couleur des liens
Pas besoin de changer la taille des titres et paragraphes en responsive car ils se changeront tout seul en fonction de la version bureau pour que ce soit uniforme.

Le but est de pouvoir changer tout ce qui est nécessaire pour une MEP dans les variables afin de gagner du temps

Si vous avez des questions ou autre n'hésitez pas à me contacter sur Teams

Camille VACHER
*/

/************************************ Variables à compléter **************************/

:root {
  --couleur1: #000;
  --couleur2: #141f39!important;
  --couleur3: #e30613!important;
  --couleur4: #000!important;
  --couleur5: #fff!important;

  /**** Couleur des liens ****/

  --lien-couleur: var(--couleur3)!important;
  --lien-hover-couleur: black!important;

  /**** Couleurs des liens sur texte blanc ****/

  --lien-text-bl-couleur: var(--couleur5)!important;
  --lien-text-bl-couleur-hover: white!important;

  /**** Titres et paragraphes ****/

  --font-family-h1: 'Le Jour Serif', Helvetica, Arial, Lucida, sans-serif;
  --font-size-h1: 45px;
  --font-weight-h1: normal;
  --couleur-h1: var(--couleur1);

  --font-family-h2: 'Montserrat';
  --font-size-h2: 28px;
  --font-weight-h2: 300 !important;
  --couleur-h2: var(--couleur2);

  --font-family-h3: 'Montserrat';
  --font-size-h3: 22px;
  --font-weight-h3: 900;
  --couleur-h3: var(--couleur3);

  --font-family-p: 'Montserrat';
  --font-size-p: 16px;
  --font-weight-p: 300;
  --couleur-p: black;
  line-height: 1.6em;
}

/*********************** Fin de la section des variables à compléter ********************/

/************************** Lien dans les modules textes ******************************/
.contenu-edito .et_pb_text_inner a {
  color: var(--lien-couleur)!important;
  font-weight: bold;
  text-decoration: underline !important;
  transition: all 0.3s ease-in-out;
}

.contenu-edito .et_pb_text_inner a:hover {
  color: var(--lien-hover-couleur)!important;
  font-weight: bold;
  text-decoration: none !important;
  transition: all 0.3s ease-in-out;
}

/***************************************** Titres ***************************************/

.contenu-edito h1 {
  font-family: var(--font-family-h1);
  font-size: var(--font-size-h1) !important;
  font-weight: var(--font-weight-h1);
  color: var(--couleur-h1);
}

.contenu-edito h2 {
  font-family: var(--font-family-h2);
  font-size: var(--font-size-h2) !important;
  font-weight: var(--font-weight-h2)!important;
  color: var(--couleur-h2) !important;
  text-transform: uppercase;
  text-align: left;
  line-height: 1.2em;
  
}


.contenu-edito h2::after {
    content: "";
    width: 80px;
    height: 4px;
    display: block;
    background: var(--couleur2);
    background: linear-gradient(90deg, var(--couleur2) 0%, var(--couleur3) 100%);
    background-repeat: no-repeat;
    margin: 5px 0px 15px;
    }

    .contenu-edito .centrer h2::after {
        margin: 15px auto;
      }

      
.contenu-edito h3 {
  font-family: var(--font-family-h3);
  font-size: var(--font-size-h3) !important;
  font-weight: var(--font-weight-h3);
  color: var(--couleur-h3) !important;
  line-height: 1.2em;
}



.contenu-edito .libres h3 {
  background-color: #000;
  padding: 0.2em 0.8em;
  border-radius: 50px;
  border-left: 10px solid #f80104;
  margin-bottom: 0.2em; 
  transition: 0.5s all linear;}

  .contenu-edito .libres h3:hover {
  border-left: 4px solid #222;
}


/******************************* Paragraphes *****************************/
.contenu-edito p,
.contenu-edito ul,
.contenu-edito ol,
.contenu-edito li,
.contenu-edito table {
  font-family: var(--font-family-p);
  font-size: var(--font-size-p) !important;
  font-weight: var(--font-weight-p);
  color: var(--couleur-p) !important;
  text-align: left;
  line-height: 1.6em;

}



.contenu-edito ul li {
    list-style-type:none;
  margin-bottom: 0.4em;
  }
    
  .contenu-edito ul li::before {
    display: inline-block;
    content: "";
    width: 0.6em;
    aspect-ratio: 1;
    background-color: var(--couleur2);
    margin-right: 1em;
    /*border-radius:100%*/
  }
  
  .contenu-edito .grostitre p
  {
    font-size: clamp(28px,2vw,32px);
    color: var(--couleur-h1);
    font-family: var(--font-family-titres);
    font-weight: var(--font-weight-liens);
    text-align: center;
    color: var(--couleur-h3);
  }
  
  .grostitre p em {
    display: block;
    font-style: normal;
    font-weight: 300;
    font-size: 60%;
    text-align: left;
    color: var(--couleur-h2);
    text-transform: none;
    font-family: var(--font-family-p);
    line-height: 1.5em;
  }
  .contenu h2 strong, .contenu h3 strong{
    font-weight: 500;
  }
  
  .contenu p strong, .contenu strong{
    font-weight: 600;
  }

/********************* Changement de couleur si besoin***************************/
/***************** Pour mettre paragraphe et titre en blanc *******************/

.contenu-edito .texteblanc p,
.contenu-edito .texteblanc ul,
.contenu-edito .texteblanc ol,
.contenu-edito .texteblanc li,
.contenu-edito .texteblanc table,
.contenu-edito .texteblanc h1,
.contenu-edito .texteblanc h2,
.contenu-edito .texteblanc h3 {
  color: white !important;
}

.texteblanc a {
  color: var(--couleur3);
  font-weight: bold;
  text-decoration: underline !important;
  transition: all 0.3s ease-in-out;
}

.texteblanc a:hover {
  color: var(--lien-text-bl-couleur-hover) !important;
  font-weight: bold;
  text-decoration: none !important;
  transition: all 0.3s ease-in-out;
}


.texteblanc p,
.texteblanc ul,
.texteblanc ol,
.texteblanc li,
.texteblanc table {
  font-family: var(--font-family-p);
  font-size: var(--font-size-p) ;
  font-weight: var(--font-weight-p);
  color: var(--couleur5);
  padding-bottom: 0;
  line-height: 1.6em;
  margin-bottom: 1em;
  text-align: left;
}

.texteblanc h2 {
  font-family: var(--font-family-h2);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  color: var(--couleur5);
  line-height: 1.5em;
  text-transform: uppercase;
  text-align: left;
}

.texteblanc h2::after {
  content: "";
  width: 60px;
  height: 4px;
  display: block;
  background:  var(--couleur5);
  margin: 5px 0px;
  }



    
.texteblanc .centrer h2::after {
    margin: 15px auto;
  }

.texteblanc h3 {
  font-family: var(--font-family-h3);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-h3);
    color: var(--couleur3);
  text-align: left;
}

.texteblanc ul li {
  list-style-type:none;
margin-bottom: 0.4em;
}

.texteblanc ul li::before {
  display: inline-block;
  content: "";
  width: 0.5em;
  aspect-ratio: 1;
  background-color: var(--couleur5);
  margin-right: 1em;
  
}


/***********AUTRE*********/

/************************************* Format **********************************/

.centrage {
  display: flex;
  align-items: center;
  justify-content: center;
}

/***************************** MediaQueries **********************************/

@media (max-width: 1366px) {
  .contenu-edito h1 {
    font-size: calc(var(--font-size-h1) - 5px) !important;
  }

  .contenu-edito h2 {
    font-size: calc(var(--font-size-h2) - 5px) !important;
  }

  .contenu-edito h3 {
    font-size: calc(var(--font-size-h3) - 5px) !important;
  }
}

@media (max-width: 980px) {
  .centrage {
    flex-direction: column;
  }

  .reverse {
    display: flex;
    flex-direction: column-reverse;
  }
}

@media (max-width: 820px) {
  .contenu-edito h1 {
    font-size: calc(var(--font-size-h1) - 5px);
  }

  .contenu-edito h2 {
    font-size: calc(var(--font-size-h2) - 4px) !important;
  }

  .contenu-edito h3 {
    font-size: calc(var(--font-size-h3) - 6px) !important;
  }

  .contenu-edito p,
  .contenu-edito ul,
  .contenu-edito ol,
  .contenu-edito li,
  .contenu-edito table {
    font-size: var(--font-size-p) !important;
  }
}

@media (max-width: 420px) {
  .contenu-edito h1 {
    font-size: calc(var(--font-size-h1) - 10px) !important;
  }

  .contenu-edito h2 {
    font-size: calc(var(--font-size-h2) - 6px) !important;
  }

  .contenu-edito h3 {
    font-size: calc(var(--font-size-h3) - 4px) !important;
  }

  .contenu-edito p,
  .contenu-edito ul,
  .contenu-edito ol,
  .contenu-edito li,
  .contenu-edito table {
    font-size: calc(var(--font-size-p) - 2px) !important;
  }
}






.cadress::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: var(--couleur2);
    margin-bottom: -47px;
    margin-left: -7px;
}

.cadress::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: var(--couleur3);
    margin-left: calc(100% - 43px);
    margin-top: -43px;
}


.cadress2::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: var(--couleur3);
    margin-bottom: -47px;
    margin-left: -7px;
}

.cadress2::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: var(--couleur2);
    margin-left: calc(100% - 43px);
    margin-top: -43px;
}



 


/* Tableaux */

table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}

th, td {
/*border: 1px solid #ddd;*/
text-align: left;
padding: 8px;
}

th {
background-color: #f4f4f4;
font-weight: bold;
}

tr:nth-child(even) {
background-color: #f9f9f9;
}
 

/* Responsive styles */
@media screen and (max-width: 768px) {
table {
    border: 0;
}

table thead {
    display: none;
}

table tr {
    display: block;
    margin-bottom: 10px;
    border-bottom: 2px solid #ddd;
}

table td {
    display: inline;
    text-align: right;
    border: 0;
    padding: 10px;
    position: relative;
}

table td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    font-weight: bold;
    text-align: left;
}

tbody tr:hover {
    background-color: #b9b7c9;
  
}
}



.cardes .et_pb_image_wrap::before {
  display: block;
  background-color: transparent;
  width: 80px;
  aspect-ratio: 1;
  content: "";
  margin-left: -20px;
  margin-bottom: -60px;
  border-left: 2px solid var(--couleur2);
  border-top: 2px solid var(--couleur2);
}

.cardes .et_pb_image_wrap::after {
  display: block;
  background-color: transparent;
  width: 80px;
  aspect-ratio: 1;
  content: "";
  margin-left: calc(100% - 60px);
  margin-top: -60px;
  border-right: 2px solid var(--couleur2);
  border-bottom: 2px solid var(--couleur2);
}



.cardes img 
{
  border:3px solid var(--couleur3);
  transition: 0.5s all linear;
}

.cardes img:hover
{
  transform: scale(1.02);

}

/******************************* Fin Edito *************************************/