/* ══════════════════════════════════════════
   NOOR QURAN — style.css
   Deep Glow · MAHAM DEV
   ══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Poppins:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── TOKENS ──────────────────────────────── */
:root {
    --bg:       #050706;
    --g:        #00ff66;       /* vert glow principal */
    --g-dk:     #004d1f;
    --gold:     #ffd966;
    --gold-dk:  #b8860b;
    --txt:      #f4f4f4;
    --muted:    #a0a0a0;
    --card:     rgba(12,22,16,0.65);
    --nav-h:    54px;
    --footer-h: 44px;          /* hauteur bouton tiroir fermé */

    --fd:  'Inter','Poppins',sans-serif;   /* display/bold */
    --fb:  'Poppins',sans-serif;           /* body */
    --fa:  'Amiri',serif;                  /* arabic */
}

/* ── RESET ───────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--txt);
    font-family: var(--fb);
    overflow-x: hidden;
    min-height: 100dvh;
}

/* ── SCROLLBAR ───────────────────────────── */
::-webkit-scrollbar            { width:5px }
::-webkit-scrollbar-track      { background:var(--bg) }
::-webkit-scrollbar-thumb      { background:var(--g-dk);border-radius:10px }
::-webkit-scrollbar-thumb:hover{ background:var(--g) }

/* ══════════════════════════════════════════
   NAV FIXE
   ══════════════════════════════════════════ */
.main-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 300;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 clamp(12px,4vw,24px);
    padding-top: env(safe-area-inset-top,0px);
    background: rgba(5,7,6,0.96);
    border-bottom: 1px solid rgba(0,255,102,0.13);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    /* Cachée au départ */
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
}

.main-nav.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.nav-brand {
    font-family: var(--fd);
    font-weight: 900;
    font-size: clamp(.7rem,2vw,.9rem);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--g);
    text-shadow: 0 0 10px rgba(0,255,102,.4);
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-links {
    display: flex;
    gap: 5px;
    align-items: center;
}

.nav-link {
    background: transparent;
    border: 1px solid rgba(0,255,102,.22);
    color: var(--txt);
    padding: clamp(4px,1.2vw,7px) clamp(8px,2vw,14px);
    border-radius: 999px;
    font-family: var(--fd);
    font-weight: 700;
    font-size: clamp(.6rem,1.6vw,.82rem);
    cursor: pointer;
    transition: all .2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    letter-spacing: .02em;
}

.nav-link:hover  { border-color:var(--g); background:rgba(0,255,102,.06); box-shadow:0 0 12px rgba(0,255,102,.15); }
.nav-link.active { background:rgba(0,255,102,.12); border-color:var(--g); }

.badge-pro {
    margin-left: 4px;
    padding: 1px 6px;
    font-size: .58rem;
    font-weight: 800;
    background: linear-gradient(135deg,var(--gold),var(--gold-dk));
    color: #111;
    border-radius: 4px;
    vertical-align: middle;
}

.badge-pro.unlocked {
    background: linear-gradient(135deg,var(--g),#006633);
    color: var(--bg);
}

/* ══════════════════════════════════════════
   PAGE INTRO
   Position: remplit toute la fenêtre
   ══════════════════════════════════════════ */
#intro-page {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 50% 38%,#0a1f12,var(--bg) 68%);
    overflow-y: auto;
    overflow-x: hidden;
    /* Disparaît quand on lance l'app */
    transition: opacity .5s ease, visibility .5s ease;
}

#intro-page.out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.intro-main-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: clamp(18px,4vw,44px) clamp(12px,4vw,28px) clamp(20px,4vw,40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(14px,3vw,22px);
}

/* Particules */
.particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.particle  {
    position: absolute;
    width: 2px; height: 2px;
    background: var(--g);
    border-radius: 50%;
    box-shadow: 0 0 5px var(--g);
    animation: floatP var(--dur,4s) ease-in-out infinite;
    animation-delay: var(--delay,0s);
}
@keyframes floatP {
    0%,100%{ transform:translateY(0) }
    50%    { transform:translateY(-12px) }
}

/* ── HERO ────────────────────────────────── */
.hero-showcase {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px,4vw,52px);
    width: 100%;
}

/* Côté livre */
.book-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.free-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    font-family: var(--fd);
    background: rgba(0,255,102,.1);
    border: 1px solid rgba(0,255,102,.38);
    color: var(--g);
}

/* Côté slider */
.features-side {
    flex: 1;
    min-width: 0;
    max-width: 380px;
}

/* ── TEXTE INTRO ─────────────────────────── */
.intro-text {
    font-family: var(--fd);
    font-weight: 900;
    letter-spacing: -.02em;
    text-transform: uppercase;
    line-height: 1.08;
    font-size: clamp(1.25rem,5.5vw,2.4rem);
    color: #fff;
    max-width: 20em;
    padding: 0 6px;
    text-shadow: 0 2px 0 rgba(0,0,0,.5);
}

.hl-green {
    display: block;
    font-size: clamp(1.7rem,8vw,3.6rem);
    font-weight: 900;
    letter-spacing: -.04em;
    background: linear-gradient(135deg, #fff 0%, var(--g) 55%, #7dffae 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 18px rgba(0,255,102,.45));
    line-height: 1;
    margin: 4px 0 6px;
}

.intro-sub-line {
    display: block;
    font-size: clamp(.78rem,2.8vw,1.1rem);
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--muted);
    text-transform: uppercase;
    margin-top: 4px;
}

.intro-pro-hint {
    font-size: clamp(.7rem,2.2vw,.83rem);
    color: var(--muted);
    font-family: var(--fd);
    font-weight: 600;
}

.intro-pro-hint a { color:var(--gold); font-weight:800; text-decoration:none; }
.intro-pro-hint a:hover { text-decoration:underline; }

/* ══════════════════════════════════════════
   LIVRE 3D
   ══════════════════════════════════════════ */
.book-container {
    perspective: 1100px;
    width:  clamp(118px,24vw,175px);
    height: clamp(165px,34vw,245px);
    animation: bookFloat 4s ease-in-out infinite;
}

@keyframes bookFloat {
    0%,100% { transform:translateY(0) }
    50%      { transform:translateY(-13px) }
}

.book {
    width: 100%; height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(-20deg) rotateX(8deg);
    box-shadow: 0 0 30px rgba(0,255,102,.32),0 0 60px rgba(0,255,102,.08);
}

.book-cover {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg,#02200d,#004d1f);
    border: 1.5px solid var(--g);
    border-radius: 4px 13px 13px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
}

.book-cover.front { transform:translateZ(12px); z-index:3; }
.book-cover.back  { transform:translateZ(-12px); z-index:0; }

.book-decoration {
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(0,255,102,.2);
    border-radius: 2px 9px 9px 2px;
    pointer-events: none;
}

.book-cover h2 {
    font-family: var(--fa);
    font-size: clamp(1rem,3.2vw,1.6rem);
    color: var(--g);
    text-shadow: 0 0 10px var(--g);
    text-align: center;
    padding: 6px;
    z-index: 1;
}

.book-pages {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,#f8f4ec,#efe8dc 45%,#f5f0e6);
    border-radius: 4px 13px 13px 4px;
    border: 1px solid rgba(0,60,30,.15);
    box-shadow: inset 0 0 30px rgba(255,255,255,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateZ(0);
    z-index: 1;
    overflow: hidden;
}

.book-inner-spread {
    text-align: center;
    padding: clamp(7px,1.8vw,13px);
    position: relative;
}

.book-inner-glow {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle,rgba(0,255,102,.07),transparent 70%);
    animation: pGlow 3s ease-in-out infinite;
}

@keyframes pGlow { 0%,100%{opacity:.5} 50%{opacity:1} }

.inner-phonetic-fr {
    font-family: var(--fd);
    font-size: clamp(.46rem,1.1vw,.74rem);
    font-weight: 800;
    letter-spacing: .2em;
    color: #0d3d24;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.inner-phonetic-hint {
    font-size: clamp(.36rem,.8vw,.48rem);
    color: #5a6b5f;
    margin-bottom: 6px;
}

.inner-arabic {
    font-family: var(--fa);
    font-size: clamp(.85rem,2.4vw,1.3rem);
    color: #0a5c32;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 4px;
}

