/* Astro-Love — design system (céleste + romantique, self-contained) */
:root{
  --night-0:#080b1e; --night-1:#0d1230; --night-2:#161a45; --violet:#241a54;
  --gold:#f0c774; --gold-soft:#f6dca0; --rose:#e98aa8; --rose-deep:#c65f83;
  --ink:#f5f2ea; --muted:#b7b4cc; --muted-2:#8b88a6;
  --card:rgba(255,255,255,.055); --card-2:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.12); --ok:#7ee0b0; --warn:#f0b45a; --bad:#f07a8a;
  --radius:18px; --radius-sm:12px; --shadow:0 18px 50px rgba(0,0,0,.45);
  --serif:"Georgia","Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--ink); line-height:1.6;
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(233,138,168,.18), transparent 60%),
    radial-gradient(1000px 620px at 10% 6%, rgba(240,199,116,.14), transparent 55%),
    linear-gradient(180deg,var(--night-0),var(--night-1) 42%,var(--violet));
  background-attachment:fixed; min-height:100vh; overflow-x:clip;
}
img{max-width:100%; height:auto}
/* subtle starfield */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 65% 12%, #fff, transparent),
    radial-gradient(1px 1px at 80% 60%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 40% 78%, #fff, transparent),
    radial-gradient(1px 1px at 12% 66%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 90% 40%, #fff, transparent);
  background-repeat:no-repeat;
}
.wrap{position:relative; z-index:1; max-width:1140px; margin:0 auto; padding:0 22px}
a{color:var(--gold-soft); text-decoration:none}
a:hover{color:var(--gold)}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.15; letter-spacing:.2px}
h1{font-size:clamp(2.1rem,5vw,3.6rem); margin:.2em 0}
h2{font-size:clamp(1.5rem,3.4vw,2.3rem)}
.muted{color:var(--muted)}
.center{text-align:center}

/* header */
.site-head{position:sticky; top:0; z-index:20; backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(8,11,30,.85),rgba(8,11,30,.35));
  border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex; align-items:center; gap:18px; height:66px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--serif);
  font-size:1.35rem; font-weight:600; color:var(--ink)}
