.cercle-page {
  /* Colours are drawn exclusively from the SM.PRIVÉ brand palette (global
     vars in brand.css). Neutrals are white + marine-with-alpha. */
  --navy-900: var(--marine);
  --navy-700: var(--marine);        /* legacy alias — hover handled via filter */
  --navy-500: var(--marine);
  --navy-300: rgba(22,61,108,.45);  /* muted marine — comparison dashes */
  --navy-100: rgba(22,61,108,.14);  /* faint marine — hairlines */
  --coral:    var(--orange);
  --coral-2:  var(--orange);
  --cyan-500: var(--cyan);
  --cyan-200: var(--ciel);
  --gold:     var(--orange);

  --ink:   var(--marine);
  --ink-2: rgba(22,61,108,.72);     /* marine, muted — body copy */
  --ink-3: rgba(22,61,108,.55);     /* marine, faint — small print */

  --cream:   #ffffff;               /* page background */
  --cream-2: var(--nuage);          /* alternate section background */
  --bone:    #ffffff;               /* cards / panels */
  --hair:    rgba(22,61,108,.12);   /* hairline borders */
  --hair-2:  rgba(22,61,108,.14);
  --radius:4px; --radius-lg:14px;
  --shadow-card:0 1px 0 rgba(22,61,108,0.04), 0 12px 30px -16px rgba(22,61,108,0.18);
  --maxw:1240px;
  --serif:"Fraunces", Georgia, serif;
  --ui:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

/* Base */
.cercle-page { box-sizing:border-box; margin:0; padding:0; font-family:"Plus Jakarta Sans","Helvetica Neue",Helvetica,Arial,sans-serif; background:var(--cream); color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.5; font-size:16px; }
.cercle-page *, .cercle-page *::before, .cercle-page *::after { box-sizing:border-box; }
.cercle-page img { max-width:100%; display:block; }
.cercle-page .container { max-width:var(--maxw); margin:0 auto; padding:0 32px; }
/* Offset in-page anchor jumps for the 74px sticky site header */
.cercle-page #promesse, .cercle-page #forfaits, .cercle-page #contact, .cercle-page #contact-form { scroll-margin-top:90px; }

/* Eyebrow / buttons */
.cercle-page .eyebrow { font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--coral-2); }
.cercle-page .eyebrow--light { color:rgba(255,255,255,.6); }
.cercle-page .btn { display:inline-flex; align-items:center; gap:10px; padding:14px 22px; background:var(--navy-900); color:#fff; font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; border-radius:var(--radius); border:1px solid var(--navy-900); cursor:pointer; text-decoration:none; transition:background .18s, transform .18s; }
.cercle-page .btn:hover { background:var(--marine); filter:brightness(.9); }
.cercle-page .btn--ghost { background:transparent; color:var(--navy-900); }
.cercle-page .btn--ghost:hover { background:rgba(22,61,108,.07); filter:none; }
.cercle-page .btn .arr { display:inline-block; transition:transform .2s; }
.cercle-page .btn:hover .arr { transform:translateX(3px); }

/* Crumb / section */
.cercle-page .crumb { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); padding:24px 0 0; }
.cercle-page .crumb a { color:inherit; text-decoration:none; }
.cercle-page .crumb a:hover { color:var(--navy-900); }
.cercle-page .crumb .sep { opacity:.5; padding:0 10px; }
.cercle-page .section { padding:110px 0; }
.cercle-page .section__head { display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:end; margin-bottom:56px; }
.cercle-page .section__head h2 { font-family:var(--serif); font-weight:500; font-size:clamp(36px,4.2vw,56px); line-height:1.02; letter-spacing:-.015em; color:var(--navy-900); margin:14px 0 0; }
.cercle-page .section__head p { color:var(--ink-2); font-size:16px; line-height:1.6; margin:0; }

