:root {
--style-white: white;
--style-black: black;
--panel-dur: .3s;
--panel-ease: ease-in-out;
}   .nav-item.menu-toggle-item {
display: none;
}
#site-header {
z-index: 10000;
font-size: clamp(0.82rem, 0.85vw, 1rem);
display: flex;
align-items: center;
justify-content: center;
background: var(--style-black);
position: fixed;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
color: var(--style-white);
height: auto;
border-bottom: 1px solid rgba(255,255,255,.08);
box-shadow:
0 1px 0 rgba(34,199,242,.22),
0 10px 24px rgba(0,0,0,.22);
}
#site-header::after {
content: "";
position: absolute;
left: 50%;
bottom: -1px;
transform: translateX(-50%);
width: min(92%, 1600px);
height: 2px;
background:
linear-gradient(
90deg,
rgba(34,199,242,0),
#22C7F2 18%,
#2F6FDB 50%,
#6A2FD8 82%,
rgba(106,47,216,0)
);
box-shadow:
0 0 12px rgba(34,199,242,.35),
0 0 18px rgba(106,47,216,.22);
pointer-events: none;
}
#site-header.is-released {
position: absolute;
}
#site-header::before {
content: "";
position: absolute;
inset: 0;
background: var(--style-white);
transform: translateX(-100%);
transition: transform var(--panel-dur) var(--panel-ease);
pointer-events: none;
}
#site-header > * {
position: relative;
z-index: 2;
}
.is-menu-open #site-header::before {
transform: translateX(0);
}
.is-menu-open #site-header {
color: var(--style-black);
}
#main-nav {
display: flex;
align-items: center;
width: 100%;
max-width: 1920px;
padding: clamp(10px, 1.4svh, 18px) clamp(20px, 3vw, 48px);
}
.main-nav .nav-list {
display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.nav-main-layout {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
width: 100%;
column-gap: clamp(1rem, 2vw, 2.5rem);
}
.nav-logo {
justify-self: start;
display: flex;
align-items: center;
}
.nav-links {
justify-self: center;
display: flex;
align-items: center;
gap: clamp(0.75rem, 1.6vw, 1.8rem);
white-space: nowrap;
}
.nav-contact {
justify-self: end;
display: flex;
align-items: center;
padding-left: clamp(1rem, 2vw, 2.5rem);
}
.nav-links a {
color: inherit;
text-decoration: none;
transition: color var(--panel-dur) var(--panel-ease);
position: relative;
}
.nav-links a::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 2px;
background: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.35s ease;
}
.nav-links a:hover::after {
transform: scaleX(1);
}
body.home .nav-links a:nth-child(1)::after {
transform: scaleX(1);
}
body.page-template-page-mes-realisations .nav-links a:nth-child(6)::after {
transform: scaleX(1);
}
.menu-toggle {
position: relative;
display: inline-flex;
align-items: center;
gap: 14px;
padding: 7px 14px;
border: 2px solid currentColor;
border-radius: 999px;
font-weight: 700;
background: transparent;
cursor: pointer;
color: inherit;
transition: color var(--panel-dur) var(--panel-ease), border-color var(--panel-dur) var(--panel-ease);
}
.menu-toggle .burger {
position: relative;
width: 24px;
height: 16px;
display: inline-flex;
}
.menu-toggle .burger-bar {
position: absolute;
left: 0;
right: 0;
height: 2px;
background: currentColor;
transition: background-color var(--panel-dur) var(--panel-ease), transform .25s ease, opacity .25s ease;
}
.menu-toggle .burger-bar.top { top: 0; }
.menu-toggle .burger-bar.middle { top: 7px; }
.menu-toggle .burger-bar.bottom { bottom: 0; }
.is-menu-open .menu-toggle .burger-bar.top {
transform: translateY(7px) rotate(45deg);
}
.is-menu-open .menu-toggle .burger-bar.middle {
opacity: 0;
}
.is-menu-open .menu-toggle .burger-bar.bottom {
transform: translateY(-7px) rotate(-45deg);
}
.is-menu-open #site-header .menu-toggle {
color: var(--style-black);
border-color: var(--style-black);
}
.menu-panel {
position: fixed;
inset: 0;
width: 100%;
height: 100dvh;
background: var(--style-white);
color: var(--style-black);
transform: translateX(-100%);
transition: transform var(--panel-dur) var(--panel-ease);
will-change: transform;
font-size: clamp(0.9rem, 1.1vw, 1.4rem);
z-index: 1000;
overflow-y: auto;
overscroll-behavior: contain;
}
.is-menu-open .menu-panel {
transform: translateX(0);
}
.menu-panel .panel-list {
list-style: none;
margin: 0;
display: flex;
flex-direction: column;
gap: 24px;
padding: clamp(5.5rem, 12svh, 7rem) 5vw 2rem;
}
.menu-panel .panel-list li a {
text-decoration: none;
color: var(--style-black);
}
.panel-contact {
display: flex;
justify-content: flex-start;
margin-top: clamp(12px, 3vw, 28px);
}
.panel-contact .nav-contact-btn {
border-color: var(--style-black);
color: var(--style-black);
}
.panel-contact .nav-contact-btn__part {
background: var(--style-black);
}
.panel-contact .nav-contact-btn__title {
color: var(--style-black);
}
.panel-contact .nav-contact-btn:hover .nav-contact-btn__title {
color: var(--style-white);
}
.nav-contact-btn {
position: relative;
display: flex;
align-items: center;
width: clamp(165px, 12vw, 210px);
height: 40px;
border: 1px solid rgba(255,255,255,.18);
cursor: pointer;
color: var(--style-white);
overflow: hidden;
text-decoration: none;
flex-direction: row;
border-radius: 999px;
background:
linear-gradient(
180deg,
rgba(255,255,255,.07),
rgba(255,255,255,.02)
);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
0 0 18px rgba(34,199,242,.08);
transition:
border-color .35s ease,
box-shadow .35s ease;
}
.is-menu-open .nav-contact-btn {
border-color: var(--style-black);
color: var(--style-black);
}
.nav-contact-btn::after,
.nav-contact-btn:hover::after {
content: none;
}
.nav-contact-btn__part {
flex: 1;
height: 100%;
background: var(--style-white);
transition: transform 0.5s cubic-bezier(1, 0.49, 0.16, 0.96), background-color var(--panel-dur) var(--panel-ease);
transform-origin: center bottom;
transform: scaleY(0);
}
.is-menu-open .nav-contact-btn__part {
background: var(--style-black);
}
.nav-contact-btn:hover .nav-contact-btn__part {
transform: scaleY(1);
}
.nav-contact-btn__part:nth-child(1)  { transition-delay: 0.02s; }
.nav-contact-btn__part:nth-child(2)  { transition-delay: 0.04s; }
.nav-contact-btn__part:nth-child(3)  { transition-delay: 0.06s; }
.nav-contact-btn__part:nth-child(4)  { transition-delay: 0.08s; }
.nav-contact-btn__part:nth-child(5)  { transition-delay: 0.10s; }
.nav-contact-btn__part:nth-child(6)  { transition-delay: 0.12s; }
.nav-contact-btn__part:nth-child(7)  { transition-delay: 0.14s; }
.nav-contact-btn__part:nth-child(8)  { transition-delay: 0.16s; }
.nav-contact-btn__part:nth-child(9)  { transition-delay: 0.18s; }
.nav-contact-btn__part:nth-child(10) { transition-delay: 0.20s; }
.nav-contact-btn__title {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(0.72rem, 0.7vw, 0.86rem);
font-weight: 700;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
color: var(--style-white);
transition: color var(--panel-dur) var(--panel-ease);
z-index: 2;
}
.is-menu-open .nav-contact-btn__title {
color: var(--style-black);
}
.nav-contact-btn:hover .nav-contact-btn__title {
color: var(--style-black);
transition-delay: 0.4s;
}
.nav-contact-btn:hover {
border-color: rgba(34,199,242,.38);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 0 26px rgba(34,199,242,.16);
}
.is-menu-open .nav-contact-btn:hover .nav-contact-btn__title {
color: var(--style-white);
}   #site-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(6px, 1.2vw, 28px);
background: var(--style-black);
color: var(--style-white);
}
#site-footer .footer-content,
#site-footer .footer-content p,
#site-footer .footer-content .footer-text,
#site-footer .footer-content a,
#site-footer .mention-footer a {
color: inherit;
}
#site-footer .footer-content p .footer-text {
pointer-events: none;
}
#site-footer .footer-content a,
#site-footer .mention-footer a {
text-decoration: none;
transition: all var(--panel-dur) var(--panel-ease);
position: relative;
}
#site-footer .footer-content p a::after,
#site-footer .mention-footer a::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 2px;
background: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.35s ease;
}
#site-footer .footer-content p a:hover::after,
#site-footer .mention-footer a:hover::after {
transform: scaleX(1);
}
.footer-socials {
display: flex;
justify-content: center;
align-items: center;
gap: clamp(1.5rem, 2.5vw, 3.5rem);
padding-top: clamp(0.5rem, 1.5vw, 1.5rem);
padding-bottom: clamp(0.5rem, 1.5vw, 1.5rem);
}
.footer-content {
flex: 1;
text-align: center;
padding: 2svh 0 2svh 0;
font-size: clamp(0.9rem, 1.1vw, 1.4rem);
line-height: 1.35;
color: inherit;
}
.mention-footer {
display: flex;
justify-content: center;
align-items: center;
gap: clamp(0.75rem, 2vw, 2rem);
flex-wrap: wrap;
text-align: center;
}
.footer-left {
width: clamp(28px, 2.5vw, 60px);
}
.footer-socials svg {
width: clamp(14px, 1.5vw, 28px);
height: auto;
}
.footer-socials a {
text-decoration: none !important;
display: flex;
align-items: center;
justify-content: center;
}
.footer-socials a::after {
content: none !important;
}
.footer-socials a:hover {
text-decoration: none !important;
}
.footer-socials a:hover svg {
opacity: 0.7;
transform: scale(1.1);
transition: transform 0.2s ease, opacity 0.2s ease;
}   @property --halo {
syntax: "<number>";
inherits: false;
initial-value: 0.12;
}
@property --stop {
syntax: "<percentage>";
inherits: false;
initial-value: 55%;
}
.back-to-top {
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(44px, 5vw, 110px);
height: clamp(44px, 5vw, 110px);
border-radius: 999px;
background: radial-gradient(circle at center, rgba(138,109,240,var(--halo)) 0%, transparent var(--stop));
transition: --halo 0.4s ease, --stop 0.45s ease;
}
.back-to-top:hover {
--halo: 0.25;
--stop: 65%;
}
.footer-arrow { margin: 0; }
.back-to-top svg {
width: clamp(20px, 2.2vw, 52px);
height: auto;
fill: url(#pathGradient);
filter: drop-shadow(0 0 6px rgba(0,0,0,0.4));
transition: transform .3s ease, filter .3s ease;
}
.back-to-top:hover svg {
transform: translateY(-5px) scale(1.15);
filter: drop-shadow(0 0 14px #8A6DF0) brightness(1.2);
}   @media (max-width: 1024px) {
.nav-contact,
.nav-links {
display: none;
}
.nav-item.menu-toggle-item {
display: block;
}
#site-header {
z-index: 10000;
}
#main-nav {
padding: clamp(10px, 1.4svh, 16px) clamp(18px, 5vw, 32px);
}
.menu-panel .panel-list {
font-size: 1rem;
padding-top: clamp(5rem, 11svh, 6.5rem);
}
}:root {
--android-green: #A4C639;
--brand-cyan:   #22C7F2;
--brand-blue:   #2F6FDB;
--brand-violet: #6A2FD8;
--brand-pink:   #FF2B86;
--grad-brand: linear-gradient(
135deg,
var(--brand-cyan),
var(--brand-blue),
var(--brand-violet),
var(--brand-pink)
);
--glass-bg: rgba(255,255,255,.10);
--glass-stroke: rgba(255,255,255,.10);
--glass-bg-soft: rgba(255,255,255,.06);
--surface-1: rgba(34,199,242,.06);
--surface-2: rgba(106,47,216,.12);
--text-strong: rgba(255,252,225,.96);
--text-muted: rgba(255,252,225,.78);
--radius: 16px;
--shadow-soft: 0 12px 32px rgba(0,0,0,.35);
--shadow-brand: 0 0 24px rgba(34,199,242,.18);
--max: 1260px;
--period: 6000;
--front-start: 0.01;
--front-end: 0.55;
--accent-1: #67D2FF;
--accent-2: #6F8BFF;
--accent-3: #8B64FF;
--accent-grad: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3));
--muted: rgba(255,255,255,.65);
--border: rgba(255,255,255,.08);
--shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 40px rgba(139,100,255,.12);
--svg-w: min(clamp(110px, 22vw, 300px), 28vh);
--svg-h: calc(var(--svg-w) * 217 / 106);
--x-gap: calc(var(--svg-w) * 12 / 106);
}
* {box-sizing: border-box;margin: 0;padding: 0;}
body {
background-color: var(--style-black);
font-family: 'Mori', sans-serif;
color: var(--style-white);
}
body.is-menu-open {
position: static;
width: 100%;
}
html.is-menu-open,
body.is-menu-open {
overflow: hidden;
touch-action: none;
}
html, body {
overscroll-behavior: auto;
overflow-y: auto;
overflow-x: clip;
}
img, svg {max-width: 100%;height: auto;}   #accueil {
display: flex;
width: 100%;
margin: 0 auto;
}
.left,
.right {
height: 100svh;
position: relative;
width: 50%;
}   .globe-bg {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
}
.globe {pointer-events: none;opacity: 0;}   .dot-j, .letter-B, .mask, .push-symbol, .flower {will-change: transform;}
#bonjour-scramble-container {
position: absolute;
left:50%;
top: clamp(7rem, 18svh, 11rem);
width: clamp(14rem, 22vw, 26rem);
transform: translateX(-50%);
max-width: 100svw;
right: auto;
}
.bonjour-container {
display: flex;
transform-style: preserve-3d;
font-size: clamp(2.2rem, 4.6vw, 5.2rem);
font-weight: 600;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
will-change: transform;
line-height: 0.8;
}
.mask, .letter-B {transform-style: preserve-3d;}
.mask {
display: inline-block;
transform-origin: top center;
transform: translateY(100%);
overflow: hidden;
}
.letter-B {
display: inline-block;
transform-origin: center center;
transform: translateY(-100%) rotateX(180deg);
}   .symbol {
position: absolute;
bottom: 60%;
color: #0ff;
font-size: clamp(1.6rem, 4.5vw, 4rem);
display: inline-flex;
gap: 0.1em;
transform: scale(0);
will-change: transform, opacity;
pointer-events: none;
}
.letter-mask {display: flex;gap: 0.05em;overflow: hidden;}
.mask-j {display: inline-block;
overflow: hidden;
height: 1.2lh;
position: relative;
line-height: 0.8;
}
.o, .n, .j, .o-bis {position: relative;}
.letter-o, .letter-o-bis, .letter-n, .letter-j {display: inline-block;will-change: transform;}
.letter-o, .letter-o-bis {transform: translateY(100%);}
.letter-n {transform: translateY(-100%);}
.letter-j {
transform: translateX(-100%);
position: relative;
}
.dot-j {
position: absolute;
top: 50%;
left: 50%;
background-color: var(--style-white);;
border-radius: 50%;
font-size: 0;
transform-origin: center;
pointer-events: none;
transform: translate(-50%, -50%) scale(0);
}   .flower {
position: absolute;
width: auto;
height: auto;
pointer-events: none;
bottom: 90%;
transform-origin: center;
contain: layout style paint;
transform: translateX(-350%);
opacity: 0;
}
.petal {
position: absolute;
width: 50%;
height: 50%;
background: conic-gradient(from 45deg at center, #f44, #fc3, #3c3);
border-top-right-radius: 50px;
transform-origin: bottom right;
}
.rotate-0, .rotate-90, .rotate-180, .rotate-270 {top: 0;left: 0;}
.rotate-0   { transform: rotate(0deg); }
.rotate-90  { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }
.rotate-270 { transform: rotate(270deg); }   .push-wrapper {
position: absolute;
width: 1em;
height: 100%;
left: 0;
overflow: hidden;
}
.push-symbol {
position: absolute;
transform: scale(0);
left: -10%;
top: 10%;
font-family: 'Courier New', monospace;
opacity: 0;
color: #7CFC00;
text-shadow: 0 0 10px #7CFC00;
transform-origin: center;
}
.groupe {position: absolute;}
.mask-letter {display: inline-block;overflow: hidden;}
.number-1, .number-0, .number-0-bis, .letter-u, .letter-r {display: inline-block;transform: translateY(110%);}
.letter-comma {
display: inline-block;
transform-origin: center center;
transform: scale(0) rotate(0);
}   h1.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
font-size: 2rem;
margin-block: 0.67em;
}
#scramble-container {
margin-top: clamp(0.5rem, 2vw, 2rem);
font-weight: 500;
font-size: clamp(0.95rem, 2.4vw, 2rem);
z-index: 1;
line-height: 1.2;
}
#line-3 {font-weight: 600;}
.scramble-line {position: relative;white-space: nowrap;}
.scramble-text {display: inline-block;}
#cursor-icon {
position: absolute;
pointer-events: none;
font-weight: 600;
opacity: 0;
display: inline-block;
color: var(--style-white);;
width: 1em;
height: 1em;
}
#cursor-icon.final{ color:#7CFC00; animation:none; }
@keyframes blink {
0%, 100% { opacity: 1; }
50%      { opacity: 0; }
}
#cursor-icon.blink{ animation:blink 1s steps(2,start) infinite; }   .accolades-container {
bottom: 6svh;
left: 50%;
transform: translateX(-50%);
position: absolute;
width: clamp(12rem, 56vw, 30rem);
height: clamp(4rem, 10vw, 8rem);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.2;
}
.accolade {
width: clamp(0.6rem, 1.9vw, 1.9rem);
fill: var(--style-white);
opacity: 0;
}
.accolade-left {
position: relative;
margin-right: clamp(0.4rem, 1vw, 1rem);
top: 0;
transform: none;
}
.accolade-right {
position: relative;
margin-left: clamp(0.4rem, 1vw, 1rem);
top: 0;
transform: none;
}
.pop-text {
font-size: clamp(0.35rem, 1.45vw, 1.1rem);
text-align: left;
margin: 0;
}
.pop-text-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 100%;
transform: scale(0.2);
will-change: transform;
opacity: 0;
position: relative;
padding: 0 0.5rem;
}
.quote-author {
margin-left: auto;
margin-top: 0.3rem;
font-style: italic;
font-size: clamp(0.3rem, 1.2vw, 0.95rem);
opacity: 0.8;
}   .terminal {
position: absolute;
top: clamp(7rem, 18svh, 11rem);
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
background: #0f162e;
border: 2px solid #00f0ff;
border-radius: 15px;
padding: 1rem;
box-shadow: 0 0 20px #00f0ff40;
color: #7CFC00;
font-family: 'Courier New', monospace;
width: clamp(17rem, 27vw, 31rem);
height: clamp(10.5rem, 14vw, 17rem);
filter: url(#glitchFilter);
opacity: 0;
}
.terminal.glow {box-shadow: 0 0 20px #7CFC00;animation: pulseGlow 2s ease-in-out infinite;}
@keyframes pulseGlow {
0%, 100% {
box-shadow: 0 0 10px rgba(0, 255, 100, 0.6);
}
50% {
box-shadow: 0 0 30px #7CFC00;
}
}
.header {display: flex;gap: 8px;}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.red   { background: #f44; }
.yellow { background: #fc3; }
.green { background: #3c3; }
.terminal-body {
display: flex;
flex-direction: column;
justify-content: space-evenly;
height: 100%;
font-size: clamp(0.9rem, 1.05vw, 1.25rem);
}
.progress-bar {
border: 2px solid #00f0ff;
border-radius: 10px;
overflow: hidden;
height: clamp(30px, 4vw, 40px);
background: #021;
opacity: 0;
transition: opacity .4s ease;
}
.progress-fill {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 0;
background: linear-gradient(90deg,#22ddee,#38f8b4);
text-align: center;
font-weight: bold;
color: #000;
transform-origin: left center;
}
.final-text {opacity: 0;transition: opacity .3s ease;}   canvas#matrix-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.8;
}   .container-robot {
display: inline-block;
overflow: hidden;
position: absolute;
bottom: clamp(80px, 8vw, 130px);
left: 0;
height: clamp(100px, 9vw, 165px);
width: 100%;
}
.robot-apk {
position: absolute;
width: clamp(105px, 10vw, 165px);
transform: translateX(-100%);
bottom: 0;
height: auto;
opacity: 0;
}
#marqueur-apk {
position: absolute;
border-radius: 50%;
bottom: 0;
width: 10px;
height: 10px;
}   #qui-suis-je{display: flex;height: 100svh; background-color: var(--style-white); color: var(--style-black)}
#textRobot {
display: flex;
flex-direction: column;
width: 75%;
max-width: 100vw;
justify-content: space-evenly;
align-items: center;
opacity: 0;
gap:2rem;
}
#pin-windmill-container {
flex: 0 0 auto;
height: 100svh;
position: relative;
width: 25%;
}
#pin-windmill-wrap {
position: relative;
top: calc(clamp(140px, 13vw, 250px) * -0.52);
}
#pin-windmill {
display: flex;
align-items: center;
justify-content: end;
height: 100%;
}
#pin-windmill-svg {
width: clamp(140px, 13vw, 250px);
height: clamp(140px, 13vw, 250px);
will-change: transform;
}
.pin_marker_start,
.pin_marker_end {
right: 0;
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
pointer-events: none;
color: var(--style-white);
z-index: 10;
}
.pin_marker_start { top: 0; transform: translateY(-100%)}
.pin_marker_end   { bottom: 0; transform: translateY(100%); }
.pin_marker_start svg,
.pin_marker_end svg,
.robot-line {
width: clamp(30px, 5vw, 60px);
height: clamp(2px, 0.5vw, 4px);
flex-shrink: 0;
}
.text-start, .text-end { font-size: clamp(0.7rem, 1.5vw, 1rem);}
.quote-container {
display: flex;
align-items: stretch;
justify-content: center;
gap: clamp(0.5rem, 2vw, 1rem);
}
.quote-left {display: flex;align-items: flex-start;}
.quote-right {display: flex;align-items: flex-end;}
.quote-left svg, .quote-right svg {width: clamp(12px, 3vw, 36px);height: auto; opacity: 0}
.whoa-text {
font-family: 'Mori', sans-serif;
font-weight: 500;
overflow: hidden;
font-size: clamp(0.9rem, 2.3vw, 2rem);
line-height: 1.4;
}
.whoa-text .char {
display: inline-block;
transform: translateX(60px);
opacity: 0;
will-change: transform, opacity;
}
.split-line {display: block;overflow: hidden;}
.animated-text-section, .animated-second-text-section {
font-family: 'Mori', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
font-size: clamp(0.8rem, 1.8vw, 1.5rem);
line-height: 1.4;
gap: clamp(0.5rem, 1.5vw, 1rem);
visibility: hidden;
}
.animated-text-section { flex: 1 1 0;}
.animated-second-text-section {text-align: center;}
.line-group {
display: inline;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin: 0;
}
.splitLines {
display: inline-block;
font-weight: 500;
letter-spacing: 0.02em;
}
.split-line .char {display: inline-block;will-change: transform, opacity;}
.virgule {margin-left: -1rem;}
#textSection {
display: flex;
justify-content: space-between;
width: 100%;
gap: clamp(2rem, 5vw, 4rem);
}
.morphSVG {
display: flex;
justify-content: center;
align-items: center;
}
#maintenance {opacity: 0;}
.animated-text-section .virgule,
.animated-second-text-section .virgule{
display: inline;
margin-left: -0.25em;
}
.animated-text-section .point,
.animated-second-text-section .point{
display: inline;
margin-left: -0.25em;
}   .label {
position: absolute;
top: 0;
left: 0;
width: clamp(12vw, 18vw, 24vw);
font-family: 'Mori', sans-serif;
text-align: center;
color: var(--style-white);
font-size: clamp(0.5rem, 1vw + 0.2rem, 2.5rem);
font-weight: 400;
background: linear-gradient(to right, #4EDAF7, #8A6DF0, #C583F7);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 0;
pointer-events: none;
display: inline-block;
vertical-align: top;
line-height: 1;
padding: 0.5rem;
}
.label span {
font-family: 'Mori', sans-serif;
font-size: clamp(0.5rem, 1vw + 0.2rem, 2.5rem);
font-weight: 400;
display: block;
margin-top: 0.4rem;
}
#aeronautic,
#technicien,
#dev,
#avatar {
position: absolute;
transform-origin: center;
pointer-events: none;
opacity: 0;
}
.intro-text {
font-size: clamp(0.7rem, 1.2vw + 0.5rem, 3.6rem);
padding-top: 10svh;
opacity: 0;
transform: translateY(70px);
}
#plane {
transform-origin: center;
transform-box: fill-box;
}
#plane path {
filter:
drop-shadow(0 8px 6px rgba(0,0,0,0.4))
drop-shadow(0 20px 20px rgba(0,0,0,0.6));
}
#mon-parcours {
position: relative;
min-height: 100svh;
text-align: center;
overflow: hidden;
}
#mon-parcours svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
.scroll-plane-path svg,
.scroll-plane svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
#mon-parcours .scroll-plane-path,
#mon-parcours .scroll-plane {
position: absolute;
inset: 0;
pointer-events: none;
}
#plane,
#corePath,
#topPath,
#bottomPath,
#trailPath {
opacity: 0;
}   .comp-dev,
.comp-mobile {
width: 100%;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: clamp(1.5rem, 5vw, 3rem);
padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) clamp(2rem, 5vw, 4rem);
}
#mes-competences {
background-color: var(--style-white);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: var(--style-black);
}
.main-title {
font-size: clamp(1.8rem, 4vw + 0.5rem, 3.2rem);
text-align: center;
}
.content {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: clamp(1rem, 3vw, 2rem);
max-width: 1200px;
width: 100%;
}
.content .image {
flex: 2 1 400px;
min-width: 260px;
border-radius: 28px;
overflow: hidden;
border: 1px solid #D8D0BF;
background: #F3EFE6;
box-shadow:
0 18px 40px rgba(20, 9, 31, 0.18),
0 6px 14px rgba(20, 9, 31, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.6),
inset 0 -2px 6px rgba(20, 9, 31, 0.05);
}
.content .image img {
display: block;
width: 100%;
height: auto;
border-radius: 0;
}
.content .text-box {
font-family: 'Courier New', monospace;
background: #0b0f1a;
border: 1px solid #00f0ff;
border-radius: 12px;
padding: clamp(18px, 2.5vw, 36px);
color: #7CFC00;
box-shadow:
0 0 20px rgba(0,255,255,0.25),
inset 0 0 10px rgba(0,255,255,0.15);
position: relative;
}
.content .text-box::before {
content: "SYSTEM.LOG";
position: absolute;
top: -10px;
left: 15px;
font-size: 10px;
color: #00f0ff;
background: #0b0f1a;
padding: 0 6px;
}
.content .text-box:hover::before {
opacity: 1;
}
.icons {
display: flex;
gap: clamp(1.25rem, 5vw, 3rem);
justify-content: center;
flex-wrap: wrap;
width: min(80%, 1100px);
}
.icons li {
list-style: none;
font-size: clamp(1.6rem, 3.2vw, 2.2rem);
color: var(--style-black);
display: flex;
justify-content: center;
align-items: center;
}
.icons li svg {
width: 1em;
height: 1em;
fill: var(--style-black);
}   #processus{
width: 100%;
min-height: 100svh;
height: auto;
margin: 0;
padding: clamp(3rem, 7svh, 5rem) 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: var(--style-black);
color: var(--style-white);
}
.processus-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: clamp(1.2rem, 2.5vw, 2.2rem);
margin-bottom: clamp(1.6rem, 3.5svh, 3rem);
padding-inline: 1rem;
}
.processus-title{
width: min(900px, 96vw);
font-size: clamp(28px, 4vw, 50px);
font-weight: 700;
line-height: 1.15;
text-align: center;
background: var(--accent-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 0 14px rgba(111,139,255,.15));
}
.processus-subtitle {
width: min(900px, 96vw);
font-size: clamp(20px, 3vw, 26px);
line-height: 1.6;
color: var(--style-white);
opacity: 0.95;
text-align: center;
}
#processus .wrap{
width: min(900px, 96vw);
margin: 0 auto;
color: var(--style-white);
display: grid;
grid-template-columns: var(--svg-w) minmax(0, 1fr);
column-gap: var(--x-gap);
align-items: center;
}
#flow-svg{
width: 100%;
height: auto;
display: block;
overflow: visible;
align-self: center;
}
.flow-right{
position: relative;
height: var(--svg-h);
display: grid;
grid-template-rows: repeat(5, 1fr);
box-sizing: border-box;
padding-bottom: calc(var(--svg-h) * 7 / 217);
min-width: 0;
}
.step-text{
display: grid;
grid-template-columns: clamp(160px, 32%, 260px) minmax(0, 1fr);
column-gap: clamp(12px, 2.2vw, 28px);
align-items: center;
opacity: 1;
visibility: visible;
font-size: clamp(12px, 1.2vw, 15px);
line-height: 1.45;
min-width: 0;
}
.step-text strong{
display: block;
font-weight: 700;
font-size: clamp(13px, 1.35vw, 16px);
line-height: 1.15;
font-variant-numeric: tabular-nums;
}
.step-text br{
display: none;
}
#tube2,
#tube3,
#tube4,
#tube5,
#tube6{
stroke: #8FA3B8;
}
[id^="ligne"]{
stroke-width: 0.9;
}
[id^="tete"]{
stroke-width: 0.9;
}
#processus .processus-subtitle { opacity: 0; }
#processus .processus-title { opacity: 0; }
#processus .step-text { opacity: 0; }
#flow-svg [id^="platform"],
#flow-svg #design,
#flow-svg #process-dev,
#flow-svg #test,
#flow-svg #deploy,
#flow-svg #tube2,
#flow-svg #tube3,
#flow-svg #tube4,
#flow-svg #tube5,
#flow-svg #tube6,
#flow-svg #shadow,
#flow-svg [id^="tete"],
#flow-svg [id^="ligne"]{
opacity: 0;
}   .field-error {
font-size: .85rem;
color: #ff3b4f;
margin-top: .25rem;
}
.contact-section {
width: 100%;
min-height: 100svh;
height: auto;
padding-top: 7svh;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
background: var(--style-white);
color: var(--style-black);
}
#contact .contact-title,
#contact .contact-subtitle,
#contact .contact-form {
opacity: 0;
}
.contact-wrap {
width: min(1100px, 90%);
margin: 0 auto;
}
.title-contact-section {
position: relative;
}
.contact-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: clamp(1.4rem, 3vw, 2.4rem);
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.contact-title {
line-height: 1.1;
font-size: clamp(34px, 5vw, 64px);
font-weight: 700;
text-align: center;
background: var(--accent-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
white-space: pre-line;
}
.contact-subtitle {
width: min(820px, 96vw);
font-size: clamp(18px, 2vw, 24px);
line-height: 1.6;
color: rgba(14,16,15,.74);
text-align: center;
}
.contact-form {
display: grid;
gap: clamp(16px, 2vw, 20px);
grid-template-columns: 1fr 1fr;
position: relative;
background: #e4ebf5;
border: 2px solid rgba(14,16,15,.88);
border-radius: 22px;
padding: clamp(22px, 3vw, 36px);
box-shadow:
10px 10px 0 rgba(14,16,15,.95),
0 20px 50px rgba(14,16,15,.10);
color: var(--style-black);
overflow: hidden;
}
.contact-form::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 6px;
background: var(--accent-grad);
}
.contact-form .hp-input {
position: absolute;
left: -10000px;
opacity: 0;
}
.contact-form .field {
display: flex;
flex-direction: column;
gap: 8px;
}
.contact-form .field--half {
grid-column: span 1;
}
.contact-form .field--full {
grid-column: 1 / -1;
}
.contact-form .field:has(#first_name) {
grid-column: 1 / 2;
grid-row: 1;
}
.contact-form .field:has(#last_name) {
grid-column: 2 / 3;
grid-row: 1;
}
.contact-form .field:has(#email) {
grid-column: 1 / 2;
grid-row: 2;
}
.contact-form .field:has(#subject) {
grid-column: 1 / 2;
grid-row: 3;
}
.contact-form .field:has(#message) {
grid-column: 1 / -1;
grid-row: 4;
}
.contact-form label {
font-size: clamp(.92rem, .45vw + .6rem, 1rem);
font-weight: 700;
letter-spacing: .01em;
color: var(--style-black);
}
.contact-form input,
.contact-form textarea {
width: 100%;
background: var(--style-white);
border: 2px solid rgba(14,16,15,.22);
border-radius: 14px;
padding: 14px 16px;
color: var(--style-black);
outline: none;
font-family: inherit;
transition:
border-color .25s ease,
background .25s ease,
box-shadow .25s ease,
transform .18s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: rgba(14,16,15,.42);
}
.contact-form input:hover,
.contact-form textarea:hover {
background: var(--style-white);
border-color: rgba(47,111,219,.68);
box-shadow:
inset 0 2px 4px rgba(14,16,15,.04),
0 0 0 3px rgba(47,111,219,.06);
}
.contact-form input:focus,
.contact-form textarea:focus {
background: var(--style-white);
border-color: var(--brand-cyan);
box-shadow:
0 0 0 4px rgba(34,199,242,.20),
0 10px 22px rgba(47,111,219,.12),
inset 0 1px 2px rgba(255,255,255,.55);
transform: translateY(-1px);
}
.contact-form textarea {
resize: vertical;
min-height: 180px;
}
.actions {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 14px;
padding-top: .5rem;
}
.actions .btn {
min-width: 170px;
height: 54px;
padding: 0 32px;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
border: 2px solid rgba(14,16,15,.95);
border-radius: 14px;
background-color: var(--style-black);
background-image: var(--accent-grad);
background-repeat: no-repeat;
background-position: left center;
background-size: 0% 100%;
color: var(--style-white);
font-size: 1rem;
font-weight: 700;
letter-spacing: .01em;
text-decoration: none;
cursor: pointer;
box-shadow: 6px 6px 0 var(--brand-cyan);
transition:
transform .18s ease,
box-shadow .25s ease,
background-size .28s cubic-bezier(.22,.61,.36,1);
}
.actions .btn::before,
.actions .btn::after {
content: none;
}
.actions .btn:hover {
transform: translate(-2px, -2px);
background-size: 100% 100%;
box-shadow: 10px 10px 0 rgba(14,16,15,.95);
}
.actions .btn:active {
transform: translate(0,0);
}
#contact-feedback {
font-size: .95rem;
color: rgba(14,16,15,.72);
min-height: 1.2em;
}
.contact-lottie-overlay {
position: fixed;
inset: 0;
background: rgba(10,12,18,.78);
backdrop-filter: blur(5px);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
pointer-events: none;
opacity: 0;
}
.contact-lottie-inner {
background: rgba(14,16,15,.96);
border: 1px solid rgba(255,255,255,.08);
border-radius: 18px;
padding: 28px 30px 18px;
width: min(360px, 92vw);
text-align: center;
box-shadow: 0 20px 55px rgba(0,0,0,.42);
}
.lottie-box {
width: 200px;
height: 200px;
margin: 0 auto 10px;
}
.lottie-success-text {
color: var(--style-white);
font-weight: 600;
letter-spacing: .01em;
font-size: .98rem;
}   .glow-on-hover {
margin: clamp(40px, 8svh, 80px) auto;
display: flex;
justify-content: center;
align-items: center;
width: 250px;
height: 50px;
border: none;
outline: none;
color: #fffce1;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
gap: 14px;
border-radius: 10px;
font-size: 14px;
letter-spacing: 0.5px;
text-decoration: none;
}
.glow-on-hover:before {
content: '';
position: absolute;
top: -2px;
left: -2px;
width: calc(100% + 4px);
height: calc(100% + 4px);
background: linear-gradient(
45deg,
#1AC1F6,
#2485EA,
#563EDD,
#8523D1,
#E70F9A,
#1AC1F6
);
background-size: 400%;
filter: blur(5px);
border-radius: 10px;
z-index: -1;
animation: glowing 20s linear infinite;
transition: filter 0.3s ease, transform 0.3s ease;
}
.glow-on-hover:hover:before {
filter: blur(8px);
transform: scale(1.05);
}
.glow-on-hover:after {
content: '';
position: absolute;
inset: 0;
background: #111;
border-radius: 10px;
z-index: -1;
}
@keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
.arrow-rail {
display: flex;
align-items: center;
gap: 4px;
height: 16px;
pointer-events: none;
}
.chev {
width: 12px;
height: 12px;
display: block;
animation: chev-pulse 1.3s ease-in-out infinite;
}
.chev:nth-child(2) { animation-delay: 0.12s; }
.chev:nth-child(3) { animation-delay: 0.24s; }
.chev polyline {
fill: none;
stroke: #fffce1;
stroke-width: 12;
stroke-linecap: round;
stroke-linejoin: round;
filter:
drop-shadow(0 0 3px rgba(255,252,225,0.9))
drop-shadow(0 0 10px rgba(255,252,225,0.6))
drop-shadow(0 0 18px rgba(255,252,225,0.35));
}
@keyframes chev-pulse {
0%   { opacity: 0; transform: translateX(0); }
50%  { opacity: 1; transform: translateX(2px); }
100% { opacity: 0; transform: translateX(0); }
}   @media (orientation: portrait) {
#accueil {
display: flex;
flex-direction: column;
padding-top: clamp(72px, 8svh, 110px);
}
.left {
width: 100%;
height: 100svh;
overflow: hidden;
}
.right {
width: 100%;
height: 100svh;
}
#bonjour-scramble-container {
top: clamp(7.5rem, 18svh, 10rem);
width: clamp(18rem, 82vw, 26rem);
}
.bonjour-container {
font-size: clamp(3.4rem, 10vw, 5.2rem);
}
#scramble-container {
font-size: clamp(1.2rem, 4.4vw, 2rem);
}
#globe-anchor {
top: 52% !important;
}
.accolades-container {
bottom: clamp(8rem, 18svh, 11rem);
width: min(82vw, 30rem);
height: auto;
}
.accolade {
width: clamp(0.9rem, 3.6vw, 1.4rem);
}
.pop-text {
font-size: clamp(0.85rem, 3.2vw, 1.1rem);
}
.quote-author {
font-size: clamp(0.8rem, 2.8vw, 0.95rem);
}
#textRobot {
width: 72%;
padding-inline: clamp(1rem, 4vw, 2rem);
gap: clamp(0.75rem, 2svh, 1.5rem);
}
#pin-windmill-container {
width: 28%;
}
#textSection {
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
gap: clamp(0.7rem, 1.6svh, 1.2rem);
}
.animated-text-section,
.animated-second-text-section {
width: min(100%, 34rem);
margin-inline: auto;
align-items: center;
text-align: center;
font-size: clamp(0.78rem, 3.1vw, 1rem);
line-height: 1.25;
gap: clamp(0.28rem, 0.8svh, 0.55rem);
}
.line-group {
display: block;
width: 100%;
text-align: center;
}
.morphSVG {
width: 100%;
min-height: clamp(90px, 16svh, 150px);
display: flex;
align-items: center;
justify-content: center;
}
.morphSVG svg {
width: clamp(120px, 34vw, 190px);
height: auto;
}
}
@media (max-height: 520px) and (orientation: landscape) {
#textRobot {
gap: clamp(0.5rem, 1.5svh, 1rem);
}
.whoa-text {
font-size: clamp(0.78rem, 1.8vw, 1.15rem);
line-height: 1.25;
}
#textSection {
gap: clamp(1rem, 3vw, 2rem);
}
.animated-text-section,
.animated-second-text-section {
font-size: clamp(0.68rem, 1.45vw, 0.95rem);
line-height: 1.2;
gap: clamp(0.25rem, 0.8svh, 0.5rem);
}
.morphSVG svg {
width: clamp(110px, 12vw, 170px);
height: auto;
}
} @media (orientation: portrait) {
#processus{
padding-block: clamp(3rem, 6svh, 5rem);
}
#processus .wrap{
width: min(760px, 94vw);
}
.processus-subtitle{
font-size: clamp(16px, 3.8vw, 22px);
line-height: 1.45;
}
.step-text{
grid-template-columns: clamp(118px, 38%, 190px) minmax(0, 1fr);
column-gap: clamp(8px, 2.4vw, 16px);
font-size: clamp(10px, 2.2vw, 13px);
line-height: 1.25;
}
.step-text strong{
font-size: clamp(10.5px, 2.4vw, 13.5px);
}
} @media (max-width: 480px) and (orientation: portrait) {
#processus .wrap{
width: 96vw;
}
.step-text{
grid-template-columns: clamp(104px, 40%, 136px) minmax(0, 1fr);
column-gap: 8px;
font-size: clamp(9.2px, 2.45vw, 11px);
line-height: 1.18;
}
.step-text strong{
font-size: clamp(9.8px, 2.6vw, 11.5px);
}
} @media (max-height: 520px) and (orientation: landscape) {
#processus{
min-height: auto;
padding-block: clamp(2rem, 6svh, 3rem);
}
.processus-header{
gap: clamp(0.7rem, 2svh, 1.2rem);
margin-bottom: clamp(1rem, 3svh, 1.8rem);
}
.processus-title{
font-size: clamp(24px, 4.8svh, 34px);
}
.processus-subtitle{
font-size: clamp(13px, 2.7svh, 17px);
line-height: 1.35;
}
#processus .wrap{
width: min(860px, 94vw);
}
.step-text{
grid-template-columns: clamp(130px, 34%, 210px) minmax(0, 1fr);
font-size: clamp(9.5px, 2.2svh, 12px);
line-height: 1.2;
}
.step-text strong{
font-size: clamp(10px, 2.4svh, 13px);
}
}