.inner-fr {
    font-size: clamp(.36rem,.8vw,.55rem);
    color: #3d5c4a;
    font-weight: 600;
    font-family: var(--fd);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Animation ouverture livre */
.book.opening {
    animation: bOpen 1.5s cubic-bezier(.25,1,.5,1) forwards;
}

@keyframes bOpen {
    0%  { transform:rotateY(-20deg) rotateX(8deg) }
    60% { transform:rotateY(0) rotateX(0) translateY(32px) scale(1.13); box-shadow:0 0 85px var(--g) }
    100%{ transform:rotateY(0) rotateX(0) translateY(50px) scale(1.17); box-shadow:0 0 140px var(--g) }
}

.book.opening .book-cover.front {
    animation: cFlip 1.2s ease-in-out .2s forwards;
    transform-origin: left center;
}

@keyframes cFlip {
    from { transform:translateZ(12px) rotateY(0) }
    to   { transform:translateZ(12px) rotateY(-165deg) }
}

.book.opening .book-inner-spread {
    animation: iReveal .7s ease .6s both;
}

@keyframes iReveal {
    from { opacity:0; transform:translateY(6px) scale(.98) }
    to   { opacity:1; transform:translateY(0) scale(1) }
}

/* ══════════════════════════════════════════
   SLIDER FEATURES
   ══════════════════════════════════════════ */
.features-slider-container {
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(10,20,15,.45);
    border: 1px solid rgba(0,255,102,.1);
    backdrop-filter: blur(8px);
    box-shadow: 0 0 24px rgba(0,0,0,.4);
}

.features-slider {
    display: flex;
    transition: transform .44s cubic-bezier(.25,.46,.45,.94);
    cursor: grab;
    will-change: transform;
}

.features-slider:active { cursor:grabbing }

.feature-slide {
    min-width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: clamp(13px,3vw,24px) clamp(12px,3vw,20px);
    text-align: center;
}

/* Icône glow */
.feature-icon-wrapper {
    position: relative;
    width:  clamp(58px,12vw,80px);
    height: clamp(58px,12vw,80px);
    display: flex; align-items:center; justify-content:center;
    border-radius: 50%;
    transition: transform .28s ease;
    flex-shrink: 0;
}

.feature-icon-wrapper:hover { transform:scale(1.07) }

.pro-icon-wrapper {
    background: linear-gradient(135deg,rgba(255,215,0,.13),rgba(184,134,11,.18));
    border: 1.5px solid rgba(255,215,0,.42);
    box-shadow: 0 0 20px rgba(255,200,0,.2),inset 0 0 14px rgba(255,200,0,.07);
}

.free-icon-wrapper {
    background: linear-gradient(135deg,rgba(0,255,102,.1),rgba(0,100,50,.17));
    border: 1.5px solid rgba(0,255,102,.38);
    box-shadow: 0 0 20px rgba(0,255,102,.2),inset 0 0 14px rgba(0,255,102,.07);
}

.feature-svg-icon {
    width:52%;height:52%;
    color: var(--gold);
    filter: drop-shadow(0 0 5px rgba(255,200,0,.45));
    z-index:1;
}

.feature-svg-icon.free-svg {
    color: var(--g);
    filter: drop-shadow(0 0 5px rgba(0,255,102,.45));
}

.icon-glow {
    position: absolute; inset:-10px; border-radius:50%;
    pointer-events:none;
    animation: iGlow 2.2s ease-in-out infinite;
}

.pro-glow  { background:radial-gradient(circle,rgba(255,200,0,.17),transparent 70%) }
.free-glow { background:radial-gradient(circle,rgba(0,255,102,.17),transparent 70%) }

@keyframes iGlow { 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.1)} }

.feature-title {
    font-family: var(--fd);
    font-size: clamp(.9rem,3vw,1.18rem);
    font-weight: 900;
    letter-spacing:-.02em;
    text-transform: uppercase;
    background: linear-gradient(135deg,#fff 30%,var(--gold) 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    margin:0;
}

.feature-title.free-title {
    background: linear-gradient(135deg,#fff 30%,var(--g) 100%);
    -webkit-background-clip:text; background-clip:text;
}

.feature-desc {
    font-family: var(--fb);
    font-size: clamp(.7rem,2.3vw,.8rem);
    color: var(--muted);
    line-height: 1.48;
    max-width: 26ch; margin:0 auto;
}

.feature-badge {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: .62rem; font-weight:800;
    font-family: var(--fd);
    letter-spacing:.07em; text-transform:uppercase;
}

.pro-badge-small  { background:rgba(255,215,0,.1);   border:1px solid var(--gold); color:var(--gold) }
.free-badge-small { background:rgba(0,255,102,.09); border:1px solid rgba(0,255,102,.38); color:var(--g) }

/* Dots */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 9px 0 4px;
}

.dot {
    width:6px; height:6px;
    border-radius:50%;
    background: rgba(255,255,255,.2);
    cursor:pointer; transition:all .26s ease; border:none;
}

.dot.active {
    width:19px; border-radius:10px;
    background:var(--g); box-shadow:0 0 6px var(--g);
}

/* Flèches slider */
.slider-arrows {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 3px 0 10px;
}

.slider-arrow {
    background: rgba(0,255,102,.08);
    border: 1px solid rgba(0,255,102,.28);
    color: rgba(255,255,255,.5);
    font-size: .85rem;
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items:center; justify-content:center;
    transition: all .2s ease;
}

.slider-arrow:hover {
    background: rgba(0,255,102,.18);
    border-color: var(--g);
    color: var(--g);
    box-shadow: 0 0 10px rgba(0,255,102,.25);
}

/* ══════════════════════════════════════════
   BOUTON GLOW
   ══════════════════════════════════════════ */
.glow-btn {
    background: transparent;
    color: var(--txt);
    border: 1.5px solid var(--g);
    padding: clamp(9px,2.2vw,13px) clamp(20px,4.5vw,36px);
    font-size: clamp(.78rem,2.6vw,.96rem);
    font-family: var(--fd);
    font-weight: 800;
    border-radius: 999px;
    cursor: pointer;
    transition: all .26s ease;
    text-transform: uppercase;
    letter-spacing: .06em;
    box-shadow: 0 0 14px rgba(0,255,102,.16);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.glow-btn:hover {
    background: var(--g);
    color: var(--bg);
    box-shadow: 0 0 30px var(--g);
    transform: translateY(-2px);
}

.glow-btn.small { padding:6px 14px; font-size:.75rem }

.btn-arrow { transition:transform .26s ease }
.glow-btn:hover .btn-arrow { transform:translateX(4px) }

/* ══════════════════════════════════════════
   PAGES INTÉRIEURES
   Pas de position:absolute ! Juste display:none / block
   ══════════════════════════════════════════ */
.inner-page {
    display: none;             /* caché par défaut */
    flex-direction: column;
    min-height: 100dvh;
    padding-top: var(--nav-h);
    padding-bottom: var(--footer-h);
}

.inner-page.active {
    display: flex;
    animation: pageIn .38s ease both;
}

@keyframes pageIn {
    from { opacity:0; transform:translateY(12px) }
    to   { opacity:1; transform:translateY(0) }
}

/* En-tête pages intérieures */
.page-header {
    text-align: center;
    padding: clamp(14px,3vw,26px) clamp(12px,4vw,22px) clamp(10px,2.2vw,16px);
    flex-shrink: 0;
}

.page-header h1 {
    font-family: var(--fd);
    font-weight: 900;
    letter-spacing:-.02em;
    text-transform: uppercase;
    margin-bottom: 7px;
    color: var(--g);
    font-size: clamp(1.1rem,3.8vw,1.6rem);
    text-shadow: 0 0 14px rgba(0,255,102,.26);
}

.header-sub {
    color: var(--muted);
    font-size: clamp(.72rem,2vw,.84rem);
    margin-bottom: 12px;
    font-family: var(--fb);
}

/* Search */
#search-bar {
    width: min(100%,440px);
    padding: 10px 18px;
    border-radius: 999px;
    border: 1.5px solid rgba(0,255,102,.27);
    background: rgba(0,0,0,.48);
    color: white;
    font-family: var(--fb);
    font-size: clamp(.8rem,2.1vw,.92rem);
    outline: none;
    transition: box-shadow .26s, border-color .26s;
}

#search-bar:focus {
    box-shadow: 0 0 18px rgba(0,255,102,.27);
    border-color: var(--g);
}

