/* ========================= OPTIMAX — STYLE PRINCIPAL ========================== */
/* Interface / carte de visite futuriste */

/* ========================= IDENTITÉ VISUELLE ========================== */

.signature{
width:min(420px,95%);
height:auto;
display:block;
margin:0 auto 18px auto;
}

.subtitle{
text-align:center;
font-size:.80rem;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--cyan);
margin-top:8px;
}

.accent-orange{
color:#ff6a00 !important;
}

.signature-contact{
display:block;
width:min(180px,50%);
height:auto;
margin:0 auto;
}

.avaibility-line{
text-align:center;
}

/* ========================= ZONES DÉFILANTES ========================== */

.scroll-panel{
position:relative;
overflow:hidden;
}

.scroll-zone{
overflow-y:auto;
overflow-x:hidden;
scrollbar-width:none;
padding-bottom:48px;
box-sizing:border-box;
}

.scroll-zone::-webkit-scrollbar{
display:none;
}

.scroll-indicator{
position:absolute;
left:0;
right:0;
bottom:0;
height:50px;
display:flex;
align-items:center;
justify-content:center;
color:#ff6a00;
font-size:17px;
opacity:.80;
pointer-events:none;
z-index:40;
background:linear-gradient(to top,rgba(2,6,8,1),rgba(2,6,8,.96),rgba(2,6,8,.82),rgba(2,6,8,0));
}

/* ========================= VARIABLES GLOBALES ========================== */

:root{
--bg:#020608;
--bg2:#061115;
--panel:rgba(5,15,19,.82);
--panel2:rgba(8,24,30,.62);
--stroke:rgba(0,229,255,.40);
--stroke-soft:rgba(0,229,255,.18);
--cyan:#00e5ff;
--cyan2:#7cf8ff;
--white:#f5f8f9;
--muted:#a9b9bf;
--muted2:#71858d;
--danger:#ff5f7e;
--shadow:0 0 30px rgba(0,229,255,.12);
--shadow2:0 0 60px rgba(0,229,255,.18);
--radius:18px;
--gap:18px;
--font:Arial,Helvetica,sans-serif;
}

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

html,body{
width:100%;
height:100%;
overflow:hidden;
background:var(--bg);
color:var(--white);
font-family:var(--font);
}

body{
background:
radial-gradient(circle at 18% 12%,rgba(0,229,255,.13),transparent 30%),
radial-gradient(circle at 88% 78%,rgba(0,229,255,.09),transparent 34%),
linear-gradient(135deg,#010304 0%,#061115 52%,#010203 100%);
}

body::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
opacity:.22;
background-image:
linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);
background-size:44px 44px;
}

body::after{
content:"";
position:fixed;
inset:-20%;
pointer-events:none;
background:conic-gradient(from 140deg,transparent,rgba(0,229,255,.06),transparent 38%,rgba(255,255,255,.025),transparent 72%);
filter:blur(22px);
opacity:.7;
animation:ambient 22s linear infinite;
}

@keyframes ambient{
to{transform:rotate(360deg)}
}

a{
color:inherit;
text-decoration:none;
}

button,input,textarea{
font:inherit;
}

.sr-only{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
}

/* ========================= CONTENEUR APPLICATION ========================== */

.app-shell{
width:min(96vw,1540px);
height:min(92vh,900px);
margin:4vh auto;
position:relative;
z-index:1;
border:1px solid var(--stroke);
border-radius:28px;
background:rgba(0,0,0,.47);
box-shadow:0 0 0 1px rgba(0,229,255,.08) inset,var(--shadow2);
padding:22px;
overflow:hidden;
}

.app-shell::before{
content:"";
position:absolute;
inset:12px;
border:1px solid rgba(0,229,255,.16);
border-radius:22px;
pointer-events:none;
}

.app-shell::after{
content:"";
position:absolute;
width:480px;
height:480px;
right:-140px;
top:60px;
background:radial-gradient(circle,rgba(0,229,255,.16),transparent 60%);
filter:blur(8px);
opacity:.75;
pointer-events:none;
}

.scanline{
position:absolute;
left:0;
right:0;
top:-25%;
height:18%;
background:linear-gradient(180deg,transparent,rgba(0,229,255,.055),transparent);
animation:scan 9s ease-in-out infinite;
pointer-events:none;
z-index:0;
}

@keyframes scan{
50%,100%{top:108%}
}

/* ========================= MENU HAUT ========================== */

.topbar{
height:54px;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
position:relative;
z-index:3;
padding:0 8px;
}

.brand-mini{
display:flex;
align-items:center;
gap:11px;
color:var(--cyan);
letter-spacing:.18em;
text-transform:uppercase;
font-size:.78rem;
font-weight:700;
white-space:nowrap;
}

.brand-mini::before{
content:"▸";
color:var(--cyan2);
}

.nav{
display:flex;
align-items:center;
gap:12px;
}

.nav a{
width:46px;
height:42px;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.03);
display:grid;
place-items:center;
border-radius:9px;
color:var(--white);
transition:.22s ease;
font-size:1.12rem;
}

/* Page active : turquoise */
.nav a.active{
color:var(--cyan);
border-color:var(--stroke);
box-shadow:0 0 22px rgba(0,229,255,.24);
transform:translateY(-2px);
}

/* Survol : orange */
.nav a:hover{
color:#ff6a00;
border-color:#ff6a00;
box-shadow:0 0 22px rgba(255,106,0,.28);
transform:translateY(-2px);
}

/* ========================= PANNEAUX GÉNÉRAUX ========================== */

