/* Optimisation : Regroupement des Google Fonts et suppression des @import */
/* Les Google Fonts sont maintenant chargées via HTML pour de meilleures performances */

@font-face {
    font-family: 'Bebas Neue'; 
    src: url('fonts/Bebas_Neue/BebasNeue-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Optimisation critique pour éviter le blocage du rendu */
}

@font-face {
    font-family: 'TT Interphases Pro'; 
    src: url('fonts/TT Interphases Pro Trial Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Optimisation critique pour éviter le blocage du rendu */
}

section h1, article h1, aside h1, nav h1 {
    font-size: 2rem;
  }

body, html {
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overflow-x: hidden;
    font-family: sans-serif;
    background-color: #17181D;
    background-image: url('../assets/bg.png'); 
    background-size: cover; 
    background-position: center center;
    background-repeat: no-repeat; 
    background-attachment: fixed;
}


/* Conteneur principal pour le scroll fluide */
.container {
    height: 100vh; /* Prend toute la hauteur de la fenêtre */
    overflow-y: scroll; /* Active le défilement vertical pour ce conteneur */
}

/* Styles pour chaque section */
.fullscreen-section {
    height: 100vh; /* Chaque section prend toute la hauteur de la fenêtre */
    overflow: hidden; /* Empêche le scroll local dans les sections */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: white;
    position: relative; /* Contexte pour les éléments positionnés absolument à l'intérieur */
    box-sizing: border-box; /* IMPORTANT: Inclure padding/border dans la hauteur */
}

/* Styles spécifiques Section 1 */
#section1 .section1-content {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    width: 90%; /* ou 85% sur large desktop */
    margin: 0 auto;
    gap: 1vw; /* ou 1.5vw */
    height: auto; /* PAS 100% */
}

/* Conteneur pour les textes */
.text-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* MODIFIÉ */
    align-items: flex-start;
    margin-left: -30px; /* Ajuste la proximité avec l'image (remplace l'ancienne marge sur le texte)*/
    text-align: left; /* Aligner le contenu texte à gauche */
    /* Pas de largeur fixe, s'adapte au contenu */
}

#section1 .section1-image {
    width: 38%; /* ou 36% */
    max-width: 400px; /* ou 450px */
    min-width: 220px;
    max-height: 70vh; /* ou 75vh */
    height: auto;
    margin: 0;
    display: block;
    object-fit: contain;
    object-position: top;
    margin-top: 10vh;
}

#section1 .section1-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 235px;
    font-weight: bold;
    color: #f0f0f0; /* MODIFIÉ de white */
    line-height: 0.8;
    text-align: left;
    margin-bottom: 0;
    letter-spacing: 1px; /* Ajout de l'espacement entre les lettres */
}

/* Style pour le sous-titre en bas à droite du conteneur de texte */
.section1-subtitle {
    position: static;
    font-family: 'TT Interphases Pro', sans-serif;
    font-size: 26.5px; /* Taille de police ajustée */
    color: #f0f0f0; /* MODIFIÉ de white */
    align-self: flex-end; /* Aligner à droite dans le flex container */
    text-align: right; /* Aligner le texte à droite */
}

/* Style pour le texte de crédit */
.section1-credit {
    position: static;
    margin-top: -5px; /* Réduire l'espace avec le subtitle */
    font-family: 'Montserrat', sans-serif;
    font-size: 26.5px; 
    font-weight: 100; 
    color: #E0E0E4;
    align-self: flex-end; /* Aligner à droite dans le flex container */
    text-align: right; /* Aligner le texte à droite */ /* Ajouter un petit espace au dessus */
}

/* Style pour l'URL en bas de section (mobile et tablette) */
.section1-url {
    position: absolute; /* Positionner par rapport à la droite (ajuster si besoin) */
    text-align: left; /* Aligner le texte de l'URL à droite */
    font-family: 'TT Interphases Pro', sans-serif;
    font-size: 26.5px;
    color: #f0f0f0; /* Couleur du crédit pour cohérence */
}

/* Style pour l'URL desktop (intégrée au flux du texte) */
.section1-url-desktop {
    position: absolute;
    left: auto !important;
    right: 32vw; /* Ajuste la valeur selon le rendu souhaité */
    width: auto;
    text-align: left;
    bottom: 0;
    margin: 0;
    display: block;
    font-family: 'TT Interphases Pro', sans-serif;
    font-size: clamp(16px, 1vw, 22px); /* adapte sur large desktop */
    color: #E0E0E4;
    z-index: 2;
    margin-bottom: 4.5vh; /* Remonte l'URL du même montant que le margin-top de l'image */
}

/* --- Styles Section 2 --- */
.section2-title {
    font-family: 'Anton', sans-serif;
    font-size: 58.4px;
    color: white;
    text-align: center;
    text-transform: uppercase; /* Met le texte en majuscules */
    line-height: 1.2; /* Ajuste l'espacement entre les lignes */
    margin: 0; /* Supprime les marges par défaut du h2 */
    letter-spacing: 2px; /* AJOUTÉ */
}

.section2-signature {
    position: absolute;
    bottom: 30px; /* Espace par rapport au bas */
    right: 30px; /* Espace par rapport à la droite */
    font-family: 'Anton', sans-serif;
    font-size: 58.4px;
    color: white;
    margin: 0; /* Pas de marge */
    text-transform: uppercase; /* En majuscules comme le titre */
    letter-spacing: 2px; /* AJOUTÉ */
}

/* --- Styles Section 2 (Suite) --- */

/* Bloc de description en bas à gauche */
.section2-description-block {
    position: absolute;
    bottom: 30px; /* Position desktop originale */
    left: 30px; /* Position desktop originale */
    max-width: 450px; /* Largeur desktop originale */
    /* text-align n'est pas défini ici */
    z-index: 5; 
}

.section2-description {
    font-family: 'Poppins', sans-serif;
    font-size: 18.6px; 
    line-height: 1.6; /* Bonne lisibilité */
    color: white;
    margin: 0 0 10px 0; /* Marge en bas avant la devise */
}

.section2-motto {
    font-family: 'Poppins', sans-serif;
    font-size: 18.6px; /* Même taille que la description */
    font-style: italic; /* Met la devise en italique */
    color: #cccccc; /* Couleur légèrement grisée */
    margin: 0;
}

#section3 .section3-title {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: bold;
}

#section3 .service-capsule {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: white;
    text-align: center;
}

#section4 {
    /* Hérite: display: flex, flex-direction: column, justify-content: center */
    align-items: flex-end; /* Aligne les éléments enfants (titre, sous-titre) à droite */
    padding-right: 5%;    /* Marge à droite */
    padding-left: 5%;     /* Marge à gauche pour équilibre */
    box-sizing: border-box; 
}

.section4-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 235px;
    color: white;
    text-align: right;
    line-height: 1; 
    margin: 0; 
    width: 100%; 
    position: relative; /* Assurer le contexte pour transform */
    transform: translateY(-8vh); /* Remonte légèrement le titre */
}

.section4-subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: white;
    text-align: right;
    margin: 0;
    margin-top: -10px; /* Ajuster pour rapprocher du titre Bebas */
    width: 100%;
}

.references-images {
    display: flex; 
    align-items: flex-start;
    width: 100%; 
    margin-top: 40px; 
    box-sizing: border-box;
    gap: 5%; 
    position: relative; 
    transform: translateX(-3%); 
    padding-left: 3%; /* Ajustement pour compenser un peu le translateX */
}

/* Style pour chaque bloc image + texte */
.reference-item {
    display: flex;
    flex-direction: column; /* Image en haut, texte en bas */
    align-items: center;    /* Centrer horizontalement */
    width: 15%; /* Largeur du bloc, correspond à l'ancienne largeur img */
    text-align: center;
}

.references-images img {
    /* width: 15%; */ /* Géré par .reference-item maintenant */
    width: 100%; /* L'image prend 100% de la largeur de .reference-item */
    height: auto; 
    object-fit: contain; 
    border: 1px solid #555; 
    display: block; /* Pour éviter des espaces indésirables */
}

/* Style pour le texte sous l'image */
.reference-caption {
    display: block;
    margin-top: 10px; /* Espace entre image et texte */
    font-family: 'Poppins', sans-serif; /* Police */ /* Taille (ajustable) */
    color: #cccccc;  /* Couleur (ajustable) */
    line-height: 1.3;
}

/* Bloc "Ils me font confiance" en bas à droite */
.trust-block {
    position: absolute;
    bottom: 40px; /* Espace par rapport au bas */
    right: 5%;    /* Correspond au padding droit de la section */
    width: 30%;   /* Largeur du bloc, ajustable */
    max-width: 400px; /* Limite la largeur sur grands écrans */
    text-align: right;
    color: white;
    font-family: 'Poppins', sans-serif;
    line-height: 1.4; /* Pour la lisibilité du paragraphe */
}

.trust-block h3 {
    font-size: 1.1em; /* Légèrement plus grand que le paragraphe */
    margin-bottom: 10px; /* Espace avant le paragraphe */
    font-weight: normal; /* Mettre le titre en gras */
    margin-top: 0;
}

.trust-block p {
    margin: 0;
    font-weight: normal; /* Assurer que le paragraphe n'est pas en gras */
}

/* --- Styles Section 5 (Desktop/Laptop Base) --- */

#section5 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
    margin-bottom: 15vh;
    /* position: relative; est déjà défini par .fullscreen-section */
}

.section5-title {
    position: absolute;
    top: 80px;    /* Position Y */
    right: 5%;   /* Position X */
    font-family: 'Bebas Neue', sans-serif;
    font-size: 200px;
    color: white;
    text-align: left; /* Texte aligné à gauche dans son bloc */
    line-height: 0.9; 
    margin: 0;
    z-index: 5; /* Pour être au-dessus du contenu potentiel */
}

/* Conteneur pour le contenu texte à gauche */
.prep-content {
    position: absolute; 
    top: 50vh;        
    left: 5%;         
    color: white;
    padding-left: 0; 
    width: 75%; /* Encore élargi */
    max-width: 900px; /* Encore élargi */
    z-index: 4; 
}

.prep-items {
    display: flex;
    flex-direction: column; 
    gap: 20px; /* Espace vertical entre les items */
}

.prep-item {
    display: flex;
    align-items: baseline; 
    /* gap supprimé */
}

.prep-item-label {
    font-family: 'Poppins', sans-serif;
    font-weight: bold; 
    font-size: 30.1px;
    /* width: 280px; */ /* Supprimé - largeur s'adaptera */
    text-align: left;
    flex-shrink: 0; 
    white-space: nowrap; /* Garder label sur une ligne */
    /* Pas de margin-right nécessaire ici */
}

.prep-item-value {
    font-family: 'Poppins', sans-serif;
    font-weight: normal; 
    font-size: 18.7px;
    text-align: left;
    /* Pas de width/margin-left par défaut, géré ci-dessous */
}

/* Styles spécifiques pour chaque item */

.prep-item-format .prep-item-value {
    margin-left: 200px; /* ESPACE avant cette valeur (ajustable) */
     /* LARGEUR max pour cette valeur (ajustable) */
}

.prep-item-samplerate .prep-item-value {
    margin-left: 120px;  /* ESPACE avant cette valeur (ajustable) */
 /* LARGEUR plus grande pour forcer moins de lignes (ajustable) */
}

.prep-item-headroom .prep-item-value {
    margin-left: 150px;  /* ESPACE avant cette valeur (ajustable) */
     /* LARGEUR max pour cette valeur (ajustable) */
}

.prep-item-format .prep-item-label {
    text-align: left;
}
.prep-item-samplerate .prep-item-label {
    text-align: left;
}
.prep-item-headroom .prep-item-label {
    text-align: left;
}

/* --- FIN Styles Section 5 --- */

/* --- Styles Section 8 (Desktop/Laptop Base) --- */

#section8 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
}

.section8-content {
    position: relative;
    width: 90%;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4%;
}

/* Structure desktop : zone gauche (texte + image) */
.section8-left {
    width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
}

.section8-text {
    width: 100%;
}

.section8-text p {
    font-family: 'Poppins', sans-serif;
    font-size: 18.6px;
    line-height: 1.6;
    color: white;
    margin: 0;
    text-align: left;
}

.section8-image-left {
    width: 100%;
    max-width: 600px;
    height: auto;
    object-fit: contain;
    align-self: flex-start;
}

/* Structure desktop : zone droite (image) */
.section8-right {
    width: 48%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section8-image-right {
    width: 100%;
    max-width: 550px;
    height: auto;
    object-fit: contain;
    margin-left: auto;
}

/* Structure mobile/tablette */
.section8-mobile {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.section8-text-mobile p {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: white;
    margin: 0;
    text-align: left;
}

/* Desktop uniquement (992px+) - Structure simple avec 3 blocs */
@media (min-width: 992px) {
    .section8-mobile {
        display: none !important;
    }
    
    /* Container principal - 2 colonnes */
    .section8-content {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        width: 90% !important;
        height: auto !important;
        gap: 50px !important;
        margin: 0 auto !important;
        padding: 50px 60px 50px 0 !important;
    }
    
    /* Colonne gauche : texte + photo1 */
    .section8-left {
        display: flex !important;
        flex-direction: column !important;
        flex: 0.7;
        gap: 30px !important;
    }
    
    /* Bloc texte */
    .section8-text {
        width: 100% !important;
    }
    
    /* Photo1 en format rectangulaire */
    .section8-image-left {
        width: 100% !important;
        height: 320px !important;
        object-fit: cover !important;
    }
    
    /* Colonne droite : photo2 */
    .section8-right {
        display: flex !important;
        flex: 0.8;
    }
    
    /* Photo2 */
    .section8-image-right {
        width: 100% !important;
        height: 580px !important;
        object-fit: cover !important;
    }
}

/* Masquer la structure desktop sur mobile/tablette (<992px) */
@media (max-width: 991px) {
    .section8-left,
    .section8-right {
        display: none !important;
    }
}

/* --- FIN Styles Section 8 --- */



.section6-title {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: bold;
    position: absolute;
    top: 35%; 
    right: 25px; /* Augmenté pour plus d'espace */
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center right;
    font-size: 58px; /* Augmenté */
    white-space: nowrap;
    z-index: 5;
}

/* Conteneur principal pour le contenu des tarifs */
.pricing-content {
    position: absolute;
    left: 5%; /* Espace depuis la gauche */
    top: 50%; /* Centrer verticalement */
    transform: translateY(-50%);
    width: 60%; /* Largeur disponible, ajustable */
    display: flex;
    flex-direction: column;
    gap: 50px; /* Espace maintenant vertical entre les deux blocs */
    color: white;
    align-items: flex-start; /* Aligner les blocs à gauche dans la colonne */
    z-index: 4;
}

.pricing-block {
    flex: 1; /* Partager l'espace disponible */
}

.pricing-title {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-size: 34.1px;
    margin: 0 0 20px 0; /* Marge en bas */
    color: white;
}

.pricing-list {
    font-family: 'Poppins', sans-serif;
    font-weight: normal;
    font-size: 21.7px;
    /* list-style: none; */ /* Enlever les puces par défaut */
    /* padding: 0; */
    list-style: disc; /* Remettre les puces standard */
    padding-left: 30px; /* Ajouter un padding pour l'indentation des puces */
    margin: 0;
    line-height: 1.6; /* Espacement des lignes */
}

.pricing-list li {
    margin-bottom: 10px; /* Espace entre les éléments de la liste */
}

/* Styles spécifiques pour le bloc options */
.options-block {
    position: relative; /* Pour positionner le texte "Sur devis" */
}

.quote-text {
    font-family: 'Poppins', sans-serif; /* Même police */
    font-weight: normal; /* Poids normal */
    font-size: 21.7px; /* Même taille que la liste */
    color: white;
    margin: 0;
    position: absolute;
    top: 54%; /* Centrer verticalement */
    transform: translateY(-50%); /* Ajustement fin du centrage */
    left: 155%; /* Positionner à droite du bloc */
    white-space: nowrap; /* Empêcher le retour à la ligne */
}

/* Bloc Remise en bas à droite */
.discount-block {
    position: absolute;
    bottom: 40px; /* Espace par rapport au bas */
    right: 10%; /* Espace par rapport à la droite (ajuster si besoin) */
    color: white;
    z-index: 4;
}

.discount-title {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-size: 34.1px;
    color: #13D73E; /* Couleur verte spécifiée */
    margin: 0 0 10px 0; /* Marge en bas */
    text-align: left; /* Aligner le titre à droite */
}

.discount-list {
    font-family: 'Poppins', sans-serif;
    font-weight: normal;
    font-size: 21.7px; /* Taille cohérente avec l'autre liste */
    list-style: disc; /* Puce standard */
    padding-left: 30px; /* Indentation */
    margin: 0;
    line-height: 1.6;
    text-align: right; /* Aligner le texte de la liste à droite */
}


.section7-title {
    position: absolute;
    top: 100px; /* Position Y similaire à S3 */
    left: 30px; /* Position X similaire à S3 */
    font-family: 'Bebas Neue', sans-serif;
    font-size: 235px;
    color: white;
    line-height: 1;
    margin: 0;
    z-index: 5;
}

.contact-subtitle {
    position: absolute;
    top: 350px; /* Position Y sous le titre (ajuster si besoin) */
    left: 30px; /* Même position X que le titre */
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-size: 34.1px;
    color: white;
    margin: 0;
    z-index: 5;
}
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    background: transparent;
    box-sizing: border-box;
    background: rgba(23, 24, 29, 0); /* semi-transparent dark */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari support */
}
  
  .header-side {
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
  }
  
  .header-side.right {
    justify-content: flex-end;
  }
  
  .header-center {
    width: 50%;
    display: flex;
    align-items: center;
  }
  
  .header-logo-main {
    height: 55px;
    max-width: 100%;
    object-fit: contain;
  }
  
  .header-contact {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    color: white;
    text-decoration: none;
  }
  
  .header-side button {
    background: none;
    border: none;
    color: white;
    font-size: 12px;
    cursor: pointer;
    font-family: 'Bebas Neue', sans-serif;
  }

  /* Sélecteur de langue FR / EN */
  .lang-selector {
    display: flex;
    align-items: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 12px;
    color: white;
  }

  .lang-option {
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    color: #cccccc;
  }

  .lang-option.active {
    color: white;
  }

  .lang-option.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: white;
    animation: slideIn 0.3s ease;
  }

  .lang-separator {
    color: #888888;
    margin: 0 4px;
  }

  @keyframes slideIn {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }
  /* Fin des Styles pour Section 7 (Tablet Landscape) */

