:root{--dark:#8A180B;
	--accent:#e85d04;
	--light: #CF644E;  /*#f5f7fa;*/
	--text:#ffff  /*#263238*/
}

*{box-sizing:border-box}
body{margin:0;
	font-family:Arial,sans-serif;
	color:var(--text);
	font-size:22px;
	background: content-box radial-gradient(#C23028, #F6B339);
	line-height:1.55

}

.container{max-width:1100px;
	margin:auto;
	/*justify-content:center;*/
	/*align-items: center;*/
	padding:0 10px;
	color: #ffff;

}

.header{
	background:var(--dark);
	color:white;
	position:sticky;
	top:0;
	z-index:10
}

.nav{min-height:72px;
	display:flex;
	align-items:center;
	/*justify-content:space-between;*/
	justify-content:center;
	gap:20px
	
}


.logo{font-weight:900;
	font-size:22px;
	color:white;
	text-decoration:none;
	letter-spacing:1px
}

.logo span{color:#ff7b22
}


nav{display:flex;gap:18px;
	align-items:center;
	flex-wrap:wrap
}

nav a{color:white;
		text-decoration:none
}

.btn{display:inline-block;
	background:var(--accent);
	color:white!important;
	border:0;border-radius:7px;
	padding:12px 18px;
	text-decoration:none;
	font-weight:bold;
	cursor:pointer
}

.btn.small{padding:9px 13px}

/* texte accueil */
.hero{
	
	background: content-box radial-gradient(crimson, #FFAC7D);
	color:#FFFF;
	/*padding:15px 0;*/
	padding:0px 0 ; /*espacement */
	/*justify-content:center*/
}



.hero h1{font-size:clamp(38px,7vw,70px);
	line-height:1;margin:0 0 15px
}


.hero p{font-size:20px;max-width:700px}


.section{padding:0px 0}


/* Texte prestations */
.grid{display:grid;
	grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
	color:#FFFF;
	gap:10px
}


.card{padding:25px;
	border:2px solid #e2e6ea;
	border-radius:12px;background:#4D4543;
	box-shadow:0 5px 20px #0000000b
}


.card h3{margin-top:0}

.muted{color:#6b7280}

.footer{
	background:var(--dark);
	color:white;
	padding:35px 0;
	margin-top:50px}

.footer .muted{margin-top:10px;
		color:#cbd5e1
	}


form{
	background:var(--light);
	padding:25px;
	border-radius:12px}

	.row{display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:10px}

	.field{margin-bottom:15px}

	.field label{display:block;
	font-weight:bold;margin-bottom:6px}

	.field input,

	.field select,

	.field textarea{width:100%;
	padding:12px;
	border:2px solid #ccd2d8;
	border-radius:4px;font:inherit;
	background:white}

	.field textarea{min-height:110px}


/* page devis */
	.option{display:flex;
	gap:12px;
	align-items:flex-start;
	padding:13px;
	background:#FFC591;
	border:1px solid #ddd;
	border-radius:6px;
	margin:8px 0

}
	.option input{margin-top:5px}
	.option .qty{width:90px;
	margin-left:auto
}


table{width:100%;
	border-collapse:collapse;
	background:#993E2B}

th,td{padding:11px;
	border-bottom:1px solid #ddd;
	text-align:left}
	.alert{padding:15px;
	border-radius:8px;background:#F2D9B8;
	margin-bottom:20px}

.success{background:#d1e7dd}
.gallery{display:grid;
	grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
	gap:18px}
.gallery img{width:100%;
	aspect-ratio:4/3;
	object-fit:cover;
	border-radius:10px}
.adminnav{background:#F2D9B8;
	padding:15px;margin-bottom:25px
	}


@media(max-width:700px){
.row{grid-template-columns:1fr}

.nav{align-items:flex-start;
		padding-top:15px;
		padding-bottom:15px
	}


nav{gap:10px}
.hero{padding:55px 0}
}




.logo_img {
    height: 120px;
    width: auto;
    display: block;
}




.contact-simple {
    text-align: center;
    padding: 20px 10px;
}

.contact-intro {
    max-width: 700px;
    margin: 10px auto 40px;
    font-size: 1.4rem;
}

.contact-cards {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
}

.contact-card {
    flex: 1;
    max-width: 350px;
    padding: 30px 25px;
    border-radius: 12px;
    background: #F7D6C3;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

.contact-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.contact-phone {
	font-size: 2.0rem;
}

.contact-email {
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
}

.contact-devis {
	text-align: center;
    max-width: 700px;
     margin: 10px auto 10px;
    font-size: 1.4rem;

}

@media (max-width: 150px) {

    .contact-cards {
        flex-direction: column;
        align-items: center;
    }

    .contact-card {
        width: 100%;
    }

}

/* Les photos de la galerie sont cliquables */
.gallery-photo {
    cursor: zoom-in;
}


/* Fond sombre plein écran */
#lightbox {
    display: none !important;

    position: fixed !important; 

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 40px !important;

    box-sizing: border-box !important;

    z-index: 2147483647 !important;

    /*background-color: rgba(0, 0, 0, 0.95) !important;*/
    background: content-box radial-gradient(#C23028, #F6B339);

    align-items: center !important;
    justify-content: center !important;
}




/* LIGHTBOX OUVERTE */

#lightbox.active {
    display: flex !important;




}



/* IMAGE */

#lightbox-image {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: calc(100vw - 80px) !important;
    max-height: calc(100vh - 80px) !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: auto !important;
    padding: 0 !important;

    object-fit: contain !important;

    position: relative !important;

    top: auto !important;
    left: auto !important;

    transform: none !important;
}


/* BOUTON FERMER */

.lightbox-close {
    /*position: absolute !important;*/

    top: 15px !important;
    right: 20px !important;

    z-index: 2147483647 !important;

    width: 100px !important;
    height: 100px !important;

    padding: 0 !important;

    border: 10 !important;

    background: transparent !important;

    color: ghostwhite !important;

    font-size: 18px !important;

    cursor: pointer !important;
}

.presentation {
    max-width: 700px;
    margin: 10px auto 10px;
    
}