/**
 * @file NTheme.css
 * @description Fichier de définition des variables CSS pour le système de thème NLib
 * 
 * @requires none
 * 
 * @example
 * // Utilisation des variables CSS
 * .element {
 *   background-color: var(--n-primary);
 *   color: var(--n-text);
 * }
 * 
 * @note Les variables CSS définies ici sont utilisées dans tous les composants NLib
 * @note Les valeurs peuvent être surchargées pour personnaliser le thème
 */
 
/* Variables CSS pour le système de thème NLib 
   -------------------------------------------------- */
   
/* Couleurs principales du thème */
/* Définissent la palette de base de l'application */
/* Valeurs par défaut appliquées via var(--n-{nom}) */
/* Peuvent être surchargées pour personnalisation */

/* Couleurs de texte */
/* Contrôlent les couleurs typographiques principales */
/* Inclut les états inversés et atténués */

/* Arrière-plans */
/* Définissent les couches d'arrière-plan principales et secondaires */
/* Utilisées pour le fond de page et les conteneurs imbriqués */

/* Bordures */
/* Paramètres des contours des éléments UI */
/* Cohérence visuelle entre les composants */

/* États interactifs */
/* Couleurs pour les états hover/active/disabled */
/* Garantissent la cohérence des interactions utilisateur */

/* Couleurs de feedback */
/* Système visuel pour les états spéciaux */
/* Alertes, notifications et indicateurs d'état */

/* Ombres */
/* Paramètres d'ombrage global */
/* Utilisé pour les élévations et effets de profondeur */
:root {
    /* Couleurs principales */
    --n-primary: rgb(0, 123, 255);
    --n-secondary: rgb(108, 117, 125);
    --n-accent: rgb(255, 152, 0);
    
    /* Couleurs de texte */
    --n-text: rgb(0, 0, 0);
    --n-text-inverse: rgb(255, 255, 255);
    --n-text-muted: rgb(108, 117, 125);
    
    /* Arrière-plans */
    --n-bg: rgb(255, 255, 255);
    --n-bg-secondary: rgb(248, 249, 250);
    
    /* Bordures */
    --n-border: rgb(222, 226, 230);
    
    /* États */
    --n-hover: rgb(0, 86, 179);
    --n-active: rgb(0, 64, 128);
    --n-disabled: rgb(233, 236, 239);
    
    /* Feedback */
    --n-success: rgb(40, 167, 69);
    --n-error: rgb(220, 53, 69);
    --n-warning: rgb(255, 193, 7);
    --n-info: rgb(23, 162, 184);
    
    /* Ombres */
    --n-shadow: rgba(0, 0, 0, 0.15);
}
/**
 * @file NTag.css
 * @description Styles CSS pour le composant NTag
 * 
 * Ce fichier contient les styles de base et les variantes pour le composant tag personnalisé.
 * Il définit les styles pour les différents états du tag (normal, hover, active, etc.)
 * ainsi que les styles spécifiques aux différents types de tags (texte, icône, combinaisons).
 * 
 * Les styles utilisent des variables CSS personnalisées pour une meilleure maintenabilité et
 * cohérence avec le thème global de l'application.
 *
 * @requires NTheme.css
 * 
 * @see NTag.js
 * 
 */
/**
 * @file NTextTag.css
 *
 * @requires NTag.css
 */
/**
 * @file NMainTag.css
 *
 * @requires NTheme.css
 * @requires NTag.css
 * @requires NTextTag.css
 */
 html{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    word-break: break-word;
    background-color: var(--n-bg);
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: fill-available;
}

.nmaintag-chidld-framecontainer{
    position: relative;
    width: 100%;
}

/* Style pour le message de succès */
.nmain-child-message {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 16px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 20px var(--n-shadow);
    z-index: 100000001;
    opacity: 0;
}

.nmain-child-message-showing {
    animation: nmain-message-slideUp 0.5s ease forwards;
}

.nmain-child-message-hidding {
    animation: nmain-message-fadeOut 0.5s ease forwards;
}

.nmain-child-message-info {
    background: rgba(0, 0, 0, 0.8);
    color: white;
}

.nmain-child-message-success {
    background: var(--n-success);
    color: var(--n-text-inverse);
}

.nmain-child-message-error {
    background: var(--n-error);
    color: var(--n-text-inverse);
}

.nmain-child-message-warning {
    background: var(--n-warning);
    color: var(--n-text-inverse);
}

/* Icône de succès */
.nmain-child-message-icon {
    width: 24px;
    height: 24px;
    position: relative;
}

.nmain-child-message-icon-info::before,
.nmain-child-message-icon-info::after {
    content: 'ℹ';
    position: absolute;
    left: -10px;
    top: -15px;
    font-size: 2.5rem;
    color: var(--n-text-inverse);
}

.nmain-child-message-icon-success::before,
.nmain-child-message-icon-success::after {
    content: '✓';
    position: absolute;
    left: -10px;
    top: -15px;
    font-size: 2.5rem;
    color: var(--n-text-inverse);
}

.nmain-child-message-icon-error::before,
.nmain-child-message-icon-error::after {
    content: '✗';
    position: absolute;
    left: -10px;
    top: -15px;
    font-size: 2.5rem;
    color: var(--n-text-inverse);
}

.nmain-child-message-icon-warning::before,
.nmain-child-message-icon-warning::after {
    content: '⚠';
    position: absolute;
    left: -5px;
    top: -11px;
    font-size: 2rem;
    color: var(--n-text-inverse);
}

/* Texte du message */
.nmain-child-message-text {
    font-size: 16px;
    font-weight: 500;
}

/* Animations */
@keyframes nmain-message-slideUp {
    0% {
        transform: translateX(-50%) translateY(100px);
        opacity: 0;
    }
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes nmain-message-fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .nmain-child-message {
        width: calc(100% - 80px);
        margin: auto;
        bottom: 16px;
    }
}

.nmain-progress-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000000;
}

.nmain-progress-container {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.nmain-progress-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Style pour le progress déterminé */
.nmain-progress-circle:not(.infinite) {
    background: conic-gradient(from 0deg at center,
        var(--n-primary) var(--progress),
        #e0e0e0 var(--progress)
    );
    animation: nmain-progress-spin 1.5s ease-in-out infinite;
}

.nmain-progress-circle::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: white;
}

/* Style pour le progress infini */
.nmain-progress-circle.infinite {
    border: 4px solid #e0e0e0;
    border-top: 4px solid var(--n-primary);
    animation: nmain-progress-spin 1s linear infinite;
}

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

.nmain-progress-text-container {
    text-align: center;
}

.nmain-progress-percentage {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--n-primary);
    margin-bottom: 5px;
}

.nmain-progress-description {
    font-size: 1em;
    color: #666;
}

/* ───── Pull to refresh ───── */
.nmain-pull-to-refresh-indicator {
    position: fixed;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(40px, 8vw, 52px);
    height: clamp(40px, 8vw, 52px);
    border-radius: 50%;
    background-color: var(--n-bg);
    box-shadow: 0 2px 12px var(--n-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000002;
    transition: top 0.15s ease;
}

.nmain-pull-to-refresh-indicator::before {
    content: '';
    width: clamp(18px, 4vw, 26px);
    height: clamp(18px, 4vw, 26px);
    border-radius: 50%;
    border: 3px solid var(--n-border);
    border-top-color: var(--n-primary);
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.nmain-pull-to-refresh-indicator-loading::before {
    opacity: 1;
    animation: nmain-ptr-spin 0.75s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .nmain-pull-to-refresh-indicator,
    .nmain-pull-to-refresh-indicator::before {
        transition: none;
        animation: none;
    }
}
/**
 * @file NFrameTag.css
 * @description Styles CSS pour le composant NFrameTag
 * 
 * Ce fichier contient les styles de base et les variantes pour le composant cadre personnalisé.
 * Il définit les styles pour les différents états du cadre (normal, hover, active, etc.)
 * ainsi que les styles spécifiques aux différents types de cadres (texte, icône, combinaisons).
 * 
 * Les styles utilisent des variables CSS personnalisées pour une meilleure maintenabilité et
 * cohérence avec le thème global de l'application.
 *
 * @requires NTag.css
 * 
 * @see NFrameTag.js
 * 
 * @example
 * // Utilisation des classes CSS
 * <div class="nframe-bring-to-front-animation">
 *   <div class="nframe-child-content">
 *     Contenu du cadre
 *   </div>
 * </div>
 * 
 * @note Les variables CSS utilisées sont définies dans le thème global
 * @note Les transitions sont configurées pour une expérience utilisateur fluide
 */
 
 /* Style 1 : Fade avec rotation */
@keyframes nframeBringToFront {
    0% { 
        transform: rotate(-5deg) scale(0.95);
    }
    100% { 
        transform: rotate(0deg) scale(1);
    }
}

@keyframes nframeSendToBack {
    0% { 
        transform: rotate(0deg) scale(1);
    }
    100% { 
        transform: rotate(5deg) scale(0.95);
    }
}

/* Classes d'animation */
.nframe-animation-bring-to-front {
    animation: nframeBringToFront 0.3s ease-out forwards;
}

.nframe-animation-send-to-back {
    animation: nframeSendToBack 0.3s ease-in forwards;
}

.nframe-float-frame{
    position: fixed;
    top: 0;
    left: 0;
}

.nframe-no-float-frame{
    position: static;
    top: 0;
    left: 0;
}

.nframe-child-divtextzone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    margin: 15px auto;
    animation: nframe-fadeIn 0.8s ease-out;
    text-align: center;
    position: relative;
    overflow: hidden;
}
    
/* Icône d'alerte */
.nframe-child-alerticon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
    
.nframe-child-alerticon.ntheme-dark {
    filter: brightness(0) invert(1);
}
    
/* Texte d'alerte */
.nframe-child-alerttext {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--n-text);
    margin: 0;
    font-weight: 500;
}
    
/* Responsive design */
@media (max-width: 768px) {
    .nframe-child-divparent {
        padding: 15px;
        padding-top: 0;
    }

    .nframe-child-pagetitle {
        font-size: 1.2rem;
    }

    .nframe-child-alerticon {
      width: 60px;
      height: 60px;
    }
      
    .nframe-child-alerttext {
        font-size: 1rem;
    }
}

/**
 * @file NButtonTag.css
 * @description Styles CSS pour le composant NButtonTag
 * 
 * Ce fichier contient les styles de base et les variantes pour le composant bouton personnalisé.
 * Il définit les styles pour les différents états du bouton (normal, hover, active, etc.)
 * ainsi que les styles spécifiques aux différents types de boutons (texte, icône, combinaisons).
 * 
 * Les styles utilisent des variables CSS personnalisées pour une meilleure maintenabilité et
 * cohérence avec le thème global de l'application.
 *
 * @requires NTag.css
 * @requires NTextTag.css
 * @requires NImageTag.css
 * 
 * @see NButtonTag.js
 * 
 * @example
 * // Utilisation des classes CSS
 * <button class="nbutton-style-radius nbutton-type-icon">
 *   <img src="icon.png" class="nbutton-child-icon">
 * </button>
 * 
 * @note Les variables CSS utilisées sont définies dans le thème global
 * @note Les transitions sont configurées pour une expérience utilisateur fluide
 */

 /* style radius */
.nbutton-style-radius{
    border-radius: 5px;
    background-color: var(--n-primary);
    color: var(--n-text);
    font-size: 100%;
    padding: 5px;
    border: 1px solid var(--n-border);
    
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.nbutton-style-radius:hover {
    background-color: var(--n-hover);
    box-shadow: 0 3px 6px var(--n-shadow);
    transform: translateY(-1px);
}

.nbutton-style-radius:active {
    background-color: var(--n-active);
    box-shadow: inset 0 2px 4px var(--n-shadow);
    transform: translateY(0);
}

.nbutton-style-radius:focus {
    outline: 2px solid var(--n-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(var(--n-accent), 0.25);
}

.nbutton-style-radius:disabled {
    background-color: var(--n-disabled);
    color: var(--n-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 0.3s ease, background-color 0s, box-shadow 0s;
}

/* Styles spécifiques aux différents types de boutons */
:where(.nbutton-style-radius.nbutton-type-icon) {
    /* Bouton icône seul - forme carrée */
    width: 40px;
    height: 40px;
}

:where(.nbutton-style-radius.nbutton-type-icon) .nbutton-child-icon {
    margin: 0;
    width: 80%;
}

:where(.nbutton-style-radius.nbutton-type-text-icon-left) .nbutton-child-icon {
    order: 1;
    width: 25px;
    height: 25px;
}

:where(.nbutton-style-radius.nbutton-type-text-icon-left) .nbutton-child-text {
    order: 2;
}

:where(.nbutton-style-radius.nbutton-type-text-icon-right) .nbutton-child-icon {
    width: 25px;
    height: 25px;
}

:where(.nbutton-style-radius.nbutton-type-text-icon-right) .nbutton-child-text {
    order: 1;
}

:where(.nbutton-style-radius.nbutton-type-text-icon-top) .nbutton-child-icon {
    width: 25px;
    height: 25px;
}

:where(.nbutton-style-radius.nbutton-type-text-icon-top) .nbutton-child-text {
    order: 2;
}

:where(.nbutton-style-radius.nbutton-type-text-icon-bottom) .nbutton-child-icon {
    width: 25px;
    height: 25px;
}

:where(.nbutton-style-radius.nbutton-type-text-icon-bottom) .nbutton-child-text {
    order: 1;
}

/* style none */
.nbutton-style-none{
    border: none;
    outline: none;
}

:where(.nbutton-style-none.nbutton-type-icon) {
    /* Bouton icône seul - forme carrée */
    width: 40px;
    height: 40px;
}

:where(.nbutton-style-none.nbutton-type-icon) .nbutton-child-icon {
    margin: 0;
    width: 80%;
}

:where(.nbutton-style-none.nbutton-type-text-icon-left) .nbutton-child-icon {
    order: 1;
    width: 25px;
    height: 25px;
}

:where(.nbutton-style-none.nbutton-type-text-icon-left) .nbutton-child-text {
    order: 2;
}

:where(.nbutton-style-none.nbutton-type-text-icon-right) .nbutton-child-icon {
    width: 25px;
    height: 25px;
}

:where(.nbutton-style-none.nbutton-type-text-icon-right) .nbutton-child-text {
    order: 1;
}

:where(.nbutton-style-none.nbutton-type-text-icon-top) .nbutton-child-icon {
    width: 25px;
    height: 25px;
}

:where(.nbutton-style-none.nbutton-type-text-icon-top) .nbutton-child-text {
    order: 2;
}

:where(.nbutton-style-none.nbutton-type-text-icon-bottom) .nbutton-child-icon {
    width: 25px;
    height: 25px;
}

:where(.nbutton-style-none.nbutton-type-text-icon-bottom) .nbutton-child-text {
    order: 1;
}
/**
 * @file NDialogFrameTag.css
 *
 * @requires NFrameTag.css
 * @requires NTextTag.css
 * @requires NButtonTag.css
 * 
 */

/* Style pour le conteneur principal du dialogue qui couvre tout l'écran */
.ndialogframe {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Overlay semi-transparent */
    backdrop-filter: blur(5px); /* Ajoute un flou de fond */
    z-index: 99990;
    overflow-y: auto;
}

.ndialogframe-child-table-parent {
    width: 100%;
    min-height: 100%;
}

.ndialogframe-child-td-parent {
    width: 100%;
    height: 100%;
    padding-left: 5%;
    padding-right: 5%;
    vertical-align: middle;
}

/* Style pour la table principale du dialogue */
.ndialogframe-child-table {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-width: 300px;
    max-width: 800px;
    margin: 15px auto;
    border-collapse: collapse;
    border-spacing: 0;
}

.ndialogframe-size-max .ndialogframe-child-table {
    width: 100%;
}

.ndialogframe-child-header-back-button-td {
    text-align: left;
    vertical-align: top;
    min-width: 50px;
    width: 50px;
    max-width: 50px;
    border-top-left-radius: 8px;
    background-color: var(--n-primary);
}

.ndialogframe-child-header-title-td {
    padding: 12px 16px;
    font-size: 1.2em;
    font-weight: bold;
    text-align: left;
    vertical-align: middle;
    border-top-right-radius: 8px;
    background-color: var(--n-primary);
}

.ndialogframe-size-max .ndialogframe-child-header-title-td {
    width: 100%;
}

.ndialogframe-child-header-back-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin: 5px;
}

/* Style pour le corps du dialogue */
.ndialogframe-child-body-td {
    padding: 16px;
}

.ndialogframe-size-max .ndialogframe-child-body-td {
    width: 100%;
}

.ndialogframe-child-body {
    min-height: 50px; /* Hauteur minimale pour le contenu */
}

.ndialogframe-size-max .ndialogframe-child-body {
    width: 100%;
}

.ndialogframe-child-footer-back-button-td {
    text-align: left;
    vertical-align: bottom;
    min-width: 50px;
    width: 50px;
    max-width: 50px;
    border-bottom-left-radius: 8px;
    background-color: var(--n-primary);
}

.ndialogframe-child-footer-title-td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: middle;
    border-bottom-right-radius: 8px;
    background-color: var(--n-primary);
}

.ndialogframe-size-max .ndialogframe-child-footer-title-td {
    width: 100%;
}

.ndialogframe-child-footer-back-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin: 5px;
}

/* Animation d'entrée pour le dialogue */
@keyframes dialogFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ndialogframe-child-table {
    animation: dialogFadeIn 0.3s ease-out;
}

/* Style pour les boutons d'icône */
.ndialogframe-child-header-back-button img,
.ndialogframe-child-footer-back-button img {
    width: 24px;
    height: 24px;
    opacity: 0.7;
    transition: opacity 0.2s;
    filter: invert(1);
}

.ndialogframe-child-header-back-button:hover img,
.ndialogframe-child-footer-back-button:hover img {
    opacity: 1;
}

/* Style pour le texte des titres */
.ndialogframe-child-header-title,
.ndialogframe-child-footer-title {
    color: var(--n-bg);
    margin: 0;
}
/**
 * @file NAlertFrameTag.css
 *
 * @requires NDialogFrameTag.css
 * @requires NTextTag.css
 * @requires NButtonTag.css
 * @requires NTag.css
 */

/* Style pour le message */
.nalertframe-child-message {
    padding: 20px;
    margin-bottom: 20px;
    font-size: 1.1em;
    line-height: 1.5;
    text-align: center;
    color: var(--n-text);
    background-color: var(--n-bg);
    border-radius: 4px;
}

/* Zone des boutons */
.nalertframe-child-div-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    align-items: end;
    gap: 15px;
    padding: 0 20px 20px 20px;
}

/* Style commun pour les boutons */
.nalertframe-child-yes-button,
.nalertframe-child-no-button {
    padding: clamp(0.5rem, 2vw, 1rem) clamp(1rem, 2vw, 2rem);
    border-radius: 6px;
    font-weight: 500;
    font-size: clamp(0.75rem, 2vw, 1rem);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

/* Style pour le bouton Yes/Valider */
.nalertframe-child-yes-button {
    background-color: var(--n-primary);
    color: var(--n-text-inverse);
    border: none;
}

.nalertframe-child-yes-button:hover {
    background-color: var(--n-hover);
    box-shadow: 0 2px 4px var(--n-shadow);
}

.nalertframe-child-yes-button:active {
    background-color: var(--n-active);
}

/* Style pour le bouton No/Annuler */
.nalertframe-child-no-button {
    background-color: var(--n-bg-secondary);
    color: var(--n-text-muted);
    border: 1px solid var(--n-border);
}

.nalertframe-child-no-button:hover {
    background-color: var(--n-disabled);
    color: var(--n-text);
}

/* Styles pour les différents types d'alertes */
.nalertframe[data-alert-type="info"] .nalertframe-child-message {
    color: var(--n-info);
    background-color: color-mix(in srgb, var(--n-info) 10%, var(--n-bg));
    border-left: 4px solid var(--n-info);
}

.nalertframe[data-alert-type="info"] .ndialogframe-child-header-back-button-td,
.nalertframe[data-alert-type="info"] .ndialogframe-child-header-title-td ,
.nalertframe[data-alert-type="info"] .ndialogframe-child-footer-back-button-td ,
.nalertframe[data-alert-type="info"] .ndialogframe-child-footer-title-td {
    background-color: var(--n-info);
}

.nalertframe[data-alert-type="warning"] .nalertframe-child-message {
    color: var(--n-warning);
    background-color: color-mix(in srgb, var(--n-warning) 10%, var(--n-bg));
    border-left: 4px solid var(--n-warning);
}

.nalertframe[data-alert-type="warning"] .ndialogframe-child-header-back-button-td,
.nalertframe[data-alert-type="warning"] .ndialogframe-child-header-title-td ,
.nalertframe[data-alert-type="warning"] .ndialogframe-child-footer-back-button-td ,
.nalertframe[data-alert-type="warning"] .ndialogframe-child-footer-title-td {
    background-color: var(--n-warning);
}

.nalertframe[data-alert-type="error"] .nalertframe-child-message {
    color: var(--n-error);
    background-color: color-mix(in srgb, var(--n-error) 10%, var(--n-bg));
    border-left: 4px solid var(--n-error);
}

.nalertframe[data-alert-type="error"] .ndialogframe-child-header-back-button-td,
.nalertframe[data-alert-type="error"] .ndialogframe-child-header-title-td ,
.nalertframe[data-alert-type="error"] .ndialogframe-child-footer-back-button-td ,
.nalertframe[data-alert-type="error"] .ndialogframe-child-footer-title-td {
    background-color: var(--n-error);
}

.nalertframe[data-alert-type="success"] .nalertframe-child-message {
    color: var(--n-success);
    background-color: color-mix(in srgb, var(--n-success) 10%, var(--n-bg));
    border-left: 4px solid var(--n-success);
}

.nalertframe[data-alert-type="success"] .ndialogframe-child-header-back-button-td,
.nalertframe[data-alert-type="success"] .ndialogframe-child-header-title-td ,
.nalertframe[data-alert-type="success"] .ndialogframe-child-footer-back-button-td ,
.nalertframe[data-alert-type="success"] .ndialogframe-child-footer-title-td {
    background-color: var(--n-success);
}

/* Style pour les icônes dans les boutons */
.nalertframe-child-yes-button img{
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: invert(1);
}

.nalertframe-child-no-button img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: 0.8;
}

/* Animation pour le message */
@keyframes nalertframe-messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nalertframe-child-message {
    animation: nalertframe-messageSlideIn 0.3s ease-out;
}

/* Animation pour les boutons */
@keyframes nalertframe-buttonsFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nalertframe-child-div-buttons {
    animation: nalertframe-buttonsFadeIn 0.3s ease-out 0.1s backwards;
}

/* Media queries pour la responsivité */
@media (max-width: 480px) {
    .nalertframe-child-message {
        font-size: 1em;
        padding: 15px;
    }
}
/**
 * @file NChooseInputFileModeFrame.css
 *
 * @requires NDialogFrameTag.css
 * @requires NTextTag.css
 * @requires NButtonTag.css
 * @requires NTag.css
 */

 /* Grid du menu */
 .nchooseinputfilemodeframe-child-div-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 16px;
    margin: 0 auto;
}

/* Style commun pour tous les boutons */
.nchooseinputfilemodeframe-child-photo,
.nchooseinputfilemodeframe-child-gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--n-bg-secondary);
    border-radius: 16px;
    text-decoration: none;
    color: var(--n-text);
    transition: all 0.3s ease;
    border: 1px solid var(--n-border);
    min-height: 140px;
}

/* Images des boutons */
.nchooseinputfilemodeframe-child-photo.nbutton-type-text-icon-top .nbutton-child-icon,
.nchooseinputfilemodeframe-child-gallery.nbutton-type-text-icon-top .nbutton-child-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

/* Texte des boutons */
.nchooseinputfilemodeframe-child-photo.nbutton-type-text-icon-top .nbutton-child-text,
.nchooseinputfilemodeframe-child-gallery.nbutton-type-text-icon-top .nbutton-child-text {
    font-size: 90%;
    font-weight: bold;
    text-align: center;
}

/* Effets hover */
.nchooseinputfilemodeframe-child-photo:hover,
.nchooseinputfilemodeframe-child-gallery:hover {
    transform: translateY(-4px);
    background: var(--n-bg);
    box-shadow: 0 8px 24px var(--n-shadow);
    border-color: var(--n-primary);
}

/* Effet hover sur les icônes */
.nchooseinputfilemodeframe-child-photo.nbutton-type-text-icon-top:hover .nbutton-child-icon,
.nchooseinputfilemodeframe-child-gallery.nbutton-type-text-icon-top:hover .nbutton-child-icon {
    transform: scale(1.1);
    filter: brightness(0) invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
}

/* Media queries */
@media (max-width: 768px) {
    .nchooseinputfilemodeframe-child-div-buttons {
        gap: 16px;
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .nchooseinputfilemodeframe-child-photo,
    .nchooseinputfilemodeframe-child-gallery {
        padding: 16px;
        min-height: 120px;
    }

    .nchooseinputfilemodeframe-child-photo.nbutton-type-text-icon-top .nbutton-child-text,
    .nchooseinputfilemodeframe-child-gallery.nbutton-type-text-icon-top .nbutton-child-text {
        font-size: 80%;
    }

    .nchooseinputfilemodeframe-child-photo.nbutton-type-text-icon-top .nbutton-child-icon,
    .nchooseinputfilemodeframe-child-gallery.nbutton-type-text-icon-top .nbutton-child-icon {
        width: 45px;
        height: 45px;
        margin-bottom: 8px;
    }
}

/* Animation d'entrée */
@keyframes nchooseinputfilemodeframe-fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nchooseinputfilemodeframe-child-div-buttons {
    animation: nchooseinputfilemodeframe-fadeIn 0.5s ease-out;
}
/**
 * @file NPanelDefineDateTag.css
 * @description Styles pour le composant NPanelDefineDateTag - Calendrier de sélection de date
 * 
 * @requires NTheme.css
 * @requires NButtonTag.css
 * @requires NTag.css
 * 
 * @see NPanelDefineDateTag.js
 */

/* Conteneur principal */
.npaneldefinedatetag {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--n-bg);
    border-radius: 8px;
    border: 1px solid var(--n-border);
    overflow: hidden;
}

/* Conteneur interne */
.npaneldefinedatetag-child-container {
    display: flex;
    flex-direction: column;
    width: calc(100% - 32px);
    padding: 16px;
}

/* En-tête du calendrier */
.npaneldefinedatetag-child-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

/* Boutons de navigation */
.npaneldefinedatetag-child-prevbutton,
.npaneldefinedatetag-child-nextbutton {
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.npaneldefinedatetag-child-prevbutton:hover,
.npaneldefinedatetag-child-nextbutton:hover {
    background-color: var(--n-bg-secondary);
    border-radius: 4px;
}

.npaneldefinedatetag-child-prevbutton:active,
.npaneldefinedatetag-child-nextbutton:active {
    transform: scale(0.95);
}

/* Affichage de la date/mois/année */
.npaneldefinedatetag-child-datedisplay {
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: 110%;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.npaneldefinedatetag-child-datedisplay:hover {
    background-color: var(--n-bg-secondary);
}

/* Grille du calendrier */
.npaneldefinedatetag-child-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

/* En-têtes des jours de la semaine */
.npaneldefinedatetag-child-dayheader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    font-weight: 600;
    font-size: 90%;
    color: var(--n-text-muted);
    text-align: center;
}

/* Cellules de jour */
.npaneldefinedatetag-child-daycell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    min-height: 36px;
}

.npaneldefinedatetag-child-daycell-empty {
    pointer-events: none;
}

.npaneldefinedatetag-child-daycell-button {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 100%;
    transition: all 0.2s ease;
}

.npaneldefinedatetag-child-daycell-button:hover {
    background-color: var(--n-bg-secondary);
}

.npaneldefinedatetag-child-daycell-today {
    font-weight: bold;
    color: var(--n-primary);
    border: 2px solid var(--n-primary);
}

.npaneldefinedatetag-child-daycell-selected {
    background-color: var(--n-primary) !important;
    color: var(--n-bg) !important;
    font-weight: bold;
}

.npaneldefinedatetag-child-daycell-selected:hover {
    background-color: var(--n-primary);
    opacity: 0.9;
}

/* Cellules de mois */
.npaneldefinedatetag-child-monthcell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    min-height: 48px;
}

.npaneldefinedatetag-child-monthcell-button {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 100%;
    transition: all 0.2s ease;
}

.npaneldefinedatetag-child-monthcell-button:hover {
    background-color: var(--n-bg-secondary);
}

.npaneldefinedatetag-child-monthcell-today {
    font-weight: bold;
    color: var(--n-primary);
    border: 2px solid var(--n-primary);
}

/* Grille des mois */
.npaneldefinedatetag-child-monthcell {
    grid-column: span 1;
}

/* Grille des années */
.npaneldefinedatetag-child-yearcell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    min-height: 48px;
}

.npaneldefinedatetag-child-yearcell-button {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 100%;
    transition: all 0.2s ease;
}

.npaneldefinedatetag-child-yearcell-button:hover {
    background-color: var(--n-bg-secondary);
}

.npaneldefinedatetag-child-yearcell-today {
    font-weight: bold;
    color: var(--n-primary);
    border: 2px solid var(--n-primary);
}

/* Responsive */
@media (max-width: 480px) {
    .npaneldefinedatetag-child-container {
        padding: 12px;
        width: calc(100% - 24px);
    }
    
    .npaneldefinedatetag-child-grid {
        gap: 2px;
    }
    
    .npaneldefinedatetag-child-daycell,
    .npaneldefinedatetag-child-monthcell,
    .npaneldefinedatetag-child-yearcell {
        min-height: 32px;
    }
    
    .npaneldefinedatetag-child-dayheader {
        padding: 4px;
        font-size: 80%;
    }
    
    .npaneldefinedatetag-child-datedisplay {
        font-size: 100%;
        padding: 6px 12px;
    }
}

/* Support du thème sombre pour les boutons de navigation */
:where(.npaneldefinedatetag-child-prevbutton .ntheme-dark.nbutton-child-icon),
:where(.npaneldefinedatetag-child-nextbutton .ntheme-dark.nbutton-child-icon) {
    filter: invert(1);
}

/**
 * @file NPanelDefineTimeTag.css
 * @description Styles pour le composant NPanelDefineTimeTag - Sélecteur de temps
 * 
 * @requires NTheme.css
 * @requires NButtonTag.css
 * @requires NTag.css
 * 
 * @see NPanelDefineTimeTag.js
 */

/* Conteneur principal */
.npaneldefinetimetag {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--n-bg);
    border-radius: 8px;
    border: 1px solid var(--n-border);
    overflow: hidden;
}

/* Conteneur interne */
.npaneldefinetimetag-child-container {
    display: flex;
    flex-direction: column;
    width: calc(100% - 32px);
    padding: 16px;
}

/* En-tête du sélecteur */
.npaneldefinetimetag-child-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

/* Labels pour heures, minutes, secondes */
.npaneldefinetimetag-child-labels {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.npaneldefinetimetag-child-hourlabel,
.npaneldefinetimetag-child-minutelabel,
.npaneldefinetimetag-child-secondlabel {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 90%;
    transition: all 0.2s ease;
    min-width: 80px;
}

.npaneldefinetimetag-child-hourlabel:hover,
.npaneldefinetimetag-child-minutelabel:hover,
.npaneldefinetimetag-child-secondlabel:hover {
    background-color: color-mix(in srgb, var(--n-primary) 60%, transparent 40%);
    color: var(--n-text-inverse);
}

.npaneldefinetimetag-child-label-active {
    background-color: var(--n-primary);
    color: var(--n-text-inverse);
}

/* Affichage du temps sélectionné */
.npaneldefinetimetag-child-timedisplay {
    text-align: center;
    font-weight: 700;
    font-size: 140%;
    color: var(--n-text);
    letter-spacing: 2px;
    padding: 12px;
    border: 2px solid var(--n-border);
    border-radius: 8px;
    background-color: var(--n-bg-secondary);
}

/* Grille du sélecteur */
.npaneldefinetimetag-child-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    padding: 8px;
}

/* Styles pour heures */
.npaneldefinetimetag-child-hourcell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    min-height: 48px;
}

.npaneldefinetimetag-child-hourcell-button {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 2px solid var(--n-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 110%;
    font-weight: 600;
    transition: all 0.2s ease;
}

.npaneldefinetimetag-child-hourcell-button:hover {
    background-color: var(--n-bg-secondary);
    border-color: var(--n-primary);
    transform: scale(1.05);
}

.npaneldefinetimetag-child-hourcell-now {
    background-color: var(--n-bg-secondary);
    color: var(--n-primary);
    border-color: var(--n-primary);
}

.npaneldefinetimetag-child-hourcell-selected {
    background-color: var(--n-primary) !important;
    color: var(--n-bg) !important;
    border-color: var(--n-primary);
    font-weight: bold;
}

.npaneldefinetimetag-child-hourcell-selected:hover {
    background-color: var(--n-primary);
    opacity: 0.9;
    transform: scale(1.05);
}

/* Styles pour minutes */
.npaneldefinetimetag-child-minutecell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    min-height: 48px;
}

.npaneldefinetimetag-child-minutecell-button {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 2px solid var(--n-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 110%;
    font-weight: 600;
    transition: all 0.2s ease;
}

.npaneldefinetimetag-child-minutecell-button:hover {
    background-color: var(--n-bg-secondary);
    border-color: var(--n-primary);
    transform: scale(1.05);
}

.npaneldefinetimetag-child-minutecell-now {
    background-color: var(--n-bg-secondary);
    color: var(--n-primary);
    border-color: var(--n-primary);
}

.npaneldefinetimetag-child-minutecell-selected {
    background-color: var(--n-primary) !important;
    color: var(--n-bg) !important;
    border-color: var(--n-primary);
    font-weight: bold;
}

.npaneldefinetimetag-child-minutecell-selected:hover {
    background-color: var(--n-primary);
    opacity: 0.9;
    transform: scale(1.05);
}

/* Styles pour secondes */
.npaneldefinetimetag-child-secondcell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    min-height: 48px;
}

.npaneldefinetimetag-child-secondcell-button {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 2px solid var(--n-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 110%;
    font-weight: 600;
    transition: all 0.2s ease;
}

.npaneldefinetimetag-child-secondcell-button:hover {
    background-color: var(--n-bg-secondary);
    border-color: var(--n-primary);
    transform: scale(1.05);
}

.npaneldefinetimetag-child-secondcell-now {
    background-color: var(--n-bg-secondary);
    color: var(--n-primary);
    border-color: var(--n-primary);
}

.npaneldefinetimetag-child-secondcell-selected {
    background-color: var(--n-primary) !important;
    color: var(--n-bg) !important;
    border-color: var(--n-primary);
    font-weight: bold;
}

.npaneldefinetimetag-child-secondcell-selected:hover {
    background-color: var(--n-primary);
    opacity: 0.9;
    transform: scale(1.05);
}

/* Scrollbar personnalisée */
.npaneldefinetimetag-child-grid::-webkit-scrollbar {
    width: 8px;
}

.npaneldefinetimetag-child-grid::-webkit-scrollbar-track {
    background: var(--n-bg-secondary);
    border-radius: 4px;
}

.npaneldefinetimetag-child-grid::-webkit-scrollbar-thumb {
    background: var(--n-border);
    border-radius: 4px;
}

.npaneldefinetimetag-child-grid::-webkit-scrollbar-thumb:hover {
    background: var(--n-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .npaneldefinetimetag-child-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }
    
    .npaneldefinetimetag-child-hourcell,
    .npaneldefinetimetag-child-minutecell,
    .npaneldefinetimetag-child-secondcell {
        min-height: 44px;
    }
    
    .npaneldefinetimetag-child-timedisplay {
        font-size: 120%;
    }
}

@media (max-width: 480px) {
    .npaneldefinetimetag-child-container {
        padding: 12px;
        width: calc(100% - 24px);
    }
    
    .npaneldefinetimetag-child-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
        max-height: 240px;
    }
    
    .npaneldefinetimetag-child-hourcell,
    .npaneldefinetimetag-child-minutecell,
    .npaneldefinetimetag-child-secondcell {
        min-height: 40px;
    }
    
    .npaneldefinetimetag-child-hourlabel,
    .npaneldefinetimetag-child-minutelabel,
    .npaneldefinetimetag-child-secondlabel {
        padding: 6px 12px;
        font-size: 85%;
        min-width: 70px;
    }
    
    .npaneldefinetimetag-child-timedisplay {
        font-size: 110%;
        padding: 8px;
        letter-spacing: 1px;
    }
    
    .npaneldefinetimetag-child-hourcell-button,
    .npaneldefinetimetag-child-minutecell-button,
    .npaneldefinetimetag-child-secondcell-button {
        font-size: 100%;
    }
}
/**
 * @file NChooserDateTimeFrame.css
 *
 * @requires NDialogFrameTag.css
 * @requires NTextTag.css
 * @requires NButtonTag.css
 * @requires NTag.css
 * @requires NPanelDefineDateTag.css
 * @requires NPanelDefineTimeTag.css
 */

:where(.nchooserdatetimeframe) .ndialogframe-child-table {
    max-width: none;
}

/* Conteneur principal */
.nchooserdatetimeframe-child-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px;
    width: calc(100% - 32px);
}

/* Zone des panels */
.nchooserdatetimeframe-child-panels {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
}

/* Panel de date */
.nchooserdatetimeframe-child-datepanel {
    flex: 1;
    min-width: 0;
}

/* Panel de temps */
.nchooserdatetimeframe-child-timepanel {
    flex: 1;
    min-width: 0;
}

/* Zone d'actions */
.nchooserdatetimeframe-child-actions {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    width: 100%;
}

/* Bouton Définir */
.nchooserdatetimeframe-child-definebutton {
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 8px;
    background-color: var(--n-primary);
    color: var(--n-bg);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nchooserdatetimeframe-child-definebutton:hover {
    background-color: var(--n-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--n-shadow);
}

.nchooserdatetimeframe-child-definebutton:active {
    transform: translateY(0);
}

/* Bouton Annuler */
.nchooserdatetimeframe-child-cancelbutton {
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 8px;
    background-color: var(--n-bg-secondary);
    color: var(--n-text);
    border: 1px solid var(--n-border);
    cursor: pointer;
    transition: all 0.2s ease;
}

.nchooserdatetimeframe-child-cancelbutton:hover {
    background-color: var(--n-bg);
    border-color: var(--n-error);
    color: var(--n-error);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--n-shadow);
}

.nchooserdatetimeframe-child-cancelbutton:active {
    transform: translateY(0);
}

/* Media queries */
@media (max-width: 1024px) {
    .nchooserdatetimeframe-child-container {
        padding: 12px;
        width: calc(100% - 24px);
    }
    
    .nchooserdatetimeframe-child-panels {
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .nchooserdatetimeframe-child-panels {
        flex-direction: column;
        gap: 20px;
    }
    
    .nchooserdatetimeframe-child-actions {
        flex-direction: column;
        gap: 12px;
    }
    
    .nchooserdatetimeframe-child-definebutton,
    .nchooserdatetimeframe-child-cancelbutton {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .nchooserdatetimeframe-child-container {
        padding: 8px;
        width: calc(100% - 16px);
        gap: 16px;
    }
    
    .nchooserdatetimeframe-child-panels {
        gap: 16px;
    }
    
    .nchooserdatetimeframe-child-actions {
        gap: 10px;
    }
    
    .nchooserdatetimeframe-child-definebutton,
    .nchooserdatetimeframe-child-cancelbutton {
        padding: 10px 20px;
        font-size: 90%;
    }
}

/* Support du thème sombre */
:where(.nchooserdatetimeframe-child-definebutton .ntheme-dark.nbutton-child-icon),
:where(.nchooserdatetimeframe-child-cancelbutton .ntheme-dark.nbutton-child-icon) {
    filter: invert(1);
}

/**
 * @file NItemTag.css
 * @description Styles CSS pour le composant NItemTag
 * 
 * @requires NTag.css
 * 
 * @see NItemTag.js
 * 
 */
/**
 * @file NDataListItemTag.css
 * @description Styles CSS pour le composant NDataListItemTag
 * 
 * @requires NItemTag.css
 * @requires NTextTag.css
 * @requires NImageTag.css
 * 
 * @see NDataListItemTag.js
 * 
 */
/* Styles de base pour l'élément de la liste */
.ndatalistitem {
    padding: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--n-border);
    background-color: transparent;
    color: var(--n-text);
}

.ndatalistitem:last-child {
    border-bottom: none;
}

.ndatalistitem:hover {
    background-color: var(--n-bg-secondary);
}

.ndatalistitem.selected {
    background-color: var(--n-primary);
    color: var(--n-text-inverse);
}

/* Table de mise en page */
.ndatalistitem-child-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.ndatalistitem-child-tr {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Cellule pour l'image */
.ndatalistitem-child-td-image {
    width: 40px;
    flex-shrink: 0;
}

/* Style de l'image */
.ndatalistitem-child-image {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    background-color: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
}

/* Cellule pour le titre et le texte */
.ndatalistitem-child-td-title {
    flex-grow: 1;
    min-width: 0;
}

/* Style du titre */
.ndatalistitem-child-title {
    font-size: 100%; /* au lieu de 14px */
    font-weight: 500;
    color: inherit;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Style du texte */
.ndatalistitem-child-text {
    font-size: 85%; /* au lieu de 12px */
    color: var(--n-text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* États des éléments */
.ndatalistitem.disabled {
    background-color: var(--n-disabled);
    cursor: not-allowed;
    opacity: 0.7;
}

.ndatalistitem:focus {
    outline: 2px solid var(--n-primary);
    outline-offset: -2px;
}

/* Animation de sélection */
@keyframes ndatalistitem-itemSelect {
    0% {
        transform: translateX(-5px);
        opacity: 0.8;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.ndatalistitem.selected {
    animation: ndatalistitem-itemSelect 0.2s ease forwards;
}

/* Responsive design */
@media screen and (max-width: 480px) {
    .ndatalistitem-child-td-image {
        width: 32px;
    }
    
    .ndatalistitem-child-image {
        width: 32px;
        height: 32px;
    }
    
    .ndatalistitem-child-title {
        font-size: 90%; /* au lieu de 13px */
    }
    
    .ndatalistitem-child-text {
        font-size: 75%; /* au lieu de 11px */
    }
}
/**
 * @file NInputFileItemTag.css
 * @description Styles CSS pour le composant NInputFileItemTag
 * 
 * @requires NDataListItemTag.css
 * 
 * @see NInputFileItemTag.js
 * 
 */

 .ninputfileitem-child-option-bouton {
    background-color: transparent;
    border: none;
    cursor: pointer;
 }

 .ninputfileitem-child-option-bouton img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: 0.6;
 }

 .ninputfileitem-child-option-bouton:hover {
    background-color: var(--n-shadow);
 }

 .ninputfileitem-child-option-popup {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ninputfileitem-child-option-popup-button {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
}

.ninputfileitem-child-option-popup-button img {
    width: 80%;
    height: auto;
    object-fit: contain;
}

.ninputfileitem-child-option-popup-button:hover {
    background-color: var(--n-bg-secondary);
}

.ninputfileitem-child-option-popup-button:active {
    background-color: var(--n-active);
}
/**
 * @file NDataListTag.css
 * @description Styles CSS pour le composant NDataListTag
 * 
 * @requires NPopup.css
 * 
 * @see NDataListTag.js
 * 
 */
/**
 * @file NInfoTag.css
 * @description Styles pour le composant NInfoTag - Affichage d'informations titre-valeur
 * 
 * @requires NTheme.css
 * 
 * @note Trois types d'affichage disponibles :
 *  - LINE (1) : Titre et valeur sur la même ligne
 *  - LINE_DOUBLE (2) : Titre et valeur sur des lignes séparées
 *  - LINE_EQUAL (3) : Titre et valeur avec largeurs égales
 *  - Avec suffixe _auto : Changement automatique selon la taille d'écran
 */

/* Conteneur principal NInfoTag */
.ninfo {
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 2vw, 0.6rem);
    padding: clamp(0.5rem, 2vw, 0.75rem);
    border-radius: 0.25rem;
    background-color: var(--n-bg);
    border: 1px solid var(--n-border);
    font-family: inherit;
    line-height: 1.4;
}

/* Titre de l'information */
.ninfo-title {
    font-weight: 600;
    color: var(--n-text-muted);
    font-size: clamp(0.875rem, 2vw, 1rem);
    min-width: fit-content;
}

/* Valeur de l'information */
.ninfo-value {
    color: var(--n-text);
    font-size: clamp(0.875rem, 2vw, 1rem);
    word-break: break-word;
}

/* Type 1: Ligne simple (par défaut) */
.ninfo-type-1 {
    flex-direction: row;
    align-items: center;
}

.ninfo-type-1 .ninfo-title {
    color: var(--n-text-muted);
    margin-right: clamp(0.4rem, 2vw, 0.6rem);
}

.ninfo-type-1 .ninfo-value {
    flex: 1;
}

/* Type 2: Ligne double */
.ninfo-type-2 {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.2rem, 2vw, 0.3rem);
}

.ninfo-type-2 .ninfo-title {
    font-size: clamp(0.75rem, 2vw, 0.875rem);
    color: var(--n-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.ninfo-type-2 .ninfo-value {
    font-size: clamp(0.9rem, 2vw, 1.125rem);
    font-weight: 500;
    color: var(--n-text);
}

/* Type 3: Ligne avec égalité */
.ninfo-type-3 {
    flex-direction: row;
    align-items: stretch;
}

.ninfo-type-3 .ninfo-title {
    flex: 1;
    padding: clamp(0.6rem, 2vw, 0.75rem);
    border-right: 1px solid var(--n-border);
    text-align: center;
    font-weight: 600;
    color: var(--n-text-muted);
}

.ninfo-type-3 .ninfo-value {
    flex: 1;
    padding: clamp(0.6rem, 2vw, 0.75rem);
    background-color: var(--n-bg);
    text-align: center;
    font-weight: 500;
}

.ninfo-type-3_auto .ninfo-title,
.ninfo-type-3_auto .ninfo-value {
    padding: clamp(0.5rem, 2vw, 0.625rem);
}

/* Responsive design - UNIQUEMENT pour les types _auto */
@media (max-width: 768px) {
    .ninfo-type-1_auto .ninfo-title {
        margin-right: 0;
    }

    /* Type 1 auto - change en colonne sur mobile */
    .ninfo-type-1_auto {
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(0.2rem, 2vw, 0.3rem);
    }
}

@media (max-width: 480px) {
    /* Type 1 auto - reste en colonne sur très petit écran */
    .ninfo-type-1_auto {
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(0.2rem, 2vw, 0.3rem);
    }
    
    .ninfo-type-1_auto .ninfo-title {
        margin-right: 0;
    }
    
    /* Type 3 auto - peut passer en colonne sur très petit écran */
    .ninfo-type-3_auto {
        flex-direction: column;
        align-items: stretch;
    }
    
    .ninfo-type-3_auto .ninfo-title {
        border-right: none;
        border-bottom: 1px solid var(--n-border);
    }
}
/**
 * @file NPanelTag.css
 * @description Styles CSS pour le composant NPanelTag
 * 
 * @requires NTag.css
 * 
 * @see NPanelTag.js
 * 
 */
/**
 * @file NPopupTag.css
 *
 * @requires NTag.css
 */
 
 /* Styles de base pour le popup */
.npopup {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000000;
    background-color: var(--n-bg);
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--n-shadow);
    scrollbar-width: thin;
    scrollbar-color: var(--n-border) var(--n-bg);
    padding: 0;
    margin: 0;
    border: 1px solid var(--n-border);
    width: 100%;
    height: 100%;
}

/* Personnalisation de la barre de défilement */
.npopup::-webkit-scrollbar {
    width: 6px;
}

.npopup::-webkit-scrollbar-track {
    background: var(--n-bg);
    border-radius: 3px;
}

.npopup::-webkit-scrollbar-thumb {
    background: var(--n-border);
    border-radius: 3px;
}

.npopup::-webkit-scrollbar-thumb:hover {
    background: var(--n-border);
}

/* Animation d'apparition */
.npopup {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.npopup.visible {
    opacity: 1;
    transform: translateY(0);
}
/**
 * @file NEditTag.css
 *
 * @requires NTag.css
 */
/**
 * @file NCheckTag.css
 *
 * @requires NEditTag.css
 */

/**
 * @file NButtonCheckTag.css
 * @description Styles CSS pour le composant NButtonCheckTag
 * 
 * Ce fichier contient les styles de base et les variantes pour le composant bouton personnalisé.
 * Il définit les styles pour les différents états du bouton (normal, hover, active, etc.)
 * ainsi que les styles spécifiques aux différents types de boutons (texte, case à cocher, combinaisons).
 * 
 * Les styles utilisent des variables CSS personnalisées pour une meilleure maintenabilité et
 * cohérence avec le thème global de l'application.
 *
 * @requires NTag.css
 * @requires NTextTag.css
 * @requires NCheckTag.css
 * 
 * @see NButtonCheckTag.js
 * 
 * @example
 * // Utilisation des classes CSS
 * <button class="nbuttoncheck-style-radius nbuttoncheck-type-check-left">
 *   <input type="checkbox" class="nbuttoncheck-child-check">
 *   <label class="nbuttoncheck-child-text">Texte</label>
 * </button>
 * 
 * @note Les variables CSS utilisées sont définies dans le thème global
 * @note Les transitions sont configurées pour une expérience utilisateur fluide
 */

 /* style radius */
 .nbuttoncheckcheck-style-radius{
    border-radius: 5px;
    background-color: var(--n-primary);
    color: var(--n-text);
    font-size: 100%;
    padding: 5px;
    border: 1px solid var(--n-border);
    
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.nbuttoncheck-style-radius:hover {
    background-color: var(--n-hover);
    box-shadow: 0 3px 6px var(--n-shadow);
    transform: translateY(-1px);
}

.nbuttoncheck-style-radius:active {
    background-color: var(--n-active);
    box-shadow: inset 0 2px 4px var(--n-shadow);
    transform: translateY(0);
}

.nbuttoncheck-style-radius:focus {
    outline: 2px solid var(--n-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(var(--n-accent), 0.25);
}

.nbuttoncheck-style-radius:disabled {
    background-color: var(--n-disabled);
    color: var(--n-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 0.3s ease, background-color 0s, box-shadow 0s;
}

:where(.nbuttoncheck-style-radius.nbuttoncheck-type-check-left) .nbuttoncheck-child-check {
    order: 1;
    width: 25px;
    height: 25px;
}

:where(.nbuttoncheck-style-radius.nbuttoncheck-type-check-left) .nbuttoncheck-child-text {
    order: 2;
}

:where(.nbuttoncheck-style-radius.nbuttoncheck-type-check-right) .nbuttoncheck-child-check {
    width: 25px;
    height: 25px;
}

:where(.nbuttoncheck-style-radius.nbuttoncheck-type-check-right) .nbuttoncheck-child-text {
    order: 1;
}

:where(.nbuttoncheck-style-radius.nbuttoncheck-type-check-top) .nbuttoncheck-child-check {
    width: 25px;
    height: 25px;
}

:where(.nbuttoncheck-style-radius.nbuttoncheck-type-check-top) .nbuttoncheck-child-text {
    order: 2;
}

:where(.nbuttoncheck-style-radius.nbuttoncheck-type-check-bottom) .nbuttoncheck-child-check {
    width: 25px;
    height: 25px;
}

:where(.nbuttoncheck-style-radius.nbuttoncheck-type-check-bottom) .nbuttoncheck-child-text {
    order: 1;
}

/* style none */
.nbuttoncheck-style-none{
    border: none;
    outline: none;
}

.nbuttoncheck-style-none:hover {
    border: none;
}

.nbuttoncheck-style-none:active {
    border: none;
}

.nbuttoncheck-style-none:focus {
    outline: none;
    border: none;
}

.nbuttoncheck-style-none:disabled {
    border: none;
}

:where(.nbuttoncheck-style-none.nbuttoncheck-type-check-left) .nbuttoncheck-child-check {
    order: 1;
}

:where(.nbuttoncheck-style-none.nbuttoncheck-type-check-left) .nbuttoncheck-child-text {
    order: 2;
}

:where(.nbuttoncheck-style-none.nbuttoncheck-type-check-right) .nbuttoncheck-child-text {
    order: 1;
}


:where(.nbuttoncheck-style-none.nbuttoncheck-type-check-top) .nbuttoncheck-child-text {
    order: 2;
}

:where(.nbuttoncheck-style-none.nbuttoncheck-type-check-bottom) .nbuttoncheck-child-text {
    order: 1;
}
/**
 * @file NRadioTag.css
 *
 * @requires NEditTag.css
 */
/**
 * @file NSliderTag.css
 *
 * @requires NEditTag.css
 */
/**
 * @file NSpinnerTag.css
 *
 * @requires NTag.css
 */
/**
 * @file NVideoTag.css
 *
 * @requires NTag.css
 */
/**
 * @file NInputUnitTag.css
 * @description Styles CSS pour le composant NInputUnitTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputUnitTag.js
 * 
 */

/* Style de base du bouton d'unité */
.ninputunit-child-unitbutton {
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding: 0;
    padding-right: 8px;
    white-space: nowrap;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style au survol */
.ninputunit-child-unitbutton:hover {
    background-color: transparent;
    box-shadow: none;
    transform: none;
}

/* Style au focus */
.ninputunit-child-unitbutton:focus {
    outline: none;
    box-shadow: none;
    border-radius: 4px;
}

/* Style au clic */
.ninputunit-child-unitbutton:active {
    transform: scale(0.98);
}

/* État désactivé */
:where(.ninputunit.disabled .ninputunit-child-unitbutton) {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Séparateur visuel */
.ninputunit-child-unitbutton::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 60%;
    background-color: var(--n-border);
    margin-right: 8px;
    vertical-align: middle;
}
/**
 * @file NInputAmountTag.css
 * @description Styles CSS pour le composant NInputAmountTag
 * 
 * @requires NInputUnitTag.css
 * 
 * @see NInputAmountTag.js
 * 
 */
 
 .ninputamount .ninputelement-child-input{
    font-family: 
        'SF Mono', 
        'Menlo', 
        'Monaco', 
        'Consolas', 
        'Liberation Mono', 
        'Courier New', 
        monospace;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
/**
 * @file NInputAreaTag.css
 * @description Styles CSS pour le composant NInputAreaTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputAreaTag.js
 * 
 */
 :where(.ninputarea) .ninputelement-child-input{
    resize: vertical;
    min-height: 120px;
    height: auto;
 }
/**
 * @file NInputElementTag.css
 * @description Styles CSS pour le composant NInputElementTag
 * 
 * @requires NTag.css
 * @requires NTextTag.css
 * @requires NButtonTag.css
 * @requires NEditTag.css
 * @requires NImageTag.css
 * 
 * @see NInputElementTag.js
 * 
 */
/* Conteneur principal */
.ninputelement {
    --n-input-height: 25;
    text-align: left;
}

/* Conteneur des éléments */
.ninputelement-child-container {
    position: relative;
    width: 100%;
}

/* Style du contenu */
.ninputelement-child-stylecontainer {
    border: 1px solid var(--n-border);
    border-radius: 4px;
    background-color: var(--n-bg);
    transition: all 0.2s ease;
}

/* États de l'input */
.ninputelement-inputstate-0 { /* NORMAL */
    border-color: var(--n-border);
}

.ninputelement-inputstate-1 { /* FOCUS */
    border-color: var(--n-primary);
    box-shadow: 0 0 0 2px var(--n-primary);
}

.ninputelement-inputstate-2 { /* ERROR */
    border-color: var(--n-error);
}

.ninputelement-inputstate-3 { /* OK */
    border-color: var(--n-success);
}

/* Table d'en-tête */
.ninputelement-child-tableheader {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

/* Table d'input */
.ninputelement-child-tableinput {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.ninputelement-child-tableinput td {
    height: 100%;
    vertical-align: middle;
}

/* Texte d'affichage */
.ninputelement-child-textdisplay-td {
    width: 100%;
    text-align: left;
}

.ninputelement-child-textdisplay {
    font-size: 90%;
    color: var(--n-text);
    font-weight: 500;
    text-align: left;
}

/* Indicateur requis */
.ninputelement-child-required-td {
    white-space: nowrap;
    vertical-align: bottom;
}

.ninputelement-child-required {
    color: var(--n-error);
    font-weight: bold;
}

/* Bouton d'information */
.ninputelement-child-infos-td {
    white-space: nowrap;
    vertical-align: bottom;
}

.ninputelement-child-infos {
    color: var(--n-text);
}

/* Icône */
.ninputelement-child-icon-td{
    white-space: nowrap;
}

.ninputelement-child-icon {
    height: 100%;
    width: calc(var(--n-input-height) * 1px);
    object-fit: contain;
}

.ninputelement-child-input-td {
    width: 100%;
}

.ninputelement-child-input{
    width: calc(100% - 1rem);
    height: calc(var(--n-input-height) * 1px);
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0.5rem;
    font-size: 100%;
    color: var(--n-text);
    font-family: inherit;
    font-size: 100%;
}

.ninputelement-child-input:focus{
    outline: none;
}

/* Bouton d'input */
.ninputelement-child-inputbutton {
    height: 100%;
}

.ninputelement-child-deletebutton{
    background: transparent;
    border-radius: 1000px;
    border: none;
}

:where(.ninputelement-child-deletebutton) .nbutton-child-icon {
    width: 15px;
    height: 15px;
}

.ninputelement-child-deletebutton:hover {
    background-color: var(--n-bg-secondary);
}

.ninputelement-child-deletebutton:active {
    transform: scale(0.95);
}

:where(.ninputelement-child-deletebutton .ntheme-dark.nbutton-child-icon) {
    filter: invert(1);
}

/* Contenu de pied de page */

/* Exemple */
.ninputelement-child-example {
    display: block;
    font-size: 80%;
    color: var(--n-text-muted);
    font-style: italic;
    margin-top: 5px;
}

/* Message d'erreur */
.ninputelement-child-error {
    display: block;
    font-size: 80%;
    color: var(--n-error);
    margin-top: 5px;
}

@media (max-width: 768px) {
    .ninputelement-child-input{
        font-size: 90%;
    }

    .ninputelement-child-textdisplay{
        font-size: 90%;
    }

    .ninputelement-child-example{
        font-size: 80%;
    }

    .ninputelement-child-error{
        font-size: 80%;
    }
}

@media (max-width: 480px) {
    .ninputelement-child-input{
        font-size: 87%;
    }

    .ninputelement-child-textdisplay{
        font-size: 87%;
    }

    .ninputelement-child-example{
        font-size: 80%;
    }

    .ninputelement-child-error{
        font-size: 80%;
    }
}
/**
 * @file NInputCheckTag.css
 * 
 * @requires NInputELementTag.css
 * 
 * @see NInputCheckTag.js
 * 
 */

.ninputcheck-child-checkscontainer{
    text-align: right;
    border: 1px solid var(--n-border);
    border-radius: 4px;
    background-color: var(--n-bg);
}

.ninputcheck-child-checkallbutton {
    background-color: transparent;
    border: none;
}

.ninputcheck-child-checkspanel{
    text-align: left;
}
/**
 * @file NInputDatetimeTag.css
 * @description Styles CSS pour le composant NInputDatetimeTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputDatetimeTag.js
 * 
 */


/* Cacher l'icône calendrier native du navigateur */
:where(.ninputdatetime) .ninputelement-child-input::-webkit-calendar-picker-indicator {
    display: none !important;
    -webkit-appearance: none;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

:where(.ninputdatetime) .ninputelement-child-input::-webkit-inner-spin-button {
    display: none;
    -webkit-appearance: none;
}

/* Firefox */
:where(.ninputdatetime) .ninputelement-child-input::-moz-calendar-picker-indicator {
    display: none !important;
}

/* Style de base du bouton calendrier */
.ninputdatetime-child-calendarbutton {
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Style au survol */
.ninputdatetime-child-calendarbutton:hover {
    background-color: var(--n-bg-secondary);
}

/* Style au focus */
.ninputdatetime-child-calendarbutton:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--n-primary);
    border-radius: 4px;
}

/* Style au clic */
.ninputdatetime-child-calendarbutton:active {
    transform: scale(0.95);
}

/* État désactivé */
:where(.ninputdatetime.disabled .ninputdatetime-child-calendarbutton) {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Icône pour le thème sombre */
:where(.ninputdatetime-child-calendarbutton .ntheme-dark.nbutton-child-icon) {
    filter: invert(1);
}
/**
 * @file NInputFilesTag.css
 * @description Styles CSS pour le composant NInputFilesTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputFilesTag.js
 * 
 */
.ninputfiles-child-filescontainer {
    border: 1px solid var(--n-border);
    border-top: none;
    border-radius: 0 0 4px 4px;
    background-color: var(--n-bg);
}

.ninputfiles-child-chooserbutton-parent{
    text-align: right;
}

/**
 * @file NInputImageTag.css
 * @description Styles CSS pour le composant NInputImageTag
 * 
 * @requires NInputFilesTag.css
 * 
 * @see NInputImageTag.js
 * 
 */

/* Conteneur principal */
.ninputimage {
    --n-image-height: 200;
    --n-image-width: 200;
}

/* Conteneur de l'image */
.ninputimage-child-imagecontainer {
    position: relative;
    width: calc(var(--n-image-width) * 1px);
    height: calc(var(--n-image-height) * 1px);
    border-radius: 8px;
    border: 2px dashed var(--n-border);
    background-color: var(--n-bg-secondary);
    overflow: hidden;
    transition: all 0.3s ease;
}

.ninputimage-child-imagecontainer:hover {
    border-color: var(--n-primary);
}

/* Style de l'image */
.ninputimage-child-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Texte d'indication (hint) */
.ninputimage-child-imagehint {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    padding: 1rem;
    
    /* Centrage avec Flexbox */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* Autres styles */
    color: var(--n-text-muted);
    font-size: 90%;
    cursor: pointer;
    text-align: center;
}

/* Bouton d'options */
.ninputimage-child-optionbutton {
    position: absolute;
    bottom: 0.8rem;
    right: 0.8rem;
    background-color: rgba(255,255,255,0.2);
    border: 1px solid var(--n-border);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ninputimage-child-optionbutton:hover {
    background-color: var(--n-primary);
    border-color: var(--n-primary);
}

.ninputimage-child-optionbutton:hover img {
    filter: brightness(0) invert(1);
}

.ninputimage-child-popupoptions-button {
    display: block;
    width: 100%;
    font-size: clamp(0.875rem, 1.25vw, 0.9rem);
    background: transparent;
    border: none;
    cursor: pointer;
}

.ninputimage-child-popupoptions-button:hover {
    background-color: var(--n-bg-secondary);
}

.ninputimage-child-popupoptions-button:active {
    background-color: var(--n-active);
}

/* Responsive design */
@media screen and (max-width: 480px) {
    .ninputimage-child-imagehint {
        font-size: 80%;
    }
}
/**
 * @file NInputPasswordTag.css
 * @description Styles CSS pour le composant NInputPasswordTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputPasswordTag.js
 * 
 */

 /* Style de base du bouton flèche */
.ninputpassword-child-eyebutton {
   border: none;
   background-color: transparent;
   cursor: pointer;
   transition: transform 0.2s ease;
}

/* Style au survol */
.ninputpassword-child-eyebutton:hover {
   background-color: var(--n-bg-secondary);
}

/* Style au focus */
.ninputpassword-child-eyebutton:focus {
   outline: none;
   border: none;
}

/* Style au clic */
.ninputpassword-child-eyebutton:active {
   transform: scale(0.95);
}

/* État désactivé */
:where(.ninputsearch.disabled .ninputpassword-child-eyebutton) {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
}

:where(.ninputpassword-child-eyebutton .ntheme-dark.nbutton-child-icon) {
   filter: invert(1);
}

.ninputpassword-password-strength {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   padding: 0.5rem 0.75rem;
   background: color-mix(in srgb, var(--n-bg-secondary) 30%, transparent);
   border-radius: 8px;
   border: 1px solid color-mix(in srgb, var(--n-border) 20%, transparent);
}

.ninputpassword-strength-bar {
   flex: 1;
   height: 0.5rem;
   border-radius: 6px;
   background: color-mix(in srgb, var(--n-bg) 60%, transparent);
   position: relative;
   overflow: hidden;
}

.ninputpassword-strength-bar::before {
   content: '';
   display: block;
   height: 100%;
   border-radius: 6px;
   position: absolute;
   left: 0; top: 0;
   width: 0%;
   background: var(--n-border);
   transition: width 0.3s, background 0.3s;
}

.ninputpassword-strength-weak::before {
   width: 25%;
   background: var(--n-error);
}
 
.ninputpassword-strength-medium::before {
   width: 50%;
   background: var(--n-warning);
}

.ninputpassword-strength-strong::before {
   width: 75%;
   background: var(--n-info);
}

.ninputpassword-strength-verystrong::before {
   width: 100%;
   background: var(--n-success);
}

.ninputpassword-strength-text {
   min-width: 70px;
   font-size: 0.875rem;
   font-weight: 600;
   text-align: left;
   color: var(--n-text);
   letter-spacing: 0.01em;
}
/**
 * @file NInputPhoneTag.css
 * @description Styles CSS pour le composant NInputPhoneTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputPhoneTag.js
 * 
 */

/* Style de base du bouton de code de téléphone */
.ninputphone-child-codephonebutton {
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding: 0;
    padding-left: 8px;
    white-space: nowrap;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style au survol */
.ninputphone-child-codephonebutton:hover {
    background-color: transparent;
    box-shadow: none;
    transform: none;
}

/* Style au focus */
.ninputphone-child-codephonebutton:focus {
    outline: none;
    box-shadow: none;
    border-radius: 4px;
}

/* Style au clic */
.ninputphone-child-codephonebutton:active {
    transform: scale(0.98);
}

/* État désactivé */
:where(.ninputphone.disabled .ninputphone-child-codephonebutton) {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Séparateur visuel */
.ninputphone-child-codephonebutton::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 60%;
    background-color: var(--n-border);
    margin-left: 8px;
    vertical-align: middle;
}


/**
 * @file NInputRadioTag.css
 * 
 * @requires NInputELementTag.css
 * 
 * @see NInputRadioTag.js
 * 
 */

 .ninputradio-child-radioscontainer{
    text-align: right;
    border: 1px solid var(--n-border);
    border-radius: 4px;
    background-color: var(--n-bg);
}

.ninputradio-child-radiospanel{
    text-align: left;
}
/**
 * @file NInputSearchTag.css
 * @description Styles CSS pour le composant NInputSearchTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputSearchTag.js
 * 
 */

 /* Style de base du bouton flèche */
.ninputsearch-child-searchbutton {
   border: none;
   background-color: transparent;
   cursor: pointer;
   transition: transform 0.2s ease;
}

/* Style au survol */
.ninputsearch-child-searchbutton:hover {
   background-color: var(--n-bg-secondary);
}

/* Style au focus */
.ninputsearch-child-searchbutton:focus {
   outline: none;
   border: none;
}

/* Style au clic */
.ninputsearch-child-searchbutton:active {
   transform: scale(0.95);
}

/* État désactivé */
:where(.ninputsearch.disabled .ninputsearch-child-searchbutton) {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
}

:where(.ninputsearch-child-searchbutton .ntheme-dark.nbutton-child-icon) {
   filter: invert(1);
}

/**
 * @file NInputSelectTag.css
 * @description Styles CSS pour le composant NInputSelectTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputSelectTag.js
 * 
 */

 .ninputelement-child-input:read-only{
    cursor: pointer;
 }

 /* Style de base du bouton flèche */
.ninputselect-child-arrowbutton {
   border: none;
   background-color: transparent;
   cursor: pointer;
   transition: transform 0.2s ease;
}

/* Rotation de la flèche quand la liste est ouverte */
.ninputselect-child-arrowbutton.active {
   transform: rotate(180deg);
}

/* Style au survol */
.ninputselect-child-arrowbutton:hover {
   background-color: var(--n-bg-secondary);
}

/* Style au focus */
.ninputselect-child-arrowbutton:focus {
   outline: none;
   box-shadow: 0 0 0 2px var(--n-primary);
   border-radius: 4px;
}

/* Style au clic */
.ninputselect-child-arrowbutton:active {
   transform: scale(0.95);
}

/* État désactivé */
:where(.ninputselect.disabled .ninputselect-child-arrowbutton) {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
}

:where(.ninputselect-child-arrowbutton .ntheme-dark.nbutton-child-icon) {
   filter: invert(1);
}

/**
 * @file NInputTextTag.css
 * @description Styles CSS pour le composant NInputTextTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputTextTag.js
 * 
 */
/**
 * @file NInputVideoTag.css
 * @description Styles CSS pour le composant NInputVideoTag
 * 
 * @requires NInputFilesTag.css
 * 
 * @see NInputVideoTag.js
 * 
 */

/* Conteneur principal */
.ninputvideo {
    --n-video-height: 200;
    --n-video-width: 200;
}

/* Conteneur de video */
.ninputvideo-child-videocontainer {
    position: relative;
    width: calc(var(--n-video-width) * 1px);
    height: calc(var(--n-video-height) * 1px);
    border-radius: 8px;
    border: 2px dashed var(--n-border);
    background-color: var(--n-bg-secondary);
    overflow: hidden;
    transition: all 0.3s ease;
}

.ninputvideo-child-videocontainer:hover {
    border-color: var(--n-primary);
}

/* Style de video */
.ninputvideo-child-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Texte d'indication (hint) */
.ninputvideo-child-videohint {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    padding: 1rem;
    
    /* Centrage avec Flexbox */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* Autres styles */
    color: var(--n-text-muted);
    font-size: 90%;
    cursor: pointer;
    text-align: center;
}

/* Bouton d'options */
.ninputvideo-child-optionbutton {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    background-color: rgba(255,255,255,0.2);
    border: 1px solid var(--n-border);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ninputvideo-child-optionbutton:hover {
    background-color: var(--n-primary);
    border-color: var(--n-primary);
}

.ninputvideo-child-optionbutton:hover img {
    filter: brightness(0) invert(1);
}

.ninputvideo-child-popupoptions-button {
    display: block;
    width: 100%;
    font-size: clamp(0.875rem, 1.25vw, 0.9rem);
    background: transparent;
    border: none;
    cursor: pointer;
}

.ninputvideo-child-popupoptions-button:hover {
    background-color: var(--n-bg-secondary);
}

.ninputvideo-child-popupoptions-button:active {
    background-color: var(--n-active);
}

/* Responsive design */
@media screen and (max-width: 480px) {
    .ninputvideo-child-videohint {
        font-size: 80%;
    }
}
/**
 * @file NAdminMain.css
 *
 * @requires NMainTag.css
 */

html{
    background-color: rgb(223,223,223);
    background-repeat: repeat;
    background-size: 400px 254px;
    background-attachment: fixed;
}

.nadminmain.ntheme-dark {
    background-color: var(--n-bg);
}
/**
 * @file NAdminCheckItemPermissionCatalog.css
 *
 * @requires NCheckItemTag.css
 */

.nadmincheckitempermissioncatalog-div {
    padding: 18px 10px 10px 10px;
    border: 1px solid var(--n-border);
    border-radius: 7px;
    background: var(--n-bg-secondary);
    margin-top: 8px;
    box-shadow: 0 2px 8px var(--n-shadow);
}

.nadmincheckitempermissioncatalog-div-table {
    width: calc(100% - 23px);
    margin: auto;
    margin-bottom: 12px;
    padding-left: 3px;
    overflow-x: auto;
    white-space: nowrap;
}

.nadmincheckitempermissioncatalog-check {
    min-width: 80px;
    margin-right: 10px;
    font-size: 15px;
    cursor: pointer;
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: 4px;
    padding: 4px 8px;
    transition: background 0.13s;
    white-space: nowrap;
    display: inline-block;
}
.nadmincheckitempermissioncatalog-check:hover {
    background: var(--n-hover);
    color: var(--n-text-inverse);
}
.nadmincheckitempermissioncatalog-check:active {
    background: var(--n-active);
    color: var(--n-text-inverse);
}

.nadmincheckitempermissioncatalog-div-row {
    margin-top: 10px;
}

.nadmincheckitempermissioncatalog-row {
    width: calc(100% - 38px);
    background-color: var(--n-bg);
    border-radius: 6px;
    border: 1px solid var(--n-border);
    margin: auto;
    margin-bottom: 7px;
    padding: 6px 8px;
    overflow-x: auto;
    white-space: nowrap;
}

.nadmincheckitempermissioncatalog-row-label {
    color: var(--n-text);
    font-weight: 600;
    font-size: 15px;
    margin-right: 12px;
    min-width: 60px;
    white-space: nowrap;
    display: inline-block;
}

.nadmincheckitempermissioncatalog-add-row-button {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    font-size: 14px;
    color: var(--n-primary);
    border: 1px solid var(--n-border);
    border-radius: 6px;
    background: var(--n-bg);
    margin-top: 10px;
    cursor: pointer;
    transition: background 0.1s;
    text-decoration: none;
}
.nadmincheckitempermissioncatalog-add-row-button:hover {
    background: var(--n-hover);
    color: var(--n-text-inverse);
}
.nadmincheckitempermissioncatalog-add-row-button:hover img,
.nadmincheckitempermissioncatalog-delete img {
    filter: invert(1);
}

.nadmincheckitempermissioncatalog-delete {
    display: inline-block;
}
/**
 * @file NAdminAccesFrame.css
 *
 * @requires NFrameTag.css
 */
 .nadminaccesframe {
    width: 100%;
    min-height: calc(100vh - 60px);
    padding-top: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nadminaccesframe-child-table{
    width: 100%;
    height: 100%;
}

@keyframes nadminaccesframe-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.nadminaccesframe-child-td{
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

/* Wrapper intérieur */
.nadminaccesframe-child-innerwrapper {
    max-width: 400px;
    margin: 0 auto;
    padding: 48px 24px;
}

/* En-tête et logo */
.nadminaccesframe-child-headerwrapper {
    text-align: center;
    margin-bottom: 40px;
    animation: nadminaccesframe-slideDown 0.8s ease-out;
    box-shadow: 0 2px 20px var(--n-shadow);
    border-radius: 16px;
    background-color: var(--n-bg);
    padding: 14px;
}

.nadminaccesframe-child-logo {
    width: 120px;
    height: auto;
    margin-bottom: 16px;
    transition: transform 0.3s ease;
}

.nadminaccesframe-child-logo:hover {
    transform: scale(1.05);
}

.nadminaccesframe-child-title {
    font-size: 2em;
    color: var(--n-text);
    font-weight: 700;
    margin: 0;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px var(--n-shadow);
}

/* Formulaire */
.nadminaccesframe-child-formwrapper {
    background-color: var(--n-bg);
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 8px 32px var(--n-shadow);
    animation: nadminaccesframe-fadeIn 1s ease-out;
    border: 1px solid var(--n-border);
}

/* Champs de saisie */
.nadminaccesframe-child-input {
    width: 100%;
    margin-bottom: 24px;
}

.nadminaccesframe-child-input-password{
    margin-bottom: 0px;
}

/* ===== OPTIONS ROW FORGOT ===== */
.nadminaccesframe-options-row {
    text-align: right;
    margin-bottom: 30px;
}

/* Lien mot de passe oublié */
.nadminaccesframe-forgot-link {
    font-size: clamp(0.8rem, 1.5vw, 0.875rem);
    color: var(--n-primary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.nadminaccesframe-forgot-link:hover {
    color: var(--n-hover);
    text-decoration: underline;
}

/* Bouton de connexion */
.nadminaccesframe-child-loginbutton {
    width: 100%;
    padding: 14px;
    background-color: var(--n-primary);
    color: var(--n-text-inverse);
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nadminaccesframe-child-loginbutton::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: 0.5s;
}

.nadminaccesframe-child-loginbutton:hover::before {
    left: 100%;
}

.nadminaccesframe-child-loginbutton:hover {
    background-color: var(--n-hover);
    transform: translateY(-1px);
}

/* Animations */
@keyframes nadminaccesframe-slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes nadminaccesframe-fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Media queries */
@media (max-width: 480px) {
    .nadminaccesframe-child-innerwrapper {
        padding: 24px 16px;
    }

    .nadminaccesframe-child-formwrapper {
        padding: 24px;
    }

    .nadminaccesframe-child-title {
        font-size: 1.5em;
    }
}
/**
 * @file NAdminConnexionFrame.css
 *
 * @requires NFrameTag.css
 */
.nadminconnexionframe {
    width: 100%;
    min-height: calc(100vh - 60px);
    padding-top: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nadminconnexionframe-child-table{
    width: 100%;
    height: 100%;
}

@keyframes nadminconnexionframe-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.nadminconnexionframe-child-td{
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

/* Wrapper intérieur */
.nadminconnexionframe-child-innerwrapper {
    max-width: 400px;
    margin: 0 auto;
    padding: 48px 24px;
}

/* En-tête et logo */
.nadminconnexionframe-child-headerwrapper {
    text-align: center;
    margin-bottom: 40px;
    animation: nadminconnexionframe-slideDown 0.8s ease-out;
    box-shadow: 0 2px 20px var(--n-shadow);
    border-radius: 16px;
    background-color: var(--n-bg);
    padding: 14px;
}

.nadminconnexionframe-child-logo {
    width: 120px;
    height: auto;
    margin-bottom: 16px;
    transition: transform 0.3s ease;
}

.nadminconnexionframe-child-logo:hover {
    transform: scale(1.05);
}

.nadminconnexionframe-child-title {
    font-size: 2em;
    color: var(--n-text);
    font-weight: 700;
    margin: 0;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px var(--n-shadow);
}

/* Formulaire */
.nadminconnexionframe-child-formwrapper {
    background-color: var(--n-bg);
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 8px 32px var(--n-shadow);
    animation: nadminconnexionframe-fadeIn 1s ease-out;
    border: 1px solid var(--n-border);
}

/* Champs de saisie */
.nadminconnexionframe-child-input {
    width: 100%;
    margin-bottom: 24px;
}

.nadminconnexionframe-child-input-password{
    margin-bottom: 0px;
}

/* ===== OPTIONS ROW FORGOT ===== */
.nadminconnexionframe-options-row {
    text-align: right;
    margin-bottom: 30px;
}

/* Lien mot de passe oublié */
.nadminconnexionframe-forgot-link {
    font-size: clamp(0.8rem, 1.5vw, 0.875rem);
    color: var(--n-primary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.nadminconnexionframe-forgot-link:hover {
    color: var(--n-hover);
    text-decoration: underline;
}

/* Bouton de connexion */
.nadminconnexionframe-child-loginbutton {
    width: 100%;
    padding: 14px;
    background-color: var(--n-primary);
    color: var(--n-text-inverse);
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nadminconnexionframe-child-loginbutton::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: 0.5s;
}

.nadminconnexionframe-child-loginbutton:hover::before {
    left: 100%;
}

.nadminconnexionframe-child-loginbutton:hover {
    background-color: var(--n-hover);
    transform: translateY(-1px);
}

/* Animations */
@keyframes nadminconnexionframe-slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes nadminconnexionframe-fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Media queries */
@media (max-width: 480px) {
    .nadminconnexionframe-child-innerwrapper {
        padding: 24px 16px;
    }

    .nadminconnexionframe-child-formwrapper {
        padding: 24px;
    }

    .nadminconnexionframe-child-title {
        font-size: 1.5em;
    }
}
/**
 * @file NAdminSearchUserFrame.css
 *
 * @requires NFrameTag.css
 */

.nadminsearchuserframe {
  width: 100%;
  min-height: calc(100vh - 60px);
  padding-top: 60px;
}

.nadminsearchuserframe-container {
  max-width: clamp(800px, 90%, 1400px);
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Container du titre et description */
.nadminsearchuserframe-child-titlecontainer {
  text-align: center;
  animation: nadminsearchuserframe-slideDown 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes nadminsearchuserframe-slideDown {
  from { 
    opacity: 0; 
    transform: translateY(-20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@media (prefers-reduced-motion: reduce) {
  .nadminsearchuserframe-child-titlecontainer {
    animation: none;
  }
  .nadminsearchuserframe-child-form {
    animation: none;
  }
}

.nadminsearchuserframe-title {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--n-primary);
  margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
}

.nadminsearchuserframe-description {
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  color: var(--n-text-muted);
  max-width: clamp(400px, 80%, 600px);
  margin: 0 auto;
  line-height: 1.6;
}

/* Formulaire de recherche */
.nadminsearchuserframe-child-form {
  background: var(--n-bg-secondary);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--n-border);
  border-radius: clamp(0.75rem, 1.5vw, 1.25rem);
  padding: clamp(1rem, 2.5vw, 1.75rem);
  box-shadow: 0 4px 16px 0 var(--n-shadow);
  display: flex;
  gap: clamp(0.75rem, 2vw, 1rem);
  align-items: bottom;
  animation: nadminsearchuserframe-slideUp 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  flex-direction: column;
  max-width: 400px;
  width: calc(100% - (clamp(1rem, 2.5vw, 1.75rem)*4));
  margin: auto;
}

@keyframes nadminsearchuserframe-slideUp {
  from { 
    opacity: 0; 
    transform: translateY(30px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

.nadminsearchuserframe-child-input {
  flex: 1;
  min-width: 0;
}

.nadminsearchuserframe-child-searchbutton {
  padding: clamp(0.9rem, 2vw, 1.1rem) clamp(1.5rem, 3vw, 2rem);
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-weight: 600;
  border-radius: clamp(0.5rem, 1vw, 0.75rem);
  background: var(--n-primary);
  color: var(--n-text-inverse);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px 0 color-mix(in srgb, var(--n-shadow) 10%, transparent);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.nadminsearchuserframe-child-searchbutton:hover,
.nadminsearchuserframe-child-searchbutton:focus-visible {
  background: color-mix(in srgb, var(--n-primary) 90%, var(--n-bg-secondary) 10%);
  box-shadow: 0 4px 16px 0 color-mix(in srgb, var(--n-primary) 20%, transparent);
  transform: translateY(-2px);
  outline: none;
}

.nadminsearchuserframe-child-searchbutton:active {
  background: color-mix(in srgb, var(--n-primary) 80%, var(--n-bg-secondary) 20%);
  transform: scale(0.98);
}

/* Description des résultats */
.nadminsearchuserframe-child-descriptionresults {
  font-size: clamp(0.9rem, 2vw, 1rem);
  color: var(--n-text-muted);
  font-weight: 500;
  padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.75rem, 2vw, 1rem);
  background: color-mix(in srgb, var(--n-info) 10%, transparent);
  border-left: 3px solid var(--n-info);
  border-radius: clamp(0.3rem, 0.8vw, 0.5rem);
}

/* Panel de résultats */
.nadminsearchuserframe-child-resultspanel {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2vw, 1rem);
  animation: nadminsearchuserframe-fadeIn 0.5s ease;
}

@keyframes nadminsearchuserframe-fadeIn {
  from { 
    opacity: 0; 
  }
  to { 
    opacity: 1; 
  }
}

/* Media queries pour changements structurels */
@media (max-width: 768px) {
  .nadminsearchuserframe-child-searchbutton {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .nadminsearchuserframe-container {
    gap: clamp(1rem, 3vw, 1.5rem);
  }
}

/* Mode sombre */
.nadminsearchuserframe-child-form.ntheme-dark {
  background: color-mix(in srgb, var(--n-bg) 60%, transparent);
  border-color: color-mix(in srgb, var(--n-border) 50%, transparent);
}

/**
 * @file NAdminSearchUserItem.css
 *
 * @requires NItemTag.css
 */

.nadminsearchuseritem {
  width: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: nadminsearchuseritem-fadeIn 0.4s ease;
}

@keyframes nadminsearchuseritem-fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(10px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@media (prefers-reduced-motion: reduce) {
  .nadminsearchuseritem {
    animation: none;
  }
}

.nadminsearchuseritem-container {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding: clamp(0.75rem, 2vw, 1.25rem);
  background: color-mix(in srgb, var(--n-bg-secondary) 40%, transparent);
  border: 1px solid var(--n-border);
  border-radius: clamp(0.5rem, 1vw, 1rem);
  transition: all 0.25s ease;
}

.nadminsearchuseritem-container:hover {
  background: color-mix(in srgb, var(--n-bg-secondary) 60%, transparent);
  border-color: var(--n-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px 0 color-mix(in srgb, var(--n-shadow) 15%, transparent);
}

/* Section gauche - Avatar et info principale */
.nadminsearchuseritem-left {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1rem);
  flex: 1;
  min-width: 0;
}

.nadminsearchuseritem-avatar {
  width: clamp(48px, 8vw, 60px);
  height: clamp(48px, 8vw, 60px);
  min-width: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--n-primary), var(--n-secondary));
  color: var(--n-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 8px 0 color-mix(in srgb, var(--n-shadow) 10%, transparent);
}

.nadminsearchuseritem-maininfo {
  display: flex;
  flex-direction: column;
  gap: clamp(0.15rem, 0.5vw, 0.25rem);
  min-width: 0;
  flex: 1;
}

.nadminsearchuseritem-name {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  font-weight: 600;
  color: var(--n-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nadminsearchuseritem-email {
  font-size: clamp(0.8rem, 1.8vw, 0.9rem);
  color: var(--n-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Section centre - Informations détaillées */
.nadminsearchuseritem-center {
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 1vw, 0.6rem);
  flex: 1;
  min-width: 0;
}

.nadminsearchuseritem-inforow {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1vw, 0.6rem);
}

.nadminsearchuseritem-label {
  font-size: clamp(0.75rem, 1.6vw, 0.85rem);
  color: var(--n-text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.nadminsearchuseritem-value {
  font-size: clamp(0.75rem, 1.6vw, 0.85rem);
  color: var(--n-text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nadminsearchuseritem-badge {
  font-size: clamp(0.7rem, 1.6vw, 0.8rem);
  font-weight: 600;
  padding: clamp(0.2rem, 0.8vw, 0.3rem) clamp(0.5rem, 1.5vw, 0.75rem);
  border-radius: clamp(0.3rem, 0.8vw, 0.4rem);
  white-space: nowrap;
  transition: all 0.2s ease;
}

.nadminsearchuseritem-badge.status-active {
  background: color-mix(in srgb, var(--n-success) 15%, transparent);
  color: var(--n-success);
  border: 1px solid color-mix(in srgb, var(--n-success) 30%, transparent);
}

.nadminsearchuseritem-badge.status-inactive {
  background: color-mix(in srgb, var(--n-text-muted) 15%, transparent);
  color: var(--n-text-muted);
  border: 1px solid color-mix(in srgb, var(--n-text-muted) 30%, transparent);
}

.nadminsearchuseritem-badge.status-suspended {
  background: color-mix(in srgb, var(--n-error) 15%, transparent);
  color: var(--n-error);
  border: 1px solid color-mix(in srgb, var(--n-error) 30%, transparent);
}

/* Section droite - Actions */
.nadminsearchuseritem-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nadminsearchuseritem-ismebtn {
  padding: clamp(0.5rem, 1.5vw, 0.65rem) clamp(1rem, 2.5vw, 1.5rem);
  font-size: clamp(0.8rem, 1.8vw, 0.9rem);
  font-weight: 600;
  border-radius: clamp(0.4rem, 1vw, 0.6rem);
  background: var(--n-primary);
  color: var(--n-text-inverse);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px 0 color-mix(in srgb, var(--n-shadow) 8%, transparent);
}

.nadminsearchuseritem-ismebtn:hover,
.nadminsearchuseritem-ismebtn:focus-visible {
  background: color-mix(in srgb, var(--n-primary) 90%, var(--n-bg-secondary) 10%);
  transform: scale(1.05);
  box-shadow: 0 4px 12px 0 color-mix(in srgb, var(--n-primary) 15%, transparent);
  outline: none;
}

.nadminsearchuseritem-ismebtn:active {
  background: color-mix(in srgb, var(--n-primary) 80%, var(--n-bg-secondary) 20%);
  transform: scale(0.98);
}

/* Media queries pour changements structurels */
@media (max-width: 1024px) {
  .nadminsearchuseritem-center {
    display: none;
  }
}

@media (max-width: 768px) {
  .nadminsearchuseritem-container {
    flex-wrap: wrap;
  }
  
  .nadminsearchuseritem-left {
    flex: 1 1 100%;
  }
  
  .nadminsearchuseritem-right {
    width: 100%;
    margin-top: 0.5rem;
  }
  
  .nadminsearchuseritem-ismebtn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .nadminsearchuseritem-avatar {
    width: 45px;
    height: 45px;
    min-width: 45px;
  }
}

/*
 * @file NAdminSetCodeAccesFrame.css
 *
 * @requires NFrameTag.css
 */
 .nadminsetcodeaccesframe {
    width: 100%;
    min-height: calc(100vh - 60px);
    padding-top: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nadminsetcodeaccesframe-child-table {
    width: 100%;
    height: 100%;
  }
  .nadminsetcodeaccesframe-child-td {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    padding: 2rem;
  }
  .nadminsetcodeaccesframe-child-innerwrapper {
    max-width: 450px;
    margin: 0 auto;
  }
  .nadminsetcodeaccesframe-child-formwrapper {
    background: color-mix(in srgb, var(--n-bg) 85%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 0 10px 0 var(--n-shadow);
    animation: nadminsetcodeaccesframe-slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }
  @keyframes nadminsetcodeaccesframe-slideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .nadminsetcodeaccesframe-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--n-primary);
    margin-bottom: 0.5rem;
  }
  .nadminsetcodeaccesframe-description {
    font-size: 1.08rem;
    color: var(--n-text-muted);
    margin-bottom: 2rem;
  }
  .nadminsetcodeaccesframe-child-input {
    width: 100%;
    margin-bottom: 1.5rem;
  }
  .nadminsetcodeaccesframe-child-validatebutton {
    width: 100%;
    margin-top: 1.5rem;
    padding: 1rem 0;
    font-size: 1.08rem;
    font-weight: 600;
    border-radius: 0.7rem;
    background: var(--n-primary);
    color: var(--n-text-inverse);
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px 0 color-mix(in srgb, var(--n-shadow) 8%, transparent);
    transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
  }
  .nadminsetcodeaccesframe-child-validatebutton:hover,
  .nadminsetcodeaccesframe-child-validatebutton:focus-visible {
    background: color-mix(in srgb, var(--n-primary) 90%, var(--n-bg-secondary) 10%);
    box-shadow: 0 4px 18px 0 color-mix(in srgb, var(--n-primary) 10%, transparent);
    outline: none;
  }
  .nadminsetcodeaccesframe-child-validatebutton:active {
    background: color-mix(in srgb, var(--n-primary) 80%, var(--n-bg-secondary) 20%);
    transform: scale(0.98);
  }
  .nadminsetcodeaccesframe-child-backlink {
    display: block;
    margin: 1.5rem auto 0 auto;
    color: var(--n-primary);
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    transition: color 0.18s, transform 0.18s;
  }
  .nadminsetcodeaccesframe-child-backlink:hover,
  .nadminsetcodeaccesframe-child-backlink:focus-visible {
      background: color-mix(in srgb, var(--n-text-muted) 20%, transparent);
      transform: translateY(-1px);
  }
  @media (max-width: 768px) {
    .nadminsetcodeaccesframe-child-td {
      padding: 1rem;
    }
    .nadminsetcodeaccesframe-child-formwrapper {
      padding: 1.5rem;
      border-radius: 20px;
    }
    .nadminsetcodeaccesframe-title {
      font-size: 1.25rem;
    }
    .nadminsetcodeaccesframe-description {
      font-size: 1rem;
    }
    .nadminsetcodeaccesframe-child-validatebutton {
      font-size: 1rem;
    }
    .nadminsetcodeaccesframe-child-backlink {
      font-size: 0.875rem;
    }
  }
  @media (max-width: 480px) {
    .nadminsetcodeaccesframe-child-innerwrapper {
      max-width: 100%;
    }
    .nadminsetcodeaccesframe-child-formwrapper {
      padding: 1rem;
      border-radius: 16px;
    }
    .nadminsetcodeaccesframe-title {
      font-size: 1.125rem;
    }
    .nadminsetcodeaccesframe-description {
      font-size: 0.875rem;
    }
    .nadminsetcodeaccesframe-child-validatebutton {
      font-size: 0.875rem;
    }
    .nadminsetcodeaccesframe-child-backlink {
      font-size: 0.75rem;
    }
  }
  .nadminsetcodeaccesframe-child-formwrapper.ntheme-dark {
    background: color-mix(in srgb, var(--n-bg) 90%, transparent);
    border-color: color-mix(in srgb, var(--n-border) 40%, transparent);
  }
/*
 * @file NAdminSetMdpFrame.css
 *
 * @requires NFrameTag.css
 */
.nadminsetmdpframe {
  width: 100%;
  min-height: calc(100vh - 60px);
  padding-top: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nadminsetmdpframe-child-table {
  width: 100%;
  height: 100%;
}
.nadminsetmdpframe-child-td {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  padding: 2rem;
}
.nadminsetmdpframe-child-innerwrapper {
  max-width: 450px;
  margin: 0 auto;
}
.nadminsetmdpframe-child-formwrapper {
  background: color-mix(in srgb, var(--n-bg) 85%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: 0 0 10px 0 var(--n-shadow);
  animation: nadminsetmdpframe-slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes nadminsetmdpframe-slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.nadminsetmdpframe-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--n-primary);
  margin-bottom: 0.5rem;
}
.nadminsetmdpframe-description {
  font-size: 1.08rem;
  color: var(--n-text-muted);
  margin-bottom: 2rem;
}
.nadminsetmdpframe-child-input {
  width: 100%;
  margin-bottom: 1.5rem;
}
.nadminsetmdpframe-child-validatebutton {
  width: 100%;
  margin-top: 1.5rem;
  padding: 1rem 0;
  font-size: 1.08rem;
  font-weight: 600;
  border-radius: 0.7rem;
  background: var(--n-primary);
  color: var(--n-text-inverse);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px 0 color-mix(in srgb, var(--n-shadow) 8%, transparent);
  transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
}
.nadminsetmdpframe-child-validatebutton:hover,
.nadminsetmdpframe-child-validatebutton:focus-visible {
  background: color-mix(in srgb, var(--n-primary) 90%, var(--n-bg-secondary) 10%);
  box-shadow: 0 4px 18px 0 color-mix(in srgb, var(--n-primary) 10%, transparent);
  outline: none;
}
.nadminsetmdpframe-child-validatebutton:active {
  background: color-mix(in srgb, var(--n-primary) 80%, var(--n-bg-secondary) 20%);
  transform: scale(0.98);
}
.nadminsetmdpframe-child-backlink {
  display: block;
  margin: 1.5rem auto 0 auto;
  color: var(--n-primary);
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  transition: color 0.18s, transform 0.18s;
}
.nadminsetmdpframe-child-backlink:hover,
.nadminsetmdpframe-child-backlink:focus-visible {
    background: color-mix(in srgb, var(--n-text-muted) 20%, transparent);
    transform: translateY(-1px);
}
@media (max-width: 768px) {
  .nadminsetmdpframe-child-td {
    padding: 1rem;
  }
  .nadminsetmdpframe-child-formwrapper {
    padding: 1.5rem;
    border-radius: 20px;
  }
  .nadminsetmdpframe-title {
    font-size: 1.25rem;
  }
  .nadminsetmdpframe-description {
    font-size: 1rem;
  }
  .nadminsetmdpframe-child-validatebutton {
    font-size: 1rem;
  }
  .nadminsetmdpframe-child-backlink {
    font-size: 0.875rem;
  }
}
@media (max-width: 480px) {
  .nadminsetmdpframe-child-innerwrapper {
    max-width: 100%;
  }
  .nadminsetmdpframe-child-formwrapper {
    padding: 1rem;
    border-radius: 16px;
  }
  .nadminsetmdpframe-title {
    font-size: 1.125rem;
  }
  .nadminsetmdpframe-description {
    font-size: 0.875rem;
  }
  .nadminsetmdpframe-child-validatebutton {
    font-size: 0.875rem;
  }
  .nadminsetmdpframe-child-backlink {
    font-size: 0.75rem;
  }
}
.nadminsetmdpframe-child-formwrapper.ntheme-dark {
  background: color-mix(in srgb, var(--n-bg) 90%, transparent);
  border-color: color-mix(in srgb, var(--n-border) 40%, transparent);
}
/*
 * @file NAdminVerifyEmailFrame.css
 *
 * @requires NFrameTag.css
 */

.nadminverifyemailframe {
  width: 100%;
  min-height: calc(100vh - 60px);
  padding-top: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nadminverifyemailframe-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.nadminverifyemailframe-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  text-align: center;
}

.nadminverifyemailframe-header-title {
  font-size: 2rem;
  font-weight: bold;
  color: var(--n-primary);
  margin: 0;
  text-shadow: 0 2px 4px color-mix(in srgb, var(--n-primary) 20%, transparent);
  line-height: 1.2;
}

.nadminverifyemailframe-header-subtitle {
  font-size: 1.125rem;
  color: var(--n-text-muted);
  margin: 0;
  max-width: 400px;
  line-height: 1.4;
}

.nadminverifyemailframe-form-container {
  width: calc(100% - 5rem);
  background: var(--n-bg-secondary);
  backdrop-filter: blur(20px);
  border-radius: 1.5rem;
  padding: 2.5rem;
  box-shadow: 0 0 10px 0 var(--n-shadow);
  border: 1px solid var(--n-border);
  animation: nadminverifyemailframe-slidein 0.6s ease-out;
  max-width: 420px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@keyframes nadminverifyemailframe-slidein {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nadminverifyemailframe-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.nadminverifyemailframe-info-zone {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: color-mix(in srgb, var(--n-warning) 10%, transparent);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--n-warning) 20%, transparent);
}
.nadminverifyemailframe-info-icon {
  font-size: 1.25rem;
  color: var(--n-warning);
  flex-shrink: 0;
}
.nadminverifyemailframe-info-text {
  font-size: 0.95rem;
  color: var(--n-text-muted);
  line-height: 1.4;
}

.nadminverifyemailframe-your-adresse {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.nadminverifyemailframe-your-adresse-text {
  font-size: 0.8rem;
  color: var(--n-text);
}
.nadminverifyemailframe-your-adresse-value-btn {
  font-size: 0.9rem;
  color: var(--n-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  transition: background 0.2s;
}
.nadminverifyemailframe-your-adresse-value-btn:hover {
  background: color-mix(in srgb, var(--n-primary) 10%, transparent);
}

.nadminverifyemailframe-input {
  width: 100%;
}

.nadminverifyemailframe-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.nadminverifyemailframe-submit-btn {
  flex: 1;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--n-primary), color-mix(in srgb, var(--n-primary) 80%, var(--n-bg)));
  color: var(--n-text-inverse);
  border: none;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--n-primary) 30%, transparent);
}

.nadminverifyemailframe-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--n-primary) 40%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--n-primary) 90%, var(--n-bg)), var(--n-primary));
}

.nadminverifyemailframe-submit-btn:active {
  transform: translateY(0);
}

.nadminverifyemailframe-cancel-btn {
  padding: 1rem 2rem;
  background: color-mix(in srgb, var(--n-text-muted) 10%, transparent);
  color: var(--n-text-muted);
  border: 2px solid color-mix(in srgb, var(--n-text-muted) 20%, transparent);
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nadminverifyemailframe-cancel-btn:hover {
  background: color-mix(in srgb, var(--n-text-muted) 20%, transparent);
  color: var(--n-text);
  transform: translateY(-1px);
}

.nadminverifyemailframe-resend-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
}
.nadminverifyemailframe-resend-text {
  font-size: 0.8rem;
  color: var(--n-text-muted);
}
.nadminverifyemailframe-resend-btn {
  font-size: 0.8rem;
  color: var(--n-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  transition: background 0.2s;
}
.nadminverifyemailframe-resend-btn:hover:not(.nadminverifyemailframe-resend-btn-disabled) {
  background: color-mix(in srgb, var(--n-primary) 10%, transparent);
}
.nadminverifyemailframe-resend-btn-disabled {
  color: var(--n-text-muted);
  cursor: not-allowed;
  background: none;
}

/* Responsive */
@media (max-width: 768px) {
  .nadminverifyemailframe-main {
    padding: 1rem;
  }
  .nadminverifyemailframe-form-container {
    padding: 2rem;
    width: calc(100% - 4rem);
  }
  .nadminverifyemailframe-header-title {
    font-size: 1.75rem;
  }
}

@media (max-width: 480px) {
  .nadminverifyemailframe-header-subtitle {
    font-size: 1rem;
  }
  .nadminverifyemailframe-form-container {
    padding: 1.5rem 1rem;
    width: calc(100% - 2rem);
  }
  .nadminverifyemailframe-header-title {
    font-size: 1.5rem;
  }
} 
 /**
 * @file NAdminAddFrame.css
 *
 * @requires NFrameTag.css
 *
 * @see DefaultAddFrame.js
 */

 .nadminaddframe{
    width: 100%;
    padding-top: 64px;
    padding-bottom: 10px;
}

.nadminaddframe-child-divparent {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    padding-top: 0;
    animation: nadminaddframe-fadeIn 0.6s ease-out;
}

.nadminaddframe-child-pagetitle {
    font-size: 2.8em;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    background: linear-gradient(45deg, var(--n-primary), var(--n-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: nadminaddframe-slideDown 0.8s ease-out;
}

/* Style de base pour la grille */
.nadminaddframe-child-divinputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 30px;
    margin-bottom: 20px;
    animation: nadminaddframe-slideUp 0.8s ease-out 0.4s backwards;
    background: var(--n-bg-secondary);
    box-shadow: 0 2px 5px var(--n-shadow);
    border-radius: 16px;
    padding: 20px;
}

/* Style quand les deux colonnes sont présentes */
.nadminaddframe-child-divinputs.has-both-columns {
    grid-template-columns: 1fr 1.5fr;
}

/* Style pour une seule colonne */
.nadminaddframe-child-divinputimage:only-child,
.nadminaddframe-child-divinputother:only-child {
    grid-column: 1 / -1;
    max-width: 100%;
}

/* Gestion des éléments masqués */
.nadminaddframe-child-divinputimage[style*="display: none"] ~ .nadminaddframe-child-divinputother,
.nadminaddframe-child-divinputother[style*="display: none"] ~ .nadminaddframe-child-divinputimage {
    grid-column: 1 / -1;
    max-width: 100%;
}

/* Style pour la section image */
.nadminaddframe-child-divinputimage {
    text-align: center;
}

.nadminaddframe-child-inputimage {
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    --n-image-width: 100%;
}

/* Style pour les autres inputs */
.nadminaddframe-child-divinputother {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.nadminaddframe-child-input {
    width: 100%;
}

/* Boutons d'action */
.nadminaddframe-child-actionbuttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 10px;
    border-radius: 16px;
    background: var(--n-bg-secondary);
    box-shadow: 0 2px 5px var(--n-shadow);
    animation: nadminaddframe-fadeIn 0.8s ease-out 0.6s backwards;
}

.nadminaddframe-child-backbutton {
    padding: 12px 24px;
    border-radius: 50px;
    background: transparent;
    color: var(--n-text);
    border: 2px solid var(--n-border);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nadminaddframe-child-backbutton:hover {
    background: var(--n-bg);
    border-color: var(--n-text);
}

.nadminaddframe-child-backbutton::before {
    content: '←';
    font-size: 1.2em;
}

.nadminaddframe-child-nextbutton {
    padding: 12px 32px;
    border-radius: 50px;
    background: var(--n-primary);
    color: var(--n-text-inverse);
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nadminaddframe-child-nextbutton:hover {
    background: var(--n-hover);
    transform: translateX(5px);
}

/* Animations */
@keyframes nadminaddframe-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes nadminaddframe-slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes nadminaddframe-slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .nadminaddframe-child-divinputs {
        grid-template-columns: 1fr;
    }

    .nadminaddframe-child-pagetitle {
        font-size: 2.2em;
    }

    .nadminaddframe-child-description {
        font-size: 1em;
        padding: 15px;
    }

    .nadminaddframe-child-actionbuttons {
        gap: 15px;
    }

    .nadminaddframe-child-backbutton,
    .nadminaddframe-child-nextbutton {
        font-size: 0.85em;
    }
    
    .nadminaddframe-child-backbutton {
        padding: 8px 16px;
    }

    .nadminaddframe-child-nextbutton {
        padding: 8px 24px;
    }
}

@media screen and (max-width: 480px) {
    .nadminaddframe-child-pagetitle {
        font-size: 1.8em;
    }
}

/* État de chargement */
.nadminaddframe-child-loading {
    position: relative;
    overflow: hidden;
}

.nadminaddframe-child-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--n-bg-secondary) 50%,
        transparent 100%);
    animation: nadminaddframe-shimmer 1.5s infinite;
}

@keyframes nadminaddframe-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
/**
 * @file NAdminEditFrame.css
 *
 * @requires NFrameTag.css
 */

 @keyframes nadmineditframe-fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Animation pour le pulsing des boutons */
  @keyframes nadmineditframe-pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
  }
  
  .nadmineditframe {
      width: 100%;
      padding-top: 64px;
      padding-bottom: 20px;
  }
  
  .nadmineditframe-child-divparent {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      padding-top: 0;
  }
  
  /* Titre de la page */
  .nadmineditframe-child-pagetitle {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--n-text);
    margin-bottom: 30px;
    text-align: left;
    animation: nadmineditframe-fadeIn 0.8s ease-out;
    position: relative;
  }
  
  .nadmineditframe-child-pagetitle::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--n-primary), var(--n-accent));
    border-radius: 2px;
  }
  
  /* Responsive design */
  @media (max-width: 768px) {
      .nadmineditframe-child-divparent {
          padding: 15px;
          padding-top: 0;
      }
  
      .nadmineditframe-child-pagetitle {
          font-size: 1.2rem;
      }
  }
/**
 * @file NAdminEditItem.css
 *
 * @requires NItemTag.css
 */

 .nadminedititem-inner-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
    background: var(--n-bg);
    border-radius: 12px;
    box-shadow: 0 2px 5px var(--n-shadow);
    margin-bottom: 20px;
}

/* Section des inputs */
.nadminedititem-child-divinputs {
    display: grid;
    gap: 24px;
    margin-bottom: 32px;
}

/* Section image */
.nadminedititem-child-divinputimage {
    width: calc(100% - 40px);
    padding: 20px;
    background: var(--n-bg-secondary);
    transition: all 0.3s ease;
}

.nadminedititem-child-inputimage {
    width: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    --n-image-width: 100%;
}

/* Section autres inputs */
.nadminedititem-child-divinputother {
    display: grid;
    gap: 16px;
}

/* Style commun pour les inputs */
.nadminedititem-child-input {
    width: calc(100% - 32px);
    padding: 12px 16px;
    border: 1px solid var(--n-border);
    border-radius: 8px;
    background: var(--n-bg-secondary);
    color: var(--n-text);
    transition: all 0.2s ease;
}

/* Style spécifique pour la textarea */
.nadminedititem-child-inputarea {
    min-height: 120px;
    resize: vertical;
}

/* Section des boutons d'action */
.nadminedititem-child-actionbuttons {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--n-border);
}

/* Style des boutons */
.nadminedititem-child-backbutton,
.nadminedititem-child-nextbutton {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.nadminedititem-child-backbutton {
    background: var(--n-bg-secondary);
    color: var(--n-text);
    border: 1px solid var(--n-border);
}

.nadminedititem-child-nextbutton {
    background: var(--n-primary);
    color: var(--n-text-inverse);
}

.nadminedititem-child-backbutton:hover {
    background: var(--n-bg-secondary-hover);
}

.nadminedititem-child-nextbutton:hover {
    background: var(--n-accent);
    transform: translateY(-2px);
}

.nadminedititem-child-backbutton:active,
.nadminedititem-child-nextbutton:active {
    transform: translateY(1px);
}

/* Animation d'entrée */
@keyframes nadminedititem-fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nadminedititem-inner-wrapper {
    animation: nadminedititem-fadeIn 0.3s ease-out;
}

/* Responsive design */
@media (max-width: 768px) {
    .nadminedititem-inner-wrapper {
        margin: 16px;
        padding: 16px;
    }

    .nadminedititem-child-actionbuttons {
        gap: 12px;
    }
}
/**
 * @file NAdminItem.css
 *
 * @requires NItemTag.css
 */

/* Container principal */
.nadminitem {
    background: var(--n-bg);
    border-radius: 12px;
    padding: 4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
    display: block;
    position: relative;
    max-width: 800px;
    width: calc(100% - 28px);
    margin: auto;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px var(--n-shadow);
}

.nadminitem:hover {
    background: var(--n-bg-secondary);
    transform: translateX(4px);
    box-shadow: 0 4px 12px var(--n-shadow);
}

/* Structure de la table */
.nadminitem-child-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* Cellule de l'image */
.nadminitem-child-image-td {
    width: 64px;
    padding: 8px;
    vertical-align: top;
}

/* Style de l'image */
.nadminitem-child-image {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    transition: transform 0.3s ease;
    border: 2px solid var(--n-border);
    background: var(--n-bg-secondary);
}

.nadminitem:hover .nadminitem-child-image {
    transform: scale(1.1);
    border-color: var(--n-primary);
}

/* Cellule du contenu */
.nadminitem-child-nom-td {
    padding-top: 8px;
    padding-left: 12px;
    padding-right: 12px;
    vertical-align: middle;
}

/* Style du titre */
.nadminitem-child-titre {
    font-size: 1rem;
    font-weight: 600;
    color: var(--n-text);
    margin-bottom: 4px;
    line-height: 1.4;
}

.nadminitem-child-check {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 25px;
    height: 25px;
    z-index: 2;
}

.nadminitem-child-resume-td {
    padding-left: 12px;
    padding-right: 12px;
    vertical-align: top;
}

/* Style du message */
.nadminitem-child-resume {
    font-size: 0.9rem;
    color: var(--n-text-muted);
    margin-bottom: 8px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Style de la textId */
.nadminitem-child-textId {
    font-size: 0.8rem;
    color: var(--n-text-muted);
    opacity: 0.8;
    font-weight: 500;
    text-align: right;
}

/* Animation d'apparition */
@keyframes nadminitem-slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.nadminitem {
    animation: nadminitem-slideIn 0.3s ease-out forwards;
}

/* État de chargement */
.nadminitem.loading {
    pointer-events: none;
    position: relative;
    overflow: hidden;
}

.nadminitem.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--n-bg-secondary) 50%,
        transparent 100%
    );
    animation: nadminitem-shimmer 1.5s infinite linear;
    transform: translateX(-100%);
}

@keyframes nadminitem-shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .nadminitem {
        margin-bottom: 8px;
    }

    .nadminitem-child-image-td {
        width: 56px;
        padding: 8px;
    }

    .nadminitem-child-image {
        width: 40px;
        height: 40px;
    }

    .nadminitem-child-nom-td {
        padding-top: 4px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .nadminitem-child-resume-td {
        padding-left: 8px;
        padding-right: 8px;
    }

    .nadminitem-child-titre {
        font-size: 0.95rem;
    }

    .nadminitem-child-resume {
        font-size: 0.85rem;
    }
}

/* Animation de suppression */
@keyframes notificationFadeOut {
    to {
        opacity: 0;
        transform: translateX(100%);
        height: 0;
        margin: 0;
        padding: 0;
    }
}

.nadminitem.removing {
    animation: notificationFadeOut 0.3s ease-out forwards;
}

/* État sélectionné - overlay sombre */
.nadminitem.selected {
    position: relative;
    border-color: var(--n-primary);
}

/* Overlay sombre transparent */
.nadminitem.selected::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    z-index: 1;
}

/* Mode sombre */
.ntheme-dark .nadminitem.selected::before {
    background-color: rgba(255, 255, 255, 0.05);
}
/**
 * @file NAdminItemFrame.css
 *
 * @requires NFrameTag.css
 */

 @keyframes nadminitemframe-fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Animation pour le pulsing des boutons */
  @keyframes nadminitemframe-pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
  }
  
  .nadminitemframe {
      width: 100%;
      padding-top: 64px;
      padding-bottom: 74px;
  }
  
  .nadminitemframe-child-divparent {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      padding-top: 0;
  }
  
  /* Titre de la page */
  .nadminitemframe-child-pagetitle {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--n-text);
    margin-bottom: 30px;
    text-align: left;
    animation: nadminitemframe-fadeIn 0.8s ease-out;
    position: relative;
  }
  
  .nadminitemframe-child-pagetitle::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--n-primary), var(--n-accent));
    border-radius: 2px;
  }
  
  /* Responsive design */
  @media (max-width: 768px) {
      .nadminitemframe-child-divparent {
          padding: 15px;
          padding-top: 0;
      }
  
      .nadminitemframe-child-pagetitle {
          font-size: 1.2rem;
      }
  }
/**
 * @file NAdminItemFull.css
 *
 * @requires NItemTag.css
 */

 .nadminitemfull-child-divparent {
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 15px;
    padding: 24px;
    background: var(--n-bg);
    border-radius: 12px;
    box-shadow: 0 2px 5px var(--n-shadow);
}

.nadminitemfull-child-pagetitle {
    font-size: 0.7rem;
    color: var(--n-text-muted);
    text-align: right;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--n-border);
}

.nadminitemfull-child-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
}

.nadminitemfull-child-td-label,
.nadminitemfull-child-td-value {
    padding: 12px 16px;
    background: var(--n-bg-secondary);
    border-radius: 8px;
}

.nadminitemfull-child-td-label {
    width: 200px;
    border-right: 1px solid var(--n-border);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.nadminitemfull-child-td-label-area,
.nadminitemfull-child-td-label-images {
    vertical-align: top;
}

.nadminitemfull-child-td-value {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.nadminitemfull-child-label {
    color: var(--n-text-muted);
    font-size: 0.95rem;
}

.nadminitemfull-child-value {
    color: var(--n-text);
    font-size: 1rem;
}

.nadminitemfull-child-image {
    max-width: 200px;
    height: auto;
    border-radius: 8px;
    display: block;
}

.nadminitemfull-child-image-item {
    max-width: 200px;
    height: auto;
    border-radius: 8px;
    display: inline-block;
    margin: 5px;
}

.nadminitemfull-child-link {
    color: var(--n-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.nadminitemfull-child-link:hover {
    color: var(--n-accent);
    text-decoration: underline;
}

/* Animation d'entrée */
@keyframes nadminitemfull-fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nadminitemfull-child-divparent {
    animation: nadminitemfull-fadeIn 0.3s ease-out;
}

/* Responsive design */
@media (max-width: 768px) {
    .nadminitemfull-child-divparent {
        padding: 16px;
        margin: 16px;
    }

    .nadminitemfull-child-td-label,
    .nadminitemfull-child-td-value {
        display: block;
        width: calc(100% - 32px) !important;
    }

    .nadminitemfull-child-td-label {
        border-right: none;
        border-bottom: 1px solid var(--n-border);
        border-radius: 8px 8px 0 0;
        padding-bottom: 8px;
    }

    .nadminitemfull-child-td-value {
        border-radius: 0 0 8px 8px;
        padding-top: 8px;
    }

    .nadminitemfull-child-image {
        max-width: 100%;
    }
}
/**
 * @file NAdminItemsFrame.css
 *
 * @requires NFrameTag.css
 */

 @keyframes nadminitemsframe-fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .nadminitemsframe {
      width: 100%;
      padding-top: 64px;
      padding-bottom: 64px;
  }
  
  .nadminitemsframe-child-divparent {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      padding-top: 0;
  }
  
  /* Titre de la page */
  .nadminitemsframe-child-pagetitle {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--n-text);
    margin-bottom: 40px;
    text-align: left;
    animation: nadminitemsframe-fadeIn 0.8s ease-out;
    position: relative;
  }
  
  .nadminitemsframe-child-pagetitle::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--n-primary), var(--n-accent));
    border-radius: 2px;
  }
  
  /* Responsive design */
  @media (max-width: 768px) {
      .nadminitemsframe-child-divparent {
          padding: 15px;
          padding-top: 0;
      }
  
      .nadminitemsframe-child-pagetitle {
          font-size: 1.2rem;
      }
  }
/**
 * @file NAdminMenuPrincipaleFrame.css
 *
 * @requires NFrameTag.css
 */

 .nadminmenuprincipaleframe {
    width: 100%;
    padding-top: 64px;
}

/* Div parent */
.nadminmenuprincipaleframe-child-divparent {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px;
    height: 100%;
}

/* Header */
.nadminmenuprincipaleframe-child-header {
    text-align: center;
    margin-bottom: 40px;
}

/* Titre de la page */
.nadminmenuprincipaleframe-child-pagetitle {
    font-size: 28px;
    font-weight: 600;
    color: var(--n-text);
    margin: 0 0 32px 0;
    padding-bottom: 16px;
    position: relative;
}

.nadminmenuprincipaleframe-child-pagetitle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--n-primary);
    border-radius: 2px;
}

.nadminmenuprincipaleframe-child-divparentmenu {
    padding: 16px;
    padding-top: 0;
    max-width: 800px;
    margin: 0 auto;
}

.nadminmenuprincipaleframe-group{
    padding-top: 40px;
}

.nadminmenuprincipaleframe-group:first-child{
    padding-top: 0px;
}

.nadminmenuprincipaleframe-group-title {
    font-weight: bold;
    font-size: 1.1em;
    margin: 16px 0 8px 0;
    color: var(--n-text);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--n-text);
}

.nadminmenuprincipaleframe-group-title:first-child {
    padding-top: 0px;
    margin-top: 0;
}

/* Grid du menu */
.nadminmenuprincipaleframe-child-divmenu {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 24px;
    margin: 0 auto;
}

/* Style commun pour tous les boutons */
.nadminmenuprincipaleframe-child-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--n-bg-secondary);
    border-radius: 16px;
    text-decoration: none;
    color: var(--n-text);
    transition: all 0.3s ease;
    border: 1px solid var(--n-border);
    min-height: 140px;
}

.nadminmenuprincipaleframe-child-button table{
    text-align: center;
}

/* Images des boutons */
.nadminmenuprincipaleframe-child-button.nbutton-type-text-icon-top .nbutton-child-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.nadminmenuprincipaleframe-child-button.nbutton-type-text-icon-top .ntheme-dark.nbutton-child-icon {
    filter: invert(1);
}

/* Texte des boutons */
.nadminmenuprincipaleframe-child-button.nbutton-type-text-icon-top .nbutton-child-text {
    font-size: 90%;
    font-weight: bold;
    text-align: center;
    margin-top: 8px;
}

/* Effets hover */
.nadminmenuprincipaleframe-child-button:hover {
    transform: translateY(-4px);
    background: var(--n-bg);
    box-shadow: 0 8px 24px var(--n-shadow);
    border-color: var(--n-primary);
}

/* Effet hover sur les icônes */
.nadminmenuprincipaleframe-child-button.nbutton-type-text-icon-top:hover .nbutton-child-icon{
    transform: scale(1.1);
    filter: brightness(0) invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
}

/* Media queries */
@media (max-width: 768px) {
    .nadminmenuprincipaleframe-child-divparentmenu {
        padding: 12px;
    }

    .nadminmenuprincipaleframe-child-pagetitle {
        font-size: 24px;
        margin-bottom: 24px;
    }
}

@media (max-width: 480px) {
    .nadminmenuprincipaleframe-child-divparent {
        padding: 16px 12px;
    }

    .nadminmenuprincipaleframe-child-divmenu {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .nadminmenuprincipaleframe-child-button {
        padding: 16px;
        min-height: 120px;
    }
}

/* Animation d'entrée */
@keyframes nadminmenuprincipaleframe-fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nadminmenuprincipaleframe-child-divmenu {
    animation: nadminmenuprincipaleframe-fadeIn 0.5s ease-out;
}
/**
 * @file NAdminWelcomeFrame.css
 *
 * @requires NFrameTag.css
 */

/* 🔹 Animation pour les éléments qui apparaissent en fade-in & slide-up */
@keyframes nadminwelcomeframe-appear {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 📌 Styles principaux */
.nadminwelcomeframe {
    width: 100%;
    height: 100vh;
    background-color: var(--n-primary);
}

/* 🔹 Table enfant */
.nadminwelcomeframe-child-table {
    height: 100%;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

/* 🔹 Contenu centré */
.nadminwelcomeframe-child-td {
    vertical-align: middle;
    text-align: center;
}

/* 🔹 Logo */
.nadminwelcomeframe-child-logo {
    max-width: 60vw;
    max-height: 200px;
    opacity: 0;
    animation: nadminwelcomeframe-appear 1s ease-out 0.2s forwards;
    transition: transform 0.3s ease;
}

.nadminwelcomeframe-child-logo:hover {
    transform: scale(1.02) translateY(-5px);
}

/* 🔹 Slogan */
.nadminwelcomeframe-child-slogan {
    margin-top: 15px;
    font-size: 133%;
    font-weight: bold;
    color: var(--n-text);
    opacity: 0;
    animation: nadminwelcomeframe-appear 1s ease-out 0.5s forwards;
}
/**
 * @file NAdminExpItem.css
 *
 * @requires NItemTag.css
 */

 .nadminexpitem-child-edit-wrapper {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
}

.nadminexpitem-child-edit-button {
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: 8px;
    color: var(--n-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px var(--n-shadow);
}

.nadminexpitem-child-edit-button:hover {
    background: var(--n-bg-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--n-shadow);
}

.nadminexpitem-child-edit-button .nbutton-child-icon {
    width: 18px;
    height: 18px;
}

/* Section des boutons d'action */
.nadminexpitem-child-actionbuttons {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--n-border);
}

/* Style des boutons */
.nadminexpitem-child-backbutton,
.nadminexpitem-child-nextbutton {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.nadminexpitem-child-backbutton {
    background: var(--n-bg-secondary);
    color: var(--n-text);
    border: 1px solid var(--n-border);
}

.nadminexpitem-child-nextbutton {
    background: var(--n-primary);
    color: var(--n-text-inverse);
}

.nadminexpitem-child-backbutton:hover {
    background: var(--n-bg-secondary-hover);
}

.nadminexpitem-child-nextbutton:hover {
    background: var(--n-accent);
    transform: translateY(-2px);
}

.nadminexpitem-child-backbutton:active,
.nadminexpitem-child-nextbutton:active {
    transform: translateY(1px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .nadminexpitem-child-edit-wrapper {
        top: 4px;
        right: 4px;
    }

    .nadminexpitem-child-edit-button {
        padding: 8px 12px;
        font-size: 13px;
    }

    .nadminexpitem-child-actionbuttons {
        flex-direction: column-reverse;
        gap: 12px;
    }

    .nadminexpitem-child-backbutton,
    .nadminexpitem-child-nextbutton {
        width: 100%;
        text-align: center;
    }
}
/**
 * @file NAdminAdminNotificationLinkItem.css
 *
 * @requires NItemTag.css
 */

/* Container principal */
.nadminadminnotificationlinkitem {
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    border: 1px solid var(--n-border);
    border-radius: 5px;
    padding: 5px;
    background-color: var(--n-bg-secondary);
    margin: 5px;
    color: var(--n-text);
}

.nadminadminnotificationlinkitem:hover {
    text-decoration: underline;
}
/**
 * @file NAdminNavBar.css
 *
 * @requires NTag.css
 */

 .nadminnavbar {
    width: 100%;
    transition: box-shadow 0.3s ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.2);
    backdrop-filter: blur(10px);
    height: 64px;
    border-bottom: 1px solid var(--n-border);
    z-index: 1;
}

/* Table principale */
.nadminnavbar-child-table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

.nadminnavbar-child-tr {
    height: 100%;
}

/* Cellules de la table */
.nadminnavbar-child-td-search {
    vertical-align: middle;
    padding: 0 8px;
    width: 100%;
}

.nadminnavbar-child-td-logo,
.nadminnavbar-child-td-back,
.nadminnavbar-child-td-searchButton,
.nadminnavbar-child-td-compte,
.nadminnavbar-child-td-notification,
.nadminnavbar-child-td-menubutton {
    vertical-align: middle;
    padding: 0 8px;
    min-width: 40px;
    width: 40px;
    white-space: nowrap;
    text-align: center;
}

.nadminnavbar-child-td-back.ntheme-dark img,
.nadminnavbar-child-td-searchButton.ntheme-dark img,
.nadminnavbar-child-td-compte.ntheme-dark img,
.nadminnavbar-child-td-notification.ntheme-dark img,
.nadminnavbar-child-td-menubutton.ntheme-dark img {
    filter: invert(1);
}

/* Logo */
.nadminnavbar-child-td-logo {
    min-width: 48px;
    width: 48px;
    white-space: nowrap;
    text-align: center;
}

.nadminnavbar-child-logo {
    height: 32px;
    width: auto;
    display: block;
}

/* Bouton retour */
.nadminnavbar-child-button-back {
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nadminnavbar-child-button-back.nbutton-type-icon .nbutton-child-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.nadminnavbar-child-button-back.nbutton-type-icon:hover .nbutton-child-icon {
    transform: translateX(-4px);
}

.nadminnavbar-child-search {
    width: 100%;
    margin: auto;
    max-width: 450px;
    --n-input-height: 35;
}

/* Boutons d'action */
.nadminnavbar-child-button-search,
.nadminnavbar-child-button-compte,
.nadminnavbar-child-button-notification,
.nadminnavbar-child-button-menubutton {
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Images des boutons */
.nadminnavbar-child-button-search.nbutton-type-icon .nbutton-child-icon,
.nadminnavbar-child-button-notification.nbutton-type-icon .nbutton-child-icon,
.nadminnavbar-child-button-compte.nbutton-type-icon .nbutton-child-icon,
.nadminnavbar-child-button-menubutton.nbutton-type-icon .nbutton-child-icon {
    width: 24px;
    height: 24px;
    transition: all 0.3s ease;
}

/* États actifs et hover */
.nadminnavbar-child-button-search:hover,
.nadminnavbar-child-button-notification:hover,
.nadminnavbar-child-button-compte:hover,
.nadminnavbar-child-button-menubutton:hover {
    background: var(--n-bg-secondary);
}

.nadminnavbar-child-td-notification.active,
.nadminnavbar-child-td-compte.active,
.nadminnavbar-child-td-menubutton.active {
    color: var(--n-primary);
}

.nadminnavbar-child-td-notification.active .nbutton-child-icon,
.nadminnavbar-child-td-compte.active .nbutton-child-icon,
.nadminnavbar-child-td-menubutton.active .nbutton-child-icon {
    filter: brightness(0) invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
}

.nadminnavbar-child-countnotify {
    background-color: red;
    color: white;
    text-align: center;
    border-radius: 100px;
    padding: 2px 5px;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 0 5px var(--n-shadow);
    position: absolute;
    z-index: 1;
}

/* Media queries pour la responsivité */
@media (max-width: 768px) {
    .nadminnavbar-child-search {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .nadminnavbar {
        height: 56px;
    }

    .nadminnavbar-child-logo {
        height: 28px;
    }

    .nadminnavbar-child-search {
        height: 36px;
    }

    .nadminnavbar-child-button-search,
    .nadminnavbar-child-button-compte,
    .nadminnavbar-child-button-notification,
    .nadminnavbar-child-button-menubutton {
        width: 36px;
        height: 36px;
    }
}

/* Animation d'apparition */
@keyframes nadminnavbar-slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.nadminnavbar {
    animation: nadminnavbar-slideDown 0.3s ease-out;
}

/* Effet de scroll */
.nadminnavbar.scrolled {
    box-shadow: 0 5px 15px var(--n-shadow);
}

/* Bouton de suppression */
.nadminnavbar-child-td-delete {
    vertical-align: middle;
    padding: 0 8px;
    min-width: 40px;
    width: 40px;
    white-space: nowrap;
    text-align: center;
}

.nadminnavbar-child-button-delete {
    background: var(--n-error) !important;
    border: none;
    padding: 8px;
    cursor: pointer;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.nadminnavbar-child-button-delete.nbutton-type-icon .nbutton-child-icon {
    width: 18px;
    height: 20px;
    filter: brightness(0) invert(1) !important;
    transition: transform 0.3s ease;
}

.nadminnavbar-child-button-delete:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(var(--n-error), 0.4);
}

.nadminnavbar-child-button-delete:hover .nbutton-child-icon {
    transform: rotate(8deg);
}

/* Case à cocher "Tout sélectionner" */
.nadminnavbar-child-td-checkall {
    vertical-align: middle;
    padding: 0 8px;
    min-width: 40px;
    width: 40px;
    white-space: nowrap;
    text-align: center;
}

.nadminnavbar-child-checkall {
    position: relative;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

/* Style personnalisé de la checkbox */
.nadminnavbar-child-checkall input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.nadminnavbar-child-checkall .checkbox-custom {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: var(--n-bg);
    border: 2px solid var(--n-border);
    border-radius: 6px;
    transition: all 0.3s ease;
}

/* État hover */
.nadminnavbar-child-checkall:hover .checkbox-custom {
    border-color: var(--n-primary);
    background: var(--n-bg-secondary);
}

/* État coché */
.nadminnavbar-child-checkall input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--n-primary);
    border-color: var(--n-primary);
}

/* Création de la coche */
.nadminnavbar-child-checkall input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 4px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    animation: nadminnavbar-checkmarkAppear 0.2s ease-out;
}

@keyframes nadminnavbar-checkmarkAppear {
    from {
        opacity: 0;
        transform: rotate(45deg) scale(0.5);
    }
    to {
        opacity: 1;
        transform: rotate(45deg) scale(1);
    }
}

/* État indéterminé (certains éléments sélectionnés) */
.nadminnavbar-child-checkall input[type="checkbox"]:indeterminate + .checkbox-custom {
    background: var(--n-primary);
    border-color: var(--n-primary);
}

.nadminnavbar-child-checkall input[type="checkbox"]:indeterminate + .checkbox-custom::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 9px;
    width: 12px;
    height: 2px;
    background: white;
    animation: nadminnavbar-indeterminateAppear 0.2s ease-out;
}

@keyframes nadminnavbar-indeterminateAppear {
    from {
        opacity: 0;
        transform: scaleX(0);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Media queries pour la responsivité */
@media (max-width: 480px) {
    .nadminnavbar-child-button-delete {
        width: 36px;
        height: 36px;
    }

    .nadminnavbar-child-button-delete.nbutton-type-icon .nbutton-child-icon {
        width: 16px;
        height: 18px;
    }

    .nadminnavbar-child-checkall .checkbox-custom {
        width: 20px;
        height: 20px;
    }
}

/* Style du compteur de sélection */
.nadminnavbar-child-textcountselect {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--n-text);
    text-align: left;
}
/**
 * @file NAdminNavBarBottom.css
 *
 * @requires NTag.css
 */

 .nadminnavbarbottom {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,0.2);
    backdrop-filter: blur(10px);
    padding:0;
    border-top: 1px solid var(--n-border);
    z-index: 1;
}

/* Table principale */
.nadminnavbarbottom-child-table {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    border-spacing: 0;
}

.nadminnavbarbottom-child-tr {
    height: 64px;
}

/* Cellules de la table */
.nadminnavbarbottom-child-td-counter{
    padding: 0 16px;
    vertical-align: middle;
    width: 100%;
}

.nadminnavbarbottom-child-td-button {
    padding: 0 16px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Style du compteur */
.nadminnavbarbottom-child-counter {
    font-size: 0.9rem;
    color: var(--n-text-secondary);
    margin-right: 8px;
}

.nadminnavbarbottom-child-countselect {
    font-size: 0.9rem;
    color: var(--n-primary);
    font-weight: 500;
}

/* Style des boutons */
.nadminnavbarbottom-child-button {
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    border: none;
    background: var(--n-primary);
    color: var(--n-text-inverse);
    cursor: pointer;
}

.nadminnavbarbottom-child-button-option {
    background: transparent;
    color: var(--n-text);
}

.nadminnavbarbottom-child-check {
    width: 25px;
    height: 25px;
}

.nadminnavbarbottom-child-button:hover {
    background: var(--n-accent);
    transform: translateY(-2px);
}

.nadminnavbarbottom-child-button-option:hover {
    background: var(--n-bg-secondary);
}

/* Boutons du popup */
.nadminnavbarbottom-child-button-popup {
    width: 100%;
    padding: 12px 16px;
    text-align: left;
    border: none;
    background: transparent;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--n-text);
}

.nadminnavbarbottom-child-button-popup:hover {
    background: var(--n-bg-secondary);
}

.nadminnavbarbottom-child-button-popupdelete {
    color: var(--n-error);
}

/* Images des boutons */
.nadminnavbarbottom-child-button img,
.nadminnavbarbottom-child-button-popup img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.nadminnavbarbottom-child-button img {
    filter: invert(1);
}

.nadminnavbarbottom-child-button-option img {
    filter: none;
}

/* Responsive design */
@media (max-width: 992px) {
    .nadminnavbarbottom-child-tr {
        height: 56px;
    }

    .nadminnavbarbottom-child-td-counter {
        padding-left: 24px;
    }

    .nadminnavbarbottom-child-td-option {
        padding-right: 24px;
    }
}

@media (max-width: 700px) {
    .nadminnavbarbottom-child-counter,
    .nadminnavbarbottom-child-countselect {
        font-size: 0.8rem;
    }

    .nadminnavbarbottom-child-button-option {
        padding: 8px;
    }
}

/* État actif et focus des boutons */
.nadminnavbarbottom-child-button:active {
    transform: translateY(1px);
}
/**
 * @file NAdminLogItem.css
 *
 * @requires NItemTag.css
 */

.nadminlogitem {
    padding: 12px 22px;
    margin: auto;
    margin-bottom: 15px;
    border-radius: 10px;
    background: var(--n-bg-secondary, #f4f7fa);
    box-shadow: 0 1px 5px 0 var(--n-shadow, rgba(0,0,0,0.05));
    transition: box-shadow 0.15s;
    max-width: 900px;
}

.nadminlogitem.error {
    border-left: 8px solid var(--n-error);
}
.nadminlogitem.warning {
    border-left: 8px solid var(--n-warning);
}
.nadminlogitem.info {
    border-left: 8px solid var(--n-info);
}

.nadminlogitem-child-message {
    flex: 1;
    font-size: 1.06em;
    color: var(--n-text, #212235);
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-line;
    font-family: 'JetBrains Mono', 'Consolas', 'monospace', monospace;
    padding: 0.5em 0 0.5em 0;
}
/**
 * @file NAdminParametresFrame.css
 *
 * @requires NFrameTag.css
 */
  
 .nadminparametresframe {
    width: 100%;
    padding-top: 64px;
}

.nadminparametresframe-child-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
}

.nadminparametresframe-child-section {
    background-color: var(--n-bg-secondary);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid var(--n-border);
}

.nadminparametresframe-child-section-title {
    font-size: 1.5em;
    color: var(--n-text);
    margin-bottom: 8px;
}

.nadminparametresframe-child-section-desc {
    color: var(--n-text-muted);
    margin-bottom: 20px;
}

.nadminparametresframe-child-language-selector {
    width: 100%;
    max-width: 300px;
}

.nadminparametresframe-child-check-update-button {
    background-color: var(--n-primary);
    color: var(--n-text-inverse);
    padding: 12px 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.nadminparametresframe-child-check-update-button:hover {
    background-color: var(--n-hover);
    transform: translateY(2px);
}

.nadminparametresframe-child-clean-cache-button {
    background-color: var(--n-error);
    color: var(--n-text-inverse);
    padding: 12px 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.nadminparametresframe-child-clean-cache-button:hover {
    box-shadow: inset 0 0 0 50px var(--n-shadow);
    transform: translateY(2px);
}

.nadminparametresframe-child-check-update-button img,
.nadminparametresframe-child-clean-cache-button img {
    filter: invert(1);
}
/**
 * @file NAdminSauvegardesFrame.css
 *
 * @requires NFrameTag.css
 */
  
 .nadminsauvegardesframe {
    width: 100%;
    padding-top: 64px;
}

.nadminsauvegardesframe-child-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
}

.nadminsauvegardesframe-child-section {
    background-color: var(--n-bg-secondary);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid var(--n-border);
}

.nadminsauvegardesframe-child-section-title {
    font-size: 1.5em;
    color: var(--n-text);
    margin-bottom: 8px;
}

.nadminsauvegardesframe-child-section-desc {
    color: var(--n-text-muted);
    margin-bottom: 20px;
}

.nadminsauvegardesframe-child-selector {
    width: 100%;
    max-width: 300px;
}

.nadminsauvegardesframe-child-data-selector-dure {
    margin-top: 25px;
}

.nadminsauvegardesframe-child-button {
    background-color: var(--n-primary);
    color: var(--n-text-inverse);
    padding: 12px 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.nadminsauvegardesframe-child-button:hover {
    background-color: var(--n-hover);
    transform: translateY(2px);
}

.nadminsauvegardesframe-child-button img {
    filter: invert(1);
}
/**
 * @file NAdminModifyUserCodeAccesFrame.css
 *
 * @requires NFrameTag.css
 */
 .nadminmodifyusercodeaccesframe {
    width: 100%;
    min-height: calc(100vh - 65px);
    padding-top: 65px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.nadminmodifyusercodeaccesframe-child-table {
    width: 100%;
    height: 100%;
}

.nadminmodifyusercodeaccesframe-child-td {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    padding: clamp(0.5rem, 2vw, 2rem);
}

.nadminmodifyusercodeaccesframe-child-innerwrapper {
    max-width: clamp(280px, 95vw, 500px);
    margin: 0 auto;
}

.nadminmodifyusercodeaccesframe-child-formwrapper {
    background: var(--n-bg-secondary);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: clamp(12px, 3vw, 24px);
    padding: clamp(1rem, 2.5vw, 2.5rem);
    box-shadow: 0 clamp(4px, 1vw, 8px) clamp(20px, 5vw, 32px) var(--n-shadow);
    border: 1px solid color-mix(in srgb, var(--n-border) 20%, transparent);
    animation: nadminmodifyusercodeaccesframe-slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes nadminmodifyusercodeaccesframe-slideUp {
    from { 
        opacity: 0; 
        transform: translateY(clamp(20px, 5vw, 40px)); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.nadminmodifyusercodeaccesframe-title {
    font-size: clamp(1.125rem, 3.5vw, 1.75rem);
    font-weight: bold;
    color: var(--n-primary);
    margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
}

.nadminmodifyusercodeaccesframe-description {
    font-size: clamp(0.8125rem, 2.25vw, 1rem);
    color: var(--n-text-muted);
    margin-bottom: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.5;
}

/* Sections */
.nadminmodifyusercodeaccesframe-section {
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
    animation: nadminmodifyusercodeaccesframe-fadeIn 0.6s ease-out;
    animation-fill-mode: both;
}

.nadminmodifyusercodeaccesframe-section:nth-child(1) { animation-delay: 0.1s; }
.nadminmodifyusercodeaccesframe-section:nth-child(2) { animation-delay: 0.2s; }
.nadminmodifyusercodeaccesframe-section:nth-child(3) { animation-delay: 0.3s; }

@keyframes nadminmodifyusercodeaccesframe-fadeIn {
    from {
        opacity: 0;
        transform: translateY(clamp(10px, 2.5vw, 20px));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nadminmodifyusercodeaccesframe-section-old {
    margin-bottom: clamp(2rem, 4vw, 4rem);
    border-bottom: 1px solid var(--n-border);
    padding-bottom: clamp(2rem, 4vw, 4rem);
}

.nadminmodifyusercodeaccesframe-child-input {
    width: 100%;
    margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
}

/* Section actions */
.nadminmodifyusercodeaccesframe-actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: clamp(0.75rem, 2vw, 1rem);
    margin-top: clamp(1.5rem, 4vw, 2rem);
    padding-top: clamp(1rem, 3vw, 1.5rem);
    border-top: 1px solid color-mix(in srgb, var(--n-border) 20%, transparent);
}

.nadminmodifyusercodeaccesframe-child-savebutton {
    background: var(--n-primary);
    color: var(--n-text-inverse);
    border: none;
    border-radius: clamp(8px, 2vw, 12px);
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 3vw, 2rem);
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nadminmodifyusercodeaccesframe-child-savebutton:hover {
    background: color-mix(in srgb, var(--n-primary) 90%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 clamp(2px, 0.5vw, 4px) clamp(8px, 2vw, 12px) color-mix(in srgb, var(--n-primary) 30%, transparent);
}

.nadminmodifyusercodeaccesframe-child-savebutton:active {
    transform: translateY(0);
    box-shadow: 0 clamp(1px, 0.25vw, 2px) clamp(4px, 1vw, 6px) color-mix(in srgb, var(--n-primary) 30%, transparent);
}

.nadminmodifyusercodeaccesframe-child-cancelbutton {
    background: color-mix(in srgb, var(--n-bg) 80%, transparent);
    color: var(--n-text);
    border: 1px solid color-mix(in srgb, var(--n-border) 40%, transparent);
    border-radius: clamp(8px, 2vw, 12px);
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 3vw, 2rem);
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nadminmodifyusercodeaccesframe-child-cancelbutton:hover {
    background: color-mix(in srgb, var(--n-hover) 20%, transparent);
    border-color: color-mix(in srgb, var(--n-border) 60%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 clamp(2px, 0.5vw, 4px) clamp(8px, 2vw, 12px) color-mix(in srgb, var(--n-shadow) 20%, transparent);
}

.nadminmodifyusercodeaccesframe-child-cancelbutton:active {
    transform: translateY(0);
    box-shadow: 0 clamp(1px, 0.25vw, 2px) clamp(4px, 1vw, 6px) color-mix(in srgb, var(--n-shadow) 20%, transparent);
}

/* Lien retour */
.nadminmodifyusercodeaccesframe-child-backlink {
    display: block;
    text-align: center;
    margin-top: clamp(1rem, 3vw, 1.5rem);
    padding-top: clamp(1rem, 3vw, 1.5rem);
    border-top: 1px solid color-mix(in srgb, var(--n-border) 20%, transparent);
    color: var(--n-text-muted);
    text-decoration: none;
    font-size: clamp(0.8125rem, 2.25vw, 0.9375rem);
    transition: all 0.3s ease;
}

.nadminmodifyusercodeaccesframe-child-backlink:hover {
    color: var(--n-primary);
    transform: translateY(-1px);
}

/* Thème sombre */
.nadminmodifyusercodeaccesframe-child-formwrapper.ntheme-dark {
    background: color-mix(in srgb, var(--n-bg) 90%, transparent);
    border-color: color-mix(in srgb, var(--n-border) 40%, transparent);
}

.nadminmodifyusercodeaccesframe-child-cancelbutton.ntheme-dark {
    background: color-mix(in srgb, var(--n-bg) 70%, transparent);
    border-color: color-mix(in srgb, var(--n-border) 50%, transparent);
}
/**
 * @file NAdminModifyUserMdpFrame.css
 *
 * @requires NFrameTag.css
 */
.nadminmodifyusermdpframe {
    width: 100%;
    min-height: calc(100vh - 65px);
    padding-top: 65px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.nadminmodifyusermdpframe-child-table {
    width: 100%;
    height: 100%;
}

.nadminmodifyusermdpframe-child-td {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    padding: clamp(0.5rem, 2vw, 2rem);
}

.nadminmodifyusermdpframe-child-innerwrapper {
    max-width: clamp(280px, 95vw, 500px);
    margin: 0 auto;
}

.nadminmodifyusermdpframe-child-formwrapper {
    background: var(--n-bg-secondary);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: clamp(12px, 3vw, 24px);
    padding: clamp(1rem, 2.5vw, 2.5rem);
    box-shadow: 0 clamp(4px, 1vw, 8px) clamp(20px, 5vw, 32px) var(--n-shadow);
    border: 1px solid color-mix(in srgb, var(--n-border) 20%, transparent);
    animation: nadminmodifyusermdpframe-slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes nadminmodifyusermdpframe-slideUp {
    from { 
        opacity: 0; 
        transform: translateY(clamp(20px, 5vw, 40px)); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.nadminmodifyusermdpframe-title {
    font-size: clamp(1.125rem, 3.5vw, 1.75rem);
    font-weight: bold;
    color: var(--n-primary);
    margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
}

.nadminmodifyusermdpframe-description {
    font-size: clamp(0.8125rem, 2.25vw, 1rem);
    color: var(--n-text-muted);
    margin-bottom: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.5;
}

/* Sections */
.nadminmodifyusermdpframe-section {
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
    animation: nadminmodifyusermdpframe-fadeIn 0.6s ease-out;
    animation-fill-mode: both;
}

.nadminmodifyusermdpframe-section:nth-child(1) { animation-delay: 0.1s; }
.nadminmodifyusermdpframe-section:nth-child(2) { animation-delay: 0.2s; }
.nadminmodifyusermdpframe-section:nth-child(3) { animation-delay: 0.3s; }

@keyframes nadminmodifyusermdpframe-fadeIn {
    from {
        opacity: 0;
        transform: translateY(clamp(10px, 2.5vw, 20px));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nadminmodifyusermdpframe-section-old {
    margin-bottom: clamp(2rem, 4vw, 4rem);
    border-bottom: 1px solid var(--n-border);
    padding-bottom: clamp(2rem, 4vw, 4rem);
}

.nadminmodifyusermdpframe-child-input {
    width: 100%;
    margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
}

/* Section actions */
.nadminmodifyusermdpframe-actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: clamp(0.75rem, 2vw, 1rem);
    margin-top: clamp(1.5rem, 4vw, 2rem);
    padding-top: clamp(1rem, 3vw, 1.5rem);
    border-top: 1px solid color-mix(in srgb, var(--n-border) 20%, transparent);
}

.nadminmodifyusermdpframe-child-savebutton {
    background: var(--n-primary);
    color: var(--n-text-inverse);
    border: none;
    border-radius: clamp(8px, 2vw, 12px);
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 3vw, 2rem);
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nadminmodifyusermdpframe-child-savebutton:hover {
    background: color-mix(in srgb, var(--n-primary) 90%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 clamp(2px, 0.5vw, 4px) clamp(8px, 2vw, 12px) color-mix(in srgb, var(--n-primary) 30%, transparent);
}

.nadminmodifyusermdpframe-child-savebutton:active {
    transform: translateY(0);
    box-shadow: 0 clamp(1px, 0.25vw, 2px) clamp(4px, 1vw, 6px) color-mix(in srgb, var(--n-primary) 30%, transparent);
}

.nadminmodifyusermdpframe-child-cancelbutton {
    background: color-mix(in srgb, var(--n-bg) 80%, transparent);
    color: var(--n-text);
    border: 1px solid color-mix(in srgb, var(--n-border) 40%, transparent);
    border-radius: clamp(8px, 2vw, 12px);
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 3vw, 2rem);
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nadminmodifyusermdpframe-child-cancelbutton:hover {
    background: color-mix(in srgb, var(--n-hover) 20%, transparent);
    border-color: color-mix(in srgb, var(--n-border) 60%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 clamp(2px, 0.5vw, 4px) clamp(8px, 2vw, 12px) color-mix(in srgb, var(--n-shadow) 20%, transparent);
}

.nadminmodifyusermdpframe-child-cancelbutton:active {
    transform: translateY(0);
    box-shadow: 0 clamp(1px, 0.25vw, 2px) clamp(4px, 1vw, 6px) color-mix(in srgb, var(--n-shadow) 20%, transparent);
}

/* Lien retour */
.nadminmodifyusermdpframe-child-backlink {
    display: block;
    text-align: center;
    margin-top: clamp(1rem, 3vw, 1.5rem);
    padding-top: clamp(1rem, 3vw, 1.5rem);
    border-top: 1px solid color-mix(in srgb, var(--n-border) 20%, transparent);
    color: var(--n-text-muted);
    text-decoration: none;
    font-size: clamp(0.8125rem, 2.25vw, 0.9375rem);
    transition: all 0.3s ease;
}

.nadminmodifyusermdpframe-child-backlink:hover {
    color: var(--n-primary);
    transform: translateY(-1px);
}

/* Thème sombre */
.nadminmodifyusermdpframe-child-formwrapper.ntheme-dark {
    background: color-mix(in srgb, var(--n-bg) 90%, transparent);
    border-color: color-mix(in srgb, var(--n-border) 40%, transparent);
}

.nadminmodifyusermdpframe-child-cancelbutton.ntheme-dark {
    background: color-mix(in srgb, var(--n-bg) 70%, transparent);
    border-color: color-mix(in srgb, var(--n-border) 50%, transparent);
}
/**
 * @file NAdminUserProfilFrame.css
 *
 * @requires NFrameTag.css
 */

 .nadminuserprofilframe {
    width: 100%;
    padding-top: 64px;
    padding-bottom: 20px;
}
/**
 * @file NAdminUserProfilItemFull.css
 *
 * @requires NItemTag.css
 */

 .nadminuserprofilitemfull-inner-wrapper {
    max-width: 900px;
    width: calc(100% - 48px);
    margin: 32px auto;
    background: var(--n-bg);
    border-radius: 16px;
    box-shadow: 0 1px 4px var(--n-shadow);
    overflow: hidden;
    border: 1px solid var(--n-border);
}

/* En-tête du profil */
.nadminuserprofilitemfull-child-header {
    position: relative;
    min-height: 270px;
    overflow: hidden;
}

.nadminuserprofilitemfull-child-bgimage {
    width: 100%;
    height: 200px;
    object-fit: cover;
    filter: brightness(0.9);
    transition: transform 0.3s ease;
    border-bottom: 1px solid var(--n-border);
}

.nadminuserprofilitemfull-child-bgimage:hover {
    transform: scale(1.05);
}

.nadminuserprofilitemfull-child-photo-wrapper {
    position: absolute;
    bottom: 10px;
    left: 48px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid var(--n-bg);
    box-shadow: 0 4px 12px var(--n-shadow);
    overflow: hidden;
    background-color: white;
    z-index: 2;
    transition: transform 0.3s ease;
}

.nadminuserprofilitemfull-child-photo-wrapper:hover {
    transform: scale(1.05);
}

.nadminuserprofilitemfull-child-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Informations principales */
.nadminuserprofilitemfull-child-maininfo {
    padding: 72px 48px 32px;
    padding-top: 40px;
}

.nadminuserprofilitemfull-child-name-wrapper {
    display: flex;
    gap: 12px;
    align-items: baseline;
    margin-bottom: 24px;
}

.nadminuserprofilitemfull-child-nom,
.nadminuserprofilitemfull-child-prenom {
    font-size: 28px;
    font-weight: 600;
    color: var(--n-text);
    margin: 0;
}

.nadminuserprofilitemfull-child-prenom {
    font-weight: 400;
}

/* Style commun pour les wrappers d'information */
.nadminuserprofilitemfull-child-info-wrapper {
    display: flex;
    align-items: center;
    padding: 18px 24px;
    background: var(--n-bg);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--n-border);
    margin-bottom: 16px;
}

.nadminuserprofilitemfull-child-info-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    background: linear-gradient(
        135deg,
        var(--n-bg),
        var(--n-bg-secondary)
    );
    border-color: var(--n-primary);
}

.nadminuserprofilitemfull-child-info-div {
    display: flex;
    align-items: center;
    min-width: 180px;
}

/* Style des icônes */
.nadminuserprofilitemfull-child-icon {
    width: 24px;
    height: 24px;
    margin-right: 16px;
    filter: var(--n-icon-filter);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.nadminuserprofilitemfull-child-info-wrapper:hover .nadminuserprofilitemfull-child-icon {
    opacity: 1;
    transform: scale(1.1);
}

/* Style des titres */
.nadminuserprofilitemfull-child-email-title,
.nadminuserprofilitemfull-child-user-title {
    color: var(--n-text-muted);
    font-size: 0.95em;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Style des valeurs */
.nadminuserprofilitemfull-child-email,
.nadminuserprofilitemfull-child-username {
    color: var(--n-text);
    font-size: 1.05em;
    font-weight: 500;
    flex: 1;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 2px solid var(--n-border);
    transition: all 0.3s ease;
}

/* Effet de brillance au survol */
.nadminuserprofilitemfull-child-info-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.8s ease;
}

.nadminuserprofilitemfull-child-info-wrapper:hover::after {
    left: 100%;
}

/* Animation d'entrée */
.nadminuserprofilitemfull-child-info-wrapper {
    opacity: 0;
    animation: nadminuserprofilitemfull-slideInInfo 0.5s ease forwards;
    animation-delay: calc(var(--item-index, 0) * 0.1s);
}

@keyframes nadminuserprofilitemfull-slideInInfo {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .nadminuserprofilitemfull-child-info-wrapper {
        padding: 16px 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .nadminuserprofilitemfull-child-info-div {
        min-width: 100%;
        margin-bottom: 8px;
    }

    .nadminuserprofilitemfull-child-email,
    .nadminuserprofilitemfull-child-username {
        margin-left: 40px;
        padding-left: 0;
        border-left: none;
        position: relative;
    }

    .nadminuserprofilitemfull-child-email::before,
    .nadminuserprofilitemfull-child-username::before {
        content: '';
        position: absolute;
        left: -20px;
        top: 50%;
        width: 12px;
        height: 2px;
        background: var(--n-border);
        transform: translateY(-50%);
    }
}

.nadminuserprofilitemfull-child-additionalinfo{
    padding: 24px;
}

/* Animation d'apparition */
@keyframes nadminuserprofilitemfull-fadein {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nadminuserprofilitemfull-inner-wrapper {
    animation: nadminuserprofilitemfull-fadein 0.5s ease-out forwards;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nadminuserprofilitemfull-inner-wrapper {
        width: calc(100% - 32px);
        margin: 16px auto;
    }

    .nadminuserprofilitemfull-child-header {
        min-height: 220px;
    }

    .nadminuserprofilitemfull-child-bgimage {
        height: 160px;
    }

    .nadminuserprofilitemfull-child-photo-wrapper {
        left: 32px;
        width: 100px;
        height: 100px;
        bottom: 10px;
    }

    .nadminuserprofilitemfull-child-maininfo {
        padding: 64px 24px 24px;
    }

    .nadminuserprofilitemfull-child-nom,
    .nadminuserprofilitemfull-child-prenom {
        font-size: 24px;
    }
}

/* Conteneur principal des boutons */
.nadminuserprofilitemfull-child-actions-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(1rem, 3vw, 1.5rem);
    background: var(--n-bg-secondary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--n-text) 5%, transparent);
    border-top: 1px solid var(--n-border);
}

.nadminuserprofilitemfull-child-logout-button {
    padding: 10px;
    background-color: var(--n-warning);
    color: var(--n-text) !important;
    cursor: pointer;
}

.nadminuserprofilitemfull-child-logout-button:hover {
    color: var(--n-text-inverse) !important;
}

.nadminuserprofilitemfull-child-logout-button:hover img {
    filter: invert(1);
}

.nadminuserprofilitemfull-child-modify-button {
    padding: 10px;
    color: var(--n-text-inverse);
    cursor: pointer;
}

.nadminuserprofilitemfull-child-modify-button img {
    filter: invert(1);
}

.nadminuserprofilitemfull-child-button-pop {
    background: var(--n-bg);
    color: var(--n-text);
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1rem, 2.5vw, 1.25rem);
    font-size: clamp(0.75rem, 2vw, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
    text-decoration: none;
    width: 100%;
}

.nadminuserprofilitemfull-child-button-pop:hover {
    background: var(--n-bg-secondary);
    transform: translateY(-2px);
}

.nadminuserprofilitemfull-btn-logout {
    background: color-mix(in srgb, var(--n-error) 10%, transparent);
    color: var(--n-text);
    border: 2px solid var(--n-error);
    border-radius: 0.75rem;
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1rem, 2.5vw, 1.25rem);
    font-size: clamp(0.75rem, 2vw, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
    text-decoration: none;
}

.nadminuserprofilitemfull-btn-logout:hover {
    background: var(--n-error);
    color: var(--n-text-inverse);
    border-color: var(--n-error);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--n-error) 30%, transparent);
}

.nadminuserprofilitemfull-btn-logout img {
    filter: brightness(0) invert(0);
    transition: filter 0.3s ease;
}

.nadminuserprofilitemfull-btn-logout:hover img {
    filter: brightness(0) invert(1);
}
/**
 * @file NAdminUserNotificationFrame.css
 *
 * @requires NFrameTag.css
 */

 .nadminusernotificationframe {
    width: 100%;
    padding-top: 65px;
    padding-bottom: 10px;
}
/**
 * @file NAdminUserNotificationItem.css
 * 
 * @requires NItemTag.css
 */

.nadminusernotificationitem {
    background: var(--n-bg);
    border-radius: 12px;
    padding: 4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 1px solid var(--n-border);
    text-decoration: none;
    display: block;
    position: relative;
    margin-bottom: 1rem;
}

.nadminusernotificationitem:hover {
    background: var(--n-bg-secondary);
    transform: translateX(4px);
    box-shadow: 0 4px 12px var(--n-shadow);
}

/* Structure de la table */
.nadminusernotificationitem-child-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* Cellule de l'image */
.nadminusernotificationitem-child-image-td {
    width: 64px;
    padding: 8px;
    vertical-align: top;
}

/* Style de l'image */
.nadminusernotificationitem-child-image {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    transition: transform 0.3s ease;
    border: 2px solid var(--n-border);
    background: var(--n-bg-secondary);
}

.nadminusernotificationitem:hover .nadminusernotificationitem-child-image {
    transform: scale(1.1);
    border-color: var(--n-primary);
}

/* Cellule du contenu */
.nadminusernotificationitem-child-nom-td {
    padding: 12px 16px;
    vertical-align: top;
}

/* Style du titre */
.nadminusernotificationitem-child-titre {
    font-size: 1rem;
    font-weight: 600;
    color: var(--n-text);
    margin-bottom: 4px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Style du message */
.nadminusernotificationitem-child-message {
    font-size: 0.9rem;
    color: var(--n-text-muted);
    margin-bottom: 8px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

/* Style de la date */
.nadminusernotificationitem-child-date {
    font-size: 0.8rem;
    color: var(--n-text-muted);
    opacity: 0.8;
    font-weight: 500;
}

/* État non lu */
.nadminusernotificationitem.unread {
    background: linear-gradient(
        to right,
        var(--n-primary-light) 0%,
        var(--n-bg) 2%
    );
}

.nadminusernotificationitem.unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background: var(--n-primary);
    border-radius: 0 2px 2px 0;
}

/* Animation d'apparition */
@keyframes nadminusernotificationitem-slidein {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.nadminusernotificationitem {
    animation: nadminusernotificationitem-slidein 0.3s ease-out forwards;
}

/* État de chargement */
.nadminusernotificationitem.loading {
    pointer-events: none;
    position: relative;
    overflow: hidden;
}

.nadminusernotificationitem.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--n-bg-secondary) 50%,
        transparent 100%
    );
    animation: nadminusernotificationitem-shimmer 1.5s infinite linear;
    transform: translateX(-100%);
}

@keyframes nadminusernotificationitem-shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .nadminusernotificationitem-child-image-td {
        width: 56px;
        padding: 8px;
    }

    .nadminusernotificationitem-child-image {
        width: 40px;
        height: 40px;
    }

    .nadminusernotificationitem-child-nom-td {
        padding: 8px 12px;
    }

    .nadminusernotificationitem-child-titre {
        font-size: 0.95rem;
    }

    .nadminusernotificationitem-child-message {
        font-size: 0.85rem;
    }
}

@media screen and (max-width: 480px) {
    .nadminusernotificationitem-child-titre {
        font-size: 0.8rem;
    }

    .nadminusernotificationitem-child-message {
        font-size: 0.8rem;
    }
}

/* Animation de suppression */
@keyframes nadminusernotificationitem-fadeout {
    to {
        opacity: 0;
        transform: translateX(100%);
        height: 0;
        margin: 0;
        padding: 0;
    }
}

.nadminusernotificationitem.removing {
    animation: nadminusernotificationitem-fadeout 0.3s ease-out forwards;
}

/* État sélectionné - overlay sombre */
.nadminusernotificationitem.selected {
    position: relative;
    border-color: var(--n-primary);
}

/* Overlay sombre transparent */
.nadminusernotificationitem.selected::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    z-index: 1;
}

/* Cercle avec la coche */
.nadminusernotificationitem.selected::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-color: var(--n-primary);
    border-radius: 50%;
    z-index: 2;
    /* Création de la coche */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
    background-size: 16px;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    animation: nadminusernotificationitem-checkmarkAppear 0.2s ease-out;
}

/* Animation d'apparition de la coche */
@keyframes nadminusernotificationitem-checkmarkAppear {
    from {
        transform: translateY(-50%) scale(0);
        opacity: 0;
    }
    to {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }
}

/* Assurer que le contenu reste au-dessus de l'overlay */
.nadminusernotificationitem.selected .nadminusernotificationitem-child-table {
    position: relative;
    z-index: 2;
}

/* Mode sombre */
.ntheme-dark .nadminusernotificationitem.selected::before {
    background-color: rgba(255, 255, 255, 0.05);
}
/**
 * @file NAdminUserNotificationItemFull.css
 *
 * @requires NItemTag.css
 */

 .nadminusernotificationitemfull {
    width: calc(100% - 20px);
    margin: auto;
}

 .nadminusernotificationitemfull-inner-wrapper {
    max-width: 800px;
    width: calc(100% - 48px);
    margin: 32px auto;
    padding: 24px;
    background: var(--n-bg);
    box-shadow: 0 4px 12px var(--n-shadow);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--n-border);
}

.nadminusernotificationitemfull-inner-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--n-shadow);
}

.nadminusernotificationitemfull-child-titre {
    font-size: 24px;
    font-weight: 600;
    color: var(--n-text);
    margin: 0;
    line-height: 1.4;
    position: relative;
    padding-bottom: 16px;
}

.nadminusernotificationitemfull-child-titre::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 3px;
    background: var(--n-primary);
    border-radius: 2px;
}

.nadminusernotificationitemfull-child-conteneur {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--n-border);
}

.nadminusernotificationitemfull-child-date {
    font-size: 14px;
    color: var(--n-text-muted);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nadminusernotificationitemfull-child-date::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--n-primary);
    border-radius: 50%;
    display: inline-block;
}

.nadminusernotificationitemfull-child-delete {
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.nadminusernotificationitemfull-child-delete:hover {
    background: var(--n-error-light);
}

.nadminusernotificationitemfull-child-delete.nbutton-type-icon .nbutton-child-icon {
    width: 18px;
    height: 20px;
    transition: transform 0.3s ease;
    filter: var(--n-icon-filter);
}

.nadminusernotificationitemfull-child-delete:hover .nbutton-child-icon {
    transform: rotate(90deg);
    filter: var(--n-error-filter);
}

.nadminusernotificationitemfull-child-message {
    font-size: 16px;
    color: var(--n-text);
    line-height: 1.6;
    margin: 16px 0;
    text-align: justify;
}

.nadminusernotificationitemfull-child-image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--n-shadow);
    transition: transform 0.3s ease;
}

.nadminusernotificationitemfull-child-image:hover {
    transform: scale(1.02);
}

.nadminusernotificationitemfull-child-plusinfos {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    background: var(--n-primary);
    color: var(--n-text-inverse);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
    margin-top: 16px;
    width: fit-content;
}

.nadminusernotificationitemfull-child-plusinfos:hover {
    background: var(--n-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--n-shadow);
}

.nadminusernotificationitemfull-child-plusinfos:active {
    transform: translateY(0);
}

/* Animation d'apparition */
@keyframes nadminusernotificationitemfull-fadein {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nadminusernotificationitemfull-inner-wrapper {
    animation: nadminusernotificationitemfull-fadein 0.4s ease-out forwards;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nadminusernotificationitemfull-inner-wrapper {
        width: calc(100% - 40px);
        margin: 16px auto;
        padding: 20px;
    }

    .nadminusernotificationitemfull-child-titre {
        font-size: 20px;
    }

    .nadminusernotificationitemfull-child-message {
        font-size: 15px;
    }

    .nadminusernotificationitemfull-child-conteneur {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .nadminusernotificationitemfull-child-plusinfos {
        width: calc(100% - 48px);
        justify-content: center;
    }
}
/**
 * @file Theme.css
 * Thème basé sur l'identité visuelle PIQS
 *
 * @requires none
 */

 .ntheme-light {
    /* Couleurs principales */
    --n-primary: rgb(0, 123, 255);    /* Bleu PIQS - couleur dominante */
    --n-secondary: rgb(255, 193, 7);   /* Jaune doré pour les accents */
    --n-accent: rgb(0, 86, 179);      /* Bleu plus foncé pour les accents */

    /* Textes */
    --n-text: rgb(33, 37, 41);          /* Texte principal presque noir */
    --n-text-inverse: rgb(255, 255, 255);  /* Texte sur fond coloré */
    --n-text-muted: rgb(108, 117, 125);    /* Texte secondaire */

    /* Arrière-plans */
    --n-bg: rgb(255, 255, 255);            /* Fond principal blanc */
    --n-bg-secondary: rgb(248, 249, 250);  /* Fond secondaire très léger */

    /* Bordures */
    --n-border: rgb(233, 236, 239);        /* Bordures subtiles */

    /* États */
    --n-hover: rgb(0, 86, 179);         /* Bleu plus foncé au survol */
    --n-active: rgb(0, 56, 117);        /* Bleu encore plus foncé pour l'état actif */
    --n-disabled: rgb(226, 230, 234);      /* Gris clair pour éléments désactivés */

    /* Couleurs de notification */
    --n-success: rgb(40, 167, 69);       /* Vert pour succès */
    --n-error: rgb(220, 53, 69);         /* Rouge pour erreurs */
    --n-warning: rgb(255, 193, 7);       /* Jaune doré pour avertissements */
    --n-info: rgb(0, 123, 255);          /* Bleu PIQS pour informations */

    /* Ombres */
    --n-shadow: rgba(0, 123, 255, 0.15);
}

.ntheme-dark {
    /* Couleurs principales */
    --n-primary: rgb(64, 158, 255);       /* Bleu PIQS plus lumineux */
    --n-secondary: rgb(255, 213, 79);     /* Jaune doré plus lumineux */
    --n-accent: rgb(100, 181, 255);      /* Bleu vif pour les accents */

    /* Textes */
    --n-text: rgb(248, 249, 250);          /* Texte principal clair */
    --n-text-inverse: rgb(33, 37, 41);  /* Texte sur fond clair */
    --n-text-muted: rgb(173, 181, 189);    /* Texte secondaire */

    /* Arrière-plans */
    --n-bg: rgb(33, 37, 41);            /* Fond principal sombre */
    --n-bg-secondary: rgb(52, 58, 64);  /* Fond secondaire */

    /* Bordures */
    --n-border: rgb(73, 80, 87);        /* Bordures plus visibles */

    /* États */
    --n-hover: rgb(100, 181, 255);      /* Bleu plus lumineux au survol */
    --n-active: rgb(130, 200, 255);     /* Bleu encore plus lumineux pour l'état actif */
    --n-disabled: rgb(73, 80, 87);      /* Gris foncé pour éléments désactivés */

    /* Couleurs de notification */
    --n-success: rgb(64, 158, 255);     /* Bleu PIQS adapté au mode sombre */
    --n-error: rgb(255, 77, 77);         /* Rouge plus lumineux */
    --n-warning: rgb(255, 213, 79);     /* Jaune doré adapté */
    --n-info: rgb(100, 181, 255);       /* Bleu vif pour informations */

    /* Ombres */
    --n-shadow: rgba(64, 158, 255, 0.2);
}
/**
 * @file NTheme.css
 * @description Fichier de définition des variables CSS pour le système de thème NLib
 * 
 * @requires none
 * 
 * @example
 * // Utilisation des variables CSS
 * .element {
 *   background-color: var(--n-primary);
 *   color: var(--n-text);
 * }
 * 
 * @note Les variables CSS définies ici sont utilisées dans tous les composants NLib
 * @note Les valeurs peuvent être surchargées pour personnaliser le thème
 */
 
/* Variables CSS pour le système de thème NLib 
   -------------------------------------------------- */
   
/* Couleurs principales du thème */
/* Définissent la palette de base de l'application */
/* Valeurs par défaut appliquées via var(--n-{nom}) */
/* Peuvent être surchargées pour personnalisation */

/* Couleurs de texte */
/* Contrôlent les couleurs typographiques principales */
/* Inclut les états inversés et atténués */

/* Arrière-plans */
/* Définissent les couches d'arrière-plan principales et secondaires */
/* Utilisées pour le fond de page et les conteneurs imbriqués */

/* Bordures */
/* Paramètres des contours des éléments UI */
/* Cohérence visuelle entre les composants */

/* États interactifs */
/* Couleurs pour les états hover/active/disabled */
/* Garantissent la cohérence des interactions utilisateur */

/* Couleurs de feedback */
/* Système visuel pour les états spéciaux */
/* Alertes, notifications et indicateurs d'état */

/* Ombres */
/* Paramètres d'ombrage global */
/* Utilisé pour les élévations et effets de profondeur */
:root {
    /* Couleurs principales */
    --n-primary: rgb(0, 123, 255);
    --n-secondary: rgb(108, 117, 125);
    --n-accent: rgb(255, 152, 0);
    
    /* Couleurs de texte */
    --n-text: rgb(0, 0, 0);
    --n-text-inverse: rgb(255, 255, 255);
    --n-text-muted: rgb(108, 117, 125);
    
    /* Arrière-plans */
    --n-bg: rgb(255, 255, 255);
    --n-bg-secondary: rgb(248, 249, 250);
    
    /* Bordures */
    --n-border: rgb(222, 226, 230);
    
    /* États */
    --n-hover: rgb(0, 86, 179);
    --n-active: rgb(0, 64, 128);
    --n-disabled: rgb(233, 236, 239);
    
    /* Feedback */
    --n-success: rgb(40, 167, 69);
    --n-error: rgb(220, 53, 69);
    --n-warning: rgb(255, 193, 7);
    --n-info: rgb(23, 162, 184);
    
    /* Ombres */
    --n-shadow: rgba(0, 0, 0, 0.15);
}
/**
 * @file NTag.css
 * @description Styles CSS pour le composant NTag
 * 
 * Ce fichier contient les styles de base et les variantes pour le composant tag personnalisé.
 * Il définit les styles pour les différents états du tag (normal, hover, active, etc.)
 * ainsi que les styles spécifiques aux différents types de tags (texte, icône, combinaisons).
 * 
 * Les styles utilisent des variables CSS personnalisées pour une meilleure maintenabilité et
 * cohérence avec le thème global de l'application.
 *
 * @requires NTheme.css
 * 
 * @see NTag.js
 * 
 */
/**
 * @file NTextTag.css
 *
 * @requires NTag.css
 */
/**
 * @file NMainTag.css
 *
 * @requires NTheme.css
 * @requires NTag.css
 * @requires NTextTag.css
 */
 html{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    word-break: break-word;
    background-color: var(--n-bg);
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: fill-available;
}

.nmaintag-chidld-framecontainer{
    position: relative;
    width: 100%;
}

/* Style pour le message de succès */
.nmain-child-message {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 16px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 20px var(--n-shadow);
    z-index: 100000001;
    opacity: 0;
}

.nmain-child-message-showing {
    animation: nmain-message-slideUp 0.5s ease forwards;
}

.nmain-child-message-hidding {
    animation: nmain-message-fadeOut 0.5s ease forwards;
}

.nmain-child-message-info {
    background: rgba(0, 0, 0, 0.8);
    color: white;
}

.nmain-child-message-success {
    background: var(--n-success);
    color: var(--n-text-inverse);
}

.nmain-child-message-error {
    background: var(--n-error);
    color: var(--n-text-inverse);
}

.nmain-child-message-warning {
    background: var(--n-warning);
    color: var(--n-text-inverse);
}

/* Icône de succès */
.nmain-child-message-icon {
    width: 24px;
    height: 24px;
    position: relative;
}

.nmain-child-message-icon-info::before,
.nmain-child-message-icon-info::after {
    content: 'ℹ';
    position: absolute;
    left: -10px;
    top: -15px;
    font-size: 2.5rem;
    color: var(--n-text-inverse);
}

.nmain-child-message-icon-success::before,
.nmain-child-message-icon-success::after {
    content: '✓';
    position: absolute;
    left: -10px;
    top: -15px;
    font-size: 2.5rem;
    color: var(--n-text-inverse);
}

.nmain-child-message-icon-error::before,
.nmain-child-message-icon-error::after {
    content: '✗';
    position: absolute;
    left: -10px;
    top: -15px;
    font-size: 2.5rem;
    color: var(--n-text-inverse);
}

.nmain-child-message-icon-warning::before,
.nmain-child-message-icon-warning::after {
    content: '⚠';
    position: absolute;
    left: -5px;
    top: -11px;
    font-size: 2rem;
    color: var(--n-text-inverse);
}

/* Texte du message */
.nmain-child-message-text {
    font-size: 16px;
    font-weight: 500;
}

/* Animations */
@keyframes nmain-message-slideUp {
    0% {
        transform: translateX(-50%) translateY(100px);
        opacity: 0;
    }
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes nmain-message-fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .nmain-child-message {
        width: calc(100% - 80px);
        margin: auto;
        bottom: 16px;
    }
}

.nmain-progress-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000000;
}

.nmain-progress-container {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.nmain-progress-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Style pour le progress déterminé */
.nmain-progress-circle:not(.infinite) {
    background: conic-gradient(from 0deg at center,
        var(--n-primary) var(--progress),
        #e0e0e0 var(--progress)
    );
    animation: nmain-progress-spin 1.5s ease-in-out infinite;
}

.nmain-progress-circle::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: white;
}

/* Style pour le progress infini */
.nmain-progress-circle.infinite {
    border: 4px solid #e0e0e0;
    border-top: 4px solid var(--n-primary);
    animation: nmain-progress-spin 1s linear infinite;
}

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

.nmain-progress-text-container {
    text-align: center;
}

.nmain-progress-percentage {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--n-primary);
    margin-bottom: 5px;
}

.nmain-progress-description {
    font-size: 1em;
    color: #666;
}

/* ───── Pull to refresh ───── */
.nmain-pull-to-refresh-indicator {
    position: fixed;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(40px, 8vw, 52px);
    height: clamp(40px, 8vw, 52px);
    border-radius: 50%;
    background-color: var(--n-bg);
    box-shadow: 0 2px 12px var(--n-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000002;
    transition: top 0.15s ease;
}

.nmain-pull-to-refresh-indicator::before {
    content: '';
    width: clamp(18px, 4vw, 26px);
    height: clamp(18px, 4vw, 26px);
    border-radius: 50%;
    border: 3px solid var(--n-border);
    border-top-color: var(--n-primary);
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.nmain-pull-to-refresh-indicator-loading::before {
    opacity: 1;
    animation: nmain-ptr-spin 0.75s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .nmain-pull-to-refresh-indicator,
    .nmain-pull-to-refresh-indicator::before {
        transition: none;
        animation: none;
    }
}
/**
 * @file NFrameTag.css
 * @description Styles CSS pour le composant NFrameTag
 * 
 * Ce fichier contient les styles de base et les variantes pour le composant cadre personnalisé.
 * Il définit les styles pour les différents états du cadre (normal, hover, active, etc.)
 * ainsi que les styles spécifiques aux différents types de cadres (texte, icône, combinaisons).
 * 
 * Les styles utilisent des variables CSS personnalisées pour une meilleure maintenabilité et
 * cohérence avec le thème global de l'application.
 *
 * @requires NTag.css
 * 
 * @see NFrameTag.js
 * 
 * @example
 * // Utilisation des classes CSS
 * <div class="nframe-bring-to-front-animation">
 *   <div class="nframe-child-content">
 *     Contenu du cadre
 *   </div>
 * </div>
 * 
 * @note Les variables CSS utilisées sont définies dans le thème global
 * @note Les transitions sont configurées pour une expérience utilisateur fluide
 */
 
 /* Style 1 : Fade avec rotation */
@keyframes nframeBringToFront {
    0% { 
        transform: rotate(-5deg) scale(0.95);
    }
    100% { 
        transform: rotate(0deg) scale(1);
    }
}

@keyframes nframeSendToBack {
    0% { 
        transform: rotate(0deg) scale(1);
    }
    100% { 
        transform: rotate(5deg) scale(0.95);
    }
}

/* Classes d'animation */
.nframe-animation-bring-to-front {
    animation: nframeBringToFront 0.3s ease-out forwards;
}

.nframe-animation-send-to-back {
    animation: nframeSendToBack 0.3s ease-in forwards;
}

.nframe-float-frame{
    position: fixed;
    top: 0;
    left: 0;
}

.nframe-no-float-frame{
    position: static;
    top: 0;
    left: 0;
}

.nframe-child-divtextzone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    margin: 15px auto;
    animation: nframe-fadeIn 0.8s ease-out;
    text-align: center;
    position: relative;
    overflow: hidden;
}
    
/* Icône d'alerte */
.nframe-child-alerticon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
    
.nframe-child-alerticon.ntheme-dark {
    filter: brightness(0) invert(1);
}
    
/* Texte d'alerte */
.nframe-child-alerttext {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--n-text);
    margin: 0;
    font-weight: 500;
}
    
/* Responsive design */
@media (max-width: 768px) {
    .nframe-child-divparent {
        padding: 15px;
        padding-top: 0;
    }

    .nframe-child-pagetitle {
        font-size: 1.2rem;
    }

    .nframe-child-alerticon {
      width: 60px;
      height: 60px;
    }
      
    .nframe-child-alerttext {
        font-size: 1rem;
    }
}

/**
 * @file NButtonTag.css
 * @description Styles CSS pour le composant NButtonTag
 * 
 * Ce fichier contient les styles de base et les variantes pour le composant bouton personnalisé.
 * Il définit les styles pour les différents états du bouton (normal, hover, active, etc.)
 * ainsi que les styles spécifiques aux différents types de boutons (texte, icône, combinaisons).
 * 
 * Les styles utilisent des variables CSS personnalisées pour une meilleure maintenabilité et
 * cohérence avec le thème global de l'application.
 *
 * @requires NTag.css
 * @requires NTextTag.css
 * @requires NImageTag.css
 * 
 * @see NButtonTag.js
 * 
 * @example
 * // Utilisation des classes CSS
 * <button class="nbutton-style-radius nbutton-type-icon">
 *   <img src="icon.png" class="nbutton-child-icon">
 * </button>
 * 
 * @note Les variables CSS utilisées sont définies dans le thème global
 * @note Les transitions sont configurées pour une expérience utilisateur fluide
 */

 /* style radius */
.nbutton-style-radius{
    border-radius: 5px;
    background-color: var(--n-primary);
    color: var(--n-text);
    font-size: 100%;
    padding: 5px;
    border: 1px solid var(--n-border);
    
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.nbutton-style-radius:hover {
    background-color: var(--n-hover);
    box-shadow: 0 3px 6px var(--n-shadow);
    transform: translateY(-1px);
}

.nbutton-style-radius:active {
    background-color: var(--n-active);
    box-shadow: inset 0 2px 4px var(--n-shadow);
    transform: translateY(0);
}

.nbutton-style-radius:focus {
    outline: 2px solid var(--n-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(var(--n-accent), 0.25);
}

.nbutton-style-radius:disabled {
    background-color: var(--n-disabled);
    color: var(--n-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 0.3s ease, background-color 0s, box-shadow 0s;
}

/* Styles spécifiques aux différents types de boutons */
:where(.nbutton-style-radius.nbutton-type-icon) {
    /* Bouton icône seul - forme carrée */
    width: 40px;
    height: 40px;
}

:where(.nbutton-style-radius.nbutton-type-icon) .nbutton-child-icon {
    margin: 0;
    width: 80%;
}

:where(.nbutton-style-radius.nbutton-type-text-icon-left) .nbutton-child-icon {
    order: 1;
    width: 25px;
    height: 25px;
}

:where(.nbutton-style-radius.nbutton-type-text-icon-left) .nbutton-child-text {
    order: 2;
}

:where(.nbutton-style-radius.nbutton-type-text-icon-right) .nbutton-child-icon {
    width: 25px;
    height: 25px;
}

:where(.nbutton-style-radius.nbutton-type-text-icon-right) .nbutton-child-text {
    order: 1;
}

:where(.nbutton-style-radius.nbutton-type-text-icon-top) .nbutton-child-icon {
    width: 25px;
    height: 25px;
}

:where(.nbutton-style-radius.nbutton-type-text-icon-top) .nbutton-child-text {
    order: 2;
}

:where(.nbutton-style-radius.nbutton-type-text-icon-bottom) .nbutton-child-icon {
    width: 25px;
    height: 25px;
}

:where(.nbutton-style-radius.nbutton-type-text-icon-bottom) .nbutton-child-text {
    order: 1;
}

/* style none */
.nbutton-style-none{
    border: none;
    outline: none;
}

:where(.nbutton-style-none.nbutton-type-icon) {
    /* Bouton icône seul - forme carrée */
    width: 40px;
    height: 40px;
}

:where(.nbutton-style-none.nbutton-type-icon) .nbutton-child-icon {
    margin: 0;
    width: 80%;
}

:where(.nbutton-style-none.nbutton-type-text-icon-left) .nbutton-child-icon {
    order: 1;
    width: 25px;
    height: 25px;
}

:where(.nbutton-style-none.nbutton-type-text-icon-left) .nbutton-child-text {
    order: 2;
}

:where(.nbutton-style-none.nbutton-type-text-icon-right) .nbutton-child-icon {
    width: 25px;
    height: 25px;
}

:where(.nbutton-style-none.nbutton-type-text-icon-right) .nbutton-child-text {
    order: 1;
}

:where(.nbutton-style-none.nbutton-type-text-icon-top) .nbutton-child-icon {
    width: 25px;
    height: 25px;
}

:where(.nbutton-style-none.nbutton-type-text-icon-top) .nbutton-child-text {
    order: 2;
}

:where(.nbutton-style-none.nbutton-type-text-icon-bottom) .nbutton-child-icon {
    width: 25px;
    height: 25px;
}

:where(.nbutton-style-none.nbutton-type-text-icon-bottom) .nbutton-child-text {
    order: 1;
}
/**
 * @file NDialogFrameTag.css
 *
 * @requires NFrameTag.css
 * @requires NTextTag.css
 * @requires NButtonTag.css
 * 
 */

/* Style pour le conteneur principal du dialogue qui couvre tout l'écran */
.ndialogframe {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Overlay semi-transparent */
    backdrop-filter: blur(5px); /* Ajoute un flou de fond */
    z-index: 99990;
    overflow-y: auto;
}

.ndialogframe-child-table-parent {
    width: 100%;
    min-height: 100%;
}

.ndialogframe-child-td-parent {
    width: 100%;
    height: 100%;
    padding-left: 5%;
    padding-right: 5%;
    vertical-align: middle;
}

/* Style pour la table principale du dialogue */
.ndialogframe-child-table {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-width: 300px;
    max-width: 800px;
    margin: 15px auto;
    border-collapse: collapse;
    border-spacing: 0;
}

.ndialogframe-size-max .ndialogframe-child-table {
    width: 100%;
}

.ndialogframe-child-header-back-button-td {
    text-align: left;
    vertical-align: top;
    min-width: 50px;
    width: 50px;
    max-width: 50px;
    border-top-left-radius: 8px;
    background-color: var(--n-primary);
}

.ndialogframe-child-header-title-td {
    padding: 12px 16px;
    font-size: 1.2em;
    font-weight: bold;
    text-align: left;
    vertical-align: middle;
    border-top-right-radius: 8px;
    background-color: var(--n-primary);
}

.ndialogframe-size-max .ndialogframe-child-header-title-td {
    width: 100%;
}

.ndialogframe-child-header-back-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin: 5px;
}

/* Style pour le corps du dialogue */
.ndialogframe-child-body-td {
    padding: 16px;
}

.ndialogframe-size-max .ndialogframe-child-body-td {
    width: 100%;
}

.ndialogframe-child-body {
    min-height: 50px; /* Hauteur minimale pour le contenu */
}

.ndialogframe-size-max .ndialogframe-child-body {
    width: 100%;
}

.ndialogframe-child-footer-back-button-td {
    text-align: left;
    vertical-align: bottom;
    min-width: 50px;
    width: 50px;
    max-width: 50px;
    border-bottom-left-radius: 8px;
    background-color: var(--n-primary);
}

.ndialogframe-child-footer-title-td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: middle;
    border-bottom-right-radius: 8px;
    background-color: var(--n-primary);
}

.ndialogframe-size-max .ndialogframe-child-footer-title-td {
    width: 100%;
}

.ndialogframe-child-footer-back-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin: 5px;
}

/* Animation d'entrée pour le dialogue */
@keyframes dialogFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ndialogframe-child-table {
    animation: dialogFadeIn 0.3s ease-out;
}

/* Style pour les boutons d'icône */
.ndialogframe-child-header-back-button img,
.ndialogframe-child-footer-back-button img {
    width: 24px;
    height: 24px;
    opacity: 0.7;
    transition: opacity 0.2s;
    filter: invert(1);
}

.ndialogframe-child-header-back-button:hover img,
.ndialogframe-child-footer-back-button:hover img {
    opacity: 1;
}

/* Style pour le texte des titres */
.ndialogframe-child-header-title,
.ndialogframe-child-footer-title {
    color: var(--n-bg);
    margin: 0;
}
/**
 * @file NAlertFrameTag.css
 *
 * @requires NDialogFrameTag.css
 * @requires NTextTag.css
 * @requires NButtonTag.css
 * @requires NTag.css
 */

/* Style pour le message */
.nalertframe-child-message {
    padding: 20px;
    margin-bottom: 20px;
    font-size: 1.1em;
    line-height: 1.5;
    text-align: center;
    color: var(--n-text);
    background-color: var(--n-bg);
    border-radius: 4px;
}

/* Zone des boutons */
.nalertframe-child-div-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    align-items: end;
    gap: 15px;
    padding: 0 20px 20px 20px;
}

/* Style commun pour les boutons */
.nalertframe-child-yes-button,
.nalertframe-child-no-button {
    padding: clamp(0.5rem, 2vw, 1rem) clamp(1rem, 2vw, 2rem);
    border-radius: 6px;
    font-weight: 500;
    font-size: clamp(0.75rem, 2vw, 1rem);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

/* Style pour le bouton Yes/Valider */
.nalertframe-child-yes-button {
    background-color: var(--n-primary);
    color: var(--n-text-inverse);
    border: none;
}

.nalertframe-child-yes-button:hover {
    background-color: var(--n-hover);
    box-shadow: 0 2px 4px var(--n-shadow);
}

.nalertframe-child-yes-button:active {
    background-color: var(--n-active);
}

/* Style pour le bouton No/Annuler */
.nalertframe-child-no-button {
    background-color: var(--n-bg-secondary);
    color: var(--n-text-muted);
    border: 1px solid var(--n-border);
}

.nalertframe-child-no-button:hover {
    background-color: var(--n-disabled);
    color: var(--n-text);
}

/* Styles pour les différents types d'alertes */
.nalertframe[data-alert-type="info"] .nalertframe-child-message {
    color: var(--n-info);
    background-color: color-mix(in srgb, var(--n-info) 10%, var(--n-bg));
    border-left: 4px solid var(--n-info);
}

.nalertframe[data-alert-type="info"] .ndialogframe-child-header-back-button-td,
.nalertframe[data-alert-type="info"] .ndialogframe-child-header-title-td ,
.nalertframe[data-alert-type="info"] .ndialogframe-child-footer-back-button-td ,
.nalertframe[data-alert-type="info"] .ndialogframe-child-footer-title-td {
    background-color: var(--n-info);
}

.nalertframe[data-alert-type="warning"] .nalertframe-child-message {
    color: var(--n-warning);
    background-color: color-mix(in srgb, var(--n-warning) 10%, var(--n-bg));
    border-left: 4px solid var(--n-warning);
}

.nalertframe[data-alert-type="warning"] .ndialogframe-child-header-back-button-td,
.nalertframe[data-alert-type="warning"] .ndialogframe-child-header-title-td ,
.nalertframe[data-alert-type="warning"] .ndialogframe-child-footer-back-button-td ,
.nalertframe[data-alert-type="warning"] .ndialogframe-child-footer-title-td {
    background-color: var(--n-warning);
}

.nalertframe[data-alert-type="error"] .nalertframe-child-message {
    color: var(--n-error);
    background-color: color-mix(in srgb, var(--n-error) 10%, var(--n-bg));
    border-left: 4px solid var(--n-error);
}

.nalertframe[data-alert-type="error"] .ndialogframe-child-header-back-button-td,
.nalertframe[data-alert-type="error"] .ndialogframe-child-header-title-td ,
.nalertframe[data-alert-type="error"] .ndialogframe-child-footer-back-button-td ,
.nalertframe[data-alert-type="error"] .ndialogframe-child-footer-title-td {
    background-color: var(--n-error);
}

.nalertframe[data-alert-type="success"] .nalertframe-child-message {
    color: var(--n-success);
    background-color: color-mix(in srgb, var(--n-success) 10%, var(--n-bg));
    border-left: 4px solid var(--n-success);
}

.nalertframe[data-alert-type="success"] .ndialogframe-child-header-back-button-td,
.nalertframe[data-alert-type="success"] .ndialogframe-child-header-title-td ,
.nalertframe[data-alert-type="success"] .ndialogframe-child-footer-back-button-td ,
.nalertframe[data-alert-type="success"] .ndialogframe-child-footer-title-td {
    background-color: var(--n-success);
}

/* Style pour les icônes dans les boutons */
.nalertframe-child-yes-button img{
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: invert(1);
}

.nalertframe-child-no-button img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: 0.8;
}

/* Animation pour le message */
@keyframes nalertframe-messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nalertframe-child-message {
    animation: nalertframe-messageSlideIn 0.3s ease-out;
}

/* Animation pour les boutons */
@keyframes nalertframe-buttonsFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nalertframe-child-div-buttons {
    animation: nalertframe-buttonsFadeIn 0.3s ease-out 0.1s backwards;
}

/* Media queries pour la responsivité */
@media (max-width: 480px) {
    .nalertframe-child-message {
        font-size: 1em;
        padding: 15px;
    }
}
/**
 * @file NChooseInputFileModeFrame.css
 *
 * @requires NDialogFrameTag.css
 * @requires NTextTag.css
 * @requires NButtonTag.css
 * @requires NTag.css
 */

 /* Grid du menu */
 .nchooseinputfilemodeframe-child-div-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 16px;
    margin: 0 auto;
}

/* Style commun pour tous les boutons */
.nchooseinputfilemodeframe-child-photo,
.nchooseinputfilemodeframe-child-gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--n-bg-secondary);
    border-radius: 16px;
    text-decoration: none;
    color: var(--n-text);
    transition: all 0.3s ease;
    border: 1px solid var(--n-border);
    min-height: 140px;
}

/* Images des boutons */
.nchooseinputfilemodeframe-child-photo.nbutton-type-text-icon-top .nbutton-child-icon,
.nchooseinputfilemodeframe-child-gallery.nbutton-type-text-icon-top .nbutton-child-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

/* Texte des boutons */
.nchooseinputfilemodeframe-child-photo.nbutton-type-text-icon-top .nbutton-child-text,
.nchooseinputfilemodeframe-child-gallery.nbutton-type-text-icon-top .nbutton-child-text {
    font-size: 90%;
    font-weight: bold;
    text-align: center;
}

/* Effets hover */
.nchooseinputfilemodeframe-child-photo:hover,
.nchooseinputfilemodeframe-child-gallery:hover {
    transform: translateY(-4px);
    background: var(--n-bg);
    box-shadow: 0 8px 24px var(--n-shadow);
    border-color: var(--n-primary);
}

/* Effet hover sur les icônes */
.nchooseinputfilemodeframe-child-photo.nbutton-type-text-icon-top:hover .nbutton-child-icon,
.nchooseinputfilemodeframe-child-gallery.nbutton-type-text-icon-top:hover .nbutton-child-icon {
    transform: scale(1.1);
    filter: brightness(0) invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
}

/* Media queries */
@media (max-width: 768px) {
    .nchooseinputfilemodeframe-child-div-buttons {
        gap: 16px;
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .nchooseinputfilemodeframe-child-photo,
    .nchooseinputfilemodeframe-child-gallery {
        padding: 16px;
        min-height: 120px;
    }

    .nchooseinputfilemodeframe-child-photo.nbutton-type-text-icon-top .nbutton-child-text,
    .nchooseinputfilemodeframe-child-gallery.nbutton-type-text-icon-top .nbutton-child-text {
        font-size: 80%;
    }

    .nchooseinputfilemodeframe-child-photo.nbutton-type-text-icon-top .nbutton-child-icon,
    .nchooseinputfilemodeframe-child-gallery.nbutton-type-text-icon-top .nbutton-child-icon {
        width: 45px;
        height: 45px;
        margin-bottom: 8px;
    }
}

/* Animation d'entrée */
@keyframes nchooseinputfilemodeframe-fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nchooseinputfilemodeframe-child-div-buttons {
    animation: nchooseinputfilemodeframe-fadeIn 0.5s ease-out;
}
/**
 * @file NPanelDefineDateTag.css
 * @description Styles pour le composant NPanelDefineDateTag - Calendrier de sélection de date
 * 
 * @requires NTheme.css
 * @requires NButtonTag.css
 * @requires NTag.css
 * 
 * @see NPanelDefineDateTag.js
 */

/* Conteneur principal */
.npaneldefinedatetag {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--n-bg);
    border-radius: 8px;
    border: 1px solid var(--n-border);
    overflow: hidden;
}

/* Conteneur interne */
.npaneldefinedatetag-child-container {
    display: flex;
    flex-direction: column;
    width: calc(100% - 32px);
    padding: 16px;
}

/* En-tête du calendrier */
.npaneldefinedatetag-child-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

/* Boutons de navigation */
.npaneldefinedatetag-child-prevbutton,
.npaneldefinedatetag-child-nextbutton {
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.npaneldefinedatetag-child-prevbutton:hover,
.npaneldefinedatetag-child-nextbutton:hover {
    background-color: var(--n-bg-secondary);
    border-radius: 4px;
}

.npaneldefinedatetag-child-prevbutton:active,
.npaneldefinedatetag-child-nextbutton:active {
    transform: scale(0.95);
}

/* Affichage de la date/mois/année */
.npaneldefinedatetag-child-datedisplay {
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: 110%;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.npaneldefinedatetag-child-datedisplay:hover {
    background-color: var(--n-bg-secondary);
}

/* Grille du calendrier */
.npaneldefinedatetag-child-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

/* En-têtes des jours de la semaine */
.npaneldefinedatetag-child-dayheader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    font-weight: 600;
    font-size: 90%;
    color: var(--n-text-muted);
    text-align: center;
}

/* Cellules de jour */
.npaneldefinedatetag-child-daycell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    min-height: 36px;
}

.npaneldefinedatetag-child-daycell-empty {
    pointer-events: none;
}

.npaneldefinedatetag-child-daycell-button {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 100%;
    transition: all 0.2s ease;
}

.npaneldefinedatetag-child-daycell-button:hover {
    background-color: var(--n-bg-secondary);
}

.npaneldefinedatetag-child-daycell-today {
    font-weight: bold;
    color: var(--n-primary);
    border: 2px solid var(--n-primary);
}

.npaneldefinedatetag-child-daycell-selected {
    background-color: var(--n-primary) !important;
    color: var(--n-bg) !important;
    font-weight: bold;
}

.npaneldefinedatetag-child-daycell-selected:hover {
    background-color: var(--n-primary);
    opacity: 0.9;
}

/* Cellules de mois */
.npaneldefinedatetag-child-monthcell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    min-height: 48px;
}

.npaneldefinedatetag-child-monthcell-button {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 100%;
    transition: all 0.2s ease;
}

.npaneldefinedatetag-child-monthcell-button:hover {
    background-color: var(--n-bg-secondary);
}

.npaneldefinedatetag-child-monthcell-today {
    font-weight: bold;
    color: var(--n-primary);
    border: 2px solid var(--n-primary);
}

/* Grille des mois */
.npaneldefinedatetag-child-monthcell {
    grid-column: span 1;
}

/* Grille des années */
.npaneldefinedatetag-child-yearcell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    min-height: 48px;
}

.npaneldefinedatetag-child-yearcell-button {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 100%;
    transition: all 0.2s ease;
}

.npaneldefinedatetag-child-yearcell-button:hover {
    background-color: var(--n-bg-secondary);
}

.npaneldefinedatetag-child-yearcell-today {
    font-weight: bold;
    color: var(--n-primary);
    border: 2px solid var(--n-primary);
}

/* Responsive */
@media (max-width: 480px) {
    .npaneldefinedatetag-child-container {
        padding: 12px;
        width: calc(100% - 24px);
    }
    
    .npaneldefinedatetag-child-grid {
        gap: 2px;
    }
    
    .npaneldefinedatetag-child-daycell,
    .npaneldefinedatetag-child-monthcell,
    .npaneldefinedatetag-child-yearcell {
        min-height: 32px;
    }
    
    .npaneldefinedatetag-child-dayheader {
        padding: 4px;
        font-size: 80%;
    }
    
    .npaneldefinedatetag-child-datedisplay {
        font-size: 100%;
        padding: 6px 12px;
    }
}

/* Support du thème sombre pour les boutons de navigation */
:where(.npaneldefinedatetag-child-prevbutton .ntheme-dark.nbutton-child-icon),
:where(.npaneldefinedatetag-child-nextbutton .ntheme-dark.nbutton-child-icon) {
    filter: invert(1);
}

/**
 * @file NPanelDefineTimeTag.css
 * @description Styles pour le composant NPanelDefineTimeTag - Sélecteur de temps
 * 
 * @requires NTheme.css
 * @requires NButtonTag.css
 * @requires NTag.css
 * 
 * @see NPanelDefineTimeTag.js
 */

/* Conteneur principal */
.npaneldefinetimetag {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--n-bg);
    border-radius: 8px;
    border: 1px solid var(--n-border);
    overflow: hidden;
}

/* Conteneur interne */
.npaneldefinetimetag-child-container {
    display: flex;
    flex-direction: column;
    width: calc(100% - 32px);
    padding: 16px;
}

/* En-tête du sélecteur */
.npaneldefinetimetag-child-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

/* Labels pour heures, minutes, secondes */
.npaneldefinetimetag-child-labels {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.npaneldefinetimetag-child-hourlabel,
.npaneldefinetimetag-child-minutelabel,
.npaneldefinetimetag-child-secondlabel {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 90%;
    transition: all 0.2s ease;
    min-width: 80px;
}

.npaneldefinetimetag-child-hourlabel:hover,
.npaneldefinetimetag-child-minutelabel:hover,
.npaneldefinetimetag-child-secondlabel:hover {
    background-color: color-mix(in srgb, var(--n-primary) 60%, transparent 40%);
    color: var(--n-text-inverse);
}

.npaneldefinetimetag-child-label-active {
    background-color: var(--n-primary);
    color: var(--n-text-inverse);
}

/* Affichage du temps sélectionné */
.npaneldefinetimetag-child-timedisplay {
    text-align: center;
    font-weight: 700;
    font-size: 140%;
    color: var(--n-text);
    letter-spacing: 2px;
    padding: 12px;
    border: 2px solid var(--n-border);
    border-radius: 8px;
    background-color: var(--n-bg-secondary);
}

/* Grille du sélecteur */
.npaneldefinetimetag-child-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    padding: 8px;
}

/* Styles pour heures */
.npaneldefinetimetag-child-hourcell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    min-height: 48px;
}

.npaneldefinetimetag-child-hourcell-button {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 2px solid var(--n-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 110%;
    font-weight: 600;
    transition: all 0.2s ease;
}

.npaneldefinetimetag-child-hourcell-button:hover {
    background-color: var(--n-bg-secondary);
    border-color: var(--n-primary);
    transform: scale(1.05);
}

.npaneldefinetimetag-child-hourcell-now {
    background-color: var(--n-bg-secondary);
    color: var(--n-primary);
    border-color: var(--n-primary);
}

.npaneldefinetimetag-child-hourcell-selected {
    background-color: var(--n-primary) !important;
    color: var(--n-bg) !important;
    border-color: var(--n-primary);
    font-weight: bold;
}

.npaneldefinetimetag-child-hourcell-selected:hover {
    background-color: var(--n-primary);
    opacity: 0.9;
    transform: scale(1.05);
}

/* Styles pour minutes */
.npaneldefinetimetag-child-minutecell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    min-height: 48px;
}

.npaneldefinetimetag-child-minutecell-button {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 2px solid var(--n-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 110%;
    font-weight: 600;
    transition: all 0.2s ease;
}

.npaneldefinetimetag-child-minutecell-button:hover {
    background-color: var(--n-bg-secondary);
    border-color: var(--n-primary);
    transform: scale(1.05);
}

.npaneldefinetimetag-child-minutecell-now {
    background-color: var(--n-bg-secondary);
    color: var(--n-primary);
    border-color: var(--n-primary);
}

.npaneldefinetimetag-child-minutecell-selected {
    background-color: var(--n-primary) !important;
    color: var(--n-bg) !important;
    border-color: var(--n-primary);
    font-weight: bold;
}

.npaneldefinetimetag-child-minutecell-selected:hover {
    background-color: var(--n-primary);
    opacity: 0.9;
    transform: scale(1.05);
}

/* Styles pour secondes */
.npaneldefinetimetag-child-secondcell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    min-height: 48px;
}

.npaneldefinetimetag-child-secondcell-button {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 2px solid var(--n-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 110%;
    font-weight: 600;
    transition: all 0.2s ease;
}

.npaneldefinetimetag-child-secondcell-button:hover {
    background-color: var(--n-bg-secondary);
    border-color: var(--n-primary);
    transform: scale(1.05);
}

.npaneldefinetimetag-child-secondcell-now {
    background-color: var(--n-bg-secondary);
    color: var(--n-primary);
    border-color: var(--n-primary);
}

.npaneldefinetimetag-child-secondcell-selected {
    background-color: var(--n-primary) !important;
    color: var(--n-bg) !important;
    border-color: var(--n-primary);
    font-weight: bold;
}

.npaneldefinetimetag-child-secondcell-selected:hover {
    background-color: var(--n-primary);
    opacity: 0.9;
    transform: scale(1.05);
}

/* Scrollbar personnalisée */
.npaneldefinetimetag-child-grid::-webkit-scrollbar {
    width: 8px;
}

.npaneldefinetimetag-child-grid::-webkit-scrollbar-track {
    background: var(--n-bg-secondary);
    border-radius: 4px;
}

.npaneldefinetimetag-child-grid::-webkit-scrollbar-thumb {
    background: var(--n-border);
    border-radius: 4px;
}

.npaneldefinetimetag-child-grid::-webkit-scrollbar-thumb:hover {
    background: var(--n-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .npaneldefinetimetag-child-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }
    
    .npaneldefinetimetag-child-hourcell,
    .npaneldefinetimetag-child-minutecell,
    .npaneldefinetimetag-child-secondcell {
        min-height: 44px;
    }
    
    .npaneldefinetimetag-child-timedisplay {
        font-size: 120%;
    }
}

@media (max-width: 480px) {
    .npaneldefinetimetag-child-container {
        padding: 12px;
        width: calc(100% - 24px);
    }
    
    .npaneldefinetimetag-child-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
        max-height: 240px;
    }
    
    .npaneldefinetimetag-child-hourcell,
    .npaneldefinetimetag-child-minutecell,
    .npaneldefinetimetag-child-secondcell {
        min-height: 40px;
    }
    
    .npaneldefinetimetag-child-hourlabel,
    .npaneldefinetimetag-child-minutelabel,
    .npaneldefinetimetag-child-secondlabel {
        padding: 6px 12px;
        font-size: 85%;
        min-width: 70px;
    }
    
    .npaneldefinetimetag-child-timedisplay {
        font-size: 110%;
        padding: 8px;
        letter-spacing: 1px;
    }
    
    .npaneldefinetimetag-child-hourcell-button,
    .npaneldefinetimetag-child-minutecell-button,
    .npaneldefinetimetag-child-secondcell-button {
        font-size: 100%;
    }
}
/**
 * @file NChooserDateTimeFrame.css
 *
 * @requires NDialogFrameTag.css
 * @requires NTextTag.css
 * @requires NButtonTag.css
 * @requires NTag.css
 * @requires NPanelDefineDateTag.css
 * @requires NPanelDefineTimeTag.css
 */

:where(.nchooserdatetimeframe) .ndialogframe-child-table {
    max-width: none;
}

/* Conteneur principal */
.nchooserdatetimeframe-child-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px;
    width: calc(100% - 32px);
}

/* Zone des panels */
.nchooserdatetimeframe-child-panels {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
}

/* Panel de date */
.nchooserdatetimeframe-child-datepanel {
    flex: 1;
    min-width: 0;
}

/* Panel de temps */
.nchooserdatetimeframe-child-timepanel {
    flex: 1;
    min-width: 0;
}

/* Zone d'actions */
.nchooserdatetimeframe-child-actions {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    width: 100%;
}

/* Bouton Définir */
.nchooserdatetimeframe-child-definebutton {
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 8px;
    background-color: var(--n-primary);
    color: var(--n-bg);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nchooserdatetimeframe-child-definebutton:hover {
    background-color: var(--n-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--n-shadow);
}

.nchooserdatetimeframe-child-definebutton:active {
    transform: translateY(0);
}

/* Bouton Annuler */
.nchooserdatetimeframe-child-cancelbutton {
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 8px;
    background-color: var(--n-bg-secondary);
    color: var(--n-text);
    border: 1px solid var(--n-border);
    cursor: pointer;
    transition: all 0.2s ease;
}

.nchooserdatetimeframe-child-cancelbutton:hover {
    background-color: var(--n-bg);
    border-color: var(--n-error);
    color: var(--n-error);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--n-shadow);
}

.nchooserdatetimeframe-child-cancelbutton:active {
    transform: translateY(0);
}

/* Media queries */
@media (max-width: 1024px) {
    .nchooserdatetimeframe-child-container {
        padding: 12px;
        width: calc(100% - 24px);
    }
    
    .nchooserdatetimeframe-child-panels {
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .nchooserdatetimeframe-child-panels {
        flex-direction: column;
        gap: 20px;
    }
    
    .nchooserdatetimeframe-child-actions {
        flex-direction: column;
        gap: 12px;
    }
    
    .nchooserdatetimeframe-child-definebutton,
    .nchooserdatetimeframe-child-cancelbutton {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .nchooserdatetimeframe-child-container {
        padding: 8px;
        width: calc(100% - 16px);
        gap: 16px;
    }
    
    .nchooserdatetimeframe-child-panels {
        gap: 16px;
    }
    
    .nchooserdatetimeframe-child-actions {
        gap: 10px;
    }
    
    .nchooserdatetimeframe-child-definebutton,
    .nchooserdatetimeframe-child-cancelbutton {
        padding: 10px 20px;
        font-size: 90%;
    }
}

/* Support du thème sombre */
:where(.nchooserdatetimeframe-child-definebutton .ntheme-dark.nbutton-child-icon),
:where(.nchooserdatetimeframe-child-cancelbutton .ntheme-dark.nbutton-child-icon) {
    filter: invert(1);
}

/**
 * @file NItemTag.css
 * @description Styles CSS pour le composant NItemTag
 * 
 * @requires NTag.css
 * 
 * @see NItemTag.js
 * 
 */
/**
 * @file NDataListItemTag.css
 * @description Styles CSS pour le composant NDataListItemTag
 * 
 * @requires NItemTag.css
 * @requires NTextTag.css
 * @requires NImageTag.css
 * 
 * @see NDataListItemTag.js
 * 
 */
/* Styles de base pour l'élément de la liste */
.ndatalistitem {
    padding: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--n-border);
    background-color: transparent;
    color: var(--n-text);
}

.ndatalistitem:last-child {
    border-bottom: none;
}

.ndatalistitem:hover {
    background-color: var(--n-bg-secondary);
}

.ndatalistitem.selected {
    background-color: var(--n-primary);
    color: var(--n-text-inverse);
}

/* Table de mise en page */
.ndatalistitem-child-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.ndatalistitem-child-tr {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Cellule pour l'image */
.ndatalistitem-child-td-image {
    width: 40px;
    flex-shrink: 0;
}

/* Style de l'image */
.ndatalistitem-child-image {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    background-color: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
}

/* Cellule pour le titre et le texte */
.ndatalistitem-child-td-title {
    flex-grow: 1;
    min-width: 0;
}

/* Style du titre */
.ndatalistitem-child-title {
    font-size: 100%; /* au lieu de 14px */
    font-weight: 500;
    color: inherit;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Style du texte */
.ndatalistitem-child-text {
    font-size: 85%; /* au lieu de 12px */
    color: var(--n-text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* États des éléments */
.ndatalistitem.disabled {
    background-color: var(--n-disabled);
    cursor: not-allowed;
    opacity: 0.7;
}

.ndatalistitem:focus {
    outline: 2px solid var(--n-primary);
    outline-offset: -2px;
}

/* Animation de sélection */
@keyframes ndatalistitem-itemSelect {
    0% {
        transform: translateX(-5px);
        opacity: 0.8;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.ndatalistitem.selected {
    animation: ndatalistitem-itemSelect 0.2s ease forwards;
}

/* Responsive design */
@media screen and (max-width: 480px) {
    .ndatalistitem-child-td-image {
        width: 32px;
    }
    
    .ndatalistitem-child-image {
        width: 32px;
        height: 32px;
    }
    
    .ndatalistitem-child-title {
        font-size: 90%; /* au lieu de 13px */
    }
    
    .ndatalistitem-child-text {
        font-size: 75%; /* au lieu de 11px */
    }
}
/**
 * @file NInputFileItemTag.css
 * @description Styles CSS pour le composant NInputFileItemTag
 * 
 * @requires NDataListItemTag.css
 * 
 * @see NInputFileItemTag.js
 * 
 */

 .ninputfileitem-child-option-bouton {
    background-color: transparent;
    border: none;
    cursor: pointer;
 }

 .ninputfileitem-child-option-bouton img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: 0.6;
 }

 .ninputfileitem-child-option-bouton:hover {
    background-color: var(--n-shadow);
 }

 .ninputfileitem-child-option-popup {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ninputfileitem-child-option-popup-button {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
}

.ninputfileitem-child-option-popup-button img {
    width: 80%;
    height: auto;
    object-fit: contain;
}

.ninputfileitem-child-option-popup-button:hover {
    background-color: var(--n-bg-secondary);
}

.ninputfileitem-child-option-popup-button:active {
    background-color: var(--n-active);
}
/**
 * @file NDataListTag.css
 * @description Styles CSS pour le composant NDataListTag
 * 
 * @requires NPopup.css
 * 
 * @see NDataListTag.js
 * 
 */
/**
 * @file NInfoTag.css
 * @description Styles pour le composant NInfoTag - Affichage d'informations titre-valeur
 * 
 * @requires NTheme.css
 * 
 * @note Trois types d'affichage disponibles :
 *  - LINE (1) : Titre et valeur sur la même ligne
 *  - LINE_DOUBLE (2) : Titre et valeur sur des lignes séparées
 *  - LINE_EQUAL (3) : Titre et valeur avec largeurs égales
 *  - Avec suffixe _auto : Changement automatique selon la taille d'écran
 */

/* Conteneur principal NInfoTag */
.ninfo {
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 2vw, 0.6rem);
    padding: clamp(0.5rem, 2vw, 0.75rem);
    border-radius: 0.25rem;
    background-color: var(--n-bg);
    border: 1px solid var(--n-border);
    font-family: inherit;
    line-height: 1.4;
}

/* Titre de l'information */
.ninfo-title {
    font-weight: 600;
    color: var(--n-text-muted);
    font-size: clamp(0.875rem, 2vw, 1rem);
    min-width: fit-content;
}

/* Valeur de l'information */
.ninfo-value {
    color: var(--n-text);
    font-size: clamp(0.875rem, 2vw, 1rem);
    word-break: break-word;
}

/* Type 1: Ligne simple (par défaut) */
.ninfo-type-1 {
    flex-direction: row;
    align-items: center;
}

.ninfo-type-1 .ninfo-title {
    color: var(--n-text-muted);
    margin-right: clamp(0.4rem, 2vw, 0.6rem);
}

.ninfo-type-1 .ninfo-value {
    flex: 1;
}

/* Type 2: Ligne double */
.ninfo-type-2 {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.2rem, 2vw, 0.3rem);
}

.ninfo-type-2 .ninfo-title {
    font-size: clamp(0.75rem, 2vw, 0.875rem);
    color: var(--n-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.ninfo-type-2 .ninfo-value {
    font-size: clamp(0.9rem, 2vw, 1.125rem);
    font-weight: 500;
    color: var(--n-text);
}

/* Type 3: Ligne avec égalité */
.ninfo-type-3 {
    flex-direction: row;
    align-items: stretch;
}

.ninfo-type-3 .ninfo-title {
    flex: 1;
    padding: clamp(0.6rem, 2vw, 0.75rem);
    border-right: 1px solid var(--n-border);
    text-align: center;
    font-weight: 600;
    color: var(--n-text-muted);
}

.ninfo-type-3 .ninfo-value {
    flex: 1;
    padding: clamp(0.6rem, 2vw, 0.75rem);
    background-color: var(--n-bg);
    text-align: center;
    font-weight: 500;
}

.ninfo-type-3_auto .ninfo-title,
.ninfo-type-3_auto .ninfo-value {
    padding: clamp(0.5rem, 2vw, 0.625rem);
}

/* Responsive design - UNIQUEMENT pour les types _auto */
@media (max-width: 768px) {
    .ninfo-type-1_auto .ninfo-title {
        margin-right: 0;
    }

    /* Type 1 auto - change en colonne sur mobile */
    .ninfo-type-1_auto {
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(0.2rem, 2vw, 0.3rem);
    }
}

@media (max-width: 480px) {
    /* Type 1 auto - reste en colonne sur très petit écran */
    .ninfo-type-1_auto {
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(0.2rem, 2vw, 0.3rem);
    }
    
    .ninfo-type-1_auto .ninfo-title {
        margin-right: 0;
    }
    
    /* Type 3 auto - peut passer en colonne sur très petit écran */
    .ninfo-type-3_auto {
        flex-direction: column;
        align-items: stretch;
    }
    
    .ninfo-type-3_auto .ninfo-title {
        border-right: none;
        border-bottom: 1px solid var(--n-border);
    }
}
/**
 * @file NPanelTag.css
 * @description Styles CSS pour le composant NPanelTag
 * 
 * @requires NTag.css
 * 
 * @see NPanelTag.js
 * 
 */
/**
 * @file NPopupTag.css
 *
 * @requires NTag.css
 */
 
 /* Styles de base pour le popup */
.npopup {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000000;
    background-color: var(--n-bg);
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--n-shadow);
    scrollbar-width: thin;
    scrollbar-color: var(--n-border) var(--n-bg);
    padding: 0;
    margin: 0;
    border: 1px solid var(--n-border);
    width: 100%;
    height: 100%;
}

/* Personnalisation de la barre de défilement */
.npopup::-webkit-scrollbar {
    width: 6px;
}

.npopup::-webkit-scrollbar-track {
    background: var(--n-bg);
    border-radius: 3px;
}

.npopup::-webkit-scrollbar-thumb {
    background: var(--n-border);
    border-radius: 3px;
}

.npopup::-webkit-scrollbar-thumb:hover {
    background: var(--n-border);
}

/* Animation d'apparition */
.npopup {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.npopup.visible {
    opacity: 1;
    transform: translateY(0);
}
/**
 * @file NEditTag.css
 *
 * @requires NTag.css
 */
/**
 * @file NCheckTag.css
 *
 * @requires NEditTag.css
 */

/**
 * @file NButtonCheckTag.css
 * @description Styles CSS pour le composant NButtonCheckTag
 * 
 * Ce fichier contient les styles de base et les variantes pour le composant bouton personnalisé.
 * Il définit les styles pour les différents états du bouton (normal, hover, active, etc.)
 * ainsi que les styles spécifiques aux différents types de boutons (texte, case à cocher, combinaisons).
 * 
 * Les styles utilisent des variables CSS personnalisées pour une meilleure maintenabilité et
 * cohérence avec le thème global de l'application.
 *
 * @requires NTag.css
 * @requires NTextTag.css
 * @requires NCheckTag.css
 * 
 * @see NButtonCheckTag.js
 * 
 * @example
 * // Utilisation des classes CSS
 * <button class="nbuttoncheck-style-radius nbuttoncheck-type-check-left">
 *   <input type="checkbox" class="nbuttoncheck-child-check">
 *   <label class="nbuttoncheck-child-text">Texte</label>
 * </button>
 * 
 * @note Les variables CSS utilisées sont définies dans le thème global
 * @note Les transitions sont configurées pour une expérience utilisateur fluide
 */

 /* style radius */
 .nbuttoncheckcheck-style-radius{
    border-radius: 5px;
    background-color: var(--n-primary);
    color: var(--n-text);
    font-size: 100%;
    padding: 5px;
    border: 1px solid var(--n-border);
    
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.nbuttoncheck-style-radius:hover {
    background-color: var(--n-hover);
    box-shadow: 0 3px 6px var(--n-shadow);
    transform: translateY(-1px);
}

.nbuttoncheck-style-radius:active {
    background-color: var(--n-active);
    box-shadow: inset 0 2px 4px var(--n-shadow);
    transform: translateY(0);
}

.nbuttoncheck-style-radius:focus {
    outline: 2px solid var(--n-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(var(--n-accent), 0.25);
}

.nbuttoncheck-style-radius:disabled {
    background-color: var(--n-disabled);
    color: var(--n-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 0.3s ease, background-color 0s, box-shadow 0s;
}

:where(.nbuttoncheck-style-radius.nbuttoncheck-type-check-left) .nbuttoncheck-child-check {
    order: 1;
    width: 25px;
    height: 25px;
}

:where(.nbuttoncheck-style-radius.nbuttoncheck-type-check-left) .nbuttoncheck-child-text {
    order: 2;
}

:where(.nbuttoncheck-style-radius.nbuttoncheck-type-check-right) .nbuttoncheck-child-check {
    width: 25px;
    height: 25px;
}

:where(.nbuttoncheck-style-radius.nbuttoncheck-type-check-right) .nbuttoncheck-child-text {
    order: 1;
}

:where(.nbuttoncheck-style-radius.nbuttoncheck-type-check-top) .nbuttoncheck-child-check {
    width: 25px;
    height: 25px;
}

:where(.nbuttoncheck-style-radius.nbuttoncheck-type-check-top) .nbuttoncheck-child-text {
    order: 2;
}

:where(.nbuttoncheck-style-radius.nbuttoncheck-type-check-bottom) .nbuttoncheck-child-check {
    width: 25px;
    height: 25px;
}

:where(.nbuttoncheck-style-radius.nbuttoncheck-type-check-bottom) .nbuttoncheck-child-text {
    order: 1;
}

/* style none */
.nbuttoncheck-style-none{
    border: none;
    outline: none;
}

.nbuttoncheck-style-none:hover {
    border: none;
}

.nbuttoncheck-style-none:active {
    border: none;
}

.nbuttoncheck-style-none:focus {
    outline: none;
    border: none;
}

.nbuttoncheck-style-none:disabled {
    border: none;
}

:where(.nbuttoncheck-style-none.nbuttoncheck-type-check-left) .nbuttoncheck-child-check {
    order: 1;
}

:where(.nbuttoncheck-style-none.nbuttoncheck-type-check-left) .nbuttoncheck-child-text {
    order: 2;
}

:where(.nbuttoncheck-style-none.nbuttoncheck-type-check-right) .nbuttoncheck-child-text {
    order: 1;
}


:where(.nbuttoncheck-style-none.nbuttoncheck-type-check-top) .nbuttoncheck-child-text {
    order: 2;
}

:where(.nbuttoncheck-style-none.nbuttoncheck-type-check-bottom) .nbuttoncheck-child-text {
    order: 1;
}
/**
 * @file NRadioTag.css
 *
 * @requires NEditTag.css
 */
/**
 * @file NSliderTag.css
 *
 * @requires NEditTag.css
 */
/**
 * @file NSpinnerTag.css
 *
 * @requires NTag.css
 */
/**
 * @file NVideoTag.css
 *
 * @requires NTag.css
 */
/**
 * @file NInputUnitTag.css
 * @description Styles CSS pour le composant NInputUnitTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputUnitTag.js
 * 
 */

/* Style de base du bouton d'unité */
.ninputunit-child-unitbutton {
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding: 0;
    padding-right: 8px;
    white-space: nowrap;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style au survol */
.ninputunit-child-unitbutton:hover {
    background-color: transparent;
    box-shadow: none;
    transform: none;
}

/* Style au focus */
.ninputunit-child-unitbutton:focus {
    outline: none;
    box-shadow: none;
    border-radius: 4px;
}

/* Style au clic */
.ninputunit-child-unitbutton:active {
    transform: scale(0.98);
}

/* État désactivé */
:where(.ninputunit.disabled .ninputunit-child-unitbutton) {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Séparateur visuel */
.ninputunit-child-unitbutton::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 60%;
    background-color: var(--n-border);
    margin-right: 8px;
    vertical-align: middle;
}
/**
 * @file NInputAmountTag.css
 * @description Styles CSS pour le composant NInputAmountTag
 * 
 * @requires NInputUnitTag.css
 * 
 * @see NInputAmountTag.js
 * 
 */
 
 .ninputamount .ninputelement-child-input{
    font-family: 
        'SF Mono', 
        'Menlo', 
        'Monaco', 
        'Consolas', 
        'Liberation Mono', 
        'Courier New', 
        monospace;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
/**
 * @file NInputAreaTag.css
 * @description Styles CSS pour le composant NInputAreaTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputAreaTag.js
 * 
 */
 :where(.ninputarea) .ninputelement-child-input{
    resize: vertical;
    min-height: 120px;
    height: auto;
 }
/**
 * @file NInputElementTag.css
 * @description Styles CSS pour le composant NInputElementTag
 * 
 * @requires NTag.css
 * @requires NTextTag.css
 * @requires NButtonTag.css
 * @requires NEditTag.css
 * @requires NImageTag.css
 * 
 * @see NInputElementTag.js
 * 
 */
/* Conteneur principal */
.ninputelement {
    --n-input-height: 25;
    text-align: left;
}

/* Conteneur des éléments */
.ninputelement-child-container {
    position: relative;
    width: 100%;
}

/* Style du contenu */
.ninputelement-child-stylecontainer {
    border: 1px solid var(--n-border);
    border-radius: 4px;
    background-color: var(--n-bg);
    transition: all 0.2s ease;
}

/* États de l'input */
.ninputelement-inputstate-0 { /* NORMAL */
    border-color: var(--n-border);
}

.ninputelement-inputstate-1 { /* FOCUS */
    border-color: var(--n-primary);
    box-shadow: 0 0 0 2px var(--n-primary);
}

.ninputelement-inputstate-2 { /* ERROR */
    border-color: var(--n-error);
}

.ninputelement-inputstate-3 { /* OK */
    border-color: var(--n-success);
}

/* Table d'en-tête */
.ninputelement-child-tableheader {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

/* Table d'input */
.ninputelement-child-tableinput {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.ninputelement-child-tableinput td {
    height: 100%;
    vertical-align: middle;
}

/* Texte d'affichage */
.ninputelement-child-textdisplay-td {
    width: 100%;
    text-align: left;
}

.ninputelement-child-textdisplay {
    font-size: 90%;
    color: var(--n-text);
    font-weight: 500;
    text-align: left;
}

/* Indicateur requis */
.ninputelement-child-required-td {
    white-space: nowrap;
    vertical-align: bottom;
}

.ninputelement-child-required {
    color: var(--n-error);
    font-weight: bold;
}

/* Bouton d'information */
.ninputelement-child-infos-td {
    white-space: nowrap;
    vertical-align: bottom;
}

.ninputelement-child-infos {
    color: var(--n-text);
}

/* Icône */
.ninputelement-child-icon-td{
    white-space: nowrap;
}

.ninputelement-child-icon {
    height: 100%;
    width: calc(var(--n-input-height) * 1px);
    object-fit: contain;
}

.ninputelement-child-input-td {
    width: 100%;
}

.ninputelement-child-input{
    width: calc(100% - 1rem);
    height: calc(var(--n-input-height) * 1px);
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0.5rem;
    font-size: 100%;
    color: var(--n-text);
    font-family: inherit;
    font-size: 100%;
}

.ninputelement-child-input:focus{
    outline: none;
}

/* Bouton d'input */
.ninputelement-child-inputbutton {
    height: 100%;
}

.ninputelement-child-deletebutton{
    background: transparent;
    border-radius: 1000px;
    border: none;
}

:where(.ninputelement-child-deletebutton) .nbutton-child-icon {
    width: 15px;
    height: 15px;
}

.ninputelement-child-deletebutton:hover {
    background-color: var(--n-bg-secondary);
}

.ninputelement-child-deletebutton:active {
    transform: scale(0.95);
}

:where(.ninputelement-child-deletebutton .ntheme-dark.nbutton-child-icon) {
    filter: invert(1);
}

/* Contenu de pied de page */

/* Exemple */
.ninputelement-child-example {
    display: block;
    font-size: 80%;
    color: var(--n-text-muted);
    font-style: italic;
    margin-top: 5px;
}

/* Message d'erreur */
.ninputelement-child-error {
    display: block;
    font-size: 80%;
    color: var(--n-error);
    margin-top: 5px;
}

@media (max-width: 768px) {
    .ninputelement-child-input{
        font-size: 90%;
    }

    .ninputelement-child-textdisplay{
        font-size: 90%;
    }

    .ninputelement-child-example{
        font-size: 80%;
    }

    .ninputelement-child-error{
        font-size: 80%;
    }
}

@media (max-width: 480px) {
    .ninputelement-child-input{
        font-size: 87%;
    }

    .ninputelement-child-textdisplay{
        font-size: 87%;
    }

    .ninputelement-child-example{
        font-size: 80%;
    }

    .ninputelement-child-error{
        font-size: 80%;
    }
}
/**
 * @file NInputCheckTag.css
 * 
 * @requires NInputELementTag.css
 * 
 * @see NInputCheckTag.js
 * 
 */

.ninputcheck-child-checkscontainer{
    text-align: right;
    border: 1px solid var(--n-border);
    border-radius: 4px;
    background-color: var(--n-bg);
}

.ninputcheck-child-checkallbutton {
    background-color: transparent;
    border: none;
}

.ninputcheck-child-checkspanel{
    text-align: left;
}
/**
 * @file NInputDatetimeTag.css
 * @description Styles CSS pour le composant NInputDatetimeTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputDatetimeTag.js
 * 
 */


/* Cacher l'icône calendrier native du navigateur */
:where(.ninputdatetime) .ninputelement-child-input::-webkit-calendar-picker-indicator {
    display: none !important;
    -webkit-appearance: none;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

:where(.ninputdatetime) .ninputelement-child-input::-webkit-inner-spin-button {
    display: none;
    -webkit-appearance: none;
}

/* Firefox */
:where(.ninputdatetime) .ninputelement-child-input::-moz-calendar-picker-indicator {
    display: none !important;
}

/* Style de base du bouton calendrier */
.ninputdatetime-child-calendarbutton {
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Style au survol */
.ninputdatetime-child-calendarbutton:hover {
    background-color: var(--n-bg-secondary);
}

/* Style au focus */
.ninputdatetime-child-calendarbutton:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--n-primary);
    border-radius: 4px;
}

/* Style au clic */
.ninputdatetime-child-calendarbutton:active {
    transform: scale(0.95);
}

/* État désactivé */
:where(.ninputdatetime.disabled .ninputdatetime-child-calendarbutton) {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Icône pour le thème sombre */
:where(.ninputdatetime-child-calendarbutton .ntheme-dark.nbutton-child-icon) {
    filter: invert(1);
}
/**
 * @file NInputFilesTag.css
 * @description Styles CSS pour le composant NInputFilesTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputFilesTag.js
 * 
 */
.ninputfiles-child-filescontainer {
    border: 1px solid var(--n-border);
    border-top: none;
    border-radius: 0 0 4px 4px;
    background-color: var(--n-bg);
}

.ninputfiles-child-chooserbutton-parent{
    text-align: right;
}

/**
 * @file NInputImageTag.css
 * @description Styles CSS pour le composant NInputImageTag
 * 
 * @requires NInputFilesTag.css
 * 
 * @see NInputImageTag.js
 * 
 */

/* Conteneur principal */
.ninputimage {
    --n-image-height: 200;
    --n-image-width: 200;
}

/* Conteneur de l'image */
.ninputimage-child-imagecontainer {
    position: relative;
    width: calc(var(--n-image-width) * 1px);
    height: calc(var(--n-image-height) * 1px);
    border-radius: 8px;
    border: 2px dashed var(--n-border);
    background-color: var(--n-bg-secondary);
    overflow: hidden;
    transition: all 0.3s ease;
}

.ninputimage-child-imagecontainer:hover {
    border-color: var(--n-primary);
}

/* Style de l'image */
.ninputimage-child-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Texte d'indication (hint) */
.ninputimage-child-imagehint {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    padding: 1rem;
    
    /* Centrage avec Flexbox */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* Autres styles */
    color: var(--n-text-muted);
    font-size: 90%;
    cursor: pointer;
    text-align: center;
}

/* Bouton d'options */
.ninputimage-child-optionbutton {
    position: absolute;
    bottom: 0.8rem;
    right: 0.8rem;
    background-color: rgba(255,255,255,0.2);
    border: 1px solid var(--n-border);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ninputimage-child-optionbutton:hover {
    background-color: var(--n-primary);
    border-color: var(--n-primary);
}

.ninputimage-child-optionbutton:hover img {
    filter: brightness(0) invert(1);
}

.ninputimage-child-popupoptions-button {
    display: block;
    width: 100%;
    font-size: clamp(0.875rem, 1.25vw, 0.9rem);
    background: transparent;
    border: none;
    cursor: pointer;
}

.ninputimage-child-popupoptions-button:hover {
    background-color: var(--n-bg-secondary);
}

.ninputimage-child-popupoptions-button:active {
    background-color: var(--n-active);
}

/* Responsive design */
@media screen and (max-width: 480px) {
    .ninputimage-child-imagehint {
        font-size: 80%;
    }
}
/**
 * @file NInputPasswordTag.css
 * @description Styles CSS pour le composant NInputPasswordTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputPasswordTag.js
 * 
 */

 /* Style de base du bouton flèche */
.ninputpassword-child-eyebutton {
   border: none;
   background-color: transparent;
   cursor: pointer;
   transition: transform 0.2s ease;
}

/* Style au survol */
.ninputpassword-child-eyebutton:hover {
   background-color: var(--n-bg-secondary);
}

/* Style au focus */
.ninputpassword-child-eyebutton:focus {
   outline: none;
   border: none;
}

/* Style au clic */
.ninputpassword-child-eyebutton:active {
   transform: scale(0.95);
}

/* État désactivé */
:where(.ninputsearch.disabled .ninputpassword-child-eyebutton) {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
}

:where(.ninputpassword-child-eyebutton .ntheme-dark.nbutton-child-icon) {
   filter: invert(1);
}

.ninputpassword-password-strength {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   padding: 0.5rem 0.75rem;
   background: color-mix(in srgb, var(--n-bg-secondary) 30%, transparent);
   border-radius: 8px;
   border: 1px solid color-mix(in srgb, var(--n-border) 20%, transparent);
}

.ninputpassword-strength-bar {
   flex: 1;
   height: 0.5rem;
   border-radius: 6px;
   background: color-mix(in srgb, var(--n-bg) 60%, transparent);
   position: relative;
   overflow: hidden;
}

.ninputpassword-strength-bar::before {
   content: '';
   display: block;
   height: 100%;
   border-radius: 6px;
   position: absolute;
   left: 0; top: 0;
   width: 0%;
   background: var(--n-border);
   transition: width 0.3s, background 0.3s;
}

.ninputpassword-strength-weak::before {
   width: 25%;
   background: var(--n-error);
}
 
.ninputpassword-strength-medium::before {
   width: 50%;
   background: var(--n-warning);
}

.ninputpassword-strength-strong::before {
   width: 75%;
   background: var(--n-info);
}

.ninputpassword-strength-verystrong::before {
   width: 100%;
   background: var(--n-success);
}

.ninputpassword-strength-text {
   min-width: 70px;
   font-size: 0.875rem;
   font-weight: 600;
   text-align: left;
   color: var(--n-text);
   letter-spacing: 0.01em;
}
/**
 * @file NInputPhoneTag.css
 * @description Styles CSS pour le composant NInputPhoneTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputPhoneTag.js
 * 
 */

/* Style de base du bouton de code de téléphone */
.ninputphone-child-codephonebutton {
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding: 0;
    padding-left: 8px;
    white-space: nowrap;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style au survol */
.ninputphone-child-codephonebutton:hover {
    background-color: transparent;
    box-shadow: none;
    transform: none;
}

/* Style au focus */
.ninputphone-child-codephonebutton:focus {
    outline: none;
    box-shadow: none;
    border-radius: 4px;
}

/* Style au clic */
.ninputphone-child-codephonebutton:active {
    transform: scale(0.98);
}

/* État désactivé */
:where(.ninputphone.disabled .ninputphone-child-codephonebutton) {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Séparateur visuel */
.ninputphone-child-codephonebutton::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 60%;
    background-color: var(--n-border);
    margin-left: 8px;
    vertical-align: middle;
}


/**
 * @file NInputRadioTag.css
 * 
 * @requires NInputELementTag.css
 * 
 * @see NInputRadioTag.js
 * 
 */

 .ninputradio-child-radioscontainer{
    text-align: right;
    border: 1px solid var(--n-border);
    border-radius: 4px;
    background-color: var(--n-bg);
}

.ninputradio-child-radiospanel{
    text-align: left;
}
/**
 * @file NInputSearchTag.css
 * @description Styles CSS pour le composant NInputSearchTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputSearchTag.js
 * 
 */

 /* Style de base du bouton flèche */
.ninputsearch-child-searchbutton {
   border: none;
   background-color: transparent;
   cursor: pointer;
   transition: transform 0.2s ease;
}

/* Style au survol */
.ninputsearch-child-searchbutton:hover {
   background-color: var(--n-bg-secondary);
}

/* Style au focus */
.ninputsearch-child-searchbutton:focus {
   outline: none;
   border: none;
}

/* Style au clic */
.ninputsearch-child-searchbutton:active {
   transform: scale(0.95);
}

/* État désactivé */
:where(.ninputsearch.disabled .ninputsearch-child-searchbutton) {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
}

:where(.ninputsearch-child-searchbutton .ntheme-dark.nbutton-child-icon) {
   filter: invert(1);
}

/**
 * @file NInputSelectTag.css
 * @description Styles CSS pour le composant NInputSelectTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputSelectTag.js
 * 
 */

 .ninputelement-child-input:read-only{
    cursor: pointer;
 }

 /* Style de base du bouton flèche */
.ninputselect-child-arrowbutton {
   border: none;
   background-color: transparent;
   cursor: pointer;
   transition: transform 0.2s ease;
}

/* Rotation de la flèche quand la liste est ouverte */
.ninputselect-child-arrowbutton.active {
   transform: rotate(180deg);
}

/* Style au survol */
.ninputselect-child-arrowbutton:hover {
   background-color: var(--n-bg-secondary);
}

/* Style au focus */
.ninputselect-child-arrowbutton:focus {
   outline: none;
   box-shadow: 0 0 0 2px var(--n-primary);
   border-radius: 4px;
}

/* Style au clic */
.ninputselect-child-arrowbutton:active {
   transform: scale(0.95);
}

/* État désactivé */
:where(.ninputselect.disabled .ninputselect-child-arrowbutton) {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
}

:where(.ninputselect-child-arrowbutton .ntheme-dark.nbutton-child-icon) {
   filter: invert(1);
}

/**
 * @file NInputTextTag.css
 * @description Styles CSS pour le composant NInputTextTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputTextTag.js
 * 
 */
/**
 * @file NInputVideoTag.css
 * @description Styles CSS pour le composant NInputVideoTag
 * 
 * @requires NInputFilesTag.css
 * 
 * @see NInputVideoTag.js
 * 
 */

/* Conteneur principal */
.ninputvideo {
    --n-video-height: 200;
    --n-video-width: 200;
}

/* Conteneur de video */
.ninputvideo-child-videocontainer {
    position: relative;
    width: calc(var(--n-video-width) * 1px);
    height: calc(var(--n-video-height) * 1px);
    border-radius: 8px;
    border: 2px dashed var(--n-border);
    background-color: var(--n-bg-secondary);
    overflow: hidden;
    transition: all 0.3s ease;
}

.ninputvideo-child-videocontainer:hover {
    border-color: var(--n-primary);
}

/* Style de video */
.ninputvideo-child-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Texte d'indication (hint) */
.ninputvideo-child-videohint {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    padding: 1rem;
    
    /* Centrage avec Flexbox */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* Autres styles */
    color: var(--n-text-muted);
    font-size: 90%;
    cursor: pointer;
    text-align: center;
}

/* Bouton d'options */
.ninputvideo-child-optionbutton {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    background-color: rgba(255,255,255,0.2);
    border: 1px solid var(--n-border);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ninputvideo-child-optionbutton:hover {
    background-color: var(--n-primary);
    border-color: var(--n-primary);
}

.ninputvideo-child-optionbutton:hover img {
    filter: brightness(0) invert(1);
}

.ninputvideo-child-popupoptions-button {
    display: block;
    width: 100%;
    font-size: clamp(0.875rem, 1.25vw, 0.9rem);
    background: transparent;
    border: none;
    cursor: pointer;
}

.ninputvideo-child-popupoptions-button:hover {
    background-color: var(--n-bg-secondary);
}

.ninputvideo-child-popupoptions-button:active {
    background-color: var(--n-active);
}

/* Responsive design */
@media screen and (max-width: 480px) {
    .ninputvideo-child-videohint {
        font-size: 80%;
    }
}
/**
 * @file NAdminMain.css
 *
 * @requires NMainTag.css
 */

html{
    background-color: rgb(223,223,223);
    background-repeat: repeat;
    background-size: 400px 254px;
    background-attachment: fixed;
}

.nadminmain.ntheme-dark {
    background-color: var(--n-bg);
}
/**
 * @file NAdminCheckItemPermissionCatalog.css
 *
 * @requires NCheckItemTag.css
 */

.nadmincheckitempermissioncatalog-div {
    padding: 18px 10px 10px 10px;
    border: 1px solid var(--n-border);
    border-radius: 7px;
    background: var(--n-bg-secondary);
    margin-top: 8px;
    box-shadow: 0 2px 8px var(--n-shadow);
}

.nadmincheckitempermissioncatalog-div-table {
    width: calc(100% - 23px);
    margin: auto;
    margin-bottom: 12px;
    padding-left: 3px;
    overflow-x: auto;
    white-space: nowrap;
}

.nadmincheckitempermissioncatalog-check {
    min-width: 80px;
    margin-right: 10px;
    font-size: 15px;
    cursor: pointer;
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: 4px;
    padding: 4px 8px;
    transition: background 0.13s;
    white-space: nowrap;
    display: inline-block;
}
.nadmincheckitempermissioncatalog-check:hover {
    background: var(--n-hover);
    color: var(--n-text-inverse);
}
.nadmincheckitempermissioncatalog-check:active {
    background: var(--n-active);
    color: var(--n-text-inverse);
}

.nadmincheckitempermissioncatalog-div-row {
    margin-top: 10px;
}

.nadmincheckitempermissioncatalog-row {
    width: calc(100% - 38px);
    background-color: var(--n-bg);
    border-radius: 6px;
    border: 1px solid var(--n-border);
    margin: auto;
    margin-bottom: 7px;
    padding: 6px 8px;
    overflow-x: auto;
    white-space: nowrap;
}

.nadmincheckitempermissioncatalog-row-label {
    color: var(--n-text);
    font-weight: 600;
    font-size: 15px;
    margin-right: 12px;
    min-width: 60px;
    white-space: nowrap;
    display: inline-block;
}

.nadmincheckitempermissioncatalog-add-row-button {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    font-size: 14px;
    color: var(--n-primary);
    border: 1px solid var(--n-border);
    border-radius: 6px;
    background: var(--n-bg);
    margin-top: 10px;
    cursor: pointer;
    transition: background 0.1s;
    text-decoration: none;
}
.nadmincheckitempermissioncatalog-add-row-button:hover {
    background: var(--n-hover);
    color: var(--n-text-inverse);
}
.nadmincheckitempermissioncatalog-add-row-button:hover img,
.nadmincheckitempermissioncatalog-delete img {
    filter: invert(1);
}

.nadmincheckitempermissioncatalog-delete {
    display: inline-block;
}
/**
 * @file NAdminAccesFrame.css
 *
 * @requires NFrameTag.css
 */
 .nadminaccesframe {
    width: 100%;
    min-height: calc(100vh - 60px);
    padding-top: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nadminaccesframe-child-table{
    width: 100%;
    height: 100%;
}

@keyframes nadminaccesframe-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.nadminaccesframe-child-td{
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

/* Wrapper intérieur */
.nadminaccesframe-child-innerwrapper {
    max-width: 400px;
    margin: 0 auto;
    padding: 48px 24px;
}

/* En-tête et logo */
.nadminaccesframe-child-headerwrapper {
    text-align: center;
    margin-bottom: 40px;
    animation: nadminaccesframe-slideDown 0.8s ease-out;
    box-shadow: 0 2px 20px var(--n-shadow);
    border-radius: 16px;
    background-color: var(--n-bg);
    padding: 14px;
}

.nadminaccesframe-child-logo {
    width: 120px;
    height: auto;
    margin-bottom: 16px;
    transition: transform 0.3s ease;
}

.nadminaccesframe-child-logo:hover {
    transform: scale(1.05);
}

.nadminaccesframe-child-title {
    font-size: 2em;
    color: var(--n-text);
    font-weight: 700;
    margin: 0;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px var(--n-shadow);
}

/* Formulaire */
.nadminaccesframe-child-formwrapper {
    background-color: var(--n-bg);
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 8px 32px var(--n-shadow);
    animation: nadminaccesframe-fadeIn 1s ease-out;
    border: 1px solid var(--n-border);
}

/* Champs de saisie */
.nadminaccesframe-child-input {
    width: 100%;
    margin-bottom: 24px;
}

.nadminaccesframe-child-input-password{
    margin-bottom: 0px;
}

/* ===== OPTIONS ROW FORGOT ===== */
.nadminaccesframe-options-row {
    text-align: right;
    margin-bottom: 30px;
}

/* Lien mot de passe oublié */
.nadminaccesframe-forgot-link {
    font-size: clamp(0.8rem, 1.5vw, 0.875rem);
    color: var(--n-primary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.nadminaccesframe-forgot-link:hover {
    color: var(--n-hover);
    text-decoration: underline;
}

/* Bouton de connexion */
.nadminaccesframe-child-loginbutton {
    width: 100%;
    padding: 14px;
    background-color: var(--n-primary);
    color: var(--n-text-inverse);
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nadminaccesframe-child-loginbutton::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: 0.5s;
}

.nadminaccesframe-child-loginbutton:hover::before {
    left: 100%;
}

.nadminaccesframe-child-loginbutton:hover {
    background-color: var(--n-hover);
    transform: translateY(-1px);
}

/* Animations */
@keyframes nadminaccesframe-slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes nadminaccesframe-fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Media queries */
@media (max-width: 480px) {
    .nadminaccesframe-child-innerwrapper {
        padding: 24px 16px;
    }

    .nadminaccesframe-child-formwrapper {
        padding: 24px;
    }

    .nadminaccesframe-child-title {
        font-size: 1.5em;
    }
}
/**
 * @file NAdminConnexionFrame.css
 *
 * @requires NFrameTag.css
 */
.nadminconnexionframe {
    width: 100%;
    min-height: calc(100vh - 60px);
    padding-top: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nadminconnexionframe-child-table{
    width: 100%;
    height: 100%;
}

@keyframes nadminconnexionframe-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.nadminconnexionframe-child-td{
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

/* Wrapper intérieur */
.nadminconnexionframe-child-innerwrapper {
    max-width: 400px;
    margin: 0 auto;
    padding: 48px 24px;
}

/* En-tête et logo */
.nadminconnexionframe-child-headerwrapper {
    text-align: center;
    margin-bottom: 40px;
    animation: nadminconnexionframe-slideDown 0.8s ease-out;
    box-shadow: 0 2px 20px var(--n-shadow);
    border-radius: 16px;
    background-color: var(--n-bg);
    padding: 14px;
}

.nadminconnexionframe-child-logo {
    width: 120px;
    height: auto;
    margin-bottom: 16px;
    transition: transform 0.3s ease;
}

.nadminconnexionframe-child-logo:hover {
    transform: scale(1.05);
}

.nadminconnexionframe-child-title {
    font-size: 2em;
    color: var(--n-text);
    font-weight: 700;
    margin: 0;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px var(--n-shadow);
}

/* Formulaire */
.nadminconnexionframe-child-formwrapper {
    background-color: var(--n-bg);
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 8px 32px var(--n-shadow);
    animation: nadminconnexionframe-fadeIn 1s ease-out;
    border: 1px solid var(--n-border);
}

/* Champs de saisie */
.nadminconnexionframe-child-input {
    width: 100%;
    margin-bottom: 24px;
}

.nadminconnexionframe-child-input-password{
    margin-bottom: 0px;
}

/* ===== OPTIONS ROW FORGOT ===== */
.nadminconnexionframe-options-row {
    text-align: right;
    margin-bottom: 30px;
}

/* Lien mot de passe oublié */
.nadminconnexionframe-forgot-link {
    font-size: clamp(0.8rem, 1.5vw, 0.875rem);
    color: var(--n-primary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.nadminconnexionframe-forgot-link:hover {
    color: var(--n-hover);
    text-decoration: underline;
}

/* Bouton de connexion */
.nadminconnexionframe-child-loginbutton {
    width: 100%;
    padding: 14px;
    background-color: var(--n-primary);
    color: var(--n-text-inverse);
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nadminconnexionframe-child-loginbutton::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: 0.5s;
}

.nadminconnexionframe-child-loginbutton:hover::before {
    left: 100%;
}

.nadminconnexionframe-child-loginbutton:hover {
    background-color: var(--n-hover);
    transform: translateY(-1px);
}

/* Animations */
@keyframes nadminconnexionframe-slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes nadminconnexionframe-fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Media queries */
@media (max-width: 480px) {
    .nadminconnexionframe-child-innerwrapper {
        padding: 24px 16px;
    }

    .nadminconnexionframe-child-formwrapper {
        padding: 24px;
    }

    .nadminconnexionframe-child-title {
        font-size: 1.5em;
    }
}
/**
 * @file NAdminSearchUserFrame.css
 *
 * @requires NFrameTag.css
 */

.nadminsearchuserframe {
  width: 100%;
  min-height: calc(100vh - 60px);
  padding-top: 60px;
}

.nadminsearchuserframe-container {
  max-width: clamp(800px, 90%, 1400px);
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Container du titre et description */
.nadminsearchuserframe-child-titlecontainer {
  text-align: center;
  animation: nadminsearchuserframe-slideDown 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes nadminsearchuserframe-slideDown {
  from { 
    opacity: 0; 
    transform: translateY(-20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@media (prefers-reduced-motion: reduce) {
  .nadminsearchuserframe-child-titlecontainer {
    animation: none;
  }
  .nadminsearchuserframe-child-form {
    animation: none;
  }
}

.nadminsearchuserframe-title {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--n-primary);
  margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
}

.nadminsearchuserframe-description {
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  color: var(--n-text-muted);
  max-width: clamp(400px, 80%, 600px);
  margin: 0 auto;
  line-height: 1.6;
}

/* Formulaire de recherche */
.nadminsearchuserframe-child-form {
  background: var(--n-bg-secondary);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--n-border);
  border-radius: clamp(0.75rem, 1.5vw, 1.25rem);
  padding: clamp(1rem, 2.5vw, 1.75rem);
  box-shadow: 0 4px 16px 0 var(--n-shadow);
  display: flex;
  gap: clamp(0.75rem, 2vw, 1rem);
  align-items: bottom;
  animation: nadminsearchuserframe-slideUp 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  flex-direction: column;
  max-width: 400px;
  width: calc(100% - (clamp(1rem, 2.5vw, 1.75rem)*4));
  margin: auto;
}

@keyframes nadminsearchuserframe-slideUp {
  from { 
    opacity: 0; 
    transform: translateY(30px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

.nadminsearchuserframe-child-input {
  flex: 1;
  min-width: 0;
}

.nadminsearchuserframe-child-searchbutton {
  padding: clamp(0.9rem, 2vw, 1.1rem) clamp(1.5rem, 3vw, 2rem);
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-weight: 600;
  border-radius: clamp(0.5rem, 1vw, 0.75rem);
  background: var(--n-primary);
  color: var(--n-text-inverse);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px 0 color-mix(in srgb, var(--n-shadow) 10%, transparent);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.nadminsearchuserframe-child-searchbutton:hover,
.nadminsearchuserframe-child-searchbutton:focus-visible {
  background: color-mix(in srgb, var(--n-primary) 90%, var(--n-bg-secondary) 10%);
  box-shadow: 0 4px 16px 0 color-mix(in srgb, var(--n-primary) 20%, transparent);
  transform: translateY(-2px);
  outline: none;
}

.nadminsearchuserframe-child-searchbutton:active {
  background: color-mix(in srgb, var(--n-primary) 80%, var(--n-bg-secondary) 20%);
  transform: scale(0.98);
}

/* Description des résultats */
.nadminsearchuserframe-child-descriptionresults {
  font-size: clamp(0.9rem, 2vw, 1rem);
  color: var(--n-text-muted);
  font-weight: 500;
  padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.75rem, 2vw, 1rem);
  background: color-mix(in srgb, var(--n-info) 10%, transparent);
  border-left: 3px solid var(--n-info);
  border-radius: clamp(0.3rem, 0.8vw, 0.5rem);
}

/* Panel de résultats */
.nadminsearchuserframe-child-resultspanel {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2vw, 1rem);
  animation: nadminsearchuserframe-fadeIn 0.5s ease;
}

@keyframes nadminsearchuserframe-fadeIn {
  from { 
    opacity: 0; 
  }
  to { 
    opacity: 1; 
  }
}

/* Media queries pour changements structurels */
@media (max-width: 768px) {
  .nadminsearchuserframe-child-searchbutton {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .nadminsearchuserframe-container {
    gap: clamp(1rem, 3vw, 1.5rem);
  }
}

/* Mode sombre */
.nadminsearchuserframe-child-form.ntheme-dark {
  background: color-mix(in srgb, var(--n-bg) 60%, transparent);
  border-color: color-mix(in srgb, var(--n-border) 50%, transparent);
}

/**
 * @file NAdminSearchUserItem.css
 *
 * @requires NItemTag.css
 */

.nadminsearchuseritem {
  width: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: nadminsearchuseritem-fadeIn 0.4s ease;
}

@keyframes nadminsearchuseritem-fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(10px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@media (prefers-reduced-motion: reduce) {
  .nadminsearchuseritem {
    animation: none;
  }
}

.nadminsearchuseritem-container {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding: clamp(0.75rem, 2vw, 1.25rem);
  background: color-mix(in srgb, var(--n-bg-secondary) 40%, transparent);
  border: 1px solid var(--n-border);
  border-radius: clamp(0.5rem, 1vw, 1rem);
  transition: all 0.25s ease;
}

.nadminsearchuseritem-container:hover {
  background: color-mix(in srgb, var(--n-bg-secondary) 60%, transparent);
  border-color: var(--n-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px 0 color-mix(in srgb, var(--n-shadow) 15%, transparent);
}

/* Section gauche - Avatar et info principale */
.nadminsearchuseritem-left {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1rem);
  flex: 1;
  min-width: 0;
}

.nadminsearchuseritem-avatar {
  width: clamp(48px, 8vw, 60px);
  height: clamp(48px, 8vw, 60px);
  min-width: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--n-primary), var(--n-secondary));
  color: var(--n-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 8px 0 color-mix(in srgb, var(--n-shadow) 10%, transparent);
}

.nadminsearchuseritem-maininfo {
  display: flex;
  flex-direction: column;
  gap: clamp(0.15rem, 0.5vw, 0.25rem);
  min-width: 0;
  flex: 1;
}

.nadminsearchuseritem-name {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  font-weight: 600;
  color: var(--n-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nadminsearchuseritem-email {
  font-size: clamp(0.8rem, 1.8vw, 0.9rem);
  color: var(--n-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Section centre - Informations détaillées */
.nadminsearchuseritem-center {
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 1vw, 0.6rem);
  flex: 1;
  min-width: 0;
}

.nadminsearchuseritem-inforow {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1vw, 0.6rem);
}

.nadminsearchuseritem-label {
  font-size: clamp(0.75rem, 1.6vw, 0.85rem);
  color: var(--n-text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.nadminsearchuseritem-value {
  font-size: clamp(0.75rem, 1.6vw, 0.85rem);
  color: var(--n-text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nadminsearchuseritem-badge {
  font-size: clamp(0.7rem, 1.6vw, 0.8rem);
  font-weight: 600;
  padding: clamp(0.2rem, 0.8vw, 0.3rem) clamp(0.5rem, 1.5vw, 0.75rem);
  border-radius: clamp(0.3rem, 0.8vw, 0.4rem);
  white-space: nowrap;
  transition: all 0.2s ease;
}

.nadminsearchuseritem-badge.status-active {
  background: color-mix(in srgb, var(--n-success) 15%, transparent);
  color: var(--n-success);
  border: 1px solid color-mix(in srgb, var(--n-success) 30%, transparent);
}

.nadminsearchuseritem-badge.status-inactive {
  background: color-mix(in srgb, var(--n-text-muted) 15%, transparent);
  color: var(--n-text-muted);
  border: 1px solid color-mix(in srgb, var(--n-text-muted) 30%, transparent);
}

.nadminsearchuseritem-badge.status-suspended {
  background: color-mix(in srgb, var(--n-error) 15%, transparent);
  color: var(--n-error);
  border: 1px solid color-mix(in srgb, var(--n-error) 30%, transparent);
}

/* Section droite - Actions */
.nadminsearchuseritem-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nadminsearchuseritem-ismebtn {
  padding: clamp(0.5rem, 1.5vw, 0.65rem) clamp(1rem, 2.5vw, 1.5rem);
  font-size: clamp(0.8rem, 1.8vw, 0.9rem);
  font-weight: 600;
  border-radius: clamp(0.4rem, 1vw, 0.6rem);
  background: var(--n-primary);
  color: var(--n-text-inverse);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px 0 color-mix(in srgb, var(--n-shadow) 8%, transparent);
}

.nadminsearchuseritem-ismebtn:hover,
.nadminsearchuseritem-ismebtn:focus-visible {
  background: color-mix(in srgb, var(--n-primary) 90%, var(--n-bg-secondary) 10%);
  transform: scale(1.05);
  box-shadow: 0 4px 12px 0 color-mix(in srgb, var(--n-primary) 15%, transparent);
  outline: none;
}

.nadminsearchuseritem-ismebtn:active {
  background: color-mix(in srgb, var(--n-primary) 80%, var(--n-bg-secondary) 20%);
  transform: scale(0.98);
}

/* Media queries pour changements structurels */
@media (max-width: 1024px) {
  .nadminsearchuseritem-center {
    display: none;
  }
}

@media (max-width: 768px) {
  .nadminsearchuseritem-container {
    flex-wrap: wrap;
  }
  
  .nadminsearchuseritem-left {
    flex: 1 1 100%;
  }
  
  .nadminsearchuseritem-right {
    width: 100%;
    margin-top: 0.5rem;
  }
  
  .nadminsearchuseritem-ismebtn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .nadminsearchuseritem-avatar {
    width: 45px;
    height: 45px;
    min-width: 45px;
  }
}

/*
 * @file NAdminSetCodeAccesFrame.css
 *
 * @requires NFrameTag.css
 */
 .nadminsetcodeaccesframe {
    width: 100%;
    min-height: calc(100vh - 60px);
    padding-top: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nadminsetcodeaccesframe-child-table {
    width: 100%;
    height: 100%;
  }
  .nadminsetcodeaccesframe-child-td {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    padding: 2rem;
  }
  .nadminsetcodeaccesframe-child-innerwrapper {
    max-width: 450px;
    margin: 0 auto;
  }
  .nadminsetcodeaccesframe-child-formwrapper {
    background: color-mix(in srgb, var(--n-bg) 85%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 0 10px 0 var(--n-shadow);
    animation: nadminsetcodeaccesframe-slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }
  @keyframes nadminsetcodeaccesframe-slideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .nadminsetcodeaccesframe-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--n-primary);
    margin-bottom: 0.5rem;
  }
  .nadminsetcodeaccesframe-description {
    font-size: 1.08rem;
    color: var(--n-text-muted);
    margin-bottom: 2rem;
  }
  .nadminsetcodeaccesframe-child-input {
    width: 100%;
    margin-bottom: 1.5rem;
  }
  .nadminsetcodeaccesframe-child-validatebutton {
    width: 100%;
    margin-top: 1.5rem;
    padding: 1rem 0;
    font-size: 1.08rem;
    font-weight: 600;
    border-radius: 0.7rem;
    background: var(--n-primary);
    color: var(--n-text-inverse);
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px 0 color-mix(in srgb, var(--n-shadow) 8%, transparent);
    transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
  }
  .nadminsetcodeaccesframe-child-validatebutton:hover,
  .nadminsetcodeaccesframe-child-validatebutton:focus-visible {
    background: color-mix(in srgb, var(--n-primary) 90%, var(--n-bg-secondary) 10%);
    box-shadow: 0 4px 18px 0 color-mix(in srgb, var(--n-primary) 10%, transparent);
    outline: none;
  }
  .nadminsetcodeaccesframe-child-validatebutton:active {
    background: color-mix(in srgb, var(--n-primary) 80%, var(--n-bg-secondary) 20%);
    transform: scale(0.98);
  }
  .nadminsetcodeaccesframe-child-backlink {
    display: block;
    margin: 1.5rem auto 0 auto;
    color: var(--n-primary);
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    transition: color 0.18s, transform 0.18s;
  }
  .nadminsetcodeaccesframe-child-backlink:hover,
  .nadminsetcodeaccesframe-child-backlink:focus-visible {
      background: color-mix(in srgb, var(--n-text-muted) 20%, transparent);
      transform: translateY(-1px);
  }
  @media (max-width: 768px) {
    .nadminsetcodeaccesframe-child-td {
      padding: 1rem;
    }
    .nadminsetcodeaccesframe-child-formwrapper {
      padding: 1.5rem;
      border-radius: 20px;
    }
    .nadminsetcodeaccesframe-title {
      font-size: 1.25rem;
    }
    .nadminsetcodeaccesframe-description {
      font-size: 1rem;
    }
    .nadminsetcodeaccesframe-child-validatebutton {
      font-size: 1rem;
    }
    .nadminsetcodeaccesframe-child-backlink {
      font-size: 0.875rem;
    }
  }
  @media (max-width: 480px) {
    .nadminsetcodeaccesframe-child-innerwrapper {
      max-width: 100%;
    }
    .nadminsetcodeaccesframe-child-formwrapper {
      padding: 1rem;
      border-radius: 16px;
    }
    .nadminsetcodeaccesframe-title {
      font-size: 1.125rem;
    }
    .nadminsetcodeaccesframe-description {
      font-size: 0.875rem;
    }
    .nadminsetcodeaccesframe-child-validatebutton {
      font-size: 0.875rem;
    }
    .nadminsetcodeaccesframe-child-backlink {
      font-size: 0.75rem;
    }
  }
  .nadminsetcodeaccesframe-child-formwrapper.ntheme-dark {
    background: color-mix(in srgb, var(--n-bg) 90%, transparent);
    border-color: color-mix(in srgb, var(--n-border) 40%, transparent);
  }
/*
 * @file NAdminSetMdpFrame.css
 *
 * @requires NFrameTag.css
 */
.nadminsetmdpframe {
  width: 100%;
  min-height: calc(100vh - 60px);
  padding-top: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nadminsetmdpframe-child-table {
  width: 100%;
  height: 100%;
}
.nadminsetmdpframe-child-td {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  padding: 2rem;
}
.nadminsetmdpframe-child-innerwrapper {
  max-width: 450px;
  margin: 0 auto;
}
.nadminsetmdpframe-child-formwrapper {
  background: color-mix(in srgb, var(--n-bg) 85%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: 0 0 10px 0 var(--n-shadow);
  animation: nadminsetmdpframe-slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes nadminsetmdpframe-slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.nadminsetmdpframe-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--n-primary);
  margin-bottom: 0.5rem;
}
.nadminsetmdpframe-description {
  font-size: 1.08rem;
  color: var(--n-text-muted);
  margin-bottom: 2rem;
}
.nadminsetmdpframe-child-input {
  width: 100%;
  margin-bottom: 1.5rem;
}
.nadminsetmdpframe-child-validatebutton {
  width: 100%;
  margin-top: 1.5rem;
  padding: 1rem 0;
  font-size: 1.08rem;
  font-weight: 600;
  border-radius: 0.7rem;
  background: var(--n-primary);
  color: var(--n-text-inverse);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px 0 color-mix(in srgb, var(--n-shadow) 8%, transparent);
  transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
}
.nadminsetmdpframe-child-validatebutton:hover,
.nadminsetmdpframe-child-validatebutton:focus-visible {
  background: color-mix(in srgb, var(--n-primary) 90%, var(--n-bg-secondary) 10%);
  box-shadow: 0 4px 18px 0 color-mix(in srgb, var(--n-primary) 10%, transparent);
  outline: none;
}
.nadminsetmdpframe-child-validatebutton:active {
  background: color-mix(in srgb, var(--n-primary) 80%, var(--n-bg-secondary) 20%);
  transform: scale(0.98);
}
.nadminsetmdpframe-child-backlink {
  display: block;
  margin: 1.5rem auto 0 auto;
  color: var(--n-primary);
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  transition: color 0.18s, transform 0.18s;
}
.nadminsetmdpframe-child-backlink:hover,
.nadminsetmdpframe-child-backlink:focus-visible {
    background: color-mix(in srgb, var(--n-text-muted) 20%, transparent);
    transform: translateY(-1px);
}
@media (max-width: 768px) {
  .nadminsetmdpframe-child-td {
    padding: 1rem;
  }
  .nadminsetmdpframe-child-formwrapper {
    padding: 1.5rem;
    border-radius: 20px;
  }
  .nadminsetmdpframe-title {
    font-size: 1.25rem;
  }
  .nadminsetmdpframe-description {
    font-size: 1rem;
  }
  .nadminsetmdpframe-child-validatebutton {
    font-size: 1rem;
  }
  .nadminsetmdpframe-child-backlink {
    font-size: 0.875rem;
  }
}
@media (max-width: 480px) {
  .nadminsetmdpframe-child-innerwrapper {
    max-width: 100%;
  }
  .nadminsetmdpframe-child-formwrapper {
    padding: 1rem;
    border-radius: 16px;
  }
  .nadminsetmdpframe-title {
    font-size: 1.125rem;
  }
  .nadminsetmdpframe-description {
    font-size: 0.875rem;
  }
  .nadminsetmdpframe-child-validatebutton {
    font-size: 0.875rem;
  }
  .nadminsetmdpframe-child-backlink {
    font-size: 0.75rem;
  }
}
.nadminsetmdpframe-child-formwrapper.ntheme-dark {
  background: color-mix(in srgb, var(--n-bg) 90%, transparent);
  border-color: color-mix(in srgb, var(--n-border) 40%, transparent);
}
/*
 * @file NAdminVerifyEmailFrame.css
 *
 * @requires NFrameTag.css
 */

.nadminverifyemailframe {
  width: 100%;
  min-height: calc(100vh - 60px);
  padding-top: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nadminverifyemailframe-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.nadminverifyemailframe-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  text-align: center;
}

.nadminverifyemailframe-header-title {
  font-size: 2rem;
  font-weight: bold;
  color: var(--n-primary);
  margin: 0;
  text-shadow: 0 2px 4px color-mix(in srgb, var(--n-primary) 20%, transparent);
  line-height: 1.2;
}

.nadminverifyemailframe-header-subtitle {
  font-size: 1.125rem;
  color: var(--n-text-muted);
  margin: 0;
  max-width: 400px;
  line-height: 1.4;
}

.nadminverifyemailframe-form-container {
  width: calc(100% - 5rem);
  background: var(--n-bg-secondary);
  backdrop-filter: blur(20px);
  border-radius: 1.5rem;
  padding: 2.5rem;
  box-shadow: 0 0 10px 0 var(--n-shadow);
  border: 1px solid var(--n-border);
  animation: nadminverifyemailframe-slidein 0.6s ease-out;
  max-width: 420px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@keyframes nadminverifyemailframe-slidein {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nadminverifyemailframe-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.nadminverifyemailframe-info-zone {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: color-mix(in srgb, var(--n-warning) 10%, transparent);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--n-warning) 20%, transparent);
}
.nadminverifyemailframe-info-icon {
  font-size: 1.25rem;
  color: var(--n-warning);
  flex-shrink: 0;
}
.nadminverifyemailframe-info-text {
  font-size: 0.95rem;
  color: var(--n-text-muted);
  line-height: 1.4;
}

.nadminverifyemailframe-your-adresse {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.nadminverifyemailframe-your-adresse-text {
  font-size: 0.8rem;
  color: var(--n-text);
}
.nadminverifyemailframe-your-adresse-value-btn {
  font-size: 0.9rem;
  color: var(--n-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  transition: background 0.2s;
}
.nadminverifyemailframe-your-adresse-value-btn:hover {
  background: color-mix(in srgb, var(--n-primary) 10%, transparent);
}

.nadminverifyemailframe-input {
  width: 100%;
}

.nadminverifyemailframe-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.nadminverifyemailframe-submit-btn {
  flex: 1;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--n-primary), color-mix(in srgb, var(--n-primary) 80%, var(--n-bg)));
  color: var(--n-text-inverse);
  border: none;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--n-primary) 30%, transparent);
}

.nadminverifyemailframe-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--n-primary) 40%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--n-primary) 90%, var(--n-bg)), var(--n-primary));
}

.nadminverifyemailframe-submit-btn:active {
  transform: translateY(0);
}

.nadminverifyemailframe-cancel-btn {
  padding: 1rem 2rem;
  background: color-mix(in srgb, var(--n-text-muted) 10%, transparent);
  color: var(--n-text-muted);
  border: 2px solid color-mix(in srgb, var(--n-text-muted) 20%, transparent);
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nadminverifyemailframe-cancel-btn:hover {
  background: color-mix(in srgb, var(--n-text-muted) 20%, transparent);
  color: var(--n-text);
  transform: translateY(-1px);
}

.nadminverifyemailframe-resend-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
}
.nadminverifyemailframe-resend-text {
  font-size: 0.8rem;
  color: var(--n-text-muted);
}
.nadminverifyemailframe-resend-btn {
  font-size: 0.8rem;
  color: var(--n-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  transition: background 0.2s;
}
.nadminverifyemailframe-resend-btn:hover:not(.nadminverifyemailframe-resend-btn-disabled) {
  background: color-mix(in srgb, var(--n-primary) 10%, transparent);
}
.nadminverifyemailframe-resend-btn-disabled {
  color: var(--n-text-muted);
  cursor: not-allowed;
  background: none;
}

/* Responsive */
@media (max-width: 768px) {
  .nadminverifyemailframe-main {
    padding: 1rem;
  }
  .nadminverifyemailframe-form-container {
    padding: 2rem;
    width: calc(100% - 4rem);
  }
  .nadminverifyemailframe-header-title {
    font-size: 1.75rem;
  }
}

@media (max-width: 480px) {
  .nadminverifyemailframe-header-subtitle {
    font-size: 1rem;
  }
  .nadminverifyemailframe-form-container {
    padding: 1.5rem 1rem;
    width: calc(100% - 2rem);
  }
  .nadminverifyemailframe-header-title {
    font-size: 1.5rem;
  }
} 
 /**
 * @file NAdminAddFrame.css
 *
 * @requires NFrameTag.css
 *
 * @see DefaultAddFrame.js
 */

 .nadminaddframe{
    width: 100%;
    padding-top: 64px;
    padding-bottom: 10px;
}

.nadminaddframe-child-divparent {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    padding-top: 0;
    animation: nadminaddframe-fadeIn 0.6s ease-out;
}

.nadminaddframe-child-pagetitle {
    font-size: 2.8em;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    background: linear-gradient(45deg, var(--n-primary), var(--n-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: nadminaddframe-slideDown 0.8s ease-out;
}

/* Style de base pour la grille */
.nadminaddframe-child-divinputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 30px;
    margin-bottom: 20px;
    animation: nadminaddframe-slideUp 0.8s ease-out 0.4s backwards;
    background: var(--n-bg-secondary);
    box-shadow: 0 2px 5px var(--n-shadow);
    border-radius: 16px;
    padding: 20px;
}

/* Style quand les deux colonnes sont présentes */
.nadminaddframe-child-divinputs.has-both-columns {
    grid-template-columns: 1fr 1.5fr;
}

/* Style pour une seule colonne */
.nadminaddframe-child-divinputimage:only-child,
.nadminaddframe-child-divinputother:only-child {
    grid-column: 1 / -1;
    max-width: 100%;
}

/* Gestion des éléments masqués */
.nadminaddframe-child-divinputimage[style*="display: none"] ~ .nadminaddframe-child-divinputother,
.nadminaddframe-child-divinputother[style*="display: none"] ~ .nadminaddframe-child-divinputimage {
    grid-column: 1 / -1;
    max-width: 100%;
}

/* Style pour la section image */
.nadminaddframe-child-divinputimage {
    text-align: center;
}

.nadminaddframe-child-inputimage {
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    --n-image-width: 100%;
}

/* Style pour les autres inputs */
.nadminaddframe-child-divinputother {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.nadminaddframe-child-input {
    width: 100%;
}

/* Boutons d'action */
.nadminaddframe-child-actionbuttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 10px;
    border-radius: 16px;
    background: var(--n-bg-secondary);
    box-shadow: 0 2px 5px var(--n-shadow);
    animation: nadminaddframe-fadeIn 0.8s ease-out 0.6s backwards;
}

.nadminaddframe-child-backbutton {
    padding: 12px 24px;
    border-radius: 50px;
    background: transparent;
    color: var(--n-text);
    border: 2px solid var(--n-border);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nadminaddframe-child-backbutton:hover {
    background: var(--n-bg);
    border-color: var(--n-text);
}

.nadminaddframe-child-backbutton::before {
    content: '←';
    font-size: 1.2em;
}

.nadminaddframe-child-nextbutton {
    padding: 12px 32px;
    border-radius: 50px;
    background: var(--n-primary);
    color: var(--n-text-inverse);
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nadminaddframe-child-nextbutton:hover {
    background: var(--n-hover);
    transform: translateX(5px);
}

/* Animations */
@keyframes nadminaddframe-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes nadminaddframe-slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes nadminaddframe-slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .nadminaddframe-child-divinputs {
        grid-template-columns: 1fr;
    }

    .nadminaddframe-child-pagetitle {
        font-size: 2.2em;
    }

    .nadminaddframe-child-description {
        font-size: 1em;
        padding: 15px;
    }

    .nadminaddframe-child-actionbuttons {
        gap: 15px;
    }

    .nadminaddframe-child-backbutton,
    .nadminaddframe-child-nextbutton {
        font-size: 0.85em;
    }
    
    .nadminaddframe-child-backbutton {
        padding: 8px 16px;
    }

    .nadminaddframe-child-nextbutton {
        padding: 8px 24px;
    }
}

@media screen and (max-width: 480px) {
    .nadminaddframe-child-pagetitle {
        font-size: 1.8em;
    }
}

/* État de chargement */
.nadminaddframe-child-loading {
    position: relative;
    overflow: hidden;
}

.nadminaddframe-child-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--n-bg-secondary) 50%,
        transparent 100%);
    animation: nadminaddframe-shimmer 1.5s infinite;
}

@keyframes nadminaddframe-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
/**
 * @file NAdminEditFrame.css
 *
 * @requires NFrameTag.css
 */

 @keyframes nadmineditframe-fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Animation pour le pulsing des boutons */
  @keyframes nadmineditframe-pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
  }
  
  .nadmineditframe {
      width: 100%;
      padding-top: 64px;
      padding-bottom: 20px;
  }
  
  .nadmineditframe-child-divparent {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      padding-top: 0;
  }
  
  /* Titre de la page */
  .nadmineditframe-child-pagetitle {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--n-text);
    margin-bottom: 30px;
    text-align: left;
    animation: nadmineditframe-fadeIn 0.8s ease-out;
    position: relative;
  }
  
  .nadmineditframe-child-pagetitle::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--n-primary), var(--n-accent));
    border-radius: 2px;
  }
  
  /* Responsive design */
  @media (max-width: 768px) {
      .nadmineditframe-child-divparent {
          padding: 15px;
          padding-top: 0;
      }
  
      .nadmineditframe-child-pagetitle {
          font-size: 1.2rem;
      }
  }
/**
 * @file NAdminEditItem.css
 *
 * @requires NItemTag.css
 */

 .nadminedititem-inner-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
    background: var(--n-bg);
    border-radius: 12px;
    box-shadow: 0 2px 5px var(--n-shadow);
    margin-bottom: 20px;
}

/* Section des inputs */
.nadminedititem-child-divinputs {
    display: grid;
    gap: 24px;
    margin-bottom: 32px;
}

/* Section image */
.nadminedititem-child-divinputimage {
    width: calc(100% - 40px);
    padding: 20px;
    background: var(--n-bg-secondary);
    transition: all 0.3s ease;
}

.nadminedititem-child-inputimage {
    width: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    --n-image-width: 100%;
}

/* Section autres inputs */
.nadminedititem-child-divinputother {
    display: grid;
    gap: 16px;
}

/* Style commun pour les inputs */
.nadminedititem-child-input {
    width: calc(100% - 32px);
    padding: 12px 16px;
    border: 1px solid var(--n-border);
    border-radius: 8px;
    background: var(--n-bg-secondary);
    color: var(--n-text);
    transition: all 0.2s ease;
}

/* Style spécifique pour la textarea */
.nadminedititem-child-inputarea {
    min-height: 120px;
    resize: vertical;
}

/* Section des boutons d'action */
.nadminedititem-child-actionbuttons {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--n-border);
}

/* Style des boutons */
.nadminedititem-child-backbutton,
.nadminedititem-child-nextbutton {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.nadminedititem-child-backbutton {
    background: var(--n-bg-secondary);
    color: var(--n-text);
    border: 1px solid var(--n-border);
}

.nadminedititem-child-nextbutton {
    background: var(--n-primary);
    color: var(--n-text-inverse);
}

.nadminedititem-child-backbutton:hover {
    background: var(--n-bg-secondary-hover);
}

.nadminedititem-child-nextbutton:hover {
    background: var(--n-accent);
    transform: translateY(-2px);
}

.nadminedititem-child-backbutton:active,
.nadminedititem-child-nextbutton:active {
    transform: translateY(1px);
}

/* Animation d'entrée */
@keyframes nadminedititem-fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nadminedititem-inner-wrapper {
    animation: nadminedititem-fadeIn 0.3s ease-out;
}

/* Responsive design */
@media (max-width: 768px) {
    .nadminedititem-inner-wrapper {
        margin: 16px;
        padding: 16px;
    }

    .nadminedititem-child-actionbuttons {
        gap: 12px;
    }
}
/**
 * @file NAdminItem.css
 *
 * @requires NItemTag.css
 */

/* Container principal */
.nadminitem {
    background: var(--n-bg);
    border-radius: 12px;
    padding: 4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
    display: block;
    position: relative;
    max-width: 800px;
    width: calc(100% - 28px);
    margin: auto;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px var(--n-shadow);
}

.nadminitem:hover {
    background: var(--n-bg-secondary);
    transform: translateX(4px);
    box-shadow: 0 4px 12px var(--n-shadow);
}

/* Structure de la table */
.nadminitem-child-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* Cellule de l'image */
.nadminitem-child-image-td {
    width: 64px;
    padding: 8px;
    vertical-align: top;
}

/* Style de l'image */
.nadminitem-child-image {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    transition: transform 0.3s ease;
    border: 2px solid var(--n-border);
    background: var(--n-bg-secondary);
}

.nadminitem:hover .nadminitem-child-image {
    transform: scale(1.1);
    border-color: var(--n-primary);
}

/* Cellule du contenu */
.nadminitem-child-nom-td {
    padding-top: 8px;
    padding-left: 12px;
    padding-right: 12px;
    vertical-align: middle;
}

/* Style du titre */
.nadminitem-child-titre {
    font-size: 1rem;
    font-weight: 600;
    color: var(--n-text);
    margin-bottom: 4px;
    line-height: 1.4;
}

.nadminitem-child-check {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 25px;
    height: 25px;
    z-index: 2;
}

.nadminitem-child-resume-td {
    padding-left: 12px;
    padding-right: 12px;
    vertical-align: top;
}

/* Style du message */
.nadminitem-child-resume {
    font-size: 0.9rem;
    color: var(--n-text-muted);
    margin-bottom: 8px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Style de la textId */
.nadminitem-child-textId {
    font-size: 0.8rem;
    color: var(--n-text-muted);
    opacity: 0.8;
    font-weight: 500;
    text-align: right;
}

/* Animation d'apparition */
@keyframes nadminitem-slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.nadminitem {
    animation: nadminitem-slideIn 0.3s ease-out forwards;
}

/* État de chargement */
.nadminitem.loading {
    pointer-events: none;
    position: relative;
    overflow: hidden;
}

.nadminitem.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--n-bg-secondary) 50%,
        transparent 100%
    );
    animation: nadminitem-shimmer 1.5s infinite linear;
    transform: translateX(-100%);
}

@keyframes nadminitem-shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .nadminitem {
        margin-bottom: 8px;
    }

    .nadminitem-child-image-td {
        width: 56px;
        padding: 8px;
    }

    .nadminitem-child-image {
        width: 40px;
        height: 40px;
    }

    .nadminitem-child-nom-td {
        padding-top: 4px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .nadminitem-child-resume-td {
        padding-left: 8px;
        padding-right: 8px;
    }

    .nadminitem-child-titre {
        font-size: 0.95rem;
    }

    .nadminitem-child-resume {
        font-size: 0.85rem;
    }
}

/* Animation de suppression */
@keyframes notificationFadeOut {
    to {
        opacity: 0;
        transform: translateX(100%);
        height: 0;
        margin: 0;
        padding: 0;
    }
}

.nadminitem.removing {
    animation: notificationFadeOut 0.3s ease-out forwards;
}

/* État sélectionné - overlay sombre */
.nadminitem.selected {
    position: relative;
    border-color: var(--n-primary);
}

/* Overlay sombre transparent */
.nadminitem.selected::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    z-index: 1;
}

/* Mode sombre */
.ntheme-dark .nadminitem.selected::before {
    background-color: rgba(255, 255, 255, 0.05);
}
/**
 * @file NAdminItemFrame.css
 *
 * @requires NFrameTag.css
 */

 @keyframes nadminitemframe-fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Animation pour le pulsing des boutons */
  @keyframes nadminitemframe-pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
  }
  
  .nadminitemframe {
      width: 100%;
      padding-top: 64px;
      padding-bottom: 74px;
  }
  
  .nadminitemframe-child-divparent {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      padding-top: 0;
  }
  
  /* Titre de la page */
  .nadminitemframe-child-pagetitle {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--n-text);
    margin-bottom: 30px;
    text-align: left;
    animation: nadminitemframe-fadeIn 0.8s ease-out;
    position: relative;
  }
  
  .nadminitemframe-child-pagetitle::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--n-primary), var(--n-accent));
    border-radius: 2px;
  }
  
  /* Responsive design */
  @media (max-width: 768px) {
      .nadminitemframe-child-divparent {
          padding: 15px;
          padding-top: 0;
      }
  
      .nadminitemframe-child-pagetitle {
          font-size: 1.2rem;
      }
  }
/**
 * @file NAdminItemFull.css
 *
 * @requires NItemTag.css
 */

 .nadminitemfull-child-divparent {
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 15px;
    padding: 24px;
    background: var(--n-bg);
    border-radius: 12px;
    box-shadow: 0 2px 5px var(--n-shadow);
}

.nadminitemfull-child-pagetitle {
    font-size: 0.7rem;
    color: var(--n-text-muted);
    text-align: right;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--n-border);
}

.nadminitemfull-child-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
}

.nadminitemfull-child-td-label,
.nadminitemfull-child-td-value {
    padding: 12px 16px;
    background: var(--n-bg-secondary);
    border-radius: 8px;
}

.nadminitemfull-child-td-label {
    width: 200px;
    border-right: 1px solid var(--n-border);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.nadminitemfull-child-td-label-area,
.nadminitemfull-child-td-label-images {
    vertical-align: top;
}

.nadminitemfull-child-td-value {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.nadminitemfull-child-label {
    color: var(--n-text-muted);
    font-size: 0.95rem;
}

.nadminitemfull-child-value {
    color: var(--n-text);
    font-size: 1rem;
}

.nadminitemfull-child-image {
    max-width: 200px;
    height: auto;
    border-radius: 8px;
    display: block;
}

.nadminitemfull-child-image-item {
    max-width: 200px;
    height: auto;
    border-radius: 8px;
    display: inline-block;
    margin: 5px;
}

.nadminitemfull-child-link {
    color: var(--n-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.nadminitemfull-child-link:hover {
    color: var(--n-accent);
    text-decoration: underline;
}

/* Animation d'entrée */
@keyframes nadminitemfull-fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nadminitemfull-child-divparent {
    animation: nadminitemfull-fadeIn 0.3s ease-out;
}

/* Responsive design */
@media (max-width: 768px) {
    .nadminitemfull-child-divparent {
        padding: 16px;
        margin: 16px;
    }

    .nadminitemfull-child-td-label,
    .nadminitemfull-child-td-value {
        display: block;
        width: calc(100% - 32px) !important;
    }

    .nadminitemfull-child-td-label {
        border-right: none;
        border-bottom: 1px solid var(--n-border);
        border-radius: 8px 8px 0 0;
        padding-bottom: 8px;
    }

    .nadminitemfull-child-td-value {
        border-radius: 0 0 8px 8px;
        padding-top: 8px;
    }

    .nadminitemfull-child-image {
        max-width: 100%;
    }
}
/**
 * @file NAdminItemsFrame.css
 *
 * @requires NFrameTag.css
 */

 @keyframes nadminitemsframe-fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .nadminitemsframe {
      width: 100%;
      padding-top: 64px;
      padding-bottom: 64px;
  }
  
  .nadminitemsframe-child-divparent {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      padding-top: 0;
  }
  
  /* Titre de la page */
  .nadminitemsframe-child-pagetitle {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--n-text);
    margin-bottom: 40px;
    text-align: left;
    animation: nadminitemsframe-fadeIn 0.8s ease-out;
    position: relative;
  }
  
  .nadminitemsframe-child-pagetitle::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--n-primary), var(--n-accent));
    border-radius: 2px;
  }
  
  /* Responsive design */
  @media (max-width: 768px) {
      .nadminitemsframe-child-divparent {
          padding: 15px;
          padding-top: 0;
      }
  
      .nadminitemsframe-child-pagetitle {
          font-size: 1.2rem;
      }
  }
/**
 * @file NAdminMenuPrincipaleFrame.css
 *
 * @requires NFrameTag.css
 */

 .nadminmenuprincipaleframe {
    width: 100%;
    padding-top: 64px;
}

/* Div parent */
.nadminmenuprincipaleframe-child-divparent {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px;
    height: 100%;
}

/* Header */
.nadminmenuprincipaleframe-child-header {
    text-align: center;
    margin-bottom: 40px;
}

/* Titre de la page */
.nadminmenuprincipaleframe-child-pagetitle {
    font-size: 28px;
    font-weight: 600;
    color: var(--n-text);
    margin: 0 0 32px 0;
    padding-bottom: 16px;
    position: relative;
}

.nadminmenuprincipaleframe-child-pagetitle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--n-primary);
    border-radius: 2px;
}

.nadminmenuprincipaleframe-child-divparentmenu {
    padding: 16px;
    padding-top: 0;
    max-width: 800px;
    margin: 0 auto;
}

.nadminmenuprincipaleframe-group{
    padding-top: 40px;
}

.nadminmenuprincipaleframe-group:first-child{
    padding-top: 0px;
}

.nadminmenuprincipaleframe-group-title {
    font-weight: bold;
    font-size: 1.1em;
    margin: 16px 0 8px 0;
    color: var(--n-text);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--n-text);
}

.nadminmenuprincipaleframe-group-title:first-child {
    padding-top: 0px;
    margin-top: 0;
}

/* Grid du menu */
.nadminmenuprincipaleframe-child-divmenu {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 24px;
    margin: 0 auto;
}

/* Style commun pour tous les boutons */
.nadminmenuprincipaleframe-child-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--n-bg-secondary);
    border-radius: 16px;
    text-decoration: none;
    color: var(--n-text);
    transition: all 0.3s ease;
    border: 1px solid var(--n-border);
    min-height: 140px;
}

.nadminmenuprincipaleframe-child-button table{
    text-align: center;
}

/* Images des boutons */
.nadminmenuprincipaleframe-child-button.nbutton-type-text-icon-top .nbutton-child-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.nadminmenuprincipaleframe-child-button.nbutton-type-text-icon-top .ntheme-dark.nbutton-child-icon {
    filter: invert(1);
}

/* Texte des boutons */
.nadminmenuprincipaleframe-child-button.nbutton-type-text-icon-top .nbutton-child-text {
    font-size: 90%;
    font-weight: bold;
    text-align: center;
    margin-top: 8px;
}

/* Effets hover */
.nadminmenuprincipaleframe-child-button:hover {
    transform: translateY(-4px);
    background: var(--n-bg);
    box-shadow: 0 8px 24px var(--n-shadow);
    border-color: var(--n-primary);
}

/* Effet hover sur les icônes */
.nadminmenuprincipaleframe-child-button.nbutton-type-text-icon-top:hover .nbutton-child-icon{
    transform: scale(1.1);
    filter: brightness(0) invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
}

/* Media queries */
@media (max-width: 768px) {
    .nadminmenuprincipaleframe-child-divparentmenu {
        padding: 12px;
    }

    .nadminmenuprincipaleframe-child-pagetitle {
        font-size: 24px;
        margin-bottom: 24px;
    }
}

@media (max-width: 480px) {
    .nadminmenuprincipaleframe-child-divparent {
        padding: 16px 12px;
    }

    .nadminmenuprincipaleframe-child-divmenu {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .nadminmenuprincipaleframe-child-button {
        padding: 16px;
        min-height: 120px;
    }
}

/* Animation d'entrée */
@keyframes nadminmenuprincipaleframe-fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nadminmenuprincipaleframe-child-divmenu {
    animation: nadminmenuprincipaleframe-fadeIn 0.5s ease-out;
}
/**
 * @file NAdminWelcomeFrame.css
 *
 * @requires NFrameTag.css
 */

/* 🔹 Animation pour les éléments qui apparaissent en fade-in & slide-up */
@keyframes nadminwelcomeframe-appear {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 📌 Styles principaux */
.nadminwelcomeframe {
    width: 100%;
    height: 100vh;
    background-color: var(--n-primary);
}

/* 🔹 Table enfant */
.nadminwelcomeframe-child-table {
    height: 100%;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

/* 🔹 Contenu centré */
.nadminwelcomeframe-child-td {
    vertical-align: middle;
    text-align: center;
}

/* 🔹 Logo */
.nadminwelcomeframe-child-logo {
    max-width: 60vw;
    max-height: 200px;
    opacity: 0;
    animation: nadminwelcomeframe-appear 1s ease-out 0.2s forwards;
    transition: transform 0.3s ease;
}

.nadminwelcomeframe-child-logo:hover {
    transform: scale(1.02) translateY(-5px);
}

/* 🔹 Slogan */
.nadminwelcomeframe-child-slogan {
    margin-top: 15px;
    font-size: 133%;
    font-weight: bold;
    color: var(--n-text);
    opacity: 0;
    animation: nadminwelcomeframe-appear 1s ease-out 0.5s forwards;
}
/**
 * @file NAdminExpItem.css
 *
 * @requires NItemTag.css
 */

 .nadminexpitem-child-edit-wrapper {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
}

.nadminexpitem-child-edit-button {
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: 8px;
    color: var(--n-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px var(--n-shadow);
}

.nadminexpitem-child-edit-button:hover {
    background: var(--n-bg-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--n-shadow);
}

.nadminexpitem-child-edit-button .nbutton-child-icon {
    width: 18px;
    height: 18px;
}

/* Section des boutons d'action */
.nadminexpitem-child-actionbuttons {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--n-border);
}

/* Style des boutons */
.nadminexpitem-child-backbutton,
.nadminexpitem-child-nextbutton {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.nadminexpitem-child-backbutton {
    background: var(--n-bg-secondary);
    color: var(--n-text);
    border: 1px solid var(--n-border);
}

.nadminexpitem-child-nextbutton {
    background: var(--n-primary);
    color: var(--n-text-inverse);
}

.nadminexpitem-child-backbutton:hover {
    background: var(--n-bg-secondary-hover);
}

.nadminexpitem-child-nextbutton:hover {
    background: var(--n-accent);
    transform: translateY(-2px);
}

.nadminexpitem-child-backbutton:active,
.nadminexpitem-child-nextbutton:active {
    transform: translateY(1px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .nadminexpitem-child-edit-wrapper {
        top: 4px;
        right: 4px;
    }

    .nadminexpitem-child-edit-button {
        padding: 8px 12px;
        font-size: 13px;
    }

    .nadminexpitem-child-actionbuttons {
        flex-direction: column-reverse;
        gap: 12px;
    }

    .nadminexpitem-child-backbutton,
    .nadminexpitem-child-nextbutton {
        width: 100%;
        text-align: center;
    }
}
/**
 * @file NAdminAdminNotificationLinkItem.css
 *
 * @requires NItemTag.css
 */

/* Container principal */
.nadminadminnotificationlinkitem {
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    border: 1px solid var(--n-border);
    border-radius: 5px;
    padding: 5px;
    background-color: var(--n-bg-secondary);
    margin: 5px;
    color: var(--n-text);
}

.nadminadminnotificationlinkitem:hover {
    text-decoration: underline;
}
/**
 * @file NAdminNavBar.css
 *
 * @requires NTag.css
 */

 .nadminnavbar {
    width: 100%;
    transition: box-shadow 0.3s ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.2);
    backdrop-filter: blur(10px);
    height: 64px;
    border-bottom: 1px solid var(--n-border);
    z-index: 1;
}

/* Table principale */
.nadminnavbar-child-table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

.nadminnavbar-child-tr {
    height: 100%;
}

/* Cellules de la table */
.nadminnavbar-child-td-search {
    vertical-align: middle;
    padding: 0 8px;
    width: 100%;
}

.nadminnavbar-child-td-logo,
.nadminnavbar-child-td-back,
.nadminnavbar-child-td-searchButton,
.nadminnavbar-child-td-compte,
.nadminnavbar-child-td-notification,
.nadminnavbar-child-td-menubutton {
    vertical-align: middle;
    padding: 0 8px;
    min-width: 40px;
    width: 40px;
    white-space: nowrap;
    text-align: center;
}

.nadminnavbar-child-td-back.ntheme-dark img,
.nadminnavbar-child-td-searchButton.ntheme-dark img,
.nadminnavbar-child-td-compte.ntheme-dark img,
.nadminnavbar-child-td-notification.ntheme-dark img,
.nadminnavbar-child-td-menubutton.ntheme-dark img {
    filter: invert(1);
}

/* Logo */
.nadminnavbar-child-td-logo {
    min-width: 48px;
    width: 48px;
    white-space: nowrap;
    text-align: center;
}

.nadminnavbar-child-logo {
    height: 32px;
    width: auto;
    display: block;
}

/* Bouton retour */
.nadminnavbar-child-button-back {
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nadminnavbar-child-button-back.nbutton-type-icon .nbutton-child-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.nadminnavbar-child-button-back.nbutton-type-icon:hover .nbutton-child-icon {
    transform: translateX(-4px);
}

.nadminnavbar-child-search {
    width: 100%;
    margin: auto;
    max-width: 450px;
    --n-input-height: 35;
}

/* Boutons d'action */
.nadminnavbar-child-button-search,
.nadminnavbar-child-button-compte,
.nadminnavbar-child-button-notification,
.nadminnavbar-child-button-menubutton {
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Images des boutons */
.nadminnavbar-child-button-search.nbutton-type-icon .nbutton-child-icon,
.nadminnavbar-child-button-notification.nbutton-type-icon .nbutton-child-icon,
.nadminnavbar-child-button-compte.nbutton-type-icon .nbutton-child-icon,
.nadminnavbar-child-button-menubutton.nbutton-type-icon .nbutton-child-icon {
    width: 24px;
    height: 24px;
    transition: all 0.3s ease;
}

/* États actifs et hover */
.nadminnavbar-child-button-search:hover,
.nadminnavbar-child-button-notification:hover,
.nadminnavbar-child-button-compte:hover,
.nadminnavbar-child-button-menubutton:hover {
    background: var(--n-bg-secondary);
}

.nadminnavbar-child-td-notification.active,
.nadminnavbar-child-td-compte.active,
.nadminnavbar-child-td-menubutton.active {
    color: var(--n-primary);
}

.nadminnavbar-child-td-notification.active .nbutton-child-icon,
.nadminnavbar-child-td-compte.active .nbutton-child-icon,
.nadminnavbar-child-td-menubutton.active .nbutton-child-icon {
    filter: brightness(0) invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
}

.nadminnavbar-child-countnotify {
    background-color: red;
    color: white;
    text-align: center;
    border-radius: 100px;
    padding: 2px 5px;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 0 5px var(--n-shadow);
    position: absolute;
    z-index: 1;
}

/* Media queries pour la responsivité */
@media (max-width: 768px) {
    .nadminnavbar-child-search {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .nadminnavbar {
        height: 56px;
    }

    .nadminnavbar-child-logo {
        height: 28px;
    }

    .nadminnavbar-child-search {
        height: 36px;
    }

    .nadminnavbar-child-button-search,
    .nadminnavbar-child-button-compte,
    .nadminnavbar-child-button-notification,
    .nadminnavbar-child-button-menubutton {
        width: 36px;
        height: 36px;
    }
}

/* Animation d'apparition */
@keyframes nadminnavbar-slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.nadminnavbar {
    animation: nadminnavbar-slideDown 0.3s ease-out;
}

/* Effet de scroll */
.nadminnavbar.scrolled {
    box-shadow: 0 5px 15px var(--n-shadow);
}

/* Bouton de suppression */
.nadminnavbar-child-td-delete {
    vertical-align: middle;
    padding: 0 8px;
    min-width: 40px;
    width: 40px;
    white-space: nowrap;
    text-align: center;
}

.nadminnavbar-child-button-delete {
    background: var(--n-error) !important;
    border: none;
    padding: 8px;
    cursor: pointer;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.nadminnavbar-child-button-delete.nbutton-type-icon .nbutton-child-icon {
    width: 18px;
    height: 20px;
    filter: brightness(0) invert(1) !important;
    transition: transform 0.3s ease;
}

.nadminnavbar-child-button-delete:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(var(--n-error), 0.4);
}

.nadminnavbar-child-button-delete:hover .nbutton-child-icon {
    transform: rotate(8deg);
}

/* Case à cocher "Tout sélectionner" */
.nadminnavbar-child-td-checkall {
    vertical-align: middle;
    padding: 0 8px;
    min-width: 40px;
    width: 40px;
    white-space: nowrap;
    text-align: center;
}

.nadminnavbar-child-checkall {
    position: relative;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

/* Style personnalisé de la checkbox */
.nadminnavbar-child-checkall input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.nadminnavbar-child-checkall .checkbox-custom {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: var(--n-bg);
    border: 2px solid var(--n-border);
    border-radius: 6px;
    transition: all 0.3s ease;
}

/* État hover */
.nadminnavbar-child-checkall:hover .checkbox-custom {
    border-color: var(--n-primary);
    background: var(--n-bg-secondary);
}

/* État coché */
.nadminnavbar-child-checkall input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--n-primary);
    border-color: var(--n-primary);
}

/* Création de la coche */
.nadminnavbar-child-checkall input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 4px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    animation: nadminnavbar-checkmarkAppear 0.2s ease-out;
}

@keyframes nadminnavbar-checkmarkAppear {
    from {
        opacity: 0;
        transform: rotate(45deg) scale(0.5);
    }
    to {
        opacity: 1;
        transform: rotate(45deg) scale(1);
    }
}

/* État indéterminé (certains éléments sélectionnés) */
.nadminnavbar-child-checkall input[type="checkbox"]:indeterminate + .checkbox-custom {
    background: var(--n-primary);
    border-color: var(--n-primary);
}

.nadminnavbar-child-checkall input[type="checkbox"]:indeterminate + .checkbox-custom::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 9px;
    width: 12px;
    height: 2px;
    background: white;
    animation: nadminnavbar-indeterminateAppear 0.2s ease-out;
}

@keyframes nadminnavbar-indeterminateAppear {
    from {
        opacity: 0;
        transform: scaleX(0);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Media queries pour la responsivité */
@media (max-width: 480px) {
    .nadminnavbar-child-button-delete {
        width: 36px;
        height: 36px;
    }

    .nadminnavbar-child-button-delete.nbutton-type-icon .nbutton-child-icon {
        width: 16px;
        height: 18px;
    }

    .nadminnavbar-child-checkall .checkbox-custom {
        width: 20px;
        height: 20px;
    }
}

/* Style du compteur de sélection */
.nadminnavbar-child-textcountselect {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--n-text);
    text-align: left;
}
/**
 * @file NAdminNavBarBottom.css
 *
 * @requires NTag.css
 */

 .nadminnavbarbottom {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,0.2);
    backdrop-filter: blur(10px);
    padding:0;
    border-top: 1px solid var(--n-border);
    z-index: 1;
}

/* Table principale */
.nadminnavbarbottom-child-table {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    border-spacing: 0;
}

.nadminnavbarbottom-child-tr {
    height: 64px;
}

/* Cellules de la table */
.nadminnavbarbottom-child-td-counter{
    padding: 0 16px;
    vertical-align: middle;
    width: 100%;
}

.nadminnavbarbottom-child-td-button {
    padding: 0 16px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Style du compteur */
.nadminnavbarbottom-child-counter {
    font-size: 0.9rem;
    color: var(--n-text-secondary);
    margin-right: 8px;
}

.nadminnavbarbottom-child-countselect {
    font-size: 0.9rem;
    color: var(--n-primary);
    font-weight: 500;
}

/* Style des boutons */
.nadminnavbarbottom-child-button {
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    border: none;
    background: var(--n-primary);
    color: var(--n-text-inverse);
    cursor: pointer;
}

.nadminnavbarbottom-child-button-option {
    background: transparent;
    color: var(--n-text);
}

.nadminnavbarbottom-child-check {
    width: 25px;
    height: 25px;
}

.nadminnavbarbottom-child-button:hover {
    background: var(--n-accent);
    transform: translateY(-2px);
}

.nadminnavbarbottom-child-button-option:hover {
    background: var(--n-bg-secondary);
}

/* Boutons du popup */
.nadminnavbarbottom-child-button-popup {
    width: 100%;
    padding: 12px 16px;
    text-align: left;
    border: none;
    background: transparent;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--n-text);
}

.nadminnavbarbottom-child-button-popup:hover {
    background: var(--n-bg-secondary);
}

.nadminnavbarbottom-child-button-popupdelete {
    color: var(--n-error);
}

/* Images des boutons */
.nadminnavbarbottom-child-button img,
.nadminnavbarbottom-child-button-popup img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.nadminnavbarbottom-child-button img {
    filter: invert(1);
}

.nadminnavbarbottom-child-button-option img {
    filter: none;
}

/* Responsive design */
@media (max-width: 992px) {
    .nadminnavbarbottom-child-tr {
        height: 56px;
    }

    .nadminnavbarbottom-child-td-counter {
        padding-left: 24px;
    }

    .nadminnavbarbottom-child-td-option {
        padding-right: 24px;
    }
}

@media (max-width: 700px) {
    .nadminnavbarbottom-child-counter,
    .nadminnavbarbottom-child-countselect {
        font-size: 0.8rem;
    }

    .nadminnavbarbottom-child-button-option {
        padding: 8px;
    }
}

/* État actif et focus des boutons */
.nadminnavbarbottom-child-button:active {
    transform: translateY(1px);
}
/**
 * @file NAdminLogItem.css
 *
 * @requires NItemTag.css
 */

.nadminlogitem {
    padding: 12px 22px;
    margin: auto;
    margin-bottom: 15px;
    border-radius: 10px;
    background: var(--n-bg-secondary, #f4f7fa);
    box-shadow: 0 1px 5px 0 var(--n-shadow, rgba(0,0,0,0.05));
    transition: box-shadow 0.15s;
    max-width: 900px;
}

.nadminlogitem.error {
    border-left: 8px solid var(--n-error);
}
.nadminlogitem.warning {
    border-left: 8px solid var(--n-warning);
}
.nadminlogitem.info {
    border-left: 8px solid var(--n-info);
}

.nadminlogitem-child-message {
    flex: 1;
    font-size: 1.06em;
    color: var(--n-text, #212235);
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-line;
    font-family: 'JetBrains Mono', 'Consolas', 'monospace', monospace;
    padding: 0.5em 0 0.5em 0;
}
/**
 * @file NAdminParametresFrame.css
 *
 * @requires NFrameTag.css
 */
  
 .nadminparametresframe {
    width: 100%;
    padding-top: 64px;
}

.nadminparametresframe-child-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
}

.nadminparametresframe-child-section {
    background-color: var(--n-bg-secondary);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid var(--n-border);
}

.nadminparametresframe-child-section-title {
    font-size: 1.5em;
    color: var(--n-text);
    margin-bottom: 8px;
}

.nadminparametresframe-child-section-desc {
    color: var(--n-text-muted);
    margin-bottom: 20px;
}

.nadminparametresframe-child-language-selector {
    width: 100%;
    max-width: 300px;
}

.nadminparametresframe-child-check-update-button {
    background-color: var(--n-primary);
    color: var(--n-text-inverse);
    padding: 12px 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.nadminparametresframe-child-check-update-button:hover {
    background-color: var(--n-hover);
    transform: translateY(2px);
}

.nadminparametresframe-child-clean-cache-button {
    background-color: var(--n-error);
    color: var(--n-text-inverse);
    padding: 12px 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.nadminparametresframe-child-clean-cache-button:hover {
    box-shadow: inset 0 0 0 50px var(--n-shadow);
    transform: translateY(2px);
}

.nadminparametresframe-child-check-update-button img,
.nadminparametresframe-child-clean-cache-button img {
    filter: invert(1);
}
/**
 * @file NAdminSauvegardesFrame.css
 *
 * @requires NFrameTag.css
 */
  
 .nadminsauvegardesframe {
    width: 100%;
    padding-top: 64px;
}

.nadminsauvegardesframe-child-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
}

.nadminsauvegardesframe-child-section {
    background-color: var(--n-bg-secondary);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid var(--n-border);
}

.nadminsauvegardesframe-child-section-title {
    font-size: 1.5em;
    color: var(--n-text);
    margin-bottom: 8px;
}

.nadminsauvegardesframe-child-section-desc {
    color: var(--n-text-muted);
    margin-bottom: 20px;
}

.nadminsauvegardesframe-child-selector {
    width: 100%;
    max-width: 300px;
}

.nadminsauvegardesframe-child-data-selector-dure {
    margin-top: 25px;
}

.nadminsauvegardesframe-child-button {
    background-color: var(--n-primary);
    color: var(--n-text-inverse);
    padding: 12px 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.nadminsauvegardesframe-child-button:hover {
    background-color: var(--n-hover);
    transform: translateY(2px);
}

.nadminsauvegardesframe-child-button img {
    filter: invert(1);
}
/**
 * @file NAdminModifyUserCodeAccesFrame.css
 *
 * @requires NFrameTag.css
 */
 .nadminmodifyusercodeaccesframe {
    width: 100%;
    min-height: calc(100vh - 65px);
    padding-top: 65px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.nadminmodifyusercodeaccesframe-child-table {
    width: 100%;
    height: 100%;
}

.nadminmodifyusercodeaccesframe-child-td {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    padding: clamp(0.5rem, 2vw, 2rem);
}

.nadminmodifyusercodeaccesframe-child-innerwrapper {
    max-width: clamp(280px, 95vw, 500px);
    margin: 0 auto;
}

.nadminmodifyusercodeaccesframe-child-formwrapper {
    background: var(--n-bg-secondary);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: clamp(12px, 3vw, 24px);
    padding: clamp(1rem, 2.5vw, 2.5rem);
    box-shadow: 0 clamp(4px, 1vw, 8px) clamp(20px, 5vw, 32px) var(--n-shadow);
    border: 1px solid color-mix(in srgb, var(--n-border) 20%, transparent);
    animation: nadminmodifyusercodeaccesframe-slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes nadminmodifyusercodeaccesframe-slideUp {
    from { 
        opacity: 0; 
        transform: translateY(clamp(20px, 5vw, 40px)); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.nadminmodifyusercodeaccesframe-title {
    font-size: clamp(1.125rem, 3.5vw, 1.75rem);
    font-weight: bold;
    color: var(--n-primary);
    margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
}

.nadminmodifyusercodeaccesframe-description {
    font-size: clamp(0.8125rem, 2.25vw, 1rem);
    color: var(--n-text-muted);
    margin-bottom: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.5;
}

/* Sections */
.nadminmodifyusercodeaccesframe-section {
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
    animation: nadminmodifyusercodeaccesframe-fadeIn 0.6s ease-out;
    animation-fill-mode: both;
}

.nadminmodifyusercodeaccesframe-section:nth-child(1) { animation-delay: 0.1s; }
.nadminmodifyusercodeaccesframe-section:nth-child(2) { animation-delay: 0.2s; }
.nadminmodifyusercodeaccesframe-section:nth-child(3) { animation-delay: 0.3s; }

@keyframes nadminmodifyusercodeaccesframe-fadeIn {
    from {
        opacity: 0;
        transform: translateY(clamp(10px, 2.5vw, 20px));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nadminmodifyusercodeaccesframe-section-old {
    margin-bottom: clamp(2rem, 4vw, 4rem);
    border-bottom: 1px solid var(--n-border);
    padding-bottom: clamp(2rem, 4vw, 4rem);
}

.nadminmodifyusercodeaccesframe-child-input {
    width: 100%;
    margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
}

/* Section actions */
.nadminmodifyusercodeaccesframe-actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: clamp(0.75rem, 2vw, 1rem);
    margin-top: clamp(1.5rem, 4vw, 2rem);
    padding-top: clamp(1rem, 3vw, 1.5rem);
    border-top: 1px solid color-mix(in srgb, var(--n-border) 20%, transparent);
}

.nadminmodifyusercodeaccesframe-child-savebutton {
    background: var(--n-primary);
    color: var(--n-text-inverse);
    border: none;
    border-radius: clamp(8px, 2vw, 12px);
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 3vw, 2rem);
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nadminmodifyusercodeaccesframe-child-savebutton:hover {
    background: color-mix(in srgb, var(--n-primary) 90%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 clamp(2px, 0.5vw, 4px) clamp(8px, 2vw, 12px) color-mix(in srgb, var(--n-primary) 30%, transparent);
}

.nadminmodifyusercodeaccesframe-child-savebutton:active {
    transform: translateY(0);
    box-shadow: 0 clamp(1px, 0.25vw, 2px) clamp(4px, 1vw, 6px) color-mix(in srgb, var(--n-primary) 30%, transparent);
}

.nadminmodifyusercodeaccesframe-child-cancelbutton {
    background: color-mix(in srgb, var(--n-bg) 80%, transparent);
    color: var(--n-text);
    border: 1px solid color-mix(in srgb, var(--n-border) 40%, transparent);
    border-radius: clamp(8px, 2vw, 12px);
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 3vw, 2rem);
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nadminmodifyusercodeaccesframe-child-cancelbutton:hover {
    background: color-mix(in srgb, var(--n-hover) 20%, transparent);
    border-color: color-mix(in srgb, var(--n-border) 60%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 clamp(2px, 0.5vw, 4px) clamp(8px, 2vw, 12px) color-mix(in srgb, var(--n-shadow) 20%, transparent);
}

.nadminmodifyusercodeaccesframe-child-cancelbutton:active {
    transform: translateY(0);
    box-shadow: 0 clamp(1px, 0.25vw, 2px) clamp(4px, 1vw, 6px) color-mix(in srgb, var(--n-shadow) 20%, transparent);
}

/* Lien retour */
.nadminmodifyusercodeaccesframe-child-backlink {
    display: block;
    text-align: center;
    margin-top: clamp(1rem, 3vw, 1.5rem);
    padding-top: clamp(1rem, 3vw, 1.5rem);
    border-top: 1px solid color-mix(in srgb, var(--n-border) 20%, transparent);
    color: var(--n-text-muted);
    text-decoration: none;
    font-size: clamp(0.8125rem, 2.25vw, 0.9375rem);
    transition: all 0.3s ease;
}

.nadminmodifyusercodeaccesframe-child-backlink:hover {
    color: var(--n-primary);
    transform: translateY(-1px);
}

/* Thème sombre */
.nadminmodifyusercodeaccesframe-child-formwrapper.ntheme-dark {
    background: color-mix(in srgb, var(--n-bg) 90%, transparent);
    border-color: color-mix(in srgb, var(--n-border) 40%, transparent);
}

.nadminmodifyusercodeaccesframe-child-cancelbutton.ntheme-dark {
    background: color-mix(in srgb, var(--n-bg) 70%, transparent);
    border-color: color-mix(in srgb, var(--n-border) 50%, transparent);
}
/**
 * @file NAdminModifyUserMdpFrame.css
 *
 * @requires NFrameTag.css
 */
.nadminmodifyusermdpframe {
    width: 100%;
    min-height: calc(100vh - 65px);
    padding-top: 65px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.nadminmodifyusermdpframe-child-table {
    width: 100%;
    height: 100%;
}

.nadminmodifyusermdpframe-child-td {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    padding: clamp(0.5rem, 2vw, 2rem);
}

.nadminmodifyusermdpframe-child-innerwrapper {
    max-width: clamp(280px, 95vw, 500px);
    margin: 0 auto;
}

.nadminmodifyusermdpframe-child-formwrapper {
    background: var(--n-bg-secondary);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: clamp(12px, 3vw, 24px);
    padding: clamp(1rem, 2.5vw, 2.5rem);
    box-shadow: 0 clamp(4px, 1vw, 8px) clamp(20px, 5vw, 32px) var(--n-shadow);
    border: 1px solid color-mix(in srgb, var(--n-border) 20%, transparent);
    animation: nadminmodifyusermdpframe-slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes nadminmodifyusermdpframe-slideUp {
    from { 
        opacity: 0; 
        transform: translateY(clamp(20px, 5vw, 40px)); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.nadminmodifyusermdpframe-title {
    font-size: clamp(1.125rem, 3.5vw, 1.75rem);
    font-weight: bold;
    color: var(--n-primary);
    margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
}

.nadminmodifyusermdpframe-description {
    font-size: clamp(0.8125rem, 2.25vw, 1rem);
    color: var(--n-text-muted);
    margin-bottom: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.5;
}

/* Sections */
.nadminmodifyusermdpframe-section {
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
    animation: nadminmodifyusermdpframe-fadeIn 0.6s ease-out;
    animation-fill-mode: both;
}

.nadminmodifyusermdpframe-section:nth-child(1) { animation-delay: 0.1s; }
.nadminmodifyusermdpframe-section:nth-child(2) { animation-delay: 0.2s; }
.nadminmodifyusermdpframe-section:nth-child(3) { animation-delay: 0.3s; }

@keyframes nadminmodifyusermdpframe-fadeIn {
    from {
        opacity: 0;
        transform: translateY(clamp(10px, 2.5vw, 20px));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nadminmodifyusermdpframe-section-old {
    margin-bottom: clamp(2rem, 4vw, 4rem);
    border-bottom: 1px solid var(--n-border);
    padding-bottom: clamp(2rem, 4vw, 4rem);
}

.nadminmodifyusermdpframe-child-input {
    width: 100%;
    margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
}

/* Section actions */
.nadminmodifyusermdpframe-actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: clamp(0.75rem, 2vw, 1rem);
    margin-top: clamp(1.5rem, 4vw, 2rem);
    padding-top: clamp(1rem, 3vw, 1.5rem);
    border-top: 1px solid color-mix(in srgb, var(--n-border) 20%, transparent);
}

.nadminmodifyusermdpframe-child-savebutton {
    background: var(--n-primary);
    color: var(--n-text-inverse);
    border: none;
    border-radius: clamp(8px, 2vw, 12px);
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 3vw, 2rem);
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nadminmodifyusermdpframe-child-savebutton:hover {
    background: color-mix(in srgb, var(--n-primary) 90%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 clamp(2px, 0.5vw, 4px) clamp(8px, 2vw, 12px) color-mix(in srgb, var(--n-primary) 30%, transparent);
}

.nadminmodifyusermdpframe-child-savebutton:active {
    transform: translateY(0);
    box-shadow: 0 clamp(1px, 0.25vw, 2px) clamp(4px, 1vw, 6px) color-mix(in srgb, var(--n-primary) 30%, transparent);
}

.nadminmodifyusermdpframe-child-cancelbutton {
    background: color-mix(in srgb, var(--n-bg) 80%, transparent);
    color: var(--n-text);
    border: 1px solid color-mix(in srgb, var(--n-border) 40%, transparent);
    border-radius: clamp(8px, 2vw, 12px);
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 3vw, 2rem);
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nadminmodifyusermdpframe-child-cancelbutton:hover {
    background: color-mix(in srgb, var(--n-hover) 20%, transparent);
    border-color: color-mix(in srgb, var(--n-border) 60%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 clamp(2px, 0.5vw, 4px) clamp(8px, 2vw, 12px) color-mix(in srgb, var(--n-shadow) 20%, transparent);
}

.nadminmodifyusermdpframe-child-cancelbutton:active {
    transform: translateY(0);
    box-shadow: 0 clamp(1px, 0.25vw, 2px) clamp(4px, 1vw, 6px) color-mix(in srgb, var(--n-shadow) 20%, transparent);
}

/* Lien retour */
.nadminmodifyusermdpframe-child-backlink {
    display: block;
    text-align: center;
    margin-top: clamp(1rem, 3vw, 1.5rem);
    padding-top: clamp(1rem, 3vw, 1.5rem);
    border-top: 1px solid color-mix(in srgb, var(--n-border) 20%, transparent);
    color: var(--n-text-muted);
    text-decoration: none;
    font-size: clamp(0.8125rem, 2.25vw, 0.9375rem);
    transition: all 0.3s ease;
}

.nadminmodifyusermdpframe-child-backlink:hover {
    color: var(--n-primary);
    transform: translateY(-1px);
}

/* Thème sombre */
.nadminmodifyusermdpframe-child-formwrapper.ntheme-dark {
    background: color-mix(in srgb, var(--n-bg) 90%, transparent);
    border-color: color-mix(in srgb, var(--n-border) 40%, transparent);
}

.nadminmodifyusermdpframe-child-cancelbutton.ntheme-dark {
    background: color-mix(in srgb, var(--n-bg) 70%, transparent);
    border-color: color-mix(in srgb, var(--n-border) 50%, transparent);
}
/**
 * @file NAdminUserProfilFrame.css
 *
 * @requires NFrameTag.css
 */

 .nadminuserprofilframe {
    width: 100%;
    padding-top: 64px;
    padding-bottom: 20px;
}
/**
 * @file NAdminUserProfilItemFull.css
 *
 * @requires NItemTag.css
 */

 .nadminuserprofilitemfull-inner-wrapper {
    max-width: 900px;
    width: calc(100% - 48px);
    margin: 32px auto;
    background: var(--n-bg);
    border-radius: 16px;
    box-shadow: 0 1px 4px var(--n-shadow);
    overflow: hidden;
    border: 1px solid var(--n-border);
}

/* En-tête du profil */
.nadminuserprofilitemfull-child-header {
    position: relative;
    min-height: 270px;
    overflow: hidden;
}

.nadminuserprofilitemfull-child-bgimage {
    width: 100%;
    height: 200px;
    object-fit: cover;
    filter: brightness(0.9);
    transition: transform 0.3s ease;
    border-bottom: 1px solid var(--n-border);
}

.nadminuserprofilitemfull-child-bgimage:hover {
    transform: scale(1.05);
}

.nadminuserprofilitemfull-child-photo-wrapper {
    position: absolute;
    bottom: 10px;
    left: 48px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid var(--n-bg);
    box-shadow: 0 4px 12px var(--n-shadow);
    overflow: hidden;
    background-color: white;
    z-index: 2;
    transition: transform 0.3s ease;
}

.nadminuserprofilitemfull-child-photo-wrapper:hover {
    transform: scale(1.05);
}

.nadminuserprofilitemfull-child-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Informations principales */
.nadminuserprofilitemfull-child-maininfo {
    padding: 72px 48px 32px;
    padding-top: 40px;
}

.nadminuserprofilitemfull-child-name-wrapper {
    display: flex;
    gap: 12px;
    align-items: baseline;
    margin-bottom: 24px;
}

.nadminuserprofilitemfull-child-nom,
.nadminuserprofilitemfull-child-prenom {
    font-size: 28px;
    font-weight: 600;
    color: var(--n-text);
    margin: 0;
}

.nadminuserprofilitemfull-child-prenom {
    font-weight: 400;
}

/* Style commun pour les wrappers d'information */
.nadminuserprofilitemfull-child-info-wrapper {
    display: flex;
    align-items: center;
    padding: 18px 24px;
    background: var(--n-bg);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--n-border);
    margin-bottom: 16px;
}

.nadminuserprofilitemfull-child-info-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    background: linear-gradient(
        135deg,
        var(--n-bg),
        var(--n-bg-secondary)
    );
    border-color: var(--n-primary);
}

.nadminuserprofilitemfull-child-info-div {
    display: flex;
    align-items: center;
    min-width: 180px;
}

/* Style des icônes */
.nadminuserprofilitemfull-child-icon {
    width: 24px;
    height: 24px;
    margin-right: 16px;
    filter: var(--n-icon-filter);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.nadminuserprofilitemfull-child-info-wrapper:hover .nadminuserprofilitemfull-child-icon {
    opacity: 1;
    transform: scale(1.1);
}

/* Style des titres */
.nadminuserprofilitemfull-child-email-title,
.nadminuserprofilitemfull-child-user-title {
    color: var(--n-text-muted);
    font-size: 0.95em;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Style des valeurs */
.nadminuserprofilitemfull-child-email,
.nadminuserprofilitemfull-child-username {
    color: var(--n-text);
    font-size: 1.05em;
    font-weight: 500;
    flex: 1;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 2px solid var(--n-border);
    transition: all 0.3s ease;
}

/* Effet de brillance au survol */
.nadminuserprofilitemfull-child-info-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.8s ease;
}

.nadminuserprofilitemfull-child-info-wrapper:hover::after {
    left: 100%;
}

/* Animation d'entrée */
.nadminuserprofilitemfull-child-info-wrapper {
    opacity: 0;
    animation: nadminuserprofilitemfull-slideInInfo 0.5s ease forwards;
    animation-delay: calc(var(--item-index, 0) * 0.1s);
}

@keyframes nadminuserprofilitemfull-slideInInfo {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .nadminuserprofilitemfull-child-info-wrapper {
        padding: 16px 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .nadminuserprofilitemfull-child-info-div {
        min-width: 100%;
        margin-bottom: 8px;
    }

    .nadminuserprofilitemfull-child-email,
    .nadminuserprofilitemfull-child-username {
        margin-left: 40px;
        padding-left: 0;
        border-left: none;
        position: relative;
    }

    .nadminuserprofilitemfull-child-email::before,
    .nadminuserprofilitemfull-child-username::before {
        content: '';
        position: absolute;
        left: -20px;
        top: 50%;
        width: 12px;
        height: 2px;
        background: var(--n-border);
        transform: translateY(-50%);
    }
}

.nadminuserprofilitemfull-child-additionalinfo{
    padding: 24px;
}

/* Animation d'apparition */
@keyframes nadminuserprofilitemfull-fadein {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nadminuserprofilitemfull-inner-wrapper {
    animation: nadminuserprofilitemfull-fadein 0.5s ease-out forwards;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nadminuserprofilitemfull-inner-wrapper {
        width: calc(100% - 32px);
        margin: 16px auto;
    }

    .nadminuserprofilitemfull-child-header {
        min-height: 220px;
    }

    .nadminuserprofilitemfull-child-bgimage {
        height: 160px;
    }

    .nadminuserprofilitemfull-child-photo-wrapper {
        left: 32px;
        width: 100px;
        height: 100px;
        bottom: 10px;
    }

    .nadminuserprofilitemfull-child-maininfo {
        padding: 64px 24px 24px;
    }

    .nadminuserprofilitemfull-child-nom,
    .nadminuserprofilitemfull-child-prenom {
        font-size: 24px;
    }
}

/* Conteneur principal des boutons */
.nadminuserprofilitemfull-child-actions-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(1rem, 3vw, 1.5rem);
    background: var(--n-bg-secondary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--n-text) 5%, transparent);
    border-top: 1px solid var(--n-border);
}

.nadminuserprofilitemfull-child-logout-button {
    padding: 10px;
    background-color: var(--n-warning);
    color: var(--n-text) !important;
    cursor: pointer;
}

.nadminuserprofilitemfull-child-logout-button:hover {
    color: var(--n-text-inverse) !important;
}

.nadminuserprofilitemfull-child-logout-button:hover img {
    filter: invert(1);
}

.nadminuserprofilitemfull-child-modify-button {
    padding: 10px;
    color: var(--n-text-inverse);
    cursor: pointer;
}

.nadminuserprofilitemfull-child-modify-button img {
    filter: invert(1);
}

.nadminuserprofilitemfull-child-button-pop {
    background: var(--n-bg);
    color: var(--n-text);
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1rem, 2.5vw, 1.25rem);
    font-size: clamp(0.75rem, 2vw, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
    text-decoration: none;
    width: 100%;
}

.nadminuserprofilitemfull-child-button-pop:hover {
    background: var(--n-bg-secondary);
    transform: translateY(-2px);
}

.nadminuserprofilitemfull-btn-logout {
    background: color-mix(in srgb, var(--n-error) 10%, transparent);
    color: var(--n-text);
    border: 2px solid var(--n-error);
    border-radius: 0.75rem;
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1rem, 2.5vw, 1.25rem);
    font-size: clamp(0.75rem, 2vw, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
    text-decoration: none;
}

.nadminuserprofilitemfull-btn-logout:hover {
    background: var(--n-error);
    color: var(--n-text-inverse);
    border-color: var(--n-error);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--n-error) 30%, transparent);
}

.nadminuserprofilitemfull-btn-logout img {
    filter: brightness(0) invert(0);
    transition: filter 0.3s ease;
}

.nadminuserprofilitemfull-btn-logout:hover img {
    filter: brightness(0) invert(1);
}
/**
 * @file NAdminUserNotificationFrame.css
 *
 * @requires NFrameTag.css
 */

 .nadminusernotificationframe {
    width: 100%;
    padding-top: 65px;
    padding-bottom: 10px;
}
/**
 * @file NAdminUserNotificationItem.css
 * 
 * @requires NItemTag.css
 */

.nadminusernotificationitem {
    background: var(--n-bg);
    border-radius: 12px;
    padding: 4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 1px solid var(--n-border);
    text-decoration: none;
    display: block;
    position: relative;
    margin-bottom: 1rem;
}

.nadminusernotificationitem:hover {
    background: var(--n-bg-secondary);
    transform: translateX(4px);
    box-shadow: 0 4px 12px var(--n-shadow);
}

/* Structure de la table */
.nadminusernotificationitem-child-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* Cellule de l'image */
.nadminusernotificationitem-child-image-td {
    width: 64px;
    padding: 8px;
    vertical-align: top;
}

/* Style de l'image */
.nadminusernotificationitem-child-image {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    transition: transform 0.3s ease;
    border: 2px solid var(--n-border);
    background: var(--n-bg-secondary);
}

.nadminusernotificationitem:hover .nadminusernotificationitem-child-image {
    transform: scale(1.1);
    border-color: var(--n-primary);
}

/* Cellule du contenu */
.nadminusernotificationitem-child-nom-td {
    padding: 12px 16px;
    vertical-align: top;
}

/* Style du titre */
.nadminusernotificationitem-child-titre {
    font-size: 1rem;
    font-weight: 600;
    color: var(--n-text);
    margin-bottom: 4px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Style du message */
.nadminusernotificationitem-child-message {
    font-size: 0.9rem;
    color: var(--n-text-muted);
    margin-bottom: 8px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

/* Style de la date */
.nadminusernotificationitem-child-date {
    font-size: 0.8rem;
    color: var(--n-text-muted);
    opacity: 0.8;
    font-weight: 500;
}

/* État non lu */
.nadminusernotificationitem.unread {
    background: linear-gradient(
        to right,
        var(--n-primary-light) 0%,
        var(--n-bg) 2%
    );
}

.nadminusernotificationitem.unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background: var(--n-primary);
    border-radius: 0 2px 2px 0;
}

/* Animation d'apparition */
@keyframes nadminusernotificationitem-slidein {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.nadminusernotificationitem {
    animation: nadminusernotificationitem-slidein 0.3s ease-out forwards;
}

/* État de chargement */
.nadminusernotificationitem.loading {
    pointer-events: none;
    position: relative;
    overflow: hidden;
}

.nadminusernotificationitem.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--n-bg-secondary) 50%,
        transparent 100%
    );
    animation: nadminusernotificationitem-shimmer 1.5s infinite linear;
    transform: translateX(-100%);
}

@keyframes nadminusernotificationitem-shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .nadminusernotificationitem-child-image-td {
        width: 56px;
        padding: 8px;
    }

    .nadminusernotificationitem-child-image {
        width: 40px;
        height: 40px;
    }

    .nadminusernotificationitem-child-nom-td {
        padding: 8px 12px;
    }

    .nadminusernotificationitem-child-titre {
        font-size: 0.95rem;
    }

    .nadminusernotificationitem-child-message {
        font-size: 0.85rem;
    }
}

@media screen and (max-width: 480px) {
    .nadminusernotificationitem-child-titre {
        font-size: 0.8rem;
    }

    .nadminusernotificationitem-child-message {
        font-size: 0.8rem;
    }
}

/* Animation de suppression */
@keyframes nadminusernotificationitem-fadeout {
    to {
        opacity: 0;
        transform: translateX(100%);
        height: 0;
        margin: 0;
        padding: 0;
    }
}

.nadminusernotificationitem.removing {
    animation: nadminusernotificationitem-fadeout 0.3s ease-out forwards;
}

/* État sélectionné - overlay sombre */
.nadminusernotificationitem.selected {
    position: relative;
    border-color: var(--n-primary);
}

/* Overlay sombre transparent */
.nadminusernotificationitem.selected::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    z-index: 1;
}

/* Cercle avec la coche */
.nadminusernotificationitem.selected::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-color: var(--n-primary);
    border-radius: 50%;
    z-index: 2;
    /* Création de la coche */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
    background-size: 16px;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    animation: nadminusernotificationitem-checkmarkAppear 0.2s ease-out;
}

/* Animation d'apparition de la coche */
@keyframes nadminusernotificationitem-checkmarkAppear {
    from {
        transform: translateY(-50%) scale(0);
        opacity: 0;
    }
    to {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }
}

/* Assurer que le contenu reste au-dessus de l'overlay */
.nadminusernotificationitem.selected .nadminusernotificationitem-child-table {
    position: relative;
    z-index: 2;
}

/* Mode sombre */
.ntheme-dark .nadminusernotificationitem.selected::before {
    background-color: rgba(255, 255, 255, 0.05);
}
/**
 * @file NAdminUserNotificationItemFull.css
 *
 * @requires NItemTag.css
 */

 .nadminusernotificationitemfull {
    width: calc(100% - 20px);
    margin: auto;
}

 .nadminusernotificationitemfull-inner-wrapper {
    max-width: 800px;
    width: calc(100% - 48px);
    margin: 32px auto;
    padding: 24px;
    background: var(--n-bg);
    box-shadow: 0 4px 12px var(--n-shadow);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--n-border);
}

.nadminusernotificationitemfull-inner-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--n-shadow);
}

.nadminusernotificationitemfull-child-titre {
    font-size: 24px;
    font-weight: 600;
    color: var(--n-text);
    margin: 0;
    line-height: 1.4;
    position: relative;
    padding-bottom: 16px;
}

.nadminusernotificationitemfull-child-titre::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 3px;
    background: var(--n-primary);
    border-radius: 2px;
}

.nadminusernotificationitemfull-child-conteneur {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--n-border);
}

.nadminusernotificationitemfull-child-date {
    font-size: 14px;
    color: var(--n-text-muted);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nadminusernotificationitemfull-child-date::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--n-primary);
    border-radius: 50%;
    display: inline-block;
}

.nadminusernotificationitemfull-child-delete {
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.nadminusernotificationitemfull-child-delete:hover {
    background: var(--n-error-light);
}

.nadminusernotificationitemfull-child-delete.nbutton-type-icon .nbutton-child-icon {
    width: 18px;
    height: 20px;
    transition: transform 0.3s ease;
    filter: var(--n-icon-filter);
}

.nadminusernotificationitemfull-child-delete:hover .nbutton-child-icon {
    transform: rotate(90deg);
    filter: var(--n-error-filter);
}

.nadminusernotificationitemfull-child-message {
    font-size: 16px;
    color: var(--n-text);
    line-height: 1.6;
    margin: 16px 0;
    text-align: justify;
}

.nadminusernotificationitemfull-child-image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--n-shadow);
    transition: transform 0.3s ease;
}

.nadminusernotificationitemfull-child-image:hover {
    transform: scale(1.02);
}

.nadminusernotificationitemfull-child-plusinfos {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    background: var(--n-primary);
    color: var(--n-text-inverse);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
    margin-top: 16px;
    width: fit-content;
}

.nadminusernotificationitemfull-child-plusinfos:hover {
    background: var(--n-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--n-shadow);
}

.nadminusernotificationitemfull-child-plusinfos:active {
    transform: translateY(0);
}

/* Animation d'apparition */
@keyframes nadminusernotificationitemfull-fadein {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nadminusernotificationitemfull-inner-wrapper {
    animation: nadminusernotificationitemfull-fadein 0.4s ease-out forwards;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nadminusernotificationitemfull-inner-wrapper {
        width: calc(100% - 40px);
        margin: 16px auto;
        padding: 20px;
    }

    .nadminusernotificationitemfull-child-titre {
        font-size: 20px;
    }

    .nadminusernotificationitemfull-child-message {
        font-size: 15px;
    }

    .nadminusernotificationitemfull-child-conteneur {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .nadminusernotificationitemfull-child-plusinfos {
        width: calc(100% - 48px);
        justify-content: center;
    }
}
/**
 * @file Theme.css
 * Thème basé sur l'identité visuelle PIQS
 *
 * @requires none
 */

 .ntheme-light {
    /* Couleurs principales */
    --n-primary: rgb(0, 123, 255);    /* Bleu PIQS - couleur dominante */
    --n-secondary: rgb(255, 193, 7);   /* Jaune doré pour les accents */
    --n-accent: rgb(0, 86, 179);      /* Bleu plus foncé pour les accents */

    /* Textes */
    --n-text: rgb(33, 37, 41);          /* Texte principal presque noir */
    --n-text-inverse: rgb(255, 255, 255);  /* Texte sur fond coloré */
    --n-text-muted: rgb(108, 117, 125);    /* Texte secondaire */

    /* Arrière-plans */
    --n-bg: rgb(255, 255, 255);            /* Fond principal blanc */
    --n-bg-secondary: rgb(248, 249, 250);  /* Fond secondaire très léger */

    /* Bordures */
    --n-border: rgb(233, 236, 239);        /* Bordures subtiles */

    /* États */
    --n-hover: rgb(0, 86, 179);         /* Bleu plus foncé au survol */
    --n-active: rgb(0, 56, 117);        /* Bleu encore plus foncé pour l'état actif */
    --n-disabled: rgb(226, 230, 234);      /* Gris clair pour éléments désactivés */

    /* Couleurs de notification */
    --n-success: rgb(40, 167, 69);       /* Vert pour succès */
    --n-error: rgb(220, 53, 69);         /* Rouge pour erreurs */
    --n-warning: rgb(255, 193, 7);       /* Jaune doré pour avertissements */
    --n-info: rgb(0, 123, 255);          /* Bleu PIQS pour informations */

    /* Ombres */
    --n-shadow: rgba(0, 123, 255, 0.15);
}

.ntheme-dark {
    /* Couleurs principales */
    --n-primary: rgb(64, 158, 255);       /* Bleu PIQS plus lumineux */
    --n-secondary: rgb(255, 213, 79);     /* Jaune doré plus lumineux */
    --n-accent: rgb(100, 181, 255);      /* Bleu vif pour les accents */

    /* Textes */
    --n-text: rgb(248, 249, 250);          /* Texte principal clair */
    --n-text-inverse: rgb(33, 37, 41);  /* Texte sur fond clair */
    --n-text-muted: rgb(173, 181, 189);    /* Texte secondaire */

    /* Arrière-plans */
    --n-bg: rgb(33, 37, 41);            /* Fond principal sombre */
    --n-bg-secondary: rgb(52, 58, 64);  /* Fond secondaire */

    /* Bordures */
    --n-border: rgb(73, 80, 87);        /* Bordures plus visibles */

    /* États */
    --n-hover: rgb(100, 181, 255);      /* Bleu plus lumineux au survol */
    --n-active: rgb(130, 200, 255);     /* Bleu encore plus lumineux pour l'état actif */
    --n-disabled: rgb(73, 80, 87);      /* Gris foncé pour éléments désactivés */

    /* Couleurs de notification */
    --n-success: rgb(64, 158, 255);     /* Bleu PIQS adapté au mode sombre */
    --n-error: rgb(255, 77, 77);         /* Rouge plus lumineux */
    --n-warning: rgb(255, 213, 79);     /* Jaune doré adapté */
    --n-info: rgb(100, 181, 255);       /* Bleu vif pour informations */

    /* Ombres */
    --n-shadow: rgba(64, 158, 255, 0.2);
}

/**
 * @file Main.css
 *
 * @requires NAdminMain.css
 */
/**
 * @file WelcomeFrame.css
 * @description Styles modernes et élégants pour la page Welcome
 *
 * @requires Theme.css
 */

/* ===== CONTAINER PRINCIPAL ===== */
.nadminwelcomeframe {
    background-color: var(--n-bg);
}
/**
 * @file EditDemandeItem.css
 *
 * @requires NTheme.css
 * @requires NAdminEditItem.css
 */

/* === Ligne de réponse (pharmacie + disponibilité + retirer) === */
.editdemandeitem-child-divreponse {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
    padding: clamp(0.75rem, 2vw, 1rem);
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: clamp(8px, 1.2vw, 10px);
    margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
}

.editdemandeitem-child-divreponse:last-of-type {
    margin-bottom: 0;
}

/* Pharmacie : prend l'espace disponible === */
.editdemandeitem-child-inputpharmacie {
    flex: 1 1 180px;
    min-width: 0;
}

/* Disponibilité : radios compacts === */
.editdemandeitem-child-inputdisponibilite {
    flex: 0 0 auto;
    min-width: clamp(140px, 20vw, 180px);
}

/* Bouton Retirer === */
.editdemandeitem-child-btnremove {
    flex: 0 0 auto;
    background: color-mix(in srgb, var(--n-error) 12%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--n-error) 35%, transparent) !important;
    color: var(--n-error) !important;
    border-radius: clamp(6px, 1vw, 8px);
    padding: 0.35em 0.6em;
    font-size: clamp(0.8125rem, 1vw + 0.4rem, 0.9rem);
    font-weight: 600;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.2s ease;
}

.editdemandeitem-child-btnremove:hover {
    background: color-mix(in srgb, var(--n-error) 22%, transparent) !important;
    border-color: var(--n-error) !important;
    transform: translateY(-1px);
}

.editdemandeitem-child-btnremove img,
.editdemandeitem-child-btnremove .nbutton-child-icon {
    filter: none;
    opacity: 0.9;
}

/* Bouton Ajouter une réponse === */
.editdemandeitem-child-btnaddreponse {
    background: color-mix(in srgb, var(--n-success) 15%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--n-success) 40%, transparent) !important;
    color: var(--n-success) !important;
    border-radius: clamp(8px, 1.2vw, 10px);
    padding: 0.4em 0.75em;
    font-size: clamp(0.8125rem, 1vw + 0.45rem, 0.9rem);
    font-weight: 600;
    margin-top: clamp(0.5rem, 1.5vw, 0.75rem);
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.2s ease;
}

.editdemandeitem-child-btnaddreponse:hover {
    background: color-mix(in srgb, var(--n-success) 25%, transparent) !important;
    border-color: var(--n-success) !important;
    transform: translateY(-1px);
}

.editdemandeitem-child-btnaddreponse img,
.editdemandeitem-child-btnaddreponse .nbutton-child-icon {
    filter: none;
    opacity: 0.9;
}

/* === Accessibilité === */
@media (prefers-reduced-motion: reduce) {
    .editdemandeitem-child-btnremove,
    .editdemandeitem-child-btnaddreponse {
        transition: none;
    }

    .editdemandeitem-child-btnremove:hover,
    .editdemandeitem-child-btnaddreponse:hover {
        transform: none;
    }
}

/**
 * @file DisponibiliteItem.css
 *
 * @requires NTheme.css
 */

/* === Conteneur principal === */
.disponibiliteitem {
    margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
    padding: clamp(0.6rem, 2vw, 0.85rem) clamp(0.9rem, 2.5vw, 1.1rem);
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: clamp(8px, 1.2vw, 12px);
    color: var(--n-text);
    box-shadow: 0 1px 2px var(--n-shadow);
    display: block;
    text-decoration: none;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.disponibiliteitem:last-child {
    margin-bottom: 0;
}

.disponibiliteitem:hover {
    background: var(--n-bg);
    border-color: color-mix(in srgb, var(--n-primary) 35%, var(--n-border));
    box-shadow: 0 2px 8px var(--n-shadow);
}

.disponibiliteitem:hover .disponibiliteitem-child-nom {
    color: var(--n-primary);
}

.disponibiliteitem-child-nom {
    font-size: clamp(0.9375rem, 1.5vw + 0.5rem, 1.0625rem);
    font-weight: 600;
    color: var(--n-text);
    line-height: 1.3;
    margin-bottom: clamp(0.15rem, 0.5vw, 0.3rem);
    transition: color 0.25s ease;
}

.disponibiliteitem-child-statut {
    font-size: clamp(0.8125rem, 1vw + 0.45rem, 0.9rem);
    font-weight: 600;
    color: var(--n-text);
    line-height: 1.45;
    white-space: pre-line;
}

.disponibiliteitem-child-statut-disponible {
    color: var(--n-success);
}

.disponibiliteitem-child-statut-indisponible {
    color: var(--n-error);
}

/* === Accessibilité === */
@media (prefers-reduced-motion: reduce) {
    .disponibiliteitem,
    .disponibiliteitem-child-nom {
        transition: none;
    }
}

/**
 * @file EquivalentItem.css
 *
 * @requires NTheme.css
 */

/* === Conteneur principal === */
.equivalentitem {
    margin: clamp(0.2rem, 1vw, 0.4rem);
    padding: clamp(0.6rem, 2vw, 0.85rem) clamp(0.9rem, 2.5vw, 1.1rem);
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: clamp(8px, 1.2vw, 12px);
    color: var(--n-text);
    box-shadow: 0 1px 2px var(--n-shadow);
    display: inline-block;
    text-decoration: none;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.equivalentitem:hover {
    background: var(--n-bg);
    border-color: color-mix(in srgb, var(--n-primary) 35%, var(--n-border));
    box-shadow: 0 2px 8px var(--n-shadow);
}

.equivalentitem:hover .equivalentitem-child-nom {
    color: var(--n-primary);
}

.equivalentitem-child-nom {
    font-size: clamp(0.9375rem, 1.5vw + 0.5rem, 1.0625rem);
    font-weight: 600;
    color: var(--n-text);
    line-height: 1.3;
    margin-bottom: clamp(0.15rem, 0.5vw, 0.3rem);
    transition: color 0.25s ease;
}

.equivalentitem-child-description {
    font-size: clamp(0.8125rem, 1vw + 0.45rem, 0.9rem);
    color: var(--n-text-muted);
    line-height: 1.45;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === Accessibilité === */
@media (prefers-reduced-motion: reduce) {
    .equivalentitem,
    .equivalentitem-child-nom {
        transition: none;
    }
}