/**
 * Cokitec : configurateur aux couleurs et au style du thème « cokitec » (GDM-Pixel, enfant de hummingbird).
 * Chargé en dernier par cvjqueryext (priorité 900) ; seules les surcharges propres au site vont ici.
 * Jetons repris du thème : --orange #f06449, --orange-pale #fdeae5, --encre #1f2226, --brume #f3f4f6,
 * --trait #dde0e4, --gris #5f6368, --titre (Outfit), --r-bouton .625rem, --r-petit .375rem, --r-bloc .875rem,
 * --marge, --doux. Les !important répondent à ceux des feuilles du module (cvjqueryext.css, jquery.configurateurvisuel.css).
 */

/* ---------- Gabarit : même largeur et mêmes marges que les blocs .cadre de la fiche ---------- */
#cvjqueryext {
	/* flow-root : contient les colonnes flottantes du designer ; sans lui le bloc fait ~70 px de haut et la
	   section suivante du thème (section.promesses > .cadre, position relative) passe par-dessus et capte les clics */
	display: flow-root;
	box-sizing: border-box;
	max-width: 1320px;
	margin: 0 auto;
	padding: 22px var(--marge, 24px) clamp(36px, 4vw, 56px);
	font-family: var(--bs-body-font-family, "Lato", sans-serif);
	color: var(--encre, #1f2226);
}

#cvjqueryext .ui-widget,
#cvjqueryext .ui-widget-content,
#cvjqueryext .ui-widget-header {
	font-family: inherit !important;
	color: inherit;
	background: transparent;
	border: 0;
}

/* ---------- En-têtes de panneaux (Navigation, Composition, Personnalisation) : titres du thème ---------- */
#cvjqueryext .ui-tabs-nav {
	padding: 0;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--trait, #dde0e4);
}

#cvjqueryext .ui-tabs-nav > li.ui-state-active,
#cvjqueryext .ui-tabs-nav > li.ui-state-active a {
	color: var(--encre, #1f2226) !important;
	background: transparent !important;
}

#cvjqueryext .ui-tabs-nav > li.ui-state-active {
	margin-bottom: -1px;
	border: 0 !important;
	border-bottom: 3px solid var(--orange, #f06449) !important;
	border-radius: 0 !important;
}

#cvjqueryext .ui-tabs-nav > li.ui-state-active > a {
	padding: 0 0 8px;
	font-family: var(--titre, "Outfit", "Lato", sans-serif);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* ---------- Outils (Couleurs, Texte, Upload, Images) : tuiles arrondies, active en orange pâle ---------- */
#cvjqueryext #cv-customizeControls > .ui-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 14px;
	border-bottom: 0;
}

#cvjqueryext #cv-customizeControls > .ui-tabs-nav > li,
#cvjqueryext #cv-customizeControls > .ui-tabs-nav > li.ui-state-active {
	margin: 0 !important;
	background: var(--brume, #f3f4f6) !important;
	border: 2px solid transparent !important;
	border-radius: var(--r-bouton, .625rem) !important;
	transition: background-color .2s var(--doux, ease), border-color .2s var(--doux, ease);
}

#cvjqueryext #cv-customizeControls > .ui-tabs-nav > li:hover {
	background: var(--orange-pale, #fdeae5) !important;
}

#cvjqueryext #cv-customizeControls > .ui-tabs-nav > li.ui-state-active {
	background: var(--orange-pale, #fdeae5) !important;
	border-color: var(--orange, #f06449) !important;
}

#cvjqueryext #cv-customizeControls > .ui-tabs-nav > li > a {
	padding: 8px 6px !important;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--encre, #1f2226) !important;
}

#cvjqueryext #cv-customizeControls .tab-icon-text {
	font-size: 13px;
	color: var(--encre, #1f2226);
}

#cvjqueryext #cv-customizeControls .bg-icon {
	background-color: var(--encre, #1f2226);
}

#cvjqueryext #cv-customizeControls > .ui-tabs-nav > li.ui-state-active .bg-icon {
	background-color: var(--orange, #f06449);
}

/* ---------- Bouton principal « Ajouter au panier » : .btn-primary du thème (fond saumon, ombre orange) ---------- */
#cvjqueryext #cv-saveCompositionButton,
#cvjqueryext #cv-optionsButton {
	display: inline-flex;
	gap: .5rem;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	min-height: 54px;
	padding: .6875rem 1.5rem;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--encre, #1f2226);
	text-transform: none;
	background: #f9b3a2;
	border: 2px solid #f9b3a2;
	border-radius: var(--r-bouton, .625rem);
	box-shadow: 0 4px 0 var(--orange, #f06449);
	transition: background-color .2s var(--doux, ease), box-shadow .15s var(--doux, ease), transform .15s var(--doux, ease);
}

