@font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/fraunces-latin.woff2') format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/inter-tight-latin.woff2') format('woff2')}
:root{
  --bg:#f4f1ea;--ink:#111111;--ink2:#4a4a46;--line:#dcd7cc;
  --cyber:#4a6b8a;--marketing:#2f5d43;--web:#b8623f;
  --serif:'Fraunces',Georgia,serif;--sans:'Inter Tight',system-ui,sans-serif;
  --pad:clamp(16px,5vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.55;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:16px;background:var(--ink);color:var(--bg);padding:8px 12px;z-index:9}
h1,h2{font-family:var(--serif);font-weight:300;letter-spacing:-.01em;line-height:1.08}

/* ecran 1 */
.s1{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:var(--pad);position:relative}
.slogan{font-size:clamp(2rem,6.2vw,5.6rem);max-width:18ch}
.slogan2{margin-top:clamp(20px,3vw,40px);font-size:clamp(1rem,1.6vw,1.35rem);color:var(--ink2);max-width:46ch}
.down{position:absolute;left:var(--pad);bottom:28px;width:44px;height:44px;display:flex;align-items:flex-end}
.down span{display:block;width:1px;height:40px;background:var(--ink);animation:dn 2.2s ease-in-out infinite}
@keyframes dn{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ecran 2 */
.s2{background:var(--ink);color:var(--bg);padding:clamp(80px,14vh,160px) var(--pad);display:grid;gap:clamp(20px,3vw,40px)}
.s2 p{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,3rem);max-width:26ch;line-height:1.2}
.s2 p:nth-child(2){margin-left:auto;text-align:right}

/* ecran 3 */
.s3{padding:clamp(72px,10vh,130px) var(--pad)}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px)}
.col{border-top:1px solid var(--line);padding-top:24px}
.col-img{display:block;overflow:hidden;margin-bottom:24px}
.col-img img{aspect-ratio:4/5;object-fit:cover;transition:transform .8s ease}
.col:hover .col-img img{transform:scale(1.03)}
.col h2{font-size:clamp(2rem,3.4vw,3rem)}
.col h2 a{border-bottom:2px solid transparent}

.sur{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin:6px 0 16px}
.u-cyber .sur{color:var(--cyber)}.u-marketing .sur{color:var(--marketing)}.u-web .sur{color:var(--web)}
.promesse{font-size:1.1rem;color:var(--ink2);max-width:34ch}
.links{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px 20px}
.links a{font-size:.95rem;font-weight:500;padding:10px 0;border-bottom:1px solid var(--ink);min-height:44px;display:inline-flex;align-items:center}
.u-cyber .links a{border-color:var(--cyber)}.u-marketing .links a{border-color:var(--marketing)}.u-web .links a{border-color:var(--web)}

/* ecran 4 */
.s4{padding:clamp(72px,10vh,130px) var(--pad);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(24px,4vw,64px)}
.s4 h2{font-size:clamp(1.8rem,3vw,2.6rem);max-width:14ch}
.s4 ul{list-style:none;display:grid;gap:22px}
.s4 li{padding-left:22px;position:relative;font-size:1.05rem;max-width:56ch}
.s4 li::before{content:"";position:absolute;left:0;top:.8em;width:10px;height:1px;background:var(--ink)}
.s4 strong{font-weight:500}

/* ecran 5 */
.s5{padding:clamp(90px,16vh,200px) var(--pad);text-align:center;border-top:1px solid var(--line)}
.s5 .big{font-family:var(--serif);font-size:clamp(1.6rem,3.6vw,3.2rem);line-height:1.15;max-width:24ch;margin:0 auto}
.s5 .big a{display:inline-block;border-bottom:1px solid var(--ink);padding-bottom:4px}
.s5 .small{margin-top:clamp(28px,5vh,56px)}
.s5 .small{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,2.2rem);line-height:1.2;max-width:26ch;margin-left:auto;margin-right:auto}
.s5 .small a{display:inline-block;border-bottom:1px solid var(--line);padding:6px 0}