/* Hero */
.cercle-page .mhero { padding:36px 0 88px; }
.cercle-page .mhero__grid { display:grid; grid-template-columns:1.15fr .85fr; gap:72px; align-items:center; margin-top:28px; }
.cercle-page .mhero .eyebrow { display:block; }
.cercle-page .mhero h1 { font-family:var(--serif); font-weight:500; font-size:clamp(56px,7vw,104px); line-height:.96; letter-spacing:-.02em; color:var(--navy-900); margin:18px 0 0; display:flex; align-items:flex-end; }
.cercle-page .mhero__dot { width:14px; height:14px; border-radius:50%; background:var(--coral); margin:0 0 18px 14px; flex-shrink:0; }
.cercle-page .mhero__intro { font-size:18px; line-height:1.6; color:var(--ink-2); max-width:520px; margin:24px 0 34px; }
.cercle-page .mhero__cta { display:flex; gap:12px; flex-wrap:wrap; }
.cercle-page .mhero__panel { background:var(--navy-900); color:#fff; border-radius:var(--radius-lg); padding:38px 34px; box-shadow:var(--shadow-card); }
.cercle-page .mhero__panel-label { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55); font-weight:600; margin-bottom:22px; }
.cercle-page .mhero__teaser { list-style:none; margin:0; padding:0; }
.cercle-page .mhero__teaser li { display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:14px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.cercle-page .mhero__teaser li:first-child { padding-top:0; }
.cercle-page .mhero__teaser-dot { width:9px; height:9px; border-radius:50%; align-self:center; }
.cercle-page .mhero__teaser-dot--cyan { background:var(--cyan-500); }
.cercle-page .mhero__teaser-dot--gold { background:var(--gold); }
.cercle-page .mhero__teaser-dot--navy { background:#fff; }
.cercle-page .mhero__teaser-name { font-family:var(--serif); font-size:26px; line-height:1; }
.cercle-page .mhero__teaser-price { font-size:18px; font-weight:600; font-variant-numeric:tabular-nums; }
.cercle-page .mhero__teaser-price small { font-weight:400; font-size:12px; color:rgba(255,255,255,.55); margin-left:4px; }
.cercle-page .mhero__panel-note { font-size:13px; line-height:1.5; color:rgba(255,255,255,.6); margin:22px 0 0; }

/* Promise */
.cercle-page .promise { background:var(--cream-2); }
.cercle-page .promise__head { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; margin-bottom:64px; }
.cercle-page .promise__head h2 { font-family:var(--serif); font-weight:500; font-size:clamp(36px,4.4vw,58px); line-height:1; letter-spacing:-.015em; color:var(--navy-900); margin:14px 0 0; }
.cercle-page .promise__intro { font-size:16px; line-height:1.7; color:var(--ink-2); margin:0; padding-top:52px; }
.cercle-page .promise__benefits { display:grid; grid-template-columns:repeat(2,1fr); gap:14px 56px; }
.cercle-page .benefit { display:flex; gap:18px; align-items:flex-start; padding:22px 0; border-top:1px solid var(--hair-2); }
.cercle-page .benefit__icon { flex-shrink:0; width:44px; height:44px; border-radius:50%; border:1px solid var(--hair-2); display:grid; place-items:center; color:var(--navy-700); background:var(--bone); }
.cercle-page .benefit__icon svg { width:20px; height:20px; }
.cercle-page .benefit__title { font-size:17px; font-weight:600; color:var(--navy-900); margin:2px 0 6px; letter-spacing:-.005em; }
.cercle-page .benefit__desc { font-size:14px; line-height:1.5; color:var(--ink-2); margin:0; }

/* Tiers */
.cercle-page .tiers__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.cercle-page .tier { background:var(--bone); border:1px solid var(--hair); border-radius:var(--radius-lg); padding:34px 30px; display:flex; flex-direction:column; height:100%; }
.cercle-page .tier__head { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.cercle-page .tier__dot { width:11px; height:11px; border-radius:50%; flex:none; }
.cercle-page .tier__dot--cyan { background:var(--cyan-500); }
.cercle-page .tier__dot--gold { background:var(--gold); }
.cercle-page .tier__dot--navy { background:var(--navy-900); }
.cercle-page .tier__name { font-family:var(--serif); font-weight:500; font-size:34px; line-height:1; letter-spacing:-.01em; margin:0; }
.cercle-page .tier__subtitle { font-size:13px; color:var(--ink-3); font-style:italic; margin:-14px 0 0; min-height:19px; }
.cercle-page .tier__label { display:inline-block; align-self:flex-start; font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--gold); margin:14px 0 -6px; min-height:16px; }
.cercle-page .tier__meta-spacer { display:block; height:39px; }
.cercle-page .tier__price { display:flex; align-items:baseline; gap:8px; padding-top:22px; border-top:1px solid var(--hair); }
.cercle-page .tier__price--top { padding-top:0; border-top:none; margin-top:4px; }
.cercle-page .tier__price-amt { font-family:var(--serif); font-weight:600; font-size:40px; line-height:1; color:var(--navy-900); }
.cercle-page .tier__price-period { font-size:13px; color:var(--ink-3); }
.cercle-page .tier__price-note { font-size:12.5px; line-height:1.5; color:var(--ink-3); margin:8px 0 24px; min-height:36px; }
.cercle-page .tier__addon { display:flex; flex-direction:column; gap:2px; margin:10px 0 4px; padding:12px 16px; border-radius:12px; background:rgba(237,141,115,.12); }
.cercle-page .tier__addon-amt { font-family:var(--serif); font-weight:600; font-size:21px; color:var(--coral-2); }
.cercle-page .tier__addon-note { font-family:var(--ui); font-size:12px; color:var(--ink-3); }
.cercle-page .tier__features { list-style:none; margin:24px 0 28px; padding:24px 0 0; border-top:1px solid var(--hair); display:flex; flex-direction:column; gap:14px; flex-grow:1; }
.cercle-page .tier__features li { display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.45; color:var(--ink-2); }
.cercle-page .tier__check { flex-shrink:0; width:18px; height:18px; display:grid; place-items:center; margin-top:1px; color:var(--navy-500); }
.cercle-page .tier__addon-amt ~ .tier__addon-amt { margin-top:8px; }
.cercle-page .tier__cta { width:100%; justify-content:center; }

/* Featured tier ("Le Cercle") — dark card */
.cercle-page .tier--featured { background:var(--navy-900); border-color:var(--navy-900); color:#fff; }
.cercle-page .tier--featured .tier__name { color:#fff; }
.cercle-page .tier--featured .tier__subtitle { color:rgba(255,255,255,.65); }
.cercle-page .tier--featured .tier__label { color:var(--cyan-200); }
.cercle-page .tier--featured .tier__price-amt { color:#fff; }
.cercle-page .tier--featured .tier__price-period { color:rgba(255,255,255,.6); }
.cercle-page .tier--featured .tier__price-note { color:rgba(255,255,255,.6); }
.cercle-page .tier--featured .tier__addon { background:rgba(255,255,255,.12); }
.cercle-page .tier--featured .tier__addon-amt { color:#fff; }
.cercle-page .tier--featured .tier__addon-note { color:rgba(255,255,255,.7); }
.cercle-page .tier--featured .tier__features { border-top-color:rgba(255,255,255,.16); }
.cercle-page .tier--featured .tier__features li { color:rgba(255,255,255,.85); }
.cercle-page .tier--featured .tier__check { color:rgba(255,255,255,.7); }
.cercle-page .tier--featured .tier__cta { background:#fff; color:var(--navy-900); border-color:#fff; }
.cercle-page .tier--featured .tier__cta:hover { background:var(--cyan-200); border-color:var(--cyan-200); filter:none; }

/* Member rate comparison */
.cercle-page .mrates { margin-top:28px; background:var(--navy-900); border-radius:var(--radius-lg); padding:30px 36px; color:#fff; }
.cercle-page .mrates__label { font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--cyan-200); margin-bottom:8px; }
.cercle-page .mrates__intro { margin:0 0 8px; font-size:14px; color:rgba(255,255,255,.7); line-height:1.5; }
.cercle-page .mrates__section { background:rgba(255,255,255,.06); color:#fff; font-family:var(--serif); font-weight:600; font-size:18px; border-radius:10px; padding:14px 20px; margin:18px 0 14px; }
.cercle-page .mrates__cols { display:grid; grid-template-columns:1fr auto auto; gap:36px; padding:10px 0 4px; }
.cercle-page .mrates__cols--3 { grid-template-columns:1fr 90px 120px 100px; gap:20px; }
.cercle-page .mrates__cols span { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:600; text-align:right; }
.cercle-page .mrates__cols--3 span:not(:first-child) { text-align:right; }
.cercle-page .mrates__cols span small { display:block; font-size:13px; letter-spacing:0; text-transform:none; color:rgba(255,255,255,.85); font-weight:700; margin-top:2px; }
.cercle-page .mrates__row { display:grid; grid-template-columns:1fr auto auto; gap:36px; align-items:baseline; padding:14px 0; border-top:1px solid rgba(255,255,255,.12); }
.cercle-page .mrates__row--3 { grid-template-columns:1fr 90px 120px 100px; gap:20px; }
.cercle-page .mrates__name { font-size:16px; color:rgba(255,255,255,.92); }
.cercle-page .mrates__was { color:rgba(255,255,255,.45); font-size:15px; text-align:right; font-variant-numeric:tabular-nums; }
.cercle-page .mrates__now { font-size:20px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; text-align:right; min-width:64px; }
.cercle-page .mrates__note { margin:14px 0 0; font-size:12px; color:rgba(255,255,255,.55); line-height:1.5; }

/* Member rates: 2-column variant (regular vs member) */
.cercle-page .mrates__cols--3.mrates--2v, .cercle-page .mrates__row--3.mrates--2v { grid-template-columns:1fr 160px 160px; gap:20px; }
.cercle-page .mrates--2v .mrates__was { text-decoration:none; color:rgba(255,255,255,.6); font-size:16px; }

/* Plan comparison grid (light card) */
.cercle-page .mcmp { margin-top:34px; background:#fff; border:1px solid var(--hair); color:var(--navy-900); }
.cercle-page .mcmp .mrates__label { color:var(--coral); }
.cercle-page .mcmp .mrates__intro { color:var(--ink-3); }
.cercle-page .mcmp .mrates__section { background:var(--cream-2); color:var(--navy-900); }
.cercle-page .mcmp .mrates__note { color:var(--ink-3); }
.cercle-page .mcmp__grid { display:block; }
.cercle-page .mcmp__head, .cercle-page .mcmp__row { display:grid; grid-template-columns:1fr 155px 155px 155px; gap:16px; align-items:center; }
.cercle-page .mcmp__head { padding:6px 0 14px; border-bottom:1px solid var(--navy-100); }
.cercle-page .mcmp__plan { text-align:center; font-family:var(--serif); font-size:17px; font-weight:600; color:var(--navy-900); border-radius:10px 10px 0 0; padding:10px 6px 8px; }
.cercle-page .mcmp__plan small { display:block; margin-top:3px; font-family:var(--ui); font-size:12.5px; font-weight:500; color:var(--ink-3); }
.cercle-page .mcmp__plan--feat { background:rgba(237,141,115,.1); }
.cercle-page .mcmp__row { padding:13px 0; border-bottom:1px solid var(--hair); }
.cercle-page .mcmp__name { font-size:14.5px; color:var(--navy-900); line-height:1.4; }
.cercle-page .mcmp__v { text-align:center; font-size:13.5px; font-weight:600; color:var(--navy-900); line-height:1.35; padding:6px 6px; border-radius:6px; display:flex; align-items:center; justify-content:center; }
.cercle-page .mcmp__v--feat { background:rgba(237,141,115,.07); }
.cercle-page .mcmp__tick { color:var(--cyan-500); }
.cercle-page .mcmp__v--feat .mcmp__tick { color:var(--coral); }
.cercle-page .mcmp__no { color:var(--navy-300); }

/* Mobile plan switcher (tabs) — hidden on desktop */
.cercle-page .mcmp__tabs { display:none; gap:8px; margin:4px 0 10px; }
.cercle-page .mcmp__tab { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 6px; border:1px solid var(--hair); border-radius:10px; background:#fff; color:var(--ink-3); font-family:var(--ui); cursor:pointer; transition:background .15s, border-color .15s; }
.cercle-page .mcmp__tab-name { font-family:var(--serif); font-size:15px; font-weight:600; color:var(--navy-900); line-height:1.1; }
.cercle-page .mcmp__tab small { font-size:11px; font-weight:600; color:var(--ink-3); }
.cercle-page .mcmp__tab.is-active { background:var(--navy-900); border-color:var(--navy-900); }
.cercle-page .mcmp__tab.is-active .mcmp__tab-name { color:#fff; }
.cercle-page .mcmp__tab.is-active small { color:rgba(255,255,255,.72); }
.cercle-page .mcmp__tab--feat.is-active { background:var(--coral); border-color:var(--coral); }

@media (max-width:820px){
  .cercle-page .mcmp__tabs { display:flex; }
  .cercle-page .mcmp__head { display:none; }
  .cercle-page .mcmp__row { grid-template-columns:1fr auto; gap:6px 14px; padding:14px 0; align-items:center; }
  .cercle-page .mcmp__name { grid-column:auto; }
  .cercle-page .mcmp__v { justify-content:flex-end; text-align:right; background:none; padding:0; }
  /* Show only the active plan's column */
  .cercle-page .mcmp[data-active="0"] .mcmp__v[data-idx="1"],
  .cercle-page .mcmp[data-active="0"] .mcmp__v[data-idx="2"],
  .cercle-page .mcmp[data-active="1"] .mcmp__v[data-idx="0"],
  .cercle-page .mcmp[data-active="1"] .mcmp__v[data-idx="2"],
  .cercle-page .mcmp[data-active="2"] .mcmp__v[data-idx="0"],
  .cercle-page .mcmp[data-active="2"] .mcmp__v[data-idx="1"] { display:none; }
}
@media (max-width:720px){
  .cercle-page .mrates { padding:24px 20px; }
  .cercle-page .mrates__cols--3 { display:none; }
  /* 2-value member rates: name on its own line, then two labelled price columns */
  .cercle-page .mrates--2v.mrates__row--3 { grid-template-columns:1fr 1fr; column-gap:16px; row-gap:4px; align-items:start; padding:18px 0; }
  .cercle-page .mrates--2v .mrates__name { grid-column:1/-1; font-weight:600; margin-bottom:8px; }
  .cercle-page .mrates--2v .mrates__was { text-align:left; font-size:19px; color:rgba(255,255,255,.7); }
  .cercle-page .mrates--2v .mrates__now { text-align:right; font-size:19px; }
  .cercle-page .mrates--2v .mrates__was::before,
  .cercle-page .mrates--2v .mrates__now::before { display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,.5); margin-bottom:4px; }
  .cercle-page .mrates--2v .mrates__was::before { content:'Non membre'; }
  .cercle-page .mrates--2v .mrates__now::before { content:'Tarif membre'; }
  html[lang^="en"] .cercle-page .mrates--2v .mrates__was::before { content:'Non-member'; }
  html[lang^="en"] .cercle-page .mrates--2v .mrates__now::before { content:'Member rate'; }
}

/* Final CTA */
.cercle-page .mcta { background:var(--navy-900); color:#fff; }
.cercle-page .mcta__inner { display:grid; grid-template-columns:1.3fr 1fr; gap:64px; align-items:center; padding:92px 0; }
.cercle-page .mcta h2 { font-family:var(--serif); font-weight:500; font-size:clamp(34px,4vw,54px); line-height:1.04; letter-spacing:-.015em; margin:14px 0 0; color:#fff; }
.cercle-page .mcta h2 em { font-style:italic; color:var(--cyan-200); }
.cercle-page .mcta__copy p { color:rgba(255,255,255,.7); font-size:16px; line-height:1.6; margin:18px 0 0; max-width:440px; }
.cercle-page .mcta__contact { margin:0; display:flex; flex-direction:column; gap:4px; }
.cercle-page .mcta__contact div { padding:16px 0; border-bottom:1px solid rgba(255,255,255,.14); }
.cercle-page .mcta__contact div:last-child { border-bottom:0; }
.cercle-page .mcta__contact dt { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:600; margin-bottom:6px; }
.cercle-page .mcta__contact dd { margin:0; font-size:22px; font-family:var(--serif); color:#fff; }
.cercle-page .mcta__contact dd a { color:#fff; text-decoration:none; transition:color .15s; }
.cercle-page .mcta__contact dd a:hover { color:var(--cyan-200); }

/* Contact form */
.cercle-page .mcta__form { display:flex; flex-direction:column; gap:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-lg); padding:30px 28px; }
.cercle-page .mcta__field { display:flex; flex-direction:column; gap:6px; }
.cercle-page .mcta__field label { font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,.6); }
.cercle-page .mcta__form input, .cercle-page .mcta__form select, .cercle-page .mcta__form textarea { width:100%; padding:12px 14px; border-radius:8px; border:1px solid rgba(255,255,255,.18); background:#fff; color:var(--ink-2); font-family:var(--ui); font-size:15px; line-height:1.4; }
.cercle-page .mcta__form input:focus, .cercle-page .mcta__form select:focus, .cercle-page .mcta__form textarea:focus { outline:none; border-color:var(--cyan-500); box-shadow:0 0 0 3px rgba(121,186,215,.3); }
.cercle-page .mcta__form textarea { resize:vertical; min-height:96px; }
.cercle-page .mcta__submit { margin-top:6px; align-self:flex-start; background:#fff; color:var(--navy-900); border-color:#fff; }
.cercle-page .mcta__submit:hover { background:var(--cyan-200); border-color:var(--cyan-200); }
.cercle-page .mcta__flash { border-radius:10px; padding:14px 20px; margin-bottom:8px; font-family:var(--ui); font-size:15px; line-height:1.5; }
.cercle-page .mcta__flash--ok { background:rgba(121,186,215,.16); color:#fff; border:1px solid rgba(121,186,215,.55); }
.cercle-page .mcta__flash--err { background:rgba(237,141,115,.16); color:#fff; border:1px solid rgba(237,141,115,.55); }

@media (max-width:1024px){
  .cercle-page .mhero__grid, .cercle-page .promise__head, .cercle-page .promise__benefits, .cercle-page .mcta__inner, .cercle-page .section__head { grid-template-columns:1fr; gap:40px; }
  .cercle-page .promise__intro { padding-top:0; }
  .cercle-page .tiers__grid { grid-template-columns:1fr; }
  .cercle-page .promise__benefits { gap:0; }
}
@media (max-width:560px){
  .cercle-page .container { padding:0 18px; }
  .cercle-page .section { padding:64px 0; }
}
