/* styles.css */
/* Thème Islamic Glassmorphism — fond géométrique + cartes en verre lumineux */

:root{
  --bg: #061417;
  --bg-2:#0a1b20;
  --fg:#EFFFFA;
  --muted:#b6e6db;

  --primary:#00BFA6;   /* émeraude */
  --accent:#9FFFE3;    /* lueur */
  --glass:rgba(255,255,255,.08);
  --glass-strong:rgba(255,255,255,.14);
  --glass-border:rgba(255,255,255,.20);

  --radius:18px;
  --blur:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);

  --container:960px;
}

/* Mode clair auto si l’utilisateur le préfère */
@media (prefers-color-scheme: light){
  :root{
    --bg:#f5fffc;
    --bg-2:#eafff9;
    --fg:#0d2a28;
    --muted:#2e6d63;
    --glass:rgba(255,255,255,.6);
    --glass-strong:rgba(255,255,255,.7);
    --glass-border:rgba(0,0,0,.08);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--fg);
  background:
    radial-gradient(1200px 800px at 20% -10%, #072428 0%, transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, #042022 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
   background-attachment: fixed
}

/* Arrière-plan: motif géométrique islamique (SVG) + halos */
.bg-pattern{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(159,255,227,.08) 0 40%, transparent 41%) repeat,
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 64 64' fill='none'>\
<g opacity='0.08' stroke='%239FFFE3' stroke-width='0.6'>\
<path d='M32 2l8 14 16 0-8 14 8 14-16 0-8 14-8-14-16 0 8-14-8-14 16 0 8-14z'/>\
<circle cx='32' cy='32' r='6'/></g></svg>") center/320px 320px repeat;
  mix-blend-mode:screen; opacity:.8;
}
.bg-glow{
  position:fixed; inset:-20vmax; z-index:-3; pointer-events:none;
  background:
   radial-gradient(40vmax 40vmax at 60% 10%, rgba(0,191,166,.18) 0%, transparent 60%),
   radial-gradient(30vmax 30vmax at 20% 70%, rgba(159,255,227,.12) 0%, transparent 65%);
  filter:blur(20px);
}

