/* Générateur QR code */
.qr-hero{background:var(--bleu-principal);background-image:radial-gradient(circle at 20% 50%,rgba(17,159,174,.15) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(60,149,210,.12) 0%,transparent 50%);padding:var(--s-8) 0 var(--s-6);color:var(--blanc)}
.qr-hero-subtitle{font-size:var(--fs-h5);opacity:.9;margin-top:var(--s-3)}
.qr-type-bar{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);padding-bottom:var(--s-8)}
.qr-type-tabs{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.qr-tab{padding:var(--s-2) var(--s-4);font-family:'Satoshi',sans-serif;font-size:var(--fs-small);font-weight:500;color:var(--text);background:var(--blanc);border:1px solid var(--gris);border-radius:6px;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.qr-tab:hover{border-color:var(--bleu-principal);color:var(--bleu-principal)}
.qr-tab.active{background:var(--bleu-principal);border-color:var(--bleu-principal);color:var(--blanc)}
.qr-input-panels{position:relative;min-height:80px}
.qr-input-panel{display:none;margin-bottom:var(--s-5)}
.qr-input-panel.active{display:block}
.qr-panel-title{font-size:var(--fs-h5,1.125rem);font-weight:600;margin:0 0 var(--s-2);line-height:1.3}
.qr-panel-desc{font-size:var(--fs-small,.875rem);color:var(--muted);margin:0 0 var(--s-4);line-height:1.4}
.qr-fields,.qr-vcard-fields,.qr-wifi-fields,.qr-utm-fields{display:flex;flex-direction:column;gap:var(--s-3)}
.qr-toggle{display:flex;align-items:center;gap:var(--s-2);cursor:pointer;font-size:var(--fs-small);margin:var(--s-3) 0}
.qr-params{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--gris)}
.qr-params-title{font-size:var(--fs-body);margin:0 0 var(--s-4)}
.qr-params-row{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-3)}
.qr-params-row label{min-width:120px;font-size:var(--fs-small)}
.qr-slider{flex:1;max-width:120px}
.qr-input-hint{display:block;margin-top:var(--s-2);font-size:var(--fs-small);color:var(--muted)}
.qr-input-hint.error{color:#c0392b}
.qr-preview-panel{position:sticky;top:var(--s-6);background:var(--blanc)}
@media(max-width:768px){
  .qr-preview-panel{position:static}
}
.qr-preview-wrap{background:#fff;border:1px solid var(--gris);border-radius:8px;padding:var(--s-6);display:flex;align-items:center;justify-content:center;min-height:280px}
.qr-preview-inner{position:relative}
.qr-preview-placeholder{display:flex;flex-direction:column;align-items:center;gap:var(--s-3);color:var(--muted);font-size:var(--fs-body)}
.qr-preview-placeholder i{font-size:64px;opacity:.4}
.qr-preview-placeholder[hidden]{display:none}
.qr-output{display:block;line-height:0}
.qr-output[hidden]{display:none}
.qr-output canvas{max-width:100%;height:auto;display:block;margin:0 auto}
.qr-output img{max-width:100%;height:auto;display:block;margin:0 auto}
.qr-download-area{margin-top:var(--s-5);text-align:center}
.qr-download-area a{text-decoration:none;color:inherit}
.qr-download-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);width:100%;padding:var(--s-4) var(--s-6);font-size:var(--fs-body)}
.qr-download-btn i{font-size:20px;z-index:2;color:var(--blanc)}
.qr-cta-expert{margin-top:var(--s-8);padding:var(--s-6);background:#f8f9fa;border-radius:12px;text-align:center}
.qr-cta-expert p{margin:0 0 var(--s-4);font-weight:500}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
/* Design sub-tabs */
.qr-design{padding-top:var(--s-5)}
.qr-dtabs{display:flex;gap:0;border-bottom:2px solid var(--gris);margin-bottom:var(--s-5)}
.qr-dtab{padding:var(--s-2) var(--s-4);font-family:inherit;font-size:var(--fs-small);font-weight:500;color:var(--muted);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;transition:color .2s,border-color .2s}
.qr-dtab:hover{color:var(--text)}
.qr-dtab.active{color:var(--bleu-principal);border-bottom-color:var(--bleu-principal)}
.qr-dpanel{display:none}.qr-dpanel.active{display:block}
/* Swatches - 8 par ligne, carrés 100% de la cellule */
.qr-swatches{display:grid;grid-template-columns:repeat(12, 1fr);gap:8px}
.qr-swatch{width:100%;aspect-ratio:1;border-radius:6px;border:2px solid var(--gris);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:border-color .15s,box-shadow .15s;position:relative;overflow:hidden;background:var(--blanc);box-sizing:border-box}
.qr-swatch:hover{border-color:var(--bleu-principal)}
.qr-swatch.active{border-color:var(--bleu-principal)}
.qr-swatch--pick{background:conic-gradient(red,yellow,lime,aqua,blue,magenta,red)}
.qr-swatch--pick input{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer}
.qr-swatch--none{color:var(--muted);font-size:clamp(14px, 4vw, 18px)}
/* Shapes - carrés 100% de la cellule */
.qr-shape-label{display:block;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:var(--s-3) 0 var(--s-2)}
.qr-shape-label:first-child{margin-top:0}
.qr-shapes{display:grid;grid-template-columns:repeat(12, 1fr);gap:8px}
.qr-shape{width:100%;aspect-ratio:1;border-radius:6px;border:2px solid var(--gris);cursor:pointer;padding:8px;background:var(--blanc);transition:border-color .15s,box-shadow .15s;box-sizing:border-box;display:flex;align-items:center;justify-content:center}
.qr-shape:hover{border-color:var(--bleu-principal)}
.qr-shape.active{border-color:var(--bleu-principal)}
.qr-shape svg{width:100%;height:100%;fill:currentColor;display:block;object-fit:contain}
/* Logo */
.qr-logo-preset{padding:var(--s-2)}
.qr-logo-preset img{display:block;width:100%;height:100%;object-fit:contain}
.qr-swatches--logos .qr-swatch{flex-shrink:0}
.qr-upload-zone{margin-top:var(--s-4);border:2px dashed var(--gris);border-radius:8px;padding:var(--s-4);text-align:center;position:relative;transition:border-color .2s}
.qr-upload-zone:hover{border-color:var(--bleu-principal)}
.qr-upload-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.qr-upload-zone label{display:flex;align-items:center;justify-content:center;gap:var(--s-2);font-size:var(--fs-small);color:var(--muted);cursor:pointer;pointer-events:none}
.qr-upload-zone i{font-size:20px}