/** Shopify CDN: Minification failed

Line 2822:18 Unexpected "{"
Line 2822:27 Expected ":"
Line 2830:18 Unexpected "{"
Line 2830:27 Expected ":"
Line 2836:20 Unexpected "{"
Line 2836:29 Expected ":"
Line 2841:20 Unexpected "{"
Line 2841:29 Expected ":"

**/
/* ===============================================
   =     NOUVELLE PALETTE (PLUS CONTRASTÉE)      =
   =============================================== */
:root {
  /* Palette 3DVertical */
  --blue: #73c6e9;
  --white: #ffffff;
  --black: #000000;

  /* Thème (Haut Contraste) */
  --bg: #000000;              /* Fond principal - Noir pur (la "table") */
  --bg-alt: #0D0D0D;          /* Fond de section - Gris très foncé (le "napperon") */
  --bg-soft: #1A1A1A;         /* Fond des cartes - Gris foncé (la "carte" qui flotte) */
  --text: #F5F5F5;            /* Texte principal - Blanc cassé (plus doux) */
  --text-soft: #B0B0B0;       /* Texte secondaire - Gris clair */
  --text-mute: #7D7D7D;       /* Texte "mute" - Gris moyen */
  --border-soft: rgba(255, 255, 255, 0.1); /* Bordure plus subtile */
  
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-pill: 999px;
  --shadow-soft: 0 18px 45px rgba(0,0,0,0.75);
  --shadow-subtle: 0 8px 24px rgba(0,0,0,0.7);
  --max-width: 1120px;
}
/* ============================================= */

.home-3dvertical * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.home-3dvertical {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  position: relative;
  overflow: hidden;
}

.home-3dvertical a {
  color: inherit;
  text-decoration: none;
}

.home-3dvertical .page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* HEADER */
.home-3dvertical header {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
  background: rgba(0,0,0,0.92);
  position: sticky;
  top: 0;
  z-index: 20;
}

.home-3dvertical .nav {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.home-3dvertical .nav-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.home-3dvertical .brand-link {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
}

.home-3dvertical .brand-img {
  height: 32px;
  width: auto;
  display: block;
}

.home-3dvertical .nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13px;
  color: var(--text-soft);
}

.home-3dvertical .nav-links a {
  position: relative;
  padding: 4px 0;
}

.home-3dvertical .nav-links a:hover {
  color: var(--text);
}

.home-3dvertical .nav-links a:hover::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: var(--blue);
}

.home-3dvertical .nav-cta {
  display: flex;
  gap: 10px;
}

.home-3dvertical .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease-out;
  white-space: nowrap;
}

.home-3dvertical .btn--primary {
  background: var(--blue);
  color: var(--black);
  font-weight: 600;
}

.home-3dvertical .btn--primary:hover {
  filter: brightness(1.08);
}

.home-3dvertical .btn--secondary {
  background: transparent;
  border-color: rgba(255,255,255,0.3);
  color: var(--text);
}

.home-3dvertical .btn--secondary:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.home-3dvertical main {
  flex: 1;
  position: relative;
  z-index: 2;
}

.home-3dvertical .section {
  padding: 52px 16px;
  background-color: transparent; /* 👈 seule ligne ajoutée pour éviter le blanc */
}

.home-3dvertical .section--dense {
  padding-top: 32px;
  padding-bottom: 32px;
}

.home-3dvertical .section--alt-bg {
  background-color: var(--bg-alt);
}

.home-3dvertical .section__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* HERO : image de fond + dégradé vertical */
.home-3dvertical #hero {
  padding-top: 40px;
  position: relative;
  background: transparent;
  overflow: hidden;
}

/* Image en arrière-plan */
.home-3dvertical #hero::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -2;
  background-image: var(--hero-bg-image);
  background-size: cover;
  background-position: center;
  filter: brightness(0.95);
}

/* HERO avec image de fond et dégradé haut → image → bas */
.home-3dvertical #hero {
  padding-top: 40px;
  position: relative;
  background: transparent;
  overflow: hidden;

  /* Hero plein écran plus propre */
  min-height: calc(100vh - 80px);
}

/* Image centrale */
.home-3dvertical #hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;

  background-image: var(--hero-bg-image);
  background-size: cover;
  background-position: center;
  filter: brightness(0.95);
}

/* Dégradé vertical noir → image → noir */
.home-3dvertical #hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background: linear-gradient(
    to bottom,

    /* 1. Haut noir très doux */
    rgba(0,0,0,1) 0%,          /* noir total */
    rgba(0,0,0,0.90) 12%,
    rgba(0,0,0,0.75) 22%,

    /* 2. Image révélée progressivement (zone centrale) */
    rgba(0,0,0,0.40) 40%, 
    rgba(0,0,0,0.22) 55%, 
    rgba(0,0,0,0.28) 68%,

    /* 3. Retour vers le noir en douceur */
    rgba(0,0,0,0.55) 82%,
    rgba(0,0,0,0.80) 92%,
    rgba(0,0,0,1) 100%         /* bas noir total */
  );
}

.home-3dvertical .hero {
  background: none;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px 16px 12px;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.6fr);
  gap: 32px;
  align-items: center;
}

.home-3dvertical .hero-meta-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(115, 198, 233, 0.06);
  border: 1px solid var(--blue);
  font-size: 11px;
  color: var(--blue);
  margin-bottom: 10px;
}

.home-3dvertical .hero-copy h1 {
  font-size: clamp(29px, 4vw, 36px);
  line-height: 1.15;
  margin-bottom: 14px;
  letter-spacing: 0.01em;
  color: var(--text);
}

.home-3dvertical .hero-subtitle {
  font-size: 15px;
  color: var(--text-soft);
  max-width: 540px;
  margin-bottom: 20px;
}

.home-3dvertical .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.home-3dvertical .hero-visual {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.home-3dvertical .hero-image-wrapper {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: var(--bg-alt);
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mute);
  font-style: italic;
}

.home-3dvertical .hero-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-3dvertical .hero-panel {
  border-radius: 24px;
  border: 1px solid var(--border-soft);
  background: var(--bg-soft);
  padding: 20px 18px 18px;
  box-shadow: var(--shadow-soft);
}

.home-3dvertical .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.home-3dvertical .panel-title {
  font-size: 13px;
  font-weight: 550;
}

.home-3dvertical .panel-badge {
  font-size: 11px;
  color: var(--blue);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--blue);
  background: rgba(115, 198, 233, 0.06);
}

.home-3dvertical .panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.home-3dvertical .metric-card {
  border-radius: 16px;
  padding: 10px 11px;
  border: 1px solid var(--border-soft);
  background: var(--bg-alt);
  font-size: 11px;
}

.home-3dvertical .metric-label {
  color: var(--text-mute);
  margin-bottom: 4px;
}

.home-3dvertical .metric-value {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--blue);
}

.home-3dvertical .metric-note {
  font-size: 11px;
  color: var(--text-soft);
}

/* SECTIONS / CARTES */
.home-3dvertical .section__header {
  max-width: 640px;
  margin-bottom: 20px;
}

.home-3dvertical .section__header--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.home-3dvertical .section__header h2 {
  font-size: 22px;
  margin-bottom: 6px;
  color: var(--text);
}

.home-3dvertical .section__header p {
  font-size: 14px;
  color: var(--text-soft);
}

.home-3dvertical .cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.home-3dvertical .card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-soft);
  padding: 16px 16px 14px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-subtle);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-3dvertical .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.8);
}

.home-3dvertical .card-image {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mute);
  font-style: italic;
}

.home-3dvertical .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-3dvertical .card h3 {
  font-size: 16px;
  margin-bottom: 6px;
  color: var(--text);
}

.home-3dvertical .card p {
  color: var(--text-soft);
  margin-bottom: 10px;
  flex-grow: 1;
}

.home-3dvertical .card__link {
  font-size: 13px;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}

