/* ============================================================================
   Outil QR code (/outils/qr-code) : visuel du héros, disposition, couleurs, aperçu, téléchargements.
   Le formulaire suit le modèle commun des outils (tool-form.css) ; cv-tool.css fournit héros, cartes et boutons « outils-* ».
   ========================================================================= */

/* ----- visuel du héros ----- */
.qr-hero-types { display: flex; flex-wrap: wrap; gap: .25rem; }
.qr-hero-types span { padding: .15rem .45rem; border-radius: 999px; border: 1px solid var(--border); font-size: .58rem; font-weight: 700; color: var(--muted); }
.qr-hero-types span.is-actif { background: var(--accent); border-color: var(--accent); color: #fff; }
.qr-hero-code { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.qr-hero-grille { display: grid; grid-template-columns: repeat(11, 1fr); gap: 2px; width: 9.5rem; padding: .6rem; border-radius: .6rem; background: #fff; box-shadow: 0 4px 14px rgba(15, 23, 42, .12); }
.qr-hero-grille i { aspect-ratio: 1; border-radius: 1px; }
.qr-hero-grille i.is-plein { background: #111827; }

/* ----- disposition : formulaire à gauche, aperçu à droite ; sur mobile (≤ 760 px), l'aperçu devient la pastille
   flottante de customize.css, comme pour le CV et la lettre : place réservée en bas pour qu'elle ne cache rien. ----- */
.qr-layout { display: grid; gap: 1.25rem; align-items: start; padding-bottom: 5rem; }
@media (min-width: 761px) {
  .qr-layout { grid-template-columns: minmax(0, 1fr) 20rem; padding-bottom: 0; }
  .qr-dock { position: sticky; top: 5.5rem; }
}
@media (min-width: 1024px) { .qr-layout { grid-template-columns: minmax(0, 1fr) 22rem; } }
/* ----- réglages (couleurs, niveau) ----- */
.qr-reglages { display: grid; gap: 1rem; }
@media (min-width: 560px) { .qr-reglages { grid-template-columns: repeat(3, 1fr); } }
.qr-couleur { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; }
.qr-couleur input[type="color"] { width: 2.75rem; height: 2.5rem; padding: .15rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--card); cursor: pointer; }
.qr-couleur code { font-size: .8rem; color: var(--muted); }
/* ----- aperçu et téléchargements ----- */
.qr-apercu { display: flex; flex-direction: column; align-items: center; gap: .9rem; padding: 1.1rem; }
.qr-apercu-cadre { width: 100%; max-width: 16rem; aspect-ratio: 1; border: 1px solid var(--border); border-radius: .9rem; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; }
/* Pastille dépliée sur mobile : QR un peu plus petit pour laisser voir les boutons. */
@media (max-width: 760px) { .qr-apercu { padding: .75rem; } .qr-apercu-cadre { max-width: 14rem; } }
.qr-apercu-cadre canvas { width: 100%; height: 100%; display: block; }
.qr-apercu-vide { padding: 1.25rem; font-size: .84rem; text-align: center; color: #64748b; }
.qr-boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; width: 100%; }
.qr-boutons .outils-bouton { flex: 1 1 8rem; border: 0; border-bottom: 3px solid var(--orange); cursor: pointer; }
.qr-boutons .outils-bouton[disabled] { opacity: .45; cursor: not-allowed; }
.qr-secondaire {
  flex: 1 1 8rem; min-height: 2.5rem; padding: .55rem 1.1rem; border: 1px solid var(--accent); border-radius: .75rem;
  background: transparent; color: var(--accent); font-size: .875rem; font-weight: 800; cursor: pointer;
}
.qr-secondaire[disabled] { opacity: .45; cursor: not-allowed; }
.qr-conseil { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--muted); text-align: center; }
.qr-lien-wa { width: 100%; font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; text-align: center; }