@charset "UTF-8";
/* Horaires intégrés (iframe de l'accueil aml-limoux.fr) : charte de l'app (bleu nuit, or, violet), aucune police nouvelle.
   Reem Kufi est déjà servie par le site (même fichier que css/style.css). Pas de hauteur forcée : l'iframe épouse le contenu. */
@font-face { font-family: 'Reem Kufi'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/reem-kufi-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0100-0101, U+0112-0113, U+012A-012B, U+014C-014D, U+016A-016B, U+0178, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Reem Kufi'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/reem-kufi-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E; }

:root {
  --hi-bg: #14205a;            /* fond de l'accueil aml-limoux.fr */
  --hi-card: #0d1b3e;
  --hi-gold: #c9a84c;
  --hi-text: #e8ecf4;
  --hi-soft: #c3cbe0;
  --hi-violet: #4c1d95;
  --hi-line: rgba(201, 168, 76, .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--hi-bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--hi-text);
  font-family: 'DM Sans', 'Reem Kufi', Arial, Helvetica, sans-serif; line-height: 1.25; /* pile de l'app (DM Sans n'est pas servie : Reem Kufi) */
  overflow-wrap: anywhere;
}

/* Contenu réservé aux lecteurs d'écran */
.hi-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.hi {
  display: grid; gap: .5rem; max-width: 72rem; margin: 0 auto; padding: .5rem;
  grid-template-columns: minmax(0, 1fr);
}
.hi p, .hi ul { margin: 0; padding: 0; list-style: none; }
.hi-head, .hi-next, .hi-list, .hi-extra {
  background: var(--hi-card); border: 1px solid var(--hi-line); border-radius: 1rem;
}
.hi-head { padding: .5rem .75rem; text-align: center; }
.hi-hijri { color: var(--hi-gold); font-weight: 700; font-size: 1.05rem; }
.hi-solar { color: var(--hi-soft); font-size: .95rem; }
.hi-next { padding: .5rem .75rem; text-align: center; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; gap: .3em; flex-wrap: wrap; background: var(--hi-violet); border-color: var(--hi-gold); }
.hi-next-name, .hi-next-left { font-weight: 700; }
.hi-next-left, .hi-time { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; } /* chiffres de l'app (--font-digits) ; une heure ne se coupe jamais */

.hi-list, .hi-extra { padding: .25rem; }
.hi-list li, .hi-extra li {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: 2.5rem; padding: .25rem .625rem; border: 2px solid transparent; border-radius: .75rem;
}
.hi-names { display: flex; align-items: baseline; flex-wrap: wrap; gap: .125rem .625rem; min-width: 0; }
.hi-fr { color: var(--hi-gold); font-weight: 700; font-size: 1.1rem; }
.hi-ar { font-family: 'Reem Kufi', system-ui, sans-serif; color: var(--hi-soft); font-size: 1rem; }
.hi-time { font-weight: 700; font-size: 1.2rem; }
.hi-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.hi-extra .hi-fr { font-size: 1rem; }
.hi-extra .hi-time { font-size: 1.05rem; }

/* Prochaine prière : toute la ligne (fond violet, bordure or de 2 px contrastée à plus de 3:1, texte pour lecteurs d'écran), pas seulement la couleur */
.hi-list li.is-next { background: var(--hi-violet); border-color: var(--hi-gold); }
.hi-list li.is-next .hi-fr, .hi-list li.is-next .hi-ar { color: #fff; }
.hi-flag { display: none; }
.hi-list li.is-next .hi-flag { display: block; }

/* Ordinateur : deux colonnes (dates et décompte à gauche, horaires à droite) */
@media (min-width: 640px) {
  .hi { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head list" "next list" "extra list"; padding: .75rem; gap: .625rem; align-content: start; }
  .hi-head { grid-area: head; align-self: end; }
  .hi-next { grid-area: next; font-size: 1.25rem; }
  .hi-extra { grid-area: extra; }
  .hi-list { grid-area: list; display: flex; flex-direction: column; justify-content: space-around; }
  .hi-hijri { font-size: 1.25rem; }
}
@media (max-width: 340px) {
  .hi { padding: .375rem; }
  .hi-fr { font-size: 1rem; }
  .hi-time { font-size: 1.1rem; }
  .hi-list li, .hi-extra li { padding-inline: .375rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .hi-list li { transition: background-color .2s ease, border-color .2s ease; }
}