/* ============================================================
   Pages de lecture des rubriques (12/11/2026), charte de l'accueil (Amaterasu).
   Chargé après ciel-page.css, sur <body class="accueil-ciel page-lecture">.
   ============================================================ */

/* L'en-tête est visible d'emblée (pas d'ouverture vidéo sur ces pages). */
.page-lecture .header { opacity: 1 !important; pointer-events: auto !important; background: rgba(255, 255, 255, .86); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--filet);
  --text: var(--violet); --muted: #3b4a7a; --line-strong: var(--filet-fort); --surface-2: rgba(27, 41, 120, .06); }
.page-lecture .rub-page-sombre .header { background: rgba(255, 255, 255, .86); }

/* Barre de progression de lecture. */
.lec-progression { position: fixed; inset: 0 0 auto; height: 2px; z-index: 120; pointer-events: none; }
.lec-progression i { display: block; height: 100%; background: linear-gradient(90deg, #2a398e, #84cdee); transform-origin: 0 50%; transform: scaleX(var(--lu, 0)); }

/* Petites capitales espacées. */
.lec-fil, .lec-rang, .lec-meta span, .lec-sommaire summary, .lec-h2-num, .lec-hadith figcaption, .lec-citation figcaption,
.lec-verset figcaption, .lec-invocation figcaption, .lec-suivante-label, .rub-duree, .lec-sources h2 {
  font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase;
}

/* ---------- Tête de l'article : bande de lumière ---------- */
.lec-tete { position: relative; overflow: hidden; isolation: isolate; background: var(--lumiere); padding: calc(var(--header-h) + clamp(48px, 9vh, 110px)) 0 clamp(56px, 10vh, 120px); }
.lec-tete-in { position: relative; z-index: 1; }
.lec-fil { display: flex; flex-wrap: wrap; gap: 10px; color: var(--ardoise); }
.lec-fil a { color: var(--violet); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ciel-ease); }
.lec-fil a:hover { background-size: 100% 1px; }
.lec-rang { margin: clamp(36px, 6vh, 64px) 0 14px; color: #1d6c86; }
.lec-rang span { color: var(--ardoise); }
.lec-titre { margin: 0; max-width: 13ch; font-family: var(--font-display); font-weight: 200; font-size: clamp(3rem, 7.4vw, 6.6rem); line-height: .98; letter-spacing: -.045em; color: var(--violet); text-wrap: balance; }
.lec-chapeau { margin: clamp(22px, 3.4vh, 34px) 0 0; max-width: 46ch; font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 300; line-height: 1.5; color: var(--encre); }
.lec-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; }
.lec-meta span { padding: 8px 14px; border: 1px solid var(--filet-fort); border-radius: 20px; color: var(--violet); }
.lec-fantome { position: absolute; z-index: 0; right: -2vw; bottom: -.18em; margin: 0; white-space: nowrap; pointer-events: none;
  font: 200 clamp(120px, 19vw, 300px)/1 var(--font-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(27, 41, 120, .09); }

/* ---------- Corps : sommaire + texte ---------- */
.lec-corps { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); padding-top: clamp(56px, 9vh, 110px); padding-bottom: clamp(72px, 12vh, 140px); }
.lec-sommaire { position: relative; }
.lec-sommaire details { position: sticky; top: calc(var(--header-h) + 32px); }
.lec-sommaire summary { list-style: none; cursor: default; color: #1d6c86; margin-bottom: 18px; }
.lec-sommaire summary::-webkit-details-marker { display: none; }
.lec-sommaire ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filet); }
.lec-sommaire li { border-bottom: 1px solid var(--filet); }
.lec-sommaire a { position: relative; display: block; padding: 12px 0 12px 16px; font-size: 14.5px; line-height: 1.35; color: var(--ardoise); text-decoration: none; transition: color .4s var(--ciel-ease); }
.lec-sommaire a::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 1px; background: var(--filet-fort); transition: width .5s var(--ciel-ease), background .4s; }
.lec-sommaire a:hover, .lec-sommaire a[aria-current="true"] { color: var(--violet); }
.lec-sommaire a[aria-current="true"]::before { width: 12px; background: var(--violet); }

