@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════
   style.css — Horaires des Prières / Mosquée de Limoux
   Charte graphique unifiée AML (bleu marine · violet · or)
   ═══════════════════════════════════════════════════════════

   Palette :
     --navy       : #0d1b3e   (fond principal)
     --navy-mid   : #0f2255   (sections alternées)
     --navy-card  : #131f45   (cartes)
     --violet     : #4c1d95   (accent principal)
     --violet-soft: rgba(76,29,149,.55)
     --gold       : #c9a84c   (accent secondaire)
     --gold-soft  : rgba(201,168,76,.25)
     --text       : #e8ecf4   (texte principal)
     --text-muted : rgba(232,236,244,.55)
*/

/* ── Variables globales ───────────────────────────────────── */
:root {
  --navy:        #0d1b3e;
  --navy-mid:    #0f2255;
  --navy-card:   rgba(13,27,62,.75);
  --violet:      #4c1d95;
  --violet-soft: rgba(76,29,149,.55);
  --violet-glow: rgba(76,29,149,.18);
  --gold:        #c9a84c;
  --gold-soft:   rgba(201,168,76,.22);
  --text:        #e8ecf4;
  --text-muted:  rgba(232,236,244,.55);
  --radius-card: 1rem;
  --radius-sm:   .6rem;
  --shadow-card: 0 4px 24px rgba(0,0,0,.35);
  --transition:  .25s ease;
}

/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'DM Sans', 'Reem Kufi', Arial, Helvetica, sans-serif;
}

/* Import DM Sans (même que le site AML) */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;700&display=swap');

body {
  background-color: var(--navy);
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(76,29,149,.30) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 85%, rgba(76,29,149,.18) 0%, transparent 55%),
    url('../img/msq3.jpeg') no-repeat center center fixed;
  background-blend-mode: normal, normal, overlay;
  -webkit-background-size: cover;
  -moz-background-size:    cover;
  -o-background-size:      cover;
  background-size: cover;
  color: var(--text);
  text-shadow: none; /* suppression de l'ombre noire globale */
}

a, a:hover, a:focus, a:active {
  text-decoration: none;
  color: inherit;
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--navy); }
::-webkit-scrollbar-thumb { background: var(--violet); border-radius: 3px; }