#section7 a[href^="tel"],
#section7 a[href^="mailto"] {
    color: white;
    text-decoration: none;
}

.social-icons {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: -25px;
    margin-bottom: 35px;
}

.social-icons a {
    text-decoration: none;
    color: #E0E0E4;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-icons a:hover {
    color: #f0f0f0;
    transform: scale(1.1);
}

.muso-icon {
    filter: brightness(0) invert(1);
    transition: all 0.3s ease;
    width: 40px;
    height: 44px;
    color: #f0f0f0;
    vertical-align: middle;
}
.muso-icon:hover {
    transform: scale(1.1);
    filter: brightness(0) invert(0.8);
}

/* Styles pour le bouton Smash */
.smash-button-container {
    position: absolute;
    top: 350px; /* Sous le titre */
    left: 30px; /* Même position X que le titre */
    z-index: 5;
    cursor: pointer;
}

.smash-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.1);
    padding: 12px 20px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    text-align: center;
    white-space: nowrap;
    min-width: fit-content;
}

.smash-button:hover {
    transform: scale(1.05);
    color: #E0E0E4;
}

.smash-icon {
    width: 30px;
    height: 30px;
    filter: brightness(0) invert(1);
    transition: all 0.3s ease;
}

.smash-text {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 500;
}

@media (max-width: 320px) {
    
    .header-side a,
    .header-side button{
        font-size:  25px;
    }
    .header-side.left {
        margin-left: 60px;
    }
    
    /* Sélecteur de langue mobile très petit */
    .lang-selector {
        font-size: 18px;
    }
    
    .lang-separator {
        margin: 0 2px;
    }
    
    /* Bouton Smash responsive mobile */
    .smash-button {
        white-space: normal;
    }
    
    #section1 {
        position: relative;
        overflow: hidden;
        background-size: cover;
        background-position: center;
    }
    
    #section1 .section1-content {
        flex-direction: column;
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 2;
    }
    
    #section1 .section1-image {
        display: none; /* Masquer l'image originale */
    }
    
    #section1 .text-container {
        position: absolute;
        bottom: auto;
        top: 60vh; /* Descendu encore plus bas */
        left: 20px;
        z-index: 3;
        margin: 0;
        padding: 0;
        text-align: left;
        align-items: flex-start;
        width: 90%;
    }
    
    #section1 .section1-text {
        font-size: 70px;
        margin-top: 0;
        text-align: left;
        line-height: 0.8;
        margin-bottom: 5px;
    }
    
    .section1-subtitle {
        font-size: 18px; /* Taille réduite */
        text-align: left;
        align-self: flex-start;
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.2;
    }
    
    .section1-credit {
        font-size: 16px; /* Taille réduite */
        text-align: left;
        align-self: flex-start;
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.2;
    }
    
    .section1-url {
        font-family: 'TT Interphases Pro', sans-serif;
        position: absolute;
        bottom: auto;
        right: 20px;
        top: 30vh; /* Environ 45% de la hauteur de la fenêtre */
        transform: rotate(-90deg);
        transform-origin: top right;
        font-size: 16px;
        text-align: center;
        width: auto;
        white-space: nowrap;
    }
    .section1-url-desktop {
        display: none;
    }
    .year-badge {
        display: none;
    }

    /* Styles pour Section 8 (max-width: 320px) */
    #section8 {
        justify-content: center;
        align-items: stretch;
        padding: 5vh 5vw;
        box-sizing: border-box;
    }

    .section8-content {
        position: static;
        width: 100%;
        height: auto;
        flex-direction: column;
        gap: 30px;
    }

    .section8-text {
        position: static;
        transform: none;
        width: 100%;
        max-width: none;
        order: 1;
    }

    .section8-text p {
        font-size: 15px;
        text-align: left;
        line-height: 1.5;
    }

    /* Carrousel pour mobile */
    .section8-images {
        order: 2;
        width: 100%;
        margin-top: 25px;
    }

    .section8-carousel-container {
        position: relative;
        width: 100%;
        border-radius: 12px;
        overflow: hidden;
        background: #1a1a1a;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    .section8-carousel {
        position: relative;
        width: 100%;
        height: 220px;
        overflow: hidden;
    }

    .section8-carousel-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
    }

    .section8-carousel-image.active {
        opacity: 1;
    }

    .section8-carousel-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.7);
        color: white;
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 18px;
        cursor: pointer;
        z-index: 10;
        transition: background 0.3s ease;
    }

    .section8-carousel-btn:hover {
        background: rgba(0, 0, 0, 0.9);
    }

    .section8-carousel-btn.prev {
        left: 10px;
    }

    .section8-carousel-btn.next {
        right: 10px;
    }

    .section8-carousel-indicators {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 15px;
    }

    .section8-indicator {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        cursor: pointer;
        transition: background 0.3s ease;
    }

    .section8-indicator.active {
        background: white;
    }

    .section2-title {
        font-size: 30px;
        text-align: left;
        width: 90%;
        margin: 0 0 30px 0; /* Espace augmenté sous le titre */
        position: absolute;
        top: 25vh; /* Ajusté pour plus d'espace en haut */
        left: 5%;
        right: 5%;
    }
    
    .section2-description-block {
        position: absolute;
        bottom: auto;
        top: 45vh; /* Descendu pour espace avec titre */
        left: 5%;
        right: 5%;
        max-width: none;
        width: 90%;
        text-align: left;
    }
    
    .section2-description {
        font-size: 14px;
        text-align: left;
        margin-bottom: 10px; /* Réduit l'espacement */
    }
    
    .section2-motto {
        font-size: 14px;
        text-align: left;
    }
    
    .section2-signature {
        font-size: 20px;
        bottom: 20vh; /* Remontée légèrement */
        top: auto;
        left: 5%;
        right: auto;
        width: auto;
        text-align: left;
        position: absolute;
    }

    #section3 {
        padding: 15px; /* Padding vertical réduit */
        justify-content: space-around;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .section3-title {
        font-family: 'Bebas Neue', sans-serif;
        font-weight: bold;
        letter-spacing: 0.04em;
        font-size: 70px; /* Taille réduite */
        text-align: center;
        position: relative;
        top: -10vh;
        left: auto;
    }
    
    .services-grid {
       
        display: flex;
        flex-direction: column;
        gap: 40px; /* Réduit l'espace entre les colonnes (groupes) */
        align-items: center;
        width: 100%;
        margin-top: -40vh;
    }
    
    .services-column {
        gap: 2px; /* Espace entre capsules dans une colonne réduit */
        width: 80%;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .service-capsule {
        width: 100%;
        padding: 10px 15px; /* Padding réduit */
        font-size: 1rem; /* Taille de police réduite */
        border: 1.5px solid white; /* Bordure plus fine */
        border-radius: 22px; /* Rayon réduit */
        text-align: center;
        font-family: 'Poppins', sans-serif;
        color: white;
        background-color: transparent;
    }
    
    .connector {
        height: 15px; /* Hauteur réduite */
        width: 1.5px; /* Épaisseur plus fine */
        background-color: white;
        margin: 0px auto; /* Marge verticale réduite */
    }

    /* Masquer le dernier connecteur de chaque colonne */
    .services-column .service-capsule:last-of-type + .connector {
        display: none;
    }
    /* Masquer tous les connecteurs si une seule capsule dans la colonne */
    .services-column .service-capsule:only-child + .connector {
        display: none;
    }
     /* Ajustement spécifique pour la dernière colonne qui n'a pas de connecteur après */
    .services-grid > .services-column:last-child > .service-capsule:last-of-type + .connector {
        display:none;
    }
    #section4 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
     }
 
     .section4-title {
         font-size: 75px;     
         display: flex; /* Modifié pour centrage robuste */
         justify-content: center; /* Modifié pour centrage robuste */
         align-items: center; /* Ajouté pour centrage robuste */
         width: 100%;         
         position: static;    
         transform: none;         
         margin-bottom: 10px; /* Réduit pour moins d'espace */
     }
 
     /* Styles pour le sous-titre, références et trust-block Section 4 (max-width: 393px) */
     .section4-subtitle {
         font-size: 14px;    
         text-align: right; /* Modifié pour alignement à droite */ 
         width: 100%;
         position: static;
         transform: none;
         margin-top: 0;      
         margin-bottom: 12px; /* Réduit pour moins d'espace */
     }
 
     .references-images {
         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: flex-start;
         width: 40%;
     }
 
     .reference-item {
         flex: 0 0 100px;    /* Largeur fixe pour chaque item, pas de croissance/réduction */
         text-align: center; 
     }
     
     .reference-caption {
         font-size: 12px;
         margin-top: 6px; 
     }
 
     .trust-block {
         position: static; 
         width: 95%; /* Augmenté */
         max-width: none;
         text-align: left; /* Modifié */
         margin: 70px 0 20px 0; /* Modifié pour alignement à gauche */
         right: auto;         
         bottom: auto;        
     }
 
     .trust-block h3 {
        margin-top: 20px;
         font-size: 17px; /* Augmenté */
         font-weight: bold; /* Ajouté */
         text-align: left; /* Assuré */
         margin-bottom: 6px; /* Ajusté */
     }
 
     .trust-block p {
         font-size: 14px; /* Augmenté */
         text-align: left; /* Assuré */
         line-height: 1.5;
         margin: 0;
     }
 
     /* Styles pour Section 5 (max-width: 393px) */
     #section5 {
         justify-content: center; /* Modifié pour centrage vertical */
         align-items: stretch; /* Étirer les enfants pour prendre la largeur */
         padding: 10vh 5vw; /* Espacement interne */
         margin-bottom: 1vh;
     }
 
     .section5-title {
         position: static; /* Sortir du positionnement absolu */
         font-size: 60px; /* Augmenté */
         text-align: left; /* Modifié pour alignement à gauche */
         line-height: 1.2;
         margin: 0 0 30px 0; /* Marge en bas, autres à 0 */
         width: 100%;
         margin-top: -5vh;
     }
 
     .prep-content {
         position: static; /* Sortir du positionnement absolu */
         width: 100%; /* Prendre toute la largeur disponible */
         padding-left: 0; /* Annuler le padding spécifique desktop */
         max-width: none; /* Annuler la largeur max desktop */
     }
 
     .prep-items {
         gap: 25px; /* Espacement vertical entre les items */
     }
 
     .prep-item {
         flex-direction: column; /* Label au-dessus de la valeur */
         align-items: flex-start; /* Aligner label et valeur à gauche */
         gap: 5px; /* Petit espace entre label et valeur */
     }
 
     .prep-item-label {
         width: auto; /* Annuler largeur fixe desktop */
         font-size: 18px; /* Taille de police réduite */
         white-space: normal; /* Permettre le retour à la ligne si besoin */
         text-align: left; /* Assurer alignement à gauche */
     }
 
     .prep-item-value {
         font-size: 15px; /* Taille de police réduite */
         margin-left: 0; /* Annuler décalage desktop */
         width: 100%; /* Prendre la largeur disponible */
         text-align: left; /* Assurer alignement à gauche */
     }
 
     .prep-item-format .prep-item-value,
     .prep-item-samplerate .prep-item-value,
     .prep-item-headroom .prep-item-value {
         margin-bottom: 0; /* Annuler marge en bas spécifique */
         width: 100%; /* Assurer la largeur */
         margin-left: 0; /* Annuler le décalage desktop spécifique */
     }
     /* Fin des Styles pour Section 5 (max-width: 393px) */
 
     /* Styles pour Section 6 (max-width: 393px) - NOUVEAU */
     #section6 {
         position: relative;
         padding: 10vh 5vw; /* Corrigé */
         justify-content: flex-start;
         align-items: flex-start;
     }
 
     .section6-title {
         font-family: 'Bebas Neue', sans-serif;
         letter-spacing: 0.04em;
         position: absolute;
         top: 10vh; /* Modifié */
         right: 40px;
         transform: rotate(-90deg); /* Modifié */
         transform-origin: center right;
         font-size: 70px;
         font-weight: bold;
         white-space: nowrap;
         z-index: 10;
         margin: 0;
     }
 
     .pricing-content {
         position: static;
         transform: none;
         width: 100%;
         flex-direction: column;
         align-items: flex-start;
         gap: 30px; /* Corrigé */
         margin-top: 10vh;
         margin-bottom: 3vh;
     }
 
     .pricing-block {
         width: 100%;
     }
 
     .pricing-title {
         font-size: 20px; /* Corrigé */
         text-align: left;
         margin-bottom: 10px; /* Corrigé */
     }
 
     .pricing-list {
         font-size: 15px; /* Corrigé */
         text-align: left;
         padding-left: 20px;
     }
     
     .pricing-list li {
         margin-bottom: 8px;
     }
 
     .options-block .quote-text {
         position: static;
         transform: none;
         white-space: normal;
         margin-top: 10px;
         text-align: left;
         font-size: 15px; /* Corrigé */
     }
 
     .discount-block {
         position: static;
         width: 100%;
         text-align: left;
     }
 
     .discount-title {
         font-size: 20px; /* Corrigé */
         text-align: left;
         margin-bottom: 10px; /* Corrigé */
     }
 
     .discount-list {
         font-size: 15px; /* Corrigé */
         text-align: left;
         padding-left: 20px;
     }
     /* Fin des Styles pour Section 6 (max-width: 393px) */
 
     /* Styles pour Section 7 (max-width: 393px) - NOUVEAU */
     #section7 {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: flex-start;
         padding: 12vh 5vw; /* Adapté */
         box-sizing: border-box; /* S'assurer que le padding est inclus */
     }
 
     .section7-title {
         position: static; /* Annuler le positionnement absolu desktop */
         font-size: 70px;  /* Adapté */
         text-align: left;
         line-height: 1.1;
         margin: 0 0 25px 0; /* Adapté */
         width: 100%;
         color: white;
         font-family: 'Bebas Neue', sans-serif;
     }
 
     .contact-subtitle {
         position: static; /* Annuler le positionnement absolu desktop */
         font-size: 12px; /* Cible */
         text-align: left;
         line-height: 1.4;
         margin: 0;
         width: 100%;
         color: white;
         font-family: 'Poppins', sans-serif;
         font-weight: bold;
     }
 
     .contact-block {
         margin-top: 5vh;
     }
 
     .contact-label {
         font-size: 20px; /* Cible */
         font-weight: bold;
         text-align: left;
         font-family: 'Poppins', sans-serif;
         color: white;
         margin: 5px 0 2px 0; /* Cible */
     }
 
     .contact-value {
         font-size: 20px;
         text-align: left;
         font-family: 'Poppins', sans-serif;
         color: white;
         margin: 0 0 20px 0; /* Marge inférieure augmentée */
     }
     /* Fin des Styles pour Section 7 (max-width: 393px) */
 
     .year-badge,
     .section1-url-desktop {
         display: none;
     }

    #section7 .social-icons {
        margin-top: 5px;
        margin-bottom: 25px;
    }

    #section7 .social-icons a {
        font-size: 30px;
    }
}

