.jw-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 60, 70, 0.55);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jw-modal {
    position: relative;
    background: #fff;
    border-radius: 16px;
    max-width: 1000px;
    width: 92%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.jw-deco {
    position: absolute;
    width: 86px;
    top: -54px;
    left: -54px;
}
.jw-deco-envelop {
    position: absolute;
    width: 65px;
    top: 11px;
    left: 11px;
}
.jw-close {
    z-index: 999;
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    opacity: .6;
    outline: none;
    width: 20px;
    padding: 0;
    transition: 0.2s;
}
.jw-close:hover {
    outline: none;
    opacity: 1;
    transition: 0.2s;
}
.jw-close img {
    width: 100%;
}
.jw-content {
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 40px;
}
.jw-wheel-col {
    position: absolute;
    left: 0;
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
}
.jw-form-col {
    width: 50%;
}

/* Diametre de la roue. Tout est en pixels, palier par palier : voir la section
   RESPONSIVE en bas du fichier pour les autres tailles.
   Regle a respecter si tu changes cette valeur : la police des libelles doit
   suivre, sinon les textes se chevauchent au centre ou paraissent minuscules.
   Rapport utilise partout : police = 8 % du diametre (360px -> 28px). */
.jw-wheel-wrapper {
    position: relative;
    width: 380px;
    height: 380px;
    z-index: 1;
}

.jw-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 9px solid #035e63;
    position: relative;
    overflow: hidden;
    transition: transform 4.2s cubic-bezier(0.17, 0.67, 0.16, 0.99);
}

.jw-segment-label {
    display: inline-block;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    font-size: 18px;
    text-align: center;
    line-height: 1;
}

.jw-pointer {
    position: absolute;
    top: 50%;
    left: auto;
    bottom: auto;
    right: -20px;
    width: 56px;
    height: 62px;
    transform: translateY(-50%);
    background-color: #035e63;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2026%2032'%3E%3Cpath%20d='M19%206V26L7%2016Z'%20fill='%23fff'%20stroke='%23fff'%20stroke-width='8'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2026%2032'%3E%3Cpath%20d='M19%206V26L7%2016Z'%20fill='%23fff'%20stroke='%23fff'%20stroke-width='8'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    z-index: 2;
}

.jw-title {
    position: relative;
    width: 100%;
    margin-top: -90px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}
.jw-title img {
    width: 70%;
    margin: auto;
}
.jw-title img.jw-deco-starts-title {
    position: absolute;
    width: 13%;
    left: -14%;
    margin-top: 10%;
}
.jw-subtitle {
    color: #84A6B5;
    text-align: center;
    width: 100%;
    font-size: 18px;
    margin-bottom: 25px;
    font-weight: 500;
    line-height: 1.3;
}
.jw-gift-teaser-text {
    text-align: center;
}
#jw-form {
    display: flex;
    position: relative;
}

#jw-email,
#jw-email:focus {
    color: #84A6B5;
    padding: 10px 65px 10px 15px;
    border: 2px solid transparent;
    background-color: #e8e8e8;
    border-radius: 24px;
    font-size: 16px;
    outline: none;
    width: 100%;
}
#jw-email:focus {
    border-color: #84A6B5;
}

#jw-submit,
#jw-submit:active,
#jw-submit:focus {
    background: #e63271;
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 10px 20px;
    cursor: pointer;
    align-self: flex-start;
    outline: none;
    position: absolute;
    right: 0;
    height: 100%;
    display: flex;
    justify-content: center;
}

#jw-submit[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}
#jw-submit img {
    position: absolute;
    height: 40px;
    top: -40px;
}
.jw-error {
    color: #c0392b;
    font-size: 13px;
    margin-top: 8px;
}

