/* ===== TRAJECTOIRES — design system partagé ===== */
:root{
  --bg:#FFFFFF;--surface:#FFF;--surface-2:#F4F5F8;--ink:#2A2A52;--ink-soft:#54547A;--muted:#8A8AA3;--line:#E7E9F0;
  --coral:#EE5A45;--orange:#F4954B;--grad:linear-gradient(100deg,#EE5645,#F2783F 55%,#F6994D);
  --grad-soft:linear-gradient(135deg,#FCEAE2,#FBE3D4);--navy-grad:linear-gradient(150deg,#2A2A52,#3a3a6e);
  --disp:"Bricolage Grotesque",sans-serif;--sans:"Hanken Grotesk",sans-serif;--ease:cubic-bezier(.2,.8,.2,1);
  --radius:22px;--maxw:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:.045;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--coral)}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--grad);border-radius:2px;transform-origin:left}
h1,h2,h3{font-family:var(--disp);font-weight:600;letter-spacing:-.02em;line-height:1.08;color:var(--ink)}
.grad-text{background:var(--grad);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 7s linear infinite}
@keyframes sheen{to{background-position:220% center}}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55em;padding:1em 1.7em;border-radius:100px;font-weight:600;font-size:.95rem;cursor:pointer;border:1.5px solid transparent;transition:transform .25s var(--ease),box-shadow .35s,background .35s,color .35s;position:relative;overflow:hidden;will-change:transform}
.btn .a{transition:transform .35s}.btn:hover .a{transform:translate(4px,-2px)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 14px 30px -12px rgba(238,90,69,.6)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 44px -14px rgba(238,90,69,.75)}
.btn-primary::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:shine 5s ease-in-out infinite;pointer-events:none}
@keyframes shine{0%{left:-70%}55%{left:130%}100%{left:130%}}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-white{background:#fff;color:var(--ink)}.btn-white:hover{transform:translateY(-2px)}

/* nav */
nav{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:18px 26px;transition:padding .4s,background .4s,box-shadow .4s;transform:translateY(-120%);animation:dropin .8s .2s var(--ease) forwards}
@keyframes dropin{to{transform:none}}
nav.scrolled{background:rgba(252,247,241,.85);backdrop-filter:blur(12px);padding:11px 26px;box-shadow:0 1px 0 var(--line)}
.brand img{height:44px;width:auto;border-radius:9px;box-shadow:0 6px 16px -8px rgba(238,90,69,.5);transition:transform .4s var(--ease)}
.brand:hover img{transform:rotate(-3deg) scale(1.04)}
.nav-links{display:flex;gap:36px;font-size:.94rem;font-weight:500}
.nav-links a{position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%;background:var(--grad);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--coral)}
.nav-cta{display:flex;align-items:center;gap:14px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px}
.navm{display:none;position:fixed;inset:0;z-index:99;background:var(--bg);flex-direction:column;align-items:center;justify-content:center;gap:24px;font-family:var(--disp);font-size:1.7rem;font-weight:600}
.navm.open{display:flex}
.navm .close{position:absolute;top:22px;right:26px;font-size:2.4rem;background:none;border:0;cursor:pointer;line-height:1}
.navm a.active{color:var(--coral)}

