.titlelg {
  font-size: 50px !important;
}
.logoimg {
  width: 42px !important;
}
.faqtitle {
  font-size: 16px !important;
}
@media only screen and (max-width: 767px) {
  .dsizm {
    font-size: 12px !important;
  }
  .titlelg {
    font-size: 35px !important;
  }
}
.taillmin {
  line-height: 40px !important;
  font-size: 35px !important;
}
@media only screen and (min-width: 767px) {
  .taillmin {
    line-height: 30px !important;
  }
}
@media only screen and (min-width: 768px) {
  .section-padding {
    padding: 40px !important;
  }
  .desktopmid {
    transform: translateY(75px);
  }
  .gh11 {
    grid-template-columns: 65% auto !important;
  }
  .gh100 {
    grid-template-columns: 95% auto !important;
  }
}
.bull li,
.bull ul {
  list-style: initial !important;
}
.bull {
  margin-left: 30px;
}
.text-right {
  text-align: right;
}
.sd1 {
  --dsn-li-name: dsn6;
}
.sd2 {
  --dsn-li-index: 0;
}
.sd3 {
  --dsn-li-index: 1;
}
.sd4 {
  --dsn-li-index: 2;
}
.sd5 {
  --dsn-li-index: 3;
}
.preloader {
  opacity: 1;
  transition: opacity 0.6s;
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.preloader.hidden {
  opacity: 0;
  pointer-events: none;
}
.ptb {
  padding-top: 15px !important;
  padding-bottom: 10px !important;
}
#apropos {
  padding: 30px;
}
/* ===== SYSTÈME D'ESPACEMENT OPTIMISÉ ===== */

/* Variables pour un espacement cohérent */
:root {
  /* Réduction légère de tous les espacements */
  --section-spacing-small: 50px;
  --section-spacing-medium: 70px;
  --section-spacing-large: 100px;
  --section-spacing-xlarge: 140px;
  --content-spacing: 35px;
  --element-spacing: 18px;
  --micro-spacing: 8px;
}

/* ===== ESPACEMENTS GÉNÉRAUX DES SECTIONS ===== */

/* Espacement standard entre sections */
.section-margin {
  margin-top: var(--section-spacing-large);
  margin-bottom: var(--section-spacing-large);
}

/* Sections avec padding interne */
.section-padding {
  padding-top: var(--section-spacing-medium);
  padding-bottom: var(--section-spacing-medium);
}

/* Sections avec background - espacement réduit pour éviter les coupures visuelles */
.background-sections {
  padding-top: var(--section-spacing-large);
  padding-bottom: var(--section-spacing-large);
  margin-top: 0;
  margin-bottom: 0;
}

/* ===== SECTIONS SPÉCIFIQUES ===== */

/* Section vidéo - espacement ajusté après header */
#video-presentation.img-under-header {
  margin-top: var(--section-spacing-small);
  margin-bottom: var(--section-spacing-large);
}

/* Section prestations */
#prestations.services-lest-hover {
  margin-top: var(--section-spacing-xlarge);
  margin-bottom: var(--section-spacing-xlarge);
}

/* Section à propos avec background */
#apropos.background-sections {
  padding-top: var(--section-spacing-xlarge);
  padding-bottom: var(--section-spacing-xlarge);
}

/* Section réalisations */
#realisations.our-work {
  margin-top: var(--section-spacing-xlarge);
  margin-bottom: var(--section-spacing-large);
}

/* Section produits avec swiper */
.dsn-team.team-two {
  padding-top: var(--section-spacing-xlarge);
  padding-bottom: var(--section-spacing-xlarge);
}

/* Section partenaires */
.dsn-brand {
  padding-top: var(--section-spacing-large);
  padding-bottom: var(--section-spacing-large);
  margin-top: var(--section-spacing-medium);
}

/* Section témoignages */
.dsn-testimonials {
  padding-top: var(--section-spacing-xlarge);
  padding-bottom: var(--section-spacing-xlarge);
}

/* ===== ESPACEMENTS INTERNES ===== */

/* Titres de section */
.section-title {
  margin-bottom: var(--section-spacing-medium) !important;
}

.section-title .sub-heading {
  margin-bottom: var(--micro-spacing);
}

.section-title .title {
  margin-top: var(--element-spacing);
}

/* Conteneurs */
.container {
  padding-left: 20px;
  padding-right: 20px;
}

/* Espacement pour les éléments de contenu */
.container-content {
  padding-top: var(--content-spacing);
  padding-bottom: var(--content-spacing);
}

/* ===== ESPACEMENTS POUR GRILLES ET CARTES ===== */