.jw-result-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--jw-prize-color);
    text-align: center;
}
.jw-bravo {
    font-family: 'Caveat', cursive;
    font-size: 36px;
    color: #e63271;
    text-align: center;
}
.jw-under {
    text-align: center;
    font-size: 16px;
    margin-bottom: 5px;
}
.jw-result-detail {
    text-align: center;
    width: max-content;
    padding: 15px 20px;
    background: var(--jw-prize-color);
    border-radius: 30px;
    font-weight: 800;
    font-size: 16px;
    color: #FFF;
    margin: auto;
    margin-bottom: 0;
}

/* ==================================================================
   LOT "JEU OFFERT" : bouton d'ouverture + popup de choix du jeu
   (le reste du message de succes n'est pas style ici, il est deja
   couvert par les regles .jw-bravo / .jw-under / .jw-result-* ci-dessus)
   ================================================================== */

/* Bouton "copier" ajoute par wheel.js dans la pastille du code promo (tous les
   lots). L'icone SVG utilise currentColor, elle prend donc automatiquement le
   blanc de la pastille, quelle que soit la couleur du lot. */
.jw-code-text {
    vertical-align: middle;
}

.jw-copy,
.jw-copy:active,
.jw-copy:focus {
    background: none;
    border: none;
    padding: 0;
    margin-left: 10px;
    color: inherit;
    cursor: pointer;
    opacity: .75;
    outline: none;
    vertical-align: middle;
    line-height: 1;
    transition: 0.2s;
}
.jw-copy:hover {
    opacity: 1;
    transition: 0.2s;
}
.jw-copy svg {
    display: block;
}

/* Bascule icone <-> "Copié !" pendant 2 s apres le clic. */
.jw-copy-done {
    display: none;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.jw-copy.jw-copied .jw-copy-icon {
    display: none;
}
.jw-copy.jw-copied .jw-copy-done {
    display: inline;
}

/* Pour un jeu gagne, la pastille de code n'est pas affichee a cet endroit :
   le code est repris dans le recapitulatif ci-dessous (#jw-gift-code). On cible
   par id pour ne masquer que celle-la, pas celle du recapitulatif qui reutilise
   la meme classe .jw-result-detail. */
#jw-step-result.jw-prize-type-gift #jw-result-detail {
    display: none;
}

/* --- Recapitulatif du jeu gagne : jeu a gauche, mode d'emploi a droite --- */
.jw-gift-recap {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 20px;
    text-align: left;
}
.jw-gift-recap-left {
    flex: 0 0 auto;
}
.jw-gift-recap-right {
    flex: 1 1 auto;
}

.jw-gift-code-label {
    color: #84A6B5;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 6px;
}

/* Reprend la pastille de .jw-result-detail, mais alignee a gauche dans la
   colonne au lieu d'etre centree. */
.jw-gift-code {
    margin: 0 0 15px !important;
}

.jw-gift-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}
.jw-gift-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    line-height: 1.3;
    color: #035e63;
    margin-bottom: 10px;
}
.jw-gift-steps li:last-child {
    margin-bottom: 0;
}
.jw-gift-step-num {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e63271;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .jw-gift-note : plus utilise dans le tpl. Regle conservee au cas ou tu
   veuilles reajouter une ligne de precision sous les etapes. */
.jw-gift-note {
    margin: 12px 0 0;
    font-size: 13px;
    font-style: italic;
    color: #84A6B5;
}

/* Raccourci : bouton d'ajout au panier. Le lien vers la fiche produit est dans
   la carte du jeu (.jw-choice-link), comme dans la popup de choix. */
.jw-gift-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 18px 0 0;
}

.jw-gift-cart,
.jw-gift-cart:visited,
.jw-gift-cart:active,
.jw-gift-cart:focus {
    display: inline-block;
    background: #e63271;
    color: #fff;
    border-radius: 24px;
    padding: 11px 24px;
    font-size: 15px;
    text-decoration: none;
    outline: none;
    transition: 0.2s;
}
.jw-gift-cart:hover {
    background: #035e63;
    color: #fff;
    text-decoration: none;
    transition: 0.2s;
}

