:root {
  --main-color: #181848;
  --accent-color: #16d9fa;
  --secondary-color: #FAFAFA;
  --btn-hover: #1031ae;
  --font: 'Montserrat', Arial, sans-serif;
  --text-color: #222;
}
* { box-sizing: border-box; }
body, html {
  font-family: var(--font);
  color: var(--text-color);
  background: var(--secondary-color);
  margin: 0; padding: 0; width: 100vw; min-height: 100vh; overflow-x: hidden;
}
header, footer { background: var(--main-color); color: white; }

.navbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1.2rem; position: relative;
  min-height: 54px;
}
.logo { height: 2.3rem; }
.nav-links { display: flex; gap: 1.3rem; list-style: none; padding: 0; margin: 0;}
.nav-links a {
  color: white; text-decoration: none; padding: 0.5rem 1rem; border-radius:6px;
  font-weight:700; font-size:1rem; transition: background 0.25s;
}
.nav-links a:hover { background: var(--accent-color); color: var(--main-color); }
.burger {
  display: none; background: none; border: none;
  font-size: 2.2rem; color: white; cursor: pointer; margin-left: 1rem;
}

.mobile-nav {
  display: none;
  flex-direction: column;
  position: absolute; top: 54px; left: 0; right: 0;
  background: var(--main-color);
  z-index: 99;
  box-shadow: 0 7px 18px #1116;
  padding: 0.6rem 0 1.2rem 0;
}
.mobile-nav.open { display: flex; }
.mobile-nav li { list-style:none;margin: .6rem 0; text-align:center;}
.mobile-nav li a {
  color: white; font-size: 1.16rem; text-align:center; display:block; padding: .7rem 0; font-weight:bold;
}

.hero {
  text-align:center; padding: 3rem 1.2rem 2.5rem 1.2rem;
  background-size: cover; background-position: center;
}
.hero h1 { font-size: 2.2rem; font-weight:900; margin-bottom:.8rem; }
.hero p { font-size: 1.18rem; margin: 1.1rem auto 1.5rem; color: #e3e4fa; max-width:600px;}
.cta, .btn-anim, button {
  background: var(--accent-color); color: white; border: none; border-radius: 24px;
  padding: .7rem 1.8rem; font-size: 1.17rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 16px #16d9fa33; margin: .8rem 0; display:inline-block;
  transition: transform 0.15s, background 0.3s;
  font-family: var(--font);
}
.btn-anim:hover {background: var(--btn-hover); transform: scale(1.08);}

main { max-width: 1050px; margin: auto; padding: 0.6rem;}
section { margin: 1.7rem 0 2.2rem 0; }
.about, .services, .gallery, .testimonials, .contact { padding: 1rem 0.5rem; }
.about-img { width: 95vw; max-width:340px;
  display: block; margin: 1.2rem auto; border-radius: 12px;
  box-shadow: 0 10px 35px #16d9fa42;
}
.services-list, .gallery-list, .testimonials-list {
  display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:center; }
.card, .testimonial {
  background: white; border-radius: 10px; box-shadow: 0 2px 10px #0001;
  padding: 1.1rem .7rem; min-width: 0; max-width: 340px; flex: 1 1 220px; text-align:center;}
.card img { width: 48px; margin-bottom:.8rem;}
.card h3 { color: var(--main-color); margin-bottom: .2rem; font-size:1.13rem; font-weight:700;}
.services-list {gap: .9rem;}
.gallery-list img { width:95vw; max-width:260px; border-radius:9px; margin: .3rem;}
.testimonial { min-width:0; }

/* FORMULAIRE DE CONTACT */
.contact-form {
    display:flex; flex-direction:column; gap:.8rem; max-width:420px;
    margin:1.5rem auto 0; background:white;padding:1.2rem 1.5rem;
    border-radius:10px; box-shadow:0 2px 8px #0001;
}
.contact-form input, .contact-form textarea {
    padding: .5rem; border:1px solid #e6e6ea; border-radius:7px;
    font-size:1rem; font-family:var(--font);
}
.contact-form button { font-size:1.1rem; align-self:center;}

/* STYLE reCAPTCHA */
.g-recaptcha {
    margin: .8rem auto;
    display: flex;
    justify-content: center;
}
#form-result {
    font-size: 1.03rem;
    letter-spacing: 0.01em;
    text-align: center;
    font-weight: 500;
}
#logo-link {
    display: inline-block;
}
#logo-link:hover .logo {
    opacity: 0.8;
    transition: opacity 0.15s;
}

footer { text-align:center; padding: 1.5rem 0;}
.socials {margin:.7rem 0;}
.socials a { color: var(--accent-color); margin: 0 0.7rem; text-decoration: none; font-weight:700;}
.socials a:hover {text-decoration: underline;}

