:root {
  --max-width: 1000px;
  --padding: 10px 20px;
  --top: 50px;
  --mobile-text-size: 14px;
}

#toggle {
  background: none;
  border: none;
  display: none;
}

@media (max-width: 1000px) {
  p,
  a {
    font-size: var(--mobile-text-size);
  }

  .tech-text {
    display: none;
  }
}

@media (max-width: 1200px) {
  .services ul {
    max-width: inherit;
  }
}

@media (max-height: 700px) {
  .mission {
    grid-column: 40 / span 25;
    grid-row: 70 / span 20;
  }
}

/*barre de navigation*/
@media (max-width: 1100px) {
  /* Important styles */
  #toggle {
    display: block;
    width: 28px;
    height: 30px;
    margin: 30px auto 10px;
  }

  #toggle span:after,
  #toggle span:before {
    content: "";
    position: absolute;
    left: 0;
    top: -9px;
  }
  #toggle span:after {
    top: 9px;
  }
  #toggle span {
    position: relative;
    display: block;
  }

  #toggle span,
  #toggle span:after,
  #toggle span:before {
    width: 100%;
    height: 5px;
    background-color: #888;
    transition: all 0.3s;
    backface-visibility: hidden;
    border-radius: 2px;
  }

  /* on activation */
  #toggle.on span {
    background-color: transparent;
  }
  #toggle.on span:before {
    transform: rotate(45deg) translate(5px, 5px);
  }
  #toggle.on span:after {
    transform: rotate(-45deg) translate(7px, -8px);
  }
  #toggle.on + #menu {
    opacity: 1;
    visibility: visible;
  }

  #menu {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
    text-align: center;
  }

  #menu.open {
    opacity: 1;
    visibility: visible;
  }

  #menu.open > ul {
    top: var(--nav-height);
    background: var(--primary-color);
    width: 100vw;
    padding-bottom: 20px;
    transform: translateY(-2px);
  }

  #menu > ul {
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0;
    flex-direction: column;
    align-items: center;
  }

  #menu > ul > li {
    padding: 10px 0;
    width: 50%;
    border-top: solid 1px var(--white-second);
  }
}

