/*
  Site public de Louh.

  Palette reprise telle quelle de l'app (src/constants/brand.ts), et Karla en
  texte courant comme dans l'app (src/lib/fonts.ts).

  Titrage en Amiri, comme l'app (src/lib/fonts.ts). C'est le latin de la famille
  dont vient la police coranique affichée dans les captures : titrer dans la même
  écriture fait tenir la page ensemble, là où une troisième famille l'aurait
  éparpillée entre Karla, Amiri Quran et elle.

  Thème CLAIR verrouillé, conformément à la direction validée. L'app a un mode
  sombre ; la page d'accueil n'en a pas, pour que la première impression soit
  toujours celle du mushaf, papier clair et encre verte.
*/

:root {
  color-scheme: light;

  /* Identité, identique à Brand dans src/constants/brand.ts */
  --pine: #102e2c;
  --gold: #c09540;
  --parchment: #e9d5a9;
  --cream: #f3e7cf;
  --paper: #fbf7ee;
  --line: #e8e1d1;
  --wood: #8a6544;
  --wood-soft: #f6edde;
  --card: #ffffff;

  /* Neutres tirés vers le chaud, jamais un gris pur */
  --ink: var(--pine);
  --ink-soft: #55605c;
  --ink-faint: #8a938f;

  /* Largeur de lecture. 34 rem donnaient une colonne trop étroite pour la
     page : le texte s'arrêtait aux deux tiers et laissait un vide qui se
     lisait comme un défaut de mise en page. 42 rem font environ 75 signes,
     la limite haute de ce qui reste confortable à lire. */
  /* L'ombre des captures, sortie en variable parce qu'elle était recopiée à
     l'identique à quatre endroits. Ce n'est pas un effet décoratif : elle dit
     « ceci est un objet posé sur le papier », par opposition au texte qui EST
     le papier. D'où sa portée, volontairement étroite : les captures et les
     cartes de prix, et rien d'autre. Posée sur un bloc de texte elle ne
     signifierait plus rien, et n'ajouterait qu'un flou gris.

     Teinte pin plutôt que noire, et étalement négatif : l'ombre reste sous
     l'objet au lieu de baver autour, et se lit sur le papier crème comme une
     ombre portée, pas comme un halo. */
  --lift: 0 1.5rem 3rem -1.5rem rgba(16, 46, 44, 0.28);
  --lift-high: 0 2rem 4rem -1.75rem rgba(16, 46, 44, 0.34);

  /* Le parchemin à deux doses, pour les objets clairs posés sur la page : la
     carte de la formule gratuite (--leaf-1), les marches et l'encart des sons
     (--leaf-2). Une même couleur diluée se lit comme une famille, là où deux
     teintes choisies séparément se seraient lues comme deux décisions.

     Le blanc pur n'y figure pas : c'était la seule valeur froide de la page,
     dans une palette dont l'en-tête de ce fichier dit qu'aucun neutre ne doit
     être gris. La carte gratuite se lit blanche sans l'être. */
  --leaf-1: color-mix(in srgb, var(--cream) 10%, #fff);
  --leaf-2: color-mix(in srgb, var(--cream) 45%, #fff);

  /* L'or de la marque ne passe pas le contraste en petit corps : 2,7:1 sur
     blanc. Cette version assombrie sert aux mentions de petite taille ; --gold
     reste pour les aplats et le grand corps.

     La valeur est calée sur le PARCHEMIN, pas sur le blanc. Le fond de la carte
     marquée est plus sombre que celui des deux autres, et un or réglé sur blanc
     y retombait à 3,91:1, sous le seuil. Mesuré à 5:1 sur parchemin. */
  --gold-ink: #7a5c20;

  --measure: 42rem;
  --rail: 4.5rem;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2: clamp(1.6rem, 1.35rem + 1.1vw, 2.3rem);
  --step-3: clamp(2.2rem, 1.6rem + 2.6vw, 4rem);
}

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

/* La coupe doit porter sur `html` AUSSI : posée sur `body` seul, le
   débordement du héros continuait d'élargir le document et ouvrait une barre
   de défilement horizontale sur du vide. */
html {
  overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Une ancre atterrissait pile contre le bord haut de la fenêtre, sans air. */
:target {
  scroll-margin-top: 2.5rem;
}

body {
  margin: 0;
  /* Le halo et le motif du héros débordent volontairement de la colonne
     (`inset: … -50vw …`) pour aller au bord de l'écran. Sans cette coupe, ce
     débordement ouvrait un défilement horizontal sur une zone vide.
     `clip` plutôt que `hidden` : il n'introduit pas de conteneur de
     défilement, et n'empêche donc pas `position: sticky` ailleurs. */
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: Karla, ui-sans-serif, system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: Amiri, Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0;
}

p {
  margin: 0;
  max-width: var(--measure);
}

/* Les marges sont mises à zéro plus haut et l'espacement confié aux
   conteneurs. Reste le flux normal d'une section, où un titre était collé au
   paragraphe qui le suit : on le rétablit ici, explicitement. */
h1 + p,
h2 + p,
h3 + p {
  margin-top: 0.9rem;
}

/* Deux paragraphes qui se suivent ont besoin d'un blanc entre eux.

   `p { margin: 0 }` oblige chaque endroit à poser la sienne, et l'oubli ne se
   voit pas au balisage : les trois derniers paragraphes de « Pourquoi Louh
   existe ? » étaient bien trois `<p>` distincts, mais se lisaient comme un seul
   pavé. La règle vaut donc par défaut, et non plus au cas par cas.

   Portée aux enfants DIRECTS d'une section : les paragraphes des cartes de prix
   ont un espacement dessiné, qu'une marge générale défferait. Et à spécificité
   supérieure, un style en ligne ou une classe (`.pivot`, `.lede`) garde la
   sienne : seuls les paragraphes sans habillage propre sont touchés. */
section > p + p {
  margin-top: 1.1rem;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* `height: auto` est indispensable : les images portent des attributs
   width/height (qui réservent la place et évitent les sauts de mise en page),
   et sans lui la hauteur reste figée à l'attribut pendant que la largeur
   s'adapte. L'image est alors étirée. */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Le rail : colonne vertébrale, reprise de l'écran Parcours ────────────
   Un filet vertical qui traverse la page, ponctué de rosaces là où une
   section commence. La page est un chemin, comme l'app en est un. */

.page {
  --pad: clamp(1.25rem, 5vw, 3rem);
  max-width: 68rem;
  margin: 0 auto;
  padding-inline: var(--pad);
  position: relative;
}

@media (min-width: 60rem) {
  .page {
    padding-left: calc(var(--pad) + var(--rail));
  }

  /* Le fil à parcourir, en creux. */
  .page::before,
  .page::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(var(--pad) + var(--rail) / 2 - 1px);
    width: 2px;
    pointer-events: none;
  }

  .page::before {
    bottom: 0;
    background: linear-gradient(
      to bottom,
      transparent,
      var(--line) 6rem,
      var(--line) calc(100% - 10rem),
      transparent
    );
  }

  /* Et le fil parcouru, en or. Sa hauteur suit le défilement : la page se
     remonte comme le parcours de l'app se remplit. */
  /* Hauteur pilotée par le script, en pourcentage du chemin réellement
     parcourable : arrivé en bas de page, le fil est plein. */
  .page::after {
    height: var(--travelled, 0%);
    background: linear-gradient(to bottom, transparent, var(--gold) 6rem, var(--gold));
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page::after {
    display: none;
  }
}

section {
  position: relative;
  /* Resserré : à 9vw, deux sections voisines laissaient jusqu'à 14 rem de vide
     entre elles sur grand écran, et la page se lisait par blocs isolés plutôt
     que comme un propos suivi. */
  padding-block: clamp(2rem, 3.8vw, 3.25rem);
}

/* Les titres de section n'avaient pas de taille propre et retombaient sur celle
   du navigateur : ils passaient inaperçus à côté de leur chapô. */
section > h2 {
  font-size: var(--step-2);
  /* 26ch bridaient le titre à 494 px sur 920 disponibles, et coupaient en deux
     des phrases qui tenaient sur une ligne : « On apprend par l'oreille, comme
     on l'a toujours fait. » en réclame 740, « Quinze sourates, sans payer ni
     créer de compte. » 677.

     48 rem sont mesurés sur le plus long des cinq, pas choisis au hasard. Le
     chapô en dessous s'arrête à 46 rem, ce qui aurait été le réglage naturel :
     il manquait quatre pixels. */
  max-width: 48rem;
}

section + section {
  border-top: 1px solid var(--line);
}

/* Rosace, marqueur de section.

   Le tracé et les DEUX ÉTATS sont ceux de `src/components/rosace.tsx` :
   l'étoile à seize branches et son disque central. Éteinte, elle a l'aspect
   d'une sourate encore à faire (étoile claire cerclée de bois, cœur bois
   clair) ; allumée, celui d'une sourate mémorisée (étoile or, cœur encre pin).

   Un masque monochrome ne pouvait pas rendre ce cercle : il faut deux formes
   et deux couleurs, donc du vrai SVG dans la page.  */
.node {
  display: none;
}

@media (min-width: 60rem) {
  .node {
    display: block;
    position: absolute;
    top: clamp(3.5rem, 9vw, 7rem);
    left: calc(-1 * var(--rail) / 2 - 1.05rem);
    width: 2.1rem;
    height: 2.1rem;
  }

  .rosace {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }

  /* À faire */
  .star {
    fill: var(--card);
    stroke: var(--wood);
    stroke-width: 28;
    stroke-linejoin: round;
    transition: fill 0.5s ease, stroke 0.5s ease;
  }
  .disc {
    fill: var(--wood-soft);
    stroke: var(--wood);
    stroke-width: 20;
    transition: fill 0.5s ease, stroke 0.5s ease;
  }

  /* Mémorisée */
  .node.lit .star {
    fill: var(--gold);
    stroke: var(--gold);
  }
  .node.lit .disc {
    fill: var(--pine);
    stroke: var(--gold);
  }
}

@media (prefers-reduced-motion: reduce) {
  .star {
    fill: var(--gold);
    stroke: var(--gold);
  }
  .disc {
    fill: var(--pine);
    stroke: var(--gold);
  }
}

/* ── Repères ─────────────────────────────────────────────────────────── */

.eyebrow {
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wood);
  margin: 0 0 1rem;
}

.lede {
  font-size: var(--step-1);
  color: var(--ink-soft);
  line-height: 1.5;
  /* Plus grand que le corps, donc moins de signes par ligne à largeur égale :
     il peut aller plus loin sans devenir pénible. */
  max-width: 46rem;
}

.small {
  font-size: var(--step--1);
  color: var(--ink-faint);
}

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

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  flex-wrap: wrap;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: Amiri, Georgia, serif;
  font-size: var(--step-1);
  text-decoration: none;
}

.wordmark img {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 22%;
}

.nav {
  display: flex;
  gap: 1.5rem;
  font-size: var(--step--1);
}

.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
}

.nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

/* ── Menu compact ─────────────────────────────────────────────────────────
   En dessous du point de bascule, les six liens ne tiennent plus sur une ligne :
   ils repassaient au-dessous du logotype, collés au bord, et n'étaient de toute
   façon accessibles qu'en haut de page. Ils se replient donc dans un panneau,
   et l'en-tête se fixe pour qu'on puisse changer de section de n'importe où.

   AMÉLIORATION PROGRESSIVE. Le bouton n'est montré que sous la classe
   « js-nav », posée par le script. Sans script il n'apparaît pas, le panneau
   n'est jamais masqué, et la barre reste celle d'avant : on peut toujours
   naviguer. Le repli ne dépend d'aucun script.

   MÊME POINT DE BASCULE QUE LES CARTES DE PRIX (46 rem). Deux seuils voisins
   mais différents feraient basculer la page en deux temps, ce qui se lit comme
   un défaut. */

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.85rem 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--step--1);
  cursor: pointer;
}

