/* Définition des couleurs et police*/     /* En-tête de section pour les variables globales */
:root {                                     /* Sélection de la racine pour déclarer les variables */
    --bg-dark: #121212;                     /* Variable : couleur de fond très sombre */
    --bg-card: #1e1117;                     /* Variable : fond bordeaux foncé pour les cartes */
    --bordeaux-dark: #4a0d1b;               /* Variable : nuance bordeaux sombre */
    --bordeaux-main: #6b1426;               /* Variable : bordeaux principal */
    --bordeaux-light: #942138;              /* Variable : bordeaux clair */
    --bordeaux-bright: #b82d49;             /* Variable : bordeaux vif pour survol/accents */
    --text-main: #f5f5f5;                   /* Variable : texte clair principal */
    --text-muted: #bfb0b5;                  /* Variable : texte secondaire légèrement grisé */
    --border-color: #521522;                /* Variable : couleur des bordures */
    --font-family: Verdana, sans-serif;    /* Variable : famille de polices globale */
}                                           /* Fin des variables globales */

.image-layout{                              /* Structure globale de la page d'édition */
    display: flex;                          /* Mode Flexbox vertical pour empiler les blocs */
    flex-direction: column;                 /* Orientation en colonne */
    gap: 1.5rem;                            /* Espacement vertical entre les éléments */
    padding: 1.5rem 2%;                     /* Marges internes du conteneur principal */
    flex: 1;                                /* Occupation de tout l'espace vertical dispo */
}                                           /* Fin de la structure globale */

/*-----------------*/                       /* Séparateur logique de section */
/* Bloc Paramètres */                       /* Titre de section : zone des paramètres */
/*-----------------*/                       /* Séparateur logique de section */

.params-header {
    display: flex;
    justify-content: space-between; /* Place le titre à gauche et l'input à droite (la zone verte) */
    align-items: center;            /* Centre verticalement */
    width: 100%;                    /* Prend toute la largeur pour forcer le saut de ligne aux éléments suivants */
    border-bottom: 1px solid var(--border-color); /* Ligne de séparation déplacée ici */
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    gap: 1rem;                      /* Espace entre le titre et l'input */
}

.params-sidebar{                            /* Conteneur du panneau latéral de configuration */
    width: 100%;                            /* Occupation complète de la largeur */
    display: flex;                          /* Activation du mode Flexbox */
    flex-direction: row;                    /* Disposition horizontale des paramètres */
    flex-wrap: wrap;                        /* Retour à la ligne si manque de place */
    align-items: flex-start;                /* Alignement des cartes par le haut */
    gap: 1rem;                              /* Espacement entre les sous-groupes */
    background-color: var(--bg-card);       /* Application du fond bordeaux foncé */
    border: 1px solid var(--border-color);  /* Bordure bordeaux discrète */
    border-radius: 10px;                    /* Coins arrondis du panneau */
    padding: 1.5rem;                        /* Rembourrage interne du bloc */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Ombrage doux sous le panneau */
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; /* Effet de transition fluide au survol */
}                                           /* Fin de la barre de paramètres */

.params-sidebar:hover{                      /* État au survol du panneau latéral */
    border-color: var(--bordeaux-bright);   /* Bordure plus vive au survol */
    box-shadow: 0 6px 18px rgba(184, 45, 73, 0.2); /* Halo bordeaux brillant au survol */
}                                           /* Fin du style de survol */

.params-sidebar h2 {                        /* Titre principal du panneau de paramètres */
    font-size: 1.2rem;                      /* Taille de police du titre */
    color: var(--text-main);                /* Couleur de texte claire */
    border-bottom: 0;                       /* Ligne de séparation sous le titre */
    padding-bottom: 0;                      /* Espace sous le texte avant la ligne */
    width: auto;                            /* Prend toute la largeur pour forcer le saut */
    margin-bottom: 0;                       /* Espace sous le titre */
    white-space: nowrap;
}                                           /* Fin du style du titre H2 */

.title-input {
    flex: 1;                                /* Permet à l'input de s'étirer et remplir tout l'espace disponible */
    background-color: var(--bg-dark);       /* Fond sombre */
    border: 1px solid var(--border-color);  /* Bordure bordeaux discrète */
    color: var(--text-main);                /* Texte clair */
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-family: var(--font-family);
    font-size: 1rem;
    transition: border-color 0.2s;
}

