/* ========================= BASE ========================== */

*{box-sizing:border-box;margin:0;padding:0}

/* ========================= COULEURS ========================== */

:root{
--bg:#030504;
--panel:#0b0e0d;
--panel2:#101514;
--text:#f3f5f2;
--muted:#a6ada8;
--soft:#6f7772;
--line:rgba(255,255,255,.11);
--green:#28d6a0;
--green2:#89ffd5;
--orange:#d98a32;
}

/* ========================= PAGE ========================== */

html,body{
width:100%;
min-height:100%;
overflow:hidden;
background:var(--bg);
color:var(--text);
font-family:Arial,Helvetica,sans-serif;
}

body{
background:
radial-gradient(circle at 14% 22%,rgba(40,214,160,.11),transparent 28%),
radial-gradient(circle at 80% 78%,rgba(255,255,255,.035),transparent 26%),
linear-gradient(135deg,#020302,#070908 55%,#020302);
}

.lp-shell{
width:100vw;
height:100vh;
position:relative;
overflow:hidden;
}

/* ========================= AMBIANCE ========================== */

.ambient{
position:absolute;
width:42vw;
height:42vw;
border-radius:50%;
filter:blur(70px);
opacity:.18;
pointer-events:none;
animation:drift 14s ease-in-out infinite alternate;
}

.ambient-a{background:var(--green);left:-20vw;top:24vh}
.ambient-b{background:#ffffff;right:-24vw;bottom:-20vw;animation-delay:2s;opacity:.08}

@keyframes drift{
from{transform:translate3d(0,0,0) scale(1)}
to{transform:translate3d(7vw,-4vh,0) scale(1.18)}
}

/* ========================= ACCUEIL ========================== */

.home-stage{
width:100%;
height:100%;
position:relative;
padding-top:110px;
padding-bottom:92px;
}

/* ========================= IDENTITE ========================== */

.identity-fixed{
position:absolute;
z-index:10;
top:30px;
left:50%;
transform:translateX(-50%);
width:1200px;
max-width:90vw;
text-align:center;
pointer-events:none;
}

/* ========================= SIGNATURE ========================== */

.signature-wrap{
width:100%;
display:flex;
justify-content:center;
align-items:center;
}

.signature-img{
width:800px;
max-width:100%;
height:auto;
display:block;
filter:drop-shadow(0 0 28px rgba(40,214,160,.10));
user-select:none;
pointer-events:none;
}

/* ========================= BASELINE ========================== */

.baseline{
margin-top:-70px;
color:var(--muted);
font-size:12px;
letter-spacing:.18em;
text-transform:uppercase;
font-weight:600;
}

.accent-dot{color:var(--green2);}

.meta-line{
margin-top:12px;
color:var(--muted);
font-size:12px;
letter-spacing:.18em;
}

/* ========================= TITRES ========================== */

h1,h2{
font-size:clamp(35px,4.7vw,70px);
line-height:.93;
letter-spacing:-.055em;
max-width:860px;
}

/* ========================= PRESENTATION ========================== */

.lead{
margin-top:22px;
max-width:760px;
color:var(--muted);
font-size:clamp(16px,1.45vw,21px);
line-height:1.65;
}

.chips{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:24px;
}

.chips span{
color:var(--text);
border:1px solid var(--line);
background:rgba(255,255,255,.025);
padding:9px 12px;
font-size:12px;
letter-spacing:.12em;
}

/* ========================= PROJETS ========================== */

.project-hub{
margin-top:55px;
display:flex;
align-items:center;
gap:34px;
flex-wrap:wrap;
}

.project-icon{
width:122px;
height:122px;
flex:0 0 122px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
text-decoration:none;
}

.project-icon img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}

/* ========================= SERVICES ========================== */

.service-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
margin-top:28px;
}

.service-grid div{
padding:20px 16px;
border-left:1px solid rgba(40,214,160,.30);
background:linear-gradient(90deg,rgba(40,214,160,.05),transparent);
}

.service-grid strong{
display:block;
font-size:15px;
text-transform:uppercase;
letter-spacing:.13em;
color:var(--text);
margin-bottom:9px;
}

