/* Styles pour Ski Mask Me Clone */
body {
    display: grid;
    grid-template-areas:
        "header header header"
        "aside-left main aside-right";
    grid-template-columns: 250px 1fr 250px;
    grid-template-rows: auto 1fr;
    margin: 0;
    font-family: sans-serif;
    background-color: #0052FF; /* Updated background */
    color: #FFFFFF; /* Updated default text color */
}

header {
    grid-area: header;
    background-color: #0039B3; /* Darker blue header */
    padding: 10px 20px; /* Ajout d'un peu plus de padding horizontal */
    border-bottom: 1px solid #80A9FF; /* Lighter blue border */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo {
    font-size: 1.5em; /* Taille de police plus grande pour le logo */
    font-weight: bold;
    /* Ajout pour aligner l'image et le texte */
    display: flex; /* Utiliser flexbox pour l'alignement */
    align-items: center; /* Centrer verticalement les éléments */
}

/* Style pour l'image du logo */
.logo-image {
  height: 30px; /* Hauteur souhaitée pour le logo (ajustez si besoin) */
  width: auto; /* Garder les proportions */
  margin-right: 10px; /* Espace entre l'image et le texte */
}

header .header-links a,
header .header-buttons button {
    margin-left: 15px;
    color: #FFFFFF; /* Updated text color */
    text-decoration: none;
    background: #0047D1; /* Updated button background */
    padding: 8px 15px;
    font-size: 0.9em;   /* Taille de police légèrement réduite */
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease; /* Ajout d'une transition douce */
}

header .header-links a:hover,
header .header-buttons button:hover {
    background-color: #4D94FF; /* Lighter blue on hover */
}

.aside-left {
    grid-area: aside-left;
    background-color: #0039B3; /* Darker blue sidebar */
    padding: 20px;
    border-right: 1px solid #80A9FF; /* Lighter blue border */
    display: flex;
    flex-direction: column; /* Organiser les sections verticalement */
    color: #E0E0E0; /* Light grey text for sidebar */
}

main {
    grid-area: main;
    background-color: #0047D1; /* Mid-blue main area */
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.main-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    background: #0039B3; /* Darker blue controls background */
    padding: 10px;
    border-radius: 4px;
}

