:root{ 
    --Noir_Profond : #000000;
    --Bleu_Marine: #001f3f;

    --Noir_Ébène: #0c0c0c;
    --Bleu_Cobalt: #0047ab;

    --Noir_Charbon: #333333;
    --Bleu_Nuit: #0c0c4c;

    --Noir_Onyx : #1a1a1a;
    --Bleu_Royal: #4169e1;

    --Noir_Profond: #000000;
    --Bleu_Turquoise : #40e0d0;

    --Noir_Jais : #232323;
    --Bleu_Ciel: #87ceeb;

    --Noir_Minuit : #111114;
    --Bleu_Glacier : #f0f8ff;

    --Noir_Ébène: #0c0c0c;
    --Bleu_Azur : #007fff;

    --Noir_Onyx: #1a1a1a;
    --Bleu_Lagon: #00bfff;

    
    --Noir_Charbon: #333333;
    --Bleu_Poudre: #b0e0e6;


    --black_heavy : #0c0c0c;
    --blue_shine : #007fff;
    --black_soft : #333333;
    --blue_sky : #00bfff;

    --primary: #133799;       
    --secondary: #6c757d;      
    --success: #28a745;         
    --danger: #dc3545;          
    --warning: #ffc107;        
    --info: #046ba7;           
    --light: #f8f9fa;           
    --dark: #343a40;          

    --gris-0: #000000;          
    --gris-1: #0d0d0d;          
    --gris-2: #1a1a1a;         
    --gris-3: #262626;         
    --gris-4: #333333;         
    --gris-5: #404040;         
    --gris-6: #4d4d4d;         
    --gris-7: #595959;         
    --gris-8: #666666;         
    --gris-9: #737373;         
    --gris-10: #808080;        
    --gris-11: #8c8c8c;        
    --gris-12: #999999;        
    --gris-13: #a6a6a6;        
    --gris-14: #b3b3b3;        
    --gris-15: #bfbfbf;        
    --gris-16: #cccccc;        
    --gris-17: #d9d9d9;        
    --gris-18: #e6e6e6;        
    --gris-19: #f2f2f2;        
    --gris-20: #ffffff;         
    
    --bleu-1: #1100ff;         
    --bleu-2: #032aa1;
    --bleu-3: #0592bd;
    --bleu-4: #173da7;
    --bleu-5: #3d3dec;         
    
    
    --orange-1: #ff7300;        
    --orange-2: #eb7f03;       
    --orange-3: #ff4500;      
    --orange-4: #e2992b;        
    --orange-5: #ffa947;        
    
    --rouge-1: #ff0000;         
    --rouge-2: #c40716;         
    --rouge-4: #962f39;         
    --rouge-5: #ff6969;         
    
    --vert-1: #225c00;        
    --vert-2: #19b405;          
    --vert-3: #3cff00;         
    --vert-4: #15a136;          
    --vert-5: #4faa6a;         
    
    --violet-4: #4b0082;        
    --violet-3: #800080;        
    --violet-5: #8a2be2;        
    --violet-1: #6f42c1;        
    --violet-2: #d8b8f3;        
    
    --jaune-1: #fbff07;        
    --jaune-3: #ffd700;        
    --jaune-4: #c99a0c;         
    --jaune-2: #e7d84d;        
    --jaune-5: #f0e68c;        
}
/* ******************************COLORS*************************** */


* { padding: 0; margin: 0; transition: all 0.1s; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -ms-transition: all 0.1s; -o-transition: all 0.1s; } 



/* ******************************FORM STYLE*************************** */
/* --------------------------------------------- */
.stylish-form {
   
    font-family: Arial, sans-serif;
    width: 300px;
    margin: 0 auto;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9;
}
.stylish-form * {
    transition: all 0.1s;
}

.stylish-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.stylish-form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    outline: none;
}
.stylish-form input:focus{
    border-bottom: 2px solid #007bff;
    box-shadow: 1px 1px 10px rgba(128, 128, 128, 0.233);
}

.stylish-form button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

