/* Site muzzlimin.com, version F (planches `SiteF-*` et `Legal-*` du canevas
   de design) : nuit, rouge, Newsreader pour les titres, Geist pour le reste,
   étoiles qui scintillent, halo qui respire, sections qui montent. */
:root {
  --bg: #0C0B10; --card: #17151C; --line: rgba(255,255,255,.10); --line2: rgba(255,255,255,.18);
  --ink: #F5F1EA; --soft-ink: #D8D2C8; --sub: #A8A095; --mute: #6F675E;
  --red: #D92645; --red-text: #FF9098; --red-soft: rgba(217,38,69,.14); --gold: #F0BE5A;
  --wa: #25D366;
  --ui: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --ar: "Amiri Quran", "Amiri", serif;
  --ease: cubic-bezier(.2,.9,.3,1);
  color-scheme: dark;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100%; background: var(--bg); scroll-behavior: smooth }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--ui); -webkit-font-smoothing: antialiased; overflow-x: hidden }
a { color: inherit }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px }

/* Ciel */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0 }
.st { position: absolute; border-radius: 50%; background: #F3ECE0; animation: twinkle 3s ease-in-out infinite }
.glow { position: absolute; left: 50%; top: -200px; width: 820px; height: 820px; margin-left: -410px; border-radius: 50%; background: radial-gradient(circle, rgba(217,38,69,.20), rgba(12,11,16,0) 62%); animation: breathe 4s ease-in-out infinite }

.page { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 0 16px 40px }
.top { display: flex; justify-content: space-between; align-items: center; padding: 20px 0 0; min-height: 64px }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none }
.logo { width: 34px; height: 34px; border-radius: 9px; display: block; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.16) }
.word { font-weight: 700; font-size: 14px; letter-spacing: .14em }
.langs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 20px; border: 1px solid var(--line2) }
.langs button { min-height: 38px; min-width: 44px; padding: 0 12px; border-radius: 17px; border: 0; cursor: pointer; background: transparent; color: var(--sub); font: 600 13.5px var(--ui); transition: background .25s, color .25s }
.langs button[aria-pressed=true] { background: var(--ink); color: #12100E }
.kick { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--red); text-transform: uppercase }

/* Pages légales (maquettes `Legal-*`) */
.legal-page .kick { color: var(--gold) }
.lg-head { padding: 56px 0 8px; max-width: 760px }
.lg-head h1 { font: 300 52px/1.02 var(--display); letter-spacing: -1px; margin: 14px 0 0; text-wrap: balance }
.date { margin-top: 16px; font-size: 14.5px; color: var(--sub) }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px }
.tab { min-height: 40px; padding: 0 16px; border-radius: 20px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--sub); border: 1px solid var(--line); transition: color .25s, border-color .25s }
.tab:hover { color: var(--ink); border-color: var(--line2) }
.tab[aria-current=page] { background: var(--red-soft); color: var(--red-text); border-color: rgba(217,38,69,.5) }
.lg-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; margin-top: 40px; align-items: start }
.toc { position: sticky; top: 24px; display: grid; border-left: 1px solid var(--line) }
.toc-t { font-size: 12px; font-weight: 600; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; padding: 0 0 10px 18px }
.toc a { position: relative; display: block; padding: 8px 0 8px 18px; color: var(--sub); text-decoration: none; font-size: 14px; line-height: 1.35; transition: color .25s }
.toc a:hover { color: var(--ink) }
.toc a::after { content: ""; position: absolute; left: 18px; right: 0; bottom: 3px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease) }
.toc a:hover::after { transform: scaleX(1) }
.lg-text { max-width: 720px; color: var(--soft-ink); font-size: 16px }
.lg-text h2 { font: 400 30px/1.15 var(--display); color: var(--ink); margin: 44px 0 14px; scroll-margin-top: 24px }
.lg-text h2:first-child { margin-top: 0 }
.lg-text p { margin: 0 0 14px }
.lg-text ul { margin: 0 0 16px; padding: 0; list-style: none }
.lg-text li { position: relative; padding-left: 22px; margin: 0 0 10px }
.lg-text li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 3px; background: var(--red) }
.lg-text strong { color: var(--ink); font-weight: 600 }
.lg-text a { color: var(--red-text); text-underline-offset: 3px }
.tbl { overflow-x: auto; margin: 4px 0 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--card) }
.tbl table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px }
.tbl th { text-align: start; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--sub); font-weight: 600; padding: 12px 14px; border-bottom: 1px solid var(--line) }
.tbl td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.5 }
.tbl tr:first-child td { border-top: 0 }
@media (max-width: 860px) {
  .lg-body { grid-template-columns: 1fr; gap: 24px }
  .toc { position: static }
  .lg-head h1 { font-size: 42px }
  .lg-head { padding-top: 40px }
}

