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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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 NInputTextTag.css
 * @description Styles CSS pour le composant NInputTextTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputTextTag.js
 * 
 */
/**
 * @file NInputNumberTag.css
 * @description Styles CSS pour le composant NInputNumberTag
 * 
 * @requires NInputTextTag.css
 * 
 * @see NInputNumberTag.js
 * 
 */

/* Style de base du bouton d'incrémentation de l'élément input de type nombre */
.ninputnumber-child-morebutton {
    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 */
.ninputnumber-child-morebutton:hover {
    background-color: transparent;
    box-shadow: none;
    transform: none;
}

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

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

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

/* Style de base du bouton de décrémentation de l'élément input de type nombre */
.ninputnumber-child-lessbutton {
    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 */
.ninputnumber-child-lessbutton:hover {
    background-color: transparent;
    box-shadow: none;
    transform: none;
}

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

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

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

/* Séparateur visuel */
.ninputnumber-child-morebutton::after,
.ninputnumber-child-lessbutton::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 60%;
    background-color: var(--n-border);
    margin-left: 8px;
    vertical-align: middle;
}
/**
 * @file NInputPasswordTag.css
 * @description Styles CSS pour le composant NInputPasswordTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputPasswordTag.js
 * 
 */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/**
 * @file 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
 * Palette équilibrée : Bleu professionnel + Vert croissance du logo
 *
 * @requires none
 */

.ntheme-light {
    /* Couleurs principales basées sur le logo */
    --n-primary: rgb(58, 168, 221);
    /* Bleu dynamique du logo (#3aa8dd) */
    --n-secondary: rgb(49, 151, 86);
    /* Vert croissance du logo (#319756) */
    --n-accent: rgb(30, 74, 100);
    /* Navy contrasté (bleu foncé pour lisibilité et contraste fort) */

    /* Textes */
    --n-text: rgb(33, 37, 41);
    /* Texte principal sombre */
    --n-text-inverse: rgb(255, 255, 255);
    /* Texte sur fond coloré */
    --n-text-muted: rgb(108, 117, 125);
    /* Texte secondaire */

    /* Arrière-plans */
    --n-bg: rgb(255, 255, 255);
    /* Fond principal blanc */
    --n-bg-secondary: rgb(238, 255, 255);
    /* Teinte très claire du logo pour les cartes/sections */

    /* Bordures */
    --n-border: rgb(216, 232, 240);
    /* Bordures douces légèrement bleutées */

    /* États */
    --n-hover: rgb(30, 74, 100);
    /* Navy foncé au survol */
    --n-active: rgb(49, 151, 86);
    /* Vert actif */
    --n-disabled: rgb(206, 212, 218);
    /* Gris clair pour éléments désactivés */

    /* Couleurs de notification */
    --n-success: rgb(49, 151, 86);
    /* Vert du logo pour succès */
    --n-error: rgb(229, 57, 53);
    /* Rouge Material Design */
    --n-warning: rgb(255, 167, 38);
    /* Orange Material Design */
    --n-info: rgb(58, 168, 221);
    /* Bleu du logo pour informations */

    /* Ombres */
    --n-shadow: rgba(58, 168, 221, 0.15);
    /* Ombre avec teinte du bleu logo */
}

.ntheme-dark {
    /* Couleurs principales - mode sombre adapté pour visibilité */
    --n-primary: rgb(91, 194, 245);
    /* Bleu plus lumineux pour mode sombre */
    --n-secondary: rgb(73, 184, 114);
    /* Vert plus lumineux pour mode sombre */
    --n-accent: rgb(167, 214, 232);
    /* Bleu accent clair du logo (#a7d6e8) */

    /* Textes */
    --n-text: rgb(250, 250, 250);
    /* Texte principal clair */
    --n-text-inverse: rgb(33, 37, 41);
    /* Texte sur fond clair */
    --n-text-muted: rgb(189, 189, 189);
    /* Texte secondaire */

    /* Arrière-plans premium (teintes bleu nuit foncé) */
    --n-bg: rgb(18, 24, 29);
    /* Fond sombre bleuté profond */
    --n-bg-secondary: rgb(27, 37, 45);
    /* Fond secondaire légèrement plus clair */

    /* Bordures */
    --n-border: rgb(46, 59, 70);
    /* Bordures visibles en mode sombre */

    /* États */
    --n-hover: rgb(73, 184, 114);
    /* Vert au survol */
    --n-active: rgb(167, 214, 232);
    /* Bleu clair pour l'état actif */
    --n-disabled: rgb(46, 59, 70);
    /* Gris foncé pour éléments désactivés */

    /* Couleurs de notification */
    --n-success: rgb(73, 184, 114);
    /* Vert clair */
    --n-error: rgb(239, 83, 80);
    /* Rouge lumineux */
    --n-warning: rgb(255, 183, 77);
    /* Orange lumineux */
    --n-info: rgb(91, 194, 245);
    /* Bleu lumineux */

    /* Ombres */
    --n-shadow: rgba(0, 0, 0, 0.5);
    /* Ombres prononcées */
}
/**
 * @file Main.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;
    background: #ffffff;
}

.main {
    position: relative;
    width: 100%;
    height: max-content;
}

.main-child-td-container {
    width: 100%;
    height: 100%;
    padding: 0;
    max-width: 100vw;
}

.nmaintag-chidld-framecontainer {
    height: 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;
    -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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 NInputTextTag.css
 * @description Styles CSS pour le composant NInputTextTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputTextTag.js
 * 
 */
/**
 * @file NInputNumberTag.css
 * @description Styles CSS pour le composant NInputNumberTag
 * 
 * @requires NInputTextTag.css
 * 
 * @see NInputNumberTag.js
 * 
 */

/* Style de base du bouton d'incrémentation de l'élément input de type nombre */
.ninputnumber-child-morebutton {
    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 */
.ninputnumber-child-morebutton:hover {
    background-color: transparent;
    box-shadow: none;
    transform: none;
}

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

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

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

/* Style de base du bouton de décrémentation de l'élément input de type nombre */
.ninputnumber-child-lessbutton {
    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 */
.ninputnumber-child-lessbutton:hover {
    background-color: transparent;
    box-shadow: none;
    transform: none;
}

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

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

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

/* Séparateur visuel */
.ninputnumber-child-morebutton::after,
.ninputnumber-child-lessbutton::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 60%;
    background-color: var(--n-border);
    margin-left: 8px;
    vertical-align: middle;
}
/**
 * @file NInputPasswordTag.css
 * @description Styles CSS pour le composant NInputPasswordTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputPasswordTag.js
 * 
 */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/**
 * @file 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
 * Palette équilibrée : Bleu professionnel + Vert croissance du logo
 *
 * @requires none
 */

.ntheme-light {
    /* Couleurs principales basées sur le logo */
    --n-primary: rgb(58, 168, 221);
    /* Bleu dynamique du logo (#3aa8dd) */
    --n-secondary: rgb(49, 151, 86);
    /* Vert croissance du logo (#319756) */
    --n-accent: rgb(30, 74, 100);
    /* Navy contrasté (bleu foncé pour lisibilité et contraste fort) */

    /* Textes */
    --n-text: rgb(33, 37, 41);
    /* Texte principal sombre */
    --n-text-inverse: rgb(255, 255, 255);
    /* Texte sur fond coloré */
    --n-text-muted: rgb(108, 117, 125);
    /* Texte secondaire */

    /* Arrière-plans */
    --n-bg: rgb(255, 255, 255);
    /* Fond principal blanc */
    --n-bg-secondary: rgb(238, 255, 255);
    /* Teinte très claire du logo pour les cartes/sections */

    /* Bordures */
    --n-border: rgb(216, 232, 240);
    /* Bordures douces légèrement bleutées */

    /* États */
    --n-hover: rgb(30, 74, 100);
    /* Navy foncé au survol */
    --n-active: rgb(49, 151, 86);
    /* Vert actif */
    --n-disabled: rgb(206, 212, 218);
    /* Gris clair pour éléments désactivés */

    /* Couleurs de notification */
    --n-success: rgb(49, 151, 86);
    /* Vert du logo pour succès */
    --n-error: rgb(229, 57, 53);
    /* Rouge Material Design */
    --n-warning: rgb(255, 167, 38);
    /* Orange Material Design */
    --n-info: rgb(58, 168, 221);
    /* Bleu du logo pour informations */

    /* Ombres */
    --n-shadow: rgba(58, 168, 221, 0.15);
    /* Ombre avec teinte du bleu logo */
}

.ntheme-dark {
    /* Couleurs principales - mode sombre adapté pour visibilité */
    --n-primary: rgb(91, 194, 245);
    /* Bleu plus lumineux pour mode sombre */
    --n-secondary: rgb(73, 184, 114);
    /* Vert plus lumineux pour mode sombre */
    --n-accent: rgb(167, 214, 232);
    /* Bleu accent clair du logo (#a7d6e8) */

    /* Textes */
    --n-text: rgb(250, 250, 250);
    /* Texte principal clair */
    --n-text-inverse: rgb(33, 37, 41);
    /* Texte sur fond clair */
    --n-text-muted: rgb(189, 189, 189);
    /* Texte secondaire */

    /* Arrière-plans premium (teintes bleu nuit foncé) */
    --n-bg: rgb(18, 24, 29);
    /* Fond sombre bleuté profond */
    --n-bg-secondary: rgb(27, 37, 45);
    /* Fond secondaire légèrement plus clair */

    /* Bordures */
    --n-border: rgb(46, 59, 70);
    /* Bordures visibles en mode sombre */

    /* États */
    --n-hover: rgb(73, 184, 114);
    /* Vert au survol */
    --n-active: rgb(167, 214, 232);
    /* Bleu clair pour l'état actif */
    --n-disabled: rgb(46, 59, 70);
    /* Gris foncé pour éléments désactivés */

    /* Couleurs de notification */
    --n-success: rgb(73, 184, 114);
    /* Vert clair */
    --n-error: rgb(239, 83, 80);
    /* Rouge lumineux */
    --n-warning: rgb(255, 183, 77);
    /* Orange lumineux */
    --n-info: rgb(91, 194, 245);
    /* Bleu lumineux */

    /* Ombres */
    --n-shadow: rgba(0, 0, 0, 0.5);
    /* Ombres prononcées */
}
/**
 * @file Main.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;
    background: #ffffff;
}

.main {
    position: relative;
    width: 100%;
    height: max-content;
}

.main-child-td-container {
    width: 100%;
    height: 100%;
    padding: 0;
    max-width: 100vw;
}

.nmaintag-chidld-framecontainer {
    height: 100%;
}

/**
 * @file AccueilFrame.css
 * Page d'accueil AHNAF Conseil — maquette-accueil-vivante.html
 *
 * @requires Theme.css
 */

.accueilframe {
    width: 100%;
    background: var(--n-bg);
    color: var(--n-text);
    line-height: 1.6;
    box-sizing: border-box;
}

.accueilframe-wrap {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    box-sizing: border-box;
}

/* ─── Eyebrow / labels ──────────────────────────────────── */

.accueilframe-eyebrow,
.accueilframe-section-label {
    font-size: clamp(0.7rem, 1.2vw, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--n-secondary);
    text-transform: uppercase;
    margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
}

.accueilframe-section-title {
    font-weight: 600;
    font-size: clamp(1.4rem, 2.5vw + 0.5rem, 1.8rem);
    color: var(--n-accent);
    line-height: 1.3;
    margin: 0 0 clamp(0.75rem, 1.5vw, 1.25rem) 0;
}

/* ─── Boutons ───────────────────────────────────────────── */

.accueilframe-btn-primary,
.accueilframe-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: clamp(0.8rem, 1.2vw, 0.875rem);
    border-radius: clamp(3px, 0.3vw, 4px);
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.accueilframe-btn-primary .nbutton-child-text,
.accueilframe-btn-secondary .nbutton-child-text {
    color: inherit;
    font: inherit;
}

.accueilframe-btn-primary {
    background: var(--n-accent);
    color: var(--n-text-inverse);
    padding: clamp(0.75rem, 1.5vw, 0.875rem) clamp(1.25rem, 2.5vw, 1.625rem);
}

.accueilframe-btn-primary:hover {
    background: var(--n-hover);
    color: var(--n-text-inverse);
    transform: translateY(-2px);
}

.accueilframe-btn-secondary {
    border: 1.5px solid var(--n-accent);
    color: var(--n-accent);
    background: transparent;
    padding: clamp(0.7rem, 1.4vw, 0.8125rem) clamp(1.2rem, 2.2vw, 1.5rem);
}

.accueilframe-btn-secondary:hover {
    background: var(--n-accent);
    color: var(--n-text-inverse);
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */

.accueilframe-hero {
    padding: clamp(2rem, 5vw, 4rem) 0 0;
    position: relative;
}

.accueilframe-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: center;
    min-height: clamp(320px, 50vw, 560px);
}

.accueilframe-hero-text {
    padding-right: clamp(1rem, 4vw, 3.5rem);
}

.accueilframe-hero-title {
    font-weight: 600;
    font-size: clamp(1.75rem, 4vw + 0.5rem, 2.625rem);
    line-height: 1.15;
    color: var(--n-accent);
    margin: 0 0 clamp(0.875rem, 2vw, 1.25rem) 0;
}

.accueilframe-hero-title em {
    font-style: normal;
    color: var(--n-primary);
}

.accueilframe-hero-lead {
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    color: var(--n-text-muted);
    max-width: 440px;
    margin: 0 0 clamp(1.25rem, 2.5vw, 1.875rem) 0;
}

.accueilframe-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.6rem, 1.5vw, 0.875rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.accueilframe-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 3vw, 2rem);
    padding-top: clamp(1rem, 2vw, 1.5rem);
    border-top: 1px solid var(--n-border);
}

