/* =====================================================================
   Espace Client Professionnel — Styles scoped (#espace-pro)
   ===================================================================== */
:root{} /* réservé si besoin de vars globales */

#espace-pro{
  --brand:#0C74D4; --brand-dark:#084A96; --brand-light:#EAF3FF;
  --accent:#2FBF71; --text:#0A1A2B; --muted:#5B6773;
  --line:#E6EDF5; --bg:#FFFFFF; --shadow:0 10px 30px rgba(12,116,212,.12);
  --radius:18px;
  color:var(--text); background:var(--bg);
  isolation:isolate; font:400 16px/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
#espace-pro *, #espace-pro *::before, #espace-pro *::after {
	box-sizing: border-box;
	color: #004B7C;
}

/* Container */
#espace-pro .ep-page{ max-width:1120px; margin:auto; padding:clamp(16px,3vw,28px); }

/* Sections / rhythm */
#espace-pro .section{ margin:0!important; padding:clamp(28px,5vw,56px) 0; border-bottom:1px solid var(--line); }
#espace-pro .no-border{ border-bottom:none; }
#espace-pro .section:first-child{ margin-top:0; }

/* Hero */
#espace-pro .hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg,#004b7c 0%,var(--brand-dark) 100%);
	border-radius: calc(var(--radius) + 6px);
	padding: clamp(28px,6vw,72px);
	color: #fff;
	box-shadow: var(--shadow);
}
#espace-pro .hero::after{
  content:""; position:absolute; inset:-20%;
  background:radial-gradient(60% 60% at 10% 10%,rgba(255,255,255,.15),transparent 60%),
			 radial-gradient(50% 50% at 90% 20%,rgba(255,255,255,.12),transparent 60%);
  pointer-events:none;
}
#espace-pro .eyebrow {
	display: inline-block;
	padding: .35rem .7rem;
	border-radius: 999px;
	background: #5ca60d;
	backdrop-filter: blur(4px);
	font-weight: 600;
	letter-spacing: .02em;
	color: #FFFFFF;
}
#espace-pro h1{ margin:.4rem 0 1rem; font-size:clamp(28px,4.3vw,44px); line-height:1.1; }
#espace-pro .subtitle{ font-size:clamp(16px,2.2vw,20px); color:#E9F2FF; max-width:48ch; }

/* CTA */
#espace-pro .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
#espace-pro .btn{ appearance:none; border:none; border-radius:12px; cursor:pointer; font-weight:700; letter-spacing:.01em; display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.2rem; text-decoration:none; white-space:nowrap; }
#espace-pro .btn-primary {
	background: #5ca60d!important;
	color: #FFFFFF!important;
}
#espace-pro .btn-primary:hover{ filter:brightness(.98); }
#espace-pro .btn-outline{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.7); }
#espace-pro .btn-outline:hover{ background:rgba(255,255,255,.08); }

/* Grid & cards */
#espace-pro .grid-2{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(16px,3.5vw,32px); align-items:center; }
#espace-pro .card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(16px,2.5vw,24px); box-shadow:var(--shadow); }
#espace-pro .lede{ font-size:18px; color:var(--muted); }

/* Avantages */
#espace-pro .pill {
	display: inline-block;
	font-weight: 700;
	color: #FFFFFF;
	background: #5ca60d;
	border: 1px solid var(--line);
	padding: .35rem .7rem;
	border-radius: 999px;
	margin-bottom: 12px;
}
#espace-pro .benefits{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:stretch; }
#espace-pro .benefit{ display:flex; gap:.8rem; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; }
#espace-pro .tick{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:#5ca60d; display:grid; place-items:center; color:#fff; font-weight:900; line-height:1; }
#espace-pro .benefit strong {
	display: block;
	color: #004B7C;
}

/* Process */
#espace-pro .steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:10px; }
#espace-pro .step{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; position:relative; }
#espace-pro .num{ width:36px; height:36px; border-radius:50%; background:var(--brand-light); color:var(--brand-dark); display:grid; place-items:center; font-weight:800; margin-bottom:.6rem; border:1px solid var(--line); }
#espace-pro .note{ margin-top:10px; color:#004B7C; }