.title-input:focus {
    outline: none;
    border-color: var(--bordeaux-bright);   /* S'illumine au clic */
}

/*-----------------*/                       /* Séparateur logique de section */
/* Selection image */                       /* Titre de section : zone d'import d'image */
/*-----------------*/                       /* Séparateur logique de section */

.drop-zone{                                 /* Zone de glisser-déposer de fichier */
    border: 2px dashed var(--border-color); /* Bordure pointillée pour symboliser le dépôt */
    border-radius: 8px;                     /* Coins arrondis */
    padding: 1rem;                          /* Marge interne */
    text-align: center;                     /* Alignement centré du texte/icône */
    cursor: pointer;                        /* Curseur main interactif */
    background-color: var(--bg-card);       /* Couleur de fond */
    transition: border-color 0.2s;          /* Animation fluide de changement de bordure */
    width: 220px;                           /* Largeur fixe pour le bloc de dépôt */
    min-height: 170px;                      /* Hauteur minimale */
    flex-shrink: 0;                         /* Empêche le bloc de trétrécir en flexbox */
}                                           /* Fin de la zone de dépôt */

.drop-zone:hover {                          /* Survol de la zone de dépôt */
    border-color: var(--bordeaux-bright);   /* Changement de couleur des pointillés */
}                                           /* Fin du survol dépôt */

.drop-phase1 p {                            /* Texte d'instruction dans la zone de dépôt */
    font-size: 0.85rem;                     /* Petite taille de texte */
    color: var(--text-muted);               /* Couleur de texte adoucie */
}                                           /* Fin du texte d'instruction */

.icon-drop{                                 /* Icône d'image de la zone de dépôt */
    font-size: 3rem;                        /* Grande taille d'émoji */
    display: block;                         /* Passage en élément bloc */
    margin-bottom: 0.5rem;                  /* Espace sous l'icône */
}                                           /* Fin du style de l'icône */

.drop-phase2{}                              /* Sélecteur réservé pour la phase d'aperçu */

.img-preview{                               /* Image d'aperçu une fois importée */
    max-width: 100%;                        /* Adaptation à la largeur du cadre */
    max-height: 120px;                      /* Limitation de la hauteur maximale */
    border-radius: 4px;                     /* Léger arrondi des coins de la miniature */
}                                           /* Fin de l'aperçu */

/*--------------------*/                    /* Séparateur logique de section */
/*   Mode dimension   */                    /* Titre de section : réglages de taille */
/* Largeur et hauteur */                    /* Sous-titre : entrées numériques */
/* Couleur et Générer */                    /* Sous-titre : bouton et paramètres de fils */
/*--------------------*/                    /* Séparateur logique de section */

/* Espacement vertical homogène entre les champs d'une même colonne */
.param-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: 1;
}

.param-group{                               /* Groupe d'options individuel */
    display: flex;                          /* Mode Flexbox */
    flex-direction: column;                 /* Alignement vertical label/champ */
    gap: 0.4rem;                            /* Espacement entre le label et l'input */
    flex: 1;                                /* Redimensionnement équitable en Flexbox */
    min-width: 220px;                       /* Largeur minimale recommandée */
}                                           /* Fin du groupe de paramètre */

.param-group input[type="number"] {         /* Champs de saisie numérique */
    background-color: var(--bg-dark);       /* Fond sombre pour les champs de texte */
    border: 1px solid var(--border-color);  /* Bordure bordeaux discrète */
    color: var(--text-main);                /* Texte de saisie blanc/clair */
    padding: 0.5rem;                        /* Espace interne de frappe */
    border-radius: 4px;                     /* Coins arrondis des inputs */
}                                           /* Fin des champs numériques */

.param-group input:disabled {               /* État désactivé d'un champ numérique */
    opacity: 0.55;                          /* Rendu semi-transparent */
    cursor: not-allowed;                    /* Curseur d'interdiction au survol */
    background-color: var(--bg-card);       /* Fond assombri */
    border-color: var(--border-color);      /* Conservation de la bordure d'origine */
    color: var(--text-muted);               /* Texte adouci */
}                                           /* Fin de l'état désactivé */

/* Espacement vertical homogène entre les champs d'une même colonne */
.param-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: 1;
}

