/**
 * @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;
}

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: 100000;
    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: 9999;
}

.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;
}
/**
 * @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;
}

/**
 * @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 */
    z-index: 9999;
    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: 600px;
    margin: 15px auto;
    border-collapse: collapse;
    border-spacing: 0;
}

.ndialogframe-child-header-back-button-td {
    text-align: left;
    vertical-align: top;
    min-width: 50px;
    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;
    width: calc(100% - 32px);
    text-align: left;
    vertical-align: middle;
    border-top-right-radius: 8px;
    background-color: var(--n-primary);
}

.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-child-body {
    min-height: 50px; /* Hauteur minimale pour le contenu */
}

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

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

.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 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);
}

/**
 * @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 Theme.css
 * Thème SAV Santé (teal + gris doux) aligné avec les maquettes
 *
 * @requires none
 */

.ntheme-light {
   /* Couleurs principales */
   --n-primary: rgb(13, 148, 136);    /* Teal dominante (boutons, icônes) */
   --n-secondary: rgb(20, 184, 166);  /* Teal plus clair */
   --n-accent: rgb(15, 118, 110);     /* Teal plus foncé pour accents */

   /* Textes */
   --n-text: rgb(15, 23, 42);             /* Texte principal (slate-900) */
   --n-text-inverse: rgb(255, 255, 255);  /* Texte sur fond coloré */
   --n-text-muted: rgb(100, 116, 139);    /* Texte secondaire */

   /* Arrière-plans */
   --n-bg: rgb(245, 247, 250);            /* Fond app gris très léger */
   --n-bg-secondary: rgb(255, 255, 255);  /* Cartes/panneaux blancs */

   /* Bordures */
   --n-border: rgb(232, 237, 242);        /* Bordures subtiles */

   /* États */
   --n-hover: rgb(15, 118, 110);          /* Survol boutons cartes */
   --n-active: rgb(17, 94, 89);           /* Actif */
   --n-disabled: rgb(226, 232, 240);      /* Désactivé */

   /* Couleurs de notification (badges) */
   --n-success: rgb(16, 185, 129);        /* Délivré */
   --n-error: rgb(239, 68, 68);           /* Échoué */
   --n-warning: rgb(245, 158, 11);        /* Envoyé (warning) */
   --n-info: rgb(59, 130, 246);           /* Programmé (bleu) */

   /* Ombres */
   --n-shadow: rgba(2, 6, 23, 0.08);
}

.ntheme-dark {
    /* Couleurs principales */
    --n-primary: rgb(45, 212, 191);       /* Teal lumineux */
    --n-secondary: rgb(20, 184, 166);     /* Teal moyen */
    --n-accent: rgb(13, 148, 136);        /* Teal plus soutenu */

    /* Textes */
    --n-text: rgb(241, 245, 249);         /* Texte principal clair */
    --n-text-inverse: rgb(15, 23, 42);    /* Texte sur fond clair */
    --n-text-muted: rgb(148, 163, 184);   /* Texte secondaire */

    /* Arrière-plans */
    --n-bg: rgb(15, 23, 42);              /* Fond sombre bleu ardoise */
    --n-bg-secondary: rgb(22, 30, 46);    /* Panneaux */

    /* Bordures */
    --n-border: rgb(51, 65, 85);          /* Bordures */

    /* États */
    --n-hover: rgb(20, 184, 166);         /* Survol */
    --n-active: rgb(45, 212, 191);        /* Actif */
    --n-disabled: rgb(51, 65, 85);        /* Désactivé */

    /* Couleurs de notification */
    --n-success: rgb(34, 197, 94);        /* Succès */
    --n-error: rgb(248, 113, 113);        /* Erreur */
    --n-warning: rgb(245, 158, 11);       /* Avertissement */
    --n-info: rgb(96, 165, 250);          /* Info */

    /* Ombres */
    --n-shadow: rgba(255, 255, 255, 0.08);
}
/**
 * @file CtxMain.css
 *
 * @requires Theme.css
 */
 html{
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    word-break: break-word;
}
/**
 * @file PaiementOkFrame.css
 * @description Design moderne pour la page de confirmation de paiement réussie
 *
 * @requires Theme.css
 */

/* ===== PaiementOkFrame - Page de confirmation de paiement ===== */

.paiementokframe {
    width: 100%;
    min-height: 100vh;
    background: var(--n-bg-secondary);
}

.paiementokframe-main {
    width: calc(100% - 6rem);
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===== Header avec icône de succès ===== */
.paiementokframe-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    text-align: center;
    animation: paiementok-slideDown 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.paiementokframe-icon {
    font-size: 3rem;
    color: var(--n-success);
    background: color-mix(in srgb, var(--n-success) 10%, transparent);
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--n-success) 20%, transparent);
    animation: paiementok-pulse 2s infinite;
}

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

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

.paiementok-error {
    color: var(--n-error);
    text-shadow: 0 2px 4px color-mix(in srgb, var(--n-error) 20%, transparent);
}

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

/* ===== Zone de détails de la transaction ===== */
.paiementokframe-transaction {
    width: 100%;
    background: var(--n-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 1.5rem;
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 32px var(--n-shadow);
    border: 0.0625rem solid var(--n-border);
    animation: paiementok-slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}

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

.paiementokframe-transaction-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--n-primary);
    margin: 0 0 1.5rem 0;
    text-align: center;
}

.paiementokframe-transaction-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.paiementokframe-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.paiementokframe-detail-item {
    font-size: 1rem;
    color: var(--n-text);
    padding: 0.75rem;
    background: var(--n-bg-secondary);
    border-radius: 0.5rem;
    border-left: 0.25rem solid var(--n-success);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ===== Zone des informations de paiement ===== */
.paiementokframe-payment-info {
    width: 100%;
    background: var(--n-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 1.5rem;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px var(--n-shadow);
    border: 0.0625rem solid var(--n-border);
    animation: paiementok-slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

.paiementokframe-payment-info-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--n-primary);
    margin: 0 0 1.5rem 0;
    text-align: center;
}

.paiementokframe-payment-info-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.paiementokframe-payment-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.paiementokframe-payment-item {
    font-size: 1rem;
    color: var(--n-text);
    padding: 0.75rem;
    background: var(--n-bg-secondary);
    border-radius: 0.5rem;
    border-left: 0.25rem solid var(--n-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.paiementokframe-payment-status {
    border-left-color: var(--n-success);
    background: color-mix(in srgb, var(--n-success) 5%, var(--n-bg-secondary));
    font-weight: 600;
    color: var(--n-success);
}

/* ===== Zone des actions ===== */
.paiementokframe-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 400px;
    animation: paiementok-slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

.paiementokframe-btn-home,
.paiementokframe-btn-titres,
.paiementokframe-btn-print {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-decoration: none;
    box-shadow: 0 4px 16px var(--n-shadow);
}

.paiementokframe-btn-home {
    background: var(--n-primary);
    color: var(--n-text-inverse);
}

.paiementokframe-btn-home img{
    filter: invert(1);
}

.paiementokframe-btn-home:hover {
    background: color-mix(in srgb, var(--n-primary) 90%, black);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--n-primary) 20%, transparent);
}

.paiementokframe-btn-titres {
    background: var(--n-bg);
    color: var(--n-text);
    border: 0.125rem solid var(--n-primary);
}

.paiementokframe-btn-titres:hover {
    background: color-mix(in srgb, var(--n-primary) 10%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--n-primary) 15%, transparent);
}

.paiementokframe-btn-print {
    background: var(--n-secondary);
    color: var(--n-text);
    border: 0.125rem solid var(--n-secondary);
}

.paiementokframe-btn-print:hover {
    background: color-mix(in srgb, var(--n-secondary) 90%, black);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--n-secondary) 20%, transparent);
}

.paiementokframe-btn-home img,
.paiementokframe-btn-titres img,
.paiementokframe-btn-print img {
    width: 1.25rem;
    height: 1.25rem;
}

.paiementokframe-btn-home img {
    filter: invert(1);
}

/* ===== Responsive Design ===== */
@media (max-width: 768px) {
    .paiementokframe-main {
        width: calc(100% - 4rem);
        padding: 1rem;
    }

    .paiementokframe-transaction,
    .paiementokframe-payment-info {
        padding: 1.5rem;
    }

    .paiementokframe-title {
        font-size: 1.75rem;
    }

    .paiementokframe-subtitle {
        font-size: 1rem;
    }

    .paiementokframe-detail-item,
    .paiementokframe-payment-item {
        font-size: 0.875rem;
        padding: 0.625rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

@media (max-width: 480px) {
    .paiementokframe-main {
        width: calc(100% - 3rem);
        padding: 0.5rem;
    }

    .paiementokframe-transaction,
    .paiementokframe-payment-info {
        padding: 1rem;
        border-radius: 1rem;
    }

    .paiementokframe-title {
        font-size: 1.5rem;
    }

    .paiementokframe-icon {
        font-size: 2.5rem;
        width: 3.5rem;
        height: 3.5rem;
    }

    .paiementokframe-actions {
        max-width: 100%;
    }
}
/**
 * @file HashtagItem.css
 *
 * @requires Theme.css
 */
 .hashtagitem {
    display: inline-block;
}

 .hashtagitem-child-button {
    padding: clamp(0.5rem, 1vw, 0.65rem) clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--n-border);
    border-radius: clamp(1.5rem, 4vw, 2rem);
    background: var(--n-bg-secondary);
    color: color-mix(in srgb, var(--n-text) 70%, transparent);
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: clamp(0.75rem, 2vw, 0.875rem);
}

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

.hashtagitem-child-button:active {
    transform: translateY(0px);
}

.hashtagitem-child-button.active {
    background: var(--n-primary);
    color: var(--n-text-inverse);
    border: 1px solid var(--n-primary);
}
/**
 * @file PanelHashtag.css
 *
 * @requires Theme.css
 */
 .panelhashtag {
    padding: 0.5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--n-primary) var(--n-bg-secondary);
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    width: calc(100% - 1rem); 
    text-align: center;
}

.panelhashtag::-webkit-scrollbar {
    height: 8px;
}

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

.panelhashtag::-webkit-scrollbar-thumb {
    background: var(--n-primary);
    border-radius: 4px;
}

.panelhashtag::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--n-primary) 80%, black 20%);
}
/**
 * @file PanelRecurrence.css
 *
 * @requires Theme.css
 */

/* Conteneur principal */
.panelrecurrence-child-main {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1.5vw, 1rem);
}

/* Conteneur de toutes les récurrences */
.panelrecurrence-child-container {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 2vw, 1.25rem);
}

/* Conteneur d'une récurrence individuelle */
.panelrecurrence-child-schedule-container {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1.5vw, 0.875rem);
    padding: clamp(0.625rem, 1.5vw, 1rem);
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: clamp(8px, 1vw, 12px);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.panelrecurrence-child-schedule-container:hover {
    border-color: var(--n-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* PanelSchedule intégré */
.panelrecurrence-child-panelschedule {
    width: 100%;
}

/* Actions pour chaque récurrence */
.panelrecurrence-child-schedule-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
    padding-top: clamp(0.25rem, 1vw, 0.5rem);
    border-top: 1px solid var(--n-border);
}

.panelrecurrence-child-schedule-delete-button {
    font-size: clamp(0.875rem, 1.5vw, 0.95rem);
    color: var(--n-text-inverse);
    background: var(--n-error);
    transition: opacity 0.2s ease;
    cursor: pointer;
}

.panelrecurrence-child-schedule-delete-button:hover {
    opacity: 0.8;
}

/* Actions globales (bouton d'ajout) */
.panelrecurrence-child-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: clamp(0.5rem, 1.5vw, 0.75rem);
}

.panelrecurrence-child-add-button {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(1rem, 2vw, 1.5rem);
    background: var(--n-primary);
    color: var(--n-text-inverse);
    border: none;
    border-radius: clamp(6px, 0.8vw, 8px);
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.1s ease;
}

.panelrecurrence-child-add-button:hover {
    opacity: 0.9;
}

.panelrecurrence-child-add-button:active {
    transform: scale(0.98);
}

/* Responsive - changements structurels */
@media (max-width: 768px) {
    .panelrecurrence-child-schedule-actions {
        justify-content: center;
    }
}

/* Accessibilité - réduction des mouvements */
@media (prefers-reduced-motion: reduce) {
    .panelrecurrence-child-schedule-container,
    .panelrecurrence-child-schedule-delete-button,
    .panelrecurrence-child-add-button {
        transition: none;
    }
    
    .panelrecurrence-child-add-button:active {
        transform: none;
    }
}

/**
 * @file PanelSchedule.css
 *
 * @requires Theme.css
 */

/* Conteneur principal - compact et structuré */
/*.panelschedule {
    
}*/

.panelschedule-child-main {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1.5vw, 1rem);
    padding: clamp(0.25rem, 1vw, 0.5rem);
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: clamp(8px, 1vw, 12px);
}

/* Type de planification - mise en évidence */
.panelschedule-child-input-type {
    width: 100%;
}

/* Conteneurs pour grouper visuellement */
.panelschedule-child-type-debut-container,
.panelschedule-child-arrets-container {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1.5vw, 0.875rem);
    padding: clamp(0.625rem, 1.5vw, 1rem);
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: clamp(6px, 0.8vw, 10px);
    transition: border-color 0.2s ease;
}

.panelschedule-child-type-debut-container:hover,
.panelschedule-child-arrets-container:hover {
    border-color: var(--n-primary);
}

/* Container flex pour disposer les champs côte à côte */
.panelschedule-child-flex-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 25%, 200px), 1fr));
    gap: clamp(0.5rem, 1.5vw, 0.875rem);
    align-items: start;
}

/* Champs de formulaire - taille optimisée */
.panelschedule-child-input-type-debut,
.panelschedule-child-input-date-debut,
.panelschedule-child-input-days-of-week,
.panelschedule-child-input-months-of-year,
.panelschedule-child-input-days-of-month,
.panelschedule-child-input-date,
.panelschedule-child-input-hours,
.panelschedule-child-input-delai,
.panelschedule-child-input-delai-unit,
.panelschedule-child-input-intervalle,
.panelschedule-child-input-type-arret,
.panelschedule-child-input-date-arret,
.panelschedule-child-input-max-repetitions {
    width: 100%;
    min-width: 0; /* Permet au contenu de shrink dans le grid */
}


