/* ============================================================
   mobile.css — AstroJew
   Version propre — une seule règle par élément
   ============================================================ */

/* ============================================================
   PC — remet tout à zéro (annule les fuites mobiles)
   ============================================================ */
@media (min-width: 601px) {
    #announcement,
    .announcement {
        margin-top: 85px !important;   /* hauteur user-bar PC */
        min-width: unset !important;
        overflow: visible !important;
        height: auto !important;
    }
    .enveloppe {
        margin-top: 0 !important;
    }
}

/* ============================================================
   MOBILE — max 600px
   ============================================================ */
@media (max-width: 600px) {

    /* ── BODY ── */
    body {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        font-size: 12px !important;
    }

    html {
        font-size: 12px !important;
    }

    /* ── USER-BAR : grid 2 colonnes ── */
    #user-bar {
        display: grid !important;
        grid-template-columns: 54px 1fr !important;
        grid-template-areas:
            "flags login"
            "flags row2" !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: hidden !important;
        padding: 4px !important;
        gap: 3px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        box-sizing: border-box !important;
        align-items: start !important;
    }

    /* ── DRAPEAUX — colonne gauche ── */
    .lang-switcher {
        grid-area: flags !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 3px !important;
        padding-right: 4px !important;
        border-right: 1px solid rgba(255,255,255,0.3) !important;
        margin: 0 !important;
        padding-top: 2px !important;
        width: 50px !important;
        position: static !important;  /* annule le top:60px de zmanim.css */
        top: 0 !important;
    }

    .lang-flag {
        width: 22px !important;
        height: 16px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        border-width: 1px !important;
        border-radius: 2px !important;
    }

    .lang-switcher .announces {
        font-size: 7px !important;
        padding: 1px 2px !important;
        text-align: center !important;
        white-space: nowrap !important;
        margin-top: 2px !important;
    }

    /* ── LOGIN (non connecté) — colonne droite ligne 1 ── */
    .login-form {
        grid-area: login !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #loginForm {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        gap: 3px !important;
        align-items: center !important;
        width: auto !important;
    }

    .login-form-username,
    .login-form-password,
    input[type="text"].login-form-username,
    input[type="password"].login-form-password {
        width: 75px !important;
        min-width: 75px !important;
        max-width: 75px !important;
        height: 24px !important;
        font-size: 10px !important;
        padding: 2px 3px !important;
        box-sizing: border-box !important;
    }

    .btn-login-inline {
        width: 48px !important;
        height: 24px !important;
        padding: 0 3px !important;
        font-size: 9px !important;
        min-width: unset !important;
        max-width: unset !important;
    }

    /* ── UTILISATEUR CONNECTÉ — colonne droite ligne 1 ── */
    .user-info {
        grid-area: login !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        align-items: center !important;
    }

    .user-greeting { font-size: 10px !important; }

    .btn-profile,
    .btn-logout {
        font-size: 9px !important;
        padding: 2px 5px !important;
        height: 20px !important;
        min-width: unset !important;
    }

    /* ── LIGNE 2 : inscription + mdp oublié + contact ── */
    .mobile-row2 {
        grid-area: row2 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 4px !important;
        width: 100% !important;
    }

    .nav-link-forget,
    #contact1,
    #contact2 {
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        position: static !important;
    }

    .nav-link-forget a,
    .btn-register-inline,
    #contact1 a,
    #contact2 a {
        font-size: 9px !important;
        height: 20px !important;
        line-height: 20px !important;
        padding: 0 4px !important;
        min-width: unset !important;
        margin: 0 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* ── BLOC ANNONCES ADMIN ── */
    .bloc-annonces-color {
        grid-area: row2 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 3px !important;
        align-items: center !important;
    }

    .admin-announces,
    .announces {
        font-size: 8px !important;
        padding: 1px 4px !important;
        height: 18px !important;
        line-height: 18px !important;
    }

    .link-btn-NB,
    .link-btn-reset-colors {
        font-size: 8px !important;
        padding: 1px 4px !important;
        height: 18px !important;
    }

    .view-toggle-btn {
        font-size: 9px !important;
        padding: 2px 6px !important;
        min-width: unset !important;
        height: 22px !important;
        margin: 0 !important;
    }

    .manage_subscription {
        font-size: 8px !important;
        padding: 1px 4px !important;
    }

    /* ── ANNOUNCEMENT — sous la user-bar ── */
    #announcement,
    .announcement {
        margin-top: 135px !important;  /* hauteur user-bar mobile */
        min-width: unset !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 30px !important;
        font-size: 0.85em !important;
    }

    .announcement .site-Title,
    .announcement span {
        white-space: normal !important;
        word-break: break-word !important;
        max-width: 100% !important;
        font-size: 0.85em !important;
    }

    .site-Title,
    .site-Title-subscribe {
        font-size: 0.85em !important;
        white-space: normal !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }

    /* ── RSS TICKER ── */
    #col-rss-inner,
    #col-rss-box {
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    /* ── TABLEAUX ── */
    .zmanim-container {
        display: block !important;
        overflow-x: auto !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    #zmanim-table {
        display: block !important;
        width: 100% !important;
        overflow-x: scroll !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #zmanim-table table {
        min-width: 400px !important;
        font-size: 0.65em !important;
    }

    #zmanim-table th,
    #zmanim-table td {
        padding: 3px 2px !important;
        white-space: nowrap !important;
    }

    /* ── INFOS LEGENDE ── */
    .info-banner-container {
        margin: 4px auto !important;
        padding: 0 2px !important;
    }

    .professional-info-banner {
        border-radius: 10px !important;
        max-height: none !important;
        margin: 2px !important;
    }

    .banner-title  { font-size: 11px !important; }
    .banner-icon   { font-size: 14px !important; }
    .info-value    { font-size: 11px !important; }
    .info-label-icon { font-size: 11px !important; }
    .icon_timezone { font-size: 10px !important; padding: 0 4px !important; }
    .settings-label { font-size: 10px !important; }
    .setting-tag   { font-size: 9px !important; padding: 3px 7px !important; }

    .active-settings {
        max-height: none !important;
        padding: 3px 5px !important;
        gap: 4px !important;
        flex-wrap: wrap !important;
    }

    .info-grid {
        grid-template-columns: 1fr !important;
    }

    .info-card,
    .responsive-card {
        font-size: 0.75em !important;
        padding: 2px 4px !important;
        min-height: 28px !important;
        flex-wrap: wrap !important;
    }

    /* ── SECTION DAWN ── */
    #section_dawn {
        gap: 6px !important;
        height: auto !important;
        max-height: none !important;
        padding: 8px !important;
    }

    .dawn-stars_exit {
        margin: 0 !important;
        min-width: unset !important;
        width: 100% !important;
    }

    /* ── ANNOUNCES.PHP ── */
    .main-container {
        flex-direction: column !important;
        min-height: auto !important;
    }

    .right-panel,
    .left-panel {
        flex: none !important;
        width: 100% !important;
        padding: 8px !important;
    }

    .clock-display     { font-size: 22px !important; }
    .candle-display    { font-size: 11px !important; }
    .ann-site-title    { font-size: 13px !important; }
    .ann-site-announce { font-size: 11px !important; }
    .ann-header-icon   { font-size: 18px !important; }
    .ann-title         { font-size: 13px !important; }
    .ann-content       { font-size: 11px !important; }
    .zman-row          { font-size: 12px !important; padding: 6px 8px !important; }
}
@media (max-width: 600px) {
    #section_promo_premium,
    .premium-container {
        margin: 6px 0 !important;      /* supprime les 20px côtés */
        width: 100% !important;
        max-width: 100vw !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        border-radius: 8px !important;
    }
}
@media (max-width: 600px) {

    #section_shema,
    #section_sunrise_sunset,
    #section_shema_MA,
    #section_mincha,
    .sun-event,
    .tephilines-box,
    .prayer-box,
    .prayer-box-MA,
    .mincha-box,
    .sun-info-details,
    .sun-info_details {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: unset !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        max-height: none !important;  /* libère les hauteurs fixes */
    }

    /* sun-event individuel — annule max-width: 200px du CSS principal */
    .sun-event {
        flex: none !important;
        max-width: 100% !important;
        min-width: unset !important;
        padding: 8px !important;
    }

    .sun-event.tephilines-box,
    .sun-event.prayer-box {
        max-width: 100% !important;
        min-width: unset !important;
        min-height: unset !important;
        max-height: none !important;
    }
}
@media (max-width: 600px) {

    #section_shema,
    #section_sunrise_sunset,
    #section_shema_MA,
    #section_mincha,
    .sun-event,
    .tephilines-box,
    .prayer-box,
    .prayer-box-MA,
    .mincha-box,
    .sun-info-details,
    .sun-info_details {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: unset !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        max-height: none !important;  /* libère les hauteurs fixes */
    }

    /* sun-event individuel — annule max-width: 200px du CSS principal */
    .sun-event {
        flex: none !important;
        max-width: 100% !important;
        min-width: unset !important;
        padding: 8px !important;
    }

    .sun-event.tephilines-box,
    .sun-event.prayer-box {
        max-width: 100% !important;
        min-width: unset !important;
        min-height: unset !important;
        max-height: none !important;
    }
}

