@font-face{font-family: 'NokRegular'; src: url('../Police/NokRegular.ttf') format('truetype'); font-weight:700; font-style:normal;}
@font-face{font-family: 'AfterRegular'; src: url('../Police/After-Regular.ttf') format('truetype'); font-weight:700; font-style:normal;}
@font-face{font-family: 'CCSGlyke'; src: url('../Police/CCSGlykeRegular.woff') format('woff'); font-weight:400; font-style:normal;}

:root{
  --accent:#f1c65b; /* warm yellow */
  --bg-filter: rgba(6,79,78,0.9); /* teal overlay */
  --text-light: #fff;
}
*{box-sizing:border-box; position:relative}
.site-header{display:flex;align-items:center;justify-content:center}
.site-header{display:flex;align-items:center;justify-content:center}
html,body{height:100%;margin:0;font-family: 'CCSGlyke', Arial, sans-serif}
.site-header{position:absolute;top:0;left:0;width:100%;padding:36px 40px;z-index:30;font-family: 'AfterRegular', Arial, sans-serif;}
.nav{display:flex;justify-content:center;width:100%;border-radius: 12px;}
.nav-list{display:flex;gap:140px;list-style:none;margin:0;padding:0;align-items:center;justify-content:center}
.nav-item{font-weight:700;letter-spacing:0.6px;font-size:22px;white-space:nowrap}
.nav-item a{color:#c5e4ec;text-decoration:none;display:inline-block;padding:4px 6px;transition: opacity 0.3s ease, letter-spacing 0.25s ease;}
.nav-item a:hover{
  letter-spacing: 5px;
  /* Removed from :hover — move this to the base rule .nav-item a so transitions apply on mouseleave */
  
}
.nav-item.logo{position:relative}
.nav-oval{width:200px;display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:0}
.nav-item.logo a{
  font-weight:900;
  color:var(--text-light);
  background-repeat: no-repeat;
  background-position: center center;
  padding:4px 6px; /* keep default spacing */
}
.nav-item.logo a.active + .nav-oval{display:block}
.nav-item a.active{color:var(--text-light)}

.hero{height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background: url('../Image svg/Foule2.png') center/cover no-repeat}
.hero::before{content:'';position:fixed;inset:0;background:linear-gradient(180deg, rgba(6,79,78,0.75), rgba(6,79,78,0.9));pointer-events:none;z-index:1}
.hero::after{content:'';position:absolute;inset: 0;background: url('../Image svg/PlastiqueTexture.png') center/cover no-repeat;opacity:1.5;pointer-events:none;z-index:1}
.hero-overlay{position:absolute;inset:0;pointer-events:none}
.hero-content{position:relative;text-align:center;color:var(--text-light);padding:0 24px;max-width:1100px;z-index:3}
.site-title{font-size:140px;margin:0 0 8px;line-height:0.92;letter-spacing:-2px}
.site-title .mono{font-weight:900;color:var(--accent);font-family: 'NokRegular', 'Impact', sans-serif}
.site-title .visuall{font-weight:800;font-family: 'AfterRegular', 'Impact', sans-serif;color:var(--accent);letter-spacing:2px}
.subtitle{font-size:22px;margin:0 0 36px;color: #fff;}
.hero-content{position:relative;text-align:center;color:var(--text-light);padding:0 20px;max-width:1100px;transform:translateY(-6%)}
.cta{display:inline-block;padding:20px 46px;color:var(--text-light);text-decoration:none;font-size:50px;border-radius:999px;position:relative;pointer-events:auto;z-index:2;max-width:90vw;word-wrap:break-word}
.cta::after{content:'';position:absolute;inset:-26px;border-radius:999px;pointer-events:none;background: url('../Image svg/DoubleOvale.svg') center/contain no-repeat;opacity:0.98;filter:drop-shadow(0 2px 0 rgba(0,0,0,0.08));z-index:-1}

/* animated title */
.animated-title .char{display:inline-block;opacity:0;transform:translateY(20px);}
.animated-title .char.show{animation:charIn 520ms ease forwards}
@keyframes charIn{
  to{opacity:1;transform:translateY(0)}
}

/* bottom-right small logo */
.bottom-logo{position:fixed;right:28px;bottom:20px;width:200px;z-index:40}

.about{background-color: rgb(5 64 63); color:var(--text-light);padding:80px 40px;position:relative}
.about::after{content:'';position:absolute;inset:0;background: url('../Image svg/PlastiqueTexture.png') center/cover no-repeat;opacity:1.5;pointer-events:none;z-index:1;bottom: 20px;}
.about-container{max-width:100%;margin:0 auto;position:relative;z-index:3}

/* unified overlay for hero + about to avoid seam */
.hero-about-wrap{position:relative}
.hero-about-wrap::after{display: none;}
.hero::before{z-index:1}
.hero-content{z-index:3}
.about-title{text-align:center;color:var(--accent);font-size:45px;margin-bottom:28px;font-family:'NokRegular', sans-serif}
.about-content{display:grid;grid-template-columns:0.8fr 500px;gap:40px;align-items:center;margin-left: 70px;padding:0 20px}
.about-text{font-family:'CCSGlyke', sans-serif;font-size:25px;line-height:1.3;text-align: left;word-wrap:break-word}
.about-text p{margin:12px 0}
.about-media{display:flex;justify-content:center}
.about-media img{width:100%;height: 400px ;transform:rotate(-8deg);box-shadow:0 20px 50px rgba(0,0,0,0.5);display:block}
.about-cta-wrap{text-align:center;margin-top:36px;position:relative;z-index:10}
.about-cta{padding:16px 48px;transition: 0.3s;font-size:44px;border:0px solid var(--accent);border-radius:999px;display:inline;text-decoration:none;color:var(--accent);position:relative;font-family: 'NokRegular', sans-serif;}
.about-cta::after{content:'';position:absolute;inset:-18px;border-radius:999px;background: none;pointer-events:none}
.about-cta:hover{letter-spacing: 10px;}

/* responsive */
@media (max-width: 1200px){
  .site-title{font-size:100px}
  .about-content{margin-left:20px}
}

@media (max-width: 1000px){
  .site-title{font-size:72px}
  .nav-list{gap:60px}
  .nav-item{font-size:18px}
  .subtitle{font-size:18px}
  .about-content{grid-template-columns:1fr;gap:30px;margin-left:0}
  .about-media img{height:300px}
  .about-text{font-size:18px;text-align:center}
}

@media (max-width: 768px){
  .site-header{padding:20px 20px}
  .nav-list{gap:30px}
  .nav-item{font-size:14px}
  .site-title{font-size:52px}
  .subtitle{font-size:14px}
  .hero-content{padding:0 16px}
  .cta{font-size:24px;padding:14px 28px;left: 0 !important;}
  .about{padding:60px 20px}
  .about-title{font-size:32px}
  .about-content{gap:20px}
  .about-media img{height:250px}
  .about-text{font-size:16px}
  .about-cta{font-size:18px;padding:10px 20px;left: 0 !important;}
  .bottom-logo{width:100px}
}

@media (max-width: 600px){
  .nav-list{gap:16px}
  .nav-oval{display:none !important}
  .site-title{font-size:36px;line-height:1}
  .subtitle{font-size:13px}
  .hero-content{padding:0 12px}
  .cta{font-size:16px;padding:12px 24px}
  .about{padding:40px 16px}
  .about-title{font-size:24px}
  .about-content{gap:16px;padding:0}
  .about-media img{width:100%;height:auto;transform:none;margin-bottom:20px}
  .about-text{font-size:14px;text-align:center;line-height:1.4}
  .about-text p{margin:8px 0}
  .about-cta{font-size:16px;padding:10px 18px}
  .bottom-logo{width:80px;right:12px;bottom:8px}
}

@media (max-width: 480px){
  .site-header{padding:16px 12px}
  .nav-list{gap:12px}
  .nav-item{font-size:12px}
  .site-title{font-size:28px}
  .subtitle{font-size:12px;margin-bottom:20px}
  .hero{height:auto;min-height:100vh;padding:100px 0 40px}
  .cta{font-size:14px;padding:10px 20px}
  .about{padding:30px 12px}
  .about-container{padding:0}
  .about-title{font-size:20px;margin-bottom:20px}
  .about-text{font-size:13px}
  .about-cta{font-size:14px;padding:8px 16px}
}

/* Processus page styles */
.processus-hero{padding:102.7px 40px;background-color: rgba(6,79,78,0.75);min-height:80vh;position:relative;overflow:hidden}
.processus-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:480px 1fr;gap:40px;align-items:center;position:relative;z-index:2}
.processus-media img{width:420px;transform:rotate(-10deg);box-shadow:0 16px 50px rgba(0,0,0,0.5);display:block;margin-bottom: 100px;}
.processus-title{font-size:110px;margin:0;color:var(--accent);font-family:'AfterRegular', sans-serif;letter-spacing:2px;margin-left: -83px;line-height:0.88;word-break:break-word}
.processus-title .small{display:inline-block;font-family:'NokRegular';margin-right:8px;position:relative;top:0}
.processus-oval{display:inline-block;margin:18px auto;padding:12px 42px;font-size:50px;border-radius:999px;border:0px solid var(--text-light);color:var(--text-light);text-decoration:none;position:relative}
.processus-text{color:var(--text-light);font-family:'CCSGlyke', sans-serif;line-height:1.3;font-size:30px;padding:0 20px}
.processus-text p{margin:12px 0}
.processus-first-img{width:200px;margin-bottom:-60px;transform:rotate(-5deg);box-shadow:0 16px 50px rgba(0,0,0,0.5);display:block}

@media (max-width: 1200px){
  .processus-hero{padding:80px 30px}
  .processus-container{gap:30px}
  .processus-media img{width:350px; right: 0 !important;}
  .processus-first-img{width:240px; display: none;}
  .processus-title{font-size:80px;margin-left:-60px}
  .processus-oval{font-size:40px;margin-left:-80px}
}

@media (max-width: 1000px){
  .processus-hero{padding:60px 20px}
  .processus-container{grid-template-columns:1fr;justify-items:center;gap:20px}
  .processus-media img{width:60%!important;height:auto;transform:none;margin-bottom:10px!important;order:2; justify-self: center; right: 0 !important;}
  .processus-first-img{width:35%;max-width:140px;margin-bottom:10px;transform:none; display: none!important;}
  .processus-content{order:1;width:100%}
  .processus-title{font-size:56px;text-align:center;margin-left:0;letter-spacing:1px}
  .processus-title .small{margin-right:4px}
  .processus-oval{margin:12px auto;padding:10px 30px;font-size:28px;display:block;width:fit-content}
  .processus-text{text-align:center;font-size:18px;padding:0 10px}
  .processus-text p{margin:8px 0;line-height:1.4}
  .about-cta-wrap{text-align:center;margin-top:60px;margin-bottom:20px;grid-area: 3;left: 0 !important;}
}

@media (max-width: 768px){
  .processus-hero{padding:50px 16px}
  .processus-container{gap:16px;margin:0 auto}
  .processus-media img{width:60% !important;transform:rotate(8deg); justify-self: center; right: 0 !important;}
  .processus-first-img{width:45%;max-width:120px; display: none!important;}
  .processus-title{font-size:40px;line-height:0.95}
  .processus-oval{padding:8px 24px;font-size:20px;margin:8px auto;text-align:center}
  .processus-text{font-size:14px;padding:0}
  .rec-badge{display:none}
  .about-cta-wrap{text-align:center;margin-top:50px;grid-area: 3;}
}

@media (max-width: 600px){
  .processus-hero{padding:40px 12px;min-height:auto}
  .processus-container{margin-top:20px}
  .processus-media img{width:75%!important;transform:rotate(5deg); justify-self: center; right: 0 !important;}
  .processus-first-img{width:50%;max-width:110px; display: none!important;}
  .processus-title{font-size:32px;margin-bottom:10px}
  .processus-title .small{font-size:24px}
  .processus-oval{padding:8px 20px;font-size:16px;margin:10px auto;text-align:center}
  .processus-text{font-size:13px;line-height:1.4}
  .about-cta-wrap{text-align:center;margin-top:40px;grid-area: 3;}
  .about-cta{left:auto !important;position:relative !important;left: 0 !important;}
}

@media (max-width: 480px){
  .processus-hero{padding:30px 12px}
  .processus-media img{width:80%!important;transform:rotate(5deg); justify-self: center; right: 0 !important;}
  .processus-first-img{width:55%;max-width:100px; display: none!important;}
  .processus-title{font-size:28px}
  .processus-oval{padding:6px 16px;font-size:14px;text-align:center}
  .processus-text{font-size:12px}
  .about-cta-wrap{text-align:center;margin-top:30px;grid-area: 3;left: 0 !important;}
  .about-cta{left:auto !important;position:relative !important}
}

/* plastique overlay for processus page */
.processus-hero{position:relative;overflow:hidden}
.processus-hero::after{content:'';position:absolute;inset:0;background: url('../Image svg/PlastiqueTexture.png') center/cover no-repeat;opacity:1.5;mix-blend-mode:overlay;pointer-events:none;z-index:1}
.processus-container{position:relative;z-index:2}

/* REC badge (top-right) */
.rec-badge{position:absolute;top:150px;right:150px;width:120px;height:auto;z-index:60;pointer-events:none;filter:drop-shadow(0 6px 12px rgba(0,0,0,0.45))}
.rec-badge:hover{opacity:1}
.rec-badge-projets{position:relative;width:120px;height:auto;z-index:60;pointer-events:none;filter:drop-shadow(0 6px 12px rgba(0,0,0,0.45))}

@media (max-width: 1200px){
  .rec-badge{top:120px;right:100px;width:100px}
}

@media (max-width: 1000px){
  .rec-badge{top:80px;right:60px;width:70px}
  .bottom-logo{width:88px;right:16px;bottom:12px}
}

@media (max-width: 768px){
  .rec-badge{top:60px;right:40px;width:60px}
}

@media (max-width: 600px){
  .rec-badge{top:40px;right:20px;width:50px}
}

/* Projets / Portfolio page styles */
.projets-pages{height:100vh;scroll-behavior:smooth;scroll-padding-top:88px}
.projets-hero{padding:100px 40px;background-color: rgba(6,79,78,0.75);min-height:100vh;position:relative;overflow:hidden;display:flex;align-items:center;scroll-snap-align:start}
.projets-hero::after{content:'';position:absolute;inset:0;background: url('../Image svg/PlastiqueTexture.png') center/cover no-repeat;opacity:1.5;mix-blend-mode:overlay;pointer-events:none;z-index:1}
.projets-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:520px 1fr;gap:40px;align-items:center;position:relative;z-index:2;min-height:auto}

