/* static/css/main.css */
:root{
  /* Couleurs */
  --bg:#ffe4d8;        /* fond global aligné sur l’iframe Nos médiums/forfaits (#ffe4d8) */
  --paper:#ffe4d8;     /* cartes / blocs */
  --ink:#1f2430;
  --muted:#5b6476;
  --brand:#ffb8a6;
  --brand-2:#f79f8c;
  --accent:#9a7cd6;
  --green:#22c55e;
  --green-2:#16a34a;
  --warn:#f59e0b;
  --bdr:#f1e7e3;
  --bdr-2:#e6d8d2;

  /* Règles */
  --wrap:1200px;
  --pad:clamp(14px,2.4vw,24px);
  --radius:18px;
  --shadow:0 14px 40px rgba(20,15,15,.08);

  /* Typo */
  --fs-xs:12px;
  --fs-sm:14px;
  --fs:16px;
  --fs-lg:18px;
  --fs-h3:clamp(18px,2.2vw,22px);
  --fs-h2:clamp(24px,3vw,34px);
  --fs-h1:clamp(34px,4.8vw,60px);
  --lh:1.7;

  /* Espaces */
  --section:clamp(52px,6vw,88px);
}

/* Base */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font: var(--fs)/var(--lh) Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
main{ flex:1 0 auto; }