#cvjqueryext #cv-saveCompositionButton:hover,
#cvjqueryext #cv-optionsButton:hover {
	background: #fbc4b7;
	border-color: #fbc4b7;
}

#cvjqueryext #cv-saveCompositionButton:active,
#cvjqueryext #cv-optionsButton:active {
	box-shadow: 0 0 0 var(--orange, #f06449);
	transform: translateY(4px);
}

#cvjqueryext #cv-saveCompositionButton:focus-visible,
#cvjqueryext #cv-optionsButton:focus-visible {
	outline: 0;
	box-shadow: 0 4px 0 var(--orange, #f06449), 0 0 0 3px rgba(240, 100, 73, .5);
}

/* ---------- Boutons secondaires « Upload » / « Ajouter » (texte) : bouton contour encre du thème ---------- */
#cvjqueryext .fileinput-button,
#cvjqueryext #submit-add-text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: .5rem 1.25rem;
	font-weight: 700;
	color: var(--encre, #1f2226);
	cursor: pointer;
	background: var(--blanc, #fff);
	border: 2px solid var(--encre, #1f2226);
	border-radius: var(--r-bouton, .625rem);
	transition: background-color .2s var(--doux, ease);
}

#cvjqueryext .fileinput-button:hover,
#cvjqueryext #submit-add-text:hover {
	background: var(--brume, #f3f4f6);
}

#cvjqueryext #submit-add-text {
	margin-top: 10px;
	font-family: inherit;
	font-size: 16px;
}

/* ---------- Outils d'édition sous la composition (Supprimer, Placer devant / derrière… pour textes et images) ---------- */
#cvjqueryext #cv-editionToolsPanel {
	padding-top: 10px;
	background: transparent;
	border: 0;
	opacity: 1;
}

#cvjqueryext #cv-editionToolsPanel button {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	min-height: 40px;
	padding: 0 14px;
	margin: 0 6px 6px 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--encre, #1f2226);
	cursor: pointer;
	background: var(--blanc, #fff);
	border: 2px solid var(--encre, #1f2226);
	border-radius: var(--r-petit, .375rem);
	transition: background-color .2s var(--doux, ease);
}

#cvjqueryext #cv-editionToolsPanel button:hover {
	background: var(--brume, #f3f4f6);
}

#cvjqueryext #cv-editionToolsPanel button .editionTools-text {
	font: inherit;
	color: inherit;
}

