/* ==========================================================================
   هندسة سور القرآن — Rachid Saghir
   « Atelier lumineux » : fond clair et chaleureux, l'orange de ses miniatures,
   une typographie fine d'architecte (Jost, héritière de Futura et du Bauhaus ;
   Noto Kufi Arabic, le coufique géométrique), des filets fins, l'arche pour signature.
   Règle d'or : la géométrie bouge, le texte coranique reste immobile.
   ========================================================================== */

:root {
  /* Lumière */
  --fond: #FAF8F5;
  --surface: #FFFDFA;
  --sable: #F2ECE4;
  --sable-fonce: #E7DED2;
  --encre: #17181C;
  --encre-2: #4B4E55;
  --encre-3: #6B6E75;
  --ligne: #E8E2D9;
  --ligne-forte: #D5CDC1;

  /* L'orange de ses miniatures (#D85C17) et ses déclinaisons lisibles */
  --orange: #D85C17;
  --orange-fonce: #C4520F;
  --orange-sombre: #A9450C;
  --orange-texte: #B44A10;
  --orange-doux: rgba(216, 92, 23, .1);
  --sur-orange: #FFF8F2;

  /* Nuit (section des sourates) */
  --nuit: #16181D;
  --nuit-2: #1F2228;
  --nuit-3: #272B32;
  --nuit-ligne: rgba(244, 239, 231, .12);
  --craie: #F4EFE7;
  --craie-2: #B9B2A7;
  --orange-nuit: #F07A35;

  --police: "Jost", "Noto Kufi Arabic", system-ui, sans-serif;
  --police-ar: "Noto Kufi Arabic", "Jost", sans-serif;
  --police-phon: "Source Sans 3", "Jost", sans-serif; /* dessine juste ā ī ū ḥ ṣ ʿ, que Jost déforme */
  --police-coran: "Amiri Quran", "Amiri", serif;
  --police-accent: "Cormorant Garamond", Garamond, "Times New Roman", serif; /* les mots en orange des grands titres : la main à côté de la règle */

  --rayon-s: 10px;
  --rayon-m: 16px;
  --rayon-l: 24px;
  --rayon-pilule: 999px;
  --ombre: 0 1px 2px rgba(23, 24, 28, .04), 0 12px 32px rgba(23, 24, 28, .07);
  --ombre-forte: 0 2px 4px rgba(23, 24, 28, .05), 0 24px 48px rgba(23, 24, 28, .12);

  --gutter: 20px;
  --max: 1440px;
  --header-h: 68px;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 150ms;
  --t-base: 250ms;
}

@media (min-width: 768px) {
  :root { --gutter: 40px; }
}

@media (min-width: 1024px) {
  :root { --gutter: 56px; }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; }
button { font: inherit; color: inherit; }

/* L'arabe ne s'espace jamais : les lettres doivent rester liées */
[lang="ar"] { letter-spacing: 0; text-transform: none; }
:where([lang="ar"]) { font-family: var(--police-ar); }

::selection { background: var(--orange); color: var(--sur-orange); }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* L'attribut hidden l'emporte toujours, même sur un display posé ailleurs */
[hidden] { display: none !important; }

/* Lien d'évitement : visible seulement au clavier */
.evitement {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: var(--rayon-pilule);
  background: var(--encre);
  color: var(--fond);
  font-size: 15px;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--t-fast) var(--ease-out);
}

.evitement:focus { transform: none; }

/* Icônes en SVG intégré */
.icone { flex: none; width: 1.1em; height: 1.1em; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.label {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-3);
}

/* ---------- En-tête ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--ligne);
  background: rgba(250, 248, 245, .84);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  transition: transform 320ms var(--ease-out), background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}

/* Il s'efface quand on descend, revient dès qu'on remonte (main.js) */
.site-header.is-cache { transform: translateY(-100%); }

/* Au-dessus de la section de nuit, l'en-tête passe en sombre au lieu de devenir gris */
.site-header.is-nuit {
  border-bottom-color: var(--nuit-ligne);
  background: rgba(22, 24, 29, .86);
  color: var(--craie);
}

.site-header.is-nuit .logo__name { border-left-color: var(--nuit-ligne); color: var(--craie-2); }
.site-header.is-nuit .nav__list a:hover { background: var(--nuit-3); }
.site-header.is-nuit .btn--ghost { border-color: var(--nuit-ligne); color: var(--craie); }
.site-header.is-nuit .btn--ghost:hover { border-color: var(--craie); background: var(--craie); color: var(--nuit); }

@media (max-width: 959px) {
  .site-header.is-nuit .nav__list { background: var(--nuit); border-bottom-color: var(--nuit-ligne); }
}

.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo__mark { flex: none; width: 36px; height: 36px; }
.logo__ar { font-size: 20px; font-weight: 500; line-height: 1; white-space: nowrap; }

.logo__name {
  padding-left: 12px;
  border-left: 1px solid var(--ligne-forte);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--encre-2);
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: 8px; }

.nav__toggle {
  order: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.nav__toggle .burger { width: 26px; height: 26px; }

.nav__list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 8px var(--gutter) 20px;
  list-style: none;
  border-bottom: 1px solid var(--ligne);
  background: var(--fond);
  box-shadow: var(--ombre);
}

.nav__list.is-open { display: block; }

.nav__list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 0;
  font-size: 18px;
  font-weight: 400;
  text-decoration: none;
}

.nav__n { font-size: 12px; font-weight: 500; color: var(--orange-texte); font-variant-numeric: tabular-nums; }

@media (max-width: 559px) {
  .logo__name,
  .nav .nav__btn { display: none; }
  .logo__ar { font-size: 19px; }
}

@media (min-width: 560px) {
  .nav__yt { display: none; }
}

@media (min-width: 960px) {
  .nav { gap: 20px; }
  .nav__toggle { display: none; }

  .nav__list {
    display: flex;
    position: static;
    gap: 2px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .nav__list a {
    padding: var(--nav-pad, 8px 14px);
    border-radius: var(--rayon-pilule);
    font-size: 16px;
    white-space: nowrap; /* une rubrique ne passe jamais sur deux lignes */
    transition: background-color var(--t-fast) var(--ease-out);
  }

  .nav__list a:hover { background: var(--sable); }
  .nav__n { display: none; }
}

/* Petit écran d'ordinateur : le menu se resserre un peu pour tenir sur la ligne du logo */
@media (min-width: 960px) and (max-width: 1099px) {
  .nav { gap: 12px; }
  .nav__list { --nav-pad: 8px 10px; }
}

/* ---------- Boutons et liens ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border: 1px solid var(--orange-fonce);
  border-radius: var(--rayon-pilule);
  background: var(--orange-fonce);
  color: var(--sur-orange);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-out);
}

.btn:hover {
  border-color: var(--orange-sombre);
  background: var(--orange-sombre);
  transform: translateY(-1px);
}

.btn:active { transform: translateY(0) scale(.98); }
.btn svg { width: 18px; height: 18px; }

.btn--ghost { border-color: var(--ligne-forte); background: transparent; color: var(--encre); }
.btn--ghost:hover { border-color: var(--encre); background: var(--encre); color: var(--fond); }

.btn--sm { height: 42px; padding: 0 18px; font-size: 14px; }
.btn--sm svg { width: 16px; height: 16px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  cursor: pointer;
}

.link-arrow svg { width: 18px; height: 18px; transition: transform var(--t-base) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Versets : la calligraphie classique, à part de l'interface ---------- */

.verse { margin: 0; }

.verse__ar {
  margin: 0;
  font-family: var(--police-coran);
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 2;
  text-align: right;
  text-wrap: balance;
  color: var(--encre);
}

/* Lettres translittérées (ā, ī, ū, ḥ…) dans un texte en Jost : Jost les dessine mal */
.translit { font-family: var(--police-phon); }

/* Phonétique : pour qui ne lit pas encore l'arabe, discrète sous le texte */
.verse__phon { margin: 12px 0 0; font-family: var(--police-phon); font-size: 16px; font-style: italic; font-weight: 300; line-height: 1.6; color: var(--encre-3); }
.verse__phon + .verse__fr { margin-top: 10px; }

.verse__fr { margin: 16px 0 8px; font-size: 16px; line-height: 1.6; color: var(--encre-2); }
.verse .label { font-size: 13px; }

/* ==========================================================================
   Accueil
   ========================================================================== */

.hero { position: relative; overflow: clip; padding-bottom: 32px; }

/* Une trame de points, comme une table à dessin, qui s'efface vers les bords */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(23, 24, 28, .13) 1px, transparent 1.3px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 70% at 72% 40%, #000 0%, transparent 72%);
  mask-image: radial-gradient(70% 70% at 72% 40%, #000 0%, transparent 72%);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-areas: "titre" "suite" "arche";
  gap: 28px;
  padding-block: 36px 32px;
}

.hero__titre { grid-area: titre; }
.hero__arche { grid-area: arche; }
.hero__suite { grid-area: suite; }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--encre-2);
}

.hero__point { flex: none; width: 36px; height: 1px; background: var(--orange); }

/* Interligne serré : les trois lignes se lisent comme un bloc, rangée sur rangée */
.hero__title {
  max-width: 11ch;
  font-size: clamp(40px, 13vw, 120px); /* 40 px au plus petit : « l’architecture » tient sur un écran de 320 px */
  font-weight: 300;
  line-height: .94;
  letter-spacing: -.025em;
}

