/* Pas de police distante : Lato et Montserrat sont servies en local par les
   @font-face de legacy-shell.css, chargée sur toutes les pages du site. */

body {
	margin: 0;
	font-family: 'Lato', sans-serif;
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f7fa;
	color: #3D3D3D;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Montserrat', sans-serif;
	color: #60B339 !important;
}

/* Plus d'air autour du configurateur : il collait aux bords de la fenetre.
   Padding scope a #main (cette feuille n'est chargee que sur /devis-en-ligne),
   box-sizing: border-box venant de site.css, donc pas de debordement. */
#main {
  padding: 14px clamp(14px, 3vw, 36px) 18px;
}

/* === Progression guidée === */
.quote-progress {
  margin: 0 0 12px 0;
}

.progress-text {
  font-size: 13px;
  color: #555;
  margin-bottom: 5px;
  font-weight: 600;
}

#progress-current {
  color: #60B339;
  font-weight: 800;
}

#progress-remaining {
  color: #777;
  font-weight: 400;
  margin-left: 6px;
}

.progress-bar {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress {
  height: 100%;
  border-radius: 999px;
  background: #60B339;
  width: 0%;
  transition: width 0.3s ease;
}

/* contenaires */
/* Le module s'étalait sur TOUTE la largeur de l'écran, contrairement au reste
   du site : sur un grand moniteur, la visionneuse finissait à un mètre du
   menu de gauche. Il reprend maintenant la largeur commune (--container,
   1120 px) et le même retrait latéral que les autres pages. */
/* Largeur PROPRE au module, plus généreuse que le --container du site (1120 px)
   qui étranglait les trois volets : la colonne centrale ne laissait plus la
   place aux curseurs ni au tableau de paliers. 1520 px reprend l'ordre de
   grandeur de l'ancien devis en ligne, tout en gardant une marge sur les très
   grands écrans — le module ne colle plus aux bords. */
.main-container {
	display: flex;
	flex: 1;
	width: calc(100% - 3rem);
	max-width: 1520px;
	margin: 0 auto 2.5rem;
	gap: 1px;
	background: #dee2e6;   /* les 1px de gap font les séparateurs */
	border: 1px solid #dee2e6;
	border-radius: var(--radius, 3px);
	overflow: hidden;
}

/* `min-width: 0` sur chaque volet : un élément flex refuse par défaut de
   descendre sous la largeur de son contenu, et un nom de fichier long ou une
   visionneuse poussaient alors la rangée entière hors du cadre. */
.left-panel {
	flex: 0 0 24%;
	min-width: 0;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	padding: 16px;
}

.central-panel {
	flex: 1;
	min-width: 0;
	padding: 20px;
	overflow-y: auto;
	background: #ffffff;
}

.viewer-panel{
  flex: 0 0 32%;
  min-width: 0;
  background: #ffffff;
  padding: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Le cadre s'allonge avec son contenu ; quand la liste devient trop longue,
   c'est LA LISTE qui prend l'ascenseur, pas le cadre. L'ancien
   `max-height + overflow` posés ici faisaient défiler le bloc entier — titre
   et bouton compris — et l'ascenseur longeait le bord du cadre, qu'il
   semblait casser. */
.file-list {
	min-height: 200px;
	border-bottom: 1px solid #dee2e6;
	background: #f8f9fa;
}

.file-list ul {
	list-style: none;
	margin: 0;
	padding: 10px;
	max-height: 340px;
	overflow-y: auto;
}

.file-list li {
	padding: 4px;
	border-bottom: 1px solid #dee2e6;
	cursor: pointer;
}

.file-list li:hover {
	background: #e2e6ea;
}

/* Viewer STL principal */
.viewer {
  flex: 1;
  border: 1px solid #ced4da;
  border-radius: 8px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  font-weight: bold;
  font-size: 1.2em;
  color: #495057;
  position: relative;
  transition: height 0.3s ease;
  height: auto;
  min-height: 420px;
  overflow: hidden;
}

/* Barre d’en-tête du viewer */
.viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #E5E5E5;
  border-bottom: 1px solid #adb5bd;
}

.viewer-header h3{
  margin: 0;
  font-size: 1.2em;
  font-family: 'Montserrat', sans-serif;
  color: #2C2C2C !important;
}

/* Contenu STL inséré dynamiquement */
#viewer-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#viewer-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #333;
	text-align: center;
	font-size: 1.2em;
	z-index: 10;
	pointer-events: none;
}

