/* ============================================================================
   ACST — Accueil « Le ciel des heures »
   Chargée par core/home.html seulement, APRÈS refonte.css : elle en reprend
   les jetons (--b-*) et ne redéfinit rien de partagé. Préfixe `ac-`.

   Ce qui bouge, et pourquoi :
     · le ciel du hero suit l'heure réelle (accueil.js) : ses couleurs se
       fondent d'une phase à l'autre, le soleil et la lune font leur course ;
       la nuit, des étoiles filantes ; le jour, des nuages et parfois un vol
       d'oiseaux ;
     · la course du soleil de « La journée » : tracée par accueil.js ;
     · le reste — mots qui montent, étoiles tracées, cartes qui s'allument
       sous le pointeur — accompagne la lecture, sans jamais la retenir.
   En mouvement réduit, rien ne file ni ne vole : les astres restent posés à
   leur place du moment.
   ============================================================================ */

/* Angle animable pour la bordure tournante de la prochaine prière. */
@property --ac-ang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
/* Densité des nuages : enregistrée pour pouvoir glisser d'une heure à l'autre. */
@property --cloud-o {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.06;
}
@keyframes acSpin { to { rotate: 360deg; } }

/* ════════════════════════════════════════════════════════════════════
   HERO — le ciel des heures
   ════════════════════════════════════════════════════════════════════ */
.ac-hero {
  --cloud-rgb: 190, 200, 205;
  transition: --cloud-o 3s ease;
}

/* « Prochaine prière — Asr · 16:41 » tient sur une ligne : la règle
   `.bhero-next span { display: block }` de refonte.css visait le conteneur,
   elle empilait aussi chaque morceau. */
.ac-hero .bhero-next span span { display: inline; }
.ac-hero .bhero-next > span {
  font-size: clamp(19px, 2.3vw, 27px);
  letter-spacing: 0.01em;
  text-wrap: balance;
}

/* Les astres passent derrière les textes : un halo couleur de ciel les garde
   lisibles, même quand le soleil est juste derrière. */
.ac-hero .bhero-phase-label,
.ac-hero .bhero-next,
.ac-hero .bhero-date > span {
  text-shadow: 0 0 10px rgba(8, 26, 22, 0.95), 0 0 22px rgba(8, 26, 22, 0.8);
}