.portfolio-media{display:flex;justify-content:center;align-items:center}
.portfolio-media .frame{width:460px;height:460px;transform:rotate(-12deg);background:transparent;display:flex;align-items:center;justify-content:center;box-shadow:0 28px 60px rgba(0,0,0,0.6);position:relative}
.portfolio-media .frame img{width:100%;height:100%;object-fit:cover;display:block}
.portfolio-media .frame::after{position:absolute;left:14px;right:14px;bottom:-54px;height:50px;border-top:8px solid rgba(0,0,0,0.22);transform:skewX(-8deg)}

.projets-title{margin:0;color:var(--accent);font-family:'AfterRegular', sans-serif;letter-spacing:2px}
.projets-line{line-height:0.92}
.projets-port{font-size:100px;font-family:'NokRegular';margin-bottom:6px}
.projets-folio{font-size:100px;font-family:'AfterRegular';line-height:0.88}
.projets-oval{display:inline-block;margin:18px;padding:10px 46px;font-size:40px;border-radius:999px;border:0;color:var(--text-light);text-decoration:none;position:relative}
.projets-oval::after{content:'';position:absolute;inset:-18px;border-radius:999px;pointer-events:none;background: url('../Image svg/DoubleOvale.svg') center/contain no-repeat;filter:drop-shadow(0 2px 0 rgba(0,0,0,0.08))}

