/* Définition des couleurs et police */
:root {
    --bg-dark: #121212;                                /* Couleur de fond principal sombre */
    --bg-card: #1e1117;                                /* Fond des cartes et panneaux */
    --bordeaux-dark: #4a0d1b;                          /* Bordeaux très sombre */
    --bordeaux-main: #6b1426;                          /* Bordeaux principal */
    --bordeaux-light: #942138;                         /* Bordeaux clair */
    --bordeaux-bright: #b82d49;                        /* Bordeaux vif pour les surbrillances */
    --text-main: #f5f5f5;                              /* Couleur du texte principal */
    --text-muted: #bfb0b5;                             /* Couleur de texte secondaire */
    --border-color: #521522;                           /* Couleur des bordures */
    --font-family: Verdana, sans-serif;                /* Police globale */
}

.zero-layout {
    display: flex;                                     /* Active le mode Flexbox */
    flex: 1;                                           /* Occupe tout l'espace vertical disponible */
    position: relative;                                /* Repère de positionnement pour les enfants */
    overflow: hidden;                                  /* Empêche les débordements de contenu */
}

/*-----------------*/
/* Outils de dessin*/
/*-----------------*/

.titre-patron {
    width: 100%;
    box-sizing: border-box;
}

/*-----------------*/
/* Outils de dessin*/
/*-----------------*/

.tools-sidebar {
    background-color: var(--bg-card);                  /* Fond sombre du panneau latéral */
    border: 1px solid var(--border-color);             /* Bordure fine bordeaux */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);         /* Ombre portée pour le relief */
    border-radius: 10px;                               /* Coins arrondis */
    padding: 1.5rem;                                   /* Marge interne */
    width: 340px;                                      /* Largeur fixe du panneau */
    border-top: none;                                  /* Supprime la bordure supérieure */
    border-bottom: none;                               /* Supprime la bordure inférieure */
    display: flex;                                     /* Disposition interne en flexbox */
    flex-direction: column;                            /* Empilement vertical des éléments */
    gap: 1rem;                                         /* Espacement entre les éléments */
    z-index: 10;                                       /* Passe au-dessus de la zone de dessin */
    overflow-y: auto;                                  /* Défilement vertical si besoin */
    transition: transform 0.3s ease, margin-left 0.3s ease, border-color 0.2s, box-shadow 0.2s; /* Transitions fluides */
}

.tools-sidebar:hover {
    border-color: var(--bordeaux-bright);              /* Éclaircit la bordure au survol */
    box-shadow: 0 6px 18px rgba(184, 45, 73, 0.2);     /* Halo bordeaux vif au survol */
}

.tools-sidebar.collapsed {
    transform: translateX(-100%);                      /* Glisse le panneau hors de l'écran */
    margin-left: -340px;                               /* Retire les 300px du flux Flexbox */
}

.tools-sidebar.collapsed .sidebar-section,
.tools-sidebar.collapsed .separator {
    opacity: 0;                                        /* Rend le contenu invisible */
    pointer-events: none;                              /* Désactive les interactions */
}

.sidebar-section h3 {
    font-size: 1.1rem;                                 /* Taille du titre de section */
    color: var(--text-main);                           /* Couleur du titre */
}

.sidebar-section .subtitle {
    font-size: 0.8rem;                                 /* Taille du sous-titre */
    color: var(--text-muted);                          /* Couleur atténuée */
    margin-bottom: 0.8rem;                             /* Espace en dessous */
}

.input-group {
    display: flex;                                     /* Disposition flexbox */
    flex-direction: column;                            /* Alignement vertical champ/label */
    gap: 0.5rem;                                       /* Espace entre label et input */
    margin-bottom: 0.8rem;                             /* Marge basse */
}

.input-group label {
    font-size: 0.85rem;                                /* Taille du libellé */
    display: flex;                                     /* Disposition horizontale interne */
    justify-content: space-between;                    /* Espace le texte aux extrémités */
    align-items: center;                               /* Alignement vertical centré */
}

.input-group input,
.input-group select {
    background-color: var(--bg-dark);                  /* Fond très sombre pour les formulaires */
    border: 1px solid var(--border-color);             /* Bordure fine */
    color: var(--text-main);                           /* Texte en couleur principale */
    padding: 0.4rem;                                   /* Espace interne léger */
    border-radius: 4px;                                /* Coins légèrement arrondis */
}

