<style>
/*  zmanim.css V170226 with video 

4 valeurs : Haut | Droite | Bas | Gauche 
margin: 10px 20px 30px 40px;

 3 valeurs : Haut | Gauche&Droite | Bas 
margin: 10px auto 20px;

 2 valeurs : Haut&Bas | Gauche&Droite 
margin: 15px 50px;

 1 valeur : Les 4 côtés sont identiques 
margin: 20px;
*/
* {
 //   max-width: 1005!important; 
   box-sizing: border-box !important; 
}
body {
	font-family: <?= $isRTL ? '"Arial", "Segoe UI"' : '"Segoe UI", Roboto' ?>, sans-serif;
    background: linear-gradient(to bottom, #f9fafc, #e9eef5);
    color: #222;
    margin: 2px;  
    overflow-x: hidden; /* AJOUTER cette ligne */
}
 body.rtl .info-banner-container,
    body:not(.rtl) .info-banner-container {
    margin: 10px auto !important;
    width: 95% !important;
    }
.enveloppe{

   // max-width: 1400px;


}
/* --- Conteneur principal --- */
.user-navigation {
    display: flex;
    gap: 6px; /* Augmenté pour plus de clarté */
    flex-wrap: wrap;
    margin-top: 8px;
    /* On utilise margin-inline pour gérer le RTL/LTR automatiquement en CSS moderne */
    margin-<?= $isRTL ? 'right' : 'left' ?>:5px; 
    max-width: 100% !important;
    justify-content: center; /* centrage horizontal */

}

/* --- Liens communs --- */
.nav-link, .nav-link-forget, .nav-link-contact {
    font-size: <?= $lang=='ru' ? '10' : '12' ?>px;
    gap: 2px;
    display: flex; /* Pour aligner le contenu des liens */
}


/* --- Style des liens (A) --- */
.nav-link-forget a, 
.nav-link-contact a,
.nav-link a {
    color: #eeffee !important;
    text-decoration: none;
    font-size: 1.3em;
    font-weight: 500;
    transition: all 0.2s;
    background: #7799cc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 10px; /* Utilise du padding au lieu d'une largeur fixe pour le texte */
    min-width: 90px;
    white-space: nowrap;
    
    /* ATTENTION : Le margin 100px est trop gros pour mobile. 
       Je le réduis pour que ça tienne sur une ligne */
    margin-<?= $isRTL ? 'left' : 'right' ?>: 20px !important;
}

/* --- Ajustements spécifiques Contact --- */
.nav-link-contact a {
    max-width:60px;
    margin-<?= $isRTL ? 'left' : 'right' ?>:10px !important;


}

.announces{
 background: #7799cc;
 color: #ffffff !important;
 padding-top:-4px  !important;
 margin-top: -1px ;
  margin-right: 3px !important;
  width-min:120px;
  	 justify-content: center;
  	   font-size:1.1em !important;
}
.admin-announces{
 background: #7799cc;
 color: #ffffff !important;
  font-size:1.1em !important;
  margin-top: -1px ;
   margin-right: 3px !important;
 width-min:120px;
 	 justify-content: center;

}
.link-btn-NB{
	 background: #7799cc;
	 height:25px;
	 margin: 1px;
	 justify-content: center;
	 width-max:100px;
     color: #ffffff !important;
     font-size:1.1em !important;

}
.link-btn-reset-colors{
	background: #7799cc;
	padding-bottom:2px ;
	margin: 1px ;
	height:25px;
    justify-content: center;
    color: #ffffff !important;
    font-size:1.1em !important;

}

/* --- Hovers et Effets --- */
.nav-link-forget a:hover, 
.nav-link-contact a:hover,
.nav-link a:hover {
    color: #ffffff !important;
    text-decoration: underline;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    background: #667eea; /* Change de couleur au survol */
}

/* --- Mode Secondaire (Blanc) --- */
.nav-link.secondary a, 
.nav-link-forget.secondary a,
.nav-link-contact.secondary a {
    background: white !important;
    color: #667eea !important;
    border: 2px solid #667eea;
}
 .nav-link-contact {
   padding: -5px important;
    
 }
 
 .nav-link.secondary a:hover, 
.nav-link-forget.secondary a:hover {
    background: #f8f9fa !important;
}

/* Responsive pour petits écrans */
@media (max-width: 768px) {
    .nav-link ,nav-link-forget ,nav-link-contact {
        font-size: 0.8em;
        padding: 5px 10px;
        gap: 4px;
    }
.user-navigation {
 
    margin<?= $isRTL ?'-right' :  '-left' ?>: 10px;
    margin<?= $isRTL ?'-left' :  '-right' ?>: 5px;
 
    }

}
/* Base */
.bloc-annonces-color {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
}

.bloc-annonces-color .text-short {
    display: contents;
}

/* Mobile : 2 colonnes × 2 lignes */
@media (max-width: 1500px) {
    .bloc-annonces-color {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3px;
        width: 50%;
        font-size:0.7em !important;
    }

    .bloc-annonces-color .text-short {
        display: contents; /* les <a> deviennent enfants directs de la grille */
    }

    .bloc-annonces-color .admin-announces,
    .bloc-annonces-color .announces,
    .bloc-annonces-color .link-btn-NB,
    .bloc-annonces-color .link-btn-reset-colors {
        width: 50%;
        box-sizing: border-box;
        text-align: center;
        justify-content: center;
    }
}
/**********************************************************   announcement ************************************* */
.annual_table_section{
    margin:1px 1px -1px 1px; 

    max-width: 100% important; 

}
.site-logo {
    max-height: 38px;    /* On limite la hauteur pour ne pas déformer la barre */
    width: auto;         /* Garde les proportions de l'image */
    display: block;      /* Évite les espaces vides bizarres sous l'image */
    transition: transform 0.3s ease; /* Pour un petit effet sympa quand on passe la souris */
    margin-right: 30px;
}
.site-announcement{
    background: linear-gradient(180deg, #FF6B35 0%, #FFA500 100%);
 	color: #99aaff;
    font-size: 1.5em;
	margin-top: 53px;

}
.site-Title{
    background: linear-gradient(180deg, #FF6B35 0%, #FEA500 100%);
 	color: #5577cc;
    font-size: 1.2em;
    margin-right: 30px;
    margin-left: 30px;
}
.site-Title-subscribe{
    background: linear-gradient(180deg, #FF6B35 0%, #FFA500 100%);
 	color: #5588aa;
    font-size: 1.2em;
    margin-right: 30px;
    margin-left: 30px;
}

/* Clignotement doux pour connecté non-premium */
@keyframes blink-soft {
    0%   { opacity: 1; }
    50%  { opacity: 0.25; }
    100% { opacity: 1; }
}
.blink-subscribe {
    animation: blink-soft 1.4s ease-in-out infinite;
}

.announcement {
    display: flex;
 // align-items: center;     /* CENTRAGE VERTICAL */
 //  justify-content: center; /* centrage horizontal */
    padding: 0;              /* SUPPRIME le décalage */
    background: linear-gradient(180deg, #FF6B44 0%, #FFA500 100%);
    color: #5522cc;
    font-size: 1.9em;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 998;
    margin-top: 5px;
    margin-bottom: 4px;
    border-top-left-radius: 5;
    border-top-right-radius: 5;
    min-height:50px;
    max-width: 100% !important; 

}

.section_annonces{
  
    display: flex;
    align-items: center;     /* CENTRAGE VERTICAL */
    justify-content: center; /* centrage horizontal */
    padding: 0;              /* SUPPRIME le décalage */
    background: linear-gradient(180deg, #FF6B35 0%, #FFA500 100%);
    color: #6622ee;
    font-size: 1.9em;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 998;
    margin-top: +1px;
    margin-bottom: 1px;
    border-top-left-radius: 5;
    border-top-right-radius: 5;
    max-width: 100% important; 

}
    // ------------------
.premium-container {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 6px 20px !important;
    padding: 20px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #777788 !important; 
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
    box-sizing: border-box !important;
}

/* Force aussi la couleur des titres et textes à l'intérieur */

.premium-container  {
     color: #ffffcc !important;
     background: linear-gradient(135deg, #667eea 0%, #764bea 100%) !important;
     padding: 15px !important; box-sizing: border-box !important;
     border-radius: 15px;
}
h1 {
    text-align: center;
    color: #003366;
    margin-bottom: 10px;
}
.lang-switcher {
	
    display: flex;
  /* align-items: left; /* centre verticalement */
  /*  justify-content: flex-start; /* aligné à gauche */
   /* position: fixed; */
    top: 2px;
    text-align: <?= $isRTL ? 'left' : 'right' ?> 10px;
    z-index: 1000;
    display: flex;
    gap: 10px;
    margin<?= $isRTL ? '-left' : '-right' ?>: 30px;
    margin<?= $isRTL ? '-right' : '-left' ?>: 20px;
	padding-left: 0px;
}
.lang-flag {
    max-width: 28px;
    height: 25px;
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 5px;
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.lang-flag:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.lang-flag.active {
    border-color: #ff3366;
    box-shadow: 0 0 10px rgba(0,51,102,0.5);
}

.span.flag{
    border-color: #dddd99;
    box-shadow: 0 0 10px rgba(0,51,102,0.5);
}
.form-container {
    max-width: 900px;
    margin: 20px auto;
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
}
.alert-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}
.alert-error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}
.form-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.form-section h3 {
    margin-top: 0;
    color: #003366;
    font-size: 1.1em;
    border-bottom: 2px solid #003366;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}
.form-group {
    flex: 1;
    min-width: 200px;
}
label {
    display: block;
    font-weight: 600;
    color: #003366;
    margin-bottom: 5px;
    font-size: 1.5em;
}
input[type="text"],
input[type="number"],
input[type="date"] {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box;
    transition: border-color 0.3s;
}
input:focus {
    outline: none;
    border-color: #003366;
}
.btn-submit {
    background-color: #003366;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
    transition: background-color 0.3s;
}
.btn-submit:hover {
    background-color: #005599;
}
.info-text {
    font-size: 0.95em;
    color: #666;
    margin-top: 3px;
}
h2 {
    text-align: center;
    color: #555;
    font-size: 1.1em;
    margin: 20px 0;
}

/* Structure flex horizontale par défaut
.sun-info {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
 */
.sun-info {
    text-align: center;
    background: white;
    margin: -5px auto;
    padding: 2px;
	width: calc(100% - 00px) !important; 
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
 	display: flex;
  	justify-content: center;
	flex-wrap: wrap;
    gap: 10px;
 	flex-direction: row !important;
	min-height: 430px !important;
	
	
}
/* ORDRE DESKTOP */
#section_tsitsit {
    order: 1;
    background: linear-gradient(180deg, #b8cfe8 0%, #e8d5a3 100%);
    color: #2c3e50;
    max-height:470px !important; 

}
#section_shema { order: 2; }
#section_sunrise_sunset { order: 5 !important; }
#section_dawn-stars_exit { order:4 }
#section_shema_MA { order:3; }
#section_mincha { order: 6; }

#section_tsitsit,
#section_shema,
#section_shema_MA,
#section_mincha,
#section_sunrise_sunset {
    outline: 2px solid #003399;
    outline-offset: -2px;
}


.view-toggle{

     max-height:20px;

}
/////////////////////////////////////////////////////
.sun-info-details .infos-legende{
    text-align: justify;
	background: linear-gradient(to bottom, lightblue, white);
    margin-right:3px ;
  	margin-<?= $isRTL ? 'right'  :  'left'?>:72px ;
    padding-<?= $isRTL ? 'right'  :  'left'?>:10px;
    display: flex;
    min-height: 40px;
    max-height: 60px;
	width: calc(100% - 60px); 
    border-radius: 6px;

	
}
.sun-info_details {
    background: none;
    margin: 2px auto;
    padding: 2px;

}
.sun-event {
    flex: 1;
    min-width:120px; /* Réduit de 250px à 220px */
    max-width: 200px; /* AJOUT : largeur maximale */
    padding: 20px;
    border-radius: 8px;
    max-height: 400px;
}

.sun-event.tephilines-box {
    flex: 0.7;
    min-width: 160px;
    max-width: fit-content; 
    background: linear-gradient(180deg, #a7d5ed 0%, #5699b7 100%);
    color: white;
    font-size: 1em; /* Augmenté de 1.3em à 1.5em */
    max-height: 450px!important;
}
.sun-event.prayer-box {
    background: linear-gradient(180deg, #89a4c7 0%, #f4a460 100%);
    color: white;
    flex: 0.7;
    max-width: fit-content; min-width: 140px;
    min-height: 410px!important;
    max-height: 420px!important;
    font-size: 1em; /* Augmenté de 1.3em à 1.5em */

}
.sun-event.prayer-box-MA {
    background: linear-gradient(180deg, #5ccc9e 0%, #7b8ce3 100%);
    color: white;
    flex: 0.7;
    min-width: 140px;
    max-width: fit-content; min-width: 180px;
    max-height: 450px!important;
}
.sunrise-box {
    background: linear-gradient(180deg, #FF6B35 0%, #FFA500 100%);
    color: white;
    font-weight: bold;
    min-height: 50px;
    max-height: 80px;
}
.sunset-box {
    background: linear-gradient(180deg, #4A5899 0%, #7B68EE 100%);
    color: white;
	font-weight: bold;
    min-height: 50px;
    max-height: 80px;
}
.sun-event.sunset-box.label {
    font-size: 2em;

}
.sun-event .emoji {
    font-size: 2em;
    display: block;
    margin-bottom: 5px;
}
.sun-event .label {
    font-size: 1.4em;
    opacity: 0.9;
}
.sun-event .time {
    font-size: 1.8em;
    font-weight: bold;
    margin: 5px 0;
}
.sun-event .relative-info {
    font-size: 0.5em;
    margin-top: -15px;
    padding-top: 0px;
    border-top: 1px solid rgba(255,255,255,0.3);
    opacity: 0.95;
}
.sun-event .relative-value {
    font-weight: bold;
    font-size: 1.5em;
    margin-top: -15px;;

}

    /* Mincha - Position 4 (bas droite) */
    #section_mincha,
    .mincha-box {
        grid-column: 2 !important;
        grid-row: 3 !important;
        width: 100% !important;
        min-width: 220px !important;
   	/*	display: flex;*/
  		flex-direction: column;
        padding: 2px !important;
        margin: 0px 0 0 0 !important;
        box-sizing: border-box !important;
	    max-height:470px !important; 
 	    background: linear-gradient(180deg, #90c0b0 0%, #987991 100%); 
    	color: white;
  		font-size: 1.3em; 
    }


.plag{
    margin: -15px ;

	font-size: 1.1em; 
}
.label_RO{
	font-size: 0.8em; 
}

.charts-side-by-side {
    width: calc(100% - 60px); 
    margin: 30px auto;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.chart-container {
    flex: 1;
    width: 98%; 
    min-height: 380px; 
    max-height: 410px; 
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative; /* AJOUT : pour positionner la boussole en absolu */
 
   }

/* Conteneur de la boussole en overlay */
.compass-overlay {
    position: absolute;
    top: 100px !important;  /* Position depuis le haut */
    left: 140px !important; /* Position depuis la gauche */
    z-index: 10;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Supprimer l'ancien conteneur pleine largeur */
.chart-container-full.compass-container {
    display: none; /* Cache l'ancien conteneur de boussole */
}

.chart-container-full {
    max-width: 1000px;       
    height: 400px;           /* AJOUTÉ : hauteur fixe de 400px */
    margin: 30px auto;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.chart-container-full canvas {
    max-height: 350px !important;  /* AJOUTÉ : hauteur max du canvas */
}

table {
    width:80%;
    margin: 30px auto;
    border-collapse: collapse;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
}
th {
    background-color: #003366;
    color: white;
    padding: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
td {
    text-align: center;
    padding: 8px 10px;
    border-bottom: 1px solid #ccc;
}
tr:nth-child(even) {
    background-color: #f3f7fc;
}
tr:hover {
    background-color: #e8f0fe;
}
footer {
    text-align: center;
    font-size: 1em;
    color: #666;
    margin-top: 25px;
}
.btn-clear {
    background-color: #dc3545;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 10px;
    max-width: 130px;
}
.btn-clear:hover {
    background-color: #c82333;
}
.btn-load {
    background-color: #28a745;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s;
    max-width: fit-content; min-width: 180px;
}
.btn-load:hover {
    background-color: #218838;
}
.quick-buttons {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
}
.quick-buttons-title {
    font-size: 1em;
    color: #666;
    margin-bottom: 8px;
    font-weight: 600;
}
.buttons-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
	
.prayer-box .time {
    font-size: 1.6em;
    font-weight: bold;
    margin: 5px 0;
}

.prayer-box .emoji {
    font-size: 1.6em;
    display: block;
    margin-bottom: 5px;
}

.prayer-box .label {
    font-size: 1.6em;
}

.mincha-box .time {
    font-size: 1.3em; /* Plus petit que les autres (1.8em) */
    font-weight: bold;
    margin: 5px 0;
}

.mincha-box .emoji {
    font-size: 1.5em; /* Plus petit que les autres (2em) */
    display: block;
    margin-bottom: 5px;
}

.mincha-box .label {
    font-size: 1em;
    opacity: 0.9;
}


/* À AJOUTER dans la section <style> après .sunset-box */
.dawn-stars_exit {
    background: linear-gradient(180deg, #668EEb 0%, #774BA7 100%);
    color: white;
    max-width: fit-content;
    min-width: 200px;
    max-height: 470px;
    padding: 5px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    flex: 1;
    box-sizing: border-box;
    margin:0 -20px 0 0 ;
      font-size: 0.8em;
}
.unified-sun-box {
    background: linear-gradient(180deg, #FF6B35 0%, #FFA500 50%, #4A5899 100%);
    color: white;
    flex: 2;
    min-width: 420px;
    max-width: 500px;
    width: 500px;           /* largeur fixe - empeche tout recalcul */
    min-height: 420px;      /* hauteur fixe - empeche le sautillement */
    max-height: 470px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 2px;
    box-sizing: border-box;
}

.unified-sun-box .sun-section {
    text-align: <?= $isRTL ? 'right' : 'left' ?>;
    padding: 5px;
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    max-height: 60px;
    margin: 10px; /* espace à l'extérieur du cadre */


}
.clock-section {
    text-align: center;
    padding-left: 130px;
    background: rgba(165,99,11,0.3);
    border-radius: 20px;
    border:6px solid rgba(255,255,255,0.3);
    height: 50px;           /* hauteur fixe */
    max-height: 50px;
    max-width: 700px;
    margin-left:20px;
    margin-top:5px;
    font-size: 1.8em;
    font-weight: bold;
    white-space: nowrap;
   // overflow: hidden;
}
.clock-section_he {
    text-align: right;
    padding-right:146px; /* espace à l'intérieur du cadre */
    background: rgba(a5,99,11,0.3);
    border-radius: 20px;
    border:6px solid rgba(255,255,255,0.3);
    max-height: 60px;
    max-width: 700px;
    margin-right:20px; /* espace à l'extérieur du cadre */
    margin-top: 5px;
    font-size: 1.8em;
    font-weight: bold;
}
.unified-sun-box .emoji {
    font-size: 2em;
    display: block;
    margin-bottom: 5px;
    max-height: 30px;

}
.clock-emoji {
    margin-bottom: 5px;
    max-height: 8px;
    font-size: 1.5em; /* Plus petit que les autres (2em) */
	margin:-5px;
}

.unified-sun-box .label {
    font-size: 1.0em;
    opacity: 0.9;
    margin-bottom: 5px;
}
#currentClock {
    /* On force une police à chasse fixe pour Chrome/Brave/Opera */
    font-family: 'Arial', Courier, monospace; 
    font-variant-numeric: tabular-nums;
    letter-spacing: 0px;
    display: inline-block;
}
.unified-sun-box .time-big {
    font-size: 1.2em;
    font-weight: bold;
    margin: 5px 0;
    text-align:justify;
}

.unified-sun-box .sub-time {
    font-size: 1.0em;
    opacity: .95;
    text-align:justify;

}
.unified-sun-box .sub-time-exit {
    font-size: 1.0em;
    opacity: .95;
    text-align:justify;
    padding:0 0px;

}
.unified-sun-box .sub-time-exit-RT {
    font-size: 1.2em;
    opacity: .95;
    text-align:justify;
    padding:0 0px;


}
.unified-sun-box .sub-date {
    font-size: 0.8em;
    opacity: .95;
    text-align:justify;
    padding:8px 14px;

}
.unified-sun-box .relative-info-bottom {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    margin-top: 2px;
    padding-top: 2px;
    border-top: 2px solid rgba(255,255,255,0.3);
    font-size: 0.9em;
}

.unified-sun-box .relative-value {
    font-weight: bold;
    font-size: 0.9em;
}
.hebrewDate {
    font-weight: bold;
    font-size: 1.2em;
    margin-top: 14px;
    display: block;
    white-space: normal;
    overflow: hidden;
}
</style>
<style>
:root {
    --user-bar-height: 80px;
}
.user-bar {
   width: 100% !important; 
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    margin-bottom:4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 999;
    display: flex;
	justify-content: center;
    align-items: center;
    padding: 4px 0px 4px 0;        
    
}
.user-bar .register-btn {
    display: inline-flex;     /* CRUCIAL */
    align-items: center;
    justify-content: center;
    padding: 18px 22px;
    min-width: 100px;
    box-sizing: border-box;
}

.user-info {
    display: flex;
    gap: 15px;
    align-items: center;
}

.user-greeting {
    font-size: 1.6em;
    margin-right: 2px;
}
.user-bar a.register-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;      /* largeur réelle */
    min-width: 140px;       /* bouton large */
    line-height: normal;
    font-size: 1.2em;
    box-sizing: border-box;
}

.btn-profile, .btn-logout {
    background:#99bbdd;
    color: white;
    padding: 6px 5px;
	margin <?= $isRTL ? '-right' : '-left' ?>: 15px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 1.0em;
    transition: all 0.3s;
    border: 1px solid rgba(255,255,255,0.3);
}
 .btn-logout {
   ;
   /* margin <?= $isRTL ? '-left' : '-right' ?>: -40px; */  
}
.btn-profile:hover, .btn-logout:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-1px);
}

/* Formulaire de connexion inline */
.login-form form {
  /* 1. Active Flexbox sur le formulaire */
  display: flex; 
  
  /* 2. Optionnel : Espace uniforme entre les éléments */
  gap: 15px; /* Ajoute un espace de 10px entre tous les enfants directs */
  
  /* 3. Optionnel : Centre verticalement si certains éléments ont des hauteurs différentes */
  align-items: center; 
}

/* Optionnel : Amélioration de la présentation */
.login-form input,
.login-form button,
.login-form a {
  /* Assurez-vous qu'ils aient une hauteur similaire pour un meilleur alignement */
  height: 40px; 
  /* Optionnel : supprime la décoration sous le lien */
  text-decoration: none; 
  /* Assurez-vous qu'ils s'alignent bien avec le centre vertical */
  line-height: 20px;
}



.login-input::placeholder {
    color: rgba(255,255,255,0.7);
}

.login-input:focus {
    outline: none;
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.5);
}

.btn-login-inline { 
    cursor: pointer; 
    transition: all 0.3s; 
    text-decoration: none; 
    display: inline-flex; 
    align-items: center; 
    gap: 4px; 
	padding: 8px 30px; /* 8px en haut/bas (pour le centrage), 30px à gauche/droite (pour la largeur) */
	margin: 1px 0px 0px 0px;                  
	width : 100px;
    height: 40px; /* Définir une hauteur fixe pour le bouton */
    border-radius: 10px; 
    justify-content: center;     /* AJOUTÉ : centrage horizontal */

}
.btn-login-inline {
    background: rgba(255,255,255,0.9);
    color: #667eea;
}

.btn-login-inline:hover {
    background: rgba(255,255,255,0.2);
    border-color: red;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.btn-register-inline {
    width: 90px;
    padding: 3px 2px;          
    margin<?= $isRTL ? '-right:' : '-left:' ?> 1px;   /*<?= $isRTL ? '-right:' : '-left:' ?>  */   
    margin-top: 1px;               
    background: white;
    color: blue;
    border-radius: 15px; 
    border: 2px solid red;       /* CORRIGÉ : border au lieu de border-color */
    display: inline-flex;        /* AJOUTÉ : pour alignement */
    align-items: center;         
    justify-content: center;    
    line-height: normal;         
    cursor: pointer;             
    transition: all 0.3s;
    height: 32px;        
}
.btn-register-inline:hover {
    background: rgba(255,255,255,0.2);
    border-color: red;
}
.login-form-username {
    max-width: 130px !important;      
    width: 120px !important;          
    border-radius: 15px;
    margin: 1px 0px 0px 0px  !important;                 
    display: inline-flex;
    font-size: 1.1em!important;

}

.login-form-password {
    margin: 1px 0px 0px 0px !important;            
    width: 120px !important;       
    max-width: 130px !important;      
    border-radius: 15px;
    display: inline-flex;
    font-size: 1.1em!important;

}
.lang-switcher {
    top: 60px !important; /* Déplacer sous le bandeau */
}

/* Message d'erreur élégant */
.login-error {
    position: fixed;
    top: 60px;
    right: 20px;
    background: #ff4444;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    animation: slideInRight 0.3s ease;
    z-index: 1000;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes slideUp {
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-30px);
    }
}
.subscription{
		display: inline-block;
		 margin-top: 8px;
		 padding: 12px 20px;
		 background: none; 
	     color: #eeeeee !important;  /* Le !important force l'application si d'autres règles interfèrent */
		 text-decoration: none;
		 border-radius: 8px;
		 font-weight: bold;
		 transition: transform 0.2s;
		 max-height: 70px;
		 max-width: 450px;
		 text-size:	1.7em;
    }
.manage_subscription {
 max-width: 150px;
	text-size:	1.7em;
	align-items: center;
	margin:0 10px;
    background: #7788cc;
    color: #eeeeee !important;  /* Le !important force l'application si d'autres règles interfèrent */
    text-decoration: none;       /* Optionnel : enlève le soulignement */
    }
 @keyframes slideOutRight {
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}  


.user-info {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.view-toggle{

     max-height:22px;

}

body {
    padding-top: 80px; /* Pour ne pas cacher le contenu */
}

.lang-switcher {
    top: 70px !important; /* Adapter le sélecteur de langue */
}
.admin-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 15px 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    max-height:40px;
    max-width:200px;
}

.admin-badge {
    background: rgba(255,255,255,0.2);
    padding: 4px 4px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9em;
    backdrop-filter: blur(10px);
    margin-top: 1px;
 	margin-bottom: 1px;

    }

.view-toggle-btn {
    background: #ddaaaa;
    color: #667eea;
    padding: 5px 5px;
    margin<?= $isRTL ? '-left' : '-right' ?>: 15px;
    margin<?= $isRTL ? '-right' : '-left' ?>: -12px;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 140px !important;
    max-width: 160px !important;
    max-height: 50px;
	color:white
}

.view-toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
    
}

.back-to-admin-btn {
    position: fixed;
    top: 20px;<?= $isRTL ? 'left' : 'right' ?>: 20px;
    z-index: 999;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 25px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    transition: all 0.3s;
}

.back-to-admin-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.admin-mode-indicator {
    position: fixed;
    bottom: 20px;
    <?= $isRTL ? 'right' : 'left' ?>: 20px;
    z-index: 998;
    background: rgba(102, 126, 234, 0.9);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: bold;
    backdrop-filter: blur(10px);
}

.admin-panel-container {
    max-width: 1800px;
    margin: 5px auto;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    overflow: hidden;
}

.admin-panel-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2px;
    text-align: center;
    max-height:70px !important;
}

.admin-panel-header h1 {
    margin: 0;
    font-size: 2em;
}

.admin-panel-body {
    padding: 30px;
}

.admin-section {
    margin-bottom: 0px;
     margin-top: 28px;
    padding: 5px;
    background: #f8f9fa;
    border-radius: 10px;
    border-left: 4px solid #667eea;
    height=400px !important;
}

.admin-section h3 {
    margin-top: 10px;
    color: #667eea;
    font-size: 1.3em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 2px solid #e0e0e0;
}

.btn-primary-admin {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    max-width:450px;
}

.btn-primary-admin:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.btn-secondary-admin {
    background: white;
    color: #667eea;
    border: 2px solid #667eea;
    padding: 15px 40px;
    border-radius: 10px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-secondary-admin:hover {
    background: #667eea;
    color: white;
}
.identity-admin{
	margin:100px;
	border: none;
	max-width: 300px;
	margin-top:20px;
}
	.site_title_admin{
			width: 500px !important;
}

    body {
        margin: 0;
        font-family: "Heebo", "David", Arial, sans-serif;
        background: #f4f4f4;
    }

    .container-annonces {
    	width: calc(100% - 60px) !important;
        display: grid;
        grid-template-columns: 1fr 2fr;
        height: 600px;
        padding: 20px;
        margin-top: 28px ;
        margin-right: 12px ;
        border-radius: 120px;       
    }

    .zmanim {
        background: #ffffff;
        padding: 30px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .zmanim h1 {
        font-size: 48px;
        margin-bottom: 20px;
    }

    .zman {
        display: flex;
        justify-content: space-between;
        font-size: 36px;
        margin: 15px 0;
    }

    .highlight {
        color: #b8860b;
        font-weight: bold;
    }

    .side {
        background: #7799cc;
        color: #ffffff;
        padding: 25px;
    }

    .side h2 {
        font-size: 32px;
        border-bottom: 2px solid #ffffff;
        padding-bottom: 10px;
    }

    .side .item {
        font-size: 24px;
        margin: 15px 0;
    }

    .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        font-size: 22px;
        padding: 10px;
        background: #ddd;
    }
@keyframes blink-red {
    0%, 49% { color: #FF0000; text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
     }
    50%, 100% { color: #FF9999; text-shadow: 0 0 20px rgba(255, 0, 0, 1);
     }
}

.time-alert {
    animation: blink-red 1s ease-in-out infinite;
    font-weight: bold !important;
}
/* --- Gestion de l'alignement selon la langue (LTR vs RTL) --- */

/* Pour les langues se lisant de gauche à droite (FR, EN, ES, RU) */
body:not(.rtl) .info-banner-container {
    margin-left: 20px !important;
    margin-right: auto !important;
    text-align: left;
}

/* Pour l'hébreu (RTL) */
body.rtl .info-banner-container {
    margin-right: 20px !important;
    margin-left: auto !important;
    text-align: right;
}
/* ================================================
   MODE DESKTOP (> 768px) - STRUCTURE ORIGINALE
   ================================================ */

    /* ===== 7. GRILLE 2x2 POUR LES 4 PETITES CARTES ===== */
    
    /* Créer une sous-grille 2x2 après le sunrise/sunset */
    .sun-info::after {
        content: '';
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }


   
div.separator {
    height: 4px;                 /* Épaisseur minimale */
    background: rgba(0, 0, 0, 0.1); /* Noir très transparent (gris invisible) */
    margin: 15px auto;           /* Espacement haut/bas */
    width: 90%;                  /* Ne touche pas les bords pour plus de légèreté */
    border: none;                /* On enlève toute bordure par défaut */
}
    /* Shema - Position 2 (haut droite) */
    #section_shema,
    .prayer-box:not(.prayer-box-MA) {
        grid-column: 2 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 180px !important;
	    max-width: fit-content;
   		display: flex;
  		flex-direction: column;
        padding: 14px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
   	    max-height:470px !important; 
        overflow: visible !important;
    }

 /* dawn-stars_exit- Position 3 (bas gauche) */
    #dawn-stars_exit{
        grid-column: 1 !important;
        grid-row: 3 !important;
      
    }
    /* Shema MA - Position 3 (bas gauche) */
    #section_shema_MA,
    .prayer-box-MA {
        grid-column: 2 !important;
        grid-row: 3 !important;
      
    }


    /* ===== VARIANTE : 1 CARTE PAR LIGNE AU LIEU DE 2x2 ===== */
    /* Décommentez cette section si vous préférez */
    /*
    #section_tsitsit { grid-column: 1 / -1 !important; grid-row: 2 !important; }
    #section_shema { grid-column: 1 / -1 !important; grid-row: 3 !important; }
    #section_shema_MA { grid-column: 1 / -1 !important; grid-row: 4 !important; }
    #section_mincha { grid-column: 1 / -1 !important; grid-row: 5 !important; }
    */

    /* ===== 8. HORLOGE DANS UNIFIED BOX ===== */
    .clock-section,
    .clock-section_he {
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        font-size: 2em !important;
}

    .clock-section_he {
        text-align: center !important;
    }

    /* ===== 9. GRAPHIQUES ===== */
    .charts-side-by-side {
        flex-direction: column;
        gap: 30px;
        width: 100% !important;
        margin: 20px auto !important;
        padding: 0 10px !important;
    }

    .chart-container {
        width: 98% !important;
        max-width: 98% !important;
        min-height: 450px !important;
        max-height: none !important;
        height: 400px !important;
        padding: 20px 10px !important;
    }

    .chart-container canvas {
        height: 350px !important;
        width: 98% !important;
    }
/* Conteneur de la boussole en overlay */
.compass-overlay {
    position: absolute;
    top: 100px !important;
    left: 95px !important;
    z-index: 10;
    background: transparent !important;     /* ← Changé */
    border-radius: 12px;
    padding: 8px;
    box-shadow: none !important;            /* ← Supprimé l'ombre */
    border: none !important;
}

    #compassCanvas {
        width: 150px !important;
        height: 150px !important;
    }

    .form-container {
        padding: 15px;
        width: 100%;
        margin: 10px 0;
    }

    .btn-clear {
        background-color: #dc3545;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        font-size: 0.65em;
        cursor: pointer;
        max-width: 80px;
    }

    .btn-load {
        background-color: #28a745;
        color: white;
        padding: 8px 16px;
        border: none;
        border-radius: 5px;
        font-size: 0.65em;
        cursor: pointer;
        max-width: 90px;
    }

    .login-form {
        width: 100%;
        justify-content: center;
        max-width: 480px;
    }

  
   
    .subscription {
        font-size: 0.5em;
        max-width: 250px;
    }

    .view-toggle {
        flex-direction: column;
        max-height: none;
    }

  
    .admin-header {
        max-height: 60px;
        padding: 2px 2px;
    }

    .hebrewDate {
        font-size: 0.9em !important;
        text-align: center;
    }

    .sub-time,
    .sub-time-exit,
    .sub-time-exit-RT,
    .sub-date {
        font-size: 0.85em !important;
        padding: 5px !important;
    }


  #compassCanvas 
  {
        width: 120px !important;
        height: 120px !important;
    }
.announces,
.admin-announces,
.link-btn-NB,
.link-btn-reset-colors {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.announces .text-mobile,
.admin-announces .text-short {
    display: inline !important;
    white-space: nowrap !important;
}
.comment-Polaris{
    display: inline-flex !important;
	text-align: center;
	margin-top:100px;
	margin-right:100px;
	font-size:1.5em;
	color:blue;


}
/* ================================================
   FIXES SUPPLÉMENTAIRES POUR TRÈS PETITS ÉCRANS
   ================================================ */

@media (max-width: 480px) {
    .unified-sun-box {
        padding: 10px !important;
        gap: 10px !important;
    }

    .sun-section {
        padding: 0px !important;
    }

    .clock-section,
    .clock-section_he {
        font-size: 0.85em !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .hebrewDate {
        font-size: 0.8em !important;
    }
}

/* ================================================
   CORRECTION RESPONSIVE SMARTPHONE (max-width: 768px)
   ================================================ */

@media (max-width: 768px) {
.announces{
 background: #7799cc;
 color: #ffffff !important;
 padding-top:-4px  !important;
 margin-top: -1px ;
  margin-right: 3px !important;
  width-min:180px;
  justify-content: center;
  font-size:0.6em !important;

}
.admin-announces{
 background: #7799cc;
 color: #ffffff !important;
  font-size:0.6em !important;
  margin-top: -1px ;
   margin-right: 3px !important;
	width-min:180px;
 	justify-content: center;

}
.link-btn-nb{
	 background: #7799cc;
	 height:25px;
	 margin: 1px;
	 justify-content: center;
	 width-max:100px;
     color: #ffffff !important;
     font-size:0.6em !important;

}
.link-btn-reset-colors{
	background: #7799cc;
	padding-bottom:2px ;
	margin: 1px ;
	height:25px;
    justify-content: center;
    color: #ffffff !important;
    font-size:0.6em !important;

}


.view-toggle-btn {
    background: #ddaaaa;
    color: #667eea;
    padding: 1px 1px;
    margin<?= $isRTL ? '-left' : '-right' ?>: 2px;
    border: none;
    border-radius: 8px;
    font-size: 0.8em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 120px !important;
    max-width: 150px !important;
    max-height: 50px;
	
}
    .login-form-username {
    max-width: 70px !important;      
    width: 65px !important;
    min-width: 60px !important;          
    border-radius: 15px;
    margin: 1px 0px 0px 0px !important;                 
    display: inline-flex;
    padding: 4px !important;
    font-size: 1.3em!important;
    box-sizing: border-box !important;
}

.login-form-password {
    margin: 1px 0px 0px 0px !important;            
    width: 60px !important;
    min-width: 60px !important;       
    max-width: 80px !important;      
    border-radius: 15px;
    display: inline-flex;
    padding: 4px !important;
    font-size: 1.3em!important;
    box-sizing: border-box !important;
    color:white;
}

input[type="text"].login-form-username,
input[type="password"].login-form-password {
    max-width: 82px !important;      
    width: 70px !important;
    min-width: 65px !important;
}
    /* ===== 1. CONTENEUR PRINCIPAL ===== */
    body {
        margin: 10px;
        padding-top: 40px;
    }

    /* ===== 2. BARRE UTILISATEUR ===== */
    .user-bar {
        padding: 2px 0px;
	    width: 98% !important; 
        gap: 4px;
        min-height: 85px;
        max-height:100px;
    }

    .announcement {
        margin-top: 1px;
        font-size:0.7em;
        width: 100%; 
		min-width: 760px; 
    }

    /* ===== 3. SUN-INFO-DETAILS (CONTENEUR PARENT) ===== */
    .sun_info_details {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 10px !important;
    }

    /* ===== 4. LÉGENDE/INFOS ===== */
    .sun-info_details .infos-legende {
        margin: 5px 0 15px 0 !important;
        max-width: 100%;
        width: 100% !important;
    }

    /* ===== 5. SUN-INFO - TRANSFORMATION EN GRILLE MOBILE ===== */
    .sun-info {
        /* GRILLE CSS MOBILE */
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 15px !important;
        
        /* Largeur 100% */
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        
        /* Hauteur adaptative */
        min-height: auto !important;
        max-height: none !important;
    }

    /* ===== 6. UNIFIED SUN BOX - LIGNE 1 PLEINE LARGEUR ===== */
   
   .unified-sun-box {
        /* Position en grille */
        grid-column: 2/ -1 !important; 
        grid-row: 1 !important; 
        width: 90% !important;
        max-width: 100% !important;
        min-width: 100% !important;      
        flex: none !important;      
        padding: 15px !important;
        margin: 0 !important;     
        box-sizing: border-box !important;
    }

    /* ===== 7. TOUTES LES AUTRES SECTIONS - PLEINE LARGEUR ===== */
    #section_tsitsit,
    #section_shema,
    #section_sunrise_sunset,
    #section_shema_MA,
    #section_mincha,
    .sun-event,
    .tephilines-box,
    .prayer-box,
    .prayer-box-MA,
    .mincha-box,
    .chart-container,
    .chart-container-full,
    .premium-container,
    .form-container,
    #annual_table_section,
    #section_annonces
     {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: unset !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        box-sizing: border-box !important;
    }
    #section_sunrise_sunset,
    #section_mincha,{
    
      max-width: 100% !important;
    
    }    
    
 } /* Fin Media */

/* ================================================
   FIXES SUPPLÉMENTAIRES POUR TRÈS PETITS ÉCRANS
   ================================================ */

@media (max-width: 480px) {
.login-form-username {
    max-width: 80px !important;      
    width: 60px !important;
    min-width: 60px !important;          
    border-radius: 15px;
    margin: 1px 0px 0px 0px !important;
    padding: 4px !important;
    font-size: 12px !important;
}

.login-form-password {
    margin: 1px 0px 0px 0px !important;            
    width: 60px !important;
    min-width: 60px !important;       
    max-width: 80px !important;      
    border-radius: 15px;
    padding: 4px !important;
    font-size: 12px !important;
}

input[type="text"].login-form-username,
input[type="password"].login-form-password {
    max-width: 80px !important;      
    width: 60px !important;
    min-width: 60px !important;
    box-sizing: border-box !important;
}
    .unified-sun-box {
        padding: 10px !important;
        gap: 10px !important;
    }

    .sun-section {
        padding: 8px !important;
    }

    .clock-section,
    .clock-section_he {
        font-size: 0.85em !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .hebrewDate {
        font-size: 0.8em !important;
    }
}

/* ============================================================
   MENU CONTEXTE COULEURS — Premium / Admin uniquement
   ============================================================ */

/* --- Overlay transparent qui ferme le menu si on clique dehors --- */
.zmn-ctx-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 88800;
    background: transparent;
}
.zmn-ctx-overlay.active { display: block; }

/* --- Popup principale --- */
.zmn-ctx-menu {
    display: none;
    position: fixed;
    z-index: 88900;
    width: 260px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
    border: 1px solid #e0e0e0;
    overflow: hidden;
    animation: zmn-popup-in .15s ease;
}
.zmn-ctx-menu.active { display: block; }

@keyframes zmn-popup-in {
    from { opacity:0; transform: scale(.92); }
    to   { opacity:1; transform: scale(1);   }
}

/* Titre du menu (nom de la boite) */
.zmn-ctx-menu .zmn-ctx-title {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-size: .88em;
    font-weight: 700;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zmn-ctx-menu .zmn-ctx-title .zmn-crown { font-size: 1.1em; }

/* Corps du menu */
.zmn-ctx-menu .zmn-ctx-body {
    padding: 14px 16px 12px;
}

/* Chaque ligne : label + swatch + input[type=color] */
.zmn-ctx-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
}
.zmn-ctx-row:last-of-type { margin-bottom: 0; }

.zmn-ctx-row label {
    flex: 1;
    font-size: .87em;
    font-weight: 600;
    color: #444;
    margin: 0;
}

/* Swatch visuel (petit carre colore) */
.zmn-ctx-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid #ccc;
    cursor: pointer;
    transition: border-color .2s, transform .15s;
    position: relative;
    overflow: hidden;
}
.zmn-ctx-swatch:hover {
    border-color: #667eea;
    transform: scale(1.08);
}
/* L input[type=color] est cache mais superpose sur le swatch */
.zmn-ctx-swatch input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}

/* Separateur horizontal leger */
.zmn-ctx-sep {
    border: none;
    border-top: 1px solid #eee;
    margin: 10px 0;
}

/* Bouton "Reinitialiser cette boite" */
.zmn-ctx-reset {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 7px 0;
    border: 1px solid #ddd;
    border-radius: 7px;
    background: #fafafa;
    color: #888;
    font-size: .82em;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.zmn-ctx-reset:hover {
    background: #fff0f0;
    color: #c0392b;
    border-color: #f5c6cb;
}

/* --- Badge hover-hint sur les boites ciblees --- */
.zmn-box-hint {
    position: absolute;
    bottom: 4px;
    right: 6px;
    background: rgba(102,126,234,.82);
    color: #fff;
    font-size: .68em;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s;
    white-space: nowrap;
    z-index: 50;
}
/* Les boites cibles : position relative pour le badge */
.zmn-colorable { position: relative !important; }
.zmn-colorable:hover .zmn-box-hint { opacity: 1; }


/* ── Gradient toggle row ── */
.zmn-ctx-row-gradient {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.zmn-ctx-row-gradient label {
    flex: 1;
    font-size: .87em;
    font-weight: 600;
    color: #444;
    margin: 0;
}

/* Petit toggle switch (ON/OFF) */
.zmn-toggle-wrap {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
/* checkbox invisible mais POSITIONNEE sur toute la zone cliquable */
.zmn-toggle-wrap input[type="checkbox"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    z-index: 2;             /* au-dessus du slider pour capturer le clic */
}
.zmn-toggle-slider {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: 24px;
    transition: .25s;
    z-index: 1;
}
.zmn-toggle-slider:before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: .25s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.zmn-toggle-wrap input:checked + .zmn-toggle-slider {
    background: linear-gradient(135deg, #667eea, #764ba2);
}
.zmn-toggle-wrap input:checked + .zmn-toggle-slider:before {
    transform: translateX(20px);
}

/* Conteneur des deux pickers gradient (cache/montre via JS) */
#zmn-gradient-opts {
    display: none;          /* caché par défaut */
    flex-direction: column;
    gap: 8px;
    padding: 8px 0 2px;
    animation: zmn-fade-in .18s ease;
}
#zmn-gradient-opts.visible { display: flex; }

@keyframes zmn-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Ligne avec deux swatches côte à côte (couleur 1 / couleur 2) */
.zmn-grad-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.zmn-grad-row label {
    width: 60px;
    font-size: .82em;
    font-weight: 600;
    color: #666;
    margin: 0;
    flex-shrink: 0;
}

/* Sélecteur d angle : petit input range + valeur affichée */
.zmn-angle-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.zmn-angle-row label {
    width: 60px;
    font-size: .82em;
    font-weight: 600;
    color: #666;
    margin: 0;
    flex-shrink: 0;
}
.zmn-angle-row input[type="range"] {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 3px;
    background: linear-gradient(to right, #667eea, #764ba2);
    outline: none;
}
.zmn-angle-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #667eea;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.zmn-angle-row input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #667eea;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.zmn-angle-val {
    font-size: .82em;
    font-weight: 700;
    color: #667eea;
    width: 38px;
    text-align: right;
    flex-shrink: 0;
}

/* Mini preview du gradiant en bas des options */
#zmn-grad-preview {
    height: 24px;
    border-radius: 6px;
    border: 1px solid #ddd;
    margin-top: 4px;
    transition: background .15s;
}

/* Style spécifique pour reset colors NB announces gestion-announces*/
 /* Par défaut : version smart */
 /* Par défaut : texte court (mobile/tablette/tout) */
.text-mobile {
    display: inline !important;
}

.text-desktop {
    display: none !important;
}

.video-bg{
    background: #b7aaee;
    display: inline-flex;

    align-items: center;

    justify-content: center;



}
.emoji-main {
    font-size: 1.5em; 
    display: inline-block;
    vertical-align: middle;
}
#section_dawn {
    border: 2px solid #0000ff; /* Ajustez le bleu selon votre code actuel */
    border-radius: 8px;        /* Pour l'arrondi, comme les autres */
    padding: 10px;
    box-sizing: border-box;
}
#section_dawn {
    margin-left 0px !important; /* Supprime l'espace après Dawn */
}

#section_tsitsit {
    margin-right: 0px !important;    /* Supprime l'espace avant Tsitsit */
}


/* ==========================================================================
   CORRECTIONS SMARTPHONE ULTRA-SÉCURISÉES (UNIQUEMENT POUR ÉCRANS < 768PX)
   ========================================================================== */
@media screen and (max-width: 768px) {

    /* On ne touche PAS au sélecteur global *. On cible uniquement les conteneurs */
    
    /* 1. On force la boîte principale à prendre la largeur du téléphone */
    .unified-sun-box {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: unset !important;
        margin: 10px 0 !important;
        padding: 10px !important;
    }

    /* 2. On force le conteneur Flexbox à aligner les horaires verticalement (en colonne) */
    .sun-info {
        display: flex !important;
        flex-direction: column !important; /* Les blocs se mettent les uns sous les autres */
        height: auto !important;
        min-height: unset !important;
        width: 100% !important;
    }

    /* 3. On libère chaque ligne d'horaire pour qu'elle occupe toute la largeur disponible */
    .sun-event, 
    .sun-event.tephilines-box, 
    .sun-event.prayer-box, 
    .sun-event.prayer-box-MA,
    #section_mincha, 
    .mincha-box,
    .dawn-stars_exit {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: unset !important;
        margin: 8px 0 !important; /* Espace propre entre les lignes */
        float: none !important;    /* Annule d'éventuels vieux alignements */
    }

    /* 4. On s'assure que le texte et les colonnes internes ne s'écrasent pas */
    .event-title, .event-time {
        font-size: 1.1rem !important; /* Lisible sur mobile */
    }

    /* 5. Si vous avez des tableaux d'horaires secondaires, on leur permet de glisser au doigt */
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
    }
}

/* ================================================
   FORCE TRANSPARENT COMPASS — STRONG OVERRIDE
   ================================================ */
#compassCanvas, 
.compass-canvas, 
.sect_boussole, 
.sect_boussole *,
#compassCanvas * {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
@media (min-width: 601px) {
    /* ... conservez vos règles PC existantes (drapeaux, boussole, etc.) ... */

    /* ── SUPPRESSION DE L'ESPACE VIDE SOUS LA USER-BAR SUR PC ── */
    #announcement, 
    .announcement, 
    .enveloppe {
        margin-top: 20px !important;      /* Annule le gros décalage du haut */
        padding-top: 2px !important;   /* Ajustement millimétré pour coller proprement */
    }
}
</style>