/* L'italique à empattements, plus petite d'œil : agrandie pour s'aligner sur Jost */
.hero__title em {
  font-family: var(--police-accent);
  font-size: 1.16em;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0;
  color: var(--orange);
  white-space: nowrap;
}

.hero__verse { max-width: 560px; padding-top: 22px; border-top: 1px solid var(--ligne); }

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 30px; }

/* L'arche : la signature du site */
.hero__arche {
  position: relative;
  justify-self: center;
  width: min(100%, 380px);
  margin-top: 16px;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  border-radius: 999px 999px var(--rayon-l) var(--rayon-l);
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(216, 92, 23, .17), rgba(216, 92, 23, 0) 72%),
    var(--sable);
  box-shadow: inset 0 0 0 1px rgba(23, 24, 28, .05);
  transform-origin: bottom;
  animation: arche 900ms var(--ease-out) both;
}

@keyframes arche { from { opacity: 0; transform: scaleY(.86); } }

.js .hero__arche:not(.is-in),
.js .hero__arche:not(.is-in) .construction * { animation-play-state: paused; }

.hero__drawing { position: absolute; top: 9%; left: 6%; right: 6%; }

.hero__legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6%;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  color: var(--encre-3);
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "titre arche" "suite arche";
    align-items: end;
    column-gap: 56px;
    row-gap: 24px;
    padding-block: 40px 28px;
  }

  .hero__suite { align-self: start; }
  .hero__arche { margin-top: 0; }
  .hero__arche { justify-self: end; width: 100%; max-width: 440px; }
  .hero__title { font-size: clamp(60px, 5.9vw, 104px); }

  /* Le verset complet, avec sa phonétique et sa traduction : une colonne plus large, des espacements justes */
  .hero__eyebrow { margin-bottom: 20px; }
  .hero__verse { max-width: 660px; padding-top: 18px; }
  .hero__verse .verse__ar { font-size: clamp(24px, 2vw, 30px); }
  .hero__actions { margin-top: 24px; }
}

/* Écrans peu hauts : l'accueil se resserre pour que la bande vivante reste visible */
@media (min-width: 1024px) and (max-height: 820px) {
  .hero__grid { padding-block: 24px 20px; row-gap: 18px; }
  .hero__eyebrow { margin-bottom: 14px; }
  .hero__title { font-size: clamp(52px, 4.6vw, 80px); }
  .hero__arche { max-width: 340px; }
  .hero__verse { padding-top: 14px; }
  .hero__verse .verse__ar { font-size: 24px; line-height: 1.85; }
  .hero__verse .verse__phon { margin-top: 6px; }
  .hero__actions { margin-top: 18px; }
}

/* --- Le signe du hizb, tracé au compas --- */

.construction { width: 100%; height: auto; overflow: visible; color: var(--encre); }

.c-faint { fill: none; stroke: rgba(23, 24, 28, .22); stroke-width: 1.2; stroke-dasharray: 2 7; }
.c-axis { fill: none; stroke: var(--orange); stroke-width: 1.1; stroke-dasharray: 28 6 3 6; }
.c-diag { fill: none; stroke: rgba(23, 24, 28, .2); stroke-width: 1.2; }
.c-draw { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 0; }
.c-circle { stroke-width: 1.7; }
.c-inner { stroke-width: 1; stroke: rgba(23, 24, 28, .45); }
.c-star { fill: rgba(216, 92, 23, .13); }
.c-core { fill: var(--orange); }
.c-points circle { fill: var(--sable); stroke: currentColor; stroke-width: 1.2; }
.c-compass__arm path { stroke: var(--encre-2); stroke-width: 1.8; }
.c-compass__arm circle { fill: var(--encre); }

/* Chorégraphie : axes → compas → divisions → carrés → étoile → centre */
.c-axis,
.c-diag,
.c-core { transform-box: view-box; transform-origin: 400px 400px; }
.c-points circle { transform-box: fill-box; transform-origin: center; }

.c-guides { animation: fade 1200ms var(--ease-out) both; }
.c-axis--h { animation: grow-x 900ms var(--ease-out) both; }
.c-axis--v { animation: grow-y 900ms var(--ease-out) 100ms both; }
.c-diag { animation: grow 800ms var(--ease-out) 1300ms both; }

.c-circle { animation: draw 1200ms var(--ease-in-out) 400ms both; }
.c-compass { animation: compass 1700ms linear 200ms both; }

.c-compass__arm {
  transform-box: view-box;
  transform-origin: 400px 400px;
  animation: turn 1200ms var(--ease-in-out) 400ms both;
}

.c-points circle { animation: pop 300ms var(--ease-out) calc(1500ms + var(--i) * 50ms) both; }
.c-sq1 { animation: draw 800ms var(--ease-in-out) 1800ms both; }
.c-sq2 { animation: draw 800ms var(--ease-in-out) 2000ms both; }
.c-star { animation: fade 600ms var(--ease-out) 2600ms both; }
.c-inner { animation: draw 900ms var(--ease-in-out) 2600ms both; }
.c-core { animation: core 700ms var(--ease-out) 3000ms both; }

@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes fade { from { opacity: 0; } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes grow { from { transform: scale(0); } }
@keyframes pop { from { opacity: 0; transform: scale(0); } }
@keyframes turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes compass { 0% { opacity: 0; } 12%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes core { from { opacity: 0; transform: rotate(-22.5deg) scale(.4); } }

/* --- La bande vivante : prochain direct, dernière publication --- */

.vie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  padding: 16px 22px;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-m);
  background: var(--surface);
}

.vie__direct,
.vie__recent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0;
  font-size: 15px;
}

.vie strong { font-weight: 500; }
.vie__delai { color: var(--encre-3); }

.vie__pastille {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange);
}

/* Le soir du direct, la pastille respire */
.vie__direct.is-ce_soir .vie__pastille,
.vie__direct.is-en_direct .vie__pastille { animation: pouls 2s var(--ease-out) infinite; }

@keyframes pouls {
  0% { box-shadow: 0 0 0 0 rgba(216, 92, 23, .45); }
  100% { box-shadow: 0 0 0 10px rgba(216, 92, 23, 0); }
}

.vie__lien {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  text-decoration-color: var(--orange);
  text-underline-offset: 4px;
}

.vie__lien svg { width: 14px; height: 14px; }

.vie__recent {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.vie__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--rayon-pilule);
  background: var(--orange-doux);
  color: var(--orange-texte);
  font-size: 14px;
  font-weight: 500;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.vie__action svg { width: 13px; height: 13px; fill: currentColor; }
.vie__recent:hover .vie__action { background: var(--orange-fonce); color: var(--sur-orange); }

/* ==========================================================================
   Sections
   ========================================================================== */

.section { padding-block: 88px; }

@media (min-width: 1024px) {
  .section { padding-block: 128px; }
}

.section-head__n {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--encre-2);
}

.section-head__n span {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--orange-texte);
  font-variant-numeric: tabular-nums;
}

.section-head__n span::after { content: ""; width: 36px; height: 1px; background: currentColor; }

/* 1 et pas moins : il faut la place des accents et des jambages (« Regarder, / écouter ») */
.section-title {
  max-width: 16ch;
  font-size: clamp(40px, 5.6vw, 80px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.lead {
  max-width: 34ch;
  margin-top: 28px;
  font-size: clamp(21px, 2vw, 26px);
  font-weight: 300;
  line-height: 1.45;
  color: var(--encre-2);
}

/* Traits des petits dessins */
.t { fill: none; stroke: currentColor; stroke-width: 1.2; }
.tf { fill: none; stroke: currentColor; stroke-width: 1; opacity: .55; }
.to { fill: none; stroke: var(--orange); stroke-width: 1.3; }
.ta { fill: none; stroke: var(--orange); stroke-width: 1.1; stroke-dasharray: 14 4 2 4; }
.tirets { stroke-dasharray: 3 3; }
.sol { stroke-width: 1.8; }
.p { fill: currentColor; }
.o { fill: var(--orange); }
.h { fill: url(#p-hatch); }
.mur { fill: none; stroke: currentColor; stroke-width: 4; }
.mur--fin { stroke-width: 4; }
.os { fill: var(--orange-doux); }
.vide { fill: var(--sable); stroke: currentColor; stroke-width: 1.4; }
.num { font-family: var(--police); font-size: 9px; font-weight: 500; fill: currentColor; }
.dessin .mot { font-family: var(--police-ar); font-size: 56px; font-weight: 300; fill: currentColor; }

/* ==========================================================================
   01 — L'approche : la mosaïque
   ========================================================================== */

.principe__lead { max-width: 36ch; }

.bento { display: grid; gap: 16px; margin-top: 56px; }

.bento__carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-l);
  background: var(--surface);
}

.bento__mot {
  margin: 0;
  font-size: clamp(60px, 6.8vw, 96px);
  font-weight: 200;
  line-height: 1.45;
  text-align: right;
  color: var(--encre);
}

.bento__texte h3 { margin-bottom: 8px; font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: -.005em; }
.bento__texte p { max-width: 48ch; margin: 0; color: var(--encre-2); }
.bento__texte em { font-style: italic; color: var(--encre); }

.bento__fig { align-self: flex-start; width: 130px; margin-top: auto; color: var(--encre); }

.bento__carte--sourate {
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(216, 92, 23, .14), rgba(216, 92, 23, 0) 70%),
    var(--sable);
}

.bento__carte--sourate .bento__mot { font-size: clamp(76px, 10vw, 150px); line-height: 1.4; }
.bento__carte--sourate .bento__fig { width: min(100%, 360px); }

.bento__carte--chiffres {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px 40px;
  border-color: var(--orange-fonce);
  background: var(--orange-fonce);
  color: var(--sur-orange);
}

.bento__carte--chiffres p { position: relative; display: flex; flex-direction: column; margin: 0; }

.bento__etoile {
  position: absolute;
  top: -70px;
  right: -70px;
  width: 300px;
  height: 300px;
  fill: none;
  stroke: rgba(255, 248, 242, .2);
  stroke-width: .7;
  pointer-events: none;
}
.bento__carte--chiffres strong { font-size: clamp(48px, 5vw, 72px); font-weight: 200; line-height: 1; letter-spacing: -.02em; }
.bento__carte--chiffres span { margin-top: 8px; font-size: 15px; opacity: .92; }

/* En damier : grande carte, petite carte / petite carte, grande carte */
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  /* Largeur calculée selon le nombre de cartes : 7 + 5, puis 5 + 7… */
  .bento__carte { grid-column: span var(--span, 6); }

  /* Le mur de briques se pose à côté du texte */
  .bento__carte--sourate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "mot mot" "texte fig";
    align-items: end;
    gap: 18px 28px;
  }

  .bento__carte--sourate .bento__mot { grid-area: mot; }
  .bento__carte--sourate .bento__texte { grid-area: texte; }
  .bento__carte--sourate .bento__fig { grid-area: fig; width: 220px; margin-top: 0; }

  .bento__carte--chiffres {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    align-content: end;
    gap: 24px;
    padding: 34px 40px;
  }

  .bento__carte--chiffres strong { font-size: clamp(44px, 4.2vw, 64px); }
  .bento__carte--chiffres span { max-width: 15ch; }
}