.stylish-form button:hover {
    background-color: #157dec;;
    box-shadow: 0px 2px 2px rgba(128, 128, 128, 0.356);
}
/* ------------------------------------------------- */

/* ------------------------------------------------- */
.modern-form {
    background: #fff;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

.modern-form h2 {
    margin-bottom: 20px;
    color: #333;
}

.modern-form label {
    display: block;
    text-align: left;
    margin: 10px 0 5px;
    color: #555;
}

.modern-form input {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.modern-form input:focus {
    border-color: #007bff;
    outline: none;
}

.modern-form button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.modern-form button:hover {
    background-color: #0056b3;
}
/* ------------------------------------------- */



/* ------------------------------------------- */
.minimalist-form {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

.minimalist-form h2 {
    margin-bottom: 20px;
    color: #333;
}

.minimalist-form input,
.minimalist-form textarea {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.minimalist-form button {
    width: calc(100% - 20px);
    padding: 10px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.minimalist-form button:hover {
    background-color: #0056b3;
}
/* --------------------------------------- */



/* --------------------------------------- */
.form-custom {
    padding: 8px;
    background-color: #f7f7f7;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-custom input[type="text"],
.form-custom input[type="email"],
.form-custom input[type="password"],
.form-custom textarea,
.form-custom select {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-custom input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.form-custom input[type="submit"]:hover {
    background-color: #45a049;
}

.form-custom label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}

.form-custom .container {
    width: 90%;
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 8px;
} 


/* ------------------------------------------------- */

.basic-form .form-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 8px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* 2. Classe pour les étiquettes */

.basic-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}
/* 3. Classe pour les champs de saisie */

.basic-form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.basic-form input:focus {
    border-color: #007bff;
    outline: none;
}
/* 4. Classe pour les boutons */

.basic-form button {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.basic-form button:hover {
    background-color: #0056b3;
}

/* 6. Classe pour les champs de texte étendus (textarea) */

.basic-form textarea {
    width: 100%;
    height: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.basic-form textarea:focus {
    border-color: #007bff;
    outline: none;
}
/* 7. Classe pour les groupes de champs (fieldsets) */

.basic-form fieldset {
    margin-bottom: 20px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.basic-form legend {
    font-weight: bold;
    color: #333;
}
/* 8. Classe pour les messages de succès */



 .basic-form button[type="reset"] {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #6c757d;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-left: 10px;
}

.basic-form button[type="reset"]:hover {
    background-color: #5a6268;
}

.basic-form select {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.basic-form select:focus {
    border-color: #007bff;
    outline: none;
}

/* --------------------------------------- */



.pastel-form {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 350px;
    text-align: center;
    border: 2px solid #b3cde0;
}

.pastel-form h2 {
    margin-bottom: 20px;
    color: #333;
    font-size: 24px;
}

.pastel-form label {
    display: block;
    text-align: left;
    margin: 10px 0 5px;
    color: #555;
    font-size: 14px;
}



.pastel-form input,
.pastel-form textarea {
    width: calc(100% - 24px);
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #b3cde0;
    border-radius: 8px;
    box-sizing: border-box;
    background-color: #f7fafc;
    transition: border-color 0.3s;
}

.pastel-form input:focus,
.pastel-form textarea:focus {
    border-color: #6699cc;
    outline: none;
}

.pastel-form button {
    width: calc(100% - 24px);
    padding: 12px;
    border: none;
    border-radius: 8px;
    background-color: #6699cc;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.pastel-form button:hover {
    background-color: #336699;
}

/* ----------------------------------------- */

.rowcomb-form{
    display: flex;
    flex-direction: column;
    }
    .rowcomb-form .group-container {
        display: flex;
    }
    .rowcomb-form .group-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border: 1px solid grey;
        border-radius: 4px;
    }
    .rowcomb-form label {
        display: flex;
        background-color: #7a7a7a;
    }
    .rowcomb-form input {
        display: flex;
        border: none;
        outline: none;
    }

/* ******************************FORM STYLE*************************** */




/* *************************TABLES***************************** */
.table-light {
    width: 100%;
    border-collapse: collapse !important;
    }
    .table-light th, .table-light td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
    }
    .table-light th {
        background-color: #f2f2f2;
    }




.table-shadws{
    border-collapse: collapse;
    border: 2px solid rgb(151, 151, 151);
    /* margin: 10px; */
    background-color: #fff;
    box-shadow: 1px 1px 12px rgb(216, 216, 216);
    }
    .table-shadws thead tr{
    background-color:  midnightblue;
    color: white;
    padding: 8px;
    }
    .table-shadws.forest thead tr{background-color:  #157c1d}

    .table-shadws.shad thead tr{background-color:  #3c3c3d}

    .table-shadws th,td{
    padding: 8px;
    border: 1px solid rgb(196, 196, 196);
    }

    .table-shadws tbody tr:nth-child(even){
    background-color: rgb(219, 219, 219);
    }
    

/* *************************TABLES***************************** */



/* **********************************************EFFECTS*************************** */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.fadeIn{ animation: fadeIn 1s ease; }

@keyframes fadeOut {
    from { opacity: 1; }
  to { opacity: 0; }
}
.fadeOut{ animation: fadeOut 1s ease; }



@keyframes fadeOff {
    from { opacity: 1 }
    to { 
        visibility: hidden;
        position: absolute;
        opacity: 0;}
    }
    .fadeOff{ animation: fadeOff 1s ease forwards; }
    
    
    
    
    @keyframes burst {
        0% { transform: scale(0); opacity: 0;filter: blur(5px); }
        50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.burst {
    animation: burst 1.2s ease-in;
}
@keyframes burst-s {
    0% { transform: scale(0); opacity: 1;backdrop-filter: blur(5px); }
    50% { transform: scale(1.2); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.burst-s {
    animation: burst-s 1.2s ease-in;
}
@keyframes burst-m {
    0% { transform: scale(2.5); opacity: 0;filter: blur(5px); }
    /* 50% { transform: scale(1.2); opacity: 1; } */
    100% { transform: scale(1); opacity: 1; }
}

.burst-m {
    animation: burst-m 1.2s ease-in;
}

@keyframes anim-trans-x {
    0% { transform: translateX(-100%); opacity: 0; }
    /* 50% { transform: scale(1.2); opacity: 1; } */
    100% { transform: translateX(0%); opacity: 1; }
}

.anim-transXL {
    animation: anim-trans-x 1.2s ease-in;
}
@keyframes anim-trans-y {
    0% { transform: translateY(-100%); opacity: 0; }
    /* 50% { transform: scale(1.2); opacity: 1; } */
    100% { transform: translateY(0%); opacity: 1; }
}

.anim-transYT {
    animation: anim-trans-y 1.2s ease-in;
}

@keyframes anim-trans-x-r {
    0% { transform: translateX(100%); opacity: 0; }
    /* 50% { transform: scale(1.2); opacity: 1; } */
    100% { transform: translateX(0%); opacity: 1; }
}

.anim-transXR {
    animation: anim-trans-x-r 1.2s ease-in;
}
@keyframes anim-trans-y-b {
    0% { transform: translateY(100%); opacity: 0; }
    /* 50% { transform: scale(1.2); opacity: 1; } */
    100% { transform: translateY(0%); opacity: 1; }
}

.anim-transYB {
    animation: anim-trans-y-b 1.2s ease-in;
}


@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in {
    animation: slideIn 1s ease-out forwards;
}


@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

.bounce {
    animation: bounce 2s infinite;
}


@keyframes rotateIn {
    from {
        transform: rotate(-200deg);
        opacity: 0;
    }
    to {
        transform: rotate(0);
        opacity: 1;
    }
}

.rotate-in {
    animation: rotateIn 1s ease-in-out forwards;
}



@keyframes scaleUp {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.scale-up {
    animation: scaleUp 0.5s ease-out forwards;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.pulse {
    animation: pulse 1s infinite;
}

@keyframes flip {
    from {
        transform: perspective(400px) rotateY(0);
    }
    to {
        transform: perspective(400px) rotateY(180deg);
    }
}

.flip {
    animation: flip 1s forwards;
    transform-style: preserve-3d;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

.shake {
    animation: shake 0.5s;
}



@keyframes zoomIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.zoomIn {
    animation: zoomIn 0.5s forwards;
}

@keyframes zoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0);
        opacity: 0;
    }
}

.zoomOut {
    animation: zoomOut 0.5s forwards;
}

@keyframes zoomFrom {
    from {
        transform: scale(2);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.zoomFrom {
    animation: zoomFrom 0.6s forwards;
}



@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.swing {
    animation: swing 1s ease forwards;
    transform-origin: top center;
}

@keyframes rollIn {
    from {
        transform: translateX(-100%) rotate(-120deg);
        opacity: 0;
    }
    to {
        transform: translateX(0) rotate(0);
        opacity: 1;
    }
}

.roll-in {
    animation: rollIn 1s ease-out forwards;
}


@keyframes signal {
    0%{transform: scale(1);background-color: green;}
    100% {transform: scale(1.25);background-color: green;}
}

.signal{
    animation: signal 1.2s infinite linear;
    color: green;
    background-color: green;
}

/* **********************************************EFFECTS*************************** */



/* ********************BTNS BOOTS****************** */
.btns{
    display: inline-block;
    padding: 6px;
    border: none;
    border:1px solid white;
    border-radius: 0.3rem;
    color: #fff;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    -webkit-border-radius: 0.3rem;
    -moz-border-radius: 0.3rem;
    -ms-border-radius: 0.3rem;
    -o-border-radius: 0.3rem;
}
.btn-secondary-s {background-color: var(--secondary)}
.btn-primary-s   {background-color: var(--primary)}
.btn-success-s   {background-color: var(--success)}
.btn-danger-s    {background-color: var(--danger)}
.btn-warning-s   {background-color: var(--warning);  color: #232323;}
.btn-info-s      {background-color: var(--info);  color: #232323;}


/* ********************BTNS BOOTS****************** */





/* ***********************EFFECTS SHADOW***************************** */


/* Ombre légère */
.bs-light {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* Ombre moyenne */
.bs-medium {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Ombre prononcée */
.bs-heavy {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

/* Ombre floue */
.bs-blur {
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);
}

/* Ombre de contour */
.bs-outline {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
}
/* Ombre interne */
.bs-inner {
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

/* Ombre élevée */
.bs-elevated {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Ombre en biseau */
.bs-bevel {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.5);
}

/* Ombre en relief */
.bs-emboss {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) inset, 0 -2px 5px rgba(255, 255, 255, 0.5) inset;
}

/* Ombre de perspective */
.bs-perspective {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transform: perspective(100px) rotateX(-10deg);
}

/* Ombre douce */
.bs-soft {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* Ombre décalée */
.bs-offset {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
}

/* Ombre colorée */
.bs-colored {
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

/* Ombre multiple */
.bs-multiple {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}

/* Ombre extérieure */
.bs-outer {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.3) inset;
}
/* ******************************************EFFECTS SHADOW***************************** */



/* ****************************NEOMORPHISM AND GLASSMORPHISM*************************** */
/* Néomorphisme */
.neo {
    background-color: #f0f0f0; 
    box-shadow: 5px 5px 10px #cfcfcf, -5px -5px 10px #ffffff; /* Ombre */
    /* border-radius: 8px;  */
    padding: 5px; 
}
.neo-rad {
    background-color: #f0f0f0; 
    box-shadow: 5px 5px 10px #cfcfcf, -5px -5px 10px #ffffff; /* Ombre */
    border-radius: 8px; 
    padding: 5px; 
}

/* Néomorphisme inversé */
.neo-inverted {
    background-color: #f0f0f0; 
    box-shadow: inset 5px 5px 10px #cfcfcf, inset -5px -5px 10px #ffffff; /* Ombre intérieure */
    border-radius: 10px; 
    
}
/* Néomorphisme arrondi */
.neo-rounded {
    background-color: #f0f0f0;
    box-shadow: 5px 5px 10px #cfcfcf, -5px -5px 10px #ffffff;
    border-radius: 50%;
    padding: 8px;
}

/* Néomorphisme décalé */
.neo-offset {
    background-color: #f0f0f0;
    box-shadow: 10px 10px 20px #cfcfcf, -5px -5px 10px #ffffff;
    border-radius: 10px;
    padding: 8px;
}

/* Néomorphisme accentué */
.neo-accented {
    background-color: #f0f0f0;
    box-shadow: 5px 5px 10px #cfcfcf, -5px -5px 10px #ffffff, 0 0 0 5px #f0f0f0;
    border-radius: 10px;
    padding: 8px;
}

/* Néomorphisme en relief */
.neo-embossed {
    background-color: #f0f0f0;
    box-shadow: 5px 5px 10px #cfcfcf, -5px -5px 10px #ffffff, 0 0 5px rgba(0, 0, 0, 0.1) inset;
    border-radius: 10px;
    padding: 8px;
}

/* Néomorphisme enfoncé */
.neo-sunken {
    background-color: #f0f0f0;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1) inset, -5px -5px 10px rgba(255, 255, 255, 0.7) inset;
    border-radius: 10px;
    padding: 8px;
    
}

/* Néomorphisme flou */
.neo-blur {
    background-color: #f0f0f0;
    box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.2), inset 0 0 20px 5px rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    padding: 8px;
}

/* Néomorphisme double */
.neo-double {
    background-color: #f0f0f0;
    box-shadow: 5px 5px 10px #cfcfcf, -5px -5px 10px #ffffff, 10px 10px 20px #cfcfcf inset, -5px -5px 10px #ffffff inset;
    border-radius: 10px;
    padding: 8px;
}

/* Néomorphisme contrasté */
.neo-contrasted {
    background-color: #f0f0f0;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 8px;
}

/* Néomorphisme éclairé */
.neo-lit {
    background-color: #f0f0f0;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1), 0 0 20px rgba(255, 255, 255, 0.5) inset;
    border-radius: 10px;
    padding: 8px;
}

/* Néomorphisme minimaliste */
.neo-minimal {
    background-color: #f0f0f0;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 8px;
}


/* -------- */
/*glase */
.glas {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px); 
    border-radius: 10px; 
    
}

/*glase flou */
.glas-blur {
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(20px); 
    border-radius: 10px; 
}


.glas-pink {
    background-color: rgba(255, 0, 0, 0.1);; 
    backdrop-filter: blur(10px); 
    border-radius: 10px; 
    
}

/*glase coloré flou */
.glas-pink-blur {
    background-color: #00BCD4;
    backdrop-filter: blur(20px); 
    border-radius: 10px; 
    
}
.glas-blue {
    background-color: var(--bleu-2);
    backdrop-filter: blur(10px); 
    border-radius: 10px; 
    
}

/*glase coloré flou */
.glas-blue-blur {
    background-color: var(--bleu-2);
    backdrop-filter: blur(20px); 
    border-radius: 10px; 
    
}

/*glase accentué */
.glas-accented {
    background-color: rgba(255, 255, 255, 0.5); 
    backdrop-filter: blur(10px); 
    border-radius: 10px; 
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); 
    
}

/*glase enfoncé */
.glas-sunken {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px); 
    border-radius: 10px; 
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5); /* Ombre enfoncée */
    
}

/*glase en relief */
.glas-embossed {
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px); 
    border-radius: 10px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) inset; /* Ombre en relief */
}

/*glase inversé */
.glas-inverted {
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px); 
    border-radius: 10px; 
}

/*glase coloré inversé */
.glas-pink-inverted {
    background-color: rgba(0, 0, 255, 0.1);
    backdrop-filter: blur(10px); 
    border-radius: 10px; 
    
}

/* ****************************NEOMORPHISM AND GLASSMORPHISM*************************** */

.success-message {
    color: #3c763d;
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
}


.error-message {
    color: #a94442;
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    padding: 10px;
    border-radius: 5px;
    margin-top: -10px;
    margin-bottom: 20px;
}