.main-controls .left-controls select,
.main-controls .left-controls button {
    margin-right: 10px;
    padding: 8px 12px; /* Ajustement padding */
    background: #0052FF; /* Main blue button */
    border: none;
    color: #FFFFFF; /* White text */
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.main-controls .left-controls select:hover,
.main-controls .left-controls button:hover {
    background-color: #4D94FF; /* Lighter blue hover */
}

.main-controls .right-controls button {
    margin-left: 10px;
    padding: 8px 12px; /* Ajustement padding */
    background: #0052FF; /* Main blue button */
    border: none;
    color: #FFFFFF; /* White text */
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.main-controls .right-controls button:hover {
     background-color: #4D94FF; /* Lighter blue hover */
}
/* Style spécifique pour le bouton Download */
.main-controls .right-controls button:last-child {
    background-color: #28a745; /* Keep green */
}
.main-controls .right-controls button:last-child:hover {
    background-color: #218838; /* Darker green hover */
}


.canvas-area {
    flex-grow: 1; /* Prend l'espace restant */
    background-color: #FFFFFF; /* Keep canvas white */
    border: 1px solid #80A9FF; /* Lighter blue border */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333; /* Dark text for placeholder inside canvas */
    overflow: hidden; /* Cache ce qui dépasse */
    position: relative; /* Pour positionner les éléments enfants (image, stickers) */
}

.aside-right {
    grid-area: aside-right;
    background-color: #0039B3; /* Darker blue sidebar */
    padding: 20px;
    border-left: 1px solid #80A9FF; /* Lighter blue border */
    color: #E0E0E0; /* Light grey text for sidebar */
     /* ... autres styles existants ... */
    position: sticky;  /* AJOUTEZ CETTE LIGNE */
    top: 20px;         /* AJOUTEZ CETTE LIGNE (définit l'espace depuis le haut) */
    /* Ajout pour gérer le contenu si la barre elle-même devient trop haute */
    max-height: calc(100vh - 40px); /* AJOUTEZ CETTE LIGNE (limite la hauteur et permet le scroll interne) */
    overflow-y: auto;  /* AJOUTEZ CETTE LIGNE (active le scroll interne si nécessaire) */
    /* ... autres styles existants comme la transition ... */
}

h2, h3 {
    margin-top: 0;
    border-bottom: 1px solid #80A9FF; /* Lighter blue border */
    padding-bottom: 5px;
    margin-bottom: 15px; /* Espace après les titres */
    color: #FFFFFF; /* White titles */
}
h3 {
    font-size: 1em;
    color: #F0F0F0; /* Slightly off-white sub-titles */
}

.stickers-section p {
    font-size: 0.9em;
    color: #D0D0D0; /* Light grey text */
    margin-bottom: 15px;
}

.stickers-list,
.custom-stickers,
.quick-tips,
.edit-sticker {
    margin-bottom: 30px; /* Plus d'espace entre les sections */
}

.sticker-item-container { /* Conteneur pour les stickers par défaut */
    display: flex;
    gap: 10px; /* Espace entre les stickers */
}

.sticker-item {
    display: inline-block;
    width: 60px; /* Légèrement plus grand */
    height: 60px; /* Légèrement plus grand */
    background-color: #555;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent; /* Pour l'effet de sélection */
    transition: border-color 0.2s ease;
}
.sticker-item:hover {
    border-color: #aaa;
}

.custom-stickers {
    display: flex;
    align-items: center;
    gap: 10px; /* Espace entre le bouton et le texte */
}

.upload-box {
    width: 60px;
    height: 60px;
    border: 2px dashed #555;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 24px;
    color: #555;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.upload-box:hover {
    background-color: #222;
    color: #888;
    border-color: #888;
}
.custom-stickers span {
    color: #aaa;
    font-size: 0.9em;
}

.quick-tips ul {
    list-style: none;
    padding: 0;
    font-size: 0.9em;
    color: #aaa;
}

.quick-tips li {
    margin-bottom: 8px; /* Un peu plus d'espace */
    line-height: 1.4; /* Meilleure lisibilité */
}
.quick-tips li::before { /* Ajout de puces personnalisées */
    content: "• ";
    color: #666;
}

.edit-sticker h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.edit-sticker h2 button { /* Style pour le bouton supprimer */
    background: none;
    border: none;
    color: #ff4d4d; /* Rouge */
    font-size: 1.2em;
    cursor: pointer;
    padding: 0 5px;
}
.edit-sticker h2 button:hover {
    color: #ff1a1a;
}


.edit-controls {
    display: grid; /* Utilisation de grid pour les boutons flip */
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.edit-controls button {
    /* display: block; */ /* Supprimé car géré par grid */
    /* width: 100%; */ /* Supprimé car géré par grid */
    /* margin-bottom: 10px; */ /* Supprimé car géré par gap */
    padding: 8px;
    background: #333;
    border: none;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease;
}
.edit-controls button:hover {
    background-color: #555;
}

.rotation-control {
    margin-bottom: 20px;
}

.rotation-control div { /* Conteneur pour le slider et le bouton reset */
    display: flex;
    align-items: center;
    gap: 10px;
}

.rotation-control label {
    display: block;
    margin-bottom: 8px; /* Espace sous le label */
    color: #ccc;
}

.rotation-control input[type=range] {
    width: 100%;
    cursor: pointer;
    flex-grow: 1; /* Prend l'espace disponible */
}

.rotation-control button { /* Style pour le bouton reset rotation */
     background: none;
     border: none;
     color: #ccc;
     font-size: 1.2em;
     cursor: pointer;
     padding: 0 5px;
}
.rotation-control button:hover {
    color: #fff;
}

/* Styles spécifiques pour le slider (apparence basique) */
input[type=range] {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  height: 8px; /* Specified height */
  background: #555; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  border-radius: 4px;
}

input[type=range]:hover {
  opacity: 1; /* Fully visible on hover */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 16px; /* Set a specific slider handle width */
  height: 16px; /* Slider handle height */
  background: #ddd; /* White background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 50%; /* Circular */
}

input[type=range]::-moz-range-thumb {
  width: 16px; /* Set a specific slider handle width */
  height: 16px; /* Slider handle height */
  background: #ddd; /* White background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 50%; /* Circular */
  border: none; /* Remove border in Firefox */
}


.canvas-area {
    flex-grow: 1; /* Prend l'espace restant */
    background-color: #FFFFFF; /* Keep canvas white */
    border: 1px solid #80A9FF; /* Lighter blue border */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333; /* Dark text for placeholder inside canvas */
    overflow: hidden; /* Cache ce qui dépasse */
    position: relative; /* Pour positionner les éléments enfants (image, stickers) */
}

.aside-right {
    grid-area: aside-right;
    background-color: #0039B3; /* Darker blue sidebar */
    padding: 20px;
    border-left: 1px solid #80A9FF; /* Lighter blue border */
    color: #E0E0E0; /* Light grey text for sidebar */
}

h2, h3 {
    margin-top: 0;
    border-bottom: 1px solid #80A9FF; /* Lighter blue border */
    padding-bottom: 5px;
    margin-bottom: 15px; /* Espace après les titres */
    color: #FFFFFF; /* White titles */
}
h3 {
    font-size: 1em;
    color: #F0F0F0; /* Slightly off-white sub-titles */
}

.stickers-section p {
    font-size: 0.9em;
    color: #D0D0D0; /* Light grey text */
    margin-bottom: 15px;
}

.stickers-list,
.custom-stickers,
.quick-tips,
.edit-sticker {
    margin-bottom: 30px; /* Plus d'espace entre les sections */
}

.sticker-item-container { /* Conteneur pour les stickers par défaut */
    display: flex;
    gap: 10px; /* Espace entre les stickers */
}

.sticker-item {
    display: inline-block;
    width: 60px; /* Légèrement plus grand */
    height: 60px; /* Légèrement plus grand */
    background-color: #555;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent; /* Pour l'effet de sélection */
    transition: border-color 0.2s ease;
}
.sticker-item:hover {
    border-color: #aaa;
}

.custom-stickers {
    display: flex;
    align-items: center;
    gap: 10px; /* Espace entre le bouton et le texte */
}

.upload-box {
    width: 60px;
    height: 60px;
    border: 2px dashed #555;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 24px;
    color: #555;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.upload-box:hover {
    background-color: #222;
    color: #888;
    border-color: #888;
}
.custom-stickers span {
    color: #aaa;
    font-size: 0.9em;
}

.quick-tips ul {
    list-style: none;
    padding: 0;
    font-size: 0.9em;
    color: #aaa;
}

.quick-tips li {
    margin-bottom: 8px; /* Un peu plus d'espace */
    line-height: 1.4; /* Meilleure lisibilité */
}
.quick-tips li::before { /* Ajout de puces personnalisées */
    content: "• ";
    color: #666;
}

.edit-sticker h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.edit-sticker h2 button { /* Style pour le bouton supprimer */
    background: none;
    border: none;
    color: #ff4d4d; /* Rouge */
    font-size: 1.2em;
    cursor: pointer;
    padding: 0 5px;
}
.edit-sticker h2 button:hover {
    color: #ff1a1a;
}


.edit-controls {
    display: grid; /* Utilisation de grid pour les boutons flip */
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.edit-controls button {
    /* display: block; */ /* Supprimé car géré par grid */
    /* width: 100%; */ /* Supprimé car géré par grid */
    /* margin-bottom: 10px; */ /* Supprimé car géré par gap */
    padding: 8px;
    background: #333;
    border: none;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease;
}
.edit-controls button:hover {
    background-color: #555;
}

.rotation-control {
    margin-bottom: 20px;
}

.rotation-control div { /* Conteneur pour le slider et le bouton reset */
    display: flex;
    align-items: center;
    gap: 10px;
}

.rotation-control label {
    display: block;
    margin-bottom: 8px; /* Espace sous le label */
    color: #ccc;
}

.rotation-control input[type=range] {
    width: 100%;
    cursor: pointer;
    flex-grow: 1; /* Prend l'espace disponible */
}

.rotation-control button { /* Style pour le bouton reset rotation */
     background: none;
     border: none;
     color: #ccc;
     font-size: 1.2em;
     cursor: pointer;
     padding: 0 5px;
}
.rotation-control button:hover {
    color: #fff;
}

/* Styles spécifiques pour le slider (apparence basique) */
input[type=range] {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  height: 8px; /* Specified height */
  background: #555; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  border-radius: 4px;
}

input[type=range]:hover {
  opacity: 1; /* Fully visible on hover */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 16px; /* Set a specific slider handle width */
  height: 16px; /* Slider handle height */
  background: #ddd; /* White background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 50%; /* Circular */
}

input[type=range]::-moz-range-thumb {
  width: 16px; /* Set a specific slider handle width */
  height: 16px; /* Slider handle height */
  background: #ddd; /* White background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 50%; /* Circular */
  border: none; /* Remove border in Firefox */
}


.canvas-area {
    flex-grow: 1; /* Prend l'espace restant */
    background-color: #FFFFFF; /* Keep canvas white */
    border: 1px solid #80A9FF; /* Lighter blue border */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333; /* Dark text for placeholder inside canvas */
    overflow: hidden; /* Cache ce qui dépasse */
    position: relative; /* Pour positionner les éléments enfants (image, stickers) */
}

.aside-right {
    grid-area: aside-right;
    background-color: #0039B3; /* Darker blue sidebar */
    padding: 20px;
    border-left: 1px solid #80A9FF; /* Lighter blue border */
    color: #E0E0E0; /* Light grey text for sidebar */
}

h2, h3 {
    margin-top: 0;
    border-bottom: 1px solid #80A9FF; /* Lighter blue border */
    padding-bottom: 5px;
    margin-bottom: 15px; /* Espace après les titres */
    color: #FFFFFF; /* White titles */
}
h3 {
    font-size: 1em;
    color: #F0F0F0; /* Slightly off-white sub-titles */
}

.stickers-section p {
    font-size: 0.9em;
    color: #D0D0D0; /* Light grey text */
    margin-bottom: 15px;
}

.stickers-list,
.custom-stickers,
.quick-tips,
.edit-sticker {
    margin-bottom: 30px; /* Plus d'espace entre les sections */
}

.sticker-item-container { /* Conteneur pour les stickers par défaut */
    display: flex;
    gap: 10px; /* Espace entre les stickers */
}

.sticker-item {
    display: inline-block;
    width: 60px; /* Légèrement plus grand */
    height: 60px; /* Légèrement plus grand */
    background-color: #555;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent; /* Pour l'effet de sélection */
    transition: border-color 0.2s ease;
}
.sticker-item:hover {
    border-color: #aaa;
}

.custom-stickers {
    display: flex;
    align-items: center;
    gap: 10px; /* Espace entre le bouton et le texte */
}

.upload-box {
    width: 60px;
    height: 60px;
    border: 2px dashed #555;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 24px;
    color: #555;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.upload-box:hover {
    background-color: #222;
    color: #888;
    border-color: #888;
}
.custom-stickers span {
    color: #aaa;
    font-size: 0.9em;
}

.quick-tips ul {
    list-style: none;
    padding: 0;
    font-size: 0.9em;
    color: #aaa;
}

.quick-tips li {
    margin-bottom: 8px; /* Un peu plus d'espace */
    line-height: 1.4; /* Meilleure lisibilité */
}
.quick-tips li::before { /* Ajout de puces personnalisées */
    content: "• ";
    color: #666;
}

.edit-sticker h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.edit-sticker h2 button { /* Style pour le bouton supprimer */
    background: none;
    border: none;
    color: #ff4d4d; /* Rouge */
    font-size: 1.2em;
    cursor: pointer;
    padding: 0 5px;
}
.edit-sticker h2 button:hover {
    color: #ff1a1a;
}


.edit-controls {
    display: grid; /* Utilisation de grid pour les boutons flip */
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.edit-controls button {
    /* display: block; */ /* Supprimé car géré par grid */
    /* width: 100%; */ /* Supprimé car géré par grid */
    /* margin-bottom: 10px; */ /* Supprimé car géré par gap */
    padding: 8px;
    background: #333;
    border: none;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease;
}
.edit-controls button:hover {
    background-color: #555;
}

.rotation-control {
    margin-bottom: 20px;
}

.rotation-control div { /* Conteneur pour le slider et le bouton reset */
    display: flex;
    align-items: center;
    gap: 10px;
}

.rotation-control label {
    display: block;
    margin-bottom: 8px; /* Espace sous le label */
    color: #ccc;
}

.rotation-control input[type=range] {
    width: 100%;
    cursor: pointer;
    flex-grow: 1; /* Prend l'espace disponible */
}

.rotation-control button { /* Style pour le bouton reset rotation */
     background: none;
     border: none;
     color: #ccc;
     font-size: 1.2em;
     cursor: pointer;
     padding: 0 5px;
}
.rotation-control button:hover {
    color: #fff;
}

/* Styles spécifiques pour le slider (apparence basique) */
input[type=range] {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  height: 8px; /* Specified height */
  background: #555; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  border-radius: 4px;
}

input[type=range]:hover {
  opacity: 1; /* Fully visible on hover */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 16px; /* Set a specific slider handle width */
  height: 16px; /* Slider handle height */
  background: #ddd; /* White background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 50%; /* Circular */
}

input[type=range]::-moz-range-thumb {
  width: 16px; /* Set a specific slider handle width */
  height: 16px; /* Slider handle height */
  background: #ddd; /* White background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 50%; /* Circular */
  border: none; /* Remove border in Firefox */
}


.canvas-area {
    flex-grow: 1; /* Prend l'espace restant */
    background-color: #FFFFFF; /* Keep canvas white */
    border: 1px solid #80A9FF; /* Lighter blue border */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333; /* Dark text for placeholder inside canvas */
    overflow: hidden; /* Cache ce qui dépasse */
    position: relative; /* Pour positionner les éléments enfants (image, stickers) */
}

.aside-right {
    grid-area: aside-right;
    background-color: #0039B3; /* Darker blue sidebar */
    padding: 20px;
    border-left: 1px solid #80A9FF; /* Lighter blue border */
    color: #E0E0E0; /* Light grey text for sidebar */
}

h2, h3 {
    margin-top: 0;
    border-bottom: 1px solid #80A9FF; /* Lighter blue border */
    padding-bottom: 5px;
    margin-bottom: 15px; /* Espace après les titres */
    color: #FFFFFF; /* White titles */
}
h3 {
    font-size: 1em;
    color: #F0F0F0; /* Slightly off-white sub-titles */
}

.stickers-section p {
    font-size: 0.9em;
    color: #D0D0D0; /* Light grey text */
    margin-bottom: 15px;
}

.stickers-list,
.custom-stickers,
.quick-tips,
.edit-sticker {
    margin-bottom: 30px; /* Plus d'espace entre les sections */
}

.sticker-item-container { /* Conteneur pour les stickers par défaut */
    display: flex;
    gap: 10px; /* Espace entre les stickers */
}

.sticker-item {
    display: inline-block;
    width: 60px; /* Légèrement plus grand */
    height: 60px; /* Légèrement plus grand */
    background-color: #555;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent; /* Pour l'effet de sélection */
    transition: border-color 0.2s ease;
}
.sticker-item:hover {
    border-color: #aaa;
}

.custom-stickers {
    display: flex;
    align-items: center;
    gap: 10px; /* Espace entre le bouton et le texte */
}

.upload-box {
    width: 60px;
    height: 60px;
    border: 2px dashed #555;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 24px;
    color: #555;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.upload-box:hover {
    background-color: #222;
    color: #888;
    border-color: #888;
}
.custom-stickers span {
    color: #aaa;
    font-size: 0.9em;
}

.quick-tips ul {
    list-style: none;
    padding: 0;
    font-size: 0.9em;
    color: #aaa;
}

.quick-tips li {
    margin-bottom: 8px; /* Un peu plus d'espace */
    line-height: 1.4; /* Meilleure lisibilité */
}
.quick-tips li::before { /* Ajout de puces personnalisées */
    content: "• ";
    color: #666;
}

.edit-sticker h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.edit-sticker h2 button { /* Style pour le bouton supprimer */
    background: none;
    border: none;
    color: #ff4d4d; /* Rouge */
    font-size: 1.2em;
    cursor: pointer;
    padding: 0 5px;
}
.edit-sticker h2 button:hover {
    color: #ff1a1a;
}


.edit-controls {
    display: grid; /* Utilisation de grid pour les boutons flip */
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.edit-controls button {
    /* display: block; */ /* Supprimé car géré par grid */
    /* width: 100%; */ /* Supprimé car géré par grid */
    /* margin-bottom: 10px; */ /* Supprimé car géré par gap */
    padding: 8px;
    background: #333;
    border: none;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease;
}
.edit-controls button:hover {
    background-color: #555;
}

.rotation-control {
    margin-bottom: 20px;
}

.rotation-control div { /* Conteneur pour le slider et le bouton reset */
    display: flex;
    align-items: center;
    gap: 10px;
}

.rotation-control label {
    display: block;
    margin-bottom: 8px; /* Espace sous le label */
    color: #ccc;
}

.rotation-control input[type=range] {
    width: 100%;
    cursor: pointer;
    flex-grow: 1; /* Prend l'espace disponible */
}

.rotation-control button { /* Style pour le bouton reset rotation */
     background: none;
     border: none;
     color: #ccc;
     font-size: 1.2em;
     cursor: pointer;
     padding: 0 5px;
}
.rotation-control button:hover {
    color: #fff;
}

/* Styles spécifiques pour le slider (apparence basique) */
input[type=range] {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  height: 8px; /* Specified height */
  background: #555; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  border-radius: 4px;
}

input[type=range]:hover {
  opacity: 1; /* Fully visible on hover */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 16px; /* Set a specific slider handle width */
  height: 16px; /* Slider handle height */
  background: #ddd; /* White background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 50%; /* Circular */
}

input[type=range]::-moz-range-thumb {
  width: 16px; /* Set a specific slider handle width */
  height: 16px; /* Slider handle height */
  background: #ddd; /* White background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 50%; /* Circular */
  border: none; /* Remove border in Firefox */
}


.canvas-area {
    flex-grow: 1; /* Prend l'espace restant */
    background-color: #FFFFFF; /* Keep canvas white */
    border: 1px solid #80A9FF; /* Lighter blue border */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333; /* Dark text for placeholder inside canvas */
    overflow: hidden; /* Cache ce qui dépasse */
    position: relative; /* Pour positionner les éléments enfants (image, stickers) */
}

.aside-right {
    grid-area: aside-right;
    background-color: #0039B3; /* Darker blue sidebar */
    padding: 20px;
    border-left: 1px solid #80A9FF; /* Lighter blue border */
    color: #E0E0E0; /* Light grey text for sidebar */
}

h2, h3 {
    margin-top: 0;
    border-bottom: 1px solid #80A9FF; /* Lighter blue border */
    padding-bottom: 5px;
    margin-bottom: 15px; /* Espace après les titres */
    color: #FFFFFF; /* White titles */
}
h3 {
    font-size: 1em;
    color: #F0F0F0; /* Slightly off-white sub-titles */
}

.stickers-section p {
    font-size: 0.9em;
    color: #D0D0D0; /* Light grey text */
    margin-bottom: 15px;
}

.stickers-list,
.custom-stickers,
.quick-tips,
.edit-sticker {
    margin-bottom: 30px; /* Plus d'espace entre les sections */
}

.sticker-item-container { /* Conteneur pour les stickers par défaut */
    display: flex;
    gap: 10px; /* Espace entre les stickers */
}

.sticker-item {
    display: inline-block;
    width: 60px; /* Légèrement plus grand */
    height: 60px; /* Légèrement plus grand */
    background-color: #555;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent; /* Pour l'effet de sélection */
    transition: border-color 0.2s ease;
}
.sticker-item:hover {
    border-color: #aaa;
}

.custom-stickers {
    display: flex;
    align-items: center;
    gap: 10px; /* Espace entre le bouton et le texte */
}

.upload-box {
    width: 60px;
    height: 60px;
    border: 2px dashed #555;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 24px;
    color: #555;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.upload-box:hover {
    background-color: #222;
    color: #888;
    border-color: #888;
}
.custom-stickers span {
    color: #aaa;
    font-size: 0.9em;
}

.quick-tips ul {
    list-style: none;
    padding: 0;
    font-size: 0.9em;
    color: #aaa;
}

.quick-tips li {
    margin-bottom: 8px; /* Un peu plus d'espace */
    line-height: 1.4; /* Meilleure lisibilité */
}
.quick-tips li::before { /* Ajout de puces personnalisées */
    content: "• ";
    color: #666;
}

.edit-sticker h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.edit-sticker h2 button { /* Style pour le bouton supprimer */
    background: none;
    border: none;
    color: #ff4d4d; /* Rouge */
    font-size: 1.2em;
    cursor: pointer;
    padding: 0 5px;
}
.edit-sticker h2 button:hover {
    color: #ff1a1a;
}


.edit-controls {
    display: grid; /* Utilisation de grid pour les boutons flip */
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.edit-controls button {
    /* display: block; */ /* Supprimé car géré par grid */
    /* width: 100%; */ /* Supprimé car géré par grid */
    /* margin-bottom: 10px; */ /* Supprimé car géré par gap */
    padding: 8px;
    background: #333;
    border: none;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease;
}
.edit-controls button:hover {
    background-color: #555;
}

.rotation-control {
    margin-bottom: 20px;
}

.rotation-control div { /* Conteneur pour le slider et le bouton reset */
    display: flex;
    align-items: center;
    gap: 10px;
}

.rotation-control label {
    display: block;
    margin-bottom: 8px; /* Espace sous le label */
    color: #ccc;
}

.rotation-control input[type=range] {
    width: 100%;
    cursor: pointer;
    flex-grow: 1; /* Prend l'espace disponible */
}

.rotation-control button { /* Style pour le bouton reset rotation */
     background: none;
     border: none;
     color: #ccc;
     font-size: 1.2em;
     cursor: pointer;
     padding: 0 5px;
}
.rotation-control button:hover {
    color: #fff;
}

/* Styles spécifiques pour le slider (apparence basique) */
input[type=range] {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  height: 8px; /* Specified height */
  background: #555; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  border-radius: 4px;
}

input[type=range]:hover {
  opacity: 1; /* Fully visible on hover */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 16px; /* Set a specific slider handle width */
  height: 16px; /* Slider handle height */
  background: #ddd; /* White background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 50%; /* Circular */
}

input[type=range]::-moz-range-thumb {
  width: 16px; /* Set a specific slider handle width */
  height: 16px; /* Slider handle height */
  background: #ddd; /* White background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 50%; /* Circular */
  border: none; /* Remove border in Firefox */
}


.canvas-area {
    flex-grow: 1; /* Prend l'espace restant */
    background-color: #fff; /* Fond blanc pour le canvas */
    border: 1px solid #444;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333; /* Texte plus foncé pour le placeholder */
    overflow: hidden; /* Cache ce qui dépasse */
    position: relative; /* Pour positionner les éléments enfants (image, stickers) */
    position: relative; /* Nécessaire pour positionner les stickers absolument */
}

/* Style pour les stickers ajoutés sur le canvas */
.sticker-on-canvas {
    position: absolute;
    cursor: grab; /* Curseur pour indiquer qu'on peut déplacer */
    max-width: 100px; /* Limite la taille initiale, ajustable */
    user-select: none; /* Empêche la sélection de l'image comme du texte */
    /* Ajout d'une bordure pour la sélection */
    border: 2px solid transparent; /* Bordure transparente par défaut */
    transition: border-color 0.2s ease; /* Transition douce pour la sélection */
    /* Assure que les transformations (rotation, scale) partent du centre */
    transform-origin: center center; 
}

.sticker-on-canvas:active {
    cursor: grabbing; /* Curseur pendant le déplacement */
}

/* Style pour le sticker sélectionné */
.selected-sticker {
    border-color: #3498db; /* Bordure bleue pour indiquer la sélection */
    /* On pourrait ajouter d'autres indicateurs visuels ici */
}

.custom-stickers {
    display: flex;
    align-items: center;
    gap: 10px; /* Espace entre le bouton et le texte */
}

.upload-box {
    width: 60px;
    height: 60px;
    border: 2px dashed #555;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 24px;
    color: #555;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.upload-box:hover {
    background-color: #222;
    color: #888;
    border-color: #888;
}
.custom-stickers span {
    color: #aaa;
    font-size: 0.9em;
}

.quick-tips ul {
    list-style: none;
    padding: 0;
    font-size: 0.9em;
    color: #aaa;
}

.quick-tips li {
    margin-bottom: 8px; /* Un peu plus d'espace */
    line-height: 1.4; /* Meilleure lisibilité */
}
.quick-tips li::before { /* Ajout de puces personnalisées */
    content: "• ";
    color: #666;
}

.edit-sticker h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.edit-sticker h2 button { /* Style pour le bouton supprimer */
    background: none;
    border: none;
    color: #ff4d4d; /* Rouge */
    font-size: 1.2em;
    cursor: pointer;
    padding: 0 5px;
}
.edit-sticker h2 button:hover {
    color: #ff1a1a;
}


.edit-controls {
    display: grid; /* Utilisation de grid pour les boutons flip */
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.edit-controls button {
    /* display: block; */ /* Supprimé car géré par grid */
    /* width: 100%; */ /* Supprimé car géré par grid */
    /* margin-bottom: 10px; */ /* Supprimé car géré par gap */
    padding: 8px;
    background: #333;
    border: none;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease;
}
.edit-controls button:hover {
    background-color: #555;
}

.rotation-control {
    margin-bottom: 20px;
}

.rotation-control div { /* Conteneur pour le slider et le bouton reset */
    display: flex;
    align-items: center;
    gap: 10px;
}

.rotation-control label {
    display: block;
    margin-bottom: 8px; /* Espace sous le label */
    color: #ccc;
}

.rotation-control input[type=range] {
    width: 100%;
    cursor: pointer;
    flex-grow: 1; /* Prend l'espace disponible */
}

.rotation-control button { /* Style pour le bouton reset rotation */
     background: none;
     border: none;
     color: #ccc;
     font-size: 1.2em;
     cursor: pointer;
     padding: 0 5px;
}
.rotation-control button:hover {
    color: #fff;
}

/* Styles spécifiques pour le slider (apparence basique) */
input[type=range] {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  height: 8px; /* Specified height */
  background: #555; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  border-radius: 4px;
}

input[type=range]:hover {
  opacity: 1; /* Fully visible on hover */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 16px; /* Set a specific slider handle width */
  height: 16px; /* Slider handle height */
  background: #ddd; /* White background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 50%; /* Circular */
}

input[type=range]::-moz-range-thumb {
  width: 16px; /* Set a specific slider handle width */
  height: 16px; /* Slider handle height */
  background: #ddd; /* White background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 50%; /* Circular */
  border: none; /* Remove border in Firefox */
}
/* --- Styles Popup de Don --- */

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Invisible par défaut */
    visibility: hidden; /* Caché et n'interagit pas */
    z-index: 1000;
    /* transition: opacity 0.3s ease, visibility 0s linear 0.3s; */ /* LIGNE SUPPRIMÉE OU COMMENTÉE */
}

/* Classe ajoutée par JS pour montrer le popup */
.popup-overlay.show {
    opacity: 1 !important; /* Rend visible */
    visibility: visible !important; /* Le rend interactif */
    /* transition: opacity 0.3s ease, visibility 0s linear 0s; */ /* LIGNE SUPPRIMÉE OU COMMENTÉE */
}
  
  
  .popup-content {
    background-color: #0039B3; /* Même fond que le header */
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #80A9FF; /* Bordure assortie */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    max-width: 500px; /* Limite la largeur du popup */
    width: 90%; /* Un peu de largeur relative */
    text-align: center;
    position: relative; /* Pour positionner le bouton de fermeture */
    color: #FFFFFF; /* Texte blanc */
    /* Transition pour l'effet d'apparition du contenu */
    transform: scale(0.9); /* Légèrement réduit par défaut */
    transition: transform 0.3s ease;
  }
  
  /* Applique la transformation quand le popup est montré */
  .popup-overlay.show .popup-content {
      transform: scale(1); /* Retour à la taille normale */
  }
  
  .popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
    cursor: pointer;
    transition: color 0.2s ease;
  }
  
  .popup-close:hover {
    color: #FFD700; /* Changer de couleur au survol */
  }
  
  .crypto-address {
    background-color: #002A80; /* Fond légèrement différent pour l'adresse */
    padding: 10px;
    border-radius: 4px;
    font-family: monospace; /* Police à chasse fixe pour l'adresse */
    word-wrap: break-word; /* Gérer les longues adresses sans espace */
    margin: 15px 0;
    font-size: 0.9em; /* Légèrement plus petit */
    color: #E0E0E0; /* Un peu moins blanc que le texte normal */
  }
  
  /* Style pour le bouton copier */
  .popup-content button {
    background-color: #28a745; /* Vert */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 1em;
    margin-top: 5px; /* Espace au-dessus */
  }
  
  .popup-content button:hover {
    background-color: #218838; /* Vert plus foncé */
  }
  
  /* Fin Styles Popup */
  /* --- Améliorations Section Custom Stickers --- */

/* Rendre le titre "Custom Stickers" plus visible */
.custom-stickers h3 {
    font-size: 1.3em; /* Augmenter la taille */
    font-weight: bold; /* Mettre en gras */
    margin-bottom: 15px; /* Ajouter de l'espace en dessous */
    margin-top: 20px; /* Ajouter de l'espace au dessus (séparation avec les stickers par défaut) */
    text-align: center; /* Centrer le titre */
    color: #FFFFFF; /* Assurer la couleur blanche */
  }
  
  /* Styliser et fixer la taille de la boîte d'upload (+) */
  .upload-box {
    display: flex; /* Pour centrer le '+' facilement */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    width: 50px;  /* Largeur fixe */
    height: 50px; /* Hauteur fixe */
    border: 2px dashed #80A9FF; /* Bordure en pointillés comme sur l'image */
    border-radius: 5px; /* Coins légèrement arrondis */
    font-size: 28px; /* Taille du '+' */
    font-weight: bold;
    color: #80A9FF; /* Couleur du '+' */
    cursor: pointer;
    margin: 0 auto 10px auto; /* Centrer la boîte et ajouter marge en bas */
    transition: background-color 0.2s ease, border-color 0.2s ease; /* Transition douce */
    flex-shrink: 0; /* Empêcher la boîte de rétrécir si l'espace manque */
  }
  
  .upload-box:hover {
    background-color: rgba(128, 169, 255, 0.1); /* Léger fond bleu clair au survol */
    border-color: #FFFFFF; /* Bordure blanche au survol */
    color: #FFFFFF; /* '+' blanc au survol */
  }
  
  /* Optionnel: Style pour le texte "Upload" sous la boîte */
  .custom-stickers > span { /* Cible le span directement sous .custom-stickers */
      display: block; /* Pour qu'il prenne toute la largeur */
      text-align: center; /* Centrer le texte */
      font-size: 0.9em;
      color: #B3CFFF; /* Couleur un peu plus claire */
      margin-bottom: 15px; /* Espace en dessous */
  }
  
  /* S'assurer que les images dans la liste de stickers personnalisés ont une taille cohérente */
  #custom-stickers-list .sticker-item {
      width: 60px; /* Taille similaire aux stickers par défaut */
      height: 60px;
      object-fit: contain; /* Assure que l'image entière est visible */
  }
  
  
  /* --- Fin Améliorations --- */
  /* --- Arrière-plan pour la zone Canvas --- */

#canvas-area {
    /* Assurez-vous que l'élément a une position relative si ce n'est pas déjà le cas,
       pour que les stickers positionnés en absolu restent dedans */
    position: relative; /* Ajoutez ceci si ce n'est pas déjà présent */
  
    /* L'image d'arrière-plan */
    background-image: url('placeholder/cosmic-cat-background.jpg'); /* MODIFIEZ CECI si vous avez utilisé un autre nom/chemin */
  
    /* Comment l'image doit couvrir la zone */
    background-size: contain; /* Assure que l'image entière est visible, peut laisser des bandes vides */  
    /* Comment positionner l'image */
    background-position: center center; /* Centre l'image horizontalement et verticalement */
  
    /* Empêcher la répétition si l'image est plus petite que la zone */
    background-repeat: no-repeat;
  
    /* Optionnel: Une couleur de fond si l'image ne charge pas ou est transparente */
    /* background-color: #unbleufoncé; */
    
    /* Ajout d'un filtre pour atténuer l'image */
    filter: brightness(70%);

    /* --- Gestion Arrière-plan Canvas selon contenu --- */

    /* Appliquer une couleur de fond de base au canvas */

    /* Assurez-vous que background-color est défini ici, AVANT background-image
       dans la cascade, ou qu'il est défini dans une règle plus ancienne */
    background-color: #0047CC; /* Un bleu légèrement différent du body pour distinguer */
    /* ... (les autres styles de #canvas-area comme background-image, size, position, filter, etc. restent ici) ... */
  }
  
  
  /* Lorsque #canvas-area a la classe .has-user-content (ajoutée par JS),
     on retire l'image de fond par défaut et son filtre */
  #canvas-area.has-user-content {
    background-image: none !important; /* Retire le chat cosmique */
    filter: none !important; /* Retire le filtre de luminosité */
  }
  
  /* --- Fin Gestion Arrière-plan --- */
  }
  
  /* Important: Assurez-vous que les stickers sont visibles par-dessus */
  .sticker-on-canvas {
      position: absolute; /* Déjà présent normalement */
      z-index: 10; /* Assure qu'ils sont au-dessus du fond (ajustez si nécessaire) */
  }
  
  /* --- Fin Arrière-plan Canvas --- */

  /* --- Styles pour Stickers Mis en Avant --- */

/* Style pour le titre des stickers mis en avant */
.featured-sticker-title {
    font-size: 1.1em; /* Légèrement plus grand */
    font-weight: bold;
    color: #FFF; /* Couleur blanche */
    text-align: center; /* Centrer le titre */
    margin-top: 10px; /* Espace au-dessus */
    margin-bottom: 8px; /* Espace sous le titre, avant les stickers */
    border-bottom: 1px solid #80A9FF; /* Ligne de séparation fine */
    padding-bottom: 5px; /* Espace sous la ligne */
  }
  
  /* Mise en valeur des stickers 'featured' */
  .sticker-item.featured {
    border: 2px solid #FFD700; /* Bordure dorée pour se démarquer */
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); /* Ombre portée légère dorée */
    transition: transform 0.2s ease-in-out; /* Transition douce pour le survol */
  }
  
  /* Effet au survol pour les stickers 'featured' */
  .sticker-item.featured:hover {
    transform: scale(1.1); /* Agrandit légèrement le sticker */
    z-index: 5; /* S'assure qu'il passe au-dessus des autres lors du survol */
  }
  
  /* --- Fin Styles Stickers Mis en Avant --- */

  /* Styles pour l'animation des ananas qui tombent */
#falling-pineapples-container {
    position: fixed; /* Ou absolute si body est le référent */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Important pour ne pas bloquer les clics */
    overflow: hidden;
    z-index: 10; /* Ajustez si nécessaire, doit être au-dessus du fond mais en dessous des popups/modales */
 }
 
 .falling-pineapple {
    position: absolute;
    top: -60px; /* Commence au-dessus de l'écran */
    width: 40px; /* Taille de l'ananas */
    height: auto;
    animation-name: fall;
    animation-timing-function: linear;
    /* La durée et le délai seront définis par JS */
 }
 
 @keyframes fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(105vh) rotate(720deg); /* Tombe en dessous de l'écran + rotation */
        opacity: 0.5; /* Peut disparaître avant la fin */
    }
 }
 /* Styles pour rendre les Quick Tips plus visibles */
