/* =========================================================================
   Petits Bonheurs — Suite parents & futurs parents
   Global design system (shared by every service page)
   Fonts loaded per page: Cormorant Garamond, Marcellus, Quicksand
   ========================================================================= */

:root{
  /* surfaces */
  --bg:#F6F1EC;
  --bg-grad-1:#F7F0F6;
  --bg-grad-2:#EFF1F8;
  --surface:#FFFFFF;
  --surface-2:#FBF7F3;
  --surface-3:#F3EDE6;
  --line:#ECE4DC;
  --line-strong:#E0D6CB;

  /* text */
  --ink:#2E2A3A;
  --ink-soft:#5A5468;
  --muted:#938C9E;
  --on-primary:#FFFFFF;

  /* brand */
  --primary:#8A6BBF;
  --primary-600:#7757Ae;
  --primary-soft:#F1EAFA;
  --gold:#C9A24B;
  --gold-deep:#8C6A2E;
  --gold-soft:#F7EFD9;

  /* accents */
  --fille:#E86FA6;       --fille-soft:#FCE7F1;
  --garcon:#5AA0E0;      --garcon-soft:#E5F0FB;
  --mint:#46B393;        --mint-soft:#E0F4EE;
  --amber:#E0A33D;       --amber-soft:#FBF0DC;
  --danger:#DE6A6A;      --danger-soft:#FBE6E6;
  --sky:#62B6CB;

  /* shape & depth */
  --radius:20px;
  --radius-sm:13px;
  --radius-xs:9px;
  --pill:999px;
  --shadow-sm:0 2px 8px rgba(46,42,58,.06);
  --shadow:0 10px 30px rgba(46,42,58,.09);
  --shadow-lg:0 22px 60px rgba(46,42,58,.16);
  --ring:0 0 0 3px rgba(138,107,191,.25);

  --serif:'Cormorant Garamond',Georgia,serif;
  --display:'Marcellus',Georgia,serif;
  --sans:'Quicksand',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#15121C; --bg-grad-1:#1C1726; --bg-grad-2:#141821;
    --surface:#211B2C; --surface-2:#1B1626; --surface-3:#2A2338;
    --line:#332B42; --line-strong:#3E3550;
    --ink:#F1ECF6; --ink-soft:#C8C0D6; --muted:#9890A8;
    --primary:#A88BD8; --primary-600:#9A7BCF; --primary-soft:#2C2440;
    --gold-soft:#352c1c; --fille-soft:#3a2230; --garcon-soft:#1f2d3c;
    --mint-soft:#16302a; --amber-soft:#332a18; --danger-soft:#3a2222;
    --shadow-sm:0 2px 10px rgba(0,0,0,.4); --shadow:0 12px 34px rgba(0,0,0,.45);
    --shadow-lg:0 24px 64px rgba(0,0,0,.55);
  }
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100vh;
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 12% -8%, var(--bg-grad-1), transparent 55%),
    radial-gradient(1100px 760px at 110% 4%, var(--bg-grad-2), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:8px; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:920px; margin:0 auto; padding:22px 18px 96px; }
.container.narrow{ max-width:660px; }
.container.wide{ max-width:1180px; }

