/* ==========================================================================
   Simulateur de volume (simulateur-volume.html) — 2026-10-09
   Interface inspirée d'un catalogue de jeu de construction (capture « Interface_1 ») :
   pièces à gauche, catégories en haut, catalogue illustré, récapitulatif à droite.
   Direction graphique propre à Transport Lacote (couleurs du site).
   ========================================================================== */
:root {
  --sim-marine: #0B2540;
  --sim-bleu: #226FC4;
  --sim-corail: #FF865F;
  --sim-gris: #EDF0EF;
  --sim-blanc: #FFFFFF;
  --sim-texte: #11263E;
  --sim-trait: #d8dfe6;
  --sim-rayon: 14px;
}

/* Haut de page plus compact que les autres pages : le simulateur doit se voir tout de suite */
.entete-page.entete-simulateur { padding-bottom: calc(1.2rem + var(--biais)) !important; }
main > section.section.section-simulateur-app { min-height: 0; padding-top: 1.6rem !important; }

.sim-mention {
  margin: 0 0 1rem; padding: 0.7rem 1rem; border-left: 4px solid var(--sim-corail);
  background: #fff6f2; color: var(--sim-texte); font-size: 0.92rem; border-radius: 0 8px 8px 0;
}
.sim[hidden], .sim-reprise[hidden], .sim-message[hidden], .sim-toast[hidden], .sim-sans-js[hidden] { display: none !important; }