/* Dans la carte du jeu retenu, le lien "Voir le produit" reste colle en bas
   (margin-top:auto herite de .jw-choice-link). Un peu d'air au-dessus, la carte
   n'ayant ici qu'une seule vignette pour l'equilibrer. */
.jw-choice-item.jw-chosen .jw-choice-link {
    padding-top: 12px;
}

/* Bouton "Je choisis mon jeu" : meme traitement que le bouton "Valider" de la
   popup de choix, pour que les deux etapes se repondent. */
.jw-gift-open,
.jw-gift-open:active,
.jw-gift-open:focus {
    display: block;
    margin: 15px auto 0;
    background: #e63271;
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 12px 34px;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    transition: 0.2s;
}
.jw-gift-open:hover {
    background: #035e63;
    transition: 0.2s;
}

/* z-index au-dessus de .jw-overlay (10000), sinon elle passe derriere. */
.jw-choice-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 60, 70, 0.55);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jw-choice-modal {
    position: relative;
    background: #fff;
    border-radius: 16px;
    max-width: 800px;
    width: 92%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.jw-choice-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    opacity: .6;
    outline: none;
    width: 20px;
    padding: 0;
    transition: 0.2s;
}
.jw-choice-close:hover {
    outline: none;
    opacity: 1;
    transition: 0.2s;
}
.jw-choice-close img {
    width: 100%;
}

.jw-choice-intro {
    color: #84A6B5;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 25px;
}

.jw-choice-list {
    list-style: none;
    margin: 0 0 25px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

/* Toute la vignette est cliquable, la classe .jw-selected est posee par
   wheel.js (pas de bouton radio a styliser). */
.jw-choice-item {
    /* flex + column : les cartes d'une meme ligne ont la meme hauteur (etirement
       par defaut du conteneur flex), et le lien "Voir le produit" peut etre
       pousse en bas avec margin-top:auto, quel que soit le nombre de lignes du
       titre. Un display bloc (ici flex) est aussi indispensable pour la carte du
       message de succes, qui est un <span> : en ligne, sa largeur serait ignoree
       et la bordure s'enroulerait autour du texte. */
    display: flex;
    flex-direction: column;
    width: 150px;
    padding: 12px;
    background: #fff;
    border: 2px solid #e8e8e8;
    border-radius: 16px;
    cursor: pointer;
    outline: none;
    transition: 0.2s;
}
.jw-choice-item:hover {
    border-color: #84A6B5;
    transition: 0.2s;
}
.jw-choice-item.jw-selected {
    border-color: #e63271;
    background: #e5f6f7;
    transition: 0.2s;
}

/* Jeu retenu, reaffiche dans le message de succes avec exactement la meme
   carte que dans la popup de choix, simplement centree et non cliquable. */
#jw-result-product {
    text-align: center;
}
.jw-choice-item.jw-chosen,
.jw-choice-item.jw-chosen:hover {
    margin: 15px auto 0;
    cursor: default;
    border-color: #e63271;
    background: #e5f6f7;
}

.jw-choice-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 10px;
}

.jw-choice-name {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: #035e63;
}

/* Niveau scolaire, affiche seulement s'il est renseigne sur le produit
   (caracteristique "Niveau", ou a defaut les categories de niveau). */
.jw-choice-level {
    display: block;
    width: max-content;
    margin: 8px auto 0;
    padding: 3px 10px;
    background: #e5f6f7;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: #00a5b5;
    text-align: center;
}
.jw-choice-item.jw-selected .jw-choice-level {
    background: #fff;
}

