/* ============================================================
   ATELIER — MES QUIZ + éditeur de questions
   Recopie des maquettes brandnew/drafts/saison2-10 → 13 (bloc <style id="s2">).
   Classes préfixées .s2- : aucune classe de proto.css n'est redéfinie.
   En fin de fichier : ce que la maquette statique n'avait pas besoin de dire
   (champs éditables, états, aperçu).
   ============================================================ */

/* ---------- socle de page ---------- */
.s2 { padding: 0 0 26px; }
.s2 * { box-sizing: border-box; }
.s2-h { display:flex; align-items:center; gap:10px; padding:14px 16px 10px; }
.s2-back { width:38px; height:38px; border:3px solid var(--ink); background:var(--paper);
           box-shadow:4px 4px 0 var(--ink); font-family:var(--fd); font-size:22px; line-height:1;
           display:grid; place-items:center; color:var(--ink); cursor:pointer; flex:0 0 auto; }
.s2-ttl { font-family:var(--fd); font-size:23px; letter-spacing:.5px; color:var(--ink); }
.s2-ttl small { display:block; font-family:var(--fb); font-size:10.5px; font-weight:700;
                letter-spacing:.6px; opacity:.6; margin-top:2px; }
.s2-body { padding:0 16px; display:flex; flex-direction:column; gap:14px; }

