:root{
  --s:#bf6759;
  --e:#f2dc7e;
  --r:#6497c3;
  --u:#64b09d;
  --m:#a67cc0;
  --radius:28px;
  --bg:#f7f8fb;
  --bg2:#eef1f6;
  --panel:rgba(255,255,255,.78);
  --panel2:rgba(255,255,255,.92);
  --line:rgba(31,41,55,.12);
  --text:#182033;
  --muted:rgba(24,32,51,.70);
  --soft:rgba(24,32,51,.52);
  --shadow:0 24px 70px rgba(31,41,55,.12);
}
*{
  box-sizing:border-box;
}
html{
  scroll-behavior:smooth;
}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  color:var(--text);
  background:radial-gradient(circle at 8% 4%, rgba(191,103,89,.12), transparent 30%),
    radial-gradient(circle at 88% 10%, rgba(100,151,195,.16), transparent 34%),
    radial-gradient(circle at 74% 84%, rgba(166,124,192,.12), transparent 32%),
    linear-gradient(135deg,#ffffff 0%,#f7f8fb 42%,#edf1f7 100%);
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-size:44px 44px;
  z-index:-1;
  background-image:linear-gradient(rgba(31,41,55,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,41,55,.035) 1px, transparent 1px);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.42), transparent 74%);
}
a{
  color:inherit;
  text-decoration:none;
}

