/* =====================================================================
   AstroLune — feuille de style
   Palette : nuit violette + or stellaire (style « astro tunnel »)
   ===================================================================== */

:root{
  --nuit:#08041a;
  --nuit-2:#140a33;
  --nuit-3:#1e1147;
  --encre:#f3ecff;
  --doux:#b9a9e6;
  --or:#e8c26a;
  --or-2:#c99b32;
  --or-3:#fbecc0;
  --violet:#7a4bd6;
  --rose:#d172d8;
  --bord:rgba(232,194,106,.24);
  --bord-2:rgba(255,255,255,.10);
  --carte:rgba(255,255,255,.045);
  --carte-2:rgba(255,255,255,.07);
  --ombre:0 18px 50px rgba(0,0,0,.45);
  --serif:Georgia,"Times New Roman",'Iowan Old Style',serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:18px;
  --max:660px;
  --max-l:1060px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  padding-bottom:86px; /* place pour le bandeau cookies */
  background:#08041a;
  color:var(--encre);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* calque de fond fixe (compatible iOS, contrairement à background-attachment:fixed) */
body:before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 700px at 78% -8%, rgba(122,75,214,.42), transparent 62%),
    radial-gradient(900px 620px at 8% 12%, rgba(209,114,216,.20), transparent 60%),
    linear-gradient(180deg,#08041a 0%, #0d0628 42%, #08041a 100%);
}
img{max-width:100%;display:block}
a{color:var(--or);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.22;margin:0 0 .5em;text-wrap:balance;overflow-wrap:break-word}
.titre-principal,.titre-offre,.titre-calcul{text-wrap:balance}
p{margin:0 0 1em}
.cache{display:none !important}
.centre{text-align:center}
.contenu{width:100%;max-width:var(--max);margin:0 auto;padding:0 18px 70px}
.contenu-etroit{max-width:var(--max)}
.mentions{font-size:12px;color:#8d81b8;line-height:1.5}
.mentions.petites{font-size:11px}
.erreur{color:#ff9aa8;font-size:14px;min-height:0;margin:.4em 0 .2em;font-weight:500}
.erreur:empty{display:none}

/* --------------------------- barre du haut --------------------------- */
.barre-top{position:fixed;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.07);z-index:60}
.barre-remplie{height:100%;width:0;background:linear-gradient(90deg,var(--or-2),var(--or-3),var(--or));box-shadow:0 0 14px rgba(232,194,106,.7);transition:width .45s ease}

.entete{position:fixed;top:3px;left:0;right:0;z-index:55;background:rgba(8,4,26,.72);backdrop-filter:blur(12px);border-bottom:1px solid var(--bord-2)}
.entete-int{max-width:var(--max-l);margin:0 auto;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{display:flex;align-items:center;gap:9px;color:var(--encre);font-family:var(--serif);letter-spacing:.12em;text-transform:uppercase;font-size:15px}
.logo:hover{text-decoration:none}
.logo-nom{background:linear-gradient(90deg,var(--or-3),var(--or));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-lune{width:20px;height:20px;border-radius:50%;background:conic-gradient(from 210deg,var(--or),var(--or-3),var(--or-2),var(--or));box-shadow:0 0 16px rgba(232,194,106,.55);position:relative;flex:0 0 auto}
.logo-lune:after{content:"";position:absolute;inset:5px 0 5px 5px;background:#0d0628;border-radius:50%}
.logo-lune.petite{width:13px;height:13px}
.logo-lune.petite:after{inset:3px 0 3px 3px}
.entete-etapes{font-size:12px;color:var(--doux);letter-spacing:.04em}

/* --------------------------- écrans --------------------------- */
.ecran{display:none;padding-top:56px}
.ecran.actif{display:block;animation:fade .45s ease both}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes flotter{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes tourner{to{transform:rotate(360deg)}}
@keyframes halo{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.95;transform:scale(1.06)}}

/* --------------------------- héros --------------------------- */
.hero{position:relative;overflow:hidden;padding:34px 0 6px;text-align:center}
.hero-fond{position:absolute;inset:0;background:url("assets/hero.jpg") center 30%/cover no-repeat;opacity:.62}
.hero{background:#0d0628}
.hero-fond:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,4,26,.55),rgba(8,4,26,.80) 55%,var(--nuit) 100%)}
.hero-contenu{position:relative;max-width:var(--max-l);margin:0 auto;padding:26px 18px 0}
.sur-titre{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--or);margin-bottom:14px}
.titre-principal{font-size:clamp(28px,7vw,52px);margin-bottom:14px;text-shadow:0 6px 30px rgba(0,0,0,.6)}
.sous-titre{color:#ded5ff;max-width:620px;margin:0 auto 22px;font-size:16px}

/* roue du zodiaque */
.roue-zone{position:relative;width:min(78vw,330px);height:min(78vw,330px);margin:6px auto 26px;animation:flotter 7s ease-in-out infinite}
.roue-zone.petite{width:min(60vw,220px);height:min(60vw,220px);margin:30px auto 18px}
.roue-halo{position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,rgba(122,75,214,.55),transparent 66%);filter:blur(16px);animation:halo 6s ease-in-out infinite}
.roue{position:absolute;inset:0;animation:tourner 130s linear infinite}
.roue svg{width:100%;height:100%;filter:drop-shadow(0 0 14px rgba(232,194,106,.35))}
.roue-centre{position:absolute;inset:26%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,rgba(232,194,106,.28),rgba(20,10,51,.92) 70%);border:1px solid var(--bord);box-shadow:inset 0 0 30px rgba(122,75,214,.55);font-family:var(--serif);font-size:clamp(34px,9vw,58px);color:var(--or-3)}
.roue-zone.petite .roue-centre{font-size:30px}

