/**
 * @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: #007bff;
    --n-secondary: #6c757d;
    --n-accent: #ff9800;
    
    /* Couleurs de texte */
    --n-text: #000000;
    --n-text-inverse: #ffffff;
    --n-text-muted: #6c757d;
    
    /* Arrière-plans */
    --n-bg: #ffffff;
    --n-bg-secondary: #f8f9fa;
    
    /* Bordures */
    --n-border: #dee2e6;
    
    /* États */
    --n-hover: #0056b3;
    --n-active: #004080;
    --n-disabled: #e9ecef;
    
    /* Feedback */
    --n-success: #28a745;
    --n-error: #dc3545;
    --n-warning: #ffc107;
    --n-info: #17a2b8;
    
    /* 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 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 {
}

.nframe-animation-send-to-back {
}

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

.nframe-no-float-frame{
    position: static;
    top: 0;
    left: 0;
}
/**
 * @file NTextTag.css
 *
 * @requires NTag.css
 */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ndialogframe-child-table {
}

/* 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;
    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;
    justify-content: center;
    gap: 15px;
    padding: 0 20px 20px 20px;
}

/* Style commun pour les boutons */
.nalertframe-child-yes-button,
.nalertframe-child-no-button {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    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 messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nalertframe-child-message {
}

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

.nalertframe-child-div-buttons {
}

/* Media queries pour la responsivité */
@media (max-width: 480px) {
    .nalertframe-child-div-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .nalertframe-child-yes-button,
    .nalertframe-child-no-button {
        width: 100%;
    }

    .nalertframe-child-message {
        font-size: 1em;
        padding: 15px;
    }
}
/**
 * @file NChooseImageFrame.css
 *
 * @requires NDialogFrameTag.css
 * @requires NTextTag.css
 * @requires NButtonTag.css
 * @requires NTag.css
 */

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

/* Style commun pour tous les boutons */
.nchooseimageframe-child-photo,
.nchooseimageframe-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);
    border: 1px solid var(--n-border);
    min-height: 140px;
}

/* Images des boutons */
.nchooseimageframe-child-photo.nbutton-type-text-icon-top .nbutton-child-icon,
.nchooseimageframe-child-gallery.nbutton-type-text-icon-top .nbutton-child-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 12px;
    filter: var(--n-icon-filter, brightness(0));
}

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

/* Effets hover */
.nchooseimageframe-child-photo:hover,
.nchooseimageframe-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 */
.nchooseimageframe-child-photo.nbutton-type-text-icon-top:hover .nbutton-child-icon,
.nchooseimageframe-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) {
    .nchooseimageframe-child-div-buttons {
        gap: 16px;
        padding: 12px;
    }
}

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

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

.nchooseimageframe-child-div-buttons {
}
/**
 * @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;
    border-bottom: 1px solid var(--n-border);
    background-color: var(--n-bg);
    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 {
}

/* 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 NDataListTag.css
 * @description Styles CSS pour le composant NDataListTag
 * 
 * @requires NPopup.css
 * 
 * @see NDataListTag.js
 * 
 */
/**
 * @file NMainTag.css
 *
 * @requires NTheme.css
 * @requires NTag.css
 * @requires NTextTag.css
 */
 html, body {
    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);
}

.nmaintag-chidld-framecontainer{
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.nmain-progress-description {
    font-size: 1em;
    color: #666;
}
/**
 * @file 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);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

:where(.nbuttoncheck-style-none.nbuttoncheck-type-check-bottom) .nbuttoncheck-child-text {
    order: 1;
}
/**
 * @file NRadioTag.css
 *
 * @requires NEditTag.css
 */
/**
 * @file NSliderTag.css
 *
 * @requires NEditTag.css
 */
/**
 * @file NSpinnerTag.css
 *
 * @requires NTag.css
 */
/**
 * @file NVideoTag.css
 *
 * @requires NTag.css
 */
/**
 * @file NInputAreaTag.css
 * @description Styles CSS pour le composant NInputAreaTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputAreaTag.js
 * 
 */
 :where(.ninputarea) .ninputelement-child-input{
    resize: vertical;
    min-height: 120px;
    height: auto;
 }
/**
 * @file NInputElementTag.css
 * @description Styles CSS pour le composant NInputElementTag
 * 
 * @requires NTag.css
 * @requires NTextTag.css
 * @requires NButtonTag.css
 * @requires NEditTag.css
 * @requires NImageTag.css
 * 
 * @see NInputElementTag.js
 * 
 */
/* Conteneur principal */
.ninputelement {
    --n-input-height: 25;
}

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

/* É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%;
    border-collapse: collapse;
    border-spacing: 0;
}

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

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

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

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

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

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

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

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

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

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

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

/* Bouton d'input */
.ninputelement-child-inputbutton {
    padding: 0.5rem;
    border: none;
    background-color: var(--n-primary);
    color: var(--n-text-inverse);
    border-radius: 4px;
    cursor: pointer;
    height: 100%;
}

.ninputelement-child-inputbutton:hover {
    background-color: var(--n-hover);
}

.ninputelement-child-inputbutton:active {
    background-color: var(--n-active);
}

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

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

.ninputelement-child-deletebutton:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.ninputelement-child-deletebutton:active {
    background-color: var(--n-active);
}

/* Contenu de pied de page */

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

/* Message d'erreur */
.ninputelement-child-error {
    display: block;
    font-size: 80%;
    color: var(--n-error);
}
/**
 * @file NInputCheckTag.css
 * 
 * @requires NInputELementTag.css
 * 
 * @see NInputCheckTag.js
 * 
 */

.ninputcheck-child-checkscontainer{
    text-align: right;
}

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

.ninputcheck-child-checkspanel{
    text-align: left;
}
/**
 * @file NInputFilesTag.css
 * @description Styles CSS pour le composant NInputFilesTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputFilesTag.js
 * 
 */
/**
 * @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;
}

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

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

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

/* Responsive design */
@media screen and (max-width: 480px) {
    .ninputimage-child-imagehint {
        font-size: 80%;
    }
}
/**
 * @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;
}

/* 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é */
.ninputselect.disabled .ninputselect-child-arrowbutton {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
}

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

.ntheme-light {
    --n-primary: #0056b3; /* Bleu foncé pour plus de contraste */
    --n-secondary: #6c757d;
    --n-accent: #ff3b30; /* Rouge vif inspiré du logo */

    --n-text: #000000;
    --n-text-inverse: #ffffff;
    --n-text-muted: #6c757d;

    --n-bg: #ffffff;
    --n-bg-secondary: #f8f9fa;

    --n-border: #dee2e6;

    --n-hover: #007bff;
    --n-active: #004080;
    --n-disabled: #e9ecef;

    --n-success: #28a745;
    --n-error: #dc3545;
    --n-warning: #ff8f26;
    --n-info: #17a2b8;

    --n-shadow: rgba(0, 0, 0, 0.15);
}

.ntheme-dark {
    --n-primary: #90caf9; /* Bleu plus doux pour le mode sombre */
    --n-secondary: #adb5bd;
    --n-accent: #ff3b30; /* Rouge du logo pour rester cohérent */

    --n-text: #ffffff;
    --n-text-inverse: #000000;
    --n-text-muted: #b0bec5;

    --n-bg: #121212; /* Noir profond */
    --n-bg-secondary: #1e1e1e; /* Gris foncé */

    --n-border: #444;

    --n-hover: #64b5f6;
    --n-active: #1976d2;
    --n-disabled: #555;

    --n-success: #66bb6a;
    --n-error: #e57373;
    --n-warning: #ff8f26;
    --n-info: #29b6f6;

    --n-shadow: rgba(255, 255, 255, 0.15);
}
/**
 * @file CtxMain.css
 *
 * @requires Theme.css
 */
 html, body {
    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;
}
/**
 * @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: #007bff;
    --n-secondary: #6c757d;
    --n-accent: #ff9800;
    
    /* Couleurs de texte */
    --n-text: #000000;
    --n-text-inverse: #ffffff;
    --n-text-muted: #6c757d;
    
    /* Arrière-plans */
    --n-bg: #ffffff;
    --n-bg-secondary: #f8f9fa;
    
    /* Bordures */
    --n-border: #dee2e6;
    
    /* États */
    --n-hover: #0056b3;
    --n-active: #004080;
    --n-disabled: #e9ecef;
    
    /* Feedback */
    --n-success: #28a745;
    --n-error: #dc3545;
    --n-warning: #ffc107;
    --n-info: #17a2b8;
    
    /* 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 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 {
}

.nframe-animation-send-to-back {
}

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

.nframe-no-float-frame{
    position: static;
    top: 0;
    left: 0;
}
/**
 * @file NTextTag.css
 *
 * @requires NTag.css
 */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ndialogframe-child-table {
}

/* 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;
    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;
    justify-content: center;
    gap: 15px;
    padding: 0 20px 20px 20px;
}

/* Style commun pour les boutons */
.nalertframe-child-yes-button,
.nalertframe-child-no-button {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    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 messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nalertframe-child-message {
}

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

.nalertframe-child-div-buttons {
}

/* Media queries pour la responsivité */
@media (max-width: 480px) {
    .nalertframe-child-div-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .nalertframe-child-yes-button,
    .nalertframe-child-no-button {
        width: 100%;
    }

    .nalertframe-child-message {
        font-size: 1em;
        padding: 15px;
    }
}
/**
 * @file NChooseImageFrame.css
 *
 * @requires NDialogFrameTag.css
 * @requires NTextTag.css
 * @requires NButtonTag.css
 * @requires NTag.css
 */

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

/* Style commun pour tous les boutons */
.nchooseimageframe-child-photo,
.nchooseimageframe-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);
    border: 1px solid var(--n-border);
    min-height: 140px;
}

/* Images des boutons */
.nchooseimageframe-child-photo.nbutton-type-text-icon-top .nbutton-child-icon,
.nchooseimageframe-child-gallery.nbutton-type-text-icon-top .nbutton-child-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 12px;
    filter: var(--n-icon-filter, brightness(0));
}

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

/* Effets hover */
.nchooseimageframe-child-photo:hover,
.nchooseimageframe-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 */
.nchooseimageframe-child-photo.nbutton-type-text-icon-top:hover .nbutton-child-icon,
.nchooseimageframe-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) {
    .nchooseimageframe-child-div-buttons {
        gap: 16px;
        padding: 12px;
    }
}

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

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

.nchooseimageframe-child-div-buttons {
}
/**
 * @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;
    border-bottom: 1px solid var(--n-border);
    background-color: var(--n-bg);
    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 {
}

/* 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 NDataListTag.css
 * @description Styles CSS pour le composant NDataListTag
 * 
 * @requires NPopup.css
 * 
 * @see NDataListTag.js
 * 
 */
/**
 * @file NMainTag.css
 *
 * @requires NTheme.css
 * @requires NTag.css
 * @requires NTextTag.css
 */
 html, body {
    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);
}

