/**
 * Theme Name:     Hello Elementor Child
 * Author:         Elementor Team
 * Template:       hello-elementor
 * Text Domain:	   hello-elementor-child
 * Description:    Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
 */

/*
Theme Name: Selto Child
Template: REMPLACER-PAR-LE-DOSSIER-DU-THEME-PARENT
Version: 1.0.0
Description: Thème enfant Selto Distribution — formulaire de contact dynamique.
*/

/* =========================================================================
 *  ⚠️  À LIRE AVANT DE COLLER
 *
 *  Ton style.css contient DÉJÀ un en-tête généré par le plugin de thème
 *  enfant (Theme Name, Template, etc.). Ne remplace PAS cet en-tête :
 *  garde le tien tel quel et colle uniquement TOUT CE QUI SUIT cette ligne.
 *  La valeur de `Template:` doit rester le nom exact du dossier du thème
 *  parent — s'il est faux, WordPress refuse d'activer le thème enfant.
 * ====================================================================== */

/* =========================================================================
 *  FORMULAIRE DE CONTACT SELTO
 *  Reprise fidèle du design system du site Next.js
 *  (03-DESIGN-SYSTEM.md — refonte 2026-07).
 *  Tout est confiné sous `.selto-form` : aucune règle globale, donc aucun
 *  risque d'effet de bord sur le thème parent.
 * ====================================================================== */

.selto-form {
	/* Palette de marque Selto. */
	--selto-red: #c8102e;
	--selto-red-deep: #9e0c24;
	--selto-red-soft: rgba(200, 16, 46, 0.05);
	--selto-red-ring: rgba(200, 16, 46, 0.2);
	--selto-paper: #ffffff;
	--selto-ink: #1a1512;
	--selto-ink-faint: #8a847c;
	--selto-line: #e4e0d9;

	/* Couleurs des textes posés DIRECTEMENT sur le fond de la page (libellés,
	   indications, messages). Réglées pour un fond SOMBRE, puisque la page qui
	   accueille le formulaire est en fond noir. L'intérieur des champs reste
	   blanc avec du texte foncé, comme sur le site Next.js.
	   Pour poser ce formulaire sur un fond clair : [selto_contact_form theme="light"] */
	--selto-on-bg: #ffffff;
	--selto-on-bg-faint: #b0aaa2;
	--selto-on-bg-error: #ff8a9b;
	--selto-on-bg-success: #4ade80;

	--selto-radius: 6px;
	--selto-radius-lg: 8px;
	--selto-gap: 20px;
	--selto-field-height: 44px;

	color: var(--selto-on-bg) !important;
}

/* --- Pourquoi des `!important` sur les couleurs -------------------------
   Le thème parent impose ses propres couleurs de `label`, `input` et
   `button` avec des sélecteurs souvent plus prioritaires que les miens
   (`.entry-content label`, `body .site-main input`…). Sans `!important`,
   les libellés repassent au noir du thème et deviennent illisibles sur le
   fond sombre. Ces déclarations sont toutes confinées à `.selto-form` :
   elles ne peuvent rien casser ailleurs sur le site.
   Seules les COULEURS sont forcées — jamais la mise en page.
   -------------------------------------------------------------------- */

/* Variante fond clair — rétablit exactement les couleurs du site Next.js. */
.selto-form--light {
	--selto-on-bg: #1a1512;
	--selto-on-bg-faint: #8a847c;
	--selto-on-bg-error: #c8102e;
	--selto-on-bg-success: #15803d;
}

.selto-form *,
.selto-form *::before,
.selto-form *::after {
	box-sizing: border-box;
}

/* Indispensable : sans `!important`, `display: flex` l'emporterait sur
   l'attribut [hidden] et les panneaux masqués resteraient visibles. */
.selto-form [hidden] {
	display: none !important;
}

.selto-form .selto-form__form {
	display: flex;
	flex-direction: column;
	gap: var(--selto-gap);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* Un panneau = un type de demande. Même rythme vertical que le formulaire. */
.selto-form .selto-form__panel {
	display: flex;
	flex-direction: column;
	gap: var(--selto-gap);
	margin: 0;
	padding: 0;
	border: 0;
}

.selto-form .selto-form__field {
	display: block;
	margin: 0;
}

/* --- Libellés et indications ------------------------------------------ */

/* Le sélecteur `*` couvre les éléments que GTranslate insère dans le texte
   traduit (il enveloppe les textes dans des balises <font>). */
.selto-form.selto-form .selto-form__label,
.selto-form.selto-form .selto-form__label * {
	color: var(--selto-on-bg) !important;
}

.selto-form .selto-form__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	-webkit-user-select: none;
	user-select: none;
}

.selto-form.selto-form .selto-form__hint,
.selto-form.selto-form .selto-form__hint * {
	color: var(--selto-on-bg-faint) !important;
}

.selto-form .selto-form__hint {
	display: block;
	margin-top: 2px;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
}

/* --- Champs ------------------------------------------------------------ */

.selto-form .selto-form__input,
.selto-form .selto-form__select,
.selto-form .selto-form__textarea {
	display: block;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	margin: 6px 0 0;
	border: 1px solid var(--selto-line) !important;
	border-radius: var(--selto-radius);
	background-color: var(--selto-paper) !important;
	background-image: none;
	box-shadow: none;
	color: var(--selto-ink) !important;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.selto-form .selto-form__input,
.selto-form .selto-form__select {
	height: var(--selto-field-height);
	padding: 0 16px;
}

.selto-form .selto-form__textarea {
	min-height: 140px;
	padding: 12px 16px;
	line-height: 1.5;
	resize: vertical;
}

/* Chevron dessiné plutôt que la flèche native : identique sur tous les
   navigateurs, et insensible aux styles de select du thème parent. */
.selto-form .selto-form__select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238a847c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
	cursor: pointer;
}

