body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: url("images/bois2.jpg") no-repeat center center fixed;
    background-size: cover;
}
.bois, .presentation, .filtre-type, .soumission, .container {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(3px);
}

.bois, .presentation, .soumission, .filtre-type {
  border-radius: 12px;
  box-shadow: 0 8px 20px rgb(255, 255, 255)55, 0.15;
}
.bois:hover {
  transform: translateY(-5px);
  transition: all 0.3s ease;
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}

.with-banner header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4); /* voile sombre sur la photo */
}



.container {
    padding: 20px;
    max-width: 800px;
    margin: auto;
}

.bois {
    background-color: white;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

label, input {
    margin-top: 10px;
    display: block;
}

input {
    width: 80px;
}

button, .btn {
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: bold;
  transition: transform 0.2s, background 0.3s;
}

button:hover, .btn:hover {
  transform: scale(1.05);
  background: linear-gradient(135deg, #66bb6a, #388e3c);
}

.soumission {
    background-color: #ddd;
    padding: 20px;
    border-radius: 8px;
    margin: 40px auto;
    max-width: 800px;
}

.presentation {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.bouton-stock {
    text-align: center;
}

.bouton-stock button {
    font-size: 18px;
}

.retour {
    text-align: right;
    padding: 20px;
    max-width: 800px;
    margin: auto;
}


.retour button {
    background-color: #888;
    font-size: 14px;
}

.retour button:hover {
    background-color: #666;
}


.filtre-type {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: rgb(255, 255, 255);
    padding: 10px 20px;
    margin: 20px auto;
    max-width: 800px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.filtre-type label {
    display: flex;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
}
.filtre-type label input[type="checkbox"] {
    margin-left: -20px;
}

#panier-fab{
  position:fixed; right:16px; bottom:16px; z-index:9999;
  background:#1565c0; color:#fff; padding:20px 35px; border-radius:12px;
  text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,.2);font-size: 18px;
  font-weight:600;
}
#panier-fab .badge{
  position:relative; top:-1px; margin-left:8px; background:#ff6b6b; color:#fff;
  border-radius:999px; padding:2px 8px; font-size:12px;
}
.btn{ cursor:pointer; }
/* ---- Soumission & Commande (scopé pour ne pas affecter stock) ---- */
.soumission-page .page,
.commande-page .page {
  max-width:1000px;
  margin:20px auto;
  padding:0 16px;
}

.soumission-page .topbar,
.commande-page .topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.soumission-page .btn,
.commande-page .btn {
  border:none;
  background:#2e7d32;
  color:#fff;
  padding:8px 12px;
  border-radius:10px;
  text-decoration:none;
  display:inline-block;
  cursor:pointer;
}

.soumission-page .btn.primary,
.commande-page .btn.primary { background:#1565c0; }

.soumission-page .btn.danger,
.commande-page .btn.danger { background:#c62828; }

.soumission-page table,
.commande-page table {
  width:100%;
  border-collapse:collapse;
  margin:12px 0;
}

.soumission-page th, .soumission-page td,
.commande-page th, .commande-page td {
  border-bottom:1px solid #e5e5e5;
  padding:8px;
  text-align:left;
}

.soumission-page #resume,
.commande-page #resume { margin:16px 0; }

.soumission-page .grid,
.commande-page .grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.soumission-page .grid .full,
.commande-page .grid .full { grid-column:1/-1; }

.soumission-page label,
.commande-page label { font-weight:600; }

.soumission-page input, .soumission-page select, .soumission-page textarea,
.commande-page input, .commande-page select, .commande-page textarea {
  width:100%;
  padding:8px;
  border:1px solid #ddd;
  border-radius:8px;
}

.soumission-page .actions,
.commande-page .actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.soumission-page .hint,
.commande-page .hint {
  font-size:.9rem;
  color:#666;
}
/* ---- Container fond blanc réutilisable (Soumission + Commande) ---- */
.soumission-page .soumission-container,
.commande-page  .soumission-container {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(3px);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
  max-width: 1000px;
  margin: 20px auto;
}

/* garder le tableau lisible */
.soumission-page table,
.commande-page table { background: transparent; }

.soumission-page th, .soumission-page td,
.commande-page th, .commande-page td { background: transparent; }

/* s’assurer que les champs de formulaire restent larges */
.soumission-page input, .soumission-page select, .soumission-page textarea,
.commande-page input, .commande-page select, .commande-page textarea {
  width: 100%;
}
/* Ligne quantité + bouton à droite dans les cartes de stock */
.container .bois .ligne-commande{
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0;
}
.container .bois .ligne-commande label{ margin:0; }
.container .bois .ligne-commande input[type="number"]{ width:90px; }
.container .bois .ligne-commande .btn{ margin-left:auto; } /* pousse le bouton à droite */

/* ===== Commande : form clean & align ===== */
.commande-page .grid > div{
  display: flex;
  flex-direction: column;        /* label au-dessus, champ en dessous */
}

.commande-page label{
  display: inline-block;         /* annule le display:block global si besoin */
  margin: 0 0 6px 0;             /* annule le margin-top:10px global */
  font-weight: 600;
  color: #2b2b2b;
}

.commande-page input,
.commande-page select,
.commande-page textarea{
  width: 100%;                   /* annule le input{width:80px} global */
  box-sizing: border-box;
  height: 44px;                  /* hauteur uniforme */
  line-height: 44px;
  padding: 0 12px;
  margin: 0;                     /* annule les marges globales */
  border: 1px solid #d7d7d7;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.commande-page textarea{
  min-height: 110px;
  line-height: 1.45;
  padding: 10px 12px;            /* textarea = padding différent */
  resize: vertical;
}

/* focus visible et propre */
.commande-page input:focus,
.commande-page select:focus,
.commande-page textarea:focus{
  outline: none;
  border-color: #66bb6a;
  box-shadow: 0 0 0 3px rgba(102,187,106,.2);
}

/* grille un peu plus aérée */
.commande-page .grid{ gap: 16px; }

/* mobile : 1 colonne */
@media (max-width: 720px){
  .commande-page .grid{ grid-template-columns: 1fr; }
}
/* --- Agrandir la police dans la page Soumission et Commande --- */
.soumission-page,
.commande-page {
  font-size: 1.3rem; /* texte un peu plus gros */
}

.soumission-page #total,
.commande-page #total {
  font-size: 1.5rem;   /* total bien visible */
  font-weight: bold;
  color: #2e7d32;      /* vert foncé */
}

.soumission-page table th,
.soumission-page table td,
.commande-page table th,
.commande-page table td {
  font-size: 1.25rem;  /* un petit + pour le tableau */
}

.soumission-page #resume,
.commande-page #resume {
  font-size: 1.25rem;   /* sous-total, tps, tvq un peu plus gros */
}
/* Aligner à droite Prix unitaire (col 4) et Sous-total (col 5) */
.soumission-page table th:nth-child(4),
.soumission-page table td:nth-child(4),
.soumission-page table th:nth-child(5),
.soumission-page table td:nth-child(5),
.commande-page  table th:nth-child(4),
.commande-page  table td:nth-child(4),
.commande-page  table th:nth-child(5),
.commande-page  table td:nth-child(5) {
  text-align: right;
  font-variant-numeric: tabular-nums; /* chiffres alignés proprement */
  white-space: nowrap;                 /* évite les retours à la ligne */
}
.soumission-page #resume p,
.soumission-page #resume h2,
.commande-page #resume p,
.commande-page #resume h2 {
  text-align: right;
}