/* Chaque groupe de chiffres change « en roulant » (accueil.js pose .is-tick). */
.ac-hero .bhero-count [data-countdown-h],
.ac-hero .bhero-count [data-countdown-m],
.ac-hero .bhero-count [data-countdown-s] { display: inline-block; }
.ac-hero .bhero-count .is-tick { animation: acTick 520ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes acTick {
  from { opacity: 0.25; transform: translateY(-0.16em); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* En quittant le hero, son contenu s'efface et remonte un peu. */
.ac-hero .heroB-stage {
  opacity: calc(1 - var(--hero-out, 0) * 1.3);
  translate: 0 calc(var(--hero-out, 0) * -56px);
}

/* ── Les astres ──────────────────────────────────────────────────────
   accueil.js pose left / top / opacity toutes les 20 s ; la transition de
   même durée les fait glisser sans à-coup. Sans script : la lune reste où
   se tenait l'ancien astre, le soleil est caché. */
.ac-astres { position: absolute; inset: 0; pointer-events: none; }
.ac-sun, .ac-moon {
  position: absolute;
  left: 71%;
  top: 20%;
  translate: -50% -50%;
}
.ac-astres.is-moving .ac-sun,
.ac-astres.is-moving .ac-moon {
  transition: left 20s linear, top 20s linear, opacity 1600ms ease;
}

.ac-sun { width: 56px; height: 56px; opacity: 0; --low: 0; }
.ac-sun-halo, .ac-sun-disk { position: absolute; border-radius: 50%; }
.ac-sun-halo {
  inset: -80px;
  background: radial-gradient(circle, rgba(250, 226, 170, 0.3), rgba(250, 226, 170, 0) 62%);
  animation: haloBreathe 7s ease-in-out infinite;
}
/* Près de l'horizon, le halo rougit. */
.ac-sun-halo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 150, 90, 0.42), rgba(240, 150, 90, 0) 62%);
  opacity: var(--low);
  transition: opacity 3s ease;
}
.ac-sun-disk {
  inset: 0;
  background: radial-gradient(circle at 38% 35%, #FBF0CF, #E8C47C);
  box-shadow: 0 0 40px 10px rgba(244, 222, 170, 0.4);
}
.ac-sun-disk::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #FFD9A0, #DD7A40);
  opacity: var(--low);
  transition: opacity 3s ease;
}
/* Kerahat : le soleil prend le cuivre, c'est lui qui est en cause. */
[data-kerahat] .ac-sun-disk {
  background: radial-gradient(circle at 38% 35%, #F7DDA8, #D68A4A);
  box-shadow: 0 0 60px 18px rgba(214, 138, 74, 0.45);
  transition: background 900ms ease, box-shadow 900ms ease;
}

.ac-moon { width: 58px; height: 58px; }
.ac-moon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 18px rgba(239, 227, 200, 0.35));
}
.ac-moon-lit { fill: #EFE3C8; }
/* La lumière cendrée : la part sombre de la lune se devine. */
.ac-moon-ash { fill: rgba(239, 227, 200, 0.1); }
[data-saison] .ac-moon svg { filter: drop-shadow(0 0 40px var(--sa-teinte, transparent)); }

/* ── Étoiles qui scintillent en croix ── */
.ac-sparkles {
  position: absolute;
  inset: 0 0 40% 0;
  pointer-events: none;
  transition: opacity 1600ms ease;
}
.ac-sparkles i {
  position: absolute;
  width: 16px;
  height: 16px;
  animation: acSparkle 6s ease-in-out infinite;
}
.ac-sparkles i::before,
.ac-sparkles i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}
.ac-sparkles i::before { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #FFF6E1, transparent); }
.ac-sparkles i::after  { width: 1px; height: 100%; background: linear-gradient(180deg, transparent, #FFF6E1, transparent); }
.ac-sparkles i:nth-child(1) { left: 12%; top: 22%; }
.ac-sparkles i:nth-child(2) { left: 29%; top: 12%;  animation-duration: 7.5s; animation-delay: -2s; }
.ac-sparkles i:nth-child(3) { left: 61%; top: 13%; animation-duration: 5.2s; animation-delay: -4s; }
.ac-sparkles i:nth-child(4) { left: 87%; top: 34%; animation-duration: 8s;   animation-delay: -1s; }
.ac-sparkles i:nth-child(5) { left: 93%; top: 17%; animation-duration: 6.4s; animation-delay: -3s; width: 11px; height: 11px; }
@keyframes acSparkle {
  0%, 100% { opacity: 0.2; scale: 0.55; }
  50%      { opacity: 1;   scale: 1; }
}

/* ── Étoiles filantes : posées une à une par accueil.js ──
   La tête est au bout droit du trait ; la rotation (--ang) l'oriente dans le
   sens de la course, --dx / --dy la font traverser le ciel. */
.ac-meteors { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ac-meteor {
  position: absolute;
  width: var(--len, 120px);
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 246, 225, 0), rgba(255, 246, 225, 0.95));
  transform-origin: right center;
  rotate: var(--ang, 150deg);
  opacity: 0;
  animation: acShoot var(--dur, 1100ms) cubic-bezier(0.35, 0, 0.75, 1) forwards;
}
.ac-meteor::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: #FFF8E8;
  box-shadow: 0 0 8px 2px rgba(255, 246, 225, 0.8);
}
.ac-meteor.is-bright { height: 2px; }
.ac-meteor.is-bright::after { width: 6px; height: 6px; margin-top: -3px; box-shadow: 0 0 14px 4px rgba(255, 236, 200, 0.85); }
@keyframes acShoot {
  0%   { opacity: 0; translate: 0 0; }
  12%  { opacity: 1; }
  75%  { opacity: 0.9; }
  100% { opacity: 0; translate: var(--dx, -300px) var(--dy, 160px); }
}

/* ── Nuages : trois voiles lents, teintés par l'heure (--cloud-rgb / -o) ── */
.ac-clouds { position: absolute; inset: 0 0 28% 0; overflow: hidden; pointer-events: none; }
.ac-clouds i {
  position: absolute;
  left: 0;
  width: 420px;
  height: 90px;
  background:
    radial-gradient(40% 55% at 30% 60%, rgba(var(--cloud-rgb), var(--cloud-o)), transparent 70%),
    radial-gradient(35% 60% at 55% 45%, rgba(var(--cloud-rgb), calc(var(--cloud-o) * 0.9)), transparent 70%),
    radial-gradient(30% 45% at 78% 62%, rgba(var(--cloud-rgb), calc(var(--cloud-o) * 0.75)), transparent 70%);
  animation: acDrift 260s linear infinite;
}
.ac-clouds i:nth-child(1) { top: 9%; animation-delay: -70s; }
.ac-clouds i:nth-child(2) { top: 25%; width: 320px; height: 70px; animation-duration: 210s; animation-delay: -150s; }
.ac-clouds i:nth-child(3) { top: 41%; width: 540px; height: 104px; animation-duration: 330s; animation-delay: -20s; }
@keyframes acDrift {
  from { translate: -560px 0; }
  to   { translate: calc(100vw + 60px) 0; }
}

/* ── Oiseaux : un vol traverse le ciel de temps en temps, le jour ──
   .ac-flock porte la traversée (horizontale, régulière), .ac-flock-lift la
   courbe (verticale, douce) ; chaque oiseau ondule un peu pour lui-même. Les
   battements d'ailes sont animés par SMIL (accueil.js). */
.ac-birds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ac-flock {
  position: absolute;
  left: 0;
  top: var(--y, 30%);
  width: 240px;
  height: 110px;
  animation: acFly var(--dur, 26s) linear forwards;
}
.ac-flock.is-back { scale: -1 1; animation-name: acFlyBack; }
@keyframes acFly {
  from { translate: -260px 0; }
  to   { translate: calc(100vw + 20px) 0; }
}
@keyframes acFlyBack {
  from { translate: calc(100vw + 20px) 0; }
  to   { translate: -260px 0; }
}
.ac-flock-lift {
  position: absolute;
  inset: 0;
  animation: acLift var(--dur, 26s) ease-in-out forwards;
}
@keyframes acLift {
  0%   { translate: 0 0; }
  50%  { translate: 0 var(--arc, -20px); }
  100% { translate: 0 var(--drift, 10px); }
}
.ac-bird {
  position: absolute;
  width: var(--w, 24px);
  height: auto;
  overflow: visible;
  fill: rgba(8, 24, 21, var(--bird-o, 0.75));
  animation: acBob var(--bob, 3s) ease-in-out infinite alternate;
}
@keyframes acBob { to { translate: 0 -5px; } }

/* ════════════════════════════════════════════════════════════════════
   Briques communes aux sections
   ════════════════════════════════════════════════════════════════════ */
.ac-wrap { max-width: 1120px; }
.ac-head { text-align: center; margin: 0 auto 54px; max-width: 760px; }
.ac-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 500;
  line-height: 1.12;
  margin: 0;
  color: var(--b-ink);
  text-wrap: balance;
}
.ac-sub { font-size: 12.5px; color: var(--b-mute); margin: 16px 0 0; }
.ac-more {
  margin-top: 34px;
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.ac-empty { text-align: center; color: var(--b-mute); font-size: 14px; }

/* Titres : les mots montent un à un (accueil.js découpe [data-split]). */
.ac-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.ac-w > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 55ms + 120ms);
}
.rv-in .ac-w > span { transform: none; }