/* le style de la dropzone */
#dropzone-overlay {
    display: none;
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    z-index: 9999;
    pointer-events: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

#globalDropzone.custom-dropzone {
    display: flex;
    width: 80%;
    max-width: 600px;
    height: 200px;
    border: 2px dashed white;
    border-radius: 15px;
    background: transparent;
    color: white;
    font-size: 18px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    cursor: pointer;
}

/* gestion des 3 images des methodes */
#images{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 14px 0;
  align-items: center;
  justify-items: center;
}

#images img{
  width: 100%;
  max-width: 140px;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.2s ease;
  border: 2px solid transparent;
}

#images img:hover{
  transform: scale(1.05);
}

#images img.selected{
  border-color: #198754;
}

#images img.method-help-img{
  max-width: 70px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 999px;
  border: 2px solid #60B339;
  padding: 6px;
  background: #fff;
}

/* liens vers les fichiers */
.uploaded-files-list a {
	color: #60B339 !important;
	text-decoration: underline !important;
	font-weight: bold;
}

.uploaded-files-list a:hover {
	color: #3D3D3D !important;
	text-decoration: none !important;
}

/* Puce d'état d'un fichier de la liste. Remplace les caractères « -> » et
   « o », qui ne ressemblaient à rien et que les lecteurs d'écran énonçaient
   tels quels. La taille est identique dans les deux états : la liste ne bouge
   pas quand on change de fichier actif. */
.s3d-file-bullet {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border-radius: 999px;
  border: 2px solid #b9c0b6;
  background: transparent;
  flex-shrink: 0;
}
.s3d-file-bullet.is-active {
  border-color: #2c6fb3;
  background: #2c6fb3;
  box-shadow: 0 0 0 3px rgba(44, 111, 179, .18);
}

/* Corbeille, à la place du « Suppr. » rouge : le rouge sur du texte se lit
   comme un message d'erreur, et l'abréviation ne se traduit pas bien. */
/* Les entrées de la liste sont des lignes flex : la corbeille est poussée à
   droite par `margin-left: auto` et se retrouve donc à la MÊME abscisse pour
   tous les fichiers, quelle que soit la longueur du nom. `flex-shrink: 0`
   l'empêche d'être comprimée par un nom très long. */
.uploaded-files-list li {
  display: flex;
  align-items: center;
  gap: 2px;
}
.uploaded-files-list li > a {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.s3d-file-del {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  padding: 4px;
  border: 1px solid transparent;   /* place réservée : pas de saut au survol */
  border-radius: 4px;
  background: none;
  color: #8a8880;
  cursor: pointer;
}
.s3d-file-del:hover,
.s3d-file-del:focus-visible {
  color: #c0392b;
  border-color: #e4c4c0;
  background: #fdf3f2;
}

/* « Tout supprimer », en fin de liste. Volontairement plus discret que les
   corbeilles de ligne : c'est l'action la plus destructrice de l'écran, elle
   ne doit pas être la plus visible. Elle ne prend sa couleur d'alerte qu'au
   survol, et la bordure est réservée dès le repos pour éviter le saut d'un
   pixel. */
.uploaded-files-list li.files-clear {
  justify-content: flex-end;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #e4e7e2;
}
.s3d-file-clear {
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: #8a8880;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.s3d-file-clear:hover,
.s3d-file-clear:focus-visible {
  color: #c0392b;
  border-color: #e4c4c0;
  background: #fdf3f2;
}

/* gestion de la mise en surbrillance du menu upload */
/* Encadré permanent : l'étape « Ajoutez votre fichier » n'avait de bordure que
   lorsqu'elle était active, et flottait sinon dans le vide. Bordure discrète au
   repos, verte quand c'est au visiteur d'agir — la même bordure change de
   couleur, donc rien ne bouge entre les deux états. */
.upload-step {
  position: relative;
  padding: 14px;
  border: 2px solid #e4e7e2;
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.upload-step-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #2C2C2C;
  margin-bottom: 8px;
}

.upload-step-badge {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #60B339;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px rgba(96, 179, 57, 0.18);
}

.upload-step.active {
  border-color: #60B339;
  box-shadow: 0 4px 14px rgba(96, 179, 57, 0.18);
}

.upload-step.completed .upload-step-title::after {
  content: "✓";
  color: #60B339;
  font-weight: 800;
  margin-left: auto;
}

#menus.no-file-yet .menu {
  opacity: 0.55;
}

#menus.no-file-yet .menu.active {
  background: #E5E5E5;
  border-color: #adb5bd;
  border-width: 1px;
  box-shadow: none;
}

