/* Global Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #ffffff;
}

/* Version normale */
.noto-sans-normal {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400; /* Poids normal */
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.noto-sans-medium {
  font-family: "Noto Sans", sans-serif;
  font-weight: 500; /* Poids normal */
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.noto-sans-bold {
  font-family: "Noto Sans", sans-serif;
  font-weight: 700; /* Poids normal */
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

/* Version large */
.noto-sans-wide {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 150; /* Plus large */
}

/* Version étroite */
.noto-sans-narrow {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 75; /* Plus étroit */
}

/* Container */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.top-line {
  margin: 30px 0;
}

.top-line-form {
  margin: 30px 0;
}

.top-line img {
  width: 100%;
  height: 3px;
  display:block;
}

.top-line-form img {
  width: 100%;
  height: 3px;
  display:block;
}

/* Logo Banner */
.logo-banner {
  text-align: left;
}

.logo-banner img {
  max-height: 70px;
}

/* Hero Section */
.hero {
  position: relative; /* Permet au formulaire de se positionner par rapport à cette section */
  background-image: url('https://www.metlife.fr/content/dam/metlifecom/fr/img/cloud-pages/metlife-banner.webp'); /* Replace with the actual image path */
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
  padding: 40px 20px;
}

.hero h1 {
  font-size: 2.5rem;
  text-align:left;
}

.hero h2 {
  font-size: 2.4rem;
  line-height: 2.2rem;
    text-align:left;
    margin-bottom:10px;
}

.hero p {
  font-size: 1.2rem;
  text-align:left;
}

/* Container for both sections */

.advantages-block {
  padding-top: 30px;
}
.advantages-block h2 {
  font-size: 2rem;
  margin-bottom: 5px;
  color: #000;
}

.advantages-block p {
  font-size: 1.8rem;
  line-height: 2rem;
  color: #000;
}

/* Conteneur de la grille des avantages */
.advantages-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Deux colonnes de largeur égale */
  gap: 20px; /* Espacement entre les éléments */
  margin-top: 20px;
}

/* Éléments individuels */
.advantage {
  display: flex;
  flex-direction: column; /* Empile les icônes et textes verticalement */
  /*align-items: center;  Centre le contenu horizontalement */
  padding: 20px;
}

.advantage .icon img {
  width: 50px; /* Taille de l'icône */
  height: 50px;
  margin-bottom: 10px; /* Espacement sous l'icône */
}

.advantage h3 {
  font-size: 1.2rem;
  color: #0054a6;
  margin-bottom: 10px;
}

.advantage p {
  font-size: 1rem;
  color: #333;
  line-height: 1.5;
}

.text h2 {
  font-size: 1.6rem;
  line-height: 1.8rem;
  color: #000;
  margin-bottom: 20px;
}

.icon {
  margin-bottom: 10px; /* Espace entre l'icône et le texte */
}

.icon img {
  width: 50px;
  height: 50px;
  flex-shrink: 0; /* Empêche l'icône de se redimensionner */
}

.text h3 {
  font-size: 1.2rem;
  color: #0054a6;
  margin-bottom: 10px;
}

.text p {
  font-size: 1rem;
  color: #555;
}

.section {
  display: flex;
  flex-direction: row;
  width: 100%;
}

/* Form Section */
.section {
  flex-direction: column;
}

.form-container {
  flex: 1;
  order: 2; /* Formulaire à droite par défaut */
}

.form-section {
  flex: 1; /* Occupe 1/3 de l'espace */
  position: relative;
  top: -100px; /* Superpose le formulaire sur le hero banner */
  background-color: #F4F4F4;
  margin: 0 auto; /* Centre horizontalement */
  padding: 30px;
  padding-bottom: 0px;
  z-index: 10;
}

.form-section h2 {
  font-size: 1.6rem;
  line-height: 2rem;
  margin-bottom: 15px;
  color: #000;
}

.form-section p {
  font-size: 1rem;
  margin-bottom: 15px;
  color: #555;
}

.form-section form {
  display: grid;
  gap: 15px;
}

form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 1rem;
  color: #999;
  margin-bottom: 3px; /* Espacement entre le label et le champ */
}

form input,
form select {
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #999;
  border-radius: 4px;
  color: #999;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Espacement entre chaque groupe */
}

.checkbox-item {
  display: flex;
  align-items: top;
  gap: 10px; /* Espacement entre la case et le texte */
}

.checkbox-item input[type="checkbox"] {
  appearance: none; /* Supprime l'apparence par défaut des cases */
  width: 20px; /* Largeur de la case */
  height: 20px; /* Hauteur de la case */
  border: 1px solid #B3B3B3; /* Bordure bleue */
  border-radius: 50%; /* Rend la case ronde */
  outline: none; /* Supprime le contour */
  cursor: pointer; /* Change le curseur au survol */
  background-color: #fff; /* Couleur de fond par défaut */
}

.checkbox-item input[type="checkbox"]:checked {
  background-color: #B3B3B3; /* Couleur de fond quand cochée */
  border-color: #0054a6; /* Bordure assortie */
}

.checkbox-item label {
  font-size: 1rem;
  color: #333;
  cursor: pointer; /* Permet de cliquer sur le texte pour cocher */
}

form button {
  background-color: #0090DA;
  color: white;
  border: none;
  padding: 15px;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

form button:hover {
  background-color: #003b75;
}

/* Le plus MetLife Block */
.le-plus-block {
  background-image: url('https://www.metlife.fr/content/dam/metlifecom/fr/img/cloud-pages/le-plus-metlife.webp'); /* Remplacez par le chemin de votre image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  text-align: center;
  padding: 40px 20px;
  position: relative;
  border-radius: 20px;
  margin-bottom:30px;
}

.le-plus-content {
  position: relative;
  z-index: 2;
}

.le-plus-block h2 {
  font-size: 1.2rem;
}

.le-plus-block p {
  font-size: 1.6rem;
  line-height: 1.6;
}

/* RGPD Section */
.header-rgpd {
  display: flex;
  align-items: center; /* Aligne le logo avec le texte verticalement */
  gap: 20px; /* Espacement entre le logo et le texte */
  margin-bottom: 30px;
  text-align: left;
}

.ico-shield img {
  width: 45px;
  height: 45px; /* Ajustez selon vos besoins */
  flex-shrink: 0; /* Empêche le logo de se redimensionner */
}
.text-rgpd p {
  font-size: 1rem;
  line-height: 1.5rem;
  color: #0054a6;
}

/* Customer Reviews Section */
.customer-reviews {
  background-color: #f9f9f9;
  padding: 40px 20px;
}

.customer-reviews .container {
  max-width: 1200px;
  margin: 0 auto;
}

.header-google {
  display: flex;
  align-items: center; /* Aligne le logo avec le texte verticalement */
  gap: 0 20px; /* Espacement entre le logo et le texte */
  margin-bottom: 30px;
  text-align: left;
}

.logo-google img {
  width: 120px;
  height: 120px; /* Ajustez selon vos besoins */
  flex-shrink: 0; /* Empêche le logo de se redimensionner */
}

.text-google h2 {
  font-size: 2rem;
  color: #0054a6;
  margin-bottom: 0;
}

.text-google h3 {
  font-size: 1.5rem;
  margin-bottom: 0;
  color: #333;
}

.text-google .ratings {
  font-size: 1.2rem;
  color: #555;
}

.ico-stars img {
  width: 120px;
  height: auto; /* Ajustez selon vos besoins */
  flex-shrink: 0; /* Empêche le logo de se redimensionner */
}

/* Reviews Grid */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.review {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: left;
}

.review h4 {
  font-size: 1.2rem;
  color: #0054a6;
  margin-bottom: 10px;
}

.review p {
  font-size: 1rem;
  color: #555;
  margin-bottom: 10px;
}

.review .author {
  font-weight: bold;
  color: #333;
}

/* Label Block Section */
.label-block {
  padding: 0;
  text-align: center; /* Centre le contenu global */
}

.container-label {
  max-width: 1100px; /* Largeur maximale */
  margin: 0 auto; /* Centre horizontalement */
}

.content {
  display: flex;
  align-items: center; /* Aligne le logo et le texte verticalement */
  gap: 0; /* Espace entre le logo et le texte */
}

.label img {
  max-width: 100px; /* Taille maximale du logo */
  height: auto;
}

.text {
  text-align: left; /* Texte aligné à gauche */
}

.text h2 {
  font-size: 1.5rem; /* Taille du titre */
  color: #000; /* Couleur bleu foncé */
  margin-bottom: 10px;
}

.text p {
  font-size: 1rem; /* Taille du paragraphe */
  color: #333; /* Couleur du texte */
  line-height: 1.5;
  margin: 0;
}

/* Footer Styles */
.footer {
  background-color: #FFF;
  padding: 0;
  text-align: center;
  font-size: 0.8rem;
  color: #555;
}

.footer .bg-mention {
  background-color: #F4F4F4;
  padding: 30px 40px;
  text-align: center;
  font-size: 0.8rem;
  color: #555;
}

.mention-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

.footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-mentions {
  max-width: 1100px;
  margin: 0 auto;
  line-height: 1.5;
  color: #333;
  text-align: justify;
}

.footer-logo img {
  max-height: 60px;
  margin: 15px 0;
}

.footer-text {
  padding-bottom: 20px;
  max-width: 1100px;
  margin: 0 auto 20px;
  padding: 0 20px;
  line-height: 1.5;
  color: #333;
}

.footer-links {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.footer-links li {
  margin: 0;
}

.footer-links a {
  text-decoration: none;
  color: #0054a6;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #003b75;
}

/* Container */
.thank-you-block {
  padding: 40px 20px;
  padding-bottom: 0;
  max-width: 1200px;
  margin: 30px auto;
  text-align: center;
}

/* Title */
.thank-you-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #0054a6;
  margin-bottom: 20px;
}

/* Message */
.thank-you-message,
.thank-you-contact {
  font-size: 1.2rem;
  color: #555;
  margin-bottom: 20px;
  line-height: 1.6;
}

/* Steps Grid */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
  gap: 30px; /* Espacement entre les colonnes */
  margin-top: 30px;
}

/* Individual Step */
.step {
  display: flex;
  align-items: center; /* Aligne l’icône et le texte verticalement */
  gap: 20px; /* Espace entre l’icône et le texte */
  text-align: left;
}

/* Icon */
.step .icon img {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}

/* Text */
.step .text {
  flex: 1; /* Prend tout l’espace restant */
}

.step-title {
  font-size: 1.4rem;
text-align:center;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
}

.step-description {
  font-size: 1rem;
text-align:center;
  color: #555;
  line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {

      .hero {
        order: 2; /* Hero Banner après le formulaire */
      }
    
    .form-section form {
    margin-bottom: 15px;
}

    .container-label {
    width: 90%;
}
    
    .container {
    width: 100%;
}
   .mention-container {
    margin: 0 auto;
} 
    
  .icon {
    margin-bottom: 0;
}
    
.text-rgpd p {
        font-size: 1.0rem !important;
        line-height: 1.2rem !important;
    } 


.top-line {
  margin: 15px 0;
}

.top-line-form {
  margin: 15px 0;
}
    
    .advantages-block h2 {
    font-size: 1.6rem;
    margin-bottom: 5px;
}
    .advantages-block p {
    font-size: 1.2rem;
    line-height: 1.4rem;
}

  .text h2 {
    font-size: 1.4rem;
    text-align: center;
  }

  .text h3 {
    font-size: 1.2rem;
    text-align: center;
  }

  .text p {
    font-size: 0.9rem;
    text-align: center;
  }

  .label img {
    margin-bottom: 15px; /* Espace sous le logo en mobile */
  }

  .advantages-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      padding: 0 20px;
  }

  .advantage {
    align-items: center; /* Centre tout en mobile */
    text-align: center; /* Centre le texte */
    padding: 0 20px; /* Espace entre argus */
  }

  .form-section {
    top: -50px;
    padding:15px;
  }

  .advantages-block {
      text-align:center;
      padding-top:0;
  }

.le-plus-block p {
    font-size: 1.3rem;
    line-height: 1.4;
}
    
.header-google {
    flex-direction: column; /* Logo et texte empilés */
    align-items: center; /* Centre tout */
    text-align: center; /* Texte centré */
  }

.footer .bg-mention {
    padding: 30px 20px;
}

  .reviews-grid {
    grid-template-columns: 1fr;
  }
    .thank-you-block {
    padding: 30px 15px;
  }

  .thank-you-title {
    font-size: 1.5rem;
  }

  .thank-you-message,
  .thank-you-contact {
    font-size: 1rem;
  }
    
    .next-steps-block {
    padding: 30px 15px;
  }

  .steps-title {
    font-size: 1.5rem;
  }

  .step-title {
    font-size: 1.2rem;
  }

  .step-description {
    font-size: 0.9rem;
  }

  .step .icon img {
    width: 40px; /* Smaller icons for mobile */
    height: 40px;
  }
    

}