/* mesh bg */
.mesh{position:absolute;border-radius:50%;filter:blur(60px);opacity:.6;pointer-events:none}
.mesh.a{width:460px;height:460px;background:radial-gradient(circle,#F7C9A6,transparent 70%);top:-120px;right:-80px;animation:float1 16s ease-in-out infinite}
.mesh.b{width:380px;height:380px;background:radial-gradient(circle,#F3A3B0,transparent 70%);bottom:-100px;left:-60px;animation:float2 19s ease-in-out infinite}
.mesh.c{width:300px;height:300px;background:radial-gradient(circle,#FBD9A6,transparent 70%);top:30%;left:40%;animation:float1 22s ease-in-out infinite}
@keyframes float1{50%{transform:translate(-26px,30px) scale(1.08)}}
@keyframes float2{50%{transform:translate(30px,-24px) scale(1.1)}}

/* ===== HERO (accueil) ===== */
.hero{position:relative;padding:140px 0 80px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.hero-copy{max-width:30em;margin-bottom:46px}
.hero-copy .eyebrow{margin-bottom:18px}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.2rem);margin-bottom:20px}
.hero .lead{font-size:1.18rem;color:var(--ink-soft);max-width:34em;margin-bottom:30px}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.hero-note{font-size:.84rem;color:var(--muted)}
.hero-visual{display:grid;grid-template-columns:.82fr 1.18fr;gap:28px;align-items:center}
.hero-photo{position:relative}
.hero-photo .frame{border-radius:30px 30px 30px 90px;overflow:hidden;border:6px solid #fff;box-shadow:0 40px 80px -40px rgba(42,42,82,.5);aspect-ratio:4/5;background:#dfe3ef}
.hero-photo .frame img{width:100%;height:100%;object-fit:cover;animation:ken 16s ease-in-out infinite alternate}
@keyframes ken{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.hero-photo .ph-badge{position:absolute;left:-14px;bottom:24px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 20px 40px -22px rgba(42,42,82,.5)}
.hero-photo .ph-badge .ic{width:38px;height:38px;border-radius:10px;background:var(--grad);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:.85rem}
.hero-photo .ph-badge b{font-size:.86rem;display:block}.hero-photo .ph-badge small{font-size:.72rem;color:var(--muted)}

/* brand animated card */
.brand-card{position:relative;background:linear-gradient(160deg,#fff,#FBF1E8);border:1px solid var(--line);border-radius:26px;padding:34px 30px 30px;box-shadow:0 40px 80px -44px rgba(42,42,82,.45);overflow:hidden}
.brand-card .glow{position:absolute;inset:0;background:radial-gradient(120% 80% at 70% 10%,rgba(246,153,77,.18),transparent 60%);pointer-events:none}
.brand-card .wm{width:min(70%,260px);margin:0 auto 6px;position:relative}
.brand-card svg{width:100%;height:auto;display:block;position:relative}
.route .track{stroke:rgba(42,42,82,.14);stroke-width:2;stroke-dasharray:2 9;fill:none}
.route .trace{stroke:url(#rg);stroke-width:4;stroke-linecap:round;fill:none;stroke-dasharray:920;stroke-dashoffset:920;transition:stroke-dashoffset 1.8s var(--ease)}
.brand-card.in .route .trace{stroke-dashoffset:0}
.route .node{fill:#fff;stroke:url(#rg);stroke-width:3}
.route .lbl{fill:var(--muted);font:700 11px var(--sans);letter-spacing:.08em;text-transform:uppercase}
.route .traveler{fill:var(--coral);filter:drop-shadow(0 0 6px rgba(238,90,69,.7))}
.fc{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 18px 40px -22px rgba(42,42,82,.5);font-size:.8rem}
.fc .ic{width:34px;height:34px;border-radius:9px;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700;font-family:var(--disp)}
.fc b{display:block;font-size:.82rem}.fc small{color:var(--muted);font-size:.72rem}
.fc.q{top:-18px;right:18px}.fc.s{bottom:-16px;left:18px}

.trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.trust div{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600}
.trust .dot{width:24px;height:24px;border-radius:50%;background:var(--grad-soft);color:var(--coral);display:grid;place-items:center;font-size:.85rem}

/* ===== PAGE HERO (pages internes) ===== */
.phero{position:relative;padding:150px 0 60px;overflow:hidden}
.phero .wrap{position:relative;z-index:1}
.phero h1{font-size:clamp(2.2rem,5vw,3.6rem);margin:14px 0 14px}
.phero .lead{font-size:1.15rem;color:var(--ink-soft);max-width:40em}

/* ===== sections ===== */
section{position:relative}
.sec{padding:86px 0}
.sec-head{max-width:34em;margin-bottom:44px}
.sec-head.center{text-align:center;margin-inline:auto}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin:14px 0 10px}
.sec-head p{color:var(--ink-soft)}

/* pour qui */
.pq-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pq{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;transition:transform .35s var(--ease),box-shadow .4s,border-color .4s}
.pq:hover{transform:translateY(-7px);box-shadow:0 30px 56px -32px rgba(42,42,82,.4);border-color:var(--orange)}
.pq .em{font-size:2rem;display:block;margin-bottom:14px;animation:bob 4s ease-in-out infinite}
.pq:nth-child(2) .em{animation-delay:.5s}.pq:nth-child(3) .em{animation-delay:1s}.pq:nth-child(4) .em{animation-delay:1.5s}
@keyframes bob{50%{transform:translateY(-7px)}}
.pq:hover .em{animation-play-state:paused}
.pq h3{font-size:1.12rem;margin-bottom:8px}.pq p{font-size:.92rem;color:var(--ink-soft)}

/* prestations */
.presta-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px 30px;display:flex;flex-direction:column;overflow:hidden;transition:transform .35s var(--ease),box-shadow .4s,border-color .4s}
.pcard:hover{box-shadow:0 40px 78px -36px rgba(238,90,69,.45);border-color:var(--orange)}
.pcard .pic{width:54px;height:54px;border-radius:14px;background:var(--grad-soft);display:grid;place-items:center;font-size:1.55rem;margin-bottom:16px;transition:transform .4s var(--ease)}
.pcard:hover .pic{transform:scale(1.08) rotate(-5deg)}
.pcard h3{font-size:1.32rem;margin-bottom:8px}
.pcard p{color:var(--ink-soft);font-size:.96rem;margin-bottom:16px;flex:1}
.pcard .meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{font-size:.72rem;font-weight:600;padding:5px 11px;border-radius:100px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft)}
.chip.cpf{background:#28443B;color:#CFE7DA;border-color:transparent}
.pcard .more{font-weight:600;color:var(--ink);display:inline-flex;gap:.4em;align-self:flex-start}
.pcard:hover .more{color:var(--coral)}

/* demarche */
.demarche{background:var(--navy-grad);color:#fff;border-radius:34px;margin:0 14px;padding:80px 0;position:relative;overflow:hidden}
.demarche::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(244,149,75,.4),transparent 70%);top:-100px;right:-60px}
.demarche .wrap{position:relative;z-index:1}
.demarche .sec-head h2,.demarche .eyebrow{color:#fff}
.demarche .sec-head p{color:rgba(255,255,255,.75)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px;position:relative}
.steps::before{content:"";position:absolute;top:46px;left:14%;right:14%;height:2px;background:linear-gradient(90deg,var(--coral),var(--orange));opacity:.4}
.step-comet{position:absolute;top:46px;left:12%;width:13px;height:13px;border-radius:50%;background:var(--grad);box-shadow:0 0 14px 4px rgba(238,90,69,.6);opacity:0;transform:translate(-50%,-50%)}
.steps.in .step-comet{animation:travel 3.6s 1.4s ease-in-out infinite}
@keyframes travel{0%{left:12%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:88%;opacity:0}}
.step{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:26px;backdrop-filter:blur(4px)}
.step .n{font-family:var(--disp);font-weight:700;font-size:2rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{color:#fff;font-size:1.1rem;margin:6px 0 8px}.step p{color:rgba(255,255,255,.78);font-size:.92rem}

/* qualiopi */
.quali{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:30px 34px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:space-between}
.quali .qi{display:flex;align-items:center;gap:18px}
.quali .qbadge{width:64px;height:64px;border-radius:16px;background:var(--grad);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:1.5rem;flex:none}
.quali h3{font-size:1.15rem}.quali p{color:var(--ink-soft);font-size:.92rem;max-width:40em}

/* testimonials */
.testi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:940px;margin-inline:auto}
.quote{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column;gap:16px;transition:transform .4s var(--ease),box-shadow .4s}
.quote:hover{transform:translateY(-6px);box-shadow:0 30px 56px -32px rgba(42,42,82,.35)}
.quote::before{content:"\201C";position:absolute;top:8px;right:18px;font-family:var(--disp);font-size:4rem;line-height:1;color:var(--orange);opacity:.18}
.quote .stars{color:var(--orange);letter-spacing:3px;font-size:.95rem}
.quote blockquote{font-family:var(--disp);font-weight:500;font-size:1.06rem;line-height:1.45;color:var(--ink)}
.quote .who{display:flex;align-items:center;gap:12px;margin-top:auto}
.quote .av{width:42px;height:42px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;font-family:var(--disp);font-weight:700;flex:none}
.quote .who b{font-size:.92rem;display:block}.quote .who small{font-size:.78rem;color:var(--muted)}

/* faq */
.faq-list{max-width:820px;margin:0 auto}
.faq-item{border:1px solid var(--line);border-radius:16px;background:var(--surface);margin-bottom:12px;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.faq-item.open{border-color:var(--orange);box-shadow:0 22px 46px -30px rgba(238,90,69,.4)}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:22px 24px;font-family:var(--disp);font-weight:600;font-size:1.06rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-q .ic{flex:none;width:27px;height:27px;border-radius:50%;background:var(--grad-soft);color:var(--coral);display:grid;place-items:center;font-size:1.2rem;line-height:1;transition:transform .35s var(--ease)}
.faq-item.open .faq-q .ic{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-a p{padding:0 24px 22px;color:var(--ink-soft);font-size:.96rem}

/* CTA band */
.cta{padding:30px 0 90px}
.cta-inner{position:relative;background:var(--grad);border-radius:30px;padding:64px 40px;text-align:center;color:#fff;overflow:hidden;box-shadow:0 40px 80px -40px rgba(238,90,69,.7)}
.cta-inner::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 50% 0,rgba(255,255,255,.25),transparent 60%)}
.cta-inner>*{position:relative}
.cta-inner h2{color:#fff;font-size:clamp(1.9rem,4vw,3rem);margin-bottom:14px}
.cta-inner p{color:rgba(255,255,255,.9);max-width:34em;margin:0 auto 26px}

/* footer */
.foot{background:var(--ink);color:#D7D7E6;padding:64px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px}
.foot .brand-f{font-family:var(--disp);font-weight:600;font-size:1.4rem;color:#fff;margin-bottom:12px}
.foot p{font-size:.92rem;color:#A9A9C4;max-width:28em}
.foot h4{color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.foot-col a{display:block;color:#B8B8D0;font-size:.92rem;margin-bottom:9px;transition:color .25s}
.foot-col a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.82rem;color:#8E8EA8}

/* reveals */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}.rv[data-d="2"]{transition-delay:.16s}.rv[data-d="3"]{transition-delay:.24s}.rv[data-d="4"]{transition-delay:.32s}
.split .w{display:inline-block;opacity:0;transform:translateY(22px) rotate(2deg);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.split.in .w{opacity:1;transform:none}

/* back to top */
.totop{position:fixed;right:18px;bottom:18px;z-index:90;width:48px;height:48px;border-radius:50%;background:var(--grad);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;font-size:1.3rem;box-shadow:0 14px 30px -12px rgba(238,90,69,.7);opacity:0;transform:translateY(18px) scale(.8);pointer-events:none;transition:opacity .4s,transform .4s}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{transform:translateY(-3px)}

/* forms (contact) */
.formcard{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:32px;box-shadow:0 30px 60px -40px rgba(42,42,82,.4)}
.field{margin-bottom:16px}.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:block;font-weight:600;font-size:.88rem;margin-bottom:6px}
input,select,textarea{width:100%;padding:.85em 1em;border:1.5px solid var(--line);border-radius:12px;font:inherit;background:#fff;color:var(--ink);transition:border-color .25s,box-shadow .25s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(244,149,75,.16)}
textarea{min-height:140px;resize:vertical}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;color:var(--ink-soft);margin:6px 0 20px}
.consent input{width:auto;margin-top:4px;flex:none}.consent a{color:var(--coral);font-weight:600}
.submit{width:100%;justify-content:center;font-size:1rem;border:0}
.cgrid{display:grid;grid-template-columns:1.25fr .9fr;gap:34px;align-items:start}
.icard{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:8px 24px}
.iitem{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}.iitem:last-child{border-bottom:0}
.iitem .ic{width:44px;height:44px;border-radius:12px;background:var(--grad-soft);display:grid;place-items:center;font-size:1.25rem;flex:none}
.iitem b{display:block;font-size:.95rem}.iitem span{color:var(--ink-soft);font-size:.9rem}.iitem a{color:var(--coral);font-weight:600}
.bookcard{background:var(--navy-grad);color:#fff;border-radius:20px;padding:26px;position:relative;overflow:hidden;margin-top:18px}
.bookcard::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(244,149,75,.45),transparent 70%);top:-60px;right:-50px}
.bookcard h3{color:#fff;font-size:1.25rem;margin-bottom:8px;position:relative}.bookcard p{color:rgba(255,255,255,.8);font-size:.92rem;margin-bottom:18px;position:relative}
.todo{background:#FCEAE2;border:1px dashed var(--coral);color:#9A3B2C;padding:1px 7px;border-radius:6px;font-size:.85em;font-weight:600}
.note{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:12px;padding:16px 18px;margin:18px 0;font-size:.95rem;color:var(--ink-soft)}

/* legal/content pages */
.content{max-width:780px}
.content h2{font-size:1.32rem;margin:38px 0 10px}.content h3{font-size:1.05rem;margin:22px 0 6px}
.content p{margin:0 0 12px;color:var(--ink-soft)}
.content ul{margin:0 0 14px;list-style:none}
.content li{position:relative;padding-left:1.5em;margin-bottom:8px;color:var(--ink-soft)}
.content li::before{content:"→";position:absolute;left:0;color:var(--coral);font-weight:700}
.content a{color:var(--coral);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.content strong{color:var(--ink)}

/* ===== responsive ===== */
@media(min-width:993px){
  .hero{padding:150px 0 90px}
}
@media(max-width:920px){
  .nav-links,.nav-cta .btn{display:none}.burger{display:flex}
  .hero{padding:110px 0 60px}
  .hero-visual{grid-template-columns:1fr;gap:34px;max-width:460px}
  .hero-photo .frame{aspect-ratio:5/4;border-radius:24px 24px 24px 60px}
  .pq-grid{grid-template-columns:1fr 1fr;gap:12px}
  .presta-grid{grid-template-columns:1fr}
  .testi-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:14px}.steps::before,.step-comet{display:none}
  .demarche{margin:0 10px;padding:56px 0;border-radius:26px}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .cgrid{grid-template-columns:1fr}
  .quali{flex-direction:column;align-items:flex-start;text-align:left}
}
@media(max-width:520px){
  .wrap{padding:0 18px}.pq-grid{grid-template-columns:1fr}.row2{grid-template-columns:1fr}
  .cta-inner{padding:46px 24px}.formcard{padding:24px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  nav{transform:none!important}
  .rv,.split .w{opacity:1!important;transform:none!important}
  .brand-card .trace,.route .trace{stroke-dashoffset:0!important}
}

/* ===== v2 : hero graphique en haut, à propos, tarifs ===== */
.hero-centered .hero-copy{max-width:48em;margin:0 auto;text-align:center}
.hero-centered .eyebrow{justify-content:center}
.hero-centered .lead{margin-left:auto;margin-right:auto}
.hero-centered .actions{justify-content:center}
.hero-centered .hero-note{text-align:center}
.hero-graphic{position:relative;max-width:760px;margin:0 auto 46px;background:linear-gradient(160deg,#fff,#FBF1E8);border:1px solid var(--line);border-radius:28px;padding:30px 36px 26px;box-shadow:0 50px 100px -54px rgba(42,42,82,.5);overflow:hidden}
.hero-graphic .glow{position:absolute;inset:0;background:radial-gradient(120% 80% at 70% 6%,rgba(246,153,77,.2),transparent 60%);pointer-events:none}
.hero-graphic .wm{width:min(52%,290px);margin:0 auto 6px;display:block;position:relative}
.hero-graphic svg{width:100%;height:auto;display:block;position:relative}
.hero-graphic.in .route .trace{stroke-dashoffset:0}
.hero-trust{display:flex;gap:14px 26px;flex-wrap:wrap;justify-content:center;margin-top:32px}
.hero-trust div{display:flex;align-items:center;gap:9px;font-size:.9rem;font-weight:600}
.hero-trust .dot{width:26px;height:26px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:.8rem;flex:none}

/* à propos (je vous accompagne) */
.about{display:grid;grid-template-columns:.82fr 1.18fr;gap:42px;align-items:center}
.about .portrait{position:relative;border-radius:30px 30px 30px 90px;overflow:hidden;border:6px solid #fff;box-shadow:0 44px 84px -44px rgba(42,42,82,.5);aspect-ratio:4/5;background:#dfe3ef}
.about .portrait img{width:100%;height:100%;object-fit:cover;animation:ken 16s ease-in-out infinite alternate}
.about .pbadge{position:absolute;left:-14px;bottom:24px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:11px 15px;display:flex;align-items:center;gap:10px;box-shadow:0 20px 40px -22px rgba(42,42,82,.5)}
.about .pbadge .ic{width:36px;height:36px;border-radius:10px;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700;font-family:var(--disp)}
.about .pbadge b{font-size:.85rem;display:block}.about .pbadge small{font-size:.72rem;color:var(--muted)}
.about h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin:14px 0 14px}
.about p{color:var(--ink-soft);margin-bottom:12px}
.creds{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cred{font-size:.78rem;font-weight:600;padding:6px 12px;border-radius:100px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft)}

/* tarifs */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.price{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .4s}
.price:hover{transform:translateY(-6px);box-shadow:0 36px 70px -38px rgba(42,42,82,.35)}
.price.feat{border-color:var(--orange);box-shadow:0 34px 64px -34px rgba(238,90,69,.4)}
.price .tag{position:absolute;top:-12px;left:26px;background:var(--grad);color:#fff;font-size:.72rem;font-weight:700;padding:5px 13px;border-radius:100px}
.price .pic{width:50px;height:50px;border-radius:13px;background:var(--grad-soft);display:grid;place-items:center;font-size:1.4rem;margin-bottom:14px}
.price h3{font-size:1.3rem;margin-bottom:4px}
.price .sub{color:var(--muted);font-size:.85rem;margin-bottom:18px}
.price .amount{font-family:var(--disp);font-weight:700;font-size:2.1rem;color:var(--ink);line-height:1}
.price .amount small{font-size:.95rem;font-weight:500;color:var(--ink-soft)}
.price .fin{font-size:.82rem;color:var(--coral);font-weight:700;margin:6px 0 18px}
.price ul{list-style:none;margin:0 0 24px;display:flex;flex-direction:column;gap:10px}
.price li{position:relative;padding-left:1.7em;font-size:.92rem;color:var(--ink-soft)}
.price li::before{content:"✓";position:absolute;left:0;color:var(--orange);font-weight:700}
.price .btn{margin-top:auto;justify-content:center}
.fin-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px}
.fin-badge{display:flex;align-items:center;gap:9px;font-size:.85rem;font-weight:600;background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:9px 17px}
.fin-badge .d{width:9px;height:9px;border-radius:50%;background:var(--grad)}
.tarif-note{max-width:680px;margin:24px auto 0;text-align:center;font-size:.88rem;color:var(--muted)}

@media(max-width:920px){
  .about{grid-template-columns:1fr;gap:26px}.about .portrait{max-width:360px}
  .price-grid{grid-template-columns:1fr}
}

/* ===== v3 : hero côte à côte (desktop) + polish anim tracé ===== */
@media(min-width:993px){
  .hero-centered .wrap{display:grid;grid-template-columns:1.05fr 1.2fr;gap:54px;align-items:center}
  .hero-centered .hero-copy{order:1;max-width:none;margin:0;text-align:left}
  .hero-centered .hero-copy .eyebrow{justify-content:flex-start}
  .hero-centered .hero-copy .lead{margin:0 0 30px;max-width:34em}
  .hero-centered .hero-copy .actions{justify-content:flex-start}
  .hero-centered .hero-copy .hero-note{text-align:left}
  .hero-centered .hero-trust{justify-content:flex-start}
  .hero-centered .hero-graphic{order:2;margin:0;max-width:none;width:100%}
}
/* pulsation douce sur le point d'arrivée du tracé (accueil) */
.route g.node:last-of-type circle{animation:destpulse 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes destpulse{0%,100%{filter:drop-shadow(0 0 1px rgba(238,90,69,.35))}50%{filter:drop-shadow(0 0 10px rgba(238,90,69,.9))}}

/* wm-crisp-v4 */
.hero-graphic .wm,.brand-card .wm,.intro-word img{image-rendering:auto}

/* grid3-v5 : grille 3 colonnes responsive */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:920px){.grid3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid3{grid-template-columns:1fr}}
.grid3 .pq sup{font-size:.7em}

/* grid3-v6 : grille 3 colonnes responsive */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid3 .pq{height:100%}
.grid3 .pq .em{font-size:1.7rem}
@media(max-width:920px){.grid3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid3{grid-template-columns:1fr}}
.pq sup{font-size:.7em}

/* price-grid-3-v6 : tarifs en avant sur l'accueil */
.price-grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:920px){.price-grid-3{grid-template-columns:1fr}}

/* ================= premium-v8 ================= */

/* --- Qualiopi : sceau animé --- */
.quali-hero{display:flex;align-items:center;gap:28px;margin-top:34px;background:linear-gradient(160deg,#fff,#FBF1E8);border:1px solid var(--line);border-radius:24px;padding:26px 30px;box-shadow:0 40px 80px -50px rgba(42,42,82,.45);flex-wrap:wrap}
.quali-seal{position:relative;width:108px;height:108px;flex:none;display:grid;place-items:center}
.seal-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,var(--coral),var(--orange),#F6C46B,var(--coral));animation:sealspin 7s linear infinite;filter:drop-shadow(0 8px 20px rgba(238,90,69,.4))}
.seal-ring::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
.seal-core{position:relative;z-index:1;width:84px;height:84px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-content:center;text-align:center;box-shadow:inset 0 2px 8px rgba(255,255,255,.4)}
.seal-core b{font-family:var(--disp);font-weight:700;font-size:1.9rem;line-height:1}
.seal-core span{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.95}
@keyframes sealspin{to{transform:rotate(360deg)}}
.quali-hero-txt{flex:1;min-width:240px}
.quali-hero-txt h3{font-size:1.2rem;margin-bottom:6px}
.quali-hero-txt p{color:var(--ink-soft);font-size:.95rem;margin-bottom:12px}

/* --- KPI animés --- */
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:880px;margin:0 auto}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 24px;text-align:center;position:relative;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.kpi::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.kpi.in::before{transform:scaleX(1)}
.kpi:hover{transform:translateY(-6px);box-shadow:0 30px 56px -32px rgba(238,90,69,.4);border-color:var(--orange)}
.kpi-num{font-family:var(--disp);font-weight:700;font-size:3rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi-lbl{color:var(--ink-soft);font-size:.95rem;margin-top:8px}
@media(max-width:760px){.kpi-grid{grid-template-columns:1fr;max-width:340px}}

/* --- TARIFS premium : cartes plus design --- */
.price{overflow:hidden}
.price::after{content:"";position:absolute;inset:-40% 50% auto -40%;height:80%;background:radial-gradient(circle,rgba(246,153,77,.16),transparent 60%);opacity:0;transition:opacity .5s;pointer-events:none}
.price:hover::after{opacity:1}
.price .pic{transition:transform .45s var(--ease)}
.price:hover .pic{transform:rotate(-6deg) scale(1.1)}
.price .amount{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;transition:transform .4s var(--ease)}
.price:hover .amount{transform:scale(1.04)}
.price.feat{position:relative}
.price.feat::before{content:"";position:absolute;inset:0;border-radius:var(--radius);padding:1.5px;background:var(--grad);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.9}
.price.feat .tag{box-shadow:0 8px 20px -6px rgba(238,90,69,.6);animation:tagpulse 2.6s ease-in-out infinite}
@keyframes tagpulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.price li{opacity:0;transform:translateX(-8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.price.in li{opacity:1;transform:none}
.price.in li:nth-child(1){transition-delay:.05s}.price.in li:nth-child(2){transition-delay:.12s}.price.in li:nth-child(3){transition-delay:.19s}.price.in li:nth-child(4){transition-delay:.26s}.price.in li:nth-child(5){transition-delay:.33s}

/* --- ruban "à partir de" sur la home tarifs --- */
#apercu-tarifs{position:relative;overflow:hidden}
#apercu-tarifs::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(244,149,75,.18),transparent 65%);top:-160px;left:-120px;pointer-events:none}
#apercu-tarifs::after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(243,163,176,.16),transparent 65%);bottom:-160px;right:-120px;pointer-events:none}
.price .amount small{-webkit-text-fill-color:var(--ink-soft)}

/* --- nav : 5 liens, garder lisible --- */
@media(min-width:921px){.nav-links{gap:28px}}

/* --- reveal scale pour cartes --- */
.rv.pop{transform:translateY(26px) scale(.97)}
.rv.pop.in{transform:none}

/* === agents design v9 === */
/* Bloc consolidé — à AJOUTER en fin de style.css (override propre, non destructif).
   Vérifié contre le DOM réel des 6 pages + style.css (1->442).
   Réutilise STRICTEMENT les variables existantes. transform/opacity uniquement.
   Breakpoints d'origine respectés (920/520 + ajouts 760/390 non destructifs).

   NB IMPORTANT (corrections vs propositions du panel) :
   - La nav mobile N'EST PAS cassée : un burger (#burger) + overlay plein écran (#navm)
     existent sur les 6 pages, et l'existant fait déjà `.nav-links,.nav-cta .btn{display:none}`
     + `.burger{display:flex}` à <=920px. => on NE touche PAS à la nav (sinon double menu).
   - Le hero .traveler s'anime DÉJÀ via SVG <animateMotion> (dur 6s, indefinite) :
     on N'AJOUTE PAS d'offset-path (doublon/conflit). On enrichit seulement la lueur.
   - Le titre hero est .grad-text (déjà animé par `sheen`) : on n'y touche pas.
   - .card, .sec.tint, .pcard.feat n'existent pas dans le DOM : aucun sélecteur dessus.
*/

/* ------------------------------------------------------------------
   1) HERO — tracé orange plus vivant (sans casser le "draw" au .in)
   .trace est déjà peint (stroke:url(#rg)) et se dessine une fois via
   stroke-dashoffset au .in (l.86-87/311). On AJOUTE seulement une lueur
   qui respire, déclenchée APRÈS le draw, scopée au hero d'accueil.
   ------------------------------------------------------------------ */
.hero-graphic .route{overflow:visible}
.hero-graphic.in .route .trace{animation:v9-traceGlow 6.5s ease-in-out 2s infinite}
@keyframes v9-traceGlow{
  0%,100%{filter:drop-shadow(0 2px 6px rgba(238,90,69,.16))}
  50%    {filter:drop-shadow(0 4px 13px rgba(244,149,75,.32))}
}
/* halo doux qui suit le point voyageur (le mouvement reste géré par <animateMotion>) */
.hero-graphic .route .traveler{filter:drop-shadow(0 0 5px rgba(238,90,69,.55)) drop-shadow(0 0 12px rgba(244,149,75,.35))}
/* (pulsation du point d'arrivée déjà gérée par destpulse l.366 — non dupliquée) */

/* HERO — parallaxe douce des blobs (classes réelles .mesh.a/.b/.c).
   Le JS pose --pmx/--pmy/--pscroll sur #hero ; on consomme en translate3d (GPU). */
.hero .mesh{will-change:transform;transition:transform .6s var(--ease)}
.hero .mesh.a{transform:translate3d(calc(var(--pmx,0)*20px),calc(var(--pscroll,0)*36px + var(--pmy,0)*20px),0)}
.hero .mesh.b{transform:translate3d(calc(var(--pmx,0)*-24px),calc(var(--pscroll,0)*-48px + var(--pmy,0)*-24px),0)}
.hero .mesh.c{transform:translate3d(calc(var(--pmx,0)*14px),calc(var(--pscroll,0)*26px + var(--pmy,0)*14px),0)}

/* ------------------------------------------------------------------
   2) TARIFS — désirabilité des cartes .price (la .price EST la carte ici).
   .price::after (glow) et .price.feat::before (bordure dégradée) existent déjà :
   on n'ajoute NI overflow NI pseudo en conflit.
   ------------------------------------------------------------------ */
.price.feat{transform:scale(1.03);z-index:2;
  box-shadow:0 34px 64px -30px rgba(238,90,69,.5),0 10px 26px -12px rgba(238,90,69,.3)}
.price.feat:hover{transform:scale(1.03) translateY(-6px);
  box-shadow:0 44px 84px -32px rgba(238,90,69,.56),0 14px 32px -14px rgba(238,90,69,.4)}
@media(max-width:920px){              /* grille 1 colonne : zéro débordement, alignement parfait */
  .price.feat{transform:none}
  .price.feat:hover{transform:translateY(-6px)}
}

/* séparateur dégradé entre prix et mention de financement, s'étire au survol
   (.fin suit toujours .amount — vérifié sur les 7 cartes) */
.price .amount{padding-bottom:12px}
.price .fin{position:relative;padding-top:14px}
.price .fin::before{content:"";position:absolute;top:0;left:0;width:40px;height:3px;border-radius:3px;
  background:var(--grad);transition:width .5s var(--ease)}
.price:hover .fin::before{width:80px}

/* badge "La plus choisie" : reflet qui balaie (tagpulse/flottement existe déjà) */
.price .tag{overflow:hidden}
.price.feat .tag::after{content:"";position:absolute;inset:0 auto 0 -130%;width:55%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-18deg);animation:v9-tagShine 3.6s var(--ease) infinite;pointer-events:none}
@keyframes v9-tagShine{0%{left:-130%}30%{left:140%}100%{left:140%}}

/* puces ✓ -> pastilles corail pleines au survol de la carte */
.price li::before{display:inline-grid;place-items:center;width:1.15em;height:1.15em;line-height:1;
  border-radius:50%;font-size:.74em;top:.18em;
  transition:background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease)}
.price:hover li::before{background:var(--grad);color:#fff;box-shadow:0 4px 10px -4px rgba(238,90,69,.55)}

/* badge .tag à top:-12px : marge anti-collision quand les cartes s'empilent (<=920px) */
@media(max-width:920px){.price-grid{row-gap:30px}}

/* ------------------------------------------------------------------
   3) QUALIOPI — sceau premium (markup réel : .quali-seal>.seal-ring+.seal-core).
   .seal-ring tourne déjà (sealspin l.395) : on n'y retouche pas la rotation.
   On ajoute un halo derrière .quali-seal + un reflet vitré/sheen sur .seal-core.
   (.quali-hero-art / .seal-inner / .quali-band n'existent pas -> non ciblés.)
   ------------------------------------------------------------------ */
.quali-seal{isolation:isolate}
.quali-seal::before{content:"";position:absolute;inset:-24px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(244,149,75,.30),rgba(238,90,69,.08) 56%,transparent 72%);
  animation:v9-sealPulse 4.4s var(--ease) infinite}
@keyframes v9-sealPulse{0%,100%{transform:scale(.9);opacity:.55}50%{transform:scale(1.06);opacity:1}}
.seal-core{overflow:hidden}
.seal-core>b,.seal-core>span{position:relative;z-index:2}
.seal-core::before{content:"";position:absolute;inset:0;z-index:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(120% 80% at 30% 14%,rgba(255,255,255,.85),rgba(255,255,255,0) 48%)}
.seal-core::after{content:"";position:absolute;top:-60%;left:-30%;z-index:1;width:55%;height:220%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-180%) rotate(22deg);animation:v9-sealSheen 5.6s var(--ease) infinite}
@keyframes v9-sealSheen{0%,72%{transform:translateX(-180%) rotate(22deg)}100%{transform:translateX(380%) rotate(22deg)}}

/* QUALIOPI — KPI : le liseré .kpi.in::before existe déjà (l.408-409, on n'y touche pas).
   On ajoute hover surélevé + lueur d'angle + chiffres tabulaires (.kpi overflow:hidden déjà posé). */
.kpi::after{content:"";position:absolute;right:-40px;bottom:-40px;width:140px;height:140px;border-radius:50%;
  z-index:0;opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(closest-side,rgba(244,149,75,.18),transparent 70%)}
.kpi-num,.kpi-lbl{position:relative;z-index:1}
.kpi:hover::after{opacity:1}
.kpi-num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ------------------------------------------------------------------
   4) MICRO-INTERACTIONS globales (boutons / nav / cartes / FAQ / étapes)
   ------------------------------------------------------------------ */
/* boutons : feedback tactile au clic + focus clavier doux dans la palette */
.btn-primary:active{transform:translateY(0) scale(.975);box-shadow:0 6px 16px rgba(238,90,69,.32);transition-duration:.09s}
.btn-ghost:active,.btn-white:active{transform:scale(.975);transition-duration:.09s}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--coral)}
.btn-primary:focus-visible{box-shadow:0 12px 30px -12px rgba(238,90,69,.6),0 0 0 3px var(--bg),0 0 0 5px var(--coral)}
.cta-inner .btn-white:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.3),0 0 0 5px #fff}

/* nav (desktop) : underline qui s'ouvre du centre (scaleX, plus fluide) + focus clavier.
   N'affecte PAS le mobile : à <=920px .nav-links est en display:none (burger actif). */
.nav-links a::after{transform-origin:50% 50%;transition:transform .34s var(--ease),opacity .34s var(--ease);opacity:0}
.nav-links a:hover::after,.nav-links a:focus-visible::after,.nav-links a.active::after{transform:scaleX(1);opacity:1}
.nav-links a{transition:color .25s var(--ease),transform .25s var(--ease)}
.nav-links a:focus-visible{color:var(--coral);transform:translateY(-1px)}
/* liens du footer : underline dégradé discret (classe réelle .foot-col) */
.foot-col a{position:relative}
.foot-col a::after{content:"";position:absolute;left:0;bottom:1px;width:100%;height:1.5px;background:var(--grad);
  border-radius:2px;transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
.foot-col a:hover::after,.foot-col a:focus-visible::after{transform:scaleX(1)}

/* cartes .pcard (index/accompagnement) & .pq : reflet lumineux diagonal au survol.
   .pcard a déjà overflow:hidden (l.126) ; .pq n'a pas de badge débordant -> clip sûr. */
.pcard,.pq{isolation:isolate}
.pcard::after,.pq::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:inherit;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.5) 48%,transparent 64%);
  background-size:240% 100%;background-position:140% 0;opacity:0;
  transition:opacity .5s var(--ease),background-position .9s var(--ease)}
.pcard>*,.pq>*{position:relative;z-index:1}
.pcard:hover::after,.pq:hover::after{opacity:1;background-position:-40% 0}

/* FAQ : la cible est un <button>.faq-q (PAS un <summary>). L'état .open est géré par JS. */
.faq-q{transition:color .25s var(--ease)}
.faq-q:hover{color:var(--coral)}
.faq-item:hover{border-color:var(--orange)}
.faq-q:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--coral)}

/* étapes .step .n (numéro dégradé clippé sur fond navy) : léger relief au survol de la carte */
.step .n{transition:transform .4s var(--ease),filter .4s var(--ease)}
.step:hover .n{transform:scale(1.06);filter:drop-shadow(0 6px 14px rgba(238,90,69,.4))}

/* ------------------------------------------------------------------
   5) FINITION premium discrète
   ------------------------------------------------------------------ */
/* eyebrow : barre dégradée arrondie + pastille corail/orange (cohérent .eyebrow et .eyebrow.center) */
.eyebrow{gap:10px}
.eyebrow::before{width:30px;height:3px;border-radius:999px}
.eyebrow::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--orange);flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(244,149,75,.16)}

/* reveal .rv : défloutage léger à l'apparition (état réel : .rv.in). N'altère pas les delays data-d. */
.rv{filter:blur(5px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
.rv.in{filter:blur(0)}

/* ombres de repos douces et homogènes (sans toucher aux ombres de survol existantes) */
.pcard,.pq,.price,.step,.kpi,.quote{box-shadow:0 1px 2px rgba(42,42,82,.04),0 10px 22px -16px rgba(42,42,82,.18)}

/* voile de lumière haute très léger (profondeur, ne change pas la couleur) */
body::before{content:"";position:fixed;left:0;right:0;top:0;height:40vh;pointer-events:none;z-index:-2;
  background:radial-gradient(120% 80% at 50% -20%,rgba(255,255,255,.5),transparent 60%)}
/* halo intérieur discret dans le ruban CTA (::before est pris l.183 -> on utilise ::after) */
.cta-inner::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(80% 120% at 50% 0%,rgba(255,255,255,.1),transparent 55%)}

/* anti-débordement texte (emails/tel/longs mots) sur les classes réelles */
.iitem b,.iitem span,.iitem a,.foot-col a,.price li,.pq p,.faq-a p,.content li,.content a{overflow-wrap:anywhere;word-break:break-word}
.iitem{min-width:0}

/* ------------------------------------------------------------------
   6) PETITS ÉCRANS — respiration (additif, n'écrase pas l'existant 520)
   ------------------------------------------------------------------ */
@media(max-width:520px){
  .price .amount{font-size:1.95rem}
}

/* ------------------------------------------------------------------
   7) ACCESSIBILITÉ — garde-fous pour ce que la règle globale
   (l.294 : *{animation/transition:none!important}) ne couvre pas :
   transforms posées via variables CSS (mesh) et états de filtre.
   ------------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  .hero .mesh{transform:none !important}
  .price.feat,.price.feat:hover{transform:none !important}
  .rv{filter:none !important}
}

/* === photo-cards v12 (services accueil) === */
.pcard.photo{padding:0;overflow:hidden;display:flex;flex-direction:column}
.pcard.photo .pcard-img{position:relative;aspect-ratio:16/10;overflow:hidden}
.pcard.photo .pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pcard.photo:hover .pcard-img img{transform:scale(1.06)}
.pcard.photo .pcard-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(42,42,82,.42))}
.pcard.photo .pcard-ic{position:absolute;left:14px;bottom:12px;z-index:1;width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.92);display:grid;place-items:center;font-size:1.4rem;box-shadow:0 8px 20px -8px rgba(42,42,82,.5)}
.pcard.photo .pcard-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.pcard.photo .pcard-body .more{margin-top:auto}

/* === photoband v12 (bande immersive) === */
.photoband{position:relative;min-height:420px;display:grid;place-items:center;text-align:center;padding:90px 6vw;overflow:hidden;background-image:linear-gradient(115deg,rgba(42,42,82,.62),rgba(238,90,69,.42)),var(--bg-img);background-size:cover;background-position:center;background-attachment:fixed}
.photoband-inner{position:relative;z-index:1;max-width:760px;color:#fff}
.eyebrow.light{color:#fff;opacity:.92}
.eyebrow.light::before{background:#fff}
.band-quote{font-family:var(--disp);font-weight:600;font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.25;margin:14px 0 28px;text-shadow:0 2px 20px rgba(0,0,0,.25)}
.band-quote strong{color:#fff;background:linear-gradient(transparent 62%,rgba(244,149,75,.55) 62%)}
@media(max-width:760px){.photoband{background-attachment:scroll;min-height:340px;padding:64px 6vw}}

/* ============================================================
   === v13 — MOTEUR ANIMATIONS MODERNES + MEDIA SECTIONS ===
   ============================================================ */

/* Barre de progression de scroll (haut de page) */
.scrollbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;background:var(--grad);box-shadow:0 0 12px rgba(238,90,69,.6);transition:width .1s linear}

/* Halo qui suit le curseur (desktop fin uniquement) */
.cursorglow{position:fixed;top:0;left:0;width:380px;height:380px;border-radius:50%;pointer-events:none;z-index:60;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(244,149,75,.16),transparent 62%);opacity:0;transition:opacity .4s;mix-blend-mode:multiply}
body.has-glow .cursorglow{opacity:1}

/* Reveals directionnels (complètent .rv existant) */
.rl,.rr,.ru,.rz{opacity:0;transition:opacity .8s var(--ease),transform .8s var(--ease);will-change:transform,opacity}
.rl{transform:translateX(-46px)}
.rr{transform:translateX(46px)}
.ru{transform:translateY(44px)}
.rz{transform:scale(.92)}
.rl.in,.rr.in,.ru.in,.rz.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}

/* Image-reveal : volet qui se lève sur la photo */
.imgrev{position:relative;overflow:hidden;border-radius:var(--radius)}
.imgrev img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.2s var(--ease)}
.imgrev::after{content:"";position:absolute;inset:0;background:var(--grad);transform-origin:right;transition:transform 1s var(--ease);z-index:1}
.imgrev.in img{transform:scale(1)}
.imgrev.in::after{transform:scaleX(0)}

/* Parallaxe (JS pose --py) */
[data-parallax]{will-change:transform}
[data-parallax] .pimg{transform:translateY(var(--py,0))}

/* Section media : texte + image alternés (réutilisable, moderne) */
.media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,68px);align-items:center}
.media.rev{direction:rtl}.media.rev>*{direction:ltr}
.media-txt h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:14px}
.media-txt .eyebrow{margin-bottom:14px}
.media-txt p{color:var(--ink-soft);margin-bottom:14px}
.media-fig{position:relative;aspect-ratio:5/4;border-radius:28px 28px 28px 80px;overflow:hidden;border:6px solid #fff;box-shadow:0 50px 90px -50px rgba(42,42,82,.55)}
.media-fig img{width:100%;height:100%;object-fit:cover}
.media-fig.alt{border-radius:28px 28px 80px 28px}
.media .float-tag{position:absolute;background:#fff;border:1px solid var(--line);border-radius:16px;padding:11px 15px;display:flex;align-items:center;gap:10px;box-shadow:0 22px 44px -22px rgba(42,42,82,.5);font-size:.84rem;font-weight:600}
.media .float-tag .ic{width:34px;height:34px;border-radius:9px;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:.9rem;flex:none}
.media .float-tag.tl{top:-16px;left:-16px}
.media .float-tag.br{bottom:-16px;right:-16px}
@media(max-width:860px){.media,.media.rev{grid-template-columns:1fr;direction:ltr}.media-fig{aspect-ratio:16/11}}

/* Hero illustré pages intérieures (phero-photo) */
.phero.photo{position:relative;overflow:hidden}
.phero.photo .phero-bgimg{position:absolute;inset:0;z-index:0}
.phero.photo .phero-bgimg img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.phero.photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(110deg,var(--bg) 30%,rgba(252,247,241,.78) 50%,rgba(252,247,241,.35))}
.phero.photo .wrap{position:relative;z-index:2}

/* Bande stats moderne */
.statband{background:var(--navy-grad);color:#fff;border-radius:30px;padding:clamp(34px,5vw,56px);display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;position:relative;overflow:hidden}
.statband::before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(244,149,75,.25),transparent 65%);top:-160px;right:-80px}
.statband .s-num{font-family:var(--disp);font-weight:700;font-size:clamp(2rem,4vw,3rem);background:linear-gradient(120deg,#fff,#F6C46B);-webkit-background-clip:text;background-clip:text;color:transparent}
.statband .s-lbl{color:#cfd0e8;font-size:.9rem;margin-top:4px}
@media(max-width:760px){.statband{grid-template-columns:1fr 1fr;gap:28px 18px}}

/* marquee discret (bandeau défilant de mots-clés) */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--surface-2);padding:14px 0}
.marquee-track{display:flex;gap:48px;width:max-content;animation:marq 28s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:var(--disp);font-weight:600;font-size:1.05rem;color:var(--ink-soft);display:inline-flex;align-items:center;gap:48px;white-space:nowrap}
.marquee span::after{content:"✦";color:var(--orange)}
@keyframes marq{to{transform:translateX(-50%)}}

@media(prefers-reduced-motion:reduce){
  .rl,.rr,.ru,.rz{opacity:1!important;transform:none!important}
  .imgrev::after{display:none}.imgrev img{transform:none!important}
  [data-parallax] .pimg{transform:none!important}
  .marquee-track{animation:none}
  .cursorglow{display:none}
  .phero.photo .phero-bgimg img{transform:none}
}

/* === v16 — photo dans le hero accueil + STOP mouvement boutons === */
/* Photo humaine intégrée à la carte hero (sous le tracé) */
.hero-graphic{padding-bottom:0}
.hero-face{position:relative;margin:18px auto -26px;width:min(82%,360px);aspect-ratio:16/11;border-radius:20px 20px 20px 64px;overflow:hidden;border:5px solid #fff;box-shadow:0 30px 60px -34px rgba(42,42,82,.55)}
.hero-face img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.2s var(--ease)}
.hero-graphic:hover .hero-face img{transform:scale(1.12)}
.hero-graphic .fc.q{top:18px}
.hero-graphic .fc.s{bottom:14px;left:14px}
@media(max-width:620px){.hero-face{width:min(86%,300px);margin-bottom:-18px}}

/* === STOP : les boutons .magnetic ne bougent plus (seul le style change) === */
/* on neutralise tout transform injecté en inline par le JS, sur tous les boutons */
.btn.magnetic{transform:none!important}

/* === v16 — page TARIFS premium === */
/* pills dans le hero */
.hero-pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-pills .pill{background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:100px;padding:9px 16px;font-size:.86rem;font-weight:600;backdrop-filter:blur(6px)}
.hero-pills .pill b{color:var(--coral);margin-right:4px}

/* barre de sélection ancrée */
.tabsel-wrap{position:sticky;top:64px;z-index:40;background:rgba(252,247,241,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:12px 0}
.tabsel{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.tabsel-btn{display:inline-flex;align-items:center;gap:8px;padding:.6em 1.2em;border-radius:100px;border:1.5px solid var(--line);background:#fff;font-weight:600;font-size:.9rem;transition:border-color .25s,color .25s,background .25s,box-shadow .25s}
.tabsel-btn .em{font-size:1rem}
.tabsel-btn:hover{border-color:var(--orange);color:var(--coral);box-shadow:0 10px 24px -16px rgba(238,90,69,.5)}
@media(max-width:560px){.tabsel-btn{font-size:.82rem;padding:.55em 1em}.tabsel-btn .em{display:none}}

/* grilles 2 colonnes centrées */
.price-grid-2{grid-template-columns:repeat(2,1fr);max-width:760px;margin-inline:auto}
@media(max-width:760px){.price-grid-2{grid-template-columns:1fr}}

/* bloc reste à charge (navy) */
.restecharge{margin-top:30px;background:var(--navy-grad);color:#fff;border-radius:30px;padding:clamp(28px,4vw,46px);display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center;position:relative;overflow:hidden}
.restecharge::before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(244,149,75,.28),transparent 65%);top:-160px;right:-90px;pointer-events:none}
.rc-left{position:relative;z-index:1}
.rc-left h3{color:#fff;font-size:clamp(1.4rem,2.6vw,2rem);margin:10px 0 12px}
.rc-left p{color:#cfd0e8;margin-bottom:22px}
.eyebrow.light{color:#F6C46B}.eyebrow.light::before{background:#F6C46B}
.rc-right{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fin-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:14px;display:flex;align-items:center;gap:11px;transition:transform .3s var(--ease),background .3s}
.fin-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.14)}
.fin-card .fc-ic{font-size:1.4rem;flex:none}
.fin-card b{display:block;font-size:.92rem}
.fin-card small{color:#b9bae0;font-size:.74rem}
@media(max-width:760px){.restecharge{grid-template-columns:1fr;gap:24px}.rc-right{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.rc-right{grid-template-columns:1fr}}

/* ===================== v17 — hero PHOTO immersif + fluidité ===================== */
/* Nouveau visuel hero : grande photo encadrée, badges flottants (remplace le SVG abstrait) */
.hero-shot{position:relative;margin:0 auto;max-width:520px;width:100%}
.hs-frame{position:relative;aspect-ratio:5/6;border-radius:30px 30px 30px 92px;overflow:hidden;border:7px solid #fff;box-shadow:0 50px 100px -46px rgba(42,42,82,.62),0 12px 30px -18px rgba(238,90,69,.35)}
.hs-frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:hsKen 18s ease-in-out infinite alternate}
@keyframes hsKen{from{transform:scale(1.06) translateY(0)}to{transform:scale(1.16) translateY(-2%)}}
.hs-grain{position:absolute;inset:0;background:linear-gradient(160deg,rgba(238,90,69,.12),transparent 40%,rgba(42,42,82,.22));pointer-events:none}
.hs-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 60px rgba(0,0,0,.18);pointer-events:none}
.hero-shot::before{content:"";position:absolute;z-index:-1;width:78%;height:78%;right:-7%;top:-7%;border-radius:50%;background:var(--grad);filter:blur(60px);opacity:.32;animation:floatGlow 9s ease-in-out infinite}
@keyframes floatGlow{50%{transform:translate(-14px,18px) scale(1.07)}}
.hs-badge{position:absolute;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.7);border-radius:16px;padding:11px 15px;display:flex;align-items:center;gap:11px;box-shadow:0 22px 46px -24px rgba(42,42,82,.6);animation:floaty 5s ease-in-out infinite}
.hs-badge .ic{width:38px;height:38px;border-radius:11px;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700;font-family:var(--disp);flex:none}
.hs-badge b{display:block;font-size:.86rem;line-height:1.2}.hs-badge small{color:var(--muted);font-size:.72rem}
.hs-q{top:24px;left:-26px}
.hs-rating{bottom:64px;right:-24px;animation-delay:1.4s}
.hs-rating .stars{color:#F4954B;font-size:.95rem;letter-spacing:1px}
@keyframes floaty{50%{transform:translateY(-12px)}}
.hs-chip{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:#fff;font-size:.8rem;font-weight:600;padding:9px 18px;border-radius:100px;box-shadow:0 18px 36px -18px rgba(42,42,82,.7);display:flex;align-items:center;gap:9px}
.hs-chip .dot{width:9px;height:9px;border-radius:50%;background:#46d39a;box-shadow:0 0 0 0 rgba(70,211,154,.6);animation:livedot 2s infinite}
@keyframes livedot{0%{box-shadow:0 0 0 0 rgba(70,211,154,.55)}70%{box-shadow:0 0 0 9px rgba(70,211,154,0)}100%{box-shadow:0 0 0 0 rgba(70,211,154,0)}}
@media(max-width:992px){.hero-shot{max-width:440px;margin-top:10px}}
@media(max-width:620px){.hs-q{left:-10px}.hs-rating{right:-8px}.hs-badge{padding:9px 12px}.hs-badge small{display:none}}
@media(prefers-reduced-motion:reduce){.hs-frame img,.hero-shot::before,.hs-badge,.hs-chip .dot{animation:none!important}}

/* ---- Fluidité globale : scroll plus doux, transitions homogènes, images qui s'éveillent ---- */
html{scroll-behavior:smooth}
.sec{transition:background .6s var(--ease)}
.pcard,.pq,.price,.kpi,.step,.feature,.fin-card,.tabsel-btn,.hs-badge{will-change:transform}
/* reveal images : zoom-in doux quand elles entrent */
.imgrev{overflow:hidden}
.imgrev img{transform:scale(1.08);transition:transform 1.1s var(--ease),filter 1.1s var(--ease);filter:saturate(.85)}
.imgrev.in img{transform:scale(1);filter:saturate(1)}
/* survol cartes photo : léger lift + image qui respire (déjà .pcard.photo) */
.pcard.photo .pcard-img img{transition:transform 1s var(--ease)}
.pcard.photo:hover .pcard-img img{transform:scale(1.07)}
/* liens & boutons : easing homogène */
a,.btn,.chip,.pill{transition-timing-function:var(--ease)}

/* ===================== v18 — RGPD / consentement cookies (CNIL) ===================== */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:11000;max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 70px -30px rgba(42,42,82,.6);padding:22px 24px;transform:translateY(140%);transition:transform .6s var(--ease)}
.cookie-banner.show{transform:none}
.cookie-banner h3{font-size:1.05rem;margin-bottom:6px}
.cookie-banner p{font-size:.86rem;color:var(--ink-soft);margin-bottom:14px}
.cookie-banner p a{color:var(--coral);text-decoration:underline}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-actions .btn{padding:.7em 1.2em;font-size:.86rem}
.btn-mini{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.btn-mini:hover{border-color:var(--orange);color:var(--coral)}
@media(max-width:520px){.cookie-actions .btn{flex:1 1 100%;justify-content:center}}

/* modale préférences */
.cookie-modal{position:fixed;inset:0;z-index:11050;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(20,20,42,.55);backdrop-filter:blur(4px)}
.cookie-modal.show{display:flex}
.cookie-card{background:#fff;border-radius:22px;max-width:560px;width:100%;max-height:88vh;overflow:auto;padding:28px;box-shadow:0 40px 90px -30px rgba(42,42,82,.7)}
.cookie-card h3{font-size:1.3rem;margin-bottom:8px}
.cookie-card>p{font-size:.88rem;color:var(--ink-soft);margin-bottom:18px}
.ck-row{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;padding:16px 0;border-top:1px solid var(--line)}
.ck-row .ck-txt b{display:block;font-size:.95rem}
.ck-row .ck-txt small{color:var(--muted);font-size:.8rem}
.switch{position:relative;width:46px;height:26px;flex:none;margin-top:2px}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch .track{position:absolute;inset:0;background:#d9d2c8;border-radius:100px;transition:background .25s}
.switch .track::before{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25);transition:transform .25s}
.switch input:checked+.track{background:var(--grad)}
.switch input:checked+.track::before{transform:translateX(20px)}
.switch input:disabled+.track{opacity:.55;cursor:not-allowed}
.cookie-card .ck-foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.cookie-card .ck-foot .btn{flex:1;justify-content:center;padding:.75em 1em;font-size:.88rem}
.cookie-link{background:none;border:0;color:inherit;font:inherit;cursor:pointer;text-decoration:none;padding:0;display:block;margin-bottom:11px;transition:color .2s}
.cookie-link:hover{color:var(--coral)}

/* ===================== v19 — réorg (évolution + infos) ===================== */
/* duo grandes cartes */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.duo-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 2px rgba(42,42,82,.04),0 18px 40px -28px rgba(42,42,82,.3);transition:transform .4s var(--ease),box-shadow .4s}
.duo-card:hover{transform:translateY(-6px);box-shadow:0 36px 70px -34px rgba(42,42,82,.4)}
.duo-img{aspect-ratio:16/8;overflow:hidden}
.duo-img img{width:100%;height:100%;object-fit:cover}
.duo-body{padding:24px 26px 26px}
.duo-body h2{font-size:1.5rem;margin-bottom:8px}
.duo-body p{color:var(--ink-soft);font-size:.95rem;margin-bottom:14px}
@media(max-width:760px){.duo{grid-template-columns:1fr}}

/* blocs info 2 colonnes */
.info2{display:grid;grid-template-columns:1fr 1fr;gap:18px 30px;margin-top:8px}
.info-block{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.info-block h3{font-size:1.05rem;margin-bottom:6px;color:var(--coral)}
.info-block p{font-size:.9rem;color:var(--ink-soft)}
@media(max-width:760px){.info2{grid-template-columns:1fr}}
.mini-head{font-size:1.3rem;margin:34px 0 8px;font-family:var(--disp)}

/* CTA en ligne */
.inline-cta{margin-top:30px;background:var(--grad-soft);border:1px solid var(--line);border-radius:20px;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.inline-cta b{display:block;font-family:var(--disp);font-size:1.15rem}
.inline-cta span{display:block;color:var(--ink-soft);font-size:.9rem;max-width:48em;margin-top:4px}

/* PDF cards */
.pdf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pdf-row{margin-top:22px}
.pdf-card{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.pdf-card .pdf-ic{font-size:1.6rem;flex:none}
.pdf-card b{display:block;font-size:.95rem}.pdf-card small{color:var(--muted);font-size:.78rem}
.pdf-card .pdf-soon{margin-left:auto;flex:none;font-size:.72rem;font-weight:700;color:var(--coral);background:var(--grad-soft);border:1px solid var(--line);padding:4px 10px;border-radius:100px}
.pdf-card.disabled{opacity:.72}
.pdf-card:not(.disabled){cursor:pointer}
.pdf-card:not(.disabled):hover{transform:translateY(-4px);border-color:var(--orange);box-shadow:0 18px 38px -22px rgba(238,90,69,.45)}
@media(max-width:620px){.pdf-grid{grid-template-columns:1fr}.inline-cta{flex-direction:column;align-items:flex-start}}

/* cartes-liens (infos légales) */
.linkcard{display:block;text-decoration:none}
.linkcard .more{display:inline-block;margin-top:10px;color:var(--coral);font-weight:600}

/* ===================== v22 — plus d'images + animations ===================== */
/* cartes Public avec photo (.pqphoto) */
.pqphoto{padding:0;overflow:hidden;display:flex;flex-direction:column}
.pq-img{position:relative;aspect-ratio:16/10;overflow:hidden}
.pq-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1s var(--ease)}
.pqphoto:hover .pq-img img{transform:scale(1.12)}
.pq-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(42,42,82,.45));pointer-events:none}
.pq-ic{position:absolute;left:14px;bottom:-20px;width:46px;height:46px;border-radius:13px;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:1.25rem;box-shadow:0 12px 26px -10px rgba(238,90,69,.6);z-index:1}
.pq-body{padding:30px 22px 24px}
.pq-body h3{font-size:1.15rem;margin-bottom:8px}
.pq-body p{font-size:.92rem;color:var(--ink-soft)}

/* ----- ANIMATIONS renforcées ----- */
/* apparition en cascade des cartes d'une même grille */
.grid3 .rv,.duo .rv,.kpi-grid .rv,.testi-grid .rv,.pq-grid .rv,.presta-grid .rv{transition-delay:calc(var(--i,0)*90ms)}
/* léger zoom + montée plus marquée pour les cartes */
.pq,.duo-card,.price,.kpi,.testimonial,.pcard{will-change:transform,opacity}
.pq.rv{transform:translateY(34px) scale(.97)}
.pq.rv.in{transform:none}
/* eyebrow : petit trait qui se dessine */
.sec-head .eyebrow::before{transition:width .6s var(--ease)}
.sec-head .rv.in .eyebrow::before,.sec-head.rv.in .eyebrow::before{width:28px}
/* titres .split : déjà gérés par JS (mots) — on fluidifie */
.split .w{transition:opacity .5s var(--ease),transform .5s var(--ease)}
/* photoband zoom doux en continu */
.photoband{background-attachment:fixed}
/* hover plus vivant sur cartes-liens & duo */
.duo-card:hover .more,.linkcard:hover .more{color:var(--coral)}
.duo-card .more,.linkcard .more{transition:color .25s var(--ease),letter-spacing .25s var(--ease)}
.duo-card:hover .more{letter-spacing:.02em}
/* flottement doux des badges hero */
@media(prefers-reduced-motion:no-preference){
  .hs-badge{animation:floaty 5s ease-in-out infinite}
}

/* ============================================================
   v23 — MOBILE EXPÉRIENCE (≤ 760px) : tout repensé + animé
   ============================================================ */
@media(max-width:760px){
  :root{--radius:18px}
  body{font-size:15.5px}
  .wrap{padding:0 18px}
  .sec{padding:46px 0}

  /* --- NAV mobile : barre compacte + burger animé --- */
  nav{padding:12px 18px}
  nav.scrolled{padding:9px 18px}
  .brand img{height:38px}
  .nav-links{display:none}
  .nav-cta .btn.magnetic{display:none}      /* le CTA passe dans le menu + barre basse */
  .burger{display:flex;position:relative;width:30px;height:24px;justify-content:center;gap:0;z-index:120}
  .burger span{position:absolute;left:3px;width:24px;transition:transform .35s var(--ease),opacity .2s}
  .burger span:nth-child(1){top:4px}
  .burger span:nth-child(2){top:11px}
  .burger span:nth-child(3){top:18px}
  body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.menu-open .burger span:nth-child(2){opacity:0}
  body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* --- MENU plein écran animé (slide + stagger) --- */
  .navm{gap:0;justify-content:flex-start;padding:96px 28px 40px;background:linear-gradient(165deg,#fff,#FBF1E8);
        clip-path:circle(0% at calc(100% - 34px) 34px);transition:clip-path .55s cubic-bezier(.7,0,.2,1);display:flex !important;pointer-events:none;opacity:1}
  .navm.open{clip-path:circle(150% at calc(100% - 34px) 34px);pointer-events:auto}
  .navm a{font-size:1.6rem;width:100%;padding:16px 4px;border-bottom:1px solid var(--line);
          opacity:0;transform:translateX(24px);transition:opacity .4s var(--ease),transform .4s var(--ease),color .2s}
  .navm.open a{opacity:1;transform:none}
  .navm.open a:nth-child(2){transition-delay:.10s}
  .navm.open a:nth-child(3){transition-delay:.16s}
  .navm.open a:nth-child(4){transition-delay:.22s}
  .navm.open a:nth-child(5){transition-delay:.28s}
  .navm.open a:nth-child(6){transition-delay:.34s}
  .navm.open a:nth-child(7){transition-delay:.40s}
  .navm a:active{color:var(--coral)}
  .navm .close{top:26px;right:24px;font-size:2.2rem;width:44px;height:44px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center}
  /* CTA mis en avant dans le menu */
  .navm a:last-child{margin-top:22px;border:0;background:var(--grad);color:#fff;text-align:center;border-radius:100px;padding:16px;font-size:1.15rem;box-shadow:0 14px 30px -12px rgba(238,90,69,.6)}

  /* --- HERO compact & percutant --- */
  .hero{padding:96px 0 36px}
  .hero h1{font-size:clamp(1.85rem,7.6vw,2.4rem);line-height:1.08;overflow-wrap:anywhere}
  .hero .lead{font-size:1.02rem;margin-bottom:22px}
  .hero-centered .wrap{display:flex;flex-direction:column}
  .hero-shot{order:-1;max-width:300px;margin:0 auto 26px}      /* image en 1er, plus petite */
  .hs-frame{border-radius:22px 22px 22px 56px;border-width:5px}
  .actions{flex-direction:column;align-items:stretch;gap:10px}
  .actions .btn{justify-content:center;width:100%;padding:1.05em 1.4em}
  .hero-note{text-align:center;font-size:.8rem}

  /* --- titres de section --- */
  .sec-head{margin-bottom:24px}
  .sec-head h2,.split{font-size:clamp(1.6rem,6.6vw,2.1rem)}
  .sec-head .eyebrow{font-size:.68rem}
  .sec-head p{font-size:.95rem}

  /* --- grilles : tout en 1 colonne, respiration --- */
  .grid3,.duo,.pq-grid,.presta-grid,.price-grid,.price-grid-2,.price-grid-3,.test-grid,.testi-grid,.info2,.kpi-grid,.benefits,.work-grid{grid-template-columns:1fr !important;gap:16px}
  .about{grid-template-columns:1fr;gap:24px}
  .about .portrait{max-width:300px;margin:0 auto}

  /* --- cartes : padding & ombres mobile --- */
  .pq,.price,.feature-card,.testimonial,.info-block,.kpi{padding:22px 20px}
  .duo-body{padding:20px}
  .pqphoto{padding:0}

  /* --- bandes immersives plus courtes --- */
  .photoband{min-height:300px;padding:54px 18px;background-attachment:scroll}
  .band-quote{font-size:clamp(1.3rem,6vw,1.7rem)}

  /* --- KPI plus compacts --- */
  .kpi-grid{max-width:none}
  .kpi-num{font-size:2.6rem}

  /* --- formulaire contact --- */
  .cgrid{grid-template-columns:1fr;gap:20px}
  .row2{grid-template-columns:1fr;gap:0}
  .field input,.field select,.field textarea{font-size:16px}  /* évite le zoom auto iOS */

  /* --- CTA final --- */
  .cta-inner{padding:32px 22px}
  .cta-inner h2{font-size:1.6rem}

  /* --- footer en accordéon visuel --- */
  .foot-grid{grid-template-columns:1fr;gap:26px;text-align:left}
  footer{padding:48px 18px 110px}    /* place pour la barre d'action fixe */
  .foot-bottom{flex-direction:column;gap:8px;text-align:center;font-size:.78rem}

  /* --- cookies : pleine largeur en bas --- */
  .cookie-banner{left:10px;right:10px;bottom:78px;padding:18px}  /* au-dessus de la barre d'action */

  /* --- BARRE D'ACTION FIXE EN BAS (pouce) --- */
  .mobile-bar{display:flex}
}

/* Barre d'action fixe mobile (call + contact) — masquée desktop */
.mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  gap:10px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  box-shadow:0 -8px 24px -16px rgba(42,42,82,.5);transform:translateY(120%);animation:barUp .5s .4s var(--ease) forwards}
@keyframes barUp{to{transform:none}}
.mobile-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:100px;font-weight:700;font-size:.95rem;text-decoration:none}
.mobile-bar .mb-call{background:var(--surface-2);color:var(--ink);border:1.5px solid var(--line)}
.mobile-bar .mb-contact{background:var(--grad);color:#fff;box-shadow:0 10px 24px -10px rgba(238,90,69,.6)}
.mobile-bar a:active{transform:scale(.96)}
.mobile-bar svg{width:18px;height:18px}

/* feedback tactile générique (tous boutons/cartes au touch) */
@media(hover:none){
  .btn:active{transform:scale(.97)}
  .pq:active,.price:active,.duo-card:active,.pcard:active,.kpi:active{transform:scale(.99)}
  .pqphoto:active .pq-img img{transform:scale(1.1)}
}

/* ===================== v25 — TARIFS compacts & côte à côte ===================== */
/* grille plus serrée, cartes plus denses */
.price-tight{gap:16px}
.price.compact{padding:24px 22px 22px}
.price.compact .p-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.price.compact .p-head .pic{width:44px;height:44px;border-radius:12px;margin:0;flex:none;font-size:1.3rem}
.price.compact .p-head h3{font-size:1.18rem;line-height:1.1;margin:0}
.price.compact .p-head .sub{font-size:.8rem;margin:2px 0 0}
.price.compact .amount{font-size:2rem;margin-top:2px}
.price.compact .fin{margin:5px 0 14px}
.price.compact ul{gap:8px;margin-bottom:18px}
.price.compact li{font-size:.88rem;padding-left:1.5em}
/* badge "La plus choisie" : pleinement visible, centré, ne dépasse pas */
.price .tag{left:50%;transform:translateX(-50%);white-space:nowrap;top:-13px;font-size:.74rem;padding:5px 16px}
.price.feat{padding-top:30px}
.price.feat.compact{padding-top:32px}
/* la carte vedette ressort un peu sans casser l'alignement côte à côte */
.price-tight .price.feat{box-shadow:0 30px 60px -30px rgba(238,90,69,.5)}
/* à partir de tablette : 3 cartes bien côte à côte, plus serrées */
@media(min-width:761px){
  .price-tight{grid-template-columns:repeat(3,1fr)}
  .price-tight.price-grid-2{grid-template-columns:repeat(2,1fr);max-width:760px;margin-inline:auto}
}
/* bande photo d'intro de section tarifs */
.tarif-band{height:150px;border-radius:var(--radius);overflow:hidden;margin-bottom:22px;position:relative}
.tarif-band img{width:100%;height:100%;object-fit:cover}
.tarif-band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(42,42,82,.55),rgba(238,90,69,.25) 60%,transparent)}
.tarif-band .tb-label{position:absolute;left:22px;bottom:16px;z-index:1;color:#fff;font-family:var(--disp);font-weight:600;font-size:1.2rem;text-shadow:0 2px 12px rgba(0,0,0,.5)}

/* ===================== v26 — emoji visible sur images + finitions ===================== */
.duo-img{position:relative}
.duo-em{position:absolute;left:16px;bottom:-20px;width:50px;height:50px;border-radius:14px;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:1.4rem;box-shadow:0 14px 30px -10px rgba(238,90,69,.6);z-index:2}
.duo-body{padding-top:30px}
/* s'assurer que les emojis rendent en couleur (pas en glyphe monochrome) */
.pq-ic,.duo-em,.hs-badge .ic,.fc .ic{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}

/* ===================== v28 — finitions a11y / print / perf ===================== */
/* lien d'évitement clavier (accessibilité) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 12px 0;font-weight:600}
.skip-link:focus{left:0}
/* images : éviter le layout shift + rendu net */
img{height:auto}
/* réduire le travail GPU sur les bandes en scroll mobile (déjà scroll) */
/* styles d'impression : site lisible sur papier, on masque le superflu */
@media print{
  nav,.navm,.burger,.totop,.mobile-bar,.cookie-banner,.cookie-modal,.photoband,.hero-bg,.mesh,.cursorglow,.scrollbar{display:none!important}
  body{background:#fff;color:#000}
  .wrap{max-width:100%}
  a{color:#000;text-decoration:underline}
  .btn{border:1px solid #000;color:#000!important;background:#fff!important}
  .sec{padding:14px 0;break-inside:avoid}
  .grid3,.duo,.price-grid{display:block}
  .grid3>*,.duo>*,.price-grid>*{margin-bottom:12px;break-inside:avoid}
  *{box-shadow:none!important;animation:none!important}
}

/* ===================== v29 — cartes cliquables vers contact ===================== */
a.card-link{text-decoration:none;color:inherit;cursor:pointer}
a.card-link .more{display:inline-block;margin-top:12px;color:var(--coral);font-weight:600;transition:letter-spacing .25s var(--ease)}
a.card-link:hover .more{letter-spacing:.02em}
a.card-link:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
/* champ pré-rempli depuis un lien : léger surlignage */
.field .prefilled,select.prefilled{border-color:var(--orange);box-shadow:0 0 0 3px rgba(244,149,75,.18)}

/* ===================== v31 — défilement amélioré ===================== */
/* 1) ancres : décalage sous la nav fixe (le titre ne passe plus dessous) */
:root{--nav-h:74px}
[id]{scroll-margin-top:calc(var(--nav-h) + 14px)}
html{scroll-padding-top:calc(var(--nav-h) + 14px)}

/* 2) nav auto-masquée au scroll vers le bas, réapparaît vers le haut */
nav{will-change:transform}
nav.nav-hidden{transform:translateY(-115%)!important}
nav.nav-pinned{transform:none!important}

/* 3) scroll-spy : onglet du menu correspondant à la section visible */
.nav-links a.current{color:var(--coral)}
.nav-links a.current::after{transform:scaleX(1)}

/* 4) la barre de progression scroll : un poil plus visible + douce */
.scrollbar{transition:width .12s linear}

/* 5) révélations : courbe plus douce + léger flou levé (déjà présent .rv) — on harmonise la durée */
.rv{transition-duration:.7s}

/* 6) ancrage fluide même si reduce-motion off : déjà scroll-behavior smooth */
@media(prefers-reduced-motion:reduce){
  nav.nav-hidden{transform:none!important}
  html{scroll-behavior:auto}
}

/* ====================================================================
   INDICATEURS — bloc chiffres "preuve sociale" spectaculaire
   Override non destructif. Réutilise --grad / --coral / --orange /
   --ink / --surface / --line / --radius. Transform+opacity only.
   La grille reste 2/3 col -> 1 col (<=760) comme l'existant.
   ==================================================================== */

/* Fond de section subtil : crème -> beige avec deux halos chauds très
   diffus, sans contraste agressif. Le grain global (body::after) passe
   par-dessus puisque la section reste sous-jacente. */
#indicateurs{position:relative;isolation:isolate;
  background:
    radial-gradient(120% 90% at 12% -10%,rgba(238,90,69,.07),transparent 60%),
    radial-gradient(120% 90% at 100% 120%,rgba(244,149,75,.09),transparent 58%),
    linear-gradient(180deg,var(--bg),var(--surface-2))}
/* filets décoratifs haut/bas pour cadrer la bande comme un encart */
#indicateurs::before,#indicateurs::after{content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);z-index:0}
#indicateurs::before{top:0}
#indicateurs::after{bottom:0}
#indicateurs .wrap{position:relative;z-index:1}

/* Grille : on garde le comportement existant, on aère un peu et on
   pose un séparateur central sur les écrans larges (2 cartes). */
#indicateurs .kpi-grid{gap:26px;max-width:900px}

/* La carte : plus de profondeur, dégradé interne discret, halo au repos
   léger qui s'intensifie au survol. On n'écrase pas le hover existant
   (translateY -6px + ombre corail) : on enrichit l'état de repos. */
#indicateurs .kpi{
  padding:44px 30px 38px;
  background:
    radial-gradient(140% 120% at 50% -20%,rgba(255,255,255,.9),rgba(255,255,255,0) 60%),
    var(--surface);
  border-color:#F0DEC9;
  box-shadow:
    0 1px 2px rgba(42,42,82,.05),
    0 22px 44px -30px rgba(42,42,82,.28),
    0 8px 20px -18px rgba(238,90,69,.25);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
#indicateurs .kpi:hover{
  box-shadow:
    0 1px 2px rgba(42,42,82,.06),
    0 40px 70px -34px rgba(238,90,69,.5),
    0 14px 30px -20px rgba(244,149,75,.4)}

/* Le liseré supérieur (::before existant) : on l'épaissit légèrement et
   on le centre depuis le milieu pour un effet plus premium. */
#indicateurs .kpi::before{height:5px;transform-origin:center;transform:scaleX(0);
  border-radius:0 0 4px 4px}
#indicateurs .kpi.in::before{transform:scaleX(1)}

/* Halo d'angle (::after existant) : on le rend plus large et toujours
   très légèrement présent au repos -> "vivant" sans clignoter. */
#indicateurs .kpi::after{width:200px;height:200px;right:-60px;bottom:-60px;opacity:.45;
  background:radial-gradient(closest-side,rgba(244,149,75,.22),transparent 70%)}
#indicateurs .kpi:hover::after{opacity:1}

/* LE CHIFFRE : énorme, dégradé corail->orange avec un léger reflet
   animé (sheen lent). clamp pour rester responsive sans déborder. */
#indicateurs .kpi-num{
  font-size:clamp(3.6rem,8vw,5.4rem);
  font-weight:700;
  letter-spacing:-.04em;
  line-height:.95;
  background:var(--grad);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 12px 22px rgba(238,90,69,.18));
  animation:kpiSheen 8s linear infinite}
@keyframes kpiSheen{to{background-position:200% center}}

/* Petit accent étoile sous le chiffre : rappelle les 5 étoiles des avis,
   ancre la notion de note/satisfaction. Décoratif (généré en CSS). */
#indicateurs .kpi-lbl{font-size:1rem;color:var(--ink-soft);margin-top:14px;
  max-width:30ch;margin-left:auto;margin-right:auto}
#indicateurs .kpi-lbl::before{content:"★★★★★";display:block;
  font-size:.78rem;letter-spacing:.32em;line-height:1;margin:0 0 12px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:.9}

/* Séparateur central façon "trait de boussole" entre les 2 cartes,
   uniquement quand elles sont côte à côte (>760px). On le porte par la
   grille en pseudo-élément pour éviter toute modif HTML. */
@media(min-width:761px){
  #indicateurs .kpi-grid{position:relative}
  #indicateurs .kpi-grid::after{content:"";position:absolute;top:18%;bottom:18%;left:50%;
    width:1px;transform:translateX(-50%);
    background:linear-gradient(180deg,transparent,var(--line) 18%,var(--line) 82%,transparent);
    z-index:0;pointer-events:none}
  #indicateurs .kpi{z-index:1}
}

/* Apparition : léger zoom-in du chiffre quand la carte entre dans le
   viewport (la classe .in est déjà posée par le script de reveal). */
#indicateurs .kpi .kpi-num{transform-origin:center bottom}
#indicateurs .kpi:not(.in) .kpi-num{opacity:0;transform:translateY(10px) scale(.94)}
#indicateurs .kpi.in .kpi-num{opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* Responsive : sur 1 colonne (mobile) on laisse respirer et on coupe le
   séparateur (géré par le min-width au-dessus). max-width remis à plat
   pour suivre le bloc .sec sur très petits écrans déjà géré ailleurs. */
@media(max-width:760px){
  #indicateurs .kpi{padding:34px 24px 30px}
  #indicateurs .kpi-num{font-size:clamp(3.2rem,15vw,4.2rem)}
}

/* Respect strict de prefers-reduced-motion : on fige le reflet et
   l'apparition, le chiffre reste pleinement visible. */
@media(prefers-reduced-motion:reduce){
  #indicateurs .kpi-num{animation:none;background-position:0 center}
  #indicateurs .kpi:not(.in) .kpi-num{opacity:1;transform:none}
}

/* === design upgrade v33 === */
/* ============================================================
   Consolidation des 4 lots (avis-navy / chiffres / apropos / polish)
   en UN bloc final, additif et non destructif. À append en fin de
   style.css. Variables d'origine UNIQUEMENT. transform/opacity (+
   box-shadow/filter pour la profondeur). prefers-reduced-motion couvert.

   ANTI-DOUBLONS / ANTI-CONFLITS (vérifié sur index.html + style.css 1->1218) :
   - @keyframes kpiSheen existe déjà (l.1174) -> NON redéclaré (on réutilise).
     -> on N'AJOUTE PAS un 2e moteur "chiffres" : le bloc #indicateurs
        (l.1104-1217) fait déjà sheen + étoiles ::before + séparateur boussole
        (.kpi-grid::after l.1190) + reveal zoom. On se limite aux upgrades
        réellement nouveaux (aura derrière le chiffre, trait sous le label) +
        une CORRECTION : grille 2 colonnes réelles pour que le séparateur 50%
        existant tombe pile entre les 2 cartes (DOM = 2 .kpi, défaut 3 col).
   - #avis devient navy : #avis::before est OWNED par la lentille navy
     (halos corail/orange). Donc le voile crème "polish" et le filet
     inter-sections N'Y TOUCHENT PAS, et la lentille navy garde son ::before.
   - #avis .quote a .tilt (transform piloté en inline par le JS) -> on ne
     pose AUCUN transform au repos sur .quote (on n'agit que box-shadow/bord).
   - #indicateurs a son propre ::before (hairline l.1122) -> exclu du filet.
   - .btn-primary.magnetic neutralise transform (l.714) -> relief via
     box-shadow + ::before glow (::after = shine sweep déjà pris l.28).
   - .about .pbadge : traité une seule fois (verre + float, lot apropos) ;
     pas de double box-shadow concurrent.
   ============================================================ */

/* ============================================================
   1) #avis — TÉMOIGNAGES PREMIUM SUR FOND NAVY (scopé #avis)
   ============================================================ */
#avis{
  background:var(--navy-grad) !important;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
#avis::before{ /* aura corail/orange très douce, derrière les cartes */
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(60% 80% at 12% -10%, rgba(238,90,69,.22), transparent 60%),
    radial-gradient(55% 75% at 92% 110%, rgba(244,149,75,.18), transparent 62%);
}
/* en-tête lisible sur navy (h2.split = ★★★★★, sous-texte, eyebrow ambre) */
#avis .sec-head h2,
#avis .sec-head .split{ color:#fff; }
#avis .sec-head p{ color:rgba(255,255,255,.74); }
#avis .eyebrow{ color:#F6C46B; }
#avis .eyebrow::before{ background:var(--grad); }
#avis .eyebrow::after{ background:var(--orange); }

/* cartes .quote en verre sombre (translucide, bord clair, ombre profonde) */
#avis .quote{
  background:linear-gradient(160deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 28px 60px -34px rgba(0,0,0,.65) !important;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
#avis .quote:hover{
  border-color:rgba(244,149,75,.45);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 40px 72px -32px rgba(0,0,0,.7) !important;
}
#avis .quote blockquote{ color:rgba(255,255,255,.95); }

/* grande guillemet en dégradé corail->orange clippé */
#avis .quote::before{
  font-size:6.4rem;
  top:-6px;
  right:16px;
  opacity:1;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:drop-shadow(0 6px 16px rgba(238,90,69,.28));
}

/* étoiles glow, avatar dégradé + halo, méta claire, séparateur auteur */
#avis .quote .stars{
  color:var(--orange);
  letter-spacing:3px;
  text-shadow:0 2px 10px rgba(244,149,75,.35);
}
#avis .quote .who{
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:14px;
}
#avis .quote .av{
  background:var(--grad);
  box-shadow:0 8px 20px -8px rgba(238,90,69,.6);
}
#avis .quote .who b{ color:#fff; }
#avis .quote .who small{ color:rgba(255,255,255,.6); }

/* ============================================================
   2) #indicateurs — UPGRADES ADDITIFS (le bloc l.1104-1217 reste la base)
      a) correction grille : 2 colonnes réelles -> le séparateur boussole
         existant (.kpi-grid::after l.1190 à left:50%) tombe pile au centre.
      b) aura lumineuse derrière le chiffre (nouveau).
      c) fin trait dégradé sous le label, qui s'étire au reveal (nouveau).
   ============================================================ */
/* a) 2 colonnes centrées dès qu'on est côte à côte (DOM = exactement 2 .kpi) */
@media(min-width:761px){
  #indicateurs .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* b) aura derrière le nombre (le .kpi-num garde son z-index:1 via l.515) */
#indicateurs .kpi .kpi-num{position:relative;display:inline-block}
#indicateurs .kpi-num::after{
  content:"";position:absolute;z-index:-1;left:50%;top:46%;
  width:130%;height:150%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(244,149,75,.30),rgba(238,90,69,.12) 45%,transparent 72%);
  opacity:0;transition:opacity .6s var(--ease);pointer-events:none;filter:blur(2px)}
#indicateurs .kpi.in .kpi-num::after{opacity:.85}
#indicateurs .kpi:hover .kpi-num::after{opacity:1}
/* c) trait dégradé sous le label (le ::before étoiles existe déjà l.1180) */
#indicateurs .kpi-lbl::after{
  content:"";display:block;width:54px;height:3px;border-radius:3px;
  margin:14px auto 0;background:var(--grad);
  transform:scaleX(0);transform-origin:center;
  transition:transform .7s var(--ease) .15s}
