/* ------------------------------------------------------------------------------
   Boutique Tebex — retour a la grille de cartes du theme, adaptee a cinq offres.

   Le theme habille deja la carte : halo derriere le visuel, survol qui souleve,
   bandeau de rarete en haut. On ne le refait pas, on se contente de ce que la
   nouvelle structure impose, et de ce que cinq offres changent.

   Le nom du fichier porte un numero a dessein : theme_asset() colle la version
   d'Azuriom a l'URL, pas celle du theme. Modifier une feuille existante ne change
   donc pas son adresse et les visiteurs gardent l'ancienne en cache. Pour livrer du
   style neuf : boutique-8.css, puis 9, etc.
   ------------------------------------------------------------------------------ */

/* Cinq offres ne tombent juste sur aucune grille fixe. Une grille centre ses
   colonnes mais pas le contenu d'une rangee incomplete : la cinquieme carte
   restait seule, collee a gauche. En flex, chaque rangee se centre pour elle-meme,
   et la derniere se place au milieu quel que soit le nombre d'offres. */
.packages-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 18px;
}

.packages-grid .package-card {
    flex: 0 1 196px;
    max-width: 208px;
}

.packages-grid .package-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    padding: 30px 16px 18px;
    margin: 0;
}

/* --- le visuel ------------------------------------------------------------- */

.packages-grid .package-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    background: none;
    border-radius: 0;
}

.packages-grid .package-img {
    max-width: none;
    max-height: none;
}

/* --- le texte -------------------------------------------------------------- */

.packages-grid .package-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    /* pousse les boutons en bas : les cartes gardent la meme hauteur meme quand
       un nom passe sur deux lignes */
    flex: 1 1 auto;
}

.packages-grid .package-head {
    display: block;
    width: 100%;
}

.packages-grid .package-name {
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    padding: 0;
    margin: 0;
}

