/* Alma Patrimoine : feuille de style du site (voir DESIGN.md) */
:root{
  --bg:#f6f7f5; --paper:#ffffff; --tint:#e9eeea;
  --ink:#101413; --ink-2:#454b49; --mute:#62686a;
  --line:rgb(16 20 19 / .1); --line-2:rgb(16 20 19 / .16);
  --accent:#1d4a39; --accent-2:#e3ece6;
  --r:18px; --pad:clamp(20px,4vw,56px); --max:1360px;
  --ease:cubic-bezier(.23,1,.32,1);
  --sans:"Instrument Sans",ui-sans-serif,system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.num{font-feature-settings:"tnum","ss01";letter-spacing:-.02em}
.ln{padding-bottom:.1em;margin-bottom:-.1em}

.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;border-radius:999px;font-weight:500;font-size:15px;white-space:nowrap;transition:transform .16s var(--ease),background-color .2s ease,border-color .2s ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:#fff}
.btn-ghost{border:1px solid var(--line-2)}
@media (hover:hover) and (pointer:fine){.btn-primary:hover{background:#163b2d}.btn-ghost:hover{border-color:var(--ink)}}

/* Navigation */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background-color .4s ease,border-color .4s ease;border-bottom:1px solid transparent}
.nav.is-scrolled{background:rgb(246 247 245 / .72);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.brand{display:flex;align-items:center;gap:12px}
.brand i{width:30px;aspect-ratio:1000/802;background:var(--ink);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.brand b{font-weight:500;font-size:13px;letter-spacing:.24em;white-space:nowrap}
.links{display:flex;gap:30px;font-size:14px;color:var(--ink-2)}
.links a:hover{color:var(--ink)}
.nav .btn{height:42px;padding:0 18px;font-size:14px}
.burger{display:none;width:42px;height:42px;border-radius:999px;border:1px solid var(--line-2);align-items:center;justify-content:center}
.burger span{width:16px;height:1px;background:var(--ink);box-shadow:0 5px 0 var(--ink)}
@media (max-width:1080px){.links{display:none}}
@media (max-width:640px){.nav .btn{display:none}.burger{display:inline-flex}
  .menu-open .links{display:flex;position:fixed;top:80px;left:16px;right:16px;flex-direction:column;padding:8px 20px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 60px rgb(16 20 19 / .12)}
  .menu-open .links a{padding:14px 0;font-size:17px;color:var(--ink)}.menu-open .links a+a{border-top:1px solid var(--line)}}
@media (max-width:400px){.brand b{font-size:12px;letter-spacing:.16em}}

/* Hero : monogramme au centre, texte en pied */
.hero{position:relative;min-height:100dvh;display:grid;grid-template-rows:1fr auto;overflow:hidden;padding-top:72px}
.aura{position:absolute;inset:0;pointer-events:none}
.aura span{position:absolute;border-radius:50%;filter:blur(50px)}
.aura .a1{width:38vw;height:38vw;left:28vw;top:8vh;background:radial-gradient(circle,#9fc2b0,transparent 64%);animation:float1 18s ease-in-out infinite alternate}
.aura .a2{width:30vw;height:30vw;left:46vw;top:22vh;background:radial-gradient(circle,#c9d3dc,transparent 62%);animation:float2 22s ease-in-out infinite alternate}
.aura .a3{width:22vw;height:22vw;left:30vw;top:38vh;background:radial-gradient(circle,#1d4a39,transparent 66%);opacity:.5;animation:float1 26s ease-in-out infinite alternate-reverse}
@keyframes float1{to{transform:translate3d(6vw,4vh,0) scale(1.08)}}
@keyframes float2{to{transform:translate3d(-7vw,6vh,0) scale(.92)}}
.stage{position:relative;display:grid;place-items:center;padding:24px 0}
.stage .logo{width:min(46vw,58dvh,600px)}
.hero .ag{--ag-tint:linear-gradient(150deg,rgb(255 255 255 / .55),rgb(255 255 255 / .12) 55%,rgb(255 255 255 / .35));--ag-blur:18px;--ag-sat:1.6;--ag-bright:1.06;--ag-shadow:rgb(20 50 38 / .28)}
.hero-foot{position:relative;display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:end;padding-bottom:clamp(32px,5vh,56px)}
.hero h1{font-weight:500;font-size:clamp(44px,6vw,96px);line-height:.98;letter-spacing:-.045em}
.hero .side p{font-size:clamp(17px,1.3vw,19px);color:var(--ink-2);max-width:34ch}
.hero .ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
@media (max-width:860px){.hero-foot{grid-template-columns:1fr;gap:20px}.stage .logo{width:min(76vw,380px)}.aura .a1{width:80vw;height:80vw;left:10vw}.aura .a2{width:60vw;height:60vw;left:30vw}.aura .a3{width:50vw;height:50vw;left:10vw}}

.sec{padding:clamp(64px,8vw,112px) 0}
.h2{font-weight:500;font-size:clamp(36px,4.8vw,72px);line-height:1;letter-spacing:-.04em}
.sub{margin-top:20px;max-width:52ch;color:var(--ink-2);font-size:clamp(17px,1.3vw,19px)}

/* Manifeste : les mots s'allument au scroll */
.manifest .kicker{font-size:15px;color:var(--mute)}
.manifest .kicker b{color:var(--ink);font-weight:500}
.manifest .text{margin-top:32px;font-weight:500;font-size:clamp(28px,3.6vw,54px);line-height:1.12;letter-spacing:-.03em;max-width:none}
.manifest .word{opacity:.16}
.forces{display:flex;flex-wrap:wrap;gap:8px;margin-top:48px}
.forces span{padding:9px 15px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:14px;color:var(--ink-2)}

/* ================= Éclairage au survol (toutes les cartes [data-spot]) ================= */
.spot{position:relative;--glow:rgb(29 74 57 / .075);--glow-b:rgb(29 74 57 / .55)}
.spot.dark{--glow:rgb(255 255 255 / .13);--glow-b:rgb(255 255 255 / .7)}
.spot::before,.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease}
.spot::after{background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),var(--glow),transparent 46%)}
.spot::before{padding:1px;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--glow-b),transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@media (hover:hover) and (pointer:fine){.spot:hover::before,.spot:hover::after{opacity:1}}

/* ================= Manifeste ================= */
.mission{margin-top:72px;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:24px;font-size:clamp(20px,1.8vw,26px);line-height:1.35;letter-spacing:-.015em}
.mission span{font-size:15px;color:var(--mute);letter-spacing:0;padding-top:6px}
@media (max-width:860px){.mission{grid-template-columns:1fr;gap:8px}}

/* ================= Valeurs : prisme à trois faces ================= */
.values-pin{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:clamp(32px,6vh,64px);padding:96px var(--pad) 48px;overflow:hidden}
.values-h{font-weight:500;font-size:clamp(18px,1.4vw,22px);color:var(--mute);letter-spacing:-.01em}
.prism-stage{width:min(1100px,100%);perspective:1600px;perspective-origin:50% 50%}
.prism{position:relative;height:clamp(170px,30vh,300px);transform-style:preserve-3d;will-change:transform}
.face{position:absolute;inset:0;border-radius:28px;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:linear-gradient(180deg,#fff,#f0f3f1);border:1px solid var(--line);box-shadow:inset 0 1px 0 #fff,0 30px 80px rgb(16 20 19 / .08)}
.face span{font-weight:500;font-size:clamp(52px,9.4vw,152px);letter-spacing:-.055em;line-height:1}
.face.f2{background:linear-gradient(180deg,#235743,#1a4334);color:#fff;border-color:transparent}
.face.f3{background:linear-gradient(180deg,#eef3f0,#dfe9e3)}
.rm .prism{height:auto;display:grid;gap:12px}
.rm .face{position:relative;height:clamp(140px,22vh,220px)}

/* ================= Objectifs : anneau 3D ================= */
.obj-pin{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,4vh,48px);padding:96px 0 40px;overflow:hidden}
.ring-stage{perspective:1800px;perspective-origin:50% 40%;display:grid;place-items:center;height:min(420px,50dvh)}
.ring{position:relative;width:min(340px,62vw);height:100%;transform-style:preserve-3d}
.goal{position:absolute;inset:0;border-radius:24px;padding:30px;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  box-shadow:0 30px 70px rgb(16 20 19 / .08);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.goal .n{font:500 12px var(--mono);color:var(--mute)}
.goal h3{margin-top:auto;font-weight:500;font-size:clamp(26px,2.4vw,34px);letter-spacing:-.03em;line-height:1.08}
.goal p{margin-top:10px;color:var(--ink-2);font-size:15px}
.goal.g1{background:var(--accent);color:#fff;border-color:transparent}
.goal.g1 .n,.goal.g1 p{color:rgb(255 255 255 / .74)}
.goal.g5{background:var(--accent-2);border-color:transparent}
.rm .ring-stage{height:auto;perspective:none}
.rm .ring{width:100%;max-width:var(--max);padding:0 var(--pad);display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.rm .goal{position:relative;min-height:260px}

/* Cible */
.who{display:grid;grid-template-columns:1fr 1fr;gap:12px;perspective:1400px}
.aud{border-radius:var(--r);padding:36px;min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--paper);border:1px solid var(--line)}
.aud h3{font-weight:500;font-size:clamp(24px,2.2vw,32px);letter-spacing:-.025em}
.aud p{color:var(--ink-2);margin-top:4px}
@media (max-width:760px){.who{grid-template-columns:1fr}}

/* ================= Enveloppes : panoramique 3D ================= */
.env-head{padding-top:0}
.env-pin{height:100dvh;display:flex;align-items:center;overflow:hidden}
.env-track{display:flex;gap:28px;padding:0 var(--pad);width:max-content;transform-style:preserve-3d}
.envc{flex:0 0 auto;width:min(440px,80vw);min-height:min(540px,74dvh);border-radius:26px;padding:32px;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);box-shadow:0 40px 90px rgb(16 20 19 / .1);will-change:transform}
.envc.lu{background:linear-gradient(170deg,#235743,#183d30);color:#fff;border-color:transparent}
.envc .top{display:flex;align-items:center;gap:14px}
.envc .dos{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:500 14px var(--mono);background:var(--tint);color:var(--accent)}
.envc.lu .dos{background:rgb(255 255 255 / .14);color:#fff}
.envc h3{font-weight:500;font-size:clamp(26px,2.3vw,34px);letter-spacing:-.03em;line-height:1.05}
.envc .pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:24px}
.envc .pills span{font-size:13px;padding:6px 12px;border-radius:999px;background:var(--tint);color:var(--ink-2);white-space:nowrap}
.envc.lu .pills span{background:rgb(255 255 255 / .12);color:#fff}
.envc .d{margin-top:20px;color:var(--ink-2)}
.envc.lu .d,.envc.lu .k,.envc.lu .efoot span{color:rgb(255 255 255 / .74)}
.envc .k{margin-top:auto;padding-top:28px;font-size:13px;color:var(--mute)}
.envc ul{list-style:none;margin-top:10px;border-top:1px solid var(--line)}
.envc.lu ul,.envc.lu li{border-color:rgb(255 255 255 / .16)}
.envc li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.4}
.envc li::before{content:"";flex:0 0 14px;height:14px;margin-top:3px;border-radius:50%;background:var(--accent-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='%231d4a39' stroke-width='1.6'/%3E%3C/svg%3E") center/100% no-repeat}
.envc.lu li::before{background-color:#fff}
.envc .efoot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;font-size:14px}
.envc .efoot span{color:var(--mute)}
.envc .efoot a{font-weight:500;color:var(--accent);white-space:nowrap}
.envc.lu .efoot a{color:#fff}
.env .note{margin-top:16px;font-size:13px;color:var(--mute)}
@media (max-width:900px){.env-track{gap:16px}.envc{width:min(340px,84vw)!important;padding:26px!important}.env-track{align-items:stretch!important}.envc .efoot{margin-top:auto!important}.env-pin{height:100svh;align-items:flex-start;padding:88px 0 40px}}
.rm .env-pin{height:auto;padding:40px 0}.rm .env-track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory}

/* ================= Supports : cylindre + assureurs + pastilles ================= */
.sup-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
.figs{display:grid;grid-template-columns:auto auto;justify-content:start;gap:56px;margin-top:48px}
.figs .big{font-weight:500;font-size:clamp(52px,5.2vw,80px);letter-spacing:-.055em;line-height:1}
.figs p{color:var(--ink-2);margin-top:6px}
.sup .h2{font-size:clamp(36px,3.8vw,58px)}
.cap{font-size:13px;color:var(--mute);margin-bottom:14px}
.cyl-wrap{min-width:0}
.cyl-stage{height:300px;perspective:1100px;display:grid;place-items:center;
  -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.cyl-tilt{transform-style:preserve-3d}
.cyl{position:relative;width:170px;height:100px;transform-style:preserve-3d;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotateY(-360deg)}}
.cface{position:absolute;inset:0;border-radius:16px;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;padding:0 22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 14px 30px rgb(16 20 19 / .06)}
.cface img{max-height:28px;max-width:100%;width:auto;filter:brightness(0);opacity:.72}
.cface img.sq{max-height:44px}
.ins-block{margin-top:64px}
.ins-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ins{height:120px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;padding:0 18%}
.ins img{max-height:34px;max-width:100%;width:auto;filter:brightness(0);opacity:.7}
.ins img.sq{max-height:56px}
.pills-mq{margin-top:56px;overflow:hidden;padding:6px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.pills-mq .row{display:flex;gap:10px;width:max-content;animation:mq 38s linear infinite}
.pills-mq span{flex:0 0 auto;font-size:15px;padding:12px 20px;border-radius:999px;background:var(--paper);border:1px solid var(--line-2);white-space:nowrap}
.pills-mq span:nth-child(3n+2){background:var(--accent-2);border-color:transparent}
.pills-mq span:nth-child(5n+4){background:var(--accent);color:#fff;border-color:transparent}
@keyframes mq{to{transform:translateX(calc(-50% - 5px))}}
@media (hover:hover){.pills-mq:hover .row{animation-play-state:paused}}
@media (max-width:900px){.sup-grid{grid-template-columns:1fr}.ins-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rm .cyl{animation:none}.rm .pills-mq .row{animation:none;flex-wrap:wrap;width:auto;padding:0 var(--pad)}

/* ================= Approche : avancée en profondeur ================= */
.app-head{padding-top:0}
.app-pin{height:100dvh;overflow:hidden;position:relative}
.app-scene{position:absolute;inset:0;perspective:1100px;perspective-origin:50% 38%;transform-style:preserve-3d}
.floor-wrap{position:absolute;inset:0;perspective:1100px;perspective-origin:50% 38%;overflow:hidden}
.floor{position:absolute;left:-60%;right:-60%;top:58%;height:160%;transform:rotateX(80deg);transform-origin:50% 0;
  background-image:linear-gradient(rgb(29 74 57 / .16) 1px,transparent 1px),linear-gradient(90deg,rgb(29 74 57 / .16) 1px,transparent 1px);background-size:120px 120px;
  -webkit-mask:linear-gradient(transparent,#000 30%,#000 60%,transparent);mask:linear-gradient(transparent,#000 30%,#000 60%,transparent)}
.step{position:absolute;left:50%;top:50%;width:min(560px,84vw);margin:-170px 0 0 calc(min(560px,84vw) / -2);min-height:340px;border-radius:28px;padding:clamp(28px,3vw,40px);
  background:rgb(255 255 255 / .97);border:1px solid var(--line);box-shadow:0 50px 100px rgb(16 20 19 / .12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);will-change:transform,opacity}
.step .top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.step .k{font:500 13px var(--mono);color:var(--mute)}
.step .tag{font-size:13px;padding:6px 12px;border-radius:999px;background:var(--accent-2);color:var(--accent);font-weight:500}
.step h3{margin-top:56px;font-weight:500;font-size:clamp(34px,3.6vw,54px);letter-spacing:-.04em;line-height:1}
.step p{margin-top:16px;color:var(--ink-2);font-size:17px}
.app-foot{margin-top:24px;font-size:14px;color:var(--mute)}
.rm .app-pin{height:auto}.rm .app-scene{position:relative;perspective:none;display:grid;gap:12px;padding:40px var(--pad)}.rm .floor-wrap{display:none}
.rm .step{position:relative;left:auto;top:auto;margin:0;width:100%}

/* Performances : sélecteur de profil */
.perf-box{margin-top:64px;border-radius:24px;background:var(--paper);border:1px solid var(--line);overflow:hidden}
.perf-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 24px;border-bottom:1px solid var(--line)}
.seg{display:inline-grid;grid-auto-flow:column;gap:4px;padding:4px;border-radius:999px;background:var(--tint)}
.seg button{height:40px;padding:0 18px;border-radius:999px;font-size:14px;color:var(--ink-2);transition:background-color .2s ease,color .2s ease}
.seg button[aria-pressed=true],.seg button[aria-selected=true]{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgb(16 20 19 / .12)}
.perf-body{display:grid;grid-template-columns:5fr 7fr;gap:40px;padding:clamp(28px,4vw,48px)}
.perf-body .big{font-weight:500;font-size:clamp(72px,9vw,140px);letter-spacing:-.06em;line-height:.9}
.perf-body .cap{color:var(--mute);font-size:15px;margin-top:12px}
.perf-body .desc{margin-top:28px;color:var(--ink-2)}
.perf-body .ann{display:flex;align-items:baseline;gap:10px;margin-top:20px}
.perf-body .ann b{font-weight:500;font-size:28px;letter-spacing:-.02em}
.perf-body .ann span{color:var(--mute);font-size:14px}
.chart{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;height:240px;position:relative}
.chart::after{content:"";position:absolute;left:0;right:0;top:var(--z,120px);height:1px;background:var(--line-2)}
.chart .c{position:relative}
.chart i{position:absolute;left:12%;right:12%;background:var(--accent);border-radius:6px 6px 0 0;transform-origin:bottom;transition:height .6s var(--ease),top .6s var(--ease),bottom .6s var(--ease)}
.chart i.neg{background:#b9c4bf;border-radius:0 0 6px 6px;transform-origin:top}
.chart b{position:absolute;left:0;right:0;text-align:center;font:500 13px var(--mono);transition:top .6s var(--ease),bottom .6s var(--ease)}
.chart-axis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center;font:12px var(--mono);color:var(--mute);margin-top:8px}
.legal{margin-top:20px;font-size:13px;color:var(--mute);max-width:80ch}
@media (max-width:860px){.perf-body{grid-template-columns:1fr}}

/* Luxembourg */
.lux{border-radius:32px;background:var(--tint);padding:clamp(32px,6vw,96px);position:relative;overflow:hidden}
.lux-top{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:end}
.lux .h2{max-width:14ch}
.tri{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:64px}
.tri div{background:var(--paper);border-radius:var(--r);padding:24px;min-height:180px}
.tri h3{margin-top:44px;font-weight:500;font-size:19px;letter-spacing:-.01em}
.tri p{color:var(--ink-2);font-size:14px;margin-top:4px}
.tri .ic{display:block;font:500 13px var(--mono);color:var(--accent)}
.vs{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r);overflow:hidden;background:var(--paper)}
.vs div{padding:24px}
.vs div+div{background:var(--accent);color:#fff}
.vs small{font-size:13px;opacity:.7}
.vs b{display:block;margin-top:8px;font-weight:500;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.03em;line-height:1.05}
.vs p{font-size:13px;opacity:.75;margin-top:6px}
.lux .ctas{margin-top:40px}
@media (max-width:900px){.lux-top{grid-template-columns:1fr}.tri{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.tri{grid-template-columns:1fr}.vs{grid-template-columns:1fr}}

/* Accompagnement */
.life{display:grid;grid-template-columns:6fr 6fr;gap:clamp(40px,6vw,96px);align-items:center}
.life ul{list-style:none;display:grid;gap:0;border-top:1px solid var(--line)}
.life li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;border-bottom:1px solid var(--line);font-size:18px}
.life li span{font:500 12px var(--mono);color:var(--accent)}
.life .h2{font-size:clamp(36px,4vw,60px)}
.life .p{margin-top:24px;color:var(--ink-2);max-width:46ch}
@media (max-width:860px){.life{grid-template-columns:1fr}}

/* Tarifs */
.pricing{display:grid;grid-template-columns:5fr 7fr;gap:12px;margin-top:64px}
.fee{border-radius:24px;padding:clamp(28px,4vw,48px);background:var(--accent);color:#fff;display:flex;flex-direction:column;min-height:420px}
.fee .t{font-size:15px;color:rgb(255 255 255 / .7)}
.fee .amt{margin-top:auto;font-weight:500;font-size:clamp(72px,8vw,120px);letter-spacing:-.06em;line-height:.9}
.fee .amt small{font-size:15px;letter-spacing:0;margin-left:10px;color:rgb(255 255 255 / .7);font-weight:400}
.fee p{margin-top:16px;color:rgb(255 255 255 / .75)}
.fee .btn{margin-top:28px;align-self:flex-start;background:#fff;color:var(--accent)}
.right{display:grid;gap:12px}
.offers{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.offer{border-radius:var(--r);padding:28px;background:var(--paper);border:1px solid var(--line)}
.offer .pct{font-weight:500;font-size:48px;letter-spacing:-.05em;color:var(--accent);line-height:1}
.offer h3{margin-top:20px;font-weight:500;font-size:19px}
.offer p{color:var(--ink-2);font-size:15px;margin-top:4px}
.comm{border-radius:var(--r);padding:28px;border:1px solid var(--line-2)}
.comm h3{font-weight:500;font-size:19px}
.comm>p{color:var(--ink-2);font-size:15px;margin-top:4px}
.comm dl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.comm dt{font-size:13px;color:var(--mute)}
.comm dd{font-weight:500;font-size:20px;margin-top:2px}
@media (max-width:900px){.pricing{grid-template-columns:1fr}.offers,.comm dl{grid-template-columns:1fr}}

/* Rendez-vous */
.rdv{border-radius:32px;background:var(--paper);border:1px solid var(--line);padding:clamp(32px,6vw,96px);display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:center;position:relative}
.rdv .clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.rdv .h2{font-size:clamp(44px,6vw,96px)}
.rdv ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.rdv li{font-size:14px;padding:8px 14px;border-radius:999px;background:var(--tint);color:var(--ink-2)}
.rdv .ctas{margin-top:40px;display:flex;gap:10px;flex-wrap:wrap}
.rdv .logo{width:100%;max-width:380px;justify-self:end;position:relative}
.rdv .aura{inset:0}
.rdv .aura .a1{left:auto;right:5%;top:10%;width:40%;height:80%}
.rdv .ag{--ag-tint:linear-gradient(150deg,rgb(255 255 255 / .55),rgb(255 255 255 / .1) 55%,rgb(255 255 255 / .35));--ag-shadow:rgb(20 50 38 / .25)}
@media (max-width:860px){.rdv{grid-template-columns:1fr}.rdv .logo{justify-self:center;max-width:260px}}

footer{padding:80px 0 40px;font-size:14px;color:var(--ink-2)}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;padding-top:40px;border-top:1px solid var(--line)}
.foot h4{font-size:13px;font-weight:500;color:var(--ink);margin-bottom:12px}
.foot li{list-style:none;padding:3px 0}
.small{margin-top:48px;font-size:12px;color:var(--mute);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
@media (max-width:860px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.aura span{animation:none}}

/* ================= Hero : logo complet en verre, éclats, puis mots, puis texte ================= */
.hero{position:relative;display:block;min-height:0;padding:0;overflow:visible}
.hero-pin{position:relative;height:100dvh;overflow:hidden}
.hero .stage{position:absolute;inset:0;display:grid;place-items:center;padding:72px var(--pad) 0}
.hero .logo-full{width:min(1100px,86vw)}
.hero .ag{--ag-tint:linear-gradient(150deg,rgb(29 74 57 / .62),rgb(29 74 57 / .38) 55%,rgb(29 74 57 / .58));--ag-blur:10px;--ag-sat:1.4;--ag-bright:1;--ag-shadow:rgb(20 50 38 / .22)}
.drum{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;perspective:900px;text-align:center;pointer-events:none;padding-top:40px}
.drum-row{font-weight:500;font-size:clamp(40px,7.2vw,124px);line-height:1.04;letter-spacing:-.05em;transform-style:preserve-3d}
.drum-row span{display:inline-block;transform-origin:50% 50% -.6em;opacity:0}
.drum-row:nth-child(2) span{color:var(--accent)}
.hero-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:72px var(--pad) 0;opacity:0;visibility:hidden}
.hero-copy h1{white-space:nowrap;font-weight:500;font-size:clamp(40px,8vw,132px);line-height:.98;letter-spacing:-.05em}
.hero-copy p{margin-top:28px;max-width:none;font-size:clamp(17px,1.35vw,20px);color:var(--ink-2)}
.hero-copy .ctas{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:44px}
.rm .hero-pin{height:auto}.rm .hero .stage,.rm .drum,.rm .hero-copy{position:relative;inset:auto;opacity:1;visibility:visible}
.rm .hero .stage{padding-top:120px}.rm .drum{padding:48px 0}.rm .drum-row span{opacity:1}.rm .hero-copy{padding:24px var(--pad) 96px}

/* Mentions : une seule ligne sur la largeur de la page */
.legal,.note{max-width:none}
.oneline{white-space:nowrap}

/* Objectifs : cartes plus compactes, plus d'air sous l'anneau */
.ring-stage{height:min(320px,37dvh)!important}
.ring{width:min(260px,52vw)!important}
.goal{padding:26px}
.goal h3{font-size:clamp(22px,2vw,28px)}
.obj-pin{gap:clamp(32px,6vh,64px)!important;padding-bottom:clamp(48px,8vh,96px)!important}

/* Services : pastilles qui défilent sous les cartes cibles */
.svc-mq{margin-top:28px}
.svc-mq .row{animation-direction:reverse;animation-duration:30s}

/* Enveloppes : cartes plus compactes */
.envc{width:min(380px,78vw)!important;min-height:0!important;padding:28px!important}
.envc .k{margin-top:0;padding-top:28px}
.envc .efoot{margin-top:0!important;padding-top:20px}
.env-track{align-items:stretch}
.envc .efoot{margin-top:auto!important}
.envc.lu h3{font-size:clamp(22px,1.8vw,26px);line-height:1.08}
.envc.lu .top{gap:12px}
.envc.lu li{padding:9px 0;font-size:14.5px}
.envc.lu .pills{margin-top:18px}
.envc.lu .k{padding-top:20px}

/* Architecture ouverte : titre sur une ligne, cylindre face aux chiffres */
.sup-head .h2{white-space:nowrap;font-size:clamp(34px,4.6vw,72px)!important}
.sup-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center;margin-top:40px}
.sup-row .figs{margin-top:0}
@media (max-width:900px){.sup-row{grid-template-columns:1fr}.sup-head .h2{white-space:normal}}

/* Accompagnement : titre sur une ligne, lignes animées */
.life-head .h2{white-space:nowrap;font-size:clamp(34px,4.6vw,72px)}
.life{margin-top:48px;align-items:start!important}
.life li{position:relative;overflow:hidden}
.life li .bar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.life li span{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--accent-2);font:500 12px var(--mono);color:var(--accent)}
.life li span::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 6.2l1.8 1.7 3.8-4' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") center/100% no-repeat}
@media (max-width:900px){.life-head .h2{white-space:normal}}

/* ================= Simulateurs ================= */
.sim-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.seg-lg button{height:48px;padding:0 24px;font-size:15px}
.sim-panel{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:12px}
.sim-panel.enter{animation:simIn .5s var(--ease)}
@keyframes simIn{from{opacity:0;transform:translateY(12px)}}
.sim-in{border-radius:24px;background:var(--paper);border:1px solid var(--line);padding:clamp(24px,3.4vw,44px)}
.sim-out{border-radius:24px;background:var(--accent);color:#fff;padding:clamp(24px,3.4vw,44px);display:flex;flex-direction:column}
.fs{border:0;padding:0 0 24px;margin:0 0 24px;border-bottom:1px solid var(--line)}
.fs:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.fs legend{display:flex;align-items:center;gap:10px;font-weight:500;font-size:17px;margin-bottom:18px;padding:0}
.fs legend .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--accent-2);color:var(--accent);font:500 12px var(--mono)}
.field{margin-top:18px}
.field:first-of-type{margin-top:0}
.fl{display:flex;justify-content:space-between;align-items:center;gap:16px}
.fl label,.fl-t{font-size:15px;color:var(--ink-2)}
.fl-t{margin-bottom:10px}
.valbox{display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:10px;background:var(--tint);cursor:text}
.valbox input{width:var(--w,8ch);border:0;background:none;font:500 18px var(--sans);letter-spacing:-.02em;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums;outline:none}
.valbox em{font-style:normal;font-size:14px;color:var(--mute)}
.valbox:focus-within{box-shadow:0 0 0 2px var(--accent)}
.mm{display:flex;justify-content:space-between;font-size:12px;color:var(--mute);margin-top:2px}
.tiny{font-size:13px;color:var(--mute);margin-top:6px}
.sim-in .seg{display:grid;width:100%}
.seg-2{grid-template-columns:1fr 1fr!important}
.seg-3{grid-template-columns:repeat(3,1fr)!important}
.risk{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:13px;color:var(--mute)}
.risk i{flex:1;height:6px;border-radius:6px;background:linear-gradient(90deg,#cfe0d6,#1d4a39);position:relative}
.risk i::after{content:"";position:absolute;top:50%;left:var(--r,50%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;border:2px solid var(--accent);transition:left .4s var(--ease)}
.rate{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;font-size:15px;color:var(--ink-2)}
.rate b{font-weight:500;font-size:20px;color:var(--ink)}
.parts{margin-top:18px}
.stepper{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--tint)}
.stepper button{width:36px;height:36px;border-radius:50%;background:var(--paper);font-size:18px;line-height:1;transition:transform .16s var(--ease)}
.stepper button:active{transform:scale(.94)}
.stepper button:disabled{opacity:.35;cursor:default}
.stepper span{min-width:40px;text-align:center;font-weight:500;font-size:17px}
.n-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.n-grid label{min-width:0;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--mute)}
.n-grid input{width:100%;min-width:0;height:44px;border-radius:10px;border:1px solid var(--line-2);padding:0 12px;font:500 16px var(--sans);color:var(--ink);background:var(--paper)}
.n-grid input:focus{outline:2px solid var(--accent);outline-offset:0}
.out-k{font-size:15px;color:rgb(255 255 255 / .74)}
.out-big{margin-top:8px;font-weight:500;font-size:clamp(40px,4.4vw,68px);letter-spacing:-.05em;line-height:1}
.out-big.alt{color:#cfe0d6}
.out-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.out-two .out-big{font-size:clamp(32px,3.2vw,52px)}
.out-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.out-row span{display:block;font-size:13px;color:rgb(255 255 255 / .7)}
.out-row b{display:block;margin-top:4px;font-weight:500;font-size:21px}
.out-row.sep{padding-top:20px;border-top:1px solid rgb(255 255 255 / .16)}
.avchart{position:relative;margin-top:24px}
.avchart svg{width:100%;height:auto;display:block;overflow:visible}
.avchart .grid{stroke:rgb(255 255 255 / .1)}
.avchart .ax{font:11px var(--mono);fill:rgb(255 255 255 / .55)}
.avchart .bar-v{fill:rgb(255 255 255 / .92)}
.avchart .bar-i{fill:#9fc2b0}
.avchart.hovering .col{opacity:.4}.avchart .col{transition:opacity .2s ease}.avchart.hovering .col.on{opacity:1}
.avchart .tip{position:absolute;left:0;top:0;padding:10px 12px;border-radius:10px;background:#fff;color:var(--ink);font-size:13px;line-height:1.5;box-shadow:0 12px 30px rgb(0 0 0 / .2);pointer-events:none;opacity:0;transition:opacity .15s ease;white-space:nowrap}
.avchart .tip.on{opacity:1}
.legend{display:flex;gap:20px;margin-top:10px;font-size:12px;color:rgb(255 255 255 / .7)}
.legend span{display:flex;align-items:center;gap:8px}
.legend span::before{content:"";width:10px;height:10px;border-radius:2px;background:#fff}
.legend .lg-i::before{background:#9fc2b0}
.trans{margin-top:20px;font-size:14px;color:rgb(255 255 255 / .78);line-height:1.55}
.trans strong{color:#fff;font-weight:500}
.taxbars{margin-top:24px;display:grid;gap:10px}
.tb{display:grid;grid-template-columns:120px 1fr auto;gap:12px;align-items:center;font-size:13px;color:rgb(255 255 255 / .74)}
.tb i{height:10px;border-radius:10px;background:rgb(255 255 255 / .1);overflow:hidden}
.tb em{display:block;height:100%;border-radius:inherit;background:#fff;transform-origin:left;transform:scaleX(var(--s,0));transition:transform .5s var(--ease)}
.tb:nth-child(2) em{background:#9fc2b0}
.tb b{font-weight:500;font-size:16px;color:#fff;min-width:9ch;text-align:right}
.gq{margin-top:24px;font-size:15px;font-weight:500}
.split2{display:flex;height:36px;margin-top:10px;border-radius:10px;overflow:hidden;font:500 13px var(--sans)}
.split2 div{display:grid;place-items:center;transition:flex-grow .5s var(--ease)}
#per-sa{background:#9fc2b0;color:var(--accent)}#per-sb{background:rgb(255 255 255 / .9);color:var(--accent)}
.split-l{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px;font-size:13px;color:rgb(255 255 255 / .74)}
.split-l b{display:block;font-size:18px;font-weight:500;color:#fff}
.snote{margin-top:18px;padding:14px 16px;border-radius:12px;font-size:14px;line-height:1.5}
.snote.ok{background:rgb(255 255 255 / .12)}
.snote.warn{background:rgb(255 210 160 / .16)}
.snote strong{font-weight:600}
.sim-out .bw{margin-top:auto;padding-top:28px}
.btn-light{background:#fff;color:var(--accent)}
@media (max-width:900px){.sim-panel{grid-template-columns:1fr}.out-two,.split-l{grid-template-columns:1fr}.tb{grid-template-columns:100px 1fr auto}}

/* ================= Formulaire de rendez-vous ================= */
.rform{margin-top:16px;border-radius:32px;background:var(--paper);border:1px solid var(--line);padding:clamp(28px,5vw,72px)}
.progress{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:40px}
.progress div{position:relative;padding-top:14px;font-size:13px;color:var(--mute)}
.progress div::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:var(--tint)}
.progress div::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.progress div.on{color:var(--ink)}.progress div.on::after{transform:scaleX(1)}
.fstep{border:0;padding:0;margin:0}
.fstep legend{font-weight:500;font-size:clamp(28px,3vw,42px);letter-spacing:-.035em;margin-bottom:28px;padding:0}
.fstep.enter{animation:simIn .45s var(--ease)}
.group{margin-bottom:24px}
.gl{font-size:15px;color:var(--ink-2);margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip input,.fcard input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);font-size:15px;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .16s var(--ease)}
.chip span:active{transform:scale(.97)}
.chip input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff}
.chip input:focus-visible+span,.fcard input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.fcards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fcard span{display:block;padding:20px;border-radius:16px;border:1px solid var(--line-2);font-size:14px;color:var(--mute);cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.fcard b{display:block;font-weight:500;font-size:17px;color:var(--ink);margin-bottom:2px}
.fcard input:checked+span{border-color:var(--accent);background:var(--accent-2)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.inp{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.inp label{font-size:14px;color:var(--ink-2)}
.inp input,.inp select,.inp textarea{width:100%;min-height:50px;border-radius:12px;border:1px solid var(--line-2);background:var(--paper);padding:12px 14px;font:400 16px var(--sans);color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease}
.inp textarea{resize:vertical}
.inp input:focus,.inp select:focus,.inp textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgb(29 74 57 / .15)}
.inp ::placeholder{color:#8a908d}
.err{min-height:0;font-size:13px;color:#a2402e}
.bad input,.bad select{border-color:#a2402e}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--ink-2);cursor:pointer}
.consent input{width:20px;height:20px;margin-top:1px;accent-color:var(--accent);flex:0 0 auto}
.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}
.done{text-align:center;padding:24px 0}
.done-ic{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;font-size:24px}
.done h3{margin-top:20px;font-weight:500;font-size:30px;letter-spacing:-.03em}
.done p{margin:12px auto 24px;max-width:52ch;color:var(--ink-2)}
@media (max-width:760px){.row2,.fcards{grid-template-columns:1fr}}

[hidden]{display:none!important}
.sim-panel{align-items:start}
.sim-out{position:sticky;top:96px}
@media (max-width:900px){.sim-out{position:static}}
.sim-in input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin-top:8px;background:transparent;--p:50%}
.sim-in input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--accent) var(--p),var(--tint) var(--p))}
.sim-in input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--accent) var(--p),var(--tint) var(--p))}
.sim-in input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;margin-top:-9px;background:#fff;border:1px solid var(--line-2);box-shadow:0 2px 8px rgb(16 20 19 / .16);transition:transform .16s var(--ease)}
.sim-in input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--line-2)}
.sim-in input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
.sim-in input[type=range]:focus-visible{outline:none}
.sim-in input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgb(29 74 57 / .25)}

/* PER : champs sur toute la largeur, résultats en dessous */
#sim-per{grid-template-columns:minmax(0,1fr)}
#sim-per .sim-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,4vw,64px)}
#sim-per .fs{margin-bottom:0;padding-bottom:28px;border-bottom:0}
#sim-per .fs:nth-child(n+3){padding-top:28px;border-top:0;box-shadow:inset 0 1px 0 var(--line)}
#sim-per .sim-out{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,4vw,64px);align-items:start}
#sim-per .sim-out>*{grid-column:1}
#sim-per .out-two{grid-column:1/-1}
#sim-per #per-life{grid-column:1/-1}
#sim-per .taxbars{grid-column:1}
#sim-per .gq,#sim-per .split2,#sim-per .split-l{grid-column:2}
#sim-per .gq{margin-top:0}
#sim-per .taxbars{grid-row:span 3;margin-top:4px}
#sim-per .snote{grid-column:1/-1}
#sim-per .bw{grid-column:1/-1;padding-top:24px}
@media (max-width:900px){#sim-per .sim-in,#sim-per .sim-out{grid-template-columns:minmax(0,1fr)}#sim-per .fs:nth-child(n+2){padding-top:28px;border-top:0;box-shadow:inset 0 1px 0 var(--line)}#sim-per .gq,#sim-per .split2,#sim-per .split-l{grid-column:1}}

/* Accompagnement : quatre cartes « Inclus » */
.life .incl{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;perspective:1200px;border:0!important}
.life .icard{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:36px;min-height:180px;padding:24px;font-size:inherit;border-radius:20px;background:var(--paper);border:1px solid var(--line);overflow:hidden;
  transition:box-shadow .3s ease,border-color .3s ease}
@media (hover:hover){.life .icard:hover{box-shadow:0 24px 60px rgb(16 20 19 / .08);border-color:rgb(29 74 57 / .25)}}
.itop{display:flex;justify-content:space-between;align-items:center}
.ck{width:36px;height:36px;fill:none}
.ck circle{fill:var(--accent-2);stroke:none}
.ck path{stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:0}
.life .icard .inc{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--accent);color:#fff;font:500 12px var(--mono)}
.life .icard .inc::before{display:none}
.icard h3{font-weight:500;font-size:clamp(19px,1.5vw,22px);letter-spacing:-.02em;line-height:1.25}
.iline{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.life .icard:nth-child(2n){background:linear-gradient(170deg,#fff,#eef3f0)}
@media (max-width:560px){.life .incl{grid-template-columns:1fr}.life .icard{min-height:140px}}

/* Assurance-vie : carte de saisie à la hauteur de la carte de résultats */
#sim-av{align-items:stretch}
#sim-av .sim-out{position:static}
#sim-av .sim-in{display:flex;flex-direction:column;justify-content:space-between}
@media (max-width:600px){.hero-copy h1{white-space:normal;font-size:clamp(44px,13vw,64px)}}
#vision{padding-bottom:clamp(24px,3vw,40px)}
#clients{padding-top:clamp(40px,5vw,72px)!important}
.values-pin{min-height:0!important;justify-content:center!important;padding:clamp(40px,5vw,72px) var(--pad)!important}

/* PER : « Capital disponible » aligné sur la colonne de « Qui finance… » */
#sim-per .out-two{display:contents}
#sim-per .out-two>div:first-child{grid-column:1;grid-row:1}
#sim-per .out-two>div:last-child{grid-column:2;grid-row:1}
#sim-per #per-life{grid-row:2}
#sim-per .taxbars{grid-column:1;grid-row:3 / span 3}
#sim-per .gq{grid-column:2;grid-row:3;margin-top:24px}
#sim-per .split2{grid-column:2;grid-row:4}
#sim-per .split-l{grid-column:2;grid-row:5}
#sim-per .taxbars{margin-top:24px}
@media (max-width:900px){#sim-per .out-two>div,#sim-per .taxbars,#sim-per .gq,#sim-per .split2,#sim-per .split-l,#sim-per #per-life{grid-column:1;grid-row:auto}}
#sim-per #per-opp{grid-row:6}
#sim-per #per-warn{grid-row:7}
@media (max-width:900px){#sim-per #per-opp,#sim-per #per-warn{grid-row:auto}}

/* Vision : pastilles en vert */
.forces span{transition:transform .2s var(--ease)}
.forces span:nth-child(odd){background:var(--accent-2);border-color:transparent;color:var(--accent)}
.forces span:nth-child(even){background:var(--accent);border-color:transparent;color:#fff}
@media (hover:hover){.forces span:hover{transform:translateY(-2px)}}

/* Vision : accroche mise en avant */
.manifest .kicker{display:flex;flex-direction:column;gap:10px;font-size:clamp(17px,1.4vw,21px);color:var(--ink-2);line-height:1.45}
.manifest .kicker b{font-weight:500;font-size:clamp(30px,3.2vw,48px);letter-spacing:-.035em;line-height:1.05;color:var(--accent)}
.manifest .text{margin-top:48px}

/* Vision : mission en carte verte */
.mission2{position:relative;margin-top:72px;border-radius:28px;background:linear-gradient(135deg,#235743,#183d30 70%);color:#fff;padding:clamp(32px,5vw,72px);overflow:hidden}
.mission2::after{z-index:0}
.mission2 .mlabel{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:rgb(255 255 255 / .12);font-size:14px;color:rgb(255 255 255 / .85)}
.mission2 .mlabel::before{content:"";width:8px;height:8px;border-radius:50%;background:#9fc2b0}
.mission2 p{position:relative;z-index:1;margin-top:28px;max-width:30ch;font-weight:500;font-size:clamp(28px,3.4vw,52px);line-height:1.1;letter-spacing:-.035em}
.mission2 em{font-style:normal;color:#b3d6c3}
.mission2 .glow{position:absolute;right:-10%;top:-40%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgb(159 194 176 / .35),transparent 65%);filter:blur(20px);pointer-events:none}
/* Titres de fieldset dans le flux : plus de trait qui les traverse */
.fs legend{float:left;width:100%}
.fs legend+*{clear:both}
/* Listes déroulantes : flèche personnalisée, à l'intérieur du champ */
.inp select{-webkit-appearance:none;appearance:none;padding-right:52px;cursor:pointer;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231d4a39' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 22px center/12px 8px}
/* PER : résultats plus aérés */
#sim-per .sim-out{padding:clamp(32px,4vw,56px)}
#sim-per .out-k{margin-bottom:4px}
#sim-per .out-two .out-big{margin-top:12px}
#sim-per .taxbars,#sim-per .gq{margin-top:40px;padding-top:32px;border-top:1px solid rgb(255 255 255 / .14)}
#sim-per .taxbars{gap:18px;align-self:start}
#sim-per .tb{grid-template-columns:130px 1fr auto;gap:16px}
#sim-per .split2{margin-top:18px;height:40px}
#sim-per .split-l{margin-top:16px;gap:24px}
#sim-per .split-l b{margin-bottom:4px}
#sim-per #per-life{margin-top:32px}
#sim-per .snote{margin-top:40px;padding:18px 20px}
#sim-per #per-opp+#per-warn,#sim-per #per-warn{margin-top:40px}
#sim-per #per-opp:not([hidden])+#per-warn{margin-top:12px}
/* Vision : pastilles qui défilent */
.forces-mq{margin-top:48px}
.forces-mq .row{animation-duration:34s}
/* PER : « Total versé » aligné sur la colonne de « Capital disponible » */
#sim-per #per-life{display:contents}
#sim-per #per-life>div{margin-top:28px}
#sim-per #per-life>div:first-child{grid-column:1;grid-row:2}
#sim-per #per-life>div:last-child{grid-column:2;grid-row:2}
@media (max-width:900px){#sim-per #per-life>div,#sim-per .out-two>div,#sim-per .taxbars,#sim-per .gq,#sim-per .split2,#sim-per .split-l,#sim-per #per-opp,#sim-per #per-warn{grid-column:1!important;grid-row:auto!important}#sim-per .out-two>div+div{margin-top:24px}}

/* Logo complet (épargne et retraite) dans l'en-tête et le pied de page */
.brand img{display:block;height:48px;width:auto}
.foot .brand img{height:58px}
@media (max-width:400px){.brand img{height:40px}}

/* Fonds cités à titre d'illustration */
.funds{margin-top:40px;border-radius:24px;background:var(--paper);border:1px solid var(--line);overflow:hidden}
.funds-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding:20px 24px;border-bottom:1px solid var(--line)}
.funds-head h3{font-weight:500;font-size:17px;letter-spacing:-.01em}
.funds-head span{font-size:14px;color:var(--mute)}
.funds table{width:100%;border-collapse:collapse;font-size:15px}
.funds th{font-weight:400;font-size:13px;color:var(--mute);text-align:left;padding:16px 24px 10px}
.funds td{padding:16px 24px;border-top:1px solid var(--line);vertical-align:middle;color:var(--ink-2)}
.funds tbody tr{transition:background-color .2s ease}
.funds tbody tr:hover{background:rgb(29 74 57 / .035)}
.funds .r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.funds .hi{color:var(--accent);font-weight:500}
.funds .f{display:block;color:var(--ink);font-weight:500}
.funds .s{display:block;margin-top:3px;font:12px var(--mono);color:var(--mute);letter-spacing:.02em}
@media (max-width:760px){
  .funds thead{display:none}
  .funds table,.funds tbody,.funds tr,.funds td{display:block}
  .funds tr{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px 10px;padding:18px 20px;border-top:1px solid var(--line)}
  .funds td{padding:0;border:0;text-align:left!important}
  .funds td:first-child{grid-column:1/-1}
  .funds td:nth-child(2){grid-column:1/-1;font-size:14px}
  .funds td[data-l]:not(:nth-child(2))::before{content:attr(data-l);display:block;font-size:12px;color:var(--mute);font-weight:400;margin-bottom:2px}
}

/* Carte avis Google */
.avis{margin-top:16px;border-radius:32px;background:var(--paper);border:1px solid var(--line);padding:clamp(28px,4vw,56px) clamp(28px,5vw,72px);display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.avis h3{font-weight:500;font-size:clamp(28px,3vw,42px);letter-spacing:-.035em}
.avis p{margin-top:12px;max-width:56ch;color:var(--ink-2)}
.avis .btn{margin-top:28px;gap:8px}
.avis .qr{display:block;width:clamp(120px,12vw,156px);padding:12px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px rgb(16 20 19 / .08);transition:transform .3s var(--ease)}
.avis .qr:hover{transform:translateY(-3px) rotate(-1.5deg)}
.avis .qr img{display:block;width:100%;height:auto}
@media (max-width:640px){.avis{grid-template-columns:1fr}.avis .qr{justify-self:start}}

.mfig{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.mfig span{padding:14px 16px;border-radius:12px;background:var(--accent-2);font-size:13px;color:var(--ink-2)}
.mfig b{display:block;font-weight:500;font-size:18px;letter-spacing:-.02em;color:var(--accent);white-space:nowrap}

/* Luxembourg : cartes France / Luxembourg alignées, bandeau fiscalité */
.vs b{white-space:nowrap;font-size:clamp(22px,2.1vw,30px)}
.lux-band{margin-top:12px;display:flex;align-items:center;gap:16px;padding:22px 28px;border-radius:var(--r);background:var(--accent);color:#fff}
.lux-band .glb{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgb(255 255 255 / .12)}
.lux-band p{font-size:clamp(16px,1.4vw,19px);letter-spacing:-.01em}
/* AXA Wealth Europe : logo un peu plus grand */
.ins img[src*="axa-wealth"]{max-height:46px}
.ins:has(img[src*="axa-wealth"]){padding:0 12%}

/* Mobile : objectifs remontés, pastilles rendez-vous compactes, QR centré */
@media (max-width:760px){
  .obj-pin{justify-content:flex-start!important;padding-top:84px!important;gap:20px!important}
  .ring-stage{height:min(340px,46dvh)!important}
  .rdv li{font-size:13px;padding:7px 12px;white-space:nowrap}
  .avis .qr{justify-self:center}
}
#sim-per .fs,.sim .fs{min-width:0}

/* Valeurs : même pastille que « Notre mission » */
.values-h.vlabel{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;background:var(--accent);color:rgb(255 255 255 / .9);font-size:14px;font-weight:400;letter-spacing:0}
.values-h.vlabel::before{content:"";width:8px;height:8px;border-radius:50%;background:#9fc2b0}

/* Fonds : touches de vert */
.funds-head{background:var(--accent);color:#fff;border-bottom:0;padding-top:13px;padding-bottom:13px}
.funds-head h3{font-size:16px}
.funds-head span{color:rgb(255 255 255 / .7)}
.funds thead{background:var(--accent-2)}
.funds th{color:var(--accent);padding-top:12px;padding-bottom:12px}
.funds .hi span{display:inline-block;padding:5px 10px;border-radius:999px;background:var(--accent-2);color:var(--accent)}
.funds td:nth-child(2){color:var(--accent)}
.funds tbody tr:hover{background:rgb(29 74 57 / .05)}
@media (max-width:760px){.funds .hi span{padding:3px 8px}}

/* Bandeau fiscalité : globe animé et pays qui défilent */
.lux-band{position:relative;overflow:hidden}
.lux-band p{flex:none;max-width:34ch}
.lb-mq{flex:1;min-width:0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.lb-row{display:flex;gap:8px;width:max-content;animation:mq 40s linear infinite}
.lb-row span{flex:none;font-size:13px;padding:7px 14px;border-radius:999px;background:rgb(255 255 255 / .1);border:1px solid rgb(255 255 255 / .14);color:rgb(255 255 255 / .88);white-space:nowrap}
.lb-row span:nth-child(4n+1){background:#9fc2b0;color:var(--accent);border-color:transparent}
.glb .mer{transform-box:fill-box;transform-origin:center;animation:mer 4s linear infinite}
.glb .m2{animation-delay:-2s}
@keyframes mer{0%{transform:scaleX(1);opacity:0}10%{opacity:1}50%{transform:scaleX(0)}90%{opacity:1}100%{transform:scaleX(-1);opacity:0}}
@media (max-width:760px){.lux-band{flex-wrap:wrap;padding:20px}.lux-band p{flex:1 1 calc(100% - 64px);max-width:none}.lb-mq{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){.lb-row,.glb .mer{animation:none}}


/* Accompagnement : quatre cartes en longueur, « inclus » dit une seule fois, faisceau lumineux sur la bordure (Border Beam, 21st.dev) */
.life-intro{margin-top:32px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,80px);align-items:start}
.life-intro .sub{margin-top:0}
.life-intro .p{margin-top:0;color:var(--ink-2);max-width:52ch}
.incl-head{margin-top:56px;display:flex;align-items:center;gap:16px}
.inc-all{display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 10px;border-radius:999px;background:var(--accent);color:#fff;font-size:14px;white-space:nowrap}
.inc-all svg{width:20px;height:20px;padding:3px;border-radius:50%;background:rgb(255 255 255 / .16);fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.inc-rule{flex:1;height:1px;background:linear-gradient(90deg,var(--accent),var(--line) 40%)}
#accompagnement .incl{list-style:none;margin-top:20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;perspective:1200px;padding:0;border:0}
#accompagnement .icard{position:relative;display:flex;flex-direction:column;min-height:250px;padding:26px;border-radius:22px;background:var(--paper);border:1px solid var(--line);font-size:inherit;overflow:visible;transition:box-shadow .3s ease,transform .3s var(--ease)}
#accompagnement .icard:nth-child(2n){background:linear-gradient(170deg,#fff,#eef3f0)}
@media (hover:hover){#accompagnement .icard:hover{box-shadow:0 24px 60px rgb(16 20 19 / .08);transform:translateY(-4px)}#accompagnement .icard:hover .ico{background:var(--accent);color:#fff}}
#accompagnement .itop{display:flex;justify-content:space-between;align-items:flex-start}
#accompagnement .ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--accent-2);color:var(--accent);transition:background-color .3s ease,color .3s ease}
#accompagnement .ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#accompagnement .inum{font:500 12px var(--mono);color:var(--mute)}
#accompagnement .icard h3{margin-top:auto;padding-top:40px;font-weight:500;font-size:clamp(19px,1.45vw,22px);letter-spacing:-.02em;line-height:1.2}
#accompagnement .icard p{margin-top:8px;font-size:14px;line-height:1.5;color:var(--ink-2)}
/* Border Beam : un trait de lumière parcourt la bordure, d'une carte à l'autre */
.bb{position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.bb i{position:absolute;width:120px;aspect-ratio:1;background:linear-gradient(to left,var(--accent),#9fc2b0,transparent);
  offset-path:rect(0 auto auto 0 round 120px);offset-anchor:90% 50%;animation:beam 9s linear infinite}
#accompagnement .icard:nth-child(2) .bb i{animation-delay:-2.25s}
#accompagnement .icard:nth-child(3) .bb i{animation-delay:-4.5s}
#accompagnement .icard:nth-child(4) .bb i{animation-delay:-6.75s}
@keyframes beam{from{offset-distance:0%}to{offset-distance:100%}}
@media (prefers-reduced-motion:reduce){.bb{display:none}}
@media (max-width:1080px){#accompagnement .incl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.life-intro{grid-template-columns:1fr;gap:16px}#accompagnement .incl{grid-template-columns:1fr}#accompagnement .icard{min-height:0}#accompagnement .icard h3{padding-top:28px}}

/* Architecture ouverte : libellés en pastilles, écart réduit avant les assureurs */
.gpill{display:inline-flex!important;align-items:center;gap:10px;margin-top:14px!important;padding:7px 14px;border-radius:999px;background:var(--accent);color:rgb(255 255 255 / .9)!important;font-size:14px;line-height:1.2}
.gpill::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#9fc2b0}
.ins-block{margin-top:24px!important}
.ins-block .gpill{margin:0 0 16px!important}
.gpill{white-space:nowrap}
@media (max-width:520px){.sup-row .figs{grid-template-columns:auto;gap:28px}}

/* Luxembourg : la phrase de droite centrée face aux deux lignes de gauche */
.vs{grid-template-rows:auto auto 1fr}
.vs>div{display:grid;grid-row:span 3;grid-template-rows:subgrid}
.vs p{align-self:center}
@media (max-width:520px){.vs{grid-template-rows:none}.vs>div{grid-row:auto;grid-template-rows:none}}

/* Accompagnement : une seule phrase d'introduction */
.life-intro{grid-template-columns:minmax(0,1fr)}
.life-intro .sub{max-width:62ch}

/* Avis : QR légèrement décalé à gauche, viseur et barre de scan (Text Scanner, 21st.dev) */
.avis .qr{position:relative;overflow:hidden;margin-right:clamp(0px,5vw,80px)}
.qr-scan{position:absolute;left:8px;right:8px;top:0;height:28%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgb(159 194 176 / .55) 85%,var(--accent) 100%);border-radius:2px;mix-blend-mode:multiply;animation:qrscan 2.8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes qrscan{0%{transform:translateY(-30%);opacity:0}12%{opacity:1}50%{transform:translateY(300%);opacity:1}62%{opacity:0}100%{transform:translateY(300%);opacity:0}}
.qr-c i{position:absolute;width:18px;height:18px;border:2px solid var(--accent);transition:transform .3s var(--ease)}
.qr-c i:nth-child(1){left:6px;top:6px;border-right:0;border-bottom:0;border-top-left-radius:8px}
.qr-c i:nth-child(2){right:6px;top:6px;border-left:0;border-bottom:0;border-top-right-radius:8px}
.qr-c i:nth-child(3){left:6px;bottom:6px;border-right:0;border-top:0;border-bottom-left-radius:8px}
.qr-c i:nth-child(4){right:6px;bottom:6px;border-left:0;border-top:0;border-bottom-right-radius:8px}
.avis .qr:hover .qr-c i:nth-child(1){transform:translate(-3px,-3px)}.avis .qr:hover .qr-c i:nth-child(2){transform:translate(3px,-3px)}
.avis .qr:hover .qr-c i:nth-child(3){transform:translate(-3px,3px)}.avis .qr:hover .qr-c i:nth-child(4){transform:translate(3px,3px)}
@media (max-width:760px){.avis .qr{margin-right:0}}
@media (prefers-reduced-motion:reduce){.qr-scan{display:none}}

/* Particuliers / Entreprises : halo vert qui tourne derrière la carte (Glow Effect, 21st.dev) */
@property --ga{syntax:"<angle>";inherits:false;initial-value:0deg}
.who .aud{isolation:isolate;background:transparent}
.aud-surf{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--paper)}
.who .aud:nth-child(2) .aud-surf{background:linear-gradient(170deg,#fff,#f0f4f1)}
.aud-glow{position:absolute;inset:-3px;z-index:-2;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from var(--ga),#1d4a39,#9fc2b0,#e3ece6,#2f6b52,#7fae96,#1d4a39);
  filter:blur(18px);opacity:.55;transform:scale(.985);animation:gspin 7s linear infinite;transition:opacity .45s ease,transform .45s var(--ease),filter .45s ease}
.who .aud:nth-child(2) .aud-glow{animation-direction:reverse;animation-duration:9s}
@keyframes gspin{to{--ga:360deg}}
@media (hover:hover){.who .aud:hover .aud-glow{opacity:.85;transform:scale(1.02);filter:blur(24px)}}
@media (prefers-reduced-motion:reduce){.aud-glow{animation:none}}

/* Pastilles d'architecture : vert clair et blanc en alternance */
.gpill{background:var(--accent-2);color:var(--accent)!important;border:1px solid transparent}
.gpill::before{background:var(--accent)}
.figs>div:nth-child(2) .gpill{background:var(--paper);border-color:var(--line-2)}
/* Respiration entre le formulaire et la carte avis */
.rform+.avis{margin-top:40px}

/* Passe de finition : rythme avant le pied de page, cibles tactiles, focus */
footer{padding-top:24px}
.envc .efoot a{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0}
@media (max-width:760px){.foot li a{display:inline-flex;min-height:40px;align-items:center}}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
fieldset{min-width:0}
@media (max-width:900px){.sim-panel{grid-template-columns:minmax(0,1fr)!important}}
.rdv>div[style*="relative"]{z-index:2}
.rdv .logo{z-index:1}
.small{align-items:center}

/* ===== Mobile : centrage des scènes, cartes, compacité ===== */
.mbr{display:none}
@media (max-width:760px){
  .mbr{display:inline}
  /* hero : logo, contrats et accroche au centre exact de l'écran visible */
  .hero-pin{height:100svh}
  .hero .stage,.hero-copy{padding-top:0}
  .drum{padding-top:0}
  /* enveloppes : pastilles l'une sous l'autre, comme la carte PER */
  .envc .pills{flex-direction:column;align-items:flex-start}
  .envc .pills span{white-space:normal}
  /* architecture : bandeau des banques rapproché des chiffres */
  .sup-row{gap:0!important;margin-top:28px}
  .cyl-stage{height:200px!important}
  /* performances : la carte tient dans l'écran */
  .perf-box{margin-top:32px}
  .perf-head{padding:14px 16px}
  .perf-body{gap:18px;padding:20px}
  .perf-body .big{font-size:56px}
  .perf-body .cap{margin-top:6px}
  .perf-body .ann{margin-top:10px}.perf-body .ann b{font-size:22px}
  .perf-body .desc{margin-top:12px;font-size:15px}
  .chart{height:170px}
  /* approche : scène compacte, carte en haut, perspective visible dessous */
  .app-pin{height:560px}
  .step{top:64px;margin-top:0}
  .floor{top:36%}
  .floor-wrap,.app-scene{perspective-origin:50% 30%}
  .floor{background-image:linear-gradient(rgb(29 74 57 / .26) 1px,transparent 1px),linear-gradient(90deg,rgb(29 74 57 / .26) 1px,transparent 1px);background-size:90px 90px}
  /* simulateur PER : statut sur deux lignes bien centrées */
  .seg-2 button{height:auto;min-height:54px;padding:8px 10px;line-height:1.2}
  /* avis : bouton centré avec le QR */
  .avis>div{display:flex;flex-direction:column}
  .avis .btn{align-self:flex-start}
  /* pied de page : marge pour la barre de Safari */
  footer{padding-bottom:calc(180px + env(safe-area-inset-bottom))}
}

/* Ordinateur : sous-titres sur une ligne */
@media (min-width:1081px){.sub-1l{max-width:none;white-space:nowrap}}
/* Fonds : pastille « +1 000 supports disponibles » */
.fh-l{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fh-pill{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:rgb(255 255 255 / .14);color:#fff!important;font-size:13px}
.fh-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:#9fc2b0}
.fh-n{white-space:nowrap;color:#fff!important}.fh-n i{display:inline-block;width:.24em}.fh-n i:first-child{width:.32em}
@media (max-width:900px){.life-head .h2{white-space:nowrap!important;font-size:clamp(22px,7.6vw,44px)!important}}
/* Architecture : assureurs d'abord, puis chiffres + banques, puis pastilles */
#supports .ins-block{margin-top:48px!important}
#supports .sup-row{margin-top:0}
@media (min-width:901px){#supports .cyl-stage{height:260px}}
@media (max-width:900px){#supports .ins-block{margin-top:32px!important}#supports .sup-row{margin-top:40px}}
/* Architecture : même écart visible assureurs → chiffres/banques → pastilles
   (le cylindre a du vide sous ses cartes, compensé ici) */
#supports > .pills-mq{margin-top:-6px}
@media (max-width:900px){#supports > .pills-mq{margin-top:7px}#supports .cyl-stage{height:200px!important}}
/* Architecture : marge au-dessus des banques pour que le bandeau incliné ne passe jamais sur les assureurs ;
   même valeur ajoutée sous la rangée pour garder deux écarts identiques */
@media (min-width:901px){#supports .sup-row{margin-top:72px}#supports > .pills-mq{margin-top:66px}}

/* ===== Mobile, passe 3 : zone visible = sous l'en-tête (72 px) et au-dessus de la barre Safari (~5svh) ===== */
@media (max-width:760px){
  /* hero : un peu au-dessus du centre mathématique (la barre du bas mange l'écran) */
  .hero .stage,.drum,.hero-copy{padding-bottom:2svh!important}
  /* objectifs : carte centrée entre le sous-titre et le bas de l'écran */
  .obj-pin{height:100svh;min-height:0!important;padding-bottom:5svh!important}
  .ring-stage{flex:1 1 auto;height:auto!important;min-height:0;padding-bottom:12px}
  .ring{height:min(330px,44svh)!important}
  /* enveloppes : carte à égale distance du haut et du bas de la zone visible */
  .env-pin{height:100svh;align-items:center!important;padding:72px 0 5svh!important}
  /* approche : scène plein écran, carte centrée dans la zone visible, sol en perspective dessous */
  .app-pin{height:100svh!important}
  .step{top:calc(50% + 36px - 2.5svh)!important;margin-top:-180px!important;min-height:360px}
  .floor{top:52%!important}
  /* rendez-vous : sans bouton, logo centré entre les pastilles et le bas de la carte, sur un fond teinté */
  .rdv .ctas{display:none}
  .rdv{display:flex;flex-direction:column;gap:0;padding-bottom:0}
  .rdv .logo{align-self:center;width:100%;max-width:250px;height:300px;display:grid;place-items:center}
  .rdv .logo>div{width:100%}
  .rdv .aura .a1{left:8%;right:auto;top:auto;bottom:4%;width:84%;height:42%;opacity:1}
  .rdv .ag{--ag-tint:linear-gradient(150deg,rgb(255 255 255 / .6),rgb(220 236 228 / .25) 55%,rgb(255 255 255 / .45));--ag-shadow:rgb(20 50 38 / .5)}
}

/* ===== Mobile, passe 4 ===== */
@media (max-width:760px){
  .obj-pin{padding-top:104px!important}
  /* enveloppes : titre épinglé avec les cartes, cartes centrées dans l'espace restant */
  .env-pin{flex-direction:column;align-items:stretch!important;justify-content:flex-start;padding:104px 0 5svh!important}
  .env-pin .env-head{flex:none}
  .env-pin .env-track{flex:1 1 auto;align-items:center!important}
  .env-pin .envc{padding:22px!important}
  .env-pin .envc h3{font-size:24px}
  .env-pin .envc .pills{margin-top:14px;gap:5px}
  .env-pin .envc .k{padding-top:16px}
  .env-pin .envc li{padding:8px 0;font-size:14px}
  .env-pin .envc .efoot{padding-top:12px}
  .env-pin .env-head .sub{margin-top:10px}
  /* approche : titre épinglé, carte centrée entre le titre et le bas */
  .app-pin .app-head{position:relative;z-index:2;padding-top:104px}
  .app-pin .step{top:var(--st,50%)!important;margin-top:0!important}
  .app-pin .floor{top:var(--ft,52%)!important}
  /* avis : QR aligné à gauche */
  .avis .qr{justify-self:start!important}
  /* mentions : titre moins collé au haut du panneau */
}
/* Valeurs : l'ombre de la carte n'est plus coupée net (plus de bande grise) */
.values-pin{overflow-x:clip!important;overflow-y:visible!important}
/* Objectifs : titres à la même hauteur sur toutes les cartes (descriptions de 1 à 4 lignes) */
.goal p{min-height:calc(4 * 1.5em);line-height:1.5}
@media (min-width:761px){.goal p{min-height:calc(3 * 1.5em)}}
/* Objectifs : boîte de titre de 3 lignes, tous les titres démarrent à la même hauteur */
.goal h3{min-height:calc(3 * 1.08em);line-height:1.08}
@media (min-width:761px){.goal h3{font-size:clamp(20px,1.7vw,25px)!important;min-height:calc(2 * 1.08em)}.goal{padding:24px!important}}
/* Ordinateur : enveloppes centrées dans la zone visible sous l'en-tête */
@media (min-width:901px){.env-pin{padding-top:72px;box-sizing:border-box}}

/* ---- Optimisations avant mise en ligne (24/10/2026) ---- */
/* Vision : manifeste sur deux lignes, coupure naturelle après « nécessité. » */
@media (min-width:901px){.manifest .text{font-size:clamp(22px,2.2vw,29.5px)}}
/* Vision : mission sur deux lignes équilibrées, sur toute la largeur de la carte */
@media (min-width:901px){.mission2 p{max-width:none;font-size:clamp(26px,2.7vw,39px);text-wrap:balance}}
/* Luxembourg : titre sur deux lignes (« Le Luxembourg, la meilleure / protection d’Europe. ») */
@media (min-width:901px){.lux .h2{max-width:none;font-size:clamp(32px,3.4vw,49px)}}
/* Luxembourg : phrase du bandeau fiscalité sur une ligne */
@media (min-width:1200px){.lux-band p{max-width:none}}
/* Accompagnement : phrase d'introduction sur une ligne */
@media (min-width:1240px){.life-intro .sub{max-width:none;font-size:clamp(17px,1.3vw,18.5px)}}
/* Accompagnement : titres des quatre cartes sur une ligne */
@media (min-width:1081px){#accompagnement .icard h3{font-size:clamp(16px,1.18vw,17px)}}
/* Luxembourg : titre centré face aux deux cartes France / Luxembourg */
@media (min-width:901px){.lux-top{align-items:center}}
/* Enveloppes : titre et sous-titre épinglés au-dessus des cartes sur tous les écrans, cartes centrées dans l'espace restant */
.env-pin{flex-direction:column;align-items:stretch;justify-content:flex-start}
.env-pin .env-head{flex:none}
.env-pin .env-track{flex:1 1 auto;align-items:center}
@media (min-width:761px){.env-pin{padding-top:96px;padding-bottom:0}} /* même espace entre le sous-titre et les cartes qu’entre les cartes et le bas de l’écran */
/* Fonds : Fonds et Catégorie à gauche, 2025 et Cumul 5 ans centrées, Annualisé 5 ans à droite ; le libellé 2025 est à mi-distance des libellés Catégorie et Cumul 5 ans */
.funds th:nth-child(2),.funds td:nth-child(2){text-align:left}
.funds th:nth-child(3),.funds td:nth-child(3),.funds th:nth-child(4),.funds td:nth-child(4){text-align:center}
.funds th:nth-child(5),.funds td:nth-child(5){text-align:right}
@media (min-width:1240px){.funds table{table-layout:fixed}.funds th:nth-child(2){width:206px}.funds th:nth-child(3){width:14.5%}.funds th:nth-child(4){width:24.5%}.funds th:nth-child(5){width:150px}}
/* Pied de page : informations réglementaires (fenêtre) et pages juridiques */
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px}
.foot-links a,.foot-links button{min-height:44px;display:inline-flex;align-items:center;color:inherit;text-decoration:underline;text-underline-offset:3px}
.foot-links a:hover,.foot-links button:hover{color:var(--ink)}
.foot-links a[aria-current]{color:var(--ink);text-decoration:none}
/* Grand écran : ligne réglementaire et liens juridiques sur une seule ligne (11 px, sans retour) */
@media (min-width:1330px){.small{flex-wrap:nowrap;font-size:11px}.small span{white-space:nowrap}.foot-links{flex-wrap:nowrap;gap:0 18px}.foot-links a{white-space:nowrap}}
.consent a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
/* Clients : titre et texte à gauche, centrés verticalement dans les deux cartes */
.who .aud{justify-content:center}
/* Clients, mobile : titre et sous-titre sur une seule ligne (marges réduites, tailles calées sur la largeur de l’écran) */
@media (max-width:760px){.who .aud{padding:28px 24px}.aud h3{font-size:clamp(19px,5.6vw,22px)}.aud p{font-size:clamp(12.5px,3.75vw,14px)}}
/* Simulateur, petits téléphones : les trois profils tiennent dans leur pastille */
@media (max-width:420px){.seg-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}.seg-3 button{padding:0 4px}}
/* Tarifs, petits téléphones : « HT par contrat » passe sous le prix, sur une seule ligne */
@media (max-width:400px){.fee .amt small{display:block;margin:14px 0 0;line-height:1.3}}
/* Simulateur PER : graphique annuel jusqu'à la retraite, pleine largeur sous les cumuls */
#sim-per .per-chart-w{grid-column:1/-1;margin-top:40px;padding-top:32px;border-top:1px solid rgb(255 255 255 / .14)}
#sim-per .per-chart-w .avchart{margin-top:0}
.legend{flex-wrap:wrap;row-gap:8px}
.legend .lg-e::before{background:repeating-linear-gradient(45deg,rgb(255 255 255 / .75) 0 1.5px,rgb(255 255 255 / .12) 1.5px 3.5px);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .5)}
@media (min-width:901px){#sim-per .per-chart-w{grid-row:3}#sim-per .taxbars{grid-row:4 / span 3}#sim-per .gq{grid-row:4}#sim-per .split2{grid-row:5}#sim-per .split-l{grid-row:6}#sim-per #per-opp{grid-row:7}#sim-per #per-warn{grid-row:8}}
/* Simulateur PER, ordinateur : les deux lignes d'impôt centrées verticalement sur tout le bloc « Qui finance… » */
@media (min-width:901px){
  #sim-per .taxbars{display:flex;flex-direction:column;justify-content:center;gap:18px;grid-row:4 / span 3;align-self:stretch}
}
/* Simulateur PER, mobile : libellé et montant sur une ligne, barre pleine largeur dessous */
@media (max-width:560px){
  #sim-per .tb{grid-template-columns:1fr auto;row-gap:10px}
  #sim-per .tb i{grid-column:1/-1;grid-row:2}
}
/* Manifeste, téléphones : taille proportionnelle à la largeur du texte, pour garder « exige un accompagnement » sur une ligne (pas de « exige un » isolé) */
@media (max-width:560px){.manifest .text{font-size:calc((100vw - 2 * var(--pad)) * .08)}}
/* Formulaire, téléphones : sujets et profils l'un sous l'autre, pleine largeur */
@media (max-width:560px){.rform .chips{flex-direction:column}.rform .chip span{display:flex;width:100%}}
/* Pied de page, téléphones : liens juridiques l'un sous l'autre */
@media (max-width:560px){.foot-links{flex-direction:column;align-items:flex-start}}
/* Mots masqués sur téléphone pour tenir sur une ligne (« au terme », « versés ») */
.out-row span.dk,.gq .dk{display:inline}
@media (max-width:560px){
  .dk,.out-row span.dk,.gq .dk{display:none}
  /* Simulateur PER : « Indépendant, TNS » sur une ligne */
  #sim-per .seg-2 button{min-height:44px;padding:0 4px;white-space:nowrap}
  /* Plafonds non utilisés : « Non utilisé N-3 » sur une ligne */
  .n-grid{gap:8px}.n-grid label{font-size:12px;white-space:nowrap}
  /* « Qui finance vos … € cette année ? » sur une ligne */
  #sim-per .gq{white-space:nowrap;font-size:min(15px,calc((100vw - 2 * var(--pad) - 64px) * .054))}
  /* Formulaire : boutons Retour / Continuer à gauche */
  .actions{justify-content:flex-start}
}
@media (max-width:560px){
  /* Assurance-vie : « Fiscalité en cas de rachat total » et « Capital net après rachat total » chacun sur une ligne, l'un sous l'autre */
  #sim-av .out-row.sep{grid-template-columns:1fr;row-gap:18px}
  #sim-av .out-row.sep span{white-space:nowrap}
  /* Pied de page : Mentions légales, Politique de cookies, puis Politique de confidentialité */
  .foot-links a[href$="politique-de-cookies.html"]{order:1}
  .foot-links a[href$="politique-de-confidentialite.html"]{order:2}
}
/* ===== iPad et petits écrans (641 à 1080 px) ===== */
/* Menu : bouton menu à côté de « Prendre rendez-vous », panneau aligné à droite sous l'en-tête */
@media (min-width:641px) and (max-width:1080px){
  .nav .btn{margin-left:auto}
  .burger{display:inline-flex;margin-left:-14px}
  .menu-open .links{display:flex;position:fixed;top:80px;right:var(--pad);width:320px;flex-direction:column;gap:0;padding:8px 20px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 60px rgb(16 20 19 / .12)}
  .menu-open .links a{padding:14px 0;font-size:17px;color:var(--ink)}.menu-open .links a+a{border-top:1px solid var(--line)}
}
/* iPad en paysage (écran tactile, menu affiché) : liens du menu assez hauts pour le doigt */
@media (min-width:1081px) and (hover:none) and (pointer:coarse){.links{gap:22px}.links a{padding:13px 0}}
/* Manifeste, iPad en portrait (561 à 900 px) : taille proportionnelle à la largeur, 4 lignes équilibrées, coupure après « nécessité. », pas de « durée. » seul */
@media (min-width:561px) and (max-width:900px){.manifest .text{font-size:calc((100vw - 2 * var(--pad)) * .047)}}
/* Cartes Clients côte à côte (761 à 1080 px) : titre et texte de chaque carte sur une ligne */
@media (min-width:761px) and (max-width:1080px){
  .who .aud{padding-left:28px;padding-right:28px}
  .who .aud h3{font-size:min(24px,calc((100vw - 2 * var(--pad) - 12px) / 2 * .064))}
  .who .aud p{font-size:min(17px,calc((100vw - 2 * var(--pad) - 12px) / 2 * .042))}
}
/* Honoraires, iPad en portrait (561 à 900 px, carte pleine largeur) : pas de grand vide au-dessus de « 500 € » */
@media (min-width:561px) and (max-width:900px){.fee{min-height:0}.fee .amt{margin-top:32px}}
/* iPad : liens « En parler → » des enveloppes et liens du pied de page assez hauts pour le doigt */
@media (min-width:641px) and (max-width:1080px){.envc .efoot a{display:inline-flex;align-items:center;min-height:44px}.foot li a{display:inline-flex;min-height:40px;align-items:center}}
/* Enveloppes, iPad (761 à 1080 px) : cartes à leur hauteur naturelle comme sur ordinateur (pas étirées sur toute la hauteur),
   centrées entre le sous-titre et le bas de l'écran avec le même espace au-dessus et au-dessous */
@media (min-width:761px) and (max-width:1080px){.env-pin .env-track{align-items:center!important}.env-pin{padding-bottom:0!important}}
/* Sous-titres de sections, iPad (641 à 1080 px) : toute la largeur, donc sur une ligne dès que la phrase y tient */
@media (min-width:641px) and (max-width:1080px){.sub{max-width:none}}
/* Formulaire, iPad (641 à 1080 px) : « Sujets à aborder » (et « Vous êtes ») sur une seule ligne */
@media (min-width:641px) and (max-width:1080px){
  .rform .chips{flex-wrap:nowrap;gap:6px}
  .rform .chip span{padding:0 .85em;font-size:min(15px,calc((100vw - 2 * var(--pad) - 80px) * .0225));white-space:nowrap}
}
/* Simulateur PER, iPad en paysage (901 à 1180 px) : les deux montants l'un sous l'autre, pour que « Financés par l'impôt que vous ne payez plus » tienne sur une ligne */
@media (min-width:901px) and (max-width:1180px){#sim-per .split-l{grid-template-columns:1fr;row-gap:14px}#sim-per .split-l p{white-space:nowrap}}
/* Luxembourg, iPad en portrait (641 à 900 px) : titre sur deux lignes équilibrées, « Le Luxembourg, la meilleure / protection d'Europe. » */
@media (min-width:641px) and (max-width:900px){.lux .h2{max-width:none;text-wrap:balance}}
/* Architecture ouverte, iPad en paysage (901 à 1180 px) : chiffres au-dessus, cylindre des banques privées en dessous (comme en portrait),
   pour que le cylindre ne recouvre plus la pastille « Supports d'investissement » */
@media (min-width:901px) and (max-width:1180px){#supports .sup-row{grid-template-columns:1fr;gap:24px}}
/* Tableau des fonds, iPad (761 à 1180 px) : colonne « Cumul 5 ans » décalée de 22 px vers la droite, à égale distance de 2025 et de l'annualisé
   (décalage visuel seulement, la largeur des colonnes ne change pas) */
@media (min-width:761px) and (max-width:1180px){.funds th:nth-child(4){text-indent:44px}.funds td:nth-child(4) span{position:relative;left:22px}}
/* Banques privées, iPad en paysage : cylindre agrandi pour occuper presque toute la largeur, hauteur de la zone inchangée (260 px à l'écran) */
@media (min-width:901px) and (max-width:1080px){#supports .cyl-stage{zoom:1.25;height:208px}}
@media (min-width:1081px) and (max-width:1180px){#supports .cyl-stage{zoom:1.45;height:179px}}