/* ---------- Reprise d'une estimation enregistrée ---------- */
.sim-reprise {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 1rem; padding: 1rem 1.2rem; background: #eaf2fb; border: 1px solid #bcd3ee; border-radius: 10px;
}
.sim-reprise p { margin: 0; color: var(--sim-texte); font-weight: 600; }
.sim-reprise div { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ---------- Écran principal, façon catalogue de jeu (capture « Interface_1 ») ----------
   Grand panneau clair aux coins arrondis ; recherche en pilule et onglets-icônes en haut ;
   pièces en icônes à gauche ; objets blancs en 3D posés sans cadre ; barre d'état en bas. */
.sim {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  grid-template-areas: "haut haut" "nav centre" "pied pied";
  background: linear-gradient(170deg, #f4f7f3 0%, #eaf0e9 55%, #e1e9e0 100%);
  border: 1px solid #d3dcd1;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 60px -32px rgba(11, 37, 64, 0.4), inset 0 1px 0 #fff;
  color: var(--sim-texte);
}

/* Haut : pilule de recherche + onglets de catégories */
.sim-haut {
  grid-area: haut; display: flex; align-items: flex-end; gap: 1rem;
  padding: 0.9rem 1rem 0; border-bottom: 1px solid #d3dcd1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.2));
}
.sim-recherche { position: relative; flex: 0 0 15.5rem; margin: 0 0 0.75rem; }
.sim-recherche input {
  width: 100%; height: 2.6rem; padding: 0 3rem 0 1.1rem; border: 1px solid #cfd8cd; border-radius: 999px;
  background: #fff; font: inherit; font-size: 0.95rem; color: var(--sim-texte);
  box-shadow: inset 0 1px 3px rgba(11, 37, 64, 0.08);
}
.sim-recherche input::placeholder { color: #6f8a9c; }
.sim-recherche input:focus-visible { outline: 3px solid var(--sim-bleu); outline-offset: 1px; }
.sim-loupe {
  position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
  width: 2.15rem; height: 2.15rem; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, #4f8fd8, var(--sim-bleu)); color: #fff;
}
.sim-loupe svg { width: 1.05rem; height: 1.05rem; }
.sim-onglets { display: flex; gap: 0.3rem; overflow-x: auto; scrollbar-width: thin; padding-top: 0.2rem; }
.sim-onglet {
  position: relative; flex: 0 0 auto; width: 4.1rem; height: 3.6rem; padding: 0.2rem;
  border: 1px solid #cfd8cd; border-bottom: 0; border-radius: 12px 12px 0 0;
  background: rgba(255, 255, 255, 0.55); cursor: pointer;
}
.sim-onglet svg { width: 100%; height: 100%; display: block; }
.sim-onglet:hover { background: #fff; }
.sim-onglet.est-active { background: #fff; border-color: var(--sim-bleu); box-shadow: inset 0 3px 0 var(--sim-bleu); }
.sim-onglet.est-active::after {
  content: ""; position: absolute; left: 50%; bottom: 0.15rem; width: 1.4rem; height: 3px; margin-left: -0.7rem;
  border-radius: 3px; background: var(--sim-bleu);
}
.sim-onglet-nom, .sim-piece-nom {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Colonne des pièces : icônes seules, la pièce active sur fond bleu */
.sim-nav { grid-area: nav; padding: 0.7rem 0.55rem; border-right: 1px solid #d3dcd1; background: rgba(255, 255, 255, 0.35); }
.sim-pieces { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.sim-pieces li { margin: 0; }
.sim-piece {
  position: relative; width: 100%; aspect-ratio: 1; padding: 0.3rem; border-radius: 14px; cursor: pointer;
  border: 1px solid #cfd8cd; background: linear-gradient(180deg, #ffffff, #eef2ed);
  box-shadow: 0 2px 4px -2px rgba(11, 37, 64, 0.2);
}
.sim-piece-icone, .sim-piece-icone svg { display: block; width: 100%; height: 100%; }
.sim-piece:hover { border-color: #9fc0e8; }
.sim-piece.est-active {
  background: linear-gradient(180deg, #4f8fd8, var(--sim-bleu)); border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--sim-bleu), 0 6px 14px -6px rgba(34, 111, 196, 0.7);
}
.sim-piece-nb {
  position: absolute; top: -0.35rem; right: -0.35rem; min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem;
  border-radius: 999px; background: var(--sim-corail); color: var(--sim-marine); border: 2px solid #fff;
  font-size: 0.7rem; font-weight: 700; display: grid; place-items: center;
}

/* Zone centrale : vitrine des objets */
.sim-centre {
  grid-area: centre; min-width: 0; padding: 0.9rem 1.1rem 1.2rem;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%);
}
.sim-fil { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 1rem; margin-bottom: 0.6rem; }
.sim-titre-piece { margin: 0; font-size: 1.15rem !important; color: var(--sim-marine) !important; }
.sim-titre-cat { color: var(--sim-bleu); font-weight: 600; }
.sim-info-liste { margin: 0; font-size: 0.82rem; color: #5a6f80; }
.sim-prerempli {
  margin-left: auto; border: 1px dashed var(--sim-bleu); background: rgba(255, 255, 255, 0.7); color: var(--sim-bleu);
  border-radius: 999px; padding: 0.4rem 0.9rem; font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer;
}
.sim-prerempli:hover { background: #fff; }
.sim-message {
  margin: 0 0 0.8rem; padding: 0.6rem 0.9rem; background: #fff; border-left: 4px solid var(--sim-bleu);
  border-radius: 0 8px 8px 0; font-weight: 600; font-size: 0.9rem;
}
.sim-grille {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 0.4rem 0.6rem;
}
.sim-carte {
  position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0.35rem 0.3rem 0.5rem; border-radius: 14px; border: 1px solid transparent; transition: background 0.15s;
}
.sim-carte:hover, .sim-carte:focus-within { background: rgba(255, 255, 255, 0.75); border-color: #dbe3d9; }
.sim-carte-ouvrir {
  position: relative; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 12px;
}
.sim-illu { position: relative; display: block; width: 100%; aspect-ratio: 6 / 5; }
.sim-illu svg, .sim-illu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sim-carte.est-choisie .sim-illu::before {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 3%; height: 18%; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(34, 111, 196, 0.32), rgba(34, 111, 196, 0) 70%);
}
.sim-carte-nom { font-weight: 700; font-size: 0.82rem; line-height: 1.2; color: var(--sim-marine); margin-top: 0.1rem; }
.sim-carte-vol { font-size: 0.72rem; color: #5a6f80; margin: 0.1rem 0 0.4rem; }
.sim-carte-coche {
  position: absolute; top: 0.2rem; right: 0.2rem; padding: 0.12rem 0.45rem; border-radius: 999px;
  background: var(--sim-bleu); color: #fff; font-size: 0.72rem; font-weight: 700; border: 2px solid #fff;
}
.sim-carte-badge {
  position: absolute; top: 0.2rem; left: 0.2rem; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--sim-corail); color: var(--sim-marine);
  font-size: 0.8rem; font-weight: 800; border: 2px solid #fff;
}
.sim-ctrl {
  margin-top: auto; display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.15rem;
  border-radius: 999px; background: #fff; border: 1px solid #d5ddd3; box-shadow: 0 1px 2px rgba(11, 37, 64, 0.08);
}
.sim-ctrl button {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 0; cursor: pointer;
  font-size: 1.15rem; font-weight: 700; line-height: 1; display: grid; place-items: center;
}
.sim-plus { background: var(--sim-bleu); color: #fff; }
.sim-plus:hover { background: #1b5ba3; }
.sim-moins { background: #eef1ee; color: var(--sim-marine); }
.sim-moins:disabled { opacity: 0.35; cursor: default; }
.sim-qte { min-width: 1.6rem; text-align: center; font-weight: 700; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.sim-carte-perso .sim-illu { opacity: 0.85; }
.sim-perso-plus {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: 2.2rem; height: 2.2rem;
  border-radius: 50%; display: grid; place-items: center; background: var(--sim-bleu); color: #fff; font-size: 1.4rem; font-weight: 700;
}
.sim-ctrl-perso { padding: 0.15rem; }
.sim-lien-perso { width: auto !important; border-radius: 999px !important; padding: 0 0.9rem; background: #eaf2fb !important; color: var(--sim-bleu) !important; font-size: 0.82rem !important; }

/* Vue d'ensemble : les pièces, même présentation que les objets */
.sim-grille-pieces { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sim-carte-piece { margin: 0; }
.sim-carte-piece button {
  width: 100%; display: grid; justify-items: center; gap: 0.1rem; padding: 0.4rem 0.4rem 0.7rem; border-radius: 14px;
  border: 1px solid transparent; background: none; cursor: pointer; font: inherit; color: var(--sim-texte); text-align: center;
}
.sim-carte-piece button:hover { background: rgba(255, 255, 255, 0.75); border-color: #dbe3d9; }
.sim-carte-piece.est-choisie .sim-carte-vol { color: var(--sim-bleu); font-weight: 700; }

.sim-carte-ouvrir:focus-visible, .sim-piece:focus-visible, .sim-onglet:focus-visible, .sim-prerempli:focus-visible,
.sim-ctrl button:focus-visible, .sim-dialogue button:focus-visible, .sim-carte-piece button:focus-visible,
.sim-pied button:focus-visible {
  outline: 3px solid var(--sim-corail); outline-offset: 2px;
}

/* ---------- Barre d'état du bas (récapitulatif permanent) ---------- */
.sim-pied {
  grid-area: pied; display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; grid-template-areas:
    "camion chiffres actions" "camion listes actions" "camion sauvegarde sauvegarde";
  align-items: center; gap: 0.3rem 1.2rem; padding: 0.7rem 1rem 0.6rem;
  background: rgba(255, 255, 255, 0.85); border-top: 1px solid #d3dcd1;
}
.sim-pied-camion { grid-area: camion; }
.sim-pied-camion .sim-camion-texte { font-size: 0.72rem; margin: 0.2rem 0 0; line-height: 1.25; }
.sim-pied-camion .sim-camion-note { font-size: 0.64rem; line-height: 1.25; }
.sim-pied-chiffres { grid-area: chiffres; display: flex; flex-wrap: wrap; gap: 0.2rem 1.3rem; margin: 0; }
.sim-pied-chiffres div { display: grid; }
.sim-pied-chiffres dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: #5a6f80; }
.sim-pied-chiffres dd { margin: 0; font-weight: 700; font-size: 1.02rem; font-variant-numeric: tabular-nums; color: var(--sim-marine); }
.sim-pied-chiffres .sim-chiffre-fort { padding: 0.1rem 0.7rem; border-radius: 8px; background: #eaf2fb; }
.sim-pied-chiffres .sim-chiffre-fort dd { color: var(--sim-bleu); font-size: 1.2rem; }
.sim-pied-listes { grid-area: listes; margin: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 1.4rem; font-size: 0.78rem; color: #4a5d72; }
.sim-pied-listes strong { color: var(--sim-marine); }
.sim-pied-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.sim-pied-actions .btn, .sim-pied-actions .sim-btn-secondaire { padding: 0.6rem 1rem; font-size: 0.88rem; }
.sim-pied .sim-sauvegarde { grid-area: sauvegarde; margin: 0; text-align: right; }
.sim-camion svg { display: block; width: 100%; height: auto; }
.sim-camion-texte { margin: 0.4rem 0 0.15rem; font-size: 0.85rem; }
.sim-camion-note { margin: 0; font-size: 0.76rem; color: #4a5d72; font-style: italic; }
.sim-jauge, .sim-inv-jauge { margin-top: 0.9rem; }
.sim-chiffres { margin: 0; display: grid; gap: 0.15rem; }
.sim-chiffres div { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.35rem 0; border-bottom: 1px solid #eef1f3; }
.sim-chiffres dt { font-size: 0.88rem; color: #4a5d72; }
.sim-chiffres dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.sim-chiffres .sim-chiffre-fort { background: #eef4fc; border-radius: 8px; padding: 0.55rem 0.6rem; border: 0; margin: 0.25rem 0; }
.sim-chiffres .sim-chiffre-fort dt { color: var(--sim-texte); font-weight: 700; }
.sim-chiffres .sim-chiffre-fort dd { color: var(--sim-bleu); font-size: 1.2rem; }
.sim-btn-secondaire {
  padding: 0.75rem 1rem; border: 1.5px solid var(--sim-marine); border-radius: 4px; background: #fff;
  color: var(--sim-marine); font: inherit; font-weight: 600; cursor: pointer;
}
.sim-btn-secondaire:hover { background: var(--sim-marine); color: #fff; }
.sim-btn-secondaire:disabled { opacity: 0.4; cursor: default; background: #fff; color: var(--sim-marine); }
.sim-lien { background: none; border: 0; font: inherit; font-size: 0.84rem; color: #4a5d72; text-decoration: underline; cursor: pointer; padding: 0.4rem; }
.sim-sauvegarde { font-size: 0.72rem; color: #5a6f80; min-height: 1em; }
.sim-barre-mobile { display: none; }

/* ---------- Messages ---------- */
.sim-toast {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 60;
  width: min(92vw, 34rem); margin: 0; padding: 0.9rem 1.1rem; border-radius: 10px;
  background: var(--sim-marine); color: #fff; font-size: 0.9rem; line-height: 1.45;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.5);
}
.sim-alerte {
  margin: 1rem 0; padding: 0.8rem 1rem; border-radius: 8px; background: #fff3ee; border: 1px solid #ffc4b0;
  color: var(--sim-texte); font-size: 0.9rem;
}
.sim-alerte::before { content: "⚠ "; font-weight: 700; }
.sim-sans-js { padding: 1.4rem; background: #fff; border-radius: 10px; }

/* ---------- Boîtes de dialogue ---------- */
.sim-modal-ouverte { overflow: hidden; }
.sim-dialogue {
  width: min(94vw, 40rem); max-height: 92vh; padding: 1.6rem 1.6rem 1.4rem; border: 0; border-radius: 16px;
  color: var(--sim-texte); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.55); overflow: auto;
}
.sim-dialogue::backdrop { background: rgba(11, 37, 64, 0.55); }
.sim-dialogue-plein { width: min(96vw, 64rem); }
.sim-dialogue-petit { width: min(92vw, 28rem); }
.sim-dialogue h2 { font-size: 1.4rem !important; margin: 0 2rem 0.5rem 0; }
.sim-fermer {
  position: absolute; top: 0.8rem; right: 0.8rem; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 0; background: var(--sim-gris); color: var(--sim-marine); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.sim-fiche-haut { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.3rem; align-items: start; }
.sim-illu-grande { border-radius: 12px; }
.sim-fiche-dims { margin: 0 0 0.5rem; font-size: 0.88rem; color: #4a5d72; }
.sim-fiche-infos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; font-size: 0.92rem; }
.sim-fiche-infos li { margin: 0; }
.sim-fiche-demontable { color: var(--sim-bleu); font-weight: 700; }
.sim-fiche-demontable::before { content: "🔧 "; }
.sim-choix { margin: 1.1rem 0 0; padding: 0; border: 0; display: grid; gap: 0.4rem; }
.sim-choix legend { font-weight: 700; margin-bottom: 0.5rem; padding: 0; }
.sim-choix label {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.8rem; border: 1.5px solid var(--sim-trait);
  border-radius: 10px; cursor: pointer; font-size: 0.94rem;
}
.sim-choix label:has(input:checked) { border-color: var(--sim-bleu); background: #eef4fc; font-weight: 600; }
.sim-choix input { width: 1.15rem; height: 1.15rem; accent-color: var(--sim-bleu); margin: 0; }
.sim-choix-vol { margin-left: auto; color: #4a5d72; font-weight: 600; }
.sim-choix-ligne { grid-template-columns: repeat(3, auto); justify-content: start; }
.sim-aide { font-size: 0.82rem; color: #4a5d72; margin: 0.4rem 0 0; }
.sim-dims-perso { margin-top: 1.1rem; border: 1.5px solid var(--sim-trait); border-radius: 10px; padding: 0.7rem 0.9rem; }
.sim-dims-perso summary { cursor: pointer; font-weight: 700; color: var(--sim-bleu); }
.sim-trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-top: 0.7rem; }
.sim-dialogue label { font-size: 0.88rem; font-weight: 600; }
.sim-dialogue input[type=text], .sim-dialogue input[type=number], .sim-dialogue input[type=file] {
  display: block; width: 100%; margin-top: 0.3rem; padding: 0.65rem 0.75rem; border: 1.5px solid var(--sim-trait);
  border-radius: 8px; font: inherit; font-weight: 400; color: var(--sim-texte); background: #fff;
}
.sim-dialogue input:focus-visible { outline: 3px solid var(--sim-bleu); outline-offset: 1px; }
#sim-perso-form > label { display: block; margin-top: 0.9rem; }
.sim-court input { max-width: 7rem; }
.sim-facultatif { font-weight: 400; color: #4a5d72; font-size: 0.8rem; }
.sim-p-apercu img { max-width: 8rem; max-height: 6rem; border-radius: 8px; margin-top: 0.6rem; object-fit: cover; }
.sim-fiche-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; }
.sim-qte-choix { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; }
.sim-qte-choix button {
  width: 2.6rem; height: 2.6rem; border-radius: 10px; border: 0; background: var(--sim-gris); font-size: 1.3rem; font-weight: 700; cursor: pointer;
}
.sim-qte-choix button:last-child { background: var(--sim-bleu); color: #fff; }
.sim-qte-choix output { min-width: 1.8rem; text-align: center; font-size: 1.1rem; }
.sim-fiche-total { margin: 0.9rem 0 0; }
.sim-fiche-total strong { color: var(--sim-bleu); font-size: 1.15rem; }
.sim-fiche-dans { font-size: 0.82rem; color: #4a5d72; margin: 0.6rem 0 0; }
.sim-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }

/* Préréglages */
.sim-prereglages { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.sim-prereglages li { margin: 0; }
.sim-prereglages button {
  width: 100%; display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem; text-align: left;
  border: 1.5px solid var(--sim-trait); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: var(--sim-texte);
}
.sim-prereglages button:hover { border-color: var(--sim-bleu); }
.sim-prereglages small { display: block; color: #4a5d72; font-size: 0.8rem; }

/* Inventaire complet */
.sim-inv-pieces { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.sim-inv-piece { margin: 0; border: 1.5px solid var(--sim-trait); border-radius: 12px; padding: 0.9rem; }
.sim-inv-piece-haut { display: flex; align-items: center; gap: 0.8rem; }
.sim-inv-piece-haut > div { flex: 1; min-width: 0; }
.sim-inv-piece h3 { margin: 0; font-size: 1rem !important; }
.sim-inv-piece-haut p { margin: 0.1rem 0 0; font-size: 0.85rem; color: #4a5d72; }
.sim-inv-piece-haut .sim-btn-secondaire { padding: 0.5rem 0.8rem; font-size: 0.85rem; }
.sim-inv-lignes { list-style: none; margin: 0.7rem 0 0; padding: 0; font-size: 0.86rem; }
.sim-inv-lignes li { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto 2rem; gap: 0.5rem; align-items: center; padding: 0.3rem 0; border-top: 1px solid #eef1f3; }
.sim-suppr { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 0; background: var(--sim-gris); cursor: pointer; font-size: 1.1rem; }
.sim-inv-totaux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; margin-top: 1.4rem; padding: 1.1rem; background: var(--sim-gris); border-radius: 12px; }
.sim-inv-bloc { margin-top: 1.2rem; }
.sim-inv-bloc h3 { font-size: 1rem !important; margin: 0; }
.sim-inv-bloc ul { margin: 0.5rem 0 0; padding-left: 1.2rem; font-size: 0.9rem; }
.sim-vide-grand { padding: 2rem 1rem; text-align: center; color: #4a5d72; }

/* ---------- Écrans moyens : barre du bas sur deux lignes ---------- */
@media (max-width: 1100px) {
  .sim-pied { grid-template-columns: 8.5rem minmax(0, 1fr); grid-template-areas:
    "camion chiffres" "camion listes" "actions actions" "sauvegarde sauvegarde"; }
  .sim-pied-actions { justify-content: flex-start; }
  .sim-pied .sim-sauvegarde { text-align: left; }
  .sim-recherche { flex-basis: 12rem; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 760px) {
  main > section.section.section-simulateur-app { padding-bottom: 6rem !important; }
  /* Ordre : recherche, pièces, catégories, objets */
  .sim { grid-template-columns: minmax(0, 1fr); grid-template-areas: "recherche" "nav" "cats" "centre"; border-radius: 16px; }
  .sim-haut { display: contents; }
  .sim-recherche { grid-area: recherche; margin: 0.7rem 0.7rem 0.5rem; }
  .sim-onglets { grid-area: cats; padding: 0.5rem 0.7rem 0; border-bottom: 1px solid #d3dcd1; background: rgba(255, 255, 255, 0.45); }
  .sim-onglets:empty { display: none; }
  .sim-onglet { width: 3.5rem; height: 3.1rem; }
  /* Pièces : barre horizontale défilante */
  .sim-nav { border-right: 0; border-bottom: 1px solid #d3dcd1; overflow-x: auto; scrollbar-width: thin; padding: 0.55rem; }
  .sim-pieces { display: flex; gap: 0.4rem; width: max-content; }
  .sim-piece { width: 3.6rem; }
  .sim-centre { padding: 0.7rem; }
  .sim-prerempli { margin-left: 0; }
  .sim-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
  .sim-grille-pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim-ctrl button { width: 2.75rem; height: 2.75rem; }
  .sim-pied { display: none; }
  /* Barre fixe : volume + inventaire */
  .sim-barre-mobile {
    display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
    background: var(--sim-marine); color: #fff; box-shadow: 0 -10px 30px -10px rgba(0, 0, 0, 0.4);
  }
  .sim-barre-mobile p { margin: 0; display: grid; line-height: 1.2; }
  .sim-barre-mobile strong { font-size: 1.25rem; color: var(--sim-corail); }
  .sim-barre-mobile span { font-size: 0.8rem; opacity: 0.85; }
  .sim-toast { bottom: 5.5rem; }
  /* Récapitulatif et fiches : plein écran */
  .sim-dialogue, .sim-dialogue-plein { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; padding: 1.2rem 1rem 1.6rem; }
  .sim-dialogue-petit { height: auto; margin: auto; width: 92vw; border-radius: 14px; }
  .sim-fiche-haut { grid-template-columns: minmax(0, 1fr); }
  .sim-illu-grande { max-width: 15rem; }
  .sim-inv-pieces, .sim-inv-totaux, .sim-prereglages { grid-template-columns: minmax(0, 1fr); }
  .sim-choix-ligne { grid-template-columns: minmax(0, 1fr); }
  .sim-actions > * { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sim-carte, .sim-carte:hover { transition: none; transform: none; }
}

/* Les boîtes de dialogue restent centrées (le site remet toutes les marges à zéro) */
.sim-dialogue[open] { position: fixed; inset: 0; margin: auto; }
.sim-dialogue-plein[open], .sim-dialogue[open] { height: fit-content; }

/* Téléphone : la bulle de discussion passe au-dessus de la barre du volume */
@media (max-width: 760px) {
  body:has(.sim-barre-mobile) .chat { bottom: 5.6rem !important; }
  .sim-dialogue[open], .sim-dialogue-plein[open] { height: 100dvh; }
  .sim-dialogue-petit[open] { height: fit-content; }
}

/* ==========================================================================
   Tout le simulateur sur un écran (2026-10-10) : le panneau prend la hauteur de la
   fenêtre sous le menu du site ; seuls le catalogue et la colonne des pièces défilent,
   la barre du bas (volumes, boutons) reste toujours visible.
   Colonne des pièces : icône + nom.
   ========================================================================== */
#sim { scroll-margin-top: 12px; }   /* s'ajoute au scroll-padding-top de 92 px du site */
.sim {
  grid-template-columns: 172px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: calc(100vh - var(--hauteur-menu, 97px) - 20px);
  height: calc(100dvh - var(--hauteur-menu, 97px) - 20px);
  min-height: 34rem;
}
.sim-nav { overflow-y: auto; scrollbar-width: thin; padding: 0.6rem 0.5rem; }
.sim-centre { overflow-y: auto; scrollbar-width: thin; padding-top: 0.7rem; }
.sim-pieces { gap: 0.3rem; }
.sim-piece {
  aspect-ratio: auto; display: flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0.5rem 0.3rem 0.3rem;
  text-align: left; border-radius: 12px;
}
.sim-piece-icone { flex: 0 0 2.6rem; width: 2.6rem; height: 2.3rem; }
.sim-piece-icone svg { width: 100%; height: 100%; }
.sim-piece .sim-piece-nom {
  position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
  font: inherit; font-size: 0.82rem; font-weight: 700; line-height: 1.15; color: var(--sim-marine);
}
.sim-piece.est-active .sim-piece-nom { color: #fff; }
.sim-piece-nb { position: static; margin-left: auto; flex-shrink: 0; border-width: 0; }

/* Barre du bas plus compacte */
.sim-pied { padding: 0.5rem 1rem; gap: 0.15rem 1.1rem; grid-template-columns: 7.5rem minmax(0, 1fr) auto; }
.sim-pied-camion .sim-camion-texte { font-size: 0.68rem; }
.sim-pied-chiffres dd { font-size: 0.98rem; }
.sim-pied-chiffres .sim-chiffre-fort dd { font-size: 1.12rem; }
.sim-pied-actions .btn, .sim-pied-actions .sim-btn-secondaire { padding: 0.5rem 0.85rem; }
.sim-pied .sim-sauvegarde { font-size: 0.68rem; }

@media (max-width: 1100px) {
  .sim-pied { grid-template-columns: 7rem minmax(0, 1fr); }
}

/* Téléphone : même principe, la barre fixe du bas remplace la barre d'état */
@media (max-width: 760px) {
  .sim {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr);
    height: calc(100dvh - var(--hauteur-menu-mobile, 96px) - 5rem); min-height: 26rem;
  }
  #sim { scroll-margin-top: 10px; }
  .sim-nav { overflow-y: hidden; overflow-x: auto; }
  .sim-piece { width: auto; flex-direction: column; gap: 0.15rem; padding: 0.3rem 0.4rem; text-align: center; }
  .sim-piece-icone { flex-basis: auto; width: 2.6rem; height: 2rem; }
  .sim-piece .sim-piece-nom { font-size: 0.66rem; white-space: nowrap; }
  .sim-piece-nb { position: absolute; top: -0.3rem; right: -0.3rem; border-width: 2px; }
}
.sim-pied-mention { font-style: italic; }

/* Barre du bas sur deux lignes fines (2026-10-10) :
   1. camion · chiffres · boutons   2. objets particuliers · démontages · mentions · sauvegarde */
.sim-pied {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  grid-template-areas: "camion chiffres actions" "listes listes listes" !important;
  gap: 0.2rem 1.2rem; padding: 0.5rem 1rem 0.45rem;
}
.sim-pied-camion { display: flex; align-items: center; gap: 0.5rem; width: 12.5rem; }
.sim-pied-camion .sim-camion { flex: 0 0 4.6rem; }
.sim-pied-camion .sim-camion-texte { margin: 0; font-size: 0.74rem; line-height: 1.25; }
.sim-pied-chiffres { flex-wrap: nowrap; gap: 0 1rem; }
.sim-pied-chiffres div { white-space: nowrap; }
.sim-pied-chiffres dt { font-size: 0.64rem; }
.sim-pied-actions { flex-wrap: nowrap; gap: 0.4rem; }
.sim-pied-actions .btn, .sim-pied-actions .sim-btn-secondaire { padding: 0.45rem 0.75rem; font-size: 0.84rem; white-space: nowrap; }
.sim-pied-listes {
  flex-wrap: nowrap; gap: 0 1.2rem; padding-top: 0.3rem; border-top: 1px solid #e3e9e2; font-size: 0.74rem;
  white-space: nowrap; overflow: hidden;
}
.sim-pied-listes > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sim-pied-listes > span:first-child, .sim-pied-listes > span:nth-child(2) { flex: 0 1 auto; }
.sim-pied .sim-sauvegarde { display: none; }   /* l'heure de sauvegarde est lue dans l'inventaire */
.sim-pied-mention { margin-left: auto; flex-shrink: 0; }

/* Colonne des pièces plus serrée : les 12 pièces tiennent sur un écran courant */
.sim-pieces { gap: 0.2rem; }
.sim-piece { padding: 0.15rem 0.45rem 0.15rem 0.25rem; min-height: 2.6rem; }
.sim-piece-icone { height: 2rem; flex-basis: 2.4rem; width: 2.4rem; }

/* La bulle de discussion du site passe au-dessus de la barre du bas */
body:has(#sim) .chat { bottom: 6.5rem !important; }

/* Écrans moins larges : moins de chiffres affichés dans la barre, le reste est dans l'inventaire */
@media (max-width: 1280px) {
  .sim-pied-chiffres div:first-child, .sim-pied-chiffres div:nth-child(3) { display: none; }
  .sim-pied-camion { width: 10.5rem; }
}
@media (max-width: 1100px) {
  .sim-pied { grid-template-areas: "camion chiffres chiffres" "actions actions actions" "listes listes listes" !important; }
  .sim-pied-actions { justify-content: flex-start; }
}

/* Onglets du haut (catégories) : le nom sous l'icône, comme dans la colonne des pièces (2026-10-11) */
.sim-onglet {
  width: auto; min-width: 4.6rem; max-width: 7rem; height: auto; padding: 0.35rem 0.55rem 0.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
}
.sim-onglet svg { width: 2.6rem; height: 2.3rem; flex: 0 0 auto; }
.sim-onglet .sim-onglet-nom {
  position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
  font-size: 0.74rem; font-weight: 700; line-height: 1.15; text-align: center; color: var(--sim-marine);
}
.sim-onglet.est-active .sim-onglet-nom { color: var(--sim-bleu); }
.sim-onglet.est-active::after { display: none; }
@media (max-width: 760px) {
  .sim-onglet { width: auto; height: auto; min-width: 4rem; }
  .sim-onglet svg { width: 2.2rem; height: 1.9rem; }
  .sim-onglet .sim-onglet-nom { font-size: 0.66rem; white-space: nowrap; }
}