#indicateurs .kpi.in .kpi-lbl::after{transform:scaleX(1)}
/* le liseré supérieur s'élargit légèrement au survol (::before déjà animé l.1152) */
#indicateurs .kpi:hover::before{left:8%;right:8%}

/* ============================================================
   3) #apropos — PORTRAIT SUBLIMÉ + RYTHME TEXTE
   DOM : section#apropos > .wrap > .about > .portrait.rv(img + .pbadge>.ic+div)
         + .rv[data-d="1"](.eyebrow + h2.split + p... ; dernier p a <strong>)
   .portrait a overflow:hidden -> le HALO passe par .about::before (non clippé).
   ============================================================ */
#apropos .about{position:relative;isolation:isolate}
#apropos .about>*{position:relative;z-index:1}

/* HALO dégradé doux DERRIÈRE le portrait (porté par .about, jamais clippé) */
#apropos .about::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(78%,420px);aspect-ratio:1;left:-6%;top:50%;
  transform:translateY(-50%);
  background:
    radial-gradient(closest-side,rgba(238,90,69,.22),transparent 70%),
    radial-gradient(closest-side,rgba(244,149,75,.20),transparent 72%);
  background-position:30% 30%,72% 74%;
  background-size:78% 78%,72% 72%;
  background-repeat:no-repeat;
  filter:blur(34px);
  animation:v33-halo 12s var(--ease) infinite;
}
@keyframes v33-halo{
  0%,100%{transform:translateY(-50%) scale(1)}
  50%    {transform:translateY(-52%) scale(1.06)}
}

