/* CuisineMax 1.10.0 : alertes prix.
 *
 * Le balisage utilise les classes de Bootstrap 5.2 chargé par le thème (modal-content,
 * modal-header, modal-body, form-control, form-check, input-group, btn, btn-check,
 * btn-close, alert, badge, card, row). Ce fichier ne fait que trois choses : reprendre la
 * charte du comparateur (orange des boutons marchands, Century Gothic, titres Koho, ombre
 * des cartes card-custom), teinter les états actifs de Bootstrap en orange au lieu du bleu,
 * et mettre en page ce que Bootstrap ne couvre pas (cloche, fenêtre <dialog>, assistant).
 *
 * La fenêtre d'alerte est un <dialog> natif : le JavaScript de Bootstrap n'est pas requis.
 *
 * Toutes les couleurs passent par les variables ci-dessous : à surcharger dans
 * « Custom CSS » pour un autre site (cavexcellence.com, par exemple).
 */
:root {
	--cmx-al-orange: #f07c00;        /* .cmxshop-button */
	--cmx-al-orange-fonce: #c96800;  /* survol */
	--cmx-al-orange-rgb: 240, 124, 0;
	--cmx-al-orange-clair: #fff4e6;
	--cmx-al-rouge: #ed1515;         /* .cmxshop-discount */
	--cmx-al-brun: #382107;          /* titres h3 du thème */
	--cmx-al-police: 'Century Gothic', CenturyGothic, Helvetica, Arial, sans-serif;
	--cmx-al-titres: Koho, 'Century Gothic', CenturyGothic, sans-serif;
	--cmx-al-ombre: 1px 2px 13px 0 #ccc; /* .card-custom */
}

/* ---------------------------------------------------------------------------
 * Bouton principal : même rendu que « Voir l'offre » (.cmxshop-button),
 * décliné avec les variables de bouton de Bootstrap 5.2.
 * ------------------------------------------------------------------------- */
.cmx-btn {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--cmx-al-orange);
	--bs-btn-border-color: var(--cmx-al-orange);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--cmx-al-orange-fonce);
	--bs-btn-hover-border-color: var(--cmx-al-orange-fonce);
	--bs-btn-focus-shadow-rgb: var(--cmx-al-orange-rgb);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--cmx-al-orange-fonce);
	--bs-btn-active-border-color: var(--cmx-al-orange-fonce);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--cmx-al-orange);
	--bs-btn-disabled-border-color: var(--cmx-al-orange);
	--bs-btn-font-family: var(--cmx-al-police);
	--bs-btn-font-weight: 700;
	--bs-btn-padding-y: .55rem;
	--bs-btn-padding-x: 1.25rem;
	--bs-btn-border-radius: 3px;
	min-height: 44px;
}
.cmx-btn[disabled] { cursor: wait; }