@media (max-width: 600px) {

    /* ── USER-BAR : Configuration en lignes propres et fluides ── */
    #user-bar, .user-bar {
        display: flex !important;
        flex-direction: column !important; /* On empile par bloc pour ne jamais chevaucher */
        width: 100% !important;
        height: auto !important;
        min-height: unset !important;
        position: relative !important; /* Permet au site de ne pas être mangé en haut */
        padding: 10px !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }

    /* Conteneur du Logo / Titre */
    .logo-section {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* ── DRAPEAUX A L'HORIZONTAL (SANS CHEVAUCHEMENT) ── */
    .lang-switcher {
        display: flex !important;
        flex-direction: row !important; /* Aligne les drapeaux horizontalement */
        justify-content: center !important; /* Les centre au milieu de l'écran */
        align-items: center !important;
        gap: 15px !important; /* Espace propre de 15px entre chaque drapeau */
        width: 100% !important;
        position: relative !important;
        top: unset !important;
        right: unset !important;
        left: unset !important;
        margin: 5px 0 !important; /* Petite marge haut/bas */
    }

    /* Optionnel : Ajuste la taille des liens/images de drapeaux si besoin */
    .lang-switcher a, .lang-switcher img {
        display: inline-block !important;
        width: 24px !important; /* Taille standard bien visible au doigt */
        height: auto !important;
    }

    /* ── BLOC DE CONNEXION / LOGIN ── */
    .login-form, #login-form {
        width: 100% !important;
        margin: 0 !important;
    }

    .login-form form {
        display: flex !important;
        flex-direction: column !important; /* Les champs s'empilent proprement sur mobile */
        width: 100% !important;
        gap: 8px !important;
    }

    .login-form input[type="text"], 
    .login-form input[type="password"] {
        width: 100% !important; /* Prend toute la largeur de l'écran mobile */
        box-sizing: border-box !important;
    }
}
@media (max-width: 600px) {

    /* ── USER-BAR : Compacte et ajustée au contenu ── */
    #user-bar, .user-bar {
        display: flex !important;
        flex-direction: column !important; /* On garde l'empilement global (Logo / Drapeaux / Connexion) */
        width: 100% !important;
        height: auto !important;
        min-height: unset !important;
        position: relative !important; 
        padding: 6px 10px !important;    /* Réduction du rembourrage pour gagner de la hauteur */
        gap: 6px !important;            /* Espace très serré entre les 3 blocs */
        box-sizing: border-box !important;
    }

    /* Conteneur du Logo / Titre */
    .logo-section {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    /* ── DRAPEAUX PARFAITEMENT HORIZONTAUX ET CENTRÉS ── */
    .lang-switcher {
        display: flex !important;
        flex-direction: row !important; /* Force l'horizontalité */
        justify-content: center !important; 
        align-items: center !important;
        gap: 12px !important; 
        width: 100% !important;
        position: relative !important;
        top: unset !important; right: unset !important; left: unset !important;
        margin: 2px 0 !important;       /* Presque aucun espace vertical autour */
    }

    .lang-switcher a, .lang-switcher img {
        display: inline-block !important;
        width: 22px !important; /* Taille ajustée pour mobile */
        height: auto !important;
    }

    /* ── BLOC DE CONNEXION : REMIS À L'HORIZONTAL ── */
    .login-form, #login-form {
        width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    .login-form form {
        display: flex !important;
        flex-direction: row !important;      /* FORCE LA CONNEXION À L'HORIZONTAL */
        flex-wrap: wrap !important;         /* Si l'écran est vraiment trop petit, permet de passer à la ligne proprement */
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        gap: 6px !important;                /* Espace serré entre les champs et le bouton */
    }

    /* Ajustement des champs d'inputs à l'horizontal */
    .login-form input[type="text"], 
    .login-form input[type="password"] {
        width: 110px !important;            /* Largeur fixe et courte pour qu'ils tiennent côte à côte */
        max-width: 35% !important;
        height: 28px !important;            /* Hauteur compacte */
        padding: 2px 4px !important;
        font-size: 11px !important;
        box-sizing: border-box !important;
    }

    /* Ajustement du bouton de connexion */
    .login-form button, .login-btn {
        height: 28px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
        margin: 0 !important;
    }

    /* ── SUPPRESSION DE L'ESPACE VIDE AVEC LES ANNONCES ── */
    #announcement, .announcement {
        margin-top: 0 !important;   /* Supprime le grand espace vide sous la user-bar */
        padding-top: 5px !important;
    }
    
    .enveloppe {
        margin-top: 0 !important;   /* Sécurité pour coller le contenu */
    }
}

