/* =================================================================
   GAUME BOIS — compléments
   Règles pour les éléments ajoutés après la maquette statique.
   site.css reste la feuille de base : rien ne s'y ajoute.
   ================================================================= */

/* Communication structurée du virement : confirmation et courriels. */
.communication {
	border: 2px solid var(--forest);
	background: var(--surface);
	padding: var(--sp-4);
	margin-block: var(--sp-4);
}

.communication strong {
	font-size: var(--fs-md);
	letter-spacing: .02em;
}

.communication span {
	display: block;
	margin-top: var(--sp-2);
	color: var(--ink-soft);
	font-size: var(--fs-sm);
}

/* ---------- Cartes de hauteur régulière ---------- */

/*
   Les produits importés n'ont pas de caractéristiques techniques, ceux du
   maquette de référence en ont quatre. Les cartes d'une même rangée
   tombaient donc à des hauteurs différentes et les prix ne s'alignaient
   plus. Le pied de carte est poussé en bas : prix et bouton se retrouvent
   sur la même ligne d'une carte à l'autre.
*/
.card__foot {
	margin-top: auto;
}

.card .spec:empty {
	display: none;
}

/* ---------- Visuels de faible définition ---------- */

/*
   Étirés à 600×450, les visuels importés en 250 px ressortaient flous.
   Ils sont affichés à leur taille réelle, centrés, sur le fond de la
   carte. Mieux vaut une image nette plus petite qu'une image pleine
   largeur floue.
*/
.card__media img.card__media--petite {
	object-fit: contain;
	padding: var(--sp-4);
	background: var(--paper);
}

/* ---------- Grilles incomplètes ---------- */

/*
   La grille dessine ses séparateurs avec un fond et un écart d'un pixel.
   Quand une catégorie compte moins de produits qu'il n'y a de colonnes,
   les emplacements restés vides laissaient voir ce fond : des carreaux
   beiges dans la page. Le fond passe donc sur les cartes elles-mêmes,
   via un contour qui n'occupe aucune place.
*/
.catgroupe .grid {
	background: transparent;
	border-color: transparent;
}

.catgroupe .grid .card {
	outline: 1px solid var(--line);
}

/* Pages de rayon : sous-catégories et texte d'introduction. */
.shop-head__texte { margin: var(--sp-3) 0 0; max-width: 62ch; color: var(--ink-soft); }
.rayons { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: var(--sp-4) 0 0; }
.rayons a { display: inline-flex; align-items: baseline; gap: .4rem; padding: .35rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: var(--fs-sm); text-decoration: none; color: var(--ink); }
.rayons a:hover { border-color: var(--forest); }
.rayons span { color: var(--ink-faint); font-size: var(--fs-xs); }
.filters__tout { margin-top: var(--sp-4); font-size: var(--fs-sm); }
.shop--vide { display: block; }

/* Fiche non commandable en ligne : on le dit, plutôt qu'un bouton qui échoue. */
.product__surcommande { margin: var(--sp-4) 0 var(--sp-3); color: var(--ink-soft); }

/* Bandeau de consentement.
   Refuser doit être aussi simple qu'accepter : les deux boutons ont donc
   le même poids visuel, comme le demande l'autorité belge de protection
   des données. */
.consentement {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 900;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	padding: 1rem clamp(1rem, 4vw, 2.5rem);
	background: var(--forest, #1e3b2c);
	color: var(--paper, #fbfaf7);
	box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
}

.consentement[hidden] { display: none; }
.consentement__texte { flex: 1 1 24rem; }
.consentement__texte strong { display: block; margin-bottom: .2rem; }
.consentement__texte p { margin: 0; font-size: var(--fs-sm, .92rem); color: rgba(251, 250, 247, .82); }
.consentement__texte a { color: var(--sap-bright, #d9a827); }

.consentement__boutons { display: flex; gap: .6rem; flex: 0 0 auto; }

.consentement__boutons button {
	font: inherit;
	font-weight: 600;
	padding: .55rem 1.4rem;
	border-radius: var(--radius, 6px);
	border: 1px solid var(--paper, #fbfaf7);
	background: transparent;
	color: var(--paper, #fbfaf7);
	cursor: pointer;
}

.consentement__boutons button:hover { background: rgba(255, 255, 255, .12); }
.consentement__boutons [data-consentement-accord] { background: var(--paper, #fbfaf7); color: var(--forest, #1e3b2c); }
.consentement__boutons [data-consentement-accord]:hover { background: #fff; }

@media (max-width: 34rem) {
	.consentement__boutons { width: 100%; }
	.consentement__boutons button { flex: 1; }
}

/* ---------- Lots vendus au stère ----------
   Le volume est le premier critère de comparaison d'un client qui achète du bois
   de chauffage : il est donc affiché en clair sur la carte, et non noyé dans la
   liste des caractéristiques. */
.card__volume {
	position: absolute;
	right: var(--sp-2);
	bottom: var(--sp-2);
	background: var(--sap-text, #7a4f12);
	color: #fff;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .02em;
	padding: .28rem .7rem;
	border-radius: 999px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.section--lots {
	background: linear-gradient(180deg, var(--surface, #f3e9d8) 0%, var(--paper, #fbf7ef) 100%);
	border-block: 1px solid var(--line);
}
.section--lots .section__head h2 { margin-bottom: var(--sp-2); }
.section--lots .section__head p { max-width: 58ch; color: var(--ink-soft); }
.section--lots .card { border-color: var(--sap, #c49a55); }

@media (max-width: 640px) {
	.card__volume { font-size: var(--fs-2xs); padding: .2rem .55rem; }
}


/* ---------- Produits vendus sur devis ---------- */
.price--devis { color: var(--forest); }
.product__devis { color: var(--ink-soft); margin: var(--sp-2) 0 var(--sp-4); max-width: 52ch; }
.product__devis-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); }