@media (min-width: 321px) and (max-width: 375px) {
    .header-side a,
    .header-side button{
        font-size:  25px;
    }
    .header-side.left {
        margin-left: 100px;
    }
    
    /* Sélecteur de langue mobile petit */
    .lang-selector {
        font-size: 18px;
    }
    
    .lang-separator {
        margin: 0 2px;
    }
    
    /* Bouton Smash responsive mobile */
    .smash-button {
        white-space: normal;
    }
    
    #section1 {
        position: relative;
        overflow: hidden;
        background-size: cover;
        background-position: center;
    }
    
    #section1 .section1-content {
        flex-direction: column;
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 2;
    }
    
    #section1 .section1-image {
        display: none; /* Masquer l'image originale */
    }
    
    #section1 .text-container {
        position: absolute;
        bottom: auto;
        top: 60vh; /* Descendu encore plus bas */
        left: 20px;
        z-index: 3;
        margin: 0;
        padding: 0;
        text-align: left;
        align-items: flex-start;
        width: 90%;
    }
    
    #section1 .section1-text {
        font-size: 70px;
        margin-top: 0;
        text-align: left;
        line-height: 0.8;
        margin-bottom: 5px;
    }
    
    .section1-subtitle {
        font-size: 18px; /* Taille réduite */
        text-align: left;
        align-self: flex-start;
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.2;
    }
    
    .section1-credit {
        font-size: 16px; /* Taille réduite */
        text-align: left;
        align-self: flex-start;
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.2;
    }
    
    .section1-url {
        font-family: 'TT Interphases Pro', sans-serif;
        position: absolute;
        bottom: auto;
        right: 20px;
        top: 30vh; /* Environ 45% de la hauteur de la fenêtre */
        transform: rotate(-90deg);
        transform-origin: top right;
        font-size: 16px;
        text-align: center;
        width: auto;
        white-space: nowrap;
    }
    .section1-url-desktop {
        display: none;
    }
    .year-badge {
        display: none;
    }
    .section2-title {
        font-size: 35px;
        text-align: left;
        width: 90%;
        margin: 0 0 30px 0; /* Espace augmenté sous le titre */
        position: absolute;
        top: 25vh; /* Ajusté pour plus d'espace en haut */
        left: 5%;
        right: 5%;
    }
    
    .section2-description-block {
        position: absolute;
        bottom: auto;
        top: 45vh; /* Descendu pour espace avec titre */
        left: 5%;
        right: 5%;
        max-width: none;
        width: 90%;
        text-align: left;
    }
    
    .section2-description {
        font-size: 14px;
        text-align: left;
        margin-bottom: 10px; /* Réduit l'espacement */
    }
    
    .section2-motto {
        font-size: 14px;
        text-align: left;
    }
    
    .section2-signature {
        font-size: 20px;
        bottom: 20vh; /* Remontée légèrement */
        top: auto;
        left: 5%;
        right: auto;
        width: auto;
        text-align: left;
        position: absolute;
    }

    #section3 {
        padding: 15px; /* Padding vertical réduit */
        justify-content: space-around;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .section3-title {
        font-family: 'Bebas Neue', sans-serif;
        font-weight: bold;
        letter-spacing: 0.04em;
        font-size: 70px; /* Taille réduite */
        text-align: center;
        position: relative;
        top: -10vh;
        left: auto;
    }
    
    .services-grid {
       
        display: flex;
        flex-direction: column;
        gap: 40px; /* Réduit l'espace entre les colonnes (groupes) */
        align-items: center;
        width: 100%;
        margin-top: -40vh;
    }
    
    .services-column {
        gap: 2px; /* Espace entre capsules dans une colonne réduit */
        width: 80%;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .service-capsule {
        width: 100%;
        padding: 10px 15px; /* Padding réduit */
        font-size: 1rem; /* Taille de police réduite */
        border: 1.5px solid white; /* Bordure plus fine */
        border-radius: 22px; /* Rayon réduit */
        text-align: center;
        font-family: 'Poppins', sans-serif;
        color: white;
        background-color: transparent;
    }
    
    .connector {
        height: 15px; /* Hauteur réduite */
        width: 1.5px; /* Épaisseur plus fine */
        background-color: white;
        margin: 0px auto; /* Marge verticale réduite */
    }

    /* Masquer le dernier connecteur de chaque colonne */
    .services-column .service-capsule:last-of-type + .connector {
        display: none;
    }
    /* Masquer tous les connecteurs si une seule capsule dans la colonne */
    .services-column .service-capsule:only-child + .connector {
        display: none;
    }
     /* Ajustement spécifique pour la dernière colonne qui n'a pas de connecteur après */
    .services-grid > .services-column:last-child > .service-capsule:last-of-type + .connector {
        display:none;
    }
    #section4 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
     }
 
     .section4-title {
         font-size: 75px;     
         display: flex; /* Modifié pour centrage robuste */
         justify-content: center; /* Modifié pour centrage robuste */
         align-items: center; /* Ajouté pour centrage robuste */
         width: 100%;         
         position: static;    
         transform: none;         
         margin-bottom: 10px; /* Réduit pour moins d'espace */
     }
 
     /* Styles pour le sous-titre, références et trust-block Section 4 (max-width: 393px) */
     .section4-subtitle {
         font-size: 16px;    
         text-align: right; /* Modifié pour alignement à droite */ 
         width: 100%;
         position: static;
         transform: none;
         margin-top: 0;      
         margin-bottom: 12px; /* Réduit pour moins d'espace */
     }
 
     .references-images {
         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: flex-start;
         width: 30%;
     }
 
     .reference-item {
         flex: 0 0 100px;    /* Largeur fixe pour chaque item, pas de croissance/réduction */
         text-align: center; 
     }
     
     
     
     .reference-caption {
         font-size: 12px;
         margin-top: 6px; 
     }
 
     .trust-block {
         position: static; 
         width: 95%; /* Augmenté */
         max-width: none;
         text-align: left; /* Modifié */
         margin: 70px 0 20px 0; /* Modifié pour alignement à gauche */
         right: auto;         
         bottom: auto;        
     }
 
     .trust-block h3 {
         font-size: 17px; /* Augmenté */
         font-weight: bold; /* Ajouté */
         text-align: left; /* Assuré */
         margin-bottom: 6px; /* Ajusté */
     }
 
     .trust-block p {
         font-size: 14px; /* Augmenté */
         text-align: left; /* Assuré */
         line-height: 1.5;
         margin: 0;
     }
 
     /* Styles pour Section 5 (max-width: 393px) */
     #section5 {
         justify-content: center; /* Modifié pour centrage vertical */
         align-items: stretch; /* Étirer les enfants pour prendre la largeur */
         padding: 10vh 5vw; /* Espacement interne */
     }
 
     .section5-title {
         position: static; /* Sortir du positionnement absolu */
         font-size: 60px; /* Augmenté */
         text-align: left; /* Modifié pour alignement à gauche */
         line-height: 1.2;
         margin: 0 0 30px 0; /* Marge en bas, autres à 0 */
         width: 100%;
         margin-top: -5vh;
     }
 
     .prep-content {
         position: static; /* Sortir du positionnement absolu */
         width: 100%; /* Prendre toute la largeur disponible */
         padding-left: 0; /* Annuler le padding spécifique desktop */
         max-width: none; /* Annuler la largeur max desktop */
     }
 
     .prep-items {
         gap: 25px; /* Espacement vertical entre les items */
     }
 
     .prep-item {
         flex-direction: column; /* Label au-dessus de la valeur */
         align-items: flex-start; /* Aligner label et valeur à gauche */
         gap: 5px; /* Petit espace entre label et valeur */
     }
 
     .prep-item-label {
         width: auto; /* Annuler largeur fixe desktop */
         font-size: 18px; /* Taille de police réduite */
         white-space: normal; /* Permettre le retour à la ligne si besoin */
         text-align: left; /* Assurer alignement à gauche */
     }
 
     .prep-item-value {
         font-size: 15px; /* Taille de police réduite */
         margin-left: 0; /* Annuler décalage desktop */
         width: 100%; /* Prendre la largeur disponible */
         text-align: left; /* Assurer alignement à gauche */
     }
 
     .prep-item-format .prep-item-value,
     .prep-item-samplerate .prep-item-value,
     .prep-item-headroom .prep-item-value {
         margin-bottom: 0; /* Annuler marge en bas spécifique */
         width: 100%; /* Assurer la largeur */
         margin-left: 0; /* Annuler le décalage desktop spécifique */
     }
     /* Fin des Styles pour Section 5 (max-width: 393px) */
 
     /* Styles pour Section 6 (max-width: 393px) - NOUVEAU */
     #section6 {
         position: relative;
         padding: 10vh 5vw; /* Corrigé */
         justify-content: flex-start;
         align-items: flex-start;
     }
 
     .section6-title {
         font-family: 'Bebas Neue', sans-serif;
         letter-spacing: 0.04em;
         position: absolute;
         top: 10vh; /* Modifié */
         right: 40px;
         transform: rotate(-90deg); /* Modifié */
         transform-origin: center right;
         font-size: 90px;
         font-weight: bold;
         white-space: nowrap;
         z-index: 10;
         margin: 0;
     }
 
     .pricing-content {
         position: static;
         transform: none;
         width: 100%;
         flex-direction: column;
         align-items: flex-start;
         gap: 30px; /* Corrigé */
         margin-top: 10vh;
         margin-bottom: 3vh;
     }
 
     .pricing-block {
         width: 100%;
     }
 
     .pricing-title {
         font-size: 20px; /* Corrigé */
         text-align: left;
         margin-bottom: 10px; /* Corrigé */
     }
 
     .pricing-list {
         font-size: 15px; /* Corrigé */
         text-align: left;
         padding-left: 20px;
     }
     
     .pricing-list li {
         margin-bottom: 8px;
     }
 
     .options-block .quote-text {
         position: static;
         transform: none;
         white-space: normal;
         margin-top: 10px;
         text-align: left;
         font-size: 15px; /* Corrigé */
     }
 
     .discount-block {
         position: static;
         width: 100%;
         text-align: left;
     }
 
     .discount-title {
         font-size: 20px; /* Corrigé */
         text-align: left;
         margin-bottom: 10px; /* Corrigé */
     }
 
     .discount-list {
         font-size: 15px; /* Corrigé */
         text-align: left;
         padding-left: 20px;
     }
     /* Fin des Styles pour Section 6 (max-width: 393px) */
 
     /* Styles pour Section 7 (max-width: 393px) - NOUVEAU */
     #section7 {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: flex-start;
         padding: 12vh 5vw; /* Adapté */
         box-sizing: border-box; /* S'assurer que le padding est inclus */
     }
 
     .section7-title {
         position: static; /* Annuler le positionnement absolu desktop */
         font-size: 70px;  /* Adapté */
         text-align: left;
         line-height: 1.1;
         margin: 0 0 25px 0; /* Adapté */
         width: 100%;
         color: white;
         font-family: 'Bebas Neue', sans-serif;
     }
 
     .contact-subtitle {
         position: static; /* Annuler le positionnement absolu desktop */
         font-size: 12px; /* Cible */
         text-align: left;
         line-height: 1.4;
         margin: 0;
         width: 100%;
         color: white;
         font-family: 'Poppins', sans-serif;
         font-weight: bold;
     }
 
     .contact-block {
         margin-top: 5vh;
     }
 
     .contact-label {
         font-size: 20px; /* Cible */
         font-weight: bold;
         text-align: left;
         font-family: 'Poppins', sans-serif;
         color: white;
         margin: 5px 0 2px 0; /* Cible */
     }
 
     .contact-value {
         font-size: 20px;
         text-align: left;
         font-family: 'Poppins', sans-serif;
         color: white;
         margin: 0 0 20px 0; /* Marge inférieure augmentée */
     }
     /* Fin des Styles pour Section 7 (max-width: 393px) */
 
     .year-badge,
     .section1-url-desktop {
         display: none;
     }

           /* Styles pour Section 8 (321px-375px) */
      #section8 {
          justify-content: center;
          align-items: stretch;
          padding: 5vh 5vw;
          box-sizing: border-box;
      }

     .section8-content {
         position: static;
         width: 100%;
         height: auto;
         flex-direction: column;
         gap: 30px;
     }

           .section8-text {
          position: static;
          transform: none;
          width: 100%;
          max-width: none;
          order: 1;
      }

      .section8-text p {
          font-size: 15px;
          text-align: left;
          line-height: 1.5;
      }

             /* Carrousel pour mobile 321-375px */
       .section8-images {
          order: 2;
          width: 100%;
          margin-top: 25px;
       }

       .section8-carousel-container {
          position: relative;
          width: 100%;
          border-radius: 12px;
          overflow: hidden;
          background: #1a1a1a;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
       }

       .section8-carousel {
          position: relative;
          width: 100%;
          height: 240px;
          overflow: hidden;
       }

       .section8-carousel-image {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          opacity: 0;
          transition: opacity 0.5s ease-in-out;
       }

       .section8-carousel-image.active {
          opacity: 1;
       }

       .section8-carousel-btn {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          background: rgba(0, 0, 0, 0.7);
          color: white;
          border: none;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          font-size: 18px;
          cursor: pointer;
          z-index: 10;
          transition: background 0.3s ease;
       }

       .section8-carousel-btn:hover {
          background: rgba(0, 0, 0, 0.9);
       }

       .section8-carousel-btn.prev {
          left: 10px;
       }

       .section8-carousel-btn.next {
          right: 10px;
       }

       .section8-carousel-indicators {
          display: flex;
          justify-content: center;
          gap: 8px;
          margin-top: 15px;
       }

       .section8-indicator {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.4);
          cursor: pointer;
          transition: background 0.3s ease;
       }

       .section8-indicator.active {
          background: white;
       }

     #section7 .social-icons {
        margin-top: 5px;
        margin-bottom: 25px;
    }

    #section7 .social-icons a {
        font-size: 30px;
    }
}

