/* =============================================================================
   ALPHABET ARABE — feuille de style unique
   Style : épuré futuriste. Fond sombre, néon rose + bleu clair, surfaces verre.
   Écrit à la main, aucun framework CSS.

   Sommaire
   01. Tokens            06. Liquid glass          11. Voyelles
   02. Base              07. Boutons néon          12. Mots / exemples
   03. Fond mesh liquide 08. Hero                  13. Méthode (cartes)
   04. Animations        09. Grille des lettres    14. Téléchargement
   05. Navigation verre  10. Tableau des formes    15. Pied de page / responsive
   ========================================================================== */

/* ---------------------------------------------------------------- 01. Tokens */
:root {
  /* Fond — un quasi-noir est nécessaire pour que le néon existe */
  --bg: #06070c;
  --bg-2: #0b0d15;
  --bg-3: #10131d;

  /* Néon : rose + bleu clair (référence client) */
  --pink: #ff45c8;
  --pink-soft: #ff92e2;
  --cyan: #63e6ff;
  --cyan-soft: #b0f1ff;

  /* Couleur client #932f2f — conservée comme ton chaud profond dans le mesh
     et en accent tertiaire. Elle ne peut pas porter le style néon demandé,
     donc elle structure la profondeur plutôt que les accents vifs. */
  --brick: #932f2f;

  --text: #eef1f8;
  --dim: #99a3ba;
  --faint: #59627a;

  /* Verre */
  --glass: rgba(255, 255, 255, 0.045);
  --glass-strong: rgba(255, 255, 255, 0.07);
  --glass-brd: rgba(255, 255, 255, 0.11);
  --glass-hi: rgba(255, 255, 255, 0.24);

  --sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ar: 'Amiri', 'Times New Roman', serif;
  --ar-q: 'Amiri Quran', 'Amiri', serif;

  --r: 18px;
  --r-s: 12px;
  --wrap: 1140px;
  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* Angle animé des bordures néon. Non supporté = bordure fixe, toujours lisible. */
@property --ang {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ------------------------------------------------------------------ 02. Base */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

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

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.section { padding: 104px 0; position: relative; }
.section-sm { padding: 64px 0; }

.eyebrow {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
}
.eyebrow.pink { color: var(--pink-soft); }

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.h1 { font-size: clamp(34px, 6.4vw, 68px); }
.h2 { font-size: clamp(26px, 4vw, 42px); margin-bottom: 14px; }
.h3 { font-size: clamp(19px, 2.4vw, 24px); }

.lede { margin: 0 0 40px; max-width: 62ch; color: var(--dim); font-size: 17px; }
.lede.center { margin-left: auto; margin-right: auto; text-align: center; }

/* Filet néon de séparation — remplace les traits gris, plus dans le ton */
.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, rgba(99, 230, 255, 0.35), rgba(255, 69, 200, 0.35), transparent);
}

/* --------------------------------------------------- 03. Fond mesh liquide */
/* Recréation vanilla du « fond mesh liquide » (Shader Gradient est React/WebGL).
   Quatre nappes floutées animées en transform seul : composité par le GPU,
   aucun repaint, coût quasi nul comparé à un canvas WebGL. */
