/* =============================================================================
   LIENS — feuille de la page vitrine
   /liens/liens.css
   -----------------------------------------------------------------------------
   Ordre de chargement, identique à toutes les applications de l'écosystème :

     /assets/design/design-system.css   tokens, base, composants .ds-*
     /style.css                         .topbar, .app-switch, .site-footer
     ./liens.css                        ce fichier

   POURQUOI CHARGER LA FEUILLE RACINE POUR UNE PAGE DE LIENS
   L'en-tête et le pied de page doivent être exactement ceux du reste du site,
   au pixel près. Les redéclarer ici les ferait diverger au premier ajustement
   fait ailleurs. La feuille racine pèse 59 Ko, soit environ 11 Ko une fois
   compressée par le serveur, et elle est déjà dans le cache de quiconque a
   visité le site : le coût réel est proche de zéro, le gain de cohérence est
   permanent.

   AUCUN token n'est redéclaré. Tout est hérité du Design System.
   Toutes les règles sont préfixées `lk-` — aucune collision possible.

   Zéro image : le logo est un SVG du Design System, les pictogrammes sont en
   ligne. La page ne charge donc que du texte, deux polices et deux feuilles.
   ========================================================================== */

:root {
  --lk-gutter: clamp(18px, 5vw, 32px);
  --lk-maxw: 1080px;
}

/* -------------------------------------------------------------------------
   1. STRUCTURE
   ---------------------------------------------------------------------- */
.lk-main { min-height: 60vh; }

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

/* -------------------------------------------------------------------------
   2. HÉROS
   Première impression de la marque : halo émeraude, marque ornementale or,
   nom, promesse, puis les garanties. Rien d'autre — cette page n'a qu'un but,
   mener aux applications.
   ---------------------------------------------------------------------- */
.lk-hero {
  position: relative;
  padding: clamp(36px, 9vw, 76px) 0 clamp(28px, 6vw, 48px);
  text-align: center;
}
.lk-hero::before {
  content: "";
  position: absolute; inset: -120px 0 auto 0; height: 520px;
  background: var(--halo);
  pointer-events: none; z-index: -1;
}

/* Rosette de l'écosystème — reprise de /coran-app/ et de l'icône Hadith.
   Ornement, donc or : elle n'est ni cliquable ni porteuse d'état. */
.lk-mark {
  display: grid; place-items: center;
  width: clamp(72px, 20vw, 92px); height: clamp(72px, 20vw, 92px);
  margin: 0 auto var(--sp-5);
  color: var(--accent-2);
  background: var(--bg-elevated);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.lk-mark svg { width: 60%; height: 60%; }

.lk-hero__title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
}
.lk-hero__ar {
  display: block;
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4.6vw, 1.6rem);
  line-height: 1.9;
  direction: rtl;
  color: var(--accent-2-text);
}
.lk-hero__lead {
  max-width: 46ch;
  margin: 0 auto;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  /* text-wrap: balance égalise les lignes d'un paragraphe court centré ;
     ignoré sans dommage par les navigateurs qui ne le connaissent pas. */
  text-wrap: balance;
}

/* — Garanties — ce que l'on veut faire savoir en trois secondes. */
.lk-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}
.lk-trust li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px;
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.lk-trust svg { width: 14px; height: 14px; color: var(--accent); }

/* Filet dégradé signature, en séparateur de section. */
.lk-rule {
  height: 1px; margin: clamp(32px, 7vw, 56px) 0 0;
  border: 0;
  background: var(--edge-gradient);
  opacity: 0.45;
}

/* -------------------------------------------------------------------------
   3. TITRES DE SECTION
   ---------------------------------------------------------------------- */
.lk-section { padding: clamp(32px, 7vw, 56px) 0 0; }

.lk-section__head { margin-bottom: var(--sp-6); text-align: center; }
.lk-section__label {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: var(--sp-3);
  padding: 4px 12px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-2-text);
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-pill);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .lk-section__label { background: var(--surface); }
}
.lk-section__title {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
.lk-section__lead {
  max-width: 52ch; margin: 0 auto;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
}

/* -------------------------------------------------------------------------
   4. CARTES D'APPLICATION
   Le cœur de la page. Une carte = une application, avec ce qu'elle permet de
   faire énoncé en une phrase. La carte entière est cliquable : sur mobile,
   viser un petit bouton dans une carte est le meilleur moyen de rater sa
   cible.
   ---------------------------------------------------------------------- */
.lk-apps {
  display: grid; gap: var(--sp-4);
  margin: 0; padding: 0;
  list-style: none;
}
@media (min-width: 620px)  { .lk-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .lk-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lk-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-3);
  height: 100%;
  padding: var(--sp-5);
  color: inherit; text-decoration: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
/* Liseré dégradé signature, révélé au survol. */
.lk-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: var(--edge-gradient);
  opacity: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity var(--dur-base) var(--ease-out);
}
/* Voile émeraude très discret, du bas vers le haut. */
.lk-card::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 60%;
  z-index: -1;
  background: linear-gradient(to top, rgba(31, 169, 122, 0.09), transparent);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

