/**
 * @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 NChooserPaysFrame.css
 *
 * @requires NDialogFrameTag.css
 * @requires NTextTag.css
 * @requires NButtonTag.css
 * @requires NTag.css
 */

.nchooserpaysframe-search {
    width: 350px;
    margin: auto;
    margin-bottom: 10px;
}

.nchooserpaysframe-panelpays {
    height: 60vh;
    width: 350px;
    overflow-y: auto;
    overflow-x: hidden;
}
/**
 * @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 NPanelColorTag.css
 *
 * Panneau de sélection de couleur.
 *
 * @requires NTag.css
 */

/* ===================================================================
   NPanelColorTag — Color Picker
   =================================================================== */

.npanelcolor-root {
    --pc-radius: 6px;
    --pc-gray-bg: #f2f3f5;
    --pc-gray-text: #1f2430;
    --pc-accent: #5b93ff;
    --pc-accent-bg: #eef4ff;
    --pc-border: rgba(0, 0, 0, 0.12);

    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    font-family: inherit;
}

.npanelcolor-root * {
    box-sizing: border-box;
}

/* ---------- 1. Presets ---------- */

.npanelcolor-presets {
    display: flex;
    gap: 8px;
}

.npanelcolor-preset {
    flex: 1 1 0%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: none;
    border-radius: var(--pc-radius);
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.12s ease;
}

.npanelcolor-preset:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.npanelcolor-preset:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(91, 147, 255, 0.4);
}

/* ---------- 2. Zone Saturation/Valeur + Teinte ---------- */

.npanelcolor-picker-row {
    display: flex;
    gap: 10px;
    height: 170px;
}

.npanelcolor-satval-area {
    position: relative;
    flex: 1 1 0%;
    border-radius: var(--pc-radius);
    overflow: hidden;
    cursor: grab;
    touch-action: none;
}

.npanelcolor-satval-area:active {
    cursor: grabbing;
}

.npanelcolor-satval-layer {
    position: absolute;
    inset: 0;
}

.npanelcolor-satval-white {
    background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

.npanelcolor-satval-black {
    background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%);
}

.npanelcolor-hue-slider {
    position: relative;
    width: 14px;
    border-radius: 999px;
    cursor: grab;
    touch-action: none;
    background: linear-gradient(to bottom,
            rgb(255, 0, 0) 0%,
            rgb(255, 153, 0) 10%,
            rgb(205, 255, 0) 20%,
            rgb(53, 255, 0) 30%,
            rgb(0, 255, 102) 40%,
            rgb(0, 255, 253) 50%,
            rgb(0, 102, 255) 60%,
            rgb(50, 0, 255) 70%,
            rgb(205, 0, 255) 80%,
            rgb(255, 0, 153) 90%,
            rgb(255, 0, 0) 100%);
}

.npanelcolor-hue-slider:active {
    cursor: grabbing;
}

/* ---------- Curseurs (poignées communes) ---------- */

.npanelcolor-pointer {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.35);
    transform: translate(-50%, -50%);
    transition: transform 0.075s ease;
    cursor: grab;
}

.npanelcolor-pointer:active {
    cursor: grabbing;
}

.npanelcolor-pointer:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.25),
        0 1px 4px rgba(0, 0, 0, 0.35),
        0 0 0 3px rgba(91, 147, 255, 0.4);
}

/* ---------- 3. Aperçu + champ HEX ---------- */

.npanelcolor-bottom-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.npanelcolor-preview {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--pc-radius);
    box-shadow: inset 0 0 0 1px var(--pc-border);
}

.npanelcolor-hex-wrapper {
    flex: 1 1 0%;
    background: var(--pc-gray-bg);
    border: 1px solid transparent;
    border-radius: var(--pc-radius);
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

.npanelcolor-hex-wrapper:focus-within {
    border-color: var(--pc-accent);
    background: var(--pc-accent-bg);
}

.npanelcolor-hex-input {
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    color: var(--pc-gray-text);
    background: transparent;
    border: none;
    outline: none;
}
/**
 * @file NPanelEditImageTag.css
 *
 * Panneau modal d'édition, rotation, zoom et recadrage de photo pour l'éditeur.
 *
 * @requires NTag.css
 */

/* ===================================================================
   NEditImagePanel — Modal & Backdrop
   =================================================================== */

.npaneleditimage {
    animation: npaneleditimage-fade-in 0.2s ease-out;
}

@keyframes npaneleditimage-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

/* ===================================================================
   Carte / Boîte de dialogue
   =================================================================== */

.npaneleditimage-card {
    position: relative;
    width: 100%;
    color: var(--n-text);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    box-sizing: border-box;
    font-family: inherit;
    animation: npaneleditimage-scale-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes npaneleditimage-scale-up {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ===================================================================
   2. Zone d'affichage & Recadrage (Viewport + Grid)
   =================================================================== */

.npaneleditimage-viewport-container {
    width: 100%;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #111417;
}

.npaneleditimage-viewport {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.npaneleditimage-viewport.dragging {
    cursor: grabbing;
}

.npaneleditimage-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Cadre de recadrage au centre avec assombrissement autour */
.npaneleditimage-crop-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 210px;
    height: 210px;
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.52);
    pointer-events: none;
    box-sizing: border-box;
}

/* Grille 3x3 (Règle des tiers) */
.npaneleditimage-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.npaneleditimage-grid-line-h {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.45);
}

.npaneleditimage-grid-h1 {
    top: 33.33%;
}

.npaneleditimage-grid-h2 {
    top: 66.66%;
}

.npaneleditimage-grid-line-v {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.45);
}

.npaneleditimage-grid-v1 {
    left: 33.33%;
}

.npaneleditimage-grid-v2 {
    left: 66.66%;
}

/* ===================================================================
   3. Contrôles (Pivoter & Zoom)
   =================================================================== */

.npaneleditimage-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.npaneleditimage-labels-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
}

.npaneleditimage-label {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--n-text-muted);
}

.npaneleditimage-label-rotate {
    width: 48px;
    text-align: left;
}

.npaneleditimage-label-zoom {
    flex: 1;
    text-align: center;
}

.npaneleditimage-inputs-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Bouton de rotation */
.npaneleditimage-btn-rotate {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--n-text);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    padding: 0;
}

.npaneleditimage-btn-rotate:hover {
    background: var(--n-bg-secondary);
    color: var(--n-primary);
    transform: rotate(-45deg);
}

.npaneleditimage-btn-rotate:active {
    transform: rotate(-90deg) scale(0.95);
}

/* Slider Zoom HTML5 personnalisé */
.npaneleditimage-slider-zoom {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 999px;
    background: var(--n-border);
    outline: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.npaneleditimage-slider-zoom:focus-visible {
    box-shadow: 0 0 0 2px var(--n-primary);
}

/* Track & Thumb pour Webkit (Chrome, Edge, Safari) */
.npaneleditimage-slider-zoom::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: var(--n-border);
}

.npaneleditimage-slider-zoom::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--n-primary);
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--n-primary) 30%, transparent);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.npaneleditimage-slider-zoom:hover::-webkit-slider-thumb {
    transform: scale(1.15);
    box-shadow: 0 3px 8px color-mix(in srgb, var(--n-primary) 30%, transparent);
}

/* Track & Thumb pour Firefox */
.npaneleditimage-slider-zoom::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: var(--n-border);
    border: none;
}

.npaneleditimage-slider-zoom::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: var(--n-primary);
    cursor: pointer;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--n-primary) 30%, transparent);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.npaneleditimage-slider-zoom:hover::-moz-range-thumb {
    transform: scale(1.15);
}

/* ===================================================================
   4. Footer / Actions (Télécharger + Confirmer)
   =================================================================== */

.npaneleditimage-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    padding-top: 4px;
}

/* Bouton Télécharger l'image */
.npaneleditimage-btn-upload {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--n-text);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 6px;
    transition: background 0.18s ease, color 0.18s ease;
}

.npaneleditimage-btn-upload:hover {
    background: var(--n-bg-secondary);
    color: var(--n-primary);
}

.npaneleditimage-upload-icon {
    flex-shrink: 0;
    stroke: currentColor;
}

/* Bouton Confirmer */
.npaneleditimage-btn-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--n-primary);
    color: var(--n-text-inverse);
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(30, 86, 255, 0.25);
    transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
    user-select: none;
}

.npaneleditimage-btn-confirm:hover {
    background: color-mix(in srgb, var(--n-primary) 80%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--n-primary) 30%, transparent);
}

.npaneleditimage-btn-confirm:active {
    background: color-mix(in srgb, var(--n-primary) 60%, transparent);
    transform: translateY(0);
    box-shadow: none;
}
/**
 * @file NPanelSignatureTag.css
 *
 * Panneau modal / composant de création et d'édition de signature manuscrite.
 * Comprend 3 modes : Dessiner (canvas interactif), Taper (police manuscrite), Télécharger (glisser-déposer / image).
 *
 * @requires NTag.css
 */

/* ===================================================================
   1. Conteneur principal du Panneau de Signature
   =================================================================== */

.npanelsignature {
    position: relative;
    width: 100%;
    color: var(--n-text);
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: inherit;
    user-select: none;
    animation: npanelsignature-fade-in 0.2s ease-out;
}

@keyframes npanelsignature-fade-in {
    from {
        opacity: 0;
        transform: scale(0.97);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===================================================================
   3. Onglets / Barre de mode (Dessiner | Taper | Télécharger)
   =================================================================== */

.npanelsignature-tabs {
    display: flex;
    width: 100%;
    border: 1px solid var(--n-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--n-bg);
}

.npanelsignature-tab-item {
    flex: 1;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-right: 1px solid var(--n-border);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--n-text);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    padding: 0 12px;
}

.npanelsignature-tab-item:last-child {
    border-right: none;
}

.npanelsignature-tab-item:hover:not(.active) {
    background: var(--n-bg-secondary);
}

.npanelsignature-tab-item.active {
    background: var(--n-primary);
    color: var(--n-text-inverse);
    font-weight: 600;
}

/* ===================================================================
   4. Zone centrale de contenu / Affichage
   =================================================================== */

.npanelsignature-body {
    position: relative;
    width: 100%;
    height: 220px;
    box-sizing: border-box;
}

.npanelsignature-view {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    box-sizing: border-box;
}

.npanelsignature-view.active {
    display: flex;
}

/* --- Mode 1 : Dessiner (Canvas) --- */

.npanelsignature-view-draw {
    background: var(--n-bg-secondary);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    touch-action: none;
    cursor: crosshair;
}

.npanelsignature-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* --- Mode 2 : Taper (Texte manuscrit) --- */

.npanelsignature-view-type {
    background: var(--n-bg-secondary);
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    padding: 16px;
    position: relative;
    overflow: hidden;
}

.npanelsignature-type-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    text-align: center;
    font-style: italic;
    font-size: 3rem;
    line-height: 1.3;
    font-family: 'Dancing Script', cursive, sans-serif;
    color: #111827;
    cursor: text;
    transition: color 0.2s ease, font-family 0.2s ease;
}

.npanelsignature-type-input::placeholder {
    color: var(--n-text-muted);
    opacity: 0.6;
    font-size: 2.2rem;
}

/* --- Mode 3 : Télécharger (Glisser-déposer & Upload) --- */

.npanelsignature-view-upload {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--n-bg-secondary);
    border: 1.5px dashed var(--n-border);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    gap: 12px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    position: relative;
}

.npanelsignature-view-upload.dragover {
    border-color: var(--n-primary);
    background: color-mix(in srgb, var(--n-primary) 8%, var(--n-bg-secondary));
}

.npanelsignature-upload-icon {
    width: 44px;
    height: 44px;
    color: var(--n-text-muted);
    stroke: currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
}

.npanelsignature-upload-icon svg {
    width: 100%;
    height: 100%;
}

.npanelsignature-upload-text {
    font-size: 0.88rem;
    color: var(--n-text-muted);
    max-width: 280px;
    line-height: 1.4;
    margin: 0;
}

.npanelsignature-btn-upload {
    background: var(--n-primary);
    color: var(--n-text-inverse);
    border: none;
    border-radius: 6px;
    padding: 9px 20px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.12s ease;
}

.npanelsignature-btn-upload:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.npanelsignature-btn-upload:active {
    transform: translateY(0);
}

.npanelsignature-upload-preview {
    position: absolute;
    inset: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--n-bg);
    border-radius: 6px;
    overflow: hidden;
}

.npanelsignature-upload-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.npanelsignature-upload-preview-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* ===================================================================
   5. Barre d'outils inférieure / Footer
   =================================================================== */

.npanelsignature-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 4px;
}

.npanelsignature-footer-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Palette de couleurs */
.npanelsignature-colors {
    display: flex;
    align-items: center;
    gap: 8px;
}

.npanelsignature-color-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.npanelsignature-color-circle:hover {
    transform: scale(1.1);
}

.npanelsignature-color-circle.active {
    box-shadow: 0 0 0 2px var(--n-bg), 0 0 0 3.5px var(--n-border);
}

.npanelsignature-color-circle svg {
    width: 14px;
    height: 14px;
    stroke: #ffffff;
    stroke-width: 2.5;
    display: none;
}

.npanelsignature-color-circle.active svg {
    display: block;
}

/* Bouton Effacer (Mode Dessin) */
.npanelsignature-btn-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--n-text);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.18s ease, color 0.18s ease;
}

.npanelsignature-btn-clear:hover {
    background: var(--n-bg-secondary);
    color: var(--n-error);
}

.npanelsignature-btn-clear svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

/* Sélecteur de Police (Mode Taper) */
.npanelsignature-font-container {
    position: relative;
    display: inline-flex;
}

.npanelsignature-btn-font {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--n-text);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.18s ease;
}

.npanelsignature-btn-font:hover {
    background: var(--n-bg-secondary);
}

.npanelsignature-btn-font svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    transition: transform 0.18s ease;
}

.npanelsignature-btn-font.open svg {
    transform: rotate(180deg);
}

/* Menu déroulant des Polices */
.npanelsignature-font-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px var(--n-shadow, rgba(0, 0, 0, 0.15));
    width: 220px;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    padding: 4px 0;
    z-index: 100;
}

.npanelsignature-font-dropdown.open {
    display: flex;
}

.npanelsignature-font-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: transparent;
    border: none;
    text-align: left;
    color: var(--n-text);
    font-size: 1.15rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.npanelsignature-font-item:hover {
    background: var(--n-bg-secondary);
}

.npanelsignature-font-item.active {
    background: color-mix(in srgb, var(--n-primary) 12%, transparent);
    color: var(--n-primary);
    font-weight: 600;
}

/* Bouton Valider */
.npanelsignature-btn-valider {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--n-primary);
    color: var(--n-text-inverse);
    border: none;
    border-radius: 8px;
    padding: 9px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, opacity 0.18s ease, transform 0.12s ease;
    user-select: none;
}

.npanelsignature-btn-valider:hover:not(:disabled) {
    background: color-mix(in srgb, var(--n-primary) 85%, transparent);
    transform: translateY(-1px);
}

.npanelsignature-btn-valider:active:not(:disabled) {
    transform: translateY(0);
}

.npanelsignature-btn-valider:disabled,
.npanelsignature-btn-valider.disabled {
    background: color-mix(in srgb, var(--n-primary) 45%, #ffffff);
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

/* ===================================================================
   6. Polices manuscrites Google Fonts
   =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Caveat:wght@600&family=Dancing+Script:wght@600&family=Great+Vibes&family=Pacifico&family=Parisienne&family=Satisfy&display=swap');
/**
 * @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 NButtonRadioTag.css
 * @description Styles CSS pour le composant NButtonRadioTag
 * 
 * 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 NRadioTag.css
 * 
 * @see NButtonRadioTag.js
 * 
 * @example
 * // Utilisation des classes CSS
 * <button class="nbuttonradio-style-radius nbuttonradio-type-radio-left">
 *   <input type="radiobox" class="nbuttonradio-child-radio">
 *   <label class="nbuttonradio-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 */
.nbuttonradioradio-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;
}

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

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

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

.nbuttonradio-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(.nbuttonradio-style-radius.nbuttonradio-type-radio-left) .nbuttonradio-child-radio {
    order: 1;
    width: 25px;
    height: 25px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

:where(.nbuttonradio-style-none.nbuttonradio-type-radio-bottom) .nbuttonradio-child-text {
    order: 1;
}
/**
 * @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: 40%;
    height: 40%;
}

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

.ninputdatetimeselect-div {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    justify-content: space-between;
    gap: 8px;
}

.ninputdatetimeselect-datetime .ninputdatetimeselect-hour,
.ninputdatetimeselect-datetime-local .ninputdatetimeselect-hour {
    margin-left: 10px;
}

/* Style du contenu */
.ninputdatetimeselect-stylecontainer {
    border: none;
    border-radius: 0;
    background-color: transparent;
}
/**
 * @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 NInputFormatAreaTag.css
 *
 * Éditeur de texte riche avec barre d'outils
 *
 * @requires NInputAreaTag.css  (variables --n-*)
 */

/* ===================================================================
   NInputFormatAreaTag — Conteneur Principal
   =================================================================== */

.ninputformatarea {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

/* ─── 3. Zone d'édition (contenteditable) ─────────────────────────── */

.ninputformatarea-editor {
    line-height: 1.6;
    word-break: break-word;
    box-sizing: border-box;
    cursor: text;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
}

.ninputformatarea-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--n-text-muted);
    opacity: 0.6;
    pointer-events: none;
}

/* Typographie interne */
.ninputformatarea-editor b,
.ninputformatarea-editor strong {
    font-weight: 700;
}

.ninputformatarea-editor i,
.ninputformatarea-editor em {
    font-style: italic;
}

.ninputformatarea-editor u {
    text-decoration: underline;
}

.ninputformatarea-editor ul,
.ninputformatarea-editor ol {
    margin: 6px 0;
    padding-left: 24px;
}

.ninputformatarea-editor li {
    margin-bottom: 3px;
}

.ninputformatarea-editor a {
    color: var(--n-primary);
    text-decoration: underline;
}

/* ─── 4. Séparateur ───────────────────────────────────────────────── */

.ninputformatarea-divider {
    height: 1px;
    background: var(--n-border);
    width: 100%;
    flex-shrink: 0;
}

/* ─── 5. Barre d'outils (Toolbar) ─────────────────────────────────── */

.ninputformatarea-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    box-sizing: border-box;
    user-select: none;
    flex-wrap: wrap;
}

.ninputformatarea-toolbar-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Boutons d'outils de formatage */
.ninputformatarea-tool-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--n-text);
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
    box-sizing: border-box;
}