/* invert layout for secondary project: image on right, content on left */
.projets-hero.projets-secondary .projets-container{grid-template-columns:1fr 520px}
.projets-hero.projets-secondary .portfolio-media{grid-column:2;justify-self:end}
.projets-hero.projets-secondary .projets-content{grid-column:1; grid-row: 1;text-align:left}
.projets-hero.projets-secondary .watch-wrap{margin-left:0;margin-right:250px}

@media (max-width:1000px){
  .projets-hero.projets-secondary .projets-container{grid-template-columns:1fr}
  .projets-hero.projets-secondary .portfolio-media{grid-column:auto;order:2}
  .projets-hero.projets-secondary .projets-content{grid-column:auto;order:1;text-align:center}
  .projets-hero.projets-secondary .watch-wrap{margin-left:0;margin-right:0;text-align:center}
}

@media (max-width:600px){
  .projets-hero.projets-secondary .watch-wrap{margin-left:0;margin-right:0 !important}
}

.projets-text{color:var(--text-light);font-family:'CCSGlyke', sans-serif;line-height:1.4;font-size:22px;margin-top:12px}
.projets-text h3{margin:0 0 8px;font-weight:700}
.projets-text p{margin:8px 0}



.watch-wrap{margin-top:36px;margin-left: 250px}
.watch-cta{display:ruby-text;font-family:'NokRegular';font-size:50px;color:var(--text-light);text-decoration:none;letter-spacing:1px;cursor: pointer;transition: 0.3s;}
.watch-accent{display:inline-block;padding:12px 18px;border-radius:8px;margin-left:18px;color:var(--accent);font-weight:800;text-decoration:underline;transition: 0.3s;}