#menus.no-file-yet .menu-content {
  display: none;
}


/* Menus */
.menu {
	margin-bottom: 10px;
	padding: 10px;
	border: 1px solid #adb5bd;
	border-radius: 8px;
	background: #E5E5E5;
	overflow: hidden;
	max-width: 900px;
	transition: all 0.3s ease;
	cursor: pointer;
	position: relative;
}

.model-info {
	background-color: #000000;
	color: #E5E5E5;
	cursor: default;
}

.menu.active {
	max-height: 1500px;
	cursor: default;
	background: #ffffff;
	border-color: #4c8f2f;
	border-width: 2px;
	box-shadow: 0 4px 14px rgba(96, 179, 57, 0.14);
}

.menu.future {
  opacity: 0.78;
}

.menu h3 {
	margin: 0;
	font-size: 1.2em;
	color: #2C2C2C;
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu.model-info h3 {
	color: #FFFFFF;
}

.menu-content {
	margin-top: 10px;
	display: none;
}

.menu.active .menu-content {
	display: block;
	padding-bottom: 12px;
}

.menu img:not(.opt-img):not(.color-preview-img):not(#images img) {
  width: 200px;
  height: 200px;
  margin: 5px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 8px;
  transition: 0.2s;
}

.menu img.selected {
	border-color: #198754;
}

/* === Menus numérotés === */
.step-badge {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #c7cdd3;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex: 0 0 auto;
  transition: all 0.25s ease;
}

.step-title {
  flex: 1;
}

.menu.active .step-badge {
  width: 36px;
  height: 36px;
  background: #60B339;
  color: #ffffff;
  font-size: 16px;
  box-shadow: 0 0 0 4px rgba(96, 179, 57, 0.18);
}

.menu.completed .step-badge {
  background: #60B339;
  opacity: 0.85;
}

.menu.completed h3::after {
  content: "✓";
  color: #60B339;
  font-weight: 800;
  margin-left: auto;
}

/* Aperçu couleur (menu 5) */
.color-image-container{
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.color-preview-img{
  width: clamp(90px, 18vw, 140px);
  height: auto;
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid #dee2e6;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  cursor: zoom-in;
}

#color-image-modal{
  z-index: 99999;
}

#color-image-modal .color-modal-content{
  background: transparent;
  box-shadow: none;
  padding: 0;
  width: auto;
  max-height: none;
  overflow: visible;
}

#color-image-modal-img{
  display: block;
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 16px 50px rgba(0,0,0,0.35);
  background: #fff;
}

/* Formulaires et boutons */
select, input[type=range], input[type=number], textarea {
	width: 100%;
	margin-top: 10px;
	padding: 8px;
	border: 1px solid #ced4da;
	border-radius: 5px;
	background: #ffffff;
}

select[multiple] {
	height: auto;
	min-height: 100px;
	background-color: #f9f9f9;
	border-radius: 8px;
	padding: 10px;
	font-size: 14px;
	border: 1px solid #ccc;
	box-sizing: border-box;
	overflow-y: auto;
}

select[multiple] option {
	padding-left: 25px;
	position: relative;
}

button {
	background-color: #60B339;
	color: white;
	border: none;
	padding: 10px;
	font-weight: bold;
	border-radius: 5px;
	cursor: pointer;
	margin-top: 10px;
}

button:hover {
	background-color: white;
	color: #60B339;
	border: 1px solid #60B339;
}

button.loading {
	opacity: 0.6;
	pointer-events: none;
	cursor: not-allowed;
}

/* Bordure TRANSPARENTE au repos, colorée au survol.
   Avec `border: none` puis `border: 1px` au survol, le bouton gagnait deux
   pixels en largeur ET en hauteur à chaque passage de souris : tout ce qui
   l'entourait sautait. Réserver la place dès le départ supprime le saut sans
   rien changer à l'apparence. */
.stl-btn {
  color: #FFFFFF !important;
  border: 1px solid transparent;
  padding: 10px 16px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  margin-top: 5px;
}