.nmaintag-chidld-framecontainer{
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.nmain-progress-description {
    font-size: 1em;
    color: #666;
}
/**
 * @file 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);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

:where(.nbuttoncheck-style-none.nbuttoncheck-type-check-bottom) .nbuttoncheck-child-text {
    order: 1;
}
/**
 * @file NRadioTag.css
 *
 * @requires NEditTag.css
 */
/**
 * @file NSliderTag.css
 *
 * @requires NEditTag.css
 */
/**
 * @file NSpinnerTag.css
 *
 * @requires NTag.css
 */
/**
 * @file NVideoTag.css
 *
 * @requires NTag.css
 */
/**
 * @file NInputAreaTag.css
 * @description Styles CSS pour le composant NInputAreaTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputAreaTag.js
 * 
 */
 :where(.ninputarea) .ninputelement-child-input{
    resize: vertical;
    min-height: 120px;
    height: auto;
 }
/**
 * @file NInputElementTag.css
 * @description Styles CSS pour le composant NInputElementTag
 * 
 * @requires NTag.css
 * @requires NTextTag.css
 * @requires NButtonTag.css
 * @requires NEditTag.css
 * @requires NImageTag.css
 * 
 * @see NInputElementTag.js
 * 
 */
/* Conteneur principal */
.ninputelement {
    --n-input-height: 25;
}

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

/* É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%;
    border-collapse: collapse;
    border-spacing: 0;
}

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

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

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

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

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

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

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

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

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

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

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

/* Bouton d'input */
.ninputelement-child-inputbutton {
    padding: 0.5rem;
    border: none;
    background-color: var(--n-primary);
    color: var(--n-text-inverse);
    border-radius: 4px;
    cursor: pointer;
    height: 100%;
}

.ninputelement-child-inputbutton:hover {
    background-color: var(--n-hover);
}

.ninputelement-child-inputbutton:active {
    background-color: var(--n-active);
}

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

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

.ninputelement-child-deletebutton:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.ninputelement-child-deletebutton:active {
    background-color: var(--n-active);
}

/* Contenu de pied de page */

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

/* Message d'erreur */
.ninputelement-child-error {
    display: block;
    font-size: 80%;
    color: var(--n-error);
}
/**
 * @file NInputCheckTag.css
 * 
 * @requires NInputELementTag.css
 * 
 * @see NInputCheckTag.js
 * 
 */

.ninputcheck-child-checkscontainer{
    text-align: right;
}

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

.ninputcheck-child-checkspanel{
    text-align: left;
}
/**
 * @file NInputFilesTag.css
 * @description Styles CSS pour le composant NInputFilesTag
 * 
 * @requires NInputElementTag.css
 * 
 * @see NInputFilesTag.js
 * 
 */
/**
 * @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;
}

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

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

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

/* Responsive design */
@media screen and (max-width: 480px) {
    .ninputimage-child-imagehint {
        font-size: 80%;
    }
}
/**
 * @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;
}

/* 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é */
.ninputselect.disabled .ninputselect-child-arrowbutton {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
}

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

.ntheme-light {
    --n-primary: #0056b3; /* Bleu foncé pour plus de contraste */
    --n-secondary: #6c757d;
    --n-accent: #ff3b30; /* Rouge vif inspiré du logo */

    --n-text: #000000;
    --n-text-inverse: #ffffff;
    --n-text-muted: #6c757d;

    --n-bg: #ffffff;
    --n-bg-secondary: #f8f9fa;

    --n-border: #dee2e6;

    --n-hover: #007bff;
    --n-active: #004080;
    --n-disabled: #e9ecef;

    --n-success: #28a745;
    --n-error: #dc3545;
    --n-warning: #ff8f26;
    --n-info: #17a2b8;

    --n-shadow: rgba(0, 0, 0, 0.15);
}

.ntheme-dark {
    --n-primary: #90caf9; /* Bleu plus doux pour le mode sombre */
    --n-secondary: #adb5bd;
    --n-accent: #ff3b30; /* Rouge du logo pour rester cohérent */

    --n-text: #ffffff;
    --n-text-inverse: #000000;
    --n-text-muted: #b0bec5;

    --n-bg: #121212; /* Noir profond */
    --n-bg-secondary: #1e1e1e; /* Gris foncé */

    --n-border: #444;

    --n-hover: #64b5f6;
    --n-active: #1976d2;
    --n-disabled: #555;

    --n-success: #66bb6a;
    --n-error: #e57373;
    --n-warning: #ff8f26;
    --n-info: #29b6f6;

    --n-shadow: rgba(255, 255, 255, 0.15);
}
/**
 * @file CtxMain.css
 *
 * @requires Theme.css
 */
 html, body {
    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;
}

 /**
 * @file AddPubCategoryFrame.css
 * Style moderne pour la page de sélection de catégorie
 *
 * @requires NFrameTag.css
 */

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

 .addpubcategoryframe-child-divparent {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
}

.addpubcategoryframe-child-pagetitle {
    font-size: 2.8em;
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px;
    background: linear-gradient(45deg, var(--n-primary), var(--n-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.addpubcategoryframe-child-question {
    font-size: 1.4em;
    color: var(--n-text-muted);
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.6;
}

/* Panel de sélection des catégories */
.addpubcategoryframe-child-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

/* Boutons d'action */
.addpubcategoryframe-child-actionbuttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding: 20px 0;
}

.addpubcategoryframe-child-backbutton {
    padding: 12px 25px;
    border-radius: 50px;
    background: var(--n-bg);
    color: var(--n-text);
    font-weight: 600;
    text-decoration: none;
    border: 2px solid var(--n-text-muted);
    display: flex;
    align-items: center;
    gap: 10px;
}

.addpubcategoryframe-child-backbutton:hover {
    background: var(--n-text);
    color: var(--n-bg);
    border-color: var(--n-text);
    transform: translateX(-5px);
}

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

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

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

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

/* Responsive Design */
@media screen and (max-width: 768px) {
    .addpubcategoryframe-child-divparent {
        padding: 30px 15px;
    }

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

    .addpubframe-child-question {
        font-size: 1.2em;
        padding: 0 15px;
    }

    .addpubcategoryframe-child-panel {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media screen and (max-width: 480px) {
    .addpubcategoryframe-child-actionbuttons {
        flex-direction: column;
        gap: 15px;
    }

    .addpubcategoryframe-child-pagetitle {
        font-size: 1.8em;
    }
}

/* Loading State */
.addpubcategoryframe-child-loading-skeleton {
    background: linear-gradient(90deg, 
        var(--n-bg-secondary) 0%, 
        var(--n-bg) 50%, 
        var(--n-bg-secondary) 100%);
    background-size: 200% 100%;
}

@keyframes addpubcategoryframe-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
 /**
 * @file AddPubEnginsFrame.css
 * Style moderne pour la page d'ajout de publication
 *
 * @requires NFrameTag.css
 *
 * @see AddPubEnginsFrame.js
 */

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

.addpubenginsframe-child-divparent {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

.addpubenginsframe-child-pagetitle {
    font-size: 2.8em;
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px;
    background: linear-gradient(45deg, var(--n-primary), var(--n-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.addpubenginsframe-child-description {
    font-size: 1.1em;
    line-height: 1.8;
    color: var(--n-text-muted);
    text-align: center;
    margin: 0 auto 40px;
    padding: 20px;
    background: var(--n-bg-secondary);
    border-radius: 12px;
}

/* Container pour l'image et les inputs */
.addpubenginsframe-child-divcontainer {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    margin: 0 auto;
}

/* Style de l'image */
.addpubenginsframe-child-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background-color: var(--n-bg-secondary);
    border-radius: 12px;
}

/* Container des inputs */
.addpubenginsframe-child-divinputs {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: var(--n-bg-secondary);
    border-radius: 12px;
    padding: 20px;
}

/* Style commun pour tous les inputs */
.addpubenginsframe-child-inputnom,
.addpubenginsframe-child-inputprenom,
.addpubenginsframe-child-inputsexe,
.addpubenginsframe-child-inputage {
    width: 100%;
}

/* Boutons d'action */
.addpubenginsframe-child-actionbuttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--n-border);
}

.addpubenginsframe-child-backbutton,
.addpubenginsframe-child-nextbutton {
    padding: 12px 32px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
}

.addpubenginsframe-child-backbutton {
    background: transparent;
    color: var(--n-text);
    border: 2px solid var(--n-border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.addpubenginsframe-child-backbutton:hover {
    background: var(--n-bg-secondary);
    transform: translateX(-5px);
}

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

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

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

@media screen and (max-width: 768px) {
    .addpubenginsframe-child-pagetitle {
        font-size: 2.2em;
    }

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

    .addpubenginsframe-child-divcontainer {
        grid-template-columns: 1fr;
    }

    .addpubenginsframe-child-image {
        display: none; /* Cache l'image sur les petits écrans */
    }

    .addpubenginsframe-child-actionbuttons {
        flex-direction: column-reverse;
        gap: 15px;
    }

    .addpubenginsframe-child-backbutton,
    .addpubenginsframe-child-nextbutton {
        width: 100%;
        text-align: center;
    }
}

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

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

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

@keyframes addpubenginsframe-slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
 /**
 * @file AddPubFrame.css
 * Style moderne pour la page d'ajout de publication
 *
 * @requires NFrameTag.css
 */

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

 .addpubframe-child-divparent {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

.addpubframe-child-pagetitle {
    font-size: 2.8em;
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px;
    background: linear-gradient(45deg, var(--n-text), var(--n-primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.addpubframe-child-question {
    font-size: 1.4em;
    color: var(--n-text-muted);
    text-align: center;
    margin-bottom: 50px;
    line-height: 1.6;
}

.addpubframe-child-divbuttons {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 30px;
}

.addpubframe-child-button {
    width: 240px;
    height: 240px;
    padding: 30px;
    border-radius: 20px;
    background: var(--n-bg);
    border: 2px solid transparent;
    box-shadow: 0 10px 30px var(--n-shadow);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.addpubframe-child-button:hover {
    transform: translateY(-5px);
    border-color: var(--n-primary);
    background: linear-gradient(135deg, var(--n-bg), var(--n-bg-alt));
}

.addpubframe-child-button.nbutton-style-none.nbutton-type-text-icon-top img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.addpubframe-child-button:hover img {
    transform: scale(1.1);
}

.addpubframe-child-button span {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--n-text);
    text-align: center;
}

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

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

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

/* Responsive Design */
@media screen and (max-width: 768px) {
    .addpubframe-child-divbuttons {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .addpubframe-child-button {
        width: 100%;
        max-width: 280px;
        height: 200px;
    }

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

    .addpubframe-child-question {
        font-size: 1.2em;
        padding: 0 20px;
    }
}

@media screen and (max-width: 480px) {
    .addpubframe-child-divparent {
        padding: 20px 15px;
    }

    .addpubframe-child-pagetitle {
        font-size: 1.8em;
    }

    .addpubframe-child-button {
        height: 180px;
    }

    .addpubframe-child-button img {
        width: 60px;
        height: 60px;
    }
}
 /**
 * @file AddPubInfosFrame.css
 * Style moderne pour la page d'ajout de publication
 *
 * @requires NFrameTag.css
 *
 * @see AddPubInfosFrame.js
 */

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

 .addpubinfosframe-child-divparent {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

.addpubinfosframe-child-pagetitle {
    font-size: 2.8em;
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px;
    background: linear-gradient(45deg, var(--n-primary), var(--n-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.addpubinfosframe-child-description {
    font-size: 1.1em;
    line-height: 1.8;
    color: var(--n-text-muted);
    text-align: center;
    margin: 0 auto 40px;
    padding: 20px;
    background: var(--n-bg-secondary);
    border-radius: 12px;
}

.addpubinfosframe-child-divinputs {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 30px;
    margin-bottom: 40px;
    background: var(--n-bg-secondary);
    border-radius: 16px;
    padding: 20px;
}

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

.addpubinfosframe-child-inputimage {
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    --n-image-width: 100%;
}

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

.addpubinfosframe-child-inputlieu,
.addpubinfosframe-child-inputcontact,
.addpubinfosframe-child-inputdate {
    width: 100%;
}

/* Boutons d'action */
.addpubinfosframe-child-actionbuttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--n-border);
}

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

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

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

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

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

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

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

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

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

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

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

    .addpubinfosframe-child-actionbuttons {
        flex-direction: column-reverse;
        gap: 15px;
    }

    .addpubinfosframe-child-backbutton,
    .addpubinfosframe-child-nextbutton {
        width: 100%;
        text-align: center;
    }
}

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

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

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

@keyframes addpubinfosframe-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
/**
 * @file AddPubOkFrame.css
 * Style moderne pour la page de publication effectuée avec succès
 *
 * @requires NFrameTag.css
 */

 .addpubokframe {
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--n-bg), var(--n-bg-secondary));
}

.addpubokframe-child-divparent {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 20px;
    padding-top: 0px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.addpubokframe-child-pagetitle {
    font-size: 2.8em;
    font-weight: 700;
    color: var(--n-text);
    margin-bottom: 20px;
    position: relative;
}

.addpubokframe-child-pagetitle::before {
    content: '✓';
    display: block;
    font-size: 3em;
    color: var(--n-success);
    margin-bottom: 20px;
}

.addpubokframe-child-resume {
    font-size: 1.2em;
    line-height: 1.8;
    color: var(--n-text-muted);
    max-width: 600px;
    padding: 30px;
    background: var(--n-bg);
    border-radius: 16px;
    box-shadow: 0 10px 30px var(--n-shadow);
}

.addpubokframe-child-warningtext{
    margin-top: 25px;
    text-align: left;
}

.addpubokframe-child-divbuttons {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.addpubokframe-child-button {
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
}

.addpubokframe-child-button img {
    width: 24px;
    height: 24px;
}

/* Style pour le bouton "Voir la publication" */
.addpubokframe-child-button-voirpub {
    background: var(--n-primary);
    color: var(--n-text-inverse);
}

.addpubokframe-child-button-voirpub:hover {
    background: var(--n-hover);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px var(--n-shadow);
}

/* Style pour le bouton "Retour" */
.addpubokframe-child-button-ok {
    background: var(--n-bg);
    color: var(--n-text);
    border: 2px solid var(--n-border);
}

.addpubokframe-child-button-ok:hover {
    background: var(--n-bg-secondary);
    transform: translateY(-3px);
}

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

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

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

@keyframes addpubokframe-scaleIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .addpubokframe-child-divparent {
        padding: 40px 20px;
    }

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

    .addpubokframe-child-resume {
        font-size: 1.1em;
        padding: 20px;
    }

    .addpubokframe-child-divbuttons {
        flex-direction: column;
        width: 100%;
        max-width: 400px;
    }

    .addpubokframe-child-button {
        width: 100%;
        justify-content: center;
    }
}

/* Dark Mode Adjustments */
@media (prefers-color-scheme: dark) {
    .addpubokframe-child-resume {
        background: var(--n-bg-secondary);
    }

    .addpubokframe-child-button-ok {
        background: var(--n-bg-secondary);
    }
}

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

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

@keyframes addpubokframe-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
 /**
 * @file AddPubPersonneFrame.css
 * Style moderne pour la page d'ajout de publication
 *
 * @requires NFrameTag.css
 *
 * @see AddPubPersonneFrame.js
 */

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

.addpubpersonneframe-child-divparent {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

.addpubpersonneframe-child-pagetitle {
    font-size: 2.8em;
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px;
    background: linear-gradient(45deg, var(--n-primary), var(--n-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.addpubpersonneframe-child-description {
    font-size: 1.1em;
    line-height: 1.8;
    color: var(--n-text-muted);
    text-align: center;
    margin: 0 auto 40px;
    padding: 20px;
    background: var(--n-bg-secondary);
    border-radius: 12px;
}

/* Container pour l'image et les inputs */
.addpubpersonneframe-child-divcontainer {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    margin: 0 auto;
}

/* Style de l'image */
.addpubpersonneframe-child-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background-color: var(--n-bg-secondary);
    border-radius: 12px;
}

/* Container des inputs */
.addpubpersonneframe-child-divinputs {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: var(--n-bg-secondary);
    border-radius: 12px;
    padding: 20px;
}

/* Style commun pour tous les inputs */
.addpubpersonneframe-child-inputnom,
.addpubpersonneframe-child-inputprenom,
.addpubpersonneframe-child-inputsexe,
.addpubpersonneframe-child-inputage {
    width: 100%;
}

/* Boutons d'action */
.addpubpersonneframe-child-actionbuttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--n-border);
}

.addpubpersonneframe-child-backbutton,
.addpubpersonneframe-child-nextbutton {
    padding: 12px 32px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
}

.addpubpersonneframe-child-backbutton {
    background: transparent;
    color: var(--n-text);
    border: 2px solid var(--n-border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.addpubpersonneframe-child-backbutton:hover {
    background: var(--n-bg-secondary);
    transform: translateX(-5px);
}

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

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

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

@media screen and (max-width: 768px) {
    .addpubpersonneframe-child-pagetitle {
        font-size: 2.2em;
    }

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

    .addpubpersonneframe-child-divcontainer {
        grid-template-columns: 1fr;
    }

    .addpubpersonneframe-child-image {
        display: none; /* Cache l'image sur les petits écrans */
    }

    .addpubpersonneframe-child-actionbuttons {
        flex-direction: column-reverse;
        gap: 15px;
    }

    .addpubpersonneframe-child-backbutton,
    .addpubpersonneframe-child-nextbutton {
        width: 100%;
        text-align: center;
    }
}

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

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

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

@keyframes addpubpersonneframe-slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/**
 * @file ApplicationsFrame.css
 *
 * @requires NFrameTag.css
 */

/* Animations */
@keyframes applicationsframe-fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes applicationsframe-floatButton {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

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

/* Conteneur principal */
.applicationsframe-child-divparent {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  background-color: var(--n-bg);
}

/* En-tête de l'application */
.applicationsframe-child-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--n-border);
  gap: 2rem;
}

/* Partie gauche de l'en-tête (icon + infos) */
.applicationsframe-header-child-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 2;
  min-width: 300px;
}

/* Icône de l'application */
.applicationsframe-headerleft-child-icon {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 22px;
  box-shadow: 0 8px 20px var(--n-shadow);
}

/* Informations de base */
.applicationsframe-headerleft-child-info {
  display: flex;
  flex-direction: column;
}

/* Nom de l'application */
.applicationsframe-info-child-name {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--n-text);
  margin: 0 0 0.3rem 0;
}

/* Développeur */
.applicationsframe-info-child-developer {
  font-size: 1rem;
  color: var(--n-text-muted);
  margin: 0 0 1rem 0;
}

/* Statistiques de l'application */
.applicationsframe-info-child-stats {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* Zone d'évaluation */
.applicationsframe-stats-child-rating {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Étoiles */
.applicationsframe-rating-child-star {
  color: var(--n-accent);
  font-size: 1.1rem;
}

/* Nombre d'évaluations */
.applicationsframe-stats-child-ratingcount {
  font-size: 0.9rem;
  color: var(--n-text-muted);
  margin-left: 0.5rem;
}

/* Nombre de téléchargements */
.applicationsframe-stats-child-downloads {
  font-size: 0.9rem;
  color: var(--n-text);
  margin: 0.2rem 0 0 0;
}

/* Partie droite de l'en-tête (boutons) */
.applicationsframe-header-child-right {
  flex: 1;
  min-width: 280px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Conteneur des boutons de téléchargement */
.applicationsframe-headerright-child-downloadbuttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 280px;
}

/* Style commun pour les boutons de téléchargement */
.applicationsframe-downloadbuttons-child-appstore,
.applicationsframe-downloadbuttons-child-playstore,
.applicationsframe-ctabuttons-child-appstore,
.applicationsframe-ctabuttons-child-playstore {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.2rem;
  border-radius: 20px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px var(--n-shadow);
}

/* Bouton App Store */
.applicationsframe-downloadbuttons-child-appstore,
.applicationsframe-ctabuttons-child-appstore {
  background-color: #000000;
  color: white;
}

/* Bouton Google Play */
.applicationsframe-downloadbuttons-child-playstore,
.applicationsframe-ctabuttons-child-playstore {
  background-color: var(--n-primary);
  color: white;
}

/* Effet de survol pour les boutons */
.applicationsframe-downloadbuttons-child-appstore:hover,
.applicationsframe-downloadbuttons-child-playstore:hover,
.applicationsframe-ctabuttons-child-appstore:hover,
.applicationsframe-ctabuttons-child-playstore:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px var(--n-shadow);
}

/* Section des captures d'écran */
.applicationsframe-child-screenshots {
  margin-bottom: 4rem;
}

/* Titre de la section */
.applicationsframe-screenshots-child-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--n-text);
  margin-bottom: 1.5rem;
  position: relative;
}

.applicationsframe-screenshots-child-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 60px;
  height: 4px;
  background: var(--n-primary);
  border-radius: 2px;
}

/* Carrousel de captures d'écran */
.applicationsframe-screenshots-child-carousel {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 1rem 0;
  scrollbar-width: thin;
}

.applicationsframe-screenshots-child-carousel::-webkit-scrollbar {
  height: 6px;
}

.applicationsframe-screenshots-child-carousel::-webkit-scrollbar-track {
  background: var(--n-bg-secondary);
  border-radius: 10px;
}

.applicationsframe-screenshots-child-carousel::-webkit-scrollbar-thumb {
  background-color: var(--n-secondary);
  border-radius: 10px;
}

/* Élément du carrousel */
.applicationsframe-carousel-child-item {
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px var(--n-shadow);
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.applicationsframe-carousel-child-item:hover {
  transform: scale(1.02);
}

/* Image du carrousel */
.applicationsframe-item-child-image {
  height: 500px;
  width: auto;
  display: block;
}

/* Section description */
.applicationsframe-child-description {
  margin-bottom: 4rem;
}

.applicationsframe-description-child-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--n-text);
  margin-bottom: 1.5rem;
  position: relative;
}

.applicationsframe-description-child-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 60px;
  height: 4px;
  background: var(--n-primary);
  border-radius: 2px;
}

.applicationsframe-description-child-text {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--n-text);
}

.applicationsframe-description-child-text p {
  margin-bottom: 1rem;
}

/* Section fonctionnalités */
.applicationsframe-child-features {
  margin-bottom: 4rem;
}

.applicationsframe-features-child-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--n-text);
  margin-bottom: 1.5rem;
  position: relative;
}

.applicationsframe-features-child-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 60px;
  height: 4px;
  background: var(--n-primary);
  border-radius: 2px;
}

/* Liste des fonctionnalités */
.applicationsframe-features-child-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

/* Élément de fonctionnalité */
.applicationsframe-list-child-item {
  display: flex;
  gap: 1rem;
  background-color: var(--n-bg);
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px var(--n-shadow);
}

.applicationsframe-list-child-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px var(--n-shadow);
}

/* Icône de fonctionnalité */
.applicationsframe-item-child-icon {
  font-size: 2rem;
  color: var(--n-primary);
  margin-top: 0.2rem;
}

/* Contenu de fonctionnalité */
.applicationsframe-item-child-content {
  flex: 1;
}

/* Titre de fonctionnalité */
.applicationsframe-content-child-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--n-text);
  margin: 0 0 0.5rem 0;
}

/* Description de fonctionnalité */
.applicationsframe-content-child-description {
  font-size: 1rem;
  color: var(--n-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Section témoignages */
.applicationsframe-child-testimonials {
  margin-bottom: 4rem;
}

.applicationsframe-testimonials-child-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--n-text);
  margin-bottom: 1.5rem;
  position: relative;
}

.applicationsframe-testimonials-child-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 60px;
  height: 4px;
  background: var(--n-primary);
  border-radius: 2px;
}

/* Liste des témoignages */
.applicationsframe-testimonials-child-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

/* Témoignage individuel */
.applicationsframe-list-child-testimonial {
  background-color: var(--n-bg);
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px var(--n-shadow);
}

.applicationsframe-list-child-testimonial:hover {
  transform: translateY(-5px);
}

/* Étoiles dans les témoignages */
.applicationsframe-testimonial-child-rating {
  margin-bottom: 1rem;
}

.applicationsframe-testimonial-child-rating .applicationsframe-rating-child-star {
  color: var(--n-accent);
  font-size: 1rem;
}

/* Texte du témoignage */
.applicationsframe-testimonial-child-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--n-text);
  margin: 0 0 1rem 0;
  font-style: italic;
}