.panel{
border:1px solid var(--stroke-soft);
background:linear-gradient(145deg,rgba(7,18,23,.88),rgba(2,6,8,.72));
border-radius:var(--radius);
box-shadow:var(--shadow);
position:relative;
overflow:hidden;
min-height:0;
}

.panel::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,transparent,rgba(0,229,255,.07),transparent);
transform:translateX(-125%);
transition:.55s ease;
pointer-events:none;
}

.panel:hover::before{
transform:translateX(125%);
}

.panel::after{
content:"";
position:absolute;
right:12px;
top:12px;
width:34px;
height:1px;
background:var(--stroke);
box-shadow:0 0 12px var(--cyan);
opacity:.65;
}

.panel-inner{
height:100%;
min-height:0;
padding:22px;
position:relative;
z-index:1;
}

.compact-inner{
padding:18px;
}

.section-title{
display:flex;
align-items:center;
gap:9px;
color:var(--white);
font-size:.96rem;
letter-spacing:.12em;
text-transform:uppercase;
margin-bottom:14px;
white-space:nowrap;
}

.section-title::before{
content:"›";
color:var(--cyan);
font-size:1.34rem;
}

.section-title::after{
content:"";
width:7px;
height:7px;
border-radius:50%;
background:var(--cyan);
box-shadow:0 0 14px var(--cyan);
}

.muted-text{
color:var(--muted);
line-height:1.55;
font-size:.9rem;
}

.subtitle{
color:var(--cyan);
font-size:.78rem;
text-transform:uppercase;
letter-spacing:.13em;
margin-bottom:16px;
font-weight:700;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
min-width:136px;
height:36px;
border:1px solid var(--stroke);
color:var(--cyan);
border-radius:8px;
text-transform:uppercase;
font-size:.68rem;
letter-spacing:.09em;
transition:.22s ease;
background:rgba(0,229,255,.02);
cursor:pointer;
}

.btn:hover{
background:rgba(0,229,255,.10);
box-shadow:0 0 22px rgba(0,229,255,.24);
transform:translateY(-1px);
}

/* ========================= INDEX — GRILLE PRINCIPALE ========================== */

.dashboard{
height:calc(100% - 54px - 86px);
display:grid;
grid-template-columns:1.05fr 1.10fr 1.10fr;
grid-template-rows:1fr 1fr;
gap:var(--gap);
position:relative;
z-index:2;
padding:14px 8px 0;
}

.identity{
grid-row:1/3;
position:relative;
overflow:hidden;
}

.identity::before{
content:"";
position:absolute;
width:580px;
height:580px;
background-image:url("../images/logo.png");
background-repeat:no-repeat;
background-size:contain;
left:-200px;
top:50%;
transform:translateY(-50%);
opacity:.20;
pointer-events:none;
z-index:0;
}

.identity > *{
position:relative;
z-index:1;
}

.about{
grid-column:2;
grid-row:1;
}

.skills{
grid-column:2;
grid-row:2;
}

.services{
grid-column:3;
grid-row:1;
}

.projects{
grid-column:3;
grid-row:2;
}

.identity h1,.page-title{
font-size:clamp(2.35rem,3.65vw,4.65rem);
line-height:.9;
text-transform:uppercase;
letter-spacing:.04em;
margin-bottom:14px;
text-shadow:0 0 18px rgba(255,255,255,.16);
}

.identity h1 span{
display:block;
color:var(--muted);
font-weight:300;
font-size:.50em;
margin-bottom:7px;
}

.intro-text{
color:var(--muted);
line-height:1.6;
max-width:390px;
margin-bottom:22px;
font-size:.92rem;
}

.signature-text{
font-family:"Brush Script MT",cursive;
color:var(--cyan2);
font-size:1.42rem;
margin-bottom:16px;
opacity:.92;
}

.logo-zone{
height:238px;
display:block;
position:relative;
}

.logo-zone::before,.logo-zone::after{
display:none;
}

.logo-placeholder{
display:none;
}

.quick-info{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-top:6px;
}

.quick-card{
border:1px solid var(--stroke-soft);
border-radius:10px;
padding:10px;
color:var(--muted);
font-size:.68rem;
text-transform:uppercase;
letter-spacing:.07em;
line-height:1.25;
background:rgba(255,255,255,.025);
min-width:0;
}

.quick-card strong{
display:block;
color:var(--white);
margin-top:6px;
font-size:.68rem;
}

.stats{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
margin-top:14px;
}

.stat{
border:1px solid var(--stroke-soft);
border-radius:11px;
padding:11px 7px;
text-align:center;
background:rgba(255,255,255,.025);
min-width:0;
}

.stat .icon{
color:var(--cyan);
font-size:1.05rem;
margin-bottom:6px;
}

.stat strong{
display:block;
font-size:1.28rem;
margin-bottom:2px;
}