.stl-btn:hover {
	background-color: #FFFFFF !important;
	color: #60B339 !important;
	border-color: #60B339;
}

/* Tableaux et quantité */
table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
}

table, th, td {
	border: 1px solid #ced4da;
}

th, td {
	padding: 8px;
	text-align: center;
}

.price-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
	font-size: 14px;
}

.price-table th, .price-table td {
	border: 1px solid #dee2e6;
	padding: 8px;
	text-align: center;
}

.price-table th {
	background-color: #f1f3f5;
	font-weight: bold;
}

.price-table tbody tr:nth-child(even) {
	background-color: #f8f9fa;
}

.quantity-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 10px;
}

.quantity-controls button {
	width: 40px;
	height: 40px;
	font-size: 20px;
	text-decoration: none !important;
}

.quantity-controls input {
	width: 60px;
	text-align: center;
}

.sym-devis-qty-locked{
  display:inline-block;
  min-width:2.2em;
  text-align:center;
  font-weight:600;
  padding:.35em .55em;
  border:1px solid #ddd;
  border-radius:6px;
  background:#f7f7f7;
}

/* Blocs d'information */
.constraint-info,
.material-info,
.color-info,
.recap-info,
.quantite-info {
	margin-top: 10px;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 14px;
	color: #333;
	min-height: 40px;
}

.constraint-info,
.material-info,
.color-info {
	margin-bottom: 5px;
	background-color: #f8f9fa;
}

.recap-info,
.quantite-info {
	background-color: #f1f3f5;
	margin-bottom: 20px;
}

/* Contraintes */
.contrainte-row {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.contrainte-row select {
	flex: 1;
}

.contrainte-row button {
	margin-left: 10px;
	padding: 5px 10px;
	font-size: 18px;
	font-weight: bold;
	background-color: #60B339;
	color: #FFFFFF !important;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	text-decoration: none;
}

.contrainte-row button:hover {
	background-color: #3b6f99;
}

/* Sliders */
.slider-container {
	margin-top: 5px;
	text-align: left;
}

.slider-label {
	font-weight: bold;
	display: block;
	margin-bottom: 2px;
}

.slider-value {
	font-weight: bold;
	text-align: center;
	margin-top: 2px;
}

/* Options */
.options-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 10px;
}

#options-container.options-list{
  /* Pas d'ascenseur : la liste des options de finitions s'etend a sa hauteur. */
  max-height: none;
  overflow: visible;
}

.options-list label {
	display: flex;
	align-items: center;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	background-color: #f9f9f9;
	cursor: pointer;
	user-select: none;
}

.options-list label.opt-item{
  align-items: flex-start;
  gap: 10px;
}

.options-list label.opt-item input[type="checkbox"]{
  margin-top: 4px;
}

.options-list input[type="checkbox"] {
	margin-right: 10px;
	transform: scale(1.2);
}

.opt-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.opt-title{
  font-weight: 700;
  color: #2C2C2C;
}

.opt-comment{
  font-size: 0.92em;
  color: #555;
  font-weight: 400;
  line-height: 1.25;
}

.opt-img{
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #dee2e6;
  background: #fff;
  flex: 0 0 auto;
}

/* Spinners / chargements */
#upload-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.upload-message {
  text-align: center;
}

.spinner {
  margin: 0 auto 10px;
  width: 40px;
  height: 40px;
  border: 6px solid #fff;
  border-top: 6px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.menu-spinner {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 10px;
	gap: 10px;
}

.menu-spinner .mini-spinner {
	width: 30px;
	height: 30px;
	border: 4px solid #ccc;
	border-top: 4px solid #4682B4;
	border-radius: 50%;
	animation: miniSpin 0.8s linear infinite;
}

.spinner-text {
    font-size: 14px;
    color: #4682B4;
    font-weight: 500;
}

.sym-module-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(2px);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.25s ease-out;
}

.sym-module-loading-overlay.sym-module-loading-hidden {
  opacity: 0;
  pointer-events: none;
}

.sym-module-loading-spinner {
  padding: 1.5rem 2rem;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  font-size: 1.1rem;
  font-weight: 500;
  color: #3D3D3D;
  text-align: center;
}