/* Nom de l'auteur */
.applicationsframe-testimonial-child-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--n-text);
  text-align: right;
  margin: 0;
}

/* Section CTA */
.applicationsframe-child-cta {
  text-align: center;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, var(--n-primary) 0%, var(--n-active) 100%);
  color: white;
  border-radius: 0 0 10px 10px;
}

.applicationsframe-cta-child-text {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 2rem 0;
  color: white;
}

/* Boutons CTA */
.applicationsframe-cta-child-buttons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.applicationsframe-ctabuttons-child-appstore,
.applicationsframe-ctabuttons-child-playstore {
  min-width: 220px;
}

.applicationsframe-ctabuttons-child-playstore {
}

/* Responsive design */
@media (max-width: 768px) {
    .applicationsframe-child-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .applicationsframe-header-child-right {
        width: 100%;
        justify-content: flex-start;
    }
    
    .applicationsframe-headerright-child-downloadbuttons {
        flex-direction: row;
        max-width: none;
    }
    
    .applicationsframe-item-child-image {
        height: 400px;
    }
    
    .applicationsframe-features-child-list,
    .applicationsframe-testimonials-child-list {
        grid-template-columns: 1;
    }
}
/**
 * @file BoutiqueFrame.css
 *
 * @requires NFrameTag.css
 */

