/* =========================================================
   Islam pas a pas - feuille de style unique
   Charte famille : nuit #0b1a0f / foret #1b4332 / or #c9a84c / creme #fdfaf3
   Mobile d'abord (base = 375px), puis elargissement.
   ========================================================= */

:root {
  /* Palette officielle de l'empire */
  --nuit:      #0b1a0f;
  --foret:     #1b4332;
  --or:        #c9a84c;
  --or-clair:  #e8d5a3;
  --creme:     #fdfaf3;

  /* Neutres derives, teintes vert (jamais un gris pur) */
  --surface-1: #102a19;
  --surface-2: #16351f;
  --texte-2:   #93a894;
  /* Etait #6c8271 : mesure a 3,71 de contraste sur la surface des cartes, pour
     4,5 exiges. Eclairci a teinte et saturation identiques — meme famille, la
     charte n'est pas touchee, et la hierarchie avec --texte-2 tient toujours.
     Mohamed lit dehors sur un telephone : une couleur juste au seuil dans
     l'atelier devient illisible au soleil. */
  --texte-3:   #7c9281;
  --trait:     rgba(201, 168, 76, 0.16);
  --trait-fort:rgba(201, 168, 76, 0.34);

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --arabe: 'Scheherazade New', 'Geeza Pro', 'Traditional Arabic', serif;

  --r:      18px;
  --r-petit:13px;
  --large:  680px;

  /* Motif geometrique de la famille */
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23c9a84c' stroke-width='1.2'%3E%3Cpath d='M40 0l40 40-40 40L0 40z'/%3E%3Cpath d='M40 16l24 24-24 24-24-24z'/%3E%3Ccircle cx='40' cy='40' r='9'/%3E%3C/g%3E%3C/svg%3E");
}

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

/* Nos classes posent display:flex ; sans ceci, l'attribut hidden ne cacherait rien. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.22;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a { color: var(--or); }

img, svg { display: block; }

button { font: inherit; }

:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; border-radius: 4px; }

.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--or); color: #16240f;
  padding: 14px 18px; border-radius: 0 0 12px 0; font-weight: 700; z-index: 50;
}
.saut-contenu:focus { left: 0; top: 0; }

/* Lu, mais pas vu.

   Une page de lecon se joue carte par carte : son titre visible appartient a la
   premiere carte et disparait des qu'on avance. Le <h1> qui repond « de quoi
   parle cette page » doit, lui, rester — pour un lecteur d'ecran comme pour
   Google. Il est donc pose en haut de <main> et masque a l'oeil seulement.

   Surtout PAS `hidden` ni `display: none` : les deux retirent l'element de
   l'arbre d'accessibilite, et le titre ne servirait plus a personne. C'etait le
   cas d'`al-fatiha`, seule lecon a en avoir un — et il etait `hidden`, avec une
   classe qui n'existait meme pas dans ce fichier. */
.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- structure ---------- */

.page {
  max-width: var(--large);
  margin: 0 auto;
  padding: 0 20px;
}

.contenu {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 26px 0 40px;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or);
  font-weight: 700;
}

.titre-bloc {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-3);
  font-weight: 700;
}

.bloc { display: flex; flex-direction: column; gap: 13px; }

/* ---------- barre du haut ---------- */

.barre {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--trait);
}

/* min-height : c'est le retour a l'accueil, present sur toutes les pages hors
   lecon. Mesure a 414 px : 20 px de haut, soit la moitie de ce qu'un doigt
   atteint sans viser. La charte demande 56 px pour un bouton ; 44 est le
   minimum tenable pour un lien, et il ne coute rien ici — la barre a deja sa
   hauteur, seule la zone cliquable manquait. */
.marque {
  display: flex; align-items: center; gap: 9px;
  min-height: 44px;
  text-decoration: none; color: var(--creme);
  font-family: var(--serif); font-size: 19px; font-weight: 600;
  line-height: 1;
}
.marque .etoile { color: var(--or); flex: 0 0 auto; }

.barre .droite { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* 40 px mesures : deux pixels de trop peu, et c'est la commande d'a cote du
   retour a l'accueil. On monte la zone, pas le texte. */
.jeton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px;
  background: rgba(201, 168, 76, 0.13);
  border: 1px solid var(--trait-fort);
  color: var(--or-clair);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 14px; font-weight: 600;
  white-space: nowrap;
}

/* ---------- accueil ---------- */

.salut { display: flex; flex-direction: column; gap: 6px; }
.salut .date {
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--texte-3); font-weight: 700;
}
/* La salutation garde exactement son apparence, mais ce n'est plus le titre de
   la page : « Bonsoir » ne dit pas de quoi parle l'accueil, et le vrai titre
   etait masque avec le corps pendant les trois questions d'accueil — la
   premiere visite du site n'en annoncait donc aucun. */
.salut h1, .salut .salut-mot {
  font-size: 32px;
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
}

