/* =========================
   RESET GLOBAL
========================= */
* {
  
  font-family: "Inter", sans-serif, "Montserrat";
}

/* =========================
   VARIABLES
========================= */
:root {
  --main-blue: rgba(7, 86, 189);
  --blue-hover: #005bb5;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --bg: #f5f7fa;
  --card: #ffffff;
}

/* =========================
   BODY (FIX CENTRAGE)
========================= */
body {
  background-image: url("/images/Gemini_Generated_Image_3jvefl3jvefl3jve.png");
  background-attachment: fixed;
  background-size: cover;

  color: var(--text);
  height: 100%;
  min-height : 100vh;
  margin: 0%;
 }

h2{
  font-weight: normal;}

/*logo*/
img{
  height: 100px;
   }

  .logo{
  display:flex;
  align-items:center;
   }
   
header{
  background-color: #ffffff;
  width: 100%;
  height: 80px;
  padding:32px;
  display:flex;
  align-items: center ;
justify-content: space-around;
}

main{
  
  padding: 0 300px;
   }



.hero{
 padding: 30px;
 margin: 50px 200px 80px 200px;
  text-align: center;
 border-radius: 5px;
 background: white;
 backdrop-filter: blur(10.8px);
 }

h1{
  padding: 25px 0 35px 0;
}

a{
   text-decoration: none;
}

nav{
  padding:40px;
}

nav a{
  padding:15px;
  color:#000000;
}
.cards{
  text-align: center;
  display: flex;
  justify-content: space-evenly;
  gap:20px;
}




.imgCard{
  height: 60px;
  padding-top:10px;
}





.front{
color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 1;
position:relative;
z-index: 1;
padding-top: 10px;
}

.back{
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
height:100%;
opacity: 0;
position:relative;
z-index: index 3;
top: -8em;
}



.cardsHover:hover .front{
  opacity: 0;
}

.cardsHover:hover .back{
  opacity: 1;
}

.cardsHover{
  height:185px;
  width:250px;
  padding: 10px;
 border-radius: 5px;
 box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
 background: rgba(7, 86, 189, 0.6);;
 backdrop-filter: blur(10.8px);
 

}

footer{
  margin-top: 100px;
   background-color: #ffffff;
     width: 100%;
  height: 100%;
  padding: 32px 0px 10px 320px; 
}

li{
  padding:8px;
}


/* =========================
   BOUTON RETOUR
========================= */
.btn {
  margin: 50px 0px;
  padding: 10px 18px;
  background: var(--main-blue);
  color: white;
  border-radius: 25px;
  font-weight: 500;
  transition: 0.2s;
  z-index: 1000;
  }

.back-btn:hover {
  background: var(--blue-hover);
}

/* =========================
   CONTAINER
========================= */
.devis-container {
  margin: auto;
  margin-top: 60px;
  width: 100%;
  max-width: 600px;
  padding: 2px 55px;
  background: var(--card);
  border-radius: 5px;
}

/* TITRE */
.devis-container h1 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 2rem;
}

h2{
  text-align: center;
}
.buttonDevisAsk{
  display: flex;
  justify-content: center;
}

/* FORM */
.devis-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* ROW */
.row {
  display: flex;
  gap: 15px;
}

.row input,
.row select {
  flex: 1;
}

/* INPUTS */
input, select, textarea {
  padding: 12px 15px;
  border-radius: 12px;
  border: 1px solid #ddd;
  font-size: 14px;
  outline: none;
  transition: 0.2s;
  background: #fff;
}

/* FOCUS */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--main-blue);
  box-shadow: 0 0 0 3px rgba(0,113,227,0.1);
}

/* TEXTAREA */
textarea {
  min-height: 220px;
  resize: vertical;
}

/* BUTTON */
.btn {
  display: inline-block;
  background: rgba(7, 86, 189);
  color: white;
  padding: 12px 25px;
  border-radius: 25px;
  border: none;
  cursor: pointer;
  transition: 0.25s;
  font-size: 16px;
}


ul{
  margin:0;
  padding:0;
}
.btn:hover {
  background: var(--blue-hover);
}

.btn.full {
  width: 100%;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {

  .devis-container {
    margin: 0;
    padding: 25px;
  }

  .row {
    flex-direction: column;
  }
}