/* PORTRAIT : passe-partout lumineux (liserés portés hors clip) + ombre profonde + lift */
#apropos .about .portrait{
  box-shadow:
    0 44px 84px -44px rgba(42,42,82,.5),
    0 18px 40px -28px rgba(238,90,69,.35),
    inset 0 0 0 1px rgba(255,255,255,.6);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
#apropos .about .portrait:hover{
  transform:translateY(-4px);
  box-shadow:
    0 56px 100px -46px rgba(42,42,82,.55),
    0 26px 54px -28px rgba(238,90,69,.45),
    inset 0 0 0 1px rgba(255,255,255,.7);
}
/* highlight vitré interne (clippé volontairement) + assise sombre en bas */
#apropos .about .portrait::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),transparent 26%),
    linear-gradient(0deg,rgba(42,42,82,.20),transparent 34%);
}

/* PBADGE : verre dépoli, hairline dégradé corail/orange, flottement doux */
#apropos .about .pbadge{
  z-index:3;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-color:rgba(255,255,255,.7);
  border-radius:18px;padding:12px 16px;
  box-shadow:0 22px 46px -22px rgba(42,42,82,.55),0 4px 12px -6px rgba(238,90,69,.28);
  animation:v33-badgeFloat 6s var(--ease) infinite;
}
#apropos .about .pbadge::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none;
  background:var(--grad);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.85;
}
#apropos .about .pbadge .ic{
  border-radius:11px;
  box-shadow:0 8px 18px -8px rgba(238,90,69,.6),inset 0 1px 0 rgba(255,255,255,.45);
}
@keyframes v33-badgeFloat{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-6px)}
}