.wrap{
  width:min(1180px, calc(100% - 34px));
  margin:0 auto;
}
.nav{
  position:sticky;
  top:14px;
  z-index:50;
  margin-top:14px;
  margin-bottom:-30px;
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 14px 12px 18px;
  border:1px solid var(--line);
  backdrop-filter:blur(22px);
  border-radius:999px;
  box-shadow:0 12px 35px rgba(0,0,0,.22);
  background:rgba(255,255,255,.78);
}
.brand{
  display:flex;
  align-items:center;
  gap:11px;
  font-weight:800;
  letter-spacing:-.04em;
  font-size:1.05rem;
}
.brand-mark{
  width:38px;
  height:38px;
  border-radius:14px;
  background:conic-gradient(from 210deg,var(--s),var(--e),var(--r),var(--u),var(--m),var(--s));
  box-shadow:0 0 26px rgba(100,151,195,.32);
  position:relative;
}
.brand-mark:after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:10px;
  background:#fff;
}
.serum span:nth-child(1){
  color:var(--s);
}
.serum span:nth-child(2){
  color:var(--e);
}
.serum span:nth-child(3){
  color:var(--r);
}
.serum span:nth-child(4){
  color:var(--u);
}
.serum span:nth-child(5){
  color:var(--m);
}
.nav-right{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
}
.nav-links{
  display:flex;
  align-items:center;
  font-size:.92rem;
  gap:18px;
  color:var(--muted);
}
.nav-links a{
  transition:.2s ease;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.nav-links a:hover{
  color:var(--text);
}
.nav-cta{
  padding:10px 16px;
  border-radius:999px;
  background:white;
  color:#080b18;
  font-weight:800;
  font-size:.9rem;
  box-shadow:0 10px 28px rgba(255,255,255,.12);
}
.hero{
  padding:82px 0 56px;
  position:relative;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:38px;
  align-items:center;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:var(--muted);
  font-weight:700;
  font-size:.88rem;
  margin-bottom:22px;
}
.dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--u);
  box-shadow:0 0 18px var(--u);
}
h1{
  font-size:clamp(3rem, 7vw, 6.8rem);
  line-height:.88;
  margin:0 0 24px;
  letter-spacing:-.085em;
}
.gradient-text{
  background:linear-gradient(90deg,#182033 0%,#6497c3 46%,#a67cc0 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.lead{
  font-size:clamp(1.08rem, 1.8vw, 1.38rem);
  line-height:1.55;
  color:var(--muted);
  max-width:660px;
  margin:0 0 30px;
  text-align:justify;
}
.actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:30px;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:18px;
  padding:15px 19px;
  font-weight:850;
  border:1px solid var(--line);
  transition:.22s ease;
}
.btn-primary{
  background:linear-gradient(135deg,#182033,#304052);
  color:white;
  box-shadow:0 18px 46px rgba(24,32,51,.16);
}
.btn-secondary{
  background:rgba(255,255,255,.075);
  color:white;
}
.btn:hover{
  transform:translateY(-2px);
}
.proof{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:var(--soft);
  font-size:.9rem;
}
.proof b{
  color:white;
}
.chip{
  border:1px solid var(--line);
  background:rgba(255,255,255,.055);
  padding:8px 11px;
  border-radius:999px;
}
.app-card{
  position:relative;
  border:1px solid var(--line);
  border-radius:38px;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055));
  backdrop-filter:blur(26px);
  box-shadow:var(--shadow);
  overflow:hidden;
  padding:18px;
}
.app-card:before{
  content:"";
  position:absolute;
  inset:-1px;
  background:radial-gradient(circle at 30% 0,rgba(242,220,126,.28),transparent 30%),radial-gradient(circle at 80% 10%,rgba(100,176,157,.26),transparent 28%);
  pointer-events:none;
}
.phone{
  position:relative;
  z-index:1;
  border-radius:30px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  min-height:600px;
  background:#ffffff;
  border-color:var(--line);
}
.phone-top{
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  border-bottom:1px solid rgba(255,255,255,.09);
  background:rgba(247,248,251,.82);
  border-bottom-color:var(--line);
}
.mini-title{
  font-weight:850;
}
.live{
  font-size:.78rem;
  color:var(--u);
  font-weight:800;
}
.lowpoly{
  height:315px;
  position:relative;
  overflow:hidden;
  background:#eef2f7;
}
.lowpoly svg{
  width:100%;
  height:100%;
  display:block;
}
.profile-panel{
  padding:19px;
  display:grid;
  gap:13px;
}
.score-row{
  display:grid;
  grid-template-columns:72px 1fr 46px;
  gap:10px;
  align-items:center;
  font-size:.86rem;
  color:var(--muted);
}
.bar{
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(31,41,55,.10);
}
.bar i{
  display:block;
  height:100%;
  border-radius:999px;
}
.sbg{
  background:var(--s);
}
.ebg{
  background:var(--e);
}
.rbg{
  background:var(--r);
}
.ubg{
  background:var(--u);
}
.mbg{
  background:var(--m);
}
.insight{
  margin-top:6px;
  padding:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.055);
  border-radius:22px;
  color:var(--muted);
  line-height:1.45;
}
.insight b{
  color:white;
}
section{
  padding:38px 0;
}
.section-head{
  display:flex;
  justify-content:space-between;
  gap:22px;
  align-items:end;
  margin-bottom:24px;
}
.section-head h2{
  font-size:clamp(2rem,4vw,4.2rem);
  line-height:.95;
  letter-spacing:-.065em;
  margin:0;
  max-width:760px;
}
.section-head p{
  max-width:380px;
  color:var(--muted);
  line-height:1.55;
  margin:0;
}
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.065);
  backdrop-filter:blur(18px);
  padding:24px;
  min-height:250px;
  box-shadow:0 18px 48px rgba(0,0,0,.18);
  position:relative;
  overflow:hidden;
}
.card:after{
  content:"";
  position:absolute;
  right:-60px;
  top:-60px;
  width:150px;
  height:150px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
}
.icon{
  width:auto;
  height:50px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-weight:950;
  margin-bottom:26px;
  color:#182033;
}
.card h3{
  font-size:1.36rem;
  margin:0 0 12px;
  letter-spacing:-.035em;
}
.card p{
  color:var(--muted);
  line-height:1.55;
  margin:0;
}
.split{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:18px;
  align-items:stretch;
}
.visual-tile{
  border:1px solid var(--line);
  border-radius:34px;
  overflow:hidden;
  background:rgba(255,255,255,.065);
  min-height:560px;
  box-shadow:var(--shadow);
}
.visual-tile svg{
  width:100%;
  height:100%;
  display:block;
}
.feature-list{
  display:grid;
  gap:14px;
}
.feature{
  border:1px solid var(--line);
  border-radius:26px;
  padding:22px 22px 2px 22px;
  background:rgba(255,255,255,.065);
  text-align:justify;
}
.feature strong{
  display:block;
  font-size:1.16rem;
  margin-bottom:8px;
}
.feature span{
  color:var(--muted);
  line-height:1.5;
}
.domains{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}
.domain{
  border:1px solid var(--line);
  border-radius:24px;
  padding:18px;
  background:rgba(255,255,255,.06);
  min-height:155px;
}
.domain small{
  color:var(--muted);
}
.domain h3{
  margin:14px 0 8px;
  font-size:1.05rem;
}
.domain p{
  margin:0;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.45;
}
.stripe{
  height:5px;
  border-radius:999px;
  margin-bottom:14px;
}
.cta{
  padding:76px 0 92px;
}
.cta-box{
  border:1px solid var(--line);
  border-radius:42px;
  background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.055));
  box-shadow:var(--shadow);
  padding:46px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-box:before{
  content:"";
  position:absolute;
  inset:auto -20% -60% -20%;
  height:300px;
  background:radial-gradient(circle,rgba(100,151,195,.35),transparent 62%);
}
.cta-box h2{
  position:relative;
  margin:0 auto 18px;
  font-size:clamp(2.2rem,5vw,5.2rem);
  letter-spacing:-.075em;
  line-height:.92;
  max-width:860px;
}
.cta-box p{
  position:relative;
  color:var(--muted);
  max-width:680px;
  margin:0 auto 28px;
  line-height:1.6;
  font-size:1.08rem;
}
.cta-box .actions{
  position:relative;
  justify-content:center;
  margin:0;
}
footer{
  border-top:1px solid var(--line);
  padding:28px 0 38px;
  color:var(--soft);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-size:.9rem;
}
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:.75s ease;
}
.reveal.visible{
  opacity:1;
  transform:none;
}
.member-link{
  width:46px;
  height:46px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background:conic-gradient(from 180deg,var(--r),var(--u),var(--m),var(--s),var(--r));
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:.22s ease;
  flex:0 0 auto;
  color:#182033;
  border-color:rgba(31,41,55,.12);
  box-shadow:0 12px 30px rgba(31,41,55,.13);
}
.member-link:hover{
  transform:translateY(-2px) scale(1.02);
  filter:saturate(1.08);
}
.member-link:focus-visible{
  outline:2px solid white;
  outline-offset:3px;
}
.member-avatar{
  width:34px;
  height:34px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(8,11,24,.42);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.member-avatar svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:white;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hamburger{
  display:none;
  width:46px;
  height:46px;
  border-radius:10px;
  border:1px solid #304052;
  background:rgba(255,255,255,.08);
  color:white;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.22s ease;
}
.hamburger:hover{
  background:rgba(255,255,255,.14);
}
.hamburger span,.hamburger span:before,.hamburger span:after{
  content:"";
  display:block;
  width:19px;
  height:2px;
  border-radius:999px;
  background:#304052;
  position:relative;
  transition:.25s ease;
}
.hamburger span:before{
  position:absolute;
  top:-7px;
}
.hamburger span:after{
  position:absolute;
  top:7px;
}
.mobile-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.50);
  backdrop-filter:blur(4px);
  z-index:80;
  opacity:0;
  pointer-events:none;
  transition:.28s ease;
}
.mobile-panel{
  position:fixed;
  top:0;
  right:0;
  height:100dvh;
  width:min(88vw,390px);
  z-index:90;
  background:linear-gradient(180deg,rgba(14,18,36,.96),rgba(6,8,18,.98));
  border-left:1px solid var(--line);
  box-shadow:-30px 0 80px rgba(0,0,0,.45);
  transform:translateX(105%);
  transition:.34s cubic-bezier(.22,.8,.22,1);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
body.menu-open{
  overflow:hidden;
}
body.menu-open .mobile-overlay{
  opacity:1;
  pointer-events:auto;
}
body.menu-open .mobile-panel{
  transform:translateX(0);
}
.mobile-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.close-menu{
  width:44px;
  height:44px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.08);
  color:white;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.mobile-menu-links{
  display:grid;
  gap:10px;
  margin-top:10px;
}
.mobile-menu-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:17px 16px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  font-weight:850;
  color:white;
}
.mobile-menu-links a span{
  color:var(--muted);
  font-weight:700;
}
.mobile-member-card{
  margin-top:auto;
  border:1px solid var(--line);
  border-radius:28px;
  padding:18px;
  background:radial-gradient(circle at 15% 0,rgba(100,151,195,.22),transparent 42%),rgba(255,255,255,.065);
}
.mobile-member-card strong{
  display:block;
  font-size:1.15rem;
  margin-bottom:6px;
  letter-spacing:-.025em;
}
.mobile-member-card p{
  margin:0 0 14px;
  color:var(--muted);
  line-height:1.45;
  font-size:.94rem;
}
.mobile-member-card .member-link{
  margin-top:2px;
}
.login-modal{
  position:fixed;
  inset:0;
  z-index:120;
  background:rgba(0,0,0,.56);
  backdrop-filter:blur(8px);
  display:grid;
  place-items:center;
  padding:20px;
  opacity:0;
  pointer-events:none;
  transition:.25s ease;
}
.login-modal.active{
  opacity:1;
  pointer-events:auto;
}
.login-box{
  width:min(100%,430px);
  border:1px solid var(--line);
  border-radius:32px;
  background:linear-gradient(180deg,rgba(18,24,48,.98),rgba(7,10,22,.98));
  box-shadow:0 32px 90px rgba(0,0,0,.55);
  padding:30px;
  position:relative;
  overflow:hidden;
}
.login-box:before{
  content:"";
  position:absolute;
  inset:-80px -80px auto auto;
  width:210px;
  height:210px;
  border-radius:50%;
  background:rgba(100,151,195,.22);
  filter:blur(2px);
}
.login-box h2{
  position:relative;
  margin:0 0 8px;
  font-size:2.1rem;
  letter-spacing:-.055em;
  color:white;
}
.login-box p{
  position:relative;
  margin:0 0 22px;
  color:white;
  line-height:1.45;
}
.login-box input{
  position:relative;
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.07);
  color:white;
  border-radius:18px;
  padding:15px 16px;
  margin-bottom:12px;
  font-size:1rem;
  outline:none;
}
.login-box input:focus{
  border-color:rgba(255,255,255,.35);
  background:rgba(255,255,255,.095);
}
.login-box button[type="submit"]{
  position:relative;
  width:100%;
  border:0;
  border-radius:18px;
  padding:15px 16px;
  background:linear-gradient(135deg,#ffffff,#d9e5ff);
  color:#080b18;
  font-weight:900;
  cursor:pointer;
  margin-top:6px;
}
.close-login{
  position:absolute;
  top:16px;
  right:16px;
  width:40px;
  height:40px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.075);
  color:white;
  font-size:22px;
  cursor:pointer;
  z-index:2;
}
@media (max-width:980px){
.hero-grid,.split{
  grid-template-columns:1fr;
}
.app-card{
  max-width:620px;
  margin:auto;
}
.cards{
  grid-template-columns:1fr 1fr;
}
.domains{
  grid-template-columns:repeat(2,1fr);
}
.section-head{
  display:block;
}
.section-head p{
  margin-top:14px;
}
.nav-links{
  display:none;
}
.hamburger{
  display:flex;
}
.nav-right{
  gap:10px;
}
.phone{
  min-height:auto;
}
.visual-tile{
  min-height:430px;
}
}
@media (max-width:620px){
.wrap{
  width:min(100% - 24px, 1180px);
}
.hero{
  padding-top:54px;
}
.cards,.domains{
  grid-template-columns:1fr;
}
.btn{
  width:100%;
  justify-content:center;
}
.cta-box{
  padding:32px 20px;
  border-radius:30px;
}
.app-card{
  border-radius:28px;
  padding:10px;
}
.phone{
  border-radius:22px;
}
.lowpoly{
  height:250px;
}
.score-row{
  grid-template-columns:68px 1fr 38px;
}
.footer-inner{
  display:block;
}
.footer-inner div+div{
  margin-top:8px;
}
}
.nav-tools{
  display:inline-flex;
  align-items:center;
  position:relative;
}
.nav-tools-trigger{
  cursor:default;
}
.nav-submenu{
  position:absolute;
  top:calc(100% + 14px);
  min-width:230px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:22px;
  backdrop-filter:blur(18px);
  opacity:0;
  visibility:hidden;
  transition:.22s ease;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) translateY(8px) !important;
  background:rgba(255,255,255,.96);
  border-color:var(--line);
  box-shadow:0 22px 70px rgba(31,41,55,.16);
}
.nav-tools:hover .nav-submenu{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0) !important;
}
.nav-submenu a{
  display:flex;
  padding:12px 13px;
  border-radius:15px;
  color:var(--text);
}
.nav-submenu a:hover{
  background:rgba(31,41,55,.06);
}
.nav-mail{
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}
.nav-mail svg{
  width:18px;
  height:18px;
  stroke:currentColor;
  stroke-width:2;
  fill:none;
}
.nav-links a.nav-cta{
  color:#080b18 !important;
}
.mobile-subtitle{
  margin:8px 0 0;
  color:var(--muted);
  font-size:.82rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.mobile-menu-links .mobile-sub{
  margin-left:18px;
  padding:13px 16px;
  opacity:.88;
}
.mobile-menu-links a.nav-cta{
  background:white;
  color:#080b18;
}
.hero-video{
  width:100%;
  height:auto !important;
  object-fit:contain;
  border-radius:0 !important;
  display:block;
}
.visual-card:has(.hero-video), .visual-tile:has(.hero-video), .hero-visual:has(.hero-video), .app-card:has(.hero-video){
  border-radius:0 !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
  display:block !important;
  overflow:hidden;
}
.visual-card:has(.hero-video) *, .visual-tile:has(.hero-video) *, .hero-visual:has(.hero-video) *, .app-card:has(.hero-video) *{
  max-height:none;
}
.profile-panel .score-row{
  grid-template-columns:96px 1fr !important;
}
.profile-panel .score-row > span:first-child{
  white-space:nowrap !important;
}
.profile-panel .bar i{
  animation:serumBarPulse 7s ease-in-out infinite;
  transform-origin:left center;
}
.profile-panel .score-row:nth-child(1) .bar i{
  animation-delay:0s;
}
.profile-panel .score-row:nth-child(2) .bar i{
  animation-delay:.8s;
}
.profile-panel .score-row:nth-child(3) .bar i{
  animation-delay:1.6s;
}
.profile-panel .score-row:nth-child(4) .bar i{
  animation-delay:2.4s;
}
.profile-panel .score-row:nth-child(5) .bar i{
  animation-delay:3.2s;
}
@keyframes serumBarPulse{
0%,100%{ transform:scaleX(.76); opacity:.82; }
    50%{ transform:scaleX(1); opacity:1; }
}
@media(max-width:520px){
.profile-panel .score-row{
  grid-template-columns:92px 1fr !important;
  gap:8px !important;
  font-size:.78rem !important;
}
}
@media(max-width:980px){
.nav-right{
  display:flex !important;
  align-items:center !important;
}
.member-link{
  order:1 !important;
}
.hamburger{
  order:2 !important;
  margin-left:8px !important;
}
.books-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.book-card{
  grid-template-columns:.9fr 1.1fr;
  align-items:stretch;
  display:flex !important;
  flex-direction:column !important;
}
.book-cover{
  min-height:300px;
  margin:18px 18px 0;
  
}
.book-cover-image img{
  height:330px;
  min-height:330px;
}
.book-content{
  padding:24px;
}
.books-note{
  align-items:flex-start;
  flex-direction:column;
}
.mobile-tool-toggle{
  background:rgba(255,255,255,.72);
  color:var(--text);
  border-color:var(--line);
}
}
.mobile-tool-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:17px 16px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:white;
  font:inherit;
  font-weight:850;
  cursor:pointer;
  text-align:left;
}
.mobile-arrow{
  color:var(--muted);
  font-size:1.35rem;
  line-height:1;
  transition:transform .25s ease;
}
.mobile-tool-toggle.open .mobile-arrow{
  transform:rotate(90deg);
}
.mobile-tool-submenu{
  grid-template-rows:0fr;
  overflow:hidden;
  transition:grid-template-rows .28s ease, margin .28s ease;
  display:none !important;
}
.mobile-tool-submenu.open{
  display:grid !important;
  grid-template-rows:1fr !important;
  margin:4px 0 6px;
}
.mobile-tool-submenu > *{
  min-height:0;
}
.mobile-tool-submenu .mobile-sub{
  margin-left:18px;
}
.video-shell{
  position:relative;
  width:100%;
  overflow:hidden;
}
.video-cover{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  border-radius:0 !important;
  position:relative;
  z-index:2;
}
.video-shell .hero-video{
  width:100%;
  height:auto !important;
  display:block;
  object-fit:contain;
  border-radius:0 !important;
  position:absolute;
  inset:0;
  opacity:0;
  z-index:1;
}
.video-shell.is-playing .hero-video{
  position:relative;
  opacity:1;
  z-index:2;
}
.video-shell.is-playing .video-cover, .video-shell.is-playing .video-play-btn{
  display:none;
}
.video-play-btn{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:78px;
  height:78px;
  border-radius:999px;
  backdrop-filter:blur(12px);
  cursor:pointer;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.25s ease;
  border-color:rgba(255,255,255,.72);
}
.video-play-btn:hover{
  transform:translate(-50%,-50%) scale(1.06);
}
.video-play-btn span{
  display:block;
  width:0;
  height:0;
  border-top:15px solid transparent;
  border-bottom:15px solid transparent;
  border-left:23px solid white;
  margin-left:5px;
}
.accueil-image-wrap{
  width:100%;
  height:100%;
  min-height:360px;
  border-radius:32px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-color:var(--line);
  background:rgba(255,255,255,.72);
}
.accueil-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.site-footer{
  padding:34px 0;
  color:var(--muted);
  border-top:1px solid rgba(255,255,255,.08);
}
.site-footer p{
  margin:0;
  font-size:.9rem;
}
.flags{
  font-size:1em;
  margin-left:6px;
  letter-spacing:2px;
}
.books-page{
  padding-bottom:40px;
}

