@charset "UTF-8";
html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: "Biome";
}

header {
  width: 100%;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #ffffff;
}

.footer {
  width: 100%;
  height: 50px;
}

.content-wrapper {
  flex: 1;
  width: 100%;
  background: #ffffff;
  display: flex;
  justify-content: center;
  padding-top: 10px;
  box-sizing: border-box;
}

@font-face {
  font-family: "Biome";
  src: url("../font/Biome.woff2") format("woff2"), url("../font/Biome.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
header {
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid rgba(28, 31, 34, 0.2235294118);
}

.header-top {
  height: 35px;
  background: rgba(28, 31, 34, 0.5803921569);
  border-bottom: 1px solid rgba(28, 31, 34, 0.2235294118);
}

/* barres centrées */
.header-bottom {
  min-width: 768px;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: 85px;
  background: #ffffff;
  padding: 0 10px;
  box-sizing: border-box;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 16px;
  color: rgba(28, 31, 34, 0.9058823529);
}

/* logo */
.header-bottom .logo {
  grid-column: 1/2;
  justify-self: start;
  width: 80px;
}
.header-bottom .logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* nav centrée */
.header-bottom .nav {
  grid-column: 2/3;
  justify-self: center;
  display: flex;
  gap: 60px;
}

/* liens nav */
.nav-link {
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(28, 31, 34, 0.8745098039);
}
.nav-link.active {
  text-decoration: none;
  color: #b1b3b5;
}

@media (max-width: 500px) {
  .header-bottom .menu ul.submenu li a {
    transition: background-color 0.15s ease;
  }
  .header-bottom .menu ul.submenu li a:hover {
    background: #e0e4e8;
  }
  .header-bottom {
    max-width: 100%;
    min-width: 0;
    width: 100%;
    grid-template-columns: 1fr auto 1fr;
    column-gap: 30px;
  }
  .header-bottom .nav {
    gap: 15px;
    display: none;
  }
  .header-bottom .menu {
    display: block;
    grid-column: 1/2;
    justify-self: end;
  }
  .header-bottom .logo {
    grid-column: 2/3;
    justify-self: center;
  }
  .header-bottom .contact {
    justify-self: start;
  }
  /* Mobile: make submenu an opaque overlay so page content isn't visible behind */
  .header-bottom .menu {
    position: relative;
    z-index: 3000;
  }
  .header-bottom .menu ul.submenu {
    position: fixed;
    left: 0;
    right: 0;
    transform: none; /* override desktop centering (left:50% + translateX(-50%)) */
    top: calc(35px + 85px);
    width: auto;
    max-height: calc(100vh - (35px + 85px));
    background: #f5f6f7;
    z-index: 2500;
    /* keep existing display logic; only enforce overlay behavior */
    margin: 0;
    box-shadow: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
body[data-page=savoir-faire] .nav-link-savoirfaire {
  color: #1d84b4;
}

body[data-page=produits] .nav-link-produits {
  color: #1d84b4;
}

body[data-page=contact] .nav-link-contact {
  color: #1d84b4;
}

footer {
  background: rgba(28, 31, 34, 0.5803921569);
  min-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
}

.footer-text {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  color: white;
  font-family: "Biome";
  font-size: 13px;
  text-align: center;
}

.footer-text a {
  color: white;
  text-decoration: none;
}

.footer-text a:hover {
  text-decoration: underline;
}

@media (max-width: 550px) {
  .footer-text {
    flex-direction: column;
    gap: 4px;
  }
}
.content {
  background: #ffffff;
  min-width: 768px;
  max-width: 1200px;
}

.content h1 {
  font-family: "Biome", sans-serif;
}

@media (max-width: 768px) {
  .content {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
}
body[data-page=contact] #form button[type=submit] {
  width: auto;
  min-width: 100px;
  padding: 14px 32px;
  background-color: rgba(28, 31, 34, 0.5803921569);
  color: #fff;
  display: block;
  margin: 32px auto 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* Uniformiser l'espace top/bottom sur Contact */
body[data-page=contact] .content-wrapper {
  padding-top: 0px;
  padding-bottom: 0px;
}

/* Neutraliser les marges Tailwind qui “poussent” le footer */
body[data-page=contact] .max-w-xl.mx-auto {
  margin-bottom: 0 !important;
}

body[data-page=contact] .m-7 {
  margin-bottom: 0 !important;
}

body[data-page=contact] .content h1 {
  color: rgba(28, 31, 34, 0.8745098039) !important;
}

body[data-page=contact] .content h1 + p {
  color: rgba(28, 31, 34, 0.6784313725) !important;
}

body[data-page=contact] .content h1 + p {
  position: relative;
  padding-bottom: 20px;
}

body[data-page=contact] .content h1 + p::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 360px; /* largeur FIXE */
  height: 1px;
  background-color: #C7C9CC;
  transform: translateX(-50%);
}

/* =========================
   PAGE PRODUITS – TITRE
   (COPIE STRICTE savoir-faire)
   ========================= */
body[data-page=produits] .content-wrapper {
  padding-top: 0; /* comme Contact */
}

body[data-page=produits] .content {
  width: 100%;
}

body[data-page=produits] .content > h1 {
  text-align: center;
  margin: 0;
  margin-top: 32px;
  margin-bottom: 12px;
  font-size: 1.5rem;
  line-height: 2.25rem;
  font-weight: 600;
  color: rgba(28, 31, 34, 0.8745098039);
}
body[data-page=produits] .content > h1 + p {
  text-align: center;
  margin: 0;
  color: rgba(28, 31, 34, 0.6784313725);
  margin-bottom: 20px;
}
body[data-page=produits] .content > p + p {
  text-align: center;
  margin: 0;
  color: rgba(28, 31, 34, 0.6784313725);
}

body[data-page=produits] .content h1 + p {
  position: relative;
  margin-left: 30px;
  margin-right: 30px;
}

body[data-page=produits] .content p + p {
  position: relative;
  padding-bottom: 24px;
  margin-left: 30px;
  margin-right: 30px;
}

body[data-page=produits] .content p + p::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 360px;
  height: 1px;
  background-color: #C7C9CC;
  transform: translateX(-50%);
}

/* =========================
   PAGE PRODUITS – CONTENU
   ========================= */
/* Réglage espace texte -> tableau */
/* <-- TU RÈGLES ICI */
body[data-page=produits] .product {
  margin-top: 32px;
  margin-bottom: 52px; /* espace avant footer */
}

body[data-page=produits] .product-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0px;
  align-items: start;
}

body[data-page=produits] .product-title {
  margin: 0 0 16px 0;
  font-size: 1.9rem;
  font-weight: 600;
  color: #1C1F22;
}

body[data-page=produits] .product-description {
  margin: 0;
  line-height: 1.6;
  color: rgba(28, 31, 34, 0.6784313725);
  font-size: 15px; /* ou 14px / 16px selon ton choix */
  line-height: 1.6;
}

/* Titre avant tableau */
body[data-page=produits] .spec-title {
  margin: 36px 0 12px 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1C1F22;
}

/* Tableau */
body[data-page=produits] .spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

body[data-page=produits] .spec-table td {
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.6;
}

/* Commence par gris sur la 1ère ligne */
body[data-page=produits] .spec-table tr:nth-child(odd) {
  background: #f2f2f2;
}

body[data-page=produits] .spec-table td:first-child {
  width: 35%;
  font-weight: 600;
  color: rgba(28, 31, 34, 0.6784313725);
}

/* Image */
body[data-page=produits] .product-right {
  display: flex;
  justify-content: center;
}

body[data-page=produits] .product-right img {
  width: 100%;
  max-width: 325px;
  display: block;
}

/* Responsive */
/* Responsive */
@media (max-width: 768px) {
  body[data-page=produits] .product-layout {
    grid-template-columns: 1fr;
  }
  /* 1) Image AU-DESSUS du titre: on place .product-right sur la 1ere ligne */
  body[data-page=produits] .product-right {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 18px;
  }
  body[data-page=produits] .product-left {
    grid-column: 1;
    grid-row: 2;
    max-width: none;
  }
  /* 2) Titre serie centre */
  body[data-page=produits] .product-title {
    text-align: center;
  }
  /* 3) Marges sur la description (UNIQUEMENT le paragraphe) */
  body[data-page=produits] .product-description {
    padding-left: 26px;
    padding-right: 26px;
  }
  /* 4) "Caracteristiques principales" centre */
  body[data-page=produits] .spec-title {
    text-align: center;
  }
  /* Image: pas de margin-top, elle est deja au-dessus */
  body[data-page=produits] .product-right img {
    margin-top: 0;
  }
}
body[data-page=savoir-faire] .content-wrapper {
  padding-top: 0; /* comme Contact */
  margin-bottom: 32px;
}

body[data-page=savoir-faire] .content {
  width: 100%;
}

body[data-page=savoir-faire] .content > h1 {
  text-align: center;
  margin: 0;
  margin-top: 32px;
  margin-bottom: 12px;
  font-size: 1.5rem;
  line-height: 2.25rem;
  font-weight: 600;
  color: rgba(28, 31, 34, 0.8745098039);
}
body[data-page=savoir-faire] .content > h1 + p {
  text-align: center;
  margin: 0;
  color: rgba(28, 31, 34, 0.6784313725);
}

body[data-page=savoir-faire] .content h1 + p {
  position: relative;
  padding-bottom: 24px;
}

body[data-page=savoir-faire] .content h1 + p::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 360px; /* largeur FIXE */
  height: 1px;
  background-color: #C7C9CC;
  transform: translateX(-50%);
}

body[data-page=savoir-faire] .features {
  margin-top: 15px;
}

body[data-page=savoir-faire] .feature {
  display: flex;
  justify-content: space-between;
  gap: 0px;
  padding: 34px 0;
}

body[data-page=savoir-faire] .feature + .feature {
  border-top: 0px solid rgba(10, 35, 64, 0.2);
}

body[data-page=savoir-faire] .feature__media {
  flex: 0 0 40%;
  display: flex;
  justify-content: center;
}

body[data-page=savoir-faire] .feature__media img {
  max-width: 325px;
  width: 100%;
  height: auto;
  border-radius: 5px;
  display: block;
}

body[data-page=savoir-faire] .feature__text {
  flex: 1 1 auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 2px;
  padding-bottom: 20px;
  background-color: rgba(249, 249, 249, 0.9);
  border: 1px solid rgba(10, 35, 64, 0.3);
  border-radius: 5px;
}

body[data-page=savoir-faire] .feature__text h2 {
  margin: 0 0 12px 0;
  color: #1C1F22;
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  text-align: center;
}

body[data-page=savoir-faire] .feature__text p {
  margin: 0;
  font-size: 15px; /* au lieu de 16px par défaut */
  line-height: 1.6;
  color: rgba(28, 31, 34, 0.6784313725);
}

/* inversion gauche/droite desktop */
body[data-page=savoir-faire] .feature.is-reverse {
  flex-direction: row-reverse;
}

/* mobile : 1 colonne, image puis texte (toujours dans cet ordre) */
body[data-page=savoir-faire] .feature__text ul,
body[data-page=savoir-faire] .feature__text ul.content_list,
body[data-page=savoir-faire] .feature__text .content_list {
  margin: 0;
  padding: 0;
}

body[data-page=savoir-faire] .feature__text ul li {
  margin: 0 0 10px 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(28, 31, 34, 0.6784313725);
}

body[data-page=savoir-faire] .feature__text ul li:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  body[data-page=savoir-faire] .feature,
  body[data-page=savoir-faire] .feature.is-reverse {
    flex-direction: column;
    align-items: stretch;
    gap: 50px; /* espace UNIQUE image <-> texte */
    padding: 26px 26px;
  }
  body[data-page=savoir-faire] .feature__media {
    flex-basis: auto;
  }
  /* SUPPRESSION des paddings verticaux qui cassent la symetrie */
  body[data-page=savoir-faire] .feature__text {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  body[data-page=savoir-faire] .feature__text h2 {
    font-size: 1.6rem;
  }
}
/* ============================================
   FIX PUCE CARRÉE — content_list (À PROPOS)
   ============================================ */
body[data-page=savoir-faire] .content_list > li,
body[data-page=savoir-faire] .feature__text .content_list > li {
  position: relative;
  padding-left: 18px; /* espace puce -> texte */
}

body[data-page=savoir-faire] .content_list > li::before,
body[data-page=savoir-faire] .feature__text .content_list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em; /* alignement optique sur la première ligne */
  width: 6px;
  height: 6px;
  background: #555; /* gris technique */
}