/* header (pages univers) */
.top{display:flex;justify-content:space-between;align-items:center;padding:20px var(--pad);border-bottom:1px solid var(--line)}
.brand{font-family:var(--serif);font-size:1.4rem}
.top-nav{display:flex;gap:4px}
.top-nav a{padding:10px 12px;min-height:44px;display:inline-flex;align-items:center;font-size:.95rem;border-bottom:2px solid transparent}
.top-nav a.u-cyber:hover,.univers-cyber .top-nav a.u-cyber{border-color:var(--cyber)}
.top-nav a.u-marketing:hover,.univers-marketing .top-nav a.u-marketing{border-color:var(--marketing)}
.top-nav a.u-web:hover,.univers-web .top-nav a.u-web{border-color:var(--web)}

/* pages univers */
.u-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--pad);padding:clamp(48px,8vh,100px) var(--pad);align-items:center}
.u-hero h1{font-size:clamp(3rem,8vw,7rem)}
.u-hero .promesse{font-size:clamp(1.15rem,1.8vw,1.5rem);margin-top:20px;max-width:30ch}
.u-hero img{aspect-ratio:4/5;object-fit:cover;max-height:70vh;width:100%}
.u-body{padding:0 var(--pad) clamp(48px,8vh,100px);display:grid;gap:22px;max-width:70ch}
.u-body p{font-size:1.15rem}
.u-cadre{padding:clamp(48px,8vh,100px) var(--pad);background:var(--ink);color:var(--bg)}
.u-cadre h2{font-size:clamp(1.8rem,3vw,2.6rem);margin-bottom:28px}
.u-cadre ul{list-style:none;display:grid;gap:16px;max-width:60ch}
.u-cadre li{padding-left:22px;position:relative}
.u-cadre li::before{content:"";position:absolute;left:0;top:.8em;width:10px;height:1px;background:var(--bg)}
.u-cadre a{border-bottom:1px solid var(--bg)}
.u-cadre .links a{border-color:var(--bg);color:var(--bg)}
.univers-cyber .u-cadre{background:var(--cyber)}.univers-marketing .u-cadre{background:var(--marketing)}.univers-web .u-cadre{background:var(--web)}

/* pages standard */
.page-std{padding:clamp(48px,8vh,100px) var(--pad);max-width:80ch}
.page-std h1{font-size:clamp(2rem,4vw,3.4rem);margin-bottom:32px}
.entry{display:grid;gap:18px}
.entry h2{font-size:1.6rem;margin-top:24px}
.entry h3{font-size:1.2rem;font-weight:500;margin-top:12px}
.entry ul,.entry ol{padding-left:22px}
.entry a{border-bottom:1px solid var(--ink)}

/* footer */
.foot{padding:40px var(--pad);border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:.9rem;color:var(--ink2)}
.foot-nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.foot-nav a,.copy a{min-height:44px;display:inline-flex;align-items:center}
.foot-nav a:hover,.copy a:hover{color:var(--ink)}

@media (max-width:900px){
  .tri{grid-template-columns:1fr;gap:56px}
  .s4{grid-template-columns:1fr}
  .u-hero{grid-template-columns:1fr}
  .u-hero img{max-height:60vh}
}
@media (max-width:600px){
  .s2 p:nth-child(2){margin-left:0;text-align:left}
  .top{flex-direction:column;align-items:flex-start;gap:8px}
  .top-nav a{padding:10px 12px 10px 0}
}