/* grille des signes */
.grille-signes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:560px;margin:0 auto 8px}
.signe{background:var(--carte);border:1px solid var(--bord-2);border-radius:14px;padding:10px 4px;cursor:pointer;transition:.25s;color:var(--doux);font-size:11px;letter-spacing:.02em}
.signe span{display:block;font-size:22px;color:var(--or);font-family:var(--serif)}
.signe:hover,.signe.actif{border-color:var(--or);background:rgba(232,194,106,.12);color:var(--encre);transform:translateY(-3px)}
.astuce-signes{font-size:12px;color:var(--or);min-height:18px;margin-bottom:26px}

/* --------------------------- cartes --------------------------- */
.carte{background:linear-gradient(180deg,var(--carte-2),var(--carte));border:1px solid var(--bord);border-radius:var(--r);padding:26px 22px;box-shadow:var(--ombre);backdrop-filter:blur(6px);margin-bottom:22px}
.carte-titre,.carte h3{font-size:22px;margin-bottom:8px}
.carte-texte{color:var(--doux);font-size:14px}
.carte-date{margin-top:-8px}

/* formulaires */
.champs-date{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0 6px}
.champ{display:flex;flex-direction:column;gap:6px}
.champ label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--doux)}
select,input[type=text],input[type=email]{
  width:100%;padding:13px 12px;border-radius:12px;border:1px solid var(--bord-2);
  background:rgba(10,5,28,.75);color:var(--encre);font-size:15px;font-family:var(--sans);
  appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--or) 50%),linear-gradient(135deg,var(--or) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
input[type=text],input[type=email]{background-image:none}
select:focus,input:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 3px rgba(232,194,106,.18)}
.champ-texte{margin:14px 0 4px;display:flex;flex-direction:column;gap:12px}
.case{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--doux);line-height:1.45}
.case input{accent-color:var(--or);margin-top:3px}

/* boutons */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:16px 22px;border-radius:999px;border:0;cursor:pointer;
  font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:.02em;transition:.25s;
}
.bouton-or{background:linear-gradient(135deg,var(--or-3),var(--or) 45%,var(--or-2));color:#2a1a04;box-shadow:0 10px 30px rgba(232,194,106,.28)}
.bouton-or:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(232,194,106,.42)}
.bouton-contour{background:transparent;color:var(--or);border:1px solid var(--bord)}
.bouton-contour:hover{background:rgba(232,194,106,.10)}
.bouton-lien{background:none;color:var(--doux);font-weight:400;text-decoration:underline;padding:10px}
.bouton.petit{width:auto;padding:10px 18px;font-size:14px}
.bouton:disabled{opacity:.6;cursor:default;transform:none}
.retour{text-align:center;margin-top:10px;font-size:13px}
.retour a{color:var(--doux)}