.nav-toggle:hover {
  color: var(--ink);
  border-color: var(--gold);
}

/* Le trait de focus doit rester visible : c'est le seul repère au clavier. */
.nav-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.nav-burger {
  position: relative;
  display: block;
  width: 1.05rem;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
}

.nav-burger::before,
.nav-burger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
}

.nav-burger::before {
  top: -5px;
}

.nav-burger::after {
  top: 5px;
}

/* Ouvert, le bouton devient une croix : le geste pour fermer est le même que
   celui pour ouvrir, au même endroit. */
.nav-toggle[aria-expanded="true"] .nav-burger {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-burger::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-burger::after {
  top: 0;
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: no-preference) {
  .nav-burger,
  .nav-burger::before,
  .nav-burger::after {
    transition: transform 0.18s ease, top 0.18s ease, background-color 0.18s ease;
  }
}

@media (max-width: 45.999rem) {
  /* L'en-tête se fixe en haut. Le fond n'est posé qu'une fois la page défilée :
     au repos, le halo du héros passe derrière l'en-tête, et un aplat opaque y
     dessinerait une bande visible en travers du dégradé.

     ⚠️ PORTÉE « js-nav », ET C'EST INDISPENSABLE. Les quatre pages légales
     partagent cette feuille, n'ont pas de script et n'ont que deux liens. Sans
     cette portée elles héritaient d'un en-tête fixe dont personne ne pose
     jamais le fond, et leur texte défilait au travers, illisible. La barre s'y
     fixe donc seulement là où il y a un menu à atteindre de n'importe où. */
  .js-nav .masthead {
    position: sticky;
    top: 0;
    z-index: 30;
    padding-block: 0.9rem;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
  }

  .js-nav .masthead.posee {
    background: var(--paper);
    box-shadow: 0 1px 0 var(--line);
  }

  @media (prefers-reduced-motion: no-preference) {
    .js-nav .masthead {
      transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }
  }

  /* Une ancre atterrissait sous l'en-tête fixe, donc sur le corps de la section
     au lieu de son titre. La marge de défilement doit couvrir sa hauteur. */
  .js-nav :target {
    scroll-margin-top: 5.25rem;
  }

  .js-nav .nav-toggle {
    display: inline-flex;
  }

  .js-nav .nav {
    position: absolute;
    top: calc(100% - 0.25rem);
    right: var(--pad);
    left: var(--pad);
    z-index: 5;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 0.35rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    box-shadow: var(--lift-high);
  }

  .js-nav .nav[data-ouvert] {
    display: flex;
  }

  /* Cible tactile d'au moins 44 px, et le soulignement or de la barre laisse
     place à un aplat : dans une liste, c'est la ligne entière qu'on vise. */
  .js-nav .nav a {
    padding: 0.7rem 0.85rem;
    border-radius: 0.6rem;
    border-bottom: 0;
  }

  .js-nav .nav a:hover,
  .js-nav .nav a:focus-visible {
    color: var(--ink);
    background: var(--wood-soft);
  }
}

/* ── Héro ────────────────────────────────────────────────────────────── */

.hero {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: start;
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
}

@media (min-width: 60rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) 17rem;
  }
}