/* Pied de page (comme le site) */
.foot { margin-top: 72px; padding-top: 30px; border-top: 1px solid var(--line); display: grid; gap: 18px }
.foot nav { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 15px; color: var(--sub) }
.foot nav a { text-decoration: none; transition: color .2s }
.foot nav a:hover { color: var(--ink) }
.copy { font-size: 14px; color: var(--mute) }

/* Mouvement */
.rise { animation: rise .8s var(--ease) both }
.d1 { animation-delay: .08s } .d2 { animation-delay: .16s } .d3 { animation-delay: .24s } .d4 { animation-delay: .32s }
@keyframes rise { from { opacity: 0; transform: translateY(22px) } to { opacity: 1; transform: none } }
@keyframes twinkle { 0%, 100% { opacity: .15 } 50% { opacity: .9 } }
@keyframes breathe { 0%, 100% { opacity: .55 } 50% { opacity: .9 } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } html { scroll-behavior: auto } }

/* ===================================================================
   Accueil (planches `SiteF-*`)
   =================================================================== */
.home .page { padding-bottom: 120px }
.hero { position: relative; min-height: min(86vh, 820px); display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px 0 60px }
.hero-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: 820px }
.hero h1 { font: 500 clamp(44px, 8vw, 92px)/1.02 var(--display); letter-spacing: -.02em; margin: 20px 0 0; text-wrap: balance }
.hero h1 em { color: var(--red); white-space: nowrap }
.hero h1 small { display: block; font-size: .42em; color: var(--soft-ink); margin-top: 16px; letter-spacing: 0 }
.lead { font-size: clamp(16px, 2vw, 19px); line-height: 1.55; color: var(--soft-ink); max-width: 36em; margin: 22px 0 0 }
.bubbles { position: absolute; inset: 0; pointer-events: none }
.bub { position: absolute; left: var(--x); top: var(--y); display: flex; flex-direction: column; align-items: center; gap: 6px; animation: float 7s ease-in-out infinite; animation-delay: var(--d) }
.bub b { width: 78px; height: 78px; border-radius: 39px; background: rgba(255,255,255,.92); color: #141210; display: grid; place-items: center; font: 400 26px/1 var(--ar); box-shadow: 0 12px 30px rgba(0,0,0,.35) }
.bub i { font-style: normal; padding: 4px 12px; border-radius: 14px; background: #141210; border: 1px solid rgba(255,255,255,.25); font-size: 13px; font-weight: 700; white-space: nowrap }
.bub.sm b { width: 58px; height: 58px; font-size: 19px }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-2deg) } 50% { transform: translateY(-16px) rotate(2deg) } }
@media (max-width: 760px) { .bub { opacity: .55; transform: scale(.7) } .bub.sm { display: none } .bub b { width: 54px; height: 54px; font-size: 18px } }

/* Carte WhatsApp */
.wa-cta { margin-top: 30px; display: flex; align-items: center; gap: 16px; text-align: start; padding: 14px 18px 14px 14px; border-radius: 28px; text-decoration: none; background: rgba(255,255,255,.07); border: 1px solid var(--line2); backdrop-filter: blur(12px); max-width: 520px; width: 100%; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; animation: rise .8s var(--ease) both, ping-wa 2.6s 1.2s ease-in-out infinite }
.wa-cta:hover { transform: translateY(-3px) scale(1.01); border-color: var(--wa); box-shadow: 0 0 0 6px rgba(37,211,102,.16), 0 20px 50px rgba(0,0,0,.4) }
.wa-duo { position: relative; flex: none; width: 66px; height: 60px }
.wa-duo img { width: 52px; height: 52px; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.4) }
.wa-badge { position: absolute; right: 0; bottom: 0; width: 32px; height: 32px; border-radius: 16px; background: var(--wa); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--bg) }
.wa-text { flex: 1; display: grid; gap: 3px }
.wa-text b { font-size: 17px; font-weight: 700 }
.wa-text span { font-size: 14px; color: var(--soft-ink); line-height: 1.4 }
.wa-go { flex: none; width: 40px; height: 40px; border-radius: 20px; background: var(--wa); color: #06351a; display: grid; place-items: center; font-weight: 700; font-size: 18px; transition: transform .25s var(--ease) }
.wa-cta:hover .wa-go { transform: translateX(3px) }
@keyframes ping-wa { 0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0) } 50% { box-shadow: 0 0 0 8px rgba(37,211,102,.14) } }

