/* Empty blog section (placeholder for future styles) */
#section_blog{}

/* Main title section */
#section_titre{
  width: 80%;            /* Section width */
  margin-left: 10%;      /* Centers the section horizontally */
  margin-top: 100px;     /* Spacing from the top */
  display: flex;         /* Horizontal layout */
  padding-bottom: 5%;    /* Bottom spacing */
}

/* Left column */
#left_div{
  width: 60%;            /* Takes 60% of the space */
  position: relative;    /* Allows absolutely positioned children */
}

/* Right column */
#right_div{
  width: 40%;            /* Takes 40% of the space */
  display: flex;         /* Centers content */
  align-items: center;
  justify-content: center;
}

/* Text layered above image */
.text_index{
  z-index: 2;            /* Appears above background */
  position: relative;    /* Enables stacking */
}

/* Background image container */
#container_img{
  width: 100%;
  height:100%;
  background-image: url('/static/images/bout/a2.webp'); /* Background image */
  background-position: center;   /* Centers image */
  background-size: cover;        /* Covers full area */
  transform: scale(1.3);         /* Zoom effect */
}

/* Full-width centered container */
.container_new{
  width: 100%;
  text-align: center;
}

/* Top part of the newsletter block */
#container_new_top{
  margin-top: 80px;
  display: block;
  position: relative;
}

/* First section title */
#titre_first_section{
  margin-top: 5%;
  position: relative;
  z-index: 999;          /* Very high stacking priority */
}

/* Newsletter fields */
.news{
  width: 40%;
  text-align: center;
  height:40px;
  border: none;
  font-size: clamp(13px, 1.5vw, 20px); /* Responsive font size */
  background-color: white;
}

/* Newsletter input spacing */
#input_news{
  margin-top: 10px;
}

/* Newsletter button container */
#containrer_btn_news1{
  margin-top: 20px;
}

/* Newsletter button centered */
#btn_news{
  margin: auto;
}

/* Secondary text */
#text2{
  margin-top: 10%;
}

/* “Advice” button */
.btn_conseil{
  margin-top: 2%;
  box-shadow: 8px 8px 50px #595959; /* Strong shadow */
}

.line_blog{
  margin-top: 10px;
}

/* --------------------------------------------- */
/* MEDIA QUERIES */
/* --------------------------------------------- */

/* Screens up to 1366px */
@media (max-width: 1366px) {
  #input_news{
    height:35px;         /* Slightly smaller height */
  }
}

/* Screens up to 1176px */
@media (max-width: 1176px){
  #input_news{
    height:30px;         /* Even smaller */
  }
}

/* Screens up to 900px */
@media (max-width: 900px){
  #container_img{
    transform: scale(1.2);   /* Reduced zoom */
  }
  #section_titre{
    margin-top: 10%;
    margin-left: 0%;         /* Full width */
    width: 100%;
    padding-left: 5%;        /* Light inner spacing */
  }
  #right_div{
    height:60svh;            /* Tall container */
    width: 100%;
    position: absolute;      /* Moves behind left content */
    right: 0;
  }
  #container_img{
    transform: scale(1);     /* No zoom */
    width: 80%;
    margin-left: 40%;        /* Repositioned background */
    opacity: 0.3;            /* Faded for mobile readability */
  }
  #left_div{
    width: 80%;              /* Narrower text area */
  }
  .container_new{
    padding: 10px;           /* Extra breathing room */
  }
  #input_news{
    width: 50%;              /* Wider input on mobile */
  }
}

/* Screens up to 650px (first block) */
@media (max-width: 650px){
  #input_news{
    width: 70%;              /* Larger input */
  }
  #titre_news{
    width: 90%;
    margin-left: 5%;
  }
  #container_img{
    right: 0;
    position: absolute;
    margin-left: auto;
  }
  .img_desktop{
    bottom: 0;
    top:auto;
  }
}

/* Screens up to 650px (second block) */
@media (max-width: 650px){
  #input_news{
    width: 80%;              /* Even larger input */
  }
}