/* Les rangées de briques se posent l'une après l'autre */
.js [data-reveal] .legende__fig rect.t,
.js [data-reveal] .legende__fig rect.o {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
  transition-delay: calc(250ms + var(--i, 0) * 140ms);
}

.js [data-reveal].is-in .legende__fig rect { opacity: 1; transform: none; }

/* ==========================================================================
   02 — Les séances
   ========================================================================== */

.planches__head { display: grid; gap: 20px; }

@media (min-width: 1024px) {
  .planches__head { grid-template-columns: 7fr 5fr; align-items: end; gap: 56px; }
}

.planches__intro { max-width: 46ch; margin: 0; font-size: 18px; color: var(--encre-2); }

/* --- Le filtre : des pastilles --- */

.filtre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 44px 0 32px; }
.filtre__intitule { margin-right: 6px; }

.filtre__choix {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 18px;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--rayon-pilule);
  background: var(--surface);
  color: inherit;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.filtre__choix:hover { border-color: var(--encre); }
.filtre__n { font-size: 13px; font-weight: 500; color: var(--encre-3); font-variant-numeric: tabular-nums; }

/* L'explication reste lue par les lecteurs d'écran ; l'intro la donne à tous */
.filtre__detail {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.filtre__choix.is-active { border-color: var(--encre); background: var(--encre); color: var(--fond); }
.filtre__choix.is-active .filtre__n { color: var(--fond); opacity: .72; }

/* --- Les cartes --- */

.planches__grid { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }

@media (min-width: 640px) {
  .planches__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .planches__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 28px; }
}

.planche[hidden] { display: none; }

.planche article {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-l);
  background: var(--surface);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}

.planche:hover article { border-color: var(--ligne-forte); transform: translateY(-4px); box-shadow: var(--ombre); }

.planche__visuel { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }

.planche__image {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--sable);
}

.planche__miniature { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.planche:hover .planche__miniature { transform: scale(1.04); }

.planche__image .dessin { width: 100%; height: 100%; color: var(--encre); }

.planche__duree {
  position: absolute;
  right: 12px;
  bottom: 14px;
  padding: 3px 10px;
  border-radius: var(--rayon-pilule);
  background: rgba(23, 24, 28, .8);
  color: #F7F3EC;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.planche__nouveau {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 12px;
  border-radius: var(--rayon-pilule);
  background: var(--orange-fonce);
  color: var(--sur-orange);
  font-size: 12px;
  font-weight: 500;
}

.planche__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%) scale(.8);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-base) var(--ease-out);
}

/* Le bouton est un dessin (voir « Le bouton de lecture, construit au compas ») */
.planche__play .jouer { width: 100%; height: 100%; filter: drop-shadow(0 8px 18px rgba(23, 24, 28, .25)); }

/* Avec une souris, le bouton n'apparaît qu'au survol. Sans souris, il est toujours visible,
   y compris sur les téléphones qui se disent « avec survol » (certains Android) :
   leur pointeur reste le doigt, jamais « fin ». */
@media (hover: hover) and (pointer: fine) {
  .planche__play { opacity: 0; transform: translate(-50%, -50%) scale(.85); }

  .planche:hover .planche__play,
  .planche:focus-within .planche__play,
  .planche__visuel:focus-visible .planche__play,
  .direct:hover .planche__play,
  .direct:focus-visible .planche__play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.planche__texte { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 18px 20px 22px; }
.planche__sujet { margin: 0 0 2px; font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-texte); }
.planche__titre { font-size: 21px; font-weight: 400; line-height: 1.3; text-wrap: balance; }
.planche__titre--ar { font-size: 21px; line-height: 1.6; }
.planche__ar { margin: 4px 0 0; font-size: 15px; line-height: 1.7; color: var(--encre-3); text-wrap: balance; }

.planche.is-entering { animation: planche-in 400ms var(--ease-out) calc(var(--i, 0) * 50ms) both; }

@keyframes planche-in { from { opacity: 0; transform: translateY(16px); } }

/* --- Reprendre la lecture --- */

.progression { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(23, 24, 28, .3); }
.progression span { display: block; height: 100%; background: var(--orange); }

.reprise {
  position: absolute;
  left: 12px;
  bottom: 14px;
  padding: 3px 10px;
  border-radius: var(--rayon-pilule);
  background: var(--orange-fonce);
  color: var(--sur-orange);
  font-size: 12px;
  font-weight: 500;
}

/* --- Les séances en direct --- */

.directs { margin-top: 88px; }

.directs__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-bottom: 24px; }
.directs__titre { display: flex; align-items: center; font-size: 34px; font-weight: 300; letter-spacing: -.015em; }
.directs__intro { flex: 1 1 240px; margin: 0; color: var(--encre-2); }

.planches__pastille {
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 14px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 5px var(--orange-doux);
}

.directs__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1024px) {
  .directs__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.direct { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }

.direct__image {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--rayon-m);
  background: var(--sable);
}

.direct__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.direct:hover .direct__image img { transform: scale(1.04); }

.direct__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--rayon-pilule);
  background: rgba(23, 24, 28, .8);
  color: #F7F3EC;
  font-size: 12px;
  font-weight: 500;
}

.direct__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange-nuit); }

