/* ============ PROSOFT ACADEMY — feuille de style ============ */
:root{
  --ink:#0a1b3d; --ink-2:#1b2f57; --blue:#1d4fa8; --blue-2:#2563c9; --sky:#38bdf8; --accent:#f59e0b;
  --bg:#f5f8ff; --card:#fff; --line:#e3eaf7; --muted:#5b6b88;
  --r:20px; --shadow:0 10px 30px -12px rgba(16,42,94,.25); --shadow-lg:0 30px 60px -25px rgba(16,42,94,.4);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --display:"Sora","Inter",system-ui,sans-serif;
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; font:400 1rem/1.65 var(--font); color:var(--ink-2); background:var(--bg); -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
a{color:var(--blue-2); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--display); color:var(--ink); line-height:1.15; margin:0 0 .5em; letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,5vw,3.8rem); font-weight:800}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem); font-weight:800}
h3{font-size:1.25rem; font-weight:700}
p{margin:0 0 1em}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid var(--sky); outline-offset:3px; border-radius:6px}
.wrap{width:min(var(--wrap),100% - 40px); margin-inline:auto}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-999px; top:8px; background:var(--ink); color:#fff; padding:10px 16px; border-radius:10px; z-index:10000}
.skip:focus{left:8px}

/* barre de progression du scroll */
.scrollbar{position:fixed; top:0; left:0; height:3px; width:0; z-index:200; background:linear-gradient(90deg,var(--blue),var(--sky),var(--accent))}

/* ---------- En-tête ---------- */
.header{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.6) blur(14px); box-shadow:0 1px 0 var(--line); transition:background .3s, box-shadow .3s, backdrop-filter .3s}
.header.is-stuck{background:rgba(255,255,255,.82); backdrop-filter:saturate(1.6) blur(14px); box-shadow:0 1px 0 var(--line), 0 12px 30px -20px rgba(16,42,94,.35)}
.header__in{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:76px}
.brand img{height:50px; width:auto}
.nav{display:flex; align-items:center; gap:4px}
.nav a{position:relative; white-space:nowrap; padding:9px 11px; font-weight:600; font-size:.95rem; color:var(--ink-2); border-radius:12px; transition:color .2s, background .2s}
.nav a:hover{text-decoration:none; background:rgba(29,79,168,.07); color:var(--blue)}
.nav a[aria-current=page]{color:var(--blue)}
.nav a[aria-current=page]::after{content:""; position:absolute; left:14px; right:14px; bottom:3px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--blue),var(--sky))}
.burger{display:none; width:46px; height:46px; border:1px solid var(--line); border-radius:14px; background:#fff; cursor:pointer; position:relative}
.burger span,.burger span::before,.burger span::after{content:""; position:absolute; left:13px; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s, top .3s, opacity .2s}
.burger span{top:22px}.burger span::before{top:-6px; left:0}.burger span::after{top:6px; left:0}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{top:0; transform:rotate(45deg)}
.burger[aria-expanded=true] span::after{top:0; transform:rotate(-45deg)}

/* ---------- Boutons ---------- */
.btn{--bg:var(--blue); --fg:#fff; display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:16px; border:0; cursor:pointer;
  font:700 .98rem/1 var(--font); color:var(--fg); background:var(--bg); box-shadow:0 12px 24px -12px var(--bg); position:relative; overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.3), box-shadow .25s, background .25s}