/* Animation pour les transitions show/hide */
.panelschedule-child-type-debut-container,
.panelschedule-child-arrets-container,
.panelschedule-child-input-days-of-week,
.panelschedule-child-input-months-of-year,
.panelschedule-child-input-days-of-month,
.panelschedule-child-input-date,
.panelschedule-child-input-hours,
.panelschedule-child-input-delai,
.panelschedule-child-input-delai-unit,
.panelschedule-child-input-intervalle,
.panelschedule-child-input-date-debut,
.panelschedule-child-input-date-arret,
.panelschedule-child-input-max-repetitions {
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* Responsive - changements structurels uniquement */
@media (max-width: 768px) {
    .panelschedule-child-flex-container {
        grid-template-columns: 1fr;
    }
    
    .panelschedule-child-input-days-of-month,
    .panelschedule-child-input-delai,
    .panelschedule-child-input-max-repetitions,
    .panelschedule-child-input-delai-unit {
        max-width: 100%;
    }
}

/* Accessibilité - réduction des mouvements */
@media (prefers-reduced-motion: reduce) {
    .panelschedule-child-type-debut-container,
    .panelschedule-child-arrets-container,
    .panelschedule-child-input-days-of-week,
    .panelschedule-child-input-months-of-year,
    .panelschedule-child-input-days-of-month,
    .panelschedule-child-input-date,
    .panelschedule-child-input-hours,
    .panelschedule-child-input-delai,
    .panelschedule-child-input-delai-unit,
    .panelschedule-child-input-intervalle,
    .panelschedule-child-input-date-debut,
    .panelschedule-child-input-date-arret,
    .panelschedule-child-input-max-repetitions {
        transition: none;
    }
}
/**
 * @file CtxArretItem.css
 * @requires Theme.css
 */

.ctxarretitem {
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    padding: 10px;
    box-shadow: 0 2px 4px var(--n-shadow);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.ctxarretitem:hover {
    box-shadow: 0 4px 16px var(--n-shadow);
    transform: translateY(-2px);
}

.ctxarretitem-child-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Boutons de déplacement vertical */
.ctxarretitem-child-rowtop-td,
.ctxarretitem-child-rowbottom-td {
    width: 40px;
    text-align: center;
    vertical-align: middle;
    padding: 4px;
}

.ctxarretitem-child-rowtop,
.ctxarretitem-child-rowbottom {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--n-bg-secondary);
    color: var(--n-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px var(--n-shadow);
}

.ctxarretitem-child-rowtop:hover,
.ctxarretitem-child-rowbottom:hover {
    background: var(--n-primary);
    color: var(--n-text-inverse);
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(0, 150, 57, 0.3);
}

.ctxarretitem-child-rowtop:active,
.ctxarretitem-child-rowbottom:active {
    background: var(--n-active);
    transform: scale(0.95);
}

/* Image de l'arrêt */
.ctxarretitem-child-image-td {
    width: 60px;
    text-align: center;
    vertical-align: middle;
    padding: 0 12px;
}

.ctxarretitem-child-image {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid var(--n-border);
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px var(--n-shadow);
}

.ctxarretitem:hover .ctxarretitem-child-image {
    transform: scale(1.05);
}

/* Contenu textuel */
.ctxarretitem-child-nom-td {
    vertical-align: middle;
    padding: 0 10px;
}

.ctxarretitem-child-titre {
    font-size: 16px;
    font-weight: 600;
    color: var(--n-text);
    margin-bottom: 4px;
    line-height: 1.4;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ctxarretitem-child-resume {
    font-size: 14px;
    color: var(--n-text-muted);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.ctxarretitem-child-input-heure {
    max-width: 200px;
    --n-input-height: 20;
}

/* Bouton de suppression */
.ctxarretitem-child-delete-td {
    width: 50px;
    text-align: center;
    vertical-align: middle;
    padding: 4px;
}

.ctxarretitem-child-delete {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.1);
    color: var(--n-error);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px var(--n-shadow);
}

.ctxarretitem-child-delete:hover {
    background: var(--n-error);
    color: var(--n-text-inverse);
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
}

.ctxarretitem-child-delete:active {
    transform: scale(0.95);
}

/* États spéciaux */
.ctxarretitem.selected {
    border-color: var(--n-primary);
    background: linear-gradient(135deg, var(--n-bg) 0%, var(--n-bg-secondary) 100%);
    box-shadow: 0 0 0 2px rgba(0, 150, 57, 0.2);
}

.ctxarretitem.disabled {
    opacity: 0.6;
    pointer-events: none;
    background: var(--n-disabled);
}

/* Animation d'entrée */
.ctxarretitem {
    animation: fadeInUp 0.4s ease-out;
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .ctxarretitem {
        padding: 8px;
    }
    
    .ctxarretitem-child-image {
        width: 48px;
        height: 48px;
    }
    
    .ctxarretitem-child-image-td {
        width: 60px;
        padding: 0 8px;
    }
    
    .ctxarretitem-child-titre {
        font-size: 15px;
    }
    
    .ctxarretitem-child-resume {
        font-size: 13px;
        line-clamp: 1;
        -webkit-line-clamp: 1;
    }
    
    .ctxarretitem-child-nom-td {
        padding: 0 12px;
    }
}

/* État de chargement */
.ctxarretitem.nitem-loading {
    background: var(--n-bg-secondary);
    animation: ctxarretitem-pulse 1.5s ease-in-out infinite;
}

@keyframes ctxarretitem-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Focus pour l'accessibilité */
.ctxarretitem:focus-within {
    outline: 2px solid var(--n-primary);
    outline-offset: 2px;
}

.ctxarretitem-child-rowtop:focus,
.ctxarretitem-child-rowbottom:focus,
.ctxarretitem-child-delete:focus {
    outline: 2px solid var(--n-primary);
    outline-offset: 2px;
}


/**
 * @file CtxInputLigneArrets.css
 * @requires Theme.css
 */

.ctxinputlignearrets_containerarrets{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ctxinputlignearrets_containeraddbutton{
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
}

.ctxinputlignearrets_inputarret{
    width: 100%;
}
/**
 * @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;
}

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: 100000;
    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: 9999;
}

.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;
}
/**
 * @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;
}

/**
 * @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 */
    z-index: 9999;
    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: 600px;
    margin: 15px auto;
    border-collapse: collapse;
    border-spacing: 0;
}

.ndialogframe-child-header-back-button-td {
    text-align: left;
    vertical-align: top;
    min-width: 50px;
    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;
    width: calc(100% - 32px);
    text-align: left;
    vertical-align: middle;
    border-top-right-radius: 8px;
    background-color: var(--n-primary);
}

.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-child-body {
    min-height: 50px; /* Hauteur minimale pour le contenu */
}

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

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

.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 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);
}

/**
 * @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 Theme.css
 * Thème SAV Santé (teal + gris doux) aligné avec les maquettes
 *
 * @requires none
 */

.ntheme-light {
   /* Couleurs principales */
   --n-primary: rgb(13, 148, 136);    /* Teal dominante (boutons, icônes) */
   --n-secondary: rgb(20, 184, 166);  /* Teal plus clair */
   --n-accent: rgb(15, 118, 110);     /* Teal plus foncé pour accents */

   /* Textes */
   --n-text: rgb(15, 23, 42);             /* Texte principal (slate-900) */
   --n-text-inverse: rgb(255, 255, 255);  /* Texte sur fond coloré */
   --n-text-muted: rgb(100, 116, 139);    /* Texte secondaire */

   /* Arrière-plans */
   --n-bg: rgb(245, 247, 250);            /* Fond app gris très léger */
   --n-bg-secondary: rgb(255, 255, 255);  /* Cartes/panneaux blancs */

   /* Bordures */
   --n-border: rgb(232, 237, 242);        /* Bordures subtiles */

   /* États */
   --n-hover: rgb(15, 118, 110);          /* Survol boutons cartes */
   --n-active: rgb(17, 94, 89);           /* Actif */
   --n-disabled: rgb(226, 232, 240);      /* Désactivé */

   /* Couleurs de notification (badges) */
   --n-success: rgb(16, 185, 129);        /* Délivré */
   --n-error: rgb(239, 68, 68);           /* Échoué */
   --n-warning: rgb(245, 158, 11);        /* Envoyé (warning) */
   --n-info: rgb(59, 130, 246);           /* Programmé (bleu) */

   /* Ombres */
   --n-shadow: rgba(2, 6, 23, 0.08);
}

.ntheme-dark {
    /* Couleurs principales */
    --n-primary: rgb(45, 212, 191);       /* Teal lumineux */
    --n-secondary: rgb(20, 184, 166);     /* Teal moyen */
    --n-accent: rgb(13, 148, 136);        /* Teal plus soutenu */

    /* Textes */
    --n-text: rgb(241, 245, 249);         /* Texte principal clair */
    --n-text-inverse: rgb(15, 23, 42);    /* Texte sur fond clair */
    --n-text-muted: rgb(148, 163, 184);   /* Texte secondaire */

    /* Arrière-plans */
    --n-bg: rgb(15, 23, 42);              /* Fond sombre bleu ardoise */
    --n-bg-secondary: rgb(22, 30, 46);    /* Panneaux */

    /* Bordures */
    --n-border: rgb(51, 65, 85);          /* Bordures */

    /* États */
    --n-hover: rgb(20, 184, 166);         /* Survol */
    --n-active: rgb(45, 212, 191);        /* Actif */
    --n-disabled: rgb(51, 65, 85);        /* Désactivé */

    /* Couleurs de notification */
    --n-success: rgb(34, 197, 94);        /* Succès */
    --n-error: rgb(248, 113, 113);        /* Erreur */
    --n-warning: rgb(245, 158, 11);       /* Avertissement */
    --n-info: rgb(96, 165, 250);          /* Info */

    /* Ombres */
    --n-shadow: rgba(255, 255, 255, 0.08);
}
/**
 * @file CtxMain.css
 *
 * @requires Theme.css
 */
 html{
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    word-break: break-word;
}
/**
 * @file PaiementOkFrame.css
 * @description Design moderne pour la page de confirmation de paiement réussie
 *
 * @requires Theme.css
 */

/* ===== PaiementOkFrame - Page de confirmation de paiement ===== */

.paiementokframe {
    width: 100%;
    min-height: 100vh;
    background: var(--n-bg-secondary);
}

.paiementokframe-main {
    width: calc(100% - 6rem);
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===== Header avec icône de succès ===== */
.paiementokframe-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    text-align: center;
    animation: paiementok-slideDown 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.paiementokframe-icon {
    font-size: 3rem;
    color: var(--n-success);
    background: color-mix(in srgb, var(--n-success) 10%, transparent);
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--n-success) 20%, transparent);
    animation: paiementok-pulse 2s infinite;
}

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

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

.paiementok-error {
    color: var(--n-error);
    text-shadow: 0 2px 4px color-mix(in srgb, var(--n-error) 20%, transparent);
}

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

/* ===== Zone de détails de la transaction ===== */
.paiementokframe-transaction {
    width: 100%;
    background: var(--n-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 1.5rem;
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 32px var(--n-shadow);
    border: 0.0625rem solid var(--n-border);
    animation: paiementok-slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}

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

.paiementokframe-transaction-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--n-primary);
    margin: 0 0 1.5rem 0;
    text-align: center;
}

.paiementokframe-transaction-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.paiementokframe-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.paiementokframe-detail-item {
    font-size: 1rem;
    color: var(--n-text);
    padding: 0.75rem;
    background: var(--n-bg-secondary);
    border-radius: 0.5rem;
    border-left: 0.25rem solid var(--n-success);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ===== Zone des informations de paiement ===== */
.paiementokframe-payment-info {
    width: 100%;
    background: var(--n-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 1.5rem;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px var(--n-shadow);
    border: 0.0625rem solid var(--n-border);
    animation: paiementok-slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

.paiementokframe-payment-info-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--n-primary);
    margin: 0 0 1.5rem 0;
    text-align: center;
}

.paiementokframe-payment-info-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.paiementokframe-payment-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.paiementokframe-payment-item {
    font-size: 1rem;
    color: var(--n-text);
    padding: 0.75rem;
    background: var(--n-bg-secondary);
    border-radius: 0.5rem;
    border-left: 0.25rem solid var(--n-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.paiementokframe-payment-status {
    border-left-color: var(--n-success);
    background: color-mix(in srgb, var(--n-success) 5%, var(--n-bg-secondary));
    font-weight: 600;
    color: var(--n-success);
}

/* ===== Zone des actions ===== */
.paiementokframe-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 400px;
    animation: paiementok-slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

.paiementokframe-btn-home,
.paiementokframe-btn-titres,
.paiementokframe-btn-print {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-decoration: none;
    box-shadow: 0 4px 16px var(--n-shadow);
}

.paiementokframe-btn-home {
    background: var(--n-primary);
    color: var(--n-text-inverse);
}

.paiementokframe-btn-home img{
    filter: invert(1);
}

.paiementokframe-btn-home:hover {
    background: color-mix(in srgb, var(--n-primary) 90%, black);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--n-primary) 20%, transparent);
}

.paiementokframe-btn-titres {
    background: var(--n-bg);
    color: var(--n-text);
    border: 0.125rem solid var(--n-primary);
}

.paiementokframe-btn-titres:hover {
    background: color-mix(in srgb, var(--n-primary) 10%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--n-primary) 15%, transparent);
}

.paiementokframe-btn-print {
    background: var(--n-secondary);
    color: var(--n-text);
    border: 0.125rem solid var(--n-secondary);
}

.paiementokframe-btn-print:hover {
    background: color-mix(in srgb, var(--n-secondary) 90%, black);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--n-secondary) 20%, transparent);
}

.paiementokframe-btn-home img,
.paiementokframe-btn-titres img,
.paiementokframe-btn-print img {
    width: 1.25rem;
    height: 1.25rem;
}

.paiementokframe-btn-home img {
    filter: invert(1);
}

/* ===== Responsive Design ===== */
@media (max-width: 768px) {
    .paiementokframe-main {
        width: calc(100% - 4rem);
        padding: 1rem;
    }

    .paiementokframe-transaction,
    .paiementokframe-payment-info {
        padding: 1.5rem;
    }

    .paiementokframe-title {
        font-size: 1.75rem;
    }

    .paiementokframe-subtitle {
        font-size: 1rem;
    }

    .paiementokframe-detail-item,
    .paiementokframe-payment-item {
        font-size: 0.875rem;
        padding: 0.625rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

@media (max-width: 480px) {
    .paiementokframe-main {
        width: calc(100% - 3rem);
        padding: 0.5rem;
    }

    .paiementokframe-transaction,
    .paiementokframe-payment-info {
        padding: 1rem;
        border-radius: 1rem;
    }

    .paiementokframe-title {
        font-size: 1.5rem;
    }

    .paiementokframe-icon {
        font-size: 2.5rem;
        width: 3.5rem;
        height: 3.5rem;
    }

    .paiementokframe-actions {
        max-width: 100%;
    }
}
/**
 * @file HashtagItem.css
 *
 * @requires Theme.css
 */
 .hashtagitem {
    display: inline-block;
}

 .hashtagitem-child-button {
    padding: clamp(0.5rem, 1vw, 0.65rem) clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--n-border);
    border-radius: clamp(1.5rem, 4vw, 2rem);
    background: var(--n-bg-secondary);
    color: color-mix(in srgb, var(--n-text) 70%, transparent);
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: clamp(0.75rem, 2vw, 0.875rem);
}

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

.hashtagitem-child-button:active {
    transform: translateY(0px);
}

.hashtagitem-child-button.active {
    background: var(--n-primary);
    color: var(--n-text-inverse);
    border: 1px solid var(--n-primary);
}
/**
 * @file PanelHashtag.css
 *
 * @requires Theme.css
 */
 .panelhashtag {
    padding: 0.5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--n-primary) var(--n-bg-secondary);
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    width: calc(100% - 1rem); 
    text-align: center;
}

.panelhashtag::-webkit-scrollbar {
    height: 8px;
}

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

.panelhashtag::-webkit-scrollbar-thumb {
    background: var(--n-primary);
    border-radius: 4px;
}

.panelhashtag::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--n-primary) 80%, black 20%);
}
/**
 * @file PanelRecurrence.css
 *
 * @requires Theme.css
 */

/* Conteneur principal */
.panelrecurrence-child-main {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1.5vw, 1rem);
}

/* Conteneur de toutes les récurrences */
.panelrecurrence-child-container {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 2vw, 1.25rem);
}

/* Conteneur d'une récurrence individuelle */
.panelrecurrence-child-schedule-container {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1.5vw, 0.875rem);
    padding: clamp(0.625rem, 1.5vw, 1rem);
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: clamp(8px, 1vw, 12px);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.panelrecurrence-child-schedule-container:hover {
    border-color: var(--n-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* PanelSchedule intégré */
.panelrecurrence-child-panelschedule {
    width: 100%;
}

/* Actions pour chaque récurrence */
.panelrecurrence-child-schedule-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
    padding-top: clamp(0.25rem, 1vw, 0.5rem);
    border-top: 1px solid var(--n-border);
}

.panelrecurrence-child-schedule-delete-button {
    font-size: clamp(0.875rem, 1.5vw, 0.95rem);
    color: var(--n-text-inverse);
    background: var(--n-error);
    transition: opacity 0.2s ease;
    cursor: pointer;
}

.panelrecurrence-child-schedule-delete-button:hover {
    opacity: 0.8;
}

/* Actions globales (bouton d'ajout) */
.panelrecurrence-child-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: clamp(0.5rem, 1.5vw, 0.75rem);
}

.panelrecurrence-child-add-button {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(1rem, 2vw, 1.5rem);
    background: var(--n-primary);
    color: var(--n-text-inverse);
    border: none;
    border-radius: clamp(6px, 0.8vw, 8px);
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.1s ease;
}

.panelrecurrence-child-add-button:hover {
    opacity: 0.9;
}

.panelrecurrence-child-add-button:active {
    transform: scale(0.98);
}

/* Responsive - changements structurels */
@media (max-width: 768px) {
    .panelrecurrence-child-schedule-actions {
        justify-content: center;
    }
}

/* Accessibilité - réduction des mouvements */
@media (prefers-reduced-motion: reduce) {
    .panelrecurrence-child-schedule-container,
    .panelrecurrence-child-schedule-delete-button,
    .panelrecurrence-child-add-button {
        transition: none;
    }
    
    .panelrecurrence-child-add-button:active {
        transform: none;
    }
}

/**
 * @file PanelSchedule.css
 *
 * @requires Theme.css
 */

/* Conteneur principal - compact et structuré */
/*.panelschedule {
    
}*/

.panelschedule-child-main {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1.5vw, 1rem);
    padding: clamp(0.25rem, 1vw, 0.5rem);
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: clamp(8px, 1vw, 12px);
}

/* Type de planification - mise en évidence */
.panelschedule-child-input-type {
    width: 100%;
}

/* Conteneurs pour grouper visuellement */
.panelschedule-child-type-debut-container,
.panelschedule-child-arrets-container {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1.5vw, 0.875rem);
    padding: clamp(0.625rem, 1.5vw, 1rem);
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: clamp(6px, 0.8vw, 10px);
    transition: border-color 0.2s ease;
}

.panelschedule-child-type-debut-container:hover,
.panelschedule-child-arrets-container:hover {
    border-color: var(--n-primary);
}

/* Container flex pour disposer les champs côte à côte */
.panelschedule-child-flex-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 25%, 200px), 1fr));
    gap: clamp(0.5rem, 1.5vw, 0.875rem);
    align-items: start;
}

/* Champs de formulaire - taille optimisée */
.panelschedule-child-input-type-debut,
.panelschedule-child-input-date-debut,
.panelschedule-child-input-days-of-week,
.panelschedule-child-input-months-of-year,
.panelschedule-child-input-days-of-month,
.panelschedule-child-input-date,
.panelschedule-child-input-hours,
.panelschedule-child-input-delai,
.panelschedule-child-input-delai-unit,
.panelschedule-child-input-intervalle,
.panelschedule-child-input-type-arret,
.panelschedule-child-input-date-arret,
.panelschedule-child-input-max-repetitions {
    width: 100%;
    min-width: 0; /* Permet au contenu de shrink dans le grid */
}


/* Animation pour les transitions show/hide */
.panelschedule-child-type-debut-container,
.panelschedule-child-arrets-container,
.panelschedule-child-input-days-of-week,
.panelschedule-child-input-months-of-year,
.panelschedule-child-input-days-of-month,
.panelschedule-child-input-date,
.panelschedule-child-input-hours,
.panelschedule-child-input-delai,
.panelschedule-child-input-delai-unit,
.panelschedule-child-input-intervalle,
.panelschedule-child-input-date-debut,
.panelschedule-child-input-date-arret,
.panelschedule-child-input-max-repetitions {
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* Responsive - changements structurels uniquement */
@media (max-width: 768px) {
    .panelschedule-child-flex-container {
        grid-template-columns: 1fr;
    }
    
    .panelschedule-child-input-days-of-month,
    .panelschedule-child-input-delai,
    .panelschedule-child-input-max-repetitions,
    .panelschedule-child-input-delai-unit {
        max-width: 100%;
    }
}

/* Accessibilité - réduction des mouvements */
@media (prefers-reduced-motion: reduce) {
    .panelschedule-child-type-debut-container,
    .panelschedule-child-arrets-container,
    .panelschedule-child-input-days-of-week,
    .panelschedule-child-input-months-of-year,
    .panelschedule-child-input-days-of-month,
    .panelschedule-child-input-date,
    .panelschedule-child-input-hours,
    .panelschedule-child-input-delai,
    .panelschedule-child-input-delai-unit,
    .panelschedule-child-input-intervalle,
    .panelschedule-child-input-date-debut,
    .panelschedule-child-input-date-arret,
    .panelschedule-child-input-max-repetitions {
        transition: none;
    }
}
/**
 * @file CtxArretItem.css
 * @requires Theme.css
 */

.ctxarretitem {
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    padding: 10px;
    box-shadow: 0 2px 4px var(--n-shadow);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.ctxarretitem:hover {
    box-shadow: 0 4px 16px var(--n-shadow);
    transform: translateY(-2px);
}

.ctxarretitem-child-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Boutons de déplacement vertical */
.ctxarretitem-child-rowtop-td,
.ctxarretitem-child-rowbottom-td {
    width: 40px;
    text-align: center;
    vertical-align: middle;
    padding: 4px;
}

.ctxarretitem-child-rowtop,
.ctxarretitem-child-rowbottom {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--n-bg-secondary);
    color: var(--n-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px var(--n-shadow);
}

.ctxarretitem-child-rowtop:hover,
.ctxarretitem-child-rowbottom:hover {
    background: var(--n-primary);
    color: var(--n-text-inverse);
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(0, 150, 57, 0.3);
}

.ctxarretitem-child-rowtop:active,
.ctxarretitem-child-rowbottom:active {
    background: var(--n-active);
    transform: scale(0.95);
}

/* Image de l'arrêt */
.ctxarretitem-child-image-td {
    width: 60px;
    text-align: center;
    vertical-align: middle;
    padding: 0 12px;
}

.ctxarretitem-child-image {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid var(--n-border);
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px var(--n-shadow);
}

.ctxarretitem:hover .ctxarretitem-child-image {
    transform: scale(1.05);
}

/* Contenu textuel */
.ctxarretitem-child-nom-td {
    vertical-align: middle;
    padding: 0 10px;
}

.ctxarretitem-child-titre {
    font-size: 16px;
    font-weight: 600;
    color: var(--n-text);
    margin-bottom: 4px;
    line-height: 1.4;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ctxarretitem-child-resume {
    font-size: 14px;
    color: var(--n-text-muted);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.ctxarretitem-child-input-heure {
    max-width: 200px;
    --n-input-height: 20;
}

/* Bouton de suppression */
.ctxarretitem-child-delete-td {
    width: 50px;
    text-align: center;
    vertical-align: middle;
    padding: 4px;
}

.ctxarretitem-child-delete {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.1);
    color: var(--n-error);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px var(--n-shadow);
}

.ctxarretitem-child-delete:hover {
    background: var(--n-error);
    color: var(--n-text-inverse);
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
}

.ctxarretitem-child-delete:active {
    transform: scale(0.95);
}

/* États spéciaux */
.ctxarretitem.selected {
    border-color: var(--n-primary);
    background: linear-gradient(135deg, var(--n-bg) 0%, var(--n-bg-secondary) 100%);
    box-shadow: 0 0 0 2px rgba(0, 150, 57, 0.2);
}

.ctxarretitem.disabled {
    opacity: 0.6;
    pointer-events: none;
    background: var(--n-disabled);
}

/* Animation d'entrée */
.ctxarretitem {
    animation: fadeInUp 0.4s ease-out;
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .ctxarretitem {
        padding: 8px;
    }
    
    .ctxarretitem-child-image {
        width: 48px;
        height: 48px;
    }
    
    .ctxarretitem-child-image-td {
        width: 60px;
        padding: 0 8px;
    }
    
    .ctxarretitem-child-titre {
        font-size: 15px;
    }
    
    .ctxarretitem-child-resume {
        font-size: 13px;
        line-clamp: 1;
        -webkit-line-clamp: 1;
    }
    
    .ctxarretitem-child-nom-td {
        padding: 0 12px;
    }
}

/* État de chargement */
.ctxarretitem.nitem-loading {
    background: var(--n-bg-secondary);
    animation: ctxarretitem-pulse 1.5s ease-in-out infinite;
}

@keyframes ctxarretitem-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Focus pour l'accessibilité */
.ctxarretitem:focus-within {
    outline: 2px solid var(--n-primary);
    outline-offset: 2px;
}

.ctxarretitem-child-rowtop:focus,
.ctxarretitem-child-rowbottom:focus,
.ctxarretitem-child-delete:focus {
    outline: 2px solid var(--n-primary);
    outline-offset: 2px;
}


/**
 * @file CtxInputLigneArrets.css
 * @requires Theme.css
 */

.ctxinputlignearrets_containerarrets{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ctxinputlignearrets_containeraddbutton{
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
}

.ctxinputlignearrets_inputarret{
    width: 100%;
}

/**
 * @file Main.css
 *
 * @requires CtxMain.css
 */

 html {
    background: var(--n-bg-secondary);
    background-attachment: fixed;
 }

 .main {
    background-color: var(--n-bg);
    position: relative;
}

.nmaintag-chidld-framecontainer{
    height: 100%;
}
/**
 * @file ConnexionFrame.css
 * @description Design premium et moderne pour la page d'entrée
 *
 * @requires Theme.css
 */

/* ===== BACKGROUND AVEC ANIMATION ===== */
.connexionframe {
    width: 100%;
    min-height: calc(100vh - 65px);
    padding-top: 65px;
    background: var(--n-bg);
    animation: connexionframe-fadeIn 0.8s ease-out;
}

@keyframes connexionframe-fadeIn {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(30px, -30px) scale(1.1);
    }
}

/* ===== LAYOUT 2 COLONNES ===== */
.connexionframe-layout {
    display: grid;
    grid-template-columns: 1fr 520px;
    gap: 48px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 32px;
    min-height: 100vh;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* ===== PANNEAU INFO (GAUCHE) ===== */
.connexionframe-infopanel {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--n-bg-secondary) 95%, transparent) 0%,
        color-mix(in srgb, var(--n-bg-secondary) 90%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--n-border) 80%, transparent);
    border-radius: 24px;
    box-shadow: 
        0 20px 60px var(--n-shadow),
        0 0 100px color-mix(in srgb, var(--n-primary) 8%, transparent);
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    animation: connexionframe-slideInLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Effet de lumière sur le panneau */
.connexionframe-infopanel::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        color-mix(in srgb, var(--n-primary) 8%, transparent) 60deg,
        transparent 120deg
    );
    animation: connexionframe-rotate 8s linear infinite;
}

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