.direct__date { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.direct__date strong { font-size: 18px; font-weight: 500; }
.direct__date span { font-size: 14px; color: var(--encre-3); }

/* ==========================================================================
   03 — Les 114 sourates (bande de nuit)
   ========================================================================== */

.nuit {
  background:
    radial-gradient(60% 45% at 85% 0%, rgba(240, 122, 53, .12), rgba(240, 122, 53, 0) 70%),
    var(--nuit);
  color: var(--craie);
}

.nuit .label,
.nuit .section-head__n { color: var(--craie-2); }
.nuit .section-head__n span { color: var(--orange-nuit); }
.nuit :focus-visible { outline-color: var(--orange-nuit); }
.nuit .link-arrow { color: var(--craie); text-decoration-color: var(--orange-nuit); }
.nuit .progression span { background: var(--orange-nuit); }

.sourates__head { display: grid; gap: 20px; }

@media (min-width: 1024px) {
  .sourates__head { grid-template-columns: 7fr 5fr; align-items: end; gap: 56px; }
}

.sourates__intro { max-width: 46ch; font-size: 18px; color: var(--craie-2); }
.sourates__intro p { margin: 0; }

/* Outils : recherche, filtre « Avec une séance », légende */
.sourates__outils { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 20px; margin: 44px 0 12px; }
.sourates__recherche { flex: 1 1 300px; max-width: 460px; display: grid; gap: 8px; }

.champ { position: relative; }

.champ svg {
  position: absolute;
  left: 18px;
  top: 50%;
  width: 18px;
  height: 18px;
  color: var(--craie-2);
  transform: translateY(-50%);
  pointer-events: none;
}

.champ input {
  width: 100%;
  height: 50px;
  padding: 0 18px 0 48px;
  border: 1px solid var(--nuit-ligne);
  border-radius: var(--rayon-pilule);
  background: rgba(244, 239, 231, .06);
  color: var(--craie);
  font: inherit;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}

.champ input::placeholder { color: var(--craie-2); opacity: .8; }
.champ input:focus { outline: none; border-color: var(--orange-nuit); background: rgba(244, 239, 231, .09); }

.sourates__bascule {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 20px;
  border: 1px solid var(--nuit-ligne);
  border-radius: var(--rayon-pilule);
  background: transparent;
  color: var(--craie);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.sourates__bascule:hover { border-color: rgba(244, 239, 231, .4); }
.sourates__bascule.is-active { border-color: var(--orange-nuit); background: var(--orange-nuit); color: var(--nuit); }

.sourates__bascule-n {
  min-width: 26px;
  padding: 1px 8px;
  border-radius: var(--rayon-pilule);
  background: rgba(244, 239, 231, .1);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sourates__bascule.is-active .sourates__bascule-n { background: rgba(22, 24, 29, .15); }

.sourates__legende { display: flex; align-items: center; gap: 10px; margin: 0 0 15px; font-size: 14px; color: var(--craie-2); }

@media (min-width: 1024px) {
  .sourates__legende { margin-left: auto; }
}

.sourates__statut { min-height: 1.6em; margin: 0 0 12px; font-size: 14px; color: var(--craie-2); }

/* La grille : 114 tuiles identiques, aucune n'est mise au-dessus des autres */
.sourates__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sourate {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 18px 4px 8px;
  border: 1px solid var(--nuit-ligne);
  border-radius: 14px;
  background: var(--nuit-2);
  color: var(--craie);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.sourate__num {
  position: absolute;
  top: 7px;
  left: 9px;
  font-size: 11px;
  font-weight: 500;
  color: var(--craie-2);
  font-variant-numeric: tabular-nums;
}

.sourate__ar { font-size: 16px; font-weight: 400; line-height: 1.5; text-align: center; }

/* Nom français : visible dès qu'il y a la place (tablette, ordinateur) */
.sourate__fr { display: none; }

/* Nombre de séances de Rachid sur la sourate */
.sourate__nb {
  position: absolute;
  top: 7px;
  right: 7px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--orange-nuit);
  color: var(--nuit);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sourates__legende .sourate__nb { position: static; }

.sourate:hover { border-color: rgba(244, 239, 231, .3); background: var(--nuit-3); }
.sourate.is-active { border-color: var(--orange-nuit); background: var(--orange-nuit); color: var(--nuit); }
.sourate.is-active .sourate__num,
.sourate.is-active .sourate__fr { color: var(--nuit); }
.sourate.is-active .sourate__nb { background: var(--nuit); color: var(--orange-nuit); }

@media (min-width: 768px) {
  .sourates__grille { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .sourate { aspect-ratio: auto; min-height: 84px; gap: 2px; padding: 24px 6px 10px; }
  .sourate__fr { display: block; font-size: 11.5px; line-height: 1.3; text-align: center; color: var(--craie-2); }
}

/* --- La fiche : elle s'ouvre sous la rangée de la sourate choisie --- */

.sourate-detail {
  grid-column: 1 / -1;
  position: relative;
  margin: 8px 0 10px;
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.sourate-detail[hidden] { display: none; }

/* Petite pointe qui relie la fiche à sa tuile */
.sourate-detail::before {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--fleche, 50%);
  z-index: 1;
  width: 12px;
  height: 12px;
  border-top: 1px solid var(--nuit-ligne);
  border-left: 1px solid var(--nuit-ligne);
  border-top-left-radius: 3px;
  background: var(--nuit-3);
  transform: translateX(-50%) rotate(45deg);
}

.sourate-detail.is-in { animation: fiche-in 240ms var(--ease-out) both; }

@keyframes fiche-in { from { opacity: 0; transform: translateY(-6px); } }

.sourate-detail__corps {
  position: relative;
  padding: 26px 22px 30px;
  border: 1px solid var(--nuit-ligne);
  border-radius: 22px;
  background: var(--nuit-3);
}

@media (min-width: 1024px) {
  .sourate-detail__corps { padding: 34px 40px 38px; }
}

.sourate-detail__fermer {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(244, 239, 231, .06);
  color: var(--craie-2);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.sourate-detail__fermer:hover { background: rgba(244, 239, 231, .14); color: var(--craie); }
.sourate-detail__fermer svg { width: 20px; height: 20px; }

/* 1. Quelle sourate : les deux noms côte à côte, le français à gauche, l'arabe à droite */
.sourate-detail__entete { padding-right: 52px; }

.sourate-detail__noms {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 32px;
  margin-top: 10px;
}

.sourate-detail__fr { margin: 0; font-size: clamp(34px, 4vw, 48px); font-weight: 300; line-height: 1.15; letter-spacing: -.015em; }

.sourate-detail__ar {
  margin: 0 0 0 auto;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 300;
  line-height: 1.5;
}

/* 2. Sa place dans le Coran : une règle graduée de 1 à 114 */
.regle { max-width: 560px; margin-top: 20px; }
.regle .label { margin-bottom: 12px; }

.regle__corps {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--craie-2);
  font-variant-numeric: tabular-nums;
}

.regle__ligne {
  position: relative;
  flex: 1;
  height: 10px;
  background:
    linear-gradient(rgba(244, 239, 231, .3), rgba(244, 239, 231, .3)) center / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(244, 239, 231, .24) 0 1px, transparent 1px 8.85%);
}

/* La piste se décale de la position de la sourate : le repère glisse sans recalcul de mise en page */
.regle__piste {
  position: absolute;
  inset: 0;
  transform: translateX(calc(var(--place, 0) * 100%));
  transition: transform 450ms var(--ease-out);
}

.regle__repere {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--orange-nuit);
  box-shadow: 0 0 0 4px rgba(240, 122, 53, .2);
  transform: translate(-50%, -50%);
}

.regle__n {
  position: absolute;
  top: 18px;
  left: 50%;
  font-size: 12px;
  font-weight: 500;
  color: var(--orange-nuit);
  transform: translateX(-50%);
}

.is-debut .regle__borne:first-child,
.is-fin .regle__borne:last-child { color: var(--orange-nuit); font-weight: 500; }
.is-debut .regle__n,
.is-fin .regle__n { visibility: hidden; }

/* 3. Les séances : le contenu principal de la fiche */
.sourate-detail__seances { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--nuit-ligne); }

.sourate-detail__liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px 20px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .sourate-detail__liste { grid-template-columns: repeat(auto-fill, minmax(260px, 320px)); }
}

.fiche-seance {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--craie);
  text-align: left;
  cursor: pointer;
}

.fiche-seance__image {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--rayon-m);
  background: var(--nuit-2);
}

.fiche-seance__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.fiche-seance:hover .fiche-seance__image img { transform: scale(1.04); }

/* Ici, le bouton de lecture reste visible : c'est l'action attendue */
.fiche-seance .planche__play { width: 52px; height: 52px; opacity: 1; transform: translate(-50%, -50%) scale(.9); }
.fiche-seance:hover .planche__play,
.fiche-seance:focus-visible .planche__play { transform: translate(-50%, -50%) scale(1); }

.fiche-seance__titre { display: block; margin-top: 14px; font-size: 19px; font-weight: 400; line-height: 1.3; text-wrap: balance; }

.fiche-seance:hover .fiche-seance__titre {
  text-decoration: underline;
  text-decoration-color: var(--orange-nuit);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.sourate-detail__vide p { margin: 14px 0 0; color: var(--craie-2); }
.sourate-detail__suites { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 8px; }

/* ==========================================================================
   04 — Rachid
   ========================================================================== */

.atelier__grid { display: grid; gap: 56px; }

@media (min-width: 1024px) {
  .atelier__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
  .atelier__coupe { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 32px); }
  .atelier__texte { grid-column: 7 / span 6; }
}

.atelier__coupe { margin: 0; }
.atelier__legende { margin-bottom: 16px; }

/* L'arche, de nouveau : ce que le Coran construit en nous */
.atelier__arche {
  padding: 56px 28px 24px;
  border-radius: 999px 999px var(--rayon-l) var(--rayon-l);
  background:
    radial-gradient(90% 50% at 50% 0%, rgba(216, 92, 23, .15), rgba(216, 92, 23, 0) 70%),
    var(--sable);
}

.coupe { width: 100%; max-width: 400px; margin-inline: auto; color: var(--encre); }
.coupe .p { fill: url(#p-hatch); stroke: currentColor; stroke-width: 1.2; }
.coupe .c-label { font-size: 12px; }
.c-label { font-family: var(--police); font-size: 13px; font-weight: 500; letter-spacing: .08em; fill: var(--encre-3); }
.coupe__etiquette { paint-order: stroke; stroke: var(--sable); stroke-width: 8px; stroke-linejoin: round; }
.cote-ink { fill: none; stroke: var(--encre-3); stroke-width: 1; }

.atelier__coupe .verse { max-width: 440px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--ligne); }

.atelier__texte .section-title { max-width: 12ch; }
.atelier__texte p:not(.lead):not(.section-head__n):not(.label) { max-width: 58ch; color: var(--encre-2); }

.methode__titre { margin-top: 48px; }

.methode { display: grid; gap: 12px; margin: 16px 0 40px; padding: 0; list-style: none; }

.methode li {
  display: flex;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-m);
  background: var(--surface);
}

.bulle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--orange-doux);
  color: var(--orange-texte);
  font-size: 15px;
  font-weight: 500;
}

.methode h3 { margin-bottom: 4px; font-size: 21px; font-weight: 500; }
.methode p { margin: 0; }

/* La coupe se construit : le sol, les fondations creusées, les murs qui s'élèvent */
.coupe__mur, .coupe__semelle, .coupe__dalle { transform-box: fill-box; }
.coupe__mur { transform-origin: bottom; }
.coupe__semelle { transform-origin: top; }
.coupe__trace { stroke-dasharray: 1; }

.js [data-reveal] .coupe__terre,
.js [data-reveal] .coupe__dalle,
.js [data-reveal] .coupe__notes,
.js [data-reveal] .coupe__axe { opacity: 0; transition: opacity 600ms var(--ease-out); }
.js [data-reveal] .coupe__semelle,
.js [data-reveal] .coupe__mur { transform: scaleY(0); transition: transform 700ms var(--ease-out); }
.js [data-reveal] .coupe__trace { stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--ease-in-out); }