.selto-form .selto-form__select--type {
	font-weight: 700;
}

.selto-form .selto-form__input::placeholder,
.selto-form .selto-form__textarea::placeholder {
	color: var(--selto-ink-faint);
}

.selto-form .selto-form__input:focus-visible,
.selto-form .selto-form__select:focus-visible,
.selto-form .selto-form__textarea:focus-visible {
	border-color: var(--selto-red) !important;
	box-shadow: 0 0 0 2px var(--selto-red-ring);
	outline: none;
}

.selto-form .selto-form__input[aria-invalid="true"],
.selto-form .selto-form__select[aria-invalid="true"],
.selto-form .selto-form__textarea[aria-invalid="true"] {
	border-color: var(--selto-red) !important;
	box-shadow: 0 0 0 2px var(--selto-red-ring);
}

.selto-form .selto-form__input:disabled,
.selto-form .selto-form__select:disabled,
.selto-form .selto-form__textarea:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

/* --- Grille deux colonnes ---------------------------------------------- */

.selto-form .selto-form__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--selto-gap);
}

@media (min-width: 640px) {
	.selto-form .selto-form__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- Livraison Oui / Non ----------------------------------------------- */

.selto-form .selto-form__radios {
	display: flex;
	gap: 12px;
	margin-top: 8px;
}

.selto-form .selto-form__radio {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 10px 16px;
	border: 1px solid var(--selto-line) !important;
	border-radius: var(--selto-radius);
	background-color: var(--selto-paper) !important;
	color: var(--selto-ink) !important;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.selto-form .selto-form__radio input[type="radio"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--selto-red);
	cursor: pointer;
}

/* `is-checked` est posée par le script ; `:has()` couvre le cas où le
   script n'aurait pas encore tourné. Les deux donnent le même rendu. */
.selto-form .selto-form__radio.is-checked,
.selto-form .selto-form__radio.is-checked *,
.selto-form .selto-form__radio:has(input[type="radio"]:checked),
.selto-form .selto-form__radio:has(input[type="radio"]:checked) * {
	border-color: var(--selto-red) !important;
	background-color: var(--selto-red-soft) !important;
	color: var(--selto-red) !important;
}

/* Le `*` ci-dessus atteint aussi le bouton radio lui-même : on lui rend
   sa case blanche, sinon il se fondrait dans la carte. */
.selto-form .selto-form__radio.is-checked input[type="radio"],
.selto-form .selto-form__radio:has(input[type="radio"]:checked) input[type="radio"] {
	border: 0 !important;
	background-color: transparent !important;
}

.selto-form .selto-form__radio:focus-within {
	box-shadow: 0 0 0 2px var(--selto-red-ring);
}

/* --- Messages d'erreur -------------------------------------------------- */

.selto-form.selto-form .selto-form__errors,
.selto-form.selto-form .selto-form__errors * {
	color: var(--selto-on-bg-error) !important;
}

.selto-form .selto-form__errors {
	margin: 4px 0 0;
	padding: 0;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.4;
}

/* --- Bouton d'envoi ----------------------------------------------------- */

.selto-form .selto-form__actions {
	display: flex;
}

.selto-form .selto-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 54px;
	margin: 0;
	padding: 0 28px;
	border: 1.5px solid transparent;
	border-radius: var(--selto-radius-lg);
	background-color: var(--selto-red) !important;
	color: #ffffff !important;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.selto-form .selto-form__submit:hover,
.selto-form .selto-form__submit:focus {
	background-color: var(--selto-red-deep) !important;
	color: #ffffff !important;
}

.selto-form .selto-form__submit * {
	color: inherit !important;
}

.selto-form .selto-form__submit:focus-visible {
	outline: 2px solid var(--selto-red);
	outline-offset: 2px;
}

.selto-form .selto-form__submit:active {
	transform: translateY(1px);
}

.selto-form .selto-form__submit:disabled {
	pointer-events: none;
	opacity: 0.5;
}

/* --- Retour d'envoi ----------------------------------------------------- */

.selto-form .selto-form__feedback {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
}

.selto-form.selto-form .selto-form__feedback--success,
.selto-form.selto-form .selto-form__feedback--success * {
	font-weight: 500;
	color: var(--selto-on-bg-success) !important;
}

.selto-form.selto-form .selto-form__feedback--error,
.selto-form.selto-form .selto-form__feedback--error * {
	color: var(--selto-on-bg-error) !important;
}

/* --- Piège à robots ----------------------------------------------------- */

/* Hors écran plutôt que `display: none` : certains robots ignorent les
   champs masqués en CSS, mais remplissent ceux-ci. */
.selto-form .selto-form__honeypot {
	position: absolute;
	top: auto;
	left: -9999px;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* --- Mouvement réduit --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.selto-form .selto-form__input,
	.selto-form .selto-form__select,
	.selto-form .selto-form__textarea,
	.selto-form .selto-form__radio,
	.selto-form .selto-form__submit {
		transition: none;
	}

	.selto-form .selto-form__submit:active {
		transform: none;
	}
}

[hidden] {
    display: none !important;
}