/* =====================================================================
   PMJ Product Layouts — Étapes numérotées en cartes (2.2.0)
   Layouts Poster (snippet B) et Puzzle (snippet E) : voir
   includes/steps-cards.php, qui ajoute la classe body.pmj-steps-layout
   et charge ce fichier seulement sur ces pages produit.

   Chaque étape (orientation, taille, PitchPrint, champs WAPF) est une
   carte blanche sur la colonne de droite gris pâle. Le numéro vient d'un
   compteur CSS : seules les cartes affichées comptent. Quand WAPF cache
   une étape (classe wapf-hide = display:none), elle n'a pas de numéro et
   les suivantes se renumérotent seules, sans trou.

   Les sélecteurs sont volontairement longs (body.pmj-steps-layout...) et
   en !important pour passer devant le CSS des snippets (écrit plus bas
   dans la page), le CSS des pages produit et le snippet :has des choix
   sélectionnés.
   ===================================================================== */

/* Colonne de droite gris pâle */
body.pmj-steps-layout.single-product.woocommerce-page div.product div.summary.entry-summary {
    background: #F2F1EE !important;
    border-radius: 16px !important;
    padding: 28px 26px 32px !important;
    margin-top: 4em !important;
    counter-reset: pmjstep;
}

/* Carte */
body.pmj-steps-layout .pmj-step,
body.pmj-steps-layout #pp_main_btn_sec.pmj-step,
body.pmj-steps-layout .wapf-field-container:has(> .wapf-field-label) {
    background: #fff !important;
    border: 1px solid #E6E1D8 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(28,23,19,.04), 0 6px 18px rgba(28,23,19,.04) !important;
    padding: 20px 22px 22px !important;
    margin: 0 0 14px !important;
    box-sizing: border-box;
    text-align: left;
    counter-increment: pmjstep;
}

/* En-tête : cercle numéroté + titre + bouton « ? » à droite.
   Sur la page Poster, le « ? » est ajouté par injectModalTriggers() à côté
   du <label>, dans .wapf-field-label : les deux niveaux sont donc en flex. */
body.pmj-steps-layout .pmj-step-head,
body.pmj-steps-layout .wapf-field-container .wapf-field-label,
body.pmj-steps-layout .wapf-field-container .wapf-field-label label {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
}
body.pmj-steps-layout .wapf-field-container .wapf-field-label label {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
}
body.pmj-steps-layout .pmj-step-head { margin: 0 0 16px !important; }
body.pmj-steps-layout .wapf-field-container .wapf-field-label { margin: 0 0 16px !important; }
body.pmj-steps-layout .pmj-step-head::before,
body.pmj-steps-layout .wapf-field-container .wapf-field-label label::before {
    content: counter(pmjstep);
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-top: 2px;            /* centré sur la ligne du titre (28 px) */
    border-radius: 50%;
    background: #1C1713;
    color: #fff;
    font: 600 12px/24px 'Poppins', sans-serif;
    letter-spacing: 0;
    text-align: center;
}
body.pmj-steps-layout .pmj-step-title,
body.pmj-steps-layout .wapf-field-container .wapf-field-label label > span {
    min-width: 0;
    margin: 0 !important;
    font-family: 'Baskerville', 'Libre Baskerville', Georgia, serif !important;
    font-size: 19px !important;
    line-height: 28px !important;
    font-weight: 400 !important;
    color: #1C1713 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-align: left !important;
}
body.pmj-steps-layout .wapf-field-container .wapf-field-label abbr.required { line-height: 28px; margin-left: -8px; }
body.pmj-steps-layout .pmj-step-value {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #9B968F;
    margin-left: 6px;
    letter-spacing: 0;
    white-space: nowrap;
}
body.pmj-steps-layout .wapf-field-label .pmj-modal-trigger {
    flex: 0 0 28px;
    width: 28px !important;
    height: 28px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 0 0 auto !important;
    border: 1.5px solid #1C1713 !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

/* Contenu des cartes taille / orientation / PitchPrint */
body.pmj-steps-layout .pmj-step .pmj-au-size-grid,
body.pmj-steps-layout .pmj-step .pmj-au-orientation-grid,
body.pmj-steps-layout .pmj-step .pmj-puzzle-size-grid { margin: 0; }
body.pmj-steps-layout .pmj-step .pmj-pp-formats { text-align: center; }

/* Contour des choix sélectionnés : 1,5 px au lieu de 2 px
   (tailles et orientation : directement dans les snippets B et E) */
body.pmj-steps-layout .wapf-field-container .wapf-swatch.wapf-checked,
body.pmj-steps-layout .wapf-field-container .wapf-swatch:has(input:checked),
body.pmj-steps-layout .wapf-field-container .wapf-radio.wapf-checked {
    border-width: 1.5px !important;
}
body.pmj-steps-layout .pmj-card-style .wapf-swatch--image.wapf-checked label {
    border-width: 1.5px !important;
}

@media (max-width: 768px) {
    /* Pleine largeur d'écran : la colonne sort des marges du site (30 px du
       CSS des pages produit + marges Astra), sinon les cartes n'ont que les
       deux tiers de l'écran. calc(50% - 50vw) = recule jusqu'au bord gauche
       de l'écran ; le débordement horizontal est déjà coupé sur mobile
       (html, body { overflow-x: hidden } dans le CSS additionnel). */
    body.pmj-steps-layout.single-product.woocommerce-page div.product div.summary.entry-summary {
        width: 100vw !important;
        max-width: 100vw !important;
        flex: 0 0 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        border-radius: 0 !important;
        padding: 22px 12px 28px !important;
        margin-top: 16px !important;
        box-sizing: border-box !important;
    }
    body.pmj-steps-layout .pmj-step,
    body.pmj-steps-layout #pp_main_btn_sec.pmj-step,
    body.pmj-steps-layout .wapf-field-container:has(> .wapf-field-label) {
        padding: 16px 14px 18px !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
    }
    body.pmj-steps-layout .pmj-step-head,
    body.pmj-steps-layout .wapf-field-container .wapf-field-label,
    body.pmj-steps-layout .wapf-field-container .wapf-field-label label { gap: 10px; }
    body.pmj-steps-layout .pmj-step-head { margin-bottom: 14px !important; }
    body.pmj-steps-layout .wapf-field-container .wapf-field-label { margin-bottom: 14px !important; }
    body.pmj-steps-layout .pmj-step-head::before,
    body.pmj-steps-layout .wapf-field-container .wapf-field-label label::before {
        flex-basis: 22px; width: 22px; height: 22px; line-height: 22px; font-size: 11px;
    }
    body.pmj-steps-layout .pmj-step-title,
    body.pmj-steps-layout .wapf-field-container .wapf-field-label label > span {
        font-size: 17px !important;
        line-height: 26px !important;
    }
    body.pmj-steps-layout .wapf-field-label .pmj-modal-trigger {
        flex-basis: 26px; width: 26px !important; height: 26px !important; font-size: 13px !important;
    }
}