@font-face{
      font-family:"GuyHoquet";
      src:url("Guyhoquet-Bold.ttf") format("truetype");
      font-weight:700;font-style:normal;
    }
    @font-face{
      font-family:"Montserrat";
      src:url("Montserrat-Light.ttf") format("truetype");
      font-weight:300;font-style:normal;
    }
    @font-face{
      font-family:"Montserrat";
      src:url("Montserrat-Regular.ttf") format("truetype");
      font-weight:400;font-style:normal;
    }
    @font-face{
      font-family:"Montserrat";
      src:url("Montserrat-Medium.ttf") format("truetype");
      font-weight:500;font-style:normal;
    }

    :root{
      --gh-blue:#0f0a30;
      --cta-blue:#006fff;
      --bg:#f0f3f8;
      --text:#0b1220;
      --muted:#5b6475;
      --card:#ffffff;
      --border:#e0e6f0;
      --radius:16px;
      --col1:#006fff;   /* rouge → bleu pour Commercial */
      --col2:#8b5cf6;   /* violet pour Manager */
      --col3:#0f0a30;   /* bleu foncé pour Gestionnaire */
    }

    *{box-sizing:border-box;margin:0;padding:0}

    body{
      font-family:"Montserrat", system-ui, sans-serif;
      font-weight:400;
      background:var(--bg);
      color:var(--text);
      min-height:100vh;
    }

    /* ── HEADER ── */
    header{
      background:var(--gh-blue);
      color:#fff;
      padding:18px 24px 24px;
    }
    .header-inner{
      max-width:1600px;
      margin:0 auto;
      display:flex;
      align-items:flex-start;
      gap:20px;
    }
    .logo{flex-shrink:0}
    .logo img{height:44px;width:auto;display:block}
    .header-text h1{
      font-size:22px;
      font-family:"GuyHoquet","Montserrat",system-ui,sans-serif;
      font-weight:700;
      letter-spacing:.3px;
      margin-bottom:4px;
    }
    .header-text p{
      font-size:14px;
      opacity:.9;
      font-weight:400;
    }

    /* ── BARRE PROGRESSION ── */
    .progress-bar-wrap{
      background:var(--gh-blue);
      padding:0 24px 16px;
      border-bottom:2px solid rgba(255,255,255,.1);
    }
    .progress-bar-inner{
      max-width:1600px;
      margin:0 auto;
    }
    .progress-labels{
      display:flex;
      justify-content:space-between;
      font-size:13px;
      color:rgba(255,255,255,.7);
      margin-bottom:6px;
    }
    .prog-track{
      height:8px;
      background:rgba(255,255,255,.2);
      border-radius:999px;
      overflow:hidden;
    }
    .prog-fill{
      height:100%;
      width:0%;
      background:#006fff;
      border-radius:999px;
      transition:width .3s ease, background .3s;
    }
    #progressDone{
      display:none;
      font-size:13px;
      color:#4ade80;
      margin-top:6px;
      font-weight:500;
    }

    /* ── MAIN 3 COLONNES ── */
    main{
      max-width:1600px;
      margin:0 auto;
      padding:20px 16px 60px;
    }

    .three-col{
      display:grid;
      grid-template-columns:1fr 1fr 380px;
      gap:16px;
      align-items:start;
    }

    /* Colonnes questions */
    .col-questions{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:20px 18px;
      box-shadow:0 4px 20px rgba(0,0,0,.05);
    }
    .col-title{
      font-size:13px;
      font-weight:600;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.8px;
      margin-bottom:16px;
      padding-bottom:10px;
      border-bottom:2px solid var(--border);
    }

    /* Colonne infos utilisateur */
    .col-lead{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:24px 20px;
      box-shadow:0 4px 20px rgba(0,0,0,.05);
      position:sticky;
      top:16px;
    }
    .col-lead h2{
      font-size:17px;
      font-weight:600;
      margin-bottom:18px;
      color:var(--gh-blue);
      font-family:"Montserrat",sans-serif;
    }

    /* ── QUESTIONS ── */
    .q{
      padding:14px 14px 14px;
      border:1px solid var(--border);
      border-radius:14px;
      margin-bottom:14px;
      background:#fafbfd;
      transition:border-color .2s;
    }
    .q.answered{
      border-color:#006fff;
      background:#f4f8ff;
    }
    .q legend{
      font-weight:600;
      font-size:14px;
      color:var(--text);
      margin-bottom:10px;
      line-height:1.4;
    }
    .opts{display:grid;gap:8px}
    .opt{
      display:flex;
      gap:10px;
      align-items:flex-start;
      padding:10px 12px;
      border:1.5px solid var(--border);
      border-radius:12px;
      cursor:pointer;
      font-size:13px;
      line-height:1.4;
      font-weight:400;
      background:#fff;
      transition:all .15s;
    }
    .opt:hover{border-color:#006fff;background:#f0f7ff}
    .opt input[type="radio"]{
      margin-top:2px;
      flex-shrink:0;
      accent-color:#006fff;
    }
    .opt.selected{
      border-color:#006fff;
      background:#eef4ff;
    }

    /* Emoji couleur bullet */
    .bullet{
      font-size:16px;
      flex-shrink:0;
      margin-top:1px;
    }

    /* ── FORMULAIRE LEAD ── */
    .lead-label{
      display:block;
      font-size:12px;
      font-weight:600;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.5px;
      margin:14px 0 6px;
    }
    .lead-label:first-child{margin-top:0}
    .lead-input{
      width:100%;
      padding:12px 14px;
      border:1.5px solid var(--border);
      border-radius:12px;
      font-size:14px;
      font-family:"Montserrat",sans-serif;
      font-weight:400;
      color:var(--text);
      background:#fafbfd;
      transition:border-color .2s;
    }
    .lead-input:focus{
      outline:none;
      border-color:#006fff;
      background:#fff;
    }

    .rgpd-wrap{
      display:flex;
      align-items:flex-start;
      gap:10px;
      margin-top:16px;
      padding:12px;
      background:#f6f8fb;
      border-radius:12px;
      border:1px solid var(--border);
    }
    .rgpd-wrap input[type="checkbox"]{
      margin-top:3px;
      flex-shrink:0;
      accent-color:#006fff;
      width:16px;
      height:16px;
    }
    .rgpd-wrap span{
      font-size:12px;
      color:var(--muted);
      line-height:1.5;
    }

    .btn-submit{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      background:var(--cta-blue);
      border:0;
      color:#fff;
      padding:14px 20px;
      border-radius:12px;
      cursor:pointer;
      width:100%;
      margin-top:16px;
      font-family:"Montserrat",sans-serif;
      font-weight:600;
      font-size:14px;
      letter-spacing:.3px;
      transition:background .2s, transform .1s;
    }
    .btn-submit:hover:not(:disabled){background:#0055dd;transform:translateY(-1px)}
    .btn-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}

    .err{color:#b00020;font-size:12px;margin:8px 0 0}
    .ok{color:#1b7f2a;font-size:12px;margin:8px 0 0}

    /* ── RÉSULTAT ── */
    .result-box{
      margin-top:18px;
      padding:18px;
      border-radius:14px;
      border:2px solid var(--border);
      background:#f8faff;
      display:none;
    }
    .result-box.profile-C{ border-color:#8b5cf6; background:#faf5ff; }
    .result-box.profile-B{ border-color:#0f0a30; background:#f0f2fb; }
    .result-box.profile-A{ border-color:#006fff; background:#f0f7ff; }
    .result-box.profile-TIE{ border-color:#e2a200; background:#fffbf0; }

    .result-profile-badge{
      display:inline-block;
      padding:5px 12px;
      border-radius:999px;
      font-size:11px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.8px;
      margin-bottom:10px;
    }
    .badge-C{background:#8b5cf6;color:#fff}
    .badge-B{background:#0f0a30;color:#fff}
    .badge-A{background:#006fff;color:#fff}
    .badge-TIE{background:#e2a200;color:#fff}

    .result-title{
      font-size:16px;
      font-weight:700;
      margin-bottom:8px;
      color:var(--text);
    }
    .result-text{
      font-size:13px;
      color:#444;
      line-height:1.6;
      margin-bottom:10px;
    }
    .score-line{
      font-size:12px;
      color:var(--muted);
      padding-top:10px;
      border-top:1px solid var(--border);
    }

    /* Légende profils */
    .profiles-legend{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-bottom:20px;
      padding:12px;
      background:#f6f8fb;
      border-radius:12px;
      border:1px solid var(--border);
    }
    .legend-item{
      display:flex;
      align-items:center;
      gap:6px;
      font-size:12px;
      font-weight:500;
    }
    .legend-dot{
      width:10px;height:10px;border-radius:50%;flex-shrink:0;
    }

    /* ══════════════════════════════════════════
       RESPONSIVE — 5 contextes
       ══════════════════════════════════════════ */

    /* ── Mobile < 768px ── */
    @media(max-width:767px){
      .three-col{
        grid-template-columns:1fr;
        gap:12px;
      }
      .col-lead{ position:static; }
      .col-questions{ padding:14px 12px; }
      .header-text h1{ font-size:17px; }
      .header-text p{ font-size:13px; }
      .q legend{ font-size:13px; }
      .opt{ font-size:12px; padding:9px 10px; }
      .lead-input{ font-size:14px; padding:11px 12px; }
      .btn-submit{ font-size:13px; padding:12px 16px; }
      .col-lead h2{ font-size:15px; }
    }

    /* ── Tablette portrait 768–1080px ── */
    @media(min-width:768px) and (max-width:1080px){
      .three-col{
        grid-template-columns:1fr 1fr;
        gap:14px;
      }
      .col-lead{ grid-column:1 / -1; position:static; }
      .header-text h1{ font-size:19px; }
      .q legend{ font-size:14px; }
      .opt{ font-size:13px; padding:10px 12px; }
      .lead-input{ font-size:14px; }
      .btn-submit{ font-size:14px; }
    }

    /* ── Ordinateur 13" 1081–1366px ── */
    @media(min-width:1081px) and (max-width:1366px){
      .three-col{ grid-template-columns:1fr 1fr 360px; gap:14px; }
      .col-lead{ position:sticky; top:16px; }
      .q legend{ font-size:14px; }
      .opt{ font-size:13px; padding:10px 12px; }
      .lead-input{ font-size:14px; }
      .btn-submit{ font-size:14px; padding:13px 18px; }
      .col-lead h2{ font-size:16px; }
    }

    /* ── Ordinateur 15" 1367–1600px ── */
    @media(min-width:1367px) and (max-width:1600px){
      .three-col{ grid-template-columns:1fr 1fr 390px; gap:16px; }
      .col-lead{ position:sticky; top:16px; }
      .q legend{ font-size:15px; }
      .opt{ font-size:14px; padding:11px 13px; }
      .lead-input{ font-size:15px; padding:13px 14px; }
      .btn-submit{ font-size:15px; padding:14px 20px; }
      .col-lead h2{ font-size:16px; }
    }

    /* ── Écran 65" paysage > 1600px ── */
    @media(min-width:1601px){
      .three-col{ grid-template-columns:1fr 1fr 460px; gap:20px; }
      .col-lead{ position:sticky; top:20px; }
      .col-questions{ padding:26px 24px; }

      /* Texte lisible à 80cm */
      .q legend{ font-size:18px; line-height:1.45; margin-bottom:14px; }
      .opt{
        font-size:17px;
        padding:16px 18px;
        border-radius:14px;
        gap:14px;
        min-height:64px;
        align-items:center;
      }
      .opts{ gap:12px; }
      .q{ padding:18px; border-radius:16px; margin-bottom:18px; }
      .col-title{ font-size:15px; margin-bottom:20px; padding-bottom:14px; }

      /* Header */
      .header-text h1{ font-size:28px; }
      .header-text p{ font-size:16px; }

      /* Formulaire lead */
      .col-lead h2{ font-size:20px; margin-bottom:22px; }
      .lead-label{ font-size:13px; margin:18px 0 8px; }
      .lead-input{
        font-size:18px;
        padding:16px 16px;
        border-radius:14px;
      }
      .rgpd-wrap{ padding:16px; margin-top:20px; }
      .rgpd-wrap span{ font-size:14px; }
      .rgpd-wrap input[type="checkbox"]{ width:20px; height:20px; }
      .btn-submit{
        font-size:18px;
        padding:18px 24px;
        border-radius:14px;
        margin-top:20px;
      }

      /* Résultat */
      .result-title{ font-size:20px; }
      .result-text{ font-size:15px; line-height:1.7; }
      .score-line{ font-size:14px; }

      /* Légende */
      .profiles-legend{ padding:16px; margin-bottom:24px; }
      .legend-item{ font-size:15px; gap:8px; }

      /* Progress bar */
      .prog-track{ height:10px; }
      .progress-labels{ font-size:15px; }
      #progressDone{ font-size:15px; }
    }