    <style>
        /* ✅ Checkbox always visible/clickable */
        #acceptWrap {
            display: flex;
            align-items: center;
            gap: 10px
        }

        #acceptWrap .form-check-input {
            all: revert;
            -webkit-appearance: checkbox;
            appearance: checkbox;
            width: 18px;
            height: 18px;
            margin: 0 8px 0 0;
            border: 2px solid var(--spip-red, #a40000)
        }

        #acceptWrap .form-check-input:checked {
            background-color: var(--spip-red, #a40000);
            border-color: var(--spip-red, #a40000)
        }

        #acceptWrap .form-check-label {
            margin: 0;
            font-weight: 800
        }

        :root {
            --spip-red: #a40000;
            --spip-red-2: #d32f2f;
            --ink: #0f172a;
            --muted: #5b6472;
            --line: #e6eaf0;
            --bg: #f7f7fb;
            --white: #fff;
            --danger: #dc2626;
            --radius: 14px
        }

        * {
            box-sizing: border-box
        }

        html,
        body {
            height: 100%
        }

        body {
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            margin: 0;
            color: var(--ink);
            background:
                radial-gradient(1200px 900px at -15% -10%, #ffecec 0%, transparent 60%),
                radial-gradient(900px 700px at 115% -10%, #fff3f3 0%, transparent 55%),
                radial-gradient(900px 700px at 50% 110%, #fff6f6 0%, transparent 55%), var(--bg)
        }

        /* ===== Hero ===== */
        .hero {
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid var(--line);
            background: linear-gradient(135deg, var(--spip-red), var(--spip-red-2));
            color: #fff
        }

        .hero .inner {
            max-width: 1280px;
            margin: 0 auto;
            padding: 32px 16px 28px;
            display: flex;
            gap: 20px;
            align-items: center
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 14px
        }

        .brand-logo {
            width: 56px;
            height: 56px;
            border-radius: 14px;
            background: #fff;
            display: grid;
            place-items: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, .12)
        }

        .brand-logo img {
            max-height: 40px;
            width: auto
        }

        .hero h1 {
            font-weight: 900;
            font-size: 28px;
            margin: 0;
            letter-spacing: .3px
        }

        .badge-secure {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, .15);
            border: 1px solid rgba(255, 255, 255, .25);
            padding: 8px 12px;
            border-radius: 999px;
            font-weight: 700
        }

        /* ===== Layout ===== */
        .wrap {
            max-width: 1280px;
            margin: 18px auto 32px;
            padding: 0 16px;
            display: grid;
            grid-template-columns: 1fr;
            gap: 18px
        }

        @media (min-width:992px) {
            .wrap {
                grid-template-columns: minmax(0, 1fr) 360px
            }
        }

        .card {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
            overflow: hidden;
            animation: fadeUp .35s ease-out
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(8px)
            }

            to {
                opacity: 1;
                transform: translateY(0)
            }
        }

        .card h2 {
            margin: 0;
            padding: 18px 20px;
            font-size: 20px;
            border-bottom: 1px solid var(--line);
            background: linear-gradient(180deg, #ffffff, #fbfbfe)
        }

        .section {
            padding: 18px 20px
        }

        .section+.section {
            border-top: 1px solid var(--line)
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 12px
        }

        .col-12 {
            grid-column: span 12
        }

        label {
            font-weight: 800;
            font-size: 12.5px;
            display: block;
            margin-bottom: 6px;
            letter-spacing: .6px;
            color: #172036
        }

        label.req::after {
            content: " *";
            color: var(--danger)
        }

        input,
        select,
        textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--line);
            border-radius: 10px;
            font-size: 14px;
            outline: 0;
            background: #fff;
            text-transform: uppercase;
            transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease
        }

        input:focus,
        select:focus,
        textarea:focus {
            border-color: #cbd5e1;
            box-shadow: 0 0 0 4px rgba(164, 0, 0, .08)
        }

        input:hover,
        select:hover,
        textarea:hover {
            transform: translateY(-1px)
        }

        .is-invalid {
            border-color: var(--danger) !important;
            box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important
        }

        .muted {
            color: var(--muted);
            font-size: 12px
        }

        .readonly {
            padding: 11px 12px;
            border: 1px dashed var(--line);
            border-radius: 10px;
            background: #f9fafb;
            font-weight: 800
        }

        .btn {
            appearance: none;
            border: 0;
            padding: clamp(8px, 1.4vh, 12px) clamp(10px, 2.2vh, 18px);
            border-radius: 12px;
            font-weight: 800;
            cursor: pointer;
            letter-spacing: .5px;
            transition: transform .05s, box-shadow .2s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: clamp(40px, 5.2vh, 48px);
            font-size: clamp(13px, 1.9vh, 15px);
            line-height: 1;
            overflow: hidden;
            white-space: nowrap
        }

        .btn:active {
            transform: translateY(1px)
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--spip-red), var(--spip-red-2));
            color: #fff;
            box-shadow: 0 10px 22px rgba(164, 0, 0, .20) !important
        }

        .btn-outline {
            background: #fff;
            border: 1px solid var(--line);
            color: #111827;
            box-shadow: 0 6px 14px rgba(15, 23, 42, .06) !important
        }

        .btn[disabled] {
            opacity: .65;
            cursor: not-allowed
        }

        .bar {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap
        }

        .bar .pill {
            margin-left: auto
        }

        /* Photo */
        .photo-box {
            display: flex;
            gap: 16px;
            align-items: flex-start;
            flex-wrap: wrap
        }

        .photo-preview {
            width: 180px;
            height: 180px;
            border: 1px dashed var(--line);
            border-radius: 12px;
            object-fit: cover;
            background: #fafafa
        }

        /* Aside */
        .aside {
            position: sticky;
            top: 18px;
            height: max-content
        }

        .summary-list {
            list-style: none;
            margin: 0;
            padding: 0
        }

        .summary-list li {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 0;
            border-bottom: 1px dashed var(--line)
        }

        .summary-list i {
            font-size: 18px;
            color: var(--spip-red)
        }

        .pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            border-radius: 999px;
            background: #fff;
            border: 1px solid var(--line);
            font-weight: 700
        }

        .meter {
            height: 10px;
            background: #f1f5f9;
            border-radius: 999px;
            overflow: hidden
        }

        .meter>span {
            display: block;
            height: 100%;
            background: linear-gradient(90deg, var(--spip-red), var(--spip-red-2));
            width: 0%
        }

        .backtop {
            position: fixed;
            right: 18px;
            bottom: 18px;
            z-index: 50;
            display: none
        }

        .backtop.show {
            display: block
        }

        .footer {
            margin-top: 24px;
            background: linear-gradient(135deg, var(--spip-red), var(--spip-red-2));
            color: #fff;
            border-top: 1px solid rgba(255, 255, 255, .25)
        }

        .footer .inner {
            max-width: 1280px;
            margin: 0 auto;
            padding: 18px 16px;
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between
        }

        /* Single-column inside the card */
        .section .grid {
            grid-template-columns: 1fr !important;
            gap: 14px !important
        }

        .section .grid>* {
            grid-column: 1 / -1 !important;
            min-width: 0
        }

        .card .section label {
            white-space: nowrap;
            overflow-wrap: anywhere;
            letter-spacing: .3px
        }

        .card .section .bar {
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 10px !important
        }

        .card .section .bar .btn {
            width: 100% !important
        }

        /* Photo 3:4 */
        #photoPreview {
            display: block;
            width: clamp(180px, 28vw, 320px) !important;
            aspect-ratio: 3/4;
            height: auto !important;
            object-fit: cover !important;
            object-position: center top !important;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: #f3f4f6;
            box-shadow: 0 8px 24px rgba(15, 23, 42, .08)
        }

        @media (max-width:768px) {
            #photoPreview {
                width: min(85vw, 360px) !important
            }
        }

        .card .section .photo-box>div {
            width: 100%;
            max-width: 720px
        }

        .card .section .photo-box .bullets {
            margin: 8px 0 0 0;
            padding-left: 18px;
            color: #475569;
            font-size: 12.5px
        }

        input[type="file"] {
            text-transform: none;
            border-style: dashed
        }

        input[type="file"]::-webkit-file-upload-button {
            border: 0;
            background: #fff;
            border: 1px solid var(--line);
            padding: 8px 12px;
            border-radius: 8px;
            font-weight: 800;
            cursor: pointer
        }

        #regForm .grid {
            grid-template-columns: 1fr !important;
            gap: 14px !important
        }

        #regForm .grid>* {
            grid-column: 1 / -1 !important;
            min-width: 0
        }

        #regForm input:not([type="checkbox"]):not([type="radio"]),
        #regForm select,
        #regForm textarea {
            width: 100% !important
        }

        #regForm input[type="checkbox"],
        #regForm input[type="radio"] {
            width: auto !important;
            height: auto !important;
            display: inline-block;
            padding: 0;
            border: none;
            box-shadow: none;
            text-transform: none
        }

        .policy-panel {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 14px
        }

        .policy-panel p {
            color: #172036
        }
    </style>