.watch-cta:hover{font-size: 60px;transition: 0.3s;}
.watch-accent:hover{letter-spacing: 5px;transition: 0.3s;}

@media (max-width:1200px){
  .projets-hero{padding:80px 30px;min-height:auto}
  .projets-container{height:auto;gap:30px}
  .portfolio-media .frame{width:400px;height:400px}
  .projets-port{font-size:70px}
  .projets-folio{font-size:80px}
  .projets-oval{font-size:32px;padding:12px 36px;margin:16px 12px}
  .projets-text{font-size:18px}
  .watch-cta{font-size:36px}
  .watch-wrap{margin-left:100px;margin-top:0px}
  .projets-hero.projets-secondary .watch-wrap{margin-right:100px;margin-left:0}
}

@media (max-width:1000px){
  .projets-hero{padding:70px 20px;min-height:auto}
  .projets-container{grid-template-columns:1fr;justify-items:center;gap:30px}
  .portfolio-media{order:2}
  .projets-content{order:1;text-align:center;width:100%}
  .portfolio-media .frame{transform:none;width:85%;max-width:300px;height:auto}
  .projets-port{font-size:50px;text-align:center;display:block}
  .projets-folio{font-size:60px;text-align:center;display:block}
  .projets-oval{font-size:24px;padding:10px 28px;margin:14px auto;display:inline-block}
  .watch-cta{font-size:24px}
  .watch-wrap{margin-left:0;margin-right:0;text-align:center}
  .projets-text{text-align:center;font-size:16px;padding:0 10px}
  .projets-text h3{margin-top:12px}
  .rec-badge-projets{width:80px !important}
}

