/* <devis-3d> styles. Theme with the --dv-* variables on any parent. */
devis-3d {
  --dv-fond: #ffffff;
  --dv-texte: #15181d;
  --dv-doux: #5d6573;
  --dv-ligne: #e3e6eb;
  --dv-accent: #b04e17;          /* buttons and selection on light: 5.3:1 with white text */
  --dv-accent-clair: #f5a14a;    /* accents on the dark scene */
  --dv-accent-texte: #ffffff;
  --dv-scene: #12161d;
  --dv-rayon: 14px;
  display: block;
  color: var(--dv-texte);
  font: inherit;
}
.dv { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); gap: 20px; }
.dv [hidden] { display: none !important; }
@media (max-width: 860px) { .dv { grid-template-columns: 1fr; } }

.dv-scene { position: sticky; top: 16px; align-self: start; height: min(78vh, 620px); border-radius: var(--dv-rayon); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 10%, #222a36 0%, var(--dv-scene) 70%); }
@media (max-width: 860px) { .dv-scene { position: relative; top: 0; height: 340px; } }
.dv-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.dv-drop { position: absolute; inset: 14px; display: grid; place-items: center; cursor: pointer; text-align: center;
  border: 2px dashed rgba(255, 255, 255, .28); border-radius: calc(var(--dv-rayon) - 4px); color: #e8ecf2;
  transition: border-color .2s, background .2s; }
.dv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dv-drop:focus-within { outline: 2px solid var(--dv-accent-clair); outline-offset: 2px; }
.dv-drop:hover, .dv-survol .dv-drop { border-color: var(--dv-accent-clair); background: rgba(245, 161, 74, .08); }
.dv-drop-in { display: grid; gap: 8px; justify-items: center; padding: 20px; }
.dv-drop-in svg { color: var(--dv-accent-clair); }
.dv-drop-in strong { font-size: 1.15rem; }
.dv-drop-in small { color: #aab3c0; }
.dv-barre { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: .85rem; color: #e8ecf2; }
.dv-barre > * { background: rgba(10, 13, 18, .72); backdrop-filter: blur(6px); border-radius: 8px; padding: 6px 10px; }
.dv-nom { font-weight: 600; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-unite { border: 0; color: inherit; font: inherit; }
.dv-autre { margin-left: auto; border: 0; color: inherit; font: inherit; cursor: pointer; }
.dv-autre:hover { color: var(--dv-accent-clair); }
.dv-alerte { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; padding: 8px 12px; border-radius: 8px;
  background: #fff4e5; color: #6b3d00; font-size: .85rem; }

.dv-panneau { display: grid; gap: 14px; align-content: start; }
.dv-panneau fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.dv-panneau legend { font-weight: 600; font-size: .9rem; margin-bottom: 8px; padding: 0; }
.dv-panneau legend em { font-style: normal; font-weight: 400; color: var(--dv-doux); margin-left: 6px; }
.dv input[type=radio], .dv-switch input { position: absolute; opacity: 0; pointer-events: none; }

.dv-groupe { margin: 6px 0 0; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dv-doux); }
.dv-mats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.dv-mat span { display: grid; gap: 2px; height: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--dv-ligne);
  border-radius: 10px; cursor: pointer; background: var(--dv-fond); transition: border-color .15s, box-shadow .15s; }
.dv-mat small { color: var(--dv-doux); font-size: .78rem; line-height: 1.3; }
.dv-mat input:checked + span { border-color: var(--dv-accent); box-shadow: 0 0 0 1px var(--dv-accent); }
.dv-mat input:focus-visible + span, .dv-chip input:focus-visible + span, .dv-coul input:focus-visible + span { outline: 2px solid var(--dv-accent); outline-offset: 2px; }

.dv-couls { display: flex; flex-wrap: wrap; gap: 10px; }
.dv-coul span { display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--c); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.dv-coul input:disabled + span { opacity: .2; cursor: not-allowed; }
.dv-coul input:checked + span { box-shadow: 0 0 0 2px var(--dv-fond), 0 0 0 4px var(--dv-accent); }

.dv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dv-chip span { display: inline-block; padding: 7px 12px; border: 1px solid var(--dv-ligne); border-radius: 999px; cursor: pointer;
  font-size: .88rem; background: var(--dv-fond); }
.dv-chip input:checked + span { background: var(--dv-texte); color: var(--dv-fond); border-color: var(--dv-texte); }

.dv-panneau .dv-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.dv-panneau, .dv-scene { min-width: 0; }
.dv-ligne > label { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.dv-qte { display: inline-flex; border: 1px solid var(--dv-ligne); border-radius: 10px; overflow: hidden; }
.dv-qte button { width: 34px; border: 0; background: var(--dv-fond); font-size: 1.1rem; cursor: pointer; color: inherit; }
.dv-qte input { width: 48px; border: 0; text-align: center; font: inherit; -moz-appearance: textfield; background: var(--dv-fond); color: inherit; }
.dv-qte input::-webkit-inner-spin-button { -webkit-appearance: none; }
.dv-switch { cursor: pointer; }
.dv-switch span { width: 36px; height: 20px; border-radius: 999px; background: var(--dv-ligne); position: relative; transition: background .15s; }
.dv-switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.dv-switch input:checked + span { background: var(--dv-accent); }
.dv-switch input:checked + span::after { transform: translateX(16px); }

.dv-prix { border-radius: var(--dv-rayon); padding: 18px; background: var(--dv-scene); color: #e8ecf2; }
.dv-prix-vide { color: #aab3c0; }
.dv-prix-ok { display: grid; gap: 4px; }
.dv-prix-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #aab3c0; }
.dv-prix-val { font-size: 2.2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dv-prix-fourchette { font-size: .85rem; color: #aab3c0; }
.dv-details { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 12px 0; font-size: .85rem; }
.dv-details dt { color: #aab3c0; }
.dv-details dd { margin: 0; text-align: right; white-space: nowrap; }
.dv-details .dv-mention { grid-column: 1 / -1; font-size: .75rem; }
.dv-envoyer, .dv-envoi { border: 0; border-radius: 10px; padding: 12px 18px; background: var(--dv-accent); color: var(--dv-accent-texte);
  font: inherit; font-weight: 600; cursor: pointer; }
.dv-envoyer:hover, .dv-envoi:hover { filter: brightness(1.08); }
.dv-note { color: #aab3c0; font-size: .78rem; margin-top: 6px; }

.dv-dialog { border: 0; border-radius: var(--dv-rayon); padding: 0; width: min(560px, calc(100vw - 32px)); color: var(--dv-texte);
  background: var(--dv-fond); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.dv-dialog::backdrop { background: rgba(8, 10, 14, .6); }
.dv-form, .dv-apercu { display: grid; gap: 10px; padding: 22px; }
.dv-form h3, .dv-apercu h3 { margin: 0 0 4px; }
.dv-form label { display: grid; gap: 4px; font-size: .88rem; }
.dv-form input:not([type=checkbox]), .dv-form textarea { font: inherit; padding: 9px 11px; border: 1px solid var(--dv-ligne); border-radius: 8px;
  background: var(--dv-fond); color: inherit; }
.dv-form .dv-check { display: flex; gap: 8px; align-items: flex-start; }
.dv-resume dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; font-size: .82rem;
  padding: 10px 12px; border-radius: 8px; background: #f4f5f7; }
.dv-resume dt { color: var(--dv-doux); }
.dv-resume dd { margin: 0; }
.dv-rgpd { color: var(--dv-doux); font-size: .78rem; }
.dv-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dv-sec { border: 1px solid var(--dv-ligne); border-radius: 10px; padding: 12px 18px; background: var(--dv-fond); font: inherit; cursor: pointer; color: inherit; }
.dv-mail { white-space: pre-wrap; font-size: .8rem; background: #f4f5f7; padding: 12px; border-radius: 8px; margin: 0; max-height: 50vh; overflow: auto; }
.dv-apercu .dv-note { color: var(--dv-doux); }
.dv-mini { display: none; }
@media (max-width: 860px) {
  .dv-mini { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 20; display: flex; align-items: center; gap: 10px;
    border: 0; border-radius: 12px; padding: 12px 16px; background: var(--dv-scene); color: #e8ecf2; font: inherit;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35); cursor: pointer; }
  .dv-mini span { font-size: .8rem; color: #aab3c0; }
  .dv-mini b { font-size: 1.15rem; }
  .dv-mini em { margin-left: auto; font-style: normal; color: var(--dv-accent-clair); font-weight: 600; }
}