.ninputformatarea-tool-btn:hover {
    background: var(--n-bg-secondary);
    color: var(--n-primary);
}

.ninputformatarea-tool-btn:active {
    transform: scale(0.92);
}

/* Style spécifique des boutons */
.ninputformatarea-btn-bold {
    font-weight: 800;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
}

.ninputformatarea-btn-italic {
    font-style: italic;
    font-family: "Times New Roman", Times, Georgia, serif;
    font-size: 1.15rem;
    font-weight: 700;
}

.ninputformatarea-btn-underline {
    text-decoration: underline;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    font-weight: 600;
}

.ninputformatarea-btn-align {
    width: auto;
    min-width: 44px;
    padding: 0 6px;
    gap: 2px;
}

.ninputformatarea-align-arrow {
    opacity: 0.7;
}

/* État actif du bouton de formatage (bleu vif plein comme sur la capture) */
.ninputformatarea-tool-btn.active {
    background: var(--n-primary);
    color: var(--n-text-inverse);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--n-primary) 30%, transparent);
}

.ninputformatarea-tool-btn.active:hover {
    background: color-mix(in srgb, var(--n-primary) 85%, transparent);
    color: var(--n-text-inverse);
}

/* Séparateurs verticaux de la barre d'outils */
.ninputformatarea-toolbar-separator {
    width: 1px;
    height: 18px;
    background: var(--n-border);
    margin: 0 4px;
    flex-shrink: 0;
}

/* ─── 7. Menu contextuel d'alignement (Popup) ─────────────────────── */

.ninputformatarea-align-popup {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px;
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 100000;
    min-width: 150px;
}

.ninputformatarea-align-item {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--n-text);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease;
}

.ninputformatarea-align-item:hover {
    background: var(--n-bg-secondary);
    color: var(--n-primary);
}

/* ─── 8. Bouton valider et annuler ─────────────────────── */

.ninputformatarea-dialoglink-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.ninputformatarea-dialoglink-button-valider {
    color: var(--n-text-inverse);
    background: var(--n-primary);
    border: 1px solid var(--n-primary);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.ninputformatarea-dialoglink-button-valider:hover {
    background: color-mix(in srgb, var(--n-primary) 85%, transparent);
    border-color: color-mix(in srgb, var(--n-primary) 85%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px var(--n-shadow);
}

.ninputformatarea-dialoglink-button-annuler {
    color: var(--n-text);
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.ninputformatarea-dialoglink-button-annuler:hover {
    background: var(--n-bg-secondary);
    border-color: var(--n-primary);
    color: var(--n-primary);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px var(--n-shadow);
}
/**
 * @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 : Vert dynamique du logo + nuances forêt premium
 *
 * @requires none
 */

.ntheme-light {
    /* Couleurs principales basées sur le logo */
    --n-primary: rgb(65, 176, 54);
    /* Vert dynamique officiel du logo (#41b036) */
    --n-secondary: rgb(46, 128, 38);
    /* Vert forêt intermédiaire (#2e8026) */
    --n-accent: rgb(24, 69, 20);
    /* Vert forêt foncé pour lisibilité et contraste fort (#184514) */

    /* 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(240, 249, 239);
    /* Teinte vert très claire et fraîche (#f0f9ef) */

    /* Bordures */
    --n-border: rgb(217, 237, 215);
    /* Bordures douces légèrement teintées vert (#d9edd7) */

    /* États */
    --n-hover: rgb(24, 69, 20);
    /* Vert forêt foncé au survol */
    --n-active: rgb(65, 176, 54);
    /* Vert actif */
    --n-disabled: rgb(206, 212, 218);
    /* Gris clair pour éléments désactivés */

    /* Couleurs de notification */
    --n-success: rgb(65, 176, 54);
    /* 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(23, 143, 162);
    /* Cyan discret pour informations (#178fa2) */

    /* Ombres */
    --n-shadow: rgba(65, 176, 54, 0.12);
    /* Ombre avec teinte du vert logo */
}

.ntheme-dark {
    /* Couleurs principales - mode sombre adapté pour visibilité */
    --n-primary: rgb(97, 219, 85);
    /* Vert plus lumineux pour mode sombre (#61db55) */
    --n-secondary: rgb(140, 230, 130);
    /* Vert pastel doux pour mode sombre (#8ce682) */
    --n-accent: rgb(181, 240, 174);
    /* Vert menthe très clair du logo (#b5f0ae) */

    /* Textes */
    --n-text: rgb(245, 249, 244);
    /* Texte principal clair teinté de menthe (#f5f9f4) */
    --n-text-inverse: rgb(14, 20, 13);
    /* Texte sur fond clair */
    --n-text-muted: rgb(162, 181, 160);
    /* Texte secondaire vert-gris (#a2b5a0) */

    /* Arrière-plans premium (teintes forêt/sapin foncé) */
    --n-bg: rgb(14, 20, 13);
    /* Fond sombre vert pin profond (#0e140d) */
    --n-bg-secondary: rgb(25, 36, 23);
    /* Fond secondaire légèrement plus clair (#192417) */

    /* Bordures */
    --n-border: rgb(38, 56, 35);
    /* Bordures subtilement teintées vert olive (#263823) */

    /* États */
    --n-hover: rgb(97, 219, 85);
    /* Vert au survol */
    --n-active: rgb(181, 240, 174);
    /* Vert clair pour l'état actif */
    --n-disabled: rgb(38, 56, 35);
    /* Gris foncé pour éléments désactivés */

    /* Couleurs de notification */
    --n-success: rgb(97, 219, 85);
    /* Vert clair */
    --n-error: rgb(239, 83, 80);
    /* Rouge lumineux */
    --n-warning: rgb(255, 183, 77);
    /* Orange lumineux */
    --n-info: rgb(52, 173, 201);
    /* Info bleu-cyan lumineux (#34adc9) */

    /* Ombres */
    --n-shadow: rgba(0, 0, 0, 0.6);
    /* 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: rgb(255, 255, 255);
}

.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 InputSection.css
 *
 * @requires Theme.css
 */

/* ─── Conteneur principal ─────────────────────────────────────────────── */
.inputsection {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: var(--n-bg);
}

/* ─── Zone de déplacement (move) ──────────────────────────────────────── */
.inputsection-move {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 0;
    min-width: 32px;
    flex-shrink: 0;
}

.inputsection-btn-move-up,
.inputsection-btn-move-down {
    width: 26px;
    height: 26px;
    padding: 3px;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.18s ease, background 0.18s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inputsection-btn-move-up:hover,
.inputsection-btn-move-down:hover {
    opacity: 1;
    background: var(--n-border);
    transform: scale(1.12);
}

.inputsection-btn-move-up img,
.inputsection-btn-move-down img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* ─── Sous-conteneur principal ────────────────────────────────────────── */
.inputsection-subcontainer {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    border-bottom: 1px solid var(--n-border);
}

/* ─── Header ──────────────────────────────────────────────────────────── */
.inputsection-headercontainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
}

/* ─── Conteneur du titre ──────────────────────────────────────────────── */
.inputsection-titrecontainer {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.inputsection-titre {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--n-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
    cursor: pointer;
    user-select: none;
}

.inputsection-inputtitre {
    flex: 1;
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--n-text);
    background: var(--n-bg);
    border: 1.5px solid var(--n-primary);
    border-radius: 6px;
    padding: 4px 8px;
    outline: none;
    transition: box-shadow 0.18s ease;
    box-shadow: 0 0 0 3px rgba(65, 176, 54, 0.12);
}

.inputsection-inputtitre:focus {
    box-shadow: 0 0 0 3px rgba(65, 176, 54, 0.25);
}

/* ─── Boutons du header ───────────────────────────────────────────────── */
.inputsection-btn-options,
.inputsection-btn-showhide {
    width: 30px;
    height: 30px;
    padding: 4px;
    border-radius: 7px;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.18s ease, background 0.18s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inputsection-btn-options:hover,
.inputsection-btn-showhide:hover {
    opacity: 1;
    background: var(--n-border);
    transform: scale(1.1);
}

.inputsection-btn-options img,
.inputsection-btn-showhide img {
    width: 17px;
    height: 17px;
    object-fit: contain;
}

/* ─── Conteneur des inputs (corps dépliable) ─────────────────────────── */
.inputsection-inputcontainer {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 12px;
    border-radius: 0 0 10px 0;
    background: var(--n-bg);
    animation: inputsection-fadein 0.18s ease;
}

@keyframes inputsection-fadein {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.inputsection-input-date .ninputdatetimeselect-stylecontainer {
    background: transparent;
}

/* ─── Popup options ───────────────────────────────────────────────────── */
.editeurnavbar-child-popup-options {
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px var(--n-shadow);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 180px;
    z-index: 1000;
    animation: inputsection-popup-in 0.15s ease;
}

@keyframes inputsection-popup-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-4px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.inputsection-child-popup-options-button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--n-text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
}

.inputsection-child-popup-options-button:hover {
    background: var(--n-bg-secondary);
    color: var(--n-primary);
}

.inputsection-child-popup-options-button img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    opacity: 0.75;
    flex-shrink: 0;
}

.inputsection-child-popup-options-separator {
    height: 1px;
    background: var(--n-border);
    margin: 4px 6px;
    border-radius: 1px;
}

/*----------
 Bouton jour / today dans les dates 
----------*/
.inputsection-input-today-button-cell {
    padding: 0px;
    padding-left: 10px;
    white-space: nowrap;
    min-width: 40px;
}

.inputsection-input-today-button {
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
}

.inputsection-input-today-button .nbuttoncheck-child-check {
    width: 10px;
    height: 10px;
    padding: 0px;
}
/**
 * @file InputSubSection.css
 *
 * @requires Theme.css
 */

/* ─── Conteneur principal ─────────────────────────────────────────────── */
.inputsubsection {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border: 1px solid var(--n-border);
    border-radius: 8px;
    margin-bottom: 6px;
    position: relative;
}

.inputsubsection::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--n-border);
    border-radius: 0 3px 3px 0;
    opacity: 1;
}

/* ─── Zone de déplacement ─────────────────────────────────────────────── */
.inputsubsection-move {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 3px;
    min-width: 28px;
    flex-shrink: 0;
}

.inputsubsection-btn-move-up,
.inputsubsection-btn-move-down {
    width: 22px;
    height: 22px;
    padding: 2px;
    border-radius: 5px;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.18s ease, background 0.18s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inputsubsection-btn-move-up:hover,
.inputsubsection-btn-move-down:hover {
    opacity: 1;
    background: var(--n-border);
    transform: scale(1.15);
}

.inputsubsection-btn-move-up img,
.inputsubsection-btn-move-down img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

/* ─── Sous-conteneur principal ────────────────────────────────────────── */
.inputsubsection-subcontainer {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* ─── Header ──────────────────────────────────────────────────────────── */
.inputsubsection-headercontainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 0 8px 0 0;
    height: 100%;
}

/* ─── Texte résumé ────────────────────────────────────────────────────── */
.inputsubsection-resume {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--n-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
    font-style: italic;
    transition: color 0.18s ease;
    cursor: pointer;
    user-select: none;
}

.inputsubsection:hover .inputsubsection-resume {
    color: var(--n-text);
}

/* ─── Bouton modifier ─────────────────────────────────────────────────── */
.inputsubsection-btn-modifier {
    width: 28px;
    height: 28px;
    padding: 4px;
    border-radius: 7px;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.18s ease, background 0.18s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inputsubsection-btn-modifier:hover {
    opacity: 1;
    background: var(--n-border);
    transform: scale(1.1);
}

.inputsubsection-btn-modifier img {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

/* ─── Conteneur des inputs ────────────────────────────────────────────── */
.inputsubsection-inputcontainer {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 8px 10px;
    animation: inputsubsection-fadein 0.18s ease;
}

@keyframes inputsubsection-fadein {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Zone d'actions (bas) ────────────────────────────────────────────── */
.inputsubsection-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 10px;
    margin-top: 10px;
}

/* ─── Bouton supprimer ────────────────────────────────────────────────── */
.inputsubsection-btn-supprimer {
    width: 28px;
    height: 28px;
    padding: 4px;
    border-radius: 7px;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.18s ease, background 0.18s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inputsubsection-btn-supprimer:hover {
    opacity: 1;
    background: rgba(229, 57, 53, 0.1);
    transform: scale(1.1);
}

.inputsubsection-btn-supprimer img {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

/* ─── Bouton valider ──────────────────────────────────────────────────── */
.inputsubsection-btn-valider {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 7px;
    border: 1.5px solid var(--n-primary);
    background: transparent;
    color: var(--n-primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
    white-space: nowrap;
}

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

.inputsubsection-btn-valider img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    filter: none;
    transition: filter 0.18s ease;
}

.inputsubsection-btn-valider:hover img {
    filter: brightness(0) invert(1);
}
/**
 * @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 NChooserPaysFrame.css
 *
 * @requires NDialogFrameTag.css
 * @requires NTextTag.css
 * @requires NButtonTag.css
 * @requires NTag.css
 */

.nchooserpaysframe-search {
    width: 350px;
    margin: auto;
    margin-bottom: 10px;
}

.nchooserpaysframe-panelpays {
    height: 60vh;
    width: 350px;
    overflow-y: auto;
    overflow-x: hidden;
}
/**
 * @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 NPanelColorTag.css
 *
 * Panneau de sélection de couleur.
 *
 * @requires NTag.css
 */

/* ===================================================================
   NPanelColorTag — Color Picker
   =================================================================== */

.npanelcolor-root {
    --pc-radius: 6px;
    --pc-gray-bg: #f2f3f5;
    --pc-gray-text: #1f2430;
    --pc-accent: #5b93ff;
    --pc-accent-bg: #eef4ff;
    --pc-border: rgba(0, 0, 0, 0.12);

    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    font-family: inherit;
}

.npanelcolor-root * {
    box-sizing: border-box;
}

/* ---------- 1. Presets ---------- */

.npanelcolor-presets {
    display: flex;
    gap: 8px;
}

.npanelcolor-preset {
    flex: 1 1 0%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: none;
    border-radius: var(--pc-radius);
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.12s ease;
}

.npanelcolor-preset:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.npanelcolor-preset:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(91, 147, 255, 0.4);
}

/* ---------- 2. Zone Saturation/Valeur + Teinte ---------- */

.npanelcolor-picker-row {
    display: flex;
    gap: 10px;
    height: 170px;
}

.npanelcolor-satval-area {
    position: relative;
    flex: 1 1 0%;
    border-radius: var(--pc-radius);
    overflow: hidden;
    cursor: grab;
    touch-action: none;
}

.npanelcolor-satval-area:active {
    cursor: grabbing;
}

.npanelcolor-satval-layer {
    position: absolute;
    inset: 0;
}

.npanelcolor-satval-white {
    background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

.npanelcolor-satval-black {
    background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%);
}

.npanelcolor-hue-slider {
    position: relative;
    width: 14px;
    border-radius: 999px;
    cursor: grab;
    touch-action: none;
    background: linear-gradient(to bottom,
            rgb(255, 0, 0) 0%,
            rgb(255, 153, 0) 10%,
            rgb(205, 255, 0) 20%,
            rgb(53, 255, 0) 30%,
            rgb(0, 255, 102) 40%,
            rgb(0, 255, 253) 50%,
            rgb(0, 102, 255) 60%,
            rgb(50, 0, 255) 70%,
            rgb(205, 0, 255) 80%,
            rgb(255, 0, 153) 90%,
            rgb(255, 0, 0) 100%);
}

.npanelcolor-hue-slider:active {
    cursor: grabbing;
}

/* ---------- Curseurs (poignées communes) ---------- */

.npanelcolor-pointer {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.35);
    transform: translate(-50%, -50%);
    transition: transform 0.075s ease;
    cursor: grab;
}

.npanelcolor-pointer:active {
    cursor: grabbing;
}

.npanelcolor-pointer:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.25),
        0 1px 4px rgba(0, 0, 0, 0.35),
        0 0 0 3px rgba(91, 147, 255, 0.4);
}

/* ---------- 3. Aperçu + champ HEX ---------- */

.npanelcolor-bottom-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.npanelcolor-preview {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--pc-radius);
    box-shadow: inset 0 0 0 1px var(--pc-border);
}

.npanelcolor-hex-wrapper {
    flex: 1 1 0%;
    background: var(--pc-gray-bg);
    border: 1px solid transparent;
    border-radius: var(--pc-radius);
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

.npanelcolor-hex-wrapper:focus-within {
    border-color: var(--pc-accent);
    background: var(--pc-accent-bg);
}

.npanelcolor-hex-input {
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    color: var(--pc-gray-text);
    background: transparent;
    border: none;
    outline: none;
}
/**
 * @file NPanelEditImageTag.css
 *
 * Panneau modal d'édition, rotation, zoom et recadrage de photo pour l'éditeur.
 *
 * @requires NTag.css
 */

/* ===================================================================
   NEditImagePanel — Modal & Backdrop
   =================================================================== */

.npaneleditimage {
    animation: npaneleditimage-fade-in 0.2s ease-out;
}

@keyframes npaneleditimage-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

/* ===================================================================
   Carte / Boîte de dialogue
   =================================================================== */

.npaneleditimage-card {
    position: relative;
    width: 100%;
    color: var(--n-text);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    box-sizing: border-box;
    font-family: inherit;
    animation: npaneleditimage-scale-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes npaneleditimage-scale-up {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ===================================================================
   2. Zone d'affichage & Recadrage (Viewport + Grid)
   =================================================================== */

.npaneleditimage-viewport-container {
    width: 100%;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #111417;
}

.npaneleditimage-viewport {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.npaneleditimage-viewport.dragging {
    cursor: grabbing;
}

.npaneleditimage-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Cadre de recadrage au centre avec assombrissement autour */
.npaneleditimage-crop-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 210px;
    height: 210px;
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.52);
    pointer-events: none;
    box-sizing: border-box;
}

/* Grille 3x3 (Règle des tiers) */
.npaneleditimage-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.npaneleditimage-grid-line-h {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.45);
}

.npaneleditimage-grid-h1 {
    top: 33.33%;
}

.npaneleditimage-grid-h2 {
    top: 66.66%;
}

.npaneleditimage-grid-line-v {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.45);
}

.npaneleditimage-grid-v1 {
    left: 33.33%;
}

.npaneleditimage-grid-v2 {
    left: 66.66%;
}

/* ===================================================================
   3. Contrôles (Pivoter & Zoom)
   =================================================================== */

.npaneleditimage-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.npaneleditimage-labels-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
}

.npaneleditimage-label {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--n-text-muted);
}

.npaneleditimage-label-rotate {
    width: 48px;
    text-align: left;
}

.npaneleditimage-label-zoom {
    flex: 1;
    text-align: center;
}