.connexionframe-infopanel::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: var(--n-bg-secondary);
    border-radius: 22px;
    z-index: 0;
}

.connexionframe-infopanel > * {
    position: relative;
    z-index: 1;
}

.connexionframe-infopanel-title {
    font-size: 48px;
    line-height: 1.2;
    margin: 0;
    font-weight: 700;
    background: linear-gradient(135deg, var(--n-primary) 0%, var(--n-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -1px;
}

.connexionframe-infopanel-desc {
    margin: 0;
    font-size: 20px;
    line-height: 1.6;
    color: var(--n-text-muted);
    font-weight: 400;
}

/* Logo décoratif dans le panneau info */
.connexionframe-infopanel-title::before {
    content: '✨';
    display: block;
    font-size: 56px;
    margin-bottom: 16px;
    animation: connexionframe-sparkle 3s ease-in-out infinite;
}

@keyframes connexionframe-sparkle {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.1) rotate(10deg);
        opacity: 0.8;
    }
}

/* ===== COLONNE FORMULAIRE ===== */
.connexionframe-formcol {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: connexionframe-slideInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== CARD FORMULAIRE GLASSMORPHISM ===== */
.connexionframe-child-formwrapper {
    background: color-mix(in srgb, var(--n-bg-secondary) 95%, transparent);
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    border: 1px solid color-mix(in srgb, var(--n-border) 60%, transparent);
    border-radius: 28px;
    padding: 48px 40px;
    box-shadow: 
        0 20px 60px var(--n-shadow),
        0 0 80px color-mix(in srgb, var(--n-primary) 5%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 10%, transparent);
    width: 100%;
    max-width: 520px;
    position: relative;
}

/* ===== ZONE D'INFO ===== */
.loginframe-info-zone {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--n-info) 10%, transparent) 0%,
        color-mix(in srgb, var(--n-info) 5%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--n-info) 20%, transparent);
    border-radius: 16px;
    margin-bottom: 28px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    animation: connexionframe-fadeIn 1s ease-out 0.3s backwards;
}

.loginframe-info-zone.loginframe-info-error {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--n-error) 10%, transparent) 0%,
        color-mix(in srgb, var(--n-error) 5%, transparent) 100%);
    border-color: color-mix(in srgb, var(--n-error) 20%, transparent);
}

.loginframe-info-icon {
    font-size: 24px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--n-info) 40%, transparent));
}

.loginframe-info-text {
    font-size: 14px;
    color: var(--n-text);
    line-height: 1.6;
    margin: 0;
    flex: 1;
    font-weight: 500;
}

/* ===== CHAMPS DE SAISIE ===== */
.connexionframe-child-input {
    width: 100%;
    margin-bottom: 24px;
    position: relative;
    animation: connexionframe-fadeIn 1s ease-out 0.4s backwards;
}

.connexionframe-child-input-password {
    margin-bottom: 16px;
}

/* ===== LIEN MOT DE PASSE OUBLIÉ ===== */
.connexionframe-child-divformwrapper {
    text-align: right;
    margin-bottom: 28px;
    animation: connexionframe-fadeIn 1s ease-out 0.5s backwards;
}

.connexionframe-child-forgotpasswordlink {
    color: var(--n-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    padding: 8px 12px;
    position: relative;
    border-radius: 8px;
    display: inline-block;
}

.connexionframe-child-forgotpasswordlink:hover {
    background: color-mix(in srgb, var(--n-primary) 10%, transparent);
    color: var(--n-hover);
    transform: translateX(-2px);
}

/* ===== BOUTON DE CONNEXION ===== */
.connexionframe-child-loginbutton {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, 
        var(--n-primary) 0%, 
        var(--n-secondary) 100%);
    color: var(--n-text-inverse);
    border: none;
    border-radius: 16px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 8px 24px color-mix(in srgb, var(--n-primary) 40%, transparent),
        0 4px 12px color-mix(in srgb, var(--n-shadow) 30%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: connexionframe-fadeIn 1s ease-out 0.6s backwards;
}

.connexionframe-child-loginbutton::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        var(--n-secondary) 0%, 
        var(--n-accent) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.connexionframe-child-loginbutton:hover::before {
    opacity: 1;
}

.connexionframe-child-loginbutton:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 12px 36px color-mix(in srgb, var(--n-primary) 50%, transparent),
        0 6px 16px color-mix(in srgb, var(--n-shadow) 40%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.connexionframe-child-loginbutton:active {
    transform: translateY(-1px);
}

/* Effet de brillance sur le bouton */
.connexionframe-child-loginbutton::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transform: translateX(-100%) rotate(45deg);
    animation: connexionframe-shine 3s ease-in-out infinite;
}

@keyframes connexionframe-shine {
    0%, 100% {
        transform: translateX(-100%) rotate(45deg);
    }
    50% {
        transform: translateX(100%) rotate(45deg);
    }
}

/* ===== SÉPARATEUR ===== */
.connexionframe-child-divider {
    text-align: center;
    margin: 32px 0;
    position: relative;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--n-border) 20%,
        var(--n-border) 80%,
        transparent 100%);
    animation: connexionframe-fadeIn 1s ease-out 0.7s backwards;
}

.connexionframe-child-divider::before {
    content: 'OU';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--n-bg-secondary);
    padding: 0 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--n-text-muted);
    letter-spacing: 1px;
}

/* ===== BOUTON D'INSCRIPTION ===== */
.connexionframe-child-registerbutton {
    width: calc(100% - 52px);
    padding: 16px 24px;
    background: transparent;
    color: var(--n-text);
    border: 2px solid var(--n-border);
    border-radius: 16px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: block;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: connexionframe-fadeIn 1s ease-out 0.8s backwards;
}

.connexionframe-child-registerbutton::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        var(--n-accent) 0%, 
        var(--n-primary) 100%);
    transform: translateY(100%);
    transition: transform 0.4s ease;
    z-index: -1;
}

.connexionframe-child-registerbutton:hover::before {
    transform: translateY(0);
}

.connexionframe-child-registerbutton:hover {
    color: white;
    border-color: var(--n-primary);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 24px color-mix(in srgb, var(--n-primary) 30%, transparent),
        0 4px 12px var(--n-shadow);
}

/* ===== ANIMATIONS ===== */
@keyframes connexionframe-slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-60px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes connexionframe-slideInRight {
    from {
        opacity: 0;
        transform: translateX(60px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

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

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .connexionframe-layout {
        grid-template-columns: 1fr 480px;
        gap: 32px;
        padding: 32px 24px;
    }
}

@media (max-width: 1024px) {
    .connexionframe-layout {
        grid-template-columns: 1fr 460px;
        gap: 24px;
    }
    
    .connexionframe-infopanel {
        padding: 36px 32px;
    }
    
    .connexionframe-infopanel-title {
        font-size: 40px;
    }
    
    .connexionframe-infopanel-desc {
        font-size: 18px;
    }
}

@media (max-width: 900px) {
    .connexionframe-layout {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 24px 20px;
    }
    
    .connexionframe-infopanel {
        order: 2;
        max-width: 520px;
        margin: 0 auto;
    }
    
    .connexionframe-formcol {
        order: 1;
    }
    
    .connexionframe-infopanel-title::before {
        display: inline-block;
        margin-right: 12px;
        margin-bottom: 0;
    }
}

@media (max-width: 640px) {
    .connexionframe::before,
    .connexionframe::after {
        width: 400px;
        height: 400px;
    }
    
    .connexionframe-layout {
        padding: 20px 16px;
        gap: 32px;
    }
    
    .connexionframe-infopanel {
        padding: 32px 24px;
        border-radius: 20px;
    }
    
    .connexionframe-infopanel-title {
        font-size: 32px;
    }
    
    .connexionframe-infopanel-desc {
        font-size: 16px;
    }
    
    .connexionframe-child-formwrapper {
        padding: 32px 24px;
        border-radius: 24px;
    }
    
    .loginframe-info-zone {
        padding: 14px 16px;
        margin-bottom: 24px;
    }
    
    .connexionframe-child-loginbutton,
    .connexionframe-child-registerbutton {
        padding: 14px 20px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .connexionframe-layout {
        padding: 16px 12px;
        min-height: auto;
    }
    
    .connexionframe-infopanel {
        padding: 24px 20px;
        border-radius: 16px;
    }
    
    .connexionframe-infopanel-title {
        font-size: 28px;
    }
    
    .connexionframe-infopanel-title::before {
        font-size: 40px;
    }
    
    .connexionframe-child-formwrapper {
        padding: 28px 20px;
        border-radius: 20px;
    }
    
    .connexionframe-child-divider {
        margin: 24px 0;
    }
}

/* ===== AMÉLIORATION DARK MODE ===== */
@media (prefers-color-scheme: dark) {
    .connexionframe-infopanel::after {
        background: color-mix(in srgb, var(--n-bg-secondary) 95%, transparent);
    }
    
    .connexionframe-child-formwrapper {
        background: color-mix(in srgb, var(--n-bg-secondary) 90%, transparent);
    }
}

/**
 * @file CookieConsentFrame.css
 * @description Styles pour le frame de consentement aux cookies SOTRACO
 *
 * @requires Theme.css
 */

/* ===== STYLES GÉNÉRAUX ===== */
.cookieconsent-description {
    padding: 1.5rem;
    text-align: center;
}

.cookieconsent-description-text {
    color: var(--n-text-muted);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.cookieconsent-actions {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    justify-content: center;
    border-top: 1px solid var(--n-border);
    background: color-mix(in srgb, var(--n-bg-secondary) 5%, transparent);
}

.cookieconsent-btn-accept {
    background: var(--n-primary);
    color: var(--n-text-inverse);
    border: 1px solid var(--n-primary);
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    min-width: 120px;
    cursor: pointer;
}

.cookieconsent-btn-accept img{
    width: 20px;
    height: 20px;
    filter: invert(1);
}

.cookieconsent-btn-accept:hover {
    background: color-mix(in srgb, var(--n-primary) 90%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--n-primary) 25%, transparent);
}

.cookieconsent-btn-reject {
    background: var(--n-bg);
    color: var(--n-text);
    border: 1px solid var(--n-border);
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    min-width: 120px;
    cursor: pointer;
}

.cookieconsent-btn-reject img{
    width: 18px;
    height: 18px;
}

.cookieconsent-btn-reject:hover {
    background: color-mix(in srgb, var(--n-hover) 20%, transparent);
    border-color: var(--n-error);
    transform: translateY(-1px);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .cookieconsent-description {
        padding: 1rem;
    }
    
    .cookieconsent-description-text {
        font-size: 0.9rem;
    }
    
    .cookieconsent-actions {
        padding: 1rem;
        flex-direction: column;
    }
    
    .cookieconsent-btn-accept,
    .cookieconsent-btn-reject {
        width: 100%;
        padding: 0.875rem 2rem;
    }
}

@media (max-width: 480px) {
    .cookieconsent-description {
        padding: 0.75rem;
    }
    
    .cookieconsent-description-text {
        font-size: 0.875rem;
    }
    
    .cookieconsent-actions {
        padding: 0.75rem;
    }
    
    .cookieconsent-btn-accept,
    .cookieconsent-btn-reject {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }
} 
/**
 * @file InscriptionFrame.css
 * 
 * @requires NTheme.css, NButtonTag.css
 * 
 * @see InscriptionFrame.js
 * 
 */

.inscriptionframe {
    background: var(--n-bg);
    min-height: calc(100vh - 65px);
    padding-top: 65px;
}

.inscriptionframe-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* ===== EN-TÊTE ===== */
.inscriptionframe-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: inscriptionframe-fadeIn 0.8s ease-out;
}

.inscriptionframe-logo {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--n-primary) 10%, transparent);
    padding: 16px;
    box-shadow: 0 8px 24px var(--n-shadow);
}

.inscriptionframe-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--n-text);
    margin: 0;
    background: linear-gradient(135deg, var(--n-primary) 0%, var(--n-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.inscriptionframe-subtitle {
    font-size: 18px;
    color: var(--n-text-muted);
    margin: 0;
    max-width: 600px;
    line-height: 1.6;
}

/* ===== SECTION FONCTIONNALITÉS ===== */
.inscriptionframe-features {
    animation: inscriptionframe-fadeIn 1s ease-out 0.2s backwards;
}

.inscriptionframe-features-title {
    font-size: 32px;
    font-weight: 600;
    color: var(--n-text);
    text-align: center;
    margin: 0 0 32px 0;
}

.inscriptionframe-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.inscriptionframe-feature-card {
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px var(--n-shadow);
}

.inscriptionframe-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px var(--n-shadow);
    border-color: var(--n-primary);
}

.inscriptionframe-feature-icon {
    width: 56px;
    height: 56px;
    padding: 14px;
    background: color-mix(in srgb, var(--n-primary) 10%, transparent);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.inscriptionframe-feature-card:hover .inscriptionframe-feature-icon {
    background: var(--n-primary);
    transform: scale(1.1) rotate(5deg);
}

.inscriptionframe-feature-card:hover .inscriptionframe-feature-icon img {
    filter: brightness(0) invert(1);
}

.inscriptionframe-feature-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--n-text);
    margin: 0;
}

.inscriptionframe-feature-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--n-text-muted);
    margin: 0;
}

/* ===== SECTION CTA WHATSAPP ===== */
.inscriptionframe-cta-section {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--n-success) 10%, transparent) 0%, 
        color-mix(in srgb, var(--n-success) 5%, transparent) 100%);
    border: 2px solid color-mix(in srgb, var(--n-success) 30%, transparent);
    border-radius: 24px;
    padding: 48px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-shadow: 0 8px 32px var(--n-shadow);
    animation: inscriptionframe-fadeIn 1.2s ease-out 0.4s backwards;
    position: relative;
    overflow: hidden;
}

.inscriptionframe-cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, 
        color-mix(in srgb, var(--n-success) 15%, transparent) 0%, 
        transparent 70%);
    animation: inscriptionframe-float 6s ease-in-out infinite;
}

@keyframes inscriptionframe-float {
    0%, 100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(-20px, 20px);
    }
}

.inscriptionframe-cta-icon {
    width: 80px;
    height: 80px;
    animation: inscriptionframe-pulse 2s infinite;
    z-index: 1;
}

@keyframes inscriptionframe-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.inscriptionframe-cta-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--n-text);
    margin: 0;
    z-index: 1;
}

.inscriptionframe-cta-message {
    font-size: 16px;
    line-height: 1.8;
    color: var(--n-text-muted);
    margin: 0;
    max-width: 700px;
    z-index: 1;
}

.inscriptionframe-whatsapp-button {
    margin-top: 12px;
    padding: 16px 40px;
    background: #25D366;
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    text-decoration: none;
    z-index: 1;
    position: relative;
}

.inscriptionframe-whatsapp-button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: linear-gradient(135deg, #25D366 0%, #20BA5A 100%);
    z-index: -1;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.inscriptionframe-whatsapp-button:hover::before {
    opacity: 1;
}

.inscriptionframe-whatsapp-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.6);
}

.inscriptionframe-whatsapp-button:active {
    transform: translateY(-2px);
}

.inscriptionframe-whatsapp-button .nbutton-icon,
.inscriptionframe-whatsapp-button img {
    width: 28px;
    height: 28px;
    filter: brightness(0) invert(1);
}