.accueilframe-hero-stat b {
    display: block;
    font-size: clamp(1.1rem, 2vw, 1.375rem);
    color: var(--n-accent);
    font-weight: 600;
}

.accueilframe-hero-stat span {
    font-size: clamp(0.65rem, 1.1vw, 0.72rem);
    color: var(--n-text-muted);
    font-weight: 600;
}

.accueilframe-hero-photo-wrap {
    position: relative;
    height: clamp(280px, 45vw, 560px);
}

.accueilframe-hero-dots {
    position: absolute;
    top: 0;
    left: clamp(0.5rem, 2vw, 1.25rem);
    width: clamp(40px, 5vw, 60px);
    height: clamp(40px, 5vw, 60px);
    background-image: radial-gradient(var(--n-warning) 2px, transparent 2px);
    background-size: 12px 12px;
    opacity: 0.5;
    pointer-events: none;
}

.accueilframe-hero-photo {
    position: absolute;
    top: clamp(1rem, 3vw, 2.5rem);
    right: 0;
    width: 88%;
    height: clamp(220px, 38vw, 460px);
    border-radius: clamp(4px, 0.5vw, 6px);
    overflow: hidden;
    box-shadow: 0 24px 48px -12px var(--n-shadow);
    object-fit: cover;
}

.accueilframe-hero-accent {
    position: absolute;
    bottom: 0;
    left: 0;
    width: clamp(140px, 18vw, 190px);
    min-height: clamp(120px, 14vw, 160px);
    background: var(--n-secondary);
    border-radius: clamp(4px, 0.5vw, 6px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1rem, 2vw, 1.375rem);
    color: var(--n-text-inverse);
    box-sizing: border-box;
}

.accueilframe-hero-accent b {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    display: block;
    font-weight: 600;
}

.accueilframe-hero-accent span {
    font-size: clamp(0.65rem, 1.1vw, 0.72rem);
    opacity: 0.9;
    line-height: 1.4;
    display: block;
    margin-top: 0.375rem;
}

/* ═══════════════════════════════════════════════════════════
   CREDENTIALS
═══════════════════════════════════════════════════════════ */

.accueilframe-credentials {
    border-top: 1px solid var(--n-border);
    border-bottom: 1px solid var(--n-border);
    padding: clamp(0.875rem, 2vw, 1.25rem) 0;
    margin-top: clamp(2rem, 5vw, 3.5rem);
}

.accueilframe-credentials-inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: clamp(0.75rem, 2vw, 1rem);
    font-size: clamp(0.7rem, 1.2vw, 0.78rem);
    color: var(--n-text-muted);
    font-weight: 600;
}

.accueilframe-cred-item b {
    color: var(--n-accent);
}

/* ═══════════════════════════════════════════════════════════
   PRÉSENTATION
═══════════════════════════════════════════════════════════ */

.accueilframe-presentation {
    padding: clamp(3rem, 8vw, 5.625rem) 0;
}

.accueilframe-presentation-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(1.5rem, 5vw, 3.75rem);
    align-items: center;
}

.accueilframe-presentation-photos {
    position: relative;
    height: clamp(260px, 40vw, 420px);
}

.accueilframe-photo-a {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: clamp(180px, 28vw, 300px);
    border-radius: clamp(4px, 0.5vw, 6px);
    overflow: hidden;
    object-fit: cover;
}

.accueilframe-photo-b {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 55%;
    height: clamp(140px, 20vw, 220px);
    border-radius: clamp(4px, 0.5vw, 6px);
    overflow: hidden;
    background-color: var(--n-bg);
    border: 6px solid var(--n-bg);
    box-shadow: 0 20px 40px -14px var(--n-shadow);
    object-fit: cover;
}

.accueilframe-presentation-text p {
    color: var(--n-text-muted);
    font-size: clamp(0.9rem, 1.4vw, 0.97rem);
    margin: 0 0 clamp(0.75rem, 1.5vw, 0.95rem) 0;
}

.accueilframe-presentation-text strong {
    color: var(--n-accent);
}

.accueilframe-presentation-values {
    display: flex;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    margin-top: clamp(1.25rem, 2.5vw, 1.625rem);
    flex-wrap: wrap;
}

.accueilframe-val-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: clamp(0.75rem, 1.2vw, 0.8125rem);
    font-weight: 600;
    color: var(--n-accent);
}

.accueilframe-val-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--n-secondary);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   DOMAINES
═══════════════════════════════════════════════════════════ */

.accueilframe-domains {
    padding: clamp(3rem, 7vw, 5rem) 0;
    background: var(--n-bg-secondary);
    box-sizing: border-box;
}

.accueilframe-domains-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: clamp(1.75rem, 4vw, 3rem);
    flex-wrap: wrap;
    gap: clamp(0.75rem, 2vw, 1rem);
}