@media (max-width:768px){
  .projets-hero{padding:60px 16px;min-height:auto}
  .projets-container{gap:20px}
  .portfolio-media .frame{width:90%;max-width:280px;height:auto}
  .projets-port{font-size:36px}
  .projets-folio{font-size:48px}
  .projets-oval{font-size:18px;padding:10px 24px}
  .watch-cta{font-size:18px}
  .projets-text{font-size:14px;line-height:1.4}
  .watch-accent{padding:8px 12px;margin-left:8px;font-size:13px}
  .rec-badge-projets{width:70px !important;display:none}
  .about-cta-wrap{position:static !important;text-align:center;margin-top:40px;left:0 !important;bottom:auto !important}
  .about-cta{font-size:24px;padding:12px 32px}
}

@media (max-width:600px){
  .projets-hero{padding:50px 12px;min-height:auto}
  .projets-container{gap:16px;min-height:auto}
  .portfolio-media .frame{width:95%;max-width:260px;height:auto;box-shadow:0 16px 40px rgba(0,0,0,0.4)}
  .projets-port{font-size:28px;margin-bottom:4px}
  .projets-folio{font-size:36px}
  .projets-oval{font-size:14px;padding:8px 20px}
  .watch-cta{font-size:14px}
  .watch-accent{padding:6px 10px;margin-left:6px;font-size:12px}
  .projets-text{font-size:12px;line-height:1.3;margin-top:8px}
  .projets-text h3{margin-top:8px;font-size:13px}
  .projets-text p{margin:6px 0;font-size:12px}
  .about-cta-wrap{position:static !important;margin-top:30px;text-align:center}
  .about-cta{font-size:14px;padding:8px 16px}
  .rec-badge-projets{display:none !important}
}

@media (max-width:480px){
  .projets-hero{padding:40px 10px;min-height:auto;flex-direction: column;}
  .projets-container{gap:12px;height:auto}
  .portfolio-media .frame{width:100%;max-width:240px;height:auto; transform: rotate(0) !important;}
  .portfolio-media .frame::after{display:none}
  .projets-port{font-size:24px;margin-bottom:2px}
  .projets-folio{font-size:32px;line-height:0.85}
  .projets-oval{font-size:12px;padding:6px 16px;margin:10px auto}
  .watch-cta{font-size:12px}
  .watch-accent{padding:4px 8px;margin-left:4px;font-size:10px}
  .projets-text{font-size:11px;line-height:1.3}
  .projets-text h3{font-size:12px;margin:6px 0 4px}
  .projets-text p{margin:4px 0}
  .about-cta-wrap{margin-top:24px;position:static !important}
  .about-cta{font-size:12px;padding:6px 14px}
}

