/* ================================================
   LA FERME DES GARRATES — Page Commandes
   ================================================ */

/* ── Intro ───────────────────────────────────────── */
.commande-intro {
  background: var(--creme);
  padding: var(--l) 0;
  border-bottom: 2px solid var(--creme-fonce);
}

.commande-intro__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--l);
  align-items: start;
}

.commande-intro h1 { margin-bottom: var(--s); }

.commande-texte-dynamique {
  background: var(--blanc);
  border-left: 4px solid var(--vert);
  border-radius: var(--r);
  padding: var(--m);
  margin-top: var(--m);
  font-style: italic;
  color: var(--texte-leger);
  white-space: pre-wrap;
  line-height: 1.8;
}

.creneaux-box {
  background: var(--vert-fonce);
  color: var(--creme);
  border-radius: var(--r-lg);
  padding: var(--m) var(--l);
  min-width: 240px;
  flex-shrink: 0;
}

.creneaux-box h3 {
  color: var(--vert-pale);
  font-size: .95rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: var(--m);
}

.creneau-item {
  display: flex;
  gap: var(--s);
  align-items: flex-start;
  margin-bottom: .65rem;
  font-size: .92rem;
}

/* ── Catalogue ───────────────────────────────────── */
.catalogue { padding: var(--xl) 0; }

.catalogue__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--l);
  flex-wrap: wrap;
  gap: var(--s);
}

.catalogue__filtres { display: flex; gap: .4rem; flex-wrap: wrap; }

.filtre-btn {
  background: var(--creme);
  border: 2px solid var(--creme-fonce);
  color: var(--texte-leger);
  padding: .35rem .9rem;
  border-radius: 20px;
  font-family: var(--f-corps);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--ease);
}
.filtre-btn:hover,
.filtre-btn.active { background: var(--vert); border-color: var(--vert); color: var(--blanc); }

.produits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--m);
  margin-bottom: var(--xl);
}

/* ── Carte produit ───────────────────────────────── */
.produit-card {
  background: var(--blanc);
  border: 2px solid var(--creme-fonce);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all var(--ease);
  position: relative;
}
.produit-card:hover {
  border-color: var(--vert-clair);
  box-shadow: 0 8px 30px rgba(74,122,40,.15);
  transform: translateY(-2px);
}
.produit-card--rupture {
  opacity: .55;
  pointer-events: none;
}

.produit-card__img {
  height: 150px;
  overflow: hidden;
  position: relative;
  background: var(--creme);
}
.produit-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.produit-card:hover .produit-card__img img { transform: scale(1.06); }
.produit-card__img .ph { height: 100%; border-radius: 0; border: none; }

.produit-card__cat {
  position: absolute;
  top: .6rem; left: .6rem;
  background: rgba(45,80,22,.85);
  color: var(--vert-pale);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .18rem .55rem;
  border-radius: 20px;
}

.produit-card__body { padding: .9rem; }

.produit-card__nom {
  font-family: var(--f-titre);
  font-size: 1.05rem;
  color: var(--terre);
  margin-bottom: .3rem;
}

.produit-card__prix {
  display: flex;
  align-items: baseline;
  gap: .25rem;
  margin-bottom: .65rem;
}
.produit-card__prix-val { font-size: 1.25rem; font-weight: 700; color: var(--vert-fonce); font-family: var(--f-titre); }
.produit-card__prix-unit { font-size: .78rem; color: var(--texte-leger); }

.produit-card__select {
  width: 100%;
  padding: .5rem .7rem;
  border: 2px solid var(--creme-fonce);
  border-radius: var(--r);
  font-family: var(--f-corps);
  font-size: .88rem;
  background: var(--creme);
  color: var(--texte);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234A7A28' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  padding-right: 2rem;
  transition: border-color var(--ease);
}
.produit-card__select:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px rgba(74,122,40,.15); }

.produit-card__sous-total {
  margin-top: .5rem;
  font-size: .82rem;
  color: var(--texte-leger);
  text-align: right;
  min-height: 1.2em;
}
.produit-card__sous-total strong { color: var(--vert-fonce); }

/* ── Panier & Finalisation ───────────────────────── */
.finalisation {
  background: var(--creme);
  padding: var(--xl) 0;
  border-top: 2px solid var(--creme-fonce);
}

.finalisation__inner {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--l);
  align-items: start;
}

/* Récap panier */
.panier {
  background: var(--blanc);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 4px 20px var(--ombre);
}