.jw-choice-link,
.jw-choice-link:visited {
    display: block;
    /* margin-top:auto : le lien est colle en bas de la carte, donc tous les
       liens de la ligne sont alignes meme si les titres n'ont pas le meme
       nombre de lignes. */
    margin-top: auto;
    padding-top: 10px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    color: #84A6B5;
    text-decoration: none;
}
/* Au survol : on ne souligne, sans changer la couleur. La couleur est repetee
   ici pour neutraliser un eventuel a:hover global du theme. */
.jw-choice-link:hover,
.jw-choice-link:focus,
.jw-choice-link:active {
    color: #84A6B5;
    text-decoration: underline;
}

.jw-choice-modal .jw-error {
    text-align: center;
}

.jw-choice-submit,
.jw-choice-submit:active,
.jw-choice-submit:focus {
    display: block;
    margin: 0 auto;
    background: #e63271;
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 12px 34px;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    transition: 0.2s;
}
.jw-choice-submit:hover {
    background: #035e63;
    transition: 0.2s;
}
.jw-choice-submit[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.jw-conditions {
    position: relative;
    background-color: #e5f6f7;
    width: 100%;
    padding: 40px;
    display: flex;
    justify-content: end;
    margin-top: 25px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}
.jw-conditions .jw-deco-starts-wheel {
    position: absolute;
    top: 30%;
    left: 4%;
    width: 5%;
}
.jw-conditions .jw-right {
    width: 50%;
}
.jw-conditions img.apple {
    position: absolute;
    width: 60px;
    left: 40%;
    bottom: 0;
}
.jw-conditions img.gift {
    position: absolute;
    height: 70px;
    right: 40px;
    top: -50px;
}
.jw-conditions .jw-offre {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: #00a5b5;
}
.jw-conditions .jw-offre span {
    font-style: italic;
    font-size: 14px;
}
.jw-conditions .jw-legal {
    text-align: center;
    font-size: 14px;
    line-height: 1.3;
    color: #84A6B5;
    margin: 0;
}
.jw-conditions .jw-legal a,
.jw-conditions .jw-legal a:hover,
.jw-conditions .jw-legal a:visited  {
    color: #84A6B5;
    text-decoration: underline;
}

/* ==================================================================
   ETOILES SCINTILLANTES DU FOND (annonce du lot gagne)
   ==================================================================
   Le SVG (34 etoiles) est injecte en ligne dans #jw-overlay par le tpl, ce qui
   permet d'animer chaque <path> separement. Il est masque au depart et revele
   quand wheel.js pose la classe jw-won sur l'overlay.
   Reglages : l'opacite generale ci-dessous, et les durees / retards plus bas.
   ================================================================== */
.jw-stars {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Le calque ne doit jamais intercepter les clics de la popup. */
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* Opacite generale des etoiles. C'est ici qu'on regle leur discretion : la
   valeur remplace le opacity="0.5" qui etait dans le fichier SVG (retire, sinon
   il se multipliait avec l'animation et plafonnait le rendu). */
.jw-overlay.jw-won .jw-stars {
    opacity: 0.55;
}

/* Le SVG porte preserveAspectRatio="xMidYMid meet" (equivalent d'un
   background-size: contain) : les 34 etoiles sont TOUTES visibles, sans
   deformation. En "slice" (cover) celles qui depassaient etaient rognees.
   Contrepartie : sur un format eloigne du viewBox (1779x1112, ratio 1.60) il
   reste une marge sans etoiles sur un des deux axes. Negligeable en desktop
   (16/9 -> etoiles sur 90% de la largeur), plus marque en portrait mobile ou
   elles se concentrent dans une bande centrale. Ne pas passer en "none" pour y
   remedier : l'etirement deformerait les etoiles (x3,5 en portrait). */
.jw-stars svg {
    display: block;
    width: 100%;
    height: 100%;
}

.jw-stars path {
    /* transform-box: fill-box indispensable en SVG : sans lui l'origine du
       scale est celle du viewBox entier, et les etoiles partent en diagonale
       au lieu de grossir sur place. */
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: jw-twinkle 2.6s ease-in-out infinite both;
    /* Animations en pause tant que la popup n'annonce pas de gain. */
    animation-play-state: paused;
}

.jw-overlay.jw-won .jw-stars path {
    animation-play-state: running;
}

/* Durees et retards varies pour que les etoiles ne clignotent pas en choeur.
   Le nth-child compte a l'interieur de chaque groupe du SVG, ce qui suffit a
   desynchroniser. */
.jw-stars path:nth-child(4n + 1) {
    animation-duration: 3.4s;
    animation-delay: 0.2s;
}
.jw-stars path:nth-child(4n + 2) {
    animation-duration: 2.2s;
    animation-delay: 0.9s;
}
.jw-stars path:nth-child(4n + 3) {
    animation-duration: 4s;
    animation-delay: 1.4s;
}
.jw-stars path:nth-child(4n) {
    animation-duration: 2.9s;
    animation-delay: 0.5s;
}

@keyframes jw-twinkle {
    0%,
    100% {
        opacity: 0.15;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

/* Respect du reglage systeme "reduire les animations" : les etoiles restent
   visibles, simplement fixes. */
@media (prefers-reduced-motion: reduce) {
    .jw-stars path,
    .jw-overlay.jw-won .jw-stars path {
        animation: none;
        opacity: 0.7;
    }
}

/* ==================================================================
   RESPONSIVE - TOUT EN PIXELS, PALIER PAR PALIER
   ==================================================================
   Aucune unite relative (pas de vmin / vw / clamp) : chaque palier fixe
   explicitement le diametre de la roue et la taille des libelles, donc le rendu
   est previsible et se retouche ligne par ligne.

   Rapport a respecter : police = environ 8 % du diametre.
     360px -> 28px    280px -> 22px    220px -> 17px
     320px -> 25px    250px -> 20px    190px -> 15px

   Deux familles de paliers, et c'est necessaire :

   1. LARGEUR : en dessous de 992px la roue passe sous le formulaire (en
      desktop elle est posee en absolu sur la moitie gauche de la modale).

   2. HAUTEUR : sur un ecran large mais peu haut (portable 1920x800, fenetre
      reduite), la largeur ne dit rien de la place disponible. Sans ces paliers
      la roue de 360px + le formulaire depassent l'ecran. C'est exactement le
      probleme qu'on voyait, et c'est le seul cas ou la largeur seule ne suffit
      pas a decider.
   ================================================================== */

/* ---------- 1. PALIERS DE LARGEUR ---------- */
@media (max-width: 1199px) {
    .jw-wheel-wrapper {
        width: 320px;
        height: 320px;
    }
}

@media (max-width: 991px) {

    .jw-overlay {
        align-items: flex-start;
        overflow-y: auto;
        padding: 20px 0;
    }

    .jw-modal {
        width: 94%;
        margin-top: 30px;
    }

    .jw-content {
        flex-direction: column;
        justify-content: center;
        padding: 30px 20px 20px;
    }

    /* Retour dans le flux : c'est LA correction de l'empilement. */
    .jw-wheel-col {
        position: static;
        width: 100%;
        height: auto;
        margin-bottom: 25px;
    }

    .jw-form-col {
        width: 100%;
    }

    /* Empilee et centree, la roue peut etre un peu plus grande qu'a 1199px. */
    .jw-wheel-wrapper {
        width: 340px;
        height: 340px;
        margin: 0 auto;
    }

    /* -54px en desktop pour deborder de la modale : trop agressif ici. */
    .jw-deco {
        width: 70px;
        top: -40px;
        left: -20px;
    }
    .jw-deco-envelop {
        width: 52px;
    }

    /* -90px en desktop pour chevaucher la deco du titre. Une fois empile, ca
       ferait sortir le titre hors de la modale. */
    .jw-title {
        margin-top: 0;
        position: absolute;
        top: -30px;
    }

    .jw-conditions {
        padding: 30px 20px;
        justify-content: center;
    }
    .jw-conditions .jw-right {
        width: 100%;
    }
    .jw-conditions img.gift {
        height: 50px;
        right: 15px;
        top: -35px;
    }
    .jw-conditions img.apple {
        width: 45px;
        left: 15px;
    }
    .jw-conditions .jw-deco-starts-wheel {
        display: none;
    }
    .jw-content {
        margin-top: 100px;
    }
    .jw-title img.jw-deco-starts-title {
        position: absolute;
        width: 10%;
        left: 0;
        margin-top: 45%;
    }
    .jw-deco {
        width: 55px;
        top: -35px;
        left: -25px;
    }
}

@media (max-width: 767px) {

    .jw-choice-modal {
        padding: 30px 20px;
    }
    .jw-choice-item {
        width: 130px;
    }
    /* Les 2 colonnes du recapitulatif passent l'une sous l'autre. */
    .jw-gift-recap {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .jw-gift-code {
        margin: 0 auto 15px !important;
    }
    .jw-gift-steps li {
        text-align: left;
    }
}

@media (max-width: 575px) {
    .jw-segment-label {
        font-size: 16px;
    }
    .jw-content {
        padding: 24px 15px 15px;
    }

    .jw-wheel {
        border-width: 6px;
    }
    /* Pointeur proportionne a la roue reduite. */
    .jw-pointer {
        width: 34px;
        height: 38px;
        right: -12px;
    }
    .jw-deco-envelop {
        width: 40px;
        top: 8px;
        left: 8px;
    }

    .jw-title {
        margin-bottom: 15px;
    }
    .jw-subtitle,
    .jw-gift-teaser-text {
        font-size: 16px;
    }
    .jw-bravo {
        font-size: 30px;
    }
    .jw-conditions .jw-offre,
    .jw-conditions .jw-legal {
        font-size: 13px;
    }

    /* Vignettes de jeux : 2 par ligne plutot qu'une seule tres large. */
    .jw-choice-item {
        width: calc(50% - 8px);
    }
    .jw-choice-list {
        gap: 10px;
    }
}

/* Tres petits mobiles (iPhone SE et assimiles). */
@media (max-width: 374px) {
    .jw-wheel-wrapper {
        width: 220px;
        height: 220px;
    }
    .jw-segment-label {
        font-size: 16px;
    }
}

/* ---------- 2. PALIERS DE HAUTEUR (desktop uniquement) ---------- */
/* Uniquement au-dessus de 992px : en dessous la roue est empilee et la popup
   defile, la hauteur d'ecran n'est donc plus un probleme. */

@media (min-width: 992px) and (max-height: 900px) {
    /*.jw-wheel-wrapper {
        width: 320px;
        height: 320px;
    }
    .jw-segment-label {
        font-size: 25px;
    }*/
}

@media (min-width: 992px) and (max-height: 800px) {
    /*.jw-wheel-wrapper {
        width: 280px;
        height: 280px;
    }
    .jw-segment-label {
        font-size: 22px;
    }*/
}

@media (min-width: 992px) and (max-height: 700px) {
    /*.jw-wheel-wrapper {
        width: 250px;
        height: 250px;
    }
    .jw-segment-label {
        font-size: 20px;
    }*/
    .jw-deco {
        width: 60px;
        top: -34px;
        left: -34px;
    }
    .jw-deco-envelop {
        width: 45px;
    }
}

@media (min-width: 992px) and (max-height: 600px) {
    /* La popup ne tient plus en hauteur : on la laisse defiler. */
    .jw-overlay {
        align-items: flex-start;
        overflow-y: auto;
        padding: 15px 0;
    }
    .jw-wheel-wrapper {
        width: 220px;
        height: 220px;
    }
    .jw-segment-label {
        font-size: 16px;
    }
    .jw-title {
        margin-top: -40px;
    }
}