.home-3dvertical .card__link::after {
  content: "→";
  font-size: 12px;
  transition: transform 0.2s ease;
}

.home-3dvertical .card:hover .card__link::after {
  transform: translateX(4px);
}

.home-3dvertical .section__footer {
  margin-top: 24px;
}

.home-3dvertical .section__footer--center {
  text-align: center;
}

/* CTA FINAL */
.home-3dvertical .section--cta-final .section__inner {
  border-radius: 24px;
  border: 1px solid var(--border-soft);
  padding: 24px;
  background: var(--bg-soft);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.home-3dvertical .section--cta-final h2 {
  font-size: 20px;
  margin-bottom: 6px;
  color: var(--text);
}

.home-3dvertical .section--cta-final p {
  font-size: 14px;
  color: var(--text-soft);
  margin-bottom: 14px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.home-3dvertical .cta-final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* FOOTER */
.home-3dvertical footer {
  border-top: 1px solid var(--border-soft);
  background: #000;
  padding: 14px 16px 18px;
  font-size: 12px;
  color: var(--text-mute);
}

.home-3dvertical .footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* RESPONSIVE */
@media (max-width: 960px) {
  .home-3dvertical .nav-links {
    display: none;
  }
  .home-3dvertical .hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-3dvertical .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .home-3dvertical .cards-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-3dvertical .hero {
    padding-top: 20px;
  }
  .home-3dvertical .nav-cta .btn--secondary {
    display: none;
  }
}

/* Le bloc de contenu du hero occupe (presque) toute la hauteur de l'écran */
.home-3dvertical .hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px 16px 32px;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.6fr);
  gap: 32px;
  align-items: center;

  /* 👇 Hero plein écran (on enlève ~80px pour le header) */
  min-height: calc(90vh - 80px);
}

@media (max-width: 768px) {
  .home-3dvertical #hero::after {
    background: linear-gradient(
      to bottom,

      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.90) 12%,
      rgba(0,0,0,0.65) 25%,

      /* Révélation plus tôt sur mobile */
      rgba(0,0,0,0.20) 40%,
      rgba(0,0,0,0.10) 55%,

      /* Retour noir plus tôt aussi */
      rgba(0,0,0,0.35) 70%,
      rgba(0,0,0,0.60) 85%,
      rgba(0,0,0,1) 100%
    );
  }

  /* Hero moins haut sur mobile */
  .home-3dvertical .hero {
    min-height: calc(100vh - 100px);
    grid-template-columns: 1fr;
  }
}

/* ============================================
   CONTACT 3DVERTICAL — STYLE GLOBAL
   ============================================ */

/* Cartes générales */
#contact .card {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  color: var(--text);
  box-shadow: var(--shadow-subtle);
  border-radius: 22px;
  transform: none;
  transition: none;
}

/* Pas d'effets hover */
#contact .card:hover {
  transform: none;
  box-shadow: var(--shadow-subtle);
}

/* Désactiver animations */
#contact::before,
#contact::after,
#contact *::before,
#contact *::after {
  animation: none;
  transition: none;
}

/* Titres, paragraphes et labels */
#contact h2,
#contact h3,
#contact h4,
#contact p,
#contact li,
#contact label {
  color: var(--text);
}

/* Styles des listes */
#contact .list li {
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 6px;
}

/* Champs input */
#contact .input {
  background: #111111;
  color: var(--text);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 10px 12px;
}

#contact .input::placeholder {
  color: #d0d0d0;
}

/* Boutons */
#contact .btn.btn--primary {
  background: var(--blue);
  color: var(--black);
  font-weight: 600;
}

#contact .btn.btn--primary:hover {
  filter: brightness(1.08);
}

/* Grille contact : formulaire (2/3) + infos (1/3) */
#contact .section__header {
  max-width: var(--max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 3vw, 32px) !important;
  padding-right: clamp(16px, 3vw, 32px) !important;
}

#contact .container.grid--2 {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px;
  align-items: flex-start;
  max-width: var(--max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 3vw, 32px) !important;
  padding-right: clamp(16px, 3vw, 32px) !important;
}

/* Colonne droite : pile verticale harmonisée */
#contact .details-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Cartes Détails + Sécurité */
#contact .details-card,
#contact .security-card {
  padding: 22px 28px;
  border-radius: 22px;
}

#contact .details-card h4,
#contact .security-card h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 14px;
}

#contact .security-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-soft);
}

/* ============================================
   FORMULAIRE : ESPACEMENT INTERNE
   ============================================ */

#contact .card.p {
  padding: 32px 26px;
}

#contact .card.p h3 {
  margin-bottom: 20px;
}

/* Grilles internes du formulaire */
#contact .grid.grid--2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 16px;
  margin-bottom: 12px;
}

/* Ligne bouton + texte "Joindre un fichier" */
#contact .contact-file-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  margin-bottom: 16px;
}

#contact .contact-file-label {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
}

/* Liste des fichiers */
#contact #selectedFilesList {
  font-size: 13px;
  margin-bottom: 16px;
}

/* Bloc unité des fichiers */
#contact .contact-unit-block {
  margin: 20px 0 16px;
}

#contact .contact-unit-label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 14px;
}

#contact .contact-unit-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
}

#contact .contact-unit-option {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
}

#contact .contact-unit-radio {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
}

/* Sélecteur de technologie */
#contact .contact-tech-block {
  margin: 20px 0 16px;
}

#contact .contact-tech-label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
}

/* version compacte : options en ligne, wrap si besoin */
#contact .contact-tech-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
}

#contact .contact-tech-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
}

#contact .contact-tech-radio {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
}

/* État désactivé pour SLS */
#contact .contact-tech-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#contact .contact-tech-radio-disabled {
  width: 16px;
  height: 16px;
  accent-color: #555;
  cursor: not-allowed;
}

/* Textarea + bouton */
#contact textarea.input {
  margin-top: 6px;
  margin-bottom: 18px;
}

#contact #contactSubmitBtn {
  margin-top: 6px;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* 1 colonne pour le layout principal */
@media (max-width: 900px) {
  #contact .container.grid--2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  #contact .grid.grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  #contact .contact-file-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Marges latérales & padding réduits sur mobile */
@media (max-width: 640px) {
  #contact .section__inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  #contact .card.p {
    padding: 28px 20px;
  }

  #contact .details-stack {
    padding-left: 4px;
    padding-right: 4px;
  }
}



/* Overlay plein écran */
@media (max-width: 1024px) and (orientation: portrait) {
  #contact .section__inner {
    padding-left: clamp(18px, 5vw, 28px);
    padding-right: clamp(18px, 5vw, 28px);
  }

  #contact .card.p,
  #contact .details-card,
  #contact .security-card {
    padding-left: clamp(16px, 4.2vw, 24px);
    padding-right: clamp(16px, 4.2vw, 24px);
  }
}

/* ============================================
   POP-UP DEVIS 3DVERTICAL - ALIGNE SUR CONTACT
   ============================================ */
#quoteModal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}


/* Carte principale = même base qu'un #contact .card.p */
#quoteModal .card {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  color: var(--text);
  box-shadow: var(--shadow-subtle);
  border-radius: 22px;
  transform: none;
  transition: none;
  max-width: 640px;
  width: 100%;
  max-height: calc(100vh - 40px);  /* permet le scroll sur petits écrans */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

#quoteModal .card.p {
  padding: 40px 26px 26px; /* + espace en haut pour ne pas coller le X au titre */
}

/* Titres, paragraphes, labels */
#quoteModal h2,
#quoteModal h3,
#quoteModal h4,
#quoteModal p,
#quoteModal li,
#quoteModal label {
  color: var(--text);
  text-align: left;
}

/* Inputs identiques au contact */
#quoteModal .input {
  background: #111111;
  color: var(--text);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 10px 12px;
}

#quoteModal .input::placeholder {
  color: #d0d0d0;
}

/* Grilles internes (Nom / Courriel, etc.) */
#quoteModal .grid.grid--2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 16px;
  margin-bottom: 12px;
}