/* Sections */
.sec { padding: 110px 0 0 }
.sec.center { text-align: center; display: flex; flex-direction: column; align-items: center }
.big { font: 500 clamp(36px, 5.6vw, 64px)/1.04 var(--display); letter-spacing: -.01em; margin: 12px 0 0; text-wrap: balance }
.big em { color: var(--red); font-style: italic }
.sub-lead { font-size: 17px; color: var(--sub); max-width: 40em; margin: 18px 0 0; line-height: 1.55 }
.ghost-link { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--red); margin-left: 6px }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease) }
.reveal.in { opacity: 1; transform: none }
.card { border-radius: 28px; background: var(--card); border: 1px solid var(--line); transition: border-color .25s, box-shadow .25s, transform .35s var(--ease) }
.card:hover { border-color: rgba(217,38,69,.6); box-shadow: 0 0 40px rgba(217,38,69,.18) }

/* Problème */
.problem-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; margin-top: 34px; align-items: start }
.quote { margin: 0; padding: 28px; border-radius: 28px; background: #161412; border: 1px solid var(--line) }
.quote blockquote { margin: 0; font: italic 400 23px/1.45 var(--display) }
.quote figcaption { margin-top: 18px; font-size: 14px; color: var(--red); font-weight: 700 }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.col { display: grid; gap: 10px; align-content: start }
.col-t { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px }
.col.good .col-t { color: var(--red-text) }
.w { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08) }
.w b { font: 400 26px/1.3 var(--ar); direction: rtl }
.w span { font-size: 15px }
.col.bad .w { color: #6f675e; text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px }
.col.good .w { border-color: rgba(217,38,69,.35); background: var(--red-soft) }
@media (max-width: 860px) { .problem-grid { grid-template-columns: 1fr } }

/* Al-Fātiḥa */
.fatiha-wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 24px; margin-top: 34px; align-items: start }
.mushaf { background: #FBF8F1; color: #1A1712; border-radius: 28px; padding: 30px 34px; box-shadow: 0 30px 80px rgba(0,0,0,.45) }
.sur { font: 600 14px var(--ui); color: #8a8178; text-align: center; margin-bottom: 10px }
.ayat { text-align: center; font: 400 clamp(24px, 3vw, 34px)/2.25 var(--ar) }
.wd { font: inherit; color: inherit; background: none; border: 0; padding: 0 5px; border-radius: 10px; cursor: pointer; transition: background .15s, color .15s }
.wd:hover { background: rgba(217,38,69,.12) }
.wd.on { background: var(--red); color: #fff }
.ayat.lit .wd.k:not(.on) { background: rgba(236,178,60,.32) }
.vn { font-size: .7em; color: #B08A3E; margin: 0 4px }
.known-t { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; font: 600 14px var(--ui); color: #4f4942; cursor: pointer }
.known-t input { width: 20px; height: 20px; accent-color: var(--red) }
.word-card { position: sticky; top: 24px; background: #fff; color: #141210; border-radius: 26px; padding: 24px 26px; box-shadow: 0 30px 70px rgba(217,38,69,.28); min-height: 240px }
.word-card.pop { animation: pop .45s var(--ease) both }
.word-card .tag { display: inline-flex; padding: 5px 12px; border-radius: 14px; background: #F2EEE6; font-size: 13px; font-weight: 600; color: #4f4942 }
.word-card .tag.k { background: #FBEBC2; color: #6b4b00 }
.word-card .ar { font: 400 54px/1.3 var(--ar); margin-top: 10px; text-align: right }
.word-card .mean { font: 500 26px/1.2 var(--display); margin-top: 4px }
.word-card dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 18px 0 0; font-size: 14.5px }
.word-card dt { color: #8a8178 }
.word-card dd { margin: 0; font-weight: 600 }
.word-card .ar-root { font-family: var(--ar); font-size: 20px; font-weight: 400; direction: rtl; text-align: left }
@keyframes pop { 0% { transform: scale(.96); opacity: .4 } 100% { transform: none; opacity: 1 } }
@media (max-width: 860px) { .fatiha-wrap { grid-template-columns: 1fr } .word-card { position: static } .mushaf { padding: 22px 16px } }

/* Racines */
.roots { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; justify-content: center }
.root { min-height: 48px; padding: 0 20px; border-radius: 24px; border: 1px solid var(--line2); background: rgba(255,255,255,.04); color: #fff; font: 400 24px/1 var(--ar); cursor: pointer; transition: background .25s, border-color .25s, transform .2s }
.root:hover { transform: translateY(-2px) }
.root.on { background: var(--red); border-color: var(--red) }
.family { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; max-width: 760px }
.core { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 8px }
.core small { font-size: 12px; letter-spacing: .16em; color: var(--gold); font-weight: 700 }
.core b { font: 400 54px/1.2 var(--ar); color: var(--gold) }
.kin { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); animation: rise .6s var(--ease) both; animation-delay: calc(var(--i) * 70ms) }
.kin b { font: 400 28px/1.4 var(--ar) }
.kin span { font-size: 14px; color: var(--sub) }

/* Chemin */
.path { margin-top: 36px; padding: 28px; border-radius: 28px; background: var(--card); border: 1px solid var(--line) }
.bar { position: relative; height: 14px; border-radius: 7px; background: rgba(255,255,255,.08); overflow: hidden }
.bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; width: 0; transition: width 1.6s var(--ease) }
.bar .fill2 { background: rgba(217,38,69,.35) }
.bar .fill { background: var(--red); z-index: 1 }
.path.in .fill, .path.in .fill2 { width: var(--to) }
.steps2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px }
.steps2 div { display: grid; gap: 2px }
.steps2 b { font: 500 46px/1 var(--display); color: var(--red) }
.steps2 span { font-weight: 600; font-size: 17px; margin-top: 6px }
.steps2 small { color: var(--sub); font-size: 14px }

/* Raisons */
.reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 34px }
.reasons .card { padding: 26px; display: flex; flex-direction: column; gap: 10px; overflow: hidden }
.num { font: 400 64px/1 var(--display); color: var(--red) }
.reasons h3 { font: 500 26px/1.2 var(--display); margin: 0 }
.reasons p { margin: 0; color: var(--sub) }
.shot { width: 62%; align-self: center; margin: 14px 0 -60px; border-radius: 26px; border: 8px solid #050505; box-shadow: 0 30px 60px rgba(0,0,0,.5); transition: transform .4s var(--ease) }
.card:hover .shot { transform: translateY(-8px) }
.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px }
.pairs span { min-height: 54px; display: grid; place-items: center; border-radius: 14px; background: #fff; color: #141210; font: 400 24px var(--ar) }
.pairs span.lt { font: 600 14px var(--ui) }
.pairs span:nth-child(1) { background: var(--red); color: #fff }
.pairs span:nth-child(2) { background: #E2F1E8; border: 1px solid #7BC49B }
.verse { margin-top: 14px; padding: 24px; border-radius: 22px; background: linear-gradient(160deg, #1d2a4a, #0d1120); display: grid; gap: 10px; text-align: center }
.verse b { font: 400 30px/1.6 var(--ar) }
.verse span { font: italic 400 17px/1.4 var(--display); color: var(--soft-ink) }
.verse i { font-style: normal; font-size: 10.5px; letter-spacing: .2em; font-weight: 500; color: rgba(255,255,255,.8) }
@media (max-width: 860px) { .reasons { grid-template-columns: 1fr } }

/* Vidéos */
.videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px }
.vid { position: relative; display: block; border-radius: 22px; overflow: hidden; background: var(--card); border: 1px solid var(--line); text-decoration: none; transition: transform .35s var(--ease), border-color .25s }
.vid:hover { transform: translateY(-5px); border-color: rgba(217,38,69,.6) }
.vid img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover }
.vid .play { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 27px; background: var(--red); display: grid; place-items: center; font-size: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.4) }
.vid .free { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 12px; background: rgba(0,0,0,.6); font-size: 12px; font-weight: 700 }
.vid .vt { display: block; padding: 14px 16px 16px; font-weight: 600; font-size: 15.5px; line-height: 1.35 }
@media (max-width: 860px) { .videos { grid-template-columns: 1fr 1fr } }
@media (max-width: 520px) { .videos { grid-template-columns: 1fr } }

/* Questions */
.faq { display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: start }
.qa details { border-top: 1px solid rgba(255,255,255,.12); padding: 20px 0 }
.qa details:last-child { border-bottom: 1px solid rgba(255,255,255,.12) }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; font-size: 18px; font-weight: 600 }
.qa summary::-webkit-details-marker { display: none }
.qa summary::after { content: "+"; color: var(--red); font-weight: 400; font-size: 22px; line-height: 1; transition: transform .3s var(--ease) }
.qa details[open] summary::after { transform: rotate(45deg) }
.qa p { color: var(--sub); margin: 12px 0 0; max-width: 40em }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; gap: 20px } }

/* Rejoindre */
.join { position: relative; overflow: hidden; margin-top: 110px; padding: 80px 24px; border-radius: 36px; background: var(--red); text-align: center; display: flex; flex-direction: column; align-items: center }
.join-bubbles span { position: absolute; font: 400 34px var(--ar); color: rgba(255,255,255,.18); animation: float 8s ease-in-out infinite }
.join-bubbles span:nth-child(1) { left: 6%; top: 18% } .join-bubbles span:nth-child(2) { right: 8%; top: 22%; animation-delay: 1s }
.join-bubbles span:nth-child(3) { left: 12%; bottom: 14%; animation-delay: 2s } .join-bubbles span:nth-child(4) { right: 14%; bottom: 18%; animation-delay: 3s }
.join-logo { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 0 0 4px rgba(255,255,255,.25), 0 20px 40px rgba(0,0,0,.3); animation: pop .7s var(--ease) both }
.join h2 { position: relative; font: 500 clamp(34px, 5vw, 56px)/1.05 var(--display); color: #fff; margin: 22px 0 0 }
.join p { position: relative; color: rgba(255,255,255,.88); max-width: 32em; margin: 14px 0 0; font-size: 17px }
.join-btn { position: relative; margin-top: 26px; display: inline-flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 28px; border-radius: 29px; background: #141210; color: #fff; text-decoration: none; font-weight: 700; font-size: 17px; transition: transform .2s, box-shadow .2s; animation: breath-dark 2.4s ease-in-out infinite }
.join-btn svg { color: var(--wa) }
.join-btn:hover { transform: scale(1.04) }
.join small { position: relative; margin-top: 14px; color: rgba(255,255,255,.85); font-size: 14px }
@keyframes breath-dark { 0%, 100% { box-shadow: 0 0 0 0 rgba(20,18,16,.5) } 50% { box-shadow: 0 0 0 12px rgba(20,18,16,0) } }

/* Barre du bas */
.dock { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 32px; background: #000; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 50px rgba(0,0,0,.5); transition: transform .35s var(--ease), opacity .35s }
.dock.tuck { transform: translate(-50%, 140%); opacity: 0 }
.dock a { position: relative; min-height: 44px; padding: 0 16px; border-radius: 22px; display: inline-flex; align-items: center; color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background .25s }
.dock a:hover { background: rgba(255,255,255,.08) }
.dock a.on { background: rgba(255,255,255,.12) }
.dock a.on::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2px; border-radius: 3px; background: var(--red) }
.dock a.cta { background: var(--red); padding: 0 22px; font-size: 16px }
@media (max-width: 560px) { .dock { gap: 2px; padding: 5px } .dock a { padding: 0 8px; font-size: 12.5px; min-height: 40px } .dock a.cta { padding: 0 12px; font-size: 13px } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none } .bar span { width: var(--to) } }

/* Arabe : de l'air autour des lettres et de leurs voyelles (retour du propriétaire) */
.bubbles { overflow: hidden }
.bub b { line-height: 1.9; padding-top: 4px }
.root { min-height: 54px; padding: 4px 24px 2px; line-height: 1.9 }
.family { gap: 14px }
.kin { padding: 14px 24px 16px; min-width: 120px }
.kin b { line-height: 1.9 }
.core b { line-height: 1.6 }
.w { padding: 10px 18px }
.w b { line-height: 1.9 }
.pairs span { min-height: 60px; padding: 6px 10px; line-height: 1.9 }
.verse b { line-height: 1.9 }
.word-card .ar { line-height: 1.6 }
.ayat .wd { padding: 2px 6px }
@media (max-width: 560px) {
  .hero { min-height: auto; padding: 28px 0 150px }
  .bub { top: auto; bottom: 18px; opacity: .9 }
  .bub:nth-child(1) { left: 2% } .bub:nth-child(2) { left: auto; right: 2% }
  .bub:nth-child(3) { left: 36% ; bottom: 0 }
  .bub:nth-child(n+4) { display: none }
}
@media (max-width: 420px) { .root { padding: 4px 16px 2px; font-size: 21px } .roots { gap: 8px } .kin { min-width: 0; flex: 1 1 40% } }