* { box-sizing: border-box; }
body { margin: 0; background: #e6e8ee; font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif; color: #1b1f2a; }
.commandes { max-width: 1100px; margin: 0 auto; padding: 20px; }
.commandes label { display: block; margin: 10px 0; font-weight: 600; }
.commandes label.ligne { font-weight: 400; }
.commandes select, .commandes input[type=number] { font: inherit; padding: 6px; margin-left: 6px; }
.commandes button:not(.tuile) { font: inherit; font-weight: 700; padding: 10px 20px; border-radius: 10px; border: 0; background: #1b1f2a; color: #fff; cursor: pointer; }
.aide { color: #5b6476; font-size: 14px; }

.tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0; }
@media (max-width: 760px) { .tuiles { grid-template-columns: 1fr; } }
.commandes .tuile, .tuile { font: inherit; text-align: left; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px;
  border: 3px solid transparent; background: #fff; color: #1b1f2a; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.tuile:hover { border-color: #c9ced8; }
.tuile.choisie { border-color: #1b1f2a; }
.tuile b { font-size: 18px; }
.tuile span { font-size: 14px; line-height: 1.4; color: #3b4252; }
.tuile small { font-size: 13px; color: #5b6476; font-weight: 700; }
.tuile .apercu { display: flex; gap: 4px; height: 56px; }
.tuile .apercu svg { height: 100%; width: auto; aspect-ratio: 16 / 9; border-radius: 4px; }
.tuile .apercu i { flex: 1; border-radius: 8px; display: flex; align-items: center; justify-content: center; }

.page { background: #fff; margin: 0 auto 16px; padding: 12mm; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.15);
  display: flex; flex-direction: column; break-after: page; page-break-after: always; }
.paysage { width: 297mm; height: 210mm; }
.portrait { width: 210mm; height: 297mm; gap: 8mm; justify-content: center; }

.page header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: .6mm solid #1b1f2a; padding-bottom: 2mm; }
.page h2 { margin: 0; font-size: 9mm; }
.page header span { font-size: 5mm; }
.consigne { font-size: 5mm; margin: 3mm 0 0; }

.rangee { display: flex; justify-content: center; gap: 8mm; margin-top: 6mm; }
.emplacement { width: 85mm; }
.vide { width: 85mm; height: 47.8mm; border: .8mm solid #1b1f2a; border-radius: 2mm; display: flex; align-items: center; justify-content: center; }
.vide span { font-size: 20mm; font-weight: 800; color: #c9ced8; }
.nom-plan { font-size: 4mm; margin-top: 2mm; color: #444; }

.a-decouper { padding: 3mm; border: .4mm dashed #888; }
.vignette { position: relative; width: 85mm; height: 47.8mm; border: .5mm solid #1b1f2a; overflow: hidden; }
.vignette > svg:first-child { width: 100%; height: 100%; display: block; }
.symbole { position: absolute; top: 1.5mm; right: 1.5mm; background: #fff; border-radius: 50%; width: 11mm; height: 11mm;
  display: flex; align-items: center; justify-content: center; border: .4mm solid #1b1f2a; }
.symbole svg { width: 8mm; height: 8mm; }

.carte-quiz { height: 84mm; border-radius: 6mm; background: var(--c); display: flex; align-items: center; justify-content: center; gap: 10mm;
  border: 1mm dashed #888; }
.carte-quiz svg { width: 55mm; height: 55mm; }
.carte-quiz span { font-size: 18mm; font-weight: 800; color: #fff; }
.carte-quiz.eco { background: #fff; border: 4mm solid var(--c); }
.carte-quiz.eco span { color: var(--c); }

.n8 .emplacement, .n8 .vide, .n8 .vignette { width: 62mm; }
.n8 .vide, .n8 .vignette { height: 34.9mm; }
.n8 .vide span { font-size: 14mm; }
.n8 .rangee { gap: 5mm; margin-top: 8mm; }
.n8 .a-decouper { padding: 2.5mm; }
.n8 .symbole { width: 9mm; height: 9mm; }
.n8 .symbole svg { width: 6.5mm; height: 6.5mm; }

@media print {
  body { background: #fff; }
  .commandes { display: none; }
  .page { margin: 0; box-shadow: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
[hidden] { display: none !important; }