/* ==========================================================================
   Cartes de prix mobiles — Streampartner
   Habillage visuel du sélecteur d'offres généré par js/pricing-mobile.js.

   Tout est encadré dans "@media (max-width: 767px)" : au-delà de 767px de
   large (tablette et ordinateur), aucune de ces règles ne s'applique — la
   version desktop du tableau de prix reste strictement identique à avant.
   ========================================================================== */

.plan-switcher {
    display: none;
}

@media only screen and (max-width: 767px) {

    /* ---------- Sélecteur d'offres (pastilles collantes en haut) ---------- */
    .plan-switcher {
        display: block;
        position: sticky;
        top: 0;
        z-index: 25;
        background: linear-gradient(180deg, #2e2e2e 0%, #262626 100%);
        padding: 12px 14px 14px;
        margin: 18px 0 0;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    }

    .plan-switcher-track {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding: 16px 2px 6px;
        margin: 0;
        scrollbar-width: thin;
    }
    .plan-switcher-track::-webkit-scrollbar {
        height: 4px;
    }
    .plan-switcher-track::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.28);
        border-radius: 4px;
    }

    .plan-pill {
        position: relative;
        flex: 0 0 auto;
        scroll-snap-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 96px;
        padding: 10px 16px 11px;
        border-radius: 13px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: rgba(255, 255, 255, 0.05);
        color: #d8d3cc;
        font-family: 'AllerBold', Helvetica, Arial, sans-serif;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        transition: background 0.25s ease, border-color 0.25s ease, transform 0.18s ease, color 0.25s ease, box-shadow 0.25s ease;
    }
    .plan-pill:active {
        transform: scale(0.96);
    }
    .plan-pill-name {
        font-size: 0.86em;
        letter-spacing: 0.2px;
        white-space: nowrap;
    }
    .plan-pill-price {
        font-size: 0.68em;
        margin-top: 3px;
        opacity: 0.82;
        white-space: nowrap;
        font-family: sans-serif;
    }
    .plan-pill-badge {
        position: absolute;
        top: -12px;
        right: -8px;
        background: linear-gradient(180deg, #f3993b 0%, #ed6908 100%);
        color: #fff;
        font-size: 0.52em;
        padding: 3px 7px;
        border-radius: 20px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
        white-space: nowrap;
        letter-spacing: 0.2px;
    }
    .plan-pill.active {
        background: linear-gradient(180deg, #f3993b 0%, #ed6908 100%);
        border-color: #ed6908;
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(237, 105, 8, 0.45);
    }
    .plan-pill.active .plan-pill-price {
        opacity: 1;
    }

    /* Petit indice visuel "il y a d'autres offres à droite" */
    .plan-switcher {
        position: relative;
    }
    .plan-switcher::after {
        content: '';
        position: absolute;
        right: 0;
        top: 12px;
        bottom: 20px;
        width: 26px;
        background: linear-gradient(to right, rgba(38, 38, 38, 0), #262626 80%);
        pointer-events: none;
        border-radius: 0 14px 0 0;
    }

    /* ---------- Le tableau devient un empilement de "cartes" ---------- */
    .pricing-table.mobile-cards {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 10px 24px rgba(20, 15, 10, 0.12);
        background: #ffffff;
        margin: 0 0 28px;
    }

    /* Lignes d'en-tête déjà représentées par le sélecteur du haut : masquées
       ici pour ne pas répéter deux fois la même information. */
    .pricing-table.mobile-cards ul.pm-hide-header-row {
        display: none !important;
    }

    .pricing-table.mobile-cards ul {
        display: flex;
        align-items: stretch;
        width: 100%;
        float: none;
        margin: 0;
        border-bottom: 1px solid #f0ede8;
    }
    .pricing-table.mobile-cards ul:last-child {
        border-bottom: 0;
    }
    .pricing-table.mobile-cards ul.rows:nth-of-type(odd) {
        background: #faf8f5;
    }

    .pricing-table.mobile-cards ul li {
        display: none;
        box-sizing: border-box;
        list-style: none;
        height: auto !important;
        line-height: 1.3 !important;
        /* CORRECTIF : le style desktop d'origine donne "z-index: -1" à chaque
           <li> du tableau. Sans effet tant que le <li> flotte simplement
           (float), mais dès qu'on le transforme ici en élément flexible
           (display:flex sur le <ul> parent), ce z-index négatif s'applique
           réellement et faisait passer tout le texte derrière l'arrière-plan
           de la ligne : les cases apparaissaient vides. On neutralise ici. */
        z-index: auto !important;
        position: relative;
    }

    /* Colonne étiquette (nom de la fonctionnalité) : toujours visible */
    .pricing-table.mobile-cards ul li:first-child {
        display: flex !important;
        align-items: center;
        flex: 0 0 44%;
        max-width: 44%;
        padding: 11px 6px 11px 14px;
        font-size: 0.78em;
        color: #5a5a5a;
        background: #f7f4f0;
        border-right: 1px solid #eee6dc;
        text-align: left;
        font-family: sans-serif;
    }
    .pricing-table.mobile-cards ul.price li:first-child,
    .pricing-table.mobile-cards ul.recommended-ul li:first-child {
        display: none !important;
    }

    /* Colonne valeur : seule celle de l'offre active s'affiche */
    .pricing-table.mobile-cards[data-active="1"] ul li:nth-child(2),
    .pricing-table.mobile-cards[data-active="2"] ul li:nth-child(3),
    .pricing-table.mobile-cards[data-active="3"] ul li:nth-child(4),
    .pricing-table.mobile-cards[data-active="4"] ul li:nth-child(5),
    .pricing-table.mobile-cards[data-active="5"] ul li:nth-child(6) {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex: 1 1 auto;
        max-width: 56%;
        padding: 11px 10px;
        text-align: center;
        font-size: 0.82em;
        color: #333;
        font-family: sans-serif;
        animation: pmFadeIn 0.28s ease;
    }
    @keyframes pmFadeIn {
        from { opacity: 0; transform: translateX(8px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    .pricing-table.mobile-cards ul li img {
        max-width: 26px;
        height: auto;
    }

    /* Formulaires / listes déroulantes (ex : "Nombre", "Sessions d'événement") */
    .pricing-table.mobile-cards ul.rows form {
        margin: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .pricing-table.mobile-cards ul.rows select.inlines {
        width: 100%;
        max-width: 190px;
        padding: 7px 8px;
        border-radius: 7px;
        border: 1px solid #ddd;
        background: #fff;
        font-size: 0.82em;
        color: #333;
    }

    /* Ligne de prix : mise en avant, pleine largeur, dégradé léger */
    .pricing-table.mobile-cards ul.price {
        background: linear-gradient(180deg, #fdf2e6 0%, #ffffff 100%);
        border-bottom: 2px solid #f3993b;
    }
    .pricing-table.mobile-cards ul.price li {
        max-width: 100% !important;
        flex: 1 1 100% !important;
        padding: 18px 12px 16px !important;
        /* Les deux <div> internes (prix + légende) doivent s'empiler l'un sous
           l'autre : comme cette case est elle-même en display:flex pour être
           centrée, sans cette ligne ses enfants se retrouvaient côte à côte
           sur une seule ligne au lieu de deux. */
        flex-direction: column !important;
    }
    .pricing-table.mobile-cards ul.price div:first-child {
        font-size: 1.55em;
        color: #c6351a;
        font-family: 'AllerBold', Helvetica, Arial, sans-serif;
    }
    .pricing-table.mobile-cards ul.price div + div {
        display: block;
        font-size: 0.62em;
        color: #8c8c8c;
        margin-top: 4px;
        font-family: sans-serif;
    }

    /* Petites icônes "?" d'information : on garde une zone de tap confortable */
    .pricing-table.mobile-cards ul li:first-child .question-popover {
        display: inline-block;
        margin-left: 4px;
        vertical-align: middle;
    }

    /* La bordure/coins déjà gérés par le conteneur .mobile-cards : on retire les
       arrondis et ombres ponctuels hérités du style desktop pour éviter les
       doubles bordures visuelles. */
    .pricing-table.mobile-cards ul li.recommended,
    .pricing-table.mobile-cards ul li.select {
        border-radius: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }
    .pricing-table.mobile-cards ul.price li.select {
        background: transparent !important;
    }
}