.brand .logo{font-size:1.5rem}
.brand .logo-img{height:32px;width:auto;display:block}
.brand b{background:linear-gradient(90deg,var(--gold),var(--rose));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.nav{margin-left:auto; display:flex; align-items:center; gap:18px}
.nav a{color:var(--muted); font-size:.95rem}
.nav a:hover{color:var(--ink)}
.lang{display:flex; gap:2px; border:1px solid var(--line); border-radius:999px; padding:3px}
.lang button{background:none; border:0; color:var(--muted); padding:3px 9px; border-radius:999px;
  cursor:pointer; font-size:.82rem}
.lang button.on{background:var(--card-2); color:var(--ink)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:999px; padding:12px 22px; font-size:1rem; font-weight:600;
  cursor:pointer; transition:transform .08s ease, filter .15s ease; font-family:var(--sans)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(90deg,var(--gold),var(--rose)); color:#2a1430}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:var(--card); color:var(--ink); border:1px solid var(--line)}
.btn-ghost:hover{background:var(--card-2)}
.btn-block{width:100%}
.btn-sm{padding:8px 14px; font-size:.9rem}

/* hero */
.hero{padding:74px 0 40px; text-align:center}
.hero .eyebrow{display:inline-flex; gap:8px; align-items:center; color:var(--gold-soft);
  border:1px solid var(--line); background:var(--card); border-radius:999px; padding:6px 14px;
  font-size:.85rem; letter-spacing:.6px; text-transform:uppercase}
.hero p.lead{font-size:clamp(1.05rem,2.2vw,1.3rem); color:var(--muted); max-width:640px; margin:18px auto 26px}
.hero .cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.price-badge{margin-top:20px; color:var(--muted); font-size:.95rem}
.price-badge b{color:var(--gold-soft)}

/* sections & cards */
section.block{padding:52px 0}
.grid{display:grid; gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow)}
.card h3{margin:.1em 0 .4em}
.card .ico{font-size:1.9rem; display:block; margin-bottom:8px; line-height:1}

/* ---- icônes maison (SVG trait fin, couleur du titre « -Love ») -------------
   Une seule épaisseur, une seule couleur, dimensionnées en em : l'icône suit la
   taille de texte de son contexte. Voir assets/js/icons.js. */
.ic{
  width:1em; height:1em; display:inline-block; vertical-align:-.14em;
  fill:none; stroke:var(--gold); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  /* le trait garde son épaisseur quelle que soit la taille d'affichage */
  vector-effect:non-scaling-stroke; overflow:visible;
}
.card .ico .ic{display:block; width:1em; height:1em; stroke-width:1.35}
.ic-lg{width:1.5em; height:1.5em}
/* sur pastille pleine (bouton lecture vidéo) : l'icône passe en sombre */
.video-ph .video-play .ic{stroke:#2a1430; width:.62em; height:.62em; margin-left:.06em}
/* petits boutons superposés aux photos */
.pstar .ic{stroke:var(--gold-soft)}
.pdel .ic{stroke:#fff}
.pdel:hover .ic{stroke:#2a1430}
/* cœur « en favori » : plein, dans la couleur du titre */
.ic-fav{stroke:var(--gold)}
.ic-fav.on{color:var(--gold)}
/* glyphes astrologiques (☉ ☽ ☌ ⚹ □ △ ☍) : notation, pas emoji — même teinte */
.glyph{color:var(--gold); font-style:normal}
.steps{counter-reset:s}
.step{display:flex; gap:16px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step .n{flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--serif); font-weight:700;
  background:linear-gradient(90deg,var(--gold),var(--rose)); color:#2a1430}

/* pricing */
.pricing{max-width:520px; margin:0 auto}
.pricing .plan{background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; text-align:center; position:relative; overflow:hidden}
.pricing .plan::after{content:""; position:absolute; inset:-40% 40% auto -40%; height:200px;
  background:radial-gradient(circle,rgba(240,199,116,.22),transparent 70%)}
.pricing .amount{font-family:var(--serif); font-size:3rem; line-height:1; margin:8px 0}
.pricing .amount small{font-size:1rem; color:var(--muted)}
.pricing .then{color:var(--muted); font-size:.95rem}
.pricing ul{list-style:none; padding:0; margin:20px 0; text-align:left}
.pricing li{padding:7px 0 7px 28px; position:relative}
.pricing li::before{content:"✦"; position:absolute; left:0; color:var(--gold)}
.tag-nocommit{display:inline-block; margin-top:14px; color:var(--ok); font-size:.9rem}

/* promo video */
.video-frame{position:relative; max-width:900px; margin:26px auto 0; aspect-ratio:16/9;
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  background:radial-gradient(circle at 50% 42%, rgba(233,138,168,.20), rgba(8,11,30,.65)); box-shadow:var(--shadow)}
.video-frame video{width:100%; height:100%; object-fit:cover; display:block}
.video-ph{position:absolute; inset:0; display:grid; place-items:center; align-content:center;
  text-align:center; color:var(--muted); gap:6px}
.video-ph .video-play{font-size:1.8rem; width:76px; height:76px; border-radius:50%; display:grid;
  place-items:center; background:linear-gradient(90deg,var(--gold),var(--rose)); color:#2a1430;
  box-shadow:0 10px 30px rgba(233,138,168,.35)}

/* footer */
.site-foot{margin-top:40px; border-top:1px solid var(--line); padding:28px 0; color:var(--muted-2)}
.site-foot .wrap{display:flex; gap:18px; flex-wrap:wrap; align-items:center; font-size:.9rem}
.site-foot a{color:var(--muted)}
.site-foot .sep{margin-left:auto}

/* forms / auth */
.auth-shell{max-width:440px; margin:40px auto; }
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; box-shadow:var(--shadow)}
.panel h2{margin-top:0}
.field{margin:14px 0}
.field label{display:block; font-size:.85rem; color:var(--muted); margin-bottom:6px}
.input, select.input, textarea.input{width:100%; background:rgba(0,0,0,.28); border:1px solid var(--line);
  color:var(--ink); border-radius:var(--radius-sm); padding:12px 14px; font-size:1rem; font-family:var(--sans)}
.input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(240,199,116,.15)}
textarea.input{min-height:96px; resize:vertical}
.check{display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--muted); margin:10px 0}
.check input{margin-top:4px}
.switchline{margin-top:16px; font-size:.92rem; color:var(--muted); text-align:center}
.msg{padding:11px 14px; border-radius:var(--radius-sm); font-size:.92rem; margin:12px 0; display:none}
.msg.show{display:block}
.msg.err{background:rgba(240,122,138,.14); border:1px solid rgba(240,122,138,.4); color:#ffd0d6}
.msg.ok{background:rgba(126,224,176,.13); border:1px solid rgba(126,224,176,.4); color:#c7f4dd}
.msg.info{background:rgba(240,199,116,.12); border:1px solid rgba(240,199,116,.35); color:#f6dca0}

/* chips (multi-select) */
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--line);
  border-radius:999px; cursor:pointer; color:var(--muted); background:var(--card); font-size:.92rem}
.chip:hover{background:var(--card-2)}
.chip input{accent-color:var(--rose)}
.chip:has(input:checked){border-color:var(--gold); color:var(--ink); background:rgba(240,199,116,.12)}

/* autocomplete */
.autocomplete{position:relative}
.ac-list{position:absolute; z-index:30; left:0; right:0; top:100%; margin-top:4px;
  background:#12102b; border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow); max-height:260px; overflow-y:auto; display:none}
.ac-list.show{display:block}
.ac-item{padding:10px 14px; cursor:pointer; font-size:.94rem; border-bottom:1px solid rgba(255,255,255,.06)}
.ac-item:last-child{border-bottom:0}
.ac-item:hover,.ac-item.sel{background:var(--card-2)}
.ac-item .c{color:var(--muted-2); font-size:.82rem; margin-left:6px}

/* hub cards */
.hub-card{position:relative; display:block; transition:transform .1s ease, border-color .15s ease}
.hub-card:hover{transform:translateY(-3px); border-color:var(--gold)}
.hub-card h3{color:var(--ink)}
.soon{position:absolute; top:14px; right:14px; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.5px; color:var(--gold-soft); border:1px solid var(--line); border-radius:999px; padding:3px 9px}

/* range sliders */
input[type=range]{accent-color:var(--gold); background:transparent}
/* match cards */
.match-card{display:flex; gap:16px; align-items:center; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 20px; margin-bottom:14px; box-shadow:var(--shadow)}
.score-badge{flex:0 0 auto; width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--serif); font-weight:700; font-size:1.15rem; color:#2a1430;
  background:conic-gradient(var(--gold) calc(var(--p,60)*1%), rgba(255,255,255,.1) 0);
  position:relative}
.score-badge::after{content:attr(data-score)"%"; position:absolute; width:50px; height:50px; border-radius:50%;
  background:#14112c; color:var(--ink); display:grid; place-items:center; font-size:1rem}
.match-card .info{flex:1; min-width:0}
.match-card .nm{font-family:var(--serif); font-size:1.2rem}
.match-card .meta{color:var(--muted-2); font-size:.85rem; margin:2px 0 6px}
.match-card .reason{color:var(--muted); font-size:.9rem; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.subscores{display:flex; gap:14px; margin-top:8px; font-size:.78rem; color:var(--muted-2)}
.subscores b{color:var(--gold-soft)}
.md-hero{text-align:center; padding:10px 0 4px}
.md-score{font-family:var(--serif); font-size:3rem; background:linear-gradient(90deg,var(--gold),var(--rose));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.reasonlist{list-style:none; padding:0; margin:14px 0}
.reasonlist li{padding:8px 0 8px 26px; position:relative; color:var(--muted)}
.reasonlist li::before{content:"✦"; position:absolute; left:0; color:var(--gold)}
.aspect-chip{display:inline-block; margin:4px 6px 0 0; padding:4px 10px; border:1px solid var(--line);
  border-radius:999px; font-size:.8rem; color:var(--muted)}
.tibetan-md{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:16px 18px; font-size:.92rem; color:var(--muted); white-space:pre-wrap; line-height:1.6}
.section-h{font-family:var(--serif); font-size:1.15rem; margin:22px 0 6px; color:var(--ink)}

/* tabs */
.tabs{display:flex; gap:6px; border-bottom:1px solid var(--line); margin:16px 0 18px}
.tab{background:none; border:0; color:var(--muted); padding:10px 16px; cursor:pointer; font-size:.95rem;
  border-bottom:2px solid transparent; font-family:var(--sans)}
.tab.on{color:var(--ink); border-bottom-color:var(--gold)}
.gtab.hidden{display:none}
/* chat */
.chat{min-height:280px; max-height:52vh; overflow-y:auto; display:flex; flex-direction:column; gap:12px;
  padding:12px; background:rgba(0,0,0,.18); border:1px solid var(--line); border-radius:var(--radius)}
.bubble{max-width:82%; padding:11px 15px; border-radius:16px; font-size:.94rem; line-height:1.55; white-space:pre-wrap}
.bubble.user{align-self:flex-end; background:linear-gradient(90deg,rgba(240,199,116,.22),rgba(233,138,168,.22)); border:1px solid var(--line)}
.bubble.guide{align-self:flex-start; background:var(--card-2); border:1px solid var(--line)}
.bubble.thinking{opacity:.7; font-style:italic}
.chat-input{display:flex; gap:10px; margin-top:12px; align-items:flex-end}
.chat-input textarea{flex:1; min-height:48px}
/* journey */
.jstep{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:12px}
.jstep.done{border-color:rgba(126,224,176,.5)}
.jstep .jhead{display:flex; align-items:center; gap:10px}
.jstep .jn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:var(--card-2);border:1px solid var(--line);font-family:var(--serif);font-weight:700}
.jstep.done .jn{background:linear-gradient(90deg,var(--gold),var(--rose));color:#2a1430}
.jstep h4{margin:0;font-family:var(--serif);font-size:1.1rem;flex:1}
.jstep .reflection{margin-top:12px;padding:12px 14px;background:rgba(0,0,0,.2);border-radius:var(--radius-sm);
  font-size:.92rem;color:var(--muted);white-space:pre-wrap;line-height:1.6}
.jactions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.jentry{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:10px}
.jentry .jt{font-family:var(--serif);font-size:1.05rem}
.jentry .jd{color:var(--muted-2);font-size:.78rem;margin:2px 0 6px}
.jentry .jc{color:var(--muted);white-space:pre-wrap;font-size:.92rem}

/* chart display */
.chart-hero{display:flex; gap:20px; flex-wrap:wrap; margin:18px 0}
.big3{flex:1 1 150px; background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:16px; text-align:center}
.big3 .em{font-size:1.8rem} .big3 .lbl{color:var(--muted-2); font-size:.78rem; text-transform:uppercase; letter-spacing:.5px}
.big3 .val{font-family:var(--serif); font-size:1.25rem; margin-top:4px}
.planet-row{display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--line)}
.planet-row:last-child{border-bottom:0}
.planet-row .g{font-size:1.15rem; width:26px; text-align:center; color:var(--gold-soft)}
.planet-row .nm{flex:0 0 120px} .planet-row .sg{flex:1}
.planet-row .rx{color:var(--rose); font-size:.8rem}
.el-bars{display:flex; gap:10px; margin:16px 0}
.el-bar{flex:1; text-align:center}
.el-bar .track{height:8px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; margin-bottom:6px}
.el-bar .fill{height:100%; background:linear-gradient(90deg,var(--gold),var(--rose))}
.el-bar .lbl{font-size:.8rem; color:var(--muted)}

/* public assistant widget */
.al-asst-btn{position:fixed;bottom:22px;right:22px;z-index:50;width:58px;height:58px;border-radius:50%;border:0;
  cursor:pointer;font-size:1.55rem;color:#2a1430;background:linear-gradient(90deg,var(--gold),var(--rose));
  box-shadow:0 10px 30px rgba(233,138,168,.4)}
.al-asst-btn:hover{filter:brightness(1.05)}
.al-asst-panel{position:fixed;bottom:90px;right:22px;z-index:51;width:min(360px,calc(100vw - 32px));
  max-height:min(560px,72vh);display:none;flex-direction:column;background:#100e26;border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.al-asst-panel.show{display:flex}
.al-asst-head{display:flex;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line)}
.al-asst-head b{font-family:var(--serif);flex:1;font-size:1.02rem}
.al-asst-close{background:none;border:0;color:var(--muted);font-size:1.4rem;cursor:pointer;line-height:1}
.al-asst-body{flex:1;overflow-y:auto;padding:14px 16px}
.al-asst-intro{color:var(--muted-2);font-size:.82rem;margin:0 0 10px}
.al-asst-chat{display:flex;flex-direction:column;gap:10px}
.al-b{max-width:88%;padding:9px 13px;border-radius:14px;font-size:.9rem;line-height:1.5;white-space:pre-wrap}
.al-b.al-user{align-self:flex-end;background:linear-gradient(90deg,rgba(240,199,116,.2),rgba(233,138,168,.2));border:1px solid var(--line)}
.al-b.al-guide{align-self:flex-start;background:var(--card-2);border:1px solid var(--line)}
.al-b.al-think{opacity:.6}
.al-asst-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.al-asst-input textarea{flex:1;resize:none;background:rgba(0,0,0,.28);border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:9px 12px;font-family:var(--sans);font-size:.9rem}

.hidden{display:none!important}

/* legal / long-form pages */
.legal{max-width:760px; margin:30px auto 10px; padding-bottom:24px}
.legal h1{font-size:clamp(1.8rem,4vw,2.6rem); margin:.2em 0 .15em}
.legal h2{font-size:1.25rem; margin:1.6em 0 .3em; color:var(--gold-soft)}
.legal p,.legal li{color:var(--muted); line-height:1.7}
.legal ul{padding-left:1.2em; margin:.4em 0}
.legal li{margin:.35em 0}
.legal a{color:var(--gold-soft); text-decoration:underline}
.legal .small{font-size:.82rem; margin-top:26px}

/* profile photos */
.photo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px}
.photo-item{position:relative; aspect-ratio:1; border-radius:var(--radius-sm); overflow:hidden;
  border:1px solid var(--line); background:var(--card)}
.photo-item img{width:100%; height:100%; object-fit:cover; display:block}
.photo-item.is-primary{border-color:var(--gold); box-shadow:0 0 0 2px rgba(240,199,116,.3)}
.pbadge{position:absolute; left:6px; bottom:6px; font-size:.7rem; padding:2px 8px; border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--rose)); color:#2a1430; font-weight:600}
.pstar{position:absolute; left:6px; bottom:6px; width:28px; height:28px; border-radius:50%; border:0;
  cursor:pointer; background:rgba(0,0,0,.55); color:var(--gold-soft); font-size:1rem; line-height:1}
.pstar:hover{background:rgba(0,0,0,.78)}
.pdel{position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; border:0;
  cursor:pointer; background:rgba(0,0,0,.55); color:#fff; font-size:.85rem; line-height:1}
.pdel:hover{background:var(--bad); color:#2a1430}
.photo-add{cursor:pointer}

/* back-to-hub link (member area) */
.backlink{display:inline-block; color:var(--muted); font-size:.92rem; margin-bottom:14px}
.backlink:hover{color:var(--ink)}

/* decorative image band */
.visual-band{padding:16px 0 40px}
.vfig{margin:0; text-align:center}
.vfig img{width:100%; max-width:660px; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow)}
.vfig figcaption{margin-top:14px; color:var(--muted); font-family:var(--serif); font-size:1.05rem; font-style:italic; max-width:520px; margin-inline:auto}

/* language dropdown */
.lang-select{background:var(--card); color:var(--muted); border:1px solid var(--line); border-radius:999px;
  padding:5px 10px; font-size:.82rem; font-family:var(--sans); cursor:pointer}
.lang-select:hover{color:var(--ink)}
.lang-select option{color:#111}

/* typing indicator (guide « en réflexion ») */
.bubble.typing{display:inline-flex; gap:5px; align-items:center; padding:14px 16px}
.tdot{width:7px; height:7px; border-radius:50%; background:var(--gold-soft); opacity:.35; animation:tblink 1.2s infinite}
.tdot:nth-child(2){animation-delay:.2s}
.tdot:nth-child(3){animation-delay:.4s}
@keyframes tblink{0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)}}

/* mythe fondateur — synthèse */
.myth-synth{color:var(--muted); line-height:1.7}
.myth-synth h4{margin:16px 0 6px}
.myth-synth b{color:var(--ink)}
.myth-synth p{margin:.5em 0}
.myth-sug{font-size:.86rem}

/* appel audio/vidéo Jitsi (overlay plein écran) */
.call-overlay{position:fixed; inset:0; z-index:80; background:#0b0e22; display:flex; flex-direction:column}
.call-bar{display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--line)}
.call-bar span{flex:1; font-family:var(--serif); color:var(--ink)}
.call-host{flex:1; min-height:0}
.call-host iframe{width:100%!important; height:100%!important; border:0}

/* ============ RESPONSIVE — tablette / iPhone / Samsung ============ */
/* tablettes paysage & petits laptops : la grille 3 passe à 2 colonnes */
@media(max-width:980px){
  .grid-3{grid-template-columns:1fr 1fr}
}
/* tablettes portrait & grands téléphones */
@media(max-width:820px){
  .nav a.hide-sm{display:none}
  .nav{gap:12px}
  section.block{padding:42px 0}
  .hero{padding:58px 0 34px}
  .chart-hero{gap:14px}
}
/* téléphones (iPhone 12-15, Galaxy S/A…) */
@media(max-width:600px){
  .wrap{padding:0 16px}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .site-head .wrap{gap:10px; height:60px}
  .brand{font-size:1.15rem} .brand .logo-img{height:28px}
  .nav{gap:9px}
  .nav .btn-primary{display:none}            /* CTA d'en-tête retiré : le hero porte déjà "Créer mon profil" */
  section.block{padding:36px 0}
  .hero{padding:44px 0 30px}
  .card{padding:20px}
  .pricing .plan{padding:24px}
  .pricing .amount{font-size:2.6rem}
  .steps .step{gap:12px}
  .step .n{width:32px; height:32px}
  .bubble{max-width:90%}
  .planet-row .nm{flex:0 0 92px}
  .chat{max-height:56vh}
  .tab{padding:9px 12px; font-size:.9rem}
  .site-foot .wrap{gap:12px}
  .site-foot .sep{margin-left:0; width:100%; height:0}
  /* champs à 16px = pas de zoom auto au focus sur iOS */
  .input, select.input, textarea.input, .al-asst-input textarea{font-size:16px}
}
/* petits téléphones (iPhone SE, Galaxy compacts ~360px) */
@media(max-width:380px){
  h1{font-size:2rem}
  .hero .cta{flex-direction:column; gap:10px}
  .hero .cta .btn{width:100%}
  .match-card{gap:12px; padding:16px}
  .score-badge{width:54px; height:54px; font-size:1rem}
  .score-badge::after{width:42px; height:42px}
  .lang button{padding:3px 7px}
}
/* zones sûres (encoche/indicateur iPhone) pour les éléments fixes */
@supports(padding:max(0px)){
  .al-asst-btn{bottom:max(22px,env(safe-area-inset-bottom)); right:max(22px,env(safe-area-inset-right))}
  .al-asst-panel{bottom:max(90px,calc(env(safe-area-inset-bottom) + 74px)); right:max(22px,env(safe-area-inset-right))}
  .site-head .wrap{padding-left:max(22px,env(safe-area-inset-left)); padding-right:max(22px,env(safe-area-inset-right))}
}
/* accessibilité : respecte la préférence "réduire les animations" */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important; scroll-behavior:auto!important}
  .tdot{opacity:.6}
  body{background-attachment:scroll}
}