@media (max-width: 600px) {

    /* ── USER-BAR : Structure globale en blocs verticaux sans espace vide ── */
    #user-bar, .user-bar {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        min-height: unset !important;
        position: relative !important; /* Libère le flux pour coller au panneau d'annonces */
        padding: 8px 12px !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    /* Conteneur Logo : toujours centré */
    .logo-section {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    /* ── LIGNE INTERMÉDIAIRE : DRAPEAUX À GAUCHE (OU DROITE EN HE) ET NÉOMÉNIES À L'OPPOSÉ ── */
    /* On crée une ligne Flexbox qui pousse les éléments aux deux extrémités */
    .middle-row-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important; /* Pousse les drapeaux d'un côté, néoménies de l'autre */
        align-items: center !important;
        width: 100% !important;
        margin: 2px 0 !important;
    }

    /* Gestion automatique du sens d'alignement selon la langue (LTR vs RTL) */
    body:not(.rtl) .middle-row-container {
        flex-direction: row !important; /* Drapeaux à gauche, néoménies à droite */
    }
    body.rtl .middle-row-container {
        flex-direction: row-reverse !important; /* Néoménies à gauche, drapeaux à droite en Hébreu */
    }

    /* Les drapeaux s'alignent horizontalement sagement */
    .lang-switcher {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        position: relative !important;
        top: unset !important; right: unset !important; left: unset !important;
        margin: 0 !important;
    }

    .lang-switcher a, .lang-switcher img {
        width: 22px !important;
        height: auto !important;
    }

    /* Cible le texte ou bouton des Néoménies (ex: classe .neomenies ou id si existant) */
    .neomenies, #neomenies-btn, .neomenie-section {
        display: inline-block !important;
        margin: 0 !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    /* ── BLOC DE CONNEXION PRINCIPAL (HORIZONTAL) ── */
    .login-form, #login-form {
        width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    .login-form form {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        gap: 6px !important;
    }

    .login-form input[type="text"], 
    .login-form input[type="password"] {
        width: 110px !important;
        max-width: 33% !important;
        height: 28px !important;
        font-size: 11px !important;
        padding: 2px 4px !important;
    }

    .login-form button, .login-btn {
        height: 28px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
    }

    /* ── LIENS SECONDAIRES : PERDU, INSCRIPTION, CONTACT (PARFAITEMENT CENTRÉS) ── */
    .login-secondary-links, .forgot-password-links, .user-actions-links {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important; /* Centre parfaitement au milieu horizontalement */
        align-items: center !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 12px !important; /* Espace équivalent entre chaque lien */
        margin-top: 2px !important;
    }

    .login-secondary-links a, .forgot-password-links a {
        font-size: 11px !important;
        text-decoration: underline !important;
    }

    /* ── CORRECTION DU GRAND VIDE AVEC LES ANNONCES ── */
    #announcement, .announcement {
        margin-top: 0 !important; /* Supprime le grand espace blanc hérité du PC */
        padding-top: 4px !important;
    }

    .enveloppe {
        margin-top: 0 !important;
    }
}
/* ============================================================\
   PC — remet tout à l'horizontal pour les grands écrans
   ============================================================ */
