:root{
    --bg:#EAF1FA;--bg-2:#F6FAFE;--surface:#FFFFFF;--surface-2:#F1F6FC;
    --line:#D7E2F1;--line-soft:#E7EEF7;--navy:#15336C;--navy-deep:#0C2148;--ink:#16294A;
    --blue:#1E78C2;--blue-soft:rgba(30,120,194,.12);--sky:#5FB7E8;--red:#E1251B;--red-soft:rgba(225,37,27,.10);
    --text:#16294A;--muted:#5C6E8C;--muted-2:#8A99B3;--muted-3:#97A4BA;
    --radius:18px;--radius-sm:14px;--shadow:0 14px 34px -22px rgba(20,50,110,.32);--shadow-sm:0 6px 16px -10px rgba(20,50,110,.26);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:radial-gradient(900px 500px at 85% -10%,rgba(95,183,232,.20),transparent 60%),radial-gradient(700px 460px at 5% 0%,rgba(30,120,194,.10),transparent 55%),var(--bg);color:var(--text);font-family:'Nunito',system-ui,sans-serif;line-height:1.5;min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1000px;margin:0 auto;padding:0 22px}
  header{position:sticky;top:0;z-index:40;backdrop-filter:blur(12px);background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.7));border-bottom:1px solid var(--line-soft)}
  .bar{display:flex;align-items:center;justify-content:space-between;height:70px;gap:12px}
  .brand{display:flex;align-items:center;gap:9px;font-family:'Fredoka';font-weight:600;font-size:23px;letter-spacing:-.01em;white-space:nowrap;color:var(--navy-deep);cursor:pointer}
  .wm{white-space:nowrap}.brand b{color:var(--red);font-weight:600}
  .brandbig{font-family:'Fredoka';font-weight:600;font-size:31px;letter-spacing:-.01em;color:var(--navy-deep)}.brandbig b{color:var(--red);font-weight:600}
  .tagline{font-family:'Fredoka';font-weight:500;font-size:14.5px;color:var(--muted);margin-top:2px}
  .vcode{font-family:'Fredoka';font-weight:700;font-size:27px;letter-spacing:4px;color:var(--navy-deep);background:var(--surface-2);border:1px solid #C9D6EA;border-radius:12px;padding:15px;margin:4px 0 18px;cursor:pointer;user-select:all;transition:.15s}
  .vcode:hover{border-color:var(--blue)}
  .bell{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:50%;width:40px;height:40px;font-size:18px;cursor:pointer;box-shadow:var(--shadow-sm);transition:.15s;line-height:1}
  .bell:hover{border-color:var(--blue);transform:translateY(-1px)}
  .bell-badge{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-family:'Fredoka';font-weight:700;font-size:11px;min-width:18px;height:18px;border-radius:99px;display:grid;place-items:center;padding:0 4px;border:2px solid var(--bg)}
  .note-item{text-align:left;border:1px solid var(--line);border-left:3px solid var(--red);border-radius:11px;padding:12px 14px;margin-bottom:10px;background:var(--surface-2)}
  .note-item .nt{font-family:'Fredoka';font-weight:600;color:var(--navy);font-size:14.5px}
  .note-item .nd{font-size:12px;color:var(--muted-2);font-weight:700;margin-top:2px}
  .note-item .nr{font-size:13.5px;color:var(--ink);font-weight:600;margin-top:6px}
  .emblem{width:48px;height:48px;display:block;flex:none;filter:drop-shadow(0 4px 8px rgba(12,33,98,.35))}
  .chip{display:none;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:4px 6px 4px 12px;font-size:14px;font-weight:700;box-shadow:var(--shadow-sm)}
  .chip .av{width:25px;height:25px;border-radius:50%;background:radial-gradient(circle at 32% 28%,var(--sky),var(--blue) 55%,var(--navy-deep));display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff}
  .chip button{background:none;border:0;color:var(--muted-2);cursor:pointer;font-size:17px;line-height:1;padding:2px 4px}.chip button:hover{color:var(--red)}
  section.view{padding:22px 0 40px;animation:fade .4s ease}
  section.view.vcenter{flex:1 0 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:14px;padding-bottom:14px}
  section.view.vcenter .wrap{width:100%}
  @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes goldShine{0%{background-position:0% 50%}100%{background-position:300% 50%}}
  .eyebrow{font-family:'Fredoka';font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:600}
  h1{font-family:'Fredoka';font-weight:600;letter-spacing:-.01em;font-size:clamp(30px,5.2vw,48px);line-height:1.04;margin:14px 0;color:var(--navy-deep)}
  h2{font-family:'Fredoka';font-weight:600;font-size:23px;color:var(--navy-deep)}
  .lead{color:var(--muted);font-size:16.5px;max-width:52ch;font-weight:600}
  .mono{font-variant-numeric:tabular-nums;font-weight:800}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
  .field{margin-bottom:15px}
  label.flbl{display:block;font-size:13.5px;font-weight:700;color:var(--navy);margin-bottom:7px}
  input,select{width:100%;font-family:'Nunito';font-size:16px;font-weight:600;color:var(--ink);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 13px;transition:.16s;outline:none}
  button,.btn,input,select,textarea,a,.clip,.lbrow,.vcode,[onclick]{touch-action:manipulation}
  input::placeholder{color:var(--muted-2);font-weight:600}
  input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft);background:#fff}
  .toggle2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .toggle2 button{font-family:'Fredoka';font-weight:500;font-size:14.5px;color:var(--muted);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px;cursor:pointer;transition:.16s}
  .toggle2 button.on{color:var(--navy);border-color:var(--blue);background:var(--blue-soft)}
  .btn{font-family:'Fredoka';font-weight:600;font-size:15.5px;border:0;border-radius:14px;padding:13px 18px;cursor:pointer;transition:.18s;display:inline-flex;align-items:center;gap:9px;justify-content:center}
  .btn.primary{background:var(--navy-deep);color:#fff;width:100%;box-shadow:0 12px 24px -14px rgba(12,33,98,.55)}
  .btn.primary:hover{background:var(--navy);transform:translateY(-1px)}
  .btn.primary:active{transform:scale(.99)}
  .btn.blue{background:var(--blue);color:#fff;box-shadow:0 10px 20px -12px rgba(30,120,194,.5)}
  .btn.blue:hover{background:#1769ac;transform:translateY(-1px)}
  .btn.ghost{background:var(--surface);color:var(--navy);border:1px solid var(--line)}.btn.ghost:hover{border-color:var(--navy-deep);color:var(--navy-deep)}
  .btn.sm{padding:8px 13px;font-size:13.5px}
  .btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none}
  .hint{font-size:13px;color:var(--muted-2);margin-top:6px;font-weight:600}
  .bigcard{background:linear-gradient(140deg,var(--navy),var(--navy-deep));color:#fff;border:0;box-shadow:var(--shadow);position:relative;overflow:hidden}
  .bigcard::after{content:"";position:absolute;right:-30px;top:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(95,183,232,.35),transparent 70%)}
  .bigcard .lbl{font-family:'Fredoka';font-weight:500;color:#A9C4E6;font-size:14px;text-transform:capitalize}
  .bigcard .amt{font-family:'Fredoka';font-weight:600;font-size:clamp(40px,9vw,56px);line-height:1;margin:6px 0}
  .bigcard .sub{display:flex;gap:22px;flex-wrap:wrap;margin-top:8px;font-weight:700;font-size:14px;color:#CFE0F2}.bigcard .sub b{color:#fff}
  .stbadge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;font-family:'Fredoka';font-weight:600;font-size:13px;margin-top:14px}
  .stbadge.due{background:rgba(225,37,27,.22);color:#FFC2BE}.stbadge.ok{background:rgba(95,183,232,.25);color:#DCEEFB}
  .clip{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:15px 17px;margin-bottom:11px;box-shadow:var(--shadow-sm);display:flex;gap:14px;align-items:center}
  .clip .th{width:52px;height:52px;border-radius:11px;flex:none;display:grid;place-items:center;font-size:22px;color:#fff}
  .clip .body{flex:1;min-width:0}
  .clip .ti{font-family:'Fredoka';font-weight:500;color:var(--navy);font-size:15.5px}
  .clip .lk{color:var(--muted);font-size:12.5px;text-decoration:none;font-weight:600;flex:1;min-width:0;overflow-wrap:break-word}.clip .lk:hover{color:var(--blue)}
  .clip-status{font-size:11px;color:var(--muted-2);font-weight:600;margin-top:4px}
  .clip-status.warn{color:#B7500A}
  .btn-del{background:none;border:1px solid var(--line-soft);padding:1px 7px;cursor:pointer;color:var(--muted-2);font-size:12.5px;font-weight:600;font-family:'Nunito';line-height:1.4;border-radius:5px;transition:.15s;flex:none;margin-left:6px}.btn-del:hover{color:var(--red);border-color:rgba(225,37,27,.35);background:var(--red-soft)}
  .clip .nums{text-align:right;flex:none}
  .clip .nums .v{font-family:'Fredoka';font-weight:600;color:var(--navy);font-size:16px}
  .clip .nums .k{font-size:11.5px;color:var(--muted-2);font-weight:700}
  /* --- clip d'un mois clôturé : figé, non gainifiable --- */
  .clip-closed{background:var(--surface-2);border:1px dashed var(--line)}
  .clip-closed .th{filter:grayscale(.25)}
  .closed-tag{display:inline-block;font-family:'Fredoka';font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);background:var(--line-soft);padding:2px 9px;border-radius:99px;white-space:nowrap;vertical-align:middle}
  .closed-gain{display:inline-flex;flex-direction:column;align-items:center;gap:0;font-family:'Fredoka';font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted-2);background:var(--blue-soft);border:1px solid rgba(30,120,194,.20);border-radius:10px;padding:6px 11px;text-align:center}
  .closed-gain b{font-size:16px;color:var(--navy);letter-spacing:0;text-transform:none;line-height:1.2}
  .clip-closed .nums{display:flex;align-items:center;gap:12px}
  .clip-closed .nums .vt{text-align:right}
  /* --- gains en cours sur un clip du mois actif --- */
  .live-gain{display:inline-flex;flex-direction:column;align-items:center;gap:0;font-family:'Fredoka';font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#1A6B3A;background:rgba(21,160,95,.10);border:1px solid rgba(21,160,95,.24);border-radius:10px;padding:6px 11px;text-align:center}
  .live-gain b{font-size:16px;color:var(--navy);letter-spacing:0;text-transform:none;line-height:1.2}
  .clip .nums.live{display:flex;align-items:center;gap:12px}
  .clip .nums.live .vt{text-align:right}
  @media(max-width:640px){ .closed-gain b,.live-gain b{font-size:14px} .closed-tag{font-size:10px} .clip-closed .nums,.clip .nums.live{gap:8px} }
  .month-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:13px;margin-bottom:10px;background:var(--surface);flex-wrap:wrap;box-shadow:var(--shadow-sm)}
  .month-row .ml{font-family:'Fredoka';font-weight:600;color:var(--navy);font-size:15.5px;text-transform:capitalize}
  .month-row .mv{font-size:13px;color:var(--muted);font-weight:700}
  .month-row .mm{font-family:'Fredoka';font-weight:600;font-size:18px;color:var(--navy)}
  .pill{font-family:'Fredoka';font-size:12px;text-transform:uppercase;padding:4px 10px;border-radius:99px;font-weight:600;white-space:nowrap}
  .pill.due{background:var(--red-soft);color:var(--red)}.pill.ok{background:var(--blue-soft);color:var(--blue)}
  .pay-line{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);flex-wrap:wrap;font-weight:600}
  .pay-line .mono{color:var(--navy);background:var(--surface-2);border:1px solid var(--line);padding:4px 9px;border-radius:8px;font-size:13px}
  .copy{background:none;border:0;color:var(--blue);cursor:pointer;font-size:12.5px;font-weight:700;font-family:'Fredoka'}.copy:hover{text-decoration:underline}
  .empty{text-align:center;padding:40px 20px;color:var(--muted);font-weight:600}.empty .big-emo{font-size:34px;display:block;margin-bottom:10px}
  .welcome{background:linear-gradient(135deg,var(--blue-soft),rgba(95,183,232,.22));border:1px solid var(--blue);color:var(--navy);border-radius:var(--radius-sm);padding:13px 16px;margin-bottom:16px;font-weight:700;font-family:'Fredoka';display:flex;align-items:center;gap:8px;font-size:15px;animation:slidein .5s}
  .welcome b{color:var(--blue)}
  @keyframes slidein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .lbtoggle{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px}
  .lbtoggle button{font-family:'Fredoka';font-size:13px;font-weight:500;color:var(--muted);background:transparent;border:0;border-radius:7px;padding:6px 14px;cursor:pointer;transition:.15s}
  .lbtoggle button.on{background:var(--surface);color:var(--navy);box-shadow:var(--shadow-sm)}
  .lbrow{display:flex;align-items:center;gap:12px;padding:11px 15px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--surface);box-shadow:var(--shadow-sm)}
  .lbrow.me{border-color:var(--blue);background:linear-gradient(90deg,var(--blue-soft),transparent)}
  .lbrank{font-family:'Fredoka';font-weight:600;font-size:15px;color:var(--muted-2);width:30px;text-align:center;flex:none}
  .lbav{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff}
  .lbname{font-family:'Fredoka';font-weight:500;color:var(--navy);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lbval{font-family:'Fredoka';font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;font-size:14.5px}
  .clip .th{position:relative}
  .fire{position:absolute;top:-6px;left:-6px;font-size:16px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
  .note{font-size:13px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--red);border-radius:var(--radius-sm);padding:14px 16px;margin-top:20px;line-height:1.55;font-weight:600}.note b{color:var(--red)}
  .overlay{position:fixed;inset:0;background:rgba(12,33,72,.45);backdrop-filter:blur(5px);z-index:60;display:none;align-items:center;justify-content:center;padding:20px;animation:fade .2s}
  body.modal-open{overflow:hidden}
  .overlay.show{display:flex}
  .modal{background:var(--surface);border:1px solid var(--line);border-radius:22px;max-width:400px;width:100%;padding:28px;box-shadow:0 30px 70px -20px rgba(12,33,72,.5)}
  .modal.wide{max-width:580px}
  .modal h3{font-family:'Fredoka';font-weight:600;font-size:23px;color:var(--navy);margin-bottom:6px}
  .modal .sub{color:var(--muted);font-size:14px;margin-bottom:14px;font-weight:600}
  footer{border-top:1px solid var(--line-soft);padding:18px 0;text-align:center;margin-top:auto;flex:none}
  footer a{color:var(--muted-2);font-size:13px;text-decoration:none;font-weight:500;font-family:'Fredoka'}footer a:hover{color:var(--navy)}
  .toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy-deep);border:1px solid var(--navy-deep);color:#fff;padding:13px 20px;border-radius:13px;font-size:14.5px;font-weight:700;font-family:'Fredoka';box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.3s;z-index:80;max-width:90vw;text-align:center}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.toast.blue{background:var(--blue)}.toast.bad{background:var(--red)}
  #userSection{position:relative}
  .biohint{max-width:330px;margin:16px auto 0;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:13px 14px;text-align:left;box-shadow:var(--shadow-sm)}
  .biohint .bh-top{display:flex;align-items:center;gap:10px}
  .biohint .bh-av{width:34px;height:34px;border-radius:50%;flex:none;background:radial-gradient(circle at 32% 28%,var(--sky),var(--blue) 55%,var(--navy-deep))}
  .biohint .bh-name{font-family:'Fredoka';font-weight:600;color:var(--navy);font-size:14px}
  .biohint .bh-stats{font-size:11px;color:var(--muted-2);font-weight:700;margin-top:1px}
  .biohint .bh-bio{font-size:13px;color:var(--ink);font-weight:600;margin-top:9px;line-height:1.4}
  .biohint .bh-code{display:inline-block;background:#fff;border:1px dashed var(--blue);color:var(--navy);font-family:'Fredoka';font-weight:700;letter-spacing:1px;border-radius:7px;padding:1px 7px}
  .biohint .bh-cap{font-size:11.5px;color:var(--blue);font-weight:700;margin-top:9px}
  @media(max-width:560px){
    html,body{overflow-x:hidden}
    body{min-height:100svh}
    .wrap{padding:0 18px}
    .bar{height:54px;gap:8px}
    .emblem{width:36px;height:36px}
    .brand{font-size:17px;gap:6px}
    .bell{width:32px;height:32px;font-size:15px}
    .chip{font-size:12px;padding:3px 5px 3px 9px;gap:6px}
    .chip .av{width:20px;height:20px;font-size:10px}
    h1{font-size:clamp(23px,7vw,30px);margin:8px 0}
    h2{font-size:18.5px}
    .lead{font-size:14.5px}
    .card{padding:16px 15px}
    .bigcard{padding:18px 16px}
    .bigcard .amt{font-size:clamp(32px,11vw,42px)}
    .bigcard .sub{gap:12px;font-size:12.5px}
    .btn{padding:11px 14px;font-size:14.5px}
    .btn.sm{padding:7px 11px;font-size:12.5px}
    .clip{padding:11px 12px;gap:10px;margin-bottom:9px}
    .clip .th{width:42px;height:42px;font-size:17px;border-radius:10px}
    .clip .ti{font-size:13.5px}
    .clip .lk{font-size:11.5px}
    .clip .nums .v{font-size:14.5px}
    .clip .nums .k{font-size:11px}
    .month-row{padding:11px 13px}
    .month-row .ml{font-size:14px}
    .month-row .mm{font-size:16px}
    .lbrow{padding:9px 12px;gap:9px}
    .lbname{font-size:14px}
    .lbval{font-size:13.5px}
    .vcode{font-size:21px;letter-spacing:3px;padding:13px}
    .modal{padding:22px 18px}
    .modal h3{font-size:20px}
    .welcome{font-size:13.5px;padding:11px 14px}
    .note{font-size:12.5px;padding:12px 14px}
    /* dashboard */
    #dashboard h2{font-size:16px}
    .bigcard{padding:14px 15px}
    .bigcard .lbl{font-size:12px}
    .bigcard .amt{font-size:clamp(26px,9vw,36px)}
    .bigcard .sub{font-size:12px;gap:10px}
    .stbadge{font-size:11.5px;padding:4px 10px;margin-top:10px}
    .clip{padding:9px 10px;gap:8px;margin-bottom:8px}
    .clip .th{width:36px;height:36px;font-size:15px;border-radius:9px}
    .clip .ti{font-size:12.5px}
    .clip .lk{font-size:11px}
    .btn-del{font-size:11px;padding:1px 6px}
    .clip .nums .v{font-size:13px}
    .clip .nums .k{font-size:10.5px}
    /* sous 560px, badge de gains + vues cote a cote laissaient trop peu de
       place au titre/lien du clip (texte coupe lettre par lettre) : on les
       empile verticalement pour rendre la largeur au corps du clip */
    .clip-closed .nums,.clip .nums.live{flex-direction:column;align-items:flex-end;gap:4px}
    .clip-closed .nums .vt,.clip .nums.live .vt{text-align:right}
    .month-row{padding:9px 11px}
    .month-row .ml{font-size:13px}
    .month-row .mv{font-size:11.5px}
    .month-row .mm{font-size:15px}
    .pill{font-size:11px;padding:3px 8px}
    .lbtoggle button{font-size:12px;padding:5px 10px}
    .lbrow{padding:8px 10px;gap:7px}
    .lbrank{font-size:13px;width:24px}
    .lbav{width:25px;height:25px;font-size:10px}
    .lbname{font-size:13px}
    .lbval{font-size:13px}
    .empty{padding:28px 14px}
    .empty .big-emo{font-size:28px}
    .welcome{font-size:12.5px;padding:9px 12px;gap:6px}
    /* carte niveau / barre XP */
    .lvlcard{padding:14px 15px!important}
    .lvlcard-title{font-size:17px}
    .lvlcard-maxbadge{font-size:10.5px;padding:2px 8px}
    .lvlcard-remaining{font-size:11px}
    .lvlcard-bar-bg{height:11px}
    .lvlcard-views{font-size:12px}
    .lvlcard-link{font-size:12px!important}
    /* modale récompenses : tout compacter pour tenir sans scroll */
    #rewardsModal .modal{padding:16px 14px}
    #rewardsModal h3{font-size:16.5px;margin-bottom:2px}
    #rewardsModal p{font-size:11.5px!important;margin-bottom:8px!important;line-height:1.25}
    .rwd-card{padding:6px 9px;gap:8px;margin-bottom:4px}
    .rwd-icon{width:26px;height:26px;font-size:12px}
    .rwd-title{font-size:11.5px}
    .rwd-sub{display:none}
    .rwd-progress{font-size:9.5px;margin-top:0}
    .rwd-label{font-size:10.5px}
    .rwd-amount{font-size:13px}
    #rewardsTimeline{max-height:none!important;overflow:visible!important}
    #rewardsModal .btn.primary{padding:9px 14px;font-size:13px;margin-top:8px!important}
    /* page de connexion : tout faire tenir sans scroll */
    section.view.vcenter{flex:0 0 auto;margin-top:auto;justify-content:flex-start;padding-top:10px;padding-bottom:0}
    section.view.vcenter ~ footer{margin-top:30px;margin-bottom:auto}
    footer{font-size:14.5px}
    footer a{font-size:13.5px;font-weight:400}
  }
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
  img.emblem{object-fit:contain;filter:none}

  /* ===== Nouvelle interface de connexion (scopée a #connectGate) ===== */
  #connectGate{max-width:520px;margin:0 auto}
  #connectGate .pe-gate{display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:11px;min-height:calc(100dvh - 130px);justify-content:center;padding:6px 0 14px}
  #connectGate .pe-logo{width:74px;height:74px;display:block;filter:drop-shadow(0 8px 14px rgba(12,33,72,.20))}
  #connectGate .pe-brand{font-family:'Fredoka',sans-serif;font-weight:600;font-size:26px;letter-spacing:-.01em;color:var(--navy-deep);line-height:1.05}
  #connectGate .pe-brand b{color:var(--red);font-weight:600}
  #connectGate .pe-tag{color:var(--muted-3);font-size:13px;font-weight:600;margin-top:-4px}
  #connectGate .pe-h1{font-family:'Fredoka',sans-serif;font-weight:600;letter-spacing:-.01em;line-height:1.05;
    font-size:clamp(27px,7vw,40px);color:var(--navy-deep);margin-top:3px}
  #connectGate .pe-sub{color:var(--muted);font-size:clamp(13px,3.4vw,16px);font-weight:600;max-width:38ch;line-height:1.38}
  #connectGate .pe-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;max-width:400px;
    min-height:50px;border:0;border-radius:14px;color:#fff;font-family:'Fredoka',sans-serif;font-weight:600;
    font-size:16px;letter-spacing:-.01em;background:var(--navy-deep);cursor:pointer;transition:transform .12s,background .12s;margin-top:2px}
  #connectGate .pe-btn svg{width:20px;height:20px}
  #connectGate .pe-btn:hover{background:var(--navy)}
  #connectGate .pe-btn:active{transform:scale(.985)}
  #connectGate .pe-rate{font-size:12px;color:var(--muted);font-weight:600;margin-top:-2px}
  #connectGate .pe-rate b{color:var(--navy-deep);font-weight:800;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  #connectGate .pe-meter{width:100%;max-width:400px;background:#F3F6FB;border:1px solid #E2E9F3;border-radius:18px;padding:11px 14px 12px;text-align:left}
  #connectGate .pe-meter-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
  #connectGate .pe-views{display:flex;align-items:center;gap:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:13px;color:var(--navy-deep);font-variant-numeric:tabular-nums}
  #connectGate .pe-views svg{width:15px;height:15px;color:var(--muted)}
  #connectGate .pe-eur{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:21px;line-height:1;color:var(--navy-deep);font-variant-numeric:tabular-nums}
  #connectGate .pe-gauge{margin-top:10px;height:7px;border-radius:99px;background:#E1E9F4;overflow:hidden}
  #connectGate .pe-gauge i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--navy),var(--navy-deep));transition:width .3s linear}
  #connectGate .pe-flow{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:nowrap;width:100%;max-width:400px}
  #connectGate .pe-p{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;background:#fff;border:1px solid #E2E9F3;border-radius:99px;padding:6px 8px;font-weight:700;font-size:clamp(10px,2.8vw,12.5px);color:var(--navy-deep)}
  #connectGate .pe-p .pe-e{font-size:1.05em;line-height:1}
  #connectGate .pe-sep{color:var(--muted-3);font-weight:800;font-size:11px;flex:none}
  @media(min-width:760px){
    #connectGate{max-width:560px}
    #connectGate .pe-gate{gap:16px;min-height:calc(100dvh - 160px)}
    #connectGate .pe-logo{width:92px;height:92px}
    #connectGate .pe-brand{font-size:32px}
    #connectGate .pe-tag{font-size:14px}
    #connectGate .pe-h1{font-size:clamp(40px,4.4vw,52px)}
    #connectGate .pe-sub{font-size:17px}
    #connectGate .pe-btn{min-height:56px;font-size:17px;border-radius:16px}
    #connectGate .pe-eur{font-size:23px}
  }
  @media(prefers-reduced-motion:reduce){#connectGate .pe-gauge i{transition:none}}

  /* ===== Refonte pages d'étape (wizard) ===== */
  #verifyGate,#setPassGate,#payGate{text-align:left}
  .wz{max-width:480px;margin:0 auto;width:100%}
  .wz-back{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);color:var(--muted);font-family:'Fredoka';font-weight:500;font-size:13px;padding:7px 13px;border-radius:99px;cursor:pointer;transition:.15s;margin-bottom:16px}
  .wz-back:hover{border-color:var(--navy-deep);color:var(--navy-deep);transform:translateX(-2px)}
  .wz-stepper{text-align:center;margin-bottom:20px}
  .wz-track{display:inline-flex;align-items:center;gap:0}
  .wz-d{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:'Fredoka';font-weight:600;font-size:12.5px;background:#E6EDF7;color:var(--muted-3);flex:none;transition:.2s}
  .wz-d.done{background:var(--navy-deep);color:#fff}
  .wz-d.cur{background:#fff;color:var(--navy-deep);box-shadow:0 0 0 2px var(--navy-deep),0 0 0 6px rgba(12,33,72,.12)}
  .wz-l{width:34px;height:2px;background:#E6EDF7;border-radius:2px}
  .wz-l.done{background:var(--navy-deep)}
  .wz-cap{font-family:'Fredoka';font-weight:600;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2);margin-top:9px}
  .wz-head{margin-bottom:16px}
  .wz-ey{font-family:'Fredoka';font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
  .wz-title{font-family:'Fredoka';font-weight:600;font-size:clamp(22px,5.5vw,28px);line-height:1.1;color:var(--navy-deep);margin:7px 0}
  .wz-sub{color:var(--muted);font-size:14.5px;font-weight:600;line-height:1.45}
  .wz-sub b{color:var(--navy-deep)}
  .wz-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow)}
  .wz-mini{font-family:'Fredoka';font-weight:600;font-size:12.5px;color:var(--navy-deep);margin:0 0 8px;display:flex;align-items:center;gap:8px}
  .wz-mini:not(:first-child){margin-top:16px}
  .wz-mini .s{width:19px;height:19px;border-radius:50%;background:var(--navy-deep);color:#fff;display:grid;place-items:center;font-size:11px;flex:none}

  /* ===== Refonte dashboard ===== */
  .db-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
  .db-bar-actions{display:flex;align-items:center;gap:10px}
  .db-greet{margin-bottom:16px}
  .db-hero{margin-bottom:24px}
  .db-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;position:relative;z-index:1}
  .db-cta{font-family:'Fredoka';font-weight:600;font-size:14.5px;border:0;border-radius:12px;padding:12px 16px;cursor:pointer;background:#fff;color:var(--navy-deep);transition:.15s;flex:1;min-width:155px}
  .db-cta:hover{transform:translateY(-1px);filter:brightness(.97)}
  .db-cta.ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.42)}
  .db-cta.ghost:hover{background:rgba(255,255,255,.2);filter:none}
  .lvlcard-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;flex-wrap:wrap;gap:6px}
  .lvlcard-title{font-family:'Fredoka';font-weight:700;font-size:20px;color:var(--navy)}
  .lvlcard-maxbadge{font-family:'Fredoka';font-weight:700;font-size:12px;color:#fff;background:linear-gradient(135deg,#F5A623,var(--red));padding:3px 10px;border-radius:99px}
  .lvlcard-remaining{font-size:12.5px;color:var(--muted);font-weight:700}
  .lvlcard-bar-bg{background:var(--surface-2);border:1px solid var(--line);border-radius:99px;height:14px;overflow:hidden}
  .lvlcard-bar-fill{height:100%;border-radius:99px;transition:width .6s ease}
  .lvlcard-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px}
  .lvlcard-views{font-size:11.5px;color:var(--muted-2);font-weight:700}
  .lvlcard-link{background:none;border:0;color:var(--blue);font-family:'Fredoka';font-weight:500;font-size:12.5px;cursor:pointer;padding:0}
  .rwd-card{display:flex;align-items:center;gap:14px;padding:11px 16px;border-radius:13px;margin-bottom:7px}
  .rwd-icon{width:42px;height:42px;flex:none;display:grid;place-items:center;font-size:18px}
  .rwd-icon-img{width:70%;height:70%;object-fit:contain}
  .rwd-title{font-family:'Fredoka';font-weight:700;font-size:15.5px}
  .rwd-sub{font-weight:600;font-size:12.5px}
  .rwd-progress{font-size:12.5px;font-weight:700;margin-top:2px}
  .rwd-label{font-family:'Fredoka';font-weight:700;font-size:15.5px}
  .rwd-amount{font-family:'Fredoka';font-weight:700;font-size:19px}
  .db-sec-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
  .db-pay{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);flex-wrap:wrap;font-weight:600;margin-top:26px;padding-top:16px;border-top:1px solid var(--line-soft)}
  .db-pay .db-pay-method{text-transform:uppercase;font-family:'Fredoka';font-weight:600;font-size:11.5px;color:var(--navy-deep)}
  .db-pay .mono{color:var(--navy-deep);background:var(--surface-2);border:1px solid var(--line);padding:4px 9px;border-radius:8px;font-size:13px}
  @media(max-width:560px){
    .db-cta{min-width:0;font-size:13.5px;padding:11px 12px}
    .wz-card{padding:16px 15px}
    .wz-l{width:22px}
  }


  /* case du code + bouton copier (même style que la case du code) — page vérification */
  .wz-coderow{display:flex;align-items:stretch;gap:10px;margin:4px 0 18px}
  .wz-coderow .vcode{margin:0;flex:1;display:flex;align-items:center;justify-content:center;text-align:center}
  .wz-copy{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--surface-2);color:var(--navy-deep);border:1px solid #C9D6EA;border-radius:12px;padding:0 16px;font-family:'Fredoka';font-weight:600;font-size:14px;cursor:pointer;transition:.15s;white-space:nowrap}
  .wz-copy:hover{border-color:var(--navy-deep);background:#fff}
  .wz-copy:active{transform:scale(.97)}
  @media(max-width:420px){.wz-coderow{flex-direction:column}.wz-copy{padding:12px 16px}}