/* Éditeur tactile de motif : plein écran, pensé d'abord pour le téléphone. */
html.lcdm-ed-ouvert, html.lcdm-ed-ouvert body { overflow: hidden; }
.lcdm-ed-bloc { margin: 0 0 1em; }
.lcdm-ed-bloc .lcdm-ed-ouvrir { font-size: 1.05em; padding: .7em 1.2em; cursor: pointer; }
.lcdm-ed-resume { display: flex; align-items: center; gap: .8em; flex-wrap: wrap; }
.lcdm-ed-resume img { width: 180px; max-width: 60%; border: 1px solid #ccc; background: #fff; }

.lcdm-ed { position: fixed; inset: 0; z-index: 100000; background: #f4f4f2; color: #1a1a1a; display: flex; flex-direction: column; overflow-y: auto;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15px; }
.lcdm-ed[hidden] { display: none; }
.lcdm-ed button { font: inherit; border: 1px solid #c9c9c9; background: #fff; color: #1a1a1a; border-radius: 8px; padding: .45em .7em; cursor: pointer;
  text-transform: none; letter-spacing: normal; line-height: 1.2; min-height: 40px; }
.lcdm-ed button.actif { border-color: #1d4f9c; background: #e6eef9; font-weight: 600; }
.lcdm-ed button:disabled { opacity: .4; }
.lcdm-ed-entete { display: flex; justify-content: space-between; align-items: center; padding: .5em .8em; background: #fff; border-bottom: 1px solid #ddd; }
.lcdm-ed-fermer { min-width: 44px; }
/* Les boutons passent à la ligne plutôt que de sortir de l'écran. */
.lcdm-ed-outils, .lcdm-ed-actions { display: flex; gap: .4em; padding: .5em .8em; flex-wrap: wrap; }
.lcdm-ed-outils button, .lcdm-ed-actions button { white-space: nowrap; flex: 1 1 auto; }
.lcdm-ed-panneau { padding: 0 .8em .4em; }
.lcdm-ed-panneau[hidden] { display: none; }
.lcdm-ed-couleurs { display: flex; gap: .35em; flex-wrap: wrap; margin: .2em 0; }
.lcdm-ed .lcdm-ed-couleur { width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #bbb; }
.lcdm-ed .lcdm-ed-couleur.actif { box-shadow: 0 0 0 3px #1d4f9c; background-clip: padding-box; }
.lcdm-ed-epaisseurs { display: flex; gap: .4em; flex-wrap: wrap; margin-top: .3em; }
.lcdm-ed-epaisseurs span { display: inline-block; background: #1a1a1a; border-radius: 50%; margin-right: .4em; vertical-align: middle; }
.lcdm-ed-autocollants { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: .4em; max-height: 132px; overflow-y: auto; }
.lcdm-ed-autocollants button { padding: 4px; }
.lcdm-ed-autocollants img { width: 100%; height: 40px; object-fit: contain; display: block; }
.lcdm-ed-ligne { display: flex; gap: .4em; margin: .2em 0; }
.lcdm-ed-texte, .lcdm-ed-police { flex: 1; font: inherit; padding: .5em; border: 1px solid #c9c9c9; border-radius: 8px; min-height: 40px; }
.lcdm-ed-scene { flex: 1; min-height: 160px; display: flex; align-items: center; justify-content: center; padding: 4px; background: #8c8f94; }
.lcdm-ed-zone { outline: 2px dashed rgba(255,255,255,.9); outline-offset: 2px; box-shadow: 0 2px 12px rgba(0,0,0,.35); touch-action: none; }
.lcdm-ed-zone canvas { touch-action: none; }
.lcdm-ed-pied { padding: .5em .8em .8em; background: #fff; border-top: 1px solid #ddd; }
.lcdm-ed-consent { display: block; font-size: 13px; margin-bottom: .4em; }
.lcdm-ed-consent input { width: 1.2em; height: 1.2em; vertical-align: middle; margin-right: .4em; appearance: auto; -webkit-appearance: checkbox; opacity: 1; position: static; }
.lcdm-ed-message { min-height: 1.2em; margin: .2em 0; font-size: 14px; }
.lcdm-ed-message.erreur { color: #b32d2e; font-weight: 600; }
.lcdm-ed-boutons { display: flex; gap: .5em; flex-wrap: wrap; }
.lcdm-ed .lcdm-ed-valider { background: #1d4f9c; border-color: #1d4f9c; color: #fff; font-weight: 600; flex: 1; }

.lcdm-ed-note { font-size: 13px; color: #555; }

@media (min-width: 900px) {
  .lcdm-ed { font-size: 16px; }
  .lcdm-ed-autocollants { max-height: none; }
}

/* Téléphone tenu en hauteur : inviter à le tourner pour une zone de dessin plus grande. */
.lcdm-ed-astuce { display: none; position: absolute; top: 6px; left: 0; right: 0; text-align: center; color: #fff; font-size: 13px; }
.lcdm-ed-scene { position: relative; }
@media (orientation: portrait) and (max-width: 700px) { .lcdm-ed-astuce { display: block; } }
@media (orientation: landscape) and (max-height: 500px) {
  /* Téléphone tourné : panneaux compacts pour laisser la place au dessin. */
  .lcdm-ed-entete { padding: .2em .8em; }
  .lcdm-ed-outils, .lcdm-ed-actions { padding: .25em .8em; }
  .lcdm-ed button { min-height: 34px; padding: .25em .55em; }
  .lcdm-ed-consent { font-size: 12px; }
}

/* Disposition : en portrait, tout est empilé (outils, dessin, actions, validation) et l'éditeur défile
   si l'écran est petit ; en paysage et sur ordinateur, le dessin à gauche, les outils dans une colonne à droite. */
.lcdm-ed-cote { display: contents; }
.lcdm-ed-entete { order: 0; } .lcdm-ed-outils { order: 1; } .lcdm-ed-panneau { order: 2; }
.lcdm-ed-scene { order: 3; flex: 1 0 auto; } .lcdm-ed-actions { order: 4; } .lcdm-ed-pied { order: 5; }
@media (orientation: landscape) and (max-height: 520px), (min-width: 900px) {
  .lcdm-ed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 36%); grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
  .lcdm-ed-entete { grid-column: 1 / -1; }
  .lcdm-ed-scene { grid-column: 1; grid-row: 2; min-height: 0; }
  .lcdm-ed-cote { display: block; grid-column: 2; grid-row: 2; overflow-y: auto; background: #f4f4f2; border-left: 1px solid #ddd; }
  .lcdm-ed-pied { border-top: 1px solid #ddd; }
}
@media (min-width: 900px) { .lcdm-ed-autocollants { grid-template-columns: repeat(6, 1fr); } }

/* Certains thèmes forcent l'affichage des boutons : l'attribut « hidden » doit toujours l'emporter. */
.lcdm-ed-bloc [hidden], .lcdm-ed-bloc[hidden], #lcdm-bloc-papier[hidden], .lcdm-ed [hidden], .lcdm-ed[hidden] { display: none !important; }
.lcdm-ed-miniature img { width: 180px; max-width: 100%; display: block; border: 1px solid #ccc; background: #fff; }