/* preuves + étapes */
.preuves{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:10px}
.preuves li{background:var(--carte);border:1px solid var(--bord-2);border-radius:14px;padding:12px 16px;font-size:14px;color:#ded5ff;display:flex;gap:10px;align-items:center}
.preuves li:before{content:"✦";color:var(--or);font-size:14px}
.bloc-etapes h3,.bloc-temoignages h3,.bloc-faq h3{text-align:center;font-size:24px;margin:34px 0 18px}
.etapes{display:grid;gap:12px;grid-template-columns:1fr}
.etape-num{display:flex;gap:14px;align-items:flex-start;background:var(--carte);border:1px solid var(--bord-2);border-radius:14px;padding:16px}
.etape-num i{font-style:normal;font-family:var(--serif);color:var(--or);font-size:26px;line-height:1;min-width:30px}
.etape-num strong{display:block;font-size:15px}
.etape-num span{font-size:13px;color:var(--doux)}
.bloc-astrologue{display:flex;gap:16px;align-items:center;background:var(--carte);border:1px solid var(--bord-2);border-radius:var(--r);padding:18px}
.bloc-astrologue img{width:88px;height:88px;object-fit:cover;border-radius:50%;border:2px solid var(--bord);flex:0 0 auto}
.bloc-astrologue h3{font-size:18px;margin-bottom:4px}
.bloc-astrologue p{font-size:13px;color:var(--doux);margin:0}

/* --------------------------- quiz --------------------------- */
.contenu-etroit{padding-top:24px}
.carte-quiz{padding:22px 20px 26px}
.quiz-barre{height:4px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden;margin-bottom:16px}
.quiz-barre-remplie{height:100%;width:0;background:linear-gradient(90deg,var(--or-2),var(--or-3));transition:width .4s ease}
.quiz-compteur{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--or);margin-bottom:6px}
.question{font-size:clamp(21px,5.4vw,27px);margin-bottom:6px}
.aide{font-size:13px;color:var(--doux)}
.options{display:grid;gap:10px;margin:18px 0 4px}
.option{
  text-align:left;padding:16px 18px;border-radius:14px;border:1px solid var(--bord-2);
  background:rgba(10,5,28,.55);color:var(--encre);font-size:16px;font-family:var(--sans);cursor:pointer;transition:.22s;
  display:flex;align-items:center;gap:12px;
}
.option:before{content:"";width:18px;height:18px;border-radius:50%;border:1.5px solid var(--bord);flex:0 0 auto;transition:.2s}
.option:hover{border-color:var(--or);transform:translateX(3px)}
.option.choisi{border-color:var(--or);background:rgba(232,194,106,.14)}
.option.choisi:before{background:radial-gradient(circle,var(--or) 42%,transparent 46%);border-color:var(--or)}
.micro{font-size:12px;color:var(--or);text-align:center;margin-top:6px;min-height:16px}

/* --------------------------- écran de calcul --------------------------- */
#ecran-calcul .contenu{padding-top:40px}
.titre-calcul{font-size:clamp(21px,5vw,28px)}
.barre-calcul{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin:22px 0 12px}
.barre-calcul-remplie{height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--rose),var(--or));transition:width .5s ease}
.etape-calcul{font-size:13px;color:var(--doux);min-height:20px}
.spinner{width:44px;height:44px;margin:26px auto 0;border-radius:50%;border:2px solid rgba(232,194,106,.25);border-top-color:var(--or);animation:tourner 1s linear infinite}