/* Force le bouton générer à s'aligner en bas de sa colonne */
.column-generate {
    justify-content: space-between;
}

.generate-group {
    margin-top: auto;
    justify-content: flex-end;
}

/* Titres plus élégants, moins agressifs que les majuscules pures */
.group-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    text-transform: capitalize;
}                                   /* Fin du titre de groupe */

.mode-selector {                            /* Conteneur pour boutons radios personnalisés */
    display: flex;                          /* Flexbox pour empiler les choix */
    flex-direction: column;                 /* Disposition verticale */
    gap: 4px;                               /* Faible écartement entre les boutons */
}                                           /* Fin du sélecteur de mode */

.mode-selector input[type="radio"] {        /* Masquage des puces radios natives */
    display: none;                          /* Cacher le bouton radio HTML classique */
}                                           /* Fin de la suppression des boutons par défaut */

.mode-selector label {                      /* Apparence personnalisée des options */
    display: flex;                          /* Flexbox pour centrer le libellé */
    justify-content: center;                /* Centrage horizontal */
    align-items: center;                    /* Centrage vertical */
    height: 28px;                           /* Hauteur fixe d'un bouton */
    background: #2a060f;                    /* Fond bordeaux très obscur */
    border: 1px solid var(--border-color);  /* Bordure du bouton */
    border-radius: 6px;                     /* Coins légers arrondis */
    color: var(--text-main);                /* Couleur du texte */
    cursor: pointer;                        /* Pointer au survol */
    transition: all 0.2s ease;              /* Effet de transition globale sur les états */
    font-size: 0.80rem;                     /* Petite taille de texte */
    padding: 0 10px;                        /* Espacement interne latéral */
}                                           /* Fin du bouton personnalisable */

.mode-selector label:hover {                /* Style au survol d'un choix non sélectionné */
    border-color: var(--bordeaux-bright);   /* Éclaircissement de la bordure */
    background: #420c18;                    /* Fond légèrement plus clair */
}                                           /* Fin du survol d'option */

/* Ajustement du bouton actif pour qu'il respecte ton thème bordeaux */
.mode-selector input:checked + label {
    background: var(--bordeaux-main);
    border-color: var(--bordeaux-bright);
    color: white;
    font-weight: bold;
    box-shadow: 0 0 8px rgba(184, 45, 73, 0.3); /* Halo bordeaux plus subtil */
}

/* Retouche du bouton Générer pour qu'il prenne toute la largeur disponible */
.btn-gener {
    background-color: var(--bordeaux-bright); /* Plus vif pour inciter au clic */
    font-family: var(--font-family);
    color: var(--text-main);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
    transition: all 0.2s;
    width: 100%; /* Prend toute la largeur de sa colonne */
    height: 44px; /* Un peu moins massif */
    align-self: center;
}

.btn-gener:hover {
    background-color: #d13554; /* Un peu plus clair au survol */
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}                                          /* Fin du style actif radio */

.help-text{                                 /* Sous-titres d'aide explicatifs */
    font-size: 0.75rem;                     /* Très petite taille de police */
    color: var(--text-main);                /* Teinte textuelle principale */
}                                           /* Fin du texte d'aide */

.summary-info{                              /* Texte de résumé des dimensions générées */
    font-size: 0.8rem;                      /* Petite taille de police */
    color: var(--text-muted);               /* Couleur grise/rosée discrète */
    text-align: center;                     /* Alignement centré */
}                                           /* Fin du résumé d'information */


/*------------------*/                       /* Séparateur logique de section */
/* Zone d'affichage */                       /* Titre de section : rendu visuel */
/*------------------*/                       /* Séparateur logique de section */

.display-zone{                              /* Zone de droite dédiée au canevas */
    flex: 1;                                /* Étirement pour remplir l'espace restant */
    display: flex;                          /* Flexbox vertical */
    flex-direction: column;                 /* Orientation en colonne */
}                                           /* Fin de la zone de rendu */

/* Phase 1 */                               /* Indicateur de phase : état initial */