.accueilframe-domains-head .accueilframe-section-title {
    max-width: 420px;
    margin-bottom: 0;
}

.accueilframe-domains-desc {
    color: var(--n-text-muted);
    font-size: clamp(0.8rem, 1.3vw, 0.875rem);
    max-width: 340px;
    margin: 0;
}

.accueilframe-domain-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.75rem, 2vw, 1.25rem);
}

.accueilframe-domain-card {
    background: var(--n-bg);
    border-radius: clamp(4px, 0.5vw, 6px);
    overflow: hidden;
    box-shadow: 0 6px 18px -10px var(--n-shadow);
    transition: transform 0.18s ease;
}

.accueilframe-domain-card:hover {
    transform: translateY(-4px);
}

.accueilframe-domain-photo {
    width: calc(100% - (2* clamp(1rem, 2vw, 1.375rem)));
    height: clamp(90px, 12vw, 120px);
    object-fit: contain;
    padding: clamp(1rem, 2vw, 1.375rem);
}

.accueilframe-domain-body {
    padding: clamp(1rem, 2vw, 1.375rem) clamp(0.875rem, 1.8vw, 1.25rem) clamp(1.25rem, 2.2vw, 1.625rem);
}

.accueilframe-domain-num {
    font-size: clamp(0.7rem, 1.1vw, 0.75rem);
    font-weight: 600;
    color: var(--n-secondary);
    margin-bottom: clamp(0.5rem, 1.2vw, 0.75rem);
}

.accueilframe-domain-card h3 {
    font-size: clamp(0.85rem, 1.3vw, 0.94rem);
    font-weight: 700;
    color: var(--n-accent);
    margin: 0 0 0.5rem 0;
    line-height: 1.35;
}

.accueilframe-domain-card p {
    font-size: clamp(0.7rem, 1.1vw, 0.78rem);
    color: var(--n-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   ÉQUIPE
═══════════════════════════════════════════════════════════ */

.accueilframe-team {
    padding: clamp(3rem, 8vw, 5.5rem) 0;
}

.accueilframe-team-head {
    text-align: center;
    max-width: 520px;
    margin: 0 auto clamp(1.75rem, 4vw, 2.875rem);
}

.accueilframe-team-head .accueilframe-section-title {
    margin-bottom: 0.625rem;
}

.accueilframe-team-head p {
    color: var(--n-text-muted);
    font-size: clamp(0.85rem, 1.3vw, 0.9rem);
    margin: 0;
}

.accueilframe-team-row {
    display: flex;
    justify-content: center;
    gap: clamp(1rem, 3vw, 1.75rem);
    flex-wrap: wrap;
}

.accueilframe-team-card {
    width: clamp(140px, 18vw, 190px);
    text-align: center;
}

.accueilframe-team-photo {
    width: clamp(90px, 12vw, 120px);
    height: clamp(90px, 12vw, 120px);
    border-radius: 50%;
    margin: 0 auto clamp(0.75rem, 1.5vw, 1rem);
    overflow: hidden;
    border: 4px solid var(--n-bg-secondary);
    object-fit: contain;
}

.accueilframe-team-card h4 {
    font-size: clamp(0.8rem, 1.2vw, 0.875rem);
    color: var(--n-accent);
    margin: 0 0 0.25rem 0;
}

.accueilframe-team-card span {
    font-size: clamp(0.7rem, 1.1vw, 0.75rem);
    color: var(--n-secondary);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   STRUCTURE RESPONSIVE (media queries structurelles uniquement)
═══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

    .accueilframe-hero-grid,
    .accueilframe-presentation-grid {
        grid-template-columns: 1fr;
    }

    .accueilframe-hero-text {
        padding-right: 0;
        margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
    }

    .accueilframe-domain-grid {
        grid-template-columns: 1fr 1fr;
    }

    .accueilframe-presentation-photos {
        margin-bottom: clamp(1rem, 2vw, 1.5rem);
    }
}

@media (max-width: 540px) {
    .accueilframe-domain-grid {
        grid-template-columns: 1fr;
    }

    .accueilframe-hero-cta {
        flex-direction: column;
    }

    .accueilframe-btn-primary,
    .accueilframe-btn-secondary {
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }
}

@media (prefers-reduced-motion: reduce) {

    .accueilframe-btn-primary,
    .accueilframe-btn-secondary,
    .accueilframe-domain-card {
        transition: none;
    }

    .accueilframe-btn-primary:hover,
    .accueilframe-btn-secondary:hover,
    .accueilframe-domain-card:hover {
        transform: none;
    }
}
/**
 * @file AproposFrame.css
 * Page À propos AHNAF Conseil — maquette-a-propos.html
 *
 * @requires Theme.css
 */

.aproposframe {
    width: 100%;
    background: var(--n-bg);
    color: var(--n-text);
    line-height: 1.6;
    box-sizing: border-box;
}

.aproposframe-wrap {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    box-sizing: border-box;
}

/* ─── Placeholders ──────────────────────────────────────── */

.aproposframe-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(0.75rem, 2vw, 1rem);
    box-sizing: border-box;
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--n-border) 80%, var(--n-bg)),
            color-mix(in srgb, var(--n-border) 100%, var(--n-text-muted)));
    color: var(--n-text-muted);
    font-size: clamp(0.65rem, 1.2vw, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

/* ─── Labels / titres ───────────────────────────────────── */

.aproposframe-section-label {
    font-size: clamp(0.7rem, 1.2vw, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--n-secondary);
    text-transform: uppercase;
    margin-bottom: clamp(0.75rem, 1.5vw, 0.875rem);
}

.aproposframe-section-title {
    font-weight: 600;
    font-size: clamp(1.4rem, 2.5vw + 0.5rem, 1.8rem);
    color: var(--n-accent);
    line-height: 1.3;
    margin: 0 0 clamp(0.875rem, 2vw, 1.375rem) 0;
}

/* ═══════════════════════════════════════════════════════════
   BANDEAU
═══════════════════════════════════════════════════════════ */

.aproposframe-hero {
    padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 5vw, 3.5rem);
    background: var(--n-bg-secondary);
    position: relative;
    overflow: hidden;
}

.aproposframe-hero-dots {
    position: absolute;
    top: -20px;
    right: clamp(1rem, 4vw, 2.5rem);
    width: clamp(80px, 12vw, 120px);
    height: clamp(80px, 12vw, 120px);
    background-image: radial-gradient(var(--n-warning) 2px, transparent 2px);
    background-size: 14px 14px;
    opacity: 0.4;
    pointer-events: none;
}

.aproposframe-breadcrumb {
    font-size: clamp(0.7rem, 1.2vw, 0.78rem);
    color: var(--n-text-muted);
    margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
}

.aproposframe-breadcrumb b {
    color: var(--n-secondary);
}

.aproposframe-hero-title {
    font-weight: 600;
    font-size: clamp(1.75rem, 4vw + 0.5rem, 2.375rem);
    color: var(--n-accent);
    margin: 0 0 clamp(0.75rem, 1.5vw, 0.875rem) 0;
    line-height: 1.2;
}

.aproposframe-hero-lead {
    color: var(--n-text-muted);
    font-size: clamp(0.9rem, 1.5vw, 0.97rem);
    max-width: 560px;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   IDENTITÉ JURIDIQUE
═══════════════════════════════════════════════════════════ */

.aproposframe-identity {
    padding: clamp(3rem, 7vw, 5rem) 0;
    border-bottom: 1px solid var(--n-border);
}

.aproposframe-identity-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: clamp(1.5rem, 5vw, 3.75rem);
    align-items: center;
}

.aproposframe-identity-photo {
    position: relative;
    height: clamp(240px, 40vw, 400px);
    border-radius: clamp(4px, 0.5vw, 6px);
    overflow: hidden;
    box-shadow: 0 24px 48px -16px var(--n-shadow);
}

.aproposframe-identity-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aproposframe-identity-badge {
    position: absolute;
    bottom: clamp(0.75rem, 2vw, 1.25rem);
    left: clamp(0.75rem, 2vw, 1.25rem);
    background: var(--n-bg);
    border-radius: clamp(4px, 0.4vw, 5px);
    padding: clamp(0.75rem, 1.5vw, 1rem) clamp(0.875rem, 1.8vw, 1.25rem);
    box-shadow: 0 10px 24px -8px var(--n-shadow);
    display: flex;
    gap: clamp(0.6rem, 1.5vw, 0.875rem);
    align-items: center;
    max-width: 260px;
}

.aproposframe-identity-badge-icon {
    width: clamp(32px, 4vw, 38px);
    height: clamp(32px, 4vw, 38px);
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.aproposframe-identity-badge span {
    font-size: clamp(0.6rem, 1.1vw, 0.66rem);
    color: var(--n-text-muted);
    display: block;
}

.aproposframe-identity-badge b {
    font-size: clamp(0.75rem, 1.2vw, 0.8125rem);
    color: var(--n-accent);
    display: block;
}

.aproposframe-legal-table {
    border: 1px solid var(--n-border);
    border-radius: clamp(4px, 0.5vw, 6px);
    overflow: hidden;
}

.aproposframe-legal-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: clamp(0.35rem, 1vw, 0.5rem);
    padding: clamp(0.7rem, 1.5vw, 0.8125rem) clamp(0.875rem, 2vw, 1.25rem);
    font-size: clamp(0.8rem, 1.3vw, 0.84rem);
    border-bottom: 1px solid var(--n-border);
}

