/* Top Diplôme · Générateur de diplôme (public/_generateur.php) */

.generateur {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
    gap: 28px;
    align-items: start;
    margin: 8px 0 40px;
}
.gen-apercu { position: sticky; top: 84px; }
.gen-feuille {
    background: #fff;
    box-shadow: var(--shadow-lg);
    border-radius: 3px;
    line-height: 0;
    touch-action: pan-y;
    aspect-ratio: 297 / 210;
}
.gen-feuille svg { width: 100%; height: auto; display: block; }
.gen-feuille [data-photo] { cursor: grab; }
.gen-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.gen-actions .btn[disabled] { opacity: .6; cursor: wait; }

.gen-form { display: flex; flex-direction: column; gap: 18px; }
.gen-lab { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--bleu-soft); margin: 0 0 8px; }
.gen-note { font-size: .82rem; color: var(--texte-soft); margin: 6px 0 0; }

.gen-designs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gen-design {
    padding: 3px;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    background: #fff;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    font: inherit;
    font-size: .8rem;
    color: var(--texte);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gen-design .gen-mini { display: block; aspect-ratio: 297 / 210; line-height: 0; background: var(--ivoire); }
.gen-design .gen-mini svg { width: 100%; height: auto; display: block; }
.gen-design:hover { border-color: var(--or-soft); }
.gen-design.on { border-color: var(--or); }

.gen-pals { display: flex; flex-wrap: wrap; gap: 8px; }
.gen-pal {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--border-strong);
    cursor: pointer;
    padding: 0;
}
.gen-pal:hover { box-shadow: 0 0 0 2px var(--or-soft); }
.gen-pal.on { box-shadow: 0 0 0 3px var(--or); }

.gen-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.gen-photo {
    min-width: 64px; height: 64px;
    padding: 0 12px;
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    font: inherit;
    font-size: .85rem;
    color: var(--bleu);
    font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.gen-photo img { width: 64px; height: 64px; object-fit: cover; }
.gen-photo:has(img) { padding: 0; }
.gen-photo.on { border-color: var(--or); background: var(--ivoire); }
.gen-photo-perso { border-style: dashed; }
.gen-photo-perso input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.gen-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.gen-champs label { display: block; font-size: .82rem; color: var(--texte-soft); }
.gen-champs label.full { grid-column: 1 / -1; }
.gen-champs input, .gen-champs textarea {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: .95rem;
    color: var(--texte);
    background: var(--ivoire);
}
.gen-champs input:focus, .gen-champs textarea:focus { outline: 2px solid var(--or-soft); border-color: var(--or); }

@media (max-width: 900px) {
    .generateur { grid-template-columns: 1fr; gap: 16px; }
    .gen-apercu { position: sticky; top: 0; z-index: 5; background: var(--ivoire); padding: 8px 0; }
    .gen-apercu .rgpd-hint { display: none; }
    .gen-actions { margin-top: 8px; }
    .gen-actions .btn { padding: 8px 12px; font-size: .88rem; }
}
@media (max-width: 480px) {
    .gen-champs { grid-template-columns: 1fr; }
}