/* Animations */
@keyframes boutiqueframe-fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes boutiqueframe-slideIn {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.boutiqueframe{
    width: 100vw;
    min-height: 100vh;
    background-color: var(--n-bg);
}

/* Conteneur parent des éléments */
.boutiqueframe-child-divparent {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
}

/* En-tête de la boutique */
.boutiqueframe-child-header {
  margin-bottom: 3rem;
  text-align: center;
}

/* Titre de la page */
.boutiqueframe-child-pagetitle {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--n-text);
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.boutiqueframe-child-pagetitle::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--n-primary), var(--n-accent));
  border-radius: 2px;
}

/* Description de la page */
.boutiqueframe-child-pagedesc {
  max-width: 800px;
  margin: 2rem auto 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--n-text-muted);
}

/* Grille des produits */
.boutiqueframe-child-panelboutique {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}

/* Responsive design */
@media (max-width: 768px) {
  .boutiqueframe-child-divparent {
    padding: 1.5rem;
  }
  
  .boutiqueframe-child-pagetitle {
    font-size: 2rem;
  }
  
  .boutiqueframe-child-pagedesc {
    font-size: 1rem;
  }
  
  .boutiqueframe-child-panelboutique {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .boutiqueframe-child-divparent {
    padding: 1rem;
  }
  
  .boutiqueframe-child-pagetitle {
    font-size: 1.8rem;
  }
  
  .boutiqueframe-child-panelboutique {
    grid-template-columns: 1fr;
  }
}
/**
 * @file BoutiqueItem.css
 *
 * @requires NItemTag.css
 */

 /* Style principal de la cellule */
 .boutiqueitem {
    flex: 0 1 300px;
    max-width: 300px;
    width: calc(100% - 60px);
    padding: 30px;
    background: var(--n-bg);
    border-radius: 20px;
    margin: auto;
    height: calc(100% - 60px);
    box-shadow: 0 10px 30px var(--n-shadow);
    text-align: center;
}

.boutiqueitem:hover {
    transform: translateY(-10px);
}

.boutiqueitem-child-image {
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;
    border-radius: 15px;
    object-fit: contain;
    display: block;
    background-color: var(--n-bg-secondary);
}

.boutiqueitem-child-nom {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: var(--n-text);
}

.boutiqueitem-child-prix {
    font-size: 1.2em;
    color: var(--n-primary);
    font-weight: bold;
    margin-bottom: 15px;
}

.boutiqueitem-child-details {
    color: var(--n-text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}

.boutiqueitem-child-commande {
    display: inline-block;
    width: calc(100% - 60px);
    padding: 12px 20px;
    background: var(--n-primary);
    color: white;
    text-align: center;
    border-radius: 10px;
    font-weight: 500;
    text-decoration: none;
}

.boutiqueitem-child-commande:hover {
    background: var(--n-accent);
}

/* Animation au chargement */
@keyframes boutiqueitem-fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.boutiqueitem {
}
/**
 * @file ContacteItem.css
 *
 * @requires NItemTag.css
 */
.contacteitem {
    margin-top: 5px;
}

.contacteitem-child-lien {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 2px;
    color: var(--n-bg);
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Effet au survol */
.contacteitem-child-lien:hover {
    text-decoration: underline;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px var(--n-shadow);
}

/* Style de l'icône */
.contacteitem-child-lien img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    opacity: 0.8;
    border-radius: 500px;
}

/* Animation au chargement */
@keyframes contacteitem-fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.contacteitem {
}

/* Media Queries */
@media (max-width: 768px) {
    .contacteitem-child-lien {
        padding: 6px 12px;
        font-size: 0.85em;
    }
    
    .contacteitem-child-lien img {
        width: 14px;
        height: 14px;
    }
}
/**
 * @file ContacteReseauItem.css
 *
 * @requires NItemTag.css
 */
 .contactereseauitem {
    display: inline-block;
}

.contactereseauitem-child-lien {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.9rem;
    position: relative;
    box-shadow: 0 1px 4px var(--n-shadow);
}

/* Effet de survol */
.contactereseauitem-child-lien:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.3);
}

/* Style de l'icône */
.contactereseauitem-child-lien img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* Animation au chargement */
@keyframes contactereseauitem-scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.contactereseauitem {
}
/**
 * @file FaqFrame.css
 *
 * @requires NFrameTag.css
 */

.faqframe{
    width: 100vw;
    min-height: 100vh;
    background-color: var(--n-bg);
}
/**
 * @file FaqItem.css
 *
 * @requires NItemTag.css
 */
.faqitem {
    margin-bottom: 10px;
}

.faqitem-child-lien {
    display: inline-block;
    color: var(--n-bg);
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.4;
    padding: 4px 0;
}

.faqitem-child-lien:hover {
    text-decoration: underline;
}
/**
 * @file FaqItem1.css
 *
 * @requires NItemTag.css
 */

 .faqitem1 {
    margin-bottom: 20px;
 }

/* Lien principal cliquable */
.faqitem1-child-lien {
    width: 100%;
    display: block;
    text-decoration: none;
}

/* Table stylisée */
.faqitem1-child-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--n-bg);
    box-shadow: 0px 4px 10px var(--n-shadow);
    border-radius: 8px;
    overflow: hidden;
    display: table;
}

/* Ligne de la table */
.faqitem1-child-table tr {
    display: table-row;
    vertical-align: middle;
}

/* Cellules */
.faqitem1-child-td-image, .faqitem1-child-td-text {
    padding: 15px;
    vertical-align: middle;
}

/* Cellule de l'image */
.faqitem1-child-td-image {
    min-width: 80px; /* Fixe une largeur pour que l'image et le texte restent alignés */
    width: 80px; /* Fixe une largeur pour que l'image et le texte restent alignés */
    text-align: center;
}

/* Image */
.faqitem1-child-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--n-bg-secondary);
}

/* Cellule du texte */
.faqitem1-child-td-text {
    width: 100%;
}

/* Texte */
.faqitem1-child-text {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

/* Effet au survol */
.faqitem1-child-lien:hover .faqitem1-child-image {
    border-color: var(--n-success);
    transform: rotate(5deg) scale(1.1);
}

.faqitem1-child-lien:hover .faqitem1-child-text {
    color: var(--n-success);
}

/* Effet d'élévation au survol */
.faqitem1-child-lien:hover .faqitem1-child-table {
    transform: translateY(-5px);
    box-shadow: 0px 8px 20px var(--n-shadow);
}

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

 .faqitemfull {
    max-width: 1200px;
    margin: 10px auto;
    padding: 20px;
    padding-top: 5px;
    margin-top: 10px;
}

/* Question */
.faqitemfull-question {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--n-text);
    margin-bottom: 50px;
    min-width: 300px;
    position: relative;
    text-align: left;
}

.faqitemfull-question::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--n-primary), var(--n-accent));
    border-radius: 2px;
  }

/* Contenu Image + Réponse */
.faqitemfull-content {
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de s'ajuster quand l'écran est petit */
    justify-content: center;
    margin-bottom: 20px;
}

/* Image Illustrative */
.faqitemfull-image-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    flex: 1 1 100%; /* Image prend 100% de la largeur sur petits écrans */
}

.faqitemfull-image {
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.faqitemfull-image:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* Réponse */
.faqitemfull-answer {
    font-size: 18px;
    color: var(--n-text-secondary);
    line-height: 1.6;
    text-align: justify;
    padding: 0 10px;
    flex: 1 1 100%; /* Réponse prend 100% de la largeur sur petits écrans */
}

/* Bouton Retour */
.faqitemfull-back-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--n-bg);
    background: var(--n-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
}

.faqitemfull-back-btn:hover {
    background: var(--n-accent);
    transform: scale(1.05);
}

.faqitemfull-back-btn:active {
    transform: scale(0.95);
}

/* Mise en page responsive : pour les grands écrans */
@media (min-width: 768px) {
    .faqitemfull-content {
        flex-direction: row; /* Les éléments sont côte à côte */
        justify-content: space-between;
    }

    /* L'image prend 45% de la largeur */
    .faqitemfull-image-container {
        flex: 1 1 45%;
    }

    /* La réponse prend 50% de la largeur */
    .faqitemfull-answer {
        flex: 1 1 50%;
    }
}