.aproposframe-legal-row:last-child {
    border-bottom: none;
}

.aproposframe-legal-row:nth-child(odd) {
    background: var(--n-bg-secondary);
}

.aproposframe-legal-row span:first-child {
    color: var(--n-text-muted);
    font-weight: 600;
}

.aproposframe-legal-row span:last-child {
    color: var(--n-accent);
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   MISSION / HISTOIRE
═══════════════════════════════════════════════════════════ */

.aproposframe-mission {
    padding: clamp(3rem, 7vw, 5rem) 0;
    background: var(--n-bg);
}

.aproposframe-mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 5vw, 3.75rem);
    align-items: start;
}

.aproposframe-mission-text p {
    color: var(--n-text-muted);
    font-size: clamp(0.9rem, 1.4vw, 0.97rem);
    margin: 0 0 clamp(0.75rem, 1.5vw, 1rem) 0;
}

.aproposframe-mission-text strong {
    color: var(--n-accent);
}

.aproposframe-founder {
    background: var(--n-accent);
    border-radius: clamp(6px, 0.7vw, 8px);
    padding: clamp(1.25rem, 3vw, 2rem);
    color: var(--n-text-inverse);
    display: flex;
    gap: clamp(0.875rem, 2vw, 1.25rem);
    align-items: flex-start;
}

.aproposframe-founder-photo {
    width: clamp(60px, 8vw, 74px);
    height: clamp(60px, 8vw, 74px);
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid var(--n-secondary);
}

.aproposframe-founder-photo .aproposframe-placeholder {
    background: linear-gradient(135deg, var(--n-primary), var(--n-accent));
    color: var(--n-text-inverse);
    font-size: clamp(0.55rem, 1vw, 0.6rem);
}

.aproposframe-founder-body h4 {
    font-size: clamp(0.95rem, 1.5vw, 1.06rem);
    margin: 0 0 0.25rem 0;
    font-weight: 600;
    color: var(--n-text-inverse);
}

.aproposframe-founder-role {
    font-size: clamp(0.7rem, 1.1vw, 0.75rem);
    color: var(--n-warning);
    font-weight: 700;
    display: block;
    margin-bottom: clamp(0.5rem, 1.2vw, 0.75rem);
}

.aproposframe-founder-body p {
    font-size: clamp(0.75rem, 1.2vw, 0.8125rem);
    color: color-mix(in srgb, var(--n-text-inverse) 75%, transparent);
    line-height: 1.6;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   VALEURS
═══════════════════════════════════════════════════════════ */

.aproposframe-values {
    padding: clamp(3rem, 7vw, 5rem) 0;
    background: var(--n-bg-secondary);
}

.aproposframe-values-head {
    text-align: center;
    max-width: 520px;
    margin: 0 auto clamp(1.75rem, 4vw, 2.875rem);
}

.aproposframe-values-head .aproposframe-section-title {
    margin-bottom: 0.625rem;
}

.aproposframe-values-head p {
    color: var(--n-text-muted);
    font-size: clamp(0.85rem, 1.3vw, 0.9rem);
    margin: 0;
}

.aproposframe-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.75rem, 2vw, 1.25rem);
}

.aproposframe-value-card {
    background: var(--n-bg);
    border-radius: clamp(4px, 0.5vw, 6px);
    padding: clamp(1.25rem, 2.5vw, 1.875rem) clamp(1rem, 2vw, 1.5rem);
    box-shadow: 0 6px 18px -10px var(--n-shadow);
    text-align: center;
}

.aproposframe-value-icon {
    width: clamp(44px, 6vw, 52px);
    height: clamp(44px, 6vw, 52px);
    border-radius: 50%;
    background: color-mix(in srgb, var(--n-primary) 14%, var(--n-bg));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto clamp(0.875rem, 1.8vw, 1.125rem);
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    color: var(--n-secondary);
    font-weight: 600;
}

.aproposframe-value-card h3 {
    font-size: clamp(0.85rem, 1.3vw, 0.94rem);
    font-weight: 700;
    color: var(--n-accent);
    margin: 0 0 0.5rem 0;
}

.aproposframe-value-card p {
    font-size: clamp(0.7rem, 1.1vw, 0.78rem);
    color: var(--n-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   STRUCTURE RESPONSIVE
═══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

    .aproposframe-identity-grid,
    .aproposframe-mission-grid {
        grid-template-columns: 1fr;
    }

    .aproposframe-values-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 540px) {
    .aproposframe-values-grid {
        grid-template-columns: 1fr;
    }
}
/**
 * @file ContactFrame.css
 * Page Contact AHNAF Conseil — calquée sur maquette-contact.html
 *
 * @requires Theme.css
 */

.contactframe {
    width: 100%;
    background: var(--n-bg);
    color: var(--n-text);
    line-height: 1.6;
    box-sizing: border-box;
}

.contactframe-wrap {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    box-sizing: border-box;
}

/* placeholders */
.contactframe-placeholder {
    background: linear-gradient(135deg, color-mix(in srgb, var(--n-border) 80%, var(--n-bg)), color-mix(in srgb, var(--n-border) 100%, var(--n-text-muted)));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--n-text-muted);
    padding: 16px;
    font-weight: 600;
    letter-spacing: .02em;
}

/* bandeau */
.contactframe-hero {
    padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 5vw, 3.5rem);
    background: var(--n-bg-secondary);
    position: relative;
    overflow: hidden;
}

.contactframe-hero-dots {
    position: absolute;
    top: -20px;
    right: clamp(1rem, 4vw, 2.5rem);
    width: clamp(80px, 12vw, 120px);
    height: clamp(80px, 12vw, 120px);
    background-image: radial-gradient(var(--n-warning) 2px, transparent 2px);
    background-size: 14px 14px;
    opacity: .4;
    pointer-events: none;
}

.contactframe-breadcrumb {
    font-size: clamp(0.7rem, 1.2vw, 0.78rem);
    color: var(--n-text-muted);
    margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
}

.contactframe-breadcrumb b {
    color: var(--n-accent);
}

.contactframe-hero-title {
    font-weight: 600;
    font-size: clamp(1.75rem, 4vw+0.5rem, 2.375rem);
    color: var(--n-accent);
    margin: 0 0 .75rem 0;
    line-height: 1.2;
}

.contactframe-hero-lead {
    color: var(--n-text-muted);
    font-size: clamp(0.9rem, 1.5vw, 0.97rem);
    max-width: 560px;
}

/* quick cards */
.contactframe-quick-cards {
    padding: clamp(2.5rem, 6vw, 4rem) 0 0;
}

.contactframe-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.contactframe-quick-card {
    border: 1px solid var(--n-border);
    border-radius: 6px;
    padding: 26px 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: border-color .15s;
}

.contactframe-quick-card:hover {
    border-color: var(--n-accent);
}

.contactframe-quick-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--n-primary) 9%, var(--n-bg));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--n-accent);
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

.contactframe-quick-card h3 {
    font-size: 13px;
    color: var(--n-text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
}

.contactframe-quick-card p {
    font-size: 14.5px;
    color: var(--n-text);
    font-weight: 600;
}

.contactframe-quick-card span {
    font-size: 12.5px;
    color: var(--n-text-muted);
    display: block;
    margin-top: 2px;
    font-weight: 400;
}

/* main grid */
.contactframe-main {
    padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.contactframe-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 5vw, 3.75rem);
    align-items: start;
}

.contactframe-section-label {
    font-size: clamp(0.7rem, 1.2vw, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--n-secondary);
    text-transform: uppercase;
    margin-bottom: clamp(0.75rem, 1.5vw, 0.875rem);
}

.contactframe-form h2 {
    font-weight: 600;
    font-size: clamp(1.4rem, 2.5vw+0.5rem, 1.8rem);
    color: var(--n-accent);
    margin-bottom: .5rem;
}

.contactframe-form p {
    color: var(--n-text-muted);
    font-size: clamp(0.9rem, 1.4vw, 0.97rem);
    margin-bottom: 1rem;
}

.contactframe-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.contactframe-form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.contactframe-form-group.full {
    grid-column: 1 / -1;
}

.contactframe-form-group label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--n-text);
}