.mesh {
  position: fixed;
  inset: -20vmax;
  z-index: -2;
  pointer-events: none;
  filter: blur(90px) saturate(135%);
  opacity: 0.72;
}
.mesh span {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}
.mesh .m1 {
  width: 58vmax; height: 58vmax; top: 2%; left: 4%;
  background: radial-gradient(circle, rgba(255, 69, 200, 0.85), transparent 62%);
  animation: drift-1 26s ease-in-out infinite;
}
.mesh .m2 {
  width: 52vmax; height: 52vmax; top: 18%; right: 2%;
  background: radial-gradient(circle, rgba(99, 230, 255, 0.8), transparent 62%);
  animation: drift-2 31s ease-in-out infinite;
}
.mesh .m3 {
  width: 46vmax; height: 46vmax; bottom: 4%; left: 22%;
  background: radial-gradient(circle, rgba(147, 47, 47, 0.9), transparent 64%);
  animation: drift-3 37s ease-in-out infinite;
}
.mesh .m4 {
  width: 38vmax; height: 38vmax; top: 44%; left: 42%;
  background: radial-gradient(circle, rgba(150, 90, 255, 0.55), transparent 62%);
  animation: drift-4 29s ease-in-out infinite;
}
@keyframes drift-1 { 0%,100% { transform: none; } 50% { transform: translate3d(14vmax, 8vmax, 0) scale(1.15); } }
@keyframes drift-2 { 0%,100% { transform: none; } 50% { transform: translate3d(-12vmax, 12vmax, 0) scale(0.88); } }
@keyframes drift-3 { 0%,100% { transform: none; } 50% { transform: translate3d(10vmax, -10vmax, 0) scale(1.2); } }
@keyframes drift-4 { 0%,100% { transform: none; } 50% { transform: translate3d(-14vmax, -6vmax, 0) scale(1.1); } }

/* Voile sombre : garantit le contraste du texte par-dessus le mesh */
.mesh-veil {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(6, 7, 12, 0.25), rgba(6, 7, 12, 0.86) 70%),
    linear-gradient(180deg, rgba(6, 7, 12, 0.55), rgba(6, 7, 12, 0.9));
}

/* Le SVG des filtres de réfraction ne doit rien occuper */
.lg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ------------------------------------------------------------ 04. Animations */
/* AnimatedContent (reactbits) recréé : fondu + montée à l'entrée dans le viewport.
   Ne se rejoue jamais — une fois affiché, le contenu reste affiché. */
.anim {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.anim.in { opacity: 1; transform: none; }

/* BlurText (reactbits) recréé : flou -> net, jamais l'inverse.
   Sur les titres latins, on découpe par MOT. Jamais par caractère sur l'arabe :
   cela casserait les ligatures contextuelles. */
.bt span {
  display: inline-block;
  opacity: 0;
  filter: blur(12px);
  transform: translateY(10px);
  transition: opacity 0.75s var(--ease), filter 0.75s var(--ease), transform 0.75s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.bt.in span { opacity: 1; filter: blur(0); transform: none; }

/* Même effet appliqué à un bloc entier (cartes de lettres) */
.btb {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(12px) scale(0.97);
  transition: opacity 0.65s var(--ease), filter 0.65s var(--ease), transform 0.65s var(--ease);
  transition-delay: calc(var(--i, 0) * 28ms);
}
.btb.in { opacity: 1; filter: blur(0); transform: none; }

/* --------------------------------------------------------- 05. Nav en verre */
.nav-outer {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 14px 0;
}
.nav {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 12px 10px 20px;
  border-radius: 999px;
  /* Liquid glass : verre + reflet spéculaire haut/bas */
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 18px 44px rgba(0, 0, 0, 0.55);
}
/* Réfraction de bord : seuls les navigateurs qui savent filtrer le backdrop
   l'appliquent. Ailleurs, le flou simple ci-dessus suffit. */
@supports (backdrop-filter: url(#lg-refract)) {
  .nav {
    backdrop-filter: url(#lg-refract) blur(16px) saturate(180%);
  }
}
.nav-brand {
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-brand .brand-glyph {
  font-family: var(--ar-q);
  font-size: 26px;
  line-height: 1;
  color: var(--cyan);
  text-shadow: 0 0 18px rgba(99, 230, 255, 0.55);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  list-style: none;
  padding: 0;
}
.nav-links a {
  display: block;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--dim);
  transition: color 0.2s, background 0.2s;
}
.nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.nav-links a[aria-current='page'] {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(99, 230, 255, 0.35), 0 0 18px rgba(99, 230, 255, 0.15);
}
.nav-burger {
  display: none;
  width: 40px; height: 40px;
  margin-left: auto;
  border: 1px solid var(--glass-brd);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  position: relative;
}
.nav-burger i {
  position: absolute; left: 11px; right: 11px; height: 1.5px;
  background: var(--text); border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
.nav-burger i:nth-child(1) { top: 14px; }
.nav-burger i:nth-child(2) { top: 19px; }
.nav-burger i:nth-child(3) { top: 24px; }
.nav-burger[aria-expanded='true'] i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-burger[aria-expanded='true'] i:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded='true'] i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --------------------------------------------------------- 06. Liquid glass */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r);
  backdrop-filter: blur(14px) saturate(165%);
  -webkit-backdrop-filter: blur(14px) saturate(165%);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 rgba(255, 255, 255, 0.045),
    0 20px 48px rgba(0, 0, 0, 0.45);
}

/* « Carte en verre progressive » : le flou s'intensifie vers le bas, obtenu par
   deux couches masquées — le dégradé de masque fait la progression. */
.glass-prog { position: relative; overflow: hidden; }
.glass-prog::before,
.glass-prog::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}
.glass-prog::before {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
}
.glass-prog::after {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 55%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 55%, #000 100%);
}
.glass-prog > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------- 07. Boutons néon */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.2s var(--ease);
}
.btn:hover { transform: translateY(-2px); border-color: rgba(99, 230, 255, 0.45); color: var(--cyan-soft); }

