/* PLANCHES D'ETIQUETTES AUTOCOLLANTES, calees sur des formats du commerce.
 *
 * Le noir n'est pas ce qui se voit le mieux sur un panneau blanc : une
 * vignette noir sur blanc collee sur du
 * mobilier blanc disparait. Le fond passe donc aux couleurs de la maison, et
 * seul le QR garde son cartouche blanc — un lecteur attend des modules sombres
 * sur clair, on ne prend pas ce risque-la pour faire joli.
 *
 * COTES OFFICIELLES, pas des approximations :
 *   L7165 (laser) / J8165 (jet d'encre) — 99,1 x 67,7 mm, 2 x 4, marge haute
 *     13,1 mm, marges laterales 4,65 mm, gouttiere 2,5 mm, pas d'interligne.
 *   L7160 (laser) / J8160 (jet d'encre) — 63,5 x 38,1 mm, 3 x 7, marge haute
 *     15,15 mm, marges laterales 7,25 mm, gouttiere 2,5 mm.
 */
:root {
  --encre:  #16180f;
  --doux:   #5b6055;
  --te:     #2f827f;
  --te-1:   #8fe6d3;
  --te-2:   #7fd3c8;
  --te-3:   #c8d5dc;
  --te-4:   #5a99ad;
  --te-5:   #93aec0;
  --vert:   #6ee7a8;
  --rouge:  #ff8a80;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "DejaVu Sans", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--sans); color: var(--encre); background: #f6f5f0; }

.mode-emploi { max-width: 190mm; margin: 0 auto; padding: 10mm 6mm; font-size: 11pt;
               line-height: 1.55; color: var(--doux); }
.mode-emploi h1 { font-size: 16pt; color: var(--encre); margin: 0 0 4mm; }
.mode-emploi h2 { font-size: 11pt; color: var(--encre); margin: 6mm 0 2mm; }
.mode-emploi b { color: var(--encre); }
.mode-emploi a { color: var(--te); }
.mode-emploi ul { margin: 2mm 0; padding-left: 6mm; }

.planche { background: #fff; margin: 0 auto; }

.etiquette {
  display: flex; align-items: center; gap: 4mm;
  padding: 5mm;
  color: #fff;
  background: linear-gradient(135deg, var(--te-2) 0%, var(--te-4) 62%, var(--te-5) 100%);
  border-radius: 3mm;
  overflow: hidden;
  break-inside: avoid;
}
.cartouche { background: #fff; border-radius: 2mm; padding: 1.6mm; flex: none; }
.cartouche img { display: block; }
.txt { flex: 1; min-width: 0; }
/* Les lignes de l'etiquette sont des span : sans cette regle elles s'enchainent
   en ligne et « VELO » se colle au texte. */
.txt > span { display: block; }
.mot { font-weight: 800; letter-spacing: .13em; line-height: 1; }
.acc { line-height: 1.3; margin-top: 1.6mm; }
.cles { margin-top: 1.8mm; display: flex !important; flex-wrap: wrap; gap: 1mm 3mm; }
.cles span { display: inline-flex; align-items: center; gap: 1.4mm; }
.k { width: 6mm; height: 0; border-top: .9mm solid var(--vert); }
.k.r { border-top: .9mm dashed var(--rouge); }
.url { margin-top: 2mm; font-weight: 700; }

/* --- grand format : L7165 / J8165 --- */
.f-grand { width: 210mm; padding: 13.1mm 4.65mm; display: grid;
           grid-template-columns: 99.1mm 99.1mm; column-gap: 2.5mm; row-gap: 0; }
.f-grand .etiquette { width: 99.1mm; height: 67.7mm; }
.f-grand .cartouche img { width: 34mm; height: 34mm; }
.f-grand .mot { font-size: 17pt; }
.f-grand .acc { font-size: 8.6pt; }
.f-grand .cles { font-size: 7.4pt; }
.f-grand .url { font-size: 9.2pt; }

/* --- petit format : L7160 / J8160 --- */
.f-petit { width: 210mm; padding: 15.15mm 7.25mm; display: grid;
           grid-template-columns: repeat(3, 63.5mm); column-gap: 2.5mm; row-gap: 0; }
.f-petit .etiquette { width: 63.5mm; height: 38.1mm; padding: 2.6mm; gap: 2.4mm; }
.f-petit .cartouche { padding: 1mm; }
.f-petit .cartouche img { width: 21mm; height: 21mm; }
.f-petit .mot { font-size: 11pt; }
.f-petit .acc { font-size: 6.2pt; margin-top: 1mm; }
.f-petit .url { font-size: 6.8pt; margin-top: 1.2mm; }
.f-petit .cles { display: none; }

@page { size: A4; margin: 0; }
@media print {
  /* Sans cela, la plupart des navigateurs impriment les fonds en blanc — et
     l'etiquette redeviendrait ce qu'on voulait eviter : du noir sur du blanc. */
  body { background: #fff; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .mode-emploi { display: none; }
  .planche { margin: 0; }
  .etiquette { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}