/* ── Header ───────────────────────────────────────────────── */
header.container-fluid {
  padding: .75vw 2vw;
  background: rgba(13,27,62,.82);
  border-bottom: 1px solid var(--gold-soft);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.titre1 {
  color: var(--text);
  font-size: clamp(1.4rem, 3.5vw, 3rem);
  font-weight: 700;
  letter-spacing: .04em;
  margin: 0 auto;
  overflow: hidden;
  padding: .6vw .5vw;
  white-space: nowrap;
  width: 78%;
  /* Remplace l'ancien text-shadow dur */
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}

/* Ligne décorative dorée sous le titre */
.titre1::after {
  content: '';
  display: block;
  margin: .4vw auto 0;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Météo (coin supérieur droit) */
#weather {
  font-size: 3vw;
  position: fixed;
  right: 16px;
  top: 1.2vw;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
  z-index: 900;
}
#weather i { font-family: weathericons; }

/* ── Carte générique ──────────────────────────────────────── */
.card {
  border: none !important;
  border-radius: var(--radius-card) !important;
}

/* Carte normale — fond bleu marine translucide */
.pdefault {
  background: var(--navy-card) !important;
  border: 1px solid rgba(76,29,149,.35) !important;
  border-radius: var(--radius-card) !important;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.pdefault:hover {
  border-color: var(--violet) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(76,29,149,.35);
}

/* Libellés des prières */
.pdefault p,
.pdefault .card-text {
  color: var(--gold) !important;
  font-size: 3vw;
  font-weight: 600 !important;
  letter-spacing: .03em;
  text-shadow: none;
}

/* Heures dans les cartes */
.pdefault h5,
.pdefault .card-title {
  color: var(--text) !important;
  font-size: 4.5vw;
  font-weight: 700 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* Carte prochaine prière — violet lumineux */
.prochainep {
  background: linear-gradient(135deg, rgba(76,29,149,.75) 0%, rgba(91,45,142,.65) 100%) !important;
  border: 1px solid var(--violet) !important;
  border-radius: var(--radius-card) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 3px var(--violet-glow), var(--shadow-card);
}
.prochainep p,
.prochainep .card-text {
  color: var(--gold) !important;
  font-size: 3vw;
  font-weight: 600 !important;
  text-shadow: none;
}
.prochainep h5,
.prochainep .card-title {
  color: #fff !important;
  font-weight: 700 !important;
}

/* Carte centrale heure actuelle */
.now {
  background: linear-gradient(135deg, rgba(76,29,149,.70) 0%, rgba(13,27,62,.85) 100%) !important;
  border: 1px solid var(--violet) !important;
  border-radius: var(--radius-card) !important;
  backdrop-filter: blur(14px);
  box-shadow: 0 0 0 4px var(--violet-glow), 0 12px 40px rgba(0,0,0,.4);
  padding: 1.5vw;
  position: relative;
}
.now h5 {
  color: #fff !important;
  font-size: clamp(2rem, 8vw, 6rem);
  line-height: 1;
  font-weight: 700 !important;
  text-shadow: 0 2px 16px rgba(76,29,149,.5);
}
.now p,
.now .card-text {
  color: var(--gold) !important;
  font-size: 2.8vw;
  font-weight: 500;
  text-shadow: none;
}

/* Shuruq / Jumua — même style que pdefault mais accent or */
.sh-ju {
  border-top: 2px solid var(--gold-soft) !important;
}

/* Libellés colorés spécifiques */
.text-title  { color: var(--text)  !important; }
.text-shuruq { color: var(--gold)  !important; }
.text-jumua  { color: var(--gold)  !important; }
.text-imsak,
.text-fajr,
.text-dhouhr,
.text-asr,
.text-maghrib,
.text-isha   { color: var(--gold)  !important; }

/* ── Bloc prochaine salat (desktop) ───────────────────────── */
.next-salat-bloc {
  background: linear-gradient(0deg, rgba(13,27,62,.75) 60%, transparent);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  font-size: clamp(1.2rem, 4vw, 3.5rem);
  font-weight: 700;
  height: auto;
  padding: .5vw 0 .8vw;
  color: var(--text);
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.next-salat-bloc img {
  margin: -.8vw .4vw 0 !important;
  width: 3.5vw !important;
  filter: drop-shadow(0 0 6px var(--gold));
}

/* ── Écran noir (temps de prière) ─────────────────────────── */
.ecran-noir {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #0d1b3e 0%, #1a0a3a 100%);
  color: var(--text);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000000;
}
.ecran-noir .nomSalatCurrent {
  color: var(--gold);
  font-size: clamp(2rem, 8vw, 6rem);
  font-weight: 700;
  letter-spacing: .05em;
  text-shadow: 0 0 30px rgba(201,168,76,.5);
}
.ecran-noir .decompteSalat {
  color: var(--text);
  font-size: clamp(1.5rem, 6vw, 4rem);
  font-weight: 500;
}
.next {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  justify-content: space-around;
  align-items: center;
  margin: 3vw auto;
  width: 95%;
  font-size: clamp(2rem, 10vw, 7rem);
  font-weight: bold;
}
.next img {
  margin-top: -3vw !important;
  width: 18vw !important;
  filter: drop-shadow(0 0 20px var(--gold));
}

/* ── Section rappel ───────────────────────────────────────── */
.rappel-txt {
  background: rgba(13,27,62,.85);
  border-top: 1px solid var(--gold-soft);
  border-bottom: 1px solid var(--gold-soft);
  backdrop-filter: blur(8px);
  padding: 1.5vw 2vw;
}
.rappel-txt p {
  color: var(--text) !important;
  font-size: clamp(.9rem, 3vw, 1.8rem);
  font-weight: 500;
  text-shadow: none;
  position: static;
  transform: none;
  text-align: center;
}
.rappel-txt .lar {
  color: var(--gold) !important;
  font-size: clamp(1.2rem, 5vw, 3.5rem);
  font-weight: 700;
  direction: rtl;
  text-align: center;
  line-height: 1.5;
}
.rappel-txt h3 {
  color: var(--gold) !important;
  text-align: center;
}

/* ── Bandeau bas (marquee annonces) ───────────────────────── */
#bas {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 56px;
  background: rgba(13,27,62,.92);
  border-top: 1px solid var(--violet-soft);
  backdrop-filter: blur(12px);
  font-size: clamp(.85rem, 2.5vw, 1.4rem);
  font-weight: 600;
  color: var(--gold);
  display: flex;
  align-items: center;
  padding: 0 1vw;
  z-index: 500;
}
#bas marquee {
  width: 100%;
  color: var(--text);
}

/* ── QR Code store ────────────────────────────────────────── */
.store {
  bottom: 8px;
  left: 8px;
  position: fixed;
  width: 5vw;
  min-width: 48px;
  z-index: 999;
  opacity: .75;
  transition: opacity var(--transition);
}
.store:hover { opacity: 1; }
#qrcode img { width: 100%; border-radius: var(--radius-sm); }

/* ── Images / slider ──────────────────────────────────────── */
.img-fluid {
  width: 100% !important;
  height: 100%;
  object-fit: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.slider {
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ── Rows ─────────────────────────────────────────────────── */
.row { margin-top: 40px; }

/* ══════════════════════════════════════════════════════════
   APP MOBILE (< 576 px)
   ══════════════════════════════════════════════════════════ */

.appMobile {
  color: var(--text);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  width: 95%;
}

/* Bloc heure / prochaine prière mobile */
.next-mobile img {
  margin: -1vw .5vw 0 !important;
  width: 13vw !important;
  filter: drop-shadow(0 0 8px var(--gold));
}

.nomNextSalat { color: var(--gold) !important; font-weight: 600; }
.tempRestant  { color: var(--text) !important; font-weight: 700; }

/* Dates mobile */
.dateLunaire { color: var(--gold);  font-weight: 700; font-size: 1.3em; text-shadow: none; }
.dateSolaire { color: var(--text-muted); font-size: .9em; text-shadow: none; }

/* Conteneur des horaires mobile */
.timeSalat {
  background: rgba(13,27,62,.88) !important;
  border: 1px solid rgba(76,29,149,.4);
  border-radius: 20px;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

/* Lignes prières mobiles */
#prieres .col-10 {
  /* background: rgba(76,29,149,.12); */
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  padding: .5rem .75rem;
  transition: background var(--transition);
}
.nextSalat {
  background: rgba(76,29,149,.45);
  border: 1px solid var(--violet);
}

/* Noms prières (colonne gauche) */
#prieres .col-6:first-child {
  color: var(--gold);
  font-weight: 600;
  font-size: 1.05em;
}

/* Heures prières (colonne droite) */
#prieres .col-6[class*="Time"],
#prieres [class*="Time"] {
  color: var(--text) !important;
  font-size: 4.5vw !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* Imsak / Shuruq / Jumua (bas mobile) */
.ImsakTime, .ShuruqTime, .DhouhrTime {
  color: var(--text) !important;
  font-weight: 700;
  font-size: 1.1em;
}

/* Séparateur */
hr.hr-blurry {
  border: none;
  border-top: 1px solid rgba(201,168,76,.25);
  margin: .5rem 0;
}
hr.mobile {
  border-radius: 10px;
  width: 20%;
  height: .3em;
  background: var(--gold-soft);
  border: none;
  opacity: 1;
  margin: .4em auto;
}

/* Température mobile */
#temperature {
  color: var(--gold);
  font-size: clamp(1.4rem, 5vw, 2.5rem);
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
sup { top: -.4em; font-size: 72%; line-height: 0; position: relative; vertical-align: baseline; }
.wi { font-family: weathericons; line-height: 1; color: var(--gold); }

/* Message / annonce mobile */
.message-mobile {
  background: rgba(13,27,62,.95) !important;
  border-top: 1px solid rgba(76,29,149,.5);
  border-radius: 10px;
}
.rounded-top-90 {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  height: 95vh !important;
}
.message {
  font-size: 1.15em;
  font-weight: 600;
  color: var(--text);
}

/* Boutons ronds */
.btn-circle {
  border-radius: 50%;
  height: 2.5rem;
  width: 2.5rem;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(76,29,149,.55) !important;
  border: 1px solid rgba(76,29,149,.6) !important;
  transition: background var(--transition), border-color var(--transition);
}
.btn-circle:hover { background: var(--violet) !important; }
.btn-circle.btn-sm { height: 1.8rem; width: 1.8rem; font-size: .75rem; }
.btn-close { background: rgba(13,27,62,.8) !important; border: 1px solid rgba(76,29,149,.4) !important; }

/* Titre mobile */
.appMobile h1 {
  color: var(--text);
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — GRAND ÉCRAN (≥ 993 px)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 993px) {
  html, body { overflow: hidden; }

  .content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .lar {
    color: var(--gold);
    overflow: hidden;
    margin: auto;
    font-weight: 700;
    font-size: clamp(1.5rem, 6vw, 4rem);
    text-align: center;
  }

  .pdefault, .prochainep { width: 15vw; }
  .sh-ju { width: 100%; }

  .slider {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — INTERMÉDIAIRE (≤ 1644 px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1644px) {
  .slider {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .prochainep, .pdefault, .now {
    margin-bottom: 16px !important;
    height: auto !important;
  }
  .prochainep p, .pdefault p, .now p {
    font-size: clamp(.85rem, 2.5vw, 1.4rem) !important;
  }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 575 px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
  html, body { overflow: hidden; }

  .message-mobile { display: block; }
}

@media (min-width: 576px) {
  .message-mobile { display: none; }
}

/* ── Shuruq mobile position ───────────────────────────────── */
.shuruq { margin-top: 0 !important; }