@media (min-width: 376px) and (max-width: 393px) {
    .header-side a,
    .header-side button{
        font-size:  25px;
    }
    .header-side.left {
        margin-left: 100px;
    }
    
    /* Sélecteur de langue mobile moyen */
    .lang-selector {
        font-size: 20px;
    }
    
    .lang-separator {
        margin: 0 3px;
    }
    
    /* Bouton Smash responsive mobile */
    .smash-button {
        white-space: normal;
    }
    /* Nouveaux styles pour section 1 */
    #section1 {
        position: relative;
        overflow: hidden;
        background-size: cover;
        background-position: center;
    }
    
    #section1 .section1-content {
        flex-direction: column;
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 2;
    }
    
    #section1 .section1-image {
        display: none; /* Masquer l'image originale */
    }
    
    #section1 .text-container {
        position: absolute;
        bottom: auto;
        top: 60vh; /* Descendu encore plus bas */
        left: 20px;
        z-index: 3;
        margin: 0;
        padding: 0;
        text-align: left;
        align-items: flex-start;
        width: 90%;
    }
    
    #section1 .section1-text {
        font-size: 70px;
        margin-top: 0;
        text-align: left;
        line-height: 0.8;
        margin-bottom: 5px;
    }
    
    .section1-subtitle {
        font-size: 18px; /* Taille réduite */
        text-align: left;
        align-self: flex-start;
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.2;
    }
    
    .section1-credit {
        font-size: 16px; /* Taille réduite */
        text-align: left;
        align-self: flex-start;
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.2;
    }
    
    .section1-url {
        font-family: 'TT Interphases Pro', sans-serif;
        position: absolute;
        bottom: auto;
        right: 20px;
        top: 30vh; /* Environ 45% de la hauteur de la fenêtre */
        transform: rotate(-90deg);
        transform-origin: top right;
        font-size: 16px;
        text-align: center;
        width: auto;
        white-space: nowrap;
    }
    
    /* Assurer qu'il n'y a pas de débordement horizontal */
    html, body, .container, .fullscreen-section {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Styles pour Section 2 */
    .section2-title {
        font-size: 38px;
        text-align: left;
        width: 90%;
        margin: 0 0 25px 0; /* Espace augmenté sous le titre */
        position: absolute;
        top: 20vh; /* Ajusté pour plus d'espace en haut */
        left: 5%;
        right: 5%;
    }
    
    .section2-description-block {
        
        position: absolute;
        bottom: auto;
        top: 45vh; /* Descendu pour espace avec titre */
        left: 5%;
        right: 5%;
        max-width: none;
        width: 90%;
        text-align: left;
    }
    
    .section2-description {
        
        font-size: 14px;
        text-align: left;
        margin-bottom: 10px; /* Réduit l'espacement */
    }
    
    .section2-motto {
        font-size: 14px;
        text-align: left;
    }
    
    .section2-signature {
        font-size: 30px;
        bottom: 12vh; /* Remontée légèrement */
        top: auto;
        left: 5%;
        right: auto;
        width: auto;
        text-align: left;
        position: absolute;
    }

    /* Styles pour Section 3 */
    #section3 {
        padding: 15px; /* Padding vertical réduit */
        justify-content: space-around;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .section3-title {
        font-family: 'Bebas Neue', sans-serif;
        font-weight: bold;
        letter-spacing: 0.04em;
        font-size: 80px; /* Taille réduite */
        text-align: center;
        position: relative;
        top: -6vh;
        left: auto;
    }
    
    .services-grid {
       
        display: flex;
        flex-direction: column;
        gap: 40px; /* Réduit l'espace entre les colonnes (groupes) */
        align-items: center;
        width: 100%;
        margin-top: -30vh;
    }
    
    .services-column {
        gap: 2px; /* Espace entre capsules dans une colonne réduit */
        width: 60%;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .service-capsule {
        width: 140%;
        padding: 10px 15px; /* Padding réduit */
        font-size: 1rem; /* Taille de police réduite */
        border: 1.5px solid white; /* Bordure plus fine */
        border-radius: 22px; /* Rayon réduit */
        text-align: center;
        font-family: 'Poppins', sans-serif;
        color: white;
        background-color: transparent;
    }
    
    .connector {
        height: 15px; /* Hauteur réduite */
        width: 1.5px; /* Épaisseur plus fine */
        background-color: white;
        margin: 0px auto; /* Marge verticale réduite */
    }

    /* Masquer le dernier connecteur de chaque colonne */
    .services-column .service-capsule:last-of-type + .connector {
        display: none;
    }
    /* Masquer tous les connecteurs si une seule capsule dans la colonne */
    .services-column .service-capsule:only-child + .connector {
        display: none;
    }
     /* Ajustement spécifique pour la dernière colonne qui n'a pas de connecteur après */
    .services-grid > .services-column:last-child > .service-capsule:last-of-type + .connector {
        display:none;
    }

    /* Styles pour Section 4 (max-width: 393px) */
    #section4 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
     }
 
     .section4-title {
         font-size: 94px;     
         display: flex; /* Modifié pour centrage robuste */
         justify-content: center; /* Modifié pour centrage robuste */
         align-items: center; /* Ajouté pour centrage robuste */
         width: 100%;         
         position: static;    
         transform: none;         
         margin-bottom: 10px; /* Réduit pour moins d'espace */
     }
 
     /* Styles pour le sous-titre, références et trust-block Section 4 (max-width: 393px) */
     .section4-subtitle {
         font-size: 16px;    
         text-align: right; /* Modifié pour alignement à droite */ 
         width: 100%;
         position: static;
         transform: none;
         margin-top: 0;      
         margin-bottom: 12px; /* Réduit pour moins d'espace */
     }
 
     .references-images {
         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: flex-start;
         width: 100%;
     }
 
     .reference-item {
         flex: 0 0 100px;    /* Largeur fixe pour chaque item, pas de croissance/réduction */
         text-align: center; 
     }
     
     
 
     .reference-caption {
         font-size: 12px;
         margin-top: 6px; 
     }
 
     .trust-block {
         position: static; 
         width: 95%; /* Augmenté */
         max-width: none;
         text-align: left; /* Modifié */
         margin: 70px 0 20px 0; /* Modifié pour alignement à gauche */
         right: auto;         
         bottom: auto;        
     }
 
     .trust-block h3 {
         font-size: 17px; /* Augmenté */
         font-weight: bold; /* Ajouté */
         text-align: left; /* Assuré */
         margin-bottom: 6px; /* Ajusté */
     }
 
     .trust-block p {
         font-size: 14px; /* Augmenté */
         text-align: left; /* Assuré */
         line-height: 1.5;
         margin: 0;
     }
 
     /* Styles pour Section 5 (max-width: 393px) */
     #section5 {
         justify-content: center; /* Modifié pour centrage vertical */
         align-items: stretch; /* Étirer les enfants pour prendre la largeur */
         padding: 10vh 5vw; /* Espacement interne */
     }
 
     .section5-title {
         position: static; /* Sortir du positionnement absolu */
         font-size: 60px; /* Augmenté */
         text-align: left; /* Modifié pour alignement à gauche */
         line-height: 1.2;
         margin: 0 0 30px 0; /* Marge en bas, autres à 0 */
         width: 100%;
         margin-top: 1vh;
     }
 
     .prep-content {
         position: static; /* Sortir du positionnement absolu */
         width: 100%; /* Prendre toute la largeur disponible */
         padding-left: 0; /* Annuler le padding spécifique desktop */
         max-width: none; /* Annuler la largeur max desktop */
     }
 
     .prep-items {
         gap: 25px; /* Espacement vertical entre les items */
     }
 
     .prep-item {
         flex-direction: column; /* Label au-dessus de la valeur */
         align-items: flex-start; /* Aligner label et valeur à gauche */
         gap: 5px; /* Petit espace entre label et valeur */
     }
 
     .prep-item-label {
         width: auto; /* Annuler largeur fixe desktop */
         font-size: 18px; /* Taille de police réduite */
         white-space: normal; /* Permettre le retour à la ligne si besoin */
         text-align: left; /* Assurer alignement à gauche */
     }
 
     .prep-item-value {
         font-size: 15px; /* Taille de police réduite */
         margin-left: 0; /* Annuler décalage desktop */
         width: 100%; /* Prendre la largeur disponible */
         text-align: left; /* Assurer alignement à gauche */
     }
 
     .prep-item-format .prep-item-value,
     .prep-item-samplerate .prep-item-value,
     .prep-item-headroom .prep-item-value {
         margin-bottom: 0; /* Annuler marge en bas spécifique */
         width: 100%; /* Assurer la largeur */
         margin-left: 0; /* Annuler le décalage desktop spécifique */
     }
     /* Fin des Styles pour Section 5 (max-width: 393px) */
 
     /* Styles pour Section 6 (max-width: 393px) - NOUVEAU */
     #section6 {
         position: relative;
         padding: 10vh 5vw; /* Corrigé */
         justify-content: flex-start;
         align-items: flex-start;
     }
 
     .section6-title {
         font-family: 'Bebas Neue', sans-serif;
         letter-spacing: 0.04em;
         position: absolute;
         top: 10vh; /* Modifié */
         right: 40px;
         transform: rotate(-90deg); /* Modifié */
         transform-origin: center right;
         font-size: 90px;
         font-weight: bold;
         white-space: nowrap;
         z-index: 10;
         margin: 0;
     }
 
     .pricing-content {
         position: static;
         transform: none;
         width: 100%;
         flex-direction: column;
         align-items: flex-start;
         gap: 30px; /* Corrigé */
         margin-top: 10vh;
         margin-bottom: 3vh;
     }
 
     .pricing-block {
         width: 100%;
     }
 
     .pricing-title {
         font-size: 20px; /* Corrigé */
         text-align: left;
         margin-bottom: 10px; /* Corrigé */
     }
 
     .pricing-list {
         font-size: 15px; /* Corrigé */
         text-align: left;
         padding-left: 20px;
     }
     
     .pricing-list li {
         margin-bottom: 8px;
     }
 
     .options-block .quote-text {
         position: static;
         transform: none;
         white-space: normal;
         margin-top: 10px;
         text-align: left;
         font-size: 15px; /* Corrigé */
     }
 
     .discount-block {
         position: static;
         width: 100%;
         text-align: left;
     }
 
     .discount-title {
         font-size: 20px; /* Corrigé */
         text-align: left;
         margin-bottom: 10px; /* Corrigé */
     }
 
     .discount-list {
         font-size: 15px; /* Corrigé */
         text-align: left;
         padding-left: 20px;
     }
     /* Fin des Styles pour Section 6 (max-width: 393px) */
 
     /* Styles pour Section 7 (max-width: 393px) - NOUVEAU */
     #section7 {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: flex-start;
         padding: 12vh 5vw; /* Adapté */
         box-sizing: border-box; /* S'assurer que le padding est inclus */
     }
 
     .section7-title {
         position: static; /* Annuler le positionnement absolu desktop */
         font-size: 70px;  /* Adapté */
         text-align: left;
         line-height: 1.1;
         margin: 0 0 25px 0; /* Adapté */
         width: 100%;
         color: white;
         font-family: 'Bebas Neue', sans-serif;
     }
 
     .contact-subtitle {
         position: static; /* Annuler le positionnement absolu desktop */
         font-size: 12px; /* Cible */
         text-align: left;
         line-height: 1.4;
         margin: 0;
         width: 100%;
         color: white;
         font-family: 'Poppins', sans-serif;
         font-weight: bold;
     }
 
     .contact-block {
         margin-top: 5vh;
     }
 
     .contact-label {
         font-size: 20px; /* Cible */
         font-weight: bold;
         text-align: left;
         font-family: 'Poppins', sans-serif;
         color: white;
         margin: 5px 0 2px 0; /* Cible */
     }
 
     .contact-value {
         font-size: 20px;
         text-align: left;
         font-family: 'Poppins', sans-serif;
         color: white;
         margin: 0 0 20px 0; /* Marge inférieure augmentée */
     }
     /* Fin des Styles pour Section 7 (max-width: 393px) */
 
     .year-badge,
     .section1-url-desktop {
         display: none;
     }

           /* Styles pour Section 8 (376px-393px) */
      #section8 {
          justify-content: center;
          align-items: stretch;
          padding: 5vh 5vw;
          box-sizing: border-box;
      }

     .section8-content {
         position: static;
         width: 100%;
         height: auto;
         flex-direction: column;
         gap: 35px;
     }

                       .section8-text {
          position: static;
          transform: none;
          width: 100%;
          max-width: none;
          order: 1;
      }

              .section8-text p {
          font-size: 15px;
          text-align: left;
          line-height: 1.6;
      }

             /* Carrousel pour mobile 376-393px */
       .section8-images {
           order: 2;
           width: 100%;
           margin-top: 25px;
       }

       .section8-carousel-container {
           position: relative;
           width: 100%;
           border-radius: 12px;
           overflow: hidden;
           background: #1a1a1a;
           box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
       }

       .section8-carousel {
           position: relative;
           width: 100%;
           height: 260px;
           overflow: hidden;
       }

       .section8-carousel-image {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           object-fit: cover;
           opacity: 0;
           transition: opacity 0.5s ease-in-out;
       }

               .section8-carousel-image.active {
            opacity: 1;
        }

        .section8-carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 18px;
            cursor: pointer;
            z-index: 10;
            transition: background 0.3s ease;
        }

        .section8-carousel-btn:hover {
            background: rgba(0, 0, 0, 0.9);
        }

        .section8-carousel-btn.prev {
            left: 10px;
        }

        .section8-carousel-btn.next {
            right: 10px;
        }

        .section8-carousel-indicators {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 15px;
        }

        .section8-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.4);
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .section8-indicator.active {
            background: white;
        }

      .section8-images {
         display: contents; /* Fait "disparaître" le conteneur pour que les images soient des enfants directs */
     }

       .section8-images {
           display: contents; /* Fait "disparaître" le conteneur pour que les images soient des enfants directs */
       }

     #section7 .social-icons {
        margin-top: 0px;
        margin-bottom: 35px;
    }

    #section7 .social-icons a {
        font-size: 30px;
    }
}
/* Standard Mobile (min-width: 394px) and (max-width: 600px) */
@media screen and (min-width: 394px) and (max-width: 600px) {
    .header-side a,
    .header-side button{
        font-size:  25px;
    }
    .header-side.left {
        margin-left: 100px;
    }
    
    /* Sélecteur de langue mobile standard */
    .lang-selector {
        font-size: 21px;
    }
    
    .lang-separator {
        margin: 0 3px;
    }
    
    /* Bouton Smash responsive mobile */
    .smash-button {
        white-space: normal;
    }

    
    /* Nouveaux styles pour section 1 */
    #section1 {
        position: relative;
        overflow: hidden;
        background-size: cover;
        background-position: center;
    }
    
    #section1 .section1-content {
        flex-direction: column;
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 2;
    }
    
    #section1 .section1-image {
        display: none; /* Masquer l'image originale */
    }
    
    #section1 .text-container {
        position: absolute;
        bottom: auto;
        top: 60vh; /* Descendu encore plus bas */
        left: 25px;
        z-index: 3;
        margin: 0;
        padding: 0;
        text-align: left;
        align-items: flex-start;
        width: 90%;
    }
    
    #section1 .section1-text {
        font-size: 80px;
        margin-top: 0;
        text-align: left;
        line-height: 0.8;
        margin-bottom: 5px;
    }
    
    .section1-subtitle {
        font-size: 20px; /* Taille réduite */
        text-align: left;
        align-self: flex-start;
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.2;
    }
    
    .section1-credit {
        font-size: 18px; /* Taille réduite */
        text-align: left;
        align-self: flex-start;
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.2;
    }
    
    .section1-url {
        position: absolute;
        bottom: auto;
        right: 25px;
        top: 30vh; /* Environ 45% de la hauteur de la fenêtre */
        transform: rotate(-90deg);
        transform-origin: top right;
        font-size: 16px;
        text-align: center;
        width: auto;
        white-space: nowrap;
    }
    
    /* Assurer qu'il n'y a pas de débordement horizontal */
    html, body, .container, .fullscreen-section {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Styles pour Section 2 */
    .section2-title {
        font-size: 40px;
        text-align: left;
        width: 90%;
        margin: 0 0 25px 0; /* Espace augmenté sous le titre */
        position: absolute;
        top: 20vh; /* Ajusté pour plus d'espace en haut */
        left: 5%;
        right: 5%;
    }
    
    .section2-description-block {
        position: absolute;
        bottom: auto;
        top: 45vh; /* Descendu pour espace avec titre */
        left: 5%;
        right: 5%;
        max-width: none;
        width: 90%;
        text-align: left;
    }
    
    .section2-description {
        font-size: 15px;
        text-align: left;
        margin-bottom: 10px; /* Réduit l'espacement */
    }
    
    .section2-motto {
        font-size: 15px;
        text-align: left;
    }
    
    .section2-signature {
        font-size: 34px;
        bottom: 12vh; /* Remontée légèrement */
        top: auto;
        left: 5%;
        right: auto;
        width: auto;
        text-align: left;
        position: absolute;
    }
    
    /* Styles pour Section 3 */
    #section3 {
        padding: 15px; /* Padding vertical réduit */
        justify-content: space-around;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .section3-title {
        font-family: 'Bebas Neue', sans-serif;
        font-weight: bold;
        letter-spacing: 0.04em;
        font-size: 90px; /* Taille réduite */
        text-align: center;
        position: relative;
        top: -25vh;
        left: auto;
    }
    
    .services-grid {
       
        display: flex;
        flex-direction: column;
        gap: 40px; /* Réduit l'espace entre les colonnes (groupes) */
        align-items: center;
        width: 100%;
        margin-top: -60vh;
    }
    
    .services-column {
        gap: 2px; /* Espace entre capsules dans une colonne réduit */
        width: 80%;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .service-capsule {
        width: 100%;
        padding: 10px 15px; /* Padding réduit */
        font-size: 1rem; /* Taille de police réduite */
        border: 1.5px solid white; /* Bordure plus fine */
        border-radius: 22px; /* Rayon réduit */
        text-align: center;
        font-family: 'Poppins', sans-serif;
        color: white;
        background-color: transparent;
    }
    
    .connector {
        height: 15px; /* Hauteur réduite */
        width: 1.5px; /* Épaisseur plus fine */
        background-color: white;
        margin: 0px auto; /* Marge verticale réduite */
    }
    /* Masquer le dernier connecteur de chaque colonne */
    .services-column .service-capsule:last-of-type + .connector {
        display: none;
    }
    /* Masquer tous les connecteurs si une seule capsule dans la colonne */
    .services-column .service-capsule:only-child + .connector {
        display: none;
    }
     /* Ajustement spécifique pour la dernière colonne qui n'a pas de connecteur après */
    .services-grid > .services-column:last-child > .service-capsule:last-of-type + .connector {
        display:none;
    }

    /* Styles pour Section 4 */
    #section4 {
        align-items: flex-start; /* Modifié pour alignement à gauche */
        justify-content: flex-start; 
        padding-top: 10vh; /* Augmenté (était 12vh) */
    }

    .section4-title {
        font-size: 100px;     /* Légèrement plus grand */
        display: flex; /* Modifié pour centrage robuste */
        justify-content: center; /* Modifié pour centrage robuste */
        align-items: center; /* Ajouté pour centrage robuste */
        width: 100%;         
        position: static;    
        transform: none;     
        line-height: 1.2;
        margin-top: 0;       
        margin-bottom: 10px; /* Réduit pour moins d'espace */
    }

    .section4-subtitle {
        font-size: 17px;
        text-align: right; /* Modifié pour alignement à droite */
        width: 100%;
        position: static;
        transform: none;
        margin-top: 0;
        margin-bottom: 15px; /* Réduit pour moins d'espace */
    }

    .references-images {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        justify-content: center;
        align-items: flex-start;
        gap: 18px;
        width: 100%;
        transform: none;
        padding-left: 0;
        margin-top: 0;
        padding-bottom: 12px;
    }

    .reference-item {
        flex: 0 0 110px; 
        text-align: center;
    }

    .reference-item img {
        border-width: 1px;
    }

    .reference-caption {
        font-size: 13px;
        margin-top: 10px;
    }

    .trust-block {
        position: static;
        width: 92%; /* Augmenté */
        max-width: none;
        text-align: left; /* Modifié */
        margin: 70px 0 25px 0; /* Modifié pour alignement à gauche */
        right: auto;
        bottom: auto;
    }

    .trust-block h3 {
        font-size: 20px; /* Augmenté */
        font-weight: bold; /* Ajouté */
        text-align: left; /* Assuré */
        margin-bottom: 10px; /* Ajusté */
    }

    .trust-block p {
        font-size: 16px; /* Augmenté */
        text-align: left; /* Assuré */
        line-height: 1.5;
        margin: 0;
    }

    /* Styles pour Section 5 (Standard Mobile) */
    #section5 {
        justify-content: center; /* Modifié pour centrage vertical */
        align-items: stretch;
        padding: 12vh 5vw;
    }

    .section5-title {
        position: static;
        font-size: 70px; /* Augmenté */
        text-align: left; /* Modifié pour alignement à gauche */
        line-height: 1.2;
        margin: 0 0 40px 0;
        width: 100%;
        margin-top: -5vh;
    }

    .prep-content {
        position: static;
        width: 100%;
        padding-left: 0;
        max-width: none;
    }

    .prep-items {
        gap: 30px;
    }

    .prep-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .prep-item-label {
        width: auto;
        font-size: 20px;
        white-space: normal;
        text-align: left; /* Assurer alignement à gauche */
    }

    .prep-item-value {
        font-size: 17px;
        margin-left: 0;
        width: 100%;
        text-align: left; /* Assurer alignement à gauche */
    }

    .prep-item-format .prep-item-value,
    .prep-item-samplerate .prep-item-value,
    .prep-item-headroom .prep-item-value {
        margin-bottom: 0;
        width: 100%;
        margin-left: 0; /* Annuler le décalage desktop spécifique */
    }
    /* Fin des Styles pour Section 5 (Standard Mobile) */

    /* Styles pour Section 6 (Standard Mobile) - NOUVEAU */
    #section6 {
        position: relative;
        padding: 12vh 5vw;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .section6-title {
        font-family: 'Bebas Neue', sans-serif;
        letter-spacing: 0.04em;
        position: absolute;
        top: 12vh; /* Modifié */
        right: 5vh;
        transform: rotate(-90deg); /* Modifié */
        transform-origin: center right;
        font-size: 100px;
        font-weight: bold;
        white-space: nowrap;
        z-index: 10;
        margin: 0;
    }

    .pricing-content {
        position: static;
        transform: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 35px; 
        margin-bottom: 35px; 
        margin-top: 8vh;
    }

    .pricing-block {
        width: 100%;
    }

    .pricing-title {
        font-size: 22px; 
        text-align: left;
        margin-bottom: 12px;
    }

    .pricing-list {
        font-size: 16px; 
        text-align: left;
        padding-left: 20px;
    }
    
    .pricing-list li {
        margin-bottom: 8px;
    }

    .options-block .quote-text {
        position: static;
        transform: none;
        white-space: normal;
        margin-top: 10px;
        text-align: left;
        font-size: 16px; 
    }

    .discount-block {
        position: static;
        width: 100%;
        text-align: left;
    }

    .discount-title {
        font-size: 22px; 
        text-align: left;
        margin-bottom: 12px;
    }

    .discount-list {
        font-size: 16px; 
        text-align: left;
        padding-left: 20px;
    }
    /* Fin des Styles pour Section 6 (Standard Mobile) */

    /* Styles pour Section 7 (Standard Mobile) - NOUVEAU */
    #section7 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 12vh 5vw; /* Adapté */
        box-sizing: border-box; /* S'assurer que le padding est inclus */
    }

    .section7-title {
        position: static; /* Annuler le positionnement absolu desktop */
        font-size: 70px;  /* Adapté */
        text-align: left;
        line-height: 1.1;
        margin: 0 0 25px 0; /* Adapté */
        width: 100%;
        color: white;
        font-family: 'Bebas Neue', sans-serif;
    }

    .contact-subtitle {
        position: static; /* Annuler le positionnement absolu desktop */
        font-size: 12px; /* Cible */
        text-align: left;
        line-height: 1.4;
        margin: 0;
        width: 100%;
        color: white;
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
    }

    .contact-label {
        font-size: 20px; /* Cible */
        font-weight: bold;
        text-align: left;
        font-family: 'Poppins', sans-serif;
        color: white;
        margin: 5px 0 2px 0; /* Cible */
    }

    .contact-value {
        
        font-size: 22px;
        text-align: left;
        font-family: 'Poppins', sans-serif;
        color: white;
        margin: 0 0 20px 0; /* Marge inférieure augmentée */
    }
    .contact-block {
       
        margin-top: 5vh;
    }
    /* Fin des Styles pour Section 7 (Standard Mobile) */

    .year-badge {
        display: none;
    }

    .year-badge,
    .section1-url-desktop {
        display: none;
    }

    /* Styles pour Section 8 (394px-600px) */
    #section8 {
        justify-content: center;
        align-items: stretch;
        padding: 6vh 5vw;
        box-sizing: border-box;
    }

    .section8-content {
        position: static;
        width: 100%;
        height: auto;
        flex-direction: column;
        gap: 40px;
    }

    .section8-text {
        position: static;
        transform: none;
        width: 100%;
        max-width: none;
        order: 1;
    }

         .section8-text p {
         font-size: 15px;
         text-align: left;
         line-height: 1.6;
     }

    /* Carrousel pour mobile 394-600px */
    .section8-images {
        order: 2;
        width: 100%;
        margin-top: 30px;
    }

    .section8-carousel-container {
        position: relative;
        width: 100%;
        border-radius: 12px;
        overflow: hidden;
        background: #1a1a1a;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    .section8-carousel {
        position: relative;
        width: 100%;
        height: 280px;
        overflow: hidden;
    }

    .section8-carousel-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
    }

    .section8-carousel-image.active {
        opacity: 1;
    }

    .section8-carousel-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.7);
        color: white;
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 18px;
        cursor: pointer;
        z-index: 10;
        transition: background 0.3s ease;
    }

    .section8-carousel-btn:hover {
        background: rgba(0, 0, 0, 0.9);
    }

    .section8-carousel-btn.prev {
        left: 10px;
    }

    .section8-carousel-btn.next {
        right: 10px;
    }

    .section8-carousel-indicators {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 15px;
    }

    .section8-indicator {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        cursor: pointer;
        transition: background 0.3s ease;
    }

    .section8-indicator.active {
        background: white;
    }

    #section7 .social-icons {
        margin-top: 0px;
        margin-bottom: 35px;
    }

    #section7 .social-icons a {
        font-size: 30px;
    }
}
/* Tablet Portrait (min-width: 601px) and (max-width: 767px) */
@media screen and (min-width: 601px) and (max-width: 767px) {
    .header-side a,
    .header-side button{
        font-size:  25px;
    }
    .header-side.left {
        margin-left: 280px;
    }
    
    /* Sélecteur de langue tablette portrait */
    .lang-selector {
        font-size: 20px;
    }
    
    .lang-separator {
        margin: 0 4px;
    }
    
    /* Bouton Smash responsive tablette */
    .smash-button {
        white-space: normal;
    }
    
   /* Styles pour Section 3 */
   #section3 {
    padding: 15px; /* Padding vertical réduit */
    justify-content: space-around;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.section3-title {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: bold;
    letter-spacing: 0.04em;
    font-size: 90px; /* Taille réduite */
    text-align: center;
    position: relative;
    top: -25vh;
    left: auto;
}

.services-grid {
   
    display: flex;
    flex-direction: column;
    gap: 40px; /* Réduit l'espace entre les colonnes (groupes) */
    align-items: center;
    width: 100%;
    margin-top: -60vh;
}

.services-column {
    gap: 2px; /* Espace entre capsules dans une colonne réduit */
    width: 80%;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.service-capsule {
    width: 100%;
    padding: 10px 5px; /* Padding réduit */
    font-size: 1rem; /* Taille de police réduite */
    border: 1.5px solid white; /* Bordure plus fine */
    border-radius: 22px; /* Rayon réduit */
    text-align: center;
    font-family: 'Poppins', sans-serif;
    color: white;
    background-color: transparent;
}

.connector {
    height: 15px; /* Hauteur réduite */
    width: 1.5px; /* Épaisseur plus fine */
    background-color: white;
    margin: 0px auto; /* Marge verticale réduite */
}
/* Masquer le dernier connecteur de chaque colonne */
.services-column .service-capsule:last-of-type + .connector {
    display: none;
}
/* Masquer tous les connecteurs si une seule capsule dans la colonne */
.services-column .service-capsule:only-child + .connector {
    display: none;
}
 /* Ajustement spécifique pour la dernière colonne qui n'a pas de connecteur après */
.services-grid > .services-column:last-child > .service-capsule:last-of-type + .connector {
    display:none;
}
    
    /* Nouveaux styles pour section 1 */
    #section1 {
        position: relative;
        overflow: hidden;
        background-size: cover;
        background-position: center;
    }
    
    #section1 .section1-content {
        flex-direction: column;
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 2;
    }
    
    #section1 .section1-image {
        display: none; /* Masquer l'image originale */
    }
    
    #section1 .text-container {
        position: absolute;
        bottom: auto;
        top: 55vh; /* Descendu encore plus bas */
        left: 30px;
        z-index: 3;
        margin: 0;
        padding: 0;
        text-align: left;
        align-items: flex-start;
        width: 90%;
    }
    
    #section1 .section1-text {
        font-size: 100px;
        margin-top: 0;
        text-align: left;
        line-height: 0.8;
        margin-bottom: 10px;
    }
    
    .section1-subtitle {
        font-size: 22px; /* Taille réduite */
        text-align: left;
        align-self: flex-start;
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.2;
    }
    
    .section1-credit {
        font-size: 20px; /* Taille réduite */
        text-align: left;
        align-self: flex-start;
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.2;
    }
    
    .section1-url {
        position: absolute;
        bottom: auto;
        right: -85px;
        top: 45vh; /* Environ 45% de la hauteur de la fenêtre */
        transform: rotate(-90deg);
        transform-origin: top center;
        font-size: 18px;
        text-align: center;
        width: auto;
        white-space: nowrap;
    }
    
    /* Assurer qu'il n'y a pas de débordement horizontal */
    html, body, .container, .fullscreen-section {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    
    /* Styles pour Section 2 */
    .section2-title {
        font-size: 54px;
        text-align: left;
        width: 90%;
        margin: 0 0 30px 0; /* Espace augmenté sous le titre */
        position: absolute;
        top: 18vh; /* Ajusté pour plus d'espace en haut */
        left: 5%;
        right: 5%;
    }
    
    .section2-description-block {
        position: absolute;
        bottom: auto;
        top: 40vh; /* Descendu pour espace avec titre */
        left: 5%;
        right: 5%;
        max-width: none;
        width: 90%;
        text-align: left;
    }
    
    .section2-description {
        font-size: 16px;
        text-align: left;
        margin-bottom: 10px; /* Réduit l'espacement */
    }
    
    .section2-motto {
        font-size: 16px;
        text-align: left;
    }
    
    .section2-signature {
        font-size: 40px;
        bottom: 12vh; /* Remontée légèrement */
        top: auto;
        left: 5%;
        right: auto;
        width: auto;
        text-align: left;
        position: absolute;
    }
    
    /* Styles pour Section 4 */
    #section4 {
        align-items: flex-start; /* Modifié pour alignement à gauche */
        justify-content: flex-start; 
        padding-top: 20vh; /* Augmenté (était 12vh) */
    }

    .section4-title {
        font-size: 115px;     /* Taille adaptée tablette paysage */
        display: flex; /* Modifié pour centrage robuste */
        justify-content: flex-end; /* Modifié pour centrage robuste */
        align-items: center; /* Ajouté pour centrage robuste */
        width: 100%;         
        position: static;    
        transform: none;     
        line-height: 1.2;
        margin-top: 0;       
        margin-bottom: 10px; /* Réduit pour moins d'espace */
    }

    .section4-subtitle {
        font-size: 19px;
        text-align: right; /* Modifié pour alignement à droite */
        width: 100%;
        position: static;
        transform: none;
        margin-top: 0;
        margin-bottom: 18px; /* Réduit pour moins d'espace */
    }

    .references-images {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 22px;
        width: 100%;
        transform: none;
        padding-left: 0;
        margin-top: 0;
        padding-bottom: 12px;
    }

    .reference-item {
        flex: 0 0 130px; 
        text-align: center;
    }
    
    .reference-item img {
        border-width: 1px;
    }

    .reference-caption {
        font-size: 14px;
        margin-top: 10px;
    }

    .trust-block {
        position: static;
        width: 90%; /* Augmenté */
        max-width: none;
        text-align: left; /* Modifié */
        margin: 40px 0 25px 0; /* Modifié pour alignement à gauche */
        right: auto;
        bottom: auto;
    }

    .trust-block h3 {
        font-size: 20px; /* Augmenté */
        font-weight: bold; /* Ajouté */
        text-align: left; /* Assuré */
        margin-bottom: 10px; /* Ajusté */
    }

    .trust-block p {
        font-size: 16px; /* Augmenté */
        text-align: left; /* Assuré */
        line-height: 1.5;
        margin: 0;
    }

    /* Styles pour Section 5 (Tablet Portrait) */
    #section5 {
        justify-content: center; /* Modifié pour centrage vertical */
        align-items: stretch;
        padding: 12vh 6vw;
    }

    .section5-title {
        position: static;
        font-size: 58px; /* Augmenté */
        text-align: left; /* Modifié pour alignement à gauche */
        line-height: 1.2;
        margin: 0 0 45px 0;
        width: 100%;
    }

    .prep-content {
        position: static;
        width: 100%;
        padding-left: 0;
        max-width: none;
    }

    .prep-items {
        gap: 32px;
    }

    .prep-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .prep-item-label {
        width: auto;
        font-size: 22px;
        white-space: normal;
        text-align: left; /* Assurer alignement à gauche */
    }

    .prep-item-value {
        font-size: 18px;
        margin-left: 0;
        width: 100%;
        text-align: left; /* Assurer alignement à gauche */
    }

    .prep-item-format .prep-item-value,
    .prep-item-samplerate .prep-item-value,
    .prep-item-headroom .prep-item-value {
        margin-bottom: 0;
        width: 100%;
        margin-left: 0; /* Annuler le décalage desktop spécifique */
    }
    /* Fin des Styles pour Section 5 (Tablet Portrait) */

    /* Styles pour Section 6 (Tablet Portrait) - NOUVEAU */
    #section6 {
        position: relative;
        padding: 12vh 6vw;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .section6-title {
        position: absolute;
        top: 12vh; /* Modifié */
        right: 25px;
        transform: rotate(-90deg); /* Modifié */
        transform-origin: center right;
        font-size: 58px;
        font-weight: bold;
        white-space: nowrap;
        z-index: 10;
        margin: 0;
    }

    .pricing-content {
        position: static;
        transform: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        margin-bottom: 40px;
    }

    .pricing-block {
        width: 100%;
    }

    .pricing-title {
        font-size: 24px;
        text-align: left;
        margin-bottom: 14px;
    }

    .pricing-list {
        font-size: 17px;
        text-align: left;
        padding-left: 20px;
    }
    
    .pricing-list li {
        margin-bottom: 8px;
    }

    .options-block .quote-text {
        position: static;
        transform: none;
        white-space: normal;
        margin-top: 10px;
        text-align: left;
        font-size: 17px;
    }

    .discount-block {
        position: static;
        width: 100%;
        text-align: left;
    }

    .discount-title {
        font-size: 24px;
        text-align: left;
        margin-bottom: 14px;
    }

    .discount-list {
        font-size: 17px;
        text-align: left;
        padding-left: 20px;
    }
    /* Fin des Styles pour Section 6 (Tablet Portrait) */

    /* Styles pour Section 7 (Tablet Portrait) - NOUVEAU */
    #section7 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 12vh 6vw; /* Adapté */
        box-sizing: border-box; /* S'assurer que le padding est inclus */
    }

    .section7-title {
        position: static; /* Annuler le positionnement absolu desktop */
        font-size: 80px;  /* Adapté */
        text-align: left;
        line-height: 1.1;
        margin: 0 0 30px 0; /* Adapté */
        width: 100%;
        color: white;
        font-family: 'Bebas Neue', sans-serif;
    }

    .contact-block {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .contact-label {
        font-size: 20px; /* Augmenté de 15px à 20px */
        font-weight: bold;
        text-align: left;
        font-family: 'Poppins', sans-serif;
        color: white;
        margin: 7px 0 4px 0;
    }

    .contact-value {
        font-size: 24px;
        text-align: left;
        font-family: 'Poppins', sans-serif;
        color: white;
        margin: 0 0 20px 0; /* Marge inférieure augmentée */
    }
    /* Fin des Styles pour Section 7 (Tablet Portrait) */

    .year-badge {
        display: none;
    }

    .year-badge,
    .section1-url-desktop {
        display: none;
    }

    /* Styles pour Section 8 (601px-767px) */
    #section8 {
        justify-content: center;
        align-items: stretch;
        padding: 6vh 6vw;
        box-sizing: border-box;
    }

    .section8-content {
        position: static;
        width: 100%;
        height: auto;
        flex-direction: column;
        gap: 45px;
    }

    .section8-text {
        position: static;
        transform: none;
        width: 100%;
        max-width: none;
        order: 1;
    }

    .section8-text p {
        font-size: 15px;
        text-align: left;
        line-height: 1.6;
    }

    /* Carrousel pour tablette 601-767px */
    .section8-images {
        order: 2;
        width: 100%;
        margin-top: 30px;
    }

    .section8-carousel-container {
        position: relative;
        width: 100%;
        border-radius: 12px;
        overflow: hidden;
        background: #1a1a1a;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    .section8-carousel {
        position: relative;
        width: 100%;
        height: 300px;
        overflow: hidden;
    }

    .section8-carousel-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
    }

    .section8-carousel-image.active {
        opacity: 1;
    }

    #section7 .social-icons {
        
        margin-top: 0px;
        margin-bottom: 35px;
    }

    #section7 .social-icons a {
        font-size: 30px;
    }
}
/* Tablet Landscape (min-width: 768px) and (max-width: 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .header-side a,
    .header-side button{
        font-size:  25px;
    }
    .header-side.left {
        margin-left: 100px;
    }
    
    /* Sélecteur de langue tablette landscape */
    .lang-selector {
        font-size: 22px;
    }
    
    .lang-separator {
        margin: 0 4px;
    }
    
    /* Bouton Smash responsive tablette */
    .smash-button {
        white-space: normal;
    }

    
    /* Nouveaux styles pour section 1 */
    #section1 {
        position: relative;
        overflow: hidden;
        background-size: cover;
        background-position: center;
    }
    
    #section1 .section1-content {
        flex-direction: column;
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 2;
    }
    
    #section1 .section1-image {
        display: none; /* Masquer l'image originale */
    }
    
    #section1 .text-container {
        position: absolute;
        bottom: auto;
        top: 55vh; /* Descendu encore plus bas */
        left: 40px;
        z-index: 3;
        margin: 0;
        padding: 0;
        text-align: left;
        align-items: flex-start;
        width: 90%;
    }
    
    #section1 .section1-text {
        font-size: 120px;
        margin-top: 0;
        text-align: left;
        line-height: 0.8;
        margin-bottom: 10px;
    }
    
    .section1-subtitle {
        font-size: 24px; /* Taille réduite */
        text-align: left;
        align-self: flex-start;
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.2;
    }
    
    .section1-credit {
        font-size: 22px; /* Taille réduite */
        text-align: left;
        align-self: flex-start;
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.2;
    }
    
    .section1-url {
        position: absolute;
        bottom: auto;
        right: -95px;
        top: 45vh; /* Environ 45% de la hauteur de la fenêtre */
        transform: rotate(-90deg);
        transform-origin: top center;
        font-size: 20px;
        text-align: center;
        width: auto;
        white-space: nowrap;
    }
    
    /* Assurer qu'il n'y a pas de débordement horizontal */
    html, body, .container, .fullscreen-section {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Styles pour Section 2 */
    .section2-title {
        font-size: 62px;
        text-align: left;
        width: 90%;
        margin: 0 0 30px 0; /* Espace augmenté sous le titre */
        position: absolute;
        top: 15vh; /* Ajusté pour plus d'espace en haut */
        left: 5%;
        right: 5%;
    }
    
    .section2-description-block {
        position: absolute;
        bottom: auto;
        top: 40vh; /* Descendu pour espace avec titre */
        left: 5%;
        right: 5%;
        max-width: none;
        width: 90%;
        text-align: left;
    }
    
    .section2-description {
        font-size: 17px;
        text-align: left;
        margin-bottom: 10px; /* Réduit l'espacement */
    }
    
    .section2-motto {
        font-size: 17px;
        text-align: left;
    }
    
    .section2-signature {
        font-size: 46px;
        bottom: 12vh; /* Remontée légèrement */
        top: auto;
        left: 5%;
        right: auto;
        width: auto;
        text-align: left;
        position: absolute;
    }

    /* Styles pour Section 3 */
    #section3 {
        padding: 15px; /* Padding vertical réduit */
        justify-content: space-around;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .section3-title {
        font-family: 'Bebas Neue', sans-serif;
        font-weight: bold;
        letter-spacing: 0.04em;
        font-size: 90px; /* Taille réduite */
        text-align: center;
        position: relative;
        top: -25vh;
        left: auto;
    }
    
    .services-grid {
       
        display: flex;
        flex-direction: column;
        gap: 40px; /* Réduit l'espace entre les colonnes (groupes) */
        align-items: center;
        width: 100%;
        margin-top: -70vh;
    }
    
    .services-column {
        gap: 2px; /* Espace entre capsules dans une colonne réduit */
        width: 80%;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .service-capsule {
        width: 90%;
        padding: 10px 15px; /* Padding réduit */
        font-size: 1rem; /* Taille de police réduite */
        border: 1.5px solid white; /* Bordure plus fine */
        border-radius: 22px; /* Rayon réduit */
        text-align: center;
        font-family: 'Poppins', sans-serif;
        color: white;
        background-color: transparent;
    }
    
    .connector {
        height: 15px; /* Hauteur réduite */
        width: 1.5px; /* Épaisseur plus fine */
        background-color: white;
        margin: 0px auto; /* Marge verticale réduite */
    }
    /* Masquer le dernier connecteur de chaque colonne */
    .services-column .service-capsule:last-of-type + .connector {
        display: none;
    }
    /* Masquer tous les connecteurs si une seule capsule dans la colonne */
    .services-column .service-capsule:only-child + .connector {
        display: none;
    }
     /* Ajustement spécifique pour la dernière colonne qui n'a pas de connecteur après */
    .services-grid > .services-column:last-child > .service-capsule:last-of-type + .connector {
        display:none;
    }
    


    /* Styles pour Section 4 */
    #section4 {
        align-items: flex-start; /* Modifié pour alignement à gauche */
        justify-content: flex-start; 
        padding-top: 20vh; /* Augmenté (était 12vh) */
    }

    .section4-title {
        font-size: 125px;     /* Taille adaptée tablette paysage */
        display: flex; /* Modifié pour centrage robuste */
        justify-content: flex-end; /* Modifié pour centrage robuste */
        align-items: center; /* Ajouté pour centrage robuste */
        width: 100%;         
        position: static;    
        transform: none;     
        line-height: 1.2;
        margin-top: 0;       
        margin-bottom: 10px; /* Réduit pour moins d'espace */
    }

    .section4-subtitle {
        font-size: 19px;
        text-align: right; /* Modifié pour alignement à droite */
        width: 100%;
        position: static;
        transform: none;
        margin-top: 0;
        margin-bottom: 18px; /* Réduit pour moins d'espace */
    }

    .references-images {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 22px;
        width: 100%;
        transform: none;
        padding-left: 0;
        margin-top: 0;
        padding-bottom: 12px;
    }

    .reference-item {
        flex: 0 0 130px; 
        text-align: center;
    }
    
    .reference-item img {
        border-width: 1px;
    }

    .reference-caption {
        font-size: 14px;
        margin-top: 10px;
    }

    .trust-block {
        position: static;
        width: 90%; /* Augmenté */
        max-width: none;
        text-align: left; /* Modifié */
        margin: 40px 0 25px 0; /* Modifié pour alignement à gauche */
        right: auto;
        bottom: auto;
    }

    .trust-block h3 {
        font-size: 20px; /* Augmenté */
        font-weight: bold; /* Ajouté */
        text-align: left; /* Assuré */
        margin-bottom: 10px; /* Ajusté */
    }

    .trust-block p {
        font-size: 16px; /* Augmenté */
        text-align: left; /* Assuré */
        line-height: 1.5;
        margin: 0;
    }

    /* Styles pour Section 5 (Tablet Landscape) */
    #section5 {
        justify-content: center; /* Modifié pour centrage vertical */
        align-items: stretch;
        padding: 15vh 6vw;
        margin-bottom: 1vh;
    }

    .section5-title {
        position: static;
        font-size: 62px; /* Augmenté */
        text-align: left; /* Modifié pour alignement à gauche */
        line-height: 1.2;
        margin: 0 0 45px 0;
        width: 100%;
    }

    .prep-content {
        position: static;
        width: 100%;
        padding-left: 0;
        max-width: none;
    }

    .prep-items {
        gap: 32px;
    }

    .prep-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .prep-item-label {
        width: auto;
        font-size: 22px;
        white-space: normal;
        text-align: left; /* Assurer alignement à gauche */
    }

    .prep-item-value {
        font-size: 18px;
        margin-left: 0;
        width: 100%;
        text-align: left; /* Assurer alignement à gauche */
    }

    .prep-item-format .prep-item-value,
    .prep-item-samplerate .prep-item-value,
    .prep-item-headroom .prep-item-value {
        margin-bottom: 0;
        width: 100%;
        margin-left: 0; /* Annuler le décalage desktop spécifique */
    }
    /* Fin des Styles pour Section 5 (Tablet Landscape) */

    /* Styles pour Section 6 (Tablet Landscape) - NOUVEAU */
    #section6 {
        position: relative;
        padding: 15vh 6vw;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .section6-title {
        position: absolute;
        top: 15vh; /* Modifié */
        right: 25px;
        transform: rotate(-90deg); /* Modifié */
        transform-origin: center right;
        font-size: 62px;
        font-weight: bold;
        white-space: nowrap;
        z-index: 10;
        margin: 0;
    }

    .pricing-content {
        position: static;
        transform: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 45px;
        margin-bottom: 45px;
    }

    .pricing-block {
        width: 100%;
    }

    .pricing-title {
        font-size: 26px;
        text-align: left;
        margin-bottom: 16px;
    }

    .pricing-list {
        font-size: 18px;
        text-align: left;
        padding-left: 20px;
    }
    
    .pricing-list li {
        margin-bottom: 8px;
    }

    .options-block .quote-text {
        position: static;
        transform: none;
        white-space: normal;
        margin-top: 10px;
        text-align: left;
        font-size: 18px;
    }

    .discount-block {
        position: static;
        width: 100%;
        text-align: left;
    }

    .discount-title {
        font-size: 26px;
        text-align: left;
        margin-bottom: 16px;
    }

    .discount-list {
        font-size: 18px;
        text-align: left;
        padding-left: 20px;
    }
    /* Fin des Styles pour Section 6 (Tablet Landscape) */

    /* Styles pour Section 7 (Tablet Landscape) - NOUVEAU */
    #section7 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 15vh 6vw; /* Adapté */
        box-sizing: border-box; /* S'assurer que le padding est inclus */
    }

    .section7-title {
        position: static; /* Annuler le positionnement absolu desktop */
        font-size: 90px;  /* Adapté */
        text-align: left;
        line-height: 1.1;
        margin: 0 0 35px 0; /* Adapté */
        width: 100%;
        color: white;
        font-family: 'Bebas Neue', sans-serif;
    }

    .contact-subtitle {
        position: static; /* Annuler le positionnement absolu desktop */
        font-size: 15px; /* Cible */
        text-align: left;
        line-height: 1.4;
        margin: 0;
        width: 100%;
        color: white;
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
    }

    .contact-label {
        font-size: 26px; /* Cible */
        font-weight: bold;
        text-align: left;
        font-family: 'Poppins', sans-serif;
        color: white;
        margin: 8px 0 5px 0; /* Cible */
    }

    .contact-value {
        font-size: 26px;
        text-align: left;
        font-family: 'Poppins', sans-serif;
        color: white;
        margin: 0 0 15px 0; /* Cible */
    }
    /* Fin des Styles pour Section 7 (Tablet Landscape) */

    .year-badge {
        display: none;
    }

    .year-badge,
    .section1-url-desktop {
        display: none;
    }

    /* Styles pour Section 8 (768px-991px) */
    #section8 {
        justify-content: center;
        align-items: center;
        padding: 7vh 6vw;
        box-sizing: border-box;
    }

    .section8-content {
        position: static;
        width: 90%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .section8-text {
        position: static;
        transform: none;
        width: 100%;
        max-width: none;
        order: 1;
    }

         .section8-text p {
         font-size: 15px;
         text-align: left;
         line-height: 1.6;
         color: white;
         margin: 0;
     }

    /* Carrousel pour tablette 768-991px */
    .section8-images {
        order: 2;
        width: 100%;
        margin-top: 35px;
    }

    .section8-carousel-container {
        position: relative;
        width: 100%;
        border-radius: 12px;
        overflow: hidden;
        background: #1a1a1a;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    .section8-carousel {
        position: relative;
        width: 100%;
        height: 350px;
        overflow: hidden;
    }

    .section8-carousel-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
    }

    .section8-carousel-image.active {
        opacity: 1;
    }

    #section6 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    #section6 .section6-title {
        font-size: 90px;
        letter-spacing: 0.02em;
        font-weight: bold;
        margin-top: 10vh;
        margin-right: 3vw;
    }

    #section6 .pricing-content {
        margin-top: 10vh;
    }   

    #section6 .pricing-block {
        width: 100%;
    }   

    #section6 .pricing-block .pricing-title {
        font-size: 30px;
    }       

    #section6 .pricing-list {
        font-size: 20px;
        margin-left: 20px;
    }

    #section6 .pricing-list li {
        margin-bottom: 10px;
    }

    #section6 .quote-text {
        width: 100%;
        font-size: 20px;
        margin-top: -9vh;
        margin-left: 40vh;
    }
    
    #section7 .section7-title {
        font-size: 150px;
        letter-spacing: 0.04em;
        font-weight: bold;
        top: 100px;
    }

    #section7 .contact-details {
       display: flex;
       flex-direction: column;
    }

    #section7 .contact-block {
        margin-left: 0;
        margin-top: 40px;
    }

    #section7 .social-icons {
        margin-top: -2px;
        margin-bottom: 35px;
    }

    #section7 .social-icons a {
        font-size: 30px;
    }
}
/* Desktop (min-width: 992px) and (max-width: 1199px) */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .header-side a,
    .header-side button{
        font-size:  30px;
    }
    .header-side.left {
        margin-left: 70%;
    }
    
    /* Sélecteur de langue desktop */
    .lang-selector {
        font-size: 24px;
    }
    
    .lang-separator {
        margin: 0 5px;
    }
    
    /* Bouton Smash centré au-dessus des coordonnées */
    .smash-button-container {
        position: absolute;
        top: 50%;
        left: 60%;
        transform: translate(-50%, -50%);
        margin-top: 5vh;
    }
    
    #section7 .smash-text {
        font-size: 15px !important;
    }
    

    .section3-title {
        font-size: 120px;
        letter-spacing: 0.04em;
        top: 5px;
        left: 30px;
        position: absolute;
        text-align: left;
    }
    .services-grid {
        margin-top: 250px;
        display: flex; 
        flex-direction: row;
        justify-content: center;
        gap: 30px;
    }
    .services-column {
        display: flex; 
        flex-direction: column; 
        flex: 1;
        gap: 5px;
    }
    .service-capsule {
        width: 210px;
        padding: 20px;
        font-size: 1.2rem;
        border-width: 4px;
        border-style: solid;
        border-color: white;
        text-align: center;     /* AJOUTÉ */
        white-space: nowrap;    /* AJOUTÉ pour une seule ligne */
        border-radius: 40px;    /* AJOUTÉ/MODIFIÉ */
    }
    .connector {
        height: 15px;
        margin: 5px auto;
        width: 2px;             /* AJOUTÉ pour visibilité */
        background-color: white;/* AJOUTÉ pour visibilité */
    }
    #section1 .section1-content {
        display: flex;
        flex-direction: row;
        align-items: flex-start; 
        justify-content: center; /* Rétablis */
        width: 90%;
        margin: 0 auto;
        height: 100%; 
        min-height: 0;
        margin-top: 10vh;
        /* gap: 1.5vw; */ /* SUPPRIMÉ pour test avec margin */
    }
    #section1 .section1-image {
        width: 48%; 
        max-width: 500px; 
        min-width: 220px;
        max-height: 80vh; 
        height: auto;
        margin: 0; /* Cette ligne sera ajustée ou écrasée par margin-top ci-dessous */
        display: block;
        object-fit: cover; 
        object-position: top;
        margin-top: 3vh; /* AJOUTÉ pour descendre l'image */
    }
    #section1 .text-container {
        margin: 0;
        padding: 0;
        width: max-content; 
        min-width: 250px;
        max-width: 2000px; 
        display: flex;
        flex-direction: column;
        justify-content: flex-start; 
        align-items: flex-end;
        position: static;
        margin-top: 3vh; 
        margin-left: 100px; /* AJOUTÉ pour test d'espacement */
    }
    #section1 .section1-text {
        font-size: clamp(110px, 13vw, 370px);
        margin: -0.02em 0 10px 0; /* AJOUT d'une petite marge négative en haut */
        line-height: 0.85;
        text-align: left;
        word-break: break-word;
        letter-spacing: 0.04em; /* RÉTABLI */
        width: max-content; 
        /* padding-right: -0.04em; */ /* SUPPRIMÉ car inefficace */
    }
    .section1-subtitle,
    .section1-credit {
        font-size: clamp(18px, 1.5vw, 26px);
        text-align: right;
        align-self: flex-end;
        margin: 0;
        line-height: 1.5;
        margin-right: 5px; /* Valeur ajustée par l'utilisateur */
    }
    .section1-url {
        display: none;
    }
    .section1-url-desktop {
        display: block;
        font-size: clamp(16px, 1vw, 22px);
        color: #E0E0E4;
        margin-top: 20px;
        text-align: left;
        margin-bottom: 6.3vh;
    }
    #section1 {
        /* padding-top: 8vh; */ /* SUPPRIMÉ pour alignement précis */
        box-sizing: border-box;
    }
    /* #section1 .section1-text, */
    /* #section1 .section1-image { */
        /* margin-top: 10vh; */ /* SUPPRIMÉ car marges gérées individuellement */
    /* } */
    #section1 .text-container {
        max-width: 1200px;
    }
    
    #section1 .text-container {
        /* width: 75%; */ /* REMOVED */
        max-width: 2000px;
    }

    #section2 .section2-title {
        font-size: 50px;
        margin-bottom: 60px;
    }

    #section2 .section2-description {
        font-size: 18px;
        margin-left: 30px;
        line-height: 1.2;
    }

    #section2 .section2-motto {
        font-size: 16px;
        margin-left: 30px;
    }

    #section2 .section2-signature {
        font-size: 40px;
        margin-right: 30px;
    }

    #section4 .section4-title {
        font-size: 130px;
        letter-spacing: 0.04em;
    }

    #section4 .section4-subtitle {
        font-size: 25px;
        letter-spacing: 0.02em;
    }

    #section4 .references-images {
        top: -30px;
        left: 0px;
        gap: 60px;
        
    }

    #section4 .reference-item {
        width: 170px;
        height: 170px;
    }

    #section4 .reference-caption {
        font-size: 12px;
    }

    #section4 .trust-block {
        font-size: 16px;
    }
    
    #section5 .section5-title {
        font-size: 150px;
        letter-spacing: 0.04em;
        font-weight: bold;
        top: 100px;
    }

    #section5 .prep-content {
        margin-top: -60px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
       align-items: flex-start;
    }

    #section5 .prep-items {
        margin-left: -20px;
        gap: 80px;
    }
   
    #section5 .prep-item-format .prep-item-label {
        margin-right: -500px;
        
    }

    #section5 .prep-item-samplerate .prep-item-label {
        margin-right: -60px;
    }

    #section5 .prep-item-headroom .prep-item-label {
        margin-right: -80px;
    }
    #section5 .prep-item {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    #section5 .prep-item-label {
        font-size: 24px;
        display: flex;
        align-items: center;
    }
    
    #section5 .prep-item-value {
        font-size: 18px;
        display: flex;
        justify-content: center;
        width: 100%;
    }

    #section6 .pricing-content {
        margin-top: 5vh;
    }

    #section6 .section6-title {
        font-size: 180px;
        letter-spacing: 0.02em;
        font-weight: bold;
        margin-top: -10vh;
        margin-right: 4vw;
    }

    #section6 .pricing-block {
        width: 100%;
        gap: 10px;
    }

    #section6 .pricing-block .pricing-title {
        font-size: 30px;
    }

    #section6 .pricing-list {
        font-size: 20px;
        margin-left: 20px;
    }

    #section6 .pricing-list li {
        margin-bottom: 10px;
    }

    #section6 .quote-text {
        font-size: 20px;
        margin-left: -100vh;
        align-items: center;
    }

    #section6 .discount-list {
        font-size: 20px;
        margin-bottom: 50px;
        
    }

    #section6 .discount-title {
        font-size: 30px;
        
    }

    #section7 .section7-title {
        font-size: 180px;
        letter-spacing: 0.04em;
        font-weight: bold;
        top: 100px;
    }

    #section7 .contact-details {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 60vh;
        margin-right: -10vw;
    }

    #section7 .contact-block {
        margin-left: 20px;
        margin: 30px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
    }

    #section7 .contact-label {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        width: 100%;
        font-size: 30px;
        text-align: right;
    }

    #section7 .contact-value {
        width: 100%;
        font-size: 30px;
        margin-top: -20px;
        margin-left: 20px;
        text-align: right;
    }

    #section7 .social-icons {
        margin-top: -33px;
        margin-bottom: 35px;
    }

    #section7 .social-icons a {
        font-size: 30px;
    }

    /* Styles pour Section 8 (992px-1199px) */
    #section8 {
        padding-top: 15px;
        padding-left: 0 !important;
        padding-right: 0 !important;
        align-items: stretch !important;
        width: 100% !important;
        height: 100vh !important;
    }
    
    .section8-content {
        width: 100% !important;
        min-height: 70vh;
        height: auto;
        gap: 3%;
        margin: 0 auto !important;
        padding: 20px 0 !important;
    }

    .section8-left {
        flex: none;
        width: 45%;
        height: 480px;
        gap: 30px;
        transform: translateX(3%);
        display: flex;
        flex-direction: column;
    }

    .section8-text p {
        font-family: 'Poppins', sans-serif;
        font-size: 16px;
        line-height: 1.5;
        color: white;
        margin: 0;
        text-align: left;
    }

    .section8-image-left {
        width: 680px;
        flex: 1;
        max-width: 680px;
        margin-left: auto;
        object-fit: cover;
    }

    .section8-right {
        flex: none;
        width: 45%;
        height: 480px;
        transform: translateX(-3%);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #section8 .section8-image-right {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
    }

}
/* Large Desktop (min-width: 1200px) */
@media screen and (min-width: 1200px) {
    .main-header {
        padding: 1% 10%;
    }
    .header-side a,
    .header-side button{
        font-size:  30px;
    }
    .header-side.left {
        margin-left: 70%;
    }
    
    /* Sélecteur de langue large desktop */
    .lang-selector {
        font-size: 26px;
    }
    
    .lang-separator {
        margin: 0 5px;
    }
    
    /* Bouton Smash centré au-dessus des coordonnées */
    .smash-button-container {
        position: absolute;
        top: 45%;
        left: 72%;
        transform: translate(-50%, -50%);
        margin-top: 3vh;
    }
    
    #section7 .smash-text {
        font-size: 16px !important;
    }
    
    #section1 .section1-content {
        display: flex;
        flex-direction: row;
        align-items: flex-start; 
        justify-content: center; /* Rétablis */
        width: 85%;
        margin: 0 auto;
        height: 100%; 
        min-height: 0;
        /* gap: 2.5vw; */ /* SUPPRIMÉ pour test avec margin */
    }
    #section1 .section1-image {
        width: 35%; 
        max-width: 550px; 
        min-width: 250px;
        max-height: 80vh; /* Valeur ajustée par l'utilisateur */
        height: auto;
        margin: 0; /* Cette ligne sera ajustée ou écrasée par margin-top ci-dessous */
        display: block;
        object-fit: cover; 
        object-position: top;
        margin-top: 12vh; /* AJOUTÉ pour descendre l'image */
    }
    #section1 .text-container {
        margin: 0;
        padding: 0;
        width: max-content; 
        min-width: 300px;
        max-width: 2400px; /* Assurer que c'est la valeur finale souhaitée */
        display: flex;
        flex-direction: column;
        justify-content: flex-start; 
        align-items: flex-end;
        position: static;
        margin-top: 12vh; 
        margin-left: 200px; /* AJOUTÉ pour test d'espacement */
    }
    #section1 .section1-text {
        font-size: clamp(150px, 15vw, 460px);
        margin: -0.007em 0 10px 0; /* AJOUT d'une petite marge négative en haut */
        line-height: 0.85;
        text-align: left;
        word-break: break-word;
        letter-spacing: 0.04em; /* RÉTABLI */
        width: max-content; 
        /* padding-right: -0.04em; */ /* SUPPRIMÉ car inefficace */
    }
    .section1-subtitle,
    .section1-credit {
        font-size: clamp(20px, 1.8vw, 32px);
        text-align: right;
        align-self: flex-end;
        margin: 0;
        line-height: 1.5;
        margin-right: 8px; /* Valeur ajustée par l'utilisateur */
    }
    .section1-url {
        display: none;
    }
    .section1-url-desktop {
        display: block;
        font-size: clamp(18px, 1.2vw, 28px);
        color: #E0E0E4;
        margin-top: 20px;
        text-align: left;
    }
    #section1 {
        padding-top: 2vh;
        box-sizing: border-box;
    }
    /* #section1 .section1-text, */
    /* #section1 .section1-image { */
        /* margin-top: 10vh; */ /* SUPPRIMÉ car marges gérées individuellement */
    /* } */
    .section1-url-desktop {
        position: absolute;
        left: auto !important;
        right: 52%; /* MODIFIÉ de 41vw */
        width: auto;
        text-align: left;
        bottom: 0;
        margin: 0;
        display: block;
        font-family: 'TT Interphases Pro', sans-serif;
        font-size: clamp(18px, 1.2vw, 28px);
        color: #E0E0E4;
        z-index: 2;
        margin-bottom: 5.5vh; 
    }
    #section1 {
        max-width: 2000px;
        margin-left: auto;
        margin-right: auto;
    }
    #section1 .section1-content {
        max-width: 2000px;
        margin-left: auto;
        margin-right: auto;
    }
    #section1 .text-container {
        max-width: 2000px;
    }
    
    #section1 .text-container {
        width: 80%;
        max-width: 2400px;
    }

    .year-badge {
        width: 130px; /* Taille du cercle */
        height: 130px; /* Taille du cercle */
        border-radius: 50%; /* Pour le rendre rond */
        background-color: #95bcb1; /* Ou une autre couleur si vous préférez */ /* Couleur similaire au crédit */
        color: #1d1d1d; /* Couleur du texte */
        font-family: 'Bebas Neue', sans-serif;
        font-weight: bold; /* Ou la police de votre choix */
        font-size: 60px; /* Taille du texte à l'intérieur */
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: flex-end; /* Pour l'aligner à droite comme le crédit */
        margin-top: 25px; /* Espace par rapport au crédit au-dessus */
    }

    #section2 .section2-title {
        font-size: 60px;
    }

    #section2 .section2-description {
        width: 105%;
        font-size: 20px;
        margin-left: 30px;
        line-height: 1.2;
    }

    #section2 .section2-motto {
        font-size: 20px;
        margin-left: 30px;
    }

    #section2 .section2-signature {
        margin-right: 30px;
    }

    .section3-title {
        font-size: 235px;
        font-weight: bold;
        left: 30px;
        top: -120px;
        position: absolute;
        text-align: left; /* AJOUTÉ pour assurer l'alignement du texte à gauche */
    }
    .services-grid {
        margin-top: 350px;
        display: flex; /* AJOUTÉ */
        flex-direction: row;
        justify-content: center;
        gap: 40px;
    }
    .services-column {
        flex: 1;
        gap: 20px;
    }
    .service-capsule {
        padding: 20px;
        font-size: 1.3rem;
        border-width: 5px;
        border-radius: 50px;
        border-color: white;
        border-style: solid;
        white-space: nowrap;
        text-align: center;
        width: 300px;
    }
    .connector {
        height: 15px;
        margin: 5px auto;
        width: 2px;             /* AJOUTÉ pour visibilité */
        background-color: white;/* AJOUTÉ pour visibilité */
    }

    #section4 .section4-title {
        font-size: 180px;
        top: 80px;
        letter-spacing: 0.04em;
    }

    #section4 .section4-subtitle {
        letter-spacing: 0.04em;
        margin-top: 40px;
        font-size: 35px;
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
    }

    #section4 .references-images {
        top: -30px;
        left: 0px;
        gap: 120px;
        
    }

    #section4 .references-images img {
        width: 200px;
        height: 200px;
    }

    #section4 .reference-item {
    }

    #section4 .reference-caption {
        font-size: 14px;
        font-family: 'Poppins', sans-serif;
    }

    #section4 .trust-block {
        font-size: 20px;
        font-family: 'Poppins', sans-serif;
    }

    #section5 .section5-title {
        font-size: 180px;
        letter-spacing: 0.04em;
        font-weight: bold;
        top: 100px;
    }

    #section5 .prep-content {
        margin-top: -60px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
       align-items: flex-start;
    }

    #section5 .prep-items {
        margin-left: -50px;
        gap: 80px;
    }
   
    #section5 .prep-item-format .prep-item-label {
        margin-right: -500px;
        
    }

    #section5 .prep-item-samplerate .prep-item-label {
        margin-right: -60px;
    }

    #section5 .prep-item-headroom .prep-item-label {
        margin-right: -80px;
    }
    #section5 .prep-item {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    #section5 .prep-item-label {
        font-size: 34px;
        display: flex;
        align-items: center;
    }
    
    #section5 .prep-item-value {
        font-size: 20px;
        display: flex;
        justify-content: center;
        width: 100%;
    }

    #section6 .pricing-content {
        margin-top: 7vh;
    }

    #section6 .section6-title {
        font-family: 'Bebas Neue', sans-serif;
        font-weight: bold;
        font-size: 190px;
        letter-spacing: 0.02em;
        font-weight: bold;
        margin-top: -17vh;
        margin-right: 5vw;
    }

    #section6 .pricing-block {
        width: 40%;
        margin-bottom: 40px;
    }

    #section6 .pricing-block .pricing-title {
        font-size: 34px;
    }

    #section6 .pricing-list {
        font-size: 21px;
        margin-left: 20px;
    }

    #section6 .discount-list {
        font-size: 21px;
        margin-left: 35px;
    }

    #section6 .discount-title {
        font-size: 34px;
        margin-left: 20px;
    }

    #section6 .quote-text {
        font-size: 21px;
        margin-left: -90px;
    }

    #section7 .section7-title {
        font-size: 235px;
        letter-spacing: 0.04em;
        font-weight: bold;
        top: 100px;
    }

    #section7 .contact-details {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 50vh;
        margin-right: -35vw;
    }

    #section7 .contact-block {
        margin-left: 20px;
        margin: 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
    }

    #section7 .contact-label {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        width: 100%;
        font-size: 34px;
        text-align: right;
    }

    #section7 .contact-value {
        width: 100%;
        font-size: 34px;
        margin-top: -20px;
        margin-left: 20px;
        text-align: right;
    }

    /* Styles pour Section 8 (min-width: 1200px) */
    #section8 {
        padding-top: 18px;
        padding-left: 0 !important;
        padding-right: 0 !important;
        align-items: stretch !important;
        width: 100% !important;
        height: 100vh !important;
    }
    
    .section8-content {
        width: 100% !important;
        min-height: 72vh;
        height: auto;
        gap: 3%;
        margin: 0 auto !important;
        padding: 22px 0 !important;
    }

    .section8-left {
        flex: none;
        width: 45%;
        height: 550px;
        gap: 35px;
        transform: translateX(3%);
        display: flex;
        flex-direction: column;
    }

    .section8-text p {
        font-family: 'Poppins', sans-serif;
        font-size: 17px;
        line-height: 1.5;
        color: white;
        margin: 0;
        text-align: left;
    }

    .section8-image-left {
        width: 780px;
        flex: 1;
        max-width: 780px;
        margin-left: auto;
        object-fit: cover;
    }

    .section8-right {
        flex: none;
        width: 45%;
        height: 550px;
        transform: translateX(-3%);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #section8 .section8-image-right {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
    }
    
}
/* Extra Large Desktop (min-width: 1800px) - NOUVELLE MEDIA QUERY */
@media screen and (min-width: 1800px) {
    
    /* Sélecteur de langue extra large desktop */
    .lang-selector {
        font-size: 28px;
    }
    
    .lang-separator {
        margin: 0 6px;
    }
    
    /* Bouton Smash centré au-dessus des coordonnées */
    .smash-button-container {
        position: absolute;
        top: 50%;
        left: 79%;
        transform: translate(-50%, -50%);
        margin-top: -1vh;
    }
    
    #section7 .smash-text {
        font-size: 22px !important;
    }
    
    #section1 .section1-text {
        font-size: clamp(160px, 12vw, 420px); /* Taille augmentée de manière plus significative */
    }

    #section1 .text-container {
        width: max-content; /* AJOUT: Permet au conteneur de s'adapter à son contenu */
        margin-left: 50px; /* ESPACE RÉDUIT entre image et texte pour très grands écrans */
        margin-top: 12vh;
    }

    .section1-url-desktop {
        position: absolute;
        right: 54%; /* MODIFIÉ de 41vw */
        width: auto;
        text-align: left;
        bottom: 0;
        margin: 0;
        display: block;
        font-family: 'TT Interphases Pro', sans-serif;
        font-size: clamp(18px, 1.2vw, 28px);
        color: #E0E0E4;
        z-index: 2;
        margin-bottom: 5.3vh; 
    }


    .year-badge {
        width: 150px; /* Taille du cercle */
        height: 150px; /* Taille du cercle */
        border-radius: 50%; /* Pour le rendre rond */
        background-color: #95babc; /* Ou une autre couleur si vous préférez */ /* Couleur similaire au crédit */
        color: #1d1d1d; /* Couleur du texte */
        font-family: 'Bebas Neue', sans-serif;
        font-weight: bold; /* Ou la police de votre choix */
        font-size: 60px; /* Taille du texte à l'intérieur */
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: flex-end; /* Pour l'aligner à droite comme le crédit */
        margin-top: 75px; /* Espace par rapport au crédit au-dessus */
        /* Vous pourriez avoir besoin d'ajuster margin-right si l'alignement n'est pas parfait */
        /* Par exemple, si le crédit a une marge spécifique : */
        /* margin-right: 8px; */ 
    }

    #section4 .section4-title {
        font-size: 240px;
        top: -60px;
        letter-spacing: 0.04em;
    }

    #section4 .section4-subtitle {
        letter-spacing: 0.04em;
        margin-top: -90px;
        font-size: 35px;
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
    }

    #section4 .references-images {
        top: -30px;
        left: 0px;
        gap: 120px;
        
    }

    #section4 .references-images img {
        width: 250px;
        height: 250px;
    }

    #section4 .reference-item {
        width: 200px;
        height: 200px;
        margin-left: 50px;
    }

    #section4 .reference-caption {
        font-size: 14px;
        font-family: 'Poppins', sans-serif;
    }

    #section4 .trust-block {
        font-size: 20px;
        font-family: 'Poppins', sans-serif;
    }

    #section5 .section5-title {
        font-size: 225px;
        letter-spacing: 0.04em;
        font-weight: bold;
        top: 100px;
    }

    #section5 .prep-content {
        margin-top: -30px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
    }

    #section7 .contact-details {
        margin-right: -40vw;
    }

    #section7 .contact-block {
        margin: 30px;
    }

    #section7 .social-icons {
        margin-top: -28px;
        margin-bottom: 35px;
    }

    #section7 .social-icons a {
        font-size: 30px;
    }

    /* Styles pour Section 8 (min-width: 1800px) */
    #section8 {
        padding-top: 20px;
        padding-left: 0 !important;
        padding-right: 0 !important;
        align-items: stretch !important;
        width: 100% !important;
        height: 100vh !important;
    }
    
    .section8-content {
        width: 100% !important;
        min-height: 75vh;
        height: auto;
        gap: 3%;
        margin: 0 auto !important;
        padding: 25px 0 !important;
    }

    .section8-left {
        flex: none;
        width: 45%;
        height: 650px;
        gap: 40px;
        transform: translateX(3%);
        display: flex;
        flex-direction: column;
    }

    .section8-text p {
        font-size: 18px;
        line-height: 1.5;
    }

    .section8-image-left {
        width: 920px;
        flex: 1;
        max-width: 920px;
        margin-left: auto;
        object-fit: cover;
    }

    .section8-right {
        flex: none;
        width: 45%;
        height: 650px;
        transform: translateX(-3%);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #section8 .section8-image-right {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
    }
    
}