/* Ligne bouton + texte "Joindre un fichier" */
#quoteModal .contact-file-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  margin-bottom: 16px;
}

#quoteModal .contact-file-label {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
}

/* Liste des fichiers */
#quoteModal #popupSelectedFilesList {
  font-size: 13px;
  margin-bottom: 16px;
}

/* Bloc unité des fichiers */
#quoteModal .contact-unit-block {
  margin: 20px 0 16px;
}

#quoteModal .contact-unit-label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 14px;
}

#quoteModal .contact-unit-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
}

#quoteModal .contact-unit-option {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
}

#quoteModal .contact-unit-radio {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
}

/* Sélecteur de technologie */
#quoteModal .contact-tech-block {
  margin: 20px 0 16px;
}

#quoteModal .contact-tech-label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
}

#quoteModal .contact-tech-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
}

#quoteModal .contact-tech-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
}

#quoteModal .contact-tech-radio {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
}

/* SLS désactivé */
#quoteModal .contact-tech-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#quoteModal .contact-tech-radio-disabled {
  width: 16px;
  height: 16px;
  accent-color: #555;
  cursor: not-allowed;
}

/* Textarea + bouton, même respiration que contact */
#quoteModal textarea.input {
  margin-top: 6px;
  margin-bottom: 18px;
}

#quoteModal #popupSubmitBtn {
  margin-top: 6px;
}

/* Bouton ENVOYER bleu, aligné à ton theme */
#quoteModal .btn.btn--primary {
  background: var(--blue) !important;
  color: var(--black) !important;
  border: none !important;
  font-weight: 600;
}

#quoteModal .btn.btn--primary:hover {
  filter: brightness(1.08);
}

/* Bouton X de fermeture — visible desktop + mobile */
#quoteModal #closeModal {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background-color: #73C6E9;
  color: #000000;
  font-size: 18px;
  font-weight: bold;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  z-index: 10;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

#quoteModal #closeModal:hover {
  background-color: #5bb9e3;
  transform: scale(1.08);
}

/* ============================================
   POP-UP — RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  #quoteModal .grid.grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  #quoteModal .contact-file-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {

  #quoteModal {
    padding: 0 12px;
    align-items: flex-start;
    justify-content: center;
  }

  #quoteModal .card.p {
    margin-top: 56px;       /* marge sécurisée haut */
    margin-bottom: 80px;    /* marge BASSE augmentée (était 56px) */

    padding: 32px 20px 24px;

    max-height: calc(100vh - 200px); 
    /* ↓ réduit un peu la hauteur max → évite TOUT chevauchement */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #quoteModal #closeModal {
    top: 10px;
    right: 10px;
  }
}

.header-cta-btn{
    display:inline-block;
    padding:0.75em 1.5em;
    border-radius:9999px;
    background-color:#ffffff !important;  /* blanc */
    color:#000000 !important;              /* texte noir */
    font-weight:600;
    text-align:center;
    white-space:nowrap;
    line-height:1;
    border:1px solid #e5e5e5;             /* léger contour gris (optionnel) */
    transition:0.2s ease;
}

/* Effet hover (optionnel, propre & pro) */
.header-cta-btn:hover{
    background-color:#f5f5f5 !important;
    color:#000000 !important;
    border-color:#d0d0d0;
}

/* ============================================
   SECTION DEVIS INSTANTANÉ (#quote)
   ============================================ */

#quote {
  background-color: #000000;
  color: var(--text);
  padding: 40px 16px 60px;
}

#quote .container {
  max-width: var(--max-width);
  margin: 0 auto;
  background: transparent;
}

#quote .card.p {
  background: #111111;                 /* grosse carte de la section */
  border: 1px solid var(--border-soft);
  color: var(--text);
  box-shadow: var(--shadow-soft);
  border-radius: 24px;
  padding: 28px 24px 24px;
}

/* Layout 2 colonnes : formulaire + viewer */
#mainContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 18px;
}

/* Colonne gauche = carte comme le contact */
#stlFormContainer {
  flex: 1 1 320px;
  min-width: 280px;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  box-shadow: var(--shadow-subtle);
  padding: 24px 22px;
}

/* Colonne droite = viewer + jauge, pas de grosse carte */
#stlViewerColumn {
  flex: 1 1 320px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Titres & textes internes */
#quote h2,
#quote h3,
#quote p,
#quote label {
  color: var(--text);
}

#quote h2 {
  font-size: 20px;
  margin-bottom: 8px;
}

#quote h3 {
  font-size: 15px;
  margin-top: 16px;
  margin-bottom: 6px;
}

#quote p {
  font-size: 14px;
  color: var(--text-soft);
}

/* Inputs / selects / file input */
#quote input[type="file"],
#quote input[type="number"],
#quote input[type="text"],
#quote select {
  width: 100%;
  background: #111111;
  color: var(--text);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 9px 11px;
  font-size: 14px;
  margin-bottom: 10px;
}

#quote input::placeholder {
  color: #d0d0d0;
}

/* Radios */
#quote input[type="radio"] {
  accent-color: var(--blue);
}

/* Viewer STL */
#stlViewer {
  width: 100%;
  min-height: 260px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: #050505;
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
}

/* Orientation du plancher */
#quote .orientation-controls label {
  font-size: 13px;
  color: var(--text-soft);
}

#quote .spacer {
  height: 18px;
}

/* ============================================
   BOUTONS – STYLE COMMUN
   ============================================ */

/* Bouton principal type "Calculer le prix" & "Obtenir un devis" */
.popup-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7em 1.6em;
  border-radius: 999px;
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #e5e5e5;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease,
              border-color 0.18s ease,
              transform 0.12s ease;
}

.popup-button:hover {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
  transform: translateY(-1px);
}

/* Boutons secondaires (orientation, etc.) */
.quote-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 1.2em;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  border: 1px solid var(--border-soft);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.18s ease,
              color 0.18s ease,
              border-color 0.18s ease,
              transform 0.12s ease;
}

.quote-button:hover {
  background-color: rgba(115, 198, 233, 0.08);
  color: var(--blue);
  border-color: var(--blue);
  transform: translateY(-1px);
}

/* ============================================
   BANDEAU CONTACT SOUS LE DEVIS
   ============================================ */

.devis-contact-banner {
  width: 100%;
  max-width: 600px;
  margin: 24px auto 0 auto;
  background-color: #050505;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 16px 18px;
  text-align: center;
  box-shadow: var(--shadow-subtle);
}

.devis-contact-banner p {
  font-size: 13px;
  color: var(--text-soft);
  margin-bottom: 10px;
}

/* ============================================
   TABLEAU DEVIS
   ============================================ */

#quoteSection.devis-box {
  margin-top: 28px;
  padding: 18px 16px 16px;
  border-radius: 20px;
  background: #050505;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-subtle);
}

#quoteSection h2 {
  font-size: 18px;
  color: var(--text);
}

.quote-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--text-soft);
}

.quote-table th,
.quote-table td {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 8px 6px;
  text-align: left;
}

.quote-table th {
  color: var(--text);
  font-weight: 600;
  font-size: 12px;
}

.quote-buttons {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ============================================
   JAUGE LIVRAISON – VERSION CLEAN
   ============================================ */

.shipping-gauge {
  margin-top: 14px;
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
}

.shipping-gauge .gauge-head span {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);             /* bleu 3DVertical */
  margin-bottom: 6px;
}

.shipping-gauge .gauge-progress {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  overflow: hidden;
  margin-bottom: 6px;
}

.shipping-gauge .gauge-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), #e4e4e4);
  transition: width 0.25s ease-out;
}

.shipping-gauge .gauge-text {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  font-weight: 400;
}

.shipping-gauge strong {
  color: #ffffff;
  font-weight: 700;
}

/* ============================================
   RESPONSIVE – DEVIS
   ============================================ */

