/* ============================================================
   Profil panneau — delta au-dessus de core.css.
   Ne contient que ce qui est propre au simulateur de panneaux.
   Chargé après le noyau : à sélecteur de spécificité égale, les
   règles ci-dessous l'emportent.
   ============================================================ */

/* Sélecteur de coloris propre à chaque mur : un peu d'air au-dessus pour le
   détacher des champs de dimensions. */
.mdn-calc .mdn-z-panel {
  margin-top: 14px;
}

/* ---- Sélecteur de coloris en pastilles (par mur) ----
   La teinte retenue est montrée en grand, toutes les références sont
   cliquables juste en dessous : le choix se voit sans ouvrir de menu. */
.mdn-calc .mdn-swatch-current {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--wood-soft);
}
.mdn-calc .mdn-swatch-current .mdn-pick-thumb {
  width: 52px;
  height: 52px;
  border-radius: 10px;
}
.mdn-calc .mdn-swatch-cur-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mdn-calc .mdn-swatch-cur-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--wood-deep);
  line-height: 1.25;
}
.mdn-calc .mdn-swatch-cur-price {
  font-size: 12.5px;
  color: var(--muted);
}
.mdn-calc .mdn-swatch-cur-link {
  align-self: flex-start;
  margin-top: 4px;
}
.mdn-calc .mdn-swatch-current .mdn-stock-wrap {
  margin-left: auto;
  text-align: right;
}

.mdn-calc .mdn-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}
.mdn-calc .mdn-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0; /* autorise la carte à rétrécir dans la grille */
  margin: 0;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  font: inherit;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
/* Le thème/kit colore le fond des boutons au survol (rose) : on le neutralise
   explicitement pour garder la pastille sur les tons bois. */
.mdn-calc .mdn-swatch:hover,
.mdn-calc .mdn-swatch:focus,
.mdn-calc .mdn-swatch:focus-visible,
.mdn-calc .mdn-swatch:active {
  border-color: var(--line-2);
  background: var(--surface) !important;
  color: var(--ink);
}
.mdn-calc .mdn-swatch.is-selected,
.mdn-calc .mdn-swatch.is-selected:hover,
.mdn-calc .mdn-swatch.is-selected:focus {
  border-color: var(--wood);
  box-shadow: inset 0 0 0 1px var(--wood);
  background: var(--wood-soft) !important;
}
/* Photo carrée : la hauteur suit la largeur de la carte (aspect-ratio), la
   carte grandit donc en conséquence. */
.mdn-calc .mdn-swatch .mdn-pick-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
}
.mdn-calc .mdn-swatch-name {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-size: 12px;
  line-height: 1.2;
  color: var(--muted);
  text-align: center;
  /* Les libellés longs (« Chêne fumé, aspect scié ») passent à la ligne au lieu
     de déborder. `white-space: normal !important` force le retour à la ligne
     même si le thème impose `nowrap` sur les libellés de bouton. */
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.mdn-calc .mdn-swatch.is-selected .mdn-swatch-name {
  color: var(--wood-deep);
  font-weight: 600;
}
.mdn-calc .mdn-swatch.is-oos {
  opacity: .5;
  cursor: not-allowed;
}
.mdn-calc .mdn-swatch.is-oos .mdn-pick-thumb { filter: grayscale(.6); }

/* Menu déroulant réservé au mobile : caché tant que les pastilles tiennent. */
.mdn-calc .mdn-swatch-select {
  display: none;
  width: 100%;
}
@media (max-width: 600px) {
  .mdn-calc .mdn-swatch-grid { display: none; }
  .mdn-calc .mdn-swatch-select { display: block; }
}

/* Détail du calepinage sous les champs d'un mur (colonnes, bandeaux).
   Repose sur .mdn-note pour la typo ; on ne règle ici que l'espacement. */
.mdn-calc .mdn-z-detail {
  margin: 12px 0 0;
}

/* Bandeau « Paquets à commander » : le grand nombre n'a pas d'unité (contrairement
   au « 0,00 m² » des autres profils), l'alignement sur la ligne de base le faisait
   paraître trop bas face au libellé sur deux lignes. On centre verticalement.
   Portée limitée au profil panneau pour ne pas toucher parquet / terrasse. */
.mdn-calc-panneau .mdn-headline {
  align-items: center;
}

/* « N paquets (M panneaux) » dans le récapitulatif : le nombre de panneaux est
   une information de pose, pas la quantité commandée. */
.mdn-products .mdn-line .v small {
  font-weight: 500;
  color: var(--muted);
  font-size: 12px;
}

/* Conteneur du détail par référence : vide, il garderait ses séparateurs. */
.mdn-products:empty { display: none; }