/* Lumière qui suit le pointeur sur les cartes (accueil.js pose --mx/--my). */
[data-spot] { position: relative; isolation: isolate; }
[data-spot]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
              rgba(var(--b-goldhi-rgb), 0.13), transparent 62%);
}
[data-spot]:hover::before { opacity: 1; }

/* ════════════════════════════════════════════════════════════════════
   LA JOURNÉE — la course du soleil
   ════════════════════════════════════════════════════════════════════ */
.ac-arc { margin: 0 0 46px; }
html.no-js .ac-arc { display: none; }
.ac-arc svg { display: block; width: 100%; height: auto; overflow: visible; }

.ac-arc-horizon { stroke: rgba(var(--b-tan-rgb), 0.3); stroke-width: 1; stroke-dasharray: 2 7; }
.ac-arc-glow { fill: url(#ac-arc-sky); }
.ac-arc-stop { stop-color: rgb(var(--b-goldhi-rgb)); }
.ac-arc-path {
  fill: none;
  stroke: rgba(var(--b-tan-rgb), 0.34);
  stroke-width: 1.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2200ms cubic-bezier(0.65, 0, 0.35, 1) 150ms;
}
.rv-in .ac-arc-path { stroke-dashoffset: 0; }
.ac-arc-past { fill: none; stroke: var(--b-gold); stroke-width: 2.2; stroke-linecap: round; }
.ac-arc-drop { stroke: rgba(var(--b-goldhi-rgb), 0.45); stroke-width: 1; stroke-dasharray: 2 4; }

.ac-arc-mark { opacity: 0; transition: opacity 600ms ease; transition-delay: var(--d, 0ms); }
.rv-in .ac-arc-mark { opacity: 1; }
.ac-arc-dot { fill: var(--b-bg); stroke: rgba(var(--b-tan-rgb), 0.6); stroke-width: 1.3; }
.ac-arc-mark.is-passed .ac-arc-dot { fill: var(--b-gold); stroke: var(--b-gold); }
.ac-arc-mark.is-next .ac-arc-dot { fill: var(--b-gold-hi); stroke: var(--b-gold-hi); }
.ac-arc-ring { fill: none; stroke: var(--b-gold-hi); stroke-width: 1; opacity: 0; }
.ac-arc-mark.is-next .ac-arc-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: acRing 2.4s ease-out infinite;
}
@keyframes acRing {
  0%   { opacity: 0.8; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(2.2); }
}
/* Un liseré couleur de fond autour des lettres : la courbe passe dessous. */
.ac-arc-name, .ac-arc-time {
  paint-order: stroke fill;
  stroke: var(--b-bg);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.ac-arc-name {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  fill: var(--b-mute);
}
.ac-arc-time {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  fill: var(--b-ink);
  font-variant-numeric: tabular-nums;
}
.ac-arc-mark.is-next .ac-arc-name { fill: var(--b-gold-soft); }
.ac-arc-mark.is-next .ac-arc-time { fill: var(--b-gold-hi); }
.ac-arc-mark.is-passed .ac-arc-time { fill: var(--b-mute); }

.ac-arc-sun { opacity: 0; transition: opacity 700ms ease 500ms; }
.rv-in .ac-arc-sun { opacity: 1; }
.ac-arc-sun-core { fill: #F4DFA8; }
.ac-arc-sun-halo {
  fill: rgba(var(--b-goldhi-rgb), 0.22);
  transform-box: fill-box;
  transform-origin: center;
  animation: haloBreathe 4.5s ease-in-out infinite;
}
[data-theme="light"] .ac-arc-sun-core { fill: #E2B45E; }
.ac-arc-sun.is-night .ac-arc-sun-core { fill: #EFE3C8; }
[data-theme="light"] .ac-arc-sun.is-night .ac-arc-sun-core { fill: #B8A27A; }
.ac-arc-sun.is-night .ac-arc-sun-halo { fill: rgba(var(--b-tan-rgb), 0.16); }

/* ── Les six cartes : des niches, arc en tête ── */
.ac-pcards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.ac-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 34px 10px 20px;
  border: 1px solid var(--b-line);
  /* Rayons en % horizontalement : des rayons géants seraient réduits par le
     navigateur, et l'arc avec eux. */
  border-radius: 50% 50% 6px 6px / 44px 44px 6px 6px;
  background: linear-gradient(180deg, rgba(var(--b-ink-rgb), 0.035), rgba(var(--b-ink-rgb), 0.01));
  /* La liste complète : `transition` remplacerait sinon celle de `.rv` et
     son délai d'échelonnement. Le survol passe par `translate`, qui se
     compose avec le `transform` de la révélation. */
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--rv-delay, 0ms),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--rv-delay, 0ms),
    translate 350ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 350ms ease;
}
.ac-pcard:hover { translate: 0 -5px; border-color: rgba(var(--b-tan-rgb), 0.4); }
.ac-pcard.is-passed { opacity: 0.5; }
.ac-pcard.is-next {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(var(--b-bronze-rgb), 0.2), rgba(var(--b-bronze-rgb), 0.06)) padding-box,
    linear-gradient(var(--b-bg), var(--b-bg)) padding-box,
    conic-gradient(from var(--ac-ang), rgba(var(--b-goldhi-rgb), 0.15), var(--b-gold-hi), rgba(var(--b-goldhi-rgb), 0.15) 40%, var(--b-gold) 70%, rgba(var(--b-goldhi-rgb), 0.15)) border-box;
  animation: acTurn 6s linear infinite;
  box-shadow: 0 18px 50px -24px rgba(var(--b-bronze-rgb), 0.7);
}
@keyframes acTurn { to { --ac-ang: 360deg; } }
.ac-pcard-tag {
  display: none;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--b-gold);
  color: var(--b-on-gold);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ac-pcard.is-next .ac-pcard-tag { display: block; }
.ac-pcard-ico {
  width: 26px;
  height: 26px;
  margin-bottom: 12px;
  fill: none;
  stroke: var(--b-gold-soft);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}
.ac-pcard.is-next .ac-pcard-ico { stroke: var(--b-gold-hi); opacity: 1; filter: drop-shadow(0 0 8px rgba(var(--b-goldhi-rgb), 0.55)); }
.ac-pcard-name {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--b-ink-soft);
}
.ac-pcard.is-next .ac-pcard-name { color: var(--b-gold-soft); }
.ac-pcard-alt { font-size: 10.5px; color: var(--b-faint); margin: 3px 0 12px; min-height: 1em; }
.ac-pcard-time {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--b-ink);
}
.ac-pcard.is-next .ac-pcard-time { color: var(--b-gold-hi); }

