body{ margin: 2% auto; width:98%; font-family:arial, sans-serif; font-size:1rem;  color:#333; text-align:center; background-color:rgba(6, 19, 89,1); }
        h1,h2 { 
            letter-spacing: -0.025rem;
            color:#FC0;
            margin: 0.25rem;            
         }
         h1 { display:inline-block; background-image:url('./DLE_girl-only_white-bg.png'); background-repeat:no-repeat; background-size:5rem; background-position:0 50%; padding:2.25rem 0 2.25rem 5.5rem; }
         p { color:white; }
         a { color:#FC0; }
         button, button:link, button:visited, a, a:link, a:visited { color:white;  -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; cursor:pointer; /*outline:none;*/ }
         button:hover { color:white; scale:1.05;  -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; transition: all 0.25s ease; cursor:pointer;  }
        
        .userBloc { border-radius:0.5rem; min-width: 600px; max-width:620px;  margin:0.5rem auto; padding:0.5rem 0; background-color:rgba(255,255,255,0.2); }

        #canvas-container {
            position: relative;
            width: 620px; height: 620px;
            overflow: hidden;
            margin: auto auto;
            border-radius: 0.5rem;
            background-color: #FFF;
        }
        canvas { display:none; }
        canvas, img {
            position: absolute;
            top: 0;
            left: 0;
        }
        img {
            /*max-width: 100%;
            max-height: 100%;
            cursor: move;*/
            transition: transform 0.2s ease-in-out;
        }
        #user-image {
            z-index: 0; /* Image de l'utilisateur au-dessus */
        }
        #overlay {
            max-width: 100%; max-height: 100%;
            z-index: 1; /* Image PNG transparente en-dessous */
        }
        
        #image-info { display:none; }

        button { border:0; background-color:rgba(6, 19, 89,1); color:white; margin: 0.25rem 0.25rem; padding: 0.75rem 1rem; border-radius:0.5rem; transition: background-color 200ms;}
        button:hover { cursor:pointer; background-color:rgba(254, 204, 28,1); color:rgba(6, 19, 89,1); }

        
        /* file upload button */
        input { color:white; }
        input[type="file"]::file-selector-button {   
            padding:0.5rem; border-radius:0.5rem;        
            cursor: pointer;
            background-color: white;
            border: 0.1rem solid rgba(0, 0, 0, 0.16);
            box-shadow: 0 0.1rem 0 rgba(0, 0, 0, 0.05);
            margin-right: 1.25rem;
            -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease;
        }
        /* file upload button hover state */
        input[type="file"]::file-selector-button:hover {            
            background-color:#FC0; color:rgba(6, 19, 89,1);
        }

        /* file upload button active state */
        input[type="file"]::file-selector-button:active {
          background-color: #e5e7eb;
        }