[v-cloak] { display: none !important; }
/* ═══════════════════════════════════════════════════════════════
   Masjid Time v3 — CSS
   Animations adhan/iqama, glassmorphism léger, panel test, Ramadan
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
  --gold:        #FFC200;
  --gold-glow:   rgba(255,194,0,0.4);
  --gold-dim:    rgba(255,194,0,0.15);
  --teal-dark:   #0a2d31;
  --white:       #ffffff;
  --overlay:     rgba(0,0,0,0.30);
  --shadow:      0 5px 18px rgba(0,0,0,0.45);
  --radius:      18px;
  --transition:  0.4s ease;
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html, body { height:100%; width:100%; overflow:hidden; }

/* ── Fond de base ────────────────────────────────────────────── */
body {
  color: var(--white);
  font-family: 'Varela Round', sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  /* Fond CSS pur — ciel nocturne profond, stable sur toutes les TV */
  background:
    radial-gradient(ellipse 140% 50% at 50% -10%,  #0f4a2e 0%,  transparent 55%),
    radial-gradient(ellipse 60%  60% at 15%  85%,  #071830 0%,  transparent 50%),
    radial-gradient(ellipse 60%  60% at 85%  85%,  #0a2018 0%,  transparent 50%),
    radial-gradient(ellipse 40%  40% at 75%  20%,  #0a2e1a 0%,  transparent 45%),
    linear-gradient(175deg, #060f1a 0%, #071810 35%, #04100e 70%, #030a0d 100%);
}
/* Motif géométrique islamique très subtil */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(ellipse 30% 30% at 50% 100%, rgba(255,194,0,.06) 0%, transparent 70%),
    radial-gradient(ellipse 20% 15% at 80%  10%, rgba(255,255,255,.04) 0%, transparent 60%),
    repeating-linear-gradient(0deg,   transparent, transparent 99px, rgba(255,194,0,.018) 99px, rgba(255,194,0,.018) 100px),
    repeating-linear-gradient(90deg,  transparent, transparent 99px, rgba(255,194,0,.018) 99px, rgba(255,194,0,.018) 100px),
    repeating-linear-gradient(60deg,  transparent, transparent 79px, rgba(255,255,255,.008) 79px, rgba(255,255,255,.008) 80px),
    repeating-linear-gradient(-60deg, transparent, transparent 79px, rgba(255,255,255,.008) 79px, rgba(255,255,255,.008) 80px);
}

/* ── Fonds selon état ─────────────────────────────────────────── */
body[data-state="adhan"],
body[data-state="invocationAdhan"],
body[data-state="iqama"],
body[data-state="invocationSalat"] {
  background:
    radial-gradient(ellipse 100% 70% at 50% 20%, #2a1800 0%, transparent 65%),
    radial-gradient(ellipse 80%  60% at 20% 80%, #1a0e00 0%, transparent 55%),
    linear-gradient(160deg, #0d0800 0%, #1a1000 40%, #0a0a04 100%) !important;
}
body[data-state="blackscreen"] {
  background: #000 !important;
}
body[data-state="blackscreen"]::before { display:none; }

/* Mode Ramadan — fond alternatif hors-Ramadan */
body.ramadan {
  background-image: url(../img/v2bg.jpg);
}

/* ── App / Front ──────────────────────────────────────────────── */
#app, #front { position:relative; z-index:1; }

#front {
  display:flex; flex-direction:column;
  height:100vh;
}

.hidden { display:none !important; }

/* ── Header ───────────────────────────────────────────────────── */
.header {
  display:flex; justify-content:space-between; align-items:center;
  padding:1vh 2%; margin:1% 0 0;
}
.header-left {
  display:flex; align-items:center; gap:1.2vw;
  padding-left:2%; border-left:3px solid var(--gold);
}
.header-right {
  display:flex; align-items:center; gap:0.8vw;
  padding-right:2%; border-right:3px solid var(--gold);
  font-size:2.5vh; color:rgba(255,255,255,0.9); text-transform:none;
}
#nom_mosquee {
  font-size:3.8vh; color:var(--white);
  text-shadow:0 2px 10px rgba(0,0,0,0.5); text-transform:capitalize;
}
#temperature { display:flex; align-items:center; gap:0.3vw; color:rgba(255,255,255,0.8); font-size:2.5vh; }
#icon_label img { width:32px; }
#icon_network { width:22px; opacity:.85; }

/* ── Contenu central ──────────────────────────────────────────── */
.top-content { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }

.content {
  display:flex; justify-content:space-between;
  align-items:center; padding:0 4%;
}

/* Colonnes fixes pour centrage stable */
#shuruqTime, #joumouaaTime { min-width:18%; text-align:center; }
#dateHeader { flex:1; text-align:center; padding-top:1.5vh; }
.content-placeholder { min-width:18%; visibility:hidden; }

/* ── Dates & Heure ────────────────────────────────────────────── */
.hijriDate { font-size:5.5vh; color:var(--gold); text-shadow:0 2px 8px rgba(0,0,0,0.4); }
.gregorianDate { font-size:3.5vh; color:rgba(255,255,255,0.8); text-transform:capitalize; letter-spacing:.15rem; padding:.5vh 0; }
.time { font-size:20vh; line-height:1; color:var(--white); text-shadow:0 4px 24px rgba(0,0,0,0.5); }
.small-seconds { font-size:9vh; vertical-align:super; opacity:.55; padding-left:1%; }

/* ── Shuruq & Joumouaa ────────────────────────────────────────── */
#shuruqTime, #joumouaaTime { color:var(--gold); text-shadow:0 2px 8px rgba(0,0,0,0.5); }
.chourouk-id, .joumouaa-id { font-size:4vh; color:var(--white); margin-top:.5vh; }
.fr { font-size:2.2vh; }
.ar { font-size:3.2vh; }
.custom-time { font-size:2.5vw; }

/* ── Ayats défilants ─────────────────────────────────────────── */
/* .messagedefilant supprimé — remplacé par .csz-ayat */

/* ── Footer ──────────────────────────────────────────────────── */
#footer {
  position:relative; width:100%;
  background:rgba(0,0,0,0.28);
  border-top:6px solid var(--gold);
  padding:.8% 1.5% 1.2%;
  margin-top: auto;
  flex-shrink: 0;
}
.next-prayer { text-align:center; margin-bottom:.8%; }
.countdown {
  font-size:5.5vh; font-weight:700;
  color:rgba(255,255,255,.85); text-transform:none; letter-spacing:.05em;
}

/* ── Cartes prières ─────────────────────────────────────────── */
.listSalat { display:flex; justify-content:space-evenly; align-items:stretch; gap:1vh; }

.salat {
  flex:1; border-radius:var(--radius); padding-top:1.8%; margin-bottom:1%;
  background-image: linear-gradient(to bottom,#c6d7df,#d6e0e8,#e6eaf0,#f3f4f8,#ffffff);
  box-shadow:var(--shadow); font-size:4.5vh; text-align:center;
  color:var(--teal-dark); transition:transform .25s ease, box-shadow .25s ease;
  min-width:0;
}
.salat .psalat { font-size:3.8vh; color:var(--teal-dark); }
.salat .arabic { font-size:3vh; color:rgba(10,45,49,.7); }
.tsalat { display:block; font-size:6vh; color:var(--teal-dark); font-weight:bold; }
.timesalat {
  display:flex; align-items:center; justify-content:center;
  background-image:linear-gradient(to bottom,#c6d7df,#d6e0e8,#e6eaf0,#f3f4f8,#fff);
  border-radius:0 0 var(--radius) var(--radius);
  font-size:2.5vh; color:#262626; padding:4px 0; gap:4px;
}
#icon_iqama { width:30px; opacity:.85; }

/* ── Prière active ────────────────────────────────────────────── */
.salat.active {
  background-image:radial-gradient(circle,#26977c,#0c7b6e,#00605c,#054648,#0a2d31) !important;
  border:2px solid var(--gold) !important;
  box-shadow:0 0 28px var(--gold-glow), var(--shadow) !important;
  transform:translateY(-4px);
  animation:pulse-gold 2.5s ease-in-out infinite;
}
.salat.active .psalat, .salat.active .arabic, .salat.active .tsalat { color:var(--white)!important; }
.salat.active .timesalat { background:rgba(255,255,255,.12); color:var(--white); }
.salat.active #icon_iqama { filter:invert(1) brightness(2); opacity:1; }

/* ═══════════════════════════════════════════════════════════════
   ÉVÉNEMENTS — Adhan / Iqama / Invocations
   ═══════════════════════════════════════════════════════════════ */

/* ── Conteneur événement plein écran ─────────────────────────── */
.event-screen {
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  color:var(--white);
}

/* ── Adhan ───────────────────────────────────────────────────── */
.adhan-screen {
  background: radial-gradient(ellipse at center, #003c50 0%, #000f19 100%);
}

/* ── Option A : lueur dorée respirante ── */
.adhan-glow {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.adhan-glow-orb {
  position:absolute; border-radius:50%;
}
.adhan-glow-orb-1 {
  width:55vw; height:55vw;
  background:radial-gradient(circle, rgba(255,194,0,.28) 0%, transparent 70%);
  animation:adhan-breathe 3.5s ease-in-out infinite;
}
.adhan-glow-orb-2 {
  width:80vw; height:80vw;
  background:radial-gradient(circle, rgba(255,194,0,.12) 0%, transparent 65%);
  animation:adhan-breathe 3.5s ease-in-out infinite .6s;
}

/* ── Option B : particules lumineuses ── */
.adhan-particles {
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
}
.adhan-particle {
  position:absolute; bottom:-4px; border-radius:50%;
  width:3px; height:3px; background:#ffc200;
  animation:adhan-float-up linear infinite;
}
.adhan-particle:nth-child(1){left:18%;animation-duration:3.1s;animation-delay:0s;width:2px;height:2px}
.adhan-particle:nth-child(2){left:32%;animation-duration:3.6s;animation-delay:.7s;background:rgba(255,255,255,.55)}
.adhan-particle:nth-child(3){left:50%;animation-duration:2.9s;animation-delay:1.3s}
.adhan-particle:nth-child(4){left:64%;animation-duration:3.8s;animation-delay:.4s;width:2px;height:2px;background:rgba(255,194,0,.6)}
.adhan-particle:nth-child(5){left:78%;animation-duration:3.2s;animation-delay:1s}
.adhan-particle:nth-child(6){left:8%;animation-duration:3.5s;animation-delay:1.8s;background:rgba(255,255,255,.4)}
.adhan-particle:nth-child(7){left:88%;animation-duration:3s;animation-delay:.2s;width:2px;height:2px}

/* Contenu — stable, pas d'animation sur le texte */
.adhan-content {
  position:relative; z-index:2; text-align:center;
}
.adhan-icon {
  display:flex; align-items:center; justify-content:center;
  gap:2vw; margin-bottom:2.5vh;
}
.adhan-icon img { width:10vh; opacity:.9; }

.adhan-title {
  font-size:18vh; font-weight:bold; letter-spacing:.08em;
  color:var(--gold);
}
.adhan-prayer-name {
  display:flex; align-items:center; justify-content:center; gap:1.2vw;
  margin-bottom:1.5vh; width:100%; text-align:center;
}
.adhan-prayer-fr  { font-size:6vh; font-weight:600; color:var(--gold); letter-spacing:.1em; text-transform:uppercase; }
.adhan-prayer-sep { font-size:5vh; color:rgba(255,194,0,.4); }
.adhan-prayer-ar  { font-size:6vh; color:var(--gold); }
.adhan-subtitle   { font-size:3.5vh; color:rgba(255,255,255,.55); letter-spacing:.18em; text-transform:uppercase; margin-top:.8vh; }
.adhan-arabic { font-size:10vh; color:rgba(255,255,255,.88); margin-top:2vh; }
.adhan-nophone { width:32vw; max-height:30vh; object-fit:contain; opacity:.8; margin-top:2.5vh; }

/* ── Barre de progression adhan (durée = DELAY_ADHAN × 60s) ── */
.adhan-bar {
  position:fixed; bottom:0; left:0; right:0; height:5px;
  background:rgba(255,255,255,.1);
}
.adhan-bar-fill {
  height:100%;
  background: linear-gradient(90deg, #ffc200, #ffe066);
  transition: width 1s linear;
  width: 100%;
}

/* ── Iqama ───────────────────────────────────────────────────── */
.iqama-screen {
  background:radial-gradient(ellipse at center, rgba(0,100,80,.7) 0%, rgba(0,30,20,.95) 100%);
}

.iqama-content { text-align:center; position:relative; z-index:2; }

.iqama-icon {
  display:flex; align-items:center; justify-content:center;
  gap:2vw; font-size:9vh; margin-bottom:3vh;
  animation:shake 1s ease-in-out infinite;
}
.iqama-icon img { width:12vh; }

.iqama-title {
  font-size:18vh; font-weight:bold; letter-spacing:.1em;
  color:#7fffcf; text-shadow:0 0 40px rgba(127,255,207,.5);
}
.iqama-arabic { font-size:10vh; color:rgba(255,255,255,.9); margin-top:2vh; }
.iqama-nophone { width:35vw; max-height:35vh; object-fit:contain; opacity:.85; margin-top:3vh; }

/* ── Barre de progression (iqama) ───────────────────────────── */
.iqama-bar {
  position:fixed; bottom:0; left:0; right:0; height:8px;
  background:rgba(255,255,255,.15);
}
.iqama-bar-fill {
  height:100%; background:var(--gold);
  transition: width 1s linear;
  width: 100%;
}

/* ── Jumu'a — Écran khutba ──────────────────────────────────── */
.jumua-screen {
  background: radial-gradient(ellipse at center, #0d3320 0%, #050f0a 100%);
}
.jumua-content {
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:2vh;
  padding:4% 8%;
}
.jumua-title-ar {
  font-size:14vh; font-weight:700; color:var(--gold);
  letter-spacing:.05em; line-height:1;
}
.jumua-title-fr {
  font-size:4vh; color:rgba(255,255,255,.85);
  letter-spacing:.2em; text-transform:uppercase;
}
.jumua-sub {
  font-size:2.5vh; color:rgba(255,255,255,.5);
  letter-spacing:.08em; margin-top:.5vh;
  text-transform:none;
}
.jumua-countdown {
  display:flex; flex-direction:column; align-items:center;
  margin-top:3vh; gap:.5vh;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px; padding:2vh 4vw;
}
.jumua-countdown-label {
  font-size:1.8vh; color:rgba(255,255,255,.45);
  letter-spacing:.2em; text-transform:uppercase;
}
.jumua-countdown-time {
  font-size:6vh; font-weight:700; color:#7fffcf;
  letter-spacing:.05em;
}
.jumua-bar {
  position:fixed; bottom:0; left:0; right:0; height:5px;
  background:rgba(255,255,255,.1);
}
.jumua-bar-fill {
  height:100%;
  background:linear-gradient(90deg, #1D9E75, #7fffcf);
  transition: width 1s linear;
  width: 100%;
}

/* ── Invocations ─────────────────────────────────────────────── */
.invocation-screen {
  background:radial-gradient(ellipse at center, rgba(20,40,60,.8) 0%, rgba(5,15,25,.97) 100%);
  padding:3% 8%;
}
.dua-content {
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2vh;
  padding:3% 6%; max-height:90vh; overflow:hidden;
}
.dua-block { display:flex; flex-direction:column; align-items:center; gap:2vh; }
/* Titres en ligne : arabe · français */
.dua-titles {
  display:flex; align-items:center; justify-content:center;
  gap:1.2vw; flex-wrap:wrap;
}
.dua-title-sep { color:rgba(255,194,0,.4); font-size:3vh; }
.invocation_title_ar { color:var(--gold); font-size:3.5vh; }
.invocation_title_fr { color:var(--gold); font-size:2.5vh; letter-spacing:.1em; text-transform:none; }
.invocation_ar { font-size:6.5vh; line-height:1.7; }
.invocation_fr { font-size:3.5vh; line-height:1.6; color:rgba(255,255,255,.8); text-transform:none; }
/* Barre de progression invocations */
.invoc-bar { position:fixed; bottom:0; left:0; right:0; height:5px; background:rgba(255,255,255,.1); }
.invoc-bar-fill {
  height:100%;
  background:linear-gradient(90deg, #534AB7, #d4b4ff);
  transition: width 1s linear;
  width: 100%;
}

/* ── Blackscreen ─────────────────────────────────────────────── */
.black-screen {
  position:fixed; inset:0; background:#000; z-index:200;
  display:flex; align-items:center; justify-content:center;
}
.black-screen-text {
  font-size:5vh; color:rgba(255,255,255,.15);
  text-align:center; letter-spacing:.3em;
}

/* ═══════════════════════════════════════════════════════════════
   PANEL DE TEST
   ═══════════════════════════════════════════════════════════════ */

.test-trigger {
  position:fixed; bottom:16px; right:16px; z-index:999;
  width:46px; height:46px; border-radius:50%;
  background:rgba(0,0,0,.5); border:1px solid rgba(255,194,0,.4);
  color:var(--gold); font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s; backdrop-filter:blur(6px);
}
.test-trigger:hover { background:rgba(255,194,0,.2); transform:scale(1.1); }

.test-panel {
  position:fixed; bottom:70px; right:16px; z-index:998;
  background:rgba(10,25,35,.95); border:1px solid rgba(255,194,0,.3);
  border-radius:16px; padding:16px; min-width:280px;
  backdrop-filter:blur(12px);
  box-shadow:0 8px 32px rgba(0,0,0,.6);
  animation:fadein .2s ease;
}
.test-panel h4 {
  color:var(--gold); font-size:13px; letter-spacing:.1em;
  margin-bottom:12px; text-align:center;
}
.test-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px;
}
.test-btn {
  padding:8px 6px; border:1px solid rgba(255,255,255,.2);
  border-radius:10px; background:rgba(255,255,255,.07);
  color:var(--white); font-size:11px; cursor:pointer; text-align:center;
  transition:all .15s; font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.test-btn:hover { background:rgba(255,194,0,.2); border-color:var(--gold); }
.test-btn .icon { font-size:18px; }
.test-btn.full { grid-column:1 / -1; background:rgba(255,194,0,.15); border-color:var(--gold); }
.test-btn.full:hover { background:rgba(255,194,0,.3); }
.test-duration {
  display:flex; align-items:center; gap:8px;
  font-size:11px; color:rgba(255,255,255,.6);
  border-top:1px solid rgba(255,255,255,.1); padding-top:10px; margin-top:4px;
}
.test-duration input[type="range"] { flex:1; accent-color:var(--gold); }
.test-duration span { color:var(--gold); min-width:28px; text-align:right; }
.test-shortcuts {
  font-size:10px; color:rgba(255,255,255,.35);
  margin-top:8px; text-align:center; text-transform:none;
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

@keyframes fadein {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

@keyframes pulse-gold {
  0%,100% { box-shadow:0 0 18px rgba(255,194,0,.4); }
  50%      { box-shadow:0 0 36px rgba(255,194,0,.7); }
}

@keyframes adhan-breathe {
  0%,100% { opacity:.7; transform:scale(.93); }
  50%     { opacity:1;  transform:scale(1.05); }
}

@keyframes adhan-float-up {
  0%   { opacity:0; transform:translateY(0) scale(.5); }
  15%  { opacity:.85; }
  85%  { opacity:.3; }
  100% { opacity:0; transform:translateY(-130px) scale(1.3); }
}

@keyframes shake {
  0%,100% { transform:rotate(0deg); }
  15%     { transform:rotate(-8deg); }
  30%     { transform:rotate(8deg); }
  45%     { transform:rotate(-5deg); }
  60%     { transform:rotate(5deg); }
  75%     { transform:rotate(-2deg); }
}

@keyframes bar-drain {
  from { width:100%; }
  to   { width:0%; }
}

@keyframes slide-in {
  from { opacity:0; transform:scale(.95) translateY(20px); }
  to   { opacity:1; transform:scale(1)   translateY(0); }
}

/* Transitions Vue */
.fade-enter-active, .fade-leave-active { transition:opacity .4s ease; }
.fade-enter, .fade-leave-to { opacity:0; }

.event-enter-active { animation:slide-in .5s ease; }
.event-leave-active { transition:opacity .3s ease; }
.event-leave-to { opacity:0; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤ 767px)
   ═══════════════════════════════════════════════════════════════ */
@media only screen and (max-width:767px) {
  body {
    background-image:url(../img/v2bgmobile.jpg);
    position:fixed; width:100%; height:100%;
  }
  body[data-state="adhan"],
  body[data-state="iqama"],
  body[data-state="invocationAdhan"],
  body[data-state="invocationSalat"] {
    background-image:url(../img/v2bgmobile-events.jpg);
  }
  .header { justify-content:center; }
  .header-right, #temperature, .gregorianDate, #joumouaaTime, #shuruqTime, .messagedefilant { display:none!important; }
  .header-left { border:none; padding-top:8px; }
  #nom_mosquee { font-size:2.5vh; text-align:center; width:100%; }
  .content { margin-top:4%; }
  #dateHeader { width:90%; }
  .time { font-size:9vh; }
  .small-seconds { font-size:3vh; }
  .hijriDate { font-size:2vh; }

  .listSalat { flex-direction:column; gap:2px; margin:0 4%; }
  .salat {
    display:flex; flex-direction:row; align-items:center;
    justify-content:space-between; padding:2% 4%;
    font-size:3vh; border-radius:12px;
  }
  .salat .psalat { font-size:2.5vh; width:5vh; }
  .salat .arabic { display:none; }
  .tsalat { font-size:3.5vh; }
  .timesalat { border-radius:8px; font-size:2.2vh; padding:2px 8px; }

  .adhan-title { font-size:7vh; }
  .iqama-title { font-size:6vh; }
  .invocation_ar { font-size:4.5vh; line-height:7vh; }
  .invocation_fr { font-size:2.5vh; line-height:4vh; }
  .test-trigger { bottom:8px; right:8px; width:38px; height:38px; font-size:16px; }
  .test-panel { right:8px; bottom:54px; min-width:240px; }
}

/* ═══════════════════════════════════════════════════════════════
   NOUVELLES FONCTIONNALITÉS v3
   ═══════════════════════════════════════════════════════════════ */

/* ── 2. Mode Ramadan ─────────────────────────────────────────── */
body.ramadan {
  background-image: url(../img/v2bg.jpg); /* fond Ramadan si dispo */
}
body.ramadan[data-state="adhan"],
body.ramadan[data-state="iqama"],
body.ramadan[data-state="invocationAdhan"],
body.ramadan[data-state="invocationSalat"] {
  background-image: url(../img/v2bg-events.jpg);
}

/* Badge Ramadan dans le header */
.ramadan-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,194,0,0.15);
  border: 1px solid rgba(255,194,0,0.4);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 2vh;
  color: var(--gold);
  animation: fadein 1s ease;
}

/* Imsak countdown (visible en Ramadan) */
.imsak-countdown {
  font-size: 2.5vh;
  color: #adf7ff;
  text-align: center;
  padding: 4px 0;
  text-transform: none;
  animation: fadein .5s ease;
}

/* ── 3. Annonces de la mosquée ──────────────────────────────── */
.annonce-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8vh;
  padding: 1vh 3%;
}

.annonce-card {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,194,0,0.3);
  border-radius: 12px;
  padding: 10px 24px;
  text-align: center;
  max-width: 90%;
  animation: slide-in .4s ease;
}

.annonce-label {
  font-size: 1.6vh;
  color: var(--gold);
  letter-spacing: .2em;
  margin-bottom: 4px;
}

.annonce-text-fr {
  font-size: 2.8vh;
  color: var(--white);
  text-transform: none;
  line-height: 1.4;
}

.annonce-text-ar {
  font-size: 2.4vh;
  color: rgba(255,255,255,.75);
  margin-top: 4px;
  text-transform: none;
}

/* ── 4. Mode veille nocturne ────────────────────────────────── */
/* Overlay sur #app — le contenu reste lisible, les étoiles hors #app restent visibles */
body.veille #app::after {
  content: '';
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0, 0, 0, calc(1 - var(--dim-ratio, 0.35)));
  pointer-events: none;
  transition: opacity 3s ease;
}
body:not(.veille) #app::after {
  content: '';
  position: fixed; inset: 0; z-index: 9998;
  background: transparent; pointer-events: none;
  transition: opacity 2s ease;
}

/* Étoiles animées */
.veille-stars {
  position:fixed; inset:0; z-index:500;
  pointer-events:none; overflow:hidden;
  opacity:0; transition:opacity 3s ease;
}
body.veille .veille-stars { opacity:1; }

.veille-star {
  position:absolute; border-radius:50%;
  background:#fff; animation:twinkle var(--dur,3s) var(--del,0s) infinite ease-in-out alternate;
}
@keyframes twinkle {
  0%   { opacity:.1; transform:scale(.8); }
  100% { opacity:.9; transform:scale(1.2); }
}

/* Croissant de lune */
.veille-moon {
  position:fixed; bottom:8vh; right:6vw; z-index:501;
  font-size:6vh; opacity:0; pointer-events:none;
  transition:opacity 3s ease;
  animation:moonFloat 8s ease-in-out infinite alternate;
}
body.veille .veille-moon { opacity:.5; }
@keyframes moonFloat {
  0%   { transform:translateY(0) rotate(-10deg); }
  100% { transform:translateY(-12px) rotate(5deg); }
}

/* Texte invocation nuit */
.veille-dua {
  position:fixed; bottom:4vh; left:50%; transform:translateX(-50%);
  z-index:502; text-align:center; pointer-events:none;
  opacity:0; transition:opacity 3s ease 2s;
  color:rgba(255,255,255,.25); font-size:1.8vh; letter-spacing:.1em;
  white-space:nowrap;
}
body.veille .veille-dua { opacity:1; }

/* Indicateur veille (petit point) */
.veille-indicator {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2vh;
  color: rgba(255,255,255,.2);
  letter-spacing: .15em;
  z-index: 999;
  text-transform: none;
}

/* ── 5. QR Code de don ──────────────────────────────────────── */
.qr-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 8vh;
  padding: 1vh 2%;
  animation: slide-in .4s ease;
}

.qr-container {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,194,0,0.35);
  border-radius: 16px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.qr-canvas-wrap {
  background: white;
  border-radius: 8px;
  padding: 6px;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-canvas-wrap canvas { width:88px!important; height:88px!important; }

.qr-info { text-align: left; }
.qr-label-fr {
  font-size: 2.5vh;
  color: var(--gold);
  margin-bottom: 4px;
}
.qr-label-ar {
  font-size: 2.2vh;
  color: rgba(255,255,255,.8);
  text-transform: none;
}
.qr-scan-hint {
  font-size: 1.5vh;
  color: rgba(255,255,255,.45);
  margin-top: 6px;
  text-transform: none;
  letter-spacing: .05em;
}

@media only screen and (max-width: 767px) {
  .annonce-text-fr { font-size: 2vh; }
  .qr-container { padding: 10px 14px; gap: 10px; }
  .qr-canvas-wrap { width:70px; height:70px; }
  .qr-label-fr { font-size: 1.8vh; }
}

/* ═══════════════════════════════════════════════════════════════
   CONTRACTION DYNAMIQUE — slide-active
   Quand un slide est actif, la zone heure se réduit
   et la zone de contenu s'agrandit via transitions CSS
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout top-content ──────────────────────────────────────── */
.top-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Zone heure/date : état normal ──────────────────────────── */
.content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4%;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

/* L'heure en état normal */
.time {
  font-size: 22vh;
  line-height: 1;
  transition: font-size 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              line-height 0.6s ease;
}

.small-seconds {
  font-size: 10vh;
  vertical-align: super;
  opacity: .55;
  padding-left: 1%;
  transition: font-size 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hijriDate {
  font-size: 5vh;
  transition: font-size 0.5s ease, opacity 0.5s ease, max-height 0.5s ease;
  overflow: hidden;
}

.gregorianDate {
  font-size: 3.2vh;
  transition: font-size 0.5s ease, opacity 0.5s ease, max-height 0.5s ease;
  overflow: hidden;
}

#shuruqTime, #joumouaaTime {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Countdown compact — caché en mode normal */
.compact-countdown { /* countdown dans slide */
  display: none;
  font-size: 5.5vh;
  color: rgba(255,255,255,.85);
  font-weight: 700;
  text-transform: none;
  letter-spacing: .05em;
  margin-top: .5vh;
}

/* ── Zone heure/date : état contracté (slide-active) ─────────── */
.slide-active .time {
  font-size: 18vh;
  line-height: 1.1;
}

.slide-active .small-seconds {
  font-size: 8vh;
}

.slide-active .hijriDate {
  font-size: 0;
  max-height: 0;
  opacity: 0;
  margin: 0;
}

.slide-active .gregorianDate {
  font-size: 2.8vh;
  opacity: .75;
}

.slide-active #shuruqTime,
.slide-active #joumouaaTime {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

/* Countdown visible seulement en mode compact */
.slide-active .compact-countdown { /* countdown dans slide */
  display: block;
}

/* ── Zone de contenu dynamique ───────────────────────────────── */
.content-slide-zone {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 0;        /* évite le débordement flex */
}

/* Ayat par défaut */
.csz-ayat {
  width: 100%;
  text-align: center;
  padding: 0 5%;
  transition: opacity 0.4s ease;
}
.csz-ayat.hidden { opacity: 0; pointer-events: none; }

/* Contenu de slide plein écran */
.csz-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2vh 7% 2vh;
  text-align: center;
  overflow: hidden;
  gap: 1.5vh;
}

/* Label catégorie */
.csz-label {
  font-size: 3vh;
  color: var(--gold);
  letter-spacing: .12em;
  text-transform: none;
  margin-bottom: 0;
  opacity: .9;
  line-height: 1.2;
}

/* Annonce */
.csz-annonce {
  background: rgba(0,50,25,.35);
  border: 1px solid rgba(100,220,140,.15);
  border-radius: 20px;
  /* inset seul positionne l'élément dans son parent absolu */
  inset: 2% 3%;
}
/* ── Tailles fixes par type — clamp(mobile, fluide TV, max grand écran) ── */

/* Texte arabe — Dhikr : formule courte → grand */
.csz-dhikr .csz-text-ar,
.csz-dhikr .dz-text-ar {
  font-size: clamp(28px, 5.5vw, 72px);
  color: #fff;
  line-height: 1.55;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Texte arabe — Hadith : texte long → médium */
.csz-hadith .csz-text-ar {
  font-size: clamp(20px, 3.2vw, 44px);
  color: #fff;
  line-height: 1.65;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/* Texte arabe — défaut / Ayat */
.csz-text-ar {
  font-size: clamp(24px, 4vw, 56px);
  color: rgba(255,255,255,.88);
  line-height: 1.75;
  margin-bottom: 4px;
  max-width: 92%;
  word-break: break-word;
}

/* Texte français — Annonce : grand */
.csz-annonce .csz-text-fr {
  font-size: clamp(22px, 3.8vw, 50px);
  font-weight: 500;
  color: #fff;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 92%;
}

/* Texte français — Dhikr */
.csz-dhikr .csz-text-fr {
  font-size: clamp(18px, 2.5vw, 32px);
  color: rgba(255,255,255,.85);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Texte français — Hadith */
.csz-hadith .csz-text-fr {
  font-size: clamp(16px, 2.2vw, 28px);
  color: rgba(255,255,255,.85);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Texte français — défaut */
.csz-text-fr {
  font-size: clamp(18px, 2.8vw, 36px);
  color: rgba(255,255,255,.8);
  line-height: 1.5;
  max-width: 92%;
  text-transform: none;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
  word-break: break-word;
}

/* Référence/source */
.csz-source {
  font-size: clamp(9px, 1.2vw, 13px);
  color: rgba(255,194,0,.5);
  margin-top: 6px;
  font-style: italic;
  text-transform: none;
}

/* Ayat — spans générés par ayats.js */
#randomAyat span {
  display: block;
  font-size: clamp(13px, 2.4vw, 30px);
  line-height: 1.75;
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
  text-transform: none;
  animation: fadein 2s ease;
  white-space: normal;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* QR */
.csz-qr-body {
  display: flex;
  align-items: center;
  gap: 4vw;
  margin-top: 1vh;
}
.csz-qr .qr-canvas-wrap { width:180px; height:180px; padding:10px; }
.csz-qr .qr-canvas-wrap canvas { width:160px!important; height:160px!important; }
.csz-qr-info { text-align: left; }
.csz-qr-ar   { font-size: 4vh; color: rgba(255,255,255,.85); margin-bottom:1vh; }
.csz-qr-hint { font-size: 2vh; color: rgba(255,255,255,.4); text-transform:none; }

/* Imsak Ramadan */
.csz-tarawih {
  text-align:center; font-size:2.2vh; color:var(--gold);
  padding:.5vh 4%; display:flex; align-items:center;
  justify-content:center; gap:.8vw; flex-wrap:wrap;
  opacity:.9;
}
.csz-tarawih-ar  { font-size:2.8vh; }
.csz-tarawih-sep { color:rgba(255,194,0,.4); }
.csz-tarawih-fr  { color:rgba(255,255,255,.75); }
.csz-tarawih-ayah { color:rgba(255,255,255,.45); font-size:1.9vh; }

.csz-imsak {
  position: absolute;
  bottom: 12px;
  font-size: 1.8vh;
  color: #adf7ff;
  text-transform: none;
  letter-spacing: .08em;
}

/* Dots indicateurs */
.csz-dots {
  position: absolute;
  bottom: 12px;
  right: 20px;
  display: flex;
  gap: 5px;
  align-items: center;
}
.csz-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  transition: all .3s ease;
}
.csz-dot.active {
  background: var(--gold);
  width: 16px;
  border-radius: 3px;
}

/* Transitions d'entrée/sortie des slides */
.csz-in-enter-active { transition: opacity .6s ease, transform .6s cubic-bezier(0.4,0,0.2,1); }
.csz-in-leave-active { transition: opacity .4s ease, transform .4s cubic-bezier(0.4,0,0.2,1); position:absolute; width:100%; }
.csz-in-enter        { opacity: 0; transform: translateX(40px); }
.csz-in-leave-to     { opacity: 0; transform: translateX(-40px); }

/* ── Responsive mobile ───────────────────────────────────────── */
@media only screen and (max-width: 767px) {
  .slide-active .time { font-size: 5vh; }
  .csz-text-fr { font-size: 3.5vh; }
  .csz-text-ar { font-size: 3vh; }
}

/* Séparateur de section dans le panel de test */
.test-sep {
  font-size: 9px;
  color: rgba(255,255,255,.35);
  letter-spacing: .15em;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 10px;
  margin: 4px 0 8px;
}

/* ═══════════════════════════════════════════════════════════════
   SAFARI iOS — Fixes & PWA
   ═══════════════════════════════════════════════════════════════ */

/* Prevent iOS bounce scroll & ensure full screen */
html {
  height: -webkit-fill-available;
  overflow: hidden;
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
  /* Safe areas for notch / home bar */
  padding-top:    env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
  /* Disable tap highlight on iOS */
  -webkit-tap-highlight-color: transparent;
  /* Disable text size adjustment on iOS rotation */
  -webkit-text-size-adjust: 100%;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: none;
  /* Prevent callout on long press */
  -webkit-touch-callout: none;
}

/* Footer garde un léger blur, header sans blur */
#footer {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Fix 100vh on iOS Safari — use dvh with fallback */
#front,
.event-screen,
.black-screen {
  height: 100vh;
  height: 100dvh;
}

/* Fix font rendering on iOS */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Footer safe area (home bar on iPhone X+) */
#footer {
  padding-bottom: calc(0.8% + env(safe-area-inset-bottom));
}

/* Disable iOS double-tap zoom */
* { touch-action: manipulation; }

/* ═══════════════════════════════════════════════════════════════
   CAROUSEL — Labels colorés par type
   ═══════════════════════════════════════════════════════════════ */

.csz-label--info   { color: #ffc200; }
.csz-label--hadith { color: #7fffcf; }
.csz-label--dhikr  { color: #d4b4ff; }

.csz-hadith { /* fond bleu nuit discret */ }
.csz-dhikr  { background: rgba(80,40,120,.3); border:1px solid rgba(180,120,255,.2); border-radius:20px; margin:4%; inset:4%; }

/* Annonce : texte français plus grand */
.csz-text-fr--announce {
  font-size: clamp(1.8rem, 4.5vh, 5.5vh);
  font-weight: 600;
  line-height: 1.45;
  max-width: 90%;
}

/* Source / référence hadith */
.csz-source {
  font-size: 2vh;
  color: rgba(255,255,255,.45);
  margin-top: 2vh;
  text-transform: none;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════
   MODAL PIN — simulateur protégé
   ═══════════════════════════════════════════════════════════ */
.pin-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.75); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
}
.pin-modal {
  background:#0d2a1f; border:1px solid rgba(255,194,0,.3);
  border-radius:20px; padding:32px 28px; width:280px;
  display:flex; flex-direction:column; align-items:center; gap:20px;
}
.pin-title { color:var(--gold); font-size:16px; font-weight:600; letter-spacing:.1em; }
.pin-dots { display:flex; gap:14px; }
.pin-dot {
  width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(255,194,0,.5); background:transparent;
  transition:background .15s;
}
.pin-dot.filled { background:var(--gold); border-color:var(--gold); }
.pin-error { color:#ef4444; font-size:12px; }
.pin-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100%;
}
.pin-key {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  border-radius:12px; color:#fff; font-size:20px; font-weight:500;
  height:52px; cursor:pointer; transition:background .15s;
}
.pin-key:hover:not(:disabled) { background:rgba(255,194,0,.2); }
.pin-key:disabled { opacity:0; pointer-events:none; }

/* ═══════════════════════════════════════════════════════════
   VUE MOBILE — horaires de prière pour téléphone
   ═══════════════════════════════════════════════════════════ */
#mobile-view {
  display:flex; flex-direction:column;
  height:100dvh; /* hauteur viewport fixe = nav toujours en bas */
  overflow:hidden;
  background: url(../img/v2bg.jpg) center/cover no-repeat fixed;
  color:#fff;
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  position:relative;
}
#mobile-view::before {
  content:''; position:fixed; inset:0;
  background:rgba(0,10,20,.72); pointer-events:none; z-index:0;
}
#mobile-view > * { position:relative; z-index:1; }

/* Bandeau événement */
.mob-event-banner {
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:10px 20px;
  background:rgba(255,194,0,.15);
  border-bottom:2px solid var(--gold);
  animation: fadein .4s ease;
}
.mob-event-banner.mob-event-iqama { background:rgba(192,57,43,.2); border-color:#c0392b; }
.mob-event-banner.mob-event-prayer { background:rgba(0,0,0,.5); border-color:rgba(255,255,255,.15); }
.mob-event-banner.mob-event-invoc { background:rgba(83,74,183,.2); border-color:#534AB7; }
.mob-event-ar { font-size:20px; color:var(--gold); }
.mob-event-banner.mob-event-iqama .mob-event-ar { color:#e74c3c; }
.mob-event-banner.mob-event-invoc .mob-event-ar { color:#d4b4ff; }
.mob-event-fr { font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.8); }

/* Header */
.mob-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px;
  border-bottom:1px solid rgba(255,194,0,.2);
  border-left:3px solid var(--gold);
  margin:12px 16px 0;
  border-radius:4px;
  background:rgba(0,0,0,.2);
}
.mob-logo { font-size:15px; font-weight:700; color:var(--gold); letter-spacing:.06em; text-transform:uppercase; }

/* Icône géo miniature dans le header */
.mob-geo-fab {
  width:32px; height:32px; border-radius:8px; flex-shrink:0;
  background:rgba(255,194,0,.08); border:1px solid rgba(255,194,0,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; cursor:pointer; transition:background .2s;
}
.mob-geo-fab.active { background:rgba(255,194,0,.2); border-color:rgba(255,194,0,.45); }
.mob-geo-fab:disabled { opacity:.5; }

/* Horloge */
.mob-clock {
  text-align:center; padding:20px 16px 14px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.mob-time {
  font-size:72px; font-weight:200; color:#fff; line-height:1; letter-spacing:-.02em;
}
.mob-time small { font-size:28px; color:rgba(255,255,255,.35); }
.mob-dates { font-size:13px; margin-top:6px; }
.mob-date { color:rgba(255,255,255,.5); text-transform:capitalize; }
.mob-hijri-inline { color:rgba(255,194,0,.7); }
.mob-countdown {
  font-size:18px; color:rgba(255,255,255,.9); margin-top:10px;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}

/* Ramadan */
.mob-ramadan {
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  margin:8px 16px;
  padding:8px 14px;
  background:rgba(255,194,0,.08);
  border:1px solid rgba(255,194,0,.2);
  border-radius:10px;
  font-size:13px;
}
.mob-ramadan-icon { font-size:14px; }
.mob-ramadan-ar { color:var(--gold); font-size:15px; }
.mob-ramadan-sep { color:rgba(255,255,255,.3); }
.mob-ramadan-fr { color:rgba(255,255,255,.7); }
.mob-ramadan-ayah { color:rgba(255,255,255,.4); font-size:12px; }

/* Géo */
/* FAB Don — fixe en bas à droite */


/* Prières */
.mob-prayers { padding:6px 14px 8px; }
.mob-prayer {
  display:flex; justify-content:space-between; align-items:center;
  padding:11px 14px; margin:4px 0; border-radius:12px;
  background:linear-gradient(to bottom,rgba(198,215,223,.14),rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(4px);
  transition:all .2s;
}
.mob-prayer.mob-next {
  background:radial-gradient(circle,rgba(26,153,117,.55),rgba(5,70,72,.75));
  border-color:rgba(255,194,0,.45);
}
.mob-prayer.mob-past { opacity:.38; }
.mob-prayer-names { display:flex; flex-direction:column; gap:2px; }
.mob-prayer-fr { font-size:15px; font-weight:600; color:#fff; }
.mob-prayer-ar { font-size:12px; color:rgba(255,255,255,.45); }
.mob-prayer-times { text-align:right; }
.mob-adhan { font-size:20px; font-weight:300; color:#fff; }
.mob-prayer.mob-next .mob-adhan { color:var(--gold); font-weight:500; }
.mob-iqama { font-size:11px; color:rgba(255,255,255,.38); margin-top:1px; text-transform:uppercase; letter-spacing:.04em; }

/* QR Don mobile — bouton + overlay */
.mob-don-btn {
  display:block; margin:10px 14px 0;
  padding:13px 16px; border-radius:12px;
  background:rgba(255,194,0,.1); border:1px solid rgba(255,194,0,.3);
  color:var(--gold); font-size:14px; font-weight:600;
  text-align:center; cursor:pointer; width:calc(100% - 28px);
  letter-spacing:.03em; transition:background .2s;
}
.mob-don-btn:hover { background:rgba(255,194,0,.18); }

/* Modal don */
.mob-don-modal {
  background:#0d2a1f; border:1px solid rgba(255,194,0,.3);
  border-radius:20px; padding:20px 20px 24px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:100%; max-width:300px;
}
.mob-don-modal-ar { font-size:20px; color:var(--gold); margin-top:4px; }
.mob-don-modal-fr { font-size:12px; color:rgba(255,255,255,.55); letter-spacing:.08em; text-transform:uppercase; }
.mob-don-modal-qr {
  width:180px; height:180px; border-radius:12px; padding:8px; background:#fff;
  margin:4px 0;
}
.mob-don-modal-hint { font-size:11px; color:rgba(255,255,255,.3); letter-spacing:.06em; text-transform:uppercase; }
.mob-don-modal-link {
  display:block; width:100%; padding:11px 16px; border-radius:10px; margin-top:6px;
  background:linear-gradient(135deg,#003087,#009cde);
  color:#fff; font-size:14px; font-weight:600;
  text-align:center; text-decoration:none; letter-spacing:.04em;
}
.mob-qr-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.8); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
}
.mob-qr-modal {
  background:#0d2a1f; border:1px solid rgba(255,194,0,.3);
  border-radius:20px; padding:28px 24px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  width:280px; max-width:90vw;
}
.mob-qr-modal-ar { font-size:20px; color:var(--gold); }
.mob-qr-modal-fr { font-size:13px; color:rgba(255,255,255,.6); letter-spacing:.08em; text-transform:uppercase; }
.mob-qr-modal-img { width:180px; height:180px; border-radius:12px; padding:8px; background:#fff; }
.mob-qr-modal-hint { font-size:11px; color:rgba(255,255,255,.35); letter-spacing:.06em; text-transform:uppercase; }
.mob-qr-modal-close {
  margin-top:4px; padding:8px 24px; border-radius:10px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.7); font-size:13px; cursor:pointer;
}

/* Annonces */
.mob-annonces { margin:8px 16px 8px; }
.mob-annonces-title {
  font-size:11px; font-weight:600; color:rgba(255,255,255,.4);
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px;
}
.mob-annonce {
  padding:10px 14px; margin-bottom:5px; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
}
.mob-annonce-name { font-size:14px; font-weight:600; color:#fff; }
.mob-annonce-text { font-size:12px; color:rgba(255,255,255,.55); margin-top:3px; line-height:1.5; }

/* Footer */
.mob-footer {
  text-align:center; font-size:11px;
  color:rgba(255,255,255,.18); padding:12px 0 16px; letter-spacing:.1em;
  margin-top:auto;
}

/* Tablette (≥ 600px) */
@media (min-width: 600px) and (max-width: 1023px) {
  #mobile-view { max-width: 680px; margin: 0 auto; }
}


/* ═══════════════════════════════════════════════════════════
   NOTIFICATIONS PUSH — bouton mobile
   ═══════════════════════════════════════════════════════════ */
.mob-push-btn:hover { background:rgba(255,255,255,.1); }


/* ── Indicateur connexion ─────────────────────────────────── */
.conn-indicator {
  position: fixed; bottom: 16px; left: 16px; z-index: 9999;
  width: 8px; height: 8px; border-radius: 50%;
  background: #4caf50; opacity: 0;
  transition: opacity .5s, background .5s;
}
.conn-indicator.visible { opacity: 1; }
.conn-indicator.offline { background: #f44336; opacity: 1; }

/* Prochaine prière en mode veille */
.veille-next-prayer {
  position: fixed; bottom: 10vh; left: 50%; transform: translateX(-50%);
  z-index: 503; color: rgba(255,255,255,.35);
  font-size: 2vh; letter-spacing: .15em;
  text-align: center; pointer-events: none;
  opacity: 0; transition: opacity 3s ease 2s;
  white-space: nowrap;
}
body.veille .veille-next-prayer { opacity: 1; }

/* ══════════════════════════════════════════════════════════
   NAVIGATION MOBILE — barre du bas
   ══════════════════════════════════════════════════════════ */
.mob-nav-fixed {
  display: flex; border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(6,14,20,.97);
  padding: 4px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  position: sticky; bottom: 0; z-index: 100;
}
.mob-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 3px; background: none; border: none; cursor: pointer;
  padding: 6px 0; color: rgba(255,255,255,.35); transition: color .15s;
}
.mob-nav-item svg { width: 20px; height: 20px; }
.mob-nav-item span { font-size: 9px; letter-spacing: .04em; }
.mob-nav-item.active { color: #ffc200; }

/* ── Qibla ── */
.mob-qibla-tab { padding: 10px; }
.mob-qibla-wrap { display: flex; flex-direction: column; align-items: center; padding: 12px 0; }
.mob-qibla-title { font-size: 11px; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px; }

.mob-compass-ring {
  width: 200px; height: 200px; border-radius: 50%;
  border: 2px solid rgba(255,194,0,.25);
  display: flex; align-items: center; justify-content: center;
}
.mob-compass-inner {
  width: 174px; height: 174px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.35); position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: transform .1s linear;
}
.mob-compass-n, .mob-compass-s, .mob-compass-e, .mob-compass-w {
  position: absolute; font-size: 11px; font-weight: 700;
}
.mob-compass-n { top: 6px;  left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.5); }
.mob-compass-s { bottom: 6px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.2); }
.mob-compass-e { right: 6px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.2); }
.mob-compass-w { left: 6px;  top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.2); }

.mob-compass-arrow {
  width: 4px; height: 72px; border-radius: 2px;
  position: absolute; bottom: 50%; left: 50%;
  transform-origin: bottom center;
  background: linear-gradient(to top, rgba(255,194,0,.1), #ffc200);
  /* l'aiguille ne tourne plus — c'est le ring qui tourne */
}
.mob-compass-kaaba { font-size: 22px; position: absolute; }

.mob-qibla-deg { font-size: 28px; font-weight: 200; color: #fff; margin-top: 16px; }
.mob-qibla-dist { font-size: 11px; color: rgba(255,255,255,.3); margin-top: 4px; }

.mob-qibla-btn {
  margin-top: 16px; padding: 10px 24px; border-radius: 10px;
  background: rgba(255,194,0,.1); border: 1px solid rgba(255,194,0,.3);
  color: #ffc200; font-size: 13px; font-weight: 600; cursor: pointer;
}
.mob-qibla-denied { margin-top: 12px; font-size: 11px; color: rgba(229,57,53,.7); text-align: center; padding: 0 20px; }
.mob-qibla-active {
  margin-top: 10px; display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: rgba(29,158,117,.8);
}

/* ── Invocations ── */
.mob-invoc-tab { padding: 10px; }
.mob-invoc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mob-invoc-cat {
  border-radius: 12px; padding: 12px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.04); cursor: pointer;
  transition: background .15s;
}
.mob-invoc-cat:active { background: rgba(255,255,255,.08); }
.mob-invoc-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px; border: 1px solid transparent;
}
.mob-invoc-name { font-size: 12px; font-weight: 600; color: #fff; line-height: 1.3; }
.mob-invoc-count { font-size: 10px; color: rgba(255,255,255,.3); margin-top: 3px; }
.mob-invoc-back {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; color: rgba(255,255,255,.5);
  font-size: 12px; cursor: pointer; padding: 8px 0; margin-bottom: 8px;
}
.mob-invoc-detail-title { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 16px; }
.mob-invoc-placeholder { text-align: center; padding: 40px 20px; color: rgba(255,255,255,.3); }
.mob-invoc-detail { padding: 4px; }

/* ── Don ── */
.mob-don-tab {
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 16px;
}
.mob-don-tab-ar { font-size: 20px; color: #ffc200; margin-bottom: 6px; direction: rtl; }
.mob-don-tab-fr { font-size: 14px; color: rgba(255,255,255,.6); margin-bottom: 20px; }
.mob-don-tab-qr { width: 180px; height: 180px; border-radius: 12px; padding: 10px; background: #fff; margin-bottom: 16px; }
.mob-don-tab-link {
  display: block; width: 100%; padding: 13px;
  border-radius: 12px; background: #ffc200;
  color: #0d2a1f; font-size: 14px; font-weight: 700;
  text-align: center; text-decoration: none;
}

/* Onglets mobiles : hauteur fixe + scroll interne */
/* ── Conteneur onglets : prend tout l'espace restant ── */
.mob-tab-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0; /* CRITIQUE : sans ça flex:1 ignore le overflow */
}
/* ── Chaque onglet remplit son conteneur ── */
.mob-qibla-tab, .mob-invoc-tab, .mob-don-tab {
  min-height: 100%;
  padding: 10px 10px 8px;
}
/* ── Prières scrollables dans onglet horaires ── */
.mob-prayers { padding: 6px 14px 8px; overflow-y: auto; }
/* ── Invocations : détail avec scroll interne ── */
.mob-invoc-tab { display: flex; flex-direction: column; min-height: 100%; }
.mob-invoc-detail { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.mob-invoc-list { overflow-y: auto; flex: 1; min-height: 0; padding: 0 4px; }

/* ── Invocations scrollable ── */
.mob-invoc-list {
  display: flex; flex-direction: column; gap: 0;
}
.mob-invoc-item {
  padding: 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mob-invoc-item-num {
  font-size: 10px; color: rgba(255,194,0,.5);
  font-weight: 700; margin-bottom: 6px;
  letter-spacing: .08em;
}
.mob-invoc-item-ar {
  font-size: 18px; color: #fff; direction: rtl;
  text-align: right; line-height: 1.8; margin-bottom: 6px;
}
.mob-invoc-item-ph {
  font-size: 11px; color: rgba(255,194,0,.65);
  line-height: 1.6; font-style: italic; margin-bottom: 6px;
  text-align: left;
}
.mob-invoc-item-fr {
  font-size: 12px; color: rgba(255,255,255,.65); line-height: 1.6;
}
.mob-invoc-item-ref {
  font-size: 10px; color: rgba(255,255,255,.3);
  margin-top: 5px; letter-spacing: .04em;
}

/* ══════════════════════════════════════════════════════════
   MODE TV — masjid-time.fr?tv=1&scale=1.4
   ══════════════════════════════════════════════════════════ */
:root { --tv-scale: 1; }

/* Forcer vue TV — compat BrowseHere / vieux Chromium */
body.tv-mode #mobile-view { display: none !important; }
body.tv-mode #app { height: 100vh; overflow: hidden; }

/* ────────────────────────────────────────────────────────
   FOND DYNAMIQUE — teinte selon l'heure via data-period
   La bg-image du body reste, on ajoute une teinte colorée
   ──────────────────────────────────────────────────────── */
body[data-period="fajr"]::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(30,15,60,.65) 0%, transparent 70%),
              linear-gradient(175deg, rgba(15,8,35,.55) 0%, rgba(20,10,50,.4) 100%);
}
body[data-period="sunrise"]::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(200,80,10,.5) 0%, rgba(180,60,0,.2) 40%, transparent 70%),
              radial-gradient(ellipse 60% 40% at 50% 100%, rgba(10,30,60,.4) 0%, transparent 60%);
}
body[data-period="morning"]::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse 100% 70% at 50% -20%, rgba(60,120,200,.35) 0%, transparent 65%),
              linear-gradient(175deg, rgba(10,25,50,.3) 0%, transparent 60%);
}
body[data-period="dhuhr"]::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse 100% 80% at 50% -30%, rgba(80,140,220,.3) 0%, transparent 65%);
}
body[data-period="asr"]::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse 90% 60% at 65% 0%, rgba(200,120,20,.45) 0%, transparent 65%),
              linear-gradient(165deg, rgba(30,15,5,.35) 0%, transparent 60%);
}
body[data-period="maghrib"]::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse 90% 55% at 50% 5%, rgba(220,60,10,.6) 0%, rgba(180,30,0,.3) 40%, transparent 70%),
              radial-gradient(ellipse 50% 40% at 20% 100%, rgba(80,0,40,.4) 0%, transparent 55%);
}
body[data-period="isha"]::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(40,20,80,.55) 0%, transparent 60%),
              linear-gradient(175deg, rgba(15,8,30,.45) 0%, rgba(8,5,20,.5) 100%);
}
body[data-period="night"]::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: rgba(5,3,15,.55);
}

/* ────────────────────────────────────────────────────────
   SYSTÈME DE TAILLE UNIFIÉ — base vh, 3 niveaux
   Tous les éléments TV en vh pour cohérence à 3m
   ──────────────────────────────────────────────────────── */

/* ── Heure et dates ── */
body.tv-mode .time        { font-size: calc(20vh * var(--tv-scale,1)) !important; }
body.tv-mode .small-seconds { font-size: calc(9vh * var(--tv-scale,1)) !important; }
body.tv-mode .hijriDate   { font-size: calc(4.5vh * var(--tv-scale,1)) !important; }
body.tv-mode .gregorianDate { font-size: calc(3vh * var(--tv-scale,1)) !important; }
body.tv-mode .countdown   { font-size: calc(4vh * var(--tv-scale,1)) !important; font-weight:700 !important; }
body.tv-mode .compact-countdown { font-size: calc(3.5vh * var(--tv-scale,1)) !important; font-weight:700 !important; }

/* ── Header ── */
body.tv-mode #nom_mosquee { font-size: calc(2.5vh * var(--tv-scale,1)) !important; }

/* ── Prières ── */
body.tv-mode .salat .psalat { font-size: calc(2.8vh * var(--tv-scale,1)) !important; }
body.tv-mode .salat .arabic { font-size: calc(2.2vh * var(--tv-scale,1)) !important; }
body.tv-mode .tsalat        { font-size: calc(5vh * var(--tv-scale,1)) !important; }
body.tv-mode .fr            { font-size: calc(2.2vh * var(--tv-scale,1)) !important; }
body.tv-mode .ar            { font-size: calc(3vh * var(--tv-scale,1)) !important; }
body.tv-mode .chourouk-id,
body.tv-mode .joumouaa-id   { font-size: calc(4vh * var(--tv-scale,1)) !important; }

/* ────────────────────────────────────────────────────────
   CAROUSEL — système 3 niveaux (court/moyen/long) en vh
   Remplace les clamp() qui ignorent le scale
   ──────────────────────────────────────────────────────── */

/* Label catégorie — même taille partout, toujours visible */
body.tv-mode .csz-label {
  font-size: calc(3.5vh * var(--tv-scale,1)) !important;
  margin-bottom: calc(2vh * var(--tv-scale,1)) !important;
  margin-top: 0 !important;
  flex-shrink: 0 !important;
}
body.tv-mode .csz-content {
  gap: calc(1.5vh * var(--tv-scale,1)) !important;
  padding: calc(2vh * var(--tv-scale,1)) 7% !important;
}

/* Niveau COURT — Dhikr */
body.tv-mode .csz-dhikr .csz-text-ar,
body.tv-mode .csz-dhikr .dz-text-ar {
  font-size: calc(7vh * var(--tv-scale,1)) !important;
  line-height: 1.55 !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  display: -webkit-box !important;
  overflow: hidden !important;
}
body.tv-mode .csz-dhikr .csz-text-fr {
  font-size: calc(3.2vh * var(--tv-scale,1)) !important;
  color: rgba(255,255,255,.92) !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  display: -webkit-box !important;
  overflow: hidden !important;
}

/* Niveau MOYEN — Hadith */
body.tv-mode .csz-hadith .csz-text-ar {
  font-size: calc(4vh * var(--tv-scale,1)) !important;
  line-height: 1.65 !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  display: -webkit-box !important;
  overflow: hidden !important;
}
body.tv-mode .csz-hadith .csz-text-fr {
  font-size: calc(2.8vh * var(--tv-scale,1)) !important;
  color: rgba(255,255,255,.92) !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  display: -webkit-box !important;
  overflow: hidden !important;
}

/* Niveau MOYEN — Défaut / Ayat */
body.tv-mode .csz-text-ar {
  font-size: calc(5vh * var(--tv-scale,1)) !important;
  line-height: 1.7 !important;
}
body.tv-mode .csz-text-fr {
  font-size: calc(3vh * var(--tv-scale,1)) !important;
  color: rgba(255,255,255,.92) !important;
}

/* Annonce */
body.tv-mode .csz-annonce .csz-text-fr {
  font-size: calc(4vh * var(--tv-scale,1)) !important;
  -webkit-line-clamp: unset !important;
}

/* ────────────────────────────────────────────────────────
   ÉVÉNEMENTS — Adhan / Invocation / Iqama
   Cohérence : même structure de taille
   ──────────────────────────────────────────────────────── */

/* Adhan */
body.tv-mode .adhan-title        { font-size: calc(16vh * var(--tv-scale,1)) !important; }
body.tv-mode .adhan-prayer-fr    { font-size: calc(5.5vh * var(--tv-scale,1)) !important; }
body.tv-mode .adhan-prayer-ar    { font-size: calc(5.5vh * var(--tv-scale,1)) !important; }
body.tv-mode .adhan-prayer-sep   { font-size: calc(4.5vh * var(--tv-scale,1)) !important; }
body.tv-mode .adhan-subtitle     { font-size: calc(3vh * var(--tv-scale,1)) !important; }
body.tv-mode .adhan-arabic       { font-size: calc(8vh * var(--tv-scale,1)) !important; }
body.tv-mode .adhan-icon img     { width: calc(8vh * var(--tv-scale,1)) !important; }
body.tv-mode .adhan-nophone      { width: calc(22vw * var(--tv-scale,1)) !important; max-height: calc(22vh * var(--tv-scale,1)) !important; }

/* Iqama */
body.tv-mode .iqama-title        { font-size: calc(16vh * var(--tv-scale,1)) !important; }
body.tv-mode .iqama-arabic       { font-size: calc(8vh * var(--tv-scale,1)) !important; }
body.tv-mode .iqama-icon img     { width: calc(10vh * var(--tv-scale,1)) !important; }
body.tv-mode .iqama-icon         { font-size: calc(8vh * var(--tv-scale,1)) !important; }
body.tv-mode .iqama-nophone      { width: calc(25vw * var(--tv-scale,1)) !important; max-height: calc(25vh * var(--tv-scale,1)) !important; }

/* Invocations */
body.tv-mode .invocation_title_ar { font-size: calc(4vh * var(--tv-scale,1)) !important; }
body.tv-mode .invocation_title_fr { font-size: calc(3vh * var(--tv-scale,1)) !important; }
body.tv-mode .dua-title-sep       { font-size: calc(3vh * var(--tv-scale,1)) !important; }
body.tv-mode .invocation_ar       { font-size: calc(7vh * var(--tv-scale,1)) !important; line-height:1.7 !important; }
body.tv-mode .invocation_fr       { font-size: calc(3.5vh * var(--tv-scale,1)) !important; color:rgba(255,255,255,.9) !important; }

/* Blackscreen */
body.tv-mode .black-screen-text  { font-size: calc(5vh * var(--tv-scale,1)) !important; }

/* ══ Icônes invocations — pictogrammes SVG par catégorie ═══════ */
.mob-invoc-cat-icon { font-size:28px; margin-bottom:6px; line-height:1; }