.js .is-in .coupe__trace.sol { stroke-dashoffset: 0; transition-delay: 100ms; }
.js .is-in .coupe__terre { opacity: 1; transition-delay: 400ms; }
.js .is-in .coupe__semelle { transform: none; transition-delay: 500ms; }
.js .is-in .coupe__mur { transform: none; transition-delay: 800ms; }
.js .is-in .coupe__dalle { opacity: 1; transition-delay: 1200ms; }
.js .is-in .coupe__trace:not(.sol) { stroke-dashoffset: 0; transition-delay: 1300ms; }
.js .is-in .coupe__axe { opacity: 1; transition-delay: 1700ms; }
.js .is-in .coupe__notes { opacity: 1; transition-delay: 1900ms; }

/* ==========================================================================
   Pied de page
   ========================================================================== */

.pied { position: relative; overflow: clip; padding-top: 96px; background: var(--sable); }

.pied__verse { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.pied__verse .verse__ar { font-size: clamp(30px, 3.4vw, 46px); text-align: center; }

.pied__grille { display: grid; gap: 32px; padding-block: 40px; border-top: 1px solid var(--ligne-forte); }

@media (min-width: 900px) {
  .pied__grille { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.pied__mark { width: 48px; height: 48px; }
.pied__ar { margin: 14px 0 6px; font-size: 26px; font-weight: 500; }
.pied__sous { max-width: 34ch; margin: 0; color: var(--encre-2); }

.pied__col .label { margin-bottom: 12px; }
.pied__col ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pied__col p { margin: 0; }
.pied__col a { text-decoration: none; }
.pied__col a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }
.pied__col a svg { display: inline; width: 14px; height: 14px; vertical-align: -2px; }

.pied__mentions { margin: 0; padding-block: 20px; border-top: 1px solid var(--ligne-forte); font-size: 13px; color: var(--encre-3); }
.pied__mentions a { text-underline-offset: 3px; }

/* La signature du site : le nom de la chaîne, en très grand, écrit au calame (main.js) */
.pied__geant {
  margin: 0;
  padding: 8px var(--gutter) 24px;
  font-size: clamp(30px, 8.2vw, 160px);
  font-weight: 200;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  color: var(--encre);
  user-select: none;
}

.pied__credit { margin: 0; padding: 0 0 20px; font-size: 13px; color: var(--encre-3); }

.pied__credit a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--encre-2);
  text-decoration-color: var(--orange);
  text-underline-offset: 3px;
}

.pied__credit svg { width: 13px; height: 13px; }

/* ==========================================================================
   « هندسة سور القرآن » écrit au calame : la ligne d'écriture, la hauteur de l'alif
   en points de calligraphe, puis l'encre de droite à gauche (main.js, GSAP).
   Le mot n'est jamais découpé : les liaisons de l'arabe restent intactes.
   ========================================================================== */

.ecriture { position: relative; }
.ecriture__mot { position: relative; display: inline-block; padding: 0 .14em .08em; }
.ecriture__base { display: inline-block; width: 0; height: 0; vertical-align: baseline; }

.ecriture__trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ecriture__plume {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--orange);
  opacity: 0;
  pointer-events: none;
}

.eg-base { fill: none; stroke: var(--orange); stroke-width: 1; stroke-dasharray: 28 6 3 6; }
.eg-haut { fill: none; stroke: currentColor; stroke-opacity: .32; stroke-width: 1; stroke-dasharray: 2 7; }
.eg-point { fill: var(--orange); }

/* ==========================================================================
   Le menu sur téléphone et tablette : il s'ouvre comme une arche (main.js, GSAP)
   ========================================================================== */

/* Le bouton : deux traits qui pivotent autour du point orange du logo, comme un compas */
.burger { width: 26px; height: 26px; overflow: visible; }

.burger__trait,
.burger__point {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: transform 420ms var(--ease-out);
}

.burger__trait { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.burger__point { fill: var(--orange); }

.nav__toggle[aria-expanded="true"] .burger__trait--1 { transform: rotate(45deg) translateY(4px); }
.nav__toggle[aria-expanded="true"] .burger__trait--2 { transform: rotate(-45deg) translateY(-4px); }
.nav__toggle[aria-expanded="true"] .burger__point { transform: scale(1.3); }

/* Menu ouvert : l'en-tête passe au-dessus du panneau, en clair sur la nuit */
/* Seulement sur <html> : un overflow sur <body> en ferait un conteneur de défilement,
   et le header collant (avec la croix) resterait en haut du document, hors de l'écran */
.menu-verrou { overflow: hidden; }

.menu-ouvert .site-header {
  z-index: 90;
  border-bottom-color: transparent;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--craie);
  transform: none;
}

.menu-ouvert .site-header .logo__name { border-left-color: var(--nuit-ligne); color: var(--craie-2); }
.menu-ouvert .site-header .btn--ghost { border-color: var(--nuit-ligne); color: var(--craie); }

.menu-plein {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(80% 45% at 50% 100%, rgba(240, 122, 53, .16), rgba(240, 122, 53, 0) 70%),
    var(--nuit);
  color: var(--craie);
}

@media (min-width: 960px) {
  .menu-plein { display: none !important; }
}

/* Le tracé du signe du hizb, en fond : l'axe, le cercle, les deux carrés */
.menu-plein__trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mp-axe { stroke: var(--orange-nuit); stroke-width: 1; stroke-dasharray: 28 6 3 6; stroke-opacity: .5; }
.mp-ligne, .mp-cercle, .mp-carre, .mp-losange { fill: none; stroke: var(--craie); stroke-opacity: .16; stroke-width: 1; }
.mp-etoile { fill: rgba(240, 122, 53, .07); }

.menu-plein__corps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-height: 100%;
  padding: calc(var(--header-h) + 20px) var(--gutter) 24px;
}

.menu-plein__liste { margin: 0; padding: 0; list-style: none; }
.menu-plein__liste li { position: relative; }

.menu-plein__lien {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0 12px;
  color: inherit;
  text-decoration: none;
}

.menu-plein__n {
  flex: none;
  width: 22px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--orange-nuit);
  font-variant-numeric: tabular-nums;
}

.menu-plein__masque { display: block; overflow: hidden; padding-bottom: .1em; }

.menu-plein__mot {
  display: block;
  font-size: clamp(34px, 9.4vw, 54px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.02em;
  transition: color var(--t-fast) var(--ease-out);
}

.menu-plein__lien:hover .menu-plein__mot,
.menu-plein__lien:focus-visible .menu-plein__mot { color: var(--orange-nuit); }

.menu-plein__regle { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--nuit-ligne); }

.menu-plein__liens { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; font-size: 15px; }

.menu-plein__liens a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--craie);
  text-decoration: underline;
  text-decoration-color: var(--orange-nuit);
  text-underline-offset: 6px;
}

.menu-plein__liens svg { width: 15px; height: 15px; }

.menu-plein__marque {
  margin: auto 0 0;
  font-size: clamp(30px, 10.5vw, 60px);
  font-weight: 200;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  color: var(--craie);
}

.menu-plein__marque .eg-point,
.menu-plein__marque .ecriture__plume { fill: var(--orange-nuit); background: var(--orange-nuit); }
.menu-plein__marque .eg-base { stroke: var(--orange-nuit); }

/* ==========================================================================
   Le prochain direct : une carte « à venir », tracée en pointillés
   comme ce qui est encore en projet sur un plan ; le soir même, elle se construit
   ========================================================================== */

.planche--prochain article { border: 1px dashed var(--ligne-forte); background: transparent; }
.planche--prochain:hover article { transform: none; box-shadow: none; border-color: var(--orange); }

.prochain__visuel {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-bottom: 1px dashed var(--ligne-forte);
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(216, 92, 23, .12), rgba(216, 92, 23, 0) 70%),
    var(--sable);
}

.prochain__arche {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  height: 82%;
  aspect-ratio: 3 / 4;
  padding-top: 10%;
  border: 1.5px dashed var(--orange);
  border-radius: 999px 999px 10px 10px;
}

.prochain__jour,
.prochain__mois { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-2); }
.prochain__date { font-size: clamp(44px, 4.4vw, 68px); font-weight: 200; line-height: 1; letter-spacing: -.02em; }

.prochain__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--orange);
  border-radius: var(--rayon-pilule);
  background: var(--surface);
  color: var(--orange-texte);
  font-size: 12px;
  font-weight: 500;
}

.prochain__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

.prochain__infos { margin: 0; font-size: 15px; color: var(--encre-2); }
.prochain__local { margin: 0; font-size: 14px; color: var(--orange-texte); }
.prochain__local::first-letter { text-transform: uppercase; }

.prochain__agenda {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--encre);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 4px;
}

.prochain__agenda svg { width: 16px; height: 16px; }

/* Le soir du direct : trait plein, pastille qui respire */
.planche--prochain.is-en-direct article { border-style: solid; border-color: var(--orange); }
.is-en-direct .prochain__visuel { border-bottom-style: solid; }
.is-en-direct .prochain__arche { border-style: solid; background: rgba(216, 92, 23, .06); }
.is-en-direct .prochain__badge { border-color: var(--orange-fonce); background: var(--orange-fonce); color: var(--sur-orange); }
.is-en-direct .prochain__badge::before { background: var(--sur-orange); animation: pouls 2s var(--ease-out) infinite; }