.contactframe-btn-submit {
    background: var(--n-primary);
    color: var(--n-text-inverse);
    padding: 14px 28px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.contactframe-form-note {
    font-size: 11.5px;
    color: var(--n-text-muted);
    margin-top: 14px;
}

/* infos + map */
.contactframe-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contactframe-info-block {
    background: var(--n-bg-secondary);
    border-radius: 6px;
    padding: 26px 28px;
}

.contactframe-info-block h3 {
    font-size: 12px;
    font-weight: 700;
    color: var(--n-accent);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 14px;
}

.contactframe-info-row {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    font-size: 13.5px;
    border-bottom: 1px solid var(--n-border);
}

.contactframe-info-row:last-child {
    border-bottom: none;
}

.contactframe-info-row span:first-child {
    color: var(--n-text-muted);
    font-weight: 600;
}

.contactframe-info-row span:last-child {
    color: var(--n-text);
    font-weight: 700;
}

.contactframe-map-block {
    height: 260px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.contactframe-map-frame {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 6px;
    display: block;
}

.contactframe-hours-block {
    background: var(--n-accent);
    border-radius: 6px;
    padding: 26px 28px;
    color: var(--n-text-inverse);
}

.contactframe-hours-block h3 {
    font-size: 12px;
    font-weight: 700;
    color: color-mix(in srgb, var(--n-text-inverse) 85%, var(--n-bg));
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 14px;
}

.contactframe-hours-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.contactframe-hours-row:last-child {
    border-bottom: none;
}

.contactframe-hours-row span:first-child {
    color: color-mix(in srgb, var(--n-text-inverse) 75%, transparent);
}

.contactframe-hours-row span:last-child {
    color: var(--n-text-inverse);
    font-weight: 600;
}

/* ===== RESEAUX SOCIAUX ===== */
.contactframe-social {
    background: var(--n-bg-secondary);
    border-radius: 6px;
    padding: 26px 28px;
}

.contactframe-social h3 {
    font-size: 12px;
    font-weight: 700;
    color: var(--n-accent);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 6px;
}

.contactframe-social p {
    font-size: 12.5px;
    color: var(--n-text);
    margin-bottom: 18px;
}

.contactframe-social-icons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.contactframe-social-icon {
    width: 30px;
    height: 30px;
    padding: 10px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--n-accent);
    transition: all .15s;
}

.contactframe-social-icon:hover {
    background: var(--n-accent);
    color: var(--n-text-inverse);
    border-color: var(--n-accent);
}

@media (max-width: 900px) {
    .contactframe-quick-grid {
        grid-template-columns: 1fr;
    }

    .contactframe-grid {
        grid-template-columns: 1fr;
    }

    .contactframe-form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 540px) {
    .contactframe-quick-grid {
        grid-template-columns: 1fr;
    }
}
/**
 * @file CookieConsentFrame.css
 *
 * @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 EquipeFrame.css
 * Page Notre équipe AHNAF Conseil — calquée sur maquette-equipe.html
 *
 * @requires Theme.css
 */

.equipeframe {
    width: 100%;
    background: var(--n-bg);
    color: var(--n-text);
    line-height: 1.6;
    box-sizing: border-box;
}

.equipeframe-wrap {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    box-sizing: border-box;
}

.equipeframe-text-center {
    text-align: center !important;
}

/* ─── Section Labels & Common ───────────────────────────── */
.equipeframe-section-label {
    font-size: clamp(0.7rem, 1.2vw, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--n-secondary);
    text-transform: uppercase;
    margin-bottom: clamp(0.75rem, 1.5vw, 0.875rem);
}

/* ─── Hero / Bandeau Page ───────────────────────────────── */
.equipeframe-hero {
    padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 5vw, 3.5rem);
    background: var(--n-bg-secondary);
    position: relative;
    overflow: hidden;
}

.equipeframe-hero-dots {
    position: absolute;
    top: -20px;
    right: clamp(1rem, 4vw, 2.5rem);
    width: clamp(80px, 12vw, 120px);
    height: clamp(80px, 12vw, 120px);
    background-image: radial-gradient(var(--n-warning) 2px, transparent 2px);
    background-size: 14px 14px;
    opacity: 0.4;
    pointer-events: none;
}

.equipeframe-breadcrumb {
    font-size: clamp(0.7rem, 1.2vw, 0.78rem);
    color: var(--n-text-muted);
    margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
}

.equipeframe-breadcrumb b {
    color: var(--n-secondary);
}

.equipeframe-hero-title {
    font-weight: 600;
    font-size: clamp(1.75rem, 4vw + 0.5rem, 2.375rem);
    color: var(--n-accent);
    margin: 0 0 .75rem 0;
    line-height: 1.2;
}

.equipeframe-hero-lead {
    color: var(--n-text-muted);
    font-size: clamp(0.9rem, 1.5vw, 0.97rem);
    max-width: 580px;
}

/* ─── Direction / Fondateur ─────────────────────────────── */
.equipeframe-direction {
    padding: clamp(3rem, 7vw, 5rem) 0;
    border-bottom: 1px solid var(--n-border);
}

.equipeframe-direction-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
}

.equipeframe-direction-photo-wrap {
    position: relative;
    height: clamp(280px, 40vw, 420px);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 24px 48px -16px var(--n-shadow);
}

.equipeframe-direction-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.equipeframe-direction-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: var(--n-secondary);
    color: var(--n-text-inverse);
    border-radius: 5px;
    padding: 10px 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.equipeframe-direction-content {
    display: flex;
    flex-direction: column;
}

.equipeframe-direction-name {
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 1.8rem);
    color: var(--n-accent);
    margin-bottom: 6px;
}

.equipeframe-direction-role {
    font-size: 13.5px;
    color: var(--n-primary);
    font-weight: 700;
    margin-bottom: 20px;
    display: block;
}

.equipeframe-direction-bio {
    color: var(--n-text-muted);
    font-size: 15px;
    margin-bottom: 16px;
}

.equipeframe-direction-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.equipeframe-direction-tag {
    background: var(--n-bg-secondary);
    color: var(--n-accent);
    font-size: 12px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--n-border);
}

/* ─── Consultants associés ──────────────────────────────── */
.equipeframe-consultants {
    padding: clamp(3rem, 7vw, 5rem) 0;
    background: var(--n-bg-secondary);
}

.equipeframe-consultants-head {
    text-align: center;
    max-width: 560px;
    margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}

.equipeframe-consultants-title {
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 1.8rem);
    color: var(--n-accent);
    margin-bottom: 10px;
}

.equipeframe-consultants-lead {
    color: var(--n-text-muted);
    font-size: 14.5px;
}

.equipeframe-consultants-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2.5vw, 1.5rem);
}

.equipeframe-consultant-card {
    background: var(--n-bg);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 6px 18px -10px var(--n-shadow);
    transition: transform 0.18s ease-in-out, box-shadow 0.18s ease-in-out;
    border: 1px solid var(--n-border);
    display: flex;
    flex-direction: column;
}

.equipeframe-consultant-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -10px var(--n-shadow);
}

.equipeframe-consultant-photo-wrap {
    height: 220px;
    overflow: hidden;
    position: relative;
    background: var(--n-bg-secondary);
    border-bottom: 1px solid var(--n-border);
}

.equipeframe-consultant-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.equipeframe-consultant-body {
    padding: 22px 22px 26px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.equipeframe-consultant-name {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--n-accent);
    margin-bottom: 4px;
}

.equipeframe-consultant-spec {
    font-size: 12px;
    color: var(--n-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: block;
    margin-bottom: 12px;
}

.equipeframe-consultant-desc {
    font-size: 13.0px;
    color: var(--n-text-muted);
    line-height: 1.55;
}

/* ─── Engagement ────────────────────────────────────────── */
.equipeframe-commitment {
    padding: clamp(3.5rem, 8vw, 5.5rem) 0;
    text-align: center;
    background: var(--n-bg);
}

.equipeframe-commitment .equipeframe-wrap {
    max-width: 640px;
}

.equipeframe-commitment .equipeframe-section-label {
    margin-bottom: 16px;
}

.equipeframe-commitment-quote {
    font-weight: 500;
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-style: italic;
    color: var(--n-accent);
    line-height: 1.5;
    margin: 0;
}

.equipeframe-commitment-signature {
    margin-top: 28px;
    font-size: 13px;
    color: var(--n-text-muted);
    font-weight: 600;
}

/* ─── Effectifs / Stats ─────────────────────────────────── */
.equipeframe-stats-band {
    background: var(--n-accent);
    padding: clamp(2rem, 5vw, 3.25rem) 0;
}

.equipeframe-stats-row {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 24px;
    text-align: center;
}

.equipeframe-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 150px;
}

.equipeframe-stat-item b {
    font-size: clamp(1.75rem, 3.5vw, 2rem);
    color: var(--n-warning);
    display: block;
    margin-bottom: 6px;
}

.equipeframe-stat-item span {
    font-size: 12.5px;
    color: color-mix(in srgb, var(--n-text-inverse) 85%, var(--n-bg-secondary));
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ─── CTA Final ─────────────────────────────────────────── */
.equipeframe-cta {
    padding: clamp(3.5rem, 8vw, 5.5rem) 0;
    text-align: center;
    background: var(--n-bg);
}

.equipeframe-cta-title {
    font-weight: 600;
    font-size: clamp(1.4rem, 2.5vw, 1.68rem);
    color: var(--n-accent);
    margin-bottom: 14px;
}

.equipeframe-cta-lead {
    color: var(--n-text-muted);
    font-size: 15px;
    margin-bottom: 28px;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}

.equipeframe-btn-primary {
    background: var(--n-primary);
    color: var(--n-text-inverse);
    padding: 14px 26px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease-in-out;
}

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

/* ─── Responsive breakpoints ────────────────────────────── */
@media (max-width: 900px) {
    .equipeframe-direction-grid {
        grid-template-columns: 1fr;
    }

    .equipeframe-direction-photo-wrap {
        height: 320px;
    }

    .equipeframe-consultants-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .equipeframe-stats-row {
        gap: 32px;
    }
}

@media (max-width: 560px) {
    .equipeframe-consultants-grid {
        grid-template-columns: 1fr;
    }
}
/**
 * @file MenuFrame.css
 * Menu vertical (petits écrans) — miroir de NavBar
 *
 * @requires Theme.css
 */

/* ── Overlay ────────────────────────────────────────────── */

.menuframe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1100;
    animation: menuframe-fadeIn 0.28s ease;
    backdrop-filter: blur(4px);
    box-sizing: border-box;
}

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

