/* ==========================================================================
   RB Distribution — Configurateur
   Charte graphique TEVENNEC DIGITAL — responsive overrides
   Portée strictement limitée à #rbd-configurateur-root.
   ========================================================================== */

/* ── Police de base ─────────────────────────────────────────────────────── */
#rbd-configurateur-root {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Tablette (≤ 1024px) ────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    #rbd-configurateur-root [style*="padding: 40px 32px"] {
        padding: 24px 20px !important;
    }
}

/* ── Mobile large (≤ 768px) ─────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* ── Conteneur principal ── */
    #rbd-configurateur-root [style*="padding: 40px 32px"] {
        padding: 16px 12px !important;
    }
    #rbd-configurateur-root [style*="padding: 20px 32px"] {
        padding: 12px !important;
    }

    /* ── Toutes les grilles 2 colonnes → 1 colonne ── */
    #rbd-configurateur-root [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    #rbd-configurateur-root [style*="grid-template-columns: repeat(2,"] {
        grid-template-columns: 1fr !important;
    }
    /* Grille mixte (ex: "1fr 460px") */
    #rbd-configurateur-root [style*="grid-template-columns: 1fr 460px"] {
        grid-template-columns: 1fr !important;
    }

    /* ── Grilles 3 colonnes → 2 colonnes ── */
    #rbd-configurateur-root [style*="grid-template-columns: repeat(3,"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    #rbd-configurateur-root [style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ── Header ── */
    #rbd-configurateur-root header {
        flex-wrap: wrap !important;
        padding: 14px 16px !important;
        gap: 10px !important;
    }
    #rbd-configurateur-root header > div:last-child {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* ── Barre de progression des étapes ── */
    #rbd-configurateur-root [style*="padding: 12px 32px"],
    #rbd-configurateur-root [style*="padding: 16px 32px"] {
        padding: 10px 12px !important;
        overflow-x: auto !important;
    }

    /* ── Navigation bas (Précédent / Suivant) ── */
    #rbd-configurateur-root [style*="justify-content: space-between"] {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    /* ── Boutons pleine largeur ── */
    #rbd-configurateur-root .btn-primary {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ── Inputs et selects pleine largeur ── */
    #rbd-configurateur-root .input-field {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ── Limiter les maxWidth fixes ── */
    #rbd-configurateur-root [style*="max-width: 800px"],
    #rbd-configurateur-root [style*="max-width: 720px"],
    #rbd-configurateur-root [style*="max-width: 540px"],
    #rbd-configurateur-root [style*="max-width: 1320px"] {
        max-width: 100% !important;
    }

    /* ── Gap trop grand dans les grilles ── */
    #rbd-configurateur-root [style*="gap: 40px"],
    #rbd-configurateur-root [style*="gap: 40"] {
        gap: 16px !important;
    }
}

/* ── Bouton "Précédent" : texte blanc au hover ──────────────────────────── */
#rbd-configurateur-root .btn-primary:hover:not(:disabled) {
    color: white !important;
}

/* ── Très petit mobile (≤ 480px) ────────────────────────────────────────── */
@media (max-width: 480px) {

    /* ── Grilles 3 colonnes → 1 colonne ── */
    #rbd-configurateur-root [style*="grid-template-columns: repeat(3,"],
    #rbd-configurateur-root [style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* ── Padding encore réduit ── */
    #rbd-configurateur-root [style*="padding: 40px 32px"],
    #rbd-configurateur-root [style*="padding: 24px 20px"] {
        padding: 12px 8px !important;
    }

    /* ── Textes du header ── */
    #rbd-configurateur-root header [style*="font-size: 20px"],
    #rbd-configurateur-root header [style*="font-size: 18px"] {
        font-size: 15px !important;
    }

    /* ── Padding des cartes produit ── */
    #rbd-configurateur-root [style*="padding: 20px"] {
        padding: 12px !important;
    }
}