.inscriptionframe-back-button {
    margin-top: 8px;
    color: var(--n-text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 8px 16px;
    border-radius: 8px;
    z-index: 1;
}

.inscriptionframe-back-button:hover {
    color: var(--n-primary);
    background: color-mix(in srgb, var(--n-primary) 10%, transparent);
}

/* ===== ANIMATIONS ===== */
@keyframes inscriptionframe-fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .inscriptionframe-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .inscriptionframe-container {
        gap: 32px;
        padding: 20px;
    }
    
    .inscriptionframe-logo {
        width: 64px;
        height: 64px;
    }
    
    .inscriptionframe-title {
        font-size: 32px;
    }
    
    .inscriptionframe-subtitle {
        font-size: 16px;
    }
    
    .inscriptionframe-features-title {
        font-size: 26px;
    }
    
    .inscriptionframe-features-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .inscriptionframe-feature-card {
        padding: 24px;
    }
    
    .inscriptionframe-cta-section {
        padding: 32px 24px;
    }
    
    .inscriptionframe-cta-icon {
        width: 64px;
        height: 64px;
    }
    
    .inscriptionframe-cta-title {
        font-size: 26px;
    }
    
    .inscriptionframe-cta-message {
        font-size: 15px;
    }
    
    .inscriptionframe-whatsapp-button {
        width: 100%;
        justify-content: center;
        padding: 14px 32px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .inscriptionframe {
        padding: 60px 0 20px 0;
    }
    
    .inscriptionframe-container {
        gap: 24px;
        padding: 16px;
    }
    
    .inscriptionframe-logo {
        width: 56px;
        height: 56px;
    }
    
    .inscriptionframe-title {
        font-size: 28px;
    }
    
    .inscriptionframe-subtitle {
        font-size: 14px;
    }
    
    .inscriptionframe-features-title {
        font-size: 22px;
        margin-bottom: 20px;
    }
    
    .inscriptionframe-feature-card {
        padding: 20px;
    }
    
    .inscriptionframe-feature-icon {
        width: 48px;
        height: 48px;
    }
    
    .inscriptionframe-feature-title {
        font-size: 18px;
    }
    
    .inscriptionframe-feature-desc {
        font-size: 13px;
    }
    
    .inscriptionframe-cta-section {
        padding: 28px 20px;
        border-radius: 16px;
    }
    
    .inscriptionframe-cta-icon {
        width: 56px;
        height: 56px;
    }
    
    .inscriptionframe-cta-title {
        font-size: 22px;
    }
    
    .inscriptionframe-cta-message {
        font-size: 14px;
    }
    
    .inscriptionframe-whatsapp-button {
        padding: 12px 28px;
        font-size: 15px;
    }
}


/**
 * @file SearchUserFrame.css
 *
 * @requires Theme.css
 */

.searchuserframe {
  width: 100%;
  height: calc(100% - 65px);
  padding-top: 65px;
  background-color: var(--n-bg);
}
.searchuserframe-child-table {
  width: 100%;
  height: 100%;
}
.searchuserframe-child-td {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  padding: 2rem;
}
.searchuserframe-child-innerwrapper {
  max-width: 450px;
  margin: 0 auto;
}
.searchuserframe-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: searchuserframe-slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes searchuserframe-slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.searchuserframe-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--n-primary);
  margin-bottom: 0.5rem;
}
.searchuserframe-description {
  font-size: 1.08rem;
  color: var(--n-text-muted);
  margin-bottom: 2rem;
}
.searchuserframe-child-input {
  width: 100%;
}

.searchuserframe-child-input-whatsapp {
  margin-bottom: 1rem;
}

.searchuserframe-child-searchbutton {
  width: 100%;
  margin-top: 1.2rem;
  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;
}
.searchuserframe-child-searchbutton:hover,
.searchuserframe-child-searchbutton: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;
}
.searchuserframe-child-searchbutton:active {
  background: color-mix(in srgb, var(--n-primary) 80%, var(--n-bg-secondary) 20%);
  transform: scale(0.98);
}
.searchuserframe-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;
}
.searchuserframe-child-backlink:hover,
.searchuserframe-child-backlink:focus-visible {
  background: color-mix(in srgb, var(--n-text-muted) 20%, transparent);
  transform: translateY(-1px);
}
@media (max-width: 768px) {
  .searchuserframe-child-td {
    padding: 1rem;
  }
  .searchuserframe-child-formwrapper {
    padding: 1.5rem;
    border-radius: 20px;
  }
  .searchuserframe-title {
    font-size: 1.25rem;
  }
  .searchuserframe-description {
    font-size: 1rem;
  }
  .searchuserframe-child-searchbutton {
    font-size: 1rem;
  }
  .searchuserframe-child-backlink {
    font-size: 0.875rem;
  }
}
@media (max-width: 480px) {
  .searchuserframe-child-innerwrapper {
    max-width: 100%;
  }
  .searchuserframe-child-formwrapper {
    padding: 1rem;
    border-radius: 16px;
  }
  .searchuserframe-title {
    font-size: 1.125rem;
  }
  .searchuserframe-description {
    font-size: 0.875rem;
  }
  .searchuserframe-child-searchbutton {
    font-size: 0.875rem;
  }
  .searchuserframe-child-backlink {
    font-size: 0.75rem;
  }
}
.searchuserframe-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);
}
/* ===== SetMdpFrame - Définir un nouveau mot de passe ===== */
.setmdpframe {
  width: 100%;
  height: calc(100% - 65px);
  background-color: var(--n-bg);
  background: linear-gradient(135deg, 
    color-mix(in srgb, var(--n-primary) 5%, transparent) 0%,
    color-mix(in srgb, var(--n-bg) 95%, transparent) 100%);
  padding-top: 65px;
}
.setmdpframe-child-table {
  width: 100%;
  height: 100%;
}
.setmdpframe-child-td {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  padding: 2rem;
}
.setmdpframe-child-innerwrapper {
  max-width: 450px;
  margin: 0 auto;
}
.setmdpframe-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: setmdpframe-slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes setmdpframe-slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.setmdpframe-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--n-primary);
  margin-bottom: 0.5rem;
}
.setmdpframe-description {
  font-size: 1.08rem;
  color: var(--n-text-muted);
  margin-bottom: 2rem;
}
.setmdpframe-child-input {
  width: 100%;
}
.setmdpframe-password-strength {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding: 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);
}
.setmdpframe-strength-bar {
  flex: 1;
  height: 0.5rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--n-bg) 60%, transparent);
  position: relative;
  overflow: hidden;
}
.setmdpframe-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;
}
.setmdpframe-strength-weak::before {
  width: 25%;
  background: var(--n-error);
}
.setmdpframe-strength-medium::before {
  width: 50%;
  background: var(--n-warning);
}
.setmdpframe-strength-strong::before {
  width: 75%;
  background: var(--n-info);
}
.setmdpframe-strength-verystrong::before {
  width: 100%;
  background: var(--n-success);
}
.setmdpframe-strength-text {
  min-width: 70px;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  color: var(--n-text);
  letter-spacing: 0.01em;
}
.setmdpframe-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;
}
.setmdpframe-child-validatebutton:hover,
.setmdpframe-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;
}
.setmdpframe-child-validatebutton:active {
  background: color-mix(in srgb, var(--n-primary) 80%, var(--n-bg-secondary) 20%);
  transform: scale(0.98);
}
.setmdpframe-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;
}
.setmdpframe-child-backlink:hover,
.setmdpframe-child-backlink:focus-visible {
    background: color-mix(in srgb, var(--n-text-muted) 20%, transparent);
    transform: translateY(-1px);
}
@media (max-width: 768px) {
  .setmdpframe-child-td {
    padding: 1rem;
  }
  .setmdpframe-child-formwrapper {
    padding: 1.5rem;
    border-radius: 20px;
  }
  .setmdpframe-title {
    font-size: 1.25rem;
  }
  .setmdpframe-description {
    font-size: 1rem;
  }
  .setmdpframe-strength-text {
    font-size: 0.875rem;
  }
  .setmdpframe-child-validatebutton {
    font-size: 1rem;
  }
  .setmdpframe-child-backlink {
    font-size: 0.875rem;
  }
}
@media (max-width: 480px) {
  .setmdpframe-child-innerwrapper {
    max-width: 100%;
  }
  .setmdpframe-child-formwrapper {
    padding: 1rem;
    border-radius: 16px;
  }
  .setmdpframe-title {
    font-size: 1.125rem;
  }
  .setmdpframe-description {
    font-size: 0.875rem;
  }
  .setmdpframe-strength-text {
    font-size: 0.75rem;
  }
  .setmdpframe-child-validatebutton {
    font-size: 0.875rem;
  }
  .setmdpframe-child-backlink {
    font-size: 0.75rem;
  }
}
.setmdpframe-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 VerifyEmailFrame.css
 * @description Design moderne inspiré d'InscriptionFrame pour la vérification d'email
 *
 * @requires Theme.css
 */

.verifyemailframe {
  width: 100%;
  min-height: calc(100vh - 65px);
  padding-top: 65px;
  background-color: var(--n-bg);
}

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

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

.verifyemailframe-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;
}

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

.verifyemailframe-form-container {
  width: calc(100% - 5rem);
  background: color-mix(in srgb, var(--n-bg) 95%, transparent);
  backdrop-filter: blur(20px);
  border-radius: 1.5rem;
  padding: 2.5rem;
  box-shadow: 0 0 10px 0 var(--n-shadow);
  border: 1px solid color-mix(in srgb, var(--n-primary) 10%, transparent);
  animation: verifyFormSlideIn 0.6s ease-out;
  max-width: 420px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

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

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

.verifyemailframe-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);
}
.verifyemailframe-info-icon {
  font-size: 1.25rem;
  color: var(--n-warning);
  flex-shrink: 0;
}
.verifyemailframe-info-text {
  font-size: 0.95rem;
  color: var(--n-text-muted);
  line-height: 1.4;
}

.verifyemailframe-your-adresse {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.verifyemailframe-your-adresse-text {
  font-size: 0.8rem;
  color: var(--n-text);
}
.verifyemailframe-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;
}
.verifyemailframe-your-adresse-value-btn:hover {
  background: color-mix(in srgb, var(--n-primary) 10%, transparent);
}

.verifyemailframe-input {
  width: 100%;
}

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

.verifyemailframe-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);
}

.verifyemailframe-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));
}

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

.verifyemailframe-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;
}

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

.verifyemailframe-resend-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.5rem;
}
.verifyemailframe-resend-text {
  font-size: 0.8rem;
  color: var(--n-text-muted);
}
.verifyemailframe-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;
}
.verifyemailframe-resend-btn:hover:not(.verifyemailframe-resend-btn-disabled) {
  background: color-mix(in srgb, var(--n-primary) 10%, transparent);
}
.verifyemailframe-resend-btn-disabled {
  color: var(--n-text-muted);
  cursor: not-allowed;
  background: none;
}

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

@media (max-width: 480px) {
  .verifyemailframe-header-subtitle {
    font-size: 1rem;
  }
  .verifyemailframe-form-container {
    padding: 1.5rem 1rem;
    width: calc(100% - 2rem);
  }
  .verifyemailframe-header-title {
    font-size: 1.5rem;
  }
} 
/**
 * @file DashboardFrame.css
 * @description Styles du tableau de bord (grille services + panneaux)
 *
 * @requires Theme.css
 */

.dashboardframe {
    background: var(--n-bg);
    padding: 24px;
    padding-top: 65px;
}

.dashboardframe-title {
    font-size: 28px;
    margin: 0 0 8px 0;
    color: var(--n-text);
}

/* Section recherche bénéficiaire */
.dashboardframe-search {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 8px 0 20px 0;
}

.dashboardframe-search-input {
    width: 100%;
    max-width: 520px;
    background: var(--n-bg-secondary);
    color: var(--n-text);
    border: 1px solid var(--n-border);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 2px 6px var(--n-shadow);
}

/* Grille de cartes services */
.dashboardframe-services {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

/* Panneaux */
.dashboardframe-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.dashboardframe-panel-container {
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: 16px;
    box-shadow: 0 6px 18px var(--n-shadow);
    padding: 12px;
}

.dashboardframe-panel-title {
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 600;
    color: var(--n-text);
    margin: 0 0 8px 0;
    padding: 12px 18px;
}

.dashboardframe-panel-header {
    display: grid;
    grid-template-columns: 2fr 1.6fr 1.4fr 1fr 1fr;
    gap: 16px;
    align-items: center;
    padding: 14px 18px;
    width: calc(100% - 36px);
}

.dashboardframe-panel-header-child-patient,
.dashboardframe-panel-header-child-rdv,
.dashboardframe-panel-header-child-date,
.dashboardframe-panel-header-child-service,
.dashboardframe-panel-header-child-status {
    font-size: 12px;
    font-weight: 600;
    color: var(--n-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
}

.dashboardframe-panel-header-child-status{
    text-align: right;
    padding-right: 18px;
}

.dashboardframe-panel-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 18px;
}

.dashboardframe-panel-action-button {
    background: var(--n-primary);
    color: var(--n-text-inverse);
    padding: 12px 18px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px var(--n-shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}
.dashboardframe-panel-action-button:hover {
    background: var(--n-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 12px var(--n-shadow);
}

/* Responsive */
@media (max-width: 900px) {
    .dashboardframe-panels { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .dashboardframe-panel-header {
        grid-template-columns: 1.5fr 1.2fr 1fr 0.8fr 0.8fr;
        gap: 12px;
        padding: 12px 14px;
    }
}
@media (max-width: 600px) {
    .dashboardframe-services { grid-template-columns: repeat(2, minmax(100px, 1fr)); gap: 16px; }
    .dashboardframe { padding: 16px; }
}
@media (max-width: 480px) {
    .dashboardframe-panel-header {
        display: none;
    }
}
/**
 * @file ItemFrame.css
 * @description Design moderne pour la frame principale de présentation d'un élément
 *
 * @requires Theme.css
 */

/* ===== ItemFrame - Frame principale pour présenter un élément ===== */

.itemframe {
    width: 100%;
    min-height: calc(100vh - 65px);
    padding-top: 65px;
    background-color: var(--n-bg);
    animation: itemframe-slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.itemframe-child-divparent {
    margin: 0 auto;
    padding: clamp(0.5rem, 2vw, 2rem);
    padding-top: clamp(0.25rem, 1vw, 1rem);
}

/* ===== Titre de la page ===== */
.itemframe-child-pagetitle {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    color: var(--n-primary);
    margin: 0 0 clamp(1rem, 2vw, 2rem) 0;
    text-align: center;
    position: relative;
    padding-bottom: 1rem;
}

.itemframe-child-pagetitle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(40px, 10vw, 60px);
    height: clamp(0.25rem, 1vw, 0.5rem);
    background: var(--n-primary);
    border-radius: clamp(0.125rem, 0.5vw, 0.25rem);
}

/* ===== Thème sombre ===== */
.itemframe.ntheme-dark .itemframe-item-container {
    background: var(--n-bg);
    border-color: var(--n-border);
}
/**
 * @file NavBarFrame.css
 *
 * @requires Theme.css
 */

/* Container principal */
.navbarframe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1100;
    animation: navbarframe-fadeIn 0.3s ease;
}

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

.navbarframe-child-container {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 25rem;
    height: 100vh;
    background-color: var(--n-bg);
    box-shadow: -0.125rem 0 0.9375rem rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    animation: navbarframe-slideIn 0.3s ease;
}

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

/* Header */
.navbarframe-child-header {
    padding: 0.9375rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.0625rem solid var(--n-border);
}

/* Icon link styles */
.navbarframe-child-icon-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Icon styles */
.navbarframe-child-icon {
    height: 2.625rem;
    width: auto;
    transition: transform 0.3s ease;
}

.navbarframe-child-icon:hover {
    transform: scale(1.05);
}

/* Title styles */
.navbarframe-child-title {
    color: var(--n-primary);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.03125rem;
    transition: color 0.3s ease;
}

.navbarframe-child-icon-link:hover .navbarframe-child-title {
    color: var(--n-hover);
}

/* Close button styles */
.navbarframe-child-close {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.5rem;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    margin-left: 0.9375rem;
}

.navbarframe-child-close img {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
}

.navbarframe-child-close.ntheme-dark img {
    filter: invert(1);
}

.navbarframe-child-close:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.navbarframe-child-close:hover img {
    transform: rotate(90deg);
}

/* Navigation */
.navbarframe-child-nav {
    flex: 1;
    padding: 1.25rem;
    overflow-y: auto;
}

.navbarframe-child-menu-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    color: var(--n-text);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.navbarframe-child-menu-item img {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    opacity: 0.85;
    transition: all 0.3s ease;
    filter: grayscale(100%);
}

.navbarframe-child-menu-item.ntheme-dark img {
    filter: grayscale(100%) invert(1);
}

.navbarframe-child-menu-item:hover {
    background-color: var(--n-bg-secondary);
    transform: translateX(0.3125rem);
}

.navbarframe-child-menu-item:hover img {
    opacity: 1;
}

.navbarframe-child-deconnexion {
    background: transparent;
    width: 100%;
    margin-top: 2rem;
    color: var(--n-error);
}

.navbarframe-child-deconnexion:hover {
    background-color: color-mix(in srgb, var(--n-error) 10%, transparent);
}

/* Scrollbar personnalisée */
.navbarframe-child-nav::-webkit-scrollbar {
    width: 0.375rem;
}

.navbarframe-child-nav::-webkit-scrollbar-track {
    background: transparent;
}

.navbarframe-child-nav::-webkit-scrollbar-thumb {
    background: var(--n-border);
    border-radius: 0.1875rem;
}

.navbarframe-child-nav::-webkit-scrollbar-thumb:hover {
    background: var(--n-text-muted);
}

/* Media Queries */
@media (max-width: 400px) {
    .navbarframe-child-icon {
        height: 2.25rem;
    }

    .navbarframe-child-title {
        font-size: 1.1rem;
    }

    .navbarframe-child-header {
        padding: 0.75rem 1rem;
    }

    .navbarframe-child-container {
        max-width: 100%;
    }
}

@media (max-height: 500px) {
    .navbarframe-child-footer {
        padding: 0.5rem 1.25rem;
    }
}

/* État actif */
.navbarframe-child-menu-item-active {
    background-color: var(--n-primary);
    color: var(--n-text-inverse);
}

.navbarframe-child-menu-item-active img {
    filter: grayscale(0%) invert(1);
}

.navbarframe-child-menu-item-active:hover {
    background-color: var(--n-primary);
    color: var(--n-text-inverse);
}

.navbarframe-child-menu-item-active:hover img {
    opacity: 1;
}

/**
 * @file WelcomeFrame.css
 * @description Styles pour la page Welcome SAV Santé
 *
 * @requires Theme.css
 */

/* Racine de la frame */
.welcomeframe {
    background: var(--n-bg);
    min-height: calc(100vh - 48px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* Carte centrale */
.welcomeframe .welcomeframe-container {
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: 16px;
    box-shadow: 0 10px 30px var(--n-shadow);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 520px;
}

/* Logo */
.welcomeframe .welcomeframe-logo {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(13, 148, 136, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Titre */
.welcomeframe .welcomeframe-title {
    font-size: 28px;
    line-height: 1.2;
    margin: 0;
    color: var(--n-text);
    text-align: center;
}

/* Mode sombre: garder le contraste et l'ombre douce */
@media (prefers-color-scheme: dark) {
    .welcomeframe .welcomeframe-logo {
        background: rgba(45, 212, 191, 0.12);
    }
}

/* Petits écrans */
@media (max-width: 420px) {
    .welcomeframe .welcomeframe-container {
        border-radius: 14px;
        padding: 24px 20px;
        gap: 12px;
    }
    .welcomeframe .welcomeframe-title {
        font-size: 24px;
    }
    .welcomeframe .welcomeframe-logo {
        width: 48px;
        height: 48px;
    }
}


/**
 * @file WithSearchFrame.css
 *
 * @requires Theme.css
 */

 @keyframes withsearchframe-fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
    
  .withsearchframe-child-divtextzone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    margin: 15px auto;
    animation: withsearchframe-fadeIn 0.8s ease-out;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  
  /* Icône d'alerte */
  .withsearchframe-child-alerticon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
  .withsearchframe-child-alerticon.ntheme-dark {
    filter: brightness(0) invert(1);
  }
  
  /* Texte d'alerte */
  .withsearchframe-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) {
        .withsearchframe-child-alerticon {
          width: 60px;
          height: 60px;
      }
      
      .withsearchframe-child-alerttext {
          font-size: 1rem;
      }
    }
/**
 * @file AddBeneficiaireFrame.css
 * @description Styles pour la page d'ajout d'un bénéficiaire
 *
 * @requires Theme.css
 */

.addbeneficiaireframe {
    background: var(--n-bg);
    min-height: calc(100vh - 65px);
    display: flex;
    justify-content: center;
    padding: 24px;
    padding-top: 65px;
}

.addbeneficiaireframe-container {
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: 16px;
    box-shadow: 0 10px 30px var(--n-shadow);
    padding: 32px;
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.addbeneficiaireframe-title {
    font-size: 28px;
    color: var(--n-text);
    margin: 0 0 16px 0;
    text-align: center;
    font-weight: 700;
}

/* Section Panels */
.addbeneficiaireframe-section-panel {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.addbeneficiaireframe-section-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--n-text);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--n-border);
}

.addbeneficiaireframe-sub-section-panel {
    margin-top: 24px;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.addbeneficiaireframe-sub-section-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--n-text-muted);
    margin: 0 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--n-border);
}

/* Field Layouts */
.addbeneficiaireframe-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 16px;
}

.addbeneficiaireframe-field-row-three {
    grid-template-columns: 1fr 1fr 1fr;
}

.addbeneficiaireframe-field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.addbeneficiaireframe-field-label {
    font-size: 14px;
    color: var(--n-text-muted);
    font-weight: 500;
    margin: 0;
}

.addbeneficiaireframe-field-row-add-other-number {
    display: block;
}

/* Input and Select Styling */
.addbeneficiaireframe-input,
.addbeneficiaireframe-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--n-border);
    border-radius: 8px;
    font-size: 16px;
    color: var(--n-text);
    background-color: var(--n-bg-secondary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.addbeneficiaireframe-input:focus,
.addbeneficiaireframe-select:focus {
    border-color: var(--n-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--n-primary) 25%, transparent);
    outline: none;
}

/* Add Rendez-vous */
.addbeneficiaireframe-add-rendez-vous {
    display: flex;
    justify-content: flex-start;
    margin-top: 12px;
}

.addbeneficiaireframe-add-rendez-vous button {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.addbeneficiaireframe-add-rendez-vous button:hover {
    background: var(--n-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--n-primary) 25%, transparent);
}


.addbeneficiaireframe-rendez-vous {
    margin-bottom: 16px;
    border: 1px solid var(--n-border);
    border-radius: 8px;
    padding: 16px;
    background-color: var(--n-bg-secondary);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--n-primary) 25%, transparent);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.addbeneficiaireframe-rendez-vous .addbeneficiaireframe-field-row {
    margin-bottom: 0;
}