/* ── Panneau latéral ────────────────────────────────────── */

.menuframe-child-container {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: clamp(280px, 82vw, 380px);
    height: 100vh;
    background-color: var(--n-bg);
    box-shadow: -4px 0 24px 0 var(--n-shadow);
    display: flex;
    flex-direction: column;
    animation: menuframe-slideIn 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

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

/* ── En-tête ────────────────────────────────────────────── */

.menuframe-child-header {
    padding: clamp(0.75rem, 2.5vw, 1.25rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(0.5rem, 2vw, 0.75rem);
    border-bottom: 1px solid var(--n-border);
    background: var(--n-bg);
    flex-shrink: 0;
}

.menuframe-child-brand {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 2vw, 0.75rem);
    min-width: 0;
}

.menuframe-child-icon-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    outline: none;
    transition: transform 0.2s ease;
}

.menuframe-child-icon-link:hover {
    transform: scale(1.04);
}

.menuframe-child-icon {
    height: clamp(2rem, 6vw, 2.5rem);
    width: auto;
    display: block;
    object-fit: contain;
}

.menuframe-child-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.menuframe-child-title {
    color: var(--n-accent);
    font-size: clamp(1rem, 3vw, 1.2rem);
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menuframe-child-slogan {
    font-size: clamp(0.6rem, 1.5vw, 0.7rem);
    font-weight: 600;
    color: var(--n-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Fermer ─────────────────────────────────────────────── */

.menuframe-child-close {
    width: clamp(2rem, 6vw, 2.5rem);
    height: clamp(2rem, 6vw, 2.5rem);
    padding: clamp(0.4rem, 1.5vw, 0.5rem);
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.menuframe-child-close img {
    width: clamp(1rem, 3vw, 1.25rem);
    height: clamp(1rem, 3vw, 1.25rem);
    transition: transform 0.25s ease;
}

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

.menuframe-child-close:hover {
    background-color: color-mix(in srgb, var(--n-error) 12%, transparent);
}

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

.menuframe-child-close:active {
    transform: scale(0.95);
}

/* ── Navigation ─────────────────────────────────────────── */

.menuframe-child-nav {
    flex: 1;
    padding: clamp(0.75rem, 2.5vw, 1.25rem);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: clamp(0.25rem, 1vw, 0.4rem);
}

.menuframe-child-menu-item {
    display: flex;
    align-items: center;
    padding: clamp(0.7rem, 2vw, 0.85rem) clamp(0.75rem, 2vw, 1rem);
    border-radius: clamp(0.4rem, 1vw, 0.5rem);
    color: var(--n-text-muted);
    font-weight: 600;
    font-size: clamp(0.875rem, 2vw, 0.95rem);
    text-decoration: none;
    background: transparent;
    border: none;
    outline: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    gap: clamp(0.6rem, 1.8vw, 0.75rem);
    cursor: pointer;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

.menuframe-child-menu-item .nbutton-child-text {
    color: inherit;
    font: inherit;
}

.menuframe-child-menu-item img,
.menuframe-child-menu-item .nbutton-child-icon {
    width: clamp(1.1rem, 2.5vw, 1.25rem);
    height: clamp(1.1rem, 2.5vw, 1.25rem);
    opacity: 0.75;
    transition: opacity 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
    object-fit: contain;
}

.ntheme-dark .menuframe-child-menu-item img,
.ntheme-dark .menuframe-child-menu-item .nbutton-child-icon {
    filter: invert(1);
}

.menuframe-child-menu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--n-primary);
    border-radius: 0 3px 3px 0;
    transition: height 0.2s ease;
}

.menuframe-child-menu-item:hover {
    background-color: var(--n-bg-secondary);
    color: var(--n-primary);
    transform: translateX(3px);
}

.menuframe-child-menu-item:hover img,
.menuframe-child-menu-item:hover .nbutton-child-icon {
    opacity: 1;
    transform: translateY(-1px);
}

.menuframe-child-menu-item:hover::before {
    height: 55%;
}

/* État actif */
.menuframe-child-menu-item-active {
    background: color-mix(in srgb, var(--n-primary) 12%, transparent);
    color: var(--n-primary);
    font-weight: 700;
}

.menuframe-child-menu-item-active::before {
    height: 70%;
}

.menuframe-child-menu-item-active img,
.menuframe-child-menu-item-active .nbutton-child-icon {
    opacity: 1;
}

.menuframe-child-menu-item-active:hover {
    background: color-mix(in srgb, var(--n-primary) 16%, transparent);
    color: var(--n-primary);
}

/* Contact = CTA (comme NavBar) */
.menuframe-child-menu-item-contact {
    margin-top: clamp(0.5rem, 2vw, 0.75rem);
    background-color: var(--n-primary);
    color: var(--n-text-inverse);
    justify-content: center;
    box-shadow: 0 2px 8px var(--n-shadow);
}

.menuframe-child-menu-item-contact::before {
    display: none;
}

.menuframe-child-menu-item-contact img,
.menuframe-child-menu-item-contact .nbutton-child-icon {
    filter: invert(1);
    opacity: 1;
}

.ntheme-dark .menuframe-child-menu-item-contact img,
.ntheme-dark .menuframe-child-menu-item-contact .nbutton-child-icon {
    filter: invert(1);
}

.menuframe-child-menu-item-contact:hover {
    background-color: var(--n-hover);
    color: var(--n-text-inverse);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--n-shadow);
}

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

/* ── Pied / langue ──────────────────────────────────────── */

.menuframe-child-footer {
    flex-shrink: 0;
    padding: clamp(0.75rem, 2.5vw, 1.25rem);
    border-top: 1px solid var(--n-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.5rem, 2vw, 0.75rem);
    background: var(--n-bg);
}

.menuframe-child-lang-label {
    font-size: clamp(0.75rem, 1.8vw, 0.85rem);
    font-weight: 600;
    color: var(--n-text-muted);
}

.menuframe-child-language-selector {
    display: inline-block;
    --n-input-height: 20 !important;
}

.menuframe-child-language-selector .ninputelement-child-stylecontainer {
    border: none !important;
}

/* ── Scrollbar ──────────────────────────────────────────── */

.menuframe-child-nav::-webkit-scrollbar {
    width: 6px;
}

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

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

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

/* ── Accessibilité / structure ──────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .menuframe,
    .menuframe-child-container {
        animation: none;
    }

    .menuframe-child-menu-item,
    .menuframe-child-menu-item::before,
    .menuframe-child-menu-item img,
    .menuframe-child-menu-item .nbutton-child-icon,
    .menuframe-child-close img,
    .menuframe-child-icon-link {
        transition: none;
    }

    .menuframe-child-menu-item:hover,
    .menuframe-child-menu-item-contact:hover {
        transform: none;
    }

    .menuframe-child-close:hover img {
        transform: none;
    }
}

@media (max-width: 400px) {
    .menuframe-child-container {
        max-width: 100%;
    }
}

/**
 * @file ServicesFrame.css
 * Page Nos services AHNAF Conseil — maquette-services.html
 *
 * @requires Theme.css
 */

.servicesframe {
    width: 100%;
    background: var(--n-bg);
    color: var(--n-text);
    line-height: 1.6;
    box-sizing: border-box;
}

.servicesframe-wrap {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    box-sizing: border-box;
}

/* ─── Placeholders ──────────────────────────────────────── */

.servicesframe-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(0.75rem, 2vw, 1rem);
    box-sizing: border-box;
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--n-border) 80%, var(--n-bg)),
            color-mix(in srgb, var(--n-border) 100%, var(--n-text-muted)));
    color: var(--n-text-muted);
    font-size: clamp(0.65rem, 1.2vw, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.servicesframe-section-title {
    font-weight: 600;
    font-size: clamp(1.4rem, 2.5vw + 0.5rem, 1.8rem);
    color: var(--n-accent);
    line-height: 1.3;
    margin: 0 0 clamp(0.5rem, 1vw, 0.625rem) 0;
}

/* ═══════════════════════════════════════════════════════════
   BANDEAU
═══════════════════════════════════════════════════════════ */

.servicesframe-hero {
    padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 5vw, 3.5rem);
    background: var(--n-bg-secondary);
    position: relative;
    overflow: hidden;
}

.servicesframe-hero-dots {
    position: absolute;
    top: -20px;
    right: clamp(1rem, 4vw, 2.5rem);
    width: clamp(80px, 12vw, 120px);
    height: clamp(80px, 12vw, 120px);
    background-image: radial-gradient(var(--n-warning) 2px, transparent 2px);
    background-size: 14px 14px;
    opacity: 0.4;
    pointer-events: none;
}

.servicesframe-breadcrumb {
    font-size: clamp(0.7rem, 1.2vw, 0.78rem);
    color: var(--n-text-muted);
    margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
}

.servicesframe-breadcrumb b {
    color: var(--n-secondary);
}

