/* Aperçu de la nouvelle version d'Astromazal (01/11/2026) : le style commun des pages apercu-*.html.
   Pages cachées (noindex), le site en ligne n'en dépend pas. */
:root{
  --nuit:#0b1224; --nuit-2:#111b33; --nuit-3:#18244a; --trait:rgba(230,199,106,.28);
  --or:#cfa83c; --or-clair:#e6c76a; --or-pale:#f2e3b6; --ivoire:#f2e9d4; --ivoire-2:#c9c0aa; --gris:#9aa6bf;
  --noir-texte:#1c1a14;
  --degrade:linear-gradient(135deg,#efd384 0%,#cfa83c 48%,#a8842b 100%);
  --degrade-survol:linear-gradient(135deg,#f6e0a0 0%,#dbb54b 48%,#b8932f 100%);
  --titre:'Cormorant Garamond',Georgia,serif; --texte:'Lora',Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--nuit) url("fond-etoiles.svg"); color:var(--ivoire); font-family:var(--texte); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
a{color:var(--or-clair)}
.he{font-family:'Frank Ruhl Libre','David',serif; direction:rtl; unicode-bidi:isolate}
.bandeau-apercu{background:#3a2c0c; color:var(--or-pale); font-size:13px; text-align:center; padding:7px 16px; letter-spacing:.04em}
.page{max-width:1080px; margin:0 auto; padding:0 18px}

/* ---- en-tête : trois entrées seulement ---- */
header{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 0}
.logo{font-family:var(--titre); font-size:27px; letter-spacing:.06em; color:var(--ivoire); text-decoration:none}
.logo span{color:var(--or-clair)}
nav{display:flex; flex-wrap:wrap; gap:6px 20px; font-size:14px; letter-spacing:.08em}
nav a[aria-current]{color:var(--or-clair)}
nav a{color:var(--ivoire-2); text-decoration:none}
nav a:hover{color:var(--or-clair)}
@media (max-width:620px){ header{flex-direction:column; gap:8px} nav{justify-content:center; gap:4px 14px; font-size:13px} .logo{font-size:23px} }

/* ---- héros ---- */
.heros{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; padding:34px 0 56px}
.kicker{font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--or-clair); font-weight:600}
h1{font-family:var(--titre); font-weight:500; font-size:58px; line-height:1.04; margin:14px 0 18px; color:var(--ivoire)}
h1 em{font-style:italic; color:var(--or-clair)}
.chapeau{font-size:19px; color:var(--ivoire-2); max-width:34em}
.garanties{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:22px; font-size:14px; color:var(--gris)}
.garanties span::before{content:""; display:inline-block; width:6px; height:6px; background:var(--or); transform:rotate(45deg); margin:0 8px 2px 0}
@media (max-width:880px){ .heros{grid-template-columns:1fr; gap:26px; padding-top:18px} h1{font-size:42px} .chapeau{font-size:17.5px} }

/* ---- formulaire ---- */
.carte{background:linear-gradient(180deg,rgba(24,36,74,.92),rgba(17,27,51,.94)); border:1px solid var(--trait); border-radius:10px; padding:26px 24px; box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
.carte h2{font-family:var(--titre); font-weight:500; font-size:29px; line-height:1.15; text-align:center; margin-bottom:4px}
.carte .sous{text-align:center; color:var(--gris); font-size:14.5px; margin-bottom:20px}
.champ{margin-bottom:16px}
.champ > label, .champ > .etiq{display:block; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--or-clair); margin-bottom:7px; font-weight:600}
.date{display:grid; grid-template-columns:.8fr 1.4fr 1fr; gap:8px}
select{width:100%; font:inherit; font-size:17px; color:var(--ivoire); background:#0e1730; border:1px solid rgba(230,199,106,.35); border-radius:6px; padding:12px 10px; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--or-clair) 50%),linear-gradient(135deg,var(--or-clair) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%; background-size:5px 5px; background-repeat:no-repeat}
select:focus{outline:none; border-color:var(--or-clair); box-shadow:0 0 0 3px rgba(207,168,60,.2)}
.genre{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.genre label{display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border:1px solid rgba(230,199,106,.35); border-radius:6px; cursor:pointer; color:var(--ivoire-2); background:#0e1730}
.genre input{position:absolute; opacity:0; pointer-events:none}
.genre label:has(input:checked){background:var(--or) var(--degrade); border-color:var(--or); color:var(--noir-texte); font-weight:600}
.champ > label.soir{display:flex; gap:10px; align-items:flex-start; font-size:15px; letter-spacing:0; text-transform:none; font-weight:400; color:var(--ivoire-2); cursor:pointer; margin:0}
.soir input{margin-top:5px; accent-color:var(--or); width:17px; height:17px}
.bouton{display:block; width:100%; text-align:center; text-decoration:none; font:inherit; font-size:17px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--noir-texte); background:var(--or) var(--degrade); border:0; border-radius:6px; padding:17px 18px; cursor:pointer; box-shadow:0 10px 26px -12px rgba(207,168,60,.6); transition:transform .15s}
.bouton:hover{background:var(--or-clair) var(--degrade-survol); transform:translateY(-1px)}
.bouton.second{background:transparent; color:var(--or-clair); border:1px solid var(--or); box-shadow:none}
.bouton.second:hover{background:rgba(230,199,106,.1)}
.erreur{color:#f0a48c; font-size:15px; margin-top:10px; text-align:center; display:none}
.preuve{text-align:center; font-style:italic; color:var(--or-clair); font-size:15px; margin-top:12px}

/* ---- résultat gratuit ---- */
#resultat{display:none; padding:10px 0 60px}
#resultat.ok{display:block; animation:monte .6s ease}
@keyframes monte{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.res-tete{text-align:center; margin-bottom:24px}
.res-date{font-family:var(--titre); font-size:34px; color:var(--ivoire)}
.res-date .he{display:block; font-size:28px; color:var(--or-clair); margin-top:2px}
.duel{display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:stretch; max-width:820px; margin:0 auto}
.duel .cote{border:1px solid var(--trait); border-radius:10px; padding:22px 18px; text-align:center; background:rgba(17,27,51,.7)}
.duel .cote.vrai{border-color:var(--or); background:linear-gradient(180deg,rgba(207,168,60,.16),rgba(17,27,51,.85)); box-shadow:0 0 0 1px rgba(230,199,106,.25),0 24px 60px -34px rgba(207,168,60,.6)}
.duel .lib{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gris)}
.duel .vrai .lib{color:var(--or-clair); font-weight:600}
.duel .sym{font-size:56px; line-height:1.1; margin:8px 0 2px; color:var(--ivoire-2)}
.duel .vrai .sym{color:var(--or-clair); font-size:70px}
.duel .nom{font-family:var(--titre); font-size:30px}
.duel .vrai .nom{font-size:36px; color:var(--ivoire)}
.duel .nomhe{font-size:24px; color:var(--or-clair)}
.duel .fleche{align-self:center; font-family:var(--titre); font-size:34px; color:var(--or-clair)}
.verdict{text-align:center; font-family:var(--titre); font-size:27px; font-style:italic; color:var(--or-pale); margin:26px auto 8px; max-width:30em}
.portrait{max-width:720px; margin:0 auto; text-align:center; font-size:18px; color:var(--ivoire-2)}
.faits{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; max-width:820px; margin:26px auto 0}
.fait{border-top:1px solid var(--trait); padding-top:10px; text-align:center}
.fait b{display:block; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gris); font-weight:600}
.fait span{font-family:var(--titre); font-size:21px}
@media (max-width:700px){
  .duel{grid-template-columns:1fr; gap:10px} .duel .fleche{transform:rotate(90deg); font-size:28px}
  .faits{grid-template-columns:repeat(2,1fr)} .res-date{font-size:28px} .verdict{font-size:23px}
}

/* ---- étape 2 : heure, ville, ascendant ---- */
.etape2{max-width:820px; margin:38px auto 0; text-align:left}
.etape2 .kicker{text-align:center; display:block}
.etape2 h2{margin-top:6px}
.e2-grille{display:grid; grid-template-columns:1fr 1.3fr; gap:16px}
.heure{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px}
.champ.ville{position:relative}
.champ.ville input{width:100%; font:inherit; font-size:17px; color:var(--ivoire); background:#0e1730; border:1px solid rgba(230,199,106,.35); border-radius:6px; padding:12px}
.champ.ville input:focus{outline:none; border-color:var(--or-clair); box-shadow:0 0 0 3px rgba(207,168,60,.2)}
.champ.ville input::placeholder{color:#6f7a93}
.suggest{position:absolute; left:0; right:0; top:100%; z-index:5; background:#0e1730; border:1px solid var(--trait); border-radius:6px; margin-top:4px; display:none; max-height:260px; overflow:auto}
.suggest div{padding:10px 12px; cursor:pointer; font-size:15.5px; color:var(--ivoire-2); border-bottom:1px solid rgba(230,199,106,.1)}
.suggest div:hover,.suggest div.actif{background:rgba(207,168,60,.15); color:var(--ivoire)}
.suggest .msg{cursor:default; font-style:italic; color:var(--gris)}
.asc{text-align:center; margin-top:22px; padding-top:20px; border-top:1px solid var(--trait); animation:monte .5s ease}
.asc .sym{font-size:60px; line-height:1.1; color:var(--or-clair)}
.asc .nom{font-family:var(--titre); font-size:34px}
.asc .nomhe{font-size:22px; color:var(--or-clair)}
.asc .a-txt{max-width:36em; margin:10px auto 0; color:var(--ivoire-2); font-size:17px}
.asc .a-note{max-width:36em; margin:10px auto 0; color:var(--gris); font-size:14.5px; font-style:italic}
@media (max-width:700px){ .e2-grille{grid-template-columns:1fr; gap:4px} }

/* ---- une vraie page du rapport, sur papier : on voit qu'il y a un texte à lire ---- */
.livre{max-width:820px; margin:46px auto 0; text-align:center}
.livre-titre{font-family:var(--titre); font-weight:500; font-size:38px; line-height:1.1; margin:6px 0 4px}
.livre-sous{color:var(--gris); font-size:15px; margin-bottom:18px}
.feuille{position:relative; text-align:left; max-width:700px; margin:0 auto; background:#fbf6ea; color:#2b2117; border-radius:4px;
  padding:44px 52px 30px; box-shadow:0 2px 0 #e9dfc6, 0 4px 0 #f4ecd8, 0 6px 0 #e9dfc6, 0 34px 80px -30px rgba(0,0,0,.95);
  background-image:linear-gradient(90deg,rgba(176,141,62,.08),transparent 6%,transparent 94%,rgba(176,141,62,.08))}
.feuille .f-kick{font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:#8a6d28; font-weight:600; text-align:center}
.feuille h4{font-family:var(--titre); font-weight:600; font-size:31px; line-height:1.15; text-align:center; color:#1c3252; margin:4px 0 18px}
.feuille p{font-size:17.5px; line-height:1.75; margin-bottom:14px; color:#2b2117; hyphens:auto}
.feuille p b{color:#1c3252}
.feuille .f-orn{text-align:center; color:#b08d3e; margin:20px 0 14px; font-size:18px}
.f-suite{position:relative; max-height:190px; overflow:hidden}
.f-suite::after{content:""; position:absolute; left:0; right:0; bottom:0; height:120px; background:linear-gradient(180deg,rgba(251,246,234,0),#fbf6ea 92%)}
.f-fin{text-align:center; padding:8px 0 4px}
.f-cadenas{font-family:var(--titre); font-style:italic; font-size:21px !important; color:#5d4f3e !important; margin-bottom:14px !important}
.f-fin .bouton{display:inline-block; width:auto; padding:15px 28px}
.f-page{text-align:center; font-size:13px !important; color:#a8977a !important; margin:18px 0 0 !important; letter-spacing:.2em}
@media (max-width:620px){ .feuille{padding:30px 22px 22px} .feuille h4{font-size:26px} .feuille p{font-size:16.5px} .livre-titre{font-size:30px} }
.chap-liste{display:grid; grid-template-columns:1fr 1fr; gap:2px 22px; padding:4px 26px 18px; list-style:none; text-align:left}
.chap-liste li{display:flex; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid rgba(230,199,106,.12); font-size:15.5px; color:var(--ivoire-2)}
.chap-liste svg{flex:none; width:15px; height:15px; color:var(--or)}
.chap-liste li.libre{color:var(--ivoire)}
.chap-liste li.libre svg{color:#8fc49b}
@media (max-width:620px){ .chap-liste{grid-template-columns:1fr} }

/* ---- l'offre : deux cartes côte à côte ---- */
.offre{display:grid; grid-template-columns:1fr 1.12fr; gap:16px; max-width:820px; margin:30px auto 0}
.o-carte{position:relative; border:1px solid var(--trait); border-radius:12px; padding:26px 22px 22px; background:rgba(17,27,51,.85); display:flex; flex-direction:column}
.o-carte.star{border-color:var(--or); background:linear-gradient(180deg,rgba(207,168,60,.14),rgba(17,27,51,.92)); box-shadow:0 0 0 1px rgba(230,199,106,.22),0 26px 60px -34px rgba(207,168,60,.55)}
.ruban{position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--or) var(--degrade); color:var(--noir-texte); font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; padding:5px 14px; border-radius:20px; white-space:nowrap}
.o-nom{font-family:var(--titre); font-size:30px; line-height:1.1; text-align:center}
.o-prix{font-family:var(--titre); font-size:46px; text-align:center; color:var(--or-clair); margin:6px 0 10px}
.o-carte ul{list-style:none; margin:4px 0 20px; flex:1}
.o-carte li{padding:7px 0 7px 24px; position:relative; font-size:15.5px; color:var(--ivoire-2); border-bottom:1px solid rgba(230,199,106,.1)}
.o-carte li::before{content:""; position:absolute; left:4px; top:15px; width:8px; height:8px; background:var(--or); transform:rotate(45deg)}
.o-note{text-align:center; font-size:13.5px; color:var(--gris); margin-top:10px}
@media (max-width:700px){ .offre{grid-template-columns:1fr} .o-carte.star{order:-1; margin-top:8px} }

/* ---- sections ---- */
section.bloc{padding:64px 0; border-top:1px solid rgba(230,199,106,.12)}
.bloc h2{font-family:var(--titre); font-weight:500; font-size:44px; line-height:1.1; text-align:center; margin-bottom:10px}
.bloc .intro{text-align:center; color:var(--ivoire-2); max-width:38em; margin:0 auto 34px; font-size:18px}
.etapes{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.etape{text-align:center; padding:8px 12px}
.etape .n{font-family:var(--titre); font-size:54px; color:var(--or-clair); line-height:1}
.etape h3{font-family:var(--titre); font-weight:500; font-size:26px; margin:6px 0}
.etape p{color:var(--ivoire-2); font-size:16px}
.sources{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.source{border:1px solid var(--trait); border-radius:10px; padding:22px 20px; background:rgba(17,27,51,.6)}
.source .he{font-size:26px; color:var(--or-clair); display:block; margin-bottom:6px}
.source h3{font-family:var(--titre); font-weight:500; font-size:24px; margin-bottom:6px}
.source p{font-size:15.5px; color:var(--ivoire-2)}
.duo-blocs{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.mini{border:1px solid var(--trait); border-radius:12px; padding:28px 24px; background:rgba(17,27,51,.6); display:flex; flex-direction:column; gap:12px}
.mini .kicker{font-size:11.5px}
.mini h3{font-family:var(--titre); font-weight:500; font-size:31px; line-height:1.1}
.mini p{color:var(--ivoire-2); font-size:16px; flex:1}
.mini .bouton{width:auto; align-self:flex-start; padding:13px 22px; font-size:14.5px}
.faq{max-width:760px; margin:0 auto}
.faq details{border-bottom:1px solid rgba(230,199,106,.18); padding:16px 4px}
.faq summary{cursor:pointer; font-family:var(--titre); font-size:24px; list-style:none; display:flex; justify-content:space-between; gap:14px}
.faq summary::after{content:"+"; color:var(--or-clair); font-size:26px; line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin-top:10px; color:var(--ivoire-2); font-size:16.5px}
.final{text-align:center; padding:70px 0 80px}
.final h2{font-family:var(--titre); font-weight:500; font-size:46px; margin-bottom:22px}
.final .bouton{display:inline-block; width:auto; padding:18px 36px}
footer{border-top:1px solid rgba(230,199,106,.12); padding:26px 0 40px; text-align:center; font-size:13.5px; color:var(--gris)}
footer a{color:var(--gris); margin:0 8px}
@media (max-width:820px){ .etapes,.sources,.duo-blocs{grid-template-columns:1fr} .bloc h2,.final h2{font-size:34px} section.bloc{padding:48px 0} }

/* ---- barre d'achat collante sur téléphone, après le résultat ---- */
#collante{position:fixed; left:0; right:0; bottom:0; z-index:20; display:none; align-items:center; gap:12px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(11,18,36,.96); border-top:1px solid var(--trait); backdrop-filter:blur(6px)}
#collante .t{flex:1; font-size:14px; color:var(--ivoire-2); line-height:1.3}
#collante .t b{color:var(--ivoire); font-family:var(--titre); font-size:19px; display:block}
#collante .bouton{width:auto; padding:12px 16px; font-size:13.5px}
@media (max-width:700px){ body.avec-res #collante{display:flex} body.avec-res{padding-bottom:76px} }

/* « J'ai un code » (01/11/2026) */
nav a.code{color:var(--or-clair, #e6c76a); border:1px solid currentColor; border-radius:999px; padding:3px 12px}

/* ---- lancement (01/11/2026) : les liens qui portent le référencement ---- */
nav a.langue{font-size:12.5px; letter-spacing:.14em; color:var(--gris); border:1px solid rgba(154,166,191,.35); border-radius:999px; padding:2px 10px}
nav a.langue:hover{color:var(--or-clair); border-color:var(--or)}
.liens-seo .grille-signes{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; max-width:900px; margin:0 auto}
.liens-seo .grille-signes a{display:block; text-decoration:none; border:1px solid var(--trait); border-radius:10px; padding:14px 12px; text-align:center; background:rgba(17,27,51,.6)}
.liens-seo .grille-signes a:hover{border-color:var(--or)}
.liens-seo .grille-signes b{display:block; font-family:var(--titre); font-weight:500; font-size:22px; color:var(--ivoire)}
.liens-seo .grille-signes span{font-size:13px; color:var(--gris)}
.liens-seo .liens-plus{text-align:center; margin-top:18px; font-size:15px}
.liens-seo .compat-liste{max-width:820px; margin:0 auto}
.liens-seo .compat-liste details{border-top:1px solid rgba(230,199,106,.2); padding:12px 4px}
.liens-seo .compat-liste summary{cursor:pointer; font-family:var(--titre); font-size:21px; color:var(--ivoire)}
.liens-seo .compat-liste p{margin-top:8px; line-height:2.1; font-size:15px}
.liens-seo .compat-liste a{color:var(--or-clair); margin-right:10px; white-space:nowrap}
.pied-liens{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; max-width:820px; margin:0 auto 16px; font-size:14px}
.pied-liens a{color:var(--ivoire-2); margin:0}
@media (max-width:700px){ .liens-seo .grille-signes{grid-template-columns:repeat(2,1fr)} }

/* Champs prénom et ville en type « search » (01/11/2026) : Chrome n'y propose jamais de carte bancaire ni d'adresse
   (il les proposait dans « Votre prénom », même avec autocomplete="off"). On efface l'allure propre aux champs de recherche. */
input[type=search]{-webkit-appearance:none; appearance:none}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration{-webkit-appearance:none; display:none}