.display-phase1{                            /* Cadre vide d'attente d'importation */
    flex: 1;                                /* Occupe toute la hauteur disponible */
    display: flex;                          /* Activation Flexbox */
    flex-direction: column;                 /* Orientation verticale */
    justify-content: center;                /* Centrage vertical du contenu */
    align-items: center;                    /* Centrage horizontal du contenu */
    min-height: 400px;                      /* Hauteur minimale de confort */
    color: var(--text-muted);               /* Couleur du message d'attente */
    background-color: var(--bg-card);       /* Application du fond sombre bordeaux */
    border: 1px solid var(--border-color);  /* Bordure du cadre */
    border-radius: 10px;                    /* Coins arrondis */
    padding: 1.5rem;                        /* Rembourrage interne */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Ombre portée */
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; /* Animation de transition */
}                                           /* Fin de la phase 1 */

.display-phase1:hover{                      /* Effet au survol du cadre vide */
    border-color: var(--bordeaux-bright);   /* Changement de couleur de la bordure */
    box-shadow: 0 6px 18px rgba(184, 45, 73, 0.2); /* Ombre rosée lumineuse */
}                                           /* Fin du survol de la phase 1 */

.display-icon{                              /* Émoji géant dans la zone vide */
    font-size: 5rem;                        /* Grande taille pour l'émoji */
    display: block;                         /* Passage en élément bloc */
    margin-bottom: 0.5rem;                  /* Espacement sous l'émoji */
}                                           /* Fin de l'icône de phase */

/* Phase 2 */                               /* Indicateur de phase : état de calcul */

.display-phase2{                            /* Écran de chargement temporaire pendant la création */
    flex: 1;                                /* Occupe la hauteur disponible */
    display: flex;                          /* Flexbox */
    flex-direction: column;                 /* Alignement vertical */
    justify-content: center;                /* Centrage vertical */
    align-items: center;                    /* Centrage horizontal */
    min-height: 400px;                      /* Hauteur minimale */
    color: var(--text-muted);               /* Texte adouci */
    background-color: var(--bg-card);       /* Fond sombre bordeaux */
    border: 1px solid var(--border-color);  /* Bordure bordeaux */
    border-radius: 10px;                    /* Arronde les angles */
    padding: 1.5rem;                        /* Rembourrage interne */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Ombrage du composant */
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; /* Effet au survol */
}                                           /* Fin de la phase 2 */

.display-phase2:hover{                      /* Survol du cadre de chargement */
    border-color: var(--bordeaux-bright);   /* Bordure rosée au survol */
    box-shadow: 0 6px 18px rgba(184, 45, 73, 0.2); /* Glow bordeaux vif */
}                                           /* Fin du survol de la phase 2 */

/* Phase 3 : Organisation verticale du panneau de contrôle et de la grille */
.display-phase3 {
    display: flex;
    flex-direction: column; /* Force l'empilement vertical (outils puis grille) */
    gap: 1rem;              /* Espacement régulier entre les outils et le canvas */
    width: 100%;
    height: auto;
    min-height: fit-content;
    max-height: none;
    overflow: visible;
}                                           /* Fin de la phase 3 */

.tool-bar{                                  /* Barre d'outils et de contrôle du patron */
    display: flex;                          /* Flexbox pour regrouper les commandes */
    flex-wrap: wrap;                        /* Passer à la ligne sur petit écran */
    gap: 1rem;                              /* Espacement entre groupes de boutons */
    align-items: center;                    /* Centrage vertical des éléments */
    justify-content: space-between;         /* Espacement maximal entre blocs d'outils */
    background-color: var(--bg-card);       /* Fond bordeaux sombre */
    border: 1px solid var(--border-color);  /* Bordure du bloc outils */
    border-radius: 10px;                    /* Angles arrondis */
    padding: 1.5rem;                        /* Définition du rembourrage interne */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Ombre sous la barre d'outils */
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; /* Effet de transition au survol */
}                                           /* Fin de la barre d'outils */

.tool-bar:hover{                            /* Survol de la barre d'outils */
    border-color: var(--bordeaux-bright);   /* Changement de couleur de bordure */
    box-shadow: 0 6px 18px rgba(184, 45, 73, 0.2); /* Surbrillance rosée */
}                                           /* Fin du survol de la barre d'outils */

.tool-column{                               /* Groupe d'outils spécifiques en colonne/ligne */
    display: flex;                          /* Flexbox pour aligner boutons ou sliders */
    align-items: center;                    /* Centrage vertical */
    gap: 0.6rem;                            /* Écart entre les éléments du groupe */
    font-size: 0.8rem;                      /* Taille de texte réduite */
}                                           /* Fin de la colonne d'outils */

