:root{
--navy:#08182e;
--navy-2:#102a47;
--blue:#1689c9;
--blue-dark:#0d6faa;
--sky:#eaf6fb;
--sand:#f7f3ec;
--white:#ffffff;
--ink:#172437;
--muted:#5e6c7d;
--line:#dce4eb;
--success:#177a55;
--warning:#c66a12;
--radius-sm:12px;
--radius:20px;
--radius-lg:30px;
--shadow:0 18px 55px rgba(8,24,46,.12);
--shadow-soft:0 10px 32px rgba(8,24,46,.08);
--max:1180px;
--header-h:82px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
color:var(--ink);
background:#fff;
font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
font-size:17px;
line-height:1.65;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
}
body.menu-open,body.modal-open{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-dark);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--navy)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid rgba(22,137,201,.45);outline-offset:3px}
.skip-link{
position:fixed;left:16px;top:-80px;z-index:9999;
background:#fff;color:var(--navy);padding:10px 14px;border-radius:8px;
box-shadow:var(--shadow);
}
.skip-link:focus{top:12px}
.container{width:min(calc(100% - 40px),var(--max));margin-inline:auto}
.container-narrow{width:min(calc(100% - 40px),820px);margin-inline:auto}
.section{padding:92px 0}
.section-sm{padding:62px 0}
.section-sky{background:var(--sky)}
.section-sand{background:var(--sand)}
.section-navy{background:var(--navy);color:#fff}
.section-border{border-top:1px solid var(--line)}
.grid{display:grid;gap:28px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stack{display:flex;flex-direction:column;gap:22px}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.eyebrow{
display:inline-flex;align-items:center;gap:8px;
color:var(--blue-dark);font-size:.78rem;font-weight:800;
text-transform:uppercase;letter-spacing:.12em;
margin:0 0 15px;
}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor;border-radius:2px}
.section-navy .eyebrow{color:#83cef3}
h1,h2,h3,h4{
margin:0 0 .55em;color:var(--navy);line-height:1.12;
font-family:Georgia,"Times New Roman",serif;
letter-spacing:-.025em;
}
h1{font-size:clamp(2.35rem,5vw,4.55rem);max-width:18ch}
h2{font-size:clamp(1.9rem,3.8vw,3.15rem);max-width:24ch}
h3{font-size:clamp(1.22rem,2.1vw,1.58rem)}
h4{font-size:1.08rem}
.section-navy h1,.section-navy h2,.section-navy h3,.section-navy h4{color:#fff}
p{margin:0 0 1.15em}
.lead{font-size:clamp(1.05rem,1.4vw,1.24rem);line-height:1.62;color:#405166;max-width:68ch}
.section-navy .lead{color:#d7e4ee}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.kicker{font-weight:700;color:var(--navy)}
.no-margin{margin:0}
.text-center{text-align:center}
.text-center h2,.text-center .lead{margin-left:auto;margin-right:auto}
.badge{
display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(22,137,201,.25);
background:#fff;color:var(--navy);border-radius:999px;padding:8px 13px;
font-size:.84rem;font-weight:700;
}
.badge img{width:17px;height:17px;color:var(--blue)}
.icon{
width:22px;height:22px;display:inline-block;flex:0 0 auto;color:currentColor;
}
.icon-lg{width:34px;height:34px}
.icon-box{
width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
background:var(--sky);color:var(--blue-dark);margin-bottom:18px;
}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:50px;padding:12px 21px;border-radius:999px;border:1px solid transparent;
text-decoration:none;font-weight:800;font-size:.94rem;line-height:1.2;
transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.btn:hover{transform:translateY(-1px);text-decoration:none}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 12px 26px rgba(22,137,201,.24)}
.btn-primary:hover{background:var(--blue-dark);color:#fff}
.btn-secondary{background:#fff;color:var(--navy);border-color:var(--line)}
.btn-secondary:hover{border-color:#bac8d4;color:var(--navy);box-shadow:var(--shadow-soft)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-ghost:hover{background:#fff;color:var(--navy)}
.btn-sm{min-height:42px;padding:10px 16px;font-size:.86rem}
.btn-block{width:100%}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:800;text-decoration:none}
.link-arrow .icon{transition:transform .15s}
.link-arrow:hover .icon{transform:translateX(3px)}
.site-header{
position:sticky;top:0;z-index:1000;background:rgba(8,24,46,.97);
backdrop-filter:saturate(140%) blur(10px);
border-bottom:1px solid rgba(255,255,255,.09);
}
.header-inner{min-height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:22px}
.site-logo{display:block;width:178px;flex:0 0 auto}
.site-logo img{width:100%;height:auto}
.desktop-nav{display:flex;align-items:center;gap:8px;margin-left:auto}
.nav-link,.nav-button{
color:#fff;text-decoration:none;border:0;background:transparent;
padding:11px 12px;border-radius:10px;font-size:.9rem;font-weight:700;
display:inline-flex;align-items:center;gap:6px;
}
.nav-link:hover,.nav-button:hover,.nav-link[aria-current="page"]{background:rgba(255,255,255,.1);color:#fff}
.nav-group{position:relative}
.nav-group:hover .nav-dropdown,.nav-group:focus-within .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.nav-dropdown{
position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,8px);
width:630px;background:#fff;border:1px solid var(--line);border-radius:18px;
box-shadow:var(--shadow);padding:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:5px;
opacity:0;visibility:hidden;pointer-events:none;transition:.18s ease;
}
.nav-dropdown::before{content:"";position:absolute;left:0;right:0;top:-16px;height:18px}
.nav-dropdown a{
display:block;border-radius:12px;padding:12px 13px;text-decoration:none;color:var(--ink);
}
.nav-dropdown a:hover{background:var(--sky)}
.nav-dropdown strong{display:block;color:var(--navy);font-size:.9rem}
.nav-dropdown span{display:block;color:var(--muted);font-size:.78rem;margin-top:2px}
.header-cta{white-space:nowrap}
.menu-toggle{
display:none;width:46px;height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.2);
background:transparent;color:#fff;align-items:center;justify-content:center;
}
.menu-toggle img{width:24px;height:24px;filter:brightness(0) invert(1)}
.mobile-panel{
position:fixed;inset:var(--header-h) 0 0;background:var(--navy);z-index:999;
padding:24px 20px 120px;overflow:auto;transform:translateX(100%);
transition:transform .25s ease;
}
.mobile-panel.open{transform:translateX(0)}
.mobile-panel nav{display:flex;flex-direction:column;gap:7px}
.mobile-panel a,.mobile-panel summary{
display:block;color:#fff;text-decoration:none;padding:13px 10px;border-radius:10px;
font-weight:750;list-style:none;
}
.mobile-panel details[open]{background:rgba(255,255,255,.06);border-radius:14px;padding-bottom:8px}
.mobile-panel details a{font-size:.92rem;padding-left:28px;color:#d7e4ee}
.breadcrumbs{font-size:.82rem;color:var(--muted);margin-bottom:27px}
.breadcrumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.breadcrumbs li:not(:last-child)::after{content:"/";margin-left:8px;color:#99a6b4}
.breadcrumbs a{color:inherit;text-decoration:none}
.hero{
position:relative;overflow:hidden;background:
radial-gradient(circle at 8% 12%,rgba(22,137,201,.15),transparent 34%),
linear-gradient(180deg,#f8fbfd 0%,#fff 100%);
padding:68px 0 78px;
}
.hero::after{
content:"";position:absolute;right:-180px;bottom:-260px;width:620px;height:620px;
border:1px solid rgba(22,137,201,.12);border-radius:50%;box-shadow:0 0 0 70px rgba(22,137,201,.035);
pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:64px;align-items:center;position:relative;z-index:1}
.hero-copy{padding:12px 0}
.hero-copy .lead{max-width:59ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:27px}
.hero-proof{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.hero-media{position:relative}
.hero-image{
aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;
box-shadow:0 28px 70px rgba(8,24,46,.22);background:var(--navy);
}
.hero-image img{width:100%;height:100%;object-fit:cover}
.hero-image::after{
content:"";position:absolute;inset:0;border-radius:inherit;
background:linear-gradient(180deg,transparent 52%,rgba(8,24,46,.26));
pointer-events:none;
}
.hero-card{
position:absolute;left:-28px;bottom:28px;width:min(310px,78%);
background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;
box-shadow:var(--shadow);z-index:2;
}
.hero-card strong{display:block;color:var(--navy);font-size:1rem;margin-bottom:4px}
.hero-card p{font-size:.83rem;line-height:1.45;color:var(--muted);margin:0}
.trust-strip{background:var(--navy);color:#fff}
.trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.trust-item{padding:24px 25px;border-right:1px solid rgba(255,255,255,.13);display:flex;gap:13px;align-items:center}
.trust-item:last-child{border-right:0}
.trust-item img{filter:brightness(0) invert(1);opacity:.84;width:25px;height:25px}
.trust-item strong{display:block;font-size:.92rem}
.trust-item span{display:block;color:#b8cbd9;font-size:.78rem;line-height:1.35}
.card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:28px;box-shadow:0 8px 26px rgba(8,24,46,.045);
}
.card:hover{border-color:#c7d6e2}
.card h3{margin-bottom:10px}
.card p:last-child{margin-bottom:0}
.card-featured{background:var(--navy);color:#fff;border-color:var(--navy)}
.card-featured h3{color:#fff}
.card-featured p{color:#d7e4ee}
.service-card{position:relative;display:flex;flex-direction:column;min-height:100%}
.service-card .link-arrow{margin-top:auto;padding-top:15px}
.number{
display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
background:var(--sky);color:var(--blue-dark);font-weight:900;margin-bottom:16px;
}
.process{counter-reset:step;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.process-step{position:relative;padding:27px 25px 26px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.process-step::before{
counter-increment:step;content:counter(step,decimal-leading-zero);
display:block;font-size:.75rem;letter-spacing:.12em;font-weight:900;color:var(--blue-dark);margin-bottom:13px
}
.process-step:not(:nth-child(3n))::after{
content:"";position:absolute;right:-23px;top:52px;width:23px;border-top:1px dashed #a9bdcc;
}
.check-list,.plain-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.check-list li{position:relative;padding-left:31px}
.check-list li::before{
content:"✓";position:absolute;left:0;top:.05em;width:21px;height:21px;border-radius:50%;
display:grid;place-items:center;background:var(--sky);color:var(--blue-dark);font-size:.78rem;font-weight:900
}
.pill-list{display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:0;list-style:none}
.pill-list li{border:1px solid var(--line);border-radius:999px;padding:8px 13px;background:#fff;font-size:.86rem}
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.75fr);gap:62px;align-items:start}
.aside-card{position:sticky;top:calc(var(--header-h) + 24px)}
.cta-panel{
display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center;
background:var(--navy);color:#fff;border-radius:var(--radius-lg);padding:42px 45px;overflow:hidden;position:relative
}
.cta-panel::after{
content:"";position:absolute;right:-100px;top:-130px;width:320px;height:320px;border-radius:50%;
border:1px solid rgba(255,255,255,.15);box-shadow:0 0 0 54px rgba(255,255,255,.025)
}
.cta-panel h2{color:#fff;font-size:clamp(1.65rem,3vw,2.5rem);margin-bottom:8px}
.cta-panel p{color:#c8d8e5;margin:0;max-width:66ch}
.cta-panel .cluster{position:relative;z-index:1;justify-content:flex-end}
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:15px;padding:0 21px}
.faq summary{list-style:none;cursor:pointer;font-weight:800;color:var(--navy);padding:18px 36px 18px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:13px;font-size:1.45rem;color:var(--blue-dark)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);padding:0 0 18px;margin:0}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px;background:#fff}
table{border-collapse:collapse;width:100%;min-width:680px}
th,td{text-align:left;padding:15px 17px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--navy);color:#fff;font-size:.84rem;letter-spacing:.02em}
tr:last-child td{border-bottom:0}
td{font-size:.92rem}
.callout{
border-left:4px solid var(--blue);background:var(--sky);padding:20px 23px;border-radius:0 14px 14px 0
}
.callout strong{display:block;color:var(--navy);margin-bottom:5px}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.related-link{
display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);
border-radius:15px;padding:20px;background:#fff;min-height:100%
}
.related-link:hover{border-color:#9fc8df;box-shadow:var(--shadow-soft);color:var(--ink)}
.related-link span{display:block;color:var(--blue-dark);font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;font-weight:900;margin-bottom:7px}
.related-link strong{display:block;color:var(--navy);line-height:1.3}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:58px;align-items:start}
.article-body{font-size:1.03rem}
.article-body h2{margin-top:2.3em;font-size:clamp(1.65rem,3vw,2.35rem)}
.article-body h3{margin-top:1.7em}
.article-body ul,.article-body ol{padding-left:1.25em}
.article-body li{margin-bottom:.55em}
.article-body table{font-size:.92rem}
.article-meta{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--muted);font-size:.86rem;margin:17px 0 25px}
.toc{border:1px solid var(--line);border-radius:16px;padding:20px;background:#fff}
.toc strong{display:block;margin-bottom:10px;color:var(--navy)}
.toc ol{margin:0;padding-left:20px;font-size:.85rem}
.toc li{margin:7px 0}
.toc a{text-decoration:none;color:var(--muted)}
.toc a:hover{color:var(--blue-dark)}
.author-box{border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--sand)}
.author-box strong{color:var(--navy)}
.author-box p{font-size:.84rem;color:var(--muted);margin:5px 0 0}
.blog-card{display:flex;flex-direction:column;overflow:hidden;padding:0}
.blog-thumb{aspect-ratio:16/9;background:var(--sky)}
.blog-thumb img{width:100%;height:100%;object-fit:cover}
.blog-card-content{padding:24px;display:flex;flex-direction:column;flex:1}
.blog-card .eyebrow{margin-bottom:9px}
.blog-card h3{font-size:1.42rem}
.blog-card .link-arrow{margin-top:auto}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-soft)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
label{font-size:.84rem;font-weight:800;color:var(--navy)}
input,select,textarea{
width:100%;border:1px solid #cbd7e1;border-radius:11px;padding:12px 13px;background:#fff;color:var(--ink)
}
input:focus,select:focus,textarea:focus{border-color:var(--blue);outline:3px solid rgba(22,137,201,.12)}
textarea{min-height:130px;resize:vertical}
.form-note{font-size:.78rem;color:var(--muted);line-height:1.45}
.form-status{display:none;padding:13px 15px;background:#e9f8f2;color:#126344;border-radius:10px;font-size:.87rem}
.form-status.show{display:block}
.contact-list{display:flex;flex-direction:column;gap:14px}
.contact-item{display:flex;gap:14px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:14px}
.contact-item:last-child{border-bottom:0}
.contact-item .icon-box{width:44px;height:44px;border-radius:12px;margin:0}
.contact-item strong{display:block;color:var(--navy)}
.contact-item a{text-decoration:none}
.simulator{display:grid;grid-template-columns:minmax(0,.9fr) minmax(320px,1.1fr);gap:34px;align-items:start}
.sim-result{background:var(--navy);color:#fff;border-radius:var(--radius);padding:31px;position:sticky;top:calc(var(--header-h) + 24px)}
.sim-result h2{font-size:1.7rem;color:#fff}
.result-range{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2rem,4vw,3.2rem);line-height:1.05;margin:15px 0 10px}
.result-details{border-top:1px solid rgba(255,255,255,.16);margin-top:21px;padding-top:17px;font-size:.85rem;color:#cbd9e5}
.range-row{display:grid;grid-template-columns:1fr 92px;gap:12px;align-items:center}
.range-row output{text-align:right;font-weight:800;color:var(--navy)}
input[type="range"]{padding:0;border:0;accent-color:var(--blue)}
.legal{font-size:.96rem}
.legal h2{font-size:1.85rem;margin-top:1.7em}
.site-footer{background:#061221;color:#c3d0db;padding:66px 0 105px}
.footer-grid{display:grid;grid-template-columns:1.25fr .85fr .85fr .9fr;gap:36px}
.footer-logo{width:175px;margin-bottom:18px}
.footer-copy{font-size:.88rem;max-width:42ch}
.site-footer h3{font-family:inherit;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:15px}
.footer-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.footer-links a{color:#c3d0db;text-decoration:none;font-size:.86rem}
.footer-links a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:42px;padding-top:20px;display:flex;justify-content:space-between;gap:18px;font-size:.78rem;color:#91a4b4}
.desktop-float{
position:fixed;right:18px;bottom:20px;z-index:900;display:flex;flex-direction:column;gap:9px;align-items:flex-end
}
.desktop-float a,.desktop-float button{
min-height:46px;border-radius:999px;border:0;display:inline-flex;align-items:center;gap:9px;padding:10px 15px;
box-shadow:var(--shadow);font-weight:850;text-decoration:none;font-size:.84rem
}
.desktop-float a{background:#fff;color:var(--navy);border:1px solid var(--line)}
.desktop-float button{background:var(--blue);color:#fff}
.mobile-sticky{display:none}
.modal{
position:fixed;inset:0;z-index:2000;background:rgba(4,13,24,.68);padding:18px;
display:none;align-items:center;justify-content:center;
}
.modal.open{display:flex}
.modal-dialog{width:min(100%,620px);max-height:calc(100vh - 36px);overflow:auto;background:#fff;border-radius:22px;padding:28px;position:relative}
.modal-close{position:absolute;right:15px;top:15px;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:#fff;display:grid;place-items:center}
.modal-close img{width:21px;height:21px}
.page-intro{background:linear-gradient(180deg,#f5fafc,#fff);padding:60px 0 58px}
.page-intro h1{font-size:clamp(2.3rem,5vw,4rem);max-width:20ch}
.page-intro .lead{max-width:64ch}
.stateless-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.proof-item{border:1px solid var(--line);border-radius:16px;padding:22px;background:#fff}
.proof-item strong{display:block;color:var(--navy);margin-bottom:5px}
.proof-item p{font-size:.86rem;color:var(--muted);margin:0}
.reference-grid{display:flex;flex-wrap:wrap;gap:14px}
.reference-item{
background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 26px;
box-shadow:var(--shadow-soft);min-width:150px;text-align:center
}
.reference-item strong{color:var(--navy);font-size:1.15rem;letter-spacing:.01em}
.notice-dev{
background:#fff8e8;border:1px solid #efd69f;color:#614810;padding:12px 16px;font-size:.79rem;
text-align:center
}
@media (max-width:1080px){
.desktop-nav{display:none}
.header-cta{margin-left:auto}
.menu-toggle{display:inline-flex}
.hero-grid{grid-template-columns:1fr .82fr;gap:40px}
.grid-4{grid-template-columns:repeat(2,1fr)}
.trust-grid{grid-template-columns:repeat(2,1fr)}
.trust-item:nth-child(2){border-right:0}
.trust-item:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.13)}
.footer-grid{grid-template-columns:1.2fr 1fr 1fr}
.footer-grid > div:last-child{grid-column:2/4}
}
@media (max-width:860px){
:root{--header-h:72px}
body{font-size:16px}
.container,.container-narrow{width:min(calc(100% - 30px),var(--max))}
.section{padding:68px 0}
.section-sm{padding:48px 0}
.site-logo{width:150px}
.header-cta{display:none}
.hero{padding:42px 0 58px}
.hero-grid,.split,.simulator,.article-layout{grid-template-columns:minmax(0,1fr)}
.hero-grid{gap:36px}
.hero-image{aspect-ratio:16/10}
.hero-card{left:15px;bottom:15px}
.grid-3,.grid-2{grid-template-columns:minmax(0,1fr)}
.process{grid-template-columns:repeat(2,minmax(0,1fr))}
.process-step::after{display:none}
.related-grid{grid-template-columns:minmax(0,1fr)}
.aside-card,.sim-result{position:static}
.cta-panel{grid-template-columns:minmax(0,1fr);padding:32px}
.cta-panel .cluster{justify-content:flex-start}
.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.footer-grid > div:last-child{grid-column:auto}
.desktop-float{display:none}
.mobile-sticky{
position:fixed;left:0;right:0;bottom:0;z-index:1500;background:#fff;
border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
box-shadow:0 -10px 30px rgba(8,24,46,.12)
}
.mobile-sticky a,.mobile-sticky button{min-height:46px}
.site-footer{padding-bottom:125px}
.article-sidebar{order:-1}
.toc{position:static}
}
@media (max-width:560px){
h1{font-size:2.45rem}
h2{font-size:2rem}
.hero-actions .btn{width:100%}
.hero-proof{display:grid;grid-template-columns:minmax(0,1fr)}
.hero-image{aspect-ratio:4/3}
.hero-card{position:relative;left:auto;bottom:auto;width:calc(100% - 24px);margin:-27px auto 0}
.trust-grid,.grid-4,.process,.footer-grid,.stateless-proof{grid-template-columns:minmax(0,1fr)}
.trust-item{border-right:0!important;border-bottom:1px solid rgba(255,255,255,.13)}
.trust-item:last-child{border-bottom:0}
.form-grid{grid-template-columns:minmax(0,1fr)}
.field.full{grid-column:auto}
.cta-panel{border-radius:20px;padding:28px 24px}
.footer-bottom{flex-direction:column}
.range-row{grid-template-columns:minmax(0,1fr)}
.range-row output{text-align:left}
.modal-dialog{padding:25px 20px}
}
@media (max-width:420px){
h1,.hero h1,.page-intro h1{font-size:1.95rem;line-height:1.16}
h2{font-size:1.7rem}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}
/* ============================================================
Experys V3 — compléments au design system (site.css)
Chargé APRÈS site.css. N'écrase rien d'essentiel.
============================================================ */
/* Hero sobre sans photo cliché (V3 §6.1) : panneau éditorial */
.hero-panel{
background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);
color:#fff;border-radius:var(--radius);padding:34px 32px;
box-shadow:var(--shadow);
}
.hero-panel h2{color:#fff;font-size:1.35rem;margin-bottom:.4em}
.hero-panel .panel-line{
display:flex;gap:14px;align-items:flex-start;
padding:14px 0;border-top:1px solid rgba(255,255,255,.14);
}
.hero-panel .panel-line:first-of-type{border-top:0}
.hero-panel .panel-line img{width:22px;height:22px;flex:0 0 auto;margin-top:2px;filter:brightness(0) invert(1);opacity:.9}
.hero-panel .panel-line strong{display:block;color:#fff}
.hero-panel .panel-line span{color:#c7d6e6;font-size:.95rem}
/* Bandeau preuve / réassurance */
.proofbar{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;color:var(--muted);font-size:.95rem}
.proofbar strong{color:var(--navy)}
.proofbar .dot{width:5px;height:5px;border-radius:50%;background:var(--blue);display:inline-block}
/* Liste à puces "check" */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start}
.checks li::before{content:"";width:22px;height:22px;flex:0 0 auto;margin-top:1px;
background:var(--sky) url(../icons/check.svg) center/14px no-repeat;border-radius:6px}
/* Étapes numérotées */
.steps{counter-reset:step;display:grid;gap:20px}
.steps .step{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start}
.steps .step::before{counter-increment:step;content:counter(step);
width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;
display:grid;place-items:center;font-weight:700;font-family:Georgia,serif}
.steps .step h3{margin:.1em 0 .3em}
/* Encadré vigilance / anti-erreur */
.notebox{border-left:4px solid var(--warning);background:var(--sand);
padding:18px 22px;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.notebox.info{border-left-color:var(--blue)}
/* FAQ (compléments) */
.faq details{border:1px solid var(--line);border-radius:var(--radius-sm);padding:2px 20px;margin-bottom:12px;background:#fff}
.faq summary{cursor:pointer;font-weight:600;color:var(--navy);padding:16px 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;color:var(--blue);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:16px;margin:0;color:var(--ink)}
/* Mini-cas de preuve */
.casecard{border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;background:#fff;box-shadow:var(--shadow-soft)}
.casecard .tag{display:inline-block;background:var(--sky);color:var(--blue-dark);font-weight:700;
font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-bottom:14px}
.casecard dl{display:grid;gap:12px;margin:0}
.casecard dt{font-weight:700;color:var(--navy);font-size:.92rem}
.casecard dd{margin:0 0 4px;color:var(--ink)}
/* ============ SIMULATEUR 2 ÉTAPES (V3 §7) ============ */
.sim2{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:start}
.sim2 .form-card{margin:0}
.sim-step[hidden]{display:none}
.sim-badge{display:inline-flex;gap:8px;align-items:center;font-size:.8rem;font-weight:700;
text-transform:uppercase;letter-spacing:.1em;color:var(--blue-dark);margin-bottom:8px}
.sim-badge .num{background:var(--navy);color:#fff;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.8rem}
.sim-privacy{display:flex;gap:10px;align-items:center;background:var(--sky);color:var(--navy);
padding:12px 16px;border-radius:var(--radius-sm);font-size:.92rem;font-weight:600;margin-top:16px}
.sim-privacy img{width:18px;height:18px}
.sim-result-box{background:var(--navy);color:#fff;border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.sim-result-box h3{color:#fff}
.sim-range{font-family:Georgia,serif;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.1;margin:10px 0 6px;color:#fff}
.sim-range .sep{font-size:1rem;color:#9fc4e6;display:block;margin:2px 0}
.sim-disclaimer{font-size:.86rem;color:#5e6c7d;line-height:1.5;margin-top:14px}
.sim-result-box .sim-disclaimer{color:#c7d6e6}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--muted)}
.consent input{width:auto;margin-top:4px}
.sim-teaser{background:var(--sand);border:1px dashed var(--line);border-radius:var(--radius);padding:30px}
.sim-teaser h3{color:var(--navy);margin:.2em 0 .4em}
.sim-teaser p{margin:0;color:var(--muted)}
.sim-teaser .sim-badge .num{background:var(--muted)}
@media (max-width:860px){
.sim2{grid-template-columns:minmax(0,1fr)}
}
/* Sticky mobile : libellés V3 [Appeler] [Être rappelé] — hérite de .mobile-sticky */
@media (max-width:820px){
.mobile-sticky{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
}
/* Home : blocs silos étanches */
.silo-card{border:1px solid var(--line);border-radius:var(--radius);padding:26px;background:#fff;
box-shadow:var(--shadow-soft);display:flex;flex-direction:column;gap:12px;height:100%}
.silo-card h3{margin:0}
.silo-card .link-arrow{margin-top:auto}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--blue-dark)}
.link-arrow img{width:16px;height:16px}
/* ===== Correctifs roast 2026-07-08 / itération 2026-07-10 ===== */
/* H1 : plus contenu sur desktop (client : « trop gros ») */
h1{font-size:clamp(1.9rem,3vw,3rem);max-width:20ch}
.hero h1{margin-bottom:.5em}
/* Icônes SVG via ![]()
: currentColor inopérant → filtres explicites */
.btn-primary .icon{filter:brightness(0) invert(1)}
.mobile-sticky .btn-secondary .icon{filter:brightness(0)}
/* Téléphone header desktop : bouton à contour de la couleur du texte */
.header-phone{color:#fff;font-weight:700;font-size:.9rem;text-decoration:none;white-space:nowrap;
display:inline-flex;align-items:center;gap:8px;border:1.5px solid currentColor;
border-radius:999px;padding:8px 16px;transition:background .18s,color .18s}
.header-phone .icon{width:16px;height:16px;filter:brightness(0) invert(1)}
.header-phone:hover{background:#fff;color:var(--navy)}
.header-phone:hover .icon{filter:none}
@media (max-width:980px){.header-phone{display:none}}
/* ===== Respiration : rythme vertical dans la prose ===== */
.container-narrow h2{margin-top:1.7em}
.container-narrow h2:first-child{margin-top:0}
.container-narrow .grid{margin:32px 0 8px}
.container-narrow .checks{margin:22px 0}
.container-narrow .steps{margin:30px 0}
.container-narrow .casecard,.container-narrow .notebox{margin-top:26px}
.section{padding:96px 0}
@media (max-width:720px){.section{padding:60px 0}}
/* ===== Hover : dynamiser (client) ===== */
.card,.silo-card,.deal-card,.casecard{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover,.silo-card:hover,.deal-card:hover,.casecard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#c7d6e6}
.nav-dropdown a{transition:background .15s}
.nav-dropdown a:hover{background:var(--sky)}
.btn{transition:transform .12s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.btn:hover{transform:translateY(-1px)}
.deal-card .src{transition:gap .15s}
.deal-card .src:hover{gap:10px}
.tag-soon{transition:background .15s,color .15s}
/* Logo header : +lisibilité (variante sans baseline à fournir) */
.site-logo{width:200px}
/* Chips secteurs à venir : ni boutons morts, ni opacity hack */
.tag-soon{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;
background:var(--sky);color:var(--muted);font-size:.86rem;font-weight:600}
.tag-soon::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);opacity:.45}
/* Bandeau opérations (preuve) */
.deals-strip{display:flex;flex-wrap:wrap;gap:12px 34px;align-items:baseline;margin-top:22px}
.deals-strip .deal{font-family:Georgia,serif;font-size:1.35rem;color:var(--navy);letter-spacing:.01em}
/* Mur d'opérations de référence (tombstones) */
.deal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:34px}
.deal-card{border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;background:#fff;
box-shadow:var(--shadow-soft);display:flex;flex-direction:column;gap:10px}
.deal-card .role{align-self:flex-start;font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
padding:5px 11px;border-radius:999px}
.deal-card .role.cedant{background:#eaf6fb;color:var(--blue-dark)}
.deal-card .role.acquereur{background:var(--sand);color:var(--warning)}
.deal-card h3{font-family:Georgia,serif;font-size:1.28rem;margin:0;color:var(--navy);line-height:1.25}
.deal-card .meta{font-size:.9rem;color:var(--muted);font-weight:600}
.deal-card p{margin:0;font-size:.95rem;color:var(--ink)}
.deal-card .src{margin-top:auto;font-size:.82rem;color:var(--blue-dark);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.deal-card .src img{width:14px;height:14px}
@media (max-width:720px){.deal-grid{grid-template-columns:minmax(0,1fr)}}
/* ===== Logos d'opérations (mur de preuve, normalisés monochrome) ===== */
.deal-logo{height:30px;width:auto;max-width:150px;object-fit:contain;filter:brightness(0);opacity:.6;margin-bottom:6px;transition:opacity .18s}
.deal-card:hover .deal-logo{opacity:.92}
/* ===== Footer : réseaux sociaux ===== */
.footer-social{display:inline-flex;align-items:center;gap:8px;color:#cbd6e2;text-decoration:none;font-weight:600;transition:color .18s}
.footer-social svg{width:22px;height:22px}
.footer-social:hover{color:#fff}
/* ============================================================
Images AI + animations (2026-07-13) — SEO/accessibilité safe
============================================================ */
/* Cadre image avec zoom doux au survol (ne masque aucun texte) */
.img-frame{overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow-soft);background:var(--navy)}
.img-frame img{display:block;width:100%;height:auto;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.img-frame:hover img{transform:scale(1.045)}
/* Bande média pleine largeur : image en fond, texte en HTML par-dessus (jamais dans l'image) */
.media-band{position:relative;border-radius:var(--radius);overflow:hidden;isolation:isolate}
.media-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.media-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,24,46,.92),rgba(8,24,46,.55))}
.media-band .media-inner{padding:56px 44px;color:#fff;max-width:640px}
.media-band .media-inner h2,.media-band .media-inner h3{color:#fff}
.media-band .media-inner p{color:#d7e2ee}
@media (max-width:720px){.media-band .media-inner{padding:38px 24px}}
/* Motif grille en filigrane (fond de section clair) */
.has-motif{position:relative;isolation:isolate}
.has-motif::before{content:"";position:absolute;inset:0;z-index:-1;
background:url(../images/ai/motif-grille.jpg) center/1100px repeat;opacity:.05;pointer-events:none}
/* Reveal au scroll — BULLETPROOF. Défaut = VISIBLE (aucun masquage en base).
L'entrée est une animation keyframe qui se termine TOUJOURS à opacity:1, appliquée
seulement quand l'élément entre dans le viewport. Si le JS/scroll ne marche pas,
l'élément reste simplement visible. Impossible de masquer un texte. */
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.reveal.in{animation:riseIn .7s cubic-bezier(.2,.6,.2,1) both}
@media (prefers-reduced-motion:reduce){.reveal.in{animation:none}}
/* ============================================================
Diagnostic de cessibilité (V4) — pas de simulateur chiffré
============================================================ */
.diag-form{display:grid;gap:16px}
.diag-q{border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 20px;margin:0;background:#fff}
.diag-q legend{font-weight:600;color:var(--navy);padding:0 6px;display:flex;align-items:center;gap:10px;line-height:1.3}
.diag-n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;display:inline-grid;place-items:center;font-size:.82rem;font-family:Georgia,serif}
.diag-opts{display:grid;gap:8px;margin-top:12px}
.diag-opt{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s}
.diag-opt:hover{border-color:#bac8d4;background:var(--sky)}
.diag-opt input{width:auto;margin:0;accent-color:var(--blue)}
.diag-opt:has(input:checked){border-color:var(--blue);background:var(--sky);font-weight:600;color:var(--navy)}
/* Résultat */
.diag-result{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-soft);margin-top:30px}
.diag-head{background:var(--navy);color:#fff;padding:28px 30px;display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.diag-score{font-family:Georgia,serif;font-size:3rem;line-height:1;color:#fff}
.diag-score small{font-size:1rem;color:#9fc4e6}
.diag-head h3{color:#fff;margin:0}
.diag-head .diag-niveau{font-size:1.35rem}
.diag-gauge{--p:0;flex:1 1 200px;min-width:160px;height:10px;border-radius:999px;background:rgba(255,255,255,.18);position:relative;overflow:hidden}
.diag-gauge::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--p)*1%);border-radius:999px;background:var(--blue)}
.diag-gauge.low::after{background:var(--warning)}
.diag-gauge.mid::after{background:var(--blue)}
.diag-gauge.high::after{background:var(--success)}
.diag-body{padding:26px 30px;display:grid;gap:22px}
@media(min-width:720px){.diag-body{grid-template-columns:1fr 1fr}.diag-body .diag-actions-wrap{grid-column:1/-1}}
.diag-body h4{margin:0 0 10px;color:var(--navy);font-family:Inter,sans-serif;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}
.diag-body ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.diag-body ul li{display:flex;gap:10px;align-items:flex-start;font-size:.96rem}
.diag-body ul li::before{content:"";width:18px;height:18px;flex:0 0 auto;margin-top:1px;border-radius:5px;background:var(--sky) url(../icons/check.svg) center/12px no-repeat}
.diag-actions-wrap ul li::before{background:var(--sand) url(../icons/arrow.svg) center/12px no-repeat}
.diag-disclaimer{background:var(--sand);border-radius:var(--radius-sm);padding:14px 18px;font-size:.88rem;color:var(--muted);margin-top:6px}
/* Diagnostic V5 : progression + résumé */
.diag-step{margin-left:auto;font-size:.72rem;font-weight:700;color:var(--muted);background:var(--sky);padding:2px 9px;border-radius:999px;white-space:nowrap}
.diag-q legend{width:100%}
.diag-resume{padding:16px 30px 0;margin:0;color:var(--muted);font-size:.96rem}
/* ============================================================
V8.1 — retours client 2026-07-14
============================================================ */
/* --- 1. Menu : jamais sur 2 lignes --- */
/* Le contenu de l'en-tête (1323 px) dépassait son conteneur (1180 px) : le
bouton « Parler à un expert » se retrouvait coupé entre 1081 et 1440 px. */
@media (min-width:1081px){
.site-header .header-inner{width:min(calc(100% - 40px),1220px);gap:18px}
.site-header .site-logo{width:178px}
.site-header .desktop-nav{gap:3px}
.site-header .desktop-nav .nav-link,
.site-header .desktop-nav .nav-button{padding-left:8px;padding-right:8px}
}
@media (min-width:1081px) and (max-width:1219px){
.site-header .header-phone{display:none}
}
@media (min-width:1220px){
.site-header .header-phone{padding-left:12px;padding-right:12px}
}
.desktop-nav{flex-wrap:nowrap}
.nav-link,.nav-button{white-space:nowrap}
.nav-dropdown strong,.nav-dropdown span{white-space:normal}
@media (max-width:1320px){
.desktop-nav{gap:2px}
.nav-link,.nav-button{padding:10px 9px;font-size:.85rem}
}
@media (max-width:1200px){
.header-phone{display:none}
}
/* --- 2. Sticky mobile façon app --- */
@media (max-width:860px){
.mobile-sticky{
grid-template-columns:1fr 1.3fr;gap:9px;
padding:9px 10px calc(9px + env(safe-area-inset-bottom));
background:rgba(255,255,255,.94);backdrop-filter:saturate(160%) blur(14px);
-webkit-backdrop-filter:saturate(160%) blur(14px);
border-top:1px solid rgba(8,24,46,.08);box-shadow:0 -14px 34px rgba(8,24,46,.14)
}
.mobile-sticky a,.mobile-sticky button{min-height:54px;border-radius:17px;font-size:.95rem;gap:9px;font-weight:850}
.mobile-sticky .icon{width:19px;height:19px}
.mobile-sticky .btn-primary{box-shadow:0 8px 22px rgba(22,137,201,.35)}
}
/* --- 3. Respiration entre sections --- */
.section{padding:106px 0}
.section-sm{padding:72px 0}
.section .section-head{margin-bottom:52px}
@media (max-width:860px){
.section{padding:74px 0}
.section-sm{padding:54px 0}
.section .section-head{margin-bottom:36px}
}
/* --- 4. Tableaux : en-tête gradient, zébrage doux --- */
.table-wrap{border:0;box-shadow:var(--shadow-soft);border-radius:20px}
.table-wrap thead th{
background:linear-gradient(115deg,var(--navy) 0%,#0d3557 58%,var(--blue-dark) 135%);
color:#fff;border:0;font-weight:750;letter-spacing:.02em
}
.table-wrap thead th:first-child{border-top-left-radius:20px}
.table-wrap thead th:last-child{border-top-right-radius:20px}
.table-wrap tbody tr:nth-child(even){background:linear-gradient(90deg,rgba(22,137,201,.06),rgba(22,137,201,.015))}
.table-wrap tbody tr:hover{background:rgba(22,137,201,.09)}
.table-wrap tbody td{border-color:#e9eff5}
.table-wrap tbody strong{color:var(--navy)}
/* --- 5. Superposition de couleur : encadrés en couches --- */
.notebox{
border:0;border-left:4px solid var(--blue);
background:linear-gradient(125deg,var(--sand) 0%,#fdfbf7 55%,rgba(22,137,201,.07) 130%);
box-shadow:var(--shadow-soft);border-radius:0 18px 18px 0
}
.notebox.info{background:linear-gradient(125deg,#eef6fb 0%,#f8fcfe 60%,rgba(22,137,201,.08) 130%)}
.layer-panel{
position:relative;border-radius:var(--radius);padding:30px 32px;color:#fff;overflow:hidden;
background:linear-gradient(130deg,var(--navy) 0%,#0d3557 62%,var(--blue-dark) 140%)
}
.layer-panel::after{
content:"";position:absolute;right:-90px;top:-110px;width:280px;height:280px;border-radius:50%;
border:1px solid rgba(255,255,255,.14);box-shadow:0 0 0 48px rgba(255,255,255,.03);pointer-events:none
}
.layer-panel h3,.layer-panel h4{color:#fff}
.layer-panel p,.layer-panel li{color:#d7e4ee}
/* --- 6. Hero avec image de fond en transparence (contraste AA garanti) --- */
.hero-photo{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:88px 0 96px}
.hero-photo .hero-bg{position:absolute;inset:0;z-index:0}
.hero-photo .hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-photo .hero-bg::after{
content:"";position:absolute;inset:0;
background:linear-gradient(93deg,rgba(8,24,46,.96) 4%,rgba(8,24,46,.82) 48%,rgba(8,24,46,.48) 100%)
}
.hero-photo .container{position:relative;z-index:1}
.hero-photo h1,.hero-photo h2{color:#fff}
.hero-photo .lead{color:#dce8f2;max-width:62ch}
.hero-photo .eyebrow{color:#8fd0f4}
.hero-photo .proofbar{color:#c8d8e5}
.hero-photo .proofbar strong,.hero-photo p strong,.hero-photo li strong{color:#fff}
.hero-photo .breadcrumbs{color:#bccddd}
.hero-photo .breadcrumbs li:not(:last-child)::after{color:#8aa0b5}
.layer-panel p strong,.layer-panel li strong{color:#fff}
.hero-photo .btn-secondary{background:rgba(255,255,255,.96)}
@media (max-width:860px){
.hero-photo{padding:56px 0 66px}
.hero-photo .hero-bg::after{background:linear-gradient(180deg,rgba(8,24,46,.94) 30%,rgba(8,24,46,.72) 100%)}
}
/* --- 7. Blog / média --- */
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0 6px;font-size:.88rem;color:var(--muted)}
.post-meta time{font-weight:600}
.avatar{
width:44px;height:44px;border-radius:50%;flex:0 0 auto;
background:linear-gradient(135deg,var(--navy) 20%,var(--blue-dark));color:#fff;
display:inline-grid;place-items:center;font-weight:800;font-size:.9rem;letter-spacing:.04em
}
.post-meta .avatar{width:38px;height:38px;font-size:.78rem}
.post-cat{
display:inline-block;background:var(--sky);color:var(--blue-dark);border-radius:999px;
padding:5px 13px;font-weight:750;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none
}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:26px 0 0}
.tag-list a,.tag-list span{
display:inline-block;border:1px solid var(--line);border-radius:999px;padding:6px 14px;
font-size:.8rem;text-decoration:none;color:var(--ink);background:#fff
}
.tag-list a:hover{border-color:var(--blue);color:var(--blue-dark);background:var(--sky)}
.author-box{
display:flex;gap:18px;align-items:flex-start;margin-top:48px;
border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:0 18px 18px 0;
padding:24px 26px;background:linear-gradient(120deg,#fff 30%,#eef6fb 130%)
}
.author-box .avatar{width:58px;height:58px;font-size:1.05rem}
.author-box strong{display:block;color:var(--navy);font-size:1.02rem}
.author-box .author-role{display:block;font-size:.8rem;color:var(--blue-dark);font-weight:700;margin-top:2px}
.author-box p{margin:8px 0 0;font-size:.9rem;color:var(--muted)}
.post-card{
display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--line);
border-radius:var(--radius);padding:26px 28px;box-shadow:0 8px 26px rgba(8,24,46,.045);height:100%
}
.post-card:hover{border-color:#bfd4e4;box-shadow:var(--shadow-soft)}
.post-card h3{margin:0}
.post-card h3 a{text-decoration:none;color:var(--navy)}
.post-card h3 a:hover{color:var(--blue-dark)}
.post-card .post-meta{margin:0}
.post-card .link-arrow{margin-top:auto;padding-top:8px}
/* --- 8. Gras stratégique : le porte visuellement --- */
.article-body strong,main p strong,main li strong{color:var(--navy)}
/* --- 9. Diagnostic : design V8.1 --- */
.diag-q{border:1px solid #e4ebf2;border-radius:18px;padding:22px 24px;box-shadow:0 6px 20px rgba(8,24,46,.05)}
.diag-q:focus-within{border-color:var(--blue);box-shadow:0 10px 26px rgba(22,137,201,.13)}
.diag-opt{border-radius:12px;padding:13px 16px}
.diag-progress{font-size:.78rem;font-weight:800;color:var(--blue-dark);background:var(--sky);border-radius:999px;padding:4px 11px;margin-left:auto}
/* ============================================================
V8.2 — retours client 2026-07-15
============================================================ */
/* --- 1. Hero LP : formulaire direct dans le hero --- */
.hero-photo .hero-grid-lp{
display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
gap:56px;align-items:center
}
.hero-form{
background:#fff;border-radius:22px;box-shadow:0 30px 80px rgba(4,13,24,.45);
padding:28px 28px 24px;color:var(--ink)
}
.hero-form h2,.hero-form .hero-form-title{
font-size:1.35rem;color:var(--navy);margin:0 0 6px
}
.hero-form .hero-form-sub{font-size:.86rem;color:var(--muted);margin:0 0 18px;line-height:1.45}
.hero-form label{display:block;font-size:.8rem;font-weight:700;color:var(--navy);margin-bottom:12px}
.hero-form input,.hero-form select{
display:block;width:100%;margin-top:5px;border:1px solid var(--line);border-radius:12px;
padding:12px 14px;font:inherit;font-size:.95rem;background:#fff;color:var(--ink)
}
.hero-form input:focus,.hero-form select:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}
.hero-form .btn{width:100%;margin-top:4px}
.hero-form .hero-form-note{font-size:.74rem;color:var(--muted);text-align:center;margin:10px 0 0}
.hero-form .hero-form-note::before{content:"🔒 ";font-size:.7rem}
.hero-photo .proofbar{margin-top:24px}
@media (max-width:860px){
.hero-photo .hero-grid-lp{grid-template-columns:minmax(0,1fr);gap:30px}
.hero-form{padding:22px 18px 18px}
}
/* --- 2. Proofbar : poids uniforme + checkmarks à la place des bullets --- */
.proofbar{font-weight:600}
.proofbar strong{font-weight:600}
.proofbar .dot{display:none}
.proofbar > span:not(.dot)::before{content:"✓ ";font-weight:900;color:var(--blue)}
.hero-photo .proofbar > span:not(.dot)::before{color:#7cc6ef}
.hero-photo .proofbar{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
/* Variante liste : c'est la forme produite par l'éditeur de blocs. */
ul.proofbar{list-style:none;margin:0;padding:0}
ul.proofbar li::before{content:"✓ ";font-weight:900;color:var(--blue)}
/* Une mention sur deux lignes s'aligne sous le texte, pas sous la coche. */
ul.proofbar li{padding-left:1.4em;text-indent:-1.4em}
.wp-block-cover.hero-banniere ul.proofbar{flex-direction:column;align-items:flex-start;gap:9px;margin-top:24px}
.wp-block-cover.hero-banniere ul.proofbar li::before{color:#7cc6ef}
/* --- 3. Menu Secteurs : icônes ligne monochromes --- */
.nav-dropdown a.has-icon{display:flex;align-items:center;gap:12px}
.nav-dropdown a.has-icon img{width:21px;height:21px;flex:0 0 auto;opacity:.85}
.nav-dropdown a.has-icon:hover img{opacity:1}
/* --- 4. Page simulateur : layout centré, titres dans le cadre --- */
.sim-page .container-narrow{max-width:820px}
.sim-page .page-head{text-align:center;padding:54px 0 8px}
.sim-page .page-head h1{margin-left:auto;margin-right:auto}
.sim-page .page-head .lead{margin-left:auto;margin-right:auto}
.diag-q{position:relative;padding:24px 24px 22px}
.diag-q legend{
float:left;width:100%;padding:0;margin:0 0 4px;
display:flex;align-items:flex-start;gap:12px
}
.diag-q legend .diag-progress{margin-left:auto;flex:0 0 auto}
.diag-q .diag-opts{clear:both;margin-top:14px}
.sim-disclaimer{
border:1px solid var(--line);border-radius:14px;background:#fbfcfd;
font-size:.8rem;color:var(--muted);line-height:1.55;padding:16px 18px;margin-top:26px
}
/* ============================================================
V8.3 — retours client 2026-07-15 (2e salve)
============================================================ */
/* --- 1. Radius resserrés : plus sérieux, plus premium --- */
:root{--radius-sm:8px;--radius:12px;--radius-lg:16px}
.btn{border-radius:10px}
.header-phone{border-radius:10px}
.menu-toggle{border-radius:10px}
.nav-dropdown{border-radius:12px}
.nav-dropdown a{border-radius:8px}
.nav-link,.nav-button{border-radius:8px}
.hero-form{border-radius:14px}
.hero-form input,.hero-form select{border-radius:8px}
.hero-card{border-radius:12px}
.modal-dialog{border-radius:14px}
.modal-close{border-radius:8px}
.mobile-sticky a,.mobile-sticky button{border-radius:12px}
.mobile-panel a,.mobile-panel summary{border-radius:8px}
.mobile-panel details[open]{border-radius:10px}
.table-wrap{border-radius:12px}
.table-wrap thead th:first-child{border-top-left-radius:12px}
.table-wrap thead th:last-child{border-top-right-radius:12px}
.diag-q{border-radius:12px}
.diag-opt{border-radius:8px}
.diag-result{border-radius:12px}
.notebox,.author-box{border-radius:0 12px 12px 0}
.post-cat{border-radius:6px;}
.tag-list a,.tag-list span{border-radius:6px}
.pill-list li{border-radius:8px}
.proof-item{border-radius:10px}
.reference-item{border-radius:10px}
.sim-disclaimer{border-radius:10px}
.eyebrow{border-radius:6px}
.number{border-radius:10px}
/* les avatars à initiales et la jauge restent circulaires (identité, lisibilité) */
/* --- 2. Logos des opérations --- */
.deal-logo{
display:block;max-height:34px;width:auto;max-width:150px;
margin:2px 0 12px;object-fit:contain
}
/* --- 3. Emplacement photo ville (maquette) --- */
.img-placeholder{
border:1.5px dashed #b7c6d4;border-radius:12px;background:#f4f8fb;
display:grid;place-items:center;min-height:240px;color:var(--muted);
font-size:.85rem;text-align:center;padding:20px;margin:8px 0
}
.img-placeholder strong{display:block;color:var(--navy);margin-bottom:4px}
/* --- 4. Bandeau villes (footer) --- */
.footer-cities{
border-top:1px solid rgba(255,255,255,.1);margin-top:28px;padding-top:18px;
font-size:.8rem;color:#9fb0c4;line-height:2
}
.footer-cities a{color:#c3d2e0;text-decoration:none;white-space:nowrap}
/* Le lien final est une phrase : il doit pouvoir passer à la ligne sur mobile. */
.footer-cities a:last-child,
.footer-cities a strong{white-space:normal}
.footer-cities a:hover{color:#fff;text-decoration:underline}
.footer-cities .sep{margin:0 7px;color:#5d7186}
/* --- V8.3b : section « Le M&A à {Ville} » — photo et texte côte à côte sur desktop --- */
.city-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.85fr);gap:40px;align-items:stretch;margin-top:20px}
.city-split .img-placeholder{margin:0;min-height:100%}
.city-split .img-frame{margin:0;height:100%}
.city-split .img-frame img{height:100%;object-fit:cover}
@media (max-width:860px){.city-split{grid-template-columns:minmax(0,1fr);gap:20px}.city-split .img-placeholder{min-height:220px}}
/* ============================================================
V8.4 — radius encore resserrés (2026-07-15)
============================================================ */
:root{--radius-sm:6px;--radius:10px;--radius-lg:12px}
.btn{border-radius:8px}
.header-phone,.menu-toggle{border-radius:8px}
.nav-dropdown{border-radius:10px}
.nav-dropdown a,.nav-link,.nav-button{border-radius:6px}
.hero-form{border-radius:10px}
.hero-form input,.hero-form select{border-radius:6px}
.hero-card{border-radius:10px}
.modal-dialog{border-radius:10px}
.modal-close{border-radius:6px}
.mobile-sticky a,.mobile-sticky button{border-radius:10px}
.mobile-panel a,.mobile-panel summary{border-radius:6px}
.mobile-panel details[open]{border-radius:8px}
.table-wrap,.diag-result{border-radius:10px}
.table-wrap thead th:first-child{border-top-left-radius:10px}
.table-wrap thead th:last-child{border-top-right-radius:10px}
.diag-q{border-radius:10px}
.diag-opt{border-radius:6px}
.notebox,.author-box{border-radius:0 10px 10px 0}
.post-cat,.tag-list a,.tag-list span{border-radius:4px}
.pill-list li{border-radius:6px}
.proof-item,.reference-item,.sim-disclaimer{border-radius:8px}
.img-placeholder{border-radius:10px}
.img-frame{border-radius:10px}
.eyebrow{border-radius:4px}
.number{border-radius:8px}
/* ============================================================
WORDPRESS — liaison entre les styles de l'éditeur de blocs
et la charte Experys.
Chaque « Style » proposé dans l'éditeur retombe ici sur les
classes de la charte déjà validée.
============================================================ */
/* Largeurs : l'éditeur produit .alignwide / .alignfull */
.entry-content > *,
main > .wp-block-group > .wp-block-group__inner-container > * { }
/* --- Sections ---
« padding-block » et non « padding:92px 0 » : le padding latéral vient du
padding racine WordPress (has-global-padding), sinon le texte colle aux
bords de l'écran sur mobile. --- */
.wp-block-group.is-style-section{padding-block:92px}
.wp-block-group.is-style-section-sky{padding-block:92px;background:var(--sky)}
.wp-block-group.is-style-section-sand{padding-block:92px;background:var(--sand)}
.wp-block-group.is-style-section-navy{padding-block:92px;background:var(--navy);color:#fff}
.wp-block-group.is-style-section-navy :is(h1,h2,h3,h4){color:#fff}
.wp-block-group.is-style-section-navy .lead{color:#d7e4ee}
.wp-block-group.is-style-section-navy .eyebrow{color:#83cef3}
@media (max-width:820px){
.wp-block-group.is-style-section,
.wp-block-group.is-style-section-sky,
.wp-block-group.is-style-section-sand,
.wp-block-group.is-style-section-navy{padding-block:58px}
}
/* --- Encadrés --- */
.wp-block-group.is-style-encadre{border-left:4px solid var(--blue);background:var(--sky);
padding:18px 22px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:26px 0}
.wp-block-group.is-style-encadre-alerte{border-left:4px solid var(--warning);background:var(--sand);
padding:18px 22px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:26px 0}
.wp-block-group.is-style-encadre > *:last-child,
.wp-block-group.is-style-encadre-alerte > *:last-child{margin-bottom:0}
.wp-block-group.is-style-carte{border:1px solid var(--line);border-radius:var(--radius);
padding:26px 28px;background:#fff;box-shadow:var(--shadow-soft)}
.wp-block-group.is-style-carte > *:last-child{margin-bottom:0}
/* --- Paragraphes --- */
p.is-style-chapo{font-size:clamp(1.05rem,1.4vw,1.24rem);line-height:1.62;color:#405166;max-width:68ch}
p.is-style-surtitre{display:inline-flex;align-items:center;gap:8px;color:var(--blue-dark);
font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;margin:0 0 15px}
p.is-style-surtitre::before{content:"";width:28px;height:2px;background:currentColor;border-radius:2px}
p.is-style-note{font-size:.88rem;color:var(--muted)}
/* --- Listes --- */
ul.is-style-coches{list-style:none;padding:0;margin:0 0 1.15em;display:grid;gap:12px}
ul.is-style-coches li{display:flex;gap:12px;align-items:flex-start}
ul.is-style-coches li::before{content:"";width:22px;height:22px;flex:0 0 auto;margin-top:1px;
background:var(--sky) url(../icons/check.svg) center/14px no-repeat;border-radius:6px}
ol.is-style-etapes{counter-reset:step;list-style:none;padding:0;margin:0 0 1.15em;display:grid;gap:20px}
ol.is-style-etapes li{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start}
ol.is-style-etapes li::before{counter-increment:step;content:counter(step);
width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;
display:grid;place-items:center;font-weight:700;font-family:Georgia,serif}
/* --- Tableaux --- */
.wp-block-table.is-style-experys{overflow-x:auto}
.wp-block-table.is-style-experys table{width:100%;border-collapse:collapse;background:#fff;
border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.wp-block-table.is-style-experys th{background:var(--navy);color:#fff;text-align:left;
padding:14px 16px;font-size:.92rem}
.wp-block-table.is-style-experys td{padding:14px 16px;border-top:1px solid var(--line);vertical-align:top}
/* --- Images --- */
.wp-block-image.is-style-arrondie img{border-radius:var(--radius);box-shadow:var(--shadow-soft)}
/* --- Colonnes en cartes --- */
.wp-block-columns.is-style-cartes{gap:28px}
.wp-block-columns.is-style-cartes > .wp-block-column{border:1px solid var(--line);border-radius:var(--radius);
padding:26px 28px;background:#fff;box-shadow:var(--shadow-soft)}
.wp-block-columns.is-style-cartes > .wp-block-column > *:last-child{margin-bottom:0}
/* --- Questions fréquentes --- */
.wp-block-details.is-style-faq{border:1px solid var(--line);border-radius:var(--radius-sm);
padding:2px 20px;margin-bottom:12px;background:#fff}
.wp-block-details.is-style-faq summary{cursor:pointer;font-weight:600;color:var(--navy);
padding:16px 0;list-style:none;position:relative}
.wp-block-details.is-style-faq summary::-webkit-details-marker{display:none}
.wp-block-details.is-style-faq summary::after{content:"+";position:absolute;right:0;color:var(--blue);font-size:1.4rem;line-height:1}
.wp-block-details.is-style-faq[open] summary::after{content:"–"}
.wp-block-details.is-style-faq p{padding-bottom:16px;margin:0}
/* --- Citations --- */
.wp-block-quote.is-style-experys{border-left:4px solid var(--blue);padding:6px 0 6px 22px;margin:26px 0;font-style:normal}
.wp-block-quote.is-style-experys p{font-size:1.1rem;color:var(--navy)}
.wp-block-quote.is-style-experys cite{color:var(--muted);font-size:.9rem;font-style:normal}
/* --- Boutons de l'éditeur alignés sur .btn --- */
.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:50px;padding:12px 21px;border-radius:999px;border:1px solid transparent;
text-decoration:none;font-weight:800;font-size:.94rem;line-height:1.2;
background:var(--blue);color:#fff;box-shadow:0 12px 26px rgba(22,137,201,.24);
transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.wp-block-button__link:hover{background:var(--blue-dark);color:#fff;transform:translateY(-1px)}
.wp-block-button.is-style-outline .wp-block-button__link,
.is-style-section-navy .wp-block-button.is-style-outline .wp-block-button__link{
background:#fff;color:var(--navy);border-color:var(--line);box-shadow:none}
/* --- Contenu rédactionnel --- */
.prose > *{max-width:none}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.3em}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.3em}
.prose li{margin-bottom:.5em}
.prose img{border-radius:var(--radius-sm)}
/* --- Cartes de liste d'articles --- */
.card-tag{display:inline-block;background:var(--sky);color:var(--blue-dark);font-weight:700;
font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;
border-radius:999px;margin:0 0 12px}
.card-title{font-size:1.18rem;margin:0 0 .5em}
.card-title a{color:var(--navy);text-decoration:none}
.card-title a:hover{color:var(--blue-dark);text-decoration:underline}
/* --- En-tête d'article --- */
.article-head{padding-bottom:0}
.article-byline{margin-top:-.3em}
.article-figure{margin:26px auto}
.article-cover{border-radius:var(--radius);width:100%;height:auto}
.author-name{font-size:1.25rem;margin:.2em 0 .4em}
/* --- Fil d'Ariane --- */
.breadcrumbs{padding-top:22px;font-size:.86rem;color:var(--muted)}
.breadcrumbs p{margin:0}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--navy)}
/* --- Pagination --- */
.wp-block-query-pagination,.pagination{display:flex;gap:10px;justify-content:center;margin-top:42px}
.pagination .page-numbers{display:inline-grid;place-items:center;min-width:44px;height:44px;
padding:0 12px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--navy)}
.pagination .page-numbers.current{background:var(--navy);color:#fff;border-color:var(--navy)}
/* --- Alignements natifs --- */
.alignwide{width:min(calc(100% - 40px),1180px);margin-inline:auto}
.alignfull{width:100%;margin-inline:0;max-width:none}
.aligncenter{margin-inline:auto}
/* --- Bandeau d'ouverture (bloc Bannière) --- */
.wp-block-cover.hero-banniere{padding:88px 0 96px;min-height:0;color:#fff}
.wp-block-cover.hero-banniere :is(h1,h2,h3){color:#fff}
.wp-block-cover.hero-banniere .lead,
.wp-block-cover.hero-banniere .is-style-chapo{color:#dce8f2;max-width:62ch}
.wp-block-cover.hero-banniere .eyebrow,
.wp-block-cover.hero-banniere .is-style-surtitre{color:#8fd0f4}
.wp-block-cover.hero-banniere .proofbar{color:#c8d8e5}
.wp-block-cover.hero-banniere :is(p,li) strong{color:#fff}
.wp-block-cover.hero-banniere .wp-block-cover__inner-container{width:min(calc(100% - 40px),1180px);margin-inline:auto}
@media (max-width:860px){
.wp-block-cover.hero-banniere{padding:56px 0 66px}
.wp-block-cover.hero-banniere .wp-block-cover__background{
background:linear-gradient(180deg,rgba(8,24,46,.94) 30%,rgba(8,24,46,.72) 100%) !important}
}
.wp-block-cover.hero-banniere .hero-grid-lp{
display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
@media (max-width:980px){
.wp-block-cover.hero-banniere .hero-grid-lp{grid-template-columns:minmax(0,1fr);gap:30px}
}
/* --- Correctif responsive : le panneau de menu mobile fermé ne doit pas
élargir la page. Sans cela, un défilement horizontal apparaît sur mobile.
« visibility » rend aussi ses liens inatteignables au clavier tant qu'il
est fermé, ce qui est le comportement attendu. --- */
.mobile-panel{visibility:hidden}
.mobile-panel.open{visibility:visible}
html,body{overflow-x:clip}
/* Le voile dégradé du bandeau doit couvrir l'image en totalité.
Sans cette règle, WordPress applique une opacité de 50 % au voile
et l'image de fond apparaît délavée. */
.hero-banniere .wp-block-cover__background{opacity:1}
/* --- 10. Article : mise en page à deux colonnes, partage, miniatures ---
Le formulaire accompagne la lecture sur grand écran (colonne collante) et
passe sous l'article sur mobile, après le contenu qui a amené le visiteur. */
.article-layout--post{grid-template-columns:minmax(0,1fr) 340px;gap:52px}
.article-layout--post .article-main{min-width:0}
.article-sidebar-sticky{position:sticky;top:calc(var(--header-h) + 24px)}
.article-sidebar-sticky .hero-form{box-shadow:0 14px 40px rgba(8,24,46,.13);border:1px solid var(--line)}
.article-head .breadcrumbs{padding-top:0;margin-bottom:18px}
.article-wrap{padding-top:0}
.article-single .article-figure{margin:0 0 18px}
.article-single .author-box{margin-top:44px}
/* Partage : liens simples, aucun script de réseau social chargé. */
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 30px;
padding-bottom:22px;border-bottom:1px solid var(--line)}
.share-label{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:var(--muted);margin-right:4px}
.share-btn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:.85rem;
font-weight:700;color:var(--navy);background:#fff;border:1px solid var(--line);
border-radius:999px;padding:8px 15px;text-decoration:none;cursor:pointer;
transition:border-color .15s,color .15s,background .15s}
.share-btn:hover{border-color:var(--blue);color:var(--blue-dark);background:var(--sky)}
.share-btn .share-icon{width:16px;height:16px}
.share-btn[data-copie-ok]{border-color:var(--blue);color:var(--blue-dark);background:var(--sky)}
/* Cartes d'article avec miniature : l'image et le titre mènent à l'article. */
.post-card{padding:0;overflow:hidden}
.post-card .card-body{display:flex;flex-direction:column;gap:0;padding:24px 26px 26px}
.post-card .card-body p:last-child{margin-bottom:0}
.card-thumb{display:block;aspect-ratio:16/10;background:var(--sky);overflow:hidden}
.card-thumb img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .35s ease}
.post-card:hover .card-thumb img,
.post-card:focus-within .card-thumb img{transform:scale(1.045)}
.post-card:hover .card-title a{color:var(--blue-dark)}
@media (max-width:980px){
.article-layout--post{grid-template-columns:minmax(0,1fr);gap:44px}
.article-layout--post .article-sidebar{order:2}
.article-sidebar-sticky{position:static}
}
@media (prefers-reduced-motion:reduce){
.card-thumb img{transition:none}
.post-card:hover .card-thumb img{transform:none}
}
/* Question anti-robot : discrète mais visible, alignée sur les autres champs. */
.hero-form .form-captcha{background:var(--sand);border-radius:12px;padding:12px 14px}
.hero-form .form-captcha input{max-width:120px}
/* --- 11. Harmonisation d'ensemble (audit design du 2026-08-02) ---------------
Cinq défauts corrigés ici : accordéons en escalier, cartes écrasées quand la
ligne compte plus de quatre colonnes, deux boutons primaires côte à côte,
titres collés au panneau qui les précède, méta d'article sans séparateur. */
/* Accordéons : la mise en page « contrainte » de WordPress pose une marge
automatique sur chaque bloc ; combinée au conteneur flex, chaque question se
réduisait à la largeur de son texte et se décalait en escalier. */
.wp-block-group.faq{display:block}
.wp-block-group.faq > .wp-block-details{
width:auto;max-width:none;margin-left:0;margin-right:0}
/* Cartes : au-delà de quatre colonnes, la répartition en flex donnait des
colonnes de 120 px où les titres se coupaient lettre par lettre. La grille
reprend la main et fixe une largeur minimale lisible. */
.wp-block-columns.is-style-cartes{
display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.wp-block-columns.is-style-cartes > .wp-block-column{
flex-basis:auto;width:auto;min-width:0}
.wp-block-columns.is-style-cartes > .wp-block-column > :is(h2,h3,h4){
max-width:none;font-size:1.12rem;line-height:1.3;hyphens:none}
@media (max-width:600px){
.wp-block-columns.is-style-cartes{grid-template-columns:minmax(0,1fr)}
}
/* Un seul appel à l'action dominant : le premier bouton porte la couleur,
les suivants passent en secondaire pour ne pas se concurrencer. */
.hero-actions > a:not(:first-child),
.cta-panel .cluster > a:not(:first-child){
background:#fff;color:var(--navy);border:1px solid var(--line);box-shadow:none}
.hero-actions > a:not(:first-child):hover,
.cta-panel .cluster > a:not(:first-child):hover{
background:#fff;color:var(--navy);border-color:#bac8d4;box-shadow:var(--shadow-soft)}
.hero-photo .hero-actions > a:not(:first-child),
.wp-block-cover.hero-banniere .hero-actions > a:not(:first-child){
background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.hero-photo .hero-actions > a:not(:first-child):hover,
.wp-block-cover.hero-banniere .hero-actions > a:not(:first-child):hover{
background:#fff;color:var(--navy);border-color:#fff}
/* Respiration : un titre qui suit un panneau ou un encadré doit s'en détacher. */
:is(.layer-panel,.notebox,.casecard,.wp-block-table,.wp-block-details) + :is(h2,h3){
margin-top:2.1em}
.prose > :is(.layer-panel,.notebox,.casecard):not(:first-child){margin-top:2em}
/* Méta d'article : séparateur visible entre l'auteur et la date. */
.post-meta{gap:0 10px}
.post-meta > * + *::before{content:"·";margin-right:10px;color:#9fb0bf}
.post-meta .avatar + *::before{content:none}
/* --- 12. Correctifs d'audit visuel (2026-08-03) -----------------------------
Deux défauts que seule l'inspection du rendu réel a révélés. */
/* Un panneau encadré garde son propre rembourrage. La règle de section
(92 px en haut et en bas, 0 sur les côtés) est faite pour les bandes pleine
largeur ; appliquée à une carte, elle collait le texte contre le bord. */
.wp-block-group:is(.is-style-section,.is-style-section-sky,.is-style-section-sand,.is-style-section-navy).hero-panel{padding:34px 32px}
.wp-block-group:is(.is-style-section,.is-style-section-sky,.is-style-section-sand,.is-style-section-navy).layer-panel{padding:30px 32px}
.wp-block-group:is(.is-style-section,.is-style-section-sky,.is-style-section-sand,.is-style-section-navy).cta-panel{padding:42px 45px}
.wp-block-group:is(.is-style-section,.is-style-section-sky,.is-style-section-sand,.is-style-section-navy).notebox{padding:18px 22px}
.wp-block-group:is(.is-style-section,.is-style-section-sky,.is-style-section-sand,.is-style-section-navy).casecard{padding:24px 26px}
@media (max-width:720px){
.wp-block-group:is(.is-style-section,.is-style-section-sky,.is-style-section-sand,.is-style-section-navy).hero-panel{padding:24px 20px}
}
/* Encadré auteur : le surtitre, le nom et la biographie s'empilent.
L'alignement en ligne venait de la maquette, qui posait un avatar à côté du
texte ; sans avatar, il écrasait la biographie à 88 px de large sur mobile. */
aside.author-box{display:block}
aside.author-box .eyebrow{margin-bottom:10px}
aside.author-box .author-name{margin:0 0 .45em}
aside.author-box p.muted{margin:0;font-size:.92rem;max-width:76ch}
/* Cartes d'article : la pastille de catégorie doit épouser son texte. Placée
dans un conteneur en colonne, elle était étirée sur toute la largeur ; et la
marge sous le titre était annulée par une règle plus ancienne. */
.post-card .card-body > .card-tag{align-self:flex-start}
.post-card .card-title{margin:0 0 .5em}
/* --- 13. Alignement horizontal (audit du 2026-08-03) ------------------------
Surtitre et chapô ne partaient pas du même bord gauche que le texte courant.
Le surtitre, en « inline-flex », échappait au centrage de la mise en page
contrainte de WordPress et se collait au bord de la section ; le chapô était
épinglé sur une grille de 1180 px par une règle du CSS additionnel héritée
d'une mise en page antérieure, et dépassait de 180 px vers la gauche. */
.wp-block-group.is-layout-constrained > p.is-style-surtitre{
display:flex;justify-content:flex-start;
max-width:var(--wp--style--global--content-size);
margin-left:auto;margin-right:auto}
.wp-block-group.is-layout-constrained > p.is-style-chapo{
max-width:var(--wp--style--global--content-size);
margin-left:auto !important;margin-right:auto !important}
.text-center .is-style-surtitre,
.has-text-align-center.is-style-surtitre{justify-content:center}
/* --- 14. Listes : le texte doit couler d'un seul tenant --------------------
Un « li » en flex ou en grille traite chaque élément inline comme une
colonne : le terme en gras d'entrée de puce se retrouvait isolé dans une
colonne étroite, coupé en deux lignes, et la phrase démarrait à sa droite.
La puce redevient un bloc normal, la coche ou le numéro passe en repère
positionné : le texte s'écoule alors comme une phrase. */
ul.is-style-coches li,
.checks li,
.diag-body ul li{display:block;position:relative;padding-left:34px}
ul.is-style-coches li::before,
.checks li::before,
.diag-body ul li::before{position:absolute;left:0;top:3px}
ol.is-style-etapes li{display:block;position:relative;padding-left:62px;min-height:44px}
ol.is-style-etapes li::before{position:absolute;left:0;top:0}
/* Un titre de niveau 1 placé dans le corps de page ne doit pas être plus large
que le texte qu'il annonce : il débordait de 39 px vers la gauche. */
.wp-block-group.is-layout-constrained > h1{
max-width:min(100%,var(--wp--style--global--content-size))}
/* Rangées d'actions, barre de réassurance et grappes de liens : elles gardaient
une largeur de 1180 px héritée de leur propre réglage de bloc, alors que le
texte autour tient dans 820 px. Elles débordaient de 180 px vers la gauche. */
.wp-block-group.is-layout-constrained > :is(.hero-actions,.proofbar,.cluster,.link-arrow){
max-width:min(100%,var(--wp--style--global--content-size)) !important;
margin-left:auto !important;margin-right:auto !important}
/* Tout bloc de texte placé directement dans une section suit la colonne de
lecture de cette section. Certains gardaient une largeur de 1180 px là où
leurs voisins tenaient dans 820 px, d'où des débuts de ligne en escalier. */
.wp-block-group.is-layout-constrained > :where(h1,h2,h3,h4,p,ul,ol,table,blockquote){
max-width:min(var(--wp--style--global--content-size),100%)}
/* --- 15. Responsive à la source (audit du 2026-08-09) ------------------------
Cause racine du site « pas responsive » sur téléphone : une piste de grille
déclarée « 1fr » garde un minimum automatique égal à la largeur de son
contenu. Un tableau (680 px), une image ou un mot insécable élargissait donc
toute la colonne, et le « overflow-x:clip » global coupait le surplus au
bord de l'écran : moitié de tableau invisible, texte tronqué en fin de
ligne. Les règles ci-dessous suppriment ce minimum partout, font défiler
les tableaux dans leur propre cadre et autorisent la césure des contenus
insécables. Elles valent pour tout contenu futur ajouté dans l'éditeur. */
/* a) Plus aucun enfant de grille ou de flex ne peut élargir sa colonne. */
.grid > *,.hero-grid > *,.split > *,.simulator > *,.article-layout > *,
.footer-grid > *,.trust-grid > *,.process > *,.related-grid > *,
.form-grid > *,.cta-panel > *,.sim2 > *,.city-split > *,.hero-grid-lp > *,
.stateless-proof > *,.deal-grid > *,.diag-body > *,
.wp-block-columns > .wp-block-column,
.article-main,.article-sidebar{min-width:0}
/* b) Tout tableau suit la colonne de lecture sur grand écran et défile dans
son propre cadre sur mobile. Le précédent max-width:100% écrasait la largeur
contrainte générée par WordPress : les tableaux s'étiraient alors sur toute
la fenêtre (jusqu'à plus de 2 400 px) au lieu de rester à 820 px. */
figure.wp-block-table{
width:100%;max-width:min(var(--wp--style--global--content-size,820px),100%);
margin-left:auto;margin-right:auto;overflow-x:auto;
-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.article-body figure.wp-block-table,.prose figure.wp-block-table{margin-left:0;margin-right:0}
/* c) Aucun média ne déborde de sa colonne. */
img,svg,video,iframe,embed,object{max-width:100%}
/* d) Un mot ou une URL plus large que l'écran se coupe au lieu de pousser. */
.article-body,.prose,.card,.hero-form,.footer-grid,.faq{overflow-wrap:break-word}
/* --- 16. Padding latéral des sections de contenu (2026-08-09) ---------------
theme.json active « useRootPaddingAwareAlignments » sans définir le padding
racine : les variables restaient vides et les sections « has-global-padding »
collaient le texte aux deux bords de l'écran sur mobile. Les définir ici
alimente les règles que WordPress génère déjà (padding des sections, marges
négatives des blocs pleine largeur, remise à zéro des sections imbriquées).
Même rythme horizontal que .container : 15 px sur mobile, 20 px au-delà. */
:root{
--wp--style--root--padding-left:clamp(15px,2vw,20px);
--wp--style--root--padding-right:clamp(15px,2vw,20px);
}
/* Dans une colonne .container déjà rembourrée (articles), le padding latéral
des sections ferait un double retrait : on le retire. */
.container .wp-block-group:is(.is-style-section,.is-style-section-sky,.is-style-section-sand,.is-style-section-navy){
padding-left:0;padding-right:0}
/* --- 17. Sommaire d'article : respiration après le bloc (2026-08-09) --------
Un titre qui suit le sommaire s'en détache par sa propre marge haute, mais
un paragraphe n'en a pas : sur 16 articles le texte collait au cadre. La
marge portée par le sommaire vaut pour tous les cas. */
.article-body .toc{margin-bottom:30px}
/* --- 18. Case anti-robot (2026-08-09) ---------------------------------------
Simple case à cocher rendue dans la page : aucune dépendance réseau avant
l'envoi. Le champ échappe à la règle globale input{width:100%}. */
label.form-captcha-case{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600}
label.form-captcha-case input[type=checkbox]{width:22px;height:22px;margin:0;flex:0 0 auto;accent-color:var(--blue)}
label.form-captcha-case span{font-size:.92rem}
/* --- 19. Retour d'envoi visible (2026-08-11) --------------------------------
L'envoi étant natif, le retour arrive par redirection : bandeau en haut de
page. Le correctif règle aussi un défaut historique : .form-status était
masqué par défaut et le script n'ajoutait jamais la classe qui l'affiche —
les messages d'erreur s'écrivaient dans un élément invisible. */
.form-retour{margin:18px 0 0;padding:14px 18px;border-radius:10px;font-weight:600}
.form-retour--ok{background:#e9f8f2;color:#126344;border:1px solid #bfe8d6}
.form-retour--erreur{background:#fdecea;color:#8a1f11;border:1px solid #f5c6c0}
.form-status:not(:empty){display:block}
.form-status--erreur{background:#fdecea;color:#8a1f11}
/* --- 20. Fenêtre de rappel automatique (2026-08-23) --------------------------
Même habillage que la fenêtre de contact (.modal), avec trois différences :
elle passe au-dessus, elle entre en fondu, et sur mobile elle se présente en
panneau bas — un demi-écran refermable d'un geste plutôt qu'un plein écran,
ce que Google considère comme non intrusif. */
.exit-popup{z-index:2100}
.exit-popup .modal-dialog{
width:min(100%,540px);
box-shadow:0 30px 80px rgba(4,13,24,.45);
animation:experys-popup-in .26s cubic-bezier(.22,.75,.3,1) both;
}
.exit-popup .eyebrow{margin:0 0 6px}
.exit-popup h2{font-size:clamp(1.3rem,3vw,1.65rem);line-height:1.2;margin:0 0 8px;max-width:24ch;padding-right:44px}
.exit-popup > .modal-dialog > .muted{font-size:.9rem;line-height:1.5;margin:0 0 16px}
.exit-popup .hero-form{box-shadow:none;padding:0;border:0;background:transparent}
/* Formulaire resserré : la fenêtre doit tenir sur un écran d'ordinateur
portable (≈ 650 px utiles) sans imposer un défilement interne. */
.exit-popup .modal-dialog{padding:24px}
.exit-popup .hero-form label{margin-bottom:9px}
.exit-popup .hero-form input,.exit-popup .hero-form select{padding:10px 13px;margin-top:4px}
.exit-popup .hero-form .form-captcha{padding:9px 12px}
.exit-popup .hero-form .hero-form-note{margin-top:8px}
.exit-popup-poignee{display:none}
@keyframes experys-popup-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes experys-popup-bas{from{transform:translateY(100%)}to{transform:none}}
@media (max-width:780px){
.exit-popup{align-items:flex-end;padding:0}
.exit-popup .modal-dialog{
width:100%;max-height:88vh;border-radius:22px 22px 0 0;
padding:14px 18px calc(20px + env(safe-area-inset-bottom));
animation-name:experys-popup-bas;
}
.exit-popup-poignee{
display:block;width:44px;height:4px;border-radius:2px;background:var(--line);
margin:0 auto 14px;
}
.exit-popup .modal-close{top:12px;right:12px;width:40px;height:40px}
.exit-popup h2{padding-right:44px}
.exit-popup > .modal-dialog > .muted{font-size:.88rem;margin:0 0 16px}
}
@media (prefers-reduced-motion:reduce){
.exit-popup .modal-dialog{animation:none}
}
/* 20. Article : le visuel d’en-tête ne doit pas repousser la réponse sous la ligne de flottaison.
L’image reste l’élément LCP, simplement recadrée en hauteur. */
.article-single .article-cover{max-height:340px;object-fit:cover}
@media (max-width:781px){.article-single .article-cover{max-height:200px}}
/* --- 21. Archives filtrables, cartes, encart « Derniers articles », barre flottante (2026-09-24)
Disposition reprise de la référence hashtagavocats.com/blog (data/ref/archives-spec.md),
habillage Experys. --- */
.archive-head{padding-bottom:0}
.archive-head h1{font-size:clamp(2.1rem,4.2vw,3.4rem);max-width:22ch}
.archive-intro{max-width:76ch}
.archive-intro p:last-child{margin-bottom:0}
.archive-combinaison{margin:-.4em 0 0;color:var(--muted)}
.archive-liste{padding-top:34px}
/* Article à la une : texte à gauche, image à droite */
.post-card--une{
display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0;
padding:0;overflow:hidden;margin-bottom:34px;border-radius:var(--radius);
}
.post-card--une .card-body{padding:38px 40px;gap:0;justify-content:center}
.post-card--une .card-body .eyebrow{margin:0 0 10px}
.post-card--une .card-title{font-size:clamp(1.55rem,2.6vw,2.15rem);line-height:1.15;margin:0 0 .55em}
.post-card--une .card-excerpt{margin:0 0 1em}
.post-card--une .card-meta{margin:0 0 20px}
.post-card--une .btn{align-self:flex-start}
.post-card--une .card-thumb{aspect-ratio:auto;min-height:100%}
.post-card--une .card-thumb img{height:100%}
/* Barre de filtres : liens crawlables, combinables, état actif, compteur */
.archive-filtres{
display:flex;flex-direction:column;gap:12px;
background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
padding:16px 18px;margin:0 0 30px;
}
.archive-filtres-groupe{display:flex;align-items:flex-start;gap:14px}
.archive-filtres-label{
flex:0 0 auto;padding:8px 0;font-size:.74rem;font-weight:800;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted);min-width:56px;
}
.archive-filtres-liste{display:flex;flex-wrap:wrap;gap:8px 6px;list-style:none;margin:0;padding:0}
.archive-filtres .filtre{
display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;
border:1px solid transparent;text-decoration:none;font-size:.86rem;font-weight:700;
color:#4a5a6c;letter-spacing:.01em;transition:background .15s,color .15s,border-color .15s;
}
.archive-filtres .filtre:hover{background:var(--sky);color:var(--navy)}
.archive-filtres .filtre.is-active{background:var(--navy);color:#fff;border-color:var(--navy)}
.archive-filtres .filtre-compte{
font-size:.72rem;font-weight:700;padding:1px 7px;border-radius:999px;
background:rgba(8,24,46,.07);color:inherit;
}
.archive-filtres .filtre.is-active .filtre-compte{background:rgba(255,255,255,.18)}
/* Cartes : pastilles, extrait, date + temps de lecture, appel à lire */
.post-card .card-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.post-card .card-tags .card-tag{margin:0;text-decoration:none}
.post-card .card-tags .card-tag:hover{background:var(--navy);color:#fff}
.post-card .card-tag--etape{background:var(--sand);color:#6b5a3a}
.post-card .card-excerpt{margin:0 0 14px;font-size:.95rem}
.card-meta{
display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;
font-size:.82rem;color:var(--muted);
}
.card-meta time{font-weight:600}
.post-card .card-cta{margin-top:auto;font-size:.9rem;color:var(--blue-dark)}
.post-card .card-cta:hover{color:var(--navy)}
.post-card:hover .card-title a{color:var(--blue-dark)}
.archive-vide{text-align:center;padding:30px 0 10px}
.archive-vide .lead{margin-inline:auto}
/* Encart « Derniers articles » (accueil) */
.derniers-articles .lead{margin-bottom:30px}
.derniers-articles-lien{margin:30px 0 0;text-align:center}
/* Barre de contact flottante (ordinateur) — référence myne.fr */
.barre-flottante{
position:fixed;left:50%;bottom:18px;z-index:1400;
width:min(calc(100% - 32px),720px);transform:translate(-50%,24px);
display:none;align-items:center;justify-content:space-between;gap:18px;
padding:14px 16px 14px 22px;background:rgba(255,255,255,.97);
border:1px solid rgba(8,24,46,.08);border-radius:16px;
box-shadow:0 18px 50px rgba(8,24,46,.18);
opacity:0;visibility:hidden;
transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.barre-flottante.is-visible{display:flex;opacity:1;visibility:visible;transform:translate(-50%,0)}
body.footer-visible .barre-flottante,
body.modal-open .barre-flottante,
body.menu-open .barre-flottante{opacity:0;visibility:hidden;transform:translate(-50%,24px);pointer-events:none}
.barre-flottante-texte{display:flex;flex-direction:column;gap:2px;min-width:0}
.barre-flottante-texte strong{color:var(--navy);font-size:.98rem;line-height:1.25}
.barre-flottante-texte span{color:var(--muted);font-size:.8rem;line-height:1.3}
.barre-flottante-actions{display:flex;gap:10px;flex:0 0 auto}
.barre-flottante .btn{min-height:46px;padding:10px 18px;font-size:.9rem}
.barre-flottante .btn-secondary .icon{width:17px;height:17px;filter:brightness(0)}
@media (max-width:860px){.barre-flottante{display:none!important}}
/* Fenêtre : overlay et boîte alignés sur la référence (flou 5 px, 640 px, ombre) */
.exit-popup{
background:rgba(8,24,46,.28);
backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
transition:backdrop-filter .25s ease;
}
.exit-popup .modal-dialog{
width:min(100%,640px);
box-shadow:2px 8px 23px 3px rgba(0,0,0,.2);
animation:none;
}
@media (max-width:860px){
.post-card--une{grid-template-columns:minmax(0,1fr);margin-bottom:26px}
.post-card--une .card-thumb{order:-1;aspect-ratio:16/10;min-height:0}
.post-card--une .card-body{padding:24px 22px 26px}
.archive-filtres{padding:12px 14px;margin-bottom:24px}
.archive-filtres-groupe{flex-direction:column;gap:6px}
.archive-filtres-label{padding:0;min-width:0}
.archive-filtres .filtre{padding:7px 11px;font-size:.82rem}
.archive-liste{padding-top:24px}
/* Encart accueil : carrousel horizontal à défilement magnétique */
.derniers-articles-grid{
display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
padding:4px 4px 14px;margin:0 -4px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.derniers-articles-grid > .post-card{flex:0 0 84%;scroll-snap-align:start}
.exit-popup .modal-dialog{animation-name:experys-popup-bas}
}
@media (prefers-reduced-motion:reduce){
.barre-flottante{transition:none}
.exit-popup .modal-dialog{animation:none}
}