.elementor-2232 .elementor-element.elementor-element-e6064330:not(.elementor-motion-effects-element-type-background), .elementor-2232 .elementor-element.elementor-element-e6064330 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EFC4C4;background-image:url("https://renaicendre.org/wp-content/uploads/2023/05/ajax2.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-2232 .elementor-element.elementor-element-e6064330 > .elementor-background-overlay{background-color:#2D2D2D;opacity:0.55;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-2232 .elementor-element.elementor-element-e6064330{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:-13px;margin-bottom:0px;padding:150px 0px 150px 0px;}.elementor-2232 .elementor-element.elementor-element-44f5b437 > .elementor-element-populated{margin:80px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-2232 .elementor-element.elementor-element-6844ee69{text-align:center;}.elementor-2232 .elementor-element.elementor-element-6844ee69 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:75px;font-weight:800;line-height:1.1em;color:#FFFFFF;}.elementor-2232 .elementor-element.elementor-element-ce3e7af{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:flex-end;--flex-wrap:wrap;--align-content:flex-end;--margin-top:24px;--margin-bottom:24px;--margin-left:24px;--margin-right:24px;}.elementor-2232 .elementor-element.elementor-element-ce3e7af:not(.elementor-motion-effects-element-type-background), .elementor-2232 .elementor-element.elementor-element-ce3e7af > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0F3850;}.elementor-2232 .elementor-element.elementor-element-ce3e7af.e-con{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-2232 .elementor-element.elementor-element-f22f89c.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}.elementor-2232 .elementor-element.elementor-element-f22f89c{text-align:justify;font-family:"Roboto", Sans-serif;font-weight:400;color:#FFFFFF;}.elementor-2232 .elementor-element.elementor-element-f22f89c p{margin-block-end:8px;}.elementor-2232 .elementor-element.elementor-element-5858602.elementor-element{--flex-grow:0;--flex-shrink:0;}body.elementor-page-2232:not(.elementor-motion-effects-element-type-background), body.elementor-page-2232 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}@media(max-width:1366px){.elementor-2232 .elementor-element.elementor-element-f22f89c{width:var( --container-widget-width, 799px );max-width:799px;--container-widget-width:799px;--container-widget-flex-grow:0;}.elementor-2232 .elementor-element.elementor-element-5858602{width:var( --container-widget-width, 857px );max-width:857px;--container-widget-width:857px;--container-widget-flex-grow:0;}}@media(min-width:1367px){.elementor-2232 .elementor-element.elementor-element-e6064330:not(.elementor-motion-effects-element-type-background), .elementor-2232 .elementor-element.elementor-element-e6064330 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}@media(max-width:1024px){.elementor-2232 .elementor-element.elementor-element-e6064330:not(.elementor-motion-effects-element-type-background), .elementor-2232 .elementor-element.elementor-element-e6064330 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center center;background-size:cover;}.elementor-2232 .elementor-element.elementor-element-e6064330{margin-top:-136px;margin-bottom:0px;padding:100px 20px 100px 20px;}.elementor-2232 .elementor-element.elementor-element-44f5b437 > .elementor-element-populated{margin:100px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-2232 .elementor-element.elementor-element-6844ee69 .elementor-heading-title{font-size:55px;}}@media(max-width:767px){.elementor-2232 .elementor-element.elementor-element-e6064330{padding:150px 20px 150px 20px;}.elementor-2232 .elementor-element.elementor-element-6844ee69 .elementor-heading-title{font-size:45px;}}/* Start custom CSS for text-editor, class: .elementor-element-f22f89c *//* Conteneur Select2 */
.select2-container {
  width: 100% !important;
  z-index: 9999 !important; /* Pour passer au-dessus des autres champs */
}

/* Zone affichée avant ouverture */
.select2-container .select2-selection--single {
  height: 45px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 15px;
  color: #333;
  display: flex;
  align-items: center;
}

/* Quand on clique (focus) */
.select2-container .select2-selection--single:focus {
  border-color: #0073e6;
  box-shadow: 0 0 6px rgba(0,115,230,0.3);
  outline: none;
}

/* Liste déroulante */
.select2-dropdown {
  background-color: #ffffff; /* Fond blanc lisible */
  border: 1px solid #ccc;
  border-radius: 6px;
  z-index: 9999 !important;
}

/* Chaque option */
.select2-results__option {
  padding: 10px;
  font-size: 15px;
  color: #333;
  background: #fff;
}

/* Survol des options */
.select2-results__option--highlighted {
  background-color: #0073e6 !important; /* Couleur thème bleu */
  color: #fff !important;
}

/* Sélection active */
.select2-results__option[aria-selected="true"] {
  background-color: #e6f0ff;
  color: #0073e6;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-5858602 *//* Conteneur global du formulaire */
form {
  max-width: 800px;
  margin: 30px auto; /* Centré avec marge */
  background: #ffffffcc; /* Blanc semi-transparent */
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  font-family: 'Arial', sans-serif;
  position: relative;
  z-index: 1;
}

/* Fond global derrière le formulaire */
body {
  background: linear-gradient(135deg, #004aad, #00c6ff);
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
}

/* Espacement entre les champs */
form .form-row, 
form p, 
form label {
  margin-bottom: 15px;
}

/* Labels */
form label {
  font-weight: bold;
  color: #004aad; /* Bleu du site */
  margin-bottom: 6px;
  display: inline-block;
}

/* Étoiles rouges pour les champs obligatoires */
form label .required {
  color: red;
}

/* Champs input, select, textarea */
form input[type="text"],
form input[type="email"],
form input[type="date"],
form select,
form textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 15px;
  transition: all 0.3s ease;
  background: ##53EAFD;
}

/* Focus sur les champs */
form input:focus,
form select:focus,
form textarea:focus {
  border-color: #004aad;
  background: #fff;
  box-shadow: 0 0 8px rgba(0,74,173,0.3);
  outline: none;
}

/* Boutons */
form button,
form input[type="submit"] {
  background: #004aad;
  color: #fff;
  border: none;
  padding: 14px 25px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}
form button:hover,
form input[type="submit"]:hover {
  background: #003580;
}

/* Champs en deux colonnes (Nom & Prénom par ex.) */
.form-two-col {
  display: flex;
  gap: 20px;
}
.form-two-col .form-group {
  flex: 1;
}

/* Messages d’erreur */
form .error {
  color: #d9534f;
  font-size: 13px;
  margin-top: 5px;
}

/* Texte d’introduction */
.intro-text {
  text-align: center;
  max-width: 800px;
  margin: 30px auto 20px auto;
  background: #ffffffd9;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.intro-text h2 {
  color: #004aad;
  margin-bottom: 10px;
}
.intro-text p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ce3e7af */<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Formulaire Centré</title>
  <style>
    /* Conteneur qui centre le formulaire */
    .form-wrapper {
      display: flex;
      justify-content: center;   /* Centre horizontalement */
      padding: 40px 20px;        /* Espacement autour */
      box-sizing: border-box;
    }

    /* Conteneur global du formulaire */
    form {
      max-width: 800px;
      width: 100%;
      margin: 0 auto; /* Double sécurité pour le centrage */
      background: #ffffffcc; /* Blanc semi-transparent */
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.15);
      font-family: 'Arial', sans-serif;
      position: relative;
      z-index: 1;
    }

    /* Fond global derrière le formulaire (section entière) */
    body {
      background: linear-gradient(135deg, #004aad, #00c6ff);
      font-family: 'Arial', sans-serif;
      margin: 0;
      padding: 0;
    }

    /* Espacement entre les champs */
    form .form-row, 
    form p, 
    form label {
      margin-bottom: 15px;
    }

    /* Labels */
    form label {
      font-weight: bold;
      color: #004aad; /* Bleu du site */
      margin-bottom: 6px;
      display: inline-block;
    }

    /* Étoiles rouges pour les champs obligatoires */
    form label .required {
      color: red;
    }

    /* Champs input, select, textarea */
    form input[type="text"],
    form input[type="email"],
    form input[type="date"],
    form select,
    form textarea {
      width: 100%;
      padding: 12px 15px;
      border: 1px solid #ccc;
      border-radius: 8px;
      font-size: 15px;
      transition: all 0.3s ease;
      background: #fff;
    }

    /* Focus sur les champs */
    form input:focus,
    form select:focus,
    form textarea:focus {
      border-color: #004aad;
      background: #fff;
      box-shadow: 0 0 8px rgba(0,74,173,0.3);
      outline: none;
    }

    /* Boutons */
    form button,
    form input[type="submit"] {
      background: #004aad;
      color: #fff;
      border: none;
      padding: 14px 25px;
      font-size: 16px;
      border-radius: 8px;
      cursor: pointer;
      transition: 0.3s;
    }
    form button:hover,
    form input[type="submit"]:hover {
      background: #003580;
    }

    /* Champs en deux colonnes */
    .form-two-col {
      display: flex;
      gap: 20px;
    }
    .form-two-col .form-group {
      flex: 1;
    }

    /* Messages d’erreur */
    form .error {
      color: #d9534f;
      font-size: 13px;
      margin-top: 5px;
    }

    /* Texte d’introduction */
    .intro-text {
      text-align: center;
      max-width: 800px;
      margin: 30px auto 20px auto;
      background: #ffffffd9;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .intro-text h2 {
      color: #004aad;
      margin-bottom: 10px;
    }
    .intro-text p {
      font-size: 16px;
      line-height: 1.6;
      color: #333;
    }
  </style>
</head>
<body>

  <div class="intro-text">
    <h2>Rejoignez-nous</h2>
    <p>Remplissez le formulaire ci-dessous pour participer à notre aventure.</p>
  </div>

  <div class="form-wrapper">
    <form>
      <!-- Ligne 1 : Nom + Prénom -->
      <div class="form-two-col">
        <div class="form-group">
          <label for="nom">Nom <span class="required">*</span></label>
          <input type="text" id="nom" name="nom" required>
        </div>
        <div class="form-group">
          <label for="prenom">Prénom <span class="required">*</span></label>
          <input type="text" id="prenom" name="prenom" required>
        </div>
      </div>

      <!-- Ligne 2 : Date de naissance + Sexe -->
      <div class="form-two-col">
        <div class="form-group">
          <label for="date-naissance">Date de Naissance</label>
          <input type="date" id="date-naissance" name="date-naissance">
        </div>
        <div class="form-group">
          <label for="sexe">Sexe</label>
          <select id="sexe" name="sexe">
            <option value="">--- Sélectionner ---</option>
            <option value="homme">Homme</option>
            <option value="femme">Femme</option>
            <option value="autre">Autre</option>
          </select>
        </div>
      </div>

      <button type="submit">Envoyer</button>
    </form>
  </div>

</body>
</html>/* End custom CSS */