.servicesframe-hero-title {
    font-weight: 600;
    font-size: clamp(1.75rem, 4vw + 0.5rem, 2.375rem);
    color: var(--n-accent);
    margin: 0 0 clamp(0.75rem, 1.5vw, 0.875rem) 0;
    line-height: 1.2;
}

.servicesframe-hero-lead {
    color: var(--n-text-muted);
    font-size: clamp(0.9rem, 1.5vw, 0.97rem);
    max-width: 580px;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   LISTE SERVICES
═══════════════════════════════════════════════════════════ */

.servicesframe-list {
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.servicesframe-service-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 5vw, 3.75rem);
    align-items: center;
    padding: clamp(2rem, 4vw, 3.5rem) 0;
    border-bottom: 1px solid var(--n-border);
}

.servicesframe-service-row:last-of-type {
    border-bottom: none;
}

.servicesframe-service-row-reverse .servicesframe-service-media {
    order: 2;
}

.servicesframe-service-row-reverse .servicesframe-service-content {
    order: 1;
}

.servicesframe-service-media {
    position: relative;
    height: clamp(200px, 30vw, 300px);
    border-radius: clamp(4px, 0.5vw, 6px);
    overflow: hidden;
    width: 100%;
    object-fit: contain;
}

.servicesframe-service-eyebrow {
    font-size: clamp(0.7rem, 1.2vw, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--n-secondary);
    text-transform: uppercase;
    margin-bottom: clamp(0.5rem, 1.2vw, 0.75rem);
}

.servicesframe-service-content h2 {
    font-weight: 600;
    font-size: clamp(1.15rem, 2.2vw + 0.4rem, 1.56rem);
    color: var(--n-accent);
    margin: 0 0 clamp(0.75rem, 1.5vw, 0.875rem) 0;
    line-height: 1.3;
}

.servicesframe-service-content>p {
    color: var(--n-text-muted);
    font-size: clamp(0.875rem, 1.4vw, 0.94rem);
    margin: 0 0 clamp(1rem, 2vw, 1.25rem) 0;
}

.servicesframe-service-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1.2vw, 0.625rem);
}

.servicesframe-service-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: clamp(0.8rem, 1.3vw, 0.84rem);
    color: var(--n-accent);
}

.servicesframe-service-features li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--n-primary);
    margin-top: 0.45em;
    flex-shrink: 0;
}

/* Prestations diverses */
.servicesframe-misc {
    background: var(--n-accent);
    color: var(--n-text-inverse);
    border-radius: clamp(6px, 0.7vw, 8px);
    padding: clamp(1.5rem, 3.5vw, 2.75rem) clamp(1.25rem, 4vw, 3rem);
    margin: clamp(1rem, 2vw, 1.25rem) 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1rem, 3vw, 2rem);
    flex-wrap: wrap;
}

.servicesframe-misc-txt h3 {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    color: var(--n-text-inverse);
}

.servicesframe-misc-txt p {
    font-size: clamp(0.8rem, 1.3vw, 0.84rem);
    color: color-mix(in srgb, var(--n-text-inverse) 75%, transparent);
    max-width: 480px;
    margin: 0;
}

.servicesframe-misc-num {
    font-size: clamp(2rem, 5vw, 2.75rem);
    color: var(--n-warning);
    font-weight: 600;
    opacity: 0.85;
    flex-shrink: 0;
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════
   POURQUOI NOUS CHOISIR
═══════════════════════════════════════════════════════════ */

.servicesframe-why {
    padding: clamp(3rem, 7vw, 5.5rem) 0;
    background: var(--n-bg-secondary);
}

.servicesframe-why-head {
    text-align: center;
    max-width: 540px;
    margin: 0 auto clamp(1.75rem, 4vw, 2.875rem);
}

.servicesframe-why-head p {
    color: var(--n-text-muted);
    font-size: clamp(0.85rem, 1.3vw, 0.9rem);
    margin: 0;
}

.servicesframe-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.875rem, 2vw, 1.5rem);
}

.servicesframe-why-card {
    background: var(--n-bg);
    border-radius: clamp(4px, 0.5vw, 6px);
    padding: clamp(1.25rem, 2.5vw, 1.875rem) clamp(1rem, 2.2vw, 1.625rem);
    box-shadow: 0 6px 18px -10px var(--n-shadow);
}

.servicesframe-why-icon {
    width: clamp(40px, 5vw, 46px);
    height: clamp(40px, 5vw, 46px);
    border-radius: 50%;
    background: color-mix(in srgb, var(--n-primary) 14%, var(--n-bg));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(0.875rem, 1.8vw, 1.125rem);
    color: var(--n-secondary);
    font-weight: 700;
    font-size: clamp(0.95rem, 1.5vw, 1.06rem);
}

.servicesframe-why-card h3 {
    font-size: clamp(0.85rem, 1.3vw, 0.94rem);
    font-weight: 700;
    color: var(--n-accent);
    margin: 0 0 0.5rem 0;
}

.servicesframe-why-card p {
    font-size: clamp(0.75rem, 1.2vw, 0.8125rem);
    color: var(--n-text-muted);
    line-height: 1.55;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   PROCESSUS
═══════════════════════════════════════════════════════════ */

.servicesframe-process {
    padding: clamp(3rem, 7vw, 5rem) 0;
}

.servicesframe-process-head {
    text-align: center;
    max-width: 520px;
    margin: 0 auto clamp(2rem, 4vw, 3.125rem);
}

.servicesframe-process-head p {
    color: var(--n-text-muted);
    font-size: clamp(0.85rem, 1.3vw, 0.9rem);
    margin: 0;
}

.servicesframe-process-row {
    display: flex;
    justify-content: space-between;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    position: relative;
}

.servicesframe-process-row::before {
    content: '';
    position: absolute;
    top: clamp(18px, 2.5vw, 22px);
    left: 8%;
    right: 8%;
    height: 2px;
    background: var(--n-border);
    z-index: 0;
}

.servicesframe-process-step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 1;
}

.servicesframe-process-circle {
    width: clamp(40px, 5vw, 46px);
    height: clamp(40px, 5vw, 46px);
    border-radius: 50%;
    background: var(--n-secondary);
    color: var(--n-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto clamp(0.75rem, 1.5vw, 1rem);
    font-weight: 700;
    font-size: clamp(0.9rem, 1.4vw, 1rem);
}

.servicesframe-process-step h4 {
    font-size: clamp(0.8rem, 1.3vw, 0.84rem);
    font-weight: 700;
    color: var(--n-accent);
    margin: 0 0 0.375rem 0;
}

.servicesframe-process-step p {
    font-size: clamp(0.7rem, 1.1vw, 0.75rem);
    color: var(--n-text-muted);
    max-width: 150px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   STRUCTURE RESPONSIVE
═══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

    .servicesframe-service-row,
    .servicesframe-service-row-reverse {
        grid-template-columns: 1fr;
    }

    .servicesframe-service-row-reverse .servicesframe-service-media {
        order: 1;
    }

    .servicesframe-service-row-reverse .servicesframe-service-content {
        order: 2;
    }

    .servicesframe-why-grid {
        grid-template-columns: 1fr 1fr;
    }

    .servicesframe-process-row {
        flex-direction: column;
        gap: clamp(1.5rem, 3vw, 2rem);
    }

    .servicesframe-process-row::before {
        display: none;
    }

    .servicesframe-misc {
        flex-direction: column;
        text-align: center;
    }

    .servicesframe-misc-txt p {
        max-width: none;
    }
}

@media (max-width: 540px) {
    .servicesframe-why-grid {
        grid-template-columns: 1fr;
    }
}
/**
 * @file FooterBar.css
 * Footer à 4 colonnes inspiré de maquette-accueil-vivante.html
 *
 * @requires Theme.css
 */

/* ═══════════════════════════════════════════════════════════
   FOOTER — conteneur principal
═══════════════════════════════════════════════════════════ */

.footerbar {
    width: 100%;
    background-color: var(--n-accent);
    /* Bleu navy foncé */
    color: color-mix(in srgb, var(--n-text-inverse) 70%, transparent);
    padding: 0 0 28px;
    /* le CTA gère le haut */
    box-sizing: border-box;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   CTA — Rejoignez un réseau de partenaires engagés
═══════════════════════════════════════════════════════════ */

.footerbar-cta {
    position: relative;
    padding: 0 clamp(1rem, 3vw, 2rem);
    padding-top: 80px;
    padding-bottom: 80px;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(120deg,
            color-mix(in srgb, var(--n-accent) 95%, #000),
            color-mix(in srgb, var(--n-accent) 85%, #fff));
    border-bottom: 1px solid color-mix(in srgb, var(--n-text-inverse) 8%, transparent);
}

/* Motif de points décoratif (repris du hero de la maquette) */
.footerbar-cta::before {
    content: '';
    position: absolute;
    top: 0;
    right: 60px;
    width: 120px;
    height: 120px;
    background-image: radial-gradient(var(--n-primary) 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    opacity: 0.25;
    pointer-events: none;
}

.footerbar-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 0 clamp(1rem, 3vw, 2rem);
}

.footerbar-cta-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--n-text-inverse);
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
}

.footerbar-cta-desc {
    font-size: 15px;
    color: color-mix(in srgb, var(--n-text-inverse) 68%, transparent);
    max-width: 460px;
    margin: 0;
    line-height: 1.65;
}

.footerbar-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 14px 28px;
    background: var(--n-secondary);
    /* Vert du logo */
    color: var(--n-text-inverse);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 3px;
    text-decoration: none;
    transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--n-secondary) 35%, transparent);
}