img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) }
.card{ background:var(--paper); border:1px solid var(--bdr); border-radius:var(--radius); box-shadow:var(--shadow) }
.btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 18px; border-radius:14px; font-weight:800; cursor:pointer; font-size:var(--fs-lg) }
.btn.primary{ color:#fff; background:linear-gradient(180deg,var(--green),var(--green-2)); border:1px solid #16a34a33; box-shadow:0 10px 22px rgba(34,197,94,.22) }
.btn.alt{ color:#3a2d2a; background:#fff; border:1px solid var(--bdr) }
.input,.select{ background:#fff; border:1px solid var(--bdr); border-radius:12px; padding:14px 16px; font: var(--fs-lg)/1.2 Inter }
.input:focus,.select:focus{ border-color:#f1b3a2; box-shadow:0 0 0 3px #ffd9cd66; outline:none }

/* Flash */
.flash{margin:10px 0;padding:10px 12px;border-radius:10px;border:1px solid var(--bdr)}
.flash.error{background:#fff1f1;border-color:#ffd6d6;color:#8b0000}
.flash.success{background:#f1fff3;border-color:#cdeed2;color:#0f6a2d}
.field{display:flex;flex-direction:column;gap:6px}

/* ===== Header/Nav ===== */
.nav--pro{
  position:sticky; top:0; z-index:24;
  background:var(--bg);
  border-bottom:1px solid var(--bdr);
  transition:box-shadow .2s ease, border-color .2s ease
}
.nav--pro.is-stuck{ box-shadow:0 10px 24px rgba(20,15,15,.07); border-color:#f0dfd8 }
.nav--pro .inner{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; height:76px; padding-inline:max(var(--pad), env(safe-area-inset-left)) max(var(--pad), env(safe-area-inset-right)); }
.logo{ display:flex; align-items:center; gap:12px; font-family:"Playfair Display", serif }
.badge{ width:36px; height:36px; border-radius:12px; background:conic-gradient(from 140deg, #ffe1d7, #ffd1c4 25%, #ffb4a2 50%, #ffd1c4 75%, #ffe1d7); border:1px solid #ffd5c8 }
.brand{
  letter-spacing:.3px; font-weight:800; font-size:22px;
  line-height:1.05; display:flex; flex-direction:column;
}
.brand-sub{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:500; font-size:9px; line-height:1.3;
  color:#8b8f9b; margin-top:2px;
}

.nav{ display:flex; gap:16px; align-items:center; justify-content:center }
.nav .link{ position:relative; padding:12px 14px; border-radius:12px; color:#2d2d2d; font-weight:800 }
.nav .link:after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,#f9b4a2,#b596ff); transform:scaleX(0); transform-origin:left; transition:transform .18s ease
}
.nav .link:hover{ background:#fff1eb }
.nav .link:hover:after{ transform:scaleX(1) }
.cta{ display:flex; gap:10px; justify-self:end }
.nav-toggle{ display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--bdr); background:#fff; padding:0; margin-right:8px; cursor:pointer; position:relative }
.nav-toggle span{ position:absolute; left:10px; right:10px; height:2px; background:#333; border-radius:2px; transition:transform .2s ease, opacity .2s ease }
.nav-toggle span:nth-child(1){ top:12px }
.nav-toggle span:nth-child(2){ top:20px }
.nav-toggle span:nth-child(3){ top:28px }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg) }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }

/* Sous-menu Consultation */
.menu.has-sub{ position:relative; display:flex; align-items:center }
.menu.has-sub > .link{ padding-right:30px }
.menu.has-sub .submenu{
  position:absolute; top:100%; left:0; min-width:240px;
  background:#fff; border:1px solid var(--bdr); border-radius:12px;
  box-shadow:var(--shadow); padding:8px; display:none; z-index:30
}
.menu.has-sub .submenu a{ display:block; padding:10px 12px; border-radius:10px; font-weight:700 }
.menu.has-sub .submenu a:hover{ background:#fff1eb }
.menu.has-sub:hover .submenu{ display:block }

/* Mobile nav */
@media (max-width: 980px){
  .nav-toggle{ display:inline-block }
  .nav{
    position:fixed; inset:76px 0 auto 0; background:var(--bg);
    display:grid; grid-template-columns:1fr; gap:0; padding:8px 0;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .18s ease, opacity .18s ease
  }
  .nav .link{ padding:12px 20px; border-radius:0 }
  .nav--open .nav{ transform:translateY(0); opacity:1; pointer-events:auto }
  .cta{ display:none }

  .menu.has-sub{ display:block }
  .menu.has-sub .submenu{
    position:static; display:block; border:none; box-shadow:none; padding:0; margin:0 0 6px 12px
  }
  .menu.has-sub .submenu a{ padding:10px 16px }
}

/* Hero (home) : fond différent, plus "hero" que le reste */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 540px at -10% 0%, #ffffff 0%, #ffe4dc 35%, transparent 70%),
    radial-gradient(1000px 560px at 110% -10%, #ffe9f0 0%, #ffd9cd 45%, transparent 80%),
    linear-gradient(180deg,#fff7f3 0%, #ffe4dc 55%, #ffd4c8 100%);
  padding: clamp(44px,7vw,120px) 0;
  border-bottom:1px solid var(--bdr)
}
.hero .wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center }

.hero-title{
  font:800 var(--fs-h1)/1.04 "Playfair Display",serif;
  margin:6px 0 14px;
  letter-spacing:.02em;
}
.hero-title-accent{
  background:linear-gradient(90deg,#ff9a7a,#b58bff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  white-space:nowrap;
}

h1{ font:800 var(--fs-h1)/1.08 "Playfair Display", serif; margin:0 0 12px }
.lead{ color:#6b4b44; max-width:60ch; font-size:clamp(18px,1.8vw,22px) }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px }
.badge-soft{ display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--bdr); color:#6b4b44; font-weight:600; background:#fff; border-radius:16px }
.hero-people{ position:relative; display:flex; gap:16px; justify-content:flex-end; align-items:flex-start }
.photo{ width:min(320px, 44vw); border-radius:22px; overflow:hidden; box-shadow:0 20px 40px rgba(0,0,0,.08); border:1px solid var(--bdr); background:#fff }
.photo.small{ width:min(240px, 35vw); align-self:flex-start }
.hero-people .photo:not(.small){ margin-top:26px; }
.wavy{ width:120px; height:10px; margin:8px 0 18px; background:repeating-linear-gradient(90deg, transparent 0 8px, #f9b4a2 8px 10px); border-radius:999px }

.hero-tagline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  font-size:var(--fs-sm);
  color:#7c5a52;
  opacity:.9;
  flex-wrap:wrap;
}
.hero-tagline span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.hero-tagline-dot{
  width:4px;
  height:4px;
  border-radius:999px;
  background:#d9b3a6;
}

/* Why */
.why{ background:var(--bg); }
.why .wrap{ display:grid; grid-template-columns:.95fr 1.05fr; gap:28px; align-items:center }
.why .img{ border-radius:22px; overflow:hidden; box-shadow:0 16px 38px rgba(0,0,0,.07); border:1px solid var(--bdr) }
.why h2{ font:800 var(--fs-h2)/1.15 "Playfair Display", serif; margin:0 0 8px }
.why .points{ list-style:none; padding:0; margin:16px 0 0; color:#524f4e }
.why .points li{ display:flex; align-items:flex-start; gap:10px; padding:8px 0 }

/* ===== "Comment ça marche ?" ===== */
.how{
  background:var(--bg);
  padding: var(--section) 0;
  position:relative;
  overflow:hidden;
}
.how::before,.how::after{
  content:""; position:absolute; width:220px; height:220px; border:30px solid rgba(255,184,166,.21);
  border-radius:50%; pointer-events:none;
}
.how::before{ top:-140px; right:-40px; }
.how::after{ bottom:-120px; left:-40px; border-color:rgba(154,124,214,.15); }
.how .head{ text-align:center; max-width:720px; margin:0 auto 28px; }
.how h2{ font:800 clamp(28px,3.3vw,40px)/1.02 "Playfair Display",serif; margin:0 0 10px; }
.how p{ margin:0; color:#6b4b44; }
.how-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:18px; position:relative; z-index:2; }
.how-step{
  background: radial-gradient(220px 160px at 15% 0%, #fff3ee 0%, #ffffff 70%);
  border:1px solid rgba(255,184,166,.5);
  border-radius:18px; padding:18px 18px 16px; box-shadow:0 10px 32px rgba(0,0,0,.025);
  display:flex; flex-direction:column; gap:10px; opacity:0; transform:translateY(18px);
  transition:opacity .35s ease, transform .35s ease;
}
.how-step.is-visible{ opacity:1; transform:translateY(0); }
.how-step .badge-step{
  display:inline-flex; width:42px; height:42px; border-radius:14px; background:linear-gradient(185deg,#9a7cd6,#7f63be);
  color:#fff; font-weight:800; align-items:center; justify-content:center; box-shadow:0 12px 24px rgba(154,124,214,.35);
}
.how-step h3{ margin:0; font:700 18px/1.1 "Playfair Display",serif; }
.how-step p{ margin:0; color:#5a4f5b; line-height:1.5; }
.how-step small{ font-size:12.5px; color:#8a758d; }

/* Bannière numéro */
.hotline-banner{
  background:linear-gradient(140deg,#fff 0%, #ffe5dd 35%, #ffb8a6 85%);
  border:1px solid rgba(255,184,166,.4);
  border-radius:20px; padding:14px 16px;
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  margin-bottom:22px; box-shadow:0 14px 30px rgba(255,156,134,.12);
}
.hotline-left{ display:flex; gap:10px; align-items:center; }
.hotline-label{
  background:rgba(255,247,243,.7); border:1px solid rgba(255,243,237,.8);
  padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; color:#7e4f45;
}
.hotline-text{ font-weight:600; color:#5a362f; font-size:14px; }
.hotline-call{
  display:inline-flex; gap:8px; align-items:center; background:#fff; border:1px solid rgba(255,184,166,.5);
  border-radius:999px; padding:9px 16px 9px 14px; font-weight:800; color:#c23b1d; text-decoration:none; font-size:15px;
  box-shadow:0 11px 24px rgba(255,103,55,.12); transition:transform .12s ease;
}
.hotline-call small{ display:block; font-weight:500; font-size:11px; color:#b0513d; line-height:1.1; }
.hotline-call strong{ font-size:16px; }
.hotline-call:hover{ transform:translateY(-2px); }
.hotline-icon{ width:28px; height:28px; border-radius:999px; background:linear-gradient(180deg,#ffb8a6,#ff977d); display:grid; place-items:center; color:#fff; font-size:15px; }
@media (max-width:640px){
  .hotline-banner{ flex-direction:column; align-items:flex-start; }
  .hotline-call{ width:100%; justify-content:center; }
}

/* Sections & grids */
.section{ padding: var(--section) 0 }
.section h2{ font:800 var(--fs-h2)/1.15 "Playfair Display", serif; text-align:center; margin:0 0 10px }
.filters{ max-width:860px; margin:20px auto 30px; display:grid; grid-template-columns: 1fr 220px 44px; gap:10px }
.icon-btn{ display:grid; place-items:center; border:1px solid var(--bdr); border-radius:10px; background:#fff; cursor:pointer; font-size:18px }
.grid{ display:grid; gap:18px; grid-template-columns:repeat(12,1fr) }

/* ===== Forfaits (cartes) ===== */
.plans-shell{
  margin-top:16px;
  padding:22px 20px 24px;
  border-radius:26px;
  background:var(--bg);           /* plus de blanc ici */
  border:1px solid var(--bdr);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.plans-header-accent{
  position:absolute;
  top:18px;
  left:40px;
  width:120px;
  height:4px;
  border-radius:999px;
  background:repeating-linear-gradient(90deg,transparent 0 8px,#f9b4a2 8px 10px);
  opacity:.7;
}
.plans-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  position:relative;
  z-index:2;
}

.plan-card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  border-radius:18px;
  border:1px solid #e2d0c7;
  background:linear-gradient(180deg,#ffece3,#ffe0d2); /* fond rosé */
  box-shadow:0 8px 24px rgba(15,23,42,.06);
  overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.plan-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(15,23,42,.12);
  border-color:#e2b9a7;
}

.plan-top{
  position:relative;
  border-bottom:1px solid #ece9f2;
  background:#0d1630;
}
.plan-cover{
  height:90px;
  background-image:linear-gradient(135deg,#05081a,#182a6b,#2955c9,#6bb5ff);
  background-size:200% 200%;
  animation:planStars 12s ease-in-out infinite alternate;
}
.plan-title{
  position:absolute;
  left:18px;
  bottom:12px;
  color:#fff;
  font-family:"Playfair Display",serif;
  font-weight:700;
  font-size:18px;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.plan-ribbon{
  position:absolute;
  left:-54px;
  top:12px;
  padding:4px 56px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  font-weight:700;
  text-align:center;
  transform:rotate(-38deg);
  background:#312e81;
  box-shadow:0 8px 16px rgba(15,23,42,.35);
}
.ribbon-express{ background:#1f2937; }
.ribbon-gold   { background:#a16207; }
.ribbon-platinum{ background:#4b5563; }
.ribbon-infinite{ background:#111827; }

@keyframes planStars{
  from{ background-position:0% 40%; }
  to  { background-position:100% 60%; }
}

.plan-body{
  padding:14px 16px 10px;
  font-size:var(--fs-sm);
  color:#4b4b55;
}
.plan-subtitle{
  margin:0 0 8px;
  font-weight:500;
}
.plan-duration{
  margin:0 0 8px;
  font-size:19px;
}
.plan-duration strong{ font-size:22px; }

.plan-price{
  margin:0;
  font-size:14px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.price-main{
  font-weight:800;
  font-size:17px;
}
.price-old{
  font-size:12px;
  color:#8b7a8c;
}
.price-old span{
  text-decoration:line-through;
}

.plan-footer{
  margin-top:auto;
  display:flex;
  flex-direction:column;
}
.plan-tagline{
  padding:9px 12px;
  font-size:12px;
  font-weight:600;
}
.plan-tagline-purple{ background:#321b5b; color:#f5ecff; }
.plan-tagline-orange{ background:#f59e0b; color:#111827; }
.plan-tagline-grey  { background:#e5e7eb; color:#374151; }
.plan-tagline-black { background:#111827; color:#f9fafb; }

.plan-btn{
  padding:11px 14px;
  text-align:center;
  font-weight:800;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.plan-btn-purple{ background:#3b0764; color:#fff; }
.plan-btn-orange{ background:#92400e; color:#fff; }
.plan-btn-grey  { background:#9ca3af; color:#111827; }
.plan-btn-black { background:#000; color:#fff; }

@media (max-width:720px){
  .plans-shell{
    padding:18px 14px 20px;
    border-radius:22px;
  }
}

/* Cartes expert */
.expert{
  grid-column: span 4; overflow:hidden; border-radius:18px; border:1px solid var(--bdr); background:var(--paper); box-shadow:var(--shadow);
  position:relative
}
.expert .top{
  height:110px; background:
    radial-gradient(700px 160px at 0% 0%, #ffe6dd 0%, #ffd3c8 70%, #f1c2f5 100%),
    linear-gradient(90deg,#ffbda7,#b796ff);
  border-bottom:1px solid var(--bdr); position:relative
}
.expert .avatar{
  position:absolute; left:18px; bottom:-28px; width:76px; height:76px; border-radius:999px; border:4px solid #fff; overflow:hidden; background:#fff; box-shadow:0 8px 16px rgba(0,0,0,.08)
}
.expert .status{
  position:absolute; right:12px; bottom:-22px; font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--bdr); background:#fff; display:flex; gap:6px; align-items:center; font-weight:700
}
.dot{ width:8px; height:8px; border-radius:50% }
.dot.online{ background:var(--green) }
.dot.offline{ background:#c1c7d0 }
.expert .content{ padding:36px 16px 14px }
.expert .name{ font-weight:800; font-size:18px; margin:4px 0 2px; font-family:"Playfair Display", serif }
.expert .meta{ color:#6c717d; font-size:var(--fs-sm); margin-bottom:6px }
.expert .tagline{ color:#534f56; font-size:var(--fs-sm); margin:6px 0 0 }
.expert .cta-card{
  display:block; text-align:center; padding:14px 18px; font-weight:800; color:#fff; background:linear-gradient(180deg,var(--green),var(--green-2)); border-top:1px solid #16a34a33
}
.expert .hit{ position:absolute; inset:0; appearance:none; background:none; border:none; cursor:pointer }

@media (max-width:1000px){
  .hero .wrap{ grid-template-columns:1fr; text-align:center }
  .hero-people{ justify-content:center }
  .why .wrap{ grid-template-columns:1fr }
  .how-grid{ grid-template-columns:1fr; }
  .expert{ grid-column:span 6 }
  .filters{ grid-template-columns: 1fr 1fr 44px }
}
@media (max-width:680px){
  .expert{ grid-column:span 12 }
  .filters{ grid-template-columns:1fr }
}

/* ===== Pages "Auth" et "Consultation" ===== */
.auth-hero{
  padding: clamp(40px,6vw,80px) 0;
  background: radial-gradient(800px 520px at 10% 10%, #fff2ed 0%, #fff7f3 70%, transparent 120%), #fff;
  border-bottom:1px solid var(--bdr); text-align:center
}
.tabs{ display:flex; gap:8px; justify-content:center; margin-bottom:14px; flex-wrap:wrap }

.hero-consult{
  position:relative; overflow:hidden; text-align:center;
  background: radial-gradient(800px 520px at 10% 10%, #fff2ed 0%, #fff7f3 70%, transparent 120%), #fff;
  padding: clamp(58px,8vw,140px) 0; border-bottom:1px solid var(--bdr)
}
.hero-consult h1{ font:800 clamp(40px,6vw,80px)/1.04 "Playfair Display",serif; margin:0 }
.hero-consult .lead{ margin:12px auto 0; max-width:72ch }
.hero-consult .wavy{ margin-inline:auto }

.consult-nav{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:18px auto 0; max-width:var(--wrap)
}
.consult-nav a{
  display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:999px; background:#fff; border:1px solid var(--bdr); font-weight:800
}

.consult-sections{ padding: clamp(28px,4vw,48px) 0 }
.consult-grid{ display:grid; gap:24px; grid-template-columns: 1fr; max-width:1100px; margin:0 auto }
.big-card{ padding: clamp(16px,2.4vw,24px) }
.big-card h2{ font:800 clamp(28px,3.4vw,44px)/1.1 "Playfair Display",serif; margin:0 0 10px; text-align:left }
.big-card p.lead{ font-size:clamp(18px,1.8vw,22px) }

.row{ display:flex; gap:12px; flex-wrap:wrap }
.col{ flex:1 1 300px }
.label{ display:block; margin:8px 0 6px; color:var(--muted); font-size:var(--fs-sm) }

.jitsi-shell{ border:1px solid var(--bdr); border-radius:18px; overflow:hidden; height:0; transition:height .2s ease }

.chatbox{ display:grid; grid-template-rows: auto 1fr auto; gap:12px; height:min(70vh,560px) }
.chatlog{ overflow:auto; border:1px solid var(--bdr); border-radius:14px; padding:12px; background:#fff }
.msg{ display:flex; margin:8px 0; gap:8px }
.msg .bubble{ padding:10px 14px; border:1px solid var(--bdr); border-radius:12px; background:#fff; max-width:70% }
.msg.me{ justify-content:flex-end }
.msg.me .bubble{ background:#f3fff5; border-color:#d7f5dd }
.msg time{ font-size:12px; color:#7a7f8b; margin-top:4px; display:block }

/* ===== Horoscope ===== */
.astro{
  background: radial-gradient(800px 520px at 10% 10%, #fff2ed 0%, #fff7f3 70%, transparent 120%), #fff;
  padding: clamp(46px,4.6vw,66px) 0 clamp(52px,5vw,80px);
  position:relative; overflow:hidden;
}
.astro::before,.astro::after{
  content:""; position:absolute; width:160px; height:160px; border:16px solid rgba(255,184,166,.25);
  border-radius:50%; animation: floaty 7.5s ease-in-out infinite alternate; pointer-events:none;
}
.astro::before{ top:-60px; right:10%; }
.astro::after{ bottom:-40px; left:4%; animation-delay:-2.5s; border-color: rgba(154,124,214,.25); }
@keyframes floaty { from{ transform:translateY(0) rotate(0); opacity:.9 } to{ transform:translateY(14px) rotate(6deg); opacity:1 } }

.astro .title{ text-align:center; margin-bottom:20px; }
.astro .title h2{ margin:0; font:800 clamp(26px,3.4vw,40px)/1.05 "Playfair Display",serif; }
.astro .title p{ margin:6px auto 0; max-width:60ch; color:#6b4b44; }
.astro-days{ display:flex; gap:10px; justify-content:center; margin-bottom:14px; flex-wrap:wrap; }
.astro-day{
  background:#fff; border:1px solid rgba(154,124,214,.1); border-radius:999px; padding:8px 14px; cursor:pointer; font-weight:700; color:#4d4264;
  transition:transform .12s ease, box-shadow .12s ease;
}
.astro-day.is-active{ background:linear-gradient(180deg,#9a7cd6,#7f63be); color:#fff; box-shadow:0 12px 30px rgba(154,124,214,.35); transform:translateY(-1px); }

/* ===== MODIF : 3 lignes de 4 (12 signes => 3 rangées de 4) ===== */
.astro-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(140px, 1fr)); /* 4 colonnes => 3 rangées (12 cartes) */
  gap:14px;
  max-width:980px;
  margin:18px auto 0;
  justify-content:center;
}

.astro-card{
  border:1px solid rgba(255,184,166,.4);
  background:radial-gradient(200px 120px at 30% 5%, #ffe5dc 0%, #ffffff 65%);
  border-radius:18px; padding:14px 10px 14px; text-align:center; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease; display:flex; flex-direction:column; gap:6px; position:relative; overflow:hidden;
}
.astro-card::after{
  content:""; position:absolute; bottom:-18px; right:-12px; width:68px; height:68px;
  background:radial-gradient(circle, rgba(154,124,214,.08) 0, rgba(154,124,214,0) 65%); pointer-events:none;
}
.astro-card .emoji{ font-size:28px; line-height:1; }
.astro-card .sign-label{ font-weight:800; font-size:15px; font-family:"Playfair Display",serif; }
.astro-card small{ font-size:12px; color:#887075; }
.astro-card:hover{ transform:translateY(-3px); box-shadow:0 12px 32px rgba(255,156,134,.18); }
.astro-card.is-active{ outline:2px solid rgba(154,124,214,.7); outline-offset:2px; box-shadow:0 12px 28px rgba(149,121,208,.33); }

.astro-panel{
  margin-top:26px; background:#fff; border:1px solid rgba(154,124,214,.4); border-radius:18px; padding:18px 18px 16px;
  display:grid; gap:10px; grid-template-columns:1fr; min-height:120px; box-shadow:0 18px 38px rgba(0,0,0,.03);
}
.astro-panel h3{ margin:0; font:700 20px/1.12 "Playfair Display",serif; display:flex; gap:8px; align-items:center; }
.astro-panel p{ margin:0; color:#533840; white-space:pre-line; }
.astro-panel .meta{ display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:#856377; }
.astro-panel .loader{ width:32px; height:32px; border:3px solid rgba(154,124,214,.2); border-top-color:rgba(154,124,214,.9); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* Responsive grille horoscope */
@media (max-width: 920px){
  .astro-grid{ grid-template-columns:repeat(3, minmax(140px, 1fr)); } /* 3 colonnes */
}
@media (max-width: 640px){
  .astro-grid{ grid-template-columns:repeat(2, minmax(140px, 1fr)); } /* 2 colonnes */
}
@media (max-width: 360px){
  .astro-grid{ grid-template-columns:1fr; } /* 1 colonne */
}

@media (max-width:720px){
  .astro-panel{ padding:16px 14px 14px; }
}