/* ===== À travers les étoiles — Blog / Ressources gratuites ===== */
/* Reprend la coquille du site (nav, pied de page, bloc lunaire) + styles d'article. */

:root{
  --creme:#f6f4f3;
  --pervenche:#9381ff;
  --pervenche-clair:#b8adff;
  --magenta:#b5179e;
  --dore:#f7b801;
  --rose:#f4a6c8;
  --rose-pale:#fbe4ee;
  --encre:#3a2f4a;
  --gris:#6b6477;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Poppins',sans-serif;
  color:var(--encre);
  background:
    radial-gradient(circle at 12% 8%, rgba(147,129,255,.20), transparent 38%),
    radial-gradient(circle at 88% 14%, rgba(181,23,158,.14), transparent 34%),
    radial-gradient(circle at 50% 96%, rgba(247,184,1,.10), transparent 42%),
    var(--creme);
  background-attachment:fixed;
  line-height:1.7;
  overflow-x:hidden;
}
h1,h2,h3,.serif{font-family:'Fraunces',serif;font-weight:600;line-height:1.2;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
.accent{background:linear-gradient(90deg,var(--pervenche),var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;}

/* ===== NAV (identique au site) ===== */
header{position:sticky;top:0;z-index:50;background:rgba(246,244,243,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid rgba(147,129,255,.15);}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;}
.logo{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;
  background:linear-gradient(90deg,var(--pervenche),var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;}
.menu{display:flex;gap:26px;list-style:none;align-items:center;}
.menu a{font-size:.88rem;color:var(--gris);transition:color .2s;font-weight:400;}
.menu a:hover{color:var(--magenta);}
.menu>li{position:relative;}
.menu .sub{position:absolute;top:calc(100% + 8px);left:0;background:#fff;border-radius:14px;
  box-shadow:0 14px 34px rgba(147,129,255,.22);padding:8px;min-width:256px;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.2s;z-index:60;}
.menu .has-sub:hover .sub,.menu .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0);}
.menu .sub li a{display:block;padding:9px 12px;border-radius:9px;font-size:.85rem;white-space:nowrap;}
.menu .sub li a:hover{background:var(--rose-pale);color:var(--magenta);}
.menu .has-sub>a{cursor:default;}
.menu a.on{color:var(--magenta);font-weight:500;}
.burger{display:none;font-size:1.6rem;background:none;border:none;cursor:pointer;color:var(--pervenche);}
#navtoggle{display:none;}

/* ===== ÉTOILES ===== */
.stars{position:fixed;inset:0;z-index:-1;pointer-events:none;}
.star{position:absolute;font-size:14px;color:var(--dore);
  filter:drop-shadow(0 0 6px rgba(247,184,1,.7));
  animation:twinkle 3.2s ease-in-out infinite, drift 9s ease-in-out infinite;}
.star.p{color:var(--pervenche);filter:drop-shadow(0 0 6px rgba(147,129,255,.7));}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.7);}50%{opacity:1;transform:scale(1.25);}}
@keyframes drift{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}

/* ===== TA CARTE DU CIEL (hero du hub) ===== */
/* Le SVG porte ses couleurs et sa taille en dur : sans ça, un navigateur qui garde
   l'ancien CSS affiche un gros carré noir. C'est arrivé, on ne le refait pas. */
.cielo{width:min(190px,42vw);height:auto;overflow:visible;}
@media(prefers-reduced-motion:no-preference){
  .cielo .sc{animation:scintille 4s ease-in-out infinite;}
  .cielo .sc2{animation:scintille 4s ease-in-out infinite 2s;}
  @keyframes scintille{0%,100%{opacity:.45;}50%{opacity:1;}}
}

/* ===== BLOC LUNAIRE (inscription) ===== */
.lune{position:relative;overflow:hidden;
  background:linear-gradient(140deg,var(--pervenche),var(--magenta) 92%);padding:62px 0;}