/* iPad & tablettes – centrage du viewer et stack */
@media (max-width: 1024px) {

  #mainContainer {
    flex-direction: column;
    gap: 18px;
  }

  #stlFormContainer,
  #stlViewerColumn {
    flex: 1 1 auto;
    min-width: 100%;
  }

  #stlViewerColumn {
    align-items: center;
  }

  #stlViewer {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
    min-height: 220px;
  }

  .orientation-controls {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/* Téléphones */
@media (max-width: 640px) {

  #quote {
    padding: 20px 8px 32px;
  }

  #quote .card.p {
    padding: 18px 12px 18px;
    border-radius: 18px;
  }

  #stlFormContainer {
    padding: 18px 16px;
    border-radius: 18px;
  }

  #quote input[type="file"],
  #quote input[type="number"],
  #quote input[type="text"],
  #quote select {
    font-size: 13px;
    padding: 8px 10px;
    margin-bottom: 8px;
  }

  #quote h2 {
    font-size: 17px;
  }

  #quote h3 {
    font-size: 13px;
  }

  /* Orientation : grille 2×3 */
  #stlViewerColumn .orientation-controls > div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 10px;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }

  #stlViewerColumn .quote-button {
    width: 100%;
    font-size: 14px;
    padding: 10px 0;
    text-align: center;
  }

  /* Tableau : plus compact */
  .quote-table {
    font-size: 12px;
  }

  .quote-table th {
    font-size: 11px;
  }

  #quoteSection.devis-box {
    padding: 14px 10px 12px;
    border-radius: 16px;
  }

  .quote-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .quote-buttons .quote-button {
    width: 100%;
    justify-content: center;
  }

  .devis-contact-banner {
    margin-top: 18px;
    padding: 12px 10px;
    border-radius: 14px;
  }

  .devis-contact-banner p {
    font-size: 12px;
  }
}

/* Ultra petit (< 400px) */
@media (max-width: 400px) {
  #quote .card.p {
    padding: 16px 10px 16px;
  }

  #quote h2 {
    font-size: 16px;
  }

  .orientation-controls .quote-button {
    flex: 1 1 100%;
  }

  #stlViewer {
    min-height: 200px;
  }
}

/* ============================================
   Centrage du logo du devis sur MOBILE
   ============================================ */
@media (max-width: 640px) {
  #quote #uploadForm > div[style*="text-align"] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
  }

  #quote #uploadForm > div[style*="text-align"] a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }

  #quote #uploadForm > div[style*="text-align"] img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 250px;
  }
}

/* ============================================
   🔧 FIX URGENT – Formulaire redevenu blanc
   ============================================ */

/* La carte du formulaire doit être dark */
#stlFormContainer {
  background: var(--bg-soft) !important;        /* gris foncé */
  border: 1px solid var(--border-soft) !important;
  color: var(--text) !important;
  border-radius: 22px !important;
  box-shadow: var(--shadow-subtle) !important;
  padding: 24px 22px !important;
}

/* Le formulaire interne ne doit PAS redéfinir du blanc */
#stlFormContainer * {
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--border-soft) !important;
}

/* Le input file qui a une barre blanche */
#stlFormContainer input[type="file"] {
  background: #111111 !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}

#stlFormContainer input[type="file"]::file-selector-button {
  background: #000 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.25);
}

/* Empêcher le thème Shopify de remettre du blanc */
#mainContainer,
#stlFormContainer,
#stlViewerColumn {
  background: transparent !important;
}

/* ============================================
   🌟 Unification : Devis = style du Contact
   ============================================ */

/* La carte du formulaire */
#stlFormContainer {
  background: var(--bg-soft) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 22px !important;
  box-shadow: var(--shadow-subtle) !important;
  padding: 32px 26px !important;  /* identique contact .card.p */
  color: var(--text) !important;
}

/* Titres */
#stlFormContainer h2 {
  font-size: 22px !important;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
}

#stlFormContainer h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 18px 0 8px;
}

/* Paragraphes */
#stlFormContainer p,
#stlFormContainer label {
  color: var(--text-soft) !important;
  font-size: 14px;
}

/* Inputs */
#stlFormContainer input[type="file"],
#stlFormContainer input[type="number"],
#stlFormContainer input[type="text"],
#stlFormContainer select {
  width: 100%;
  background: #111111 !important;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--text) !important;
}

/* Placeholder */
#stlFormContainer input::placeholder {
  color: #d0d0d0 !important;
}

/* Radios → accent bleu */
#stlFormContainer input[type="radio"] {
  accent-color: var(--blue) !important;
}

/* Section viewer (à droite) : carte contact-style */
#stlViewerColumn {
  background: var(--bg-soft) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 22px !important;
  box-shadow: var(--shadow-subtle) !important;
  padding: 26px 24px !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Viewer interne */
#stlViewer {
  background: #050505 !important;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-subtle);
}

/* Bouton principal */
#stlFormContainer .popup-button {
  width: 100%;
  margin-top: 10px;
}

/* ============================================
   🔵 Bouton bleu pour "Calculer le Prix"
   ============================================ */

#stlFormContainer .popup-button {
  background: var(--blue) !important;     /* bleu 3DVertical */
  color: #ffffff !important;
  border: none !important;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 18px;
  border-radius: 999px;
  transition: filter 0.18s ease;
  width: 100%;  /* plein largeur comme contact */
}

#stlFormContainer .popup-button:hover {
  filter: brightness(1.08);
}

/* ============================================
   ✨ Fix des labels et du ":" qui se balade
   ============================================ */

/* Retirer les ":" forcés par le thème */
#stlFormContainer label::after {
  content: "" !important;
}

/* Labels plus propres (comme contact) */
#stlFormContainer label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-soft) !important;
  margin-bottom: 6px !important;
  display: block;
}

/* ============================================
   ✨ Titre secondaire (sous le logo)
   ============================================ */

#stlFormContainer p {
  font-size: 14px !important;
  color: var(--text-soft) !important;
  margin: 6px 0 14px !important;
  line-height: 1.45;
  text-align: left !important;
}

/* ============================================
   ✨ Ajustement global du spacing
   ============================================ */

#stlFormContainer h2 {
  margin-bottom: 12px !important;
}

#stlFormContainer {
  line-height: 1.4;
}

/* ============================================
   🧩 Harmonisation des labels (Fichier STL, Technologie, etc.)
   ============================================ */

#stlFormContainer label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin-bottom: 6px !important;
  display: block;
}

/* Suppression des ":" */
#stlFormContainer label::after {
  content: "" !important;
}

/* ============================================
   🧲 Radios Technologie en ligne (horizontal)
   ============================================ */

#stlFormContainer .tech-options,
#stlFormContainer .technology-options {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 24px !important;
  margin-bottom: 12px;
}

/* Chaque option radio */
#stlFormContainer .tech-option,
#stlFormContainer .technology-option {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#stlFormContainer input[type="radio"] {
  accent-color: var(--blue);
  width: 18px;
  height: 18px;
}

/* ============================================
   🧭 Forcer la technologie en horizontal même sans classes
   ============================================ */

#stlFormContainer h3 + label,
#stlFormContainer h3 + label + label,
#stlFormContainer h3 + label + label + label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-right: 24px !important;
  margin-bottom: 10px !important;
}

/* ============================================
   🔵 INPUT FILE BEAUTIFIÉ (style Contact)
   ============================================ */

/* Container du bouton + texte */
.file-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap; /* Empêche le retour à la ligne */
}

/* Bouton blanc style pill (comme tu veux) */
.file-btn {
  display: inline-flex;
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #e5e5e5;
  padding: 0.7em 1.6em;
  border-radius: 999px;        /* même forme que tes autres boutons */
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;         /* Empêche le texte interne de casser */
  text-decoration: none;
  transition: background-color 0.18s ease,
              border-color 0.18s ease,
              transform 0.12s ease;
}

/* Hover */
.file-btn:hover {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
  transform: translateY(-1px);
}