/* La pastille du header, le soir du direct seulement */
.pastille-direct {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--orange);
  border-radius: var(--rayon-pilule);
  color: var(--orange-texte);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.pastille-direct__point { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.pastille-direct__court { display: none; }

/* Petit téléphone : la pastille se fait courte pour laisser sa place au bouton menu */
@media (max-width: 429px) {
  .site-header__inner { gap: 12px; }
  .nav { gap: 4px; }
  .pastille-direct { height: 30px; padding: 0 10px; gap: 6px; font-size: 12px; }
  .pastille-direct__court { display: inline; }
  .pastille-direct__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (max-width: 389px) {
  .logo { gap: 10px; }
  .logo__ar { font-size: 17px; }
  .nav__toggle { width: 40px; }
  .pastille-direct { padding: 0 8px; }
}

@media (max-width: 339px) {
  .site-header__inner { gap: 8px; }
  .logo__ar { font-size: 15px; }
}
.pastille-direct.is-en_direct { border-color: var(--orange-fonce); background: var(--orange-fonce); color: var(--sur-orange); }
.pastille-direct.is-en_direct .pastille-direct__point { background: var(--sur-orange); animation: pouls 2s var(--ease-out) infinite; }
.site-header.is-nuit .pastille-direct:not(.is-en_direct),
.menu-ouvert .pastille-direct:not(.is-en_direct) { color: var(--orange-nuit); border-color: var(--orange-nuit); }

/* Le logo se trace une fois par visite (main.js) : caché jusqu'au tracé */
.intro-logo .site-header .logo { opacity: 0; }

/* ==========================================================================
   Le bouton de lecture, construit au compas : un cercle, trois points à 120°,
   puis le triangle équilatéral qui les relie et se remplit d'orange
   ========================================================================== */

.jouer { display: block; overflow: visible; }
.jouer__anneau { display: none; }
.jouer__disque { fill: rgba(250, 248, 245, .95); }
.jouer__guide { fill: none; stroke: var(--orange); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .35; }

.jouer__triangle {
  fill: var(--orange);
  stroke: var(--orange);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.jouer__point { fill: var(--orange); transform-box: fill-box; transform-origin: center; }

/* Sur une carte, au survol de la souris : le compas trace le cercle, pose les trois points,
   le triangle les relie. En quittant la carte, tout s'efface vite. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .planche .jouer__guide { stroke-dashoffset: 1; opacity: .7; transition: stroke-dashoffset 120ms, opacity 120ms; }
  .planche .jouer__point { transform: scale(0); transition: transform 120ms; }
  .planche .jouer__triangle { stroke-dashoffset: 1; fill-opacity: 0; transition: stroke-dashoffset 120ms, fill-opacity 120ms; }

  .planche:is(:hover, :focus-within) .jouer__guide {
    stroke-dashoffset: 0;
    opacity: .35;
    transition: stroke-dashoffset 380ms var(--ease-in-out) 60ms, opacity 400ms ease 820ms;
  }

  .planche:is(:hover, :focus-within) .jouer__point { transform: scale(1); transition: transform 260ms var(--ease-out); }
  .planche:is(:hover, :focus-within) .jouer__point--1 { transition-delay: 340ms; }
  .planche:is(:hover, :focus-within) .jouer__point--2 { transition-delay: 410ms; }
  .planche:is(:hover, :focus-within) .jouer__point--3 { transition-delay: 480ms; }

  .planche:is(:hover, :focus-within) .jouer__triangle {
    stroke-dashoffset: 0;
    fill-opacity: 1;
    transition: stroke-dashoffset 300ms var(--ease-in-out) 500ms, fill-opacity 220ms ease 760ms;
  }
}

/* Sur écran tactile, sans survol : la même construction, une seule fois, quand la carte arrive à l'écran */
@media (hover: none) and (prefers-reduced-motion: no-preference), (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  .planche.is-in .jouer__guide { animation: jouer-trace 420ms var(--ease-in-out) 300ms backwards; }
  .planche.is-in .jouer__point { animation: jouer-point 260ms var(--ease-out) 610ms backwards; }
  .planche.is-in .jouer__point--2 { animation-delay: 680ms; }
  .planche.is-in .jouer__point--3 { animation-delay: 750ms; }
  .planche.is-in .jouer__triangle { animation: jouer-trace 320ms var(--ease-in-out) 770ms backwards, jouer-remplit 240ms ease 1010ms backwards; }
}

/* Le grand lecteur d'une séance : l'anneau en pointillés, comme la pointe sèche du compas.
   Au survol, il tourne de 60° : le pas du compas quand on reporte le rayon sur le cercle. */
.lecteur-yt__rond .jouer__anneau {
  display: block;
  fill: none;
  stroke: rgba(250, 248, 245, .8);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  transform-box: view-box;
  transform-origin: 50px 50px;
  transition: transform 700ms var(--ease-out);
}

.lecteur-yt__play:is(:hover, :focus-visible) .jouer__anneau { transform: rotate(60deg); }

/* À l'arrivée sur la page, le bouton se construit une fois, après l'ouverture en arche */
@media (prefers-reduced-motion: no-preference) {
  .lecteur-yt__rond .jouer__anneau { animation: jouer-tourne 1200ms var(--ease-out) 300ms backwards; }
  .lecteur-yt__rond .jouer__guide { animation: jouer-trace 420ms var(--ease-in-out) 450ms backwards; }
  .lecteur-yt__rond .jouer__point { animation: jouer-point 260ms var(--ease-out) 760ms backwards; }
  .lecteur-yt__rond .jouer__point--2 { animation-delay: 830ms; }
  .lecteur-yt__rond .jouer__point--3 { animation-delay: 900ms; }
  .lecteur-yt__rond .jouer__triangle { animation: jouer-trace 320ms var(--ease-in-out) 920ms backwards, jouer-remplit 240ms ease 1160ms backwards; }
}

@keyframes jouer-trace { from { stroke-dashoffset: 1; } }
@keyframes jouer-point { from { transform: scale(0); } }
@keyframes jouer-remplit { from { fill-opacity: 0; } }
@keyframes jouer-tourne { from { opacity: 0; transform: rotate(-60deg); } }

/* ==========================================================================
   Lecteur (modale)
   ========================================================================== */

.lecteur {
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100svh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--rayon-l);
  background: var(--surface);
  color: var(--encre);
  box-shadow: 0 30px 80px rgba(23, 24, 28, .35);
}

.lecteur::backdrop { background: rgba(23, 24, 28, .6); backdrop-filter: blur(6px); }

.lecteur[open] { animation: lecteur-in 260ms var(--ease-out); }
.lecteur[open]::backdrop { animation: fade 200ms var(--ease-out); }

@keyframes lecteur-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }

.lecteur__inner { padding: 26px; }
.lecteur__inner:focus { outline: none; }

.lecteur__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 18px; }

.lecteur__titre { margin-top: 8px; font-size: clamp(26px, 3vw, 36px); font-weight: 300; line-height: 1.15; letter-spacing: -.015em; }
.lecteur__ar { margin: 8px 0 0; font-size: 18px; color: var(--encre-3); }

.lecteur__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sable);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.lecteur__close:hover { background: var(--encre); color: var(--fond); }

.lecteur__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--rayon-m); background: #0E0F12; }
.lecteur__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.lecteur__reprise { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 14px 0 0; font-size: 14px; color: var(--encre-2); }

.lecteur__recommencer {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 4px;
  cursor: pointer;
}

.lecteur__resume { max-width: 64ch; margin: 18px 0 0; color: var(--encre-2); }

/* ==========================================================================
   Version WordPress : séances, résumés, bibliothèque, sourates
   ========================================================================== */

.section--rule { border-top: 1px solid var(--ligne); }
.section--page { padding-block: 40px 96px; }
.section-title--page { max-width: 20ch; font-size: clamp(40px, 5vw, 72px); }
.wrap--texte { max-width: 860px; }

@media (min-width: 1024px) {
  .section--page { padding-block: 56px 128px; }
}

/* La nuit se lève en arche : plus de coupure nette entre le jour et la section des sourates */
.nuit { border-radius: 50% 50% 0 0 / 36px 36px 0 0; }

@media (min-width: 768px) {
  .nuit { border-radius: 50% 50% 0 0 / 96px 96px 0 0; }
}

/* --- Accueil : qui parle --- */

.hero__eyebrow { flex-wrap: wrap; row-gap: 10px; }

.hero__qui {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.hero__qui::before { content: "·"; color: var(--encre-3); }

/* Sur petit écran, la présentation passe à la ligne : le point séparateur ne sert plus */
@media (max-width: 559px) {
  .hero__qui::before { content: none; }
}
.hero__qui:hover span { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }

.hero__avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--ligne-forte);
}

/* --- La bande vivante : heure, fuseau, agenda --- */

.vie__fuseau { font-weight: 300; color: var(--encre-3); }
.vie__local { font-size: 14px; color: var(--orange-texte); }
.vie__lien { gap: 6px; text-decoration: underline; }
.vie__lien svg { width: 15px; height: 15px; }
.vie__direct.is-en_direct strong { color: var(--orange-texte); }
.vie__direct .btn--sm { height: 38px; }

.vie__resume {
  padding: 2px 10px;
  border-radius: var(--rayon-pilule);
  background: var(--sable);
  color: var(--encre-2);
  font-size: 12.5px;
  font-weight: 500;
}

/* --- Cartes : toute la carte est cliquable --- */