.lec-texte { max-width: 68ch; font-size: clamp(1.06rem, 1.15vw, 1.15rem); line-height: 1.8; color: var(--encre); }
.lec-texte p { margin: 0 0 1.15em; }
.lec-texte a { color: var(--violet); text-decoration: underline; text-decoration-color: var(--filet-fort); text-underline-offset: 4px; transition: text-decoration-color .3s; }
.lec-texte a:hover { text-decoration-color: var(--violet); }
.lec-texte em { font-style: italic; }
.lec-texte strong { font-weight: 600; color: var(--violet); }
.lec-section { scroll-margin-top: calc(var(--header-h) + 24px); }
.lec-section + .lec-section { margin-top: clamp(56px, 9vh, 96px); }
/* Lettrine sur le premier paragraphe. */
.lec-section:first-child > p:first-of-type::first-letter { float: left; margin: .06em .12em 0 0; font: 200 4.2em/.82 var(--font-display); color: var(--violet); }
.lec-texte h2 { margin: 0 0 .7em; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.08; letter-spacing: -.035em; color: var(--violet); text-wrap: balance; }
.lec-h2-num { display: block; margin-bottom: 14px; color: #1d6c86; letter-spacing: .28em; }
.lec-texte h3 { margin: 1.9em 0 .5em; font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; letter-spacing: -.015em; color: var(--violet); }

/* Verset : encadré de lumière, arabe en grand. */
.lec-verset { margin: 2.2em 0; padding: clamp(28px, 4vw, 44px) clamp(22px, 4vw, 48px); border-radius: 20px; background: var(--lumiere-inverse); text-align: center; }
.lec-ar { margin: 0 0 .7em !important; font-family: var(--font-ar, "Amiri"), "Amiri", serif; font-size: clamp(1.6rem, 2.6vw, 2.15rem); line-height: 2; color: var(--violet); }
.lec-verset blockquote { margin: 0; }
.lec-verset blockquote p { margin: 0 !important; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.12rem, 1.5vw, 1.32rem); line-height: 1.6; letter-spacing: -.01em; color: var(--encre); }
.lec-verset figcaption { margin-top: 18px; color: #1d6c86; }

/* Hadith et citation : filet fin, pas de carte. */
.lec-hadith, .lec-citation { margin: 2em 0; padding: 4px 0 4px clamp(18px, 2.4vw, 28px); border-left: 1px solid var(--violet); }
.lec-hadith blockquote, .lec-citation blockquote { margin: 0; }
.lec-hadith blockquote p { margin: 0 0 14px !important; font-size: 1.12em; line-height: 1.7; color: var(--encre); }
.lec-citation blockquote p { margin: 0 0 14px !important; font-family: var(--font-display); font-weight: 300; font-size: 1.25em; line-height: 1.55; letter-spacing: -.012em; color: var(--violet); }
.lec-hadith figcaption, .lec-citation figcaption { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--ardoise); letter-spacing: .2em; }
.lec-hadith figcaption span:first-child, .lec-citation figcaption span:first-child { color: #1d6c86; }

/* Listes à filets. */
.lec-liste { margin: 0 0 1.4em; padding: 0; list-style: none; border-top: 1px solid var(--filet); }
.lec-liste li { position: relative; padding: 12px 0 12px 26px; border-bottom: 1px solid var(--filet); line-height: 1.6; }
.lec-liste li::before { content: ""; position: absolute; left: 4px; top: 1.32em; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--violet); }

.lec-note { margin: 1.8em 0; padding: 20px 24px; border: 1px solid var(--filet); border-radius: 20px; background: rgba(132, 205, 238, .14); font-size: .95em; }
.lec-note p { margin: 0 !important; }