/* Texte du fichier sélectionné */
.file-name {
  color: #ffffff;
  font-size: 16px;
  max-width: 350px;            /* Ajuste si tu veux plus large */
  white-space: nowrap;         /* pas de retour à la ligne */
  overflow: hidden;
  text-overflow: ellipsis;     /* ... si le texte est trop long */
  display: inline-block;
}


.file-button {
  display: inline-block;
  background: #ffffff;
  color: #000000;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 30px;
  cursor: pointer;
  border: 1px solid #ffffff;
  transition: 0.2s ease-in-out;
  font-size: 17px;
  line-height: 1;
}

.file-button:hover {
  filter: brightness(0.9);
}

#fileInput {
  display: none; /* Cache l'input réel */
}

/* ============================================
   ✅ Patch bouton "Choisir un fichier STL"
   - Blanc, texte noir
   - Forme pill qui NE CHANGE PAS
   ============================================ */

#stlFormContainer .file-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;           /* empêche le wrap du bouton */
}

#stlFormContainer .file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff !important;  /* reprend le blanc malgré le * !important */
  color: #000000 !important;             /* texte noir */
  border: 1px solid #e5e5e5 !important;
  padding: 0.7em 1.6em;
  border-radius: 999px;                  /* pill fixe */
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;                   /* le texte ne casse pas -> forme stable */
  text-decoration: none;
  transition: background-color 0.18s ease,
              border-color 0.18s ease,
              transform 0.12s ease;
}

#stlFormContainer .file-btn:hover {
  background-color: #f5f5f5 !important;
  border-color: #d0d0d0 !important;
  transform: translateY(-1px);
}

#stlFormContainer .file-btn:focus,
#stlFormContainer .file-btn:active {
  outline: none;
  transform: translateY(0);  /* évite que la forme bouge au clic */
}

/* texte à droite du bouton */
#stlFormContainer .file-name {
  color: #ffffff;
  font-size: 16px;
  max-width: 350px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================
   PATCH – Jauge livraison dans le thème dark
   ============================================ */

/* Carte de la jauge (peu importe le wrapper) */
#quote .shipping-gauge,
#quote .shipping-gauge-card,
#quote .shipping-gauge-wrapper {
  background: #050505 !important;
  border-radius: 18px !important;
  border: 1px solid var(--border-soft) !important;
  box-shadow: var(--shadow-subtle) !important;
  padding: 16px 18px !important;
  color: var(--text) !important;
}

/* Titre "Livraison gratuite" */
#quote .shipping-gauge .gauge-head span {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue) !important;
}

/* Texte sous la barre */
#quote .shipping-gauge .gauge-text,
#quote .shipping-gauge p {
  font-size: 13px;
  color: var(--text-soft) !important;
}

/* Barre de progression */
#quote .shipping-gauge .gauge-progress {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  overflow: hidden;
  margin: 8px 0 6px;
}

#quote .shipping-gauge .gauge-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), #e4e4e4);
  transition: width 0.25s ease-out;
}

/* ============================================
   PATCH – Retirer la carte autour du viewer
   ============================================ */

/* On supprime la carte foncée du viewer */
#stlViewerColumn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Le viewer occupe toute la largeur */
#stlViewer {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 18px;
  background: #050505 !important;
}

/* Espacement plus propre sous le viewer */
#stlViewerColumn .orientation-controls {
  margin-top: 16px !important;
}

/* La jauge reste dans une petite carte (style contact) */
.shipping-gauge {
  margin-top: 20px !important;
}

/* ============================================
   PATCH MOBILE – Centrage parfait du viewer
   ============================================ */
@media (max-width: 640px) {

  /* On force la colonne viewer à être centrée */
  #stlViewerColumn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 0 8px !important; /* petit padding pour respirer */
  }

  /* Le viewer doit être centré et occuper toute la largeur */
  #stlViewer {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Orientation controls : centrer la grille */
  #stlViewerColumn .orientation-controls {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }

  #stlViewerColumn .orientation-controls > div {
    width: 100% !important;
    max-width: 360px !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
    margin: 0 auto !important;
  }

  /* La jauge doit être centrée aussi */
  .shipping-gauge {
    width: 100% !important;
    max-width: 360px !important;
    margin: 20px auto 0 auto !important;
  }
}

/* ============================================
   FAQ – Style aligné au nouveau home 3DVertical
   ============================================ */

/* Section FAQ en fond sombre, largeur max cohérente */
#faq {
  background: #000000;        /* 🔥 vrai fond noir au lieu de var(--bg-alt) */
  padding: 48px 16px 32px;    /* un peu moins haut / bas pour resserrer */
  color: var(--text);
}

#faq .container {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Titre "Questions fréquentes / FAQ" centré comme les autres sections */
#faq .heading {
  text-align: left;
  margin-bottom: 22px;
}

#faq .heading h2 {
  text-align: left;  
  font-size: 22px;
  margin-bottom: 6px;
  color: var(--text);
}

#faq .heading p {
  font-size: 14px;
  color: var(--text-soft);
}

/* Grille de cartes – même esprit que .cards-grid */
#faq .faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Chaque item FAQ = carte dark comme sur la home */
#faq .faq-item {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-soft);
  padding: 16px 16px 14px;
  box-shadow: var(--shadow-subtle);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#faq .faq-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.8);
}

/* Titres & texte à l’intérieur des cartes */
#faq .faq-item h3 {
  font-size: 16px;
  margin-bottom: 6px;
  color: var(--text);
}

#faq .faq-item p {
  font-size: 14px;
  color: var(--text-soft);
}

/* Bouton "Afficher plus / moins" aligné au style des boutons pill */
#faq .faq-show-more-wrap {
  text-align: center;
  margin-top: 16px;     /* ↓ moins d’espace sous la grille */
}

#faq .faq-show-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6em 1.6em;
  border-radius: 999px;
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #e5e5e5;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease,
              border-color 0.18s ease,
              transform 0.12s ease;
}

#faq .faq-show-more:hover {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
  transform: translateY(-1px);
}

/* Masquer au-delà du 3e uniquement quand .collapsed est présent (JS) */
#faq .faq-grid.collapsed .faq-item:nth-child(n+4) {
  display: none;
}

/* ============================
   Responsive – FAQ
   ============================ */

/* 2 colonnes sur tablette */
@media (max-width: 960px) {
  #faq .faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 1 colonne sur mobile */
@media (max-width: 640px) {
  #faq {
    padding: 40px 12px 28px;  /* un peu plus compact sur mobile */
  }

  #faq .faq-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #faq .faq-item {
    padding: 16px 14px 14px;
  }
}

  /* FORCE LE THÈME SOMBRE SUR LES PAGES POLITIQUES AUTOMATIQUES */
  
  /* Cible les conteneurs de politique Shopify */
  .shopify-policy__container,
  .shopify-policy__body,
  #main-content { 
    background-color: #000000 !important;
    color: #B0B0B0 !important;
  }

  /* Titres */
  .shopify-policy__title h1,
  .shopify-policy__body h1,
  .shopify-policy__body h2,
  .shopify-policy__body h3 {
    color: #ffffff !important;
  }

  /* Liens */
  .shopify-policy__body a {
    color: #73c6e9 !important;
  }

  /* Suppression des fonds blancs éventuels */
  body.template-policy {
    background-color: #000000 !important;
  }



  /* ==========================================
   3DVertical — Page Service (Prototypage)
   ========================================== */

.dv-service {
  background: var(--bg);
  color: var(--text);
}

.dv-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
}

/* HERO */
.dv-hero {
  position: relative;
  overflow: hidden;
  background: transparent;
  padding: 44px 0 28px;
  min-height: calc(90vh - 80px);
}

.dv-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--dv-hero-bg);
  background-size: cover;
  background-position: center;
  filter: brightness(0.95);
}