.quick-tips {
    background-color: #f8f9fa; /* Fond gris très clair */
    padding: 15px;           /* Espace intérieur */
    margin-top: 20px;        /* Espace au-dessus */
    border: 1px solid #dee2e6; /* Bordure grise discrète */
    border-radius: 8px;      /* Coins arrondis */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Ombre légère */
}

.quick-tips h3 {
    margin-top: 0;           /* Retire la marge du haut par défaut du h3 */
    margin-bottom: 10px;     /* Espace sous le titre */
    font-size: 1.1em;        /* Titre légèrement plus grand */
    color: #343a40;          /* Couleur du titre */
}

.quick-tips ul {
    padding-left: 20px;      /* Indentation de la liste */
    margin-bottom: 0;        /* Retire la marge du bas par défaut de ul */
}

.quick-tips li {
    margin-bottom: 8px;     /* Espace entre les points */
    font-size: 0.95em;       /* Taille de police des points */
    color: #495057;          /* Couleur du texte des points */
    line-height: 1.4;        /* Hauteur de ligne pour la lisibilité */
}

/* Styles pour le popup de don - Adresse et Logo */
.donation-address-container {
    display: flex;            /* Alignement horizontal */
    align-items: center;     /* Centrage vertical */
    justify-content: center; /* Centrage horizontal (ajustez si besoin) */
    margin-bottom: 8px;     /* Espace avant l'adresse */
    gap: 8px;               /* Espace entre logo et texte */
}