/* Survol réservé aux appareils dotés d'un vrai pointeur : sur écran tactile,
   un état :hover reste « collé » après le tap et donne une carte allumée que
   l'utilisateur n'a pas demandée. */
@media (hover: hover) and (pointer: fine) {
  .lk-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-accent);
    box-shadow: var(--shadow-soft);
  }
  .lk-card:hover::after,
  .lk-card:hover::before { opacity: 1; }
  .lk-card:hover .lk-card__go { transform: translateX(3px); color: var(--accent); }
  .lk-card:hover .lk-card__icon { border-color: var(--border-accent); }
}
/* Appui : réaction immédiate au doigt, c'est ce qui fait qu'une page paraît
   réactive plutôt que lente. */
.lk-card:active { transform: scale(0.985); }
.lk-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.lk-card__top { display: flex; align-items: center; gap: var(--sp-3); }

.lk-card__icon {
  flex: none;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.lk-card__icon svg { width: 22px; height: 22px; }

.lk-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.25;
}
.lk-card__desc {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
}
.lk-card__foot {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: auto; padding-top: var(--sp-3);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--text);
}
.lk-card__go {
  width: 16px; height: 16px;
  color: var(--text-tertiary);
  transition: transform var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.lk-card__tag {
  margin-left: auto;
  padding: 3px 10px;
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  color: var(--text-tertiary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

/* Raccourci vers une section interne d'une application (les 40 Nawawî).
   Posé HORS de la carte-lien : une ancre dans une ancre n'est pas un balisage
   valide et le second lien serait inatteignable au clavier. */
.lk-apps__item { position: relative; display: flex; flex-direction: column; }
.lk-sublink {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  min-height: 38px;
  margin-top: var(--sp-2);
  padding: 0 var(--sp-3);
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  color: var(--text-secondary); text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.lk-sublink svg { width: 13px; height: 13px; }
.lk-sublink:hover { color: var(--accent); border-color: var(--border-accent); }

/* -------------------------------------------------------------------------
   5. RÉSEAUX SOCIAUX
   ---------------------------------------------------------------------- */
.lk-social {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3);
  margin: 0; padding: 0;
  list-style: none;
}
.lk-social__link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: 0 var(--sp-5);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--text); text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.lk-social__link svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .lk-social__link:hover {
    background: var(--surface-strong);
    border-color: var(--border-accent);
    transform: translateY(-2px);
  }
}
.lk-social__link:active { transform: scale(0.97); }

/* -------------------------------------------------------------------------
   6. BLOC DE CLÔTURE — installation et partage
   ---------------------------------------------------------------------- */
.lk-outro {
  position: relative;
  margin: clamp(40px, 8vw, 64px) 0 clamp(24px, 5vw, 40px);
  padding: clamp(26px, 6vw, 40px) clamp(20px, 5vw, 36px);
  text-align: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.lk-outro::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--edge-gradient); opacity: 0.6;
}
.lk-outro__title {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}
.lk-outro__text {
  max-width: 48ch; margin: 0 auto var(--sp-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}
.lk-outro__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3);
}
.lk-outro__actions .ds-btn svg { width: 16px; height: 16px; }

/* -------------------------------------------------------------------------
   7. APPARITION PROGRESSIVE
   Un décalage court et une amplitude faible : l'animation doit se remarquer
   sans être attendue. Elle est portée par une classe ajoutée en JavaScript,
   donc l'absence de script laisse la page entièrement visible — jamais de
   contenu bloqué à `opacity: 0`.
   ---------------------------------------------------------------------- */
.js-anim .lk-reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: lk-reveal var(--dur-slow) var(--ease-out) forwards;
  animation-delay: var(--lk-delay, 0ms);
}
@keyframes lk-reveal { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js-anim .lk-reveal { opacity: 1; transform: none; animation: none; }
  .lk-card, .lk-card::before, .lk-card::after,
  .lk-card__go, .lk-card__icon, .lk-social__link, .lk-sublink { transition: none; }
  .lk-card:hover, .lk-card:active,
  .lk-social__link:hover, .lk-social__link:active { transform: none; }
}

@media (prefers-contrast: more) {
  .lk-card, .lk-social__link, .lk-trust li { border-color: var(--border-accent); }
  .lk-card__desc { color: var(--text); }
}

/* -------------------------------------------------------------------------
   8. IMPRESSION
   La feuille commune print.css neutralise déjà flous, ombres et animations.
   Restent les éléments qui n'ont aucun sens sur papier.
   ---------------------------------------------------------------------- */
@media print {
  .lk-hero::before, .lk-outro__actions { display: none !important; }
  .lk-card { break-inside: avoid; border-color: #999; }
}