#search-bar::placeholder { color:rgba(255,255,255,.3) }

/* Container */
.container {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 clamp(10px,3vw,20px) clamp(14px,3vw,28px);
    flex: 1;
}

/* Grid sourates */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(min(100%,225px),1fr));
    gap: clamp(8px,1.8vw,13px);
}

.surah-card {
    background: var(--card);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 12px;
    padding: clamp(10px,2.2vw,17px);
    cursor: pointer;
    transition: transform .28s, border-color .28s, box-shadow .28s;
    display: flex;
    align-items: center;
    gap: 9px;
    backdrop-filter: blur(8px);
}

.surah-card:hover {
    transform: translateY(-3px);
    border-color: var(--g);
    box-shadow: 0 6px 20px rgba(0,255,102,.12);
}

.surah-num {
    background: rgba(0,255,102,.1);
    color: var(--g);
    width:33px; height:33px; min-width:33px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    font-weight:700; font-family:var(--fd); font-size:.76rem;
    transform:rotate(45deg); flex-shrink:0;
}

.surah-num span { transform:rotate(-45deg); display:block }

.surah-details { flex:1; min-width:0 }

.surah-details h3 {
    font-size: clamp(.8rem,2.1vw,.98rem);
    font-weight: 600;
    font-family: var(--fd);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.surah-details p {
    color: var(--muted);
    font-size: .7rem;
    margin-top: 2px;
}

.surah-ar {
    font-family: var(--fa);
    font-size: clamp(.9rem,2.5vw,1.25rem);
    color: var(--g);
    flex-shrink: 0;
    margin-left: auto;
}

/* En-tête lecture */
.reading-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(0,255,102,.14);
    padding: clamp(10px,2.2vw,17px) clamp(12px,3.5vw,24px);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.surah-info-header { text-align:right; min-width:0 }

.surah-info-header h2 {
    font-family: var(--fa);
    font-size: clamp(1.05rem,3.2vw,1.5rem);
    color: var(--g);
}

.surah-info-header p {
    font-size: clamp(.65rem,1.7vw,.82rem);
    color: var(--muted);
    margin-top: 1px;
}

/* Verse cards */
.verse-card {
    background: var(--card);
    border-left: 3px solid var(--g);
    padding: clamp(12px,2.5vw,22px);
    margin-bottom: clamp(8px,1.8vw,14px);
    border-radius: 0 12px 12px 0;
    opacity: 0;
    transform: translateY(12px);
    animation: fadeUp .4s forwards ease-out;
    backdrop-filter: blur(7px);
}

@keyframes fadeUp { to { opacity:1; transform:translateY(0) } }

.verse-header {
    font-size: .66rem; color:var(--g); opacity:.57;
    margin-bottom: 7px;
    letter-spacing:.07em; font-family:var(--fd); font-weight:700;
    text-transform:uppercase;
}

.verse-arabic {
    font-family: var(--fa);
    font-size: clamp(1.2rem,4vw,1.62rem);
    line-height: 1.95;
    text-align: right;
    color: #7dffae;
    margin: 7px 0;
}

.phonetic-label,.fr-label {
    font-size: .58rem; text-transform:uppercase;
    letter-spacing:.12em; color:var(--muted);
    margin-bottom:3px; font-family:var(--fd); font-weight:700;
}

.phonetic-main {
    font-family: var(--fb);
    font-size: clamp(.85rem,2.5vw,1.22rem);
    font-weight: 500; color:var(--g);
    line-height:1.4; margin:7px 0; font-style:italic;
}

.verse-separator {
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(0,255,102,.22),transparent);
    margin:11px 0;
}

.fr-label { margin-top:7px }

.verse-fr {
    color:var(--txt); line-height:1.57;
    font-weight:300; font-size:clamp(.8rem,2.1vw,.9rem);
}

.verses-loading {
    text-align:center; padding:20px;
    color:var(--g); font-family:var(--fd); font-weight:700;
    letter-spacing:.05em;
    animation:pLoad 1.2s ease-in-out infinite;
    text-transform:uppercase; font-size:.76rem;
}

@keyframes pLoad { 0%,100%{opacity:.4} 50%{opacity:1} }

/* Page rappels */
.rappels-hero {
    text-align:center; max-width:600px; margin:0 auto clamp(16px,3.5vw,30px);
}

.rappel-quote {
    font-size: clamp(.9rem,2.8vw,1.06rem);
    font-weight:300; line-height:1.7; color:var(--txt);
    margin-bottom:16px; min-height:4em; font-style:italic;
    border-left:3px solid var(--g); padding-left:16px;
    text-align:left; animation:qFade .4s ease;
}

@keyframes qFade { from{opacity:0;transform:translateX(-5px)} to{opacity:1;transform:translateX(0)} }

.rappels-tips { list-style:none; max-width:680px; margin:0 auto }

.rappels-tips li {
    background:var(--card); border:1px solid rgba(0,255,102,.07);
    border-radius:10px;
    padding:clamp(8px,1.8vw,14px) clamp(10px,2.3vw,17px);
    margin-bottom:8px;
    transition:transform .2s,border-color .2s;
    font-family:var(--fb); font-size:clamp(.78rem,2vw,.88rem);
    backdrop-filter:blur(5px);
}

.rappels-tips li:hover { transform:translateX(4px); border-color:rgba(0,255,102,.18) }

/* ══════════════════════════════════════════
   FOOTER TIROIR
   ══════════════════════════════════════════ */
.site-footer {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 200;
    background: rgba(3,7,5,.98);
    border-top: 1px solid rgba(0,255,102,.15);
    /* Caché au départ */
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
}

.site-footer.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

/* Bouton tiroir */
.footer-toggle {
    width: 100%;
    height: var(--footer-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-family: var(--fd);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: color .2s ease;
    padding: 0 16px;
    border-bottom: 1px solid rgba(0,255,102,.07);
}

.footer-toggle:hover { color: var(--g) }

.toggle-chevron {
    font-size: 1rem;
    display: inline-block;
    transition: transform .35s ease;
    line-height: 1;
}

/* Quand ouvert : chevron tourne */
.site-footer.open .toggle-chevron { transform: rotate(180deg) }
.site-footer.open .toggle-label   { color: var(--g) }

/* Tiroir (contenu) */
.footer-drawer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .38s cubic-bezier(.4,0,.2,1), padding .38s ease;
    padding: 0 clamp(14px,4vw,20px);
}

.site-footer.open .footer-drawer {
    max-height: 260px;
    padding: 12px clamp(14px,4vw,20px) calc(10px + env(safe-area-inset-bottom,0px));
}

.footer-inner {
    max-width: 1040px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,170px),1fr));
    gap: 6px 16px;
    padding-bottom: 6px;
}

.footer-col h3 {
    font-family:var(--fd); font-weight:900;
    font-size:.58rem; text-transform:uppercase;
    letter-spacing:.1em; color:var(--g); margin-bottom:2px;
}

.footer-col p,
.footer-col li {
    font-family:var(--fd); font-weight:500;
    font-size:.6rem; color:var(--muted); line-height:1.35;
}

.footer-col ul  { list-style:none }
.footer-col a   { color:var(--g); text-decoration:none; font-weight:700 }
.footer-col a:hover { text-decoration:underline }