/* Cinematic presentation. All movement uses transforms and opacity. */
:root{--ease:cubic-bezier(.2,.7,.2,1)}
:focus-visible{outline:2px solid currentColor;outline-offset:6px}
.s1{isolation:isolate;overflow:hidden;background:var(--ink);color:var(--bg);padding-top:130px;padding-bottom:120px}
.hero-image{position:absolute;inset:0;width:100%;height:110%;max-width:none;object-fit:cover;object-position:62% center;z-index:-3;will-change:transform}
.s1::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(17,17,17,.8),rgba(17,17,17,.42) 48%,rgba(17,17,17,.08)),linear-gradient(0deg,#111111,transparent 22%)}
.hero-logo{position:absolute;top:34px;left:var(--pad);width:125px;--logo-ink:var(--bg);color:var(--bg)}
.hero-logo svg,.brand svg{display:block;width:100%;height:auto}
.slogan{max-width:19ch;font-size:clamp(2.5rem,5.5vw,5.4rem);text-wrap:balance}
.slogan2{color:var(--bg);max-width:43ch;font-size:clamp(1.05rem,1.4vw,1.3rem)}
.word{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .slogan .word,.slogan2 .word{animation:word-in 900ms var(--ease) both;animation-delay:calc(var(--word)*25ms)}
  .slogan2 .word{animation-delay:calc(400ms + var(--word)*18ms)}
}
@keyframes word-in{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:translateY(0)}}
.down span{background:var(--bg)}
.s2{min-height:85svh;align-content:center;gap:clamp(36px,6vh,72px)}
.s2 p{max-width:30ch;font-size:clamp(1.7rem,3.5vw,3.2rem)}
.u-cyber{--accent:var(--cyber)}.u-marketing{--accent:var(--marketing)}.u-web{--accent:var(--web)}
.col h2 a{display:inline-block;position:relative;border:0;padding-bottom:8px}
.col h2 a::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.col:hover h2 a::after,.col:focus-within h2 a::after{transform:scaleX(1)}
.reveal{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--delay,0ms)}
.reveal.seen{opacity:1;transform:none}
.s4 li::before{transform-origin:left;transition:transform .7s var(--ease);transition-delay:var(--delay,0ms)}
.s4 li.reveal:not(.seen)::before{transform:scaleX(0)}
.s5{position:relative;isolation:isolate;min-height:70svh;display:flex;flex-direction:column;justify-content:center;background:var(--ink);color:var(--bg);border:0;opacity:1;transform:none}
.s5::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg);opacity:calc((1 - var(--night,1))*.13)}
.s5 .big a{position:relative;border:0;border-bottom:1px solid rgba(244,241,234,.45);padding-bottom:6px}
.s5 .big a::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.s5.seen .big a::after,.s5:not(.reveal) .big a::after,.s5 .big a:hover::after,.s5 .big a:focus-visible::after{transform:scaleX(1)}
.s5 .small a{color:var(--bg);border-bottom:1px solid rgba(244,241,234,.6);padding:6px 0}
.top{position:sticky;top:0;z-index:5;background:rgba(244,241,234,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;min-height:44px;width:110px}
.univers-cyber .brand{color:var(--cyber)}.univers-marketing .brand{color:var(--marketing)}.univers-web .brand{color:var(--web)}
.foot{background:var(--ink);color:var(--bg);border-color:#383836}
.foot-nav a:hover,.copy a:hover{color:var(--bg);text-decoration:underline}
/* Small labels retain the exact accent, with enough weight/size for contrast. */
.u-web .sur{color:var(--ink)}
.univers-web .u-cadre{background:var(--ink);border-top:3px solid var(--web)}
.u-cadre li a{display:inline-block;min-height:32px}
@media(max-width:600px){
 .hero-logo{top:28px;width:112px}
 .slogan{font-size:clamp(2.5rem,10.4vw,3.6rem);max-width:18ch}
 .hero-image{object-position:66% center}
 .s1::before{background:linear-gradient(90deg,rgba(17,17,17,.88),rgba(17,17,17,.36)),linear-gradient(0deg,#111111,transparent 30%)}
 .s2{min-height:85svh}
 .top{padding-top:10px;padding-bottom:8px;gap:0}
 .brand{width:96px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .hero-image{will-change:auto;transform:none!important}
 .reveal{opacity:1;transform:none}
 .s4 li::before,.s5 .big a::after{transform:scaleX(1)}
}


.hero-media{position:absolute;inset:0;z-index:-3;pointer-events:none}