/* Billetterie > Diffusion (pro-diffusion.js) : générateur de widgets, aperçu en direct, code, domaines, mesure. Charte « Corde ». */
.df-intro { max-width: 72ch; margin: 0 0 14px; }
.df-coupe { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #fdf1dc; color: #7a4b00; font: 600 14px var(--f-text); }
.df-grille { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
.df-grille > .bt-bloc { margin: 0; }
.df-grille + .bt-bloc { margin-top: 18px; }
.df-reglages { display: grid; gap: 14px; }
.df-reglages .fld select { width: 100%; }
.df-fs { margin: 0; padding: 0; border: 0; min-width: 0; }
.df-fs legend { padding: 0; margin: 0 0 6px; font: 600 13.5px var(--f-text); color: var(--ink-2); }
.df-choix { display: grid; gap: 8px; }
.df-carte { position: relative; display: block; cursor: pointer; }
.df-carte input { position: absolute; opacity: 0; inset: 0; }
.df-carte > span { display: grid; gap: 2px; padding: 10px 12px 10px 38px; border: 1.5px solid var(--rule); border-radius: 10px; background: #fff; transition: border-color .15s, background .15s; }
.df-carte > span::before { content: ""; position: absolute; left: 13px; top: 14px; width: 14px; height: 14px; border: 2px solid var(--rule-strong); border-radius: 50%; background: #fff; }
.df-carte b { font: 700 14.5px var(--f-text); color: var(--ink); }
.df-carte small { font-size: 13px; color: var(--ink-3); }
.df-carte input:checked + span { border-color: var(--ink); background: var(--paper); }
.df-carte input:checked + span::before { border-color: var(--red-deep); background: radial-gradient(circle, var(--red-deep) 45%, #fff 50%); }
.df-carte input:focus-visible + span { outline: 2px solid var(--red-deep); outline-offset: 2px; }
.df-n { display: grid; gap: 8px; }
.df-coche { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--ink); cursor: pointer; }
.df-coche input { margin-top: 3px; accent-color: var(--red-deep); }
.df-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--rule-strong); border-radius: 10px; overflow: hidden; }
.df-seg label { position: relative; cursor: pointer; }
.df-seg input { position: absolute; opacity: 0; inset: 0; }
.df-seg span { display: block; padding: 8px 6px; text-align: center; font: 600 13px var(--f-text); color: var(--ink-2); border-left: 1px solid var(--rule); }
.df-seg label:first-child span { border-left: 0; }
.df-seg input:checked + span { background: var(--ink); color: #fff; }
.df-seg input:focus-visible + span { outline: 2px solid var(--red-deep); outline-offset: -3px; }
.df-couleurs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.df-nuance { width: 32px; height: 32px; padding: 0; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--rule-strong); cursor: pointer; }
.df-nuance.actif { box-shadow: 0 0 0 2px var(--ink); }
.df-nuance:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 3px; }
.df-nuance.n-d92d20 { background: #d92d20; }
.df-nuance.n-161a1d { background: #161a1d; }
.df-nuance.n-005bbb { background: #005bbb; }
.df-nuance.n-1d6b3a { background: #1d6b3a; }
.df-nuance.n-e07a00 { background: #e07a00; }
.df-perso { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.df-perso input { width: 36px; height: 32px; padding: 0; border: 1px solid var(--rule-strong); border-radius: 8px; background: #fff; cursor: pointer; }

.df-apercu .bt-bloc-h { margin-bottom: 10px; }
.df-app { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 999px; overflow: hidden; }
.df-app button { padding: 6px 12px; border: 0; background: #fff; font: 600 13px var(--f-text); color: var(--ink-2); cursor: pointer; }
.df-app button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.df-app button:focus-visible { outline: 2px solid var(--red-deep); outline-offset: -3px; }
.df-scene { display: flex; justify-content: center; padding: 18px; border-radius: 12px; background: repeating-linear-gradient(45deg, var(--paper) 0 10px, var(--paper-2) 10px 20px); min-height: 260px; }
.df-cadre { display: block; width: 100%; height: 420px; border: 0; background: transparent; transition: width .2s; }
.df-scene.tel .df-cadre { width: 360px; max-width: 100%; }
.df-scene.ordi .df-cadre { width: 100%; max-width: 680px; }
.df-note { margin: 8px 0 0; }

.df-texte { width: 100%; min-height: 128px; padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--paper);
  font: 12.5px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--ink); resize: vertical; }
.df-ok { min-height: 1.2em; margin: 6px 0 0; font: 600 13.5px var(--f-text); color: #1d5a33; }
.df-tech { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.df-tech summary { cursor: pointer; font-weight: 600; }
.df-tech p { margin: 6px 0; }
.df-csp { display: block; padding: 8px 10px; border-radius: 8px; background: var(--paper); font: 12.5px ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.df-liens { margin: 10px 0 0; }
.df-liens a { font: 600 14px var(--f-text); color: var(--red-deep); text-underline-offset: 3px; }
.df-dom-f textarea { width: 100%; font: 13.5px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.df-dom-f .bt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.df-conf { margin-top: 10px; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); }
.df-conf p { margin: 0 0 8px; font-size: 14px; }

@media (max-width: 1100px) {
  .df-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .df-scene { padding: 10px; }
  .df-seg span { padding: 9px 4px; font-size: 12.5px; }
  .df-dom-f .bt-actions .btn, .df-code .bt-bloc-h .btn { flex: 1 1 auto; justify-content: center; }
}