.addbeneficiaireframe-rendez-vous .addbeneficiaireframe-button {
    max-width: 200px;
}

.addbeneficiaireframe-button img{
    filter: invert(1);
    width: 20px;
    height: 20px;
}

/* Button Row */
.addbeneficiaireframe-button-row {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

.addbeneficiaireframe-button {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.addbeneficiaireframe-button-primary {
    background: var(--n-primary);
    color: var(--n-text-inverse);
}

.addbeneficiaireframe-button-primary:hover {
    background: var(--n-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--n-primary) 25%, transparent);
}

.addbeneficiaireframe-button-secondary {
    background: transparent;
    color: var(--n-text);
    border: 1px solid var(--n-border);
}

.addbeneficiaireframe-button-secondary:hover {
    background: var(--n-bg);
    border-color: var(--n-primary);
    color: var(--n-primary);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .addbeneficiaireframe-container {
        padding: 24px;
        gap: 16px;
    }

    .addbeneficiaireframe-title {
        font-size: 24px;
        margin-bottom: 12px;
    }

    .addbeneficiaireframe-section-title {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .addbeneficiaireframe-sub-section-title {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .addbeneficiaireframe-field-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .addbeneficiaireframe-field-row-three {
        grid-template-columns: 1fr;
    }

    .addbeneficiaireframe-button-row {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    .addbeneficiaireframe {
        padding: 16px;
    }

    .addbeneficiaireframe-container {
        padding: 20px;
        gap: 12px;
    }

    .addbeneficiaireframe-title {
        font-size: 22px;
    }

    .addbeneficiaireframe-input,
    .addbeneficiaireframe-select {
        font-size: 14px;
        padding: 8px 10px;
    }

    .addbeneficiaireframe-button {
        padding: 10px 20px;
        font-size: 14px;
    }
}

/**
 * @file BeneficiaireFrame.css
 *
 * @requires Theme.css
 */

 .beneficiaireframe {
    width: 100%;
    min-height: calc(100vh - 65px);
    padding-top: 65px;
    background-color: var(--n-bg);
}
/**
 * @file BeneficiaireItemFull.css
 * 
 * @requires NTheme.css, NPanelTag.css, NButtonTag.css
 * 
 * @see BeneficiaireItemFull.js
 * 
 */

.beneficiaireitemfull {
    background: var(--n-bg);
    padding: 24px;
}

.beneficiaireitemfull-container {
    max-width: 1200px;
    margin: 0 auto;
}

.beneficiaireitemfull-title {
    font-size: 28px;
    margin: 0 0 24px 0;
    color: var(--n-text);
    text-align: center;
    font-weight: 600;
}

/* Section Informations du Bénéficiaire */
.beneficiaireitemfull-info-panel {
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: 16px;
    box-shadow: 0 6px 18px var(--n-shadow);
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.beneficiaireitemfull-photo-container {
    flex-shrink: 0;
}

.beneficiaireitemfull-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--n-primary);
    background-color: var(--n-bg);
}

.beneficiaireitemfull-info-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.beneficiaireitemfull-name-container {
    margin-bottom: 8px;
}

.beneficiaireitemfull-fullname {
    font-size: 24px;
    font-weight: 700;
    color: var(--n-text);
    margin: 0;
}

.beneficiaireitemfull-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.beneficiaireitemfull-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: 8px;
}

.beneficiaireitemfull-detail-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--n-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.beneficiaireitemfull-detail-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--n-text);
}

/* Boutons d'action */
.beneficiaireitemfull-action-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.beneficiaireitemfull-edit-button {
    border-radius: 8px;
    padding: 12px 20px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: 1px solid;
    cursor: pointer;
}

.beneficiaireitemfull-edit-button {
    background: color-mix(in srgb, var(--n-primary) 10%, transparent);
    color: var(--n-primary);
    border-color: var(--n-primary);
}

.beneficiaireitemfull-edit-button:hover {
    background: var(--n-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--n-primary-rgb), 0.3);
}

.beneficiaireitemfull-child-button-pop {
    background: transparent;
    color: var(--n-text);
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    padding: 5px;
    transition: all 0.2s ease;
}

.beneficiaireitemfull-child-button-pop:hover {
    background: var(--n-bg-secondary);
    color: var(--n-text);
    border: none;
}

/* Panneaux Rendez-vous et Activité SMS */
.beneficiaireitemfull-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.beneficiaireitemfull-panel {
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: 16px;
    box-shadow: 0 6px 18px var(--n-shadow);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.beneficiaireitemfull-panel-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--n-text);
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--n-primary);
}

/* Tableaux */
.beneficiaireitemfull-table-header,
.beneficiaireitemfull-table-row {
    display: grid;
    gap: 12px;
    align-items: center;
    padding: 12px;
}

.beneficiaireitemfull-table-header {
    color: var(--n-text-muted);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--n-border);
}

.beneficiaireitemfull-table-row + .beneficiaireitemfull-table-row {
    border-top: 1px solid var(--n-border);
}

/* Colonnes pour Rendez-vous */
.beneficiaireitemfull-panel.rdv .beneficiaireitemfull-table-header,
.beneficiaireitemfull-panel.rdv .beneficiaireitemfull-table-row {
    grid-template-columns: 1.2fr 1fr 0.8fr;
}

/* Colonnes pour Activité SMS */
.beneficiaireitemfull-panel.sms .beneficiaireitemfull-table-header,
.beneficiaireitemfull-panel.sms .beneficiaireitemfull-table-row {
    grid-template-columns: 1fr 1.5fr 0.8fr;
}

/* Badges de statut */
.badge {
    display: inline-block;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
    font-weight: 700;
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    text-align: center;
    min-width: 70px;
}

.badge.programmed { 
    background: color-mix(in srgb, var(--n-info) 12%, transparent); 
    color: var(--n-info); 
    border-color: color-mix(in srgb, var(--n-info) 30%, transparent); 
}

.badge.confirmed { 
    background: color-mix(in srgb, var(--n-success) 12%, transparent); 
    color: var(--n-success); 
    border-color: color-mix(in srgb, var(--n-success) 30%, transparent); 
}

.badge.pending { 
    background: color-mix(in srgb, var(--n-warning) 12%, transparent); 
    color: var(--n-warning); 
    border-color: color-mix(in srgb, var(--n-warning) 30%, transparent); 
}

.badge.sent { 
    background: color-mix(in srgb, var(--n-info) 12%, transparent); 
    color: var(--n-info); 
    border-color: color-mix(in srgb, var(--n-info) 30%, transparent); 
}

.badge.delivered { 
    background: color-mix(in srgb, var(--n-success) 12%, transparent); 
    color: var(--n-success); 
    border-color: color-mix(in srgb, var(--n-success) 30%, transparent); 
}

.badge.read { 
    background: color-mix(in srgb, var(--n-primary) 12%, transparent); 
    color: var(--n-primary); 
    border-color: color-mix(in srgb, var(--n-primary) 30%, transparent); 
}

/* Responsive design */
@media (max-width: 1024px) {
    .beneficiaireitemfull-panels { 
        grid-template-columns: 1fr; 
    }
    
    .beneficiaireitemfull-details-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .beneficiaireitemfull {
        padding: 16px;
    }
    
    .beneficiaireitemfull-info-panel {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }
    
    .beneficiaireitemfull-photo {
        width: 100px;
        height: 100px;
    }
    
    .beneficiaireitemfull-fullname {
        font-size: 20px;
    }
    
    .beneficiaireitemfull-panel {
        padding: 16px;
    }
    
    .beneficiaireitemfull-panel.rdv .beneficiaireitemfull-table-header,
    .beneficiaireitemfull-panel.rdv .beneficiaireitemfull-table-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .beneficiaireitemfull-panel.sms .beneficiaireitemfull-table-header,
    .beneficiaireitemfull-panel.sms .beneficiaireitemfull-table-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .beneficiaireitemfull-table-header {
        display: none;
    }
    
    .beneficiaireitemfull-table-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 16px;
        border: 1px solid var(--n-border);
        border-radius: 8px;
        margin-bottom: 12px;
    }
    
    .beneficiaireitemfull-table-row .col {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .beneficiaireitemfull-table-row .col::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--n-text-muted);
        font-size: 12px;
        text-transform: uppercase;
    }
}

@media (max-width: 480px) {
    .beneficiaireitemfull-title {
        font-size: 24px;
    }
    
    .beneficiaireitemfull-fullname {
        font-size: 18px;
    }
    
    .beneficiaireitemfull-photo {
        width: 80px;
        height: 80px;
    }
}

/**
 * @file BeneficiaireListItem.css
 * 
 * @requires NTheme.css
 * 
 * @see BeneficiaireListItem.js
 * 
 */

/* Item de bénéficiaire */
.beneficiairelistitem-container {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-bottom: 1px solid var(--n-border);
    transition: background-color 0.2s ease;
}

.beneficiairelistitem-container:hover {
    background-color: color-mix(in srgb, var(--n-bg) 90%,transparent 10%);
}

/* Photo */
.beneficiairelistitem-photo-container {
    flex-shrink: 0;
}

.beneficiairelistitem-photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--n-border);
    background-color: var(--n-bg);
}

/* Informations */
.beneficiairelistitem-info-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.beneficiairelistitem-name-container {
    margin-bottom: 4px;
}

.beneficiairelistitem-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--n-text);
    margin: 0;
}

.beneficiairelistitem-details-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.beneficiairelistitem-detail-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.beneficiairelistitem-detail-icon {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.beneficiairelistitem-detail-text {
    font-size: 14px;
    color: var(--n-text-muted);
}

/* Actions */
.beneficiairelistitem-actions-container {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.beneficiairelistitem-action-button {
    padding: 8px 12px;
    border: 1px solid var(--n-border);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.beneficiairelistitem-action-button.view {
    background: color-mix(in srgb, var(--n-info) 10%, transparent);
    color: var(--n-info);
    border-color: color-mix(in srgb, var(--n-info) 30%, transparent);
}

.beneficiairelistitem-action-button.view:hover {
    background: var(--n-info);
    color: white;
    transform: translateY(-1px);
}

.beneficiairelistitem-action-button.edit {
    background: color-mix(in srgb, var(--n-primary) 10%, transparent);
    color: var(--n-primary);
    border-color: color-mix(in srgb, var(--n-primary) 30%, transparent);
}

.beneficiairelistitem-action-button.edit:hover {
    background: var(--n-primary);
    color: white;
    transform: translateY(-1px);
}

.beneficiairelistitem-action-button .nbutton-icon {
    width: 14px;
    height: 14px;
}

/* Responsive design */
@media (max-width: 768px) {
    .beneficiairelistitem-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }
    
    .beneficiairelistitem-photo {
        width: 50px;
        height: 50px;
    }
    
    .beneficiairelistitem-details-container {
        flex-direction: column;
        gap: 8px;
    }
    
    .beneficiairelistitem-actions-container {
        width: 100%;
        justify-content: flex-end;
    }
    
    .beneficiairelistitem-action-button {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .beneficiairelistitem-name {
        font-size: 16px;
    }
    
    .beneficiairelistitem-actions-container {
        flex-direction: column;
        gap: 8px;
    }
}
/**
 * @file BeneficiairesFrame.css
 * 
 * @requires NTheme.css
 * 
 * @see BeneficiairesFrame.js
 * 
 */

.beneficiairesframe {
    background: var(--n-bg);
    padding: 24px;
    min-height: calc(100vh - 65px);
    padding-top: 65px;
}

.beneficiairesframe-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 20px;
}

.beneficiairesframe-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--n-text);
    margin: 0 0 8px 0;
}

.beneficiairesframe-add-button {
    background: var(--n-primary);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.beneficiairesframe-add-button:hover {
    background: var(--n-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--n-shadow);
}

.beneficiairesframe-add-button img {
    width: 16px;
    height: 16px;
    filter: invert(1);
}

.beneficiairesframe-filtre-container {
    margin-bottom: 24px;
}

.beneficiairesframe-filtre-input {
    max-width: 400px;
}

.beneficiairesframe-filtre-input .ninputelement-child-stylecontainer {
    background-color: var(--n-bg-secondary);
}

/* Panel des bénéficiaires */
.beneficiairesframe-panel {
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Responsive design */
@media (max-width: 768px) {
    .beneficiairesframe {
        padding: 16px;
    }
    
    .beneficiairesframe-title-container {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .beneficiairesframe-title {
        font-size: 24px;
    }
}
/**
 * @file EditBeneficiaireFrame.css
 *
 * @requires Theme.css
 */

 .editbeneficiaireframe {
    width: 100%;
    min-height: calc(100vh - 65px);
    padding-top: 65px;
    background-color: var(--n-bg);
}
/**
 * @file EditBeneficiaireItemFull.css
 * 
 * @requires NTheme.css, NInputTag.css, NButtonTag.css, NSelectTag.css
 * 
 * @see EditBeneficiaireItemFull.js
 * 
 */

.editbeneficiaireitemfull {
    background: var(--n-bg);
    padding: 24px;
    min-height: 100vh;
}

.editbeneficiaireitemfull-container {
    max-width: 800px;
    margin: 0 auto;
}

.editbeneficiaireitemfull-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--n-text);
    margin: 0 0 30px 0;
    text-align: center;
}

.editbeneficiaireitemfull-section-panel {
    margin-bottom: 30px;
    padding: 24px;
    background-color: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.editbeneficiaireitemfull-section-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--n-text);
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--n-primary);
}

.editbeneficiaireitemfull-section-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.editbeneficiaireitemfull-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.editbeneficiaireitemfull-field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.editbeneficiaireitemfull-field-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--n-text);
    margin-bottom: 5px;
}

.editbeneficiaireitemfull-input {
    width: calc(100% - 32px);
    padding: 12px 16px;
    border: 1px solid var(--n-border);
    border-radius: 6px;
    font-size: 14px;
    color: var(--n-text);
    background-color: var(--n-bg);
    transition: border-color 0.2s ease;
}

.editbeneficiaireitemfull-input:focus {
    outline: none;
    border-color: var(--n-primary);
    box-shadow: 0 0 0 2px rgba(var(--n-primary-rgb), 0.1);
}

.editbeneficiaireitemfull-input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.editbeneficiaireitemfull-select {
    width: calc(100% - 32px);
    padding: 12px 16px;
    border: 1px solid var(--n-border);
    border-radius: 6px;
    font-size: 14px;
    color: var(--n-text);
    background-color: var(--n-bg);
    transition: border-color 0.2s ease;
}

.editbeneficiaireitemfull-select:focus {
    outline: none;
    border-color: var(--n-primary);
    box-shadow: 0 0 0 2px rgba(var(--n-primary-rgb), 0.1);
}

/* Boutons */
.editbeneficiaireitemfull-button-row {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--n-border);
}

.editbeneficiaireitemfull-button {
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.editbeneficiaireitemfull-button-primary {
    background-color: var(--n-primary);
    color: white;
}

.editbeneficiaireitemfull-button-primary:hover {
    background-color: var(--n-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--n-shadow);
}

.editbeneficiaireitemfull-button-secondary {
    background-color: var(--n-bg);
    color: var(--n-text);
    border: 1px solid var(--n-border);
}

.editbeneficiaireitemfull-button-secondary:hover {
    background-color: var(--n-hover);
    border-color: var(--n-primary);
}

.editbeneficiaireitemfull-button .nbutton-icon {
    width: 16px;
    height: 16px;
}

/* Responsive design */
@media (max-width: 768px) {
    .editbeneficiaireitemfull {
        padding: 16px;
    }
    
    .editbeneficiaireitemfull-container {
        max-width: 100%;
    }
    
    .editbeneficiaireitemfull-section-panel {
        padding: 20px;
    }
    
    .editbeneficiaireitemfull-field-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .editbeneficiaireitemfull-button-row {
        flex-direction: column;
    }
    
    .editbeneficiaireitemfull-button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .editbeneficiaireitemfull-title {
        font-size: 24px;
    }
    
    .editbeneficiaireitemfull-section-panel {
        padding: 16px;
    }
    
    .editbeneficiaireitemfull-section-title {
        font-size: 18px;
    }
}
/**
 * @file CategorieItem.css
 * @description Styles pour les cartes de service (categorieitem)
 *
 * @requires Theme.css
 */

.categorieitem {
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: 16px;
    box-shadow: 0 6px 18px var(--n-shadow);
    padding: 20px 16px 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    height: auto;
    min-height: 180px;
    justify-content: space-between;
}

.categorieitem:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--n-shadow) 150%, transparent);
}