/* TEXTE : lettrine dégradée + rythme + phrase-clé surlignée (cf .band-quote strong) */
#apropos .about .rv[data-d="1"] p:first-of-type::first-letter{
  float:left;
  font-family:var(--disp);font-weight:600;
  font-size:3.1em;line-height:.74;
  margin:.06em .14em 0 0;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
#apropos .about .rv[data-d="1"] p{margin-bottom:14px}
#apropos .about .rv[data-d="1"] p:last-child{margin-bottom:0}
#apropos .about .rv[data-d="1"] p strong{
  color:var(--ink);
  background:linear-gradient(transparent 60%,rgba(244,149,75,.34) 60%);
  padding:0 .04em;
}

/* ============================================================
   4) POLISH GLOBAL — profondeur, cohérence, désirabilité
   (sans toucher #avis (navy) ni les ::before déjà possédés)
   ============================================================ */

/* 4.1 SÉPARATION inter-sections : hairline dégradé en haut d'une .sec qui
   suit une autre .sec. Les ::before de #avis (navy) et #indicateurs (hairline
   l.1122) sont possédés par des sélecteurs ID (spécificité supérieure) : la
   règle générique ci-dessous ne les écrase donc PAS. On neutralise juste le
   filet après une bande immersive pleine largeur (le contraste suffit). */