/* Sur petits écrans, les éléments sont empilés */
@media (max-width: 767px) {
    .faqitemfull-content {
        flex-direction: column; /* Empile les éléments */
    }

    .faqitemfull-image-container {
        margin-bottom: 20px;
    }

    .faqitemfull-answer {
        margin-top: 15px; /* Espacement entre la réponse et l'image */
    }

    .faqitemfull-question{
        font-size: 1.8rem;
    }
}

/**
 * @file FaqsFrame.css
 *
 * @requires NFrameTag.css
 */

/* Animation d'apparition */
@keyframes faqsframe-fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.faqsframe{
  width: 100vw;
  min-height: 100vh;
  background-color: var(--n-bg);
}

/* Conteneur principal */
.faqsframe-child-divparent {
    background-color: var(--n-bg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* En-tête de la FAQ */
.faqsframe-child-header {
    max-width: 800px;
    text-align: center;
    margin-bottom: 2rem;
}

/* Titre de la page */
.faqsframe-child-pagetitle {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--n-text);
    position: relative;
    margin-bottom: 1rem;
}

.faqsframe-child-pagetitle::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--n-primary), var(--n-accent));
    border-radius: 2px;
}

/* Responsive */
@media (max-width: 768px) {
    .faqsframe-child-pagetitle {
        font-size: 2rem;
    }

    .faqsframe-child-header {
        max-width: 90%;
    }
}
/**
 * @file FooterBar.css
 *
 * @requires Theme.css
 */
/* Style principal du footer */
.footerbar {
    background: linear-gradient(to right, #2c3e50, #3498db);
    color: #ffffff;
    padding: 3rem 2rem 2rem;
    font-family: system-ui, -apple-system, sans-serif;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    position: relative;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* Sections du footer */
.footer-section {
    padding: 0 1rem;
}

.footer-section h3 {
    color: #ffffff;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.footer-section h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background-color: #3498db;
}

/* Section Contact */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-link {
    color: #ffffff;
    text-decoration: none;
    display: inline-block;
}

.footer-link:hover {
    color: #3498db;
}

/* Réseaux sociaux */
.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ffffff;
    font-size: 0.9rem;
    position: relative;
}

/* Utilisation de pseudo-elements pour les icônes */
.social-facebook::before {
    content: 'fb';
}

.social-twitter::before {
    content: 'tw';
}

.social-linkedin::before {
    content: 'in';
}

.social-instagram::before {
    content: 'ig';
}

.social-link:hover {
    background: #3498db;
    transform: translateY(-3px);
}

/* Section FAQ */
.faq-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.faq-list li {
    margin-bottom: 1rem;
}

.faq-question {
    color: #ffffff;
    text-decoration: none;
    display: block;
    padding: 0.5rem 0;
}

.faq-question:hover {
    color: #3498db;
}

.see-more-link {
    display: inline-block;
    color: #3498db;
    text-decoration: none;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    border: 1px solid #3498db;
    border-radius: 20px;
}

.see-more-link:hover {
    background: #3498db;
    color: #ffffff;
}

/* Section légale */
.legal-section {
    text-align: left;
}

.copyright {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.legal-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.legal-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9rem;
    position: relative;
    padding-left: 1.2rem;
}

.legal-link::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #3498db;
}

.legal-link:hover {
    color: #3498db;
}

.language-selector {
    width: 150px;
}

/* Responsive Design */
@media (max-width: 968px) {
    .footerbar {
        grid-template-columns: repeat(2, 1fr);
    }

    .legal-section {
        grid-column: span 2;
        text-align: center;
    }

    .language-selector {
        margin: auto;
    }
    
    .legal-link {
        padding-left: 0;
    }
    
    .legal-link::before {
        display: none;
    }
}

@media (max-width: 576px) {
    .footerbar {
        grid-template-columns: 1fr;
        padding: 2rem 1rem;
    }

    .footer-section {
        text-align: center;
        padding: 0;
    }

    .footer-section h3::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .social-links {
        justify-content: center;
    }

    .legal-section {
        grid-column: span 1;
    }

    .language-selector {
        margin: auto;
    }

    .legal-links {
        align-items: center;
    }
}

/* Animations */
@keyframes footerbar-fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.footer-section {
}

.footer-section:nth-child(2) {
}

.footer-section:nth-child(3) {
}
/**
 * @file HomeFrame.css
 *
 * @requires NFrameTag.css
 */

.homeframe {
    width: 100vw;
    min-height: 100vh;
    background-color: var(--n-bg);
}

.homeframe-child-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Section Hero */
.homeframe-hero-section {
    text-align: center;
    padding: 20px;
    padding-bottom: 50px;
    background: linear-gradient(135deg, var(--n-bg), var(--n-hover));
    border-radius: 24px;
    margin-bottom: 60px;
}

.homeframe-hero-title {
    font-size: 3.5em;
    font-weight: 700;
    margin-bottom: 20px;
    background: linear-gradient(45deg, var(--n-text), var(--n-text-muted));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.homeframe-hero-subtitle {
    font-size: 1.4em;
    color: var(--n-text-muted);
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Boutons d'action */
.homeframe-action-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 40px;
}

.homeframe-button {
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 1.1em;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.homeframe-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-100%);
}

.homeframe-button:hover::before {
    transform: translateX(0);
}

.homeframe-button-lost {
    background-color: var(--n-text);
    color: var(--n-bg);
}

.homeframe-button-found {
    background-color: transparent;
    color: var(--n-text);
    border: 2px solid var(--n-text);
}

/* Section Statistiques */
.homeframe-stats-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.homeframe-stat-card {
    text-align: center;
    padding: 40px 20px;
    background: var(--n-bg);
    border-radius: 16px;
    box-shadow: 0 4px 20px var(--n-shadow);
}

.homeframe-stat-card:hover {
    transform: translateY(-5px);
}

.homeframe-stat-number {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--n-text);
    margin-bottom: 10px;
}

.homeframe-stat-label {
    color: var(--n-text-muted);
    font-size: 1.1em;
}

/* Section publications */
.homeframe-publications-section {
    padding-bottom: 40px;
    text-align: center;
}

.homeframe-child-publications-container {
    max-width: calc(100vw - 40px);
    text-align: left;
}

.homeframe-publications-button {
    display: inline-block;
    padding: 15px 40px;
    font-size: 1.1em;
    font-weight: bold;
    background: var(--n-primary);
    color: var(--n-bg);
    border-radius: 30px;
    text-decoration: none;
}

.homeframe-publications-button:hover {
    background: var(--n-accent);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--n-shadow);
}

/* Section Comment ça marche */
.homeframe-how-it-works {
    padding: 40px 0;
}

.homeframe-section-title {
    font-size: 2.5em;
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}

.homeframe-section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--n-text);
    border-radius: 2px;
}

.homeframe-steps-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 40px;
}

.homeframe-step-card {
    text-align: center;
    padding: 40px 20px;
    background: var(--n-bg);
    border-radius: 16px;
    box-shadow: 0 4px 20px var(--n-shadow);
}

.homeframe-step-card:hover {
    transform: translateY(-5px);
}

.homeframe-step-number {
    width: 50px;
    height: 50px;
    background: var(--n-text);
    color: var(--n-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    font-weight: bold;
    margin: 0 auto 20px;
}

.homeframe-step-title {
    font-size: 1.4em;
    margin-bottom: 15px;
    color: var(--n-text);
}

.homeframe-step-desc {
    color: var(--n-text-muted);
    line-height: 1.6;
}
/* Section Application Mobile */
.homeframe-app-section {
    padding-top: 80px;
    padding-bottom: 20px;
    background: var(--n-bg-alt);
}

.homeframe-app-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.homeframe-app-text {
    flex: 1;
    max-width: 500px;
    padding-right: 60px;
}

.homeframe-app-description {
    font-size: 1.1em;
    line-height: 1.8;
    color: var(--n-text-muted);
    margin: 20px 0 30px;
}

.homeframe-download-buttons {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.homeframe-store-button {
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 500;
    text-decoration: none;
    color: var(--n-bg);
    background: var(--n-text);
}

.homeframe-store-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--n-shadow);
}

.homeframe-app-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.homeframe-phone-mockup {
    width: 300px;
    height: 600px;
    background: var(--n-text);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    border-radius: 30px;
    position: relative;
    box-shadow: 0 20px 40px var(--n-shadow);
}

/* Section Boutique */
.homeframe-shop-section {
    padding: 80px 20px;
    text-align: center;
    background: var(--n-bg-alt);
}

.homeframe-shop-description {
    max-width: 800px;
    margin: 20px auto 50px;
    font-size: 1.1em;
    line-height: 1.8;
    color: var(--n-text-muted);
}

.homeframe-products-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 50px 0;
}

.homeframe-product-card {
    flex: 0 1 300px;
    padding: 30px;
    background: var(--n-bg);
    border-radius: 20px;
    box-shadow: 0 10px 30px var(--n-shadow);
}

.homeframe-product-card:hover {
    transform: translateY(-10px);
}

.homeframe-product-image {
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;
    border-radius: 15px;
    background-position: center;
    background-size: cover;
}

.homeframe-tag-basic {
    background-color: var(--n-primary-light);
}

.homeframe-tag-premium {
    background-color: var(--n-accent);
}

.homeframe-product-title {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: var(--n-text);
}

.homeframe-product-description {
    color: var(--n-text-muted);
    line-height: 1.6;
}

.homeframe-shop-button {
    display: inline-block;
    padding: 15px 40px;
    font-size: 1.1em;
    background: var(--n-primary);
    color: var(--n-bg);
    border-radius: 30px;
    text-decoration: none;
}

.homeframe-shop-button:hover {
    background: var(--n-accent);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--n-shadow);
}

@media screen and (max-width: 768px) {
    .homeframe-products-container {
        flex-direction: column;
        align-items: center;
    }
    
    .homeframe-product-card {
        width: 100%;
        max-width: 300px;
    }
}


@media screen and (max-width: 968px) {
    .homeframe-app-content {
        flex-direction: column;
        text-align: center;
    }
    
    .homeframe-app-text {
        padding-right: 0;
        margin-bottom: 40px;
    }
    
    .homeframe-download-buttons {
        justify-content: center;
    }
}

@media screen and (max-width: 480px) {
    .homeframe-download-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .homeframe-phone-mockup {
        width: 250px;
        height: 500px;
    }
}

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

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

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

/* Media Queries */
@media screen and (max-width: 968px) {
    .homeframe-stats-section,
    .homeframe-steps-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .homeframe-hero-title {
        font-size: 2.5em;
    }
}

@media screen and (max-width: 640px) {
    .homeframe-stats-section,
    .homeframe-steps-container {
        grid-template-columns: 1fr;
    }

    .homeframe-action-buttons {
        flex-direction: column;
    }

    .homeframe-hero-section {
        padding: 40px 20px;
    }

    .homeframe-hero-title {
        font-size: 2em;
    }
}

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

 .horizontalcategoryitem{
    display: inline-block;
    margin: 0 0.5rem;
 }
/**
 * @file HorizontalPanelPublication.css
 *
 * @requires NPanelTag.css
 */