/* ════════════════════════════════════════════════════════════════════
   RUBAN — mots arabes et leur sens
   ════════════════════════════════════════════════════════════════════ */
.ac-ribbon {
  overflow: hidden;
  background: var(--b-bg3);
  border-top: 1px solid var(--b-line);
  border-bottom: 1px solid var(--b-line);
  padding: 20px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ac-ribbon-track { display: flex; width: max-content; animation: acMarquee 60s linear infinite; }
.ac-ribbon:hover .ac-ribbon-track { animation-play-state: paused; }
.ac-ribbon-set { display: flex; align-items: center; gap: 34px; padding-right: 34px; }
.ac-ribbon-set > span {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--b-mute);
}
.ac-ribbon-set b {
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--b-gold);
  line-height: 1;
}
.ac-ribbon-set i { width: 5px; height: 5px; background: var(--b-gold); opacity: 0.6; transform: rotate(45deg); flex: none; }
@keyframes acMarquee { to { transform: translateX(-50%); } }

/* ════════════════════════════════════════════════════════════════════
   À LA MOSQUÉE — mosaïque + raccourcis
   ════════════════════════════════════════════════════════════════════ */
.ac-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(200px, auto);
  gap: 14px;
}
.ac-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 28px 30px;
  overflow: hidden;
  border: 1px solid var(--b-line);
  background: var(--b-bg);
  color: var(--b-ink);
  text-decoration: none;
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--rv-delay, 0ms),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--rv-delay, 0ms),
    border-color 350ms ease;
}
a.ac-card:hover { border-color: rgba(var(--b-tan-rgb), 0.45); }
a.ac-card:focus-visible, .ac-tile:focus-visible { outline: 2px solid var(--b-gold); outline-offset: 3px; }
.ac-card--event  { grid-column: span 2; grid-row: span 2; }
.ac-card--hadith { grid-column: span 2; }

