/* HelloLitho — Configurateur v1.0.0 */
#hl-app{
  --hl-ivoire:#F7F8FA; --hl-pierre:#E4E8ED; --hl-anthracite:#22303F;
  --hl-ambre:#F0A02A; --hl-azur:#3A93D0; --hl-gris:#6B7987; --hl-nuit:#14181D;
  --hl-carte:#FFFFFF; --hl-trait:#E4E8ED;
  color:var(--hl-anthracite);
  font-size:16px; line-height:1.55;
}
#hl-app *{box-sizing:border-box}
.hl-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:20px}
@media (max-width:820px){.hl-grid{grid-template-columns:1fr}}
.hl-card{background:var(--hl-carte);border:1px solid var(--hl-trait);border-radius:18px;padding:16px}
.hl-stage{
  position:relative;border-radius:16px;overflow:hidden;min-height:450px;
  background:linear-gradient(180deg,#EDF0F4,#D9E0E8);
  transition:background .45s ease;
}
@media (max-width:820px){.hl-stage{min-height:420px}}
.hl-stage.hl-onmode{background:linear-gradient(180deg,#1E2630,var(--hl-nuit))}
.hl-stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.hl-stage canvas:active{cursor:grabbing}
.hl-help{
  position:absolute;left:12px;bottom:10px;font-size:12px;color:var(--hl-gris);
  background:rgba(255,255,255,.82);padding:4px 9px;border-radius:999px;pointer-events:none;
}
.hl-stage.hl-onmode .hl-help{background:rgba(20,24,29,.6);color:#AEBAC6}
.hl-rail label{display:block;font-weight:700;font-size:14px;margin:16px 0 6px}
.hl-rail label small{font-weight:500;color:var(--hl-gris)}
.hl-seg{display:grid;grid-template-columns:1fr 1fr;background:#E9EDF2;border-radius:12px;padding:4px;gap:4px}
.hl-seg button{
  border:0;border-radius:9px;background:transparent;padding:11px;font-weight:700;
  cursor:pointer;color:var(--hl-gris);font-size:15px;
}
.hl-seg button.active{background:var(--hl-anthracite);color:var(--hl-ivoire)}
/* minmax(0,1fr) et non 1fr : sinon chaque colonne refuse de descendre sous la
   largeur minimale de son contenu (« Signature », « 99,00 € ») et la grille
   déborde du rail. */
.hl-formats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.hl-fmt{min-width:0}   /* pas de coupure de mot : « Signature » restait lisible */
.hl-fmt strong{font-size:12.5px;display:block}

.hl-fmt{
  border:1.5px solid var(--hl-trait);border-radius:12px;background:#fff;padding:9px 4px;
  cursor:pointer;text-align:center;font-size:13px;line-height:1.3;color:inherit;
}
.hl-fmt strong{display:block;font-size:14px}
.hl-fmt.active{border-color:var(--hl-anthracite);box-shadow:0 0 0 1px var(--hl-anthracite) inset}
/* Préfixé « hl-fmt- » : « hl-price » existait déjà dans le thème pour les
   cartes de l'accueil, à 1,5 rem. Les deux feuilles se disputaient la même
   classe et la plus grande gagnait, d'où les prix qui débordaient du rail. */
.hl-fmt-prix{display:block;font-weight:800;margin-top:3px;font-size:15px;white-space:nowrap}
.hl-fmt-tag{display:block;margin-top:3px;font-size:9.5px;line-height:1.2;font-weight:800;letter-spacing:.05em;
  color:var(--hl-ambre);text-transform:uppercase}
.hl-drop{
  border:1.5px dashed #BFCAD6;border-radius:12px;background:#fff;
  padding:14px;text-align:center;cursor:pointer;
}
.hl-drop.hl-dragover{border-color:var(--hl-ambre);background:#FFF6E6}
.hl-drop input{display:none}
.hl-drop-main{font-weight:700}
.hl-drop-sub{font-size:12.5px;color:var(--hl-gris);margin-top:2px}
#hl-app input[type=range]{width:100%;accent-color:var(--hl-ambre)}
.hl-quality{margin-top:14px;padding:11px 12px;border-radius:12px;background:#EDF1F5;font-size:13.5px;line-height:1.45}
.hl-quality.hl-q-good{background:#E4F1E4}
.hl-quality.hl-q-mid{background:#FFF3DC}
.hl-quality.hl-q-low{background:#FBE3DC}
.hl-dim{color:var(--hl-gris)}
.hl-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.hl-buttons .hl-btn{white-space:nowrap;padding:10px 8px;font-size:13.5px}
.hl-btn{
  border:1px solid #CBD4DE;background:#fff;padding:10px 14px;border-radius:11px;
  font-weight:700;cursor:pointer;font-size:14px;color:inherit;
}
.hl-btn.hl-primary{
  display:block;width:100%;margin-top:10px;padding:14px;font-size:16px;
  background:var(--hl-anthracite);color:var(--hl-ivoire);border-color:var(--hl-anthracite);
}
.hl-btn.hl-primary:disabled{opacity:.45;cursor:not-allowed}
.hl-btn:focus-visible,.hl-seg button:focus-visible,.hl-fmt:focus-visible{outline:2px solid var(--hl-ambre);outline-offset:2px}
.hl-status{min-height:20px;margin-top:10px;font-size:13px;color:var(--hl-gris)}
.hl-hint{font-size:12.5px;color:var(--hl-gris);margin-top:12px}


/* ---- Correctifs mobile : garder le cadre ET le bouton photo au premier écran ---- */
.hl-help-short{display:none}
@media (max-width:820px){
  .hl-card{padding:12px}
  .hl-grid{gap:12px}
  .hl-stage{min-height:0;height:46dvh;max-height:360px}
  .hl-help{font-size:11.5px;left:8px;bottom:8px;padding:3px 8px}
  .hl-help-long{display:none}
  .hl-help-short{display:inline}
  .hl-rail label{margin:12px 0 5px}
  .hl-seg button{padding:9px;font-size:14px}
  .hl-drop{padding:11px}
  .hl-btn.hl-primary{padding:15px;font-size:16px}
}
/* Le bandeau d'aide s'efface après le premier geste */
.hl-help{transition:opacity .35s ease}
.hl-stage.hl-touched .hl-help{opacity:0}


/* ==================================================================
   v7 — Scène collante et haute, bascule en surimpression
   ================================================================== */
@media (min-width:821px){
  .hl-grid{align-items:start}
  .hl-colscene{
    position:sticky; top:1.5rem;      /* l'aperçu reste visible pendant qu'on règle */
    align-self:start;
  }
  .hl-stage{height:min(76dvh,720px); min-height:0}
}

/* La bascule vit sur la scène, au contact de ce qu'elle pilote */
.hl-seg-flottant{
  position:absolute; z-index:5; top:12px; left:50%; transform:translateX(-50%);
  width:min(280px,72%); background:rgba(255,255,255,.86);
  box-shadow:0 4px 16px rgba(20,24,29,.18); backdrop-filter:blur(6px);
}
.hl-stage.hl-onmode .hl-seg-flottant{background:rgba(20,24,29,.7)}
.hl-stage.hl-onmode .hl-seg-flottant button{color:#AEBAC6}
.hl-stage.hl-onmode .hl-seg-flottant button.active{background:var(--hl-papier,#F7F8FA); color:var(--hl-anthracite)}

.hl-delais{
  font-size:.85rem; font-weight:700; color:var(--hl-anthracite);
  margin-top:.9rem; padding:.55rem .7rem; border-radius:10px; background:#EDF1F5;
  text-align:center;
}
.hl-buttons{grid-template-columns:1fr}

@media (max-width:820px){
  .hl-seg-flottant{top:8px; width:min(240px,80%)}
  .hl-stage{height:46dvh}
}


/* Zone photo mise en évidence quand la reprise depuis l'accueil n'a rien trouvé */
.hl-drop.hl-attente{
  border-color:var(--hl-ambre); background:#FFF8EC;
  animation:hl-pulse 1.4s ease-out 2;
}
@keyframes hl-pulse{
  0%{box-shadow:0 0 0 0 rgba(240,160,42,.5)}
  100%{box-shadow:0 0 0 14px rgba(240,160,42,0)}
}


/* ==================================================================
   Mode retouche plein écran — mobile
   Même apparence que la page : fond clair en mode éteint, scène sombre
   seulement en mode allumé, et une barre d'outils blanche qui reprend le
   panneau de droite. Les commandes déplacées gardent leur style natif ;
   on ne fait que les resserrer.
   ================================================================== */
.hl-ajuster{
  position:absolute; z-index:5; left:50%; bottom:14px; transform:translateX(-50%);
  border:0; border-radius:999px; padding:11px 18px; cursor:pointer;
  background:var(--hl-ambre); color:var(--hl-nuit); font-weight:800; font-size:14px;
  box-shadow:0 6px 18px rgba(20,24,29,.28);
}
.hl-ajuster[hidden],.hl-fermer[hidden],.hl-outils[hidden]{display:none}
@media (min-width:821px){ .hl-ajuster{display:none !important} }

html.hl-verrou, html.hl-verrou body{overflow:hidden; height:100%}

#hl-app.hl-plein .hl-colscene{
  position:fixed; inset:0; z-index:1000;
  margin:0; padding:0; border:0; border-radius:0;
  background:var(--hl-ivoire);
}
/* Pas de fond imposé : la scène garde le dégradé clair de la page, et passe
   au sombre d'elle-même en mode allumé (règle .hl-stage.hl-onmode). */
#hl-app.hl-plein .hl-stage{
  height:100%; max-height:none; min-height:0; border-radius:0;
  display:flex; flex-direction:column;
}
/* La scène d'abord, la barre d'outils dessous. Dans le DOM, le canevas est
   ajouté en dernier par Three.js : sans « order », la barre passait au-dessus. */
#hl-app.hl-plein .hl-stage canvas{
  order:1; flex:none; width:100%;
  height:calc(100% - var(--hl-outils-h, 0px));
}
#hl-app.hl-plein .hl-outils{order:2}

#hl-app.hl-plein .hl-help{
  display:block; bottom:auto; top:calc(64px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,.88); color:var(--hl-gris); font-size:11.5px; white-space:nowrap;
}
#hl-app.hl-plein .hl-stage.hl-onmode .hl-help{background:rgba(20,24,29,.6); color:#AEBAC6}
#hl-app.hl-plein .hl-help-long{display:none}
#hl-app.hl-plein .hl-help-short{display:inline}
#hl-app.hl-plein .hl-seg-flottant{top:calc(12px + env(safe-area-inset-top))}

.hl-fermer{
  position:absolute; z-index:6; top:calc(10px + env(safe-area-inset-top)); right:12px;
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  background:#fff; color:var(--hl-anthracite); border:1px solid var(--hl-trait);
  font-size:18px; line-height:1; box-shadow:0 4px 14px rgba(20,24,29,.12);
}
.hl-stage.hl-onmode .hl-fermer{background:rgba(20,24,29,.6); color:#fff; border-color:transparent}

/* La barre d'outils : le panneau blanc de la page, posé en bas de l'écran */
.hl-outils{
  flex:none; display:grid; gap:10px;
  padding:12px 14px calc(14px + env(safe-area-inset-bottom));
  background:var(--hl-carte); border-top:1px solid var(--hl-trait);
  border-radius:18px 18px 0 0; box-shadow:0 -8px 24px rgba(20,24,29,.08);
}
.hl-outils-formats .hl-formats{grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:0}
.hl-outils-formats .hl-fmt{padding:7px 4px; font-size:12px; line-height:1.2}
.hl-outils-formats .hl-fmt strong{font-size:12.5px}
.hl-outils-formats .hl-fmt-dim, .hl-outils-formats .hl-fmt-tag{display:none}
.hl-outils-formats .hl-fmt-prix{font-size:13px; margin-top:1px}
.hl-fmt-dim{display:block}

.hl-outils-zoom{display:flex; align-items:center; gap:10px; color:var(--hl-gris); font-size:12px}
.hl-outils-zoom::before{content:"\2212"; font-size:16px; font-weight:800}
.hl-outils-zoom::after{content:"+"; font-size:16px; font-weight:800}
.hl-outils-zoom input[type=range]{flex:1; margin:0}

.hl-outils-rangee{display:grid; grid-template-columns:1fr 1.4fr; gap:8px}
.hl-outils-rangee .hl-btn{padding:10px 8px; font-size:13px; margin:0}
.hl-outils-rangee .hl-seg button{padding:9px; font-size:13px}

.hl-outils-qualite .hl-quality{
  margin:0; padding:8px 10px; font-size:12.5px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
/* Même bouton principal que « Ajouter au panier » sur la page */
.hl-btn.hl-primary.hl-valider{margin:0; padding:13px; font-size:15px}