.horizontalpanelpublication {
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 30px;
    -webkit-overflow-scrolling: touch; /* Pour un défilement fluide sur iOS */
    scrollbar-width: thin; /* Pour Firefox */
}

.horizontalpanelpublication-child-table {
    margin: auto;
    border-collapse:separate;
    border-spacing: 15px 10px;
    margin-left: -10px;
    margin-right: -10px;
}
/**
 * @file HorizontalPublicationItem.css
 *
 * @requires NItemTag.css
 */

/* Style principal de la cellule */
.horizontalpublicationitem {
    padding: 1.6rem;
    padding-bottom: 0.6rem;
    background: var(--n-bg);
    vertical-align: top;
    min-width: 230px;
    border-radius: 8px;
    box-shadow: 0 1px 4px var(--n-shadow);
    margin: 0 10px;
}

.horizontalpublicationitem:hover {
    box-shadow: 0 2px 8px var(--n-shadow);
    transform: translateY(-2px);
    background-color: var(--n-bg-secondary);
}

.horizontalpublicationitem-child-status {
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.horizontalpublicationitem-child-status.perdu {
    color: var(--n-error);
}

.horizontalpublicationitem-child-status.trouve {
    color: var(--n-success);
}

/* Titre */
.horizontalpublicationitem-child-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--n-text);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

/* Date */
.horizontalpublicationitem-child-date {
    font-size: 0.875rem;
    color: var(--n-text-muted);
    margin-bottom: 0.75rem;
    font-style: italic;
}

/* Résumé */
.horizontalpublicationitem-child-resume {
    font-size: 0.9375rem;
    color: var(--n-text-muted);
    line-height: 1.6;
    max-height: 3.2em; /* Limite à 2 lignes (2 * 1.6em) */
    overflow: hidden; /* Cache le texte qui dépasse */
    text-overflow: ellipsis; /* Ajoute des points de suspension (...) à la fin */
    display: -webkit-box; /* Utilisé pour le troncature */
    -webkit-box-orient: vertical; /* Définit l'orientation de la boîte */
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Bouton Voir Plus comme un lien */
.horizontalpublicationitem-child-voirplus {
    display: inline; /* Changez à inline pour qu'il soit en ligne avec le texte */
    padding: 0; /* Pas de padding pour ressembler à un lien */
    border: none; /* Pas de bordure */
    font-size: 0.875rem; /* Taille de police pour correspondre au texte */
    font-weight: normal; /* Poids de police normal */
    color: #3b82f6; /* Couleur du texte du lien */
    text-decoration: underline; /* Soulignement pour ressembler à un lien */
    cursor: pointer; /* Curseur pointer pour indiquer que c'est cliquable */
}

.horizontalpublicationitem-child-voirplus:hover {
    color: #2563eb; /* Couleur au survol */
    text-decoration: underline; /* Gardez le soulignement au survol */
}

/* Image */
.horizontalpublicationitem-child-image {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin: 1rem 0;
    margin-top: 1rem;
    background-color: var(--n-bg-secondary);
}

/* Conteneur des boutons */
.horizontalpublicationitem-child-buttons {
    margin-top: 1rem;
    text-align: center;
}

/* Boutons */
.horizontalpublicationitem-child-contacter,
.horizontalpublicationitem-child-share {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    margin: 5px;
}

/* Bouton Contacter */
.horizontalpublicationitem-child-contacter {
    background-color: #3b82f6;
    color: white;
    border: none;
    text-decoration: none;
}

.horizontalpublicationitem-child-contacter:hover {
    background-color: #2563eb;
}

/* Bouton Partager */
.horizontalpublicationitem-child-share {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.horizontalpublicationitem-child-share:hover {
    background-color: #e2e8f0;
}

/* Animation subtile au chargement */
@keyframes horizontalpublicationitem-fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/**
 * @file Main.css
 *
 * @requires CtxMain.css
 */
 .main-child-container{
    position: relative;
    width: 100%;
    min-height: 100vh;
}

.main-child-padding{
    height: 100px;
}

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

 .navbar {
    width: 100%;
    background-color: var(--n-bg);
    padding: 15px 0;
    position: fixed;
    top: 0;
    z-index: 1000;
}

.navbar-child-table {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.navbar-child-td-logo {
    white-space: nowrap;
    min-width: 80px;
    padding-left: 5px;
}

.navbar-child-logo {
    max-height: 45px;
}

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

.navbar-child-td-menu {
    width: 100%;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.navbar-child-table-menu {
    margin: auto;
    border-collapse: collapse;
}

/* Style des boutons de navigation */
.navbar-child-button-home,
.navbar-child-button-pubs,
.navbar-child-button-boutique,
.navbar-child-button-applications {
    color: var(--n-text);
    text-decoration: none;
    font-size: 1.08em;
    font-weight: 600;
    padding: 8px 20px;
    margin: 0 8px;
    display: inline-block;
    border-radius: 12px;
    position: relative;
    border: none;
}

/* Effet de soulignement au hover */
.navbar-child-button-home::after,
.navbar-child-button-pubs::after,
.navbar-child-button-boutique::after,
.navbar-child-button-applications::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background: var(--n-text);
    transform: translateX(-50%);
}

/* Animation du soulignement */
.navbar-child-button-home:hover::after,
.navbar-child-button-pubs:hover::after,
.navbar-child-button-boutique:hover::after,
.navbar-child-button-applications:hover::after {
    width: 70%;
}

/* Effet hover sur les boutons */
.navbar-child-button-home:hover,
.navbar-child-button-pubs:hover,
.navbar-child-button-boutique:hover,
.navbar-child-button-applications:hover {
    background-color: var(--n-hover);
    transform: translateY(-2px);
}

/* Effet actif sur les boutons */
.navbar-child-button-home:active,
.navbar-child-button-pubs:active,
.navbar-child-button-boutique:active,
.navbar-child-button-applications:active {
    transform: translateY(0);
}

/* Style du bouton menu */
.navbar-child-td-menuButton {
    min-width: 50px;
    text-align: right;
    padding-right: 15px;
}

.navbar-child-button-menubutton {
    border-radius: 12px;
    width: 45px;
    height: 45px;
    cursor: pointer;
    background-color: transparent;
    border: 1px solid var(--n-text-muted);
}

.navbar-child-button-menubutton:hover {
    background-color: var(--n-hover);
}

/* Media Queries améliorées */
@media screen and (max-width: 960px) {
    .navbar-child-table-menu {
        display: none;
    }
    
    .navbar {
        padding: 10px 0;
    }
    
    .navbar-child-button-menubutton {
        width: 40px;
        height: 40px;
    }
}

@media screen and (min-width: 961px) {
    .navbar-child-table-menu {
        display: table;
    }
    
    /* Animation d'apparition des éléments du menu */
    .navbar-child-button-home,
    .navbar-child-button-pubs,
    .navbar-child-button-boutique,
    .navbar-child-button-applications {
        /**/
        opacity: 1;
        /*transform: translateY(-10px);*/
        /**/
    }
}

/* Animation pour l'apparition des éléments */
@keyframes navbar-fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Classe active pour le lien courant */
.navbar-child-button-home.active,
.navbar-child-button-pubs.active,
.navbar-child-button-boutique.active,
.navbar-child-button-applications.active {
    background: var(--n-hover);
    position: relative;
}

/* Effet de scroll */
.navbar.scrolled {
    box-shadow: 0 5px 15px var(--n-shadow);
}
/**
 * @file NavBarFrame.css
 *
 * @requires NFrameTag.css
 */

 .navbarframe {
    height: 100vh;
    width: 100%;
    background-color: var(--n-shadow);
    position: fixed;
    top: 0;
    left: 0;
}

.navbarframe-child-div {
    height: 100%;
    width: calc(100% - 65px);
    max-width: 400px;
    background-color: var(--n-bg);
    box-shadow: 5px 0 10px 0 var(--n-shadow);
    overflow-x: hidden;
    overflow-y: auto;
    /* Animation du menu */
    transform: translateX(-100%);
}

/* Classe à ajouter quand le menu est visible */
.navbarframe-child-div.visible {
    transform: translateX(0);
}

.navbarframe-child-table {
    width: 100%;
    background-color: var(--n-bg);
    position: sticky;
    top: 0;
    padding: 15px 0;
    z-index: 2;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.navbarframe-child-a-logo {
    text-decoration: none;
    color: var(--n-text);
}

.navbarframe-child-logo {
    max-height: 80px;
    margin-left: 20px;
}

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

.navbarframe-child-nom {
    font-size: 1.5em;
    font-weight: 700;
    margin-left: 25px;
    background: linear-gradient(45deg, var(--n-text), var(--n-text-muted));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.navbarframe-child-slogan {
    font-size: 0.9em;
    margin-left: 25px;
    color: var(--n-text-muted);
    font-style: italic;
}

.navbarframe-child-td-closebutton {
    width: 50px;
    text-align: right;
    vertical-align: top;
}

.navbarframe-child-button-closebutton {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin-right: 15px;
    opacity: 0.7;
}

.navbarframe-child-button-closebutton:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.navbarframe-child-button-div {
    width: 100%;
    margin-top: 20px;
    padding: 0 15px;
}

/* Style des boutons de navigation */
.navbarframe-child-button-home,
.navbarframe-child-button-pubs,
.navbarframe-child-button-boutique,
.navbarframe-child-button-applications {
    color: var(--n-text);
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 500;
    padding: 15px 20px;
    margin: 8px 0;
    display: block;
    border-radius: 12px;
    position: relative;
    background: transparent;
}

/* Effet hover sur les boutons */
.navbarframe-child-button-home:hover,
.navbarframe-child-button-pubs:hover,
.navbarframe-child-button-boutique:hover,
.navbarframe-child-button-applications:hover {
    background: var(--n-hover);
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Effet actif sur les boutons */
.navbarframe-child-button-home:active,
.navbarframe-child-button-pubs:active,
.navbarframe-child-button-boutique:active,
.navbarframe-child-button-applications:active {
    transform: translateX(2px);
    background: var(--n-active);
}

/* Style pour l'élément actif/sélectionné */
.navbarframe-child-button-home.active,
.navbarframe-child-button-pubs.active,
.navbarframe-child-button-boutique.active,
.navbarframe-child-button-applications.active {
    background: var(--n-hover);
    border-left: 4px solid var(--n-text);
    padding-left: 16px;
}

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

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

.navbarframe-child-div::-webkit-scrollbar-thumb {
    background-color: var(--n-text-muted);
    border-radius: 4px;
}
/**
 * @file OwnerFrame.css
 *
 * @requires NFrameTag.css
 */

 .ownerframe {
    width: 100vw;
    min-height: 100vh;
    background-color: var(--n-bg);
    padding-bottom: 70px;
}
/**
 * @file OwnerItemFull.css
 *
 * @requires NItemTag.css
 */

.owneritemfull-inner-wrapper {
    max-width: 800px;
    margin: 40px auto;
    padding: 40px;
    background: var(--n-bg);
    border-radius: 24px;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.08),
        0 4px 16px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

/* Effet de brillance sur le wrapper */
.owneritemfull-inner-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%
    );
}

.owneritemfull-child-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.owneritemfull-child-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--n-text);
    margin: 0;
    letter-spacing: -0.5px;
    position: relative;
    display: inline-block;
}

/* Soulignement animé du titre */
.owneritemfull-child-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--n-primary), var(--n-accent));
    transform: scaleX(0);
    transform-origin: right;
}

