@font-face {
    font-family: "TradeGothicLTPro";
    src: url("../fonts/TradeGothicLTPro-Bold.ttf") format("opentype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

html,
body {
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    font-family: "Roboto", arial, helvetica, calibri, sans-serif;
	word-break: break-word;
}
main {
    max-width: 60%;
    margin: 0 auto;
    padding: 60px 0 80px 0;
}
h1,
h2,
h3,
h4 {
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    font-family: "TradeGothicLTPro", "Roboto", arial, helvetica, calibri, sans-serif;
}
h1 {
    font-size: 2.7em;
    background: url("../img/rouge_fond.png");
    color: #fff;
    text-shadow: 1px 1px 1px #bf0409;
    padding: 10px 10px 0 10px;
    width: max-content;
    margin: 0 auto;
    text-align: center;
}
h2 {
    font-size: 2.5em;
    border-bottom: 4px solid #f51928;
    width: max-content;
    margin: 0 auto;
    text-align: center;
    padding: 30px 0 0 0;
}
h3 {
    font-size: 1.9em;
    color: #202020;
}
h4 {
    font-size: 1.6em;
}
p {
    color: #272727;
    font-weight: 300;
    font-size: 1.3em;
    line-height: 180%;
}
ul,
ol {
    font-weight: 300;
    font-size: 1.2em;
    line-height: 160%;
}

a {
    font-weight: 400;
    background: linear-gradient(0deg, #f51928, #f51928) no-repeat right bottom / 0 var(--bg-h);
    transition: background-size 350ms;
    --bg-h: 100%;
}
a:where(:hover, :focus-visible) {
    background-size: 100% var(--bg-h);
    background-position-x: left;
}

.underline {
    padding-bottom: 2px;
    --bg-h: 2px;
}

a {
    text-decoration: none;
    color: inherit;
    line-height: 1;
}


picture {
    margin: 0;
    padding: 0;
}
img {
    background-size: contain;
    max-width: 100%;
}
ol {
    list-style-type: decimal;
}

.slider-produits li {
    list-style-type: none;
}
.wrapper-produits {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    margin: 20px 0 80px 0;
}
.produits {
    width: 200px;
    vertical-align: top;
    display: inline-block;
    margin-right: 27px;
    text-align: center;
}
.produits h3 {
    font-size: 1.1em;
}
.produits li {
    text-align: left;
    font-size: 1em;
}
.logos-revendeurs li img {
    opacity: 0.6;
    transform: scale(0.6);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.revendeurs {
    margin: 0 auto;
    text-align: center;
    max-width: 100%;
}
.revendeurs a {
    background: transparent;
}
.logos-revendeurs li img:hover {
    transform: scale(0.8);
    opacity: 1;
}
.logos-revendeurs li {
    vertical-align: top;
    display: inline-block;
    max-width: 200px;
    margin: 0px;
}

#flip,
#flip1,
#flip2,
#flip3,
#flip4,
#flip5,
#flip6,
#flip7 {
    font-size: 0.9em;
    font-weight: 700;
    border-radius: 8px;
    border: 3px solid #f51928;
    color: #f51928;
    text-align: center;
    padding: 10px !important;
    transition: all 0.3s ease-in-out;
    cursor: -webkit-grab;
    cursor: pointer;
}

#flip:hover,
#flip1:hover,
#flip2:hover,
#flip3:hover,
#flip4:hover,
#flip5:hover,
#flip6:hover,
#flip7:hover {
    border: 3px solid #d0000e;
    color: #ffffff;
    background: linear-gradient(45deg, #f51928, #e9515c, #be0d19);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
}

@keyframes gradient {
    50% {
        background-position: 100% 0;
    }
}

#panel,
#flip {
    padding: 0px;
    max-width: 100%;
}

#panel1,
#flip1 {
    padding: 0px;
    max-width: 100%;
}

#panel1,
#flip1 {
    padding: 0px;
    max-width: 100%;
}

#panel2,
#flip2 {
    padding: 0px;
    max-width: 100%;
}

#panel3,
#flip3 {
    padding: 0px;
    max-width: 100%;
}

#panel4,
#flip4 {
    padding: 0px;
    max-width: 100%;
}

#panel5,
#flip5 {
    padding: 0px;
    max-width: 100%;
}
#panel6,
#flip6 {
    padding: 0px;
    max-width: 100%;
}
#panel7,
#flip7 {
    padding: 0px;
    max-width: 100%;
}
#panel,
#panel1,
#panel2,
#panel3,
#panel4,
#panel5,
#panel6,
#panel7 {
    padding: 0px;
    margin: 0;
    display: none;
    font-size: 0.8em;
}

#panel ul,
#panel1 ul,
#panel2 ul,
#panel3 ul,
#panel4 ul,
#panel5 ul,
#panel6 ul,
#panel7 ul {
    padding: 0px;
    margin: 20px 0 0 0;
}

@media screen and (max-width: 840px) {
    main {
        max-width: 90%;
        text-align: center;
    }
    main li {
        text-align: left;
    }
	
	main h1, main h2 {
		max-width: fit-content;
		
	}
	
	.revendeurs h2{
		max-width: 90%;
		padding: 15px 0;
		margin:0 auto;
	}
	
    .revendeurs ul {
        margin: 0;
        padding: 0;
    }
}