.dv-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.90) 14%,
    rgba(0,0,0,0.65) 28%,
    rgba(0,0,0,0.25) 52%,
    rgba(0,0,0,0.55) 78%,
    rgba(0,0,0,1) 100%
  );
}

.dv-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.3fr);
  gap: 28px;
  align-items: start;
}

.dv-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(115,198,233,0.06);
  border: 1px solid var(--blue);
  font-size: 11px;
  color: var(--blue);
  margin-bottom: 10px;
}

.dv-hero__title {
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.12;
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}

.dv-hero__subtitle {
  font-size: 15px;
  color: var(--text-soft);
  max-width: 60ch;
  margin-bottom: 18px;
}

.dv-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

/* Buttons (compatibles avec ton style) */
.dv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease-out;
  white-space: nowrap;
}

.dv-btn--primary {
  background: var(--blue);
  color: var(--black);
}

.dv-btn--primary:hover { filter: brightness(1.08); }

.dv-btn--secondary {
  background: transparent;
  border-color: rgba(255,255,255,0.30);
  color: var(--text);
}

.dv-btn--secondary:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.dv-btn--full { width: 100%; }

/* KPI row */
.dv-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 640px;
  margin-top: 6px;
}

.dv-proof__item {
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: rgba(0,0,0,0.35);
  padding: 10px 12px;
}

.dv-proof__kpi {
  font-size: 16px;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 2px;
}

.dv-proof__label {
  font-size: 12px;
  color: var(--text-soft);
}

/* Right panel */
.dv-hero__panel {
  border-radius: 24px;
  border: 1px solid var(--border-soft);
  background: var(--bg-soft);
  box-shadow: var(--shadow-soft);
  padding: 18px 18px 16px;
}

.dv-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.dv-panel__title { font-size: 13px; font-weight: 650; }

.dv-panel__badge {
  font-size: 11px;
  color: var(--blue);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--blue);
  background: rgba(115,198,233,0.06);
}

.dv-checklist {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  color: var(--text-soft);
  font-size: 13px;
}

.dv-checklist li {
  position: relative;
  padding-left: 22px;
}

.dv-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--blue);
  font-weight: 800;
}

.dv-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-mute);
}

/* Sections */
.dv-section { padding: 52px 0; }
.dv-section--alt { background: var(--bg-alt); }

.dv-section__head {
  margin-bottom: 18px;
  max-width: 70ch;
}

.dv-section__head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.dv-section h2 {
  font-size: 22px;
  margin-bottom: 6px;
}

.dv-section p { color: var(--text-soft); }

/* Grid */
.dv-grid { display: grid; gap: 16px; }
.dv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Cards */
.dv-card, .dv-step, .dv-accordion {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-soft);
  box-shadow: var(--shadow-subtle);
}

.dv-card { padding: 16px; }
.dv-card h3 { font-size: 16px; margin-bottom: 6px; }
.dv-card p { margin: 0; }

.dv-card--metric .dv-card__kicker {
  display: inline-block;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--text-soft);
  margin-bottom: 10px;
}

/* Steps */
.dv-step { padding: 16px; position: relative; }
.dv-step__num {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-weight: 800;
  margin-bottom: 10px;
}

/* Inline CTA */
.dv-inline-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* Accordion */
.dv-accordion { padding: 14px 14px 12px; }
.dv-accordion summary {
  cursor: pointer;
  font-weight: 650;
  color: var(--text);
  list-style: none;
}
.dv-accordion summary::-webkit-details-marker { display: none; }
.dv-accordion__body {
  margin-top: 10px;
  color: var(--text-soft);
  font-size: 14px;
}

/* CTA Final */
.dv-cta { padding: 52px 0; }
.dv-cta__inner {
  border-radius: 24px;
  border: 1px solid var(--border-soft);
  background: var(--bg-soft);
  box-shadow: var(--shadow-soft);
  padding: 26px;
  text-align: center;
}
.dv-cta__actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* Responsive */
@media (max-width: 960px) {
  .dv-hero__inner { grid-template-columns: 1fr; }
  .dv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-proof { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .dv-grid--2,
  .dv-grid--3,
  .dv-grid--4 { grid-template-columns: 1fr; }

  .dv-cta__inner { padding: 20px; }
}

/* Zone de lecture derrière le texte */
.home-3dvertical .hero-copy{
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  padding: 18px 18px 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.65);
}

/* Un peu plus “punchy” */
.home-3dvertical .hero-copy h1{
  text-shadow: 0 10px 26px rgba(0,0,0,0.9);
}

.home-3dvertical .hero-subtitle{
  color: rgba(255,255,255,0.82);
  text-shadow: 0 6px 18px rgba(0,0,0,0.85);
}

/* ============================================
   Tech Head — look clean (texte lisible + image cadrée)
   ============================================ */

.home-3dvertical .tech-head{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px); /* image à droite, largeur contrôlée */
  gap: 22px;
  align-items: start;

  /* carte moins "massive" */
  padding: 18px 18px;
  margin: 18px 0 18px;

  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow-subtle);
}

.home-3dvertical .tech-head__left{
  padding: 4px 2px;
}

.home-3dvertical .tech-head__left h2{
  margin: 0 0 10px;
  color: var(--text);
  letter-spacing: .2px;
}

.home-3dvertical .tech-head__left p{
  margin: 0;
  color: var(--text-soft);
  line-height: 1.65;
  max-width: 62ch; /* évite les lignes trop longues */
}

/* Note SLS (facultative) */
.home-3dvertical .tech-head__note{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,.03);
  color: var(--text-soft);
}

/* alternance (si tu gardes tech-head--reverse) */
.home-3dvertical .tech-head--reverse{
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
}
.home-3dvertical .tech-head--reverse .tech-head__left{ order: 2; }
.home-3dvertical .tech-head--reverse .tech-head__right{ order: 1; }

/* ============================================
   Image card
   ============================================ */

.home-3dvertical .tech-figure{
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: rgba(0,0,0,.25);
}

/* image cadrée (pas géante), look "produit" */
.home-3dvertical .tech-figure img{
  display: block;
  width: 100%;
  height: 300px;          /* IMPORTANT : fixe la hauteur pour éviter l’effet géant */
  object-fit: contain;    /* comme tes photos ont fond blanc → mieux que cover */
  background: #fff;       /* fait propre avec les fonds blancs */
  padding: 18px;          /* respire */
}

/* caption plus discrète (pas une grosse barre) */
.home-3dvertical .tech-figure__caption{
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border-soft);
  background: rgba(0,0,0,.22);
}

.home-3dvertical .tech-figure__title{
  font-size: 13px;
  font-weight: 650;
  margin: 0 0 4px;
  color: var(--text);
}

.home-3dvertical .tech-figure__text{
  font-size: 12.5px;
  margin: 0;
  color: var(--text-soft);
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 960px){
  .home-3dvertical .tech-head,
  .home-3dvertical .tech-head--reverse{
    grid-template-columns: 1fr;
  }
  .home-3dvertical .tech-head--reverse .tech-head__left,
  .home-3dvertical .tech-head--reverse .tech-head__right{
    order: initial;
  }
  .home-3dvertical .tech-figure img{
    height: 260px;
  }
}

/* Style du bouton bleu Maquettes */
.btn--blue {
  background-color: #73c6e9 !important;
  border-color: #73c6e9 !important;
  color: #000000 !important; /* Change pour #000000 si illisible */
  margin-right: 15px; /* Petit espace entre les deux boutons si nécessaire */
}

/* Effet au survol (devient légèrement plus foncé) */
.btn--blue:hover {
  background-color: #73c6e9 !important;
  border-color: #73c6e9 !important;
  color: #ffffff !important;
}

/* COMPARAISON — 3 bulles = pleine largeur (sans toucher au style global .card) */
#shopify-section-{{ section.id }} #compare .cards-grid--compare{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
}

/* Si ton .card a un max-width global, ça l’empêche de s’étirer */
#shopify-section-{{ section.id }} #compare .cards-grid--compare > .card{
  max-width: none;
  width: 100%;
}

