/* ============================================================
   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 {
	background: radial-gradient(ellipse at center, rgba(40,30,15,.7) 0%, rgba(8,6,4,.92) 100%) !important;
	backdrop-filter: blur(14px) saturate(120%);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
}

/* ----- Modale : box-shadow premium + radius plus grand ----- */
dialog.cbdco-modal,
dialog.sp-eta-modal {
	color: #1a1a1a;
	background:
		radial-gradient(circle at 0% 0%, rgba(216,183,104,.05) 0%, transparent 40%),
		radial-gradient(circle at 100% 100%, rgba(160,124,44,.04) 0%, transparent 40%),
		linear-gradient(180deg, #ffffff 0%, #fffdf6 100%) !important;
	border: 1px solid rgba(216,183,104,.2) !important;
	border-radius: 20px !important;
	box-shadow:
		0 60px 120px rgba(0,0,0,.6),
		0 16px 40px rgba(0,0,0,.25),
		inset 0 1px 0 rgba(255,255,255,.8) !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 {
	background:
		radial-gradient(circle at 20% 50%, rgba(216,183,104,.22) 0%, transparent 50%),
		radial-gradient(circle at 80% 30%, rgba(160,124,44,.18) 0%, transparent 50%),
		linear-gradient(135deg, #0f0d08 0%, #2d2618 50%, #1a1308 100%) !important;
	background-size: 200% 200%, 200% 200%, 100% 100% !important;
	animation: cbdco-modal-bg-shift 14s ease-in-out infinite;
	border-bottom: 1px solid rgba(216,183,104,.25) !important;
	position: sticky; top: 0; z-index: 2;
	padding: 18px 22px !important;
	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;
	background-image: radial-gradient(circle, rgba(216,183,104,.5) 1px, transparent 1.5px);
	background-size: 38px 38px;
	opacity: .3;
	animation: cbdco-modal-stars 10s linear infinite;
}
.cbdco-modal__header::after,
.sp-eta-modal__head::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background-image: radial-gradient(circle, rgba(216,183,104,.4) 1px, transparent 1.5px);
	background-size: 22px 22px;
	opacity: .12;
	animation: cbdco-modal-stars 16s linear infinite reverse;
}
@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 h3 {
	margin: 0 !important;
	font-family: var(--font-display, 'Inter', sans-serif);
	font-size: 17px !important; font-weight: 700 !important;
	color: #faf3df !important;
	background: none !important;
	-webkit-background-clip: border-box !important; background-clip: border-box !important;
	-webkit-text-fill-color: #faf3df !important;
	letter-spacing: -.1px;
	text-shadow: 0 1px 0 rgba(0,0,0,.2);
}

/* 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: 36px !important; height: 36px !important;
	min-width: 36px !important; min-height: 36px !important;
	max-width: 36px !important; max-height: 36px !important;
	padding: 0 !important;
	flex: none !important;
	background: rgba(255,255,255,.08) !important;
	border: 1px solid rgba(255,255,255,.12) !important;
	border-radius: 50% !important;
	aspect-ratio: 1 / 1;
	color: rgba(245,240,227,.75) !important;
	cursor: pointer;
	transition: all .25s ease !important;
	font-size: 20px; line-height: 1;
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.cbdco-modal__close:hover,
.sp-eta-modal__close:hover {
	background: rgba(216,183,104,.2) !important;
	border-color: rgba(216,183,104,.5) !important;
	color: #faf3df !important;
	transform: rotate(90deg) scale(1.05);
}

/* ============================================================
   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 rgba(216,183,104,.18) !important;
	color: #1a1a1a;
}
dialog.sp-eta-modal .sp-eta-modal__card:hover {
	background: rgba(216,183,104,.06) !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: linear-gradient(135deg, #faf3df, #d8b768) !important;
	border: 1px solid #d8b768 !important;
	color: #1a1308 !important;
	box-shadow: 0 4px 12px rgba(216,183,104,.35) !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: rgba(216,183,104,.08) !important;
	border: 1px solid rgba(216,183,104,.25) !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: #a07c2c !important;
	color: #a07c2c !important;
	font-weight: 800 !important;
}

/* Scrollbar custom adaptée au fond clair */
dialog.sp-eta-modal .sp-eta-modal__inner::-webkit-scrollbar-thumb {
	background: rgba(216,183,104,.4) !important;
	border-color: transparent !important;
}

/* ============================================================
   Formulaire d'avis (cbdco-rev-modal) — texte sombre sur fond clair
   ============================================================ */
dialog.cbdco-rev-modal .cbdco-rev-form,
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: #a07c2c !important; -webkit-text-fill-color: #a07c2c !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: #d8b768 !important;
	box-shadow: 0 0 0 3px rgba(216,183,104,.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: #d8b768 !important; -webkit-text-fill-color: #d8b768 !important; }

/* Critères / fieldset legend / labels secondaires */
dialog.cbdco-rev-modal .cbdco-rev-criteria { border-color: rgba(216,183,104,.25) !important; }
dialog.cbdco-rev-modal .cbdco-rev-criteria legend { color: #a07c2c !important; -webkit-text-fill-color: #a07c2c !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: #d8b768 !important;
	background: rgba(216,183,104,.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(216,183,104,.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 h3 { 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; }