:root{
      --bg:#0f172a;          /* fond bleu nuit */
      --card:#121a31;
      --text:#e5e7eb;
      --muted:#a5b4fc;
      --accent:#7dd3fc;      /* cyan clair pour petits accents */
      --grad-a:#4ef1f5;      /* cyan */
      --grad-b:#f472d0;      /* magenta */
      --ring: hsla(190,100%,60%,.35);
      --radius:18px;
      --max:980px;
    }

    /* Reset doux */
    *{box-sizing:border-box}
    html,body{margin:0;height:100%;scroll-behavior: smooth}
    body{
      font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background:
        radial-gradient(1200px 800px at 80% -10%, rgba(244,114,208,.08), transparent 50%),
        radial-gradient(900px 600px at 0% 100%, rgba(78,241,245,.06), transparent 45%),
        linear-gradient(180deg,#0b1324 0%, var(--bg) 100%);
      min-height:100%;
      padding:32px 16px 80px;
    }

    .shell{max-width:var(--max); margin:0 auto;}

    /* Header */
    .brand{
      display:flex; align-items:center; gap:16px; margin:0 0 18px;
    }
    .app-icon{
      width:56px; height:56px; border-radius:18px;
      background:
        radial-gradient(80% 80% at 20% 15%, rgba(255,255,255,.15), transparent 40%),
        linear-gradient(180deg,#0b1626,#0e2033 60%, #0b1626);
      position:relative;
      box-shadow:0 10px 30px rgba(0,0,0,.35);
      overflow:hidden;
    }
    /* “onde W” en dégradé */
    .app-icon::after{
      content:"";
      position:absolute; inset:0;
      --g: linear-gradient(90deg, var(--grad-a), var(--grad-b));
      -webkit-mask:
        radial-gradient(22px 22px at 18px 38px, #0000 96%, #000) ,
        radial-gradient(22px 22px at 38px 18px, #0000 96%, #000) ,
        radial-gradient(22px 22px at 58px 38px, #0000 96%, #000);
      background: var(--g);
      transform: scale(0.92) translateY(2px);
      border-radius:14px;
      filter: drop-shadow(0 0 18px rgba(164, 230, 255, .35));
    }
    .title{
      font-weight:700; font-size:1.5rem; letter-spacing:.2px;
      display:flex; align-items:baseline; gap:.6rem;
    }
    .title .badge{
      padding:.15rem .55rem; font-size:.8rem; border-radius:999px;
      background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
      color:#0a0f1f; font-weight:700;
    }
    .sub{color:var(--muted); margin:.25rem 0 0; font-size:.95rem}

    /* Lang switch (CSS-only) */
    .lang{
      margin:18px 0 24px; display:flex; gap:10px; align-items:center;
    }
    .lang input{ position:absolute; left:-9999px; }
    .chip{
      cursor:pointer; user-select:none;
      padding:.45rem .8rem; border-radius:999px; font-weight:600;
      border:1px solid rgba(148,163,184,.25); color:#dbeafe;
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    }
    #fr:checked ~ .content .en { display:none }
    #fr:checked ~ .content .fr { display:block }
    #en:checked ~ .content .fr { display:none }
    #en:checked ~ .content .en { display:block }
    /* état visuel sélection */
    .active{
      outline:2px solid transparent;
      background:
        linear-gradient(var(--ring), var(--ring)) padding-box,
        linear-gradient(90deg,var(--grad-a),var(--grad-b)) border-box;
      border:1px solid transparent;
      color:#08121f; font-weight:800;
    }

    /* Card */
    .card{
      position:relative; border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border:1px solid rgba(148,163,184,.18);
      box-shadow:
        0 30px 60px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.05);
      overflow:hidden;
    }
    .card::before{
      content:""; position:absolute; inset:-1px;
      border-radius:inherit;
      background: conic-gradient(from 200deg at 50% -10%, var(--grad-a), var(--grad-b), transparent 40%);
      filter: blur(28px); opacity:.25; pointer-events:none;
    }
    .inner{ position:relative; padding:28px; }

    h2{
      font-size:1.15rem; 
      margin:1.2rem 0 .35rem;
      color:#FE6BC7;
    }

    h3{
      font-size:1rem; 
    }


    p{margin:.35rem 0}
    ul{margin:.35rem 0 .8rem 1.25rem}
    li{margin:.25rem 0}
    .grid{display:grid; grid-template-columns:1fr; gap:14px}
    .pill{
      display:inline-block; font-size:.8rem; padding:.18rem .55rem; border-radius:999px;
      background:rgba(125,211,252,.12); color:#bfe9ff; border:1px solid rgba(125,211,252,.35);
    }
    .hr{height:1px; background:linear-gradient(90deg,transparent,rgba(148,163,184,.35),transparent); margin:16px 0}

    .muted{color:#cbd5e1}
    a{color:var(--accent); text-decoration:none}
    a:hover{text-decoration:underline}

    #back-to-top{
      text-align: center;
      margin-bottom: 10px;
      margin-top: 10px;
    }

    /* Print */
    @media print{
      body{background:#fff;color:#000}
      .app-icon,.lang,.card::before{display:none}
      .card{border:0; box-shadow:none; background:#fff}
      a{color:#000}
    }

    /* Width tweaks */
    @media (min-width:720px){
      h2{font-size:1.25rem}
      .grid{grid-template-columns: 1fr 1fr}
    }