.btn:hover{text-decoration:none; transform:translateY(-3px); box-shadow:0 18px 30px -12px var(--bg)}
.btn::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35),transparent 70%); transform:translateX(-120%); transition:transform .6s}
.btn:hover::after{transform:translateX(120%)}
.btn--ghost{--bg:transparent; --fg:var(--blue); box-shadow:none; border:2px solid rgba(29,79,168,.25)}
.btn--ghost:hover{background:rgba(29,79,168,.06); box-shadow:none}
.btn--light{--bg:#fff; --fg:var(--blue)}
.btn--sm{padding:11px 20px; font-size:.9rem; border-radius:14px}
.btn svg{width:18px; height:18px}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; color:#fff; isolation:isolate; padding:90px 0 120px;
  background:linear-gradient(135deg,#0a2a6b 0%,#1d4fa8 55%,#2a7ad6 100%)}
.hero::before{content:""; position:absolute; inset:0; z-index:-1; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:56px 56px; -webkit-mask-image:radial-gradient(70% 80% at 30% 40%,#000,transparent); mask-image:radial-gradient(70% 80% at 30% 40%,#000,transparent)}
.blob{position:absolute; z-index:-1; border-radius:50%; filter:blur(60px); opacity:.55; animation:drift 14s ease-in-out infinite alternate}
.blob--1{width:420px; height:420px; background:#38bdf8; top:-120px; right:-80px}
.blob--2{width:340px; height:340px; background:#f59e0b; bottom:-160px; left:20%; opacity:.28; animation-delay:-5s}
.blob--3{width:300px; height:300px; background:#7c9cff; top:30%; left:-120px; animation-delay:-9s}
.hero__grid{display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:99px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); font-weight:600; font-size:.85rem; backdrop-filter:blur(6px)}
.eyebrow i{width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 0 rgba(74,222,128,.7); animation:ping 2s infinite}
.hero h1{color:#fff; margin:22px 0 20px}
.hero h1 em{font-style:normal; background:linear-gradient(90deg,#7dd3fc,#fde68a); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p.lead{font-size:1.15rem; color:rgba(255,255,255,.86); max-width:560px}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
.hero .btn--ghost{--fg:#fff; border-color:rgba(255,255,255,.4)}
.hero .btn--ghost:hover{background:rgba(255,255,255,.12)}
.rotator{display:inline-block; position:relative; min-width:8ch}
.rotator span{display:inline-block; transition:opacity .4s, transform .4s}
.rotator span.out{opacity:0; transform:translateY(-.4em)}
.hero__visual{position:relative; height:440px}
.float-card{position:absolute; width:190px; padding:14px; border-radius:24px; background:rgba(255,255,255,.96); box-shadow:var(--shadow-lg); animation:float 6s ease-in-out infinite; transition:transform .3s}
.float-card img{border-radius:14px; width:100%; aspect-ratio:1; object-fit:contain}
.float-card:hover{transform:scale(1.06) rotate(-2deg); z-index:3}
.float-card:nth-child(1){top:0; left:8%; animation-delay:0s}
.float-card:nth-child(2){top:34px; right:0; animation-delay:-1.5s}
.float-card:nth-child(3){bottom:0; left:0; animation-delay:-3s}
.float-card:nth-child(4){bottom:24px; right:10%; animation-delay:-4.5s}
.hero__wave{position:absolute; left:0; right:0; bottom:-1px; height:70px; color:var(--bg)}

/* ---------- Sections ---------- */
.section{padding:96px 0; position:relative}
.section--white{background:#fff}
.section__head{max-width:720px; margin:0 0 48px}
.section__head.center{margin-inline:auto; text-align:center}
.kicker{display:inline-block; font-weight:700; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-2); margin-bottom:12px}
.kicker::before{content:""; display:inline-block; width:26px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--blue),var(--sky)); vertical-align:middle; margin-right:10px}
.lead{font-size:1.1rem; color:var(--muted)}
.page-hero{padding:70px 0 60px; background:linear-gradient(135deg,#0a2a6b,#1d4fa8 60%,#2a7ad6); color:#fff; position:relative; overflow:hidden; padding-top:70px}
.page-hero h1{color:#fff; font-size:clamp(2rem,4.5vw,3.2rem); margin-bottom:12px}
.page-hero p{color:rgba(255,255,255,.85); max-width:640px; font-size:1.1rem; margin:0}
.crumbs{font-size:.88rem; color:rgba(255,255,255,.75); margin-bottom:14px}
.crumbs a{color:#fff; opacity:.9}

.grid{display:grid; gap:24px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:30px; box-shadow:var(--shadow); transition:transform .35s cubic-bezier(.2,.9,.3,1.2), box-shadow .35s, border-color .35s; position:relative}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:#cddcf5}
.icon{width:58px; height:58px; border-radius:18px; display:grid; place-items:center; color:#fff; margin-bottom:20px; background:linear-gradient(135deg,var(--blue),var(--sky)); box-shadow:0 14px 24px -12px var(--blue-2)}
.icon svg{width:28px; height:28px}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:-64px; position:relative; z-index:5; background:#fff; border-radius:24px; box-shadow:var(--shadow-lg); border:1px solid var(--line)}
.stat{padding:30px 20px; text-align:center; border-right:1px solid var(--line)}
.stat:last-child{border:0}
.stat b{display:block; font:800 2.4rem/1 var(--display); color:var(--blue); font-variant-numeric:tabular-nums}
.stat span{color:var(--muted); font-weight:600; font-size:.92rem}

/* projets */
.project-card{display:flex; flex-direction:column; padding:0; overflow:hidden; --c:var(--blue); transform-style:preserve-3d}
.project-card__logo{background:#fff; padding:22px; display:grid; place-items:center; border-bottom:1px solid var(--line); position:relative}
.project-card__logo::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:4px; background:var(--c)}
.project-card__logo img{width:100%; max-width:230px; aspect-ratio:1; object-fit:contain; transition:transform .5s cubic-bezier(.2,.9,.3,1.2)}
.project-card:hover .project-card__logo img{transform:scale(1.07)}
.project-card__body{padding:24px 26px 28px; display:flex; flex-direction:column; gap:12px; flex:1}
.project-card__body p{color:var(--muted); font-size:.95rem; margin:0}
.project-card__more{margin-top:auto; font-weight:700; display:inline-flex; align-items:center; gap:8px; color:var(--c)}
.project-card__more svg{width:18px; transition:transform .3s}
.project-card:hover .project-card__more svg{transform:translateX(6px)}
.stretched::after{content:""; position:absolute; inset:0; z-index:1}
.badge{display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:99px; font-size:.78rem; font-weight:700; background:rgba(29,79,168,.09); color:var(--blue); width:max-content}
.badge::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.badge--developpement,.badge--test{background:#fff4dc; color:#a86500}
.badge--en_ligne{background:#dcfce7; color:#15803d}
.badge--conception,.badge--cadrage{background:#e6efff; color:var(--blue)}
.progress{height:8px; border-radius:99px; background:#e8eefb; overflow:hidden}
.progress i{display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--c,var(--blue)),var(--sky)); transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.progress-label{display:flex; justify-content:space-between; font-size:.8rem; font-weight:600; color:var(--muted); margin-bottom:6px}

/* équipe */
.person{text-align:center; padding:0 0 28px; overflow:hidden}
.person__photo{aspect-ratio:1/1; background:linear-gradient(135deg,#dbe8ff,#eaf3ff); display:grid; place-items:center; position:relative; overflow:hidden}
.person__photo img{width:100%; height:100%; object-fit:cover; object-position:50% 18%; transition:transform .6s}
.person:hover .person__photo img{transform:scale(1.06)}
.avatar{width:96px; height:96px; border-radius:50%; display:grid; place-items:center; font:800 2rem var(--display); color:#fff; background:linear-gradient(135deg,var(--blue),var(--sky)); box-shadow:0 14px 26px -12px var(--blue)}
.person__body{padding:22px 24px 0}
.person__role{color:var(--blue-2); font-weight:700; font-size:.9rem; margin-bottom:10px}
.person__body p{color:var(--muted); font-size:.93rem}
.person--wide{display:grid; grid-template-columns:230px 1fr; text-align:left; padding:0; align-items:stretch}
.person--wide .person__photo{aspect-ratio:auto; min-height:100%}
.person--wide .person__body{padding:28px}
.ticks li{position:relative; padding-left:28px; margin:8px 0; font-size:.95rem}
.ticks li::before{content:""; position:absolute; left:0; top:.42em; width:16px; height:16px; border-radius:50%; background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-4.9' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{padding:6px 13px; border-radius:99px; font-size:.82rem; font-weight:600; background:#eaf1ff; color:var(--blue)}

/* valeurs / marquee */
.marquee{overflow:hidden; padding:22px 0; background:#fff; border-block:1px solid var(--line)}
.marquee__track{display:flex; gap:56px; width:max-content; animation:marquee 32s linear infinite}
.marquee span{font:800 1.4rem var(--display); color:#c5d3ee; white-space:nowrap; display:flex; align-items:center; gap:56px}
.marquee span::after{content:"✦"; color:var(--sky)}
.marquee:hover .marquee__track{animation-play-state:paused}

/* projet : page détail */
.project-hero{--c:var(--blue); display:grid; grid-template-columns:1fr 280px; gap:40px; align-items:center}
.project-hero__logo{background:#fff; border-radius:28px; padding:16px; box-shadow:var(--shadow-lg); animation:float 6s ease-in-out infinite}
.project-hero__logo img{width:100%; aspect-ratio:1; object-fit:contain; border-radius:18px}
.block{display:grid; grid-template-columns:230px 1fr; gap:30px; padding:34px 0; border-top:1px solid var(--line)}
.block:first-child{border-top:0}
.block h2{font-size:1.15rem; display:flex; gap:12px; align-items:center; margin:0}
.block h2 .n{display:grid; place-items:center; width:34px; height:34px; border-radius:12px; background:var(--blue); color:#fff; font-size:.9rem; flex:none}
.steps{counter-reset:s; display:grid; gap:14px}
.steps li{counter-increment:s; display:flex; gap:16px; align-items:flex-start; padding:16px 18px; background:#fff; border:1px solid var(--line); border-radius:16px}
.steps li::before{content:counter(s); flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--c,var(--blue)),var(--sky))}
.feat-cols{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.feat{padding:22px; border-radius:18px; border:1px solid var(--line); background:#fff}
.feat h3{font-size:1rem; display:flex; align-items:center; gap:10px}
.feat li{padding:7px 0 7px 26px; position:relative; font-size:.94rem}
.feat--yes li::before{content:"✓"; position:absolute; left:0; color:#15803d; font-weight:800}
.feat--soon li::before{content:"◔"; position:absolute; left:0; color:#a86500; font-weight:800}
.feat--soon{background:#fffaf0; border-color:#f6e2b6}
.feat .empty{color:var(--muted); font-style:italic; padding-left:0}
.dev-line{display:flex; gap:16px; align-items:flex-start; padding:18px; background:#fff; border:1px solid var(--line); border-radius:18px}
.dev-line .avatar{width:54px; height:54px; font-size:1.1rem; flex:none}
.dev-line img.avatar{object-fit:cover}
.dev-line small{color:var(--blue-2); font-weight:700}

/* actualités */
.news-card{padding:0; overflow:hidden; display:flex; flex-direction:column}
.news-card__cover{aspect-ratio:16/9; background:linear-gradient(135deg,#0a2a6b,#2a7ad6); display:grid; place-items:center; overflow:hidden}
.news-card__cover img{width:100%; height:100%; object-fit:cover; transition:transform .6s}
.news-card:hover .news-card__cover img{transform:scale(1.06)}
.news-card__cover svg{width:56px; color:rgba(255,255,255,.7)}
.news-card__body{padding:24px 26px 28px; display:flex; flex-direction:column; gap:10px; flex:1}
.news-card time{font-size:.82rem; font-weight:700; color:var(--blue-2)}
.prose{max-width:760px}
.prose p{white-space:pre-line}

/* contact / formulaire */
.contact-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:start}
.field{margin-bottom:18px}
.field label{display:block; font-weight:700; font-size:.9rem; margin-bottom:7px; color:var(--ink)}
.field input,.field textarea{width:100%; padding:14px 16px; font:inherit; color:var(--ink); background:#f8fbff; border:1.5px solid var(--line); border-radius:14px; transition:border-color .2s, box-shadow .2s, background .2s}
.field input:focus,.field textarea:focus{outline:0; border-color:var(--blue-2); background:#fff; box-shadow:0 0 0 4px rgba(37,99,201,.15)}
.field .err,.form-errors{color:#b42318; font-size:.85rem; font-weight:600; margin-top:6px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.hp-field{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0}
.flash{padding:14px 18px; border-radius:14px; margin-bottom:20px; font-weight:600}
.flash--error{background:#fef3f2; color:#b42318; border:1px solid #fecdca}
.flash--ok{background:#ecfdf3; color:#067647; border:1px solid #abefc6}
.social{display:grid; gap:12px}
.social a{display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:16px; background:#fff; border:1px solid var(--line); font-weight:700; color:var(--ink); transition:transform .25s, box-shadow .25s, border-color .25s}
.social a:hover{text-decoration:none; transform:translateX(6px); box-shadow:var(--shadow); border-color:#cddcf5}
.social .ico{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; flex:none}
.social .ico svg{width:22px; height:22px}
.ico--wa{background:#25d366}.ico--fb{background:#1877f2}.ico--tt{background:#111}.ico--ig{background:linear-gradient(45deg,#f9a03f,#e1306c,#833ab4)}
.thanks{text-align:center; padding:60px 0}
.check{width:110px; height:110px; margin:0 auto 26px; border-radius:50%; background:#dcfce7; display:grid; place-items:center}
.check svg{width:60px; stroke:#15803d; stroke-width:5; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:60; stroke-dashoffset:60; animation:draw .8s .2s ease forwards}

/* CTA */
.cta{position:relative; overflow:hidden; border-radius:32px; padding:64px 48px; background:linear-gradient(135deg,#0a2a6b,#1d4fa8 60%,#2a7ad6); color:#fff; text-align:center; isolation:isolate}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.85); max-width:560px; margin:0 auto 26px}
.cta .blob{opacity:.35}

/* ---------- Pied de page ---------- */
.footer{background:#fff; border-top:1px solid var(--line); padding:70px 0 0; margin-top:0}
.footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px}
.footer img.logo{height:58px; width:auto; margin-bottom:16px}
.footer h4{font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); margin-bottom:16px}
.footer li{margin:9px 0}
.footer li a{color:var(--ink-2); font-weight:500}
.footer li a:hover{color:var(--blue-2)}
.footer p{color:var(--muted); font-size:.94rem}
.footer__social{display:flex; gap:10px; margin-top:14px}
.footer__social a{width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:#eef3ff; color:var(--blue); transition:transform .25s, background .25s, color .25s}
.footer__social a:hover{background:var(--blue); color:#fff; transform:translateY(-4px)}
.footer__social svg{width:20px; height:20px}
.visitors{margin-top:56px; padding:22px 26px; border-radius:22px; background:linear-gradient(135deg,#f0f6ff,#e6f0ff); border:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px}
.visitors__main{display:flex; align-items:center; gap:16px}
.visitors__icon{width:52px; height:52px; border-radius:16px; background:linear-gradient(135deg,var(--blue),var(--sky)); color:#fff; display:grid; place-items:center; box-shadow:0 12px 22px -10px var(--blue)}
.visitors__icon svg{width:26px}
.visitors__num{font:800 2rem/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.visitors small{display:block; color:var(--muted); font-weight:600; font-size:.85rem; margin-top:4px}
.visitors__side{display:flex; gap:28px; flex-wrap:wrap}
.visitors__side div{font-size:.85rem; color:var(--muted); font-weight:600}
.visitors__side b{display:block; font:800 1.25rem var(--display); color:var(--blue); font-variant-numeric:tabular-nums}
.live{display:inline-block; width:8px; height:8px; border-radius:50%; background:#22c55e; margin-right:6px; animation:ping 2s infinite}
.footer__bar{margin-top:30px; padding:22px 0; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:.86rem; color:var(--muted)}
.footer__bar nav{display:flex; gap:20px; flex-wrap:wrap}
.footer__bar a{color:var(--muted)}
.totop{position:fixed; right:22px; bottom:22px; width:50px; height:50px; border-radius:16px; border:0; cursor:pointer; background:var(--blue); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-lg); opacity:0; transform:translateY(20px); pointer-events:none; transition:.3s; z-index:90}
.totop.show{opacity:1; transform:none; pointer-events:auto}
.totop svg{width:22px}

/* ---------- Animations d'apparition ---------- */
[data-reveal]{opacity:0; transform:translateY(34px); transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0s), transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
[data-reveal=left]{transform:translateX(-40px)}
[data-reveal=right]{transform:translateX(40px)}
[data-reveal=zoom]{transform:scale(.9)}
[data-reveal].in{opacity:1; transform:none}
html.no-js [data-reveal]{opacity:1; transform:none}
.hero .stagger>*{opacity:0; transform:translateY(26px)}
html.is-ready .hero .stagger>*{animation:rise .9s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i,0)*.12s)}
html.is-ready .hero .float-card{animation-name:popIn,float; animation-duration:.9s,6s; animation-delay:calc(var(--i,0)*.15s),calc(var(--i,0)*-1.3s + .9s); animation-iteration-count:1,infinite; animation-fill-mode:both,none}
.hero .float-card{opacity:0}
html.is-ready .hero .float-card{opacity:1}

@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(1.2deg)}}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,30px) scale(1.15)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(74,222,128,.6)}70%,100%{box-shadow:0 0 0 12px rgba(74,222,128,0)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes rise{from{opacity:0; transform:translateY(26px)}to{opacity:1; transform:none}}
@keyframes popIn{from{opacity:0; transform:scale(.7) translateY(30px)}to{opacity:1; transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- Responsive ---------- */
@media (max-width:1180px){.header .btn--sm{display:none}}
@media (max-width:1020px){
  .hero__grid,.contact-grid,.project-hero{grid-template-columns:1fr}
  .hero__visual{height:380px; max-width:520px; margin-inline:auto; width:100%}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .project-hero__logo{max-width:240px}
  .block{grid-template-columns:1fr; gap:14px}
}
@media (max-width:860px){
  .burger{display:block}
  .nav{position:fixed; inset:76px 0 auto 0; flex-direction:column; align-items:stretch; padding:16px 20px 24px; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 30px 40px -20px rgba(16,42,94,.3); transform:translateY(-12px); opacity:0; pointer-events:none; transition:.3s}
  .nav.open{transform:none; opacity:1; pointer-events:auto}
  .nav a{padding:14px 16px; font-size:1.05rem}
  .header .btn--sm{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .person--wide{grid-template-columns:1fr}
  .person--wide .person__photo{aspect-ratio:16/10; min-height:0}
  .feat-cols{grid-template-columns:1fr}
}
@media (max-width:640px){
  .section{padding:68px 0}
  .grid--2,.grid--3,.grid--4,.form-row,.footer__grid{grid-template-columns:1fr}
  .hero{padding:70px 0 100px}
  .hero__visual{height:340px}
  .float-card{width:150px; padding:10px}
  .cta{padding:44px 24px}
  .visitors{flex-direction:column; align-items:flex-start}
  .stat b{font-size:1.9rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  [data-reveal],.hero .stagger>*,.hero .float-card{opacity:1 !important; transform:none !important}
}
@media print{.header,.footer,.totop,#preloader,.scrollbar{display:none !important} .hero,.page-hero{margin:0; color:#000; background:none}}


/* ============ V6 — expérience premium, contact, actualités, modal ============ */
.person__photo{position:relative;overflow:hidden;background:linear-gradient(145deg,#eaf2ff,#d7e6ff)}
.person__photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .45s}
.person:hover .person__photo img{transform:scale(1.035);filter:saturate(1.04) contrast(1.02)}
.person__photo .avatar{position:absolute;inset:0;width:100%;height:100%;border-radius:0}

/* Contact */
.contact-hero{position:relative;overflow:hidden;isolation:isolate;padding:88px 0 96px;background:linear-gradient(125deg,#071b42 0%,#123e8d 58%,#1976d2 100%);color:#fff}
.contact-hero::before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to right,#000,transparent 88%)}
.contact-hero__glow{position:absolute;border-radius:50%;filter:blur(20px);opacity:.35;z-index:-1;animation:drift 10s ease-in-out infinite alternate}.contact-hero__glow--1{width:380px;height:380px;background:#38bdf8;right:4%;top:-160px}.contact-hero__glow--2{width:260px;height:260px;background:#f59e0b;left:-80px;bottom:-160px}
.contact-hero__inner{display:grid;grid-template-columns:1.4fr .6fr;gap:60px;align-items:end}.contact-hero h1{color:#fff;max-width:760px}.contact-hero h1 em{font-style:normal;color:#8bdcff}.contact-hero p{max-width:650px;color:rgba(255,255,255,.78);font-size:1.08rem}.kicker--light{color:#a9ddff}.contact-hero .crumbs,.contact-hero .crumbs a{color:rgba(255,255,255,.68)}
.contact-hero__badge{justify-self:end;width:250px;padding:24px;border:1px solid rgba(255,255,255,.2);border-radius:24px;background:rgba(255,255,255,.1);backdrop-filter:blur(14px);box-shadow:0 24px 50px -30px #000}.contact-hero__badge span,.contact-hero__badge small{display:block;color:rgba(255,255,255,.7)}.contact-hero__badge strong{display:block;font:800 1.5rem var(--display);margin:2px 0 8px;color:#fff}
.contact-section{background:radial-gradient(circle at 12% 20%,rgba(56,189,248,.09),transparent 30%),var(--bg)}.contact-shell{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:32px;align-items:start}.contact-card,.contact-aside{background:#fff;border:1px solid rgba(210,222,243,.9);border-radius:28px;box-shadow:0 26px 70px -42px rgba(10,42,107,.55)}.contact-card{padding:34px}.contact-aside{padding:34px;position:sticky;top:104px}.contact-card__head{display:flex;align-items:center;gap:14px;margin-bottom:28px}.contact-card__head h2{margin:0}.contact-card__icon{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--blue),var(--sky));box-shadow:0 14px 28px -14px var(--blue)}
.field--float{position:relative;margin-bottom:22px}.field--float input,.field--float textarea{padding:20px 16px 10px;background:#f8fbff}.field--float label{position:absolute;left:16px;top:15px;margin:0;color:#71809b;font-weight:600;pointer-events:none;transition:.2s}.field--float input:focus+label,.field--float input:not(:placeholder-shown)+label,.field--float textarea:focus+label,.field--float textarea:not(:placeholder-shown)+label{top:6px;font-size:.68rem;color:var(--blue);letter-spacing:.03em}.field--textarea textarea{min-height:150px;resize:vertical}.contact-form__foot{display:flex;justify-content:space-between;gap:24px;align-items:center}.contact-form__foot p{max-width:420px;margin:0;color:var(--muted);font-size:.78rem}.contact-send{min-width:190px;justify-content:center}.contact-aside>p{color:var(--muted)}
.social--premium a{position:relative}.social--premium a span:nth-child(2){display:flex;flex-direction:column;line-height:1.25}.social--premium a small{color:var(--muted);font-weight:500;font-size:.75rem;margin-top:4px}.social--premium a>i{margin-left:auto;font-style:normal;color:var(--blue);font-size:1.2rem}.contact-note{display:flex;gap:14px;padding-top:22px;margin-top:22px;border-top:1px solid var(--line)}.contact-note>span{font:800 .75rem var(--display);color:var(--sky)}.contact-note b{color:var(--ink)}.contact-note p{font-size:.82rem;color:var(--muted);margin:4px 0 0}

/* Actualités */
.news-hero{position:relative;overflow:hidden;isolation:isolate;padding:92px 0 120px;background:linear-gradient(135deg,#071936,#103b82 58%,#1d5db8);color:#fff}.news-hero__grid{position:absolute;inset:0;z-index:-1;opacity:.28;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.35) 1px,transparent 0);background-size:26px 26px;mask-image:linear-gradient(to right,#000,transparent 82%)}.news-hero h1{color:#fff;max-width:780px}.news-hero h1 em{font-style:normal;color:#79d5ff}.news-hero p{max-width:620px;color:rgba(255,255,255,.78);font-size:1.08rem}.news-hero .crumbs,.news-hero .crumbs a{color:rgba(255,255,255,.65)}.news-featured-section{padding-top:0;margin-top:-62px;position:relative;z-index:3}.news-featured{display:grid;grid-template-columns:1.05fr .95fr;min-height:420px;background:#fff;border:1px solid var(--line);border-radius:30px;overflow:hidden;box-shadow:0 35px 80px -45px rgba(4,29,74,.75)}.news-featured__media{position:relative;display:block;overflow:hidden;background:linear-gradient(135deg,#0a2a6b,#2a7ad6)}.news-featured__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s}.news-featured:hover .news-featured__media img{transform:scale(1.035)}.news-featured__fallback{display:grid;place-items:center;height:100%;color:#fff}.news-featured__fallback svg{width:82px}.news-featured__tag{position:absolute;left:22px;top:22px;padding:8px 12px;border-radius:999px;background:#fff;color:var(--blue);font-size:.75rem;font-weight:800;box-shadow:var(--shadow)}.news-featured__body{padding:46px;display:flex;flex-direction:column;justify-content:center}.news-featured__body time{color:var(--muted);font-size:.82rem;margin:9px 0 16px}.news-featured__body h2{font-size:clamp(1.8rem,3vw,2.7rem)}.news-featured__body h2 a{color:inherit}.news-featured__body p{color:var(--muted);font-size:1.03rem}.news-category{display:inline-flex;align-self:flex-start;padding:7px 10px;border-radius:9px;background:#eef5ff;color:var(--blue);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.news-read{display:inline-flex;align-items:center;gap:9px;font-weight:800;color:var(--blue);margin-top:8px}.news-read span{transition:transform .25s}.news-read:hover span{transform:translateX(5px)}.news-feed{padding-top:50px}.news-feed__head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:32px}.news-filter{display:flex;gap:8px;flex-wrap:wrap}.news-filter span{padding:8px 12px;border-radius:999px;border:1px solid var(--line);font-size:.78rem;font-weight:700;color:var(--muted);background:#fff}.news-filter .active{background:var(--ink);color:#fff;border-color:var(--ink)}.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.news-modern{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 12px 35px -30px rgba(10,42,107,.7);transition:transform .35s,box-shadow .35s}.news-modern:hover{transform:translateY(-7px);box-shadow:0 30px 60px -35px rgba(10,42,107,.75)}.news-modern__media{position:relative;display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,#0a2a6b,#2a7ad6);color:#fff}.news-modern__media img{width:100%;height:100%;object-fit:cover;transition:transform .65s}.news-modern:hover img{transform:scale(1.06)}.news-modern__media span svg{width:52px}.news-modern__media i{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,20,48,.18),transparent 50%)}.news-modern__body{padding:24px}.news-modern__meta{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px;font-size:.72rem}.news-modern__meta span{font-weight:800;color:var(--blue);text-transform:uppercase}.news-modern__meta time{color:var(--muted)}.news-modern h3{font-size:1.16rem}.news-modern h3 a{color:inherit}.news-modern p{font-size:.9rem;color:var(--muted)}.news-empty{grid-column:1/-1;text-align:center;padding:70px 20px;background:#fff;border:1px dashed #c9d7ee;border-radius:28px}.news-empty>span{font-size:2rem;color:var(--sky)}

/* Modal "bientôt disponible" */
.soon-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:22px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}.soon-modal.is-open{opacity:1;visibility:visible}.soon-modal__backdrop{position:absolute;inset:0;background:rgba(4,14,34,.68);backdrop-filter:blur(9px)}.soon-modal__panel{position:relative;width:min(470px,100%);padding:42px 38px 36px;text-align:center;background:linear-gradient(145deg,#fff,#f4f8ff);border:1px solid rgba(255,255,255,.8);border-radius:30px;box-shadow:0 45px 110px -35px #020817;transform:translateY(28px) scale(.94);transition:transform .45s cubic-bezier(.2,.9,.2,1.25);overflow:hidden}.soon-modal.is-open .soon-modal__panel{transform:none}.soon-modal__panel::before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(56,189,248,.14);right:-120px;top:-120px}.soon-modal__close{position:absolute;right:16px;top:14px;width:38px;height:38px;border:0;border-radius:12px;background:#edf3ff;color:var(--ink);font-size:1.45rem;cursor:pointer}.soon-modal__orb{width:82px;height:82px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;position:relative;background:linear-gradient(135deg,var(--blue),var(--sky));box-shadow:0 18px 34px -16px var(--blue)}.soon-modal__orb::before{content:"";position:absolute;inset:-9px;border:1px dashed rgba(29,79,168,.35);border-radius:50%;animation:spin 9s linear infinite}.soon-modal__orb i{font-style:normal;color:#fff;font-size:1.8rem}.soon-modal__eyebrow{font-size:.7rem;letter-spacing:.18em;font-weight:800;color:var(--blue)}.soon-modal h2{font-size:2rem;margin-top:7px}.soon-modal p{color:var(--muted)}.soon-modal__line{display:flex;align-items:center;gap:10px;margin:22px 0;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.soon-modal__line span{height:1px;background:var(--line);flex:1}@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:900px){.contact-hero__inner,.contact-shell,.news-featured{grid-template-columns:1fr}.contact-hero__badge{justify-self:start}.contact-aside{position:static}.news-grid{grid-template-columns:repeat(2,1fr)}.news-featured__media{min-height:300px}}
@media(max-width:640px){.contact-card,.contact-aside{padding:24px}.contact-form__foot,.news-feed__head{align-items:stretch;flex-direction:column}.contact-send{width:100%}.news-grid{grid-template-columns:1fr}.news-featured__body{padding:28px}.news-hero{padding:70px 0 100px}.contact-hero{padding:70px 0 76px}}