/* Mobile adaptation */
@media (max-width: 950px) {
  main {padding: 0;}
  .about-img {width:98vw; max-width: 340px;}
}
@media (max-width: 700px) {
  .nav-links {display: none;}
  .burger {display: block;}
  .about, .services-list, .gallery-list, .testimonials-list { flex-direction: column; gap: .7rem;}
  .hero h1 { font-size: 1.25rem;}
  .hero, section {padding: 1.1rem 0.2rem; }
  .card, .testimonial {max-width:98vw; margin:auto;}
  .about-img, .gallery-list img {width: 90vw !important;}
  .contact-form {
      max-width: 98vw;
      padding: 1rem 0.8rem;
  }
  .g-recaptcha {
      transform: scale(0.9);
      margin: .5rem auto;
  }
}

/* Corrections mobile spéciales */
@media (max-width: 700px) {
  html, body {
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  main, section {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-left: 0.3rem !important;
    padding-right: 0.3rem !important;
  }
  .mobile-nav {
    position: absolute;
    left: 0; right: 0;
    min-width: 100vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
    z-index: 999;
    border-bottom: 1px solid #16d9fa22;
    background: var(--main-color);
    top: 54px;
  }
}

/* SECTION TARIFS */
.pricing {
  text-align: center;
  padding: 3rem 1rem;
}
.pricing h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 2rem;
}
.pricing-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.pricing-card {
  background: white;
  border-radius: 15px;
  padding: 2rem 1.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s;
  border: 2px solid transparent;
}
.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.pricing-card.popular {
  border-color: #16d9fa;
  background: linear-gradient(135deg, #f8fcff 0%, #ffffff 100%);
}
.pricing-card.recommended {
  border-color: #ff6b35;
  background: linear-gradient(135deg, #fff8f6 0%, #ffffff 100%);
}
.badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-color);
  color: white;
  padding: 0.3rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}
.recommended-badge {
  background: #ff6b35;
}
.pricing-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--main-color);
  margin: 1rem 0;
}
.price-container {
  margin: 1.5rem 0;
}
.tarif {
  font-size: 2rem;
  font-weight: 900;
  color: var(--accent-color);
  line-height: 1;
}
.tarif-detail {
  font-size: 0.9rem;
  color: #666;
  margin-top: 0.3rem;
}
.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}
.pricing-card li {
  padding: 0.5rem 0;
  color: #555;
  font-weight: 500;
}
.btn-pricing {
  background: var(--main-color);
  color: white;
  padding: 0.8rem 2rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
  margin-top: 1rem;
  transition: background 0.3s, transform 0.2s;
}

.btn-pricing-options{
  background: #16d9fa;
  color: white;
  padding: 0.8rem 2rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
  margin-top: 1rem;
  transition: background 0.3s, transform 0.2s;
}

.btn-pricing:hover {
  background: var(--btn-hover);
  transform: scale(1.05);
}
.popular .btn-pricing {
  background: var(--accent-color);
}
.recommended .btn-pricing {
  background: #ff6b35;
}

/* RESPONSIVE TARIFS */
@media (max-width: 700px) {
  .pricing-table {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .pricing-card {
    margin: 0 0.5rem;
  }
  .pricing h2 {
    font-size: 2rem;
  }
}
/* LOGO TEXTE */
.logo-text {
  text-decoration: none;
  display: inline-block;
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.2s;
}
.logo-text:hover {
  transform: scale(1.05);
}
.logo-hard {
  color: white; /* Première couleur */
}
.logo-web {
  color: var(--accent-color); /* Deuxième couleur (bleu cyan) */
}

/* Adaptation mobile */
@media (max-width: 700px) {
  .logo-text {
    font-size: 1.5rem;
  }
}

.projets-galerie {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  border-color: #16d9fa;
}

.projet-card {
  position: relative;
  width: 320px;
  border-radius: 15px;
  overflow: hidden;
  border: 2px solid #181848;
  border: px solid transparent;
  box-shadow: 0 6px 24px rgba(0,0,0,0.10);
  text-decoration: none;
  transition: transform 0.2s;
}

.projet-card:hover {
  transform: scale(1.03);
  box-shadow: 0 16px 32px rgba(0,0,0,0.13);
}

.projet-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.projet-info {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 20px 12px 16px 12px;
  background: #ffffff;
  color: #000000;
  font-size: 1.12rem;
  font-weight: 500;
  text-align: left;
  left: 0;
}
@media (max-width:850px) {
  .projets-galerie { flex-direction: column; align-items: center;}
  .projet-card { width: 90vw; max-width: 350px;}
}

:root {
  --options-col: 4;    /* nombre de colonnes desktop (max) */
  --options-rows: 2;   /* <<< MODIFIE ça pour choisir le nombre de lignes visibles */
}
.options-grid {
  display: grid;
  padding-top: 3em;
  grid-template-columns: repeat(var(--options-col), 1fr);
  gap: 26px;
  justify-items: center;
  align-items: stretch;
  max-width: 1340px;
  margin: 0 auto 2em auto;
  /* Affiche que le nombre de lignes voulu */
  max-height: calc(var(--options-rows) * 385px + (var(--options-rows) - 1) * 26px);
  overflow: hidden;
  transition: max-height .35s;
}
@media (max-width:1200px) {.options-grid { grid-template-columns: repeat(2, 1fr);}}
@media (max-width:700px) {.options-grid { grid-template-columns: 1fr;}}

:root {
  --options-col: 4;
  --options-rows-premier: 1; /* Affiche d'abord 1 ligne (4 options) */
  --options-rows-tous: 10;   /* Affiche tout, ou adapte ce nombre */
}
.options-grid {
  display: grid;
  grid-template-columns: repeat(var(--options-col), 1fr);
  gap: 26px;
  justify-items: center;
  align-items: stretch;
  max-width: 1340px;
  margin: 0 auto 2em auto;
  max-height: calc(var(--options-rows-premier) * px + (var(--options-rows-premier) - 1) * 26px)!important;
  overflow: hidden;
  transition: max-height .35s;
}
.options-grid.open {
  max-height: calc(var(--options-rows-tous) * 385px + (var(--options-rows-tous) - 1) * 26px)!important;
}
#voir-plus-wrap {
  text-align: center; margin-bottom: 3em; margin-top: -2.6em;
}
#voir-plus-btn {
  background: #08d6f6; color: #fff; font-weight: bold; border: none; border-radius: 20px;
  padding: 15px 52px; font-size: 1.2em; box-shadow: 0 2px 15px #19c9fd45; cursor: pointer; transition: .15s;
}
#voir-plus-btn:hover { background:#0191bb; }
@media (max-width:1200px) {.options-grid { grid-template-columns: repeat(2, 1fr);}}
@media (max-width:700px) {.options-grid { grid-template-columns: 1fr;}}
.options-card {
  background: #fff; border-radius:24px; box-shadow:0 3px 18px #dff0fa70;
  border:2.5px solid #15deff20; max-width:330px; min-width:0; width:100%;
  padding:1.9em 1.5em 2.3em 1.5em; text-align:center; position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  height: 366px;
  }