.books-hero{
  padding:82px 0 34px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:32px;
  align-items:stretch;
}
.books-hero-content{
  max-width:900px;
}
.books-hero-visual{
  border-radius:34px;
  overflow:hidden;
  min-height:100%;
  box-shadow:var(--shadow);
}
.books-hero-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.books-section{
  padding-top:18px;
}
.books-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:22px !important;
  align-items:stretch !important;
}
.book-card{
  position:relative;
  min-height:100%;
  border:1px solid var(--line);
  border-radius:34px;
  background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.055));
  backdrop-filter:blur(20px);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex !important;
  flex-direction:column !important;
  min-width:0;
}
.book-card:before{
  content:"";
  position:absolute;
  inset:-120px -90px auto auto;
  width:230px;
  height:230px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  pointer-events:none;
}

.book-spine{
  position:absolute;
  inset:0 auto 0 0;
  width:16px;
  background:rgba(0,0,0,.24);
  border-right:1px solid rgba(255,255,255,.16);
}
.book-tag{
  align-self:flex-start;
  padding:8px 11px;
  border-radius:999px;
  background:rgba(8,11,24,.38);
  color:white;
  font-size:.78rem;
  font-weight:950;
  letter-spacing:.12em;
}
.book-cover h2{
  position:relative;
  z-index:1;
  margin:34px 0 0;
  font-size:clamp(1.9rem,3vw,2.75rem);
  line-height:.94;
  letter-spacing:-.065em;
}
.book-cover p{
  position:relative;
  z-index:1;
  margin:24px 0 0;
  color:rgba(255,255,255,.72);
  font-weight:750;
}