/* ---------- Outil Texte : zone de saisie et choix de police comme les champs du thème ---------- */
#cvjqueryext #text-content {
	box-sizing: border-box;
	width: 100%;
	padding: 12px 14px;
	font-family: inherit;
	color: var(--encre, #1f2226);
	background: var(--blanc, #fff);
	border: 1px solid #b9bec5;
	border-radius: var(--r-bouton, .625rem);
}

#cvjqueryext #text-content:hover,
#cvjqueryext #font-family-button:hover {
	border-color: var(--encre, #1f2226);
}

#cvjqueryext #text-content:focus {
	outline: 0;
	border-color: var(--orange, #f06449);
	box-shadow: 0 0 0 3px rgba(240, 100, 73, .35);
}

#cvjqueryext #font-family-button {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 14px;
	color: var(--encre, #1f2226);
	text-transform: none;
	background: var(--blanc, #fff) !important;
	border: 1px solid #b9bec5 !important;
	border-radius: var(--r-bouton, .625rem) !important;
}

/* ---------- Outil Texte : Gras et alignement en boutons bascule, comme les tuiles d'outils ----------
   (le buttonset() jQuery UI du moteur ne s'applique qu'à moitié : les cases / radios natives restaient visibles ;
   elles sont masquées mais gardent le focus clavier et l'état :checked lu par le moteur, le libellé sert de bouton) */
#cvjqueryext #text-style-selector,
#cvjqueryext #text-alignment-selector {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

#cvjqueryext #text-style-selector input,
#cvjqueryext #text-alignment-selector input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
	opacity: 0;
}

#cvjqueryext #text-style-selector label,
#cvjqueryext #text-alignment-selector label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: 0;
	font-size: 17px;
	color: var(--encre, #1f2226);
	cursor: pointer;
	background: var(--brume, #f3f4f6);
	border: 2px solid transparent;
	border-radius: var(--r-petit, .375rem);
	transition: background-color .2s var(--doux, ease), border-color .2s var(--doux, ease);
}

#cvjqueryext #text-style-selector label:hover,
#cvjqueryext #text-alignment-selector label:hover {
	background: var(--orange-pale, #fdeae5);
}

#cvjqueryext #text-style-selector input:checked + label,
#cvjqueryext #text-alignment-selector input:checked + label {
	background: var(--orange-pale, #fdeae5);
	border-color: var(--orange, #f06449);
}

#cvjqueryext #text-style-selector input:focus-visible + label,
#cvjqueryext #text-alignment-selector input:focus-visible + label {
	box-shadow: 0 0 0 3px rgba(240, 100, 73, .5);
}

/* ---------- Options (taille…) : libellé et liste déroulante comme les champs du thème ---------- */
#cvjqueryext #cv-optionsPanel .ui-accordion-header,
#cvjqueryext #cv-optionsPanel .ui-accordion-header-active {
	height: auto;
	padding: 10px 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--encre, #1f2226) !important;
	text-transform: none;
	background: var(--brume, #f3f4f6) !important;
	border-radius: var(--r-petit, .375rem);
}

/* accordéon non repliable (collapsible:false) : le triangle jQuery UI chevauchait le libellé */
#cvjqueryext #cv-optionsPanel .ui-accordion-header-icon {
	display: none;
}

#cvjqueryext select {
	height: 50px;
	padding: 0 14px;
	font-family: inherit;
	color: var(--encre, #1f2226);
	background-color: var(--blanc, #fff);
	border: 1px solid #b9bec5;
	border-radius: var(--r-bouton, .625rem);
}

#cvjqueryext select:hover {
	border-color: var(--encre, #1f2226);
}

/* ---------- Quantité : même boîte que le sélecteur de quantité de la fiche ---------- */
#cvjqueryext .ui-spinner {
	height: 50px;
	overflow: hidden;
	background: var(--blanc, #fff);
	border: 1px solid #b9bec5 !important;
	border-radius: var(--r-bouton, .625rem);
}

#cvjqueryext .ui-spinner-input {
	height: 100%;
	margin: 0 32px 0 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--encre, #1f2226);
}

#cvjqueryext .ui-spinner-button {
	border-left: 1px solid var(--trait, #dde0e4);
}

#cvjqueryext .ui-spinner-button:hover {
	background: var(--brume, #f3f4f6);
}

/* ---------- Prix : chiffre du prix de la fiche ---------- */
#cvjqueryext #cv-priceContainer,
#cvjqueryext .cv-priceTotal {
	color: var(--encre, #1f2226) !important;
}

#cvjqueryext #cv-price {
	font-family: var(--titre, "Outfit", "Lato", sans-serif);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* ---------- Page produit : bouton « Personnaliser » sur toute la largeur de la colonne d'achat ----------
   (le <form name="designerInput"> injecté sort du <p class="customizeBtn"> : on le cible directement) */
form[name="designerInput"] {
	margin: 20px 0 0;
}

form[name="designerInput"] .cv-customize-btn {
	width: 100%;
	min-height: 54px;
	font-size: 17px;
}

/* ---------- Bouton Upload : taille de texte des boutons du thème ---------- */
#cvjqueryext .fileinput-button,
#cvjqueryext .fileinput-button span {
	font-size: 16px;
}

/* ---------- Réglette de qualité d'image : couleurs du thème (vert succès → orange → rouge danger) ---------- */
#cvjqueryext .cv-quality-slider {
	background: linear-gradient(to bottom, #1e7b4f 0%, var(--orange, #f06449) 55%, #ff4657 100%);
}

#cvjqueryext .cv-quality-bottom .cv-quality-slider {
	background: linear-gradient(to left, #1e7b4f 0%, var(--orange, #f06449) 55%, #ff4657 100%);
}

#cvjqueryext .cv-quality-text-info {
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--encre, #1f2226);
}

#cvjqueryext .cv-quality-indicator {
	background-color: var(--blanc, #fff);
	border: 2px solid var(--encre, #1f2226);
}

#cvjqueryext .cv-quality-indicator-perfect {
	border-color: #1e7b4f;
	box-shadow: 0 0 0 4px rgba(30, 123, 79, .3);
}

#cvjqueryext .cv-quality-indicator-low {
	border-color: #ff4657;
	box-shadow: 0 0 0 4px rgba(255, 70, 87, .3);
}

/* ---------- Liste des images envoyées : bouton « Supprimer » en bouton secondaire du thème ---------- */
#cvjqueryext #fileupload .files button {
	min-height: 36px;
	padding: 0 12px;
	margin-top: 6px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--encre, #1f2226);
	cursor: pointer;
	background: var(--blanc, #fff);
	border: 2px solid var(--encre, #1f2226);
	border-radius: var(--r-petit, .375rem);
}

#cvjqueryext #fileupload .files button:hover {
	background: var(--brume, #f3f4f6);
}