.owneritemfull-child-content {
}

.owneritemfull-child-description {
    font-size: 16px;
    line-height: 1.8;
    color: var(--n-text);
    background: var(--n-bg-secondary);
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 32px;
    white-space: pre-line;
    transform: translateY(0);
}

.owneritemfull-child-description:hover {
    transform: translateY(-2px);
}

.owneritemfull-child-buttons {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.owneritemfull-child-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    color: var(--n-text-inverse);
    background: linear-gradient(135deg, var(--n-primary) 0%, var(--n-hover) 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.owneritemfull-child-action-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
    );
}

.owneritemfull-child-action-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

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

.owneritemfull-child-action-button:active {
    transform: translateY(0);
}

/* Animations keyframes */
@keyframes owneritemfull-slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes owneritemfull-underline {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes owneritemfull-shine {
    0% {
        left: -100%;
    }
    20%, 100% {
        left: 100%;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .owneritemfull-inner-wrapper {
        margin: 20px;
        padding: 30px;
    }

    .owneritemfull-child-title {
        font-size: 28px;
    }

    .owneritemfull-child-description {
        font-size: 15px;
        padding: 20px;
    }

    .owneritemfull-child-action-button {
        padding: 14px 28px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .owneritemfull-inner-wrapper {
        margin: 16px;
        padding: 24px;
    }

    .owneritemfull-child-title {
        font-size: 24px;
    }

    .owneritemfull-child-description {
        font-size: 14px;
        padding: 16px;
        line-height: 1.6;
    }

    .owneritemfull-child-action-button {
        padding: 12px 24px;
        font-size: 14px;
    }
}

@keyframes owneritemfull-shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.loading {
    background: linear-gradient(
        90deg,
        var(--n-bg-secondary) 0%,
        var(--n-bg) 50%,
        var(--n-bg-secondary) 100%
    );
    background-size: 1000px 100%;
}
/**
 * @file PostsLinkFrame.css
 *
 * @requires NFrameTag.css
 */

 @keyframes postslinkframe-fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Animation pour le pulsing des boutons */
  @keyframes postslinkframe-pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
  }
  
  .postslinkframe {
      width: 100vw;
      min-height: 100vh;
      background-color: var(--n-bg);
  }
  
  .postslinkframe-child-divparent {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
  }
  
  /* Header Section avec Titre et Boutons d'action sur la même ligne */
  .postslinkframe-child-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: auto;
    margin-bottom: 2rem;
    gap: 1rem;
  }
  
  /* Titre de la page */
  .postslinkframe-child-pagetitle {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--n-text);
    margin: 0;
    flex: 1;
    min-width: 300px;
    position: relative;
  }
  
  .postslinkframe-child-pagetitle::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--n-primary), var(--n-accent));
    border-radius: 2px;
  }
  
  .postslinkframe-child-panelpublications {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 1.5rem;
  }
  
  /* Responsive design */
  @media (max-width: 768px) {
      .postslinkframe-child-divparent {
          padding: 15px;
      }
  
      .postslinkframe-header {
          flex-direction: column;
          align-items: flex-start;
      }
      
      .postslinkframe-child-pagetitle {
          font-size: 1.8rem;
          margin-bottom: 1rem;
          text-align: center;
          width: 100%;
      }
      
      .postslinkframe-child-pagetitle::after {
          left: 50%;
          transform: translateX(-50%);
      }
  
      .postslinkframe-child-panelpublications {
          grid-template-columns: 1fr;
          gap: 1rem;
      }
  }
  
/**
 * @file PrivacyFrame.css
 *
 * @requires NFrameTag.css
 */

 .privacyframe {
    width: 100vw;
    min-height: 100vh;
    background: var(--n-bg);
}

/* Conteneur principal */
.privacyframe-child-divparent {
    max-width: 900px;
    width: 90%;
    margin: 50px auto;
    padding: 30px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Effet au survol */
.privacyframe-child-divparent:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

/* Titre de la page */
.privacyframe-child-pagetitle {
    font-size: 32px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 15px;
}

/* Barre de navigation */
.privacyframe-child-nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* Bouton retour */
.privacyframe-child-backbtn {
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    background: #007bff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}

.privacyframe-child-backbtn:hover {
    background: #0056b3;
    transform: scale(1.05);
}

.privacyframe-child-backbtn:active {
    transform: scale(0.95);
}

/* Contenu des conditions d'utilisation */
.privacyframe-child-content {
    font-size: 18px;
    color: #444;
    line-height: 1.8;
    text-align: justify;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .privacyframe-child-divparent {
        padding: 20px;
    }

    .privacyframe-child-pagetitle {
        font-size: 28px;
    }

    .privacyframe-child-content {
        font-size: 16px;
    }
}

/**
 * @file PublicationFrame.css
 *
 * @requires NFrameTag.css
 */

.publicationframe {
    width: 100vw;
    min-height: 100vh;
    background-color: var(--n-bg);
}
/**
 * @file PublicationItem.css
 *
 * @requires NItemTag.css
 */

/* Élément de publication principal */
.publicationitem {
    background-color: var(--n-bg);
    border-radius: 8px;
    box-shadow: 0 1px 5px var(--n-shadow);
    padding: 15px;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
  }
  
  .publicationitem:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  }
  
  /* Statut (perdu/trouvé) */
  .publicationitem-child-status {
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 15px;
    margin-bottom: 10px;
  }
  
  .publicationitem-child-status.perdu {
    background-color: var(--n-error);
    color: white;
  }
  
  .publicationitem-child-status.trouve {
    background-color: var(--n-success);
    color: white;
  }
  
  /* Image */
  .publicationitem-child-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
  }
  
  /* Conteneur de contenu */
  .publicationitem-content {
    padding: 15px;
  }
  
  /* Titre */
  .publicationitem-child-title {
    margin: 0 0 5px 0;
    font-size: 18px;
    font-weight: bold;
    color: var(--n-text);
  }
  
  /* Date */
  .publicationitem-child-date {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: var(--n-text-muted);
  }
  
  /* Résumé */
  .publicationitem-child-resume {
    margin: 0 0 15px 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--n-text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  
  /* Bouton voir plus */
  .publicationitem-child-voirplus {
    display: inline-block;
    margin-bottom: 15px;
    color: var(--n-primary);
    text-decoration: none;
    font-weight: 500;
  }
  
  .publicationitem-child-voirplus:hover {
    color: var(--n-hover);
    text-decoration: underline;
  }
  
  /* Conteneur des boutons */
  .publicationitem-child-buttons {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
  }
  
  /* Bouton contacter */
  .publicationitem-child-contacter {
    display: inline-block;
    padding: 8px 15px;
    background-color: var(--n-primary);
    color: white;
    text-decoration: none;
    border-radius: 20px;
    font-size: 14px;
  }
  
  .publicationitem-child-contacter:hover {
    background-color: var(--n-active);
  }
  
  /* Bouton partager */
  .publicationitem-child-share {
    display: inline-block;
    padding: 8px 15px;
    background-color: var(--n-bg-secondary);
    color: var(--n-text);
    text-decoration: none;
    border-radius: 20px;
    font-size: 14px;
  }
  
  .publicationitem-child-share:hover {
    background-color: var(--n-secondary);
    color: white;
  }
  
  /* Pour ajouter une classe de conteneur autour du contenu si nécessaire */
  .publicationitem-inner-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
/**
 * @file PublicationItemFull.css
 *
 * @requires NItemTag.css
 */

 .publicationitemfull-inner-wrapper {
    max-width: 900px;
    width: calc(100% - 70px);
    margin: 40px auto;
    padding: 25px;
    background: var(--n-bg);
    box-shadow: 0 4px 12px var(--n-shadow);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.publicationitemfull-inner-wrapper:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px var(--n-shadow);
}

.publicationitemfull-child-title {
    font-size: 28px;
    font-weight: bold;
    color: var(--n-text);
    margin-bottom: 10px;
}

.publicationitemfull-child-conteneur {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--n-text-muted);
    padding: 10px 0;
    border-bottom: 1px solid var(--n-border);
}

.publicationitemfull-child-date {
    font-size: 14px;
    color: var(--n-secondary);
    font-weight: 500;
}

.publicationitemfull-child-status {
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
}

.publicationitemfull-child-status.perdu {
    background-color: var(--n-error);
    color: var(--n-bg);
}

.publicationitemfull-child-status.trouve {
    background-color: var(--n-success);
    color: var(--n-bg);
}

.publicationitemfull-child-resume {
    font-size: 18px;
    color: var(--n-text);
    line-height: 1.7;
    margin-bottom: 20px;
    text-align: justify;
}

.publicationitemfull-child-image {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 5px 15px var(--n-shadow);
    margin-bottom: 20px;
}

.publicationitemfull-child-image:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 20px var(--n-shadow);
}

.publicationitemfull-child-buttons {
    display: flex;
    gap: 12px;
    margin-top: 15px;
}

.publicationitemfull-child-contacter,
.publicationitemfull-child-share {
    display: inline-block;
    padding: 12px 18px;
    font-size: 16px;
    font-weight: 600;
    color: var(--n-text-inverse);
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
}

.publicationitemfull-child-contacter {
    background: var(--n-success);
}

.publicationitemfull-child-contacter:hover {
    background: var(--n-hover);
    transform: scale(1.05);
}

.publicationitemfull-child-share {
    background: var(--n-warning);
}

.publicationitemfull-child-share:hover {
    background: var(--n-active);
    transform: scale(1.05);
}

.publicationitemfull-back-btn {
    display: inline-block;
    margin: 20px;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--n-bg);
    background: var(--n-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
}

.publicationitemfull-back-btn:hover {
    background: var(--n-accent);
    transform: scale(1.05);
}

.publicationitemfull-back-btn:active {
    transform: scale(0.95);
}

@media (max-width: 768px) {
    .publicationitemfull-inner-wrapper {
        padding: 20px;
    }

    .publicationitemfull-child-title {
        font-size: 24px;
    }

    .publicationitemfull-child-resume {
        font-size: 16px;
    }

    .publicationitemfull-child-conteneur {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .publicationitemfull-child-buttons {
        flex-direction: column;
        gap: 10px;
    }

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

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

/* Animation pour le pulsing des boutons */
@keyframes publicationsframe-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

.publicationsframe {
    width: 100vw;
    min-height: 100vh;
    background-color: var(--n-bg);
}

.publicationsframe-child-divparent {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Header Section avec Titre et Boutons d'action sur la même ligne */
.publicationsframe-child-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: auto;
  margin-bottom: 2rem;
  gap: 1rem;
}

/* Titre de la page */
.publicationsframe-child-pagetitle {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--n-text);
  margin: 0;
  flex: 1;
  min-width: 300px;
  position: relative;
}

.publicationsframe-child-pagetitle::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, var(--n-primary), var(--n-accent));
  border-radius: 2px;
}

/* Boutons d'action */
.publicationsframe-child-actionbuttons {
  display: flex;
  gap: 1.5rem;
}

.publicationsframe-actionbuttons-child-lostbutton,
.publicationsframe-actionbuttons-child-foundbutton {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--n-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}