.input-group.disabled {
    opacity: 0.4;
    filter: grayscale(100%);
    pointer-events: none;
    cursor: not-allowed;
}

.actions-grid {
    display: grid;                                     /* Disposition en grille */
    grid-template-columns: 1fr 1fr;                    /* Deux colonnes de taille égale */
    gap: 0.5rem;                                       /* Espace entre les boutons */
    margin-bottom: 0.8rem;                             /* Marge basse */
}

.btn-primary {
    background-color: var(--bordeaux-main);            /* Couleur de fond principale */
    color: var(--text-main);                           /* Couleur du texte */
    border: none;                                      /* Pas de bordure */
    padding: 0.7rem 1.2rem;                            /* Dimensionnement du bouton */
    border-radius: 6px;                                /* Coins arrondis */
    cursor: pointer;                                   /* Curseur en forme de main */
    font-family: var(--font-family);                   /* Police globale */
    font-weight: bold;                                 /* Texte en gras */
    transition: background-color 0.2s;                 /* Animation du fond au survol */
}

.btn-primary:hover {
    background-color: var(--bordeaux-light);           /* Éclaircit au survol */
}
.color-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.color-select {
    width: 90%;
}

.color-preview {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid #555;
    flex-shrink: 0; /* Empêche la pastille de se déformer */
}

.checkbox-group {
    margin-bottom: 0.8rem;                             /* Marge basse */
    font-size: 0.85rem;                                /* Taille du texte */
}

.btn-eraser{
    background-color: var(--bordeaux-main);            /* Fond bordeaux principal */
    color: var(--text-main);                           /* Couleur du texte */
    font-family: var(--font-family);                   /* Police globale */
    border: none;                                      /* Sans bordure */
    padding: 0.6rem;                                   /* Taille du bouton */
    border-radius: 4px;                                /* Coins légèrement arrondis */
    width: 100%;                                       /* Occupe toute la largeur */
    cursor: pointer;                                   /* Curseur interactif */
    font-weight: bold;                                 /* Texte en gras */
}

.btn-eraser.active {
    background-color: var(--bordeaux-bright);
    outline: 2px solid var(--text-main);
    box-shadow: 0 0 10px rgba(184, 45, 73, 0.6);
}

.btn-clear {
    background-color: var(--bordeaux-main);            /* Fond bordeaux principal */
    color: var(--text-main);                           /* Couleur du texte */
    font-family: var(--font-family);                   /* Police globale */
    border: none;                                      /* Sans bordure */
    padding: 0.6rem;                                   /* Taille du bouton */
    border-radius: 4px;                                /* Coins légèrement arrondis */
    width: 100%;                                       /* Occupe toute la largeur */
    cursor: pointer;                                   /* Curseur interactif */
    font-weight: bold;                                 /* Texte en gras */
    margin-bottom: 0.5rem;
}

.btn-clear:hover {
    background-color: var(--bordeaux-light);           /* Fond éclairci au survol */
}



.separator {
    border: none;                                      /* Annule le style par défaut */
    border-top: 1px solid var(--border-color);         /* Ligne de séparation fine */
}

.btn-retracter {
    background: var(--bordeaux-main);                  /* Fond bordeaux */
    border: 1px solid var(--border-color);             /* Bordure fine */
    color: var(--text-main);                           /* Texte clair */
    padding: 0.4rem 0.8rem;                            /* Taille du bouton */
    border-radius: 4px;                                /* Coins arrondis */
    cursor: pointer;                                   /* Curseur interactif */
    align-self: flex-start;                            /* Aligné au début du panneau */
    font-size: 0.8rem;                                 /* Petite taille de texte */
    margin-top: 5px;                                   /* Marge supérieure */
    margin-left: 1px;                                  /* Ajustement horizontal */
}



/*------------*/
/* Exportaion */
/*------------*/

