/**
 * WYBE Satisfaction — styles du formulaire front.
 * Toutes les valeurs de marque sont exposées en variables CSS (thématisables par site).
 * Référence : Figma OLD (cf. CLAUDE.md §2).
 */

/* Polices locales (RGPD : aucun appel réseau tiers) — récupérées du site Bastions.
   Light Condensed = libellés (poids 300). Bold Condensed (titres/chiffres 700) : à ajouter
   dès réception du fichier — voir assets/fonts/README.txt. */
@font-face {
	font-family: 'Helvetica Neue LT';
	src: url('../fonts/HelveticaNeueLTStd-LtCn.woff') format('woff'),
	     url('../fonts/HelveticaNeueLTStd-LtCn.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

/* Joost — titres (kicker, titres de section, MERCI, salutation), conforme Figma OLD. */
@font-face {
	font-family: 'Joost';
	src: url('../fonts/Joost-Medium.woff2') format('woff2'),
	     url('../fonts/Joost-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Joost';
	src: url('../fonts/Joost-Bold.woff2') format('woff2'),
	     url('../fonts/Joost-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Marque */
	--wybe-sat-green: #4E7D56;
	--wybe-sat-beige: #F7F4EC;
	--wybe-sat-black: #000000;
	--wybe-sat-white: #FFFFFF;

	/* Échelle de notation 1→10 (dégradé doré → vert, couleur fixe par case) */
	--wybe-sat-scale-1: #B19045;
	--wybe-sat-scale-2: #A38D47;
	--wybe-sat-scale-3: #988B49;
	--wybe-sat-scale-4: #8D894B;
	--wybe-sat-scale-5: #83874D;
	--wybe-sat-scale-6: #7A854F;
	--wybe-sat-scale-7: #6F8350;
	--wybe-sat-scale-8: #658152;
	--wybe-sat-scale-9: #5B8054;
	--wybe-sat-scale-10: #4E7D56;

	/* Opacités de l'échelle (case voilée vs révélée) */
	--wybe-sat-scale-idle-opacity: 0.3;
	--wybe-sat-scale-active-opacity: 1;

	/* Carrés de notes */
	--wybe-sat-scale-size: 50px;
	--wybe-sat-scale-radius: 10px;

	/* Typographie (police hébergée en local, cf. assets/fonts + @font-face à déclarer) */
	--wybe-sat-font-heading: 'Helvetica Neue LT', 'Helvetica Neue', Arial, sans-serif;
	--wybe-sat-font-body: 'Helvetica Neue LT', 'Helvetica Neue', Arial, sans-serif;
	/* Titres d'affichage (Figma OLD : Joost) */
	--wybe-sat-font-title: 'Joost', 'Helvetica Neue LT', Arial, sans-serif;
}

/* ============================================================
   Conteneur racine
   ============================================================ */
.wybe-sat {
	--wybe-sat-content-max: 940px;
	--wybe-sat-content-top: 90px; /* espace entre le header et le contenu (ajustable) */
	font-family: var(--wybe-sat-font-body);
	color: var(--wybe-sat-black);
	box-sizing: border-box;
	position: relative;
	margin: 0 auto;
	line-height: 1.5;
}
.wybe-sat *,
.wybe-sat *::before,
.wybe-sat *::after {
	box-sizing: border-box;
}

/* Skin full : univers Figma complet (fond beige + header/footer verts). */
.wybe-sat--full {
	background: var(--wybe-sat-beige);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow-x: clip; /* pour les ellipses de courbure débordantes */
}

/* ============================================================
   Header / Footer (skin full uniquement)
   ============================================================ */
.wybe-sat__header {
	background: var(--wybe-sat-green);
	color: var(--wybe-sat-white);
	text-align: center;
	padding: 28px 20px;
}
.wybe-sat__logo {
	font-family: var(--wybe-sat-font-heading);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.wybe-sat__kicker {
	margin: 10px 0 0;
	font-family: var(--wybe-sat-font-title);
	font-weight: 700;
	font-size: clamp(30px, 4.2vw, 60px); /* Figma : 60px @1440 */
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: uppercase;
}
.wybe-sat__footer {
	background: var(--wybe-sat-green);
	color: var(--wybe-sat-white);
	text-align: center;
	padding: 50px 20px;
	font-size: 13px;
}
.wybe-sat__logo-img {
	display: inline-block;
	height: 46px;
	width: auto;
}
.wybe-sat__footer-logo {
	display: inline-block;
	height: 42px;
	width: auto;
	margin-bottom: 12px;
}
.wybe-sat__footer-copy {
	margin: 0;
}
/* Courbure du haut du footer : ellipse beige débordante (sens inversé = concave) */
.wybe-sat--full .wybe-sat__footer {
	position: relative;
	padding-top: 70px; /* 50px de marge + place pour la courbure concave */
}
.wybe-sat--full .wybe-sat__footer::before {
	content: '';
	position: absolute;
	left: -10%;
	right: -10%;
	top: -24px;
	height: 48px;
	background: var(--wybe-sat-beige);
	border-radius: 50%;
}

/* Décor : feuilles tropicales (skin full uniquement) */
.wybe-sat__decor {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
.wybe-sat__decor--back {
	z-index: 0; /* derrière le contenu */
}
.wybe-sat__decor--front {
	z-index: 4; /* feuille header, au-dessus (sur zone vide) */
}
/* Le contenu passe devant les feuilles d'arrière-plan */
.wybe-sat__header,
.wybe-sat__progress,
.wybe-sat__form,
.wybe-sat__footer {
	position: relative;
	z-index: 1;
}
.wybe-sat__leaf {
	position: absolute;
	height: auto;
	will-change: transform;
}
.wybe-sat__leaf--top {
	top: 40px;
	right: 0;
	width: 160px;
}
.wybe-sat__leaf--intro,
.wybe-sat__leaf--mid {
	left: -70px;
	top: 330px;
	display: none;
}
.wybe-sat__leaf--intro {
	width: min(340px, 30vw);
}
.wybe-sat__leaf--mid {
	left: -40px;
	width: min(170px, 15vw);
}
/* Feuille intro : page 1 uniquement ; feuille mid : autres pages */
.wybe-sat[data-current="1"] .wybe-sat__leaf--intro {
	display: block;
}
.wybe-sat:not([data-current="1"]) .wybe-sat__leaf--mid {
	display: block;
}

/* Sourires de l'échelle */
.wybe-sat-scale__face img {
	display: block;
	width: 34px;
	height: 34px;
}

/* En skin bare : pas d'aplats décoratifs, on hérite du thème hôte. */
.wybe-sat--bare .wybe-sat__header,
.wybe-sat--bare .wybe-sat__footer,
.wybe-sat--bare .wybe-sat__decor {
	display: none;
}

/* ============================================================
   Barre de progression (toujours visible, cliquable)
   ============================================================ */
.wybe-sat__progress {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
	padding: 22px 16px;
	margin: 0 auto;
	color: var(--wybe-sat-green);
}
.wybe-sat__step-dot {
	position: relative;
	z-index: 1;
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
}
/* Trait de liaison entre pastilles adjacentes */
.wybe-sat__step-dot + .wybe-sat__step-dot::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 100%;
	width: 30px;
	height: 1.5px;
	background: currentColor;
	opacity: 0.4;
}
.wybe-sat__step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	background: var(--wybe-sat-beige); /* masque le trait derrière la pastille */
	font-family: var(--wybe-sat-font-heading);
	font-weight: 700;
	font-size: 24px;
	line-height: 1;
	transition: background 0.2s, color 0.2s;
}
.wybe-sat__step-dot.is-done .wybe-sat__step-num,
.wybe-sat__step-dot.is-active .wybe-sat__step-num {
	background: var(--wybe-sat-green);
	color: var(--wybe-sat-white);
	border-color: var(--wybe-sat-green);
}
/* Neutralise tout fond injecté par le thème au survol des pastilles */
.wybe-sat__step-dot:hover,
.wybe-sat__step-dot:focus,
.wybe-sat__step-dot:focus-visible {
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
}

/* Skin full : la progression prolonge le header vert (ronds blancs) */
.wybe-sat--full .wybe-sat__header {
	padding-bottom: 12px;
}
.wybe-sat--full .wybe-sat__progress {
	position: relative;
	z-index: 2;
	background: var(--wybe-sat-green);
	margin: 0;
	padding: 4px 16px 26px;
	color: var(--wybe-sat-white);
}
/* Courbure du bas du hero : ellipse verte débordante (le vert bombe vers le beige) */
.wybe-sat--full .wybe-sat__progress::after {
	content: '';
	position: absolute;
	left: -10%;
	right: -10%;
	bottom: -24px;
	height: 48px;
	background: var(--wybe-sat-green);
	border-radius: 50%;
}
.wybe-sat--full .wybe-sat__step-num {
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--wybe-sat-white);
	background: var(--wybe-sat-green); /* masque le trait */
}
.wybe-sat--full .wybe-sat__step-dot.is-active .wybe-sat__step-num,
.wybe-sat--full .wybe-sat__step-dot.is-done .wybe-sat__step-num {
	background: var(--wybe-sat-white);
	color: var(--wybe-sat-green);
	border-color: var(--wybe-sat-white);
}

/* ============================================================
   Steps / contenu
   ============================================================ */
.wybe-sat__form {
	flex: 1 0 auto; /* occupe la hauteur restante → total 100vh min */
	display: flex;
	flex-direction: column;
	justify-content: center; /* centre verticalement le contenu de l'étape */
	width: 100%;
	max-width: var(--wybe-sat-content-max);
	margin: 0 auto;
	padding: var(--wybe-sat-content-top) 20px 48px;
}
.wybe-sat__step {
	text-align: center;
}
/* Step 1 : contenu aligné à gauche (Figma) ; le bouton reste centré via .wybe-sat__nav */
.wybe-sat__step--intro {
	text-align: left;
}
.wybe-sat__greeting {
	font-family: var(--wybe-sat-font-body);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	margin: 0 0 18px;
}
.wybe-sat__intro-text {
	max-width: 780px;
}
.wybe-sat__intro-text p {
	font-family: var(--wybe-sat-font-body);
	font-weight: 300;
	font-size: 20px;
	line-height: 1.25;
	margin: 0 0 18px;
}
.wybe-sat__merci-text p {
	font-weight: 300;
	font-size: 18px;
	margin: 0 0 16px;
}
.wybe-sat__section-title {
	font-family: var(--wybe-sat-font-title);
	font-weight: 700;
	font-size: clamp(26px, 2.8vw, 40px); /* Figma : 40px @1440 */
	text-transform: uppercase;
	letter-spacing: 0;
	line-height: 1;
	margin: 8px 0 12px;
}
.wybe-sat__section-title--merci {
	font-size: clamp(44px, 5vw, 70px); /* Figma : 70px @1440 */
	margin-bottom: 20px;
}
.wybe-sat__section-subtitle {
	font-weight: 300;
	font-size: 16px;
	max-width: 620px;
	margin: 0 auto 32px;
}

/* ============================================================
   Questions
   ============================================================ */
.wybe-sat-q {
	border: none;
	margin: 0 0 32px;
	padding: 0;
	min-width: 0; /* évite le débordement des fieldset */
}
/* Séparateur doré entre les questions (Figma « Line ») */
.wybe-sat-sep {
	height: 1px;
	background: var(--wybe-sat-scale-1);
	opacity: 0.7;
	margin: 0 0 32px;
}
.wybe-sat-q__label {
	display: block;
	font-weight: 300;
	font-size: 18px;
	color: var(--wybe-sat-black);
	text-align: center;
	margin-bottom: 20px;
	padding: 0;
	width: 100%;
}
.wybe-sat-q__req {
	color: var(--wybe-sat-green);
}
.wybe-sat-q__error {
	color: #b3261e;
	font-size: 13px;
	margin: 10px 0 0;
}
.wybe-sat-q.has-error .wybe-sat-q__label {
	color: #b3261e;
}

.wybe-sat-q__text,
.wybe-sat-q__textarea {
	width: 100%;
	max-width: 620px;
	padding: 12px 14px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	font: inherit;
	font-weight: 300;
	background: var(--wybe-sat-white);
}
.wybe-sat-q__textarea {
	resize: vertical;
}
.wybe-sat-q__date {
	display: inline-block;
	max-width: 260px;
	padding: 12px 16px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	font: inherit;
	font-weight: 300;
	background: var(--wybe-sat-white);
}

/* Choix unique (privé / pro) */
.wybe-sat-choice {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}
.wybe-sat-choice__opt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: 2px solid var(--wybe-sat-green);
	border-radius: 30px;
	cursor: pointer;
	font-weight: 300;
}
.wybe-sat-choice__opt input {
	accent-color: var(--wybe-sat-green);
}

/* ============================================================
   Échelle 1→10 (couleur fixe par case, opacité seule)
   ============================================================ */
.wybe-sat-scale {
	display: flex;
	align-items: center;
	justify-content: space-between; /* émojis aux extrémités */
	gap: 16px;
	flex-wrap: nowrap; /* jamais sur 2 lignes */
	width: 100%;
}
.wybe-sat-scale__face {
	flex: 0 0 auto;
	line-height: 0;
}
.wybe-sat-scale__face svg {
	display: block;
}
.wybe-sat-scale__face--min {
	color: var(--wybe-sat-scale-1); /* doré */
}
.wybe-sat-scale__face--max {
	color: var(--wybe-sat-scale-10); /* vert */
}
.wybe-sat-scale__cells {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	justify-content: space-between; /* cases réparties sur toute la largeur */
	gap: 4px;
	flex-wrap: nowrap;
}
.wybe-sat-scale__cell {
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Largeur cible mais rétrécissable → pleine largeur desktop, pas de débordement mobile */
	flex: 0 1 auto;
	width: var(--wybe-sat-scale-size);
	min-width: 0;
	aspect-ratio: 1 / 1;
	padding: 0;
	line-height: 1;
	border-radius: var(--wybe-sat-scale-radius);
	/* Couleur fixe forcée (empêche un thème d'injecter un fond au survol/focus) */
	background-color: var(--wybe-sat-cell-color) !important;
	background-image: none !important;
	border: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: none !important;
	color: var(--wybe-sat-white);
	font-family: var(--wybe-sat-font-heading);
	font-weight: 700;
	font-size: clamp(11px, 2.2vw, 25px);
	/* Toutes les notes actives par défaut (dégradé complet visible) */
	opacity: var(--wybe-sat-scale-active-opacity);
	transition: opacity 0.15s ease;
}
/* Une note choisie → les AUTRES cases de cette question passent en grisé */
.wybe-sat-scale__cells.has-selection .wybe-sat-scale__cell {
	opacity: var(--wybe-sat-scale-idle-opacity);
}
.wybe-sat-scale__cells.has-selection .wybe-sat-scale__cell.is-active,
.wybe-sat-scale__cell:hover,
.wybe-sat-scale__cell:focus-visible {
	opacity: var(--wybe-sat-scale-active-opacity);
	outline: none !important;
}

/* ============================================================
   Boutons de navigation
   ============================================================ */
.wybe-sat__nav {
	margin-top: 32px;
	text-align: center;
}
/* Bouton — DA exacte bastions.ch : pilule à double bordure dorée décalée (bas-gauche) */
.wybe-sat__btn {
	position: relative;
	display: inline-block;
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	cursor: pointer;
	background: transparent;
	color: #3E3E3E;
	border: 2px solid var(--wybe-sat-scale-1); /* #B19045 */
	border-radius: 500px;
	padding: 13px 40px;
	margin: 12px 10px 12px 10px; /* place pour la bordure décalée (déborde/anime sur tous les côtés) */
	font-family: var(--wybe-sat-font-title); /* Joost */
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0;
	text-transform: uppercase;
	text-decoration: none;
}
.wybe-sat__btn::before {
	content: '';
	position: absolute;
	top: 4px;
	right: 8px;
	bottom: -8px;
	left: -8px;
	border: 2px solid var(--wybe-sat-scale-1);
	border-radius: 500px;
	pointer-events: none;
	transition: top 0.3s ease, right 0.3s ease, bottom 0.3s ease, left 0.3s ease;
}
/* Survol : la seconde bordure glisse du bas-gauche vers le haut-droite (DA bastions.ch) */
.wybe-sat__btn:hover::before,
.wybe-sat__btn:focus-visible::before {
	top: -10px;
	right: -4px;
	bottom: 4px;
	left: 4px;
}
/* Le fond reste transparent quel que soit l'état (Elementor/thème injecte parfois une surcouche) */
.wybe-sat .wybe-sat__btn,
.wybe-sat .wybe-sat__btn:hover,
.wybe-sat .wybe-sat__btn:focus,
.wybe-sat .wybe-sat__btn:focus-visible,
.wybe-sat .wybe-sat__btn:active {
	background: transparent !important;
	background-image: none !important;
	color: #3E3E3E !important;
	box-shadow: none !important;
	outline: none !important;
	filter: none !important;
}
/* Neutralise une éventuelle surcouche ::after injectée par le thème */
.wybe-sat .wybe-sat__btn::after {
	display: none !important;
}

/* Champ email (step 1) */
.wybe-sat__field {
	margin: 24px auto 0;
	max-width: 420px;
	text-align: left;
}
.wybe-sat__field label {
	display: block;
	font-weight: 300;
	margin-bottom: 6px;
}
.wybe-sat__field input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	font: inherit;
	background: var(--wybe-sat-white);
}
.wybe-sat__field.has-error input {
	border-color: #b3261e;
}

/* Honeypot : hors écran (pas display:none pour ne pas alerter les bots) */
.wybe-sat__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wybe-sat-notice {
	padding: 16px;
	text-align: center;
}

/* Consentement RGPD */
.wybe-sat__consent {
	max-width: 620px;
	margin: 0 auto 8px;
	text-align: left;
	font-weight: 300;
	font-size: 15px;
}
.wybe-sat__consent label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
}
.wybe-sat__consent input {
	margin-top: 3px;
	accent-color: var(--wybe-sat-green);
}
.wybe-sat__consent a {
	color: var(--wybe-sat-green);
}
.wybe-sat__consent.has-error {
	color: #b3261e;
}