.planche__lien { color: inherit; text-decoration: none; }
.planche__lien::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--rayon-l); }
.planche__lien:focus-visible { outline: none; }
.planche article:focus-within { outline: 2px solid var(--orange); outline-offset: 3px; }

.planche__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--rayon-pilule);
  background: rgba(23, 24, 28, .8);
  color: #F7F3EC;
  font-size: 12px;
  font-weight: 500;
}

.planche__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange-nuit); }
.planche__nouveau { left: auto; right: 12px; }

.planche__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: auto 0 0;
  padding-top: 12px;
  font-size: 13.5px;
  color: var(--encre-3);
}

.planche__pastille-resume {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--orange-doux);
  color: var(--orange-texte);
}

.planche__pastille-resume svg { width: 14px; height: 14px; }

/* --- Accueil : les deux blocs de séances --- */

.bloc-seances { margin-top: 56px; }
.bloc-seances + .bloc-seances { margin-top: 80px; }

.bloc-seances__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 24px;
}

.bloc-seances__titre { display: flex; align-items: center; font-size: clamp(26px, 2.6vw, 34px); font-weight: 300; letter-spacing: -.015em; }
.bloc-seances__intro { flex: 1 1 320px; max-width: 52ch; margin: 0; color: var(--encre-2); }

.seances__fin {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 32px;
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--ligne);
}

.recherche { flex: 1 1 340px; max-width: 580px; display: grid; gap: 8px; margin: 0; }

/* Champ de recherche sur fond clair (l'autre est pensé pour la nuit) */
.champ--clair svg { color: var(--encre-3); }
.champ--clair input { border-color: var(--ligne-forte); background: var(--surface); color: var(--encre); }
.champ--clair input::placeholder { color: var(--encre-3); }
.champ--clair input:focus { border-color: var(--orange); background: var(--surface); }

/* --- Rachid --- */

.atelier__arche--portrait { aspect-ratio: 4 / 5; padding: 0; overflow: hidden; }
.atelier__portrait { width: 100%; height: 100%; object-fit: cover; }

.citation { max-width: 460px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--ligne); }
.citation__ar { margin: 0; font-family: var(--police-ar); font-size: clamp(22px, 2vw, 28px); font-weight: 300; line-height: 1.8; }
.citation__fr { margin: 10px 0 8px; font-size: 18px; font-style: italic; font-weight: 300; color: var(--encre-2); }
.citation .label a { color: inherit; text-underline-offset: 3px; }

.atelier__bio > p:first-child {
  max-width: 34ch;
  margin-top: 28px;
  font-size: clamp(21px, 2vw, 26px);
  font-weight: 300;
  line-height: 1.45;
}

.parcours { margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ligne); }

.parcours li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ligne);
}

.parcours__quand { font-size: 14px; font-weight: 500; color: var(--orange-texte); font-variant-numeric: tabular-nums; }
.parcours__quoi { color: var(--encre-2); }

.chiffres { display: flex; flex-wrap: wrap; gap: 24px 48px; margin: 40px 0; }
.chiffres div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.chiffres dd { margin: 0; font-size: clamp(40px, 4vw, 56px); font-weight: 200; line-height: 1; letter-spacing: -.02em; }
.chiffres dt { max-width: 18ch; margin-top: 8px; font-size: 14px; color: var(--encre-3); }

.atelier__liens { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

/* La méthode, en ligne sous l'approche */
.methode--ligne { margin-bottom: 0; }

@media (min-width: 900px) {
  .methode--ligne { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* La fiche d'une sourate (accueil) mène à sa page */
.sourate-detail__page { margin-top: 20px; }
.fiche-seance { text-decoration: none; }
.fiche-seance__meta { display: block; margin-top: 6px; font-size: 13.5px; color: var(--craie-2); }

/* --- Bibliothèque --- */

.bibli__entete { margin-bottom: 40px; }
.bibli__entete .planches__intro { margin-top: 20px; }

.bibli__outils { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; }
.bibli__sourate { flex: 0 1 340px; display: grid; gap: 8px; }

.select {
  width: 100%;
  height: 50px;
  padding: 0 44px 0 18px;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--rayon-pilule);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B4E55' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center / 16px;
  color: var(--encre);
  font: inherit;
  font-size: 15px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.select:focus { outline: none; border-color: var(--orange); }

.filtre__choix--resume svg { width: 16px; height: 16px; color: var(--orange-texte); }
.filtre__choix--resume.is-active svg { color: var(--fond); }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 56px; }

.pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--rayon-pilule);
  color: inherit;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.pagination .page-numbers.current { border-color: var(--encre); background: var(--encre); color: var(--fond); }
.pagination .page-numbers.dots { border-color: transparent; }
.pagination svg { width: 18px; height: 18px; }

.vide { padding: 40px 28px; border: 1px dashed var(--ligne-forte); border-radius: var(--rayon-l); text-align: center; }
.vide__titre { font-size: 22px; font-weight: 400; color: var(--encre); }
.vide p:not(.vide__titre) { color: var(--encre-2); }
.vide__suites { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; }

/* --- Fil d'Ariane --- */

.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 28px; font-size: 14px; color: var(--encre-3); }
.fil a { color: inherit; text-decoration: none; }
.fil a:hover { color: var(--encre); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }

/* --- Une séance --- */

.seance { padding-block: 32px 96px; }

@media (min-width: 1024px) {
  .seance { padding-block: 48px 128px; }
}

.seance__entete { max-width: 980px; }
.seance__infos { margin-bottom: 16px; }
.seance__titre { font-size: clamp(36px, 5vw, 68px); font-weight: 300; line-height: 1; letter-spacing: -.02em; text-wrap: balance; }
.seance__titre--ar { font-family: var(--police-ar); line-height: 1.6; letter-spacing: 0; }
.seance__ar { margin: 14px 0 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 300; line-height: 1.7; color: var(--encre-2); text-align: left; }
.seance__chapeau { max-width: 64ch; margin: 22px 0 0; font-size: clamp(18px, 1.6vw, 21px); font-weight: 300; line-height: 1.6; color: var(--encre-2); }
.seance__avec { margin: 12px 0 0; font-size: 15px; color: var(--encre-3); }

.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px 0 6px;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--rayon-pilule);
  background: var(--surface);
  color: inherit;
  font-size: 14px;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out);
}

.etiquette:hover { border-color: var(--encre); }

.etiquette__n {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: var(--rayon-pilule);
  background: var(--orange-doux);
  color: var(--orange-texte);
  font-size: 12px;
  font-weight: 500;
}

.etiquette [lang="ar"] { color: var(--encre-3); }
.etiquette--theme { padding-left: 14px; }

.seance__haut { display: grid; gap: 24px; margin-top: 40px; }

@media (min-width: 1024px) {
  .seance__haut { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: 32px; }
}

/* Le lecteur : l'image de la vidéo, puis YouTube au clic */
/* L'emplacement garde la place ; le lecteur s'y pose, ou s'en détache en petit lecteur flottant */
.lecteur-yt__place {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--rayon-l);
  background: #0E0F12;
}

.lecteur-yt__absent {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 24px;
  color: var(--craie-2);
  font-size: 15px;
  text-align: center;
}

.lecteur-yt {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--rayon-l);
  background: #0E0F12;
  view-transition-name: seance-media;
}

/* Le petit lecteur flottant : la vidéo continue pendant qu'on lit le résumé */
.lecteur-yt.is-flottant {
  position: fixed;
  inset: auto 24px max(24px, env(safe-area-inset-bottom)) auto;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 48px));
  border-radius: var(--rayon-m);
  box-shadow: 0 0 0 1px rgba(244, 239, 231, .08), 0 18px 50px rgba(14, 15, 18, .38);
  animation: flotte-in 280ms var(--ease-out) both;
}

.lecteur-yt.is-flottant iframe,
.lecteur-yt.is-flottant .lecteur-yt__cadre { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 9; }

@keyframes flotte-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }

.lecteur-yt__barre { display: none; }

.lecteur-yt.is-flottant .lecteur-yt__barre {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 14px;
  background: #17181C;
  color: var(--craie);
}

.lecteur-yt__barre-titre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lecteur-yt__barre button {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out);
}

.lecteur-yt__barre button:hover { background: rgba(244, 239, 231, .12); }
.lecteur-yt__barre svg { width: 18px; height: 18px; }

@media (max-width: 599px) {
  .lecteur-yt.is-flottant {
    inset: auto 12px max(12px, env(safe-area-inset-bottom)) auto;
    width: min(64vw, 280px);
  }
  .lecteur-yt__barre-titre { display: none; }
  .lecteur-yt.is-flottant .lecteur-yt__barre { justify-content: flex-end; padding: 2px 4px; }
}

.lecteur-yt__image { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }

.lecteur-yt__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  width: 100%;
  padding: 0;
  border: 0;
  background: linear-gradient(180deg, rgba(14, 15, 18, 0) 35%, rgba(14, 15, 18, .55));
  color: #F7F3EC;
  cursor: pointer;
}

.lecteur-yt__rond {
  display: block;
  width: clamp(76px, 8vw, 108px);
  height: clamp(76px, 8vw, 108px);
  transition: transform var(--t-base) var(--ease-out);
}

