/* ============================================================
   CBDCO Modal — Design premium unifié pour TOUTES les modales du site.

   Conventions :
   - <dialog class="cbdco-modal sp-eta-modal …"> ou les anciens markups
     .sp-eta-modal restent compatibles : on stylise les deux.
   - Header doré animé (particules + gradient shift),
   - Close button rotatif backdrop-blur,
   - Backdrop avec blur intense,
   - Scrollbar dorée custom (déjà dans main.css pour sp-eta-modal),
   - 100% adapté mobile (slide-up depuis le bas, safe-area iOS).
   ============================================================ */

/* ----- Backdrop premium ----- */
dialog.cbdco-modal::backdrop,
dialog.sp-eta-modal::backdrop {
	/* Même voile que le panier latéral : un simple assombrissement.
	   Le dégradé radial vert + blur 14px donnait un fond très vert et coûtait
	   cher à composer (repaint plein écran à chaque ouverture). */
	background: rgba(3, 7, 3, 0.55) !important;
}

/* ----- Modale : box-shadow premium + radius plus grand ----- */
dialog.cbdco-modal,
dialog.sp-eta-modal {
	color: #1a1a1a;
	/* Blanc franc : le fond descendait vers #e8f0e8, ce qui verdissait toute
	   la modale. Bordure et ombre neutres, dans le style du reste du site. */
	background: #ffffff !important;
	border: 1px solid rgba(45, 74, 45, 0.16) !important;
	border-radius: 14px !important;
	box-shadow: 0 24px 60px rgba(20, 40, 24, 0.22) !important;
}
dialog.cbdco-modal .sp-eta-modal__inner,
dialog.sp-eta-modal .sp-eta-modal__inner { background: transparent; color: #1a1a1a; }

/* Animation de fermeture */
dialog.cbdco-modal.is-closing,
dialog.sp-eta-modal.is-closing {
	opacity: 0;
	transform: translate(-50%, -52%) scale(0.985);
	transition: opacity .22s ease-out, transform .22s ease-out;
}
dialog.cbdco-modal.is-closing::backdrop,
dialog.sp-eta-modal.is-closing::backdrop {
	background: rgba(0,0,0,0) !important;
	transition: background .22s ease-out;
}

/* Variants de largeur */
dialog.cbdco-modal--sm { width: min(440px, calc(100vw - 32px)); }
dialog.cbdco-modal--md { width: min(580px, calc(100vw - 32px)); }
dialog.cbdco-modal--lg { width: min(740px, calc(100vw - 32px)); }
dialog.cbdco-modal--xl { width: min(960px, calc(100vw - 32px)); }

/* ============================================================
   Header doré animé — appliqué à .cbdco-modal__header ET .sp-eta-modal__head
   ============================================================ */
.cbdco-modal__header,
.sp-eta-modal__head {
	/* Aplat crème du site. L'ancien en-tête empilait deux halos verts animés
	   + deux couches de particules : beaucoup trop chargé pour une popin
	   d'information. */
	background: #f5f0e8 !important;
	border-bottom: 1px solid var(--line, #d8d0c4) !important;
	position: sticky; top: 0; z-index: 2;
	/* En-tête plus compact, et titre + croix alignés sur la même ligne
	   médiane (le titre était calé en haut par rapport à la croix). */
	padding: 12px 16px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px;
	overflow: hidden;
}
@keyframes cbdco-modal-bg-shift {
	0%, 100% { background-position: 0% 50%, 100% 50%, 0 0; }
	50% { background-position: 100% 50%, 0% 50%, 0 0; }
}

/* Particules dorées dans le header */
.cbdco-modal__header::before,
.sp-eta-modal__head::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	display: none;
}
.cbdco-modal__header::after,
.sp-eta-modal__head::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	display: none;
}
@keyframes cbdco-modal-stars {
	from { transform: translate(0, 0); }
	to { transform: translate(-38px, -38px); }
}

