:root {
      --color-roads: rgb(166, 166, 166);
      --color-water: rgb(158, 181, 255);
      --text-color: #222;
    }

    html {
      scroll-padding-top: var(--header-height-min);
    }
    @media screen and (min-width: 769px) {
      html {
        scroll-padding-top: var(--header-height);
      }
    }

    #viewer-section {
      height: calc(100vh - var(--header-height-min));
      display: flex;
      flex-direction: column;
      justify-content: center;
      scroll-margin-top: 0;
    }
    @media screen and (min-width: 769px) {
      #viewer-section {
        height: calc(100vh - var(--header-height));
        scroll-margin-top: 0;
      }
    }
    .main {
      display: flex;
      padding: 1em;
      gap: 2em;
      height: calc(100% - 2em);
    }
    .config-wrapper {
      display: flex;
      flex: 0 0 auto;
      position: relative;
      height: 100%;
    }
    .config-panel {
      flex: 0 0 250px;
      width: 250px;
      background: var(--color-background, #fff);
      padding: 1em;
      border-radius: 8px 0 0 8px;
      border-right: 1px solid var(--color-roads);
      overflow-y: scroll; /* Force toujours l'apparition d'une barre verticale pour scroller le contenu */
      overflow-x: hidden; /* Supprime la barre de défilement horizontale lorsqu'il n'y a pas de dépassement */
      transition: width 0.3s, padding 0.3s;
      z-index: 1;
      height: 100%;
    }
    .config-panel::-webkit-scrollbar {
      width: 12px;
    }
    .config-panel::-webkit-scrollbar-track {
      background: var(--color-background, #fff);
    }
    .config-panel::-webkit-scrollbar-thumb {
      background-color: var(--color-roads);
      border-radius: 6px;
      border: 2px solid var(--color-background, #fff);
    }
    .config-panel::-webkit-scrollbar-button:vertical:start:decrement,
    .config-panel::-webkit-scrollbar-button:vertical:end:increment {
      display: block;
      height: 16px;
      background-size: 10px 10px;
      background-repeat: no-repeat;
      background-position: center;
    }
    .config-panel::-webkit-scrollbar-button:vertical:start:decrement {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpolygon points='0,10 5,2 10,10' fill='%23999999'/%3E%3C/svg%3E");
    }
    .config-panel::-webkit-scrollbar-button:vertical:end:increment {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpolygon points='0,0 5,8 10,0' fill='%23999999'/%3E%3C/svg%3E");
    }
    .config-panel.no-scroll {
      overflow-y: hidden;
    }
    .config-wrapper.collapsed .config-panel {
      width: 0;
      flex: 0 0 0;
      padding: 0;
      border-right: none;
      overflow: hidden;
    }
    .config-wrapper.collapsed .config-panel > * {
      display: none !important;
    }
    .config-panel label {
      font-weight: bold;
      display: block;
      margin-top: 1em;
      position: relative;
      z-index: 1;
    }
    .toggle-config {
      flex: 0 0 auto;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 0 8px 8px 0;
      background: #000;
      color: #fff;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
      align-self: center;
      padding: 0;
      z-index: 2;
    }
    .config-wrapper.collapsed .toggle-config {
      border-radius: 0 8px 8px 0;
    }
    .toggle-config:hover {
      background: #333;
      transform: scale(1.1);
    }
    .viewer {
      flex: 1 1 auto;
      min-width: 0;
      background: var(--color-background, #fff);
      padding: 0;
      box-sizing: border-box;
      border: 1px solid var(--gray-color-300, #D8D8D8);
      border-radius: 8px;
      box-shadow: 0 0 8px rgba(0,0,0,0.05);
      position: relative;
      overflow: hidden;
      display: flex;
      height: 100%;
      min-height: 70vh;
    }
    .viewer-scene {
      flex: 1;
      position: relative;
      height: 100%;
    }
    .config-panel button,
    .config-panel select,
    .config-panel input[type="file"],
    .config-panel input[type="range"],
    .config-panel input[type="text"] {
      margin-top: 0.5em;
      width: 100%;
    }
    .config-panel input[type="range"]::-webkit-slider-thumb {
      background-color: var(--primary-color);
    }
    .config-panel input[type="range"]::-moz-range-thumb {
      background-color: var(--primary-color);
    }
    .config-panel input[type="range"]:focus {
      outline: none;
    }
    .config-panel input[type="range"]:focus::-webkit-slider-thumb,
    .config-panel input[type="range"]:active::-webkit-slider-thumb {
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5); /* Halo noir semi-transparent pour les poignées WebKit */
    }
    .config-panel input[type="range"]:focus::-moz-range-thumb,
    .config-panel input[type="range"]:active::-moz-range-thumb {
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5); /* Halo semi-transparent identique aux poignées WebKit */
    }
    .config-panel .form-check-input { /* Cible toutes les cases à cocher du panneau de configuration */
      accent-color: var(--primary-color); /* Donne la même teinte verte que la carte */
    }
    .config-panel .form-check-input:focus { /* Ajoute un halo lors de la sélection de la case */
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5); /* Applique un halo noir semi-transparent comme pour les menus déroulants */
    }
    .config-panel .form-check-input:checked { /* Assure un fond et une bordure verts après sélection */
      background-color: var(--primary-color); /* Remplit la case cochée en vert foncé */
      border-color: var(--primary-color); /* Harmonise la bordure avec le fond vert */
    }
    .frame-rotate-btn { /* Boutons de rotation du cadre avec hauteur fixe et largeur adaptable */
      flex: 1; /* Permet à chaque bouton de prendre la moitié de l'espace disponible */
      height: 40px; /* Fixe la hauteur du bouton pour rappeler la taille du bouton panier */
    }
    .frame-rotate-btn svg { /* Icônes des boutons de rotation du cadre redimensionnées */
      width: 16px; /* Réduit la largeur de l'icône pour éviter qu'elle ne dépasse du bouton */
      height: 16px; /* Réduit la hauteur de l'icône pour éviter qu'elle ne dépasse du bouton */
    }
    .frame-rotate-btn:disabled { /* Applique le style de transparence des onglets aux boutons de rotation désactivés */
      opacity: 0.5; /* Rend le bouton semi-transparent pour indiquer qu'il est inactif */
      pointer-events: none; /* Désactive toute interaction de la souris quand le bouton est désactivé */
      transition: none; /* Retire les animations de survol sur les boutons désactivés */
      cursor: default; /* Affiche le curseur par défaut pour montrer qu'aucune action n'est possible */
    } /* Fin du style pour boutons de rotation désactivés */
    #sizeDropdownToggle { /* Aligne le texte à gauche et la flèche à droite */
      display: flex; /* Place le texte et la flèche sur une ligne */
      justify-content: space-between; /* Écarte le texte et la flèche aux extrémités */
      align-items: center; /* Centre verticalement le contenu */
      text-align: left; /* Garde le texte aligné à gauche */
    }
    #sizeDropdownToggle::after { /* Supprime la flèche Bootstrap par défaut */
      display: none; /* Cache la pseudo-flèche générée automatiquement */
    }
    #sizeDropdownToggle:focus { /* Ajoute un halo noir semi-transparent au bouton du dropdown lorsqu'il est focus */
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5); /* Réutilise le halo des sliders pour la cohérence */
    }
    #sizeDropdownToggle .dropdown-caret { /* Dessine la nouvelle flèche à droite */
      border-top: .3em solid; /* Crée la pointe de la flèche */
      border-right: .3em solid transparent; /* Rend le côté droit transparent */
      border-left: .3em solid transparent; /* Rend le côté gauche transparent */
      margin-left: .5em; /* Sépare le texte de la flèche */
    }
    #sizeDropdownToggle, /* Style par défaut du bouton de sélection */
    #sizeDropdownToggle:hover, /* Conserve le style lors du survol du bouton */
    #sizeDropdownToggle:focus, /* Conserve le style lorsque le bouton est focus */
    #sizeDropdownToggle:active, /* Conserve le style lors du clic sur le bouton */
    #sizeDropdownToggle.show { /* Conserve le style lorsque le menu est déployé */
      background-color: #fff; /* Maintient un fond blanc constant */
      color: #000; /* Maintient un texte noir constant */
    }
    #sizeDropdown .dropdown-item:hover, /* Cible l'item survolé dans le menu personnalisé */
    #sizeDropdown .dropdown-item:focus, /* Cible l'item ayant le focus dans le menu personnalisé */
    #sizeDropdown .dropdown-item.active { /* Cible l'item correspondant au choix actuel */
      background-color: #000; /* Remplace le bleu par du noir */
      color: #fff; /* Rend le texte blanc pour assurer le contraste */
    }
    #fontDropdownToggle { /* Aligne le texte à gauche et la flèche à droite */
      display: flex; /* Place le texte et la flèche sur une ligne */
      justify-content: space-between; /* Écarte le texte et la flèche aux extrémités */
      align-items: center; /* Centre verticalement le contenu */
      text-align: left; /* Garde le texte aligné à gauche */
    }
    #fontDropdownToggle::after { /* Supprime la flèche Bootstrap par défaut */
      display: none; /* Cache la pseudo-flèche générée automatiquement */
    }
    #fontDropdownToggle:focus { /* Ajoute un halo noir semi-transparent au bouton du dropdown lorsqu'il est focus */
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5); /* Réutilise le halo des sliders pour la cohérence */
    }
    #fontDropdownToggle .dropdown-caret { /* Dessine la nouvelle flèche à droite */
      border-top: .3em solid; /* Crée la pointe de la flèche */
      border-right: .3em solid transparent; /* Rend le côté droit transparent */
      border-left: .3em solid transparent; /* Rend le côté gauche transparent */
      margin-left: .5em; /* Sépare le texte de la flèche */
    }
    #fontDropdownToggle, /* Style par défaut du bouton de sélection */
    #fontDropdownToggle:hover, /* Conserve le style lors du survol du bouton */
    #fontDropdownToggle:focus, /* Conserve le style lorsque le bouton est focus */
    #fontDropdownToggle:active, /* Conserve le style lors du clic sur le bouton */
    #fontDropdownToggle.show { /* Conserve le style lorsque le menu est déployé */
      background-color: #fff; /* Maintient un fond blanc constant */
      color: #000; /* Maintient un texte noir constant */
    }
    #fontDropdown .dropdown-item:hover, /* Cible l'item survolé dans le menu personnalisé */
    #fontDropdown .dropdown-item:focus, /* Cible l'item ayant le focus dans le menu personnalisé */
    #fontDropdown .dropdown-item.active { /* Cible l'item correspondant au choix actuel */
      background-color: #000; /* Remplace le bleu par du noir */
      color: #fff; /* Rend le texte blanc pour assurer le contraste */
    }
    .import-btn {
      font-size: 0.9em;
    }
    .legend-controls {
      margin-top: 1em;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5em;
    }
    .legend-controls button {
      flex: 0 0 auto;
      width: 30px;
      padding: 0.5em;
    }
    .legend-controls input {
      flex: 1 1 auto;
    }
    .fullscreen-btn {
      position: absolute;
      bottom: 10px;
      right: 10px;
      width: 36px;
      height: 36px;
      border: none;
      background: #000;
      color: #fff;
      border-radius: 50%;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 2;
      padding: 0;
    }

    .cart-btn { /* Bouton d'ajout au panier */
      z-index: 2; /* Assure que le bouton reste au-dessus de la scène */
    }

    .viewer-controls {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .viewer-controls > * {
      pointer-events: auto;
    }

    .viewer-controls .price-info { /* Conteneur pour le bouton et l'icône d'information */
      position: absolute; /* Place le bloc dans le coin inférieur gauche du viewer */
      bottom: 10px; /* Espace par rapport au bas du viewer */
      left: 10px; /* Espace par rapport au bord gauche du viewer */
      display: inline-flex; /* Aligne le bouton et l'icône sur une même ligne */
      align-items: center; /* Centre verticalement les éléments */
    }
    .viewer-controls .info-icon { /* Style de l'icône d'information circulaire */
      margin-left: 8px; /* Ajoute un espacement à gauche du bouton */
      width: 20px; /* Définit la largeur du cercle */
      height: 20px; /* Définit la hauteur du cercle */
      border-radius: 50%; /* Rend l'icône parfaitement circulaire */
      background: #fff; /* Donne un fond blanc à l'icône */
      color: #000; /* Définit la couleur du texte de l'icône */
      display: flex; /* Active le modèle flex pour centrer le contenu */
      align-items: center; /* Centre verticalement le texte dans le cercle */
      justify-content: center; /* Centre horizontalement le texte dans le cercle */
      font-weight: bold; /* Rend la lettre plus visible */
      cursor: pointer; /* Indique que l'icône est interactive */
    }
    .viewer-controls .price-tooltip { /* Boîte affichant le détail du prix */
      display: none; /* Cache la boîte par défaut */
      position: absolute; /* Positionne la boîte par rapport au conteneur */
      bottom: 100%; /* Place la boîte au-dessus de l'icône */
      left: 0; /* Aligne la boîte sur la gauche du conteneur */
      background: rgba(0,0,0,0.8); /* Utilise un fond sombre semi-transparent */
      color: #fff; /* Affiche le texte en blanc pour le contraste */
      padding: 4px 8px; /* Ajoute un espacement interne confortable */
      border-radius: 4px; /* Arrondit légèrement les coins */
      white-space: nowrap; /* Empêche les retours à la ligne */
      transform: translateY(-5px); /* Décale légèrement la boîte vers le haut */
      z-index: 10; /* Garantit que la boîte passe au-dessus des autres éléments */
    }
    .viewer-controls .info-icon:hover + .price-tooltip { /* Affiche la boîte lors du survol de l'icône */
      display: block; /* Rend la boîte visible */
    }

    @media screen and (max-width: 768px) and (orientation: portrait) {
      .viewer-controls {
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        padding: 0 10px;
        align-items: flex-start;
        justify-content: space-between;
      }
      /* Replace les contrôles en haut en mode portrait sur mobile */
      .viewer-controls .fullscreen-btn,
      .viewer-controls .price-info {
        position: static; /* Réinsère les éléments dans le flux normal */
        margin-top: 6px; /* Ajoute un espacement supérieur */
      }
      .viewer-controls .toggle-config {
        position: static;
        margin-top: 0;
        align-self: flex-start;
        z-index: 3;
      }
      .config-wrapper.collapsed + .viewer-scene .viewer-controls {
        top: 0;
      }
    }

    @media screen and (orientation: landscape) {
      .viewer-controls .toggle-config {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        margin-top: 0;
        z-index: 3;
      }
    }

    .fullscreen-btn:hover {
      background: #333;
      transform: scale(1.1);
    }

    .loading-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.7);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 3;
    }

    .loading-overlay.visible {
      display: flex;
    }

    .loading-overlay .progress-percent {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2em;
      font-weight: bold;
      color: var(--text-color);
      z-index: 1;
    }

    .sync-popup {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 0.8rem;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      z-index: 4;
    }

    .sync-popup.visible {
      opacity: 1;
    }

    .progress-pie {
      position: relative;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: conic-gradient(var(--color-roads, #a6a6a6) calc(var(--progress, 0) * 1turn), #ddd 0);
    }

    .progress-pie::after {
      content: '';
      position: absolute;
      inset: 12px;
      background: rgba(255, 255, 255, 0.7);
      border-radius: 50%;
    }
    canvas {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      display: block;
      
    }
    .tab-header {
      display: flex;
      border-bottom: 1px solid var(--color-roads);
      background-color: var(--color-background, #fff);
    }
    .tab-button {
      flex: 1;
      padding: 10px 12px;
      background-color: var(--color-background, #fff);
      border: 1px solid var(--color-roads);
      border-bottom: none;
      border-radius: 5px 5px 0 0;
      cursor: pointer;
      text-align: center;
      font-weight: normal;
      color: var(--text-color);
      transition: background-color 0.2s;
    }
    .tab-button:not(.active):hover {
      background-color: #000;
      color: var(--white-color);
    }
    .tab-button.active {
      background-color: var(--primary-color);
      font-weight: bold;
      color: var(--white-color);
      border: 1px solid var(--primary-color);
      border-bottom: 1px solid var(--primary-color); /* hide separation with accent */
      position: relative;
      z-index: 1;
    }
    .tab-button:disabled { /* Bloc de style pour les onglets désactivés */
      opacity: 0.5; /* Rend le bouton semi-transparent pour montrer qu'il est inactif */
      pointer-events: none; /* Empêche la souris de déclencher des interactions ou animations */
      transition: none; /* Retire la transition afin de supprimer l'animation de survol */
      cursor: default; /* Change le curseur pour indiquer l'absence d'action */
    }
    .track-info {
      background: var(--color-background, #fff);
      border: 1px solid var(--color-roads);
      padding: 0.3em;
      border-radius: 4px;
      margin-bottom: 1em;
    }
    .track-info h4 {
      margin: 0 0 0.3em 0;
      font-size: 1rem;
    }
    .track-info .form-group {
      margin-bottom: 0.5em;
    }
    .track-info input[readonly] {
      background: transparent;
      border: none;
      padding-left: 0;
      cursor: default;
      font-weight: bold;
    }

    .text-zone {
      background: var(--color-background, #fff);
      border: 1px solid var(--color-roads);
      border-radius: 4px;
      padding: 1.5em 0.5em 0.5em;
      margin-bottom: 1em;
      position: relative;
    }

    .text-zone .form-control:focus { /* Ajoute un halo noir semi-transparent autour des champs de texte lorsqu'ils sont focus */
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5); /* Reprend la couleur de halo des menus déroulants pour l'uniformité */
      border-color: #ced4da; /* Maintient une bordure grise discrète en supprimant l'accent bleu de Bootstrap */
      outline: none; /* Supprime l'outline par défaut pour ne laisser apparaître que le halo personnalisé */
    }

    .zone-header {
      position: absolute;
      top: -0.8em;
      left: 50%;
      transform: translateX(-50%);
      background: var(--color-background, #fff);
      padding: 0 0.5em;
      font-weight: bold;
      display: flex;
      align-items: center;
      gap: 0.3em;
    }

    .zone-header label {
      display: flex;
      align-items: center;
    }

    .slider-row {
      display: flex;
      align-items: center;
      gap: 0.5em;
    }

    .icon {
      width: 1em;
      height: 1em;
      fill: #000;
      flex: 0 0 auto;
    }

      @media screen and (max-width: 768px) {
        .main {
          flex-direction: column;
          height: auto;
        }
        .viewer {
          flex-direction: column;
          height: auto;
        }
      .viewer-scene {
        width: 100%;
        height: 70vh;
      }
      .config-wrapper {
        flex-direction: column;
        width: 100%;
        height: auto;
      }
      .config-panel {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--color-roads);
        border-radius: 8px 8px 0 0;
        overflow-y: scroll;
      }
      .config-wrapper.collapsed .config-panel {
        height: 0;
        width: 100%;
        padding: 0;
        border-bottom: none;
        overflow: hidden;
      }
      .toggle-config {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 0 0 8px 8px;
        background: #000;
        color: #fff;
        align-self: center;
        padding: 0;
        position: relative;
        z-index: 2;
      }
      .config-wrapper.collapsed .toggle-config {
        border-radius: 0 0 8px 8px;
      }
    }

    @media screen and (max-width: 768px) and (orientation: portrait) {
      #mobile-products {
        padding-bottom: 0;
      }
      #viewer-section {
        height: calc(100svh - var(--header-height-min));
        scroll-margin-top: 0;
      }
      #mobile-products > .container,
      #mobile-products > .container > .row {
        height: 100svh;
      }
      .main {
        padding: 0;
        gap: 0;
        height: 100%;
      }
      .viewer {
        flex-direction: column;
        height: 100%;
      }
      .viewer:not(:fullscreen) {
        margin-right: 1rem;
      }
      .viewer-scene {
        width: 100%;
        flex: none;
        height: 50svh;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .config-wrapper {
        flex: none;
        width: 100%;
        height: 50svh;
        display: flex;
        flex-direction: column;
      }
        .config-panel {
          flex: 1 1 auto;
          width: 100%;
          height: auto;
          max-height: none;
          overflow-y: scroll;
        }
      .config-wrapper.collapsed {
        height: 36px;
      }
      .config-wrapper.collapsed + .viewer-scene {
        height: calc(100% - 36px);
      }
      .toggle-config {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 0 0 8px 8px;
        background: #000;
        color: #fff;
        align-self: flex-start;
        padding: 0;
        z-index: 3;
      }
      .config-wrapper.collapsed .toggle-config {
        border-radius: 0 0 8px 8px;
      }
    }