.service-grid span{
color:var(--muted);
line-height:1.55;
font-size:14px;
}

.note{
margin-top:20px;
color:var(--soft);
font-size:14px;
}

/* ========================= ACTUALITES ========================== */

.updates{
margin-top:40px;
display:grid;
gap:15px;
max-width:780px;
margin-left:40px;
}

.updates div{
display:grid;
grid-template-columns:270px 1fr 55px;
gap:16px;
align-items:center;
}

.updates span{
color:var(--muted);
font-size:13px;
text-transform:uppercase;
letter-spacing:.12em;
}

.updates i{
height:2px;
background:rgba(255,255,255,.12);
position:relative;
overflow:hidden;
}

.updates i::before{
content:"";
position:absolute;
inset:0 auto 0 0;
width:var(--w);
background:linear-gradient(90deg,var(--green),var(--green2));
box-shadow:0 0 16px rgba(40,214,160,.45);
}

.updates b{
color:var(--green2);
font-size:13px;
}

/* ========================= ACTUALITES JAUNE ========================== */

.updates .low i::before{
background:linear-gradient(90deg,#D6A900,#FFD84A);
box-shadow:0 0 10px rgba(255,216,74,.22);
}

.updates .low b{
color:#FFD84A;
}

/* ========================= CONTACT ========================== */

.contact-hub{
margin-top:25px;
display:flex;
align-items:center;
justify-content:center;
gap:60px;
transform:translateX(-30px);
}

.contact-photo{
width:240px;
height:240px;
object-fit:contain;
border-radius:0;
display:block;
}

.contact-links{
display:flex;
flex-direction:column;
gap:14px;
}

.contact-links a{
width:150px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.025);
color:var(--green2);
text-decoration:none;
font-size:12px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
}

.contact-links a:visited{
color:var(--green2);
}

.contact-links a:hover{
border-color:rgba(0,140,255,.45);
color:#008CFF;
background:rgba(0,140,255,.05);
}

/* ========================= FOOTER ========================== */

.contact-strip{
position:absolute;
z-index:15;
left:32px;
right:32px;
bottom:40px;
height:58px;
border:1px solid var(--line);
background:rgba(5,7,6,.60);
backdrop-filter:blur(14px);
display:flex;
justify-content:center;
align-items:center;
gap:10px;
color:var(--muted);
font-size:12px;
letter-spacing:.08em;
box-shadow:0 18px 60px rgba(0,0,0,.28);
}

.contact-strip a{
color:var(--green2);
text-decoration:none;
font-weight:700;
}

.contact-strip a:visited{color:var(--green2);}
.contact-strip a:hover{color:#008CFF;}

/* ========================= ANCIEN FOOTER ========================== */

.footer{
position:absolute;
z-index:15;
left:0;
right:0;
bottom:20px;
text-align:center;
color:var(--soft);
font-size:11px;
letter-spacing:.08em;
}

.footer a{
color:var(--green2);
text-decoration:none;
}

.footer a:hover{
color:#b84a4a;
text-decoration:none;
}

/* ========================= PAGES INTERNES ========================== */

.page-main{
height:100vh;
padding:130px 7vw 90px;
overflow:auto;
}

.page-panel{
width:min(1080px,90vw);
margin:0 auto;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding:42px 0;
}

.page-panel h1{margin-bottom:24px;}

.page-panel p{
color:var(--muted);
max-width:760px;
line-height:1.7;
}

.page-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin-top:28px;
}

.page-card{
border:1px solid var(--line);
background:rgba(255,255,255,.025);
padding:22px;
}

.page-card strong{
display:block;
color:var(--green2);
margin-bottom:10px;
}

.page-card span{
color:var(--muted);
line-height:1.55;
}

/* ========================= NAVIGATION PAGES ========================== */

.page-navigation{
display:flex;
align-items:center;
justify-content:space-between;
margin:32px 0 -26px;
}

/* ========================= LIEN PAGE ========================== */

.page-more{
display:block;
width:max-content;
margin:0;
color:var(--green2);
font-size:12px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.12em;
text-decoration:none;
}