.footer-bottom {
    text-align:center; margin-top:4px; padding-top:5px;
    border-top:1px solid rgba(255,255,255,.05);
    font-size:.56rem; font-family:var(--fd); font-weight:600; color:var(--muted);
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */

/* ── Mobile ≤ 479px ── */
@media (max-width:479px) {
    :root { --nav-h:48px; --footer-h:40px }

    .hero-showcase { flex-direction:column; gap:10px }
    .features-side { width:100%; max-width:100% }
    .book-container { width:clamp(100px,32vw,130px); height:clamp(140px,45vw,182px) }
    .feature-slide  { padding:12px 10px; gap:5px }
    .feature-icon-wrapper { width:52px; height:52px }

    .grid { grid-template-columns:1fr }
    .surah-card { padding:10px 11px }

    .reading-header { flex-direction:column; align-items:flex-start; gap:8px }
    .surah-info-header { text-align:left; width:100% }

    .nav-link  { padding:3px 7px; font-size:.57rem }
    .nav-brand { font-size:.62rem }

    .intro-text { font-size:clamp(1rem,4.8vw,1.25rem) }
    .glow-btn   { padding:8px 18px; font-size:.76rem }

    .footer-inner { grid-template-columns:1fr }
}

/* ── Tablette 480–767px ── */
@media (min-width:480px) and (max-width:767px) {
    .hero-showcase { flex-direction:column; gap:13px }
    .features-side { width:100%; max-width:390px }
    .book-container { width:140px; height:196px }
    .grid { grid-template-columns:repeat(2,1fr) }
    .reading-header { flex-direction:column; align-items:flex-start; gap:8px }
    .surah-info-header { text-align:left }
}

/* ── Desktop 768px+ ── */
@media (min-width:768px) {
    .hero-showcase { flex-direction:row; flex-wrap:nowrap }
    .book-side  { flex-shrink:0 }
    .features-side { flex:1; max-width:360px }
    .grid { grid-template-columns:repeat(auto-fill,minmax(225px,1fr)) }
    .footer-inner { grid-template-columns:repeat(3,1fr) }
}

/* ── Large 1200px+ ── */
@media (min-width:1200px) {
    .grid { grid-template-columns:repeat(auto-fill,minmax(250px,1fr)) }
}
/* ══════════════════════════════════════════
   PRO LANDING MODAL
   ══════════════════════════════════════════ */
#pro-landing-modal {
    position: fixed;
    inset: 0;
    z-index: 900;
}

.plm-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.plm-panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background:
        radial-gradient(ellipse at 50% 10%, rgba(255,200,0,.08), transparent 50%),
        radial-gradient(ellipse at 20% 90%, rgba(255,150,0,.04), transparent 40%),
        #050706;
    animation: plmSlideIn .38s cubic-bezier(.25,.46,.45,.94) both;
}

@keyframes plmSlideIn {
    from { opacity:0; transform:translateY(30px) }
    to   { opacity:1; transform:translateY(0) }
}

.plm-close {
    position: fixed;
    top: clamp(12px,3vw,20px);
    right: clamp(12px,3vw,20px);
    z-index: 10;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    color: #f4f4f4; font-size: 1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s;
    backdrop-filter: blur(8px);
}
.plm-close:hover { background: rgba(255,215,0,.15); border-color: rgba(255,215,0,.35); color: #ffd966; }

/* ── Hero section ── */
.plm-hero {
    position: relative;
    padding: clamp(40px,8vw,80px) clamp(16px,5vw,40px) clamp(28px,5vw,48px);
    text-align: center;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,215,0,.08);
}

.plm-stars, .plm-particles {
    position: absolute; inset: 0;
    pointer-events: none;
}

.plm-star {
    position: absolute; border-radius: 50%;
    background: #ffd966;
    animation: plmTwinkle var(--dur,3s) ease-in-out infinite var(--delay,0s);
    opacity: 0;
}
@keyframes plmTwinkle { 0%,100%{opacity:0;transform:scale(.6)} 50%{opacity:var(--op,.5);transform:scale(1)} }

.plm-pg {
    position: absolute; width:2px; height:2px;
    background: #ffd966; border-radius: 50%;
    box-shadow: 0 0 5px #ffd966;
    animation: plmFloat var(--dur,4s) ease-in-out infinite var(--delay,0s);
    opacity: var(--op,.2);
}
@keyframes plmFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

.plm-hero-content { position: relative; z-index: 2; }

.plm-badge-top {
    display: inline-block;
    padding: 4px 16px; border-radius: 999px;
    background: rgba(255,215,0,.1);
    border: 1px solid rgba(255,215,0,.3);
    font-family: 'Inter','Poppins',sans-serif;
    font-weight: 800; font-size: .66rem;
    text-transform: uppercase; letter-spacing: .14em;
    color: #ffd966; margin-bottom: 20px;
    animation: badgeGlow 2.5s ease-in-out infinite;
}
@keyframes badgeGlow { 0%,100%{box-shadow:0 0 12px rgba(255,215,0,.15)} 50%{box-shadow:0 0 24px rgba(255,215,0,.35)} }

/* ── Livre doré mini ── */
.plm-book-wrap {
    perspective: 800px;
    width: clamp(90px,18vw,130px);
    height: clamp(126px,25vw,182px);
    margin: 0 auto clamp(16px,3vw,24px);
    animation: plmBookFloat 4s ease-in-out infinite;
}
@keyframes plmBookFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.plm-book {
    width:100%; height:100%;
    position:relative;
    transform-style:preserve-3d;
    transform:rotateY(-22deg) rotateX(6deg);
    box-shadow:0 0 28px rgba(255,215,0,.4),0 0 55px rgba(255,215,0,.08);
}