.ac-card-kicker {
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--b-gold-soft);
}
.ac-card-title {
  font-size: 25px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--b-ink);
}
.ac-card-meta { font-size: 12.5px; color: var(--b-gold-soft); }
.ac-card-meta::first-letter { text-transform: uppercase; }
.ac-card-text { font-size: 13.5px; line-height: 1.65; color: var(--b-mute); }
.ac-card-go {
  margin-top: auto;
  align-self: flex-end;
  font-size: 18px;
  color: var(--b-gold);
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
a.ac-card:hover .ac-card-go { transform: translateX(6px); }

/* Prochain événement : la grande carte, rosace qui tourne lentement. */
.ac-card--event {
  padding: 36px 38px 34px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(var(--b-bronze-rgb), 0.24), transparent 60%),
    linear-gradient(160deg, rgba(var(--b-bronze-rgb), 0.1), transparent 55%),
    var(--b-bg);
}
.ac-card-rosace {
  position: absolute;
  z-index: -1;
  top: -70px;
  right: -70px;
  width: 300px;
  height: 300px;
  stroke: var(--b-gold);
  stroke-width: 0.6;
  opacity: 0.35;
  animation: acSpin 90s linear infinite;
}
.ac-ev-name { font-size: clamp(32px, 3.6vw, 46px); font-weight: 500; line-height: 1.05; margin-top: 8px; }
.ac-ev-ar { font-size: 24px; color: var(--b-gold); line-height: 1.5; }
.ac-ev-desc { font-size: 14px; line-height: 1.7; color: var(--b-mute); max-width: 44ch; margin-top: 6px; }
.ac-ev-foot { margin-top: auto; display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.ac-ev-days {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(56px, 7vw, 88px);
  font-weight: 600;
  line-height: 0.9;
  color: var(--b-gold);
}
.ac-ev-days small { font-size: 0.5em; font-weight: 500; opacity: 0.8; margin-right: 2px; }
.ac-ev-date { font-size: 13px; color: var(--b-ink-soft); padding-bottom: 8px; }
.ac-ev-date::first-letter { text-transform: uppercase; }

/* Hadiths : deux textes superposés, en fondu. */
.ac-card--hadith { background: linear-gradient(180deg, rgba(var(--b-ink-rgb), 0.025), transparent), var(--b-bg); }
.ac-hadith-stage { display: grid; flex: 1; }
.ac-hadith {
  grid-area: 1 / 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  /* Le sortant s'efface vite, l'entrant attend son tour : jamais deux textes
     l'un sur l'autre. */
  transition: opacity 350ms ease, transform 350ms ease, visibility 0s linear 350ms;
}
.ac-hadith.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 800ms ease 380ms, transform 800ms cubic-bezier(0.22, 1, 0.36, 1) 380ms, visibility 0s;
}
.ac-hadith-ar { font-size: 23px; line-height: 1.7; color: var(--b-gold); text-align: right; }
.ac-hadith-text {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 21px;
  line-height: 1.45;
  color: var(--b-ink);
  text-wrap: pretty;
}
.ac-hadith-src { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--b-mute); }
.ac-hadith-dots { display: flex; gap: 8px; margin-top: 4px; }
.ac-hadith-dot {
  width: 22px;
  height: 3px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: rgba(var(--b-tan-rgb), 0.3);
  cursor: pointer;
  transition: background 300ms ease, width 300ms ease;
}
.ac-hadith-dot.is-on { width: 38px; background: var(--b-gold); }
.ac-hadith-dot:focus-visible { outline: 2px solid var(--b-gold); outline-offset: 3px; }

