/* L'article, par-dessus article-maquette.css (la feuille de la maquette de Myriam, épurée) : la page à 840 px,
   le texte à 20 px des bords, la borne dans la bande du titre, aucun chemin, les chiffres arabes, le guide sur
   le papier et la nuit pour la porte seule. La matière des encadrés (vélin) vit dans matiere.css, engendrée. */
#alaq-omra { --nuit:#29231d; --h2:#765433; }
#alaq-omra .page { max-width:840px; overflow:visible; }
#alaq-omra .hero { min-height:520px; overflow:hidden; }
#alaq-omra .hero-image { display:block; max-width:100%; box-sizing:border-box; }
#alaq-omra img.hero-image { object-position:center 55%; }
@container (max-width:700px) { #alaq-omra img.hero-image { object-position:center 55%; aspect-ratio:1.4; } }
#alaq-omra .hero-copy { padding-left:20px; padding-right:20px; }
#alaq-omra .gold-line { height:1px; background:#c9b48f; animation:none !important; }
#alaq-omra .reading { max-width:none; padding:26px 20px 0; }
#alaq-omra [id] { scroll-margin-top:84px; }
#alaq-omra a { color:var(--h2); }
#alaq-omra h2 { color:var(--h2); }
#alaq-omra .arabic { text-wrap:pretty; }
#alaq-omra .arabic-word { white-space:nowrap; }

/* le sommaire : un itinéraire, sans filet au-dessus ni en dessous, des lignes que le doigt atteint */
#alaq-omra .toc { border:0; margin:0 0 20px; padding:4px 0 6px; }
#alaq-omra .toc summary { min-height:46px; padding:10px 0; font:400 13px/1.5 'Jost',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#705238; list-style:none; display:flex; align-items:center; gap:10px; cursor:pointer; }
#alaq-omra .toc summary::-webkit-details-marker { display:none; }
#alaq-omra .toc summary::after { content:''; width:8px; height:8px; border-right:1.5px solid #8d714d; border-bottom:1.5px solid #8d714d; transform:rotate(45deg); margin-bottom:4px; transition:transform .25s; }
#alaq-omra .toc[open] summary::after { transform:rotate(225deg); margin-bottom:-2px; }
#alaq-omra .toc ol.itin { list-style:none; columns:1; margin:0; padding:6px 0 4px 4px; }
#alaq-omra .itin li { position:relative; padding:0 0 0 48px; font-size:17px; line-height:1.45; break-inside:avoid; }
#alaq-omra .itin li::before { content:''; position:absolute; left:13px; top:0; bottom:0; border-left:1.5px dotted #d4c3a6; }
#alaq-omra .itin li:first-child::before { top:50%; }
#alaq-omra .itin li:last-child::before { bottom:50%; }
#alaq-omra .itin .mini { position:absolute; left:0; top:50%; transform:translateY(-50%); width:27px; height:33px; border-radius:14px 14px 3px 3px; background:linear-gradient(145deg,#f1d59e,#d5a563); border:1px solid #b48a53; box-shadow:inset 0 0 0 3px #eed1a0; display:grid; place-items:center; font:400 17px/1 'Noto Naskh Arabic',serif; color:#211c1a; }
#alaq-omra .itin .mini.papier { background:linear-gradient(145deg,#f7f1e7,#e9dcc6); border-color:#c9b48f; box-shadow:inset 0 0 0 3px #f3ebdd; color:#765433; font:600 14px/1 'Jost',sans-serif; }
#alaq-omra .itin .mini.porte { background:linear-gradient(178deg,#4a3416,#2e1f0c 60%,#1e1408); border-color:#d68f35; box-shadow:inset 0 0 0 2px rgba(20,12,4,.9), inset 0 0 0 3px rgba(220,144,46,.5); }
#alaq-omra .itin .mini.porte::before { content:''; width:9px; height:14px; border-radius:5px 5px 1px 1px; background:radial-gradient(74% 62% at 50% 80%,#fff3d2 0%,#f0b75a 50%,#7a4d12 100%); }
#alaq-omra .itin a { display:block; padding:11px 0; color:var(--ink); text-decoration:none; }
#alaq-omra .itin a:hover { color:var(--h2); text-decoration:underline; text-underline-offset:4px; }
#alaq-omra .reading-controls { display:flex; justify-content:flex-end; gap:10px; margin:0 0 22px; }
#alaq-omra .reading-controls .tool { font-size:12px; letter-spacing:.06em; }

/* les étapes : la borne dans la bande du titre, aucun chemin, un ornement entre deux étapes */
#alaq-omra .chapters { position:relative; padding-left:0; }
#alaq-omra .chapters::before, #alaq-omra .chapter::before { content:none; }
#alaq-omra .chapter { padding:0 0 22px; }
#alaq-omra .chapter > summary { padding:10px 0 18px; border-bottom:1px solid rgba(214,143,53,.38); position:relative; cursor:pointer; }
#alaq-omra .chapter > summary::after { content:''; position:absolute; left:0; right:0; bottom:-4px; border-bottom:1px solid rgba(214,143,53,.18); }
#alaq-omra .chapter > summary h2 { display:flex; align-items:center; gap:14px; font-size:30px; }
#alaq-omra .stop { position:relative; left:auto; top:auto; flex:0 0 auto; width:30px; height:38px; border-radius:15px 15px 3px 3px; font:400 17px/1 'Noto Naskh Arabic',serif; color:#211c1a; background:linear-gradient(145deg,#f1d59e,#d5a563); border:1px solid #b48a53; box-shadow:inset 0 0 0 3px #eed1a0; display:grid; place-items:center; }
#alaq-omra .chapter.is-active .stop { background:linear-gradient(145deg,#f7deb0,#deb276); box-shadow:inset 0 0 0 3px #f0d4a5, 0 0 0 4px #f1e8d9; }
#alaq-omra .sep-orn { text-align:center; color:#d4bf9a; font:400 27px/1 'Noto Naskh Arabic',serif; margin:-4px 0 20px; }
#alaq-omra .chapter-body { padding:26px 0 4px; }

/* dans un encadré : titre léger en majuscules, la nature en italique, l'arabe (rosace de fin de verset en attribut), la traduction */
#alaq-omra .dua { border:0; border-radius:14px; padding:26px 24px 22px; margin:26px 0 30px; }
#alaq-omra .dua .dua-title { margin:0 0 6px; font-size:14px; }
#alaq-omra .dua-nature { margin:0 0 18px; font:italic 400 14.5px/1.5 'Jost',sans-serif; color:#765433; }
#alaq-omra .arabic[data-rosace]::after { content:'\00a0' attr(data-rosace); font-size:.78em; color:#b48a53; margin-inline-start:.2em; }
#alaq-omra .dua .source-line { margin:14px 0 0; font-variant-caps:normal; letter-spacing:normal; font-size:14px; }
#alaq-omra .source-line { font-variant-caps:all-small-caps; letter-spacing:.05em; font-size:14.5px; }
#alaq-omra .history-note { background:#f7f1e7; border:0; border-left:2px solid #d9c9ad; border-radius:0 14px 14px 0; }
#alaq-omra .reflection { font-style:italic; border-top:0; border-left:2px solid #d9c9ad; padding:2px 0 2px 16px; margin-top:16px; }
#alaq-omra .reflection strong { font-style:normal; }
#alaq-omra .crossing b span[lang="ar"] { font:400 26px/1.1 'Noto Naskh Arabic',serif; display:block; }
#alaq-omra .crossing b small { display:block; font:400 13px/1.4 'Jost',sans-serif; color:#765433; letter-spacing:.04em; }
#alaq-omra .article-image { margin:26px 0; }
#alaq-omra .article-image img { width:100%; height:auto; border-radius:14px; display:block; }
#alaq-omra .article-image figcaption { margin-top:8px; color:#69594c; font-size:14px; }
#alaq-omra .image-credit { color:#a4937f; }

/* la fin : le guide mémo et les sources sur le papier de l'article, la nuit pour la porte seule */
#alaq-omra .download-section { margin:10px 0 0; padding:26px 0 30px; background:transparent; color:var(--ink); }
#alaq-omra .download-section h2 { margin-bottom:18px; }
#alaq-omra .sheet { background:#f7f1e7; border:1px solid #e7dccb; border-left-width:1px; border-radius:14px; padding:24px 22px; }
#alaq-omra .sheet .button { border-radius:24px; }
#alaq-omra .download-section .sources { margin:22px 0 0; border:0; padding:0; color:#69594c; font-size:14px; }
#alaq-omra .download-section .sources summary { list-style:none; display:flex; align-items:center; gap:10px; min-height:44px; padding:6px 0; color:#705238; font:400 13px/1.5 'Jost',sans-serif; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; }
#alaq-omra .download-section .sources summary::-webkit-details-marker { display:none; }
#alaq-omra .download-section .sources summary::before { content:''; width:7px; height:7px; border-right:1.5px solid #8d714d; border-bottom:1.5px solid #8d714d; transform:rotate(-45deg); transition:transform .25s; }
#alaq-omra .download-section .sources[open] summary::before { transform:rotate(45deg); }
#alaq-omra .next { display:block; text-align:center; padding:48px 20px 60px; margin:20px -20px 0; background:var(--nuit); color:#ecddc7; box-shadow:0 0 0 100vmax var(--nuit); clip-path:inset(0 -100vmax); }
#alaq-omra .next::before { display:none; }
#alaq-omra .next h2 { font-size:30px; color:#f1e7d8; margin:0 auto 14px; max-width:36ch; text-wrap:balance; }   /* 36ch : « Tu ne sais pas encore lire l’arabe, » tient sur sa ligne */
#alaq-omra .next p { max-width:52ch; margin:0 auto 30px; text-wrap:balance; }
#alaq-omra .next .ligne { display:block; text-wrap:balance; }

/* la porte : le portail de fin de sourate de l'app, agrandi ×1,5 ; puis la lumière envahit l'écran */
#portail { display:inline-block; margin:0 auto 18px; cursor:pointer; -webkit-user-select:none; user-select:none; }
#portail:focus-visible { outline:2px solid #e9ac52; outline-offset:8px; border-radius:80px 80px 12px 12px; }
#portail .pt-cadre { position:relative; width:132px; margin:0 auto; padding:12px 10px 10px; border-radius:90px 90px 19px 19px; background:linear-gradient(178deg,#4a3416 0%,#2e1f0c 58%,#1e1408 100%); box-shadow:inset 0 0 0 3.6px #d68f35, inset 0 0 0 9px rgba(20,12,4,.9), inset 0 0 0 11px rgba(220,144,46,.45); }
#portail .pt-jour { position:relative; width:111px; height:149px; margin:0 auto; overflow:hidden; border-radius:55px 55px 7px 7px; background:#0e0904; perspective:600px; }
#portail .pt-clarte { position:absolute; inset:0; opacity:0; transition:opacity 1s .3s; background:radial-gradient(74% 62% at 50% 80%,#fff3d2 0%,#f0b75a 36%,rgba(220,144,46,0) 80%); }
#portail .pt-v { position:absolute; top:0; bottom:0; width:50%; background-color:#c07e12; background-image:url('/medias/icone-porte-v1.png'); background-size:111px auto; background-repeat:no-repeat; transition:transform .9s cubic-bezier(.35,.02,.2,1); }
#portail .pt-v.g { left:0; transform-origin:left center; background-position:left top; }
#portail .pt-v.d { right:0; transform-origin:right center; background-position:right top; }
#portail.ouvert .pt-v.g { transform:rotateY(-102deg); }
#portail.ouvert .pt-v.d { transform:rotateY(102deg); }
#portail.ouvert .pt-clarte { opacity:1; }
#portail .pt-seuil { width:107px; height:7px; margin:0 auto; border-radius:0 0 6px 6px; background:linear-gradient(180deg,#8a5a16,#3a2610); }
#alaq-omra .porte-ouvrir { display:block; margin:0 auto; background:transparent; border:0; border-bottom:1px solid #a4773d; color:#e9ac52; min-height:44px; padding:7px 0; font:400 16px/1.5 'Jost',sans-serif; cursor:pointer; }
#alaq-omra .porte-ouvrir:focus-visible { outline:2px solid #e9ac52; outline-offset:4px; }
#entreeHalte { position:fixed; inset:0; z-index:80; display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 28px; background:radial-gradient(90% 70% at 50% 62%,#fff3d2 0%,#f4d89c 30%,#edbe72 62%,#c98f2e 100%); }
#entreeHalte.on { display:flex; animation:enthalte 1.15s cubic-bezier(.4,0,.2,1) forwards; }
#entreeHalte.on > * { animation:ehtexte .5s .85s both; }
@keyframes enthalte { from { clip-path:circle(6% at 50% 76%); } to { clip-path:circle(140% at 50% 50%); } }
@keyframes ehtexte { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
#entreeHalte .eh-t { font:400 30px/1.25 'Marcellus',serif; color:#2e2314; max-width:22ch; }
#entreeHalte .eh-s { font:600 12px/1.5 'Jost',sans-serif; letter-spacing:.2em; color:#6e5a33; margin-top:10px; text-transform:uppercase; }
#entreeHalte .eh-btn { display:inline-flex; align-items:center; justify-content:center; margin-top:26px; min-height:48px; padding:12px 26px; border-radius:26px; background:#2e2314; color:#fff3d2; text-decoration:none; font:500 15px/1.4 'Jost',sans-serif; letter-spacing:.06em; }
#entreeHalte .eh-btn:focus-visible, #entreeHalte .eh-x:focus-visible { outline:2px solid #6e5a33; outline-offset:4px; }
#entreeHalte .eh-x { position:absolute; top:calc(16px + env(safe-area-inset-top,0px)); right:16px; background:rgba(46,35,20,.14); border:none; width:40px; height:40px; border-radius:50%; color:#2e2314; font-size:17px; cursor:pointer; }

@container (max-width:700px) {
  #alaq-omra .reading { padding:22px 20px 0; }
  #alaq-omra .hero-copy { padding:30px 20px 34px; }
  #alaq-omra .chapter > summary h2 { font-size:27px; gap:12px; }
  #alaq-omra .stop { width:28px; height:36px; font-size:16px; }
  #alaq-omra .dua { padding:22px 17px 18px; border-radius:12px; }
  #alaq-omra .itin li { font-size:16px; padding-left:44px; }
  #alaq-omra .next { margin-left:-20px; margin-right:-20px; padding-bottom:72px; }
  #alaq-omra .next h2 { font-size:27px; }
}
@media print {
  #entreeHalte, #portail, .porte-ouvrir, #alaq-omra .memo-link, #alaq-omra .reading-controls { display:none !important; }
  #alaq-omra .next { background:transparent !important; color:#362b24 !important; box-shadow:none; clip-path:none; }
  #alaq-omra .next h2, #alaq-omra .next p { color:#362b24 !important; }
  #alaq-omra .dua { break-inside:auto; }
}
@media (prefers-reduced-motion:reduce) {
  #entreeHalte.on, #entreeHalte.on > * { animation:none; }
  #portail .pt-v, #portail .pt-clarte { transition:none; }
}