.categorieitem-child-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 100%;
}

.categorieitem-child-link {
    text-decoration: none;
    color: var(--n-text);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.categorieitem-child-icon {
    width: 40px;
    height: 40px;
    opacity: 0.9;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--n-primary) 20%, transparent 80%));
    border-radius: 8px;
    padding: 4px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--n-primary) 8%, transparent 92%), color-mix(in srgb, var(--n-primary) 4%, transparent 96%));
}

.categorieitem:hover .categorieitem-child-icon {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--n-primary) 30%, transparent 70%));
}

.categorieitem-child-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--n-text);
    margin: 0;
    text-align: center;
    line-height: 1.3;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 2.2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.categorieitem:hover .categorieitem-child-title {
    color: var(--n-primary);
}

.categorieitem-child-action {
    margin-top: auto;
    width: calc(100% - 24px);
    border: 1px solid var(--n-primary);
    background: color-mix(in srgb, var(--n-primary) 10%, transparent);
    color: var(--n-primary);
    border-radius: 12px;
    padding: 8px 12px;
    font-weight: 600;
    font-size: clamp(0.65rem, 1.5vw, 0.875rem);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    overflow: hidden;
}

.categorieitem-child-action img{
    width: clamp(12px, 1.5vw, 16px);
    height: clamp(12px, 1.5vw, 16px);
}

.categorieitem-child-action:hover img{
    filter: invert(1);
}

.categorieitem-child-action::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--n-primary) 15%, transparent 85%), transparent);
    transition: left 0.5s ease;
}

.categorieitem-child-action:hover::before {
    left: 100%;
}

.categorieitem-child-action:hover {
    background: var(--n-primary);
    color: var(--n-text-inverse);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--n-primary) 25%, transparent 75%);
}

.categorieitem-child-action:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--n-primary) 20%, transparent 80%);
}

/* Responsive */
@media (max-width: 768px) {
    .categorieitem {
        min-height: 160px;
        padding: 16px 12px 10px 12px;
        gap: 10px;
    }
    
    .categorieitem-child-icon {
        width: 36px;
        height: 36px;
    }
    
    .categorieitem-child-title {
        font-size: 15px;
    }
    
    .categorieitem-child-action {
        padding: 7px 10px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .categorieitem {
        min-height: 140px;
        padding: 14px 10px 8px 10px;
        gap: 8px;
        border-radius: 12px;
    }
    
    .categorieitem-child-icon {
        width: 32px;
        height: 32px;
    }
    
    .categorieitem-child-title {
        font-size: 14px;
        min-height: 2em;
    }
    
    .categorieitem-child-action {
        padding: 6px 8px;
        font-size: 12px;
        border-radius: 10px;
    }
}

/**
 * @file AddClientFrame.css
 *
 * @requires Theme.css
 */

 .addclientframe {
    width: 100%;
    min-height: calc(100vh - 65px);
    padding-top: 65px;
    background-color: var(--n-bg);
}

.addclientframe-container {
    background: var(--n-bg);
    color: var(--n-text);
    min-height: 100vh;
    padding: clamp(1rem, 3vw, 2rem);
}

/* ========================================
   HEADER
   ======================================== */

.addclientframe-header {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
    margin: 0 auto;
    margin-bottom: clamp(2rem, 5vw, 3rem);
    padding-bottom: clamp(1rem, 2vw, 1.5rem);
    border-bottom: 1px solid var(--n-border);
    max-width: 800px;
}

.addclientframe-title {
    font-size: clamp(1.25rem, 4vw, 2rem);
    font-weight: 700;
    color: var(--n-text);
    margin: 0;
    flex: 1;
}

/* ========================================
   FORMULAIRE PRINCIPAL
   ======================================== */

.addclientframe-form {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 1.5rem);
}

/* ========================================
   SECTIONS
   ======================================== */

.addclientframe-section {
    background: var(--n-bg-secondary);
    border-radius: 1rem;
    padding: clamp(1.5rem, 4vw, 2rem);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--n-text) 5%, transparent);
    border: 1px solid var(--n-border);
}

.addclientframe-section-title {
    font-size: clamp(1.125rem, 3vw, 1.5rem);
    font-weight: 700;
    color: var(--n-text);
    margin: 0 0 clamp(1.5rem, 4vw, 2rem) 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ========================================
   GROUPES D'INPUTS
   ======================================== */

.addclientframe-input {
    width: 100%;
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
}

.addclientframe-input:last-child {
    margin-bottom: 0;
}

.addclientframe-input:focus {
    outline: none;
    border-color: var(--n-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--n-primary) 20%, transparent);
}

.addclientframe-input::placeholder {
    color: var(--n-text-muted);
}

/* ========================================
   SECTION ACTIONS
   ======================================== */

.addclientframe-actions {
    display: flex;
    flex-direction: row;
    gap: clamp(1rem, 3vw, 1.5rem);
    justify-content: flex-end;
}

.addclientframe-btn-save,
.addclientframe-btn-cancel {
    padding: clamp(0.5rem, 2.5vw, 1rem) clamp(1rem, 4vw, 1.5rem);
    font-size: clamp(0.875rem, 2vw, 1rem);
    font-weight: 600;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
    justify-content: center;
}

.addclientframe-btn-save {
    background: var(--n-primary);
    color: var(--n-text-inverse);
    border: 2px solid var(--n-primary);
}

.addclientframe-btn-save:hover {
    background: color-mix(in srgb, var(--n-primary) 80%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--n-primary) 30%, transparent);
}

.addclientframe-btn-save img {
    filter: brightness(0) invert(1);
}

.addclientframe-btn-cancel {
    background: var(--n-bg);
    color: var(--n-text);
    border: 2px solid var(--n-border);
}

.addclientframe-btn-cancel: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);
}

.addclientframe-btn-cancel:hover img {
    filter: brightness(0) invert(1);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    .addclientframe-title {
        text-align: center;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .addclientframe-container {
        padding: clamp(0.75rem, 2vw, 1rem);
    }

    .addclientframe-section {
        padding: clamp(1rem, 3vw, 1.5rem);
    }
} 
/**
 * @file ClientFrame.css
 *
 * @requires Theme.css
 */

 .clientframe {
    width: 100%;
    min-height: calc(100vh - 65px);
    padding-top: 65px;
    background-color: var(--n-bg);
}
/**
 * @file ClientItemFull.css
 * 
 * @requires NTheme.css, NPanelTag.css, NButtonTag.css
 * 
 * @see ClientItemFull.js
 * 
 */

.clientitemfull {
    background: var(--n-bg);
    padding: 24px;
    min-height: 100vh;
}

.clientitemfull-container {
    max-width: 1200px;
    margin: 0 auto;
}

.clientitemfull-title {
    font-size: 28px;
    margin: 0 0 24px 0;
    color: var(--n-text);
    text-align: center;
    font-weight: 600;
}

/* Section Informations du Client */
.clientitemfull-info-panel {
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: 16px;
    box-shadow: 0 6px 18px var(--n-shadow);
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.clientitemfull-photo-container {
    flex-shrink: 0;
}

.clientitemfull-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--n-primary);
    background-color: var(--n-bg);
}

.clientitemfull-info-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.clientitemfull-name-container {
    margin-bottom: 8px;
}

.clientitemfull-fullname {
    font-size: 24px;
    font-weight: 700;
    color: var(--n-text);
    margin: 0;
}

.clientitemfull-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.clientitemfull-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: 8px;
}

.clientitemfull-detail-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--n-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.clientitemfull-detail-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--n-text);
}

/* Boutons d'action */
.clientitemfull-action-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.clientitemfull-edit-button {
    border-radius: 8px;
    padding: 12px 20px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: 1px solid;
    cursor: pointer;
}

.clientitemfull-edit-button {
    background: color-mix(in srgb, var(--n-primary) 10%, transparent);
    color: var(--n-primary);
    border-color: var(--n-primary);
}

.clientitemfull-edit-button:hover {
    background: var(--n-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--n-primary-rgb), 0.3);
}

.clientitemfull-child-button-pop {
    background: transparent;
    color: var(--n-text);
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    padding: 5px;
    transition: all 0.2s ease;
}

.clientitemfull-child-button-pop:hover {
    background: var(--n-bg-secondary);
    color: var(--n-text);
    border: none;
}

/* Responsive design */
@media (max-width: 1024px) {
    .clientitemfull-details-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .clientitemfull {
        padding: 16px;
    }
    
    .clientitemfull-info-panel {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }
    
    .clientitemfull-photo {
        width: 100px;
        height: 100px;
    }
    
    .clientitemfull-fullname {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .clientitemfull-title {
        font-size: 24px;
    }
    
    .clientitemfull-fullname {
        font-size: 18px;
    }
    
    .clientitemfull-photo {
        width: 80px;
        height: 80px;
    }
}


/**
 * @file ClientListItem.css
 * 
 * @requires NTheme.css
 * 
 * @see ClientListItem.js
 * 
 */

/* Item de client */
.clientlistitem {
    display: block;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 12px;
    overflow: hidden;
}

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

.clientlistitem-container {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid var(--n-border);
}

/* Photo */
.clientlistitem-photo-container {
    flex-shrink: 0;
}

.clientlistitem-photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--n-border);
    background-color: var(--n-bg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Informations */
.clientlistitem-info-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.clientlistitem-name-container {
    margin-bottom: 4px;
}

.clientlistitem-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--n-text);
    margin: 0;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.clientlistitem-details-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.clientlistitem-detail-item {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.clientlistitem-detail-icon {
    width: 16px;
    height: 16px;
    opacity: 0.7;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.clientlistitem-detail-text {
    font-size: 14px;
    color: var(--n-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive design */
@media (max-width: 768px) {
    .clientlistitem-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }
    
    .clientlistitem-photo {
        width: 50px;
        height: 50px;
    }
    
    .clientlistitem-name {
        font-size: 16px;
    }
    
    .clientlistitem-details-container {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    
    .clientlistitem-detail-item {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .clientlistitem-container {
        padding: 14px;
    }
    
    .clientlistitem-photo {
        width: 45px;
        height: 45px;
    }
    
    .clientlistitem-name {
        font-size: 15px;
    }
    
    .clientlistitem-detail-text {
        font-size: 13px;
    }
    
    .clientlistitem-detail-icon {
        width: 14px;
        height: 14px;
    }
}


/**
 * @file ClientsFrame.css
 * 
 * @requires NTheme.css
 * 
 * @see ClientsFrame.js
 * 
 */

 .clientsframe {
    background: var(--n-bg);
    padding: 24px;
    min-height: calc(100vh - 65px);
    padding-top: 65px;
}

.clientsframe-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 20px;
}

.clientsframe-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--n-text);
    margin: 0 0 8px 0;
}

.clientsframe-add-button {
    background: var(--n-primary);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.clientsframe-add-button:hover {
    background: var(--n-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--n-shadow);
}

.clientsframe-add-button img {
    width: 16px;
    height: 16px;
    filter: invert(1);
}

/* Panel des bénéficiaires */
.clientsframe-panel {
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Responsive design */
@media (max-width: 768px) {
    .clientsframe {
        padding: 16px;
    }
    
    .clientsframe-title-container {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .clientsframe-title {
        font-size: 24px;
    }
}
/**
 * @file EditClientFrame.css
 *
 * @requires Theme.css
 */

 .editclientframe {
    width: 100%;
    min-height: calc(100vh - 65px);
    padding-top: 65px;
    background-color: var(--n-bg);
}
/**
 * @file EditClientItemFull.css
 *
 * @requires Theme.css
 */
/* ========================================
   EDIT CLIENT ITEM FULL - STYLE FORMULAIRE
   ======================================== */

   .editclientitemfull-container {
    background: var(--n-bg);
    color: var(--n-text);
    min-height: 100vh;
    padding: clamp(1rem, 3vw, 2rem);
}

/* ========================================
   HEADER
   ======================================== */

.editclientitemfull-header {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
    margin: 0 auto;
    margin-bottom: clamp(2rem, 5vw, 3rem);
    padding-bottom: clamp(1rem, 2vw, 1.5rem);
    border-bottom: 1px solid var(--n-border);
    max-width: 800px;
}

.editclientitemfull-title {
    font-size: clamp(1.25rem, 4vw, 2rem);
    font-weight: 700;
    color: var(--n-text);
    margin: 0;
    flex: 1;
}

/* ========================================
   FORMULAIRE PRINCIPAL
   ======================================== */

.editclientitemfull-form {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 1.5rem);
}

/* ========================================
   SECTIONS
   ======================================== */

.editclientitemfull-section {
    background: var(--n-bg-secondary);
    border-radius: 1rem;
    padding: clamp(1.5rem, 4vw, 2rem);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--n-text) 5%, transparent);
    border: 1px solid var(--n-border);
}

.editclientitemfull-section-title {
    font-size: clamp(1.125rem, 3vw, 1.5rem);
    font-weight: 700;
    color: var(--n-text);
    margin: 0 0 clamp(1.5rem, 4vw, 2rem) 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ========================================
   GROUPES D'INPUTS
   ======================================== */

.editclientitemfull-input {
    width: 100%;
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
}

.editclientitemfull-input:last-child {
    margin-bottom: 0;
}

.editclientitemfull-input:focus {
    outline: none;
    border-color: var(--n-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--n-primary) 20%, transparent);
}

.editclientitemfull-input::placeholder {
    color: var(--n-text-muted);
}

/* ========================================
   SECTION ACTIONS
   ======================================== */

.editclientitemfull-actions {
    display: flex;
    flex-direction: row;
    gap: clamp(1rem, 3vw, 1.5rem);
    justify-content: flex-end;
}

.editclientitemfull-btn-save,
.editclientitemfull-btn-cancel {
    padding: clamp(0.5rem, 2.5vw, 1rem) clamp(1rem, 4vw, 1.5rem);
    font-size: clamp(0.875rem, 2vw, 1rem);
    font-weight: 600;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
    justify-content: center;
}

.editclientitemfull-btn-save {
    background: var(--n-primary);
    color: var(--n-text-inverse);
    border: 2px solid var(--n-primary);
}

.editclientitemfull-btn-save:hover {
    background: color-mix(in srgb, var(--n-primary) 80%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--n-primary) 30%, transparent);
}

.editclientitemfull-btn-save img {
    filter: brightness(0) invert(1);
}

.editclientitemfull-btn-cancel {
    background: var(--n-bg);
    color: var(--n-text);
    border: 2px solid var(--n-border);
}

.editclientitemfull-btn-cancel: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);
}

.editclientitemfull-btn-cancel:hover img {
    filter: brightness(0) invert(1);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    .editclientitemfull-title {
        text-align: center;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .editclientitemfull-container {
        padding: clamp(0.75rem, 2vw, 1rem);
    }

    .editclientitemfull-section {
        padding: clamp(1rem, 3vw, 1.5rem);
    }
} 
/**
 * @file EntrepriseFrame.css
 *
 * @requires Theme.css
 */

 .entrepriseframe {
    width: 100%;
    min-height: calc(100vh - 65px);
    padding-top: 65px;
    background-color: var(--n-bg);
}
/**
 * @file EntrepriseItemFull.css
 * 
 * @requires NTheme.css, NButtonTag.css
 * 
 * @see EntrepriseItemFull.js
 * 
 */

.entrepriseitemfull {
    background: var(--n-bg);
    padding: 24px;
    min-height: 100vh;
}

.entrepriseitemfull-container {
    max-width: 900px;
    margin: 0 auto;
}

.entrepriseitemfull-title {
    font-size: 28px;
    margin: 0 0 24px 0;
    color: var(--n-text);
    text-align: center;
    font-weight: 600;
}

/* Section Informations de l'Entreprise */
.entrepriseitemfull-info-panel {
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: 16px;
    box-shadow: 0 6px 18px var(--n-shadow);
    padding: 32px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.entrepriseitemfull-name-container {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--n-primary);
}

.entrepriseitemfull-fullname {
    font-size: 32px;
    font-weight: 700;
    color: var(--n-primary);
    margin: 0;
}

.entrepriseitemfull-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.entrepriseitemfull-detail-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.entrepriseitemfull-detail-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--n-shadow);
}

.entrepriseitemfull-detail-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--n-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.entrepriseitemfull-detail-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--n-text);
}

/* Section de contact SAV */
.entrepriseitemfull-contact-section {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--n-success) 10%, transparent) 0%, 
        color-mix(in srgb, var(--n-success) 5%, transparent) 100%);
    border: 2px solid color-mix(in srgb, var(--n-success) 30%, transparent);
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 12px var(--n-shadow);
}

.entrepriseitemfull-contact-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
    animation: pulse 2s infinite;
}

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

.entrepriseitemfull-contact-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--n-text);
    margin: 0;
}

.entrepriseitemfull-contact-message {
    font-size: 15px;
    line-height: 1.6;
    color: var(--n-text-muted);
    margin: 0;
    max-width: 600px;
}

.entrepriseitemfull-whatsapp-button {
    margin-top: 8px;
    padding: 14px 32px;
    background: #25D366;
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    text-decoration: none;
}

.entrepriseitemfull-whatsapp-button:hover {
    background: #20BA5A;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

.entrepriseitemfull-whatsapp-button:active {
    transform: translateY(-1px);
}

.entrepriseitemfull-whatsapp-button .nbutton-icon,
.entrepriseitemfull-whatsapp-button img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

/* Responsive design */
@media (max-width: 768px) {
    .entrepriseitemfull {
        padding: 16px;
    }
    
    .entrepriseitemfull-info-panel {
        padding: 24px;
    }
    
    .entrepriseitemfull-fullname {
        font-size: 26px;
    }
    
    .entrepriseitemfull-details-grid {
        grid-template-columns: 1fr;
    }
    
    .entrepriseitemfull-contact-section {
        padding: 24px;
    }
    
    .entrepriseitemfull-contact-icon {
        width: 56px;
        height: 56px;
    }
    
    .entrepriseitemfull-contact-title {
        font-size: 20px;
    }
    
    .entrepriseitemfull-contact-message {
        font-size: 14px;
    }
    
    .entrepriseitemfull-whatsapp-button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .entrepriseitemfull {
        padding: 12px;
    }
    
    .entrepriseitemfull-title {
        font-size: 24px;
        margin-bottom: 16px;
    }
    
    .entrepriseitemfull-info-panel {
        padding: 20px;
        border-radius: 12px;
    }
    
    .entrepriseitemfull-fullname {
        font-size: 22px;
    }
    
    .entrepriseitemfull-detail-item {
        padding: 12px;
    }
    
    .entrepriseitemfull-detail-value {
        font-size: 14px;
    }
    
    .entrepriseitemfull-contact-section {
        padding: 20px;
        border-radius: 12px;
    }
    
    .entrepriseitemfull-contact-icon {
        width: 48px;
        height: 48px;
    }
    
    .entrepriseitemfull-contact-title {
        font-size: 18px;
    }
    
    .entrepriseitemfull-contact-message {
        font-size: 13px;
    }
    
    .entrepriseitemfull-whatsapp-button {
        padding: 12px 24px;
        font-size: 14px;
    }
}


/**
 * @file AddManuelMessageFrame.css
 * 
 * @requires NTheme.css
 * @requires NInputAreaTag.css
 * @requires NInputCheckTag.css
 * @requires NButtonTag.css
 * 
 * @see AddManuelMessageFrame.js
 * 
 */

 .addmanuelmessageframe{
    min-height: calc(100vh - 65px);
    padding: clamp(1rem, 2vw, 2rem);
    padding-top: 65px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
 }

.addmanuelmessageframe-container {
    width: calc(100% - 40px);
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--n-bg-secondary);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.addmanuelmessageframe-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--n-text);
    margin: 0 0 30px 0;
    text-align: center;
}