/* Raccourcis */
.ac-tiles {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.ac-tile {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 22px 22px 24px;
  border: 1px solid var(--b-line);
  background: var(--b-bg);
  color: var(--b-ink);
  text-decoration: none;
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--rv-delay, 0ms),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--rv-delay, 0ms),
    translate 350ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 350ms ease;
}
.ac-tile:hover { border-color: rgba(var(--b-tan-rgb), 0.45); translate: 0 -3px; }
/* Le mot arabe en filigrane, rogné par le bord : une texture, pas un texte. */
.ac-tile-ar {
  position: absolute;
  z-index: -1;
  right: -4px;
  bottom: -22px;
  font-size: 66px;
  line-height: 1.4;
  color: var(--b-gold);
  opacity: 0.09;
  transition: opacity 400ms ease, translate 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ac-tile:hover .ac-tile-ar { opacity: 0.22; translate: -8px 0; }
.ac-tile-title { font-size: 14.5px; font-weight: 600; }
.ac-tile-sub { font-size: 12.5px; line-height: 1.5; color: var(--b-mute); }

/* ════════════════════════════════════════════════════════════════════
   L'ASSOCIATION — trois piliers, trois étoiles tracées
   ════════════════════════════════════════════════════════════════════ */
.ac-pillar-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.ac-pillar {
  overflow: hidden;
  text-align: center;
  padding: 42px 30px 38px;
  border: 1px solid var(--b-line);
  background: var(--b-bg2);
}
.ac-star {
  width: 78px;
  height: 78px;
  margin: 0 auto 18px;
  display: block;
  stroke: var(--b-gold);
  stroke-width: 1;
}
.ac-star > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1300ms cubic-bezier(0.65, 0, 0.35, 1);
}
.ac-star > :nth-child(2) { transition-delay: 250ms; }
.ac-star > :nth-child(3) { transition-delay: 500ms; }
.ac-star > :nth-child(4) { transition-delay: 650ms; transition-duration: 1800ms; }
.rv-in .ac-star > * { stroke-dashoffset: 0; }
.ac-star-ring { stroke-width: 0.5; opacity: 0.6; }
.ac-pillar:hover .ac-star { animation: acSpin 12s linear infinite; }
.ac-pillar-ar { font-size: 30px; color: var(--b-gold); line-height: 1.4; margin-bottom: 6px; }
.ac-pillar h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--b-ink);
}
.ac-pillar p { font-size: 13.5px; color: var(--b-mute); line-height: 1.7; margin: 0; }