/* Le bandeau reprend sa place du theme, en haut et centre sur la carte. */
.packages-grid .package-card .package-badge {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: calc(100% - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- les prix -------------------------------------------------------------- */

.packages-grid .package-price {
    justify-content: center;
    margin: 2px 0 0;
}

/* Sans promotion sur cette boutique, ces deux elements n'apparaissent pas ; les
   regles restent pour le jour ou une remise Tebex reviendra. */
.packages-grid .package-price .price-promo,
.packages-grid .package-price del {
    display: none;
}

/* --- les boutons ----------------------------------------------------------- */

.packages-grid .package-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
}

.packages-grid .package-buttons .package-action {
    width: 100%;
    margin: 0;
}

.packages-grid .package-buttons .btn {
    width: 100%;
    min-width: 0;
    margin: 0;
    text-transform: none;
    font-weight: 700;
    white-space: nowrap;
}

/* --- ecrans etroits -------------------------------------------------------- */

@media (max-width: 560px) {
    .packages-grid {
        gap: 14px;
    }

    .packages-grid .package-card {
        flex: 1 1 150px;
    }

    .packages-grid .package-card {
        padding: 26px 12px 16px;
    }
}

/* --- la fiche detaillee ----------------------------------------------------- */

/* Le theme habille deja cette fiche : halo dore derriere le visuel, image qui flotte,
   typographie. On ne touche donc qu'a ce qui la rendait terne — un panneau trop proche
   du fond de page, et un voile trop opaque autour.

   Mesure avant correction : les cartes de la boutique sont a une luminosite de 26, le
   panneau de la fiche etait a 40. Trop peu d'ecart pour qu'il paraisse pose au-dessus.
   Il monte ici a 62, nettement au-dessus de tout le reste de la page. */

/* La fiche reprend les teintes des cartes du site. Le panneau tres clair et le filet
   dore de la version precedente compensaient le voile qui passait par-dessus ; ce
   defaut d'empilement corrige, ils n'ont plus lieu d'etre et juraient avec le theme. */
.modal-package .modal-content {
    background: linear-gradient(180deg, var(--bg-card-2, #1d2230) 0%, var(--bg-card, #161a25) 100%);
    border: 1px solid var(--border, #242a3a);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    overflow: hidden;
}

/* Le panneau du visuel garde le halo du theme, simplement pose sur un fond plus clair. */
.modal-package .package-modal-visual {
    background:
        radial-gradient(circle at 50% 45%, rgba(245, 166, 35, .16) 0%, transparent 62%),
        linear-gradient(180deg, rgba(255, 255, 255, .03) 0%, transparent 100%);
    border-right: 1px solid rgba(255, 255, 255, .05);
}

/* Le voile ecrasait la page ET la fiche : a 72 % de noir, tout paraissait eteint. */
.modal-backdrop.show {
    background-color: #04060a;
    opacity: .5;
}

.modal-package .package-modal-name {
    font-size: 22px;
}

.modal-package .package-modal-desc {
    color: var(--text, #e6e8ef);
    line-height: 1.6;
}

.modal-package .package-modal-note {
    color: #aeb5c4;
}

.modal-package .modal-close-float {
    background: rgba(0, 0, 0, .3);
    border-color: rgba(255, 255, 255, .18);
}

/* Le visuel de la carte ouvre la fiche, et le dit. */
.packages-grid .package-img {
    cursor: pointer;
}

/* --- l'empilement de la fiche ----------------------------------------------- */

/* La fiche est rendue a l'interieur de `main.main-content`, qui porte `z-index: 5`.
   Cet element cree donc un contexte d'empilement, et le `z-index: 1050` du modal n'y
   vaut plus rien : il ne peut pas depasser le 5 de son parent. Le voile, lui, est pose
   directement sur `body` a 1040 — il passait donc PAR-DESSUS la fiche.

   D'ou les deux symptomes ensemble : la fiche paraissait grisee, puisqu'on la voyait a
   travers un voile noir, et aucun de ses boutons ne reagissait au survol, le voile
   captant le curseur avant eux.

   On eleve le conteneur le temps qu'une fiche soit ouverte. Bootstrap pose la classe
   `modal-open` sur le body a ce moment-la et la retire a la fermeture, donc le reste de
   la page retrouve son empilement habituel des qu'on ferme. */
body.modal-open main.main-content {
    z-index: 1060;
}

/* --- la barre de defilement ------------------------------------------------- */

/* A l'ouverture, Bootstrap pose `overflow: hidden` sur le body : la barre de
   defilement disparait et toute la page se decale de sa largeur. En reservant sa
   gouttiere en permanence, la largeur utile ne change plus — ni a l'ouverture, ni a
   la fermeture, ni sur une page trop courte pour defiler. */
html {
    scrollbar-gutter: stable;
}

/* --- le prix sur les cartes -------------------------------------------------- */

/* Le prix portait la taille courante du theme et se perdait entre le nom et le
   bouton. On lui donne la couleur d'accent du site et assez de corps pour qu'il soit
   le premier chiffre qu'on lit sur la carte. */
.packages-grid .package-price .price-current {
    font-size: 26px;
    font-weight: 800;
    color: var(--orange-2, #ffb845);
    letter-spacing: .2px;
    line-height: 1.1;
}

/* Le gain de gems par euro, face a la plus petite offre. Il justifie le prix plus
   eleve au lieu de le subir. */
.packages-grid .package-bonus {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(46, 204, 113, .13);
    border: 1px solid rgba(46, 204, 113, .3);
    color: #5fd48b;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .3px;
    white-space: nowrap;
}

/* --- la barre des recompenses d'achat ---------------------------------------- */

/* Les paliers sont places proportionnellement au montant : 10 et 25 euros tombent
   presque au meme endroit sur une echelle qui va a 200, et leurs libelles se
   chevauchaient. On decale un libelle sur deux vers le bas.

   Le `translate(-50%, ...)` reprend le centrage horizontal pose par le theme : une
   transformation remplace la precedente, l'oublier decalerait le libelle a droite. */
.rewards-track .rewards-step:nth-child(even) .rewards-step-label {
    transform: translate(-50%, 15px);
}