/* =========================================================
   Comptoir — Styles front
   Couleurs pilotées par variables (marque blanche)
   ========================================================= */
:root {
	--cq-primary: #b5651d;
	--cq-accent: #2e7d32;
	--cq-bg: #faf7f2;
	--cq-border: #e6ddd0;
	--cq-text: #33312e;
	--cq-radius: 10px;
	--cq-form-width: 820px;
	--cq-form-padding: 34px 42px;
	--cq-form-radius: var(--cq-radius);
}

.cq-form-wrapper {
	max-width: var(--cq-form-width);
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--cq-border);
	border-radius: var(--cq-form-radius);
	padding: var(--cq-form-padding);
	font-family: inherit;
	color: var(--cq-text);
}

.cq-form-title {
	margin: 0 0 20px;
	color: var(--cq-primary);
	font-size: 1.6rem;
}

/* Récapitulatif sélection */
.cq-cart-summary,
.cq-cart-block {
	background: var(--cq-bg);
	border-radius: var(--cq-radius);
	padding: 16px 20px;
	margin-bottom: 24px;
}
.cq-cart-summary h3 {
	margin: 0 0 10px;
	font-size: 1rem;
	color: var(--cq-primary);
}
.cq-cart-summary ul,
.cq-cart-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cq-cart-summary li,
.cq-cart-list li {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	border-bottom: 1px dashed var(--cq-border);
}
.cq-cart-summary li:last-child,
.cq-cart-list li:last-child {
	border-bottom: none;
}
.cq-item-qty {
	color: var(--cq-primary);
	font-weight: 600;
}

/* Champs */
.cq-field {
	margin-bottom: 16px;
}
.cq-field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 0.95rem;
}
.cq-field input,
.cq-field select,
.cq-field textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--cq-border);
	border-radius: 8px;
	font-size: 1rem;
	font-family: inherit;
	box-sizing: border-box;
	transition: border-color .15s ease;
}
.cq-field input:focus,
.cq-field select:focus,
.cq-field textarea:focus {
	outline: none;
	border-color: var(--cq-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cq-primary) 18%, transparent);
}
.cq-required {
	color: #c0392b;
}

/* Consentement */
.cq-consent label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-weight: 400;
	font-size: 0.9rem;
}
.cq-consent input {
	width: auto;
	margin-top: 3px;
}

/* Bouton */
.cq-form-actions {
	margin-top: 24px;
}
.cq-submit-btn {
	background: var(--cq-accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 14px 28px;
	font-size: 1.05rem;
	font-weight: 600;
	cursor: pointer;
	transition: filter .15s ease, transform .05s ease;
	width: 100%;
}
.cq-submit-btn:hover {
	filter: brightness(1.08);
}
.cq-submit-btn:active {
	transform: translateY(1px);
}
.cq-submit-btn:disabled {
	opacity: .6;
	cursor: not-allowed;
}

/* Messages */
.cq-form-message {
	margin-top: 16px;
	padding: 0;
}
.cq-form-message.cq-success {
	padding: 14px 18px;
	background: color-mix(in srgb, var(--cq-accent) 14%, #fff);
	border: 1px solid var(--cq-accent);
	border-radius: 8px;
	color: var(--cq-accent);
}
.cq-form-message.cq-error {
	padding: 14px 18px;
	background: #fdecea;
	border: 1px solid #e74c3c;
	border-radius: 8px;
	color: #c0392b;
}

.cq-on-quote {
	color: var(--cq-primary);
	font-weight: 600;
	font-style: italic;
}

.cq-from-price {
	color: var(--cq-primary);
	font-size: 0.85em;
	font-weight: 600;
	text-transform: lowercase;
}

/* Onglet compte */
.cq-account-quotes {
	width: 100%;
	border-collapse: collapse;
}
.cq-account-quotes th,
.cq-account-quotes td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--cq-border);
	text-align: left;
}
.cq-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 0.85rem;
	background: var(--cq-bg);
}
.cq-summary {
	white-space: pre-wrap;
	font-family: inherit;
	margin: 8px 0 0;
}

@media (max-width: 600px) {
	.cq-form-wrapper {
		padding: 20px;
	}
}