/* Composant verre */
.glass{
  background:var(--glass);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.glow{position:relative}
.glow::before{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  border-radius:calc(var(--radius) + 1px);
  background:linear-gradient(135deg, rgba(39,240,208,.65), rgba(0,191,166,0) 40%, rgba(159,255,227,.5) 70%, rgba(39,240,208,0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px;
}

/* Layout */
.site-header, .site-footer{
  margin:24px auto;
  max-width:var(--container);
  padding:16px 20px;
  margin-bottom: 10px;
}
.container{
  max-width:var(--container);
  margin:24px auto 80px;
  padding:0 16px;
}

.brand{
  display:flex; align-items:center; gap:16px;
}
.logo{width:54px; height:54px; flex:0 0 auto; filter: drop-shadow(0 0 10px rgba(39,240,208,.35));}
.title h1{margin:0; font-size:clamp(1.3rem, 1.1rem + 1vw, 2rem)}
.subtitle{margin:.25rem 0 0; color:var(--muted)}

/* Carte principale (qui contient ton TEXTE ORIGINAL) */
.card{padding:22px}
.prose h1, .prose h2{margin:.2rem 0 .6rem}
.prose p{margin:.6rem 0}
.prose .links{margin:1rem 0 1.25rem; display:flex; flex-direction:column; gap:.25rem}
.raw-link{
  display:inline-block;
  padding:.45rem .7rem;
  border-radius:10px;
  background:rgba(159,255,227,.08);
  border:1px dashed rgba(159,255,227,.25);
  color:var(--muted);
  user-select:text; /* on laisse le texte brut, pour montrer que c'est l'original */
}

/* Boutons de raccourci (ne changent pas le texte) */
.actions{
  display:flex; gap:12px; flex-wrap:wrap;
  margin-top:1rem;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:150px;
  padding:12px 18px;
  border-radius:14px;
  text-decoration:none; font-weight:700; letter-spacing:.2px;
  color:var(--fg);
  border:1px solid rgba(159,255,227,.35);
  background:linear-gradient(135deg, rgba(39,240,208,.28), rgba(0,191,166,.18));
  transition:transform .12s ease, box-shadow .12s ease, background-color .2s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 22px rgba(39,240,208,.25)}
.btn.outline{background:transparent}
.btn.outline:hover{background:rgba(159,255,227,.10)}

.site-footer{ text-align:center; font-size:.95rem; color:var(--muted) }

/* Mobile */
@media (max-width:520px){
  .site-header, .site-footer{margin:14px auto; padding:12px}
  .logo{width:46px; height:46px}
}

/* Focus visible (accessibilité) */
:focus-visible{
  outline:2px solid #27F0D0; outline-offset:2px; border-radius:8px;
}

.responsiveFR {
  width: 60px;
  height: auto;
}
.responsiveAR {
  width: 60px;
  height: auto;
}


/* Choix de catégorie */
/* islamic-glass.css */
/* Thème Islamic Glassmorphism — motifs géométriques + cartes en verre lumineux */

:root{
  --bg: #061417;
  --bg-2:#0a1b20;
  --fg:#EFFFFA;
  --muted:#b6e6db;

  --primary:#00BFA6;   /* émeraude */
  --accent:#9FFFE3;    /* lueur */
  --glass:rgba(255,255,255,.08);
  --glass-strong:rgba(255,255,255,.14);
  --glass-border:rgba(255,255,255,.20);

  --radius:18px;
  --blur:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);

  --container:1100px;
}

/* Mode clair auto si l’utilisateur le préfère */
@media (prefers-color-scheme: light){
  :root{
    --bg:#f5fffc;
    --bg-2:#eafff9;
    --fg:#0d2a28;
    --muted:#2e6d63;
    --glass:rgba(255,255,255,.6);
    --glass-strong:rgba(255,255,255,.7);
    --glass-border:rgba(0,0,0,.08);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--fg);
  background:
    radial-gradient(1200px 800px at 20% -10%, #072428 0%, transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, #042022 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Arrière-plan: motif géométrique islamique (SVG) + halos */
.bg-pattern{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(159,255,227,.08) 0 40%, transparent 41%) repeat,
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 64 64' fill='none'>\
<g opacity='0.08' stroke='%239FFFE3' stroke-width='0.6'>\
<path d='M32 2l8 14 16 0-8 14 8 14-16 0-8 14-8-14-16 0 8-14-8-14 16 0 8-14z'/>\
<circle cx='32' cy='32' r='6'/></g></svg>") center/320px 320px repeat;
  mix-blend-mode:screen; opacity:.8;
}
.bg-glow{
  position:fixed; inset:-20vmax; z-index:-3; pointer-events:none;
  background:
   radial-gradient(40vmax 40vmax at 60% 10%, rgba(0,191,166,.18) 0%, transparent 60%),
   radial-gradient(30vmax 30vmax at 20% 70%, rgba(159,255,227,.12) 0%, transparent 65%);
  filter:blur(20px);
}

/* Composant verre */
.glass{
  background:var(--glass);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.glow{position:relative}
.glow::before{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  border-radius:calc(var(--radius) + 1px);
  background:linear-gradient(135deg, rgba(39,240,208,.65), rgba(0,191,166,0) 40%, rgba(159,255,227,.5) 70%, rgba(39,240,208,0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px;
}

/* Layout */
.site-header, .site-footer{
  margin:24px auto;
  max-width:var(--container);
  padding:16px 20px;
}
.container{
  max-width:var(--container);
  margin:24px auto 80px;
  padding:0 16px;
}

.brand{
  display:flex; align-items:center; gap:16px;
}
.logo{width:54px; height:54px; flex:0 0 auto; filter: drop-shadow(0 0 10px rgba(39,240,208,.35));}
.title h1{margin:0; font-size:clamp(1.3rem, 1.1rem + 1vw, 2rem)}
.subtitle{margin:.25rem 0 0; color:var(--muted)}

/* Carte principale (contient le TEXTE ORIGINAL) */
.card{padding:22px}
.prose .original-text{
  white-space:pre-wrap;     /* conserve retours et espaces d’origine */
  font-size:1rem;
  line-height:1.65;
  color:var(--fg);
}
.prose .original-text a{ color: var(--accent); }

/* ====== GRID DES 3 CARDS ====== */
.cards-grid{
  margin-top:22px;
  display:grid;
  gap:16px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px){
  .cards-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .cards-grid{ grid-template-columns: 1fr; }
}

.cardX{
  position:relative;
  display:flex;
  align-items:stretch;
  padding:16px;
  text-decoration:none;
  color:var(--fg);
  border:1px solid rgba(159,255,227,.18);
  transition: transform .18s ease, box-shadow .18s ease, background-color .25s ease, border-color .25s ease;
  overflow:hidden;
}
.cardX:hover{
  transform: translateY(-2px);
  background: var(--glass-strong);
  box-shadow: 0 14px 36px rgba(0,0,0,.28);
  border-color: rgba(159,255,227,.35);
}
.cardX:focus-visible{
  outline: 2px solid #27F0D0;
  outline-offset: 4px;
  border-radius: calc(var(--radius) + 2px);
}

.cardX-icon{
  flex:0 0 64px;
  width:64px; height:64px;
  display:grid; place-items:center;
  margin-right:14px;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(39,240,208,.18), rgba(0,191,166,.10));
  border: 1px solid rgba(159,255,227,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.cardX-icon svg{ width:40px; height:40px; }

.cardX-body h3{
  margin:.2rem 0 .2rem;
  font-size:1.05rem;
  letter-spacing:.2px;
  font-weight:800;
}
.cardX-body p{
  margin:.2rem 0 0;
  color: var(--muted);
  font-size:.95rem;
}

/* Pied de page */
.site-footer{ text-align:center; font-size:.95rem; color:var(--muted) }

/* Mobile */
@media (max-width:520px){
  .site-header, .site-footer{margin:14px auto; padding:12px}
  .logo{width:46px; height:46px}
}

/* tafsir */
/* islamic-glass.css */
/* Thème Islamic Glassmorphism — motifs géométriques + cartes en verre lumineux */

:root{
  --bg: #061417;
  --bg-2:#0a1b20;
  --fg:#EFFFFA;
  --muted:#b6e6db;

  --primary:#00BFA6;   /* émeraude */
  --accent:#9FFFE3;    /* lueur */
  --glass:rgba(255,255,255,.08);
  --glass-strong:rgba(255,255,255,.14);
  --glass-border:rgba(255,255,255,.20);

  --radius:18px;
  --blur:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);

  --container:1100px;
}

/* Mode clair auto si l’utilisateur le préfère */
@media (prefers-color-scheme: light){
  :root{
    --bg:#f5fffc;
    --bg-2:#eafff9;
    --fg:#0d2a28;
    --muted:#2e6d63;
    --glass:rgba(255,255,255,.6);
    --glass-strong:rgba(255,255,255,.7);
    --glass-border:rgba(0,0,0,.08);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--fg);
  background:
    radial-gradient(1200px 800px at 20% -10%, #072428 0%, transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, #042022 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Arrière-plan: motif géométrique islamique (SVG) + halos */
.bg-pattern{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(159,255,227,.08) 0 40%, transparent 41%) repeat,
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 64 64' fill='none'>\
<g opacity='0.08' stroke='%239FFFE3' stroke-width='0.6'>\
<path d='M32 2l8 14 16 0-8 14 8 14-16 0-8 14-8-14-16 0 8-14-8-14 16 0 8-14z'/>\
<circle cx='32' cy='32' r='6'/></g></svg>") center/320px 320px repeat;
  mix-blend-mode:screen; opacity:.8;
}
.bg-glow{
  position:fixed; inset:-20vmax; z-index:-3; pointer-events:none;
  background:
   radial-gradient(40vmax 40vmax at 60% 10%, rgba(0,191,166,.18) 0%, transparent 60%),
   radial-gradient(30vmax 30vmax at 20% 70%, rgba(159,255,227,.12) 0%, transparent 65%);
  filter:blur(20px);
}

/* Composant verre */
.glass{
  background:var(--glass);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.glow{position:relative}
.glow::before{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  border-radius:calc(var(--radius) + 1px);
  background:linear-gradient(135deg, rgba(39,240,208,.65), rgba(0,191,166,0) 40%, rgba(159,255,227,.5) 70%, rgba(39,240,208,0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px;
}

/* Layout */
.site-header, .site-footer{
  margin:24px auto;
  max-width:var(--container);
  padding:16px 20px;
}
.container{
  max-width:var(--container);
  margin:24px auto 80px;
  padding:0 16px;
}

.brand{
  display:flex; align-items:center; gap:16px;
}
.logo{width:54px; height:54px; flex:0 0 auto; filter: drop-shadow(0 0 10px rgba(39,240,208,.35));}
.title h1{margin:0; font-size:clamp(1.3rem, 1.1rem + 1vw, 2rem)}
.subtitle{margin:.25rem 0 0; color:var(--muted)}

/* Carte principale (contient le TEXTE ORIGINAL) */
.card{padding:22px}
.prose .original-text{
  white-space:pre-wrap;     /* conserve retours & espaces d’origine */
  font-size:1rem;
  line-height:1.65;
  color:var(--fg);
}

/* ====== GRID DES 2 CARDS ====== */
.cards-grid{
  margin-top:22px;
  display:grid;
  gap:16px;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 700px){
  .cards-grid{ grid-template-columns: 1fr; }
}

.cardX{
  position:relative;
  display:flex;
  align-items:stretch;
  padding:16px;
  text-decoration:none;
  color:var(--fg);
  border:1px solid rgba(159,255,227,.18);
  transition: transform .18s ease, box-shadow .18s ease, background-color .25s ease, border-color .25s ease;
  overflow:hidden;
}
.cardX:hover{
  transform: translateY(-2px);
  background: var(--glass-strong);
  box-shadow: 0 14px 36px rgba(0,0,0,.28);
  border-color: rgba(159,255,227,.35);
}
.cardX:focus-visible{
  outline: 2px solid #27F0D0;
  outline-offset: 4px;
  border-radius: calc(var(--radius) + 2px);
}

.cardX-icon{
  flex:0 0 64px;
  width:64px; height:64px;
  display:grid; place-items:center;
  margin-right:14px;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(39,240,208,.18), rgba(0,191,166,.10));
  border: 1px solid rgba(159,255,227,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.cardX-icon svg{ width:40px; height:40px; }

.cardX-body h3{
  margin:.2rem 0 .2rem;
  font-size:1.05rem;
  letter-spacing:.2px;
  font-weight:800;
}
.cardX-body p{
  margin:.2rem 0 0;
  color: var(--muted);
  font-size:.95rem;
}

/* ====== FORMULAIRE DE RECHERCHE ====== */
.search{
  margin-top:22px;
  padding:18px;
}
.search-form{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.search-form label{
  font-weight:700;
  letter-spacing:.2px;
}
.search-row{
  display:flex; gap:10px; align-items:center;
}
.search-row input[type="text"]{
  flex:1 1 auto;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(159,255,227,.35);
  background: rgba(255,255,255,.06);
  color: var(--fg);
}
.search-row input::placeholder{ color: rgba(255,255,255,.55); }
.btn.primary{
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(159,255,227,.35);
  color: var(--fg);
  background: linear-gradient(135deg, rgba(39,240,208,.28), rgba(0,191,166,.18));
  font-weight:700; letter-spacing:.2px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn.primary:hover{ transform: translateY(-1px); box-shadow: 0 6px 22px rgba(39,240,208,.25); }

@media (max-width:560px){
  .search-row{ flex-direction:column; align-items:stretch; }
  .btn.primary{ width:100%; }
}

/* Pied de page */
.site-footer{ text-align:center; font-size:.95rem; color:var(--muted) }

/* Accessibilité */
:focus-visible{
  outline:2px solid #27F0D0; outline-offset:2px; border-radius:8px;
}

/* Traduction par sourate */
/* islamic-glass.css */
/* Thème Islamic Glassmorphism — motifs géométriques + cartes en verre lumineux */

:root{
  --bg: #061417;
  --bg-2:#0a1b20;
  --fg:#EFFFFA;
  --muted:#b6e6db;

  --primary:#00BFA6;   /* émeraude */
  --accent:#9FFFE3;    /* lueur */
  --glass:rgba(255,255,255,.08);
  --glass-strong:rgba(255,255,255,.14);
  --glass-border:rgba(255,255,255,.20);

  --radius:18px;
  --blur:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);

  --container:1100px;
}

/* Mode clair auto si l’utilisateur le préfère */
@media (prefers-color-scheme: light){
  :root{
    --bg:#f5fffc;
    --bg-2:#eafff9;
    --fg:#0d2a28;
    --muted:#2e6d63;
    --glass:rgba(255,255,255,.6);
    --glass-strong:rgba(255,255,255,.7);
    --glass-border:rgba(0,0,0,.08);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--fg);
  background:
    radial-gradient(1200px 800px at 20% -10%, #072428 0%, transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, #042022 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
}

/* Arrière-plan: motif géométrique islamique (SVG) + halos */
.bg-pattern{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(159,255,227,.08) 0 40%, transparent 41%) repeat,
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 64 64' fill='none'>\
<g opacity='0.08' stroke='%239FFFE3' stroke-width='0.6'>\
<path d='M32 2l8 14 16 0-8 14 8 14-16 0-8 14-8-14-16 0 8-14-8-14 16 0 8-14z'/>\
<circle cx='32' cy='32' r='6'/></g></svg>") center/320px 320px repeat;
  mix-blend-mode:screen; opacity:.8;
}
.bg-glow{
  position:fixed; inset:-20vmax; z-index:-3; pointer-events:none;
  background:
   radial-gradient(40vmax 40vmax at 60% 10%, rgba(0,191,166,.18) 0%, transparent 60%),
   radial-gradient(30vmax 30vmax at 20% 70%, rgba(159,255,227,.12) 0%, transparent 65%);
  filter:blur(20px);
}

/* Composant verre */
.glass{
  background:var(--glass);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.glow{position:relative}
.glow::before{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  border-radius:calc(var(--radius) + 1px);
  background:linear-gradient(135deg, rgba(39,240,208,.65), rgba(0,191,166,0) 40%, rgba(159,255,227,.5) 70%, rgba(39,240,208,0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px;
}

/* Layout */
.site-header, .site-footer{
  margin:24px auto;
  max-width:var(--container);
  padding:16px 20px;
}
.container{
  max-width:var(--container);
  margin:24px auto 80px;
  padding:0 16px;
}

.brand{
  display:flex; align-items:center; gap:16px;
}
.logo{width:54px; height:54px; flex:0 0 auto; filter: drop-shadow(0 0 10px rgba(39,240,208,.35));}
.title h1{margin:0; font-size:clamp(1.3rem, 1.1rem + 1vw, 2rem)}
.subtitle{margin:.25rem 0 0; color:var(--muted)}

/* Carte principale (texte original + formulaire) */
.card{padding:22px}
.prose .original-text{
  white-space:pre-wrap;     /* conserve retours & espaces d’origine */
  font-size:1rem;
  line-height:1.65;
  color:var(--fg);
}

/* Formulaire de sélection */
.form-sourate{
  margin: 16px 0 6px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.select-glass{
  appearance:none;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(159,255,227,.35);
  background:
     linear-gradient(135deg, rgba(39,240,208,.10), rgba(0,191,166,.06)),
     rgba(255,255,255,.05);
  color:var(--fg);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(159,255,227,.35);
  color: var(--fg);
  font-weight:700; letter-spacing:.2px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .2s ease;
}
.btn.primary{
  background: linear-gradient(135deg, rgba(39,240,208,.28), rgba(0,191,166,.18));
}
.btn.primary:hover{ transform: translateY(-1px); box-shadow: 0 6px 22px rgba(39,240,208,.25); }

/* Messages */
.db-error{
  margin-top: 8px;
  color: #ffd1d1;
  background: rgba(255, 63, 63, .08);
  border: 1px solid rgba(255, 63, 63, .25);
  padding: 10px 12px;
  border-radius: 10px;
}

.result h3{ margin-top: 0; }

/* Accessibilité */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Pied de page */
.site-footer{ text-align:center; font-size:.95rem; color:var(--muted) }

/* Mobile */
@media (max-width:560px){
  .form-sourate{ grid-template-columns: 1fr; }
}

/* lecteur */
/* islamic-glass.css — Islamic Glassmorphism + grand espace décoré + audio moderne */

:root{
  --bg: #061417; --bg-2:#0a1b20; --fg:#EFFFFA; --muted:#b6e6db;
  --primary:#00BFA6; --accent:#9FFFE3;
  --glass:rgba(255,255,255,.08); --glass-strong:rgba(255,255,255,.14); --glass-border:rgba(255,255,255,.20);
  --radius:18px; --blur:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  --container:1100px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f5fffc; --bg-2:#eafff9; --fg:#0d2a28; --muted:#2e6d63;
    --glass:rgba(255,255,255,.6); --glass-strong:rgba(255,255,255,.7); --glass-border:rgba(0,0,0,.08);
  }
}

/* Layout global (+ footer “collant” si peu de contenu) */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; display:flex; flex-direction:column; min-height:100vh; color:var(--fg);
  background:
    radial-gradient(1200px 800px at 20% -10%, #072428 0%, transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, #042022 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
}
.site-footer{ margin-top:auto; text-align:center; font-size:.95rem; color:var(--muted) }

/* Arrière-plan décoratif */
.bg-pattern{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(159,255,227,.08) 0 40%, transparent 41%) repeat,
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 64 64' fill='none'>\
<g opacity='0.08' stroke='%239FFFE3' stroke-width='0.6'>\
<path d='M32 2l8 14 16 0-8 14 8 14-16 0-8 14-8-14-16 0 8-14-8-14 16 0 8-14z'/>\
<circle cx='32' cy='32' r='6'/></g></svg>") center/320px 320px repeat;
  mix-blend-mode:screen; opacity:.8;
}
.bg-glow{
  position:fixed; inset:-20vmax; z-index:-3; pointer-events:none;
  background:
   radial-gradient(40vmax 40vmax at 60% 10%, rgba(0,191,166,.18) 0%, transparent 60%),
   radial-gradient(30vmax 30vmax at 20% 70%, rgba(159,255,227,.12) 0%, transparent 65%);
  filter:blur(20px);
}

/* Composants “verre” */
.glass{
  background:var(--glass);
  backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.glow{position:relative}
.glow::before{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  border-radius:calc(var(--radius) + 1px);
  background:linear-gradient(135deg, rgba(39,240,208,.65), rgba(0,191,166,0) 40%, rgba(159,255,227,.5) 70%, rgba(39,240,208,0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px;
}

/* En-tête / conteneur */
.site-header{ margin:24px auto; max-width:var(--container); padding:16px 20px; }
.container{ max-width:var(--container); width:100%; margin:24px auto 80px; padding:0 16px; }
.brand{ display:flex; align-items:center; gap:16px; }
.logo{ width:54px; height:54px; flex:0 0 auto; filter: drop-shadow(0 0 10px rgba(39,240,208,.35)); }
.title h1{ margin:0; font-size:clamp(1.3rem, 1.1rem + 1vw, 2rem) }
.subtitle{ margin:.25rem 0 0; color:var(--muted) }

/* Grand espace texte décoré (bande “escalier”) */
.text-panel{ position:relative; padding:28px 24px 24px; min-height:360px; overflow:hidden; }
.text-panel .staircase{
  position:absolute; inset:0 0 0 auto; width:86px; opacity:.22;
  background:
    repeating-linear-gradient(180deg, rgba(159,255,227,.24) 0 8px, rgba(159,255,227,0.04) 8px 16px),
    linear-gradient(180deg, rgba(39,240,208,.35), rgba(39,240,208,0));
  border-left:1px solid rgba(159,255,227,.35);
  filter: blur(.2px);
}


/* Lecteur audio moderne */
.player-section{ margin-top:22px; }
.audio-card{ padding:16px; }
.audio-head{ display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.disc{
  width:56px; height:56px; border-radius:50%;
  background:
    radial-gradient(closest-side, rgba(159,255,227,.55), rgba(159,255,227,.05) 70%, transparent 71%),
    conic-gradient(from 0deg, rgba(39,240,208,.24), rgba(0,191,166,.18), rgba(39,240,208,.24));
  border:1px solid rgba(159,255,227,.35);
  display:grid; place-items:center;
  animation: spin 7.5s linear infinite;
}
.disc .dot{ width:10px; height:10px; border-radius:50%; background:#D3FFF3; box-shadow:0 0 8px rgba(159,255,227,.8); }
@keyframes spin{ to{ transform: rotate(360deg); } }
.meta h3{ margin:0 0 2px; font-size:1.05rem; font-weight:800; letter-spacing:.2px; }
.meta .muted{ margin:0; color:var(--muted); font-size:.95rem; }

.eq{ margin-left:auto; display:flex; align-items:flex-end; gap:3px; height:18px; }
.eq span{
  width:3px; background:linear-gradient(180deg, #27F0D0, rgba(39,240,208,.15));
  display:block; border-radius:4px; height:10px; opacity:.9;
  animation: bounce 1s ease-in-out infinite;
}
.eq span:nth-child(2){ animation-delay:.15s }
.eq span:nth-child(3){ animation-delay:.30s }
.eq span:nth-child(4){ animation-delay:.45s }
@keyframes bounce{ 0%,100%{height:6px} 50%{height:18px} }

.audio-body{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(159,255,227,.25);
  border-radius:12px; padding:10px;
}
audio{ width:100%; filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)); }

.audio-foot{ display:flex; gap:8px; margin-top:10px; }
.chip{
  padding:8px 12px; border-radius:999px;
  background:rgba(159,255,227,.08);
  border:1px solid rgba(159,255,227,.25);
  color:var(--fg);
}
.chip.primary{
  background: linear-gradient(135deg, rgba(39,240,208,.28), rgba(0,191,166,.18));
  border-color: rgba(159,255,227,.35);
}

/* Accessibilité & mobile */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:560px){
  .logo{ width:46px; height:46px }
  .text-panel{ min-height:280px }
  .text-panel .staircase{ width:66px }
}

footer{
  margin-bottom: 5rem;
}