html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
			background-color:#000;
			color:#fff;
			font-family: "Darker Grotesque", sans-serif;
			font-optical-sizing: auto;
			font-weight: 400;
			font-style: normal;
			font-size:18px;
		}

		b, strong{
			font-weight:900
		}

		p{
			letter-spacing: 1px;
			line-height:20px;
		}

		.bg-cartes{
			position: absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			z-index:0;
		}
		.bg-carte{
			background-repeat:no-repeat;
			background-size:contain;
			background-position:top center;
		}
		#carte-menage{
			background-image:url(assets/carte_menage_antonin.png);
		}
		#carte-bricolage{
			background-image:url(assets/carte_bricolage_mathieu.png);
		}

		.rubalises{
			overflow: hidden;
		    width: 100%;
		    height: 100%;
		    position: absolute;
		    top: 0;
		    left: 0;
		    inset: 0;
		    z-index: 0;
		}
		.rubalise {
		    position: absolute;
		    inset: 0;
		    pointer-events: none;
		    z-index: 0;
		}
		.rubalise#rubalise-1{
			top:-15px;
			height:60px;
			filter: blur(1px);
			transform:rotate(3.24deg);
		    background:
		        repeating-linear-gradient(
		            -45deg,
		            #DDFF00 0 160px,
		            #000 160px 320px
		        );
		}
		.rubalise#rubalise-2{
			top:35%;
			height:40px;
			filter: blur(0.5px);
			transform:rotate(-4.6deg);
		    background:
		        repeating-linear-gradient(
		            -45deg,
		            #DDFF00 0 100px,
		            #000 100px 200px
		        );
		}
		.rubalise#rubalise-3{
			top:80%;
			height:35px;
			filter: blur(0.5px);
			transform:rotate(3.5deg);
		    background:
		        repeating-linear-gradient(
		            -45deg,
		            #DDFF00 0 80px,
		            #000 80px 160px
		        );
		}

		main{
		    position: relative;
		    flex: 1;                 /* prend tout l’espace dispo */
		    display: flex;
		    flex-direction: column;
		    z-index: 1;
		}
		.content-main {
		    flex: 1;          /* prend tout l’espace restant */
		    min-height: 0;    /* OBLIGATOIRE pour éviter le scroll fantôme */
		}

		.bg-black{display: inline-block;background-color: #000;padding:3px}

		.item-tilt{
			transform: rotate(-2.88deg);
			display:inline-block;
		}

		.btn-atout{
			font-weight:bold;
		}
		.btn-atout,
		.text-bg-atout{
			background-color:#DDFF00;
			color:#000;
		}

		.btn-atout:hover{
			background-color:#acc700;
			color:#000;
		}
		.text-atout{
			color:#DDFF00;
		}
		.hero {
		    flex-shrink: 0;   /* ne se compresse jamais */
		    padding-top:5rem;
		}
		#cartes_en_main {
		    position: relative;
		    display: flex;
		    justify-content: center;   /* centre horizontalement */
		    align-items: flex-end;     /* colle en bas */
		    min-height: 50vh;          /* garde un minimum visuel */
		    overflow: hidden;          /* sécurité */
		}

		#cartes_en_main img {
		    max-width: calc(90vh);
		    max-height: 100%;
		    height: auto;
		    object-fit: contain;       /* JAMAIS coupée */
		    display: block;
		}
		#formulaire_contact *{
			z-index:2;
		}

		#formulaire_contact h2{
			text-shadow: 2px 2px 1px #000;
		}

		.shadow-bottom{
		    position: relative;
		}
		.shadow-bottom::after{
		    content: "";
		    position: absolute;
		    inset: 0;
		    z-index: 1;

		    background: linear-gradient(
		        to top,
		        rgba(0, 0, 0, 0.7) 0%,
		        rgba(0, 0, 0, 0.5) 40%,
		        rgba(0, 0, 0, 0) 80%
		    );

		    pointer-events: none;
		}
		#cartes_en_main::after, #formulaire_contact::after{
		    background: none;
		}

		.badge{
			border-radius:50px;
			padding: 0.15rem 1rem;
		}

		form{
			width:65%;
			margin:0 auto 130px;
		    z-index: 2;
		}
		form label{
			margin:20px 0;
			display:block;
		}
		form input, form select, form textarea{
			border-radius:10px;
			padding:5px;
			width:100%;
			font-size:16px;
			font-weight: 500;
		}

		.social-networks {
			margin-top:-130px;
		    width: 100%;
		    padding: 30px 0;
		    z-index: 3;             /* AU-DESSUS de shadow-bottom */
		    pointer-events: auto;
		}
		.social-networks .items {
			max-width:370px;
			display:block;
			margin:0 auto;
		}

		.social-title {
		    position: relative;
		    display: inline-block;
		    font-size: 27px;
		}

		.social-title::after {
		    content: '';
		    position: absolute;
		    top: 20px;
		    right: -20px;
		    width: 27px;
		    height: 48px;
		    background: url('assets/arrow.png') no-repeat center;
		    background-size: contain;
		}

		.social-links{
			margin:0 15px;
		}

		.social-links > *{
			padding:0;
		}

		.social-links a {
		    display: inline-flex;
		    align-items: center;
		    justify-content: center;
		    gap: 10px;
		    color: #fff;
		    font-weight: 600;
		}
		.social-links a:hover{
			text-decoration:none;
		}

		.social-links img {
		    width: 19px;
		    height: auto;
		}

		.footer-atout {
			z-index:3;
		    background-color: #DDFF00;
		    padding: 20px 0;
		    font-size: 16px;
		    flex-shrink: 0;
		    min-height: 70px; /* référence utilisée pour social-networks */
		    display: flex;
		    align-items: center;
		    position:relative;
		    z-index:2;
		}

		.footer-atout,
		.footer-atout a {
		    color: #000;
		    text-decoration: none;
		}

		.footer-center {
		    font-weight: 500;
		}

		#site_contact{
			text-transform:uppercase;
			font-size:18px;
		}
		#site_address{
			border-left:2px solid #000;
			padding-left:15px;
		}
		#site_contact img{
			padding-right:5px;
		}

		.link-agence{
			line-height:12px;
			font-size:13px;
			display: inline-block;
			text-align:center;
		}

@media (max-width: 1399px) {
	#site_address{
		border:none;
		margin:0;
		padding:0;
	}
}

@media (max-width: 991px) {
    html, body {
        height: auto;
    }

    body {
        display: block;
    }

    .grecaptcha-badge{
    	z-index:1;
    }

    main,
    .content-main {
        flex: none;
        min-height: auto;
    }

    .shadow-bottom::after{
    	background:none;
    }

	#cartes_en_main::after{
		    content: "";
		    position: absolute;
		    inset: 0;
		    z-index: 1;

		    background: linear-gradient(
		        to top,
		        rgba(0, 0, 0, 0.7) 0%,
		        rgba(0, 0, 0, 0.5) 40%,
		        rgba(0, 0, 0, 0) 80%
		    );

		    pointer-events: none;
	}

	#formulaire_contact{
		margin-top:-130px;
        margin-bottom: 100px;
	}

	#formulaire_contact::after{
		background: rgba(0, 0, 0, 0) 80%;
	}

	form{
		width:85%;
		margin:0 auto 25px;
	}

	.social-networks{
		position: relative;
		bottom:unset;
	}
}
@media (max-width: 650px) {
	.rubalises{
		position: fixed;
	}

	.rubalise#rubalise-2{
		top:40%;
	}
	.rubalise#rubalise-3{
		top:80%;
	}
    #cartes_en_main img {
        width: 140%;
        max-width: none;
    }
}