/*scroll section*/
@media (max-width: 1000px) {
  /* =========================
   RESPONSIVE < 1000px
   Tout en colonne, ligne par ligne
========================= */
  @media (max-width: 1000px) {
    /* 1) Stop les effets de scroll horizontal / sticky */
    .scroll-section {
      height: auto;
    }

    .scroll-section__sticky {
      position: relative;
      top: auto;
      height: auto;
      overflow: visible;
      display: block;
    }

    .scroll-section__track {
      width: 100%;
      display: block;
      will-change: auto;
      transform: none !important;
    }

    /* 2) Home / Hero en colonne */
    #home {
      height: auto;
      min-height: 100vh;
      width: 100%;
    }

    .hero-section {
      display: block;
      height: auto;
    }

    .hero-container {
      position: relative;
      height: auto;
      padding: calc(var(--nav-height) + 80px) 16px 24px; /* ajuste selon ta navbar */
    }

    .hero-content {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    /* bannière : éviter le full-bleed compliqué sur mobile */
    .hero-banner {
      display: none;
      position: relative;
      left: auto;
      right: auto;
      margin-left: 0;
      margin-right: 0;
      width: 100%;
      height: auto;
      max-height: 360px;
      object-fit: cover;
    }

    .hero-description {
      max-width: 100%;
      font-size: 16px;
      text-align: center;
    }

    .hero-description h1 {
      font-size: 24px;
    }

    .hero-ctas {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }

    .hero-cta {
      width: 100%;
      justify-content: center;
      margin-top: 0;
    }

    .hero-visual {
      width: 100%;
      height: auto;
    }

    .hero-illustration {
      display: block;
    }

    .laptop-container,
    .gear-container {
      grid-column: auto;
      grid-row: auto;
    }

    .laptop {
      transform: none;
      width: 100%;
    }

    .gear-container {
      animation: none;
      display: none; /* optionnel: enlève l'engrenage sur mobile */
    }

    /* 3) Tech list : chaque item sur sa ligne */
    .tech-list-container {
      position: relative;
      bottom: auto;
    }

    .tech-list {
      display: flex;
      flex-direction: row;
      align-items: stretch;
    }

    .tech-list li {
      width: fit-content;
      border-right: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding: 16px 12px;
    }

    .tech-list li:last-child {
      border-bottom: none;
    }

    /* 4) About : tu "casses" la grid 100x100 => tout en blocs */
    #about {
      height: auto;
      margin-top: var(--nav-height);
      padding: 24px 16px;
      width: 100%;
    }

    .about-container {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: auto;
      gap: 16px;
    }

    /* Important: annule les placements grid de chaque bloc */
    .about-content,
    .presentation,
    .vision,
    .mission,
    .values,
    .positionnement,
    .illustration {
      grid-column: auto !important;
      grid-row: auto !important;
      width: 100%;
    }

    /* Et on remet les éléments "animés cachés" visibles */
    #aboutHead,
    #aboutPresentation,
    #aboutVision,
    #aboutMission,
    #aboutValues,
    #aboutPositionnement {
      transform: none !important;
      opacity: 1 !important;
    }

    .illustration {
      width: 100%;
      overflow: hidden;
      order: -1; /* optionnel: image avant le texte */
    }

    .illustration img {
      width: 100%;
      height: auto;
    }

    /* 5) Why : avantages en colonne + annule le "hidden" */
    #why {
      height: auto;
      padding: 48px 16px;
    }

    .why-container {
      width: 100%;
      height: auto;
    }

    .why-title {
      font-size: 34px;
    }

    .advantages {
      flex-direction: column;
      gap: 16px;
      margin-top: 24px;
      padding: 0;
    }

    .advantages li {
      transform: none !important;
      opacity: 1 !important;
    }

    /* 6) Cercles: optionnel (perf mobile) */
    .circles {
      display: none;
    }
  }

  /* ---------
    Wrapper vertical-scroll (si tu as un comportement spécial ailleurs)
  --------- */
  .vertical-scroll,
  .vertical-scroll_content {
    height: auto;
    overflow: visible;
  }

  /* =====================
     EXPERTISE
  ===================== */
  #expertise {
    margin: var(--top) 0;
    padding: 0 16px;
    gap: 16px;
  }

  .gears-container {
    position: relative;
    right: auto;
    width: 100%;
    justify-content: center;
  }

  /* Process : on passe en colonne */
  .process {
    flex-direction: column;
    flex-wrap: nowrap;
    padding: var(--sub-top) 16px;
    gap: 50px;
    align-items: stretch;
  }

  /* On masque les bus/traits SVG qui n'ont plus de sens en mobile */
  .line-bus {
    display: none;
  }

  .process-step {
    width: 100%;
    opacity: 1; /* sur mobile, tout est visible */
    text-align: left; /* plus lisible */
    align-items: stretch;
  }

  .process-step img {
    height: 180px;
    border-radius: var(--radius);
  }

  .process-step h4 {
    font-size: 20px;
  }

  .process-step ul {
    text-align: left;
    padding-left: 18px;
  }

  /* Methodology : colonne (Approche / Méthodologie / Tech) */
  .methodology {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .box {
    width: 100%;
    justify-self: stretch;
    display: grid;
    place-content: center;
  }

  .methodology-section {
    width: 100%;
  }

  /* =====================
     SOLUTIONS
  ===================== */
  #solutions {
    display: block;
    padding: 0 16px;
  }

  .solustion-container {
    height: auto;
  }

  /* On casse la grande grid 17x11 => pile d’éléments */
  .grid-software {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: auto;
    margin-top: var(--sub-top);
  }

  /* Annule tous les placements grid des enfants */
  .solution-illustration,
  .solution-qhse,
  .solution-station,
  .solution-hotel,
  .d1,
  .d2,
  .d3,
  .d4,
  .d5,
  .d6,
  .d7 {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Option : on enlève les décos "lights" sur mobile */
  .d {
    display: none;
  }

  /* Illustration lampe => plus simple, centrée */
  .solution-illustration {
    width: 100%;
    order: -1; /* illustration avant les cartes */
  }

  .lamp {
    width: 160px;
  }

  /* Cartes solutions : full width + visibles */
  .solution {
    opacity: 1;
    transform: none;
  }

  /* Image de cartes solution : un peu plus haute */
  .image {
    height: 140px;
    border-radius: var(--radius);
  }

  .solution a {
    width: 100%;
    text-align: center;
  }

  /* Services : déjà auto-fit, mais on force confort */
  .services {
    width: 100%;
    padding: 24px 16px;
  }

  .services ul {
    grid-template-columns: 1fr;
    max-width: inherit;
  }

  .services li {
    padding: 1.25rem;
  }

  /* Futurist services : tu as déjà un @media 900px,
     mais on sécurise ici à 1000px */
  .futurist-services {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .futurist-card {
    grid-column: 1 / -1;
  }

  /* =====================
     REFERENCES
  ===================== */
  #references {
    padding: 0 16px;
  }

  /* Slider infini : sur mobile, soit tu gardes,
     soit tu passes en grille statique.
     Ici: version "safe" -> grille de logos */

  /* =====================
     CONTACT
  ===================== */
  #contact {
    padding: 0 16px;
  }

  #contactForm {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .contact-illustration {
    width: 100%;
    height: 220px; /* une hauteur mobile sympa */
  }

  #contactForm .contact-form {
    max-width: 100%;
    grid-template-columns: 1fr; /* tout en colonne */
  }

  /* Comme tout passe en 1 colonne, pas besoin de spans spécifiques */
  #contactForm .contact-form > div:nth-child(3),
  #contactForm .contact-form > div:nth-child(4),
  #contactForm .contact-form > div:nth-child(5) {
    grid-column: auto;
  }

  /*================
  FOOTER
  ===============*/

  .footer-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .footer-logo,
  .footer-desc {
    margin: auto;
  }

  .footer-brand {
    grid-column: 1 / span 2;
    grid-row: 1 / span 1;
    text-align: center;
  }

  .footer-links {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
  }

  .footer-contact {
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
  }

  .footer-social {
    justify-content: center;
  }
}