/*
Brother 1816 Book
font-family: "brother-1816", sans-serif;
font-weight: 300;
font-style: normal;
Brother 1816 Regular
font-family: "brother-1816", sans-serif;
font-weight: 400;
font-style: normal;
Brother 1816 Medium
font-family: "brother-1816", sans-serif;
font-weight: 500;
font-style: normal;
Brother 1816 Bold
font-family: "brother-1816", sans-serif;
font-weight: 700;
font-style: normal;
*/

:root {
  --Bleu: #0061ae;
  --Gris: #646363;
  --Vert: #77b238;
}

body {background: url(../images/footer.jpg) bottom center no-repeat #fff; background-size: 100%; margin: 0; padding: 0; font-family: "brother-1816", sans-serif; color: var(--Bleu); font-size: 15px;}

.header {background: #cdcdcd; margin-top: 40px;}
.header .photo {
    position: relative;
    display: block;
	margin: 0 auto; width: 300px;
	background: #fff;
}

.header .photo img {
    display: block; 
}

.header .photo::before,
.header .photo::after {
    content: "";
    position: absolute;
    top: 0;
    width: 42px;
    height: 100%;
    background: #fff;
}

/* bande gauche */
.header .photo::before {
    left: -30px;
    transform: skewX(-8deg);
}

/* bande droite */
.header .photo::after {
    right: -20px;
    transform: skewX(-8deg);
}

.accroche {margin : 80px 0; line-height: 1.13;}
.accroche h1 {font-weight: 700; font-size: 40px; margin: 0; margin-bottom: 10px;}
.accroche p {font-weight: 300; font-size: 27px;}

.contenu {padding-bottom: 300px;}

.bg-1 {background: url(../images/bg1.jpg) center center no-repeat; background-size: cover;}
.bg-2 {background: url(../images/bg2.jpg) center center no-repeat; background-size: cover;}
.bg {aspect-ratio: 566/392; color: #fff; text-align: center; font-size: 22px; line-height: 1.43; text-shadow: 1px 1px 2px black; display: flex; border-radius: 12px;
    align-items: center;      /* centrage vertical */
    justify-content: center;  /* centrage horizontal */}
	
.bt {display: block; color: #fff; font-weight: 500; text-align: center; text-decoration: none; border-radius: 12px; padding: 10px 0; font-size: 28px; margin-top: 5px; padding-right: 30px; position :relative;}
.bt::after {content: ''; position: absolute; top: 12px; right: 30px; width: 35px; height: 42px;  background: url(../images/icone-bt.png) center center no-repeat; background-size: 100%;}
.bt-1 {background: var(--Gris);}
.bt-1:hover {background: var(--Bleu);}
.bt-2 {background: var(--Vert);}
.bt-2:hover {background: var(--Gris);}

.contenu .row {--bs-gutter-x: 1rem;}

@media (max-width: 479.99px) {
	.header {margin-top: 10px;}
	.header .photo {width: 222px;}
	.accroche {margin: 35px 0;}
	.accroche h1 { font-size: 28px; margin-bottom: 7px;}
	.accroche p {font-size: 19px;}
	.bg {font-size: 18px; aspect-ratio: 5/3;}
	.bt {font-size: 20px; padding-right: 22px;}
	.bt::after {top: 10px; width: 28px; height: 32px; right: 15px;}
	.contenu {padding-bottom: 200px;}
	.header .photo::before {left: -35px; }
	.header .photo::after {right: -25px; }	
}

@media (max-width: 379.99px) {
	.header .photo {width: 182px;}
	.accroche h1 { font-size: 26px; margin-bottom: 10px;}
	.accroche p {font-size: 19px;}
	.bt {font-size: 18px; padding-right: 22px;}
	.contenu {padding-bottom: 160px;}
}
	
@media (min-width: 480px) and (max-width: 650px) {
	.bg {font-size: 17px; aspect-ratio: 2/1.8;}
	.bt {padding: 7px 0; font-size: 18px; margin-top: 5px; padding-right: 20px;}
	.bt::after {top: 5px; right: 15px; width: 25px; height: 32px;}
}
@media (min-width: 651px) and (max-width: 991px) {
	.bg {font-size: 20px; aspect-ratio: 2/1.6;}
	.bt {padding: 7px 0; font-size: 21px; margin-top: 5px; padding-right: 20px;}
	.bt::after {top: 5px; right: 18px; width: 30px; height: 37px;}
}
@media (min-width: 992px) {
	.contenu {padding-bottom: 350px;}
}
@media (min-width: 1200px) {
	.contenu {padding-bottom: 420px;}
}
@media (min-width: 1500px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1140px;
    }
	.contenu {padding-bottom: 500px;}
}
@media (min-width: 2000px) {
	.contenu {padding-bottom: 600px;}
}