/* styles.css — Apartech theme (professional / natural) */

/* Palette */

:root{

  --bg: #d0cdf1;         /*couleur fond de page, bleu pastel */

  --card: #fffaf6;

  --text: #163425;       /* deep forest green */

  --muted: #6b6b6b;

  --accent: #c55a1f;     /* burnt orange (button) */

  --accent-2: #2f9bbf;   /* steel blue accent */

  --radius: 10px;

  --container: 1100px;

  --max-width: 1200px;

  --gap: 1.25rem;

  font-size: 16px;

  -webkit-font-smoothing:antialiased;

  -moz-osx-font-smoothing:grayscale;

}



/* Reset & base */

*{box-sizing:border-box}

html,body{height:100%}

body{

  margin:0;

  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;

  background:var(--bg);

  color:var(--text);

  line-height:1.5;

}



/* layout container */

.container{

  width:calc(100% - 2rem);

  max-width:var(--container);

  margin:0 auto;

  padding:1rem;

}



/* Header */

.site-header{

  position:sticky; top:0; z-index:40;

  background:linear-gradient(0deg, rgba(129,214,228,0.9), rgba(129,214,228,0.6)); /* couleur bandeau supérieur, bleu magenta */

  backdrop-filter: blur(4px);

  border-bottom:1px solid rgba(20,30,20,0.03);

}

.header-inner{

  display:flex; align-items:center; justify-content:space-between;

  gap:1rem;

}

.brand{display:flex; align-items:center; gap:.6rem}

.logo{height:88px; width:auto; display:block}

.brand-text{font-family:"Poppins",sans-serif; font-weight:600; color:var(--text); letter-spacing:1px}



/* Nav */

.primary-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:1rem}

.primary-nav a{color:var(--text); text-decoration:none; font-weight:500; padding:.45rem .6rem; border-radius:6px}

.primary-nav a:hover{background:rgba(20,30,20,0.04)}



/* mobile menu toggle */

.nav-toggle{display:none; background:none; border:0; padding:.4rem; cursor:pointer}

.nav-toggle span{display:block; width:22px; height:2px; background:var(--text); margin:4px 0; border-radius:2px}



/* HERO */

.hero{padding:2.25rem 0}

.hero-grid{display:grid; grid-template-columns:1fr 460px; gap:2rem; align-items:center}

.hero h1{

  font-family:"Poppins",sans-serif;

  font-weight:700;

  font-size:2.4rem;

  margin:0 0 .6rem;

  color:var(--text);

}

.lead{color:var(--muted); margin-bottom:1rem}

.hero-img{width:100%; height:auto; border-radius:8px; box-shadow: 0 4px 14px rgba(20,30,20,0.05)}



/* Buttons */

.btn{display:inline-block; text-decoration:none; padding:.65rem 1rem; border-radius:8px; font-weight:600; font-family:"Poppins",sans-serif}

.btn-primary{background:var(--text); color:#fff}

.btn-outline{background:transparent; color:var(--text); border:1px solid rgba(20,30,20,0.06)}

.btn-secondary{background:transparent; color:var(--text); border:2px solid rgba(20,30,20,0.06)}

.btn-primary:hover{opacity:.95}

.btn-accent{background:var(--accent); color:#fff}



/* Sections */

.section{padding:2rem 0}

.about-grid{display:grid; grid-template-columns:1fr 360px; gap:2rem; align-items:center}

.about h2{font-family:"Poppins",sans-serif; font-weight:600; font-size:1.6rem; margin:0 0 .6rem}



/* Projects gallery */

.projects .gallery-grid{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:1rem;

  margin-top:1rem;

}

.card{background:var(--card); padding:.5rem; border-radius:10px; box-shadow:0 4px 10px rgba(20,30,20,0.03)}

.card img{width:100%; height:200px; object-fit:cover; border-radius:8px}

.card figcaption{font-size:.95rem; color:var(--muted); padding-top:.4rem}



/* Videos */

.video-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}

.video-grid iframe{width:100%; height:220px; border-radius:8px}



/* Contact grid */

.contact-grid{display:grid; grid-template-columns:1fr 320px; gap:2rem; align-items:start}

.contact-form label{display:block; margin-top:.6rem; font-weight:600}

.contact-form input, .contact-form textarea{

  width:100%; padding:.65rem; margin-top:.3rem; border-radius:8px; border:1px solid rgba(10,10,10,0.06); background:#fff;

  font-family:inherit; color:var(--text);

}

.form-row{display:flex; gap:1rem; align-items:center; margin-top:1rem}

.link-inline{color:var(--accent-2); text-decoration:none}



/* Footer */

.site-footer{border-top:1px solid rgba(20,30,20,0.03); padding:1.25rem 0; margin-top:2rem}

.footer-inner{display:flex; justify-content:space-between; gap:1rem; align-items:center}

.footer-inner p{margin:0; color:var(--muted)}



/* Lightbox */

.lightbox{

  position:fixed; inset:0; display:none; align-items:center; justify-content:center;

  background:rgba(10,10,10,0.6); padding:2rem; z-index:120;

}

.lightbox.open{display:flex}

.lightbox-img{max-width:90%; max-height:80%; border-radius:8px}

.lightbox-close{position:absolute; top:18px; right:18px; background:transparent; color:#fff; border:0; font-size:28px; cursor:pointer}



/* Responsive */

@media (max-width:1000px){

  .hero-grid{grid-template-columns:1fr; text-align:left}

  .about-grid{grid-template-columns:1fr; text-align:left}

  .projects .gallery-grid{grid-template-columns:repeat(2,1fr)}

  .video-grid{grid-template-columns:1fr}

  .contact-grid{grid-template-columns:1fr}

}



@media (max-width:720px){

  .primary-nav{display:none}

  .nav-toggle{display:block}

  .brand-text{display:none}

  .projects .gallery-grid{grid-template-columns:repeat(2,1fr)}

}



/* smaller phones */

@media (max-width:420px){

  .hero h1{font-size:1.6rem}

  .card img{height:150px}

}