.npaneleditimage-inputs-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Bouton de rotation */
.npaneleditimage-btn-rotate {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--n-text);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    padding: 0;
}

.npaneleditimage-btn-rotate:hover {
    background: var(--n-bg-secondary);
    color: var(--n-primary);
    transform: rotate(-45deg);
}

.npaneleditimage-btn-rotate:active {
    transform: rotate(-90deg) scale(0.95);
}

/* Slider Zoom HTML5 personnalisé */
.npaneleditimage-slider-zoom {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 999px;
    background: var(--n-border);
    outline: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.npaneleditimage-slider-zoom:focus-visible {
    box-shadow: 0 0 0 2px var(--n-primary);
}

/* Track & Thumb pour Webkit (Chrome, Edge, Safari) */
.npaneleditimage-slider-zoom::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: var(--n-border);
}

.npaneleditimage-slider-zoom::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--n-primary);
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--n-primary) 30%, transparent);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.npaneleditimage-slider-zoom:hover::-webkit-slider-thumb {
    transform: scale(1.15);
    box-shadow: 0 3px 8px color-mix(in srgb, var(--n-primary) 30%, transparent);
}

/* Track & Thumb pour Firefox */
.npaneleditimage-slider-zoom::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: var(--n-border);
    border: none;
}

.npaneleditimage-slider-zoom::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: var(--n-primary);
    cursor: pointer;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--n-primary) 30%, transparent);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.npaneleditimage-slider-zoom:hover::-moz-range-thumb {
    transform: scale(1.15);
}

/* ===================================================================
   4. Footer / Actions (Télécharger + Confirmer)
   =================================================================== */

.npaneleditimage-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    padding-top: 4px;
}

/* Bouton Télécharger l'image */
.npaneleditimage-btn-upload {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--n-text);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 6px;
    transition: background 0.18s ease, color 0.18s ease;
}

.npaneleditimage-btn-upload:hover {
    background: var(--n-bg-secondary);
    color: var(--n-primary);
}

.npaneleditimage-upload-icon {
    flex-shrink: 0;
    stroke: currentColor;
}

/* Bouton Confirmer */
.npaneleditimage-btn-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--n-primary);
    color: var(--n-text-inverse);
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(30, 86, 255, 0.25);
    transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
    user-select: none;
}

.npaneleditimage-btn-confirm:hover {
    background: color-mix(in srgb, var(--n-primary) 80%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--n-primary) 30%, transparent);
}

.npaneleditimage-btn-confirm:active {
    background: color-mix(in srgb, var(--n-primary) 60%, transparent);
    transform: translateY(0);
    box-shadow: none;
}
/**
 * @file NPanelSignatureTag.css
 *
 * Panneau modal / composant de création et d'édition de signature manuscrite.
 * Comprend 3 modes : Dessiner (canvas interactif), Taper (police manuscrite), Télécharger (glisser-déposer / image).
 *
 * @requires NTag.css
 */

/* ===================================================================
   1. Conteneur principal du Panneau de Signature
   =================================================================== */

.npanelsignature {
    position: relative;
    width: 100%;
    color: var(--n-text);
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: inherit;
    user-select: none;
    animation: npanelsignature-fade-in 0.2s ease-out;
}

@keyframes npanelsignature-fade-in {
    from {
        opacity: 0;
        transform: scale(0.97);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===================================================================
   3. Onglets / Barre de mode (Dessiner | Taper | Télécharger)
   =================================================================== */

.npanelsignature-tabs {
    display: flex;
    width: 100%;
    border: 1px solid var(--n-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--n-bg);
}

.npanelsignature-tab-item {
    flex: 1;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-right: 1px solid var(--n-border);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--n-text);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    padding: 0 12px;
}

.npanelsignature-tab-item:last-child {
    border-right: none;
}

.npanelsignature-tab-item:hover:not(.active) {
    background: var(--n-bg-secondary);
}

.npanelsignature-tab-item.active {
    background: var(--n-primary);
    color: var(--n-text-inverse);
    font-weight: 600;
}

/* ===================================================================
   4. Zone centrale de contenu / Affichage
   =================================================================== */

.npanelsignature-body {
    position: relative;
    width: 100%;
    height: 220px;
    box-sizing: border-box;
}

.npanelsignature-view {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    box-sizing: border-box;
}

.npanelsignature-view.active {
    display: flex;
}

/* --- Mode 1 : Dessiner (Canvas) --- */

.npanelsignature-view-draw {
    background: var(--n-bg-secondary);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    touch-action: none;
    cursor: crosshair;
}

.npanelsignature-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* --- Mode 2 : Taper (Texte manuscrit) --- */

.npanelsignature-view-type {
    background: var(--n-bg-secondary);
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    padding: 16px;
    position: relative;
    overflow: hidden;
}

.npanelsignature-type-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    text-align: center;
    font-style: italic;
    font-size: 3rem;
    line-height: 1.3;
    font-family: 'Dancing Script', cursive, sans-serif;
    color: #111827;
    cursor: text;
    transition: color 0.2s ease, font-family 0.2s ease;
}

.npanelsignature-type-input::placeholder {
    color: var(--n-text-muted);
    opacity: 0.6;
    font-size: 2.2rem;
}

/* --- Mode 3 : Télécharger (Glisser-déposer & Upload) --- */

.npanelsignature-view-upload {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--n-bg-secondary);
    border: 1.5px dashed var(--n-border);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    gap: 12px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    position: relative;
}

.npanelsignature-view-upload.dragover {
    border-color: var(--n-primary);
    background: color-mix(in srgb, var(--n-primary) 8%, var(--n-bg-secondary));
}

.npanelsignature-upload-icon {
    width: 44px;
    height: 44px;
    color: var(--n-text-muted);
    stroke: currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
}

.npanelsignature-upload-icon svg {
    width: 100%;
    height: 100%;
}

.npanelsignature-upload-text {
    font-size: 0.88rem;
    color: var(--n-text-muted);
    max-width: 280px;
    line-height: 1.4;
    margin: 0;
}

.npanelsignature-btn-upload {
    background: var(--n-primary);
    color: var(--n-text-inverse);
    border: none;
    border-radius: 6px;
    padding: 9px 20px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.12s ease;
}

.npanelsignature-btn-upload:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.npanelsignature-btn-upload:active {
    transform: translateY(0);
}

.npanelsignature-upload-preview {
    position: absolute;
    inset: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--n-bg);
    border-radius: 6px;
    overflow: hidden;
}

.npanelsignature-upload-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.npanelsignature-upload-preview-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* ===================================================================
   5. Barre d'outils inférieure / Footer
   =================================================================== */

.npanelsignature-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 4px;
}

.npanelsignature-footer-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Palette de couleurs */
.npanelsignature-colors {
    display: flex;
    align-items: center;
    gap: 8px;
}

.npanelsignature-color-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.npanelsignature-color-circle:hover {
    transform: scale(1.1);
}

.npanelsignature-color-circle.active {
    box-shadow: 0 0 0 2px var(--n-bg), 0 0 0 3.5px var(--n-border);
}

.npanelsignature-color-circle svg {
    width: 14px;
    height: 14px;
    stroke: #ffffff;
    stroke-width: 2.5;
    display: none;
}

.npanelsignature-color-circle.active svg {
    display: block;
}

/* Bouton Effacer (Mode Dessin) */
.npanelsignature-btn-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--n-text);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.18s ease, color 0.18s ease;
}

.npanelsignature-btn-clear:hover {
    background: var(--n-bg-secondary);
    color: var(--n-error);
}

.npanelsignature-btn-clear svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

/* Sélecteur de Police (Mode Taper) */
.npanelsignature-font-container {
    position: relative;
    display: inline-flex;
}

.npanelsignature-btn-font {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--n-text);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.18s ease;
}

.npanelsignature-btn-font:hover {
    background: var(--n-bg-secondary);
}

.npanelsignature-btn-font svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    transition: transform 0.18s ease;
}

.npanelsignature-btn-font.open svg {
    transform: rotate(180deg);
}

/* Menu déroulant des Polices */
.npanelsignature-font-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px var(--n-shadow, rgba(0, 0, 0, 0.15));
    width: 220px;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    padding: 4px 0;
    z-index: 100;
}

.npanelsignature-font-dropdown.open {
    display: flex;
}

.npanelsignature-font-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: transparent;
    border: none;
    text-align: left;
    color: var(--n-text);
    font-size: 1.15rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.npanelsignature-font-item:hover {
    background: var(--n-bg-secondary);
}

.npanelsignature-font-item.active {
    background: color-mix(in srgb, var(--n-primary) 12%, transparent);
    color: var(--n-primary);
    font-weight: 600;
}

/* Bouton Valider */
.npanelsignature-btn-valider {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--n-primary);
    color: var(--n-text-inverse);
    border: none;
    border-radius: 8px;
    padding: 9px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, opacity 0.18s ease, transform 0.12s ease;
    user-select: none;
}

.npanelsignature-btn-valider:hover:not(:disabled) {
    background: color-mix(in srgb, var(--n-primary) 85%, transparent);
    transform: translateY(-1px);
}

.npanelsignature-btn-valider:active:not(:disabled) {
    transform: translateY(0);
}

.npanelsignature-btn-valider:disabled,
.npanelsignature-btn-valider.disabled {
    background: color-mix(in srgb, var(--n-primary) 45%, #ffffff);
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

/* ===================================================================
   6. Polices manuscrites Google Fonts
   =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Caveat:wght@600&family=Dancing+Script:wght@600&family=Great+Vibes&family=Pacifico&family=Parisienne&family=Satisfy&display=swap');
/**
 * @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 NButtonRadioTag.css
 * @description Styles CSS pour le composant NButtonRadioTag
 * 
 * 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 NRadioTag.css
 * 
 * @see NButtonRadioTag.js
 * 
 * @example
 * // Utilisation des classes CSS
 * <button class="nbuttonradio-style-radius nbuttonradio-type-radio-left">
 *   <input type="radiobox" class="nbuttonradio-child-radio">
 *   <label class="nbuttonradio-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 */
.nbuttonradioradio-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;
}

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

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

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

.nbuttonradio-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(.nbuttonradio-style-radius.nbuttonradio-type-radio-left) .nbuttonradio-child-radio {
    order: 1;
    width: 25px;
    height: 25px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

:where(.nbuttonradio-style-none.nbuttonradio-type-radio-bottom) .nbuttonradio-child-text {
    order: 1;
}
/**
 * @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: 40%;
    height: 40%;
}

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

.ninputdatetimeselect-div {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    justify-content: space-between;
    gap: 8px;
}

.ninputdatetimeselect-datetime .ninputdatetimeselect-hour,
.ninputdatetimeselect-datetime-local .ninputdatetimeselect-hour {
    margin-left: 10px;
}

/* Style du contenu */
.ninputdatetimeselect-stylecontainer {
    border: none;
    border-radius: 0;
    background-color: transparent;
}
/**
 * @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 NInputFormatAreaTag.css
 *
 * Éditeur de texte riche avec barre d'outils
 *
 * @requires NInputAreaTag.css  (variables --n-*)
 */

/* ===================================================================
   NInputFormatAreaTag — Conteneur Principal
   =================================================================== */

.ninputformatarea {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

/* ─── 3. Zone d'édition (contenteditable) ─────────────────────────── */

.ninputformatarea-editor {
    line-height: 1.6;
    word-break: break-word;
    box-sizing: border-box;
    cursor: text;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
}

.ninputformatarea-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--n-text-muted);
    opacity: 0.6;
    pointer-events: none;
}

/* Typographie interne */
.ninputformatarea-editor b,
.ninputformatarea-editor strong {
    font-weight: 700;
}

.ninputformatarea-editor i,
.ninputformatarea-editor em {
    font-style: italic;
}

.ninputformatarea-editor u {
    text-decoration: underline;
}

.ninputformatarea-editor ul,
.ninputformatarea-editor ol {
    margin: 6px 0;
    padding-left: 24px;
}

.ninputformatarea-editor li {
    margin-bottom: 3px;
}

.ninputformatarea-editor a {
    color: var(--n-primary);
    text-decoration: underline;
}

/* ─── 4. Séparateur ───────────────────────────────────────────────── */

.ninputformatarea-divider {
    height: 1px;
    background: var(--n-border);
    width: 100%;
    flex-shrink: 0;
}

/* ─── 5. Barre d'outils (Toolbar) ─────────────────────────────────── */

.ninputformatarea-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    box-sizing: border-box;
    user-select: none;
    flex-wrap: wrap;
}

.ninputformatarea-toolbar-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Boutons d'outils de formatage */
.ninputformatarea-tool-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--n-text);
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
    box-sizing: border-box;
}

.ninputformatarea-tool-btn:hover {
    background: var(--n-bg-secondary);
    color: var(--n-primary);
}

.ninputformatarea-tool-btn:active {
    transform: scale(0.92);
}

/* Style spécifique des boutons */
.ninputformatarea-btn-bold {
    font-weight: 800;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
}

.ninputformatarea-btn-italic {
    font-style: italic;
    font-family: "Times New Roman", Times, Georgia, serif;
    font-size: 1.15rem;
    font-weight: 700;
}

.ninputformatarea-btn-underline {
    text-decoration: underline;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    font-weight: 600;
}

.ninputformatarea-btn-align {
    width: auto;
    min-width: 44px;
    padding: 0 6px;
    gap: 2px;
}

.ninputformatarea-align-arrow {
    opacity: 0.7;
}

/* État actif du bouton de formatage (bleu vif plein comme sur la capture) */
.ninputformatarea-tool-btn.active {
    background: var(--n-primary);
    color: var(--n-text-inverse);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--n-primary) 30%, transparent);
}

.ninputformatarea-tool-btn.active:hover {
    background: color-mix(in srgb, var(--n-primary) 85%, transparent);
    color: var(--n-text-inverse);
}

/* Séparateurs verticaux de la barre d'outils */
.ninputformatarea-toolbar-separator {
    width: 1px;
    height: 18px;
    background: var(--n-border);
    margin: 0 4px;
    flex-shrink: 0;
}

/* ─── 7. Menu contextuel d'alignement (Popup) ─────────────────────── */

.ninputformatarea-align-popup {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px;
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 100000;
    min-width: 150px;
}

.ninputformatarea-align-item {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--n-text);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease;
}

.ninputformatarea-align-item:hover {
    background: var(--n-bg-secondary);
    color: var(--n-primary);
}

/* ─── 8. Bouton valider et annuler ─────────────────────── */