@media (max-width: 980px){
  #shopify-section-{{ section.id }} #compare .cards-grid--compare{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  #shopify-section-{{ section.id }} #compare .cards-grid--compare{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ✅ TABLEAU DEVIS — VERSION FINALE (NO HOVER + BORDURE FULL)
   À coller à la FIN du CSS
   ========================================================= */

:root{
  --qt-border: rgba(255,255,255,.65);
  --qt-border-soft: rgba(255,255,255,.18);
  --qt-bg: rgba(255,255,255,.02);
  --qt-bg-head: rgba(255,255,255,.06);
  --qt-bg-even: rgba(255,255,255,.015);
}

/* ---------- Section (scroll horizontal si nécessaire) ---------- */
#quoteSection{
  background: #050505 !important;
  border-radius: 20px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 0 !important; /* laisse le wrapper gérer le padding visuel */
}

/* ---------- Wrapper: fait le contour blanc complet + radius ---------- */
#quoteSection .quote-table-wrap{
  border: 1px solid var(--qt-border) !important;
  border-radius: 22px !important;
  overflow: hidden !important;            /* ✅ essentiel pour border-radius */
  background: transparent !important;
}

/* ---------- Table ---------- */
#quoteSection #quoteTable.quote-table{
  width: 100% !important;
  border-collapse: collapse !important;   /* ✅ lignes continues */
  table-layout: fixed !important;         /* ✅ empêche les colonnes de gonfler */
  background: var(--qt-bg) !important;
  color: var(--text-soft) !important;
  border: 0 !important;                   /* le contour est sur le wrapper */
}

/* ---------- Bordures internes: partout, sans trous ---------- */
#quoteSection #quoteTable th,
#quoteSection #quoteTable td{
  border: 1px solid var(--qt-border) !important;
  background-clip: padding-box !important;
  padding: 14px 10px !important;
  vertical-align: middle !important;

  /* ✅ centrage global */
  text-align: center !important;

  /* ✅ anti débordement (table principale) */
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  /* ✅ no hover artifacts */
  transition: none !important;
}

/* ---------- Header ---------- */
#quoteSection #quoteTable thead th{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important;
  color: var(--text) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
  padding: 12px 10px !important;
}

/* ---------- Corps ---------- */
#quoteSection #quoteTable tbody td{
  color: var(--text-soft) !important;
}

/* Zebra (sans hover) */
#quoteSection #quoteTable tbody tr:nth-child(even) td{
  background: var(--qt-bg-even) !important;
}

/* =========================================================
   ✅ NO HOVER / NO FOCUS (aucun effet au curseur)
   (écrase aussi les styles du thème)
   ========================================================= */

/* Tout le tableau: pas de hover (fond/couleur/ombre/filtre) */
#quoteSection #quoteTable tbody tr:hover,
#quoteSection #quoteTable tbody tr:hover > td,
#quoteSection #quoteTable tbody td:hover,
#quoteSection #quoteTable thead th:hover{
  color: inherit !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* Désactive toutes transitions dans le tableau (super agressif) */
#quoteSection #quoteTable,
#quoteSection #quoteTable *{
  transition: none !important;
}

/* Si tu as des "cards" dans des cellules */
#quoteSection #quoteTable .card,
#quoteSection #quoteTable .card:hover{
  background: transparent !important;
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* =========================================================
   ✅ LARGEURS (table-layout:fixed + widths stables)
   ========================================================= */

/* 1) Fichier */
#quoteSection #quoteTable th:nth-child(1),
#quoteSection #quoteTable td:nth-child(1){
  width: clamp(140px, 18%, 200px) !important;
}

/* 2) Quantité */
#quoteSection #quoteTable th:nth-child(2),
#quoteSection #quoteTable td:nth-child(2){
  width: clamp(190px, 22%, 260px) !important;
}

/* 3) Paramètres (peut wrap) */
#quoteSection #quoteTable th:nth-child(3),
#quoteSection #quoteTable td:nth-child(3){
  width: clamp(260px, 36%, 520px) !important;
  white-space: normal !important;
  text-overflow: clip !important;
  line-height: 1.35 !important;
}

/* 4) Prix unitaire (moins large + centré) */
#quoteSection #quoteTable th:nth-child(4),
#quoteSection #quoteTable td:nth-child(4){
  width: clamp(95px, 10%, 120px) !important;
  white-space: nowrap !important;
  text-align: center !important;
  padding-right: 10px !important;
  padding-left: 10px !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--text) !important;
}

/* 5) Paliers */
#quoteSection #quoteTable th:nth-child(5),
#quoteSection #quoteTable td:nth-child(5){
  width: clamp(170px, 18%, 240px) !important;
}

/* 6) Total (moins large + centré) */
#quoteSection #quoteTable th:nth-child(6),
#quoteSection #quoteTable td:nth-child(6){
  width: clamp(95px, 10%, 120px) !important;
  white-space: nowrap !important;
  text-align: center !important;
  padding-right: 10px !important;
  padding-left: 10px !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--text) !important;
}

/* 7) Supprimer (assez large pour ne pas être coupé) */
#quoteSection #quoteTable th:nth-child(7),
#quoteSection #quoteTable td:nth-child(7){
  width: 110px !important;
  white-space: nowrap !important;
}

/* =========================================================
   ✅ Mini anti-hover spécifique PRIX (au cas où le thème cible td:hover)
   ========================================================= */
#quoteSection #quoteTable tbody td:nth-child(4),
#quoteSection #quoteTable tbody td:nth-child(6){
  cursor: default !important;
}
#quoteSection #quoteTable tbody td:nth-child(4):hover,
#quoteSection #quoteTable tbody td:nth-child(6):hover,
#quoteSection #quoteTable tbody tr:hover td:nth-child(4),
#quoteSection #quoteTable tbody tr:hover td:nth-child(6){
  background: inherit !important;
  background-color: inherit !important;
  color: inherit !important;
  box-shadow: none !important;
  filter: none !important;
}

/* =========================================================
   ✅ MINI-TABLE "PALIERS"
   - ne déborde jamais
   - aucun hover
   - "Prix/unité" visible (pas de ... + wrap autorisé)
   ========================================================= */

#quoteSection #quoteTable td:nth-child(5){
  padding: 10px !important;
}

/* Mini-table: wrapper */
#quoteSection #quoteTable td:nth-child(5) table{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  border-collapse: collapse !important;
  table-layout: auto !important;          /* ✅ laisse respirer le header */

  background: rgba(0,0,0,0.35) !important;
  border: 1px solid var(--qt-border-soft) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* On neutralise l'anti-débordement global du grand tableau pour le mini-table */
#quoteSection #quoteTable td:nth-child(5) table th,
#quoteSection #quoteTable td:nth-child(5) table td{
  overflow: visible !important;           /* ✅ pas de coupe */
  text-overflow: clip !important;         /* ✅ pas de ... */
  white-space: normal !important;         /* ✅ wrap possible */
  word-break: break-word !important;

  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  padding: 7px 6px !important;
  font-size: 11px !important;
  text-align: center !important;

  transition: none !important;
  cursor: default !important;
}

/* Header mini-table */
#quoteSection #quoteTable td:nth-child(5) table th{
  background: rgba(255,255,255,0.06) !important;
  color: var(--text) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}

/* Body mini-table */
#quoteSection #quoteTable td:nth-child(5) table td{
  color: var(--text-soft) !important;
}

/* Pas de hover dans le mini-table */
#quoteSection #quoteTable td:nth-child(5) table tr:hover > td,
#quoteSection #quoteTable td:nth-child(5) table td:hover,
#quoteSection #quoteTable td:nth-child(5) table th:hover{
  background: inherit !important;
  background-color: inherit !important;
  color: inherit !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Donne plus d'espace à la 2e colonne (Prix/unité) */
