body{
      background: linear-gradient(135deg,#eef4ff,#f8fbff);
      font-family: 'Poppins', sans-serif;
      color: #1e293b;
    }

    /* HEADER */

    .header{
      background: rgba(7, 25, 48, 0.95);
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
      padding: 10px 0;
    }

    .logo h1{
      color: white;
      font-weight: 700;
      letter-spacing: 1px;
    }

    .logo span{
      color: #38bdf8;
    }

    /* HERO */

    .hero-static{
      background:
        linear-gradient(rgba(3, 17, 35, 0.82), rgba(3, 17, 35, 0.82)),
        url('assets/img/hero-carousel/dossier_2.jpg');

      background-size: cover;
      background-position: center;
      min-height: 45vh;
    }

    .hero-static h2{
      font-size: 52px;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 15px;
    }

    .hero-static p{
      font-size: 18px;
      opacity: 0.9;
    }

    /* FORM */

    form{
      background: #ffffff;
      border-radius: 30px;
      padding: 45px;
      margin-top: -90px;
      position: relative;
      z-index: 20;

      box-shadow:
        0 15px 40px rgba(15,23,42,0.08),
        0 5px 15px rgba(15,23,42,0.04);

      border: 1px solid rgba(255,255,255,0.6);
    }

    .info h3{
      color: #0f172a;
      font-size: 30px;
      font-weight: 700;
      line-height: 1.5;
    }

    /* INPUTS */

    .form-group{
      position: relative;
    }

    .form-group span{
      display: block;
      margin-bottom: 10px;
      font-size: 14px;
      font-weight: 600;
      color: #334155;
    }

    .form-control{
      height: 55px;
      border-radius: 14px;
      border: 1px solid #dbe3ec;
      background: #f8fbff;
      transition: all 0.3s ease;
      font-size: 15px;
      padding: 0 15px;
      
      /* AJOUT IMPORTANT */
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;

      display: flex;
      align-items: center;
    }

    input.form-control,
    select.form-control{
      height: 55px !important;
      border-radius: 14px !important;
    }

    .form-control:focus{
      background: white;
      border-color: #0ea5e9;
      box-shadow: 0 0 0 5px rgba(14,165,233,0.12);
      transform: translateY(-1px);
    }

    select.form-control{
      cursor: pointer;
    }

    input[type="file"]{
      padding-top: 14px;
    }

    /* HR */

    hr{
      border: none;
      height: 1px;
      background: linear-gradient(to right, transparent, #cbd5e1, transparent);
      margin: 35px 0;
    }

    /* BUTTON */

    button[type="submit"]{

      background: linear-gradient(135deg,#0284c7,#0ea5e9);

      color: white;
      border: none;

      height: 58px;
      padding: 0 45px;

      border-radius: 50px;

      font-size: 17px;
      font-weight: 700;
      letter-spacing: 0.5px;

      transition: 0.3s ease;

      box-shadow: 0 10px 25px rgba(14,165,233,0.35);
    }

    button[type="submit"]:hover{

      transform: translateY(-3px);

      box-shadow: 0 14px 30px rgba(14,165,233,0.45);

      background: linear-gradient(135deg,#0369a1,#0284c7);
    }

    /* FOOTER */

    .footer{
      background: #071930;
      color: white;
      margin-top: 70px;
    }

    .footer a{
      color: #38bdf8;
    }

    /* SCROLL TOP */

    .scroll-top{
      background: #0ea5e9;
    }

    /* MOBILE */

    @media(max-width:768px){

      .hero-static{
        min-height: 38vh;
      }

      .hero-static h2{
        font-size: 30px;
      }

      form{
        margin-top: -50px;
        padding: 25px;
        border-radius: 22px;
      }

      .info h3{
        font-size: 22px;
      }

      .form-control{
        height: 54px;
      }

      button[type="submit"]{
        width: 100%;
      }

    }

    /* =========================================
    SECTION EMPLOI
    ========================================= */

    .emploi-section{

      background: #f7efef;
      padding-top: 90px;
      padding-bottom: 90px;

    }

    .emploi-title{

      font-size: 38px;
      font-weight: 800;
      line-height: 1.2;
      color: #062b45;

    }

    .emploi-title span{
      color: #ea0001;
    }

    .emploi-card{

      background: #fff;

      border-radius: 28px;

      padding: 35px;

      box-shadow: 0 5px 18px rgba(0,0,0,0.08);

      height: 100%;

    }

    .emploi-card h3{

      text-align: center;

      font-size: 38px;

      font-weight: 700;

      color: #062b45;

      margin-bottom: 25px;

    }

    .emploi-list{

      border-top: 1px solid #9ca3af;

      padding-top: 20px;

      height: 220px;

      overflow-y: auto;

    }

    .emploi-list ul{

      padding-left: 22px;

    }

    .emploi-list li{

      margin-bottom: 12px;

      font-size: 23px;

      color: #374151;

    }

    .emploi-btn{

      display: inline-block;

      padding: 12px 35px;

      border: 1px solid #6b7280;

      border-radius: 50px;

      text-decoration: none;

      color: #374151;

      font-size: 22px;

      transition: 0.3s;

      background: white;

    }

    .emploi-btn:hover{

      background: #062b45;

      color: white;

      border-color: #062b45;

    }

    .create-btn{

      display: inline-block;

      background: #d90429;

      color: white;

      padding: 16px 70px;

      border-radius: 50px;

      text-decoration: none;

      font-size: 30px;

      font-weight: 600;

      transition: 0.3s;

    }

    .create-btn:hover{

      background: #b00020;

      color: white;

      transform: translateY(-2px);

    }

    /* SCROLLBAR */

    .emploi-list::-webkit-scrollbar{

      width: 8px;

    }

    .emploi-list::-webkit-scrollbar-thumb{

      background: #c4c4c4;

      border-radius: 10px;

    }

    /* MOBILE */

    @media(max-width:768px){

      .emploi-title{

        font-size: 30px;

      }

      .emploi-card{

        padding: 25px;

      }

      .emploi-card h3{

        font-size: 28px;

      }

      .emploi-list li{

        font-size: 18px;

      }

      .emploi-btn{

        font-size: 16px;

      }

      .create-btn{

        width: 100%;

        font-size: 20px;

        padding: 15px 20px;

      }

    }

    /* RADIO BUTTONS */

    .emploi-ul{

      list-style: none;
      padding-left: 0;

    }

    .emploi-ul li{

      margin-bottom: 15px;

    }

    .emploi-ul label{

      display: flex;
      align-items: center;
      gap: 12px;

      font-size: 18px;
      cursor: pointer;

      transition: 0.3s;

    }

    .emploi-ul label:hover{

      color: #0ea5e9;

    }

    .emploi-ul input[type="radio"]{

      width: 18px;
      height: 18px;

      cursor: pointer;

    }