.hero h1 {
  font-size: var(--step-3);
  margin-bottom: 1.25rem;
}

/* `line-height: 1` ne laisse pas la place aux signes portés : la damma monte
   au-dessus de la ligne et la queue du ḥāʾ descend en dessous, si bien que le
   mot chevauchait le titre. L'arabe vocalisé demande nettement plus d'interligne
   que le latin. */
.arabic {
  font-family: "Amiri Quran", Amiri, serif;
  color: var(--gold);
  direction: rtl;
  line-height: 1.55;
}

.hero .arabic {
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  margin-bottom: 0.75rem;
}

/* `direction: rtl` pousse le texte contre le bord droit du bloc. En
   inline-block le mot ne fait que sa largeur et suit l'alignement de la
   colonne, tout en gardant son sens de lecture. */
.hero .arabic {
  display: inline-block;
}

/* La capture n'est pas encadrée d'un faux téléphone : l'écran suffit, et un
   cadre dessiné vieillit mal. */
.shot {
  border-radius: 1.4rem;
  border: 1px solid var(--line);
  box-shadow: var(--lift);
  background: var(--card);
}

.shot-row {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-top: 3rem;
  max-width: 34rem;
}

/* ── Boutons ─────────────────────────────────────────────────────────── */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.btn-primary {
  background: var(--gold);
  color: var(--pine);
  font-weight: 700;
}

.btn-primary:hover {
  background: #ab8438;
}

.btn-ghost {
  border-color: var(--line);
  color: var(--ink-soft);
}

.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--ink);
}

.btn[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .btn:hover {
    transform: translateY(-1px);
  }
}

/* Badges de boutique : l'app n'est pas encore publiée, il n'y a donc rien à
   ouvrir. Un bouton grisé donne l'air d'une page cassée ; un repère assumé dit
   la même chose sans affaiblir le haut de page. */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--pine);
  border-radius: 999px;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  font-weight: 700;
}

.badge-note {
  display: inline-flex;
  align-items: center;
  font-size: var(--step--1);
  color: var(--wood);
}

/* ── Pages de texte (légal, support) ─────────────────────────────────── */

.prose {
  padding-block: clamp(2rem, 4vw, 3rem);
}

.prose h1 {
  font-size: var(--step-2);
  margin-bottom: 0.75rem;
}

.prose h2 {
  font-size: var(--step-1);
  margin: 2.75rem 0 0.75rem;
}

.prose h3 {
  font-size: var(--step-0);
  font-family: Karla, sans-serif;
  font-weight: 700;
  margin: 1.75rem 0 0.4rem;
}

.prose p,
.prose li {
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* Deux paragraphes qui se suivent ont besoin d'un blanc entre eux.

   `p { margin: 0 }` oblige chaque endroit à poser la sienne, et l'oubli ne se
   voit pas au balisage : les huit paires de paragraphes consécutifs des pages
   légales se lisaient comme un seul pavé, dont les deux temps de la clause de
   médiation. Un texte juridique est déjà pénible à lire, ce n'est pas la peine
   d'en souder les paragraphes. */
.prose p + p {
  margin-top: 1.1rem;
}

.prose ul {
  margin: 0.75rem 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.4rem;
}

.prose a {
  color: var(--wood);
  text-underline-offset: 3px;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: var(--step--1);
}

.prose th,
.prose td {
  text-align: left;
  padding: 0.6rem 0.8rem 0.6rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.prose th {
  font-weight: 700;
  color: var(--ink);
}

.table-wrap {
  overflow-x: auto;
}

/* Bloc à compléter avant mise en ligne : voyant, pas discret. */
.todo {
  border: 1px dashed var(--wood);
  background: color-mix(in srgb, var(--cream) 60%, transparent);
  border-radius: 0.6rem;
  padding: 1rem 1.2rem;
  margin: 1rem 0;
  font-size: var(--step--1);
  color: var(--wood);
}

.todo strong {
  color: var(--pine);
}

/* ── Pied de page ────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem 3.5rem;
  display: grid;
  gap: 1.25rem;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: var(--step--1);
}

.site-footer a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.site-footer a:hover {
  border-bottom-color: var(--gold);
}

/* ── Apparition au défilement ──────────────────────────────────────────
   Tout est VISIBLE par défaut. C'est le script qui masque, après s'être
   annoncé par la classe `js` sur la racine. Masquer d'abord et révéler
   ensuite laisse une page blanche dès que le script tarde, échoue ou ne
   s'exécute pas : un contenu ne doit jamais dépendre d'une animation pour
   être lu. */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .js .reveal.seen {
    opacity: 1;
    transform: none;
  }
}

/* ── Profondeur ──────────────────────────────────────────────────────────
   Une page d'un seul ton reste plate quelle que soit la typographie. La
   profondeur vient d'écarts de valeur entre les plans, pas d'ombres portées
   sur tout. Trois plans : le papier, la crème, et le parchemin de la marque. */

.hero {
  isolation: isolate;
}

/* Halo de parchemin derrière le héros : le regard se pose là avant de lire. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* ⚠️ SANS CECI, LE HALO AVALE LES CLICS DE L'EN-TÊTE. Il déborde de six rem
     vers le haut, donc par-dessus le menu. Son `z-index: -1` le place derrière
     le contenu du héros, mais `isolation: isolate` l'enferme dans le héros, qui
     est peint APRÈS l'en-tête : il se retrouve donc au-dessus des liens pour la
     souris. Le curseur ne changeait plus et les liens paraissaient être du
     texte. */
  pointer-events: none;
  inset: -6rem -50vw -4rem -50vw;
  background:
    radial-gradient(58% 70% at 68% 34%, color-mix(in srgb, var(--parchment) 62%, transparent), transparent 70%),
    radial-gradient(46% 60% at 8% 8%, color-mix(in srgb, var(--cream) 78%, transparent), transparent 72%);
}