/* ============================================
   FIX: supprimer puces natives + garder carré
   (évite le double-marqueur rond + carré)
   ============================================ */
body[data-page=savoir-faire] ul.content_list,
body[data-page=savoir-faire] .feature__text ul.content_list {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

body[data-page=savoir-faire] ul.content_list > li,
body[data-page=savoir-faire] .feature__text ul.content_list > li {
  position: relative;
  padding-left: 18px; /* espace puce -> texte */
}

body[data-page=savoir-faire] ul.content_list > li::before,
body[data-page=savoir-faire] .feature__text ul.content_list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background: #555;
}

/* =========================
   PAGE MENTIONS LEGALES
   ========================= */
body[data-page=mentions-legales] .content-wrapper {
  padding-top: 0;
  margin-bottom: 48px;
}

body[data-page=mentions-legales] .content {
  width: 100%;
}
body[data-page=mentions-legales] .content > h1 {
  text-align: center;
  margin: 32px 0 12px 0;
  font-size: 1.5rem;
  line-height: 2.25rem;
  font-weight: 600;
  color: rgba(28, 31, 34, 0.8745098039);
}
body[data-page=mentions-legales] .content > h1 + p {
  text-align: center;
  margin: 0;
  padding-bottom: 24px;
  color: rgba(28, 31, 34, 0.6784313725);
  position: relative;
}
body[data-page=mentions-legales] .content > h1 + p::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 360px;
  height: 1px;
  background-color: #C7C9CC;
  transform: translateX(-50%);
}