.tool-column input[type="range"] {          /* Style des curseurs de zoom */
    accent-color: var(--bordeaux-main);     /* Couleur bordeaux sur la poignée du curseur */
}                                           /* Fin du style des curseurs */

.tool-column select {                       /* Style du sélecteur de filtrage par couleur */
    background: var(--bg-card);             /* Fond sombre bordeaux */
    color: white;                           /* Texte blanc */
    border: 1px solid var(--border-color);  /* Bordure bordeaux */
    padding: 0.4rem;                        /* Espace de frappe/clic interne */
    border-radius: 4px;                     /* Angles arrondis */
}                                           /* Fin du sélecteur */

.btn-primary{                               /* Boutons d'action standards dans la barre d'outils */
    background-color: var(--bordeaux-main); /* Fond bordeaux principal */
    color: var(--text-main);                /* Texte clair */
    border: none;                           /* Pas de bordure par défaut */
    padding: 0.7rem 1.2rem;                 /* Rembourrage interne */
    border-radius: 6px;                     /* Coins arrondis */
    cursor: pointer;                        /* Pointeur au survol */
    font-family: var(--font-family);        /* Police uniforme */
    font-weight: bold;                      /* Texte mis en valeur */
    transition: background-color 0.2s;      /* Effet visuel au survol */
}                                           /* Fin des boutons principaux */

/*----------------*/                       /* Séparateur logique de section */
/* Bar info cases */                       /* Titre de section : informations sous le curseur */
/*----------------*/                       /* Séparateur logique de section */

.info-bar{                                  /* Bandeau dynamique indiquant les détails du point survolé */
    background: var(--bg-card);             /* Couleur de fond bordeaux sombre */
    border: 1px solid var(--border-color);  /* Bordure du bandeau */
    padding: 0.5rem 1rem;                   /* Marge interne */
    border-radius: 6px;                     /* Coins arrondis */
    font-size: 0.85rem;                     /* Petite police */
    font-family: monospace;                 /* Police à largeur fixe pour aligner les chiffres */
}                                           /* Fin de la barre d'information */

/*----------------*/                       /* Séparateur logique de section */
/* -------------- */                       /* Doublon d'en-tête de section pour le canevas */
/*----------------*/                       /* Séparateur logique de section */

.grid-wrapper {
    width: fit-content;
    height: auto;
    max-height: none; /* Laisse s'étendre sans couper */
    overflow: visible;
    margin: 0 auto;   /* Centre la grille horizontalement */
}

.mode-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.4rem; /* Espace entre les 3 boutons */
}

#output-canvas {
    display: block;
    max-width: none; /* Empêche le CSS d'écraser la taille calculée en JS */
}
/*---------------*/                        /* Séparateur logique de section */
/* Palette basse */                        /* Titre de section : légende des fils DMC */
/*---------------*/                        /* Séparateur logique de section */

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

#output-canvas {
    image-rendering: pixelated; /* Garde les bords nets et sans flou */
    image-rendering: crisp-edges; /* Alternative pour certains navigateurs */
    display: inline-block;      /* Agit avec text-align: center de son parent */
    max-width: none;            /* Empêche la largeur d'être compressée */
    flex-shrink: 0;             /* Empêche la compression au cas où un parent est en flex */
}


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

.zoom-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.zoom-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
}

.zoom-icon {
    font-size: 1rem;
}

.zoom-label {
    color: var(--text-main);
    white-space: nowrap;
}

.zoom-row input[type="range"] {
    width: 110px;
    accent-color: var(--bordeaux-bright);
}

.zoom-val {
    color: #ffb700;
    font-weight: bold;
    font-family: monospace;
    min-width: 30px;
}

/* Modale et effet de flou pour l'exportation */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    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: 1.5rem;
}
.modal-actions {
    display: flex; gap: 1rem; justify-content: center;
}
.modal-actions button { flex: 1; }

.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);
    border-radius: 6px; font-size: 0.95rem; outline: none;
}
.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);
}

.btn-secondary {
    background-color: #2a2529; color: #ffffff;
    border: 1px solid #443c42; padding: 0.6rem 1.2rem;
    border-radius: 6px; cursor: pointer; font-weight: bold;
}
.btn-secondary:hover { background-color: #3b343a; }