.footerbar-cta-btn:hover {
    background: var(--n-primary);
    /* Bleu du logo au survol */
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--n-primary) 40%, transparent);
    text-decoration: none;
    color: var(--n-text-inverse);
}

/* ═══════════════════════════════════════════════════════════
   GRILLE 4 COLONNES
═══════════════════════════════════════════════════════════ */

.footerbar-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    padding-top: 36px;
    padding-bottom: 36px;
    border-bottom: 1px solid color-mix(in srgb, var(--n-text-inverse) 12%, transparent);
}

/* ─── Colonne générique ─── */

.footerbar-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ═══════════════════════════════════════════════════════════
   COLONNE 1 — IDENTITÉ
═══════════════════════════════════════════════════════════ */

.footerbar-brand {
    font-size: 17px;
    font-weight: 700;
    color: var(--n-text-inverse);
    letter-spacing: 0.01em;
    margin-bottom: 8px;
}

.footerbar-slogan {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--n-text-inverse);
    /* Vert du logo */
    margin: 0 0 14px 0;
}

.footerbar-addr {
    font-size: 13px;
    color: color-mix(in srgb, var(--n-text-inverse) 60%, transparent);
    margin: 0 0 6px 0;
}

.footerbar-language-selector {
    margin-top: 2px;
    margin-bottom: 2px;
    max-width: 200px;
}

.footerbar-language-selector .ninputelement-child-stylecontainer {
    border: none !important;
    background-color: transparent !important;
}

.footerbar-language-selector .ninputelement-child-input {
    color: color-mix(in srgb, var(--n-text-inverse) 60%, transparent) !important;
}

.footerbar-language-selector .ninputelement-child-icon {
    filter: brightness(0) invert(0.6) !important;
}

/* ═══════════════════════════════════════════════════════════
   TITRES DE COLONNES
═══════════════════════════════════════════════════════════ */

.footerbar-col-title {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--n-text-inverse);
    margin: 0 0 16px 0;
}

/* ═══════════════════════════════════════════════════════════
   LISTES (Navigation & Légal)
═══════════════════════════════════════════════════════════ */

.footerbar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.footerbar-list li {
    font-size: 13px;
    color: color-mix(in srgb, var(--n-text-inverse) 65%, transparent);
    line-height: 1.4;
}

/* ─── Liens navigation ─── */

.footerbar-nav-link {
    color: color-mix(in srgb, var(--n-text-inverse) 65%, transparent);
    text-decoration: none;
    transition: color 0.18s ease;
    display: inline-block;
}

.footerbar-nav-link:hover {
    color: var(--n-primary);
    /* Bleu dynamique du logo */
    text-decoration: none;
}

/* ─── Liens contact (tel, mail) ─── */

.footerbar-contact-link {
    color: color-mix(in srgb, var(--n-text-inverse) 65%, transparent);
    text-decoration: none;
    transition: color 0.18s ease;
    display: inline-block;
}

.footerbar-contact-link:hover {
    color: var(--n-secondary);
    /* Vert du logo */
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════
   BANDE RESEAUX SOCIAUX
═══════════════════════════════════════════════════════════ */

.footerbar-social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--n-text-inverse) 12%, transparent);
    padding: 0 clamp(1rem, 3vw, 2rem);
    padding-bottom: 22px;
    padding-top: 22px;
    margin: 0 auto;
    max-width: 1140px;
}

.footerbar-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--n-text-inverse) 8%, transparent);
    color: var(--n-text-inverse);
    transition: background 0.18s ease, color 0.18s ease;
}

.footerbar-social-link:hover {
    background: var(--n-primary);
    /* Bleu du logo au survol */
    color: var(--n-text-inverse);
}

.footerbar-social-icon {
    width: 20px;
    height: 20px;
}

/* ═══════════════════════════════════════════════════════════
   BANDE INFÉRIEURE — copyright
═══════════════════════════════════════════════════════════ */

.footerbar-bottom {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.footerbar-copy {
    font-size: 12px;
    color: color-mix(in srgb, var(--n-text-inverse) 42%, transparent);
}

.footerbar-motto {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--n-text-inverse) 42%, transparent);
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .footerbar {
        padding: 0 0 24px;
    }

    .footerbar-cta {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .footerbar-cta-title {
        font-size: 22px;
    }

    .footerbar-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

@media (max-width: 540px) {
    .footerbar {
        padding: 0 0 20px;
    }

    .footerbar-cta {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .footerbar-cta-title {
        font-size: 19px;
    }

    .footerbar-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footerbar-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}
/**
 * @file NavBar.css
 *
 * @requires Theme.css
 */

.navbar {
    width: 100%;
    padding: 10px 24px;
    background-color: var(--n-bg);
    border-bottom: 1px solid var(--n-border);
    box-sizing: border-box;
    position: sticky;
    top: 0;
    /* Positioned right below the HeaderBar */
    z-index: 990;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.navbar-child-table-main {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.navbar-child-row-main {
    width: 100%;
}

.navbar-child-cell-icon {
    min-width: 40px;
    white-space: nowrap;
    vertical-align: middle;
    padding: 0;
}

.navbar-child-link-icon {
    display: flex;
    align-items: center;
    text-decoration: none;
    outline: none;
    transition: transform 0.2s ease;
}

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

.navbar-child-icon {
    height: 40px;
    width: auto;
    display: block;
    object-fit: contain;
}

.navbar-child-cell-nom {
    vertical-align: middle;
    padding-left: 16px;
    text-align: left;
    white-space: nowrap;
    min-width: 80px;
}

.navbar-child-link-nom {
    text-decoration: none;
    outline: none;
    display: inline-block;
}

.navbar-child-text-nom {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--n-accent);
    letter-spacing: -0.02em;
    font-family: system-ui, -apple-system, sans-serif;
    transition: color 0.2s ease;
}

.navbar-child-link-nom:hover .navbar-child-text-nom {
    color: var(--n-primary);
}

.navbar-child-text-slogan {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--n-text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top: 2px;
    font-family: system-ui, -apple-system, sans-serif;
    opacity: 0.85;
    transition: color 0.2s ease;
}

.navbar-child-cell-menu {
    vertical-align: middle;
    text-align: right;
    width: 100%;
}

.navbar-child-div-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.navbar-child-cell-lang {
    vertical-align: middle;
    text-align: right;
    min-width: 140px;
    white-space: nowrap;
}

/* Style de l'élément sélecteur de langue */
.navbar-child-language-selector {
    display: inline-block;
    --n-input-height: 20 !important;
}

.navbar-child-language-selector .ninputelement-child-stylecontainer {
    border: none !important;
}

/* Navigation Buttons */
.navbar-child-menu-button {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--n-text-muted);
    text-decoration: none;
    cursor: pointer;
    background-color: transparent;
    border: none;
    outline: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.navbar-child-menu-button img {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    display: block;
    object-fit: contain;
    transition: transform 0.2s ease;
}

/* Invert dark PNG icons in dark mode */
.ntheme-dark .navbar-child-menu-button img {
    filter: invert(1);
}

.navbar-child-menu-button:hover {
    color: var(--n-primary);
    background-color: rgba(58, 168, 221, 0.08);
}

.navbar-child-menu-button:hover img {
    transform: translateY(-1px);
}

/* Active State */
.navbar-child-menu-button.navbar-active {
    color: var(--n-primary);
    background-color: rgba(58, 168, 221, 0.12);
    font-weight: 700;
}

/* Specific Contact Button (CTA style) */
.navbar-child-menu-button-contact {
    background-color: var(--n-primary);
    color: var(--n-text-inverse) !important;
    /* White text */
    box-shadow: 0 2px 8px rgba(58, 168, 221, 0.3);
    margin-left: 8px;
}

.navbar-child-menu-button-contact img {
    filter: invert(1) !important;
    /* Force white icon */
}

.navbar-child-menu-button-contact:hover {
    background-color: var(--n-hover);
    /* Theme hover color (navy) */
    color: var(--n-text-inverse) !important;
    box-shadow: 0 4px 12px rgba(30, 74, 100, 0.4);
}

/* Mobile Layout Elements (width <= 450px) */
.navbar-child-cell-current-page {
    vertical-align: middle;
    padding: 8px 16px;
    text-align: center;
    width: 100%;
}

.navbar-child-current-page {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--n-accent);
    font-family: system-ui, -apple-system, sans-serif;
    white-space: nowrap;
}

.navbar-child-cell-menubutton {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
    text-align: right;
}

.navbar-child-menubutton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 8px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
}

.navbar-child-menubutton img {
    width: 24px;
    height: 24px;
    display: block;
}

.ntheme-dark .navbar-child-menubutton img {
    filter: invert(1);
}

.navbar-child-menubutton:hover {
    background-color: rgba(58, 168, 221, 0.08);
}

/* Responsive */
@media (max-width: 480px) {
    .navbar {
        padding: 8px 16px;
    }

    .navbar-child-text-nom {
        font-size: 1.15rem;
    }

    .navbar-child-icon {
        height: 32px;
    }
}