.plm-book-front {
    position:absolute; inset:0;
    background:linear-gradient(145deg,#1a0f00,#3d2800);
    border:1.5px solid #ffd966;
    border-radius:3px 11px 11px 3px;
    display:flex; align-items:center; justify-content:center;
    flex-direction:column;
    transform:translateZ(10px);
    backface-visibility:hidden;
}

.plm-book-deco {
    position:absolute; inset:6px;
    border:1px solid rgba(255,215,0,.22);
    border-radius:1px 7px 7px 1px;
    pointer-events:none;
}

.plm-ornament {
    position:absolute; width:65%; aspect-ratio:1;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
}

.plm-book-ar {
    font-family:'Amiri',serif;
    font-size:clamp(.7rem,2.5vw,1.1rem);
    color:#ffd966;
    text-shadow:0 0 10px rgba(255,215,0,.6);
    z-index:1; text-align:center; padding:4px 6px;
}
.plm-book-sub {
    font-family:'Inter','Poppins',sans-serif;
    font-weight:900; font-size:clamp(.4rem,.9vw,.6rem);
    letter-spacing:.25em; color:rgba(255,215,0,.5);
    text-transform:uppercase; z-index:1;
}

.plm-book-spine {
    position:absolute; inset:0;
    background:linear-gradient(135deg,#1a0f00,#2d1a00);
    border:1px solid rgba(255,215,0,.2);
    border-radius:3px 11px 11px 3px;
    transform:translateZ(-10px);
}

/* ── Titre ── */
.plm-title {
    font-family:'Inter','Poppins',sans-serif;
    font-weight:900; letter-spacing:-.03em;
    text-transform:uppercase; line-height:1.08;
    font-size:clamp(1.1rem,4.5vw,2rem);
    color:#fff; margin-bottom:8px;
}

.plm-hl {
    display:block;
    font-size:clamp(1.6rem,7vw,3rem);
    background:linear-gradient(135deg,#fff 0%,#ffd966 50%,#ffb300 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 16px rgba(255,215,0,.4));
    line-height:1;
}

.plm-pro {
    background:linear-gradient(135deg,#ffd966,#ff8c00);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
}

.plm-tagline {
    font-family:'Inter','Poppins',sans-serif;
    font-weight:600; font-size:clamp(.7rem,2vw,.82rem);
    color:rgba(255,215,0,.5); text-transform:uppercase;
    letter-spacing:.1em; margin-bottom:18px;
}

/* Prix */
.plm-price-row { display:flex; justify-content:center; margin-top:10px; }
.plm-price-card {
    display:inline-flex; align-items:center; gap:12px;
    padding:12px 24px; border-radius:16px;
    background:linear-gradient(135deg,rgba(255,215,0,.12),rgba(255,140,0,.07));
    border:1.5px solid rgba(255,215,0,.28);
    box-shadow:0 0 24px rgba(255,215,0,.1);
}
.plm-price-num {
    font-family:'Inter','Poppins',sans-serif; font-weight:900;
    font-size:clamp(1.8rem,5vw,2.4rem);
    background:linear-gradient(135deg,#ffd966,#ffb300);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 10px rgba(255,215,0,.4));
    line-height:1;
}
.plm-price-details {
    display:flex; flex-direction:column; gap:2px; text-align:left;
}
.plm-price-details span {
    font-family:'Inter','Poppins',sans-serif; font-weight:700;
    font-size:.75rem; color:rgba(255,215,0,.7);
}
.plm-price-details span:first-child { color:#ffd966; font-size:.88rem; }

/* ── Features ── */
.plm-features {
    padding:clamp(20px,4vw,36px) clamp(16px,5vw,40px);
    max-width:720px; margin:0 auto;
    display:flex; flex-direction:column; gap:12px;
    border-bottom:1px solid rgba(255,215,0,.07);
}

.plm-feat {
    display:flex; align-items:flex-start; gap:14px;
    padding:14px 16px; border-radius:14px;
    background:rgba(18,12,2,.7);
    border:1px solid rgba(255,215,0,.1);
    backdrop-filter:blur(8px);
    position:relative; overflow:hidden;
    transition:border-color .25s,transform .25s;
}
.plm-feat:hover { border-color:rgba(255,215,0,.28); transform:translateX(4px); }

.plm-feat-icon {
    font-size:1.5rem; flex-shrink:0;
    width:40px; height:40px;
    background:rgba(255,215,0,.08); border:1px solid rgba(255,215,0,.18);
    border-radius:10px; display:flex; align-items:center; justify-content:center;
}

.plm-feat-text { flex:1; min-width:0; }
.plm-feat-text h3 {
    font-family:'Inter','Poppins',sans-serif; font-weight:800;
    font-size:clamp(.82rem,2.3vw,.95rem); color:#ffd966;
    text-transform:uppercase; letter-spacing:.03em; margin-bottom:3px;
}
.plm-feat-text p { font-size:clamp(.7rem,1.9vw,.8rem); color:#a0a0a0; line-height:1.55; }

.plm-feat-new {
    position:absolute; top:8px; right:8px;
    padding:2px 7px; border-radius:5px;
    background:rgba(255,215,0,.1); border:1px solid rgba(255,215,0,.22);
    font-family:'Inter','Poppins',sans-serif; font-weight:900;
    font-size:.5rem; text-transform:uppercase;
    letter-spacing:.08em; color:rgba(255,215,0,.65);
}

/* ── Paiement ── */
.plm-payment {
    padding:clamp(20px,4vw,36px) clamp(16px,5vw,40px);
    max-width:560px; margin:0 auto;
    display:flex; flex-direction:column; gap:12px;
}

.plm-payment-title {
    font-family:'Inter','Poppins',sans-serif; font-weight:800;
    font-size:.8rem; text-transform:uppercase; letter-spacing:.1em;
    color:rgba(255,215,0,.55); text-align:center; margin-bottom:4px;
}

/* Wave (principal) */
.plm-pay-wave {
    display:flex; align-items:center; gap:14px;
    padding:16px 18px; border-radius:16px;
    background:linear-gradient(135deg,rgba(0,120,180,.15),rgba(0,90,140,.1));
    border:1.5px solid rgba(0,159,227,.35);
    cursor:pointer;
    transition:all .25s;
    box-shadow:0 0 20px rgba(0,159,227,.08);
    text-align:left; width:100%;
}
.plm-pay-wave:hover {
    border-color:rgba(0,159,227,.65);
    box-shadow:0 0 30px rgba(0,159,227,.2);
    transform:translateY(-2px);
}

.plm-pay-wave-icon { font-size:1.6rem; flex-shrink:0; }
.plm-pay-wave-text { flex:1; display:flex; flex-direction:column; gap:2px; }
.plm-pay-wave-name {
    font-family:'Inter','Poppins',sans-serif; font-weight:900;
    font-size:.9rem; color:#009fe3; text-transform:uppercase; letter-spacing:.04em;
}
.plm-pay-wave-desc { font-size:.68rem; color:rgba(0,159,227,.6); font-family:'Inter','Poppins',sans-serif; font-weight:600; }
.plm-pay-wave-price {
    font-family:'Inter','Poppins',sans-serif; font-weight:900;
    font-size:1rem; color:#009fe3;
    background:rgba(0,159,227,.12); border:1px solid rgba(0,159,227,.28);
    border-radius:8px; padding:4px 10px; flex-shrink:0;
}

/* PayPal */
.plm-pay-paypal {
    display:flex; align-items:center; gap:14px;
    padding:14px 18px; border-radius:16px;
    background:rgba(0,48,135,.1);
    border:1px solid rgba(0,80,180,.25);
    text-decoration:none; cursor:pointer;
    transition:all .25s;
}
.plm-pay-paypal:hover {
    border-color:rgba(0,120,220,.45);
    box-shadow:0 0 18px rgba(0,80,180,.12);
    transform:translateY(-1px);
}
.plm-pay-paypal > span:first-child { font-size:1.4rem; flex-shrink:0; }
.plm-pay-paypal > div { flex:1; display:flex; flex-direction:column; gap:2px; }
.plm-pay-pp-name {
    font-family:'Inter','Poppins',sans-serif; font-weight:800;
    font-size:.85rem; color:#4da3ff; display:block;
}
.plm-pay-pp-desc { font-size:.65rem; color:rgba(77,163,255,.55); font-family:'Inter','Poppins',sans-serif; font-weight:600; display:block; }
.plm-pay-pp-price {
    font-family:'Inter','Poppins',sans-serif; font-weight:900;
    font-size:.9rem; color:#4da3ff; flex-shrink:0;
}

/* Code */
.plm-code-section { width:100%; }
.plm-code-toggle {
    width:100%; padding:12px 18px; border-radius:12px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
    color:rgba(255,255,255,.55); font-family:'Inter','Poppins',sans-serif;
    font-weight:700; font-size:.78rem; text-transform:uppercase;
    letter-spacing:.06em; cursor:pointer; transition:all .2s;
}
.plm-code-toggle:hover { border-color:rgba(255,215,0,.25); color:rgba(255,215,0,.7); }

.plm-code-box {
    display:none;
    padding:14px; border-radius:0 0 12px 12px;
    background:rgba(10,7,2,.7);
    border:1px solid rgba(255,215,0,.14); border-top:none;
    margin-top:-1px;
}
.plm-code-box.open { display:block; animation:fadeDown .3s ease both; }
@keyframes fadeDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

.plm-code-row { display:flex; gap:8px; margin-bottom:6px; }
.plm-code-row input {
    flex:1; min-width:0; padding:9px 14px; border-radius:999px;
    border:1.5px solid rgba(255,215,0,.25); background:rgba(0,0,0,.4);
    color:#f4f4f4; font-family:'Inter','Poppins',sans-serif; font-weight:600;
    font-size:.84rem; outline:none; transition:border-color .2s,box-shadow .2s;
}
.plm-code-row input:focus { border-color:#ffd966; box-shadow:0 0 12px rgba(255,215,0,.2); }
.plm-code-row button {
    padding:9px 18px; border-radius:999px;
    background:linear-gradient(135deg,#ffd966,#ffb300);
    border:none; color:#1a0f00;
    font-family:'Inter','Poppins',sans-serif; font-weight:900;
    font-size:.78rem; text-transform:uppercase; cursor:pointer;
    transition:all .22s; white-space:nowrap;
}
.plm-code-row button:hover { box-shadow:0 0 16px rgba(255,215,0,.4); transform:translateY(-1px); }

.plm-code-msg {
    font-family:'Inter','Poppins',sans-serif; font-weight:700;
    font-size:.75rem; min-height:1.2em;
}
.plm-code-msg.ok    { color:#00ff66; }
.plm-code-msg.error { color:#ff6b6b; }

.plm-security-note {
    font-family:'Inter','Poppins',sans-serif; font-weight:600;
    font-size:.68rem; color:rgba(160,160,160,.6);
    text-align:center;
}

/* ── Wave panel interne ── */
.plm-wave-panel {
    display:none;
    position:absolute; inset:0;
    background:
        radial-gradient(ellipse at 50% 20%, rgba(0,100,160,.08), transparent 55%),
        #050706;
    overflow-y:auto;
    padding:clamp(20px,4vw,40px) clamp(16px,5vw,36px);
    text-align:center;
    z-index:5;
    animation:plmSlideIn .3s ease both;
}
.plm-wave-panel.open { display:block; }

.plm-wave-back {
    display:inline-flex; align-items:center; gap:6px;
    margin-bottom:20px;
    background:transparent; border:1px solid rgba(255,255,255,.15);
    border-radius:999px; color:#a0a0a0;
    font-family:'Inter','Poppins',sans-serif; font-weight:700;
    font-size:.78rem; padding:6px 14px; cursor:pointer; transition:all .2s;
}
.plm-wave-back:hover { border-color:rgba(0,159,227,.4); color:#009fe3; }

.plm-wave-panel h3 {
    font-family:'Inter','Poppins',sans-serif; font-weight:900;
    font-size:clamp(1rem,3.5vw,1.3rem); text-transform:uppercase;
    color:#009fe3; margin-bottom:6px;
}
.plm-wave-panel > p {
    font-size:.82rem; color:#a0a0a0; margin-bottom:18px; line-height:1.6;
}

.plm-wave-qr {
    width:160px; height:160px; margin:0 auto 16px;
    background:white; border-radius:12px; padding:10px;
    box-shadow:0 0 18px rgba(0,159,227,.2);
    display:flex; align-items:center; justify-content:center;
}
.plm-wave-qr img { width:100%; height:100%; object-fit:contain; }
.plm-qr-fallback {
    display:flex; flex-direction:column; align-items:center; gap:6px;
    width:100%;
}
.plm-qr-fallback svg { width:80px; height:80px; }
.plm-qr-fallback small { font-size:.58rem; color:#666; font-family:'Inter',sans-serif; text-align:center; }

.plm-wave-link { margin:12px 0; }
.plm-wave-link-label {
    display:block; font-size:.68rem; color:rgba(0,159,227,.6);
    font-family:'Inter','Poppins',sans-serif; font-weight:700;
    text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px;
}
.plm-wave-link-btn {
    display:inline-flex; align-items:center; gap:7px;
    padding:12px 24px; border-radius:999px;
    background:linear-gradient(135deg,#009fe3,#0077b6);
    color:#fff; text-decoration:none;
    font-family:'Inter','Poppins',sans-serif; font-weight:800;
    font-size:.85rem; text-transform:uppercase; letter-spacing:.05em;
    box-shadow:0 0 18px rgba(0,159,227,.3);
    transition:all .25s;
}
.plm-wave-link-btn:hover { box-shadow:0 0 28px rgba(0,159,227,.5); transform:translateY(-2px); }

.plm-wave-steps {
    list-style:none; text-align:left; margin:16px 0;
    max-width:320px; margin-left:auto; margin-right:auto;
    display:flex; flex-direction:column; gap:8px;
}
.plm-wave-steps li {
    font-family:'Inter','Poppins',sans-serif; font-weight:600;
    font-size:.78rem; color:#a0a0a0;
    display:flex; align-items:flex-start; gap:10px;
    counter-increment:step;
}
.plm-wave-steps { counter-reset:step; }
.plm-wave-steps li::before {
    content:counter(step);
    min-width:22px; height:22px; border-radius:50%;
    background:rgba(0,159,227,.15); border:1px solid rgba(0,159,227,.3);
    color:#009fe3; font-size:.62rem; font-weight:900;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

.plm-wave-note {
    background:rgba(0,159,227,.07); border:1px solid rgba(0,159,227,.18);
    border-radius:10px; padding:10px 14px;
    font-family:'Inter','Poppins',sans-serif; font-weight:700;
    font-size:.72rem; color:rgba(0,159,227,.75);
    max-width:360px; margin:0 auto;
}

/* ══ TEASER PRO (dans pages intérieures) ══ */
.pro-teaser-section {
    padding: clamp(28px,5vw,52px) clamp(14px,4vw,28px);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255,200,0,.07), transparent 55%),
        linear-gradient(180deg, rgba(18,12,0,.5) 0%, rgba(10,7,0,.8) 100%);
    border-top:    1px solid rgba(255,215,0,.1);
    border-bottom: 1px solid rgba(255,215,0,.05);
    position: relative; overflow: hidden;
}

.pro-teaser-inner {
    max-width: 800px; margin: 0 auto;
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
    gap: clamp(14px,3vw,22px);
}

.pt-label-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    justify-content: center;
}
.pt-label-chip {
    display: inline-flex; align-items: center;
    padding: 4px 14px; border-radius: 999px;
    background: rgba(255,215,0,.12); border: 1px solid rgba(255,215,0,.32);
    font-family: 'Inter','Poppins',sans-serif; font-weight: 900;
    font-size: .62rem; text-transform: uppercase; letter-spacing: .12em;
    color: #ffd966;
    animation: ptPulse 2.5s ease-in-out infinite;
}
@keyframes ptPulse { 0%,100%{box-shadow:0 0 10px rgba(255,215,0,.1)} 50%{box-shadow:0 0 22px rgba(255,215,0,.3)} }
.pt-label-price {
    font-family: 'Inter','Poppins',sans-serif; font-weight: 700;
    font-size: .68rem; color: rgba(255,215,0,.45);
    text-transform: uppercase; letter-spacing: .08em;
}

.pt-title-small {
    font-family: 'Inter','Poppins',sans-serif; font-weight: 900;
    font-size: clamp(1rem,3.8vw,1.55rem); text-transform: uppercase;
    letter-spacing: -.02em; line-height: 1.1; color: #fff;
}
.pt-hl-small {
    display: block;
    font-size: clamp(1.3rem,5.5vw,2.2rem);
    background: linear-gradient(135deg, #fff 0%, #ffd966 50%, #ffb300 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 14px rgba(255,215,0,.35));
    line-height: 1;
}
.pt-pro-chip {
    background: linear-gradient(135deg, #ffd966, #ff8c00);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pt-mini-features {
    display: flex; flex-wrap: wrap;
    justify-content: center; gap: 8px 16px;
}
.pt-mini-feat {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(255,215,0,.07); border: 1px solid rgba(255,215,0,.16);
    font-family: 'Inter','Poppins',sans-serif; font-weight: 700;
    font-size: .72rem; color: rgba(255,255,255,.75);
}
.pt-mini-icon { font-size: .9rem; }

.pt-cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: clamp(12px,3vw,15px) clamp(24px,5vw,44px);
    border-radius: 999px;
    background: linear-gradient(135deg,#ffd966,#ffb300);
    color: #1a0f00; border: none; cursor: pointer;
    font-family: 'Inter','Poppins',sans-serif; font-weight: 900;
    font-size: clamp(.82rem,2.5vw,.98rem); text-transform: uppercase;
    letter-spacing: .07em;
    box-shadow: 0 0 22px rgba(255,215,0,.32),0 4px 14px rgba(0,0,0,.4);
    transition: all .26s ease; white-space: nowrap;
}
.pt-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 38px rgba(255,215,0,.5),0 8px 22px rgba(0,0,0,.4);
}
.pt-note {
    font-family: 'Inter','Poppins',sans-serif; font-weight: 600;
    font-size: .68rem; color: rgba(160,160,160,.6);
}
/* ══════════════════════════════════════════
   FREE BOTTOM INFO SECTION
   À propos + Confidentialité + Dev — thème vert
   ══════════════════════════════════════════ */

.fbi-section {
    width: 100%;
    padding: clamp(40px,7vw,72px) clamp(14px,4vw,28px) 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(0,255,102,.06), transparent 50%),
        linear-gradient(180deg, rgba(0,15,8,.6) 0%, var(--bg) 100%);
    border-top: 1px solid rgba(0,255,102,.1);
    position: relative;
    overflow: hidden;
}

.fbi-section::before {
    content: '';
    position: absolute;
    top: -80px; left: 50%; transform: translateX(-50%);
    width: 600px; height: 180px;
    background: radial-gradient(ellipse, rgba(0,255,102,.07), transparent 70%);
    pointer-events: none;
}

.fbi-inner {
    max-width: 900px;
    margin: 0 auto;
    position: relative; z-index: 1;
}

/* ── En-tête ── */
.fbi-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: clamp(22px,4vw,36px);
}

.fbi-header-line {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,255,102,.3));
}
.fbi-header-line:last-child {
    background: linear-gradient(270deg, transparent, rgba(0,255,102,.3));
}

.fbi-header-center {
    display: flex; flex-direction: column;
    align-items: center; gap: 3px; flex-shrink: 0;
}

.fbi-header-ar {
    font-family: var(--fa, 'Amiri', serif);
    font-size: clamp(1rem,3.2vw,1.5rem);
    color: var(--g, #00ff66);
    text-shadow: 0 0 14px rgba(0,255,102,.35);
    line-height: 1;
}

.fbi-header-label {
    font-family: var(--fd, 'Inter', sans-serif);
    font-weight: 900; font-size: .56rem;
    text-transform: uppercase; letter-spacing: .18em;
    color: rgba(0,255,102,.4);
}

/* ── Tabs ── */
.fbi-tabs {
    display: flex; gap: 5px; flex-wrap: wrap;
    border-bottom: 1px solid rgba(0,255,102,.12);
    padding-bottom: 0;
    margin-bottom: clamp(18px,3.5vw,30px);
}

.fbi-tab {
    padding: 9px 18px;
    border-radius: 10px 10px 0 0;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    color: var(--muted, #a0a0a0);
    font-family: var(--fd, 'Inter', sans-serif);
    font-weight: 700;
    font-size: clamp(.67rem,1.9vw,.8rem);
    text-transform: uppercase; letter-spacing: .06em;
    cursor: pointer;
    transition: all .22s ease;
    margin-bottom: -1px;
}

.fbi-tab:hover {
    color: rgba(0,255,102,.7);
    background: rgba(0,255,102,.05);
}

.fbi-tab.active {
    color: var(--g, #00ff66);
    background: rgba(0,255,102,.07);
    border-color: rgba(0,255,102,.2);
    border-bottom-color: var(--bg, #050706);
}

/* ── Contents ── */
.fbi-content { display: none; animation: fbiIn .35s ease both; }
.fbi-content.active { display: block; }
@keyframes fbiIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ══ ABOUT ══ */
.fbi-about-hero {
    text-align: center;
    padding: clamp(18px,3.5vw,30px) 0 clamp(14px,3vw,22px);
}

.fbi-about-ar {
    display: block;
    font-family: var(--fa, 'Amiri', serif);
    font-size: clamp(1.7rem,6vw,2.8rem);
    color: var(--g, #00ff66);
    text-shadow: 0 0 22px rgba(0,255,102,.4);
    margin-bottom: 10px; line-height: 1.2;
}

.fbi-about-title {
    font-family: var(--fd, 'Inter', sans-serif);
    font-weight: 900;
    font-size: clamp(1.05rem,3.8vw,1.6rem);
    text-transform: uppercase; letter-spacing: -.02em;
    background: linear-gradient(135deg, #fff, var(--g, #00ff66));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.fbi-about-sub {
    color: var(--muted, #a0a0a0);
    font-size: clamp(.76rem,2.1vw,.88rem);
    max-width: 500px; margin: 0 auto; line-height: 1.65;
}

/* Stats */
.fbi-stats {
    display: flex; flex-wrap: wrap;
    justify-content: center; gap: 9px 18px;
    margin-bottom: clamp(18px,3.5vw,28px);
}

.fbi-stat {
    text-align: center; padding: 12px 18px;
    background: var(--card, rgba(12,22,16,.65));
    border: 1px solid rgba(0,255,102,.1);
    border-radius: 13px; backdrop-filter: blur(6px);
    transition: border-color .22s, transform .22s;
    min-width: 80px;
}
.fbi-stat:hover { border-color: rgba(0,255,102,.3); transform: translateY(-2px); }

.fbi-stat-num {
    display: block;
    font-family: var(--fd, 'Inter', sans-serif); font-weight: 900;
    font-size: clamp(1.2rem,3.8vw,1.7rem);
    background: linear-gradient(135deg, var(--g, #00ff66), #7dffae);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fbi-stat-lbl {
    font-family: var(--fd, 'Inter', sans-serif); font-weight: 700;
    font-size: .6rem; text-transform: uppercase;
    letter-spacing: .08em; color: var(--muted, #a0a0a0);
    margin-top: 2px; display: block;
}

/* Verset */
.fbi-verse-card {
    background: var(--card, rgba(12,22,16,.65));
    border: 1px solid rgba(0,255,102,.1);
    border-left: 3px solid var(--g, #00ff66);
    border-radius: 0 13px 13px 0;
    padding: clamp(13px,2.8vw,20px);
    margin-bottom: clamp(14px,3vw,22px);
    text-align: center;
}

.fbi-verse-ar {
    font-family: var(--fa, 'Amiri', serif);
    font-size: clamp(1rem,3.2vw,1.4rem);
    color: var(--g, #00ff66);
    text-shadow: 0 0 14px rgba(0,255,102,.3);
    display: block; margin-bottom: 7px; line-height: 1.7;
}

.fbi-verse-fr {
    font-size: clamp(.73rem,1.9vw,.83rem);
    color: var(--muted, #a0a0a0); font-style: italic; line-height: 1.6;
}

/* Cards 2 col */
.fbi-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,230px),1fr));
    gap: 11px; margin-bottom: clamp(18px,3.5vw,28px);
}

.fbi-card {
    background: var(--card, rgba(12,22,16,.65));
    border: 1px solid rgba(0,255,102,.09);
    border-radius: 13px; padding: clamp(14px,2.8vw,20px);
    backdrop-filter: blur(6px);
    transition: border-color .22s, transform .22s;
}
.fbi-card:hover { border-color: rgba(0,255,102,.25); transform: translateY(-2px); }
.fbi-card-icon { font-size: 1.4rem; margin-bottom: 7px; display: block; }
.fbi-card h3 {
    font-family: var(--fd, 'Inter', sans-serif); font-weight: 800;
    font-size: .85rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--g, #00ff66); margin-bottom: 5px;
}
.fbi-card p { font-size: .76rem; color: var(--muted, #a0a0a0); line-height: 1.6; }

/* Features */
.fbi-features-label {
    font-family: var(--fd, 'Inter', sans-serif); font-weight: 900;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
    color: rgba(0,255,102,.55); margin-bottom: 10px;
}

.fbi-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(min(100%,160px),1fr));
    gap: 7px; margin-bottom: clamp(18px,3.5vw,28px);
}

.fbi-feat {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 11px;
    background: rgba(12,22,16,.6);
    border: 1px solid rgba(0,255,102,.08);
    border-radius: 9px;
    font-family: var(--fd, 'Inter', sans-serif);
    transition: border-color .2s;
}
.fbi-feat:hover { border-color: rgba(0,255,102,.2); }
.fbi-feat > span:first-child { font-size: 1.1rem; flex-shrink: 0; }
.fbi-feat b { font-size: .76rem; font-weight: 700; display: block; color: var(--txt, #f4f4f4); }

.fbi-badge {
    font-family: var(--fd, 'Inter', sans-serif); font-weight: 800;
    font-size: .54rem; text-transform: uppercase; letter-spacing: .07em;
    padding: 2px 7px; border-radius: 999px; display: inline-block; margin-top: 2px;
}
.fbi-free { background:rgba(0,255,102,.09); border:1px solid rgba(0,255,102,.25); color:#00ff66; }
.fbi-pro  { background:rgba(255,215,0,.1);  border:1px solid rgba(255,215,0,.28);  color:#ffd966; }

.fbi-pro-cta-row { text-align: center; margin-bottom: clamp(18px,3.5vw,28px); }

.fbi-pro-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 11px 28px; border-radius: 999px;
    background: linear-gradient(135deg,#ffd966,#ffb300);
    color: #1a0f00; border: none; cursor: pointer;
    font-family: var(--fd, 'Inter', sans-serif); font-weight: 900;
    font-size: clamp(.78rem,2.3vw,.92rem); text-transform: uppercase;
    letter-spacing: .07em;
    box-shadow: 0 0 20px rgba(255,215,0,.28), 0 4px 14px rgba(0,0,0,.4);
    transition: all .26s ease;
}
.fbi-pro-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 34px rgba(255,215,0,.5), 0 8px 20px rgba(0,0,0,.4);
}

/* ══ PRIVACY ══ */
.fbi-privacy-hero {
    text-align: center;
    padding: clamp(16px,3.2vw,28px) 0 clamp(12px,2.5vw,20px);
}

.fbi-privacy-ico {
    display: block; font-size: clamp(1.8rem,5.5vw,2.8rem);
    margin-bottom: 9px;
    filter: drop-shadow(0 0 14px rgba(0,255,102,.3));
}

.fbi-privacy-title {
    font-family: var(--fd, 'Inter', sans-serif); font-weight: 900;
    font-size: clamp(.95rem,3.5vw,1.4rem); text-transform: uppercase;
    letter-spacing: -.02em;
    background: linear-gradient(135deg,#fff,var(--g, #00ff66));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; margin-bottom: 7px;
}

.fbi-privacy-sub {
    color: var(--muted, #a0a0a0); font-size: clamp(.74rem,2vw,.86rem);
    max-width: 460px; margin: 0 auto 9px; line-height: 1.6;
}

.fbi-chip {
    display: inline-block; padding: 3px 11px; border-radius: 999px;
    background: rgba(0,255,102,.08); border: 1px solid rgba(0,255,102,.22);
    font-family: var(--fd, 'Inter', sans-serif); font-weight: 700;
    font-size: .6rem; color: rgba(0,255,102,.6); letter-spacing: .07em;
}

.fbi-priv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,250px),1fr));
    gap: 10px; margin-bottom: clamp(18px,3.5vw,28px);
}

.fbi-priv-card {
    background: var(--card, rgba(12,22,16,.65));
    border: 1px solid rgba(0,255,102,.08);
    border-radius: 13px; padding: clamp(13px,2.8vw,18px);
    backdrop-filter: blur(6px);
    transition: border-color .22s;
}
.fbi-priv-card:hover { border-color: rgba(0,255,102,.22); }

.fbi-priv-head {
    display: flex; align-items: center; gap: 9px; margin-bottom: 8px;
}

.fbi-priv-ico {
    width: 26px; height: 26px;
    background: rgba(0,255,102,.1); border: 1px solid rgba(0,255,102,.22);
    border-radius: 7px; display: flex; align-items: center; justify-content: center;
    font-size: .82rem; flex-shrink: 0;
}

.fbi-priv-card h3 {
    font-family: var(--fd, 'Inter', sans-serif); font-weight: 800;
    font-size: .8rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--g, #00ff66);
}

.fbi-priv-card p {
    font-size: .76rem; color: rgba(244,244,244,.8); line-height: 1.7;
}

.fbi-list { list-style: none; margin-top: 7px; display: flex; flex-direction: column; gap: 4px; }
.fbi-list li {
    font-size: .74rem; color: rgba(244,244,244,.75);
    padding-left: 13px; position: relative; line-height: 1.55;
}
.fbi-list li::before { content:'›'; position:absolute; left:0; color:var(--g, #00ff66); font-weight:700; }

.fbi-highlight {
    background: rgba(0,255,102,.06); border-left: 3px solid var(--g, #00ff66);
    border-radius: 0 8px 8px 0; padding: 8px 11px; margin-top: 9px;
    font-size: .74rem; color: var(--txt, #f4f4f4); line-height: 1.6;
}

/* ══ DEV ══ */
.fbi-dev-hero {
    text-align: center; padding: clamp(16px,3.2vw,28px) 0 clamp(12px,2.5vw,20px);
    display: flex; flex-direction: column; align-items: center; gap: 9px;
}

.fbi-dev-avatar {
    width: 68px; height: 68px; border-radius: 50%;
    background: linear-gradient(135deg,var(--g-dk, #004d1f),var(--g, #00ff66));
    color: var(--bg, #050706);
    font-family: var(--fd, 'Inter', sans-serif); font-weight: 900; font-size: 1.7rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 26px rgba(0,255,102,.3);
}

.fbi-dev-name {
    font-family: var(--fd, 'Inter', sans-serif); font-weight: 900;
    font-size: clamp(1.1rem,3.8vw,1.6rem); text-transform: uppercase; letter-spacing: .08em;
    background: linear-gradient(135deg,#fff,var(--g, #00ff66));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 12px rgba(0,255,102,.22));
}

.fbi-dev-role {
    font-size: clamp(.73rem,2.1vw,.86rem); color: var(--muted, #a0a0a0);
    max-width: 360px; line-height: 1.5;
}

.fbi-skills { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

.fbi-skill {
    padding: 3px 11px; border-radius: 999px;
    background: rgba(0,255,102,.07); border: 1px solid rgba(0,255,102,.2);
    font-family: var(--fd, 'Inter', sans-serif); font-weight: 700;
    font-size: .62rem; text-transform: uppercase; letter-spacing: .06em;
    color: rgba(0,255,102,.65);
}

.fbi-portfolio-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 11px 26px; border-radius: 999px;
    background: transparent; border: 1.5px solid var(--g, #00ff66);
    color: var(--g, #00ff66); text-decoration: none;
    font-family: var(--fd, 'Inter', sans-serif); font-weight: 900;
    font-size: .86rem; text-transform: uppercase; letter-spacing: .07em;
    box-shadow: 0 0 16px rgba(0,255,102,.15);
    transition: all .25s;
}
.fbi-portfolio-btn:hover {
    background: var(--g, #00ff66); color: var(--bg, #050706);
    box-shadow: 0 0 30px rgba(0,255,102,.45); transform: translateY(-2px);
}

.fbi-contact-card {
    background: var(--card, rgba(12,22,16,.65));
    border: 1px solid rgba(0,255,102,.1);
    border-radius: 14px; padding: clamp(14px,2.8vw,22px);
    backdrop-filter: blur(6px);
    margin-bottom: clamp(18px,3.5vw,28px);
}

.fbi-contact-card h3 {
    font-family: var(--fd, 'Inter', sans-serif); font-weight: 800;
    font-size: .88rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--g, #00ff66); margin-bottom: 7px;
}

.fbi-contact-card p {
    font-size: .78rem; color: var(--muted, #a0a0a0); line-height: 1.6; margin-bottom: 12px;
}

.fbi-contact-links { display: flex; gap: 8px; flex-wrap: wrap; }

.fbi-contact-link {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 16px; border-radius: 999px;
    font-family: var(--fd, 'Inter', sans-serif); font-weight: 700;
    font-size: .74rem; text-decoration: none; cursor: pointer;
    transition: all .2s; border: none;
}

.fbi-cl-green {
    background: rgba(0,255,102,.08); border: 1px solid rgba(0,255,102,.24);
    color: var(--g, #00ff66);
}
.fbi-cl-green:hover { background: rgba(0,255,102,.16); border-color: var(--g, #00ff66); }

.fbi-cl-gold {
    background: rgba(255,215,0,.08); border: 1px solid rgba(255,215,0,.24);
    color: #ffd966;
}
.fbi-cl-gold:hover { background: rgba(255,215,0,.16); border-color: #ffd966; }

/* Footer bottom */
.fbi-footer-bottom {
    text-align: center;
    padding: clamp(18px,3.2vw,28px) 0 calc(clamp(18px,3.2vw,28px) + env(safe-area-inset-bottom,0px));
    border-top: 1px solid rgba(0,255,102,.08);
    margin-top: clamp(18px,3.5vw,30px);
    font-family: var(--fd, 'Inter', sans-serif); font-weight: 600;
    font-size: .62rem; color: var(--muted, #a0a0a0);
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: center; gap: 5px;
}
.fbi-footer-bottom a { color: var(--g, #00ff66); text-decoration: none; }
.fbi-footer-bottom a:hover { text-decoration: underline; }
.fbi-sep { color: rgba(255,255,255,.18); }

.fbi-footer-pro-link {
    background: transparent; border: none; cursor: pointer;
    font-family: var(--fd, 'Inter', sans-serif); font-weight: 800;
    font-size: .62rem; color: #ffd966; padding: 0;
    transition: text-shadow .2s;
}
.fbi-footer-pro-link:hover { text-shadow: 0 0 10px rgba(255,215,0,.4); }

/* Responsive */
@media (max-width: 480px) {
    .fbi-tabs { gap: 3px; }
    .fbi-tab { padding: 7px 11px; font-size: .6rem; }
    .fbi-priv-grid { grid-template-columns: 1fr; }
    .fbi-features-grid { grid-template-columns: repeat(2,1fr); }
    .fbi-cards-grid { grid-template-columns: 1fr; }
}

@media (min-width: 768px) {
    .fbi-priv-grid { grid-template-columns: repeat(2,1fr); }
    .fbi-features-grid { grid-template-columns: repeat(3,1fr); }
}