.addmanuelmessageframe-section-panel {
    margin-bottom: 30px;
    padding: 20px;
    background-color: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: 6px;
}

.addmanuelmessageframe-section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--n-text);
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--n-primary);
}

.addmanuelmessageframe-section-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.addmanuelmessageframe-field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.addmanuelmessageframe-field-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--n-text);
    margin-bottom: 5px;
}

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

.addmanuelmessageframe-button-row {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--n-border);
}

.addmanuelmessageframe-button {
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

.addmanuelmessageframe-button-primary {
    background-color: var(--n-primary);
    color: white;
}

.addmanuelmessageframe-button-primary:hover {
    background-color: var(--n-hover);
    transform: translateY(-1px);
}

.addmanuelmessageframe-button-secondary {
    background-color: var(--n-bg);
    color: var(--n-text);
    border: 1px solid var(--n-border);
}

.addmanuelmessageframe-button-secondary:hover {
    background-color: var(--n-hover);
    border-color: var(--n-primary);
}

/* Responsive design */
@media (max-width: 768px) {
    .addmanuelmessageframe-container {
        margin: 10px;
        padding: 15px;
    }
    
    .addmanuelmessageframe-section-panel {
        padding: 15px;
    }
    
    .addmanuelmessageframe-button-row {
        flex-direction: column;
    }
    
    .addmanuelmessageframe-button {
        width: 100%;
    }
}
/**
 * @file AddManuelRdvFrame.css
 * 
 * @requires NTheme.css
 * @requires NButtonTag.css
 * @requires CtxInputSelectBeneficiaire.css
 * @requires CtxInputSelectModeleMessage.css
 * 
 * @see AddManuelRdvFrame.js
 * 
 */

 .addmanuelrdvframe{
    min-height: calc(100vh - 65px);
    padding: clamp(1rem, 2vw, 2rem);
    padding-top: 65px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
 }

.addmanuelrdvframe-container {
    width: calc(100% - 40px);
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--n-bg-secondary);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.addmanuelrdvframe-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--n-text);
    margin: 0 0 30px 0;
    text-align: center;
}

.addmanuelrdvframe-section-panel {
    margin-bottom: 30px;
    padding: 20px;
    background-color: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: 6px;
}

.addmanuelrdvframe-section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--n-text);
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--n-primary);
}

.addmanuelrdvframe-section-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.addmanuelrdvframe-field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.addmanuelrdvframe-field-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--n-text);
    margin-bottom: 5px;
}

.addmanuelrdvframe-button-row {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--n-border);
}

.addmanuelrdvframe-button {
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

.addmanuelrdvframe-button-primary {
    background-color: var(--n-primary);
    color: white;
}

.addmanuelrdvframe-button-primary:hover {
    background-color: var(--n-hover);
    transform: translateY(-1px);
}

.addmanuelrdvframe-button-secondary {
    background-color: var(--n-bg);
    color: var(--n-text);
    border: 1px solid var(--n-border);
}

.addmanuelrdvframe-button-secondary:hover {
    background-color: var(--n-hover);
    border-color: var(--n-primary);
}

/* Responsive design */
@media (max-width: 768px) {
    .addmanuelrdvframe-container {
        margin: 10px;
        padding: 15px;
    }
    
    .addmanuelrdvframe-section-panel {
        padding: 15px;
    }
    
    .addmanuelrdvframe-button-row {
        flex-direction: column;
    }
    
    .addmanuelrdvframe-button {
        width: 100%;
    }
}
/**
 * @file EditMessageItemFull.css
 * 
 * @requires NTheme.css, NInputTag.css, NInputAreaTag.css, NButtonTag.css
 * 
 * @see EditMessageItemFull.js
 * 
 */

.editmessageitemfull {
    background: var(--n-bg);
    padding: 24px;
    min-height: calc(100vh - 65px);
    padding-top: 65px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.editmessageitemfull-container {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 30px;
    background-color: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: 16px;
    box-shadow: 0 6px 18px var(--n-shadow);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.editmessageitemfull-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--n-text);
    margin: 0;
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--n-primary);
}

/* Champs de formulaire */
.editmessageitemfull-input {
    width: calc(100% - 34px);
    padding: 12px 16px;
    border: 1px solid var(--n-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--n-text);
    background-color: var(--n-bg);
    transition: all 0.2s ease;
    font-family: inherit;
}

/* Style spécifique pour textarea */
.editmessageitemfull-input textarea,
.editmessageitemfull-input.ninputareatag textarea {
    min-height: 150px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.6;
}

/* Style spécifique pour datetime-local */
.editmessageitemfull-input input[type="datetime-local"] {
    cursor: pointer;
}

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

/* Boutons d'action */
.editmessageitemfull-button-row {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 10px;
    padding-top: 24px;
    border-top: 1px solid var(--n-border);
}

.editmessageitemfull-button {
    padding: 12px 28px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-transform: none;
}

.editmessageitemfull-button-primary {
    background-color: var(--n-primary);
    color: white;
    border: 1px solid var(--n-primary);
}

.editmessageitemfull-button-primary:hover {
    background-color: var(--n-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(13, 148, 136, 0.3);
}

.editmessageitemfull-button-primary:active {
    transform: translateY(0);
}

.editmessageitemfull-button-secondary {
    background-color: transparent;
    color: var(--n-text);
    border: 1px solid var(--n-border);
}

.editmessageitemfull-button-secondary:hover {
    background-color: var(--n-bg);
    border-color: var(--n-primary);
    color: var(--n-primary);
    transform: translateY(-2px);
}

.editmessageitemfull-button-secondary:active {
    transform: translateY(0);
}

.editmessageitemfull-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .editmessageitemfull {
        padding: 16px;
    }
    
    .editmessageitemfull-container {
        padding: 24px;
        max-width: 100%;
        width: calc(100% - 32px);
    }
    
    .editmessageitemfull-title {
        font-size: 24px;
        padding-bottom: 16px;
    }
    
    .editmessageitemfull-button-row {
        flex-direction: column-reverse;
        gap: 10px;
    }
    
    .editmessageitemfull-button {
        width: 100%;
        min-width: unset;
    }
}

@media (max-width: 480px) {
    .editmessageitemfull {
        padding: 12px;
    }
    
    .editmessageitemfull-container {
        padding: 20px;
        border-radius: 12px;
        width: calc(100% - 24px);
    }
    
    .editmessageitemfull-title {
        font-size: 20px;
    }
    
    .editmessageitemfull-input {
        padding: 10px 14px;
        font-size: 13px;
    }
    
    .editmessageitemfull-button {
        padding: 10px 20px;
        font-size: 13px;
    }
}


/**
 * @file MessageFrame.css
 *
 * @requires Theme.css
 */

 .messageframe {
    width: 100%;
    min-height: calc(100vh - 65px);
    padding-top: 65px;
    background-color: var(--n-bg);
}
/**
 * @file MessageItem.css
 * @description Styles pour les lignes d'activité SMS (messageitem)
 *
 * @requires Theme.css
 */

.messageitem {
    border-top: 1px solid var(--n-border);
    padding: 5px 0;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.messageitem:hover {
    background-color: var(--n-bg);
    transform: translateY(-1px);
}

.messageitem-child-container {
    display: grid;
    grid-template-columns: 2fr 1.6fr 1.4fr 1fr 1fr;
    gap: 16px;
    align-items: center;
    padding: 14px 18px;
    width: calc(100% - 36px);
}

.messageitem-child-patient {
    font-size: 14px;
    font-weight: 600;
    color: var(--n-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.messageitem-child-rdv {
    font-size: 14px;
    font-weight: 500;
    color: var(--n-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.messageitem-child-date {
    font-size: 14px;
    color: var(--n-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.messageitem-child-service {
    font-size: 14px;
    font-weight: 500;
    color: var(--n-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.messageitem-child-status {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.messageitem-child-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.messageitem-badge-programme {
    background: color-mix(in srgb, var(--n-info) 12%, transparent);
    color: var(--n-info);
    border: 1px solid color-mix(in srgb, var(--n-info) 20%, transparent);
}

.messageitem-badge-envoye {
    background: color-mix(in srgb, var(--n-warning) 12%, transparent);
    color: var(--n-warning);
    border: 1px solid color-mix(in srgb, var(--n-warning) 20%, transparent);
}

.messageitem-badge-delivre {
    background: color-mix(in srgb, var(--n-success) 12%, transparent);
    color: var(--n-success);
    border: 1px solid color-mix(in srgb, var(--n-success) 20%, transparent);
}

.messageitem-badge-echoue {
    background: color-mix(in srgb, var(--n-error) 12%, transparent);
    color: var(--n-error);
    border: 1px solid color-mix(in srgb, var(--n-error) 20%, transparent);
}

/* Responsive */
@media (max-width: 768px) {
    .messageitem-child-container {
        grid-template-columns: 1.5fr 1.2fr 1fr 0.8fr 0.8fr;
        gap: 12px;
        padding: 12px 14px;
    }
    
    .messageitem-child-patient,
    .messageitem-child-rdv,
    .messageitem-child-date,
    .messageitem-child-service {
        font-size: 13px;
    }
    
    .messageitem-child-badge {
        padding: 5px 10px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .messageitem-child-container {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
    }
    
    .messageitem-child-patient {
        font-size: 14px;
        font-weight: 700;
    }
    
    .messageitem-child-rdv,
    .messageitem-child-date,
    .messageitem-child-service {
        font-size: 12px;
    }
    
    .messageitem-child-status {
        justify-content: flex-start;
    }
    
    .messageitem-child-badge {
        padding: 4px 10px;
        font-size: 11px;
    }
}

/**
 * @file MessageItemFull.css
 * 
 * @requires NTheme.css, NButtonTag.css, NPopupTag.css
 * 
 * @see MessageItemFull.js
 * 
 */

.messageitemfull {
    background: var(--n-bg);
    padding: 24px;
    min-height: 100vh;
}

.messageitemfull-container {
    max-width: 900px;
    margin: 0 auto;
}

.messageitemfull-title {
    font-size: 28px;
    margin: 0 0 24px 0;
    color: var(--n-text);
    text-align: center;
    font-weight: 600;
}

/* Section Informations du Message */
.messageitemfull-info-panel {
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: 16px;
    box-shadow: 0 6px 18px var(--n-shadow);
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Badge de statut */
.messageitemfull-status-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--n-border);
}

.messageitemfull-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    text-transform: capitalize;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.messageitemfull-badge-programme {
    background: color-mix(in srgb, var(--n-info) 12%, transparent);
    color: var(--n-info);
    border: 1px solid color-mix(in srgb, var(--n-info) 30%, transparent);
}

.messageitemfull-badge-envoye {
    background: color-mix(in srgb, var(--n-warning) 12%, transparent);
    color: var(--n-warning);
    border: 1px solid color-mix(in srgb, var(--n-warning) 30%, transparent);
}

.messageitemfull-badge-delivre {
    background: color-mix(in srgb, var(--n-success) 12%, transparent);
    color: var(--n-success);
    border: 1px solid color-mix(in srgb, var(--n-success) 30%, transparent);
}

.messageitemfull-badge-echoue {
    background: color-mix(in srgb, var(--n-error) 12%, transparent);
    color: var(--n-error);
    border: 1px solid color-mix(in srgb, var(--n-error) 30%, transparent);
}

/* Grille de détails */
.messageitemfull-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.messageitemfull-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: 8px;
}

.messageitemfull-detail-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--n-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.messageitemfull-detail-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--n-text);
}

/* Section du message */
.messageitemfull-message-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: 12px;
}

.messageitemfull-message-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--n-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.messageitemfull-message-content {
    font-size: 15px;
    line-height: 1.6;
    color: var(--n-text);
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 12px;
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: 8px;
    min-height: 100px;
}

.messageitemfull-image-content {
    max-height: 200px;
    object-fit: contain;
}

/* Boutons d'action */
.messageitemfull-action-container {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--n-border);
}

.messageitemfull-action-button {
    border-radius: 8px;
    padding: 12px 20px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: 1px solid;
    cursor: pointer;
    background: color-mix(in srgb, var(--n-primary) 10%, transparent);
    color: var(--n-primary);
    border-color: var(--n-primary);
}

.messageitemfull-action-button:hover {
    background: var(--n-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
}

/* Popup menu */
.messageitemfull-child-popup {
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--n-shadow);
    padding: 8px;
    overflow: hidden;
}

.messageitemfull-child-button-pop {
    background: transparent;
    color: var(--n-text);
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    padding: 10px 12px;
    transition: all 0.2s ease;
    border-radius: 6px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
}

.messageitemfull-child-button-pop:hover {
    background: var(--n-bg);
    color: var(--n-primary);
}

.messageitemfull-child-button-danger:hover {
    background: color-mix(in srgb, var(--n-error) 10%, transparent);
    color: var(--n-error);
}

/* Responsive design */
@media (max-width: 768px) {
    .messageitemfull {
        padding: 16px;
    }
    
    .messageitemfull-info-panel {
        padding: 20px;
    }
    
    .messageitemfull-details-grid {
        grid-template-columns: 1fr;
    }
    
    .messageitemfull-title {
        font-size: 24px;
    }
    
    .messageitemfull-action-container {
        flex-direction: column;
    }
    
    .messageitemfull-action-button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .messageitemfull {
        padding: 12px;
    }
    
    .messageitemfull-container {
        max-width: 100%;
    }
    
    .messageitemfull-info-panel {
        padding: 16px;
        border-radius: 12px;
    }
    
    .messageitemfull-title {
        font-size: 20px;
        margin-bottom: 16px;
    }
    
    .messageitemfull-status-badge {
        padding: 6px 16px;
        font-size: 13px;
    }
    
    .messageitemfull-detail-item {
        padding: 10px;
    }
    
    .messageitemfull-message-section {
        padding: 12px;
    }
    
    .messageitemfull-message-content {
        font-size: 14px;
        padding: 10px;
    }
}


/**
 * @file MessagesFrame.css
 * 
 * @requires NTheme.css
 * 
 * @see MessagesFrame.js
 * 
 */

 .messagesframe {
    background: var(--n-bg);
    padding: 24px;
    min-height: calc(100vh - 65px);
    padding-top: 65px;
}

.messagesframe-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 20px;
}

.messagesframe-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--n-text);
    margin: 0 0 8px 0;
}

.messagesframe-filtre-container {
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.messagesframe-filtre-input {
    max-width: 400px;
}

.messagesframe-filtre-input .ninputelement-child-stylecontainer {
    background-color: var(--n-bg-secondary);
}

/* Panel des messages et rendez-vous */
.messagesframe-panel {
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Responsive design */
@media (max-width: 768px) {
    .messagesframe {
        padding: 16px;
    }
    
    .messagesframe-title-container {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .messagesframe-title {
        font-size: 24px;
    }
}
/**
 * @file SendMessageFrame.css
 * 
 * @requires NTheme.css
 * @requires NInputAreaTag.css
 * @requires NInputCheckTag.css
 * @requires NButtonTag.css
 * 
 * @see SendMessageFrame.js
 * 
 */

 .sendmessageframe{
    min-height: calc(100vh - 65px);
    padding: clamp(1rem, 2vw, 2rem);
    padding-top: 65px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
 }

.sendmessageframe-container {
    width: calc(100% - 40px);
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--n-bg-secondary);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.sendmessageframe-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--n-text);
    margin: 0 0 30px 0;
    text-align: center;
}

.sendmessageframe-section-panel {
    margin-bottom: 30px;
    padding: 20px;
    background-color: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: 6px;
}

.sendmessageframe-section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--n-text);
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--n-primary);
}

.sendmessageframe-section-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sendmessageframe-field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sendmessageframe-field-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--n-text);
    margin-bottom: 5px;
}

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

.sendmessageframe-services-check {
    width: 100%;
}

.sendmessageframe-services-check .ninputcheck-child-checkscontainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    padding: 20px;
    border: 1px solid var(--n-border);
    border-radius: 6px;
    background-color: var(--n-bg);
}

.sendmessageframe-services-check .ninputcheck-child-checkspanel {
    display: contents;
}

.sendmessageframe-services-check .ncheckitem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--n-border);
    border-radius: 4px;
    background-color: var(--n-bg);
    transition: all 0.2s ease;
    cursor: pointer;
}

.sendmessageframe-services-check .ncheckitem:hover {
    background-color: var(--n-hover);
    border-color: var(--n-primary);
}

.sendmessageframe-services-check .ncheckitem.checked {
    background-color: var(--n-primary);
    border-color: var(--n-primary);
    color: white;
}

.sendmessageframe-services-check .ncheckitem input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--n-primary);
}

.sendmessageframe-checkbox-recurrence {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--n-text);
    background: none;
    border: none;
    user-select: none;
    transition: color 0.18s;
}

.sendmessageframe-checkbox-recurrence .nbuttoncheck-child-check {
    width: 20px;
    height: 20px;
    accent-color: var(--n-primary);
    margin-right: 8px;
}

.sendmessageframe-checkbox-recurrence .nbuttoncheck-child-label {
    flex: 1;
    font-size: 15px;
}

.sendmessageframe-checkbox-recurrence:hover {
    color: var(--n-text-inverse);
}



.sendmessageframe-button-row {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--n-border);
}