/* Teinte orange des contrôles Bootstrap, limitée aux blocs d'alerte. */
.cmx-alerte-dialog .form-control:focus, .cmx-bp .form-control:focus, .cmx-bp .form-select:focus,
.cmx-alerte-dialog .form-check-input:focus, .cmx-bp .form-check-input:focus {
	border-color: #f8be80;
	box-shadow: 0 0 0 .25rem rgba(var(--cmx-al-orange-rgb), .25);
}
.cmx-alerte-dialog .form-check-input:checked, .cmx-bp .form-check-input:checked {
	background-color: var(--cmx-al-orange);
	border-color: var(--cmx-al-orange);
}
.cmx-alerte-dialog .form-control, .cmx-bp .form-control, .cmx-bp .form-select { min-height: 44px; font-size: 1rem; }
.cmx-alerte-dialog .input-group, .cmx-bp .input-group { max-width: 14rem; }
.cmx-alerte-dialog .btn-link, .cmx-bp .btn-link { --bs-btn-color: #0a58ca; --bs-btn-hover-color: #084298; }

/* ---------------------------------------------------------------------------
 * Cloche sous les offres.
 *
 * Elle est imprimée dans le bloc des offres, que build/index.css remet à zéro :
 * « .cmxshop, .cmxshop * { font-size:18px; font-weight:400; color:rgba(0,0,0,.87);
 * margin:0; padding:0; text-decoration:none !important; … } » (spécificité 0,1,0).
 * Les règles ci-dessous, préfixées .cmxshop, pèsent davantage.
 * ------------------------------------------------------------------------- */
.cmx-alerte, .cmxshop .cmx-alerte { margin-top: .5rem; font-family: var(--cmx-al-police); font-size: .9375rem; line-height: 1.45; color: #212529; }
.cmxshop .cmx-alerte * { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
.cmx-alerte-cloche.btn, .cmxshop .cmx-alerte .cmx-alerte-cloche {
	--bs-btn-color: var(--cmx-al-orange-fonce);
	--bs-btn-hover-color: var(--cmx-al-brun);
	--bs-btn-active-color: var(--cmx-al-brun);
	--bs-btn-focus-shadow-rgb: var(--cmx-al-orange-rgb);
	display: flex; align-items: center; justify-content: center; gap: .5rem;
	width: 100%; min-height: 44px; padding: 0 .375rem;
	font-size: .875rem; font-weight: 600; line-height: 1.2;
	color: var(--bs-btn-color);
}
.cmxshop .cmx-alerte .cmx-alerte-cloche:hover { color: var(--bs-btn-hover-color); }
.cmx-alerte-cloche span, .cmxshop .cmx-alerte .cmx-alerte-cloche span { text-decoration: underline !important; text-underline-offset: 3px; }
.cmx-alerte-cloche svg { flex: none; }
.cmx-alerte-amp a.cmx-alerte-cloche { display: block; padding: .75rem 0; color: #c96800; font-weight: 600; font-size: .875rem; text-align: center; }

/* État mémorisé sous les offres : alert-warning (à confirmer) ou alert-success (active). */
.cmx-alerte-etat, .cmxshop .cmx-alerte .cmx-alerte-etat { border-radius: 0; font-size: .875rem; font-weight: 600; text-align: left; color: var(--bs-alert-color); }
.cmxshop .cmx-alerte .alert { padding: .5rem 1rem; }

/* ---------------------------------------------------------------------------
 * Fenêtre d'alerte (<dialog> en pied de page, hors du bloc .cmxshop)
 * ------------------------------------------------------------------------- */
.cmx-alerte-dialog {
	width: min(480px, calc(100% - 2rem));
	max-width: none; max-height: calc(100% - 2rem);
	padding: 0; border: 0; background: transparent; overflow: visible;
	color: #212529; font-family: var(--cmx-al-police);
	/* Variables que Bootstrap ne définit que sur .modal : la fenêtre n'en a pas besoin du JS. */
	--bs-modal-color: #212529;
	--bs-modal-bg: #fff;
	--bs-modal-border-color: rgba(0, 0, 0, .175);
	--bs-modal-border-width: 0;
	--bs-modal-border-radius: 0;
	--bs-modal-inner-border-radius: 0;
	--bs-modal-header-padding: 1rem 1.25rem .75rem;
	--bs-modal-header-border-color: #dee2e6;
	--bs-modal-header-border-width: 1px;
	--bs-modal-title-line-height: 1.3;
	--bs-modal-padding: 1.25rem;
}
.cmx-alerte-dialog .modal-content { background-color: #fff; color: #212529; }
.cmx-alerte-dialog::backdrop { background: rgba(0, 0, 0, .5); }
/* Navigateurs sans showModal() : même place, sans fond assombri natif. */
.cmx-alerte-dialog.cmx-sans-modal { position: fixed; inset: 0; z-index: 1060; margin: auto; height: fit-content; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5); }
html.cmx-alerte-ouverte { overflow: hidden; }

.cmx-alerte-dialog .modal-content {
	max-height: calc(100vh - 2rem); overflow-y: auto;
	border: 0; border-top: 4px solid var(--cmx-al-orange); border-radius: 0;
	box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .25);
	font-size: .9375rem; line-height: 1.45;
}
.cmx-alerte-dialog .modal-header { padding: 1rem 1.25rem .75rem; }
.cmx-alerte-dialog .modal-body { display: flex; flex-direction: column; gap: .75rem; padding: 1rem 1.25rem 1.25rem; }
.cmx-alerte-dialog .modal-body[hidden] { display: none; }
.cmx-alerte-titre { margin: 0 0 .15rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cmx-al-orange-fonce); }
.cmx-alerte-produit { font-family: var(--cmx-al-titres); font-size: 1.2rem; font-weight: 700; line-height: 1.25; color: var(--cmx-al-brun); }
.cmx-alerte-prix-actuel { margin-top: .2rem; font-size: .875rem; color: #495057; }
.cmx-alerte-label.form-label { margin-bottom: .25rem; font-weight: 600; font-size: .875rem; }
.cmx-alerte-options { display: flex; flex-direction: column; gap: .25rem; }
.cmx-alerte-options[hidden] { display: none; }
.cmx-alerte-radio.form-check { min-height: 2rem; display: flex; align-items: center; gap: .5rem; padding-left: 0; margin-bottom: 0; cursor: pointer; font-size: .9rem; }
.cmx-alerte-radio .form-check-input { float: none; margin: 0; flex: none; }
.cmx-alerte-liens { gap: 0 1rem; align-items: center; }
.cmx-alerte-lien.btn { padding: 0; min-height: 2.25rem; font-size: .85rem; font-weight: 600; text-align: left; text-decoration: underline; }
.cmx-alerte-lien[hidden] { display: none; }
.cmx-alerte-resume { font-size: .8125rem; }
.cmx-alerte-ok-titre { margin: 0; font-family: var(--cmx-al-titres); font-size: 1.15rem; font-weight: 700; color: var(--cmx-al-ok, #0a5c2e); }
.cmx-alerte-pot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Mobile : panneau qui monte du bas de l'écran, pouce à portée des boutons. */
@media (max-width: 575.98px) {
	.cmx-alerte-dialog { width: 100%; max-height: 92vh; margin: auto 0 0; }
	.cmx-alerte-dialog.cmx-sans-modal { inset: auto 0 0 0; }
	.cmx-alerte-dialog .modal-content { max-height: 92vh; border-radius: .75rem .75rem 0 0; }
	.cmx-alerte-dialog .cmx-alerte-envoyer { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
	.cmx-alerte-dialog[open] .modal-content { animation: cmx-al-entree .18s ease-out; }
	@keyframes cmx-al-entree { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* ---------------------------------------------------------------------------
 * Section « bon plan » (assistant en trois étapes)
 * ------------------------------------------------------------------------- */
.cmx-bp.card { margin: 2rem 0; box-shadow: var(--cmx-al-ombre); scroll-margin-top: 80px; font-family: var(--cmx-al-police); }
.cmx-bp .card-body { padding: 1.5rem; }
.cmx-bp-intro { display: flex; flex-direction: column; gap: .75rem; }
.cmx-bp-intro h2 { margin: 0; }
.cmx-bp-intro p, .cmx-bp-intro ul { margin: 0; color: #495057; }
.cmx-bp-retour { align-self: flex-start; font-size: .875rem; font-weight: 600; }
.cmx-bp-cadre { background: var(--cmx-al-orange-clair); border-color: #f3d2ad !important; }
.cmx-bp-etape { display: flex; flex-direction: column; gap: .6rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.cmx-bp-etape legend { float: none; width: auto; margin-bottom: .25rem; padding: 0; font-family: var(--cmx-al-titres); font-weight: 700; font-size: 1.25rem; line-height: 1.25; color: var(--cmx-al-brun); }
.cmx-bp-num { display: block; font-family: var(--cmx-al-police); font-size: .8rem; font-weight: 400; color: #6c757d; }
.cmx-bp .cmx-alerte-label.form-label { font-weight: 600; font-size: .875rem; }
.cmx-bp .cmx-alerte-radio.form-check { min-height: 2rem; display: flex; align-items: center; gap: .5rem; padding-left: 0; cursor: pointer; font-size: .9rem; }
.cmx-bp .cmx-alerte-radio .form-check-input { float: none; margin: 0; flex: none; }

/* Puces de sous-types : btn-check + btn-outline-secondary, cochées en orange. */
.cmx-bp-puce .btn {
	--bs-btn-font-size: .875rem;
	--bs-btn-font-weight: 600;
	--bs-btn-border-radius: 2rem;
	--bs-btn-bg: #fff;
	min-height: 40px; display: inline-flex; align-items: center;
}
.cmx-bp-puce .btn-check:checked + .btn {
	color: var(--cmx-al-brun); background-color: #ffe2c2; border-color: var(--cmx-al-orange);
}
.cmx-bp-puce .btn-check:focus-visible + .btn { box-shadow: 0 0 0 .25rem rgba(var(--cmx-al-orange-rgb), .35); }

.cmx-bp-synthese { font-size: .9375rem; }
.cmx-bp-nav .cmx-bp-suiv { flex: 2 1 0; }
.cmx-bp-nav .cmx-bp-prec { flex: 1 1 0; min-height: 44px; border-radius: 3px; }
.cmx-bp-ok { display: flex; flex-direction: column; gap: .6rem; }
.cmx-bp-ok h3, .cmx-bp-ok p { margin: 0; }
.cmx-bp .alert { border-radius: 0; font-size: .875rem; }

/* Sans JavaScript : tout le formulaire. Avec : une étape à la fois et une barre de progression. */
.cmx-bp-progres, .cmx-bp-prec { display: none; }
.cmx-js .cmx-bp-etape:not(.is-active) { display: none; }
.cmx-js .cmx-bp-progres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .375rem; }
.cmx-js .cmx-bp-progres span { height: 4px; background: #e9ecef; }
.cmx-js .cmx-bp-progres span.on { background: var(--cmx-al-orange); }
.cmx-js .cmx-bp-prec { display: block; }
.cmx-bp [hidden] { display: none !important; }

@media (max-width: 575.98px) {
	.cmx-bp.card { margin: 1.5rem 0; }
	.cmx-bp .card-body { padding: 1rem; }
}

/* ---------------------------------------------------------------------------
 * Liste des bons plans
 * ------------------------------------------------------------------------- */
.cmx-bp-grille { margin-top: 1rem; margin-bottom: 2rem; }
.cmx-bp-carte.card { padding-top: 1.75rem; box-shadow: var(--cmx-al-ombre); font-family: var(--cmx-al-police); }
.cmx-bp-carte h3 { font-family: var(--cmx-al-titres); color: var(--cmx-al-brun); }
.cmx-bp-pct.badge { position: absolute; top: 0; left: 0; padding: .35rem .7rem; background: var(--cmx-al-rouge); font-size: .95rem; }
.cmx-bp-global.badge { position: absolute; top: 0; right: 0; padding: .4rem .6rem; background: #212529; font-weight: 600; }
.cmx-bp-prix strong { font-size: 1.5rem; color: #222; }
.cmx-bp-vide { border-radius: 0; }

/* ---------------------------------------------------------------------------
 * Bons plans des flux : onglets par catégorie
 * ------------------------------------------------------------------------- */
.cmx-pf { margin: 1rem 0 2rem; font-family: var(--cmx-al-police); }
.cmx-pf-onglets { gap: .5rem; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; margin-bottom: .75rem; scrollbar-width: thin; }
.cmx-pf-onglets .nav-link {
	--bs-nav-link-color: #212529; --bs-nav-link-hover-color: var(--cmx-al-orange-fonce);
	--bs-nav-pills-link-active-bg: var(--cmx-al-orange); --bs-nav-pills-link-active-color: #fff;
	white-space: nowrap; border: 1px solid #ced4da; border-radius: 2rem; font-weight: 600; font-size: .9rem; min-height: 40px; background: #fff;
}
.cmx-pf-onglets .nav-link.active { border-color: var(--cmx-al-orange); }
.cmx-pf-onglets .nav-link:focus-visible { box-shadow: 0 0 0 .25rem rgba(var(--cmx-al-orange-rgb), .35); }
.cmx-pf-n { font-weight: 400; opacity: .75; }
.cmx-pf-mention { margin: 0 0 1rem; }
.cmx-pf-panneau { margin-bottom: 1.5rem; }
.cmx-pf-titre { margin: 1.5rem 0 .75rem; font-family: var(--cmx-al-titres); color: var(--cmx-al-brun); }
.cmx-pf-toutes { display: none; }
.cmx-pf.cmx-js .cmx-pf-toutes { display: block; }
.cmx-pf.cmx-js .cmx-pf-titre { display: none; }
.cmx-pf [hidden] { display: none !important; }
.cmx-pf-carte.card { position: relative; padding-top: 1.75rem; box-shadow: var(--cmx-al-ombre); }
.cmx-pf-verif.badge { position: absolute; top: 0; right: 0; padding: .4rem .6rem; background: var(--cmx-al-ok, #0a5c2e); font-weight: 600; }
.cmx-pf-img { display: flex; align-items: center; justify-content: center; height: 150px; padding: .5rem 1rem 0; }
.cmx-pf-img img { max-width: 100%; max-height: 140px; width: auto; height: auto; object-fit: contain; }
.cmx-pf-nom { margin: 0; font-size: 1rem; line-height: 1.3; font-weight: 700; color: var(--cmx-al-brun); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cmx-pf-prix strong { font-size: 1.4rem; color: #222; }
.cmx-pf-prix del { color: #6c757d; margin-left: .25rem; }
.cmx-pf-carte .cmx-btn { --bs-btn-font-size: .9rem; }

/* Pages de confirmation et de désinscription */
.cmx-alerte-page { max-width: 640px; margin: 48px auto; padding: 0 16px; font-family: var(--cmx-al-police); }
.cmx-alerte-page form { margin: 16px 0; }