
<style>
        *{ box-sizing:border-box; }

        body{
            margin:0;
            font-family:'Inter', sans-serif;
            background:#f4f6f9;
            color:#0f172a;
        }

        /* ✅ HEADER PLUS COMPACT */
        .header{
            background:#f0b4a7;
            color:white;
            padding:40px 15px;
            text-align:center;
        }

        .header h1{
            margin:0;
            font-size:26px;
        }

        .header p{
            margin-top:8px;
            font-size:14px;
            opacity:0.9;
        }

        /*.container{
            max-width:1100px;
            margin:auto;
            margin-top:-20px;
            background:white;
            border-radius:14px;
            padding:20px;
            box-shadow:0 10px 25px rgba(0,0,0,0.08);
        }*/

        /* ✅ STACK MOBILE */
        .row{
            display:flex;
            gap:25px;
            flex-wrap:wrap;
        }

        .left, .right{
            flex:1;
            min-width:280px;
        }

        /* ✅ ESPACEMENTS RÉDUITS */
        label{
            font-weight:600;
            display:block;
            margin-top:15px;
            margin-bottom:6px;
            font-size:14px;
        }

        .input{
            border:1px solid #e2e8f0;
            border-radius:8px;
            padding:8px;
            width:120px;
            font-size:14px;
        }

        /* ✅ SLIDER FIN */
        input[type=range]{
            width:100%;
            appearance:none;
            height:4px;
            background:#e2e8f0;
            border-radius:10px;
        }

        input[type=range]::-webkit-slider-thumb{
            appearance:none;
            width:14px;
            height:14px;
            border-radius:50%;
            background:#f27457;
        }

        /* ✅ CARTES PLUS PETITES */
        .result-card{
            background:#f0fdf4;
            border-radius:12px;
            padding:15px;
            margin-top:12px;
        }

        .big-number{
            font-size:20px;
            font-weight:700;
            color:#062b52;
        }

        /* ✅ BOUTON MOBILE FRIENDLY */
        .cta{
            width:100%;
            margin-top:15px;
            background:#f27457;
            color:white;
            border:none;
            padding:14px;
            font-size:15px;
            font-weight:600;
            border-radius:10px;
            cursor:pointer;
        }

        .radio-box{
            border:1px solid #e2e8f0;
            border-radius:10px;
            padding:10px;
            margin-top:8px;
            cursor:pointer;
            font-size:14px;
        }

        .radio-box.active{
            border:2px solid #f27457;
            background:#f0fdf4;
        }

        .right{
            text-align:center;
        }

        canvas{
            max-width:180px;
            margin:auto;
            display:block;
        }

        /* ✅ VRAI BREAKPOINT MOBILE */
        @media (max-width:768px){

            .row{
                flex-direction:column;
            }

            .container{
                margin-top:0;
                border-radius:0;
                box-shadow:none;
            }

            canvas{
                max-width:160px;
            }
        }
        .info-section{
            max-width:1100px;
            margin:30px auto;
            background:white;
            border-radius:18px;
            padding:28px;
            border:1px solid #eef2f7;
            box-shadow:0 10px 30px rgba(15,23,42,0.04);
        }

        .info-title{
            font-size:20px;
            margin-top:0;
            margin-bottom:18px;
        }

        .info-item{
            display:flex;
            gap:14px;
            margin-bottom:18px;
            opacity:0;
            transform:translateY(10px);
            transition:0.5s ease;
        }

        .info-item.visible{
            opacity:1;
            transform:translateY(0);
        }

        .info-icon{
            width:36px;
            height:36px;
            border-radius:10px;
            background:#f0f9ff;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:18px;
            color:#00c2ff;
            flex-shrink:0;
        }

        .info-text{
            font-size:14px;
            line-height:1.5;
            color:#334155;
        }

        .info-text strong{
            color:#0f172a;
        }

        @media (max-width:768px){

            .info-section{
                margin:10px;
                padding:22px;
            }

            .info-item{
                gap:10px;
            }

            .info-text{
                font-size:13px;
            }
        }
        .article-section{
            max-width:1100px;
            margin:60px auto;
            padding:0 20px;
        }

        .article-card{
            background:white;
            border-radius:26px;
            padding:50px;
            box-shadow:0 20px 50px rgba(15,23,42,0.06);
            border:1px solid #eef2f7;
            line-height:1.8;
            opacity:0;
            transform:translateY(30px);
            transition:0.8s ease;
        }

        .article-card.visible{
            opacity:1;
            transform:translateY(0);
        }

        .article-card h2{
            font-size:28px;
            margin-top:0;
            margin-bottom:25px;
            font-weight:600;
        }

        .article-card h3{
            margin-top:35px;
            font-size:20px;
            font-weight:600;
        }

        .article-card p{
            font-size:15px;
            color:#334155;
            margin:14px 0;
        }

        .article-card strong{
            color:#0f172a;
            font-weight:600;
        }

        .highlight{
            background:#f8fafc;
            padding:18px;
            border-radius:14px;
            margin:18px 0;
            font-weight:500;
            border:1px solid #eef2f7;
        }

        .disclaimer{
            font-size:13px;
            color:#64748b;
            margin-top:35px;
        }

        @media (max-width:768px){

            .article-card{
                padding:30px;
                border-radius:22px;
            }

            .article-card h2{
                font-size:22px;
            }

            .article-card h3{
                font-size:17px;
            }

            .article-card p{
                font-size:14px;
            }
        }
    