.blockchain-logo {
    width: 24px;             /* Taille du logo */
    height: 24px;            /* Taille du logo */
    vertical-align: middle;  /* Meilleur alignement avec le texte */
}

.donation-address-container span {
    font-size: 0.9em;
    color: #ccc; /* Couleur un peu plus claire pour le texte d'info */
}

.popup-content .crypto-address {
    margin-top: 5px; /* Réduit l'espace après le texte/logo */
    font-size: 0.95em; /* Légère réduction pour l'adresse */
    word-break: break-all; /* Coupe l'adresse si elle est trop longue */
}
/* --- Styles Généraux des Boutons --- */
button {
    padding: 10px 18px;         /* Espacement intérieur */
    border: none;               /* Pas de bordure par défaut */
    border-radius: 6px;         /* Coins arrondis */
    font-family: inherit;       /* Utilise la police Poppins */
    font-size: 0.95em;          /* Taille de police légèrement ajustée */
    font-weight: 500;           /* Poids Medium */
    color: #ffffff;             /* Texte blanc par défaut */
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease; /* Transitions douces */
    text-align: center;
    vertical-align: middle;
    user-select: none;          /* Empêche la sélection du texte du bouton */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

button:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Ombre plus prononcée au survol */
}

button:active {
    transform: scale(0.98);     /* Effet d'appui */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Ombre réduite lors de l'appui */
}