.ninputformatarea-dialoglink-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.ninputformatarea-dialoglink-button-valider {
    color: var(--n-text-inverse);
    background: var(--n-primary);
    border: 1px solid var(--n-primary);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.ninputformatarea-dialoglink-button-valider:hover {
    background: color-mix(in srgb, var(--n-primary) 85%, transparent);
    border-color: color-mix(in srgb, var(--n-primary) 85%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px var(--n-shadow);
}

.ninputformatarea-dialoglink-button-annuler {
    color: var(--n-text);
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.ninputformatarea-dialoglink-button-annuler:hover {
    background: var(--n-bg-secondary);
    border-color: var(--n-primary);
    color: var(--n-primary);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px var(--n-shadow);
}
/**
 * @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 : Vert dynamique du logo + nuances forêt premium
 *
 * @requires none
 */

.ntheme-light {
    /* Couleurs principales basées sur le logo */
    --n-primary: rgb(65, 176, 54);
    /* Vert dynamique officiel du logo (#41b036) */
    --n-secondary: rgb(46, 128, 38);
    /* Vert forêt intermédiaire (#2e8026) */
    --n-accent: rgb(24, 69, 20);
    /* Vert forêt foncé pour lisibilité et contraste fort (#184514) */

    /* 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(240, 249, 239);
    /* Teinte vert très claire et fraîche (#f0f9ef) */

    /* Bordures */
    --n-border: rgb(217, 237, 215);
    /* Bordures douces légèrement teintées vert (#d9edd7) */

    /* États */
    --n-hover: rgb(24, 69, 20);
    /* Vert forêt foncé au survol */
    --n-active: rgb(65, 176, 54);
    /* Vert actif */
    --n-disabled: rgb(206, 212, 218);
    /* Gris clair pour éléments désactivés */

    /* Couleurs de notification */
    --n-success: rgb(65, 176, 54);
    /* 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(23, 143, 162);
    /* Cyan discret pour informations (#178fa2) */

    /* Ombres */
    --n-shadow: rgba(65, 176, 54, 0.12);
    /* Ombre avec teinte du vert logo */
}

.ntheme-dark {
    /* Couleurs principales - mode sombre adapté pour visibilité */
    --n-primary: rgb(97, 219, 85);
    /* Vert plus lumineux pour mode sombre (#61db55) */
    --n-secondary: rgb(140, 230, 130);
    /* Vert pastel doux pour mode sombre (#8ce682) */
    --n-accent: rgb(181, 240, 174);
    /* Vert menthe très clair du logo (#b5f0ae) */

    /* Textes */
    --n-text: rgb(245, 249, 244);
    /* Texte principal clair teinté de menthe (#f5f9f4) */
    --n-text-inverse: rgb(14, 20, 13);
    /* Texte sur fond clair */
    --n-text-muted: rgb(162, 181, 160);
    /* Texte secondaire vert-gris (#a2b5a0) */

    /* Arrière-plans premium (teintes forêt/sapin foncé) */
    --n-bg: rgb(14, 20, 13);
    /* Fond sombre vert pin profond (#0e140d) */
    --n-bg-secondary: rgb(25, 36, 23);
    /* Fond secondaire légèrement plus clair (#192417) */

    /* Bordures */
    --n-border: rgb(38, 56, 35);
    /* Bordures subtilement teintées vert olive (#263823) */

    /* États */
    --n-hover: rgb(97, 219, 85);
    /* Vert au survol */
    --n-active: rgb(181, 240, 174);
    /* Vert clair pour l'état actif */
    --n-disabled: rgb(38, 56, 35);
    /* Gris foncé pour éléments désactivés */

    /* Couleurs de notification */
    --n-success: rgb(97, 219, 85);
    /* Vert clair */
    --n-error: rgb(239, 83, 80);
    /* Rouge lumineux */
    --n-warning: rgb(255, 183, 77);
    /* Orange lumineux */
    --n-info: rgb(52, 173, 201);
    /* Info bleu-cyan lumineux (#34adc9) */

    /* Ombres */
    --n-shadow: rgba(0, 0, 0, 0.6);
    /* 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: rgb(255, 255, 255);
}

.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 InputSection.css
 *
 * @requires Theme.css
 */

/* ─── Conteneur principal ─────────────────────────────────────────────── */
.inputsection {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: var(--n-bg);
}

/* ─── Zone de déplacement (move) ──────────────────────────────────────── */
.inputsection-move {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 0;
    min-width: 32px;
    flex-shrink: 0;
}

.inputsection-btn-move-up,
.inputsection-btn-move-down {
    width: 26px;
    height: 26px;
    padding: 3px;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.18s ease, background 0.18s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inputsection-btn-move-up:hover,
.inputsection-btn-move-down:hover {
    opacity: 1;
    background: var(--n-border);
    transform: scale(1.12);
}

.inputsection-btn-move-up img,
.inputsection-btn-move-down img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* ─── Sous-conteneur principal ────────────────────────────────────────── */
.inputsection-subcontainer {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    border-bottom: 1px solid var(--n-border);
}

/* ─── Header ──────────────────────────────────────────────────────────── */
.inputsection-headercontainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
}

/* ─── Conteneur du titre ──────────────────────────────────────────────── */
.inputsection-titrecontainer {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.inputsection-titre {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--n-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
    cursor: pointer;
    user-select: none;
}

.inputsection-inputtitre {
    flex: 1;
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--n-text);
    background: var(--n-bg);
    border: 1.5px solid var(--n-primary);
    border-radius: 6px;
    padding: 4px 8px;
    outline: none;
    transition: box-shadow 0.18s ease;
    box-shadow: 0 0 0 3px rgba(65, 176, 54, 0.12);
}

.inputsection-inputtitre:focus {
    box-shadow: 0 0 0 3px rgba(65, 176, 54, 0.25);
}

/* ─── Boutons du header ───────────────────────────────────────────────── */
.inputsection-btn-options,
.inputsection-btn-showhide {
    width: 30px;
    height: 30px;
    padding: 4px;
    border-radius: 7px;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.18s ease, background 0.18s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inputsection-btn-options:hover,
.inputsection-btn-showhide:hover {
    opacity: 1;
    background: var(--n-border);
    transform: scale(1.1);
}

.inputsection-btn-options img,
.inputsection-btn-showhide img {
    width: 17px;
    height: 17px;
    object-fit: contain;
}

/* ─── Conteneur des inputs (corps dépliable) ─────────────────────────── */
.inputsection-inputcontainer {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 12px;
    border-radius: 0 0 10px 0;
    background: var(--n-bg);
    animation: inputsection-fadein 0.18s ease;
}

@keyframes inputsection-fadein {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.inputsection-input-date .ninputdatetimeselect-stylecontainer {
    background: transparent;
}

/* ─── Popup options ───────────────────────────────────────────────────── */
.editeurnavbar-child-popup-options {
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px var(--n-shadow);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 180px;
    z-index: 1000;
    animation: inputsection-popup-in 0.15s ease;
}

@keyframes inputsection-popup-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-4px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.inputsection-child-popup-options-button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--n-text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
}

.inputsection-child-popup-options-button:hover {
    background: var(--n-bg-secondary);
    color: var(--n-primary);
}

.inputsection-child-popup-options-button img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    opacity: 0.75;
    flex-shrink: 0;
}

.inputsection-child-popup-options-separator {
    height: 1px;
    background: var(--n-border);
    margin: 4px 6px;
    border-radius: 1px;
}

/*----------
 Bouton jour / today dans les dates 
----------*/
.inputsection-input-today-button-cell {
    padding: 0px;
    padding-left: 10px;
    white-space: nowrap;
    min-width: 40px;
}

.inputsection-input-today-button {
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
}

.inputsection-input-today-button .nbuttoncheck-child-check {
    width: 10px;
    height: 10px;
    padding: 0px;
}
/**
 * @file InputSubSection.css
 *
 * @requires Theme.css
 */

/* ─── Conteneur principal ─────────────────────────────────────────────── */
.inputsubsection {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border: 1px solid var(--n-border);
    border-radius: 8px;
    margin-bottom: 6px;
    position: relative;
}

.inputsubsection::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--n-border);
    border-radius: 0 3px 3px 0;
    opacity: 1;
}

/* ─── Zone de déplacement ─────────────────────────────────────────────── */
.inputsubsection-move {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 3px;
    min-width: 28px;
    flex-shrink: 0;
}

.inputsubsection-btn-move-up,
.inputsubsection-btn-move-down {
    width: 22px;
    height: 22px;
    padding: 2px;
    border-radius: 5px;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.18s ease, background 0.18s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inputsubsection-btn-move-up:hover,
.inputsubsection-btn-move-down:hover {
    opacity: 1;
    background: var(--n-border);
    transform: scale(1.15);
}

.inputsubsection-btn-move-up img,
.inputsubsection-btn-move-down img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

/* ─── Sous-conteneur principal ────────────────────────────────────────── */
.inputsubsection-subcontainer {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* ─── Header ──────────────────────────────────────────────────────────── */
.inputsubsection-headercontainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 0 8px 0 0;
    height: 100%;
}

/* ─── Texte résumé ────────────────────────────────────────────────────── */
.inputsubsection-resume {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--n-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
    font-style: italic;
    transition: color 0.18s ease;
    cursor: pointer;
    user-select: none;
}

.inputsubsection:hover .inputsubsection-resume {
    color: var(--n-text);
}

/* ─── Bouton modifier ─────────────────────────────────────────────────── */
.inputsubsection-btn-modifier {
    width: 28px;
    height: 28px;
    padding: 4px;
    border-radius: 7px;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.18s ease, background 0.18s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inputsubsection-btn-modifier:hover {
    opacity: 1;
    background: var(--n-border);
    transform: scale(1.1);
}

.inputsubsection-btn-modifier img {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

/* ─── Conteneur des inputs ────────────────────────────────────────────── */
.inputsubsection-inputcontainer {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 8px 10px;
    animation: inputsubsection-fadein 0.18s ease;
}

@keyframes inputsubsection-fadein {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Zone d'actions (bas) ────────────────────────────────────────────── */
.inputsubsection-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 10px;
    margin-top: 10px;
}

/* ─── Bouton supprimer ────────────────────────────────────────────────── */
.inputsubsection-btn-supprimer {
    width: 28px;
    height: 28px;
    padding: 4px;
    border-radius: 7px;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.18s ease, background 0.18s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inputsubsection-btn-supprimer:hover {
    opacity: 1;
    background: rgba(229, 57, 53, 0.1);
    transform: scale(1.1);
}

.inputsubsection-btn-supprimer img {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

/* ─── Bouton valider ──────────────────────────────────────────────────── */
.inputsubsection-btn-valider {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 7px;
    border: 1.5px solid var(--n-primary);
    background: transparent;
    color: var(--n-primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
    white-space: nowrap;
}

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

.inputsubsection-btn-valider img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    filter: none;
    transition: filter 0.18s ease;
}

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

/**
 * @file AccueilFrame.css
 * Page d'accueil MamCV — mamcv-accueil.html
 * Palette 100% variables Theme.css
 *
 * @requires Theme.css
 */

/* ═══════════════════════════════════════════════════════════
   CONTENEUR GÉNÉRAL
═══════════════════════════════════════════════════════════ */

.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: 1180px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 1.75rem);
    box-sizing: border-box;
}

/* ─── Eyebrow générique ─── */

.accueilframe-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--n-accent);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.accueilframe-eyebrow::before {
    content: "";
    width: 14px;
    height: 2px;
    background: var(--n-accent);
    display: inline-block;
    flex-shrink: 0;
}

/* Variante CTA final — couleur or */
.accueilframe-eyebrow-gold {
    color: color-mix(in srgb, var(--n-primary) 70%, #fff 30%);
    justify-content: center;
}

.accueilframe-eyebrow-gold::before {
    background: color-mix(in srgb, var(--n-primary) 70%, #fff 30%);
}

/* ─── Titre de section ─── */

.accueilframe-section-title {
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: var(--n-text);
    line-height: 1.1;
    margin: 0 0 0.875rem 0;
    letter-spacing: -0.01em;
}

.accueilframe-section-head {
    max-width: 640px;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.accueilframe-section-head p {
    color: var(--n-text-muted);
    font-size: 0.97rem;
    line-height: 1.55;
    margin: 0.75rem 0 0;
}

.accueilframe-section-more {
    margin-top: 1.5rem;
    text-align: center;
}

/* ─── Boutons ─── */

.accueilframe-btn-primary,
.accueilframe-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.92rem;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    box-sizing: border-box;
}

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

.accueilframe-btn-primary {
    background: var(--n-primary);
    color: var(--n-text-inverse);
    padding: 0.75rem 1.375rem;
    box-shadow: 3px 3px 0 var(--n-accent);
}

.accueilframe-btn-primary:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--n-accent);
    background: var(--n-primary);
    color: var(--n-text-inverse);
    text-decoration: none;
}

.accueilframe-btn-ghost {
    background: transparent;
    color: var(--n-text);
    border: 1px solid var(--n-border);
    padding: 0.625rem 1rem;
}

.accueilframe-btn-ghost:hover {
    background: var(--n-bg-secondary);
    color: var(--n-text);
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════
   1. HERO
═══════════════════════════════════════════════════════════ */

.accueilframe-hero {
    padding: 0;
    position: relative;
    overflow: hidden;
    background: var(--n-bg);
}

.accueilframe-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
    padding: 72px clamp(1rem, 3vw, 1.75rem) 56px;
    max-width: 1180px;
    margin: 0 auto;
    box-sizing: border-box;
}

.accueilframe-hero-title {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 600;
    line-height: 1.05;
    color: var(--n-text);
    margin: 0.875rem 0 1.25rem;
    letter-spacing: -0.01em;
}

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

.accueilframe-hero-lead {
    font-size: 1.05rem;
    color: var(--n-text-muted);
    max-width: 46ch;
    line-height: 1.55;
    margin: 0 0 1.75rem;
}

.accueilframe-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin-bottom: 1.75rem;
}

/* Trust row */
.accueilframe-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--n-border);
    font-size: 0.78rem;
    color: var(--n-text-muted);
}

.accueilframe-trust-row strong {
    font-size: 1.15rem;
    color: var(--n-text);
    display: block;
    font-weight: 700;
}

/* ── CV Stack visuel ── */

.accueilframe-cv-stack {
    position: relative;
    height: 420px;
}

.accueilframe-cv-card {
    position: absolute;
    width: 250px;
    height: 340px;
    background: #fff;
    border: 1px solid var(--n-border);
    border-radius: 6px;
    box-shadow: 0 18px 40px rgba(36, 28, 21, 0.18);
    padding: 20px;
    box-sizing: border-box;
}

.accueilframe-cv-head {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin-bottom: 12px;
    background: color-mix(in srgb, var(--n-primary) 50%, #fff 50%);
}

.accueilframe-cv-bar {
    height: 8px;
    border-radius: 2px;
    background: var(--n-border);
    margin-bottom: 8px;
    width: 80%;
}

.accueilframe-cv-bar:nth-child(2) {
    width: 70%;
}

.accueilframe-cv-bar:nth-child(3) {
    width: 90%;
}

.accueilframe-cv-bar:nth-child(4) {
    width: 60%;
}

/* Cartes positionnées */
.accueilframe-cv-1 {
    top: 10px;
    left: 30px;
    transform: rotate(-7deg);
    z-index: 1;
    animation: accueil-fade-in 0.7s ease both,
        accueil-float-1 6.5s ease-in-out infinite 0.7s;
}

.accueilframe-cv-2 {
    top: 40px;
    left: 150px;
    transform: rotate(5deg);
    z-index: 2;
    animation: accueil-fade-in 0.7s ease 0.15s both,
        accueil-float-2 7.5s ease-in-out infinite 0.85s;
}

.accueilframe-cv-3 {
    top: 100px;
    left: 80px;
    transform: rotate(-1deg);
    z-index: 3;
    background: var(--n-accent);
    animation: accueil-fade-in 0.7s ease 0.3s both,
        accueil-float-3 8.5s ease-in-out infinite 1s;
}

.accueilframe-cv-3 .accueilframe-cv-head {
    background: color-mix(in srgb, var(--n-primary) 70%, #fff 30%);
}

.accueilframe-cv-3 .accueilframe-cv-bar {
    background: rgba(255, 255, 255, 0.14);
}

.accueilframe-cv-3 .accueilframe-cv-bar:nth-child(2) {
    background: color-mix(in srgb, var(--n-primary) 70%, #fff 30%);
}

@keyframes accueil-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes accueil-float-1 {

    0%,
    100% {
        transform: rotate(-7deg) translateY(0);
    }

    50% {
        transform: rotate(-7deg) translateY(-9px);
    }
}

@keyframes accueil-float-2 {

    0%,
    100% {
        transform: rotate(5deg) translateY(0);
    }

    50% {
        transform: rotate(5deg) translateY(-13px);
    }
}

@keyframes accueil-float-3 {

    0%,
    100% {
        transform: rotate(-1deg) translateY(0);
    }

    50% {
        transform: rotate(-1deg) translateY(-7px);
    }
}

/* Badge flottant */
.accueilframe-badge-float {
    position: absolute;
    bottom: 18px;
    right: 10px;
    background: color-mix(in srgb, var(--n-primary) 80%, #fff 20%);
    color: var(--n-text-inverse);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 10px 14px;
    border-radius: 30px;
    box-shadow: 0 8px 18px rgba(36, 28, 21, 0.22);
    z-index: 4;
    animation: accueil-badge-pulse 3.2s ease-in-out infinite 1.4s;
}

@keyframes accueil-badge-pulse {

    0%,
    100% {
        transform: rotate(3deg) scale(1);
    }

    50% {
        transform: rotate(3deg) scale(1.06);
    }
}

/* ═══════════════════════════════════════════════════════════
   3. SECTION EXEMPLES
═══════════════════════════════════════════════════════════ */

.accueilframe-exemples {
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
    background: var(--n-bg);
}

/* Scroll horizontal snapé */
.accueilframe-models-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.accueilframe-models-scroll::-webkit-scrollbar {
    height: 4px;
}

.accueilframe-models-scroll::-webkit-scrollbar-thumb {
    background: var(--n-border);
    border-radius: 2px;
}

.accueilframe-models-scroll .exempleitem-model-card {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   4. SECTION ÉTAPES
═══════════════════════════════════════════════════════════ */

.accueilframe-steps-section {
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
    background: var(--n-bg-secondary);
}

.accueilframe-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.accueilframe-step {
    position: relative;
    padding-top: 2.25rem;
    border-top: 2px solid var(--n-accent);
}

.accueilframe-step-num {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--n-primary);
    line-height: 1;
    display: block;
    margin-bottom: 0.75rem;
}

.accueilframe-step h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--n-text);
    margin: 0 0 0.5rem;
}

.accueilframe-step p {
    font-size: 0.94rem;
    color: var(--n-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   5. SECTION FONCTIONNALITÉS
═══════════════════════════════════════════════════════════ */

.accueilframe-features-section {
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
    background: var(--n-bg);
}

.accueilframe-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--n-border);
    border: 1px solid var(--n-border);
    border-radius: 6px;
    overflow: hidden;
}

.accueilframe-feature {
    background: var(--n-bg);
    padding: 1.75rem 1.5rem;
    transition: background 0.2s ease;
}

.accueilframe-feature:hover {
    background: var(--n-bg-secondary);
}

.accueilframe-feature-ico {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--n-accent);
    color: color-mix(in srgb, var(--n-primary) 70%, #fff 30%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-weight: 700;
    font-size: 1rem;
}

.accueilframe-feature h3 {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--n-text);
    margin: 0 0 0.5rem;
}

.accueilframe-feature p {
    font-size: 0.88rem;
    color: var(--n-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   6. SECTION FAQ
═══════════════════════════════════════════════════════════ */

.accueilframe-faq-section {
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
    background: var(--n-bg-secondary);
}

.accueilframe-faq-item {
    border-bottom: 1px solid var(--n-border);
}

.accueilframe-faq-summary {
    padding: 1.25rem 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--n-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    user-select: none;
}

.accueilframe-faq-summary::-webkit-details-marker {
    display: none;
}

.accueilframe-faq-summary::after {
    content: "+";
    font-size: 1.3rem;
    color: var(--n-primary);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 1rem;
}

.accueilframe-faq-item[open] .accueilframe-faq-summary::after {
    transform: rotate(45deg);
}

.accueilframe-faq-item p {
    color: var(--n-text-muted);
    padding-bottom: 1.25rem;
    line-height: 1.55;
    font-size: 0.94rem;
    margin: 0;
    animation: accueil-faq-reveal 0.35s ease;
}

@keyframes accueil-faq-reveal {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════
   7. CTA FINAL
═══════════════════════════════════════════════════════════ */

.accueilframe-cta-final {
    background: var(--n-accent);
    padding: clamp(3rem, 7vw, 5rem) 0;
    text-align: center;
    position: relative;
}

.accueilframe-cta-final .accueilframe-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.accueilframe-cta-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 600;
    color: var(--n-text-inverse);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.accueilframe-cta-lead {
    color: color-mix(in srgb, var(--n-text-inverse) 75%, transparent);
    max-width: 44ch;
    margin: 0;
    line-height: 1.55;
    font-size: 0.97rem;
}

.accueilframe-cta-final .accueilframe-btn-primary {
    margin-top: 0.5rem;
    box-shadow: 3px 3px 0 color-mix(in srgb, var(--n-primary) 60%, #000 40%);
}

.accueilframe-cta-final .accueilframe-btn-primary:hover {
    box-shadow: 5px 5px 0 color-mix(in srgb, var(--n-primary) 60%, #000 40%);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */

@media (max-width: 880px) {
    .accueilframe-hero-grid {
        grid-template-columns: 1fr;
        padding-top: 48px;
        padding-bottom: 40px;
        gap: 32px;
    }

    .accueilframe-cv-stack {
        height: 280px;
        max-width: 400px;
    }

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

    .accueilframe-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .accueilframe-hero-cta {
        flex-direction: column;
    }

    .accueilframe-btn-primary,
    .accueilframe-btn-ghost {
        width: 100%;
        justify-content: center;
    }

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

    .accueilframe-trust-row {
        gap: 1rem;
    }

    .accueilframe-context-inner {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }
}

/* ─── Réduction de mouvement ─── */

@media (prefers-reduced-motion: reduce) {

    .accueilframe-motif-strip,
    .accueilframe-cv-1,
    .accueilframe-cv-2,
    .accueilframe-cv-3,
    .accueilframe-badge-float {
        animation: none;
    }

    .accueilframe-btn-primary:hover,
    .accueilframe-btn-ghost:hover {
        transform: none;
    }
}
/**
 * @file CguFrame.css
 * Page des CGU MamCV — mamcv-cgu.html
 * Palette 100% variables Theme.css
 *
 * @requires Theme.css
 */

/* ═══════════════════════════════════════════════════════════
   CONTENEUR GÉNÉRAL
═══════════════════════════════════════════════════════════ */

.cguframe {
    width: 100%;
    background: var(--n-bg);
    color: var(--n-text);
    line-height: 1.6;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

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

/* ─── Eyebrow ─── */

.cguframe-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--n-accent);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.cguframe-eyebrow::before {
    content: "";
    width: 14px;
    height: 2px;
    background: var(--n-accent);
    display: inline-block;
    flex-shrink: 0;
}

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

.cguframe-hero {
    padding: 0;
    position: relative;
    background: var(--n-bg);
}

.cguframe-hero-inner {
    padding: 56px clamp(1rem, 3vw, 1.75rem) 22px;
}

.cguframe-hero-title {
    font-size: clamp(1.9rem, 3.4vw, 2.5rem);
    font-weight: 600;
    line-height: 1.1;
    color: var(--n-text);
    margin: 16px 0 10px 0;
    letter-spacing: -0.01em;
}

.cguframe-updated {
    font-size: 0.8rem;
    color: var(--n-text-muted);
}

/* ═══════════════════════════════════════════════════════════
   SOMMAIRE + CONTENU
═══════════════════════════════════════════════════════════ */

.cguframe-legal-section {
    padding: 24px 0 96px;
}

.cguframe-legal-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 56px;
    align-items: start;
}

.cguframe-toc {
    position: sticky;
    top: 96px;
}

.cguframe-toc-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--n-text-muted);
    margin-bottom: 14px;
}

.cguframe-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cguframe-toc-link {
    text-decoration: none;
    font-size: 0.92rem;
    color: var(--n-text-muted);
    padding: 0;
    background: transparent;
    border: none;
}

.cguframe-toc-link:hover {
    color: var(--n-primary);
}

.cguframe-legal-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cguframe-legal-section-item {
    padding-bottom: 16px;
    scroll-margin-top: 96px;
}

.cguframe-section-title {
    font-size: 1.2rem;
    margin-bottom: 12px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--n-text);
}

.cguframe-section-num {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--n-primary);
}

.cguframe-section-body p {
    margin: 0 0 12px 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--n-text-muted);
    max-width: 70ch;
}

.cguframe-highlight-box {
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-left: 3px solid var(--n-primary);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0 0 12px 0;
    max-width: 70ch;
}

.cguframe-highlight-box p {
    margin: 0;
    color: var(--n-text);
    font-size: 0.94rem;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .cguframe-legal-grid {
        grid-template-columns: 1fr;
    }

    .cguframe-toc {
        position: static;
        margin-bottom: 18px;
    }

    .cguframe-toc ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 16px;
    }
}

@media (max-width: 620px) {
    .cguframe-hero-inner {
        padding-top: 42px;
    }
}

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

/**
 * @file ConfidentialiteFrame.css
 * Page de confidentialité MamCV — mamcv-confidentialite.html
 * Palette 100% variables Theme.css
 *
 * @requires Theme.css
 */

/* ═══════════════════════════════════════════════════════════
   CONTENEUR GÉNÉRAL
═══════════════════════════════════════════════════════════ */

.confidentialiteframe {
    width: 100%;
    background: var(--n-bg);
    color: var(--n-text);
    line-height: 1.6;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

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

/* ─── Eyebrow ─── */

.confidentialiteframe-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--n-accent);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.confidentialiteframe-eyebrow::before {
    content: "";
    width: 14px;
    height: 2px;
    background: var(--n-accent);
    display: inline-block;
    flex-shrink: 0;
}

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

.confidentialiteframe-hero {
    padding: 0;
    position: relative;
    background: var(--n-bg);
}

.confidentialiteframe-hero-inner {
    padding: 56px clamp(1rem, 3vw, 1.75rem) 22px;
}

.confidentialiteframe-hero-title {
    font-size: clamp(1.9rem, 3.4vw, 2.5rem);
    font-weight: 600;
    line-height: 1.1;
    color: var(--n-text);
    margin: 16px 0 10px 0;
    letter-spacing: -0.01em;
}

.confidentialiteframe-updated {
    font-size: 0.8rem;
    color: var(--n-text-muted);
}

/* ═══════════════════════════════════════════════════════════
   RÉSUMÉ
═══════════════════════════════════════════════════════════ */

.confidentialiteframe-summary-section {
    padding: 12px 0 20px;
}

.confidentialiteframe-summary-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.confidentialiteframe-summary-card {
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 10px 24px var(--n-shadow);
}

.confidentialiteframe-summary-card.neutral {
    border-left: 3px solid var(--n-error);
}

.confidentialiteframe-summary-ico {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--n-primary), var(--n-accent));
    color: var(--n-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    font-weight: 700;
}