/* NeonBorderButton (reactbits) recréé : anneau conique animé + halo.
   L'anneau est un masque, donc il n'obscurcit jamais le texte. */
.btn-neon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #131727, #0a0c14);
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.22s var(--ease);
}
.btn-neon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.6px;
  background: conic-gradient(from var(--ang), var(--cyan), var(--pink), #ffffff, var(--cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: neon-spin 5s linear infinite;
  pointer-events: none;
}
.btn-neon::after {
  content: '';
  position: absolute;
  inset: -5px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--ang), var(--cyan), var(--pink), #ffffff, var(--cyan));
  filter: blur(16px);
  opacity: 0.5;
  animation: neon-spin 5s linear infinite;
  transition: opacity 0.25s;
  pointer-events: none;
}
.btn-neon:hover { transform: translateY(-2px); }
.btn-neon:hover::after { opacity: 0.85; }
.btn-neon.lg { padding: 18px 38px; font-size: 17px; }
@keyframes neon-spin { to { --ang: 360deg; } }

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-row.center { justify-content: center; }

/* ------------------------------------------------------------------ 08. Hero */
.hero {
  position: relative;
  min-height: 88svh;
  display: flex;
  align-items: center;
  padding: 80px 0 96px;
}
.hero-inner { text-align: center; }
.hero-kicker {
  margin: 0 0 30px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
}
.hero-glyph {
  font-family: var(--ar-q);
  font-size: clamp(96px, 17vw, 210px);
  line-height: 1.3;
  margin-bottom: 18px;
  background: linear-gradient(100deg, var(--cyan-soft), var(--cyan) 30%, var(--pink) 72%, var(--pink-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Le halo est porté par une ombre floutée dupliquée, pas par un filtre sur le
     glyphe : le tracé arabe reste net et parfaitement lisible. */
  filter: drop-shadow(0 0 34px rgba(255, 69, 200, 0.32)) drop-shadow(0 0 70px rgba(99, 230, 255, 0.22));
}
.hero-title { margin: 0 auto 22px; max-width: 17ch; }
.hero-title .accent {
  display: block;
  background: linear-gradient(92deg, var(--cyan), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub { margin: 0 auto 38px; max-width: 56ch; color: var(--dim); font-size: clamp(15px, 1.8vw, 18px); }
.hero-stats {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 54px;
}
.hero-stat {
  padding: 16px 26px;
  border-radius: var(--r-s);
  min-width: 130px;
}
.hero-stat b {
  display: block;
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(92deg, var(--cyan), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-stat span { display: block; margin-top: 6px; font-size: 12px; color: var(--dim); }

/* En-tête des pages intérieures */
.page-head { padding: 72px 0 44px; text-align: center; }
.page-head .lede { margin-left: auto; margin-right: auto; margin-bottom: 0; text-align: center; }

/* ------------------------------------------------------ 09. Grille lettres */
.letters {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}
.letter {
  position: relative;
  padding: 20px 8px 14px;
  border-radius: var(--r-s);
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  text-align: center;
  transition: transform 0.22s var(--ease), border-color 0.22s, box-shadow 0.22s, background 0.22s;
}
.letter:hover {
  transform: translateY(-3px);
  border-color: rgba(99, 230, 255, 0.5);
  background: var(--glass-strong);
  box-shadow: 0 0 0 1px rgba(99, 230, 255, 0.18), 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 30px rgba(99, 230, 255, 0.16);
}
.letter.half:hover {
  border-color: rgba(255, 69, 200, 0.5);
  box-shadow: 0 0 0 1px rgba(255, 69, 200, 0.18), 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 69, 200, 0.16);
}
.letter-ar {
  display: block;
  font-family: var(--ar);
  font-size: 42px;
  line-height: 1.5;
  color: var(--cyan);
  text-shadow: 0 0 24px rgba(99, 230, 255, 0.35);
}
.letter.half .letter-ar { color: var(--pink); text-shadow: 0 0 24px rgba(255, 69, 200, 0.35); }
.letter-name { display: block; font-size: 11.5px; color: var(--dim); }
.letter-tr { display: block; font-size: 10.5px; color: var(--faint); }

.legend { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 20px; font-size: 13px; color: var(--dim); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 0; }
.legend .d-cyan { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.legend .d-pink { background: var(--pink); box-shadow: 0 0 10px var(--pink); }

/* Fiche détaillée d'une lettre */
.modal-back {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 5, 9, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in 0.18s ease;
}
.modal {
  position: relative;
  width: min(540px, 100%);
  max-height: 88vh;
  overflow: auto;
  padding: 34px 30px 28px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(22, 26, 40, 0.96), rgba(10, 12, 20, 0.96));
  border: 1px solid var(--glass-brd);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 40px 90px rgba(0, 0, 0, 0.7), 0 0 60px rgba(99, 230, 255, 0.09);
  animation: pop-in 0.22s var(--ease);
}
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--glass-brd);
  background: rgba(255, 255, 255, 0.05);
  color: var(--dim);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.modal-close:hover { color: var(--text); border-color: var(--cyan); }
.modal-head { display: flex; align-items: center; gap: 22px; margin-bottom: 26px; }
.modal-glyph {
  font-family: var(--ar);
  font-size: 78px;
  line-height: 1.35;
  color: var(--cyan);
  text-shadow: 0 0 32px rgba(99, 230, 255, 0.4);
}
.modal.half .modal-glyph { color: var(--pink); text-shadow: 0 0 32px rgba(255, 69, 200, 0.4); }
.modal-name { display: block; font-size: 25px; font-weight: 700; }
.modal-tr { display: block; font-size: 15px; color: var(--pink-soft); }
.modal-label {
  margin: 0 0 12px;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint);
}
.modal-notes { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; font-size: 14px; color: var(--dim); }
.modal-notes b { color: var(--text); font-weight: 600; }

/* Trois formes liées, en ligne, sens de lecture arabe */
.forms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.form-cell {
  text-align: center;
  padding: 16px 6px 11px;
  border-radius: var(--r-s);
  border: 1px solid var(--glass-brd);
  background: rgba(255, 255, 255, 0.035);
}
.form-ar { display: block; font-family: var(--ar); font-size: 40px; line-height: 1.4; color: var(--cyan-soft); }
.form-b { display: block; margin-top: 4px; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }

/* ------------------------------------------------- 10. Tableau des formes */
.table-wrap { overflow-x: auto; border-radius: var(--r); }
.ftable { width: 100%; border-collapse: collapse; min-width: 640px; }
.ftable th {
  padding: 0 12px 14px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint); text-align: center;
  border-bottom: 1px solid var(--glass-brd);
}
.ftable th.l, .ftable td.l { text-align: left; }
.ftable td {
  padding: 9px 12px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ftable tbody tr { transition: background 0.18s; }
.ftable tbody tr:hover { background: rgba(99, 230, 255, 0.05); }
.ft-iso { font-family: var(--ar); font-size: 24px; line-height: 1.4; color: var(--cyan); width: 62px; }
.ftable tr.half .ft-iso { color: var(--pink); }
.ft-name { font-size: 14px; font-weight: 600; white-space: nowrap; }
.ft-tr { font-size: 13px; color: var(--pink-soft); }
.ft-form { font-family: var(--ar); font-size: 24px; line-height: 1.4; color: var(--text); }
.ft-link { font-size: 12px; color: var(--faint); white-space: nowrap; }
.ftable tr.half .ft-link { color: var(--pink-soft); font-weight: 600; }

.note {
  margin: 26px 0 0;
  padding: 16px 20px;
  border-left: 2px solid var(--cyan);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  background: rgba(99, 230, 255, 0.05);
  font-size: 14px;
  color: var(--dim);
}
.note b { color: var(--text); }

/* ------------------------------------------------------------- 11. Voyelles */
.vgroups { display: grid; gap: 20px; }
.vgroup { padding: 26px 24px; }
.vgroup-title {
  margin: 0 0 18px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pink-soft);
}
.vlist { list-style: none; margin: 0; padding: 0; }
.vrow {
  display: grid;
  grid-template-columns: 72px 1fr 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}
.vrow:first-child { border-top: 0; }
.vdemo {
  font-family: var(--ar); font-size: 34px; line-height: 1.6; text-align: center;
  color: var(--pink); text-shadow: 0 0 22px rgba(255, 69, 200, 0.3);
}
.vname { display: block; font-size: 15px; font-weight: 600; }
.vsub { display: block; font-size: 12px; color: var(--faint); }
.vfn { font-size: 13.5px; color: var(--cyan-soft); }
.vex { text-align: right; }
.vex-ar { display: block; font-family: var(--ar); font-size: 24px; line-height: 1.6; }
.vex-sub { display: block; font-size: 11.5px; color: var(--faint); }

/* ------------------------------------------------------ 12. Mots / exemples */
.words { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.word { padding: 22px 20px 18px; border-radius: var(--r); }
.word-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.word-ar {
  font-family: var(--ar); font-size: 34px; line-height: 1.7;
  color: var(--cyan); text-shadow: 0 0 22px rgba(99, 230, 255, 0.28);
}
.word-meta { text-align: right; }
.word-tr { display: block; font-size: 14px; font-weight: 600; color: var(--pink-soft); }
.word-meaning { display: block; font-size: 12px; color: var(--dim); }
.blocks { display: flex; align-items: flex-start; justify-content: center; gap: 8px; }
.blk { display: flex; gap: 6px; }
.brk {
  color: var(--pink); font-size: 20px; line-height: 1.7; font-weight: 700;
  text-shadow: 0 0 14px rgba(255, 69, 200, 0.6);
}
.piece { display: flex; flex-direction: column; align-items: center; min-width: 28px; }
.piece-ar { font-family: var(--ar); font-size: 24px; line-height: 1.7; }
.piece-b { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }

/* ------------------------------------------------- 13. Méthode (cartes) */
/* Motif « section pricing animée » (SkiperUI) réemployé pour les 4 étapes :
   colonnes, une carte mise en avant, apparition décalée, bordure animée. */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px 26px;
  border-radius: var(--r);
  transition: transform 0.28s var(--ease), box-shadow 0.28s;
}
.plan:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55); }
.plan-n {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--faint);
}
.plan-glyph {
  font-family: var(--ar);
  font-size: 44px;
  line-height: 1.6;
  margin: 6px 0 2px;
  color: var(--cyan);
  text-shadow: 0 0 26px rgba(99, 230, 255, 0.3);
}
.plan-title { margin: 4px 0 6px; font-size: 21px; }
.plan-lead { margin: 0 0 18px; font-size: 14px; color: var(--pink-soft); }
.plan-points { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 11px; font-size: 13.5px; color: var(--dim); }
.plan-points li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; }
.plan-points li::before { content: '›'; color: var(--cyan); font-weight: 700; }
.plan .btn, .plan .btn-neon { margin-top: auto; width: 100%; }