section.sec + section.sec::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(420px,62%);height:1px;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,transparent,var(--line) 18%,var(--orange) 50%,var(--line) 82%,transparent);
  opacity:.55}
.photoband + section.sec::before{display:none}
.demarche + section.sec::before{display:none}

/* 4.2 EYEBROW + SEC-HEAD plus présents */
.eyebrow::after{box-shadow:0 0 0 3px rgba(244,149,75,.14),0 0 10px rgba(244,149,75,.45)}
.sec-head h2{position:relative}
/* accent dégradé sous les sec-head centrés (déployé au reveal) — sauf #avis (h2 = ★★★★★) */
.sec-head.center h2::after{
  content:"";display:block;width:54px;height:3px;margin:16px auto 0;border-radius:999px;
  background:var(--grad);opacity:.9;
  box-shadow:0 4px 12px -4px rgba(238,90,69,.5);
  transform:scaleX(.5);transform-origin:center;transition:transform .7s var(--ease)}
.sec-head.center.rv.in h2::after,
.sec-head.center .rv.in h2::after{transform:scaleX(1)}
#avis .sec-head.center h2::after{display:none}
/* sec-head non centrés : accent calé à gauche */
.sec-head:not(.center) h2::after{
  content:"";display:block;width:48px;height:3px;margin:16px 0 0;border-radius:999px;
  background:var(--grad);opacity:.9}
