:root{--ink:#173449;--ink-soft:#597180;--gold:#bc9561;--gold-light:#eadac5;--canvas:#f5f7f8;--line:#dae2e6;--white:#fff;--teal:#254f62;--success:#0b6b48;--danger:#a23032;--shadow:0 10px 28px rgba(28,57,78,.06)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}a{color:var(--teal)}:focus-visible{outline:3px solid #5697ba;outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.topbar{height:78px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,74px);gap:20px}.brand{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:800;letter-spacing:.12em}.brand-mark{display:inline-flex;width:38px;height:38px;border-radius:12px;align-items:center;justify-content:center;background:#eaf2f2;color:#355f66;font-size:20px}.top-subtitle{color:var(--ink-soft);font-size:13px}.app-layout{max-width:1480px;margin:0 auto;padding:40px clamp(20px,4vw,60px) 55px;display:grid;grid-template-columns:minmax(530px,1.65fr) minmax(340px,.9fr);align-items:start;gap:30px}.work-panel,.palette-panel{background:var(--white);box-shadow:var(--shadow);border:1px solid var(--line);border-radius:20px}.work-panel{padding:clamp(26px,4vw,48px)}.eyebrow{color:#a47a41;font-size:11px;font-weight:800;letter-spacing:.16em}h1,h2{margin:0}h1{font-size:clamp(32px,4vw,53px);font-weight:760;line-height:1.17;letter-spacing:-.045em;margin:16px 0 16px}h1 em{font-style:normal;color:#b58d55}.lead{color:var(--ink-soft);font-size:15px;line-height:1.65;max-width:600px;margin:0 0 25px}.name-fields{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:29px}.name-fields label{font-size:13px;color:var(--ink);font-weight:700}.name-fields input{margin-top:9px;border:1px solid #d7e0e4;border-radius:10px;padding:13px 14px;width:100%;background:#fbfcfd;outline:none;font-size:14px;transition:border-color .18s,box-shadow .18s}.name-fields input:focus{border-color:#77a0b3;box-shadow:0 0 0 3px rgba(119,160,179,.15)}.name-fields input:disabled{background:#e8eeee;color:#697a82}.required{color:#a65d42}.optional{color:#a3afb6;font-weight:400}.cartouche-region{border:1px dashed #cfdae0;background:linear-gradient(180deg,#fff 0%,#fbfcfc 100%);border-radius:18px;padding:23px 20px 17px;text-align:center}.cartouche-caption{display:flex;justify-content:space-between;align-items:center;max-width:370px;margin:0 auto 24px}.counter{font-size:12px;color:var(--ink-soft);font-weight:650}.cartouche-wrap{width:max-content;margin:0 auto 22px;max-width:100%}.cartouche-oval{width:245px;height:360px;border:8px solid var(--gold);border-radius:49% / 18%;background:#fffaf4;box-shadow:inset 0 0 0 3px #fcf5e8,0 12px 25px rgba(117,78,28,.08);padding:26px 26px;transition:box-shadow .2s,border-color .2s}.cartouche-oval.drag-over{border-color:#507f98;box-shadow:inset 0 0 0 4px #e1eff7,0 0 0 6px #e1eff7}.cartouche-inner{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;overflow:auto;scrollbar-width:thin;padding:7px 6px}.cartouche-inner:has(.empty-state){justify-content:center}.empty-state{font-size:14px;color:#ac986f;line-height:1.6;margin:0}.empty-state strong{font-weight:750;color:#8d7651}.empty-state span{display:block;font-size:27px;margin-top:5px}.cartouche-base{width:102px;height:15px;border-top:8px solid var(--gold);margin:-3px auto 0;position:relative}.cartouche-base:before,.cartouche-base:after{content:"";position:absolute;width:14px;height:8px;border:3px solid var(--gold);border-top:0;top:-2px;left:28px;border-radius:0 0 12px 12px}.cartouche-base:after{left:55px}.placed-sign{display:flex;align-items:center;justify-content:center;gap:7px;min-height:47px;width:156px;max-width:100%;position:relative;border:1px solid #eadfcf;border-radius:9px;background:white;box-shadow:0 2px 4px rgba(60,48,25,.04);cursor:grab;padding:3px}.placed-sign.dragging{opacity:.35}.placed-image{height:38px;width:58px;object-fit:contain}.placed-value{font-size:13px;color:#9a7a4a;min-width:17px}.token-controls{display:flex;align-items:center;gap:0}.token-control{border:0;background:none;color:#718390;font-size:15px;padding:5px 2px;line-height:1}.token-control:hover:not(:disabled){color:var(--ink)}.token-control.remove{font-size:20px;color:#b87b77}.sequence-helper{font-size:13px;min-height:18px;color:#6e6657;margin:2px 0 14px}.cartouche-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}.secondary-button{border:1px solid #d1dade;color:var(--ink);background:#fff;border-radius:8px;padding:9px 13px;font-weight:650;font-size:12px}.secondary-button:hover:not(:disabled){background:#f2f6f8}.microcopy{font-size:11px;line-height:1.5;color:#80909a;max-width:360px;margin:14px auto 0}.submit-area{margin-top:23px;text-align:center}.primary-button{border:0;background:var(--teal);color:white;font-weight:750;font-size:14px;padding:15px 26px;border-radius:10px;min-width:245px;box-shadow:0 7px 12px rgba(22,63,78,.15)}.primary-button:hover:not(:disabled){background:#163d50}.primary-button span{margin-left:10px}.form-message{font-size:13px;min-height:19px;margin:13px auto 0;max-width:470px}.form-message.success{color:var(--success);font-weight:700}.form-message.error{color:var(--danger);font-weight:650}.form-message.info{color:var(--ink-soft)}.teaching-note{font-size:12px;line-height:1.65;color:#687d87;max-width:620px;margin:29px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.palette-panel{position:sticky;top:25px;padding:30px 25px}.palette-heading{display:flex;justify-content:space-between;align-items:center;gap:14px}.palette-heading h2{font-size:22px;line-height:1.3;letter-spacing:-.035em;margin-top:9px}.palette-count{font-size:11px;color:#9f7d52;background:#f7f0e7;padding:7px 9px;border-radius:99px;white-space:nowrap}.palette-panel>p{color:#6c7d86;font-size:13px;line-height:1.55;margin:13px 0 23px}.palette-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.palette-sign{min-width:0;background:#fbfcfc;border:1px solid #e1e7ea;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 5px 8px;transition:transform .15s,border-color .15s,box-shadow .15s;min-height:103px}.palette-sign:hover{border-color:#c19b6c;box-shadow:0 5px 12px rgba(27,48,61,.09);transform:translateY(-2px)}.palette-sign:active{cursor:grabbing}.sign-image{height:45px;width:60px;max-width:100%;object-fit:contain;pointer-events:none}.sign-value{font-size:14px;font-weight:750;color:#23465a}.sign-code{font-size:10px;font-weight:700;letter-spacing:.035em;color:#93a4ad}.palette-foot{font-size:11px;color:#8d999e;border-top:1px solid var(--line);margin-top:22px;padding-top:17px;line-height:1.5}.loading{grid-column:1/-1;color:#6d7d84;padding:20px;text-align:center}.page-footer{text-align:center;font-size:12px;color:#8f9da5;padding:0 20px 30px}.page-footer a{color:var(--teal)}
/* Teacher dashboard and login */
.admin-shell{max-width:1380px;margin:0 auto;padding:36px 24px 65px}.admin-top{display:flex;justify-content:space-between;gap:18px;align-items:center;margin:0 0 29px}.admin-top h1{font-size:34px;margin:7px 0}.admin-meta{color:var(--ink-soft);font-size:13px}.admin-actions{display:flex;gap:10px;align-items:center}.button,.outline-button{border:0;display:inline-block;border-radius:9px;padding:11px 15px;font-size:13px;font-weight:700;white-space:nowrap;text-decoration:none}.button{background:var(--teal);color:#fff}.outline-button{border:1px solid var(--line);background:#fff;color:var(--ink)}.button.small{padding:9px 12px;font-size:12px}.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:white;box-shadow:var(--shadow)}.admin-table{width:100%;border-collapse:collapse;min-width:850px}.admin-table th{color:#718594;background:#f5f8f9;text-transform:uppercase;letter-spacing:.09em;font-size:11px;text-align:left;padding:17px;white-space:nowrap}.admin-table td{border-top:1px solid var(--line);padding:19px 17px;vertical-align:top;font-size:14px}.admin-table th:nth-child(1){width:13%}.admin-table th:nth-child(2){width:17%}.admin-table th:nth-child(3){width:34%}.admin-table th:nth-child(4){width:36%}.small-col{white-space:nowrap}.muted{color:#80919a;font-size:12px;line-height:1.7}.teacher-cartouche{width:116px;height:250px;display:flex;flex-flow:column nowrap;align-items:center;justify-content:flex-start;gap:4px;padding:22px 13px;overflow:auto;scrollbar-width:thin;border:5px solid #c29c6a;border-radius:48% / 17%;background:#fffaf3}.mini-sign{height:39px;width:48px;flex-shrink:0;object-fit:contain}.translit{font-size:13px;font-weight:700;color:#805f38;margin:9px 0 1px}.review-form{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.review-form select,.review-form textarea{border:1px solid #d9e1e6;border-radius:8px;background:white;padding:9px 10px;font-size:12px;width:100%;max-width:330px}.review-form textarea{resize:vertical;height:63px}.delete-form{margin-top:9px}.link-danger{border:0;background:none;color:#a14847;text-decoration:underline;font-size:12px;padding:4px 0}.empty{padding:46px!important;text-align:center;color:var(--ink-soft)}.login-layout{min-height:calc(100vh - 78px);display:flex;align-items:center;justify-content:center;padding:30px}.login-card{width:min(460px,100%);background:white;border:1px solid var(--line);border-radius:20px;padding:40px;box-shadow:var(--shadow)}.login-card h1{font-size:29px;margin:12px 0}.login-card p{color:var(--ink-soft);line-height:1.6}.login-card label{display:block;font-weight:650;font-size:13px;margin:25px 0 15px}.login-card input{width:100%;margin-top:8px;border:1px solid #d5e0e5;border-radius:9px;padding:13px}.login-card .primary-button{width:100%}.login-error{color:var(--danger)!important;font-weight:600;font-size:13px}
@media(max-width:1070px){.app-layout{grid-template-columns:minmax(0,1fr);max-width:760px}.palette-panel{position:static}.palette-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.top-subtitle{display:none}}
@media(max-width:620px){.topbar{height:67px}.brand{font-size:11px;letter-spacing:.08em}.app-layout{padding:20px 12px 30px;gap:16px}.work-panel,.palette-panel{border-radius:13px}.work-panel{padding:23px 16px}.palette-panel{padding:23px 16px}.name-fields{grid-template-columns:1fr;gap:14px}h1{font-size:35px}.lead{font-size:14px}.cartouche-region{padding:19px 10px}.palette-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.palette-sign{min-height:90px;padding:8px 3px}.sign-image{height:40px}.cartouche-oval{width:215px;height:340px}.admin-top{align-items:flex-start;flex-direction:column}.admin-actions{flex-wrap:wrap}.login-card{padding:28px 20px}.palette-heading h2{font-size:21px}}

.admin-footnote{font-size:12px;color:#81929b;line-height:1.6;margin:18px 0}

/* V2 — cartouche horizontal fidèle au modèle fourni, signes de l'apprenant */
.cartouche-caption{max-width:570px;margin-bottom:12px}
.cartouche-wrap{width:100%;max-width:570px;margin:0 auto 12px}
.cartouche-oval{
  position:relative;width:100%;height:auto;aspect-ratio:426/307;
  border:0;border-radius:0;padding:0;box-shadow:none;
  background:#fffaf5 url('/static/cartouche-horizontal.png') center center/100% 100% no-repeat;
}
.cartouche-oval.drag-over{border:0;box-shadow:0 0 0 4px #dfeced;border-radius:24%}
.cartouche-inner{
  position:absolute;inset:12% 12% 12% 9%;height:auto;
  display:flex;flex-flow:row wrap;justify-content:center;align-content:center;
  align-items:center;gap:4px;overflow-y:auto;padding:8px 4px;
}
.cartouche-inner:has(.empty-state){justify-content:center;align-content:center}
.cartouche-base{display:none}
.placed-sign{
  border:1px solid transparent;width:63px;height:72px;min-height:0;
  max-width:none;flex:0 0 63px;gap:2px;padding:4px 2px;
  border-radius:10px;background:transparent;box-shadow:none;
  display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;
  transition:background .16s,border-color .16s;
}
.placed-sign:hover,.placed-sign:focus-visible{border-color:#cfb18b;background:#fff9ef}
.placed-sign.selected{border:1px solid #b78b56;background:rgba(253,245,231,.9)}
.placed-sign .placed-image{height:49px;width:55px;max-width:100%;object-fit:contain;flex-shrink:0}
.placed-sign .placed-value{font-size:12px;line-height:1;min-width:0;font-weight:700;color:#8c6d43}
.placed-sign.dragging{opacity:.3}
.empty-state{color:#9c8769;line-height:1.5;font-size:15px}
.empty-state span{font-size:22px}
.sequence-helper{margin:0 0 13px}
.selection-actions{display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.selection-hint{font-size:12px;color:#75848b;margin-right:4px}
.mini-button{border:1px solid #d4dfe1;border-radius:7px;background:#fff;color:#305263;font-size:18px;line-height:1;padding:5px 9px;min-width:34px;min-height:30px}
.mini-button:disabled{opacity:.4;cursor:not-allowed}
.mini-button:not(:disabled):hover{background:#eef3f5}
.mini-button.remove-button{color:#a45e57}
.cartouche-region{padding:22px 18px 18px}
.palette-panel{max-height:calc(100vh - 30px);overflow-y:auto;scrollbar-width:thin}
.palette-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.palette-sign{min-height:117px;padding:8px 4px;gap:3px}
.palette-sign .sign-image{width:70px;height:52px}
.sign-value{font-size:13px;white-space:normal;line-height:1.2}
.sign-description{font-size:10px;line-height:1.25;overflow-wrap:anywhere;color:#627784;text-align:center;max-width:100%}
.palette-foot{margin-top:18px}
.teacher-cartouche{
  position:relative;width:288px;height:auto;aspect-ratio:426/307;
  background:#fffaf5 url('/static/cartouche-horizontal.png') center center/100% 100% no-repeat;
  border:0;border-radius:0;box-shadow:none;padding:30px 38px 29px 30px;
  display:flex;flex-flow:row wrap;justify-content:center;align-content:center;gap:3px;overflow:auto;
}
.teacher-cartouche .mini-sign{width:37px;height:39px;flex-shrink:0;object-fit:contain}
@media(max-width:1070px){.palette-panel{position:static;max-height:none;overflow-y:visible}.palette-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:620px){
 .cartouche-region{padding:16px 8px 15px}
 .cartouche-oval{width:100%;height:auto;aspect-ratio:426/307}
 .cartouche-inner{inset:12% 12% 12% 9%;padding:2px}
 .placed-sign{width:44px;flex-basis:44px;height:52px;padding:2px}
 .placed-sign .placed-image{width:42px;height:36px}
 .placed-sign .placed-value{font-size:10px}
 .palette-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .palette-sign{min-height:110px}
 .palette-sign .sign-image{height:47px}
 .selection-hint{width:100%;text-align:center}
}

/* V3 : composition libre en cadrats ; chaque signe est positionné en pourcentage. */
.cartouche-wrap{max-width:640px}
.cartouche-caption{max-width:640px}
.cartouche-oval{overflow:hidden;touch-action:pan-y}
.cartouche-inner{
  inset:13% 13.5% 13% 10.5%;
  display:block;overflow:visible;padding:0;touch-action:none;
}
.cartouche-inner .placed-sign{
  position:absolute;transform:translate(-50%,-50%);
  margin:0;padding:1px;aspect-ratio:1;
  height:auto;min-height:0;max-height:none;min-width:0;
  display:flex;align-items:center;justify-content:center;
  touch-action:none;user-select:none;cursor:grab;
  border:1.5px solid transparent;border-radius:9px;
  flex:none;z-index:1;
}
.cartouche-inner .placed-sign:active{cursor:grabbing}
.cartouche-inner .placed-sign.selected{z-index:10;border:1.5px solid #b88c58;background:rgba(253,245,231,.36);box-shadow:0 0 0 2px rgba(191,150,99,.17)}
.cartouche-inner .placed-sign .placed-image{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;pointer-events:none}
.cartouche-inner .resize-handle{
  position:absolute;right:-7px;bottom:-7px;width:15px;height:15px;
  background:#bd945e;border:2px solid white;border-radius:4px;
  box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:nwse-resize;touch-action:none;
}
.cartouche-inner .resize-handle[hidden]{display:none}
.cartouche-inner .empty-state{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;margin:0}
.selection-actions{gap:9px;margin:14px auto 10px;max-width:640px}
.selection-hint{width:100%;text-align:center}
.size-label{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:650;color:#466171}
.size-label input[type=range]{width:150px;accent-color:#9b764a;cursor:pointer}
.size-label output{min-width:40px;text-align:right;font-variant-numeric:tabular-nums}
.selection-actions .mini-button{font-size:22px;font-weight:700;width:36px;height:36px}
.teacher-cartouche{width:318px;padding:0;overflow:hidden;display:block}
.teacher-cartouche .teacher-canvas{position:absolute;inset:13% 13.5% 13% 10.5%}
.teacher-cartouche .teacher-sign{position:absolute;aspect-ratio:1;transform:translate(-50%,-50%);object-fit:contain}
@media(max-width:620px){
  .cartouche-inner{inset:13% 13.5% 13% 10.5%;padding:0}
  .size-label input[type=range]{width:112px}
  .cartouche-inner .resize-handle{width:15px;height:15px}
}
/* Alignement des anciennes productions V2 (aucune donnée n'est perdue). */
.teacher-cartouche.legacy-cartouche .teacher-canvas{
  display:flex;flex-flow:row wrap;justify-content:center;align-content:center;
  align-items:center;gap:3px;overflow:hidden
}
.teacher-cartouche.legacy-cartouche .mini-sign{width:35px;height:38px;object-fit:contain}
/* La poignée reste dans la zone cliquable, y compris sur écran tactile. */
.cartouche-inner .resize-handle{right:1px;bottom:1px}

.teacher-cartouche{max-width:100%}

/* V3.1 : aperçu des cadrats dans l'espace formateur via SVG (CSP-compatible). */
.teacher-cartouche .teacher-canvas{position:absolute;inset:13% 13.5% 13% 10.5%;overflow:hidden}
.teacher-cartouche .teacher-composition{display:block;width:100%;height:100%;overflow:visible}
/* Anciennes productions : alignement historique conserve. */
.teacher-cartouche.legacy-cartouche .teacher-canvas{position:absolute;inset:13% 13.5% 13% 10.5%;overflow:hidden}

/* V3.2 — panneau de déterminatifs, dessins originaux fournis par le formateur. */
.determinative-panel{
  border:1px solid #d9c5a6;border-radius:15px;background:#fffcf7;
  padding:18px 17px;margin-top:22px;text-align:left
}
.determinative-panel h3{font-size:19px;letter-spacing:-.025em;color:#233b48;margin:6px 0}
.determinative-panel>p{font-size:12px;line-height:1.55;color:#607581;margin:8px 0 12px}
.determinative-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.determinative-sign{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:0;gap:6px;padding:12px 7px;background:white;cursor:grab;
  border:1.5px solid #e4d3b9;border-radius:12px;transition:background .15s,border-color .15s
}
.determinative-sign:hover,.determinative-sign:focus-visible{background:#fff9ef;border-color:#a9773d}
.determinative-sign.active{border-color:#bc8b51;box-shadow:0 0 0 2px rgba(188,139,81,.16);background:#fff8e9}
.determinative-sign .sign-image{height:97px;width:100%;object-fit:contain}
.determinative-name{font-size:12px;font-weight:750;color:#294454}
.determinative-code{font-size:11px;color:#8e7a61}
.determinative-panel .determinative-tip{font-size:11px;color:#977e5c;margin:12px 0 0}
.teacher-determinative{font-size:12px;color:#715a3b;font-weight:650;margin:5px 0}
@media(max-width:620px){
  .determinative-panel{padding:15px 12px}
  .determinative-sign .sign-image{height:75px}
}
/* Sur ordinateur, garder les deux déterminatifs visibles sous le répertoire,
   tout en faisant défiler seulement la liste des 18 unilitères. */
@media(min-width:1071px){
  .palette-panel{display:flex;flex-direction:column;overflow:hidden}
  .palette-panel>.palette-heading,.palette-panel>p,.palette-panel>.determinative-panel,.palette-panel>.palette-foot{flex-shrink:0}
  .palette-panel>.palette-grid{flex:1 1 auto;min-height:120px;overflow-y:auto;scrollbar-width:thin;padding:3px}
  .palette-panel>.determinative-panel{margin-top:13px}
  .palette-panel>.palette-foot{margin-top:12px;padding-top:10px}
}