:root{
      --bg:#f6f8fb;
      --surface:#ffffff;
      --surface-2:#f8fafc;
      --text:#0b2559;
      --body:#263b56;
      --muted:#6b7a90;
      --line:#dce5ef;
      --primary:#0967d9;
      --primary-2:#0756b8;
      --primary-soft:#f2f7fd;
      --yellow:#f4b41a;
      --ok:#16805e;
      --danger:#c7372f;
      --shadow:0 10px 30px rgba(19,52,94,.065);
      --radius:10px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter,"Segoe UI",Arial,sans-serif;
      color:var(--body);
      background:var(--bg);
      line-height:1.5;
      font-size:15px;
      font-weight:400;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }

    button,input,select,textarea{font:inherit}
    button{cursor:pointer}

    .page{
      max-width:1440px;
      margin:0 auto;
      padding:0 34px 56px;
      background:var(--bg);
    }

    .topbar{
      min-height:86px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      margin:0 -34px;
      padding:12px 48px;
      border-bottom:1px solid #e6ecf3;
      background:#fff;
    }

    .brand{display:flex;align-items:center;gap:14px;min-width:0}
    .brand img{
      width:220px;
      max-width:42vw;
      max-height:66px;
      object-fit:contain;
      object-position:left center;
    }
    .brand-copy{display:none}

    .reset{
      border:1px solid var(--line);
      background:#fff;
      color:var(--text);
      border-radius:8px;
      min-height:42px;
      padding:9px 15px;
      font-weight:600;
      font-size:14px;
      box-shadow:none;
      transition:.16s ease;
    }
    .reset:hover{border-color:#bcc9d9;background:#f8fafc}

    .hero{
      position:relative;
      overflow:hidden;
      min-height:220px;
      margin:0 -34px 34px;
      padding:52px 70px 46px;
      color:var(--text);
      background:linear-gradient(100deg,#f8fbff 0%,#f2f7fd 68%,#edf4fc 100%);
      border-radius:0;
      box-shadow:none;
      border-bottom:1px solid #e8eef6;
    }

    .hero::before{
      content:"";
      position:absolute;
      right:88px;
      top:45px;
      width:122px;
      height:144px;
      border:2px solid rgba(9,103,217,.09);
      border-radius:14px;
      opacity:.85;
    }
    .hero::after{
      content:"⚡";
      position:absolute;
      right:70px;
      top:133px;
      width:68px;
      height:68px;
      border:2px solid rgba(9,103,217,.09);
      border-radius:50%;
      display:grid;
      place-items:center;
      color:rgba(249,181,21,.45);
      font-size:30px;
      background:rgba(255,255,255,.34);
    }

    .hero .eyebrow{
      color:var(--primary);
      text-transform:uppercase;
      letter-spacing:.08em;
      font-size:12px;
      font-weight:600;
      opacity:1;
      margin-bottom:10px;
    }
    .hero h1{
      position:relative;
      z-index:1;
      max-width:820px;
      font-size:clamp(32px,3.5vw,42px);
      line-height:1.15;
      margin:0 0 30px;
      letter-spacing:-.025em;
      font-weight:700;
      color:var(--text);
    }
    .hero h1::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-15px;
      width:56px;
      height:3px;
      border-radius:99px;
      background:var(--yellow);
    }
    .hero p{
      position:relative;
      z-index:1;
      margin:0;
      max-width:760px;
      color:#60708a;
      font-size:16px;
      font-weight:400;
      opacity:1;
    }

    .layout{
      display:grid;
      grid-template-columns:270px minmax(0,1fr);
      gap:36px;
      align-items:start;
      max-width:1260px;
      margin:0 auto;
    }

    .sidebar{
      position:sticky;
      top:18px;
      background:transparent;
      border:0;
      border-radius:0;
      padding:8px 0;
      box-shadow:none;
    }

    .progress-head{
      display:flex;
      justify-content:space-between;
      gap:10px;
      align-items:center;
      margin:0 0 8px;
      padding:0 8px;
    }
    .progress-head strong{font-size:13px;font-weight:600;color:#30466d}
    .progress-head span{font-size:12px;color:var(--muted)}
    .bar{
      height:4px;
      background:#e8edf4;
      border-radius:99px;
      overflow:hidden;
      margin:0 8px 23px;
    }
    .bar > i{
      display:block;
      height:100%;
      width:0;
      background:var(--primary);
      border-radius:99px;
      transition:width .2s ease;
    }

    .step-list{position:relative;display:grid;gap:9px}
    .step-list::before{
      content:"";
      position:absolute;
      left:24px;
      top:22px;
      bottom:22px;
      width:1px;
      background:#d5dee9;
      z-index:0;
    }
    .step-chip{
      position:relative;
      z-index:1;
      border:0;
      background:transparent;
      text-align:left;
      padding:7px 6px;
      border-radius:8px;
      color:#65758d;
      display:flex;
      gap:13px;
      align-items:center;
      font-size:13px;
      font-weight:400;
      min-height:52px;
    }
    .step-chip .n{
      flex:0 0 36px;
      height:36px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:#fff;
      border:1px solid #ccd7e5;
      color:#40546f;
      font-size:13px;
      font-weight:600;
      box-shadow:0 0 0 6px var(--bg);
    }
    .step-chip.active{background:transparent;color:var(--primary);font-weight:600}
    .step-chip.active .n{background:var(--primary);border-color:var(--primary);color:#fff}
    .step-chip.done{color:#446689}
    .step-chip.done .n{background:#edf5fd;border-color:#b8d0eb;color:var(--primary)}

    .main-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:12px;
      padding:32px 38px;
      box-shadow:var(--shadow);
      min-width:0;
    }

    .mobile-progress{display:none;margin-bottom:18px}

    .step-kicker{
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:.08em;
      color:var(--primary);
      font-weight:600;
    }
    .step-title{
      font-size:26px;
      line-height:1.2;
      margin:7px 0 8px;
      color:var(--text);
      letter-spacing:-.015em;
      font-weight:700;
    }
    .step-sub{color:var(--muted);margin:0 0 26px;font-size:14px;font-weight:400}

    .section-title{
      font-size:18px;
      font-weight:700;
      color:#123269;
      margin:10px 0 18px;
      padding-bottom:10px;
      border-bottom:1px solid #e5ebf2;
      text-decoration:none;
    }
    .section-note{color:var(--muted);font-size:13px;margin:-10px 0 17px}

    .field{margin:0 0 20px;min-width:0}
    .field label.main-label{
      display:block;
      font-weight:600;
      color:#172b4d;
      font-size:14px;
      margin-bottom:8px;
    }

    .required-mark{
      color:var(--danger);
      font-weight:700;
    }
    .req{color:var(--yellow);margin-left:3px}
    .help{color:var(--muted);font-size:12px;margin-top:6px}
    .grid{display:grid;gap:17px;align-items:start}

    .control{
      width:100%;
      border:1px solid var(--line);
      background:#fff;
      color:#203858;
      border-radius:8px;
      min-height:50px;
      padding:12px 14px;
      outline:none;
      transition:border .15s,box-shadow .15s,background .15s;
      box-shadow:none;
      font-size:14px;
    }
    .control::placeholder{color:#8996a8}
    textarea.control{min-height:54px;resize:vertical}
    .control:hover{border-color:#c6d2e0}
    .control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(9,103,217,.09);background:#fff}

    .options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .options.single{grid-template-columns:1fr}
    .option{
      position:relative;
      border:1px solid var(--line);
      background:#fff;
      border-radius:8px;
      min-height:50px;
      display:flex;
      align-items:center;
      gap:10px;
      padding:11px 13px;
      cursor:pointer;
      transition:.15s;
    }
    .option:hover{border-color:#bfd0e3;background:#fbfdff}
    .option input{width:18px;height:18px;accent-color:var(--primary);flex:0 0 auto}
    .option:has(input:checked){border-color:var(--primary);background:var(--primary-soft);box-shadow:none}
    .option span{font-size:14px;font-weight:500;color:#243b5b}

    .image-option{display:flex;gap:14px;align-items:center;margin:4px 0 15px}
    .image-option img{max-width:150px;max-height:90px;object-fit:contain;border-radius:8px}

    .upload{border:1.5px dashed #bdcad9;background:#f8fafc;border-radius:8px;padding:18px}

    .error{font-size:12px;color:var(--danger);margin-top:7px;font-weight:600}
    .field.invalid .control,.field.invalid .option{border-color:#e5a49f}

    .actions{
      display:flex;
      justify-content:space-between;
      gap:12px;
      align-items:center;
      margin-top:28px;
      padding-top:21px;
      border-top:1px solid #e6ebf1;
    }
    .actions .right{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap}
    .btn{
      min-height:46px;
      border-radius:8px;
      padding:10px 22px;
      font-size:15px;
      font-weight:600;
      border:1px solid transparent;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-decoration:none;
      pointer-events:auto;
      position:relative;
      z-index:1;
      transition:.16s ease;
    }
    .btn.secondary{background:#fff;border-color:#cbd6e3;color:#264161;box-shadow:none}
    .btn.secondary:hover{background:#f8fafc;border-color:#aebdce}
    .btn.primary{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:none}
    .btn.primary:hover{background:var(--primary-2);border-color:var(--primary-2)}
    .btn.pdf{background:#0b2559;color:#fff;border-color:#0b2559;box-shadow:none}
    .btn.pdf:hover{background:#071c45;border-color:#071c45}

    .save-note{font-size:12px;color:#7b8899}

    .summary{margin-top:18px;background:#fafbfd;border:1px solid var(--line);border-radius:8px;padding:18px}
    .summary h3{margin:0 0 12px;font-size:16px;font-weight:700;color:#173765}
    .summary dl{display:grid;grid-template-columns:minmax(180px,.9fr) minmax(0,1.5fr);gap:8px 18px;margin:0}
    .summary dt{color:#718096;font-size:13px}
    .summary dd{margin:0;color:#18365f;font-size:13px;font-weight:600;overflow-wrap:anywhere}

    .notice{background:#fff9e8;border:1px solid #edd484;color:#67531c;padding:13px 15px;border-radius:8px;font-size:13px;margin-top:14px}
    .success{background:#edf8f4;border:1px solid #acd8c9;color:#07563d;padding:15px;border-radius:8px;margin-top:16px}

    .hidden{display:none!important}

    @media (max-width:900px){
      .page{padding:0 18px 40px}
      .topbar{margin:0 -18px;padding:12px 22px;min-height:80px}
      .brand img{width:190px}
      .hero{margin:0 -18px 28px;padding:38px 26px 36px;min-height:auto}
      .hero::before,.hero::after{display:none}
      .layout{grid-template-columns:1fr;gap:20px}
      .sidebar{display:none}
      .mobile-progress{display:block;background:#f8fafc;border:1px solid var(--line);border-radius:8px;padding:13px 14px 3px}
      .main-card{padding:24px}
    }

    @media (max-width:640px){
      .page{padding:0 12px 32px}
      .topbar{margin:0 -12px;padding:10px 14px}
      .brand img{width:165px;max-width:55vw}
      .reset{padding:8px 11px;font-size:13px}
      .hero{margin:0 -12px 22px;padding:31px 18px 29px}
      .hero h1{font-size:30px;margin-bottom:29px}
      .hero p{font-size:15px}
      .main-card{border-radius:10px;padding:18px}
      .options{grid-template-columns:1fr}
      .step-title{font-size:24px}
      .grid{grid-template-columns:1fr!important}
      .actions{align-items:stretch;flex-direction:column}
      .actions .right{margin-left:0}
      .btn{width:100%}
      .save-note{text-align:center}
      .summary dl{grid-template-columns:1fr;gap:3px}
      .summary dd{margin-bottom:8px}
    }

  
    /* === Pleine page Sarvin Elec === */
    html, body{
      width:100%;
      min-height:100%;
      background:#f7f9fc;
    }

    .page{
      width:100%;
      max-width:none;
      margin:0;
      padding:0 40px 56px;
      background:#f7f9fc;
    }

    .topbar{
      width:auto;
      margin:0 -40px;
      padding-left:48px;
      padding-right:48px;
    }

    .hero{
      width:auto;
      margin-left:-40px;
      margin-right:-40px;
      padding-left:66px;
      padding-right:66px;
    }

    .layout{
      width:100%;
      max-width:none;
      margin:0;
      grid-template-columns:260px minmax(0,1fr);
      gap:34px;
    }

    .main-card{
      width:100%;
      max-width:none;
    }

    @media (min-width:1500px){
      .page{padding-left:52px;padding-right:52px}
      .topbar{margin-left:-52px;margin-right:-52px;padding-left:64px;padding-right:64px}
      .hero{margin-left:-52px;margin-right:-52px;padding-left:82px;padding-right:82px}
      .layout{grid-template-columns:280px minmax(0,1fr);gap:42px}
      .main-card{padding-left:46px;padding-right:46px}
    }

    @media (max-width:900px){
      .page{padding-left:18px;padding-right:18px}
      .topbar{margin-left:-18px;margin-right:-18px}
      .hero{margin-left:-18px;margin-right:-18px}
      .layout{grid-template-columns:1fr}
    }

    @media (max-width:640px){
      .page{padding-left:12px;padding-right:12px}
      .topbar{margin-left:-12px;margin-right:-12px}
      .hero{margin-left:-12px;margin-right:-12px}
    }

  

    /* ============================================================
       DESIGN PROFESSIONNEL SARVIN ELEC — surcharge visuelle
       Contenu, champs, textes et logique JavaScript inchangés.
       ============================================================ */

    :root{
      --bg:#f3f6fa;
      --surface:#ffffff;
      --surface-2:#f8fafc;
      --text:#0b2559;
      --body:#334760;
      --muted:#718096;
      --line:#dbe3ed;
      --primary:#0967d9;
      --primary-2:#0758bd;
      --primary-soft:#eef5fd;
      --yellow:#f9b515;
      --ok:#14805e;
      --danger:#b42318;
      --shadow:0 16px 44px rgba(18,48,86,.08);
      --shadow-soft:0 8px 24px rgba(18,48,86,.055);
      --radius:14px;
    }

    body{
      background:var(--bg);
      color:var(--body);
    }

    .page{
      padding:0 36px 64px;
      background:var(--bg);
    }

    /* En-tête plus compact et institutionnel */
    .topbar{
      min-height:78px;
      margin:0 -36px;
      padding:10px 54px;
      border-bottom:1px solid #e3e9f1;
      background:rgba(255,255,255,.98);
      box-shadow:0 1px 0 rgba(11,37,89,.02);
    }

    .brand img{
      width:205px;
      max-height:58px;
    }

    .reset{
      min-height:40px;
      padding:8px 14px;
      border-color:#d6dee9;
      border-radius:9px;
      background:#fff;
      color:#4d6079;
      font-size:13px;
      font-weight:600;
    }

    .reset:hover{
      color:var(--text);
      border-color:#bcc8d7;
      background:#f8fafc;
    }

    /* Hero plus sobre et plus compact */
    .hero{
      min-height:158px;
      margin:0 -36px 38px;
      padding:34px 70px 32px;
      background:linear-gradient(110deg,#ffffff 0%,#f7faff 52%,#eef5fd 100%);
      border-bottom:1px solid #e2e9f2;
    }

    .hero::before{
      right:88px;
      top:26px;
      width:110px;
      height:110px;
      border:1px solid rgba(9,103,217,.08);
      border-radius:24px;
      transform:rotate(8deg);
    }

    .hero::after{
      right:62px;
      top:72px;
      width:58px;
      height:58px;
      border:1px solid rgba(9,103,217,.09);
      color:rgba(249,181,21,.52);
      font-size:25px;
      box-shadow:0 8px 24px rgba(9,103,217,.05);
      background:rgba(255,255,255,.72);
    }

    .hero .eyebrow{
      margin-bottom:7px;
      font-size:11px;
      font-weight:700;
      letter-spacing:.11em;
    }

    .hero h1{
      max-width:860px;
      margin:0 0 20px;
      font-size:clamp(30px,3vw,39px);
      line-height:1.12;
      letter-spacing:-.025em;
    }

    .hero h1::after{
      bottom:-10px;
      width:44px;
      height:3px;
    }

    .hero p{
      max-width:780px;
      font-size:15px;
      line-height:1.55;
      color:#65758b;
    }

    /* Mise en page recentrée : lecture plus confortable */
    .layout{
      width:100%;
      max-width:1360px;
      margin:0 auto;
      grid-template-columns:268px minmax(0,1040px);
      gap:38px;
      justify-content:center;
      align-items:start;
    }

    /* Navigation d'étapes façon outil métier */
    .sidebar{
      top:22px;
      padding:20px 15px 18px;
      background:#fff;
      border:1px solid #e0e7f0;
      border-radius:16px;
      box-shadow:var(--shadow-soft);
    }

    .progress-head{
      margin:0 0 9px;
      padding:0 5px;
    }

    .progress-head strong{
      color:#253f63;
      font-size:13px;
      font-weight:700;
    }

    .progress-head span{
      font-size:12px;
      color:#8290a3;
    }

    .bar{
      height:6px;
      margin:0 5px 20px;
      background:#edf1f6;
    }

    .bar > i{
      background:linear-gradient(90deg,var(--primary),#3187ea);
    }

    .step-list{
      gap:5px;
    }

    .step-list::before{
      left:25px;
      top:24px;
      bottom:24px;
      background:#e0e6ee;
    }

    .step-chip{
      min-height:50px;
      padding:7px 8px;
      border-radius:11px;
      color:#6d7c90;
      font-size:13px;
      transition:background .16s ease,color .16s ease,transform .16s ease;
    }

    .step-chip:hover{
      background:#f7f9fc;
      color:#3a5271;
    }

    .step-chip .n{
      flex-basis:36px;
      width:36px;
      height:36px;
      border-color:#ccd7e4;
      color:#52657d;
      box-shadow:0 0 0 5px #fff;
      background:#fff;
    }

    .step-chip.active{
      color:#123a76;
      font-weight:700;
      background:#f1f6fd;
    }

    .step-chip.active .n{
      border-color:var(--primary);
      background:var(--primary);
      color:#fff;
      box-shadow:0 0 0 5px #fff,0 4px 12px rgba(9,103,217,.18);
    }

    .step-chip.done{
      color:#416487;
    }

    .step-chip.done .n{
      background:#edf5fd;
      border-color:#b7d0ec;
      color:var(--primary);
    }

    /* Carte centrale */
    .main-card{
      width:100%;
      max-width:1040px;
      padding:40px 46px;
      border:1px solid #dfe6ef;
      border-radius:18px;
      box-shadow:var(--shadow);
      background:#fff;
    }

    .step-kicker{
      font-size:11px;
      font-weight:700;
      letter-spacing:.11em;
      color:var(--primary);
    }

    .step-title{
      margin:7px 0 8px;
      font-size:28px;
      line-height:1.18;
      letter-spacing:-.02em;
      color:#0b2559;
    }

    .step-sub{
      max-width:780px;
      margin:0 0 30px;
      color:#77869a;
      font-size:14px;
      line-height:1.55;
    }

    /* Titres de sections : plus structurés, sans changer le texte */
    .section-title{
      position:relative;
      margin:30px 0 19px;
      padding:12px 16px 12px 18px;
      border:1px solid #e3e9f1;
      border-bottom:1px solid #e3e9f1;
      border-radius:11px;
      background:#f8fafc;
      color:#123269;
      font-size:17px;
      line-height:1.35;
      font-weight:700;
    }

    .section-title:first-of-type{
      margin-top:10px;
    }

    .section-title::before{
      content:"";
      position:absolute;
      left:0;
      top:10px;
      bottom:10px;
      width:3px;
      border-radius:99px;
      background:var(--yellow);
    }

    .section-note{
      margin:-10px 2px 18px;
      color:#7e8c9f;
      font-size:12px;
    }

    /* Champs */
    .field{
      margin-bottom:22px;
    }

    .field label.main-label{
      margin-bottom:8px;
      color:#203652;
      font-size:14px;
      font-weight:650;
    }

    .help{
      margin-top:7px;
      color:#8390a1;
      font-size:12px;
      line-height:1.45;
    }

    .grid{
      gap:18px;
    }

    .control{
      min-height:52px;
      padding:12px 14px;
      border:1px solid #d7e0ea;
      border-radius:10px;
      background:#fbfcfe;
      color:#203858;
      font-size:14px;
      transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
    }

    textarea.control{
      min-height:86px;
      line-height:1.5;
    }

    .control:hover{
      border-color:#bcc9d8;
      background:#fff;
    }

    .control:focus{
      border-color:var(--primary);
      background:#fff;
      box-shadow:0 0 0 4px rgba(9,103,217,.09);
    }

    .control::placeholder{
      color:#9aa6b5;
    }

    /* Choix radio / cases sous forme de cartes */
    .options{
      gap:11px;
    }

    .option{
      min-height:54px;
      padding:12px 14px;
      border:1px solid #dbe3ec;
      border-radius:11px;
      background:#fff;
      transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease;
    }

    .option:hover{
      border-color:#b8c9dc;
      background:#fbfdff;
      box-shadow:0 5px 16px rgba(18,48,86,.045);
    }

    .option input{
      width:18px;
      height:18px;
    }

    .option span{
      color:#2d425e;
      font-size:14px;
      font-weight:550;
    }

    .option:has(input:checked){
      border-color:#7fb3ec;
      background:#eef5fd;
      box-shadow:inset 0 0 0 1px rgba(9,103,217,.10),0 5px 16px rgba(9,103,217,.055);
    }

    .option:has(input:checked) span{
      color:#0f4d99;
      font-weight:650;
    }

    .image-option{
      padding:8px 0 2px;
    }

    .image-option img{
      border:1px solid #e2e8f0;
      border-radius:10px;
      background:#fff;
      box-shadow:0 5px 14px rgba(18,48,86,.05);
    }

    .upload{
      padding:20px;
      border:1.5px dashed #b9c7d7;
      border-radius:12px;
      background:#f8fafc;
    }

    /* Actions */
    .actions{
      margin-top:34px;
      padding-top:24px;
      border-top:1px solid #e7ecf2;
    }

    .btn{
      min-height:48px;
      padding:10px 22px;
      border-radius:10px;
      font-size:14px;
      font-weight:700;
      transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
    }

    .btn:hover{
      transform:translateY(-1px);
    }

    .btn.secondary{
      border-color:#d2dbe6;
      background:#fff;
      color:#3b536f;
    }

    .btn.secondary:hover{
      border-color:#b8c5d4;
      background:#f8fafc;
    }

    .btn.primary{
      border-color:var(--primary);
      background:var(--primary);
      color:#fff;
      box-shadow:0 7px 18px rgba(9,103,217,.18);
    }

    .btn.primary:hover{
      border-color:var(--primary-2);
      background:var(--primary-2);
      box-shadow:0 9px 22px rgba(9,103,217,.22);
    }

    .btn.pdf{
      border-color:#0b2559;
      background:#0b2559;
      color:#fff;
      box-shadow:0 7px 18px rgba(11,37,89,.13);
    }

    .save-note{
      color:#8a96a5;
      font-size:11px;
    }

    /* Récapitulatif et messages */
    .summary{
      margin-top:20px;
      padding:20px 22px;
      border:1px solid #e0e7ef;
      border-radius:12px;
      background:#f8fafc;
    }

    .summary h3{
      color:#123269;
      font-size:16px;
    }

    .summary dt{
      color:#79879a;
    }

    .summary dd{
      color:#203c61;
    }

    .notice{
      margin-top:16px;
      padding:14px 16px;
      border-color:#ead79a;
      border-radius:10px;
      background:#fffaf0;
      color:#69551d;
    }

    .success{
      padding:16px 18px;
      border-radius:10px;
      box-shadow:0 5px 16px rgba(20,128,94,.06);
    }

    .mobile-progress{
      border-radius:12px;
    }

    /* Grand écran */
    @media (min-width:1500px){
      .page{padding-left:48px;padding-right:48px}
      .topbar{margin-left:-48px;margin-right:-48px;padding-left:64px;padding-right:64px}
      .hero{margin-left:-48px;margin-right:-48px;padding-left:82px;padding-right:82px}
      .layout{grid-template-columns:276px minmax(0,1040px);gap:44px}
      .main-card{padding-left:50px;padding-right:50px}
    }

    /* Tablette */
    @media (max-width:1100px){
      .layout{
        grid-template-columns:240px minmax(0,1fr);
        gap:24px;
      }
      .main-card{
        padding:34px 30px;
      }
    }

    @media (max-width:900px){
      .page{padding-left:18px;padding-right:18px;padding-bottom:44px}
      .topbar{margin-left:-18px;margin-right:-18px;padding-left:22px;padding-right:22px}
      .hero{margin-left:-18px;margin-right:-18px;padding:32px 28px 30px}
      .layout{grid-template-columns:1fr;gap:20px;max-width:860px}
      .sidebar{display:none}
      .mobile-progress{display:block;background:#fff;border:1px solid #e0e7ef;padding:14px 15px 5px;box-shadow:var(--shadow-soft)}
      .main-card{max-width:none;padding:30px 28px;border-radius:16px}
    }

    /* Mobile */
    @media (max-width:640px){
      .page{padding-left:12px;padding-right:12px;padding-bottom:32px}
      .topbar{margin-left:-12px;margin-right:-12px;padding:9px 14px;min-height:70px}
      .brand img{width:160px;max-width:54vw}
      .reset{padding:7px 10px;font-size:12px}
      .hero{margin-left:-12px;margin-right:-12px;margin-bottom:20px;padding:27px 18px 26px}
      .hero h1{font-size:28px;margin-bottom:20px}
      .hero p{font-size:14px}
      .main-card{padding:22px 17px;border-radius:14px}
      .step-title{font-size:23px}
      .step-sub{margin-bottom:24px}
      .section-title{margin-top:25px;padding:11px 13px 11px 16px;font-size:16px}
      .options{grid-template-columns:1fr}
      .option{min-height:52px}
      .grid{grid-template-columns:1fr!important}
      .actions{margin-top:28px;align-items:stretch;flex-direction:column}
      .actions .right{margin-left:0}
      .btn{width:100%}
      .save-note{text-align:center}
      .summary{padding:17px}
      .summary dl{grid-template-columns:1fr;gap:3px}
      .summary dd{margin-bottom:8px}
    }

  
    .hero{display:none !important;}
    .layout{margin-top:18px;}

    /* Finition visuelle : interface plus claire et plus rassurante */
    body{
      font-family:Aptos,"Segoe UI",Arial,sans-serif;
      background:radial-gradient(circle at top right,#edf5ff 0,transparent 32rem),#f6f8fb;
      color:#263b56;
    }

    .topbar{
      background:rgba(255,255,255,.94);
      backdrop-filter:blur(12px);
    }

    .main-card{
      border-color:#dce5ef;
      box-shadow:0 18px 42px rgba(16,42,78,.09);
    }

    .required-note{
      display:flex;
      align-items:center;
      gap:5px;
      margin:0 0 24px;
      color:#718198;
      font-size:12px;
    }

    .required-note span,.required-mark{
      color:#c7372f;
      font-weight:800;
    }

    .field label.main-label{
      letter-spacing:.005em;
    }

    .control{
      background:#fff;
    }

    .control:focus-visible{
      border-color:#0967d9;
      box-shadow:0 0 0 4px rgba(9,103,217,.14);
    }

    .option:has(input:focus-visible){
      outline:3px solid rgba(9,103,217,.18);
      outline-offset:2px;
    }

    .btn.primary{
      background:linear-gradient(135deg,#0875e1,#0756b8);
    }

    .btn.primary::after{
      content:"→";
      margin-left:9px;
      font-size:17px;
      line-height:1;
    }

    .btn.primary:hover{
      background:linear-gradient(135deg,#075fc0,#06499c);
    }

    .btn:focus-visible,.reset:focus-visible{
      outline:3px solid rgba(9,103,217,.22);
      outline-offset:3px;
    }

    @media (max-width:640px){
      .required-note{margin-bottom:20px;}
    }

    /* Bloc appareillage : choix de marque et de gamme */
    .field[data-field="appareillage_marque"] .options{
      gap:12px;
    }

    .field[data-field="appareillage_marque"] .option{
      min-height:60px;
      padding:14px 18px;
      border-radius:12px;
      background:linear-gradient(135deg,#fff,#fafcff);
    }

    .field[data-field="appareillage_marque"] .option span{
      font-size:15px;
      font-weight:650;
    }

    .field[data-field="appareillage_marque"] .option:has(input:checked){
      border-color:#73abeb;
      background:linear-gradient(135deg,#f2f7ff,#eaf3ff);
      box-shadow:0 8px 20px rgba(9,103,217,.09);
    }

    .image-option{
      display:inline-flex;
      min-height:64px;
      margin:8px 0 18px;
      padding:8px 13px;
      border:1px solid #e0e7ef;
      border-radius:12px;
      background:#fff;
      box-shadow:0 6px 16px rgba(18,48,86,.06);
    }

    .image-option img{
      max-width:132px;
      max-height:58px;
      border:0;
      box-shadow:none;
    }

    @media (max-width:640px){
      .field[data-field="appareillage_marque"] .option{min-height:56px;}
    }

    /* Points de charge / IRVE */
    .irve-count-field{
      margin:4px 0 28px;
      padding:18px;
      border:1px solid #d9e5f3;
      border-radius:14px;
      background:linear-gradient(135deg,#f8fbff,#f1f7ff);
    }

    .irve-count-field .main-label{
      font-size:16px!important;
    }

    .irve-count-field .options{
      margin-top:13px;
    }

    .irve-point-card{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:18px;
      margin:18px 0;
      padding:20px;
      border:1px solid #dce6f0;
      border-radius:14px;
      background:#fff;
      box-shadow:0 8px 22px rgba(19,52,94,.055);
    }

    .irve-point-header{
      grid-column:1/-1;
      display:flex;
      align-items:center;
      gap:9px;
      margin-bottom:1px;
      color:#123a76;
      font-size:15px;
    }

    .irve-point-number{
      display:grid;
      width:26px;
      height:26px;
      place-items:center;
      border-radius:50%;
      background:#0967d9;
      color:#fff;
      font-size:13px;
      font-weight:700;
    }

    .irve-point-card .field{
      margin:0;
    }

    @media (max-width:640px){
      .irve-count-field,.irve-point-card{padding:16px;}
      .irve-point-card{grid-template-columns:1fr;gap:16px;}
    }

    /* Commentaires facultatifs : présents sans alourdir le parcours. */
    .comment-field{
      margin-top:22px;
      padding:14px 16px;
      border:1px dashed #c8d8ea;
      border-radius:12px;
      background:#f8fbff;
    }
    .comment-field .main-label{
      color:#55708e;
      font-size:13px;
    }
    .comment-field .control{
      min-height:76px;
      background:#fff;
    }

    /* Progression compacte, placée au-dessus du questionnaire. */
    .layout{
      grid-template-columns:minmax(0,1040px);
      max-width:1040px;
      gap:0;
    }
    .compact-progress{
      margin:0 0 28px;
      padding:14px 16px 15px;
      border:1px solid #dce7f2;
      border-radius:13px;
      background:linear-gradient(135deg,#f9fbfe,#f2f7fc);
    }
    .compact-progress-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      margin-bottom:10px;
      color:#49617d;
      font-size:13px;
      font-weight:600;
    }
    .compact-progress-head strong{
      flex:0 0 auto;
      color:#0b57bc;
      font-size:13px;
    }
    .compact-bar{
      height:6px;
      overflow:hidden;
      border-radius:999px;
      background:#dfe9f3;
    }
    .compact-bar i{
      display:block;
      width:0;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg,#0967d9,#3d91ed);
      transition:width .25s ease;
    }
    @media (max-width:640px){
      .compact-progress{margin-bottom:22px;padding:13px 14px;}
      .compact-progress-head{align-items:flex-start;}
    }

    /* Récapitulatif : même hiérarchie que le questionnaire. */
    .summary-subheading{
      margin:20px 0 10px;
      padding:9px 12px;
      border-left:3px solid #f4bd16;
      border-radius:0 8px 8px 0;
      background:#f4f8fd;
      color:#163e78;
      font-size:14px;
    }
    .summary .summary-subheading:first-of-type{margin-top:0;}
    .summary-inactive{color:#97a5b5!important;font-weight:400!important;}
    .summary-comment{
      display:grid;
      grid-template-columns:minmax(180px,.9fr) minmax(0,1.5fr);
      gap:18px;
      margin:12px 0 4px;
      padding:12px 14px;
      border:1px dashed #cbd8e6;
      border-radius:10px;
      background:#f8fbfe;
      color:#5b6f86;
      font-size:13px;
      overflow-wrap:anywhere;
    }
    .summary-comment strong{font-weight:600;color:#60748a;}
    .summary-comment dd{margin:0;color:#52677f;font-weight:400;}
    .summary-empty{margin:0;color:#8a99a9;font-size:13px;}
    .option.is-locked{
      cursor:not-allowed;
      border-color:#e2e8f0;
      background:#f5f7fa;
      color:#9aa8b8;
      opacity:.72;
    }
    .option.is-locked input{cursor:not-allowed;}

    /* Finition visuelle : système unique, sobre et professionnel. */
    :root{
      --bg:#f4f7fb;
      --surface:#ffffff;
      --surface-2:#f8faff;
      --text:#102a56;
      --body:#29415f;
      --muted:#64758a;
      --line:#dbe5ef;
      --primary:#1269cf;
      --primary-2:#0d56ab;
      --primary-soft:#edf5ff;
      --yellow:#efb817;
      --shadow:0 12px 32px rgba(26,55,94,.07);
      --radius:12px;
    }
    body,button,input,select,textarea{
      font-family:Aptos,"Segoe UI Variable","Segoe UI",Arial,sans-serif;
    }
    body{font-size:15px;letter-spacing:0;}
    .topbar{border-bottom-color:#e1e9f2;}
    .reset{border-radius:9px;font-weight:600;}
    .hero{
      min-height:205px;
      background:linear-gradient(112deg,#fbfdff 0%,#f2f7fd 65%,#eaf3fc 100%);
    }
    .hero h1,.step-title{letter-spacing:-.025em;}
    .main-card{
      border-color:#dce6f0;
      border-radius:18px;
      box-shadow:0 14px 36px rgba(23,52,90,.075);
    }
    .compact-progress{
      border-color:#d9e6f3;
      background:linear-gradient(115deg,#fbfdff,#f1f6fc);
    }
    .compact-progress-head{font-size:13px;}
    .step-kicker{font-size:11px;letter-spacing:.12em;}
    .step-title{font-weight:750;}
    .section-title{
      margin-top:32px;
      border-color:#dce6f0;
      border-radius:12px;
      background:#f8fafd;
      color:#12366d;
      font-size:16px;
      font-weight:700;
    }
    .section-title::before{background:var(--yellow);}
    .main-label{color:#173760;font-size:14px;font-weight:650;}
    .help{color:#718298;line-height:1.45;}
    .control{
      border-color:#cfdae7;
      border-radius:10px;
      background:#fff;
      box-shadow:none;
    }
    .control:hover{border-color:#b9cadc;}
    .control:focus{
      border-color:var(--primary);
      box-shadow:0 0 0 3px rgba(18,105,207,.12);
    }
    .option{
      min-height:54px;
      border-color:#d6e0eb;
      border-radius:11px;
      background:#fff;
      transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease;
    }
    .option:hover{border-color:#a9c5e2;background:#fbfdff;}
    .option:has(input:checked){
      border-color:#68a8eb;
      background:#eef6ff;
      box-shadow:0 5px 14px rgba(18,105,207,.07);
    }
    .option span{color:#203d63;font-weight:600;}
    .btn{border-radius:10px;font-weight:650;}
    .btn.primary{box-shadow:0 7px 16px rgba(18,105,207,.18);}
    .btn.primary:hover{box-shadow:0 9px 20px rgba(18,105,207,.24);transform:translateY(-1px);}
    /* Zone de finalisation : une action principale claire, les exports restent secondaires. */
    .actions.is-final{
      display:grid;
      grid-template-columns:auto minmax(120px,1fr);
      gap:14px;
      align-items:center;
    }
    .actions.is-final .save-note{
      padding-left:14px;
      border-left:1px solid #dbe5ef;
      line-height:1.45;
    }
    .actions.is-final .right{
      grid-column:2;
      display:flex;
      flex-wrap:nowrap;
      justify-content:flex-end;
      gap:9px;
    }
    .actions.is-final .btn{
      min-height:48px;
      padding:10px 16px;
      white-space:nowrap;
      font-size:13px;
    }
    .actions.is-final .btn.primary{padding-inline:22px;}
    .btn.primary.is-sent,
    .btn.primary.is-sent:hover{
      cursor:default;
      background:#177a58;
      border-color:#177a58;
      box-shadow:none;
      transform:none;
    }
    .submission-status{
      display:flex;
      align-items:flex-start;
      gap:11px;
      max-width:none;
      margin-top:14px;
      padding:14px 16px;
    }
    .success-mark{
      display:grid;
      flex:0 0 24px;
      width:24px;
      height:24px;
      place-items:center;
      border-radius:50%;
      background:#177a58;
      color:#fff;
      font-weight:800;
      line-height:1;
    }
    .submission-status strong{font-size:14px;}
    .submission-status span:not(.success-mark){font-size:13px;}
    @media (max-width:900px){
      .actions.is-final{grid-template-columns:auto 1fr;}
      .actions.is-final .right{grid-column:1 / -1;justify-content:flex-end;}
    }
    .summary{
      border-color:#dbe5ef;
      border-radius:13px;
      background:#fbfcfe;
    }
    .summary h3{color:#14396f;font-size:16px;}
    .summary-details{
      margin-top:26px;
      border:1px solid #dbe5ef;
      border-radius:13px;
      background:#fff;
      overflow:hidden;
    }
    .summary-details summary{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding:17px 20px;
      color:#102a56;
      cursor:pointer;
      list-style:none;
      user-select:none;
    }
    .summary-details summary::-webkit-details-marker{display:none;}
    .summary-details summary strong{display:block;font-size:16px;}
    .summary-details summary small{display:block;margin-top:4px;color:#64758a;font-size:12px;font-weight:400;}
    .summary-toggle{
      flex:0 0 auto;
      display:inline-flex;
      align-items:center;
      gap:7px;
      color:#1269cf;
      font-size:13px;
      font-weight:700;
    }
    .summary-toggle::after{content:'⌄';font-size:18px;line-height:1;transition:transform .16s ease;}
    .summary-details[open] .summary-toggle{font-size:0;}
    .summary-details[open] .summary-toggle::before{content:'Masquer';font-size:13px;}
    .summary-details[open] .summary-toggle::after{transform:rotate(180deg);}
    .summary-content{padding:0 20px 20px;border-top:1px solid #e6edf5;}
    .summary-content .summary{margin-top:16px;}
    .permanently-hidden{display:none!important;}

    /* Palette unifiée : sobre, technique et lisible. */
    :root{
      --bg:#f7f9fc;
      --surface:#ffffff;
      --surface-2:#f9fbfd;
      --text:#16355f;
      --body:#34495e;
      --muted:#6e7f92;
      --line:#dfe6ee;
      --primary:#1e6fb8;
      --primary-2:#165a96;
      --primary-soft:#eff6fc;
      --yellow:#c89a3d;
      --ok:#27805d;
      --shadow:0 14px 36px rgba(22,53,95,.075);
    }
    body{background:#f7f9fc;color:#34495e;}
    .topbar{border-bottom-color:#dfe6ee;background:#fff;}
    .main-card{border-color:#dfe6ee;box-shadow:var(--shadow);}
    .compact-progress{border-color:#dfe6ee;background:#f9fbfd;}
    .step-title{color:#16355f;}
    .step-kicker{background:#eff6fc;color:#1e6fb8;}
    .section-title{color:#16355f;}
    .btn.primary{background:linear-gradient(135deg,#1e6fb8,#165a96);box-shadow:0 7px 16px rgba(30,111,184,.16);}
    .btn.primary:hover{background:linear-gradient(135deg,#165f9f,#124d81);box-shadow:0 9px 20px rgba(30,111,184,.2);}
    .btn.pdf{background:#16355f;border-color:#16355f;}
    .btn.pdf:hover{background:#102a4b;border-color:#102a4b;}
    .option:has(input:checked){border-color:#75a9d6;background:#eff6fc;box-shadow:inset 0 0 0 1px rgba(30,111,184,.08);}
    .option:has(input:checked) span{color:#165a96;}
    .success-mark,.submission-modal-icon{background:var(--ok);}
    .support-card{border-color:#dfe6ee;background:#f9fbfd;}
    .support-card h2{color:#294563;}
    .support-card > .btn.secondary{border-color:#d7e1ea;color:#526f8c;}
    body,button,input,select,textarea{
      font-family:"DM Sans",Aptos,"Segoe UI",Arial,sans-serif;
    }

    .support-card{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:14px;
      align-items:center;
      margin:0 0 24px;
      padding:16px 18px;
      border:1px solid #e1e9f1;
      border-radius:11px;
      background:#fbfcfe;
    }
    .support-eyebrow{
      display:none;
    }
    .support-card h2{
      margin:0;
      color:#284664;
      font-size:16px;
      line-height:1.25;
    }
    .support-card-copy > p:last-child{
      margin:4px 0 0;
      color:#7b8ea2;
      font-size:12px;
      line-height:1.45;
    }
    .support-card > .btn.secondary{
      min-height:38px;
      padding:7px 12px;
      border-color:#d7e3ee;
      background:#fff;
      color:#56718e;
      font-size:13px;
    }
    .support-form-panel{
      grid-column:1 / -1;
      padding-top:16px;
      border-top:1px solid #e1eaf3;
    }
    .support-form-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px 16px;
    }
    .support-form-grid label,.support-message-label{
      display:grid;
      gap:6px;
      color:#274563;
      font-size:13px;
      font-weight:650;
    }
    .support-message-label{margin-top:16px;}
    .support-message-label span{color:#7b8ea2;font-weight:400;}
    .support-form-actions{
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:12px 16px;
      margin-top:18px;
    }
    .support-form-actions small{color:#71849a;font-size:12px;}
    .support-notice{
      grid-column:1 / -1;
      margin:0;
      color:#177a58;
      font-size:13px;
      font-weight:650;
      line-height:1.45;
    }
    .support-quick-link{
      margin-left:auto;
      padding:7px 4px;
      border:0;
      background:transparent;
      color:#597694;
      font-size:13px;
      font-weight:600;
      text-decoration:underline;
      text-decoration-color:#c7d6e5;
      text-underline-offset:3px;
      cursor:pointer;
    }
    .support-quick-link:hover{color:#1269cf;}

    /* Hiérarchie de lecture : l'étape guide, les sections structurent,
       les aides restent au second plan. */
    .step-kicker{
      display:inline-flex;
      align-items:center;
      min-height:24px;
      padding:0 9px;
      border-radius:999px;
      background:#eaf3fd;
      color:#1464b8;
      font-size:10px;
      letter-spacing:.1em;
    }
    .step-title{
      max-width:760px;
      margin:12px 0 28px;
      color:#102d5a;
      font-size:30px;
      line-height:1.14;
    }
    .section-title{
      margin:34px 0 18px;
      padding:0 0 0 13px;
      border:0;
      border-left:3px solid var(--yellow);
      border-radius:0;
      background:transparent;
      color:#183b70;
      font-size:16px;
    }
    .section-title::before{display:none;}
    .section-note{
      max-width:760px;
      margin:-10px 0 20px 16px;
      color:#7a8ba0;
      font-size:12px;
      line-height:1.5;
    }
    .field{margin-bottom:26px;}
    .field label.main-label{
      margin-bottom:7px;
      color:#183654;
      font-size:14px;
      font-weight:700;
    }
    .help{
      max-width:720px;
      margin-top:6px;
      color:#75869a;
      font-size:12px;
      line-height:1.5;
    }
    .option{
      min-height:50px;
      padding:11px 13px;
      border-color:#e0e7ef;
      border-radius:9px;
      background:#fcfdff;
      box-shadow:none;
    }
    .option:hover{
      border-color:#b8cbe0;
      background:#fff;
      box-shadow:none;
    }
    .option span{font-weight:550;}
    .option:has(input:checked){
      border-color:#5e9fdf;
      background:#edf6ff;
      box-shadow:inset 0 0 0 1px rgba(18,105,207,.08);
    }
    .option:has(input:checked) span{font-weight:650;}
    .control{background:#fff;}
    .actions{
      margin-top:40px;
      padding-top:22px;
      border-top-color:#e5edf5;
    }
    .btn.secondary{
      border-color:#d5e0eb;
      color:#47627e;
      font-weight:600;
    }
    @media (max-width:640px){
      .step-title{margin-bottom:24px;font-size:25px;}
      .section-title{margin-top:28px;}
    }
    .submission-modal[hidden]{display:none;}
    .submission-modal{
      position:fixed;
      z-index:100;
      inset:0;
      display:grid;
      place-items:center;
      padding:20px;
      background:rgba(12,30,57,.56);
    }
    .submission-modal-card{
      width:min(100%,560px);
      padding:34px;
      border-radius:16px;
      background:#fff;
      box-shadow:0 24px 60px rgba(8,26,52,.28);
      text-align:center;
    }
    .submission-modal-icon{
      display:grid;
      width:48px;
      height:48px;
      margin:0 auto 16px;
      place-items:center;
      border-radius:50%;
      background:#177a58;
      color:#fff;
      font-size:25px;
      font-weight:800;
    }
    .submission-modal-card h2{margin:0 0 12px;color:#14396f;font-size:24px;}
    .submission-modal-card p{margin:8px 0;color:#38516f;line-height:1.55;}
    .submission-modal-help{font-size:14px;}
    .submission-modal-actions{
      display:flex;
      flex-direction:column;
      flex-wrap:wrap;
      justify-content:center;
      gap:10px;
      margin-top:24px;
    }
    .submission-modal-actions .btn{
      align-self:center;
      min-height:48px;
      padding-inline:24px;
    }
    .submission-modal-links{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:8px;
      color:#91a0b1;
      font-size:13px;
    }
    .submission-modal-links a{
      color:#5d7794;
      text-decoration:underline;
      text-decoration-color:#c8d4e0;
      text-underline-offset:3px;
    }
    .submission-modal-links a:hover{color:#1269cf;}
    @media (max-width:640px){
      .actions.is-final{display:flex;}
      .actions.is-final .right{width:100%;flex-wrap:wrap;}
      .actions.is-final .right .btn{flex:1 1 100%;}
      .summary-comment{grid-template-columns:1fr;gap:4px;}
      .summary-details summary{padding:15px;align-items:flex-start;}
      .summary-details summary small{max-width:230px;}
      .summary-content{padding:0 14px 14px;}
      .submission-modal-card{padding:28px 20px;}
      .submission-modal-actions .btn{width:100%;}
      .support-card{grid-template-columns:1fr;padding:20px;}
      .support-card > .btn{width:100%;}
      .support-form-grid{grid-template-columns:1fr;}
      .support-form-actions .btn{width:100%;}
      .support-quick-link{margin-left:0;}
    }

    /* Composants plus structurés : l'arrondi accompagne la lecture, sans
       transformer chaque élément en pastille. */
    .btn{
      min-height:44px;
      border-radius:7px;
      padding:9px 18px;
      font-weight:650;
    }
    .btn.primary{
      background:#1e6fb8;
      border-color:#1e6fb8;
      box-shadow:none;
    }
    .btn.primary:hover{
      background:#165a96;
      border-color:#165a96;
      box-shadow:none;
      transform:translateY(-1px);
    }
    .btn.primary::after{display:none;}
    .btn.secondary{
      border-color:#d4dfe9;
      background:#fff;
      color:#4b6681;
    }
    .control,.option{border-radius:8px;}
    .main-card{border-radius:14px;}
    .summary,.summary-details,.support-card{border-radius:12px;}
    .submission-modal-card{border-radius:14px;}
    .actions.is-final .btn,.submission-modal-actions .btn{min-height:44px;}