/* ════════════════════════════════════════════════════════════════════
   VENEZ NOUS RENCONTRER — une fenêtre en arche
   ════════════════════════════════════════════════════════════════════ */
.ac-visit-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: center;
}
.ac-window {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4 / 5;
  justify-self: center;
  overflow: hidden;
  border: 1px solid rgba(var(--b-tan-rgb), 0.45);
  border-radius: 50% 50% 4px 4px / 40% 40% 4px 4px;
  background:
    radial-gradient(70% 55% at 50% 38%, rgba(var(--b-bronze-rgb), 0.3), transparent 70%),
    linear-gradient(180deg, var(--b-bg3), var(--b-bg));
}
.ac-window::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(var(--b-tan-rgb), 0.22);
  border-radius: inherit;
  pointer-events: none;
}
.ac-window-rosace {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 78%;
  translate: -50% -50%;
  stroke: var(--b-gold);
  stroke-width: 0.5;
  opacity: 0.5;
  animation: acSpin 120s linear infinite;
}
.ac-window-mosque {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 86%;
  height: auto;
  translate: -50% 18%;
  transition: translate 1400ms cubic-bezier(0.22, 1, 0.36, 1) 250ms;
}
.rv-in .ac-window-mosque { translate: -50% 0; }
.ac-visit-addr {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  line-height: 1.4;
  color: var(--b-ink-soft);
  margin: 20px 0 18px;
}
.ac-visit-facts { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 8px; }
.ac-visit-facts li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  color: var(--b-mute);
}
.ac-visit-facts li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 5px;
  height: 5px;
  background: var(--b-gold);
  transform: rotate(45deg);
}
.ac-visit-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Un reflet balaie le bouton doré au survol. */
.ac-shine { position: relative; overflow: hidden; }
.ac-shine::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg);
  transition: left 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ac-shine:hover::after { left: 130%; }