/* Panel / Le Matos page styles */
.panel-hero{padding:120px 40px;background-color: rgba(6,79,78,0.85);min-height:100vh;position:relative;overflow:hidden}
.panel-hero::after{content:'';position:absolute;inset:0;background: url('../Image svg/PlastiqueTexture.png') center/cover no-repeat;opacity:1.5;mix-blend-mode:overlay;pointer-events:none;z-index:1}
.panel-container{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:1fr 520px;gap:60px;align-items:center}
.panel-left{color:var(--text-light)}
.panel-title{font-family: 'NokRegular';font-size:120px;color:var(--accent);margin:0 0 20px;line-height:0.88}
.panel-matos{font-family:'AfterRegular';display:block;font-size:120px}
.panel-oval-wrap{position:relative;display:inline-block;margin:10px 0 30px}
.panel-oval{width:320px;display:block}
.panel-oval-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--text-light);font-size:38px;letter-spacing:2px}
.panel-media{margin-top:18px}
.panel-frame{width:520px;height:320px;background:transparent;display:flex;align-items:center;justify-content:center;}
.panel-frame img{width:100%;height:100%;display:block;z-index: 120;}
.panel-desc{margin-top:20px;font-size:20px;line-height:1.2;max-width:150px}
.panel-subtitle{font-weight:700;margin:0;color:var(--text-light)}
.panel-model{font-size:26px;margin:8px 0;color:#c5e4ec}
.panel-text{opacity:1}

.panel-right{color:var(--text-light);text-align:right;position:relative;min-height:560px;bottom: 200px;}

/* Objective side layout (align like reference) */
.panel-right .panel-oval-wrap{position:absolute;right:120px;top:40px;z-index:25;display:block}
.panel-right .panel-oval{width:380px;}

.panel-desc.right{position:absolute;right:120px;top:140px;width:260px;margin:0;text-align:right;z-index:26}

/* Ensure oval above lens */
.panel-right .panel-oval-wrap.right{z-index:40}


/* Bottom row overrides for additional panels placed under the main two */
.panel-bottom-row{margin-top:40px}
.panel-bottom-row .panel-right{position:relative;bottom:0;text-align:right}
.panel-bottom-row .panel-left{margin-top:0}
.panel-bottom-row .panel-frame{box-shadow:0 20px 40px rgba(0,0,0,0.45)}


@media (max-width:1000px){
  .panel-container{grid-template-columns:1fr;gap:30px;padding-top:80px}
  .panel-frame{width:80%;height:auto}
  .panel-title{font-size:64px;text-align:center}
  .panel-matos{font-size:64px}
  .panel-oval{display:none}
  .panel-desc{text-align:center}
  .panel-right .panel-desc{text-align:center}
}

/* Devis page styles */
.devis-hero{padding:120px 40px;background-color: rgba(6,79,78,0.85);min-height:100vh;position:relative;overflow:hidden}
.devis-hero::after{content:'';position:fixed;inset:0;background: url('../Image svg/PlastiqueTexture.png') center/cover no-repeat;opacity:1.2;mix-blend-mode:overlay;pointer-events:none;z-index:1}
.devis-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:540px 1fr;gap:60px;align-items:start;position:relative;z-index:2}
.devis-left{color:var(--text-light);position:relative}
.devis-title{margin:0 0 24px;font-family:'AfterRegular';line-height:0.65;text-align:center; z-index: 10;}
.devis-hand{font-family:'NokRegular';font-size:96px;color:var(--accent);display:block;padding-right:200px;}
.devis-big{font-size:100px;color:var(--accent);font-weight:700;padding-left:200px;}
.devis-photo-wrap{margin-top:-60px}
.devis-photo-frame{width:440px;height:520px;background:transparent;display:flex;align-items:center;justify-content:center;box-shadow:0 28px 60px rgba(0,0,0,0.6);transform:rotate(-6deg);position:relative}
.devis-photo-frame img{width:100%;height:100%;object-fit:cover;display:block}
.devis-bottom-logo{position:absolute;left:18px;bottom:-24px;width:150px;z-index:3}