/* ══ Mise en valeur du produit ═══════════════════════════════════════════
   Une page d'application doit MONTRER l'application. La première version la
   racontait : captures de 272 px enfermées dans une colonne de lecture, texte
   qui décrivait des fonctions. Ici les écrans occupent la place, et les
   sections sortent de la colonne quand le sujet le demande. */

/* Sortie de colonne : la section reprend toute la largeur utile. */
.bleed {
  margin-left: calc(-1 * var(--rail));
}

@media (max-width: 59.99rem) {
  .bleed {
    margin-left: 0;
  }
}

/* ── Héro : la tablette ──────────────────────────────────────────────────
   Le texte à gauche, l'objet à droite, et l'objet est un louh : la tablette de
   bois dont l'app porte le nom. Dessinée en CSS, sans image : elle reste nette
   à toutes les tailles et le verset y est du vrai texte, sélectionnable et lu
   par les lecteurs d'écran. */

.hero {
  grid-template-columns: 1fr;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 60rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
  }
}

.hero h1 {
  font-size: clamp(2.8rem, 7vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin-bottom: 1.4rem;
}

/* La phrase qui dit ce qu'est un louh, avant le titre : sans elle, « Ce qui
   revient reste » ne s'accroche à rien. En italique et dans le ton du bois,
   parce qu'elle raconte l'objet et non le produit. */
.hero-amorce {
  font-family: Amiri, Georgia, serif;
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--wood);
  max-width: 24rem;
  margin-bottom: 1.25rem;
}

.louh {
  margin: 0 auto;
  width: min(100%, 24rem);
  transform: rotate(-2deg);
  filter: drop-shadow(0 2.2rem 2.2rem rgba(60, 35, 15, 0.22));
}

/* Le cadre de noyer : l'arche en haut, comme les tablettes des écoles
   coraniques du Maghreb, et un bois sombre qui fait ressortir l'argile. */