/* --- Boutons Principaux (Download, Donate, Copy) --- */
/* On utilise une couleur verte distinctive pour Download/Copy, et le bleu standard pour Donate */

#download-button,
#copy-address-button {
    background-color: #28a745; /* Vert */
    color: #ffffff;
}

#download-button:hover,
#copy-address-button:hover {
    background-color: #218838; /* Vert plus foncé */
}

#donate-button {
    background-color: #007bff; /* Bleu standard (différent du fond global) */
    color: #ffffff;
}

#donate-button:hover {
    background-color: #0056b3; /* Bleu plus foncé */
}


/* --- Bouton Secondaire (Reset) --- */
#reset-button {
    background-color: #6c757d; /* Gris */
    color: #ffffff;
}

#reset-button:hover {
    background-color: #5a6268; /* Gris plus foncé */
}

/* --- Ajustements spécifiques si nécessaire --- */

/* Par exemple, pour les boutons dans le header pour s'assurer qu'ils ont de l'espace */
.header-buttons button {
    margin-left: 10px;
}

/* Ajustement pour le bouton Copy Address dans le popup */
.popup-content #copy-address-button {
     margin-top: 15px; /* Ajoute de l'espace au-dessus */
}

/* Style pour la mention 'powered by' dans le logo */
.logo span small {
    font-size: 0.65em; /* Rend le texte encore plus petit par rapport à "Pet your Image" */
    color: #b0d4ff;   /* Couleur légèrement différente/plus claire si désiré */
    font-weight: 200; /* Police normale (pas bold comme le reste du logo) */
    display: block;   /* Met la mention sur une nouvelle ligne (optionnel) */
    margin-top: 2px;  /* Ajoute un petit espace au-dessus si en block (optionnel) */
}

