body {
      margin: 0;
      font-family: "Segoe UI", Roboto, Arial, sans-serif;
      background: #f5f7fa;
    }

    /* ===== HEADER ===== */
    header {
      background: #fff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      padding: 12px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 0 0 16px 16px; /* arrondis en bas comme le style du module */
    }

    header .logo {
      display: flex;
      align-items: center;
    }

    header .logo img {
      height: 50px;
      margin-right: 12px;
    }

    header .logo span {
      font-size: 20px;
      font-weight: bold;
      color: #333;
    }

    nav ul {
      list-style: none;
      display: flex;
      margin: 0;
      padding: 0;
      gap: 25px;
    }

    nav ul li {
      display: inline;
    }

    nav ul li a {
      text-decoration: none;
      font-size: 15px;
      font-weight: 500;
      color: #555;
      border : 1px;
      transition: color 0.3s ease, border-bottom 0.3s ease;
      padding-bottom: 4px;
      border-bottom: 2px solid transparent;
    }

    nav ul li a:hover {
      color: #00c3ff;
      border-bottom: 2px solid #00c3ff;
    }

    #sous_menu {
      background: #fff;
      width: 200px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      margin : 20px 10px 20px;
      justify-content: space-between;
      align-items: center;
      border-radius: 16px 16px 16px 16px; /* arrondis en bas comme le style du module */
      padding: 10px 10px 60px;
      text-align: left;
      display : inline-block;
    }

    #corps {
      background: #fff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      margin : 20px 10px 20px;
      width : 100%;
      justify-content: space-between;
      align-items: center;
      border-radius: 16px 16px 16px 16px; /* arrondis en bas comme le style du module */
      padding: 10px 60px 60px;
      text-align: center;
    }

    main {
      display : flex;
    }

    main h1 {
      font-size: 28px;
      color: #333;
      margin-bottom: 20px;
    }

    main p {
      font-size: 16px;
      color: #666;
      max-width: 600px;
      margin: auto;
    }



    /* TABLEAU BOOTSTRAP*/
    .card-modern {
      border: 0;
      border-radius: 1rem;
      box-shadow: 0 6px 20px rgba(0,0,0,0.06);
      background: #fff;
    }
    h4 {
      font-weight: 700;
      background: linear-gradient(90deg, #f7931e, #00a859, #00aeef);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .dt-toolbar {
      display:flex;
      gap:0.75rem;
      flex-wrap: wrap;
      align-items:center;
    }
    .dataTables_wrapper .dataTables_filter input {
      border-radius: 0.5rem;
      border: 1px solid #d1d5db;
      padding: 0.4rem 0.75rem;
      width: 260px;
      max-width: 100%;
    }
    .table thead th {
      background-color: #00aeef;
      color: #fff;
      font-weight: 600;
    }
    .table-striped tbody tr:nth-of-type(odd) {
      background-color: rgba(0,168,89,0.05);
    }
    .table-hover tbody tr:hover {
      background-color: rgba(247,147,30,0.12);
    }
    .dt-button {
      border-radius: 0.5rem !important;
      padding: 0.35rem 0.75rem !important;
      font-size: 0.875rem !important;
      border: 1px solid transparent !important;
      color: black !important;
    }
    .dt-button.buttons-copy { background-color: #6c63ff !important; }
    .dt-button.buttons-csv { background-color: #f7931e !important; }
    .dt-button.buttons-excel { background-color: #00aeef !important; }
    .dt-button.buttons-pdf { background-color: #00a859 !important; }
    .dt-button.buttons-print { background-color: #ef4444 !important; }
    .dt-button.buttons-colvis { background-color: #374151 !important; }
    .dt-button:hover { opacity: 0.9 !important; }
    select.form-select {
      border-radius: 0.5rem;
      border: 1px solid #d1d5db;
      padding: 0.3rem 0.75rem;
      font-size: 0.875rem;
    }


    /* BOX CHARGEMENT*/
     /* Overlay semi-transparent */
    #loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.6);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      transition: opacity 0.8s ease, visibility 0.8s ease;
    }

    /* Overlay semi-transparent */
    #loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.6);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      transition: opacity 0.8s ease, visibility 0.8s ease;
    }

    /* Boîte du loader */
    .loader-box {
      position: relative;
      width: 220px;
      height: 220px;
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }

    /* Partie fixe du logo */
    .logo-center {
      position: absolute;
      width: 160px;
      z-index: 2;
    }

    /* L’anneau animé */
    .logo-ring {
      position: absolute;
      width: 200px;
      z-index: 1;
      animation: spin 2s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    #loader.hidden {
      opacity: 0;
      visibility: hidden;
    }

    #sous_menu
    {
      min-width : 200px;
    }
     #sous_menu h2
    {
        text-align : left;
        width : auto;
        border-width: 0 0 4px 0;
        border-style: solid;
        border-image: linear-gradient(to right, #ff7f32, #00c3ff, #32d742) 1 ;
    }
    #sous_menu a
    {
        text-decoration: none;
        font-size: 17px;
        font-weight: 500;
        color: black;
        margin: 0 40px 15px 20px;
        display : inherit;
        width : auto;
    }
    #sous_menu a img{
        width : 25px;
        position : relative;
    }

     #sous_menu a:hover {
      color: #00c3ff;
      border-bottom: 2px solid #00c3ff;
    }
   
  /****************************/    
  /*AFFICHAGE DES FORMULAIRES*/
  /****************************/
  .modern-form{display:block}

    .modern-form .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
    @media (max-width:880px){.modern-form .grid4{grid-template-columns:1fr}}

    .modern-form .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    @media (max-width:880px){.modern-form .grid3{grid-template-columns:1fr}}

    .modern-form .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
    @media (max-width:880px){.modern-form .grid2{grid-template-columns:1fr}}

    .modern-form .grid2bis{display:grid;grid-template-columns:repeat(1,1fr 2fr);gap:12px}
    @media (max-width:880px){.modern-form .grid2bis{grid-template-columns:1fr 2fr}}

    .modern-form .field{position:relative;padding-top:20px}
    .modern-form input[type="text"],.modern-form input[type="email"],.modern-form input[type="tel"],.modern-form input[type="date"],.modern-form input[type="password"],.modern-form input[type="number"],.modern-form input[type="time"],.modern-form select,.modern-form textarea{
    width:100%;padding:14px 12px;border-radius:10px;border:1px solid rgba(0,0,0,0.1);background:#fff;color:#111;font-size:14px;outline:none;transition:box-shadow .12s,border-color .12s;
    }
    .modern-form input:focus,.modern-form select:focus,.modern-form textarea:focus{box-shadow:0 6px 18px rgba(59,130,246,0.12);border-color:rgba(59,130,246,0.55)}
    .modern-form label.floating{position:absolute;left:12px;top:18px;pointer-events:none;font-size:15px;color:#666;transition:transform .12s, top .12s, font-size .12s}
    .modern-form input:not(:placeholder-shown)+label.floating,
    .modern-form textarea:not(:placeholder-shown)+label.floating,
    .modern-form select:not([value=""])+label.floating,
    .modern-form input:focus+label.floating,
    .modern-form textarea:focus+label.floating,
    .modern-form select:focus+label.floating{transform:translateY(-10px);font-size:13px;top:12px;color:#3b82f6}
    .modern-form .small{font-size:12px;color:#666;margin-top:6px}


    .modern-form .actions{display:flex;gap:10px;margin-top:16px}
    .modern-form .btn{appearance:none;border:0;padding:10px 14px;border-radius:10px;font-weight:600;cursor:pointer}
    .modern-form .btn-primary{background:#63cdda;color:#fff}
    .modern-form .btn-ghost{background:transparent;border:1px solid #ccc;color:#444}


    .modern-form .section-title{font-size:13px;margin-bottom:6px;color:#333}
    .modern-form .radio-group{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
    .modern-form .radio{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:10px;border:1px solid #ddd;cursor:pointer}
    .modern-form input[type="radio"]{accent-color:#3b82f6}
    .modern-form textarea{min-height:120px;resize:vertical}
    .modern-form footer.note{font-size:12px;color:#666;margin-top:12px}
    .actions{display:flex;gap:10px;margin-top:16px;justify-self:center}
    .btn{appearance:none;border:0;padding:10px 14px;border-radius:10px;font-weight:600;cursor:pointer}
    .btn-primary{background:var(--accent);background-clip:padding-box;color:#062234}
    .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}

    .section-title{font-size:13px;margin-bottom:6px}
    .profile-card{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
    .muted-block{background:rgba(255,255,255,0.02);padding:12px;border-radius:10px;color:var(--muted);font-size:13px}

    /* radio group */
    .radio-group{display:flex;gap:8px;align-items:center}
    .radio{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);cursor:pointer}
    input[type="radio"]{accent-color: #3b82f6}

    img.pin_1 { filter: hue-rotate(0deg); }
    img.pin_2 { filter: hue-rotate(30deg); }
    img.pin_3 { filter: hue-rotate(50deg); }
    img.pin_4 { filter: hue-rotate(75deg); }
    img.pin_5 { filter: hue-rotate(100deg); }
    img.pin_6 { filter: hue-rotate(125deg); }
    img.pin_7 { filter: hue-rotate(150deg); }
    img.pin_8 { filter: hue-rotate(175deg); }
    img.pin_9 { filter: hue-rotate(200deg); }
    img.pin_10 { filter: hue-rotate(225deg); }
    img.pin_11 { filter: hue-rotate(250deg); }
    img.pin_12 { filter: hue-rotate(275deg); }
    img.pin_13 { filter: hue-rotate(300deg); }
    img.pin_14 { filter: hue-rotate(325deg); }
    img.pin_99 { filter: hue-rotate(340deg); }
  
  /****************************/


  /****************************/
  /*AFFICHAGE DU TABLEAU D'ARTICLE SELECTIONNE*/
  /****************************/
  #selection-container {
    font-family: "Segoe UI", Roboto, sans-serif;
    color: #333;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 25px;
    max-width: 100%;
    margin: 30px auto;
    overflow-x: auto;
  }

  #selection-container h2 {
    text-align: center;
    color: #222;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 25px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
  }

  #selection-container table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    table-layout: fixed; /* ✅ permet le retour à la ligne */
    word-wrap: break-word;
    word-break: break-word;
  }

  #selection-container th,
  #selection-container td {
    padding: 14px 16px;
    text-align: right;
    border-bottom: 1px solid #e6e6e6;
    vertical-align: top; /* ✅ le texte long reste aligné correctement */
  }

  #selection-container th {
    text-transform: uppercase;
    font-size: 0.85em;
    color: #555;
    letter-spacing: 0.05em;
  }

  #selection-container tbody tr:nth-child(even) {
    background: #fafafa;
  }

  #selection-container tbody tr:hover {
    background: #f0f4ff;
    transition: background 0.2s ease-in-out;
  }

  #selection-container thead {
    background: #f5f7fa;
  }

  #selection-container tfoot td {
    border-top: 2px solid #ddd;
    font-weight: 600;
    font-size: 1em;
    color: #0073e6;
    text-align: right;
    padding-top: 15px;
  }

  #selection-container td:first-child,
  #selection-container th:first-child {
    text-align: left;
  }

  /* ✅ La première colonne (nom article) peut s’étirer un peu plus */
  #selection-container td:first-child {
    white-space: normal; /* permet le retour à la ligne */
    width: 40%;
  }

  @media (max-width: 600px) {
    #selection-container table {
      font-size: 0.9em;
    }
  }
  /*************************************/