.lune-card{max-width:600px;margin:0 auto;text-align:center;color:#fff;position:relative;}
.lune-card .moon{font-size:2.6rem;margin-bottom:8px;}
.lune-card h2{color:#fff;font-size:clamp(1.7rem,3.6vw,2.4rem);margin-bottom:14px;}
.lune-card p{color:rgba(255,255,255,.9);max-width:520px;margin:0 auto 26px;font-size:1rem;}
.lune-form{max-width:520px;margin:0 auto;text-align:left;}
.lune-form .fieldL{margin-bottom:12px;}
.lune-form .row{display:flex;gap:12px;}
.lune-form .row .fieldL{flex:1;}
.lune-form label.l{display:block;font-size:.76rem;color:rgba(255,255,255,.88);margin-bottom:5px;font-weight:500;}
.lune-form input{width:100%;padding:12px 14px;border:none;border-radius:12px;font-family:inherit;font-size:.92rem;color:var(--encre);}
.lune-form input:focus{outline:2px solid var(--dore);}
.lune-consent{display:flex;gap:9px;align-items:flex-start;font-size:.76rem;color:rgba(255,255,255,.92);margin:8px 0 18px;line-height:1.45;cursor:pointer;}
.lune-consent input{width:17px;height:17px;margin-top:2px;flex-shrink:0;accent-color:var(--dore);}
.lune-err{color:#ffe9a8;font-size:.8rem;margin:0 0 12px;display:none;}
.lune-err.show{display:block;}
.lune-msg{font-size:1rem;color:#fff;line-height:1.6;display:none;}
.btn{display:inline-block;cursor:pointer;border:none;font-family:inherit;padding:13px 26px;border-radius:50px;
  font-size:.92rem;font-weight:500;color:#fff;background:linear-gradient(90deg,var(--magenta),var(--pervenche));
  box-shadow:0 8px 22px rgba(181,23,158,.28);transition:transform .15s,box-shadow .15s;}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(181,23,158,.36);}
.lune .btn{background:linear-gradient(90deg,var(--dore),#ffce5a);color:#3a2f4a;
  box-shadow:0 8px 22px rgba(247,184,1,.32);display:block;width:100%;max-width:340px;margin:20px auto 0;}
.lune-note{margin-top:16px;font-size:.74rem;color:rgba(255,255,255,.72);text-align:center;}

/* ===== FOOTER (identique au site) ===== */
footer{background:#fff;border-top:1px solid rgba(147,129,255,.15);padding:40px 0;text-align:center;}
.socials{display:flex;gap:18px;justify-content:center;margin-bottom:18px;}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;
  color:#fff;background:linear-gradient(135deg,var(--pervenche),var(--magenta));
  box-shadow:0 8px 20px rgba(181,23,158,.25);transition:transform .15s,box-shadow .15s;}
.socials a:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(181,23,158,.38);}
.socials svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.socials svg .fill{fill:currentColor;stroke:none;}
footer .copy{font-size:.78rem;color:#b0a9bd;}

/* =========================================================
   BLOG — HUB
   ========================================================= */
.blog-hero{padding:56px 0 26px;}
.blog-hero .in{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center;}
.blog-hero .eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--magenta);font-weight:600;margin-bottom:14px;}
.blog-hero h1{font-size:clamp(2rem,4.4vw,3rem);}
.blog-hero p{font-size:1.05rem;color:var(--gris);max-width:40ch;margin-top:16px;}
.blog-hero .wheel-wrap{display:flex;justify-content:center;}
.wheel{position:relative;width:260px;height:260px;}
.wheel .ring{position:absolute;inset:0;border:1.4px solid rgba(147,129,255,.28);border-radius:50%;}
.wheel .ring.inner{inset:42px;border-color:rgba(147,129,255,.16);}
.wheel .core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:'Fraunces',serif;font-size:2.6rem;font-weight:600;
  background:linear-gradient(90deg,var(--pervenche),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent;}
.wheel .core svg{width:52px;height:52px;fill:none;stroke:var(--pervenche);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;display:block;}
.lune-card .moonico{display:flex;justify-content:center;margin-bottom:8px;}
.lune-card .moonico svg{width:46px;height:46px;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.wheel .z{position:absolute;top:50%;left:50%;font-size:1.15rem;color:var(--encre);transform:translate(-50%,-50%);}

.blog-list{padding:14px 0 60px;}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px;}
.section-head h2{font-size:1.5rem;}
.section-head span{font-size:.85rem;color:var(--gris);}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.post{background:#fff;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;
  border:1px solid rgba(147,129,255,.12);box-shadow:0 12px 34px rgba(147,129,255,.12);
  transition:transform .18s,box-shadow .18s;}
.post:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(147,129,255,.22);}
.post .thumb{height:148px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#efe9ff,#f6f2ff);color:var(--pervenche);}
.post .thumb svg{width:58px;height:58px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.post .thumb.rose{background:linear-gradient(150deg,var(--rose-pale),#fff3f9);color:var(--magenta);}
.post .thumb.or{background:linear-gradient(150deg,#fdf3d6,#fbf7ea);color:#c99a12;}
.post .thumb.vert{background:linear-gradient(150deg,#e3f2e9,#f2f9f4);color:#267854;}
.post .in{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1;}
.post .tag{text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;color:var(--magenta);font-weight:600;margin-bottom:10px;}
/* On distingue à l'oeil les articles pour entrepreneures (les deux publics ne se mélangent jamais) */
.post .tag.pro{color:var(--pervenche);}
.post h3{font-size:1.22rem;line-height:1.25;}
.post p{font-size:.9rem;color:var(--gris);margin-top:10px;flex:1;line-height:1.55;}
.post .go{margin-top:16px;font-size:.86rem;font-weight:600;color:var(--pervenche);}
.post.soon{opacity:.6;}
.post.soon .go{color:var(--gris);}

/* =========================================================
   BLOG — ARTICLE
   ========================================================= */
.article{max-width:760px;margin:0 auto;padding:0 24px;}
.breadcrumb{padding:30px 0 0;font-size:.82rem;color:var(--gris);}
.breadcrumb a{color:var(--pervenche);}
.art-head{padding:22px 0 26px;border-bottom:1px solid rgba(147,129,255,.16);}
.art-head .cat{text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--magenta);font-weight:600;}
.art-head h1{margin-top:14px;font-size:clamp(1.4rem,2.7vw,1.8rem);}
.art-head .meta{margin-top:16px;font-size:.85rem;color:var(--gris);display:flex;gap:12px;align-items:center;}
.art-head .meta .dot{width:3px;height:3px;border-radius:50%;background:var(--gris);}
.art-hero{max-width:760px;margin:30px auto;padding:0 24px;}
.art-hero .band{border-radius:24px;background:linear-gradient(135deg,#efe9ff,#fbe4ee 60%,#fff6e0);
  height:236px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 44px rgba(147,129,255,.16);}

.prose{max-width:680px;margin:0 auto;padding:6px 24px 0;}
.prose p{font-size:.98rem;line-height:1.72;margin:18px 0;color:#4a4258;}
.prose .lede{font-size:1.06rem;line-height:1.66;color:var(--encre);}
.prose h2{font-size:clamp(1.06rem,1.8vw,1.22rem);margin:34px 0 6px;}
.prose h3{font-size:1.02rem;margin:22px 0 4px;}
.prose strong{font-weight:600;color:var(--encre);}

.steps{margin:24px 0;display:flex;flex-direction:column;gap:14px;}
.steps li{list-style:none;display:flex;gap:16px;align-items:flex-start;}
.steps .n{flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--pervenche),var(--magenta));color:#fff;
  font-family:'Fraunces',serif;font-weight:600;font-size:.9rem;display:flex;align-items:center;justify-content:center;margin-top:3px;}
.steps .t{font-size:.95rem;line-height:1.6;color:#4a4258;}

.fams{margin:22px 0;display:flex;flex-direction:column;gap:14px;}
.fam{background:#fff;border:1px solid rgba(147,129,255,.14);border-radius:18px;padding:22px 24px;
  box-shadow:0 10px 28px rgba(147,129,255,.10);}
.fam h3{font-size:1.1rem;}
.fam .signs{font-family:'Poppins',sans-serif;font-size:.8rem;color:var(--gris);font-weight:400;margin-left:8px;}
.fam p{font-size:.92rem;color:#4a4258;margin-top:6px;line-height:1.6;}
.fam .astro{margin-top:12px;font-size:1.25rem;color:var(--pervenche);letter-spacing:.5em;}

.grouptitle{text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;color:var(--magenta);font-weight:600;margin:38px 0 6px;}

.prof{background:#fff;border:1px solid rgba(147,129,255,.14);border-radius:18px;padding:24px 26px;margin:16px 0;
  box-shadow:0 10px 28px rgba(147,129,255,.10);}
.prof .top{display:flex;align-items:center;gap:16px;margin-bottom:12px;}
.prof .sig{flex:0 0 auto;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;color:#fff;background:linear-gradient(150deg,var(--pervenche),var(--magenta));
  box-shadow:0 8px 20px rgba(147,129,255,.28);}
.prof .lbl{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);font-weight:600;}
.prof .lbl b{display:block;font-family:'Fraunces',serif;font-size:1.2rem;letter-spacing:normal;text-transform:none;color:var(--encre);font-weight:600;margin-top:3px;}
.prof .d{font-size:.94rem;line-height:1.6;color:#4a4258;margin-bottom:14px;}
.prof .fp{display:flex;gap:22px;margin-bottom:14px;flex-wrap:wrap;}
.prof .fp .c{flex:1;min-width:190px;}
.prof .fp .k{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);font-weight:600;margin-bottom:3px;}
.prof .fp .v{font-size:.94rem;font-weight:500;line-height:1.45;color:var(--encre);}
.prof .en{background:linear-gradient(135deg,#efe9ff,#f7f4ff);border-radius:14px;padding:14px 18px;font-size:.9rem;line-height:1.58;color:#4a4258;}
.prof .en .k{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pervenche);font-weight:600;margin-bottom:5px;}

/* ---------------------------------------------------------------------
   Icônes astro dessinées + couleurs par famille (article Milieu du Ciel)
   Tout est porté par .f-men / .f-bat / .f-pas pour ne pas toucher
   aux autres articles qui partagent .fam, .sig et .astro.
   --------------------------------------------------------------------- */
.gl{fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;display:block;}

/* Nuances foncées de la palette : lisibles là où la teinte claire ne l'est pas.
   Les trois tiennent un contraste d'environ 5 sur le crème. */
.f-men{--fam:#6c4fd8;--fam-wash:#efe9ff;}
.f-bat{--fam:#b5179e;--fam-wash:#fbe4ee;}
.f-pas{--fam:#8a6100;--fam-wash:#fdf1d6;}

/* les 12 signes de la roue : pervenche et trait fin.
   En encre presque noire, un glyphe dessine pese beaucoup plus
   qu'un ancien caractere, et fait des taches sombres sur le pastel. */
.wheel .z .gl{width:21px;height:21px;stroke-width:1.5;color:var(--pervenche);}

/* cartes des 3 familles : archétype dessiné à gauche */
.fam.f-men,.fam.f-bat,.fam.f-pas{display:flex;gap:18px;align-items:flex-start;}
.fam-ico{flex:0 0 auto;width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--fam-wash);color:var(--fam);}
.fam-ico .gl{width:28px;height:28px;}
.fam-txt{flex:1;min-width:0;}
.fam-txt>h3:first-child{margin-top:0;}
.f-men .astro,.f-bat .astro,.f-pas .astro{display:flex;gap:16px;
  letter-spacing:normal;color:var(--fam);}
.f-men .astro .gl,.f-bat .astro .gl,.f-pas .astro .gl{width:22px;height:22px;}

/* pastille du profil : lavis de la famille, glyphe dessiné par-dessus */
.prof.f-men .sig,.prof.f-bat .sig,.prof.f-pas .sig{
  background:var(--fam-wash);color:var(--fam);box-shadow:none;}
.prof.f-men .sig svg.gl,.prof.f-bat .sig svg.gl,.prof.f-pas .sig svg.gl{
  width:30px;height:30px;color:var(--fam);}

/* titre de groupe et encadré « où mettre ton énergie », à la couleur de la famille */
.grouptitle.f-men,.grouptitle.f-bat,.grouptitle.f-pas{color:var(--fam);}
.prof.f-men .en .k,.prof.f-bat .en .k,.prof.f-pas .en .k{color:var(--fam);}
.prof.f-men .en,.prof.f-bat .en,.prof.f-pas .en{background:var(--fam-wash);}

@media(max-width:640px){
  .fam.f-men,.fam.f-bat,.fam.f-pas{gap:14px;}
  .fam-ico{width:40px;height:40px;border-radius:12px;}
  .fam-ico .gl{width:24px;height:24px;}
}

/* calculateur de carte (Bodygraph) intégré dans l'article */
.chart-embed{background:#fff;border:1px solid rgba(147,129,255,.16);border-radius:20px;
  padding:26px 26px 30px;margin:24px 0;box-shadow:0 14px 38px rgba(147,129,255,.14);}
.chart-embed .hint{font-size:.92rem;color:var(--gris);margin-bottom:16px;line-height:1.5;}
.chart-embed bodygraph-embed{display:block;max-width:100%;overflow-x:auto;}

.backlink{max-width:680px;margin:44px auto 0;padding:0 24px;text-align:center;}
.backlink a{font-size:.92rem;font-weight:600;color:var(--pervenche);}

/* ===== PHASES DE LUNE (dessins au trait, pas d'emoji) ===== */
.moonrow{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:0 22px;}
.moonrow .m{width:42px;height:42px;color:var(--pervenche);}
.moonrow .m svg{width:100%;height:100%;}
.moon-svg .o,.moonrow svg .o,.prof .sig svg .o{fill:none;stroke:currentColor;stroke-width:1.5;}
.moon-svg .f,.moonrow svg .f,.prof .sig svg .f{fill:currentColor;stroke:none;}
.moonrow svg circle.o.f,.prof .sig svg circle.o.f{fill:currentColor;stroke:currentColor;}
.prof .sig svg{width:26px;height:26px;color:#fff;}

/* ===== TRIO SOLEIL / LUNE / ASCENDANT ===== */
.trio-svg{width:100%;height:100%;color:var(--pervenche);}
.trio-svg .o{fill:none;stroke:currentColor;stroke-width:1.5;}
.trio-svg .f{fill:currentColor;stroke:none;}
.exemple{background:linear-gradient(135deg,#efe9ff,#fbe4ee 70%);border-radius:18px;padding:24px 26px;margin:24px 0;
  border:1px solid rgba(147,129,255,.16);}
.exemple .k{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--magenta);font-weight:600;margin-bottom:8px;}
.exemple p{margin:0 0 10px;}
.exemple p:last-child{margin-bottom:0;}

/* ===== LIENS DANS LE TEXTE =====
   Sans ça, les liens des articles sont noirs comme le reste et personne ne clique. */
.prose p a:not(.go-btn){color:var(--magenta);font-weight:600;
  border-bottom:1px solid rgba(181,23,158,.32);transition:border-color .15s;}
.prose p a:not(.go-btn):hover{border-bottom-color:var(--magenta);}
.cta .ig a{border-bottom:1px solid rgba(181,23,158,.32);}

/* ===== APPEL À L'ACTION (chaque article mène vers un produit ou vers l'Instagram) ===== */
.cta{margin:38px 0 8px;background:linear-gradient(135deg,#efe9ff,#fbe4ee 65%,#fff6e0);
  border:1px solid rgba(147,129,255,.2);border-radius:22px;padding:28px 30px;
  box-shadow:0 14px 38px rgba(147,129,255,.16);display:flex;gap:24px;align-items:flex-start;}
.cta .ico{flex:0 0 auto;width:48px;height:48px;color:var(--pervenche);margin-top:4px;}
.cta .ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;}
.cta .in{flex:1;}
.cta .k{text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:var(--magenta);
  font-weight:600;margin-bottom:8px;}
.cta h3{font-family:'Fraunces',serif;font-size:1.25rem;color:var(--encre);margin:0 0 10px;
  font-weight:600;line-height:1.35;}
.cta p{font-size:.98rem;color:var(--gris);line-height:1.7;margin:0 0 16px;}
.cta .go-btn{display:inline-block;background:linear-gradient(135deg,var(--pervenche),var(--magenta));
  color:#fff;font-weight:600;font-size:.94rem;padding:13px 26px;border-radius:999px;
  box-shadow:0 10px 24px rgba(147,129,255,.32);transition:transform .15s,box-shadow .15s;}
.cta .go-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(181,23,158,.3);}
.cta .ig{font-size:.9rem;color:var(--gris);margin:14px 0 0;}
.cta .ig a{color:var(--magenta);font-weight:600;}

/* ===== FAQ (questions fréquentes, bon pour Google et les IA) ===== */
.faq{margin:22px 0;display:flex;flex-direction:column;gap:12px;}
.faq details{background:#fff;border:1px solid rgba(147,129,255,.14);border-radius:16px;
  padding:18px 22px;box-shadow:0 8px 22px rgba(147,129,255,.08);}
.faq summary{font-family:'Fraunces',serif;font-size:1.04rem;font-weight:600;color:var(--encre);
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';color:var(--pervenche);font-size:1.4rem;font-weight:400;
  font-family:'Poppins',sans-serif;flex:0 0 auto;transition:transform .2s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{margin:12px 0 0;font-size:.98rem;color:var(--gris);line-height:1.75;}
.faq details p:last-child{margin-bottom:0;}

/* ===== RESPONSIVE ===== */
@media(max-width:860px){
  .menu{position:fixed;inset:68px 0 auto 0;flex-direction:column;background:var(--creme);
    padding:18px 24px;gap:16px;border-bottom:1px solid rgba(147,129,255,.15);
    box-shadow:0 14px 28px rgba(147,129,255,.16);display:none;}
  #navtoggle:checked ~ .menu{display:flex;}
  .burger{display:block;}
  .menu .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    background:transparent;padding:2px 0 8px 14px;min-width:0;}
  .menu .has-sub>a{font-weight:600;color:var(--encre);}
  .blog-hero .in{grid-template-columns:1fr;gap:22px;}
  .blog-hero .wheel-wrap{display:none;}
  .grid{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
}

/* ===== COMMENTAIRES DU CARNET =====
   Le bloc se remplit par commentaires.js. Rien ne s'affiche sans l'accord d'Anna
   (modération sur OVH, voir ~/scripts/carnet_commentaires/app.py). */
.cm{max-width:680px;margin:44px auto 8px;padding:0 24px;}
.cm h2{font-size:clamp(1.06rem,1.8vw,1.22rem);line-height:1.35;}
.cm .cm-intro{color:var(--gris);font-size:.9rem;margin:5px 0 16px;}

.cm-un{background:#fff;border:1px solid rgba(147,129,255,.16);border-radius:16px;
  padding:18px 20px;margin-bottom:12px;}
.cm-tete{display:flex;align-items:baseline;gap:10px;margin-bottom:7px;}
.cm-qui{font-weight:600;color:var(--encre);font-size:.95rem;}
.cm-quand{font-size:.75rem;color:var(--gris);}
.cm-un p{margin:0;font-size:.94rem;line-height:1.6;color:var(--encre);}

.cm-form{background:linear-gradient(135deg,#efe9ff,#fbe4ee 70%);border-radius:18px;
  padding:18px 20px;border:1px solid rgba(147,129,255,.16);}
.cm-form label{display:block;font-size:.78rem;color:var(--gris);margin:0 0 6px;font-weight:500;}
.cm-form label + .cm-champ{margin-bottom:12px;}
.cm-champ{width:100%;background:#fff;border:1px solid rgba(147,129,255,.28);border-radius:10px;
  padding:9px 11px;font-family:inherit;font-size:.92rem;color:var(--encre);
  transition:border-color .12s, box-shadow .12s;}
.cm-champ:focus{outline:none;border-color:var(--pervenche);
  box-shadow:0 0 0 3px rgba(147,129,255,.22);}
textarea.cm-champ{resize:vertical;min-height:66px;line-height:1.5;}

/* le piège à robots doit rester invisible sans être "display:none",
   que les robots savent détecter */
.cm-piege{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

.cm-envoi{background:var(--pervenche);color:#fff;border:0;border-radius:11px;
  padding:9px 22px;font-family:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
  transition:transform .1s, background .12s;}
.cm-envoi:hover{background:#7f6bff;}
.cm-envoi:active{transform:translateY(1px);}
.cm-envoi:disabled{opacity:.6;cursor:default;}

.cm-etat{font-size:.86rem;margin-top:12px;line-height:1.5;min-height:1px;}
.cm-etat.oui{color:#267854;}
.cm-etat.non{color:#b5179e;}

@media(max-width:620px){
  .cm-form{padding:20px 18px;}
  .cm-envoi{width:100%;}
}

/* ---------------------------------------------------------------------
   Calculateur « ta planète » — le petit calcul maison qui remplace le
   gros embed Bodygraph. Sort juste le signe (et la maison) du point cherché.
   Piloté par carte_planete.js. --------------------------------------- */
.placement{background:#fff;border:1px solid rgba(147,129,255,.16);border-radius:20px;
  padding:22px 24px;margin:24px 0;box-shadow:0 14px 38px rgba(147,129,255,.14);}
.pl-intro{font-size:.95rem;color:#4a4258;line-height:1.55;margin-bottom:16px;}
.pl-intro b{color:var(--pervenche);font-weight:600;}
.pl-form{display:flex;flex-direction:column;gap:12px;}
.pl-row{display:flex;gap:12px;flex-wrap:wrap;}
.pl-row .pl-field{flex:1;min-width:140px;}
.pl-field{display:flex;flex-direction:column;gap:5px;}
.pl-field span{font-size:.76rem;font-weight:600;color:var(--gris);letter-spacing:.02em;}
.pl-field span i{font-weight:400;color:var(--gris);}
.pl-field input{width:100%;padding:11px 13px;border:1px solid rgba(147,129,255,.28);
  border-radius:12px;font-family:inherit;font-size:.94rem;color:var(--encre);background:#fbfaff;}
.pl-field input:focus{outline:2px solid var(--pervenche);border-color:transparent;}
.pl-note{font-size:.82rem;color:var(--gris);line-height:1.45;}
.pl-btn{align-self:flex-start;margin-top:2px;font-family:inherit;font-size:.92rem;font-weight:600;
  cursor:pointer;padding:12px 24px;border-radius:999px;border:none;color:#fff;
  background:linear-gradient(135deg,var(--pervenche),var(--magenta));
  box-shadow:0 10px 24px rgba(181,23,158,.22);transition:transform .15s;}
.pl-btn:hover{transform:translateY(-1px);}
.pl-btn:disabled{opacity:.6;cursor:default;transform:none;}
.pl-err{font-size:.86rem;color:var(--magenta);font-weight:500;}
.pl-result{margin-top:16px;display:flex;flex-wrap:wrap;gap:12px;}
.pl-item{flex:1;min-width:150px;background:linear-gradient(150deg,#efe9ff,#f6f2ff);
  border:1px solid rgba(147,129,255,.2);border-radius:16px;padding:16px 18px;text-align:center;}
.pl-lbl{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;color:var(--gris);}
.pl-retro{display:inline-block;margin-left:6px;font-size:.62rem;letter-spacing:.06em;color:#8a6100;
  background:#fdf1d6;border-radius:999px;padding:2px 7px;vertical-align:middle;text-transform:none;}
.pl-signe{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:600;color:var(--pervenche);margin-top:6px;}
.pl-star{color:var(--dore);margin-right:6px;font-size:1rem;vertical-align:middle;}
.pl-sub{font-size:.82rem;color:var(--gris);margin-top:4px;}
@media(max-width:560px){.placement{padding:18px;}}