@media (min-width: 601px) {
    /* ... vos règles PC actuelles (announcement, enveloppe...) ... */

    /* Force les drapeaux et les Néoménies à être sur la même ligne sur PC */
    .middle-row-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: auto !important; /* Ne prend que la place nécessaire sur PC */
        gap: 20px !important;   /* Espace propre entre les drapeaux et Néoménies */
    }

    /* Si le site est en Hébreu sur PC, conserve l'ordre naturel */
    body.rtl .middle-row-container {
        flex-direction: row-reverse !important;
    }
}

@media (max-width: 600px) {
    /* ... (Conservez précieusement vos blocs validés : user-bar, drapeaux, connexion et liens) ... */

    /* ── PROTECTION DU BLOC CONTENEUR ── */
    .compass-section-container, #compass-section, .sect_boussole {
        display: flex !important;
        flex-direction: column !important; /* Force l'alignement vertical (l'un sous l'autre) */
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: auto !important;
        gap: 30px !important;              /* Espace de sécurité pour éviter les chevauchements */
        margin: 15px auto !important;
    }

    /* ── LA BOUSSOLE : RÉDUCTION PROPORTIONNELLE ET ISOLEMENT ── */
    #compassCanvas, .compass-canvas {
        display: block !important;
        
        /* 1. Suppression absolue du flottement (ne survole plus le soleil ni les légendes) */
        position: relative !important;
        top: unset !important;
        left: unset !important;
        right: unset !important;
        float: none !important;
        margin: 0 auto !important;

        /* 2. Réduction propre de sa taille à 60% sans casser le rendu JavaScript */
        transform: scale(0.60) !important;
        transform-origin: center center !important;
    }

    /* ── LE GRAPH_AZIMUT : REPREND SA TAILLE ET SA LISIBILITÉ D'ORIGINE ── */
    #chart-azimut, .chart-azimut-container {
        display: block !important;
        position: relative !important;
        top: unset !important;
        left: unset !important;
        margin: 0 auto !important;
        
        /* 1. On le laisse occuper toute la largeur disponible pour qu'il soit bien lisible */
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        
        /* 2. On s'assure qu'il reste à sa taille native (échelle 1) */
        transform: scale(1) !important;
    }

    /* Force le canvas du graphique d'azimut à être fluide */
    #chart-azimut canvas {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
}
/* ==========================================================================
   1. POUR LE PC — Supprime définitivement le cadre blanc sur ordinateur
   ========================================================================== */