/* Carte mise en avant : anneau néon animé, même technique que le bouton */
.plan.featured { background: var(--glass-strong); }
.plan.featured::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: conic-gradient(from var(--ang), var(--cyan), var(--pink), #ffffff, var(--cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: neon-spin 7s linear infinite;
  pointer-events: none;
}
.plan-tag {
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #080a10;
  background: linear-gradient(92deg, var(--cyan), var(--pink));
  white-space: nowrap;
}

/* Cartes « pourquoi » — sobres, sans effet au survol (style épuré) */
.why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.why-card { padding: 28px 24px; border-radius: var(--r); }
.why-ar {
  display: block; font-family: var(--ar); font-size: 34px; line-height: 1.7; margin-bottom: 12px;
  color: var(--pink-soft);
}
.why-title { margin: 0 0 10px; font-size: 17px; font-weight: 600; }
.why-text { margin: 0; font-size: 14px; color: var(--dim); }

/* ------------------------------------------------------- 14. Téléchargement */
.dl {
  position: relative;
  padding: 68px 32px;
  border-radius: 26px;
  text-align: center;
  overflow: hidden;
}
.dl-glyph {
  display: block;
  font-family: var(--ar-q);
  font-size: 62px;
  line-height: 1.7;
  margin-bottom: 6px;
  color: var(--pink-soft);
  text-shadow: 0 0 40px rgba(255, 69, 200, 0.35);
}
.dl-note { margin: 20px 0 0; font-size: 12.5px; color: var(--faint); }
.dl-specs {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px;
  margin: 30px 0 0; padding: 0; list-style: none;
  font-size: 13px; color: var(--dim);
}
.dl-specs li::before { content: '◆'; color: var(--cyan); margin-right: 9px; font-size: 9px; vertical-align: 2px; }