.options-card .badge { position:absolute; top:-21px; left:50%; transform:translateX(-50%); background:#25d3fd; color:#fff; font-weight:bold; border-radius:13px; font-size:0.97em; padding:3.5px 22px;}
.options-title { font-weight:700; font-size:1.22em; color:#222; margin-bottom:13px;}
.options-price { color:#08d6f6; font-size:2em; font-weight:900; margin:0 0 10px 0;}
.options-details { font-size:1.08em; line-height:1.44; color:#4a5f6b; margin-bottom:17px;}
.options-btn {
  background: #08d6f6; color:#fff; border:none; border-radius:19px; padding:14px 0; width:97%;
  font-weight:bold; font-size:1.05em; margin-bottom:3px; margin-top:10px; cursor:pointer;transition:.14s;}
.options-btn:hover { background:#0191bb;}
/* Modale */
.options-modal-bg {display:none; position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:2000;background:rgba(24,36,46,0.31);backdrop-filter:blur(6px);}
.options-modal-bg.active {display:block;}
.options-modal-box {position:fixed;top:0;left:0;width:100vw;height:100vh;max-width:none;max-height:none;min-width:0;min-height:0;
background:#fff; border-radius:0; box-shadow:none; padding:0; display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2023;}
#options-modal-content {width: 100vw; height: calc(100vh - 58px); display: flex; align-items: center; justify-content: center; overflow:auto;}
#options-modal-close {position:absolute;top:13px;right:18px; background: #08d6f6;color:#fff;font-weight:bold;border:none;
border-radius:16px;padding:10px 28px;font-size:1.1em;cursor:pointer;}
#modal-map {width: min(700px,92vw);height: min(420px,70vw);margin:auto;border-radius:14px;box-shadow:0 3px 18px #dff0fa30;}
#modal-cube {display:block;width:98vw;height:94vh;max-width:1300px;max-height:94vh;background:#dde9fb;margin:auto;border-radius:12px;}
.mini-blog {width:92vw;max-width:730px;height:calc(90vh - 70px);overflow:auto;margin:auto;background:#f8fafe;padding:1.5em;border-radius:20px;box-shadow:0 3px 18px #dff0fa30;}
.btn {background:#08d6f6; padding:7px 19px; color:#fff; border-radius:5px; border:none; font-weight:bold; margin-top:1em;}

@media (max-width:650px){.options-grid{gap:12px;}.options-card{padding:1.2em .5em 1.5em .5em;max-width:99vw;}.options-modal-box{padding:.2em .8em;}}

.options-modal-box {
  position:fixed;
  top:0; left:0; width:100vw; height:100vh;
  background:rgba(255, 255, 255, 0.486); /* ou #fff, selon visuel désiré */
  display:flex;align-items:center;justify-content:center;border-radius:24px;
}
#options-modal-content {width:92vw;max-width:1100px;height:85vh;}