/* Le bon de dépôt : un carnet à souches. La souche numérotée à gauche, le pointillé détachable, le bon à remplir à droite.
   Il prépare un message WhatsApp ; sans numéro configuré, il propose de copier le message. */
.carnet { display: grid; grid-template-columns: 150px minmax(0, 1fr); background: var(--carte); max-width: 980px; margin: 0 auto;
  box-shadow: 0 0 0 1px var(--ligne), 0 26px 36px -26px rgba(43, 35, 28, .8), 6px 6px 0 -1px var(--papier-f), 6px 6px 0 0 var(--ligne); }
.souche { position: relative; padding: 24px 16px; border-right: 2px dashed var(--doux); background: var(--moutarde-c); display: grid; align-content: start;
  gap: 10px; font-family: var(--etiquette); color: var(--doux); text-align: center; }
.souche::after { content: "✂"; position: absolute; right: -11px; top: 18px; font-size: 18px; color: var(--doux); background: var(--carte); line-height: 1; }
.souche img { width: 92px; margin: 0 auto; mix-blend-mode: multiply; }
.souche b { font-family: var(--titre); font-weight: 400; font-size: 26px; color: var(--brique); }
.bon-feuille { padding: clamp(20px, 3vw, 34px); display: grid; gap: 16px; }
.bon-feuille h3 { font-size: clamp(22px, 2.4vw, 30px); }
.choix { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.choix legend { font-family: var(--etiquette); font-size: 15px; letter-spacing: .03em; color: var(--doux); margin-bottom: 8px; padding: 0; }
.choix label { position: relative; cursor: pointer; }
.choix input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choix label > span { display: inline-block; padding: 7px 14px 7px 24px; font-family: var(--etiquette); font-size: 16px; background: var(--papier);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); box-shadow: inset 0 0 0 1.5px var(--ligne); transition: background .2s ease; }
.choix input:checked + span { background: var(--brique); color: var(--carte); }
.choix input:focus-visible + span { outline: 3px solid var(--moutarde); }
.lignes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
.ligne { display: grid; gap: 2px; }
.ligne.large { grid-column: 1 / -1; }
.ligne label { font-family: var(--etiquette); font-size: 15px; letter-spacing: .03em; color: var(--doux); }
.ligne input, .ligne select, .ligne textarea { font: inherit; font-size: 18px; color: var(--encre); background: transparent; border: 0;
  border-bottom: 1.5px solid var(--doux); padding: 6px 0; border-radius: 0; width: 100%; min-height: 44px; }
.ligne textarea { min-height: 70px; resize: vertical; background: repeating-linear-gradient(transparent 0 31px, var(--ligne) 31px 32px); line-height: 32px; padding: 0; }
.ligne select { appearance: none; background: linear-gradient(45deg, transparent 50%, var(--doux) 50%) right 10px center / 7px 7px no-repeat,
  linear-gradient(-45deg, transparent 50%, var(--doux) 50%) right 4px center / 7px 7px no-repeat; padding-right: 26px; }
.ligne input:focus, .ligne select:focus, .ligne textarea:focus { outline: none; border-bottom-color: var(--brique); }
.cache { display: none !important; }
.apercu { background: var(--papier); padding: 14px 16px; box-shadow: inset 0 0 0 1px var(--ligne); }
.apercu span { font-family: var(--etiquette); font-size: 14px; color: var(--doux); letter-spacing: .03em; }
.apercu p { margin: 6px 0 0; white-space: pre-line; font-size: 16px; max-width: none; }
.donnees { font-size: 14px; color: var(--doux); margin: 0; max-width: none; }
@media (max-width: 720px) {
  .carnet { grid-template-columns: minmax(0, 1fr); }
  .souche { border-right: 0; border-bottom: 2px dashed var(--doux); grid-template-columns: auto 1fr; text-align: left; align-items: center; padding: 14px 16px; }
  .souche img { width: 60px; grid-row: span 2; }
  .souche::after { right: 18px; top: auto; bottom: -11px; }
  .lignes { grid-template-columns: minmax(0, 1fr); }
}