/* Aperçu des pages du PDF — cadres typographiques, aucun visuel figuratif */
.pdf-pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.pdf-page {
  padding: 22px 18px;
  border-radius: var(--r-s);
  border: 1px solid var(--glass-brd);
  background: rgba(255, 255, 255, 0.03);
  text-align: left;
}
.pdf-page b { display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); }
.pdf-page span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--dim); }

/* --------------------------------------------- 15. Pied de page / responsive */
.footer { margin-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.07); padding: 40px 0 46px; }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--dim); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; }
.footer-nav a:hover { color: var(--cyan); }
.footer-faint { color: var(--faint); }

@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }

@media (max-width: 1024px) {
  .letters { grid-template-columns: repeat(5, 1fr); }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .why { grid-template-columns: repeat(2, 1fr); }
  .words { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav-links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    border-radius: var(--r);
    background: rgba(12, 14, 22, 0.96);
    border: 1px solid var(--glass-brd);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 14px; font-size: 15px; }
  .nav { position: relative; }
  .nav-burger { display: block; }
}

@media (max-width: 720px) {
  .section { padding: 72px 0; }
  .wrap { padding: 0 16px; }
  .letters { grid-template-columns: repeat(4, 1fr); }
  .letter-ar { font-size: 34px; }
  .plans, .why, .words, .pdf-pages { grid-template-columns: 1fr; }
  .vrow { grid-template-columns: 56px 1fr; row-gap: 6px; }
  .vfn { grid-column: 2; }
  .vex { grid-column: 2; text-align: left; }
  .hero-stats { gap: 8px; }
  .hero-stat { flex: 1 1 100px; min-width: 0; padding: 14px 12px; }
  .btn-row .btn, .btn-row .btn-neon { width: 100%; }
  .dl { padding: 46px 18px; }
  .modal { padding: 28px 20px 22px; }
  .modal-glyph { font-size: 62px; }
  .form-ar { font-size: 32px; }
}

/* ----------------------------------------------------------- Accessibilité */
/* Toute l'animation est neutralisée : le contenu reste entièrement lisible. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mesh span { animation: none; }
  .anim, .bt span, .btb {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
  .btn-neon::before, .btn-neon::after, .plan.featured::before { animation: none; }
  .letter:hover, .plan:hover, .btn:hover, .btn-neon:hover { transform: none; }
  .modal, .modal-back { animation: none; }
}