/* Styles pour la liste d'étapes des stickers */
.sticker-steps {
    list-style-type: none; /* Cache les numéros par défaut */
    padding-left: 0;       /* Retire le padding par défaut des listes */
    margin-top: 8px;       /* Espace après le titre "Stickers" */
    margin-bottom: 15px;   /* Espace avant la liste des stickers */
    font-size: 0.9em;      /* Taille de police légèrement réduite */
    color: #e0e0e0;        /* Couleur de texte un peu plus claire */
}

.sticker-steps li {
    margin-bottom: 6px;    /* Espace entre chaque étape */
    position: relative;    /* Requis pour le positionnement du numéro */
    padding-left: 20px;   /* Espace pour le numéro personnalisé */
}

/* Ajout d'un numéro personnalisé avant chaque étape */
.sticker-steps li::before {
    content: counter(step-counter); /* Utilise un compteur CSS */
    counter-increment: step-counter; /* Incrémente le compteur pour chaque li */
    position: absolute;
    left: 0;
    top: 1px; /* Ajustement fin vertical */
    background-color: #007bff; /* Fond bleu pour le numéro */
    color: #ffffff;           /* Texte blanc pour le numéro */
    font-weight: bold;
    font-size: 0.8em;        /* Taille du numéro */
    width: 14px;             /* Largeur du cercle */
    height: 14px;            /* Hauteur du cercle */
    line-height: 14px;       /* Centre le texte verticalement */
    border-radius: 50%;      /* Cercle parfait */
    text-align: center;
}