.stat span{
display:block;
color:var(--muted);
font-size:.56rem;
text-transform:uppercase;
letter-spacing:.045em;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

/* ========================= COMPÉTENCES / BARRES ========================== */

.skill{
margin-bottom:11px;
}

.skill-top{
display:flex;
justify-content:space-between;
color:var(--white);
font-size:.68rem;
letter-spacing:.06em;
text-transform:uppercase;
margin-bottom:6px;
gap:12px;
}

.bar{
height:5px;
background:rgba(255,255,255,.08);
border-radius:999px;
overflow:hidden;
}

.bar span{
display:block;
height:100%;
background:linear-gradient(90deg,var(--cyan),var(--cyan2));
box-shadow:0 0 12px rgba(0,229,255,.5);
}

.tech-row{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:7px;
margin-top:13px;
}

.tech{
border:1px solid var(--stroke-soft);
border-radius:9px;
min-height:38px;
display:grid;
place-items:center;
color:var(--cyan);
font-size:.64rem;
font-weight:700;
background:rgba(255,255,255,.025);
min-width:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

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

.service-scroll{
height:calc(100% - 44px);
overflow-y:auto;
padding-right:4px;
scroll-behavior:smooth;
scrollbar-width:none;
}

.service-scroll::-webkit-scrollbar{
display:none;
}

.service-card{
display:grid;
grid-template-columns:52px 1fr 18px;
align-items:center;
gap:12px;
border:1px solid rgba(255,255,255,.08);
border-radius:12px;
padding:9px;
margin-bottom:9px;
background:rgba(255,255,255,.025);
transition:.22s ease;
}

.service-card:hover{
border-color:var(--stroke);
transform:translateX(4px);
box-shadow:0 0 22px rgba(0,229,255,.13);
}

.service-icon{
height:46px;
border:1px solid var(--stroke);
border-radius:8px;
display:grid;
place-items:center;
color:var(--cyan);
font-size:1.12rem;
}

.service-card h3{
font-size:.78rem;
margin-bottom:3px;
text-transform:uppercase;
}

.service-card p{
color:var(--muted);
font-size:.70rem;
line-height:1.32;
}

.arrow{
color:var(--cyan);
font-size:1.34rem;
}

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

.project-preview{
height:calc(100% - 34px);
min-height:150px;
border:1px solid var(--stroke-soft);
border-radius:14px;
background:
linear-gradient(90deg,rgba(0,0,0,.64),rgba(0,0,0,.20)),
radial-gradient(circle at 84% 24%,rgba(0,229,255,.18),transparent 40%);
padding:21px;
display:flex;
flex-direction:column;
justify-content:flex-end;
position:relative;
overflow:hidden;
}

.project-preview::after{
content:"";
position:absolute;
right:20px;
top:18px;
width:94px;
height:94px;
border:1px solid rgba(0,229,255,.15);
border-radius:20px;
transform:rotate(12deg);
}

.project-preview h3{
font-size:1.05rem;
text-transform:uppercase;
margin-bottom:7px;
}

.project-preview p{
color:var(--muted);
font-size:.80rem;
margin-bottom:13px;
max-width:84%;
}

.dots{
display:flex;
justify-content:center;
gap:9px;
margin-top:11px;
}

.dot{
width:9px;
height:9px;
border:0;
border-radius:50%;
background:rgba(255,255,255,.22);
transition:.18s ease;
cursor:pointer;
}

.dot:hover{
background:#ff6a00;
box-shadow:0 0 14px rgba(255,90,0,.45);
transform:scale(1.15);
}

.dot.active{
background:var(--cyan);
box-shadow:0 0 14px var(--cyan);
transform:scale(1.15);
}

/* ========================= MODALE PROJET ========================== */

.project-modal{
position:fixed;
inset:0;
z-index:9998;
display:none;
place-items:center;
padding:28px;
background:rgba(0,0,0,.74);
backdrop-filter:blur(10px);
}

.project-modal.is-open{
display:grid;
}

.project-modal-card{
width:min(88vw,820px);
max-height:84vh;
border:1px solid var(--stroke);
border-radius:22px;
background:linear-gradient(145deg,rgba(7,18,23,.96),rgba(2,6,8,.92));
box-shadow:0 0 55px rgba(0,229,255,.20);
padding:26px;
display:grid;
gap:14px;
text-align:center;
overflow:hidden;
}

.project-modal-card img{
max-width:min(420px,80%);
max-height:180px;
object-fit:contain;
margin:0 auto 6px;
}

.project-modal-card h2{
text-transform:uppercase;
letter-spacing:.12em;
font-size:1.15rem;
color:var(--white);
}

.project-modal-card p{
color:var(--muted);
line-height:1.55;
font-size:.88rem;
}

.project-modal-close{
position:fixed;
top:22px;
right:26px;
width:46px;
height:46px;
border:1px solid var(--stroke);
border-radius:50%;
background:rgba(5,14,18,.92);
color:var(--cyan);
font-size:1.75rem;
line-height:1;
cursor:pointer;
box-shadow:0 0 22px rgba(0,229,255,.16);
}

.project-modal-close:hover{
box-shadow:0 0 28px rgba(0,229,255,.28);
transform:scale(1.05);
}

@media (max-width:640px){
.project-modal{padding:16px}
.project-modal-card{padding:20px;width:100%}
.project-modal-card img{max-width:85%;max-height:140px}
}

/* ========================= PIED DE PAGE — INDEX ========================== */

.footer-contact{
height:72px;
position:relative;
z-index:2;
margin:12px 8px 0;
border:1px solid var(--stroke);
border-radius:16px;
background:rgba(5,14,18,.78);
display:grid;
grid-template-columns:1.05fr 1.5fr 1fr auto;
align-items:center;
gap:14px;
padding:12px 18px;
box-shadow:var(--shadow);
overflow:hidden;
}

.contact-title{
color:var(--white);
text-transform:uppercase;
letter-spacing:.12em;
font-size:.88rem;
white-space:nowrap;
}

.contact-item{
color:var(--muted);
display:flex;
align-items:center;
gap:10px;
font-size:.78rem;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.contact-item span:first-child{
color:var(--cyan);
font-size:1rem;
flex:0 0 auto;
}

.cta{
justify-self:end;
height:42px;
padding:0 18px;
border:1px solid var(--stroke);
border-radius:999px;
color:var(--cyan);
display:inline-flex;
align-items:center;
gap:10px;
text-transform:uppercase;
letter-spacing:.08em;
font-size:.72rem;
transition:.22s ease;
white-space:nowrap;
}

.cta:hover{
background:rgba(0,229,255,.10);
transform:translateY(-2px);
box-shadow:0 0 26px rgba(0,229,255,.18);
}

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

.contact-grid{
height:calc(100% - 54px);
display:grid;
grid-template-columns:.96fr 1.18fr 1.16fr;
grid-template-rows:1fr .92fr .56fr;
gap:var(--gap);
position:relative;
z-index:2;
padding:14px 8px 0;
}

.contact-profile{grid-row:1/3}
.contact-form-panel{grid-row:1/3}
.contact-info-panel{grid-column:3;grid-row:1}
.map-panel{grid-column:3;grid-row:2}
.site-menu-panel{grid-column:1/4;grid-row:3}

.portrait-frame{
width:min(100%,275px);
aspect-ratio:1/1;
border:1px solid var(--stroke);
border-radius:18px;
overflow:hidden;
margin:16px auto 18px;
background:rgba(255,255,255,.03);
display:grid;
place-items:center;
}

.portrait-frame img{
width:100%;
height:100%;
object-fit:cover;
}

.contact-form{
height:calc(100% - 44px);
display:grid;
grid-template-rows:auto auto auto 1fr auto;
gap:10px;
}

.contact-form label{
display:grid;
gap:6px;
color:var(--muted);
font-size:.70rem;
text-transform:uppercase;
letter-spacing:.07em;
}

.contact-form input,.contact-form textarea{
width:100%;
border:1px solid var(--stroke-soft);
background:rgba(255,255,255,.035);
color:var(--white);
border-radius:10px;
padding:11px 12px;
outline:none;
}

.contact-form textarea{
height:100%;
min-height:110px;
resize:none;
}

.contact-form input:focus,.contact-form textarea:focus{
border-color:var(--stroke);
box-shadow:0 0 18px rgba(0,229,255,.12);
}

.form-btn{
justify-self:center;
margin-top:2px;
min-width:170px;
}

.info-list{
display:grid;
grid-template-columns:1fr;
gap:10px;
}

.info-list a{
border:1px solid var(--stroke-soft);
border-radius:10px;
padding:12px;
color:var(--muted);
display:flex;
align-items:center;
gap:12px;
background:rgba(255,255,255,.025);
transition:.22s ease;
min-width:0;
}

.info-list a:hover{
border-color:var(--stroke);
color:var(--white);
box-shadow:0 0 18px rgba(0,229,255,.12);
}

.info-list span{
color:var(--cyan);
flex:0 0 auto;
}

.map-placeholder{
height:calc(100% - 42px);
min-height:128px;
border:1px dashed var(--stroke-soft);
border-radius:14px;
display:grid;
place-items:center;
text-align:center;
color:var(--muted);
background:radial-gradient(circle,rgba(0,229,255,.10),transparent 55%);
}

.map-placeholder div{
font-size:2rem;
color:var(--cyan);
letter-spacing:.18em;
}

.map-placeholder small{
display:block;
margin-top:7px;
opacity:.75;
}

.site-links{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:10px;
height:calc(100% - 42px);
}

.site-links a{
border:1px solid var(--stroke-soft);
border-radius:12px;
background:rgba(255,255,255,.025);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:10px;
color:var(--muted);
text-transform:uppercase;
font-size:.72rem;
letter-spacing:.08em;
transition:.2s ease;
}

.site-links a:hover{
border-color:var(--stroke);
color:var(--cyan);
box-shadow:0 0 18px rgba(0,229,255,.12);
}

/* ========================= PAGE OPTIMAX / SERVICES ========================== */

.optimax-grid{
height:calc(100% - 54px);
display:grid;
grid-template-columns:1.08fr 1fr 1fr;
grid-template-rows:1fr 1fr .58fr;
gap:var(--gap);
position:relative;
z-index:2;
padding:14px 8px 0;
}

.optimax-hero{grid-row:1/3}
.optimax-services{grid-column:2;grid-row:1/3}
.optimax-process{grid-column:3;grid-row:1}
.optimax-pack{grid-column:3;grid-row:2}
.optimax-bottom{grid-column:1/4;grid-row:3}

.big-mark{
font-size:5.6rem;
line-height:1;
color:rgba(0,229,255,.16);
font-weight:900;
letter-spacing:-.08em;
margin:10px 0;
}

.feature-list{
display:grid;
gap:10px;
}

.feature-list li{
list-style:none;
border:1px solid var(--stroke-soft);
border-radius:11px;
padding:11px 12px;
color:var(--muted);
background:rgba(255,255,255,.025);
}

.feature-list strong{
display:block;
color:var(--white);
font-size:.82rem;
text-transform:uppercase;
margin-bottom:4px;
}

.steps{
display:grid;
gap:10px;
}

.step{
display:grid;
grid-template-columns:36px 1fr;
gap:10px;
align-items:start;
}

.step span{
height:36px;
border:1px solid var(--stroke);
border-radius:50%;
display:grid;
place-items:center;
color:var(--cyan);
}

.step p{
color:var(--muted);
font-size:.84rem;
line-height:1.45;
}

.price-card{
border:1px solid var(--stroke);
border-radius:14px;
padding:18px;
background:rgba(0,229,255,.035);
}

.price-card .price{
font-size:2.2rem;
color:var(--white);
margin:8px 0;
}

.price-card small{
color:var(--muted);
}

.bottom-actions{
height:calc(100% - 42px);
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:12px;
}

.action-box{
border:1px solid var(--stroke-soft);
border-radius:12px;
background:rgba(255,255,255,.025);
padding:14px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}

.action-box strong{
text-transform:uppercase;
font-size:.78rem;
}

.action-box span{
color:var(--cyan);
}

/* ========================= PAGES VIERGES HR1 / HR2 ========================== */

.blank-grid{
height:calc(100% - 54px);
display:grid;
grid-template-columns:1.1fr 1fr 1fr;
grid-template-rows:1fr 1fr .58fr;
gap:var(--gap);
position:relative;
z-index:2;
padding:14px 8px 0;
}

.blank-hero{grid-row:1/3}
.blank-wide{grid-column:1/4;grid-row:3}

.placeholder-line{
height:10px;
border-radius:999px;
background:rgba(255,255,255,.08);
margin:12px 0;
}

.placeholder-line.short{width:55%}
.placeholder-line.mid{width:76%}

/* ========================= RESPONSIVE PRINCIPAL ========================== */

@media (max-width:1100px){
html,body{height:auto;overflow:auto}
.app-shell{width:100%;height:auto;min-height:100vh;margin:0;border-radius:0;padding:16px}
.dashboard,.contact-grid,.optimax-grid,.blank-grid{height:auto;grid-template-columns:1fr;grid-template-rows:auto}
.identity,.about,.skills,.services,.projects,.contact-profile,.contact-form-panel,.contact-info-panel,.map-panel,.site-menu-panel,.optimax-hero,.optimax-services,.optimax-process,.optimax-pack,.optimax-bottom,.blank-hero,.blank-wide{grid-column:auto;grid-row:auto}
.footer-contact{height:auto;grid-template-columns:1fr;align-items:start;margin-top:16px}
.cta{justify-self:start}
.service-scroll{max-height:none;overflow:visible}
.site-links,.bottom-actions{grid-template-columns:1fr 1fr;height:auto}
.nav{gap:7px}
.nav a{width:40px;height:38px}
.page-title,.identity h1{font-size:2.55rem}
}

@media (max-width:640px){
.site-links,.bottom-actions,.stats,.tech-row{grid-template-columns:1fr}
.topbar{align-items:flex-start;gap:10px;flex-direction:column;height:auto}
.nav{flex-wrap:wrap}
.portrait-frame{max-width:220px}
.panel-inner{padding:18px}
}

/* ========================= AJUSTEMENTS V4 ========================== */

.project-preview{
height:calc(100% - 52px);
min-height:120px;
padding:17px 20px 16px;
position:relative;
}

.project-preview p{
margin-bottom:10px;
font-size:.76rem;
line-height:1.38;
}

.project-logo{
display:block;
height:auto;
max-height:none;
object-fit:contain;
margin:4px auto 12px;
opacity:.80;
}

.project-logo.optimax-logo{
width:340px;
position:absolute;
left:50%;
top:25%;
transform:translate(-50%,-50%);
z-index:0;
opacity:.65;
pointer-events:none;
}

.project-logo.philopublic-logo{
width:370px;
position:absolute;
left:50%;
top:25%;
transform:translate(-50%,-50%);
z-index:0;
opacity:.75;
pointer-events:none;
}

.project-logo.horizon-logo{
width:400px;
position:absolute;
left:50%;
top:25%;
transform:translate(-50%,-50%);
z-index:0;
opacity:.75;
pointer-events:none;
}

.project-logo.rockdio-logo{
width:230px;
position:absolute;
left:50%;
top:48%;
transform:translate(-50%,-50%);
z-index:0;
opacity:.65;
pointer-events:none;
}

.project-logo.newweb-logo{
width:310px;
position:absolute;
left:50%;
top:32%;
transform:translate(-50%,-50%);
z-index:0;
opacity:.75;
pointer-events:none;
}

.project-preview h3,.project-preview p,.project-preview .btn{
position:relative;
z-index:1;
}

.dots{
margin-top:9px;
padding-bottom:2px;
}

.dot{
width:10px;
height:10px;
}

.footer-contact{
height:74px;
grid-template-columns:1fr 1.45fr 1.42fr auto;
margin:10px 8px 0;
}

.contact-socials{
display:flex;
align-items:center;
gap:9px;
min-width:0;
}

.contact-socials a{
height:36px;
border:1px solid var(--stroke-soft);
border-radius:999px;
padding:0 12px;
display:inline-flex;
align-items:center;
gap:7px;
color:var(--muted);
font-size:.72rem;
text-transform:uppercase;
letter-spacing:.055em;
background:rgba(255,255,255,.025);
transition:.2s ease;
white-space:nowrap;
}

.contact-socials a:hover{
border-color:var(--stroke);
color:var(--cyan);
box-shadow:0 0 18px rgba(0,229,255,.14);
}

.social-icon{
color:var(--cyan);
font-weight:800;
font-size:.85rem;
line-height:1;
}

.feature-scroll{
height:calc(100% - 44px);
overflow-y:auto;
padding-right:4px;
scrollbar-width:none;
scroll-behavior:smooth;
}

.feature-scroll::-webkit-scrollbar{
display:none;
}

.optimax-services .feature-list{
padding-bottom:4px;
}

.optimax-services .feature-list li{
margin-bottom:10px;
}

.bottom-actions{
grid-template-columns:repeat(4,minmax(0,1fr));
}

.action-box{
min-width:0;
}

.action-box strong{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

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

.documents-grid{
height:calc(100% - 54px);
display:grid;
grid-template-columns:1.05fr 1fr 1fr;
grid-template-rows:1fr 1fr .58fr;
gap:var(--gap);
position:relative;
z-index:2;
padding:14px 8px 0;
}

.documents-hero{grid-row:1/3}
.documents-list-one{grid-column:2;grid-row:1/3}
.documents-list-two{grid-column:3;grid-row:1}
.apk-panel{grid-column:3;grid-row:2}
.documents-nav{grid-column:1/4;grid-row:3}

.doc-stack{
height:calc(100% - 44px);
overflow-y:auto;
padding-right:4px;
display:grid;
gap:10px;
align-content:start;
scrollbar-width:none;
}

.doc-stack::-webkit-scrollbar{
display:none;
}

.doc-card{
border:1px solid var(--stroke-soft);
border-radius:13px;
background:rgba(255,255,255,.025);
padding:13px;
display:grid;
grid-template-columns:48px 1fr auto;
align-items:center;
gap:12px;
transition:.22s ease;
}

.doc-card:hover{
border-color:var(--stroke);
box-shadow:0 0 22px rgba(0,229,255,.14);
transform:translateX(3px);
}

.doc-icon{
width:48px;
height:48px;
border:1px solid var(--stroke);
border-radius:10px;
display:grid;
place-items:center;
color:var(--cyan);
font-weight:800;
background:rgba(0,229,255,.035);
}

.doc-card h3{
font-size:.82rem;
text-transform:uppercase;
margin-bottom:4px;
}

.doc-card p{
font-size:.70rem;
color:var(--muted);
line-height:1.35;
}

.download-chip{
height:34px;
border:1px solid var(--stroke-soft);
border-radius:999px;
padding:0 12px;
display:inline-flex;
align-items:center;
color:var(--cyan);
font-size:.68rem;
text-transform:uppercase;
letter-spacing:.08em;
white-space:nowrap;
}

.android-mark{
width:78px;
height:78px;
margin:8px auto 16px;
display:grid;
place-items:center;
border:1px solid var(--stroke);
border-radius:22px;
background:radial-gradient(circle,rgba(0,229,255,.13),rgba(255,255,255,.025));
box-shadow:0 0 22px rgba(0,229,255,.15);
}

.android-mark svg{
width:48px;
height:48px;
fill:var(--cyan);
filter:drop-shadow(0 0 10px rgba(0,229,255,.35));
}

@media (max-width:1100px){
.footer-contact{height:auto;grid-template-columns:1fr}
.contact-socials{flex-wrap:wrap}
.documents-grid{height:auto;grid-template-columns:1fr;grid-template-rows:auto}
.documents-hero,.documents-list-one,.documents-list-two,.apk-panel,.documents-nav{grid-column:auto;grid-row:auto}
.doc-stack{height:auto;max-height:none}
.feature-scroll{height:auto;max-height:none;overflow:visible}
.bottom-actions{grid-template-columns:1fr 1fr}
}

@media (max-width:640px){
.bottom-actions{grid-template-columns:1fr}
.doc-card{grid-template-columns:42px 1fr}
.download-chip{grid-column:1/3;justify-content:center}
.footer-contact{padding:12px}
.contact-socials a{width:100%;justify-content:center}
}

/* ========================= PATCH V4.1 — CONTACT / INDEX ========================== */

.footer-contact-v41{
grid-template-columns:1fr minmax(420px,1.75fr) auto;
gap:20px;
padding:12px 22px;
}

.contact-actions-v41{
display:flex;
align-items:center;
justify-content:center;
gap:16px;
min-width:0;
}

.contact-actions-v41 a{
height:38px;
min-width:112px;
border:1px solid var(--stroke-soft);
border-radius:999px;
padding:0 16px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
color:var(--muted);
font-size:.72rem;
text-transform:uppercase;
letter-spacing:.055em;
background:rgba(255,255,255,.025);
transition:.2s ease;
white-space:nowrap;
}

.contact-actions-v41 a:hover{
border-color:var(--stroke);
color:var(--cyan);
box-shadow:0 0 18px rgba(0,229,255,.14);
transform:translateY(-1px);
}

.contact-info-panel .info-list{
gap:11px;
}

.contact-info-panel .info-list a{
min-height:38px;
padding:10px 14px;
line-height:1.2;
overflow:hidden;
}

.contact-info-panel .info-list a.phone-row{
margin-bottom:2px;
padding-bottom:11px;
}

.contact-info-panel .compact-inner{
padding-bottom:20px;
}

@media (max-width:1100px){
.footer-contact-v41{grid-template-columns:1fr;gap:14px}
.contact-actions-v41{justify-content:flex-start;flex-wrap:wrap}
}

@media (max-width:640px){
.contact-actions-v41{display:grid;grid-template-columns:1fr;width:100%}
.contact-actions-v41 a{width:100%}
}

/* ========================= PATCH V4.2 — COPYRIGHT / HR1 / HR2 ========================== */

.site-copyright{
position:fixed;
left:50%;
bottom:8px;
transform:translateX(-50%);
width:min(96vw,1540px);
z-index:4;
border-top:1px solid rgba(0,229,255,.18);
color:rgba(169,185,191,.72);
font-size:.66rem;
letter-spacing:.08em;
text-transform:uppercase;
text-align:center;
padding-top:6px;
pointer-events:auto;
}

.site-copyright a{
color:rgba(124,248,255,.88);
transition:.2s ease;
}

.site-copyright a:hover{
color:var(--cyan);
text-shadow:0 0 12px rgba(0,229,255,.35);
}

.contact-form{
grid-template-rows:auto auto auto minmax(150px,1fr) auto;
gap:9px;
}

.contact-form label{
align-content:start;
}

.contact-form textarea{
min-height:150px;
height:100%;
display:block;
}

.form-btn{
margin-top:0;
align-self:center;
}

.hr1-grid{
height:calc(100% - 54px);
display:grid;
grid-template-columns:1.25fr .95fr;
grid-template-rows:1fr .56fr;
gap:var(--gap);
position:relative;
z-index:2;
padding:14px 8px 0;
}

.hr1-main-block{grid-column:1;grid-row:1}
.hr1-side-block{grid-column:2;grid-row:1}
.hr-navigation{grid-column:1/-1;grid-row:2}

.hr2-grid{
height:calc(100% - 54px);
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
grid-template-rows:1fr .56fr;
gap:var(--gap);
position:relative;
z-index:2;
padding:14px 8px 0;
}

.mini-logo-zone{
height:120px;
margin-top:10px;
}

.mini-logo-zone::before{
width:118px;
height:118px;
}

.mini-logo-zone::after{
width:86px;
height:86px;
}

.mini-logo-zone .logo-placeholder{
width:76px;
height:76px;
}

@media (max-width:1100px){
.app-shell{padding-bottom:42px}
.hr1-grid,.hr2-grid{height:auto;grid-template-columns:1fr;grid-template-rows:auto}
.hr1-main-block,.hr1-side-block,.hr-navigation{grid-column:auto;grid-row:auto}
.hr2-grid > .panel{grid-column:auto;grid-row:auto}
.site-copyright{position:static;transform:none;width:calc(100% - 32px);margin:12px auto 8px;padding-bottom:8px}
.contact-form{min-height:520px;grid-template-rows:auto auto auto minmax(180px,1fr) auto}
}

@media (max-width:640px){
.contact-form{min-height:560px}
.contact-form textarea{min-height:190px}
}

/* ========================= PATCH V5 — GALERIE / CONTACT / OPTIMAX ========================== */

.site-copyright{
border-top:0 !important;
padding-top:4px;
}

.footer-contact-v41{
grid-template-columns:1fr auto 1fr !important;
gap:22px;
}

.footer-contact-v41 .contact-title{
justify-self:start;
}

.footer-contact-v41 .contact-actions-v41{
justify-self:center;
gap:22px;
}

.footer-contact-v41 .cta{
justify-self:end;
}

.projects .project-preview{
height:calc(100% - 68px) !important;
min-height:98px;
padding:14px 18px 12px;
}

.projects .project-preview h3{
font-size:.96rem;
margin-bottom:5px;
}

.projects .project-preview p{
font-size:.71rem;
line-height:1.32;
margin-bottom:8px;
}

.projects .project-preview .btn{
height:32px;
min-width:122px;
font-size:.64rem;
}

.projects .dots{
margin-top:10px;
padding-bottom:8px;
min-height:24px;
align-items:center;
}

.projects .dot{
width:10px;
height:10px;
flex:0 0 auto;
}

.map-embed{
height:calc(100% - 42px);
min-height:128px;
border:1px solid var(--stroke-soft);
border-radius:14px;
overflow:hidden;
background:rgba(255,255,255,.025);
box-shadow:0 0 18px rgba(0,229,255,.08) inset;
}

.map-embed iframe{
width:100%;
height:100%;
border:0;
filter:saturate(.75) contrast(.98) brightness(.86);
}

.contact-form{
grid-template-rows:auto auto auto minmax(190px,1fr) auto !important;
gap:8px;
}

.contact-form textarea{
min-height:190px !important;
}

.form-btn{
align-self:end;
margin-top:1px;
}

.price-stack{
height:calc(100% - 42px);
display:grid;
grid-template-rows:1fr 1fr;
gap:10px;
}

.price-card-compact{
padding:13px 13px 12px !important;
min-height:0;
display:flex;
flex-direction:column;
justify-content:center;
}

.price-card-compact .muted-text{
font-size:.70rem;
line-height:1.32;
margin-bottom:6px;
}

.price-card-compact .price{
font-size:1.62rem;
margin:2px 0 4px;
}

.price-card-compact .price span{
display:block;
color:var(--muted);
font-size:.58rem;
letter-spacing:.12em;
text-transform:uppercase;
margin-bottom:2px;
}

.price-card-compact small{
font-size:.62rem;
color:var(--muted2);
}

.hr2-gallery-grid{
height:calc(100% - 54px);
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
grid-template-rows:1fr .56fr;
gap:var(--gap);
position:relative;
z-index:2;
padding:14px 8px 0;
}

.gallery-panel{
min-width:0;
}

.gallery-panel .panel-inner{
display:flex;
flex-direction:column;
min-height:0;
}

.gallery-desc{
color:var(--muted);
font-size:.70rem;
line-height:1.35;
margin:-4px 0 10px;
min-height:36px;
}

.gallery-scroll{
flex:1;
min-height:0;
overflow-y:auto;
padding-right:4px;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
grid-auto-rows:74px;
gap:9px;
scrollbar-width:none;
scroll-behavior:smooth;
}

.gallery-scroll::-webkit-scrollbar{
display:none;
}

.gallery-item{
border:1px solid var(--stroke-soft);
border-radius:12px;
overflow:hidden;
background:rgba(255,255,255,.025);
transition:.22s ease;
min-width:0;
}

.gallery-item:hover{
border-color:#ff6a00;
box-shadow:0 0 18px rgba(255,106,0,.35);
transform:translateY(-2px);
}

.gallery-item img{
width:100%;
height:100%;
object-fit:cover;
display:block;
opacity:.92;
}

.gallery-nav{
grid-column:1/-1;
grid-row:2;
}

@media (max-width:1100px){
.footer-contact-v41{grid-template-columns:1fr !important}
.footer-contact-v41 .contact-title,.footer-contact-v41 .contact-actions-v41,.footer-contact-v41 .cta{justify-self:start}
.hr2-gallery-grid{height:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto}
.gallery-nav{grid-column:1/-1;grid-row:auto}
.gallery-scroll{max-height:260px;padding-top:20px}
.map-embed{min-height:240px}
.contact-form textarea{min-height:210px !important}
}

@media (max-width:640px){
.hr2-gallery-grid{grid-template-columns:1fr}
.gallery-nav{grid-column:auto}
.gallery-scroll{grid-auto-rows:92px;max-height:310px}
.footer-contact-v41 .contact-actions-v41{gap:12px;width:100%}
}

/* ========================= PATCH V5.1 — INDEX / GALERIE / MAP ========================== */

#presentation .muted-text{
line-height:1.55;
}

.hr2-gallery-grid{
grid-template-rows:1fr 1fr .58fr !important;
}

.hr2-gallery-grid > .gallery-panel{
grid-row:1/3;
}

.hr2-gallery-grid > .gallery-nav{
grid-column:1/-1;
grid-row:3 !important;
}

.gallery-scroll{
grid-auto-rows:82px;
}

.gallery-desc{
min-height:28px;
}

.map-embed{
background:linear-gradient(135deg,rgba(0,229,255,.08),rgba(255,255,255,.018));
box-shadow:
0 0 0 1px rgba(0,229,255,.08) inset,
0 0 22px rgba(0,229,255,.10) inset;
}

.map-embed iframe{
filter:invert(.88) hue-rotate(150deg) saturate(.72) contrast(.94) brightness(.72);
opacity:.86;
}

.map-panel .section-title::after{
background:var(--cyan);
}

@media (max-width:1100px){
.hr2-gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto !important}
.hr2-gallery-grid > .gallery-panel,.hr2-gallery-grid > .gallery-nav{grid-column:auto;grid-row:auto !important}
}

@media (max-width:640px){
.hr2-gallery-grid{grid-template-columns:1fr}
}

/* ========================= PATCH V5.2 — MAP / LIGHTBOX / MÉTHODES ========================== */

.map-embed iframe{
filter:none !important;
opacity:1 !important;
}

.contact-form{
gap:8px;
}

.contact-form textarea{
min-height:230px !important;
}

.form-btn{
margin-top:4px;
}

.gallery-lightbox{
position:fixed;
inset:0;
z-index:9999;
display:none;
place-items:center;
padding:28px;
background:rgba(0,0,0,.74);
backdrop-filter:blur(10px);
}

.gallery-lightbox.is-open{
display:grid;
}

.gallery-lightbox-card{
width:min(82vw,760px);
max-height:82vh;
border:1px solid var(--stroke);
border-radius:22px;
background:linear-gradient(145deg,rgba(7,18,23,.96),rgba(2,6,8,.92));
box-shadow:0 0 55px rgba(0,229,255,.20);
padding:18px;
display:grid;
gap:12px;
}

.gallery-lightbox-card img{
width:100%;
max-height:68vh;
object-fit:contain;
border:1px solid var(--stroke-soft);
border-radius:16px;
background:rgba(255,255,255,.025);
user-select:none;
-webkit-user-drag:none;
}

.gallery-lightbox-card p{
color:var(--muted);
text-align:center;
text-transform:uppercase;
letter-spacing:.08em;
font-size:.78rem;
}

.gallery-lightbox-close{
position:fixed;
top:22px;
right:26px;
width:46px;
height:46px;
border:1px solid var(--stroke);
border-radius:50%;
background:rgba(5,14,18,.92);
color:var(--cyan);
font-size:1.75rem;
line-height:1;
cursor:pointer;
box-shadow:0 0 22px rgba(0,229,255,.16);
}

.gallery-item img,.logo-placeholder,.portrait-frame img,.doc-card img{
user-select:none;
-webkit-user-drag:none;
}

.method-stack{
display:grid;
gap:10px;
height:calc(100% - 42px);
}

.method-card{
border:1px solid var(--stroke-soft);
border-radius:13px;
padding:12px;
background:rgba(0,229,255,.035);
display:grid;
grid-template-columns:44px 1fr;
align-items:start;
gap:12px;
min-height:0;
}

.method-number{
width:42px;
height:42px;
border:1px solid var(--stroke);
border-radius:50%;
display:grid;
place-items:center;
color:var(--cyan);
font-weight:800;
font-size:.78rem;
}

.method-card h3{
font-size:.82rem;
text-transform:uppercase;
margin-bottom:5px;
}

.method-card p{
color:var(--muted);
font-size:.76rem;
line-height:1.36;
}

@media (max-width:1100px){
.contact-form textarea{min-height:240px !important}
.gallery-lightbox-card{width:min(92vw,760px)}
}

/* ========================= PATCH V5.3 — FORMULAIRE CONTACT ========================== */

.contact-form{
grid-template-rows:auto auto auto minmax(150px,1fr) auto !important;
gap:8px !important;
}

.contact-form textarea{
min-height:165px !important;
height:100% !important;
max-height:100% !important;
}

.form-btn{
align-self:center !important;
justify-self:center !important;
margin-top:0 !important;
}

@media (max-width:1100px){
.contact-form textarea{min-height:190px !important}
}

/* ========================= CARTES SCROLLABLES ========================== */

#presentation .presentation-scroll{
max-height:280px;
overflow-y:auto;
overflow-x:hidden;
scrollbar-width:none;
padding-bottom:50px;
box-sizing:border-box;
}

#presentation .presentation-scroll::-webkit-scrollbar{
display:none;
}

#presentation > .section-title{
margin:18px 18px 10px;
}

#domaines{
overflow:hidden;
}

#domaines .updates-scroll{
max-height:360px;
overflow-y:auto;
overflow-x:hidden;
scrollbar-width:none;
padding-bottom:50px;
box-sizing:border-box;
}

#domaines .updates-scroll::-webkit-scrollbar{
display:none;
}

#domaines > .section-title{
margin:18px 18px 10px;
}