/* FAQ (<details>) */
#espace-pro .faq{ display:grid; grid-template-columns:1fr; gap:10px; }
#espace-pro details{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; overflow:hidden; box-shadow:none; transition:box-shadow .2s ease; }
#espace-pro summary{ font-weight:700; cursor:pointer; position:relative; padding-right:26px; }
#espace-pro summary::-webkit-details-marker{ display:none; }
#espace-pro summary::marker{ content:''; }
#espace-pro summary::after{ content:'▾'; position:absolute; right:6px; top:0.1rem; transform:rotate(0deg); transition:transform .2s ease; }
#espace-pro details[open]{ box-shadow:var(--shadow); }
#espace-pro details[open] summary::after{ transform:rotate(180deg); }

/* Final CTA */
#espace-pro .final-cta {
	display: grid;
	grid-template-columns: 1.3fr .7fr;
	gap: clamp(16px,3vw,24px);
	align-items: center;
	background: linear-gradient(135deg,#004b7c 0%,var(--brand-dark) 100%);
	border-radius: calc(var(--radius) + 6px);
	padding: clamp(20px,4.8vw,44px);
	color: #fff;
	box-shadow: var(--shadow);
}
#espace-pro .final-cta h2{ font-size:clamp(22px,3.6vw,34px); margin:0; }
#espace-pro .final-cta p{ color:#E9F2FF; margin:.4rem 0 1rem; }

/* Typo / liens utilitaires */
#espace-pro h1,#espace-pro h2,#espace-pro h3,#espace-pro h4{ margin-top:0; color:#004B7C; font-weight:800; letter-spacing:.01em; }
#espace-pro a{ color:inherit; text-decoration:none; }
#espace-pro a:hover{ opacity:.95; }
#espace-pro .card p{ margin:.3rem 0; }
#espace-pro .center{ text-align:center; }
#espace-pro .muted{ color:#004B7C; }
#espace-pro .spacer{ height:10px; }

/* Anchors offset (header sticky) */
#espace-pro [id]{ scroll-margin-top:var(--anchor-offset,104px); }
#espace-pro .hero{ scroll-margin-top:var(--anchor-offset,120px); }

/* Responsive */
@media (max-width:900px){
  #espace-pro .grid-2,
  #espace-pro .final-cta,
  #espace-pro .steps{ grid-template-columns:1fr; }
  #espace-pro .benefits{ grid-template-columns:1fr; }
}

/* FAQ fallback (liens + div) */
#espace-pro .js-faq { display:grid; grid-template-columns:1fr; gap:10px; }
#espace-pro .faq-item { border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:var(--shadow); overflow:hidden; }
#espace-pro .faq-q {
  display:block; width:100%; text-align:left; font-weight:700; cursor:pointer;
  padding:14px 38px 14px 14px; text-decoration:none; color:inherit; position:relative;
}
#espace-pro .faq-q::after { content:'▾'; position:absolute; right:10px; top:12px; transition:transform .2s ease; }
#espace-pro .faq-item.open .faq-q::after { transform:rotate(180deg); }
#espace-pro .faq-a { display:none; padding:0 14px 14px; }
#espace-pro .faq-item.open .faq-a { display:block; }

@media (max-width:600px){
  #espace-pro .hero{ padding:24px 16px; }
}

@media (min-width:1200px){
  #espace-pro .benefits{ gap:18px; }
}

#espace-pro .btn:focus-visible{
  outline:3px solid rgba(12,116,212,.35);
  outline-offset:2px;
}


#espace-pro .hero h2 {
	margin-top: 0;
	color: inherit;
	font-weight: 800;
	letter-spacing: .01em;
}
#espace-pro .hero h2 {
	margin: .4rem 0 1rem;
	font-size: clamp(28px, 4.3vw, 44px);
	line-height: 1.1;
}

body#cms.cms-id-7 header.page-header {
	position: absolute;
	left: -9999999px;
}

#espace-pro .final-cta h2 {
	color: #FFFFFF;
}