/* Questionnaire (QDEVIS shape) */
.devis-right{align-items:flex-start;display:flex;justify-content:flex-end;padding-top:24px}
.qdevis{width:560px;height:auto;position:relative;padding:0px 48px 28px 48px;display:flex;flex-direction:column;gap:20px;justify-content:flex-start}
.qdevis .devis-field{background:transparent;padding:0;margin:0;min-height:56px;display:flex;flex-direction:column;justify-content:flex-start}
.qdevis .devis-field:not(.large) .devis-field-content{height:56px;border:2px solid var(--accent);border-radius:999px;padding:12px 18px;background:transparent}
.qdevis .devis-field.large .devis-field-content{border:2px solid var(--accent);border-radius:22px;padding:14px 16px;background:transparent;min-height:200px}
.qdevis .devis-field.large{min-height:200px}
.qdevis .devis-field-label{font-size:20px;letter-spacing:2px;margin-bottom:8px;color:var(--accent);text-transform:uppercase;font-weight:700}
.qdevis .devis-field-content{background:transparent;border:0;color:var(--text-light);font-size:16px;outline:none;width:100%;box-sizing:border-box}
.qdevis select{appearance:none;-webkit-appearance:none;background:transparent}
.qdevis textarea{resize:vertical}
.qdevis .devis-submit{background:var(--accent);color:#043;border:0;padding:12px 22px;border-radius:999px;font-weight:700;cursor:pointer;align-self:flex-end;margin-top:10px}
.qdevis .devis-submit:hover{opacity:0.95}
.qdevis input::placeholder, .qdevis textarea::placeholder{color:rgba(255,255,255,0.65)}

@media (max-width:1200px){
  .devis-hero{padding:100px 30px}
  .devis-container{gap:40px}
  .devis-hand{font-size:80px;padding-right:150px}
  .devis-big{font-size:80px;padding-left:150px}
  .devis-photo-frame{width:380px;height:450px}
  .qdevis{width:500px;padding:0px 40px 24px 40px}
}

@media (max-width:1000px){
  .devis-hero{padding:80px 24px}
  .devis-container{grid-template-columns:1fr;justify-items:center;gap:30px}
  .devis-title{text-align:center}
  .devis-hand{font-size:64px;padding-right:0;padding-left:0;text-align:center}
  .devis-big{font-size:56px;padding-left:0;padding-right:0;text-align:center}
  .devis-photo-frame{width:85%;max-width:380px;height:auto;transform:none}
  .devis-right{width:100%;justify-content:center;padding-top:20px}
  .qdevis{width:90%;max-width:500px;height:auto;padding:28px 20px;background-size:cover}
  .qdevis .devis-field.large{min-height:120px}
}

@media (max-width:768px){
  .devis-hero{padding:60px 16px}
  .devis-container{gap:24px;margin:0 auto}
  .devis-hand{font-size:48px}
  .devis-big{font-size:44px}
  .devis-photo-frame{width:90%;height:auto}
  .qdevis{width:95%;padding:24px 16px;gap:16px}
  .qdevis .devis-field-label{font-size:16px;letter-spacing:1px}
  .qdevis .devis-field:not(.large) .devis-field-content{height:48px;padding:10px 14px}
  .qdevis .devis-field-content{font-size:14px}
  .qdevis .devis-field.large .devis-field-content{min-height:140px;padding:12px 14px}
  .qdevis .devis-submit{padding:10px 18px;font-size:14px}
}

@media (max-width:600px){
  .devis-hero{padding:50px 12px;min-height:auto}
  .devis-container{gap:20px}
  .contact-header{padding:30px 12px 0 12px !important}
  .contact-header .site-title{font-size:56px !important}
  .contact-header .subtitle{font-size:13px !important;margin:8px auto 24px !important}
  .devis-hand{font-size:40px}
  .devis-big{font-size:36px}
  .devis-photo-frame{width:100%;height:auto}
  .devis-bottom-logo{width:100px}
  .qdevis{width:100%;padding:20px 12px;gap:14px}
  .qdevis .devis-field-label{font-size:14px;letter-spacing:0.5px;margin-bottom:6px}
  .qdevis .devis-field:not(.large) .devis-field-content{height:44px;padding:8px 12px}
  .qdevis .devis-field-content{font-size:13px}
  .qdevis .devis-field.large .devis-field-content{min-height:120px;padding:10px 12px;font-size:13px}
  .qdevis .devis-submit{padding:8px 16px;font-size:13px;align-self:center}
  #infos{margin-left:0 !important;font-size:18px;text-align:center}
  #infos p{margin:10px 0}
  .devis-left > div:first-child .cta{font-size:32px;padding:16px 32px}
  .devis-right > div:first-child .cta{font-size:32px;padding:16px 32px}
}

@media (max-width:480px){
  .devis-hero{padding:40px 10px}
  .contact-header{padding:20px 10px 0 10px !important}
  .contact-header .site-title{font-size:36px !important;margin:0 0 6px !important}
  .contact-header .subtitle{font-size:12px !important;margin:6px auto 20px !important}
  .devis-hand{font-size:32px}
  .devis-big{font-size:28px}
  .devis-photo-frame{width:100%;height:auto;box-shadow:0 16px 40px rgba(0,0,0,0.4)}
  .devis-bottom-logo{width:80px}
  .qdevis{width:100%;padding:16px 10px;gap:12px}
  .qdevis .devis-field-label{font-size:12px;margin-bottom:4px}
  .qdevis .devis-field:not(.large) .devis-field-content{height:40px;padding:6px 10px}
  .qdevis .devis-field-content{font-size:12px}
  .qdevis .devis-field.large{min-height:100px}
  .qdevis .devis-field.large .devis-field-content{min-height:100px;padding:8px 10px;font-size:12px}
  .qdevis .devis-submit{padding:6px 14px;font-size:12px}
  #infos{font-size:14px}
  #infos p{margin:8px 0;word-wrap:break-word}
  .devis-left > div:first-child .cta{font-size:24px;padding:12px 24px}
  .devis-right > div:first-child .cta{font-size:24px;padding:12px 24px}
}

/* Voir Plus section (mini-projets) */
.voir-plus-section{padding:80px 40px;background-color: rgba(6,79,78,0.75);min-height:400px;position:relative;overflow:hidden}
.voir-plus-section::after{content:'';position:absolute;inset:0;background: url('../Image svg/PlastiqueTexture.png') center/cover no-repeat;opacity:1.5;mix-blend-mode:overlay;pointer-events:none;z-index:1}
.voir-container{max-width:1200px;margin:0 auto;position:relative;text-align:center}
.voir-title{font-family:'NokRegular', sans-serif;color:var(--accent);font-size:110px;margin:0 0 40px;letter-spacing:2px;z-index: 10;}
.voir-accent{color:var(--accent)}
.voir-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start}
.mini-project{position:relative;overflow:hidden;border-radius:6px;transition: 0.3s;}
.mini-project:hover{transform:scale(1.05);transition:0.4s ease;}
.mini-thumb img{width:220px;height:220px;object-fit:cover;display:block;box-shadow:0 20px 40px rgba(0,0,0,0.5); justify-self: anchor-center;}
.mini-title{position:absolute;left:28px;bottom:20px;color:var(--accent);font-family:'NokRegular', sans-serif;font-size:40px;margin:0;text-shadow:0 2px 0 rgba(0,0,0,0.35)}