@media (min-width: 601px) {
    /* ... conservez vos règles PC existantes ... */

    /* Force la transparence absolue sur TOUS les éléments du bloc boussole */
    .sect_boussole,
    .sect_boussole *,
    #compassCanvas,
    .compass-canvas {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
}

/* ==========================================================================
   2. POUR LE MOBILE — Supprime le cadre blanc et ajuste la taille sur smartphone
   ========================================================================== */
@media (max-width: 600px) {
    /* ... conservez vos blocs validés (user-bar, drapeaux, connexion) ... */

    /* Force la transparence absolue sur TOUS les éléments du bloc boussole sur mobile */
    .sect_boussole,
    .sect_boussole *,
    #compassCanvas,
    .compass-canvas {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Ajustement de la taille de la boussole seule pour mobile */
    #compassCanvas, .compass-canvas {
        display: block !important;
        position: relative !important;
        top: unset !important; left: unset !important; right: unset !important;
        float: none !important;
        margin: 10px auto !important;
        width: 140px !important;
        height: 140px !important;
    }

    /* Le graphique d'azimut reste intact et fluide en dessous */
    #chart-azimut, .chart-azimut-container {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        margin: 15px auto !important;
    }
    #chart-azimut canvas {
        width: 100% !important;
        height: auto !important;
    }
}

/* ================================================
   BOUSSOLE MOBILE — TRANSPARENCE TOTALE + PAS DE CHEVAUCHEMENT
   ================================================ */
@media (max-width: 600px) {

    .compass-section-container, 
    #compass-section, 
    .sect_boussole {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        gap: 15px !important;
        margin: 10px auto !important;
        background: transparent !important;
    }

    #compassCanvas, 
    .compass-canvas,
    #compassCanvas * {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        position: relative !important;
        margin: 10px auto !important;
        width: 130px !important;
        height: 130px !important;
    }

    /* Force le canvas à ne pas dessiner de fond blanc */
    #compassCanvas {
        background: transparent !important;
    }
}