.confidentialiteframe-summary-ico.neutral {
    background: linear-gradient(135deg, var(--n-error), var(--n-accent));
}

.confidentialiteframe-summary-card h3 {
    font-size: 1rem;
    margin: 0 0 8px 0;
    color: var(--n-text);
}

.confidentialiteframe-summary-card p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--n-text-muted);
    line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════
   SOMMAIRE + CONTENU
═══════════════════════════════════════════════════════════ */

.confidentialiteframe-legal-section {
    padding: 24px 0 96px;
}

.confidentialiteframe-legal-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 56px;
    align-items: start;
}

.confidentialiteframe-toc {
    position: sticky;
    top: 96px;
}

.confidentialiteframe-toc-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--n-text-muted);
    margin-bottom: 14px;
}

.confidentialiteframe-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.confidentialiteframe-toc-link {
    text-decoration: none;
    font-size: 0.92rem;
    color: var(--n-text-muted);
    padding: 0;
    background: transparent;
    border: none;
}

.confidentialiteframe-toc-link:hover {
    color: var(--n-primary);
}

.confidentialiteframe-legal-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.confidentialiteframe-legal-section-item {
    padding-bottom: 8px;
    scroll-margin-top: 96px;
}

.confidentialiteframe-section-title {
    font-size: 1.2rem;
    margin-bottom: 12px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--n-text);
}

.confidentialiteframe-section-num {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--n-primary);
}

.confidentialiteframe-section-body p,
.confidentialiteframe-section-body li {
    margin: 0 0 12px 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--n-text-muted);
    max-width: 70ch;
}

.confidentialiteframe-highlight-box {
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-left: 3px solid var(--n-primary);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0 0 12px 0;
    max-width: 70ch;
}

.confidentialiteframe-highlight-box.warn {
    border-left-color: var(--n-warning);
}

.confidentialiteframe-highlight-box p {
    margin: 0;
    color: var(--n-text);
    font-size: 0.94rem;
}

.confidentialiteframe-data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 20px 0;
    max-width: 75ch;
}

.confidentialiteframe-data-table th,
.confidentialiteframe-data-table td {
    text-align: left;
    padding: 10px 14px;
    font-size: 0.88rem;
    border-bottom: 1px solid var(--n-border);
}

.confidentialiteframe-data-table th {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--n-text-muted);
    background: var(--n-bg-secondary);
}

.confidentialiteframe-data-table td {
    color: var(--n-text-muted);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */

@media (max-width: 940px) {
    .confidentialiteframe-summary-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .confidentialiteframe-legal-grid {
        grid-template-columns: 1fr;
    }

    .confidentialiteframe-toc {
        position: static;
        margin-bottom: 18px;
    }

    .confidentialiteframe-toc ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    .confidentialiteframe-data-table {
        display: block;
        overflow-x: auto;
    }
}

@media (max-width: 620px) {
    .confidentialiteframe-hero-inner {
        padding-top: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .confidentialiteframe-motif-strip {
        animation: none;
    }
}
/**
 * @file ContactFrame.css
 * Page de contact MamCV — mamcv-contact.html
 * Palette 100% variables Theme.css
 *
 * @requires Theme.css
 */

/* ═══════════════════════════════════════════════════════════
   CONTENEUR GÉNÉRAL
═══════════════════════════════════════════════════════════ */

.contactframe {
    width: 100%;
    background: var(--n-bg);
    color: var(--n-text);
    line-height: 1.6;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

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

/* ─── Eyebrow ─── */

.contactframe-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--n-accent);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.contactframe-eyebrow::before {
    content: "";
    width: 14px;
    height: 2px;
    background: var(--n-accent);
    display: inline-block;
    flex-shrink: 0;
}

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

.contactframe-hero {
    padding: 0;
    position: relative;
    background: var(--n-bg);
}

.contactframe-hero-inner {
    padding: 56px clamp(1rem, 3vw, 1.75rem) 24px;
}

.contactframe-hero-title {
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    font-weight: 600;
    line-height: 1.08;
    color: var(--n-text);
    margin: 16px 0 14px 0;
    letter-spacing: -0.01em;
}

.contactframe-hero-lead {
    color: var(--n-text-muted);
    max-width: 56ch;
    line-height: 1.55;
    font-size: 1.02rem;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   GRILLE CONTACT
═══════════════════════════════════════════════════════════ */

.contactframe-grid-section {
    padding: 12px 0 84px;
}

.contactframe-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 32px;
    align-items: start;
}

.contactframe-info-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contactframe-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contactframe-card {
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    box-shadow: 0 10px 24px var(--n-shadow);
}

.contactframe-card-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--n-primary), var(--n-accent));
    color: var(--n-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.contactframe-card-body {
    flex: 1;
}

.contactframe-card-body h3 {
    margin: 0 0 6px 0;
    font-size: 1.02rem;
    color: var(--n-text);
}

.contactframe-card-body p {
    margin: 0 0 10px 0;
    font-size: 0.94rem;
    color: var(--n-text-muted);
}

.contactframe-card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.contactframe-hours {
    background: linear-gradient(135deg, var(--n-accent), var(--n-secondary));
    color: var(--n-text-inverse);
    border-radius: 16px;
    padding: 22px;
}

.contactframe-hours h3 {
    margin: 0 0 10px 0;
    color: var(--n-text-inverse);
    font-size: 1rem;
}

.contactframe-hours-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--n-text-inverse) 16%, transparent);
    font-size: 0.9rem;
}

.contactframe-hours-row:last-child {
    border-bottom: none;
}

.contactframe-hours-label {
    color: color-mix(in srgb, var(--n-text-inverse) 82%, transparent);
}

.contactframe-hours-value {
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   FORMULAIRE
═══════════════════════════════════════════════════════════ */

.contactframe-form-card {
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 16px 40px var(--n-shadow);
}

.contactframe-form-card h2 {
    margin: 0 0 8px 0;
    font-size: 1.3rem;
    color: var(--n-text);
}

.contactframe-form-desc {
    margin: 0 0 22px 0;
    color: var(--n-text-muted);
    font-size: 0.95rem;
}

.contactframe-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.contactframe-input-full {
    grid-column: 1 / -1;
}

.contactframe-btn-primary,
.contactframe-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contactframe-btn-primary {
    background: linear-gradient(135deg, var(--n-primary), var(--n-secondary));
    color: var(--n-text-inverse);
    box-shadow: 0 8px 20px var(--n-shadow);
}

.contactframe-btn-primary:hover,
.contactframe-btn-ghost:hover {
    transform: translateY(-2px);
}

.contactframe-btn-ghost {
    background: var(--n-bg);
    color: var(--n-accent);
    border-color: var(--n-border);
}

.contactframe-form-hidden {
    display: none;
}

.contactframe-form-success {
    display: none;
    text-align: center;
    padding: 18px 0 4px;
}

.contactframe-form-success.show {
    display: block;
}

.contactframe-form-check {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--n-primary), var(--n-secondary));
    color: var(--n-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 1.3rem;
}

.contactframe-form-success h3 {
    margin: 0 0 8px 0;
    color: var(--n-text);
}

.contactframe-form-success p {
    margin: 0;
    color: var(--n-text-muted);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .contactframe-grid {
        grid-template-columns: 1fr;
    }

    .contactframe-form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .contactframe-hero-inner {
        padding-top: 42px;
    }

    .contactframe-form-card {
        padding: 22px;
    }

    .contactframe-card {
        padding: 16px;
    }
}

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

    .contactframe-btn-primary,
    .contactframe-btn-ghost {
        transition: none;
    }
}
/**
 * @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 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-editeur {
    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-editeur::before {
    display: none;
}

.menuframe-child-menu-item-editeur img,
.menuframe-child-menu-item-editeur .nbutton-child-icon {
    filter: invert(1);
    opacity: 1;
}

.ntheme-dark .menuframe-child-menu-item-editeur img,
.ntheme-dark .menuframe-child-menu-item-editeur .nbutton-child-icon {
    filter: invert(1);
}

.menuframe-child-menu-item-editeur: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-editeur.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-editeur:hover {
        transform: none;
    }

    .menuframe-child-close:hover img {
        transform: none;
    }
}

@media (max-width: 400px) {
    .menuframe-child-container {
        max-width: 100%;
    }
}

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

/* ── Overlay ────────────────────────────────────────────── */

.downloadbycodeframe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1100;
    animation: downloadbycodeframe-fadeIn 0.28s ease;
    backdrop-filter: blur(4px);
    box-sizing: border-box;
}

@keyframes downloadbycodeframe-fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── Panneau latéral ────────────────────────────────────── */

.downloadbycodeframe-child-container {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: clamp(320px, 85vw, 460px);
    height: 100vh;
    background-color: var(--n-bg);
    box-shadow: -4px 0 24px 0 var(--n-shadow);
    display: flex;
    flex-direction: column;
    animation: downloadbycodeframe-slideIn 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    overflow-y: auto;
}

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

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── En-tête ────────────────────────────────────────────── */

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

.downloadbycodeframe-child-brand {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 2vw, 0.75rem);
    min-width: 0;
}

.downloadbycodeframe-child-icon-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    outline: none;
    transition: transform 0.2s ease;
}

.downloadbycodeframe-child-icon-link:hover {
    transform: scale(1.04);
}

.downloadbycodeframe-child-icon {
    height: clamp(2rem, 6vw, 2.5rem);
    width: auto;
    display: block;
    object-fit: contain;
}

.downloadbycodeframe-child-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

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

.downloadbycodeframe-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 ─────────────────────────────────────────────── */

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

.downloadbycodeframe-child-close img {
    width: clamp(1rem, 3vw, 1.25rem);
    height: clamp(1rem, 3vw, 1.25rem);
    transition: transform 0.25s ease;
}

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

.downloadbycodeframe-child-close:hover {
    background-color: color-mix(in srgb, var(--n-error) 12%, transparent);
}

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

.downloadbycodeframe-child-close:active {
    transform: scale(0.95);
}

/* ── Contenu principal ──────────────────────────────────── */

.downloadbycodeframe-child-div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 1.5rem);
    padding: clamp(1.25rem, 4vw, 2rem);
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Titre h2 ───────────────────────────────────────────── */

.downloadbycodeframe-child-titre {
    font-size: clamp(1.1rem, 3.5vw, 1.35rem);
    font-weight: 700;
    color: var(--n-text);
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* ── Avertissement / description ────────────────────────── */

.downloadbycodeframe-child-warning {
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    line-height: 1.6;
    color: var(--n-text-muted);
    padding: clamp(0.75rem, 2.5vw, 1rem);
    background: var(--n-bg-secondary);
    border-left: 3px solid var(--n-primary);
    border-radius: 0 clamp(0.3rem, 1vw, 0.5rem) clamp(0.3rem, 1vw, 0.5rem) 0;
}

/* ── Champ code ─────────────────────────────────────────── */

.downloadbycodeframe-child-input-code {
    width: 100%;
    box-sizing: border-box;
}

/* ── Bouton télécharger ─────────────────────────────────── */

.downloadbycodeframe-child-btn-telecharger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 1.5vw, 0.625rem);
    padding: clamp(0.75rem, 2.5vw, 1rem) clamp(1rem, 3vw, 1.5rem);
    background-color: var(--n-primary);
    color: var(--n-text-inverse);
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    font-weight: 700;
    border: none;
    border-radius: clamp(0.4rem, 1.2vw, 0.5rem);
    cursor: pointer;
    box-shadow: 0 2px 8px var(--n-shadow);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    box-sizing: border-box;
}

.downloadbycodeframe-child-btn-telecharger .nbutton-child-text {
    color: inherit;
    font: inherit;
}

.downloadbycodeframe-child-btn-telecharger img,
.downloadbycodeframe-child-btn-telecharger .nbutton-child-icon {
    width: clamp(1.1rem, 2.5vw, 1.25rem);
    height: clamp(1.1rem, 2.5vw, 1.25rem);
    filter: invert(1);
    flex-shrink: 0;
    object-fit: contain;
}

.ntheme-dark .downloadbycodeframe-child-btn-telecharger img,
.ntheme-dark .downloadbycodeframe-child-btn-telecharger .nbutton-child-icon {
    filter: invert(1);
}

.downloadbycodeframe-child-btn-telecharger:hover {
    background-color: var(--n-hover);
    box-shadow: 0 4px 16px var(--n-shadow);
    transform: translateY(-1px);
}

.downloadbycodeframe-child-btn-telecharger:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 4px var(--n-shadow);
}

/* ── Mentions légales (CGU + confidentialité) ───────────── */

.downloadbycodeframe-child-cdc {
    font-size: clamp(0.7rem, 1.6vw, 0.78rem);
    line-height: 1.55;
    color: var(--n-text-muted);
    text-align: center;
    padding-top: clamp(0.5rem, 1.5vw, 0.75rem);
    border-top: 1px solid var(--n-border);
}

