/* STP — Ta brochure, s'il te plaît ! */
:root {
  --encre: #2a2420;
  --orange: #f7921c;
  --orange-fonce: #c4650a;
  --creme: #fffaf0;
  --papier: #fffdf7;
  --gris-txt: #6b5f55;
  --pixel: 'Pixelify Sans', ui-monospace, 'Courier New', monospace;
  --texte: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background: linear-gradient(180deg, #dedede 0%, #d3d3d3 50%, #c3c3c3 100%) fixed;
  color: var(--encre);
  font-family: var(--texte);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.stp { max-width: 980px; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 16px 28px; font-family: var(--pixel); }

/* ---------- En-tête ---------- */
.entete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.logo { font-family: var(--texte); font-weight: 700; font-size: 22px; color: #111; text-decoration: none; letter-spacing: -0.01em; }
.logo span { font-size: 13px; }
.jeu-titre { font-size: 15px; color: var(--gris-txt); }

/* ---------- Barre d'infos ---------- */
.hud { display: flex; gap: 8px; margin-bottom: 8px; align-items: stretch; flex-wrap: wrap; }
.pan { background: var(--creme); border: 2px solid var(--encre); border-bottom-width: 4px; border-radius: 6px; padding: 3px 10px; font-size: 15px; line-height: 1.25; text-align: left; }
.pan small { display: block; font-size: 12px; color: var(--orange-fonce); }
.pan.quete { flex: 1 1 220px; }
.pan.petit { min-width: 64px; }
.pan.mail { cursor: pointer; position: relative; background: #fff1df; animation: appel 1.2s ease-in-out infinite; }
.pan.mail .pastille { position: absolute; top: -6px; right: -6px; width: 14px; height: 14px; border-radius: 50%; background: #e24b4a; border: 2px solid var(--encre); }
@keyframes appel { 50% { transform: translateY(-2px); } }

/* ---------- Écran ---------- */
.ecr { position: relative; border: 3px solid var(--encre); border-radius: 10px; overflow: hidden; background: var(--encre); outline: none; }
.ecr:focus-visible { box-shadow: 0 0 0 3px var(--orange); }
.ecr canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; }

.dlg { position: absolute; left: 8px; right: 8px; bottom: 8px; background: var(--creme); border: 3px solid var(--encre); border-bottom-width: 5px; border-radius: 8px; padding: 8px 12px 10px; cursor: pointer; }
.dlg .qui { display: inline-block; background: var(--orange); border: 2px solid var(--encre); border-radius: 5px; padding: 0 8px; font-size: 14px; margin: -22px 0 4px; }
.dlg p { margin: 0; font-size: 17px; line-height: 1.35; min-height: 44px; }
.dlg .suite { position: absolute; right: 12px; bottom: 6px; font-size: 13px; color: var(--orange-fonce); }
.choix { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

.btn, .choix button, .go {
  font-family: var(--pixel); font-size: 16px; background: var(--orange); color: var(--encre);
  border: 2px solid var(--encre); border-bottom-width: 4px; border-radius: 6px; padding: 6px 16px; cursor: pointer;
}
.btn:hover, .choix button:hover, .go:hover { filter: brightness(1.05); }
.btn:active, .choix button:active, .go:active { transform: translateY(2px); border-bottom-width: 2px; }
.btn.b2, .choix button.b2 { background: var(--creme); }
.btn:focus-visible, .choix button:focus-visible, .go:focus-visible { outline: 3px solid #111; outline-offset: 2px; }

.voile { position: absolute; inset: 0; background: rgba(42, 36, 32, .72); display: flex; align-items: center; justify-content: center; padding: 14px; }
.carte { background: var(--creme); border: 3px solid var(--encre); border-bottom-width: 6px; border-radius: 10px; padding: 16px 20px; text-align: center; max-width: 340px; width: 100%; }
.carte .tit { font-size: 40px; line-height: 1; margin: 0; font-weight: 600; letter-spacing: 2px; }
.carte .tit::first-letter { color: var(--encre); }
.carte .sous { font-size: 16px; margin: 4px 0 8px; color: var(--orange-fonce); }
.carte .intro { font-family: var(--texte); font-size: 13px; line-height: 1.45; color: var(--gris-txt); margin: 0 0 12px; }
.carte input { width: 100%; font-family: var(--pixel); font-size: 18px; text-align: center; padding: 7px; border: 2px solid var(--encre); border-radius: 6px; background: #fff; }
.carte input:focus { outline: 3px solid var(--orange); }
.carte .err { font-size: 13px; color: #b3261e; min-height: 18px; margin: 4px 0 6px; font-family: var(--texte); }

.bandeau { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: #f2c230; border: 2px solid var(--encre); border-bottom-width: 4px; border-radius: 6px; padding: 2px 12px; font-size: 15px; white-space: nowrap; }

/* ---------- Inventaire ---------- */
.inv { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; min-height: 30px; align-items: center; }
.inv .lib { font-size: 13px; color: var(--gris-txt); margin-right: 2px; }
.inv .obj { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 2px solid var(--encre); border-radius: 14px; padding: 2px 10px 2px 6px; font-size: 14px; animation: arrive .35s ease; }
.inv .obj i { width: 12px; height: 12px; border: 2px solid var(--encre); border-radius: 3px; display: inline-block; }
@keyframes arrive { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Commandes ---------- */
.ctl { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 12px; }
.pad { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(2, 42px); gap: 5px; }
.pad button { border: 2px solid var(--encre); border-bottom-width: 4px; border-radius: 6px; background: var(--creme); font-size: 16px; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.pad button:active { background: #ffe0b3; }
.act { width: 84px; height: 84px; border-radius: 50%; font-family: var(--pixel); font-size: 22px; background: var(--orange); border: 2px solid var(--encre); border-bottom-width: 5px; cursor: pointer; touch-action: manipulation; user-select: none; }
.act:active { transform: translateY(2px); border-bottom-width: 3px; }
.aide { font-family: var(--texte); font-size: 12.5px; color: var(--gris-txt); text-align: center; flex: 1; line-height: 1.5; margin: 0; }
@media (hover: hover) and (pointer: fine) { .pad { opacity: .85; } }

/* ---------- Fiches ---------- */
.fiche { margin-top: 12px; background: var(--papier); border: 3px solid var(--encre); border-bottom-width: 6px; border-radius: 10px; overflow: hidden; font-family: var(--texte); animation: arrive .3s ease; }
.fiche .ent { background: var(--orange); border-bottom: 3px solid var(--encre); padding: 8px 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-family: var(--pixel); flex-wrap: wrap; }
.fiche .ent b { font-size: 19px; font-weight: 500; }
.fiche .ent span { font-size: 13px; }
.fiche .corps { padding: 12px 14px 14px; font-size: 14px; line-height: 1.55; }
.fiche .corps > p { margin: 0 0 8px; }
.fiche table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fiche td { padding: 5px 6px; border-bottom: 1px dashed #d8cdb8; vertical-align: top; }
.fiche td:first-child { color: #7a6a58; width: 38%; }
.fiche .note { font-size: 12.5px; color: #7a6a58; margin: 6px 0 0; }
.savais { margin-top: 12px; background: #eef6fb; border: 2px solid var(--encre); border-radius: 6px; padding: 8px 10px; font-size: 13.5px; line-height: 1.5; color: #1d3a50; }
.savais b { font-family: var(--pixel); font-weight: 500; color: #0a6fa0; margin-right: 4px; }
.fiche .pied { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.message { font-size: 13.5px; min-height: 20px; margin: 8px 0 0; color: #a14d00; font-weight: 600; }

.etapes { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.etapes span { border: 2px solid var(--encre); border-radius: 5px; padding: 2px 8px; font-size: 12.5px; background: #fff; font-family: var(--pixel); }
.etapes span.ok { background: #bfe5c8; }
.etapes span.cours { background: #ffe0b3; }

/* Imposition */
.feuilles { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 2px; }
.feuille { flex: 1; min-width: 150px; }
.feuille p { margin: 0 0 4px; font-size: 12.5px; color: #7a6a58; }
.grille { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--encre); background: #fff; }
.grille.g2 { grid-template-columns: repeat(2, 1fr); }
.grille div { border: 1px solid #cfc4b0; height: 34px; display: flex; align-items: center; justify-content: center; font-family: var(--pixel); font-size: 15px; }
.grille div.inv { transform: rotate(180deg); color: #a14d00; }
.grille div.couv { background: #ffe0b3; font-size: 13px; }

/* Phases */
.phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.phase { border: 2px solid var(--encre); border-radius: 6px; padding: 6px 8px; font-size: 13px; line-height: 1.45; background: #fff; }
.phase b { display: block; font-family: var(--pixel); font-weight: 500; font-size: 15px; margin-bottom: 2px; }
.ph1 { border-top: 6px solid #009fe3; } .ph2 { border-top: 6px solid #e5007d; } .ph3 { border-top: 6px solid #f2c230; }

/* Dépôt PDF */
.fichier { display: flex; align-items: center; gap: 12px; border: 2px solid var(--encre); border-radius: 8px; padding: 10px; background: #fff; }
.fichier .ico { width: 38px; height: 46px; border: 2px solid var(--encre); border-radius: 3px; background: #fff; position: relative; flex: none; }
.fichier .ico::after { content: 'PDF'; position: absolute; left: -2px; right: -2px; bottom: 6px; background: #e24b4a; color: #fff; font: 10px var(--pixel); text-align: center; }
.fichier .inf { flex: 1; min-width: 0; }
.fichier .inf b { display: block; font-family: var(--pixel); font-weight: 500; font-size: 15px; }
.barre { height: 10px; border: 2px solid var(--encre); border-radius: 6px; background: #fff; overflow: hidden; margin-top: 6px; }
.barre i { display: block; height: 100%; width: 0; background: var(--orange); transition: width .2s linear; }

/* Contrôle du fichier */
.controle { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: start; }
.apercu { --grad: linear-gradient(135deg, #f7921c 0 40%, #e5007d 40% 70%, #009fe3 70%); border: 2px solid var(--encre); background: #fff; padding: 8px; position: relative; aspect-ratio: 210 / 297; }
.apercu.rvb { --grad: linear-gradient(135deg, #ff6a00 0 40%, #ff00b4 40% 70%, #00c8ff 70%); }
.apercu .photo { position: relative; height: 55%; border: 1px solid #ccc; background: var(--grad); }
.apercu.flou .photo::after { content: ''; position: absolute; inset: 0; background-size: 14px 14px; background-image: linear-gradient(45deg, rgba(0,0,0,.2) 25%, transparent 25% 50%, rgba(0,0,0,.2) 50% 75%, transparent 75%); }
.apercu .titre { height: 10px; background: #2a2420; margin: 10px 0 6px; width: 70%; }
.apercu .ligne { height: 4px; background: #c9c1b0; margin: 4px 0; }
.apercu.sansfp::after { content: ''; position: absolute; inset: 4px; border: 2px dashed #e24b4a; pointer-events: none; }
.apercu.avecfp::after { content: ''; position: absolute; inset: -6px; border: 2px dashed #3fae5a; pointer-events: none; }
.verifs { display: grid; gap: 6px; }
.verif { display: flex; justify-content: space-between; gap: 10px; align-items: center; text-align: left; background: #fff; border: 2px solid var(--encre); border-radius: 6px; padding: 6px 10px; cursor: pointer; font-family: var(--texte); font-size: 13.5px; }
.verif:hover { background: #fff7ea; }
.verif b { font-family: var(--pixel); font-weight: 500; font-size: 14px; white-space: nowrap; }
.verif.trouve { background: #e8f4ea; border-color: #2f7a3e; cursor: default; }
.verif.trouve b { color: #2f7a3e; }
.verif.bon { animation: secoue .3s; }
@keyframes secoue { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.compteur { font-family: var(--pixel); font-size: 15px; margin: 8px 0 0; }

/* Messagerie (BAT) */
.mailbox { border: 2px solid var(--encre); border-radius: 8px; background: #fff; overflow: hidden; }
.mailbox .mh { padding: 8px 12px; border-bottom: 1px solid #e3dccd; font-size: 13px; line-height: 1.5; }
.mailbox .mh b { font-weight: 600; }
.mailbox .mb { padding: 10px 12px; font-size: 14px; }
.vignettes { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.vignette { width: 92px; text-align: center; font-size: 12px; color: #7a6a58; }
.vignette div { height: 110px; border: 2px solid var(--encre); background: #fff; margin-bottom: 4px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; font-family: var(--pixel); font-size: 13px; color: var(--encre); padding: 4px; text-align: center; }
.vignette .couverture { background: var(--orange); }

/* CTP */
.slots { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.slot { width: 74px; height: 50px; border: 2px dashed #9a8f80; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: var(--pixel); font-size: 13px; color: #9a8f80; }
.slot.plein { border-style: solid; border-color: var(--encre); color: var(--encre); }
.plaques { display: flex; gap: 8px; flex-wrap: wrap; }
.plaque { width: 74px; height: 50px; border: 2px solid var(--encre); border-bottom-width: 4px; border-radius: 6px; background: linear-gradient(180deg, #e8ecef, #c8cdd2); cursor: pointer; font-family: var(--pixel); font-size: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.plaque i { width: 34px; height: 8px; border: 1px solid var(--encre); }
.plaque[disabled] { opacity: .3; cursor: default; }

/* Animations machines */
.presse { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 0; position: relative; }
.groupe { border: 2px solid var(--encre); border-radius: 6px; background: #dfe3e7; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; font-family: var(--pixel); font-size: 13px; padding-bottom: 4px; }
.groupe i { display: block; width: 70%; height: 10px; border: 2px solid var(--encre); margin-bottom: 6px; }
.groupe.actif { background: #fff1df; }
.piste { position: relative; height: 54px; margin-top: 6px; border-top: 2px dashed #b9b0a0; }
.fe { position: absolute; top: 8px; left: 0; width: 60px; height: 38px; border: 2px solid var(--encre); background: #fff; transition: left .45s ease; display: flex; overflow: hidden; }
.fe span { flex: 1; }
.resultats { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.resultat { flex: 1; min-width: 160px; }
.resultat p { margin: 0 0 4px; font-size: 12.5px; color: #7a6a58; }

.pipeline { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0 0; }
.pipeline span { flex: 1 1 80px; border: 2px solid var(--encre); border-radius: 6px; padding: 8px 4px; text-align: center; background: #fff; font-family: var(--pixel); font-size: 13px; transition: background .2s; }
.pipeline span.actif { background: #ffe0b3; }
.pipeline span.fait { background: #bfe5c8; }
.cartouche { display: inline-flex; gap: 2px; margin-top: 8px; padding: 6px; border: 2px solid var(--encre); border-radius: 6px; background: #fff; }
.cartouche i { width: 8px; height: 46px; background: #fff; border: 1px solid #9a8f80; display: block; }

/* Massicot */
.massi { position: relative; width: min(280px, 100%); aspect-ratio: 4 / 3; margin: 10px auto; }
.massi .pose { position: absolute; width: 50%; height: 50%; padding: 6px; transition: transform .4s ease; }
.massi .pose div { height: 100%; background: var(--orange); border: 2px solid var(--encre); display: flex; align-items: center; justify-content: center; font-family: var(--pixel); font-size: 13px; text-align: center; padding: 4px; }
.massi .p1 { left: 0; top: 0; } .massi .p2 { left: 50%; top: 0; } .massi .p3 { left: 0; top: 50%; } .massi .p4 { left: 50%; top: 50%; }
.massi.coupe-v .p1, .massi.coupe-v .p3 { transform: translateX(-8px); }
.massi.coupe-v .p2, .massi.coupe-v .p4 { transform: translateX(8px); }
.massi.coupe-v.coupe-h .p1 { transform: translate(-8px, -8px); } .massi.coupe-v.coupe-h .p2 { transform: translate(8px, -8px); }
.massi.coupe-v.coupe-h .p3 { transform: translate(-8px, 8px); } .massi.coupe-v.coupe-h .p4 { transform: translate(8px, 8px); }
.massi.coupe-h:not(.coupe-v) .p1, .massi.coupe-h:not(.coupe-v) .p2 { transform: translateY(-8px); }
.massi.coupe-h:not(.coupe-v) .p3, .massi.coupe-h:not(.coupe-v) .p4 { transform: translateY(8px); }
.massi .trait { position: absolute; background: transparent; border: 0; padding: 0; cursor: crosshair; z-index: 2; }
.massi .trait::after { content: ''; position: absolute; background: #e24b4a; opacity: .55; }
.massi .trait:hover::after, .massi .trait:focus-visible::after { opacity: 1; }
.massi .tv { left: calc(50% - 10px); top: -10px; bottom: -10px; width: 20px; }
.massi .tv::after { left: 9px; top: 0; bottom: 0; width: 2px; }
.massi .th { top: calc(50% - 10px); left: -10px; right: -10px; height: 20px; }
.massi .th::after { top: 9px; left: 0; right: 0; height: 2px; }
.massi .trait.fait { display: none; }

/* Plieuse */
.plis { display: flex; align-items: center; justify-content: center; min-height: 150px; margin: 8px 0; }
.plis .feuilleP { display: grid; border: 2px solid var(--encre); background: #fff; transition: all .35s ease; }
.plis .feuilleP div { border: 1px dashed #cfc4b0; display: flex; align-items: center; justify-content: center; font-family: var(--pixel); font-size: 12px; color: #a14d00; }
.etat-pli { text-align: center; font-family: var(--pixel); font-size: 15px; margin: 0 0 6px; }

/* Primera */
.chaine { display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; min-height: 96px; margin: 8px 0; }
.chaine .elt { border: 2px solid var(--encre); height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: var(--pixel); font-size: 12px; background: #fff; animation: arrive .3s ease; }
.chaine .selle { width: 200px; height: 12px; background: #5c6670; border: 2px solid var(--encre); border-radius: 3px; }
.agrafes { display: flex; justify-content: center; gap: 40px; margin: 4px 0; }
.agrafes i { width: 18px; height: 4px; background: #7d858d; border: 1px solid var(--encre); display: block; }

/* Emballage, palettes, camion */
.cartons-grille { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin: 10px 0; }
.cartons-grille i { aspect-ratio: 1; border: 2px solid var(--encre); background: #f1ebde; display: block; border-radius: 2px; transition: background .2s; }
.cartons-grille i.plein { background: #c8a26b; }
.etiquette { border: 2px solid var(--encre); background: #fff; padding: 8px 10px; font-size: 13px; max-width: 320px; margin: 8px 0; }
.etiquette .eh { display: flex; justify-content: space-between; font-family: var(--pixel); font-size: 15px; border-bottom: 2px solid var(--encre); padding-bottom: 4px; margin-bottom: 6px; }
.etiquette .code { height: 22px; margin-top: 6px; background: repeating-linear-gradient(90deg, #111 0 2px, #fff 2px 3px, #111 3px 4px, #fff 4px 6px, #111 6px 9px, #fff 9px 10px); }
.camion-grille { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 22px); gap: 3px; padding: 6px; border: 3px solid var(--encre); border-radius: 6px; background: #f4f2ec; overflow-x: auto; margin: 8px 0; }
.camion-grille i { width: 22px; border: 2px solid #c9c1b0; border-radius: 2px; display: block; }
.camion-grille i.plein { background: #c8a26b; border-color: var(--encre); }

/* Fin */
.fin-grille { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: start; }
.brochure { aspect-ratio: 210 / 297; background: var(--orange); border: 3px solid var(--encre); box-shadow: 6px 6px 0 #c4650a, 6px 6px 0 2px var(--encre); padding: 12px 10px; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--pixel); }
.brochure .bt { font-size: 28px; line-height: 1; }
.brochure .bn { font-size: 15px; background: var(--creme); border: 2px solid var(--encre); padding: 4px; text-align: center; word-break: break-word; }
.brochure .bp { font-size: 12px; text-align: right; }
.score { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.score span { border: 2px solid var(--encre); border-radius: 6px; padding: 4px 10px; background: #fff; font-family: var(--pixel); font-size: 15px; }
.recap { columns: 2; column-gap: 18px; padding-left: 18px; margin: 8px 0 0; font-size: 13px; }
.recap li { margin-bottom: 2px; }

@media (max-width: 600px) {
  .stp { padding: max(8px, env(safe-area-inset-top)) 8px 20px; }
  .entete .jeu-titre { display: none; }
  .pan { font-size: 13px; padding: 2px 8px; }
  .pan.quete { flex-basis: 100%; }
  #parcours { flex: 1 1 100%; }
  .pan.petit { flex: 1 1 0; min-width: 0; }
  .dlg p { font-size: 15px; min-height: 40px; }
  .phases, .controle, .fin-grille { grid-template-columns: 1fr; }
  .apercu { width: 130px; }
  .brochure { width: 150px; }
  .recap { columns: 1; }
  .pad { grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(2, 46px); }
  .act { width: 88px; height: 88px; }
  .aide { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Visite du service numérique : impression de données variables ---------- */
.cartesV { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 10px 0; }
.carteV { background: #fff; border: 2px solid var(--encre); border-radius: 6px; padding: 6px 4px 5px; text-align: center; font-size: 13px; line-height: 1.2;
  border-top: 8px solid var(--c, var(--orange)); opacity: 0; transform: translateY(-10px) scale(.9); transition: opacity .25s, transform .25s; }
.carteV.sort { opacity: 1; transform: none; }
.carteV b { display: block; font-size: 15px; }
.carteV span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carteV i { display: block; font-style: normal; color: var(--gris-txt); font-size: 12px; }
@media (max-width: 560px) { .cartesV { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================
   1.4.0 — Style RPG années 2000 : fenêtres bleues dégradées,
   portraits, choix du personnage, nouveaux mini-jeux
   ========================================================= */
.ecr { border-radius: 12px; box-shadow: 0 6px 0 rgba(0,0,0,.18), 0 14px 30px rgba(0,0,0,.22); }
.dlg {
  left: 10px; right: 10px; bottom: 10px; color: #fff;
  background: linear-gradient(180deg, rgba(58,92,170,.97) 0%, rgba(30,52,118,.97) 55%, rgba(22,36,86,.97) 100%);
  border: 3px solid #f4f0ff; border-radius: 10px; padding: 10px 16px 12px;
  box-shadow: 0 0 0 2px #1a2450, inset 0 0 0 1px rgba(255,255,255,.25), inset 0 12px 18px rgba(255,255,255,.12), 0 6px 14px rgba(0,0,0,.35);
  text-shadow: 1px 1px 0 #10183a;
}
.dlg.avec-portrait { padding-left: 98px; min-height: 104px; }
.dlg .portrait {
  position: absolute; left: 12px; top: 12px; width: 76px; height: 76px; image-rendering: pixelated;
  background: radial-gradient(circle at 50% 35%, #ffe9b8 0%, #f7b45a 55%, #d9822a 100%);
  border: 2px solid #f4f0ff; border-radius: 8px; box-shadow: 0 0 0 2px #1a2450, inset 0 0 8px rgba(0,0,0,.25);
}
.dlg .qui {
  background: linear-gradient(180deg, #ffb24a, #e8801a); color: #2a1404; text-shadow: none;
  border: 2px solid #f4f0ff; box-shadow: 0 0 0 2px #1a2450; border-radius: 6px; margin: -26px 0 6px; font-size: 15px; padding: 1px 10px;
}
.dlg p { font-size: 18px; line-height: 1.4; min-height: 50px; }
.dlg .suite { color: #ffd27a; animation: rebond .8s ease-in-out infinite; }
@keyframes rebond { 50% { transform: translateY(3px); } }
.dlg .choix button { background: linear-gradient(180deg, #ffb24a, #e8801a); text-shadow: none; }
.dlg .choix button.b2 { background: linear-gradient(180deg, #ffffff, #dfe6ff); }
.bandeau { background: linear-gradient(180deg, rgba(58,92,170,.95), rgba(26,44,104,.95)); color: #fff; border: 2px solid #f4f0ff; box-shadow: 0 0 0 2px #1a2450; text-shadow: 1px 1px 0 #10183a; top: 12px; }
.voile { background: radial-gradient(circle at 50% 40%, rgba(30,40,90,.55), rgba(16,18,40,.85)); }
.carte {
  color: #fff; max-width: 400px; text-shadow: 1px 1px 0 #10183a;
  background: linear-gradient(180deg, rgba(58,92,170,.97), rgba(22,36,86,.97));
  border: 3px solid #f4f0ff; border-radius: 12px; box-shadow: 0 0 0 3px #1a2450, inset 0 14px 20px rgba(255,255,255,.12), 0 10px 30px rgba(0,0,0,.45);
}
.carte .tit { color: #ffb24a; text-shadow: 2px 2px 0 #5a2a08, 0 0 18px rgba(255,170,60,.45); font-size: 46px; }
.carte .tit::first-letter { color: #ffb24a; }
.carte .sous { color: #ffe0a8; }
.carte .intro { color: #dfe6ff; text-shadow: none; }
.carte input { color: var(--encre); }
.carte .err { color: #ffb0a8; }
.carte .choisis { margin: 0 0 6px; font-size: 14px; color: #ffe0a8; }
.avatars { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; flex-wrap: wrap; }
.avatar { width: 46px; height: 60px; padding: 2px; border-radius: 8px; border: 2px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); cursor: pointer; }
.avatar canvas { width: 38px; height: 54px; image-rendering: pixelated; display: block; margin: 0 auto; }
.avatar.choisi { border-color: #ffb24a; background: rgba(255,178,74,.25); box-shadow: 0 0 0 2px #1a2450, 0 0 12px rgba(255,178,74,.6); }
.avatar:focus-visible { outline: 3px solid #fff; }
.go { background: linear-gradient(180deg, #ffb24a, #e8801a); }

/* Nouveaux mini-jeux */
.consigne { font-family: var(--pixel); font-size: 16px; background: #fff4de; border-left: 4px solid var(--orange); padding: 6px 10px; border-radius: 4px; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.puce { font-family: var(--pixel); font-size: 15px; padding: 6px 12px; border: 2px solid var(--encre); border-bottom-width: 4px; border-radius: 18px; background: #fff; cursor: pointer; }
.puce:hover { background: #fff4de; }
.puce.on { background: #3fae5a; color: #fff; }
.puce.on::before { content: '✓ '; }
.puce.non { background: #e24b4a; color: #fff; animation: secoue .4s; }
.puce:disabled { cursor: default; opacity: .85; }
@keyframes secoue { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.saisie { display: grid; gap: 8px; margin: 8px 0; }
.ligne-saisie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ligne-saisie > span { min-width: 150px; font-family: var(--pixel); font-size: 15px; }
.bat-page { max-width: 260px; margin: 10px auto; background: #fff; border: 2px solid var(--encre); border-radius: 4px; padding: 14px 12px; text-align: center; box-shadow: 4px 4px 0 rgba(0,0,0,.12); transition: transform .3s; }
.bat-page.nouveau { animation: arrive .5s ease; border-color: #3fae5a; }
.bat-titre { font-family: var(--pixel); font-size: 34px; color: #f7921c; line-height: 1; }
.bat-nom { font-family: var(--pixel); font-size: 17px; margin: 6px 0 10px; }
.bat-texte { line-height: 2; }
.mot { font: inherit; font-size: 14px; border: 0; background: none; padding: 1px 2px; cursor: pointer; border-radius: 3px; }
.mot:hover { background: #fff4de; }
.mot.faute { background: #e24b4a; color: #fff; text-decoration: line-through; }
.mot.corrige { background: #3fae5a; color: #fff; }
.bat-v { margin-top: 8px; font-size: 12px; color: var(--gris-txt); }
.calage { display: grid; gap: 8px; margin: 10px 0; }
.encrier { display: grid; grid-template-columns: 80px 34px 1fr 34px; gap: 8px; align-items: center; }
.encrier b { font-family: var(--pixel); font-weight: 500; font-size: 15px; display: flex; gap: 6px; align-items: center; }
.encrier b::before { content: ''; width: 14px; height: 14px; border: 2px solid var(--encre); border-radius: 3px; background: var(--c); }
.encrier button { height: 32px; font-family: var(--pixel); font-size: 20px; border: 2px solid var(--encre); border-bottom-width: 4px; border-radius: 6px; background: #fff; cursor: pointer; }
.piste-encre { position: relative; height: 22px; border: 2px solid var(--encre); border-radius: 6px; background: #f2eee6; overflow: hidden; }
.piste-encre .zone { position: absolute; left: 45%; width: 10%; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, #b8e6c2 0 4px, #9fdcae 4px 8px); }
.piste-encre .niveau { position: absolute; left: 0; top: 4px; bottom: 4px; background: var(--c); opacity: .85; border-radius: 0 4px 4px 0; transition: width .2s; }
.encrier.juste .piste-encre { border-color: #3fae5a; box-shadow: 0 0 0 2px #b8e6c2; }
.timing { position: relative; height: 34px; margin: 12px 0; border: 2px solid var(--encre); border-radius: 8px; background: linear-gradient(90deg, #f6c4c0, #fff2d6 30%, #fff2d6 70%, #f6c4c0); overflow: hidden; }
.timing .zone { position: absolute; left: 38%; width: 24%; top: 0; bottom: 0; background: #9fdcae; }
.timing .repere { position: absolute; top: 2px; bottom: 2px; width: 6px; margin-left: -3px; background: var(--encre); border-radius: 3px; box-shadow: 0 0 0 2px #fff; }
.carton-jeu { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin: 10px 0; }
.carton { position: relative; width: 120px; height: 120px; border: 3px solid #7a5a30; border-top-width: 0; background: #e8d4a8; border-radius: 0 0 6px 6px; overflow: hidden; }
.carton .trait { position: absolute; left: 0; right: 0; bottom: 85%; border-top: 2px dashed #a8432c; }
.carton .paquet { position: absolute; left: 8px; right: 8px; height: 15%; background: #fff; border: 2px solid var(--encre); border-top: 4px solid #f7921c; border-radius: 2px; }
.carton .paquet.trop { border-top-color: #e24b4a; background: #ffe2e0; }
.carton.ferme { border-top: 10px solid #c8a26b; }
.cmd { display: flex; flex-direction: column; gap: 8px; }
.pal-jeu { display: flex; justify-content: center; margin: 10px 0; }
.rangs { display: flex; flex-direction: column; gap: 3px; align-items: center; width: 180px; }
.rang { display: flex; gap: 3px; width: 168px; height: 30px; border: 0; padding: 0; background: none; cursor: pointer; }
.rang i { flex: 1; background: #c8a26b; border: 2px solid #7a5a30; border-radius: 2px; background-image: linear-gradient(90deg, transparent 45%, #e8d4a8 45% 55%, transparent 55%); }
.rang.tourne i { background-image: linear-gradient(0deg, transparent 40%, #e8d4a8 40% 60%, transparent 60%); }
.rang.fixe { cursor: default; }
.rang:not(.fixe):hover i { filter: brightness(1.08); }
.socle { width: 176px; height: 12px; background: repeating-linear-gradient(90deg, #b98a55 0 20px, #8a6236 20px 26px); border: 2px solid #5a3a1a; border-radius: 2px; }
.rangs.filme { filter: drop-shadow(0 0 6px rgba(140,200,255,.8)); }
.tournee { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--pixel); font-size: 14px; margin: 8px 0; }
.tournee span { background: #fff; border: 2px solid var(--encre); border-radius: 6px; padding: 2px 8px; }
.chargement { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.camion-fond { display: flex; flex-direction: row-reverse; gap: 4px; align-items: stretch; min-width: 240px; height: 48px; padding: 4px; border: 3px solid var(--encre); border-radius: 6px; background: #f4f2ec; }
.camion-fond .cab { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; background: #f7921c; border-radius: 4px; padding: 2px; display: flex; align-items: center; }
.camion-fond .bloc { flex: 0 0 60px; display: flex; align-items: center; justify-content: center; font-family: var(--pixel); font-size: 13px; background: #c8a26b; border: 2px solid #7a5a30; border-radius: 3px; animation: arrive .3s; }
.camion-fond { flex-direction: row; }
.camion-fond .cab { order: -1; }
.choix-pal { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 600px) {
  .dlg { position: relative; left: auto; right: auto; bottom: auto; margin: 14px 6px 6px; }
  .dlg.avec-portrait { padding-left: 74px; min-height: 84px; }
  .dlg .portrait { width: 54px; height: 54px; left: 10px; top: 12px; }
  .dlg p { font-size: 15px; }
  .encrier { grid-template-columns: 64px 30px 1fr 30px; }
  .ligne-saisie > span { min-width: 100%; }
}

/* 1.4.1 — Rotative couleur par couleur, Pantone */
.quadri { margin: 12px 0; padding: 10px; background: #1e2a44; border-radius: 10px; color: #fff; }
.quadri .message { color: #ffe0a8; min-height: 40px; }
.tours { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tours span { flex: 1 1 120px; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.18); font-family: var(--pixel); font-size: 14px; }
.tours span i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); border: 2px solid #fff; flex: none; }
.tours span.actif { background: rgba(255,178,74,.3); border-color: #ffb24a; animation: arrive .3s; }
.tours span.fait { background: rgba(63,174,90,.25); border-color: #3fae5a; }
.vues { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center; }
.vues figure { margin: 0; text-align: center; font-family: var(--pixel); font-size: 13px; color: #c8d4ff; }
.vues canvas { display: block; width: 200px; height: 140px; border: 3px solid #fff; border-radius: 4px; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.vues .fig-loupe canvas { width: 170px; height: 170px; border: 0; border-radius: 50%; background: none; box-shadow: none; }
.quadri .pied .btn { background: linear-gradient(180deg, #ffb24a, #e8801a); }
.pose.pantone, .couv.pantone { box-shadow: inset 0 6px 0 #ff6a00; }
.brochure.pantone { box-shadow: inset 0 -14px 0 #ff6a00, 6px 6px 0 rgba(0,0,0,.15); }
@media (max-width: 600px) { .vues canvas { width: 150px; height: 105px; } .vues .fig-loupe canvas { width: 140px; height: 140px; } }

/* 1.4.2 — Magasin papier et chariot */
.ligne-saisie small.vers { display: block; font-size: 12px; color: var(--gris-txt); }
.stocks { display: grid; gap: 8px; margin: 8px 0; }
.stockl { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: center; font-family: var(--pixel); font-size: 15px; }
.jauge { position: relative; height: 20px; border: 2px solid var(--encre); border-radius: 6px; background: #f2eee6; overflow: hidden; }
.jauge .niv { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #7fd08f, #3fae5a); transition: width 1.2s ease; }
.jauge .seuil { position: absolute; left: 25%; top: 0; bottom: 0; width: 3px; background: #e24b4a; z-index: 2; }
.stockl.alerte .niv { background: linear-gradient(180deg, #f6908a, #e24b4a); animation: clignote .8s infinite; }
@keyframes clignote { 50% { opacity: .55; } }
.charges { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.puce.sel { background: #ffb24a; box-shadow: 0 0 0 3px rgba(255,178,74,.4); }
.machines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; }
.machine { min-height: 86px; padding: 8px; border: 2px solid var(--encre); border-bottom-width: 4px; border-radius: 8px; background: linear-gradient(180deg, #eef1f4, #c8ced4); cursor: pointer; font-family: var(--pixel); text-align: center; }
.machine b { display: block; font-weight: 500; font-size: 16px; margin-bottom: 6px; }
.machine .depot { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.machine .depot i { font-style: normal; font-size: 12px; background: #c8a26b; border: 2px solid #7a5a30; border-radius: 3px; padding: 1px 5px; animation: arrive .3s; }
.machine.non { background: #f6c4c0; animation: secoue .4s; }
@media (max-width: 600px) { .stockl { grid-template-columns: 1fr; gap: 2px; } .machines { grid-template-columns: 1fr; } }

/* =========================================================
   1.5.0 — Commandes au choix, options, EPI, contrôle qualité,
   tri, finitions, imposition, diplôme, classement, borne
   ========================================================= */
.entete { align-items: center; }
.outils { display: flex; gap: 6px; margin-left: auto; }
.outil { font-family: var(--pixel); font-size: 13px; background: var(--creme); border: 2px solid var(--encre); border-bottom-width: 3px; border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.outil[aria-pressed="false"] { opacity: .7; }
.outil:focus-visible { outline: 3px solid var(--orange); }
.options { position: relative; z-index: 5; margin: 0 0 10px auto; max-width: 360px; padding: 10px 14px 12px; color: #fff; font-family: var(--texte); font-size: 14px;
  background: linear-gradient(180deg, rgba(58,92,170,.98), rgba(22,36,86,.98)); border: 3px solid #f4f0ff; border-radius: 10px; box-shadow: 0 0 0 2px #1a2450, 0 8px 18px rgba(0,0,0,.3); }
.options .o-tit { font-family: var(--pixel); font-size: 18px; margin: 0 0 6px; color: #ffb24a; }
.options label { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; cursor: pointer; line-height: 1.35; }
.options input { accent-color: var(--orange); width: 18px; height: 18px; flex: none; margin-top: 1px; }
.options fieldset { border: 1px solid rgba(255,255,255,.35); border-radius: 6px; margin: 8px 0; padding: 4px 10px; }
.options legend { font-family: var(--pixel); color: #ffe0a8; padding: 0 4px; }
.options .o-fermer { font-family: var(--pixel); background: linear-gradient(180deg, #ffb24a, #e8801a); border: 2px solid #f4f0ff; border-radius: 6px; padding: 3px 12px; cursor: pointer; color: #2a1404; }
.pan.epi { background: #dbe9fb; }
.pan.epi small { color: #1f5fa8; }

/* Carte de démarrage : commandes et niveau */
.voile { overflow-y: auto; align-items: flex-start; }
.carte { max-width: 560px; margin: auto 0; }
.commandes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.cmd-carte { position: relative; text-align: left; padding: 8px 10px 8px 44px; border-radius: 8px; border: 2px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; font-family: var(--texte); text-shadow: none; }
.cmd-carte b { display: block; font-family: var(--pixel); font-weight: 500; font-size: 15px; color: #ffe0a8; }
.cmd-carte span { display: block; font-size: 11.5px; line-height: 1.35; color: #dfe6ff; }
.cmd-carte small { display: block; font-size: 11px; color: #ffb24a; margin-top: 2px; }
.cmd-carte i { position: absolute; left: 9px; top: 10px; width: 26px; height: 32px; border: 2px solid #fff; border-radius: 3px; background: #f7921c; }
.cmd-carte .ico-affiche { background: linear-gradient(180deg, #009fe3 0 60%, #ffe600 60%); }
.cmd-carte .ico-etiquettes { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, #e5007d 31%); }
.cmd-carte .ico-depliant { width: 30px; background: linear-gradient(90deg, #3fae5a 0 33%, #fff 33% 35%, #8fd49f 35% 66%, #fff 66% 68%, #3fae5a 68%); }
.cmd-carte.choisi { border-color: #ffb24a; background: rgba(255,178,74,.22); box-shadow: 0 0 0 2px #1a2450, 0 0 12px rgba(255,178,74,.5); }
.cmd-carte.faite::after { content: '✓ faite'; position: absolute; right: 6px; top: 6px; font-family: var(--pixel); font-size: 11px; color: #9fe6b0; }
.cmd-carte:focus-visible { outline: 3px solid #fff; }
.niveaux { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 10px; text-align: left; }
.niveaux label { display: block; padding: 6px 8px 6px 30px; position: relative; border: 2px solid rgba(255,255,255,.35); border-radius: 8px; cursor: pointer; text-shadow: none; }
.niveaux input { position: absolute; left: 8px; top: 9px; width: auto; accent-color: var(--orange); }
.niveaux b { display: block; font-family: var(--pixel); font-weight: 500; font-size: 15px; color: #ffe0a8; }
.niveaux span { display: block; font-family: var(--texte); font-size: 11.5px; color: #dfe6ff; line-height: 1.35; }
.niveaux label:has(input:checked) { border-color: #ffb24a; background: rgba(255,178,74,.2); }
.qr-borne { display: none; }
body.borne .qr-borne { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 12px; font-family: var(--texte); font-size: 12px; color: #dfe6ff; }
.qr-borne canvas { width: 84px; height: 84px; border-radius: 4px; }
body.borne .entete .logo { pointer-events: none; }
body.mode-expert .aide-fleche { display: none; }
.borne-av { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); background: #fff1df; border: 2px solid var(--encre); border-radius: 8px; padding: 6px 12px; font-size: 15px; text-align: center; z-index: 4; }

/* Erreur : secousse rouge commune */
.non { animation: secoue .4s; }
.emplacement.non, .zone-qc.non, .vz.non, .epi-it.non, .bac.non { background: #f6c4c0 !important; }

/* Défi d'imposition */
.pool { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.page-n { width: 40px; height: 50px; border: 2px solid var(--encre); border-bottom-width: 4px; border-radius: 4px; background: #fff; font-family: var(--pixel); font-size: 20px; cursor: pointer; }
.page-n.sel { background: #ffb24a; box-shadow: 0 0 0 3px rgba(255,178,74,.4); }
.page-n:disabled { opacity: .25; cursor: default; }
.faces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0; }
.face p { margin: 0 0 4px; font-size: 12.5px; color: #7a6a58; }
.paire { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--encre); background: #fff; position: relative; }
.paire::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dashed #e24b4a; }
.emplacement { height: 54px; border: 0; background: #fff; font-family: var(--pixel); font-size: 22px; color: #b9b0a0; cursor: pointer; }
.emplacement:hover { background: #fff4de; }
.emplacement.plein { color: var(--encre); cursor: default; background: #fff; }
.emplacement.fixe { background: #f2eee6; }
.livret { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; margin: 10px 0; }
.livret span { width: 34px; height: 46px; border: 2px solid var(--encre); border-radius: 2px 6px 6px 2px; background: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--pixel); font-size: 17px; animation: arrive .3s; }
.livret span:first-child { background: var(--orange); }

/* Contrôle qualité */
.feuille-qc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 420px; margin: 10px auto; border: 3px solid var(--encre); background: #fff; box-shadow: 4px 4px 0 rgba(0,0,0,.12); }
.zone-qc { position: relative; height: 92px; border: 1px dashed #d9d0bf; background: #fff; cursor: zoom-in; padding: 0; overflow: hidden; }
.zone-qc .motif { position: absolute; inset: 14px 12px 22px; display: flex; align-items: center; justify-content: center; font-family: var(--pixel); font-size: 22px; color: #fff;
  background: linear-gradient(135deg, #009fe3 0 45%, #e5007d 45% 70%, #ffd500 70%); border-radius: 3px; text-shadow: 1px 1px 0 #262626; }
.zone-qc i { position: absolute; left: 0; right: 0; bottom: 2px; font-style: normal; font-family: var(--pixel); font-size: 12px; color: #b3261e; }
.d-reperage .motif { box-shadow: 4px -3px 0 rgba(0,159,227,.75), -3px 3px 0 rgba(229,0,125,.6); text-shadow: 3px 1px 0 #e5007d, -2px -1px 0 #009fe3; }
.d-pale .motif { opacity: .42; filter: saturate(.5); }
.d-tache .motif::after { content: ''; position: absolute; left: 58%; top: 20%; width: 18px; height: 14px; border-radius: 50% 40% 55% 45%; background: #262626; box-shadow: 8px 6px 0 -4px #262626; }
.d-pli::after { content: ''; position: absolute; left: -10%; right: -10%; top: 48%; height: 3px; background: linear-gradient(180deg, rgba(0,0,0,.25), #fff 50%, rgba(0,0,0,.15)); transform: rotate(-24deg); }
.zone-qc.vu { outline: 3px solid #e24b4a; outline-offset: -3px; cursor: default; }
.barre-ctrl { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-width: 420px; margin: 10px auto; padding: 6px; border: 2px solid var(--encre); border-radius: 6px; background: #fff; }
.patch { text-align: center; font-family: var(--pixel); font-size: 12px; }
.patch::before { content: ''; display: block; height: 28px; background: var(--c); border: 1px solid var(--encre); margin-bottom: 3px; }
.patch b { display: block; font-weight: 500; font-size: 13px; min-height: 16px; }
.patch.hors b { color: #b3261e; } .patch.hors::before { outline: 3px solid #e24b4a; }
.patch.bonne b { color: #2f7a3e; }
.barre-ctrl .tete { position: absolute; top: -10px; left: 0; width: 26px; height: 46px; border: 2px solid var(--encre); border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #5c6670, #3a404a); opacity: 0; }
.barre-ctrl .tete.passe { opacity: 1; animation: spectro 1.3s ease-in-out forwards; }
@keyframes spectro { from { left: 0; } to { left: calc(100% - 26px); } }
.lecture { font-family: var(--pixel); font-size: 16px; margin: 8px 0; padding: 6px 10px; background: #0f2a1a; color: #5fd06a; border-radius: 6px; display: inline-block; }
.avant-apres { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0; font-family: var(--pixel); }
.avant-apres .couv { width: 110px; height: 70px; border: 2px solid var(--encre); background: #ffe0b3; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 13px; text-align: center; }
.avant-apres .couv small { font-family: var(--texte); font-size: 10px; color: #7a6a58; }
.avant-apres .fluo-seul { background: #fff; color: #ff6a00; box-shadow: inset 0 0 0 6px #ff6a00; font-size: 18px; }
.avant-apres b { font-size: 22px; }

/* Finitions */
.couv-fin { position: relative; width: min(280px, 100%); aspect-ratio: 210 / 297; margin: 10px auto; border: 3px solid var(--encre); overflow: hidden;
  background: linear-gradient(180deg, #5fb4ee 0 55%, #3f9e3a 55%); }
.couv-fin .vz { position: absolute; border: 0; background: transparent; cursor: pointer; font-family: var(--pixel); color: #111; }
.couv-fin .vz.prevue { outline: 2px dashed rgba(255,255,255,.95); outline-offset: 2px; }
.vz-titre { left: 10%; top: 6%; width: 50%; height: 16%; font-size: 40px; }
.vz-soleil { right: 10%; top: 8%; width: 24%; aspect-ratio: 1; border-radius: 50% !important; background: radial-gradient(circle, #ff9a1e 0 45%, #ffd21e 46% 70%, transparent 71%) !important; }
.vz-ciel { left: 6%; top: 30%; width: 88%; height: 22%; }
.vz-nom { left: 10%; bottom: 8%; width: 80%; height: 14%; font-size: 18px; background: rgba(255,255,255,.7) !important; }
.vz.brille { animation: brille 1.4s ease-in-out infinite; filter: drop-shadow(0 0 6px #fff); }
@keyframes brille { 50% { filter: drop-shadow(0 0 2px #fff) brightness(1.25); } }
.couv-fin.pell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(180deg, #f7921c, #e8801a); font-family: var(--pixel); }
.couv-fin.pell b { font-size: 44px; } .couv-fin.pell i { font-style: normal; background: var(--creme); border: 2px solid var(--encre); padding: 2px 8px; }
.couv-fin .film { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,.12)); border-right: 3px solid rgba(255,255,255,.8); transition: width 1.3s ease; }
.couv-fin.pose .film { width: 100%; border-right-color: transparent; }

/* Massicot générique */
.massi2 { position: relative; width: min(320px, 100%); aspect-ratio: 4 / 3; margin: 14px auto; }
.massi2 .grille-m { position: absolute; inset: 0; display: grid; gap: 0; transition: gap .4s ease, inset .4s ease; border: 0; background: none; }
.massi2.coupe .grille-m { gap: 10px; }
.massi2 .pose { padding: 3px; }
.massi2 .pose div { height: 100%; background: var(--orange); border: 2px solid var(--encre); display: flex; align-items: center; justify-content: center; font-family: var(--pixel); font-size: 13px; text-align: center; padding: 3px; }
.massi2 .c-depliant div { background: linear-gradient(90deg, #3fae5a 0 33%, #8fd49f 33% 66%, #3fae5a 66%); font-size: 11px; }
.massi2.rognage { background: #fff; border: 2px solid #b9b0a0; }
.massi2.rognage .grille-m { inset: 9%; }
.massi2.rognage .c-affiche div { background: linear-gradient(180deg, #009fe3 0 62%, #ffe600 62%); font-size: 18px; color: #fff; text-shadow: 1px 1px 0 #262626; box-shadow: 0 0 0 9px rgba(0,159,227,.35); }
.massi2.rognage.coupe { background: transparent; border-color: transparent; }
.massi2.rognage.coupe .c-affiche div { box-shadow: none; }
.massi2 .trait { position: absolute; background: transparent; border: 0; padding: 0; cursor: crosshair; z-index: 2; }
.massi2 .trait::after { content: ''; position: absolute; background: #e24b4a; opacity: .6; }
.massi2 .trait:hover::after, .massi2 .trait:focus-visible::after { opacity: 1; }
.massi2 .tv { top: -12px; bottom: -12px; width: 22px; margin-left: -11px; }
.massi2 .tv::after { left: 10px; top: 0; bottom: 0; width: 2px; }
.massi2 .th { left: -12px; right: -12px; height: 22px; margin-top: -11px; }
.massi2 .th::after { top: 10px; left: 0; right: 0; height: 2px; }
.massi2 .trait.fait { display: none; }

/* Tri des déchets */
.bacs { grid-template-columns: repeat(4, 1fr); }
.bac { background: linear-gradient(180deg, #eef1f4, #c8ced4); }
.bac-papier { border-top: 8px solid #2f7fc0; } .bac-alu { border-top: 8px solid #9aa3ab; } .bac-plastique { border-top: 8px solid #f2c230; } .bac-dangereux { border-top: 8px solid #e24b4a; }
@media (max-width: 600px) { .bacs { grid-template-columns: 1fr 1fr; } .faces { grid-template-columns: 1fr; } .commandes { grid-template-columns: 1fr; } .niveaux { grid-template-columns: 1fr; } }

/* Plieuse : choix du pli */
.schema-pli { display: inline-flex; align-items: center; gap: 8px; }
.schema-pli i { width: 34px; height: 18px; display: inline-block; }
.schema-pli.roule i { background: linear-gradient(135deg, transparent 45%, var(--encre) 45% 55%, transparent 55%) 0 0 / 50% 100% no-repeat, radial-gradient(circle at 70% 50%, transparent 5px, var(--encre) 6px, transparent 7px); }
.schema-pli.accordeon i { background: repeating-linear-gradient(115deg, transparent 0 9px, var(--encre) 9px 11px, transparent 11px 20px), repeating-linear-gradient(65deg, transparent 0 9px, var(--encre) 9px 11px, transparent 11px 20px); background-size: 50% 100%, 50% 100%; background-position: 0 0, 100% 0; background-repeat: no-repeat; }

/* Numérique : affiches, étiquettes, hygrométrie, découpeuse */
.carteV.aff { aspect-ratio: 2 / 3; border-top-width: 2px; background: linear-gradient(180deg, var(--c) 0 60%, #fff 60%); color: #fff; text-shadow: 1px 1px 0 #262626; }
.carteV.etq { border-top-width: 2px; background: #fff; }
.carteV.etq b { width: 44px; height: 44px; margin: 0 auto 4px; border-radius: 50%; background: var(--c); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.carteV.etq.ovale b { width: 56px; height: 36px; }
.hygro-aff { display: flex; gap: 12px; align-items: center; margin: 8px 0; }
.hygro-aff b { font-family: var(--pixel); font-size: 22px; font-weight: 500; background: #0f2a1a; color: #5fd06a; padding: 4px 10px; border-radius: 6px; }
.hygro-aff span { font-size: 13px; color: var(--gris-txt); }
.planche { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 360px; margin: 12px auto; padding: 26px 26px; background: #fff; border: 2px solid var(--encre); box-shadow: 4px 4px 0 rgba(0,0,0,.12); }
.forme { height: 66px; background: radial-gradient(circle at 50% 50%, #fff 0 22%, #e5007d 23%); border-radius: 50%; position: relative; }
.forme.ovale { border-radius: 50% / 38%; background: radial-gradient(ellipse at 50% 50%, #fff 0 22%, #009fe3 23%); }
.forme::after { content: ''; position: absolute; inset: -5px; border-radius: inherit; border: 2px dashed rgba(42,36,32,.35); }
.forme.coupee::after { border: 2px solid #e24b4a; }
.forme.coupee { transform: translateY(-3px); box-shadow: 0 4px 0 rgba(0,0,0,.12); transition: transform .2s; }
.repere-d { position: absolute; width: 16px; height: 16px; padding: 0; border: 0; background: #111; cursor: crosshair; }
.repere-d.hg { left: 5px; top: 5px; } .repere-d.hd { right: 5px; top: 5px; } .repere-d.bg { left: 5px; bottom: 5px; } .repere-d.bd { right: 5px; bottom: 5px; }
.repere-d.lu { outline: 3px solid #3fae5a; outline-offset: 2px; }
.leurre { position: absolute; left: 46%; bottom: 6px; width: 12px; height: 8px; border: 0; padding: 0; border-radius: 50%; background: #8a8070; cursor: crosshair; }
.planche .outil { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #f7921c; border: 2px solid var(--encre); left: 8px; top: 8px; opacity: 0; }
.planche.decoupe .outil { opacity: 1; animation: outil 1.6s linear infinite; }
@keyframes outil { 0% { left: 20%; top: 20%; } 25% { left: 80%; top: 20%; } 50% { left: 80%; top: 70%; } 75% { left: 20%; top: 70%; } 100% { left: 20%; top: 20%; } }

/* EPI */
.epi-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 8px 0; }
.epi-it { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 2px solid var(--encre); border-bottom-width: 4px; border-radius: 8px; background: #fff; cursor: pointer; font-family: var(--pixel); font-size: 15px; text-align: left; }
.epi-it i { width: 30px; height: 30px; flex: none; border-radius: 50%; background: #1f5fa8; border: 2px solid var(--encre); position: relative; }
.epi-chaussures i::after { content: ''; position: absolute; left: 6px; top: 9px; width: 16px; height: 10px; background: #fff; border-radius: 2px 8px 3px 3px; }
.epi-bouchons i::after { content: ''; position: absolute; left: 8px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: #ff9a2a; box-shadow: 4px 2px 0 #fff; }
.epi-echarpe i, .epi-casque i, .epi-bijoux i { background: #9aa3ab; }
.epi-echarpe i::after { content: ''; position: absolute; inset: 11px 4px; background: #e24b4a; transform: rotate(-20deg); }
.epi-casque i::after { content: ''; position: absolute; left: 5px; top: 5px; width: 16px; height: 16px; border: 3px solid #2a2420; border-bottom-color: transparent; border-radius: 50%; }
.epi-bijoux i::after { content: ''; position: absolute; left: 7px; top: 6px; width: 12px; height: 14px; border: 2px solid #f2c230; border-top-color: transparent; border-radius: 50%; }
.epi-it.on { background: #e8f4ea; border-color: #2f7a3e; }
.epi-it.on::after { content: '✓'; margin-left: auto; color: #2f7a3e; }
.epi-it.refuse { opacity: .45; text-decoration: line-through; }

/* Imprévus */
.fiche .ent.imprevu { background: repeating-linear-gradient(135deg, #f2c230 0 14px, #ffd65a 14px 28px); }
.jauge-imp { height: 18px; border: 2px solid var(--encre); border-radius: 6px; background: #fff; overflow: hidden; margin: 10px 0; }
.jauge-imp i { display: block; height: 100%; width: 0; background: linear-gradient(180deg, #7fd08f, #3fae5a); transition: width .2s; }

/* Colis */
.balance { display: flex; align-items: flex-end; gap: 12px; margin: 10px 0; }
.balance .carton-b { width: 70px; height: 46px; background: #c8a26b; border: 2px solid #7a5a30; border-radius: 3px; position: relative; }
.balance .carton-b::after { content: ''; position: absolute; left: -10px; right: -10px; bottom: -8px; height: 6px; background: #5c6670; border: 2px solid var(--encre); border-radius: 2px; }
.balance b { font-family: var(--pixel); font-size: 22px; font-weight: 500; background: #0f2a1a; color: #5fd06a; padding: 3px 10px; border-radius: 6px; }
.colis-e { opacity: .3; transition: opacity .3s, transform .3s; }
.colis-e.sortie { opacity: 1; transform: rotate(-1.5deg); }
.camion-grille.colis i { width: 28px; }

/* Frise des 50 ans */
.frise50 { list-style: none; padding: 0; margin: 10px 0; border-left: 4px solid var(--orange); }
.frise50 li { position: relative; padding: 4px 0 8px 16px; }
.frise50 li::before { content: ''; position: absolute; left: -9px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--creme); border: 3px solid var(--encre); }
.frise50 b { font-family: var(--pixel); font-weight: 500; font-size: 18px; margin-right: 8px; color: var(--orange-fonce); }

/* Fin : produit, badges, diplôme, classement */
.produit-fin { aspect-ratio: 210 / 297; background: var(--orange); border: 3px solid var(--encre); box-shadow: 6px 6px 0 #c4650a, 6px 6px 0 2px var(--encre); padding: 12px 10px; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--pixel); }
.produit-fin .bt { font-size: 28px; line-height: 1; }
.produit-fin .bn { font-size: 15px; background: var(--creme); border: 2px solid var(--encre); padding: 4px; text-align: center; word-break: break-word; }
.produit-fin .bp { font-size: 12px; text-align: right; }
.produit-fin.pantone { box-shadow: inset 0 -14px 0 #ff6a00, 6px 6px 0 rgba(0,0,0,.15); }
.produit-fin.p-affiche { aspect-ratio: 2 / 3; background: linear-gradient(180deg, #009fe3 0 60%, #ffe600 60%); }
.produit-fin.p-etiquettes { aspect-ratio: 1; border-radius: 50%; background: #e5007d; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 18px; }
.produit-fin.p-depliant { aspect-ratio: 10 / 21; background: linear-gradient(90deg, #3fae5a, #8fd49f); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.badge { display: inline-flex; flex-direction: column; align-items: center; width: 92px; text-align: center; font-family: var(--pixel); font-size: 12px; line-height: 1.15; opacity: .35; filter: grayscale(1); }
.badge i { width: 36px; height: 36px; border-radius: 50%; background: var(--b); border: 2px solid var(--encre); color: #fff; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 16px; margin-bottom: 3px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.2); }
.badge small { font-family: var(--texte); font-size: 9.5px; color: var(--gris-txt); margin-top: 2px; }
.badge.gagne { opacity: 1; filter: none; }
.diplome-bloc, .site-bloc { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 14px 0; padding: 10px; border: 2px solid var(--encre); border-radius: 8px; background: #fff; }
.diplome-bloc canvas { width: 260px; max-width: 100%; height: auto; border: 1px solid #d9d0bf; box-shadow: 3px 3px 0 rgba(0,0,0,.1); }
.diplome-bloc p, .site-bloc p { margin: 0 0 4px; }
.site-bloc canvas { width: 110px; height: 110px; }
.fiche .pied.gauche { justify-content: flex-start; }
a.btn { text-decoration: none; display: inline-block; }
.classement { margin: 14px 0; padding: 10px 12px; border: 2px solid var(--encre); border-radius: 8px; background: #fff7ea; }
.classement p { margin: 0 0 6px; }
.classement ol { margin: 0 0 8px; padding-left: 24px; font-family: var(--pixel); font-size: 15px; }
.classement li { display: flex; justify-content: space-between; max-width: 280px; }
.classement li { display: list-item; }
.classement li b { font-weight: 500; } .classement li span { float: right; }
.classement li.moi { color: var(--orange-fonce); }
.classement li.vide { list-style: none; margin-left: -24px; font-family: var(--texte); font-size: 13px; color: var(--gris-txt); }
.inscrire { display: flex; gap: 8px; flex-wrap: wrap; }
.inscrire input { font-family: var(--pixel); font-size: 16px; padding: 5px 8px; border: 2px solid var(--encre); border-radius: 6px; width: 180px; }

/* Impression du diplôme seul */
#impression { display: none; }
@media print {
  @page { size: A4 landscape; margin: 0; }
  body.imprime-diplome { background: #fff; }
  body.imprime-diplome > * { display: none !important; }
  body.imprime-diplome #impression { display: block !important; }
  #impression img { width: 100%; height: auto; display: block; }
}

/* Accessibilité : taille du texte */
body.texte-1 .dlg p { font-size: 21px; } body.texte-2 .dlg p { font-size: 25px; }
body.texte-1 .fiche .corps { font-size: 16px; } body.texte-2 .fiche .corps { font-size: 18.5px; }
body.texte-1 .consigne, body.texte-1 .puce, body.texte-1 .message { font-size: 17.5px; } body.texte-2 .consigne, body.texte-2 .puce, body.texte-2 .message { font-size: 20px; }
body.texte-1 .savais { font-size: 15.5px; } body.texte-2 .savais { font-size: 18px; }
body.texte-1 .pan, body.texte-1 .inv .obj { font-size: 17px; } body.texte-2 .pan, body.texte-2 .inv .obj { font-size: 19px; }
body.texte-1 .aide { font-size: 14.5px; } body.texte-2 .aide { font-size: 16.5px; }

/* Accessibilité : couleurs adaptées (on ne se fie plus à la couleur seule) */
body.dalto .puce.on { background: #1f5fa8; }
body.dalto .puce.non, body.dalto .non { background: #6b4a00 !important; color: #fff; }
body.dalto .puce.non::before, body.dalto .machine.non b::before { content: '✗ '; }
body.dalto .encrier.juste .piste-encre { border-color: #1f5fa8; box-shadow: 0 0 0 2px #9cc3ef; }
body.dalto .encrier.juste b::after { content: ' ✓'; }
body.dalto .piste-encre .zone { background: repeating-linear-gradient(45deg, #9cc3ef 0 4px, #fff 4px 8px); }
body.dalto .timing .zone { background: repeating-linear-gradient(45deg, #9cc3ef 0 4px, #fff 4px 8px); }
body.dalto .etapes span.ok::before { content: '✓ '; }
body.dalto .patch.hors b::before { content: '✗ '; } body.dalto .patch.bonne b::before { content: '✓ '; }
body.dalto .patch.bonne b { color: #1f5fa8; } body.dalto .patch.hors b { color: #6b4a00; }
body.dalto .verif.trouve { background: #dbe9fb; border-color: #1f5fa8; } body.dalto .verif.trouve b { color: #1f5fa8; }
body.dalto .verif.trouve b::before { content: '✓ '; }
body.dalto .zone-qc.vu { outline-color: #1f5fa8; } body.dalto .zone-qc i { color: #1f5fa8; }
body.dalto .stockl.alerte span::after { content: ' ⚠'; }
body.dalto .epi-it.on { background: #dbe9fb; border-color: #1f5fa8; } body.dalto .epi-it.on::after { color: #1f5fa8; }
body.dalto .badge.gagne i::after { content: '✓'; position: absolute; }

/* Animations réduites */
body.calme *, body.calme *::before, body.calme *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; }

/* Écran de démarrage : fenêtre plein écran, défilable (plus de choix qu'avant) */
.voile { position: fixed; inset: 0; z-index: 20; padding: 16px; overflow-y: auto; align-items: flex-start; justify-content: center; }
.voile .carte { margin: auto; }
@media (max-width: 600px) {
  .voile { padding: 10px 8px; }
  .carte { padding: 12px 12px 14px; }
  .carte .tit { font-size: 38px; }
  .cmd-carte span { font-size: 11px; }
}

/* 1.5.1 — Conclusion SIB, labels papier, logistique */
.sib-conclusion { margin: 10px 0; padding: 10px 12px; border-left: 5px solid var(--orange); background: #fff4de; border-radius: 4px; font-size: 14.5px; }
.sib-conclusion p { margin: 0 0 6px; } .sib-conclusion p:last-child { margin: 0; font-weight: 600; }
.label-foret { display: flex; gap: 10px; align-items: center; margin: 8px 0; padding: 8px 10px; border: 2px solid #2f7a3e; border-radius: 6px; background: #e8f4ea; font-size: 13.5px; color: #1f4d2a; }
.label-foret b { flex: none; font-family: var(--pixel); font-weight: 500; background: #2f7a3e; color: #fff; border-radius: 4px; padding: 2px 6px; }
.depart { margin: 8px 0; padding-left: 22px; font-size: 14px; }
.depart li { margin: 3px 0; animation: arrive .3s; }
body.texte-1 .sib-conclusion { font-size: 16.5px; } body.texte-2 .sib-conclusion { font-size: 19px; }