* {
        box-sizing: border-box;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    }

    /* ===============================
   CONTENEUR
================================ */
    .new-project {
        max-width: 720px;
        margin: 30px auto;
        background: #1a273f;
        /* moins sombre que #0f172a */
        padding: 28px;
        border-radius: 18px;
        color: #e5e7eb;
    }

    /* ===============================
   LABEL + INDICATEUR
================================ */
    .project-form label {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
        font-size: 14px;
        color: #d1d9e6;
        /* plus clair que #cbd5f5 */
    }

    .project-form .indicator {
        font-size: 12px;
        color: #a8b0bb;
        /* plus clair que #9ca3af */
    }

    /* ===============================
   EDITEURS (BASE)
================================ */
    .editor {
        width: 100%;
        border: 1px solid rgba(255, 255, 255, .25);
        border-radius: 10px;
        background: #2a3a53;
        /* moins sombre que #1e293b */
        color: #ffffff;
        cursor: text;
        outline: none;
        transition: border-color .15s, box-shadow .15s;
    }

    /* PLACEHOLDER CONTENTEDITABLE */
    .editor:empty::before {
        content: attr(data-placeholder);
        color: #b0b8c1;
        /* plus clair que #9ca3af */
        pointer-events: none;
    }

    /* ===============================
   NOM DU PROJET (INPUT LIKE)
================================ */
    #project_name.editor {
        font-size: 14px;
        font-weight: normal;
        line-height: 1.4;
        min-height: 42px;
        padding: 10px 12px;
        display: flex;
        align-items: center;
    }

    /* ===============================
   DESCRIPTION PROJET
================================ */
    #description_projet.editor {
        min-height: 140px;
        padding: 12px;
        font-size: 14px;
        line-height: 1.6;
    }

    /* ===============================
   GOOGLE TITLE / META CONTENT (COULEUR CLAIRE)
================================ */
    #google_title.editor,
    #metacontent.editor {
        min-height: 42px;
        padding: 10px 12px;
        font-size: 14px;
        line-height: 1.4;
        background: #3b4c6b;
        /* moins sombre que #2c3e50 */
        border: 1px solid rgba(255, 255, 255, .25);
        border-radius: 8px;
        color: #e5e7eb;
    }

    #google_title.editor:empty::before,
    #metacontent.editor:empty::before {
        color: #c0c8d1;
        /* plus clair que #b0b8c1 */
    }

    /* ===============================
   FOCUS
================================ */
    .editor:focus {
        border-color: #22c55e;
        box-shadow: 0 0 0 2px rgba(34, 197, 94, .3);
    }

    /* ===============================
   BOUTON ENVOI
================================ */
    .submit-btn {
        margin-top: 22px;
        background: #22c55e;
        /* un vert un peu plus vif */
        color: #052e16;
        padding: 16px;
        text-align: center;
        border-radius: 12px;
        cursor: pointer;
        font-weight: 600;
        transition: transform .15s, box-shadow .15s;
    }

    .submit-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(34, 197, 94, .4);
    }

    /* ===============================
   CHECKBOX STYLING
================================ */
    input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 22px;
        height: 22px;
        border: 2px solid #d1d9e6;
        /* plus clair que #cbd5f5 */
        border-radius: 6px;
        background-color: #2a3a53;
        /* moins sombre que #1e293b */
        cursor: pointer;
        position: relative;
        transition: all 0.2s ease;
    }

    input[type="checkbox"]:checked {
        background: #22c55e;
        /* vert */
        border-color: #22c55e;
    }

    input[type="checkbox"]:checked::after {
        content: '';
        position: absolute;
        left: 6px;
        top: 2px;
        width: 6px;
        height: 12px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    input[type="checkbox"]:hover {
        border-color: #34d17a;
    }
 
    /* ===============================
   INPUT PASSWORD (PROJET)
================================ */
    #password_projet {
        width: 100%;
        margin-top: 6px;
        padding: 10px 12px;
        font-size: 14px;
        line-height: 1.4;
        color: #0f172a;

        background: #f1f5f9;
        /* clair */
        border: 1px solid #cbd5f5;
        border-radius: 10px;
        background-color: #4f769c;
        outline: none;
        transition: border-color .15s, box-shadow .15s, background .15s;
    }

    /* Placeholder */
    #password_projet::placeholder {
        color: #94a3b8;
    }

    /* Focus */
    #password_projet:focus {
        background: #ffffff;
        border-color: #22c55e;
        box-shadow: 0 0 0 2px rgba(34, 197, 94, .25);
    }

    /* ===============================
   LABEL + DESCRIPTION (RAPPEL)
================================ */
    label[for="password_projet"] {
        color: #334155;
        font-weight: 500;
    }

    .field-description {
        font-size: 13px;
        color: #64748b;
        margin-bottom: 6px;
    }
 
    /* ===============================
   price (INPUT NUMBER)
================================ */
    #price {
        width: 100px;
        min-height: 42px;
        padding: 10px 12px;
        font-size: 14px;
        line-height: 1.4;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 10px;
        background: #2a3a53;
        /* même couleur que les éditeurs */
        color: #ffffff;
        outline: none;
        transition: border-color .15s, box-shadow .15s;
    }

    /* PLACEHOLDER */
    #price::placeholder {
        color: #b0c8d1;
        /* même que les placeholders des éditeurs */
    }

    /* FOCUS */
    #price:focus {
        border-color: #22c55e;
        box-shadow: 0 0 0 2px rgba(34, 197, 94, .3);
    }
 
    .add_child {
        background-color: #052e16;
    }

    .d_flex {
        display: flex;
    }

    /* Conteneur gallery */
    #gallery-flex {
        display: flex;
        /* display flex pour aligner les cartes */
        gap: 20px;
        flex-wrap: wrap;
        max-width: 80%;
        margin: auto;
        justify-content: space-around;
    }

    .actions {
        padding: 10px;
    }

    /* Carte image */
    #gallery-flex .gallery-item {
        display: flex;
        /* display flex pour organiser contenu vertical */
        flex-direction: column;
        /* image + actions */
        flex: 1 1 200px;
        max-width: 260px;
        border: 1px solid #ccc;
        border-radius: 7px;
        padding: 8px;
        box-sizing: border-box;
    }

    /* Images */
    #gallery-flex img {
        width: 100%;
        height: 200px;
        /* hauteur fixe */
        object-fit: cover;
        /* remplissage sans déformation */
        border-radius: 7px;
        display: block;
    }

    /* Zone actions (checkbox, corbeille, étoile) */
    #gallery-flex .actions {
        display: flex;
        /* flex pour aligner horizontalement */
        align-items: center;
        justify-content: space-between;
        /* espace entre les éléments */
        margin-top: 8px;
    }

    /* Checkbox */
    #gallery-flex .check-remove {
        cursor: pointer;
    }

    /* Corbeille */
    #gallery-flex .remove_element {
        cursor: pointer;
        width: 22px;
        height: 22px;
        transition: transform 0.2s, opacity 0.2s;
    }

    #gallery-flex .remove_element:hover {
        transform: scale(1.1);
        opacity: 0.85;
    }

    /* Etoile */
    #gallery-flex .star-wrap input {
        display: none;
        /* cacher le radio */
    }

    #gallery-flex .star {
        width: 22px;
        height: 22px;
        cursor: pointer;
        fill: transparent;
        /* non sélectionnée */
        stroke: #000;
        /* contour noir */
        stroke-width: 1.5;
        transition: fill 0.2s;
    }

    /* Etoile sélectionnée */
    #gallery-flex .star-wrap input:checked+.star {
        fill: gold;
    }

    .display_none {
        display: none;
    }

    .editor {
        padding-top: 20px;
        padding-bottom: 20px;

    }

 

    .add_child:hover {
        cursor: pointer;
    }
 

    /*

MENU CSS 
    */


    
 
    /* ===== MENU CONTAINER ===== */
    .menu_ {
        width: 230px;
        background: #0f172a;
        /* bleu foncé */
        border-radius: 14px;
        padding: 12px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
        font-family: "Segoe UI", Arial, sans-serif;
    }

    /* ===== MENU ITEM ===== */
    .menu-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        margin-bottom: 4px;
        color: #e5e7eb;
        cursor: pointer;
        border-radius: 10px;
        transition:
            background 0.25s ease,
            transform 0.15s ease,
            box-shadow 0.15s ease;
    }

    /* ===== ICONES ===== */
    .menu-item i {
        font-size: 18px;
        width: 22px;
        text-align: center;
        color: #38bdf8;
    }

    /* ===== TEXTE ===== */
    .menu-item span {
        font-size: 15px;
        white-space: nowrap;
    }

    /* ===== HOVER ===== */
    .menu-item:hover {
        background: #1e293b;
        transform: translateX(4px);
    }

    /* ===== ITEM ACTIF ===== */
    .menu-item.active {
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
    }

    .menu-item.active i,
    .menu-item.active span {
        color: #ffffff;
    }

    /* ===== SEPARATEUR ===== */
    .menu-separator {
        border: none;
        height: 1px;
        background: rgba(255, 255, 255, 0.12);
        margin: 10px 0;
    }

    /* ===== BADGE (COMPTEUR) ===== */
    .badge {
        margin-left: auto;
        background: #22c55e;
        color: #052e16;
        padding: 2px 9px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: bold;
    }

    /* ===== DECONNEXION ===== */
    .menu-item.logout i {
        color: #ef4444;
    }

    .menu-item.logout:hover {
        background: rgba(239, 68, 68, 0.18);
    }

    .menu-item.logout:hover i,
    .menu-item.logout:hover span {
        color: #fecaca;
    }

    /* ===== RESPONSIVE (OPTIONNEL) ===== */
    @media (max-width: 600px) {
        .menu_ {
            width: 100%;
            border-radius: 0;
        }
    }
 

 
    html {
        scroll-behavior: smooth;
    }