/* L'anneau du jour et la serie : une seule ligne, en haut de l'accueil. */
.jour-etat {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px;
  background: linear-gradient(100deg, rgba(201,168,76,0.11), rgba(201,168,76,0.02));
  border: 1px solid var(--trait);
  border-radius: var(--r-petit);
  transition: border-color 0.3s ease, background 0.3s ease;
}
/* Ferme : la bordure se reveille. Discretement — c'est une satisfaction, pas
   une decoration. */
.jour-etat.ferme {
  border-color: var(--trait-fort);
  background: linear-gradient(100deg, rgba(201,168,76,0.17), rgba(201,168,76,0.04));
}
.jour-etat .anneau { flex: 0 0 auto; width: 64px; height: 64px; }
.jour-etat .anneau svg { display: block; }
.jour-etat .anneau circle { transition: stroke-dasharray 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.jour-mots { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.objectif-txt {
  margin: 0; font-size: 15px; line-height: 1.35;
  color: var(--or-clair); font-weight: 600;
}
.jour-etat.ferme .objectif-txt { color: var(--or); }
.serie-txt {
  margin: 0; font-size: 14px; line-height: 1.35;
  color: var(--texte-3);
  font-variant-numeric: tabular-nums;
}

/* Le mot sur la grace : il apparait apres coup, jamais comme un avertissement. */
.grace-mot {
  margin: 0;
  padding: 12px 15px;
  border-left: 2px solid var(--or);
  background: rgba(201,168,76,0.06);
  border-radius: 0 var(--r-petit) var(--r-petit) 0;
  color: var(--or-clair);
  font-size: 14px; line-height: 1.55;
}

.carte-jour {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r);
  padding: 24px 20px 20px;
  display: flex; flex-direction: column; gap: 16px;
}
.carte-jour::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--motif); background-size: 88px 88px;
  opacity: 0.05; pointer-events: none;
}
.carte-jour > * { position: relative; z-index: 1; }
.carte-jour h2 { font-size: 27px; }

.meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 14px; color: var(--texte-2);
}
.meta > span { white-space: nowrap; }
.puce { width: 3px; height: 3px; border-radius: 50%; background: var(--texte-3); flex: 0 0 auto; }

/* ---------- boutons (>= 56px, charte) ---------- */

.btn {
  appearance: none; border: 0; cursor: pointer;
  min-height: 60px;
  padding: 16px 22px;
  border-radius: 14px;
  background: var(--or);
  color: #16240f;
  font-family: var(--sans);
  font-size: 17px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s ease, transform 0.16s ease;
}
.btn:hover { background: var(--or-clair); }
.btn:active { transform: scale(0.985); }

.btn.fantome {
  background: transparent; color: var(--or);
  border: 1px solid var(--trait-fort);
}
.btn.fantome:hover { background: rgba(201, 168, 76, 0.1); }

.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--or); }

/* ---------- listes de cartes ---------- */

.liste { display: flex; flex-direction: column; gap: 10px; }

.ligne {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface-1);
  border: 1px solid var(--trait);
  border-radius: var(--r-petit);
  padding: 15px 16px;
  min-height: 58px;
  width: 100%;
  text-align: left;
  text-decoration: none;
  color: var(--creme);
  font-family: var(--sans);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.ligne:hover { border-color: var(--trait-fort); }
.ligne .etoile { flex: 0 0 auto; color: var(--or); }
.ligne .t { font-size: 16px; line-height: 1.35; display: block; }
.ligne .s { font-size: 14px; color: var(--texte-3); display: block; }
.ligne .fl { margin-left: auto; color: var(--or); font-size: 20px; flex: 0 0 auto; }

.ligne.inerte { cursor: default; opacity: 0.62; }
.ligne.inerte:hover { border-color: var(--trait); }
.ligne.inerte .etoile { color: var(--texte-3); }

.vide {
  background: var(--surface-1);
  border: 1px dashed var(--trait-fort);
  border-radius: var(--r-petit);
  padding: 18px 16px;
  color: var(--texte-2);
  font-size: 16px;
  line-height: 1.5;
}

/* ---------- bas de l'accueil ----------
   L'accueil ne montre qu'une carte et un bouton. Ce qui suit est volontairement
   petit et discret : c'est la sortie de secours, pas une deuxieme proposition. */

.rappel-jour { color: var(--texte-3); }
.rappel-jour a { color: var(--or); text-decoration: underline; text-underline-offset: 3px; }

a.lien-bas {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-bottom: 1px solid var(--trait-fort);
}
a.lien-bas:hover { color: var(--creme); }

.signature { padding-top: 4px; }
.signature em { color: var(--texte-2); font-style: italic; }

/* ---------- lecon ---------- */

.lecon-haut {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  background: rgba(11, 26, 15, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--trait);
}
.quitter {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  color: var(--texte-3); font-size: 26px; line-height: 1;
  width: 56px; height: 56px; margin-left: -16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  flex: 0 0 auto;
}
.quitter:hover { color: var(--creme); }
.points { display: flex; gap: 6px; flex: 1; }
.pt { height: 4px; flex: 1; border-radius: 2px; background: rgba(253, 250, 243, 0.13); transition: background 0.35s ease; }
.pt.faite { background: var(--or); }