/* --------------------------- offre / paywall --------------------------- */
.entete-offre{position:relative;text-align:center;padding:26px 0 6px;border-bottom:1px solid var(--bord-2);margin-bottom:22px}
.entete-offre-fond{position:absolute;inset:0;background:url("assets/hero.jpg") center 60%/cover no-repeat;opacity:.35}
.entete-offre-fond:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,4,26,.5),var(--nuit))}
.entete-offre .contenu{position:relative}
.badge-ok{display:inline-block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#0c2a14;background:linear-gradient(135deg,#8ee6a8,#39b866);padding:6px 14px;border-radius:99px;font-weight:700;margin-bottom:14px}
.titre-offre{font-size:clamp(24px,6vw,36px)}
.sous-titre-offre{color:#ded5ff;font-size:15px}
.profil-astro{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:20px 0 4px;text-align:left}
.profil-astro div{background:var(--carte);border:1px solid var(--bord-2);border-radius:12px;padding:11px 13px}
.profil-astro span{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--doux)}
.profil-astro strong{font-family:var(--serif);font-size:17px;color:var(--or-3);font-weight:400}
.etiquette-libre{display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--or);margin-bottom:10px}
.apercu-texte{font-family:var(--serif);font-size:16.5px;line-height:1.75;color:#e9e1ff}
.apercu-texte p:last-child{margin-bottom:0}
.surligne{color:var(--or-3);border-bottom:1px dotted var(--or)}
.chapitres{list-style:none;padding:0;margin:0 0 16px}
.chapitres li{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px dashed rgba(255,255,255,.09);font-size:14.5px;color:#ded5ff}
.chapitres li:last-child{border-bottom:0}
.chapitres li b{font-weight:400;color:var(--doux);font-size:15px}
.flou{filter:blur(4.5px);user-select:none;pointer-events:none;font-family:var(--serif);color:#cfc3f5;font-size:15px;line-height:1.7;max-height:120px;overflow:hidden;position:relative}
.flou:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(8,4,26,.9))}
.carte-prix{border-color:var(--or)}
.urgence{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;background:rgba(209,114,216,.14);border:1px dashed rgba(209,114,216,.5);border-radius:12px;padding:11px 14px;margin-bottom:18px;font-size:13px;color:#f0dcff}
.urgence strong{color:#fff}
.compteur{font-family:var(--serif);font-size:19px;color:var(--or-3);background:rgba(0,0,0,.3);padding:2px 10px;border-radius:8px}
.contenus{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:9px}
.contenus li{display:flex;gap:10px;font-size:14.5px;color:#e6dfff}
.contenus li:before{content:"✦";color:var(--or);flex:0 0 auto}
.offres{display:grid;gap:14px}
.offre{position:relative;border:1px solid var(--bord);border-radius:16px;padding:20px;background:linear-gradient(180deg,rgba(232,194,106,.10),rgba(255,255,255,.03))}
.offre-simple{background:var(--carte)}
.etiquette-choix{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--or-3),var(--or));color:#2a1a04;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:99px;white-space:nowrap}
.offre-nom{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--doux);margin-bottom:6px}
.offre-prix{font-family:var(--serif);font-size:30px;color:#fff;margin-bottom:2px}
.offre-prix small{font-size:14px;color:var(--doux)}
.offre-sous{font-size:12.5px;color:var(--doux);margin-bottom:14px}
.garantie{font-size:13px;color:#b8f0c8;background:rgba(57,184,102,.10);border:1px solid rgba(57,184,102,.3);border-radius:12px;padding:11px 14px;margin:14px 0 8px}
.paiement-securise{font-size:12px;color:var(--doux);text-align:center}
.temoignages{display:grid;gap:12px}
.temoignage{background:var(--carte);border:1px solid var(--bord-2);border-radius:14px;padding:16px}
.temoignage .etoiles{color:var(--or);font-size:13px;letter-spacing:2px}
.temoignage p{font-size:14px;color:#e6dfff;margin:8px 0 6px}
.temoignage .qui{font-size:12px;color:var(--doux)}
.faq-item{border-bottom:1px solid var(--bord-2)}
.faq-q{width:100%;text-align:left;background:none;border:0;color:var(--encre);font-family:var(--serif);font-size:16px;padding:14px 0;cursor:pointer;display:flex;justify-content:space-between;gap:10px}
.faq-q span{color:var(--or)}
.faq-r{font-size:14px;color:var(--doux);padding:0 0 14px;display:none}
.faq-item.ouvert .faq-r{display:block}

/* --------------------------- merci --------------------------- */
.carte-merci{margin-top:34px;padding:30px 24px}
.sceau{font-size:40px;margin-bottom:6px}
.liste-merci{text-align:left;font-size:14.5px;color:#e6dfff;padding-left:20px;display:grid;gap:8px;margin:16px 0 20px}
.signature{font-family:var(--serif);font-size:17px;color:var(--or-3);line-height:1.7}

/* --------------------------- pied de page --------------------------- */
.pied{border-top:1px solid var(--bord-2);background:rgba(6,3,18,.92);padding:26px 0 34px;margin-top:10px}
.pied-int{max-width:var(--max-l);margin:0 auto;padding:0 18px;text-align:center}
.pied-marque{font-family:var(--serif);letter-spacing:.08em;color:var(--or);display:flex;gap:8px;align-items:center;justify-content:center;margin-bottom:12px}
.pied-liens{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-bottom:14px;font-size:13px}
.pied-liens a{color:var(--doux)}
.pied .mentions{margin:0 0 8px}

/* --------------------------- bandeau + modale --------------------------- */
.bandeau-cookie{position:fixed;left:12px;right:12px;bottom:12px;z-index:70;background:rgba(13,7,34,.96);border:1px solid var(--bord);border-radius:14px;padding:14px 16px;display:flex;gap:14px;align-items:center;justify-content:space-between;box-shadow:var(--ombre);max-width:760px;margin:0 auto}
.bandeau-cookie p{margin:0;font-size:12.5px;color:var(--doux)}
.voile{position:fixed;inset:0;z-index:80;background:rgba(4,2,12,.78);backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px}
.modale{max-width:440px;background:linear-gradient(180deg,var(--nuit-3),var(--nuit-2));border:1px solid var(--bord);border-radius:18px;padding:26px;text-align:center;box-shadow:var(--ombre)}
.modale h3{font-size:21px}
.modale p{font-size:14px;color:var(--doux)}

/* --------------------------- bandeau cookies : version compacte mobile --------------------------- */
@media (max-width:560px){
  .bandeau-cookie{flex-direction:column;align-items:stretch;gap:8px;padding:12px 14px}
  .bandeau-cookie p{font-size:11.5px;line-height:1.45}
  .bandeau-cookie .bouton{width:100%;padding:11px 16px;font-size:14px}
}

/* --------------------------- protection légère --------------------------- */
.protege{user-select:none;-webkit-user-select:none}

/* --------------------------- ordinateur --------------------------- */
@media (min-width:760px){
  .etapes{grid-template-columns:repeat(2,1fr)}
  .offres{grid-template-columns:1fr 1fr;align-items:start}
  .temoignages{grid-template-columns:repeat(3,1fr)}
  .profil-astro{grid-template-columns:repeat(4,1fr)}
  .carte{padding:32px 30px}
  .contenu{padding-bottom:90px}
}

/* =====================================================================
   COMPTES, LECTURE DÉBLOQUÉE, ESPACE MEMBRE  (ajouts)
   ===================================================================== */

/* ---------- entête : lien compte ---------- */
.entete-droite{display:flex;align-items:center;gap:14px}
.lien-compte{font-size:12.5px;letter-spacing:.04em;color:var(--doux);border:1px solid var(--bord-2);padding:6px 12px;border-radius:99px;transition:.2s;white-space:nowrap}
.lien-compte:hover{color:var(--encre);border-color:var(--or);text-decoration:none}
.lien-compte.connecte{color:var(--or-3);border-color:var(--bord);background:rgba(232,194,106,.10)}

/* ---------- étape compte ---------- */
.onglets-compte{display:flex;gap:6px;background:rgba(10,5,28,.55);border:1px solid var(--bord-2);border-radius:99px;padding:5px;margin:20px 0 16px}
.onglet{flex:1;border:0;background:none;color:var(--doux);font-family:var(--sans);font-size:13px;padding:10px 8px;border-radius:99px;cursor:pointer;transition:.2s}
.onglet.actif{background:linear-gradient(135deg,var(--or-3),var(--or));color:#2a1a04;font-weight:600}
.motdepasse{position:relative;display:flex;align-items:center}
.motdepasse input{padding-right:46px}
.oeil{position:absolute;right:10px;background:none;border:0;cursor:pointer;padding:6px;line-height:0;opacity:.75}
.oeil:hover{opacity:1}
.avantages-compte{list-style:none;padding:0;margin:16px 0 4px;display:grid;gap:8px}
.avantages-compte li{display:flex;gap:9px;font-size:13.5px;color:#ded5ff}
.avantages-compte li:before{content:"✓";color:var(--or);flex:0 0 auto}

/* ---------- lecture : chapitres ---------- */
.carte-lecture{border-color:var(--bord)}
.badge-acces{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:6px 13px;border-radius:99px;margin-bottom:14px;background:rgba(255,255,255,.08);color:var(--doux)}
.badge-acces.ok{background:linear-gradient(135deg,#8ee6a8,#39b866);color:#0c2a14}
.badge-acces.apercu{background:rgba(232,194,106,.16);color:var(--or-3);border:1px solid var(--bord)}
.lecture-chapitres{font-family:var(--serif);font-size:16.5px;line-height:1.78;color:#eee7ff}
.chapitre{margin-bottom:26px;padding-bottom:22px;border-bottom:1px dashed rgba(255,255,255,.10)}
.chapitre:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.chapitre h4{font-size:19px;color:var(--or-3);font-family:var(--serif);margin-bottom:12px;letter-spacing:.01em}
.chapitre p{margin-bottom:12px}
.chapitre strong{color:#fff;font-weight:600}

/* ---------- paiements ---------- */
.avis-demo{font-size:12.5px;color:#ffd9a8;background:rgba(232,194,106,.10);border:1px dashed var(--bord);border-radius:12px;padding:11px 14px;margin-bottom:16px}
.offre.mise-en-avant{border-color:var(--or);background:linear-gradient(180deg,rgba(232,194,106,.12),rgba(255,255,255,.03))}
.bouton-paypal,.bouton-paypal-clair{background:#ffc439;color:#0b2e63;font-weight:700}
.bouton-paypal:hover,.bouton-paypal-clair:hover{background:#f2b32c;transform:translateY(-2px)}
.bouton-paypal-clair{background:rgba(255,196,57,.16);color:#ffe0a3;border:1px solid rgba(255,196,57,.5)}
.bouton-paypal-clair:hover{background:rgba(255,196,57,.26)}
.pp-logo{display:inline-flex;align-items:center;margin-right:2px}
.offre-note{font-size:11.5px;color:var(--doux);margin:10px 0 0}
.alternative{font-size:13px;text-align:center;margin:14px 0 0}

/* ---------- lecture débloquée ---------- */
.carte-debloque{border-color:rgba(57,184,102,.5);background:linear-gradient(180deg,rgba(57,184,102,.12),rgba(255,255,255,.03))}
.actions-debloque{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.actions-debloque .bouton{width:auto}

/* ---------- espace membre ---------- */
.carte-membre{padding:26px 22px}
.titre-section{font-size:22px;margin:30px 0 14px;text-align:left}
.liste-lectures{display:grid;gap:10px}
.ligne-lecture{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;background:var(--carte);border:1px solid var(--bord-2);border-radius:14px;padding:14px 16px}
.ligne-lecture strong{display:block;font-family:var(--serif);font-size:16.5px;font-weight:400}
.ligne-actions{display:flex;align-items:center;gap:10px}
.ligne-actions .bouton{width:auto;padding:9px 16px;font-size:14px}
.pastille{font-size:11.5px;padding:5px 11px;border-radius:99px;white-space:nowrap}
.pastille.ok{background:rgba(57,184,102,.16);color:#a8f0c0;border:1px solid rgba(57,184,102,.4)}
.pastille.verrou{background:rgba(232,194,106,.14);color:var(--or-3);border:1px solid var(--bord)}
.liste-achats{display:grid;gap:8px}
.ligne-achat{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;font-size:13.5px;color:#ded5ff;border-bottom:1px dashed rgba(255,255,255,.09);padding:10px 2px}
.replie{margin-top:26px;padding:18px 22px}
.replie summary{cursor:pointer;font-family:var(--serif);font-size:16px;color:var(--or-3)}
.replie .champ-texte{margin-top:14px}
.reprise{text-align:center;font-size:13.5px;margin-top:-6px}
.reprise a{color:var(--or-3);border-bottom:1px dotted var(--bord)}

@media (max-width:560px){
  .entete-etapes{display:none}
  .lien-compte{font-size:12px;padding:5px 10px}
  .chapitre h4{font-size:17.5px}
  .lecture-chapitres{font-size:16px}
  .ligne-lecture{align-items:flex-start}
  .alternatives{text-align:center}
}

/* ---------- paiement non activé / bouton inactif ---------- */
.avis-paiement{font-size:13px;color:#ffd0d0;background:rgba(255,120,120,.10);border:1px solid rgba(255,120,120,.35);border-radius:12px;padding:12px 15px;margin-bottom:16px;line-height:1.5}
.avis-paiement:before{content:"⚠ ";color:#ff9a9a}
.bouton-inactif{opacity:.45;cursor:not-allowed;filter:grayscale(.5)}
.bouton-inactif:hover{transform:none}

/* =====================================================================
   ESPACE ADMINISTRATEUR (admin.html)
   ===================================================================== */
.admin-entete{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:flex-start;margin:26px 0 18px}
.admin-titre{font-size:30px;margin:0}
.admin-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.admin-actions .bouton{width:auto}
.grille-stats{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin-bottom:26px}
.carte-stat{background:linear-gradient(180deg,var(--carte-2),var(--carte));border:1px solid var(--bord);border-radius:16px;padding:16px 18px}
.stat-libelle{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--doux);margin-bottom:6px}
.stat-valeur{display:block;font-family:var(--serif);font-size:26px;color:var(--or-3);margin-bottom:4px}
.liste-notifs{display:grid;gap:8px;margin-bottom:30px}
.notif{background:var(--carte);border:1px solid var(--bord-2);border-left:3px solid var(--bord);border-radius:12px;padding:12px 15px}
.notif.neuve{border-left-color:var(--or);background:rgba(232,194,106,.07)}
.notif.paiement{border-left-color:#39b866}
.notif.inscription{border-left-color:#7a4bd6}
.notif.erreur{border-left-color:#ff7a7a}
.notif-tete{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.notif-tete strong{font-family:var(--serif);font-size:16px;font-weight:400;color:#f0e9ff}
.notif-texte{font-size:13px;color:var(--doux);margin:6px 0 0;line-height:1.5}
.barre-recherche{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.barre-recherche input{flex:1 1 240px;background:rgba(10,5,28,.75)}
.menu-onglets{display:flex;gap:6px;background:rgba(10,5,28,.55);border:1px solid var(--bord-2);border-radius:99px;padding:4px}
.onglet-mini{border:0;background:none;color:var(--doux);font-size:13px;padding:8px 14px;border-radius:99px;cursor:pointer}
.onglet-mini.actif{background:linear-gradient(135deg,var(--or-3),var(--or));color:#2a1a04;font-weight:600}
.tableau{background:var(--carte);border:1px solid var(--bord-2);border-radius:16px;overflow:hidden}
.ligne-table{display:grid;grid-template-columns:2.2fr 1fr 1fr 1.4fr 0.9fr 0.9fr;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.06);font-size:13.5px;align-items:center}
.ligne-table:last-child{border-bottom:0}
.ligne-table.entete{background:rgba(255,255,255,.05);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--doux)}
.ligne-table strong{display:block;font-family:var(--serif);font-size:15.5px;font-weight:400}
.ligne-table .mentions{display:block;margin:2px 0 0}
.liste-lectures-admin{list-style:none;padding:0;margin:6px 0 14px;display:grid;gap:7px;font-size:13.5px}
.liste-lectures-admin li{background:rgba(255,255,255,.05);border-radius:10px;padding:9px 12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.detail-membre{text-align:left;font-size:14px;color:var(--encre)}
#carteCourriel.active{border-color:rgba(57,184,102,.45);background:linear-gradient(180deg,rgba(57,184,102,.10),rgba(255,255,255,.03))}
@media (max-width:760px){
  .grille-stats{grid-template-columns:1fr 1fr}
  .ligne-table{grid-template-columns:1fr;gap:4px;padding:12px 14px}
  .ligne-table.entete{display:none}
  .ligne-table span:before{content:attr(data-l);}
}

/* lecture verrouillée sans chapitre offert */
.apercu-vide{background:linear-gradient(180deg,rgba(232,194,106,.10),rgba(255,255,255,.03));border:1px dashed rgba(232,194,106,.45);border-radius:14px;padding:18px 20px;margin-bottom:16px}
.apercu-vide p{margin:0;font-size:15px;color:#f2ecff;line-height:1.65}
#noteSecurite{margin-top:12px;text-align:center;line-height:1.5}

/* ---------------------------------------------------------------------
   paiement par lien PayPal (sans clés API) — validation par vous
   --------------------------------------------------------------------- */
.carte-lien-paiement{background:linear-gradient(180deg,rgba(232,194,106,.10),rgba(255,255,255,.03));border:1px solid rgba(232,194,106,.4);border-radius:16px;padding:18px 20px;margin-top:16px;text-align:left}
.carte-lien-paiement h4{font-family:var(--serif);font-size:18px;margin:0 0 8px;color:var(--or-3)}
.carte-lien-paiement p{margin:0 0 10px;font-size:14.5px;color:#efe9ff;line-height:1.6}
.ligne-lien{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ligne-lien input{flex:1 1 200px;background:rgba(10,5,28,.7)}
.ligne-lien .bouton{width:auto;flex:0 0 auto}
.statut-lien{margin-top:12px !important;font-size:14px;color:#39b866}
.actions-verif{display:flex;gap:6px;flex-wrap:wrap}
#pastilleAVerifier{background:#e8c26a;color:#2a1a04}

/* carte « mise en route » de l'administration */
.demarrage-choix{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.demarrage-bloc{background:rgba(255,255,255,.05);border:1px solid var(--bord-2);border-radius:14px;padding:14px 16px}
.demarrage-bloc strong{display:block;font-family:var(--serif);font-size:15.5px;color:var(--or-3);margin-bottom:8px}
.demarrage-bloc code{display:block;background:rgba(10,5,28,.75);border:1px solid var(--bord-2);border-radius:9px;padding:9px 11px;font-size:12.5px;color:#ffe9b0;margin:8px 0;word-break:break-all}
@media (max-width:760px){.demarrage-choix{grid-template-columns:1fr}}

.rappel-offre{margin:10px 0 0;padding:9px 14px;border-radius:99px;background:rgba(232,194,106,.12);border:1px solid rgba(232,194,106,.35);color:#ffe9b0;font-size:13px;text-align:center}

/* ---------------------------------------------------------------
   aperçu partiel : le suspense avant le paiement
   --------------------------------------------------------------- */
.suspense{margin:0 0 14px;padding:14px 16px;border-radius:14px;background:linear-gradient(180deg,rgba(232,194,106,.14),rgba(255,255,255,.03));border:1px solid rgba(232,194,106,.4);color:#ffe9b0;font-size:14.5px;line-height:1.6;text-align:left}
.offres{grid-template-columns:1fr;max-width:420px;margin:0 auto}
.offre.offre-simple .offre-prix small{display:block;font-size:13px;color:var(--doux);margin-top:4px}

/* =====================================================================
   EMAIL POPUP — Capture d'email & conversion
   ===================================================================== */
.email-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.email-popup.shown {
  opacity: 1;
  pointer-events: auto;
}

.email-popup.cache {
  display: none !important;
}

.email-popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
}

.email-popup-content {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, var(--nuit-3), var(--nuit-2));
  border: 1px solid var(--bord);
  border-radius: 20px;
  padding: 32px 28px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.email-popup-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: var(--doux);
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.email-popup-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--or-3);
}

.email-popup-content h3 {
  font-family: var(--serif);
  font-size: 22px;
  margin: 0 0 12px;
  color: var(--or-3);
  line-height: 1.3;
}

.email-popup-content p {
  margin: 0 0 18px;
  font-size: 15px;
  color: var(--doux);
  line-height: 1.5;
}

.email-popup-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.email-popup-form input {
  padding: 12px 14px;
  border: 1px solid var(--bord);
  border-radius: 10px;
  background: rgba(10, 5, 28, 0.7);
  color: var(--encre);
  font-size: 15px;
  font-family: var(--sans);
  transition: border-color 0.2s;
}

.email-popup-form input:focus {
  outline: none;
  border-color: var(--or);
  box-shadow: 0 0 0 3px rgba(232, 194, 106, 0.1);
}

.email-popup-form button {
  width: 100%;
  padding: 12px 16px;
}

.email-popup-note {
  margin: 0;
  font-size: 12px;
  color: var(--doux);
  text-align: center;
  opacity: 0.8;
}

@media (max-width: 480px) {
  .email-popup-content {
    padding: 24px 20px;
    border-radius: 16px;
  }
  
  .email-popup-content h3 {
    font-size: 19px;
  }
  
  .email-popup-content p {
    font-size: 14px;
  }
}

/* =====================================================================
   BLOG
   ===================================================================== */
.blog-liste{display:grid;gap:16px;margin-top:8px}
.blog-carte{display:block;cursor:pointer;transition:.25s}
.blog-carte:hover{border-color:var(--or);transform:translateY(-2px);text-decoration:none}
.blog-date{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--or);margin:0 0 8px}
.blog-titre{font-family:var(--serif);font-size:22px;margin:0 0 8px;color:var(--encre)}
.blog-resume{font-size:15px;color:var(--doux);margin:0 0 14px;line-height:1.55}
.blog-lire{font-size:13px;color:var(--or);letter-spacing:.04em}
.blog-article{line-height:1.75;font-size:16.5px}
.blog-article h2{font-size:23px;margin-top:1.6em}
.blog-article p{margin:0 0 1.1em}
.blog-article .blog-meta{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--or);margin-bottom:6px}
.blog-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.blog-tag{font-size:12px;color:var(--doux);background:var(--carte);border:1px solid var(--bord-2);border-radius:999px;padding:5px 12px}
@media (min-width:640px){.blog-liste{grid-template-columns:1fr 1fr}}

/* --------------------------- bloc tarot en haut de l'accueil --------------------------- */
.bandeau-tarot{display:flex;align-items:center;gap:10px;max-width:420px;margin:0 auto 18px;padding:10px 16px;border-radius:99px;
  border:1px solid var(--bord);background:linear-gradient(135deg,rgba(232,194,106,.16),rgba(122,75,214,.18));color:var(--or-3);font-size:14px;transition:.25s;box-shadow:0 8px 26px rgba(0,0,0,.3)}
.bandeau-tarot:hover{border-color:var(--or);transform:translateY(-2px);text-decoration:none}
.bandeau-tarot .bt-ico{font-size:18px}
.bandeau-tarot .bt-txt{flex:1;text-align:left}
.bandeau-tarot b{color:var(--or);font-weight:600}
.bandeau-tarot .bt-fleche{color:var(--or)}