/* Panier modifiable côté client */
.cq-editable-list { list-style: none; margin: 0; padding: 0; }
.cq-editable-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px dashed var(--cq-border);
}
.cq-editable-item:last-child { border-bottom: none; }
.cq-editable-item .cq-item-name { flex: 1 1 10em; min-width: 0; }
.cq-qty-controls {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--cq-border);
	border-radius: 20px;
	padding: 2px 6px;
}
.cq-qty-btn {
	background: var(--cq-bg);
	border: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	color: var(--cq-primary);
	font-weight: 700;
}
.cq-qty-btn:hover { background: var(--cq-primary); color: #fff; }
.cq-editable-item .cq-item-qty { width: 3.4em; text-align: center; font-weight: 600; }
/* Quantités saisissables : un champ qui ressemble au chiffre qu'il remplace */
.cq-qty-val, .cq-editable-item .cq-item-qty {
	box-sizing: border-box; height: auto; margin: 0; padding: 4px 2px; border: 0; border-radius: 6px;
	background: transparent; color: inherit; font: inherit; font-weight: 600; text-align: center;
	-moz-appearance: textfield; appearance: textfield;
}
.cq-qty-val::-webkit-outer-spin-button, .cq-qty-val::-webkit-inner-spin-button,
.cq-item-qty::-webkit-outer-spin-button, .cq-item-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cq-qty-val:focus, .cq-editable-item .cq-item-qty:focus { outline: 2px solid var(--cq-primary); outline-offset: -2px; background: #fff; }
.cq-remove-item {
	background: none;
	border: none;
	color: #c0392b;
	font-size: 20px;
	cursor: pointer;
	line-height: 1;
	padding: 0 4px;
}
.cq-remove-item:hover { color: #e74c3c; }

/* Bloc estimation livraison / service */
.cq-delivery-block {
	background: var(--cq-bg);
	border-radius: var(--cq-radius);
	padding: 16px 20px;
	margin-bottom: 16px;
}
.cq-service-optin label { font-weight: 500; }
.cq-estimate { margin-top: 10px; }
.cq-estimate-hint { color: #888; font-style: italic; margin: 0; font-size: 0.9rem; }
.cq-estimate-lines { list-style: none; margin: 0; padding: 0; }
.cq-estimate-lines li {
	display: flex;
	justify-content: space-between;
	padding: 5px 0;
	border-bottom: 1px dashed var(--cq-border);
	font-size: 0.95rem;
}
.cq-estimate-cost { font-weight: 600; color: var(--cq-primary); }
.cq-estimate-total {
	display: flex;
	justify-content: space-between;
	padding-top: 8px;
	margin-top: 4px;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--cq-primary);
}
.cq-estimate-note { font-size: 0.78rem; color: #999; margin: 8px 0 0; }

/* Avis délai vente à emporter */
.cq-leadtime-notice {
	background: color-mix(in srgb, var(--cq-accent) 12%, #fff);
	border-left: 4px solid var(--cq-accent);
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 18px;
	font-size: 0.92rem;
}
.cq-leadtime-driver { color: #666; font-size: 0.85rem; }

/* Bouton payer & badge réglé (espace compte) */
.cq-pay-btn {
	background: var(--cq-accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 8px 14px;
	font-weight: 600;
	cursor: pointer;
	margin-top: 8px;
}
.cq-pay-btn:hover { filter: brightness(1.08); }
.cq-pay-btn:disabled { opacity: .6; cursor: default; }
.cq-paid-badge { color: var(--cq-accent); font-weight: 700; display: inline-block; margin-top: 8px; }

/* Sélecteur de créneaux Click & Collect */
.cq-slots-block { background: var(--cq-bg); border-radius: var(--cq-radius); padding: 16px 20px; margin-bottom: 16px; }
.cq-slots-title { margin: 0 0 12px; font-size: 1em; }
.cq-slots-empty { color: #999; font-style: italic; margin: 0; }
.cq-slots-days { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.cq-slot-daytab {
	background: #fff; border: 1px solid var(--cq-border); border-radius: 20px;
	padding: 6px 14px; cursor: pointer; font-size: 0.9em; transition: all .15s;
}
.cq-slot-day.is-active .cq-slot-daytab { background: var(--cq-primary); color: #fff; border-color: var(--cq-primary); }
.cq-slot-grid { display: none; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.cq-slot-grid.is-active { display: grid; }
.cq-slot {
	background: #fff; border: 1px solid var(--cq-border); border-radius: 8px;
	padding: 8px 4px; cursor: pointer; font-size: 0.9em; transition: all .12s; text-align: center;
}
.cq-slot:hover:not(.is-full) { border-color: var(--cq-primary); }
.cq-slot.is-selected { background: var(--cq-primary); color: #fff; border-color: var(--cq-primary); font-weight: 600; }
.cq-slot.is-full { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

/* ===== Carte Click & Collect ===== */
.cq-menu { margin: 0 0 24px; }

/* ===== Bandeau horaires =====
   Conçu d'abord pour le téléphone. Sept lignes d'horaires y répondaient à une
   question que le client ne se pose pas : la sienne est « je peux commander
   maintenant, et sinon quand ». Le bandeau y répond en une ligne, et garde la
   semaine entière à un doigt pour qui la cherche. */
.cq-hours-banner {
	background: var(--cq-bg);
	border-radius: var(--cq-radius);
	margin-bottom: 20px;
	overflow: hidden;
}

/* La ligne toujours visible. */
.cq-hours-sum {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	cursor: pointer;
	list-style: none;
	/* Une cible tactile confortable, même quand le texte est petit. */
	min-height: 48px;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}
.cq-hours-sum::-webkit-details-marker { display: none; }
.cq-hours-sum:focus-visible { outline: 2px solid var(--cq-primary); outline-offset: -2px; }

/* La pastille d'état : une forme et une couleur, lisibles d'un coup d'œil. */
.cq-hours-dot {
	flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
	background: #9e9e9e;
}
.is-open > .cq-hours-sum .cq-hours-dot { background: #2e7d32; box-shadow: 0 0 0 3px rgba(46, 125, 50, .18); }
.is-closed > .cq-hours-sum .cq-hours-dot { background: #c62828; box-shadow: 0 0 0 3px rgba(198, 40, 40, .15); }
.is-urgent > .cq-hours-sum .cq-hours-dot { background: #ef6c00; box-shadow: 0 0 0 3px rgba(239, 108, 0, .18); }

/* Le battement n'attire l'œil que lorsqu'il reste peu de temps. Il s'arrête
   pour qui a demandé moins d'animations. */
@media (prefers-reduced-motion: no-preference) {
	.is-urgent > .cq-hours-sum .cq-hours-dot { animation: cq-pulse 1.8s ease-in-out infinite; }
}
@keyframes cq-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(239, 108, 0, .18); }
	50%      { box-shadow: 0 0 0 7px rgba(239, 108, 0, .05); }
}

.cq-hours-now { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.cq-hours-now strong { font-size: 0.95em; }
.is-open > .cq-hours-sum .cq-hours-now strong { color: #1b5e20; }
.is-closed > .cq-hours-sum .cq-hours-now strong { color: #b71c1c; }
.is-urgent > .cq-hours-sum .cq-hours-now strong { color: #e65100; }
.cq-hours-next { font-size: 0.85em; color: #555; }

/* L'invitation à déplier, discrète mais explicite. */
.cq-hours-more { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; font-size: 0.8em; color: #666; }
.cq-hours-chev {
	width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); margin-top: -3px; transition: transform .18s ease;
}
.cq-hours-banner[open] .cq-hours-chev { transform: rotate(-135deg); margin-top: 2px; }

/* La semaine : deux colonnes, le jour aligné à gauche, l'horaire à droite.
   Sur un téléphone c'est lisible en diagonale, ce qu'une suite d'éléments
   repliés ne permettait pas. */
.cq-hours-list {
	list-style: none; margin: 0; padding: 0 14px 12px;
	display: grid; gap: 1px;
}
.cq-hours-day {
	display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
	font-size: 0.85em; color: #555;
	padding: 7px 10px; border-radius: 8px;
}
.cq-hours-dname { font-weight: 600; }
.cq-hours-dtime { font-variant-numeric: tabular-nums; text-align: right; }
.cq-hours-day.is-off .cq-hours-dtime { color: #999; }
.cq-hours-day.is-today {
	background: #fff; color: var(--cq-primary); font-weight: 700;
	box-shadow: inset 0 0 0 1px var(--cq-border);
}
.cq-hours-day.is-today .cq-hours-dtime { color: inherit; }

/* Sur un écran large, la ligne reste la même : une boutique annonce qu'elle
   est ouverte, pas son règlement intérieur. La semaine entière y est aussi
   à un clic — elle s'étale alors en sept colonnes, puisqu'il y a la place. */
@media (min-width: 720px) {
	.cq-hours-list { grid-template-columns: repeat(7, 1fr); gap: 4px; }
	.cq-hours-day { flex-direction: column; align-items: center; gap: 2px; text-align: center; }
	.cq-hours-dtime { text-align: center; font-size: 0.95em; }
}

/* Filtres catégories */
.cq-menu-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cq-filter {
	background: #fff; border: 1px solid var(--cq-border); border-radius: 20px;
	padding: 7px 16px; cursor: pointer; font-size: 0.9em; transition: all .15s;
}
.cq-filter:hover { border-color: var(--cq-primary); }
.cq-filter.is-active { background: var(--cq-primary); color: #fff; border-color: var(--cq-primary); }

/* Grille produits */
.cq-menu-grid { display: grid; grid-template-columns: repeat(var(--cq-cols, 3), 1fr); gap: 18px; }
.cq-product {
	background: #fff; border: 1px solid var(--cq-border); border-radius: var(--cq-radius);
	overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s;
}
.cq-product:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.cq-product-img img { width: 100%; height: 160px; object-fit: cover; display: block; }
.cq-product-body { padding: 14px 16px; display: flex; flex-direction: column; flex: 1; }
.cq-product-name { margin: 0 0 6px; font-size: 1.05em; }
.cq-product-desc { color: #666; font-size: 0.85em; margin: 0 0 12px; flex: 1; }

/* Variations (tailles) cliquables */
.cq-variations { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.cq-variation {
	flex: 1; min-width: 80px; background: #fff; border: 1px solid var(--cq-border);
	border-radius: 8px; padding: 8px 6px; cursor: pointer; font-size: 0.85em;
	display: flex; flex-direction: column; gap: 2px; align-items: center; transition: all .12s;
}
.cq-variation:hover { border-color: var(--cq-primary); }
.cq-variation.is-active { border-color: var(--cq-primary); background: color-mix(in srgb, var(--cq-primary) 8%, #fff); }
.cq-variation-price { font-weight: 700; color: var(--cq-primary); }

.cq-product-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.cq-product-price { font-size: 1.15em; font-weight: 700; color: var(--cq-primary); }
.cq-add {
	background: var(--cq-primary); color: #fff; border: none; border-radius: 8px;
	padding: 9px 18px; font-weight: 600; cursor: pointer; transition: filter .15s;
}

/* « flex: 1 » ne vit que dans la ligne « quantité + Ajouter », où il veut
   dire « prends la largeur qui reste ». Posé sur le bouton lui-même, il
   suivait l'axe du parent : enfant direct de la carte, qui est une colonne,
   le bouton se mettait à prendre la HAUTEUR qui restait. C'est le cas d'un
   produit à options, dont le bouton « Choisir » n'a pas de ligne autour de
   lui — il s'étirait sur la moitié de la carte. */
.cq-product-body > .cq-add,
.cq-variation-picker > .cq-add {
	/* Seul, le bouton prend la largeur comme le faisait la ligne, et se
	   colle au bas de la carte comme elle — mais garde sa hauteur. */
	width: 100%;
	margin-top: auto;
}
.cq-add:hover { filter: brightness(1.08); }
.cq-add.cq-added { background: var(--cq-accent); }
.cq-add:disabled { opacity: .6; cursor: default; }

@media (max-width: 900px) { .cq-menu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cq-menu-grid { grid-template-columns: 1fr; } }

/* Mini-panier flottant */
.cq-floating-cart {
	position: fixed; bottom: 20px; right: 20px; z-index: 9999;
	background: var(--cq-primary); color: #fff;
	border-radius: 50px; padding: 12px 20px;
	display: flex; align-items: center; gap: 14px;
	box-shadow: 0 6px 24px rgba(0,0,0,.25);
	transition: transform .2s, opacity .2s;
}
.cq-floating-cart[data-empty] { transform: translateY(120px); opacity: 0; pointer-events: none; }
.cq-fc-icon { font-size: 1.3rem; position: relative; }
.cq-fc-count {
	background: #fff; color: var(--cq-primary); border-radius: 50%;
	font-size: 0.75rem; font-weight: 700; padding: 1px 6px; margin-left: 2px;
}
.cq-fc-info { display: flex; flex-direction: column; line-height: 1.2; }
.cq-fc-label { font-size: 0.72rem; opacity: .85; }
.cq-fc-total { font-weight: 700; font-size: 1rem; }
.cq-fc-go {
	background: #fff; color: var(--cq-primary); border-radius: 30px;
	padding: 7px 16px; font-weight: 700; text-decoration: none; font-size: 0.9rem;
}
.cq-fc-go:hover { filter: brightness(.96); }

/* Choix de paiement C&C */
.cq-pay-choice { background: var(--cq-bg); border-radius: 8px; padding: 12px 14px; }
.cq-pay-note { color: #666; font-size: 0.88rem; font-style: italic; }

@media (max-width: 560px) {
	.cq-floating-cart { left: 16px; right: 16px; bottom: 16px; justify-content: space-between; }
}

/* Quantité sur la carte */
.cq-product-add-row { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.cq-qty {
	display: inline-flex; align-items: center; border: 1px solid var(--cq-border);
	border-radius: 8px; overflow: hidden;
}
.cq-qty button {
	background: #fff; border: none; width: 32px; height: 36px;
	font-size: 1.1rem; cursor: pointer; color: var(--cq-primary);
}
.cq-qty button:hover { background: var(--cq-bg); }
.cq-qty-val { width: 3.4em; min-width: 0; }
.cq-product-add-row .cq-add { flex: 1; }

/* Produit indisponible */
.cq-product.is-unavailable { opacity: .6; }
.cq-product.is-unavailable .cq-product-img { position: relative; }
.cq-badge-soldout {
	position: absolute; top: 10px; left: 10px;
	background: #b3261e; color: #fff; font-size: 0.75rem; font-weight: 700;
	padding: 4px 10px; border-radius: 20px;
}
.cq-add[disabled] { background: #bbb; cursor: not-allowed; }

/* Montant minimum */
.cq-min-amount { font-size: 0.85rem; color: var(--cq-primary); margin: 0 0 14px; font-weight: 600; }

/* ===== Sélecteur de point de retrait (multi-site) ===== */
.cq-store-selector { max-width: 640px; margin: 0 auto; }
.cq-store-title { text-align: center; margin-bottom: 20px; }
.cq-store-search { display: flex; gap: 8px; margin-bottom: 22px; }
.cq-store-search input[type="text"] {
	flex: 1; border: 1px solid var(--cq-border); border-radius: 8px; padding: 11px 14px;
}
.cq-store-search-btn {
	background: var(--cq-primary); color: #fff; border: none; border-radius: 8px;
	padding: 11px 18px; font-weight: 600; cursor: pointer;
}
.cq-store-list { display: flex; flex-direction: column; gap: 12px; }
.cq-store-card {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	border: 1px solid var(--cq-border); border-radius: 12px; padding: 18px 20px;
	transition: box-shadow .15s, border-color .15s;
}
.cq-store-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); border-color: var(--cq-primary); }
.cq-store-info h3 { margin: 0 0 4px; font-size: 1.1rem; }
.cq-store-addr, .cq-store-phone { margin: 2px 0; font-size: 0.88rem; color: #666; }
.cq-store-choose {
	background: var(--cq-primary); color: #fff; border-radius: 8px;
	padding: 10px 18px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.cq-store-choose:hover { filter: brightness(1.08); }

/* Barre du point sélectionné */
.cq-selected-store {
	display: flex; align-items: center; justify-content: space-between;
	background: var(--cq-bg); border-radius: 10px; padding: 12px 18px; margin-bottom: 18px;
}
.cq-change-store { color: var(--cq-primary); font-weight: 600; text-decoration: none; font-size: 0.9rem; }
.cq-change-store:hover { text-decoration: underline; }

@media (max-width: 560px) {
	.cq-store-card { flex-direction: column; align-items: flex-start; }
	.cq-store-choose { width: 100%; text-align: center; }
}

/* ===== Modale de personnalisation produit ===== */
.cq-opt-modal {
	position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.5);
	display: flex; align-items: center; justify-content: center; padding: 20px;
}
.cq-opt-modal[hidden] { display: none; }
.cq-opt-dialog {
	background: #fff; border-radius: 16px; max-width: 480px; width: 100%;
	max-height: 85vh; overflow-y: auto; padding: 24px; position: relative;
}
.cq-opt-close {
	position: absolute; top: 14px; right: 14px; background: var(--cq-bg);
	border: none; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 1rem;
}
.cq-opt-product { margin: 0 30px 18px 0; font-size: 1.25rem; }
.cq-opt-group { margin-bottom: 20px; }
.cq-opt-group.cq-opt-error { border-left: 3px solid #b3261e; padding-left: 10px; }
.cq-opt-group h4 { margin: 0 0 10px; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.cq-opt-req { font-size: 0.7rem; background: #ffebee; color: #b3261e; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.cq-opt-included { font-size: 0.7rem; background: #e8f5e9; color: #1b5e20; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.cq-opt-line {
	display: flex; align-items: center; justify-content: space-between;
	padding: 10px 12px; border: 1px solid var(--cq-border); border-radius: 10px;
	margin-bottom: 6px; cursor: pointer; transition: border-color .12s;
}
.cq-opt-line:hover { border-color: var(--cq-primary); }
.cq-opt-left { display: flex; align-items: center; gap: 10px; }
.cq-opt-price { color: var(--cq-primary); font-weight: 600; font-size: 0.9rem; }
.cq-opt-foot {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--cq-border);
}
.cq-opt-total { font-size: 1.3rem; font-weight: 700; color: var(--cq-primary); }
.cq-opt-confirm { flex: 1; max-width: 220px; }
/* Le pied porte trois choses : le total, le nombre d'exemplaires, le bouton.
   Le total prend la place qui reste pour que les deux autres restent
   groupés à droite. */
.cq-opt-total { flex: 1; }
.cq-opt-cart-qty { flex: 0 0 auto; }
@media (max-width: 480px) {
	.cq-opt-foot { flex-wrap: wrap; }
	.cq-opt-total { flex: 1 0 100%; }
	.cq-opt-confirm { max-width: none; }
}

/* ===== Espace client : fidélité ===== */
.cq-loyalty-notice { padding: 14px 18px; border-radius: 10px; margin-bottom: 20px; }
.cq-loyalty-notice.cq-success { background: #e8f5e9; color: #1b5e20; }
.cq-loyalty-notice.cq-error { background: #ffebee; color: #b71c1c; }
.cq-loyalty-balance {
	text-align: center; padding: 24px; background: var(--cq-bg); border-radius: 16px; margin-bottom: 20px;
}
.cq-loyalty-points { font-size: 2.6rem; font-weight: 800; color: var(--cq-primary); }
.cq-loyalty-unit { font-size: 1.1rem; color: #666; }
.cq-loyalty-progress { margin-bottom: 24px; }
.cq-loyalty-progress-bar {
	height: 14px; background: var(--cq-border); border-radius: 10px; overflow: hidden; margin-bottom: 8px;
}
.cq-loyalty-progress-bar span { display: block; height: 100%; background: var(--cq-primary); border-radius: 10px; transition: width .4s; }
.cq-loyalty-progress p { text-align: center; color: #555; margin: 0; font-size: 0.92rem; }
.cq-rewards-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.cq-reward-card {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	border: 1px solid var(--cq-border); border-radius: 12px; padding: 14px 18px;
}
.cq-reward-card.is-locked { opacity: .55; }
.cq-reward-info { display: flex; flex-direction: column; }
.cq-reward-desc { font-size: 0.85rem; color: var(--cq-primary); font-weight: 600; }
.cq-reward-action { display: flex; align-items: center; gap: 12px; }
.cq-reward-cost { font-weight: 700; font-size: 0.9rem; }
.cq-reward-btn {
	background: var(--cq-primary); color: #fff; border-radius: 8px; padding: 8px 16px;
	text-decoration: none; font-weight: 600; font-size: 0.88rem;
}
.cq-reward-btn:hover { filter: brightness(1.08); }
.cq-loyalty-history { width: 100%; border-collapse: collapse; }
.cq-loyalty-history td { padding: 9px 12px; border-bottom: 1px solid var(--cq-border); font-size: 0.9rem; }
.cq-loyalty-history .cq-pos { color: #2e7d32; font-weight: 700; text-align: right; }
.cq-loyalty-history .cq-neg { color: #b3261e; font-weight: 700; text-align: right; }

/* Niveau VIP + parrainage (espace client) */
.cq-vip-badge {
	background: linear-gradient(135deg, #f6d365, #fda085); color: #5a3a00;
	border-radius: 12px; padding: 12px 18px; font-weight: 700; margin-bottom: 12px;
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cq-vip-perk { font-weight: 500; font-size: 0.85rem; background: rgba(255,255,255,.5); padding: 2px 10px; border-radius: 20px; }
.cq-vip-next { text-align: center; color: #777; font-size: 0.88rem; margin: 0 0 16px; }
.cq-referral-box {
	background: var(--cq-bg); border-radius: 12px; padding: 18px; text-align: center;
}
.cq-referral-code {
	font-size: 1.5rem; font-weight: 800; letter-spacing: 3px; color: var(--cq-primary);
	background: #fff; border: 2px dashed var(--cq-primary); border-radius: 10px;
	padding: 12px; margin: 12px 0; user-select: all;
}
.cq-referral-bonus { font-size: 0.88rem; color: #555; margin: 0; }
.cq-referral-field input { width: 100%; }

/* Allergènes sur la carte */
.cq-product-allergens { font-size: 0.78rem; color: #8a6d00; background: #fff8e1; border-radius: 6px; padding: 4px 8px; margin: 0 0 10px; }
.cq-product-allergens span { font-weight: 600; }

/* Champ case à cocher inline */
.cq-field-checkbox .cq-checkbox-inline { display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* ===== Formulaire multi-étapes ===== */
.cq-steps-bar { display: flex; justify-content: space-between; margin-bottom: 24px; position: relative; }
.cq-steps-bar::before {
	content: ''; position: absolute; top: 16px; left: 0; right: 0; height: 2px;
	background: var(--cq-border); z-index: 0;
}
.cq-step-dot { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.cq-step-num {
	width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 2px solid var(--cq-border);
	display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--cq-border);
	transition: all .2s;
}
.cq-step-dot.is-active .cq-step-num { border-color: var(--cq-primary); color: var(--cq-primary); }
.cq-step-dot.is-done .cq-step-num { background: var(--cq-primary); border-color: var(--cq-primary); color: #fff; }
.cq-step-label { font-size: 0.78rem; color: var(--cq-muted, #666); text-align: center; }
.cq-step-dot.is-active .cq-step-label { color: var(--cq-primary); font-weight: 600; }
.cq-steps-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.cq-step-prev, .cq-step-next {
	padding: 10px 20px; border-radius: 8px; border: 1px solid var(--cq-primary); cursor: pointer;
	font-weight: 600; background: #fff; color: var(--cq-primary);
}
.cq-step-next { margin-left: auto; background: var(--cq-primary); color: #fff; }

/* Menu du jour : badge des jours */
.cq-product-days { font-size: 0.78rem; color: #1e5c8a; background: #e8f2fb; border-radius: 6px; padding: 4px 8px; margin: 0 0 10px; }
.cq-product-days.cq-days-notoday { color: #7a5200; background: #fff3d6; }

/* Code promo */
.cq-promo { margin: 16px 0; padding: 14px; background: #faf8f5; border-radius: 10px; }
.cq-promo label { font-weight: 600; font-size: 0.85rem; display: block; margin-bottom: 6px; }
.cq-promo-row { display: flex; gap: 8px; }
.cq-promo-row input { flex: 1; padding: 9px 12px; border: 1px solid var(--cq-border, #ddd); border-radius: 8px; text-transform: uppercase; }
.cq-promo-apply, .cq-promo-remove {
	padding: 9px 16px; border-radius: 8px; border: 1px solid var(--cq-primary); background: #fff;
	color: var(--cq-primary); font-weight: 600; cursor: pointer;
}
.cq-promo-applied { margin: 0; display: flex; align-items: center; gap: 10px; font-weight: 600; }
.cq-promo-remove { padding: 4px 10px; font-size: 0.8rem; }
.cq-promo-msg { margin: 8px 0 0; font-size: 0.85rem; min-height: 1em; }

/* Bandeau mode pause */
.cq-paused-banner {
	background: #fff8e1; border: 1px solid #f3e2ad; border-radius: 12px;
	padding: 22px 20px; text-align: center; font-size: 1.05rem; font-weight: 600; color: #7a5200;
}

/* Bouton Commander flottant */
.cq-float-btn {
	position: fixed; right: 24px; bottom: 24px; z-index: 9999;
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--cq-primary, #b5651d); color: #fff !important;
	padding: 18px 30px; border-radius: 999px; font-weight: 700; font-size: 1.2rem;
	line-height: 1; text-decoration: none; box-shadow: 0 6px 22px rgba(0,0,0,.28);
	transition: transform .15s ease, box-shadow .15s ease;
}
.cq-float-btn:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 8px 26px rgba(0,0,0,.32); }
.cq-float-btn:active { transform: translateY(0); }
@media (max-width: 600px) {
	.cq-float-btn { right: 16px; bottom: 16px; padding: 16px 26px; font-size: 1.1rem; }
}

/* Instructions par article */
.cq-item-note {
	width: 100%; box-sizing: border-box; margin-top: 6px; padding: 7px 10px;
	font-size: 0.82rem; border: 1px dashed var(--cq-border, #d5d0c8); border-radius: 8px; background: #fffdf8;
}
.cq-item-note:focus { border-style: solid; outline: none; border-color: var(--cq-primary, #b5651d); }

/* Suggestions au panier */
.cq-upsell { margin: 16px 0; padding: 14px; background: #f6f9f4; border: 1px solid #dbe8d4; border-radius: 10px; }
.cq-upsell-title { margin: 0 0 10px; font-weight: 700; font-size: 0.9rem; }
.cq-upsell-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.cq-upsell-name { flex: 1; font-size: 0.9rem; }
.cq-upsell-price { font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
.cq-upsell-add {
	border: 1px solid var(--cq-accent, #2e7d32); color: var(--cq-accent, #2e7d32); background: #fff;
	border-radius: 8px; padding: 6px 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.cq-upsell-add:hover { background: var(--cq-accent, #2e7d32); color: #fff; }

/* Reprendre la dernière commande */
.cq-reorder {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	margin: 0 0 16px; padding: 14px 16px; background: #f0f6fb; border: 1px solid #cfe3f3; border-radius: 10px;
}
.cq-reorder-text { flex: 1; min-width: 200px; font-size: 0.92rem; }
.cq-reorder-items { color: #5b7186; font-size: 0.85rem; }
.cq-reorder-btn {
	background: var(--cq-primary, #b5651d); color: #fff; border: none; border-radius: 10px;
	padding: 11px 18px; font-weight: 700; cursor: pointer; min-height: 44px;
}
.cq-reorder-btn:disabled { opacity: .6; }
.cq-reorder-msg { width: 100%; font-size: 0.85rem; font-weight: 600; color: #2e7d32; }
.cq-reorder-msg:empty { display: none; }

/* Badge Formule */
.cq-product-formula { display: inline-block; font-size: 0.75rem; font-weight: 700; color: #5b3a86; background: #f0eafa; border-radius: 6px; padding: 3px 8px; margin: 0 0 8px; }

/* Menus à prix rond : remise détectée */
.cq-deal-notice {
	margin: 0 0 10px; padding: 11px 14px; background: #eef8ee; border: 1px solid #cde5cd;
	border-radius: 10px; font-weight: 700; font-size: 0.92rem; color: #1e5e22;
}

/* Réservation de table */
.cq-resa { max-width: 560px; }
.cq-resa .cq-resa-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.cq-resa label { display: block; font-weight: 600; font-size: 0.88rem; }
.cq-resa input, .cq-resa select { width: 100%; padding: 11px 12px; border: 1px solid #ddd9d1; border-radius: 10px; font-size: 15px; margin-top: 5px; box-sizing: border-box; }
.cq-resa-svc { margin: 10px 0; }
.cq-resa-slot-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cq-resa-slot { padding: 8px 12px; border: 1px solid var(--cq-primary, #b5651d); background: #fff; color: var(--cq-primary, #b5651d); border-radius: 8px; font-weight: 600; cursor: pointer; }
.cq-resa-slot.is-picked, .cq-resa-slot:hover { background: var(--cq-primary, #b5651d); color: #fff; }
.cq-resa-chosen { font-weight: 700; margin: 4px 0 10px; padding: 10px 12px; background: #f6f9f4; border-radius: 8px; }
.cq-resa-submit { background: var(--cq-primary, #b5651d); color: #fff; border: none; border-radius: 10px; padding: 13px 18px; font-weight: 700; cursor: pointer; margin-top: 10px; }
.cq-resa-msg { font-weight: 600; margin-top: 8px; }

/* Options : rupture, minimum, quantité par option */
.cq-opt-line.cq-opt-soldout { opacity: .5; cursor: not-allowed; }
.cq-opt-line.cq-opt-soldout input { cursor: not-allowed; }
.cq-opt-soldout-tag { font-size: 0.72rem; font-weight: 700; color: #b3261e; background: #fdecea; border-radius: 5px; padding: 1px 6px; margin-left: 6px; text-transform: uppercase; }
.cq-opt-min { font-size: 0.72rem; font-weight: 600; color: #5b7186; background: #eef3f8; border-radius: 5px; padding: 1px 6px; margin-left: 4px; }
.cq-opt-right { display: inline-flex; align-items: center; gap: 10px; }
.cq-opt-qty { display: inline-flex; align-items: center; gap: 8px; }
.cq-opt-qty button { width: 26px; height: 26px; border: 1px solid var(--cq-primary, #b5651d); background: #fff; color: var(--cq-primary, #b5651d); border-radius: 6px; font-weight: 700; cursor: pointer; line-height: 1; }
.cq-opt-qval { min-width: 18px; text-align: center; font-weight: 700; }

/* Options (admin) : cases quantité et rupture */
.comptoir-option-flag { font-size: 12px; white-space: nowrap; margin: 0 4px; color: #50575e; }

/* Boutique : recherche instantanée */
.cq-menu-search { position: relative; margin: 0 0 14px; }
.cq-search-input {
	width: 100%; box-sizing: border-box; padding: 13px 40px 13px 16px;
	border: 1px solid var(--cq-border); border-radius: 999px;
	font-size: 1em; font-family: inherit; background: #fff; color: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.cq-search-input:focus {
	outline: none; border-color: var(--cq-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cq-primary) 18%, transparent);
}
.cq-search-input::-webkit-search-cancel-button { display: none; }
.cq-search-clear {
	position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
	width: 30px; height: 30px; border: 0; border-radius: 50%;
	background: transparent; color: #8a877f; font-size: 22px; line-height: 1;
	cursor: pointer;
}
.cq-search-clear:hover { background: #f0efec; color: #33312e; }
.cq-search-count { margin: -6px 0 12px; font-size: .9rem; color: #6b6862; }
@media (max-width: 600px) {
	.cq-search-input { font-size: 16px; } /* évite le zoom auto sur iPhone */
}

/* Sélecteur de déclinaisons posé hors de la carte : sur une fiche produit
   ou dans une mise en page Elementor. Il reprend les styles des variations
   sans la mise en carte, qui n'aurait pas de sens isolée. */
.cq-variation-picker { margin: 12px 0; }
.cq-variation-picker .cq-product-add-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Un produit seul, hors de la grille de la boutique. Il reprend tous les
   réglages de « Ma page boutique » — c'est la classe .cq-menu qui les porte —
   mais s'étale au lieu de tenir dans une colonne. */
/* ===== Fiche d'un produit seul =====
   Une fiche n'est pas une carte de grille élargie. Sur une carte, tout est
   serré pour que douze produits tiennent côte à côte ; ici il n'y en a qu'un,
   et la question du visiteur n'est plus « lequel » mais « celui-ci, oui ou
   non ». La mise en page suit cette question en trois temps : ce que c'est,
   ce qu'il y a dedans, ce qu'on en fait.

   Les couleurs et la police viennent du thème du commerçant, jamais d'ici :
   une extension qui impose sa palette jure sur le site suivant. Le caractère
   de la fiche tient donc à la structure et aux proportions. */
.cq-solo { max-width: 960px; }
.cq-solo .cq-product {
	border: 0; box-shadow: none; background: transparent;
	display: grid; gap: clamp(20px, 4vw, 34px);
}

/* La photo porte l'appétit : c'est le seul élément auquel on donne de la
   voix. Un cadre de proportion fixe évite qu'une photo verticale pousse le
   bouton hors de l'écran, et qu'une photo large laisse un vide sous elle. */
.cq-solo .cq-product-img {
	margin: 0; border-radius: calc(var(--cq-radius) * 1.4); overflow: hidden;
	aspect-ratio: 16 / 10; background: var(--cq-bg);
	/* Un filet plutôt qu'une ombre portée : il délimite sans salir le fond
	   du thème, et tient sur un fond clair comme sur un fond sombre. */
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
}
.cq-solo .cq-product-img img {
	width: 100%; height: 100%; max-height: none; object-fit: cover; display: block;
}

.cq-solo .cq-product-body { padding: 0; display: block; }

/* 1. Ce que c'est. */
.cq-solo .cq-product-name {
	margin: 0 0 2px; font-size: clamp(1.5em, 1.2em + 1.2vw, 2em);
	line-height: 1.15; letter-spacing: -0.015em;
}
.cq-solo .cq-product-name a { text-decoration: none; color: inherit; }

/* Le prix se lit comme un prix : chiffres de même chasse, posé juste sous le
   nom, assez présent pour répondre sans crier. */
.cq-solo .cq-product-foot {
	display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px;
	margin: 0 0 16px; padding: 0 0 16px;
	border-bottom: 1px solid var(--cq-border);
}
.cq-solo .cq-product-price {
	font-size: 1.5em; font-weight: 700; font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

/* 2. Ce qu'il y a dedans. Moins de quatre-vingts signes par ligne : au-delà,
   l'œil perd le début de la ligne suivante. */
.cq-solo .cq-product-desc {
	font-size: 1.02em; line-height: 1.65; color: #444;
	max-width: 62ch; margin: 0 0 18px;
}
.cq-solo .cq-product-desc p { margin: 0 0 .8em; }
.cq-solo .cq-product-desc p:last-child { margin-bottom: 0; }

/* Les mentions utiles restent lisibles sans devenir des pastilles : sur une
   fiche, une rangée de badges colorés concurrence la photo pour rien. */
.cq-solo .cq-product-allergens,
.cq-solo .cq-product-days,
.cq-solo .cq-product-formula {
	margin: 0 0 8px; padding: 0; font-size: .9em;
	background: none; border: 0; border-radius: 0;
}
.cq-solo .cq-product-allergens { color: #6b6761; }
.cq-solo .cq-product-allergens span { font-weight: 600; color: inherit; }

/* 3. Ce qu'on en fait. L'espace au-dessus dit que la séquence se termine. */
.cq-solo .cq-product-add-row,
.cq-solo .cq-product-body > .cq-add,
.cq-solo .cq-variations { margin-top: 22px; }
.cq-solo .cq-product-body > .cq-add,
.cq-solo .cq-product-add-row .cq-add {
	min-height: 52px; font-size: 1.02em; border-radius: calc(var(--cq-radius) * 0.9);
}
.cq-solo .cq-qty { min-height: 52px; }
.cq-solo .cq-qty button { height: 50px; width: 42px; }

/* Indisponible : une ligne honnête, pas une pastille posée sur la photo. */
.cq-solo .cq-badge-soldout {
	position: static; display: inline-block; margin: 0 0 10px;
}

.cq-solo-vide { padding: 10px 12px; border-left: 3px solid #c8a24a; background: #fdf8ec; font-size: 13.5px; }

/* Deux colonnes dès qu'il y a la place pour une photo généreuse ET une
   colonne de texte lisible. En dessous, empiler vaut mieux que serrer. */
@media (min-width: 760px) {
	.cq-solo .cq-product {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		align-items: start;
	}
	.cq-solo .cq-product-img { aspect-ratio: 1 / 1; max-height: 560px; }
}
.cq-solo .cq-product.cq-no-img { display: block; }
.cq-soldout-line { position: static; display: inline-block; margin: 0 0 8px; }

/* Toute la carte mène à la fiche produit.
   Un seul lien dans le code — celui du titre — dont on étire la zone
   cliquable sur la carte entière. C'est préférable à un lien qui
   envelopperait tout : un lecteur d'écran annoncerait alors la description,
   le prix et les boutons comme faisant partie de l'intitulé du lien.
   Les commandes repassent au-dessus de cette zone, sinon un clic sur
   « Ajouter » deviendrait une navigation. */
.cq-product { position: relative; }
.cq-product-link { color: inherit; text-decoration: none; }
.cq-product-link:hover { text-decoration: underline; }
.cq-product-link::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
}
.cq-product-img { overflow: hidden; }
.cq-product-img img { transition: transform .25s ease; }
.cq-product:hover .cq-product-img img { transform: scale(1.03); }

/* La deuxième photo, au survol.

   Elle se superpose à la première au lieu de la remplacer : échanger la
   source ferait sauter la carte le temps du chargement, et vaciller toute
   la grille avec elle.

   Deux gardes. Le survol d'abord : sur un écran tactile il n'existe pas
   vraiment — le navigateur le simule au premier appui — et la photo
   resterait collée après le doigt. Le mouvement ensuite : qui a demandé
   moins d'animations obtient l'échange sec, sans fondu. */
.cq-product-img.has-second { position: relative; }
.cq-product-img.has-second .cq-product-img2 {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .3s ease, transform .25s ease;
	pointer-events: none;
}

@media (hover: hover) {
	.cq-product:hover .cq-product-img.has-second .cq-product-img2 { opacity: 1; }
	/* Le zoom s'applique aux deux, sinon la photo du dessous grandirait
	   seule sous celle du dessus. */
	.cq-product:hover .cq-product-img.has-second .cq-product-img2 { transform: scale(1.03); }
}

/* Au clavier, la carte se parcourt par ses liens : le survol ne vient
   jamais. On fait donc la même chose quand le focus y entre — mais
   « :focus-visible » et non « :focus-within ».

   La différence se voit sur un téléphone, et je ne l'ai vue qu'en essayant :
   appuyer sur le nom du produit lui donne le focus, et la photo restait
   collée après le doigt, exactement ce que le garde du survol évitait.
   « :focus-visible » ne se déclenche pas sur un appui, seulement sur une
   navigation au clavier. Un navigateur qui ne connaît pas « :has() » perd
   simplement la révélation au clavier : rien ne casse. */
.cq-product:has(:focus-visible) .cq-product-img.has-second .cq-product-img2 {
	opacity: 1; transform: scale(1.03);
}

/* La vidéo de survol. Même principe que la deuxième photo : elle se pose
   par-dessus, et la photo reste visible dessous tant qu'elle n'est pas
   prête — un fond noir le temps du chargement ferait clignoter la grille.

   C'est le JavaScript qui pose « is-playing », et seulement une fois la
   lecture lancée. Sans lui — navigateur sans JS, vidéo illisible — la carte
   se comporte comme avant, et rien ne manque. */
.cq-product-img.has-video { position: relative; }
.cq-product-img.has-video .cq-product-video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}
.cq-product-img.has-video .cq-product-video.is-playing { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	/* Une vidéo en boucle est exactement ce que ce réglage veut éviter. Le
	   script ne la lance pas ; la règle ci-dessous est la ceinture. */
	.cq-product-img.has-video .cq-product-video { display: none; }
	.cq-product-img img,
	.cq-product-img.has-second .cq-product-img2 { transition: none; }
	.cq-product:hover .cq-product-img img,
	.cq-product:hover .cq-product-img.has-second .cq-product-img2 { transform: none; }
}

/* Tout ce sur quoi on doit pouvoir cliquer sans quitter la page. */
.cq-product-add-row,
.cq-product .cq-add,
.cq-product .cq-variations,
.cq-product .cq-qty {
	position: relative;
	z-index: 2;
}
/* Le panneau d'options vit dans la carte mais couvre l'écran : il garde son
   position:fixed, sinon il redeviendrait un bloc coincé dans la carte. */
.cq-product .cq-opt-modal { z-index: 10000; }
@media (max-width: 600px) {
	.cq-qty-val, .cq-editable-item .cq-item-qty { font-size: 16px; } /* pas de zoom auto sur iPhone */
}
.cq-estimate-place { margin: 0 0 8px; }
.cq-estimate-warn { color: #9f1114; font-style: normal; }

/* Une seule ligne ([comptoir_carte ligne="yes"]) : sur petit écran, la ligne
   défile au doigt au lieu de s'empiler en colonne. */
@media (max-width: 900px) {
	.cq-menu-row {
		grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(240px, 72%);
		overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin;
	}
	.cq-menu-row > .cq-product { scroll-snap-align: start; }
}
@media (min-width: 561px) and (max-width: 900px) {
	.cq-menu-row { grid-auto-columns: minmax(240px, 42%); }
}