/* Sections legales */
body[data-page=mentions-legales] .legal-section {
  max-width: 900px;
  margin: 32px auto 0 auto;
  padding: 0 30px;
}

body[data-page=mentions-legales] .legal-section h2 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1C1F22;
}

body[data-page=mentions-legales] .legal-section p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(28, 31, 34, 0.6784313725);
}

/* Responsive */
@media (max-width: 768px) {
  body[data-page=mentions-legales] .legal-section {
    padding: 0 20px;
  }
}
.menu {
  position: relative;
  display: none;
}

.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

ul.submenu li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}

.menu input,
.menu ul.submenu {
  display: none;
  text-decoration: none;
}

.menu ul.submenu {
  list-style: none;
  background: #f7f7f7;
  width: 150px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(238, 236, 236, 0.15);
}

ul.submenu li:hover {
  background-color: #f2f3f4;
}

ul.submenu li:hover a {
  color: rgba(28, 31, 34, 0.5803921569);
}

ul.submenu a {
  text-decoration: none;
  font-family: "Biome";
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 16px;
  color: #1C1F22;
}

/*position the label*/
.menu label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: rgb(255, 255, 255);
  border: none;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 16px;
  color: #0a2340;
  font-family: "Biome";
  width: auto;
}

/*show the submenu when input is checked*/
.menu input:checked ~ ul.submenu {
  display: block;
}

.menu input:checked + label {
  background: #0a2340;
  color: white;
}

body[data-page=societe] .submenu-link-societe {
  color: rgba(28, 31, 34, 0.6784313725);
}

body[data-page=savoir-faire] .submenu-link-savoirfaire {
  color: rgba(28, 31, 34, 0.6784313725);
}

body[data-page=produits] .submenu-link-produits {
  color: rgba(28, 31, 34, 0.6784313725);
}

/*# sourceMappingURL=style.css.map */