.louh-cadre {
  --arche: 11rem;
  padding: 0.8rem;
  border-radius: var(--arche) var(--arche) 1.6rem 1.6rem / 9rem 9rem 1.6rem 1.6rem;
  background:
    repeating-linear-gradient(94deg, rgba(40, 22, 10, 0.18) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(86deg, rgba(255, 230, 190, 0.08) 0 2px, transparent 2px 23px),
    linear-gradient(160deg, #8a5b36 0%, #6b4226 55%, #5a361e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 220, 180, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

/* La face d'argile. Les traînées très pâles sont l'encre d'un passage déjà
   lavé : la tablette a servi, on y réécrit. Aucune n'est du texte. */
.louh-argile {
  position: relative;
  aspect-ratio: 4 / 5.2;
  border-radius: calc(var(--arche) - 0.8rem) calc(var(--arche) - 0.8rem) 1rem 1rem / 8.2rem 8.2rem 1rem 1rem;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.2rem;
  padding: 3.5rem clamp(1rem, 4vw, 1.75rem) 2rem;
  background:
    radial-gradient(38% 1.4% at 40% 21%, rgba(110, 72, 40, 0.13), transparent),
    radial-gradient(30% 1.2% at 62% 27%, rgba(110, 72, 40, 0.09), transparent),
    radial-gradient(42% 1.5% at 52% 72%, rgba(110, 72, 40, 0.11), transparent),
    radial-gradient(26% 1.1% at 34% 79%, rgba(110, 72, 40, 0.08), transparent),
    radial-gradient(70% 45% at 30% 25%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(60% 50% at 75% 80%, rgba(170, 130, 85, 0.18), transparent 70%),
    linear-gradient(175deg, #f4ead6 0%, #ead9ba 100%);
  box-shadow: inset 0 0 0 1px rgba(90, 54, 30, 0.25), inset 0 0.6rem 1.4rem rgba(90, 54, 30, 0.12);
}

/* L'étoile de la rosace de Louh, tracée au calame dans l'arche. */
.louh-ornement {
  position: absolute;
  top: 1.1rem;
  left: 50%;
  width: 2.6rem;
  height: 2.6rem;
  transform: translateX(-50%);
  fill: none;
  stroke: #9a6a2c;
  stroke-width: 26;
  stroke-linejoin: round;
  opacity: 0.85;
}

/* L'encre sépia du smagh. L'arabe vocalisé demande un grand interligne : la
   damma monte haut, la kasra et les boucles descendent bas. */
.louh-verset {
  font-family: "Amiri Quran", Amiri, serif;
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  line-height: 2;
  color: #3b2414;
  text-align: center;
  max-width: none;
}

.louh-verset .mot {
  display: inline-block;
}

.louh figcaption {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b4a2c;
}

@media (prefers-reduced-motion: reduce) {
  .louh {
    transform: none;
  }
}

/* ── La leçon jouable ────────────────────────────────────────────────────
   Une carte sombre, comme l'écran d'exercice de l'app : la lettre en papier,
   la voyelle en or. C'est le code couleur de la qaïda Nourania, que l'app suit. */

.lecon {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  max-width: 34rem;
  background: var(--pine);
  color: var(--cream);
  border-radius: 1.6rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  display: grid;
  gap: 1.25rem;
  box-shadow: var(--lift-high);
}

.lecon-tete {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--step--1);
  color: color-mix(in srgb, var(--cream) 78%, transparent);
  max-width: none;
}

.lecon-rang {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Chaque réponse est une syllabe dessinée (cf. le commentaire du SVG). */
.lecon-syllabe {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.lecon-syllabe text {
  font-family: "Amiri Quran", Amiri, serif;
  font-size: 118px;
}

.signe-complet {
  fill: var(--gold);
}

.signe-lettre {
  fill: var(--cream);
}

.lecon-choix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.lecon-choix button {
  padding: 0.25rem;
  color: var(--cream);
  background: color-mix(in srgb, var(--cream) 7%, var(--pine));
  border: 1.5px solid color-mix(in srgb, var(--cream) 30%, transparent);
  border-radius: 1.1rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.lecon-choix button:hover {
  border-color: var(--gold);
}

.lecon-choix button[data-etat="juste"] {
  background: #2f7a54;
  border-color: #2f7a54;
  color: #fff;
}

.lecon-choix button[data-etat="faux"] {
  border-color: #c4686b;
  background: color-mix(in srgb, #c4686b 18%, var(--pine));
}

.lecon-retour {
  min-height: 1.6em;
  font-size: var(--step--1);
  color: var(--parchment);
  max-width: none;
}

/* ── Les treize marches ──────────────────────────────────────────────────
   Un escalier et non une grille : chaque palier est plus haut que le
   précédent, et la dernière marche, la seule en encre, porte un verset entier.
   La numérotation dit un ordre réel ; ici elle est portée par la liste. */

.marches-titre {
  font-size: var(--step-2);
  margin-top: clamp(3rem, 7vw, 4.5rem);
  max-width: 34rem;
}

.marches {
  list-style: none;
  counter-reset: marche;
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marches li {
  counter-increment: marche;
  display: grid;
  gap: 0.25rem;
  justify-items: center;
  align-content: space-between;
  text-align: center;
  padding: 0.65rem 0.5rem 0.75rem;
  border: 1px solid #e3d6bc;
  border-radius: 0.9rem 0.9rem 0.3rem 0.3rem;
  background: var(--leaf-2);
}

.marches li::before {
  content: counter(marche);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}

.marche-ar {
  font-family: "Amiri Quran", Amiri, serif;
  font-size: 1.7rem;
  line-height: 2;
  color: #2b1a0e;
}

.marche-nom {
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--ink-soft);
}

.marches .marche-sommet {
  grid-column: 1 / -1;
  background: var(--pine);
  border-color: var(--pine);
}

.marche-sommet .marche-ar {
  color: var(--parchment);
  font-size: 1.9rem;
}

.marche-sommet .marche-nom,
.marches .marche-sommet::before {
  color: color-mix(in srgb, var(--cream) 75%, transparent);
}

/* Deux volées : six marches, un palier, puis les sept dernières. Treize
   colonnes sur une seule ligne laissaient moins de 60 px à chaque marche, trop
   peu pour un mot arabe vocalisé ; les marches se lisaient en confettis. */
@media (min-width: 46rem) {
  .marches {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: end;
    gap: 0.6rem 0.5rem;
  }

  .marches .marche-sommet {
    grid-column: auto;
  }

  .marches li:nth-child(7) {
    grid-column-start: 1;
  }

  /* La hauteur monte d'une marche à l'autre, d'une volée à la suivante. */
  .marches li {
    height: calc(7.5rem + var(--h, 0) * 0.55rem);
  }

  .marches li:nth-child(1) { --h: 0; }
  .marches li:nth-child(2) { --h: 1; }
  .marches li:nth-child(3) { --h: 2; }
  .marches li:nth-child(4) { --h: 3; }
  .marches li:nth-child(5) { --h: 4; }
  .marches li:nth-child(6) { --h: 5; }
  .marches li:nth-child(7) { --h: 6; }
  .marches li:nth-child(8) { --h: 7; }
  .marches li:nth-child(9) { --h: 8; }
  .marches li:nth-child(10) { --h: 9; }
  .marches li:nth-child(11) { --h: 10; }
  .marches li:nth-child(12) { --h: 11; }
  .marches li:nth-child(13) { --h: 12; }

  .marche-sommet .marche-ar {
    font-size: 1.35rem;
    line-height: 1.9;
  }
}

.marches-mesure {
  margin-top: 1.5rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.marches-mesure b {
  color: var(--gold-ink);
}

/* ── La courbe de l'oubli ────────────────────────────────────────────────── */

.courbe {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
}

.courbe svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.courbe-grille {
  stroke: #efe7d6;
  stroke-width: 1;
}

.courbe-axe {
  stroke: #d9cdb4;
  stroke-width: 1;
}

.courbe-sans {
  fill: none;
  stroke: #b9a182;
  stroke-width: 2.5;
  stroke-dasharray: 7 7;
}

.courbe-avec {
  fill: none;
  stroke: var(--gold);
  stroke-width: 4;
  stroke-linejoin: round;
}

.courbe-revision {
  fill: var(--pine);
  transform-box: fill-box;
  transform-origin: center;
}

.courbe-legende,
.courbe-axe-texte {
  font-family: Karla, ui-sans-serif, system-ui, sans-serif;
  fill: var(--wood);
}

.courbe-legende {
  font-size: 18px;
}

.courbe-legende-forte {
  font-weight: 700;
}

.courbe-axe-texte {
  font-size: 15px;
}

/* Sur téléphone, le dessin est réduit au tiers : les légendes, en unités du
   dessin, tombaient sous les 7 px. On les grossit d'autant. */
@media (max-width: 45.999rem) {
  .courbe-legende {
    font-size: 40px;
  }

  .courbe-axe-texte {
    font-size: 34px;
  }
}

.courbe figcaption {
  margin-top: 0.9rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* ── Les engagements ─────────────────────────────────────────────────────
   Une parole donnée se lit en liste : le titre à gauche, le détail à droite,
   un filet entre deux promesses. */

.engagements {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  border-top: 1px solid var(--line);
}

.engagements > div {
  display: grid;
  gap: 0.35rem 2rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 46rem) {
  .engagements > div {
    grid-template-columns: 14rem minmax(0, 1fr);
  }
}

.engagements dt {
  font-family: Amiri, Georgia, serif;
  font-size: var(--step-1);
  line-height: 1.3;
}

.engagements dd {
  margin: 0;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* ── Section encre ───────────────────────────────────────────────────────
   Le seul bloc sombre de la page. Il ne sert pas à décorer : c'est là que se
   trouve l'argument qu'aucun concurrent francophone ne peut copier, et le
   contraste lui donne le poids qu'un aplat clair de plus lui refuserait.
   L'or et l'arabe n'y sont jamais aussi justes que sur l'encre. */

/*
  Le bloc reste DANS la colonne, il ne déborde pas jusqu'au rail.

  Sorti en pleine largeur, son bord gauche tombait pile sur le fil de
  progression, qui semblait alors le traverser. Le rail est la colonne
  vertébrale de la page : rien ne doit s'asseoir dessus.
*/
.ink {
  position: relative;
  background: var(--pine);
  color: var(--cream);
  border-radius: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(2.5rem, 6vw, 5rem);
  margin-top: clamp(3rem, 8vw, 6rem);
  overflow: hidden;
}

.ink h2,
.ink h3 {
  color: var(--cream);
}

.ink p {
  color: color-mix(in srgb, var(--cream) 78%, transparent);
}

.ink .eyebrow {
  color: var(--gold);
}

/* `.small` est un gris moyen, calculé pour le fond papier. Sur l'encre il
   tombait juste au-dessus du seuil de lisibilité. */
.ink .small {
  color: color-mix(in srgb, var(--cream) 62%, transparent);
}

.ink .arabic {
  color: var(--gold);
}

.pair {
  display: grid;
  gap: 1.75rem;
  margin-top: 2.5rem;
}

@media (min-width: 40rem) {
  .pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pair h3 {
  font-size: var(--step-1);
}

/* Comme dans le héros : en inline-block, le mot ne fait que sa largeur et suit
   l'alignement de la colonne, tout en gardant son sens de lecture. En block, le
   `direction: rtl` le collait au bord droit du bloc. */
.pair .arabic {
  font-size: 1.9rem;
  line-height: 1.5;
  display: inline-block;
  margin-bottom: 0.45rem;
}

/* ── Vitrine à écran fixe ────────────────────────────────────────────────
   La bande défilante précédente coupait le dernier écran au bord du cadre,
   n'annonçait nulle part qu'elle défilait, et traitait sept captures de la
   même façon. Elle donnait une pellicule, pas une démonstration.

   Ici le téléphone reste en place pendant que le texte défile à côté, et
   l'écran change à chaque étape. Le mouvement suit la lecture au lieu de s'y
   ajouter, et chaque capture obtient toute la place et une seconde d'attention.

   Repli : sans script ou sur écran étroit, les captures s'enchaînent
   simplement sous leur texte. Rien ne dépend du dispositif. */

.showcase {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.moment + .moment {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.moment h3 {
  font-size: var(--step-1);
}

.moment .index {
  display: block;
  font-family: Amiri, Georgia, serif;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.stage {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  justify-items: center;
}

.stage img {
  border-radius: 1.3rem;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--lift-high);
  max-width: 17rem;
}

@media (min-width: 62rem) {
  .showcase {
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: clamp(3rem, 7vw, 6rem);
    align-items: start;
  }

  /* Le téléphone tient la position pendant que le texte défile à côté. */
  .stage {
    position: sticky;
    top: 14vh;
    height: 38rem;
    display: block;
  }

  .stage img {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    /* Fondu court : chaque capture tient environ 400 px de défilement, soit
       une à deux secondes. Un fondu long y mangerait un tiers du temps et
       ferait se chevaucher deux écrans pendant qu'on descend vite. */
    transition: opacity 0.32s ease, transform 0.32s ease;
  }

  /* Sans script, la première capture reste affichée : jamais de cadre vide. */
  .js .stage img {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }

  .js .stage img.on {
    opacity: 1;
    transform: none;
  }

  /* Chaque moment occupe assez de hauteur pour qu'on ait le temps de le lire
     avant que l'écran ne change. */
  .moment {
    min-height: 22rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .moment + .moment {
    margin-top: 0;
  }

  /* Course restante après le dernier moment.

     Sans elle, la quatrième capture s'affichait au moment précis où le bloc
     fixe atteignait le bas de son conteneur et se décollait : elle
     apparaissait un instant puis repartait vers le haut. Il faut du défilement
     APRÈS le déclenchement pour qu'on ait le temps de la voir. */
  /* Réserve de défilement AVANT le premier moment et APRÈS le dernier.

     Sans celle du haut, la première capture cédait la place dès que le second
     texte franchissait le seuil, c'est-à-dire alors que le bloc fixe finissait
     à peine d'entrer dans l'écran. Sans celle du bas, la dernière apparaissait
     au moment où le bloc se décollait. Les deux extrémités ont besoin de
     course, pas seulement la fin. */
  .showcase-steps {
    padding-top: clamp(10rem, 34vh, 20rem);
    padding-bottom: clamp(20rem, 62vh, 38rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage {
    position: static;
    height: auto;
    display: grid;
  }
  .stage img {
    position: static;
    opacity: 1;
    transform: none;
    max-width: 17rem;
  }
}


/* La phrase pivot de « Pourquoi Louh existe ». Trois mots après deux paragraphes
   de constat : ils portent le basculement, et une taille de corps ordinaire les
   ferait passer pour une ligne de plus. */
.pivot {
  font-family: Amiri, Georgia, serif;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  color: var(--ink);
  margin: 1.6rem 0;
}


/* Ce qui se perd s'écrit dans le ton du bois, ici comme dans le titre.

   La couleur n'appuie pas, elle SIGNIFIE : l'or nomme (« louh », les chiffres),
   le bois dit ce qui s'efface (« La perdre prend un mois », « perdues »). Un
   lecteur apprend ce code en deux sections sans y penser, et il ne tient que
   tant qu'on ne colore pas pour insister. */
.perdu {
  color: var(--wood);
}


/* Le seul hadith de la page, et il y est pour une raison précise : c'est le
   seul argument qui explique POURQUOI les lettres latines ne remplacent pas
   l'arabe. Le compte s'y fait lettre à lettre, et les lettres nommées sont
   alif, lām, mīm.

   Un filet, pas un cadre ; aucune ornementation, aucune enluminure. Le §2 du
   cahier des charges demande la sobriété, et une citation religieuse mise en
   vitrine se retourne contre celui qui la cite. Pour la même raison elle reste
   unique sur la page : répétée, elle ferait du sacré un argument de vente. */
.hadith {
  margin: clamp(2rem, 5vw, 3rem) 0;
  padding-left: clamp(1rem, 3vw, 1.75rem);
  border-left: 2px solid var(--gold);
  max-width: 46rem;
}

.hadith blockquote {
  margin: 0;
}

.hadith blockquote p {
  font-family: Amiri, Georgia, serif;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

/* La référence n'est pas un ornement : sans elle, la citation ne vaut rien et
   ne peut pas être vérifiée. Elle se lit donc, discrètement mais entièrement. */
.hadith figcaption {
  margin-top: 0.9rem;
  font-family: Karla, ui-sans-serif, system-ui, sans-serif;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}


/* ── Hafs et Warsh : le même verset, deux orthographes ────────────────────
   La police Warsh est celle de l'app (KFGQPC, reprise sans modification ;
   licence dans la police, cf. assets/fonts/README.md du dépôt). Le
   navigateur ne la télécharge que pour cette section. */

@font-face {
  font-family: "KFGQPC Warsh";
  src: url("assets/fonts/KFGQPC-Warsh.ttf") format("truetype");
  font-display: swap;
}

.specimen {
  margin-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
}

.specimen-ligne {
  margin: 0;
  display: grid;
  gap: 0.5rem 2rem;
  align-items: center;
  padding-block: clamp(1rem, 3vw, 1.5rem);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
}

@media (min-width: 46rem) {
  .specimen-ligne {
    grid-template-columns: 13rem minmax(0, 1fr);
  }
}

.specimen-ligne figcaption {
  display: grid;
  gap: 0.2rem;
}

.specimen-nom {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--cream);
  font-size: var(--step-0);
}

.specimen-nom .arabic {
  font-size: 1.6rem;
  line-height: 1.4;
}

.specimen-note {
  font-size: var(--step--1);
  color: color-mix(in srgb, var(--cream) 62%, transparent);
}

.specimen-verset {
  margin: 0;
  max-width: none;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  line-height: 1.9;
  color: var(--cream);
  text-align: right;
}

.specimen-hafs {
  font-family: "Amiri Quran", Amiri, serif;
}

.specimen-warsh {
  font-family: "KFGQPC Warsh", "Amiri Quran", serif;
}

.specimen-cle {
  color: var(--gold);
}

.specimen-legende {
  margin-top: 1.25rem;
}


/* ── Le prix : deux formules, rangée contre rangée ───────────────────────
   Deux cartes de même construction : ce que la formule ouvre (un seul grand
   chiffre), ce qu'elle contient, puis ce qu'elle coûte. Sur grand écran, les
   rangées s'alignent d'une carte à l'autre : le chiffre en face du chiffre, le
   prix en face du prix.

   Chaque carte porte l'arche du louh du héros, en filet d'or, avec l'étoile de
   la rosace à son sommet. C'est la seule ornementation de la section.

   Les deux formules formaient un seul bloc, moitié crème, moitié pin, avec
   deux tuiles de prix dans la moitié sombre et des dégradés en coin : retiré
   le 20 octobre 2026. Une rosace par sourate, 38 en tout, faisait compter au
   lieu de comprendre : retirée le 19 octobre 2026. */

.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* La rosace de la marque, en <symbol> (la signature de la lettre la reprend).
   Ses couleurs passent par des variables, seule façon de les faire varier
   d'une instance à l'autre d'un même <symbol>. */
.ros {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  --ros-etoile: var(--gold);
  --ros-coeur: var(--pine);
  --ros-trait: var(--gold);
}

.formules {
  margin-top: clamp(2rem, 5vw, 3rem);
  display: grid;
  gap: 1.25rem;
}

.formule {
  /* Assez haute pour qu'on reconnaisse l'arche, pas au point de repousser le
     chiffre loin sous le bord sur téléphone. */
  --arche: clamp(3.25rem, 2rem + 4vw, 5.25rem);
  position: relative;
  display: grid;
  align-content: start;
  row-gap: 1.75rem;
  padding: calc(var(--arche) + 0.6rem) clamp(1.75rem, 4vw, 2.75rem) clamp(1.75rem, 4vw, 2.75rem);
  border-radius: clamp(1.25rem, 2.5vw, 1.75rem);
}

@media (min-width: 52rem) {
  .formules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }

  /* Trois rangées partagées par les deux cartes : l'en-tête, la liste, les
     prix. La carte la plus courte garde son air en bas de rangée, et ses
     filets restent en face de ceux de sa voisine. */
  .formule {
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}

/* L'arche est un filet intérieur, pas une découpe de la carte : découpée, une
   carte claire à sommet arrondi évoque une stèle ; en filet, elle se lit comme
   une fenêtre, ou comme le cadre du louh. */
.formule::before {
  content: "";
  position: absolute;
  inset: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 50% 50% 1rem 1rem / var(--arche) var(--arche) 1rem 1rem;
  pointer-events: none;
}

/* L'étoile posée au sommet de l'arche, comme celle du louh du héros. */
.formule-sceau {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  width: 1.5rem;
  height: 1.5rem;
  translate: -50% -50%;
  --ros-etoile: var(--gold);
  --ros-trait: var(--gold);
  --ros-coeur: var(--leaf-1);
}

.formule-libre {
  background: var(--leaf-1);
  border: 1px solid var(--line);
  box-shadow: var(--lift);
}

.formule-abo {
  background: var(--pine);
  color: var(--cream);
  box-shadow: var(--lift-high);
}

.formule-abo::before {
  border-color: color-mix(in srgb, var(--gold) 60%, transparent);
}

.formule-abo .formule-sceau {
  --ros-coeur: var(--pine);
}

/* Le nom de la formule, en capitales espacées comme la légende du louh : il
   annonce, le chiffre parle. */
.formule-nom {
  font-family: Karla, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.formule-abo .formule-nom {
  color: var(--gold);
}

/* Le chiffre se lit avant tout le reste de la carte, prix compris : c'est ce
   que la formule ouvre. */
.formule-ouvre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5rem;
  margin-top: 1.1rem;
  font-family: Amiri, Georgia, serif;
  font-size: var(--step-2);
  line-height: 1;
  max-width: none;
}

/* Chiffres proportionnels : en tabulaire, le « 1 » de 15 prend la chasse d'un
   « 5 » et le nombre se lit « 1 5 ». */
.formule-nombre {
  font-size: clamp(4.2rem, 3.2rem + 3.2vw, 5.6rem);
  line-height: 0.8;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums proportional-nums;
}

.formule-plus {
  font-size: 0.5em;
  vertical-align: 0.45em;
  margin-right: 0.04em;
}

.formule-abo .formule-ouvre {
  color: var(--parchment);
}

.formule-abo .formule-nombre {
  color: var(--gold);
}

/* Les bornes du parcours, dites en phrase : quatre noms de sourates posés
   sous une frise ne se comprenaient pas. */
.formule-portee {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.55;
  max-width: 32ch;
  color: var(--ink-soft);
}

.formule-abo .formule-portee {
  color: color-mix(in srgb, var(--cream) 78%, transparent);
}

/* Un nom de sourate ne se coupe pas à son trait d'union (« An- / Naba »). */
.formule-portee .nom {
  white-space: nowrap;
}

.formule-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  align-content: start;
  font-size: 1rem;
  line-height: 1.5;
}

.formule-abo .formule-liste {
  color: color-mix(in srgb, var(--cream) 88%, transparent);
}

.formule-liste li {
  display: grid;
  grid-template-columns: 0.85rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
}

/* Une petite étoile en guise de puce : le motif de la marque, pas une coche. */
.formule-liste li::before,
.promesses li::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  background: var(--gold);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

/* ── Les prix, au point de conduite ──────────────────────────────────────
   Comme dans une table des matières : la durée à gauche, le montant à
   droite, une rangée de points entre les deux. Les montants s'alignent sur le
   même bord, et leur précision tient sur la ligne du dessous. */

.tarifs {
  margin: 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 1.15rem;
  align-content: start;
}

.formule-abo .tarifs {
  border-top-color: color-mix(in srgb, var(--cream) 16%, transparent);
}

.tarif {
  display: grid;
  grid-template-columns: auto minmax(1.25rem, 1fr) auto;
  align-items: baseline;
  column-gap: 0.7rem;
}

/* Les points : une boîte vide, alignée sur la ligne de base de la durée et du
   montant, dont le motif pose une rangée de points à son pied. */
.tarif::before {
  content: "";
  grid-row: 1;
  grid-column: 2;
  height: 0.3rem;
  background: radial-gradient(circle, currentColor 0 0.07rem, transparent 0.09rem) left bottom / 0.42rem 0.3rem repeat-x;
  opacity: 0.4;
}

.tarif dt {
  grid-row: 1;
  grid-column: 1;
  font-size: 1rem;
}

.tarif dd {
  margin: 0;
}

.tarif .tarif-montant {
  grid-row: 1;
  grid-column: 3;
  font-family: Amiri, Georgia, serif;
  font-size: clamp(1.75rem, 1.45rem + 1vw, 2.15rem);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: lining-nums;
}

.tarif .tarif-note {
  grid-column: 1 / -1;
  margin-top: 0.3rem;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--ink-soft);
}

.formule-abo .tarif-note {
  color: color-mix(in srgb, var(--cream) 66%, transparent);
}

/* L'année : la formule que l'app propose en premier. L'or le dit, sans
   étiquette de remise. */
.tarif-annee .tarif-montant {
  color: var(--gold);
}

/* ── Famille ─────────────────────────────────────────────────────────────
   La troisième carte, sur toute la largeur, dans le ton de l'argile du louh :
   le papier pour le gratuit, l'encre pour l'abonnement, l'argile pour le
   foyer. Sur grand écran, le chiffre à gauche et le prix en face, de part et
   d'autre d'un filet. */

.formule-famille {
  background: var(--cream);
  box-shadow: var(--lift);
}

.formule-famille::before {
  border-color: color-mix(in srgb, var(--gold) 60%, transparent);
}

.formule-famille .formule-sceau {
  --ros-coeur: var(--cream);
}

.formule-famille .formule-portee {
  max-width: 44ch;
}

.formule-famille .tarifs {
  border-top-color: var(--parchment);
}

/* L'or de la marque passe sous le seuil de contraste sur l'argile : le
   montant et sa précision prennent l'or assombri, calé sur ce fond. */
.formule-famille .tarif-montant,
.formule-famille .tarif-note {
  color: var(--gold-ink);
}

/* Le prix d'une place est l'argument de la formule : il se lit en gras. */
.formule-famille .tarif-note {
  font-weight: 700;
}

@media (min-width: 52rem) {
  .formule-famille {
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 21rem);
    column-gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }

  .formule-famille .tarifs {
    padding-top: 0;
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
    border-top: 0;
    border-left: 1px solid var(--parchment);
  }
}

/* Les engagements, en une ligne : ce ne sont pas des avantages vendus, ce
   sont des règles. */
.promesses {
  list-style: none;
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.25rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.promesses li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.promesses li::before {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
}

/* ── Pourquoi Louh existe : une lettre ───────────────────────────────────
   Mise en page de livre : l'accroche en grand, puis trois temps, chacun avec
   son intertitre dans la marge. Sur téléphone, l'intertitre repasse au-dessus
   de son texte. */

.histoire-accroche {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  font-family: Amiri, Georgia, serif;
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  line-height: 1.3;
  max-width: 40rem;
  text-wrap: pretty;
}

/* L'encre qui part au lavage. Le ton le plus clair garde 3,4:1 sur le papier :
   le mot reste lisible jusqu'au bout. */
.efface {
  background: linear-gradient(90deg, var(--wood) 20%, color-mix(in srgb, var(--wood) 58%, var(--paper)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.histoire {
  margin-top: clamp(2rem, 5vw, 3rem);
  display: grid;
  gap: clamp(2rem, 5vw, 2.75rem);
}

.histoire-temps {
  display: grid;
  gap: 0.75rem 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

@media (min-width: 52rem) {
  .histoire-temps {
    grid-template-columns: 11rem minmax(0, 1fr);
  }
}

.histoire-marge {
  font-family: Amiri, Georgia, serif;
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.3;
  color: var(--wood);
}

.histoire-texte {
  display: grid;
  gap: 1.1rem;
  min-width: 0;
}

.histoire-texte .pivot {
  margin: 0.4rem 0 0;
  color: var(--gold-ink);
}

/* Un exemple dans la marge du raisonnement : deux lettres, un même « h ». */
.sons {
  margin: 0.25rem 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: var(--leaf-2);
  border: 1px solid var(--line);
  max-width: 34rem;
}

.sons-paire {
  display: flex;
  gap: 0.5rem;
  max-width: none;
}

.sons-paire svg {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 0.8rem;
  background: var(--card);
  border: 1px solid var(--line);
}

/* Amiri et non Amiri Quran : ce sont deux lettres isolées, pas un verset. */
.sons-paire text {
  font-family: Amiri, "Amiri Quran", serif;
  font-size: 64px;
  fill: var(--ink);
}

.sons-paire svg:first-child text {
  fill: var(--gold-ink);
}

.sons figcaption {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-soft);
}

.histoire-signature {
  margin-top: clamp(2rem, 5vw, 2.75rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: Amiri, Georgia, serif;
  font-style: italic;
  font-size: var(--step-1);
  color: var(--wood);
}

.histoire-signature .ros {
  width: 1.6rem;
}

@media (min-width: 52rem) {
  .histoire-signature {
    margin-left: 13.5rem;
  }
}

/* ── Commence par Al-Fatiha ──────────────────────────────────────────────
   Le texte à gauche, Al-Fatiha à droite, dans le cadre doré qui l'ouvre
   dans les muṣḥafs. Deux filets d'or, une étoile du rub el hizb à chaque
   coin, le nom de la sourate dans un cartouche. */

.fatiha-grille {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

@media (min-width: 60rem) {
  .fatiha-grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  }
}

.fatiha-texte h2 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.05;
}

.fatiha-page {
  position: relative;
  margin: 0;
  padding: clamp(2.25rem, 6vw, 3rem) clamp(1.5rem, 5vw, 2.5rem) clamp(1.75rem, 5vw, 2.25rem);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, 0.7), transparent 70%),
    linear-gradient(180deg, #fbf3e2, #f3e6c9);
  border: 2px solid var(--gold);
  outline: 1px solid var(--gold);
  outline-offset: 6px;
  border-radius: 0.4rem;
  box-shadow: 0 2rem 3.5rem -2rem rgba(60, 35, 15, 0.45);
  display: grid;
  justify-items: center;
  gap: 1rem;
}

.fatiha-page .coin {
  position: absolute;
  width: 1.7rem;
  height: 1.7rem;
  fill: var(--paper);
  stroke: var(--gold);
  stroke-width: 5;
}

.fatiha-page .coin:nth-of-type(1) { top: -0.85rem; left: -0.85rem; }
.fatiha-page .coin:nth-of-type(2) { top: -0.85rem; right: -0.85rem; }
.fatiha-page .coin:nth-of-type(3) { bottom: -0.85rem; left: -0.85rem; }
.fatiha-page .coin:nth-of-type(4) { bottom: -0.85rem; right: -0.85rem; }

.fatiha-titre {
  font-family: "Amiri Quran", Amiri, serif;
  font-size: 1.35rem;
  line-height: 2.1;
  /* La kasra finale descend sous la ligne : de la place en bas. */
  padding: 0 1.6rem 0.35rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--gold-ink);
  max-width: none;
}

.fatiha-versets {
  font-family: "Amiri Quran", Amiri, serif;
  font-size: clamp(1.35rem, 3.6vw, 1.75rem);
  line-height: 2.35;
  color: #2b1a0e;
  text-align: center;
  max-width: none;
}

/* Le numéro de verset, entre deux versets : un double cercle d'or, comme dans
   le muṣḥaf. Il est posé à côté du texte, jamais dedans. */
.ayah {
  display: inline-grid;
  place-items: center;
  width: 1.45em;
  height: 1.45em;
  margin-inline: 0.35em;
  vertical-align: 0.05em;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 0 2px #f8eedb, 0 0 0 3px color-mix(in srgb, var(--gold) 70%, transparent);
  font-family: Amiri, Georgia, serif;
  font-size: 0.62em;
  line-height: 1;
  color: var(--gold-ink);
}

.fatiha-page figcaption {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wood);
}