.etapes { display: flex; flex-direction: column; gap: 24px; padding: 22px 0 0; }

/* Sans JS : toutes les etapes s'affichent a la suite (contenu lisible et indexable).
   Avec JS : la classe .pilote est posee et une seule etape est visible a la fois. */
.pilote .etape { display: none; }
.pilote .etape.actif { display: flex; }
.etape { display: flex; flex-direction: column; gap: 20px; }
.pilote .etape.actif { animation: monte 0.42s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes monte {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.ar {
  font-family: var(--arabe);
  font-size: 34px;
  line-height: 2;
  text-align: right;
  direction: rtl;
  color: var(--creme);
  margin: 0;
}

/* La prononciation en lettres latines.
   ELLE ETAIT LE PLUS PETIT TEXTE DE LA CARTE : 15px, gris pale, en italique —
   traitee comme une note de bas de page. C'est l'inverse de ce qu'il faut : la
   majorite des visiteurs ne lit pas l'arabe, et c'est donc CETTE ligne qu'ils
   utilisent pour reciter a voix haute. Elle passe a 21px, en couleur lisible, et
   sans italique (l'italique gene la lecture de mots qu'on ne connait pas).
   Ne pas la rapetisser a nouveau. */
.phon {
  font-size: 21px;
  color: var(--or-clair);
  line-height: 1.45;
  margin: 10px 0 0;
}

.etiquette {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--texte-3); font-weight: 700;
  display: block; margin-bottom: 8px;
}

.sens {
  font-family: var(--serif);
  font-size: 23px; line-height: 1.45;
  color: var(--or-clair);
  margin: 0;
}

.clair { font-size: 18px; line-height: 1.65; color: var(--creme); margin: 0; }

.source {
  background: var(--surface-1);
  border-left: 2px solid var(--or);
  border-radius: 0 var(--r-petit) var(--r-petit) 0;
  padding: 14px 16px;
}
.source .lab {
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--or); font-weight: 700; display: block; margin-bottom: 4px;
}
.source .val { font-size: 16px; color: var(--creme); line-height: 1.5; display: block; }

.prudence {
  font-size: 14px; line-height: 1.55; color: var(--texte-2);
  background: rgba(27, 67, 50, 0.4);
  border: 1px solid var(--trait);
  border-radius: var(--r-petit);
  padding: 13px 15px;
  margin: 0;
}

.retenir {
  background: linear-gradient(155deg, rgba(201, 168, 76, 0.15), rgba(201, 168, 76, 0.03));
  border: 1px solid var(--trait-fort);
  border-radius: var(--r);
  padding: 26px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
}
.retenir .q { font-family: var(--serif); font-size: 24px; line-height: 1.35; margin: 0; }
.retenir .r { font-size: 17px; line-height: 1.45; color: var(--or-clair); margin: 0; }

.fin { align-items: center; text-align: center; gap: 18px; padding: 20px 0; }
.fin h2 { font-size: 32px; }
.fin p { color: var(--texte-2); max-width: 32ch; }
.fin p.suite { color: var(--or-clair); font-weight: 600; }
.fin p.suite:empty { display: none; }

/* Le seul lien sortant place dans le contenu, et il l'est apres les deux
   boutons : la lecon qui suit et le rendez-vous quotidien passent devant, c'est
   eux qui servent la seule mesure du site. Mais il est LISIBLE — 16 px, et le
   lien dans l'or des liens de contenu, pas dans le gris du pied de page ou un
   lien ne se clique pas. */
.fin p.apres-lecon {
  margin: 6px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--trait);
  width: 100%;
  max-width: 36ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--texte-2);
}
/* Le lien prend sa propre ligne et une hauteur de cible reelle : mesure a
   414 px, un lien pose dans le fil du texte ne faisait que 19 px de haut. Un
   lien qu'on rate au doigt n'est pas mieux place qu'un lien de pied de page. */
.fin p.apres-lecon a {
  display: block;
  margin: 8px auto 0;
  padding: 13px 10px;
  color: var(--or);
  font-weight: 600;
  text-underline-offset: 3px;
}
/* La mise en garde garde la MEME taille que le reste : c'est la phrase la plus
   importante des deux, elle ne doit jamais devenir la plus petite. */
.fin p.apres-lecon .al-note { display: block; margin-top: 4px; color: var(--texte-3); }

/* La barre du bas reste collee en bas de l'ecran pendant qu'on lit la carte, et
   du texte passe donc derriere elle quand on defile : c'est normal.

   Ce qui n'est PAS normal, c'est qu'une ligne reste a MOITIE visible juste
   au-dessus du bouton dore — de loin, ca ressemble a un texte casse, et c'est ce
   que Mohamed a vu sur son telephone (Safari reduit la hauteur utile a environ
   690px, donc une ligne tombait pile a cette limite).

   Le remede : le fond devient opaque TRES VITE (16px), ce qui laisse une bande
   pleine d'au moins 30px — plus haute qu'une ligne de texte — avant le bouton.
   Une ligne qui approche disparait donc franchement au lieu d'etre tranchee.
   Longueur en pixels et non en pourcentage : le voile ne doit pas dependre de la
   hauteur de la barre. */