.sec-head p{font-size:1.02rem;line-height:1.65}
.demarche .sec-head.center h2::after{opacity:1;box-shadow:0 4px 14px -4px rgba(244,149,75,.6)}

/* 4.3 BOUTONS .btn-primary — désirables SANS transform (relief = box-shadow + glow) */
.btn-primary{
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 14px 30px -12px rgba(238,90,69,.6),
    0 6px 14px -8px rgba(244,149,75,.45)}
.btn-primary::before{
  content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:0;pointer-events:none;
  background:radial-gradient(120% 140% at 50% 0%,rgba(255,255,255,.32),transparent 55%);
  opacity:.7;transition:opacity .35s var(--ease)}
.btn-primary>*{position:relative;z-index:1}
.btn-primary:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 22px 46px -14px rgba(238,90,69,.78),
    0 10px 22px -10px rgba(244,149,75,.6),
    0 0 0 1px rgba(255,255,255,.12) inset}
.btn-primary:hover::before{opacity:1}
/* ruban CTA + son bouton blanc (le ruban a déjà ::before l.183 + ::after l.581) */
.cta-inner{box-shadow:0 40px 80px -40px rgba(238,90,69,.7),0 16px 40px -24px rgba(42,42,82,.35)}
.cta-inner .btn-white{box-shadow:0 12px 26px -12px rgba(42,42,82,.4),0 2px 0 rgba(255,255,255,.6) inset}
.cta-inner .btn-white:hover{box-shadow:0 20px 40px -16px rgba(42,42,82,.5),0 2px 0 rgba(255,255,255,.7) inset}

/* 4.4 PROFONDEUR & COHÉRENCE DES OMBRES (repos déjà unifié l.575 ; on aligne
   .duo-card et on enrichit les survols : teinte navy + voile corail léger).
   NB : #avis .quote:hover a son ombre navy en !important -> non affecté. */
.duo-card{box-shadow:0 1px 2px rgba(42,42,82,.04),0 12px 28px -20px rgba(42,42,82,.28)}
.pq:hover{box-shadow:0 30px 56px -32px rgba(42,42,82,.4),0 10px 24px -16px rgba(238,90,69,.22)}
.quote:hover{box-shadow:0 30px 56px -32px rgba(42,42,82,.38),0 10px 22px -16px rgba(238,90,69,.18)}
.duo-card:hover{box-shadow:0 36px 70px -34px rgba(42,42,82,.42),0 12px 26px -16px rgba(238,90,69,.2)}
.kpi:hover{box-shadow:0 30px 56px -32px rgba(42,42,82,.4),0 10px 24px -16px rgba(238,90,69,.28)}
.pcard:hover{box-shadow:0 40px 78px -36px rgba(238,90,69,.4),0 14px 30px -18px rgba(42,42,82,.35)}
.price:hover{box-shadow:0 36px 70px -38px rgba(42,42,82,.36),0 12px 26px -16px rgba(238,90,69,.22)}
.info-block,.pdf-card,.fin-badge{transition:transform .3s var(--ease),box-shadow .35s,border-color .3s}
.info-block:hover{transform:translateY(-3px);border-color:var(--orange);
  box-shadow:0 22px 44px -28px rgba(42,42,82,.35)}

/* 4.5 TRANSITIONS HOMOGÈNES (une seule courbe) + hairline orange au survol des
   cartes neutres. .quote/.kpi/.duo-card : le bord du contexte #avis (id) reste prioritaire. */
.pq,.pcard,.price,.kpi,.quote,.duo-card,.step,.fin-card,.pdf-card,
.faq-item,.faq-q,.tabsel-btn,.chip,.cred,.fin-badge,.linkcard{
  transition-timing-function:var(--ease)}
.quote,.kpi,.duo-card{border-color:var(--line);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.kpi:hover,.duo-card:hover{border-color:var(--orange)}

/* 4.6 AMBIANCE — voile de lumière crème SUR #apropos uniquement (fond beige plat).
   #avis est navy et possède son propre ::before -> exclu. */
#apropos{position:relative;isolation:isolate}
#apropos::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 60% at 88% 8%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(50% 55% at 6% 96%,rgba(244,149,75,.07),transparent 65%)}
/* NB : #apropos .about::before (halo portrait) reste au-dessus (z-index:0 vs -1). */

/* 4.7 FINITIONS diverses cohérentes */
.duo-card .duo-img img{transition:transform 1s var(--ease)}
.duo-card:hover .duo-img img{transform:scale(1.04)}
.hs-badge{box-shadow:0 22px 44px -22px rgba(42,42,82,.5),0 6px 14px -8px rgba(238,90,69,.25)}

/* ============================================================
   5) RESPONSIVE — garde-fous (n'écrase pas 992/760/620/520/420)
   ============================================================ */
@media(max-width:920px){
  /* le halo portrait reste derrière le portrait quand .about passe en 1 colonne */
  #apropos .about::before{
    width:min(86%,360px);left:50%;top:0;
    transform:translate(-50%,-12%);
  }
  @keyframes v33-halo{
    0%,100%{transform:translate(-50%,-12%) scale(1)}
    50%    {transform:translate(-50%,-14%) scale(1.05)}
  }
}
@media(max-width:760px){
  /* filet inter-sections plus court/discret */
  section.sec + section.sec::before{width:min(220px,70%);opacity:.45}
  .sec-head.center h2::after{width:46px;margin-top:12px}
  .sec-head:not(.center) h2::after{width:40px;margin-top:12px}
  .sec-head p{font-size:.95rem}
  /* portrait centré + lettrine un peu réduite */
  #apropos .about .portrait{max-width:300px;margin:0 auto}
  #apropos .about::before{width:min(92%,300px)}
  #apropos .about .rv[data-d="1"] p:first-of-type::first-letter{font-size:2.7em}
}

/* ============================================================
   6) ACCESSIBILITÉ — prefers-reduced-motion : la règle globale (l.264)
   coupe animation/transition ; on fige en plus nos états transformés.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  #apropos .about::before{transform:translateY(-50%) !important}
  #apropos .about .pbadge{transform:none !important}
  #indicateurs .kpi .kpi-num::after{opacity:.7 !important}
  #indicateurs .kpi-lbl::after{transform:scaleX(1) !important}
  .sec-head.center h2::after,
  .sec-head:not(.center) h2::after{transform:none !important}
  .btn-primary::before{opacity:.7 !important}
}

/* === v34 — vrai logo Qualiopi + retrait médaillons emoji === */
.quali-logo{flex:none;width:150px;height:auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:0 14px 30px -18px rgba(42,42,82,.35)}
@media(max-width:620px){.quali-logo{width:128px}}
/* les cartes .pqphoto n'ont plus de médaillon : l'image remonte proprement, le body garde son padding */
.pqphoto .pq-body{padding-top:18px}

/* === v35 — bloc Qualiopi mis en valeur (bleu foncé officiel) === */
.quali{
  background:linear-gradient(150deg,#16317d 0%,#1c2a6b 55%,#0f1f54 100%) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:#fff;
  padding:34px 38px !important;
  position:relative;
  overflow:hidden;
  box-shadow:0 40px 80px -44px rgba(22,49,125,.6);
  isolation:isolate;
}
/* halos décoratifs (bleu clair + touche corail discrète) */
.quali::before{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:
    radial-gradient(50% 80% at 88% -20%, rgba(89,124,228,.35), transparent 60%),
    radial-gradient(45% 70% at 6% 120%, rgba(238,90,69,.16), transparent 62%);
}
/* liseré tricolore Qualiopi en haut (bleu/blanc/rouge) */
.quali::after{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#16317d 0 33.3%,#fff 33.3% 66.6%,#e2001a 66.6% 100%);
  opacity:.9;
}
.quali h3{color:#fff;font-size:1.22rem;margin-bottom:6px}
.quali p{color:rgba(255,255,255,.82);max-width:42em}
.quali strong{color:#fff}
/* le logo ressort bien sur fond bleu (encadré blanc + ombre) */
.quali .quali-logo{
  width:268px;max-width:42vw;border:0;padding:16px 20px;border-radius:18px;
  box-shadow:0 22px 48px -16px rgba(0,0,0,.55);
}
/* badge CPF/finançable à droite (optionnel via .quali-tag, sinon ignoré) */
.quali .qi{align-items:center;gap:22px}
@media(max-width:620px){.quali .quali-logo{width:230px;max-width:80vw}}
@media(prefers-reduced-motion:reduce){.quali::before{animation:none}}
/* tags du bloc qualiopi (sur fond bleu) */
.quali-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.quali-tags span{font-size:.78rem;font-weight:600;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:5px 13px}

/* === v36 — corrections client : sobriété (fond blanc, pas d'ombre curseur, pas d'anim titres/boutons) === */
/* 1) supprimer le halo qui suit le curseur */
.cursorglow{display:none !important}
/* 2) titres : plus d'animation (sheen dégradé figé + mots qui n'ont plus d'effet d'entrée) */
.grad-text{animation:none !important;background-position:0 0 !important}
.split .w{opacity:1 !important;transform:none !important;transition:none !important}
/* 3) bouton « Prendre contact » / primaires : plus de reflet animé ni de lift agressif */
.btn-primary::after{display:none !important;animation:none !important}
.btn-primary:hover{transform:none !important}
.btn .a{transition:none !important}.btn:hover .a{transform:none !important}
/* 4) fond plus neutre : atténuer fortement les halos colorés (mesh) et le grain */
.hero .mesh,.mesh{opacity:.22 !important;filter:blur(80px)}
body::after{opacity:.02 !important}
.hero{background:#fff}
/* sections beiges -> blanc cassé très neutre (surface-2 déjà ajusté en gris clair) */

/* 5) titre + bouton fiche pédagogique alignés (bilan) */
.sec-head.wide{max-width:920px}
.sec-head.wide>p{max-width:62ch}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:14px 26px;flex-wrap:wrap}
.head-row h2{margin:0;flex:1 1 300px;min-width:0}
.fiche-btn{flex:0 0 auto;white-space:nowrap;align-self:center}
.fiche-btn .fic{margin-right:2px}
.fiche-btn small{font-weight:500;opacity:.7}
/* 6) bloc info2 en pleine largeur quand une seule colonne */
.info2.single{grid-template-columns:1fr}
/* 7) carte Financements (vignette unique) */
.fincard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r,20px);padding:26px 28px;box-shadow:0 10px 34px rgba(42,42,82,.05)}
.fincard .fin-intro{margin:0 0 16px;font-weight:600;color:var(--ink)}
.fin-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 26px}
.fin-list>li{display:flex;gap:13px;align-items:flex-start}
.fin-list .fin-ic{font-size:1.35rem;line-height:1.2;flex:0 0 auto}
.fin-list b{display:block;color:var(--ink);margin-bottom:3px}
.fin-list p{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.5}
@media(max-width:720px){.fin-list{grid-template-columns:1fr}}

