    <style>

        .container {

            width: 100%;

            max-width: 680px;
        }


        .card {

            background: #ffffff;

            border-radius: 22px;

            padding: 42px;

            box-shadow:
                0 20px 50px rgba(0, 0, 0, 0.12);
        }


        .header {

            margin-bottom: 32px;
        }


        .icon {

            width: 54px;
            height: 54px;

            display: flex;

            align-items: center;
            justify-content: center;

            background: #3a3a3a;

            color: #ffffff;

            border-radius: 15px;

            font-size: 25px;

            margin-bottom: 20px;
        }


        h1 {

            margin: 0 0 10px;

            font-size: 30px;

            font-weight: 700;

            color: #222222;
        }


        .intro {

            margin: 0;

            color: #777777;

            font-size: 15px;

            line-height: 1.6;
        }


        .form-group {

            margin-bottom: 24px;
        }


        label {

            display: block;

            margin-bottom: 9px;

            font-size: 14px;

            font-weight: 600;

            color: #333333;
        }


        input,
        textarea {

            width: 100%;

            border: 1px solid #d4d4d4;

            border-radius: 12px;

            background: #fafafa;

            padding: 14px 16px;

            font-family: inherit;

            font-size: 15px;

            color: #222222;

            outline: none;

            transition:
                border-color 0.2s,
                box-shadow 0.2s,
                background 0.2s;
        }


        input:focus,
        textarea:focus {

            background: #ffffff;

            border-color: #555555;

            box-shadow:
                0 0 0 4px rgba(60, 60, 60, 0.08);
        }


        textarea {

            resize: vertical;

            line-height: 1.6;
        }


        #message_personnalise {

            min-height: 130px;
        }


        #emails {

            min-height: 190px;
        }


        .hint {

            margin-top: 8px;

            color: #888888;

            font-size: 12px;
        }


        .preview {

            margin-top: 25px;

            padding: 16px 18px;

            background: #f3f3f3;

            border-left: 4px solid #444444;

            border-radius: 8px;
        }


        .preview-title {

            font-size: 11px;

            text-transform: uppercase;

            letter-spacing: 0.08em;

            color: #888888;

            margin-bottom: 6px;
        }


        #subjectPreview {

            font-size: 14px;

            font-weight: 600;

            color: #333333;
        }


        .button {

            width: 100%;

            border: none;

            border-radius: 12px;

            padding: 15px;

            margin-top: 26px;

            background: #333333;

            color: #ffffff;

            font-family: inherit;

            font-size: 15px;

            font-weight: 600;

            cursor: pointer;

            transition:
                background 0.2s,
                transform 0.1s;
        }


        .button:hover {

            background: #1f1f1f;
        }


        .button:active {

            transform: scale(0.99);
        }


        .message {

            margin-bottom: 25px;

            padding: 15px 18px;

            border-radius: 10px;

            font-size: 14px;

            line-height: 1.5;
        }


        .message.success {

            background: #e9f6ed;

            color: #28623a;

            border: 1px solid #c8e8d0;
        }


        .message.error {

            background: #f8eaea;

            color: #8a3030;

            border: 1px solid #edcccc;
        }


        .footer {

            text-align: center;

            margin-top: 20px;

            color: #888888;

            font-size: 12px;
        }


        @media (max-width: 600px) {

            body {

                padding: 15px;
            }


            .card {

                padding: 28px 22px;

                border-radius: 18px;
            }


            h1 {

                font-size: 25px;
            }
        }

    </style>