/* Grilles */
.d-grid {
  gap: var(--content-spacing);
}

.dsn-cards {
  margin-top: var(--content-spacing);
}

.dsn-item-post {
  margin-bottom: var(--content-spacing);
}

/* ===== ESPACEMENTS POUR NAVIGATION ===== */

.nav-content {
  margin-bottom: var(--element-spacing);
}

.nav-content.mt-30 {
  margin-top: var(--content-spacing);
}

/* ===== ESPACEMENTS RESPONSIFS ===== */

@media (max-width: 768px) {
  :root {
    /* Réduction proportionnelle pour mobile */
    --section-spacing-small: 35px;
    --section-spacing-medium: 45px;
    --section-spacing-large: 60px;
    --section-spacing-xlarge: 80px;
    --content-spacing: 25px;
    --element-spacing: 12px;
  }

  .section-margin {
    margin-top: var(--section-spacing-medium);
    margin-bottom: var(--section-spacing-medium);
  }

  .section-padding {
    padding-top: var(--section-spacing-small);
    padding-bottom: var(--section-spacing-small);
  }

  .background-sections {
    padding-top: var(--section-spacing-medium);
    padding-bottom: var(--section-spacing-medium);
  }

  #video-presentation.img-under-header {
    margin-top: 25px;
  }

  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (max-width: 480px) {
  :root {
    /* Espacements encore plus compacts pour très petits écrans */
    --section-spacing-small: 25px;
    --section-spacing-medium: 35px;
    --section-spacing-large: 45px;
    --section-spacing-xlarge: 55px;
    --content-spacing: 18px;
    --element-spacing: 8px;
  }
}

/* ===== AMÉLIORATIONS VISUELLES ===== */

/* Transitions fluides pour les espacements dynamiques */
.section-margin,
.section-padding,
.background-sections {
  transition: padding 0.3s ease, margin 0.3s ease;
}

/* Espacement harmonieux pour les éléments avec overflow hidden */
.over-hidden {
  margin-top: var(--element-spacing);
  margin-bottom: var(--element-spacing);
}

/* Ajustement pour les éléments pinned */
.pinned-scroll {
  padding-top: var(--content-spacing);
  padding-bottom: var(--content-spacing);
}

/* Espacement pour les box-move */
.box-move {
  padding-top: var(--section-spacing-large);
  padding-bottom: var(--section-spacing-large);
}

/* ===== ESPACEMENT POUR LES ÉLÉMENTS INTERACTIFS ===== */

/* Boutons et liens */
.links {
  margin-bottom: var(--micro-spacing);
}

/* Éléments de marque */
.brand-inner {
  padding: var(--element-spacing);
}

.brand-item {
  margin-bottom: var(--element-spacing);
}

/* ===== COHÉRENCE VERTICALE ===== */

/* Assure un rythme vertical cohérent */
section + section {
  margin-top: 0;
}

/* Évite les doubles marges */
.background-sections + .section-margin {
  margin-top: 0;
}

.section-margin + .background-sections {
  margin-top: 0;
}
.mb10s li {
  margin-bottom: 15px;
}
@media only screen and (min-width: 767px) {
  .h-v-80 {
    height: 45vh;
    width: 35vw;
  }
  .lin {
    line-height: 32px;
  }
}
@media only screen and (min-width: 767px) {
  .w150 {
    width: 300px !important;
    height: 300px !important;
  }
}

/* --- Overlay modal --- */
.modal-partners {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  z-index: 1000;
}

.modal-partners.active {
  opacity: 1;
  visibility: visible;
}

/* --- Contenu --- */
.modal-content {
  background: #fff;
  border-radius: 16px;
  width: 90%;              /* ✅ plus large par défaut */
  max-width: 1600px;       /* ✅ limite large desktop */
  max-height: 90%;
  padding: 30px;
  overflow-y: auto;
  animation: zoomIn 0.5s ease forwards;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  position: relative;
}

/* --- Grille images --- */
.modal-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 25px;
}

/* ✅ Images uniformes */
.modal-gallery img {
  width: 100%;
  height: 120px;
  object-fit: contain;
  border-radius: 10px;
  background: #f9f9f9;
  padding: 10px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.modal-gallery img:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

/* --- Bouton fermer --- */
.modal-close {
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 32px;
  color: #333;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.modal-close:hover {
  transform: rotate(90deg);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .modal-content {
    width: 95%;
    padding: 20px;
  }
  .modal-gallery {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

@media (max-width: 600px) {
  .modal-gallery {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  .modal-gallery img {
    height: 90px; /* ✅ un peu plus petit sur mobile */
  }
}