@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/outfit-variable.woff2') format('woff2');
}

:root{
    --ink:#011627;
    --surface:#082036;
    --surface-2:#0F2E4A;
    --surface-3:#163C5C;
    --line:#1E4364;
    --line-soft:#122F4A;
    --choke-line:#2B4A6B;
    --text:#EAF2FB;
    --text-dim:#93A9C2;
    --text-faint:#57708A;
    --accent:#FFAC00;
    --accent-deep:#D98F00;
    --accent-ink:#2A1800;
    --accent-2:#0051A2;
    --accent-2-bright:#4C8FE0;
    --good:#FFAC00;
    --good-ink:#2A1800;
    --warn:#D98F00;
    --bad:#5A7189;
    --bad-ink:#1B2C3F;
    --muted-square:#1B2C3F;
    --danger:#E5484D;
    --danger-ink:#2A0006;

    --font-display:'Outfit',-apple-system,'Segoe UI Semibold','Segoe UI','Helvetica Neue',Arial,sans-serif;
    --font-body:'Outfit',-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    --font-mono:'Outfit',ui-monospace,'SF Mono','Cascadia Mono','Roboto Mono',Consolas,monospace;

    --radius-lg:20px;
    --radius-md:14px;
    --radius-sm:9px;
  }

  *,*::before,*::after{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--ink);
    color:var(--text);
    font-family:var(--font-body);
    min-height:100dvh;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3{font-family:var(--font-display);text-wrap:balance;margin:0;}
  button{font-family:inherit;}
  ::selection{background:var(--accent);color:var(--accent-ink);}

  :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;}

  .stage{
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:32px 16px;
    background:
      radial-gradient(560px 420px at 20% 8%, rgba(0,81,162,0.16), transparent 60%),
      radial-gradient(520px 380px at 85% 92%, rgba(255,172,0,0.12), transparent 60%),
      var(--ink);
  }

  .phone{
    width:100%;
    max-width:412px;
    height:min(860px, 100dvh - 0px);
    background:var(--surface);
    border-radius:var(--radius-lg);
    border:1px solid var(--line);
    box-shadow:0 40px 80px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.02) inset;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    position:relative;
  }

  @media (max-width:640px){
    .stage{padding:0;height:100dvh;min-height:0;gap:0;overflow:hidden;}
    .phone{
      max-width:none;
      width:100%;
      height:auto;
      flex:1 1 auto;
      min-height:0;
      border-radius:0;
      border:none;
      box-shadow:none;
    }
    .site-footer{flex:none;}
  }

  .screen{
    display:none;
    flex-direction:column;
    height:100%;
    min-height:0;
  }
  .screen.is-active{display:flex;}

  /* ---------- shared bits ---------- */
  .eyebrow{
    font-family:var(--font-display);
    font-size:11.5px;
    font-weight:700;
    letter-spacing:0.11em;
    text-transform:uppercase;
    color:var(--text-faint);
  }
  .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

  .btn{
    appearance:none;
    border:none;
    cursor:pointer;
    border-radius:var(--radius-md);
    font-family:var(--font-display);
    font-weight:800;
    font-size:15.5px;
    letter-spacing:0.01em;
    padding:15px 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:50px;
    transition:transform .12s ease, filter .12s ease, opacity .12s ease;
  }
  @media (prefers-reduced-motion:reduce){ .btn{transition:none;} }
  .btn:active{transform:scale(0.98);}
  .btn-primary{background:var(--accent);color:#fff;text-transform:uppercase;letter-spacing:.04em;}
  .btn-primary:hover{filter:brightness(1.06);}
  #btn-validate{font-size:17.5px;}
  .btn-primary:disabled{background:var(--surface-3);color:var(--text-faint);cursor:not-allowed;}
  .btn-primary:disabled:active{transform:none;}
  .btn-ghost{
    background:transparent;color:var(--text-dim);border:1px solid var(--line);
    font-weight:700;font-size:14px;min-height:44px;padding:10px 16px;
  }
  .btn-ghost:hover{color:var(--text);border-color:var(--text-faint);}
  .btn-text{
    appearance:none;border:none;cursor:pointer;
    background:transparent;color:var(--text-faint);font-weight:600;font-size:13.5px;
    min-height:36px;padding:6px 10px;text-decoration:underline;text-decoration-color:transparent;
  }
  .btn-text:hover{color:var(--text-dim);text-decoration-color:var(--text-faint);}

  .chip{
    font-family:var(--font-display);
    font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    padding:4px 9px;border-radius:100px;border:1px solid transparent;display:inline-flex;align-items:center;gap:4px;
  }
  .chip-easy{background:rgba(34,197,94,0.14);color:#22C55E;border-color:rgba(34,197,94,0.32);}
  .chip-medium{background:rgba(250,204,21,0.16);color:#FACC15;border-color:rgba(250,204,21,0.34);}
  .chip-hard{background:rgba(229,72,77,0.16);color:var(--danger);border-color:rgba(229,72,77,0.34);}

  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }

  /* ---------- HOME ---------- */
  #screen-home{padding:28px 24px 24px;justify-content:flex-start;gap:clamp(24px,6dvh,56px);}
  .home-top{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
  .home-logo{display:flex;flex-direction:column;align-items:center;}
  .home-logo .home-wordmark{
    width:100%;max-width:158px;height:auto;display:block;
    filter:drop-shadow(0 6px 18px rgba(255,172,0,0.22));
  }
  .home-date{color:var(--text-dim);font-size:13.5px;margin-top:2px;}

  .home-mid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding:18px 0;}
  .home-mid .big-number{
    font-family:var(--font-mono);font-weight:600;font-size:64px;line-height:1;color:var(--accent);
    text-shadow:0 0 28px rgba(255,172,0,0.35);
  }
  .home-mid .big-caption{font-size:15px;color:var(--text-dim);max-width:26ch;}
  .home-mid .rules-summary{
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin-top:4px;
  }
  .rule-tile{
    background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
    padding:11px 8px;text-align:center;
  }
  .rule-tile .n{font-family:var(--font-mono);font-size:18px;font-weight:600;color:var(--text);display:block;}
  .rule-tile .label{font-size:10.5px;color:var(--text-faint);letter-spacing:.03em;}

  .home-bottom{display:flex;flex-direction:column;gap:22px;flex:1;min-height:0;}
  .home-links{display:flex;justify-content:center;gap:10px;margin-top:auto;}
  .home-link-btn{
    flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
    background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
    min-height:44px;padding:10px 14px;
    font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--text-dim);
    text-decoration:none;transition:border-color .12s ease, color .12s ease;
  }
  .home-link-btn:hover{border-color:var(--accent-2-bright);color:var(--text);}
  .home-link-btn:active{transform:scale(0.98);}

  /* ---------- GAME ---------- */
  #screen-game{min-height:0;}
  .progress-track{display:flex;gap:5px;padding:14px 20px 0;}
  .progress-seg{flex:1;height:4px;border-radius:3px;background:var(--line);overflow:hidden;position:relative;}
  .progress-seg > i{display:block;height:100%;width:0;background:var(--text-faint);transition:width .25s ease, background .25s ease;}
  .progress-seg.current > i{width:100%;background:var(--accent);}
  .progress-seg.success > i{width:100%;background:var(--good);}
  .progress-seg.fail > i{width:100%;background:var(--bad);}

  .game-head{padding:14px 20px 12px;display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--line-soft);}
  .game-head-row{display:flex;justify-content:space-between;align-items:baseline;}
  .game-head-row .who{display:flex;align-items:center;gap:8px;}
  .game-head-row .who h2{font-size:16.5px;color:var(--text);}
  .game-head-row .score{font-size:12px;color:var(--text-dim);text-align:right;}
  .game-head-row .score b{display:block;font-family:var(--font-mono);font-size:17px;color:var(--text);font-weight:600;}

  .points-row{display:flex;align-items:center;justify-content:space-between;}
  .points-avail{display:flex;flex-direction:column;}
  .points-avail .val{font-family:var(--font-mono);font-size:30px;font-weight:600;color:var(--accent);line-height:1;
    text-shadow:0 0 20px rgba(255,172,0,0.28);}
  .points-avail .lbl{font-size:11px;color:var(--text-faint);letter-spacing:.03em;margin-top:3px;}

  .attempts{display:flex;flex-direction:column;align-items:flex-end;gap:5px;}
  .attempts .dots{display:flex;gap:6px;}
  .attempts .dot{width:15px;height:15px;border-radius:50%;border:1.6px solid var(--text-faint);position:relative;}
  .attempts .dot.on{background:var(--accent);border-color:var(--accent);}
  .attempts .dot.used{border-color:var(--bad);}
  .attempts .dot.used::before,.attempts .dot.used::after{
    content:"";position:absolute;top:50%;left:50%;width:9px;height:1.6px;background:var(--bad);
  }
  .attempts .dot.used::before{transform:translate(-50%,-50%) rotate(45deg);}
  .attempts .dot.used::after{transform:translate(-50%,-50%) rotate(-45deg);}
  .attempts .txt{font-size:11px;color:var(--text-faint);}

  .clue-scroll{flex:1;min-height:0;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:10px;}
  .clue-card{
    background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-md);
    padding:13px 15px;animation:clue-in .28s ease both;
  }
  @media (prefers-reduced-motion:reduce){ .clue-card{animation:none;} }
  @keyframes clue-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
  .clue-card .lbl{font-family:var(--font-display);font-size:10.5px;font-weight:800;letter-spacing:.08em;
    text-transform:uppercase;color:var(--accent-2-bright);margin-bottom:4px;}
  .clue-card .val{font-size:16px;color:var(--text);font-weight:500;}
  .clue-card:first-child .val{font-size:17px;}
  .clue-card.is-locked{background:transparent;border:1px dashed var(--line);animation:none;}
  .clue-card.is-locked .lbl{color:var(--text-faint);}
  .clue-card.is-locked .val{color:var(--text-faint);font-weight:400;font-size:14px;}
  .clue-card.is-locked.is-next{
    border-style:solid;border-color:rgba(255,172,0,0.35);background:rgba(255,172,0,0.06);
    cursor:pointer;transition:background .12s ease, border-color .12s ease;
  }
  .clue-card.is-locked.is-next:hover,.clue-card.is-locked.is-next:focus-visible{
    background:rgba(255,172,0,0.12);border-color:rgba(255,172,0,0.55);
  }
  .clue-card.is-locked.is-next .lbl{color:var(--text-faint);}
  .clue-card.is-locked.is-next .val{color:var(--accent);font-weight:600;font-size:15px;
    display:flex;align-items:center;gap:6px;}
  .clue-card.is-locked.is-next .val .cost{font-size:12px;color:var(--accent);opacity:.85;}

  .feedback-line{
    min-height:20px;padding:0 20px;font-size:12.5px;font-weight:600;color:var(--text-dim);
    display:flex;align-items:center;gap:6px;
  }
  .feedback-line.is-bad{color:var(--bad);}
  .feedback-line.is-good{color:var(--good);}

  .answer-zone{
    padding:12px 20px calc(16px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line-soft);
    background:var(--surface);
    display:flex;flex-direction:column;gap:10px;
    position:relative;
  }
  .combo{position:relative;}
  .combo input{
    width:100%;background:var(--surface-2);border:1.5px solid var(--line);color:var(--text);
    font-size:16px;font-family:var(--font-body);border-radius:var(--radius-md);
    padding:13px 14px;
  }
  .combo input::placeholder{color:var(--text-faint);}
  .combo input:focus{border-color:var(--accent-2-bright);}
  .combo input:disabled{opacity:.5;}
  .suggestions{
    position:absolute;bottom:calc(100% + 8px);left:0;right:0;
    background:var(--surface-3);border:1px solid var(--line);border-radius:var(--radius-md);
    max-height:230px;overflow-y:auto;box-shadow:0 -14px 30px -12px rgba(0,0,0,0.5);
    display:none;z-index:5;
  }
  .suggestions.is-open{display:block;}
  .suggestions li{list-style:none;padding:12px 14px;font-size:15px;color:var(--text-dim);cursor:pointer;
    border-bottom:1px solid var(--line-soft);}
  .suggestions li:last-child{border-bottom:none;}
  .suggestions li:hover,.suggestions li[aria-selected="true"]{background:var(--surface-2);color:var(--text);}
  .suggestions .empty{color:var(--text-faint);cursor:default;}
  .suggestions .empty:hover{background:none;color:var(--text-faint);}

  .action-row{display:flex;align-items:stretch;gap:18px;}
  .action-row .btn-primary{flex:1;min-height:0;height:auto;}
  .secondary-actions{display:flex;flex-direction:column;justify-content:center;gap:8px;flex:none;min-width:120px;}
  .btn-giveup-round,.btn-quit-game{
    font-family:var(--font-body);font-weight:600;font-size:11px;color:var(--text-dim);
    background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
    padding:7px 10px;min-height:32px;
    display:flex;align-items:center;gap:7px;justify-content:flex-start;text-decoration:none;
    transition:border-color .12s ease, color .12s ease;
  }
  .btn-giveup-round::before,.btn-quit-game::before{
    content:"";width:6px;height:6px;border-radius:50%;flex:none;
  }
  .btn-giveup-round::before{background:var(--danger);}
  .btn-giveup-round:hover{border-color:rgba(229,72,77,0.45);color:var(--text);}
  .btn-quit-game::before{background:var(--text-faint);}
  .btn-quit-game:hover{border-color:var(--text-faint);color:var(--text);}

  /* ---------- ROUND RESULT ---------- */
  #screen-round{padding:26px 22px calc(22px + env(safe-area-inset-bottom));justify-content:space-between;}
  .rr-status{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding-top:10px;}
  .rr-badge{
    width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:26px;border:2px solid transparent;
  }
  .rr-badge.win{background:var(--good-ink);color:var(--good);border-color:rgba(255,172,0,0.4);}
  .rr-badge.lose{background:var(--bad-ink);color:var(--bad);border-color:rgba(43,74,107,0.7);}
  .rr-status h2{font-size:20px;}
  .rr-status .name{font-size:24px;font-family:var(--font-display);font-weight:800;color:var(--text);}
  .rr-points{font-family:var(--font-mono);font-size:15px;color:var(--text-dim);}
  .rr-points b{color:var(--accent);font-weight:600;}

  .rr-recap{
    background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-md);
    padding:14px 16px;display:flex;flex-direction:column;gap:10px;margin-top:18px;
  }
  .rr-recap .row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;}
  .rr-recap .row .k{color:var(--text-faint);}
  .rr-recap .row .v{color:var(--text);text-align:right;font-weight:500;}

  /* ---------- FINAL ---------- */
  #screen-final{padding:26px 22px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;gap:18px;flex-direction:column;}
  .final-score{text-align:center;padding:6px 0 4px;}
  .final-score .val{
    font-family:var(--font-mono);font-size:52px;font-weight:600;color:var(--accent);line-height:1;
    text-shadow:0 0 30px rgba(255,172,0,0.35);
  }
  .final-score .max{color:var(--text-faint);font-size:20px;}
  .final-score .found{margin-top:8px;color:var(--text-dim);font-size:14px;}

  .squares-row{display:flex;justify-content:center;gap:8px;}
  .sq{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
    font-family:var(--font-mono);font-size:11px;font-weight:700;color:rgba(0,0,0,0.55);}
  .sq.green{background:var(--accent);}
  .sq.yellow{background:var(--warn);}
  .sq.orange{background:var(--accent-2);color:rgba(255,255,255,0.8);}
  .sq.grey{background:var(--muted-square);border:1px solid var(--choke-line);color:rgba(255,255,255,0.45);}

  .final-list{display:flex;flex-direction:column;gap:8px;}
  .final-row{
    display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);
    border-radius:var(--radius-sm);padding:10px 12px;
  }
  .final-row .mini-sq{width:22px;height:22px;border-radius:6px;flex:none;}
  .final-row .fname{flex:1;font-size:13.5px;color:var(--text);font-weight:600;}
  .final-row .fpts{font-family:var(--font-mono);font-size:13px;color:var(--text-dim);}

  .modal-card .share-score{text-align:center;}
  .modal-card .share-score .val{font-family:var(--font-mono);font-size:34px;font-weight:600;color:var(--accent);}
  .modal-card .share-score .max{color:var(--text-faint);font-size:16px;}
  .modal-card .squares-row{margin:2px 0 4px;}
  .share-preview{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-md);padding:12px 14px;}
  .share-text{white-space:pre-line;font-family:var(--font-mono);font-size:12.5px;color:var(--text-dim);line-height:1.6;margin:0;}

  .final-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:6px;}
  .final-actions-row{display:flex;gap:10px;}
  .final-actions-row .btn{flex:1;}

  .next-game-countdown{
    text-align:center;font-size:12px;color:var(--text-faint);margin:4px 0 0;
  }
  .next-game-countdown #countdown-value{color:var(--accent);font-weight:600;}

  /* ---------- MODAL ---------- */
  .modal-overlay{
    position:absolute;inset:0;background:rgba(1,4,8,0.72);backdrop-filter:blur(2px);
    display:none;align-items:flex-end;justify-content:center;z-index:20;padding:16px;
  }
  .modal-overlay.is-open{display:flex;}
  .modal-card{
    width:100%;max-width:360px;background:var(--surface-3);border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:20px;display:flex;flex-direction:column;gap:14px;
  }
  .modal-card h3{font-size:17px;}
  .modal-card p{font-size:13.5px;color:var(--text-dim);line-height:1.55;margin:0;}
  .modal-actions{display:flex;flex-direction:column;gap:8px;}
  .modal-actions .btn-danger{background:var(--danger);color:#fff;}

  .rules-body{display:flex;flex-direction:column;gap:12px;}
  .rules-body .r{display:flex;gap:10px;align-items:flex-start;}
  .rules-body .r .ix{
    font-family:var(--font-mono);color:var(--accent);font-weight:600;font-size:13px;flex:none;
    width:20px;text-align:right;
  }
  .rules-body .r p{margin:0;font-size:13px;color:var(--text-dim);line-height:1.5;}

/* ---------- ajouts backend : bandeau date, badge mode, archives, regles, etats ---------- */
.date-banner{
  font-family:var(--font-mono);font-size:11.5px;color:#fff;
  text-align:center;padding:6px 20px 0;letter-spacing:.02em;
}
.mode-badge{
  display:inline-flex;align-items:center;gap:5px;font-family:var(--font-display);
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:100px;background:rgba(76,143,224,0.16);color:var(--accent-2-bright);
  border:1px solid rgba(76,143,224,0.36);margin-left:8px;
}

.state-message{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:32px;text-align:center;color:var(--text-dim);font-size:14px;
}
.state-message.is-error{color:var(--bad);}
.spinner{
  width:26px;height:26px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@media (prefers-reduced-motion:reduce){ .spinner{animation:none;} }
@keyframes spin{to{transform:rotate(360deg);}}

.training-hint{
  margin:2px 0 0;font-size:11px;color:var(--accent-2-bright);line-height:1.4;
}

.static-page{padding:24px 22px calc(22px + env(safe-area-inset-bottom));overflow-y:auto;gap:16px;}
.static-page .static-logo{display:block;height:44px;width:auto;margin:0 auto 4px;filter:drop-shadow(0 2px 6px rgba(255,172,0,0.14));}
.static-page h1{font-size:20px;margin-bottom:4px;}
.static-page .back-link{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--font-display);font-size:12.5px;font-weight:700;letter-spacing:.01em;
  color:var(--text-faint);text-decoration:none;padding:2px 0;
}
.static-page .back-link:hover{color:var(--accent-2-bright);}

.archive-list{display:flex;flex-direction:column;gap:8px;}
.archive-row{
  appearance:none;width:100%;font:inherit;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;text-decoration:none;color:inherit;text-align:left;
}
.archive-row:hover{border-color:var(--accent-2-bright);}
.archive-row .a-date{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--text);}
.archive-row .a-status{font-size:11.5px;color:var(--text-faint);margin-top:2px;}
.archive-row .a-score{font-family:var(--font-mono);font-size:14px;color:var(--accent);text-align:right;}
.archive-row .a-score .max{color:var(--text-faint);font-size:11px;}

.btn-back{
  background:none;border:none;color:var(--text-dim);font-size:19px;line-height:1;
  cursor:pointer;padding:4px 8px 4px 0;font-family:var(--font-body);
  text-decoration:none;display:inline-block;
}
.btn-back:hover{color:var(--text);}

.site-footer{
  padding:14px 16px calc(10px + env(safe-area-inset-bottom));
  text-align:center;
  flex:none;
}
.site-footer .footer-links{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 2px;
}
.site-footer .footer-links a{
  font-family:var(--font-display);font-size:10.5px;font-weight:700;letter-spacing:.02em;
  color:var(--text-dim);text-decoration:none;padding:5px 7px;border-radius:6px;
}
.site-footer .footer-links a:hover{color:var(--accent-2-bright);background:var(--surface-2);}
.site-footer .footer-sep{width:3px;height:3px;border-radius:50%;background:var(--text-faint);opacity:.6;margin:0 1px;}
.site-footer .footer-copy{margin:6px 0 0;font-size:10px;color:var(--text-faint);}