/* ════════════════════════════════════════════════════════════════════
   Petits écrans
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .ac-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(180px, auto); }
  .ac-card--event { grid-row: span 1; }
  .ac-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
}
@media (max-width: 760px) {
  .ac-visit-grid { grid-template-columns: 1fr; gap: 40px; }
  .ac-window { max-width: 300px; }
  .ac-visit-text { text-align: center; }
  .ac-visit-facts { justify-items: center; }
  .ac-visit-cta { justify-content: center; }
  .ac-pillar-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* Hero : des astres à l'échelle, et la ligne de date rangée sur deux
     lignes (date · hégirien, puis la ville) au lieu de se casser mot à mot. */
  .ac-sun { width: 42px; height: 42px; }
  .ac-sun-halo { inset: -60px; }
  .ac-moon { width: 44px; height: 44px; }
  .ac-clouds i { scale: 0.7; }
  .ac-hero .bhero-phase-label { letter-spacing: 0.2em; font-size: 11px; padding: 0 8px; }
  .ac-hero .bhero-date { flex-wrap: wrap; justify-content: center; gap: 12px; }
  .ac-hero .bhero-date > span { white-space: nowrap; }
  .ac-hero .bhero-date > span.diamond:last-of-type { display: none; }
  .ac-hero .bhero-date .hv { flex-basis: 100%; justify-content: center; }

  .ac-day, .ac-life, .ac-pillars, .ac-visit { padding-left: 18px; padding-right: 18px; }
  .ac-head { margin-bottom: 40px; }
  .ac-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .ac-card--event, .ac-card--hadith { grid-column: auto; }
  .ac-card { padding: 24px 22px 26px; }
  .ac-card--event { min-height: 300px; }
  .ac-tiles { gap: 10px; }
  .ac-tile { padding: 18px 16px 20px; }
  .ac-tile-ar { font-size: 52px; }
  .ac-pcard { padding: 30px 6px 16px; }
  .ac-pcard-time { font-size: 26px; }
  .ac-ribbon-set b { font-size: 24px; }
}

/* ════════════════════════════════════════════════════════════════════
   Mouvement réduit : tout est posé, rien ne défile ni ne tourne
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* Le ciel reste juste à l'heure près, mais plus rien n'y file ni n'y vole. */
  .ac-meteors, .ac-birds { display: none; }
  .ac-astres.is-moving .ac-sun, .ac-astres.is-moving .ac-moon { transition: none; }
  .ac-sun-halo, .ac-sparkles i { animation: none; }
  .ac-clouds i { animation: none; }
  .ac-clouds i:nth-child(1) { translate: 8vw 0; }
  .ac-clouds i:nth-child(2) { translate: 58vw 0; }
  .ac-clouds i:nth-child(3) { translate: 30vw 0; }
  .ac-hero .bhero-count .is-tick { animation: none; }
  .ac-w > span { transform: none; transition: none; }
  .ac-arc-path { transition: none; stroke-dashoffset: 0; }
  .ac-arc-mark, .ac-arc-sun { opacity: 1; transition: none; }
  .ac-arc-mark.is-next .ac-arc-ring, .ac-arc-sun-halo { animation: none; }
  .ac-pcard.is-next { animation: none; }
  .ac-ribbon-track { animation: none; }
  .ac-card-rosace, .ac-window-rosace, .ac-pillar:hover .ac-star { animation: none; }
  .ac-star > * { transition: none; stroke-dashoffset: 0; }
  .ac-window-mosque { transition: none; translate: -50% 0; }
  .ac-hadith { transition: none; }
}
/* Sans JavaScript : les tracés et la mosquée sont à leur place. */
html.no-js .ac-star > * { stroke-dashoffset: 0; }
html.no-js .ac-window-mosque { translate: -50% 0; }