.btn-export {
    background-color: var(--bordeaux-main);            /* Fond bordeaux principal */
    color: var(--text-main);                           /* Couleur du texte */
    font-family: var(--font-family);                   /* Police globale */
    border: none;                                      /* Sans bordure */
    padding: 0.7rem 1.2rem;                            /* Taille du bouton */
    border-radius: 6px;                                /* Coins arrondis */
    cursor: pointer;                                   /* Curseur interactif */
    font-weight: bold;                                 /* Texte en gras */
    width: 70%;                                        /* Largeur de 70% du conteneur */
    transition: background-color 0.2s;                 /* Animation fluide au survol */
    margin: 0.5rem;                                    /* Marges autour du bouton */
    display: block;                                    /* Passer en bloc pour le centrage */
    margin-left: auto;                                 /* Centrage horizontal (gauche) */
    margin-right: auto;                                /* Centrage horizontal (droite) */
}

.btn-export:hover {
    background-color: var(--bordeaux-light);           /* Éclaircit au survol */
}

/*----------------*/
/* Zone de Dessin */
/*----------------*/

.drawing-area {
    flex: 1;                                           /* Remplit l'espace central disponible */
    display: flex;                                     /* Active Flexbox */
    justify-content: center;                           /* Centre le contenu horizontalement */
    align-items: center;                               /* Centre le contenu verticalement */
    padding: 1.5rem;                                   /* Espacement interne */
    overflow: auto;                                    /* Barre de défilement si le canvas est grand */
    background-color: var(--bg-dark);                  /* Fond sombre global */
}

.grid-wrapper {
    background-color: var(--bg-dark);                  /* Fond du conteneur de grille */
    padding: 20px;                                     /* Espace autour de la grille */
    border: 1px solid var(--bordeaux-main);             /* Bordure bordeaux */
    box-shadow: 0 0 15px var(--bg-dark);               /* Ombre externe diffuse */
    overflow: auto; /* Permet le défilement natif si le canvas dépasse */
    min-width: 0;   /* Empêche le conteneur Flexbox d'écraser le canvas */
}

/*--------------------*/
/* Couleurs Utilisées */
/*--------------------*/

.bottom-section {
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1.5rem;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: border-color 0.2s, box-shadow 0.2s, max-height 0.3s ease, opacity 0.3s ease;
    margin: 0; /* Retrait de la marge externe désormais gérée par .fil-block */
    overflow: hidden;
}

/*--------------------*/
.bottom-section:hover {
    border-color: var(--bordeaux-bright);              /* Bordure lumineuse au survol */
    box-shadow: 0 6px 18px rgba(184, 45, 73, 0.2);     /* Halo lumineux au survol */
}

.bottom-header {
    display: flex;                                     /* Disposition Flexbox */
    justify-content: space-between;                    /* Aligne les éléments aux deux extremiés */
    align-items: center;                               /* Centrage vertical */
    margin-bottom: 0.5rem;                             /* Marge basse */
}

.bottom-section.collapsed {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-color: transparent;
}
.bottom-section.collapsed + .scroll-buttons {
    display: none;
}

.bottom-section.collapsed .bottom-header{
    opacity: 0;                                        /* Rend le contenu invisible */
    pointer-events: none;                              /* Désactive les interactions */
}


/* Conteneur avec défilement horizontal sur 2 lignes */
.used-colors-list {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 0.6rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0;
    flex: 1;
    min-width: 0;
}


/* Grille horizontale sur 2 lignes identiques à PDC */
.used-colors-list {
    display: grid;
    grid-template-rows: repeat(2, 70px);
    grid-auto-flow: column;
    grid-auto-columns: 210px;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0;
    flex: 1;
    min-width: 0;
}

/* Carte unitaire de couleur */
.used-color-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.72rem;
    background: rgba(26, 5, 11, 0.6);
    border: 1px solid rgba(138, 37, 56, 0.8);
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    transition: background 0.2s, border-color 0.2s;
}

.used-color-item:hover {
    background: #8a2538;
    border-color: var(--bordeaux-bright);
}