.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:12px;
  padding:12px 16px;
  background:color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line);
}
.topbar__back, .topbar__action{
  flex:0 0 auto; width:42px; height:42px; border-radius:var(--pill);
  display:grid; place-items:center; font-size:19px; color:var(--ink-soft);
  background:var(--surface-2); border:1px solid var(--line); cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s;
}
.topbar__back:hover, .topbar__action:hover{ transform:translateY(-1px); color:var(--primary); border-color:var(--primary); }
.topbar__title{ display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
.topbar__emoji{ font-size:22px; }
.topbar__title h1{ font-family:var(--display); font-weight:400; font-size:1.22rem; margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.01em; }
.topbar__spacer{ flex:1; }

/* ---------- Page head ---------- */
.page-head{ margin:8px 2px 22px; }
.page-head h2{ font-family:var(--serif); font-weight:600; font-size:clamp(1.8rem,5vw,2.6rem);
  margin:0 0 6px; letter-spacing:.01em; }
.page-head p{ margin:0; color:var(--muted); max-width:60ch; }
.eyebrow{ text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; font-weight:600;
  color:var(--primary); margin:0 0 8px; }

/* ---------- Typgraphy helpers ---------- */
.h1{ font-family:var(--serif); font-weight:700; font-size:clamp(2rem,7vw,3.2rem); line-height:1.05; margin:0; }
.h2{ font-family:var(--serif); font-weight:600; font-size:clamp(1.5rem,4vw,2rem); margin:0; }
.h3{ font-family:var(--display); font-weight:400; font-size:1.2rem; margin:0; }
.lead{ font-size:1.1rem; color:var(--ink-soft); }
.muted{ color:var(--muted); }
.tiny{ font-size:.8rem; }
.center{ text-align:center; }
.gold-text{
  background:linear-gradient(120deg,var(--gold-deep),#F4E2A1,var(--gold),#F4E2A1);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
}
.serif{ font-family:var(--serif); }

/* ---------- Cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow-sm);
}
.card.pad-lg{ padding:28px; }
.card.soft{ background:var(--surface-2); }
.card.glass{ background:color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter:blur(10px); }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.card-head h3{ font-family:var(--display); font-weight:400; font-size:1.1rem; margin:0; }

/* ---------- Grid ---------- */
.grid{ display:grid; gap:16px; }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.grid.auto{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
@media (max-width:720px){
  .grid.cols-3,.grid.cols-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4{ grid-template-columns:1fr; }
}

/* ---------- Flex helpers ---------- */
.row{ display:flex; align-items:center; gap:12px; }
.row.wrap{ flex-wrap:wrap; }
.row.top{ align-items:flex-start; }
.col{ display:flex; flex-direction:column; gap:12px; }
.between{ justify-content:space-between; }
.gap-sm{ gap:8px; } .gap-lg{ gap:22px; }
.grow{ flex:1; } .nowrap{ white-space:nowrap; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:600; font-size:.95rem; letter-spacing:.01em;
  padding:.72em 1.3em; border-radius:var(--pill); cursor:pointer;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  min-height:44px; transition:transform .15s ease, box-shadow .25s ease, background .2s, border-color .2s, opacity .2s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn:active{ transform:translateY(0); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-primary{ background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.btn-primary:hover{ background:var(--primary-600); box-shadow:0 10px 24px color-mix(in srgb,var(--primary) 40%,transparent); }
.btn-gold{ background:linear-gradient(120deg,var(--gold-deep),#F4E2A1,var(--gold),#F4E2A1);
  background-size:200% auto; color:#3a2c08; border:none; box-shadow:0 8px 22px rgba(201,162,75,.35); }
.btn-gold:hover{ box-shadow:0 12px 30px rgba(201,162,75,.5); }
.btn-ghost{ background:transparent; border-color:transparent; color:var(--ink-soft); }
.btn-ghost:hover{ background:var(--surface-2); }
.btn-soft{ background:var(--primary-soft); border-color:transparent; color:var(--primary-600); }
.btn-danger{ background:var(--danger-soft); border-color:transparent; color:var(--danger); }
.btn-sm{ padding:.5em .9em; min-height:36px; font-size:.85rem; }
.btn-lg{ padding:.95em 1.8em; min-height:54px; font-size:1.05rem; }
.btn-block{ width:100%; }
.btn-icon{ width:44px; height:44px; padding:0; border-radius:var(--pill); }

/* ---------- Forms ---------- */
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.label{ font-size:.82rem; font-weight:600; letter-spacing:.04em; color:var(--ink-soft); }
.hint{ font-size:.78rem; color:var(--muted); }
.input,.select,.textarea{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:.7em .9em; transition:border-color .2s, box-shadow .2s, background .2s;
}
.input:focus,.select:focus,.textarea:focus{ border-color:var(--primary); box-shadow:var(--ring); background:var(--surface); }
.textarea{ resize:vertical; min-height:96px; line-height:1.5; }
.input-lg{ font-size:1.25rem; padding:.7em .95em; text-align:center; font-family:var(--serif); }

/* segmented choice (e.g. fille / garçon) */
.choice{ display:flex; gap:10px; flex-wrap:wrap; }
.choice__opt{
  flex:1 1 0; min-width:120px; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:center; gap:.5em; text-align:center;
  padding:.85em 1em; border-radius:var(--radius-sm); font-weight:600;
  background:var(--surface-2); border:1.5px solid var(--line); color:var(--ink-soft);
  transition:all .2s ease; min-height:48px;
}
.choice__opt.is-on{ border-color:var(--primary); background:var(--primary-soft); color:var(--primary-600); box-shadow:var(--shadow-sm); }
.choice__opt.fille.is-on{ border-color:var(--fille); background:var(--fille-soft); color:#c0437b; }
.choice__opt.garcon.is-on{ border-color:var(--garcon); background:var(--garcon-soft); color:#2d6fb0; }

/* toggle switch */
.switch{ position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.switch input{ position:absolute; opacity:0; pointer-events:none; }
.switch__track{ width:46px; height:27px; border-radius:var(--pill); background:var(--line-strong);
  transition:background .2s; flex:0 0 auto; }
.switch__track::after{ content:""; position:absolute; top:3px; left:3px; width:21px; height:21px;
  border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:transform .2s; }
.switch input:checked + .switch__track{ background:var(--primary); }
.switch input:checked + .switch__track::after{ transform:translateX(19px); }

/* checkbox row */
.check{ display:flex; align-items:center; gap:12px; cursor:pointer; padding:6px 0; }
.check input{ width:20px; height:20px; accent-color:var(--primary); flex:0 0 auto; }

/* ---------- Badges / chips / pills ---------- */
.badge{ display:inline-flex; align-items:center; gap:.4em; padding:.28em .7em; border-radius:var(--pill);
  font-size:.76rem; font-weight:700; letter-spacing:.02em; background:var(--surface-3); color:var(--ink-soft); }
.badge.primary{ background:var(--primary-soft); color:var(--primary-600); }
.badge.gold{ background:var(--gold-soft); color:var(--gold-deep); }
.badge.fille{ background:var(--fille-soft); color:#c0437b; }
.badge.garcon{ background:var(--garcon-soft); color:#2d6fb0; }
.badge.mint{ background:var(--mint-soft); color:#2c7d65; }
.badge.amber{ background:var(--amber-soft); color:#9a6b18; }
.badge.danger{ background:var(--danger-soft); color:#b34141; }
.chip{ display:inline-flex; align-items:center; gap:.4em; padding:.45em .85em; border-radius:var(--pill);
  background:var(--surface-2); border:1px solid var(--line); font-size:.85rem; font-weight:600;
  color:var(--ink-soft); cursor:pointer; transition:all .18s; }
.chip:hover{ border-color:var(--primary); color:var(--primary); }
.chip.is-on{ background:var(--primary); border-color:var(--primary); color:#fff; }
.dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:var(--muted); }
.dot.fille{ background:var(--fille); } .dot.garcon{ background:var(--garcon); }
.dot.mint{ background:var(--mint); } .dot.amber{ background:var(--amber); } .dot.danger{ background:var(--danger); }

/* ---------- Stats / tiles ---------- */
.stat{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; }
.stat__num{ font-family:var(--serif); font-weight:700; font-size:2rem; line-height:1; }
.stat__label{ font-size:.8rem; color:var(--muted); margin-top:4px; }
.tile{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px;
  display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow-sm); }

/* ---------- Lists ---------- */
.list{ display:flex; flex-direction:column; }
.list-item{ display:flex; align-items:center; gap:14px; padding:14px 4px; border-bottom:1px solid var(--line); }
.list-item:last-child{ border-bottom:none; }
.list-item__title{ font-weight:600; }
.list-item__sub{ font-size:.85rem; color:var(--muted); }
.avatar{ width:44px; height:44px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  font-size:20px; background:var(--surface-3); }
.avatar.lg{ width:64px; height:64px; font-size:30px; }
.icon-badge{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:23px;
  background:var(--primary-soft); flex:0 0 auto; }

/* ---------- Progress ---------- */
.progress{ height:10px; border-radius:var(--pill); background:var(--surface-3); overflow:hidden; }
.progress__bar{ height:100%; border-radius:var(--pill); background:linear-gradient(90deg,var(--primary),var(--gold)); transition:width .5s ease; }
.ring-progress{ --p:50; --size:120px; width:var(--size); height:var(--size); border-radius:50%;
  display:grid; place-items:center; flex:0 0 auto;
  background:conic-gradient(var(--primary) calc(var(--p)*1%), var(--surface-3) 0); }
.ring-progress__inner{ width:calc(var(--size) - 22px); height:calc(var(--size) - 22px); border-radius:50%;
  background:var(--surface); display:grid; place-items:center; text-align:center; }

/* ---------- Tabs ---------- */
.tabs{ display:inline-flex; gap:4px; padding:4px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--pill); }
.tab{ border:none; background:transparent; color:var(--ink-soft); font-weight:600; font-size:.9rem;
  padding:.5em 1.1em; border-radius:var(--pill); cursor:pointer; transition:all .2s; }
.tab.is-on{ background:var(--surface); color:var(--primary); box-shadow:var(--shadow-sm); }

/* ---------- Empty state ---------- */
.empty{ text-align:center; padding:38px 20px; color:var(--muted); }
.empty__emoji{ font-size:42px; margin-bottom:10px; }

/* ---------- Toast ---------- */
.toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(12px);
  background:var(--ink); color:#fff; padding:.75em 1.2em; border-radius:var(--pill);
  box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:all .35s ease; z-index:60; font-weight:600; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- FAB ---------- */
.fab{ position:fixed; right:22px; bottom:26px; width:60px; height:60px; border-radius:50%;
  background:var(--primary); color:#fff; border:none; font-size:28px; cursor:pointer;
  box-shadow:var(--shadow-lg); z-index:40; transition:transform .18s; }
.fab:hover{ transform:scale(1.07); }

/* ---------- Divider ---------- */
.divider{ height:1px; background:var(--line); border:none; margin:18px 0; }
.divider.dashed{ border-top:1px dashed var(--line-strong); height:0; background:none; }

/* ---------- Hero (config result / celebration cards) ---------- */
.hero{ text-align:center; padding:40px 24px; border-radius:var(--radius);
  background:radial-gradient(120% 100% at 50% 0%, var(--gold-soft), var(--surface) 70%);
  border:1px solid var(--line); box-shadow:var(--shadow); }
.hero.fille{ background:radial-gradient(120% 100% at 50% 0%, var(--fille-soft), var(--surface) 72%); }
.hero.garcon{ background:radial-gradient(120% 100% at 50% 0%, var(--garcon-soft), var(--surface) 72%); }

/* ---------- Animations ---------- */
@keyframes pop{ 0%{ transform:scale(.85); opacity:0; } 60%{ transform:scale(1.04); } 100%{ transform:scale(1); opacity:1; } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.anim-pop{ animation:pop .5s cubic-bezier(.2,.9,.25,1) both; }
.anim-up{ animation:fadeUp .6s ease both; }
.float-soft{ animation:floaty 5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.05ms !important; }
}

/* ---------- Utilities ---------- */
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:36px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.full{width:100%}.hide{display:none !important}.rel{position:relative}
.text-fille{color:var(--fille)}.text-garcon{color:var(--garcon)}.text-gold{color:var(--gold-deep)}
.text-primary{color:var(--primary)}.text-mint{color:#2c7d65}.text-danger{color:var(--danger)}

/* =========================================================================
   HUB (index.html) specifics
   ========================================================================= */
.hub-hero{ text-align:center; padding:44px 18px 26px; }
.hub-hero .brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--display);
  font-size:1rem; letter-spacing:.05em; color:var(--gold-deep); margin-bottom:14px; }
.hub-hero h1{ font-family:var(--serif); font-weight:700; font-size:clamp(2.4rem,8vw,4rem); margin:0 0 10px; line-height:1.02; }
.hub-hero p{ color:var(--ink-soft); max-width:54ch; margin:0 auto; font-size:1.08rem; }

.hub-search{ position:relative; max-width:520px; margin:24px auto 6px; }
.hub-search input{ width:100%; padding:.85em 1em .85em 2.8em; font-size:1rem;
  border-radius:var(--pill); border:1px solid var(--line-strong); background:var(--surface); }
.hub-search input:focus{ border-color:var(--primary); box-shadow:var(--ring); outline:none; }
.hub-search .ico{ position:absolute; left:1em; top:50%; transform:translateY(-50%); color:var(--muted); }

.hub-filters{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:16px auto 30px; }

.cat-title{ display:flex; align-items:center; gap:10px; margin:34px 2px 14px; }
.cat-title h2{ font-family:var(--display); font-weight:400; font-size:1.3rem; margin:0; }
.cat-title .line{ flex:1; height:1px; background:var(--line); }
.cat-title .count{ font-size:.8rem; color:var(--muted); }

.service-card{ position:relative; display:flex; flex-direction:column; gap:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px;
  box-shadow:var(--shadow-sm); cursor:pointer; overflow:hidden;
  transition:transform .2s ease, box-shadow .25s ease, border-color .2s; min-height:148px; }
.service-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--primary); }
.service-card .emoji{ font-size:30px; width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  background:var(--surface-2); }
.service-card h3{ font-family:var(--display); font-weight:400; font-size:1.12rem; margin:0; }
.service-card p{ margin:0; font-size:.88rem; color:var(--muted); line-height:1.4; }
.service-card .go{ position:absolute; top:18px; right:18px; color:var(--muted); transition:.2s; }
.service-card:hover .go{ color:var(--primary); transform:translateX(3px); }
.service-card.featured{ background:radial-gradient(140% 120% at 100% 0%, var(--gold-soft), var(--surface) 60%);
  border-color:var(--gold); grid-column:1 / -1; flex-direction:row; align-items:center; min-height:auto; }
.service-card.featured .emoji{ font-size:40px; width:74px; height:74px; }
@media (max-width:560px){ .service-card.featured{ flex-direction:column; align-items:flex-start; } }

.hub-foot{ text-align:center; color:var(--muted); font-size:.82rem; margin-top:48px; }
.mock-note{ display:inline-flex; align-items:center; gap:.5em; font-size:.78rem; color:var(--amber);
  background:var(--amber-soft); padding:.35em .8em; border-radius:var(--pill); font-weight:600; }