@media screen and (min-width: 1280px) {

    /* Sélecteur de langue 1280px+ desktop */
    .lang-selector {
        font-size: 27px;
    }
    
    .lang-separator {
        margin: 0 5px;
    }
    
    /* Bouton Smash centré au-dessus des coordonnées */
    .smash-button-container {
        position: absolute;
        top: 45%;
        left: 72%;
        transform: translate(-50%, -50%);
        margin-top: 1vh;
    }
    
    #section7 .smash-text {
        font-size: 18px !important;
    }

    #section1 .section1-text {
        font-size: clamp(160px, 12vw, 420px); /* Taille augmentée de manière plus significative */
    }

    #section1 .text-container {
        width: max-content; /* AJOUT: Permet au conteneur de s'adapter à son contenu */
        margin-left: 50px; /* ESPACE RÉDUIT entre image et texte pour très grands écrans */
        margin-top: 12vh;
    }

    #section1 .section1-url-desktop {
        font-size: clamp(18px, 1.2vw, 28px);
        margin-bottom: 5.3vh;
        margin-right: -12vw;
    }


    #section7 .contact-value {
        margin-top: -20px;
    }
    
    
}

/* Footer minimaliste */
.site-footer {
    position: absolute;
    bottom: 10px;
    left: 20px;
    text-align: left;
    z-index: 10;
}

.site-footer p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.footer-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* Responsive pour mobile */
@media (max-width: 991px) {
    .smash-button-container {
        position: static;
        margin: 20px 0;
        display: flex;
        justify-content: center;
    }
    
    .smash-button {
        background: rgba(255, 255, 255, 0.1);
        padding: 12px 20px;
        border-radius: 8px;
        backdrop-filter: blur(10px);
    }
    
    .smash-icon {
        width: 25px;
        height: 25px;
    }
    
    .smash-text {
        font-size: 16px;
    }
    
    /* Footer mobile plus visible */
    .site-footer {
        position: static;
        margin-top: 20px;
        transform: none;
        left: auto;
        text-align: center;
    }
    
    .site-footer p {
        font-size: 11px;
    }
}