.downloadbycodeframe-child-cdc a {
    color: var(--n-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.downloadbycodeframe-child-cdc a:hover {
    color: var(--n-hover);
    text-decoration: underline;
}

/* ── Scrollbar ──────────────────────────────────────────── */

.downloadbycodeframe-child-div::-webkit-scrollbar {
    width: 6px;
}

.downloadbycodeframe-child-div::-webkit-scrollbar-track {
    background: transparent;
}

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

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

/* ── Accessibilité ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    .downloadbycodeframe,
    .downloadbycodeframe-child-container {
        animation: none;
    }

    .downloadbycodeframe-child-close img,
    .downloadbycodeframe-child-icon-link,
    .downloadbycodeframe-child-btn-telecharger {
        transition: none;
    }

    .downloadbycodeframe-child-btn-telecharger:hover,
    .downloadbycodeframe-child-btn-telecharger:active {
        transform: none;
    }

    .downloadbycodeframe-child-close:hover img {
        transform: none;
    }
}

@media (max-width: 400px) {
    .downloadbycodeframe-child-container {
        max-width: 100%;
    }
}
/**
 * @file EditeurApercuConteneur.css
 *
 * Conteneur d'apercu pour le modèle.
 *
 * @requires Theme.css  (variables --n-*)
 */

.editeurapercuconteneur-div {
    padding-bottom: 70px;
}

.editeurapercuconteneur-svg {
    width: 90%;
    margin: 20px auto;
    padding: 0px;
    box-shadow: 0px 0px 5px var(--n-shadow);
    border-radius: 5px;
    overflow: hidden;
    max-width: 210mm;
    max-height: 297mm;
}
/**
 * @file EditeurFrame.css
 *
 * @requires Theme.css
 */

.editeurframe {
    width: 100vw;
    height: 100vh;
    position: fixed !important;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 109;
    margin: 0;
}

.editeurframe-conteneur {
    width: 100%;
    height: calc(100% - 60px);
    margin-top: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.editeurframe-conteneur.mode-full {
    grid-template-columns: 1fr;
}

.editeurframe-input-conteneur {
    height: 100%;
    background: var(--n-bg);
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.editeurframe-input-conteneur::-webkit-scrollbar {
    width: 8px;
}

.editeurframe-input-conteneur::-webkit-scrollbar-thumb {
    background: var(--n-border);
    border-radius: 2px;
}

.editeurframe-apercu-conteneur {
    height: 100%;
    background: var(--n-bg-secondary);
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.editeurframe-apercu-conteneur::-webkit-scrollbar {
    width: 8px;
}

.editeurframe-apercu-conteneur::-webkit-scrollbar-thumb {
    background: var(--n-border);
    border-radius: 2px;
}
/**
 * @file EditeurInputConteneur.css
 *
 * Conteneur d'édition des sections et des boutons d'ajout de rubriques.
 *
 * @requires Theme.css  (variables --n-*)
 */

/* ─── Conteneur principal ─────────────────────────────────────────────── */
.editeurinputconteneur {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 10px;
    padding-bottom: 70px;
    gap: 24px;
}

.editeurinputconteneur-btn-apercu {
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 1;
    color: var(--n-text-inverse);
}

.editeurinputconteneur-btn-apercu img {
    filter: invert(1);
}

/* ─── Conteneur des sections actives ─────────────────────────────────── */
.editeurinputconteneur-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* ─── Zone des boutons d'ajout de sections standard ─────────────────── */
.editeurinputconteneur-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
}

/* ─── Titre des rubriques personnalisées ─────────────────────────────── */
.editeurinputconteneur-rubriquepersonnalisee-titre {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--n-text);
    letter-spacing: 0.01em;
    border-bottom: 1px solid var(--n-border);
    user-select: none;
}

/* ─── Zone des boutons de rubriques personnalisées ───────────────────── */
.editeurinputconteneur-rubriquepersonnalisee {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
}

/* ─── Boutons d'ajout (+ Section) ────────────────────────────────────── */
.editeurinputconteneur-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1.5px solid var(--n-border);
    background: var(--n-bg-secondary);
    color: var(--n-text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.15s ease,
        box-shadow 0.18s ease;
    white-space: nowrap;
    user-select: none;
}

.editeurinputconteneur-button:hover {
    background: var(--n-primary);
    border-color: var(--n-primary);
    color: var(--n-text-inverse);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px var(--n-shadow);
}

.editeurinputconteneur-button:active {
    transform: translateY(0);
    box-shadow: none;
    background: var(--n-secondary);
    border-color: var(--n-secondary);
}

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

/* Icône du bouton (+.png) */
.editeurinputconteneur-button img {
    width: 13px;
    height: 13px;
    object-fit: contain;
    opacity: 0.7;
    flex-shrink: 0;
    transition: opacity 0.18s ease, filter 0.18s ease;
}

.editeurinputconteneur-button:hover img {
    opacity: 1;
    filter: brightness(0) invert(1);
}

/* ─── Mode sombre ────────────────────────────────────────────────────── */
.ntheme-dark .editeurinputconteneur-button img {
    filter: brightness(0) invert(0.85);
}

.ntheme-dark .editeurinputconteneur-button:hover img {
    filter: brightness(0) invert(1);
}

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .editeurinputconteneur {
        gap: 18px;
    }

    .editeurinputconteneur-actions,
    .editeurinputconteneur-rubriquepersonnalisee {
        gap: 8px;
    }

    .editeurinputconteneur-button {
        font-size: 0.8rem;
        padding: 5px 10px;
    }
}
/**
 * @file EditeurNavBar.css
 *
 * Barre de navigation de l'éditeur de CV.
 * Fond coloré --n-primary avec éléments en blanc.
 * Hauteur fixe : 60px (correspond à margin-top dans EditeurFrame.css).
 *
 * @requires Theme.css  (variables --n-*)
 */

/* ══════════════════════════════════════════════════════════
   BARRE PRINCIPALE
═══════════════════════════════════════════════════════════ */

.editeurnavbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 110;
    height: 60px;
    background: var(--n-primary);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
}

/* ── Table principale (layout interne) ── */
.editeurnavbar-child-table-main {
    width: 100%;
    height: 100%;
}

.editeurnavbar-child-row-main {
    height: 60px;
}

/* ══════════════════════════════════════════════════════════
   CELLULES
═══════════════════════════════════════════════════════════ */

/* Cellule retour */
.editeurnavbar-child-cell-back {
    min-width: 52px;
    text-align: center;
    vertical-align: middle;
    padding: 0 4px;
}

/* Cellule icône logo */
.editeurnavbar-child-cell-icon {
    min-width: 36px;
    text-align: center;
    vertical-align: middle;
    padding: 0 2px;
}

/* Cellule nom du document — prend tout l'espace restant */
.editeurnavbar-child-cell-nom {
    vertical-align: middle;
    padding: 0 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}

/* Cellule bouton Importer */
.editeurnavbar-child-cell-importerbutton {
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
    padding: 0 2px;
}

/* Cellule bouton Télécharger */
.editeurnavbar-child-cell-telechargerbutton {
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
    padding: 0 2px;
}

/* Cellule bouton menu hamburger */
.editeurnavbar-child-cell-menubutton {
    min-width: 48px;
    text-align: center;
    vertical-align: middle;
    padding: 0 4px;
}

/* ══════════════════════════════════════════════════════════
   ICÔNE LOGO
═══════════════════════════════════════════════════════════ */

.editeurnavbar-child-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* ══════════════════════════════════════════════════════════
   NOM DU DOCUMENT
═══════════════════════════════════════════════════════════ */

.editeurnavbar-child-text-nom {
    color: var(--n-text-inverse);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0.92;
}

/* ══════════════════════════════════════════════════════════
   BOUTON RETOUR
═══════════════════════════════════════════════════════════ */

.editeurnavbar-child-backbutton {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
    padding: 0;
}

.editeurnavbar-child-backbutton:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(-1px);
}

.editeurnavbar-child-backbutton:active {
    background: rgba(255, 255, 255, 0.25);
    transform: translateX(0);
}

.editeurnavbar-child-backbutton img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* ══════════════════════════════════════════════════════════
   BOUTON IMPORTER (icône + texte)
═══════════════════════════════════════════════════════════ */

.editeurnavbar-child-importerbutton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--n-text-inverse);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.editeurnavbar-child-importerbutton:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
}

.editeurnavbar-child-importerbutton img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   BOUTON TÉLÉCHARGER (icône + texte) — Bouton accent
═══════════════════════════════════════════════════════════ */

.editeurnavbar-child-telechargerbutton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    background: var(--n-text-inverse);
    border: none;
    color: var(--n-primary);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

.editeurnavbar-child-telechargerbutton:hover {
    background: color-mix(in srgb, var(--n-text-inverse) 90%, var(--n-primary) 10%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.editeurnavbar-child-telechargerbutton:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.editeurnavbar-child-telechargerbutton img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    /* Recolorie l'icône en vert primaire */
    filter: invert(40%) sepia(80%) saturate(400%) hue-rotate(90deg);
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   BOUTON MENU (hamburger)
═══════════════════════════════════════════════════════════ */

.editeurnavbar-child-menubutton {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    padding: 0;
}

.editeurnavbar-child-menubutton:hover {
    background: rgba(255, 255, 255, 0.15);
}

.editeurnavbar-child-menubutton:active {
    background: rgba(255, 255, 255, 0.25);
}

.editeurnavbar-child-menubutton img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* ══════════════════════════════════════════════════════════
   POPUP MENU
═══════════════════════════════════════════════════════════ */

/* Boutons dans le popup */
.editeurnavbar-child-button-popup {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--n-text);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease;
}

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

.editeurnavbar-child-button-popup:active {
    background: color-mix(in srgb, var(--n-primary) 10%, var(--n-bg) 90%);
}

.editeurnavbar-child-button-popup img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: 0.7;
    flex-shrink: 0;
}

.editeurnavbar-child-button-popup:hover img {
    opacity: 1;
    filter: invert(40%) sepia(80%) saturate(400%) hue-rotate(90deg);
}
/**
 * @file EditeurPopup.css
 *
 *
 * @requires Theme.css  (variables --n-*)
 */

.editeurpopup-titre {
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
    font-weight: bold;
    color: var(--n-primary);
    padding: 5px 0;
    text-align: center;
    line-height: 1.5;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: var(--n-bg);
}
/**
 * @file ModeleBar.css
 *
 * Barre d'outils de personnalisation du CV (modèle, police, taille, etc.)
 * Placée en haut du panneau d'aperçu de l'éditeur.
 * Fond coloré secondaire, boutons icône+texte horizontaux scrollables.
 *
 * @requires Theme.css  (variables --n-*)
 */

/* ══════════════════════════════════════════════════════════
   BARRE PRINCIPALE
═══════════════════════════════════════════════════════════ */

.modelebar {
    position: fixed;
    bottom: 20px;
    right: 10px;
    z-index: 10;
    background: var(--n-primary);
    box-shadow: 0 0px 4px black;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   ZONE SCROLLABLE HORIZONTALE
═══════════════════════════════════════════════════════════ */

.modelebar-child-scroll-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    height: 44px;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
}

.modelebar-child-scroll-main::-webkit-scrollbar {
    display: none;
    /* Chrome / Safari */
}

.modelebar-child-center {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.modelebar-child-left {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--n-primary);
    padding: 0 6px;
}

.modelebar-child-right {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--n-primary);
    padding: 0 6px;
}

/* ══════════════════════════════════════════════════════════
   BOUTON GÉNÉRIQUE (icône + texte optionnel)
═══════════════════════════════════════════════════════════ */

.modelebar-child-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 10px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--n-text-inverse);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.modelebar-child-button:hover {
    background: rgba(255, 255, 255, 0.18);
}

.modelebar-child-button:active {
    background: rgba(255, 255, 255, 0.28);
}

/* Icône dans les boutons */
.modelebar-child-button img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   BOUTON MODÈLE — mis en avant (premier bouton)
═══════════════════════════════════════════════════════════ */

.modelebar-child-btn-modele {
    background: color-mix(in srgb, var(--n-bg), transparent 90%);
    border: 1px solid color-mix(in srgb, var(--n-bg), transparent 50%);
    font-weight: 700;
}

.modelebar-child-btn-modele:hover {
    background: color-mix(in srgb, var(--n-bg), transparent 80%);
}

/* ══════════════════════════════════════════════════════════
   BOUTON MODIFIER — visible en mode ONE_PREVIEW_SCREEN
═══════════════════════════════════════════════════════════ */

.modelebar-child-btn-modifier {
    background: var(--n-text-inverse);
    color: var(--n-secondary);
    border: none;
    font-weight: 700;
}

.modelebar-child-btn-modifier:hover {
    background: color-mix(in srgb, var(--n-text-inverse) 88%, var(--n-secondary) 12%);
}

.modelebar-child-btn-modifier img {
    filter: invert(30%) sepia(60%) saturate(400%) hue-rotate(90deg);
    opacity: 1;
}
/**
 * @file PopupFontSize.css
 *
 * @requires Theme.css  (variables --n-*)
 */

.popupfontsize-button,
.popupfontsize-button-plus,
.popupfontsize-button-moins {
    display: block;
    width: 100%;
    padding: 10px;
    background: transparent;
    color: var(--n-text);
    font-size: 1rem;
}

.popupfontsize-button-plus {
    border-left: 1px solid var(--n-border);
}

.popupfontsize-button-moins {
    border-right: 1px solid var(--n-border);
}

.popupfontsize-button-plus img,
.popupfontsize-button-moins img {
    width: 16px;
    height: 16px;
}

.popupfontsize-button:hover,
.popupfontsize-button-plus:hover,
.popupfontsize-button-moins:hover {
    background: var(--n-bg-secondary);
}

.popupfontsize-button-plus:active,
.popupfontsize-button-moins:active {
    background: var(--n-active);
}

.popupfontsize-button-plus:disabled,
.popupfontsize-button-moins:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.popupfontsize-div {
    display: flex;
    flex-direction: row;
    width: 100%;
    border-top: 2px solid var(--n-border);
}
/**
 * @file PopupInterLigne.css
 *
 * @requires Theme.css  (variables --n-*)
 */

.popupinterligne-button,
.popupinterligne-button-plus,
.popupinterligne-button-moins {
    display: block;
    width: 100%;
    padding: 10px;
    background: transparent;
    color: var(--n-text);
    font-size: 1rem;
}

.popupinterligne-button-plus {
    border-left: 1px solid var(--n-border);
}

.popupinterligne-button-moins {
    border-right: 1px solid var(--n-border);
}

.popupinterligne-button-plus img,
.popupinterligne-button-moins img {
    width: 16px;
    height: 16px;
}

.popupinterligne-button:hover,
.popupinterligne-button-plus:hover,
.popupinterligne-button-moins:hover {
    background: var(--n-bg-secondary);
}

.popupinterligne-button-plus:active,
.popupinterligne-button-moins:active {
    background: var(--n-active);
}

.popupinterligne-button-plus:disabled,
.popupinterligne-button-moins:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.popupinterligne-div {
    display: flex;
    flex-direction: row;
    width: 100%;
    border-top: 2px solid var(--n-border);
}
/**
 * @file PopupModeles.css
 *
 * @requires Theme.css  (variables --n-*)
 */
.popupmodeles-panel {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.popupmodeles-panel>.modeleitem:first-child {
    padding-left: 20px;
}

.popupmodeles-panel>.modeleitem:last-child {
    padding-right: 20px;
}
/**
 * @file PopupPolice.css
 *
 * @requires Theme.css  (variables --n-*)
 */

.popuppolice-button {
    display: block;
    width: 100%;
    padding: 10px;
    background: transparent;
    color: var(--n-text);
    font-size: 1rem;
}

.popuppolice-button:hover {
    background: var(--n-bg-secondary);
}
/**
 * @file InputFormatArea.css
 *
 * Éditeur de texte riche avec barre d'outils et suggestions IA pour l'éditeur.
 *
 * @requires Theme.css  (variables --n-*)
 */

.inputformatarea-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ─── 6. Bouton Suggestions de l'IA ──────────────────────────────── */

.inputformatarea-btn-ai {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--n-border);
    border-radius: 8px;
    background: var(--n-bg);
    color: var(--n-text);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
    white-space: nowrap;
}

.inputformatarea-btn-ai:hover {
    background: var(--n-bg-secondary);
    border-color: var(--n-primary);
    color: var(--n-primary);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px var(--n-shadow);
}

.inputformatarea-btn-ai:active {
    transform: translateY(0);
    box-shadow: none;
}

.inputformatarea-ai-icon {
    color: var(--n-primary);
    flex-shrink: 0;
}
/**
 * @file InputSautDePage.css
 *
 * @requires Theme.css
 */

/* ─── Conteneur principal ─────────────────────────────────────────────── */
.inputsautdepage {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: transparent;
    border: 1px dashed var(--n-border);
    border-radius: 8px;
    margin-bottom: 8px;
    position: relative;
}

/* ─── Zone de déplacement ─────────────────────────────────────────────── */
.inputsautdepage-move {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 3px;
    min-width: 28px;
    flex-shrink: 0;
}

.inputsautdepage-btn-move-up,
.inputsautdepage-btn-move-down {
    width: 22px;
    height: 22px;
    padding: 2px;
    border-radius: 5px;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0.3;
    transition: opacity 0.18s ease, background 0.18s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inputsautdepage-btn-move-up:hover,
.inputsautdepage-btn-move-down:hover {
    opacity: 1;
    background: var(--n-border);
    transform: scale(1.15);
}

.inputsautdepage-btn-move-up img,
.inputsautdepage-btn-move-down img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

/* ─── Sous-conteneur ──────────────────────────────────────────────────── */
.inputsautdepage-subcontainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 8px;
    padding: 8px 10px;
}

/* ─── Titre / label ───────────────────────────────────────────────────── */
.inputsautdepage-titre {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--n-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    transition: color 0.2s ease;
}

.inputsautdepage-titre::before,
.inputsautdepage-titre::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--n-border);
    border-radius: 1px;
    transition: background 0.2s ease;
}

/* ─── Bouton supprimer ────────────────────────────────────────────────── */
.inputsautdepage-btn-supprimer {
    width: 26px;
    height: 26px;
    padding: 4px;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0.4;
    flex-shrink: 0;
    transition: opacity 0.18s ease, background 0.18s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inputsautdepage-btn-supprimer:hover {
    opacity: 1;
    background: rgba(229, 57, 53, 0.1);
    transform: scale(1.1);
}

.inputsautdepage-btn-supprimer img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}
/**
 * @file InputSectionPersonalInfos.css
 *
 * @requires InputSection.css
 * @requires Theme.css
 */