/* ---------- titres de section ---------- */
.s2-sh { font-family:var(--fd); font-size:13.5px; letter-spacing:1.1px; color:var(--ink);
         display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.s2-sh i { font-style:normal; font-family:var(--fb); font-size:10px; font-weight:700; opacity:.55; }

/* ---------- briques ---------- */
.s2-card { border:3px solid var(--ink); background:var(--paper); box-shadow:5px 5px 0 var(--ink);
           padding:13px 14px; color:var(--ink); }
.s2-card.ink { background:#12080F; color:#FFF1E2; box-shadow:5px 5px 0 var(--magenta); border-color:#12080F; }
.s2-card.ink .s2-mut { color:#FFF1E2; opacity:.62; }
.s2-mut { font-family:var(--fb); font-size:10.5px; font-weight:600; line-height:1.5; opacity:.62; }
.s2-row { display:flex; align-items:center; gap:11px; }
.s2-row.eq { align-items:stretch; }
.s2-row.eq .s2-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.s2-grow { flex:1; min-width:0; }
.s2-chip { display:inline-flex; align-items:center; gap:5px; border:2.5px solid var(--ink);
           background:var(--paper); box-shadow:3px 3px 0 var(--ink); padding:3px 8px 4px;
           font-family:var(--fd); font-size:11px; letter-spacing:.6px; color:var(--ink); white-space:nowrap; }
.s2-chip.mag { background:var(--magenta); } .s2-chip.yel { background:var(--yellow); }
.s2-chip.cya { background:var(--cyan); }    .s2-chip.gre { background:var(--green); }
.s2-chip.red { background:var(--red); }     .s2-chip.ora { background:var(--orange); }
.s2-chip.pur { background:var(--purple); color:#fff; }
.s2-chip.dark { background:#12080F; color:#FFF1E2; border-color:#12080F; box-shadow:3px 3px 0 var(--magenta); }
.s2-btn { display:block; width:100%; border:4px solid var(--ink); background:var(--yellow);
          box-shadow:6px 6px 0 var(--ink); padding:13px 12px 15px; font-family:var(--fd);
          font-size:17px; letter-spacing:.8px; text-align:center; color:var(--ink); text-decoration:none; cursor:pointer; }
.s2-btn.mag { background:var(--magenta); } .s2-btn.gre { background:var(--green); }
.s2-btn.cya { background:var(--cyan); }
.s2-btn.ghost { background:var(--paper); box-shadow:4px 4px 0 var(--ink); border-width:3px; font-size:14px; padding:10px; }
.s2-btn small { display:block; font-family:var(--fb); font-size:10px; font-weight:700; opacity:.7; margin-top:3px; letter-spacing:.3px; }

/* ---------- barre de progression ---------- */
.s2-bar { height:19px; border:3px solid var(--ink); background:var(--paper); overflow:hidden; position:relative; }
.s2-bar > i { display:block; height:100%; background:var(--magenta);
  background-image:repeating-linear-gradient(-45deg, rgba(0,0,0,.16) 0 6px, transparent 6px 13px); }
.s2-bar b { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--fd);
            font-size:10.5px; letter-spacing:.6px; color:var(--ink); }

/* ---------- coche tracée (jamais le glyphe) ---------- */
.s2-tick { width:22px; height:22px; border:3px solid var(--ink); background:var(--green);
           position:relative; flex:0 0 auto; }
.s2-tick:before { content:''; position:absolute; left:4px; top:9px; width:5px; height:3px;
  background:var(--ink); transform:rotate(45deg); }
.s2-tick:after { content:''; position:absolute; left:6px; top:7px; width:11px; height:3px;
  background:var(--ink); transform:rotate(-45deg); }
.s2-lock { width:22px; height:22px; border:3px solid var(--ink); background:var(--gray2);
           display:grid; place-items:center; font-size:11px; flex:0 0 auto; }

/* ---------- lignes d'option (qui peut le jouer) ---------- */
.s2-ev-em { width:40px; height:40px; border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink);
            display:grid; place-items:center; font-size:20px; background:var(--paper); flex:0 0 auto; }
.s2-ev-nm { font-family:var(--fd); font-size:14.5px; letter-spacing:.4px; }
.s2-ev-wh { font-family:var(--fb); font-size:10px; font-weight:700; opacity:.6; margin-top:1px; }

/* ---------- grille de types de question ---------- */
.s2-types { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.s2-type { border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); background:var(--paper);
           padding:9px 6px 8px; text-align:center; color:var(--ink); cursor:pointer; font:inherit; }
.s2-type.on { box-shadow:2px 2px 0 var(--ink); transform:translate(2px,2px); background:var(--yellow); }
.s2-type em { font-style:normal; font-size:20px; display:block; }
.s2-type b { font-family:var(--fd); font-size:9.5px; letter-spacing:.3px; display:block; margin-top:4px; line-height:1.15; }

/* ---------- champs de l'éditeur ---------- */
.s2-fld { border:3px solid var(--ink); background:var(--paper); box-shadow:4px 4px 0 var(--ink); padding:9px 11px; color:var(--ink); }
.s2-fld-l { font-family:var(--fb); font-size:9.5px; font-weight:700; letter-spacing:1px; opacity:.55; }
.s2-fld-v { font-family:var(--fd); font-size:15px; line-height:1.25; margin-top:3px; }
.s2-fld-v.ph { opacity:.32; }
.s2-ans { display:flex; align-items:center; gap:9px; border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink);
          padding:9px 11px; background:var(--paper); color:var(--ink); }
.s2-ans .lt { width:26px; height:26px; border:3px solid var(--ink); display:grid; place-items:center;
              font-family:var(--fd); font-size:13px; flex:0 0 auto; }
.s2-ans .tx { font-family:var(--fd); font-size:14px; flex:1; }
.s2-ans.good { box-shadow:4px 4px 0 var(--green); }
.s2-ans .lt.a { background:var(--red); } .s2-ans .lt.b { background:var(--blue); }
.s2-ans .lt.c { background:var(--yellow); } .s2-ans .lt.d { background:var(--green); }

/* ---------- fiches de quiz ---------- */
.s2-quiz { display:flex; gap:11px; border:3px solid var(--ink); background:var(--paper);
           box-shadow:5px 5px 0 var(--ink); padding:11px; color:var(--ink); }
.s2-quiz-cv { width:58px; height:58px; border:3px solid var(--ink); display:grid; place-items:center;
              font-size:26px; flex:0 0 auto; }
.s2-quiz-nm { font-family:var(--fd); font-size:15px; line-height:1.1; }
.s2-quiz-by { font-family:var(--fb); font-size:10px; font-weight:700; opacity:.6; margin-top:3px; }
.s2-quiz-st { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.s2-mini { font-family:var(--fb); font-size:9.5px; font-weight:700; border:2px solid var(--ink);
           padding:1px 5px 2px; background:var(--paper); color:var(--ink); }

/* ============================================================
   AU-DELÀ DE LA MAQUETTE : l'éditeur doit vraiment s'éditer
   ============================================================ */
/* boutons-puces et mini-boutons cliquables (même look que .s2-chip / .s2-mini) */
button.s2-chip, button.s2-mini { cursor:pointer; font-family:var(--fd); }
button.s2-mini { font-family:var(--fb); }
.s2-chip:active, .s2-type:active, .s2-btn:active, .s2-back:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }

/* champs de saisie : même typo que la valeur affichée dans la maquette */
.s2 .at-in { display:block; width:100%; border:0; outline:0; background:transparent; padding:0; margin:0;
             font-family:var(--fd); font-size:15px; line-height:1.25; color:var(--ink); resize:none; }
.s2 .at-in::placeholder { font-family:var(--fb); font-size:12px; font-weight:600; color:var(--ink); opacity:.35; }
.s2 .s2-fld .at-in { margin-top:3px; }
.s2 .s2-ans .at-in { flex:1; min-width:0; font-size:14px; }
.s2 .s2-fld:focus-within, .s2 .s2-ans:focus-within { box-shadow:4px 4px 0 var(--magenta); }
.s2 .s2-ans.good:focus-within { box-shadow:4px 4px 0 var(--green); }
.s2 textarea.at-in { min-height:40px; }
.s2-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.s2-ans .lt.x { background:var(--paper); }
.s2-ans .lt.n { background:var(--gray2); }
/* case « bonne réponse » des CHOIX MULTIPLES : vide = pas bonne, coche verte = bonne */
.at-box { width:22px; height:22px; border:3px solid var(--ink); background:var(--paper); flex:0 0 auto; cursor:pointer; padding:0; }
.at-box.s2-tick { background:var(--green); }
.at-del { border:0; background:transparent; font-family:var(--fd); font-size:15px; color:var(--red); cursor:pointer; padding:0 2px; flex:0 0 auto; }
.at-add { align-self:flex-start; }

/* deux gros choix (VRAI/FAUX, PLUS/MOINS) */
.at-duo { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.at-duo button { border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); background:var(--paper); color:var(--ink);
                 font-family:var(--fd); font-size:18px; letter-spacing:.6px; padding:14px 6px; cursor:pointer; }
.at-duo button.on { background:var(--green); box-shadow:2px 2px 0 var(--ink); transform:translate(2px,2px); }

/* photo : vignette + choix de la source */
.at-photo { display:flex; gap:11px; align-items:center; }
.at-thumb { width:64px; height:64px; border:3px solid var(--ink); flex:0 0 auto; display:grid; place-items:center;
            overflow:hidden; background:var(--gray2); font-size:26px; }
.at-thumb img, .at-thumb .media-img { width:100%; height:100%; object-fit:cover; display:block; }
.at-thumb .media-emoji { font-size:32px; display:grid; place-items:center; width:100%; height:100%; }
.at-thumb .media-emoji img { width:44px; height:44px; }
.at-src { display:flex; gap:7px; flex-wrap:wrap; margin-top:7px; }
.at-src .s2-chip.on { background:var(--yellow); }
.at-busy { opacity:.55; pointer-events:none; }
.at-4 { display:grid; grid-template-columns:1fr 1fr; gap:9px; }

/* emojis saisis (rébus, mémoire…) : aperçu animé */
.at-emos { display:flex; gap:8px; flex-wrap:wrap; margin-top:7px; min-height:10px; }
.at-emos span { width:44px; height:44px; border:3px solid var(--ink); background:var(--paper); display:grid; place-items:center; cursor:default; }
.at-emos span img { width:30px; height:30px; }
.at-emos.pick span { cursor:pointer; box-shadow:3px 3px 0 var(--ink); }
.at-emos.pick span.on { background:var(--green); box-shadow:1px 1px 0 var(--ink); transform:translate(2px,2px); }

/* TROUVE SUR L'IMAGE : la zone à toucher, posée au doigt */
.at-hot { position:relative; border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); background:var(--gray2);
          overflow:hidden; touch-action:manipulation; cursor:crosshair; }
.at-hot img, .at-hot .media-img { display:block; width:100%; height:auto; }
.at-hot .media-emoji { display:grid; place-items:center; aspect-ratio:1; font-size:120px; }
.at-hot .media-emoji img { width:60%; height:auto; }
.at-hot i { position:absolute; border:4px solid var(--magenta); background:rgba(255,46,147,.22); pointer-events:none; }

/* récap : liste des questions */
.at-qrow { display:flex; align-items:center; gap:9px; border:3px solid var(--ink); background:var(--paper);
           box-shadow:4px 4px 0 var(--ink); padding:8px 10px; color:var(--ink); cursor:pointer; }
.at-qrow.todo { box-shadow:4px 4px 0 var(--orange); }
.at-qrow .n { font-family:var(--fd); font-size:12px; width:26px; flex:0 0 auto; }
.at-qrow .e { font-size:17px; flex:0 0 auto; }
.at-qrow .t { font-family:var(--fd); font-size:13px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.at-title { font-family:var(--fd); font-size:15px; line-height:1.1; }
.s2-quiz-cv.at-cv { cursor:pointer; }
.at-empty { border:3px dashed var(--ink); padding:14px; font-family:var(--fb); font-size:11px; font-weight:600; line-height:1.5; color:var(--ink); text-align:center; }

/* APERÇU : la question telle qu'elle tombera en partie (plein écran, retiré du DOM à la fermeture) */
.at-prev { position:fixed; inset:0; z-index:4000; background:rgba(10,10,10,.72); display:flex; align-items:center; justify-content:center; padding:16px; }
.at-prev-card { width:100%; max-width:440px; max-height:100%; overflow:auto; background:var(--paper); color:var(--ink); border:4px solid var(--ink); box-shadow:7px 7px 0 var(--magenta); padding:16px; display:flex; flex-direction:column; gap:12px; }
.at-prev-q { font-family:var(--fd); font-size:21px; line-height:1.2; }
.at-prev-m { display:grid; place-items:center; }
.at-prev-m .media-img { max-width:100%; max-height:220px; border:3px solid var(--ink); }
.at-prev-m .media-emoji { font-size:80px; }
.at-prev-m .media-emoji img, .at-prev-m .noto { width:84px; height:84px; }
.at-prev-a { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.at-prev-a div { border:3px solid var(--ink); padding:12px 8px; font-family:var(--fd); font-size:14px; text-align:center; color:#fff; box-shadow:3px 3px 0 var(--ink); }
.at-prev-a div.good { outline:4px solid var(--green); outline-offset:2px; }