.sendmessageframe-button {
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

.sendmessageframe-button-primary {
    background-color: var(--n-primary);
    color: white;
}

.sendmessageframe-button-primary:hover {
    background-color: var(--n-hover);
    transform: translateY(-1px);
}

.sendmessageframe-button-secondary {
    background-color: var(--n-bg);
    color: var(--n-text);
    border: 1px solid var(--n-border);
}

.sendmessageframe-button-secondary:hover {
    background-color: var(--n-hover);
    border-color: var(--n-primary);
}

/* Responsive design */
@media (max-width: 768px) {
    .sendmessageframe-container {
        margin: 10px;
        padding: 15px;
    }
    
    .sendmessageframe-section-panel {
        padding: 15px;
    }
    
    .sendmessageframe-services-check .ninputcheck-child-checkscontainer {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 15px;
    }
    
    .sendmessageframe-button-row {
        flex-direction: column;
    }
    
    .sendmessageframe-button {
        width: 100%;
    }
}
/**
 * @file NavBar.css
 *
 * @requires Theme.css
 */
/* Styles pour la barre de navigation statique */
.navbar {
    width: 100%;
    background-color: var(--n-bg-secondary);
    position: fixed;
    top: 0px;
    left: 0px;
    border-bottom: 2px solid var(--n-border);
    z-index: 100;
}

/* Animation d'entrée du navbar */
@keyframes navbar-FadeIn {
    from {
        opacity: 0;
        transform: translateY(-0.625rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Barre principale */
.navbar-child-table-main {
    width: calc(100% - 20px);
    margin: 0 10px;
    background-color: var(--n-bg-secondary);
    animation: navbar-FadeIn 0.5s ease 0.2s backwards;
    white-space: nowrap;
    border-collapse: collapse;
}

/* Bouton back */
.navbar-child-cell-backbutton {
    min-width: 2.5rem;
    min-height: 2.5rem;
    text-align: center;
    vertical-align: middle;
    display: none;
}

.navbar-child-cell-backbutton.enabled-backbutton {
    display: table-cell;
}

.navbar-child-backbutton {
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
    width: auto;
    height: auto;
    background-color: transparent;
}

.navbar-child-backbutton img {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.3s ease;
}

.navbar-child-backbutton.ntheme-dark img {
    filter: invert(1);
}

.navbar-child-backbutton:hover {
    background-color: rgba(0, 150, 57, 0.1);
}

.navbar-child-backbutton:hover img {
    transform: scale(1.1);
}

/* Icon SOTRACO */
.navbar-child-cell-icon{
    white-space: nowrap;
    vertical-align: middle;
    text-align: left;
}

.navbar-child-link-icon{
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: left;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-child-link-icon:hover {
    transform: scale(1.05);
}

.navbar-child-icon {
    display: inline-block;
    height: 2.625rem;
    width: auto;
}

.navbar-child-text{
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    font-weight: 700;
    color: var(--n-primary);
    letter-spacing: 0.03em;
    margin-left: 0.5rem;
    display: inline-block;    
}

/* text count select */
.navbar-child-cell-textcountselect{
    display: none;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.navbar-child-textcountselect{
    font-size: clamp(0.875rem, 2.5vw, 1.125rem);
    font-weight: 700;
    color: var(--n-primary);
    letter-spacing: 0.03em;
}

/* Barre de recherche */
.navbar-child-cell-searchbar {
    position: relative;
    width: 100%;
}

.navbar-child-searchbar {
    width: 100%;
    font-size: 0.9375rem;
    --n-input-height: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 450px;
    margin: auto;
}

/* Bouton de recherche */
.navbar-child-cell-searchbutton {
    display: none;
}

.navbar-child-searchbutton {
    background: transparent;
    border: none;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
    width: auto;
    height: auto;
}

.navbar-child-searchbutton img {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
}

.navbar-child-searchbutton.ntheme-dark img {
    filter: invert(1);
}

.navbar-child-searchbutton:hover {
    background-color: rgba(0, 150, 57, 0.1);
}

.navbar-child-searchbutton:hover img {
    transform: scale(1.1) rotate(5deg);
}

/* Bouton menu mobile */
.navbar-child-cell-menubutton,
.navbar-child-cell-notifybutton,
.navbar-child-cell-deletebutton {
    min-width: 2.5rem;
    min-height: 2.5rem;
    text-align: center;
    vertical-align: middle;
}

.navbar-child-cell-notifybutton{
    position: relative;
}

.navbar-child-cell-deletebutton {
    display: none;
}

.navbar-child-notifybutton,
.navbar-child-deletebutton,
.navbar-child-menubutton {
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
    width: auto;
    height: auto;
    text-decoration: none;
    color: var(--n-text);
    background: transparent;
    border: none;
    cursor: pointer;
}

.navbar-child-menubutton img,
.navbar-child-notifybutton img,
.navbar-child-deletebutton img {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.3s ease;
}

.navbar-child-menubutton.ntheme-dark img,
.navbar-child-notifybutton.ntheme-dark img,
.navbar-child-deletebutton.ntheme-dark img {
    filter: invert(1);
}

.navbar-child-menubutton:hover,
.navbar-child-notifybutton:hover,
.navbar-child-deletebutton:hover {
    background-color: rgba(0, 150, 57, 0.1);
}

.navbar-child-menubutton:hover img,
.navbar-child-notifybutton:hover img,
.navbar-child-deletebutton:hover img {
    transform: scale(1.1);
}

.navbar-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;
    right: 5px;
    z-index: 1;
}

/* check all */
.navbar-child-cell-checkall{
    min-width: 2.5rem;
    min-height: 2.5rem;
    text-align: center;
    vertical-align: middle;
    display: none;
}

.navbar-child-checkall{
    display: inline-block;
    transition: all 0.3s ease;
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

/* Media Queries - Approche mobile-first */
@media (min-width: 600px) {
    .navbar-simple-mode{
        .navbar-child-cell-icon{
            display: table-cell;
        }

        .navbar-child-text{
            display: inline-block;
        }

        .navbar-child-cell-textcountselect{
            display: none;
        }
    
        .navbar-child-searchbar{
            display: none;
        }

        .navbar-child-cell-searchbutton{
            display: none;
        }
        
        .navbar-child-cell-menubutton{
            display: none;
        }

        .navbar-child-cell-notifybutton{
            display: none;
        }

        .navbar-child-cell-deletebutton{
            display: none;
        }

        .navbar-child-cell-checkall{
            display: none;
        }
    }

    .navbar-normal-mode,
    .navbar-search-mode{
        .navbar-child-cell-icon{
            display: table-cell;
        }

        .navbar-child-text{
            display: inline-block;
        }

        .navbar-child-cell-textcountselect{
            display: none;
        }
    
        .navbar-child-searchbar{
            display: block;
        }

        .navbar-child-cell-searchbutton{
            display: none;
        }
        
        .navbar-child-cell-menubutton{
            display: table-cell;
        }

        .navbar-child-cell-notifybutton{
            display: table-cell;
        }

        .navbar-child-cell-deletebutton{
            display: none;
        }

        .navbar-child-cell-checkall{
            display: none;
        }
    }

    .navbar-select-mode{
        .navbar-child-cell-icon{
            display: table-cell;
        }

        .navbar-child-text{
            display: none;
        }

        .navbar-child-cell-textcountselect{
            display: table-cell;
        }
    
        .navbar-child-searchbar{
            display: none;
        }

        .navbar-child-cell-searchbutton{
            display: none;
        }
        
        .navbar-child-cell-menubutton{
            display: none;
        }

        .navbar-child-cell-notifybutton{
            display: none;
        }

        .navbar-child-cell-deletebutton{
            display: table-cell;
        }

        .navbar-child-cell-checkall{
            display: table-cell;
        }
    }
}

@media (max-width: 599px) {
    .navbar-simple-mode{
        .navbar-child-cell-icon{
            display: table-cell;
        }

        .navbar-child-text{
            display: inline-block;
        }

        .navbar-child-cell-textcountselect{
            display: none;
        }
    
        .navbar-child-searchbar{
            display: none;
        }

        .navbar-child-cell-searchbutton{
            display: none;
        }
        
        .navbar-child-cell-menubutton{
            display: none;
        }

        .navbar-child-cell-notifybutton{
            display: none;
        }

        .navbar-child-cell-deletebutton{
            display: none;
        }

        .navbar-child-cell-checkall{
            display: none;
        }
    }
    
    .navbar-normal-mode{
        .navbar-child-cell-icon{
            display: table-cell;
        }

        .navbar-child-text{
            display: inline-block;
        }

        .navbar-child-cell-textcountselect{
            display: none;
        }
    
        .navbar-child-searchbar{
            display: none;
        }

        .navbar-child-cell-searchbutton{
            display: table-cell;
        }
        
        .navbar-child-cell-menubutton{
            display: table-cell;
        }

        .navbar-child-cell-notifybutton{
            display: table-cell;
        }

        .navbar-child-cell-deletebutton{
            display: none;
        }

        .navbar-child-cell-checkall{
            display: none;
        }
    }

    .navbar-search-mode{
        .navbar-child-cell-icon{
            display: none;
        }

        .navbar-child-text{
            display: none;
        }

        .navbar-child-cell-textcountselect{
            display: none;
        }
    
        .navbar-child-searchbar{
            display: block;
        }

        .navbar-child-cell-searchbutton{
            display: none;
        }
        
        .navbar-child-cell-menubutton{
            display: none;
        }

        .navbar-child-cell-notifybutton{
            display: none;
        }

        .navbar-child-cell-deletebutton{
            display: none;
        }

        .navbar-child-cell-checkall{
            display: none;
        }
    }

    .navbar-select-mode{
        .navbar-child-cell-icon{
            display: table-cell;
        }

        .navbar-child-text{
            display: none;
        }

        .navbar-child-cell-textcountselect{
            display: table-cell;
        }
    
        .navbar-child-searchbar{
            display: none;
        }

        .navbar-child-cell-searchbutton{
            display: none;
        }
        
        .navbar-child-cell-menubutton{
            display: none;
        }

        .navbar-child-cell-notifybutton{
            display: none;
        }

        .navbar-child-cell-deletebutton{
            display: table-cell;
        }

        .navbar-child-cell-checkall{
            display: table-cell;
        }
    }
}

/* Animation de chargement initial */
.navbar {
    animation: navbar-FadeIn 0.5s ease;
}
/**
 * @file EditProfilItemFull.css
 *
 * @requires Theme.css
 */
/* ========================================
   EDIT PROFIL ITEM FULL - STYLE FORMULAIRE
   ======================================== */

.editprofilitemfull-container {
    background: var(--n-bg);
    color: var(--n-text);
    min-height: 100vh;
    padding: clamp(1rem, 3vw, 2rem);
}

/* ========================================
   HEADER
   ======================================== */

.editprofilitemfull-header {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
    margin: 0 auto;
    margin-bottom: clamp(2rem, 5vw, 3rem);
    padding-bottom: clamp(1rem, 2vw, 1.5rem);
    border-bottom: 1px solid var(--n-border);
    max-width: 800px;
}

.editprofilitemfull-title {
    font-size: clamp(1.25rem, 4vw, 2rem);
    font-weight: 700;
    color: var(--n-text);
    margin: 0;
    flex: 1;
}

/* ========================================
   FORMULAIRE PRINCIPAL
   ======================================== */

.editprofilitemfull-form {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 1.5rem);
}

/* ========================================
   SECTIONS
   ======================================== */

.editprofilitemfull-section {
    background: var(--n-bg-secondary);
    border-radius: 1rem;
    padding: clamp(1.5rem, 4vw, 2rem);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--n-text) 5%, transparent);
    border: 1px solid var(--n-border);
}

.editprofilitemfull-section-title {
    font-size: clamp(1.125rem, 3vw, 1.5rem);
    font-weight: 700;
    color: var(--n-text);
    margin: 0 0 clamp(1.5rem, 4vw, 2rem) 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ========================================
   GROUPES D'INPUTS
   ======================================== */

.editprofilitemfull-input {
    width: 100%;
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
}

.editprofilitemfull-input:last-child {
    margin-bottom: 0;
}

.editprofilitemfull-input:focus {
    outline: none;
    border-color: var(--n-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--n-primary) 20%, transparent);
}

.editprofilitemfull-input::placeholder {
    color: var(--n-text-muted);
}

/* ========================================
   SECTION ACTIONS
   ======================================== */

.editprofilitemfull-actions {
    display: flex;
    flex-direction: row;
    gap: clamp(1rem, 3vw, 1.5rem);
    justify-content: flex-end;
}

.editprofilitemfull-btn-save,
.editprofilitemfull-btn-cancel {
    padding: clamp(0.5rem, 2.5vw, 1rem) clamp(1rem, 4vw, 1.5rem);
    font-size: clamp(0.875rem, 2vw, 1rem);
    font-weight: 600;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
    justify-content: center;
}

.editprofilitemfull-btn-save {
    background: var(--n-primary);
    color: var(--n-text-inverse);
    border: 2px solid var(--n-primary);
}

.editprofilitemfull-btn-save:hover {
    background: color-mix(in srgb, var(--n-primary) 80%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--n-primary) 30%, transparent);
}

.editprofilitemfull-btn-save img {
    filter: brightness(0) invert(1);
}

.editprofilitemfull-btn-cancel {
    background: var(--n-bg);
    color: var(--n-text);
    border: 2px solid var(--n-border);
}

.editprofilitemfull-btn-cancel: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);
}

.editprofilitemfull-btn-cancel:hover img {
    filter: brightness(0) invert(1);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    .editprofilitemfull-title {
        text-align: center;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .editprofilitemfull-container {
        padding: clamp(0.75rem, 2vw, 1rem);
    }

    .editprofilitemfull-section {
        padding: clamp(1rem, 3vw, 1.5rem);
    }
} 
/**
 * @file ModifyMdpFrame.css
 *
 * @requires Theme.css
 */
/* ===== ModifyMdpFrame - Modification du mot de passe ===== */
.modifymdpframe {
    width: 100%;
    min-height: calc(100vh - 65px);
    padding-top: 65px;
    background-color: var(--n-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

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

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

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

.modifymdpframe-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: modifymdpframe-slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.modifymdpframe-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);
}

.modifymdpframe-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 */
.modifymdpframe-section {
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
    animation: modifymdpframe-fadeIn 0.6s ease-out;
    animation-fill-mode: both;
}

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

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

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

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

/* Indicateur de force du mot de passe */
.modifymdpframe-password-strength {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
    margin-top: clamp(0.5rem, 1.5vw, 0.75rem);
    padding: clamp(0.5rem, 1.5vw, 0.75rem);
    background: color-mix(in srgb, var(--n-bg-secondary) 30%, transparent);
    border-radius: clamp(6px, 1.5vw, 8px);
    border: 1px solid color-mix(in srgb, var(--n-border) 20%, transparent);
}

.modifymdpframe-strength-bar {
    flex: 1;
    height: clamp(4px, 1vw, 6px);
    border-radius: clamp(3px, 0.75vw, 4px);
    background: color-mix(in srgb, var(--n-bg) 60%, transparent);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.modifymdpframe-strength-bar::before {
    content: '';
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    transition: all 0.3s ease;
}

.modifymdpframe-strength-weak::before {
    width: 25%;
    background: var(--n-error);
}

.modifymdpframe-strength-medium::before {
    width: 50%;
    background: var(--n-warning);
}

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

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

.modifymdpframe-strength-text {
    font-size: clamp(0.75rem, 2vw, 0.875rem);
    font-weight: 500;
    color: var(--n-text-muted);
    min-width: clamp(40px, 10vw, 60px);
    text-align: right;
}

/* Section actions */
.modifymdpframe-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);
}

.modifymdpframe-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;
}

.modifymdpframe-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);
}

.modifymdpframe-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);
}

.modifymdpframe-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;
}

.modifymdpframe-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);
}

.modifymdpframe-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 */
.modifymdpframe-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;
}

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

/* Thème sombre */
.modifymdpframe-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);
}

.modifymdpframe-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 ProfilItemFull.css
 *
 * @requires Theme.css
 */
/* ========================================
   PROFIL ITEM FULL - STYLE RÉSEAU SOCIAL
   ======================================== */

.profilitemfull-container {
    color: var(--n-text);
}

/* ========================================
   SECTION PHOTO DE COUVERTURE
   ======================================== */

.profilitemfull-cover-section {
    height: clamp(200px, 40vh, 400px);
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--n-text) 10%, transparent);
}

.profilitemfull-cover-upload {
    width: 100%;
    height: 100%;
    border-radius: 0 0 1rem 1rem;
    object-fit: cover;
}

/* ========================================
   SECTION PROFIL PRINCIPAL
   ======================================== */

.profilitemfull-profile-section {
    margin-top: clamp(-2rem, -8vw, -4rem);
    padding: 0 clamp(0.75rem, 2vw, 1rem);
    background: var(--n-bg-secondary);
    border-radius: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.profilitemfull-profile-header {
    display: flex;
    align-items: flex-end;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: clamp(0, 0.5vw, 0.75rem);
    flex-wrap: wrap;
}

.profilitemfull-avatar-container {
    flex-shrink: 0;
}

.profilitemfull-avatar-upload {
    width: clamp(120px, 15vw, 180px);
    height: clamp(120px, 15vw, 180px);
    position: relative;
}

.profilitemfull-avatar-upload .ninputimage-child-imagecontainer{
    width: clamp(120px, 15vw, 180px);
    height: clamp(120px, 15vw, 180px);
    border-radius: 50%;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--n-text) 20%, transparent);
}

:where(.profilitemfull-avatar-upload) .ninputimage-child-optionbutton{
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.8);
}

.profilitemfull-profile-info {
    flex: 1;
    min-width: 0;
}

.profilitemfull-profile-name {
    font-size: clamp(1.125rem, 2.5vw, 2rem);
    font-weight: 700;
    color: var(--n-text);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.profilitemfull-profile-status {
    font-size: clamp(0.875rem, 2.5vw, 1.125rem);
    color: var(--n-text-muted);
    margin: 0;
    font-weight: 500;
}

.profilitemfull-profile-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.profilitemfull-btn-edit {
    background: var(--n-primary);
    color: var(--n-text-inverse);
    border: none;
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.profilitemfull-btn-edit img {
    filter: brightness(0) invert(1);
}

.profilitemfull-btn-edit:hover {
    background: color-mix(in srgb, var(--n-primary) 80%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--n-primary) 30%, transparent);
}

/* ========================================
   COLONNE GAUCHE - INFORMATIONS
   ======================================== */

.profilitemfull-left-column {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 1.5rem);
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
}

.profilitemfull-info-section {
    background: var(--n-bg-secondary);
    border-radius: 1rem;
    padding: clamp(1rem, 3vw, 1.5rem);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--n-text) 5%, transparent);
    border: 1px solid var(--n-border);
}

.profilitemfull-section-title {
    font-size: clamp(1rem, 3vw, 1.25rem);
    font-weight: 700;
    color: var(--n-text);
    margin: 0 0 clamp(0.75rem, 2vw, 1rem) 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.profilitemfull-section-content {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 2vw, 1rem);
}

.profilitemfull-info-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(0.5rem, 1.5vw, 0.75rem) 0;
    border-bottom: 1px solid var(--n-border);
}

.profilitemfull-info-group:last-child {
    border-bottom: none;
}

.profilitemfull-info-label {
    font-weight: 600;
    color: var(--n-text-muted);
    font-size: clamp(0.75rem, 2vw, 0.875rem);
}

.profilitemfull-info-value {
    font-weight: 500;
    color: var(--n-text);
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}

/* ========================================
   SECTION ACTIONS EN BAS
   ======================================== */

.profilitemfull-bottom-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(1rem, 3vw, 1.5rem);
    background: var(--n-bg-secondary);
    border-radius: 1rem;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--n-text) 5%, transparent);
    border: 1px solid var(--n-border);
}

.profilitemfull-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%;
}
.profilitemfull-child-button-pop:hover {
    background: var(--n-bg-secondary);
    transform: translateY(-2px);
}

.profilitemfull-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;
}

.profilitemfull-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);
}

.profilitemfull-btn-logout img {
    filter: brightness(0) invert(0);
    transition: filter 0.3s ease;
}

.profilitemfull-btn-logout:hover img {
    filter: brightness(0) invert(1);
}

/* ========================================
   RESPONSIVE DESIGN - CHANGEMENTS DE LAYOUT SEULEMENT
   ======================================== */

@media (max-width: 768px) {
    .profilitemfull-content-section {
        grid-template-columns: 1fr;
    }

    .profilitemfull-profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profilitemfull-profile-actions {
        justify-content: center;
        width: 100%;
    }

    .profilitemfull-info-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .profilitemfull-info-value {
        text-align: left;
        max-width: 100%;
    }
}