.bas-lecon {
  padding: 46px 0 8px;
  position: sticky;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(11, 26, 15, 0) 0, var(--nuit) 16px);
}

/* ---------- chemin ---------- */

.compteur { display: flex; flex-direction: column; gap: 6px; }
.compteur .gros { font-family: var(--serif); font-size: 56px; line-height: 1; color: var(--or); }
.compteur .leg { font-size: 16px; color: var(--texte-2); line-height: 1.45; }

.mois-cadre {
  background: var(--surface-1);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  padding: 16px 14px;
}
.jours-sem {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
  margin-bottom: 10px;
}
.jours-sem span {
  text-align: center; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; color: var(--texte-3); text-transform: uppercase;
}
.mois { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.jour { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; }
.jour.vide-case { visibility: hidden; }

/* ---------- pied de page ---------- */

.pied {
  border-top: 1px solid var(--trait);
  margin-top: 8px;
  padding: 30px 0 40px;
  display: flex; flex-direction: column; gap: 22px;
}
.pied .t {
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--texte-3); font-weight: 700;
}
.freres { display: grid; grid-template-columns: 1fr; gap: 10px; }
.freres a {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  min-height: 56px; padding: 14px 16px;
  background: var(--surface-1);
  border: 1px solid var(--trait);
  border-radius: var(--r-petit);
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.freres a:hover { border-color: var(--trait-fort); }
.freres .d { color: var(--or); font-size: 16px; font-weight: 600; }
.freres .q { color: var(--texte-3); font-size: 14px; }

.note-pied { color: var(--texte-3); font-size: 14px; line-height: 1.6; margin: 0; }
.note-pied a { color: var(--texte-2); }

/* ---------- ecrans plus larges ---------- */

@media (min-width: 620px) {
  .salut h1, .salut .salut-mot { font-size: 38px; }
  .carte-jour { padding: 30px 26px 24px; }
  .carte-jour h2 { font-size: 32px; }
  .freres { grid-template-columns: 1fr 1fr; }
  .btn { width: auto; align-self: flex-start; min-width: 260px; }
  .ar { font-size: 38px; }
  .compteur .gros { font-size: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- les trois questions d'accueil ---------- */

.accueil-corps { display: flex; flex-direction: column; gap: 32px; }

.diag {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 6px 0 0;
}

.diag-haut { display: flex; flex-direction: column; gap: 12px; }
.diag-haut .points { max-width: 130px; }

.diag-intro {
  color: var(--texte-2);
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
  max-width: 40ch;
}

/* Une question a la fois. */
.q-etape { display: none; flex-direction: column; gap: 20px; }
.q-etape.actif { display: flex; animation: monte 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.q-etape h2 { font-size: 29px; }

.choix { display: flex; flex-direction: column; gap: 10px; }

/* Aucune reponse n'est "la bonne" : les trois options ont exactement le meme
   poids visuel, pour que personne ne se sente juge en cliquant. */
.opt {
  appearance: none;
  cursor: pointer;
  min-height: 64px;
  padding: 18px 20px;
  text-align: left;
  background: var(--surface-1);
  border: 1px solid var(--trait);
  border-radius: var(--r-petit);
  color: var(--creme);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.35;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.opt:hover { border-color: var(--trait-fort); background: var(--surface-2); }
.opt:active { transform: scale(0.99); }

.q-fin {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  animation: monte 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.q-fin h2 { font-size: 30px; }
.q-fin .clair { max-width: 44ch; }
.q-fin .btn { text-align: center; }

.lien-discret {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  align-self: flex-start;
  min-height: 56px;
  padding: 0;
  color: var(--texte-3);
  font-family: var(--sans);
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.lien-discret:hover { color: var(--texte-2); }

.note-niveau {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--texte-2);
}

/* Rappel du point de depart, sur la page "Mon chemin". */
.niveau-carte {
  background: var(--surface-1);
  border: 1px solid var(--trait);
  border-radius: var(--r-petit);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.niveau-carte dl { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.niveau-carte .ligne-n { display: flex; gap: 12px; align-items: baseline; font-size: 16px; }
.niveau-carte dt { color: var(--texte-3); }
.niveau-carte dd { margin: 0; margin-left: auto; text-align: right; color: var(--creme); }

/* ---------- prononciation : syllabes et lettres difficiles ---------- */

/* Chaque syllabe dans sa propre puce : l'oeil decoupe le mot sans effort. */
.syl {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  line-height: 1;
}
.syl > span {
  background: var(--surface-1);
  border: 1px solid var(--trait);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 19px;
  white-space: nowrap;
}

/* Une lettre qui n'existe pas en francais, ou qui trompe le lecteur francais. */
.dur {
  color: var(--or);
  font-weight: 700;
  border-bottom: 2px solid var(--or);
}

/* La legende des lettres. */
.lettres { margin: 0; display: flex; flex-direction: column; gap: 12px; }

.lettre {
  background: var(--surface-1);
  border: 1px solid var(--trait);
  border-radius: var(--r-petit);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.lettre dt {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 19px;
  font-weight: 600;
}
.lettre dt em { color: var(--texte-2); font-size: 16px; font-weight: 400; }
.lettre dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--texte-2); }

.ar-petit {
  font-family: var(--arabe);
  font-size: 26px;
  line-height: 1;
  color: var(--creme);
}

@media (min-width: 620px) {
  .syl > span { font-size: 21px; }
}

/* ---------- le rendez-vous quotidien ---------- */

.rdv {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--texte-2);
}
/* Le seul cas ou l'on hausse le ton : c'est maintenant. */
.rdv.cest-maintenant {
  color: var(--or);
  font-weight: 600;
}

.moment-zone { display: flex; flex-direction: column; }

.rdv-choix {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  background: var(--surface-1);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  padding: 22px 18px;
}
.rdv-choix h3 { font-size: 24px; }
.rdv-choix .clair { font-size: 17px; }
.rdv-choix .prudence { margin: 0; }

/* ---------- la page "Tous les parcours" ---------- */

.compte-offre { display: flex; flex-direction: column; }

.chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ch {
  flex: 1 1 100px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--surface-1);
  border: 1px solid var(--trait);
  border-radius: var(--r-petit);
  padding: 15px 14px;
}
.ch .n {
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1;
  color: var(--or);
  font-variant-numeric: tabular-nums;
}
.ch .l { font-size: 13px; line-height: 1.35; color: var(--texte-3); }

.famille {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 8px;
  border-top: 1px solid var(--trait);
}
.famille > h2 { font-size: 27px; }
.famille-quoi { color: var(--texte-3); font-size: 15px; margin: -8px 0 0; }

/* Un parcours du programme. Ouvert = borde d'or ; en preparation = sobre,
   mais toujours lisible : ce n'est pas une case grisee, c'est une promesse. */
.pcarte {
  background: var(--surface-1);
  border: 1px solid var(--trait);
  border-radius: var(--r-petit);
  padding: 17px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pcarte.ouvert { border-color: var(--trait-fort); background: var(--surface-2); }
/* Deja faite : on l'estompe un peu, sans jamais la barrer ni la fermer.
   Une lecon terminee se relit, et se revoit. */
.pcarte.faite h3, .pcarte.faite .pquoi { opacity: 0.62; }
.pcarte h3 { font-size: 20px; }
.pquoi { font-size: 16px; line-height: 1.5; color: var(--texte-2); margin: 0; }

.etiq-p {
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(253, 250, 243, 0.07);
  color: var(--texte-3);
}
/* Fond dore passe de 0,17 a 0,10 : la pastille etait a 4,32 de contraste sur la
   surface d'une carte, pour 4,5 exiges. On assombrit le fond plutot que
   d'eteindre le texte — l'or #c9a84c est une couleur de la charte, il reste. */
.etiq-p.ok { background: rgba(201, 168, 76, 0.10); color: var(--or); }

.pliens { display: flex; flex-direction: column; gap: 8px; }
.pliens:empty { display: none; }
.pliens .ligne { background: var(--nuit); }

/* ---------- le chemin ----------
   Six lecons sur un trajet plutot que dans une liste : meme contenu, effet
   inverse. Le trait se dore au fur et a mesure, l'etape en cours respire.

   Sans JavaScript, .trace n'est jamais posee : il ne reste qu'une pile de
   cartes, propre et lisible. Le trajet est une decoration, jamais le contenu. */

.chemin-vertical { display: flex; flex-direction: column; }
/* Avant le trace : des cartes simplement espacees. */
.chemin-vertical:not(.trace) { gap: 12px; }

/* Le retrait est le meme pour toutes les cartes : elles s'alignent, et c'est le
   trace qui serpente dans la gouttiere ainsi liberee. */
.chemin-vertical.trace .etape-chemin {
  position: relative;
  padding-left: 54px;
  border-radius: var(--r-petit);
}
/* Le segment vertical qui traverse l'etape, a son abscisse. */
.chemin-vertical.trace .etape-chemin::before {
  content: "";
  position: absolute;
  left: calc(var(--x) - 1px);
  top: 0; bottom: 0;
  width: 2px;
  background: rgba(253, 250, 243, 0.10);
}
.chemin-vertical.trace .etape-chemin.faite::before { background: var(--or); }
/* La premiere moitie du trait de l'etape en cours est deja parcourue. */
.chemin-vertical.trace .etape-chemin.encours::before {
  background: linear-gradient(var(--or) 0 50%, rgba(253, 250, 243, 0.10) 50% 100%);
}
/* Le trait ne doit pas depasser en haut de la premiere etape ni en bas de la
   derniere : un trajet a un debut et une fin. */
.chemin-vertical.trace .etape-chemin:first-child::before { top: 26px; }
.chemin-vertical.trace .etape-chemin:last-child::before { bottom: auto; height: 26px; }

.medaillon {
  position: absolute;
  top: 13px;
  left: calc(var(--x) - 13px);
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-1);
  border: 2px solid rgba(253, 250, 243, 0.12);
  box-sizing: border-box;
}
.etape-chemin.faite .medaillon { background: var(--or); border-color: var(--or); }
/* L'etape en cours : plus grande, centree sur la meme abscisse, et elle respire. */
.etape-chemin.encours .medaillon {
  background: var(--or);
  border-color: var(--or);
  width: 34px; height: 34px;
  top: 9px;
  left: calc(var(--x) - 17px);
  box-shadow: 0 0 0 5px rgba(201, 168, 76, 0.14);
  animation: respire 2.6s ease-in-out infinite;
}
@keyframes respire {
  0%, 100% { box-shadow: 0 0 0 5px rgba(201, 168, 76, 0.14); }
  50%      { box-shadow: 0 0 0 10px rgba(201, 168, 76, 0.05); }
}

/* Les courbes entre deux etapes. Hauteur fixe : le trace ne depend jamais de
   la hauteur d'une carte. Largeur fixe aussi : la courbe doit rester dans la
   gouttiere, pas s'etirer sur tout l'ecran. */
.pont { height: 34px; }
.pont svg { display: block; width: 60px; height: 34px; }
.pont path { stroke: rgba(253, 250, 243, 0.10); }
.pont.franchi path { stroke: var(--or); }

/* L'etape en cours est la plus grande, et la seule a porter la bordure doree.
   Ce qui est derriere s'estompe, ce qui vient attend sans crier. */
.chemin-vertical.trace .etape-chemin.encours {
  border-color: var(--trait-fort);
  background: linear-gradient(100deg, rgba(201,168,76,0.10), rgba(201,168,76,0.02));
}
.chemin-vertical.trace .etape-chemin.encours h3 { font-size: 23px; }
.chemin-vertical.trace .etape-chemin.faite h3,
.chemin-vertical.trace .etape-chemin.faite .pquoi { opacity: 0.6; }
.chemin-vertical.trace .etape-chemin.avenir { border-color: var(--trait); }
.chemin-vertical.trace .etape-chemin.avenir h3 { opacity: 0.82; }

/* Un ecran qui demande moins de mouvement n'en recoit aucun. */
@media (prefers-reduced-motion: reduce) {
  .etape-chemin.encours .medaillon { animation: none; }
}

@media (min-width: 620px) {
  .famille > h2 { font-size: 31px; }
  .ch .n { font-size: 31px; }
}

/* ---------- fiches de lettres (alphabet) ---------- */

.lettres-groupe { display: flex; flex-direction: column; gap: 10px; }

.lfiche {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface-1);
  border: 1px solid var(--trait);
  border-radius: var(--r-petit);
  padding: 14px 16px;
  min-height: 72px;
}

/* La lettre en grand, dans une case de largeur fixe : les noms s'alignent
   ainsi tous a la meme abscisse, meme quand le glyphe est large ou etroit. */
.gros-ar {
  font-family: var(--arabe);
  font-size: 46px;
  line-height: 1;
  color: var(--or);
  flex: 0 0 56px;
  text-align: center;
}

.linfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lnom {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}
.lson { font-size: 17px; line-height: 1.5; color: var(--texte-2); }
.lpoint {
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--texte-3);
  text-transform: uppercase;
  font-weight: 600;
}

@media (min-width: 620px) {
  .gros-ar { font-size: 54px; flex-basis: 66px; }
}

/* ---------- les 18 formes de base ----------
   La lecon affirmait « 18 formes » six fois et ne l'etayait que par un groupe de
   trois lettres : le nombre etait a croire, pas a verifier (mesure du cycle 32).
   Cette grille numerote les dix-huit dessins pour qu'on PUISSE les compter. Le
   numero n'est pas decoratif : c'est lui qui rend l'affirmation controlable. */

.formes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.formes li {
  background: var(--surface-1);
  border: 1px solid var(--trait);
  border-radius: var(--r-petit);
  padding: 9px 6px 7px;
  text-align: center;
}

.formes .fn {
  display: block;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--texte-3);
  font-weight: 600;
}

/* Les lettres d'une meme forme, cote a cote et dans le sens de l'arabe. */
.formes .fl {
  display: block;
  font-family: var(--arabe);
  font-size: 30px;
  line-height: 1.25;
  color: var(--or);
}

@media (min-width: 620px) {
  .formes { grid-template-columns: repeat(6, 1fr); }
}

/* ---------- l'index des 114 sourates ---------- */

/* Mesure a 414 px : la page fait 11 695 px, soit 16,9 ecrans de telephone.
   Sans ces douze liens, le seul chemin vers la 67e sourate etait le pouce —
   10,2 ecrans. Douze liens, du HTML pur : ils marchent sans JavaScript, ce
   qu'un champ de recherche ne ferait pas, et le clavier les parcourt dans
   l'ordre.
   48 px et non 56 : c'est un lien de navigation, pas un bouton d'action, et la
   barre du haut a deja pose ce precedent a 44 px. */
.dizaines {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 4px;
}

.dizaines a {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px;
  background: rgba(201, 168, 76, 0.10);
  border: 1px solid var(--trait-fort);
  border-radius: 11px;
  color: var(--or-clair);
  font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

/* Mesure a 21 px la premiere fois : la moitie de ce qu'un doigt atteint sans
   viser. Un lien seul dans un paragraphe n'herite d'aucune hauteur — il lui en
   faut une a lui. */
.retour-dizaines { margin: 0; }

.retour-dizaines a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: 8px 18px;
  background: rgba(201, 168, 76, 0.10);
  border: 1px solid var(--trait-fort);
  border-radius: 11px;
  color: var(--or-clair);
  font-size: 14px; font-weight: 600;
  text-decoration: none;
}

@media (min-width: 620px) {
  .dizaines { grid-template-columns: repeat(6, 1fr); }
  .dizaines a { font-size: 15px; }
}

.sourates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* La ligne visee ne doit pas coller au bord haut de l'ecran : on la pose a
   dix pixels du bord, sinon on ne voit pas qu'il y a quelque chose au-dessus. */
.srow[id] { scroll-margin-top: 10px; }

.srow {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  background: var(--surface-1);
  border: 1px solid var(--trait);
  border-radius: 11px;
  padding: 11px 13px;
  min-height: 56px;
}

.s-num {
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 700;
  color: var(--texte-3);
  text-align: right;
}

/* Le nom arabe et le nom transcrit partagent la colonne du milieu, l'arabe
   au-dessus : a 375px, les mettre cote a cote ecraserait les deux. */
.s-ar {
  grid-column: 2;
  font-family: var(--arabe);
  font-size: 25px;
  line-height: 1.35;
  color: var(--creme);
  text-align: right;
  direction: rtl;
}

.s-tr {
  grid-column: 2;
  font-size: 17px;
  line-height: 1.3;
  color: var(--or);
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  align-items: baseline;
}
.s-alt { font-size: 13px; color: var(--texte-3); font-weight: 400; }

/* 42 px mesures. Sur une liste de 114 lignes, le doigt vise mal : la zone
   passe a 44 px sans changer la taille du texte. */
.s-lien {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid var(--trait-fort);
  border-radius: 999px;
  padding: 9px 13px;
}
.s-lien:hover { background: rgba(201, 168, 76, 0.12); }

@media (min-width: 620px) {
  /* Assez de place pour aligner l'arabe et la transcription sur une ligne. */
  .srow { grid-template-columns: 44px 1fr 1fr auto; }
  .s-ar { grid-column: 2; text-align: right; }
  .s-tr { grid-column: 3; }
  .s-lien { grid-column: 4; grid-row: auto; }
}

/* ---------- listes de noms (prophetes) ---------- */

.noms-liste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
/* Avec une reference sous chaque nom, deux colonnes serrent trop a 375px. */
.noms-liste.large { grid-template-columns: 1fr; }

.nom-p {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface-1);
  border: 1px solid var(--trait);
  border-radius: 11px;
  padding: 11px 13px;
}
.np-ar {
  font-family: var(--arabe);
  font-size: 24px;
  line-height: 1.3;
  color: var(--creme);
  direction: rtl;
}
.np-fr { font-size: 17px; font-weight: 600; color: var(--or); line-height: 1.3; }
.np-ref { font-size: 13px; color: var(--texte-3); line-height: 1.35; }

@media (min-width: 620px) {
  .noms-liste { grid-template-columns: repeat(3, 1fr); }
  .noms-liste.large { grid-template-columns: 1fr 1fr; }
  .np-ar { font-size: 27px; }
}

/* ---------- le test de fin de lecon ---------- */

.q-choix { display: flex; flex-direction: column; gap: 10px; }

.q-opt {
  appearance: none;
  cursor: pointer;
  min-height: 64px;
  padding: 17px 19px;
  text-align: left;
  background: var(--surface-1);
  border: 1px solid var(--trait);
  border-radius: var(--r-petit);
  color: var(--creme);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.35;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.q-opt:hover:not(:disabled) { border-color: var(--trait-fort); background: var(--surface-2); }
.q-opt:disabled { cursor: default; }

/* La bonne reponse s'allume en or ; la mauvaise est marquee sans agressivite,
   d'un simple trait, jamais en rouge vif : on corrige, on ne punit pas. */
.q-opt.juste {
  border-color: var(--or);
  background: rgba(201, 168, 76, 0.15);
  color: var(--creme);
  font-weight: 600;
}
.q-opt.faux {
  border-color: rgba(253, 250, 243, 0.28);
  opacity: 0.72;
  text-decoration: line-through;
  text-decoration-color: rgba(253, 250, 243, 0.45);
}

.q-retour {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  border-left: 2px solid var(--trait-fort);
  padding-left: 14px;
}
.q-retour.ok { color: var(--or-clair); }
.q-retour.non { color: var(--texte-2); }

/* ---------- la question sans JavaScript ----------
   La regle du site : une lecon se lit d'un seul tenant sans JavaScript, et
   c'est ce que Google indexe. Une carte de question y etait pourtant trois
   boutons qui ne repondent pas, sans jamais montrer la bonne reponse : un
   mecanisme casse, pas du contenu. Ici elle redevient un document.

   `.pilote` est posee par app.js. Tout ce qui suit ne s'applique donc QUE
   lorsque le JavaScript n'a pas pris la main. */

/* Une option qu'on ne peut pas presser ne doit pas avoir l'air pressable. */
.etapes:not(.pilote) .q-opt {
  cursor: default;
  pointer-events: none;
  min-height: 0;
  padding: 12px 0 12px 26px;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 16px;
  color: var(--texte-2);
  position: relative;
}
.etapes:not(.pilote) .q-opt::before {
  content: '\2022';
  position: absolute;
  left: 6px;
  color: var(--texte-3);
}
/* La bonne reponse est dite, pas devinee. */
.etapes:not(.pilote) .q-opt[data-bonne] { color: var(--or-clair); font-weight: 600; }
.etapes:not(.pilote) .q-opt[data-bonne]::before { content: '\2713'; color: var(--or); }
.etapes:not(.pilote) .q-opt[data-bonne]::after {
  content: ' \2014 la bonne reponse';
  color: var(--texte-2);
  font-weight: 400;
}

/* Avec JavaScript, l'explication se cache jusqu'a la reponse : sinon elle
   donnerait la solution avant qu'on ait cherche. */
.etapes.pilote .q-retour:not(.repondu) { display: none; }

/* ---------- bouton d'ecoute (apparait seulement si un fichier existe) ---------- */

.ecouter {
  appearance: none;
  cursor: pointer;
  align-self: flex-start;
  margin-top: 10px;
  min-height: 56px;
  padding: 14px 20px;
  background: transparent;
  border: 1px solid var(--trait-fort);
  border-radius: 999px;
  color: var(--or);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.ecouter:hover { background: rgba(201, 168, 76, 0.12); }
/* En lecture : le bouton se remplit, pour qu'on voie d'un coup d'oeil que le
   son vient de la et comment l'arreter. */
.ecouter.joue {
  background: var(--or);
  border-color: var(--or);
  color: var(--nuit);
}

/* Ecouter et Repeter, cote a cote sous le verset. Ils passent a la ligne si la
   place manque : deux boutons de 56px ne doivent jamais deborder. */
.sons-verset { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; }
.sons-verset .ecouter { margin-top: 0; }
.repeter { border-style: dashed; }
.repeter.joue { border-style: solid; }

/* La consigne pendant la boucle : c'est elle qui dit quand se taire et quand
   parler. Assez grande pour se lire d'un coup d'oeil, le telephone a la main. */
.a-toi {
  margin: 11px 0 0;
  padding: 11px 14px;
  border-radius: var(--r-petit);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.a-toi.ecoute { background: rgba(253, 250, 243, 0.06); color: var(--texte-2); }
.a-toi.parle {
  background: rgba(201, 168, 76, 0.15);
  color: var(--or);
  border-left: 2px solid var(--or);
}

/* L'interrupteur du son, en pied de lecon. Visible, pas cache dans un menu :
   quelqu'un qui apprend dans une piece silencieuse doit pouvoir le couper
   sans chercher. */
.reglages {
  display: flex;
  justify-content: flex-start;
  padding-bottom: 4px;
}
.reglages .lien-discret { align-items: center; display: inline-flex; gap: 7px; }

/* Le diagnostic du son : visible seulement avec ?son=diag dans l'adresse.
   Il existe parce que l'atelier des agents ne peut joindre aucun hebergeur de
   recitation : c'est un telephone avec du vrai reseau qui doit repondre. */
.diag-son {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px dashed var(--trait-fort);
  border-radius: var(--r-petit);
  background: var(--surface-1);
}
.diag-titre {
  margin: 0 0 9px;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--or);
}
.diag-son ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.diag-son li { font-size: 14px; line-height: 1.45; color: var(--texte-2); }
.diag-son strong { color: var(--creme); }
.diag-note { margin: 11px 0 0; font-size: 13px; line-height: 1.5; color: var(--texte-3); }
.diag-note code { font-size: 12px; color: var(--or-clair); }

/* ---------- l'etagere ----------
   Ce qui s'accumule, nomme par ce que c'est : « 7 versets d'Al-Fatiha »,
   « 28 lettres de l'alphabet ». La memorisation est une collection par nature.
   On n'y ecrit JAMAIS « par coeur » : le site ne verifie pas la memorisation,
   et un compliment invente serait le premier mensonge du site. */
.etagere {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: var(--r-petit);
  overflow: hidden;
}
.rangee {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 16px;
  background: var(--surface-1);
}
.rangee .rn {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1;
  color: var(--or);
  font-variant-numeric: tabular-nums;
  min-width: 44px;
  text-align: right;
  flex: 0 0 auto;
}
.rangee .rl { font-size: 17px; line-height: 1.35; color: var(--creme); }
/* La voix : le seul chiffre qui compte un effort de la bouche, pas une page
   tournee. On le distingue sans le survendre. */
.rangee.voix { background: rgba(201, 168, 76, 0.07); }
.rangee.voix .rl { color: var(--or-clair); }