.publicationsframe-actionbuttons-child-lostbutton {
  background-color: var(--n-primary);
  color: var(--n-bg);
}

.publicationsframe-actionbuttons-child-foundbutton {
  background-color: var(--n-accent);
  color: var(--n-text);
}

.publicationsframe-actionbuttons-child-lostbutton:hover,
.publicationsframe-actionbuttons-child-foundbutton:hover {
  transform: translateY(-3px);
  box-shadow: var(--n-shadow);
}

.publicationsframe-actionbuttons-child-lostbutton:hover {
  background-color: var(--n-primary);
}

.publicationsframe-actionbuttons-child-foundbutton:hover {
  background-color: var(--n-accent);
}

.publicationsframe-actionbuttons-child-lostbutton:active,
.publicationsframe-actionbuttons-child-foundbutton:active {
  transform: translateY(1px);
}
  
  /* Boutons de filtre avec espacement fixe */
  .publicationsframe-filtersButtonsContainer-child {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid var(--n-secondary);
    border-radius: 20px;
    background-color: var(--n-bg);
    color: var(--n-text);
    cursor: pointer;
    flex-shrink: 0; /* Empêche les boutons de rétrécir */
  }
  
  .publicationsframe-filtersButtonsContainer-child:hover {
    background-color: var(--n-secondary);
    color: var(--n-text-inverse);
  }
  
  .publicationsframe-filtersButtonsContainer-child.active{
    background-color: var(--n-primary);
    color: var(--n-text-inverse);
  }

.publicationsframe-child-panelpublications {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

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

    .publicationsframe-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .publicationsframe-child-pagetitle {
        font-size: 1.8rem;
        margin-bottom: 1rem;
        text-align: center;
        width: 100%;
    }
    
    .publicationsframe-child-actionbuttons {
        width: 100%;
        justify-content: center;
    }
    
    .publicationsframe-child-pagetitle::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .publicationsframe-child-panelpublications {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Conteneur pour les filtres et la recherche */
.publicationsframe-child-div1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 2rem;
}

/* Filtres - conteneur avec défilement horizontal */
.publicationsframe-child-filtersbuttonscontainer {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
  padding: 10px 5px;
  gap: 1rem;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  
  &::-webkit-scrollbar {
      height: 4px;
  }
  
  &::-webkit-scrollbar-track {
      background: var(--n-bg-secondary);
      border-radius: 10px;
  }
  
  &::-webkit-scrollbar-thumb {
      background-color: var(--n-secondary);
      border-radius: 10px;
  }
}

/* Conteneur de la recherche */
.publicationsframe-child-divsearch {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Input de recherche */
.publicationsframe-child-search {
  width: 320px;
}

/* Responsive Design */
@media (max-width: 992px) {
  .publicationsframe-child-div1 {
      flex-direction: column;
      align-items: stretch;
      gap: 16px;
  }

  .publicationsframe-child-filtersbuttonscontainer {
      width: 100%;
  }

  .publicationsframe-child-divsearch {
      width: 100%;
      justify-content: center;
  }

  .publicationsframe-child-search {
      width: 100%;
      max-width: 320px;
  }
}

@media (max-width: 480px) {
  .publicationsframe-child-div1 {
      gap: 12px;
  }
}
/**
 * @file SearchCodeFrame.css
 *
 * @requires NFrameTag.css
 */

.searchcodeframe {
    width: 100vw;
    min-height: 100vh;
    background-color: var(--n-bg);
    padding-bottom: 70px;
}

.searchcodeframe-child-table {
    width: 100%;
    height: calc(100% - 70px);
    border-collapse: collapse;
}

.searchcodeframe-child-td {
    vertical-align: middle;
    text-align: center;
}

/* Effet glass élégant */
.searchcodeframe-child-divparent {
    margin: 40px auto 0 auto;
    width: calc(90% - 80px);
    max-width: 600px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(16px);
    border-radius: 20px;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.1),
        0 10px 20px rgba(0, 0, 0, 0.05);
    padding: 40px;
    text-align: left;
    transform: translateY(0);
    position: relative;
}

.searchcodeframe-child-divparent:hover {
    transform: translateY(-6px);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.15),
        0 12px 24px rgba(0, 0, 0, 0.05);
}

.searchcodeframe-child-divparent::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(to bottom right, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
    z-index: 0;
}

.searchcodeframe-child-header {
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}

.searchcodeframe-child-pagetitle {
    color: #222;
    font-size: 34px;
    font-weight: 700;
    text-align: center;
    margin: 0;
    letter-spacing: -0.5px;
    z-index: 1;
}

.searchcodeframe-child-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 0;
    position: relative;
    z-index: 1;
}

.searchcodeframe-child-loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(0, 123, 255, 0.2);
    border-top: 4px solid #007bff;
    border-radius: 50%;
    margin-bottom: 24px;
}

.searchcodeframe-child-status {
    color: #666;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    line-height: 1.5;
}

.searchcodeframe-child-error-container {
    margin-top: 24px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.01));
    border-left: 5px solid #ff4d4f;
    border-radius: 12px;
    transform: translateX(0);
}

.searchcodeframe-child-error-container:hover {
    transform: translateX(6px);
}

.searchcodeframe-child-error-text {
    color: #ff4d4f;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
}

.searchcodeframe-child-ok-button {
    display: block;
    width: 100%;
    margin-top: 24px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--n-primary) 0%, var(--n-hover) 100%);
    color: var(--n-text-inverse);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.searchcodeframe-child-ok-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: translateX(-100%);
}

.searchcodeframe-child-ok-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, var(--n-hover) 0%, var(--n-primary) 100%);
}

.searchcodeframe-child-ok-button:hover::before {
    transform: translateX(100%);
}

.searchcodeframe-child-ok-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.searchcodeframe-child-ok-button:focus {
    outline: none;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.1),
        0 0 0 3px rgba(var(--n-primary), 0.2);
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .searchcodeframe-child-divparent {
        width: calc(85% - 64px);
        padding: 32px;
    }

    .searchcodeframe-child-pagetitle {
        font-size: 28px;
    }

    .searchcodeframe-child-ok-button {
        padding: 12px 24px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .searchcodeframe-child-divparent {
        width: calc(92% - 48px);
        padding: 24px;
    }

    .searchcodeframe-child-pagetitle {
        font-size: 24px;
    }

    .searchcodeframe-child-loading-container {
        padding: 32px 0;
    }

    .searchcodeframe-child-ok-button {
        padding: 10px 20px;
        font-size: 14px;
        margin-top: 20px;
    }
}
/**
 * @file SelectCategoryItem.css
 *
 * @requires NItemTag.css
 */

 .selectcategoryitem {
    background: var(--n-bg);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--n-border);
}

.selectcategoryitem:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--n-shadow);
    border-color: var(--n-primary);
}

.selectcategoryitem-child-table {
    width: 100%;
    border-collapse: collapse;
}

.selectcategoryitem-child-image-td {
    width: 120px;
    padding: 15px;
    vertical-align: middle;
}

.boutiqueitem-child-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border-radius: 12px;
}

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

.selectcategoryitem-child-nom-td {
    padding: 15px 20px;
    vertical-align: middle;
}

.boutiqueitem-child-nom {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--n-text);
    margin-bottom: 8px;
}

.selectcategoryitem:hover .boutiqueitem-child-nom {
    color: var(--n-primary);
}

.boutiqueitem-child-description {
    font-size: 0.95em;
    color: var(--n-text-muted);
    line-height: 1.5;
    max-width: 400px;
}

/* État sélectionné */
.selectcategoryitem.selected {
    background: linear-gradient(45deg, var(--n-primary), var(--n-bg));
    border-color: var(--n-primary);
}

.selectcategoryitem.selected .boutiqueitem-child-nom {
    color: var(--n-primary);
}

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

.selectcategoryitem {
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .selectcategoryitem-child-image-td {
        width: 90px;
        padding: 12px;
    }

    .boutiqueitem-child-image {
        width: 80px;
        height: 80px;
    }

    .selectcategoryitem-child-nom-td {
        padding: 12px 15px;
    }

    .boutiqueitem-child-nom {
        font-size: 1.1em;
    }

    .boutiqueitem-child-description {
        font-size: 0.9em;
    }
}

@media screen and (max-width: 250px) {
    .selectcategoryitem-child-table {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .selectcategoryitem-child-image-td,
    .selectcategoryitem-child-nom-td {
        display: block;
        width: 100%;
        padding: 10px;
    }

    .boutiqueitem-child-image {
        width: 90px;
        height: 90px;
        margin: 0 auto;
    }

    .boutiqueitem-child-description {
        max-width: 100%;
    }
}

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

.selectcategoryitem.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--n-bg-alt) 50%,
        transparent 100%);
}

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

.termsframe {
    width: 100vw;
    min-height: 100vh;
    background: var(--n-bg);
}

/* Conteneur principal */
.termsframe-child-divparent {
    max-width: 900px;
    width: 90%;
    margin: 50px auto;
    padding: 30px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Effet au survol */
.termsframe-child-divparent:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

/* Titre de la page */
.termsframe-child-pagetitle {
    font-size: 32px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 15px;
}

/* Barre de navigation */
.termsframe-child-nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* Bouton retour */
.termsframe-child-backbtn {
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    background: #007bff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}

.termsframe-child-backbtn:hover {
    background: #0056b3;
    transform: scale(1.05);
}

.termsframe-child-backbtn:active {
    transform: scale(0.95);
}

/* Contenu des conditions d'utilisation */
.termsframe-child-content {
    font-size: 18px;
    color: #444;
    line-height: 1.8;
    text-align: justify;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .termsframe-child-divparent {
        padding: 20px;
    }

    .termsframe-child-pagetitle {
        font-size: 28px;
    }

    .termsframe-child-content {
        font-size: 16px;
    }
}

/**
 * @file WelcomeFrame.css
 *
 * @requires NFrameTag.css
 */

/* 🔹 Animation du dégradé de fond */
@keyframes welcomeframe-gradientBG {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* 🔹 Animation de l’effet lumineux */
@keyframes welcomeframe-shine {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.08; }
    50% { transform: scale(1.5) rotate(180deg); opacity: 0.12; }
}

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

/* 📌 Styles principaux */
.welcomeframe {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg,
        var(--n-bg) 0%, var(--n-bg-secondary) 50%, var(--n-bg) 100%);
    background-size: 400% 400%;
    overflow: hidden;
}

/* 🌟 Effet lumineux */
.welcomeframe::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at center,
        var(--n-primary) 0%, transparent 70%);
    opacity: 0.08;
    filter: blur(30px);
}

/* 🔹 Table enfant */
.welcomeframe-child-table {
    height: 100%;
    width: 100%;
    border-spacing: 10px;
    /*opacity: 0;*/
}

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

/* 🔹 Logo */
.welcomeframe-child-logo {
    max-width: 60vw;
    max-height: 200px;
    /*opacity: 0;*/
}

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

/* 🔹 Slogan */
.welcomeframe-child-slogan {
    margin-top: 15px;
    font-size: 133%;
    font-weight: bold;
    color: var(--n-text);
    /*opacity: 0;*/
}

/* ⚡ Mode "réduction des animations" */
@media (prefers-reduced-motion: reduce) {
    .welcomeframe,
    .welcomeframe::before {
        background-size: 100% 100%;
    }
}