.panier__header {
  background: var(--vert-fonce);
  color: var(--creme);
  padding: var(--m);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.panier__header h3 { color: var(--vert-pale); margin: 0; }

.panier__liste { padding: var(--m); min-height: 60px; }

.panier__vide {
  text-align: center;
  padding: var(--m) 0;
  color: var(--texte-leger);
  font-style: italic;
  font-size: .9rem;
}

.panier__ligne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .55rem 0;
  border-bottom: 1px solid var(--creme-fonce);
  gap: var(--s);
}
.panier__ligne:last-child { border-bottom: none; }
.panier__ligne-nom  { font-weight: 700; font-size: .88rem; }
.panier__ligne-qte  { font-size: .78rem; color: var(--texte-leger); }
.panier__ligne-prix { font-weight: 700; color: var(--vert-fonce); white-space: nowrap; }
.panier__ligne-sup  { background: none; border: none; color: var(--terre-pale); cursor: pointer; font-size: .95rem; padding: .1rem .3rem; transition: color var(--ease); }
.panier__ligne-sup:hover { color: var(--terre); }

.panier__total {
  background: var(--creme);
  padding: var(--m);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-titre);
  border-top: 2px solid var(--creme-fonce);
}
.panier__total-val { font-size: 1.5rem; color: var(--terre); }

/* Formulaire de finalisation */
.form-commande {
  background: var(--blanc);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 4px 20px var(--ombre);
}

.form-section {
  padding: var(--m) var(--l);
  border-bottom: 2px solid var(--creme-fonce);
}
/* Garantit que les form-group dans un form-row sont bien alignés */
.form-row .form-group { margin-bottom: 0; }
/* Labels toujours alignés à gauche, jamais centrés */
.form-commande label { text-align: left; display: block; }
/* Inputs pleine largeur dans leur conteneur */
.form-commande .input { width: 100%; box-sizing: border-box; }
.form-section:last-child { border-bottom: none; }

.form-section__titre {
  font-family: var(--f-titre);
  font-size: 1.05rem;
  color: var(--terre);
  margin-bottom: var(--m);
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Paiement */
.paiement-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s);
  margin-bottom: var(--m);
}

.paiement-option {
  border: 2px solid var(--creme-fonce);
  border-radius: var(--r);
  padding: var(--m) var(--s);
  cursor: pointer;
  transition: all var(--ease);
  text-align: center;
  position: relative;
}
.paiement-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.paiement-option.selected { border-color: var(--vert); background: rgba(74,122,40,.05); }
.paiement-option__icon  { font-size: 1.8rem; display: block; margin-bottom: .3rem; }
.paiement-option__label { font-weight: 700; font-size: .85rem; color: var(--texte); display: block; }
.paiement-option__desc  { font-size: .74rem; color: var(--texte-leger); margin-top: .15rem; }

.paiement-info {
  background: var(--creme);
  border-radius: var(--r);
  padding: var(--s) var(--m);
  font-size: .87rem;
  color: var(--texte-leger);
  display: none;
}
.paiement-info.visible { display: block; }

/* Newsletter checkbox */
.checkbox-line {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  cursor: pointer;
  font-size: .9rem;
  color: var(--texte-leger);
}
.checkbox-line input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--vert); margin-top: 2px; cursor: pointer; }

/* Bouton valider */
.btn-commander {
  width: 100%;
  padding: 1.1rem;
  font-size: 1.05rem;
  background: var(--terre);
  color: var(--blanc);
  border: none;
  border-radius: var(--r);
  font-family: var(--f-titre);
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all var(--ease);
}
.btn-commander:hover { background: var(--terre-clair); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(107,66,38,.3); }
.btn-commander:disabled { background: var(--bois-clair); cursor: not-allowed; transform: none; box-shadow: none; }

/* Succès */
.commande-succes {
  display: none;
  text-align: center;
  padding: var(--xl);
}
.commande-succes__icon { font-size: 4rem; display: block; margin-bottom: var(--m); }
.commande-succes__recap {
  background: var(--creme);
  border-radius: var(--r);
  padding: var(--m);
  margin: var(--m) 0;
  text-align: left;
}
.commande-succes__recap p { margin-bottom: .4rem; }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 960px) {
  .commande-intro__inner { grid-template-columns: 1fr; }
  .finalisation__inner   { grid-template-columns: 1fr; }
  .paiement-options      { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .produits-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .form-section  { padding: var(--m); }
}