/* ==============================================
   SERVICES — créateur public de QR Code (/services/qr)
   Chargé UNIQUEMENT sur cette page, en complément de services.css (qui
   fournit .svc-gen/.svc-gen-layout/.svc-section/.svc-field/.svc-preview-* —
   réutilisés tels quels ici, jamais redéfinis).
============================================== */

/* Garde globale : plusieurs éléments de cette page basculent leur visibilité
   via l'attribut HTML `hidden` (modale e-mail, lignes dégradé/logo,
   téléchargements...) alors que leur propre classe leur donne un
   display:flex/grid explicite plus loin dans cette feuille — sans cette
   règle (plus spécifique que le display:none implicite de [hidden] dans la
   feuille de style du navigateur), ces éléments resteraient visibles en
   permanence, y compris au chargement initial de la page. */
[hidden]{display:none !important}

/* ---------- Sélecteur de type de contenu ---------- */
.qr-type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.qr-type-card{border:2px solid var(--gray-l);border-radius:var(--r-sm);padding:14px 8px;background:var(--white);cursor:pointer;transition:var(--tf);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.78rem;font-weight:700;color:var(--gray);text-align:center}
.qr-type-card i{font-size:1.3rem;color:var(--p)}
.qr-type-card:hover{border-color:var(--p-border)}
.qr-type-card.active{border-color:var(--p);color:var(--p);background:var(--p-glow)}
.qr-type-err{color:#dc2626;font-size:.8rem;font-weight:600;margin-top:8px;display:block}

/* ---------- Personnalisation ---------- */
.qr-legend{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--p-dark);margin-bottom:10px}
.qr-contraste-avertissement{background:#fef3c7;border:1px solid #fcd34d;color:#92400e;padding:10px 14px;border-radius:var(--r-sm);font-size:.85rem;font-weight:600;margin-top:12px}
.qr-svg-limite{color:var(--gray);font-size:.78rem;margin-top:8px;line-height:1.5}

.qr-forme-row{display:flex;flex-wrap:wrap;gap:10px}
.qr-forme-chip{border:2px solid var(--gray-l);border-radius:99px;padding:9px 16px;font-size:.82rem;font-weight:700;color:var(--gray);cursor:pointer;transition:var(--tf);background:var(--white)}
.qr-forme-chip.active{border-color:var(--p);color:var(--p);background:var(--p-glow)}

/* ---------- Galerie de modèles ---------- */
.qr-templates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.qr-tpl-card{border:2px solid var(--gray-l);border-radius:var(--r-sm);padding:12px;background:var(--white);transition:var(--tf)}
.qr-tpl-card.active{border-color:var(--p);box-shadow:0 0 0 4px rgba(30,101,142,.1)}
.qr-tpl-swatch{display:flex;height:28px;border-radius:6px;overflow:hidden;margin-bottom:8px}
.qr-tpl-swatch span{flex:1}
.qr-tpl-name{font-size:.8rem;font-weight:700;color:var(--dark);text-align:center}
.qr-tpl-desc{font-size:.68rem;color:var(--gray);text-align:center;margin-top:2px;line-height:1.4;min-height:2.6em}
.qr-tpl-use{width:100%;margin-top:8px;background:var(--p-glow);border:1.5px dashed var(--p-border);color:var(--p);padding:7px 10px;border-radius:var(--r-sm);font-weight:700;font-size:.76rem;cursor:pointer;transition:var(--tf)}
.qr-tpl-use:hover{background:var(--p);color:#fff;border-style:solid}

/* ---------- Aperçu ---------- */
.qr-preview-body{padding:26px;text-align:center}
.qr-preview-empty{color:var(--gray);padding:60px 10px}
.qr-preview-empty i{font-size:2.6rem;color:var(--gray-l);margin-bottom:14px;display:block}
#qrPreviewImg{max-width:100%;width:280px;height:280px;object-fit:contain;border-radius:var(--r-sm);box-shadow:var(--sh-xs);background:#fff}
.qr-preview-loader{color:var(--p);font-size:1.6rem;padding:20px}
.qr-preview-hint{color:var(--gray);font-size:.82rem;margin-top:14px}
.qr-download-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.qr-format-btn{justify-content:center}
.qr-format-btn.active{border-color:var(--p);color:var(--p);background:var(--p-glow)}

/* ---------- Modale e-mail ---------- */
.qr-modal-overlay{position:fixed;inset:0;background:rgba(6,52,82,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;backdrop-filter:blur(2px)}
.qr-modal{background:var(--white);border-radius:var(--r-lg);padding:36px 32px;max-width:420px;width:100%;text-align:center;position:relative;box-shadow:var(--sh-lg);animation:qrModalIn .2s ease}
@keyframes qrModalIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.qr-modal-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:1.5rem;color:var(--gray);cursor:pointer;line-height:1;padding:4px}
.qr-modal-icon{font-size:2.2rem;margin-bottom:6px}
.qr-modal h2{font-family:var(--fd);font-size:1.3rem;color:var(--dark);margin-bottom:6px}
.qr-modal>p{color:var(--gray);font-size:.9rem;margin-bottom:20px}
.qr-modal-consent{display:flex;align-items:flex-start;gap:8px;text-align:left;font-size:.82rem;color:var(--dark);margin-top:6px;cursor:pointer}
.qr-modal-consent input{margin-top:3px}
.qr-modal-privacy{color:var(--gray);font-size:.76rem;line-height:1.6;margin-top:16px}

/* ---------- Toasts ---------- */
.qr-toast-container{position:fixed;bottom:24px;right:24px;z-index:1100;display:flex;flex-direction:column;gap:10px;max-width:320px}
.qr-toast{background:var(--dark);color:#fff;padding:12px 16px;border-radius:var(--r-sm);font-size:.85rem;box-shadow:var(--sh);opacity:0;transform:translateY(10px);transition:all .25s}
.qr-toast.visible{opacity:1;transform:translateY(0)}
.qr-toast-error{background:#dc2626}
.qr-toast-info{background:var(--p-dark)}

/* ---------- Responsive ---------- */
@media(max-width:640px){
    .qr-type-grid{grid-template-columns:repeat(3,1fr)}
    .qr-type-card{padding:10px 4px;font-size:.7rem}
    .qr-type-card i{font-size:1.1rem}
    .qr-download-row{grid-template-columns:1fr}
    .qr-templates-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
    .qr-modal{padding:28px 22px}
}