.lec-invocation { margin: 1.4em 0; padding: 22px 26px; border: 1px solid var(--filet); border-radius: 20px; }
.lec-inv-fr { margin: 0 0 10px !important; font-family: var(--font-display); font-weight: 300; font-size: 1.15em; line-height: 1.55; color: var(--violet); }
.lec-inv-phon { margin: 0 0 14px !important; font-style: italic; color: #1d6c86; }
.lec-invocation figcaption { color: var(--ardoise); letter-spacing: .2em; }

.lec-sources { margin-top: clamp(64px, 10vh, 110px); padding-top: 28px; border-top: 1px solid var(--filet-fort); font-size: .9rem; line-height: 1.6; color: var(--ardoise); }
.lec-sources h2 { margin: 0 0 16px; font-size: 11px; color: #1d6c86; }
.lec-sources ul { margin: 0 0 16px; padding: 0 0 0 18px; }

/* ---------- Suite de la lecture : bande sombre ---------- */
.lec-suite { position: relative; overflow: hidden; isolation: isolate; padding: clamp(72px, 12vh, 140px) 0; background: linear-gradient(110deg, #08324b 0%, #0c4766 45%, #1a6f93 100%); color: #fff; }
.lec-suite::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 50% 70% at 90% 0%, rgba(170, 238, 250, .4), transparent 70%); }
.lec-suite .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: end; }
.lec-suivante { position: relative; display: block; padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, .3); color: #fff; text-decoration: none; }
.lec-suivante-label { color: var(--teal); }
.lec-suivante strong { display: block; margin: 18px 0 14px; font-family: var(--font-display); font-weight: 200; font-size: clamp(2.6rem, 5.6vw, 5rem); line-height: 1; letter-spacing: -.045em; transition: letter-spacing .6s var(--ciel-ease); }
.lec-suivante-chapeau { display: block; max-width: 44ch; color: rgba(255, 255, 255, .78); line-height: 1.55; }
.lec-suivante .m-fleche { position: absolute; right: 0; bottom: 30px; width: 28px; height: 28px; color: var(--teal); }
.lec-suivante:hover strong { letter-spacing: -.03em; }
.lec-suivante:hover .m-fleche { transform: translateX(6px); }
.lec-rubrique { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .22); }
.lec-rubrique li { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.lec-rubrique a { display: flex; gap: 16px; padding: 12px 0; color: rgba(255, 255, 255, .8); text-decoration: none; transition: color .3s, padding .5s var(--ciel-ease); }
.lec-rubrique a span { width: 2.2em; color: var(--teal); font-size: 12px; letter-spacing: .2em; padding-top: 3px; }
.lec-rubrique a:hover { color: #fff; padding-left: 8px; }
.lec-rubrique li[aria-current="page"] a { color: #fff; }

/* ---------- Page de rubrique ---------- */
.rub-tete { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--header-h) + clamp(64px, 12vh, 150px)) 0 clamp(72px, 12vh, 150px); background: #071735; color: #fff; }
.rub-tete .lec-fil, .rub-tete .lec-fil span { color: rgba(255, 255, 255, .7); }
.rub-tete .lec-fil a { color: var(--teal); }
.rub-h1 { margin: clamp(36px, 6vh, 70px) 0 0; max-width: 11ch; font-family: var(--font-display); font-weight: 200; font-size: clamp(3.4rem, 9vw, 8rem); line-height: .95; letter-spacing: -.05em; color: #fff; }
.rub-chapeau-tete { margin: 28px 0 0; max-width: 50ch; font-size: clamp(1.1rem, 1.5vw, 1.35rem); font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.rub-tete .lec-meta span { color: #fff; border-color: rgba(255, 255, 255, .35); }
.rub-liste-zone { background: var(--lumiere); padding: clamp(56px, 10vh, 120px) 0 clamp(72px, 12vh, 140px); }
.rub-liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filet-fort); }
.rub-liste li { border-bottom: 1px solid var(--filet); }
.rub-ligne { position: relative; display: grid; grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.1fr) auto 26px; align-items: center; gap: 0 32px; padding: clamp(26px, 3.8vh, 42px) 0; color: var(--encre); text-decoration: none; isolation: isolate; transition: padding .5s var(--ciel-ease); }
.rub-ligne::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .6); opacity: 0; transition: opacity .5s var(--ciel-ease); }
.rub-num { font: 200 clamp(2.2rem, 3.4vw, 3.2rem)/1 var(--font-display); letter-spacing: -.04em; color: #2b5f8f; }
.rub-titre { font: 300 clamp(1.6rem, 2.6vw, 2.4rem)/1.08 var(--font-display); letter-spacing: -.035em; color: var(--violet); }
.rub-chapeau { color: var(--ardoise); line-height: 1.55; }
.rub-duree { color: #1d6c86; white-space: nowrap; }
.rub-ligne .m-fleche { color: var(--violet); }
.rub-ligne:hover { padding-left: 20px; padding-right: 20px; }
.rub-ligne:hover::before { opacity: 1; }

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 960px) {
  .lec-corps { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; }
  .lec-sommaire details { position: static; border: 1px solid var(--filet); border-radius: 20px; padding: 16px 20px; }
  .lec-sommaire summary { cursor: pointer; margin: 0; display: flex; justify-content: space-between; }
  .lec-sommaire summary::after { content: "+"; font-size: 16px; letter-spacing: 0; transition: transform .3s; }
  .lec-sommaire details[open] summary { margin-bottom: 14px; }
  .lec-sommaire details[open] summary::after { transform: rotate(45deg); }
  .lec-suite .wrap { grid-template-columns: 1fr; }
  .rub-ligne { grid-template-columns: 3.4rem minmax(0, 1fr) 22px; gap: 6px 16px; }
  .rub-chapeau { grid-column: 2; }
  .rub-duree { grid-column: 2; }
  .rub-ligne .m-fleche { grid-row: 1; grid-column: 3; }
}
@media (max-width: 560px) {
  .lec-titre { font-size: clamp(2.6rem, 12vw, 3.6rem); }
  .lec-verset { padding: 24px 18px; }
  .lec-hadith, .lec-citation { padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .lec-sommaire a::before, .rub-ligne, .rub-ligne::before, .lec-suivante strong { transition: none; }
}
.lec-verset .fx-mot { transition: opacity .25s linear; }

/* ---------- Lecture à voix haute (voix de Menad, ElevenLabs) ---------- */
.lec-ecouter {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border: 0; border-radius: 20px;
  background: var(--vague); color: #fff; cursor: pointer;
  font: 500 11px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase;
  transition: transform .4s var(--ciel-ease), box-shadow .4s var(--ciel-ease);
}
.lec-ecouter:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -14px rgba(27, 41, 120, .9); }
.lec-ecouter i { position: relative; width: 14px; height: 12px; background:
  linear-gradient(#fff, #fff) 0 100% / 2px 60% no-repeat, linear-gradient(#fff, #fff) 4px 100% / 2px 100% no-repeat,
  linear-gradient(#fff, #fff) 8px 100% / 2px 40% no-repeat, linear-gradient(#fff, #fff) 12px 100% / 2px 75% no-repeat; }

.lec-lecteur {
  position: fixed; z-index: 110; left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
  width: min(640px, calc(100% - 24px)); transform: translate(-50%, 140%);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px;
  padding: 10px 12px 10px 10px; border-radius: 28px; color: #fff;
  background: rgba(8, 40, 62, .9); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: transform .6s var(--ciel-ease);
}
.lec-lecteur.ouvert { transform: translate(-50%, 0); }
.lec-lecteur button { border: 0; background: none; color: inherit; cursor: pointer; }
.lec-lect-jouer { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--vague) !important; }
.lec-lect-jouer svg { width: 18px; height: 18px; fill: #fff; }
.lec-lect-milieu { min-width: 0; }
.lec-lect-titre { display: block; margin-bottom: 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 10.5px/1.2 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--teal); }
.lec-lect-barre { position: relative; height: 22px; margin: -4px 0; cursor: grab; touch-action: none; }
.lec-lect-barre.glisse { cursor: grabbing; }
.lec-lect-barre::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .22); }
.lec-lect-barre i { position: absolute; left: 0; top: 10px; height: 2px; width: calc(var(--p, 0) * 100%); border-radius: 2px; background: #fff; }
.lec-lect-barre i::after { content: ""; position: absolute; right: -7px; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(132, 205, 238, .5); transition: box-shadow .3s; }
.lec-lect-barre:hover i::after, .lec-lect-barre.glisse i::after { box-shadow: 0 0 0 6px rgba(132, 205, 238, .35); }
.lec-ecouter.charge { opacity: .7; cursor: progress; }
.lec-lect-temps { font: 400 12px/1 var(--font-body); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .78); white-space: nowrap; }
.lec-lect-vitesse { min-width: 46px; padding: 8px 10px !important; border: 1px solid rgba(255, 255, 255, .28) !important; border-radius: 20px; font: 500 12px/1 var(--font-body) !important; }
.lec-lect-fermer { width: 30px; height: 30px; font-size: 20px; line-height: 1; color: rgba(255, 255, 255, .7) !important; }
.lec-lecteur :focus-visible { outline: 1px solid #fff; outline-offset: 3px; }

/* Le passage en cours de lecture. */
[data-lu] { position: relative; transition: background-color .5s var(--ciel-ease); border-radius: 12px; }
.lec-lu { background-color: rgba(132, 205, 238, .2); }
.lec-tete-in.lec-lu { background-color: transparent; }
.lec-tete-in.lec-lu .lec-titre { text-shadow: 0 0 36px rgba(132, 205, 238, .6); }
.lec-texte .lec-lu::before { content: ""; position: absolute; left: -18px; top: .5em; bottom: .5em; width: 2px; border-radius: 2px; background: var(--violet); }
.lec-texte figure.lec-lu::before, .lec-texte ul.lec-lu::before { top: 12px; bottom: 12px; }
body:has(.lec-lecteur.ouvert) .footer { padding-bottom: 110px; }
@media (max-width: 560px) {
  .lec-lecteur { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; }
  .lec-lect-temps { display: none; }
  .lec-texte .lec-lu::before { left: -10px; }
}