@media (max-width:1200px){
  .voir-plus-section{padding:70px 30px}
  .voir-title{font-size:90px;margin-bottom:35px}
  .voir-grid{gap:24px}
  .mini-thumb img{width:200px;height:200px}
  .mini-title{font-size:32px;left:20px;bottom:16px}
}

@media (max-width:1000px){
  .voir-grid{grid-template-columns:repeat(2,1fr)}
  .voir-title{font-size:64px}
  .mini-thumb img{height:160px;width:160px}
  .mini-title{font-size:24px;left:16px;bottom:12px}
}

@media (max-width:768px){
  .voir-plus-section{padding:60px 20px;min-height:auto}
  .voir-title{font-size:50px;margin-bottom:30px}
  .voir-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .mini-thumb img{height:140px;width:140px}
  .mini-title{font-size:18px;left:12px;bottom:10px}
}

@media (max-width:600px){
  .voir-grid{gap:16px}
  .voir-title{font-size:36px;margin-bottom:24px}
  .mini-title{font-size:16px;left:16px;bottom:12px}
  .mini-thumb img{height:180px;width:100%}
}

@media (max-width:480px){
  .voir-plus-section{padding:40px 12px}
  .voir-title{font-size:28px;margin-bottom:20px}
  .voir-grid{gap:12px}
  .mini-title{font-size:14px;left:12px;bottom:8px}
  .mini-thumb img{height:160px;width:100%}
}