/* Pastille carrée */
.used-color-swatch {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

/* Symbole centré */
.used-color-symbol {
    width: 22px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: bold;
    color: #ffffff;
    flex-shrink: 0;
}

/* Bloc d'informations textuelles */
.used-color-info {
    flex: 1;
    line-height: 1.2;
    overflow: hidden;
}

.used-color-code {
    font-weight: bold;
    color: #ffd700;
    font-size: 0.75rem;
}

.used-color-name {
    color: #e0d5d7;
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.used-color-stats {
    color: #a58a8f;
    font-size: 0.65rem;
    display: block;
}


/*--------------------*/

.fil-block {
    position: sticky;
    bottom: 0;
    z-index: 100;
    margin: 0 2% 0 2%;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Aligne le bouton à droite */
}

/* Bouton Palette */
.btn-fil {
    background: var(--bordeaux-main);
    border: 1px solid var(--border-color);
    border-bottom: none; /* Raccord visuel avec le panneau du bas */
    color: var(--text-main);
    padding: 0.4rem 0.8rem;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    font-size: 0.8rem;
    margin: 0 10px 0 0; /* Décalage par rapport au bord droit */
    transition: background-color 0.2s;
}

.btn-fil:hover {
    background-color: var(--bordeaux-light);
}

/*--------------------*/
/* Layout pour aligner le défilement et les flèches */
.used-colors-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

/* Style du message lorsque la grille est vide */
.empty-msg {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
    padding: 0.4rem 0;
}

/* Animation et interaction au survol des couleurs du patron */
.used-color-item {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.used-color-item:hover {
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.scroll-arrow-right,
.scroll-arrow-left {
    background: var(--bordeaux-light);                 /* Fond bordeaux clair */
    border: 1px solid var(--border-color);             /* Bordure fine */
    color: var(--text-main);                           /* Texte lumineux */
    padding: 0.4rem 0.8rem;                            /* Taille des boutons de défilement */
    border-radius: 4px;                                /* Coins arrondis */
    cursor: pointer;                                   /* Curseur interactif */
    font-size: 0.8rem;                                 /* Taille du texte */
}

.scroll-arrow-right:hover,
.scroll-arrow-left:hover {
    background: var(--bordeaux-bright);                /* Fond bordeaux vif au survol */
}

/* Modale et effet de flou */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px); /* Floute l'arrière-plan */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-overlay.hidden {
    display: none;
}

.modal-box {
    background-color: var(--bg-card);
    border: 1px solid var(--bordeaux-bright);
    border-radius: 10px;
    padding: 1.5rem;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.modal-box h3 {
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.modal-box p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.modal-actions button {
    flex: 1; /* Force les deux boutons à occuper une largeur identique */
    margin-bottom: 0;
}

/* Style spécifique pour la modale d'exportation */
.modal-field {
    text-align: left;
    margin-bottom: 1.2rem;
}

.modal-field label {
    display: block;
    color: var(--text-main);
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
    font-weight: 500;
}

.modal-select {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background-color: #121014;
    color: #ffffff;
    border: 1px solid var(--bordeaux-bright, #8b1538);
    border-radius: 6px;
    font-size: 0.95rem;
    outline: none;
    cursor: pointer;
}

.modal-select:focus {
    border-color: #ff2a5f;
}

.checkbox-field {
    margin-bottom: 1.5rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    color: var(--text-main);
    font-size: 0.9rem;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--bordeaux-bright, #8b1538);
    cursor: pointer;
}

.btn-secondary {
    background-color: #2a2529;
    color: #ffffff;
    border: 1px solid #443c42;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s;
}

.btn-secondary:hover {
    background-color: #3b343a;
}

/* --- Panneau de contrôle compact pour la grille --- */
.grid-controls-panel {
    background: rgba(0, 0, 0, 0.15); /* Assombrit légèrement la zone pour la regrouper */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 1.5rem;
}

.panel-title {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6); /* Texte grisé/discret */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 10px 0;
    text-align: center;
}

.control-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.03); /* Léger fond pour chaque ligne */
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 6px 12px;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.btn-group {
    display: flex;
    gap: 6px;
}

/* Les petits boutons carrés + et - */
.btn-icon {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background-color: #6b1426; /* Ton bordeaux */
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.btn-icon:hover {
    background-color: #8c1b33; /* Bordeaux plus clair au survol */
    transform: scale(1.05);
}

.btn-icon:active {
    transform: scale(0.95); /* Petit effet d'enfoncement au clic */
}