.sym-module-loading-ring {
  width: 36px;
  height: 36px;
  margin: 0 auto 10px;
  border-radius: 50%;
  border: 3px solid #e0e0e0;
  border-top-color: #60B339;
  animation: symModuleSpin 0.9s linear infinite;
}

.sym-module-loading-text {
  font-size: 0.95rem;
}

.help-loading{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes miniSpin {
	to { transform: rotate(360deg); }
}

@keyframes symModuleSpin {
  to { transform: rotate(360deg); }
}

/* Modales */
.modal.stl-hidden {
  display: none;
}

.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 12px;
}

.modal-content{
  width: min(680px, 92vw);
  background: #fff;
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  max-height: min(90vh, 720px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.modal-content h3 { margin: 0 0 8px 0; }
.modal-sub { margin: 0 0 12px 0; color: #555; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.btn-outline { background:#fff; color:#60B339; border:1px solid #60B339; }

.duplicate-list { list-style: none; margin: 0; padding: 0;}
.duplicate-list li { border:1px solid #ddd; border-radius:8px; padding:10px; margin-bottom:8px; cursor:pointer; }
.duplicate-list li:hover { background:#f8f9fa; }

/* Viewer modal */
#stl-viewer-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
}

#stl-viewer-modal .modal-content {
  width: min(1200px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  padding: 20px;
}

#stl-viewer-modal h2 {
  margin: 0 0 8px 0;
}

#stl-viewer-modal .muted {
  margin-bottom: 10px;
}

#viewer-modal-content {
  width: 100%;
  height: clamp(60vh, 72vh, 82vh);
  min-height: 360px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

#stl-viewer-modal .close[data-close-modal] {
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  color: #333;
  border: none;
  font-size: 26px;
  line-height: 1;
  padding: 0 6px;
  cursor: pointer;
}

/* Bouton ? dans le choix méthode */
.method-help-btn{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 2px solid #60B339;
  background: #fff;
  color: #60B339;
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}

.method-help-btn:hover{
  background: #60B339;
  color: #fff;
}

/* FAQ dans la modale */
.method-help-faq details{
  border: 1px solid #dee2e6;
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 10px;
  background: #f8f9fa;
}

.method-help-faq summary{
  cursor: pointer;
  font-weight: 700;
  color: #2C2C2C;
  list-style: none;
}

.method-help-faq summary::-webkit-details-marker{ display:none; }

.method-help-faq .faq-answer{
  margin-top: 10px;
  color: #333;
  font-weight: 400;
}

.method-help-faq .muted{
  color: #666;
  font-size: 0.95em;
}

/* Responsive */
@media (max-width: 900px){
  #images{
    grid-template-columns: repeat(3, minmax(90px, 1fr));
    gap: 12px;
    padding: 12px 0;
  }

  #images img{
    max-width: 130px;
  }

  .opt-img{
    width: 120px;
    height: 120px;
  }
}

/* Empilement dès 1000 px et non 768 : entre les deux, les trois volets
   tenaient encore côte à côte mais la colonne centrale — celle où l'on
   travaille — se réduisait à une bande inutilisable. */
@media (max-width: 1000px) {
  .main-container {
    flex-direction: column;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    width: auto;
  }

  .left-panel{
    flex: none;
    width: 100%;
    height: auto;
  }

  .central-panel{
    order: 2;
    height: auto;
  }

  .viewer-panel{
    order: 3;
    flex: none;
    width: 100%;
    height: 45vh;
  }

  .viewer{
    min-height: 280px;
  }
}

@media (max-width: 600px){
  #images{
    grid-template-columns: repeat(2, minmax(90px, 1fr));
    gap: 12px;
    padding: 10px 0;
  }

  #images img{
    max-width: 150px;
  }

  #images img.method-help-img{
    max-width: 64px;
  }

  #options-container.options-list{
    max-height: none;
  }

  .options-list input[type="checkbox"]{
    transform: scale(1.05);
    margin-right: 8px;
  }

  .opt-title, .opt-comment{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .opt-img{
    width: 34px;
    height: 34px;
    border-radius: 6px;
  }

  .modal-content{
    max-height: 85vh;
    max-height: 85dvh;
    padding: 14px;
  }

  #stl-viewer-modal .modal-content {
    width: 96vw;
    max-height: 94vh;
    padding: 14px;
    border-radius: 10px;
  }

  #viewer-modal-content {
    height: 65vh;
    min-height: 300px;
  }
}