.page-more:hover{
color:#0074D4;
}

.page-more .link-arrow{
display:inline-block;
font-size:22px;
line-height:1;
vertical-align:middle;
transform:translateY(-3.5px);
}

/* ========================= FORMULAIRE ========================== */

.contact-form{
display:grid;
gap:14px;
max-width:680px;
margin-top:28px;
}

.contact-form input,
.contact-form textarea{
width:100%;
border:1px solid var(--line);
background:#060807;
color:var(--text);
padding:14px;
font:inherit;
}

.contact-form textarea{min-height:170px;}

.btn{
border:1px solid rgba(40,214,160,.45);
background:rgba(40,214,160,.08);
color:var(--green2);
padding:13px 18px;
cursor:pointer;
font-weight:800;
}
/* ========================= RESPONSIVE ========================== */

@media(max-width:800px){

html,body{
width:100%;
height:100%;
min-height:100%;
overflow:hidden;
}

.lp-shell{
width:100%;
height:100vh;
min-height:100vh;
overflow:hidden;
}

/* ========================= RESPONSIVE ACCUEIL ========================== */

.home-stage{
width:100%;
height:100%;
padding:0;
}

/* ========================= RESPONSIVE IDENTITE ========================== */

.identity-fixed{
position:absolute;
top:74px;
left:50%;
transform:translateX(-50%);
width:100%;
max-width:100%;
margin:0;
padding:0 20px;
}

.signature-img{
width:440px;
max-width:90vw;
}

.baseline{
margin-top:-38px;
font-size:9px;
letter-spacing:.12em;
}

.meta-line{
margin-top:7px;
font-size:9px;
letter-spacing:.12em;
}

/* ========================= RESPONSIVE TITRES ========================== */

h1,h2{
font-size:clamp(36px,11vw,54px);
line-height:.96;
max-width:100%;
}

/* ========================= RESPONSIVE PRESENTATION ========================== */

.lead{
margin-top:18px;
max-width:100%;
font-size:16px;
line-height:1.55;
}

.chips{
margin-top:18px;
}

.chips span{
font-size:10px;
padding:8px 10px;
}

/* ========================= RESPONSIVE PROJETS ========================== */

.project-hub{
margin-top:28px;
gap:14px;
justify-content:center;
}

.project-icon{
width:74px;
height:74px;
flex:0 0 74px;
}

/* ========================= RESPONSIVE ACTUALITES ========================== */

.updates{
width:100%;
max-width:100%;
margin:26px 0 0;
gap:13px;
}

.updates div{
grid-template-columns:120px 1fr 38px;
gap:9px;
}

.updates span{
font-size:9px;
letter-spacing:.07em;
}

.updates b{
font-size:10px;
}

/* ========================= RESPONSIVE CONTACT ========================== */

.contact-hub{
margin-top:22px;
width:100%;
gap:24px;
transform:none;
}

.contact-photo{
width:150px;
height:150px;
}

.contact-links{
gap:9px;
}

.contact-links a{
width:125px;
height:34px;
font-size:10px;
}

/* ========================= RESPONSIVE FOOTER ========================== */

.contact-strip{
position:absolute;
left:12px;
right:12px;
bottom:12px;
width:auto;
height:46px;
margin:0;
padding:0 10px;
font-size:9px;
letter-spacing:.05em;
text-align:center;
}

/* ========================= RESPONSIVE PAGES ========================== */

.page-main{
height:100vh;
padding:95px 16px 40px;
overflow-y:auto;
overflow-x:hidden;
}

.page-panel{
width:100%;
max-width:100%;
padding:28px 0;
}

.page-panel h1{
font-size:clamp(34px,10vw,48px);
}

.page-panel p{
max-width:100%;
}

.service-grid,
.page-grid{
grid-template-columns:1fr;
}

/* ========================= RESPONSIVE NAVIGATION PAGES ========================== */

.page-navigation{
width:100%;
gap:18px;
}

.page-more{
max-width:46%;
font-size:9px;
letter-spacing:.08em;
}

}