#quoteSection #quoteTable td:nth-child(5) table th:nth-child(1),
#quoteSection #quoteTable td:nth-child(5) table td:nth-child(1){
  width: 38% !important;
}
#quoteSection #quoteTable td:nth-child(5) table th:nth-child(2),
#quoteSection #quoteTable td:nth-child(5) table td:nth-child(2){
  width: 62% !important;
}

/* Si tes paliers sont dans une "card" qui change au hover */
#quoteSection #quoteTable td:nth-child(5) .card:hover,
#quoteSection #quoteTable td:nth-child(5) .tiers-card:hover,
#quoteSection #quoteTable td:nth-child(5) .paliers-card:hover{
  background: inherit !important;
  box-shadow: none !important;
  filter: none !important;
}

/* =========================================================
   ✅ BOUTON SUPPRIMER (visible + pas de hover visuel)
   ========================================================= */

#quoteSection #quoteTable td:nth-child(7){
  overflow: visible !important; /* ✅ évite que le bouton soit coupé */
}

#quoteSection #quoteTable td:nth-child(7) button{
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  color: var(--text) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;

  transform: none !important;
  box-shadow: none !important;
  transition: none !important;
}

/* même look au hover/focus/active */
#quoteSection #quoteTable td:nth-child(7) button:hover,
#quoteSection #quoteTable td:nth-child(7) button:focus,
#quoteSection #quoteTable td:nth-child(7) button:active{
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.20) !important;
  color: var(--text) !important;
  outline: none !important;
  filter: none !important;
}

/* =========================================================
   ✅ RESPONSIVE: si écran étroit, on garde une largeur lisible
   (scroll horizontal via #quoteSection)
   ========================================================= */
@media (max-width: 900px){
  #quoteSection .quote-table-wrap{
    min-width: 860px; /* lisible sans exploser */
  }
}

/* =========================================================
   ✅ PATCH — REMETTRE LA MARGE / “BULLE” AUTOUR DU TABLEAU
   (À coller à la FIN du CSS)
   ========================================================= */

/* 1) Redonne de l’air dans la section (la “bulle” extérieure) */
#quoteSection{
  padding: 18px !important;                 /* ✅ marge intérieure retrouvée */
}

/* 2) Le wrapper garde le contour blanc + radius, avec un fond léger “card” */
#quoteSection .quote-table-wrap{
  background: rgba(255,255,255,0.02) !important;
  border-radius: 22px !important;
  overflow: hidden !important;

  /* ✅ optionnel: léger padding intérieur pour respirer
     (si tu veux que le contour colle EXACT au tableau, mets 0) */
  padding: 0 !important;
}

/* 3) Si tu veux AUSSI une marge entre le titre ("Pièces ajoutées...") et le tableau */
#quoteSection .quote-table-title,
#quoteSection h2,
#quoteSection h3{
  margin-bottom: 14px !important;
}

/* 4) Au cas où tes boutons du bas collaient au bord */
#quoteSection .quote-actions,
#quoteSection .quote-buttons,
#quoteSection .quote-footer{
  margin-top: 18px !important;
}

#quoteSection .card:hover{
  transform: none !important;
  box-shadow: none !important;
}

#quoteSection .popup-button:hover,
#quoteSection .quote-button:hover{
  transform: none !important;
}

/* ============================================
   PDF CLIENT MODAL (#pdfClientForm) — 3DVertical
   Colle à la FIN du CSS
   ============================================ */

/* Overlay */
#pdfClientForm{
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0,0,0,0.60);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: none;                 /* tu le gères déjà via JS */
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

/* Panel (supporte .modal-content ou .card) */
#pdfClientForm .modal-content,
#pdfClientForm .card{
  background: var(--bg-soft) !important;
  border: 1px solid var(--border-soft) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-subtle) !important;
  border-radius: 22px !important;

  width: min(720px, 100%) !important;
  max-height: calc(100vh - 40px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;

  padding: 40px 26px 26px !important;
  position: relative !important;
}

/* ✅ Fix “titres invisibles” (écrase opacité/filters hérités du thème) */
#pdfClientForm h1,
#pdfClientForm h2,
#pdfClientForm h3,
#pdfClientForm p,
#pdfClientForm label,
#pdfClientForm small{
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
  color: inherit !important;
}

#pdfClientForm h2{
  color: var(--text) !important;
  font-size: 20px !important;
  font-weight: 650 !important;
  margin: 0 0 6px !important;
}
#pdfClientForm p{
  color: var(--text-soft) !important;
  font-size: 14px !important;
  margin: 0 0 14px !important;
}

/* Labels */
#pdfClientForm label{
  display: block !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--text) !important;
  margin: 0 0 6px !important;
}
#pdfClientForm label::after{ content:"" !important; }

/* Inputs */
#pdfClientForm input[type="text"],
#pdfClientForm input[type="email"],
#pdfClientForm input[type="tel"],
#pdfClientForm input[type="number"],
#pdfClientForm textarea,
#pdfClientForm select{
  width: 100% !important;
  background: #111111 !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  outline: none !important;
}
#pdfClientForm input::placeholder,
#pdfClientForm textarea::placeholder{
  color: #d0d0d0 !important;
}

/* Grille des champs */
#pdfClientForm .modal-grid{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}
@media (min-width: 720px){
  #pdfClientForm .modal-grid{ grid-template-columns: 1fr 1fr !important; }
  #pdfClientForm .modal-grid .span-2{ grid-column: 1 / -1 !important; }
}

/* Actions (boutons) */
#pdfClientForm .modal-actions{
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  margin-top: 18px !important;
}

/* Boutons “maison” si tu utilises .modal-btn */
#pdfClientForm .modal-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: filter 0.18s ease !important;
  white-space: nowrap !important;
}
#pdfClientForm .btn-primary{
  background: var(--blue) !important;
  color: var(--black) !important;
}
#pdfClientForm .btn-primary:hover{ filter: brightness(1.08) !important; }

#pdfClientForm .btn-secondary{
  background: transparent !important;
  border-color: rgba(255,255,255,0.30) !important;
  color: var(--text) !important;
}
#pdfClientForm .btn-secondary:hover{
  border-color: var(--blue) !important;
  color: var(--blue) !important;
}

/* Si tu utilises plutôt .btn .btn--primary (compat) */
#pdfClientForm .btn.btn--primary{
  background: var(--blue) !important;
  color: var(--black) !important;
  border: none !important;
}
#pdfClientForm .btn.btn--primary:hover{ filter: brightness(1.08) !important; }

/* Bouton X */
#pdfClientForm .modal-close{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  border-radius: 50% !important;
  background: var(--blue) !important;
  color: var(--black) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 32px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.22) !important;
  transition: transform 0.15s ease, filter 0.15s ease !important;
}
#pdfClientForm .modal-close:hover{
  filter: brightness(1.08) !important;
  transform: scale(1.08) !important;
}

/* Mobile */
@media (max-width: 640px){
  #pdfClientForm{ padding: 0 12px !important; align-items: flex-start !important; }
  #pdfClientForm .modal-content,
  #pdfClientForm .card{
    margin-top: 56px !important;
    margin-bottom: 80px !important;
    padding: 32px 20px 24px !important;
    max-height: calc(100vh - 200px) !important;
  }
}


/* =========================================
   FIX: éléments sticky sous le header Shopify
   ========================================= */

/* fallback si JS ne passe pas */
:root{ --dv-header-h: 88px; }

/* si tu as des éléments sticky (ta jauge est sticky dans ton “base CSS”) */
.shipping-gauge{
  top: calc(var(--dv-header-h) + 12px) !important;
}

/* Si un jour tu rends la colonne viewer sticky, ça évite qu’elle passe sous le header */
#stlViewerColumn{
  top: calc(var(--dv-header-h) + 12px) !important;
}

/* Bonus: quand tu navigues vers #quote / #stlViewer, ça ne se cache pas sous le header */
#quote,
#stlViewer{
  scroll-margin-top: calc(var(--dv-header-h) + 16px);
}