.book-content{
  position:relative;
  z-index:1;
  padding:24px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.book-content small{
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--soft);
}
.book-content h3{
  margin:10px 0 12px;
  font-size:1.45rem;
  letter-spacing:-.04em;
  color:var(--text);
}
.book-content p{
  margin:0;
  line-height:1.6;
  text-align:justify;
  color:var(--muted);
}
.book-link{
  margin-top:10px;
  display:inline-flex;
  align-self:flex-start;
  padding:8px 15px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background-color:#bf6759;
  font-weight:850;
  transition:.22s ease;
  color:white;
}
.book-link:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.12);
  border-color:#304052;
  color:#304052;
}
.books-note{
  margin-top:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border:1px solid var(--line);
  border-radius:34px;
  padding:30px;
  box-shadow:0 20px 60px rgba(0,0,0,.24);
  background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(246,248,252,.76));
}
.books-note h2{
  margin:0 0 10px;
  font-size:clamp(1.7rem,3vw,2.6rem);
  letter-spacing:-.055em;
  line-height:1;
}
.books-note p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
  max-width:760px;
}
@media(max-width:620px){
.books-hero{
  padding-top:54px;
}
.book-card{
  display:flex;
}
.book-cover{
  min-height:285px;
  margin:14px 14px 0;
}
.book-cover-image img{
  height:auto;
  min-height:285px;
}
.book-content{
  padding:22px;
}
.books-note{
  padding:24px;
  border-radius:28px;
}
}
.nav-inner, .card, .feature, .domain, .app-card, .visual-tile, .cta-box, .book-card, .books-note{
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.64));
  border-color:var(--line);
  box-shadow:var(--shadow);
}
.nav-cta, .mobile-menu-links a.nav-cta{
  background:#182033;
  color:white !important;
  box-shadow:0 12px 30px rgba(24,32,51,.15);
}
.eyebrow, .chip, .btn-secondary, .insight{
  background:rgba(255,255,255,.64);
  border-color:var(--line);
  color:var(--text);
}
.proof b, .insight b{
  color:var(--text);
}
.btn-secondary:hover, .book-link:hover{
  background:rgba(255,255,255,.92);
}
.site-footer, footer{
  border-top-color:var(--line);
}
@media(max-width:680px){
.books-grid{
  grid-template-columns:1fr !important;
}
}
.video-container, .video-wrapper, .hero-video, .video-block{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
.video-container::before, .video-container::after, .video-wrapper::before, .video-wrapper::after{
  display:none !important;
  content:none !important;
}
.hero-media::before, .hero-media::after, .video-zone::before, .video-zone::after, .video-card::before, .video-card::after, .mockup::before, .mockup::after, .showcase::before, .showcase::after, .phone-mockup::before, .phone-mockup::after{
  display:none !important;
  content:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.hero-media, .video-zone, .showcase, .mockup{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.video-card, .demo-card, .preview-card, .hero-card{
  border-radius:28px;
}
.nav a.active, .nav .active, .menu a.active, .menu .active, nav a.active, nav .active, .header-nav a.active, .header-nav .active, .main-nav a.active, .main-nav .active, .nav-link.active, .nav-item.active > a{
  color:#ffffff !important;
}
.nav a.active *, .menu a.active *, nav a.active *, .header-nav a.active *, .main-nav a.active *, .nav-link.active *{
  color:#ffffff !important;
}
nav a.active, nav a.current, .menu a.active, .menu a.current, .header-menu a.active, .header-menu a.current, .main-menu a.active, .main-menu a.current{
  color:#ffffff !important;
}
nav a.active *, nav a.current *{
  color:#ffffff !important;
}
.nav-links a.active{
  color:#ffffff !important;
}
.nav-links a.active svg{
  stroke:#ffffff !important;
}
.books-grid, .books-container{
  display:flex !important;
  flex-direction:column !important;
  gap:40px !important;
  width:100% !important;
}
.book-card, .book-item{
  width:100% !important;
  max-width:100% !important;
  display:grid !important;
  grid-template-columns:280px 1fr !important;
  gap:50px !important;
  align-items:center !important;
  border:none !important;
  background:#ffffff !important;
  border-radius:28px !important;
  padding:15px 24px 15px 24px !important; /* -------------------------------------------------------- Padding 24 Px ----------------------------------------------------------- */
  overflow:hidden !important;
  box-shadow:0 10px 30px rgba(0,0,0,0.04) !important;
}
.book-card img, .book-item img{
  width:100% !important;
  height:auto !important;
  display:block !important;
  background:transparent !important;
  border:none !important;
  
  border-radius:14px !important;
  border-shadow:7px;
}
@media(max-width:900px){
.book-card, .book-item{
  grid-template-columns:1fr !important;
}
}

@media(max-width:980px){
.books-hero{grid-template-columns:1fr;}
.books-hero-visual{max-height:520px;}
}


/* Etat actif spécifique du lien Contact : l'enveloppe devient rouge sans hériter du bouton nav-cta */
.nav-links a.nav-mail.contact-active{
  color:var(--s) !important;
}
.nav-links a.nav-mail.contact-active svg{
  stroke:var(--s) !important;
}
.mobile-menu-links a.nav-cta{
  background:#182033;
  color:#ffffff !important;
}


/* Page Annuaire */
.annuaire-hero-visual img{
  object-position:center;
}
.annuaire-card{
  grid-template-columns:420px 1fr !important;
}
.annuaire-map-box{
  width:100%;
  min-height:430px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:26px;
  background:radial-gradient(circle at 30% 20%,rgba(100,151,195,.18),transparent 42%),linear-gradient(135deg,rgba(255,255,255,.95),rgba(247,248,251,.82));
  border:1px solid var(--line);
  padding:26px;
}
.france-map{
  width:min(100%,390px);
}
.france-map svg{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 18px 36px rgba(31,41,55,.12));
}
.france-shape{
  fill:rgba(255,255,255,.92);
  stroke:#304052;
  stroke-width:8;
  stroke-linejoin:round;
}
.map-dot{
  fill:var(--s);
  stroke:#ffffff;
  stroke-width:5;
  animation:mapPulse 2.8s ease-in-out infinite;
  transform-origin:center;
}
.map-dot:nth-of-type(3n){fill:var(--r);}
.map-dot:nth-of-type(3n+1){fill:var(--u);}
.map-dot:nth-of-type(4n){fill:var(--m);}
@keyframes mapPulse{
  0%,100%{opacity:.78; transform:scale(.92);}
  50%{opacity:1; transform:scale(1.08);}
}
.annuaire-content p + p{
  margin-top:14px;
}
@media(max-width:900px){
  .annuaire-card{
    grid-template-columns:1fr !important;
  }
  .annuaire-map-box{
    min-height:330px;
  }
}

.mail-red{
color:green !important;
}
/* Espace membre */
.member-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.annuaire-grid{
    display:grid;
    grid-template-columns:repeat(1,1fr);
    gap:24px;
}
.member-space-link{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 16px;
  border-radius:16px;
  text-decoration:none;
  font-weight:800;
  color:white;
  background:#a67cc0;
  border:1px solid rgba(31,41,55,.12);
  box-shadow:0 12px 30px rgba(31,41,55,.10);
}
.member-space-link:hover{color:#a67cc0;background:white;}
.member-logout{
  width:36px;
  height:36px;
  border-radius:50%;
  border:2px solid #bf6759;
  color:#bf6759;
  background:white;
  display:grid;
  place-items:center;
  text-decoration:none;
  font-size:26px;
  font-weight:900;
  box-shadow:0 12px 28px rgba(191,103,89,.18);
}

.member-logout span{
  position:relative;
  top:-2px;
}
.member-logout:hover{background:#bf6759;color:white;}
.login-error{
  position:relative;
  margin:0 0 14px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(191,103,89,.16);
  color:white;
  border:1px solid rgba(191,103,89,.35);
  font-size:.92rem;
}
.mobile-login-trigger{
  width:100%;
  border:0;
  background:transparent;
  color:#182033;
  text-align:left;
  font:inherit;
  font-weight:900;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
}
.mobile-logout-link span{color:#bf6759!important;font-size:1.4rem!important}
.member-page{
  padding:40px 0 70px;
}
.member-hero{
  margin-bottom:-50px;
}
.member-hero h1{
  margin:14px 0 12px;
  font-size:clamp(2.4rem,5vw,5rem);
  letter-spacing:-.07em;
  line-height:.95;
}
.member-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.member-card{
  background:white;
  border:1px solid var(--line);
  border-radius:32px;
  padding:30px;
  box-shadow:var(--shadow);
}
.member-card small{
  display:inline-flex;
  margin-bottom:12px;
  color:#64748b;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.member-card h2{
  margin:0 0 20px;
  font-size:1.8rem;
  letter-spacing:-.04em;
}
.member-info{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.member-info span{color:#64748b;font-weight:800}
.member-info strong{text-align:right;color:#182033}
.member-form input{
  width:100%;
  border:1px solid var(--line);
  border-radius:18px;
  padding:15px 16px;
  margin-bottom:12px;
  font-size:1rem;
  outline:none;
  background:#f8fafc;
}
.member-form input:focus{border-color:#6497c3;background:white}
.member-form button{
  width:100%;
  border:0;
  border-radius:18px;
  padding:15px 16px;
  background:#182033;
  color:white;
  font-weight:900;
  cursor:pointer;
}
.member-alert{
  padding:13px 15px;
  border-radius:16px;
  margin-bottom:14px;
  font-weight:800;
}
.member-alert.success{background:rgba(100,176,157,.14);color:#256b5c;border:1px solid rgba(100,176,157,.32)}
.member-alert.error{background:rgba(191,103,89,.14);color:#9b3d31;border:1px solid rgba(191,103,89,.32)}
@media (max-width:860px){
  .member-actions{display:none}
  .member-grid{grid-template-columns:1fr}
  .member-page{padding-top:35px}
}

.book-card.full-text{
  grid-template-columns:1fr !important;
}

.book-card.full-text .book-cover{
  max-width:260px;
  margin:0 auto 24px;
}

.book-card.full-text .book-content{
  width:100%;
}

.img-relief{
  display:block;
  border-radius:14px;
  box-shadow:
    0 18px 30px #d1d1d1,
    0 8px 20px #d1d1d1;

  border:1px solid rgba(255,255,255,.65);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.img-relief:hover{
  transform:translateY(-4px) scale(1.01);

  box-shadow:
    0 18px 30px #d1d1d1,
    0 8px 20px #d1d1d1;
}
/* Zoom image plein écran */
.img-zoom{
  cursor:zoom-in;
}

.zoom-overlay{
  position:fixed;
  inset:0;
  z-index:999999;
  background:rgba(0,0,0,.82);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.zoom-overlay img{
  max-width:92vw;
  max-height:92vh;
  border-radius:18px;
  box-shadow:0 30px 90px rgba(0,0,0,.45);
}

.bloc-double-image{
    background:#fff;
    border-radius:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    gap:20px;
    box-sizing:border-box;
    width:min(1180px, calc(100% - 34px));
	margin:0 auto;
}

.image-zone{
    width:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.image-zone img{
    max-width:100%;
    height:320px; /* même hauteur pour les deux */
    object-fit:contain;
    display:block;
}

@media (max-width:768px){

    .bloc-double-image{
        flex-direction:column;
    }

    .image-zone{
        width:100%;
    }

    .image-zone img{
        height:auto;
        max-height:320px;
    }

}
.bloc-texte{
    background:#fff;
    border-radius:24px;
    padding:40px;
    box-sizing:border-box;
    width:min(1180px, calc(100% - 34px));
    margin:0 auto;
    margin-bottom:40px;
    
}
.bloc-texte div{
    margin: 40 0;
    line-height:1.6;
    text-align:justify;
    font-family:inherit;
    color:rgba(24,32,51,.70);
}
.small {
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#878b95;
}
.serum-table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.serum-table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
  font-family:Arial, sans-serif;
  border:3px solid #304052;
}

.serum-table th{
  background:#304052;
  color:#fff;
  font-size:20px;
  font-weight:700;
  text-align:center;
  padding:22px 15px;
  line-height:1.5;
  border-right:1px solid rgba(255,255,255,.15);
}

.serum-table td{
  font-size:21px;
  color:#6f6f6f;
  text-align:center;
  padding:18px 15px;
  border-right:1px solid #555;
}

.serum-table td:first-child{
  font-weight:700;
  border-right:2px solid currentColor;
}

.serum-table tr:nth-child(even) td{
  background:#f1f3f8;
}

.serum-table tr:nth-child(odd) td{
  background:#fff;
}

.sensibilite{color:#bf6759!important;}
.exploration{color:#f2dc7e!important;}
.ressources{color:#6497c3!important;}
.unite{color:#64b09d!important;}
.modevie{color:#a67cc0!important;}

.serum-table td:last-child,
.serum-table th:last-child{
  border-right:none;
}

@media(max-width:768px){
  .serum-table{
    min-width:680px;
  }

  .serum-table th{
    font-size:16px;
    padding:16px 10px;
  }

  .serum-table td{
    font-size:17px;
    padding:14px 10px;
  }
}


/* -------------------------------- ANIMATION DE LA STRUCTURE DE COMMUNICATION -----------------------*/
.communication-panel{
  padding:12px !important;
}

.serum-communication-schema{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  width:100%;
}

.comm-col{
  --c:#000;
  display:flex;
  flex-direction:column;
  align-items:center;
  color:var(--c);
}

.comm-col.s{--c:var(--s);}
.comm-col.e{--c:var(--e);}
.comm-col.r{--c:var(--r);}
.comm-col.u{--c:var(--u);}

.comm-title{
  width:100%;
  padding:6px 4px;
  text-align:center;
  font-size:clamp(.6rem,0.8vw,0.9rem);
  color:#fff;
  background:var(--c);
  margin-bottom:10px;
  border-radius:6px;
}

.comm-col.e .comm-title{
  color:#182033;
}

.comm-label{
  font-size:clamp(.58rem,.65vw,.75rem);
  text-align:center;
  color:#b5b5b5;
  white-space:nowrap;
}

.comm-label.top{margin-bottom:8px;}
.comm-label.bottom{margin-top:8px;}

.comm-scale{
  position:relative;
  width:58px;
  height:170px;
}

.comm-scale::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:5px;
  border-radius:999px;
  transform:translateX(-50%);
  background:var(--c);
}

.comm-scale::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(var(--c),var(--c)) center 0/44px 6px no-repeat,
    linear-gradient(var(--c),var(--c)) center 17%/44px 6px no-repeat,
    linear-gradient(var(--c),var(--c)) center 34%/44px 6px no-repeat,
    linear-gradient(var(--c),var(--c)) center 66%/44px 6px no-repeat,
    linear-gradient(var(--c),var(--c)) center 83%/44px 6px no-repeat,
    linear-gradient(var(--c),var(--c)) center 100%/44px 6px no-repeat;
}

.comm-cursor{
  position:absolute;
  left:50%;
  top:50%;
  width:56px;
  height:26px;
  border-radius:6px;
  background:rgba(126,133,145,.78);
  transform:translate(-50%,-50%);
  animation:commCursorMove 3.2s ease-in-out infinite alternate;
  z-index:2;
}

.comm-col.e .comm-cursor{animation-delay:-.6s;}
.comm-col.r .comm-cursor{animation-delay:-1.1s;}
.comm-col.u .comm-cursor{animation-delay:-1.6s;}

@keyframes commCursorMove{
  from{transform:translate(-50%,-50%) translateY(-72px);}
  to{transform:translate(-50%,-50%) translateY(72px);}
}

@media(max-width:620px){
  .serum-communication-schema{
    grid-template-columns:repeat(2,1fr);
    gap:26px 18px;
  }

  .comm-scale{
    height:160px;
  }

  @keyframes commCursorMove{
    from{transform:translate(-50%,-50%) translateY(-66px);}
    to{transform:translate(-50%,-50%) translateY(66px);}
  }
}

.phone .lowpoly{
  height:auto !important;
  min-height:0 !important;
}

.phone .video-shell,
.phone .video-cover{
  display:block;
  margin:0 !important;
}
.profile-panel.communication-panel{
  padding-top:0 !important;
}

.titre-ligne{
    display:flex;
    align-items:center;
    width:100%;
    font-weight:bold;
    font-size:24px;
    text-align:center;
}

.titre-ligne::before,
.titre-ligne::after{
    content:"";
    flex:1;
    border-top:2px solid #666;
}

.titre-ligne::before{
    margin-right:15px;
}

.titre-ligne::after{
    margin-left:15px;
}

.social-buttons{
  display:flex;
  gap:25px;
  align-items:center;
}

.social-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  border-radius:8px;
  color:#fff;
  font-size:22px;
  font-weight:700;
  text-decoration:none;
  font-family:Arial, sans-serif;
}

.linkedin{
  background:#087fb7;
}

.instagram{
  background:#e72c72;
}

.icon{
  font-weight:900;
  font-size:24px;
}

/* =========================================================
   PDF PROFIL SERUM - STYLE COMMUN BASE EQUILIBRE
   Utilisé pour uniformiser les pages modernes du PDF.
   ========================================================= */
.pdf-page.serum-balance-modern,
.pdf-page.serum-visual-modern,
.pdf-page.serum-indicators-modern,
.pdf-page.serum-stair-modern{
    background:#f7f9fc;
    color:#182033;
    font-family:DejaVu Sans, Arial, sans-serif;
    padding:0 !important;
    overflow:hidden;
}
.pdf-page.serum-balance-modern:before,
.pdf-page.serum-visual-modern:before,
.pdf-page.serum-indicators-modern:before,
.pdf-page.serum-stair-modern:before{display:none;}

/* Reprise exacte de la structure graphique de equilibre.php */

        .serum-balance-modern {
            background: #f7f9fc;
            color: #182033;
            font-family: DejaVu Sans, Arial, sans-serif;
            padding: 0 !important;
            overflow: hidden;
        }

        .serum-balance-modern:before { display: none; }

        .balance-shell {
            position: relative;
            height: 270mm;
            padding: 8mm 10mm 6mm 10mm;
            box-sizing: border-box;
            background: #f7f9fc;
        }

        .balance-bg-ring {
            position: absolute;
            right: -28mm;
            top: -35mm;
            width: 118mm;
            height: 118mm;
            border-radius: 50%;
            border: 16mm solid #e7f0f8;
            opacity: .95;
        }

        .balance-bg-circle {
            position: absolute;
            left: -36mm;
            bottom: -42mm;
            width: 92mm;
            height: 92mm;
            border-radius: 50%;
            background: #f1edf7;
        }

        .balance-dots {
            position: absolute;
            right: 18mm;
            top: 52mm;
            width: 22mm;
            height: 22mm;
            color: #d7e0eb;
            font-size: 16px;
            line-height: 6px;
            letter-spacing: 4px;
        }

        .balance-content {
            position: relative;
            z-index: 2;
        }

        .balance-top {
            display: table;
            width: 100%;
            margin-bottom: 5mm;
        }

        .balance-top-left,
        .balance-top-right {
            display: table-cell;
            vertical-align: top;
        }

        .balance-top-left { width: 55%; }
        .balance-top-right { width: 45%; text-align: right; white-space: nowrap; }

        .balance-brand {
            font-size: 11px;
            font-weight: bold;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: #182033;
            margin-bottom: 7mm;
        }

        .balance-badge {
            display: inline-block;
            padding: 8px 15px;
            border-radius: 999px;
            background: #ffffff;
            border: 1px solid #9aa8ba;
            color: #182033;
            font-size: 11px;
            font-weight: bold;
            letter-spacing: .04em;
            text-transform: uppercase;
            margin-right: 3mm;
            vertical-align: middle;
        }

        .balance-page-number {
            display: inline-table;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #313f4e;
            color: #ffffff;
            text-align: center;
            font-size: 13px;
            font-weight: 900;
            line-height: normal;
            vertical-align: middle;
        }

        .balance-page-number span {
            display: table-cell;
            width: 36px;
            height: 36px;
            vertical-align: middle;
            text-align: center;
        }

        .balance-title {
            font-size: 40px;
            line-height: 1;
            margin: 0;
            font-weight: bold;
            letter-spacing: -2px;
            color: #0b1d33;
        }

        .balance-title-line {
            width: 16mm;
            height: 2mm;
            border-radius: 999px;
            background: #bf6759;
            margin: 3mm 0 4mm 0;
        }

        .balance-subtitle {
            width: 145mm;
            font-size: 14px;
            line-height: 1.2;
            color: #182033;
            margin: 0 0 6mm 0;
            white-space: nowrap;
        }

        .balance-intro {
            width: 176mm;
            margin: 0 auto 6mm auto;
            border-radius: 18px;
            background: #ffffff;
            border: 1px solid #e4e9f1;
            box-shadow: 0 8px 20px rgba(15,31,52,.05);
            padding: 5mm 6mm;
            box-sizing: border-box;
            font-size: 10px;
            line-height: 1.45;
            color: #182033;
            text-align: justify;
        }

        .balance-card {
            width: 176mm;
            margin: 0 auto;
            border-radius: 22px;
            background: #ffffff;
            border: 1px solid #e4e9f1;
            box-shadow: 0 10px 24px rgba(15,31,52,.06);
            padding: 5mm 7mm 4mm 7mm;
            box-sizing: border-box;
        }

        .balance-row {
            position: relative;
            padding: 2.5mm 0 4mm 0;
            border-bottom: 1px solid #edf1f6;
        }

        .balance-row.last { border-bottom: none; padding-bottom: 1mm; }

        .balance-row-header {
            display: table;
            width: 100%;
            margin-bottom: 2.6mm;
        }

        .balance-row-left,
        .balance-row-right {
            display: table-cell;
            vertical-align: bottom;
        }

        .balance-row-left { width: 58%; }
        .balance-row-right { width: 42%; text-align: right; }

        .balance-domain {
            display: inline-block;
            font-size: 16px;
            font-weight: bold;
            color: #0b1d33;
            line-height: 1.1;
        }

        .balance-question {
            display: block;
            margin-top: .8mm;
            font-size: 7.5px;
            line-height: 1.1;
            color: #8a98aa;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .balance-percent {
            display: inline-block;
            font-size: 13px;
            font-weight: bold;
            line-height: 1;
            padding: 4px 8px;
            border-radius: 999px;
            background: #f7f9fc;
        }

        .balance-bar-wrap {
            position: relative;
            width: 100%;
            height: 8mm;
            border-radius: 999px;
            background: #182033;
            overflow: hidden;
        }

        .balance-fill-left {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            border-radius: 999px 0 0 999px;
        }

        .balance-fill-right {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            background: #304052;
            border-radius: 0 999px 999px 0;
        }

        .balance-center-line {
            position: absolute;
            left: 50%;
            top: -1mm;
            width: .45mm;
            height: 10mm;
            background: #ffffff;
            opacity: .9;
            z-index: 4;
        }

        .balance-labels {
            display: table;
            width: 100%;
            margin-top: 2mm;
            font-size: 10px;
            line-height: 1.1;
            color: #182033;
        }

        .balance-label-left,
        .balance-label-center,
        .balance-label-right {
            display: table-cell;
            vertical-align: top;
        }

        .balance-label-left { width: 50%; text-align: left; font-weight: bold; }
        .balance-label-center { display: none; }
        .balance-label-right { width: 50%; text-align: right; font-weight: bold; color: #304052; }

        .balance-note {
            width: 176mm;
            margin: 5mm auto 0 auto;
            text-align: center;
            font-size: 9px;
            line-height: 1.35;
            color: #64748b;
        }
    

/* Page Escalier SERUM - basée sur le même haut/footer que equilibre.php */
.serum-stair-modern .balance-shell{
    height:270mm;
    padding:8mm 10mm 6mm 10mm;
}
.serum-stair-modern .balance-title{font-size:40px;}
.serum-stair-modern .balance-subtitle{width:145mm;margin-bottom:5mm;}
.stair-intro{
    width:176mm;
    margin:0 auto 6mm auto;
    border-radius:18px;
    background:#ffffff;
    border:1px solid #e4e9f1;
    box-shadow:0 8px 20px rgba(15,31,52,.05);
    padding:4mm 6mm;
    box-sizing:border-box;
    font-size:10px;
    line-height:1.45;
    color:#334155;
    text-align:justify;
}
.stair-card{
    width:176mm;
    margin:0 auto 5mm auto;
    border-radius:22px;
    background:#ffffff;
    border:1px solid #e4e9f1;
    box-shadow:0 10px 26px rgba(15,31,52,.06);
    padding:5mm 7mm;
    box-sizing:border-box;
}
.stair-table{width:100%;border-collapse:collapse;}
.stair-row td{vertical-align:middle;padding:2mm 0;}
.stair-num-cell{width:18mm;text-align:center;}
.stair-number{
    display:inline-table;
    width:10mm;
    height:10mm;
    border-radius:50%;
    background:#313f4e;
    color:#ffffff;
    font-size:12px;
    font-weight:bold;
    text-align:center;
}
.stair-number span{display:table-cell;width:10mm;height:10mm;vertical-align:middle;text-align:center;}
.stair-bar-cell{text-align:center;}
.stair-bar{
    display:inline-block;
    border-radius:12px;
    padding:3mm 5mm;
    color:#ffffff;
    text-align:center;
    box-sizing:border-box;
}
.stair-name{font-size:15px;font-weight:bold;line-height:1.1;}
.stair-meta{margin-top:2mm;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.86);font-weight:bold;}
.stair-level-cell{width:28mm;text-align:center;color:#8a929d;font-size:9px;text-transform:uppercase;letter-spacing:.06em;}
.stair-level-cell strong{color:#313f4e;font-size:9.5px;}
.stair-guide{
    width:176mm;
    margin:0 auto;
    border-collapse:collapse;
}
.stair-guide-left{
    width:34%;
    vertical-align:top;
    padding:5mm;
    background:#313f4e;
    border-radius:18px;
    color:#ffffff;
}
.stair-guide-title{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#dce3ea;font-weight:bold;}
.stair-guide-line{margin-top:4mm;width:12mm;height:1.4mm;border-radius:999px;background:#ffffff;}
.stair-guide-number{margin-top:4mm;font-size:30px;font-weight:bold;line-height:1;}
.stair-guide-small{margin-top:2mm;font-size:10px;color:#dce3ea;line-height:1.45;}
.stair-guide-text{
    width:66%;
    vertical-align:top;
    padding:2mm 0 0 7mm;
    color:#313f4e;
    font-size:10.6px;
    line-height:1.52;
    text-align:justify;
}

/* =========================================================
   CORRECTION FOOTER PDF DOMPDF
   Le footer doit rester visible même hors des cadres colorés.
   ========================================================= */
.pdf-page .footer-pdf{
  position:absolute !important;
  left:10mm !important;
  right:10mm !important;
  bottom:4mm !important;
  height:7mm !important;
  z-index:99999 !important;
  overflow:visible !important;
  background:transparent !important;
  color:#304052 !important;
  font-family:DejaVu Sans, Arial, sans-serif !important;
  font-size:8px !important;
  line-height:7mm !important;
}
.pdf-page .footer-table{
  width:100% !important;
  border-collapse:collapse !important;
  table-layout:fixed !important;
}
.pdf-page .footer-table td{
  padding:0 !important;
  margin:0 !important;
  border:none !important;
  background:transparent !important;
  color:#304052 !important;
  font-size:8px !important;
  line-height:7mm !important;
  height:7mm !important;
  vertical-align:middle !important;
}
.pdf-page .footer-left{width:33% !important;text-align:left !important;}
.pdf-page .footer-center{width:34% !important;text-align:center !important;}
.pdf-page .footer-page{width:33% !important;text-align:right !important;font-weight:normal !important;}




/* ===== Correction affichage des images d'en-tête sur mobile/tablette ===== */
@media screen and (max-width:980px){

    .books-hero{
        align-items:start !important;
    }

    .books-hero-visual{
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        aspect-ratio:auto !important;
        align-self:start !important;
        overflow:visible !important;
    }

    .books-hero-visual img{
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        object-fit:contain !important;
        object-position:center !important;
        display:block !important;
    }
}