/* Initialisation du compteur pour la liste */
.sticker-steps {
    counter-reset: step-counter;
}

/* Style pour le lien 'Go to PicaOnBase' pour qu'il ressemble à un bouton */
.header-buttons .button-link {
    display: inline-block; /* Permet d'appliquer padding et margin */
    padding: 10px 18px;
    background-color: #17a2b8; /* Couleur Cyan/Info pour le distinguer */
    color: #ffffff;
    text-decoration: none; /* Retire le soulignement du lien */
    border-radius: 6px;
    font-size: 0.95em;
    font-weight: 500;
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-left: 10px; /* Espace avant le bouton Donate */
    vertical-align: middle; /* Alignement vertical avec le bouton */
}

.header-buttons .button-link:hover {
    background-color: #117a8b; /* Cyan plus foncé */
    color: #ffffff; /* Assure que le texte reste blanc */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.header-buttons .button-link:active {
    transform: scale(0.98);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Ajustement: supprimer la marge à gauche du premier élément dans header-buttons si nécessaire */
/* (Si le lien devient le premier élément) */
/* .header-buttons > *:first-child {
    margin-left: 0;
} */

/* Assurez-vous que la marge sur le bouton Donate est toujours correcte */
.header-buttons #donate-button {
    margin-left: 10px; /* Conserve l'espace après le lien */
}

