/* ============================================================
   PACTE DU QURAN — Namlo & Doudou
   Style premium 3D, light/luxe, doré-émeraude-ivoire
   ============================================================ */

:root{
  --ivory:        #fbf6ec;
  --ivory-2:      #f3ead6;
  --cream:        #efe3c4;
  --gold:         #c79a3a;
  --gold-deep:    #a0731a;
  --gold-light:   #f1d27a;
  --emerald:      #1f6b54;
  --emerald-deep: #0f4a39;
  --emerald-soft: #2d8a6e;
  --ink:          #1a2620;
  --ink-soft:     #4a4035;
  --rose:         #b54f4f;
  --paper-edge:   #d9c79b;

  --shadow-1: 0 1px 0 #fff inset, 0 -1px 0 rgba(0,0,0,.06) inset;
  --shadow-3d:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -1px 0 rgba(120,80,20,.08) inset,
    0  6px 14px rgba(80,55,15,.10),
    0 22px 38px rgba(60,40,10,.18),
    0 60px 90px rgba(40,28,10,.22);
  --shadow-deep:
    0 30px 60px rgba(40,28,10,.28),
    0 80px 140px rgba(30,20,5,.30);

  --radius: 22px;
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html,body{ margin:0; padding:0; }

html{ scroll-behavior:smooth; }

button, a, input, select, textarea, canvas, [role="button"]{
  touch-action: manipulation;
}
button{
  -webkit-user-select: none;
  user-select: none;
}

body{
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 800px at 10% -10%, #fff7e3 0%, transparent 60%),
    radial-gradient(900px 700px at 110% 10%, #e6f5ec 0%, transparent 55%),
    radial-gradient(900px 900px at 50% 120%, #fbe9c2 0%, transparent 60%),
    linear-gradient(180deg, #fdf7e7 0%, #f5ead0 100%);
  min-height:100vh;
  overflow-x:hidden;
  perspective: 1600px;
}

/* ---------- décor ambiant ---------- */
.ambient{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.orb{ position:absolute; border-radius:50%; filter: blur(60px); opacity:.55; }
.orb-1{ width:520px; height:520px; left:-120px; top:-160px;
  background: radial-gradient(circle, #ffe6a8 0%, transparent 65%); animation: float1 18s ease-in-out infinite; }
.orb-2{ width:600px; height:600px; right:-160px; top:30%;
  background: radial-gradient(circle, #b9e5cf 0%, transparent 65%); animation: float2 22s ease-in-out infinite; }
.orb-3{ width:500px; height:500px; left:30%; bottom:-200px;
  background: radial-gradient(circle, #f6cf8a 0%, transparent 65%); animation: float3 25s ease-in-out infinite; }

@keyframes float1{ 0%,100%{ transform:translate(0,0)}50%{ transform:translate(40px,30px)} }
@keyframes float2{ 0%,100%{ transform:translate(0,0)}50%{ transform:translate(-50px,40px)} }
@keyframes float3{ 0%,100%{ transform:translate(0,0)}50%{ transform:translate(30px,-40px)} }

.grain{
  position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(120,80,20,.10) 1px, transparent 1px),
    radial-gradient(rgba(120,80,20,.06) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 1px;
  opacity:.35;
  mix-blend-mode: multiply;
}

/* poussière dorée flottante */
.dust{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(199,154,58,.55) 0, transparent 2px),
    radial-gradient(circle at 78% 14%, rgba(241,210,122,.55) 0, transparent 2px),
    radial-gradient(circle at 34% 60%, rgba(199,154,58,.45) 0, transparent 2px),
    radial-gradient(circle at 88% 72%, rgba(241,210,122,.5)  0, transparent 2px),
    radial-gradient(circle at 22% 90%, rgba(199,154,58,.45) 0, transparent 2px),
    radial-gradient(circle at 64% 36%, rgba(241,210,122,.4)  0, transparent 2px),
    radial-gradient(circle at 50% 80%, rgba(199,154,58,.4)  0, transparent 2px);
  background-size: 100% 100%;
  animation: dustDrift 28s ease-in-out infinite alternate;
  opacity:.7;
}
@keyframes dustDrift{
  0%   { transform: translate3d(0,0,0); }
  50%  { transform: translate3d(-18px,12px,0); }
  100% { transform: translate3d(20px,-10px,0); }
}

/* ---------- bandeau bismillah ---------- */
.topbar{
  position:relative; z-index:2;
  text-align:center;
  padding: 28px 20px 8px;
}
.bismillah{
  display:inline-flex; flex-direction:column; align-items:center; gap:4px;
  padding: 12px 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fffaee 0%, #f6e9c7 100%);
  border: 1px solid #e7d5a3;
  box-shadow:
    0 1px 0 #fff inset,
    0 -1px 0 rgba(120,80,20,.1) inset,
    0 12px 28px rgba(120,80,20,.12);
}
.bismillah .ar{
  font-family: "Amiri", serif;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--emerald-deep);
  letter-spacing: .5px;
}
.bismillah .fr{
  font-size: 12.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- page ---------- */
.page{
  position:relative; z-index:2;
  max-width: 1100px;
  margin: 24px auto 60px;
  padding: 0 22px;
}

/* ---------- parchemin (carte 3D) ---------- */
.parchment{
  position:relative;
  border-radius: calc(var(--radius) + 6px);
  background:
    radial-gradient(120% 80% at 50% 0%, #fff7e3 0%, transparent 60%),
    linear-gradient(180deg, #fdf6df 0%, #f3e2b3 100%);
  padding: 14px;
  box-shadow: var(--shadow-3d);
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.parchment::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(135deg, #f6dfa3, #c79a3a 35%, #8a5a13 50%, #c79a3a 65%, #f6dfa3);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}
.parchment-inner{
  position:relative;
  background:
    radial-gradient(180% 110% at 50% -10%, #fffaea 0%, transparent 50%),
    linear-gradient(180deg, #fbf2d7 0%, #f1e2ad 100%);
  border-radius: var(--radius);
  padding: 50px clamp(22px, 5vw, 70px) 60px;
  overflow:hidden;
  box-shadow:
    0 0 0 1px #e9d287 inset,
    0 0 0 8px #fdf6df inset,
    0 0 0 9px #d9b864 inset,
    0 30px 50px rgba(120,80,20,.12) inset;
}
.parchment-inner::before,
.parchment-inner::after{
  content:""; position:absolute; pointer-events:none;
}
.parchment-inner::before{
  inset: 14px;
  border: 1px dashed rgba(160,115,26,.35);
  border-radius: calc(var(--radius) - 6px);
}
.parchment-inner::after{
  inset:0;
  background:
    radial-gradient(circle at 8% 12%, rgba(160,115,26,.08), transparent 25%),
    radial-gradient(circle at 92% 8%, rgba(160,115,26,.08), transparent 25%),
    radial-gradient(circle at 6% 92%, rgba(160,115,26,.10), transparent 25%),
    radial-gradient(circle at 94% 96%, rgba(160,115,26,.10), transparent 25%);
}

/* le parchemin reste plat par défaut, la parallaxe JS s'occupe du 3D au survol souris */
.tilt-3d{ transform: none; }
@media (hover: hover){
  .parchment:hover{ transform: translateY(-2px); }
}

/* ornements SVG */
.ornament{
  color: var(--gold-deep);
  display:flex; justify-content:center;
  margin: 0 auto 26px;
  width: min(560px, 80%);
}
.ornament.bottom{ margin: 30px auto 0; transform: rotate(180deg); }
.ornament svg{ width:100%; height:50px; }

/* ---------- HERO ---------- */
.hero{ text-align:center; margin-bottom: 40px; position:relative; }
.badge{
  width:78px; height:78px; margin: 0 auto 18px;
  display:grid; place-items:center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #fff5cc 0%, #e6b94a 55%, #8a5a13 100%);
  box-shadow:
    0 1px 0 #fff7d8 inset,
    0 -2px 4px rgba(0,0,0,.18) inset,
    0 12px 24px rgba(120,80,20,.35),
    0 24px 38px rgba(60,40,10,.22);
  font-size: 30px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.35);
  transform: translateZ(40px);
}

.title{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  margin: 0 0 12px;
  line-height: 1;
}
.title-overline{
  font-family: "Dancing Script", cursive;
  font-size: clamp(20px, 2.5vw, 28px);
  color: var(--emerald);
  letter-spacing: .5px;
}
.title-main{
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(64px, 11vw, 130px);
  letter-spacing: -2px;
  background: linear-gradient(180deg, #f7e2a8 0%, #c79a3a 35%, #6f4a10 60%, #c79a3a 80%, #f6dfa3 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow:
    0 2px 0 rgba(255,255,255,.6),
    0 6px 12px rgba(120,80,20,.25);
  filter: drop-shadow(0 14px 18px rgba(120,80,20,.25));
}
.title-arabic{
  font-family: "Amiri", serif;
  font-size: clamp(22px, 3vw, 34px);
  color: var(--emerald-deep);
  margin-top: 4px;
}

.subtitle{
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--ink-soft);
  max-width: 640px; margin: 14px auto 24px;
  line-height: 1.55;
}
.subtitle strong{
  font-family: "Dancing Script", cursive;
  font-weight: 700;
  font-size: 1.25em;
  color: var(--emerald-deep);
  padding: 0 4px;
}

.meta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin-top: 8px;
}
.chip{
  display:inline-flex; flex-direction:column; align-items:flex-start;
  padding: 8px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffaea 0%, #f3e3b0 100%);
  border: 1px solid #e6cf85;
  box-shadow:
    0 1px 0 #fff inset,
    0 -1px 0 rgba(120,80,20,.1) inset,
    0 8px 16px rgba(120,80,20,.10);
  min-width: 130px;
}
.chip-k{
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.chip-v{
  font-family: "Reem Kufi", sans-serif;
  font-weight: 600;
  color: var(--emerald-deep);
  font-size: 16px;
}

/* ---------- titre de section ---------- */
.section-title{
  display:flex; align-items:baseline; justify-content:center;
  gap: 16px; margin: 40px 0 24px;
  position:relative;
}
.section-title::before,
.section-title::after{
  content:""; flex:1; height:1px; max-width: 140px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.section-title .ar{
  font-family: "Amiri", serif;
  font-size: clamp(28px, 3.4vw, 38px);
  color: var(--emerald-deep);
}
.section-title .fr{
  font-family: "Dancing Script", cursive;
  font-size: clamp(22px, 2.5vw, 30px);
  color: var(--gold-deep);
}

/* ---------- conditions ---------- */
.conditions{
  list-style:none; padding:0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.cond{
  position:relative;
  background:
    radial-gradient(120% 100% at 0% 0%, #fffaea 0%, transparent 60%),
    linear-gradient(180deg, #fff7df 0%, #f5e3ac 100%);
  border-radius: 18px;
  padding: 22px 22px 22px 88px;
  border: 1px solid #e6cf85;
  box-shadow:
    0 1px 0 #fff inset,
    0 -1px 0 rgba(120,80,20,.08) inset,
    0 10px 22px rgba(120,80,20,.10),
    0 22px 44px rgba(80,55,15,.10);
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.cond:hover{
  transform: translateY(-3px) rotateX(1.5deg);
  box-shadow:
    0 1px 0 #fff inset,
    0 -1px 0 rgba(120,80,20,.08) inset,
    0 14px 28px rgba(120,80,20,.14),
    0 36px 60px rgba(80,55,15,.16);
}
.cond-num{
  position:absolute; left:18px; top:18px;
  width: 56px; height: 56px;
  display:grid; place-items:center;
  border-radius: 50%;
  font-family: "Reem Kufi", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  background: radial-gradient(circle at 30% 25%, #fff3c2 0%, #d8a73a 45%, #6e4a10 100%);
  box-shadow:
    0 1px 0 #fff7d8 inset,
    0 -2px 4px rgba(0,0,0,.18) inset,
    0 8px 16px rgba(120,80,20,.30);
  text-shadow: 0 2px 3px rgba(0,0,0,.35);
}
.cond-body h3{
  margin: 0 0 8px;
  font-family: "Reem Kufi", sans-serif;
  font-size: 18px;
  color: var(--emerald-deep);
  font-weight: 600;
}
.cond-body p{
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.cond-key{
  background:
    radial-gradient(140% 100% at 0% 0%, #fff5d4 0%, transparent 60%),
    linear-gradient(180deg, #fbe7a8 0%, #efc967 100%);
  border-color: #d9b251;
}
.cond-key .cond-body h3{ color: var(--emerald-deep); }
.cond-key::after{
  content:"★"; position:absolute; top:10px; right:14px;
  color: var(--gold-deep); font-size: 14px; opacity:.7;
}

/* ---------- duaa ---------- */
.duaa{
  margin: 40px auto;
  max-width: 720px;
  text-align:center;
  padding: 26px 28px;
  border-radius: 18px;
  background:
    radial-gradient(140% 100% at 50% 0%, #ecf7f0 0%, transparent 70%),
    linear-gradient(180deg, #f6fbf5 0%, #d8ead7 100%);
  border: 1px solid #b8d4bc;
  box-shadow:
    0 1px 0 #fff inset,
    0 -1px 0 rgba(15,74,57,.10) inset,
    0 12px 28px rgba(15,74,57,.12);
}
.duaa-ar{
  font-family: "Amiri", serif;
  font-size: clamp(22px, 2.6vw, 30px);
  color: var(--emerald-deep);
  margin: 0 0 6px;
}
.duaa-fr{
  margin: 0;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 16px;
}

/* ---------- signatures ---------- */
.signs{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 14px;
}
.sign-card{
  position:relative;
  padding: 24px;
  border-radius: 22px;
  background:
    radial-gradient(140% 100% at 0% 0%, #fffaea 0%, transparent 55%),
    linear-gradient(180deg, #fff7e0 0%, #f1dfa3 100%);
  border: 1px solid #e0c474;
  box-shadow:
    0 1px 0 #fff inset,
    0 -1px 0 rgba(120,80,20,.10) inset,
    0 14px 30px rgba(120,80,20,.14),
    0 36px 60px rgba(80,55,15,.14);
  overflow:hidden;
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.sign-card:hover{ transform: translateY(-3px); }
.sign-card.signed{
  background:
    radial-gradient(140% 100% at 0% 0%, #f3fbef 0%, transparent 55%),
    linear-gradient(180deg, #eaf6e2 0%, #c5dfb2 100%);
  border-color: #95c283;
}

.sign-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
  border-bottom: 1px dashed rgba(160,115,26,.4);
  padding-bottom: 12px;
}
.sign-name{
  font-family: "Dancing Script", cursive;
  font-weight: 700;
  font-size: 38px;
  color: var(--emerald-deep);
  line-height: 1;
}
.sign-role{
  font-family: "Reem Kufi", sans-serif;
  font-size: 13px;
  color: var(--gold-deep);
  letter-spacing: .05em;
}

.sign-pad{
  position:relative;
  height: 180px;
  border-radius: 14px;
  background:
    repeating-linear-gradient(180deg, transparent 0 28px, rgba(160,115,26,.12) 28px 29px),
    linear-gradient(180deg, #fffdf3 0%, #fbf2cf 100%);
  border: 1px solid #e6cf85;
  box-shadow:
    0 1px 0 #fff inset,
    0 6px 14px rgba(120,80,20,.10) inset;
  overflow:hidden;
  cursor: crosshair;
}
.sign-pad canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  touch-action: none;
}
.sign-hint{
  position:absolute; left:0; right:0; bottom:14px;
  text-align:center;
  font-family: "Dancing Script", cursive;
  color: rgba(160,115,26,.55);
  font-size: 18px;
  pointer-events:none;
  transition: opacity .3s;
}
.sign-pad.has-ink .sign-hint{ opacity:0; }

.sign-actions{
  display:flex; gap:10px; justify-content:flex-end;
  margin-top: 14px;
}
.btn{
  appearance:none; -webkit-appearance: none; border:none; cursor:pointer;
  font-family: "Reem Kufi", sans-serif;
  font-size: 14px; font-weight:600;
  padding: 10px 18px;
  border-radius: 12px;
  letter-spacing: .03em;
  transition: transform .2s, box-shadow .2s, filter .2s;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.btn *{ pointer-events: none; }
.btn.solid{
  color: #fff;
  background: linear-gradient(180deg, #2d8a6e 0%, #0f4a39 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 -1px 0 rgba(0,0,0,.2) inset,
    0 8px 18px rgba(15,74,57,.30);
}
@media (hover: hover){
  .btn.solid:hover{ transform: translateY(-1px); filter: brightness(1.05); }
  .btn.ghost:hover{ filter: brightness(1.03); }
  .btn.danger:hover{ filter: brightness(1.04); }
}
.btn:active{ transform: translateY(1px) scale(.98); filter: brightness(.95); }
.btn.ghost{
  color: var(--gold-deep);
  background: linear-gradient(180deg, #fffaea 0%, #f3e3b0 100%);
  border: 1px solid #e0c474;
  box-shadow:
    0 1px 0 #fff inset,
    0 6px 12px rgba(120,80,20,.10);
}
.btn:disabled{ opacity:.55; cursor: not-allowed; transform:none; }

.sign-stamp{
  position:absolute; top:50%; right:-20px;
  transform: translateY(-50%) rotate(-12deg) scale(.4);
  font-family: "Reem Kufi", sans-serif;
  font-size: 60px;
  font-weight: 700;
  letter-spacing: .15em;
  color: rgba(181,79,79,.0);
  border: 6px double rgba(181,79,79,.0);
  padding: 6px 18px;
  border-radius: 8px;
  pointer-events:none;
  transition: transform .5s cubic-bezier(.2,1.6,.4,1), color .4s, border-color .4s;
}
.sign-card.signed .sign-stamp{
  color: rgba(181,79,79,.85);
  border-color: rgba(181,79,79,.7);
  transform: translateY(-50%) rotate(-12deg) scale(1);
}

/* ---------- sceau final ---------- */
.seal{
  margin: 50px auto 10px;
  display:flex; justify-content:center;
  opacity: 0;
  transform: scale(.6) rotateX(40deg);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,1.6,.4,1);
}
.seal.show{ opacity:1; transform: scale(1) rotateX(0); }
.seal-disc{
  position:relative;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #ffe9b5 0%, #c79a3a 50%, #6f4a10 100%);
  box-shadow:
    0 1px 0 #fff7d8 inset,
    0 -3px 6px rgba(0,0,0,.25) inset,
    0 16px 30px rgba(120,80,20,.4),
    0 40px 60px rgba(60,40,10,.25);
  display:grid; place-items:center;
}
.seal-ring{
  position:absolute; inset:8px;
  border-radius:50%;
  border: 2px dashed rgba(255,255,255,.55);
  animation: spin 22s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.seal-center{
  position:relative;
  text-align:center;
  color:#fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.4);
}
.seal-ar{
  display:block;
  font-family: "Amiri", serif;
  font-size: 36px; line-height:1;
}
.seal-fr{
  display:block;
  font-family: "Reem Kufi", sans-serif;
  font-size: 11px; letter-spacing: .25em;
  margin-top: 6px;
}
.seal-date{
  display:block;
  font-family: "Reem Kufi", sans-serif;
  font-size: 12px;
  margin-top: 4px;
  opacity:.9;
}

/* ---------- footer ---------- */
.foot{
  margin: 36px auto 0;
  text-align:center;
  color: var(--ink-soft);
}
.foot p{ margin: 4px 0; }
.foot p:first-child{
  font-family: "Amiri", serif;
  color: var(--emerald-deep);
  font-size: 18px;
}
.foot-fr{
  font-family: "Dancing Script", cursive;
  font-size: 18px;
  color: var(--gold-deep);
}

/* ---------- progression (anneau) ---------- */
.progress-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 14px;
}
.prog-card{
  position:relative;
  padding: 24px 22px;
  border-radius: 22px;
  text-align:center;
  background:
    radial-gradient(140% 100% at 0% 0%, #fffaea 0%, transparent 55%),
    linear-gradient(180deg, #fff7e0 0%, #f1dfa3 100%);
  border: 1px solid #e0c474;
  box-shadow:
    0 1px 0 #fff inset,
    0 -1px 0 rgba(120,80,20,.10) inset,
    0 14px 30px rgba(120,80,20,.14),
    0 36px 60px rgba(80,55,15,.14);
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.prog-card:hover{ transform: translateY(-3px) rotateX(1.5deg); }
.prog-name{
  font-family: "Dancing Script", cursive;
  font-weight: 700;
  font-size: 32px;
  color: var(--emerald-deep);
  line-height: 1;
  margin-bottom: 14px;
}
.ring{
  position:relative;
  width: 170px; height: 170px;
  margin: 0 auto 16px;
}
.ring svg{
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.ring-bg{
  fill: none;
  stroke: rgba(160,115,26,.18);
  stroke-width: 8;
}
.ring-fg{
  fill: none;
  stroke: url(#ringGrad);
  stroke: #c79a3a;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 326.7;            /* 2 * PI * 52 */
  stroke-dashoffset: 326.7;
  filter: drop-shadow(0 4px 8px rgba(120,80,20,.35));
  transition: stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1), stroke .4s;
}
.ring.complete .ring-fg{
  stroke: #2d8a6e;
  filter: drop-shadow(0 4px 10px rgba(15,74,57,.45));
}
.ring-text{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  line-height:1;
}
.ring-num{
  font-family: "Reem Kufi", sans-serif;
  font-weight: 700;
  font-size: 44px;
  color: var(--emerald-deep);
  text-shadow: 0 2px 0 rgba(255,255,255,.6);
}
.ring-tot{
  font-family: "Reem Kufi", sans-serif;
  font-size: 14px;
  color: var(--gold-deep);
  margin-top: 4px;
  letter-spacing: .08em;
}
.prog-actions{
  display:flex; gap:8px; justify-content:center;
}
.btn-sm{ padding: 7px 14px; font-size: 13px; border-radius: 10px; }

.prog-hint{
  font-size: 13px;
  color: var(--gold-deep);
  font-style: italic;
  letter-spacing: .03em;
}

/* ---------- liste des sourates ---------- */
.surah-toolbar{
  display:flex; flex-wrap:wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  margin: 8px 0 18px;
}
.search-wrap{
  position:relative; flex: 1; min-width: 240px;
}
.search-ico{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-size: 16px; opacity:.6;
}
#surahSearch{
  width: 100%;
  padding: 11px 14px 11px 40px;
  border-radius: 12px;
  border: 1px solid #e0c474;
  background: linear-gradient(180deg, #fffaea 0%, #f6e9c7 100%);
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  box-shadow:
    0 1px 0 #fff inset,
    0 6px 12px rgba(120,80,20,.08);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
#surahSearch:focus{
  border-color: var(--gold);
  box-shadow:
    0 1px 0 #fff inset,
    0 0 0 4px rgba(199,154,58,.18),
    0 6px 14px rgba(120,80,20,.12);
}
.page-size{
  display:flex; align-items:center; gap:8px;
  font-size: 13px;
  color: var(--gold-deep);
  letter-spacing: .03em;
}
#pageSize{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #e0c474;
  background: linear-gradient(180deg, #fffaea 0%, #f6e9c7 100%);
  font-family: inherit;
  color: var(--emerald-deep);
  font-weight: 600;
  cursor: pointer;
}

.surah-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.surah-card{
  position:relative;
  display:grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  background:
    radial-gradient(140% 100% at 0% 0%, #fffaea 0%, transparent 55%),
    linear-gradient(180deg, #fff7e0 0%, #f4e3ac 100%);
  border: 1px solid #e0c474;
  box-shadow:
    0 1px 0 #fff inset,
    0 -1px 0 rgba(120,80,20,.08) inset,
    0 8px 18px rgba(120,80,20,.10),
    0 22px 38px rgba(80,55,15,.10);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.surah-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 #fff inset,
    0 12px 24px rgba(120,80,20,.14),
    0 32px 50px rgba(80,55,15,.14);
}
.surah-card.both-read{
  background:
    radial-gradient(140% 100% at 0% 0%, #f3fbef 0%, transparent 55%),
    linear-gradient(180deg, #ecf7e2 0%, #c5dfb2 100%);
  border-color: #95c283;
}

.surah-num{
  display:grid; place-items:center;
  width: 56px; height: 56px;
  border-radius: 14px;
  font-family: "Reem Kufi", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  background: radial-gradient(circle at 30% 25%, #fff3c2 0%, #d8a73a 45%, #6e4a10 100%);
  box-shadow:
    0 1px 0 #fff7d8 inset,
    0 -2px 4px rgba(0,0,0,.18) inset,
    0 6px 14px rgba(120,80,20,.30);
  text-shadow: 0 2px 3px rgba(0,0,0,.35);
  align-self: start;
}

.surah-body{ min-width: 0; }
.surah-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap: 8px; margin-bottom: 4px;
}
.surah-ar{
  font-family: "Amiri", serif;
  font-size: 24px;
  color: var(--emerald-deep);
  line-height: 1.1;
}
.surah-tr{
  font-family: "Reem Kufi", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  margin: 2px 0 2px;
}
.surah-fr{
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
}
.surah-meta{
  display:inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(160,115,26,.12);
  color: var(--gold-deep);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.surah-checks{
  display:flex; gap:8px; flex-wrap:wrap;
  margin-top: 10px;
  position: relative;
  z-index: 2;
}
.chk{
  appearance: none; -webkit-appearance: none; border:none; cursor:pointer;
  display: inline-flex; align-items:center; gap:6px;
  padding: 8px 14px;
  min-height: 36px;
  border-radius: 999px;
  font-family: "Reem Kufi", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--ink-soft);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(160,115,26,.3);
  transition: transform .15s, background .25s, color .25s, border-color .25s, box-shadow .25s;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.chk *{ pointer-events: none; }
@media (hover: hover){
  .chk:hover{ transform: translateY(-1px); }
}
.chk:active{
  transform: scale(.96);
  filter: brightness(.95);
}
.chk .dot{
  width: 14px; height:14px;
  border-radius: 50%;
  background: rgba(160,115,26,.15);
  border: 1px solid rgba(160,115,26,.4);
  display:grid; place-items:center;
  font-size: 10px;
  color: transparent;
  transition: background .25s, color .25s;
}
.chk.checked{
  color: #fff;
  background: linear-gradient(180deg, #2d8a6e 0%, #0f4a39 100%);
  border-color: transparent;
  box-shadow:
    0 1px 0 rgba(255,255,255,.2) inset,
    0 -1px 0 rgba(0,0,0,.2) inset,
    0 6px 14px rgba(15,74,57,.30);
}
.chk.checked .dot{
  background: #fff;
  color: var(--emerald-deep);
}

/* pagination */
.pager{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap: 6px;
  margin-bottom: 12px;
}
.pager button{
  appearance:none; -webkit-appearance: none; border:1px solid #e0c474; cursor:pointer;
  min-width: 36px; height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fffaea 0%, #f6e9c7 100%);
  color: var(--ink);
  font-family: "Reem Kufi", sans-serif;
  font-weight: 600;
  font-size: 13px;
  transition: transform .15s, box-shadow .2s, background .2s, color .2s;
  box-shadow: 0 1px 0 #fff inset, 0 4px 8px rgba(120,80,20,.08);
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.pager button:hover:not(:disabled){ transform: translateY(-1px); }
.pager button.active{
  background: radial-gradient(circle at 30% 25%, #fff3c2 0%, #d8a73a 45%, #6e4a10 100%);
  color: #fff;
  border-color: transparent;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  box-shadow:
    0 1px 0 #fff7d8 inset,
    0 -1px 2px rgba(0,0,0,.2) inset,
    0 6px 14px rgba(120,80,20,.30);
}
.pager button:disabled{ opacity:.45; cursor:not-allowed; }
.pager .ellipsis{
  padding: 0 6px;
  color: var(--gold-deep);
  font-weight: 700;
  user-select: none;
}

/* ---------- archive SQLite ---------- */
.archive{
  margin-top: 14px;
  padding: 24px;
  border-radius: 22px;
  background:
    radial-gradient(140% 100% at 0% 0%, #fffaea 0%, transparent 55%),
    linear-gradient(180deg, #fbf2d7 0%, #ecd99a 100%);
  border: 1px solid #e0c474;
  box-shadow:
    0 1px 0 #fff inset,
    0 -1px 0 rgba(120,80,20,.10) inset,
    0 14px 30px rgba(120,80,20,.12);
}
.archive-head{
  display:flex; flex-wrap:wrap; gap:12px;
  border-bottom: 1px dashed rgba(160,115,26,.4);
  padding-bottom: 14px; margin-bottom: 14px;
}
.archive-stat{
  display:flex; flex-direction:column;
  padding: 6px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffaea 0%, #f3e3b0 100%);
  border: 1px solid #e6cf85;
  min-width: 150px;
}
.archive-k{
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.archive-v{
  font-family: "Reem Kufi", sans-serif;
  font-weight: 600;
  color: var(--emerald-deep);
  font-size: 14px;
}
.archive-list{
  list-style:none; padding:0; margin: 0 0 16px;
  display:flex; flex-direction:column; gap:10px;
  max-height: 320px; overflow-y: auto;
}
.archive-list::-webkit-scrollbar{ width: 8px; }
.archive-list::-webkit-scrollbar-thumb{
  background: rgba(160,115,26,.35); border-radius: 8px;
}
.archive-empty{
  text-align:center;
  padding: 20px;
  font-style: italic;
  color: var(--ink-soft);
  background: rgba(255,255,255,.4);
  border-radius: 12px;
  border: 1px dashed rgba(160,115,26,.3);
}
.archive-item{
  display:flex; align-items:center; gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffaea 0%, #f6e9c7 100%);
  border: 1px solid #e6cf85;
  box-shadow: 0 1px 0 #fff inset, 0 6px 12px rgba(120,80,20,.08);
}
.archive-thumb{
  width: 80px; height: 50px;
  flex: 0 0 80px;
  border-radius: 8px;
  background: #fffdf3;
  border: 1px solid #e6cf85;
  object-fit: contain;
}
.archive-info{ flex:1; min-width:0; }
.archive-info .who{
  font-family: "Dancing Script", cursive;
  font-weight: 700;
  font-size: 22px;
  color: var(--emerald-deep);
  line-height: 1;
}
.archive-info .when{
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.archive-actions{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:flex-end;
}
.btn.danger{
  color: var(--rose);
  border-color: #e8b8b8;
  background: linear-gradient(180deg, #fff5f3 0%, #f6dada 100%);
}

/* ---------- toast ---------- */
.toast{
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2d8a6e 0%, #0f4a39 100%);
  color: #fff;
  font-family: "Reem Kufi", sans-serif;
  font-size: 14px;
  letter-spacing: .03em;
  box-shadow:
    0 1px 0 rgba(255,255,255,.2) inset,
    0 -1px 0 rgba(0,0,0,.2) inset,
    0 18px 36px rgba(15,74,57,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s cubic-bezier(.2,1.6,.4,1);
  z-index: 9000;
}
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error{ background: linear-gradient(180deg, #c66 0%, #843030 100%); }

/* ---------- responsive ---------- */

/* tablette & petit laptop */
@media (max-width: 880px){
  .page{ margin: 14px auto 50px; padding: 0 14px; }
  .parchment-inner{ padding: 40px 22px 50px; }
  .surah-list{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

/* téléphone */
@media (max-width: 640px){
  body{ perspective: none; }
  .ambient .orb{ filter: blur(40px); opacity:.4; }
  .ambient .grain, .ambient .dust{ opacity:.2; }

  .topbar{ padding: 18px 12px 6px; }
  .bismillah{ padding: 10px 18px; }
  .bismillah .ar{ font-size: 18px; }
  .bismillah .fr{ font-size: 10.5px; letter-spacing:.1em; }

  .page{ margin: 14px auto 40px; padding: 0 10px; }

  .parchment{ padding: 8px; transform: none !important; }
  .parchment-inner{
    padding: 32px 16px 40px;
    box-shadow:
      0 0 0 1px #e9d287 inset,
      0 0 0 4px #fdf6df inset,
      0 0 0 5px #d9b864 inset;
  }
  .parchment-inner::before{ inset: 8px; }

  .ornament{ width: 92%; margin: 0 auto 18px; }
  .ornament svg{ height: 38px; }

  .badge{ width: 64px; height: 64px; font-size: 24px; }
  .title-overline{ font-size: 18px; }
  .title-main{ font-size: clamp(54px, 18vw, 90px); letter-spacing:-1.5px; }
  .title-arabic{ font-size: 22px; }
  .subtitle{ font-size: 15px; padding: 0 4px; }
  .meta{ gap: 8px; }
  .chip{ min-width: 0; padding: 6px 12px; flex: 1 1 auto; }
  .chip-k{ font-size: 10px; }
  .chip-v{ font-size: 14px; }

  .section-title{ gap: 10px; margin: 28px 0 16px; }
  .section-title::before, .section-title::after{ max-width: 40px; }
  .section-title .ar{ font-size: 24px; }
  .section-title .fr{ font-size: 18px; }

  .conditions{ grid-template-columns: 1fr; gap: 12px; }
  .cond{ padding: 18px 16px 18px 74px; }
  .cond-num{ left: 14px; top: 14px; width: 46px; height: 46px; font-size: 15px; }
  .cond-body h3{ font-size: 16px; }
  .cond-body p{ font-size: 14.5px; line-height: 1.5; }

  .duaa{ padding: 18px 16px; margin: 26px auto; }
  .duaa-ar{ font-size: 20px; }
  .duaa-fr{ font-size: 14px; }

  /* signatures — 1 colonne, padding réduit, plus haut pour confort */
  .signs{ grid-template-columns: 1fr; gap: 16px; }
  .sign-card{ padding: 16px; border-radius: 18px; }
  .sign-head{ flex-direction: column; align-items:flex-start; gap:2px; padding-bottom: 10px; }
  .sign-name{ font-size: 32px; }
  .sign-role{ font-size: 12px; }
  .sign-pad{ height: 170px; cursor: crosshair; }
  .sign-hint{ font-size: 16px; bottom: 10px; }
  .sign-actions{ flex-wrap: wrap; }
  .sign-actions .btn{ flex: 1 1 auto; min-height: 44px; }

  .seal{ margin: 36px auto 6px; }
  .seal-disc{ width: 160px; height: 160px; }
  .seal-ar{ font-size: 30px; }
  .seal-fr{ font-size: 10px; letter-spacing: .2em; }

  /* progression */
  .progress-grid{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .prog-card{ padding: 16px 12px; border-radius: 18px; }
  .prog-name{ font-size: 24px; margin-bottom: 8px; }
  .ring{ width: 130px; height: 130px; margin-bottom: 10px; }
  .ring-num{ font-size: 34px; }
  .ring-tot{ font-size: 12px; }
  .prog-hint{ font-size: 11px; }

  /* toolbar de la liste */
  .surah-toolbar{ flex-direction: column; align-items: stretch; gap: 10px; }
  .search-wrap{ width:100%; }
  #surahSearch{ font-size: 16px; padding: 12px 14px 12px 38px; }   /* 16px = pas de zoom auto iOS */
  .page-size{ justify-content: space-between; }
  #pageSize{ font-size: 15px; padding: 8px 12px; }

  /* liste sourates — 1 colonne, cartes compactes mais lisibles */
  .surah-list{ grid-template-columns: 1fr; gap: 12px; }
  .surah-card{ padding: 14px; gap: 12px; grid-template-columns: 48px 1fr; border-radius: 14px; }
  .surah-num{ width: 48px; height: 48px; font-size: 16px; border-radius: 12px; }
  .surah-head{ flex-wrap: wrap; gap: 6px; }
  .surah-ar{ font-size: 22px; }
  .surah-tr{ font-size: 15px; }
  .surah-fr{ font-size: 13px; }
  .surah-meta{ font-size: 10px; padding: 2px 8px; }

  /* boutons radio (chk) — vraiment tactiles, 44px de hauteur */
  .surah-checks{ gap: 8px; margin-top: 12px; }
  .chk{
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
    padding: 11px 10px;
    min-height: 44px;
    font-size: 13px;
  }
  .chk .dot{ width: 16px; height: 16px; }

  /* pagination — wrap propre, scroll horizontal si vraiment trop long */
  .pager{
    flex-wrap: wrap;
    gap: 5px;
    overflow-x: auto;
    padding: 4px 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .pager button{ min-width: 38px; height: 38px; font-size: 13px; }

  /* archive */
  .archive{ padding: 16px; border-radius: 18px; }
  .archive-head{ gap: 8px; padding-bottom: 12px; margin-bottom: 12px; }
  .archive-stat{ flex: 1 1 calc(50% - 8px); min-width: 0; padding: 6px 10px; }
  .archive-k{ font-size: 10px; }
  .archive-v{ font-size: 13px; }
  .archive-item{ padding: 10px 12px; gap: 10px; }
  .archive-thumb{ width: 64px; height: 40px; flex: 0 0 64px; }
  .archive-info .who{ font-size: 20px; }
  .archive-info .when{ font-size: 12px; }
  .archive-actions{ justify-content: stretch; }
  .archive-actions .btn{ flex: 1 1 auto; min-height: 44px; }

  /* boutons globaux : taille tactile garantie */
  .btn{ min-height: 42px; padding: 10px 16px; font-size: 14px; }
  .btn-sm{ min-height: 36px; }

  /* toast plus accessible */
  .toast{ left: 12px; right: 12px; bottom: 16px; transform: translateY(20px); padding: 12px 16px; font-size: 13px; text-align: center; }
  .toast.show{ transform: translateY(0); }
  .foot p:first-child{ font-size: 15px; }
  .foot-fr{ font-size: 16px; }
}

/* très petit téléphone */
@media (max-width: 380px){
  .title-main{ font-size: 56px; }
  .badge{ width: 56px; height: 56px; font-size: 22px; }
  .surah-checks{ flex-direction: column; }
  .chk{ width: 100%; flex: 1 1 100%; }
  .progress-grid{ grid-template-columns: 1fr; }
  .ring{ width: 150px; height: 150px; }
}

/* hover désactivé (touch) — neutralise les effets collants */
@media (hover: none){
  .parchment:hover, .cond:hover, .sign-card:hover,
  .prog-card:hover, .surah-card:hover, .btn:hover,
  .pager button:hover{
    transform: none !important;
    filter: none !important;
  }
}

/* préférences réduites */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}