/* Children au-dessus des particules */
.cbdco-modal__header > *,
.sp-eta-modal__head > * { position: relative; z-index: 1; }

/* Titre — texte solide cream pour lisibilité maximale sur le header foncé */
.cbdco-modal__title,
.sp-eta-modal__head .sp-eta-modal__title {
	margin: 0 !important;
	font-family: var(--font-display, 'Inter', sans-serif);
	font-size: 15px !important; font-weight: 700 !important;
	line-height: 1.2 !important;
	display: flex; align-items: center;
	color: var(--text) !important;
	background: none !important;
	-webkit-background-clip: border-box !important; background-clip: border-box !important;
	-webkit-text-fill-color: var(--text) !important;
	letter-spacing: -.1px;
}

/* Close button : cercle parfait + backdrop-blur + rotation */
.cbdco-modal__close,
.sp-eta-modal__close {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 30px !important; height: 30px !important;
	min-width: 30px !important; min-height: 30px !important;
	max-width: 30px !important; max-height: 30px !important;
	align-self: center !important;
	padding: 0 !important;
	flex: none !important;
	background: #ffffff !important;
	border: 1px solid var(--line, #d8d0c4) !important;
	border-radius: 50% !important;
	aspect-ratio: 1 / 1;
	color: var(--text-dim, #5a5a5a) !important;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, color .2s ease !important;
	font-size: 20px; line-height: 1;
}
.cbdco-modal__close:hover,
.sp-eta-modal__close:hover {
	background: var(--bg-2, #ede8df) !important;
	border-color: var(--line-2, #c6bcae) !important;
	color: var(--text, #1a1a1a) !important;
}

/* ============================================================
   Override des cards intérieures sp-eta-modal pour fond clair
   (l'ancien design était dark-on-dark, on flip en light)
   ============================================================ */
dialog.sp-eta-modal .sp-eta-modal__card {
	background: transparent;
	border-bottom: 1px solid var(--line, #d8d0c4) !important;
	color: #1a1a1a;
}
dialog.sp-eta-modal .sp-eta-modal__card:hover {
	background: var(--bg-1, #faf8f3) !important;
}
dialog.sp-eta-modal .sp-eta-modal__card:last-child { border-bottom: 0 !important; }
dialog.sp-eta-modal .sp-eta-modal__card-icon {
	background: #ffffff !important;
	border: 1px solid var(--line, #d8d0c4) !important;
	border-radius: 12px !important;
	color: var(--green, #2d4a2d) !important;
	box-shadow: none !important;
}
/* Force tous les textes du body en sombre — l'ancien design utilisait #fff partout */
dialog.sp-eta-modal .sp-eta-modal__card,
dialog.sp-eta-modal .sp-eta-modal__card-body,
dialog.sp-eta-modal .sp-eta-modal__card * { color: #000 !important; -webkit-text-fill-color: #000 !important; }
dialog.sp-eta-modal .sp-eta-modal__card-title,
dialog.sp-eta-modal .sp-eta-modal__card-title * {
	color: #000 !important;
	-webkit-text-fill-color: #000 !important;
	background: none !important;
	font-weight: 800 !important;
	font-size: 15px !important;
	letter-spacing: -.1px;
}
dialog.sp-eta-modal .sp-eta-modal__card-desc { color: #333 !important; -webkit-text-fill-color: #333 !important; }
dialog.sp-eta-modal .sp-eta-modal__note { color: #666 !important; -webkit-text-fill-color: #666 !important; opacity: 1 !important; }
dialog.sp-eta-modal .sp-eta-modal__card-eta {
	background: #ffffff !important;
	border: 1px solid var(--line, #d8d0c4) !important;
	color: #1a1a1a !important;
}
dialog.sp-eta-modal .sp-eta-modal__card-eta strong {
	background: none !important;
	-webkit-background-clip: border-box !important; background-clip: border-box !important;
	-webkit-text-fill-color: #2d4a2d !important;
	color: #2d4a2d !important;
	font-weight: 800 !important;
}

/* Scrollbar custom adaptée au fond clair */
dialog.sp-eta-modal .sp-eta-modal__inner::-webkit-scrollbar-thumb {
	background: var(--line-2, #c6bcae) !important;
	border-color: transparent !important;
}

/* ============================================================
   Formulaire d'avis (cbdco-rev-modal) — texte sombre sur fond clair
   ============================================================ */
dialog.cbdco-rev-modal .cbdco-rev-form { color: #1a1a1a !important; -webkit-text-fill-color: #1a1a1a !important; }
dialog.cbdco-rev-modal .cbdco-rev-field label { color: #1a1a1a !important; font-weight: 600 !important; }
dialog.cbdco-rev-modal .cbdco-rev-field label small,
dialog.cbdco-rev-modal .cbdco-rev-counter,
dialog.cbdco-rev-modal .cbdco-rev-toggle { color: #666 !important; -webkit-text-fill-color: #666 !important; }
dialog.cbdco-rev-modal .cbdco-rev-field .req { color: #2d4a2d !important; -webkit-text-fill-color: #2d4a2d !important; }

/* Inputs / textareas / selects sur fond clair */
dialog.cbdco-rev-modal .cbdco-rev-field input,
dialog.cbdco-rev-modal .cbdco-rev-field textarea,
dialog.cbdco-rev-modal .cbdco-rev-field select {
	background: #fff !important;
	border: 1.5px solid #e5e7eb !important;
	color: #1a1a1a !important;
	-webkit-text-fill-color: #1a1a1a !important;
}
dialog.cbdco-rev-modal .cbdco-rev-field input:focus,
dialog.cbdco-rev-modal .cbdco-rev-field textarea:focus,
dialog.cbdco-rev-modal .cbdco-rev-field select:focus {
	border-color: #7ab87a !important;
	box-shadow: 0 0 0 3px rgba(122,184,122,.15) !important;
}
dialog.cbdco-rev-modal .cbdco-rev-field input::placeholder,
dialog.cbdco-rev-modal .cbdco-rev-field textarea::placeholder { color: #9ca3af !important; -webkit-text-fill-color: #9ca3af !important; }

/* Étoiles : grises hors hover, dorées on/hover */
dialog.cbdco-rev-modal .cbdco-rev-star { color: #e5e7eb !important; -webkit-text-fill-color: #e5e7eb !important; }
dialog.cbdco-rev-modal .cbdco-rev-star:hover,
dialog.cbdco-rev-modal .cbdco-rev-star.is-on { color: var(--green) !important; -webkit-text-fill-color: var(--green) !important; }

/* Critères / fieldset legend / labels secondaires */
dialog.cbdco-rev-modal .cbdco-rev-criteria { border-color: rgba(122,184,122,.25) !important; }
dialog.cbdco-rev-modal .cbdco-rev-criteria legend { color: #2d4a2d !important; -webkit-text-fill-color: #2d4a2d !important; }
dialog.cbdco-rev-modal .cbdco-rev-crit-label { color: #1a1a1a !important; -webkit-text-fill-color: #1a1a1a !important; }

/* Dropzone (upload médias) */
dialog.cbdco-rev-modal .cbdco-rev-dropzone {
	background: #fafafa !important;
	border-color: #e5e7eb !important;
	color: #1a1a1a !important;
}
dialog.cbdco-rev-modal .cbdco-rev-dropzone__text { color: #555 !important; -webkit-text-fill-color: #555 !important; }
dialog.cbdco-rev-modal .cbdco-rev-dropzone:hover,
dialog.cbdco-rev-modal .cbdco-rev-dropzone.is-drag {
	border-color: #7ab87a !important;
	background: rgba(122,184,122,.06) !important;
}

/* Steps progress (1. Notation 2. Votre avis 3. Médias) */
dialog.cbdco-rev-modal [class*="step"],
dialog.cbdco-rev-modal [class*="progress"] { color: #555 !important; -webkit-text-fill-color: #555 !important; }
dialog.cbdco-rev-modal [class*="step"].is-active,
dialog.cbdco-rev-modal [class*="step"].is-current { color: #1a1a1a !important; -webkit-text-fill-color: #1a1a1a !important; font-weight: 700 !important; }

/* Note globale label / Cliquez pour noter */
dialog.cbdco-rev-modal .cbdco-rev-form p,
dialog.cbdco-rev-modal .cbdco-rev-form h4,
dialog.cbdco-rev-modal .cbdco-rev-form h3,
dialog.cbdco-rev-modal .cbdco-rev-form span:not(.cbdco-rev-star) { color: #1a1a1a !important; -webkit-text-fill-color: #1a1a1a !important; }

/* ============================================================
   Body & footer
   ============================================================ */
.cbdco-modal__body { padding: 22px; }
.cbdco-modal__footer {
	display: flex; align-items: center; justify-content: flex-end;
	gap: 10px;
	padding: 14px 22px;
	border-top: 1px solid rgba(122,184,122,.12);
	background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.25));
}

/* ============================================================
   Mobile — modale plein écran style quiz (full viewport)
   ============================================================ */
@media (max-width: 600px) {
	dialog.cbdco-modal,
	dialog.sp-eta-modal,
	dialog.cbdco-modal[open],
	dialog.sp-eta-modal[open] {
		position: fixed !important;
		inset: 0 !important;
		top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important;
		height: 100vh !important; max-height: 100vh !important; min-height: 100vh !important;
		height: 100dvh !important; max-height: 100dvh !important;
		border-radius: 0 !important;
		border: none !important;
		transform: none !important;
	}
	/* L'inner scrolle dans la pleine hauteur dispo */
	dialog.sp-eta-modal .sp-eta-modal__inner {
		max-height: none !important;
		height: 100% !important;
		min-height: 100% !important;
	}
	dialog.cbdco-modal[open],
	dialog.sp-eta-modal[open] {
		animation: cbdco-modal-slide-up .42s cubic-bezier(.2,.9,.3,1.1);
	}
	@keyframes cbdco-modal-slide-up {
		0%   { transform: translateY(100%); opacity: .8; }
		100% { transform: translateY(0); opacity: 1; }
	}
	dialog.cbdco-modal.is-closing,
	dialog.sp-eta-modal.is-closing {
		transform: translateY(100%) !important;
		transition: transform .25s ease-in, opacity .25s ease-in;
	}

	/* Safe-area top : repousse le header sous le notch / barre d'adresse mobile.
	   Comme la croix est un flex child du header, elle suit automatiquement. */
	.cbdco-modal__header,
	.sp-eta-modal__head { padding: calc(16px + env(safe-area-inset-top, 0px)) 18px 16px !important; }
	.cbdco-modal__title,
	.sp-eta-modal__head .sp-eta-modal__title { font-size: 16px !important; }
	.cbdco-modal__body { padding: 16px; }
	.cbdco-modal__footer {
		padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0));
		flex-wrap: wrap;
	}
	.cbdco-modal__footer button,
	.cbdco-modal__footer .button { flex: 1; min-width: 120px; }

	.sp-eta-modal__inner { padding-bottom: env(safe-area-inset-bottom, 0); }
}

/* Shake pour erreurs de validation (ex: variation non choisie) */
@keyframes cbdco-shake {
	0%, 100% { transform: translateX(0); }
	20%      { transform: translateX(-6px); }
	40%      { transform: translateX(6px); }
	60%      { transform: translateX(-3px); }
	80%      { transform: translateX(3px); }
}
.cbdco-shake { animation: cbdco-shake .55s ease; }