.lecteur-yt__rond .jouer { width: 100%; height: 100%; filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .35)); }
.lecteur-yt__texte { padding: 6px 14px; border-radius: var(--rayon-pilule); background: rgba(23, 24, 28, .72); font-size: 14px; font-weight: 500; }
.lecteur-yt:hover .lecteur-yt__image { transform: scale(1.03); }
.lecteur-yt:hover .lecteur-yt__rond { transform: scale(1.06); }
.lecteur-yt iframe,
.lecteur-yt__cadre { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.seance__media .lecteur__reprise { margin-top: 12px; }

/* L'essentiel, à côté de la vidéo */
.seance__essentiel { padding: 24px 24px 28px; border: 1px solid var(--ligne); border-radius: var(--rayon-l); background: var(--surface); }

.langues {
  display: inline-flex;
  margin-bottom: 20px;
  padding: 4px;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--rayon-pilule);
  background: var(--fond);
}

.langues__choix {
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--rayon-pilule);
  background: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.langues__choix[aria-pressed="true"] { background: var(--encre); color: var(--fond); }
.langues__choix[lang="ar"] { font-family: var(--police-ar); }

.essentiel .label { margin-bottom: 16px; }
.essentiel__liste { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: point; }

.essentiel__liste li {
  position: relative;
  padding-left: 40px;
  font-size: 17px;
  line-height: 1.55;
  counter-increment: point;
}

.essentiel__liste li::before {
  content: counter(point, decimal-leading-zero);
  position: absolute;
  top: 3px;
  left: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--orange-texte);
  font-variant-numeric: tabular-nums;
}

.essentiel[dir="rtl"] .label { font-family: var(--police-ar); font-size: 14px; letter-spacing: 0; text-transform: none; }
.essentiel[dir="rtl"] .essentiel__liste li { padding: 0 40px 0 0; font-family: var(--police-ar); line-height: 1.9; }
.essentiel[dir="rtl"] .essentiel__liste li::before { content: counter(point, arabic-indic); right: 0; left: auto; font-size: 15px; }
.essentiel--attente p { color: var(--encre-2); }

/* Une langue à la fois */
.seance[data-langue="fr"] [data-langue-bloc="ar"],
.seance[data-langue="ar"] [data-langue-bloc="fr"] { display: none; }

.seance__bloc { margin-top: 72px; }
.seance__soustitre { margin-bottom: 24px; font-size: clamp(26px, 2.6vw, 36px); font-weight: 300; letter-spacing: -.015em; }

/* Les versets de la séance */
.versets { display: grid; gap: 16px; }

@media (min-width: 900px) {
  .versets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.versets__item { padding: 26px 28px 22px; border-radius: var(--rayon-l); background: var(--sable); }
.versets__item .verse__ar { font-size: clamp(24px, 2.2vw, 30px); }
.versets__item .label a { color: inherit; text-decoration-color: var(--orange); text-underline-offset: 3px; }

/* Le résumé en images */
.diapos__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 18px;
}

.diapos__tete .seance__soustitre { margin: 0; }
.diapos__outils { display: flex; align-items: center; gap: 8px; }
.diapos__compte { margin-right: 6px; font-size: 14px; color: var(--encre-3); font-variant-numeric: tabular-nums; }

.diapos__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ligne-forte);
  border-radius: 50%;
  background: var(--surface);
  color: var(--encre);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}

.diapos__btn:hover { border-color: var(--encre); }
.diapos__btn svg { width: 20px; height: 20px; }

.diapos__piste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--rayon-l);
}

.diapos__piste::-webkit-scrollbar { display: none; }
.diapos__piste:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.diapos__diapo { scroll-snap-align: center; }

.diapos__image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-l);
  background: var(--surface);
}

@media (max-width: 767px) {
  .diapos__piste { grid-auto-columns: 90%; gap: 12px; }
}

/* En grand */
.plein-ecran {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0E0F12;
  color: #F7F3EC;
}

.plein-ecran::backdrop { background: #0E0F12; }

.plein-ecran__fermer {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(247, 243, 236, .12);
  color: inherit;
  cursor: pointer;
}

.plein-ecran__fermer svg { width: 22px; height: 22px; }
.plein-ecran__corps { height: 100%; }
.plein-ecran__corps .diapos__piste { height: 100%; grid-auto-columns: 100%; gap: 0; border-radius: 0; }
.plein-ecran__corps .diapos__diapo { display: grid; place-items: center; height: 100%; padding: 64px 16px; }
.plein-ecran__corps .diapos__image { width: auto; max-width: 100%; max-height: 100%; border: 0; border-radius: 8px; background: none; }

/* Le résumé complet */
.prose { max-width: 70ch; font-size: 17px; line-height: 1.75; color: var(--encre-2); }
.prose p,
.prose ul,
.prose ol { margin: 0 0 1em; }
.prose strong { color: var(--encre); font-weight: 500; }
.prose h2,
.prose h3 { margin: 1.6em 0 .6em; color: var(--encre); font-weight: 400; line-height: 1.3; }
.prose--ar { max-width: 72ch; font-family: var(--police-ar); font-size: 18px; line-height: 2; }

/* À télécharger */
.documents { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

@media (min-width: 900px) {
  .documents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.document {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icone nom action" "icone meta action";
  align-items: center;
  column-gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-m);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out);
}

.document:hover { border-color: var(--encre); }

.document__icone {
  grid-area: icone;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--orange-doux);
  color: var(--orange-texte);
}

.document__icone svg,
.document__action svg { width: 22px; height: 22px; }
.document__nom { grid-area: nom; font-weight: 500; }
.document__meta { grid-area: meta; font-size: 14px; color: var(--encre-3); }
.document__action { grid-area: action; color: var(--encre-2); }

/* Partager */
.partage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding: 28px 30px;
  border-radius: var(--rayon-l);
  background: var(--sable);
}

.partage__texte { max-width: 52ch; margin: 0; color: var(--encre-2); }
.partage__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Séances ou sourates voisines */
.voisines { display: grid; gap: 16px; margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--ligne); }

.voisine {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-m);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out);
}

.voisine:hover { border-color: var(--encre); }
.voisine .label { display: inline-flex; align-items: center; gap: 8px; }
.voisine .label svg { width: 15px; height: 15px; }
.voisine__titre { font-size: 18px; line-height: 1.35; }

@media (min-width: 768px) {
  .voisines { grid-template-columns: 1fr 1fr; }
  .voisine--suiv { grid-column: 2; justify-items: end; text-align: right; }
}

/* --- Page d'une sourate --- */

.sourate-page__entete { max-width: 980px; }
.sourate-page__noms { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 40px; margin-top: 14px; }
.sourate-page__fr { font-size: clamp(48px, 7vw, 104px); font-weight: 300; line-height: 1; letter-spacing: -.025em; }
.sourate-page__ar { margin: 0; font-size: clamp(34px, 4vw, 56px); font-weight: 300; line-height: 1.5; }
.sourate-page__lire { margin-top: 24px; }

.sourate-page__plan { margin: 56px 0 0; padding: 24px; border: 1px solid var(--ligne); border-radius: var(--rayon-l); background: var(--surface); }
.sourate-page__plan img { width: 100%; height: auto; }
.sourate-page__plan figcaption { margin-top: 14px; color: var(--encre-2); }
.sourate-page__seances { margin-top: 64px; }

.regle--clair { margin-top: 28px; }
.regle--clair .regle__corps { color: var(--encre-3); }

.regle--clair .regle__ligne {
  background:
    linear-gradient(rgba(23, 24, 28, .3), rgba(23, 24, 28, .3)) center / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(23, 24, 28, .22) 0 1px, transparent 1px 8.85%);
}

.regle--clair .regle__repere { background: var(--orange); box-shadow: 0 0 0 4px var(--orange-doux); }
.regle--clair .regle__n { color: var(--orange-texte); }
.regle--clair.is-debut .regle__borne:first-child,
.regle--clair.is-fin .regle__borne:last-child { color: var(--orange-texte); }

/* --- Pied de page --- */

.pied__note { margin-top: 6px !important; font-size: 14px; color: var(--encre-3); }

@media (min-width: 900px) {
  .pied__grille--sans-contact { grid-template-columns: 2fr 1fr 1fr; }
}

/* --- Transitions entre les pages : la vignette s'ouvre en lecteur, à travers l'arche --- */

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 240ms; }

::view-transition-group(seance-media) { animation-duration: 520ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
::view-transition-new(seance-media) { animation: arche-ouvre 520ms cubic-bezier(.22, 1, .36, 1) both; }
::view-transition-old(seance-media) { animation: fade 260ms var(--ease-out) reverse both; }

@keyframes arche-ouvre {
  from { clip-path: inset(0 round 999px 999px 24px 24px); }
  to { clip-path: inset(0 round 24px); }
}

/* ==========================================================================
   Apparitions au défilement (titres et blocs, jamais les versets)
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}

.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Mouvement réduit : tout est dessiné d'emblée
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .construction *,
  .hero__arche,
  .planche.is-entering,
  .sourate-detail.is-in,
  .lecteur[open],
  .lecteur[open]::backdrop { animation: none !important; }

  .c-compass { opacity: 0; }
  .vie__direct .vie__pastille { animation: none !important; }
  .site-header { transition: none; }
  .lecteur-yt.is-flottant { animation: none; }
  .burger__trait,
  .burger__point { transition: none; }
  .is-en-direct .prochain__badge::before,
  .pastille-direct__point { animation: none !important; }
  .regle__piste { transition: none; }

  .js [data-reveal],
  .js [data-reveal] .legende__fig rect,
  .js [data-reveal] [class*="coupe__"] {
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }

  .planche article,
  .planche__miniature,
  .direct__image img,
  .btn { transition: none; }
}