/* ─── Conteneur principal ─────────────────────────────────────────────── */
.inputsectionpersonnalinfos-divpersonnal {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* ─── Bloc photo + infos (flex row) ──────────────────────────────────── */
.inputsectionpersonnalinfos-div {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
}

/* ─── Photo de profil ─────────────────────────────────────────────────── */
.inputsectionpersonnalinfos-image {
    --n-image-height: 125;
    --n-image-width: 125;
}

.inputsectionpersonnalinfos-image .ninputimage-child-optionbutton {
    bottom: 0.2rem;
    right: 0.2rem;
}

/* ─── Conteneur des champs texte (nom, prénom, email) ────────────────── */
.inputsectionpersonnalinfos-infocontainer {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
    min-width: 0;
}

/* ─── Rangée nom + prénom côte à côte ────────────────────────────────── */
.inputsectionpersonnalinfos-row {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.inputsectionpersonnalinfos-row>* {
    flex: 1;
    min-width: 0;
}

/* ─── Zone de boutons "ajouter un champ" ─────────────────────────────── */
.inputsectionpersonnalinfos-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    margin-top: 10px;
}

/* ─── Bouton individuel (ex: "+ Téléphone") ──────────────────────────── */
.inputsectionpersonnalinfos-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1.5px solid var(--n-border);
    background: var(--n-bg-secondary);
    color: var(--n-text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.15s ease,
        box-shadow 0.18s ease;
    white-space: nowrap;
    user-select: none;
}

.inputsectionpersonnalinfos-button:hover {
    background: var(--n-primary);
    border-color: var(--n-primary);
    color: var(--n-text-inverse);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px var(--n-shadow);
}

.inputsectionpersonnalinfos-button:active {
    transform: translateY(0);
    box-shadow: none;
    background: var(--n-secondary);
    border-color: var(--n-secondary);
}

.inputsectionpersonnalinfos-button img {
    width: 13px;
    height: 13px;
    object-fit: contain;
    opacity: 0.7;
    flex-shrink: 0;
    transition: opacity 0.18s ease;
}

.inputsectionpersonnalinfos-button:hover img {
    opacity: 1;
    filter: brightness(0) invert(1);
}

@media (max-width: 480px) {
    .inputsectionpersonnalinfos-div {
        flex-direction: column;
        align-items: center;
    }

    .inputsectionpersonnalinfos-infocontainer {
        width: 100%;
    }
}
/**
 * @file InputSectionSignature.css
 *
 * @requires Theme.css
 */

.inputsectionsignature-image {
    --n-image-height: 125;
    --n-image-width: 125;
    width: 100%;
}
/**
 * @file InputSectionWithSubSections.css
 *
 * @requires InputSection.css
 */

/* ─── Zone de boutons "ajouter un champ" ─────────────────────────────── */
.inputsectionwithsubsections-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
}

/* ─── Bouton individuel (ex: "+ Téléphone") ──────────────────────────── */
.inputsectionwithsubsections-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1.5px solid var(--n-border);
    background: var(--n-bg-secondary);
    color: var(--n-text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.15s ease,
        box-shadow 0.18s ease;
    white-space: nowrap;
    user-select: none;
}

.inputsectionwithsubsections-button:hover {
    background: var(--n-primary);
    border-color: var(--n-primary);
    color: var(--n-text-inverse);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px var(--n-shadow);
}

.inputsectionwithsubsections-button:active {
    transform: translateY(0);
    box-shadow: none;
    background: var(--n-secondary);
    border-color: var(--n-secondary);
}

.inputsectionwithsubsections-button img {
    width: 13px;
    height: 13px;
    object-fit: contain;
    opacity: 0.7;
    flex-shrink: 0;
    transition: opacity 0.18s ease;
}

.inputsectionwithsubsections-button:hover img {
    opacity: 1;
    filter: brightness(0) invert(1);
}

/* ─── 6. Bouton Suggestions de l'IA ──────────────────────────────── */

.inputsectionwithsubsections-btn-ai {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--n-border);
    border-radius: 8px;
    background: var(--n-bg);
    color: var(--n-text);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
    white-space: nowrap;
}

.inputsectionwithsubsections-btn-ai:hover {
    background: var(--n-bg-secondary);
    border-color: var(--n-primary);
    color: var(--n-primary);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px var(--n-shadow);
}

.inputsectionwithsubsections-btn-ai:active {
    transform: translateY(0);
    box-shadow: none;
}

.inputsectionwithsubsections-ai-icon {
    color: var(--n-primary);
    flex-shrink: 0;
}
/**
 * @file InputSubSectionCompetence.css
 *
 * @requires InputSubSection.css
 */

.inputsectioncompetences-div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 15px;
}

@media (max-width: 480px) {
    .inputsectioncompetences-div {
        grid-template-columns: 1fr;
    }
}
/**
 * @file InputSubSectionEntree.css
 *
 * @requires InputSubSection.css
 */

.inputsectionentree-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 15px;
}

@media (max-width: 480px) {
    .inputsectionentree-row {
        grid-template-columns: 1fr;
    }
}
/**
 * @file ExempleFrame.css
 *
 * @requires Theme.css
 */

.exempleframe {
    width: 100%;
    background: var(--n-bg);
    color: var(--n-text);
    line-height: 1.6;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}
/**
 * @file ExempleItem.css
 *
 * @requires Theme.css
 */

.exempleitem-model-card {
    background: var(--n-bg-secondary);
    border: 1px solid var(--n-border);
    border-radius: 10px;
    padding: 18px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    box-sizing: border-box;
    min-width: clamp(200px, 80vw, 300px);
    height: 100%;
}

.exempleitem-model-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 34px var(--n-shadow);
}

.exempleitem-model-card.hidden-by-filter {
    display: none !important;
}

/* Vignette visuelle */
.exempleitem-model-thumb {
    margin-bottom: 16px;
    position: relative;
}

.exempleitem-model-strip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 36px;
    background: var(--n-primary);
}

.exempleitem-model-side {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 34%;
    background: var(--n-secondary);
}

.exempleitem-model-photo {
    position: absolute;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    top: 12px;
    left: 14px;
    background: var(--n-bg-secondary);
}

.exempleitem-model-lines {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 52px;
}

.exempleitem-model-lines-side {
    left: 38%;
    right: 16px;
}

.exempleitem-model-lines-minimal {
    top: 20px;
}

.exempleitem-model-lines div {
    height: 6px;
    border-radius: 2px;
    background: var(--n-border);
    margin-bottom: 9px;
}

.exempleitem-model-lines div:nth-child(1) {
    width: 72%;
}

.exempleitem-model-lines div:nth-child(2) {
    width: 50%;
}

.exempleitem-model-lines div:nth-child(3) {
    width: 84%;
}

.exempleitem-model-lines div:nth-child(4) {
    width: 40%;
}

.exempleitem-model-lines div:nth-child(5) {
    width: 66%;
}

.exempleitem-model-img {
    width: 100%;
    object-fit: contain;
    border-radius: 6px;
}

/* En-tête de carte */
.exempleitem-model-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.exempleitem-model-name {
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--n-text);
}

.exempleitem-model-tag {
    font-family: 'Space Mono', 'Courier New', monospace;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--n-accent);
    background: color-mix(in srgb, var(--n-primary) 15%, transparent);
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.exempleitem-model-desc {
    font-size: 0.86rem;
    color: var(--n-text-muted);
    line-height: 1.45;
    margin: 0 0 16px 0;
    min-height: 2.6em;
}

/* Actions */
.exempleitem-model-actions {
    display: flex;
    gap: 8px;
}

.exempleitem-model-actions .nbutton {
    flex: 1;
}

/* Boutons */
.exempleitem-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 9px 14px;
    border-radius: 4px;
    background: var(--n-primary);
    color: var(--n-text-inverse);
    box-shadow: 3px 3px 0 var(--n-accent);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.exempleitem-btn-primary .nbutton-child-text {
    font: inherit;
    color: inherit;
}

.exempleitem-btn-primary:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--n-accent);
    color: var(--n-text-inverse);
    text-decoration: none;
}

.exempleitem-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 9px 14px;
    border-radius: 4px;
    background: transparent;
    color: var(--n-text);
    border: 1px solid var(--n-border);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
    box-sizing: border-box;
}

.exempleitem-btn-ghost .nbutton-child-text {
    font: inherit;
    color: inherit;
}

.exempleitem-btn-ghost:hover {
    background: var(--n-bg);
    color: var(--n-text);
    text-decoration: none;
}

.exempleitem-btn-sm {
    padding: 9px 14px;
    font-size: 0.82rem;
}

@media (prefers-reduced-motion: reduce) {

    .exempleitem-model-card,
    .exempleitem-btn-primary,
    .exempleitem-chip {
        transition: none;
    }

    .exempleitem-model-card:hover,
    .exempleitem-btn-primary:hover {
        transform: none;
    }
}
/**
 * @file ExempleItemFull.css
 *
 * Styles de la page d'aperçu complet d'un exemple de CV.
 * Layout deux colonnes : image preview à gauche, infos + actions à droite.
 *
 * @requires Theme.css  (variables --n-*)
 */

/* ══════════════════════════════════════════════════════════
   CONTENEUR RACINE
═══════════════════════════════════════════════════════════ */

.exempleitemfull {
    width: 100%;
    padding: 32px 0 64px;
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════
   LAYOUT DEUX COLONNES
═══════════════════════════════════════════════════════════ */

.exempleitemfull-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 28px;
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════
   COLONNE GAUCHE — APERÇU IMAGE
═══════════════════════════════════════════════════════════ */

.exempleitemfull-preview-col {
    position: sticky;
    top: 24px;
}

.exempleitemfull-preview-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--n-border);
    background: var(--n-bg-secondary);
    box-shadow:
        0 4px 12px var(--n-shadow),
        0 20px 48px var(--n-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.3s ease;
}

.exempleitemfull-preview-wrap:hover {
    box-shadow:
        0 8px 24px var(--n-shadow),
        0 32px 64px var(--n-shadow);
}

/* Badge "Aperçu" en haut à gauche */
.exempleitemfull-preview-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: var(--n-primary);
    color: var(--n-text-inverse);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
}

/* Image du CV */
.exempleitemfull-preview-img {
    width: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.4s ease;
}

.exempleitemfull-preview-wrap:hover .exempleitemfull-preview-img {
    transform: scale(1.015);
}

/* ══════════════════════════════════════════════════════════
   COLONNE DROITE — INFORMATIONS
═══════════════════════════════════════════════════════════ */

.exempleitemfull-info-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 8px;
}

/* Badge nom du modèle (eyebrow) */
.exempleitemfull-modele-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--n-secondary);
    padding: 4px 12px;
    border: 1px solid var(--n-border);
    border-radius: 20px;
    background: var(--n-bg-secondary);
    width: fit-content;
}

/* Titre principal */
.exempleitemfull-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--n-text);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
}

/* Badge tag / catégorie */
.exempleitemfull-tag-badge {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--n-primary);
    background: color-mix(in srgb, var(--n-primary) 12%, transparent 88%);
    border: 1px solid color-mix(in srgb, var(--n-primary) 30%, transparent 70%);
    padding: 3px 10px;
    border-radius: 4px;
    width: fit-content;
}

/* Description */
.exempleitemfull-desc {
    color: var(--n-text-muted);
    line-height: 1.65;
    font-size: 0.95rem;
    margin: 0;
}

/* Séparateur */
.exempleitemfull-sep {
    height: 1px;
    background: var(--n-border);
    margin: 4px 0;
}

/* Ligne meta modèle */
.exempleitemfull-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--n-text-muted);
}

.exempleitemfull-meta-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--n-primary);
    flex-shrink: 0;
}

/* Icône document via CSS */
.exempleitemfull-meta-icon::before {
    content: "◈";
    font-size: 1rem;
}

.exempleitemfull-meta-modele {
    font-weight: 500;
    color: var(--n-text);
}

/* ══════════════════════════════════════════════════════════
   ZONE BOUTONS
═══════════════════════════════════════════════════════════ */

.exempleitemfull-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

/* Bouton primaire — Utiliser ce modèle */
.exempleitemfull-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    background: var(--n-primary);
    color: var(--n-text-inverse);
    border: none;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--n-primary) 40%, transparent 60%);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.exempleitemfull-btn-primary:hover {
    background: var(--n-secondary);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--n-primary) 50%, transparent 50%);
}

.exempleitemfull-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--n-primary) 30%, transparent 70%);
}

/* Bouton fantôme — Retour à la liste */
.exempleitemfull-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    color: var(--n-text-muted);
    border: 1px solid var(--n-border);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.exempleitemfull-btn-ghost:hover {
    background: var(--n-bg-secondary);
    color: var(--n-text);
    border-color: color-mix(in srgb, var(--n-primary) 40%, var(--n-border) 60%);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
    .exempleitemfull-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .exempleitemfull-preview-col {
        position: static;
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }

    .exempleitemfull-title {
        font-size: 1.65rem;
    }
}

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

    .exempleitemfull-layout {
        padding: 0 16px;
        gap: 20px;
    }
}
/**
 * @file ExempleTagItem.css
 *
 * @requires Theme.css
 */

.exempletagitem-btn {
    font-size: 0.78rem;
    padding: 8px 16px;
    border-radius: 30px;
    border: 1px solid var(--n-border);
    background: transparent;
    color: var(--n-text-muted);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    outline: none;
    white-space: nowrap;
}

.exempletagitem-btn .nbutton-child-text {
    font: inherit;
    color: inherit;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: nowrap;
    max-width: 200px;
}

.exempletagitem-btn:hover {
    border-color: var(--n-primary);
    color: var(--n-text);
}

.exempletagitem-btn.active {
    background: var(--n-primary);
    border-color: var(--n-primary);
    color: var(--n-text-inverse);
}

.exempletagitem-btn.active .nbutton-child-text {
    color: var(--n-text-inverse);
}

@media (prefers-reduced-motion: reduce) {
    .exempletagitem-btn {
        transition: none;
    }
}
/**
 * @file ExemplesFrame.css
 * Page des modèles & exemples de CV — mamcv-modeles.html
 * Palette 100% variables Theme.css
 *
 * @requires Theme.css
 */

/* ═══════════════════════════════════════════════════════════
   CONTENEUR GÉNÉRAL
═══════════════════════════════════════════════════════════ */

.exemplesframe {
    width: 100%;
    background: var(--n-bg);
    color: var(--n-text);
    line-height: 1.6;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

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

/* ─── Eyebrow ─── */

.exemplesframe-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--n-accent);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.exemplesframe-eyebrow::before {
    content: "";
    width: 14px;
    height: 2px;
    background: var(--n-accent);
    display: inline-block;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   1. HERO PAGE
═══════════════════════════════════════════════════════════ */

.exemplesframe-hero {
    padding: 0;
    position: relative;
    background: var(--n-bg);
}

.exemplesframe-hero-inner {
    padding: 56px clamp(1rem, 3vw, 1.75rem) 40px;
}

.exemplesframe-hero-title {
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    font-weight: 600;
    line-height: 1.08;
    color: var(--n-text);
    margin: 16px 0 14px 0;
    letter-spacing: -0.01em;
}

.exemplesframe-hero-lead {
    color: var(--n-text-muted);
    max-width: 56ch;
    line-height: 1.55;
    font-size: 1.02rem;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   2. BARRE DE FILTRES (STICKY)
═══════════════════════════════════════════════════════════ */

.exemplesframe-filter-bar {
    background: var(--n-bg);
    border-bottom: 1px solid var(--n-border);
    padding: 16px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.exemplesframe-filter-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: end;
}

.accueilframe-panel-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 4px;
    border-radius: 4px;
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: var(--n-border) transparent;
    /* Firefox */
}

/* WebKit browsers (Chrome, Safari) */
.accueilframe-panel-scroll::-webkit-scrollbar {
    width: 8px;
}

.accueilframe-panel-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.accueilframe-panel-scroll::-webkit-scrollbar-thumb {
    background: var(--n-border);
    border-radius: 4px;
}

.accueilframe-panel-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--n-accent);
}

.accueilframe-input-modele {
    min-width: 150px;
}

.accueilframe-searchbar {
    min-width: 200px;
}

/* ═══════════════════════════════════════════════════════════
   3. SECTION GRILLE DE MODÈLES
═══════════════════════════════════════════════════════════ */

.exemplesframe-exemples-section {
    padding: 56px 0 96px;
}

.exemplesframe-exemples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(clamp(200px, 80vw, 300px) + 36px), 1fr));
    gap: 24px;
}

/* État vide (empty state) */
.exemplesframe-empty-state {
    display: none;
    text-align: center;
    padding: 64px 20px;
    color: var(--n-text-muted);
}

.exemplesframe-empty-state.show {
    display: block;
}

.exemplesframe-empty-state h3 {
    font-size: 1.2rem;
    margin: 0 0 8px 0;
    color: var(--n-text);
}

.exemplesframe-empty-state p {
    margin: 0;
    font-size: 0.94rem;
}

/* ═══════════════════════════════════════════════════════════
   4. MODALE D'APERÇU
═══════════════════════════════════════════════════════════ */

.exemplesframe-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.exemplesframe-modal-content {
    background: var(--n-bg);
    border-radius: 12px;
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px;
    position: relative;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    border: 1px solid var(--n-border);
    box-sizing: border-box;
}

.exemplesframe-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    border: none;
    background: transparent;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--n-text-muted);
    padding: 4px 8px;
    line-height: 1;
}

.exemplesframe-modal-close:hover {
    color: var(--n-text);
}

.exemplesframe-modal-title {
    font-size: 1.4rem;
    margin: 0 0 20px 0;
    color: var(--n-text);
}

.exemplesframe-modal-body {
    margin-bottom: 24px;
}

.exemplesframe-modal-body .exemplesframe-model-thumb {
    height: 340px;
}

.exemplesframe-modal-footer {
    display: flex;
    justify-content: flex-end;
}

.exemplesframe-modal-footer .exemplesframe-btn-primary {
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */

@media (max-width: 798px) {
    .exemplesframe-filter-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .exemplesframe-filter-bar {
        top: 57px;
    }
}

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

    .exemplesframe-model-card,
    .exemplesframe-btn-primary {
        transition: none;
    }

    .exemplesframe-model-card:hover,
    .exemplesframe-btn-primary:hover {
        transform: none;
    }
}
/**
 * @file FaqItem.css
 *
 * Styles de l'accordéon FAQ.
 * Supporte texte seul, image seule, vidéo seule, ou image + vidéo.
 *
 * @requires Theme.css  (variables --n-*)
 */

/* ── Conteneur accordéon ── */
.faqitem-faq-item {
    background: var(--n-bg);
    border: 1px solid var(--n-border);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.faqitem-faq-item:hover {
    box-shadow: 0 4px 16px var(--n-shadow);
}

.faqitem-faq-item[open] {
    border-color: color-mix(in srgb, var(--n-primary) 50%, var(--n-border) 50%);
    box-shadow: 0 10px 24px var(--n-shadow);
}

/* ── Ligne de résumé ── */
.faqitem-faq-summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: var(--n-text);
    user-select: none;
    transition: background 0.15s ease;
}

.faqitem-faq-summary::-webkit-details-marker {
    display: none;
}

.faqitem-faq-summary:hover {
    background: var(--n-bg-secondary);
}

/* ── Icône +/− ── */
.faqitem-faq-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--n-bg-secondary);
    color: var(--n-primary);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.2s ease, background 0.15s ease;
}

.faqitem-faq-icon::before {
    content: "+";
}

.faqitem-faq-item[open] .faqitem-faq-icon {
    transform: rotate(45deg);
    background: color-mix(in srgb, var(--n-primary) 15%, var(--n-bg-secondary) 85%);
}