/* Message inline (anti-doublon, erreur soumission) */
.wybe-sat__message {
	margin: 0 auto 24px;
	max-width: 620px;
	padding: 14px 18px;
	border-radius: 8px;
	background: #fbeceb;
	color: #b3261e;
	font-weight: 300;
}
.wybe-sat__btn.is-busy {
	opacity: 0.6;
	cursor: default;
	pointer-events: none;
}

/* ============================================================
   Responsive (mobile-first friendly)
   ============================================================ */
/* Feuilles latérales masquées sous tablette (elles chevaucheraient le contenu) */
@media (max-width: 900px) {
	.wybe-sat__leaf--intro,
	.wybe-sat__leaf--mid {
		display: none !important;
	}
	.wybe-sat__leaf--top {
		width: 110px;
	}
}

@media (max-width: 600px) {
	.wybe-sat__form {
		padding: 60px 14px 40px;
	}
	/* Titre : peut passer sur 2 lignes, feuille header masquée pour ne pas le recouvrir */
	.wybe-sat__kicker {
		font-size: clamp(22px, 8vw, 40px);
	}
	.wybe-sat__leaf--top {
		display: none;
	}
	.wybe-sat__progress {
		gap: 16px;
	}
	.wybe-sat__step-num {
		width: 42px;
		height: 42px;
		font-size: 20px;
	}
	.wybe-sat__step-dot + .wybe-sat__step-dot::before {
		width: 16px;
	}
	.wybe-sat-scale {
		gap: 8px;
	}
	:root {
		--wybe-sat-scale-size: 38px;
	}
	.wybe-sat-scale__cells {
		gap: 3px;
	}
	.wybe-sat-scale__face img {
		width: 26px;
		height: 26px;
	}
}

@media (max-width: 400px) {
	.wybe-sat-scale {
		gap: 5px;
	}
	:root {
		--wybe-sat-scale-size: 27px;
	}
	.wybe-sat-scale__cells {
		gap: 2px;
	}
	.wybe-sat-scale__face img {
		width: 20px;
		height: 20px;
	}
	.wybe-sat__progress {
		gap: 10px;
	}
	.wybe-sat__step-num {
		width: 38px;
		height: 38px;
		font-size: 18px;
	}
}