/* Style pour le conteneur de sticker sur le canevas */
.sticker-container {
    position: absolute; /* Déjà géré par makeDraggableAndResizable probablement */
    cursor: grab;      /* Curseur par défaut pour le déplacement */
    /* Ajouter une bordure pour visualiser la sélection */
    border: 2px solid transparent; /* Bordure transparente par défaut */
    transition: border-color 0.1s ease-in-out;
}

.sticker-container.selected {
    border-color: #007bff; /* Bordure bleue si sélectionné */
    cursor: grab; /* ou 'move' */
}

/* Style pour l'image DANS le conteneur */
.sticker-container img {
    display: block; /* Empêche les espaces indésirables sous l'image */
    width: 100%;    /* L'image prend toute la largeur du conteneur */
    height: 100%;   /* L'image prend toute la hauteur du conteneur */
    user-select: none; /* Empêche la sélection de l'image elle-même */
    -webkit-user-drag: none; /* Empêche le drag fantôme de l'image */
}


/* Styles pour les poignées de redimensionnement */
.resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #007bff;
    border: 1px solid #ffffff;
    border-radius: 50%; /* Rond */
    display: none; /* Caché par défaut */
    z-index: 10; /* Au-dessus de l'image */
}

.sticker-container.selected .resize-handle {
    display: block; /* Affiché si le conteneur est sélectionné */
}

/* Positionnement des 4 coins */
.resize-handle.tl { top: -6px; left: -6px; cursor: nwse-resize; }
.resize-handle.tr { top: -6px; right: -6px; cursor: nesw-resize; }
.resize-handle.bl { bottom: -6px; left: -6px; cursor: nesw-resize; }
.resize-handle.br { bottom: -6px; right: -6px; cursor: nwse-resize; }

/* Optionnel: Poignées sur les côtés (à ajouter si besoin)
.resize-handle.tm { top: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.resize-handle.bm { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.resize-handle.ml { top: 50%; left: -6px; transform: translateY(-50%); cursor: ew-resize; }
.resize-handle.mr { top: 50%; right: -6px; transform: translateY(-50%); cursor: ew-resize; }
*/
/* Style pour les boutons génériques dans les popups */
.popup-button {
    background-color: #0052FF; /* Même couleur que les boutons principaux */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 15px; /* Espace au-dessus du bouton */
    transition: background-color 0.2s ease;
}

.popup-button:hover {
    background-color: #0047D1; /* Un peu plus foncé au survol */
}
/* --- NOUVEAU: Styles Bannière Avertissement Mobile --- */
.mobile-banner {
    position: fixed; /* Gardons fixed pour le moment */
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff3cd;
    color: #664d03;
    /* padding: 10px 20px; */ /* On déplace le padding vers .show */
    display: flex;
    justify-content: flex-start;  /* NOUVEAU: Pour aligner au début */
    align-items: center;
    z-index: 1050;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    /* Caché par défaut (hauteur nulle) */
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    /* transform: translateY(-110%); */ /* Supprimer ou commenter */
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    overflow: hidden; /* REMETTRE overflow: hidden; */
}

.mobile-banner p {
    margin: 0;
    /* flex-grow: 1; */ /* COMMENTER OU SUPPRIMER CETTE LIGNE */
    padding-right: 15px; /* Gardons un padding pour l'espace */
    /* Le padding vertical sera géré par le parent */
}

.banner-close-button {
    background-color: #664d03; /* Couleur du texte de la bannière pour le fond du bouton */
    color: #fff3cd; /* Couleur de fond de la bannière pour le texte du bouton */
    border: none;
    padding: 5px 15px; /* Plus de padding pour un look bouton */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer;
    font-size: 0.9rem; /* Taille de police standard pour bouton */
    /* Supprimer les styles spécifiques à la croix */
    /* font-size: 1.5rem; */
    /* line-height: 1; */
    transition: background-color 0.2s ease;
    white-space: nowrap;
    margin-left: 5px; /* RÉDUIRE cette valeur (était 15px) */

}
.banner-close-button:hover {
    background-color: #4d3a02; /* Un peu plus foncé au survol */
}
/* Classe pour montrer la bannière */
.mobile-banner.show {
    max-height: 100px; /* Assez grand pour le contenu */
    padding: 10px 20px; /* Rétablir le padding */
    /* transform: translateY(0); */ /* Supprimer ou commenter */
}

/* --- Fin Styles Bannière --- */