/* ── Texte de la question ── */
.faqitem-faq-question {
    flex: 1;
    line-height: 1.35;
}

/* ── Corps (réponse + media) ── */
.faqitem-faq-body {
    padding: 0 20px 20px;
    animation: faqitem-reveal 0.3s ease;
}

@keyframes faqitem-reveal {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Réponse ── */
.faqitem-faq-answer {
    margin: 0 0 0;
    color: var(--n-text-muted);
    line-height: 1.6;
    font-size: 0.94rem;
}

/* ── Zone média ── */
.faqitem-faq-media {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
}

.faqitem-faq-media--hidden {
    display: none;
}

/* ── Image ── */
.faqitem-faq-image {
    display: block;
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--n-border);
    object-fit: cover;
    background: var(--n-bg-secondary);
}

.faqitem-faq-image--hidden {
    display: none;
}

/* ── Vidéo (iframe 16/9) ── */
.faqitem-faq-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--n-border);
    background: var(--n-accent);
}

.faqitem-faq-video-wrap--hidden {
    display: none;
}

.faqitem-faq-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ── État caché (filtre de recherche) ── */
.faqitem-faq-item-hidden {
    display: none;
}

/* ── Responsive ── */
@media (max-width: 620px) {
    .faqitem-faq-summary {
        padding: 14px 14px;
        font-size: 0.95rem;
    }

    .faqitem-faq-body {
        padding: 0 14px 16px;
    }
}
/**
 * @file FaqsFrame.css
 * Page FAQ MamCV — mamcv-faq.html
 * Palette 100% variables Theme.css
 *
 * @requires Theme.css
 */

/* ═══════════════════════════════════════════════════════════
   CONTENEUR GÉNÉRAL
═══════════════════════════════════════════════════════════ */

.faqsframe {
    width: 100%;
    background: var(--n-bg);
    color: var(--n-text);
    line-height: 1.6;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

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

/* ─── Eyebrow ─── */

.faqsframe-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--n-accent);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.faqsframe-eyebrow::before {
    content: "";
    width: 14px;
    height: 2px;
    background: var(--n-accent);
    display: inline-block;
    flex-shrink: 0;
}

.faqsframe-eyebrow-gold {
    color: color-mix(in srgb, var(--n-primary) 70%, #fff 30%);
}

.faqsframe-eyebrow-gold::before {
    background: color-mix(in srgb, var(--n-primary) 70%, #fff 30%);
}

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

.faqsframe-hero {
    padding: 0;
    position: relative;
    background: var(--n-bg);
}

.faqsframe-hero-inner {
    padding: 56px clamp(1rem, 3vw, 1.75rem) 20px;
}

.faqsframe-hero-title {
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    font-weight: 600;
    line-height: 1.08;
    color: var(--n-text);
    margin: 16px 0 14px 0;
    letter-spacing: -0.01em;
}

.faqsframe-hero-lead {
    color: var(--n-text-muted);
    max-width: 56ch;
    line-height: 1.55;
    font-size: 1.02rem;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   RECHERCHE
═══════════════════════════════════════════════════════════ */

.faqsframe-search-wrap {
    padding: 8px 0 26px;
}

.faqsframe-searchbar {
    width: 100%;
    max-width: 720px;
    display: block;
}

/* ═══════════════════════════════════════════════════════════
   LISTE FAQ
═══════════════════════════════════════════════════════════ */

.faqsframe-faqs-section {
    padding: 12px 0 64px;
}

.faqsframe-faq-list {
    display: grid;
    gap: 14px;
}

/* ═══════════════════════════════════════════════════════════
   ÉTAT VIDE
═══════════════════════════════════════════════════════════ */

.faqsframe-empty-state {
    display: none;
    text-align: center;
    padding: 48px 20px 8px;
    color: var(--n-text-muted);
}

.faqsframe-empty-state.show {
    display: block;
}

.faqsframe-empty-state h3 {
    font-size: 1.12rem;
    margin: 0 0 8px 0;
    color: var(--n-text);
}

.faqsframe-empty-state p {
    margin: 0;
    font-size: 0.94rem;
}

/* ═══════════════════════════════════════════════════════════
   BANDE D'APPEL À L'ACTION
═══════════════════════════════════════════════════════════ */

.faqsframe-contact-band {
    background: linear-gradient(135deg, var(--n-primary), var(--n-accent));
    color: var(--n-text-inverse);
    margin: 6px 0 72px;
    padding: 48px 0;
}

.faqsframe-contact-band .faqsframe-wrap {
    text-align: center;
}

.faqsframe-contact-title {
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
    color: var(--n-text-inverse);
    margin: 0 0 10px 0;
}

.faqsframe-contact-lead {
    margin: 0 auto 22px;
    max-width: 54ch;
    color: color-mix(in srgb, var(--n-text-inverse) 86%, transparent 14%);
}

.faqsframe-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    background: var(--n-bg);
    color: var(--n-accent);
    border: 1px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--n-shadow) 60%, transparent 40%);
}

.faqsframe-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--n-shadow) 72%, transparent 28%);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */

@media (max-width: 798px) {
    .faqsframe-contact-band {
        padding: 40px 0;
    }
}

@media (max-width: 620px) {
    .faqsframe-hero-inner {
        padding-top: 42px;
    }
}

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

    .faqsframe-btn-primary {
        transition: none;
    }
}
/**
 * @file ModeleItem.css
 *
 * @requires Theme.css
 */

.modeleitem {
    min-width: 150px;
    width: 150px;
    padding-bottom: 5px;
}

.modeleitem-model-thumb {
    margin-top: 10px;
    width: 100%;
    min-height: 220px;
    box-shadow: 0 0 4px rgb(100, 100, 100);
    border-radius: 8px;
    position: relative;
}

.modeleitem.selected .modeleitem-model-thumb {
    border: 2px solid var(--n-primary);
    box-shadow: 0 0 4px var(--n-primary);
}

.modeleitem-model-img {
    width: 100%;
    object-fit: contain;
}

.modeleitem-model-price {
    font-size: clamp(0.7rem, 1vw, 0.8rem);
    background-color: color-mix(in srgb, var(--n-bg), transparent 40%);
    color: var(--n-text-muted);
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 2px 6px;
    border-radius: 8px;
}

.modeleitem-model-name {
    text-align: center;
    color: var(--n-text);
    font-size: clamp(0.8rem, 2vw, 1rem);
    font-weight: bold;
    padding: 10px 0;
}
/**
 * @file PaiementFrame.css
 *
 * @requires Theme.css
 */

/* ── Overlay ────────────────────────────────────────────── */

.paiementframe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1100;
    animation: paiementframe-fadeIn 0.28s ease;
    backdrop-filter: blur(4px);

}

@keyframes paiementframe-fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── Panneau latéral ────────────────────────────────────── */

.paiementframe-child-container {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: clamp(320px, 85vw, 460px);
    height: 100vh;
    background-color: var(--n-bg);
    box-shadow: -4px 0 24px 0 var(--n-shadow);
    display: flex;
    flex-direction: column;
    animation: paiementframe-slideIn 0.28s cubic-bezier(0.4, 0, 0.2, 1);

    overflow-y: auto;
}

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

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── En-tête ────────────────────────────────────────────── */

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

.paiementframe-child-brand {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 2vw, 0.75rem);
    min-width: 0;
}

.paiementframe-child-icon-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    outline: none;
    transition: transform 0.2s ease;
}

.paiementframe-child-icon-link:hover {
    transform: scale(1.04);
}

.paiementframe-child-icon {
    height: clamp(2rem, 6vw, 2.5rem);
    width: auto;
    display: block;
    object-fit: contain;
}

.paiementframe-child-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

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

.paiementframe-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 ─────────────────────────────────────────────── */

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

.paiementframe-child-close img {
    width: clamp(1rem, 3vw, 1.25rem);
    height: clamp(1rem, 3vw, 1.25rem);
    transition: transform 0.25s ease;
}

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

.paiementframe-child-close:hover {
    background-color: color-mix(in srgb, var(--n-error) 12%, transparent);
}

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

.paiementframe-child-close:active {
    transform: scale(0.95);
}

/* ── Contenu principal ──────────────────────────────────── */

.paiementframe-child-div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 1.5rem);
    padding: clamp(1.25rem, 4vw, 2rem);
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Titre h2 ───────────────────────────────────────────── */

.paiementframe-child-titre {
    font-size: clamp(1.1rem, 3.5vw, 1.35rem);
    font-weight: 700;
    color: var(--n-text);
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* ── Bloc description (prix + texte) ────────────────────── */

.paiementframe-child-desc {
    display: flex;
    flex-direction: column;
    gap: clamp(0.25rem, 1vw, 0.5rem);
    padding: clamp(0.75rem, 2.5vw, 1rem);
    background: var(--n-bg-secondary);
    border-radius: clamp(0.4rem, 1.2vw, 0.5rem);
    border: 1px solid var(--n-border);
}

/* ── Prix ────────────────────────────────────────────────── */

.paiementframe-child-price {
    font-size: clamp(1.4rem, 4.5vw, 1.8rem);
    font-weight: 800;
    color: var(--n-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* ── Ligne Nom / Prénom ─────────────────────────────────── */

.paiementframe-child-row {
    display: flex;
    gap: clamp(0.5rem, 2vw, 0.75rem);
    width: 100%;

}

/* ── Champs de saisie ───────────────────────────────────── */

.paiementframe-child-input-nom,
.paiementframe-child-input-prenom {
    flex: 1;
    min-width: 0;

}

.paiementframe-child-input-email,
.paiementframe-child-input-phone {
    width: 100%;

}

/* ── Bouton payer ───────────────────────────────────────── */

.paiementframe-child-btn-payer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 1.5vw, 0.625rem);
    padding: clamp(0.75rem, 2.5vw, 1rem) clamp(1rem, 3vw, 1.5rem);
    background-color: var(--n-primary);
    color: var(--n-text-inverse);
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    font-weight: 700;
    border: none;
    border-radius: clamp(0.4rem, 1.2vw, 0.5rem);
    cursor: pointer;
    box-shadow: 0 2px 8px var(--n-shadow);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;

}

.paiementframe-child-btn-payer .nbutton-child-text {
    color: inherit;
    font: inherit;
}

.paiementframe-child-btn-payer img,
.paiementframe-child-btn-payer .nbutton-child-icon {
    width: clamp(1.1rem, 2.5vw, 1.25rem);
    height: clamp(1.1rem, 2.5vw, 1.25rem);
    filter: invert(1);
    flex-shrink: 0;
    object-fit: contain;
}

.ntheme-dark .paiementframe-child-btn-payer img,
.ntheme-dark .paiementframe-child-btn-payer .nbutton-child-icon {
    filter: invert(1);
}

.paiementframe-child-btn-payer:hover {
    background-color: var(--n-hover);
    box-shadow: 0 4px 16px var(--n-shadow);
    transform: translateY(-1px);
}

.paiementframe-child-btn-payer:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 4px var(--n-shadow);
}

/* ── Note (conditions de rétractation) ──────────────────── */

.paiementframe-child-note {
    font-size: clamp(0.7rem, 1.6vw, 0.78rem);
    line-height: 1.55;
    color: var(--n-text-muted);
    text-align: center;
    padding-top: clamp(0.5rem, 1.5vw, 0.75rem);
    border-top: 1px solid var(--n-border);
}

/* ── Scrollbar ──────────────────────────────────────────── */

.paiementframe-child-div::-webkit-scrollbar {
    width: 6px;
}

.paiementframe-child-div::-webkit-scrollbar-track {
    background: transparent;
}

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

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

/* ── Accessibilité ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    .paiementframe,
    .paiementframe-child-container {
        animation: none;
    }

    .paiementframe-child-close img,
    .paiementframe-child-icon-link,
    .paiementframe-child-btn-payer {
        transition: none;
    }

    .paiementframe-child-btn-payer:hover,
    .paiementframe-child-btn-payer:active {
        transform: none;
    }

    .paiementframe-child-close:hover img {
        transform: none;
    }
}

@media (max-width: 400px) {
    .paiementframe-child-container {
        max-width: 100%;
    }

    .paiementframe-child-row {
        flex-direction: column;
    }
}
/**
 * @file PaiementOkFrame.css
 *
 * @requires Theme.css
 */

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

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

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

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

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.paiementokframe-icon {
    font-size: 10rem;
    font-weight: bold;
    color: var(--n-success);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: paiementok-pulse 2s infinite;
}

@keyframes paiementok-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

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

/* ===== Zone de détails de la transaction ===== */
.paiementokframe-body {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    animation: paiementok-slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.paiementokframe-code {
    font-size: 2rem;
    font-weight: bold;
    background-color: white;
    color: black;
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid black;
    text-align: center;
}

.paiementokframe-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
    justify-content: center;
}

.paiementokframe-btn-new-cv,
.paiementokframe-btn-copier-code,
.paiementokframe-btn-telecharger {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    align-items: center;
    background: transparent;
    gap: 8px;
}

.paiementokframe-btn-new-cv {
    background-color: rgb(220, 220, 220);
    color: black;
}

.paiementokframe-btn-copier-code {
    background-color: rgb(220, 220, 220);
    color: black;
}

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

.paiementokframe-btn-telecharger img {
    filter: brightness(0) invert(1);
}

.paiementokframe-btn-new-cv:hover {
    background-color: rgb(230, 230, 230);
    transform: translateY(-2px);
}

.paiementokframe-btn-copier-code:hover {
    background-color: rgb(230, 230, 230);
    transform: translateY(-2px);
}

.paiementokframe-btn-telecharger:hover {
    background-color: var(--n-accent);
    transform: translateY(-2px);
}
/**
 * @file FooterBar.css
 * Footer inspiré de mamcv-accueil.html — grille 4 colonnes
 * Palette : fond sombre vert forêt profond (--n-accent) + accents --n-primary
 *
 * @requires Theme.css
 */

/* ═══════════════════════════════════════════════════════════
   FOOTER — conteneur principal
═══════════════════════════════════════════════════════════ */

.footerbar {
    width: 100%;
    background-color: var(--n-bg);
    color: var(--n-text-muted);
    padding: 0 0 28px;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   GRILLE 4 COLONNES
═══════════════════════════════════════════════════════════ */

.footerbar-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 48px clamp(1rem, 3vw, 2rem) 40px;
    border-bottom: 1px solid color-mix(in srgb, var(--n-text) 10%, transparent);
}

/* ─── Colonne générique ─── */

.footerbar-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ═══════════════════════════════════════════════════════════
   COLONNE 1 — IDENTITÉ
═══════════════════════════════════════════════════════════ */

/* Logo texte "mam" + "cv" (style maquette) */
.footerbar-logo {
    font-weight: 700;
    font-size: 1.55rem;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
    line-height: 1;
}

.footerbar-logo-mam {
    color: var(--n-text);
}

.footerbar-logo-cv {
    color: var(--n-primary);
    /* Vert dynamique du logo (#41b036) */
}

.footerbar-slogan {
    font-size: 0.86rem;
    color: var(--n-text-muted);
    margin: 0 0 0 0;
    max-width: 30ch;
    line-height: 1.5;
}

.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) 60%, transparent) !important;
}

.footerbar-language-selector .ninputelement-child-icon {
    filter: brightness(0) invert(0.6) !important;
}

/* ═══════════════════════════════════════════════════════════
   TITRES DE COLONNES
═══════════════════════════════════════════════════════════ */

.footerbar-col-title {
    font-size: 0.74rem;
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 0.4em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--n-text-muted);
    margin: 0 0 18px 0;
}

/* ═══════════════════════════════════════════════════════════
   LISTES
═══════════════════════════════════════════════════════════ */

.footerbar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footerbar-list li {
    font-size: 0.9rem;
    color: var(--n-text-muted);
    line-height: 1.4;
}

/* ─── Liens navigation & ressources ─── */

.footerbar-nav-link {
    color: var(--n-text-muted);
    text-decoration: none;
    transition: color 0.18s ease;
    display: inline-block;
}

.footerbar-nav-link:hover {
    color: var(--n-primary);
    /* Vert dynamique du logo */
    text-decoration: none;
}

/* ─── Liens contact (tel, mail, WhatsApp) ─── */

.footerbar-contact-link {
    color: var(--n-text-muted);
    text-decoration: none;
    transition: color 0.18s ease;
    display: inline-block;
}

.footerbar-contact-link:hover {
    color: var(--n-primary);
    /* Vert du logo */
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════
   BANDE RÉSEAUX SOCIAUX
═══════════════════════════════════════════════════════════ */

.footerbar-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--n-text) 10%, transparent);
    padding: 22px clamp(1rem, 3vw, 2rem);
    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-muted) 10%, transparent 90%);
    color: var(--n-text-muted);
    transition: background 0.2s ease, transform 0.15s ease;
    text-decoration: none;
}

.footerbar-social-link:hover {
    background: var(--n-primary);
    /* Vert dynamique du logo */
    transform: translateY(-2px);
    color: var(--n-text-muted);
}

.footerbar-social-icon {
    width: 20px;
    height: 20px;
    opacity: 0.85;
    transition: opacity 0.18s ease;
}

.footerbar-social-link:hover .footerbar-social-icon {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   BANDE INFÉRIEURE — copyright + légal
═══════════════════════════════════════════════════════════ */

.footerbar-bottom {
    max-width: 1140px;
    margin: 0 auto;
    padding: 22px clamp(1rem, 3vw, 2rem) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.footerbar-copy {
    font-family: 'Space Mono', 'Courier New', monospace;
    font-size: 0.74rem;
    color: var(--n-text-muted);
}

.footerbar-bottom-legal {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footerbar-legal-link {
    font-family: 'Space Mono', 'Courier New', monospace;
    font-size: 0.74rem;
    color: var(--n-text-muted);
    text-decoration: none;
    transition: color 0.18s ease;
}

.footerbar-legal-link:hover {
    color: var(--n-primary);
    text-decoration: none;
}

.footerbar-legal-sep {
    font-size: 0.74rem;
    color: var(--n-text-muted);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .footerbar {
        padding: 0 0 24px;
    }

    .footerbar-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        padding-top: 40px;
        padding-bottom: 32px;
    }
}

@media (max-width: 540px) {
    .footerbar {
        padding: 0 0 20px;
    }

    .footerbar-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: 32px;
        padding-bottom: 28px;
    }

    .footerbar-logo {
        font-size: 1.35rem;
    }

    .footerbar-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .footerbar-bottom-legal {
        flex-wrap: wrap;
    }
}
/**
 * @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-primary);
    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;
}

/* 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-editeur {
    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-editeur img {
    filter: invert(1) !important;
    /* Force white icon */
}

.navbar-child-menu-button-editeur: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;
    }
}