/* ============================================================
   v38 — MOBILE XXL : expérience téléphone premium + corrections
   (placé en fin de fichier : override volontaire)
   ============================================================ */
@media(max-width:760px){
  html{scroll-behavior:smooth}
  body{font-size:15.6px;-webkit-tap-highlight-color:transparent}
  .wrap{padding:0 20px}
  .sec{padding:54px 0}

  /* ---------- HERO premium ---------- */
  .hero{padding:88px 0 30px}
  .hero .wrap{display:flex;flex-direction:column}
  .hero-shot{order:-1;width:78%;max-width:300px;margin:4px auto 30px}
  .hs-frame{border-radius:34px 34px 34px 70px;border:6px solid #fff;overflow:hidden;
    box-shadow:0 34px 64px -26px rgba(238,90,69,.55), 0 12px 26px -16px rgba(42,42,82,.42)}
  .hs-frame img{display:block;width:100%;height:auto}
  .hero-copy{text-align:center}
  .hero .eyebrow{justify-content:center}
  .hero h1{font-size:clamp(2rem,8.4vw,2.55rem);line-height:1.06;letter-spacing:-.5px;overflow-wrap:anywhere}
  .hero .lead{font-size:1.05rem;line-height:1.55;margin:14px auto 24px;max-width:34ch}
  .actions{flex-direction:column;align-items:stretch;gap:12px}
  .actions .btn{justify-content:center;width:100%;padding:1.15em 1.4em;font-size:1.02rem;border-radius:100px}
  .hero-note{text-align:center;font-size:.85rem;margin-top:16px;opacity:.82}
  @media(prefers-reduced-motion:no-preference){.hero-shot{animation:heroFloat 6.5s ease-in-out infinite}}

  /* ---------- titres de section ---------- */
  .sec-head{margin-bottom:26px}
  .sec-head h2,.split{font-size:clamp(1.72rem,6.9vw,2.2rem);line-height:1.12}
  .sec-head .eyebrow{font-size:.7rem}
  .sec-head p{font-size:.98rem;line-height:1.6}

  /* ---------- grilles : 1 colonne, respiration ---------- */
  .grid3,.duo,.pq-grid,.presta-grid,.price-grid,.price-grid-2,.price-grid-3,.testi-grid,.info2,.kpi-grid{grid-template-columns:1fr !important;gap:18px}

  /* ---------- cartes premium + arrondis ---------- */
  .pq,.price,.info-block,.quote,.linkcard,.formcard,.fincard{border-radius:22px}
  .duo-card{border-radius:28px;box-shadow:0 24px 46px -28px rgba(42,42,82,.42)}
  .duo-img{aspect-ratio:16/10}
  .duo-body{padding:22px 22px 26px}
  .duo-body h2{font-size:1.28rem;line-height:1.15}
  .pqphoto .pq-img{aspect-ratio:16/10}
  .pq-body{padding:20px}

  /* ---------- bande immersive ---------- */
  .photoband{min-height:330px;padding:62px 22px}
  .band-quote{font-size:clamp(1.42rem,6.3vw,1.85rem);line-height:1.32}

  /* ---------- À propos / portrait ---------- */
  .about{grid-template-columns:1fr;gap:30px}
  .about .portrait{max-width:300px;margin:0 auto}
  .portrait img{border-radius:28px}

  /* ---------- QUALIOPI : FIX colonne + premium ---------- */
  .quali{padding:28px 22px !important;border-radius:26px}
  .quali .qi{flex-direction:column;align-items:center;text-align:center;gap:22px}
  .quali .quali-logo{width:min(290px,76vw) !important;max-width:none}
  .quali h3{font-size:1.32rem}
  .quali p{font-size:.95rem;line-height:1.6}
  .quali-tags{justify-content:center}
  .info2.single .info-block{text-align:left}

  /* ---------- AVIS ---------- */
  .quote{padding:24px 22px}
  .quote blockquote{font-size:1.02rem;line-height:1.6}

  /* ---------- KPI ---------- */
  .kpi-grid{max-width:none;gap:14px}
  .kpi{padding:28px 20px}
  .kpi-num{font-size:2.9rem}

  /* ---------- formulaire ---------- */
  .cgrid{grid-template-columns:1fr;gap:22px}
  .row2{grid-template-columns:1fr;gap:0}
  .field input,.field select,.field textarea{font-size:16px}
  .formcard{padding:24px 20px}

  /* ---------- bilan : titre + bouton fiche en colonne ---------- */
  .sec-head.wide{max-width:none}
  .head-row{flex-direction:column;align-items:flex-start;gap:16px}
  .head-row h2{flex:none;width:100%}
  .fiche-btn{width:100%;justify-content:center}

  /* ---------- devis / financements ---------- */
  .restecharge{padding:28px 22px;border-radius:26px}
  .rc-right{grid-template-columns:1fr 1fr;gap:12px}
  .hero-pills{justify-content:center}

  /* ---------- CTA final ---------- */
  .cta-inner{padding:40px 24px;border-radius:30px}
  .cta-inner h2{font-size:1.72rem;line-height:1.18}

  /* ---------- footer ---------- */
  .foot-grid{grid-template-columns:1fr;gap:28px;text-align:left}
  footer{padding:52px 22px 124px}            /* place pour la barre fixe */
  .foot-bottom{flex-direction:column;gap:10px;text-align:center;font-size:.8rem}
  .cookie-banner{left:12px;right:12px;bottom:84px}

  /* ---------- BARRE D'ACTION BASSE : FIX display + premium ---------- */
  .mobile-bar{display:flex !important;padding:11px 13px calc(11px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);
    box-shadow:0 -10px 30px -18px rgba(42,42,82,.55)}
  .mobile-bar a{padding:15px;font-size:1rem;border-radius:100px}
  .mobile-bar .mb-contact{box-shadow:0 12px 28px -10px rgba(238,90,69,.7)}
}

/* très petits écrans */
@media(max-width:400px){
  .hero h1{font-size:clamp(1.85rem,9.2vw,2.3rem)}
  .rc-right{grid-template-columns:1fr}
  .quali .quali-logo{width:min(260px,82vw) !important}
}

/* ============================================================
   v39 — MOBILE : cartes qui s'EMPILENT au scroll (sticky stack)
   « quand on descend, ça se superpose de manière animée »
   ============================================================ */
@media(max-width:760px){
  /* conteneurs de cartes en flux vertical (le sticky a besoin du flow) */
  .duo,.grid3{display:flex !important;flex-direction:column;gap:0 !important}
  .duo>*,.grid3>*{
    position:sticky;
    top:78px;                         /* chaque carte se cale sous la nav */
    margin-bottom:30px;
    border-radius:24px;
    box-shadow:0 24px 50px -22px rgba(42,42,82,.55);  /* relief = on « voit » la carte passer par-dessus */
    background:var(--surface);
    transition:box-shadow .4s var(--ease);
  }
  /* léger escalier : on aperçoit le bord des cartes empilées dessous */
  .grid3>*:nth-child(2){top:90px}
  .grid3>*:nth-child(3){top:102px}
  .grid3>*:nth-child(4){top:114px}
  .grid3>*:nth-child(5){top:126px}
  .grid3>*:nth-child(6){top:138px}
  .duo>*:nth-child(2){top:92px}
  .duo>*:last-child,.grid3>*:last-child{margin-bottom:0}
  /* les cartes-photo gardent leur image collée en haut proprement */
  .pqphoto{overflow:hidden}
}
/* profondeur animée quand le navigateur sait piloter par le scroll
   (Chrome/Edge + Safari récents) : la carte « s'enfonce » en restant collée */
@supports (animation-timeline:view()){
  @media(max-width:760px){
    .duo>*,.grid3>*{
      animation:cardStack linear both;
      animation-timeline:view();
      animation-range:exit 10% exit 95%;
      transform-origin:50% 0;
    }
    @keyframes cardStack{to{transform:scale(.93);filter:brightness(.96)}}
  }
}
@media(prefers-reduced-motion:reduce){
  .duo>*,.grid3>*{position:static !important;animation:none !important;transform:none !important}
}

/* float doux de l'image hero (image only, pas les titres) */
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){.hero-shot{animation:none !important}}

/* micro-interactions tactiles renforcées (mobile/tablette sans souris) */
@media(hover:none){
  .btn:active{transform:scale(.965)}
  .pq:active,.price:active,.duo-card:active,.linkcard:active,.kpi:active,.quote:active,.fin-card:active{transform:scale(.985)}
  .mobile-bar a:active{transform:scale(.95)}
  .more:active{opacity:.7}
}


/* ============================================================
   v41 — corrections client 2 (logos officiels, encart légal)
   ============================================================ */
/* mention légale Qualiopi dans l'encart bleu (seul texte autorisé) */
.quali-mention{color:#fff;font-size:1.12rem;line-height:1.65;margin:0}
.quali-mention strong{color:#fff;font-size:1.2rem}
/* logo Mon Compte Formation dans la liste des financements (bilan) */
.fin-ic img{display:block;width:44px;height:44px;border-radius:9px}
/* badge Mon Compte Formation fond blanc (bloc devis) */
.mcf-badge{display:block;margin:18px 0 4px;width:132px;height:auto;background:#fff;padding:12px 16px;border-radius:18px;box-shadow:0 20px 40px -16px rgba(0,0,0,.55)}
/* KPI : visuel 5 étoiles + note astérisque */
.kpi-stars{color:var(--coral);font-size:1.05rem;letter-spacing:4px;margin:2px 0 6px}
.kpi-note{text-align:center;color:var(--muted);font-size:.82rem;margin-top:14px}

/* ============================================================
   v42 — MOBILE HYPER DESIGN : fluidité + animations premium
   (tout scopé ≤760px ; desktop intact ; reduced-motion respecté)
   ============================================================ */
@media(max-width:760px){
  html{scroll-behavior:smooth}
  body{-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
  /* barre de progression de lecture : plus visible, glow premium */
  .scrollbar{height:4px;border-radius:0 6px 6px 0;box-shadow:0 0 18px rgba(238,90,69,.75)}
  /* reveals plus fluides (easing quint, sans rebond → titres sereins) */
  .rv{transition-timing-function:cubic-bezier(.22,1,.36,1);transition-duration:.9s}
  .grid3 .rv,.duo .rv,.testi-grid .rv,.kpi-grid .rv,.pq-grid .rv{transition-delay:calc(var(--i,0)*110ms)}
  /* nav qui se givre au scroll (glassmorphism) */
  nav.scrolled{background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(1.35) blur(15px);backdrop-filter:saturate(1.35) blur(15px);box-shadow:0 8px 28px -20px rgba(42,42,82,.55)}
  /* cartes : ombres douces colorées */
  .duo-card,.pq,.quote,.price,.linkcard,.restecharge,.fincard,.formcard{box-shadow:0 26px 54px -30px rgba(42,42,82,.5)}
  .quali{box-shadow:0 30px 60px -30px rgba(22,49,125,.6)}
  /* boutons secondaires : reflet doux au tap (pas le CTA « Prendre contact ») */
  .btn-white,.btn-ghost{position:relative;overflow:hidden}
  .btn-white::after,.btn-ghost::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.45),transparent 70%);transform:translateX(-120%);transition:transform .6s var(--ease);pointer-events:none}
  .btn-white:active::after,.btn-ghost:active::after{transform:translateX(120%)}
  .hero-pills{gap:10px}
}
/* ken burns cinématique + flottements (mobile) */
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  .photoband{animation:kenburns 20s ease-in-out infinite alternate}
  .hero-pills .pill{animation:pillFloat 4.2s ease-in-out infinite}
  .hero-pills .pill:nth-child(2){animation-delay:.5s}
  .hero-pills .pill:nth-child(3){animation-delay:1s}
  .fin-card{animation:tileFloat 5s ease-in-out infinite}
  .fin-card:nth-child(2){animation-delay:.4s}
  .fin-card:nth-child(3){animation-delay:.8s}
  .fin-card:nth-child(4){animation-delay:1.2s}
}
@keyframes kenburns{from{background-size:116%}to{background-size:126%}}
@keyframes pillFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes tileFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* parallaxe FLUIDE des images au scroll (navigateurs compatibles ; sinon statique) */
@supports (animation-timeline:view()){
  @media(max-width:760px) and (prefers-reduced-motion:no-preference){
    .pqphoto .pq-img img,.about .portrait img{animation:imgRise linear both;animation-timeline:view();animation-range:entry 0% cover 55%;will-change:transform}
    @keyframes imgRise{from{transform:scale(1.12) translateY(12px)}to{transform:scale(1) translateY(0)}}
  }
}


/* ============================================================
   v43 - 1re image hero premium + stop tremblement au scroll (mobile)
   ============================================================ */
@media(max-width:760px){
  /* --- HERO image : plus grande, cadre premium, UN seul mouvement doux --- */
  .hero-shot{width:86%;max-width:340px;animation:none !important}      /* stop le float qui fait vibrer le cadre */
  .hs-frame{aspect-ratio:16/10 !important;border-radius:26px;border:6px solid #fff;
    box-shadow:0 34px 72px -30px rgba(238,90,69,.5), 0 16px 34px -20px rgba(42,42,82,.5)}
  .hs-frame img{width:100% !important;height:100% !important;object-fit:cover !important;transform:scale(1.04);animation:hsKen 28s ease-in-out infinite alternate !important} /* remplit le cadre paysage + ken burns tres lent */
  .hero-shot::before{opacity:.26 !important;animation:none !important;filter:blur(56px)}             /* halo doux, fige */

  /* --- SCROLL fluide : couper tout ce qui est pilote par le scroll --- */
  [data-parallax] .pimg{transform:none !important}                    /* parallaxe OFF */
  .photoband{animation:none !important;background-size:cover !important}/* ken burns bandes OFF */
  .duo>*,.grid3>*,.pqphoto .pq-img img,.about .portrait img{animation:none !important} /* scroll-driven OFF (garde l'empilement sticky) */
}