/* ══════════════════════════════════════════════════
   MY LEGION FORGE – Landing « figurine à votre effigie »
   Complète shop.css (mêmes variables, mêmes polices).
   ══════════════════════════════════════════════════ */

.portrait-hero { padding: 6rem 0 4rem; }
.portrait-hero .shop-hero__title { line-height: 1.1; }
.portrait-hero__cta { margin-top: 2rem; }

/* ── Titres de section (repris du site vitrine) ──── */
.portrait-steps .section-head { text-align: center; margin-bottom: 2.5rem; }
.portrait-steps .section-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    color: var(--gold);
    letter-spacing: .05em;
}
.portrait-steps .section-title::after {
    content: '';
    display: block;
    width: 50px;
    height: 1px;
    background: var(--gold);
    opacity: .5;
    margin: .65rem auto 0;
}

/* ── Étapes ──────────────────────────────────────── */
.portrait-steps {
    padding: 5rem 0;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
}
.portrait-steps__grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.portrait-step {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem 1.5rem 2rem;
    transition: border-color var(--transition), transform var(--transition);
}
.portrait-step:hover { border-color: var(--gold-dark); transform: translateY(-4px); }
.portrait-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--gold-dark);
    border-radius: 50%;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 1rem;
}
.portrait-step h3 {
    font-family: 'Cinzel', serif;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .03em;
    margin-bottom: .5rem;
}
.portrait-step p { color: var(--text-muted); font-size: .9rem; line-height: 1.75; }

/* ── Configurateur ───────────────────────────────── */
.portrait-config { padding: 5rem 0 6rem; }
.portrait-block {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    padding: 1.75rem 1.75rem 2rem;
    margin-bottom: 1.75rem;
    min-width: 0;
}
.portrait-block legend {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 .6rem;
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--gold);
}
.portrait-block legend span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--gold-dark);
    border-radius: 50%;
    font-size: .8rem;
}
.portrait-block__intro { color: var(--text-muted); font-size: .9rem; margin-bottom: 1.5rem; max-width: 720px; }

/* Les <input> natifs restent dans le DOM (accessibilité clavier) mais sont masqués visuellement */
.photo-slot input, .model-card input, .scale-card input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* ── Photos ──────────────────────────────────────── */
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.photo-slot { position: relative; display: flex; flex-direction: column; gap: .35rem; cursor: pointer; }
.photo-slot__frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
    background: #111;
    border: 1px dashed var(--gold-dark);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--transition), background var(--transition);
}
.photo-slot:hover .photo-slot__frame,
.photo-slot input:focus-visible + .photo-slot__frame { border-color: var(--gold); background: rgba(201,168,76,.05); }
.photo-slot__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.photo-slot__preview { width: 100%; height: 100%; object-fit: cover; }
.photo-slot__preview[hidden] { display: none; }
.photo-slot.is-filled .photo-slot__frame { border-style: solid; }
.photo-slot.is-filled .photo-slot__empty { display: none; }
.photo-slot.is-invalid .photo-slot__frame { border-color: var(--red); }
.photo-slot__name { font-family: 'Cinzel', serif; font-size: .82rem; font-weight: 600; letter-spacing: .04em; }
.photo-slot__hint { color: var(--text-muted); font-size: .76rem; line-height: 1.4; }

/* ── Modèles ─────────────────────────────────────── */
.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.25rem; }
.model-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.model-card:hover { border-color: var(--gold-dark); transform: translateY(-4px); }
.model-card:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 12px 30px rgba(0,0,0,.5); }
.model-card:has(input:focus-visible) { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.model-card__img {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 5;
    background: #111;
    color: var(--gold-dark);
}
.model-card__img svg { opacity: .35; }
.model-card__img img { width: 100%; height: 100%; object-fit: contain; }
.model-card__title {
    padding: .85rem 1rem;
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.model-card:has(input:checked) .model-card__title { color: var(--gold); }

/* ── Échelles ────────────────────────────────────── */
.scale-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.25rem; }
.scale-card {
    position: relative;
    display: block;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--transition), transform var(--transition);
}
.scale-card:hover { border-color: var(--gold-dark); transform: translateY(-3px); }
.scale-card:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.scale-card:has(input:focus-visible) { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.scale-card__body { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1.4rem 1rem; text-align: center; }
.scale-card__body strong { font-family: 'Cinzel', serif; font-size: 1.4rem; color: var(--text); letter-spacing: .04em; }
.scale-card:has(input:checked) strong { color: var(--gold); }
.scale-card__hint { color: var(--text-muted); font-size: .8rem; }
.scale-card__price { margin-top: .4rem; font-weight: 700; color: var(--gold); }

/* ── Validation ──────────────────────────────────── */
.portrait-submit { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.portrait-submit__total { font-size: 1.05rem; }
.portrait-submit__total strong { font-family: 'Cinzel', serif; color: var(--gold); font-size: 1.4rem; }
.portrait-submit__total small { color: var(--text-muted); font-size: .76rem; }
.portrait-submit__note { min-height: 1.4em; color: #f08080; font-size: .85rem; }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 900px) {
    .portrait-steps__grid { grid-template-columns: repeat(2, 1fr); }
    .photo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .portrait-hero { padding: 4rem 0 3rem; }
    .portrait-steps__grid { grid-template-columns: 1fr; }
    .portrait-block { padding: 1.25rem 1rem 1.5rem; }
    .model-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
}

/* Conversion HEIC en cours */
.photo-slot.is-loading .photo-slot__empty { opacity: .4; }
.photo-slot.is-loading .photo-slot__frame::after {
    content: 'Conversion…';
    position: absolute;
    inset: auto 0 .6rem 0;
    text-align: center;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.portrait-submit__acct { color: var(--text-muted); font-size: .8rem; }

/* Mention « offre de lancement » sur une formule, et bloc masqué (formule têtes) */
.scale-card__badge {
    display: inline-block; margin-bottom: .2rem; padding: .15rem .65rem; border-radius: 999px;
    background: var(--gold); color: #0d0d0d; font-family: 'Cinzel', serif; font-size: .62rem;
    font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.portrait-block[hidden] { display: none; }

/* Droit à l'image : encadré + case d'autorisation */
.photo-privacy{margin-top:1.25rem;padding:.9rem 1.1rem;border:1px solid var(--border,#2a2a2a);border-left:3px solid var(--gold,#c9a24b);border-radius:6px;font-size:.88rem;line-height:1.55;color:var(--text-muted,#b5aea0)}
.photo-privacy strong{color:var(--text,#eee)}
.photo-privacy a,.photo-consent a{color:inherit;text-decoration:underline}
.photo-consent{display:flex;gap:.7rem;align-items:flex-start;max-width:46rem;margin:0 auto 1.25rem;text-align:left;font-size:.88rem;line-height:1.5;cursor:pointer}
.photo-consent input{flex:none;width:1.15rem;height:1.15rem;margin-top:.2rem;accent-color:var(--gold,#c9a24b)}