* {
    box-sizing: border-box;
}

 body {
     margin: 0;
     background: linear-gradient(135deg, #d7f3ff, #a8dbe8);
     font-family: Arial, Helvetica, sans-serif;
     color: #111827;
 }

 header {
     background-color: white;
     padding: 15px 40px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
 }

 nav ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 nav > ul {
     display: flex;
     gap: 20px;
     align-items: center;
 }

 nav > ul > li {
     position: relative;
 }

 nav a {
     text-decoration: none;
     color: #111827;
     font-weight: bold;
 }

 .dropdown-title {
     color: #111827;
     font-weight: bold;
     cursor: pointer;
    display: block;
    padding: 8px 0;
 }

 .submenu {
     display: none;
     position: absolute;
    top: 100%;
     left: 0;
     min-width: 240px;
     padding: 10px;
     border-radius: 10px;
     background: #ffffff;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     z-index: 200;
 }

 .submenu li {
     margin: 0;
 }

 .submenu a {
     display: block;
     padding: 8px 10px;
     border-radius: 8px;
     font-weight: 600;
     color: #111827;
 }

 .submenu a:hover {
    background: #ffedd5;
    color: #9a3412;
 }

 .submenu .dropdown {
     position: relative;
 }

 .submenu .dropdown::after {
     content: "";
     position: absolute;
     top: 0;
     right: -12px;
     width: 12px;
     height: 100%;
 }

 .submenu .dropdown > .dropdown-title {
     display: block;
     padding: 8px 10px;
     border-radius: 8px;
     font-weight: 600;
 }

 .submenu .dropdown > .dropdown-title:hover {
    background: #ffedd5;
    color: #9a3412;
 }

 .submenu .dropdown > .submenu {
     top: 0;
    left: 100%;
 }

 .menu-active {
     display: block;
     padding: 8px 10px;
     border-radius: 8px;
     background: #d1fae5;
     color: #065f46 !important;
 }

 .dropdown-title-active {
     border-radius: 8px;
     background: #d1fae5;
     color: #065f46;
     padding: 8px 10px;
 }

 .dropdown:hover > .submenu,
 .dropdown:focus-within > .submenu {
     display: block;
 }

 nav a:hover {
    color: #c2410c;
 }

 main {
     max-width: 900px;
     margin: 40px auto;
     padding: 0 20px;
 }

 h1 {
     font-size: 42px;
     margin-bottom: 10px;
 }

 h3 {
     margin-top: 35px;
     color: #0f172a;
 }

 p {
     font-size: 17px;
     line-height: 1.6;
 }
/*Zone Test*/
 .ZoneTest {
     margin-top: 20px;
     border-radius: 14px;
     overflow: hidden;
     background-color: #111827;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
     font-family: Consolas, monospace;
 }

 .console-header {
     background-color: #1f2937;
     padding: 12px 16px;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .console-header p {
     color: white;
     margin: 0 0 0 10px;
     font-size: 14px;
 }

 .dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
 }

 .red {
     background-color: #ff5f56;
 }

 .yellow {
     background-color: #ffbd2e;
 }

 .green {
     background-color: #27c93f;
 }

 .console-body {
     padding: 22px;
     color: #00ff88;
     line-height: 1.8;
     font-size: 16px;
 }

 .console-body p {
     margin: 0;
     font-family: Consolas, monospace;
 }

 pre {
     background-color: #0f172a;
     color: #e5e7eb;
     padding: 18px;
     border-radius: 12px;
     overflow-x: auto;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
 }

 code {
     font-family: Consolas, monospace;
 }
 /* FORMULAIRE DÉMO */

.FormDemo {
    margin-top: 20px;
    padding: 25px;
    background: white;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);

    display: flex;
    flex-direction: column;
    gap: 12px;
}

.FormDemo label {
    font-weight: 700;
    color: #0f172a;
}

.FormDemo input,
.FormDemo select,
.FormDemo textarea {
    width: 100%;
    padding: 12px 14px;

    border: 1px solid #cbd5e1;
    border-radius: 10px;

    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;

    outline: none;
    transition: 0.2s ease;
}

.FormDemo input:focus,
.FormDemo select:focus,
.FormDemo textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.checkbox-group,
.radio-group {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.checkbox-group label,
.radio-group label {
    display: flex;
    align-items: center;
    gap: 6px;

    font-weight: 500;
}

.checkbox-group input,
.radio-group input {
    width: auto;
}

.FormDemo button {
    margin-top: 15px;
    padding: 14px 18px;

    border: none;
    border-radius: 10px;

    background: #2563eb;
    color: white;

    font-size: 16px;
    font-weight: 700;

    cursor: pointer;
    transition: 0.2s ease;
}

.FormDemo button:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}
.TableDemo {
    width: 100%;
    margin-top: 15px;
    border-collapse: collapse;

    background: #1f2937;
    color: white;
}

.TableDemo th {
    background: #374151;
    padding: 12px;
    text-align: left;
}

.TableDemo td {
    padding: 12px;
    border-top: 1px solid #4b5563;
}

/*Hidden Title Nav*/
.Hide {
    display: none;
}