/* islamic-glass.css — Islamic Glassmorphism : fond géométrique + cartes en verre lumineux */

: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;
}

/* Mode clair automatique */
@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 décoratif : motif géométrique islamique + 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);
}

/* 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, .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) }

/* Grand panneau texte (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);
}

/* Affichage du texte original tel quel (retours préservés) */
.original-text{
  white-space:pre-wrap;
  font-size:1rem; line-height:1.65; color:var(--fg);
}

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

/* Mobile */
@media (max-width:560px){
  .logo{ width:46px; height:46px }
  .text-panel{ min-height:300px }
  .text-panel .staircase{ width:66px }
}

/* Bouton */

/* Bouton “verre lumineux” */
.btn-glass{
  --h: 46px;
  display:inline-flex; align-items:center; gap:10px;
  height:var(--h); padding:0 16px 0 14px;
  color:var(--fg); font-weight:700; letter-spacing:.2px;
  border:none; border-radius:var(--radius);
  background:var(--glass);
  backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-border);
  position:relative; overflow:hidden; isolation:isolate; cursor:pointer;
  transition: transform .12s ease, box-shadow .2s ease, background-color .25s ease;
  box-shadow: 0 10px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Halo animé de fond */
.btn-glass__bg{
  position:absolute; inset:-40%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120px 120px at 10% 50%, rgba(39,240,208,.28), transparent 60%),
    radial-gradient(160px 160px at 80% 50%, rgba(159,255,227,.22), transparent 60%);
  transform:scale(.9); opacity:.6;
  transition: transform .35s ease, opacity .35s ease;
}

/* Icône dans une pastille “verre” */
.btn-glass__icon{
  width:32px; height:32px; display:grid; place-items:center;
  border-radius:10px;
  background: linear-gradient(135deg, rgba(39,240,208,.18), rgba(0,191,166,.10));
  border:1px solid rgba(159,255,227,.35);
  transition: transform .2s ease;
}

.btn-glass__label{ position:relative; z-index:1; }

/* Interactions */
.btn-glass:hover{
  transform: translateY(-1px);
  box-shadow:0 12px 32px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-glass:hover .btn-glass__bg{ transform:scale(1); opacity:.9; }
.btn-glass:hover .btn-glass__icon{ transform: translateX(-1.5px); }
.btn-glass:active{ transform: translateY(0); }

/* Accessibilité clavier */
.btn-glass:focus-visible{
  outline:2px solid #27F0D0; outline-offset:3px;
}

/* Variante pleine largeur si besoin */
.btn-glass--block{ width:100%; justify-content:center; }

/* RTL : inversion de la micro-translation de l’icône */
html[dir="rtl"] .btn-glass:hover .btn-glass__icon{ transform: translateX(1.5px); }