/* Heebo (latin) auto-hébergé — même police que moraq.co. Pas d'appel au CDN
   Google Fonts : latence en moins, et pas de fuite d'IP vers Google. */
@font-face{font-family:Heebo;src:url(fonts/heebo-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Heebo;src:url(fonts/heebo-800.woff2) format('woff2');font-weight:700 800;font-display:swap}
@font-face{font-family:var(--fb);font-weight:800;src:url(fonts/comfortaa-bold.ttf) format('truetype');font-display:swap}
@font-face{font-family:var(--fr);src:url(fonts/comfortaa-regular.ttf) format('truetype');font-display:swap}
@font-face{font-family:FR;src:url(fonts/frank-ruhl-libre.ttf) format('truetype');font-display:swap}
@font-face{font-family:PL;src:url(fonts/playpen-sans-hebrew.ttf) format('truetype');font-display:swap}

/* Charte Moraq 2026 — bleu nuit / or. Vert & rouge = feedback fonctionnel, hors charte. */
:root{--fb:'Heebo',CB,system-ui,sans-serif;--fr:'Heebo',CR,system-ui,sans-serif;
 --navy:#0D1B33;--gold:#E5B94E;--yellow:#E5B94E;--cream:#F5F1E8;--green:#6DA544;--red:#D9534F;--ink:#33415C}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--cream);font-family:var(--fr);color:var(--ink)}
.he{font-family:FR} .cu{font-family:PL}
.wrap{max-width:920px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
/* Bandeau constant de la charte : bleu nuit, א MORAQ or, liens crème, CTA or.
   Identique à moraq.co / app.moraq.co / ressources.moraq.co. Deux étages :
   la nav de la marque, puis la barre de contexte du quiz (titre + score). */
.sticky{position:sticky;top:0;z-index:5;box-shadow:0 2px 18px rgba(13,27,51,.3)}
.mqnav{display:flex;flex-direction:column;align-items:stretch;padding:0;background:var(--navy);
 border-bottom:1px solid rgba(245,241,232,.1)}
.mqnav-bar{width:100%;max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:22px;
 padding:14px 24px;box-sizing:border-box}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand img{height:30px;width:auto;display:block}
.navlinks{display:flex;gap:22px;margin-left:8px}
.navlinks a{font-family:var(--fr);font-size:15px;color:var(--cream);text-decoration:none;opacity:.88}
.navlinks a:hover{opacity:1;color:var(--gold)}
.navcta{margin-left:auto;font-family:var(--fb);font-weight:800;font-size:14px;background:var(--gold);
 color:var(--navy);padding:10px 18px;border-radius:14px;text-decoration:none;white-space:nowrap;flex:none}
.navcta:hover{filter:brightness(1.07)}
header{display:flex;align-items:center;gap:16px;padding:11px 20px;background:#122443}
.navq{min-width:0;flex:1}
.htitle{font-family:var(--fb);font-weight:800;font-size:15px;color:var(--cream);line-height:1.25;
 display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hsub{font-size:12.5px;color:#A9B6CC;display:block;overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
.score{margin-left:auto;font-family:var(--fb);font-weight:800;color:var(--navy);background:var(--gold);
 padding:8px 15px;border-radius:20px;font-size:15px;white-space:nowrap;flex:none}
.bar{height:8px;background:#DDD6C6}
.bar > i{display:block;height:100%;background:var(--gold);width:0;transition:width .3s}
main{flex:1;padding:20px 18px 28px}
.card{background:#fff;border-radius:20px;padding:22px 22px 26px;box-shadow:0 6px 24px rgba(20,37,54,.06)}
.rtitle{font-family:var(--fb);font-weight:800;font-size:24px;color:var(--navy)}
.rule{height:5px;width:120px;background:var(--yellow);border-radius:3px;margin:8px 0 12px}
.rsub{font-size:16px;color:#556572;margin-bottom:18px}
.rsub:empty{display:none}   /* 16 manches N4 n'ont pas de consigne : pas de blanc parasite */
/* name / vowel item */
.qitem{border:2px solid #eef1f4;border-radius:16px;padding:14px;margin-bottom:14px}
.stim{font-size:64px;text-align:center;line-height:1.1;margin-bottom:6px}
.choices{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.choices.wide{grid-template-columns:1fr}
.btn{font-family:var(--fb);font-weight:800;font-size:19px;padding:14px 8px;border-radius:14px;border:2px solid #dfe5ea;background:#fff;color:var(--ink);cursor:pointer;text-align:center;transition:.12s}
.btn:hover{border-color:#c3ccd4}
.btn .cu,.btn .he{font-size:34px;font-family:inherit}
.btn.cu{font-family:PL} .btn.he{font-family:FR}
.btn.good{background:var(--green);color:#fff;border-color:var(--green)}
.btn.bad{background:var(--red);color:#fff;border-color:var(--red)}
.btn.lock{pointer-events:none;opacity:.98}
.btn.dim{opacity:.45;pointer-events:none}
/* pick */
.pickq{margin-bottom:20px}
.pprompt{font-size:20px;margin-bottom:10px}
.pprompt-he{font-family:FR;font-size:30px;margin-right:6px;direction:rtl;unicode-bidi:isolate;display:inline-block}
.optgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.optgrid.wide{grid-template-columns:1fr}
.optgrid-txt{grid-template-columns:repeat(2,1fr)}
.opt.txt{padding:14px 14px}
.opt.txt .t{font-size:19px;font-family:var(--fr);color:var(--ink)}
.opt.txt.good .t,.opt.txt.bad .t{color:#fff}
.qimg{display:block;width:100%;margin:2px 0 12px;border:1px solid #eef1f4;border-radius:12px;background:#fff}
.storyimg{display:block;width:100%;margin:2px auto 16px;border:2px solid var(--yellow);border-radius:14px;padding:8px;background:#fffdf5}
.opt{border:2px solid #dfe5ea;border-radius:14px;padding:16px 8px;text-align:center;cursor:pointer;background:#fff;transition:.12s}
.opt .t{font-size:38px}
.opt.wide .t{letter-spacing:6px}
.opt.good{background:var(--green);border-color:var(--green)} .opt.good .t{color:#fff}
.opt.bad{background:var(--red);border-color:var(--red)} .opt.bad .t{color:#fff}
.opt.lock{pointer-events:none}
/* match */
.match{display:flex;gap:14px;justify-content:space-between}
.mcol{flex:1;display:flex;flex-direction:column;gap:12px}
.tile{border:2px solid #dfe5ea;border-radius:14px;padding:14px 8px;text-align:center;cursor:pointer;background:#fff;font-size:20px;transition:.12s;min-height:60px;display:flex;align-items:center;justify-content:center}
.tile.he{font-family:FR;font-size:38px} .tile.cu{font-family:PL;font-size:38px} .tile.txt{font-family:var(--fr);font-size:22px}
.tile.small{font-size:23px;min-height:54px;padding:10px 6px}
.tile.hesent{font-family:FR;font-size:21px;direction:rtl;text-align:right;line-height:1.55;min-height:56px;justify-content:flex-end}
.tile.clock{padding:6px}
.tile.clock svg{width:74px;height:74px;display:block}
.tile.timehe{font-family:FR;font-size:24px;direction:rtl}
.opt.sent{text-align:right;padding:15px 18px}
.opt.sent .t{font-family:FR;font-size:24px;direction:rtl;display:block;line-height:1.55;letter-spacing:normal}
.pprompt-fr{font-size:15px;color:#8494a1;margin-bottom:8px}
.gloss{font-size:15px;color:#8494a1}
.compqhe{font-family:FR;font-size:30px}
.opt.he .t{font-size:30px}
.tile.sel{border-color:var(--navy);background:#eef4fb;box-shadow:0 0 0 3px rgba(21,37,54,.12)}
.tile.done{background:var(--green);border-color:var(--green);color:#fff;pointer-events:none}
.tile.shake{animation:sh .35s}
@keyframes sh{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
/* label (schéma) */
.labelwrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px}
.bodysvg{width:100%;max-width:300px;height:auto;display:block}
.spot{cursor:pointer}
.spotc{fill:rgba(255,255,255,.55);stroke:var(--navy);stroke-width:2.5}
.spot:hover .spotc{stroke:var(--yellow);stroke-width:3.5}
.spot.sel .spotc{fill:#eef4fb;stroke:var(--navy);stroke-width:3.5}
.spot.done .spotc{fill:var(--green);stroke:var(--green)}
.spotn{font-family:var(--fb);font-weight:800;font-size:17px;fill:var(--navy);text-anchor:middle;pointer-events:none}
.spot.done .spotn{fill:#fff}
.spot.shake{animation:sh .35s}
.wbank{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.wtile{font-family:FR;font-size:27px;border:2px solid #dfe5ea;border-radius:14px;padding:8px 18px;background:#fff;cursor:pointer;transition:.12s}
.wtile.sel{border-color:var(--navy);background:#eef4fb;box-shadow:0 0 0 3px rgba(21,37,54,.12)}
.wtile.used{background:var(--green);color:#fff;border-color:var(--green);pointer-events:none;opacity:.9}
.pill{position:absolute;transform:translate(-50%,-50%);background:var(--green);color:#fff;font-family:FR;font-size:19px;padding:3px 11px;border-radius:12px;pointer-events:none;white-space:nowrap;box-shadow:0 2px 7px rgba(0,0,0,.22)}
/* trace */
.tracewrap{display:flex;flex-direction:column;gap:14px}
.tracebox{position:relative;border:2px dashed #cdd6dd;border-radius:16px;height:150px;background:#fff;touch-action:none}
.tracebox .model{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:PL;font-size:96px;color:#e5eaef;user-select:none;pointer-events:none}
.tracebox canvas{position:absolute;inset:0;width:100%;height:100%}
.tracebtns{display:flex;gap:10px;flex-wrap:wrap}
.mini{font-family:var(--fb);font-weight:800;font-size:14px;padding:9px 14px;border-radius:12px;border:2px solid #dfe5ea;background:#fff;cursor:pointer}
/* nav */
.nav{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:12px}
.hint{font-size:14px;color:#8494a1}
.next{font-family:var(--fb);font-weight:800;font-size:18px;padding:14px 26px;border-radius:16px;border:none;
 background:var(--gold);color:var(--navy);cursor:pointer}
.next:focus-visible,.start:focus-visible,.btn:focus-visible,.opt:focus-visible,.tile:focus-visible{
 outline:3px solid var(--navy);outline-offset:2px}
.next[disabled]{opacity:.35;cursor:not-allowed}
/* end — moment commercial : fond sombre, un seul bouton or vers la suite */
.end{text-align:center;padding:32px 22px 26px}
.end.dark{background:var(--navy);
 background-image:radial-gradient(120% 100% at 50% 0%,#1A2C52 0%,var(--navy) 62%);color:var(--cream)}
.end .big{font-family:var(--fb);font-weight:800;font-size:60px;color:var(--cream);line-height:1}
.end .big span{font-size:28px;color:#8496B5}
.end .pct{font-family:var(--fb);font-weight:800;font-size:14px;color:var(--gold);
 letter-spacing:.1em;text-transform:uppercase;margin-top:6px}
.end .endt{font-family:var(--fb);font-weight:800;font-size:24px;color:var(--cream);margin:20px 0 8px}
.end .msg{font-size:17px;color:#C6D0E2;margin:0 auto 26px;max-width:44ch;line-height:1.6}
.ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta{font-family:var(--fb);font-weight:800;font-size:17px;padding:16px 30px;border-radius:16px;cursor:pointer;
 text-decoration:none;display:inline-block;border:2px solid transparent;transition:.14s}
.cta.gold{background:var(--gold);color:var(--navy);border-color:var(--gold);
 box-shadow:0 8px 22px rgba(229,185,78,.22)}
.cta.gold:hover{filter:brightness(1.06);transform:translateY(-1px)}
.endlinks{margin-top:22px;font-size:14px;color:#8496B5}
.endlinks a{color:#C6D0E2;text-decoration:none;border-bottom:1px solid rgba(198,208,226,.35)}
.endlinks a:hover{color:var(--gold);border-color:var(--gold)}
.endlinks .sep{margin:0 9px}
.stars{font-size:40px;letter-spacing:6px}
/* porte email — même carte sombre que l'écran de fin, avant l'affichage du score */
.gate .gk{font-family:var(--fb);font-weight:800;color:var(--gold);font-size:13px;
 letter-spacing:.16em;text-transform:uppercase}
.gate .endt{margin-top:14px}
.gform{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
 max-width:520px;margin:0 auto}
.gsr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ginput{flex:1 1 250px;min-width:0;font-family:var(--fr);font-size:17px;padding:16px 18px;
 border-radius:16px;border:2px solid rgba(245,241,232,.28);
 background:rgba(245,241,232,.07);color:var(--cream)}
.ginput::placeholder{color:#8496B5}
.ginput:focus{outline:none;border-color:var(--gold);background:rgba(245,241,232,.12)}
.ginput.bad{border-color:var(--red)}
.gform .cta{flex:0 0 auto}
.gerr{min-height:22px;margin-top:10px;font-size:14px;color:#F2B8B6}
.gnote{margin-top:6px;font-size:13px;max-width:44ch;margin-left:auto;margin-right:auto}
.cover{text-align:center;padding:34px 22px 30px;background:var(--navy);
 background-image:radial-gradient(120% 100% at 50% 0%,#1A2C52 0%,var(--navy) 62%);color:var(--cream)}
.cover .k{font-family:var(--fb);font-weight:800;color:var(--gold);font-size:13px;
 letter-spacing:.16em;text-transform:uppercase}
.cover h1{font-family:var(--fb);font-weight:800;color:var(--cream);font-size:44px;margin:10px 0 6px;line-height:1.1}
.cover p{font-size:18px;color:#C6D0E2;line-height:1.55;max-width:46ch;margin:8px auto}
.cover .he{color:var(--cream)}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:20px 0}
.chips span{background:rgba(229,185,78,.16);color:var(--gold);border:1px solid rgba(229,185,78,.45);
 font-family:var(--fb);font-weight:800;font-size:13.5px;padding:7px 15px;border-radius:16px}
.start{font-family:var(--fb);font-weight:800;font-size:20px;padding:15px 34px;border-radius:18px;border:none;
 background:var(--gold);color:var(--navy);cursor:pointer;margin-top:8px}
/* pied de page — même structure que moraq.co : crème, 4 blocs, empilés sur mobile */
.mqfoot{background:var(--cream);color:var(--navy);padding:34px 20px 26px;border-top:1px solid rgba(13,27,51,.1);font-family:var(--fr);text-align:left}
.mqfoot .fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:920px;margin:0 auto}
.mqfoot .fcol{display:flex;flex-direction:column;gap:9px}
.mqfoot .fhead{font-family:var(--fb);font-weight:800;font-size:12px;letter-spacing:.02em;color:var(--navy);margin-bottom:3px}
.mqfoot a{color:var(--navy);text-decoration:none;font-size:13.5px;opacity:.86;line-height:1.3}
.mqfoot a:hover{color:var(--gold);opacity:1}
.mqfoot .copy{font-size:12px;color:#6F7A8F;margin:26px auto 0;max-width:920px}
@media(max-width:560px){.mqfoot .fgrid{grid-template-columns:1fr;gap:22px}}

.mqnav-bar{flex-wrap:wrap}
.navburger{flex:none;width:40px;height:40px;border:0;background:transparent;cursor:pointer;
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.navburger span{display:block;width:18px;height:2px;background:var(--cream,#F5F1E8);border-radius:1px}
.navmenu{display:none;flex:1 0 100%;flex-direction:column;gap:0;background:var(--navy,#0D1B33);
  border-top:1px solid rgba(245,241,232,.1);padding:8px 20px 18px}
.navmenu:not([hidden]){display:flex}
.navmenu a{color:var(--cream,#F5F1E8);text-decoration:none;font-weight:500;font-size:16px;
  padding:12px 0;border-bottom:1px solid rgba(245,241,232,.12)}
.navmenu a:last-child{border-bottom:0}
.navmenu a:hover{color:var(--gold,#E5B94E)}
@media(max-width:820px){
  .mqnav .navlinks,.navlinks{display:none}
  .navburger{display:flex}
}
@media(min-width:821px){
  .navburger,.navmenu{display:none!important}
}
@media(max-width:560px){
 .htitle{display:none}
 .mqnav-bar{gap:12px;padding:12px 16px}
 .cover h1{font-size:34px}.cover{padding:26px 16px 24px}
 .end .big{font-size:50px}
 .ctas{flex-direction:column}
 .cta{width:100%}
 .rtitle{font-size:20px}.stim{font-size:52px}.choices{grid-template-columns:repeat(2,1fr)}
 .optgrid{grid-template-columns:repeat(2,1fr)}.optgrid-txt{grid-template-columns:1fr}.btn{font-size:17px}
 .tile.he,.tile.cu{font-size:32px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

@media (max-width:560px){
 /* en colonne, flex-basis pilote la HAUTEUR : sans flex:0 0 auto le champ
    email fait 250px de haut. */
 .gform{flex-direction:column} .ginput,.gform .cta{width:100%;flex:0 0 auto}
}

/* v33 (25/09/2026) — bandeau aligné sur celui de moraq.co (relevé à 1280 px) :
   barre 56 px, logo 30 px de haut à ses proportions, liens 15 px medium, CTA pilule. */
.mqnav-bar{min-height:56px;padding:0 24px;gap:18px}
.mqnav .navlinks{gap:18px;margin-left:0}
.mqnav .navlinks a{font-weight:500;letter-spacing:-.3px;opacity:1}
.mqnav .navcta{font-weight:700;font-size:17px;letter-spacing:-.34px;line-height:34px;padding:0 18px;border-radius:100px}
.mqnav .brand{align-items:center}
.mqnav .brand img{height:30px;width:auto;display:block}
@media(max-width:560px){.mqnav-bar{gap:12px;padding:0 16px}.mqnav .navcta{font-size:15px;padding:0 14px}}